/* =============================================================
   LAYOUT - Phase 2 : Layout Engineering
   Section "Engagement"

   Portée de ce fichier : géométrie uniquement.
   Aucune couleur, aucune ombre, aucune police finale,
   aucune animation. Rendu volontairement neutre ("greybox").
   ============================================================= */

/* -------------------------------------------------------------
   1. RESET LÉGER
   Strictement nécessaire pour que les dimensions et les
   espacements soient fiables et prévisibles (pas de style).
   ------------------------------------------------------------- */

.stats-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* -------------------------------------------------------------
   2. TOKENS DE MISE EN PAGE
   Échelle d'espacement + tailles de police provisoires.
   Les tailles de police ne sont pas "finales" : elles servent
   uniquement à obtenir des proportions de blocs fidèles à la
   maquette. La typographie définitive sera posée en Phase 3
   sans modifier cette géométrie.
   ------------------------------------------------------------- */
.engagement {
  /* Échelle d'espacement (basée sur 4px) */
  --space-1: 0.375rem;  /*  6px - micro-espace (valeur -> libellé)   */
  --space-2: 0.5rem;    /*  8px - espace resserré (titre -> desc)    */
  --space-3: 1rem;      /* 16px - padding horizontal de la section   */
  --space-4: 1.5rem;    /* 24px - padding interne des colonnes stats (base ;
                            surchargée par une valeur fluide en Phase 4,
                            voir engagement-responsive.css) */
  --space-5: 2.5rem;    /* 40px - respiration header -> stats        */
  --space-8: 6rem;      /* 96px - padding vertical de la section      */

  /* Token dédié (distinct de --space-3) : évite qu'une modification
     du padding horizontal de la section ne fasse varier, par effet
     de bord, l'espace interne badge -> titre. */
  --space-header-gap: 1rem; /* 16px */

  /* Largeur de conteneur : dictée par le bloc le plus large
     (les 4 statistiques), qui contraint aussi le header. */
  --engagement-max-width: 43.75rem; /* 700px */

  /* Tailles de police provisoires (greybox) */
  --fs-badge: 0.75rem;        /* 12px */
  --fs-title: 2.25rem;        /* 36px */
  --fs-body: 0.9375rem;       /* 15px */
  --fs-stat-value: 2.5rem;    /* 40px */
  --fs-stat-label: 0.8125rem; /* 13px */
}

/* -------------------------------------------------------------
   3. SECTION ENGAGEMENT - bloc racine
   Centre le conteneur de contenu dans la largeur disponible.
   ------------------------------------------------------------- */
.engagement {
  display: flex;
  justify-content: center;
  width: 100%;
  padding-block: var(--space-8);
  padding-inline: var(--space-3);
}

.engagement__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--engagement-max-width);

  /* Un seul espace à gérer ici : le conteneur n'a que 2 enfants
     directs (header + stats-list), donc un simple gap suffit
     pour reproduire la respiration entre les deux blocs. */
  gap: var(--space-5);
}

/* -------------------------------------------------------------
   4. HEADER DE SECTION - badge / titre / description
   Colonne centrée. Les deux espacements internes sont différents
   (badge->titre plus large que titre->description) : on utilise
   donc des marges dédiées plutôt qu'un gap uniforme.
   ------------------------------------------------------------- */
.engagement__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.engagement__badge {
  font-size: var(--fs-badge);
  line-height: 1.4;
  margin-bottom: var(--space-header-gap); /* badge -> titre */
}

.engagement__title {
  font-size: var(--fs-title);
  line-height: 1.2;
  margin-bottom: var(--space-2); /* titre -> description */
}

.engagement__description {
  font-size: var(--fs-body);
  line-height: 1.6;
  max-width: 30ch; /* force le retour à la ligne à 2 lignes, sans fixer de largeur en dur */
}

/* -------------------------------------------------------------
   5. STATS-LIST - composant réutilisable
   Rangée flexible de colonnes strictement égales.
   ------------------------------------------------------------- */
.stats-list {
  display: flex;
  width: 100%;

  /* Sécurité anti-casse (voir section 6) : le "vrai" responsive
     de cette rangée sera conçu en Phase 4. */
  flex-wrap: wrap;
}

.stats-list__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  /* Colonnes strictement égales : chaque item se partage
     l'espace disponible de façon identique. */
  flex: 1 1 0;

  padding-inline: var(--space-4);
  gap: var(--space-1); /* valeur -> libellé */
}

