/* ---- SD Serrurerie — styles des pages Conseils ---- */
:root{
  --ink:#141109;
  --ink-soft:#1D1810;
  --paper:#EDEAE0;
  --paper-2:#F7F5EE;
  --yellow:#FFC629;
  --yellow-soft:#FFD65C;
  --steel:#57503E;
  --brass:#8C6A3F;
  --hair: rgba(23,20,15,0.14);
  --hair-dark: rgba(237,234,224,0.16);
  --maxw: 1120px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; background:var(--paper); overflow-x:hidden;}
body{overflow-x:hidden;
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:'Oswald', sans-serif; font-weight:700; line-height:1.12; margin:0; letter-spacing:0.2px;}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}

/* ---- Header ---- */
header{position:sticky; top:0; z-index:50; background:var(--ink); border-bottom:1px solid var(--hair-dark);}
header .wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; gap:16px;}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--paper-2);}
.brand .mark{width:42px; height:auto; flex:none;}
.brand-name{font-family:'Oswald', sans-serif; font-weight:600; font-size:1.05rem; color:var(--paper-2); letter-spacing:0.3px;}
.brand-name span{display:block; font-family:'Work Sans',sans-serif; font-weight:400; font-size:0.7rem; color:var(--yellow-soft); letter-spacing:0.4px;}
.head-nav{display:flex; align-items:center; gap:26px; margin-left:auto; margin-right:22px;}
.head-nav a{color:var(--paper-2); text-decoration:none; font-size:0.95rem; font-weight:500; padding-bottom:4px; border-bottom:2px solid transparent; transition:color 0.15s ease, border-color 0.15s ease;}
.head-nav a:hover{color:var(--yellow-soft); border-color:var(--yellow);}
@media (max-width:720px){
  header .wrap{flex-wrap:wrap; row-gap:0;}
  .head-nav{order:3; width:100%; margin:0; padding-top:12px; margin-top:12px; gap:20px;
    justify-content:center; border-top:1px solid var(--hair-dark);}
}

.call-btn{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--yellow); color:var(--ink);
  font-family:'Oswald', sans-serif; font-weight:700; font-size:1rem;
  padding:11px 20px; text-decoration:none; border-radius:5px;
  white-space:nowrap; box-shadow:0 4px 14px rgba(255,198,41,0.28);
  transition:background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.call-btn:hover{background:var(--yellow-soft); transform:translateY(-1px); box-shadow:0 8px 20px rgba(255,198,41,0.36);}
.call-btn svg{width:18px; height:18px; flex:none;}

/* ---- Bandeau de tête ---- */
.page-hero{background:var(--ink); color:var(--paper-2); border-bottom:1px solid var(--hair-dark);}
.page-hero .wrap{padding-top:clamp(44px,7vw,76px); padding-bottom:clamp(44px,7vw,76px);}

/* ---- Variante avec photo de fond (opt-in via class "has-photo") ---- */
.page-hero.has-photo{position:relative; overflow:hidden;}
.page-hero.has-photo .hero-media{position:absolute; inset:0; z-index:0;}
.page-hero.has-photo .hero-media img{width:100%; height:100%; object-fit:contain; object-position:100% top; opacity:0.9;}
.page-hero.has-photo .hero-media::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    var(--ink) 0%, var(--ink) 26%,
    rgba(23,20,15,0.6) 46%,
    rgba(23,20,15,0.22) 66%,
    rgba(23,20,15,0.05) 82%,
    rgba(23,20,15,0) 100%);
}
.page-hero.has-photo .wrap{position:relative; z-index:2;}
.page-hero.has-photo h1,
.page-hero.has-photo .lede{text-shadow:0 2px 12px rgba(0,0,0,0.5);}
.kicker{font-family:'Work Sans',sans-serif; font-weight:600; color:var(--yellow-soft); margin:0 0 12px; font-size:0.95rem;}
.page-hero h1{font-size:clamp(2rem, 4.8vw, 3.2rem); max-width:20ch; color:#fff;}
.page-hero .lede{margin-top:20px; max-width:56ch; color:var(--paper); font-size:1.1rem;}
.crumb{margin-bottom:18px; font-size:0.9rem; color:var(--paper);}
.crumb a{color:var(--yellow-soft); text-decoration:none;}
.crumb a:hover{text-decoration:underline;}

.syndic-link{margin:22px 0 0;}
.syndic-link a{font-family:'Oswald',sans-serif; font-weight:600; font-size:1.05rem; text-decoration:none; border-bottom:2px solid var(--yellow); padding-bottom:2px;}

/* ---- Tableaux de tarifs ---- */
.table-wrap{overflow-x:auto; margin:22px 0 34px; border-radius:8px; border:1px solid var(--hair);}
.price-table{width:100%; border-collapse:collapse; font-size:1rem;}
.price-table th,.price-table td{text-align:left; padding:13px 16px; border-bottom:1px solid var(--hair); word-break:break-word;}
.price-table thead th{background:var(--ink); color:var(--paper-2); font-family:'Oswald',sans-serif; font-weight:600; border-bottom:none;}
.price-table .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums;}
.price-table .ttc{font-weight:600;}
.price-table tbody tr:nth-child(even){background:var(--paper-2);}
.price-table tr.total td{border-top:2px solid var(--ink); border-bottom:none; background:var(--paper);}

