/* Famiam — « La Cuisine Lumineuse »
   Tokens repris de apps/mobile/DESIGN.md. Aucune police externe : pile système
   uniquement, pour qu'aucune requête ne parte vers un tiers depuis une page qui
   porte la politique de confidentialité. */

:root{
  --sauge:#4A7C59; --sauge-sombre:#3A6347; --sauge-brume:#E8F2EC;
  --ambre:#D97706; --ambre-halo:#FEF3C7;
  --terracotta:#C2410C; --terracotta-halo:#FFF7ED;
  --lumiere:#FAF9F6; --lin:#F2F0EB; --porcelaine:#fff; --gres:#E2DFD8;
  --encre:#1C1917; --pierre:#57534E; --galet:#A8A29E;

  --serif:ui-serif,"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --z-nav:10;
}

*{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(--lumiere);color:var(--encre);
  font-family:var(--sans);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}

.enveloppe{max-width:66rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
.etroit{max-width:44rem}

/* — En-tête — */
header{padding:2rem 0 0;position:relative;z-index:var(--z-nav)}
header .enveloppe{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.logo{font-family:var(--serif);font-size:1.5rem;font-weight:600;letter-spacing:-0.015em;
  color:var(--sauge-sombre);text-decoration:none}
header nav a{color:var(--pierre);text-decoration:none;font-size:.95rem;margin-left:1.6rem}
header nav a:hover{color:var(--sauge-sombre);text-decoration:underline;text-underline-offset:3px}

/* — Titres — */
h1{font-family:var(--serif);font-weight:600;letter-spacing:-0.028em;line-height:1.06;
  margin:0 0 1.4rem;text-wrap:balance}
h2{font-family:var(--serif);font-weight:600;letter-spacing:-0.02em;
  font-size:clamp(1.35rem,2.8vw,1.75rem);margin:2.6rem 0 .7rem;text-wrap:balance;
  color:var(--sauge-sombre)}
h3{font-size:1.06rem;margin:0 0 .45rem;font-weight:650}
p,li{text-wrap:pretty}
p{max-width:68ch}

a{color:var(--sauge-sombre)}
a:focus-visible{outline:2px solid var(--sauge);outline-offset:3px;border-radius:2px}

/* — Pages légales — */
.doc{padding:clamp(2.5rem,6vw,4rem) 0}
.doc h1{font-size:clamp(1.9rem,4.6vw,2.8rem)}
.doc .maj{color:var(--pierre);font-size:.94rem;margin:-.6rem 0 2.2rem}
.doc .intro{font-size:1.08rem;color:var(--pierre)}
.doc h2:first-of-type{margin-top:2.2rem}

.sommaire{background:var(--lin);border-radius:1rem;padding:1.3rem 1.5rem;margin:2rem 0 0}
.sommaire p{margin:0 0 .55rem;font-weight:650;font-size:.95rem}
.sommaire ol{margin:0;padding-left:1.2rem;columns:2;column-gap:2rem;font-size:.95rem}
@media(max-width:36rem){.sommaire ol{columns:1}}
.sommaire li{margin:.18rem 0}
.sommaire a{color:var(--pierre);text-decoration:none}
.sommaire a:hover{color:var(--sauge-sombre);text-decoration:underline;text-underline-offset:3px}

.serment{background:var(--sauge-brume);border-radius:1.25rem;
  padding:clamp(1.5rem,3.5vw,2.2rem);margin:2rem 0}
.serment p{margin:0;color:#254A33;max-width:64ch}
.serment strong{color:var(--sauge-sombre)}

.contact{background:var(--porcelaine);border:1px solid var(--gres);border-radius:1rem;
  padding:1.3rem 1.5rem;margin:2.4rem 0 0}
.contact p{margin:0}

/* — Pied — */
footer{border-top:1px solid var(--gres);margin-top:clamp(3rem,7vw,5rem);
  padding:2.2rem 0 3.5rem;font-size:.94rem;color:var(--pierre)}
footer p{margin:0}
footer nav{margin-top:.5rem}
footer nav a{margin:0 1.4rem 0 0;display:inline-block}

.logo{display:inline-flex;align-items:center;gap:.5rem}
.logo img{border-radius:8px;display:block}