/* =====================================================================
   ATLAS TEARDROP — Site one-page
   Direction : artisanal · aventure · terres du Maroc
   ===================================================================== */

:root{
  --sand:#f4ece0; --sand-deep:#e7dac6; --paper:#fbf7f0;
  --clay:#c25e3a; --clay-dark:#9c4527; --ochre:#d9a441;
  --pine:#2f4338; --pine-soft:#4a6354;
  --ink:#2a241d; --ink-soft:#6b6155; --line:#d8cab2;
  --ff-display:'Fraunces',Georgia,serif;
  --ff-body:'Archivo',system-ui,sans-serif;
  --maxw:1180px; --r:14px;
  --shadow:0 18px 48px -22px rgba(42,36,29,.45);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:80px; }
body{
  font-family:var(--ff-body); color:var(--ink); background:var(--paper);
  line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--ff-display); font-weight:500; line-height:1.12; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:var(--ff-body); font-weight:600; font-size:.74rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--clay);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:""; width:30px; height:1.5px; background:var(--clay); display:inline-block; }
.eyebrow.light{ color:var(--ochre); }
.eyebrow.light::before{ background:var(--ochre); }

/* ---------- BOUTONS ------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--ff-body); font-weight:600; font-size:.95rem;
  padding:.92em 1.7em; border-radius:100px; cursor:pointer;
  border:1.5px solid transparent;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn-primary{ background:var(--clay); color:#fff; box-shadow:0 10px 26px -12px var(--clay-dark); }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -12px var(--clay-dark); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--sand); transform:translateY(-2px); }
.btn-light{ border-color:var(--sand); color:var(--sand); }
.btn-light:hover{ background:var(--sand); color:var(--ink); }
.btn-whatsapp{ background:#25d366; color:#fff; box-shadow:0 10px 26px -12px #1a9f4b; }
.btn-whatsapp:hover{ transform:translateY(-2px); box-shadow:0 16px 32px -12px #1a9f4b; }

/* Rangée des deux boutons du formulaire */
.form-actions{ display:flex; gap:14px; margin-top:4px; }
.form-actions .btn{ flex:1; justify-content:center; white-space:nowrap; padding-left:1em; padding-right:1em; }
@media(max-width:480px){ .form-actions{ flex-direction:column; } }

/* ---------- HEADER ------------------------------------------------- */
.site-header{
  position:sticky; top:0; z-index:60;
  height:82px;
  overflow:hidden; /* garantit qu'aucun contenu (logo) ne dépasse */
  background:rgba(255,255,255,.78);
  border-bottom:1px solid rgba(42,36,29,.08);
  box-shadow:0 1px 0 rgba(0,0,0,.02), 0 4px 18px -16px rgba(0,0,0,.18);
}
/* Glassmorphism déporté sur ::before — sinon backdrop-filter sur .site-header
   crée un containing block qui transforme position:fixed des descendants
   (.site-nav mobile) en position:absolute, et overflow:hidden les coupe.
   Ici le pseudo isole le filter sans contraindre le menu drawer. */
.site-header::before{
  content:"";
  position:absolute; inset:0;
  z-index:-1;
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
/* Fallback : si le navigateur ne supporte pas backdrop-filter, fond plus opaque */
@supports not (backdrop-filter: blur(1px)){
  .site-header{ background:rgba(255,255,255,.96); }
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; height:100%; }
.logo{ display:flex; align-items:center; color:var(--ink); height:100%; }
.logo .logo-image{ height:58px !important; width:auto; max-width:220px; display:block; object-fit:contain; }
/* Anciennes classes conservées pour compatibilité (SVG / texte séparé) */
.logo svg.logo-mark{ color:var(--clay); width:64px; height:42px; }
.logo img.logo-mark{ height:48px; width:auto; max-width:120px; display:block; }
.logo-text{ font-family:var(--ff-display); font-weight:600; font-size:1.45rem; letter-spacing:-.01em; color:var(--ink); margin-left:.6em; }
.site-nav{ display:flex; align-items:center; gap:1.8rem; }
.site-nav a{ font-weight:500; font-size:.95rem; color:var(--ink-soft); padding:.3em 0; transition:color .15s; }
.site-nav a:hover{ color:var(--ink); }
.nav-cta{
  background:var(--clay); color:#fff !important;
  padding:9px 18px !important; border-radius:999px;
  font-family:var(--ff-body); font-weight:600; font-size:.88rem;
  line-height:1.2;
  letter-spacing:.005em;
  box-shadow:0 6px 18px -8px var(--clay-dark);
  display:inline-flex !important; align-items:center; gap:8px;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
  white-space:nowrap !important;
  text-decoration:none;
  border:none;
  height:auto;
  flex-shrink:0;
}
.nav-cta::after{
  content:"→"; font-size:1em; line-height:1;
  display:inline-block;
  transition:transform .2s ease;
}
.nav-cta:hover{
  background:var(--clay-dark); color:#fff !important;
  transform:translateY(-1px);
  box-shadow:0 12px 24px -10px var(--clay-dark);
}
.nav-cta:hover::after{ transform:translateX(3px); }
.nav-toggle,.nav-burger{ display:none; }

/* ---------- HERO --------------------------------------------------- */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(ellipse 70% 60% at 80% 0%, rgba(217,164,65,.28), transparent 70%),
    linear-gradient(170deg, var(--sand) 0%, var(--sand-deep) 100%);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(42,36,29,.05) 1px, transparent 1px);
  background-size:22px 22px; mix-blend-mode:multiply;
}
.hero-inner{
  display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center;
  padding:84px 0 96px; position:relative; z-index:2;
}
.hero h1{ font-size:clamp(2.6rem,5.4vw,4.4rem); letter-spacing:-.02em; margin:.32em 0 .42em; }
.hero h1 em{ font-style:italic; color:var(--clay); }
.hero p.lead{ font-size:1.14rem; color:var(--ink-soft); max-width:34ch; margin-bottom:1.9em; }
.hero-cta{ display:flex; gap:14px; flex-wrap:wrap; }
.hero-meta{ display:flex; gap:34px; margin-top:2.6em; }
.hero-meta div{ display:flex; flex-direction:column; }
.hero-meta b{ font-family:var(--ff-display); font-size:1.7rem; color:var(--pine); }
.hero-meta span{ font-size:.82rem; color:var(--ink-soft); letter-spacing:.04em; }
.hero-visual{
  position:relative; aspect-ratio:3/2; border-radius:var(--r);
  background:var(--sand-deep);
  box-shadow:var(--shadow); overflow:hidden;
}
.hero-visual > img{
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
/* Variante : hero brand (affiche le logo Atlas Teardrop en grand sur fond clair) */
.hero-visual.hero-brand{
  background:#fff;
  border:1px solid var(--line);
  aspect-ratio:3/2;
  display:flex; align-items:center; justify-content:center;
  padding:18px;
}
.hero-visual.hero-brand img{
  width:100%; height:100%;
  object-fit:contain;
}
.hero-visual .sun{
  position:absolute; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, var(--ochre), #e8b85a);
  top:14%; right:14%; box-shadow:0 0 80px 20px rgba(217,164,65,.4);
}
.hero-visual .dunes{ position:absolute; left:0; right:0; bottom:0; height:55%; }
.hero-visual svg.td{ position:absolute; bottom:18%; left:50%; transform:translateX(-50%); width:54%; }
.img-tag{
  position:absolute; bottom:14px; left:14px; right:14px;
  background:rgba(251,247,240,.92); color:var(--ink-soft);
  font-size:.78rem; padding:.5em .9em; border-radius:8px; text-align:center;
}

/* ---------- SECTIONS GÉNÉRIQUES ----------------------------------- */
.section{ padding:96px 0; }
.section-head{ max-width:600px; margin-bottom:54px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }
.section-head h2{ font-size:clamp(2rem,3.6vw,2.9rem); letter-spacing:-.02em; margin:.3em 0 .45em; }
.section-head p{ color:var(--ink-soft); font-size:1.05rem; }
.bg-pine{ background:var(--pine); color:var(--sand); }
.bg-pine .section-head h2{ color:var(--paper); }
.bg-pine .section-head p{ color:rgba(244,236,224,.78); }
.bg-sand{ background:var(--sand); }

/* ---------- ÉTAPES ------------------------------------------------- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.step .num{ font-family:var(--ff-display); font-size:2.4rem; color:var(--clay); display:block; margin-bottom:.2em; }
.step h3{ font-size:1.18rem; margin-bottom:.4em; }
.step p{ font-size:.95rem; color:var(--ink-soft); }
.bg-pine .step p{ color:rgba(244,236,224,.72); }
.bg-pine .step h3{ color:var(--paper); }

/* ---------- CARTES MODÈLES ---------------------------------------- */
.models-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.model-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .2s ease, box-shadow .2s ease;
}
.model-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow); }
.model-photo{
  aspect-ratio:4/3; position:relative;
  background:linear-gradient(150deg, var(--sand-deep), var(--sand));
  display:flex; align-items:center; justify-content:center;
}
.model-photo img{ width:100%; height:100%; object-fit:cover; }
.model-photo .ph{ display:flex; flex-direction:column; align-items:center; gap:.5em; color:var(--ink-soft); font-size:.82rem; text-align:center; padding:1em; }
.model-photo .ph svg{ width:54px; height:36px; color:var(--line); }
.model-body{ padding:26px 24px 28px; display:flex; flex-direction:column; flex:1; }
.model-body .subtitle{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--clay); font-weight:600; }
.model-body h3{ font-size:1.5rem; margin:.25em 0 .5em; }
.model-tags{ display:flex; gap:10px; margin-bottom:1em; flex-wrap:wrap; }
.tag{ font-size:.76rem; font-weight:600; background:var(--sand-deep); padding:.32em .8em; border-radius:100px; color:var(--ink-soft); }
.model-body p.desc{ font-size:.94rem; color:var(--ink-soft); margin-bottom:1.1em; }
.model-specs{ list-style:none; margin:0 0 1.3em; display:flex; flex-direction:column; gap:.45em; }
.model-specs li{ font-size:.88rem; padding-left:1.4em; position:relative; }
.model-specs li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:7px; background:var(--ochre); border-radius:50%; }
.model-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; padding-top:1.1em; border-top:1px solid var(--line); }
.model-foot .price{ font-family:var(--ff-display); font-weight:600; color:var(--pine); font-size:1.05rem; }

