/* ============================================================
   CHARTE ARES v7 — feuille d'harmonisation unique
   Chargée en DERNIER sur toutes les pages : source de vérité.
   Grille 1240px · échelle typographique unique · boutons unifiés
   Validée par mesures : header 93px partout, H2 41,6px, texte 17px
   ============================================================ */

:root {
  --ch-largeur: 1240px;
  --ch-gouttiere: 22px;
  --ch-pad-section: clamp(56px, 7vw, 88px);
  --ch-h1: clamp(1.9rem, 3.2vw, 2.6rem);
  --ch-h3: 1.18rem;
  --ch-texte: 17px;
  --ch-interligne: 1.6;
  --ch-muted: #a4b3bf;
  --ch-bordure: #1f3049;
}

/* ---------- 1. GRILLE : largeur et rythme vertical uniformes ---------- */
main > section,
main > .section {
  width: min(100% - 2 * var(--ch-gouttiere), var(--ch-largeur)) !important;
  max-width: var(--ch-largeur) !important;
  margin-inline: auto !important;
  padding-block: var(--ch-pad-section) !important;
}
main > .hero-wrap,
.bandeau-presentation {
  width: 100% !important;
  max-width: none !important;
  padding-block: 0 !important;
}
main > .hero-wrap .hero-inner { padding-block: var(--ch-pad-section); }

/* ---------- 2. EN-TÊTE : identique partout (93px vérifiés) ---------- */
.site-header { border-bottom: 1px solid var(--ch-bordure) !important; }
.header-inner {
  max-width: var(--ch-largeur) !important;
  min-height: 0 !important;
  margin-inline: auto !important;
  padding: 12px var(--ch-gouttiere) !important;
  gap: 16px !important;
}
/* Le bandeau ne déborde jamais, quelle que soit la largeur (mesure d'audit 360 px). */
.site-header, .header-inner { max-width: 100% !important; box-sizing: border-box !important; }
.main-nav { gap: 4px !important; }
.main-nav a {
  font-size: 13.5px !important;
  padding: 8px 11px !important;
  line-height: 1.2 !important;
  min-height: 0 !important;
  min-width: 0 !important;
  display: inline-block !important;
}
.brand-texte { font-size: 17px !important; }
.site-header .brand-shield { height: 30px !important; }

/* ---------- 3. TYPOGRAPHIE : une seule échelle ---------- */
main h1 { font-size: var(--ch-h1) !important; line-height: 1.12 !important; letter-spacing: -0.03em !important; max-width: none !important; }
main h2 { font-size: var(--ch-h1) !important; line-height: 1.15 !important; letter-spacing: -0.03em !important; }
main h3 { font-size: var(--ch-h3) !important; line-height: 1.35 !important; letter-spacing: -0.01em !important; }
main p, main li { font-size: var(--ch-texte) !important; line-height: var(--ch-interligne) !important; }
main .eyebrow { font-size: 12.5px !important; letter-spacing: 0.16em !important; }
figcaption, .legende { font-size: 16px !important; line-height: 1.45 !important; }

.section-heading { margin-block-end: clamp(24px, 3vw, 38px) !important; }
.section-heading p { margin-block-start: 10px !important; max-width: 62ch; }
main h3 + p { margin-block-start: 8px !important; }

/* Paragraphes de lecture : justifiés (ordinateur uniquement) */
.seo-content p, .founder-card p, .expertise-body p, .trust-card p,
.safety-audio-copy p, .ajax-media-copy p, .audiophile-detail p,
.alert-content p, .process-step p, .contact-card > p,
.audio-visual-card p, .product-visual p, .ajax-official-card p {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}

