/* collectif-core — hub SEO v3, aligné sur la charte de la landing page
   (:root identique, cartes charbon avec accent --ac par artisan) */
:root{
  --rouge:#C41020;--rouge2:#A00D1A;--noir:#111;--charbon:#1E1E1E;
  --gris:#6B6B6B;--gris-clair:#E8E5E0;--creme:#F8F6F2;--blanc:#fff;
  --fh:'Archivo Black',sans-serif;--fb:'DM Sans',sans-serif;
  --ac:var(--rouge);
}
*{box-sizing:border-box}
body{margin:0;font-family:var(--fb);color:#1A1A1A;background:var(--creme);line-height:1.7}
.wrap{max-width:1080px;margin:0 auto;padding:0 1.5rem}
a{color:var(--rouge)}
h2,h3{font-family:var(--fh);line-height:1.1;color:#1A1A1A}

/* ── Header (noir, comme la landing) ── */
.hub-header{background:var(--noir);color:var(--blanc)}
.hub-header .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.75rem;padding-top:.8rem;padding-bottom:.8rem}
.brand{display:flex;align-items:center;gap:.6rem;color:var(--blanc);text-decoration:none;font-family:var(--fh);font-size:.9375rem;text-transform:uppercase}
.hub-nav{display:flex;gap:1.25rem;align-items:center;flex-wrap:wrap}
.hub-nav a{color:rgba(255,255,255,.75);text-decoration:none;font-weight:600;font-size:.8125rem;text-transform:uppercase;letter-spacing:.05rem;transition:color .2s}
.hub-nav a:hover{color:var(--blanc)}
.btn-tel{background:var(--rouge);color:var(--blanc)!important;padding:.5rem 1rem;transition:background .2s;text-decoration:none;font-weight:700;font-size:.8125rem}
.btn-tel:hover{background:var(--rouge2)}
.hub-burger-cb,.hub-burger,.btn-tel-m{display:none}
@media(max-width:680px){
  .hub-header .wrap{flex-wrap:wrap;row-gap:0}
  .btn-tel-m{display:inline-block;margin-left:auto}
  .hub-burger{display:flex;flex-direction:column;justify-content:center;gap:4px;cursor:pointer;padding:.6rem .5rem;margin-left:.4rem}
  .hub-burger span{display:block;width:21px;height:2px;background:var(--blanc);transition:transform .2s,opacity .2s}
  .hub-burger-cb:checked ~ .hub-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
  .hub-burger-cb:checked ~ .hub-burger span:nth-child(2){opacity:0}
  .hub-burger-cb:checked ~ .hub-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
  .hub-nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:0;padding:.25rem 0 .8rem}
  .hub-nav a{padding:.75rem .25rem;font-size:.875rem;border-bottom:1px solid rgba(255,255,255,.08)}
  .hub-nav .btn-tel{display:none}
  .hub-nav a:nth-last-child(2){border-bottom:0}
  .hub-burger-cb:checked ~ .hub-nav{display:flex}
}

/* ── Bandeau de page (charbon + accent) ── */
.hero{background:var(--charbon);color:var(--blanc);padding:3rem 0 2.6rem;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac)}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 10%,transparent),transparent 55%);pointer-events:none}
.hero .wrap{position:relative;z-index:1}
.s-tag{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.2rem;color:var(--ac);margin-bottom:1.2rem;display:flex;align-items:center;gap:.625rem}
.s-tag::before{content:'';width:40px;height:2px;background:currentColor}
.hero h1{font-family:var(--fh);font-size:clamp(1.6rem,3.6vw,2.7rem);text-transform:uppercase;line-height:.98;margin:.2rem 0 .9rem;color:var(--blanc)}
.hero .intro{color:rgba(255,255,255,.55);font-size:1rem;max-width:640px;margin:0}
.hero .art-initials{margin-bottom:1.1rem}

/* ── Fil d'Ariane ── */
.crumbs{font-size:.8125rem;padding-top:1.1rem;color:var(--gris)}
.crumbs a{color:var(--gris);text-decoration:none}
.crumbs a:hover{color:var(--rouge)}
.crumbs span[aria-current]{color:#1A1A1A;font-weight:600}

main{padding-bottom:3.5rem}
main h2{font-size:clamp(1.15rem,2.4vw,1.55rem);text-transform:uppercase;margin:2.4rem 0 .9rem}
.grille{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1px;background:var(--gris-clair);border:1px solid var(--gris-clair);margin:1.6rem 0}

/* ── Carte artisan = .art-card de la landing ── */
.art-card{background:var(--charbon);padding:1.6rem 1.4rem;text-decoration:none;display:block;position:relative;overflow:hidden;transition:background .25s}
.art-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 8%,transparent),transparent 60%);opacity:0;transition:opacity .25s}
.art-card:hover{background:#252525}
.art-card:hover::before{opacity:1}
.art-accent{position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac)}
.art-initials{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.05);border:2px solid var(--ac);display:flex;align-items:center;justify-content:center;font-family:var(--fh);font-size:.75rem;color:var(--ac);margin-bottom:1rem;position:relative}
.art-name{font-family:var(--fh);font-size:.9375rem;text-transform:uppercase;color:var(--blanc);margin-bottom:.125rem;position:relative}
.art-ent{font-size:.625rem;font-weight:700;text-transform:uppercase;letter-spacing:.1rem;color:var(--ac);margin-bottom:.75rem;position:relative}
.art-met{font-size:.8125rem;color:rgba(255,255,255,.35);line-height:1.5;margin-bottom:1rem;position:relative}
.art-link{font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06rem;color:var(--ac);opacity:.6;transition:opacity .2s;position:relative}
.art-card:hover .art-link{opacity:1}

