/* =========================================================================
   AM-UI — feuille d'unification Anima Musica
   À charger EN DERNIER sur toutes les pages.
   Elle n'ajoute pas de nouvelles classes à écrire : elle aligne celles
   qui existent déjà sur un seul système de boutons, de héros et de ruptures.
   Trois points de rupture : 1100 px, 780 px, 520 px.
   ========================================================================= */

:root{
  --am-bleu:#75C4E7;
  --am-bleu-fonce:#3096bf;
  --am-noir:#0b0f12;
  --am-encre:#141414;
  --am-gris:#5f6b71;
  --am-trait:#e6edf1;
  --am-creme:#f7f3ea;
  --am-or:#c9a962;
  --am-rayon:30px;
  --am-conteneur:min(1180px, 100% - 48px);
}

/* ------------------------------------------------------------------ *
   1. GARDE-FOUS RESPONSIVE
 * ------------------------------------------------------------------ */
html{ -webkit-text-size-adjust:100%; }
body{ overflow-x:hidden; }
img, video, iframe, svg{ max-width:100%; height:auto; }
table{ max-width:100%; }
pre, code{ white-space:pre-wrap; word-break:break-word; }

/* plus aucun élément ne déborde horizontalement */
*, *::before, *::after{ min-width:0; }

/* ------------------------------------------------------------------ *
   2. BOUTONS — toutes les variantes existantes alignées
 * ------------------------------------------------------------------ */
.btn, .v10-btn, .btn-primary, .btn-secondary, .btn-outline, .btn-white,
.btn-gold, .btn-event, .btn-dossier, .btn-formule, .forfait-btn,
.btn-primary-hero, .btn-primary-part, .btn-outline-white, .btn-email-cta,
.btn-contact-header, .part-zoom-btn, .partage-btn, .btn-google{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  font-family:inherit;
  font-size:.95rem;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.005em;
  padding:14px 26px;
  border-radius:var(--am-rayon);
  border:2px solid transparent;
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
  -webkit-appearance:none;
  appearance:none;
  min-height:48px;            /* cible tactile confortable */
  max-width:100%;
}
.btn:hover, .v10-btn:hover, .btn-primary:hover, .btn-secondary:hover,
.btn-outline:hover, .btn-white:hover, .btn-gold:hover, .btn-event:hover,
.btn-dossier:hover, .btn-formule:hover, .forfait-btn:hover,
.btn-primary-hero:hover, .btn-primary-part:hover, .btn-outline-white:hover,
.btn-email-cta:hover, .btn-contact-header:hover, .part-zoom-btn:hover,
.partage-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(20,20,20,.14);
}
.btn:active, .v10-btn:active, .btn-primary:active, .btn-email-cta:active{
  transform:translateY(0);
  box-shadow:none;
}

/* variante pleine : bleu Anima */
.btn-primary, .btn-primary-hero, .btn-primary-part, .btn-email-cta,
.v10-btn:not(.alt), .btn:not(.alt):not(.btn-secondary):not(.btn-outline):not(.btn-white){
  background:var(--am-bleu);
  color:#fff;
  border-color:var(--am-bleu);
}
.btn-primary:hover, .btn-primary-hero:hover, .btn-primary-part:hover,
.btn-email-cta:hover, .v10-btn:not(.alt):hover{
  background:var(--am-bleu-fonce);
  border-color:var(--am-bleu-fonce);
  color:#fff;
}

/* variante contour */
.btn-secondary, .btn-outline, .btn.alt, .v10-btn.alt, .part-zoom-btn, .partage-btn{
  background:transparent;
  color:var(--am-encre);
  border-color:var(--am-trait);
}
.btn-secondary:hover, .btn-outline:hover, .btn.alt:hover, .v10-btn.alt:hover,
.part-zoom-btn:hover, .partage-btn:hover{
  border-color:var(--am-bleu);
  color:var(--am-bleu-fonce);
  background:transparent;
}

/* variante blanche, sur fond sombre ou photo */
.btn-white, .btn-contact-header{
  background:#fff;
  color:var(--am-encre);
  border-color:#fff;
}
.btn-white:hover, .btn-contact-header:hover{
  background:var(--am-creme);
  border-color:var(--am-creme);
  color:var(--am-encre);
}
.btn-outline-white{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.75);
}
.btn-outline-white:hover{
  background:rgba(255,255,255,.12);
  border-color:#fff;
  color:#fff;
}

/* variante Sardou, dorée : conservée mais alignée en forme */
.btn-gold, .btn-event, .btn-dossier{
  background:var(--am-or);
  color:#1a2744;
  border-color:var(--am-or);
}
.btn-gold:hover, .btn-event:hover, .btn-dossier:hover{
  background:#b8974f;
  border-color:#b8974f;
  color:#1a2744;
}

/* le bouton du bandeau reste plus compact */
.btn-contact-header{
  padding:10px 20px;
  min-height:42px;
  font-size:.88rem;
}

/* groupes de boutons : jamais de débordement, jamais de bouton orphelin */
.hero-buttons, .hero-ctas, .v10-hero-actions, .contact-btns, .btn-group, .cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.hero .hero-buttons, .hero .hero-ctas, .v10-hero .v10-hero-actions{
  justify-content:center;
}

/* ------------------------------------------------------------------ *
   3. HÉROS — neuf familles ramenées à une seule respiration
 * ------------------------------------------------------------------ */
