/* ================================================================
   ARGIBAT NEW — REDESIGN 2026
   Remplace le thème Bootstrap 3 / Drupal 7 par un design moderne
   ================================================================ */

/* ── Variables ── */
:root {
  --bg:          #F2EFEB;
  --surface:     #FAFAF8;
  --text:        #1A1814;
  --text-mid:    #5C4B3B;
  --text-light:  #8A7D72;
  --accent:      #A07850;
  --accent-deep: #7A5C3C;
  --border:      #D8D2CC;
  --dark-bg:     #111009;
  --dark-surface:#1A1714;
  --dark-text:   #EDE8E2;
  --dark-mid:    #B5A898;
  --dark-light:  #7A6F64;
  --dark-accent: #C49060;
  --dark-border: #2E2A24;
  --hero-overlay:#14100C;
  --nav-h:       68px;
  --max-w:       1200px;
}

/* Dark mode auto désactivé — le site utilise toujours le thème clair */
:root[data-theme="dark"] {
  --bg:          #111009;
  --surface:     #1A1714;
  --text:        #EDE8E2;
  --text-mid:    #B5A898;
  --text-light:  #7A6F64;
  --accent:      #C49060;
  --accent-deep: #D4A870;
  --border:      #2E2A24;
}
:root[data-theme="light"] {
  --bg:          #F2EFEB;
  --surface:     #FAFAF8;
  --text:        #1A1814;
  --text-mid:    #5C4B3B;
  --text-light:  #8A7D72;
  --accent:      #A07850;
  --accent-deep: #7A5C3C;
  --border:      #D8D2CC;
}

/* ── Reset de base ── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  background: var(--bg) !important;
  color: var(--text) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  -webkit-font-smoothing: antialiased;
  padding-top: 0 !important;
  margin-top: 0 !important;
}

#wrapper {
  background: var(--bg);
  min-height: 100vh;
}

/* ── Accessibilité ── */
.element-invisible { position: absolute !important; clip: rect(1px,1px,1px,1px) !important; }
.element-invisible.element-focusable:focus { clip: auto !important; position: static !important; }

/* ================================================================
   HEADER / NAV
   ================================================================ */

#header {
  position: fixed !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  z-index: 1000 !important;
  height: var(--nav-h) !important;
  background: transparent !important;
  box-shadow: none !important;
  border-bottom: 1px solid transparent !important;
  transition: background .3s, border-color .3s !important;
}

#header.scrolled {
  background: color-mix(in srgb, var(--bg) 93%, transparent) !important;
  border-bottom-color: var(--border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Non-front: nav toujours solide */
body:not(.front) #header {
  background: color-mix(in srgb, var(--bg) 97%, transparent) !important;
  border-bottom-color: var(--border) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

/* Container nav */
#header .container.md {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  height: var(--nav-h) !important;
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 48px !important;
  margin: 0 !important;
}

/* Unwrap .navbar pour que logo + links soient enfants directs du flex */
#header .navbar.navbar-default {
  display: contents !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: unset !important;
}

/* Logo */
#header .navbar-header {
  order: 1 !important;
  flex-shrink: 0 !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  float: none !important;
}

#header .navbar-brand {
  display: flex !important;
  align-items: center !important;
  height: var(--nav-h) !important;
  padding: 0 !important;
  background: transparent !important;
  float: none !important;
}

#header .navbar-brand img {
  height: 40px !important;
  width: auto !important;
  max-width: 180px !important;
  display: block !important;
  transition: opacity .25s !important;
}

#header .navbar-brand img:hover { opacity: .75 !important; }

/* Liens de navigation */
#header #navbar {
  order: 2 !important;
  flex: 1 !important;
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  float: none !important;
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 0 0 24px !important;
}

#header .nav.navbar-nav {
  display: flex !important;
  gap: 28px !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  list-style: none !important;
}

#header .nav.navbar-nav > li {
  float: none !important;
  display: block !important;
}

#header .nav.navbar-nav > li > a {
  font-size: 13px !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  font-weight: 400 !important;
  padding: 6px 0 !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  transition: color .2s !important;
  line-height: 1 !important;
}

/* Couleurs des liens selon contexte */
body.front #header:not(.scrolled) .nav.navbar-nav > li > a {
  color: rgba(237,232,226,.55) !important;
}
body.front #header.scrolled .nav.navbar-nav > li > a,
body:not(.front) #header .nav.navbar-nav > li > a {
  color: var(--text-mid) !important;
}
#header .nav.navbar-nav > li > a:hover,
#header .nav.navbar-nav > li.active > a,
#header .nav.navbar-nav > li.active-trail > a {
  color: var(--accent) !important;
  background: transparent !important;
}

/* Dropdown */
#header .dropdown-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.08) !important;
  padding: 8px 0 !important;
  min-width: 220px !important;
  margin-top: 8px !important;
}

