/*
Theme Name: AA Production
Theme URI: https://aaproduction.fr
Author: AA Production
Author URI: https://aaproduction.fr
Description: Thème WordPress sur-mesure pour AA Production — palette noir/blanc/violet, typographie Pacaembu + Work Sans.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: aa-production
*/

/* ==========================================================================
   1. Design tokens (identiques à la maquette validée)
   ========================================================================== */
:root {
  --bg: #ffffff;
  --panel: #f6f5f8;
  --panel-2: #f0eef4;
  --carbon: #222222;
  --ink: #222222;
  --ink-dim: rgba(34, 34, 34, 0.66);
  --ink-faint: rgba(34, 34, 34, 0.58);
  --line: rgba(34, 34, 34, 0.10);
  --accent: #bf80ff;
  --accent-hover: #cf9dff;
  --accent-ink: #1b1220;
  --accent-dim: rgba(191, 128, 255, 0.12);

  --font-display: "Pacaembu", "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ==========================================================================
   2. Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

/* Le wrapper <picture> (source WebP + <img> de secours) ne doit rien changer
   à la mise en page : il devient "transparent" dans la boîte, et c'est
   l'<img> à l'intérieur qui garde exactement le même comportement (flex,
   dimensions, etc.) qu'avant l'ajout du WebP. */
picture { display: contents; }

html { scroll-behavior: smooth; }

/* Respect de la préférence utilisateur "réduire les animations" (accessibilité
   + item 21 de la roadmap) : toutes les animations et transitions du thème
   (marquee défilant, orbite du hero, pastille qui pulse, apparitions au
   scroll, hover des boutons...) passent quasi instantanément à leur état
   final au lieu de bouger à l'écran, sans rien casser côté affichage ou
   logique JS (les éléments atteignent quand même leur état, juste sans
   mouvement perceptible). Défilement fluide de la page désactivé aussi. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font: inherit; }

.display {
  font-family: var(--font-display);
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(24px, 5vw, 64px);
  padding-right: clamp(24px, 5vw, 64px);
}

/* ==========================================================================
   3. Composants partagés (boutons, liens de nav, cartes, FAQ)
   ========================================================================== */
.cta-solid {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--accent); color: var(--accent-ink);
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: 15px 26px; border-radius: 999px; border: none; cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background 0.2s ease, box-shadow 0.3s ease;
  box-shadow: 0 0 0 rgba(191, 128, 255, 0);
}
.cta-solid:hover {
  background: var(--accent-hover); color: var(--accent-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -10px rgba(191, 128, 255, 0.6);
}

/* CTA "Ecrire a recrutement@..." (page Recrutement) : memes proportions
   qu'avant (padding/font-size portes ici plutot qu'en style inline), mais
   sous 560px le texte (email inclus) peut repasser a la ligne plutot que
   deborder du viewport en nowrap - repere lors de l'audit mobile du
   10 septembre (le bouton depassait de 40px et etait tronque par le
   overflow:hidden de sa section). */
.cta-recruitment {
  padding: 18px 34px;
  font-size: 18px;
}
@media (max-width: 560px) {
  .cta-recruitment {
    white-space: normal;
    word-break: break-word;
    text-align: center;
    max-width: 100%;
    padding: 16px 24px;
    font-size: 16px;
  }
}

.cta-ghost {
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--ink);
  font-family: var(--font-body); font-weight: 600; font-size: 16px;
  padding: 14px 24px; border-radius: 999px; border: 1px solid rgba(34, 34, 34, 0.18); cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.cta-ghost:hover {
  border-color: rgba(34, 34, 34, 0.36); background: rgba(34, 34, 34, 0.03);
  color: var(--ink); transform: translateY(-1px);
}

.nav-link {
  position: relative;
  font-family: var(--font-body); font-weight: 500; font-size: 16px;
  color: var(--ink-dim); text-decoration: none;
  padding-bottom: 3px;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1.5px;
  background: var(--accent); transition: right 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { right: 0; }
.nav-link.is-active { color: var(--ink); }
.nav-link.is-active::after { right: 0; }

.card {
  background: var(--panel); border: 1px solid var(--line); border-radius: 20px;
  transition: border-color 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}
.card:hover {
  border-color: rgba(191, 128, 255, 0.55); transform: translateY(-5px);
  box-shadow: 0 24px 48px -24px rgba(34, 34, 34, 0.22);
}

.thumb { position: relative; overflow: hidden; display: block; }
.thumb .play-btn svg { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.thumb:hover .play-btn svg { transform: scale(1.12); }
.thumb--yt { background-size: cover; background-position: center; }
.thumb--yt::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.35) 100%);
}
.thumb--yt .play-btn { z-index: 1; }

