/* ============================================================
   NIKO CUISINES & INTERIEUR DESIGN — design system
   Palette relevée sur le logo : noir, bois/or brossé, blanc, crème.
   Display & labels : Jost — la géométrique du logo.  Texte : Inter.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600&family=Inter:wght@400;500;600&display=swap');

:root{
  /* --- Noirs --- */
  --ink:        #000000;   /* fond principal — le noir du logo, pas un brun */
  --ink-soft:   #0A0A0A;   /* section alternée */
  --ink-card:   #141414;   /* cartes, champs de formulaire */
  --ink-line:   #1F1F1F;   /* filets et séparateurs */

  /* --- Bois / or, échantillonnés sur le « O » du logo --- */
  --wood:       #B69A7A;   /* l'accent de marque */
  --wood-light: #D9C4A6;   /* survol, texte or qui doit ressortir */
  --wood-pale:  #EEDBC8;   /* culminant du dégradé, jamais en aplat */
  --wood-deep:  #8A6844;   /* texte or sur fond clair */
  --copper:     #B69A7A;   /* conservé pour compatibilité : ramené sur l'or */
  --copper-deep:#8A6844;
  --sage:       #B69A7A;   /* le vert sortait de la palette */

  /* --- Clairs --- */
  --cream:      #FFFFFF;   /* texte principal sur noir */
  --paper:      #F7F4EF;   /* fond clair, pour l'imprimé */
  --stone:      #A8A29B;   /* texte secondaire — gris chaud, jamais froid */
  --stone-dim:  #6B655E;

  /* --- Dégradé signature : le filet sous le nom dans le logo --- */
  --niko-degrade: linear-gradient(90deg,
      #8A6844 0%, #B69A7A 22%, #EEDBC8 50%, #B69A7A 78%, #8A6844 100%);

  /* --- Texture bois : la matière du « O », en trois fréquences ---
     Le grain fin et le brossage moyen sont indispensables : la brillance
     seule retombe en aplat doré dès que l'élément est petit.              */
  --bois-brillance: linear-gradient(90deg,
      #B79E7D 0%,  #B39675 8%,  #B99E7D 17%, #BDA582 25%, #B79D7C 33%,
      #B19573 42%, #AC8F6E 50%, #B49878 58%, #B69A7A 67%, #B39B79 75%,
      #B49E7C 83%, #CDB99D 92%, #B79E7D 100%);
  --bois-stries: repeating-linear-gradient(90deg,
      rgba(255,255,255,.07) 0 1px, rgba(0,0,0,.07) 1px 3px, transparent 3px 6px);
  --bois-bandes: repeating-linear-gradient(90deg,
      rgba(255,255,255,.11) 0 5px,  rgba(0,0,0,.085) 5px 14px,
      rgba(255,255,255,.05) 14px 21px, rgba(0,0,0,.04) 21px 33px);
  --bois: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%, rgba(0,0,0,.06)), url(../img/texture/bois-or.jpg);
  --bois-taille: 100% 100%, 680px auto;

  /* --- Typo --- */
  --f-display: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;
  --f-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --f-label: 'Jost', 'Futura', system-ui, sans-serif;

  /* --- Rythme --- */
  --container: 1280px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

body{
  margin:0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
h1,h2,h3,h4{
  font-family: var(--f-display);
  font-weight: 300;
  margin: 0 0 .5em;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
p{ margin: 0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }

:focus-visible{
  outline: 2px solid var(--wood);
  outline-offset: 3px;
}

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 clamp(24px, 5vw, 64px);
}

/* ---------- Eyebrow / labels (utilitaire) ---------- */
.eyebrow{
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wood);
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom: 20px;
}
.eyebrow::before{
  content:'';
  width: 34px; height:1px;
  background: var(--niko-degrade);
}

/* ============================================================
   NAVIGATION
   ============================================================ */
.site-header{
  position: fixed;
  top:0; left:0; right:0;
  z-index: 100;
  background: linear-gradient(to bottom, rgba(0,0,0,.96) 0%, rgba(0,0,0,.86) 55%, rgba(0,0,0,.3) 100%);
  transition: background .3s var(--ease), backdrop-filter .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-scrolled{
  background: linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 62%, transparent 100%);
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
.nav{
  display:flex;
  align-items:center;
  justify-content: space-between;
  padding: 18px 32px;
  max-width: var(--container);
  margin: 0 auto;
}
.nav__logo{ display:flex; align-items:center; gap:10px; }
.nav__logo img{ height: 50px; width:auto; }
.nav__links{
  display:flex;
  align-items:center;
  gap: 36px;
}
.nav__links a{
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--stone);
  font-weight:500;
  position:relative;
  padding: 6px 0;
  transition: color .2s;
}
.nav__links a:hover, .nav__links a[aria-current="page"]{ color: var(--cream); }
.nav__links a[aria-current="page"]::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:100%; height:1px;
  background: var(--wood);
}
.nav__cta{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 11px 22px;
  border: 1px solid rgba(182,154,122,.5);
  color: var(--wood) !important;
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase !important;
  transition: color .2s, border-color .2s;
}
.nav__cta:hover{ background: transparent; color: var(--wood-light) !important; border-color: var(--wood-light); }

.nav__burger{
  display:none;
  flex-direction:column;
  gap:5px;
  background:none; border:none; padding: 8px;
}
.nav__burger span{ width:22px; height:1px; background: var(--cream); display:block; }

.nav__mobile{
  display:none;
  position: fixed; inset:0;
  background: var(--ink);
  z-index: 99;
  padding: 100px 32px 40px;
  flex-direction:column;
  gap: 28px;
}
.nav__mobile.is-open{ display:flex; }
.nav__mobile a{
  font-family: var(--f-display);
  font-size: 28px;
  color: var(--cream);
}

@media (max-width: 860px){
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
}
@media (max-width: 560px){
  .nav__cta{ display:none; }
}

/* ============================================================
   BOUTONS
   ============================================================ */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 16px 34px;
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: all .24s var(--ease);
  white-space: nowrap;
}
/* Le bouton principal porte la texture bois du logo — une seule surface
   texturée par écran, c'est pourquoi le CTA de la barre reste en contour. */
