/* Hotelium — rythme des pages publiques (15 octobre 2026)
   ------------------------------------------------------------------
   Modèle : le schéma « Ce que fait un responsable énergie et RSE » de
   l'accueil (accueil-flux.css, classes .rr-*). Ses briques deviennent celles
   de tout le site public :

     1. une seule marge : celle du logo de l'en-tête (1200 px, 24 px de bord) ;
     2. une seule étiquette : chasse fixe, capitales, un petit trait devant ;
     3. un seul en-tête de section : le titre à gauche, l'explication à droite ;
     4. une seule carte : filet gris, angles de 14 px, légère montée au survol ;
     5. un seul rythme : 104 px entre deux bandes, une seule teinte de gris.

   Chargée APRÈS marque.css, sur les pages à en-tête public seulement
   (celles qui chargent site-shell.css). L'espace client n'est pas concerné.
   Les longs guides (/pages/*.html) gardent leur colonne de lecture ; seuls
   leurs encadrés et leurs boutons sont repris. */

html:root {
  --r-wrap: 1200px;
  --r-pad: 24px;
  --r-y: 104px;
  --r-gap: 56px;
  --r-card: 14px;
  --r-panel: 18px;
  --r-core: 22px;
  --r-soft: #F7F7F5;
  --r-shadow: 0 1px 2px rgba(17, 17, 17, .04);
  --r-shadow-up: 0 14px 30px -16px rgba(17, 17, 17, .25);
}
@media (max-width: 900px) { html:root { --r-y: 72px; --r-gap: 36px; --r-pad: 18px; } }

/* =====================================================================
   1. Une seule marge
   ===================================================================== */
html body :is(.wrap, .rr-wrap) {
  max-width: var(--r-wrap) !important;
  padding-left: var(--r-pad) !important;
  padding-right: var(--r-pad) !important;
  margin-left: auto !important; margin-right: auto !important;
}
/* L'en-tête photo garde sa propre mise en page */
html body .m-hero-text > .wrap { max-width: none !important; padding: 0 !important; margin: 0 !important; }

/* =====================================================================
   2. Une seule étiquette
   ===================================================================== */
html body :is(.section-label, .feat-label, .eyebrow, .kicker, .rr-kicker, .carbon-seo-label,
  .carbon-kicker, .resources-kicker, .hero-tag, .trust-title, .m-hero-text .tag) {
  display: flex !important; align-items: center; gap: 8px;
  justify-content: flex-start !important;
  margin: 0 0 16px !important; padding: 0 !important;
  font-family: var(--m-mono) !important; font-size: .74rem !important; font-weight: 500 !important;
  letter-spacing: .08em !important; text-transform: uppercase !important; line-height: 1.4;
  color: var(--m-ink-3) !important; background: none !important; border: 0 !important;
}
html body :is(.section-label, .feat-label, .eyebrow, .kicker, .rr-kicker, .carbon-seo-label,
  .carbon-kicker, .resources-kicker, .hero-tag, .trust-title, .m-hero-text .tag)::before {
  content: ''; flex: none; width: 18px; height: 1px; background: currentColor; display: block;
}
html body .trust .trust-title::before { display: none !important; }
/* Sur fond noir */
html body :is(.cta-band, .cta-final, .expertise-cta, .resources-cta, .r-core) :is(.section-label, .eyebrow, .kicker, .carbon-seo-label) {
  color: rgba(255, 255, 255, .6) !important; }

/* =====================================================================
   3. Un seul titre, un seul en-tête de section
   ===================================================================== */
html body :is(.section-h2, .feat-h2, .sec-head h2, .pa-head h2, .principle-inner h2, .aihuman-inner h2,
  .m-demo-head h2, .carbon-guide-panel h2, .carbon-seo-section h2, .carbon-faq h2, .carbon-seo > h2,
  .rr-head h2) {
  font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.06 !important;
  letter-spacing: -.03em !important; font-weight: 600 !important;
  color: var(--m-ink) !important; margin: 0 !important; text-align: left !important; max-width: 640px;
}

