/* =========================================================================
   MOULINS COOPÉRATIFS — base.css
   Variables, reset, typographie, texture de grain de papier.
   Voir CLAUDE.md pour la signification de chaque variable.
   ========================================================================= */

:root{
  --ecru:#F2E9D6;
  --ecru-fonce:#EADFC6;
  --encre:#1E1A16;
  --encre-douce:#6B6155;
  --ble:#A9762E;
  --champ:#33402D;
  --tampon:#8C3B2E;

  --filet:rgba(30,26,22,.15);
  --filet-fort:rgba(30,26,22,.32);
  --clair:rgba(245,240,230,.72);
  --clair-filet:rgba(245,240,230,.22);

  --e1:8px; --e2:16px; --e3:24px; --e4:40px; --e5:64px; --e6:96px; --e7:160px;
  --tr:240ms cubic-bezier(.22,1,.36,1);
  --nav-h:72px;
  color-scheme:light;
}

*{box-sizing:border-box}
/* l'attribut hidden doit toujours masquer, même sur un élément dont une
   classe pose par ailleurs display:grid/flex (ex. .deux-col, .duo-f) */
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--ecru);color:var(--encre);
  font-family:"Source Serif 4",Georgia,"Times New Roman",serif;
  font-optical-sizing:auto;font-weight:400;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
  padding-top:var(--nav-h);
}
/* grain de papier — sur toutes les pages */
body::after{
  content:"";position:fixed;inset:0;z-index:900;pointer-events:none;
  opacity:.055;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)'/%3E%3C/svg%3E");
}
/* mouchetures de vieux papier (rousseurs) — plus grandes et diffuses que le
   grain fin ci-dessus, pour un effet de papier qui a vécu */
body::before{
  content:"";position:fixed;inset:0;z-index:899;pointer-events:none;
  opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='500' height='500'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.015' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.35  0 0 0 0 0.24  0 0 0 0 0.12  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='500' height='500' filter='url(%23f)'/%3E%3C/svg%3E");
}
h1,h2,h3,h4,h5{
  margin:0;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-variation-settings:"SOFT" 40,"WONK" 1;
  line-height:1.04;letter-spacing:-.02em;
}
p{margin:0}
img{display:block;max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
table{border-collapse:collapse;width:100%}
::selection{background:var(--ble);color:var(--ecru)}

.contenu{max-width:1280px;margin:0 auto;padding:0 var(--e4)}
.lecture{max-width:640px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---- échelle typographique --------------------------------------------- */
.t-hero{font-size:clamp(56px,7vw,104px);line-height:.95;letter-spacing:-.02em}
.t-page{font-size:clamp(40px,5vw,64px);line-height:.98}
.t-sec{font-size:32px}
.lab{
  font-family:"Archivo",system-ui,sans-serif;font-weight:600;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase;line-height:1.4;
}
.douce{color:var(--encre-douce)}

/* ---- apparition au scroll -------------------------------------------------
   .rev est posé sur un conteneur (grille de cartes, liste de liens...) : ce
   sont ses enfants directs qui apparaissent, décalés de 80ms chacun (délai
   posé en JS, voir main.js) — pas le bloc entier d'un seul bloc. */
.rev>*{opacity:0;transform:translateY(16px);
  transition:opacity 500ms cubic-bezier(.22,1,.36,1),transform 500ms cubic-bezier(.22,1,.36,1)}
.rev.vu>*{opacity:1;transform:none}

@media (max-width:1280px){
  .contenu{padding-left:var(--e3);padding-right:var(--e3)}
}
@media (max-width:768px){
  body{font-size:16.5px}
}
@media (max-width:480px){
  .contenu{padding-left:20px;padding-right:20px}
  /* espacements de bureau réellement réduits sur mobile, pas juste divisés
     par deux : tout ce qui référence --e6/--e7 (marges de pied de page,
     bloc du sceau, respirations d'article...) en profite d'un coup. */
  :root{--e6:56px;--e7:96px}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rev{opacity:1;transform:none}
}
:focus-visible{outline:2px solid var(--tampon);outline-offset:3px}

/* lien d'évitement : caché hors écran, il apparaît au premier appui sur Tab
   pour qu'un utilisateur du clavier saute le menu et aille droit au contenu */
.evitement{position:absolute;left:-9999px;top:0;z-index:1000;background:var(--encre);color:var(--ecru);
  font-family:"Archivo",sans-serif;font-weight:600;font-size:12px;letter-spacing:.15em;
  text-transform:uppercase;text-decoration:none;padding:14px 20px}
.evitement:focus{left:var(--e2);top:var(--e2)}