#header .dropdown-menu li a {
  font-size: 12px !important;
  letter-spacing: .06em !important;
  color: var(--text-mid) !important;
  padding: 9px 20px !important;
  background: transparent !important;
  border: none !important;
  text-decoration: none !important;
  display: block !important;
  transition: color .15s, background .15s !important;
}

#header .dropdown-menu li a:hover {
  color: var(--accent) !important;
  background: var(--bg) !important;
}

/* Séparateur sous-menu nolink */
#header .dropdown-toggle.nolink {
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--text-light) !important;
  padding: 12px 20px 6px !important;
  display: block !important;
  cursor: default !important;
}

/* Lang switcher */
#header #lang {
  order: 3 !important;
  flex-shrink: 0 !important;
  margin-left: 28px !important;
  padding-left: 20px !important;
  border-left: 1px solid var(--border) !important;
}

#header #lang .language-switcher-locale-url {
  display: flex !important;
  gap: 12px !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

#header #lang .language-switcher-locale-url li a {
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: color .2s !important;
  display: block !important;
  padding: 2px 0 !important;
}

body.front #header:not(.scrolled) #lang .language-switcher-locale-url a {
  color: rgba(237,232,226,.35) !important;
}
body.front #header.scrolled #lang .language-switcher-locale-url a,
body:not(.front) #header #lang .language-switcher-locale-url a {
  color: var(--text-light) !important;
}
#header #lang .language-switcher-locale-url a.active,
#header #lang .language-switcher-locale-url a:hover {
  color: var(--accent) !important;
}

/* Toggle mobile */
#header .navbar-toggle {
  display: none !important;
  order: 4 !important;
  background: transparent !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 8px 10px !important;
  margin: 0 !important;
}

#header .navbar-toggle .icon-bar {
  background: var(--text) !important;
  display: block !important;
  height: 1px !important;
  width: 22px !important;
  margin: 5px 0 !important;
  border-radius: 0 !important;
}

/* ================================================================
   HERO — PAGE D'ACCUEIL (body.front)
   ================================================================ */

body.front #main.main-container {
  padding: 0 !important;
  margin: 0 !important;
}

body.front #slider {
  position: relative !important;
  height: 100vh !important;
  min-height: 600px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--hero-overlay) !important;
}

/* Slides (images en arrière-plan) */
body.front #slider .slide {
  position: absolute !important;
  inset: 0 !important;
  background-size: cover !important;
  background-position: center !important;
  opacity: 0 !important;
  transition: opacity 1.4s ease !important;
}

/* Fallback CSS : 4e enfant de #slider = premier .slide */
body.front #slider .slide:nth-child(4),
body.front #slider .slide.active {
  opacity: .78 !important;
}

/* Overlay dégradé du bas */
body.front #slider::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    to top,
    rgba(10,7,4,.90) 0%,
    rgba(10,7,4,.35) 40%,
    rgba(10,7,4,.0) 75%
  ) !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Paralax images désactivées */
body.front .visuels { display: none !important; }

/* Contenu hero */
body.front #slider .container.md {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 48px 64px !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  flex: 1 !important;
}

body.front #slider h1 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif !important;
  font-size: clamp(58px, 8.5vw, 108px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: .95 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  color: var(--dark-text) !important;
  margin: 0 0 20px !important;
  max-width: 780px !important;
  text-shadow: none !important;
}

/* Masquer les éléments décoratifs parallax (stellar plugin) */
body.front .visuels,
body.front #argile1,
body.front #argile2,
body.front #argile3,
body.front #masque {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Sous-titre hero : on l'injecte via le premier paragraphe de #about via CSS (non visible ici) */

/* ================================================================
   ABOUT — PAGE D'ACCUEIL
   ================================================================ */

body.front #about {
  background: var(--bg) !important;
  padding: 72px 48px !important;
  position: relative !important;
  margin: 0 !important;
}

body.front #about > .visuels { display: none !important; }

/* Argile3.jpg comme accent visuel du #about (côté droit desktop) */
body.front #about::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important; right: 0 !important;
  width: 28% !important;
  height: 100% !important;
  background-image: url('../img/argile3.jpg') !important;
  background-size: cover !important;
  background-position: center 30% !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

body.front #about .container.md {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 !important;
  width: 100% !important;
  position: relative !important;
  z-index: 1 !important;
}

body.front #about .row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
}

body.front #about .col-md-10.col-md-offset-2 {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 80px !important;
}

body.front #about h2 {
  font-family: "Palatino Linotype", Palatino, Georgia, serif !important;
  font-size: clamp(26px, 3vw, 42px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  line-height: 1.2 !important;
  color: var(--text) !important;
  text-shadow: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  grid-column: 1 !important;
  margin: 0 0 24px !important;
  text-wrap: balance !important;
  border: none !important;
  padding: 0 !important;
}

body.front #about .body {
  grid-column: 2 !important;
  margin: 0 !important;
  border-left: 1px solid var(--border) !important;
  padding-left: 48px !important;
}

