/* =========================================================
   MATBR IT Consulting — Conseil & Formation IA / IT
   Design system bento · Saint-Malo / Côte d'Émeraude
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --bg:#f0eee9;
  --ink:#161413;
  --mute:#6a6562;
  --card:#fdfcfa;
  --line:#dcd7cf;
  --accent:#b8802a;
  --accent-deep:#8a5f15;
  --accent-soft:#d9b76b;
  --lime:#c5d97a;
  --ui:'Geist',sans-serif;
  --mono:'Geist Mono',monospace;
  --radius:18px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ui);background:var(--bg);color:var(--ink);
  padding:1.5rem;font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}

/* ---------- Scroll fade (blur en haut au scroll) ---------- */
.scroll-fade{
  position:fixed;top:0;left:0;right:0;height:100px;z-index:40;
  pointer-events:none;opacity:0;
  background:linear-gradient(180deg,var(--bg) 0%,rgba(240,238,233,0.5) 60%,transparent 100%);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  transition:opacity 0.3s ease;
}
.scroll-fade.visible{opacity:1}

/* ---------- Navigation sticky ---------- */
.nav{
  display:flex;justify-content:space-between;align-items:center;
  padding:0.8rem 1rem;font-size:0.9rem;
  background:rgba(253,252,250,0.6);
  backdrop-filter:blur(18px) saturate(180%);
  -webkit-backdrop-filter:blur(18px) saturate(180%);
  border:1px solid var(--line);border-radius:50px;
  margin-bottom:1.5rem;
  position:sticky;top:1rem;z-index:50;
  transition:background 0.3s ease,border-color 0.3s ease,box-shadow 0.3s ease;
}
.nav.scrolled{
  background:rgba(253,252,250,0.85);
  border-color:rgba(184,128,42,0.18);
  box-shadow:0 10px 30px -16px rgba(22,20,19,0.18);
}
.nav .brand{
  font-weight:700;font-size:1.15rem;letter-spacing:-0.015em;
  padding-left:0.6rem;text-decoration:none;color:var(--ink);
}
.nav .brand span{color:var(--accent)}
.nav-links{display:flex;gap:0.4rem;align-items:center}
.nav-links a{
  color:var(--ink);text-decoration:none;
  padding:0.5rem 0.9rem;border-radius:30px;
  font-weight:500;font-size:0.9rem;
  transition:all 0.18s ease;
}
.nav-links a:hover{background:var(--bg);color:var(--accent)}
.nav-links a.nav-cta{
  background:var(--accent);color:white;
  padding:0.55rem 1.2rem;font-weight:600;margin-left:0.3rem;
}
.nav-links a.nav-cta:hover{background:var(--accent-deep);transform:translateY(-1px)}
.nav-drop-wrap{position:relative}
.nav-drop-wrap>a::after{content:' ▾';font-size:0.7em;opacity:0.55}
.nav-drop{
  position:absolute;top:100%;left:0;
  background:#fff;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 12px 28px rgba(0,0,0,0.10);
  padding:0.4rem 0;min-width:240px;margin-top:0.35rem;
  opacity:0;visibility:hidden;transform:translateY(6px);
  transition:opacity 0.15s ease,transform 0.15s ease,visibility 0.15s;
  z-index:200;
}
.nav-drop-wrap:hover>.nav-drop,
.nav-drop-wrap:focus-within>.nav-drop{opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop::before{content:'';position:absolute;top:-0.5rem;left:0;right:0;height:0.5rem}
.nav-drop a{
  display:block;padding:0.55rem 1.1rem;border-radius:0;
  color:var(--ink);text-decoration:none;font-size:0.88rem;
  white-space:nowrap;font-weight:500;
}
.nav-drop a:hover{background:var(--bg);color:var(--accent)}
.nav-drop .nav-drop-head{
  font-family:var(--mono,monospace);font-size:0.62rem;
  letter-spacing:0.15em;text-transform:uppercase;
  color:var(--ink-soft,#777);padding:0.5rem 1.1rem 0.2rem;
}
.menu-toggle{
  display:none;background:none;border:0;font-size:1.4rem;
  cursor:pointer;color:var(--ink);padding:0.4rem;
}

/* ---------- Bento layout ---------- */
.bento{
  display:grid;grid-template-columns:repeat(6,1fr);
  grid-auto-rows:minmax(140px,auto);gap:1rem;
  max-width:1300px;margin:0 auto;
}
.tile{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:1.5rem;overflow:hidden;
  position:relative;display:flex;flex-direction:column;
  text-decoration:none;color:var(--ink);
  transition:transform 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
}
.tile:hover{
  transform:translateY(-4px);
  border-color:var(--accent-soft);
  box-shadow:0 18px 40px -20px rgba(184,128,42,0.25);
}
.tile-head{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--mute);margin-bottom:0.6rem;
}
.tile-sublocation{
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.18em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.4rem;
  font-weight:600;
}
.tile h3{font-size:1.18rem;font-weight:600;margin-bottom:0.4rem;letter-spacing:-0.01em}
.tile p{font-size:0.93rem;color:#3a3530}
.arrow{
  margin-top:auto;font-size:1.5rem;color:var(--accent);
  transition:transform 0.25s ease;display:inline-block;
}
.tile:hover .arrow{transform:translate(4px,-4px)}

/* ---------- Hero tile ---------- */
.t-hero{
  grid-column:span 4;grid-row:span 2;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:2.5rem;background:linear-gradient(135deg,#fdfcfa,#f5f0e6);
}
.t-hero:hover{transform:none;border-color:var(--line)}
.t-hero h1{font-size:clamp(2.4rem,4vw,3.6rem);font-weight:700;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1.2rem}
.t-hero h1 em{color:var(--accent);font-style:italic;font-weight:500}
.t-hero p{font-size:1.05rem;max-width:50ch}
.t-hero .actions{margin-top:1.8rem;display:flex;gap:0.7rem;flex-wrap:wrap;align-items:center}

/* ---------- CTA primary (animé) ---------- */
.btn-cta{
  position:relative;padding:1rem 1.8rem;
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));
  color:white;border-radius:14px;text-decoration:none;
  font-weight:600;font-size:1rem;letter-spacing:0.005em;
  box-shadow:0 8px 20px -8px rgba(184,128,42,0.55),inset 0 1px 0 rgba(255,255,255,0.2);
  display:inline-flex;align-items:center;gap:0.5rem;
  overflow:hidden;border:0;cursor:pointer;
  transition:transform 0.2s ease,box-shadow 0.2s ease;
}
.btn-cta::before{
  content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);
  transition:left 0.6s ease;
}
.btn-cta:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 14px 28px -10px rgba(184,128,42,0.65),inset 0 1px 0 rgba(255,255,255,0.3);
  color:white;
}
.btn-cta:hover::before{left:100%}
.btn-cta .pulse{
  width:8px;height:8px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 0 rgba(197,217,122,0.7);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(197,217,122,0.7)}
  70%{box-shadow:0 0 0 10px rgba(197,217,122,0)}
  100%{box-shadow:0 0 0 0 rgba(197,217,122,0)}
}
.btn-cta .arr{font-size:1.15rem;transition:transform 0.2s ease}
.btn-cta:hover .arr{transform:translateX(3px)}

