/*
 * caumont-interiors-site/static/styles.css
 * Shell + composants — charte réelle #cbcaca / #fe6702.
 * Zéro valeur en dur hors variables définies dans tokens-caumont.css.
 */

/* ---- Reset & base -------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-md);
  line-height:    var(--line-height);
  color:          var(--ink);
  background:     var(--surface);
  margin:         0;
  min-height:     100vh;
}

/* ---- Typographie --------------------------------------------- */

h1, .h1 {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-2xl);
  font-weight:    400;
  line-height:    1.2;
  color:          var(--ink);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin:         0;
}

h2, .h2 {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-xl);
  font-weight:    400;
  line-height:    1.25;
  color:          var(--ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin:         0;
}

h3, .h3 {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-lg);
  font-weight:    400;
  line-height:    1.3;
  color:          var(--ink);
  letter-spacing: 0.06em;
  margin:         0;
}

p {
  margin: 0;
}

a {
  color:           var(--ink);
  text-decoration: none;
  transition:      color 0.25s var(--ease-brand);
}

a:hover {
  color: var(--accent);
}

/* ---- Shell : header FIXED semi-transparent -------------------- */

.site-header {
  position:         fixed;
  top:              0;
  left:             0;
  right:            0;
  z-index:          var(--z-overlay);
  background:       rgba(0, 0, 0, 0.5);
  display:          flex;
  align-items:      center;
  justify-content:  space-between;
  padding:          0 45px;
  height:           82px;
}

/* ---- Logo (bloc gauche) -------------------------------------- */

.site-header__brand {
  display:    flex;
  align-items: center;
  gap:        10px;
  text-decoration: none;
  flex-shrink: 0;
}

.site-header__logo-img {
  height: 46px;
  width:  auto;
  display: block;
}

/* ---- Nav (bloc droit) — images PNG réelles ------------------- */

.site-header__nav {
  display:    flex;
  align-items: center;
  gap:        var(--space-xl);
  list-style: none;
  margin:     0;
  padding:    0;
}

.site-header__nav-link {
  display:         block;
  text-decoration: none;
  position:        relative;
  line-height:     1;
}

.site-header__nav-link img {
  height:     30px;
  width:      auto;
  display:    block;
  transition: opacity 0.25s var(--ease-brand);
}

.site-header__nav-link:hover img {
  opacity: 0.75;
}

/* Underline orange en ::after */
.site-header__nav-link::after {
  content:    "";
  display:    block;
  position:   absolute;
  bottom:     -6px;
  left:       0;
  right:      100%;
  height:     2px;
  background: var(--accent);
  transition: right 0.3s var(--ease-brand);
}

.site-header__nav-link:hover::after,
.site-header__nav-link[aria-current="page"]::after {
  right: 0;
}

/* Menu mobile toggle */
.site-header__menu-toggle {
  display:    none;
  background: none;
  border:     none;
  cursor:     pointer;
  padding:    var(--space-sm);
  color:      #fff;
  font-size:  22px;
  line-height: 1;
}

@media (max-width: 768px) {
  .site-header {
    padding: 0 var(--space-xl);
  }
  .site-header__nav {
    display:        none;
    position:       fixed;
    top:            82px;
    left:           0;
    right:          0;
    background:     rgba(0, 0, 0, 0.9);
    flex-direction: column;
    align-items:    flex-start;
    padding:        var(--space-xl);
    gap:            var(--space-xl);
  }
  .site-header__nav--open {
    display: flex;
  }
  .site-header__menu-toggle {
    display: block;
  }
}

/* ---- Contenu principal (décalé du header fixed) -------------- */

.site-main {
  width: 100%;
}

/* ---- Footer #eeeeee ------------------------------------------ */

.site-footer {
  background:  var(--surface-footer);
  padding:     var(--space-3xl) var(--space-2xl);
  margin-top:  0;
}