body.front #about .body p {
  font-size: 15px !important;
  line-height: 1.78 !important;
  color: var(--text-mid) !important;
  margin-bottom: 14px !important;
}

body.front #about .body strong {
  color: var(--text) !important;
  font-weight: 500 !important;
}

/* ================================================================
   NEWS — PAGE D'ACCUEIL + LISTING
   ================================================================ */

body.front #news {
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  padding: 56px 48px !important;
  position: relative !important;
  margin: 0 !important;
}

body.front #news > .visuels { display: none !important; }

body.front #news .container.md {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Titre section news */
body.front #news::before {
  display: none;
}

body.front #news .block-views::before {
  content: 'Actualités' !important;
  display: block !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 10px !important;
}

/* ── Grille news accueil : 3 cartes égales ── */
body.front #news .view-content.row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: auto !important;
  gap: 3px !important;
  float: none !important;
  margin: 0 !important;
  align-items: start !important;
}

body.front #news .view-content.row::before,
body.front #news .view-content.row::after {
  display: none !important;
}

/* Toutes les cartes identiques */
body.front article.col-md-4.news {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: block !important;
  transition: opacity .25s !important;
  min-height: 0 !important;
  height: auto !important;
}
body.front article.col-md-4.news:hover { opacity: .82 !important; }
body.front article.col-md-4.news a { text-decoration: none !important; color: inherit !important; display: block !important; }

body.front article.col-md-4.news img {
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 3/2 !important;
}
body.front article.col-md-4.news .content {
  padding: 18px 22px !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
  background: var(--surface) !important;
}
body.front article.col-md-4.news .content h2 {
  font-family: "Palatino Linotype", Palatino, Georgia, serif !important;
  font-size: clamp(15px, 1.4vw, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--text) !important;
  margin: 0 0 10px !important;
  padding: 0 !important; border: none !important;
  font-style: normal !important; text-shadow: none !important;
}
body.front article.col-md-4.news .content p {
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--text-mid) !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

/* ================================================================
   PAGES LISTING (actualites.html, nieuws.html, news.html)
   ================================================================ */

body:not(.front) main#main.main-container {
  margin-top: 0 !important;
  padding-top: calc(var(--nav-h) + 32px) !important;
  background: var(--bg) !important;
  min-height: 80vh !important;
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 48px !important;
  padding-right: 48px !important;
}

body:not(.front) .main-container .container.md {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  width: 100% !important;
}

/* Titre de page */
body:not(.front) h1.page-header,
body:not(.front) #block-views-actualit-se-block-1 > h2,
body:not(.front) .view > h2 {
  font-family: "Palatino Linotype", Palatino, Georgia, serif !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  border: none !important;
  padding: 0 0 32px !important;
  margin: 0 0 40px !important;
  border-bottom: 1px solid var(--border) !important;
  text-shadow: none !important;
}

/* Grille listing */
body:not(.front) .view-content.row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 3px !important;
  float: none !important;
  margin: 0 !important;
}

body:not(.front) .view-content.row::before,
body:not(.front) .view-content.row::after {
  display: none !important;
}

body:not(.front) article.col-md-4.news {
  float: none !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  background: var(--surface) !important;
  overflow: hidden !important;
  transition: opacity .25s !important;
}

body:not(.front) article.col-md-4.news:hover { opacity: .82 !important; }

body:not(.front) article.col-md-4.news a {
  display: block !important;
  text-decoration: none !important;
  color: inherit !important;
}

body:not(.front) article.col-md-4.news img {
  width: 100% !important;
  display: block !important;
  object-fit: cover !important;
  aspect-ratio: 3/2 !important;
  border-radius: 0 !important;
}

body:not(.front) article.col-md-4.news .content {
  padding: 20px 22px !important;
  border: 1px solid var(--border) !important;
  border-top: none !important;
}

body:not(.front) article.col-md-4.news .content h2 {
  font-family: "Palatino Linotype", Palatino, Georgia, serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  margin: 0 0 10px !important;
  border: none !important;
  padding: 0 !important;
  text-shadow: none !important;
  line-height: 1.3 !important;
}

body:not(.front) article.col-md-4.news .content p {
  font-size: 13.5px !important;
  color: var(--text-mid) !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* ================================================================
   TYPOGRAPHIE GLOBALE — RESET brandon_grotesque sur non-front
   ================================================================ */

body:not(.front) h1,
body:not(.front) h2,
body:not(.front) h3,
body:not(.front) h4,
body:not(.front) h5,
body:not(.front) h6 {
  font-family: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-weight: 400 !important;
}

/* ================================================================
   PAGES ARTICLE / NODE
   ================================================================ */

body:not(.front) .title {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
}

body:not(.front) .title h1 {
  text-align: left !important;
}

body:not(.front) article.node {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 0 48px !important;
  background: transparent !important;
}

/* Switcher langue sur pages internes */
body:not(.front) ul.language-switcher-locale-url {
  display: flex !important;
  gap: 16px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 32px !important;
}

body:not(.front) ul.language-switcher-locale-url li a {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--text-light) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 2px !important;
  transition: color .2s, border-color .2s !important;
}

