/* =========================================================
   Citerne Basse-Meuse — feuille de style commune
   Site statique rank & rent. Mobile-first, rapide, accessible.
   Palette : petrol/teal (sérieux, environnemental) + ambre (CTA).
   ========================================================= */

:root{
  --brand:#12525e;        /* petrol/teal */
  --brand-dark:#0c3b44;
  --brand-tint:#e8f0f1;
  --accent:#c26a12;       /* ambre — CTA, contraste AA sur blanc */
  --accent-dark:#a5590d;
  --ink:#1c2b2f;
  --muted:#54646a;
  --line:#dde3e4;
  --bg:#ffffff;
  --bg-soft:#f4f7f7;
  --danger:#8a1c1c;
  --danger-bg:#fbeaea;
  --radius:10px;
  --maxw:1080px;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font);
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--brand);}
h1,h2,h3{line-height:1.25;color:var(--brand-dark);font-weight:700;}
h1{font-size:1.9rem;margin-bottom:.6em;}
h2{font-size:1.4rem;margin:1.6em 0 .6em;}
h3{font-size:1.1rem;margin:1.2em 0 .4em;}
p{margin:.6em 0;}
ul,ol{margin:.6em 0 .6em 1.2em;}
li{margin:.25em 0;}

.container{width:92%;max-width:var(--maxw);margin-inline:auto;}

/* --- accessibilité : lien d'évitement + focus visibles --- */
.skip{position:absolute;left:-999px;top:0;background:var(--brand-dark);color:#fff;padding:.6em 1em;z-index:100;}
.skip:focus{left:0;}
a:focus-visible,button:focus-visible,.btn:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;
}

/* --------------------------- header --------------------------- */
.site-header{position:sticky;top:0;z-index:20;background:#fff;border-bottom:1px solid var(--line);}
.site-header .container{display:flex;flex-wrap:wrap;align-items:center;gap:.4em 1em;padding:.7em 0;}
.brand{display:flex;flex-direction:column;text-decoration:none;color:var(--brand-dark);line-height:1.1;}
.brand strong{font-size:1.15rem;letter-spacing:.2px;}
.brand span{font-size:.72rem;color:var(--muted);font-weight:400;}
.main-nav{margin-left:auto;}
.main-nav ul{display:flex;flex-wrap:wrap;gap:.2em .9em;list-style:none;margin:0;}
.main-nav a{text-decoration:none;color:var(--ink);font-size:.92rem;padding:.3em 0;border-bottom:2px solid transparent;}
.main-nav a:hover,.main-nav a[aria-current="page"]{color:var(--brand);border-bottom-color:var(--accent);}

/* --------------------------- boutons --------------------------- */
.btn{display:inline-block;padding:.7em 1.4em;border-radius:var(--radius);text-decoration:none;font-weight:600;
  border:2px solid transparent;cursor:pointer;transition:background .15s,color .15s;}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-secondary{background:transparent;color:var(--brand-dark);border-color:var(--brand);}
.btn-secondary:hover{background:var(--brand-tint);}
.btn + .btn{margin-left:.6em;}

/* --------------------------- hero --------------------------- */
.hero{background:linear-gradient(160deg,var(--brand) 0%,var(--brand-dark) 100%);color:#fff;padding:56px 0 60px;}
.hero h1{color:#fff;max-width:20ch;}
.hero p{color:#eaf1f1;font-size:1.08rem;max-width:60ch;margin-bottom:1.4em;}
.hero .btn-secondary{color:#fff;border-color:#ffffff88;}
.hero .btn-secondary:hover{background:#ffffff1a;}

/* --------------------------- sections --------------------------- */
main section{padding:44px 0;border-bottom:1px solid var(--line);}
main section:last-child{border-bottom:none;}
.section-soft{background:var(--bg-soft);}
.lead{font-size:1.06rem;color:var(--muted);max-width:65ch;}

/* --- bandeau transparence (phase orpheline) --- */
.notice{background:var(--brand-tint);border:1px solid #bcd3d6;border-left:5px solid var(--brand);
  border-radius:var(--radius);padding:1em 1.2em;margin:1.2em 0;font-size:.95rem;color:var(--brand-dark);}

/* --- encadré urgence fuite --- */
.alert{background:var(--danger-bg);border-left:5px solid var(--danger);border-radius:var(--radius);
  padding:1em 1.2em;margin:1.4em 0;color:#5f1414;}
.alert strong{color:var(--danger);}

/* --------------------------- cartes services --------------------------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.1em;margin-top:1.2em;}
.card{border:1px solid var(--line);border-radius:var(--radius);padding:1.3em;background:#fff;}
.card h3{margin-top:0;color:var(--brand);}
.card p{color:var(--muted);font-size:.95rem;margin-bottom:0;}

/* --------------------------- listes définitions / étapes --------------------------- */
.deflist{list-style:none;margin-left:0;}
.deflist li{padding:.5em 0;border-bottom:1px dashed var(--line);}
.deflist li:last-child{border-bottom:none;}
.steps{counter-reset:step;list-style:none;margin-left:0;}
.steps li{position:relative;padding:.4em 0 .4em 2.4em;}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:.35em;
  width:1.7em;height:1.7em;background:var(--brand);color:#fff;border-radius:50%;
  display:grid;place-items:center;font-size:.85rem;font-weight:700;}

/* --------------------------- tableaux --------------------------- */
.table-wrap{overflow-x:auto;margin:1em 0;}
table{border-collapse:collapse;width:100%;min-width:480px;font-size:.94rem;}
th,td{border:1px solid var(--line);padding:.6em .7em;text-align:left;vertical-align:top;}
th{background:var(--brand-tint);color:var(--brand-dark);}

/* --------------------------- formulaire --------------------------- */
form.enquiry{max-width:620px;}
.form-row{margin:.9em 0;}
label{display:block;font-weight:600;margin-bottom:.25em;font-size:.95rem;}
input,select,textarea{width:100%;padding:.6em .7em;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff;}
.consent{display:flex;gap:.6em;align-items:flex-start;font-weight:400;}
.consent input{width:auto;margin-top:.35em;}

/* --------------------------- footer --------------------------- */
.site-footer{background:var(--brand-dark);color:#d7e3e4;padding:34px 0;font-size:.9rem;}
.site-footer a{color:#fff;}
.site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1.4em;}
.site-footer h4{color:#fff;font-size:.95rem;margin-bottom:.5em;}
.site-footer .fine{margin-top:1.4em;padding-top:1em;border-top:1px solid #ffffff22;color:#a9c0c2;font-size:.82rem;}

/* --- statut « en préparation » pour pages en cours --- */
.wip{background:var(--bg-soft);border:1px dashed var(--line);border-radius:var(--radius);padding:1.6em;color:var(--muted);}

/* --------------------------- desktop --------------------------- */
@media (min-width:720px){
  h1{font-size:2.4rem;}
  h2{font-size:1.7rem;}
  .hero{padding:76px 0 82px;}
}