.site-footer__inner {
  max-width:  1200px;
  margin:     0 auto;
  display:    grid;
  grid-template-columns: repeat(12, 1fr);
  gap:        var(--space-xl);
}

.site-footer__brand {
  grid-column: span 4;
}

.site-footer__brand-name {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-md);
  font-weight:    400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--ink);
  margin-bottom:  var(--space-lg);
}

.site-footer__contact {
  grid-column:   span 4;
  font-size:     var(--font-size-sm);
  color:         var(--ink-muted);
  line-height:   1.8;
}

.site-footer__contact a {
  color:      var(--accent);
  text-decoration: none;
  transition: color 0.25s var(--ease-brand);
}

.site-footer__contact a:hover {
  color: var(--accent-hover);
}

.site-footer__social {
  grid-column: span 4;
  font-size:   var(--font-size-sm);
  color:       var(--ink-muted);
}

.site-footer__social a {
  display:    block;
  color:      var(--ink-muted);
  margin-top: var(--space-sm);
  transition: color 0.25s var(--ease-brand);
}

.site-footer__social a:hover {
  color: var(--accent);
}

.site-footer__bottom {
  max-width:   1200px;
  margin:      var(--space-2xl) auto 0;
  font-size:   var(--font-size-xs);
  color:       var(--ink-faint);
  border-top:  1px solid var(--border);
  padding-top: var(--space-lg);
}

/* ---- Hero plein-cadre (home F2) ------------------------------ */

.hero-fullscreen {
  position:   relative;
  width:      100%;
  height:     100vh;
  min-height: 600px;
  overflow:   hidden;
  background: #111;
}

.hero-fullscreen__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center center;
  display:    block;
}

/* Header en surimpression — pas de règle supplémentaire car
   site-header est fixed et passe par-dessus naturellement */

/* ---- Nav cards home (conservées pour autres pages) ----------- */

.home-nav {
  padding:    var(--space-3xl) var(--space-2xl);
  background: var(--surface);
}

.home-nav__grid {
  display:              grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                  var(--space-xl);
  max-width: 1200px;
  margin: 0 auto;
}

.home-nav__card {
  display:         block;
  text-decoration: none;
  color:           var(--ink);
}

.home-nav__card:hover .home-nav__card-label {
  color: var(--accent);
}

.home-nav__card-img-wrap {
  aspect-ratio: 4 / 3;
  overflow:     hidden;
  background:   var(--surface-sunken);
}

.home-nav__card-img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  transition: transform 0.35s var(--ease-brand);
}

.home-nav__card:hover .home-nav__card-img {
  transform: scale(1.03);
}

.home-nav__card-label {
  margin-top:     var(--space-md);
  font-family:    var(--font-sans);
  font-size:      var(--font-size-lg);
  font-weight:    400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:     color 0.25s var(--ease-brand);
}

@media (max-width: 768px) {
  .home-nav__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Boutons ------------------------------------------------- */

.caumont-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-sm) var(--space-xl);
  font-family:     var(--font-sans);
  font-size:       var(--font-size-sm);
  font-weight:     400;
  letter-spacing:  0.1em;
  text-transform:  uppercase;
  text-decoration: none;
  cursor:          pointer;
  border:          none;
  transition:      background 0.25s var(--ease-brand), color 0.25s var(--ease-brand), border-color 0.25s var(--ease-brand);
}

.caumont-btn--primary {
  background: var(--accent);
  color:      var(--ink-on-accent);
}

.caumont-btn--primary:hover {
  background: var(--accent-hover);
  color:      var(--ink-on-accent);
}

.caumont-btn--secondary {
  background:  transparent;
  color:       var(--ink);
  border:      1px solid var(--border-strong);
}

.caumont-btn--secondary:hover {
  border-color: var(--ink);
}

.caumont-btn--ghost {
  background:   transparent;
  color:        var(--ink-muted);
  padding-left: 0;
  padding-right: 0;
}

.caumont-btn--ghost:hover {
  color: var(--ink);
}