/* ---- Switch Prix HT / Prix TTC : masque une colonne entière, gagne de la place partout ---- */
.price-toggle{
  display:inline-flex; width:auto; max-width:100%;
  border:1.5px solid var(--ink); border-radius:999px;
  overflow:hidden; margin:20px 0 6px;
  position:relative; z-index:1;
}
.price-toggle-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-block; flex:0 0 auto;
  border:none; margin:0; border-radius:0;
  background:var(--paper-2); color:var(--ink);
  font-family:'Oswald', sans-serif; font-weight:600; font-size:0.92rem;
  line-height:1.2;
  padding:10px 20px; cursor:pointer;
  transition:background 0.15s ease, color 0.15s ease;
}
.price-toggle-btn + .price-toggle-btn{border-left:1.5px solid var(--ink);}
.price-toggle-btn[aria-pressed="true"]{background:var(--yellow); color:var(--ink);}
.price-toggle-btn[aria-pressed="false"]{background:transparent;}
.price-toggle-btn[aria-pressed="false"]:hover{background:var(--paper);}

body.price-mode-ttc .price-table .col-ht{display:none;}
body.price-mode-ht .price-table .col-ttc{display:none;}

/* ---- Familles d'articles ---- */
.group-head{margin:0 0 26px;}
.group-head:not(:first-child){margin-top:0;}
.group-head h2{font-size:clamp(1.5rem,3vw,2rem); padding-bottom:12px; border-bottom:3px solid var(--yellow); display:inline-block;}
.group-head p{margin:14px 0 0; color:var(--steel); max-width:52ch;}
.card-grid + .group-head{margin-top:56px;}