.btn-primary{
  background-color: transparent;
  background-image: var(--bois);
  background-size: var(--bois-taille);
  background-position: center, 30% 42%;
  background-color: #B69A7A;
  color: #17120C;
  font-weight: 500;
}
.btn-primary:hover{ filter: brightness(1.07); transform:none; }
.btn-outline{
  border-color: rgba(255,255,255,.28);
  color: var(--cream);
}
.btn-outline:hover{ border-color: var(--wood); color: var(--wood); background: transparent; }
.btn-google{
  border-color: rgba(255,255,255,.35);
  color: var(--cream);
  gap: 10px;
}
.btn-google:hover{ border-color: var(--wood); color: var(--wood); }
.btn-row{ display:flex; gap:16px; flex-wrap:wrap; }

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex;
  align-items:flex-end;
  padding: 0 0 100px;
  overflow:hidden;
}
.hero__bg{
  position:absolute; inset:0;
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(to top, #000 4%, rgba(0,0,0,.30) 52%, rgba(0,0,0,.55) 100%),
    linear-gradient(to right, rgba(0,0,0,.62), rgba(0,0,0,.06) 58%);
}
.hero__content{
  position:relative;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
  width:100%;
}
.hero__slogan{
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wood-light);
  margin-bottom: 22px;
}
.hero h1{
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.025em;
  max-width: 14ch;
  color: var(--cream);
  margin-bottom: 30px;
}
.hero h1 em{ font-style: normal; color: var(--wood); }
.hero p.lede{
  max-width: 46ch;
  color: var(--stone);
  font-size: 17px;
  margin-bottom: 36px;
}

/* ============================================================
   SWATCH RAIL — élément signature
   (inspiré du nuancier de matériaux du showroom)
   ============================================================ */
.swatch-rail{
  display:flex;
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  overflow:hidden;
}
.swatch-rail__item{
  flex: 1 1 0;
  position:relative;
  padding: 22px 18px;
  border-right: 1px solid var(--ink-line);
  transition: flex .5s var(--ease), padding .3s;
  overflow:hidden;
  min-width: 0;
}
.swatch-rail__item:last-child{ border-right:none; }
.swatch-rail__item::before{
  content:'';
  position:absolute; inset:0;
  background: var(--swatch-color, var(--wood));
  opacity: .14;
  transition: opacity .35s;
}
.swatch-rail__item:hover{ flex: 2.2 1 0; }
.swatch-rail__item:hover::before{ opacity:.26; }
.swatch-rail__num{
  font-family: var(--f-label);
  font-size: 11px;
  color: var(--swatch-color, var(--wood));
  display:block;
  margin-bottom: 10px;
}
.swatch-rail__label{
  font-family: var(--f-display);
  font-size: 16px;
  color: var(--cream);
  white-space: nowrap;
}
@media (max-width: 760px){
  .swatch-rail{ flex-wrap: wrap; }
  .swatch-rail__item{ flex: 1 1 50%; border-bottom: 1px solid var(--ink-line); }
  .swatch-rail__item:hover{ flex: 1 1 50%; }
}

/* ============================================================
   SECTIONS génériques
   ============================================================ */
section{ padding: 108px 0; }
.section-tight{ padding: 72px 0; }
.section-alt{ background: var(--ink-soft); }

.section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 40px;
  margin-bottom: 56px;
  flex-wrap:wrap;
}
.section-head h2{
  font-size: clamp(28px, 3.4vw, 44px);
  max-width: 16ch;
  color: var(--cream);
}
.section-head .lede{ color: var(--stone); max-width: 42ch; margin:0; }

