/* Ti Dodou : feuille de style du site */
:root{
  color-scheme:light;
  --bg:#f1f7f5; --surface:#ffffff; --surface-2:#e3efec; --ink:#1b2427; --muted:#5a6b70; --line:#cfdfda;
  --lagoon:#158a85; --lagoon-ink:#0d5c59; --lagoon-soft:#c6e9e5;
  --sand:#d1a04c; --sand-soft:#f4e6c8; --coral:#e0604f; --cane:#6da35a;
  --plate:#2b3238; --shadow:0 14px 34px rgba(21,138,133,.12);
  --ok-bg:#dff1e4; --ok-ink:#1d5a34; --wait-bg:#fbe9c9; --wait-ink:#7a4b06;
  --radius:16px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Karla,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.display{font-family:Fredoka,"Trebuchet MS",sans-serif;font-weight:600;line-height:1.1;text-wrap:balance;margin:0}
p{margin:0}
a{color:var(--lagoon-ink)}
.mono{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--lagoon);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--surface);padding:8px 12px;border-radius:8px;z-index:50}
.skip:focus{left:12px}
.ln{stroke:#2b3238;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}

/* en-tête */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:66px}
.brand{display:inline-flex;align-items:baseline;gap:1px;font-family:Fredoka,sans-serif;font-weight:700;font-size:1.7rem;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.brand svg{width:.78em;height:.78em;transform:translateY(.06em)}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{font-family:Fredoka,sans-serif;font-weight:500;font-size:.98rem;color:var(--muted);text-decoration:none;padding:8px 14px;border-radius:999px}
nav.main a:hover{color:var(--ink);background:var(--surface-2)}
nav.main a.on{color:var(--lagoon-ink);background:var(--lagoon-soft)}

/* fil d'Ariane */
.crumbs{font-size:.85rem;color:var(--muted);padding:18px 0 0}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:8px;color:var(--line)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--lagoon-ink);text-decoration:underline}

section{padding:56px 0}
.eyebrow{color:var(--lagoon-ink);margin-bottom:14px}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px;flex-wrap:wrap}
.sec-head h1,.sec-head h2{font-size:clamp(1.8rem,3.4vw,2.5rem);letter-spacing:-.015em}
.sec-head p{color:var(--muted);max-width:34rem}
.hint{font-size:.85rem;color:var(--muted);margin-top:6px}

/* boutons */
.btn{display:inline-flex;align-items:center;gap:8px;font-family:Fredoka,sans-serif;font-weight:600;font-size:1rem;padding:12px 20px;border-radius:999px;text-decoration:none;border:2px solid transparent;cursor:pointer;transition:transform .15s;background:none;color:inherit}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--lagoon);color:#fff}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.btn.sandy{background:var(--sand);color:#1b2427}

