:root {
  /* Vert bouteille — fauteuil barbier, faïence, miroirs biseautés */
  --green:       #2D4A3E;
  --green-deep:  #1E332B;
  --green-soft:  #4A7060;
  --green-pale:  #E4EDE9;

  /* Laiton chaud — luminaires Edison, cuir, horloge murale */
  --amber:       #C4891A;
  --amber-deep:  #9A6A10;
  --amber-light: #E5A83A;
  --amber-pale:  #FCF5E1;

  --paper:    #f5f0e6;
  --paper-2:  #ede8dc;
  --paper-3:  #e5dfd2;

  --ink:   #13172a;
  --ink-2: #2c3150;
  --ink-3: #505878;
  --ink-4: #8a90a8;

  --line:  rgba(19,23,42,.09);
  --line-2:rgba(19,23,42,.16);
  --line-3:rgba(19,23,42,.30);

  --serif:   "Cormorant Garamond", Georgia, serif;
  --prose:   "EB Garamond", Georgia, serif;
  --mono:    "JetBrains Mono", "Courier New", monospace;

  --max:  1320px;
  --pad:  clamp(24px, 4.5vw, 64px);
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100% }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--prose);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img,svg { display:block; max-width:100% }
a { color:inherit; text-decoration:none }
button { font:inherit; cursor:pointer; border:0; background:none; color:inherit }

@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.1ms !important }
}

.wrap { max-width:var(--max); margin-inline:auto; padding-inline:var(--pad) }

/* ══════════════════════════════════════════════
   STRIP — marquee discret
══════════════════════════════════════════════ */
.strip {
  background:var(--ink); color:var(--paper-3);
  overflow:hidden; position:relative; z-index:10;
}
.strip-track {
  display:flex; gap:80px; width:max-content;
  padding:9px 0;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; white-space:nowrap;
}
.strip-track span { display:inline-flex; align-items:center; gap:20px }
.strip-dot { width:4px; height:4px; background:var(--amber-light); border-radius:50%; flex-shrink:0 }


/* ══════════════════════════════════════════════
   NAV — masthead horizontal, pas de mega-menu
══════════════════════════════════════════════ */
.nav {
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-2);
}
.nav-inner {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  height:66px; gap:32px;
}
.logo-wrap { display:flex; align-items:center; gap:11px }
.logo-img { width:42px; height:42px; border-radius:50%; flex-shrink:0; box-shadow:0 2px 8px -2px rgba(31,61,110,.28) }
.logo-name {
  font-family:var(--serif); font-weight:500;
  font-size:19px; letter-spacing:.008em; color:var(--ink);
  white-space:nowrap;
}
.logo-name sup {
  font-family:var(--mono); font-size:8.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); vertical-align:super;
  margin-left:4px; font-weight:400;
}

nav.links { display:flex; gap:28px; justify-self:center }
nav.links a {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-3); padding:3px 0; position:relative;
  transition:color .22s;
}
nav.links a::after {
  content:""; position:absolute; left:0; bottom:-2px;
  width:0; height:1px; background:var(--green);
  transition:width .28s ease;
}
nav.links a:hover { color:var(--green) }
nav.links a:hover::after { width:100% }