/* ---- Divider ------------------------------------------------- */

.caumont-divider {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     var(--space-md) 0;
}

/* ---- Page hero intérieures ----------------------------------- */

.page-hero {
  padding-top:   calc(82px + var(--space-3xl));
  padding-bottom: var(--space-3xl);
  background:    var(--surface);
  border-bottom: 1px solid var(--border);
}

.page-hero__inner {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
  max-width:      1200px;
  margin:         0 auto;
  padding:        0 var(--space-2xl);
}

.page-hero__title {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-2xl);
  font-weight:    400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--ink);
  margin:         0;
}

.page-hero__lead {
  font-size:  var(--font-size-lg);
  color:      var(--ink-muted);
  margin:     0;
}

/* ---- À propos ------------------------------------------------ */

.about-designer {
  padding: var(--space-3xl) var(--space-2xl);
}

.about-designer__grid {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   var(--space-3xl);
  align-items:           start;
  max-width:             1200px;
  margin:                0 auto;
}

.about-designer__img {
  width:      100%;
  object-fit: cover;
}

.about-designer__text {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-xl);
}

.about-lacquer,
.about-process {
  padding:    var(--space-2xl);
  border-top: 1px solid var(--border);
}

.about-quotes {
  padding:        var(--space-3xl) var(--space-2xl);
  border-top:     1px solid var(--border);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2xl);
  max-width:      1200px;
  margin:         0 auto;
}

.about-quote {
  border-left:  2px solid var(--accent);
  margin:       0;
  padding-left: var(--space-xl);
}

.about-quote p {
  font-style: italic;
  color:      var(--ink-muted);
}

.about-quote footer {
  margin-top:     var(--space-sm);
  font-size:      var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color:          var(--ink-faint);
}

@media (max-width: 768px) {
  .about-designer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Presse -------------------------------------------------- */

.press-grid {
  padding: var(--space-3xl) var(--space-2xl);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap:     var(--space-xl);
}

.press-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.press-card__img-wrap {
  aspect-ratio: 3 / 4;
  overflow:     hidden;
  background:   var(--surface-sunken);
}

.press-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.press-card__title {
  font-size:   var(--font-size-xs);
  color:       var(--ink-muted);
  line-height: 1.4;
}

/* ---- Contact ------------------------------------------------- */

.contact-body {
  padding:   var(--space-3xl) var(--space-2xl);
  max-width: 1200px;
  margin:    0 auto;
}

.contact-grid {
  display:               grid;
  grid-template-columns: 1fr 2fr;
  gap:                   var(--space-3xl);
}

.contact-coords {
  font-style:     normal;
  display:        flex;
  flex-direction: column;
  gap:            var(--space-lg);
}

.contact-coords a {
  color:      var(--accent);
  transition: color 0.25s var(--ease-brand);
}

.contact-coords a:hover {
  color: var(--accent-hover);
}

.contact-note {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-lg);
  color:          var(--ink-muted);
}

@media (max-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Collections / Products ---------------------------------- */

.collections-section {
  padding:    var(--space-3xl) var(--space-2xl);
  border-top: 1px solid var(--border);
  max-width:  1200px;
  margin:     0 auto;
}

.collections-section:first-of-type {
  border-top: none;
}

.collections-section__heading {
  margin-bottom: var(--space-2xl);
}

.furniture-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap:                   var(--space-xl);
}

.furniture-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.furniture-card__img-wrap {
  aspect-ratio: 1 / 1;
  overflow:     hidden;
  background:   var(--surface-sunken);
}

.furniture-card__img {
  width:      100%;
  height:     100%;
  object-fit: contain;
}

.furniture-card__name {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-md);
  font-weight:    400;
  letter-spacing: 0.04em;
}

.products-grid {
  padding:   var(--space-3xl) var(--space-2xl);
  max-width: 1200px;
  margin:    0 auto;
}