.faq-row { border-bottom: 1px solid var(--line); }
.faq-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px;
  background: transparent; border: none; text-align: left; cursor: pointer;
  padding: 26px 4px; color: var(--ink); font-family: var(--font-body);
}
.faq-btn:hover .faq-q { color: var(--accent); }
.faq-q { font-size: 19px; font-weight: 500; transition: color 0.2s ease; }
.faq-btn svg { flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.faq-row.is-open .faq-btn svg { transform: rotate(45deg); }
.faq-row .faq-answer { display: none; padding: 0 30px 26px 4px; font-size: 16px; line-height: 1.6; color: var(--ink-dim); }
.faq-row.is-open .faq-answer { display: block; animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }

/* Champs du mini-questionnaire (page Rendez-vous) */
.aap-input {
  width: 100%; font-family: var(--font-body); font-size: 16px; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 13px 16px; resize: vertical;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.aap-input:focus {
  outline: none; border-color: rgba(191, 128, 255, 0.55); background: var(--bg);
}
/* Le navigateur remplit un champ auto-complété avec un fond jaune par défaut
   (Chrome notamment), hors de notre D.A. : on le remplace par les couleurs
   du site via cette astuce de transition (le seul moyen fiable de surcharger
   ce fond, -webkit-autofill n'acceptant pas background directement). */
.aap-input:-webkit-autofill,
.aap-input:-webkit-autofill:hover,
.aap-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0px 1000px var(--panel) inset;
  box-shadow: 0 0 0px 1000px var(--panel) inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Listes à coche (pages d'offre) */
.check-item {
  font-size: 16px; line-height: 1.6; color: var(--ink-dim);
  display: flex; gap: 12px; align-items: flex-start;
}

/* Timeline "premier mois" (pages d'offre) */
.tl-step {
  position: relative; padding-bottom: 44px; opacity: 0.6; transform: translateX(-8px);
  transition: opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.tl-step:last-child { padding-bottom: 0; }
.tl-step.is-active { opacity: 1; transform: translateX(0); }
.tl-dot {
  position: absolute; left: -44px; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--line); transition: background 0.3s ease, border-color 0.3s ease;
}
.tl-step.is-active .tl-dot { border-color: var(--accent); background: var(--accent); }

/* Variante plus rapide du marquee (pages d'offre) */
.marquee-track.is-fast { animation-duration: 38s; }

/* Cartes flottantes du hero + icône flèche (réalisations, carte vide) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
/* --reach (distance horizontale max parcourue par la carte) est fixée par carte,
   en fonction de sa propre largeur, pour que des cartes de tailles différentes
   (portrait 9:16 vs paysage 16:9) puissent tourner ensemble dans le même
   conteneur sans jamais déborder ni avoir besoin d'un recadrage carré. */
@keyframes cardOrbit {
  0%      { transform: translate(0, 34px) rotate(-7deg) scale(0.92); z-index: 1; }
  33.333% { transform: translate(var(--reach, 114px), 0px) rotate(3deg) scale(1); z-index: 3; }
  66.666% { transform: translate(calc(var(--reach, 114px) * 2), 34px) rotate(9deg) scale(0.92); z-index: 1; }
  100%    { transform: translate(0, 34px) rotate(-7deg) scale(0.92); z-index: 1; }
}
@keyframes arrowNudge {
  0%, 100% { transform: translate(0, 0); opacity: 0.85; }
  50% { transform: translate(6px, -6px); opacity: 1; }
}
.reveal { animation: fadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; }
.orbit-card {
  position: absolute; left: 0; top: 0; width: 132px; height: 226px;
  --reach: 144px;
  animation: cardOrbit 12s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}
.arrow-nudge { animation: arrowNudge 1.8s ease-in-out infinite; }

/* Marquee (aperçus défilants sur les pages d'offre) */
@keyframes marqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-track { animation: marqueeScroll 46s linear infinite; }
/* Variante à 3 exemplaires (jeu de vidéos plus court) : le jeu est dupliqué
   3 fois dans le HTML plutôt que 2, pour qu'il y ait toujours assez de
   largeur de contenu à l'écran quel que soit la taille de la fenêtre, même
   en accéléré. Remplace is-fast sur ces carrousels précis. */
@keyframes marqueeScrollThird { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
.marquee-track.is-triple { animation: marqueeScrollThird 20s linear infinite; }
.marquee-viewport {
  -webkit-mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, black 6%, black 94%, transparent);
  overflow: hidden;
}
.marquee-viewport:hover .marquee-track { animation-play-state: paused; }

/* Apparition au scroll */
.io-reveal {
  opacity: 1; transform: translateY(20px);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.io-reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ==========================================================================
   4. En-tête (site-header)
   ========================================================================== */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.site-header.is-scrolled {
  border-bottom-color: var(--line);
  box-shadow: 0 8px 24px -20px rgba(34, 34, 34, 0.3);
}
.site-header__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 20px clamp(24px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  transition: padding 0.25s ease;
}
.site-header.is-scrolled .site-header__inner { padding-top: 14px; padding-bottom: 14px; }
.site-logo { display: flex; align-items: center; gap: 12px; }
.site-logo__mark { height: 26px; width: auto; }
.site-logo__text { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.site-nav { display: flex; align-items: center; gap: 32px; }
.site-header__cta { padding: 12px 22px; font-size: 14px; }
.site-header__cta .cta-short { display: none; }

/* Menu mobile : bouton hamburger + panneau .site-nav en overlay sous
   l'en-tête. Voir header.php pour le markup (.site-header__actions,
   #site-nav-toggle) et assets/js/site.js pour l'ouverture/fermeture.
   Avant cet ajout (10 septembre), .site-nav passait juste en display:none
   sous 760px sans aucun bouton ni logique pour la rouvrir : Social, Podcast
   et FAQ étaient totalement inaccessibles depuis l'en-tête sur mobile. */
.site-nav-toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  padding: 0; margin: 0;
  border: none; background: transparent; cursor: pointer;
  flex-shrink: 0;
}
.site-nav-toggle__bar {
  display: block; width: 20px; height: 2px; border-radius: 2px;
  background: var(--ink);
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
}
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(2) { opacity: 0; }
.site-nav-toggle[aria-expanded="true"] .site-nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-header__actions { display: flex; align-items: center; gap: 10px; }

@media (max-width: 760px) {
  .site-nav { display: none; }
  .site-nav-toggle { display: inline-flex; }

  /* Panneau de nav ouvert : occupe toute la largeur, juste sous l'en-tête
     (positionné par rapport à .site-header, en position: sticky, qui sert
     de bloc de référence). */
  .site-nav.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 20px 32px -20px rgba(34, 34, 34, 0.3);
    padding: 4px clamp(24px, 5vw, 64px) 12px;
    gap: 0;
  }
  .site-nav.is-open .nav-link {
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    font-size: 16px;
  }
  .site-nav.is-open .nav-link:last-child { border-bottom: none; }
}

@media (max-width: 560px) {
  .site-header__inner { padding-top: 14px; padding-bottom: 14px; gap: 12px; }
  .site-header__actions { gap: 6px; }
  .site-header__cta { padding: 10px 16px; font-size: 13px; }
  .site-header__cta .cta-full { display: none; }
  .site-header__cta .cta-short { display: inline; }
  .site-nav-toggle { width: 38px; height: 38px; }
}

/* ==========================================================================
   5. Pied de page (site-footer)
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line); }
.site-footer__inner {
  max-width: 1200px; margin: 0 auto;
  padding: 40px clamp(24px, 5vw, 64px);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
}
.site-footer__brand { display: flex; align-items: center; gap: 12px; }
.site-footer__mark { height: 20px; width: auto; opacity: 0.7; }
.site-footer__meta { font-size: 14px; color: var(--ink-faint); }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 24px; }
.site-footer__links a { font-size: 14px; }

/* ==========================================================================
   6. Utilitaires de mise en page
   ========================================================================== */
/* padding-top/bottom seulement (pas le shorthand 'padding: X 0') : le shorthand remettait aussi padding-left/right a 0, ce qui annulait le padding horizontal clamp() de .container quand les deux classes sont combinees (page-cgv.php, page-mentions-legales.php, index.php) - le texte touchait alors les bords de l'ecran sans aucune marge, repere lors de l'audit mobile du 10 septembre. */
.section { padding-top: clamp(48px, 6vw, 80px); padding-bottom: clamp(48px, 6vw, 80px); }
.section-bordered { border-bottom: 1px solid var(--line); }
.text-center { text-align: center; }

/* ==========================================================================
   7. Composants de la direction graphique "densifiée" (proposition validée
   par Axel — cf. claude/proposition-refonte-graphique-accueil.md) : halo
   violet diffus, badge chiffre flottant, bande sombre pour les chiffres
   clés, emplacements média en attente de visuel réel.
   ========================================================================== */

/* Halo violet diffus — jamais un aplat, juste un dégradé qui s'éteint vite.
   Toujours en position absolute, dimensionné/positionné au cas par cas via
   un style inline sur l'élément qui le pose. */
.glow-violet {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(circle, rgba(191, 128, 255, 0.30) 0%, rgba(191, 128, 255, 0.10) 40%, transparent 70%);
  filter: blur(6px);
}

/* Badge chiffre flottant, accroché au bord d'un visuel plutôt que posé en
   dessous (hero, carrousel Aperçu, etc.). */
.stat-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 20px 40px -18px rgba(20, 15, 30, 0.28);
}
.stat-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.stat-chip__num { font-family: var(--font-display); font-weight: 800; font-size: 22px; line-height: 1; }
.stat-chip__lbl { margin-top: 2px; font-size: 12px; color: var(--ink-faint); }

/* Bande sombre pour les chiffres clés (remplace le bandeau gris plat) :
   fond quasi noir, jamais violet plein, avec un halo radial très subtil. */
.band-dark { position: relative; background: #1c1a1f; overflow: hidden; }
.band-dark__glow {
  position: absolute; left: 50%; top: -140px; transform: translateX(-50%);
  width: 900px; height: 420px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(ellipse, rgba(191, 128, 255, 0.22) 0%, transparent 70%);
}
.band-dark .proof-num { font-family: var(--font-display); font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.band-dark .proof-lbl { margin-top: 8px; font-size: 14px; color: rgba(255, 255, 255, 0.56); }
.band-dark .proof-item { position: relative; }
/* Trait vertical entre les 2 colonnes de la grille .proof-row (page Social) :
   uniquement sur la colonne de droite (nth-child pair), pas sur chaque
   élément suivant un autre comme avec l'ancienne rangée horizontale — sinon
   le 1er élément de la 2e ligne (3e enfant, impair) hériterait à tort d'un
   trait à gauche alors qu'il n'a rien à sa gauche sur sa propre ligne. */
.band-dark .proof-item:nth-child(even)::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 1px; background: rgba(255, 255, 255, 0.12);
}

/* Emplacement média (image/vidéo à venir) : jamais un dégradé de
   remplissage muet, toujours une indication explicite de ce qui doit venir. */
.media-slot {
  position: relative;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1.5px dashed rgba(191, 128, 255, 0.4); border-radius: 16px;
  background: rgba(34, 34, 34, 0.025);
  color: var(--ink-faint); font-size: 12.5px; line-height: 1.5; padding: 18px;
}

/* Vraie photo (remplace un .media-slot une fois le visuel fourni) : mêmes
   proportions/contraintes, mais une image plutôt qu'un emplacement muet. */
.media-photo {
  display: block;
  object-fit: cover;
}

/* Bande de preuve (page Social) : à 4 chiffres, un défilement horizontal
   coupait le bord du dernier chiffre et obligeait à glisser dans le bandeau
   pour tout lire (retour d'Axel : "c'est pas top"). Passé en grille 2
   colonnes fixes à la place — même logique que `.receipt__stats` un peu
   plus haut dans ce fichier : toujours 2 chiffres par ligne, quelle que
   soit la largeur d'écran, jamais de défilement ni de bord coupé. Le
   bandeau garde sa largeur (max-width posée en inline sur la page) ; s'il y
   a plus de contenu que de place, ça descend simplement sur une 2e ligne
   dans le flux normal de la page (le scroll de la page fait le reste),
   plutôt que d'élargir le bandeau ou de faire défiler son contenu à part. */
.proof-row {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 20px; text-align: center;
}

/* "Ticket de caisse" — cas client détaillé (page Social) : carte qui imite
   un ticket de caisse, bords en dents de scie en CSS pur (les gradients
   "découpent" des triangles de la couleur de fond de page dans le panneau,
   pour donner l'illusion d'un bord déchiré/perforé). Chaque ligne de
   prestation (.receipt__line) est un .io-reveal indépendant : elles
   s'impriment en cascade au fil du scroll plutôt que d'apparaître d'un coup.
   .receipt-progress est une jauge accrochée au bord du ticket qui se remplit
   au fil du scroll (même logique que la timeline "premier mois" plus bas) :
   ça donne un repère visuel de progression et l'envie de continuer à dérouler. */
.receipt { position: relative; }
.receipt-progress {
  position: absolute; left: -16px; top: 14px; bottom: 14px; width: 3px;
  background: var(--line); border-radius: 3px; overflow: hidden;
}
.receipt-progress__fill {
  width: 100%; height: 0%; background: var(--accent); border-radius: 3px;
}
@media (max-width: 620px) {
  .receipt-progress { left: -11px; width: 2px; }
}
.receipt__edge {
  height: 14px;
  background:
    linear-gradient(-45deg, transparent 8px, var(--bg) 8px) 0 0 / 16px 16px repeat-x,
    linear-gradient(45deg, transparent 8px, var(--bg) 8px) 0 0 / 16px 16px repeat-x;
}
.receipt__edge--bottom { transform: rotate(180deg); }
.receipt__body {
  background: var(--panel);
  padding: 32px clamp(20px, 5vw, 40px) 8px;
  box-shadow: 0 24px 48px -28px rgba(34, 34, 34, 0.28);
}
.receipt__header { text-align: center; padding-bottom: 20px; border-bottom: 1px dashed var(--line); margin-bottom: 4px; }
.receipt__logo { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.01em; }
.receipt__sub { margin-top: 6px; font-size: 13.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); }
.receipt__line {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0; border-bottom: 1px dashed var(--line);
  font-size: 16.5px; line-height: 1.55; color: var(--ink-dim);
}
.receipt__num {
  flex-shrink: 0; font-family: var(--font-display); font-weight: 800; font-size: 14px;
  color: var(--ink-faint); padding-top: 2px;
}
.receipt__label { flex: 1; }
.receipt__line--option {
  background: var(--accent-dim);
  border-left: 3px solid var(--accent);
  padding-left: 14px; margin-left: -14px;
  padding-right: 14px; margin-right: -14px;
  border-bottom-color: rgba(191, 128, 255, 0.35);
}
.receipt__option-tag {
  display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent); border-radius: 999px; padding: 3px 9px; margin-bottom: 6px;
}
.receipt__divider { height: 0; border-top: 2px dashed var(--ink-faint); opacity: 0.3; margin: 16px 0 24px; }
.receipt__totals { padding-bottom: 28px; }
/* Toujours 2 colonnes fixes (2 chiffres par ligne), quelle que soit la
   largeur d'écran : le ticket de caisse lui-même reste étroit même sur un
   grand écran (max-width limité), donc un `auto-fit` sur la largeur du
   viewport ne suffisait pas — avec `white-space: nowrap` sur les chiffres,
   ça les faisait se chevaucher dès que leur colonne n'était pas assez large
   (ex : 3 colonnes de ~130px alors que "23,32M" fait ~160px). 2 colonnes
   fixes laisse toujours assez de place, sur mobile comme sur desktop. */
.receipt__stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 16px; text-align: center; }
/* min-width: 0 sur chaque cellule : par défaut une cellule de grille ne
   rétrécit jamais sous la largeur "min-content" de son texte, donc un
   .receipt__stat-num long (ex : cas /influxProd podcast, "1 interlocuteur")
   même en white-space:normal peut forcer sa colonne à dépasser le ticket.
   min-width:0 autorise le retour à la ligne à occuper toute la largeur
   disponible plutôt que de faire déborder la grille. */
