/* ═══════════════════════════════════════════════════════════════
   AUDIOTECHNIK — CSS GLOBAL
   Version : 1.0.0
   ─────────────────────────────────────────────────────────────
   Ce fichier est l'unique source de vérité du design du site.
   Il est chargé une seule fois, mis en cache par le navigateur,
   et partagé par toutes les pages.

   SOMMAIRE
   1. Polices (Inter auto-hébergée)
   2. Tokens (variables de la charte)
   3. Fondations (scope .atk)
   4. Sections & en-têtes de section
   5. Boutons
   6. Eyebrow (sur-titre)
   7. Listes à coches
   8. Cartes (services, secteurs)
   9. Barre d'expertise
   10. Étapes numérotées
   11. Section CTA sombre
   12. Animations partagées
   13. Responsive

   RÈGLE D'OR : aucun sélecteur global (pas de "*", pas de
   "body", pas de "h2" nus) pour ne jamais interférer avec
   Elementor. Tout est porté par des classes préfixées .atk-.
   ═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────
   1. POLICES — Inter auto-hébergée
   (latin : couvre tous les accents français + œ)
───────────────────────────────────────────── */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/inter-latin-700-normal.woff2') format('woff2');
}


/* ─────────────────────────────────────────────
   2. TOKENS — variables de la charte
   Modifier ici = modifier tout le site.
───────────────────────────────────────────── */
:root {
  /* Couleurs de marque */
  --at-blue:        #0055FF;   /* accent principal */
  --at-blue-dark:   #0040CC;   /* hover boutons */
  --at-blue-deep:   #1428A0;   /* dégradés, accents secondaires */
  --at-navy:        #0B1120;   /* fonds sombres uniquement */
  --at-cyan:        #00FFFF;   /* point décoratif barre d'expertise */

  /* Couleurs fonctionnelles */
  --at-ink:         #111111;   /* titres */
  --at-text:        #1A1F36;   /* texte courant */
  --at-text-soft:   #4B5563;   /* paragraphes secondaires */
  --at-text-muted:  #6B7280;   /* descriptions discrètes */
  --at-bg-soft:     #F7F9FC;   /* fonds de sections alternées */
  --at-border:      #E2E8F0;   /* bordures de cartes */
  --at-border-hov:  #B0C4F0;   /* bordures au survol */

  /* Texte sur fond sombre */
  --at-on-dark:        #FFFFFF;
  --at-on-dark-soft:   #C5D5F5;
  --at-on-dark-muted:  #7A95CC;

  /* Typographie */
  --at-font: 'Inter', system-ui, -apple-system, sans-serif;
  --at-h1: clamp(2.4rem, 4.5vw, 3.8rem);
  --at-h2: clamp(1.8rem, 2.5vw, 2.4rem);

  /* Géométrie */
  --at-radius:      4px;       /* boutons, images */
  --at-radius-card: 8px;       /* cartes */
  --at-container:   1160px;
  --at-section-pad: clamp(64px, 9vw, 100px);

  /* Ombres */
  --at-shadow-card:  0 2px 8px rgba(0, 0, 0, .04);
  --at-shadow-hover: 0 12px 32px rgba(20, 40, 160, .10);
  --at-shadow-img:   0 30px 70px rgba(0, 0, 0, .10);
  --at-shadow-btn:   0 10px 24px rgba(0, 85, 255, .35);
}


/* ─────────────────────────────────────────────
   3. FONDATIONS — scope .atk
   Chaque bloc HTML Elementor commence par
   <section class="atk ..."> ou <div class="atk ...">
───────────────────────────────────────────── */
.atk,
.atk *,
.atk *::before,
.atk *::after {
  box-sizing: border-box;
}
.atk {
  font-family: var(--at-font);
  color: var(--at-text);
  line-height: 1.65;
  margin: 0;
}
.atk img {
  max-width: 100%;
  height: auto;
  display: block;
}
.atk h1, .atk h2, .atk h3, .atk h4 {
  margin: 0 0 1rem;
  font-weight: 700;
  color: var(--at-ink);
  font-family: var(--at-font);
  line-height: 1.2;
}
.atk p  { margin: 0 0 1rem; }
.atk ul { margin: 0; }

