/* ============================================
   TRAIT. — style.css
   Structure :
     1. Variables (tokens)
     2. Reset
     3. Base
   ============================================ */

/* ============================================
   1. VARIABLES
   ============================================

   Les variables CSS (custom properties) sont
   déclarées sur :root, ce qui les rend
   disponibles partout dans le fichier.

   Syntaxe de déclaration : --nom: valeur;
   Syntaxe d'utilisation  : color: var(--ink);

   Avantage : si tu changes --ember ici,
   ça se répercute partout dans le site.
   Tu ne cherches jamais une valeur hex
   dans 200 lignes de code.
   ============================================ */

/* ============================================
   FONTS — @font-face
   ============================================ */

@font-face {
  font-family: "Nohemi";
  src:
    url("../assets/fonts/Nohemi-Thin.woff2") format("woff2"),
    url("../assets/fonts/Nohemi-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nohemi";
  src:
    url("../assets/fonts/Nohemi-ExtraLight.woff2") format("woff2"),
    url("../assets/fonts/Nohemi-ExtraLight.woff") format("woff");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nohemi";
  src:
    url("../assets/fonts/Nohemi-Light.woff2") format("woff2"),
    url("../assets/fonts/Nohemi-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nohemi";
  src:
    url("../assets/fonts/Nohemi-Regular.woff2") format("woff2"),
    url("../assets/fonts/Nohemi-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nohemi";
  src:
    url("../assets/fonts/Nohemi-Medium.woff2") format("woff2"),
    url("../assets/fonts/Nohemi-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nohemi";
  src:
    url("../assets/fonts/Nohemi-SemiBold.woff2") format("woff2"),
    url("../assets/fonts/Nohemi-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nohemi";
  src:
    url("../assets/fonts/Nohemi-Bold.woff2") format("woff2"),
    url("../assets/fonts/Nohemi-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nohemi";
  src:
    url("../assets/fonts/Nohemi-ExtraBold.woff2") format("woff2"),
    url("../assets/fonts/Nohemi-ExtraBold.woff") format("woff");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Nohemi";
  src:
    url("../assets/fonts/Nohemi-Black.woff2") format("woff2"),
    url("../assets/fonts/Nohemi-Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs — structure */
  --ink: #0c1020;
  --void: #141826;
  --charcoal: #1e2436;
  --slate: #3a4054;
  --fog: #7a8099;
  --cream: #f2ede2;

  /* Couleurs — accent */
  --ember: #e05a25;
  --ember-d: #b84920;
  --copper: #c4955a;

  /* Couleurs semi-transparentes */
  --dark-alpha: rgba(58, 64, 84, 0.16);
  --cream-alpha: rgba(242, 237, 226, 0.25);

  /* Bordures semi-transparentes */
  --border-dark: rgba(58, 64, 84, 0.35);
  --border-light: rgba(58, 64, 84, 0.15);
  --border-gradient: linear-gradient(
    90deg,
    rgba(224, 90, 37, 0.65) 0%,
    rgba(196, 149, 90, 0.22) 28%,
    rgba(58, 64, 84, 0.18) 55%,
    rgba(58, 64, 84, 0.08) 100%
  );
  --revborder-gradient: linear-gradient(
    -90deg,
    rgba(224, 90, 37, 0.65) 0%,
    rgba(196, 149, 90, 0.22) 28%,
    rgba(58, 64, 84, 0.18) 55%,
    rgba(58, 64, 84, 0.08) 100%
  );

  /* Typographie */
  --fd: "Nohemi", "Futura", "Century Gothic", sans-serif;
  --fb: "Raleway", "Helvetica Neue", "Helvetica", sans-serif;

  /* Espacements */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 80px;

  /* Rayons de bordure */
  --r-sm: 2px;
  --r-md: 4px;
  --r-lg: 8px;

  /* Transitions */
  --t-fast: 0.15s ease;
  --t-med: 0.25s ease;
}

/* ============================================
   2. RESET
   ============================================

   Chaque navigateur applique ses propres styles
   par défaut : marges sur le body, padding sur
   les listes, taille de police sur les titres...
   Ces valeurs varient selon les navigateurs.

   Le reset neutralise tout ça pour partir
   d'une base identique partout.
   ============================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ============================================
   3. BASE
   ============================================

   Styles globaux appliqués aux éléments
   de base de la page.
   ============================================ */

html {
  /* Active le scroll fluide quand on clique
     sur un lien ancre type href="#offres" */
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  background-color: var(--void);
  color: var(--cream);

  /* La police de base pour tout le site.
     Si Raleway n'est pas chargée, le navigateur
     prend Helvetica Neue, puis Helvetica,
     puis n'importe quelle sans-serif disponible. */
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 300;

  /* line-height sans unité : multiplicateur
     de la taille de police.
     1.6 * 14px = 22.4px d'interligne. */
  line-height: 1.6;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.18;
  filter: url("#noise");

  /* nécessaire pour que le filtre ait une surface à rendre */
  background: rgb(255, 255, 255);
  mix-blend-mode: hard-light;
}

img {
  /* Les images ne dépassent jamais
     leur conteneur en largeur */
  max-width: 100%;

  /* Supprime l'espace parasite sous les images
     (comportement inline par défaut) */
  display: block;
}

a {
  /* Par défaut les liens héritent de la couleur
     du texte environnant */
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  /* On supprime les puces par défaut.
     On les remet explicitement quand on
     en a besoin. */
  list-style: none;
}

.text-display {
  font-family: var(--fd);
  font-weight: 900;
  letter-spacing: 0px;
  color: var(--cream);
}

.accent {
  font-weight: 900;
  text-transform: uppercase;
  color: var(--ember);
}

.text-h1 {
  font-family: var(--fd);
  font-weight: 700;
  font-size: 36px;
  letter-spacing: 0px;
  color: var(--cream);
}

.text-h2 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: 0px;
  color: var(--cream);
}

.text-h3 {
  font-family: var(--fd);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0px;
  color: var(--cream);
}

.text-bodylarge {
  font-family: var(--fb);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: 0px;
  color: var(--cream);
}

.text-body {
  font-family: var(--fb);
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0px;
  line-height: 1.7;
  color: var(--fog);
}

.text-caption {
  font-family: var(--fb);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--fog);
}

/* ============================================
   HEADER
   ============================================ */

.site-header {
  /* Fond légèrement plus sombre que --void
     pour créer une séparation visuelle subtile */
  background-color: var(--ink);

  /* Padding : vertical sp-4 (16px),
     horizontal sp-5 (24px) sur mobile.
     On agrandira sur desktop plus tard. */
  padding: var(--sp-4) var(--sp-5);

  /* Flexbox : logo à gauche, nav à droite,
     les deux centrés verticalement */
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* Sticky : le header reste en haut
     quand on scrolle */
  position: sticky;
  top: 0;

  /* z-index : le header passe par-dessus
     le contenu quand on scrolle.
     Une valeur haute garantit qu'il n'est
     jamais recouvert. */
  z-index: 100;
}

.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--border-gradient);
}

.site-header__logo {
  /* Le SVG a besoin d'une largeur fixe.
     height: auto maintient les proportions. */
  display: block;
  width: 90px;
}

.site-header__logo svg {
  width: 140%;
  height: auto;
  display: block;
}

/* ============================================
   NAVIGATION
   ============================================ */

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--sp-5);
  z-index: 200;
  background-color: var(--ember);
  color: var(--cream);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 500;
  padding: var(--sp-3) var(--sp-5);
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  transition: top var(--t-fast);
}

.skip-link:focus {
  top: 0;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.site-nav__link {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fog);

  /* transition : la couleur change progressivement
     au survol plutôt que d'un coup */
  transition: color var(--t-fast);
}

.site-nav__link:hover {
  color: var(--cream);
}

/* ============================================
   UTILITAIRES
   Classes réutilisables sur n'importe
   quel élément.
   ============================================ */

.text-ember {
  color: var(--ember);
}

/* ============================================
   HERO
   ============================================ */

.hero {
  background-color: var(--void);
  padding: var(--sp-9) var(--sp-5);

  /* Position relative : nécessaire pour
     positionner des éléments décoratifs
     en absolu à l'intérieur plus tard */
  position: relative;
  overflow: hidden;
}

.hero__inner {
  /* Largeur max du contenu.
     margin: 0 auto centre le bloc
     horizontalement quand il est
     plus étroit que son conteneur. */
  max-width: 1200px;
  margin: 0 auto;
}

.hero__eyebrow {
  font-family: var(--fb);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: var(--sp-6);
}

.hero__eyebrow_line {
  display: inline-block;
  width: 44px;
  height: 1px;
  background-color: var(--ember);
  margin-right: var(--sp-4);
  margin-bottom: 2.5px;
}

.hero__title {
  font-family: var(--fd);
  font-weight: 200;
  text-transform: uppercase;

  /* clamp(min, préféré, max)
     La taille s'adapte à la largeur
     de l'écran entre 40px et 76px.
     5vw = 5% de la largeur du viewport.
     Pas besoin de media query pour ça. */
  font-size: clamp(40px, 5vw, 76px);

  letter-spacing: 0px;
  line-height: 1;
  color: var(--cream);
  margin-bottom: var(--sp-6);
}

.hero__body {
  font-family: var(--fb);
  font-size: 16px;
  font-weight: 300;
  color: var(--fog);
  line-height: 1.8;
  margin-bottom: var(--sp-7);

  /* Sur mobile le texte prend toute la largeur.
     Sur desktop on le limitera. */
  max-width: 100%;
}

.hero__caption {
  font-family: var(--fb);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 3px;
  color: var(--fog);
  text-transform: uppercase;
  margin-bottom: var(--sp-7);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4);
  align-items: center;
}

