/* =========================================================================
   à-partir-de-deux — olive.css
   CSS statique, zéro réseau. Transcription 1:1 du design Stitch « Olive »
   (projet 16902279005447305642, écran 4ad8b08e191e4eb9b44d93680d6eff69) :
   tokens, familles, échelle typographique, filaments, ornements et lettrine
   sont ceux du tailwind.config et du <style> produits par Stitch. Le CDN
   Tailwind et les Google Fonts de l'écran d'origine sont remplacés ici par
   leur équivalent statique ; aucune valeur de design n'a été choisie ici.
   ========================================================================= */

:root{
  /* tokens Stitch — Olive */
  --primary:#2C2E2A;
  --on-surface:#2C2E2A;
  --text-rich:#2C2E2A;
  --on-surface-variant:#4A4D46;
  --text-muted:#5C6057;
  --surface:#E2E4D1;
  --background:#E2E4D1;
  --surface-mist-light:#d8d9c7;
  --surface-mist-dark:#caccb5;

  --serif:'Literata','Iowan Old Style',Georgia,serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --reading-width:680px;
  --sidebar-width:240px;
  --margin-page:5vw;
  --filament-thin:1px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition:none !important;animation:none !important;}
}
body{background:var(--surface);color:var(--on-surface);min-height:100vh;
  position:relative;overflow-x:hidden;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;}
img{max-width:100%;height:auto;}

/* ---- familles + échelle (fontSize/fontFamily du config Stitch) --------- */
.font-display-hero,.font-headline-section,.font-body-reading{font-family:var(--serif);}
.font-nav-item,.font-meta-info,.font-label-caps{font-family:var(--sans);}
.text-display-hero{font-size:64px;line-height:1.1;letter-spacing:.02em;font-weight:300;}
.text-headline-section{font-size:32px;line-height:1.2;font-weight:300;}
.text-body-reading{font-size:20px;line-height:1.7;letter-spacing:-.01em;font-weight:400;}
.text-meta-info{font-size:15px;line-height:1.5;font-weight:400;}
.text-nav-item{font-size:14px;line-height:1.4;font-weight:400;}
.text-label-caps{font-size:12px;line-height:1.5;letter-spacing:.2em;font-weight:300;}
.text-2xl{font-size:1.5rem;line-height:2rem;}
.text-xl{font-size:1.25rem;line-height:1.75rem;}
.text-sm{font-size:.875rem;line-height:1.25rem;}
.tracking-widest{letter-spacing:.1em;}
.italic{font-style:italic;}
.text-center{text-align:center;}
.align-super{vertical-align:super;}

/* ---- couleurs ---------------------------------------------------------- */
.text-primary{color:var(--primary);}
.text-on-surface{color:var(--on-surface);}
.text-on-surface-variant{color:var(--on-surface-variant);}
.text-text-rich{color:var(--text-rich);}
.text-text-muted{color:var(--text-muted);}
.bg-surface{background-color:var(--surface);}
.bg-surface\/90{background-color:rgba(226,228,209,.9);}
.bg-surface-mist-light{background-color:var(--surface-mist-light);}
.bg-surface-mist-dark{background-color:var(--surface-mist-dark);}
.bg-primary{background-color:var(--primary);}
.bg-primary\/10{background-color:rgba(44,46,42,.1);}
.bg-primary\/20{background-color:rgba(44,46,42,.2);}
.border{border:1px solid transparent;}
.border-t{border-top:1px solid transparent;}
.border-b{border-bottom:1px solid transparent;}
.border-l-2{border-left:2px solid transparent;}
.border-primary\/10{border-color:rgba(44,46,42,.1);}
.border-primary\/20{border-color:rgba(44,46,42,.2);}
.border-primary\/30{border-color:rgba(44,46,42,.3);}
.border-primary\/50{border-color:rgba(44,46,42,.5);}
.opacity-60{opacity:.6;}
.opacity-70{opacity:.7;}

