/**
 * components.css — Composants réutilisables multi-pages
 * =====================================================
 * Styles de composants utilisables sur toutes les pages
 * du site (badges de statut, skeleton screens, boutons filtre,
 * barre de recherche, état vide…).
 *
 * À charger APRÈS base.css. Pour une page, charger ensuite
 * son fichier pages/XXX.css spécifique.
 *
 * NOTE : les sélecteurs de filtres (#search-input, .filters…)
 * sont ici car partageables (page projets ET page relevés
 * par exemple). Ils utilisent des variables de tokens.css.
 */


/* ── Section éditoriale générique (titre + corps) ── */
.section-lede__title {
  font-family: var(--font-family);
  font-weight: var(--font-weight-semibold);
  font-size: var(--fs-2xl);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  letter-spacing: var(--letter-spacing-meta);
  margin: 0 0 var(--space-2xl);
  text-wrap: balance;   /* évite les lignes orphelines dans le titre */
  text-align:     center;
}

.section-lede__body {
  font-family: var(--font-family);
  font-weight: var(--font-weight-light);
  font-size: var(--fs-md);
  line-height: var(--line-height-body);
  color: var(--color-neutral-text-soft);
  margin: 0 0 var(--space-lg);
  text-align:     justify;
  max-width:   var(--measure);   /* longueur de ligne lisible ~65ch */
}
.section-lede__body p + p { margin-top: var(--space-md); }



/* ═══ Média + texte (bloc éditorial 2 colonnes) ═══ */
.media-text {
  display: grid;
  /* Colonnes purement proportionnelles : aucun plafond interne,
     donc aucun espace résiduel dans la gouttière.
     minmax(0, …) évite le débordement des médias à taille intrinsèque. */
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--media-ratio-cols, 1.618fr));
  gap: var(--space-2xl);          /* gouttière constante */
  align-items: start;             /* le texte ne s'étire pas verticalement */

  /* Seul et unique plafond de largeur + centrage */
  max-width: var(--content-max-width, 1200px);
  margin-inline: auto;
}

/* Colonne texte : hérite de la typo titres/corps de base.css.
   Plus de max-width ici — c'est le plafond du bloc qui borne la mesure. */
.media-text__body > :first-child {
  margin-top: 0;
}

/* Colonne média */
.media-text__figure {
  margin: 0;                   /* reset <figure> */
  align-self: start;           /* l'image garde son ratio */
  display: flex;
  flex-direction: column;
}

.media-text__figure img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: var(--media-ratio, 4 / 3);   /* ratio maîtrisé, surchargeable */
  object-fit: var(--fit, cover);             /* cover par défaut si non défini */
  object-position: var(--pos, center);   /* ← à ajouter */
}

/* Modificateur : le média impose son propre ratio */
.media-text__figure--natural img {
  aspect-ratio: auto;
  object-fit: unset;
}

.media-text__caption {
  font-size:      var(--fs-sm);
  color:          var(--color-muted);
  line-height:    var(--line-height-snug);
  margin-top:     var(--space-sm);
  letter-spacing: var(--letter-spacing-meta);
}

/* Par défaut : texte à gauche (étroit), média à droite (large) */

/* Mode reverse : on inverse les proportions… */
.media-text--reverse {
  grid-template-columns: minmax(0, var(--media-ratio-cols, 1.618fr)) minmax(0, 1fr);
}

/* …et on repositionne explicitement chaque enfant */
.media-text--reverse .media-text__figure {
  grid-column: 1;   /* média dans la 1ʳᵉ colonne (large, à gauche) */
  grid-row: 1;      /* force la même rangée */
}
.media-text--reverse .media-text__body {
  grid-column: 2;   /* texte dans la 2ᵉ colonne (étroite, à droite) */
  grid-row: 1;      /* idem */
}

/* Embed 3D / vidéo : ratio propre, indépendant des images */
.media-text__embed {
  position: relative;
  width: 100%;
  aspect-ratio: var(--embed-ratio, 1 / 1);   /* carré par défaut ; 16/9 possible */
  min-height: 100px;
}
.media-text__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* Rythme vertical entre blocs consécutifs */
.media-text + .media-text {
  margin-block-start: var(--space-media-gap, var(--space-4xl));
}

@media (max-width: 900px) {
  .media-text,
  .media-text--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .media-text--reverse .media-text__figure,
  .media-text--reverse .media-text__body {
    grid-column: 1;      /* une seule colonne */
    grid-row: auto;      /* on rend la main au placement auto */
  }
}

/* ═══════════════════════════════════════════════
   RÉVÉLATION AU SCROLL
   Piloté par initTextScrollReveal() (main.js)
   ═══════════════════════════════════════════════ */

