/* ============================================================
   MUZAU · pages cas d'usage
   Charte : IDENTITE-VISUELLE.md — palette Céladon, fond blanc chaud.
   Feuille PARTAGÉE par les 9 pages ; index.html ne la charge pas et
   n'est modifié en rien. Pas de fond peint, pas de cadre décoratif :
   le vide fait le travail, comme sur la page d'accueil.
   ============================================================ */
@font-face{font-family:"General Sans";src:url("fonts/general-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("fonts/general-sans-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"General Sans";src:url("fonts/general-sans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}

:root{
  --fond:#FDFDFB;
  --brume:#E3E8DE;
  --celadon:#A9C0AE;
  --celadon-profond:#5E8570;
  --encre:#16181A;
  --gris:#8C918A;
  --font:"General Sans","Helvetica Neue",Helvetica,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--fond);color:var(--encre);line-height:1.62;font-family:var(--font);-webkit-font-smoothing:antialiased}

.wrap{max-width:720px;margin:0 auto;padding:clamp(2.5rem,7vw,4.5rem) clamp(1.25rem,5vw,2.5rem) clamp(3rem,8vw,5rem)}
a{color:var(--encre)}
.retour{display:block;width:fit-content;margin-bottom:2.75rem;font-size:.875rem;color:var(--gris);text-decoration:none;transition:color .2s}
.retour:hover{color:var(--encre)}

/* Le label de categorie tient sa propre ligne : colle au lien de retour sinon. */
.cat{display:block;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--celadon-profond);font-weight:500;margin-bottom:1rem}
h1{font-size:clamp(1.9rem,4.6vw,2.75rem);line-height:1.08;letter-spacing:-.03em;font-weight:500;margin-bottom:1.5rem;max-width:18ch}
h1+.chapo{font-size:clamp(1.0625rem,2.2vw,1.1875rem);line-height:1.55;color:var(--encre);margin-bottom:2rem}
h2{font-size:1.25rem;font-weight:500;letter-spacing:-.02em;margin:3rem 0 .85rem}
h3{font-size:1rem;font-weight:500;letter-spacing:-.01em;margin:1.75rem 0 .4rem}
p{color:var(--gris);margin-bottom:1rem}
p strong,li strong{color:var(--encre);font-weight:500}
ul{list-style:none;margin:0 0 1rem}
ul li{color:var(--gris);position:relative;padding-left:1.1rem;margin-bottom:.5rem}
ul li::before{content:"";position:absolute;left:0;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--celadon)}

/* Entrée / Il fait / Il livre — même grammaire que les fiches d'accueil */
.fiches{border-top:1px solid var(--brume);margin:1.5rem 0 0}
.fiches>div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--brume)}
.fiches dt{font-size:.8125rem;color:var(--celadon-profond);font-weight:500;letter-spacing:.01em;padding-top:.1rem}
.fiches dd{color:var(--gris)}
@media(max-width:520px){.fiches>div{grid-template-columns:1fr;gap:.2rem}}

/* Note d'honnêteté : le produit est en accès anticipé, on le dit. */
.note{border-left:2px solid var(--brume);padding:.15rem 0 .15rem 1.1rem;margin:2rem 0;font-size:.9375rem}
.note p{margin-bottom:.35rem}
.note p:last-child{margin-bottom:0}

.faq{margin-top:1rem}
.faq dt{font-weight:500;margin-top:1.6rem;letter-spacing:-.01em}
.faq dd{color:var(--gris);margin-top:.35rem}

.cta{margin:3.5rem 0 0;padding-top:2.25rem;border-top:1px solid var(--brume)}
.cta p{margin-bottom:1.15rem}
.btn{display:inline-block;background:var(--encre);color:var(--fond);text-decoration:none;
  padding:.72rem 1.5rem;border-radius:100px;font-size:.9375rem;font-weight:500;
  transition:transform .25s cubic-bezier(.34,1.3,.44,1),opacity .2s}
.btn:hover{transform:translateY(-1px);opacity:.9}

.voiraussi{margin-top:3rem}
.voiraussi ul li{padding-left:0}
.voiraussi ul li::before{display:none}
.voiraussi a{color:var(--gris);text-decoration:none;border-bottom:1px solid var(--brume);transition:color .2s,border-color .2s}
.voiraussi a:hover{color:var(--encre);border-color:var(--celadon)}

footer{border-top:1px solid var(--brume);margin-top:3.5rem;padding-top:1.6rem;font-size:.875rem;color:var(--gris)}
footer a{color:var(--gris);text-decoration:none}
footer a:hover{color:var(--encre)}
/* la caution : le meme lockup qu'en tete d'accueil, un cran plus discret.
   baseline, pas center : le logo n'a pas de ligne de base propre, le
   navigateur pose donc son bas sur celle du libelle. */
footer .adoube{
  display:flex;align-items:baseline;gap:.4rem;margin:.9rem 0 0;
  font-size:.8125rem;line-height:1;color:var(--gris);white-space:nowrap;
}
footer .adoube svg{height:10px;width:auto;display:block;fill:var(--encre)}

/* Le choix de langue tient sa propre ligne, sous les liens du pied. */
footer .langues{display:flex;align-items:center;gap:.5rem;margin-top:.9rem}
.langues a{color:var(--gris);text-decoration:none;transition:color .2s}
.langues a:hover,.langues a[aria-current]{color:var(--encre)}
.langues .sep{color:var(--brume)}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}