/* ============================================
   CONSULTING R&D — DESIGN SYSTEM
   W2I CONCEPT SARL | consulting-rd.com
   Version 1.0 | 17/03/2026
   Direction : B — "Blueprint Vivant"
   Compatible : WordPress + GeneratePress + Elementor
   Usage : GeneratePress > Additional CSS
           OU thème enfant (style.css / enqueue)
   ============================================ */


/* ============================================
   SECTION 1 — VARIABLES CSS (DESIGN TOKENS)
   ============================================ */

:root {

  /* ------------------------------------------
     COULEURS — PRIMAIRES
  ------------------------------------------ */
  --color-primary:        #1A2B4A;
  --color-accent:         #2563B0;
  --color-cta:            #1B6EC2;
  --color-cta-hover:      #155DA0;

  /* ------------------------------------------
     COULEURS — FONDS
  ------------------------------------------ */
  --color-bg:             #FFFFFF;
  --color-bg-alt:         #F5F7FA;
  --color-bg-dark:        #0F1A2E;

  /* ------------------------------------------
     COULEURS — TEXTE
  ------------------------------------------ */
  --color-text:                   #2D3748;
  --color-text-secondary:         #6B7280;
  --color-text-on-dark:           #FFFFFF;
  --color-text-on-dark-secondary: rgba(255, 255, 255, 0.7);

  /* ------------------------------------------
     COULEURS — BORDURES
  ------------------------------------------ */
  --color-border:         #E2E8F0;
  --color-border-focus:   #2563B0;
  --crd-border:           #D9E2EC; /* alias utilitaire */

  /* ------------------------------------------
     COULEURS — FONCTIONNELLES
  ------------------------------------------ */
  --color-success:        #059669;
  --color-warning:        #D97706;
  --color-error:          #DC2626;

  /* ------------------------------------------
     COULEURS — PREMIUM
  ------------------------------------------ */
  --color-premium:        #C9A84C;

  /* ------------------------------------------
     GRADIENTS
  ------------------------------------------ */
  --gradient-hero:        linear-gradient(135deg, #0F1A2E 0%, #1A2B4A 50%, #2563B0 100%);
  --gradient-glass:       linear-gradient(135deg,
                            rgba(255, 255, 255, 0.08) 0%,
                            rgba(255, 255, 255, 0.03) 100%);

  /* ------------------------------------------
     TYPOGRAPHIES — FAMILLES
  ------------------------------------------ */
  --font-heading:         'Plus Jakarta Sans', sans-serif;
  --font-body:            'Inter', sans-serif;

  /* ------------------------------------------
     TYPOGRAPHIES — TAILLES (mobile-first)
  ------------------------------------------ */
  --text-xs:   12px;   /* mentions légales */
  --text-sm:   14px;   /* captions, labels */
  --text-base: 16px;   /* corps, CTA */
  --text-lg:   18px;   /* sous-titres hero */
  --text-xl:   20px;   /* H4 */
  --text-2xl:  24px;   /* H3 mobile */
  --text-3xl:  28px;   /* H3 desktop */
  --text-4xl:  36px;   /* H2 */
  --text-5xl:  48px;   /* H1 */
  --text-6xl:  56px;   /* H1 hero, chiffres clés */
  --text-7xl:  72px;   /* compteurs desktop */

  /* ------------------------------------------
     TYPOGRAPHIES — POIDS
  ------------------------------------------ */
  --font-regular:  400;
  --font-medium:   500;
  --font-semibold: 600;
  --font-bold:     700;

  /* ------------------------------------------
     TYPOGRAPHIES — INTERLIGNE
  ------------------------------------------ */
  --leading-tight:   1.2;  /* titres */
  --leading-normal:  1.5;  /* captions */
  --leading-relaxed: 1.6;  /* corps */
  --leading-loose:   1.8;  /* paragraphes aérés */

  /* ------------------------------------------
     ESPACEMENTS — GRILLE DE 8px
  ------------------------------------------ */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;

  /* ------------------------------------------
     ARRONDIS
  ------------------------------------------ */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ------------------------------------------
     OMBRES (3 niveaux + focus)
  ------------------------------------------ */
  --shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08),
              0 1px 2px rgba(0, 0, 0, 0.04);

  --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.12),
              0 2px 4px rgba(0, 0, 0, 0.06);

  --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.16),
              0 4px 8px rgba(0, 0, 0, 0.08);

  --shadow-focus: 0 0 0 3px rgba(46, 125, 219, 0.15);

  /* ------------------------------------------
     TRANSITIONS
  ------------------------------------------ */
  --transition-fast:   150ms ease-out;  /* couleurs, opacité */
  --transition-base:   200ms ease-out;  /* hover boutons, cartes */
  --transition-slow:   300ms ease-out;  /* reveals, menus */
  --transition-reveal: 400ms ease-out;  /* sections au scroll */

  /* ------------------------------------------
     Z-INDEX
  ------------------------------------------ */
  --z-base:       1;
  --z-dropdown:   10;
  --z-sticky:     50;
  --z-overlay:    90;
  --z-modal:      100;
  --z-cta-mobile: 100;
  --z-toast:      110;
}