/* Séparateur vertical entre les colonnes.
   Aucune couleur choisie : `currentColor` est la valeur par
   défaut du raccourci `border`, ce n'est pas une décision
   esthétique mais un simple trait structurel neutre.
   Sa hauteur suit automatiquement celle de la ligne grâce au
   comportement par défaut de Flexbox (align-items: stretch). */
.stats-list__item:not(:first-child) {
  border-left: 1px solid;
}

.stats-list__value {
  font-size: var(--fs-stat-value);
  line-height: 1.1;
}

.stats-list__label {
  font-size: var(--fs-stat-label);
  line-height: 1.4;
}

/* -------------------------------------------------------------
   6. RESPONSIVE
   La composition par appareil (réorganisation de .stats-list,
   typographie et espacements fluides) est entièrement conçue
   dans engagement-responsive.css (Phase 4). Ce fichier de
   layout reste la référence "desktop" inchangée.
   ------------------------------------------------------------- */


/* =============================================================
   UI PIXEL-PERFECT - Phase 3 : Direction artistique
   Section "Engagement"

   Portée de ce fichier : uniquement l'habillage visuel
   (couleurs, typographie, détails). Aucune propriété de layout
   n'est modifiée ici - la géométrie posée en Phase 2 reste
   figée (voir engagement-layout.css).

   Constat sur la maquette : le fond est un aplat uni, sans
   dégradé ni vignette mesurable, et la section ne contient ni
   image, ni bouton, ni icône, ni ombre portée. La fidélité
   pixel-perfect passe donc ici essentiellement par la palette
   de couleurs et par le système typographique à deux polices
   (serif d'affichage / sans-serif utilitaire).
   ============================================================= */

/* -------------------------------------------------------------
   1. VARIABLES - palette et typographie
   Couleurs extraites par échantillonnage direct de la maquette.
   ------------------------------------------------------------- */
.engagement {
  /* Couleurs */
  --color-text-secondary: color-mix(in srgb, var(--color-paper) 72%, transparent); /* description */
  --color-text-label: color-mix(in srgb, var(--color-paper) 92%, transparent);     /* libellés stats */
  --color-divider: color-mix(in srgb, var(--color-paper) 8%, transparent);         /* séparateurs verticaux */

  /* Typographie : une serif d'affichage (titre + chiffres clés)
     et une sans-serif utilitaire (badge, description, libellés) */
}

/* -------------------------------------------------------------
   2. STYLES GLOBAUX
   ------------------------------------------------------------- */

/* -------------------------------------------------------------
   3. SECTION ENGAGEMENT - fond
   La maquette ne présente aucun dégradé ni vignette mesurable :
   l'arrière-plan est un aplat uni.
   ------------------------------------------------------------- */
.engagement {
  background-color: var(--color-bark);
}

/* -------------------------------------------------------------
   4. COMPOSANT - header de section (badge / titre / description)
   ------------------------------------------------------------- */
.engagement__badge {
  font-family: var(--font-sans);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-ember-on-dark);
}

.engagement__title {
  font-family: var(--font-serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-paper);
}

.engagement__description {
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------------
   5. COMPOSANT - stats-list
   Même paire typographique que le header : la valeur chiffrée
   reprend la serif d'affichage (écho visuel avec le titre),
   le libellé reste en sans-serif utilitaire.
   ------------------------------------------------------------- */
.stats-list__value {
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-ember-on-dark);
}

.stats-list__label {
  font-family: var(--font-sans);
  font-weight: 600;
  color: var(--color-text-label);
}

/* Séparateur vertical : couleur définie ici (structure posée en
   Phase 2 via `border-left: 1px solid` sans couleur explicite) */
.stats-list__item:not(:first-child) {
  border-left-color: var(--color-divider);
}


/* =============================================================
   RESPONSIVE EXPERIENCE - Phase 4
   Section "Engagement"

   Ce fichier se charge en dernier et surcharge volontairement
   certaines variables définies dans engagement-layout.css /
   engagement-visual.css (tailles, espacements) par des versions
   fluides. Aucune règle des phases précédentes n'est réécrite :
   on ne fait que la rendre adaptative.

   Deux niveaux de travail :
   A. Fluidité continue (clamp) pour la typographie et les
      espacements : évite les "sauts" brusques entre breakpoints.
   B. Recomposition structurelle de .stats-list à deux paliers,
      pensée comme une vraie réorganisation, pas un simple
      rétrécissement (4 colonnes -> grille 2x2 -> pile verticale).
   ============================================================= */