/* Conteneur centré standard */
.atk-container {
  max-width: var(--at-container);
  margin: 0 auto;
}


/* ─────────────────────────────────────────────
   4. SECTIONS & EN-TÊTES DE SECTION
───────────────────────────────────────────── */
.atk-section {
  padding: var(--at-section-pad) 20px;
}
.atk-section--soft {
  background: var(--at-bg-soft);
  border-top: 1px solid var(--at-border);
}
.atk-section--white {
  background: #FFFFFF;
  border-top: 1px solid var(--at-border);
}
.atk-section--dark {
  background: var(--at-navy);
  border-top: 1px solid #1E2A45;
}

/* En-tête de section centré : h2 + introduction */
.atk-section-header {
  text-align: center;
  max-width: 680px;
  margin: 0 auto 60px;
}
.atk-section-header h2 {
  font-size: var(--at-h2);
  margin-bottom: .75rem;
}
.atk-section-header p {
  font-size: 1.05rem;
  color: var(--at-text-soft);
  margin: 0;
}
.atk-section--dark .atk-section-header h2 { color: var(--at-on-dark); }
.atk-section--dark .atk-section-header p  { color: var(--at-on-dark-muted); }


/* ─────────────────────────────────────────────
   5. BOUTONS
───────────────────────────────────────────── */
.atk-btn {
  display: inline-block;
  background: var(--at-blue);
  color: #FFFFFF;
  padding: 17px 38px;
  border: none;
  border-radius: var(--at-radius);
  font-family: var(--at-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
}
.atk-btn:hover,
.atk-btn:focus-visible {
  background: var(--at-blue-dark);
  color: #FFFFFF;
  transform: translateY(-2px);
  box-shadow: var(--at-shadow-btn);
}
.atk-btn:focus-visible {
  outline: 2px solid var(--at-blue);
  outline-offset: 3px;
}

/* Variante blanche, pour fonds sombres */
.atk-btn--white {
  background: #FFFFFF;
  color: var(--at-navy);
}
.atk-btn--white:hover,
.atk-btn--white:focus-visible {
  background: #E8EEFF;
  color: var(--at-navy);
  box-shadow: 0 10px 24px rgba(255, 255, 255, .18);
}

/* Variante contour, usage secondaire */
.atk-btn--ghost {
  background: transparent;
  color: var(--at-blue);
  border: 2px solid var(--at-blue);
  padding: 15px 36px;
}
.atk-btn--ghost:hover,
.atk-btn--ghost:focus-visible {
  background: var(--at-blue);
  color: #FFFFFF;
}


/* ─────────────────────────────────────────────
   6. EYEBROW — sur-titre
───────────────────────────────────────────── */
/* Version pastille (héros sur fond sombre) */
.atk-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: rgba(0, 85, 255, .20);
  border: 1px solid rgba(0, 85, 255, .40);
  color: #8EB3FF;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .3rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}
.atk-eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--at-blue);
  border-radius: 50%;
  animation: atk-pulse 1.8s infinite;
}

/* Version texte (au-dessus d'un h2 sur fond clair) */
.atk-kicker {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--at-blue);
  text-transform: uppercase;
  letter-spacing: .18em;
  margin-bottom: .6rem;
}
.atk-section--dark .atk-kicker { color: #4B6FA8; }


/* ─────────────────────────────────────────────
   7. LISTES À COCHES
───────────────────────────────────────────── */
.atk-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.atk-list li {
  position: relative;
  padding-left: 28px;
  margin-bottom: 18px;
  font-size: 1rem;
  color: var(--at-ink);
  font-weight: 600;
}
.atk-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: -1px;
  color: var(--at-blue);
  font-weight: 900;
  font-size: 1.1rem;
}
.atk-list li span {
  display: block;
  font-size: .88rem;
  color: var(--at-text-muted);
  font-weight: 400;
  margin-top: 3px;
  line-height: 1.5;
}


