/* ============================================================================
   BASE.CSS — RESET, VARIABLES DE DESIGN, THÈMES, ÉLÉMENTS DE BASE
   ============================================================================
   Ce fichier fait partie d'un CSS découpé en plusieurs fichiers pour rester
   facile à maintenir (au lieu d'un seul gros style.css). Voir la liste
   complète et l'ordre de chargement dans le commentaire d'en-tête de
   n'importe quelle page HTML, juste au-dessus des balises <link> :

     1. base.css       → CE FICHIER : reset, variables (couleurs, typo,
                         espacements), thèmes de marque, éléments de base
                         (titres, boutons, conteneur). DOIT être chargé EN
                         PREMIER : tous les autres fichiers utilisent les
                         variables --accent, --c-navy-900, --sp-*, etc.
                         définies ici.
     2. nav.css        → en-tête + navigation + menu mobile
     3. hero.css       → bandeau d'intro de chaque page
     4. sections.css   → sections génériques, grilles, cartes, composants
     5. contact.css    → formulaire de contact
     6. footer.css     → pied de page
     7. animations.css → apparition au scroll

   Astuce pédagogique : on utilise des VARIABLES CSS (--exemple) pour ne
   jamais répéter une couleur ou une taille en dur. Si demain le client
   change une couleur, on la change à UN seul endroit (plus bas dans ce
   fichier) et tout le site se met à jour automatiquement, quel que soit
   le fichier CSS qui utilise cette variable.
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. POLICES & RESET
   On importe deux polices Google Fonts :
   - "Outfit"  : géométrique, moderne → utilisée pour les titres
   - "Inter"   : très lisible → utilisée pour le texte courant
   ---------------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap');

/* Reset simple : on remet tout le monde d'accord sur les marges/paddings
   et on force le modèle de boîte "border-box" (plus simple à calculer) */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /* Défilement doux quand on clique sur un lien "#ancre" */
  scroll-behavior: smooth;
  /* Empêche le contenu de "sauter" sous le header fixe quand on arrive sur une ancre */
  scroll-padding-top: 96px;
  /* IMPORTANT : sans ce overflow-x sur <html> (et pas seulement sur <body>),
     le panneau du menu mobile (position: fixed, voir nav.css → .main-nav)
     reste "hors écran" mais continue d'élargir la zone défilable de la
     page : sur mobile, un balayage horizontal (ou l'effet de rebond iOS)
     pouvait alors révéler le menu et faire "déborder" tout le site. */
  overflow-x: hidden;
  width: 100%;
}

img,
picture,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

button,
input,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* Respect des utilisateurs qui préfèrent moins d'animations (accessibilité).
   Règle volontairement globale (le sélecteur universel touche TOUS les
   éléments, y compris ceux animés depuis hero.css, sections.css,
   animations.css...) : elle vit ici, dans le fichier "fondation", plutôt
   que d'être dupliquée dans chaque fichier qui définit une transition. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ----------------------------------------------------------------------
   2. VARIABLES DE DESIGN (DESIGN TOKENS)
   ---------------------------------------------------------------------- */
