/* ============================================================
   MG — Fiches techniques de pose (/conseils/plan-maconnerie-*)
   Classes préfixées ft- : aucune collision avec styles.css / conseils.css
   ============================================================ */
.ft-main{background:var(--paper,#f7f5f2);}
.ft-wrap{max-width:var(--maxw,1240px);margin-inline:auto;padding:clamp(22px,4vw,40px) var(--gutter,20px) clamp(40px,6vw,72px);display:flex;flex-direction:column;gap:clamp(18px,3vw,26px);}

/* Hero */
.ft-hero{display:flex;align-items:flex-end;gap:40px;padding-bottom:22px;border-bottom:1.5px solid #d8431c;}
.ft-hero-txt{flex:1 1 auto;min-width:0;max-width:720px;display:flex;flex-direction:column;gap:12px;}
.ft-kicker{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#d8431c;}
.ft-hero h1{margin:0;font-family:var(--font-head,'Archivo',sans-serif);font-size:clamp(1.8rem,3.4vw,2.5rem);line-height:1.07;font-weight:800;color:#0e3a47;letter-spacing:-.01em;}
.ft-lede{margin:0;font-size:1.02rem;line-height:1.55;color:#5c6a72;}
.ft-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;}
.ft-chip{font-size:.9rem;font-weight:600;color:#0e3a47;background:#fff;border:1px solid #e8e3db;border-radius:999px;padding:8px 16px;text-decoration:none;}
.ft-chip:hover{border-color:#0e3a47;color:#0e3a47;}
.ft-chip.on{background:#0e3a47;border-color:#0e3a47;color:#fff;font-weight:700;}
.ft-actions{flex:0 0 280px;display:flex;flex-direction:column;gap:10px;}
.ft-actions-note{font-size:.78rem;color:#5c6a72;text-align:center;}

/* Boutons (couleurs en dur : ne dépend pas de .btn) */
.ft-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:inherit;font-size:.95rem;font-weight:700;line-height:1.2;padding:13px 22px;border-radius:12px;text-decoration:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease;}
.ft-btn:hover{transform:translateY(-2px);}
.ft-btn-pdf{background:#d8431c;color:#fff;border:1.5px solid #d8431c;box-shadow:0 8px 20px rgba(216,67,28,.28);}
.ft-btn-pdf:hover{color:#fff;background:#b3350f;border-color:#b3350f;}
.ft-btn-conf{background:#fff;color:#0e3a47;border:1.5px solid #0e3a47;}
.ft-btn-conf:hover{color:#0e3a47;}
.ft-btn-ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.6);}

/* Grille */
.ft-grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:24px;align-items:start;}
.ft-grid>*{min-width:0;}
.ft-plans,.ft-side{display:flex;flex-direction:column;gap:16px;min-width:0;}

/* Cartes */
.ft-card{background:#fff;border:1px solid #e8e3db;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0;}
.ft-card-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;}
.ft-card-h.ft-line{padding-bottom:8px;border-bottom:1px solid #e8e3db;}
.ft-card-h h2{margin:0;font-family:var(--font-head,'Archivo',sans-serif);font-size:.95rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#0e3a47;}
.ft-card-h p{margin:0;font-size:.85rem;color:#5c6a72;}
.ft-items{display:flex;flex-direction:column;gap:12px;}

/* Plans : pleine largeur sur ordinateur, défilement latéral sur mobile */
.ft-svg{display:block;width:100%;height:auto;}
.ft-hint,.ft-fade,.ft-arrow{display:none;}
.ft-scroll-wrap{position:relative;}

@media (max-width:820px){
  .ft-hero{flex-direction:column;align-items:stretch;gap:18px;}
  .ft-actions{flex:none;}
  .ft-grid{grid-template-columns:minmax(0,1fr);}
  .ft-scroll-wrap{margin:0 -18px;}
  .ft-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0 18px;scrollbar-width:none;}
  .ft-scroll::-webkit-scrollbar{display:none;}
  .ft-scroll .ft-svg{width:690px;max-width:none;}
  .ft-hint{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:#b3350f;background:#fceee8;border:1px solid #f6c9b8;border-radius:999px;padding:6px 12px;}
  .ft-fade{display:block;position:absolute;top:0;right:0;bottom:0;width:72px;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 70%);pointer-events:none;transition:opacity .25s ease;}
  .ft-arrow{display:flex;position:absolute;right:12px;top:50%;margin-top:-20px;width:40px;height:40px;border-radius:999px;background:#d8431c;box-shadow:0 6px 16px rgba(216,67,28,.35);align-items:center;justify-content:center;pointer-events:none;transition:opacity .25s ease;}
  .ft-scroll-wrap.is-scrolled .ft-arrow{opacity:0;}
  .ft-scroll-wrap.is-end .ft-fade{opacity:0;}
}

/* Encadré sombre */
.ft-note{background:#0e3a47;border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;}
.ft-note-t{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#f6b8a4;}
.ft-note p{margin:0;font-size:.92rem;line-height:1.45;color:#fff;}

/* Aide à la pose */
.ft-help{background:#0e3a47;border-radius:26px;padding:clamp(22px,3vw,30px) clamp(18px,3vw,36px);display:flex;align-items:center;gap:24px 32px;flex-wrap:wrap;}
.ft-help>div:first-child{flex:1 1 320px;}
.ft-help h2{margin:0 0 6px;font-family:var(--font-head,'Archivo',sans-serif);font-size:clamp(1.3rem,2.2vw,1.55rem);font-weight:800;color:#fff;}
.ft-help p{margin:0;font-size:.95rem;line-height:1.5;color:#c9d6da;}
.ft-help-btns{display:flex;gap:12px;flex-wrap:wrap;}
@media (max-width:820px){.ft-help-btns{width:100%;flex-direction:column;}.ft-help-btns .ft-btn{width:100%;}}