/* ---------- Intro / USP row ---------- */
.usp-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
}
.usp{
  background: var(--ink);
  padding: 40px 34px;
}
.usp__num{ font-family: var(--f-label); color: var(--copper); font-size:12px; letter-spacing:.15em; }
.usp h3{ font-size: 21px; margin: 18px 0 12px; color: var(--cream); }
.usp p{ color: var(--stone); font-size: 14.5px; margin:0; }
@media (max-width: 780px){
  .usp-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   AVANT / APRÈS — bloc dédié
   ============================================================ */
.before-after{
  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 36px;
  align-items:start;
}
.ba-col__label{
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: 16px;
  display:inline-block;
  padding: 5px 14px;
}
.ba-col__label.avant{ color: var(--stone); border: 1px solid var(--ink-line); }
.ba-col__label.apres{ color: var(--ink); background: var(--wood); }
.ba-stack{ display:flex; flex-direction:column; gap: 10px; }
.ba-stack img{ width:100%; aspect-ratio: 4/3; object-fit:cover; }
.ba-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ba-grid img{ width:100%; aspect-ratio: 4/3.4; object-fit:cover; }
.ba-divider{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding-top: 60px;
  color: var(--wood);
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 24px;
  font-style: normal;
}
.ba-divider::before, .ba-divider::after{
  content:'';
  width: 1px; height: 60px;
  background: var(--ink-line);
}
@media (max-width: 860px){
  .before-after{ grid-template-columns: 1fr; }
  .ba-divider{ flex-direction:row; padding-top:0; }
  .ba-divider::before, .ba-divider::after{ width:60px; height:1px; }
}

/* ============================================================
   GALERIES
   ============================================================ */
.gallery{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.gallery--tight{ gap: 4px; }
.gallery-item{
  position:relative;
  overflow:hidden;
  background: var(--ink-soft);
  cursor: pointer;
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.js .gallery-item{ opacity:0; transform: translateY(18px); }
.gallery-item.is-visible{ opacity:1; transform: none; }
.gallery-item img{
  width:100%; height:100%;
  object-fit: cover;
  aspect-ratio: 4/5;
  transition: transform .6s var(--ease);
}
.gallery-item:hover img{ transform: scale(1.03); }
.gallery-item .tag{
  position:absolute; top:14px; left:14px;
  font-family: var(--f-label);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  background: rgba(0,0,0,.7);
  color: var(--wood);
  padding: 7px 11px;
  backdrop-filter: blur(4px);
}
.gallery-item .cap{
  position:absolute; left:0; right:0; bottom:0;
  padding: 20px 16px 14px;
  background: linear-gradient(to top, rgba(0,0,0,.92), transparent);
  font-size: 13px;
  color: var(--cream);
  opacity:0;
  transform: translateY(6px);
  transition: opacity .3s, transform .3s;
}
.gallery-item:hover .cap{ opacity:1; transform:none; }

.gallery--feat{
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 140px;
}
.gallery--feat .gallery-item:nth-child(1){ grid-column: span 4; grid-row: span 3; }
.gallery--feat .gallery-item:nth-child(2){ grid-column: span 2; grid-row: span 2; }
.gallery--feat .gallery-item:nth-child(3){ grid-column: span 2; grid-row: span 2; }
.gallery--feat .gallery-item:nth-child(4){ grid-column: span 3; grid-row: span 2; }
.gallery--feat .gallery-item:nth-child(5){ grid-column: span 3; grid-row: span 2; }
.gallery--feat .gallery-item img{ aspect-ratio: auto; height:100%; }

@media (max-width: 980px){
  .gallery{ grid-template-columns: repeat(2, 1fr); }
  .gallery--feat{ grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .gallery--feat .gallery-item{ grid-column: span 1 !important; grid-row: span 1 !important; }
}
@media (max-width: 560px){
  .gallery{ grid-template-columns: 1fr; }
}

/* ---------- Filtres (page Réalisations) ---------- */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin-bottom: 48px;
}
.filter-btn{
  background:none;
  border: 1px solid var(--ink-line);
  color: var(--stone);
  font-family: var(--f-label);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 11px 20px;
  border-radius: var(--radius);
  transition: all .2s;
}
.filter-btn:hover{ border-color: var(--wood); color: var(--cream); }
.filter-btn.is-active{ background: var(--wood); border-color: var(--wood); color: #17120C; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox{
  position: fixed; inset:0;
  background: rgba(6,5,4,.96);
  z-index: 200;
  display:none;
  align-items:center;
  justify-content:center;
  padding: 40px;
}
.lightbox.is-open{ display:flex; }
.lightbox img{
  max-width: 90vw; max-height: 82vh;
  object-fit: contain;
  box-shadow: 0 30px 80px rgba(0,0,0,.5);
}
.lightbox__cap{
  position:absolute; left:0; right:0; bottom:28px;
  text-align:center;
  color: var(--stone);
  font-family: var(--f-label);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.lightbox__close, .lightbox__nav{
  position:absolute;
  background: none; border: 1px solid rgba(255,255,255,.25);
  color: var(--cream);
  width: 44px; height:44px;
  display:flex; align-items:center; justify-content:center;
  font-size: 18px;
  transition: border-color .2s, background .2s;
}
.lightbox__close:hover, .lightbox__nav:hover{ border-color: var(--wood); background: rgba(189,139,92,.1); }
.lightbox__close{ top: 26px; right: 26px; }
.lightbox__prev{ left: 26px; top: 50%; transform: translateY(-50%); }
.lightbox__next{ right: 26px; top: 50%; transform: translateY(-50%); }
@media (max-width: 700px){
  .lightbox__prev, .lightbox__next{ width:38px;height:38px; }
}

/* ============================================================
   SPLIT (image/texte)
   ============================================================ */
.split{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items:center;
}
.split img{ width:100%; aspect-ratio: 6/5; object-fit:cover; }
.split .eyebrow{ margin-bottom: 20px; }
.split h2{ font-size: clamp(26px,3vw,38px); margin-bottom: 20px; }
.split p{ color: var(--stone); }
.split.reverse{ direction: rtl; }
.split.reverse > *{ direction: ltr; }
@media (max-width: 860px){
  .split{ grid-template-columns: 1fr; gap: 32px; }
  .split.reverse{ direction: ltr; }
}

/* ============================================================
   PORTRAIT / SIGNATURE
   ============================================================ */
.signature-block{
  display:grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 64px;
  align-items:center;
}
.signature-block img{
  width:100%;
  aspect-ratio: 3/4;
  object-fit:cover;
  object-position: top center;
}
.signature-name{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(30px, 3.4vw, 44px);
  color: var(--wood);
  margin-bottom: 8px;
}
.signature-role{
  font-family: var(--f-label);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone-dim);
  margin-bottom: 28px;
}
.signature-highlights{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
  margin-top: 26px;
}
.signature-highlights span{
  font-family: var(--f-label);
  font-size: 11.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wood);
  border: 1px solid var(--ink-line);
  padding: 8px 14px;
}
@media (max-width: 780px){
  .signature-block{ grid-template-columns: 1fr; }
  .signature-block img{ max-width: 320px; margin: 0 auto; }
}

/* ============================================================
   PORTRAIT / SIGNATURE (fin)
   ============================================================ */
/* ============================================================
   MARQUES PARTENAIRES
   ============================================================ */
.brands{
  display:flex;
  flex-wrap: wrap;
  gap: 0;
  border-top: 1px solid var(--ink-line);
}
.brands__item{
  flex: 1 1 16.6%;
  min-width: 140px;
  padding: 30px 18px;
  border-right: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  display:flex; align-items:center; justify-content:center;
  font-family: var(--f-label);
  font-size: 14px;
  letter-spacing: .04em;
  color: var(--stone-dim);
  text-align:center;
  transition: color .25s;
}
.brands__item:hover{ color: var(--wood-light); }

/* ============================================================
   BANDEAU AVIS GOOGLE
   ============================================================ */
/* L'aplat cuivre pleine largeur sortait de la palette et écrasait la page.
   Le bandeau redevient noir, signé par un filet dégradé en tête.          */
.review-banner{
  background: var(--ink-soft);
  border-top: 1px solid var(--ink-line);
  border-bottom: 1px solid var(--ink-line);
  padding: 88px 0;
  position: relative;
}
.review-banner::before{
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background: var(--niko-degrade);
}
.review-banner .container{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 30px;
  flex-wrap:wrap;
}
.review-banner__stars{ color: var(--wood); font-size: 18px; letter-spacing: 6px; margin-bottom: 14px; }
.review-banner h3{ color: var(--cream); font-size: clamp(24px,3vw,34px); margin:0; }
.review-banner p{ color: rgba(0,0,0,.75); margin: 6px 0 0; }
.review-banner .btn{ background: var(--ink); color: var(--cream); border-color: var(--ink); }
.review-banner .btn:hover{ background: #000; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  border-top: 1px solid var(--ink-line);
  padding: 80px 0 30px;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 60px;
}
.footer-grid img{ height: 32px; margin-bottom: 18px; }
.footer-grid p{ color: var(--stone-dim); font-size: 14px; }
.footer-col h4{
  font-family: var(--f-label);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 18px;
}
.footer-col a, .footer-col li{
  display:block;
  color: var(--stone);
  font-size: 14.5px;
  margin-bottom: 12px;
  transition: color .2s;
}
.footer-col a:hover{ color: var(--cream); }
.footer-bottom{
  border-top: 1px solid var(--ink-line);
  padding-top: 26px;
  display:flex;
  justify-content: space-between;
  color: var(--stone-dim);
  font-size: 12.5px;
  flex-wrap:wrap;
  gap:10px;
}
@media (max-width: 860px){
  .footer-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px){
  .footer-grid{ grid-template-columns: 1fr; }
}

/* ============================================================
   PAGE HEADER (pages internes)
   ============================================================ */
.page-hero{
  padding: 168px 0 70px;
  border-bottom: 1px solid var(--ink-line);
}
.page-hero h1{ font-size: clamp(34px, 5vw, 58px); max-width: 18ch; }
.page-hero p.lede{ color: var(--stone); max-width: 50ch; font-size: 16.5px; margin-top: 18px; }

/* ============================================================
   FORMULAIRE CONTACT
   ============================================================ */
.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.form-grid .field-full{ grid-column: 1 / -1; }
.field label{
  display:block;
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--stone);
  margin-bottom: 10px;
}
.field input, .field select, .field textarea{
  width:100%;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  color: var(--cream);
  padding: 14px 16px;
  font-family: var(--f-body);
  font-size: 15px;
  transition: border-color .2s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color: var(--wood);
}
.field textarea{ resize: vertical; min-height: 130px; }
.form-note{ font-size: 13px; color: var(--stone-dim); margin-top: 18px; }
@media (max-width: 700px){
  .form-grid{ grid-template-columns: 1fr; }
}

/* ---------- Cartes coordonnées ---------- */
.info-cards{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink-line);
  border: 1px solid var(--ink-line);
  margin-bottom: 70px;
}
.info-card{ background: var(--ink); padding: 34px; }
.info-card h4{
  font-family: var(--f-label);
  font-size: 11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--wood); margin-bottom: 16px;
}
.info-card p{ color: var(--cream); font-size: 15px; margin:0 0 6px; }
.info-card a{ color: var(--wood-light); }
.hours-table{ width:100%; border-collapse: collapse; }
.hours-table td{ padding: 5px 0; font-size: 14px; color: var(--stone); border-bottom: 1px solid var(--ink-line); }
.hours-table td:last-child{ text-align:right; color: var(--cream); }
.hours-table tr:last-child td{ border-bottom:none; }
.hours-table .closed{ color: var(--stone-dim); font-style:italic; }
@media (max-width: 860px){
  .info-cards{ grid-template-columns: 1fr; }
}

