/* ==========================================================
   WildPrint — feuille de style
   Palette tirée du logo : rouge #8C2928, anthracite #3D3D3D
   Typo : Archivo (axe de largeur variable)
   Motif : pans coupés à 45°, repris des angles du logo
   ========================================================== */

:root {
  --paper: #F4F4F2;
  --stone: #E6E5E2;
  --ink: #2A2A2A;
  --ink-soft: #5B5B59;
  --charcoal: #3D3D3D;
  --charcoal-deep: #2E2E2E;
  --red: #8C2928;
  --red-hover: #A3302E;
  --red-light: #D4605A;
  --line: rgba(42, 42, 42, 0.14);
  --line-strong: rgba(42, 42, 42, 0.28);
  --heading: #3D3D3D;          /* logo texte, grand titre */
  --title-line: #7A7A78;       /* lignes de couche du grand titre */
  --muted: #BDBDBA;            /* numéros d'étape pas encore atteints */
  --raised: #F4F4F2;           /* cartes posées sur un fond gris */
  --field: #F4F4F2;            /* champs du formulaire */
  --inverse: #3D3D3D;          /* blocs sombres (prise de mesures) */
  --inverse-deep: #2E2E2E;     /* section contact, pied de page */
  --tip: #2E2E2E;              /* infobulles */
  --on-inverse: #F4F4F2;
  --on-inverse-soft: rgba(244, 244, 242, .8);
  --on-red: #FFFFFF;
  --glow: #FFFFFF;

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --wrap: 72rem;
  --radius: 2px;
  --cut: 12px; /* pan coupé, repris des angles du logo */
  --nav-h: 4.5rem;
}

/* ---------- Thème sombre : suit le réglage de l'appareil ---------- */
:root { color-scheme: light dark; }
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161615;
    --stone: #1F1F1D;
    --ink: #ECECE8;
    --ink-soft: #A9A8A2;
    --charcoal: #E6E5E2;
    --charcoal-deep: #0E0E0D;
    --red: #C9453F;
    --red-hover: #D85A53;
    --red-light: #E07A73;
    --line: rgba(236, 236, 232, 0.14);
    --line-strong: rgba(236, 236, 232, 0.32);
    --heading: #ECECE8;
    --title-line: #8A8984;
    --muted: #4A4A47;
    --raised: #262624;
    --field: #262624;
    --inverse: #2A2A28;
    --inverse-deep: #0E0E0D;
    --tip: #3A3A37;
    --glow: rgba(255, 255, 255, .06);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[x-cloak] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.1; }
p { margin: 0 0 1em; }

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

.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 100;
  background: var(--red); color: var(--on-red); padding: .5rem 1rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow > * { max-width: 46rem; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-block;
  font: inherit; font-weight: 650; font-variation-settings: "wdth" 110;
  padding: .9rem 1.5rem;
  border: 0;
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut)));
  text-decoration: none; cursor: pointer;
  transition: background-color .15s;
}
.btn--accent { background: var(--red); color: var(--on-red); }
.btn--accent:hover { background: var(--red-hover); }
.btn--accent:disabled { opacity: .6; cursor: wait; }
.btn--dark { background: var(--charcoal); color: var(--paper); }
.btn--dark:hover { background: var(--ink); }

.text-link {
  align-self: center;
  font-weight: 650; text-decoration: underline; text-decoration-thickness: 2px;
  text-underline-offset: 5px; text-decoration-color: var(--red);
  padding: .5rem 0;
}
.text-link:hover { color: var(--red); }