/* -------------------------------------------------------------
   A.1 - TYPOGRAPHIE FLUIDE
   Bornes choisies sur repère 375px (petit smartphone) ->
   1440px (desktop), avec plancher/plafond explicites pour que
   rien ne rétrécisse ou ne grossisse au-delà de ces repères.
   ------------------------------------------------------------- */
.engagement {
  --fs-badge: clamp(0.6875rem, 0.6655rem + 0.094vw, 0.75rem);
  --fs-title: clamp(1.5rem, 1.2359rem + 1.127vw, 2.25rem);
  --fs-body: clamp(0.875rem, 0.853rem + 0.094vw, 0.9375rem);
  --fs-stat-value: clamp(1.75rem, 1.4859rem + 1.127vw, 2.5rem);
  --fs-stat-label: clamp(0.75rem, 0.728rem + 0.094vw, 0.8125rem);
}

/* -------------------------------------------------------------
   A.2 - ESPACEMENTS FLUIDES
   Même logique : le rythme vertical respire davantage sur grand
   écran sans jamais devenir excessif sur mobile ni comprimé sur
   desktop.
   ------------------------------------------------------------- */
.engagement {
  --space-8: clamp(3.5rem, 2.2rem + 5.2vw, 7rem);         /* padding vertical de section (accent foncé : un peu plus généreux) */
  --space-5: clamp(1.75rem, 1.4859rem + 1.127vw, 2.5rem); /* header -> stats               */
  --space-3: clamp(1.25rem, 0.9091rem + 1.705vw, 2rem);   /* padding horizontal de section */

  /* Remplace intentionnellement --space-4 (valeur fixe posée en
     Phase 2) par une version fluide : resserrée sur mobile pour
     ne pas gaspiller la largeur utile, égale à --space-4 à son
     maximum desktop. --space-4 reste défini dans layout.css comme
     valeur de référence si ce fichier n'est pas chargé. */
  --stat-pad-inline: clamp(0.75rem, 0.4091rem + 1.705vw, 1.5rem);

  /* Nouveau token : respiration verticale utilisée uniquement
     quand .stats-list passe en grille/colonne (voir section B). */
  --stat-pad-block: clamp(1.25rem, 1.1rem + 0.75vw, 1.75rem);
}

.stats-list__item {
  padding-inline: var(--stat-pad-inline);
}

/* -------------------------------------------------------------
   A.3 - TRÈS GRAND ÉCRAN (≥ 1600px)
   Le contenu reste volontairement centré et contraint (l'identité
   éditoriale ne doit pas s'étirer indéfiniment), mais on lui donne
   un peu plus de présence pour ne pas paraître perdu dans une
   largeur de page très généreuse.
   ------------------------------------------------------------- */
@media (min-width: 100rem) {
  .engagement {
    --engagement-max-width: 47.5rem; /* 700px -> 760px */
  }
}

/* -------------------------------------------------------------
   B.1 - TABLETTE (≤ 768px) : grille 2 x 2
   À partir de la tablette portrait, 4 colonnes côte à côte
   deviennent inconfortables (libellés trop compressés). On
   recompose délibérément la ligne de statistiques en grille
   2x2 : chaque statistique gagne en largeur de lecture, et les
   séparateurs (verticaux entre colonnes, horizontal entre les
   deux rangées) restent cohérents avec l'identité visuelle.
   ------------------------------------------------------------- */
@media (max-width: 48rem) {
  .stats-list__item {
    flex: 1 1 50%;
    padding-block: var(--stat-pad-block);

    /* Réinitialise le séparateur "desktop" (toutes colonnes
       sauf la première) : la logique change en grille 2x2. */
    border-left: none;
  }

  /* Séparateur vertical : uniquement entre les deux colonnes
     de chaque rangée (2e et 4e élément). */
  .stats-list__item:nth-child(even) {
    border-left: 1px solid var(--color-divider);
  }

  /* Séparateur horizontal : entre les deux rangées. */
  .stats-list__item:nth-child(n + 3) {
    border-top: 1px solid var(--color-divider);
  }
}

