/* ============================================================
   L'Héritage d'un savoir-faire — VERSION 2 « Atelier »
   Artisanale, chaleureuse, faite main
   ============================================================ */

:root{
  --paper:#f6eddb;
  --paper-2:#efe0c3;
  --wood-bg:#e8d4ad;
  --card:#fffaf0;
  --ink:#3b2a19;
  --ink-2:#6c5238;
  --wood:#b26a33;
  --wood-2:#8a4d22;
  --honey:#d9a43c;
  --forest:#4c6144;
  --forest-2:#3a4c34;
  --brick:#b1502e;
  --line:#d8c39c;

  --disp:"Fraunces", Georgia, "Times New Roman", serif;
  --hand:"Caveat", "Segoe Script", cursive;
  --body:"Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap:1140px;
  --wonk:255px 12px 235px 14px/14px 225px 16px 255px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--body);
  font-size:1.12rem;
  line-height:1.62;
  color:var(--ink);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.23 0 0 0 0 0.16 0 0 0 0 0.09 0 0 0 0.04 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
picture{ display:contents; }
a{ color:var(--wood-2); }

/* ---------- Focus visible (accessibilité) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--forest-2);
  outline-offset:2px;
  border-radius:2px;
}
.section-forest a:focus-visible,
.section-forest button:focus-visible,
.section-forest input:focus-visible,
.section-forest textarea:focus-visible{
  outline-color:var(--honey);
}

.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 clamp(1.1rem,4vw,2.4rem); }

.sr-only,.skip-link{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link:focus{ position:fixed; top:.6rem; left:.6rem; width:auto; height:auto; clip:auto; background:var(--ink); color:var(--paper); padding:.6rem 1rem; z-index:200; border-radius:4px; }

/* ---------- Barre du haut ---------- */
.topbar{ position:sticky; top:0; z-index:100; background:var(--paper); border-bottom:2px solid var(--ink); }
.topbar-inner{ display:flex; align-items:center; gap:1.2rem; min-height:74px; }
.brand{ display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand-mark{ width:50px; height:50px; border-radius:50%; object-fit:cover; border:2px solid var(--ink); mix-blend-mode:multiply; flex:none; }
.brand-text{ font-family:var(--disp); font-weight:600; font-size:1.04rem; line-height:1.1; }
.brand-text em{ font-weight:500; font-style:italic; color:var(--wood-2); }

.nav{ display:flex; align-items:center; gap:1.4rem; font-weight:500; }
.nav a{ color:var(--ink); text-decoration:none; }
.nav a:hover{ color:var(--wood-2); text-decoration:underline wavy var(--honey); text-underline-offset:4px; }
.nav .nav-phone{
  font-family:var(--disp); font-weight:600; background:var(--forest); color:var(--paper);
  padding:.45rem .9rem; border-radius:var(--wonk); text-decoration:none;
}
.nav .nav-phone:hover{ background:var(--forest-2); color:#fff; text-decoration:none; }
.burger{ display:none; }

/* ---------- Boutons ---------- */
.btn{
  display:inline-block; font-family:var(--disp); font-weight:600; font-size:1.02rem;
  padding:.8rem 1.5rem; text-decoration:none; cursor:pointer; border:2px solid var(--ink);
  border-radius:var(--wonk); transition:transform .12s ease;
}
.btn:hover{ transform:translate(-1px,-2px); }
.btn-fill{ background:var(--wood); color:#fff; box-shadow:4px 4px 0 var(--ink); }
.btn-line{ background:var(--card); color:var(--ink); box-shadow:4px 4px 0 var(--ink); }

/* ---------- Sections ---------- */
main{ overflow:hidden; }
.section{ position:relative; padding:clamp(3.2rem,7vw,5.5rem) 0; background:var(--paper); }
.section-wood{ background:var(--wood-bg); }
.section-cream{ background:var(--paper-2); }
.section-forest{ background:var(--forest); color:var(--paper); }

.kicker{ font-family:var(--hand); font-size:1.5rem; color:var(--wood-2); margin:0 0 .2rem; transform:rotate(-1.5deg); }
.kicker.light{ color:var(--honey); }
.h2{ font-family:var(--disp); font-weight:600; font-size:clamp(1.7rem,4vw,2.5rem); line-height:1.15; margin:0 0 1.2rem; }
.h2.light{ color:#fff; }
.lead{ font-size:1.15rem; color:var(--ink-2); margin:0 0 2rem; max-width:55ch; }

/* ---------- Bordure « tracé main » ---------- */
.divider{ position:absolute; left:0; right:0; bottom:-1px; width:100%; height:42px; }
.hero .divider{ fill:var(--paper-2); }
#faire .divider{ fill:var(--paper); }
.section-wood .divider{ fill:var(--wood-bg); }
#chantiers .divider{ fill:var(--paper); }
.section-cream .divider{ fill:var(--paper-2); }
#zone .divider{ fill:var(--paper); }

/* ---------- Hero ---------- */
.hero{ position:relative; background:var(--paper-2); padding:clamp(2.5rem,6vw,4.5rem) 0 3.5rem; }
.hero-inner{ display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.hello{ font-family:var(--hand); font-size:2rem; color:var(--wood-2); margin:0 0 .3rem; transform:rotate(-2deg); }
.hero h1{ font-family:var(--disp); font-weight:600; font-size:clamp(2.1rem,5vw,3.3rem); line-height:1.12; margin:0 0 1.2rem; }
.hero h1 .hl{
  display:inline; background:linear-gradient(transparent 58%, var(--honey) 58% 92%, transparent 92%);
  padding:0 .1em;
}
.hero-p{ font-size:1.16rem; color:var(--ink-2); max-width:48ch; margin:0 0 1.8rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero-badge{ align-self:start; display:flex; flex-direction:column; align-items:center; gap:.7rem; }
.hero-badge-mark{ position:relative; width:min(210px,60%); margin-top:-1.4rem; }
.hero-logo{ display:block; width:100%; border-radius:50%; border:3px solid var(--ink); background:var(--card); mix-blend-mode:multiply; }

.hero-3d{ position:relative; width:min(360px,100%); aspect-ratio:5/4; padding-bottom:2.1rem; cursor:grab; touch-action:none; }
.hero-3d:active{ cursor:grabbing; }
.hero-3d canvas{ position:absolute; inset:0 0 2.1rem 0; width:100%; height:calc(100% - 2.1rem); }
.hero-3d-nav{
  position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  display:flex; align-items:center; justify-content:center; gap:.45rem;
  padding:.15rem .4rem; border-radius:999px;
  background:var(--paper); box-shadow:0 1px 4px rgba(59,42,25,.18);
  opacity:0; transition:opacity .25s;
}
.hero-3d.is-3d .hero-3d-nav{ opacity:1; }
.hero-3d-label{
  font-family:var(--hand); font-size:1.05rem; color:var(--wood-2);
  min-width:8.5ch; text-align:center; white-space:nowrap;
}
.hero-3d-arrow{
  appearance:none; cursor:pointer; flex:none;
  width:1.7rem; height:1.7rem; border:2px solid var(--ink); border-radius:50%;
  background:var(--card); color:var(--ink); font-size:1rem; line-height:1;
  display:flex; align-items:center; justify-content:center; transition:transform .1s;
}
.hero-3d-arrow:hover{ transform:scale(1.08); }
@media (prefers-reduced-motion:reduce){ .hero-3d-nav{ transition:none; } }

/* ---------- Bandeau ---------- */
.strip{ background:var(--forest-2); color:var(--paper); }
.strip-inner{ display:flex; flex-wrap:wrap; gap:.6rem 1.8rem; justify-content:center; padding:.9rem 1rem; font-family:var(--disp); font-weight:600; letter-spacing:.02em; }

/* ---------- Menu / prestations ---------- */
.menu{ display:flex; flex-direction:column; gap:2.4rem; margin-top:2.4rem; }
.dish{ display:grid; grid-template-columns:clamp(200px,30%,300px) 1fr; gap:clamp(1.4rem,4vw,2.6rem); align-items:center; }
.dish:nth-child(even){ grid-template-columns:1fr clamp(200px,30%,300px); }
.dish:nth-child(even) .dish-ico{ order:2; }
.dish-ico{
  background:var(--card); border:2px solid var(--ink); border-radius:var(--wonk);
  box-shadow:5px 5px 0 var(--ink); overflow:hidden; aspect-ratio:3/2;
}
.dish-ico img{
  display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit;
}
.dish-txt h3{ font-family:var(--disp); font-weight:600; font-size:1.3rem; line-height:1.2; margin:0 0 .2rem; }
.dish:nth-child(even) .dish-txt{ text-align:right; }
.who{ font-family:var(--hand); font-size:1.3rem; color:var(--brick); margin:0 0 .5rem; }
.dish-txt p:not(.who){ color:var(--ink-2); margin:0 0 .7rem; }
.talk{ font-family:var(--disp); font-weight:600; color:var(--wood-2); text-decoration:none; border-bottom:2px solid var(--honey); }
.price-note{ font-family:var(--hand); font-size:1.4rem; text-align:center; color:var(--wood-2); margin:2.6rem auto 0; max-width:40ch; }

/* ---------- Polaroids ---------- */
.polaroid{ background:var(--card); border:1px solid var(--line); padding:.7rem .7rem 0; box-shadow:5px 6px 14px rgba(59,42,25,.22); }
.polaroid-tilt-l{ transform:rotate(-2.2deg); }
.polaroid-tilt-r{ transform:rotate(2deg); }
.polaroid-img{
  aspect-ratio:4/3;
  background:
    repeating-linear-gradient(46deg, transparent 0 13px, rgba(138,77,34,.12) 13px 14px),
    linear-gradient(160deg,#f0e4cd,#e2d0ab);
  display:grid; place-items:center;
}
.polaroid-img::after{ content:attr(data-label); font-family:var(--hand); font-size:1.2rem; color:var(--wood-2); }
img.polaroid-img{ display:block; width:100%; height:auto; object-fit:cover; }
.polaroid-cap,.polaroid figcaption{ font-family:var(--hand); font-size:1.25rem; color:var(--ink); text-align:center; padding:.5rem .3rem .7rem; margin:0; }

/* ---------- Mon histoire ---------- */
.histoire-grid{ display:grid; grid-template-columns:320px 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.histoire-txt p{ margin:0 0 1rem; }
.signature{ font-family:var(--hand); font-size:2.4rem; color:var(--wood-2); margin:.6rem 0 0; }

/* ---------- Mur de chantiers ---------- */
.wall{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.8rem 1.4rem; margin-top:2rem; }

/* ---------- Étapes ---------- */
.steps{ list-style:none; margin:2.4rem 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; counter-reset:s; }
.steps li{ background:var(--card); border:2px solid var(--ink); border-radius:var(--wonk); box-shadow:5px 5px 0 var(--ink); padding:2.4rem 1.4rem 1.4rem; position:relative; }
.steps .num{
  position:absolute; top:-22px; left:-14px; width:52px; height:52px; display:grid; place-items:center;
  background:var(--brick); color:#fff; font-family:var(--disp); font-weight:600; font-size:1.5rem;
  border:2px solid var(--ink); border-radius:60% 40% 55% 45%/50% 55% 45% 50%;
}
.steps h3{ font-family:var(--disp); font-weight:600; font-size:1.2rem; margin:0 0 .3rem; }
.steps p{ margin:0; color:var(--ink-2); }

/* ---------- Zone ---------- */
.zone-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,3.4rem); align-items:start; }
.zone-wrap p{ color:var(--ink-2); margin:0; }
.tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.7rem; }
.tags li{
  font-family:var(--disp); font-weight:600; background:var(--wood); color:#fff;
  border:2px solid var(--ink); border-radius:var(--wonk); padding:.4rem 1rem;
  transform:rotate(-1deg); box-shadow:3px 3px 0 var(--ink);
}
.tags li:nth-child(even){ transform:rotate(1.5deg); background:var(--forest); }

/* ---------- Contact ---------- */
.contact-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.light-p{ color:#eadfc7; }
.light-p a{ color:#fff; }
.big-phone{ margin:1.4rem 0; }
.big-phone a{ font-family:var(--disp); font-weight:600; font-size:clamp(1.8rem,4.5vw,2.6rem); color:#fff; text-decoration:none; border-bottom:3px solid var(--honey); }
.note-form{ background:var(--card); border:2px solid var(--ink); border-radius:var(--wonk); box-shadow:6px 6px 0 var(--forest-2); padding:1.7rem; }
.note-form label{ display:block; font-family:var(--disp); font-weight:600; color:var(--ink); margin-bottom:1rem; }
.note-form input,.note-form textarea{
  width:100%; margin-top:.3rem; padding:.7rem .8rem; font:inherit; font-size:1rem;
  border:2px solid var(--ink); border-radius:8px; background:var(--paper); color:var(--ink);
}
.note-form input:focus,.note-form textarea:focus{ outline:3px solid var(--honey); outline-offset:1px; }
.mini{ font-size:.9rem; color:var(--ink-2); margin:.9rem 0 0; }

/* ---------- Pied ---------- */
.foot{ background:var(--forest-2); color:#e8dcc4; padding:2.4rem 0; }
.foot-inner{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.foot-mark{ width:56px; height:56px; border-radius:50%; border:2px solid #e8dcc4; mix-blend-mode:normal; }
.foot-brand{ font-family:var(--disp); font-weight:600; margin:0; color:#fff; }
.foot-mini{ font-size:.85rem; color:#bfb495; margin:.2rem 0 0; max-width:62ch; }
.foot-top{ margin-left:auto; color:#e8dcc4; text-decoration:none; font-family:var(--disp); font-weight:600; }

.legal{ margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid rgba(232,220,196,.25); }
.legal summary{
  cursor:pointer; list-style:none; font-family:var(--disp); font-weight:600;
  font-size:.9rem; color:#e8dcc4; text-decoration:underline; text-underline-offset:.2em;
}
.legal summary::-webkit-details-marker{ display:none; }
.legal summary::before{ content:"+ "; text-decoration:none; }
.legal[open] summary::before{ content:"– "; }
.legal-body{ margin-top:1rem; max-width:62ch; font-size:.85rem; color:#bfb495; }
.legal-body h3{
  font-family:var(--disp); font-size:.95rem; color:#e8dcc4; margin:1.1rem 0 .3rem;
}
.legal-body h3:first-of-type{ margin-top:0; }
.legal-body p{ margin:0 0 .6rem; }
.legal-body a{ color:#e8dcc4; }
.legal-note{ font-style:italic; }

/* ---------- Révélation ---------- */
.js .reveal{ opacity:0; transform:translateY(20px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; } }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .hero-inner{ grid-template-columns:1fr; }
  .hero-badge{ order:-1; align-self:center; margin:0 auto; width:min(340px,100%); }
  .hero-badge-mark{ margin-top:0; }
  .hero-3d{ aspect-ratio:4/3; }
  .histoire-grid,.zone-wrap,.contact-wrap{ grid-template-columns:1fr; }
  .wall{ grid-template-columns:repeat(2,1fr); }
  .steps{ grid-template-columns:1fr; gap:2rem; }
  .zone-map{ max-width:460px; }
  .zone-map .map-frame{ height:300px; }
}
@media (max-width:720px){
  .burger{
    display:inline-block; font-family:var(--disp); font-weight:600; font-size:1rem;
    background:var(--card); border:2px solid var(--ink); border-radius:8px; padding:.4rem .9rem; cursor:pointer;
  }
  .nav{
    position:fixed; inset:74px 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:2px solid var(--ink); padding:.4rem 1.1rem 1.1rem; display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:.9rem 0; border-bottom:1px solid var(--line); }
  .nav .nav-phone{ margin-top:.8rem; text-align:center; }
  .dish,.dish:nth-child(even){ grid-template-columns:1fr; }
  .dish:nth-child(even) .dish-ico{ order:0; }
  .dish:nth-child(even) .dish-txt{ text-align:left; }
  .dish-ico{ max-width:300px; }
}
@media (max-width:520px){
  .wall{ grid-template-columns:1fr; max-width:320px; margin-inline:auto; }
}

/* ============================================================
   Hero — diaporama logo <-> modèles 3D  (repris de la v4)
   ============================================================ */
.hero-stage{ position:relative; width:min(340px,100%); aspect-ratio:1/1; margin-inline:auto; }
.hero-stage .hero-logo{
  position:absolute; inset:0; margin:auto; width:100%; height:100%;
  object-fit:contain; border:0; border-radius:0; background:none; mix-blend-mode:normal;
}
.hero-stage .hero-3d{
  position:absolute; inset:0; width:100%; height:100%; padding:0;
  aspect-ratio:auto; cursor:grab; touch-action:none;
}
.hero-stage .hero-3d:active{ cursor:grabbing; }
.hero-stage .hero-3d canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* on montre le logo OU le modèle, jamais les deux */
.hero-stage:not(.is-logo) .hero-logo{ display:none; }
.hero-stage.is-logo .hero-3d{ visibility:hidden; }
.hero-3d-arrow{
  appearance:none; cursor:pointer; position:absolute; top:50%; transform:translateY(-50%);
  z-index:4; background:none; border:0; padding:.1rem .4rem;
  font-family:var(--disp); font-size:2.4rem; line-height:1; color:var(--ink);
  opacity:.65; transition:opacity .2s, color .15s;
}
.hero-3d-arrow[data-dir="prev"]{ left:-.7rem; }
.hero-3d-arrow[data-dir="next"]{ right:-.7rem; }
.hero-3d-arrow:hover{ opacity:1; color:var(--wood-2); }
@media (prefers-reduced-motion:reduce){ .hero-3d-arrow{ transition:none; } }

/* ============================================================
   Carte de la zone d'intervention  (reprise de la v4)
   ============================================================ */
.zone-map{
  margin:0; border:2px solid var(--ink); border-radius:8px;
  box-shadow:6px 6px 0 var(--forest-2); background:var(--card); overflow:hidden;
}
/* le cadre rogne la barre d'attribution native de l'iframe OSM ;
   l'attribution « © OpenStreetMap » requise est reportée dans la légende */
.zone-map .map-frame{ position:relative; height:380px; overflow:hidden; }
.zone-map iframe{ position:absolute; left:-2px; top:0; width:calc(100% + 4px); height:calc(100% + 58px); border:0; }
.zone-map figcaption{
  font-family:var(--body); font-size:.85rem; color:var(--ink-2);
  padding:.7rem .9rem; border-top:2px solid var(--ink);
}
.zone-map figcaption a{ color:var(--wood-2); }

/* ---------- Formulaire : anti-spam + accusé d'envoi ---------- */
.form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-status{ margin:.9rem 0 0; font-family:var(--disp); font-weight:600; font-size:1rem; }
.form-status.is-ok{ color:var(--forest); }
.form-status.is-err{ color:var(--brick); }
.form-status.is-err a{ color:var(--brick); }

/* ============================================================
   Points indicateurs sous le carrousel du hero
   ============================================================ */
.hero-dots{
  display:flex; justify-content:center; gap:.55rem; margin:.2rem 0 0; padding:0;
  list-style:none;
}
.hero-dots button{
  appearance:none; cursor:pointer; width:11px; height:11px; padding:0;
  border:2px solid var(--ink); border-radius:50%; background:var(--card);
  transition:background .18s, transform .18s;
}
.hero-dots button[aria-current="true"]{ background:var(--wood); transform:scale(1.15); }
@media (prefers-reduced-motion:reduce){ .hero-dots button{ transition:none; } }

/* ============================================================
   Barre d'action fixe (mobile) — Appeler / Écrire
   ============================================================ */
.action-bar{ display:none; }
@media (max-width:720px){
  .action-bar{
    position:fixed; left:0; right:0; bottom:0; z-index:90;
    display:flex; gap:.5rem; padding:.5rem .6rem calc(.5rem + env(safe-area-inset-bottom));
    background:var(--paper); border-top:2px solid var(--ink);
    box-shadow:0 -3px 12px rgba(59,42,25,.14);
  }
  .action-bar a{
    flex:1; text-align:center; text-decoration:none; font-family:var(--disp); font-weight:600;
    font-size:1rem; padding:.7rem .5rem; border:2px solid var(--ink); border-radius:10px;
  }
  .action-bar .ab-call{ background:var(--forest); color:#fff; }
  .action-bar .ab-write{ background:var(--card); color:var(--ink); }
  body{ padding-bottom:4.2rem; }
  .foot{ padding-bottom:5.4rem; }
}