.hero-curve {
  position: absolute;
  top: -8%;
  right: -18%;
  width: min(72vw, 900px);
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(58, 64, 84, 0.9);
  border-radius: 50%;
  z-index: 4;
}

/* ============================================
   COMPOSANTS PARTAGÉS — Sections
   Utilisés dans toutes les sections.
   ============================================ */

.section__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.section__header {
  margin-bottom: var(--sp-7);
}

.section__label {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: var(--sp-3);

  /* Le filet à droite du label est généré
     en CSS avec flexbox + ::after.
     Même technique que le hero::before. */
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.section__label::after {
  content: "";
  flex: 1;
  height: 0.5px;
  background-color: var(--ember);
  opacity: 0.25;
}

/* Variante fond clair : le label
   reste ember mais le filet s'adapte */
.section__label--light::after {
  opacity: 0.3;
}

.section__title {
  font-family: var(--fd);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: 0px;
  line-height: 1.1;
  color: var(--cream);
  margin-bottom: var(--sp-4);
}

/* Variante fond clair */
.section__title--dark {
  color: var(--ink);
}

.section__desc {
  font-size: 14px;
  color: var(--fog);
  line-height: 1.75;
  max-width: 560px;
}

/* Variante fond clair */
.section__desc--dark {
  color: var(--slate);
}

/* ============================================
   SECTION POUR QUI
   ============================================ */

.s-pour-qui {
  background-color: var(--charcoal);
  padding: var(--sp-9) var(--sp-5);
  border-style: solid;
  border-width: 1px 0 0 0; /* top only */
  border-image: var(--revborder-gradient) 1;
}

/* ============================================
   SECTION OFFRES
   ============================================ */

.s-offres {
  background-color: var(--cream);
  padding: var(--sp-9) var(--sp-5);
  border-style: solid;
  border-width: 2px 0 0 0; /* top only */
  border-image: var(--border-gradient) 1;
}

/* ============================================
   OFFRES — Blocs familles
   ============================================ */

.offres__bloc {
  margin-bottom: var(--sp-8);
}

.offres__bloc:last-child {
  margin-bottom: 0;
}

.offres__bloc-label {
  font-family: var(--fb);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--slate);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 0.5px solid var(--border-light);
}