/* ---------- SPLIT (atelier) --------------------------------------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.split.rev .split-text{ order:2; }
.split-text h2{ font-size:clamp(1.9rem,3.4vw,2.7rem); margin:.3em 0 .5em; }
.split-text p{ color:var(--ink-soft); margin-bottom:1em; }
.bg-pine .split-text p{ color:rgba(244,236,224,.78); }
.feature-list{ list-style:none; display:flex; flex-direction:column; gap:.9em; margin:1.4em 0; }
.feature-list li{ display:flex; gap:.7em; align-items:flex-start; font-size:.97rem; }
.feature-list svg{ flex-shrink:0; width:22px; height:22px; color:var(--clay); margin-top:2px; }
.media-frame{
  aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; position:relative;
  background:linear-gradient(150deg, var(--sand-deep), var(--sand));
  box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center;
}
.media-frame img{ width:100%; height:100%; object-fit:cover; }
.media-ph{ display:flex; flex-direction:column; align-items:center; gap:.6em; color:var(--ink-soft); font-size:.85rem; text-align:center; padding:1.5em; }
.media-ph svg{ width:54px; height:54px; color:var(--line); }

/* Galerie atelier */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px; }
.gallery .media-frame{ aspect-ratio:1; }
.gallery .media-frame.wide{ grid-column:span 2; aspect-ratio:2/1; }

/* ---------- EXPORT ------------------------------------------------- */
.export-grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; }
.export-card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:36px 32px; position:relative; overflow:hidden;
}
.export-card.featured{ border-color:var(--clay); border-width:1.5px; }
.export-card .badge{
  position:absolute; top:20px; right:-34px; transform:rotate(45deg);
  background:var(--clay); color:#fff; font-size:.72rem; font-weight:700;
  letter-spacing:.08em; padding:.4em 3em;
}
.export-card h3{ font-size:1.5rem; margin-bottom:.3em; }
.export-card .ex-sub{ color:var(--clay); font-weight:600; font-size:.9rem; margin-bottom:1em; }
.export-card p{ color:var(--ink-soft); font-size:.95rem; margin-bottom:1em; }
.check-list{ list-style:none; display:flex; flex-direction:column; gap:.6em; }
.check-list li{ display:flex; gap:.6em; font-size:.93rem; align-items:flex-start; }
.check-list svg{ width:20px; height:20px; color:var(--pine); flex-shrink:0; margin-top:1px; }
.export-note{ text-align:center; margin-top:24px; max-width:62ch; margin-left:auto; margin-right:auto; font-size:.82rem; color:var(--ink-soft); }

/* ---------- CITATION ----------------------------------------------- */
.quote-band{
  background:radial-gradient(ellipse 60% 80% at 15% 50%, rgba(194,94,58,.25), transparent), var(--ink);
  color:var(--sand); text-align:center; padding:90px 0;
}
.quote-band blockquote{
  font-family:var(--ff-display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,3vw,2.3rem); max-width:20ch; margin:0 auto; line-height:1.3;
}
.quote-band cite{ display:block; margin-top:1.4em; font-style:normal; font-size:.85rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ochre); }

/* ---------- CONTACT ------------------------------------------------ */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:54px; align-items:start; }
.form-card{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:38px 36px; box-shadow:var(--shadow); }
.field{ margin-bottom:20px; }
.field label{ display:block; font-weight:600; font-size:.88rem; margin-bottom:.45em; }
.field input,.field select,.field textarea{
  width:100%; font-family:var(--ff-body); font-size:.96rem;
  padding:.85em 1em; border:1.5px solid var(--line); border-radius:10px;
  background:var(--paper); color:var(--ink); transition:border-color .15s;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--clay); }
.field textarea{ resize:vertical; min-height:120px; }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-note{ font-size:.82rem; color:var(--ink-soft); margin-top:.4em; }
.form-status{ padding:1em 1.2em; border-radius:10px; margin-bottom:22px; font-size:.93rem; display:none; }
.form-status.show{ display:block; }
.form-status.ok{ background:#e6efe7; color:var(--pine); border:1px solid #b9d3bd; }
.form-status.err{ background:#f6e3da; color:var(--clay-dark); border:1px solid #e3b9a4; }
.contact-aside h3{ font-size:1.4rem; margin-bottom:.6em; }
.contact-aside p{ color:var(--ink-soft); margin-bottom:1.4em; }
.contact-line{ display:flex; gap:.8em; align-items:flex-start; margin-bottom:1.1em; }
.contact-line svg{ width:22px; height:22px; color:var(--clay); flex-shrink:0; margin-top:2px; }
.contact-line b{ display:block; font-family:var(--ff-body); }
.contact-line a,.contact-line span{ color:var(--ink-soft); font-size:.94rem; }

/* ---------- FOOTER ------------------------------------------------- */
.site-footer{
  background:#ffffff;
  color:var(--ink);
  padding:64px 0 28px;
  border-top:1px solid rgba(42,36,29,.10);
  box-shadow:inset 0 8px 16px -8px rgba(42,36,29,.05);
}
.footer-grid{
  display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px;
  padding-bottom:42px; border-bottom:1px solid rgba(42,36,29,.12);
}
.footer-brand .logo{ color:var(--ink); margin-bottom:1em; height:auto; max-height:none; }
.footer-brand .logo .logo-image{ height:64px !important; max-width:200px; max-height:none; }
.footer-brand .logo-mark{ color:var(--clay); }
.footer-baseline{ color:rgba(42,36,29,.65); font-size:.95rem; max-width:30ch; }
.footer-col h4{ font-family:var(--ff-body); font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--clay); margin-bottom:1em; }
.footer-col a,.footer-col span{ display:block; color:rgba(42,36,29,.72); font-size:.92rem; margin-bottom:.55em; transition:color .15s; }
.footer-col a:hover{ color:var(--ink); }

/* Footer : rangée d'icônes sociales (TikTok / YouTube / Instagram) */
.footer-socials{
  display:flex; gap:12px; align-items:center;
  margin-top:4px;
}
.footer-socials a{
  display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  margin-bottom:0;
  border-radius:50%;
  color:var(--ink);
  background:rgba(42,36,29,.05);
  border:1px solid rgba(42,36,29,.12);
  transition:all .2s ease;
}
.footer-socials a:hover{
  background:var(--clay);
  border-color:var(--clay);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 18px -10px var(--clay-dark);
}
.footer-socials svg{
  width:18px; height:18px;
  fill:currentColor;
  display:block;
}
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:24px; font-size:.84rem; color:rgba(42,36,29,.55); }
.to-top:hover{ color:var(--clay); }

/* ---------- WHATSAPP FLOTTANT ------------------------------------- */
.wa-float{
  position:fixed; bottom:24px; right:24px; z-index:70;
  width:56px; height:56px; border-radius:50%;
  background:#25d366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 28px -8px rgba(0,0,0,.4); transition:transform .2s;
}
.wa-float:hover{ transform:scale(1.08); }
.wa-float svg{ width:30px; height:30px; }