.receipt__stats > .receipt__stat { min-width: 0; }
.receipt__stat-num {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 1.8vw + 1rem, 2.4rem);
  color: var(--ink); letter-spacing: -0.01em; white-space: nowrap;
}
.receipt__stat-lbl { margin-top: 6px; font-size: 13.5px; color: var(--ink-faint); }

/* Ligne de petites icônes cliquables vers les vrais comptes réseaux sociaux
   d'un client, affichée sous son nom dans l'en-tête d'un ticket de caisse —
   clic = ouverture du vrai compte sur la plateforme, dans un nouvel onglet. */
.social-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.social-link {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 999px; flex-shrink: 0;
  border: 1px solid var(--line); color: var(--ink-faint);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.social-link:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }

/* Ligne de petites miniatures cliquables (Reels Instagram, section Univers >
   Social) : même logique que .thumb--yt (miniature + bouton play, clic =
   ouverture sur la vraie plateforme), en compact vu qu'il y en a plusieurs
   côte à côte. Défilement horizontal si jamais ça déborde sur mobile. */
.thumb-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.thumb-row::-webkit-scrollbar { display: none; }
.thumb--ig {
  flex-shrink: 0;
  background:
    radial-gradient(circle at 30% 20%, rgba(191, 128, 255, 0.35), transparent 60%),
    linear-gradient(150deg, #201d26, #16141a);
  background-size: cover;
  background-position: center;
  opacity: 0.7;
  transform: scale(0.96);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, box-shadow 0.6s ease;
}
.thumb--ig::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.42) 100%);
}
.thumb--ig .play-btn { z-index: 1; }
/* Anime tour à tour une miniature en avant (assets/js/site.js), pour donner
   un peu de mouvement à la ligne sans faire défiler de fausses images. */