body:not(.front) ul.language-switcher-locale-url li a.active,
body:not(.front) ul.language-switcher-locale-url li a:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* Field body */
body:not(.front) .field-item {
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Breadcrumb */
body:not(.front) .breadcrumb {
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--text-light) !important;
  background: transparent !important;
  padding: 0 0 20px !important;
  margin: 0 0 8px !important;
  border-radius: 0 !important;
  border: none !important;
}

body:not(.front) .breadcrumb a {
  color: var(--text-light) !important;
  text-decoration: none !important;
}
body:not(.front) .breadcrumb a:hover { color: var(--accent) !important; }

/* Catégorie */
body:not(.front) .category {
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
  margin-bottom: 16px !important;
}

/* H1 article */
body:not(.front) article.node h1,
body:not(.front) .field-item h1 {
  font-family: "Palatino Linotype", Palatino, Georgia, serif !important;
  font-size: clamp(32px, 4vw, 52px) !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  color: var(--text) !important;
  margin: 0 0 28px !important;
  padding: 0 !important;
  border: none !important;
  text-shadow: none !important;
  text-wrap: balance !important;
}

/* H2 article */
body:not(.front) .field-item h2 {
  font-family: "Palatino Linotype", Palatino, Georgia, serif !important;
  font-size: clamp(20px, 2.5vw, 30px) !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  margin: 48px 0 18px !important;
  padding: 0 !important;
  border: none !important;
  text-shadow: none !important;
  line-height: 1.25 !important;
}

/* H3 article */
body:not(.front) .field-item h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  color: var(--text) !important;
  margin: 32px 0 12px !important;
  text-transform: none !important;
}

/* Paragraphes */
body:not(.front) .field-item p {
  font-size: 16px !important;
  line-height: 1.78 !important;
  color: var(--text-mid) !important;
  margin-bottom: 18px !important;
  max-width: 68ch !important;
}

body:not(.front) .field-item strong { color: var(--text) !important; font-weight: 500 !important; }
body:not(.front) .field-item em { font-style: italic !important; }

/* Liens dans contenu */
body:not(.front) .field-item a {
  color: var(--accent) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}

body:not(.front) .field-item a:hover { color: var(--accent-deep) !important; }

/* Figures */
body:not(.front) figure,
.field-item figure {
  margin: 36px 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

body:not(.front) figure img,
.field-item figure img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 0 !important;
}

body:not(.front) figcaption {
  font-size: 13px !important;
  color: var(--text-light) !important;
  margin-top: 8px !important;
  line-height: 1.5 !important;
  font-style: italic !important;
}

/* Listes */
body:not(.front) .field-item ul,
body:not(.front) .field-item ol {
  padding-left: 24px !important;
  margin-bottom: 18px !important;
  color: var(--text-mid) !important;
}

body:not(.front) .field-item li {
  line-height: 1.75 !important;
  margin-bottom: 6px !important;
  font-size: 15.5px !important;
}

/* Callout / encadrés spéciaux */
.callout-buildwise {
  background: var(--surface) !important;
  border-left: 3px solid var(--accent) !important;
  padding: 20px 24px !important;
  margin: 32px 0 !important;
  font-size: 14px !important;
  color: var(--text-mid) !important;
  border-radius: 0 !important;
}

/* Grille photos chantier */
.photo-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  margin: 32px 0 !important;
}

.photo-grid img {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
}

/* Credit block */
.credit-block {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  padding: 20px 24px !important;
  margin: 32px 0 !important;
  font-size: 14px !important;
  color: var(--text-mid) !important;
}

/* ================================================================
   PAGES PRODUITS — sections spécifiques
   ================================================================ */

/* Intro teaser : 2 colonnes flex */
#intro-teaser {
  padding: 56px 48px !important;
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  border-bottom: 1px solid var(--border) !important;
}

#intro-teaser .row {
  display: flex !important;
  gap: 64px !important;
  align-items: flex-start !important;
  float: none !important;
}

#intro-teaser .col-sm-6 {
  float: none !important;
  width: auto !important;
  flex: 1 !important;
  padding: 0 !important;
}

#intro-teaser img {
  max-height: 80px !important;
  width: auto !important;
  display: block !important;
  margin-bottom: 16px !important;
}

#intro-teaser .lead {
  font-family: "Palatino Linotype", Palatino, Georgia, serif !important;
  font-size: clamp(18px, 2vw, 26px) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--text) !important;
  line-height: 1.35 !important;
  margin: 0 !important;
}

#intro-teaser p:not(.lead) {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--text-mid) !important;
  margin: 0 !important;
}

/* Intro body */
#intro-body {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 56px 48px !important;
}

#intro-body p {
  font-size: 15.5px !important;
  line-height: 1.78 !important;
  color: var(--text-mid) !important;
  margin-bottom: 16px !important;
  max-width: 72ch !important;
}

