/* ==========================================================================
   CRÉAPROD-JISTA V2 — Composants
   Phase 1 : boutons, en-tête / navigation, hero.
   (Les autres composants — cartes, tarifs, méthode, footer... — seront
   ajoutés au fur et à mesure des phases suivantes.)
   ========================================================================== */

/* ----- Boutons ----- */
.btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.95rem 2rem;
  border-radius: var(--radius);
  font-family: var(--font-body); font-weight: 700; font-size: 0.85rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}
/* Bouton principal : vert, attire l'œil vers l'action (charte : le vert est
   réservé aux actions importantes). */
.btn-primary { background: var(--color-green); color: #fff; }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--color-green-hover); transform: translateY(-2px); }

/* Bouton secondaire : sobre, bordure fine dorée — ne concurrence jamais le vert. */
.btn-outline { background: transparent; color: var(--color-white); border-color: var(--color-gold); }
.btn-outline:hover, .btn-outline:focus-visible { background: var(--color-gold-soft); border-color: var(--color-gold-bright); color: var(--color-white); }

/* ----- Consentement RGPD (mentions légales / politique de confidentialité) -----
   Fenêtre modale bloquante affichée à la première visite, avant même le
   header ("au début de la navigation") : un seul bouton "J'accepte",
   obligatoire pour continuer. Le choix est mémorisé (localStorage) pour ne
   plus être redemandé. Les deux pages légales elles-mêmes n'affichent pas
   cette fenêtre (voir js/main.js) : elles doivent rester librement lisibles,
   avec leur propre bouton de validation. */
.consent-overlay {
  position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center;
  background: rgba(8,10,12,0.82); backdrop-filter: blur(3px); padding: var(--space-md);
}
/* Spécificité plus forte que ".consent-overlay" ci-dessus : sans cette règle,
   l'attribut [hidden] (posé/retiré en JS) est ignoré car une règle d'auteur
   qui fixe "display" prime toujours sur le display:none par défaut du
   navigateur pour [hidden]. */
.consent-overlay[hidden] { display: none; }
.consent-box {
  position: relative; overflow: hidden;
  background: var(--color-bg-elevated); border: 1px solid rgba(182,140,42,0.25);
  border-radius: calc(var(--radius) * 1.4); max-width: 520px; width: 100%;
  padding: var(--space-lg) var(--space-md) var(--space-md);
  box-shadow: 0 30px 70px -10px rgba(0,0,0,0.6);
}
.consent-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-green));
}
.consent-box .consent-title {
  font-family: var(--font-accent); font-style: italic; font-weight: 500; font-size: 1.3rem;
  color: var(--color-white); margin-bottom: var(--space-sm);
}
.consent-box p { font-size: 0.92rem; color: var(--color-white-soft); margin-bottom: var(--space-md); }
.consent-box a { color: var(--color-gold-bright); font-weight: 600; }
.consent-box a:hover { color: var(--color-gold); }
body.no-scroll { overflow: hidden; }
/* Audit du 14/09/2026 (point 2) : bouton "Refuser" ajouté à côté de
   "J'accepte", de taille et de visibilité identiques (même classe .btn),
   pour que le refus soit aussi accessible que l'acceptation. */
.consent-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.consent-actions .btn { flex: 1 1 160px; justify-content: center; }
@media (max-width: 480px) {
  .consent-box { padding: var(--space-md) var(--space-sm) var(--space-sm); }
  .consent-actions { flex-direction: column; }
}

/* ----- En-tête / navigation ----- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: rgba(13, 16, 19, 0.35);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}
.site-header.is-scrolled {
  background: rgba(8, 10, 12, 0.92);
  border-bottom-color: rgba(182,140,42,0.18);
}
.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-md);
  padding-top: var(--space-sm); padding-bottom: var(--space-sm);
  min-height: var(--header-height);
}
/* Bloc logo : hérite sinon un line-height de 1.65 (corps de texte), qui
   espace beaucoup trop les deux lignes "Créaprod-JISTA" / "Studio de
   création numérique" et donne une impression de bloc trop haut/vertical
   pour un lockup de header. Resserré ici pour un rendu compact et horizontal. */
.logo { display: flex; align-items: center; gap: 0.75rem; color: var(--color-white); }
.logo-mark { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1.5px rgba(255,255,255,0.18); flex-shrink: 0; }
.logo-text { display: block; font-family: var(--font-title); font-weight: 600; font-size: 1.32rem; line-height: 1.15; letter-spacing: 0.02em; }
.logo-text-sub { display: block; font-family: var(--font-body); font-size: 0.66rem; line-height: 1.3; margin-top: 1px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-white-soft); font-weight: 500; }

.nav-toggle {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 8px;
}
.nav-toggle span { width: 24px; height: 2px; background: var(--color-white); transition: var(--transition-fast); }

.primary-nav ul { display: flex; gap: var(--space-md); align-items: center; }
.primary-nav ul li { flex-shrink: 0; }
.primary-nav a {
  color: var(--color-white); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.01em;
  position: relative; padding: 4px 0; white-space: nowrap;
}
.primary-nav a:not(.nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
  background: var(--color-gold); transform: scaleX(0); transform-origin: right;
  transition: transform var(--transition-fast);
}
.primary-nav a:not(.nav-cta):hover::after,
.primary-nav a:not(.nav-cta):focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-cta {
  background: var(--color-green); color: #fff !important; font-weight: 700;
  font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.8rem 1.6rem !important; border-radius: var(--radius);
  box-shadow: 0 8px 20px -6px rgba(0,166,81,0.55);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.nav-cta:hover {
  background: var(--color-green-hover); transform: translateY(-1px);
  box-shadow: 0 10px 24px -6px rgba(0,166,81,0.65);
}

.nav-backdrop {
  position: fixed; inset: 0; z-index: 99;
  background: rgba(8, 10, 12, 0.7);
  opacity: 0; visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.nav-backdrop.is-open { opacity: 1; visibility: visible; }

/* ----- Hero ----- */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  min-height: calc(100dvh - var(--header-height));
  display: flex; align-items: center;
  padding-top: var(--header-height);
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 12%, rgba(182,140,42,0.14) 0%, transparent 42%),
    radial-gradient(circle at 10% 92%, rgba(0,166,81,0.08) 0%, transparent 38%),
    linear-gradient(180deg, var(--color-bg-deep) 0%, var(--color-bg) 55%),
    var(--color-bg);
}
/* Fine trame de points en fond : texture discrète façon "salle de contrôle
   premium", jamais assez marquée pour distraire du texte. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 0%, transparent 75%);
}
/* Sweep doré en diagonale : une couture de lumière qui traverse le Hero,
   pour une profondeur plus cinématique qu'un simple fond plat. */
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(115deg, transparent 0%, transparent 52%, rgba(182,140,42,0.10) 66%, rgba(182,140,42,0.03) 78%, transparent 88%);
  mix-blend-mode: screen;
}

.hero-inner {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: minmax(0, 45%) minmax(0, 55%);
  gap: clamp(var(--space-lg), 6vw, var(--space-xl)); align-items: center;
  width: 100%;
}
.hero-content { position: relative; padding-left: 1.4rem; }
.hero-content::before {
  content: ""; position: absolute; left: 0; top: 0.3rem; bottom: 0.6rem; width: 3px;
  background: linear-gradient(180deg, var(--color-gold), transparent);
}
.hero-eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--color-gold-bright); margin-bottom: clamp(0.6rem, 2vh, var(--space-md)); font-weight: 700;
}
.hero-eyebrow::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-green); box-shadow: 0 0 0 4px rgba(0,166,81,0.18);
  flex-shrink: 0;
}
/* Taille du titre pilotée à la fois par la largeur ET la hauteur de
   fenêtre (vw + vh) : un simple clamp en vw ne réagit qu'à la largeur, or
   le vrai problème à 100% de zoom vient des écrans larges mais bas
   (1920x1080, 1366x768...). En mêlant vw et vh, le titre se réduit aussi
   sur les fenêtres courtes, sans perdre en impact sur les écrans hauts. */
.hero-title {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.4rem, 3.4vw + 2vh, 4.4rem); line-height: 1.04; letter-spacing: -0.02em;
  margin-bottom: clamp(0.75rem, 2.2vh, var(--space-md)); color: var(--color-white);
}
/* IDENTITÉS. reste dans la même police condensée très grasse, en
   MAJUSCULES, jamais en italique ni en serif — seule la couleur change. */
.hero-title .text-accent { color: var(--color-gold); }
.hero-subtitle {
  font-size: 1.15rem; line-height: 1.5; color: var(--color-white-soft); max-width: 46ch;
  margin-bottom: clamp(1rem, 3vh, var(--space-lg));
}
.hero-actions { display: flex; gap: 0.85rem; flex-wrap: wrap; }

/* ----- Accès rapide "Déjà client ?" (paiement Stripe) : volontairement
   discret, plus petit que .btn, jamais dans les tons "action principale"
   verts pleins pour ne pas concurrencer "Démarrer mon projet". Fine
   bordure dorée + fond quasi transparent ; l'icône reprend la touche verte
   du site (action possible) sans en faire un bouton d'action primaire. */
.hero-client-access {
  margin-top: var(--space-sm); padding-top: var(--space-sm);
  border-top: 1px solid rgba(255,255,255,0.09);
}
.hero-client-label {
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-white-soft); margin: 0 0 0.55rem;
}
.hero-client-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hero-client-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1rem; border-radius: 999px;
  font-family: var(--font-body); font-weight: 600; font-size: 0.78rem;
  color: var(--color-white-soft); background: rgba(255,255,255,0.03);
  border: 1.5px solid rgba(212,175,55,0.4);
  text-decoration: none; cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.hero-client-btn svg { flex-shrink: 0; color: var(--color-green); }
.hero-client-btn:hover, .hero-client-btn:focus-visible {
  border-color: var(--color-gold-bright); color: var(--color-white); background: rgba(212,175,55,0.08);
}
.hero-client-note { margin: 0.5rem 0 0; font-size: 0.7rem; color: var(--color-white-soft); opacity: 0.75; }

/* Ligne de repères sous les CTA : signaux factuels et sobres (pas de faux
   chiffres), pour rassurer sans jamais inventer une preuve sociale. */
.hero-trust {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.1rem; align-items: center;
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.09);
  font-size: 0.82rem; color: var(--color-white-soft); letter-spacing: 0.01em;
}
.hero-trust strong { color: var(--color-white); font-weight: 600; }
.hero-trust span[aria-hidden] { color: rgba(255,255,255,0.25); }