/* ============================================
   SECTION 2 — RESET ET BASE
   ============================================ */

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

/* Base document */
html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Scrollbar Firefox */
  scrollbar-width: thin;
  scrollbar-color: var(--color-accent) transparent;
}

/* Corps */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Titres : famille heading par défaut */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  color: var(--color-primary);
}

/* Images responsives */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Liens base */
a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--transition-fast);
  cursor: pointer;
}

a:hover {
  color: var(--color-cta);
  text-decoration-color: var(--color-cta);
}

/* Boutons et éléments interactifs */
button,
[role="button"],
input[type="submit"],
input[type="button"],
input[type="reset"] {
  cursor: pointer;
}

/* Listes non stylées (utilitaire) */
ul, ol {
  list-style: none;
}

/* Sélection texte */
::selection {
  background-color: rgba(46, 125, 219, 0.3);
  color: var(--color-primary);
}

::-moz-selection {
  background-color: rgba(46, 125, 219, 0.3);
  color: var(--color-primary);
}

/* Sélection sur fond sombre */
.section--dark ::selection {
  background-color: rgba(46, 125, 219, 0.5);
  color: #FFFFFF;
}

/* Scrollbar Webkit (Chrome, Edge, Safari) */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-cta);
}

/* Focus visible accessible */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* Supprimer l'outline au clic souris */
:focus:not(:focus-visible) {
  outline: none;
}


/* ============================================
   SECTION 3 — TYPOGRAPHIE
   ============================================ */

/* --- Titres (mobile-first) --- */

h1 {
  font-size: var(--text-4xl);   /* 36px mobile */
  letter-spacing: -0.02em;
  margin-bottom: var(--space-5);
}

h2 {
  font-size: var(--text-3xl);   /* 28px mobile */
  letter-spacing: -0.015em;
  margin-bottom: var(--space-4);
}

h3 {
  font-size: var(--text-2xl);   /* 24px mobile */
  letter-spacing: -0.01em;
  margin-bottom: var(--space-3);
}