#intro-body h4 {
  font-family: "Palatino Linotype", Palatino, Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 400 !important;
  color: var(--text) !important;
  margin: 40px 0 14px !important;
  text-transform: none !important;
  letter-spacing: normal !important;
}

#intro-body a { color: var(--accent) !important; }

/* Sections photos / manual / video produit */
#photos, #manual, #video, #projet, #swatch {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  padding: 40px 48px !important;
}

#photos { border-top: 1px solid var(--border) !important; }

/* Couleurs EasyClay (swatches) */
#swatch { display: block !important; margin: 0 !important; padding: 24px 0 0 !important; }
/* Remplace gap par marges pour éviter le décalage flex-wrap */
#swatch .row { display: flex !important; flex-wrap: wrap !important; gap: 0 !important; float: none !important; margin: 0 0 -8px 0 !important; padding: 0 !important; }
#swatch .color { float: none !important; width: auto !important; padding: 0 !important; margin: 0 8px 8px 0 !important; }
#swatch .color_item {
  width: 80px !important;
  height: 80px !important;
  display: flex !important;
  align-items: flex-end !important;
  padding: 6px !important;
}
#swatch .color_item span {
  font-size: 10px !important;
  letter-spacing: .06em !important;
  color: rgba(0,0,0,.4) !important;
  text-transform: uppercase !important;
}

/* ================================================================
   PAGES PRODUITS — tableaux
   ================================================================ */

body:not(.front) .field-item table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 14px !important;
  margin: 24px 0 !important;
  overflow-x: auto !important;
  display: block !important;
}

body:not(.front) .field-item th {
  background: var(--surface) !important;
  color: var(--text) !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  text-align: left !important;
}

body:not(.front) .field-item td {
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--border) !important;
  color: var(--text-mid) !important;
  vertical-align: top !important;
}

body:not(.front) .field-item tr:last-child td { border-bottom: none !important; }

/* Téléchargement de fichiers */
body:not(.front) .file a {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: var(--accent) !important;
  text-decoration: none !important;
  border: 1px solid var(--border) !important;
  padding: 8px 16px !important;
  margin: 8px 0 !important;
  transition: border-color .2s !important;
}

body:not(.front) .file a:hover { border-color: var(--accent) !important; }

/* ================================================================
   FORMULAIRES (Contact, Devis/Quote)
   ================================================================ */

.webform-client-form input[type="text"],
.webform-client-form input[type="email"],
.webform-client-form input[type="tel"],
.webform-client-form textarea,
.webform-client-form select,
form input[type="text"],
form input[type="email"],
form input[type="tel"],
form textarea,
form select {
  width: 100% !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 0 !important;
  padding: 12px 16px !important;
  font-size: 15px !important;
  color: var(--text) !important;
  font-family: inherit !important;
  transition: border-color .2s !important;
  box-shadow: none !important;
  outline: none !important;
  margin-bottom: 4px !important;
}

form input:focus, form textarea:focus, form select:focus {
  border-color: var(--accent) !important;
  box-shadow: none !important;
  outline: none !important;
}

form label {
  display: block !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  color: var(--text-light) !important;
  margin-bottom: 8px !important;
  margin-top: 20px !important;
}

form .form-item {
  margin-bottom: 0 !important;
}

/* ================================================================
   BOUTONS
   ================================================================ */

.btn.btn-primary,
button[type="submit"],
input[type="submit"],
.btn-primary {
  display: inline-block !important;
  padding: 12px 28px !important;
  background: var(--accent) !important;
  color: #fff !important;
  font-size: 11px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: pointer !important;
  font-family: inherit !important;
  transition: background .2s !important;
  box-shadow: none !important;
  font-weight: 400 !important;
}

.btn.btn-primary:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  background: var(--accent-deep) !important;
  color: #fff !important;
}

/* ================================================================
   FOOTER
   ================================================================ */

#footer {
  background: #111009 !important;
  color: rgba(237,232,226,.6) !important;
  padding: 0 !important;
  margin: 0 !important;
  border-top: none !important;
}

#footer-contact {
  background: transparent !important;
  padding: 40px 48px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  border: none !important;
}

#footer-contact .row {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 48px !important;
  float: none !important;
}

#footer-contact .col-sm-3:first-child {
  flex-shrink: 0 !important;
}

#footer-contact .col-sm-3:first-child img {
  height: 36px !important;
  width: auto !important;
  filter: brightness(0) invert(1) opacity(.6) !important;
}

#footer-contact h3 {
  font-size: 11px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: rgba(237,232,226,.3) !important;
  font-weight: 400 !important;
  margin-bottom: 12px !important;
  font-family: inherit !important;
}

#footer-contact .btn.btn-primary {
  background: transparent !important;
  border: 1px solid rgba(237,232,226,.15) !important;
  color: rgba(237,232,226,.55) !important;
  padding: 10px 20px !important;
}

