/* ============================================================
   Avrile — Global Classes
   Éléments natifs + classes partagées entre 2+ modules.
   Préfixe BEM : avr-
   ============================================================ */

/* ----------------------------------------------------------
   Reset minimal
---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  background: var(--avr-bg);
  color: var(--avr-fg);
  font-family: var(--avr-font-body);
  font-size: var(--avr-text-body);
  line-height: var(--avr-leading-body);
  font-weight: var(--avr-weight-regular);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: var(--avr-transition-theme);
}

/* ----------------------------------------------------------
   Hiérarchie de titres
   Italique par défaut (identité éditoriale du site).
   .avr-roman sur un span → force le style droit (Migra upright).
---------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--avr-font-body);
  font-style: italic;
  font-weight: var(--avr-weight-regular);
  line-height: var(--avr-leading-head);
  letter-spacing: var(--avr-tracking-neg);
  color: var(--avr-fg);
  margin: 0;
  text-wrap: pretty;
}

h1 {
  font-size: var(--avr-text-h1);
}

h2 {
  font-size: var(--avr-text-h2);
}

h3 {
  font-size: var(--avr-text-h3-sm);
}

h4 {
  font-size: var(--avr-text-xs);
  letter-spacing: var(--avr-tracking-wide);
  text-transform: uppercase;
}

h1 em, h2 em, h3 em, h4 em {
  font-family: var(--avr-font-italic);
  font-style: italic;
  color: inherit;
}

h2 em {
  font-size: 1.3em;
}

/* ----------------------------------------------------------
   Paragraphes
---------------------------------------------------------- */
p {
  font-family: var(--avr-font-body);
  font-size: var(--avr-text-body);
  color: var(--avr-fg);
  line-height: var(--avr-leading-body);
  margin: 0;
}

/* ----------------------------------------------------------
   Liens
---------------------------------------------------------- */
a {
  color: var(--avr-fg);
  text-decoration: none;
  transition: color var(--avr-duration-fast) var(--avr-ease-standard);
}

a:hover {
  color: var(--avr-accent);
}

/* ----------------------------------------------------------
   Listes
---------------------------------------------------------- */
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0;
  padding: 0;
}

/* ----------------------------------------------------------
   Images
---------------------------------------------------------- */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ----------------------------------------------------------
   Pattern global : .avr-roman
   Span dans un titre pour forcer le style droit.
   Utilisé dans : hero, about, case studies.
---------------------------------------------------------- */
.avr-roman {
  font-style: normal;
}

/* ----------------------------------------------------------
   Pattern global : .avr-eyebrow
   Texte d'introduction au-dessus d'un titre — utilisé dans tous les modules.
---------------------------------------------------------- */
.avr-eyebrow {
  font-family: var(--avr-font-mono);
  font-size: 14px;
  font-weight: var(--avr-weight-regular);
  letter-spacing: 0.16em;
  text-transform: lowercase;
  color: var(--avr-muted);
}

.avr-eyebrow::before {
  content: "— ";
}

/* ----------------------------------------------------------
   Pattern global : .avr-label
   Pilule label (pastille ronde avec point coloré).
   Utilisé dans : tous les modules de section.
---------------------------------------------------------- */
.avr-label {
  display: inline-flex;
  align-items: center;
  gap: var(--avr-space-micro);
  font-family: var(--avr-font-mono);
  font-size: var(--avr-text-label);
  font-weight: var(--avr-weight-regular);
  letter-spacing: var(--avr-tracking-none);
  color: var(--avr-color-raisin-deep);
  background: var(--avr-color-cream);
  border: 1px solid rgba(63, 24, 36, 0.08);
  border-radius: var(--avr-radius-pill);
  padding: 8px 18px;
  width: fit-content;
  line-height: 1.2;
}

.avr-label::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--avr-radius-round);
  background: var(--avr-accent);
  flex-shrink: 0;
}

/* ----------------------------------------------------------
   Pattern global : .avr-section-body
   Paragraphe intro des modules sections (approche, principes, team-scroll, contact, statement).
---------------------------------------------------------- */
.avr-section-body {
  font-family: var(--avr-font-body);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: var(--avr-muted);
}

/* ----------------------------------------------------------
   Pattern global : .avr-page-intro
   Paragraphe intro des pages (page-hero, portfolio).
---------------------------------------------------------- */
.avr-page-intro {
  font-family: var(--avr-font-body);
  font-size: clamp(17px, 1.2vw, 20px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--avr-muted);
}

