/* =====================================================
   MOVAWAY — BASE (variables, reset, typo, boutons)
   ===================================================== */

:root {
  /* Permet aux transitions d'animer vers/depuis auto, fit-content, etc. */
  interpolate-size: allow-keywords;

  /* Variables officielles charte Movaway */
  --color-1:           #297cff;
  --color-4:           #ffffff;
  --color-5:           #E8F4FF;
  --color-txt:         #000838;
  --color-light:       #FFF;
  --font-family-title: 'Poppins', Arial, Helvetica, sans-serif;
  --font-family-txt:   'Poppins', Arial, Helvetica, sans-serif;
  --font-small:        14px;
  --line-height-small: 24px;
  --font-big:          clamp(20px, 1em + 1vw, 33px);
  --line-height-big:   1.5em;
  --border-radius:     16px;
  --border-color:      #CED7E4;
  --filter-light:      invert(92%) sepia(100%) saturate(0%) hue-rotate(202deg) brightness(106%) contrast(106%);
  --filter-blue:       invert(37%) sepia(67%) saturate(1285%) hue-rotate(194deg) brightness(101%) contrast(105%);

  /* Aliases pour compat avec le reste du fichier */
  --bg:           #ffffff;
  --bg-card:      #ffffff;
  --bg-soft:      #f1f3f6;
  --ink:          var(--color-txt);
  --ink-soft:     #5a6378;
  --ink-mute:     #8a93a8;
  --primary:      #297cff;
  --primary-dark: #1c5dcc;
  /* Bleu CTA accessible : 5,5:1 avec texte blanc (le #297cff de charte est à
     3,68:1, sous le seuil WCAG AA de 4,5:1). Réservé aux surfaces à texte
     blanc (boutons, badges, pagination active…) ; liens/icônes/accents
     restent en --primary. */
  --primary-cta:  #1E63D9;
  --primary-soft: var(--color-5);
  --gold:         #f5a623;
  --border:       var(--border-color);
  --shadow-sm:    0 2px 8px rgba(0, 8, 56, 0.04);
  --shadow-md:    0 8px 30px rgba(0, 8, 56, 0.08);
  --shadow-lg:    0 20px 60px rgba(0, 8, 56, 0.12);
  --radius-pill:  999px;
  --radius-lg:    28px;
  --radius-md:    var(--border-radius);
  --max-w:        1280px;
  --header-h:     86px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html {
  font-size: 17px;
  scroll-behavior: smooth;
  overflow-x: clip; /* empêche tout scroll horizontal (élément hors viewport ex: drawer) */
}

body {
  font-family: var(--font-family-txt);
  font-size: clamp(15px, 0.875rem + 0.25vw, 18px);
  line-height: 1.7em;
  color: var(--color-txt);
  background-color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }

/* Largeur de contenu unique pour TOUTES les pages du site.
   Aucun autre wrapper page-level ne doit définir un max-width différent. */
.container { max-width: 1400px; margin: 0 auto; padding: 0 28px; }
/* Blindage : Salient Core / WPBakery ajoutent un padding VERTICAL sur la classe
   générique .container. Nos grilles (« container hero-grid », « container stats-grid »…)
   en héritent → +100px → le hero gonfle et le texte centré flotte (décalage).
   Notre design n'utilise JAMAIS de padding vertical sur .container (l'espacement
   vient des sections). On le ré-impose : `html .container` + !important bat la règle
   externe quelle que soit sa spécificité et l'ordre de chargement. */
html .container { padding-top: 0 !important; padding-bottom: 0 !important; }
/* Salient/WPBakery ajoutent aussi un clearfix `.container::before/::after
   { content:" "; display:table }`. Quand un .container est en display:grid/flex
   (nos `hero-grid`, `stats-grid`…), ces pseudo-éléments deviennent des ITEMS →
   rangées vides + row-gap entre elles → +100px → décalage. On les neutralise
   (notre design n'utilise jamais de float sur .container, donc aucun clearfix requis). */
html .container::before,
html .container::after { content: none !important; display: none !important; }

/* ============ TYPOGRAPHIE ============ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-family-title);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.2em;
  color: var(--color-txt);
  overflow-wrap: break-word;
}
h1 { font-size: clamp(1.6rem, 1.4rem + 1.6vw, 2.5rem); letter-spacing: -0.5px; }
h2 { font-size: clamp(1.5rem, 1rem + 1.4vw, 2.2rem); margin-bottom: .5em; }
h3 { font-size: clamp(1.2rem, 0.9rem + 0.8vw, 1.5rem); }
h4 { font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.35rem); }
h5 { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); }
h6 { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.2rem); }

/* Couleur d'accent (bleu) sur mot-clé */
.blue { color: var(--primary); }

/* <em> dans les titres → texte en bleu via background-clip */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em {
  background: var(--color-1);
  font-style: normal !important;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-box-decoration-break: clone;
}

/* Soulignement avec le trait SVG officiel Movaway */
span.txt-souligne {
  position: relative;
  display: inline-block;
  /* Crée un stacking context local pour que le z-index:-1 du ::before
     soit relatif au span et non pas au root → reste visible même si un
     parent a un background opaque. */
  isolation: isolate;
}
span.txt-souligne::before {
  content: '';
  position: absolute;
  bottom: -20px;
  left: 0;
  width: 100%;
  height: 35px;
  background-image: url(https://movaway.fr/wp-content/themes/salient-child/img/trait-souligne.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  transform: rotate(-5deg);
}

/* Version "alt" du soulignement : SVG souligne-alt.svg (trait plus droit, rotation -1°
   au lieu de -5°). Utilisée sur la landing-page pour les accroches comme
   "mot d'anglais ?", "Movaway existe.", "conditions.", "trouvé en 48h", etc. */
span.txt-souligne-alt {
  position: relative;
  display: inline-block;
  isolation: isolate;   /* contexte stacking local : empêche le z-index:-1 de
                            passer derrière un éventuel background parent */
}
span.txt-souligne-alt::before {
  content: '';
  position: absolute;
  bottom: -19px;
  left: 0;
  width: 100%;
  height: 30px;
  background-image: url(https://movaway.fr/wp-content/themes/salient-child/img/souligne-alt.svg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  z-index: -1;
  transform: rotate(-1deg);
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-weight: 800;
  font-size: 15px;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
  font-family: inherit;
  white-space: nowrap;
}
.btn-primary {
  background: var(--primary-cta);
  color: #fff;
}
.btn-primary:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--ink);
  padding: 12px 22px;
}
.btn-outline:hover {
  background: var(--ink);
  color: #fff;
}
.btn-flag .fi {
  width: 22px;
  height: 16px;
  border-radius: 3px;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(10,23,51,0.08);
}

/* Modifier .btn-arrow : ajoute une flèche → en ::after (SVG right-arrow.svg
   du thème Movaway, filtrée en blanc via filter-light). À appliquer sur les CTAs
   landing-page principaux pour la cohérence avec le rendu live (.nectar-button). */
.btn-arrow::after {
  content: '';
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 4px;
  background: url("https://movaway.fr/wp-content/themes/salient-child/img/right-arrow.svg") center / contain no-repeat;
  filter: var(--filter-light);   /* SVG noir → blanc (pour boutons bleus) */
  flex-shrink: 0;
  transition: transform .2s ease;
}
.btn-arrow:hover::after { transform: translateX(3px); }
/* Variant .btn-arrow-dark : flèche noire (pour boutons clairs / btn-outline) */
.btn-arrow-dark::after {
  filter: none;
}

/* eyebrow uniform */
.eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 16px;
}

/* =====================================================
   prefers-reduced-motion : respect du réglage système
   ===================================================== */
@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;
  }
}