/* =====================================================================
   JOYDESIGN INTÉRIEUR — SYSTÈME DE DESIGN
   Fondations partagées : couleurs, typographie, espacements, composants.
   Direction : éditorial Didone, greige + espresso + laiton.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;1,6..96,400;1,6..96,500&family=Hanken+Grotesk:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- Couleurs : papier / encre ---- */
  --paper:      #F4EFE7;   /* ivoire chaud — fond principal */
  --paper-2:    #EFE8DC;   /* surface légèrement plus profonde */
  --sand:       #E4DAC9;   /* sable — cartes, séparateurs */
  --sand-deep:  #D8CBB6;

  --ink:        #0f1f31;   /* bleu nuit — texte fort, presque noir */
  --ink-2:      #3C4654;   /* texte courant (bleu ardoise) */
  --ink-3:      #6B7280;   /* texte secondaire / légendes */
  --ink-bg:     #0f1f31;   /* fond sombre (hero, footer) */
  --ink-bg-2:   #16293c;

  --greige:     #9C8A74;   /* taupe — accents neutres */
  --greige-soft:#B7A98F;

  /* ---- Accents de marque ---- */
  --brass:      #B08D57;   /* JOYDESIGN — laiton / prestige pro */
  --brass-deep: #8C6C3C;
  --brass-soft: #D9C29A;

  --clay:       #A36C4F;   /* NEWDECO — terre / chaleur résidentielle */
  --clay-deep:  #80513A;
  --clay-soft:  #D4B19D;

  /* accent actif (surchargé par .theme--newdeco) */
  --accent:      var(--brass);
  --accent-deep: var(--brass-deep);
  --accent-soft: var(--brass-soft);

  /* ---- Lignes & ombres ---- */
  --line:        rgba(43,37,34,.14);
  --line-strong: rgba(43,37,34,.30);
  --line-light:  rgba(244,239,231,.20);
  --shadow-sm:  0 1px 2px rgba(43,37,34,.05);
  --shadow-md:  0 18px 40px -24px rgba(43,37,34,.45);
  --shadow-lg:  0 40px 90px -40px rgba(43,37,34,.55);

  /* ---- Typographie ---- */
  --font-display: 'Bodoni Moda', 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', system-ui, sans-serif;

  /* échelle fluide */
  --t-mega:  clamp(3.4rem, 1.5rem + 8vw, 8rem);
  --t-h1:    clamp(2.6rem, 1.4rem + 5vw, 5.25rem);
  --t-h2:    clamp(2rem, 1.2rem + 3vw, 3.5rem);
  --t-h3:    clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  --t-h4:    clamp(1.2rem, 1rem + .6vw, 1.5rem);
  --t-lead:  clamp(1.1rem, 1rem + .45vw, 1.4rem);
  --t-body:  1.0625rem;
  --t-sm:    0.9rem;
  --t-xs:    0.78rem;

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-body:  1.72;

  --track-eyebrow: 0.26em;
  --track-caps:    0.12em;

  /* ---- Espacements (base 4) ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --s-11: 176px;

  --gutter: clamp(20px, 5vw, 80px);
  --maxw: 1320px;

  /* ---- Formes ---- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-pill: 999px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur: .55s;
}

/* Variante NEWDECO : bascule l'accent vers la terre */
.theme--newdeco{
  --accent:      var(--clay);
  --accent-deep: var(--clay-deep);
  --accent-soft: var(--clay-soft);
}

/* ===== NEWDECO — Variantes de section pour alterner l'ambiance ===== */
/* Force fond ivoire chaud (=background des pages) sur une section theme--newdeco
   afin de casser la monotonie du gradient beige/terre par un ton plus clair. */