.nav-cta { display:flex; gap:10px; align-items:center }
.btn-cta {
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:500;
  background:var(--green); color:#fff;
  border-radius:2px;
  transition:background .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.btn-cta:hover { background:var(--green-deep); transform:translateY(-1px) }
.btn-cta-arr { display:inline-block; transition:transform .25s }
.btn-cta:hover .btn-cta-arr { transform:translateX(3px) }
.btn-outline {
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 18px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:500; color:var(--ink);
  outline:1.5px solid var(--line-3);
  border-radius:2px;
  transition:background .25s, color .25s;
}
.btn-outline:hover { background:var(--ink); color:var(--paper) }
.menu-toggle { display:none }

/* ══════════════════════════════════════════════
   HERO — poster typographique pleine page
══════════════════════════════════════════════ */
.hero {
  min-height:86vh;
  display:grid;
  grid-template-rows:1fr auto;
  position:relative;
  overflow:hidden;
}
.hero-main {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:0;
  padding:clamp(56px,8vh,100px) var(--pad) clamp(48px,6vh,80px);
  position:relative; z-index:2;
}
.hero-title-col {
  display:flex; flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-right:clamp(32px,4vw,64px);
  border-right:1px solid var(--line-2);
  gap:clamp(28px,5vh,56px);
}
.hero-kicker {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber);
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.hero-kicker::before { display:none }

h1.hero-title {
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(52px,8vw,124px);
  line-height:.9;
  letter-spacing:-.03em;
  color:var(--ink); margin:0;
}
h1.hero-title em {
  font-style:italic;
  color:var(--green); font-weight:400;
}
h1.hero-title .break { display:block }

/* Colonne droite du hero */
.hero-right-col {
  display:flex; flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding-left:clamp(32px,4vw,64px);
  gap:clamp(28px,5vh,56px);
}
.hero-right-top {
  display:flex; flex-direction:column; gap:18px;
}
.hero-logo {
  width:clamp(80px,8vw,128px); height:clamp(80px,8vw,128px);
  border-radius:50%;
  box-shadow:0 8px 24px -8px rgba(30,51,43,.35);
  flex-shrink:0;
}
.hero-right-tagline {
  font-family:var(--serif); font-weight:400;
  font-size:clamp(19px,2vw,27px);
  line-height:1.55; color:var(--ink-3);
  max-width:38ch;
}
.hero-right-tagline em { font-style:italic; color:var(--ink) }
.hero-right-tagline strong { color:var(--ink); font-weight:500 }
.hero-right-bottom {
  display:flex; flex-direction:column; gap:16px;
}
.hero-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:center }
.hero-right-col .hero-actions { gap:12px }
.hero-stats-row {
  display:flex; gap:clamp(16px,2.5vw,36px); align-items:baseline;
  flex-wrap:wrap; justify-content:center;
}

/* bande inférieure du hero */
.hero-foot {
  border-top:1px solid var(--line-2);
  padding:clamp(18px,2vw,28px) var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  flex-wrap:wrap;
  position:relative; z-index:2;
}
.hero-foot-item {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4);
}
.hero-foot-left {
  display:flex; flex-direction:column; gap:10px;
}
.hero-conviction {
  font-family:var(--prose);
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.55; color:var(--ink-3);
  max-width:64ch;
}
.hero-conviction em { font-style:italic; color:var(--ink) }
.hero-conviction strong { color:var(--ink); font-weight:500 }
.hero-meta-bar {
  display:flex; align-items:center; gap:clamp(20px,3vw,40px);
  flex-wrap:wrap;
  margin-top:4px;
}
.hero-stat {
  display:flex; align-items:baseline; gap:8px;
}
.hero-stat-n {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(28px,3.2vw,44px); color:var(--amber);
  line-height:1; letter-spacing:-.02em;
}
.hero-stat-n sup { font-size:.5em; color:var(--amber-light); vertical-align:super }
.hero-stat-l {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4);
}
.hero-sep { width:1px; height:28px; background:var(--line-3); flex-shrink:0 }
.hero-foot-right {
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.hero-note {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-4); text-align:right;
}

/* ══════════════════════════════════════════════
   BRAND TAPE — cobalt plein bord, grand italique
══════════════════════════════════════════════ */
.brand-tape {
  background:var(--green);
  overflow:hidden;
  border-block:1px solid var(--green-deep);
}
.brand-tape-track {
  display:flex; gap:64px;
  padding:20px 0;
  width:max-content;
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(28px,3.5vw,52px);
  letter-spacing:-.01em; white-space:nowrap; color:#fff;
}
.brand-tape-track span { display:inline-flex; align-items:center; gap:64px }
.tape-dot { width:7px; height:7px; border-radius:50%; background:var(--amber-light); opacity:.7; flex-shrink:0 }

