/* ===================================================================
   Athira — feuille de style du site
   Le fil conducteur : le document de chantier. Un devis, une feuille
   quadrillée, une règle graduée en marge. Rien de décoratif qui ne
   vienne du métier.
   =================================================================== */
:root{
  --encre:#15202B;
  --papier:#FBFBF9;
  --blanc:#FFFFFF;
  --beton:#E1E5E8;
  --beton-f:#F1F3F4;
  --bleu:#1D4E6F;
  --bleu-f:#F0F5F8;
  --marque:#D8731A;
  --vert:#2E7D5B;
  --gris:#5A6975;
  --gut:20px;
  --r:9px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--encre);
  font:400 17px/1.62 "Source Serif 4",Georgia,serif;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.ar{font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-weight:700;letter-spacing:-.018em}
p{margin:0 0 1.05em}
a{color:var(--bleu)}
img{max-width:100%;height:auto}
:focus-visible{outline:2.5px solid var(--bleu);outline-offset:2px;border-radius:3px}

/* ---------- ossature ---------- */
.wrap{max-width:1200px;margin:0 auto;padding:0 var(--gut)}
.band{padding:52px 0}
.band-p{background:var(--papier)}
.band-b{background:var(--blanc);border-top:1px solid var(--beton);border-bottom:1px solid var(--beton)}
.band-f{background:var(--bleu-f);border-top:1px solid #DCE7EE;border-bottom:1px solid #DCE7EE}
.band-n{background:var(--encre);color:#E9EEF2}
.band-n h2,.band-n h3{color:#fff}
.band-n a{color:#9EC6E0}
@media(min-width:1000px){.band{padding:84px 0}}

.titre{font-size:clamp(25px,5.4vw,37px);line-height:1.13;margin:0 0 10px;max-width:17em}
.chapo{font-size:clamp(17px,2.2vw,19.5px);line-height:1.55;color:var(--gris);max-width:40em;margin:0 0 30px}
.band-n .chapo{color:#AEBECA}

/* ---------- en-tête ---------- */
.top{position:sticky;top:0;z-index:50;background:rgba(251,251,249,.94);
  backdrop-filter:saturate(180%) blur(9px);border-bottom:1px solid var(--beton)}
.top .wrap{display:flex;align-items:center;gap:18px;height:62px}
.logo{display:flex;align-items:center;gap:9px;font:800 20px Archivo,sans-serif;
  letter-spacing:-.035em;color:var(--encre);text-decoration:none;flex:0 0 auto}
.logo i{width:28px;height:28px;border-radius:7px;background:var(--bleu);color:#fff;
  display:grid;place-items:center;font:700 17px Georgia,serif;font-style:normal}
.nav{display:none;gap:22px;margin-left:auto;align-items:center}
.nav a{font:600 15px Archivo,sans-serif;color:#2B3B48;text-decoration:none;padding:6px 0;
  border-bottom:2px solid transparent}
.nav a:hover{border-bottom-color:var(--marque)}
.nav a[aria-current]{border-bottom-color:var(--bleu)}
@media(min-width:900px){.nav{display:flex}}
.top .btn{margin-left:auto}
@media(min-width:900px){.top .btn{margin-left:8px}}
.burger{margin-left:auto;display:grid;place-items:center;width:40px;height:40px;background:none;
  border:1px solid var(--beton);border-radius:7px;cursor:pointer}
.burger span{display:block;width:17px;height:1.7px;background:var(--encre);box-shadow:0 5px 0 var(--encre),0 -5px 0 var(--encre)}
@media(min-width:900px){.burger{display:none}}
.menu{display:none;border-bottom:1px solid var(--beton);background:var(--blanc)}
.menu.ouvert{display:block}
.menu a{display:block;padding:13px var(--gut);font:600 16px Archivo,sans-serif;color:var(--encre);
  text-decoration:none;border-bottom:1px solid var(--beton-f)}
@media(min-width:900px){.menu{display:none!important}}

/* ---------- boutons ---------- */
.btn{display:inline-block;font:600 16px/1 Archivo,sans-serif;padding:14px 21px;border-radius:var(--r);
  text-decoration:none;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-p{background:var(--marque);color:#fff}
.btn-p:hover{background:#C2650F}
.btn-s{background:var(--blanc);color:var(--encre);border-color:var(--beton)}
.btn-s:hover{border-color:var(--gris)}
.btn-c{background:#fff;color:var(--encre)}
.sm{font-size:14.5px;padding:10px 15px}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}

/* ---------- accroche ---------- */
.hero{padding:40px 0 0;overflow:hidden}
.hero h1{font-size:clamp(32px,7.6vw,56px);line-height:1.04;margin:0 0 20px;letter-spacing:-.034em;max-width:12em}
.hero .chapo{font-size:clamp(17.5px,2.4vw,20.5px);color:#2B3B48;max-width:31em}
.hero-note{margin-top:16px;font-size:15.5px;color:var(--gris)}
.hero-vue{margin:34px 0 0;border:1px solid var(--beton);border-radius:12px 12px 0 0;
  overflow:hidden;background:#fff;box-shadow:0 26px 60px -40px rgba(21,32,43,.6)}
.hero-vue img{display:block;width:100%}
@media(min-width:1000px){
  .hero{padding:62px 0 0}
  .hero .wrap{display:grid;grid-template-columns:minmax(0,480px) minmax(0,1fr);gap:54px;align-items:center}
  .hero-vue{margin:0;border-radius:12px;margin-right:calc(-1 * max(0px,(100vw - 1200px)/2) - var(--gut));
    border-right:0;border-radius:12px 0 0 12px}
}

/* ---------- preuves honnêtes ---------- */
.preuves{display:grid;gap:14px;padding:22px 0}
@media(min-width:760px){.preuves{grid-template-columns:repeat(3,1fr);gap:26px}}
.preuve{display:flex;gap:12px;align-items:flex-start;font-size:16px;line-height:1.5}
.preuve b{display:block;font:700 15px Archivo,sans-serif;margin-bottom:2px}
.preuve i{flex:0 0 auto;width:9px;height:9px;margin-top:7px;border-radius:2px;background:var(--marque);transform:rotate(45deg)}

/* ---------- le devis ---------- */
.devis{border:1px solid var(--beton);border-radius:var(--r);background:#fff;overflow:hidden}
.devis-tete{display:none}
.ligne{display:grid;grid-template-columns:26px 1fr;gap:4px 13px;padding:17px 18px;border-bottom:1px solid var(--beton-f)}
.ligne .n{font:700 13px Archivo,sans-serif;color:var(--marque);padding-top:4px}
.ligne .d{font-size:17.5px;line-height:1.4;font-weight:600;font-family:Archivo,sans-serif;letter-spacing:-.01em}
.ligne .s{grid-column:2;color:var(--gris);font-size:16px;line-height:1.5}
.ligne .v{grid-column:2;font:700 16px Archivo,sans-serif;color:var(--bleu)}
.total{display:grid;grid-template-columns:1fr auto;gap:12px;padding:17px 18px;background:var(--beton-f);
  font-family:Archivo,sans-serif;align-items:baseline}
.total .l{font-weight:600;font-size:16px}
.total .r{font-weight:800;font-size:22px;letter-spacing:-.025em}
.total.mini{background:#fff;border-top:1px solid var(--beton)}
.total.mini .r{font-size:16.5px;font-weight:700}
@media(min-width:860px){
  .devis-tete{display:grid;grid-template-columns:46px 1fr 200px;gap:18px;padding:13px 24px;
    font:600 13px Archivo,sans-serif;color:var(--gris);background:var(--beton-f);border-bottom:1px solid var(--beton)}
  .devis-tete .r{text-align:right}
  .ligne{grid-template-columns:46px 1fr 200px;gap:4px 18px;padding:19px 24px}
  .ligne .n{font-size:15px}
  .ligne .s{grid-column:2}
  .ligne .v{grid-column:3;grid-row:1/3;text-align:right;align-self:center;font-size:17px;color:var(--encre)}
  .total{grid-template-columns:1fr 200px;padding:19px 24px}
  .total .r{text-align:right}
}

/* ---------- blocs fonctionnalité ---------- */
.duo{display:grid;gap:30px;align-items:center}
.duo + .duo{margin-top:56px;padding-top:56px;border-top:1px solid var(--beton)}
@media(min-width:900px){
  .duo{grid-template-columns:1fr 310px;gap:64px}
  .duo.inv{grid-template-columns:310px 1fr}
  .duo.inv .txt{order:2}
  .duo + .duo{margin-top:76px;padding-top:76px}
}
.duo h3{font-size:clamp(20px,3.4vw,26px);margin:0 0 10px;line-height:1.2}
.duo p{color:#2B3B48;max-width:36em}
/* Une capture de téléphone reste un écran, jamais un rouleau :
   on borne la hauteur pour que la colonne de texte ne flotte pas dans le vide. */
.vue{margin:0;border:1px solid var(--beton);border-radius:12px;overflow:hidden;background:#fff;
  box-shadow:0 18px 44px -34px rgba(21,32,43,.55);position:relative;max-height:520px}
.vue img{display:block;width:100%}
.vue::after{content:"";position:absolute;inset:auto 0 0 0;height:54px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),rgba(255,255,255,.92))}
.puces{list-style:none;margin:16px 0 0;padding:0}
.puces li{position:relative;padding:0 0 10px 25px;font-size:16.5px;line-height:1.5}
.puces li::before{content:"";position:absolute;left:1px;top:11px;width:13px;height:1.6px;background:var(--marque)}
.band-n .puces li::before{background:#E9A86A}

/* ---------- limites ---------- */
.limites{display:grid;gap:20px}
@media(min-width:860px){.limites{grid-template-columns:1fr 1fr;gap:26px 48px}}
.limite{border-top:1px solid #33465A;padding-top:16px}
.limite b{display:block;font:700 17px Archivo,sans-serif;margin-bottom:6px;color:#fff}
.limite p{margin:0;color:#AEBECA;font-size:16.5px;line-height:1.55}

/* ---------- prix ---------- */
.prix{border:1px solid var(--beton);border-radius:var(--r);background:#fff;padding:26px;max-width:460px}
.prix .gros{font:800 44px Archivo,sans-serif;letter-spacing:-.035em;line-height:1}
.prix .gros small{font:600 17px Archivo,sans-serif;color:var(--gris);letter-spacing:0}
.prix ul{list-style:none;margin:20px 0 0;padding:0}
.prix li{position:relative;padding:0 0 11px 25px;font-size:16.5px;line-height:1.5}
.prix li::before{content:"";position:absolute;left:2px;top:7px;width:7px;height:12px;
  border:solid var(--vert);border-width:0 2px 2px 0;transform:rotate(42deg)}

/* ---------- formulaire ---------- */
.essai{display:grid;gap:34px}
@media(min-width:960px){.essai{grid-template-columns:minmax(0,1fr) 430px;gap:60px;align-items:start}}
.form{border:1px solid var(--beton);border-radius:var(--r);padding:24px;background:#fff}
.f{margin-bottom:15px}
.f label{display:block;font:600 14.5px Archivo,sans-serif;margin-bottom:5px}
.f input{width:100%;font:400 16.5px "Source Serif 4",serif;padding:12px 13px;border:1px solid var(--beton);
  border-radius:7px;background:var(--papier);color:var(--encre)}
.f input:focus{border-color:var(--bleu);background:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{margin-top:13px;font-size:16px;line-height:1.5;padding:13px 15px;border-radius:7px;display:none}
.msg.ok{display:block;background:#E8F3ED;border:1px solid #BCDCCB;color:#1C5A40}
.msg.ko{display:block;background:#FBEEEA;border:1px solid #E6C7BC;color:#8A2D14}
.repli{margin:14px 0 0;font-size:15.5px;color:var(--gris)}

/* ---------- questions ---------- */
.qs{display:grid;gap:0}
@media(min-width:900px){.qs{grid-template-columns:1fr 1fr;gap:0 52px}}
.q{border-top:1px solid var(--beton);padding:19px 0}
.q h3{font-size:17.5px;margin:0 0 7px}
.q p{margin:0;font-size:16.5px;color:#2B3B48}

/* ---------- blog ---------- */
.arts{display:grid;gap:22px}
@media(min-width:800px){.arts{grid-template-columns:repeat(3,1fr);gap:28px}}
.art{display:flex;flex-direction:column;border:1px solid var(--beton);border-radius:var(--r);
  background:#fff;padding:22px;text-decoration:none;color:inherit}
.art:hover{border-color:var(--gris)}
.art .k{font:600 13px Archivo,sans-serif;color:var(--marque);margin-bottom:9px}
.art h3{font-size:19.5px;line-height:1.25;margin:0 0 9px}
.art p{font-size:16px;color:var(--gris);margin:0 0 14px}
.art .l{margin-top:auto;font:600 15px Archivo,sans-serif;color:var(--bleu)}

/* ---------- article ---------- */
.papier{max-width:43em;margin:0 auto}
.papier h2{font-size:clamp(21px,3.6vw,27px);margin:38px 0 10px;line-height:1.2}
.papier h3{font-size:19.5px;margin:28px 0 8px}
.papier ul,.papier ol{margin:0 0 1.1em;padding-left:22px}
.papier li{margin-bottom:.45em}
.papier table{width:100%;border-collapse:collapse;margin:0 0 1.3em;font-size:16.5px}
.papier th{text-align:left;font:600 14.5px Archivo,sans-serif;color:var(--gris);
  border-bottom:1px solid var(--beton);padding:9px 12px 9px 0}
.papier td{padding:11px 12px 11px 0;border-bottom:1px solid var(--beton-f);vertical-align:top}
.papier td:last-child,.papier th:last-child{padding-right:0}
.dateline{font-size:15px;color:var(--gris);margin:0 0 30px}
.enc{background:var(--bleu-f);border-left:3px solid var(--marque);border-radius:0 var(--r) var(--r) 0;
  padding:17px 19px;margin:22px 0}
.enc p:last-child{margin-bottom:0}
.src{font-size:15px;color:var(--gris);border-top:1px solid var(--beton);margin-top:38px;padding-top:18px}
.src a{color:var(--bleu)}

/* ---------- pied ---------- */
footer{background:var(--encre);color:#A9BAC6;padding:46px 0 40px;font-size:15.5px;line-height:1.6}
footer h4{font:700 14px Archivo,sans-serif;color:#fff;margin:0 0 11px;letter-spacing:0}
footer a{color:#C3D4DF;text-decoration:none}
footer a:hover{text-decoration:underline}
footer p{margin:0 0 .75em}
.pied{display:grid;gap:30px}
@media(min-width:760px){.pied{grid-template-columns:1.6fr 1fr 1fr}}
@media(min-width:1050px){.pied{grid-template-columns:1.8fr 1fr 1fr 1.2fr}}
.pied ul{list-style:none;margin:0;padding:0}
.pied li{margin-bottom:8px}
.bas{border-top:1px solid #2A3C4C;margin-top:34px;padding-top:20px;font-size:14.5px;color:#8498A6;
  display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between}

/* ---------- bandeau de consentement ----------
   Refuser doit être aussi simple qu'accepter : même taille, même
   place, pas de bouton grisé. C'est une exigence de la CNIL, et de
   toute façon un visiteur piégé n'achète pas. */
#consent{position:fixed;left:14px;right:14px;bottom:14px;z-index:200;background:var(--encre);
  color:#E9EEF2;border-radius:12px;padding:16px 18px;box-shadow:0 18px 50px -24px rgba(0,0,0,.6);
  display:flex;flex-direction:column;gap:12px;font-size:15.5px;line-height:1.5}
#consent p{margin:0;max-width:62ch}
#consent div{display:flex;gap:10px}
#consent button{flex:1;font:600 15px Archivo,sans-serif;padding:11px 16px;border-radius:8px;
  border:1px solid #42576A;background:transparent;color:#fff;cursor:pointer}
#consent button:hover{border-color:#8FB4CC}
#cs_oui{background:var(--marque);border-color:transparent}
#cs_oui:hover{background:#C2650F}
@media(min-width:760px){
  #consent{left:auto;right:18px;bottom:18px;max-width:430px}
  #consent div{justify-content:flex-end}
  #consent button{flex:0 0 auto;min-width:118px}
}