.theme--newdeco.section--paper-plain,
.section--paper-plain.theme--newdeco{
  background:var(--paper) !important;
}
/* Lettrage Nd. en background des sections Newdeco (pendant du .deco-joy côté Joydesign) */
.deco-nd{
  position:absolute; pointer-events:none; user-select:none;
  font-family:var(--font-display); font-weight:500; font-style:italic; line-height:.85;
  font-size:clamp(220px,32vw,560px); letter-spacing:-.04em;
  color:var(--clay-deep); opacity:.06;
  z-index:0;
}
.deco-nd .dot{ color:var(--clay); opacity:.85; }
.deco-nd--right-top{ right:calc((100% - 100vw) / 2); top:-.15em; transform:none; }
.deco-nd--left-bottom{ left:-.08em; bottom:-.25em; transform:none; }
.deco-nd--right{ right:-.05em; top:50%; transform:translateY(-50%); }
/* Section "encart" : encadré terre pâle avec bordure clay à gauche (pull-quote / focus) */
.theme--newdeco .nd-highlight{
  border-left:4px solid var(--clay);
  background:rgba(212,177,157,.22);
  padding:clamp(24px,3vw,40px) clamp(24px,3vw,40px);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  margin:8px 0;
}
.theme--newdeco .nd-highlight p{ margin:0; color:var(--ink); }
.theme--newdeco .nd-highlight p + p{ margin-top:12px; }
.theme--newdeco .nd-highlight .nd-highlight__quote{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.2rem,1.5vw,1.55rem); line-height:1.35; color:var(--clay-deep);
}
/* Trio de cards épurées Newdeco : arrondis asymétriques + accent clay */
.theme--newdeco .nd-trio{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2vw,28px);
  margin-top:32px;
}
.theme--newdeco .nd-trio__card{
  background:#FFFFFF;
  border:1px solid rgba(163,108,79,.18);
  border-radius:18px 4px 18px 4px;
  padding:clamp(22px,2.4vw,32px);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.theme--newdeco .nd-trio__card:hover{
  transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(128,81,58,.14);
  border-color:var(--clay);
}
.theme--newdeco .nd-trio__num{
  font-family:var(--font-display); font-style:italic;
  color:var(--clay); font-size:1.35rem; margin:0 0 10px;
}
.theme--newdeco .nd-trio__title{
  font-family:var(--font-display); font-style:italic;
  font-size:1.2rem; color:var(--ink); margin:0 0 12px; line-height:1.25;
}
.theme--newdeco .nd-trio__desc{
  color:var(--ink-2); font-size:.94rem; line-height:1.55; margin:0;
}
@media (max-width:820px){
  .theme--newdeco .nd-trio{ grid-template-columns:1fr; }
}

/* ===== NEWDECO — Phases (bulles pleines terre, flèches, différenciation forte vs cartes Joy) ===== */
.theme--newdeco .nd-flow{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(24px,3vw,56px);
  position:relative; padding-top:20px;
}
.theme--newdeco .nd-flow__step{
  text-align:center; position:relative; z-index:1; padding:0 10px;
}
/* Flèches connectrices entre les bulles (desktop only) */
.theme--newdeco .nd-flow__step:not(:last-child)::after{
  content:""; position:absolute; top:78px; right:-14%; width:28%; height:16px;
  background:
    radial-gradient(circle 3px at 6px 8px, var(--clay-soft) 100%, transparent 0),
    radial-gradient(circle 3px at 22px 8px, var(--clay-soft) 100%, transparent 0),
    radial-gradient(circle 3px at 38px 8px, var(--clay-soft) 100%, transparent 0),
    radial-gradient(circle 3px at 54px 8px, var(--clay-soft) 100%, transparent 0),
    radial-gradient(circle 3px at 70px 8px, var(--clay-soft) 100%, transparent 0),
    radial-gradient(circle 3px at 86px 8px, var(--clay-soft) 100%, transparent 0);
  background-repeat:repeat-x; background-size:96px 16px;
  opacity:.7; z-index:0;
}
.theme--newdeco .nd-flow__step:not(:last-child)::before{
  content:"→"; position:absolute; top:66px; right:calc(-14% + 32%); z-index:1;
  color:var(--clay); font-family:var(--font-display); font-size:1.8rem; font-weight:500;
  transform:translateX(50%);
  opacity:.85;
}
.theme--newdeco .nd-flow__label{
  display:inline-block; margin-bottom:14px;
  font-family:var(--font-sans, sans-serif);
  font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--clay-deep); background:rgba(163,108,79,.08);
  padding:5px 14px; border-radius:99px; border:1px solid rgba(163,108,79,.18);
}
.theme--newdeco .nd-flow__bubble{
  width:132px; height:132px; margin:0 auto 26px;
  background:linear-gradient(135deg, var(--clay) 0%, var(--clay-deep) 100%);
  border:3px solid var(--paper);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  color:var(--paper); font-family:var(--font-display); font-style:italic;
  font-size:2.6rem; font-weight:500; line-height:1;
  box-shadow:
    0 0 0 6px rgba(163,108,79,.12),
    0 0 0 14px rgba(163,108,79,.06),
    0 16px 40px rgba(128,81,58,.28);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  position:relative;
}
.theme--newdeco .nd-flow__bubble::after{
  content:""; position:absolute; inset:-3px; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, rgba(255,255,255,.35) 90deg, transparent 180deg);
  mix-blend-mode:overlay; pointer-events:none;
}
.theme--newdeco .nd-flow__step:hover .nd-flow__bubble{
  transform:translateY(-6px) scale(1.04);
  box-shadow:
    0 0 0 8px rgba(163,108,79,.16),
    0 0 0 18px rgba(163,108,79,.08),
    0 22px 50px rgba(128,81,58,.36);
}
.theme--newdeco .nd-flow__title{
  font-family:var(--font-display); font-style:italic;
  font-size:clamp(1.2rem,1.5vw,1.5rem);
  color:var(--ink); margin:0 0 14px; line-height:1.2;
}
.theme--newdeco .nd-flow__desc{
  color:var(--ink-2); font-size:.95rem; line-height:1.6;
  max-width:36ch; margin-inline:auto;
}
@media (max-width:820px){
  .theme--newdeco .nd-flow{ grid-template-columns:1fr; gap:40px; padding-top:0; }
  .theme--newdeco .nd-flow__step:not(:last-child)::after,
  .theme--newdeco .nd-flow__step:not(:last-child)::before{ display:none; }
  .theme--newdeco .nd-flow__step{ display:grid; grid-template-columns:132px 1fr; gap:24px; text-align:left; align-items:start; }
  .theme--newdeco .nd-flow__label{ grid-column:2; margin-bottom:6px; }
  .theme--newdeco .nd-flow__bubble{ grid-row:span 3; margin:0; align-self:start; }
  .theme--newdeco .nd-flow__title{ grid-column:2; }
  .theme--newdeco .nd-flow__desc{ margin:0; grid-column:2; }
}