/* État initial : invisible + légèrement décalé.
   Appliqué uniquement si JS est actif (classe .js sur <html>)
   → sans JS, le contenu reste visible et indexable. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity   var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
  will-change: opacity, transform;
}

/* État révélé */
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* Nettoyage : on libère le compositeur après l'animation */
.js [data-reveal].is-revealed {
  will-change: auto;
}

/* ── Stagger interne au bloc media-text ── */
/* La figure arrive en premier, le texte suit légèrement après.
   Le parent .media-text ne subit AUCUN transform : on évite
   de créer un contexte d'empilement qui gênerait les embeds. */
.js .media-text[data-reveal] .media-text__figure,
.js .media-text[data-reveal] .media-text__body {
  opacity: 0;
  transform: translateY(var(--reveal-distance));
  transition:
    opacity   var(--reveal-duration) var(--reveal-easing),
    transform var(--reveal-duration) var(--reveal-easing);
}

.js .media-text[data-reveal] {
  opacity: 1;
  transform: none;
}

.js .media-text[data-reveal].is-visible .media-text__figure {
  opacity: 1;
  transform: none;
}
.js .media-text[data-reveal].is-visible .media-text__body {
  opacity: 1;
  transform: none;
  transition-delay: var(--reveal-stagger);
}

/* Sécurité : si l'utilisateur refuse les animations, on neutralise
   complètement les états initiaux (sans dépendre du JS). */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal],
  .js .media-text[data-reveal] .media-text__figure,
  .js .media-text[data-reveal] .media-text__body {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}



/* ═══════════════════════════════════════════════
   SKELETON SCREENS (loading states)
   ═══════════════════════════════════════════════ */

.skeleton-grid {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  align-content:   flex-start;
  gap:             var(--grid-gap);
  max-width:       var(--grid-max-width);
  margin:          0 auto;
}

.skeleton-card {
  flex:            0 0 var(--card-width);
  width:           var(--card-width);
  aspect-ratio:    var(--card-aspect-ratio);
  background:      linear-gradient(
                     90deg,
                     var(--color-skeleton-base)      25%,
                     var(--color-skeleton-highlight) 50%,
                     var(--color-skeleton-base)      75%
                   );
  background-size: 200% 100%;
  animation:       shimmer 1.4s ease-in-out infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .skeleton-card { animation: none; background: var(--color-skeleton-base); }
}


/* ═══════════════════════════════════════════════
   BADGES DE STATUT
   ═══════════════════════════════════════════════ */

.status-badge {
  font-family:    var(--font-family);
  font-size:      var(--fs-3xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-status);
  text-transform: uppercase;
  color:          #ffffff;
  background:     var(--status-default);
  padding:        var(--status-badge-padding);
  border-radius:  var(--radius-sm);
  line-height:    var(--line-height-tight);
  white-space:    nowrap;
  box-shadow:     var(--shadow-badge);
}

.status-badge.status-pro        { background: var(--status-pro); }
.status-badge.status-chantier   { background: var(--status-chantier); }
.status-badge.status-diagnostic { background: var(--status-diagnostic); }
.status-badge.status-releve     { background: var(--status-releve); }
.status-badge.status-avant      { background: var(--status-avant); }
.status-badge.status-esquisse   { background: var(--status-esquisse); }
.status-badge.status-termine    { background: var(--status-termine); }


/* ═══════════════════════════════════════════════
   BOUTONS FILTRE
   ═══════════════════════════════════════════════ */

.filters {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             var(--filter-gap);
  margin-bottom:   var(--filter-margin-bottom);
}

.filter-btn {
  font-family:      var(--font-family);
  font-size:        var(--fs-2xs);
  font-weight:      var(--font-weight-semibold);
  letter-spacing:   var(--letter-spacing-filter);
  text-transform:   uppercase;
  color:            var(--filter-btn-text);
  background-color: var(--filter-btn-bg);
  border:           var(--border-width) solid var(--filter-btn-border);
  border-radius:    var(--filter-btn-radius);
  padding:          var(--filter-btn-padding);
  cursor:           pointer;
  transition:       background-color var(--transition-filter),
                    color            var(--transition-filter);
}

.filter-btn:hover               { background-color: var(--filter-btn-bg-hover); }
.filter-btn.active             { background-color: var(--filter-btn-bg-active);
                                 color:            var(--filter-btn-text-active); }
.filter-btn[data-hidden="true"] { display: none; }

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


/* ═══════════════════════════════════════════════
   BARRE DE RECHERCHE
   ═══════════════════════════════════════════════ */