/* ---------- ANIMATIONS RÉVÉLATION --------------------------------- */
.js-on .reveal{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.js-on .reveal.in{ opacity:1; transform:none; }
@media(prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js-on .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------- RESPONSIVE -------------------------------------------- */
@media(max-width:920px){
  .hero-inner,.split,.contact-grid,.export-grid{ grid-template-columns:1fr; }
  .split.rev .split-text{ order:0; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .models-grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .hero-inner{ padding:54px 0 64px; }
  .section{ padding:68px 0; }
  .nav-burger{
    display:flex; flex-direction:column; gap:5px; cursor:pointer;
    width:30px; height:30px; justify-content:center; z-index:65;
  }
  .nav-burger span{ display:block; height:2.5px; background:var(--ink); border-radius:2px; transition:.25s; }
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(80vw,320px);
    background:var(--paper); flex-direction:column; align-items:flex-start;
    padding:96px 32px; gap:1.4rem; transform:translateX(100%);
    transition:transform .3s ease; box-shadow:var(--shadow);
  }
  .nav-toggle:checked ~ .site-nav{ transform:translateX(0); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
}
@media(max-width:560px){
  .models-grid,.gallery,.steps,.footer-grid,.field-row{ grid-template-columns:1fr; }
  .gallery .media-frame.wide{ grid-column:span 1; aspect-ratio:1; }
  .hero-meta{ gap:22px; }
  .footer-bottom{ flex-direction:column; gap:10px; }
}

/* =====================================================================
   AJOUTS — fiche Le Souss, bande sur-mesure, focus modèle
   ===================================================================== */

/* --- Tagline & WhatsApp sur la card modèle ------------------------- */
.model-card .tagline{
  font-family:var(--ff-display);
  font-size:1.02rem; font-style:italic;
  color:var(--pine);
  margin:.2em 0 1em;
  line-height:1.4;
}
.model-card .model-wa{
  margin-top:28px;
  position:relative;
  justify-content:center;
  padding:1em 1.1em;
  font-size:.9rem;
}
.model-card .model-wa::before{
  content:"";
  position:absolute;
  top:-14px; left:15%; right:15%;
  height:1px;
  background:var(--line);
}
/* Un peu plus d'air aussi au-dessus du model-foot (la ligne Sur devis / Voir détails) */
.model-card .model-foot{ padding-top:1.4em !important; margin-top:.4em; margin-bottom:1.6em; }

/* --- Bande "Projet sur-mesure" ------------------------------------- */
.custom-band{
  margin-top:56px;
  background:var(--pine);
  color:var(--sand);
  border-radius:var(--r);
  padding:44px 44px;
  display:flex; align-items:center; justify-content:space-between;
  gap:40px; flex-wrap:wrap;
}
.custom-band .custom-text{ flex:1; min-width:280px; }
.custom-band .eyebrow{ color:var(--ochre); }
.custom-band .eyebrow::before{ background:var(--ochre); }
.custom-band h3{
  font-family:var(--ff-display); font-weight:500;
  font-size:1.6rem; line-height:1.2;
  margin:.4em 0 .7em;
}
.custom-band p{
  color:rgba(244,236,224,.85);
  max-width:560px;
  margin-bottom:0;
}
.custom-band .btn-whatsapp{ flex-shrink:0; white-space:nowrap; margin-top:8px; padding:1em 1.6em; }

/* --- Section Focus modèle (Le Souss en détail) --------------------- */
.bg-sand{ background:var(--sand); }

#focus-souss .section-head{ text-align:center; margin-bottom:48px; }
#focus-souss .section-head h2{ font-size:clamp(1.8rem, 3.4vw, 2.6rem); }
#focus-souss .section-head p{ color:var(--clay); font-weight:600; letter-spacing:.05em; }

.focus-grid{
  display:grid;
  grid-template-columns:1.05fr 1fr;
  gap:48px;
  align-items:start;
}

/* Galerie : 1 grande + 4 thumbs en 2×2 */
.focus-gallery{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  grid-template-rows:auto auto;
  gap:14px;
}
.focus-gallery .gallery-main{
  grid-column:1 / -1;
  display:block;
  border-radius:var(--r);
  overflow:hidden;
  aspect-ratio:16/10;
  background:var(--sand-deep);
  transition:transform .3s ease;
}
.focus-gallery .gallery-main:hover{ transform:translateY(-3px); }
.focus-gallery .gallery-main img{
  width:100%; height:100%; object-fit:cover;
}
.focus-gallery .gallery-thumbs{
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:12px;
}
.focus-gallery .gallery-thumbs a{
  display:block;
  border-radius:10px;
  overflow:hidden;
  aspect-ratio:1;
  background:var(--sand-deep);
  transition:transform .25s ease, opacity .25s ease;
  opacity:.85;
}
.focus-gallery .gallery-thumbs a:hover{
  transform:translateY(-2px); opacity:1;
}
.focus-gallery .gallery-thumbs img{
  width:100%; height:100%; object-fit:cover;
}

/* Contenu textuel à droite */
.focus-content .tagline-big{
  font-family:var(--ff-display); font-style:italic;
  font-size:1.4rem; line-height:1.35;
  color:var(--pine);
  margin-bottom:1em;
}
.focus-content p{ margin-bottom:1em; }
.focus-h3{
  font-family:var(--ff-display);
  font-size:1.2rem; font-weight:600;
  color:var(--pine);
  margin:1.4em 0 .6em;
}
.focus-specs{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:8px 24px;
  margin-bottom:.5em;
}
.focus-specs li{
  font-size:.95rem;
  padding-left:1.4em; position:relative;
}
.focus-specs li::before{
  content:""; position:absolute; left:0; top:.55em;
  width:7px; height:7px;
  background:var(--ochre); border-radius:50%;
}
.focus-specs li b{
  font-family:var(--ff-body); font-weight:600;
  color:var(--pine);
  margin-right:.3em;
}
.focus-foot{
  margin-top:28px;
  padding-top:22px;
  border-top:1px solid var(--line);
  display:flex; align-items:center; gap:22px; flex-wrap:wrap;
}
.price-big{
  font-family:var(--ff-display); font-weight:600;
  font-size:1.5rem;
  color:var(--pine);
}

/* --- Responsive ----------------------------------------------------- */
@media(max-width:900px){
  .focus-grid{ grid-template-columns:1fr; gap:36px; }
  .focus-specs{ grid-template-columns:1fr; }
}
@media(max-width:560px){
  .custom-band{ padding:28px; flex-direction:column; align-items:flex-start; }
  .custom-band .btn-whatsapp{ width:100%; justify-content:center; }
  .focus-gallery .gallery-thumbs{ grid-template-columns:repeat(2, 1fr); }
  .focus-foot{ flex-direction:column; align-items:stretch; gap:14px; }
  .focus-foot .btn-whatsapp{ justify-content:center; }
}

/* =====================================================================
   MODAL — pop-up générique pour les fiches modèles détaillées
   ===================================================================== */
.modal{
  position:fixed; inset:0; z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .25s ease;
}
.modal.is-open{ opacity:1; pointer-events:auto; }

.modal-overlay{
  position:absolute; inset:0;
  background:rgba(42,36,29,.74);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  cursor:pointer;
}

.modal-dialog{
  position:relative;
  max-width:1100px; width:100%;
  max-height:calc(100vh - 48px);
  background:var(--paper);
  border-radius:var(--r);
  box-shadow:0 30px 80px -20px rgba(0,0,0,.55);
  overflow-y:auto;
  overflow-x:hidden;
  transform:translateY(20px) scale(.98);
  transition:transform .35s cubic-bezier(.2,.85,.25,1);
}
.modal.is-open .modal-dialog{ transform:translateY(0) scale(1); }

.modal-close{
  position:sticky; top:14px; right:14px;
  float:right;
  width:44px; height:44px;
  border:none; background:rgba(255,255,255,.95);
  border-radius:50%;
  font-size:1.7rem; font-weight:300; line-height:1;
  color:var(--ink); cursor:pointer;
  z-index:10;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  transition:background .2s ease, transform .25s ease, color .2s ease;
  display:flex; align-items:center; justify-content:center;
  margin:14px 14px 0 0;
}
.modal-close:hover{
  background:var(--ink); color:var(--sand);
  transform:rotate(90deg);
}

.modal-body{ padding:8px 44px 44px; clear:both; }
.modal-header{ text-align:center; margin-bottom:36px; }
.modal-header .eyebrow{ justify-content:center; }
.modal-header h2{ font-size:clamp(1.8rem, 3.4vw, 2.4rem); margin:.4em 0 .2em; }
.modal-header p{ color:var(--clay); font-weight:600; letter-spacing:.04em; }

/* Bloque le scroll du body quand une modal est ouverte (géré aussi en JS) */
body:has(.modal.is-open){ overflow:hidden; }

@media(max-width:720px){
  .modal{ padding:0; }
  .modal-dialog{ max-height:100vh; border-radius:0; }
  .modal-body{ padding:8px 20px 32px; }
  .modal-close{ margin:10px 10px 0 0; }
}

/* =====================================================================
   PAGES MODÈLES DÉDIÉES (/modeles/<slug>/)
   ===================================================================== */

.model-page-hero{
  position:relative;
  padding:90px 0 60px;
  background:var(--sand);
  border-bottom:1px solid var(--line);
}
.model-page-hero .breadcrumb{
  font-size:.82rem;
  color:var(--ink-soft);
  margin-bottom:24px;
  text-transform:uppercase; letter-spacing:.08em;
}
.model-page-hero .breadcrumb a{ color:var(--clay); font-weight:500; }
.model-page-hero .breadcrumb a:hover{ text-decoration:underline; }
.model-page-hero .breadcrumb .sep{ margin:0 .5em; opacity:.5; }

.model-page-hero .eyebrow{ margin-bottom:10px; }
.model-page-hero h1{
  font-size:clamp(2.2rem, 5vw, 3.6rem);
  letter-spacing:-.015em;
  margin:.2em 0 .3em;
  max-width:920px;
}
.model-page-hero .tagline-big{
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(1.15rem, 2vw, 1.4rem);
  color:var(--pine);
  max-width:780px;
  margin-bottom:24px;
}
.model-page-hero .price-tag{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--ff-display); font-weight:600;
  font-size:1.15rem; color:var(--pine);
  padding:.55em 1.2em; background:#fff;
  border:1px solid var(--line); border-radius:100px;
}

.model-page-content{
  padding:60px 0;
}
.model-page-content .focus-grid{
  grid-template-columns:1.1fr 1fr;
}

.model-context{
  background:var(--pine); color:var(--sand);
  padding:80px 0;
}
.model-context .eyebrow{ color:var(--ochre); }
.model-context .eyebrow::before{ background:var(--ochre); }
.model-context h2{
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  color:var(--paper);
  margin:.4em 0 .8em;
  max-width:780px;
}
.model-context p{
  color:rgba(244,236,224,.85);
  max-width:780px;
  margin-bottom:1em;
  font-size:1.05rem;
}

.faq-section{
  background:var(--sand); padding:80px 0;
}
.faq-section h2{
  font-size:clamp(1.7rem, 3vw, 2.4rem);
  margin-bottom:36px; text-align:center;
}
.faq-list{ max-width:780px; margin:0 auto; }
.faq-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  margin-bottom:14px;
  overflow:hidden;
}
.faq-item summary{
  padding:18px 24px;
  font-family:var(--ff-display);
  font-size:1.1rem; font-weight:500;
  color:var(--pine);
  cursor:pointer;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  transition:background .2s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:"+"; font-size:1.5rem; line-height:1;
  color:var(--clay);
  transition:transform .25s ease;
}
.faq-item[open] summary::after{ transform:rotate(45deg); }
.faq-item summary:hover{ background:var(--paper); }
.faq-item p{
  padding:0 24px 22px;
  color:var(--ink-soft);
  line-height:1.7;
}

.related-models{
  padding:80px 0;
  background:var(--paper);
  border-top:1px solid var(--line);
}
.related-models h2{
  text-align:center;
  font-size:clamp(1.6rem, 2.8vw, 2.2rem);
  margin-bottom:36px;
}
.related-models .related-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:24px;
  max-width:880px; margin:0 auto;
}
.related-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  display:block;
  transition:transform .25s ease, box-shadow .25s ease;
}
.related-card:hover{
  transform:translateY(-4px); box-shadow:var(--shadow);
}
.related-card img{
  width:100%; aspect-ratio:16/10; object-fit:cover;
}
.related-card .related-body{
  padding:18px 22px 22px;
}
.related-card .related-sub{
  font-size:.75rem;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--clay); font-weight:600;
}
.related-card h3{
  font-size:1.4rem; margin:.2em 0 .3em;
}
.related-card p{
  font-size:.92rem; color:var(--ink-soft);
}
.related-card .related-link{
  display:inline-block; margin-top:10px;
  color:var(--clay); font-weight:600;
}
.related-card .related-link::after{
  content:" →"; transition:transform .2s ease;
  display:inline-block;
}
.related-card:hover .related-link::after{ transform:translateX(4px); }

@media(max-width:720px){
  .model-page-content .focus-grid{ grid-template-columns:1fr; }
  .related-models .related-grid{ grid-template-columns:1fr; }
}

/* =====================================================================
   BADGES DE GAMME (Essentiel / Polyvalent / Signature)
   ===================================================================== */