/* ══════════════════════════════════════════════
   IDENTITÉ — prose longue + logo photo
   Pas de section number, pas de sec-head template
══════════════════════════════════════════════ */
.identite {
  padding:clamp(80px,12vw,160px) 0 clamp(64px,9vw,120px);
  border-bottom:1px solid var(--line-2);
}
.identite-grid {
  display:grid;
  grid-template-columns:300px 1fr;
  gap:clamp(48px,7vw,110px);
  align-items:start;
}
.identite-left {
  display:flex; flex-direction:column; gap:clamp(28px,3vw,44px);
}
.identite-logo {
  width:220px; height:220px;
  border-radius:50%;
  box-shadow:0 24px 60px -24px rgba(31,61,110,.35);
}
.identite-sign {
  display:flex; flex-direction:column; gap:6px;
}
.identite-sign-name {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,2.5vw,30px);
  letter-spacing:-.01em; color:var(--ink);
}
.identite-sign-name em { font-style:italic; color:var(--green); font-weight:400 }
.identite-sign-sub {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-4); line-height:1.7;
}
.identite-right {
  display:flex; flex-direction:column; gap:clamp(24px,3vw,40px);
  padding-top:8px;
}
.identite-overline {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:14px;
}
.identite-overline::before { content:""; width:24px; height:1.5px; background:var(--amber); flex-shrink:0 }
.identite-right h2 {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(32px,3.8vw,54px);
  line-height:.97; letter-spacing:-.025em;
  color:var(--ink); margin:0;
}
.identite-right h2 em { font-style:italic; color:var(--green); font-weight:400 }
.prose-body {
  font-family:var(--prose); font-size:clamp(16px,1.4vw,18px);
  line-height:1.8; color:var(--ink-3); max-width:62ch;
}
.prose-body + .prose-body { margin-top:-8px }
.prose-body.identite-distinction {
  padding:clamp(14px,2vw,20px) clamp(16px,2vw,24px);
  border-left:3px solid var(--amber);
  background:color-mix(in srgb, var(--amber) 6%, transparent);
  border-radius:0 2px 2px 0;
  color:var(--ink-2);
  font-style:italic;
  margin-top:0;
}
.prose-body strong { color:var(--ink); font-weight:500 }
.prose-body em { font-style:italic }
.identite-quote {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(20px,2.2vw,28px);
  line-height:1.4; color:var(--ink-2);
  padding-left:28px; border-left:3px solid var(--green);
  letter-spacing:-.005em; max-width:48ch;
}
.identite-quote em { color:var(--green) }

/* ══════════════════════════════════════════════
   CATALOGUE MARQUES — catalogue imprimé
   Chaque marque = taille différente, pas de template
══════════════════════════════════════════════ */
.catalogue {
  padding:clamp(60px,9vw,120px) 0;
  border-bottom:1px solid var(--line-2);
  background:var(--paper-2);
}
.catalogue-header {
  display:flex; justify-content:space-between; align-items:baseline;
  padding-bottom:clamp(16px,2vw,24px);
  border-bottom:2px solid var(--ink);
  margin-bottom:0;
  gap:20px; flex-wrap:wrap;
}
.catalogue-header-left {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink); display:flex; align-items:center; gap:16px;
}
.catalogue-header-left::before {
  content:""; width:8px; height:8px;
  background:var(--amber); border-radius:50%; flex-shrink:0;
}
.catalogue-header-right {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4);
}

/* Chaque brand-entry — ligne de catalogue */
.brand-entry {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:end;
  gap:24px;
  padding:clamp(24px,3.5vw,48px) 0;
  border-bottom:1px solid var(--line-2);
  position:relative;
  transition:background .3s;
  cursor:default;
}
.brand-entry::after {
  content:""; position:absolute;
  bottom:0; left:0; width:0; height:1px;
  background:var(--green);
  transition:width .55s cubic-bezier(.2,.8,.2,1);
}
.brand-entry:hover::after { width:100% }

.brand-entry-main { display:flex; flex-direction:column; gap:10px }
.brand-entry-ref {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ink-4); display:flex; align-items:center; gap:12px;
}
.brand-entry-ref::before {
  content:""; width:20px; height:1px; background:var(--ink-4); flex-shrink:0;
}
.brand-entry-name {
  font-family:var(--serif); font-weight:500;
  line-height:.92; letter-spacing:-.025em; color:var(--ink);
}
/* Taille uniforme — même registre pour chaque marque */
.brand-entry .brand-entry-name { font-size:clamp(36px,4.8vw,70px) }
.brand-entry-name em { font-style:italic; color:var(--green); font-weight:400 }