/* ----- Visuel du Hero : réutilise le même système de "scène" 3D que la
   section "Projets en cours" (classes .collage-device / .collage-screen),
   pour une cohérence visuelle totale et un rendu premium homogène sur toute
   la page — vraie capture, jamais rognée (object-fit: contain). ----- */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; }

/* Monogramme CJ en grand format derrière la scène d'écrans : premier
   élément du DOM dans .hero-visual (donc peint en tout premier, sous le
   halo doré et les 3 écrans) et sans z-index positif pour ne jamais passer
   devant. mix-blend-mode: screen fait disparaître le fond noir du visuel
   sans avoir à retravailler chaque pixel, et laisse le doré/rouge/vert
   ressortir en lumière sur l'anthracite — cohérent avec l'esprit "halo
   numérique premium" déjà en place ici (jamais un aplat plaqué). */
.hero-logo-mark {
  position: absolute; top: 50%; left: 50%;
  width: clamp(420px, 52vw, 860px); height: auto;
  transform: translate(-50%, -50%);
  z-index: 0; pointer-events: none;
  mix-blend-mode: screen; opacity: 0.55;
}

.hero-visual-glow {
  position: absolute; width: 820px; height: 820px; border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,82,0.34) 0%, rgba(182,140,42,0.12) 45%, transparent 70%);
  filter: blur(16px); pointer-events: none; z-index: 0;
}

/* Halo doré centré derrière la scène d'écrans : cercles concentriques fins
   + poussière d'étincelles, pour un fond premium et numérique — jamais une
   photo, jamais de "carte postale". Purement décoratif (aria-hidden). */
.hero-orbit {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.hero-ring {
  position: absolute; border-radius: 50%;
  border: 1px solid rgba(212,175,82,0.4);
}
.hero-ring-1 { width: 320px; height: 320px; opacity: 0.6; border-width: 1.5px; }
.hero-ring-2 { width: 500px; height: 500px; opacity: 0.46; border-color: rgba(212,175,82,0.36); }
.hero-ring-3 { width: 700px; height: 700px; opacity: 0.3; border-color: rgba(212,175,82,0.3); }
.hero-ring-4 { width: 940px; height: 940px; opacity: 0.16; border-color: rgba(212,175,82,0.24); }
.hero-sparkles {
  position: absolute; inset: -20%;
  background:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(212,175,82,0.9), transparent 60%),
    radial-gradient(1.2px 1.2px at 82% 16%, rgba(212,175,82,0.7), transparent 60%),
    radial-gradient(1.8px 1.8px at 62% 74%, rgba(212,175,82,0.85), transparent 60%),
    radial-gradient(1.2px 1.2px at 30% 82%, rgba(212,175,82,0.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 90% 62%, rgba(212,175,82,0.7), transparent 60%),
    radial-gradient(1.2px 1.2px at 46% 8%, rgba(212,175,82,0.5), transparent 60%),
    radial-gradient(1.8px 1.8px at 74% 42%, rgba(212,175,82,0.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 10% 55%, rgba(212,175,82,0.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 55% 92%, rgba(212,175,82,0.55), transparent 60%),
    radial-gradient(1.4px 1.4px at 8% 88%, rgba(212,175,82,0.5), transparent 60%);
}
@media (prefers-reduced-motion: no-preference) {
  .hero-ring { animation: hero-ring-pulse 7s ease-in-out infinite; }
  .hero-ring-2 { animation-delay: -1.5s; }
  .hero-ring-3 { animation-delay: -3s; }
  .hero-ring-4 { animation-delay: -4.5s; }
}
@keyframes hero-ring-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.03); }
}
/* Hauteur pilotée directement par un clamp (min, cible en vh, max) plutôt
   que par aspect-ratio + max-height : l'ancienne combinaison pouvait, une
   fois la hauteur plafonnée par max-height, laisser la largeur (posée en
   %) dicter un rapport différent de l'aspect-ratio déclaré et "tasser"
   visuellement la scène. Avec un clamp explicite, la hauteur reste stable
   et prévisible sur toutes les fenêtres (large et basse comme 1920x1080,
   ou haute et étroite), sans jamais dépasser ni la colonne ni la fenêtre —
   composition et proportions des écrans inchangées, juste plus grandes. */
.hero-stage {
  position: relative; width: 100%; max-width: 1080px;
  height: clamp(380px, 58vh, 660px);
  margin-inline: auto;
  perspective: 1800px; perspective-origin: 50% 25%; z-index: 1;
}
/* Très léger halo doré directement autour des écrans du Hero, pour les
   détacher du fond sans effet excessif — n'affecte que le Hero, jamais les
   écrans identiques utilisés plus bas dans "Projets en cours". */
.hero-stage .collage-screen {
  box-shadow:
    0 34px 70px -12px rgba(0,0,0,0.68),
    0 12px 28px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.10),
    0 0 40px rgba(212,175,82,0.14);
}
/* ----- Entrée des écrans du Hero : animation CSS pure, jamais dépendante
   du scroll -----
   Le composant ".collage-device" partagé démarre invisible/réduit et
   n'apparaît qu'au scroll (IntersectionObserver + classe ".is-visible",
   voir main.js) — logique pour la scène "Projets en cours" plus bas sur la
   page, mais risquée pour le Hero : au-dessus de la ligne de flottaison, un
   souci de timing JS (chargement lent, script bloqué) pouvait laisser les
   écrans invisibles ou minuscules alors même que la page vient de charger.
   Ici, l'apparition est garantie par une simple animation CSS déclenchée au
   rendu, sans aucune dépendance au JS ni au scroll. */
.hero-stage .collage-device {
  opacity: 0;
  transform: translateY(18px) rotateX(var(--rx, 6deg)) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 0deg)) scale(0.97);
  animation: hero-stage-in 0.85s cubic-bezier(.16,.8,.3,1) forwards;
  animation-delay: var(--reveal-delay, 0s);
}
@keyframes hero-stage-in {
  to { opacity: 1; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stage .collage-device {
    opacity: 1; animation: none;
    transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 0deg));
  }
}

/* Socle "bureau" discret sous les 3 écrans du Hero : donne une assise
   physique à la scène (les écrans ne semblent plus flotter dans le vide)
   sans jamais rivaliser avec le halo doré existant — une ellipse en dégradé
   anthracite très sombre, avec un fin reflet doré en bordure haute pour
   suggérer une surface laquée/premium plutôt qu'un simple aplat. Purement
   décoratif (aria-hidden), placé derrière les écrans (z-index le plus bas
   de la scène) et masqué sur mobile comme le reste du décor 3D — voir
   responsive.css. */
.hero-desk {
  position: absolute; left: 50%; bottom: 6%; width: 88%; height: 30%;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(30,34,40,0.85) 0%, rgba(14,16,19,0.55) 55%, transparent 78%);
  border-radius: 50%;
  box-shadow: inset 0 1px 0 rgba(212,175,82,0.10);
  z-index: 0; pointer-events: none;
}
/* Disposition en arc : le téléphone (devant, avancé) doit toujours
   apparaître au-dessus du moniteur (centre, en retrait), lui-même au-dessus
   du 3e écran (sur le côté, le plus reculé de la scène) — quel que soit
   l'ordre des éléments dans le DOM. */
.hero-stage .collage-device.is-laptop { z-index: 1; }
.hero-stage .collage-device.is-monitor { z-index: 2; }
.hero-stage .collage-device.is-phone { z-index: 3; }
/* Ombres de contact un peu plus amples/douces dans le Hero que dans
   "Projets en cours" : la scène y est plus grande et plus centrale, une
   ombre plus généreuse renforce la sensation d'appareils réellement posés
   sur le socle ci-dessus plutôt qu'un simple montage plat. */
.hero-stage .collage-shadow {
  bottom: -14%; height: 26%; filter: blur(6px);
}

.hero-visual-caption {
  position: absolute; left: 50%; bottom: -2.4rem; transform: translateX(-50%);
  font-size: 0.8rem; color: var(--color-white-soft); white-space: nowrap;
  font-style: italic; font-family: var(--font-accent); z-index: 2;
}

/* Petite carte "preuve" flottante — une vraie photo d'un événement livré,
   posée en tirage légèrement incliné dans un coin du Hero. Apporte une
   touche humaine et tangible à côté de la démonstration produit, sans
   jamais recourir à une photo d'illustration ou de stock. */
.hero-proof-card {
  position: absolute; z-index: 3; right: 2%; top: -4%;
  width: clamp(150px, 15vw, 190px); margin: 0;
  transform: rotate(4deg);
  filter: drop-shadow(0 20px 36px rgba(0,0,0,0.55));
}
.hero-proof-frame {
  background: rgba(13,16,19,0.5); border: 1px solid rgba(182,140,42,0.35);
  border-radius: 10px; padding: 6px; backdrop-filter: blur(2px);
}
.hero-proof-card img {
  display: block; width: 100%; height: auto; aspect-ratio: 2/1.05; object-fit: cover;
  border-radius: 6px;
}
.hero-proof-card figcaption {
  display: flex; align-items: center; gap: 6px;
  margin-top: 0.5rem; padding-right: 2px;
  font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600;
  color: var(--color-white-soft);
}
.hero-proof-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--color-green);
  box-shadow: 0 0 0 3px rgba(0,166,81,0.22); flex: none;
}

/* Citation / motto de marque : petite touche éditoriale en italique, en
   écho aux valeurs déjà énoncées plus bas sur la page. */
.hero-motto {
  font-family: var(--font-accent); font-style: italic; color: var(--color-white-soft);
  font-size: 0.95rem; margin: var(--space-md) 0 0;
}
.hero-motto::before { content: "« "; }
.hero-motto::after { content: " »"; }

/* ----- Barre de repères juste après le Hero : des chiffres réels et
   vérifiables (jamais de statistique inventée — voir règle "contenu réel
   uniquement"), présentés dans le même esprit visuel que le reste du Hero
   (icône + valeur + légende, fond profond). ----- */
.hero-stats { background: var(--color-bg-deep); border-top: 1px solid rgba(182,140,42,0.14); border-bottom: 1px solid rgba(182,140,42,0.14); }
.hero-stats-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  padding: var(--space-lg) var(--space-md);
}
.hero-stat {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem;
  padding: 0 var(--space-sm);
  border-left: 1px solid rgba(255,255,255,0.08);
}
.hero-stat:first-child { border-left: none; }
.hero-stat-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(182,140,42,0.4); color: var(--color-gold-bright);
  margin-bottom: 0.2rem;
}
.hero-stat-value {
  font-family: var(--font-body); font-weight: 800; font-size: 1.7rem; color: var(--color-white); line-height: 1;
}
.hero-stat-label { font-size: 0.82rem; color: var(--color-white-soft); max-width: 22ch; }