.tier-badge{
  display:inline-flex; align-items:center;
  font-family:var(--ff-body);
  font-weight:700; font-size:.72rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.42em 1em;
  border-radius:100px;
  margin-bottom:10px;
  line-height:1.4;
  white-space:nowrap;
}
.tier-badge.tier-essentiel{
  background:var(--sand-deep); color:var(--ink);
}
.tier-badge.tier-polyvalent{
  background:var(--clay); color:#fff;
  box-shadow:0 4px 12px -6px var(--clay-dark);
}
.tier-badge.tier-signature{
  background:var(--pine); color:var(--ochre);
  box-shadow:0 4px 12px -6px rgba(0,0,0,.3);
}

/* Variante pour le hero des pages modèles (badge plus grand) */
.model-page-hero .tier-badge{
  font-size:.78rem;
  padding:.5em 1.2em;
  margin-bottom:16px;
}

/* =====================================================================
   PAGES PRODUITS — refonte v2 (hero image + galerie + specs + CTA final)
   ===================================================================== */

/* ---------- HERO PRODUIT (image + texte) -------------------------- */
.product-hero{
  padding:60px 0 80px;
  background:linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
.product-hero .wrap{ position:relative; }
.product-hero .breadcrumb{
  font-size:.82rem;
  color:var(--ink-soft);
  margin-bottom:28px;
  text-transform:uppercase; letter-spacing:.08em;
}
.product-hero .breadcrumb a{ color:var(--clay); font-weight:500; }
.product-hero .breadcrumb a:hover{ text-decoration:underline; }
.product-hero .breadcrumb .sep{ margin:0 .5em; opacity:.5; }

.product-hero-grid{
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:56px;
  align-items:center;
}
.product-hero-text .tier-badge{ margin-bottom:18px; }
.product-hero-text .eyebrow{ margin-bottom:14px; }
.product-hero-text h1{
  font-size:clamp(2.2rem, 4.6vw, 3.6rem);
  line-height:1.08; letter-spacing:-.015em;
  margin:.1em 0 .35em;
  max-width:560px;
}
.product-hero-text .tagline-big{
  font-family:var(--ff-display); font-style:italic;
  font-size:clamp(1.1rem, 1.8vw, 1.35rem);
  color:var(--pine);
  max-width:480px;
  margin-bottom:32px;
  line-height:1.4;
}
.product-hero-cta{
  display:flex; align-items:center; gap:24px;
  flex-wrap:wrap;
}
.product-hero-cta .price-tag{
  display:inline-flex; align-items:center;
  font-family:var(--ff-display); font-weight:600;
  font-size:1.15rem; color:var(--pine);
  padding:.55em 1.2em; background:#fff;
  border:1px solid var(--line); border-radius:100px;
}
.product-hero-image{
  border-radius:var(--r);
  overflow:hidden;
  aspect-ratio:5/4;
  box-shadow:var(--shadow);
  background:var(--sand-deep);
}
.product-hero-image img{
  width:100%; height:100%; object-fit:cover;
}

/* ---------- SECTION TITRE (réutilisable) -------------------------- */
.product-section{ padding:80px 0; }
.product-section .section-title{
  font-size:clamp(1.6rem, 2.6vw, 2.1rem);
  margin-bottom:36px;
  text-align:center;
  letter-spacing:-.01em;
}
.product-section .section-title-eyebrow{
  display:block; text-align:center;
  margin-bottom:10px;
}

/* ---------- GALERIE D'IMAGES -------------------------------------- */
.product-gallery{ background:var(--paper); }
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
  max-width:1100px; margin:0 auto;
}
.gallery-grid .gallery-item{
  display:block;
  aspect-ratio:1;
  border-radius:var(--r);
  overflow:hidden;
  background:var(--sand-deep);
  position:relative;
}
.gallery-grid .gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .4s ease;
}
.gallery-grid .gallery-item:hover img{ transform:scale(1.05); }
.gallery-grid .gallery-item.large{
  grid-column:span 2;
  grid-row:span 2;
  aspect-ratio:auto;
}

/* ---------- SPECS (encadré propre) -------------------------------- */
.product-specs{ background:var(--sand); }
.specs-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:36px 40px;
  max-width:780px; margin:0 auto;
  box-shadow:0 4px 20px -12px rgba(0,0,0,.08);
}
.specs-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
}
.specs-list .spec-item{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:16px 0;
  border-bottom:1px solid var(--line);
  gap:18px;
}
.specs-list .spec-item:nth-last-child(-n+2){ border-bottom:none; }
.specs-list .spec-item:nth-last-child(2):nth-child(odd){ border-bottom:1px solid var(--line); }
.spec-item dt, .spec-item .spec-label{
  font-family:var(--ff-body);
  font-weight:600; font-size:.78rem;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.spec-item dd, .spec-item .spec-value{
  font-family:var(--ff-display);
  font-size:1rem; font-weight:500;
  color:var(--ink);
  text-align:right;
}

/* ---------- CONTENU ÉDITORIAL ------------------------------------- */
.product-editorial{ background:var(--paper); }
.editorial-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:56px;
  max-width:1000px; margin:0 auto;
  align-items:start;
}
.editorial-main h2{
  font-family:var(--ff-display);
  font-size:1.7rem;
  color:var(--pine);
  margin-bottom:20px;
}
.editorial-main p{
  font-size:1.05rem; line-height:1.75;
  color:var(--ink);
  margin-bottom:1.1em;
}
.editorial-main p b{ color:var(--pine); }
.editorial-aside{
  background:var(--sand);
  padding:30px 34px;
  border-radius:var(--r);
  border-left:4px solid var(--clay);
  position:sticky; top:96px;
}
.editorial-aside h3{
  font-family:var(--ff-display);
  font-size:1.15rem; color:var(--pine);
  margin-bottom:14px;
  letter-spacing:-.01em;
}
.editorial-aside p{
  font-size:.96rem; line-height:1.7;
  color:var(--ink-soft);
}

/* ---------- CTA FINAL (gros bloc devis) --------------------------- */
.product-final-cta{
  padding:80px 0;
  background:var(--pine);
  color:var(--sand);
  text-align:center;
}
.product-final-cta .eyebrow{ color:var(--ochre); justify-content:center; }
.product-final-cta .eyebrow::before{ background:var(--ochre); }
.product-final-cta h2{
  font-size:clamp(1.8rem, 3.4vw, 2.6rem);
  color:var(--paper);
  margin:.4em auto .4em;
  max-width:680px;
}
.product-final-cta p{
  color:rgba(244,236,224,.78);
  max-width:560px;
  margin:0 auto 32px;
  font-size:1.05rem;
}
.product-final-cta .final-cta-row{
  display:inline-flex; align-items:center; gap:24px;
  flex-wrap:wrap; justify-content:center;
}
.product-final-cta .final-price{
  font-family:var(--ff-display); font-weight:600;
  font-size:1.4rem; color:var(--ochre);
}

/* ---------- RESPONSIVE PAGES PRODUITS ----------------------------- */
@media(max-width:880px){
  .product-hero-grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .product-hero-image{ order:-1; aspect-ratio:16/10; }
  .gallery-grid{ grid-template-columns:repeat(2, 1fr); gap:12px; }
  .gallery-grid .gallery-item.large{ grid-column:span 2; aspect-ratio:16/10; grid-row:auto; }
  .specs-list{ grid-template-columns:1fr; }
  .specs-list .spec-item{ border-bottom:1px solid var(--line) !important; }
  .specs-list .spec-item:last-child{ border-bottom:none !important; }
  .editorial-grid{ grid-template-columns:1fr; gap:32px; }
  .editorial-aside{ position:static; }
  .specs-card{ padding:24px 22px; }
}

/* =====================================================================
   OPTIMISATIONS MOBILE — v3 complètes
   ===================================================================== */

/* Tablette (≤ 920px) — pré-mobile : ajustements globaux ----------- */
@media(max-width:920px){
  .site-header{ height:74px; }
  .logo .logo-image{ height:52px !important; }
  .hero-inner{ grid-template-columns:1fr; gap:40px; padding:64px 0 72px; }
  .hero .wrap{ padding-left:28px; padding-right:28px; }
  .hero-visual{ aspect-ratio:3/2; max-width:540px; margin:0 auto; }
  .hero h1{ font-size:clamp(2rem, 6vw, 3.2rem); }
  .hero p.lead{ font-size:1.05rem; max-width:none; }
  .hero-cta{ justify-content:flex-start; }
  .hero-meta{ gap:24px; flex-wrap:wrap; }
  .hero-meta b{ font-size:1.4rem; }

  .nav-cta{ padding:.85em 1.4em !important; font-size:.9rem; }
}

/* Mobile (≤ 480px) — un peu plus serré mais on garde de l'air */
@media(max-width:480px){
  .hero .wrap{ padding-left:22px; padding-right:22px; }
}
/* Très petit mobile (≤ 380px) — minimum vital mais pas collé aux bords */
@media(max-width:380px){
  .hero .wrap{ padding-left:18px; padding-right:18px; }
}