.search-wrap {
  display:         flex;
  justify-content: center;
  margin-bottom:   28px;
}


/* ═══ HEADER ═══ */
.site-header {
  position: fixed; top: 0; left: 0; width: 100%; z-index: 100;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem clamp(1rem, 4vw, 3rem); gap: 2rem;
}
.site-header__logo { display: block; height: clamp(40px, 6vw, 64px); }
.site-header__logo .logo { height: 100%; width: auto; display: block; transition: opacity .35s ease; }

/* Par défaut (hero sombre) : logo clair visible, foncé caché */
.logo--dark  { position: absolute; top: 0; left: 0; opacity: 0; }
.site-header__logo { position: relative; }

/* Header "scrollé" ou pages sans hero → fond blanc + logo foncé */
.site-header.is-scrolled,
body:not([data-page="home"]) .site-header {
  background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.site-header.is-scrolled .logo--light,
body:not([data-page="home"]) .site-header .logo--light { opacity: 0; }
.site-header.is-scrolled .logo--dark,
body:not([data-page="home"]) .site-header .logo--dark  { opacity: 1; }

/* Le header flotte au-dessus du hero, sans décaler le contenu */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;      /* transparent sur le hero */
  transition: background .3s ease;
}

/* Par défaut sur pages à hero : logo clair visible, foncé caché */
.site-header .logo--light { display: block; }
.site-header .logo--dark  { display: none; }

/* Au scroll (ou header opaque) : fond blanc + logo foncé */
.site-header.is-scrolled {
  background: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
}
.site-header.is-scrolled .logo--light { display: none; }
.site-header.is-scrolled .logo--dark  { display: block; }

/* Le hero passe SOUS le header : pas de padding-top, il occupe le viewport */
.page-hero {
  position: relative;
  min-height: 60vh;             /* hero secondaire, moins haut que la home */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--hero-img) center/cover no-repeat;
}
.page-hero__overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.35);  /* assombrit pour lisibilité du logo/titre */
}
.page-hero__title {
  position: relative;
  color: #fff;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 300;
  letter-spacing: .04em;
}


/* ═══ NAV ═══ */
.site-nav ul { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
.site-nav a {
  text-decoration: none; color: currentColor; font-size: .95rem;
  letter-spacing: .02em; padding: .4rem 0; position: relative; white-space: nowrap;
}
.site-nav a::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 2px;
  background: currentColor; transition: width .3s ease;
}
.site-nav a:hover::after,
body[data-page="projets"]  a[data-navlink="projets"]::after,
body[data-page="agence"]   a[data-navlink="agence"]::after,
body[data-page="histoire"] a[data-navlink="histoire"]::after,
body[data-page="releves"]  a[data-navlink="releves"]::after,
body[data-page="contact"]  a[data-navlink="contact"]::after { width: 100%; }