h4 {
  font-size: var(--text-xl);    /* 20px */
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

h5 {
  font-size: var(--text-lg);    /* 18px */
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

h6 {
  font-size: var(--text-base);  /* 16px */
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

/* Desktop : upgrade des titres */
@media (min-width: 768px) {
  h1 { font-size: var(--text-5xl); }  /* 48px */
  h2 { font-size: var(--text-4xl); }  /* 36px */
  h3 { font-size: var(--text-3xl); }  /* 28px */
}

@media (min-width: 1024px) {
  h1 { font-size: var(--text-6xl); }  /* 56px */
}

/* --- Paragraphes --- */

p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

/* --- Texte de lead (sous-titre hero) --- */

.text-lead {
  font-size: var(--text-lg);
  line-height: var(--leading-loose);
  color: var(--color-text-secondary);
}

@media (min-width: 768px) {
  .text-lead { font-size: var(--text-xl); }
}

/* --- Captions et mentions --- */

.text-sm {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.text-xs {
  font-size: var(--text-xs);
  line-height: var(--leading-normal);
  color: var(--color-text-secondary);
}

/* --- Listes stylées --- */

.list-styled {
  list-style: none;
  padding: 0;
}

.list-styled li {
  position: relative;
  padding-left: var(--space-6);
  margin-bottom: var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.list-styled li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 16px;
  height: 16px;
  background-color: var(--color-success);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  mask-repeat: no-repeat;
  mask-size: contain;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

/* --- Titres sur fond sombre --- */

.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4,
.section--dark h5,
.section--dark h6 {
  color: var(--color-text-on-dark);
}

.section--dark p {
  color: var(--color-text-on-dark-secondary);
}

/* --- Utilitaires typographiques --- */

.font-heading  { font-family: var(--font-heading); }
.font-body     { font-family: var(--font-body); }
.font-bold     { font-weight: var(--font-bold); }
.font-semibold { font-weight: var(--font-semibold); }
.font-medium   { font-weight: var(--font-medium); }
.text-center   { text-align: center; }
.text-left     { text-align: left; }
.text-uppercase { text-transform: uppercase; letter-spacing: 0.08em; }

/* --- Breadcrumbs --- */

.breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
}

.breadcrumb a {
  color: var(--color-accent);
  text-decoration: none;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.breadcrumb__separator {
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
}

.breadcrumb__current {
  color: var(--color-text-secondary);
}


/* ============================================
   SECTION 4 — BOUTONS
   ============================================ */

/* --- Base commune --- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);   /* 12px 24px */
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: 1;
  text-decoration: none;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition:
    background-color var(--transition-base),
    box-shadow      var(--transition-base),
    transform       var(--transition-base),
    border-color    var(--transition-base),
    color           var(--transition-base);
  white-space: nowrap;
  user-select: none;
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --- Tailles --- */

.btn--sm {
  padding: var(--space-2) var(--space-4);  /* 8px 16px */
  font-size: var(--text-sm);
}

.btn--lg {
  padding: var(--space-4) var(--space-8);  /* 16px 32px */
  font-size: var(--text-lg);
}

.btn--full {
  width: 100%;
  padding: var(--space-4) var(--space-6);
}

/* --- Bouton primaire (CTA principal) --- */

.btn-primary {
  background-color: var(--color-cta);
  color: #FFFFFF;
  box-shadow: var(--shadow-1);
}

.btn-primary:hover {
  background-color: var(--color-cta-hover);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
  color: #FFFFFF;
  text-decoration: none;
}

.btn-primary:active {
  background-color: #0F4C8A;
  box-shadow: var(--shadow-1);
  transform: translateY(0);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  box-shadow: none;
}

/* --- Bouton secondaire (contour bleu) --- */

.btn-secondary {
  background-color: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
  padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px); /* compense la bordure */
}

.btn-secondary:hover {
  background-color: rgba(46, 125, 219, 0.1);
  color: var(--color-accent);
  text-decoration: none;
}

.btn-secondary:active {
  background-color: rgba(46, 125, 219, 0.15);
}

.btn-secondary:disabled,
.btn-secondary[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --- Bouton outline (contour blanc sur fond sombre) --- */

.btn-outline {
  background-color: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
  padding: calc(var(--space-3) - 2px) calc(var(--space-6) - 2px);
}

.btn-outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #FFFFFF;
  text-decoration: none;
}

.btn-outline:active {
  background-color: rgba(255, 255, 255, 0.15);
}

/* --- Bouton ghost (sans fond, texte lien) --- */

.btn-ghost {
  background-color: transparent;
  color: var(--color-accent);
  border-color: transparent;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 4px;
  border-radius: 0;
}

.btn-ghost:hover {
  color: var(--color-cta);
  text-decoration-color: var(--color-cta);
  text-decoration: underline;
}

.btn-ghost:active {
  color: var(--color-primary);
}

/* --- Bouton sur fond sombre (fond blanc) --- */

.btn-on-dark {
  background-color: #FFFFFF;
  color: var(--color-primary);
  border-color: transparent;
  box-shadow: var(--shadow-1);
}

.btn-on-dark:hover {
  background-color: var(--color-bg-alt);
  box-shadow: var(--shadow-2);
  color: var(--color-primary);
  transform: translateY(-1px);
  text-decoration: none;
}

/* --- Désactiver les micro-interactions hover sur tactile --- */

@media (hover: none) {
  .btn-primary:hover,
  .btn-on-dark:hover {
    transform: none;
    box-shadow: var(--shadow-1);
  }
}


/* ============================================
   SECTION 5 — CARTES
   ============================================ */

/* --- Carte base --- */

.card {
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  transition:
    box-shadow var(--transition-base),
    transform  var(--transition-base);
}

.card:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

@media (hover: none) {
  .card:hover {
    transform: none;
    box-shadow: var(--shadow-1);
  }
}

/* --- Carte feature (icône + titre + description) --- */

.card--feature {
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  transition:
    box-shadow var(--transition-base),
    transform  var(--transition-base);
}

.card--feature:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.card--feature .card__icon {
  width: 40px;
  height: 40px;
  margin-bottom: var(--space-4);
  color: var(--color-accent);
  flex-shrink: 0;
}

.card--feature .card__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--font-semibold);
  color: var(--color-primary);
  margin-bottom: var(--space-3);
  line-height: var(--leading-tight);
}

.card--feature .card__desc {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
  margin-bottom: 0;
}

/* Bandeau coloré en tête de carte service */
.card--service {
  border-top: 4px solid var(--color-accent);
}

/* --- Carte tarif recommandée --- */

.card--pricing {
  position: relative;
}

.card--pricing.is-recommended {
  box-shadow: var(--shadow-2);
  transform: scale(1.02);
}

.card--pricing.is-recommended:hover {
  box-shadow: var(--shadow-3);
  transform: scale(1.02) translateY(-2px);
}

.card__badge-recommended {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--color-premium);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-align: center;
  padding: var(--space-1) var(--space-4);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}

/* --- Carte glassmorphism (sur fond sombre) --- */

.card--glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: none;
  transition:
    background var(--transition-base),
    border-color var(--transition-base);
}

.card--glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
  transform: none; /* Pas de translateY sur glass */
}