/* ===================== RESET / BASE ===================== */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink-2);
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
::selection{ background:var(--accent); color:var(--paper); }

/* ===================== TYPOGRAPHIE ===================== */
.display, .h1, .h2, .h3, h1, h2, h3{
  font-family:var(--font-display);
  color:var(--ink);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:var(--lh-tight);
  text-wrap:balance;
  margin:0;
}
.mega{ font-family:var(--font-display); font-weight:500; font-size:var(--t-mega); line-height:.98; letter-spacing:-0.015em; color:var(--ink); margin:0; }
.h1, h1{ font-size:var(--t-h1); }
.h2, h2{ font-size:var(--t-h2); }
.h3, h3{ font-size:var(--t-h3); line-height:var(--lh-snug); }
.h4{ font-family:var(--font-display); font-weight:500; font-size:var(--t-h4); line-height:var(--lh-snug); color:var(--ink); margin:0; }
.serif-italic{ font-style:italic; font-weight:400; }

.eyebrow{
  font-family:var(--font-sans);
  font-size:var(--t-xs);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:var(--track-eyebrow);
  color:var(--accent-deep);
  margin:0;
  display:inline-flex; align-items:center; gap:var(--s-3);
}
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--accent); display:inline-block; }
.eyebrow--plain::before{ display:none; }

.lead{ font-size:var(--t-lead); line-height:1.55; color:var(--ink-2); font-weight:400; text-wrap:pretty; }
.muted{ color:var(--ink-3); }
.body{ font-size:var(--t-body); line-height:var(--lh-body); color:var(--ink-2); text-wrap:pretty; }
.small{ font-size:var(--t-sm); }
.caps{ text-transform:uppercase; letter-spacing:var(--track-caps); font-weight:600; font-size:var(--t-xs); }

/* ===================== LAYOUT ===================== */
.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:880px; }
.section{ padding-block:clamp(64px, 9vw, 152px); }
.section--tight{ padding-block:clamp(48px,6vw,96px); }
.stack > * + *{ margin-top:var(--s-5); }
.divider{ height:1px; background:var(--line); border:0; margin:0; }

/* ===================== BOUTONS ===================== */
.btn{
  --bg:var(--ink); --fg:var(--paper); --bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-3);
  font-family:var(--font-sans); font-size:var(--t-sm); font-weight:600;
  letter-spacing:.02em;
  padding:16px 30px; border-radius:var(--r-pill);
  background:var(--bg); color:var(--fg); border:1px solid var(--bd);
  cursor:pointer; transition:all var(--dur) var(--ease);
  white-space:nowrap;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn .arrow{ transition:transform var(--dur) var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }

.btn--primary{ --bg:var(--accent); --fg:var(--paper); --bd:var(--accent); }
.btn--primary:hover{ --bg:var(--accent-deep); --bd:var(--accent-deep); }
.btn--dark{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line-strong); }
.btn--ghost:hover{ --bg:var(--ink); --fg:var(--paper); --bd:var(--ink); }
.btn--on-dark{ --bg:transparent; --fg:var(--paper); --bd:var(--line-light); }
.btn--on-dark:hover{ --bg:var(--paper); --fg:var(--ink); --bd:var(--paper); }
.btn--sm{ padding:11px 20px; font-size:var(--t-xs); }

/* lien soulign-animé */
.link-line{
  display:inline-flex; align-items:center; gap:10px;
  font-weight:600; font-size:var(--t-sm); letter-spacing:.02em; color:var(--ink);
  padding-bottom:4px; position:relative; cursor:pointer;
}
.link-line::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform var(--dur) var(--ease); }
.link-line:hover::after{ transform:scaleX(1); }
.link-line .arrow{ transition:transform var(--dur) var(--ease); color:var(--accent); }
.link-line:hover .arrow{ transform:translateX(5px); }