/* Le titre à gauche, l'explication à droite, alignés sur leur bas */
html body :is(.section-header, .section-intro, .sec-head, .pa-head, .m-demo-head) {
  display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  column-gap: 48px; row-gap: 0; align-items: end;
  max-width: none !important; width: 100%;
  margin: 0 0 var(--r-gap) !important; padding: 0 !important; text-align: left !important;
}
html body :is(.section-header, .section-intro, .sec-head, .pa-head, .m-demo-head) > * { grid-column: 1; align-self: start; margin-left: 0 !important; margin-right: 0 !important; }
html body :is(.section-header, .section-intro, .sec-head, .pa-head, .m-demo-head) > :is(.section-label, .kicker, .eyebrow) { grid-column: 1 / -1; }
html body :is(.section-header, .section-intro, .sec-head, .pa-head, .m-demo-head) > p:not(:is(.section-label, .kicker, .eyebrow)) {
  grid-column: 2; grid-row: 2; align-self: end;
  margin: 0 !important; max-width: 520px !important;
  font-size: 1.04rem !important; line-height: 1.65 !important; color: var(--m-ink-2) !important; text-align: left !important;
}
/* Sans étiquette, le paragraphe reste sur la ligne du titre */
html body :is(.section-header, .section-intro, .sec-head, .pa-head, .m-demo-head):not(:has(> :is(.section-label, .kicker, .eyebrow))) > p { grid-row: 1; }
@media (max-width: 900px) {
  html body :is(.section-header, .section-intro, .sec-head, .pa-head, .m-demo-head) { grid-template-columns: 1fr; }
  html body :is(.section-header, .section-intro, .sec-head, .pa-head, .m-demo-head) > p:not(:is(.section-label, .kicker, .eyebrow)) {
    grid-column: 1; grid-row: auto; margin-top: 16px !important; }
}

/* =====================================================================
   4. Une seule carte
   ===================================================================== */
html body :is(.source-card, .priority-guide, .resource-card, .featured-resource, .associate-card,
  .reference-card, .method-step, .step, .faq-item, .pa-card, .pa-step, .cn-card, .ia-card,
  .grid3 > .card, .carbon-seo-card, .tl-card, .ah-col, .carbon-guide-panel li a, .fv-white) {
  background: #FFFFFF !important;
  border: 1px solid var(--m-line) !important;
  border-radius: var(--r-card) !important;
  box-shadow: var(--r-shadow) !important;
  transition: border-color .2s ease, box-shadow .25s ease, transform .25s var(--m-ease, ease) !important;
}
html body :is(a.source-card, .priority-guide, .resource-card, .featured-resource, .cn-card, .pa-card,
  .carbon-guide-panel li a, .carbon-seo-card, .reference-card):hover {
  border-color: var(--m-line-2) !important; box-shadow: var(--r-shadow-up) !important; transform: translateY(-2px);
}
/* Les grands blocs (formulaires, tableaux, simulateurs) : même filet, angle un peu plus grand */
html body :is(.carbon-card, .sim-card, .sim-compare, .compare-wrap, .cn-form, .pa-form, .demo-shell, .transp-card,
  .tech-stats, .price-card) {
  border-radius: var(--r-panel) !important;
}
html body :is(.carbon-card, .sim-card, .sim-compare, .cn-form, .pa-form, .transp-card) {
  border: 1px solid var(--m-line) !important; box-shadow: var(--r-shadow) !important;
}
/* Les « étiquettes » dans une carte : chasse fixe, sans couleur */
html body :is(.sc-badge, .resource-badge, .pa-k, .sim-card-kicker, .cn-cat-k, .ref-num, .role-pill) {
  font-family: var(--m-mono) !important; font-size: .7rem !important; letter-spacing: .06em !important;
  text-transform: uppercase !important; color: var(--m-ink-3) !important; font-weight: 500 !important;
  background: none !important; border: 0 !important; padding: 0 !important;
}