/* Fallback si backdrop-filter non supporté */
@supports not (backdrop-filter: blur(10px)) {
  .card--glass {
    background: rgba(15, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
}

/* Mobile : blur réduit pour la performance */
@media (max-width: 768px) {
  .card--glass {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

/* --- Carte fond sombre (#1A2B4A) --- */

.card--dark {
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-1);
  color: var(--color-text-on-dark);
  transition:
    box-shadow var(--transition-base),
    transform  var(--transition-base);
}

.card--dark:hover {
  box-shadow: var(--shadow-2);
  transform: translateY(-2px);
}

.card--dark .card__title {
  color: var(--color-text-on-dark);
}

.card--dark .card__desc {
  color: var(--color-text-on-dark-secondary);
}

/* --- Carte cas client (bandeau gauche) --- */

.card--case {
  border-left: 4px solid var(--color-accent);
  padding-left: calc(var(--space-6) - 4px);
}

/* --- Image dans une carte (zoom hover) --- */

.card-image {
  overflow: hidden;
  border-radius: var(--radius-md);
}

.card-image img {
  transition: transform var(--transition-slow);
}

.card-image:hover img {
  transform: scale(1.03);
}

/* --- Utilitaires carte --- */

.card__price {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  color: var(--color-primary);
  margin-bottom: var(--space-4);
  line-height: 1;
}


/* ============================================
   SECTION 6 — EFFETS VISUELS
   ============================================ */

/* ------------------------------------------
   E1 — GRAIN SVG
   Nécessite un <svg id="grain-filter"> dans le DOM
   (voir GUIDE_EFFETS_CSS.md, section 2.2)
------------------------------------------ */

/* Grain sur fonds clairs */
.section--grain {
  position: relative;
  overflow: hidden;
}

.section--grain::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  filter: url(#grain);
  opacity: 0.03;
  pointer-events: none;
  z-index: 1;
  will-change: auto;
}

/* Grain sur fonds sombres */
.section--grain-dark {
  position: relative;
  overflow: hidden;
}

.section--grain-dark::after {
  content: '';
  position: absolute;
  inset: 0;
  filter: url(#grain);
  opacity: 0.03;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 1;
}

/* Classe générique (contexte JS ou Elementor) */
.grain-overlay {
  position: relative;
  overflow: hidden;
}

.grain-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  filter: url(#grain);
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* Le contenu dans grain-overlay doit rester au-dessus */
.grain-overlay > * {
  position: relative;
  z-index: 1;
}

/* ------------------------------------------
   E2 — GRADIENT HERO
------------------------------------------ */

.hero-gradient,
.hero,
.section--gradient {
  background: var(--gradient-hero);
}

/* Variante avec image de fond */
.hero--with-image {
  background:
    linear-gradient(135deg,
      rgba(15, 26, 46, 0.92) 0%,
      rgba(26, 43, 74, 0.85) 50%,
      rgba(46, 125, 219, 0.75) 100%
    ),
    url('/wp-content/themes/consulting-rd/images/hero-bg.webp') center/cover no-repeat;
}

/* ------------------------------------------
   E3 — PARALLAXE HERO (classe utilitaire CSS)
   Alternative JS disponible dans main.min.js
------------------------------------------ */

.parallax-hero {
  position: relative;
  overflow: hidden;
}

.parallax-hero__bg {
  position: absolute;
  inset: -20%;
  background: var(--gradient-hero);
  will-change: transform;
  transform: translateZ(0);
}

.parallax-hero__content {
  position: relative;
  z-index: 2;
}

/* Désactiver sur mobile (batterie + compatibilité) */
@media (max-width: 768px) {
  .parallax-hero__bg {
    transform: none !important; /* Override intentionnel pour désactiver la parallaxe */
    inset: 0;
  }
}

/* ------------------------------------------
   E4 — GLASSMORPHISM (classe utilitaire)
------------------------------------------ */

.glass {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-md);
}

.glass:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.15);
}

@supports not (backdrop-filter: blur(12px)) {
  .glass {
    background: rgba(15, 26, 46, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.15);
  }
}

@media (max-width: 768px) {
  .glass {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }
}

/* ------------------------------------------
   E5 — ANIMATIONS REVEAL AU SCROLL
   Déclenchées par IntersectionObserver (JS)
   qui ajoute la classe .is-visible
------------------------------------------ */

/* Reveal standard : fade-in + monte */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal.is-visible,
.reveal.reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

/* Variante depuis la gauche */
.reveal--left {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal--left.is-visible,
.reveal--left.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variante depuis la droite */
.reveal--right {
  opacity: 0;
  transform: translateX(20px);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal--right.is-visible,
.reveal--right.reveal--visible {
  opacity: 1;
  transform: translateX(0);
}

/* Variante scale */
.reveal--scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity var(--transition-reveal), transform var(--transition-reveal);
}

.reveal--scale.is-visible,
.reveal--scale.reveal--visible {
  opacity: 1;
  transform: scale(1);
}

/* Apparition séquentielle des cartes (stagger) */
.reveal--stagger:nth-child(1) { transition-delay: 0ms; }
.reveal--stagger:nth-child(2) { transition-delay: 100ms; }
.reveal--stagger:nth-child(3) { transition-delay: 200ms; }
.reveal--stagger:nth-child(4) { transition-delay: 300ms; }
.reveal--stagger:nth-child(5) { transition-delay: 400ms; }
.reveal--stagger:nth-child(6) { transition-delay: 500ms; }

/* ------------------------------------------
   E6 — COMPTEURS ANIMÉS
   La logique d'incrémentation est en JS
   (voir GUIDE_EFFETS_CSS.md, section 7.2)
------------------------------------------ */

.counter {
  font-family: var(--font-heading);
  font-size: var(--text-6xl);    /* 56px mobile */
  font-weight: var(--font-bold);
  color: var(--color-text-on-dark);
  line-height: 1;
  transition: opacity var(--transition-reveal);
}

@media (min-width: 1024px) {
  .counter {
    font-size: var(--text-7xl);  /* 72px desktop */
  }
}

.counter__label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  color: var(--color-text-on-dark-secondary);
  margin-top: var(--space-2);
  text-transform: none;
}

/* ------------------------------------------
   E7 — MICRO-INTERACTIONS (voir aussi section 4)
------------------------------------------ */

/* Liens inline */
a:not([class]) {
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

/* Liens de navigation avec underline animé */
.nav-link {
  position: relative;
  text-decoration: none;
  color: var(--color-text);
  font-size: 15px;
  font-weight: var(--font-medium);
  transition: color var(--transition-fast);
}

.nav-link::after {
  content: '';
  display: block;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transition: transform var(--transition-base);
  transform-origin: left;
}

.nav-link:hover,
.nav-link.is-active {
  color: var(--color-accent);
  text-decoration: none;
}

.nav-link:hover::after,
.nav-link.is-active::after {
  transform: scaleX(1);
}

/* Icônes cliquables */
.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
}

.icon-link:hover svg {
  stroke: var(--color-cta);
  transition: stroke var(--transition-fast);
}

/* ------------------------------------------
   E8 — STROKE SVG (icônes process)
------------------------------------------ */

.process-icon path {
  stroke-dasharray: var(--path-length, 100);
  stroke-dashoffset: var(--path-length, 100);
  transition: stroke-dashoffset 800ms ease-in-out;
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-icon.is-visible path {
  stroke-dashoffset: 0;
}

/* Délais séquentiels pour le process en 6 étapes */
.process-step:nth-child(1) .process-icon { transition-delay: 0ms; }
.process-step:nth-child(2) .process-icon { transition-delay: 200ms; }
.process-step:nth-child(3) .process-icon { transition-delay: 400ms; }
.process-step:nth-child(4) .process-icon { transition-delay: 600ms; }
.process-step:nth-child(5) .process-icon { transition-delay: 800ms; }
.process-step:nth-child(6) .process-icon { transition-delay: 1000ms; }

/* ------------------------------------------
   E13 — SKELETON LOADING
------------------------------------------ */

@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-border) 25%,
    var(--color-bg-alt) 50%,
    var(--color-border) 75%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

.skeleton--text {
  height: 16px;
  margin-bottom: var(--space-2);
  width: 80%;
}

.skeleton--title {
  height: 24px;
  margin-bottom: var(--space-3);
  width: 60%;
}

.skeleton--image {
  aspect-ratio: 16/9;
  width: 100%;
  border-radius: var(--radius-md);
}

.skeleton--circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}


/* ============================================
   SECTION 7 — NAVIGATION
   ============================================ */

/* --- Header --- */

.site-header {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-bg);
  height: 72px;
  display: flex;
  align-items: center;
  transition: box-shadow var(--transition-base);
  border-bottom: 1px solid transparent;
}