/* ─────────────────────────────────────────────
   8. CARTES
───────────────────────────────────────────── */
/* Grilles porteuses */
.atk-grid {
  display: grid;
  gap: 28px;
  max-width: var(--at-container);
  margin: 0 auto;
}
.atk-grid--4 { grid-template-columns: repeat(4, 1fr); }
.atk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.atk-grid--2 { grid-template-columns: repeat(2, 1fr); }

/* Carte service : icône + titre + texte, centrée */
.atk-card {
  background: #FFFFFF;
  padding: 38px 28px;
  border-radius: var(--at-radius-card);
  border: 1px solid var(--at-border);
  box-shadow: var(--at-shadow-card);
  text-align: center;
  transition: transform .25s, border-color .25s, box-shadow .25s;
}
.atk-card:hover {
  transform: translateY(-5px);
  border-color: var(--at-border-hov);
  box-shadow: var(--at-shadow-hover);
}
.atk-card svg {
  width: 46px;
  height: 46px;
  color: var(--at-blue);
  margin: 0 auto 22px;
}
.atk-card h4 {
  font-size: 1.1rem;
  margin-bottom: 12px;
}
.atk-card p {
  font-size: .92rem;
  color: var(--at-text-soft);
  margin: 0;
  line-height: 1.6;
}

/* Carte secteur : alignée à gauche, avec pictogramme et chip */
.atk-card--left {
  text-align: left;
  padding: 36px 28px;
  box-shadow: none;
}
.atk-card--left:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(20, 40, 160, .09);
}
.atk-card-ico {
  font-size: 2rem;
  margin-bottom: 1rem;
  display: block;
}
.atk-card-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--at-ink);
  margin-bottom: .5rem;
}
.atk-card--left p {
  font-size: .9rem;
  line-height: 1.65;
}
.atk-chip {
  display: inline-block;
  margin-top: .9rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--at-blue);
  background: #EFF6FF;
  padding: .2rem .65rem;
  border-radius: 100px;
}


/* ─────────────────────────────────────────────
   9. BARRE D'EXPERTISE
───────────────────────────────────────────── */
.atk-expertise-bar {
  background: var(--at-navy);
  color: #FFFFFC;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
  padding: 22px 20px;
  font-family: var(--at-font);
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.6px;
}
.atk-expertise-bar span {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.atk-expertise-bar span::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--at-cyan);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ─────────────────────────────────────────────
   10. ÉTAPES NUMÉROTÉES (processus en 3 temps)
───────────────────────────────────────────── */
.atk-steps {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  position: relative;
}
.atk-steps::before {
  content: '';
  position: absolute;
  top: 30px;
  left: calc(16.67% + 14px);
  right: calc(16.67% + 14px);
  height: 2px;
  background: linear-gradient(to right, var(--at-blue) 0%, var(--at-border) 100%);
}
.atk-step {
  text-align: center;
  padding: 0 2rem;
  position: relative;
  z-index: 1;
}
.atk-step-num {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 800;
  margin: 0 auto 1.4rem;
}
.atk-step:nth-child(1) .atk-step-num {
  background: var(--at-blue);
  color: #FFFFFF;
  box-shadow: 0 4px 18px rgba(0, 85, 255, .30);
}
.atk-step:nth-child(2) .atk-step-num {
  background: #FFFFFF;
  color: var(--at-blue);
  border: 2px solid var(--at-blue);
}
.atk-step:nth-child(3) .atk-step-num {
  background: #FFFFFF;
  color: #9CA3AF;
  border: 2px solid var(--at-border);
}
.atk-step-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--at-ink);
  margin-bottom: .55rem;
}
.atk-step-desc {
  font-size: .88rem;
  color: var(--at-text-soft);
  line-height: 1.65;
  margin: 0;
}