/* ---- Liste des articles ---- */
main{padding:clamp(48px,7vw,80px) 0;}
.card-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px;}
.card-grid.grid-solo{max-width:392px;}
.card{
  background:var(--paper-2); display:flex; flex-direction:column;
  border:1px solid var(--hair); border-radius:8px; overflow:hidden;
  transition:transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.card:hover{transform:translateY(-4px); box-shadow:0 16px 32px rgba(20,17,9,0.12); border-color:var(--yellow);}
.card-media{border-bottom:1px solid var(--hair); background:var(--ink);}
.card-media img{width:100%; height:210px; object-fit:cover;}
.card-body{padding:26px; display:flex; flex-direction:column; gap:12px; flex:1;}
.card-tag{font-size:0.82rem; font-weight:600; color:var(--brass); text-transform:uppercase; letter-spacing:0.6px;}
.card h2{font-size:1.25rem;}
.card p{margin:0; color:var(--steel);}
.card .more{margin-top:auto; padding-top:8px; font-family:'Oswald',sans-serif; font-weight:600; color:var(--ink); text-decoration:none; border-bottom:2px solid var(--yellow); align-self:flex-start;}
.card a.card-link{text-decoration:none; color:inherit;}
.card a.card-link:hover h2{color:var(--brass);}

/* ---- Corps d'article ---- */
.article{max-width:44rem;}
.article h2{font-size:clamp(1.4rem,2.8vw,1.9rem); margin-top:44px; margin-bottom:14px;}
.article h3{font-size:1.15rem; margin-top:28px; margin-bottom:8px;}
.article p{margin:0 0 16px;}
.article ul,.article ol{margin:0 0 18px; padding-left:22px;}
.article li{margin-bottom:8px;}
.article strong{font-weight:600;}
.lead-in{font-size:1.12rem; color:var(--steel); border-left:3px solid var(--yellow); padding-left:18px; margin-bottom:8px;}
.zone-note-inline{font-size:0.9rem; color:var(--steel); margin-top:-10px;}

.shot{margin:30px 0; border:1px solid var(--hair); border-radius:8px; overflow:hidden;}
.shot{background:var(--ink); text-align:center;}
.shot img{width:auto; max-width:100%; max-height:660px; height:auto; margin:0 auto;}
.shot figcaption{padding:12px 16px; font-size:0.9rem; color:var(--steel); background:var(--paper-2); border-top:1px solid var(--hair);}

.note{background:var(--paper-2); border:1px solid var(--hair); border-radius:8px; padding:22px 24px; margin:30px 0;}
.note h3{margin-top:0; font-size:1.05rem;}
.note p:last-child{margin-bottom:0;}

/* ---- Appel à l'action ---- */
.cta{background:var(--ink); color:var(--paper-2); margin-top:56px;}
.cta .wrap{padding:clamp(34px,5vw,54px) 24px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;}
.cta h2{color:var(--yellow); font-size:clamp(1.4rem,3vw,2rem); max-width:22ch;}
.cta p{margin:10px 0 0; color:var(--paper); max-width:44ch;}
.cta .call-btn{font-size:1.12rem; padding:15px 26px;}

/* ---- Pied de page ---- */
footer{background:var(--ink-soft); color:var(--paper); border-top:1px solid var(--hair-dark);}
footer .wrap{padding:24px; font-size:0.86rem; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px 24px;}
.legal-links{display:flex; flex-wrap:wrap; gap:8px 18px;}
.legal-links a{color:var(--yellow-soft); text-decoration:none;}
.legal-links a:hover{text-decoration:underline;}

.social-links{display:flex; align-items:center; gap:10px;}
.social-links a{
  display:flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--hair-dark); color:var(--paper-2);
  transition:background 0.15s ease, color 0.15s ease;
}
.social-links a:hover{background:var(--yellow); color:var(--ink);}
.social-links svg{width:17px; height:17px;}

a:focus-visible, button:focus-visible{outline:3px solid var(--brass); outline-offset:2px;}

/* ---------- Bouton WhatsApp flottant ---------- */
.wa-float{
  position:fixed; right:20px; bottom:20px; z-index:400;
  display:inline-flex; align-items:center; gap:10px;
  background:#25D366; color:#fff;
  padding:13px 22px 13px 16px; border-radius:999px;
  font-family:'Oswald', sans-serif; font-weight:600; font-size:1.02rem;
  text-decoration:none; letter-spacing:0.3px;
  box-shadow:0 10px 26px rgba(0,0,0,0.30);
  transition:background 0.15s ease, transform 0.15s ease;
}
.wa-float:hover{background:#1EBE5A; transform:translateY(-2px); color:#fff;}
.wa-float:focus-visible{outline:3px solid #fff; outline-offset:3px;}
.wa-float svg{width:30px; height:30px; flex:none;}
.wa-float::after{
  content:""; position:absolute; inset:0; border-radius:999px; pointer-events:none;
  animation:waPulse 2.6s ease-out infinite;
}
@keyframes waPulse{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,0.55);}
  70%{box-shadow:0 0 0 18px rgba(37,211,102,0);}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0);}
}
@media (prefers-reduced-motion: reduce){ .wa-float::after{animation:none;} }
@media (max-width:640px){
  .wa-float{right:14px; bottom:14px; padding:15px; gap:0;}
  .wa-float .wa-label{display:none;}
}

/* ---------- Logo officiel ---------- */
.brand{
  display:inline-flex; align-items:center; flex:none;
  background:var(--paper-2); padding:7px 12px; border-radius:5px;
  text-decoration:none; gap:0;
  transition:background 0.15s ease;
}
.brand:hover{background:#fff;}
.brand img{width:168px; height:auto; display:block;}
footer .brand{padding:6px 10px;}
footer .brand img{width:140px;}
@media (max-width:640px){
  .brand img{width:132px;}
  footer .brand img{width:120px;}
}