/* Ombre au scroll (classe ajoutée par JS) */
.site-header.is-scrolled {
  box-shadow: var(--shadow-1);
  border-bottom-color: var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-8);
  height: 100%;
}

@media (max-width: 1024px) {
  .site-header__inner { padding: 0 var(--space-6); }
}

@media (max-width: 768px) {
  .site-header__inner { padding: 0 var(--space-4); }
}

/* Logo */
.site-header__logo {
  flex-shrink: 0;
  max-width: 140px;
}

.site-header__logo img {
  height: 40px;
  width: auto;
}

/* --- Navigation desktop --- */

.nav-desktop {
  display: none;
  align-items: center;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
}

.nav-desktop__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-desktop__item {
  position: relative;
}

/* Menu déroulant */
.nav-dropdown {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  min-width: 220px;
  background-color: var(--color-bg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3);
  padding: var(--space-2) 0;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity  var(--transition-base),
    transform var(--transition-base);
  z-index: var(--z-dropdown);
}

.nav-desktop__item:hover .nav-dropdown,
.nav-desktop__item:focus-within .nav-dropdown {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__item {
  display: block;
  padding: 10px var(--space-4);
  font-size: 15px;
  font-weight: var(--font-regular);
  color: var(--color-text);
  text-decoration: none;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.nav-dropdown__item:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-accent);
}

.nav-dropdown__separator {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--space-1) 0;
}

/* CTA dans le header */
.site-header__cta {
  flex-shrink: 0;
  display: none;
}

@media (min-width: 1024px) {
  .site-header__cta { display: block; }
}

/* --- Navigation mobile (overlay) --- */

/* Bouton hamburger */
.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 24px;
  height: 18px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  .nav-toggle { display: none; }
}

.nav-toggle__line {
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--color-primary);
  border-radius: var(--radius-full);
  transition: transform var(--transition-slow), opacity var(--transition-slow);
}

/* État ouvert */
.nav-toggle.is-active .nav-toggle__line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle.is-active .nav-toggle__line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}

.nav-toggle.is-active .nav-toggle__line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Menu mobile overlay */
.nav-mobile {
  position: fixed;
  inset: 0;
  background-color: var(--color-bg-dark);
  z-index: var(--z-modal);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-4) var(--space-8);
  transform: translateX(100%);
  transition: transform var(--transition-slow);
  overflow-y: auto;
}