/* ----- Section "Expertises" ----- */
/* Bandeau "expertises" plein largeur, sous le hero : remplace l'ancien texte
   inline à puces par un vrai bandeau dense et premium (fond surélevé,
   séparateurs dorés fins), conformément à la maquette validée. */
.expertise-bar {
  margin-bottom: var(--space-md);
  background: var(--color-bg-elevated);
  border-top: 1px solid rgba(182,140,42,0.35);
  border-bottom: 1px solid rgba(182,140,42,0.35);
  border-radius: 10px;
}
.expertise-bar-list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  margin: 0; padding: 0; list-style: none;
}
.expertise-bar-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 1.05rem var(--space-md);
  font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600;
  color: var(--color-gold-bright);
  border-right: 1px solid rgba(182,140,42,0.2);
}
.expertise-bar-item:last-child { border-right: none; }
.expertise-bar-item svg { flex-shrink: 0; }
.expertise-title {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -0.005em; line-height: 1.15;
}
.expertise-lead { max-width: 65ch; margin-bottom: var(--space-lg); }
.expertise-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
}
.expertise-card {
  background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: var(--space-md);
  display: flex; flex-direction: column;
  transition: transform var(--transition-fast), border-color var(--transition-fast);
}
.expertise-card:hover { transform: translateY(-6px); border-color: rgba(182,140,42,0.35); }
.expertise-card--featured { background: var(--color-bg-elevated-2); border-color: rgba(182,140,42,0.3); }
/* Visuel réel en tête de carte : uniquement quand une réalisation honnête
   existe (Sites internet, Communication digitale). Bleed jusqu'aux bords
   de la carte, dégradé bas pour la lisibilité du contenu qui suit. */
.expertise-card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  margin: calc(var(--space-md) * -1) calc(var(--space-md) * -1) var(--space-md);
  border-radius: 13px 13px 0 0;
  overflow: hidden;
}
.expertise-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.expertise-card-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0) 55%, rgba(10,10,12,0.65) 100%);
  pointer-events: none;
}
/* Carte "Identité visuelle" : aucun visuel de projet disponible (pas de
   branding client livré à ce jour) — on ne fabrique pas de mockup. La
   densité visuelle est obtenue autrement : icône et numéro agrandis, fond
   sombre à léger grain doré, profondeur via ombre portée. */
.expertise-card--identity {
  background-image:
    repeating-linear-gradient(135deg, rgba(212,175,82,0.035) 0px, rgba(212,175,82,0.035) 1px, transparent 1px, transparent 13px),
    linear-gradient(160deg, rgba(24,20,12,0.92) 0%, rgba(12,11,9,0.98) 65%);
  box-shadow: inset 0 1px 0 rgba(212,175,82,0.08), 0 18px 40px -28px rgba(0,0,0,0.6);
}
.expertise-card--identity .expertise-icon {
  width: 60px; height: 60px;
  border-color: rgba(212,175,82,0.55);
  background: rgba(212,175,82,0.06);
}
.expertise-card--identity .expertise-icon svg { width: 30px; height: 30px; }
.expertise-card--identity .expertise-number { font-size: 2.6rem; color: var(--color-gold-bright); }
.expertise-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-sm); }
.expertise-icon {
  width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(182,140,42,0.4); color: var(--color-gold-bright);
}
.expertise-number {
  font-family: var(--font-title); font-weight: 600; font-size: 1.7rem;
  color: var(--color-green); line-height: 1;
}
.expertise-card h3 { font-size: 1.35rem; margin-bottom: 0.3rem; }
.expertise-tagline { color: var(--color-white-soft); font-size: 0.95rem; margin-bottom: var(--space-md); }
.expertise-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0 0 var(--space-md); flex: 1; }
.expertise-list li {
  position: relative; padding-left: 1.5rem; font-size: 0.9rem; color: var(--color-white-soft);
}
.expertise-list li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--color-green); font-weight: 700; }
.expertise-card .btn { align-self: flex-start; }

/* ----- Section "Projets en cours" ----- */
.projects-layout {
  display: grid; grid-template-columns: minmax(240px, 320px) 1fr;
  gap: var(--space-xl); align-items: start;
}
.projects-title {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 3.6vw, 3.1rem); letter-spacing: -0.01em; line-height: 1.02;
  margin: 0 0 var(--space-md);
}
.projects-badge {
  width: 160px; height: 160px; border-radius: 50%;
  border: 1px solid rgba(182,140,42,0.45);
  display: flex; align-items: center; justify-content: center; text-align: center;
  margin: 0 0 var(--space-md); padding: var(--space-sm);
}
.projects-badge span { font-size: 0.82rem; line-height: 1.4; color: var(--color-white-soft); }
.projects-badge strong { color: var(--color-gold-bright); font-weight: 700; }
.projects-tags { font-size: 0.92rem; color: var(--color-white-soft); line-height: 1.9; margin-bottom: var(--space-md); }
.projects-note { font-size: 0.88rem; }

/* Composition des mockups : "scène" à ratio fixe, les écrans sont positionnés
   en pourcentages (--x/--y/--w custom properties posées en inline sur chaque
   ".collage-device") afin de rester proportionnels à n'importe quelle largeur
   d'écran, jusqu'au repli mobile en pile verticale (voir responsive.css).
   Chaque appareil est légèrement incliné en 3D (rotateX/rotateY) pour donner
   une vraie sensation de perspective/profondeur, comme une scène de mockups
   vue en angle plutôt qu'une simple grille à plat. */
.projects-collage {
  position: relative; width: 100%; aspect-ratio: 1427 / 813;
  margin-top: var(--space-sm);
  perspective: 1800px; perspective-origin: 50% 20%;
}
/* Halo doré discret derrière la scène, façon studio photo — purement
   décoratif, ne doit jamais gêner la lecture des écrans au-dessus. */
.projects-collage::before {
  content: ""; position: absolute; top: -8%; right: -6%; width: 62%; height: 62%;
  background:
    radial-gradient(circle at 62% 38%, rgba(182,140,42,0.18) 0%, rgba(182,140,42,0) 62%),
    repeating-radial-gradient(circle at 62% 38%, transparent 0, transparent 78px, rgba(182,140,42,0.10) 79px, rgba(182,140,42,0.10) 80px);
  border-radius: 50%; pointer-events: none; z-index: 0;
}
/* Un second halo, plus doux et plus large, en bas à gauche : donne à la
   scène une lumière ambiante à deux sources, comme un vrai plateau photo,
   au lieu d'un simple spot unique. */
.projects-collage::after {
  content: ""; position: absolute; bottom: -12%; left: -8%; width: 50%; height: 50%;
  background: radial-gradient(circle, rgba(0,166,81,0.08) 0%, transparent 70%);
  border-radius: 50%; pointer-events: none; z-index: 0;
}

.collage-device {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: 1;
  transform-style: preserve-3d;
  will-change: transform, opacity;
  opacity: 0; transform: translateY(28px) rotateX(var(--rx, 6deg)) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 0deg)) scale(0.94);
  transition: transform 0.8s cubic-bezier(.16,.8,.3,1), opacity 0.8s ease, filter 0.5s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.collage-device.is-visible {
  opacity: 1; transform: rotateX(var(--rx, 6deg)) rotateY(var(--ry, -14deg)) rotateZ(var(--rz, 0deg));
  /* Une fois l'apparition jouée, on repasse sur une transition courte et
     sans délai : le survol et le défilement automatique restent instantanés
     plutôt que d'hériter du délai d'entrée en cascade. */
  transition: transform 0.7s cubic-bezier(.2,.8,.3,1), filter 0.5s ease, opacity 0.8s ease;
  transition-delay: 0s;
}
.collage-device.is-visible:hover {
  transform: rotateX(calc(var(--rx, 6deg) * 0.35)) rotateY(calc(var(--ry, -14deg) * 0.35)) rotateZ(var(--rz, 0deg)) translateY(-8px) scale(1.02);
  z-index: 7;
}

/* ----- Défilement automatique "premier plan" -----
   Dans la scène "Projets en cours", chaque écran passe à tour de rôle au
   premier plan (redressé, agrandi, ombre plus marquée) pendant que les
   autres reculent légèrement — comme un présentoir qui met en avant un
   projet après l'autre. Classes posées/retirées en JS (voir main.js) ;
   respecte prefers-reduced-motion (le cycle n'est simplement pas démarré). */
.collage-device.is-visible.is-featured {
  transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) scale(1.12);
  z-index: 6;
}
.collage-device.is-visible.is-featured .collage-screen {
  box-shadow:
    0 44px 90px -14px rgba(0,0,0,0.75),
    0 16px 34px rgba(0,0,0,0.5),
    inset 0 1px 0 rgba(255,255,255,0.12),
    0 0 0 1px rgba(182,140,42,0.35);
}
.projects-collage.is-cycling .collage-device.is-visible:not(.is-featured) {
  filter: brightness(0.8) saturate(0.88);
}
/* Variation d'angle par type d'appareil pour un effet "scène" naturel :
   l'écran d'ordinateur reste plus droit, les appareils périphériques
   s'inclinent davantage, comme disposés autour de lui. */
.collage-device.is-monitor { --rx: 4deg; --ry: -8deg; }
.collage-device.is-laptop { --rx: 6deg; --ry: -16deg; }
.collage-device.is-tablet { --rx: 4deg; --ry: 12deg; }
.collage-device.is-phone { --rx: 3deg; --ry: 10deg; }

/* Ombre de contact au sol : ancre chaque appareil sur la "scène" et renforce
   la sensation de profondeur/premium plutôt qu'un simple montage plat. */
.collage-shadow {
  position: absolute; left: 8%; right: 8%; bottom: -10%; height: 22%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0) 72%);
  filter: blur(4px); z-index: 0; pointer-events: none;
}