.offres__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-5);
}

/* ============================================
   OFFRE — Carte
   ============================================ */

.offre-card {
  background-color: var(--ink);
  border: 0.5px solid rgba(58, 64, 84, 0.3);
  padding: var(--sp-7) var(--sp-6);
  border-radius: var(--r-md);

  /* Flexbox vertical : permet de pousser
     le footer en bas de carte avec
     margin-top: auto */
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Variante mise en avant */
.offre-card--featured {
  border-color: var(--ember);
  position: relative;
}

/* Filet ember en haut de la carte featured */
.offre-card--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--ember);
  border-radius: var(--r-md) var(--r-md) 0 0;
}

.offre-card__top {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.offre-card__badge {
  display: inline-flex;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 0.5px solid var(--slate);
  border-radius: var(--r-sm);
  color: var(--fog);
  width: fit-content;
}

.offre-card__badge--ember {
  color: var(--ember);
  border-color: var(--ember);
  background-color: rgba(224, 90, 37, 0.08);
}

.offre-card__name {
  font-family: var(--fd);
  font-size: 24px;
  font-weight: 700;
  color: var(--cream);
  letter-spacing: -0.5px;
}

.offre-card__tagline {
  font-size: 13px;
  color: var(--fog);
  line-height: 1.65;
}

/* Indicateur "Identité incluse" */
.offre-card__included {
  font-family: var(--fb);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  color: var(--copper);
  margin-top: var(--sp-1);
}

.offre-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
}