.nav-mobile.is-open {
  transform: translateX(0);
}

.nav-mobile__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-8);
}

.nav-mobile__close {
  background: none;
  border: none;
  color: #FFFFFF;
  cursor: pointer;
  padding: var(--space-2);
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-mobile__list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.nav-mobile__link {
  display: block;
  font-size: 18px;
  font-weight: var(--font-medium);
  color: #FFFFFF;
  text-decoration: none;
  padding: var(--space-4) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  transition: color var(--transition-fast);
}

.nav-mobile__link:hover {
  color: var(--color-accent);
}

.nav-mobile__sublink {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: var(--color-text-on-dark-secondary);
  text-decoration: none;
  padding: var(--space-2) var(--space-4);
  transition: color var(--transition-fast);
}

.nav-mobile__sublink:hover {
  color: #FFFFFF;
}

.nav-mobile__cta {
  margin-top: var(--space-8);
}

/* Bloquer le scroll du body quand le menu mobile est ouvert */
body.nav-is-open {
  overflow: hidden;
}

/* Skip link (accessibilité) */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  background-color: var(--color-accent);
  color: #FFFFFF;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-decoration: none;
  z-index: var(--z-toast);
  transition: top var(--transition-fast);
}

.skip-link:focus {
  top: var(--space-2);
}


/* ============================================
   SECTION 8 — FORMULAIRES
   ============================================ */

/* --- Groupe champ --- */

.form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-4);
}

/* --- Label --- */

.form-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  margin-bottom: var(--space-1);
}

.form-label .form-required {
  color: var(--color-error);
  margin-left: 2px;
}

/* --- Inputs, textarea, select --- */

.form-control {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  color: var(--color-text);
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xs);
  line-height: var(--leading-normal);
  appearance: none;
  -webkit-appearance: none;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
}

.form-control::placeholder {
  color: var(--color-text-secondary);
}

.form-control:hover {
  border-color: var(--color-border-focus);
}

.form-control:focus,
.form-control:focus-visible {
  border-color: var(--color-border-focus);
  border-width: 2px;
  box-shadow: var(--shadow-focus);
  outline: none;
  padding: 9px 13px; /* compense le border-width qui passe à 2px */
}

/* --- Textarea --- */

textarea.form-control {
  min-height: 120px;
  resize: vertical;
}

/* --- Select avec chevron custom --- */

select.form-control {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px;
  cursor: pointer;
}

select.form-control:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7DDB' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* --- Checkbox / Radio custom --- */

.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  cursor: pointer;
  margin-bottom: var(--space-3);
}

.form-check__input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-check__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-xs);
  background-color: var(--color-bg);
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    box-shadow       var(--transition-fast);
  margin-top: 2px; /* alignement visuel avec le texte */
}

/* Radio */
.form-check--radio .form-check__control {
  border-radius: 50%;
}

/* Hover */
.form-check:hover .form-check__control {
  border-color: var(--color-border-focus);
}

/* Focus */
.form-check__input:focus-visible + .form-check__control {
  box-shadow: var(--shadow-focus);
  border-color: var(--color-border-focus);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* Checked */
.form-check__input:checked + .form-check__control {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Checkmark SVG (checkbox) */
.form-check__input:checked + .form-check__control::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* Dot SVG (radio) */
.form-check--radio .form-check__input:checked + .form-check__control::after {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  background-color: #FFFFFF;
  border-radius: 50%;
}

.form-check__label {
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* --- États validation --- */

.form-group--error .form-control {
  border-color: var(--color-error);
}

.form-group--error .form-control:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
}

.form-group--success .form-control {
  border-color: var(--color-success);
}

.form-message {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
}

.form-message--error {
  color: var(--color-error);
}

.form-message--success {
  color: var(--color-success);
}

.form-hint {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* --- Grille formulaire (2 colonnes desktop) --- */

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--space-4);
}

@media (min-width: 768px) {
  .form-grid-2 {
    grid-template-columns: 1fr 1fr;
  }
}


/* ============================================
   SECTION 9 — CTA STICKY MOBILE
   ============================================ */

/* Masqué par défaut (desktop) */
.crd-sticky-cta {
  display: none;
}

@media (max-width: 767px) {
  .crd-sticky-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 56px;
    background-color: var(--color-cta);
    color: #FFFFFF;
    font-family: var(--font-body);
    font-weight: var(--font-semibold);
    font-size: var(--text-base);
    text-decoration: none;
    text-align: center;
    z-index: var(--z-cta-mobile);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.15);
    /* Support encoche iPhone (safe area) */
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    gap: var(--space-2);
    transition: transform var(--transition-slow);
  }

  /* Masquage au scroll jusqu'au footer (JS ajoute .is-hidden) */
  .crd-sticky-cta.is-hidden {
    transform: translateY(100%);
  }

  /* Compensation dans le layout pour éviter que le CTA masque du contenu */
  body {
    padding-bottom: 56px;
  }

  body.has-safe-area {
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
  }

  /* Masquer dans l'éditeur Elementor pour ne pas gêner l'édition */
  body.elementor-editor-active .crd-sticky-cta {
    display: none !important; /* Override intentionnel : uniquement en mode éditeur */
  }
}