#footer-contact .btn.btn-primary:hover {
  border-color: var(--dark-accent) !important;
  color: var(--dark-accent) !important;
}

#footer-contact p { font-size: 13.5px !important; }
#footer-contact a { color: rgba(237,232,226,.55) !important; text-decoration: none !important; }
#footer-contact a:hover { color: var(--dark-accent) !important; }
#footer-contact .fa { margin-right: 6px !important; }

/* Footer nav */
#footer-nav {
  background: transparent !important;
  padding: 0 48px 40px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
  border-top: 1px solid rgba(237,232,226,.08) !important;
}

#footer-nav .row {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  display: flex !important;
  gap: 48px !important;
  padding-top: 36px !important;
  float: none !important;
  align-items: flex-start !important;
}

#footer-nav .block.block-menu-block {
  flex: 1 !important;
  float: none !important;
  padding: 0 !important;
  margin: 0 !important;
  clear: none !important;
}

#footer-nav .block-title,
#footer-nav .block h2 {
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: rgba(237,232,226,.25) !important;
  font-weight: 400 !important;
  margin-bottom: 18px !important;
  font-family: inherit !important;
  border: none !important;
  padding: 0 !important;
}

#footer-nav .block-title a {
  color: rgba(237,232,226,.25) !important;
  text-decoration: none !important;
}

#footer-nav .menu.nav {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  float: none !important;
}

#footer-nav .menu.nav > li {
  float: none !important;
  margin-bottom: 10px !important;
}

#footer-nav .menu.nav > li > a,
#footer-nav .menu.nav > li > span {
  font-size: 13.5px !important;
  color: rgba(237,232,226,.5) !important;
  text-decoration: none !important;
  transition: color .2s !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
}

#footer-nav .menu.nav > li > a:hover { color: var(--dark-accent) !important; }

/* Sous-menus footer */
#footer-nav .dropdown-menu {
  position: static !important;
  display: block !important;
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 0 0 12px !important;
  margin: 4px 0 0 !important;
  float: none !important;
}

#footer-nav .dropdown-menu li a {
  font-size: 12.5px !important;
  color: rgba(237,232,226,.35) !important;
  padding: 4px 0 !important;
  display: block !important;
  text-decoration: none !important;
  transition: color .2s !important;
}

#footer-nav .dropdown-menu li a:hover { color: var(--dark-accent) !important; }

/* Caret Bootstrap */
#footer-nav .caret { display: none !important; }
#footer-nav .dropdown-toggle.nolink { display: none !important; }

/* Footer copyright */
#footer-copyright {
  background: transparent !important;
  border-top: 1px solid rgba(237,232,226,.07) !important;
  padding: 20px 48px !important;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0 !important;
}

#footer-copyright .row {
  max-width: var(--max-w) !important;
  margin: 0 auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  float: none !important;
}

#footer-copyright .col-md-6 {
  float: none !important;
  width: auto !important;
  flex: 1 !important;
}

#footer-copyright p {
  font-size: 11px !important;
  color: rgba(237,232,226,.2) !important;
  margin: 0 !important;
  letter-spacing: .03em !important;
}

#footer-copyright a {
  color: rgba(237,232,226,.2) !important;
  text-decoration: none !important;
}
#footer-copyright a:hover { color: rgba(237,232,226,.45) !important; }

/* ================================================================
   UTILITAIRES BOOTSTRAP — SUPPRESSION
   ================================================================ */

/* Supprimer les marges/paddings Bootstrap sur les containers */
body.front .main-container { margin-top: 0 !important; }

/* Masquer éléments superflus */
#masque,
.os-animation { animation: none !important; }

/* Empêcher Bootstrap de cacher le menu sur mobile */
@media (max-width: 767px) {
  #header .navbar-collapse.collapse { display: none !important; }
  #header .navbar-collapse.collapse.in { display: flex !important; flex-direction: column !important; }
  #header .navbar-toggle { display: flex !important; flex-direction: column !important; gap: 5px !important; }
}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */

@media (max-width: 960px) {
  /* Outer row → 1 colonne */
  body.front #about .row {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  /* Inner col-md-10 → 1 colonne, span toute la largeur */
  body.front #about .col-md-10.col-md-offset-2 {
    grid-column: 1 !important;
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }
  /* Reset grid-column explicite sur les enfants pour éviter colonne implicite */
  body.front #about h2   { grid-column: 1 !important; }
  body.front #about .body {
    grid-column: 1 !important;
    border-left: none !important;
    padding-left: 0 !important;
    border-top: 1px solid var(--border) !important;
    padding-top: 40px !important;
    margin-top: 0 !important;
  }
  /* Featured article devient vertical */
  body.front article.col-md-4.news:first-child {
    grid-column: 1 / -1 !important; grid-row: 1 !important;
    flex-direction: column !important;
  }
  body.front article.col-md-4.news:first-child > a { flex-direction: column !important; }
  body.front article.col-md-4.news:first-child img { width: 100% !important; aspect-ratio: 16/7 !important; }
  body.front article.col-md-4.news:first-child .content { border-left: 1px solid var(--border) !important; }
  /* 3 petites cartes en 2 colonnes (pas 1) */
  body.front #news .view-content.row {
    grid-template-columns: 1fr 1fr !important;
  }
  body.front article.col-md-4.news:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
  body.front article.col-md-4.news:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }
  body.front article.col-md-4.news:nth-child(4) { grid-column: 1 !important; grid-row: 3 !important; }
  body:not(.front) .view-content.row {
    grid-template-columns: 1fr 1fr !important;
  }
  #footer-nav .row { flex-wrap: wrap !important; }
  #footer-nav .block.block-menu-block { flex: 0 0 calc(50% - 24px) !important; }
}

