/* Guides Jamais à Sec — pages de lecture, pas d'application.
   Fond clair par défaut (on lit mieux), sombre si le téléphone l'est. */
:root{
  --sol:#F7F9F8; --carte:#FFFFFF;
  --encre:#0F1D19; --encre2:#4E6560; --encre3:#7C8F89;
  --trait:#DEE7E3; --trait2:#C5D4CE;
  --vert:#0A7A61; --vert-vif:#34D399; --vert-pale:#E7F5EF;
  --or:#8A5310; --or-pale:#FCF1E0;
  --ombre:0 1px 2px rgba(15,29,25,.05), 0 10px 28px -16px rgba(15,29,25,.24);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --sol:#0A1310; --carte:#111E1A;
    --encre:#E9F1EC; --encre2:#9CB2AA; --encre3:#6E847B;
    --trait:#1E2F29; --trait2:#2C4239;
    --vert:#4ADCA8; --vert-vif:#34D399; --vert-pale:#122A22;
    --or:#E0A94F; --or-pale:#2A2113;
    --ombre:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --sol:#0A1310; --carte:#111E1A;
  --encre:#E9F1EC; --encre2:#9CB2AA; --encre3:#6E847B;
  --trait:#1E2F29; --trait2:#2C4239;
  --vert:#4ADCA8; --vert-vif:#34D399; --vert-pale:#122A22;
  --or:#E0A94F; --or-pale:#2A2113;
  --ombre:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--sol); color:var(--encre);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:17px; line-height:1.68; -webkit-font-smoothing:antialiased;
}
.page{max-width:720px;margin:0 auto;padding:0 20px 90px}

/* bandeau */
.haut{
  display:flex;align-items:center;gap:12px;
  padding:16px 0 14px;border-bottom:1px solid var(--trait);margin-bottom:34px;
}
.haut img{width:34px;height:34px;border-radius:10px}
.haut a.marque{font-weight:800;font-size:16px;color:var(--encre);text-decoration:none;letter-spacing:-.02em}
.haut .sp{flex:1}
.haut a.retour{font-size:13.5px;font-weight:700;color:var(--vert);text-decoration:none}

h1{font-size:clamp(28px,6vw,40px);line-height:1.1;letter-spacing:-.03em;
   font-weight:800;margin:0 0 14px;text-wrap:balance}
.chapo{font-size:19px;color:var(--encre2);margin:0 0 34px;text-wrap:pretty}
h2{font-size:23px;line-height:1.2;letter-spacing:-.02em;font-weight:800;
   margin:46px 0 12px;text-wrap:balance}
h3{font-size:17.5px;font-weight:800;margin:30px 0 8px;letter-spacing:-.01em}
p{margin:0 0 16px}
a{color:var(--vert)}
strong,b{font-weight:700}

/* tableaux */
.tw{overflow-x:auto;border:1px solid var(--trait);border-radius:14px;
    background:var(--carte);box-shadow:var(--ombre);margin:22px 0}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.09em;
   color:var(--encre3);font-weight:800;padding:12px 14px;border-bottom:1px solid var(--trait)}
td{padding:12px 14px;border-bottom:1px solid var(--trait);vertical-align:top}
tr:last-child td{border-bottom:0}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:700}
td small{display:block;color:var(--encre2);font-size:13px;margin-top:2px}

/* encadrés */
.enc{background:var(--carte);border:1px solid var(--trait);border-radius:14px;
     padding:18px 20px;margin:24px 0;box-shadow:var(--ombre)}
.enc.attention{border-color:var(--or);background:var(--or-pale)}
.enc.attention p{color:var(--encre)}
.enc h4{margin:0 0 8px;font-size:16px;font-weight:800}
.enc p:last-child{margin-bottom:0}

ul{margin:0 0 16px;padding-left:22px}
li{margin-bottom:8px}

.cta{
  display:block;text-align:center;background:var(--vert);color:#fff;
  text-decoration:none;font-weight:800;padding:16px;border-radius:14px;margin:34px 0 10px;
}
:root:not([data-theme="light"]) .cta{color:#052E20}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .cta{color:#052E20}}

.autres{display:grid;gap:12px;margin:30px 0}
.autres a{
  display:block;padding:16px 18px;background:var(--carte);border:1px solid var(--trait);
  border-radius:14px;text-decoration:none;color:var(--encre);box-shadow:var(--ombre)
}
.autres a b{display:block;font-size:16.5px;font-weight:800;margin-bottom:3px}
.autres a span{font-size:14px;color:var(--encre2)}

footer{margin-top:56px;padding-top:20px;border-top:1px solid var(--trait);
       font-size:13.5px;color:var(--encre3)}
footer a{color:var(--encre2)}