/* Mobile (≤ 720px) — adaptations majeures ------------------------- */
@media(max-width:720px){
  /* Sections : moins de padding */
  .section{ padding:60px 0; }

  /* Header : logo plus petit, menu mobile activé */
  .site-header{ height:66px; }
  .logo .logo-image{ height:44px !important; }
  .wrap{ padding:0 18px; }

  /* Nav burger affiché */
  .nav-burger{
    display:flex !important; flex-direction:column; gap:5px; cursor:pointer;
    width:32px; height:32px; justify-content:center; align-items:center;
    z-index:65; padding:0;
  }
  .nav-burger span{
    display:block; height:2.5px; width:24px;
    background:var(--ink); border-radius:2px; transition:.25s;
  }
  .site-nav{
    position:fixed; inset:0 0 0 auto; width:min(82vw,340px);
    background:#fff; flex-direction:column; align-items:flex-start;
    padding:84px 28px 32px; gap:1.4rem;
    transform:translateX(100%);
    transition:transform .3s ease;
    box-shadow:0 0 40px rgba(0,0,0,.15);
    overflow-y:auto;
  }
  .site-nav a{ font-size:1.05rem; padding:.4em 0; }
  .nav-toggle:checked ~ .site-nav{ transform:translateX(0); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .nav-toggle:checked ~ .nav-burger span:nth-child(2){ opacity:0; }
  .nav-toggle:checked ~ .nav-burger span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }
  .nav-cta{ padding:.95em 1.7em !important; align-self:flex-start; }

  /* Hero : encore plus compact */
  .hero-inner{ padding:48px 0 60px; gap:32px; }
  .hero-visual{ aspect-ratio:3/2; max-width:none; }
  .hero h1{ font-size:clamp(1.9rem, 8vw, 2.6rem); line-height:1.12; }
  .hero-cta{ flex-direction:column; align-items:stretch; gap:10px; }
  .hero-cta .btn{ justify-content:center; }
  .hero-meta{ gap:18px 22px; margin-top:2em; }
  .hero-meta b{ font-size:1.2rem; }
  .hero-meta span{ font-size:.74rem; }

  /* Section heads */
  .section-head h2{ font-size:clamp(1.6rem, 5vw, 2.2rem); }
  .section-head{ margin-bottom:36px; }

  /* Steps : 2 col au lieu de 4 */
  .steps{ grid-template-columns:repeat(2,1fr); gap:20px 18px; }
  .step .num{ font-size:2rem; }

  /* Modèles : 1 col, cards plus serrées */
  .models-grid{ grid-template-columns:1fr; gap:20px; }
  .model-body{ padding:22px 22px 24px; }
  .model-card .model-wa{ margin-top:36px; }
  .model-card .model-wa::before{ left:18%; right:18%; top:-20px; }

  /* Atelier */
  .split{ grid-template-columns:1fr; gap:32px; }
  .gallery{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .gallery .media-frame.wide{ grid-column:span 2; aspect-ratio:2/1; }

  /* Sur-mesure band */
  .custom-band{ padding:28px 22px; flex-direction:column; align-items:flex-start; gap:18px; }
  .custom-band h3{ font-size:1.3rem; }
  .custom-band .btn-whatsapp{ width:100%; justify-content:center; }

  /* Export */
  .export-grid{ grid-template-columns:1fr; gap:18px; }

  /* Contact */
  .contact-grid{ grid-template-columns:1fr; gap:28px; }
  .field-row{ grid-template-columns:1fr; gap:14px; }
  .form-actions{ flex-direction:column; }

  /* Footer */
  .footer-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .footer-brand{ grid-column:span 2; }
  .footer-bottom{ flex-direction:column; gap:10px; text-align:center; }

  /* Pages produits */
  .product-hero{ padding:36px 0 56px; }
  .product-hero .breadcrumb{ margin-bottom:18px; font-size:.74rem; }
  .product-hero-grid{ grid-template-columns:1fr; gap:24px; }
  .product-hero-image{ order:-1; aspect-ratio:16/10; }
  .product-hero-text h1{ font-size:clamp(1.7rem, 6vw, 2.4rem); }
  .product-hero-cta{ flex-direction:column; align-items:stretch; gap:14px; }
  .product-hero-cta .btn{ justify-content:center; }
  .product-hero-cta .price-tag{ align-self:flex-start; }

  .product-section{ padding:56px 0; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:10px; }
  .gallery-grid .gallery-item.large{ grid-column:span 2; aspect-ratio:16/10; grid-row:auto; }
  .specs-card{ padding:22px 20px; }
  .specs-list{ grid-template-columns:1fr; }
  .specs-list .spec-item{ flex-wrap:wrap; gap:4px; padding:12px 0; }
  .spec-item dd, .spec-item .spec-value{ text-align:left; font-size:.98rem; }

  .editorial-grid{ grid-template-columns:1fr; gap:24px; }
  .editorial-aside{ position:static; padding:22px 22px; }

  .product-final-cta{ padding:56px 0; }
  .product-final-cta .final-cta-row{ flex-direction:column; gap:18px; }

  .related-models{ padding:56px 0; }
  .related-models .related-grid{ grid-template-columns:1fr; gap:18px; max-width:420px; }

  /* Tier badge un peu plus petit sur mobile */
  .tier-badge{ font-size:.68rem; padding:.38em .9em; }

  /* WhatsApp float : plus petit */
  .wa-float{ width:54px; height:54px; bottom:18px; right:18px; }
}

/* Très petit mobile (≤ 420px) */
@media(max-width:420px){
  .wrap{ padding:0 14px; }
  .site-header{ height:62px; }
  .logo .logo-image{ height:40px !important; }
  .hero-meta{ gap:14px; }
  .hero-meta > div{ flex:1 0 30%; }
}

/* =====================================================================
   PAGE FORMULAIRE DE DEVIS (/formulaire/)
   ===================================================================== */

.form-page-hero{
  padding:70px 0 40px;
  background:linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
.form-page-hero .breadcrumb{
  font-size:.82rem; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:18px;
}
.form-page-hero .breadcrumb a{ color:var(--clay); font-weight:500; }
.form-page-hero .breadcrumb a:hover{ text-decoration:underline; }
.form-page-hero .breadcrumb .sep{ margin:0 .5em; opacity:.5; }
.form-page-hero .eyebrow{ margin-bottom:14px; }
.form-page-hero h1{
  font-size:clamp(2rem, 4.4vw, 3.2rem);
  letter-spacing:-.015em;
  margin:.1em 0 .35em;
  max-width:780px;
}
.form-page-hero .form-page-lead{
  font-size:1.1rem; color:var(--ink-soft);
  max-width:680px; line-height:1.65;
}

.form-page-section{
  padding:60px 0 80px;
  background:var(--paper);
}
.form-page-section form{
  max-width:820px; margin:0 auto;
}

/* Bloc de section dans le formulaire */
.form-block{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:30px 34px 26px;
  margin-bottom:22px;
}
.form-block legend{
  font-family:var(--ff-display);
  font-weight:500; font-size:1.25rem;
  color:var(--pine);
  padding:0 12px 0 0;
  margin-bottom:6px;
  letter-spacing:-.005em;
}
.form-block .field-row + .field,
.form-block .field + .field,
.form-block .field + .field-row,
.form-block .field-row + .field-row{ margin-top:18px; }

/* Champs (réutilise le pattern existant, propre dans le card) */
.form-block .field label{
  display:block;
  font-family:var(--ff-body); font-weight:600;
  font-size:.85rem; letter-spacing:.04em;
  color:var(--ink);
  margin-bottom:8px;
}
.form-block .field input[type="text"],
.form-block .field input[type="email"],
.form-block .field input[type="tel"],
.form-block .field select,
.form-block .field textarea{
  width:100%;
  font-family:var(--ff-body); font-size:1rem;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:10px;
  padding:.72em .95em;
  transition:border-color .18s ease, background .18s ease;
}
.form-block .field input:focus,
.form-block .field select:focus,
.form-block .field textarea:focus{
  outline:none;
  border-color:var(--clay);
  background:#fff;
}
.form-block .field textarea{ resize:vertical; min-height:140px; line-height:1.55; }
.form-block .field-row{
  display:grid; grid-template-columns:1fr 1fr; gap:16px;
}
.req{ color:var(--clay); font-weight:700; }
.hint{
  font-size:.78rem; color:var(--ink-soft);
  font-weight:400; letter-spacing:0;
  margin-left:.4em;
}
.field .hint{ display:block; margin:8px 0 0; }

/* Grille de checkboxes */
.checkbox-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
  gap:10px 14px;
  margin-top:4px;
}
.check{
  display:flex; align-items:center;
  font-size:.92rem; font-weight:500 !important;
  letter-spacing:0 !important;
  color:var(--ink) !important;
  cursor:pointer;
  padding:8px 12px;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  transition:all .18s ease;
  margin-bottom:0 !important;
}
.check:hover{ background:var(--sand); border-color:var(--clay); }
.check input[type="checkbox"]{
  width:16px; height:16px;
  margin-right:9px;
  accent-color:var(--clay);
  flex-shrink:0;
}
.check:has(input:checked){
  background:var(--sand);
  border-color:var(--clay);
  color:var(--pine) !important;
}

/* Bloc d'envoi (bouton WhatsApp + Email) */
.form-submit-block{
  background:linear-gradient(160deg, var(--pine) 0%, var(--pine-soft) 100%);
  color:var(--sand);
  border-radius:var(--r);
  padding:36px 38px;
  margin-top:28px;
  text-align:center;
}
.form-submit-intro{
  font-family:var(--ff-display);
  font-size:1.25rem;
  color:var(--paper);
  margin-bottom:22px;
}
.form-submit-buttons{
  display:flex; gap:14px; justify-content:center;
  flex-wrap:wrap;
}
.form-submit-buttons .btn{
  flex:1; min-width:240px;
  justify-content:center;
  padding:1em 1.6em;
  font-size:1rem;
}
.form-submit-note{
  font-size:.85rem;
  color:rgba(244,236,224,.75);
  margin-top:20px;
  max-width:560px; margin-left:auto; margin-right:auto;
  line-height:1.55;
}

/* Status (succès / erreur) */
#devis-complet .form-status{
  display:none;
  padding:14px 18px; border-radius:10px;
  font-size:.95rem; font-weight:500;
  margin-bottom:20px;
}
#devis-complet .form-status.show{ display:block; }
#devis-complet .form-status.ok{ background:#d8efdc; color:#1a6b2f; border:1px solid #74c98a; }
#devis-complet .form-status.err{ background:#fae3da; color:#8c2e0c; border:1px solid #e08c6d; }

/* Section trust en bas */
.form-trust{
  background:var(--sand);
  padding:60px 0 80px;
  border-top:1px solid var(--line);
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
  max-width:1000px; margin:0 auto;
}
.trust-item{
  text-align:center; padding:0 14px;
}
.trust-icon{
  font-size:2.4rem; margin-bottom:10px;
  line-height:1;
}
.trust-item h3{
  font-family:var(--ff-display);
  font-size:1.15rem; font-weight:500;
  color:var(--pine);
  margin-bottom:8px;
}
.trust-item p{
  font-size:.92rem; color:var(--ink-soft);
  line-height:1.6;
}

/* Mobile */
@media(max-width:720px){
  .form-page-hero{ padding:48px 0 30px; }
  .form-page-hero h1{ font-size:clamp(1.7rem, 6vw, 2.3rem); }
  .form-page-section{ padding:36px 0 60px; }
  .form-block{ padding:22px 20px 20px; margin-bottom:16px; }
  .form-block legend{ font-size:1.1rem; }
  .form-block .field-row{ grid-template-columns:1fr; gap:14px; }
  .checkbox-grid{ grid-template-columns:1fr 1fr; gap:8px 10px; }
  .check{ font-size:.85rem; padding:7px 10px; }
  .form-submit-block{ padding:26px 22px; }
  .form-submit-buttons{ flex-direction:column; gap:10px; }
  .form-submit-buttons .btn{ width:100%; min-width:0; }
  .trust-grid{ grid-template-columns:1fr; gap:24px; max-width:420px; }
}