/* Couleur du texte nav : clair sur hero, foncé sinon */
.site-header { color: #fff; }
.site-header.is-scrolled,
body:not([data-page="home"]) .site-header { color: #1a1a1a; }

/* ═══ BURGER (mobile) ═══ */
.site-header__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 8px; }
.site-header__burger span { width: 26px; height: 2px; background: currentColor; transition: transform .3s, opacity .3s; }

@media (max-width: 860px) {
  .site-header__burger { display: flex; }
  .site-nav {
    position: fixed; inset: 0 0 0 auto; width: min(80vw, 340px);
    background: #fff; color: #1a1a1a; transform: translateX(100%);
    transition: transform .35s ease; padding: 6rem 2rem 2rem; box-shadow: -4px 0 20px rgba(0,0,0,.15);
  }
  .site-nav.is-open { transform: translateX(0); }
  .site-nav ul { flex-direction: column; gap: 1.5rem; }
  [data-burger][aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  [data-burger][aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  [data-burger][aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
}

/* ═══ PAGE HERO (bannière secondaire) ═══ */
.page-hero {
  position: relative; height: clamp(280px, 45vh, 460px);
  display: flex; align-items: center; justify-content: center;
  background: var(--hero-img) center/cover no-repeat; color: #fff; text-align: center;
}
.page-hero__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.page-hero__title { position: relative; font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 300; letter-spacing: .04em; margin: 0; }

/* ═══ FOOTER ═══ */
.site-footer {
  background: var(--color-secondary-blue);            /* ← bleu secondaire */
  color: #cfcfcf;
  padding: clamp(2.5rem, 6vw, 5rem) clamp(1rem, 4vw, 3rem);
  text-align: right;                            /* ← alignement à droite */
  margin-top: var(--space-xl);
}
.site-footer__inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: flex-start;
  justify-content: space-between;   /* ← logo à gauche, texte à droite */
}
.site-footer__logo { height: 90px; width: auto; }
.site-footer__info {
  font-style: normal;
  line-height: 1.9;
  font-size: .9rem;
  text-align: right;
}
.site-footer__info a { color: #fff; text-decoration: none; }
.site-footer__info a:hover { text-decoration: underline; }
.site-footer__copy {
  width: 100%;
  margin: 1.5rem 0 0;
  font-size: .8rem;
  color: #b8c4cd;                               /* ← éclairci pour rester lisible sur bleu */
}

/* Décale le contenu sous le header fixe (sauf home où le hero passe dessous) */
body:not([data-page="home"]) main { padding-top: 0; }


.equipe__role {
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted, #6b6b6b);
  margin-block: -0.5rem 1.5rem;
}


/* ─── Lien partenaire (logo + libellé) ─── */
.partner-link {
  display: flex;                /* au lieu de inline-flex */
  flex-direction: column;
  align-items: center;          /* au lieu de flex-start */
  width: fit-content;           /* le cadre reste ajusté au contenu */
  margin-inline: auto;          /* ← le centrage */
  margin-block-start: 2.5rem;
  gap: 0.9rem;
  padding: 1.4rem 1.8rem;
  border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  text-align: center;
  transition: border-color .35s ease, background-color .35s ease, transform .35s ease;
  position: relative;
  z-index: 1;
  pointer-events: auto;
  min-height: 1px;
}

.partner-link:hover,
.partner-link:focus-visible {
  border-color: color-mix(in srgb, currentColor 45%, transparent);
  background: color-mix(in srgb, currentColor 4%, transparent);
  transform: translateY(-2px);
}

.partner-link__logo {
  width: clamp(160px, 22vw, 230px);
  height: auto;
  display: block;
  transition: opacity .35s ease;
  opacity: .85;
}

.partner-link:hover .partner-link__logo,
.partner-link:focus-visible .partner-link__logo {
  opacity: 1;
}

.partner-link__label {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-muted, #6b6b6b);
  transition: color .35s ease;
}

.partner-link:hover .partner-link__label,
.partner-link:focus-visible .partner-link__label {
  color: inherit;
}

.partner-link__arrow {
  width: 1em;
  height: 1em;
  transition: transform .35s ease;
}

.partner-link:hover .partner-link__arrow,
.partner-link:focus-visible .partner-link__arrow {
  transform: translate(2px, -2px);
}

.partner-link__logo,
.partner-link__label,
.partner-link__arrow {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .partner-link,
  .partner-link__logo,
  .partner-link__label,
  .partner-link__arrow { transition: none; }
  .partner-link:hover { transform: none; }
}




#search-input {
  font-family:    var(--font-family);
  font-size:      var(--fs-xs);
  font-weight:    var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-meta);
  color:          var(--color-text);
  background:     transparent;
  border:         var(--border-width) solid var(--color-input-border);
  border-radius:  0;
  padding:        var(--input-padding);
  width:          280px;
  max-width:      100%;
  outline:        none;
  transition:     border-color var(--transition-fast);
}

#search-input::placeholder { color: var(--color-input-placeholder); }
#search-input:focus        { border-color: var(--color-primary); }


/* ═══════════════════════════════════════════════
   COMPTEUR DE RÉSULTATS
   ═══════════════════════════════════════════════ */

#result-count {
  display:         flex;
  justify-content: center;
  font-size:       var(--fs-2xs);
  font-weight:     var(--font-weight-light);
  letter-spacing:  var(--letter-spacing-status);
  color:           var(--color-taupe);
  margin-bottom:   var(--space-xl);
  min-height:      1.2em;
}


/* ═══════════════════════════════════════════════
   ÉTAT VIDE (aucun résultat)
   ═══════════════════════════════════════════════ */

#no-results {
  display:        none;
  text-align:     center;
  padding:        var(--space-2xl) var(--space-md);
  font-size:      var(--fs-sm);
  font-weight:    var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-meta);
  color:          var(--color-muted-light);
}

#no-results button {
  margin-top:     var(--space-md);
  font-family:    var(--font-family);
  font-size:      var(--fs-2xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color:          var(--color-primary);
  background:     transparent;
  border:         var(--border-width) solid var(--color-primary);
  padding:        var(--space-sm) 22px;
  cursor:         pointer;
}