.tile-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap:                   var(--space-lg);
}

.tile-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
}

.tile-card__img-wrap {
  aspect-ratio: 1 / 1;
  overflow:     hidden;
  background:   var(--surface-sunken);
}

.tile-card__img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}

.tile-card__img-empty {
  aspect-ratio: 1 / 1;
  background:   var(--surface-sunken);
}

.tile-card__name {
  font-size:   var(--font-size-sm);
  color:       var(--ink-muted);
  line-height: 1.3;
}

/* ---- Page Annam ---------------------------------------------- */

.annam-hero {
  position:   relative;
  width:      100%;
  max-height: 680px;
  overflow:   hidden;
  background: var(--surface-sunken);
}

.annam-hero__img-wrap {
  width:  100%;
  height: 680px;
}

.annam-hero__img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 30%;
  display:         block;
}

.annam-hero__overlay {
  position:       absolute;
  inset:          0;
  background:     linear-gradient(to bottom, transparent 40%, rgba(0,0,0,0.55) 100%);
  display:        flex;
  align-items:    flex-end;
  padding-bottom: var(--space-3xl);
}

.annam-hero__content {
  color: #fff;
  padding: 0 var(--space-2xl);
}

.annam-hero__eyebrow {
  font-size:      var(--font-size-sm);
  font-weight:    400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color:          var(--accent);
  margin-bottom:  var(--space-md);
}

.annam-hero__title {
  font-family:    var(--font-sans);
  font-size:      clamp(32px, 5vw, 56px);
  font-weight:    400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          #fff;
  line-height:    1.1;
  margin:         0;
}

.annam-grid-section {
  padding: var(--space-3xl) var(--space-2xl);
}

.annam-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   var(--space-xl);
}

.annam-card {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-sm);
  cursor:         pointer;
}

.annam-card__img-wrap {
  position:    relative;
  aspect-ratio: 1 / 1;
  overflow:    hidden;
  background:  var(--surface-sunken);
}

.annam-card__img {
  width:      100%;
  height:     100%;
  object-fit: contain;
  transition: transform 0.35s var(--ease-brand);
}

.annam-card:hover .annam-card__img,
.annam-card:focus .annam-card__img {
  transform: scale(1.04);
}

.annam-card__zoom-hint {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  background:      rgba(0,0,0,0);
  transition:      background 0.25s var(--ease-brand);
}

.annam-card:hover .annam-card__zoom-hint,
.annam-card:focus .annam-card__zoom-hint {
  background: rgba(0,0,0,0.18);
}

.annam-card__zoom-icon {
  font-size:  28px;
  color:      #fff;
  font-weight: 300;
  opacity:    0;
  transition: opacity 0.25s var(--ease-brand);
}

.annam-card:hover .annam-card__zoom-icon,
.annam-card:focus .annam-card__zoom-icon {
  opacity: 1;
}

.annam-card__name {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-md);
  font-weight:    400;
  letter-spacing: 0.04em;
  color:          var(--ink);
}

.annam-lightbox {
  position:        fixed;
  inset:           0;
  z-index:         var(--z-overlay);
  background:      rgba(0,0,0,0.92);
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         var(--space-xl);
}

[x-cloak] { display: none !important; }

.annam-lightbox__close {
  position:   absolute;
  top:        var(--space-xl);
  right:      var(--space-xl);
  background: none;
  border:     none;
  color:      #fff;
  font-size:  28px;
  cursor:     pointer;
  line-height: 1;
  padding:    var(--space-sm);
  opacity:    0.8;
  transition: opacity 0.2s var(--ease-brand);
}

.annam-lightbox__close:hover {
  opacity: 1;
}

.annam-lightbox__figure {
  margin:          0;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-lg);
  max-width:       1000px;
  width:           100%;
}

.annam-lightbox__img {
  max-height: 80vh;
  max-width:  100%;
  object-fit: contain;
  display:    block;
}