/* =====================================================================
   ATELIER — CARTE DU MAROC ("Nous sommes ici à Agadir")
   ===================================================================== */
.atelier-map{
  margin-top:64px;
  background:rgba(244,236,224,.04);
  border:1px solid rgba(244,236,224,.15);
  border-radius:var(--r);
  padding:48px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  align-items:center;
}
.atelier-map-text .eyebrow.light{ margin-bottom:14px; }
.atelier-map-text h3{
  font-family:var(--ff-display);
  font-size:clamp(1.6rem, 2.6vw, 2rem);
  font-weight:500;
  color:var(--ochre);
  margin:.2em 0 .7em;
  letter-spacing:-.005em;
}
.atelier-map-text p{
  color:rgba(244,236,224,.78);
  margin-bottom:.85em;
  line-height:1.65;
}
.atelier-map-visual{
  display:flex; align-items:center; justify-content:center;
  position:relative;
}

/* ============ ENCART DE LOCALISATION (nouveau, remplace la silhouette) ============ */
.location-card{
  display:flex; flex-direction:column; align-items:center;
  gap:18px;
  padding:32px 28px;
  background:rgba(244,236,224,.04);
  border:1px solid rgba(244,236,224,.18);
  border-radius:18px;
  text-align:center;
  min-width:240px;
  animation:mapEnter 1s cubic-bezier(.2,.85,.25,1) both;
}
.location-pin-wrap{
  position:relative;
  width:64px; height:88px;
  display:flex; align-items:center; justify-content:center;
}
.location-pin{
  width:64px; height:auto;
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.4));
  position:relative; z-index:3;
  animation:pinBounce 2.6s ease-in-out infinite;
}
@keyframes pinBounce{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-6px); }
}
.location-halo{
  position:absolute;
  top:18px; left:50%;
  width:48px; height:48px;
  margin-left:-24px;
  border-radius:50%;
  background:var(--clay);
  opacity:.5;
  z-index:1;
}
.location-halo-1{ animation:locationPulse 2.6s ease-out infinite; }
.location-halo-2{ animation:locationPulse 2.6s ease-out infinite; animation-delay:1.3s; }
@keyframes locationPulse{
  0%   { transform:scale(.6); opacity:.55; }
  60%  { opacity:.2; }
  100% { transform:scale(2.8); opacity:0; }
}
.location-label{
  display:flex; flex-direction:column; align-items:center;
  gap:4px;
}
.location-country{
  font-family:var(--ff-body);
  font-size:.72rem; font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ochre);
}
.location-city{
  font-family:var(--ff-display);
  font-size:1.7rem; font-weight:500;
  color:var(--sand);
  line-height:1.1;
  letter-spacing:-.005em;
}
.location-coords{
  font-family:var(--ff-body);
  font-size:.78rem; font-weight:500;
  color:rgba(244,236,224,.55);
  font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
}
.location-sub{
  margin-top:6px;
  font-family:var(--ff-body);
  font-size:.66rem; font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--clay);
}
.map-container{
  position:relative;
  width:100%;
  max-width:240px !important;
  display:inline-block;
  animation:mapEnter 1s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes mapEnter{
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:translateY(0); }
}
.map-silhouette{
  width:100%; height:auto;
  display:block;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
  animation:mapFloat 7s ease-in-out infinite;
}
@keyframes mapFloat{
  0%, 100% { transform:translateY(0); }
  50%      { transform:translateY(-8px); }
}

/* Compass "N" : supprimé du HTML (lot 2). On masque toute occurrence résiduelle. */
.map-compass{ display:none !important; }

.map-marker{
  position:absolute;
  width:0; height:0;
  pointer-events:none;
  z-index:4;
}
.marker-pulse{
  position:absolute;
  top:50%; left:50%;
  width:16px; height:16px;
  margin:-8px 0 0 -8px;
  border-radius:50%;
  background:var(--clay);
  opacity:.7;
}
.marker-pulse-1{ animation:atlasPulse 2.4s ease-out infinite; }
.marker-pulse-2{ animation:atlasPulse 2.4s ease-out infinite; animation-delay:1.2s; }
@keyframes atlasPulse{
  0%   { transform:scale(1);   opacity:.7; }
  50%  { opacity:.35; }
  100% { transform:scale(4); opacity:0; }
}
.marker-dot{
  position:absolute;
  top:50%; left:50%;
  width:14px; height:14px;
  margin:-7px 0 0 -7px;
  border-radius:50%;
  background:var(--clay);
  border:2.5px solid var(--sand);
  box-shadow:0 0 0 1px rgba(0,0,0,.15), 0 3px 10px rgba(0,0,0,.45);
  z-index:2;
  animation:markerHeartbeat 2.4s ease-in-out infinite;
}
@keyframes markerHeartbeat{
  0%, 100% { transform:scale(1); }
  50%      { transform:scale(1.18); }
}
.marker-label{
  position:absolute;
  top:50%; left:22px;
  transform:translateY(-50%);
  white-space:nowrap;
  z-index:3;
}
.marker-city{
  display:block;
  font-family:var(--ff-display);
  font-size:1.35rem; font-weight:500;
  color:var(--ochre);
  line-height:1.1;
}
.marker-sub{
  display:block;
  font-family:var(--ff-body);
  font-size:.7rem; font-weight:700;
  letter-spacing:.18em; color:rgba(244,236,224,.75);
  text-transform:uppercase;
  margin-top:4px;
}

@media(max-width:880px){
  .atelier-map{
    grid-template-columns:1fr;
    padding:36px 28px;
    gap:24px;
  }
  .atelier-map-text{ text-align:center; }
  .atelier-map-text .eyebrow{ justify-content:center; }
  .map-container{ max-width:200px !important; }
}
@media(max-width:480px){
  .atelier-map{ padding:28px 20px; }
  .map-container{ max-width:180px !important; }
  .marker-city{ font-size:.95rem; }
  .marker-sub{ font-size:.56rem; }
}

/* Accessibilité : on désactive les animations si l'utilisateur préfère le mouvement réduit */
@media(prefers-reduced-motion:reduce){
  .map-silhouette,
  .map-container,
  .marker-pulse{ animation:none !important; }
}

/* =====================================================================
   FORMULAIRE — v2 RACCOURCI WHATSAPP (page /formulaire/)
   ===================================================================== */

.form-wrap{ max-width:680px; margin:0 auto; }

.form-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:44px 46px 36px;
  box-shadow:0 18px 60px -32px rgba(42,36,29,.35);
}

.form-card .field{ margin-bottom:24px; }
.form-card .field:last-of-type{ margin-bottom:0; }

.form-card .field label,
.form-card .field-label{
  display:block;
  font-family:var(--ff-body);
  font-weight:600;
  font-size:.92rem;
  letter-spacing:.005em;
  color:var(--ink);
  margin-bottom:9px;
}
.hint-inline{
  font-weight:400; font-size:.78rem;
  color:var(--ink-soft);
  letter-spacing:0;
  margin-left:6px;
}

.form-card input[type="text"],
.form-card input[type="tel"],
.form-card input[type="email"],
.form-card select,
.form-card textarea{
  width:100%;
  font-family:var(--ff-body);
  font-size:1rem; line-height:1.5;
  color:var(--ink);
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:.85em 1em;
  transition:border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus{
  outline:none;
  background:#fff;
  border-color:var(--clay);
  box-shadow:0 0 0 4px rgba(194,94,58,.12);
}
.form-card textarea{ resize:vertical; min-height:130px; }
.form-card select{
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%236b6155' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-size:12px;
  padding-right:36px;
}

/* === Checkboxes — alignées : case À GAUCHE + label sur la même ligne === */
.check-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}
.check-item{
  display:flex !important;
  flex-direction:row !important;
  align-items:center;
  gap:10px;
  padding:11px 14px;
  background:var(--paper);
  border:1.5px solid var(--line);
  border-radius:10px;
  cursor:pointer;
  font-family:var(--ff-body);
  font-weight:500;
  font-size:.94rem;
  letter-spacing:0;
  color:var(--ink);
  margin-bottom:0 !important;
  transition:all .18s ease;
  user-select:none;
}
.check-item:hover{
  background:#fff; border-color:var(--clay);
}
.check-item input[type="checkbox"]{
  width:18px; height:18px;
  margin:0;
  accent-color:var(--clay);
  cursor:pointer;
  flex-shrink:0;
}
.check-item span{
  flex:1;
  line-height:1.3;
}
.check-item:has(input:checked){
  background:var(--sand);
  border-color:var(--clay);
  color:var(--pine);
  font-weight:600;
}

.req{ color:var(--clay); font-weight:700; }

/* === Bouton CTA WhatsApp === */
.form-cta-row{
  margin-top:32px;
  padding-top:28px;
  border-top:1px solid var(--line);
  text-align:center;
}
.form-cta-btn{
  font-size:1.05rem;
  padding:1.1em 2.2em;
  min-width:280px;
  justify-content:center;
  gap:.7em;
}
.form-cta-note{
  margin-top:14px;
  font-size:.85rem;
  color:var(--ink-soft);
  max-width:420px;
  margin-left:auto; margin-right:auto;
}

/* === Status messages === */
#devis-form-wa .form-status{
  display:none;
  padding:14px 18px;
  border-radius:10px;
  font-size:.95rem; font-weight:500;
  margin-bottom:20px;
}
#devis-form-wa .form-status.show{ display:block; }
#devis-form-wa .form-status.ok{ background:#d8efdc; color:#1a6b2f; border:1px solid #74c98a; }
#devis-form-wa .form-status.err{ background:#fae3da; color:#8c2e0c; border:1px solid #e08c6d; }

/* === Trust section : 3 colonnes (déjà défini mais on s'assure du responsive) === */
.form-trust{ padding:60px 0 80px; background:var(--sand); border-top:1px solid var(--line); }