.btn-ghost{
  padding:0.95rem 1.4rem;background:transparent;border:1.5px solid var(--ink);
  color:var(--ink);border-radius:14px;text-decoration:none;
  font-weight:500;font-size:0.95rem;
  transition:all 0.2s ease;display:inline-flex;align-items:center;gap:0.4rem;
}
.btn-ghost:hover{background:var(--ink);color:var(--card);transform:translateY(-2px)}

/* ---------- Image tile (Solidor) ---------- */
.t-img{
  grid-column:span 2;grid-row:span 2;padding:0;
  background:var(--ink);position:relative;
}
.t-img img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;
  object-position:18% center;
  transition:transform 0.6s ease,object-position 0.6s ease;
}
.t-img:hover img{
  transform:scale(1.08);
  object-position:15% center;
}
.t-img .label{
  position:absolute;top:1rem;left:1rem;
  font-family:var(--mono);font-size:0.7rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--card);
  background:rgba(22,20,19,0.7);padding:0.4rem 0.7rem;
  border-radius:8px;z-index:2;backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.1);
}
.t-img .label::before{
  content:'●';color:var(--lime);margin-right:0.3rem;
  animation:pulse 2s infinite;
}
.t-img::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 50%,rgba(22,20,19,0.4));
  pointer-events:none;z-index:1;
}