.collage-screen {
  position: relative; overflow: hidden; background: var(--screen-bg, #f4f2ec);
  box-shadow:
    0 34px 70px -12px rgba(0,0,0,0.68),
    0 12px 28px rgba(0,0,0,0.42),
    inset 0 1px 0 rgba(255,255,255,0.10);
  display: flex; align-items: center; justify-content: center;
}
/* object-fit: contain (jamais "cover") : chaque capture réelle doit rester
   entière et lisible, quitte à laisser une fine marge de la couleur de fond
   du vrai site plutôt que de rogner un titre ou un bouton. */
.collage-screen img { width: 100%; height: 100%; object-fit: contain; display: block; position: relative; z-index: 1; }
/* Galerie auto-rotative (Hero) : plusieurs réalisations réelles empilées
   dans le même écran, un fondu doux entre elles (voir js/hero-gallery.js).
   Portée volontairement limitée à ".has-gallery" pour ne rien changer aux
   écrans à une seule image ailleurs sur le site. */
.collage-screen.has-gallery img {
  position: absolute; inset: 0; opacity: 0; z-index: 1;
  transition: opacity 1.1s ease;
}
.collage-screen.has-gallery img.is-active { opacity: 1; z-index: 2; }
/* Reflet "vitre" en diagonale — discret, purement esthétique, jamais assez
   opaque pour gêner la lecture de la capture réelle en dessous. */
.collage-screen::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(125deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 78%, rgba(255,255,255,0.05) 100%);
}

.collage-device.is-monitor .collage-screen { aspect-ratio: var(--ar, 4/3.15); border-radius: 8px; border: 6px solid #1e2227; box-shadow: 0 34px 70px -12px rgba(0,0,0,0.68), 0 12px 28px rgba(0,0,0,0.42), inset 0 1px 0 rgba(255,255,255,0.1), 0 0 0 1px rgba(255,255,255,0.05); }
.collage-device.is-monitor::after {
  content: ""; display: block; width: 22%; height: 6%; margin: 0 auto;
  background: linear-gradient(180deg, #2a2f35, #14171a); border-radius: 0 0 4px 4px;
}
.collage-device.is-laptop .collage-screen { aspect-ratio: var(--ar, 16/10); border-radius: 8px 8px 2px 2px; border: 5px solid #1e2227; border-bottom-width: 0; }
.collage-device.is-laptop::after {
  content: ""; display: block; height: 6%; margin: 0 -7%;
  background: linear-gradient(180deg, #2c3137, #101316); border-radius: 0 0 7px 7px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08);
}
.collage-device.is-tablet .collage-screen { aspect-ratio: var(--ar, 16/10); border-radius: 14px; border: 8px solid #1e2227; }
.collage-device.is-phone .collage-screen { aspect-ratio: var(--ar, 9/19); border-radius: 22px; border: 7px solid #1e2227; }
/* Encoche caméra du téléphone, pour une silhouette plus reconnaissable et
   plus soignée qu'un simple rectangle arrondi. */
.collage-device.is-phone {
  --notch-w: 26%;
}
.collage-device.is-phone .collage-screen::after {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: var(--notch-w); height: 3.5%; background: #1e2227; border-radius: 0 0 8px 8px; z-index: 3;
}

/* Écrans à contenu sombre (ex. Le Messager) : fond de la "letterbox" assorti
   plutôt que blanc, pour rester invisible autour de la capture. */
.collage-device.is-dark { --screen-bg: #0c0d0f; }

.collage-label {
  position: absolute; left: var(--lx); top: var(--ly); transform: translate(-50%, 0); z-index: 4;
  background: rgba(13,16,19,0.92); border: 1px solid var(--color-gold); color: var(--color-gold-bright);
  border-radius: 999px; padding: 0.42rem 1.1rem; font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  box-shadow: 0 8px 20px rgba(0,0,0,0.35);
}
.collage-label--below { transform: translate(-50%, 0.4rem); }
.collage-label--right { transform: translate(-0.5rem, -50%); }

/* ----- Accent "Réalisé" : petite photo tirée d'un vrai événement, posée
   comme une photo imprimée dans la scène — rappelle que Créaprod-JISTA ne
   fait pas que des projets en cours, mais livre aussi du concret. ----- */
.collage-realised {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); z-index: 2;
  transform: rotateZ(var(--rz, -7deg));
  opacity: 0; transition: opacity 0.8s ease 0.9s, transform 0.8s cubic-bezier(.16,.8,.3,1) 0.9s;
}
.collage-realised.is-visible { opacity: 1; }
.collage-realised-frame {
  position: relative; aspect-ratio: var(--ar, 2/1); overflow: hidden;
  border-radius: 6px; border: 6px solid #f7f3e9; background: #0c0d0f;
  box-shadow: 0 24px 48px -10px rgba(0,0,0,0.6), 0 6px 16px rgba(0,0,0,0.4);
}
.collage-realised-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.collage-realised-tag {
  position: absolute; top: -0.6rem; right: -0.6rem; z-index: 2;
  background: var(--color-green); color: #fff; font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; border-radius: 999px;
  padding: 0.32rem 0.75rem; box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}
.collage-realised-caption {
  margin-top: 0.5rem; font-size: 0.68rem; color: var(--color-white-soft);
  font-style: italic; text-align: center;
}

/* La liste des points forts est le 3e enfant de ".projects-layout" (grille
   2 colonnes : intro étroite / collage large). Sans grid-column explicite,
   elle héritait du placement automatique et retombait uniquement dans la
   colonne étroite de gauche — laissant toute la largeur de la colonne du
   collage vide en dessous. "grid-column: 1 / -1" lui fait occuper toute la
   largeur de la section : sur grand écran, les 5 badges tiennent alors sur
   une seule ligne centrée au lieu de s'empiler dans une colonne étroite
   avec un grand vide à droite. Une fine bordure dorée en haut habille la
   transition (au lieu d'un simple espace noir) sans ajouter de contenu. */
.projects-values {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm);
  grid-column: 1 / -1;
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid rgba(182,140,42,0.18);
}
.projects-values a {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1px solid rgba(182,140,42,0.35); border-radius: 999px;
  padding: 0.6rem 1.3rem; font-size: 0.88rem; color: var(--color-white-soft);
  transition: border-color var(--transition-fast), color var(--transition-fast),
    background var(--transition-fast), transform var(--transition-fast);
}
.projects-values a:hover,
.projects-values a:focus-visible {
  border-color: rgba(212,175,82,0.75); color: var(--color-white);
  background: rgba(182,140,42,0.1); transform: translateY(-2px);
}
/* Transition compacte vers "Notre approche" : la section "Projets en cours"
   et la section suivante utilisent chacune le padding vertical générique
   ".section" (8rem / 128px, pensé pour aérer des sections pleines). Entre
   ces deux sections précises, cumulé au border-top/margin-top ci-dessus,
   cela créait la grande zone noire signalée. On resserre ici uniquement ce
   raccord (padding-bottom de la 1re, padding-top de la 2e), sans toucher au
   rythme vertical des autres sections du site. */
#realisations.section { padding-bottom: var(--space-lg); }
.why-section.section { padding-top: var(--space-lg); }
/* Repli du panneau "Notre méthode" (07/09) : le raccord avec la section
   suivante peut être resserré d'autant, le panneau détaillé n'ajoutant plus
   de hauteur par défaut. */
.method-section.section { padding-bottom: var(--space-lg); }
.pricing-teaser-section.section { padding-top: var(--space-lg); }

/* Petite invite sous le titre de "Notre méthode" (07/09) : signale que le
   détail de chaque étape s'ouvre au clic, maintenant qu'il n'est plus visible
   par défaut. Une seule ligne, sans incidence sur la hauteur de la section. */
.method-hint {
  font-size: 0.85rem; color: var(--color-white-soft); font-style: italic;
  margin: -0.3rem 0 var(--space-md);
}

/* ----- Section "Pourquoi Créaprod-JISTA" ----- */
.why-title {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -0.005em; margin-bottom: var(--space-lg);
}
.why-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-md); align-items: start;
}
.why-card {
  border-top: 2px solid var(--color-gold); border-radius: 0 0 var(--radius) var(--radius);
  background: transparent; transition: background var(--transition-fast);
}
.why-card.is-open { background: rgba(255,255,255,0.02); }

/* Déclencheur : garde exactement le même contenu visible (titre + phrase)
   qu'avant, juste rendu cliquable — rien ne change tant que la fiche est fermée. */
.why-trigger {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: var(--space-sm) 0 var(--space-xs); margin: 0; cursor: pointer; position: relative;
  font: inherit; color: inherit;
}
.why-trigger h3 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.4rem; padding-right: 2rem; }
.why-trigger p { color: var(--color-white-soft); font-size: 0.92rem; margin: 0; padding-right: 2rem; }
.why-trigger-icon {
  position: absolute; top: var(--space-sm); right: 0; width: 22px; height: 22px;
  border: 1px solid rgba(182,140,42,0.5); border-radius: 50%; flex-shrink: 0;
}
.why-trigger-icon::before, .why-trigger-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--color-gold-bright);
  transform: translate(-50%, -50%); transition: transform var(--transition-fast);
}
.why-trigger-icon::before { width: 10px; height: 1.5px; }
.why-trigger-icon::after { width: 1.5px; height: 10px; }
.why-card.is-open .why-trigger-icon::after { transform: translate(-50%, -50%) rotate(90deg) scaleY(0); }
.why-trigger:hover h3, .why-trigger:focus-visible h3 { color: var(--color-gold-bright); }
.why-trigger:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 4px; border-radius: 4px; }
.why-card.is-open .why-trigger-icon { border-color: var(--color-gold-bright); }

/* Panneau : hauteur pilotée en JS (scrollHeight) pour une ouverture fluide
   quel que soit le contenu ; masqué aux lecteurs d'écran et au clavier tant
   que la fiche est fermée (via l'attribut "inert"). */
.why-panel {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--transition-slow), opacity var(--transition-fast);
}
.why-card.is-open .why-panel { opacity: 1; }
.why-panel-inner { padding: var(--space-xs) 0 var(--space-md); }
.why-panel-intro {
  font-family: var(--font-accent); font-style: italic; color: var(--color-white);
  font-size: 1rem; margin: 0 0 var(--space-sm); line-height: 1.5;
}
.why-fiche { display: flex; flex-direction: column; gap: var(--space-sm); margin-bottom: var(--space-sm); }
.why-fiche-label {
  color: var(--color-gold-bright); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 0.25rem;
}
.why-fiche-text { color: var(--color-white-soft); font-size: 0.88rem; line-height: 1.55; margin: 0; }

/* Galerie de visuels réels : grille discrète, images inchangées (recadrage
   CSS uniquement via object-fit), agrandissables au clic. */