/* === Mobile === */
@media(max-width:720px){
  .form-card{ padding:28px 24px 26px; }
  .check-row{ grid-template-columns:1fr; gap:8px; }
  .check-item{ padding:13px 15px; font-size:.95rem; }
  .form-cta-btn{ width:100%; min-width:0; padding:1em 1.5em; }
  .form-cta-row{ margin-top:24px; padding-top:22px; }
}

/* =====================================================================
   OPTIMISATION MOBILE v4 — passe finale (iOS, touch, overflow, etc.)
   ===================================================================== */

/* --- Anti-overflow horizontal (défensif sur toute la page) ----------- */
html{ overflow-x:hidden; }
body{ overflow-x:hidden; max-width:100vw; }
img, video, iframe, svg{ max-width:100%; height:auto; }

/* --- iOS Safari : empêcher le zoom sur focus champ (font-size >=16px) - */
@media(max-width:880px){
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="url"],
  select,
  textarea{
    font-size:16px !important;
  }
}

/* --- Touch targets minimum 44×44px sur mobile ----------------------- */
@media(hover:none){
  .btn{ min-height:48px; }
  .site-nav a{ padding:.6em 0; min-height:44px; display:flex; align-items:center; }
  .nav-burger{ min-width:44px; min-height:44px; }
  .faq-item summary{ min-height:54px; }
  .check-item{ min-height:48px; }
  .modal-close{ min-width:48px; min-height:48px; }
}

/* === HEADER === */
@media(max-width:720px){
  .site-header{ box-shadow:0 1px 0 rgba(0,0,0,.04), 0 2px 12px -10px rgba(0,0,0,.18); }
}
@media(max-width:380px){
  .site-header{ height:58px; }
  .logo .logo-image{ height:36px !important; }
  .wrap{ padding:0 14px; }
  .nav-burger{ width:30px; }
}

/* === HERO === */
@media(max-width:720px){
  /* H1 plus petit pour ne pas casser sur petit écran */
  .hero h1{ font-size:clamp(1.85rem, 7.8vw, 2.5rem); line-height:1.15; word-wrap:break-word; }
  .hero p.lead{ font-size:1rem; line-height:1.55; }
  .hero-visual{
    /* L'image ne doit JAMAIS déborder */
    width:100%; max-width:100%;
    border-radius:12px;
  }
  /* Hero-meta : meilleur wrap sur petit écran */
  .hero-meta{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px 12px;
    margin-top:1.8em;
  }
  .hero-meta > div{ min-width:0; }
  .hero-meta b{ font-size:1.15rem; }
  .hero-meta span{ font-size:.72rem; line-height:1.3; }
}
@media(max-width:380px){
  .hero h1{ font-size:1.7rem; }
  .hero-meta{ grid-template-columns:repeat(3, 1fr); gap:10px 8px; }
  .hero-meta b{ font-size:1rem; }
  .hero-meta span{ font-size:.66rem; }
}

/* === STEPS (4 étapes méthode) === */
@media(max-width:560px){
  .steps{ grid-template-columns:1fr 1fr; gap:18px; }
  .step{ padding:0; }
  .step .num{ font-size:1.7rem; margin-bottom:.1em; }
  .step h3{ font-size:1.05rem; }
  .step p{ font-size:.88rem; line-height:1.5; }
}
@media(max-width:380px){
  .steps{ grid-template-columns:1fr; gap:24px; max-width:300px; margin:0 auto; }
}

/* === MODÈLES CARDS === */
@media(max-width:720px){
  .models-grid{ gap:24px; }
  .model-card .tagline{ font-size:.95rem; }
  .model-card h3{ font-size:1.4rem; }
  .model-tags .tag{ font-size:.72rem; padding:.32em .85em; }
  .model-specs li{ font-size:.85rem; }
  .model-foot .price{ font-size:1rem; }
  .model-card .model-wa{
    width:100%;
    padding:1.05em 1em;
    font-size:.95rem;
    min-height:50px;
  }
}

/* === SUR-MESURE BAND === */
@media(max-width:720px){
  .custom-band h3{ font-size:1.25rem; }
  .custom-band p{ font-size:.92rem; }
  .custom-band .btn-whatsapp{ font-size:.95rem; padding:.85em 1.4em; }
}

/* === ATELIER === */
@media(max-width:720px){
  .split-text h2{ font-size:1.5rem; }
  .feature-list li{ font-size:.92rem; align-items:flex-start; }
  .feature-list li svg{ flex-shrink:0; margin-top:2px; }
  .atelier-map{ margin-top:36px; padding:28px 22px; }
  .atelier-map-text h3{ font-size:1.35rem; }
  .atelier-map-text p{ font-size:.92rem; line-height:1.55; }
}

/* === QUOTE BAND === */
@media(max-width:720px){
  .quote-band{ padding:48px 0; }
  .quote-band blockquote{ font-size:1.2rem; line-height:1.4; }
  .quote-band cite{ font-size:.85rem; }
}

/* === EXPORT === */
@media(max-width:560px){
  .export-card{ padding:26px 22px; }
  .export-card h3{ font-size:1.25rem; }
  .export-card p{ font-size:.92rem; }
  .check-list li{ font-size:.88rem; }
  .export-note{ font-size:.85rem; padding:0 8px; }
}

/* === CONTACT (form home) === */
@media(max-width:720px){
  .contact-grid{ gap:24px; }
  .form-card{ padding:24px 20px; }
  .form-card input,
  .form-card select,
  .form-card textarea{ padding:.75em .85em; }
}