#no-results button:hover { background: var(--color-primary-tint); }


    #cesiumContainer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
    }

    #customToolbar {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 1000;
      display: flex;
      gap: 8px;
      align-items: center;
      flex-wrap: wrap;
    }
    #customToolbar button {
      padding: 6px 12px;
      background: var(--color-primary);
      color: white;
      border: 1px solid #444;
      border-radius: 4px;
      cursor: pointer;
      font-family: var(--font-family);
      font-size: 13px;
    }
    #customToolbar button.active {
      background: var(--color-primary);
      border-color: var(--color-primary);
    }
    #customToolbar .clip-control {
      color: white;
      font-family: var(--font-family);
      font-size: 13px;
    }

/* ============================================================
   CESIUM VIEWER - TOOLBAR & UI (Superposition / Overlay)
   ============================================================ */

/* S'assure que le conteneur parent sert de repère absolu */
#cesiumContainer,
.cesium-viewer-wrapper {
  position: relative !important;
}

.cv-toolbar {
  position: absolute !important;
  top: 12px;
  left: 12px;
  z-index: 9999 !important; /* Passe au-dessus des widgets Cesium */
  display: flex;
  flex-direction: column;
  padding: 8px 10px;
  background: rgba(25, 25, 25, 0.88);
  backdrop-filter: blur(4px); /* Léger flou d'arrière-plan moderne */
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  font: 12px/1.4 sans-serif;
  color: #f0f0f0;
  width: 250px;
  box-sizing: border-box;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.5);
  pointer-events: auto; /* Permet l'interaction complète */
}

/* En-tête */
.cv-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
}

.cv-main-title {
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  color: #bbb;
  letter-spacing: 0.5px;
}

.cv-toggle-btn {
  background: transparent;
  border: none;
  color: #bbb;
  cursor: pointer;
  font-size: 13px;
  padding: 2px 6px;
  border-radius: 3px;
  line-height: 1;
}
.cv-toggle-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

/* Corps du menu repliable */
.cv-body {
  display: flex;
  flex-direction: column;
  margin-top: 8px;
}

.cv-toolbar.collapsed {
  width: auto;
  min-width: 90px;
}

.cv-toolbar.collapsed .cv-body {
  display: none !important;
}

/* Sections */
.cv-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cv-section:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.cv-section-title {
  font-size: 10px;
  text-transform: uppercase;
  color: #888;
  font-weight: bold;
  letter-spacing: 0.5px;
}

.cv-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cv-row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

/* Boutons */
.cv-btn {
  padding: 4px 8px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #383838;
  color: #f0f0f0;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
  user-select: none;
}
.cv-btn:hover {
  background: #4a4a4a;
}
.cv-btn.active {
  background: #2f6f4f;
  border-color: #3f9f6f;
}
.cv-btn-sm {
  padding: 2px 6px;
  font-size: 10px;
}

/* Champs & Sliders */
.cv-toolbar label {
  user-select: none;
  font-size: 11px;
  color: #ccc;
}

.cv-toolbar select {
  background: #2b2b2b;
  color: #f0f0f0;
  border: 1px solid #555;
  border-radius: 4px;
  padding: 3px 5px;
  font: inherit;
  font-size: 11px;
  outline: none;
  width: 100%;
}

.cv-num-input {
  width: 58px;
  background: #222;
  border: 1px solid #555;
  color: #fff;
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 11px;
  text-align: right;
}

.cv-toolbar input[type="range"] {
  width: 100%;
  margin: 2px 0;
  cursor: pointer;
}

/* ============================================================
   MODALE D'EXPORTATION HD
   ============================================================ */
.cv-modal-backdrop {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cv-modal-window {
  background: #222;
  color: #eee;
  border-radius: 8px;
  width: 320px;
  padding: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.7);
  font: 12px/1.4 sans-serif;
}

.cv-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
  font-size: 13px;
  border-bottom: 1px solid #444;
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.cv-modal-close {
  background: transparent;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 14px;
}

.cv-form-group {
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.cv-form-group select,
.cv-form-group input[type="number"] {
  background: #333;
  color: #fff;
  border: 1px solid #555;
  padding: 4px 6px;
  border-radius: 4px;
}

.cv-export-info {
  background: #181818;
  padding: 8px;
  border-radius: 4px;
  margin: 12px 0;
  border: 1px solid #333;
}

.cv-progress-container {
  margin-top: 10px;
}

.cv-progress-bar {
  background: #444;
  height: 8px;
  border-radius: 4px;
  overflow: hidden;
}

.cv-progress-fill {
  background: #2e78d2;
  height: 100%;
  width: 0%;
  transition: width 0.2s ease;
}

.cv-progress-text {
  text-align: center;
  font-size: 10px;
  color: #aaa;
  margin-top: 4px;
}

.cv-hidden {
  display: none !important;
}