.why-gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.5rem;
}
.why-gallery-item {
  position: relative; display: block; padding: 0; border: 1px solid rgba(182,140,42,0.25);
  border-radius: 6px; overflow: hidden; cursor: zoom-in; background: var(--color-bg-elevated);
  aspect-ratio: 4 / 3; transition: border-color var(--transition-fast), transform var(--transition-fast);
}
.why-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.why-gallery-item:hover, .why-gallery-item:focus-visible {
  border-color: var(--color-gold-bright); transform: translateY(-2px);
}
.why-gallery-item:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 2px; }

/* Visionneuse plein écran commune à toutes les fiches */
.lightbox {
  position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center;
  padding: var(--space-md); background: rgba(8,10,12,0.92); opacity: 0; visibility: hidden;
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox-figure { max-width: min(92vw, 1100px); max-height: 88vh; margin: 0; text-align: center; }
.lightbox-img { max-width: 100%; max-height: 80vh; border-radius: 4px; box-shadow: 0 30px 80px -20px rgba(0,0,0,0.6); }
.lightbox-caption { color: var(--color-white-soft); font-size: 0.85rem; margin-top: var(--space-xs); }
.lightbox-close {
  position: absolute; top: var(--space-sm); right: var(--space-sm); width: 44px; height: 44px;
  border-radius: 50%; border: 1px solid rgba(182,140,42,0.4); background: rgba(255,255,255,0.04);
  color: var(--color-white); font-size: 1.6rem; line-height: 1; cursor: pointer;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.lightbox-close:hover, .lightbox-close:focus-visible { border-color: var(--color-gold-bright); color: var(--color-gold-bright); }

/* ----- Section "Méthode de travail" ----- */
.method-title {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -0.005em; margin-bottom: var(--space-lg);
}
.method-timeline {
  display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-sm);
  counter-reset: none; padding: 0; margin: 0; list-style: none;
  position: relative;
}
.method-timeline::before {
  content: ""; position: absolute; top: 1.1rem; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(182,140,42,0.4) 10%, rgba(182,140,42,0.4) 90%, transparent);
}
/* Portion de ligne accentuée jusqu'à l'étape active, largeur pilotée en JS
   (mesure réelle de la position du cercle actif, indépendante de la grille). */
.method-progress-fill {
  position: absolute; top: 1.1rem; left: 0; height: 1px; width: 0;
  background: linear-gradient(90deg, var(--color-gold), var(--color-gold-bright));
  transition: width 0.4s var(--ease); pointer-events: none;
}
.method-timeline li { position: relative; }

/* Déclencheur : reprend exactement la mise en page précédente (numéro
   au-dessus, titre, description) — seul l'élément racine devient un bouton. */
.method-step {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: var(--space-lg) 0 0; margin: 0; cursor: pointer; font: inherit; color: inherit;
}
.method-step:focus-visible { outline: 2px solid var(--color-gold-bright); outline-offset: 4px; border-radius: 4px; }
.method-step-number {
  position: absolute; top: 0; left: 0;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--color-bg-elevated-2); border: 1.5px solid var(--color-gold);
  color: var(--color-gold-bright); font-family: var(--font-title); font-weight: 600; font-size: 0.9rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}
.method-timeline h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 0.3rem; transition: color var(--transition-fast); }
.method-timeline p { font-size: 0.85rem; color: var(--color-white-soft); margin: 0; }

.method-step:hover .method-step-number,
.method-step:focus-visible .method-step-number { border-color: var(--color-gold-bright); }
.method-step:hover h3, .method-step:focus-visible h3 { color: var(--color-gold-bright); }

/* Étape active : cercle plus lumineux, titre doré, sans changer ni la
   police ni la hiérarchie générale. */
.method-step.is-active .method-step-number {
  background: var(--color-gold); border-color: var(--color-gold-bright); color: var(--color-bg-deep);
  box-shadow: 0 0 0 4px rgba(212,175,82,0.18), 0 0 18px rgba(212,175,82,0.35);
}
.method-step.is-active h3 { color: var(--color-gold-bright); }

/* ----- Zone de présentation unique (storytelling par étape) -----
   Repliée par défaut (07/09, optimisation homepage) : le détail de l'étape
   sélectionnée ne doit plus rester visible sans action du visiteur — même
   mécanisme que les fiches accordéon "Pourquoi Créaprod-JISTA" (hauteur
   pilotée en JS via scrollHeight, masqué aux lecteurs d'écran et au clavier
   tant que fermé via "inert"). Le padding-top (au lieu d'un margin-top sur
   l'élément replié) évite tout espace fantôme quand max-height revient à 0. */
.method-panel {
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height var(--transition-slow), opacity var(--transition-fast);
}
.method-panel.is-open { opacity: 1; }
.method-panel-inner {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-lg); align-items: center;
  opacity: 1; transition: opacity 0.2s var(--ease);
  padding-top: var(--space-xl);
}
.method-panel-inner.is-fading { opacity: 0; }
/* Rythme alterné : étapes paires = visuel à gauche, texte à droite. */
.method-panel-inner.is-reversed .method-panel-text { order: 2; }
.method-panel-inner.is-reversed .method-panel-visual { order: 1; }

.method-panel-eyebrow {
  display: block; color: var(--color-gold-bright); font-family: var(--font-accent); font-style: italic;
  font-size: 1rem; margin-bottom: var(--space-sm);
}
.method-panel-desc { color: var(--color-white-soft); font-size: 1.05rem; line-height: 1.7; margin: 0; max-width: 46ch; }
.method-panel-inner.is-reversed .method-panel-desc { margin-left: auto; }

.method-panel-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-xs); }
.method-panel-gallery.has-single { grid-template-columns: 1fr; }
.method-panel-gallery img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: var(--radius); border: 1px solid rgba(182,140,42,0.25);
  box-shadow: 0 20px 40px -20px rgba(0,0,0,0.5);
}
.method-panel-gallery.has-single img { aspect-ratio: 16 / 10; }

/* ----- Section "Tarifs" (synthèse accueil) ----- */
.pricing-teaser-title {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem); letter-spacing: -0.005em;
}
/* auto-fit plutôt qu'un nombre de colonnes fixe : s'adapte aussi bien aux
   4 cartes de l'accueil qu'aux 5 de tarifs.html, sans jamais laisser une
   carte seule avec des colonnes vides à côté (bug corrigé le 27/08 : la
   grille était figée à 4 colonnes alors que tarifs.html affiche 5 formules). */
.pricing-teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--space-md); }
.pricing-teaser-card {
  background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: var(--space-md); text-align: center;
}
.pricing-teaser-card--featured { border-color: var(--color-gold); background: var(--color-bg-elevated-2); }
.pricing-teaser-name { font-family: var(--font-title); font-size: 1.1rem; margin: 0; }
.pricing-teaser-price { font-size: 1.5rem; font-weight: 700; color: var(--color-gold-bright); margin: 0.4rem 0; }
.pricing-teaser-price span { font-size: 0.85rem; font-weight: 400; color: var(--color-white-soft); }
.pricing-teaser-desc { font-size: 0.85rem; color: var(--color-white-soft); margin: 0; }
.center-cta { text-align: center; margin-top: var(--space-lg); }

/* ----- Section "Estimateur" ----- */
.estimator-section { background: var(--color-bg-elevated); }
.estimator-inner { max-width: 620px; text-align: center; }
.estimator-inner .lead { margin-left: auto; margin-right: auto; margin-bottom: var(--space-md); }
.estimator-title {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
}

/* ----- CTA final ----- */
.final-cta-section { background: var(--color-bg-deep); text-align: center; }
.final-cta-inner { max-width: 700px; }
.final-cta-title {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.2; margin-bottom: var(--space-lg);
}
.btn-lg { padding: 1.1rem 2.6rem; font-size: 0.95rem; }

/* ----- Pied de page ----- */
.site-footer { background: var(--color-bg-deep); padding: var(--space-lg) 0 var(--space-md); border-top: 1px solid rgba(255,255,255,0.06); }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-lg); }
.footer-name { font-family: var(--font-title); font-size: 1.2rem; margin: 0 0 0.2rem; }
.footer-tagline { font-size: 0.85rem; color: var(--color-white-soft); margin: 0; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-md); }
.footer-nav a { font-size: 0.88rem; color: var(--color-white-soft); }
.footer-nav a:hover { color: var(--color-gold-bright); }
.footer-bottom { width: 100%; margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-sm); font-size: 0.8rem; color: var(--color-white-soft); }
.footer-legal a { color: var(--color-white-soft); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal a:hover { color: var(--color-gold-bright); }

/* ==========================================================================
   Composants réutilisables — pages intérieures
   (sites-internet, identité visuelle, communication, réalisations, tarifs,
   agence, contact, blog, mentions légales, confidentialité)
   ========================================================================== */

/* ----- Bannière de page ----- */
.page-banner {
  position: relative; padding-top: calc(var(--header-height) + var(--space-lg));
  padding-bottom: var(--space-lg); overflow: hidden;
  background:
    radial-gradient(circle at 85% 0%, rgba(182,140,42,0.16) 0%, transparent 48%),
    radial-gradient(circle at 8% 100%, rgba(0,166,81,0.07) 0%, transparent 40%),
    linear-gradient(180deg, var(--color-bg-deep) 0%, var(--color-bg) 70%);
  border-bottom: 1px solid rgba(182,140,42,0.14);
}
.page-banner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 70% 90% at 85% 0%, #000 0%, transparent 70%);
}
.page-banner .container { position: relative; z-index: 1; }
.breadcrumb { font-size: 0.82rem; color: var(--color-white-soft); margin-bottom: var(--space-sm); }
.breadcrumb a { color: var(--color-white-soft); text-decoration: underline; text-underline-offset: 2px; }
.breadcrumb a:hover { color: var(--color-gold-bright); }
.page-banner h1 {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.08; letter-spacing: -0.015em; max-width: 18ch;
}
.page-banner .lead { max-width: 60ch; }

/* ----- Grille de services (cartes sombres génériques) ----- */
.service-grid-dark { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-top: var(--space-lg); }
.service-card-dark {
  position: relative; background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px; padding: var(--space-md); overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.service-card-dark::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; transform: scaleX(0);
  transform-origin: left; transition: transform 0.4s ease;
  background: linear-gradient(90deg, var(--color-gold), var(--color-green));
}
.service-card-dark:hover {
  transform: translateY(-6px); border-color: rgba(182,140,42,0.35);
  box-shadow: 0 24px 48px -16px rgba(0,0,0,0.55);
}
.service-card-dark:hover::before { transform: scaleX(1); }
.service-card-dark .service-icon-dark {
  width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: var(--space-sm);
  border-radius: 50%; background: var(--color-bg-elevated-2); border: 1px solid rgba(182,140,42,0.3);
}
.service-card-dark h3 { font-size: 1.05rem; margin-bottom: 0.3rem; }
.service-card-dark p { font-size: 0.9rem; color: var(--color-white-soft); margin: 0; }