.map-embed{ width:100%; height: 420px; border:0; filter: grayscale(.4) invert(.92) contrast(.9); }

/* ---------- Fournisseur / marque partenaire mise en avant ---------- */
.supplier-card{
  border: 1px solid var(--ink-line);
  padding: 48px;
  display:grid;
  grid-template-columns: auto 1fr auto;
  gap: 34px;
  align-items:center;
}
.supplier-card__mark{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: 30px;
  color: var(--wood);
  border-right: 1px solid var(--ink-line);
  padding-right: 34px;
}
.supplier-card p{ color: var(--stone); margin:0; }
@media (max-width: 760px){
  .supplier-card{ grid-template-columns: 1fr; text-align:center; }
  .supplier-card__mark{ border-right:none; padding-right:0; border-bottom: 1px solid var(--ink-line); padding-bottom: 20px; }
}

/* ---------- Video block ---------- */
.video-block{
  position:relative;
  aspect-ratio: 16/9;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.video-block iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video-placeholder{ text-align:center; color: var(--stone-dim); padding: 30px; }
.video-placeholder .eyebrow{ justify-content:center; }

/* ---------- reveal utility ---------- */
.reveal{ transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal{ opacity:0; transform: translateY(22px); }
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- misc ---------- */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
.divider{ border:0; border-top:1px solid var(--ink-line); margin: 0; }
.back-link{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--f-label); font-size: 12px; letter-spacing:.08em; text-transform:uppercase;
  color: var(--stone); margin-bottom: 26px;
}
.back-link:hover{ color: var(--wood); }
/* Logo agrandi */
/* Logo agrandi */
.nav__logo img { height: 76px !important; }

/* Logo footer agrandi */
.footer-brand img,
.footer__brand img,
.footer__logo img,
.footer-col img { height: 72px !important; width: auto !important; }

/* Décalage du hero sous le bandeau fixe */
.hero__content { padding-top: 90px !important; }

@media (max-width: 640px) {
  .nav__logo img { height: 54px !important; }
  .hero__content { padding-top: 70px !important; }
}/* Vidéo verticale (format Short) */
.video-vertical {
  position: relative;
  aspect-ratio: 9/16;
  max-width: 320px;
  border-radius: 8px;
  overflow: hidden;
}
.video-vertical iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* Bande logos partenaires */
.brands-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 34px 46px;
  margin-top: 26px;
}
.brands-logos img {
  height: 34px;
  width: auto;
  opacity: .72;
  transition: opacity .3s ease;
}
.brands-logos img:hover { opacity: 1; }
.brands-logos img[alt="Electrolux"] { height: 30px; }
.brands-logos img[alt="Ambiance Dressing"],
.brands-logos img[alt="Luisina Cucine"],
.brands-logos img[alt="Schock"] { height: 40px; }

@media (max-width: 640px) {
  .brands-logos { gap: 24px 30px; }
  .brands-logos img { height: 26px; }
}

/* ============================================================
   NIKO DESIGN — couche d'identité
   Ajouts au système existant : rythme, matière, signature.
   ============================================================ */

/* ---------- Rythme vertical : l'espace vide est le budget principal ---- */
section{ padding-block: clamp(72px, 11vw, 160px); }
.section-tight{ padding-block: clamp(48px, 7vw, 88px); }
.section-alt{ background: var(--ink-soft); }

/* ---------- Navigation ------------------------------------------------- */
.site-header{
  background: linear-gradient(to bottom, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 60%, transparent 100%);
}
.site-header.is-scrolled{
  background: linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 62%, transparent 100%);
  backdrop-filter: none;
  border-bottom: 1px solid transparent;
}
.nav__links a{
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .12em;
}

/* ---------- Signature « plan → rendu » --------------------------------
   Une trame technique qui affleure dans le tiers droit du héros : elle dit
   la conception 3D sans recouvrir la photo, et elle tient quelle que soit
   l'image que Nicolas mettra derrière.                                   */
.hero::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, rgba(182,154,122,.22) 0 1px, transparent 1px 92px),
    repeating-linear-gradient(180deg, rgba(182,154,122,.22) 0 1px, transparent 1px 92px);
  -webkit-mask-image: linear-gradient(to right, transparent 62%, #000 96%);
          mask-image: linear-gradient(to right, transparent 62%, #000 96%);
}
.hero__content{ z-index:1; }

/* ---------- Le slogan du héros ---------------------------------------- */
.hero__slogan{
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--wood);
  margin-bottom: 22px;
}