/* ── Carte claire (métiers, réalisations) ── */
.carte{background:var(--blanc);padding:1.5rem 1.4rem;display:flex;flex-direction:column;gap:.3rem;position:relative}
.carte::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--ac);opacity:0;transition:opacity .2s}
.carte:hover::before{opacity:1}
.carte h3{font-size:.9375rem;text-transform:uppercase;margin:.3rem 0}
.carte h3 a{color:#1A1A1A;text-decoration:none}
.carte h3 a:hover{color:var(--ac)}
.carte-met{margin:0;font-size:.875rem;color:#555}
.carte-zone{margin:0;color:var(--gris);font-size:.8125rem}
.carte-lien{margin-top:auto;padding-top:.8rem;font-size:.6875rem;font-weight:700;text-transform:uppercase;letter-spacing:.06rem;text-decoration:none;color:var(--ac)}
.carte-img{width:100%;height:150px;object-fit:cover;margin-bottom:.5rem}

/* ── Fiche ── */
.fiche{display:grid;grid-template-columns:2fr 1fr;gap:2.2rem;align-items:start;margin-top:1.6rem}
@media(max-width:760px){.fiche{grid-template-columns:1fr}}
.encart{background:var(--blanc);border-top:3px solid var(--ac);padding:1.4rem}
.encart p{margin:.35rem 0}
.encart a{color:var(--ac)}
.lib{font-size:.6875rem;text-transform:uppercase;letter-spacing:.1rem;color:var(--gris);margin-top:1rem;font-weight:700}
.cta{display:inline-block;background:var(--ac);color:var(--blanc)!important;text-decoration:none;font-weight:700;font-size:.875rem;padding:.8rem 1.6rem;margin:.6rem .5rem .2rem 0;transition:filter .2s}
.cta:hover{filter:brightness(.88)}
.cta.sec{background:var(--noir)}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;margin:.6rem 0}
.badges a{background:var(--gris-clair);color:#1A1A1A;text-decoration:none;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.04rem;padding:.4rem .8rem;transition:all .2s}
.badges a:hover{background:var(--ac);color:var(--blanc)}
ul.liste{padding-left:1.2rem}
ul.liste li{margin:.35rem 0}
.vide{background:var(--blanc);border:1px dashed #ccc;padding:1.5rem;color:#555}
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem;margin:1rem 0}
.galerie img{width:100%}

/* ── Footer (noir, colonnes comme la landing) ── */
.hub-footer{background:var(--noir);color:rgba(255,255,255,.55);margin-top:3rem}
.hub-footer .wrap{padding:2.2rem 1.5rem}
.ft-brand{font-family:var(--fh);font-size:1rem;text-transform:uppercase;color:var(--blanc);margin-bottom:.2rem}
.ft-sub{font-size:.75rem;color:rgba(255,255,255,.3);margin-bottom:1.4rem}
.hub-footer a{color:rgba(255,255,255,.55);text-decoration:none}
.hub-footer a:hover{color:var(--blanc)}
.hub-footer p{margin:.4rem 0;font-size:.875rem}

/* ── FAQ (details/summary, sans JS) ── */
details.faq{background:var(--blanc);border-left:3px solid var(--gris-clair);margin:.5rem 0;transition:border-color .2s}
details.faq[open]{border-left-color:var(--ac)}
details.faq summary{cursor:pointer;font-weight:700;padding:.9rem 1.1rem;list-style:none;position:relative}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';position:absolute;right:1.1rem;top:.75rem;font-family:var(--fh);font-size:1.05rem;color:var(--ac)}
details.faq[open] summary::after{content:'–'}
details.faq p{margin:0;padding:0 1.1rem 1rem;color:#444}
/* ── Bloc devis ── */
.devis{background:var(--charbon);color:rgba(255,255,255,.75);padding:1.6rem;margin-top:2.4rem;border-top:3px solid var(--ac)}
.devis h2{color:var(--blanc)}
.devis p{margin:.4rem 0}

/* ── Réalisation détail (v2) ─────────────────────────────── */
.real-hero{width:100%;max-height:440px;object-fit:cover;display:block;border-radius:3px}
.real-h2{margin:1.8rem 0 .8rem}
.ba-paire{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.ba-paire.ba-seul{grid-template-columns:minmax(0,440px)}
.ba-paire figure{margin:0}
.ba-paire img{width:100%;height:240px;object-fit:cover;border-radius:3px;display:block}
.ba-lib{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}
.ba-avant{color:#E65100}.ba-apres{color:#2E7D32}
.ba-paire figure:first-child img{border:2px solid #E65100}
.ba-paire figure:last-child img{border:2px solid #2E7D32}
@media(max-width:560px){.ba-paire{grid-template-columns:1fr}}
.prose p{max-width:64ch;line-height:1.85;font-size:1.02rem}
[data-agrandir]{cursor:zoom-in}
#agrandir-fond{position:fixed;inset:0;background:rgba(10,10,14,.92);display:none;align-items:center;justify-content:center;z-index:999;cursor:zoom-out}
#agrandir-fond.ouvert{display:flex}
#agrandir-fond img{max-width:94vw;max-height:92vh;box-shadow:0 8px 40px rgba(0,0,0,.6)}
#agrandir-fermer{position:absolute;top:14px;right:22px;color:#fff;font-size:2.2rem;line-height:1;cursor:pointer}
.agrandir-nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:3.2rem;line-height:1;cursor:pointer;padding:0 .5rem;user-select:none;opacity:.75}
.agrandir-nav:hover{opacity:1}
#agrandir-prec{left:14px}
#agrandir-suiv{right:14px}
@media(max-width:560px){.agrandir-nav{font-size:2.4rem}}