/* ============================================================
   Volets Roulants Bordeaux — feuille de style
   Palette : ardoise + rouge bordeaux + sable
   ============================================================ */
:root{
  --slate:#1c3d4f;        /* bleu ardoise (métal des volets) */
  --slate-900:#122a37;
  --slate-700:#27506680;
  --bordeaux:#9e1b32;     /* rouge bordeaux : urgence + CTA */
  --bordeaux-dark:#7c1426;
  --sand:#f6f3ee;         /* fond chaud */
  --paper:#ffffff;
  --ink:#1a2228;
  --muted:#5c6b73;
  --line:#e6ddd0;
  --steel:#c8d3d8;        /* gris lame */
  --ok:#1f7a4d;
  --radius:14px;
  --shadow:0 1px 2px rgba(18,42,55,.06), 0 8px 30px rgba(18,42,55,.08);
  --maxw:1120px;
  --slat: repeating-linear-gradient(180deg,
            rgba(255,255,255,.06) 0px,
            rgba(255,255,255,.06) 7px,
            rgba(0,0,0,.08) 7px,
            rgba(0,0,0,.08) 9px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--ink);background:var(--sand);line-height:1.6;font-size:17px;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:"Bricolage Grotesque","Inter",sans-serif;line-height:1.1;letter-spacing:-.01em;color:var(--slate);font-weight:700}
h1{font-size:clamp(1.9rem,5vw,3.1rem);margin:.2em 0 .35em}
h2{font-size:clamp(1.4rem,3.4vw,2.05rem);margin:1.6em 0 .5em}
h3{font-size:1.18rem;margin:1.4em 0 .4em;color:var(--slate-900)}
p{margin:.6em 0}
a{color:var(--bordeaux);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
.eyebrow{font-family:"Bricolage Grotesque",sans-serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:.72rem;font-weight:600;color:var(--bordeaux)}
.muted{color:var(--muted)}
.center{text-align:center}

/* ---------- boutons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:600;border-radius:999px;padding:.8em 1.4em;border:1.5px solid transparent;
  cursor:pointer;transition:.15s;font-size:1rem;text-decoration:none}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn-call{background:var(--bordeaux);color:#fff;box-shadow:0 6px 18px rgba(158,27,50,.32)}
.btn-call:hover{background:var(--bordeaux-dark);color:#fff}
.btn-ghost{background:transparent;color:var(--slate);border-color:var(--steel)}
.btn-ghost:hover{border-color:var(--slate);color:var(--slate)}
.btn-light{background:#fff;color:var(--slate)}
.btn-lg{padding:1em 1.8em;font-size:1.12rem}

/* ---------- header ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(246,243,238,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;gap:16px;height:68px}
.brand{display:flex;align-items:center;gap:11px;font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700;color:var(--slate);font-size:1.08rem}
.brand:hover{text-decoration:none}
.logo{width:38px;height:38px;border-radius:9px;background:var(--slate);position:relative;overflow:hidden;flex:0 0 auto}
.logo::after{content:"";position:absolute;inset:0;background:var(--slat)}
nav.main{margin-left:auto;display:flex;gap:18px;align-items:center}
nav.main a{color:var(--slate);font-weight:500;font-size:.95rem}
nav.main a:hover{color:var(--bordeaux);text-decoration:none}
.top .btn-call{padding:.6em 1.1em;font-size:.95rem}
nav.main a.btn-call{color:#fff;white-space:nowrap}
nav.main a.btn-call:hover{color:#fff}
.burger{display:none;margin-left:auto;background:none;border:0;font-size:1.6rem;color:var(--slate);cursor:pointer}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--slate);color:#eaf1f4;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:var(--slat);opacity:.5}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;
  background:repeating-linear-gradient(90deg,var(--bordeaux) 0 28px,transparent 28px 34px)}
.hero .wrap{position:relative;padding:64px 20px 70px;display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
.hero h1{color:#fff}
.hero .lead{font-size:1.15rem;color:#cddbe1;max-width:46ch}
.hero .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.hero .phone{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:700;
  font-size:clamp(1.6rem,4vw,2.1rem);color:#fff;margin-top:6px}
.hero .phone span{color:#ffd1d9;font-size:.8rem;display:block;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.badge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.4em .85em;font-size:.82rem;color:#dceaef}
.hero-card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--radius);
  padding:24px;backdrop-filter:blur(2px)}
.hero-card h3{color:#fff;margin-top:0}
.hero-card ul{list-style:none;padding:0;margin:.4em 0 0}
.hero-card li{padding:.42em 0 .42em 28px;position:relative;color:#dceaef;border-bottom:1px solid rgba(255,255,255,.09)}
.hero-card li:last-child{border-bottom:0}
.hero-card li::before{content:"";position:absolute;left:0;top:.95em;width:14px;height:8px;
  border-left:2px solid var(--bordeaux);border-bottom:2px solid var(--bordeaux);transform:rotate(-45deg)}

/* ---------- sections ---------- */
section{padding:18px 0}
.section-pad{padding:46px 0}
.lead-block{max-width:74ch}
.grid{display:grid;gap:20px}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:var(--shadow)}
.card h3{margin-top:0}
.card .ico{width:42px;height:42px;border-radius:10px;background:var(--sand);display:grid;place-items:center;
  font-size:1.3rem;margin-bottom:12px;border:1px solid var(--line)}

