/* =========================================================
   SITES CLIENTS — LES TROIS MONDES VISUELS (2026-09-30)

   ⚠️ Remplace la couche « chantier » précédente : elle ajoutait des motifs sur
   un gabarit inchangé, ce qui donnait une page de 5,3 écrans (PC) et 9,4
   (mobile) — trop longue, et le mobile doublait le PC. Les trois mondes
   ci-dessous sont COMPACTS (2,6 à 3,1 écrans) et le mobile fait la même
   longueur que le PC.

   ⚠️ Trois identités franchement distinctes, pas trois recolorations :
     A. « INDUSTRIEL » (terrain / dépannage) — acier sombre, orange sécurité,
        capitales condensées, tableau numéroté. Brut et direct.
     B. « BÉTON » (vitrine / chantier) — béton clair + trame de plan, serif
        Bitter, chiffres de masse, liste éditoriale à traits de cote.
     C. « ATELIER » (classique / finitions) — blanc, halo coloré, coins
        arrondis, cartes douces, ligne de temps à points reliés.

   ⚠️ Aucun élément de la marque Devisaly (ni ivoire, ni or, ni Fraunces).
   Les couleurs restent celles de la FAMILLE de métier (--hero/--accent).

   ⚠️ Chargé APRÈS site_client.css et site_client_variantes.css.
   ========================================================= */

/* =========================================================
   0. BASES COMMUNES — densité, mesure, typographie technique
   ========================================================= */
.wrap { max-width: 1140px; }
.ch-anno {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--faint); display: block;
}
/* La bande métier : gestes + matières, sur UNE bande compacte (~100 px).
   ⚠️ Elle faisait 366 px en deux colonnes verticales : elle mangeait un
   demi-écran pour dire « ce qu'on fait ». */
.metier {
  display: grid; grid-template-columns: auto 1fr; gap: 8px 30px;
  align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--line);
  background: var(--paper2);
}
.metier .metier-col { display: contents; }
.metier-liste { display: flex; flex-wrap: wrap; gap: 5px 20px; list-style: none; margin: 0; padding: 0; border: 0; }
.metier-liste li { display: inline-flex; align-items: baseline; gap: 8px; padding: 0; border: 0; font-size: 14.5px; }
.metier-liste li::before {
  content: ""; flex: 0 0 auto; width: 8px; height: 4px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg) translateY(-1px);
}
.metier-matiere { display: flex; flex-wrap: wrap; gap: 7px; list-style: none; margin: 0; padding: 0; }
.metier-matiere li {
  font-family: var(--mono); font-size: 11.5px; padding: 5px 13px;
  border: 1px solid var(--line2); background: var(--paper);
}
.metier-matiere li:first-child { border-color: var(--accent); color: var(--accent-text); font-weight: 600; }

/* Le déroulé du chantier : 5 étapes HORIZONTALES.
   ⚠️ En colonne verticale il faisait 638 px. */
.deroule { display: grid; grid-template-columns: repeat(5, 1fr); list-style: none; margin: 0; padding: 0;
  counter-reset: d; border-top: 2px solid var(--ink); }
.deroule li {
  padding: 18px 16px 0 0; border-right: 1px solid var(--line);
  counter-increment: d; font-size: 14px; line-height: 1.5; color: var(--muted);
}
.deroule li:last-child { border-right: 0; }
.deroule li::before {
  content: "0" counter(d); display: block; font-family: var(--mono); font-size: 11.5px;
  font-weight: 600; color: var(--accent-text); margin-bottom: 9px;
}
.dr-note { margin-top: 18px; font-size: 13.5px; color: var(--faint); }

/* Le téléphone de l'en-tête : cliquable (il ne l'était pas). */
a.htel { text-decoration: none; color: inherit; }
a.htel:hover b { color: var(--accent-text); }

/* =========================================================
   A. « INDUSTRIEL » — variante terrain (dépannage)
   ========================================================= */