/* ----- Liste à coche générique ----- */
.checklist { display: flex; flex-direction: column; gap: 0.7rem; margin: var(--space-md) 0; padding: 0; max-width: 70ch; }
.checklist li { position: relative; padding-left: 2rem; color: var(--color-white-soft); }
.checklist li::before {
  content: "✓"; position: absolute; left: 0; top: -0.05rem;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: rgba(0,166,81,0.14); border: 1px solid rgba(0,166,81,0.4);
  color: var(--color-green); font-weight: 700; font-size: 0.72rem;
  display: flex; align-items: center; justify-content: center;
}

/* ----- Liste de processus numérotée ----- */
.process-list-v2 { counter-reset: process-v2; display: flex; flex-direction: column; gap: var(--space-md); margin: var(--space-lg) 0; padding: 0; max-width: 70ch; position: relative; }
.process-list-v2::before {
  content: ""; position: absolute; left: 1rem; top: 1rem; bottom: 1rem; width: 1px;
  background: linear-gradient(180deg, var(--color-gold), transparent);
}
.process-list-v2 li { position: relative; padding-left: 3rem; list-style: none; counter-increment: process-v2; }
.process-list-v2 li::before {
  content: counter(process-v2); position: absolute; left: 0; top: 0;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--color-bg-elevated-2); border: 1.5px solid var(--color-gold);
  color: var(--color-gold-bright); font-family: var(--font-title); font-weight: 600; font-size: 0.9rem;
  display: flex; align-items: center; justify-content: center; z-index: 1;
}
.process-list-v2 strong { display: block; color: var(--color-white); margin-bottom: 0.2rem; }
.process-list-v2 span { color: var(--color-white-soft); font-size: 0.92rem; }

/* ----- Mini grille tarifaire (rappel rapide, pages prestations) ----- */
.mini-pricing-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-sm); }
.mini-pricing-item {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 2px; min-width: 140px;
  padding: 0.8rem 1.2rem; border: 1.5px solid rgba(255,255,255,0.1); border-radius: 10px;
  background: var(--color-bg-elevated); transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.mini-pricing-item:hover {
  border-color: var(--color-gold); transform: translateY(-3px);
  box-shadow: 0 16px 32px -14px rgba(0,0,0,0.5);
}
.mini-pricing-item strong { font-family: var(--font-title); color: var(--color-white); }
.mini-pricing-item span { font-size: 0.85rem; color: var(--color-white-soft); }

/* ----- Formulaire de contact ----- */
.contact-form { position: relative; overflow: hidden; background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: var(--space-md); max-width: 640px; }
.contact-form::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-green));
}
.form-row { margin-bottom: var(--space-sm); display: flex; flex-direction: column; gap: 0.4rem; }
.form-row label { font-size: 0.85rem; font-weight: 600; color: var(--color-white-soft); }
.form-row input, .form-row textarea, .form-row select {
  font-family: var(--font-body); font-size: 1rem; color: var(--color-white);
  padding: 0.7rem 0.9rem; border-radius: 8px; border: 1px solid rgba(255,255,255,0.14);
  background: var(--color-bg); width: 100%; box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.form-row select option { background: var(--color-bg-elevated); color: var(--color-white); }
.form-row input:focus, .form-row textarea:focus, .form-row select:focus {
  outline: none; border-color: var(--color-green);
  box-shadow: 0 0 0 3px rgba(0,166,81,0.18);
}
.hidden-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.85rem; color: var(--color-white-soft); margin-bottom: var(--space-sm); }
.form-consent input { margin-top: 3px; }
.form-status { margin: var(--space-sm) 0 0; font-size: 0.9rem; min-height: 1.2em; }
.form-status-success { color: var(--color-green); font-weight: 600; }
.form-status-error { color: var(--color-red); font-weight: 600; }

/* ----- Contenu légal (mentions, confidentialité) ----- */
.legal-content { max-width: 760px; }
.legal-content h2 { font-size: clamp(1.2rem, 2.4vw, 1.5rem); margin-top: var(--space-lg); }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content p { color: var(--color-white-soft); }
.legal-content a { color: var(--color-gold-bright); font-weight: 600; }

/* ==========================================================================
   Mise en page éditoriale des articles (blog) — 16/09/2026
   Colonne dédiée aux articles (distincte de .legal-content, qui reste
   utilisée par les mentions légales / CGV / confidentialité, pour ne pas en
   modifier le comportement). Reprend uniquement les variables, couleurs et
   motifs déjà en place sur le site (dégradé or→vert des cartes, cadre doré
   discret, pastille .tag-pill déjà existante) : aucune nouvelle couleur,
   aucune nouvelle police.
   ========================================================================== */

/* Colonne de lecture : un peu plus étroite que .legal-content pour une
   mesure de ligne confortable (article long), avec plus d'air vertical
   entre les paragraphes qu'un simple bloc de texte continu. */
.article-content { max-width: 700px; }
.article-content p { color: var(--color-white-soft); line-height: 1.75; margin-bottom: 1.3rem; }
.article-content a { color: var(--color-gold-bright); font-weight: 600; }

/* Intertitres renforcés : plus d'espace avant/après + courte réglette
   dorée->verte (même dégradé que .blog-card::before, .quiz-wizard::before,
   .service-card-dark::before) pour repérer rapidement chaque section en
   parcourant l'article. */
.article-content h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  margin-top: var(--space-xl); margin-bottom: var(--space-md);
}
.article-content h2:first-of-type { margin-top: 0; }
.article-content h2::before {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
  margin-bottom: 1rem;
  background: linear-gradient(90deg, var(--color-gold), var(--color-green));
}

/* Citation mise en avant (ex. "En réalité, le site internet n'a pas
   disparu...") : bordure dorée à gauche, typographie de titre en italique,
   sur fond légèrement élevé — cohérent avec .consent-box / .quiz-wizard. */
.article-pullquote {
  margin: var(--space-lg) 0; padding: var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-gold);
  background: var(--color-bg-elevated); border-radius: 0 var(--radius) var(--radius) 0;
}
.article-pullquote p {
  margin: 0; font-family: var(--font-title); font-style: italic; font-weight: 500;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.4; color: var(--color-white);
}

/* Liste souple en "puces" pour les passages énumératifs courts (ex. "Vous
   choisissez votre univers. Votre présentation...") : même langage visuel
   que les options de l'estimateur (.quiz-options label), réutilisé en
   lecture pure (non interactif). */
.article-chip-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--space-md) 0 var(--space-lg); padding: 0; list-style: none; }
.article-chip-grid li {
  display: inline-flex; align-items: center;
  padding: 0.55rem 1.15rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12); background: var(--color-bg-elevated-2);
  color: var(--color-white-soft); font-size: 0.92rem;
}

/* Bloc éditorial identifiable pour une série de questions courtes (ex. les
   5 questions "Qui êtes-vous ?..."). Numérotation automatique en pastilles
   (CSS counters), sur le même fond élevé que les autres blocs de la page. */
.article-questions {
  counter-reset: article-q; margin: var(--space-lg) 0; padding: var(--space-md);
  background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px;
}
.article-questions ul { display: flex; flex-direction: column; gap: 0.9rem; margin: var(--space-sm) 0 0; padding: 0; list-style: none; }
.article-questions li { counter-increment: article-q; display: flex; align-items: baseline; gap: 0.9rem; }
.article-questions li::before {
  content: counter(article-q); flex-shrink: 0; width: 1.6rem; height: 1.6rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-title); font-weight: 600; font-size: 0.85rem;
  color: var(--color-green); border: 1px solid rgba(0,166,81,0.4); background: rgba(0,166,81,0.1);
}
.article-questions li p { margin: 0; font-family: var(--font-title); font-size: 1.05rem; color: var(--color-white); }

/* Trio éditorial sobre (ex. "Plus de simplicité. Plus de transparence...") :
   3 cases légères en ligne sur grand écran, empilées sur mobile — pas des
   cartes commerciales, juste un repère visuel de rythme. */
.article-trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-sm); margin: var(--space-lg) 0; }
.article-trio-item {
  position: relative; padding: var(--space-md) var(--space-sm); text-align: center;
  background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px;
}
.article-trio-item::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 3px; border-radius: 2px; background: var(--color-gold);
}
.article-trio-item p { margin: 0; font-family: var(--font-title); font-size: 1.05rem; color: var(--color-white); }

/* Moment de respiration façon "manifeste" (ex. "Pas de technologie pour la
   technologie...") : cadre doré discret + léger halo, comme .blog-empty,
   mais en bordure pleine pour s'en distinguer visuellement. */
.article-manifesto {
  margin: var(--space-lg) 0; padding: var(--space-lg) var(--space-md); text-align: center;
  border: 1px solid rgba(182,140,42,0.35); border-radius: 14px;
  background: radial-gradient(circle at 50% 0%, rgba(182,140,42,0.07) 0%, transparent 60%);
}
.article-manifesto p { margin: 0 0 0.5rem; font-family: var(--font-title); font-style: italic; font-size: 1.15rem; color: var(--color-white-soft); }
.article-manifesto p:last-child { margin-bottom: 0; }

/* Conclusion forte avant le CTA contact : même recette typographique que
   .final-cta-title (majuscules, gras 800) mais en plus sobre, sans nouvelle
   couleur — la 2e ligne reprend l'or déjà utilisé pour les accents.
   Renforcé le 16/09/2026 (finition éditoriale) : davantage d'espace avant
   pour une séparation nette avec le texte qui précède, courte réglette
   (même dégradé que les H2) pour marquer que c'est un moment à part — une
   vraie signature éditoriale plutôt qu'une simple dernière phrase. */
.article-conclusion { margin: var(--space-xl) 0 var(--space-sm); text-align: center; }
.article-conclusion::before {
  content: ""; display: block; width: 56px; height: 3px; border-radius: 2px;
  margin: 0 auto var(--space-md);
  background: linear-gradient(90deg, var(--color-gold), var(--color-green));
}
.article-conclusion p {
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
  font-size: clamp(1.6rem, 3.4vw, 2.3rem); line-height: 1.3; color: var(--color-white); margin: 0;
  letter-spacing: 0.01em;
}
.article-conclusion p:last-child { color: var(--color-gold-bright); margin-top: 0.4rem; }