.annam-lightbox__caption {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-lg);
  color:          #fff;
  letter-spacing: 0.06em;
  text-align:     center;
}

@media (max-width: 768px) {
  .annam-hero__img-wrap { height: 380px; }
  .annam-hero { max-height: 380px; }
  .annam-grid {
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  }
}

/* ---- Collection feature link --------------------------------- */

.collection-feature-link {
  display:         block;
  text-decoration: none;
  color:           inherit;
  border:          1px solid var(--border);
  transition:      border-color 0.25s var(--ease-brand);
  margin-bottom:   var(--space-md);
}

.collection-feature-link:hover {
  border-color: var(--accent);
}

.collection-feature-link:hover .collection-feature__label {
  color: var(--accent);
}

.collection-feature__img-wrap {
  aspect-ratio:    16 / 6;
  overflow:        hidden;
  background:      var(--surface-sunken);
}

.collection-feature__img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center 30%;
  transition:      transform 0.35s var(--ease-brand);
}

.collection-feature-link:hover .collection-feature__img {
  transform: scale(1.02);
}

.collection-feature__caption {
  padding:         var(--space-xl) var(--space-2xl);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}

.collection-feature__label {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-xl);
  font-weight:    400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition:     color 0.25s var(--ease-brand);
}

.collection-feature__cta {
  font-size:      var(--font-size-sm);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color:          var(--ink-muted);
}

/* ---- Masonry CSS columns (F3) -------------------------------- */
/*
 * Technique : CSS multi-column (column-count).
 * Chaque .masonry-item a break-inside:avoid pour éviter la coupure.
 * Fond transparent sur l'item — le PNG NoSD flotte directement sur #cbcaca.
 * AUCUN background sur .masonry-item ni .masonry-item__inner.
 */

.masonry-section {
  padding: var(--space-3xl) 0;
}

.masonry-section + .masonry-section {
  border-top: 1px solid var(--border);
}

.masonry-section__header {
  display:         flex;
  align-items:     baseline;
  justify-content: space-between;
  margin-bottom:   var(--space-2xl);
  padding:         0 var(--space-2xl);
}

.masonry-section__title {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-xl);
  font-weight:    400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink);
  margin:         0;
}

.masonry-section__link {
  font-size:      var(--font-size-xs);
  letter-spacing: 0.12em;
}

.masonry-grid {
  /* 6 colonnes ~252px, padding interne 5px, gap 0 */
  column-count: 6;
  column-gap:   0;
  padding:      0 var(--space-xl);
}

.masonry-item {
  break-inside:    avoid;
  display:         block;
  padding:         5px;
  /* FOND TRANSPARENT — le PNG transparent flotte sur #cbcaca */
  background:      transparent;
}

.masonry-item__inner {
  position:    relative;
  overflow:    hidden;
  /* FOND TRANSPARENT — aucun background sur le wrapper */
  background:  transparent;
  cursor:      default;
}

.masonry-item--clickable .masonry-item__inner {
  cursor: pointer;
}

.masonry-item__img {
  display:    block;
  width:      100%;
  height:     auto;
  /* ratio naturel de l'image — pas d'aspect-ratio forcé */
  transition: transform 0.35s var(--ease-brand);
}

.masonry-item:hover .masonry-item__img,
.masonry-item:focus-within .masonry-item__img {
  transform: scale(1.03);
}

.masonry-item__overlay {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     flex-end;
  justify-content: center;
  padding-bottom:  var(--space-lg);
  background:      rgba(254, 103, 2, 0);
  transition:      background 0.3s var(--ease-brand);
  pointer-events:  none;
}

.masonry-item:hover .masonry-item__overlay,
.masonry-item:focus-within .masonry-item__overlay {
  background: rgba(254, 103, 2, 0.82);
}

.masonry-item__name {
  font-family:    var(--font-sans);
  font-size:      20px;
  font-weight:    500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          #fff;
  text-align:     center;
  padding:        0 var(--space-sm);
  opacity:        0;
  transform:      translateY(6px);
  transition:     opacity 0.3s var(--ease-brand), transform 0.3s var(--ease-brand);
}