/* ---------- Navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  height: var(--nav-h);
  color: var(--ink);
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, transform .35s ease;
}
.nav--hidden { transform: translateY(-100%); }
.nav--solid { border-bottom-color: var(--line); }
.nav__inner {
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}
.nav__logo {
  display: flex; align-items: center; gap: .7rem;
  font-weight: 850; font-variation-settings: "wdth" 125; font-size: 1.2rem;
  text-decoration: none; letter-spacing: -.01em; color: var(--heading);
}
.nav__logo img { height: 2.4rem; width: auto; }
.nav__links { display: flex; gap: 1.75rem; }
.nav__links a {
  text-decoration: none; font-size: .95rem; color: var(--ink-soft);
  padding-block: .25rem; border-bottom: 2px solid transparent;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); border-bottom-color: var(--red); }
.nav__toggle {
  display: none; font: inherit; font-weight: 600; color: inherit;
  background: none; border: 1px solid var(--line);
  border-radius: var(--radius); padding: .4rem .9rem; cursor: pointer;
}

@media (max-width: 900px) {
  .nav__toggle { display: block; }
  .nav__links {
    display: none;
    position: absolute; top: var(--nav-h); left: 0; right: 0;
    flex-direction: column; gap: 0;
    background: var(--paper); padding: .5rem 1.25rem 1.25rem;
    border-bottom: 1px solid var(--line);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: 1.1rem; }
  .nav__links a.is-active { border-bottom-color: var(--line); color: var(--red); }
}

/* ---------- Hero : le logo 3D s'imprime, le titre suit ---------- */
.hero {
  min-height: 100svh;
  background:
    radial-gradient(60% 55% at 72% 50%, var(--glow) 0%, transparent 70%),
    var(--paper);
  color: var(--ink);
  display: flex; align-items: center;
  padding: calc(var(--nav-h) + 2rem) 0 3rem;
  overflow: hidden;
}
.hero__inner {
  width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto;
  display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 2rem;
}
.hero__text { order: -1; }
.hero__visual {
  position: relative;
  aspect-ratio: 1 / 1.05;
  width: 100%;
}
.hero__visual canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; }
.hero__fallback {
  position: absolute; inset: 12%; width: 76%; height: 76%; object-fit: contain;
  transition: opacity .4s;
}
.hero__visual.is-ready .hero__fallback { opacity: 0; }
.hero__visual::after {  /* ombre portée au sol */
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 4%; height: 6%;
  background: radial-gradient(closest-side, rgba(0,0,0,.16), transparent);
  pointer-events: none;
}

.hero__title {
  font-size: clamp(3rem, 7.2vw, 7rem);
  font-weight: 880;
  font-variation-settings: "wdth" 125;
  letter-spacing: -.035em;
  line-height: .9;
  margin-bottom: 2rem;
  padding-bottom: .05em;
}
.hero__title span {
  display: block;
  background: repeating-linear-gradient(to bottom, var(--heading) 0 .05em, var(--title-line) .05em .058em);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__lead {
  max-width: 32rem;
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  color: var(--ink-soft);
  margin-bottom: 2rem;
}
.hero__title small {
  display: block;
  font-size: clamp(.95rem, 1.4vw, 1.1rem); font-weight: 700;
  font-variation-settings: "wdth" 110; letter-spacing: .01em; line-height: 1.3;
  color: var(--red); margin-bottom: 1.25rem;
}
.hero__points {
  list-style: none; margin: 0 0 2.25rem; padding: 0;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-weight: 600; font-size: .95rem;
}
.hero__points li { position: relative; padding-left: 1.1rem; }
.hero__points li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: .55rem; height: 3px; background: var(--red);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: 1.75rem; }

@media (max-width: 860px) {
  .hero { align-items: flex-start; padding-top: var(--nav-h); }
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .hero__text { order: 0; }
  .hero__visual { aspect-ratio: auto; height: 46svh; }
}

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Sections ---------- */
.section { padding: clamp(4.5rem, 10vw, 8rem) 0; }
.section--paper { background: var(--paper); }
.section--stone { background: var(--stone); }
.section--dark { background: var(--inverse-deep); color: var(--on-inverse); }

.section__head { max-width: 40rem; margin-bottom: 3rem; }
.section__head h2, .about h2, .contact h2 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  font-weight: 820;
  font-variation-settings: "wdth" 118;
  letter-spacing: -.02em;
  margin-bottom: 1rem;
}
.section__head p { color: var(--ink-soft); font-size: 1.125rem; }

.sub {
  font-size: 1.3rem; font-weight: 750; font-variation-settings: "wdth" 110;
  margin-bottom: 1.25rem;
}

/* ---------- Galerie ---------- */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2rem; }
.chip {
  font: inherit; font-size: .95rem;
  padding: .45rem 1rem;
  border: 1px solid var(--line); border-radius: 99px;
  background: transparent; color: var(--ink); cursor: pointer;
}
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--charcoal); color: var(--paper); border-color: var(--charcoal); }

.grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 2.25rem 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.card {
  display: block; width: 100%; text-align: left;
  font: inherit; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.card img {
  width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--stone);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
  margin-bottom: .85rem;
}
.card__title { display: block; font-weight: 700; font-size: 1.05rem; }
.card:hover .card__title { text-decoration: underline; text-underline-offset: 3px; }
.card__meta { display: block; color: var(--ink-soft); font-size: .92rem; }
a.card { text-decoration: none; }
.card__desc { display: block; margin-top: .4rem; color: var(--ink-soft); font-size: .9rem; }