/* ----- Page "Paiement" : grille à 2 blocs (Acompte / Facture), côte à côte
   sur ordinateur, empilés dès la tablette portrait pour rester confortables
   à lire (les cartes contiennent plus de texte que les icônes .expertise-*
   habituelles). Réutilise le même habillage de carte (.expertise-card) que
   le reste du site pour une cohérence visuelle totale. */
.payment-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
}
/* ----- Page "Paiement" : encart d'avertissement sous les 3 blocs de
   règlement (un paiement ne vaut pas commande sans validation préalable). */
.payment-notice {
  margin-top: var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid var(--color-gold);
  background: var(--color-bg-elevated);
  border-radius: 0 var(--radius) var(--radius) 0;
  max-width: 70ch;
}
.payment-notice p { margin: 0; color: var(--color-white-soft); font-size: 0.92rem; }
/* Mention discrète sous un bouton de paiement ("Paiement sécurisé par
   Stripe") : petite icône + texte, même esprit que les autres micro-mentions
   de réassurance du site (jamais plus visible que le bouton lui-même). */
.payment-secure-note {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.6rem; font-size: 0.78rem; color: var(--color-white-soft);
}
.payment-secure-note svg { flex-shrink: 0; color: var(--color-gold-bright); }
/* ----- Page "Paiement" : identification obligatoire avant redirection
   Stripe (nom/entreprise, référence devis ou facture, e-mail). Réutilise
   les styles .form-row du formulaire de contact dans un habillage plus
   compact. Le bouton reste désactivé (attribut natif "disabled", donc
   réellement inactif et annoncé comme tel aux lecteurs d'écran) tant que
   les 3 champs ne sont pas valides — voir js/payment-form.js. L'astérisque
   des champs obligatoires est la seule touche de rouge de cette page : un
   usage fonctionnel et universellement compris, qui ne se confond pas avec
   le rouge réservé ailleurs sur le site aux messages d'erreur. */
/* #acompte / #facture sont ciblés par les boutons du hero (index.html) :
   le header étant fixe, sans scroll-margin-top la carte visée atterrirait
   masquée sous le header au clic. */
#acompte, #facture { scroll-margin-top: calc(var(--header-height) + var(--space-md)); }
.payment-id-form .form-row { margin-bottom: 0.85rem; }
.payment-id-form .form-row:last-of-type { margin-bottom: 0.9rem; }
.form-help { margin: 0.3rem 0 0; font-size: 0.78rem; color: var(--color-white-soft); }
.form-required { color: var(--color-red); margin-left: 0.15rem; }
/* Bouton désactivé (formulaire non valide) : commun aux 2 fournisseurs. Le
   fond vert n'est réappliqué qu'au bouton Stripe (.btn-primary) pour ne pas
   écraser le style transparent/bordure dorée du bouton PayPal (.btn-outline,
   volontairement dépourvu des couleurs bleu/jaune officielles de PayPal). */
.payment-btn:disabled,
.payment-btn:disabled:hover,
.payment-btn:disabled:focus-visible {
  opacity: 0.4; cursor: not-allowed; transform: none;
}
.payment-btn.btn-primary:disabled,
.payment-btn.btn-primary:disabled:hover,
.payment-btn.btn-primary:disabled:focus-visible {
  background: var(--color-green);
}
/* ----- Page "Paiement" : choix du moyen de paiement (Stripe / PayPal). */
.payment-choice-label {
  margin: 1rem 0 0.5rem;
  font-family: var(--font-body); font-weight: 700; font-size: 0.78rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-white-soft);
}
/* Rappel PayPal : contrairement à l'e-mail Stripe (paramètre
   "prefilled_email"), paypal.com/ncp n'accepte aucun pré-remplissage par
   URL — le client doit donc indiquer lui-même sa référence de paiement. */
.payment-paypal-note {
  margin: 0 0 0.75rem; font-size: 0.78rem; color: var(--color-white-soft);
  font-style: italic;
}
/* Ligne des 2 boutons de paiement : Stripe (.btn-primary, principal) et
   PayPal (.btn-outline, secondaire) côte à côte tant que la largeur le
   permet, empilés en pleine largeur dès la tablette portrait — voir
   responsive.css — pour rester confortables au doigt sur mobile. */
.payment-btn-row {
  display: flex; flex-wrap: wrap; gap: 0.75rem;
}
.payment-btn-row .btn { flex: 1 1 190px; justify-content: center; }

/* ----- Blog (structure prête, sans article inventé) ----- */
.blog-empty {
  position: relative; overflow: hidden;
  border: 1px dashed rgba(182,140,42,0.3); border-radius: 14px;
  background: radial-gradient(circle at 50% 0%, rgba(182,140,42,0.06) 0%, transparent 60%);
  padding: var(--space-xl) var(--space-md); text-align: center; margin-top: var(--space-lg);
}
.blog-empty p { color: var(--color-white-soft); max-width: 50ch; margin: 0 auto var(--space-sm); }

/* ----- Carte article (blog.html) -----
   Ajouté le 16/09/2026 pour l'intégration du premier article du blog : aucun
   système de carte n'existait encore pour les articles (seul .blog-empty, le
   message d'attente ci-dessus). Reprend le langage visuel déjà en place pour
   les cartes du site (bordure fine, fond légèrement élevé, léger "lift" au
   survol — comme .realisation-card et .service-card-dark) plutôt que
   d'inventer une nouvelle esthétique. Carte texte uniquement : aucune image
   de couverture n'existe à ce jour pour cet article, donc aucune n'est
   fabriquée ni ajoutée. */
.blog-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); }
.blog-card {
  position: relative; background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: var(--space-md); overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.blog-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-green));
}
.blog-card:hover { transform: translateY(-6px); border-color: rgba(182,140,42,0.3); box-shadow: 0 28px 56px -18px rgba(0,0,0,0.6); }
.blog-card-category { font-size: 0.82rem; color: var(--color-gold); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.4rem; }
.blog-card h3 { font-size: 1.3rem; margin-bottom: 0.5rem; }
.blog-card-excerpt { color: var(--color-white-soft); font-size: 0.95rem; flex: 1; margin: 0 0 var(--space-sm); }
.blog-card-meta { font-size: 0.8rem; color: var(--color-white-soft); margin-bottom: var(--space-sm); }
.blog-card .btn { align-self: flex-start; }

/* ----- Repères d'article (page article elle-même : site-internet-obsolete-2026.html) -----
   Pastille de catégorie + mention "À venir" du prochain article : même
   langage visuel que .realisation-status (pastille dorée, majuscules,
   pilule) mais réutilisable en flux normal (sans position absolue), donc
   pas de modification de .realisation-status existant. */
.tag-pill {
  display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--color-gold-bright); border: 1px solid var(--color-gold);
  background: rgba(13,16,19,0.85); border-radius: 999px; padding: 0.3rem 0.85rem;
  margin-bottom: var(--space-sm);
}
.article-meta { font-size: 0.85rem; color: var(--color-white-soft); display: flex; flex-wrap: wrap; gap: 0.5rem; }
.article-meta span:not(:last-child)::after { content: "·"; margin-left: 0.5rem; color: rgba(255,255,255,0.3); }
.next-article-title { font-family: var(--font-title); font-size: 1.15rem; color: var(--color-white); margin: var(--space-xs) 0 0; }

/* ----- Parcours éditorial du blog (16/09/2026) -----
   Page d'entrée blog.html + bloc "vous voulez continuer par quoi ?" en fin
   d'article + fil de parcours discret. Réutilise .blog-grid/.blog-card tels
   quels (même grille responsive, même fond, même dégradé, même hover) et
   .tag-pill (pastille "À venir") : seuls les éléments propres au parcours
   sont ajoutés ici (flèche d'affordance, variante "à venir" qui ouvre une
   note sur place au lieu de naviguer, fil de parcours). Données et logique
   dans js/blog-journey.js — voir ce fichier pour ajouter un futur article. */
.journey-heading {
  text-align: center; font-family: var(--font-title); font-weight: 600;
  font-size: clamp(1.4rem, 2.8vw, 1.9rem); color: var(--color-white);
  margin: 0 0 var(--space-lg);
}
.journey-heading::before {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
  margin: 0 auto 1rem;
  background: linear-gradient(90deg, var(--color-gold), var(--color-green));
}
.journey-card { cursor: pointer; }
.journey-card-question {
  flex: 1; font-family: var(--font-title); font-size: 1.15rem; line-height: 1.35;
  color: var(--color-white); margin: 0 0 var(--space-sm);
}
.journey-card-arrow { margin-top: auto; color: var(--color-gold-bright); font-weight: 700; font-size: 1.1rem; }
.journey-card--soon { border-style: dashed; border-color: rgba(182,140,42,0.3); }
.journey-note {
  margin: var(--space-sm) 0 0; padding: 0.75rem 1rem;
  background: var(--color-bg-elevated-2); border-radius: var(--radius);
  color: var(--color-white-soft); font-size: 0.88rem; display: none;
}
.journey-note.is-open { display: block; }
.journey-return { align-items: center; text-align: center; }
.journey-return .journey-card-arrow { margin: 0.4rem auto 0; }
.journey-trail { font-size: 0.82rem; color: var(--color-white-soft); margin: 0.6rem 0 0; }
.journey-trail strong { color: var(--color-gold-bright); font-weight: 600; }

/* ----- Page Réalisations : grille de cartes projet ----- */
.realisations-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); margin-top: var(--space-lg); }
.realisation-card {
  background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; overflow: hidden;
  transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
}
.realisation-card:hover {
  transform: translateY(-6px); border-color: rgba(182,140,42,0.3);
  box-shadow: 0 28px 56px -18px rgba(0,0,0,0.6);
}
.realisation-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--color-bg-elevated-2); }
.realisation-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform 0.5s ease; }
.realisation-card:hover .realisation-media img { transform: scale(1.05); }
.realisation-status {
  position: absolute; top: 0.9rem; left: 0.9rem;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--color-gold-bright); border: 1px solid var(--color-gold); background: rgba(13,16,19,0.85);
  border-radius: 999px; padding: 0.3rem 0.85rem;
}
.realisation-status.is-done { color: var(--color-white); border-color: var(--color-green); }
.realisation-body { padding: var(--space-md); }
.realisation-body .realisation-category { font-size: 0.82rem; color: var(--color-gold); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.3rem; }
.realisation-body h3 { font-size: 1.25rem; margin-bottom: 0.4rem; }
.realisation-body p { color: var(--color-white-soft); font-size: 0.92rem; margin: 0 0 0.6rem; }
.realisation-body p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Estimateur de projet — questionnaire dynamique (estimateur.html)
   Repris du moteur du site original (configurateur.html), réadapté au thème
   sombre. 100% calculé côté client ; aucun prix n'est jamais présenté comme
   définitif, uniquement comme une estimation indicative.
   ========================================================================== */