.offre-card__amount {
  font-family: var(--fd);
  font-size: 34px;
  font-weight: 800;
  color: var(--cream);
  letter-spacing: -1px;
}

.offre-card__delay {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fog);
  border: 0.5px solid var(--slate);
  padding: 3px 9px;
  border-radius: var(--r-sm);
}

.offre-card__divider {
  /* On reset le style par défaut de <hr> */
  border: none;
  height: 0.5px;
  background-color: var(--border-dark);
}

.offre-card__items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);

  /* flex: 1 pousse le footer vers le bas
     quand les cartes ont des hauteurs
     différentes */
  flex: 1;
}

.offre-card__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 13px;
  color: var(--fog);
  line-height: 1.6;
}

.offre-card__arrow {
  color: var(--ember);
  font-family: var(--fd);
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 1px;
}

.offre-card__footer {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.offre-card__cible {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--slate);
}

.offre-card__footer .btn {
  width: 100%;
  justify-content: center;
}

/* ============================================
   CARDS — Clients
   ============================================ */

.clients__grid {
  display: grid;

  /* Mobile : une colonne.
     On passera à 3 colonnes sur desktop. */
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}

.client-card {
  background-color: var(--void);
  border: 0.5px solid var(--border-dark);
  padding: var(--sp-6);
  border-radius: var(--r-md);
}

.client-card__num {
  /* Le numéro décoratif en grand, très opaque.
     display: block pour qu'il prenne sa propre ligne. */
  display: block;
  font-family: var(--fd);
  font-size: 52px;
  font-weight: 800;
  color: var(--ember);
  opacity: 0.12;
  line-height: 1;
  letter-spacing: -2px;
  margin-bottom: var(--sp-3);

  /* aria-hidden="true" dans le HTML :
     les lecteurs d'écran ignorent ce nombre
     purement décoratif */
}

.client-card__title {
  font-family: var(--fd);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0px;
  color: var(--cream);
  margin-bottom: var(--sp-3);
  line-height: 1.25;
}

.client-card__desc {
  font-size: 13px;
  color: var(--fog);
  line-height: 1.7;
  margin-bottom: var(--sp-5);
}

.client-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* ============================================
   SECTION PROCESSUS
   ============================================ */

.s-processus {
  background-color: var(--ink);
  padding: var(--sp-9) var(--sp-5);
  border-style: solid;
  border-width: 2px 0 0 0; /* top only */
  border-image: var(--revborder-gradient) 1;
}

/* ============================================
   TIMELINE
   ============================================ */

.processus__timeline {
  display: flex;
  flex-direction: column;
  position: relative;

  /* Décalage gauche pour laisser la place
     à la ligne verticale et aux pastilles */
  padding-left: var(--sp-7);
  margin-bottom: var(--sp-7);
}

/* Ligne verticale continue générée en CSS.
   Positionnée en absolu dans la timeline. */
.processus__timeline::before {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: linear-gradient(
    to bottom,
    var(--ember) 0%,
    rgba(224, 90, 37, 0.15) 100%
  );
}

.processus__step {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-5);
  padding-bottom: var(--sp-7);
  position: relative;
}

.processus__step:last-child {
  padding-bottom: 0;
}

/* Pastille ember positionnée sur la ligne.
   Générée en CSS, pas de markup HTML. */
.processus__step::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--sp-7) + 1px);
  top: 7px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--ember);

  /* Halo autour de la pastille */
  box-shadow:
    0 0 0 3px rgba(224, 90, 37, 0.15),
    0 0 0 6px rgba(224, 90, 37, 0.05);
}

.processus__step-body {
  flex: 1;
}