@media (max-width: 768px) {
  /* ── HEADER MOBILE : logo + lang + hamburger ── */
  /* Container = contexte de positionnement pour le toggle absolu */
  #header .container.md {
    padding: 0 20px !important;
    position: relative !important;
  }
  /* navbar-header en flex row → brand seul (toggle sort du flux) */
  #header .navbar-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: var(--nav-h) !important;
    flex-shrink: 0 !important;
  }
  #header .navbar-brand {
    height: var(--nav-h) !important;
    display: flex !important;
    align-items: center !important;
  }
  #header #navbar:not(.in) { display: none !important; }
  /* Lang : marge auto pour le pousser vers la droite, padding pour le toggle */
  #header #lang {
    margin-left: auto !important;
    padding-right: 52px !important;
    padding-left: 8px !important;
    margin-right: 0 !important;
  }
  /* Toggle : absolu, calé à droite, centré verticalement dans le header */
  #header .navbar-toggle {
    position: absolute !important;
    right: 20px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
  }
  body.front #slider .container.md { padding: 0 20px 48px !important; }

  /* ABOUT : layout 1-colonne, padding symétrique */
  body.front #about { padding: 48px 20px !important; }
  body.front #about .col-md-10.col-md-offset-2 { gap: 24px !important; }
  body.front #about h2 { font-size: clamp(24px, 7vw, 34px) !important; }

  /* NEWS mobile : 1 colonne pour les petites cartes */
  body.front #news { padding: 48px 20px !important; }
  body.front #news .view-content.row { grid-template-columns: 1fr !important; }
  body.front article.col-md-4.news:nth-child(2),
  body.front article.col-md-4.news:nth-child(3),
  body.front article.col-md-4.news:nth-child(4) {
    grid-column: 1 !important;
    grid-row: auto !important;
  }

  body:not(.front) .main-container .container.md { padding: 0 20px !important; }
  body:not(.front) article.node { padding: 0 20px !important; }
  body:not(.front) .view-content.row { grid-template-columns: 1fr !important; }

  /* FOOTER : espacements réduits */
  #footer-contact { padding: 44px 20px !important; }
  #footer-contact .row { flex-direction: column !important; gap: 32px !important; }
  #footer-nav { padding: 0 20px 36px !important; }
  #footer-nav .row { flex-direction: column !important; }
  #footer-copyright { padding: 14px 20px !important; }
  #footer-copyright .row { flex-direction: column !important; gap: 6px !important; }
  .photo-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ================================================================
   MOBILE NAV OUVERT
   ================================================================ */

@media (max-width: 768px) {
  #header #navbar.in {
    position: absolute !important;
    top: var(--nav-h) !important;
    left: 0 !important; right: 0 !important;
    background-color: var(--surface) !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 20px !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    z-index: 200 !important;
  }

  #header #navbar.in .nav.navbar-nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100% !important;
  }

  #header #navbar.in .nav.navbar-nav > li {
    width: 100% !important;
  }

  #header #navbar.in .nav.navbar-nav > li > a,
  #header #navbar.in .nav.navbar-nav > li > span {
    padding: 12px 0 !important;
    font-size: 13px !important;
    color: var(--text-mid) !important;
    border-bottom: 1px solid var(--border) !important;
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  #header #navbar.in .dropdown-menu {
    position: static !important;
    display: block !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 0 0 16px !important;
    float: none !important;
  }

  #header #navbar.in .dropdown-menu li a {
    padding: 8px 0 !important;
    font-size: 12px !important;
    color: var(--text-light) !important;
    border-bottom: 1px solid var(--border) !important;
  }
}

/* ================================================================
   SECTION "VOUS AVEZ UN PROJET ?" — layout flex propre
   ================================================================ */