.more { margin-top: 3rem; }
.galerie__info { color: var(--ink-soft); padding: 1rem 0; }
.lightbox__desc { max-width: 38rem; }

/* ---------- Lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 1rem; }
.lightbox__backdrop { position: absolute; inset: 0; background: rgba(30, 30, 30, .9); }
.lightbox__panel {
  position: relative;
  width: min(100%, 68rem); max-height: calc(100svh - 2rem);
  display: grid; grid-template-columns: 1.4fr 1fr;
  background: var(--paper);
  border-radius: var(--radius);
  overflow: auto;
}
.lightbox__media { background: var(--charcoal-deep); display: flex; flex-direction: column; }
.lightbox__media > img { width: 100%; flex: 1; object-fit: contain; max-height: 75svh; }
.lightbox__thumbs { display: flex; gap: .5rem; padding: .75rem; }
.lightbox__thumbs button {
  width: 4rem; height: 4rem; padding: 0; border: 2px solid transparent;
  border-radius: var(--radius); overflow: hidden; cursor: pointer; background: none;
}
.lightbox__thumbs button[aria-current="true"] { border-color: var(--red-light); }
.lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; }

.lightbox__info { padding: 2rem 2rem 2.5rem; position: relative; }
.lightbox__close {
  position: absolute; top: 1rem; right: 1rem;
  font: inherit; font-size: .9rem; cursor: pointer;
  background: none; border: 1px solid var(--line); border-radius: var(--radius);
  padding: .35rem .8rem;
}
.lightbox__close:hover { border-color: var(--ink); }
.lightbox__cat { color: var(--red); font-weight: 600; margin-bottom: .4rem; }
.lightbox__info h3 {
  font-size: 1.8rem; font-weight: 800; font-variation-settings: "wdth" 112;
  margin-bottom: 1rem; padding-right: 5rem;
}

.specs { margin: 1.75rem 0 0; }
.specs div {
  display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem;
  padding: .7rem 0; border-top: 1px solid var(--line);
}
.specs dt { color: var(--ink-soft); font-size: .95rem; }
.specs dd { margin: 0; font-weight: 600; }

@media (max-width: 820px) {
  .lightbox { padding: 0; }
  .lightbox__panel { grid-template-columns: 1fr; max-height: 100svh; height: 100%; border-radius: 0; }
  .lightbox__media > img { max-height: 55svh; }
}

/* ---------- Services ---------- */
.services {
  list-style: none; margin: 0 0 3rem; padding: 0;
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
}
.service {
  background: var(--raised);
  border-top: 3px solid var(--red);
  padding: 1.75rem 1.5rem 1.5rem;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.service h3 {
  font-size: 1.3rem; font-weight: 780; font-variation-settings: "wdth" 112;
  margin-bottom: .75rem;
}
.service p { color: var(--ink-soft); font-size: .98rem; }
.service ul { list-style: none; margin: 0; padding: 0; font-size: .95rem; }
.service ul li { padding: .5rem 0 .5rem 1.2rem; border-top: 1px solid var(--line); position: relative; }
.service ul li::before {
  content: ""; position: absolute; left: 0; top: 1.05rem;
  width: .55rem; height: 3px; background: var(--red);
}

.onsite {
  display: grid; grid-template-columns: 1fr auto; gap: 1.5rem 3rem; align-items: center;
  background: var(--inverse); color: var(--on-inverse);
  padding: 2rem 2.25rem;
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.onsite h3 { font-size: 1.4rem; font-weight: 780; font-variation-settings: "wdth" 112; margin-bottom: .6rem; }
.onsite p { margin: 0; color: var(--on-inverse-soft); max-width: 40rem; }
@media (max-width: 760px) { .onsite { grid-template-columns: 1fr; } .onsite .btn { justify-self: start; } }

/* ---------- Savoir-faire ---------- */
.process {
  list-style: none; margin: 0 0 5rem; padding: 0;
  counter-reset: etape;
  display: grid; gap: 2.5rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}
.process li { counter-increment: etape; }
.process__track { height: 3px; background: var(--line); margin-bottom: 2.5rem; overflow: hidden; }
.process__bar { height: 100%; background: var(--red); transform-origin: left; }
.anim .process li::before { color: var(--muted); transition: color .4s; }
.anim .process li h3, .anim .process li p { opacity: .45; transition: opacity .4s; }
.anim .process li.is-on::before { color: var(--red); }
.anim .process li.is-on h3, .anim .process li.is-on p { opacity: 1; }
@media (max-width: 760px) { .process__track { display: none; } }
.process li::before {
  content: counter(etape);
  display: block;
  font-size: 3.2rem; font-weight: 880; font-variation-settings: "wdth" 125;
  line-height: 1; color: var(--red);
  margin-bottom: .75rem;
}
.process h3 { font-size: 1.15rem; font-weight: 750; margin-bottom: .5rem; }
.process p { color: var(--ink-soft); font-size: .98rem; }

.split { display: grid; grid-template-columns: 1.3fr 1fr; gap: 4rem; }
@media (max-width: 760px) { .split { grid-template-columns: 1fr; gap: 3rem; } }

.materials { margin: 0; }
.materials div {
  display: grid; grid-template-columns: 5rem 1fr; gap: 1rem;
  padding: 1rem 0; border-top: 1px solid var(--line);
}
.materials dt { font-weight: 850; font-variation-settings: "wdth" 120; font-size: 1.1rem; }
.materials dd { margin: 0; color: var(--ink-soft); }

.finishes { margin: 0; padding: 0; list-style: none; }
.finishes li { padding: .7rem 0 .7rem 1.4rem; border-top: 1px solid var(--line); position: relative; }
.finishes li::before {
  content: ""; position: absolute; left: 0; top: 1.25rem;
  width: .6rem; height: 3px; background: var(--red);
}

/* ---------- Matériaux (radar) et finitions ---------- */
.choix { margin-top: 4rem; }
.choix .conseil { color: var(--ink-soft); max-width: 44rem; margin-bottom: 1.75rem; }
.radar__body {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2.5rem; align-items: center;
}
@media (max-width: 760px) { .radar__body { grid-template-columns: 1fr; gap: 1.5rem; } }
.radar__plot { position: relative; max-width: 34rem; }
.radar__plot svg { width: 100%; height: auto; display: block; overflow: visible; }
.radar__grid { fill: none; stroke: var(--line); stroke-width: 1; }
.radar__grid--bord { stroke: var(--line-strong); }
.radar__axis { stroke: var(--line); stroke-width: 1; }
.radar__label { fill: var(--ink-soft); font: 600 15px var(--font); }
.radar__axe:hover .radar__label { fill: var(--ink); }
.radar__hit { fill: transparent; }

.radar__serie { transition: opacity .25s; }
.radar__shape {
  fill: var(--c); fill-opacity: .06;
  stroke: var(--c); stroke-width: 2; stroke-linejoin: round;
  transition: fill-opacity .25s;
}
.radar__dot { fill: var(--c); stroke: var(--paper); stroke-width: 2; opacity: 0; transition: opacity .25s; }
.radar__serie.is-on .radar__shape { fill-opacity: .2; stroke-width: 2.5; }
.radar__serie.is-on .radar__dot { opacity: 1; }
.radar__serie.is-off { opacity: 0; }
@media (prefers-color-scheme: dark) {
  .radar__shape { stroke-dasharray: var(--trait, none); }
}
.is-fantome .radar__serie.is-off { opacity: .14; }

.radar__tip {
  position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 16px));
  background: var(--tip); color: var(--on-inverse);
  padding: .55rem .75rem; border-radius: var(--radius);
  font-size: .85rem; line-height: 1.35; white-space: nowrap; pointer-events: none;
  display: grid; gap: .15rem; min-width: 11rem;
}
.radar__tip--bas { transform: translate(-50%, 16px); }
.radar__tip-titre { font-weight: 700; margin-bottom: .2rem; }
.radar__tip-ligne { display: grid; grid-template-columns: .9rem 1fr auto; align-items: center; gap: .5rem; }
.radar__tip-ligne i { width: .9rem; height: 3px; border-radius: 2px; }
.radar__tip-ligne strong { font-variant-numeric: tabular-nums; }