/* -------------------------------------------------------------
   B.2 - SMARTPHONE (≤ 432px) : pile verticale
   Sur petit écran, la grille 2x2 comprimerait à nouveau les
   libellés les plus longs ("Support client par WhatsApp"). On
   repense la composition une seconde fois : chaque statistique
   occupe toute la largeur, ce qui redonne un confort de lecture
   proche d'une maquette pensée nativement pour mobile, avec un
   rythme vertical régulier plutôt qu'une simple réduction de la
   grille précédente.
   ------------------------------------------------------------- */
@media (max-width: 27rem) {
  .stats-list__item {
    flex: 1 1 100%;
  }

  .stats-list__item:not(:first-child) {
    border-left: none;
    border-top: 1px solid var(--color-divider);
  }
}


/* =============================================================
   MOTION DESIGN - Phase 5
   Section "Engagement"

   Portée de cette section (voir analyse livrée dans le chat) :
   c'est un bloc purement informatif, sans bouton, lien, carte,
   icône ni champ de formulaire. Aucune micro-interaction de
   survol/focus n'est donc ajoutée ici : il n'y a rien à
   "activer" pour l'utilisateur. Le seul mouvement pertinent est
   une animation d'apparition au scroll (Reveal + Stagger),
   pour donner du rythme à l'arrivée du contenu.

   Principes respectés :
   - on n'anime que `opacity` et `transform` (accéléré GPU) ;
   - le contenu reste visible par défaut (progressive enhancement) :
     l'état "masqué avant apparition" n'existe que si le JS a pu
     confirmer qu'il pourra ensuite le révéler (voir .has-js) ;
   - `prefers-reduced-motion: reduce` court-circuite tout, en
     dernier recours, via `!important`.
   ============================================================= */


/* -------------------------------------------------------------
   1. VARIABLES DE MOUVEMENT
   ------------------------------------------------------------- */
.engagement {
  --ease-premium: cubic-bezier(0.16, 1, 0.3, 1); /* ease-out doux, sans rebond */
  --duration-reveal: 550ms; /* dans la plage "apparition" (300–600ms) */
}


/* -------------------------------------------------------------
   2. ÉTAT INITIAL (avant apparition)
   Activé uniquement quand `html.has-js` est présent : si le
   script ne s'exécute pas (JS désactivé / bloqué), le contenu
   reste visible normalement, sans dépendre de l'animation.
   ------------------------------------------------------------- */
html.has-js :is(
  .engagement__badge,
  .engagement__title,
  .engagement__description,
  .stats-list__item
) {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity var(--duration-reveal) var(--ease-premium),
    transform var(--duration-reveal) var(--ease-premium);
}


/* -------------------------------------------------------------
   3. ÉTAT RÉVÉLÉ
   La classe `.is-visible` est ajoutée sur `.engagement` par
   l'IntersectionObserver (engagement-motion.js) lorsque la
   section entre dans le viewport. Le cascade (badge -> titre
   -> description) puis la vague sur les 4 statistiques
   respectent le même rythme de lecture que le contenu lui-même.
   ------------------------------------------------------------- */
html.has-js .engagement.is-visible :is(
  .engagement__badge,
  .engagement__title,
  .engagement__description,
  .stats-list__item
) {
  opacity: 1;
  transform: none;
}

/* Cascade du header : un léger décalage suffit, la lecture est verticale et rapide */
html.has-js .engagement.is-visible .engagement__badge {
  transition-delay: 0ms;
}
html.has-js .engagement.is-visible .engagement__title {
  transition-delay: 90ms;
}
html.has-js .engagement.is-visible .engagement__description {
  transition-delay: 160ms;
}

/* Vague sur les statistiques : démarre juste après le header,
   avec un pas régulier de 60ms entre chaque colonne. */
html.has-js .engagement.is-visible .stats-list__item:nth-child(1) {
  transition-delay: 260ms;
}
html.has-js .engagement.is-visible .stats-list__item:nth-child(2) {
  transition-delay: 320ms;
}
html.has-js .engagement.is-visible .stats-list__item:nth-child(3) {
  transition-delay: 380ms;
}
html.has-js .engagement.is-visible .stats-list__item:nth-child(4) {
  transition-delay: 440ms;
}


/* -------------------------------------------------------------
   4. ACCESSIBILITÉ - prefers-reduced-motion
   Priorité absolue sur tout ce qui précède : le contenu est
   affiché immédiatement, sans mouvement ni délai.
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :is(
    .engagement__badge,
    .engagement__title,
    .engagement__description,
    .stats-list__item
  ) {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}