[data-variante="terrain"] { --ch-safety: #ff5a1f; }
[data-variante="terrain"] .hero { position: relative; }
[data-variante="terrain"] .hero::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 7px; z-index: 4;
  background: repeating-linear-gradient(115deg, var(--ch-safety) 0 15px, var(--hero) 15px 30px);
}
[data-variante="terrain"] .topbar { background: #0e1114; border-bottom: 3px solid var(--ch-safety); }
[data-variante="terrain"] .topbar .sq { background: var(--ch-safety); }
[data-variante="terrain"] .head { background: var(--paper); border-bottom: 2px solid var(--ch-safety); }
[data-variante="terrain"] .logo { background: var(--ch-safety); color: #0e1114; border: 0;
  clip-path: polygon(0 0, 100% 0, 100% 74%, 74% 100%, 0 100%); }
[data-variante="terrain"] .hero h1 { text-transform: uppercase; letter-spacing: -.035em; font-weight: 700; }
[data-variante="terrain"] .hero h1 span { color: var(--ch-safety); }
[data-variante="terrain"] .hero-kicker { color: var(--ch-safety); font-weight: 600; }
[data-variante="terrain"] .btn-tel {
  background: var(--ch-safety); border-color: var(--ch-safety); color: #0e1114;
  font-weight: 700; text-transform: uppercase; font-size: 16px;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}
[data-variante="terrain"] .btn-tel:hover { background: #ff7a3d; }
[data-variante="terrain"] .spec { background: var(--ch-safety); color: #0e1114; }
[data-variante="terrain"] .spec-in span { border-left-color: rgba(14,17,20,.22); color: #0e1114;
  font-weight: 600; text-transform: uppercase; font-size: 12px; }
[data-variante="terrain"] .cards { border-top: 2px solid var(--ch-safety); }
[data-variante="terrain"] .card-p { border-left: 0; border-right: 0; border-radius: 0;
  border-bottom: 1px solid var(--line); display: grid; grid-template-columns: 38px 1fr auto;
  gap: 4px 16px; align-items: center; background: transparent; padding: 15px 0; }
[data-variante="terrain"] .card-p::before { position: static; counter-increment: c;
  content: "0" counter(c); font-family: var(--mono); font-size: 12px; color: var(--faint); }
[data-variante="terrain"] .card-p h3 { grid-column: 2; font-size: 16px; font-weight: 600; }
[data-variante="terrain"] .card-p .cp-d { grid-column: 2; font-size: 13px; }
[data-variante="terrain"] .card-p .cp-foot { grid-column: 3; grid-row: 1 / 3; border: 0; padding: 0;
  flex-direction: column; align-items: flex-end; gap: 2px; }
[data-variante="terrain"] .card-p .cp-foot b { font-size: 20px; }
[data-variante="terrain"] .cards { counter-reset: c; }

/* =========================================================
   B. « BÉTON » — variante vitrine (chantier / gros œuvre)
   ========================================================= */
[data-variante="vitrine"] .hero {
  background-image:
    linear-gradient(rgba(0,0,0,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.10) 1px, transparent 1px),
    linear-gradient(rgba(0,0,0,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,.045) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}
[data-variante="vitrine"] .head { background: var(--paper); }
[data-variante="vitrine"] .hero h1 { font-family: 'Bitter', Georgia, serif; font-weight: 600; }
[data-variante="vitrine"] .sec-h h2, [data-variante="vitrine"] .card-p h3,
[data-variante="vitrine"] .deroule li::before { font-family: 'Bitter', Georgia, serif; }
[data-variante="vitrine"] .hero-figures b { font-size: 54px; font-weight: 700; letter-spacing: -.035em; }
[data-variante="vitrine"] .hero-figures .hf span { letter-spacing: .1em; }
/* Liste éditoriale : filets, traits de cote, prix à droite. */
[data-variante="vitrine"] .editorial { border-top: 2px solid var(--ink); }
[data-variante="vitrine"] .editorial li { grid-template-columns: 64px 1fr 150px; padding: 20px 0; }
[data-variante="vitrine"] .editorial .ed-n { font-family: var(--mono); font-size: 12.5px; font-weight: 600; }
[data-variante="vitrine"] .editorial .ed-p::before { content: ""; position: absolute; left: 0;
  top: 6px; bottom: 6px; width: 1px; background: var(--line2); }
[data-variante="vitrine"] .editorial .ed-p { position: relative; padding-left: 16px; }
[data-variante="vitrine"] .sec-h h2 { letter-spacing: -.025em; }

/* =========================================================
   C. « ATELIER » — variante classique (finitions, services)
   ========================================================= */
[data-variante="classique"] .head { border-bottom: 1px solid var(--line); }
[data-variante="classique"] .logo { border-radius: 12px; }
[data-variante="classique"] .hero { position: relative; overflow: hidden; }
[data-variante="classique"] .hero::before {
  content: ""; position: absolute; top: -140px; right: -120px; width: 520px; height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 62%);
}
[data-variante="classique"] .hero h1 em, [data-variante="classique"] .hero h1 .accent { font-style: normal; }
[data-variante="classique"] .btn { border-radius: 11px; }
[data-variante="classique"] .btn-a { border-radius: 11px; }
[data-variante="classique"] .qbox { border-radius: 16px;
  box-shadow: 0 24px 50px -34px rgba(0,0,0,.45); border: 1px solid var(--line); }
/* Les prestations en cartes douces, 3 colonnes. */
[data-variante="classique"] .cards { grid-template-columns: repeat(3, 1fr); gap: 16px; border: 0; }
[data-variante="classique"] .card-p {
  border: 1px solid var(--line); border-radius: 13px; background: var(--paper2); padding: 22px;
  display: flex; flex-direction: column; gap: 6px;
}
[data-variante="classique"] .card-p .cp-foot { border-top: 1px solid var(--line); margin-top: auto;
  flex-direction: column; align-items: flex-start; gap: 2px; padding-top: 13px; }
/* Le déroulé : points reliés par une ligne de temps. */
[data-variante="classique"] .deroule { border-top: 0; position: relative; }
[data-variante="classique"] .deroule::before {
  content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--line2);
}
[data-variante="classique"] .deroule li { border-right: 0; padding: 32px 18px 0 0; position: relative; }
[data-variante="classique"] .deroule li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 13px; height: 13px;
  border-radius: 50%; background: var(--paper); border: 2px solid var(--accent); margin: 0;
}
[data-variante="classique"] .deroule li:last-child::before { background: var(--accent); }

/* =========================================================
   D. RESPONSIVE — le mobile fait la MÊME longueur que le PC
   ⚠️ Avant : 9,4 écrans sur mobile contre 5,3 sur PC. Chaque section doublait
   sans que rien ne le signale.
   ========================================================= */
@media (max-width: 960px) {
  .metier { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; }
  .metier .metier-col .ch-anno { margin-top: 10px; }
  .deroule { grid-template-columns: 1fr; border-top: 2px solid var(--ink); }
  .deroule li { border-right: 0; border-bottom: 1px solid var(--line); padding: 15px 0; }
  .deroule li:last-child { border-bottom: 0; }
  [data-variante="classique"] .deroule::before { left: 6px; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
  [data-variante="classique"] .deroule li { padding: 0 0 18px 30px; }
  [data-variante="classique"] .deroule li:last-child { padding-bottom: 0; }
  [data-variante="classique"] .cards { grid-template-columns: 1fr 1fr; }
  [data-variante="vitrine"] .editorial li { grid-template-columns: 46px 1fr; }
  [data-variante="vitrine"] .editorial .ed-p { grid-column: 2; text-align: left; padding-left: 0; }
  [data-variante="vitrine"] .editorial .ed-p::before { display: none; }
}
@media (max-width: 620px) {
  .metier-liste { gap: 4px 16px; }
  .metier-liste li { font-size: 14px; }
  [data-variante="classique"] .cards { grid-template-columns: 1fr; }
  [data-variante="terrain"] .card-p { grid-template-columns: 32px 1fr auto; }
}

/* =========================================================
   MOBILE — compression réelle (2026-09-30)

   ⚠️ Mesure : la page faisait 4,6 écrans sur PC et 9,2 sur mobile. Chaque bloc
   doublait parce qu'il s'empilait, mais certains doublaient pour RIEN :
     pied de page  731 px (4 colonnes de liens empilées)
     calculateur   896 px
     contact      1281 px
     cartes        542 px
   Un client sur téléphone n'a pas besoin de tout : on garde ce qui vend, on
   replie le reste.
   ========================================================= */
@media (max-width: 700px) {
  /* Le pied de page : deux colonnes au lieu de quatre, et les listes de liens
     SEO (une par commune) passent en ligne continue. C'est du maillage, pas de
     la lecture : personne ne déroule 5 liens de ville sur un téléphone. */
  .fgrid { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
  .fgrid > div:nth-child(3), .fgrid > div:nth-child(4) { display: none; }
  .foot { padding: 32px 0 20px; }
  .fbot { margin-top: 24px; padding-top: 14px; }

  /* Le calculateur : une ligne par prestation, prix et quantité sur la même
     ligne. Il faisait 896 px parce que chaque ligne empilait 3 blocs. */
  .calc-line { display: grid; grid-template-columns: 24px 1fr auto; gap: 10px;
    align-items: center; padding: 11px 14px; }
  .calc-line .calc-nom { font-size: 15px; }
  .calc-unit { display: none; }
  .calc-qty { grid-column: 3; width: 74px; }
  .calc-prix { grid-column: 3; grid-row: 1; display: none; }
  .calc-total { padding: 16px 14px; gap: 8px; }
  .ct-row { font-size: 14px; }
  .ct-row.ct-big b { font-size: 23px; }
  .ct-note { font-size: 12px; }

  /* Les cartes de prestation : deux colonnes serrées au lieu d'une pile. */
  .cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-p { padding: 15px 13px; }
  .card-p h3 { font-size: 15px; }
  .cp-d { font-size: 12.5px; }
  .cp-foot b { font-size: 18px; }

  /* Le contact : on masque le bloc coordonnées en double (il est déjà dans le
     pied de page et dans l'en-tête), on garde le formulaire. */
  .contact { grid-template-columns: 1fr; gap: 20px; }
  .contact .cs { display: none; }

  /* Les zones : la liste des communes en nuage compact, pas une grille. */
  .cells { grid-template-columns: 1fr 1fr 1fr; }
  .cells .cell { padding: 9px 8px; font-size: 13px; }

  /* Le déroulé : déjà horizontal en CSS de base sous 960 ; on resserre. */
  .deroule li { font-size: 13.5px; }

  .metier { padding: 14px 0; }
  .metier-liste li, .metier-matiere li { font-size: 13px; }
  .metier-matiere li { padding: 4px 10px; }
}

/* =========================================================
   MOBILE — ÉCHELLE UNIQUE et alignements (2026-09-30)

   ⚠️ MESURE du désordre (mobile 390px) : les paragraphes d'UNE SEULE page
   portaient SEPT tailles différentes — 12, 12.5, 13, 13.5, 15, 16, 16.5 px —
   et les h2 trois valeurs (22 et 23). Le h1 était CENTRÉ sur le monde
   « atelier » et aligné à gauche sur les deux autres. C'est ce que le client
   appelle « inégale » : ce n'est pas une question de goût, c'est mesurable.

   ⚠️ Barème mobile, aligné sur la taille de lecture confortable (16 px) :
     h1  30 · h2 21 · h3 16 · corps 15.5 · petits libellés 12.5
   ⚠️ Alignement : tout à GAUCHE sur les trois mondes. Le centrage d'une seule
   variante était une incohérence, pas une identité.
   ========================================================= */
@media (max-width: 700px) {
  /* --- Titres --- */
  .hero h1, .hero-contrat .hero-copy h1 { font-size: 30px !important; line-height: 1.06 !important; text-align: left !important; }
  [data-variante="classique"] .hero h1,
  [data-variante="classique"] .hero-copy { text-align: left !important; align-items: flex-start !important; margin-left: 0 !important; }
  .sec-h h2, .section-head h2 { font-size: 21px !important; line-height: 1.15 !important; }
  .card-p h3, .feature h3, .pain-item h3, .step h3,
  .presta-item h3, .etapes h3, .editorial h3 { font-size: 16px !important; }
  .deroule li::before { font-size: 11.5px !important; }

  /* --- Corps de texte : UNE seule valeur (15.5px) ---
     ⚠️ On cible le contenu editorial, pas les libellés techniques. */
  p, .sec-h p, .section-head p, .hero-copy p, .hero-lede,
  .card-p .cp-d, .editorial .ed-b p, .deroule li,
  .metier-liste li, .contact p, .pain-item p, .step p,
  .feature p, .presta-item p, .tnote, .dr-note {
    font-size: 15.5px !important; line-height: 1.6 !important; text-align: left !important;
  }
  /* Les mentions et notes restent un cran en dessous, mais UNIFORMES. */
  .ct-note, .cp-d, .ed-u, .note, .tnote, .dr-note, .lead-privacy {
    font-size: 12.5px !important; line-height: 1.55 !important;
  }
  /* Les libellés techniques : une seule taille aussi. */
  .ch-anno, .ap-kicker, .tag, label, .metier .k { font-size: 12px !important; }
  .metier-matiere li, .chip { font-size: 13px !important; }

  /* --- Les prix : une seule taille --- */
  .cp-foot b, .ed-p b, .qtot b, .ct-row.ct-big b { font-size: 19px !important; }

  /* --- Écarts verticaux uniformes ---
     ⚠️ Les sections portaient 5 hauteurs de padding différentes. */
  .sec, section.sec { padding-top: 40px !important; padding-bottom: 40px !important; }
  .sec-h, .section-head { margin-bottom: 22px !important; }
  .sec-h h2 + p, .section-head h2 + p { margin-top: 8px; }
}

/* ⚠️ Suite du rattrapage (mobile) : les derniers titres hors barème.
   - h2 à 23px : ils étaient dans un <div> nu, pas dans `.sec-h` (zones, contact)
   - h3 à 12px : ce sont les intertitres du PIED DE PAGE (« Prestations »,
     « Zones », « Informations »). Ce sont des libellés techniques, pas des
     titres de contenu : on les aligne sur la taille des autres libellés (12px),
     et on aligne les h2 du contenu sur 21px.
   ⚠️ On ne force PAS les h3 du pied à 16px : ce sont des étiquettes de colonne,
   elles doivent rester discrètes. L'important est qu'elles soient UNIFORMES. */
@media (max-width: 700px) {
  /* h2 de contenu hors .sec-h : même taille que les autres. */
  .zone h2, .contact h2, section h2:not(.sec-h h2) { font-size: 21px !important; line-height: 1.15 !important; }
  /* Intertitres du pied : une seule taille, cohérente avec les autres libellés. */
  .foot h3, .fgrid h3 { font-size: 12px !important; letter-spacing: .12em !important; }
}

/* ⚠️ LE BLOC MÉTIER sur mobile (254 px, listes en escalier).
   Géométrie mesurée : les <li> se repliaient en flex wrap, produisant des
   largeurs irrégulières (145, 166, 130, 202, 144 px) et donc un bord droit en
   dents de scie — c'est ce qui « fait inégal ». On passe en GRILLE à colonnes
   égales : les libellés s'alignent verticalement, le bord est net. */
@media (max-width: 700px) {
  .metier { display: block; padding: 16px 0; }
  .metier .metier-col { display: block; }
  .metier .metier-col + .metier-col { margin-top: 16px; }
  .metier-liste {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0;
    border-top: 1px solid var(--line);
  }
  .metier-liste li {
    padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px;
    display: flex; align-items: baseline; gap: 9px;
  }
  .metier-matiere { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .metier-matiere li { padding: 9px 12px; text-align: left; font-size: 13px; }

  /* Les cartes de prestation : deux colonnes, mais avec un bord net.
     ⚠️ En flex wrap elles avaient des hauteurs irrégulières. On force une
     grille et on aligne les prix en bas. */
  .cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .card-p { display: flex; flex-direction: column; height: 100%; }
  .card-p .cp-d { flex: 1; }
  .card-p h3 { min-height: 34px; }
}

/* ⚠️ Le passage en grille a allongé le bloc (254 -> 390 px). On resserre les
   lignes : c'est la grille qui donne l'alignement net, pas la hauteur. */
@media (max-width: 700px) {
  .metier { padding: 12px 0; }
  .metier .metier-col + .metier-col { margin-top: 12px; }
  .metier-liste li { padding: 6px 0; font-size: 13.5px; }
  .metier-matiere li { padding: 6px 10px; font-size: 12.5px; }
  .metier .ch-anno { margin-bottom: 4px; }
}

/* ⚠️ BUG TROUVÉ : sur le monde « industriel », le bouton d'appel faisait 375 px
   dans un hero de 390 (padding 30 px de chaque côté + nowrap) -> la boîte
   débordait de 61 px, masqué par `overflow-x: clip`. Rendu serré et coupé.
   ⚠️ Correctif : sur mobile, les boutons du hero passent en PLEINE LARGEUR
   empilée, sans nowrap. C'est aussi plus facile au pouce. */
@media (max-width: 700px) {
  .hero-act, .hero-contrat .cta-row { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; }
  .hero-act .btn, .hero-contrat .cta-row .btn, .hero-contrat .cta-row .cta-alt {
    width: 100%; justify-content: center; white-space: normal; text-align: center;
    padding: 15px 18px; font-size: 15.5px;
  }
  [data-variante="terrain"] .btn-tel { padding: 15px 18px; font-size: 15px; }
  .hero { overflow: visible; }
  /* Le panneau tarifaire du hero : pleine largeur, pas de débordement. */
  .qbox, .hero .quote { max-width: 100%; }
}

/* ⚠️ Les cartes de la variante « industriel » débordaient (503 px dans 390).
   La règle de base les met en 3 colonnes (n° / titre / prix) : sur téléphone,
   le prix n'a plus la place. On passe sur DEUX lignes dans la même carte. */
@media (max-width: 700px) {
  [data-variante="terrain"] .card-p {
    grid-template-columns: 26px 1fr; gap: 3px 10px; padding: 13px 0;
  }
  [data-variante="terrain"] .card-p h3 { grid-column: 2; font-size: 15px; }
  [data-variante="terrain"] .card-p .cp-d { grid-column: 2; font-size: 12.5px; }
  [data-variante="terrain"] .card-p .cp-foot {
    grid-column: 2; grid-row: 3; flex-direction: row; align-items: baseline;
    justify-content: space-between; width: 100%; padding-top: 7px;
  }
  /* La carte elle-même ne peut plus dépasser son conteneur. */
  .card-p { min-width: 0; }
  .card-p h3, .card-p p, .card-p b { overflow-wrap: anywhere; }
}

/* ⚠️ DERNIER DÉTAIL D'ALIGNEMENT (mesuré) : le bandeau des engagements (.spec)
   et le pied de page (.foot) avaient leur contenu à x=0, alors que TOUT le reste
   de la page est à x=20. Ce décalage de 20 px se voit : ces deux blocs
   paraissent « sortir » de la colonne.
   ⚠️ On aligne leur contenu interne sur le même bord que le reste. */
@media (max-width: 700px) {
  .spec .wrap, .spec-in { padding-left: 20px; padding-right: 20px; }
  .spec-in span { padding-left: 0; }
  .foot .wrap { padding-left: 20px; padding-right: 20px; }
  .fbot { padding-left: 0; }
  /* Le bandeau urgence et l'en-tête : même bord aussi. */
  .topbar .wrap, .head .wrap { padding-left: 20px; padding-right: 20px; }
  .preview-bar { padding-left: 20px; padding-right: 20px; }
}