#projet {
  padding: 64px 48px !important;
  background: var(--surface) !important;
  border-top: 1px solid var(--border) !important;
}
#projet .row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
  flex-wrap: wrap !important;
}
#projet h2 {
  flex: 1 1 auto !important;
  margin: 0 !important;
  font-size: 1.6rem !important;
  color: var(--text) !important;
}
/* Grouper les boutons à droite, annuler les floats Bootstrap */
#projet .btn {
  float: none !important;
  margin-right: 0 !important;
  flex-shrink: 0 !important;
}
/* Bouton secondaire "Trouver un pro" */
#projet .btn--border {
  background: transparent !important;
  color: var(--accent) !important;
  border: 2px solid var(--accent) !important;
  padding: 10px 22px !important;
}
#projet .btn--border:hover {
  background: var(--accent) !important;
  color: #fff !important;
}
/* Bouton primaire "Demander un devis" */
#projet .btn-primary {
  padding: 10px 22px !important;
}

@media (max-width: 768px) {
  #projet { padding: 40px 20px !important; }
  #projet .row { flex-direction: column !important; align-items: flex-start !important; }
}

/* ================================================================
   CAROUSEL RÉALISATIONS — légende EN DESSOUS de la photo
   ================================================================ */

/* Dots restent dans la photo */
.entity.carousel .carousel-indicators {
  bottom: 12px !important;
  margin-bottom: 0 !important;
}

/* Caption externe — style annotation architecturale */
.carousel-caption-ext {
  display: flex !important;
  align-items: baseline !important;
  gap: 20px !important;
  margin-top: 0 !important;
  padding: 11px 0 14px !important;
  border-top: 1px solid var(--border) !important;
  min-height: 42px !important;
  box-sizing: border-box !important;
}
.carousel-caption-ext .cap-index {
  flex-shrink: 0 !important;
  font-size: 10px !important;
  letter-spacing: 0.18em !important;
  color: var(--accent, #8C7355) !important;
  font-weight: 500 !important;
  font-family: 'brandon_grotesquemedium', 'Brandon Grotesque', 'Futura', sans-serif !important;
  font-style: normal !important;
  white-space: nowrap !important;
  padding-top: 2px !important;
}
.carousel-caption-ext .cap-text {
  font-size: 11px !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  color: var(--text-mid) !important;
  font-family: 'brandon_grotesquemedium', 'Brandon Grotesque', 'Futura', sans-serif !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 1.6 !important;
}
/* Cacher les données caption stockées dans le HTML */
.carousel-caption-data { display: none !important; }
/* Masquer les captions Bootstrap d'origine */
.entity.carousel .carousel-caption {
  display: none !important;
}

/* ================================================================
   HERO HOME — corriger la hauteur des slides (JS Drupal injecte 812px
   et display:none sur les slides qu'il ne contrôle pas)
   ================================================================ */

/* Forcer l'affichage via CSS !important pour battre les inline styles Drupal */
body.front #slider .slide {
  display: none !important;
  height: 100% !important;
}
body.front #slider .slide.active {
  display: block !important;
  height: 100% !important;
}

/* Alléger le gradient en bas du hero pour éviter la "barre noire" */
body.front #slider::after {
  background: linear-gradient(
    to top,
    rgba(10,7,4,.65) 0%,
    rgba(10,7,4,.20) 35%,
    rgba(10,7,4,.0)  65%
  ) !important;
}

/* ================================================================
   MOTION RÉDUIT
   ================================================================ */

/* ================================================================
   MOBILE NAV — fix overflow texte + margin négatif Bootstrap
   ================================================================ */

/* Annuler le margin-right:-15px de .navbar-right qui décale le menu */
@media (max-width: 768px) {
  #header #navbar.in .nav.navbar-nav.navbar-right {
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
    width: 100% !important;
  }
  /* Empêcher le débordement à droite des items longs */
  #header #navbar.in .nav.navbar-nav > li > a,
  #header #navbar.in .nav.navbar-nav > li > span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  #header #navbar.in .dropdown-menu li a {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  /* S'assurer que le conteneur du menu ne déborde pas */
  #header #navbar.in {
    overflow-x: hidden !important;
  }
}

/* ================================================================
   #VISUEL — hero des pages produits (background-image via data-bg JS)
   ================================================================ */

/* Overlay sombre pour lisibilité du texte sur n'importe quelle photo */
#visuel {
  position: relative !important;
  overflow: hidden !important;
}
#visuel::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    135deg,
    rgba(26, 22, 14, 0.55) 0%,
    rgba(26, 22, 14, 0.25) 100%
  ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
#visuel .container {
  position: relative !important;
  z-index: 2 !important;
}
/* Titre et bouton en blanc sur la photo */
#visuel h1,
#visuel .page-title h1 {
  color: #fff !important;
  text-shadow: 0 2px 8px rgba(0,0,0,.35) !important;
}
#visuel .btn {
  border-color: rgba(255,255,255,.75) !important;
  color: #fff !important;
}
#visuel .btn:hover {
  background: rgba(255,255,255,.15) !important;
}
/* Mobile : hauteur réduite pour les pages produits */
@media (max-width: 768px) {
  #visuel {
    height: 280px !important;
    min-height: 0 !important;
  }
  #visuel .container.md {
    padding: 0 20px !important;
  }
}

/* ================================================================
   MOTION RÉDUIT
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}