.radar__aide { color: var(--ink-soft); font-size: .9rem; margin-bottom: .75rem; }
.radar__legende ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.radar__legende li { border-bottom: 1px solid var(--line); }
.mat {
  display: grid; grid-template-columns: 1.6rem 4.5rem 1fr; align-items: center; gap: .5rem;
  width: 100%; padding: .8rem .25rem; text-align: left;
  font: inherit; color: var(--ink); background: none; border: 0; cursor: pointer;
  transition: opacity .2s;
}
.mat__trait { width: 1.4rem; height: 4px; border-radius: 2px; }
.mat__nom { font-weight: 850; font-variation-settings: "wdth" 115; }
.mat__resume { color: var(--ink-soft); font-size: .95rem; }
.mat.is-dim { opacity: .45; }
.mat[aria-pressed="true"] .mat__nom { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.mat__detail { padding: 0 .25rem 1rem 2.1rem; }
.mat__detail p { color: var(--ink-soft); font-size: .95rem; margin-bottom: .6rem; }
.mat__ideal { margin-bottom: 0 !important; }
.mat__ideal span:first-child { display: block; font-weight: 700; color: var(--ink); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.radar__tous { display: inline-block; margin-top: .75rem; font: inherit; font-weight: 650; background: none; border: 0; cursor: pointer; color: var(--ink); }

.radar__table { margin-top: 2rem; }
.radar__table summary { cursor: pointer; font-weight: 650; text-decoration: underline; text-decoration-color: var(--red); text-underline-offset: 5px; text-decoration-thickness: 2px; }
.table-wrap { overflow-x: auto; margin-top: 1rem; }
.radar__table table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: .93rem; }
.radar__table th, .radar__table td { padding: .6rem .75rem; border-bottom: 1px solid var(--line); text-align: center; }
.radar__table thead th { font-weight: 600; color: var(--ink-soft); vertical-align: bottom; }
.radar__table th[scope="row"], .radar__table thead th:first-child { text-align: left; font-weight: 800; color: var(--ink); }
.radar__table td { font-variant-numeric: tabular-nums; }

.finishes--cols { columns: 2 18rem; column-gap: 3rem; }
.finishes--cols li { break-inside: avoid; }

/* ---------- Sur mesure ---------- */
.bring ul { padding-left: 1.2rem; margin: 0 0 1.75rem; }
.bring li { margin-bottom: .6rem; }
.bring li::marker { color: var(--red); }
.bring > p { color: var(--ink-soft); margin-bottom: 2rem; }

/* ---------- À propos ---------- */
.about p { font-size: 1.15rem; line-height: 1.7; }

/* ---------- FAQ ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq details { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; position: relative;
  padding: 1.15rem 2.5rem 1.15rem 0;
  font-weight: 700; font-size: 1.12rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: .25rem; top: .85rem;
  font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--red);
  transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { color: var(--red); }
.faq details p { color: var(--ink-soft); margin: 0; padding: 0 2.5rem 1.4rem 0; }

/* ---------- Contact ---------- */
.contact { display: grid; grid-template-columns: 1fr 1.3fr; gap: 4rem; align-items: start; }
@media (max-width: 820px) { .contact { grid-template-columns: 1fr; gap: 2.5rem; } }
.contact__intro p { color: var(--on-inverse-soft); font-size: 1.1rem; max-width: 26rem; }
.contact__mail a { color: var(--red-light); }

.form { display: grid; gap: 1.25rem; }
.form label { display: grid; gap: .4rem; font-weight: 600; font-size: .95rem; }
.form input:not([type="checkbox"]), .form select, .form textarea {
  font: inherit; font-weight: 400; color: var(--ink);
  background: var(--field);
  border: 2px solid transparent; border-radius: var(--radius);
  padding: .75rem .9rem; width: 100%;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--red-light); }
