/* ============================================================
   ComEvents Agency — Feuille de style principale
   CDC Digital Experience Premium 2026 — palette resserrée :
   Noir profond #0A0A0A (~30%) · Blanc cassé #F8F6F2 (~60%) ·
   Champagne #C8A96A (~5-8%, accent unique tous univers confondus) ·
   Rouge signature #A50015 (CTA primaire uniquement)
   Typographie : Plus Jakarta Sans (corps) · Fraunces (display)
   ============================================================ */

/* ── Reset & Variables ────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red:       #A50015;
  --red-dark:  #7a0011;
  --red-light: rgba(165,0,21,.12);
  /* Noir profond CDC 2026 §2 — remplace l'ancien #0f0f0f */
  --black:     #0A0A0A;
  --dark:      #1a1a1a;
  --dark2:     #222;
  --gray:      #5a5a5a;
  --muted:     #9a9a9a;
  /* Blanc cassé unifié CDC 2026 §2 — remplace l'ancien #f3f2ef */
  --light:     #F8F6F2;
  --white:     #ffffff;
  --border:    rgba(0,0,0,.08);
  --border-dark: rgba(255,255,255,.08);

  /* Fond de section / surface de carte élevée / texte sur surface —
     utilisées par la section "Comment on travaille" (accueil) et par
     les stats, badges, VMV et cartes équipe de la page Agence. */
  --bg:        #F8F6F2; /* CDC 2026 §2 — blanc cassé, remplace #FAFAF8 */
  --surface:   #f7f7f9;
  --surface2:  #f7f7f9;
  --text:      var(--black);

  /* Texte blanc cassé sur noir profond — CDC 2026 §2 : jamais 100% pur */
  --text-on-dark:         rgba(248,246,242,.92); /* corps */
  --text-on-dark-muted:   rgba(248,246,242,.65); /* secondaire */

  /* Accent champagne — unique, réservé aux CTA/séparateurs/détails/chiffres
     clés (~5-8% de surface). Sert aussi de seul accent de différenciation
     des 11 univers (avec icône + numéro + photo) — voir §2 et §9.4 :
     aucune couleur vive distincte par univers. */
  --gold:       #C8A96A; /* alias conservé pour compat avec le CSS existant */
  --champagne:  #C8A96A;
  --gold-light: #d9c08c; /* teinte claire dérivée du champagne (hover/tint) */
  --champagne-light: #d9c08c;

  /* V72 — Centralisation des couleurs jusqu'ici codées en dur en inline
     dans paiement.php / contact.php / services.php (audit nettoyage CSS).
     Marques tierces : valeurs imposées par l'identité visuelle du service,
     non modifiables — centralisées ici pour éviter la duplication. */
  --brand-stripe:        #635bff;
  --brand-cinetpay:      #ff6b35;
  --brand-whatsapp:      #25d366; /* aligné sur .btn-whatsapp existant (01-base.css) */
  --brand-whatsapp-dark: #128c7e; /* variante foncée */

  /* Bloc de code (extraits de config à copier-coller) */
  --code-bg:   #1a1a2e;
  --code-text: #a3e635;

  /* Section sombre CTA paiement (services.php) */
  --dark-cta-start: #0f0f1a;
  --dark-cta-end:   #1a1a2e;

  /* Badge "configuration requise" (paiement.php + contact.php, identique x2) */
  --warning-bg:          #fff8e1;
  --warning-border:      #f59e0b;
  --warning-text:        #92400e;
  --warning-text-muted:  #78350f;

  /* Étoiles de notation — unifie #f59e0b (CSS) et #e8b400 (inline services.php),
     deux valeurs différentes trouvées pour la même fonction */
  --rating-star: #f59e0b;

  /* Fond très subtil dérivé du noir (accordéon FAQ contact.php) */
  --surface-subtle: rgba(0,0,0,.02);

  /* V73-site — Overlays sombres sur images/modales, trouvés dans agence.php,
     footer.php (popup) lors de l'extension du nettoyage à tout le site */
  --overlay-caption: rgba(0,0,0,.72); /* légende sur photo (agence.php) */
  --overlay-modal:   rgba(0,0,0,.7);  /* fond derrière popup (footer.php) */
  --shadow-popup-color: rgba(0,0,0,.5);

  /* Niveaux d'opacité du blanc pur, utilisés ~30 fois sur tout le site pour
     le texte clair sur fond sombre (hero, cartes photo...). Centralisés tels
     quels (blanc pur, pas la teinte crème --text-on-dark) pour ne rien changer
     visuellement — à noter : le CDC 2026 §2 documente "jamais 100% pur" pour
     ce cas d'usage, donc cet écart mériterait un arbitrage séparé. */
  --white-92: rgba(255,255,255,.92);
  --white-85: rgba(255,255,255,.85);
  --white-75: rgba(255,255,255,.75);
  --white-70: rgba(255,255,255,.7);
  --white-65: rgba(255,255,255,.65);
  --white-60: rgba(255,255,255,.6);
  --white-50: rgba(255,255,255,.5);
  --white-35: rgba(255,255,255,.35);
  --white-30: rgba(255,255,255,.3);
  --white-10: rgba(255,255,255,.1);

  --font-body:    'Plus Jakarta Sans', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  /* ── Échelle typographique clamp() — CDC 2026 §3 ──
     Nouveaux tokens dédiés (n'écrasent pas --fs-* existants, qui restent
     utilisés ailleurs dans le fichier). À appliquer aux sélecteurs
     h1/h2/h3/h4 concernés en Phase 1b. */
  --fs-h1-hero:      clamp(2.75rem, 4vw + 1.5rem, 6rem);      /* 44px → 96px */
  --fs-h1-page:       clamp(2.25rem, 3vw + 1rem, 4rem);        /* 36px → 64px */
  --fs-h2-section:    clamp(1.75rem, 2.2vw + 1rem, 3rem);      /* 28px → 48px */
  --fs-h3-carte:      clamp(1.25rem, 1vw + 1rem, 1.625rem);    /* 20px → 26px */
  --fs-h4-univers:    clamp(1.0625rem, .3vw + 1rem, 1.1875rem);/* 17px → 19px */
  --fs-corps:         clamp(1rem, .3vw + .9rem, 1.0625rem);    /* 16px → 17px */
  --fs-eyebrow:       13px; /* fixe, 12px mobile géré en media query */
  --fs-numero-univers: clamp(1.75rem, 2vw + 1rem, 2.5rem);     /* 28px → 40px */

  /* ── Design System V34 — échelle d'espacement unique (§35.2) ──
     Aucune autre valeur que celles-ci ne doit être utilisée en marge/padding. */
  --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: 96px;  --sp-10: 128px;

  /* ── Échelle typographique — jusqu'ici absente, chaque taille était
     inventée au cas par cas (.85rem, .78rem, 2rem sans rapport entre
     eux). Ratio ~1.25, base 16px. À utiliser pour tout nouveau texte. */
  --fs-xs:   0.72rem;  /* légendes, métadonnées */
  --fs-sm:   0.82rem;  /* texte secondaire, badges */
  --fs-base: 0.95rem;  /* corps de texte par défaut */
  --fs-md:   1.05rem;  /* corps de texte mis en avant */
  --fs-lg:   1.25rem;  /* sous-titres de carte */
  --fs-xl:   1.6rem;   /* petits titres de section */
  --fs-2xl:  2rem;     /* titres H2 standards */
  --fs-3xl:  2.75rem;  /* titres H1 de page */
  --fs-4xl:  4rem;     /* hero homepage */

  /* Rayons — valeurs figées par le CDC V34 §35.3 */
  --radius-btn:    12px;
  --radius-card:   18px;
  --radius-img:    20px;
  --radius-form:   10px;
  --radius-badge:  999px;
  /* Alias conservés pour compat avec le CSS existant */
  --radius-sm:  var(--radius-form);
  --radius-md:  var(--radius-card);
  --radius-lg:  var(--radius-img);
  --radius-xl:  28px;

  /* Ombres — 3 niveaux uniquement (§35.4), volontairement discrètes */
  --shadow-soft:     0 1px 3px rgba(15,15,15,.05), 0 1px 2px rgba(15,15,15,.04);
  --shadow-medium:   0 4px 16px rgba(15,15,15,.07);
  --shadow-elevated: 0 12px 40px rgba(15,15,15,.10);
  /* Alias conservés pour compat avec le CSS existant */
  --shadow-sm: var(--shadow-soft);
  --shadow-md: var(--shadow-medium);

  /* Conteneurs (§35.5) */
  --container-max: 1440px;
  --container-read: 760px;

  --container: 1200px; /* legacy, conservé pour compat mais non utilisé (voir .container) */
  --section-py: clamp(64px, 8vw, 112px);
  --nav-h: 78px; /* Valeur par défaut avant mesure JS (main.js § syncNavHeight) — 78px = hauteur réelle du menu "pilule" (marge 14px + 64px) au chargement, non scrollé. */
  --nav-h-scrolled: 60px; /* CDC §53 : hauteur compactée au scroll */
  /* CDC §11 : grille formelle — desktop 12 col, tablette 8 col, mobile 4 col */
  --grid-cols-desktop: 12;
  --grid-cols-tablet: 8;
  --grid-cols-mobile: 4;
  --grid-gutter: 24px;
  --announce-h: 0px; /* recalculée en JS quand un bandeau d'annonce est actif */
}

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }

/* Détails de signature v47 — la plupart des sites d'agence premium
   personnalisent ces deux éléments par défaut du navigateur, jusqu'ici
   laissés au bleu générique du système d'exploitation. */
::selection { background: var(--red); color: var(--white); }
::-moz-selection { background: var(--red); color: var(--white); }

html { scrollbar-width: thin; scrollbar-color: var(--champagne) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--champagne); border-radius: 10px; border: 2px solid var(--white); }
::-webkit-scrollbar-thumb:hover { background: var(--red); }
.bg-dark ::-webkit-scrollbar-thumb, body.admin ::-webkit-scrollbar-thumb { border-color: var(--black); }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--black);
  line-height: 1.6;
  overflow-x: hidden;
  /* Compteur de "chapitres" — signature v28, cf. section-header ci-dessous */
  counter-reset: chapitre;
  position: relative;
}
/* Grain très léger sur le fond global — signature premium, jamais perceptible
   consciemment, désactivé sur mobile pour la performance (CDC V33 §7/§29) */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image: url('../images/backgrounds/grain-texture.svg');
  background-size: 200px 200px;
}
@media (max-width: 900px) {
  body::before { display: none; }
}

img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ── Container ────────────────────────────────────────────── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 48px);
}

/* Largeur de lecture — CDC V34 §35.5, appliquée aux zones de texte long */
.article-body {
  max-width: var(--container-read);
  margin: 0 auto;
}
/* V47 — le contenu riche des articles (h2, p, ul) n'avait aucun style dédié :
   rendu brut du navigateur, déconnecté de l'identité typographique du reste
   du site (police, couleurs, rythme). On applique ici le même vocabulaire
   que le reste du site : titres en font-display, trait or au survol des
   liens, puces stylées cohérentes avec .sd-deliverables-list. */