.processus__step-title {
  font-family: var(--fd);
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: var(--sp-3);
}

.processus__step-desc {
  font-size: 13px;
  color: var(--fog);
  line-height: 1.75;
  max-width: 520px;
}

.processus__step-week {
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ember);
  border: 0.5px solid var(--ember);
  padding: 4px 10px;
  border-radius: var(--r-sm);
  background-color: rgba(224, 90, 37, 0.06);
  white-space: nowrap;
  flex-shrink: 0;
  height: fit-content;
  margin-top: 4px;
}

/* ============================================
   ENCART WEB
   ============================================ */

.processus__web {
  background-color: var(--charcoal);
  border: 0.5px solid var(--border-dark);
  border-left: 6px solid var(--ember);
  border-radius: var(--r-md);
  padding: var(--sp-6);
}

.processus__web-label {
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ember);
  margin-bottom: var(--sp-3);
}

.processus__web-intro {
  font-size: 13px;
  color: var(--fog);
  line-height: 1.7;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 0.5px solid var(--border-dark);
}

.processus__web-steps {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

.processus__web-step {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-5);
}

.processus__web-step-body {
  flex: 1;
}

.processus__web-step-title {
  font-family: var(--fd);
  font-size: 20px;
  font-weight: 700;
  color: var(--cream);
  margin-bottom: var(--sp-2);
}

.processus__web-step-desc {
  font-size: 13px;
  color: var(--fog);
  line-height: 1.75;
  max-width: 480px;
}

/* ============================================
   SECTION DIFFÉRENCIATEUR
   ============================================ */

.s-diff {
  background-color: var(--cream);
  padding: var(--sp-9) var(--sp-5);
  border-style: solid;
  border-width: 2px 0 0 0; /* top only */
  border-image: var(--border-gradient) 1;
}

/* ============================================
   DIFFÉRENCIATEUR — Grille
   ============================================ */

.diff__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

.diff__col-label {
  font-family: var(--fb);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-5);
  border-bottom: 0.5px solid;
}

.diff__col-label--yes {
  color: var(--ember);
  border-color: rgba(224, 90, 37, 0.3);
}

.diff__col-label--no {
  color: var(--slate);
  border-color: rgba(58, 64, 84, 0.2);
}

.diff__items {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.diff__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 14px;
  color: var(--slate);
  line-height: 1.65;
}

/* La colonne "non" est visuellement
   atténuée par rapport à la colonne "oui" */
.diff__item--no {
  color: rgba(58, 64, 84, 0.7);
}

.diff__icon {
  font-size: 14px;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 2px;
}

.diff__icon--yes {
  color: var(--ember);
}

.diff__icon--no {
  color: rgba(58, 64, 84, 0.45);
}

/* ============================================
   SECTION FAQ
   ============================================ */

.s-faq {
  background-color: var(--void);
  padding: var(--sp-9) var(--sp-5);
  border-style: solid;
  border-width: 2px 0 0 0; /* top only */
  border-image: var(--revborder-gradient) 1;
}

/* ============================================
   FAQ — Accordéon
   ============================================ */

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 0.5px solid var(--border-dark);
}

.faq__item:first-child {
  border-top: 0.5px solid var(--border-dark);
}

.faq__question {
  /* dt n'a pas de style particulier,
     tout le travail se fait sur le bouton */
}

.faq__trigger {
  /* Reset complet du bouton natif */
  appearance: none;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;

  /* Layout */
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-6);
  padding: var(--sp-5) 0;

  /* Typographie */
  font-family: var(--fd);
  font-size: 16px;
  font-weight: 600;
  color: var(--fog);
  line-height: 1.3;

  transition: color var(--t-med);
}

.faq__trigger:hover {
  color: var(--ember);
}

.faq__chevron {
  width: 18px;
  height: 18px;
  color: var(--ember);
  flex-shrink: 0;

  /* La rotation est gérée via une classe
     ajoutée par JavaScript */
  transition: transform var(--t-med);
}

/* Quand l'item est ouvert, le chevron
   tourne de 180 degrés */
.faq__item--open .faq__chevron {
  transform: rotate(180deg);
}

.faq__answer {
  font-size: 14px;
  color: var(--fog);
  line-height: 1.8;
  padding-bottom: var(--sp-5);
  max-width: 640px;
}

