/* Socle commun Artisans du Gers.
   Chargé EN DERNIER dans le head : à spécificité égale il gagne sur les :root
   locaux, sans qu'on ait à les toucher. Réversible en retirant une ligne. */

:root{
  --bg:#F7F3EA; --paper:#FFFFFF;
  --ink:#1C2028; --ink-soft:#3C4250; --ink-mute:#6B7387;
  --line:#E5DFD3; --line-strong:#D3C9B6;
  --accent:#B18750; --accent-deep:#8A6836; --accent-light:#E6D2AE; --accent-soft:#F3EBDC;
  --night:#0F1218; --night-2:#1C2028; --night-ink:#EFF1F6; --night-mute:#9BA1AE;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --r-carte:16px; --r-bloc:22px;
  /* alias hérités, à retirer quand les 15 pages --gold seront migrées */
  --gold:var(--accent); --gold-deep:var(--accent-deep); --bg-elev:var(--paper);
}

/* rien ne doit dépasser en largeur */
html,body{ max-width:100%; overflow-x:hidden }
img{ max-width:100%; height:auto }

/* en-tête toujours accessible */
header{ position:sticky; top:0; z-index:40 }

/* l'en-tête tient dans 390 px */
@media (max-width:700px){
  /* padding-block seul : le raccourci « .8rem 0 » écrasait la gouttière du .wrap
     et collait la marque au bord de l'écran */
  .top,.nav-inner{ gap:.6rem; padding-block:.8rem }
  .top .fil,.ariane .crumb{ display:none }
  .top .marque,.brand{ font-size:1.12rem }
  .top .btn,.nav .btn,.btn-primary{ padding:.72rem 1.05rem; font-size:.86rem; white-space:nowrap }
}

/* plancher de lisibilité et cibles au doigt */
@media (max-width:760px){
  .famille p,.douleur p,.promesse p,.final-canal p,.etage p,.avantage p,
  .gers-texte p,.sec-lead,.section-lead,.hero-sub,.hero-note,.chapo{ font-size:1rem; line-height:1.6 }
  .eyebrow,.sec-label,.section-label,.kicker,.chap-label,.douleur-quoi,
  .famille-meca,.carte-meca,.m-fictif,.cartel{ font-size:.8rem; letter-spacing:.08em }
  .preuve span,.gers-chiffre span,footer{ font-size:.92rem }
  .famille-lien,.chap-famille,.tm-lien,.carte-lien,.demo-carte span,
  .footer-liens a,.prix-lien,.sous a,.demo-liens a{ display:inline-flex; align-items:center; min-height:44px }
  .nav .btn,.top .btn,.btn{ min-height:46px }
}

/* le tableau comparatif dit qu'il défile, et la colonne des offres reste visible */
@media (max-width:760px){
  .compar-scroll{ position:relative; -webkit-overflow-scrolling:touch }
  .compar-scroll::after{ content:"Faites glisser le tableau vers la gauche";
    display:block; padding:.6rem 1.2rem; font-size:.85rem; color:var(--ink-mute);
    border-top:1px solid var(--line); position:sticky; left:0 }
  .compar th:first-child,.compar td:first-child{
    position:sticky; left:0; background:var(--paper); z-index:1 }
}

/* barre de contact permanente sur mobile : cette cible appelle, elle n'écrit pas */
@media (max-width:760px){
  body{ padding-bottom:78px }
  .barre-mobile{ position:fixed; left:0; right:0; bottom:0; z-index:60;
    display:grid; grid-template-columns:1fr 1fr; gap:.5rem;
    padding:.6rem .75rem calc(.6rem + env(safe-area-inset-bottom));
    background:rgba(247, 243, 234,.96); border-top:1px solid var(--line);
    backdrop-filter:blur(10px) }
  .barre-mobile a{ display:flex; align-items:center; justify-content:center;
    min-height:52px; border-radius:999px; font:500 1rem/1.2 var(--sans); text-decoration:none }
  .barre-mobile .appeler{ background:var(--accent); color:#fff }
  .barre-mobile .devis{ background:var(--paper); color:var(--ink); border:1px solid var(--line-strong) }
}
@media (min-width:761px){ .barre-mobile{ display:none } }

/* liens de démonstration des pages métier, 36 cibles de 16 px par page */
@media (max-width:760px){
  .m-demo a,.m-demo{ display:inline-flex; align-items:center; min-height:44px }
  .m-demo{ flex-wrap:wrap; gap:.35rem .75rem }
  .cta-actions .tel{ display:inline-flex; align-items:center; min-height:44px }
  .ariane .brand{ display:inline-flex; align-items:center; min-height:44px }
}