/* ===================== CHIPS / TAGS ===================== */
.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 16px; border-radius:var(--r-pill);
  border:1px solid var(--line-strong); background:transparent;
  font-size:var(--t-xs); font-weight:600; letter-spacing:.04em; color:var(--ink-2);
  cursor:pointer; transition:all .35s var(--ease);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-selected="true"], .chip.is-active{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
/* Variante fond sombre (home, hero) : chip lisible sur ivoire dimmed */
.filters[data-on-dark="1"] .chip{ color:rgba(244,239,231,.85); border-color:var(--line-light); }
.filters[data-on-dark="1"] .chip:hover{ color:var(--paper); border-color:var(--paper); }
.filters[data-on-dark="1"] .chip.is-active{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.tag{ display:inline-block; font-size:var(--t-xs); letter-spacing:var(--track-caps); text-transform:uppercase; color:var(--accent-deep); font-weight:600; }

/* ===================== CARTES ===================== */
.card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r-sm); }

/* carte projet immersive */
.project{ position:relative; overflow:hidden; border-radius:var(--r-sm); cursor:pointer; background:var(--ink-bg); }
.project img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease), filter 1.1s var(--ease); filter:saturate(.96); }
.project:hover img{ transform:scale(1.06); }
.project__veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,31,49,0) 35%, rgba(15,31,49,.82) 100%); }
.project__body{ position:absolute; inset:auto 0 0 0; padding:clamp(20px,2.4vw,34px); color:var(--paper); }
.project__kicker{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:var(--track-eyebrow); color:var(--brass-soft); font-weight:600; }
.project__title{ font-family:var(--font-display); font-size:var(--t-h4); font-weight:500; margin-top:8px; line-height:1.1; }
.project__meta{ font-size:var(--t-sm); color:rgba(244,239,231,.78); margin-top:6px; }

/* carte service */
.service{ padding:clamp(24px,2.4vw,38px); border:1px solid var(--line); border-radius:var(--r-sm); background:var(--paper); transition:all .5s var(--ease); position:relative; }
.service:hover{ border-color:var(--ink); transform:translateY(-4px); box-shadow:var(--shadow-md); }
.service__num{ font-family:var(--font-display); font-size:var(--t-sm); color:var(--accent-deep); font-weight:500; }
.service h4, .service .h4{ margin:var(--s-4) 0 var(--s-3); }

/* ===================== CHIFFRES ===================== */
.stat__num{ font-family:var(--font-display); font-weight:500; font-size:clamp(2.6rem,1.6rem + 3vw,4.2rem); line-height:1; color:var(--ink); letter-spacing:-0.02em; }
.stat__label{ font-size:var(--t-sm); color:var(--ink-3); margin-top:var(--s-3); }

/* ===================== MUR DE LOGOS ===================== */
.logo-wall{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); }
.logo-cell{ display:flex; align-items:center; justify-content:center; padding:clamp(20px,3vw,40px); border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.logo-cell span{ font-family:var(--font-display); font-size:1.25rem; color:var(--ink-3); letter-spacing:.02em; }

/* ===================== CHAMPS DE FORMULAIRE ===================== */
.field{ display:flex; flex-direction:column; gap:8px; }
.field label{ font-size:var(--t-xs); text-transform:uppercase; letter-spacing:var(--track-caps); font-weight:600; color:var(--ink-3); }
.field input, .field textarea, .field select{
  font-family:var(--font-sans); font-size:var(--t-body); color:var(--ink);
  background:transparent; border:0; border-bottom:1px solid var(--line-strong);
  padding:12px 2px; transition:border-color .35s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--accent); }
.field input::placeholder, .field textarea::placeholder{ color:var(--greige); }

/* ===================== SECTIONS SOMBRES ===================== */
.on-dark{ background:var(--ink-bg); color:var(--paper); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark .h4,.on-dark .mega,.on-dark .display{ color:var(--paper); }
.on-dark .lead{ color:rgba(244,239,231,.8); }
.on-dark .muted{ color:rgba(244,239,231,.55); }
.on-dark .divider{ background:var(--line-light); }

/* ===================== UTILITAIRES ===================== */
.grid{ display:grid; gap:var(--s-5); }
.flex{ display:flex; }
.between{ justify-content:space-between; }
.center{ align-items:center; }
.gap-3{ gap:var(--s-3); } .gap-4{ gap:var(--s-4); } .gap-5{ gap:var(--s-5); }
.wrap-gap{ flex-wrap:wrap; }
.tac{ text-align:center; }
.mt-0{ margin-top:0; }

/* apparition : le contenu est toujours visible (robuste : screenshots, impression,
   iframes throttlées, JS-off). Le raffinement vient de la composition, pas du fondu. */
.reveal{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ *{ scroll-behavior:auto; } }