/* ----------------------------------------------------------
   Pattern global : .avr-btn-primary
   Bouton primaire dark — utilisé dans : conviction, projets-strip, cta-reveal.
---------------------------------------------------------- */
.avr-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--avr-font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1;
  padding: 15px 24px;
  border-radius: 8px;
  border: none;
  background: #14100F;
  color: #FFFFFF;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.avr-btn-primary::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  background:
    linear-gradient(currentColor, currentColor) center / 1.1px 100% no-repeat,
    linear-gradient(currentColor, currentColor) center / 100% 1.1px no-repeat;
}

.avr-btn-primary:hover {
  background: #2A2420;
  color: #FFFFFF;
  transform: translateY(-1px);
}

/* ----------------------------------------------------------
   Pattern global : .avr-btn
   Bouton principal CTA.
   Utilisé dans : cta-reveal, approach, contact.
   Modifier : --outline, --pill
---------------------------------------------------------- */
.avr-btn {
  display: inline-flex;
  align-items: center;
  gap: 18px;
  background: var(--avr-color-cream);
  color: var(--avr-color-raisin);
  border: 0;
  font-family: var(--avr-font-mono);
  font-size: 12px;
  letter-spacing: var(--avr-tracking-wide);
  text-transform: uppercase;
  padding: 22px 32px;
  border-radius: var(--avr-radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    transform var(--avr-duration-fast) var(--avr-ease-standard),
    background var(--avr-duration-fast) var(--avr-ease-standard),
    color var(--avr-duration-fast) var(--avr-ease-standard);
}

.avr-btn:hover {
  transform: scale(1.04);
  background: var(--avr-color-orange);
  color: var(--avr-color-cream);
}

.avr-btn--outline {
  background: transparent;
  color: currentColor;
  border: 1px solid currentColor;
  padding: 14px 22px;
}

.avr-btn--outline:hover {
  background: currentColor;
  transform: none;
}

/* ----------------------------------------------------------
   Pattern global : .avr-arrow
   Bulle flèche décorative sur les boutons et liens.
   Utilisé dans : cta-reveal, navbar, trusted-rotor, links.
---------------------------------------------------------- */
.avr-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--avr-radius-round);
  background: var(--avr-color-raisin);
  color: var(--avr-color-cream);
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
  transition:
    background var(--avr-duration-fast) var(--avr-ease-standard),
    color var(--avr-duration-fast) var(--avr-ease-standard);
}

.avr-btn:hover .avr-arrow {
  background: var(--avr-color-cream);
  color: var(--avr-color-raisin);
}

/* ----------------------------------------------------------
   Pattern global : .avr-statement
   Section statement éditoriale.
   Utilisé dans : about, creer (--sky), comprendre (--raisin).
---------------------------------------------------------- */
.avr-statement {
  position: relative;
  padding: var(--avr-space-section) var(--avr-space-gutter);
}

.avr-statement__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--avr-space-xl);
  max-width: var(--avr-max-content);
  margin: 0 auto;
  align-items: start;
}

.avr-statement__inner h2 {
  font-size: var(--avr-text-h2);
}

.avr-statement__side {
  display: flex;
  flex-direction: column;
  gap: var(--avr-space-xs);
  padding-top: 8px;
}

.avr-statement__side p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--avr-muted);
}

@media (max-width: 768px) {
  .avr-statement__inner {
    grid-template-columns: 1fr;
    gap: var(--avr-space-md);
  }
}

/* ----------------------------------------------------------
   Grain — overlay décoratif texture
   Appliqué comme div aria-hidden="true" à l'intérieur du conteneur.
---------------------------------------------------------- */
.avr-grain {
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  mix-blend-mode: overlay;
  opacity: var(--avr-grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* ----------------------------------------------------------
   Halos — blobs lumineux animés
   Appliqués via .avr-halo parent + .avr-halo__blob (b1, b2, b3).
---------------------------------------------------------- */
.avr-halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.avr-halo__blob {
  position: absolute;
  border-radius: var(--avr-radius-round);
  filter: blur(80px);
  mix-blend-mode: normal;
  animation: avr-drift 26s ease-in-out infinite alternate;
}

.avr-halo__blob--1 {
  width: 70vw;
  height: 70vw;
  left: -25vw;
  bottom: -25vw;
  background: radial-gradient(circle at 50% 50%,
    var(--avr-halo-1) 0%,
    color-mix(in oklab, var(--avr-halo-1) 60%, transparent) 40%,
    transparent 70%);
}

.avr-halo__blob--2 {
  width: 55vw;
  height: 55vw;
  right: -15vw;
  top: -15vw;
  background: radial-gradient(circle at 50% 50%,
    var(--avr-halo-2) 0%,
    color-mix(in oklab, var(--avr-halo-2) 50%, transparent) 35%,
    transparent 65%);
  animation-delay: -8s;
}

.avr-halo__blob--3 {
  width: 40vw;
  height: 40vw;
  left: 35vw;
  bottom: 5vh;
  background: radial-gradient(circle at 50% 50%,
    var(--avr-halo-3) 0%,
    color-mix(in oklab, var(--avr-halo-3) 40%, transparent) 30%,
    transparent 60%);
  animation-delay: -14s;
  opacity: 0.65;
}

@keyframes avr-drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4vw, -3vw, 0) scale(1.05); }
  100% { transform: translate3d(-3vw, 5vw, 0) scale(0.95); }
}