.article-body h2 {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  font-weight: 600;
  color: var(--black);
  margin: 44px 0 16px;
  line-height: 1.25;
}
.article-body h2:first-child { margin-top: 0; }
.article-body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--black);
  margin: 32px 0 12px;
}
.article-body p {
  font-size: 1.02rem;
  line-height: 1.75;
  color: var(--gray);
  margin-bottom: 20px;
}
.article-body ul, .article-body ol {
  margin: 0 0 20px 20px;
  color: var(--gray);
  line-height: 1.7;
}
.article-body li { margin-bottom: 6px; }
.article-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(165,0,21,.35); }
.article-body a:hover { text-decoration-color: var(--red); }
.article-body strong { color: var(--black); font-weight: 700; }
.article-body blockquote {
  border-left: 3px solid var(--champagne);
  padding: 4px 0 4px 20px;
  margin: 28px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--black);
}

/* ── Sections ─────────────────────────────────────────────── */
/* .section incrémente le compteur "chapitre" : chaque section numérotée
   (via .section-header) devient une étape du parcours de lecture — pas une
   simple décoration 01/02/03, mais l'ordre réel des sections de la page. */
.section { padding: var(--section-py) 0; counter-increment: chapitre; }
.bg-dark  { background: var(--black); }
.bg-light { background: var(--light); }
.section-cta { text-align: center; margin-top: 48px; }

