/* ==========================================================================
   am-nav.css — couche d'harmonisation Anima Musica
   Chargée en dernier sur toutes les pages. Unifie :
     1. les 6 familles de bandeaux  -> un seul comportement
     2. l'onglet actif              -> bleu Anima
     3. les 11 familles de héros    -> le modèle sombre v10
   Réversible : retirer le <link> de cette feuille rend le site à son état
   précédent, aucune classe n'a été renommée dans le HTML.
   ========================================================================== */

:root{
  --am-blue:#75C4E7;
  --am-turq:#6AD5E7;
  --am-ink:#0c1012;
  --am-nav-h:74px;
}

/* ==========================================================================
   1. BANDEAU
   Transparent au-dessus du héro, plein bleu dès qu'on descend.
   ========================================================================== */
header.header, header.top, header.v10-top, header.am-top, header.brand-header{
  position:fixed !important;
  top:0; left:0; right:0;
  z-index:1000;
  background:transparent !important;
  box-shadow:none !important;
  border-bottom:none !important;
  transition:background .28s ease, box-shadow .28s ease, padding .28s ease;
}
/* voile sombre au repos : garantit la lisibilité des liens blancs même
   au-dessus d'un héro clair */
header.header::before, header.top::before, header.v10-top::before,
header.am-top::before, header.brand-header::before{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(6,10,13,.62) 0%, rgba(6,10,13,0) 100%);
  pointer-events:none;
  transition:opacity .28s ease;
}
/* état descendu */
body.am-scrolled header.header, body.am-scrolled header.top,
body.am-scrolled header.v10-top, body.am-scrolled header.am-top,
body.am-scrolled header.brand-header{
  background:var(--am-blue) !important;
  box-shadow:0 2px 20px rgba(0,0,0,.16) !important;
}
body.am-scrolled header.header::before, body.am-scrolled header.top::before,
body.am-scrolled header.v10-top::before, body.am-scrolled header.am-top::before,
body.am-scrolled header.brand-header::before{ opacity:0; }

/* logo et liens : blancs dans les deux états */
header .logo, header .v10-logo, header .am-logo, header .brand-logo{
  color:#fff !important; position:relative; z-index:2;
}
/* "Anima" en blanc, "Musica" dans la couleur de marque : turquoise au repos
   au-dessus du héro sombre, noir une fois le bandeau passé en bleu. */