/* ---------- Nuancier : les finitions sont du produit, pas de la marque -
   On garde les vraies teintes de façade, mais réduites à une pastille et
   posées dans un cadre neutre, pour qu'elles ne concurrencent pas l'or.  */
.swatch-rail__item{ padding: 26px 20px 26px 46px; }
.swatch-rail__item::before{
  content:''; position:absolute;
  left:20px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%;
  background: var(--swatch-color);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14);
  transition: transform .3s var(--ease);
}
.swatch-rail__item:hover::before{ transform:translateY(-50%) scale(1.25); }
.swatch-rail__num{
  display:block;
  font-family: var(--f-label);
  font-size: 10px; font-weight:500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--stone-dim);
  margin-bottom: 6px;
}
.swatch-rail__label{
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 15px;
  color: var(--cream);
}

/* ---------- Cartes, champs : la profondeur vient du noir, pas de l'ombre */
.info-card, .supplier-card{ background: var(--ink-card); }
.field input, .field select, .field textarea{ background: var(--ink-card); }
.usp__num{
  font-family: var(--f-label);
  font-size: 11px; font-weight:500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--wood);
}

/* ---------- Filet de marque : la ligne sous le nom dans le logo -------- */
.divider, .section-head + .divider{
  height:1px; border:0;
  background: var(--niko-degrade);
}
.section-head{ margin-bottom: clamp(40px, 5vw, 64px); }

/* ---------- Marques partenaires : discrètes, sans concurrencer les photos */
.brands-logos img{
  filter: grayscale(1) brightness(1.9);
  opacity:.5;
  transition: opacity .25s;
}
.brands-logos img:hover{ opacity:.9; }

/* ---------- Pied de page ---------------------------------------------- */
.site-footer{ border-top: 1px solid var(--ink-line); background: var(--ink); }
.footer-col h4{
  font-family: var(--f-label);
  font-size: 11px; font-weight:500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--wood);
}

/* ---------- Sécurité : le contenu reste visible sans JavaScript --------
   Les apparitions au défilement partent d'une opacité nulle. Sans ce
   garde-fou, une page imprimée ou capturée affiche des sections vides.  */
.reveal{ opacity:1; transform:none; }
html.js .reveal{ opacity:0; transform: translateY(16px); }
html.js .reveal.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce), print{
  html.js .reveal{ opacity:1; transform:none; }
}


/* ---------- Corrections de mise en page --------------------------------
   La mosaïque de réalisations laissait des trous : les tuiles n'étaient pas
   étirées à la hauteur de leur cellule de grille.                        */
/* La mosaïque à six colonnes laissait des trous et une base irrégulière :
   les cellules ne se remplissaient jamais complètement. On la remplace par
   une grille régulière de trois colonnes — une réalisation mise en avant sur
   deux colonnes, quatre cartes en 4:5 — qui se ferme proprement.          */
.gallery--feat{
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 22px;
}
.gallery--feat .gallery-item{
  grid-column: auto !important;
  grid-row: auto !important;
  position:relative; overflow:hidden;
  aspect-ratio: 4/5;
}
.gallery--feat .gallery-item:nth-child(1){
  grid-column: span 2 !important;
  aspect-ratio: 8/5;
}
.gallery--feat .gallery-item img{
  position:absolute; inset:0;
  width:100%; height:100%;
  aspect-ratio:auto;
  object-fit:cover;
  display:block;
}
@media (max-width: 980px){
  .gallery--feat{ grid-template-columns: repeat(2, 1fr); }
  .gallery--feat .gallery-item:nth-child(1){ grid-column: span 2 !important; }
}
@media (max-width: 560px){
  .gallery--feat{ grid-template-columns: 1fr; }
  .gallery--feat .gallery-item:nth-child(1){ grid-column: span 1 !important; }
}

/* Les logos des marques sont des noirs sur fond transparent : il faut les
   inverser pour qu'ils existent sur fond noir, pas les éclaircir.        */
.brands-logos img{
  filter: brightness(0) invert(1);
  opacity:.45;
}
.brands-logos img:hover{ opacity:.85; }

/* Le texte du bandeau d'avis suivait la couleur du fond cuivre supprimé. */
.review-banner p{ color: var(--stone); margin:0; }


/* ---------- En-tête : aucun cadre au défilement -----------------------
   Le bandeau noir opaque coupait la page en deux. Il est remplacé par un
   voile en dégradé qui se dissout vers le bas : la navigation reste lisible
   sur une photo claire, sans bord franc.                                 */
.site-header, .site-header.is-scrolled{
  background: linear-gradient(to bottom, rgba(0,0,0,.88) 0%, rgba(0,0,0,.45) 62%, transparent 100%);
  backdrop-filter: none;
  border-bottom: 0;
}
.site-header.is-scrolled{ padding-block: 0; }

/* ---------- Logo : le bandeau horizontal, sans la mention de ville ----- */
.nav__logo img{ height: 44px; }
.site-header.is-scrolled .nav__logo img{ height: 38px; transition: height .3s var(--ease); }
.footer-col img{ max-width: 260px; height:auto; }
@media (max-width: 640px){ .nav__logo img{ height: 34px; } }


/* ============================================================
   VIDÉOS
   ============================================================
   Le lecteur YouTube garde toujours les proportions de la vidéo et remplit
   le reste du cadre en noir. Une vidéo filmée à l'horizontale placée dans un
   cadre vertical de 320 px se retrouve donc minuscule, avec deux bandes
   noires : ce n'est pas le lecteur qui est mal réglé, c'est le cadre qui ne
   correspond pas au format du tournage.                                    */

/* Vidéo filmée à l'horizontale — le cas courant. Le cadre prend toute la
   largeur de sa colonne, en 16:9 : la vidéo remplit, aucune bande noire.  */
.video-block, .video-16-9{
  position:relative;
  aspect-ratio: 16/9;
  width:100%;
  max-width:none;
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow:hidden;
}
.video-block iframe, .video-16-9 iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
}

/* Vidéo filmée à la verticale (format Short) — cadre 9:16, un peu élargi. */
.video-vertical{
  position: relative;
  aspect-ratio: 9/16;
  width:100%;
  max-width: min(380px, 100%);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--ink-soft);
}
.video-vertical iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* Rattrapage immédiat pour la vidéo client « Dekton », qui est filmée à
   l'horizontale mais posée dans le cadre vertical de la page Réalisations.
   Dès que la classe sera corrigée en video-block dans le HTML, cette règle
   ne servira plus à rien — elle peut rester, elle ne gêne pas.            */