.brand-entry-desc {
  font-family:var(--prose); font-size:clamp(14px,1.2vw,16px);
  color:var(--ink-3); line-height:1.65;
  max-width:56ch; margin-top:4px;
}
.brand-entry-tags {
  display:flex; gap:6px; flex-wrap:wrap; margin-top:4px;
}
.ctag {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.14em; text-transform:uppercase;
  padding:3px 9px;
  border:1px solid var(--green-pale);
  color:var(--green-deep);
  background:color-mix(in srgb, var(--green) 6%, transparent);
}
.ctag-link { background:var(--green); color:#fff; border-color:var(--green); margin-left:8px }
.brand-entry-right {
  text-align:right; display:flex; flex-direction:column;
  align-items:flex-end; gap:8px; padding-bottom:4px;
  flex-shrink:0;
}
.brand-entry-year {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(36px,4vw,56px);
  color:var(--green); opacity:.2; line-height:.9;
  letter-spacing:-.03em; user-select:none;
}
.brand-entry-origin {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4);
}

/* ══════════════════════════════════════════════
   MÉTIERS — colonnes journal, fond sombre
   PAS d'icônes, PAS d'espace vide
══════════════════════════════════════════════ */
.metiers {
  background:var(--ink);
  color:var(--paper);
  padding:clamp(64px,9vw,130px) 0;
}
.metiers-head {
  padding-bottom:clamp(24px,3vw,40px);
  border-bottom:1px solid rgba(255,255,255,.12);
  margin-bottom:0;
  display:flex; justify-content:space-between; align-items:baseline;
  gap:20px; flex-wrap:wrap;
}
.metiers-head h2 {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(36px,4.5vw,64px);
  line-height:.97; letter-spacing:-.025em;
  color:var(--paper); margin:0;
}
.metiers-head h2 em { font-style:italic; color:var(--green-soft); font-weight:400 }
.metiers-head-note {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:rgba(255,255,255,.35); white-space:nowrap;
}
.metiers-cols {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
}
.metier-col {
  padding:clamp(32px,4vw,56px) clamp(24px,3vw,44px);
  border-right:1px solid rgba(255,255,255,.09);
  display:flex; flex-direction:column; gap:18px;
}
.metier-col:last-child { border-right:0 }
.metier-ref {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.28);
}
.metier-name {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(28px,3.2vw,44px);
  line-height:.97; letter-spacing:-.02em;
  color:#fff; margin:0;
}
.metier-name em { font-style:normal; color:var(--amber-light) }
.metier-body {
  font-family:var(--prose); font-size:clamp(14px,1.2vw,16px);
  line-height:1.8; color:rgba(245,240,230,.52);
}
.metier-body strong { color:rgba(245,240,230,.85); font-weight:500 }
.metier-list {
  list-style:none; padding:0; margin:auto 0 0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid rgba(255,255,255,.08);
}
.metier-list li {
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.06em; color:rgba(255,255,255,.38);
  padding:10px 0; border-bottom:1px dashed rgba(255,255,255,.07);
  display:flex; align-items:center; gap:10px;
}
.metier-list li::before { content:"—"; color:var(--green-soft); flex-shrink:0 }

/* ══════════════════════════════════════════════
   FAMILLES — liste horizontale sobre
   PAS d'icônes, PAS de cards
══════════════════════════════════════════════ */
.familles {
  padding:clamp(56px,8vw,110px) 0;
  border-bottom:1px solid var(--line-2);
  background:var(--amber-pale);
}
.familles-label {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber-deep); margin-bottom:clamp(28px,4vw,52px);
  display:flex; align-items:center; gap:14px;
}
.familles-label::before { content:""; width:24px; height:1.5px; background:var(--amber); flex-shrink:0 }
.familles-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0;
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.famille-item {
  padding:clamp(28px,4vw,52px) clamp(20px,3vw,40px);
  border-right:1px solid var(--line-2);
  display:flex; flex-direction:column; gap:8px;
}
.famille-item:last-child { border-right:0 }
.famille-num {
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(44px,6vw,80px); line-height:.8;
  color:var(--amber); opacity:.35; letter-spacing:-.03em;
  user-select:none;
  margin-bottom:clamp(14px,1.8vw,24px);
}
.famille-name {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(16px,1.7vw,22px); line-height:1.1;
  letter-spacing:-.01em; color:var(--ink);
  white-space:nowrap;
}
.famille-name em { font-style:italic; color:var(--green); font-weight:400 }
.famille-desc {
  font-family:var(--prose); font-size:clamp(15px,1.3vw,17px);
  line-height:1.7; color:var(--ink-3);
}