.thumb--ig.is-active {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 18px 32px -14px rgba(191, 128, 255, 0.5);
}

/* Cartes de rôle cliquables (section Équipe) : icône + nom toujours visibles,
   description révélée au clic/tap (fonctionne aussi bien au clavier qu'au
   toucher, contrairement à un simple hover). */
.role-card {
  cursor: pointer;
  background: none;
  border: 1px solid transparent;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 18px 8px;
  border-radius: 18px;
  font-family: var(--font-body);
  color: inherit;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.role-card:hover, .role-card.is-open {
  border-color: rgba(191, 128, 255, 0.32);
  background: var(--panel);
  transform: translateY(-3px);
}
.role-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.role-card__avatar {
  width: 60px; height: 60px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.role-card:hover .role-card__avatar, .role-card.is-open .role-card__avatar {
  transform: scale(1.08);
}
.role-card__name {
  display: block; margin-top: 12px; font-size: 13px; font-weight: 700; line-height: 1.3;
}
.role-card__desc {
  display: block; max-height: 0; overflow: hidden; opacity: 0;
  font-size: 11.5px; line-height: 1.4; color: var(--ink-faint);
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, margin-top 0.3s ease;
}
.role-card.is-open .role-card__desc {
  max-height: 48px; opacity: 1; margin-top: 8px;
}

.role-item { display: flex; flex-direction: column; }

/* Pastille de rareté/urgence, centrée sous la barre de navigation sur tout
   le site : argument marketing "2-3 nouveaux clients par mois" (sélection
   qualité > quantité), en pilule ronde dans les couleurs de la D.A. (violet
   en ponctuation, jamais en aplat de fond), avec un point qui clignote pour
   un effet "en direct". */
.urgency-wrap {
  display: flex;
  justify-content: center;
  padding: 14px clamp(24px, 5vw, 64px) 4px;
}
.urgency-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  max-width: 100%;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(191, 128, 255, 0.3);
  background: var(--accent-dim);
}
.urgency-pill__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex-shrink: 0;
  animation: urgencyPulse 1.8s ease-in-out infinite;
}
.urgency-pill__text {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@keyframes urgencyPulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(191, 128, 255, 0.45); }
  50% { opacity: 0.55; box-shadow: 0 0 0 5px rgba(191, 128, 255, 0); }
}
@media (max-width: 560px) {
  .urgency-pill { padding: 8px 14px; }
  .urgency-pill__text { font-size: 12px; white-space: normal; text-align: center; }
}