/* liste à coches */
ul.check{list-style:none;padding:0;margin:1em 0}
ul.check li{position:relative;padding:.4em 0 .4em 30px;border-bottom:1px solid var(--line)}
ul.check li:last-child{border-bottom:0}
ul.check li::before{content:"";position:absolute;left:4px;top:.85em;width:13px;height:7px;
  border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg)}

/* bandeau urgence / appel */
.callband{background:var(--slate);color:#fff;border-radius:var(--radius);padding:30px;text-align:center;
  position:relative;overflow:hidden}
.callband::before{content:"";position:absolute;inset:0;background:var(--slat);opacity:.4}
.callband > *{position:relative}
.callband h2{color:#fff;margin-top:0}
.callband .phone{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;font-size:2rem;color:#fff}

/* fil d'ariane */
.crumbs{font-size:.85rem;color:var(--muted);padding:14px 0 0}
.crumbs a{color:var(--muted)}
.crumbs a:hover{color:var(--bordeaux)}

/* puces villes / mots-clés */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0}
.chip{display:inline-block;background:var(--paper);border:1px solid var(--line);border-radius:999px;
  padding:.42em .9em;font-size:.9rem;color:var(--slate)}
.chip:hover{border-color:var(--bordeaux);color:var(--bordeaux);text-decoration:none}
.chip.new{border-style:dashed}

.kw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.kw-grid a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:10px;
  padding:.7em .9em;color:var(--slate);font-weight:500;font-size:.95rem}
.kw-grid a:hover{border-color:var(--bordeaux);color:var(--bordeaux);text-decoration:none}
.kw-cat{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--bordeaux);display:block;font-weight:600}

/* marques */
.brands{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:10px}
.brands span{background:#fff;border:1px solid var(--line);border-radius:8px;padding:.35em .8em;
  font-size:.82rem;color:var(--slate);font-weight:500}

/* formulaire */
form.contact{display:grid;gap:14px;max-width:560px}
form.contact label{font-weight:600;font-size:.9rem;color:var(--slate);display:block;margin-bottom:4px}
form.contact input,form.contact textarea,form.contact select{
  width:100%;padding:.75em .9em;border:1px solid var(--steel);border-radius:10px;font:inherit;background:#fff}
form.contact input:focus,form.contact textarea:focus{outline:2px solid var(--bordeaux);border-color:var(--bordeaux)}

/* footer */
footer{background:var(--slate-900);color:#bcd0d8;margin-top:50px}
footer::before{content:"";display:block;height:8px;background:var(--slat);opacity:.5}
footer .wrap{padding:44px 20px 28px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
footer h4{font-family:"Bricolage Grotesque",sans-serif;color:#fff;font-size:1rem;margin:0 0 12px}
footer a{color:#bcd0d8}
footer a:hover{color:#fff}
footer ul{list-style:none;padding:0;margin:0}
footer li{padding:3px 0;font-size:.92rem}
.foot-bottom{border-top:1px solid rgba(255,255,255,.1);text-align:center;padding:16px;font-size:.82rem;color:#8fa9b3}
.foot-phone{font-family:"Bricolage Grotesque",sans-serif;font-weight:700;color:#fff;font-size:1.4rem}

/* barre d'appel mobile */
.callbar{display:none;position:fixed;bottom:0;left:0;right:0;z-index:60;
  background:var(--slate);border-top:1px solid rgba(255,255,255,.12);padding:8px;gap:8px}
.callbar a{flex:1;justify-content:center}

/* divers */
.note{background:#fff8e8;border:1px solid #f0e2b8;border-radius:10px;padding:12px 16px;font-size:.92rem;color:#6b5a1e}
.tag-new{background:var(--bordeaux);color:#fff;font-size:.62rem;border-radius:6px;padding:.15em .5em;
  vertical-align:middle;letter-spacing:.08em;font-weight:600}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr;padding:40px 20px 54px}
  .cols-3{grid-template-columns:1fr}
  .cols-2{grid-template-columns:1fr}
  footer .wrap{grid-template-columns:1fr 1fr}
  nav.main{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;
    background:var(--sand);border-bottom:1px solid var(--line);padding:14px 20px;gap:14px}
  nav.main.open{display:flex}
  nav.main .btn-call{display:none}
  .burger{display:block}
  .top .btn-call{display:none}
  .callbar{display:flex}
  body{padding-bottom:64px}
  .kw-grid{grid-template-columns:1fr}
}
@media (max-width:480px){
  footer .wrap{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
:focus-visible{outline:3px solid var(--bordeaux);outline-offset:2px}