/* ══════════════════════════════════════════════
   RAISONS — liste télégraphique
   PAS de cards sur fond sombre, PAS de grid 4 col
══════════════════════════════════════════════ */
.raisons {
  padding:clamp(64px,9vw,120px) 0;
  background:var(--paper-3);
  border-top:1px solid var(--line-2);
  border-bottom:1px solid var(--line-2);
}
.raisons-header {
  display:flex; justify-content:space-between; align-items:baseline;
  border-bottom:2px solid var(--ink);
  padding-bottom:clamp(14px,2vw,20px);
  margin-bottom:0; gap:20px; flex-wrap:wrap;
}
.raisons-header h2 {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(32px,4vw,56px);
  line-height:.97; letter-spacing:-.025em; color:var(--ink); margin:0;
}
.raisons-header h2 em { font-style:italic; color:var(--green); font-weight:400 }
.raisons-header-note {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-4); white-space:nowrap;
}

.raison-row {
  display:grid;
  grid-template-columns:64px 220px 1fr;
  gap:clamp(20px,3vw,48px);
  align-items:baseline;
  padding:clamp(16px,2vw,24px) clamp(12px,1.5vw,20px);
  border-bottom:1px solid var(--line-2);
  transition:background .25s;
  border-radius:2px;
}
.raison-row:hover { background:var(--amber-pale) }
.raison-idx {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber);
}
.raison-name {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(20px,2.2vw,30px);
  letter-spacing:-.01em; color:var(--ink); line-height:1;
}
.raison-name em { font-style:italic; color:var(--green); font-weight:400 }
.raison-desc {
  font-family:var(--prose); font-size:clamp(14px,1.2vw,16px);
  color:var(--ink-3); line-height:1.65;
}
.raison-desc strong { color:var(--ink); font-weight:500 }

/* ══════════════════════════════════════════════
   CONFRÈRES — liste simple, pas de cards
══════════════════════════════════════════════ */
.confreres {
  padding:clamp(56px,8vw,110px) 0;
  border-bottom:1px solid var(--line-2);
}
.confreres-label {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber-deep); margin-bottom:clamp(24px,3vw,40px);
  display:flex; align-items:center; gap:14px;
}
.confreres-label::before { content:""; width:24px; height:1.5px; background:var(--amber); flex-shrink:0 }
.confreres-title {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(32px,4vw,56px);
  line-height:.97; letter-spacing:-.025em; color:var(--ink);
  margin-bottom:clamp(36px,5vw,72px);
}
.confreres-title em { font-style:italic; color:var(--green); font-weight:400 }

.confrere-row {
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:clamp(16px,3vw,48px);
  padding:clamp(18px,2.5vw,28px) 0;
  border-bottom:1px solid var(--line-2);
  transition:background .25s;
}
.confreres-title + .confrere-row { border-top:1px solid var(--line-2) }
.confrere-row:hover { background:var(--amber-pale) }
.confrere-type {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-4); flex-shrink:0;
  width:150px; line-height:1.7;
}
.confrere-center { display:flex; flex-direction:column; gap:4px }
.confrere-name {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,2.5vw,34px);
  line-height:1; letter-spacing:-.02em; color:var(--ink);
}
.confrere-name em { font-style:italic; color:var(--green); font-weight:400 }
.confrere-city {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4);
}
.confrere-link {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:lowercase;
  color:var(--green); white-space:nowrap;
  border-bottom:1px solid var(--green-pale);
  padding-bottom:2px;
  transition:border-color .2s;
}
.confrere-link:hover { border-color:var(--green) }