/* ----------------------------------------------------------
   Aurora — couches d'images cross-fade
   Structure : .avr-aurora > .avr-aurora__layer (x2)
   Variantes : --ember (comprendre), --bleu (creer), --footer
---------------------------------------------------------- */
.avr-aurora {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.avr-aurora__layer {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.avr-aurora__layer--a {
  background-color: #EFEAD8;
  background-image: url('../assets/brand/aurora-state-1.png');
  animation: avr-aurora-a 15s ease-in-out infinite;
}

.avr-aurora__layer--b {
  background-color: #EFEAD8;
  background-image: url('../assets/brand/aurora-state-2.png');
  animation: avr-aurora-b 15s ease-in-out infinite;
}

.avr-aurora--ember .avr-aurora__layer--a {
  background-color: #2a1218;
  background-image: url('../assets/brand/ember-aurora-1.jpg');
}
.avr-aurora--ember .avr-aurora__layer--b {
  background-color: #2a1218;
  background-image: url('../assets/brand/ember-aurora-2.jpg');
}

.avr-aurora--bleu .avr-aurora__layer--a {
  background-color: #1b2230;
  background-image: url('../assets/brand/creer-aurora-1.jpg');
}
.avr-aurora--bleu .avr-aurora__layer--b {
  background-color: #1b2230;
  background-image: url('../assets/brand/creer-aurora-2.jpg');
}

.avr-aurora--footer .avr-aurora__layer--a {
  background-image: url('../assets/brand/aurora-state-1.png');
  opacity: 0.6;
}
.avr-aurora--footer .avr-aurora__layer--b {
  background-image: url('../assets/brand/aurora-state-2.png');
  opacity: 0.6;
}

@keyframes avr-aurora-a {
  0%   { opacity: 1; transform: scale(1.00) translate(6%, 0%); }
  50%  { opacity: 0; transform: scale(1.06) translate(4.5%, 1%); }
  100% { opacity: 1; transform: scale(1.00) translate(6%, 0%); }
}

@keyframes avr-aurora-b {
  0%   { opacity: 0; transform: scale(1.06) translate(7.5%, -1%); }
  50%  { opacity: 1; transform: scale(1.00) translate(6%, 0%); }
  100% { opacity: 0; transform: scale(1.06) translate(7.5%, -1%); }
}

/* ----------------------------------------------------------
   Reveal — animation d'entrée section (IntersectionObserver)
   Guard Bricks : opacité uniquement quand hors éditeur.
---------------------------------------------------------- */
body:not([data-builder-window="iframe"]) .avr-reveal {
  opacity: 0;
  transform: translateY(16px);
}

.avr-reveal.avr-in {
  opacity: 1;
  transform: translateY(0);
  transition: var(--avr-transition-reveal);
}

/* ----------------------------------------------------------
   Pulse — dot animé (status, live indicator)
---------------------------------------------------------- */
.avr-pulse {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--avr-radius-round);
  background: var(--avr-accent);
  animation: avr-pulse 2.4s ease-in-out infinite;
}

@keyframes avr-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.35; }
}

/* ----------------------------------------------------------
   Viz — placeholder coloré pour les images manquantes
---------------------------------------------------------- */
.avr-viz {
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.avr-viz--red    { background: var(--avr-color-red); }
.avr-viz--orange { background: var(--avr-color-orange); }
.avr-viz--raisin { background: var(--avr-color-raisin); }
.avr-viz--blue   { background: var(--avr-color-cyan); }
.avr-viz--navy   { background: var(--avr-color-navy); }
.avr-viz--paper  { background: var(--avr-color-paper); }
.avr-viz--tba    { background: var(--avr-color-grey); }