/* ── Section header — v28 : signature éditoriale asymétrique ──────────
   Remplace l'ancien bloc centré (générique) par une composition alignée
   à gauche, avec le numéro de chapitre en grand caractère fantôme derrière
   le titre et un trait or vertical comme repère de lecture. */
.section-header {
  position: relative;
  text-align: left;
  max-width: 680px;
  margin: 0 0 56px;
  padding-left: 32px;
}
.section-header::before {
  /* Trait or vertical — signature de marque, présente aussi sur le hero
     (hero-stat) et les cartes au survol : un seul motif, répété. */
  content: '';
  position: absolute;
  left: 0; top: .2em; bottom: .3em;
  width: 3px;
  background: linear-gradient(180deg, var(--gold), var(--gold-light));
  border-radius: 2px;
}
.section-header::after {
  /* Numéro de chapitre — reflète la position réelle de la section dans
     la page, pas un simple ornement. */
  content: counter(chapitre, decimal-leading-zero);
  position: absolute;
  right: clamp(-8px, -2vw, 40px);
  top: -0.5em;
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 600;
  font-style: italic;
  color: var(--black);
  opacity: .05;
  line-height: 1;
  z-index: -1;
  pointer-events: none;
}
.section-header.light::after { color: var(--white); opacity: .06; }
.section-header.center {
  /* Échappatoire volontaire : quelques contextes (FAQ, CTA final) restent
     mieux en centré — opt-in explicite plutôt que défaut. */
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
}
.section-header.center::before { display: none; }
.section-header.center::after { left: 50%; right: auto; transform: translateX(-50%); }
.section-header.light h2,
.section-header.light .section-eyebrow { color: var(--white); }

.section-eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}
.section-eyebrow.light { color: rgba(255,255,255,.5); }

.section-header h2 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--black);
}
.section-intro {
  color: var(--gray);
  font-size: 1.05rem;
  margin-top: 16px;
  line-height: 1.7;
}

/* ── Buttons — CDC Digital Experience Premium 2026 §5 ────────
   Hauteur 54px desktop / 48px mobile · padding horizontal 32/24px ·
   radius 999px · transition .35s cubic-bezier(.4,0,.2,1).
   Le rouge signature (--red) reste réservé au seul CTA primaire de
   marque "Parler de votre projet" (héritage, CDC §2) ; le champagne
   (--gold/--champagne) est le remplissage "Primaire" générique du §5 ;
   les variantes outline suivent le style "Secondaire" du §5.
   Fini le style "ombre décalée" (box-shadow offset) — remplacé par un
   mouvement plat translateY + scale, plus sobre. ────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;
  padding: 0 32px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all .35s cubic-bezier(.4,0,.2,1);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .btn { height: 48px; padding: 0 24px; }
}
.btn-red       { background: var(--red); color: var(--white); }
.btn-outline   { background: transparent; border-color: rgba(255,255,255,.3); color: var(--white); }
.btn-outline-dark { background: transparent; border-color: rgba(0,0,0,.15); color: var(--black); }
.btn-white     { background: var(--white); color: var(--black); }
.btn-gold      { background: var(--champagne); color: var(--black); }
.btn-whatsapp  { background: #25d366; color: var(--white); }
.btn-lg        { height: 60px; padding: 0 40px; font-size: 1rem; }
@media (max-width: 768px) { .btn-lg { height: 52px; padding: 0 28px; } }

/* Hover — desktop uniquement (CDC §5) : boutons pleins = léger soulèvement,
   boutons outline = fond teinté champagne discret */
@media (hover: hover) {
  .btn-red:hover,
  .btn-white:hover,
  .btn-gold:hover { transform: translateY(-2px) scale(1.02); }
  .btn-red:hover       { background: var(--red-dark); }
  .btn-white:hover      { background: var(--light); }
  .btn-gold:hover      { background: var(--champagne-light); }
  .btn-outline:hover      { border-color: var(--white); background: rgba(200,169,106,.08); }
  .btn-outline-dark:hover { border-color: var(--black); background: rgba(200,169,106,.08); }
}