/* ══════════════════════════════════════════════
   MISSION — pleine page cobalt, une phrase
══════════════════════════════════════════════ */
.mission {
  background:var(--green);
  padding:clamp(80px,12vw,160px) 0;
  position:relative; overflow:hidden;
}
.mission::before {
  content:"";
  position:absolute; right:-200px; bottom:-200px;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.07) 0%, transparent 60%);
  pointer-events:none;
}
.mission-inner { position:relative; z-index:2 }
.mission-label {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:rgba(255,255,255,.5); margin-bottom:clamp(24px,3vw,40px);
  display:flex; align-items:center; gap:14px;
}
.mission-label::before { content:""; width:24px; height:1.5px; background:rgba(255,255,255,.5); flex-shrink:0 }
.mission-statement {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(36px,5vw,76px);
  line-height:.97; letter-spacing:-.025em;
  color:#fff; max-width:22ch; margin:0 0 clamp(36px,5vw,64px);
}
.mission-statement em { font-style:italic; color:rgba(255,255,255,.75); font-weight:400 }
.btn-mission {
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 28px;
  font-family:var(--mono); font-size:10px;
  letter-spacing:.18em; text-transform:uppercase;
  font-weight:500;
  background:#fff; color:var(--green-deep);
  border-radius:2px;
  transition:background .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.btn-mission:hover { background:var(--paper); transform:translateY(-2px) }
.btn-mission-arr { display:inline-block; transition:transform .25s }
.btn-mission:hover .btn-mission-arr { transform:translateX(4px) }

/* ══════════════════════════════════════════════
   FORMULAIRE — professionnel, sobre
══════════════════════════════════════════════ */
.pro {
  padding:clamp(80px,11vw,150px) 0;
  background:var(--paper);
}
.pro-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:clamp(48px,7vw,110px);
  align-items:start;
}
.pro-left { display:flex; flex-direction:column; gap:22px }
.pro-left-label {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber); display:flex; align-items:center; gap:14px;
}
.pro-left-label::before { content:""; width:24px; height:1.5px; background:var(--amber); flex-shrink:0 }
.pro-left h2 {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(38px,4.8vw,68px);
  line-height:.97; letter-spacing:-.025em; color:var(--ink); margin:0;
}
.pro-left h2 em { font-style:italic; color:var(--green); font-weight:400 }
.pro-left-body {
  font-family:var(--prose); font-size:clamp(15px,1.3vw,17px);
  line-height:1.8; color:var(--ink-3); max-width:44ch;
}
.pro-left-body strong { color:var(--ink); font-weight:500 }
.pro-conditions {
  list-style:none; padding:0; margin:8px 0 0;
  display:flex; flex-direction:column; gap:0;
  border-top:1px solid var(--line-2);
}
.pro-conditions li {
  display:flex; align-items:center; gap:14px;
  font-family:var(--prose); font-size:clamp(14px,1.2vw,16px);
  color:var(--ink); padding:13px 0;
  border-bottom:1px solid var(--line-2);
}
.pro-conditions li::before {
  content:""; width:18px; height:18px; flex-shrink:0;
  border:1.5px solid var(--green); border-radius:50%;
  background:color-mix(in srgb, var(--green) 10%, transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='8' viewBox='0 0 10 8' fill='none' stroke='%232D4A3E' stroke-width='1.8' stroke-linecap='round'%3E%3Cpolyline points='1 4 4 7 9 1'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center;
}
.pro-tag {
  margin-left:auto; font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4);
}

.form-card {
  background:var(--paper-2);
  border:1px solid var(--line-2);
  padding:clamp(28px,3.5vw,48px);
  display:flex; flex-direction:column; gap:20px;
  position:relative;
  box-shadow:0 20px 50px -24px rgba(19,23,42,.12);
}
.form-card-title {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(24px,2.4vw,34px);
  letter-spacing:-.015em; color:var(--ink);
  margin:8px 0 4px;
}
.form-card-title em { font-style:italic; color:var(--green); font-weight:400 }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px }
.fld { display:flex; flex-direction:column; gap:7px }
.fld label {
  font-family:var(--mono); font-size:9px;
  font-weight:500; letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-4);
}
.fld input,.fld select,.fld textarea {
  border:0; border-bottom:1.5px solid var(--line-3);
  background:transparent; padding:8px 0 10px;
  font-family:var(--prose); font-size:16px;
  color:var(--ink); outline:none; border-radius:0;
  transition:border-color .22s; -webkit-appearance:none;
}
.fld input::placeholder,.fld textarea::placeholder { color:var(--ink-4) }
.fld input:focus,.fld select:focus,.fld textarea:focus { border-color:var(--green) }
.fld select {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7' fill='none' stroke='%232D4A3E' stroke-width='1.8'%3E%3Cpath d='M1 1l4.5 5 4.5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center; padding-right:22px;
}
.fld textarea { min-height:84px; resize:vertical }
.form-note {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.1em; color:var(--ink-4); line-height:1.65;
}

