/* ═══════════════════════════════════════════════════════════════════════
   ESPACE CLIENT — CITERNES SERVICES PLUS
   Les mêmes jetons de couleur que csplus.fr, pour que le client ne se
   demande pas une seconde s'il a changé de maison.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --encre:#0B2942; --encre-2:#32536E; --gris:#5A6B7B; --gris-c:#E3E9EF;
  --fond:#FFFFFF; --fond-2:#F4F8FB;
  --bleu:#0E6BA8; --bleu-f:#094F7D; --eau:#12A0C4; --or:#F0B429; --vert:#0E7C5A;
  --rayon:14px;
  --ombre:0 1px 2px rgba(11,41,66,.06), 0 8px 24px rgba(11,41,66,.08);
  --large:1140px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size:17px; line-height:1.65;
  color:var(--encre); background:var(--fond);
}

.bande{ background:var(--fond-2); border-bottom:1px solid var(--gris-c); }

.centre{ max-width:var(--large); margin:0 auto; padding:0 20px; }

header .centre{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding-top:18px; padding-bottom:18px; flex-wrap:wrap;
}

.marque{
  font-weight:700; letter-spacing:.02em; color:var(--encre);
  text-decoration:none; font-size:18px;
}
.marque span{ color:var(--bleu); }

nav a{
  color:var(--encre-2); text-decoration:none; font-size:15px; margin-left:18px;
}
nav a:hover{ color:var(--bleu); text-decoration:underline; }

main{ padding:42px 0 64px; }

h1{ font-size:32px; line-height:1.25; margin:0 0 6px; }
h2{ font-size:22px; margin:38px 0 10px; }
h3{ font-size:18px; margin:26px 0 6px; }

.date{ color:var(--gris); font-size:15px; margin:0 0 28px; }

.encadre{
  background:var(--fond-2); border:1px solid var(--gris-c);
  border-radius:var(--rayon); box-shadow:var(--ombre);
  padding:22px 24px; margin:26px 0;
}
.encadre p:first-child{ margin-top:0; }
.encadre p:last-child{ margin-bottom:0; }

.etapes{ counter-reset:etape; list-style:none; padding:0; margin:18px 0; }
.etapes li{
  counter-increment:etape; position:relative;
  padding:0 0 0 46px; margin:0 0 16px;
}
.etapes li::before{
  content:counter(etape);
  position:absolute; left:0; top:1px;
  width:30px; height:30px; border-radius:50%;
  background:var(--bleu); color:#fff;
  font-weight:700; font-size:15px;
  display:flex; align-items:center; justify-content:center;
}

table{ border-collapse:collapse; width:100%; margin:18px 0; font-size:16px; }
th,td{ border:1px solid var(--gris-c); padding:10px 12px; text-align:left; vertical-align:top; }
th{ background:var(--fond-2); font-weight:600; }

a{ color:var(--bleu); }
a:hover{ color:var(--bleu-f); }

.discret{ color:var(--gris); font-size:15px; }

footer{
  border-top:1px solid var(--gris-c); background:var(--fond-2);
  padding:26px 0; font-size:15px; color:var(--gris);
}
footer a{ color:var(--encre-2); text-decoration:none; margin-right:18px; }
footer a:hover{ color:var(--bleu); text-decoration:underline; }

@media (max-width:640px){
  body{ font-size:16px; }
  h1{ font-size:26px; }
  nav a{ margin:0 16px 0 0; display:inline-block; }
  header .centre{ display:block; }
  nav{ margin-top:8px; }
  table, thead, tbody, th, td, tr{ display:block; }
  thead{ display:none; }
  td{ border-top:none; }
  tr{ border-top:1px solid var(--gris-c); margin-bottom:14px; }
  td::before{ content:attr(data-libelle); display:block; font-weight:600; color:var(--encre-2); }
}