/* Pile de petites photos rondes qui se chevauchent (avis clients à venir). */
.avatar-stack { display: flex; }
.avatar-stack .media-slot {
  width: 34px; height: 34px; border-radius: 50%; padding: 0; font-size: 9px;
  border-style: dashed; margin-left: -10px; background: var(--bg); flex-shrink: 0;
}
.avatar-stack .media-slot:first-child { margin-left: 0; }

/* ==========================================================================
   17. Audit personnalisé — mini-site par prospect (single-aap_audit.php)
   Repris de la maquette cliquable validée par Axel (voir
   strategie-refonte-site-wordpress.md), avec les mêmes tokens que le reste
   du thème. Page volontairement isolée (pas de header.php/footer.php, pas
   de nav, pas de bandeau) : un mini-site à part entière pour un prospect.
   ========================================================================== */
.audit-shell { width: 100%; min-height: 100vh; background: var(--bg); display: flex; flex-direction: column; }
.audit-wrap { max-width: 640px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; min-height: 100vh; }
.audit-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 28px; border-bottom: 1px solid var(--line); }
.audit-back { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--ink-faint); border-radius: 999px; cursor: pointer; flex-shrink: 0; }
.audit-back:hover { background: var(--panel); color: var(--ink); }
.audit-back[hidden] { visibility: hidden; }
.audit-brand { display: flex; align-items: center; gap: 10px; }
.audit-logo { width: 21px; height: auto; display: block; }
.audit-brandname { font-family: var(--font-display); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.audit-counter { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-faint); flex-shrink: 0; }
.audit-progress { padding: 0 28px; }
.audit-dots { display: flex; gap: 8px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.audit-dot { flex: 1; height: 3px; border-radius: 2px; background: var(--line); transition: background 0.25s ease; }
.audit-dot.is-done { background: rgba(191, 128, 255, 0.45); }
.audit-dot.is-active { background: var(--accent); }
.audit-main { padding: 40px 28px 24px; display: flex; flex-direction: column; }
.audit-step { display: none; }
.audit-step.is-active { display: block; }
.audit-nav { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 28px 28px; }
.audit-navbtn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 999px; border: none; cursor: pointer; min-height: 44px; white-space: nowrap; }
.audit-navbtn--ghost { background: transparent; color: var(--ink-dim); padding-left: 4px; }
.audit-navbtn--ghost:hover { color: var(--ink); }
.audit-navbtn--solid { background: var(--ink); color: #fff; transition: transform 0.2s ease, background 0.2s ease; }
.audit-navbtn--solid:hover { background: #000; transform: translateY(-1px); }
.audit-cta-solid { display: inline-flex; align-items: center; gap: 10px; background: var(--accent); color: var(--accent-ink); font-family: var(--font-body); font-weight: 700; font-size: 15.5px; padding: 15px 26px; border-radius: 999px; border: none; cursor: pointer; min-height: 44px; white-space: nowrap; transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.3s ease; }
.audit-cta-solid:hover { background: var(--accent-hover); color: var(--accent-ink); transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(191, 128, 255, 0.55); }
.audit-spacer { flex: 1; }

.audit-eyebrow { font-family: var(--font-body); font-size: 12.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; }

.audit-step-icon { width: 56px; height: 56px; border-radius: 16px; background: var(--accent-dim); display: flex; align-items: center; justify-content: center; margin-bottom: 22px; color: var(--accent-ink); }
.audit-step-icon svg { width: 26px; height: 26px; }

.audit-compare-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin-top: 24px; }
.audit-compare-card { border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.audit-compare-card--before { background: var(--panel); border: 1px solid var(--line); }
.audit-compare-card--after { background: var(--accent-dim); border: 1px solid rgba(191, 128, 255, 0.35); }
.audit-compare-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); }
.audit-compare-card--after .audit-compare-label { color: #7a3fb0; }
.audit-compare-text { font-size: 15px; line-height: 1.5; color: var(--ink-dim); }
.audit-compare-card--before .audit-compare-text { text-decoration: line-through; text-decoration-color: rgba(34, 34, 34, 0.3); }
.audit-compare-card--after .audit-compare-text { color: var(--ink); font-weight: 600; text-decoration: none; }
.audit-compare-arrow { display: flex; align-items: center; justify-content: center; color: var(--ink-faint); flex-shrink: 0; }

.audit-stat-pill { display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; margin-top: 22px; align-self: flex-start; }
.audit-stat-pill svg { width: 15px; height: 15px; flex-shrink: 0; }

.audit-expand-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; color: var(--ink-faint); font-family: var(--font-body); font-weight: 600; font-size: 14px; cursor: pointer; padding: 10px 2px; margin-top: 18px; min-height: 44px; }
.audit-expand-toggle:hover { color: var(--ink); }
.audit-expand-toggle svg { width: 16px; height: 16px; flex-shrink: 0; transition: transform 0.2s ease; }
.audit-expand-toggle[aria-expanded="true"] svg { transform: rotate(45deg); }