/* L'attribut hidden masque l'élément.
   On n'a pas besoin de display:none
   en CSS : hidden s'en charge nativement. */

/* ============================================
   SECTION CTA
   ============================================ */

.s-cta {
  background-color: var(--ember);
  padding: var(--sp-9) var(--sp-5);
  border-top: 0.5px solid var(--border-dark);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Filet ember centré en haut */
.s-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cream) 50%,
    transparent 100%
  );
  opacity: 0.8;
}

/* Filet ember atténué en bas */
.s-cta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    var(--cream) 50%,
    transparent 100%
  );
  opacity: 0.8;
}

.s-cta .section__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.s-cta__eyebrow {
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: var(--sp-5);
}

.s-cta__title {
  font-family: var(--fd);
  font-size: clamp(36px, 5vw, 68px);
  font-weight: 900;
  letter-spacing: 0px;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
  margin-bottom: var(--sp-5);
}

.s-cta__sub {
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 300;
  color: var(--charcoal);
  line-height: 1.8;
  max-width: 480px;
  margin-bottom: var(--sp-5);
}

.s-cta__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  background-color: var(--dark-alpha);

  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--ink);

  border: 0.5px solid var(--charcoal);
  padding: 14px 28px;
  border-radius: var(--r-sm);

  transition: background-color var(--t-med);
}

.s-cta__link:hover {
  background-color: var(--cream-alpha);
}

.s-cta__note {
  font-size: 10px;
  color: var(--charcoal);
  margin-top: var(--sp-5);
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
  background-color: var(--ink);
}

.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-5);

  /* Mobile : colonnes empilées */
  display: flex;
  flex-direction: column;
  gap: var(--sp-7);
}

/* ── Brand ── */

.site-footer__logo {
  width: 100px;
  height: auto;
  display: block;
  margin-bottom: var(--sp-4);
}

.site-footer__tagline {
  font-family: var(--fb);
  font-size: 8px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--fog);
  line-height: 2;
}

/* ── Navigation footer ── */

.site-footer__nav-label {
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--slate);
  margin-bottom: var(--sp-4);
}

.site-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.site-footer__nav-link {
  font-family: var(--fb);
  font-size: 13px;
  letter-spacing: 0.5px;
  font-weight: 300;
  color: var(--fog);
  transition: color var(--t-fast);
}

.site-footer__nav-link:hover {
  color: var(--cream);
}

/* ── Contact ── */

.site-footer__email {
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 300;
  color: var(--fog);
  transition: color var(--t-fast);
}

.site-footer__email:hover {
  color: var(--ember);
}

/* ── Barre basse ── */

.site-footer__bottom {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5);
  border-top: 0.5px solid var(--border-dark);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-4);
}

.site-footer__copy {
  font-family: var(--fb);
  font-size: 10px;
  color: var(--slate);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
}

.site-footer__legal-link {
  font-family: var(--fb);
  font-size: 10px;
  color: var(--slate);
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: color var(--t-fast);
}

.site-footer__legal-link:hover {
  color: var(--fog);
}

/* ============================================
   COMPOSANT — Tags
   Réutilisable dans toute la page.
   ============================================ */

.tag {
  display: inline-block;
  font-family: var(--fb);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--fog);
  border: 0.5px solid var(--slate);
  padding: 5px 12px;
  border-radius: var(--r-sm);
}

.tag--active {
  color: var(--cream);
  border-color: var(--ember);
  background-color: rgba(224, 90, 37, 0.08);
}

/* ============================================
   RESPONSIVE — Hero
   ============================================ */

@media (min-width: 768px) {
  .hero {
    padding: 120px var(--sp-9) 100px;
  }

  .hero__body {
    max-width: 520px;
  }
}

/* ============================================
   RESPONSIVE — Pour qui
   ============================================ */