header .logo .anima, header .v10-logo b, header .am-logo b{ color:#fff !important; }
header .logo .musica, header .logo > span:last-child,
header .v10-logo span, header .am-logo span,
header .v10-logo i, header .am-logo i{ color:#6AD5E7 !important; }
header .logo .anima, header .logo > span.anima{ color:#fff !important; }
body.am-scrolled header .logo .musica, body.am-scrolled header .logo > span:last-child,
body.am-scrolled header .v10-logo span, body.am-scrolled header .am-logo span,
body.am-scrolled header .v10-logo i, body.am-scrolled header .am-logo i{ color:#0b0f12 !important; }
body.am-scrolled header .logo .anima, body.am-scrolled header .logo > span.anima{ color:#fff !important; }

header nav a, header .nav a, header .v10-nav a, header .am-nav a{
  color:#fff !important;
  position:relative;
  z-index:2;
}

/* ==========================================================================
   2. ONGLET ACTIF
   Souligné bleu au repos (sur fond sombre), pastille blanche une fois
   le bandeau passé en bleu.
   ========================================================================== */
header nav a.am-active, header .nav a.am-active,
header .v10-nav a.am-active, header .am-nav a.am-active{
  color:var(--am-blue) !important;
}
header nav a.am-active::after, header .nav a.am-active::after,
header .v10-nav a.am-active::after, header .am-nav a.am-active::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:-7px;
  height:3px;
  border-radius:3px;
  background:var(--am-blue);
}
body.am-scrolled header nav a.am-active, body.am-scrolled header .nav a.am-active,
body.am-scrolled header .v10-nav a.am-active, body.am-scrolled header .am-nav a.am-active{
  color:#fff !important;
}
body.am-scrolled header nav a.am-active::after,
body.am-scrolled header .nav a.am-active::after,
body.am-scrolled header .v10-nav a.am-active::after,
body.am-scrolled header .am-nav a.am-active::after{
  background:#fff;
}

/* bouton Contact en pilule, cohérent partout */
header .btn-contact-header, header nav a.am-cta{
  background:#fff !important;
  color:#2f93bd !important;
  border:2px solid #fff !important;
  border-radius:30px !important;
}
header .btn-contact-header:hover, header nav a.am-cta:hover{
  background:transparent !important; color:#fff !important;
}
header .btn-contact-header.am-active::after, header nav a.am-cta.am-active::after{
  display:none;
}

/* accessibilité clavier */
header a:focus-visible, header button:focus-visible{
  outline:3px solid #fff; outline-offset:3px;
}
body.am-scrolled header a:focus-visible, body.am-scrolled header button:focus-visible{
  outline-color:var(--am-ink);
}

/* burger : blanc dans les deux états */
header .burger span, header .v10-burger, header .am-burger{ color:#fff !important; }
header .burger span{ background:#fff !important; }

/* menu déroulant mobile : fond plein, jamais transparent */
@media (max-width:900px){
  header .nav.active, header .nav.open,
  header .v10-nav.open, header .am-nav.open{
    background:var(--am-blue) !important;
  }
  header .nav.active a::after, header .v10-nav.open a::after,
  header .am-nav.open a::after{ display:none; }
  header .nav.active a.am-active, header .v10-nav.open a.am-active,
  header .am-nav.open a.am-active{
    color:#fff !important; text-decoration:underline; text-underline-offset:5px;
  }
}

/* ==========================================================================
   3. HÉROS
   Retiré. L'uniformisation des 11 familles de héros ajoutait un dégradé, un
   décalage vertical et des couleurs forcées par-dessus des héros qui avaient
   déjà les leurs : le résultat était décalé sur l'accueil. Chaque page garde
   donc son héro d'origine. Seules restent ici la taille du titre sur petit
   écran (section 6) et le porte-vidéos du héro (section 5).
   ========================================================================== */


/* Réserve de hauteur sous le bandeau fixe, uniquement pour les pages dont le
   premier bloc n'est pas un héro plein écran. */
body.am-nav-reserve{ padding-top:var(--am-nav-h); }
@media (max-width:900px){ body.am-nav-reserve{ padding-top:66px; } }

/* ==========================================================================
   4. MENU COMMUN
   Même markup sur toutes les pages ; ces règles le rendent autonome, y
   compris sur les pages qui n'avaient pas les styles du menu à dropdown.
   ========================================================================== */
header .nav{
  display:flex; align-items:center; gap:22px;
  list-style:none; margin:0; padding:0;
}
header .nav .nav-item{ position:relative; display:flex; align-items:center; }
header .nav .nav-link{
  display:inline-flex; align-items:center; gap:3px;
  background:none; border:none; cursor:pointer;
  color:#fff; text-decoration:none;
  font:600 .95rem/1.2 Montserrat,sans-serif;
  padding:8px 0; white-space:nowrap;
}
header .nav .caret{ transition:transform .25s ease; }
header .nav .nav-item.has-dd:hover > .nav-link .caret,
header .nav .nav-item.has-dd.open > .nav-link .caret{ transform:rotate(180deg); }

header .nav .dropdown{
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(8px);
  margin-top:14px; min-width:250px;
  background:#fff; border-radius:14px;
  box-shadow:0 12px 40px rgba(0,0,0,.18);
  padding:8px; opacity:0; visibility:hidden;
  transition:.22s ease; z-index:60;
}
header .nav .dropdown::before{
  content:''; position:absolute; top:-7px; left:50%;
  transform:translateX(-50%) rotate(45deg);
  width:14px; height:14px; background:#fff;
}
header .nav .nav-item.has-dd::after{ content:''; position:absolute; top:100%; left:0; right:0; height:20px; }
header .nav .nav-item:hover .dropdown,
header .nav .nav-item.open .dropdown{
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
}
header .nav .dropdown a{
  display:block; padding:11px 16px;
  color:#1d1d1f !important; font-size:.96rem; font-weight:500;
  border-radius:9px; white-space:nowrap; text-decoration:none;
}
header .nav .dropdown a:hover{ background:#eaf6fc; color:#0d6f96 !important; }
header .nav .dropdown a.am-active{ color:#0d6f96 !important; font-weight:700; }
header .nav .dropdown a.am-active::after{ display:none; }
header .nav .nav-link-mobile{ display:none; }

/* burger visible uniquement en petit écran */
header .burger, header .v10-burger, header .am-burger{ display:none; }

@media (max-width:1024px){
  header .burger, header .v10-burger, header .am-burger{
    display:flex; flex-direction:column; justify-content:center; align-items:center;
    width:48px; height:48px; background:none; border:none; cursor:pointer; z-index:60;
  }
  header .burger span{ display:block; width:26px; height:3px; background:#fff; border-radius:3px; margin:3px 0; transition:.25s; }
  header .nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:var(--am-blue); padding:14px 24px 22px;
    max-height:calc(100vh - 100%); overflow-y:auto;
  }
  header .nav.open, header .nav.active{ display:flex; }
  header .nav .nav-item{ width:100%; display:block; }
  header .nav .nav-link{ width:100%; padding:13px 0; font-size:1.05rem; }
  header .nav .dropdown{
    position:static; transform:none; opacity:1; visibility:visible;
    box-shadow:none; margin:0 0 8px; padding:0 0 0 12px;
    background:transparent; min-width:0;
  }
  header .nav .dropdown::before{ display:none; }
  header .nav .dropdown a{ color:#eaf6fc !important; padding:9px 0; font-weight:400; }
  header .nav .dropdown a:hover{ background:transparent; color:#fff !important; }
  header .nav .nav-link-mobile{ display:block; }
}

/* ==========================================================================
   5. HÉRO À DEUX VIDÉOS
   Les deux clips défilent en fondu, sans montage encodé en un seul fichier.
   ========================================================================== */
/* le conteneur doit rester hors du flux : le héro de l'accueil est en flex,
   un enfant en position relative y devient une colonne et écrase le texte */
.am-hero-slides{ position:absolute !important; inset:0 !important; z-index:0 !important;
  width:100% !important; height:100% !important; margin:0 !important; padding:0 !important;
  flex:none !important; display:block !important; }
.am-hero-slides .am-slide{
  position:absolute !important; inset:0 !important;
  width:100% !important; height:100% !important;
  max-width:none !important; border-radius:0 !important;
  object-fit:cover;
  opacity:0; transition:opacity 1s ease;
}
.am-hero-slides .am-slide.is-on{ opacity:1; }
@media (prefers-reduced-motion:reduce){
  .am-hero-slides .am-slide{ transition:none; }
}

/* ==========================================================================
   6. TAILLE DU TITRE DE HÉRO SUR PETIT ÉCRAN
   v11-carousel-home.css impose 12vw en !important, soit 47 px sur un
   téléphone de 390 px : le titre occupe tout l'écran et se coupe en morceaux.
   ========================================================================== */
@media (max-width:900px){
  .hero .hero-content h1,
  .hero h1, .v10-hero h1, .hero-section h1, .hero-title{
    font-size:clamp(1.45rem, 6.4vw, 2.1rem) !important;
    line-height:1.14 !important;
    letter-spacing:-.02em !important;
    hyphens:none !important;
    word-break:normal !important;
    overflow-wrap:break-word;
    margin-bottom:14px !important;
  }
  .hero .hero-content .subtitle,
  .hero .subtitle, .v10-hero .v10-lead, .hero-section p{
    font-size:.98rem !important;
    line-height:1.55 !important;
    max-width:34ch !important;
  }
  .hero .hero-content{ padding-left:20px !important; padding-right:20px !important; }
}
@media (max-width:420px){
  .hero .hero-content h1, .hero h1{
    font-size:clamp(1.32rem, 6vw, 1.8rem) !important;
  }
}

/* bouton Contact du menu simplifié */
header .nav .nav-cta{
  background:#fff !important; color:#2f93bd !important;
  padding:10px 24px; border-radius:30px; border:2px solid #fff;
}
header .nav .nav-cta:hover{ background:transparent !important; color:#fff !important; }
header .nav .nav-cta.am-active::after{ display:none; }
@media (max-width:1024px){
  header .nav .nav-cta{ width:auto; margin-top:10px; display:inline-block; }
}

/* ==========================================================================
   7. PAGES SARDOU JUNIOR
   Charte propre au spectacle : bleu marine et doré. Le bandeau et les appels
   à l'action y passent au doré ; la signature Anima Musica, elle, reste dans
   ses couleurs et ne prend jamais de doré.
   ========================================================================== */
body.am-sardou header.header, body.am-sardou header.top,
body.am-sardou header.am-top, body.am-sardou header.v10-top{
  border-bottom:1px solid rgba(201,169,98,.3);
}
body.am-sardou.am-scrolled header.header, body.am-sardou.am-scrolled header.top,
body.am-sardou.am-scrolled header.am-top, body.am-sardou.am-scrolled header.v10-top{
  background:#1E3A5F !important;
}
/* appel à l'action du bandeau : doré plein */
body.am-sardou header .nav .nav-cta,
body.am-sardou header .btn-contact-header{
  background:#C9A962 !important;
  color:#12202f !important;
  border-color:#C9A962 !important;
}
body.am-sardou header .nav .nav-cta:hover,
body.am-sardou header .btn-contact-header:hover{
  background:transparent !important;
  color:#D4B978 !important;
  border-color:#D4B978 !important;
}
/* onglet actif : doré au repos comme une fois descendu */
body.am-sardou header .nav a.am-active{ color:#D4B978 !important; }
body.am-sardou header .nav a.am-active::after,
body.am-sardou.am-scrolled header .nav a.am-active::after{ background:#C9A962 !important; }
body.am-sardou.am-scrolled header .nav a.am-active{ color:#D4B978 !important; }
/* menu déroulé sur petit écran */
@media (max-width:1024px){
  body.am-sardou header .nav.open, body.am-sardou header .nav.active{
    background:#1E3A5F !important;
  }
}
/* la signature du producteur garde ses couleurs : aucun doré dessus */
body.am-sardou header .logo, body.am-sardou header .am-logo,
body.am-sardou .am-foot-logo{ color:#fff !important; }
body.am-sardou header .logo .musica, body.am-sardou header .am-logo span,
body.am-sardou.am-scrolled header .logo .musica,
body.am-sardou.am-scrolled header .am-logo span{ color:#6AD5E7 !important; }

/* pied de page sur les pages Sardou : accents dorés, signature intacte */
body.am-sardou .am-foot h4{ color:#C9A962 !important; }
body.am-sardou .am-foot a:hover{ color:#D4B978 !important; }
body.am-sardou .am-foot a:focus-visible{ outline-color:#C9A962 !important; }
body.am-sardou .am-foot-logo, body.am-sardou .am-foot-logo span{ color:#fff !important; }