/* Étapes numérotées : un numéro en chasse fixe, pas une pastille */
html body :is(.step-num, .how-num, .steps .num) {
  background: transparent !important; color: var(--m-ink-3) !important; border: 0 !important; box-shadow: none !important;
  font-family: var(--m-mono) !important; font-size: .78rem !important; font-weight: 500 !important; letter-spacing: .06em;
  width: auto !important; height: auto !important; min-width: 0 !important; border-radius: 0 !important;
  display: block !important; text-align: left !important; margin: 0 0 14px !important; padding: 0 !important; position: static !important;
}

/* =====================================================================
   5. Un seul rythme, une seule teinte
   ===================================================================== */
html body :is(.section, .feature-section, .how-section, .demo-band, .rr, .pa-sec, .associates-section,
  .references-section, .method-section, .compare-section, .faq-section, .principle, .aihuman, .r-band) {
  padding-top: var(--r-y) !important; padding-bottom: var(--r-y) !important;
}
html body :is(.bg-sage, .section-alt, .pa-soft, .bg-soft, .feature-section.bg-dark, .quote-section, .aihuman,
  .how-section, .demo-band, .rr, .principle, .references-section, .compare-section, .story, .transp-closed) {
  background: var(--r-soft) !important;
}
html body :is(.feature-section.bg-white, .bg-white, .pa-sec:not(.pa-soft), .associates-section, .method-section, .faq-section) {
  background: #FFFFFF !important;
}

/* =====================================================================
   6. Les encarts « Aller plus loin » : le bloc noir du schéma
   ===================================================================== */