.quiz-wizard {
  position: relative; overflow: hidden;
  background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: var(--space-md) var(--space-md) var(--space-sm);
  margin-top: var(--space-lg); max-width: 780px;
}
.quiz-wizard::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-green));
}
.quiz-progress {
  height: 6px; border-radius: 999px; background: var(--color-bg-elevated-2);
  overflow: hidden; margin-bottom: var(--space-sm);
}
.quiz-progress-bar {
  height: 100%; width: 10%; border-radius: 999px;
  background: linear-gradient(90deg, var(--color-gold), var(--color-green));
  transition: width 0.4s ease;
}
.quiz-step-counter {
  font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--color-white-soft); font-weight: 600; margin: 0 0 var(--space-md);
}
.quiz-steps { position: relative; min-height: 90px; }
.quiz-step { display: none; }
.quiz-step.is-active { display: block; animation: quiz-step-in 0.35s ease; }
@keyframes quiz-step-in {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}
.quiz-label { font-family: var(--font-title); font-weight: 500; font-size: 1.2rem; margin-bottom: var(--space-md); color: var(--color-white); }
.quiz-options { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.quiz-options label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.2rem; border: 1.5px solid rgba(255,255,255,0.12); border-radius: 999px;
  font-size: 0.95rem; cursor: pointer; background: var(--color-bg-elevated-2); color: var(--color-white-soft);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.quiz-options label:hover { transform: translateY(-2px); border-color: rgba(182,140,42,0.4); }
.quiz-options label:has(input:checked),
.quiz-options label.is-checked {
  border-color: var(--color-green); background: rgba(0,166,81,0.14); color: var(--color-white);
}
.quiz-options input[type="radio"], .quiz-options input[type="checkbox"] { accent-color: var(--color-green); }
.quiz-error { color: var(--color-red); font-size: 0.9rem; margin: var(--space-sm) 0 0; }
.quiz-nav[hidden] { display: none; }
.quiz-nav {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-sm); margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.quiz-result {
  margin-top: var(--space-md); padding-top: var(--space-md);
  border-top: 1px solid rgba(255,255,255,0.08); animation: quiz-step-in 0.4s ease;
}
.quiz-result h2 { color: var(--color-gold-bright); }
.tier-price { font-family: var(--font-title); font-size: 1.6rem; color: var(--color-white); }
.quiz-result-meta { font-size: 0.9rem; color: var(--color-white-soft); }
.quiz-result-actions { display: flex; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-sm); }
.quiz-result-caveat { font-size: 0.8rem; color: var(--color-white-soft); font-style: italic; margin: var(--space-sm) 0 0; }
.quiz-restart {
  display: inline-block; margin-top: var(--space-md); background: none; border: none;
  color: var(--color-white-soft); font-size: 0.85rem; text-decoration: underline; cursor: pointer; padding: 0;
}
.btn-ghost {
  display: inline-block; padding: 0.85rem 1.6rem; border-radius: 999px; font-weight: 600;
  border: 1.5px solid rgba(255,255,255,0.18); color: var(--color-white-soft); background: transparent;
  cursor: pointer; text-decoration: none; transition: border-color 0.2s ease, color 0.2s ease;
}
.btn-ghost:hover { border-color: var(--color-gold); color: var(--color-white); }
@media (max-width: 640px) {
  .quiz-wizard { padding: var(--space-md) var(--space-sm) var(--space-sm); }
  .quiz-label { font-size: 1.05rem; }
  .quiz-nav { flex-wrap: wrap; }
}

/* ==========================================================================
   Réseaux sociaux — icônes Instagram / Facebook
   Réutilisées dans le Hero de l'accueil et dans le pied de page de toutes
   les pages. Vrais comptes uniquement (pas de LinkedIn : profil non actif).
   ========================================================================== */
.hero-social,
.footer-social {
  display: flex; align-items: center; gap: 0.85rem;
}
.hero-social { margin-top: var(--space-md); }
.footer-social { margin-top: var(--space-sm); }
.hero-social a,
.footer-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.18); color: var(--color-white-soft);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.hero-social a:hover,
.footer-social a:hover {
  border-color: var(--color-gold); color: var(--color-gold-bright); transform: translateY(-2px);
}

/* ----- Page "Book créatif" (book.html) ----- */
.book-intro-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
}
.book-pitch p { color: var(--color-white-soft); }
.book-pitch p + p { margin-top: var(--space-sm); }
.book-pitch-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: var(--space-md); }

.book-stack { position: relative; aspect-ratio: 4 / 5; max-width: 460px; margin: 0 auto; }
.book-print {
  position: absolute; border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 60px -22px rgba(0,0,0,0.7), 0 0 0 1px rgba(182,140,42,0.22);
  background: var(--color-bg-elevated);
}
.book-print img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book-print--back-a { top: 2%; left: 4%; width: 58%; transform: rotate(-9deg); z-index: 1; opacity: 0.92; }
.book-print--back-b { top: 6%; right: 0; width: 46%; transform: rotate(7deg); z-index: 1; opacity: 0.92; }
.book-print--front { bottom: 0; left: 12%; width: 66%; transform: rotate(-3deg); z-index: 2; }

.book-plate {
  background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; overflow: hidden; margin: 0;
}
.book-plate img { width: 100%; height: auto; display: block; }
.book-plate-caption {
  padding: 1.1rem 1.4rem; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.book-plate-caption .cap-title { font-family: var(--font-title); letter-spacing: 0.02em; font-size: 1.05rem; color: var(--color-white); }
.book-plate-caption .cap-note { font-size: 0.78rem; color: var(--color-white-soft); text-align: right; max-width: 30ch; }
.book-plate--single { max-width: 920px; }

.book-events-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-sm); }
.book-events-grid .book-plate:nth-child(1) { grid-column: span 4; }
.book-events-grid .book-plate:nth-child(2) { grid-column: span 2; }
.book-events-grid .book-plate:nth-child(3) { grid-column: span 3; }
.book-events-grid .book-plate:nth-child(4) { grid-column: span 3; }
.book-events-grid .book-plate:nth-child(5) { grid-column: span 6; }
.book-events-grid .book-plate:nth-child(5) img { max-height: 520px; object-fit: cover; object-position: top; }

/* ----- Preuve client : structure prête, en attente de vrais témoignages/avis -----
   Ne jamais remplir ces cartes avec du contenu inventé — uniquement du réel. */
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); }
.proof-card {
  background: var(--color-bg-elevated); border: 2px dashed rgba(212,175,55,0.35);
  border-radius: var(--radius); padding: var(--space-md); text-align: center;
}
.proof-quote-mark {
  display: block; font-family: var(--font-accent); font-style: italic; font-size: 2.4rem;
  color: var(--color-gold-soft); line-height: 1; margin-bottom: var(--space-xs);
}
.proof-pending-text { font-weight: 600; color: var(--color-white); margin: 0 0 0.3rem; }
.proof-pending-meta { font-size: 0.85rem; color: var(--color-white-soft); margin: 0; }

/* ==========================================================================
   Mise en avant éditoriale du blog sur l'accueil — 16/09/2026
   Bloc "Nouveau sur le blog" placé juste sous le Hero (index.html), sans
   toucher au Hero lui-même. Un seul panneau centré, sobre : reprend le
   fond élevé + bordure fine déjà utilisés partout sur le site et la
   pastille .tag-pill déjà existante (créée pour l'en-tête d'article) —
   aucune nouvelle couleur, volontairement pas d'esthétique "carte produit"
   pour ne pas ressembler à une bannière publicitaire.
   ========================================================================== */
/* Resserré le 16/09/2026 (finition éditoriale) : le bloc respirait bien
   mais était plus haut que nécessaire (padding vertical de 4rem + marges
   de 2rem entre chaque ligne). Padding et marges réduits d'un cran pour un
   rendu plus compact et plus "éditorial" — toujours le même fond, la même
   bordure, le même centrage, aucune information retirée. */
.blog-teaser {
  max-width: 720px; margin: 0 auto; text-align: center;
  background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px; padding: var(--space-md) var(--space-md);
}
.blog-teaser .tag-pill { margin-bottom: var(--space-sm); }
.blog-teaser h2 {
  font-size: clamp(1.3rem, 2.6vw, 1.8rem); line-height: 1.25;
  max-width: 34ch; margin: 0 auto 0.6rem;
}
.blog-teaser-excerpt { color: var(--color-white-soft); max-width: 55ch; margin: 0 auto var(--space-sm); }
.blog-teaser .article-meta { justify-content: center; margin: 0 0 var(--space-sm); }
@media (max-width: 480px) {
  .blog-teaser { padding: var(--space-md) var(--space-sm); }
}

/* ==========================================================================
   Réalisation « CJ PÉTANQUE » — 01/10/2026
   Ajouts uniquement (aucune règle existante modifiée) :
   - .realisation-actions : boutons sous une carte de réalisations.html
     (seule carte qui renvoie vers une page dédiée + une application en ligne) ;
   - .case-* : page d'étude de cas cj-petanque.html (image principale,
     galerie de captures). Reprend fonds, bordures et rayons déjà utilisés
     sur le site (.realisation-card, .service-card-dark), aucune nouvelle couleur.
   ========================================================================== */
.realisation-actions { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.realisation-actions .btn { padding: 0.75rem 1.3rem; font-size: 0.78rem; }

.case-hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }

/* Capture principale (tableau de bord) : cadre type « fenêtre d'écran » */
.case-figure {
  margin: 0; background: var(--color-bg-elevated); border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(0,0,0,0.6);
}
.case-figure img { width: 100%; height: auto; }
.case-figure figcaption {
  padding: 0.8rem var(--space-md); font-size: 0.85rem; color: var(--color-white-soft);
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* Galerie : capture téléphone (portrait) + écran public (paysage) */
.case-gallery {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr);
  gap: var(--space-lg); align-items: center; margin-top: var(--space-lg);
}
.case-figure--phone { max-width: 320px; justify-self: center; border-radius: 28px; border-width: 6px; border-color: var(--color-bg-elevated-2); }
.case-figure--phone figcaption { padding: 0.7rem var(--space-sm); text-align: center; }

@media (max-width: 860px) {
  .case-gallery { grid-template-columns: 1fr; gap: var(--space-md); }
  .case-figure--phone { max-width: 280px; }
}