/* ============================================
   SECTION 10 — BANDEAU DE CONFIANCE
   ============================================ */

.trust-bar {
  background-color: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-5) 0;
}

.trust-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-6);
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-8);
}

@media (max-width: 1024px) {
  .trust-bar__inner { padding: 0 var(--space-6); }
}

@media (max-width: 768px) {
  .trust-bar__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    padding: 0 var(--space-4);
  }
}

.trust-bar__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  white-space: nowrap;
}

@media (max-width: 768px) {
  .trust-bar__item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    white-space: normal;
  }
}

.trust-bar__icon {
  width: 24px;
  height: 24px;
  color: var(--color-accent);
  flex-shrink: 0;
  stroke-width: 1.5;
}

@media (max-width: 768px) {
  .trust-bar__icon {
    width: 20px;
    height: 20px;
  }
}

.trust-bar__text {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  line-height: var(--leading-normal);
}


/* ============================================
   SECTION 11 — SECTIONS ET LAYOUT
   ============================================ */

/* --- Container --- */

.container {
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-4);   /* 16px mobile */
  padding-right: var(--space-4);
}

@media (min-width: 768px) {
  .container {
    padding-left: var(--space-6);  /* 24px tablette */
    padding-right: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .container {
    padding-left: var(--space-8);  /* 32px desktop */
    padding-right: var(--space-8);
  }
}

/* Container étroit (formulaires, texte éditorial) */
.container--narrow {
  max-width: 800px;
}

/* --- Section base --- */

.section {
  padding-top: var(--space-16);    /* 64px mobile */
  padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-20);  /* 80px tablette */
    padding-bottom: var(--space-20);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-24);  /* 96px desktop */
    padding-bottom: var(--space-24);
  }
}

/* Section compacte */
.section--compact {
  padding-top: var(--space-10);
  padding-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .section--compact {
    padding-top: var(--space-16);
    padding-bottom: var(--space-16);
  }
}

/* --- Variantes fond --- */

.section--dark {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark);
}

.section--primary {
  background-color: var(--color-primary);
  color: var(--color-text-on-dark);
}

.section--primary h1,
.section--primary h2,
.section--primary h3,
.section--primary h4 {
  color: var(--color-text-on-dark);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

.section--gradient {
  background: var(--gradient-hero);
  color: var(--color-text-on-dark);
}

.section--gradient h1,
.section--gradient h2,
.section--gradient h3 {
  color: var(--color-text-on-dark);
}

/* --- En-tête de section (titre + sous-titre centrés) --- */

.section__header {
  text-align: center;
  margin-bottom: var(--space-10);
}

@media (min-width: 1024px) {
  .section__header { margin-bottom: var(--space-12); }
}

.section__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--space-3);
}

.section__title {
  margin-bottom: var(--space-4);
}

.section__subtitle {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
  line-height: var(--leading-loose);
}

.section--dark .section__subtitle,
.section--gradient .section__subtitle {
  color: var(--color-text-on-dark-secondary);
}

/* --- Grilles --- */

/* 2 colonnes (contenu + sidebar) */
.grid-2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}

@media (min-width: 1024px) {
  .grid-2 {
    grid-template-columns: 2fr 1fr;
  }
}

/* 3 colonnes (services, cartes) */
.grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .grid-3 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* 4 colonnes (chiffres clés, logos) */
.grid-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-6);
  }
}

@media (min-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* --- Footer --- */

.site-footer {
  background-color: var(--color-bg-dark);
  color: var(--color-text-on-dark-secondary);
  padding-top: var(--space-16);
  padding-bottom: var(--space-8);
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  margin-bottom: var(--space-10);
}

@media (min-width: 768px) {
  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  }
}

.site-footer__col-title {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-4);
}

.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__link {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
  transition: color var(--transition-base);
}

.site-footer__link:hover {
  color: #FFFFFF;
}

.site-footer__separator {
  height: 1px;
  background-color: rgba(255, 255, 255, 0.1);
  margin-bottom: var(--space-8);
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  text-align: center;
  font-size: var(--text-xs);
  color: rgba(255, 255, 255, 0.4);
}

@media (min-width: 768px) {
  .site-footer__bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.site-footer__bottom a {
  color: rgba(255, 255, 255, 0.4);
  text-decoration: underline;
  transition: color var(--transition-fast);
}

.site-footer__bottom a:hover {
  color: rgba(255, 255, 255, 0.8);
}

/* Pagination */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  margin-top: var(--space-10);
}

.pagination__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.pagination__item:hover {
  background-color: var(--color-bg-alt);
  color: var(--color-accent);
}

.pagination__item.is-active {
  background-color: var(--color-accent);
  color: #FFFFFF;
}

.pagination__item:disabled,
.pagination__item[aria-disabled="true"] {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* Accordion (FAQ, footer mobile) */
.accordion__item {
  border-bottom: 1px solid var(--color-border);
}

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--space-4) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--color-text);
}

.accordion__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--transition-slow);
}

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(90deg);
}