html body :is(.carbon-seo-cta, .r-core) {
  background: var(--m-dark) !important; color: #FFFFFF !important;
  border: 0 !important; border-radius: var(--r-core) !important;
  box-shadow: 0 30px 60px -24px rgba(17, 17, 17, .45) !important;
}
html body :is(.carbon-seo-cta, .r-core) :is(h2, h3, strong) { color: #FFFFFF !important; }
html body :is(.carbon-seo-cta, .r-core) p { color: rgba(255, 255, 255, .72) !important; }
html body :is(.carbon-seo-cta, .r-core) .carbon-seo-label { color: rgba(255, 255, 255, .6) !important; }
html body :is(.carbon-seo-cta, .r-core) :is(.carbon-btn.primary, .btn-white, .btn-primary) {
  background: #FFFFFF !important; color: var(--m-ink) !important; border-color: #FFFFFF !important; }
html body :is(.carbon-seo-cta, .r-core) :is(.carbon-btn.secondary, .btn-outline, .btn-ghost) {
  background: transparent !important; color: #FFFFFF !important; border: 1px solid rgba(255, 255, 255, .45) !important; }

/* Appels finaux : un bouton ne se casse pas sur deux lignes */
html body :is(.cta-band, .cta-final, .expertise-cta, .resources-cta) .btn {
  white-space: nowrap; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px; }
html body :is(.cta-band, .cta-final, .expertise-cta, .resources-cta) h2 {
  font-size: clamp(2rem, 3.6vw, 3rem) !important; line-height: 1.06 !important; letter-spacing: -.03em !important; font-weight: 600 !important; }

/* Guides : le bouton d'appel restait gris sur noir */
html body .btn-primary-sm { background: var(--m-ink) !important; color: #FFFFFF !important; border-color: var(--m-ink) !important; }
html body .btn-primary-sm:hover { background: #333333 !important; color: #FFFFFF !important; }
html body .article-cta { border-radius: var(--r-panel) !important; border: 1px solid var(--m-line) !important; background: var(--r-soft) !important; }

/* =====================================================================
   7. Accueil et pages principales : ce que le gabarit ne couvrait pas
   ===================================================================== */
/* Un titre de bloc garde de l'air sous lui (hors en-tête à deux colonnes) */
html body :is(.feat-h2, .principle-inner h2, .aihuman-inner h2) { margin: 0 0 20px !important; }
html body .feature-grid { column-gap: 72px !important; }

/* « Ils nous font confiance » : l'étiquette reste au centre, au-dessus des logos */
html body .trust .trust-title { justify-content: center !important; margin-bottom: 26px !important; }

/* Bandes sans fond propre */
html body .r-band { background: #FFFFFF; }

/* Bandes autrefois sombres : le texte des listes était resté blanc */
html body .feature-section.bg-dark .feat-checks li span { color: var(--m-ink-2) !important; }
html body .feature-section.bg-dark .feat-checks strong { color: var(--m-ink) !important; }
html body .feature-section.bg-dark .tech-stat-lbl { color: var(--m-ink-3) !important; }
html body .feature-section.bg-dark .tech-stat-num .accent { color: var(--m-ink) !important; }

/* Les étapes « Un suivi chaque mois » : les colonnes du schéma (.rr-roles) */
html body .how-section .steps {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 0 !important;
  border-top: 1px solid var(--m-line-2);
}
html body .how-section .steps::before { display: none !important; }
html body .how-section .steps > .step {
  text-align: left !important; background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 26px 24px 4px 0 !important; transform: none !important;
}
html body .how-section .steps > .step + .step { padding-left: 24px !important; border-left: 1px solid var(--m-line) !important; }
html body .how-section .step-num::before { content: '0'; }
html body .how-section .step-title { font-size: 1.08rem !important; font-weight: 600 !important; letter-spacing: -.01em; margin: 0 0 8px !important; color: var(--m-ink); }
html body .how-section .step-text { font-size: .9rem !important; line-height: 1.6 !important; color: var(--m-ink-2) !important; margin: 0; }
@media (max-width: 900px) {
  html body .how-section .steps { grid-template-columns: 1fr !important; }
  html body .how-section .step, html body .how-section .steps > .step + .step { padding: 22px 0 18px !important; border-left: 0 !important; border-bottom: 1px solid var(--m-line) !important; }
}

/* Grilles de cartes : toute la largeur, plus de retrait */
html body :is(.sources-grid, .priority-guides) { max-width: none !important; margin: 0 !important; width: 100%; }
html body .priority-guides { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 12px !important; }
html body .priority-guides > :first-child { grid-column: span 2; }
html body .sources-grid { gap: 12px !important; }
html body :is(.priority-guide, .source-card) { padding: 22px 22px 20px !important; margin: 0 !important; }
@media (max-width: 1024px) { html body .priority-guides { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 720px) {
  html body .priority-guides, html body .sources-grid { grid-template-columns: 1fr !important; }
  html body .priority-guides > :first-child { grid-column: auto; }
}

/* Les notes sous un bloc : à gauche, sur la marge, comme .rr-note */
html body .r-note { max-width: 760px !important; margin: 40px 0 0 !important; text-align: left !important;
  font-size: .9rem !important; line-height: 1.6 !important; color: var(--m-ink-3) !important; }

/* Panneau « Empreinte carbone hôtel » : l'en-tête du schéma, puis la grille */
html body .carbon-guide-panel {
  display: grid !important; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: 48px; align-items: end;
  max-width: var(--r-wrap) !important; margin: 0 auto !important; padding: var(--r-y) var(--r-pad) !important;
  background: transparent !important; border: 0 !important; box-shadow: none !important; box-sizing: border-box; width: 100%;
}
html body .carbon-guide-panel > * { grid-column: 1; }
html body .carbon-guide-panel > p { grid-column: 2; grid-row: 1; margin: 0 !important; max-width: 520px;
  font-size: 1.04rem !important; line-height: 1.65 !important; color: var(--m-ink-2) !important; }
html body .carbon-guide-panel > ul {
  grid-column: 1 / -1; grid-row: 2; margin: var(--r-gap) 0 0 !important; padding: 0 !important; list-style: none;
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important;
}
html body .carbon-guide-panel > :not(h2):not(p):not(ul) { grid-column: 1 / -1; }
html body .carbon-guide-panel li { margin: 0 !important; }
html body .carbon-guide-panel li a {
  display: flex !important; align-items: center; justify-content: space-between; gap: 14px; height: 100%; box-sizing: border-box;
  padding: 16px 18px !important; font-weight: 500; color: var(--m-ink) !important; text-decoration: none !important;
}
html body .carbon-guide-panel li a::after { content: '→'; flex: none; color: var(--m-ink-3); transition: transform .2s var(--m-ease, ease); }
html body .carbon-guide-panel li a:hover::after { transform: translateX(3px); color: var(--m-ink); }
@media (max-width: 900px) {
  html body .carbon-guide-panel { grid-template-columns: 1fr; }
  html body .carbon-guide-panel > p { grid-column: 1; grid-row: auto; margin-top: 16px !important; }
  html body .carbon-guide-panel > ul { grid-row: auto; grid-template-columns: 1fr !important; }
}

/* =====================================================================
   8. Pages sans photo d'en-tête : le texte part de la marge, comme ailleurs
   ===================================================================== */
html body :is(.ia-hero, .cn-hero, .pa-hero) {
  text-align: left !important; padding: 96px 0 72px !important; background: #FFFFFF !important;
  border-bottom: 1px solid var(--m-line);
}
html body :is(.ia-hero, .cn-hero, .pa-hero) h1 {
  margin: 0 0 22px !important; max-width: 16ch !important; text-align: left !important;
  font-size: clamp(36px, 4.6vw, 60px) !important; font-weight: 600 !important; line-height: 1.05 !important; letter-spacing: -.025em !important;
}
html body :is(.ia-hero, .cn-hero, .pa-hero) h1 em { color: inherit !important; font-style: normal; }
html body :is(.ia-hero, .cn-hero, .pa-hero) p:not(.section-label) {
  margin: 0 0 28px !important; max-width: 620px !important; text-align: left !important;
  font-size: 1.1rem !important; line-height: 1.6 !important; color: var(--m-ink-2) !important; }
html body :is(.ia-hero, .cn-hero, .pa-hero) :is(.pa-cta, .hero-btns, div:has(> .btn)) { justify-content: flex-start !important; }

/* Contenus en retrait ou centrés sous un titre à gauche : on les ramène à la marge */
html body :is(.ia-doc, .cn-cat, .pa-grid, .pa-steps, .pa-promise, .pa-faq, .pa-form, .timeline, .transp-grid,
  .associates-grid, .references-grid, .method-grid, .method-principle, .compare-wrap, .faq, .faq-list) {
  margin-left: 0 !important; margin-right: auto !important;
}
html body :is(.cn-cat, .pa-grid, .pa-steps, .transp-grid, .associates-grid, .references-grid, .method-grid, .compare-wrap) { max-width: none !important; }
html body :is(.ia-doc, .pa-faq, .faq, .faq-list, .pa-form, .timeline) { max-width: 860px !important; }
html body .method-principle { text-align: left !important; }
html body .cn-body { background: var(--r-soft) !important; padding: var(--r-y) 0 !important; }
html body .cn-cat { margin-bottom: 64px !important; }
html body .cn-cat:last-child { margin-bottom: 0 !important; }
html body .cn-cat > h2 { font-size: 1.5rem !important; font-weight: 600 !important; letter-spacing: -.02em !important; margin: 0 0 6px !important; }
html body .cn-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 12px !important; }
html body .ia-body { background: var(--r-soft) !important; padding: var(--r-y) 0 !important; }

/* Partenaires : plus de vert hors des données ; numéros d'étape en chasse fixe */
html body .pa-promise div { border-left: 1px solid var(--m-line-2) !important; padding: 4px 0 4px 18px !important; }
html body .pa-step::before {
  content: '0' counter(s) !important; display: block !important; width: auto !important; height: auto !important;
  background: none !important; color: var(--m-ink-3) !important; border-radius: 0 !important;
  font-family: var(--m-mono); font-size: .78rem; font-weight: 500 !important; letter-spacing: .06em; margin: 0 0 14px !important;
}
html body .pa-faq details { border-radius: var(--r-card) !important; border-color: var(--m-line) !important; }

/* Méthodologie : la frise garde ses repères, en chasse fixe */
html body .tl-node { font-family: var(--m-mono) !important; font-weight: 500 !important; font-size: 1rem !important;
  background: #FFFFFF !important; color: var(--m-ink) !important; border: 1px solid var(--m-line-2) !important; border-radius: 12px !important; }
html body .tl-step { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; }
html body .tl-step.core .tl-node { background: var(--m-dark) !important; color: #FFFFFF !important; border-color: var(--m-dark) !important; }
html body .tl-step.core .tl-card { background: #FFFFFF !important; border-color: var(--m-line-2) !important; }
html body .tl-legend { justify-content: flex-start !important; }

/* Tarifs : le choix mensuel / annuel ne colle plus à la photo */
html body .pricing-section { padding-top: 56px !important; padding-bottom: var(--r-y) !important; }

/* Simulateurs et outils : l'introduction part de la marge de la colonne */
html body .carbon-seo-intro { text-align: left !important; margin: 0 0 var(--r-gap) !important; max-width: 820px !important; }
html body .carbon-seo-intro p { margin: 18px 0 0 !important; text-align: left !important; }
html body .carbon-seo { margin-top: var(--r-y) !important; }
/* Panneau des guides : seul le premier paragraphe va à droite du titre */
html body .carbon-guide-panel > p ~ p { grid-column: 1 / -1 !important; grid-row: auto !important; margin-top: 24px !important; max-width: 760px;
  font-size: .9rem !important; color: var(--m-ink-3) !important; }
html body .carbon-guide-panel > ul ~ p { grid-row: 3 !important; }
html body .carbon-shell .carbon-guide-panel { padding-left: 0 !important; padding-right: 0 !important; }

/* Tarifs : le titre de l'en-tête porte une classe de titre de section, il garde la taille d'un h1 */
html body .m-hero-text h1.section-h2 {
  font-size: clamp(36px, 4.2vw, 60px) !important; line-height: 1.05 !important; letter-spacing: -.025em !important;
  margin: 0 0 18px !important; max-width: 620px; }

/* Page Simulateurs : les cartes et les blocs suivent la marge commune */
html body :is(.sim-hub, .sim-hub ~ .sim-section) {
  max-width: var(--r-wrap) !important; padding-left: var(--r-pad) !important; padding-right: var(--r-pad) !important; box-sizing: border-box; }
html body .sim-hub ~ .sim-section { margin-top: var(--r-y) !important; }
html body .sim-hub ~ .sim-section.sim-section-last { margin-bottom: var(--r-y) !important; }
html body .sim-card { border-radius: var(--r-panel) !important; }

/* Boutons principaux des simulateurs : le noir de la marque, pas un gris terne */
html body :is(.carbon-btn.primary, .carbon-submit:not(:disabled)) { background: var(--m-ink) !important; color: #FFFFFF !important; border-color: var(--m-ink) !important; }
html body :is(.carbon-btn.primary, .carbon-submit:not(:disabled)):hover { background: #333333 !important; }
html body .carbon-btn.primary:disabled, html body .carbon-btn.primary[aria-disabled="true"] { background: var(--m-ink-3) !important; border-color: var(--m-ink-3) !important; }
html body :is(.carbon-btn, .carbon-submit) { border-radius: 999px !important; }

/* Index des guides (accueil) : les colonnes du schéma, une ligne par guide */
html body .r-index { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--m-line-2); }
html body .r-index > div { padding: 26px 24px 4px 0; }
html body .r-index > div + div { padding-left: 24px; border-left: 1px solid var(--m-line); }
html body .r-index h3 { margin: 0 0 12px; font-family: var(--m-mono); font-size: .72rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase; color: var(--m-ink-3); }
html body .r-index ul { list-style: none; margin: 0; padding: 0; }
html body .r-index li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--m-line); color: var(--m-ink); text-decoration: none; font-weight: 500; font-size: .95rem; }
html body .r-index li a::after { content: '→'; flex: none; color: var(--m-ink-3); transition: transform .2s var(--m-ease, ease); }
html body .r-index li a:hover::after { transform: translateX(3px); color: var(--m-ink); }
html body .r-index + .r-note a { color: var(--m-ink); font-weight: 500; text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
  html body .r-index { grid-template-columns: 1fr; }
  html body .r-index > div, html body .r-index > div + div { padding: 22px 0 4px; border-left: 0; }
}