.audit-expand-panel { background: var(--panel); border-radius: 16px; padding: 20px 22px; margin-top: 4px; display: none; }
.audit-expand-panel.is-open { display: block; }
.audit-expand-para { font-size: 14.5px; line-height: 1.65; color: var(--ink-dim); margin-bottom: 16px; }
.audit-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 16px; }
.audit-checklist-item { display: flex; align-items: flex-start; gap: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.audit-checklist-item svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 1px; color: var(--accent); }

.audit-platform-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 24px; }
.audit-platform-tile { border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.audit-platform-tile.is-active { background: var(--panel); border: 1px solid var(--line); }
.audit-platform-tile.is-inactive { background: transparent; border: 1px dashed var(--line); }
.audit-platform-tile-head { display: flex; align-items: center; gap: 8px; }
.audit-platform-tile-head svg { width: 18px; height: 18px; color: var(--ink); flex-shrink: 0; }
.audit-platform-tile.is-inactive .audit-platform-tile-head svg { color: var(--ink-faint); }
.audit-platform-name { font-size: 13.5px; font-weight: 700; }
.audit-platform-num { font-family: var(--font-display); font-weight: 800; font-size: 21px; line-height: 1.1; }
.audit-platform-tile.is-inactive .audit-platform-num { color: var(--ink-faint); font-size: 14px; font-weight: 600; font-family: var(--font-body); }
.audit-platform-sub { font-size: 12px; color: var(--ink-faint); }

.audit-demo-tag { display: inline-flex; align-self: flex-start; font-size: 11.5px; font-weight: 600; color: var(--ink-faint); background: var(--panel); border: 1px solid var(--line); padding: 5px 12px; border-radius: 999px; margin-bottom: 18px; }

.audit-revenue-inputs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 24px; }
.audit-revenue-input { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px; text-align: center; }
.audit-revenue-input-num { font-family: var(--font-display); font-weight: 800; font-size: 19px; }
.audit-revenue-input-lbl { font-size: 11.5px; color: var(--ink-faint); margin-top: 4px; line-height: 1.35; }
.audit-revenue-result { margin-top: 20px; background: var(--ink); color: #fff; border-radius: 18px; padding: 24px 26px; text-align: center; }
.audit-revenue-result-num { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 3vw + 1rem, 2.6rem); letter-spacing: -0.01em; }
.audit-revenue-result-lbl { font-size: 14px; color: rgba(255, 255, 255, 0.7); margin-top: 6px; }
.audit-revenue-note { font-size: 12.5px; color: var(--ink-faint); margin-top: 14px; line-height: 1.5; }