.video-vertical:has(iframe[src*="xNqo4OGYBeU"]){
  aspect-ratio: 16/9;
  max-width: none;
}


/* ============================================================
   ZONE D'INTERVENTION
   ============================================================
   Les communes sont du contenu, pas une liste de mots-clés : on les présente
   en trois colonnes lisibles, avec un filet or discret devant chaque nom.  */
.zone-grid{
  display:grid;
  gap: clamp(32px, 4vw, 56px);
  grid-template-columns: 1fr;
}
@media (min-width: 760px){ .zone-grid{ grid-template-columns: repeat(3, 1fr); } }
.zone-col h3{
  font-family: var(--f-label);
  font-size: 11px; font-weight:500;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--wood);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-line);
}
.communes{ list-style:none; margin:0; padding:0;
  columns: 2; column-gap: 24px; }
@media (min-width: 760px){ .communes{ columns: 1; } }
.communes li{
  color: var(--stone);
  font-size: 15px;
  line-height: 1.9;
  break-inside: avoid;
}
.communes li::before{
  content:'';
  display:inline-block;
  width:10px; height:1px;
  background: var(--wood);
  opacity:.55;
  vertical-align: middle;
  margin-right: 10px;
}

/* ============================================================
   AVIS CLIENTS
   ============================================================
   Des avis réels, recopiés depuis la fiche Google, avec le lien vers la
   fiche pour que le visiteur puisse les vérifier lui-même. Jamais de
   témoignage inventé : c'est ce qui distingue une preuve d'un décor.      */
.avis-grid{
  display:grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px){ .avis-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px){ .avis-grid{ grid-template-columns: repeat(3, 1fr); } }
.avis{
  background: var(--ink-card);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 32px;
  display:flex; flex-direction:column; gap:16px;
  transition: border-color var(--ease) .24s;
}
.avis:hover{ border-color: rgba(182,154,122,.5); }
.avis__note{ color: var(--wood); font-size: 14px; letter-spacing: 4px; }
.avis__texte{
  color: var(--cream);
  font-size: 15.5px;
  line-height: 1.7;
  margin:0;
  flex:1;
}
.avis__auteur{
  font-family: var(--f-label);
  font-size: 11px; font-weight:500;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--stone-dim);
  margin:0;
}
.avis__auteur b{ color: var(--stone); font-weight:500; }
.avis-resume{
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  margin-bottom: 36px;
}
.avis-resume__note{
  font-family: var(--f-display);
  font-weight:300;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  color: var(--wood);
  line-height:1;
}
.avis-resume__detail{ color: var(--stone); font-size: 14px; }


/* ============================================================
   MOBILE — confort de lecture et cibles tactiles
   ============================================================ */
@media (max-width: 640px){

  /* Un libellé long comme « Prendre rendez-vous en showroom » ne tenait pas
     dans 360 px : le bouton en white-space:nowrap poussait la page entière
     et créait un défilement horizontal. Sur mobile les boutons passent en
     pleine largeur et peuvent revenir à la ligne.                          */
  .btn{
    white-space: normal;
    text-align: center;
    justify-content: center;
    padding: 16px 22px;
    line-height: 1.35;
  }
  .btn-row{ gap: 12px; }
  .btn-row .btn{ flex: 1 1 100%; }

  /* Cibles tactiles : un doigt couvre environ 45 px. En dessous de 44 px de
     haut, on rate le lien une fois sur trois — et ici ce sont les liens qui
     déclenchent un appel ou un email.                                      */
  .nav__burger{
    width: 44px; height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
  .nav__mobile a{
    min-height: 48px;
    display: flex;
    align-items: center;
  }
  .footer-col a{
    min-height: 40px;
    display: flex;
    align-items: center;
  }
  .info-card a{
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }

  /* Les filtres de la page Réalisations : 38 px, un peu juste au pouce */
  .filter-btn{ padding: 14px 20px; }
  .filters{ gap: 10px; }

  /* Le portrait et sa légende : 12 px passe mal sur un écran tenu à bout de bras */
  .signature-role{ font-size: 13px; }
}

/* Garde-fou général : aucune image ni aucun média ne dépasse sa colonne,
   quelle que soit la largeur d'écran.                                     */
img, iframe, video, table{ max-width: 100%; }

/* ============================================================
   ANIMATIONS — une expérience plus vivante, dans la retenue
   ============================================================
   Le principe reste celui de la charte : des transitions de 200-300 ms,
   un zoom discret, un fondu au défilement. Rien qui rebondit, rien qui
   clignote. Tout est neutralisé sous prefers-reduced-motion, tout est
   visible sans JavaScript (voir la sécurité .reveal déjà en place).      */

/* ---------- Entrée du héros au chargement ------------------- */
@keyframes niko-entree{
  from{ opacity:0; transform: translateY(18px); }
  to{ opacity:1; transform:none; }
}
.js .hero__slogan,
.js .hero h1,
.js .hero p.lede,
.js .hero .btn-row{
  opacity:0;
  animation: niko-entree .8s var(--ease) forwards;
}
.js .hero__slogan{ animation-delay: .05s; }
.js .hero h1{       animation-delay: .18s; }
.js .hero p.lede{   animation-delay: .36s; }
.js .hero .btn-row{ animation-delay: .5s; }

/* ---------- Apparitions en cascade dans les grilles ---------- */
.usp-grid .usp:nth-child(1), .avis-grid .avis:nth-child(1), .gallery-item:nth-child(1){ transition-delay: 0ms; }
.usp-grid .usp:nth-child(2), .avis-grid .avis:nth-child(2), .gallery-item:nth-child(2){ transition-delay: 90ms; }
.usp-grid .usp:nth-child(3), .avis-grid .avis:nth-child(3), .gallery-item:nth-child(3){ transition-delay: 180ms; }
.avis-grid .avis:nth-child(4), .gallery-item:nth-child(4){ transition-delay: 270ms; }
.avis-grid .avis:nth-child(5), .gallery-item:nth-child(5){ transition-delay: 360ms; }
.avis-grid .avis:nth-child(6), .gallery-item:nth-child(6){ transition-delay: 450ms; }

/* ---------- Cartes : un léger soulèvement, un filet qui se déploie ---------- */
.avis{ transition: border-color .24s var(--ease), transform .3s var(--ease); }
.avis:hover{ transform: translateY(-4px); }

.usp, .info-card{ position:relative; overflow:hidden; }
.usp::before, .info-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background: var(--niko-degrade);
  transform: scaleX(0); transform-origin:left;
  transition: transform .35s var(--ease);
}
.usp:hover::before, .info-card:hover::before{ transform: scaleX(1); }