/* ══════════════════════════════════════════════
   FOOTER — dense, document imprimé
══════════════════════════════════════════════ */
footer {
  background:var(--ink); color:var(--paper);
  padding:clamp(56px,8vw,100px) 0 28px;
  position:relative;
}
footer::before {
  content:""; position:absolute; top:0; left:0; right:0;
  height:4px;
  background: linear-gradient(90deg, var(--green) 0%, var(--green) 70%, var(--amber) 70%);
}
.foot-body {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr;
  gap:clamp(20px,3vw,52px);
  margin-bottom:52px;
}
.foot-brand {
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
}
.foot-logo { width:48px; height:48px; border-radius:50%; flex-shrink:0 }
.foot-brand-name {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(26px,2.8vw,36px);
  line-height:.97; letter-spacing:-.015em; color:var(--paper);
}
.foot-brand-name em { font-style:italic; color:var(--green-soft); font-weight:400 }
.foot-address {
  font-family:var(--prose); font-size:13.5px;
  color:rgba(244,239,229,.62); line-height:1.75;
  margin-bottom:16px;
}
.foot-siren {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,239,229,.62);
}
.foot-col h2 {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.26em; text-transform:uppercase;
  color:rgba(244,239,229,.7); margin:0 0 18px; font-weight:500;
}
.foot-col ul { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px }
.foot-col li,.foot-col a {
  font-family:var(--prose); font-size:13.5px;
  color:rgba(244,239,229,.6); transition:color .2s;
}
.foot-col a:hover { color:var(--green-soft) }
.foot-bottom {
  display:flex; justify-content:space-between; align-items:center;
  gap:16px; padding-top:20px;
  border-top:1px solid rgba(255,255,255,.09);
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:rgba(244,239,229,.62); flex-wrap:wrap;
}

/* Brand tape logos */
.tape-brand { display:inline-flex; align-items:center }
.tape-logo {
  height:34px; width:auto; max-width:130px;
  filter:brightness(0) invert(1);
  opacity:.88; object-fit:contain; display:block;
}
.tape-text {
  display:none;
  font-family:var(--serif); font-style:italic; font-size:clamp(24px,3vw,44px);
  color:#fff;
}
.tape-brand.logo-err .tape-logo { display:none }
.tape-brand.logo-err .tape-text { display:block }