.audit-cta-recap { display: flex; flex-direction: column; gap: 10px; margin: 26px 0 8px; }
.audit-cta-recap-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--panel); border-radius: 14px; }
.audit-cta-recap-row svg { width: 18px; height: 18px; color: var(--accent); flex-shrink: 0; }
.audit-cta-recap-num { font-family: var(--font-display); font-weight: 800; font-size: 16px; }
.audit-cta-recap-lbl { font-size: 13.5px; color: var(--ink-dim); }

.audit-h1 { font-size: clamp(1.8rem, 2.6vw + 1rem, 2.6rem); line-height: 1.15; }
.audit-h2 { font-size: clamp(1.4rem, 1.8vw + 0.8rem, 1.9rem); line-height: 1.2; }
.audit-h2--lg { font-size: clamp(1.6rem, 2.2vw + 1rem, 2.2rem); line-height: 1.2; }

@media (max-width: 480px) {
  .audit-top { padding: 16px 20px; }
  .audit-progress { padding: 0 20px; }
  .audit-main { padding: 32px 20px 20px; }
  .audit-nav { padding: 16px 20px 24px; flex-wrap: wrap; }
  .audit-platform-grid, .audit-checklist, .audit-revenue-inputs { grid-template-columns: 1fr 1fr; }
  .audit-compare-grid { grid-template-columns: 1fr; }
  .audit-compare-arrow { transform: rotate(90deg); padding: 2px 0; }
}

/* --- Correctif CLS (13 septembre) : bannière de consentement Complianz ---
   La bannière hérite la police "Work Sans" du thème (--font-body), qui se
   charge en Web Font après le premier affichage de la page. La bascule
   police système -> Work Sans (métriques de caractères différentes) fait
   très légèrement bouger/redimensionner la bannière une fois affichée,
   ce que Lighthouse comptabilise comme un décalage de mise en page (CLS).
   On fixe la bannière sur une police système, déjà chargée par le
   navigateur, sans aucune bascule possible -- impact visuel négligeable
   sur un élément transitoire (bannière de cookies). */
.cmplz-cookiebanner,
.cmplz-cookiebanner *,
#cmplz-manage-consent,
#cmplz-manage-consent * {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}