/* ---- mise en page ------------------------------------------------------ */
.flex{display:flex;}
.flex-col{flex-direction:column;}
.hidden{display:none;}
.items-center{align-items:center;}
.justify-between{justify-content:space-between;}
.justify-center{justify-content:center;}
.self-stretch{align-self:stretch;}
.shrink-0{flex-shrink:0;}
.relative{position:relative;}
.absolute{position:absolute;}
.fixed{position:fixed;}
.mx-auto{margin-left:auto;margin-right:auto;}
.w-full{width:100%;}
.h-full{height:100%;}
.min-h-screen{min-height:100vh;}
.min-h-full{min-height:100%;}
.overflow-x-hidden{overflow-x:hidden;}
.origin-top{transform-origin:top;}
.rounded{border-radius:.25rem;}
.rounded-full{border-radius:9999px;}
.rotate-45{transform:rotate(45deg);}
.z-10{z-index:10;}.z-40{z-index:40;}.z-50{z-index:50;}
.top-0{top:0;}.left-0{left:0;}.top-4{top:1rem;}.bottom-4{bottom:1rem;}
.top-1\/2{top:50%;}.left-1\/2{left:50%;}.left-\[3px\]{left:3px;}
.-translate-x-1\/2{--tx:-50%;}
.-translate-y-1\/2{--ty:-50%;}
.-translate-x-1\/2.-translate-y-1\/2{transform:translate(-50%,-50%);}
.-translate-x-1\/2.-translate-y-1\/2.rotate-45{transform:translate(-50%,-50%) rotate(45deg);}
.w-2{width:.5rem;}.h-2{height:.5rem;}
.w-1\.5{width:.375rem;}.h-1\.5{height:.375rem;}
.w-32{width:8rem;}.w-px{width:1px;}.h-px{height:1px;}
.w-filament-thin{width:var(--filament-thin);}
.max-w-\[1200px\]{max-width:1200px;}
.max-w-column-reading-width{max-width:var(--reading-width);}
.max-w-2xl{max-width:42rem;}
.max-w-4xl{max-width:56rem;}
.px-margin-page{padding-left:var(--margin-page);padding-right:var(--margin-page);}
.px-3{padding-left:.75rem;padding-right:.75rem;}
.py-1{padding-top:.25rem;padding-bottom:.25rem;}
.py-4{padding-top:1rem;padding-bottom:1rem;}
.py-20{padding-top:5rem;padding-bottom:5rem;}
.pt-40{padding-top:10rem;}
.pt-12{padding-top:3rem;}
.pt-8{padding-top:2rem;}
.pb-20{padding-bottom:5rem;}
.pb-32{padding-bottom:8rem;}
.pl-5{padding-left:1.25rem;}
.pl-6{padding-left:1.5rem;}
.mb-6{margin-bottom:1.5rem;}
.mb-8{margin-bottom:2rem;}
.mb-12{margin-bottom:3rem;}
.mb-24{margin-bottom:6rem;}
.mt-8{margin-top:2rem;}
.mt-16{margin-top:4rem;}
.mt-24{margin-top:6rem;}
.ml-1{margin-left:.25rem;}
.my-8{margin-top:2rem;margin-bottom:2rem;}
.my-10{margin-top:2.5rem;margin-bottom:2.5rem;}
.gap-4{gap:1rem;}.gap-5{gap:1.25rem;}.gap-8{gap:2rem;}.gap-16{gap:4rem;}
.space-y-2>*+*{margin-top:.5rem;}
.space-y-4>*+*{margin-top:1rem;}
.space-y-6>*+*{margin-top:1.5rem;}
.list-decimal{list-style-type:decimal;}
.scroll-mt-32{scroll-margin-top:8rem;}
.backdrop-blur-md{backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.transition-colors{transition:color .3s,background-color .3s,border-color .3s;}
.transition-all{transition:all .3s;}
.duration-300{transition-duration:.3s;}
.underline-offset-4{text-underline-offset:4px;}

/* ---- filaments, ornements, lettrine (style Stitch) --------------------- */
.filament-h{height:1px;background-color:var(--primary);opacity:.2;}
.filament-v{width:1px;background-color:var(--primary);opacity:.2;}
.drop-initial::first-letter{
  font-size:4em;line-height:.8;float:left;margin-right:.1em;margin-top:.1em;
  color:var(--primary);font-family:'Literata',Georgia,serif;font-weight:300;}
#progress-line{height:0%;transition:height .1s ease-out;}

/* ---- liens ------------------------------------------------------------- */
a{color:inherit;}
.hover\:text-primary:hover{color:var(--primary);}
.hover\:bg-primary\/5:hover{background-color:rgba(44,46,42,.05);}
.hover\:underline:hover{text-decoration:underline;}
.group:hover .group-hover\:text-primary{color:var(--primary);}
.group:hover .group-hover\:bg-primary\/50{background-color:rgba(44,46,42,.5);}
nav a{text-decoration:none;}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--surface);
  color:var(--primary);padding:.75rem 1rem;z-index:100;font-family:var(--sans);}