:root {
  /* --- Couleurs neutres communes au Groupe (basées sur le logo A2S) --- */
  --c-navy-900: #0a1f3c;   /* bleu marine très foncé — fonds sombres, header */
  --c-navy-800: #0e2c52;   /* bleu marine — dégradés, sections sombres */
  --c-navy-700: #17406f;   /* bleu marine plus clair — survols sur fond sombre */
  --c-ink: #16202e;        /* couleur du texte principal (presque noir, teinté bleu) */
  --c-ink-soft: #4b5666;   /* texte secondaire, paragraphes moins importants */
  --c-paper: #f8f6f0;      /* fond clair "papier crème", plus chaud qu'un blanc pur */
  --c-paper-alt: #f0ece1;  /* variante encore plus crème, pour alterner les sections */
  --c-white: #ffffff;
  --c-line: rgba(10, 31, 60, 0.12); /* couleur des bordures fines */

  /* --- Couleur "or/bronze" tirée du logo, utilisée comme accent Groupe --- */
  --c-teal: #167a80;       /* clin d'œil à la flèche verte/teal du logo */

  /* --- Univers A2S SUPPLY : Or / Bronze (fiabilité, matière, industrie) --- */
  --c-a2s-500: #c8963c;
  --c-a2s-600: #a97527;
  --c-a2s-100: #f5e6c8;

  /* --- Univers CDEX : Orange dynamique (mouvement, transport, énergie) ---
     Cette teinte orange existe déjà dans les flèches du logo A2S : elle crée
     un lien visuel naturel entre les deux marques tout en les différenciant. */
  --c-cdex-500: #e2622c;
  --c-cdex-600: #b84a1c;
  --c-cdex-100: #fbe0cf;

  /* --- Couleur d'accent "active" : change selon la page (voir section 3) --- */
  --accent: var(--c-a2s-500);
  --accent-dark: var(--c-a2s-600);
  --accent-light: var(--c-a2s-100);

  /* --- Typographie --- */
  --f-titres: 'Outfit', system-ui, sans-serif;
  --f-texte: 'Inter', system-ui, sans-serif;

  /* Tailles fluides : clamp(min, valeur-idéale-en-vw, max) →
     le texte s'adapte à la largeur de l'écran sans media query supplémentaire */
  --fs-h1: clamp(2.1rem, 1.4rem + 3.2vw, 4rem);
  --fs-h2: clamp(1.7rem, 1.3rem + 1.8vw, 2.75rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);

  /* --- Espacements (échelle régulière, base 8px) --- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4.5rem;
  --sp-7: 6.5rem;

  /* --- Mise en page --- */
  --container: 1240px;
  --radius-s: 8px;
  --radius-m: 16px;
  --radius-l: 28px;
  --ombre-s: 0 4px 16px rgba(10, 31, 60, 0.08);
  --ombre-m: 0 12px 32px rgba(10, 31, 60, 0.12);
  --ombre-l: 0 24px 64px rgba(10, 31, 60, 0.18);
  --transition: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ----------------------------------------------------------------------
   3. THÈMES DE MARQUE
   Le <body> reçoit une classe ".theme-a2s" ou ".theme-cdex" selon la page.
   On redéfinit simplement --accent : tous les boutons, liens, soulignés,
   badges etc. (dans TOUS les fichiers CSS) suivent automatiquement la
   bonne couleur. C'est le cœur du système "un seul design, deux identités
   visuelles cohérentes".
   ---------------------------------------------------------------------- */
body.theme-groupe {
  --accent: var(--c-a2s-500);
  --accent-dark: var(--c-a2s-600);
  --accent-light: var(--c-a2s-100);
}
body.theme-a2s {
  --accent: var(--c-a2s-500);
  --accent-dark: var(--c-a2s-600);
  --accent-light: var(--c-a2s-100);
}
body.theme-cdex {
  --accent: var(--c-cdex-500);
  --accent-dark: var(--c-cdex-600);
  --accent-light: var(--c-cdex-100);
}

/* ----------------------------------------------------------------------
   4. ÉLÉMENTS DE BASE
   ---------------------------------------------------------------------- */
body {
  font-family: var(--f-texte);
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* évite toute barre de scroll horizontale parasite */
}

h1, h2, h3, h4 {
  font-family: var(--f-titres);
  color: var(--c-navy-900);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }

p { color: var(--c-ink-soft); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--sp-3);
}

/* Lien d'évitement pour l'accessibilité clavier : permet de sauter
   directement au contenu principal sans repasser par tout le menu */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--c-navy-900);
  color: var(--c-white);
  padding: var(--sp-2) var(--sp-3);
  z-index: 999;
  border-radius: 0 0 var(--radius-s) 0;
}
.skip-link:focus {
  left: 0;
}

/* --- Boutons --- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.6em;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition), border-color var(--transition);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn svg { width: 1.1em; height: 1.1em; flex-shrink: 0; }

.btn--primary {
  background: var(--accent);
  color: var(--c-white);
  box-shadow: var(--ombre-s);
}
.btn--primary:hover { background: var(--accent-dark); box-shadow: var(--ombre-m); }

.btn--outline {
  background: transparent;
  border-color: currentColor;
  color: var(--c-navy-900);
}
.btn--outline:hover { background: var(--c-navy-900); color: var(--c-white); border-color: var(--c-navy-900); }

.btn--light {
  background: var(--c-white);
  color: var(--c-navy-900);
}
.btn--light:hover { background: var(--accent); color: var(--c-white); }

.btn--ghost-light {
  background: transparent;
  border-color: rgba(255,255,255,0.5);
  color: var(--c-white);
}
.btn--ghost-light:hover { background: rgba(255,255,255,0.15); border-color: var(--c-white); }

/* Étiquette / "eyebrow" au-dessus des titres de section */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-family: var(--f-titres);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-dark);
  margin-bottom: var(--sp-2);
}
.eyebrow::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}

.tag {
  display: inline-block;
  padding: 0.35em 0.9em;
  border-radius: 999px;
  background: var(--accent-light);
  color: var(--accent-dark);
  font-size: 0.8rem;
  font-weight: 600;
}