.masonry-item:hover .masonry-item__name,
.masonry-item:focus-within .masonry-item__name {
  opacity:   1;
  transform: translateY(0);
}

/* Responsive masonry */
@media (max-width: 1200px) {
  .masonry-grid { column-count: 5; }
}
@media (max-width: 900px) {
  .masonry-grid { column-count: 4; }
}
@media (max-width: 640px) {
  .masonry-grid { column-count: 3; }
}
@media (max-width: 420px) {
  .masonry-grid { column-count: 2; }
}

/* ---- Page hero double-niveau (F4) ---------------------------- */

.page-hero__eyebrow {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-xs);
  font-weight:    400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--accent);
  margin:         0 0 var(--space-sm);
}

/* Grand titre about : "futura_bk_btbook" = Century Gothic fallback, 39px */
.page-hero__title--large {
  font-family:    "futura_bk_btbook", "Century Gothic", "Trebuchet MS", sans-serif;
  font-size:      39px;
  letter-spacing: 0.08em;
}

/* ---- About blocs alternance image/texte (F4) ----------------- */

.about-block {
  padding:    var(--space-3xl) 0;
  border-top: 1px solid var(--border);
}

.about-block:first-of-type {
  border-top: none;
}

.about-block--alt {
  background: var(--surface);
}

.about-block__grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-3xl);
  align-items:           center;
  padding:               0 var(--space-2xl);
}

/* Image à droite : inverser l'ordre */
.about-block--image-right .about-block__media {
  order: 2;
}
.about-block--image-right .about-block__body {
  order: 1;
}

.about-block__img {
  display:    block;
  width:      100%;
  height:     auto;
  object-fit: cover;
}

.about-block__eyebrow {
  font-family:    var(--font-sans);
  font-size:      var(--font-size-xs);
  font-weight:    400;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color:          var(--accent);
  margin:         0 0 var(--space-sm);
}

.about-block__title {
  font-family:    "futura_bk_btbook", "Century Gothic", "Trebuchet MS", sans-serif;
  font-size:      39px;
  font-weight:    400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--ink);
  margin:         0 0 var(--space-xl);
  line-height:    1.15;
}

.about-block__text {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-lg);
  color:          var(--ink-muted);
  font-size:      var(--font-size-md);
  line-height:    var(--line-height);
}

@media (max-width: 768px) {
  .about-block__grid {
    grid-template-columns: 1fr;
  }
  .about-block--image-right .about-block__media { order: 1; }
  .about-block--image-right .about-block__body  { order: 2; }
  .about-block__title { font-size: 28px; }
  .page-hero__title--large { font-size: 28px; }
}

/* ---- Utilitaires --------------------------------------------- */

.container {
  max-width: 1200px;
  margin:    0 auto;
  padding:   0 var(--space-2xl);
}

.sr-only {
  position:   absolute;
  width:      1px;
  height:     1px;
  padding:    0;
  margin:     -1px;
  overflow:   hidden;
  clip:       rect(0,0,0,0);
  white-space: nowrap;
  border:     0;
}

/* ---- Titres-images officiels (dual-typo signature) -----------
 * Les PNG fournis par le client ont des pixels blancs sur fond
 * transparent. Sur fond #cbcaca (surface), le blanc est invisible :
 * filter: brightness(0) convertit les pixels non-transparents
 * vers le noir pur, parfaitement lisible sur le fond clair.
 * Hauteur normalisée 52px (section) / 44px (page-hero).
 * display:block supprime l'espace inline sous l'image.
 */

.section-title-img {
  display:  block;
  height:   52px;
  width:    auto;
  filter:   brightness(0);
}

.page-title-img {
  display:  block;
  height:   44px;
  width:    auto;
  filter:   brightness(0);
}