.hero, .v10-hero, .hero-section, .concept-hero, .conditions-hero,
.artiste-hero, .art-hero, .partenaires-page-hero{
  position:relative;
  padding-block:clamp(56px, 8vw, 104px);
  padding-inline:24px;
}
.hero-content, .hero-inner, .v10-hero-inner, .hero-text{
  width:var(--am-conteneur);
  margin-inline:auto;
}
.hero h1, .v10-hero h1, .hero-section h1, .concept-hero h1,
.conditions-hero h1, .artiste-hero h1, .art-hero h1,
.partenaires-page-hero h1, .hero-title{
  font-size:clamp(1.9rem, 4.6vw, 3.4rem);
  line-height:1.12;
  letter-spacing:-.015em;
  margin:0 0 .5em;
  overflow-wrap:break-word;
  hyphens:auto;
}
.hero-sub, .hero-subtitle, .hero p, .v10-hero p{
  font-size:clamp(.98rem, 1.5vw, 1.12rem);
  line-height:1.6;
  max-width:62ch;
}
.hero .hero-sub, .hero .hero-subtitle, .v10-hero p{
  margin-inline:auto;
}
.hero-label, .hero-badge{
  display:inline-block;
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.hero-buttons, .hero-ctas, .v10-hero-actions{
  margin-top:clamp(20px, 3vw, 30px);
}
.hero-infos, .hero-info-row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 22px;
  align-items:center;
}
.hero-poster, .hero-video{
  max-width:100%;
  height:auto;
  border-radius:20px;
}

/* ------------------------------------------------------------------ *
   4. TROIS POINTS DE RUPTURE, LES MÊMES PARTOUT
 * ------------------------------------------------------------------ */
@media (max-width:1100px){
  :root{ --am-conteneur:min(940px, 100% - 40px); }
}

@media (max-width:780px){
  :root{ --am-conteneur:calc(100% - 32px); }
  .hero, .v10-hero, .hero-section, .concept-hero, .conditions-hero,
  .artiste-hero, .art-hero, .partenaires-page-hero{
    padding-block:clamp(40px, 9vw, 64px);
    padding-inline:16px;
    text-align:center;
  }
  .hero-infos, .hero-info-row{ justify-content:center; }
  .hero-buttons, .hero-ctas, .v10-hero-actions, .contact-btns{
    justify-content:center;
  }
  /* toute grille à colonnes multiples repasse en une colonne */
  .grid, .grid-2, .grid-3, .grid-4, .cards, .cartes,
  .services-grid, .programme-grid, .intro-grid, .footer-grid{
    grid-template-columns:1fr !important;
  }
}

@media (max-width:520px){
  .btn, .v10-btn, .btn-primary, .btn-secondary, .btn-outline, .btn-white,
  .btn-gold, .btn-event, .btn-dossier, .btn-formule, .forfait-btn,
  .btn-primary-hero, .btn-primary-part, .btn-outline-white, .btn-email-cta{
    width:100%;                 /* boutons pleine largeur, empilés */
    padding:15px 20px;
  }
  .btn-contact-header, .partage-btn, .part-zoom-btn{ width:auto; }
  .hero-buttons, .hero-ctas, .v10-hero-actions, .contact-btns{
    flex-direction:column;
    align-items:stretch;
    gap:10px;
  }
  .hero h1, .v10-hero h1, .hero-title{ font-size:clamp(1.7rem, 7.5vw, 2.2rem); }
}

/* ------------------------------------------------------------------ *
   5. ACCESSIBILITÉ
 * ------------------------------------------------------------------ */
a:focus-visible, button:focus-visible, .btn:focus-visible,
.v10-btn:focus-visible, .btn-email-cta:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:3px solid var(--am-bleu-fonce);
  outline-offset:3px;
  border-radius:6px;
}
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ------------------------------------------------------------------ *
   6. CADRAGE DE LA VIDÉO DU HÉROS
   La vidéo est en object-fit:cover : elle est rognée. Sans réglage, le
   navigateur montre le centre de l'image, ce qui donne le plafond quand
   la scène est filmée en contre-plongée.
   Monter la valeur descend le cadrage : 50% = centre, 100% = bas de l'image.
   Une seule valeur à changer ci-dessous.
 * ------------------------------------------------------------------ */
:root{
  --am-hero-video-y:72%;         /* ordinateur */
  --am-hero-video-y-mobile:78%;  /* téléphone  */
}
.hero-video, .hero video, .v10-hero video, .hero-section video{
  object-fit:cover;
  object-position:center var(--am-hero-video-y);
}
@media (max-width:780px){
  .hero-video, .hero video, .v10-hero video, .hero-section video{
    object-position:center var(--am-hero-video-y-mobile);
  }
}

/* ------------------------------------------------------------------ *
   7. CARTES À BOUTON : le bouton descend en bas de carte
   Sur les cartes « preuves » et assimilées, le bouton collait au texte
   et se retrouvait à une hauteur différente d'une carte à l'autre selon
   la longueur du paragraphe. Il est maintenant poussé en bas et aligné
   sur toutes les cartes de la rangée.
   Régler l'espace au-dessus avec la variable ci-dessous.
 * ------------------------------------------------------------------ */
:root{ --am-card-btn-espace:26px; }

.v10-card, .v11-card:has(.v10-btn), .proof-card, .case-card{
  display:flex;
  flex-direction:column;
}
.v10-card > .v10-btn,
.v10-card > .btn,
.proof-card > .v10-btn,
.case-card > .v10-btn{
  margin-top:auto;
  align-self:flex-start;
}
.v10-card > p:last-of-type,
.proof-card > p:last-of-type,
.case-card > p:last-of-type{
  margin-bottom:var(--am-card-btn-espace);
}
.v10-card > img{ flex:none; }

@media (max-width:520px){
  .v10-card > .v10-btn,
  .v10-card > .btn{ align-self:stretch; }
}