.skip-link:focus{left:0;}

/* ---- appareil de notes ------------------------------------------------- */
.note-ref{font-size:.7em;vertical-align:super;color:var(--primary);
  text-decoration:none;margin-left:.15em;font-family:var(--sans);}
.note-ref:hover,.note-ref:focus{text-decoration:underline;}
.notes-list li{scroll-margin-top:8rem;}
.notes-list li:target{background:rgba(44,46,42,.06);}
.note-back{color:var(--primary);text-decoration:none;margin-left:.35em;}
.note-back:hover{text-decoration:underline;}
section:target{scroll-margin-top:8rem;}
blockquote ol{list-style-type:decimal;}
blockquote ol li{font-style:normal;}
article em{font-style:italic;}

/* Le bouton de repli du sommaire n'existe qu'en dessous du seuil latéral. */
.toc-toggle{display:none;}

/* ---- points d'arrêt --------------------------------------------------- */
@media (min-width:768px){
  .md\:block{display:block;}
  .md\:flex{display:flex;}
}
@media (min-width:1024px){
  .lg\:block{display:block;}
  .lg\:flex-row{flex-direction:row;}
  .lg\:mx-0{margin-left:0;margin-right:0;}
  .lg\:self-start{align-self:flex-start;}
  .lg\:sticky{position:sticky;}
  .lg\:top-32{top:8rem;}
  .lg\:w-sidebar-width{width:var(--sidebar-width);}
}
@media (max-width:1023px){
  .filament-v{display:none;}
  /* Sous le seuil de la colonne latérale, le sommaire ne disparaît pas et ne
     s'éloigne pas : il se colle sous la barre du haut et se replie en un
     bouton. Mécanique reprise telle quelle de la page sœur territoire-flux
     (sediment.css, @media max-width:1024px) : aside sticky sous la barre
     fixe, bouton « Sommaire » à chevron, liste dépliable et défilante.
     Couche de navigation seule — aucune couleur, taille ni police touchée. */
  #sommaire{display:block;position:sticky;top:61px;z-index:45;width:auto;
    max-height:none;overflow:visible;
    margin-left:calc(-1 * var(--margin-page));
    margin-right:calc(-1 * var(--margin-page));
    padding:0 var(--margin-page);margin-bottom:2.5rem;
    background:var(--surface);
    border-bottom:1px solid rgba(44,46,42,.2);}
  #sommaire h2{display:none;}
  #sommaire .toc-toggle{display:flex;align-items:center;justify-content:space-between;
    width:100%;padding:.7rem 0;background:none;border:none;cursor:pointer;
    color:var(--primary);text-align:left;}
  #sommaire .toc-toggle .chevron{transition:transform .25s;}
  #sommaire .toc-toggle[aria-expanded="true"] .chevron{transform:rotate(180deg);}
  #sommaire .toc-list{display:none;max-height:58vh;overflow-y:auto;
    flex-direction:column;gap:.9rem;padding:.25rem 0 1.1rem;}
  #sommaire .toc-list.open{display:flex;}
  #sommaire .toc-list>div[aria-hidden]{display:none;}
}
@media (max-width:767px){
  :root{--margin-page:24px;}
  .text-display-hero{font-size:36px;}
  .text-headline-section{font-size:26px;}
  .text-body-reading{font-size:18px;line-height:1.7;}
  .pt-40{padding-top:7rem;}
  .mb-24{margin-bottom:3rem;}
  .pb-32{padding-bottom:4rem;}
  .gap-16{gap:2.5rem;}
  .drop-initial::first-letter{font-size:3em;}
  blockquote{padding-left:1rem;}
}

/* ---- impression -------------------------------------------------------- */
@media print{
  nav,.fixed,#progress-line,.skip-link,footer .flex,#sommaire,.toc-toggle{display:none !important;}
  body{background:#fff;color:#000;}
  .bg-surface-mist-light{background:#fff;}
  article{max-width:none;}
  a{text-decoration:none;color:#000;}
  .note-ref::after{content:none;}
  section{break-inside:auto;}
  h2,h3{break-after:avoid;}
}