/* === PAGES PRODUITS === */
@media(max-width:560px){
  /* Galerie 4→2 col déjà à 880px, on garde 2 col en mobile (plus joli qu'1 col) */
  .gallery-grid{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .gallery-grid .gallery-item.large{ grid-column:span 2; aspect-ratio:16/10; }
  .specs-card{ padding:22px 18px; }
  .spec-item dt, .spec-item .spec-label{ font-size:.7rem; }
  .spec-item dd, .spec-item .spec-value{ font-size:.95rem; }
  .product-final-cta h2{ font-size:1.5rem; }
  .product-final-cta p{ font-size:.92rem; padding:0 10px; }
  .product-final-cta .final-price{ font-size:1.2rem; }
}

/* === FAQ === */
@media(max-width:720px){
  .faq-item summary{ padding:16px 18px; font-size:1rem; line-height:1.3; }
  .faq-item p{ padding:0 18px 18px; font-size:.92rem; }
}

/* === FORMULAIRE === */
@media(max-width:560px){
  .form-page-hero{ padding:40px 0 24px; }
  .form-page-hero h1{ font-size:clamp(1.5rem, 6.5vw, 2rem); line-height:1.2; }
  .form-page-hero .form-page-lead{ font-size:.95rem; }
  .form-card{ padding:24px 20px 22px; }
  .check-item span{ font-size:.92rem; }
}

/* === RELATED MODELS === */
@media(max-width:720px){
  .related-card .related-body{ padding:16px 18px 20px; }
  .related-card h3{ font-size:1.25rem; }
  .related-card p{ font-size:.88rem; }
}

/* === FOOTER === */
@media(max-width:480px){
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .footer-brand{ grid-column:span 1; text-align:center; }
  .footer-brand .logo{ justify-content:center; }
  .footer-col{ text-align:center; }
  .footer-col a, .footer-col span{ padding:.4em 0; }
  .footer-socials{ justify-content:center; }
  .footer-bottom{ font-size:.82rem; }
}

/* === WHATSAPP FLOAT === */
@media(max-width:720px){
  .wa-float{
    width:54px; height:54px;
    bottom:18px; right:18px;
    box-shadow:0 8px 24px rgba(0,0,0,.25);
  }
  .wa-float svg{ width:30px; height:30px; }
}
@media(max-width:380px){
  .wa-float{ width:50px; height:50px; bottom:14px; right:14px; }
}

/* === TIER BADGES === */
@media(max-width:560px){
  .tier-badge{ font-size:.66rem; padding:.36em .85em; letter-spacing:.12em; }
}

/* === BREADCRUMBS === */
@media(max-width:560px){
  .breadcrumb, .product-hero .breadcrumb, .form-page-hero .breadcrumb{
    font-size:.72rem;
    margin-bottom:14px;
  }
}

/* === MODÈLE — Hero produit, ajustement fin === */
@media(max-width:720px){
  .product-hero{ padding:32px 0 48px; }
  .product-hero-text .tier-badge{ margin-bottom:14px; }
  .product-hero-text h1{ font-size:clamp(1.6rem, 6.5vw, 2.2rem); }
  .product-hero-text .tagline-big{ font-size:1.05rem; margin-bottom:22px; }
  .product-hero-cta .price-tag{ font-size:1rem; padding:.5em 1em; }
}

/* === Évite les overflow accidentels dans tout contenu === */
.wrap > *{ max-width:100%; box-sizing:border-box; }
h1, h2, h3, h4, p, li{ overflow-wrap:break-word; word-wrap:break-word; }

/* =====================================================================
   MOBILE OPTIMISATION v5 — passe finale, corrections ciblées
   ===================================================================== */

/* --- HERO IMAGE : aspect-ratio adapté à la photo Atlas-05 (3:2) ----- */
/* Évite le crop excessif de la photo sur mobile */
@media(max-width:920px){
  .hero-visual{
    aspect-ratio:3/2;
    max-width:560px;
    margin-left:auto; margin-right:auto;
  }
}
@media(max-width:720px){
  .hero-visual{
    aspect-ratio:3/2;
    max-width:none;
    margin-top:8px;
  }
}

/* --- HEADER : offset du menu burger pour passer sous le header ----- */
@media(max-width:720px){
  .site-nav{ padding-top:90px !important; }
}

/* --- ATELIER GALLERY : meilleure grille mobile --------------------- */
@media(max-width:720px){
  .gallery{
    grid-template-columns:repeat(2, 1fr);
    gap:10px;
  }
  .gallery .media-frame{ aspect-ratio:1; }
  .gallery .media-frame.wide{ grid-column:span 2; aspect-ratio:16/10; }
}
@media(max-width:420px){
  .gallery{ gap:8px; }
}

/* --- HERO METADATA : empêche les chiffres tronqués --------------- */
@media(max-width:720px){
  .hero-meta{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:14px 10px;
  }
  .hero-meta > div{
    min-width:0;
    text-align:center;
  }
  .hero-meta b{ font-size:1.25rem; }
  .hero-meta span{ font-size:.7rem; line-height:1.3; }
}
@media(max-width:360px){
  .hero-meta b{ font-size:1.05rem; }
  .hero-meta span{ font-size:.62rem; letter-spacing:.02em; }
}

/* --- SECTIONS : rythme de padding cohérent sur mobile ------------- */
@media(max-width:720px){
  .section{ padding:64px 0; }
  .section-head{ margin-bottom:32px; }
  .hero-inner{ padding:52px 0 64px; gap:28px; }
}
@media(max-width:480px){
  .section{ padding:52px 0; }
  .section-head{ margin-bottom:28px; }
  .hero-inner{ padding:40px 0 56px; }
}

/* --- TYPOGRAPHIE : meilleur wrap sur titres (modern) -------------- */
.hero h1, .section-head h2, h1, h2{
  text-wrap:balance;  /* évite les "orphelin" en bout de ligne, supporté Chrome/Safari récents */
}

/* --- WhatsApp FLOAT : décale-le sur petit écran pour éviter de
       masquer le bouton WhatsApp des cards modèles --------------- */
@media(max-width:720px){
  .wa-float{
    bottom:16px;
    right:16px;
    width:52px; height:52px;
  }
  .wa-float svg{ width:28px; height:28px; }
  /* Petit padding bottom au body pour que le wa-float ne masque
     pas le bouton WhatsApp en bas de la dernière card */
  body{ padding-bottom:8px; }
}

/* --- EXPORT CARDS : ajustement final mobile ----------------------- */
@media(max-width:560px){
  .export-grid{ gap:16px; }
  .export-card{ padding:24px 22px; }
}

/* --- CONTACT FORM (home) : améliorations mobile ------------------- */
@media(max-width:720px){
  .contact-aside{ padding:24px; }
  .contact-aside h3{ font-size:1.15rem; }
  .contact-line{ padding:10px 0; }
}

/* --- PAGES PRODUITS : gallery ajustée mobile ---------------------- */
@media(max-width:560px){
  .gallery-grid{
    grid-template-columns:repeat(2, 1fr);
    gap:8px;
  }
  .gallery-grid .gallery-item{ aspect-ratio:1; }
  .gallery-grid .gallery-item.large{
    grid-column:span 2;
    aspect-ratio:3/2;
  }
}

/* --- FORMULAIRE : ajustements ultime ------------------------------ */
@media(max-width:560px){
  .form-card{ padding:22px 18px; }
  .check-item{ min-height:46px; padding:11px 14px; }
  .form-cta-btn{ font-size:1rem; padding:1em 1.4em; }
  .form-cta-note{ font-size:.8rem; padding:0 4px; }
}

/* --- FAQ : tap target legitime ----------------------------------- */
.faq-item summary{ cursor:pointer; min-height:54px; align-items:flex-start; padding-top:18px; }

/* --- Anti-burger-overlap : header avec ombre si menu ouvert ------- */
.nav-toggle:checked ~ .nav-burger{ position:fixed; top:18px; right:18px; }

/* --- DERNIÈRES SÉCURITÉS GLOBALES -------------------------------- */
/* Empêche tout overflow horizontal sur n'importe quel descendant */
*, *::before, *::after{ max-width:100%; }
table{ display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
pre, code{ word-break:break-word; overflow-wrap:break-word; }

/* Focus visible pour accessibilité clavier */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible{
  outline:2px solid var(--clay);
  outline-offset:2px;
}

/* =====================================================================
   PILLAR PAGE (/caravane-a-vendre-maroc/) — SEO long-form
   ===================================================================== */

.pillar-hero{
  padding:70px 0 60px;
  background:linear-gradient(180deg, var(--sand) 0%, var(--paper) 100%);
  border-bottom:1px solid var(--line);
}
.pillar-hero .breadcrumb{
  font-size:.82rem; color:var(--ink-soft);
  text-transform:uppercase; letter-spacing:.08em;
  margin-bottom:20px;
}
.pillar-hero .breadcrumb a{ color:var(--clay); font-weight:500; }
.pillar-hero .breadcrumb a:hover{ text-decoration:underline; }
.pillar-hero .breadcrumb .sep{ margin:0 .5em; opacity:.5; }
.pillar-hero .eyebrow{ margin-bottom:16px; }
.pillar-hero h1{
  font-size:clamp(2rem, 4.4vw, 3.2rem);
  letter-spacing:-.015em;
  line-height:1.15;
  margin:.1em 0 .45em;
  max-width:920px;
}
.pillar-hero .pillar-lead{
  font-size:clamp(1.05rem, 1.6vw, 1.2rem);
  color:var(--ink-soft);
  max-width:780px;
  line-height:1.65;
  margin-bottom:36px;
}
.pillar-toc{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:22px 28px 24px;
  max-width:640px;
}
.pillar-toc .toc-title{
  display:block;
  font-family:var(--ff-body);
  font-weight:600; font-size:.82rem;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--clay);
  margin-bottom:12px;
}
.pillar-toc ol{
  list-style:decimal inside;
  margin:0; padding:0;
  columns:2; column-gap:24px;
}
.pillar-toc li{
  padding:5px 0;
  font-size:.95rem;
  break-inside:avoid;
}
.pillar-toc a{
  color:var(--ink);
  border-bottom:1px dashed transparent;
  transition:border-color .2s ease, color .2s ease;
}
.pillar-toc a:hover{
  color:var(--clay);
  border-bottom-color:var(--clay);
}

.pillar-section{ padding:64px 0; }
.pillar-section.pillar-alt{ background:var(--sand); }
.pillar-wrap{ max-width:820px; margin:0 auto; }

.pillar-wrap h2{
  font-size:clamp(1.6rem, 3.2vw, 2.2rem);
  letter-spacing:-.01em;
  color:var(--pine);
  margin-bottom:.6em;
  scroll-margin-top:100px;
}
.pillar-wrap h3{
  font-size:1.3rem;
  color:var(--pine);
  margin:1.8em 0 .5em;
  letter-spacing:-.005em;
}
.pillar-wrap p{
  font-size:1.05rem;
  line-height:1.75;
  color:var(--ink);
  margin-bottom:1.1em;
}
.pillar-wrap p b, .pillar-wrap p strong{ color:var(--pine); }
.pillar-wrap ul{ margin:0 0 1.4em 1.4em; }
.pillar-wrap ul li{
  margin-bottom:.55em;
  font-size:1rem;
  line-height:1.65;
}
.pillar-wrap a:not(.pillar-model-card){
  color:var(--clay);
  text-decoration:underline;
  text-decoration-thickness:1.5px;
  text-underline-offset:3px;
}
.pillar-wrap a:not(.pillar-model-card):hover{ color:var(--clay-dark); }

/* Table comparative */
.pillar-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:1.4em 0 1.8em;
  border-radius:var(--r);
  box-shadow:0 4px 18px -12px rgba(0,0,0,.15);
}
.pillar-table{
  width:100%;
  min-width:640px;
  border-collapse:collapse;
  background:#fff;
  font-size:.95rem;
}
.pillar-table thead{
  background:var(--pine);
  color:var(--sand);
}
.pillar-table th{
  padding:14px 16px;
  text-align:left;
  font-family:var(--ff-body); font-weight:600;
  font-size:.82rem;
  letter-spacing:.06em; text-transform:uppercase;
}
.pillar-table td{
  padding:14px 16px;
  border-top:1px solid var(--line);
  color:var(--ink);
}
.pillar-table tbody tr:nth-child(even){ background:var(--paper); }
.pillar-table .pillar-row-highlight{
  background:linear-gradient(90deg, rgba(217,164,65,.15), rgba(194,94,58,.08)) !important;
  font-weight:500;
}
.pillar-table .pillar-row-highlight td{
  color:var(--pine);
  border-top:2px solid var(--clay);
}

/* CTA inline (encadré recommandation) */
.pillar-cta-inline{
  background:var(--pine);
  color:var(--sand);
  border-radius:var(--r);
  padding:24px 28px;
  margin:1.8em 0;
}
.pillar-cta-inline p{
  color:var(--sand) !important;
  margin-bottom:0;
  font-size:1rem;
  line-height:1.65;
}
.pillar-cta-inline p b, .pillar-cta-inline p strong{
  color:var(--ochre) !important;
}
.pillar-cta-inline a{
  color:var(--ochre) !important;
}

/* Cards des 3 modèles dans la section teardrop */
.pillar-models{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
  margin:1.6em 0 1em;
}
.pillar-model-card{
  display:flex; flex-direction:column;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
  text-decoration:none !important;
  color:inherit !important;
}
.pillar-model-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 40px -20px rgba(42,36,29,.35);
}
.pillar-model-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.pillar-model-body{
  padding:18px 20px 20px;
  display:flex; flex-direction:column;
  flex:1;
}
.pillar-model-body .tier-badge{
  align-self:flex-start;
  margin-bottom:10px;
}
.pillar-model-body h4{
  font-family:var(--ff-display);
  font-size:1.3rem;
  color:var(--pine);
  margin:.15em 0 .35em;
  letter-spacing:-.005em;
}
.pillar-model-body p{
  font-size:.9rem !important;
  color:var(--ink-soft);
  margin-bottom:.9em;
  line-height:1.55 !important;
  flex:1;
}
.pillar-model-link{
  display:inline-block;
  color:var(--clay);
  font-family:var(--ff-body);
  font-weight:600;
  font-size:.9rem;
  transition:transform .18s ease;
}
.pillar-model-card:hover .pillar-model-link{
  transform:translateX(3px);
}

/* FAQ dans le pillar */
.pillar-section .faq-list{ max-width:none; }

/* Responsive pillar */
@media(max-width:720px){
  .pillar-hero{ padding:44px 0 40px; }
  .pillar-hero h1{ font-size:clamp(1.5rem, 6vw, 2rem); }
  .pillar-hero .pillar-lead{ font-size:1rem; }
  .pillar-toc{ padding:18px 22px; }
  .pillar-toc ol{ columns:1; }
  .pillar-section{ padding:48px 0; }
  .pillar-wrap h2{ font-size:clamp(1.4rem, 5.5vw, 1.8rem); }
  .pillar-wrap h3{ font-size:1.15rem; }
  .pillar-wrap p, .pillar-wrap ul li{ font-size:.98rem; }
  .pillar-models{ grid-template-columns:1fr; gap:16px; }
  .pillar-cta-inline{ padding:20px 22px; }
}