/* ---------- 4. BOUTONS : un seul système ---------- */
main .btn, main a.btn, main button.btn,
main .btn-primary, main .btn-secondary, main .btn-demande {
  display: inline-block;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  padding: 13px 22px !important;
  border-radius: 12px !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  animation: none !important;
  text-shadow: none !important;
  transition: filter .18s ease;
}
main .btn-primary, main .btn:not(.btn-secondary):not(.btn-demande):not(.sec) {
  background: linear-gradient(135deg, #ff3b30, #e02b20) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 6px 24px rgba(255, 59, 48, .22) !important;
}
main .btn-demande {
  background: linear-gradient(135deg, #ff8a00, #ff6a00) !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 6px 24px rgba(255, 138, 0, .22) !important;
}
main .btn-secondary {
  background: rgba(255, 255, 255, .05) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, .2) !important;
  box-shadow: none !important;
}
main .btn:hover, main .btn-primary:hover, main .btn-demande:hover, main .btn-secondary:hover {
  filter: brightness(1.1);
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- 5. PIED DE PAGE : identique partout ---------- */
.footer {
  border-top: 1px solid var(--ch-bordure) !important;
  background: none !important;
  margin-top: 0 !important;
  padding: 30px 0 !important;
}
.footer-inner {
  max-width: var(--ch-largeur) !important;
  margin: 0 auto !important;
  padding: 0 var(--ch-gouttiere) !important;
  display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: space-between;
}
.footer p { margin: 0 !important; color: var(--ch-muted) !important; font-size: 14px !important; }
.footer a { color: #7cbcff !important; text-decoration: none !important; }
.footer a:hover { text-decoration: underline !important; }

/* ---------- 6. MENU : flex identique => hauteur identique ---------- */
.main-nav {
  margin-left: auto !important;
  flex: 0 1 auto !important;
  justify-content: flex-end !important;
  align-items: center !important;
}

/* ---------- 7. Panneaux clairs résiduels : fond sombre charte ---------- */
.hero-image-panel, .presentation-cover, .presentation-ad {
  background: #0d1829 !important;
  border-color: rgba(255,255,255,.08) !important;
  color: #e6edf3 !important;
}
.hik-product-stage {
  background: #0d1829 !important;
  border: 1px solid rgba(255,255,255,.08) !important;
}
.hik-product-stage::before { display: none !important; }

/* ---------- 10. IMAGE DE PRÉSENTATION (accueil) : pleine largeur, homogène avec la page ---------- */
.bandeau-presentation {
  background: none !important;
  width: 100% !important;
  max-width: none !important;
  margin: clamp(24px, 3vw, 40px) 0 0 !important;
  padding: 0 !important;
}
.bandeau-presentation img {
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: clamp(300px, 28vw, 540px) !important;
  object-fit: cover;
  margin: 0 !important;
  border-radius: 0;
  border: 0;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
/* Héro accueil : voile bleu nuit sur la photo AJAX (noirs → bleu nuit) + fondus haut/bas */
.hero-bg::after {
  background:
    linear-gradient(180deg, #070d18, rgba(7, 13, 24, 0.15) 22%, rgba(7, 13, 24, 0.15) 72%, #070d18),
    linear-gradient(100deg, rgba(7, 13, 24, 0.9) 16%, rgba(7, 13, 24, 0.5) 46%, rgba(7, 13, 24, 0.1) 100%),
    rgba(13, 27, 51, 0.5) !important;
}

/* Fondu bleu nuit sur les bords : l'image se fond dans la charte du site */
.bandeau-presentation { position: relative; }
.bandeau-presentation::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(7, 13, 24, 0.45), transparent 24%, transparent 76%, rgba(7, 13, 24, 0.55)),
    linear-gradient(90deg, rgba(7, 13, 24, 0.5), transparent 14%, transparent 86%, rgba(7, 13, 24, 0.5));
}

/* ---------- 9. FOND DE PAGE : identique sur les 25 pages ---------- */
/* Valeurs mesurées sur les pages produits : halo rouge discret + voile bleu nuit */
body {
  /* pas de « fixed » : background-attachment fixe est bogué sur iPhone/iPad */
  background:
    radial-gradient(circle at 15% 5%, rgba(255, 59, 48, 0.18), transparent 480px),
    linear-gradient(135deg, rgba(24, 43, 71, 0.42) 0 0),
    #070d18 !important;
}

/* ---------- 8. Mobile : lisibilité ---------- */
@media (max-width: 640px) {
  :root { --ch-texte: 16px; --ch-pad-section: 44px; }
  .section-heading p { max-width: none; }
  main p, main li { text-align: left !important; hyphens: none !important; }
}

/* ---------- 13. SONORISATION : images verticales aussi larges que les horizontales ---------- */
.audio-visual-card img,
.audiophile-photo-strip img {
  object-fit: cover !important;
  object-position: center 32% !important;
  background: none !important;
  width: 100% !important;
}
.audiophile-photo-strip img { height: 300px !important; }
.audio-visual-card img { height: 320px !important; }
.audio-visual-card-large img { height: 430px !important; }

/* Images verticales : pleine largeur ET affichées en entier (aucun recadrage) */
img[src*="audio-salon-plage-enceintes-rouges"],
img[src*="audio-systeme-pavillons"],
img[src*="audio-atelier-pavillon"] {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: fill !important;
}

/* ---------- 11. MENU MOBILE : mécanisme unique et fiable (source de vérité charte) ---------- */
@media (max-width: 980px) {
  .mobile-menu { display: inline-block !important; margin-left: auto; }
  .main-nav { display: none !important; }
  /* AUDIT 12/07/2026 : à 360 px, le bloc de marque (logo + texte) poussait le bouton burger
     HORS du bandeau (débordement mesuré de 2 px sur ajax / videosurveillance / maus / brouillard /
     audio). Le burger ne doit jamais être comprimé, la marque doit pouvoir se réduire. */
  /* CAUSE EXACTE (mesurée) : le bloc de marque .brand porte flex-shrink:0 — il ne se réduit pas et
     pousse le burger hors du bandeau (250 px + gap + 63 px > 321 px de large utile à 360 px).
     La marque doit pouvoir rétrécir ; le burger, jamais. */
  .header-inner { flex-wrap: nowrap !important; gap: 8px !important; }
  .header-inner > .brand,
  .header-inner > *:first-child { flex: 0 1 auto !important; min-width: 0 !important; overflow: hidden !important; }
  .mobile-menu { flex: 0 0 auto !important; padding: 8px 10px !important; }
  .main-nav.is-open {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    position: fixed !important;
    top: var(--header-h, 56px);
    left: 0; right: 0;
    z-index: 99;
    background: rgba(8, 15, 26, 0.98);
    padding: 10px 22px 18px;
    gap: 2px !important;
    border-bottom: 1px solid var(--ch-bordure);
    max-height: calc(100vh - var(--header-h, 56px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .main-nav.is-open a {
    font-size: 16px !important;
    padding: 13px 10px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0;
  }
}

/* ---------- 14. RANGÉES DE BOUTONS (CTA de fin de page) : uniformes et centrées ---------- */
/* Cible les paragraphes contenant plusieurs boutons (méthode, prestations)
   et les blocs .cta-actions (AJAX, MAUS, Projet MAUS). Le héro n'est pas concerné. */
main p:has(> a.btn + a.btn),
main .cta-actions {
  display: flex !important;
  flex-wrap: wrap;
  gap: 12px !important;
  justify-content: center !important;
  align-items: stretch !important;
}
main p:has(> a.btn + a.btn) .btn,
main .cta-actions .btn {
  flex: 0 1 auto;
  min-width: min(280px, 100%);
  text-align: center !important;
  box-sizing: border-box;
}

/* ---------- 12. FILET DE SÉCURITÉ CSS : le contenu ne peut JAMAIS rester invisible ---------- */
/* Même si le JavaScript échoue (vieux iPhone, réseau), tout apparaît après 2,5 s. */
@keyframes chApparition { to { opacity: 1; transform: none; visibility: visible; } }
[data-reveal] { animation: chApparition 0.4s ease 2.5s forwards; }