/* accueil */
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding:48px 0 24px}
.hero h1{font-size:clamp(2.5rem,5.2vw,4.1rem);letter-spacing:-.02em}
.hero h1 em{font-style:normal;color:var(--lagoon)}
.hero .lede{font-size:1.15rem;color:var(--muted);max-width:34rem;margin:20px 0 28px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.byline{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 14px 8px 10px;border-radius:999px;background:var(--sand-soft);color:var(--ink);font-size:.95rem;line-height:1.3}
.byline .dot{width:10px;height:10px;border-radius:50%;background:var(--coral);flex:none}
.byline b{font-weight:600;font-family:Fredoka,sans-serif}
.duo{padding:8px 0 44px}
.duo-card{display:grid;grid-template-columns:200px 1fr;gap:28px;align-items:center;background:linear-gradient(120deg,var(--sand-soft),var(--lagoon-soft));border-radius:22px;padding:28px 32px}
.duo-fig{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.duo-fig svg{width:100%;height:auto}
.duo h2{font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.015em;margin-bottom:10px}
.duo p{color:var(--muted);max-width:42rem}
.duo p.eyebrow{margin-bottom:10px}
.foot .duo-foot b{font-family:Fredoka,sans-serif;font-weight:600;color:var(--ink)}
.hero-fig{display:grid;place-items:center;position:relative}
.hero-fig::before{content:"";position:absolute;inset:8% 6%;border-radius:50%;background:radial-gradient(closest-side,var(--lagoon-soft),transparent 72%);z-index:0}
.hero-squish{width:min(100%,420px);position:relative;z-index:1;transform-origin:50% 100%;transition:transform 1.7s cubic-bezier(.18,1.45,.32,1);cursor:pointer;touch-action:manipulation;user-select:none;-webkit-user-select:none}
.hero-squish.pressed{transform:scaleY(.58) scaleX(1.18);transition-duration:.1s}
.hero-cap{position:relative;z-index:1;margin-top:8px;color:var(--muted);font-size:.9rem;text-align:center}
.hero-cap b{color:var(--ink);font-weight:500}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.pillar{padding:22px 22px 24px;background:var(--surface);border-radius:var(--radius);border:1px solid var(--line)}
.pillar .k{display:inline-block;width:38px;height:38px;border-radius:12px;margin-bottom:14px}
.pillar h2{font-size:1.25rem;margin-bottom:8px}
.pillar p{color:var(--muted);font-size:.97rem}
.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.feat a{display:block;text-decoration:none;color:inherit;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .5s cubic-bezier(.18,1.3,.4,1)}
.feat a:hover{transform:translateY(-3px)}
.feat .fig{background:var(--surface-2);padding:18px}
.feat .fig svg{display:block;width:100%;height:auto}
.feat .txt{padding:14px 18px 18px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.feat .txt b{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.1rem}
.feat .txt span{color:var(--muted);font-size:.9rem;font-family:"DM Mono",monospace}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;counter-reset:s}
.step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative}
.step::before{counter-increment:s;content:counter(s);font-family:"DM Mono",monospace;font-size:.8rem;color:var(--sand);letter-spacing:.08em}
.step h3{font-size:1.15rem;margin:8px 0 6px}
.step p{color:var(--muted);font-size:.94rem}
.b2b{background:var(--plate);color:#eef4f2;border-radius:22px;padding:40px;display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center}
.b2b h2{font-size:clamp(1.7rem,3vw,2.3rem);color:#fff}
.b2b p{color:#b9c7c3;margin-top:12px;max-width:36rem}
.b2b .btn{margin-top:22px}
.b2b table{width:100%;border-collapse:collapse;font-family:"DM Mono",monospace;font-size:.85rem;font-variant-numeric:tabular-nums}
.b2b td{padding:9px 0;border-bottom:1px solid #3a474b}
.b2b td:last-child{text-align:right;color:var(--sand)}
.b2b caption{caption-side:top;text-align:left;font-family:Karla,sans-serif;font-size:.85rem;color:#b9c7c3;padding-bottom:10px}
.nope{display:grid;grid-template-columns:repeat(2,1fr);gap:0 28px}
.nope ul{margin:0;padding:0;list-style:none}
.nope li{padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.nope li b{color:var(--ink);font-weight:500}

/* prototypes */
.legend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 8px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.chip .sw{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(0,0,0,.25);flex:none;display:inline-block}
.sw.fen{background:linear-gradient(135deg,#fff 0,#cfe9e6 100%)}
.sw.plein{background:#9a7b4a}
.sw.blan{background:#efe6d2}.sw.nwar{background:#4a4f52}.sw.kouler{background:linear-gradient(90deg,#c9704a,#d9b37a,#7d6aa8)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
.card .fig{background:var(--surface-2);padding:16px 20px 8px;position:relative}
.card .fig svg{display:block;width:100%;height:auto;transform-origin:50% 88%;transition:transform .9s cubic-bezier(.18,1.4,.35,1)}
.card:hover .fig svg{transform:scaleY(.94) scaleX(1.03)}
.card .num{position:absolute;top:12px;left:16px;font-family:"DM Mono",monospace;font-size:.75rem;color:var(--muted);letter-spacing:.08em}
.card .body{padding:16px 20px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.card h2{font-size:1.4rem;letter-spacing:-.01em}
.card h2 small{display:block;font-family:Karla,sans-serif;font-weight:400;font-size:.92rem;color:var(--muted);margin-top:2px}
.specs{display:flex;flex-wrap:wrap;gap:6px}
.specs span{font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.04em;padding:4px 8px;border-radius:6px;background:var(--surface-2);color:var(--ink)}
.specs span.s-blan{background:#efe6d2;color:#5c4a24}
.specs span.s-nwar{background:#4a4f52;color:#e8e8e8}
.specs span.s-kouler{background:linear-gradient(90deg,#c9704a,#d9b37a,#7d6aa8);color:#fff}
.card p{color:var(--muted);font-size:.95rem}
.card .perso{font-size:.9rem;color:var(--ink)}
.card .perso b{font-weight:500;color:var(--lagoon-ink)}
.card .price{margin-top:auto;display:flex;justify-content:space-between;align-items:baseline;padding-top:12px;border-top:1px dashed var(--line);font-family:"DM Mono",monospace;font-size:.9rem;font-variant-numeric:tabular-nums}
.card .price b{font-weight:500;font-size:1.05rem}
.card .price span{color:var(--muted);font-size:.8rem}
.card .go{font-size:.9rem}
.callout{margin-top:40px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.callout h2{font-size:1.4rem}
.callout p{color:var(--muted);margin-top:6px;max-width:40rem}

/* configurateur */
.conf{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px}
.field{margin-bottom:20px}
.field label,.field .lab{display:block;font-family:Fredoka,sans-serif;font-weight:500;font-size:1rem;margin-bottom:8px}
select,input[type=text],input[type=number]{width:100%;font:inherit;font-size:1rem;padding:10px 12px;border-radius:10px;border:1.5px solid var(--line);background:var(--bg);color:var(--ink)}
.opts{display:flex;gap:8px;flex-wrap:wrap}
.opt{cursor:pointer;position:relative}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt span{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);font-size:.92rem}
.opt input:checked+span{border-color:var(--lagoon);background:var(--lagoon-soft);color:var(--lagoon-ink)}
.opt input:focus-visible+span{outline:3px solid var(--lagoon);outline-offset:2px}
.opt.disabled{opacity:.45;pointer-events:none}
.opt .sw{width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(0,0,0,.25);display:inline-block}
.swatches{display:flex;gap:8px;flex-wrap:wrap}
.swatches .opt span{padding:4px;border-radius:50%;width:34px;height:34px;justify-content:center}
.swatches .opt span i{display:block;width:22px;height:22px;border-radius:50%;border:1px solid rgba(0,0,0,.2)}
.preview{position:sticky;top:86px}
.preview .fig{background:var(--surface-2);border-radius:14px;padding:16px}
.preview .fig svg{display:block;width:100%;max-width:360px;margin:0 auto;height:auto}
.plaque{margin:14px auto 0;max-width:360px;background:var(--plate);color:#fff;border-radius:8px;padding:10px 14px;text-align:center}
.plaque .n{font-family:Fredoka,sans-serif;font-weight:600;font-size:1.15rem;letter-spacing:.02em;min-height:1.4em}
.plaque .o{font-family:"DM Mono",monospace;font-size:.72rem;color:#e2c48a;letter-spacing:.08em;margin-top:2px}
.quote{margin-top:18px;font-family:"DM Mono",monospace;font-size:.86rem;font-variant-numeric:tabular-nums}
.quote div{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);gap:12px}
.quote div.total{border-bottom:0;border-top:2px solid var(--ink);font-size:1rem;margin-top:4px;padding-top:10px}
.quote div.total b{font-weight:500}
.quote .eur{color:var(--muted);font-size:.78rem;text-align:right;padding-top:4px;display:block}
.howto{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:h}
.howto div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.howto div::before{counter-increment:h;content:counter(h);font-family:"DM Mono",monospace;font-size:.8rem;color:var(--sand);letter-spacing:.08em}
.howto h2{font-size:1.15rem;margin:8px 0 6px}
.howto p{color:var(--muted);font-size:.94rem}

/* le sable */
.sands{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:40px}
.sandcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sandcard .swatch{height:110px}
.swatch.blan{background:radial-gradient(circle at 20% 30%,#fff8ea 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,#d9c9a5 0 2px,transparent 3px),radial-gradient(circle at 45% 80%,#cbb98f 0 1.5px,transparent 2.5px),#efe6d2;background-size:14px 14px,18px 18px,11px 11px,auto}
.swatch.nwar{background:radial-gradient(circle at 20% 30%,#8a9096 0 2px,transparent 3px),radial-gradient(circle at 70% 60%,#2b2f33 0 2px,transparent 3px),radial-gradient(circle at 45% 80%,#6a7075 0 1.5px,transparent 2.5px),#4a4f52;background-size:14px 14px,18px 18px,11px 11px,auto}
.swatch.kouler{background:linear-gradient(180deg,#a65e2e 0 14%,#c97b3a 14% 28%,#e0a458 28% 42%,#d9c27a 42% 56%,#8ca57a 56% 72%,#6b8fb0 72% 86%,#8e6fae 86%)}
.sandcard .txt{padding:16px 18px 18px}
.sandcard h2{font-size:1.25rem}
.st{display:inline-block;margin:8px 0 10px;font-family:"DM Mono",monospace;font-size:.72rem;letter-spacing:.06em;padding:3px 8px;border-radius:6px}
.st.ok{background:var(--ok-bg);color:var(--ok-ink)}.st.wait{background:var(--wait-bg);color:var(--wait-ink)}
.sandcard p{color:var(--muted);font-size:.94rem}
.law{display:grid;grid-template-columns:1.1fr .9fr;gap:32px}
.law article{max-width:40rem}
.law h2{font-size:1.4rem;margin-bottom:12px}
.law p{color:var(--muted);margin-bottom:12px}
.law ul{padding-left:18px;color:var(--muted);margin:0 0 12px}
.law li{margin-bottom:6px}
.law li b,.law p b{color:var(--ink);font-weight:500}
.process{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.process h2{font-size:1.2rem;margin-bottom:12px}
.process ol{margin:0;padding-left:20px;color:var(--muted)}
.process li{margin-bottom:10px}
.process li b{color:var(--ink);font-weight:500}
.tag-qr{display:flex;gap:14px;align-items:center;margin-top:20px;padding:14px;border-radius:12px;background:var(--surface-2)}
.tag-qr .qr{width:64px;height:64px;flex:none;background:repeating-linear-gradient(90deg,var(--ink) 0 6px,transparent 6px 12px),repeating-linear-gradient(0deg,var(--ink) 0 6px,transparent 6px 12px);border-radius:6px;opacity:.85}
.tag-qr .t{font-family:"DM Mono",monospace;font-size:.76rem;line-height:1.5;color:var(--ink)}
.tag-qr .t span{color:var(--muted)}
.safety{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.safety div{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.safety h2{font-size:1.15rem;margin-bottom:8px}
.safety p,.safety li{color:var(--muted);font-size:.94rem}
.safety ul{padding-left:18px;margin:8px 0 0}
.faq{display:grid;gap:10px;max-width:70ch}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 18px}
.faq summary{cursor:pointer;font-family:Fredoka,sans-serif;font-weight:500;font-size:1.05rem;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--lagoon);font-size:1.3rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"×"}
.faq details p{color:var(--muted);padding:0 0 16px}

/* pages documentaires */
.doc{max-width:70ch;padding:36px 0 60px}
.doc h1{font-size:clamp(2rem,4vw,2.8rem);margin-bottom:8px}
.doc .lede{color:var(--muted);margin-bottom:28px;font-size:1.05rem}
.doc h2{font-size:1.45rem;margin:32px 0 10px}
.doc h3{font-size:1.15rem;margin:20px 0 6px}
.doc p{margin-bottom:12px}
.doc ul,.doc ol{padding-left:20px;margin:0 0 14px}
.doc li{margin-bottom:6px}
.doc dl{display:grid;grid-template-columns:max-content 1fr;gap:8px 20px;margin:0 0 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.doc dt{color:var(--muted);font-family:"DM Mono",monospace;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;padding-top:3px}
.doc dd{margin:0}
.doc .updated{font-family:"DM Mono",monospace;font-size:.76rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px}
.sitemap{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.sitemap li{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.sitemap a{font-family:Fredoka,sans-serif;font-weight:500;font-size:1.05rem;text-decoration:none}
.sitemap p{color:var(--muted);font-size:.92rem;margin:4px 0 0}
.sitemap ul{list-style:none;padding:10px 0 0 14px;margin:0;display:grid;gap:6px}
.sitemap ul a{font-family:Karla,sans-serif;font-weight:400;font-size:.92rem}

/* pied de page */
.foot{margin-top:40px;border-top:1px solid var(--line);background:var(--surface)}
.foot .cols{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:28px;padding:44px 0 32px}
.foot h2{font-family:Fredoka,sans-serif;font-weight:600;font-size:.95rem;margin:0 0 12px;letter-spacing:.02em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot a{color:var(--muted);text-decoration:none;font-size:.93rem}
.foot a:hover{color:var(--lagoon-ink);text-decoration:underline}
.foot .brandblock p{color:var(--muted);font-size:.93rem;max-width:26rem;margin-top:10px}
.foot address{font-style:normal;color:var(--muted);font-size:.93rem;line-height:1.6}
.foot .bottom{border-top:1px solid var(--line);padding:16px 0 28px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;color:var(--muted);font-size:.82rem}

@media (max-width:900px){
  .hero,.b2b,.conf,.law{grid-template-columns:1fr}
  .pillars,.feat,.steps,.sands,.safety,.howto{grid-template-columns:1fr 1fr}
  .preview{position:static}
  .foot .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .pillars,.feat,.steps,.sands,.nope,.safety,.howto{grid-template-columns:1fr}
  .bar{height:auto;padding:12px 0;flex-direction:column;align-items:flex-start}
  section{padding:40px 0}
  .b2b{padding:26px}
  .duo-card{grid-template-columns:1fr;padding:22px}
  .duo-fig{max-width:220px}
  .doc dl{grid-template-columns:1fr}
  .foot .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion: reduce){
  .hero-squish,.card .fig svg,.feat a,.btn{transition:none}
  .card:hover .fig svg{transform:none}
}


/* mobile-accueil.css */
/* Ti Dodou : accueil et navigation sur mobile et tablette.
   Concaténé après styles.css, donc prioritaire en cascade.
   Couleurs uniquement via les variables du thème. */

/* ------------------------------------------------ en-tête compact */
@media (max-width:700px){
  .top .bar{display:flex;flex-direction:row;align-items:center;gap:6px;height:60px;padding:0 24px}
  .top .brand{font-size:1.45rem;flex:none;padding:4px 0}
  nav.main{
    flex:1 1 auto;min-width:0;display:flex;flex-wrap:nowrap;gap:4px;
    margin:0 -24px 0 0;padding:8px 24px 8px 12px;
    overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
    -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
    -webkit-mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 24px),transparent);
    mask-image:linear-gradient(to right,transparent,#000 12px,#000 calc(100% - 24px),transparent);
  }
  nav.main::-webkit-scrollbar{display:none}
  nav.main a{
    flex:none;white-space:nowrap;display:inline-flex;align-items:center;
    min-height:44px;padding:0 14px;font-size:.95rem;scroll-snap-align:start;
  }
  nav.main a:active{background:var(--surface-2);color:var(--ink)}
  nav.main a.on{color:var(--lagoon-ink);background:var(--lagoon-soft)}
}

/* ------------------------------------------------ accueil, tablette (701 à 900 px) */
@media (min-width:701px) and (max-width:900px){
  .home .hero{grid-template-columns:1.15fr .85fr;gap:24px;padding:40px 0 16px}
  .home .hero-squish{width:min(100%,300px)}
}
@media (max-width:900px){
  .home .cta .btn{flex:1 1 auto;justify-content:center;min-height:48px;padding:10px 18px}
  .home .byline{display:flex;align-items:flex-start;gap:10px;padding:10px 14px 10px 12px;border-radius:18px;line-height:1.35}
  .home .byline .dot{margin-top:.3em}
}
@media (min-width:601px) and (max-width:900px){
  .home .feat{grid-template-columns:repeat(3,1fr);gap:14px}
  .home .feat .txt{flex-wrap:wrap;padding:12px 14px 14px}
  .home .duo-card{grid-template-columns:170px 1fr;gap:22px;padding:24px 26px}
}
@media (min-width:601px) and (max-width:760px){
  .home .pillars{grid-template-columns:1fr;gap:14px}
}
@media (min-width:761px) and (max-width:900px){
  .home .pillars{grid-template-columns:repeat(3,1fr);gap:14px}
  .home .pillar{padding:18px 16px 20px}
  .home .pillar p{font-size:.93rem}
}

/* ------------------------------------------------ accueil, mobile (jusqu'à 700 px) */
@media (max-width:700px){
  .home .hero{gap:12px;padding:28px 0 8px}
  .home .hero .eyebrow{font-size:.72rem;margin-bottom:12px}
  .home .hero h1{font-size:clamp(2.1rem,9.6vw,2.7rem)}
  .home .hero .lede{font-size:1.05rem;margin:16px 0 22px}
  .home .cta{gap:10px}
  .home .byline{margin-top:18px;font-size:.93rem}
  .home .hero-fig{padding-top:8px}
  .home .hero-fig::before{inset:10% 16%}
  .home .hero-squish{width:clamp(220px,68vw,280px);max-width:100%}
  .home .hero-cap{font-size:.86rem;margin-top:4px;max-width:22rem;text-wrap:balance}
}
@media (max-width:480px){
  .home .cta{flex-direction:column}
  .home .cta .btn{width:100%}
  .home .b2b .btn{width:100%;justify-content:center}
}

/* ------------------------------------------------ sections de l'accueil (jusqu'à 600 px) */
@media (max-width:600px){
  .home section{padding:36px 0}
  .home .sec-head{margin-bottom:20px;gap:8px}
  .home .sec-head h2{font-size:clamp(1.55rem,6.8vw,1.9rem)}
  .home .sec-head p{font-size:.97rem}

  /* Milla et Lucy */
  .home .duo{padding:4px 0 32px}
  .home .duo-card{padding:22px 20px 24px;gap:16px;border-radius:18px}
  .home .duo-fig{max-width:168px;gap:2px}
  .home .duo h2{font-size:clamp(1.35rem,6vw,1.6rem)}
  .home .duo p{font-size:.97rem}

  /* piliers */
  .home .pillars{gap:14px}
  .home .pillar{padding:20px 18px 22px}
  .home .pillar .k{width:32px;height:32px;border-radius:10px;margin-bottom:12px}
  .home .pillar h2{font-size:1.2rem}
  .home .pillar p{font-size:.95rem}

  /* trois formes : cartes horizontales */
  .home .feat{gap:12px}
  .home .feat a{display:grid;grid-template-columns:112px 1fr;align-items:stretch}
  .home .feat .fig{padding:10px;display:grid;place-items:center}
  .home .feat .fig svg{width:92px;height:92px}
  .home .feat .txt{flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:14px 16px}
  .home .feat .txt b{font-size:1.15rem}

  /* étapes : numéro en pastille à gauche */
  .home .steps{gap:12px}
  .home .step{display:grid;grid-template-columns:28px 1fr;column-gap:14px;align-items:start;padding:18px}
  .home .step::before{grid-row:1/3;width:28px;height:28px;border-radius:50%;background:var(--sand-soft);display:grid;place-items:center;font-size:.72rem;letter-spacing:0;line-height:1}
  .home .step h3{margin:4px 0 4px;font-size:1.1rem}
  .home .step p{grid-column:2;font-size:.93rem}

  /* hôtels et entreprises */
  .home .b2b{padding:24px 20px 26px;gap:22px;border-radius:18px}
  .home .b2b h2{font-size:clamp(1.45rem,6.4vw,1.8rem)}
  .home .b2b p{font-size:.97rem;margin-top:10px}
  .home .b2b .btn{margin-top:18px}
  .home .b2b table{font-size:.82rem}
  .home .b2b td{padding:10px 0}
  .home .b2b caption{font-size:.82rem;padding-bottom:8px}

  /* ce qu'on ne fait pas */
  .home .nope li{font-size:.95rem}
}

/* ------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  nav.main{scroll-behavior:auto;scroll-snap-type:none}
  nav.main a{transition:none}
}


/* mobile-configurateur.css */
/* Ti Dodou : mobile et tablette pour le configurateur, la page le sable, les pages documentaires et le pied de page.
   Concaténé après styles.css par build.py, donc prioritaire en cascade. Couleurs uniquement via les variables du thème. */

/* ------------------------------------------------------------------ configurateur, toutes largeurs */
/* Sur grand écran, les deux panneaux de l'aperçu (figure et devis) forment visuellement une seule carte, comme avant. */
.preview .panel.apercu{border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:0;padding-bottom:0}
.preview .panel.devis{border-top-left-radius:0;border-top-right-radius:0;border-top:0;padding-top:0}
.panel.apercu{scroll-margin-top:96px}
.devis-title{font-size:1.05rem;margin:18px 0 0}
.devis .quote{margin-top:8px}
.conf svg{max-width:100%}
.conf,.panel,.preview,.quote{min-width:0}

/* Quantité : stepper et repères de tarif */
.qty-wrap{display:flex;align-items:stretch;gap:8px}
.qty-wrap input[type=number]{flex:1;min-width:0;text-align:center;-moz-appearance:textfield;appearance:textfield}
.qty-wrap input::-webkit-outer-spin-button,.qty-wrap input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.qty-btn{flex:none;width:48px;min-height:44px;border-radius:10px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;padding:0;transition:transform .12s}
.qty-btn:hover{border-color:var(--lagoon);color:var(--lagoon-ink)}
.qty-btn:active{transform:scale(.94)}
.qty-presets{display:flex;gap:6px;margin-top:8px}
.qty-presets button{flex:1;min-width:0;min-height:36px;padding:6px 4px;border-radius:999px;border:1.5px solid var(--line);background:var(--bg);color:var(--muted);font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.8rem;font-variant-numeric:tabular-nums;cursor:pointer}
.qty-presets button:hover{border-color:var(--lagoon);color:var(--lagoon-ink)}
.qty-presets button.on{border-color:var(--lagoon);background:var(--lagoon-soft);color:var(--lagoon-ink)}

/* Barre récapitulative : masquée dès que l'aperçu est visible à côté du formulaire */
.confbar{display:none}

/* ------------------------------------------------------------------ pied de page, toutes largeurs */
.foot .brand{font-size:1.5rem;color:var(--ink)}
.foot address{display:grid;gap:2px}
.foot address a{color:var(--muted)}
.foot address a:hover{color:var(--lagoon-ink)}

/* ------------------------------------------------------------------ mobile et tablette (jusqu'à 900 px) */
@media (max-width:900px){
  /* Champs : 16 px minimum pour éviter le zoom automatique sur iOS, cibles de 44 px */
  select,input[type=text],input[type=number]{font-size:max(1rem,16px);min-height:48px;padding:11px 14px}
  .field{margin-bottom:22px}
  .opts{gap:10px}
  .opt span{min-height:44px;padding:10px 14px;font-size:.95rem}
  .opt .sw{width:18px;height:18px}
  .swatches{gap:10px}
  .swatches .opt span{width:44px;height:44px;padding:0}
  .swatches .opt span i{width:28px;height:28px}
  .qty-presets button{min-height:44px}

  /* Devis : lignes qui peuvent passer à la ligne sans casser le tableau */
  .quote{font-size:.88rem}
  .quote div{flex-wrap:wrap}
  .quote div>:first-child{flex:1 1 auto}
  .quote div>:last-child{margin-left:auto;text-align:right}
  .quote div.total{font-size:1.02rem}

  /* Le sable */
  .law{gap:24px}
  .law article{max-width:none}
  .tag-qr .t{min-width:0;overflow-wrap:anywhere}
  .faq{max-width:none}
  .faq details{padding:0 16px}
  .faq summary{padding:14px 0;min-height:56px;align-items:center}
  .faq summary::after{width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:var(--surface-2);font-size:1.25rem}
  .faq details p{padding-bottom:16px}

  /* Pages documentaires */
  .doc{padding:28px 0 48px}
  .doc h2{margin-top:28px}
  .doc dl{padding:16px}
  .doc p,.doc li,.doc dd,.doc a{overflow-wrap:anywhere}
  .sitemap li{padding:10px 16px 12px}
  .sitemap>li>a{display:inline-flex;align-items:center;min-height:44px}
  .sitemap ul{gap:0;padding:2px 0 0 12px}
  .sitemap ul a{display:flex;align-items:center;min-height:44px}
  .sitemap p{margin-top:0}

  /* Pied de page : la marque sur toute la largeur, puis deux colonnes de liens */
  .foot .cols{grid-template-columns:1fr 1fr;gap:12px 24px;padding:36px 0 20px}
  .foot .brandblock{grid-column:1/-1;margin-bottom:10px}
  .foot .brandblock p{max-width:36rem}
  .foot .brand{display:inline-flex;min-height:44px;align-items:center}
  .foot .brandblock p a{display:inline-flex;align-items:center;min-height:44px}
  .foot h2{font-size:1rem;margin-bottom:2px}
  .foot ul{gap:0}
  .foot ul a{display:flex;align-items:center;min-height:44px;padding:2px 0}
  .foot address{gap:0}
  .foot address span{display:flex;align-items:center;min-height:30px}
  .foot address a{display:flex;align-items:center;min-height:44px}
  .foot .bottom{flex-direction:column;gap:6px;padding:16px 0 24px}
}

/* ------------------------------------------------------------------ tablette, deux colonnes (601 à 900 px) */
@media (min-width:601px) and (max-width:900px){
  /* Pas de carte orpheline quand trois cartes passent sur deux colonnes */
  .sands>.sandcard:last-child:nth-child(odd){grid-column:1/-1;display:grid;grid-template-columns:180px 1fr}
  .sands>.sandcard:last-child:nth-child(odd) .swatch{height:100%;min-height:150px}
  .safety>div:last-child:nth-child(odd){grid-column:1/-1}
  .howto>div:last-child:nth-child(odd){grid-column:1/-1}
}

/* Dès 640 px, le formulaire et l'aperçu tiennent côte à côte, l'aperçu reste collant */
@media (min-width:640px) and (max-width:900px){
  .conf{grid-template-columns:1fr 1fr;gap:20px}
  .preview{position:sticky;top:86px}
  .panel{padding:20px}
  .preview .fig{padding:12px}
}

/* ------------------------------------------------------------------ mobile (jusqu'à 639 px) */
@media (max-width:639px){
  .conf{gap:16px}
  .panel{padding:18px 16px}
  /* Le conteneur de l'aperçu s'efface : ses deux panneaux deviennent des cartes de la grille, réordonnables */
  .preview{display:contents}
  .preview .panel.apercu{order:-1;border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 14px}
  .preview .panel.devis{order:1;border:1px solid var(--line);border-radius:var(--radius);padding:18px 16px 20px}
  .preview .fig{padding:8px}
  .preview .fig svg{max-width:210px}
  .plaque{margin-top:10px;padding:8px 12px}
  .plaque .n{font-size:1.05rem}
  .plaque .o{overflow-wrap:anywhere}
  .devis-title{margin-top:0}

  /* Barre récapitulative collante : miniature, modèle, total et bouton de devis restent visibles pendant la saisie */
  .confbar{display:flex;order:0;position:sticky;bottom:10px;z-index:15;align-items:center;gap:8px;
    padding:6px 8px 6px 6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));
    background:var(--surface);background:color-mix(in srgb,var(--surface) 94%,transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border:1px solid var(--line);border-radius:16px;box-shadow:0 8px 28px color-mix(in srgb,var(--ink) 16%,transparent)}
  .confbar-fig{flex:none;width:48px;height:48px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden;text-decoration:none}
  .confbar-fig svg{width:44px;height:44px;display:block}
  .confbar-txt{flex:1;min-width:0;display:grid;gap:1px}
  .confbar-txt b{font-family:Fredoka,"Trebuchet MS",sans-serif;font-weight:600;font-size:1.05rem;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .confbar-txt span{font-family:"DM Mono",ui-monospace,Menlo,monospace;font-size:.74rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .confbar-btn{flex:none;padding:9px 14px;font-size:.92rem;min-height:44px}
}
/* Sous 430 px, le libellé du bouton passe sur deux lignes pour laisser la place au total */
@media (max-width:429px){
  .confbar-btn{white-space:normal;text-align:center;line-height:1.15;padding:6px 12px;font-size:.9rem;max-width:6.6em}
}

/* ------------------------------------------------------------------ mobile (jusqu'à 600 px) */
@media (max-width:600px){
  .sec-head{margin-bottom:22px}

  /* Le sable */
  .sands{gap:14px;margin-bottom:32px}
  .sandcard .swatch{height:84px}
  .sandcard .txt{padding:14px 16px 16px}
  .process{padding:18px 16px}
  .process ol{padding-left:18px}
  .tag-qr{align-items:flex-start;padding:12px}
  .tag-qr .qr{width:56px;height:56px}
  .safety div{padding:18px 16px}

  /* Pages documentaires : listes de définitions en une colonne, un filet entre chaque entrée */
  .doc .lede{font-size:1rem}
  .doc dl{gap:0;padding:6px 16px}
  .doc dt{padding-top:12px}
  .doc dd{padding:2px 0 12px}
  .doc dd+dt{border-top:1px solid var(--line)}
}

/* ------------------------------------------------------------------ très petits écrans (jusqu'à 359 px) */
@media (max-width:359px){
  .foot .cols{grid-template-columns:1fr;gap:8px}
}

/* ------------------------------------------------------------------ mouvement réduit */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .qty-btn,.confbar,.confbar-btn{transition:none}
  .qty-btn:active{transform:none}
}


/* mobile-prototypes.css */
/* Ti Dodou : page des prototypes sur mobile et tablette.
   Surcharges de styles.css, toutes limitées à la section .protos de prototypes.html. */

/* Lien « Personnaliser ce modèle » : vraie cible tactile (44 px minimum) sur tablette, mobile et écrans tactiles */
@media (max-width:1024px), (pointer:coarse){
  .protos .card .go{display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:999px;border:1.5px solid var(--lagoon);background:var(--surface);color:var(--lagoon-ink);font-family:Fredoka,"Trebuchet MS",sans-serif;font-weight:600;font-size:.95rem;line-height:1.2;text-align:center;text-decoration:none;-webkit-tap-highlight-color:transparent;transition:transform .15s,background-color .15s}
  .protos .card .go:active{transform:scale(.98);background:var(--lagoon-soft)}
}

/* Tactile : pas de survol qui reste collé après un toucher, mais un léger écrasement pendant l'appui sur l'illustration */
@media (hover:none){
  .protos .card:hover .fig svg{transform:none}
  .protos .card .fig{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
  .protos .card .fig:active svg{transform:scaleY(.9) scaleX(1.05);transition-duration:.12s}
}

/* Mobile et petites tablettes : en dessous de la largeur où la grille passe à deux colonnes */
@media (max-width:669px){
  /* En-tête de section : sur-titre, titre et paragraphe empilés */
  .protos .sec-head{flex-direction:column;align-items:stretch;gap:12px;margin-bottom:20px}
  .protos .sec-head h1{font-size:clamp(1.55rem,7vw,1.9rem)}
  .protos .sec-head p{max-width:none}
  .protos .eyebrow{margin-bottom:10px}

  /* Légende : une seule rangée qui défile horizontalement, fondu sur les deux bords */
  .protos .legend{flex-wrap:nowrap;gap:8px;margin:-6px -24px 20px;padding:6px 0 6px 24px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity;scroll-padding-left:24px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 44px),transparent)}
  .protos .legend::-webkit-scrollbar{display:none}
  .protos .legend::after{content:"";flex:none;width:36px}
  .protos .chip{flex:none;white-space:nowrap;scroll-snap-align:start}

  /* Cartes : illustration à gauche, titre et specs à droite, texte pleine largeur dessous, prix puis bouton */
  .protos .grid{grid-template-columns:1fr;gap:14px}
  .protos .card{display:grid;grid-template-columns:clamp(96px,38%,200px) minmax(0,1fr);grid-template-areas:"fig head" "fig specs" "desc desc" "perso perso" "price price" "go go";column-gap:14px;row-gap:8px;padding:14px;align-items:start;align-content:start}
  .protos .card .body{display:contents}
  .protos .card .fig{grid-area:fig;align-self:start;padding:8px;border-radius:12px}
  .protos .card .num{top:6px;left:9px;font-size:.66rem}
  .protos .card h2{grid-area:head;align-self:end;font-size:1.22rem}
  .protos .card h2 small{font-size:.88rem}
  .protos .card .specs{grid-area:specs;align-self:start;min-width:0}
  .protos .card .body > p:not(.perso){grid-area:desc;font-size:.92rem}
  .protos .card .body > .perso{grid-area:perso;font-size:.88rem}
  .protos .card .price{grid-area:price;margin-top:4px}
  .protos .card .go{grid-area:go}

  /* Bloc final : bouton pleine largeur */
  .protos .callout{flex-direction:column;align-items:stretch;gap:16px;margin-top:28px;padding:20px}
  .protos .callout .btn{width:100%;justify-content:center;min-height:48px}
}

/* Très petits écrans (320 à 360 px) */
@media (max-width:360px){
  .protos .eyebrow{font-size:.72rem}
  .protos .card{padding:12px;column-gap:12px}
  .protos .card h2{font-size:1.15rem}
}

/* Mouvement réduit : aucune animation ni déformation ajoutée par cette feuille */
@media (prefers-reduced-motion:reduce){
  .protos .card .go{transition:none}
  .protos .card .go:active{transform:none}
  .protos .card .fig:active svg{transform:none;transition:none}
}