/* États actifs + focus clavier (CDC §2/§5 : "Hover. Animation. États actifs. Transitions.") */
.btn:active { transform: scale(.96); }
.btn:focus-visible {
  outline: 2px solid var(--champagne);
  outline-offset: 3px;
}

/* État loading (CDC Design §8 : normal / hover / actif / loading) */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 16px; height: 16px; margin: -8px 0 0 -8px;
  border: 2px solid rgba(255,255,255,.5); border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .6s linear infinite;
}
.btn-outline-dark.is-loading::after,
.btn-white.is-loading::after { border-color: rgba(0,0,0,.25); border-top-color: var(--black); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* Respect du choix utilisateur — CDC §7 : désactivation totale des
   animations de bouton si prefers-reduced-motion, sans exception */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn-red, .btn-white, .btn-gold { transition: none !important; }
  @media (hover: hover) {
    .btn-red:hover, .btn-white:hover, .btn-gold:hover { transform: none !important; }
  }
}

/* ── Timeline (CDC Design §16 : méthodologie / déroulement projet) ── */
.timeline { display: flex; flex-direction: column; max-width: 760px; margin: 0 auto; }
.timeline-item { display: flex; gap: 24px; align-items: flex-start; }
.timeline-marker { flex: 0 0 auto; width: 64px; display: flex; flex-direction: column; align-items: center; }
.timeline-year { font-family: var(--font-display); font-weight: 700; color: var(--red); font-size: 1.1rem; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--red); margin-top: 12px; flex: 0 0 auto; }
.timeline-line { flex: 1; width: 2px; background: var(--border); margin-top: 4px; min-height: 24px; }
.timeline-item:last-child .timeline-line { display: none; }
.timeline-content { flex: 1; padding-bottom: 32px; }
.timeline-content p { color: var(--gray); line-height: 1.7; }

/* ── Process steps (CDC Design §12/16 : processus de service) ── */
.process-steps { display: flex; flex-direction: column; margin-top: 16px; }
.process-step { display: flex; gap: 16px; position: relative; padding-bottom: 24px; }
.process-step:last-child { padding-bottom: 0; }
.process-step:not(:last-child)::before {
  content: ''; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: var(--border);
}
.process-step-num {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%;
  background: var(--red); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; position: relative; z-index: 1;
}
.process-step-body strong { display: block; }
.process-step-body p { margin: 4px 0 0; color: var(--muted); }

/* ── Notifications Toast (V41, remplace l'ancien bandeau .flash statique) ──
   Empilées en haut à droite, apparition/disparition en douceur, jamais de
   blocage de la lecture de la page en dessous. */
.toast-stack {
  position: fixed;
  top: calc(var(--nav-h, 72px) + var(--announce-h, 0px) + 16px);
  right: 16px;
  z-index: 4000; /* au-dessus de tout, y compris la nav (3000) et le ticker (3100) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  box-shadow: var(--shadow-elevated, 0 12px 32px rgba(0,0,0,.16));
  border-left: 4px solid var(--gray);
  font-size: .87rem;
  font-weight: 600;
  color: var(--black);
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: auto;
}
.toast--in  { opacity: 1; transform: translateX(0); }
.toast--out { opacity: 0; transform: translateX(24px); }
.toast-success { border-left-color: #16a34a; }
.toast-error   { border-left-color: var(--red); }
.toast-warning { border-left-color: var(--gold); }
.toast-info    { border-left-color: #2563eb; }
.toast__icon { flex: 0 0 18px; width: 18px; height: 18px; margin-top: 1px; }
.toast-success .toast__icon { color: #16a34a; }
.toast-error   .toast__icon { color: var(--red); }
.toast-warning .toast__icon { color: var(--gold); }
.toast-info    .toast__icon { color: #2563eb; }
.toast__icon svg { width: 100%; height: 100%; }
.toast__msg { flex: 1; line-height: 1.45; }
.toast__close {
  flex: 0 0 auto; background: none; border: none; cursor: pointer;
  font-size: 1.1rem; line-height: 1; color: var(--muted); padding: 0 0 0 4px;
}
.toast__close:hover { color: var(--black); }
@media (max-width: 520px) {
  .toast-stack { left: 16px; right: 16px; max-width: none; }
}