@media (min-width: 768px) {
  .s-pour-qui {
    padding: var(--sp-9);
  }

  .clients__grid {
    /* Trois colonnes égales sur desktop */
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ============================================
   RESPONSIVE — Offres
   ============================================ */

@media (min-width: 768px) {
  .s-offres {
    padding: var(--sp-9);
  }

  .offres__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================
   RESPONSIVE — Processus
   ============================================ */

@media (min-width: 768px) {
  .s-processus {
    padding: var(--sp-9);
  }

  /* Sur desktop le badge semaine
     reste aligné à droite sans
     problème d'espace */
  .processus__step-week {
    margin-top: 6px;
  }
}

/* ============================================
   RESPONSIVE — Différenciateur
   ============================================ */

@media (min-width: 768px) {
  .s-diff {
    padding: var(--sp-9);
  }

  .diff__grid {
    /* Deux colonnes égales sur desktop */
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-8);
  }
}

/* ============================================
   RESPONSIVE — FAQ
   ============================================ */

@media (min-width: 768px) {
  .s-faq {
    padding: var(--sp-9);
  }

  .faq__trigger {
    font-size: 17px;
  }
}

/* ============================================
   RESPONSIVE — CTA
   ============================================ */

@media (min-width: 768px) {
  .s-cta {
    padding: 120px var(--sp-9);
  }
}

/* ============================================
   RESPONSIVE — Footer
   ============================================ */

@media (min-width: 768px) {
  .site-footer__inner {
    padding: var(--sp-8) var(--sp-9);

    /* Trois colonnes sur desktop :
       la colonne brand prend plus de place */
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-8);
  }

  .site-footer__brand {
    /* flex: 2 donne deux fois plus de place
       à la colonne brand par rapport
       aux deux autres colonnes à flex: 1 */
    flex: 2;
  }

  .site-footer__nav {
    flex: 1;
  }

  .site-footer__contact {
    flex: 1;
  }

  .site-footer__bottom {
    padding: var(--sp-5) var(--sp-9);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ============================================
   BOUTON — composant réutilisable
   ============================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);

  font-family: var(--fb);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.5px;
  text-transform: uppercase;

  padding: 11px 22px;
  border: 0.5px solid transparent;
  border-radius: var(--r-sm);

  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;

  transition:
    background-color var(--t-fast),
    color var(--t-fast),
    border-color var(--t-fast);
}

.btn--primary {
  background-color: var(--ember);
  color: var(--cream);
  border-color: var(--ember);
}

.btn--primary:hover {
  background-color: var(--ember-d);
  border-color: var(--ember-d);
}

.btn--outline {
  background-color: transparent;
  color: var(--cream);
  border-color: var(--slate);
}

.btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.04);
  border-color: var(--fog);
}

/* ============================================
   BURGER — mobile uniquement
   ============================================ */

.site-header__burger {
  /* Caché par défaut sur desktop.
     On l'affichera sur mobile via media query. */
  display: none;

  flex-direction: column;
  justify-content: center;
  gap: 5px;

  width: 32px;
  height: 32px;
  padding: 4px;

  background: transparent;
  border: none;
  cursor: pointer;
}

.site-header__burger span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--ember);
  border-radius: 2px;
  transition:
    transform var(--t-fast),
    opacity var(--t-fast);
}

/* ============================================
   RESPONSIVE — mobile first
   
   On définit d'abord le comportement mobile,
   puis on adapte à partir de 768px (tablette)
   et 1024px (desktop).
   
   min-width signifie : "à partir de cette
   largeur, applique ces styles".
   ============================================ */

/* --- Mobile uniquement : max 767px --- */

@media (max-width: 767px) {
  .site-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    background-color: var(--ink);
    border-bottom: 0.5px solid var(--border-dark);
    padding: var(--sp-6) var(--sp-5);
  }

  .site-nav.is-open {
    display: flex;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
  }

  .site-header__burger {
    display: flex;
  }
}

/* --- Tablette et desktop : 768px et plus --- */

@media (min-width: 768px) {
  .site-header {
    padding: var(--sp-5) var(--sp-9);
  }

  .site-header__logo {
    width: 110px;
  }

  .site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;
    position: static;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-6);
  }

  .site-header__burger {
    display: none;
  }
}

/* --- Tablette et desktop : 768px et plus --- */

@media (min-width: 768px) {
  .site-header {
    padding: var(--sp-5) var(--sp-9);
  }

  .site-header__logo {
    width: 110px;
  }

  /* La nav redevient inline, le burger disparaît */
  .site-nav {
    display: flex;
    flex-direction: row;
    align-items: center;

    position: static;
    background-color: transparent;
    border-bottom: none;
    padding: 0;
  }

  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--sp-6);
  }

  .site-header__burger {
    display: none;
  }
}