.accordion__content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.accordion__content[aria-hidden="false"],
.accordion__content.is-open {
  max-height: 1000px; /* valeur suffisante pour tout contenu */
}

.accordion__body {
  padding: 0 0 var(--space-4);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: var(--leading-relaxed);
}

/* Tooltip */
.tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip__content {
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background-color: var(--color-primary);
  color: #FFFFFF;
  font-size: var(--text-sm);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  max-width: 240px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: var(--z-dropdown);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.tooltip__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-primary);
}

.tooltip:hover .tooltip__content,
.tooltip:focus-within .tooltip__content {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


/* ============================================
   SECTION 12 — BADGES ET TAGS
   ============================================ */

/* --- Base badge --- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  padding: 4px var(--space-2);
  border-radius: var(--radius-xs);
  line-height: 1;
  white-space: nowrap;
}

/* Badge primaire (tag expertise, BTP, CVC…) */
.badge--primary {
  background-color: rgba(46, 125, 219, 0.1);
  color: var(--color-accent);
}

/* Badge accent / premium (recommandé) */
.badge--accent {
  background-color: var(--color-premium);
  color: #FFFFFF;
  font-weight: var(--font-semibold);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 4px var(--space-3);
  border-radius: var(--radius-full);
}

/* Badge succès */
.badge--success {
  background-color: rgba(5, 150, 105, 0.1);
  color: var(--color-success);
}

/* Badge erreur */
.badge--error {
  background-color: rgba(220, 38, 38, 0.1);
  color: var(--color-error);
}

/* Badge warning */
.badge--warning {
  background-color: rgba(217, 119, 6, 0.1);
  color: var(--color-warning);
}

/* Badge neutre (sur fond sombre) */
.badge--on-dark {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.9);
}


/* ============================================
   SECTION 13 — ACCESSIBILITÉ
   ============================================ */

/* --- Screen reader only --- */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible au focus (pour les skip links) */
.sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: var(--space-2) var(--space-4);
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* --- Tailles minimales zones cliquables --- */

button,
a,
[role="button"],
[role="link"] {
  min-height: 44px; /* WCAG 2.5.5 — cible minimum 44x44px */
}

/* Exception pour les boutons inline dans le texte */
a:not([class]) {
  min-height: unset;
}

/* --- prefers-reduced-motion --- */

@media (prefers-reduced-motion: reduce) {
  /* Désactiver toutes les animations */
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* Override intentionnel pour reduced-motion */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Reveals : afficher directement sans transition */
  .reveal,
  .reveal--left,
  .reveal--right,
  .reveal--scale {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* SVG stroke : dessiner directement */
  .process-icon path {
    stroke-dashoffset: 0;
    transition: none;
  }

  /* Cartes : pas de déplacement au hover */
  .card:hover,
  .btn-primary:hover,
  .btn-on-dark:hover {
    transform: none;
  }

  /* Parallaxe : désactiver */
  .parallax-hero__bg {
    transform: none !important; /* Override intentionnel pour reduced-motion */
  }

  /* Skeleton : arrêter l'animation */
  .skeleton {
    animation: none;
    background: var(--color-border);
  }
}

/* --- Contrastes WCAG AA garantis --- */
/* Rappel des combinaisons validées (voir DESIGN_SYSTEM.md, section 11.1) :
   - #2D3748 sur #FFFFFF   → 10.5:1  (AA)
   - #2D3748 sur #F5F7FA   → 9.8:1   (AA)
   - #FFFFFF sur #0F1A2E   → 17.4:1  (AAA)
   - #FFFFFF sur #1A2B4A   → 13.5:1  (AAA)
   - #FFFFFF sur #1B6EC2   → 4.6:1   (AA)
   - #6B7280 sur #FFFFFF   → 5.0:1   (AA)
   Ne PAS utiliser #2563B0 pour du texte blanc en dessous de 18px bold
   ou 24px regular. Utiliser #1B6EC2 (var(--color-cta)) à la place.
*/


/* ============================================
   UTILITAIRES TRANSVERSAUX
   ============================================ */

/* Espacement */
.mt-auto  { margin-top: auto; }
.mb-0     { margin-bottom: 0; }
.mb-4     { margin-bottom: var(--space-4); }
.mb-6     { margin-bottom: var(--space-6); }
.mb-8     { margin-bottom: var(--space-8); }

/* Display */
.hidden        { display: none; }
.block         { display: block; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }

/* Flex helpers */
.items-center    { align-items: center; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-col        { flex-direction: column; }
.gap-2  { gap: var(--space-2); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* Couleurs texte utilitaires */
.text-primary   { color: var(--color-primary); }
.text-accent    { color: var(--color-accent); }
.text-muted     { color: var(--color-text-secondary); }
.text-white     { color: #FFFFFF; }
.text-success   { color: var(--color-success); }
.text-error     { color: var(--color-error); }

/* Visibilité responsive */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile  { display: revert; }
  .hide-desktop { display: none; }
}

/* Image decorative (accessible) */
img[aria-hidden="true"],
img[role="presentation"] {
  pointer-events: none;
}