/* ─────────────────────────────────────────────
   11. SECTION CTA SOMBRE
───────────────────────────────────────────── */
.atk-cta {
  text-align: center;
  position: relative;
  overflow: hidden;
}
.atk-cta::before {
  content: '';
  position: absolute;
  top: -200px;
  left: 50%;
  transform: translateX(-50%);
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0, 85, 255, .12) 0%, transparent 70%);
  pointer-events: none;
}
.atk-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 680px;
  margin: 0 auto;
}
.atk-cta h2 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  color: var(--at-on-dark);
  margin-bottom: 1.2rem;
  line-height: 1.15;
}
.atk-cta-inner > p {
  color: var(--at-on-dark-muted);
  font-size: 1.05rem;
  margin-bottom: 2.5rem;
  line-height: 1.75;
  font-weight: 400;
}
.atk-cta-note {
  font-size: .75rem;
  color: #3D5080;
  margin-top: 1.5rem;
}
.atk-cta-note b {
  color: #5A7AB0;
  font-weight: 600;
}

/* Champs de formulaire sur fond sombre */
.atk-cta input[type="text"],
.atk-cta input[type="email"],
.atk-cta input[type="tel"] {
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #FFFFFF;
  padding: .85rem 1.2rem;
  border-radius: var(--at-radius);
  font-family: var(--at-font);
  font-size: .95rem;
  outline: none;
  transition: border-color .15s, background .15s;
}
.atk-cta input::placeholder { color: rgba(255, 255, 255, .35); }
.atk-cta input:focus {
  border-color: rgba(0, 85, 255, .70);
  background: rgba(0, 85, 255, .08);
}


/* ─────────────────────────────────────────────
   12. ANIMATIONS PARTAGÉES
───────────────────────────────────────────── */
@keyframes atk-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .3; }
}
@keyframes atk-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes atk-grow {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

/* Accessibilité : respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  .atk *,
  .atk *::before,
  .atk *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}


/* ─────────────────────────────────────────────
   13. RESPONSIVE
───────────────────────────────────────────── */
@media (max-width: 992px) {
  .atk-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .atk-grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .atk-grid--4,
  .atk-grid--3,
  .atk-grid--2 { grid-template-columns: 1fr; }

  .atk-expertise-bar {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .atk-steps {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .atk-steps::before { display: none; }
}


/* ── Correctif v1.0.1 : priorité boutons sur les liens Elementor ── */
.atk a.atk-btn,
.atk a.atk-btn:visited {
  color: #FFFFFF !important;
}
.atk a.atk-btn--white,
.atk a.atk-btn--white:visited {
  color: var(--at-navy) !important;
}
.atk a.atk-btn--ghost,
.atk a.atk-btn--ghost:visited {
  color: var(--at-blue) !important;
}
.atk a.atk-btn--ghost:hover,
.atk a.atk-btn--ghost:focus-visible {
  color: #FFFFFF !important;
}


/* Correctif : taille des titres de cartes (h3) face aux réglages Elementor */
.atk h3.atk-card-name {
  font-size: 1.1rem !important;
  line-height: 1.35;
  margin: 0 0 .5rem;
}


/* ── Formulaire Elementor sur fond sombre (classe atk-form-dark) ── */
.atk-form-dark .elementor-field-group .elementor-field {
  background: rgba(255, 255, 255, .07) !important;
  border: 1px solid rgba(255, 255, 255, .15) !important;
  border-radius: 4px !important;
  color: #FFFFFF !important;
  font-family: var(--at-font) !important;
}
.atk-form-dark .elementor-field::placeholder {
  color: rgba(255, 255, 255, .35) !important;
}
.atk-form-dark .elementor-field:focus {
  border-color: rgba(0, 85, 255, .70) !important;
  background: rgba(0, 85, 255, .08) !important;
  outline: none !important;
}
.atk-form-dark .elementor-field-label {
  color: #C5D5F5 !important;
}
.atk-form-dark .elementor-button[type="submit"] {
  background: var(--at-blue) !important;
  color: #FFFFFF !important;
  border-radius: 4px !important;
  font-family: var(--at-font) !important;
  font-weight: 600 !important;
  padding: 17px 38px !important;
  transition: background .2s;
}
.atk-form-dark .elementor-button[type="submit"]:hover {
  background: var(--at-blue-dark) !important;
}
.atk-form-dark .elementor-message {
  color: #C5D5F5 !important;
}
.atk-form-dark {
  max-width: 720px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 20px;
  padding-right: 20px;
}