/* ---------- Navigation : le filet qui se déploie au survol ---------- */
.nav__links a::after{
  content:'';
  position:absolute; left:0; bottom:0;
  width:0; height:1px;
  background: var(--wood);
  transition: width .25s var(--ease);
}
.nav__links a:hover::after{ width:100%; }
.nav__links a[aria-current="page"]::after{ width:100%; }

/* ---------- Boutons : un léger retour tactile au clic ---------- */
.btn{ transition: background .24s var(--ease), color .24s var(--ease), border-color .24s var(--ease), filter .24s var(--ease), transform .15s var(--ease); }
.btn:active{ transform: scale(.96); }

/* ---------- Repli complet si l'utilisateur demande moins de mouvement --- */
@media (prefers-reduced-motion: reduce){
  .js .hero__slogan, .js .hero h1, .js .hero p.lede, .js .hero .btn-row{
    opacity:1; animation:none;
  }
  .avis:hover{ transform:none; }
  .usp::before, .info-card::before{ transition:none; }
  .btn:active{ transform:none; }
}

/* ==========================================================================
   Menu déroulant « Nos produits » — ajouté en août 2026
   ========================================================================== */
.nav__grp{ position: relative; list-style: none; }
.nav__decl{
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-size: 13px; letter-spacing: .06em;
  text-transform: uppercase; font-weight: 500;
  color: var(--stone); background: none; border: 0; padding: 6px 0;
  cursor: pointer; transition: color .2s;
}
.nav__grp:hover .nav__decl,
.nav__grp:focus-within .nav__decl,
.nav__grp.is-actif .nav__decl{ color: var(--cream); }
.nav__decl svg{ width: 9px; height: 9px; opacity: .75; transition: transform .2s; }
.nav__grp[data-ouvert] .nav__decl svg{ transform: rotate(180deg); }
.nav__grp.is-actif .nav__decl::after{
  content: ''; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--wood);
}

.nav__sous{
  position: absolute; top: calc(100% + 16px); left: 50%;
  transform: translate(-50%, -6px);
  min-width: 262px; padding: 6px;
  background: #0B0B0B; border: 1px solid rgba(255,255,255,.10);
  display: flex; flex-direction: column;
  opacity: 0; visibility: hidden;
  transition: opacity .2s, transform .2s, visibility .2s;
  box-shadow: 0 18px 44px rgba(0,0,0,.7);
}
/* pont invisible : la souris peut descendre du bouton vers le panneau */
.nav__sous::before{ content: ''; position: absolute; top: -16px; left: 0; right: 0; height: 16px; }
.nav__grp:hover .nav__sous,
.nav__grp:focus-within .nav__sous,
.nav__grp[data-ouvert] .nav__sous{ opacity: 1; visibility: visible; transform: translate(-50%, 0); }

.nav__sous a{
  padding: 11px 14px; font-size: 14px; letter-spacing: .02em;
  text-transform: none; color: var(--stone);
  transition: background .2s, color .2s;
}
.nav__sous a:hover{ background: rgba(182,154,122,.10); color: var(--cream); }
.nav__sous a::after{ display: none !important; }
.nav__sous b{ display: block; font-weight: 500; color: inherit; }
.nav__sous span{
  display: block; font-family: var(--f-body); font-size: 12px;
  letter-spacing: 0; color: var(--stone-dim); margin-top: 2px;
}

@media (max-width: 860px){ .nav__grp{ display: none; } }

/* ============================================================
   PORTRAIT D'OUVERTURE — citation et tuiles « univers »
   ============================================================ */
.portrait-haut{ padding-block: clamp(56px, 7vw, 104px); }
.citation{
  margin: 0 0 26px;
  padding-left: 26px;
  border-left: 1px solid var(--wood);
}
.citation p{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.45;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.citation p::before{ content: "\00AB\00A0"; color: var(--wood); }
.citation p::after { content: "\00A0\00BB"; color: var(--wood); }

.univers{ margin-top: clamp(52px, 6vw, 88px); }
.univers__t{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(26px, 3vw, 40px);
  margin: 0;
}
.univers__grille{
  display: grid;
  gap: clamp(12px, 1.6vw, 22px);
  grid-template-columns: repeat(4, 1fr);
  margin-top: clamp(28px, 3.2vw, 44px);
}
/* la première tuile occupe deux colonnes : 4 + 3 sur deux lignes */
.univers__grille .tuile:first-child{ grid-column: span 2; }

.tuile{
  position: relative;
  display: block;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  text-decoration: none;
  transition: transform .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease);
}
.tuile__m{ display: block; height: 100%; }
.tuile__m img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .4s var(--ease);
  filter: brightness(.72) saturate(.92);
}
.tuile::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.78) 100%);
  pointer-events: none;
}
.tuile__t{
  position: absolute;
  left: 20px; right: 20px; bottom: 15px;
  z-index: 2;
  font-family: var(--f-label);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color .3s var(--ease);
}
.tuile:hover, .tuile:focus-visible{
  transform: translateY(-6px);
  border-color: var(--wood);
  box-shadow: 0 18px 42px rgba(0,0,0,.6);
}
.tuile:hover .tuile__m img{ transform: scale(1.06); filter: brightness(.86) saturate(1); }
.tuile:hover .tuile__t{ color: var(--wood-light); }

@media (max-width: 1020px){
  .univers__grille{ grid-template-columns: repeat(2, 1fr); }
  .univers__grille .tuile:first-child{ grid-column: span 2; }
}
@media (max-width: 560px){
  .univers__grille{ grid-template-columns: 1fr; gap: 14px; }
  .univers__grille .tuile:first-child{ grid-column: span 1; }
  .tuile__m img{ aspect-ratio: 16 / 7; }
}
@media (prefers-reduced-motion: reduce){
  .tuile:hover{ transform: none; }
  .tuile:hover .tuile__m img{ transform: none; }
}

/* ============================================================
   OUVERTURE — portrait à gauche, choix produits à droite
   ============================================================ */