/* ══════════════════════════════════════════════
   CONFRÈRES — card grid avec photo & âme du lieu
══════════════════════════════════════════════ */
.confrere-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(20px,2.5vw,36px);
}
.confrere-card {
  background:var(--paper-2);
  border:1px solid var(--line-2);
  display:flex; flex-direction:column;
  overflow:hidden;
  transition:box-shadow .35s, transform .35s cubic-bezier(.2,.8,.2,1);
  cursor:default;
}
.confrere-card:hover {
  box-shadow:0 20px 50px -20px rgba(19,23,42,.2);
  transform:translateY(-4px);
}
.confrere-photo {
  width:100%; aspect-ratio:4/3; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.confrere-card:hover .confrere-photo { transform:scale(1.03) }
.confrere-body {
  padding:clamp(20px,2.5vw,30px);
  display:flex; flex-direction:column; gap:10px; flex:1;
}
.confrere-badge {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--amber-deep); display:flex; align-items:center; gap:10px;
}
.confrere-badge::before { content:""; width:14px; height:1px; background:var(--amber); flex-shrink:0 }
.confrere-card-name {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(22px,2.2vw,30px);
  line-height:1; letter-spacing:-.02em; color:var(--ink);
}
.confrere-card-name em { font-style:italic; color:var(--green); font-weight:400 }
.confrere-card-city {
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink-4);
}
.confrere-soul {
  font-family:var(--prose); font-size:clamp(13px,1.1vw,15px);
  line-height:1.75; color:var(--ink-3);
  font-style:italic;
  border-top:1px solid var(--line-2);
  padding-top:14px; margin-top:4px;
}
.confrere-card-link {
  margin-top:auto; padding-top:16px;
  font-family:var(--mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:lowercase;
  color:var(--green); align-self:flex-start;
  border-bottom:1px solid var(--green-pale);
  padding-bottom:2px;
  transition:border-color .2s;
}
.confrere-card-link:hover { border-color:var(--green) }

/* ══════════════════════════════════════════════
   RAISONS — vidéos tutoriels
══════════════════════════════════════════════ */
.raisons-videos {
  margin-top:clamp(40px,5vw,64px);
  padding-top:clamp(32px,4vw,48px);
  border-top:1px solid var(--line-2);
}
.raisons-videos-label {
  font-family:var(--mono); font-size:10px;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--amber); margin-bottom:clamp(20px,3vw,32px);
  display:flex; align-items:center; gap:14px;
}
.raisons-videos-label::before { content:""; width:24px; height:1.5px; background:var(--amber); flex-shrink:0 }
.raisons-videos-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2.5vw,28px);
}
.video-card {
  display:flex; flex-direction:column;
  background:var(--paper-2);
  border:1px solid var(--line-2);
  overflow:hidden;
  transition:box-shadow .3s, transform .3s cubic-bezier(.2,.8,.2,1);
  cursor:pointer;
}
.video-card:hover {
  box-shadow:0 12px 32px -12px rgba(19,23,42,.15);
  transform:translateY(-3px);
}
.video-thumb { position:relative; aspect-ratio:16/9; overflow:hidden }
.video-thumb img {
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.video-card:hover .video-thumb img { transform:scale(1.05) }
.video-play {
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:rgba(19,23,42,.38);
  transition:background .25s;
}
.video-play svg { filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)) }
.video-card:hover .video-play { background:rgba(19,23,42,.55) }
.video-body { padding:clamp(14px,1.8vw,22px); display:flex; flex-direction:column; gap:6px }
.video-brand {
  font-family:var(--mono); font-size:9px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--amber);
}
.video-title {
  font-family:var(--serif); font-weight:500;
  font-size:clamp(17px,1.6vw,22px);
  letter-spacing:-.01em; color:var(--ink);
}
.video-desc {
  font-family:var(--prose); font-size:clamp(13px,1.1vw,14px);
  color:var(--ink-3); line-height:1.65;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width:1060px){
  .metiers-cols { grid-template-columns:1fr }
  .metier-col { border-right:0; border-bottom:1px solid rgba(255,255,255,.09) }
  .metier-col:last-child { border-bottom:0 }
  .raison-row { grid-template-columns:50px 160px 1fr }
  .foot-body { grid-template-columns:1fr 1fr }
  .confrere-grid { grid-template-columns:repeat(2,1fr) }
  .raisons-videos-grid { grid-template-columns:repeat(2,1fr) }
}
@media (max-width:768px){
  nav.links { display:none }
  .menu-toggle { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:1.5px solid var(--ink-3); color:var(--ink) }
  .hero-foot { flex-direction:column; align-items:flex-start; gap:8px }
  .brand-entry-right { display:none }
  .familles-grid { grid-template-columns:1fr 1fr }
  .famille-item:nth-child(2) { border-right:0 }
  .famille-item:nth-child(1),.famille-item:nth-child(2) { border-bottom:1px solid var(--line-2); padding-bottom:clamp(28px,4vw,52px) }
  .raison-row { grid-template-columns:44px 1fr; gap:16px }
  .raison-name { grid-column:2 }
  .raison-desc { grid-column:2 }
  .raison-idx { padding-top:3px }
  .confrere-grid { grid-template-columns:1fr }
  .raisons-videos-grid { grid-template-columns:1fr }
  .pro-grid { grid-template-columns:1fr }
  .foot-body { grid-template-columns:1fr }
  .form-row { grid-template-columns:1fr }
}
@media (max-width:700px){
  .hero-title-col { border-right:0; border-bottom:1px solid var(--line-2); padding-right:0; padding-bottom:28px }
  .identite-left { flex-wrap:wrap }
}