/* ---------- Stat tile ---------- */
.t-stat{
  grid-column:span 1;display:flex;flex-direction:column;
  justify-content:center;align-items:center;text-align:center;
  background:var(--ink);color:var(--card);
  transition:background 0.25s ease;
}
.t-stat:hover{background:#2a2522}
.t-stat .big{font-size:2.6rem;font-weight:700;letter-spacing:-0.03em;line-height:1;color:var(--accent-soft)}
.t-stat .lbl{font-size:0.78rem;color:#9a9288;margin-top:0.4rem}

/* ---------- Accent tile ---------- */
.t-accent{
  grid-column:span 1;background:var(--accent);color:white;
  justify-content:center;align-items:center;text-align:center;display:flex;
  text-decoration:none;
}
.t-accent strong{font-size:1.3rem;font-weight:600;letter-spacing:-0.01em;line-height:1.2}
.t-accent:hover{background:var(--accent-deep);color:white}
.t-lime{background:var(--lime);color:var(--ink)}
.t-lime:hover{background:#b3c763;color:var(--ink)}

.t-2{grid-column:span 2}
.t-3{grid-column:span 3}
.t-4{grid-column:span 4}
.t-6{grid-column:span 6}

/* ---------- Profile tile (ink bg) ---------- */
.t-profile{background:var(--ink);color:var(--card)}
.t-profile .tile-head{color:#9a9288}
.t-profile h3{color:white}
.t-profile p{color:#c9c1b5}
.t-profile:hover{border-color:var(--accent)}

/* ---------- Schémas flux illuminés (Audit / RAG / Agent / P1) ---------- */
.tile.v-schema, .schema-panel{
  background:var(--ink);color:var(--card);
  padding:1.5rem;overflow:hidden;
  border:1px solid var(--ink);
}
.tile.v-schema .schema-head, .schema-panel .schema-head{
  font-family:var(--mono);font-size:0.72rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent-soft);margin-bottom:0.8rem;font-weight:600;
}
.tile.v-schema svg, .schema-panel svg{flex:1;width:100%;height:auto;display:block}
.schema-panel{
  max-width:1300px;margin:1rem auto 0;border-radius:var(--radius);
}

@keyframes flowGlow {
  0%,88%,100% { stroke: #444; filter: none; }
  3%,13% { stroke: #c5d97a; filter: drop-shadow(0 0 6px #c5d97a); stroke-width: 2; }
}
@keyframes nodeGlow {
  0%,88%,100% { stroke: #4a4540; fill-opacity: 0.05; }
  3%,15% { stroke: #c5d97a; fill: #c5d97a; fill-opacity: 0.25; filter: drop-shadow(0 0 8px #c5d97a); }
}
@keyframes textGlow {
  0%,88%,100% { fill: #7a7268; }
  3%,15% { fill: #c5d97a; }
}
@keyframes arrowPulse {
  0%,88%,100% { opacity:0.3; }
  3%,15% { opacity:1; filter:drop-shadow(0 0 4px #c5d97a); }
}
.flow-schema svg { --dur: 8s; }
.flow-schema .step-node,.flow-schema .step-line,.flow-schema .step-txt,.flow-schema .step-arr{
  animation-duration:var(--dur);animation-iteration-count:infinite;animation-timing-function:ease-in-out;
}
.flow-schema .step-1.step-node { animation-name: nodeGlow; animation-delay: 0s; }
.flow-schema .step-1.step-line { animation-name: flowGlow; animation-delay: 0s; }
.flow-schema .step-1.step-txt  { animation-name: textGlow; animation-delay: 0s; }
.flow-schema .step-1.step-arr  { animation-name: arrowPulse; animation-delay: 0s; }
.flow-schema .step-2.step-node { animation-name: nodeGlow; animation-delay: 1.5s; }
.flow-schema .step-2.step-line { animation-name: flowGlow; animation-delay: 1.5s; }
.flow-schema .step-2.step-txt  { animation-name: textGlow; animation-delay: 1.5s; }
.flow-schema .step-2.step-arr  { animation-name: arrowPulse; animation-delay: 1.5s; }
.flow-schema .step-3.step-node { animation-name: nodeGlow; animation-delay: 3s; }
.flow-schema .step-3.step-line { animation-name: flowGlow; animation-delay: 3s; }
.flow-schema .step-3.step-txt  { animation-name: textGlow; animation-delay: 3s; }
.flow-schema .step-3.step-arr  { animation-name: arrowPulse; animation-delay: 3s; }
.flow-schema .step-4.step-node { animation-name: nodeGlow; animation-delay: 4.5s; }
.flow-schema .step-4.step-line { animation-name: flowGlow; animation-delay: 4.5s; }
.flow-schema .step-4.step-txt  { animation-name: textGlow; animation-delay: 4.5s; }
.flow-schema .step-4.step-arr  { animation-name: arrowPulse; animation-delay: 4.5s; }
.flow-schema .step-5.step-node { animation-name: nodeGlow; animation-delay: 6s; }
.flow-schema .step-5.step-line { animation-name: flowGlow; animation-delay: 6s; }
.flow-schema .step-5.step-txt  { animation-name: textGlow; animation-delay: 6s; }

/* ---------- Image carousel (t-img on home) ---------- */
.t-carousel .carousel-track{position:absolute;inset:0;overflow:hidden}
.t-carousel .carousel-slide{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:18% center;opacity:0;transition:opacity 1s ease;
  transform:scale(1.02);
}
.t-carousel .carousel-slide.active{opacity:1}
.t-carousel:hover .carousel-slide.active{transform:scale(1.06)}
.t-carousel .carousel-dots{
  position:absolute;bottom:1rem;right:1rem;display:flex;gap:0.4rem;z-index:3;
}
.t-carousel .carousel-dots .dot{
  width:8px;height:8px;border-radius:50%;
  background:rgba(255,255,255,0.4);
  border:1px solid rgba(255,255,255,0.6);
  cursor:pointer;transition:all 0.25s ease;
}
.t-carousel .carousel-dots .dot.active{
  background:var(--lime);border-color:var(--lime);
  box-shadow:0 0 12px rgba(197,217,122,0.7);
  width:22px;border-radius:20px;
}

/* ---------- 3-card row (Audit / Implémentation / Formation) ---------- */
.t-row-card{
  grid-row:span 2;padding:1.8rem;
}
.t-row-card h3{font-size:1.4rem;margin-bottom:0.2rem}
.t-row-card .lede-card{
  font-size:1.02rem;color:var(--accent);font-weight:500;font-style:italic;
  margin-bottom:0.6rem;
}
.t-row-card p{font-size:0.9rem;color:#3a3530;margin-bottom:0.8rem}
.t-row-card .card-list{
  list-style:none;padding:0;margin:0.6rem 0 0;display:flex;flex-direction:column;gap:0.35rem;
}
.t-row-card .card-list li{
  padding:0.4rem 0 0.4rem 1.2rem;position:relative;
  border-top:1px solid var(--line);color:#3a3530;font-size:0.88rem;
}
.t-row-card .card-list li:first-child{border-top:0}
.t-row-card .card-list li::before{
  content:'→';position:absolute;left:0;color:var(--accent);font-weight:600;
}
.t-row-card .card-list li strong{color:var(--ink);font-weight:600}

/* ---------- FAQ (GEO-optimized) ---------- */
.faq-section{margin-top:3rem}
.faq-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0.8rem;
}
.faq-item{
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden;
  transition:border-color 0.25s ease,box-shadow 0.25s ease;
}
.faq-item:hover{border-color:var(--accent-soft)}
.faq-item[open]{
  border-color:var(--accent);
  box-shadow:0 14px 30px -18px rgba(184,128,42,0.22);
}
.faq-item summary{
  cursor:pointer;padding:1.2rem 1.4rem;font-size:1rem;font-weight:600;
  letter-spacing:-0.005em;list-style:none;display:flex;align-items:flex-start;gap:0.8rem;
  color:var(--ink);transition:color 0.2s;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--accent)}
.faq-icon{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;background:var(--bg);
  color:var(--accent);font-weight:700;font-size:1.1rem;line-height:1;
  font-family:var(--mono);transition:transform 0.25s ease,background 0.25s ease;
  margin-top:0.1rem;
}
.faq-item[open] .faq-icon{
  transform:rotate(45deg);background:var(--accent);color:white;
}
.faq-body{
  padding:0 1.4rem 1.3rem 3.2rem;color:#3a3530;font-size:0.94rem;line-height:1.6;
}
.faq-body p{margin-bottom:0.7rem}
.faq-body p:last-child{margin-bottom:0}
.faq-body strong{color:var(--ink)}
@media(max-width:820px){
  .faq-grid{grid-template-columns:1fr}
  .faq-body{padding:0 1.2rem 1.2rem 2.8rem}
}

/* ---------- Sections génériques ---------- */
.section{max-width:1300px;margin:4rem auto 0;padding:0 0.5rem}
.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem}
.section-head h2{font-size:clamp(1.6rem,2.5vw,2.2rem);font-weight:600;letter-spacing:-0.02em}
.section-head p{color:var(--mute);font-size:0.95rem;margin-top:0.3rem}
.section-head .more{font-size:0.9rem;color:var(--accent);text-decoration:none;font-weight:500;font-family:var(--mono)}
.section-head .more:hover{text-decoration:underline}

/* ---------- Crumb / breadcrumb ---------- */
.crumb{
  max-width:1300px;margin:0 auto 1rem;padding:0 0.5rem;
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.08em;
  color:var(--mute);text-transform:uppercase;
}
.crumb a{color:var(--mute);text-decoration:none}
.crumb a:hover{color:var(--accent)}
.crumb span.sep{margin:0 0.4rem;opacity:0.5}

/* ---------- Page hero (intérieures) ---------- */
.page-hero{
  background:linear-gradient(135deg,#fdfcfa,#f5f0e6);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:3rem 2.5rem;max-width:1300px;margin:0 auto 1rem;
  position:relative;overflow:hidden;
}
.page-hero .tile-head{margin-bottom:0.8rem}
.page-hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:700;letter-spacing:-0.025em;line-height:1.05;margin-bottom:1rem;max-width:30ch}
.page-hero h1 em{color:var(--accent);font-style:italic;font-weight:500}
.page-hero p{font-size:1.08rem;max-width:60ch;color:#3a3530}
.page-hero .actions{margin-top:2rem;display:flex;gap:0.7rem;flex-wrap:wrap;align-items:center}

/* ---------- Prose (articles, mentions, à propos) ---------- */
.prose{
  max-width:760px;margin:1rem auto;padding:2.5rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
.prose h1{font-size:clamp(1.8rem,3.5vw,2.6rem);font-weight:700;letter-spacing:-0.02em;line-height:1.1;margin-bottom:1rem}
.prose h2{font-size:1.6rem;font-weight:600;letter-spacing:-0.015em;margin:2rem 0 0.8rem;color:var(--ink)}
.prose h3{font-size:1.25rem;font-weight:600;margin:1.6rem 0 0.6rem}
.prose p{font-size:1.02rem;color:#3a3530;margin-bottom:1rem}
.prose ul,.prose ol{color:#3a3530;padding-left:1.4rem;margin-bottom:1rem}
.prose li{margin-bottom:0.4rem}
.prose a{color:var(--accent);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.prose a:hover{color:var(--accent-deep)}
.prose a.btn{text-decoration:none}
.prose a.btn-primary{color:#fff}
.prose a.btn-primary:hover{color:#fff}
.prose blockquote{border-left:3px solid var(--accent);padding:0.5rem 0 0.5rem 1.2rem;margin:1.5rem 0;font-style:italic;color:#4a4540}
.prose strong{color:var(--ink)}

/* ---------- Card grid (services, formations) ---------- */
.card-grid{
  max-width:1300px;margin:1.5rem auto 0;padding:0 0.5rem;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;
}
.card-grid .tile{padding:1.7rem}

/* ---------- Form ---------- */
.form-wrap{
  max-width:680px;margin:1rem auto;padding:2.5rem;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
.form-wrap label{display:block;font-size:0.85rem;font-weight:500;margin:1rem 0 0.3rem}
.form-wrap input,.form-wrap textarea,.form-wrap select{
  width:100%;padding:0.7rem 0.9rem;border:1px solid var(--line);border-radius:10px;
  background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:0.95rem;
  transition:border-color 0.18s ease;
}
.form-wrap input:focus,.form-wrap textarea:focus,.form-wrap select:focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(184,128,42,0.12);
}
.form-wrap textarea{min-height:140px;resize:vertical;font-family:var(--ui)}

/* ---------- CTA band ---------- */
.cta-band{
  background:linear-gradient(135deg,var(--ink),#2a2522);color:var(--card);
  border-radius:22px;padding:3rem 2.5rem;margin:4rem auto 0;max-width:1300px;
  display:grid;grid-template-columns:2fr auto;gap:2rem;align-items:center;
  position:relative;overflow:hidden;
}
.cta-band::before{
  content:'';position:absolute;top:-50%;right:-10%;width:500px;height:500px;
  background:radial-gradient(circle,rgba(184,128,42,0.18),transparent 70%);
  pointer-events:none;
}
.cta-band h2{font-size:clamp(1.6rem,2.4vw,2rem);font-weight:600;letter-spacing:-0.015em;margin-bottom:0.5rem;position:relative;z-index:2;color:white}
.cta-band p{color:#c9c1b5;font-size:1rem;max-width:50ch;position:relative;z-index:2}
.cta-band .btn-cta{position:relative;z-index:2}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--ink);color:#9a9288;padding:3rem 2rem;margin:3rem auto 0;
  max-width:1300px;font-family:var(--ui);border-radius:22px;
}
.footer-inner{max-width:1140px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr;gap:2.5rem}
.footer-brand .legal-tag{
  font-family:var(--mono);font-size:0.78rem;letter-spacing:0.14em;
  text-transform:uppercase;color:var(--accent-soft);font-weight:600;
  display:block;margin:0.6rem 0 0.4rem;
}
.footer-brand strong{color:#f5f1e8;font-size:1.05rem}
.footer-col h5{
  color:#f5f1e8;font-size:0.78rem;letter-spacing:0.14em;
  text-transform:uppercase;margin-bottom:0.8rem;font-weight:600;
}
.footer-col ul{list-style:none;padding:0;margin:0}
.footer-col li{margin-bottom:0.5rem}
.footer-col a{color:#9a9288;font-size:0.92rem;text-decoration:none;transition:color 0.15s}
.footer-col a:hover{color:var(--accent-soft)}
.footer-bottom{
  max-width:1140px;margin:2rem auto 0;padding-top:1.5rem;
  border-top:1px solid #332e29;display:flex;justify-content:space-between;
  flex-wrap:wrap;gap:1rem;font-size:0.82rem;color:#7a7268;
}
.footer-bottom a{color:#7a7268;text-decoration:none}
.footer-bottom a:hover{color:var(--accent-soft)}

/* ---------- Responsive ---------- */
@media(max-width:820px){
  .bento{grid-template-columns:1fr 1fr}
  .t-hero,.t-img,.t-3,.t-2,.t-4{grid-column:span 2}
  .t-img{grid-row:span 1;aspect-ratio:1856/576}
  .footer-inner{grid-template-columns:1fr 1fr}
  .cta-band{grid-template-columns:1fr;text-align:center}
  .nav-links{display:none}
  .nav-links.open{
    display:flex;flex-direction:column;position:absolute;
    top:100%;right:0;left:0;background:var(--card);
    border:1px solid var(--line);border-radius:18px;
    padding:0.8rem;margin-top:0.4rem;gap:0.2rem;
  }
  .nav-links.open a{padding:0.7rem 1rem;border-radius:10px;text-align:left}
  .nav-links.open .nav-drop-wrap{width:100%;display:flex;flex-direction:column;align-items:stretch}
  .nav-links.open .nav-drop-wrap>a{width:100%}
  .nav-links.open .nav-drop{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;border:0;background:transparent;
    padding:0.2rem 0 0.4rem 0.8rem;margin:0;min-width:0;width:100%;
    display:flex;flex-direction:column;
  }
  .nav-links.open .nav-drop .nav-drop-head{display:none}
  .nav-links.open .nav-drop a{padding:0.5rem 0.6rem;font-size:0.85rem;text-align:left}
  .nav-links.open .nav-drop-wrap>a::after{content:''}
  .nav-links.open a.nav-cta{align-self:flex-start}
  .menu-toggle{display:block}
  .prose,.form-wrap,.page-hero{padding:1.8rem 1.4rem}
}
@media(max-width:520px){
  body{padding:0.8rem}
  .footer-inner{grid-template-columns:1fr}
  .t-hero{padding:2rem 1.5rem}
}

/* ---------- Accessibility ---------- */
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto}
}

/* =========================================================
   Legacy compat — old classes from anciennes pages
   ========================================================= */

main > section,
main > .section,
main > .hero,
main > .bg-cream,
main > .bg-ink,
main > .cta-band {
  max-width:1300px;
  margin:1rem auto 0;
  padding:2.5rem;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
main > .bg-cream{background:linear-gradient(135deg,#fdfcfa,#f5f0e6)}
main > .bg-ink{background:var(--ink);color:var(--card)}
main > .bg-ink h2,main > .bg-ink h3{color:white}
main > .bg-ink p{color:#c9c1b5}
main > .bg-ink .eyebrow{color:var(--accent-soft)}

.eyebrow{
  font-family:var(--mono);font-size:0.72rem;font-weight:600;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--accent);
  margin:0 0 1rem;display:block;
}

.hero-grid{
  display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(2rem,5vw,3rem);
  align-items:center;
}
.hero-grid h1{
  font-size:clamp(2.4rem,5vw,3.8rem);font-weight:700;
  letter-spacing:-0.025em;line-height:1.05;margin-bottom:1rem;
}
.hero-grid h1 em{color:var(--accent);font-style:italic;font-weight:500}
.hero-lede{font-size:1.1rem;max-width:42ch;color:#3a3530}
.hero-portrait{
  aspect-ratio:4/5;background:var(--bg);border:1px solid var(--line);
  border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  font-family:var(--ui);font-weight:700;font-size:clamp(3rem,8vw,5rem);
  color:var(--accent);letter-spacing:0.05em;
}

.btn-row{display:flex;gap:0.7rem;flex-wrap:wrap;margin-top:1.5rem;align-items:center}
.btn{
  display:inline-flex;align-items:center;gap:0.4rem;
  padding:0.85rem 1.5rem;border-radius:14px;text-decoration:none;
  font-weight:500;font-size:0.95rem;border:1.5px solid transparent;
  transition:all 0.2s ease;
}
.btn-primary{
  background:linear-gradient(135deg,var(--accent),var(--accent-deep));color:white;
  box-shadow:0 8px 20px -8px rgba(184,128,42,0.55);
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 14px 28px -10px rgba(184,128,42,0.65)}

.section-head{margin-bottom:2rem}
.section-head h2{font-size:clamp(1.6rem,2.8vw,2.4rem);font-weight:600;letter-spacing:-0.02em;margin-bottom:0.5rem}
.section-head p{color:var(--mute);font-size:1rem}

.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,4vw,3rem)}
.split h3{font-size:1.4rem;font-weight:600;margin-bottom:0.5rem;letter-spacing:-0.01em}
.feature-list{list-style:none;padding:0;margin:1rem 0 0}
.feature-list li{
  padding:0.5rem 0 0.5rem 1.4rem;position:relative;
  border-bottom:1px solid var(--line);color:#3a3530;
}
.feature-list li::before{content:'—';position:absolute;left:0;color:var(--accent)}

.card-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem;
}
.card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:1.6rem;display:flex;flex-direction:column;
  transition:transform 0.25s ease,border-color 0.25s ease,box-shadow 0.25s ease;
}
.card:hover{
  transform:translateY(-3px);border-color:var(--accent-soft);
  box-shadow:0 14px 30px -16px rgba(184,128,42,0.25);
}
.card .num{
  font-family:var(--mono);font-size:0.72rem;font-weight:600;
  letter-spacing:0.14em;text-transform:uppercase;color:var(--accent);margin-bottom:0.5rem;
}
.card h3{font-size:1.2rem;font-weight:600;margin-bottom:0.4rem;letter-spacing:-0.01em}
.card p{font-size:0.92rem;color:#3a3530;margin-bottom:0.8rem}
.card-link{
  margin-top:auto;color:var(--accent);font-weight:500;font-size:0.9rem;
  text-decoration:none;font-family:var(--mono);letter-spacing:0.04em;
}
.card-link:hover{text-decoration:underline}

.carousel{
  display:flex;gap:0.8rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:0.5rem 0 1rem;margin:0 -0.5rem;scrollbar-width:thin;
}
.carousel-item{
  flex:0 0 280px;scroll-snap-align:start;background:var(--bg);
  border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:all 0.2s ease;
}
.carousel-item:hover{border-color:var(--accent-soft);transform:translateY(-3px)}
.carousel-item h4{font-size:1.1rem;font-weight:600;margin-bottom:0.3rem;letter-spacing:-0.01em}
.carousel-item p{font-size:0.88rem;color:var(--mute);margin-bottom:0.6rem}
.carousel-item .link-arrow{margin-top:auto;color:var(--accent);font-weight:500;font-size:0.85rem;font-family:var(--mono)}
.carousel-hint{font-size:0.82rem;color:var(--mute);text-align:center;margin-top:0.4rem;font-style:italic}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1.5rem}
.stat{text-align:left}
.stat .n{
  font-size:clamp(1.8rem,4vw,2.6rem);color:var(--accent);font-weight:700;
  letter-spacing:-0.02em;line-height:1;
}
.stat .l{font-size:0.85rem;color:var(--mute);margin-top:0.3rem}

.coast{
  display:block;width:100%;max-width:760px;height:auto;
  margin:clamp(2rem,4vw,3rem) auto 0;color:var(--mute);opacity:0.55;
}
.coast-caption{
  text-align:center;font-family:var(--mono);font-style:italic;font-size:0.82rem;
  color:var(--mute);opacity:0.7;margin:0.4rem 0 0;letter-spacing:0.04em;
}

.reveal{opacity:1;transform:none}

@media(max-width:820px){
  .hero-grid,.split{grid-template-columns:1fr}
  .hero-portrait{max-width:300px;margin:0 auto}
  main > section,main > .section,main > .hero,main > .bg-cream,main > .bg-ink,main > .cta-band{padding:1.8rem 1.4rem}
}