.hero--moi{
  min-height: auto;
  align-items: center;
  padding: clamp(126px, 13vh, 178px) 0 clamp(64px, 8vh, 100px);
}
.hero--moi .hero__bg{ filter: brightness(.38) saturate(.8); }
.hero--moi .hero__scrim{
  background:
    linear-gradient(to top, #000 3%, rgba(0,0,0,.62) 55%, rgba(0,0,0,.76) 100%),
    linear-gradient(to right, rgba(0,0,0,.74), rgba(0,0,0,.44) 70%);
}
.hero--moi h1{
  font-size: clamp(34px, 4.4vw, 60px);
  max-width: 20ch;
  margin-bottom: clamp(34px, 4vw, 54px);
}

.ouverture{
  display: grid;
  grid-template-columns: minmax(240px, .72fr) 1.28fr;
  gap: clamp(32px, 4.6vw, 72px);
  align-items: start;
}

/* ---- colonne gauche : la photo puis le texte ---- */
.ouverture__photo{ position: relative; margin-bottom: 26px; }
.ouverture__photo img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top center;
  border: 1px solid rgba(255,255,255,.14);
}
.ouverture__photo::after{
  content: '';
  position: absolute;
  left: 13px; right: -13px; top: 13px; bottom: -13px;
  border: 1px solid var(--wood-deep);
  z-index: -1;
}
.hero__sign{ margin: 0 0 20px; }
.hero__sign b{
  display: block;
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(21px, 2vw, 28px);
  color: var(--wood);
  line-height: 1.15;
}
.hero__sign span{
  display: block;
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--stone-dim);
  margin-top: 6px;
}
.citation{
  margin: 0 0 20px;
  padding-left: 22px;
  border-left: 1px solid var(--wood);
}
.citation p{
  font-family: var(--f-display);
  font-weight: 300;
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.45;
  color: var(--cream);
  margin: 0;
  text-wrap: balance;
}
.citation p::before{ content: "\00AB\00A0"; color: var(--wood); }
.citation p::after { content: "\00A0\00BB"; color: var(--wood); }
.ouverture__p{
  color: var(--stone);
  font-size: 14.5px;
  line-height: 1.72;
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
}
@media (max-width: 700px){ .ouverture__p{ text-align: left; hyphens: manual; } }
.signature-highlights{ display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }
.signature-highlights span{
  font-family: var(--f-label);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--wood);
  border: 1px solid rgba(255,255,255,.16);
  padding: 7px 12px;
}

/* ---- colonne droite : les tuiles puis les deux boutons ---- */
.ouverture__choix .eyebrow{ margin-bottom: 18px; }
.univers__grille{
  display: grid;
  gap: clamp(10px, 1.1vw, 16px);
  grid-template-columns: repeat(3, 1fr);
}
.univers__grille .tuile:first-child{ grid-column: span 3; }
.univers__grille .tuile:first-child .tuile__m img{ aspect-ratio: 16 / 7; }
.ouverture__btn{ margin-top: clamp(20px, 2.4vw, 30px); }

.tuile{
  position: relative;
  display: block;
  height: 100%;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--ink-line);
  text-decoration: none;
  transition: transform .34s var(--ease), border-color .34s var(--ease), box-shadow .34s var(--ease);
}
.tuile__m{ display: block; height: 100%; }
.tuile__m img{
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s var(--ease), filter .4s var(--ease);
  filter: brightness(.7) saturate(.92);
}
.tuile::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 32%, rgba(0,0,0,.8) 100%);
  pointer-events: none;
}
.tuile__t{
  position: absolute;
  left: 16px; right: 14px; bottom: 12px;
  z-index: 2;
  font-family: var(--f-label);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--cream);
  transition: color .3s var(--ease);
}
.tuile:hover, .tuile:focus-visible{
  transform: translateY(-5px);
  border-color: var(--wood);
  box-shadow: 0 16px 38px rgba(0,0,0,.62);
}
.tuile:hover .tuile__m img{ transform: scale(1.06); filter: brightness(.86) saturate(1); }
.tuile:hover .tuile__t{ color: var(--wood-light); }

@media (max-width: 1080px){
  .ouverture{ grid-template-columns: 1fr; gap: 44px; }
  .ouverture__moi{ display: grid; grid-template-columns: minmax(190px, 260px) 1fr;
                   gap: 30px; align-items: start; }
  .ouverture__photo{ margin-bottom: 0; grid-row: span 5; }
}
@media (max-width: 700px){
  .ouverture__moi{ grid-template-columns: 1fr; }
  .ouverture__photo{ max-width: 280px; grid-row: auto; }
  .univers__grille{ grid-template-columns: repeat(2, 1fr); }
  .univers__grille .tuile:first-child{ grid-column: span 2; }
}
@media (max-width: 380px){
  .univers__grille{ grid-template-columns: 1fr; }
  .univers__grille .tuile:first-child{ grid-column: span 1; }
  .tuile__t{ font-size: 11px; letter-spacing: .1em; }
}
@media (max-width: 700px){
  .tuile__t{ left: 13px; right: 11px; font-size: 11px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce){
  .tuile:hover{ transform: none; }
  .tuile:hover .tuile__m img{ transform: none; }
}

/* équilibre des deux colonnes : les boutons descendent en bas (écrans larges) */
@media (min-width: 1081px){
  .ouverture{ align-items: stretch; }
  .ouverture__choix{ display: flex; flex-direction: column; }
  .ouverture__btn{ margin-top: auto; padding-top: clamp(22px, 2.6vw, 34px); }
}

/* ============================================================
   ÉTIQUETTES D'ORIGINE DE FABRICATION
   ============================================================ */
.pavillons{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
.pavillon{
  display:inline-flex; align-items:center; gap:9px;
  padding:7px 13px 7px 9px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.03);
  font-family:var(--f-label);
  font-size:11px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--stone); white-space:nowrap;
}
.pavillon svg{ width:21px; height:14px; flex:none; border-radius:1px;
  box-shadow:0 0 0 1px rgba(255,255,255,.22); }
.pavillon b{ color:var(--cream); font-weight:500; }

/* ============================================================
   Accueil — ligne « Cuisiniste près de Caen » intégrée au titre H1 (sept. 2026)
   Même apparence que l'ancien slogan, mais lue par Google comme partie du titre.
   ============================================================ */
.hero h1 .hero__kicker{ display:block; line-height:1.5; letter-spacing:.22em; font-weight:400; }

/* Menu mobile : intertitre « Nos univers » (oct. 2026) */
.nav__mobile-t{display:block;font-family:var(--f-label);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wood);padding:14px 0 4px;}