.form textarea { resize: vertical; }
.form .consent { display: flex; gap: .7rem; align-items: flex-start; font-weight: 400; font-size: .9rem; color: var(--on-inverse-soft); }
.form .consent input { margin-top: .3rem; accent-color: var(--red-light); }
.form .btn { justify-self: start; }
.hp { position: absolute; left: -9999px; }
.form__status { margin: 0; padding: .8rem 1rem; border-radius: var(--radius); }
.form__status.ok { background: #3E6A4B; color: #FFFFFF; }
.form__status.erreur { background: var(--red); color: var(--on-red); }

/* ---------- Footer ---------- */
.footer { background: var(--inverse-deep); color: rgba(244, 244, 242, .6); border-top: 1px solid rgba(244, 244, 242, .1); padding: 1.75rem 0; font-size: .9rem; }
.footer__inner { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.footer__brand { display: flex; align-items: center; gap: .75rem; }
.footer__brand img { height: 2rem; width: auto; }

/* ---------- Page mentions légales ---------- */
.legal { padding: calc(var(--nav-h) + 3rem) 0 5rem; }
.legal h1 { font-size: clamp(2rem, 5vw, 3rem); font-weight: 820; font-variation-settings: "wdth" 118; margin-bottom: 2.5rem; }
.legal h2 { font-size: 1.3rem; font-weight: 750; margin: 2.5rem 0 .75rem; }
.legal p { color: var(--ink-soft); }