@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-mono-latin-ext-400-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-mono-latin-ext-700-normal.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/space-mono-latin-400-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-mono-latin-700-normal.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --fond:#dad8d2;      /* gris chaud, profondeur sous le voile blanc */
  --texte:#2a1a0e;     /* brun très foncé, contraste 9,4:1 */
  --doux:#43290f;      /* brun foncé, lisible sur le gris */
  --accent:#4c2445;    /* laccaire foncé, texte */
  --rouge:#6e4468;     /* laccaire améthyste, aplats; blanc dessus 7,5:1 */
  --blanc:#fffaf0;     /* blanc des verrues */
  --filet:#2a1a0e55;
  --mono:'Space Mono',ui-monospace,'SFMono-Regular','Cascadia Mono','DejaVu Sans Mono',Menlo,Consolas,'Liberation Mono',monospace;
  --serif:var(--mono);
  --sans:var(--mono);
}
*{box-sizing:border-box}
html{font-size:100%}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--serif);font-size:0.88rem;line-height:1.6}
a{color:var(--accent);text-underline-offset:.15em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--texte);outline-offset:2px}
.skip{position:absolute;left:-999px}
.skip:focus{left:1rem;top:1rem;background:var(--texte);color:var(--fond);padding:.5rem;z-index:9}
.cadre{max-width:78rem;margin:0 auto;padding:1rem 1rem 4rem}
header.marge{display:flex;flex-wrap:wrap;gap:1rem 2rem;align-items:center;border-bottom:1px solid var(--filet);padding-bottom:1rem;margin-bottom:2rem}
.marque{font-family:var(--sans);font-weight:700;letter-spacing:.25em;text-decoration:none;color:var(--texte)}
nav{display:flex;flex-wrap:wrap;gap:.5rem 2rem;font-family:var(--sans);font-size:0.84rem}
nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
nav a{color:var(--texte);text-decoration:none}
nav a:hover,nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;color:var(--accent)}
nav .langues{margin-left:auto}
h1{font-size:clamp(1.4rem,3vw,2rem);line-height:1.15;font-weight:400;margin:0 0 1rem}
h2,h3{font-weight:400}
h2.petit{font-family:var(--sans);font-size:0.72rem;letter-spacing:.2em;text-transform:uppercase;margin:3rem 0 1rem}
.texte{max-width:42rem}
.texte ul{padding-left:1.1rem}
.projet ul:first-of-type{list-style:none;padding:0;margin:0 0 1.5rem;font-family:var(--sans);font-size:0.84rem;color:var(--doux);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet);padding:.75rem 0}
.etiquettes{font-family:var(--sans);font-size:0.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--doux);margin:0 0 1.5rem}
.etiquettes span+span:before{content:' · '}
.retour{font-family:var(--sans);font-size:0.79rem;margin:0 0 1rem}
.filtres{font-family:var(--sans);font-size:0.79rem;margin:0 0 1rem}
.filtres p{margin:.25rem 0}
.filtres span{display:inline-block;min-width:4.5rem;color:var(--doux);text-transform:uppercase;letter-spacing:.1em;font-size:0.72rem}
.filtres a{color:var(--texte)}
.filtres a{padding:.05rem .55rem;border-radius:999px;margin-right:.4rem;text-decoration:none;border:1px solid var(--filet)}
.filtres a:hover{border-color:var(--rouge)}
.filtres a[aria-current]{background:var(--rouge);color:var(--blanc);border-color:var(--rouge);font-weight:700}
.indice{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)}
.indice li{border-bottom:1px solid var(--filet)}
.indice a{display:grid;grid-template-columns:4.5rem 3.5rem 1fr;gap:.1rem 1rem;padding:.7rem 0;text-decoration:none;color:var(--texte)}
.indice a:hover{background:var(--rouge);color:var(--blanc)}
.indice a:hover .an,.indice a:hover .li,.indice a:hover .au,.indice a:hover .ti{color:var(--blanc)}
.indice a{padding-left:.4rem;padding-right:.4rem}
.indice .vi{grid-row:span 2;width:4.5rem;height:3.4rem;background:#2a1a0e22;overflow:hidden}
.indice .vi img{display:block;width:100%;height:100%;object-fit:cover}
.indice .an{font-family:var(--sans);font-size:0.79rem;color:var(--doux);grid-row:span 2}
.indice .li,.indice .au{font-family:var(--sans);font-size:0.75rem;color:var(--doux)}
@media (min-width:56rem){
  .indice a{grid-template-columns:4.5rem 4rem 2fr 2fr 1.2fr;align-items:center}
  .indice .an,.indice .vi{grid-row:auto}
}
@media (prefers-reduced-motion:no-preference){a{transition:color .15s}}

.galerie{display:flex;flex-wrap:wrap;align-items:flex-start;gap:1rem;margin:2rem 0 0}
.galerie::after{content:'';flex-grow:1000000}
.galerie figure{flex:var(--r,1.5) 1 calc(var(--r,1.5)*14rem);min-width:0}
@media (max-width:600px){.galerie figure{flex-basis:calc(var(--r,1.5)*8rem)}}
.galerie figure{margin:0}
.galerie img{display:block;width:100%;height:auto}

/* couleur par rubrique (tons de champignons) */
body[data-rubrique="sol"]{--rouge:#a84630;--accent:#84311c}
body[data-rubrique="carpophore"]{--rouge:#6e4468;--accent:#5e3459}
body[data-rubrique="rotting"]{--rouge:#a9521f;--accent:#7a3a0c}
body[data-rubrique="mycorhize"]{--rouge:#5a4a78;--accent:#4b3d66}
body[data-rubrique="contact"]{--rouge:#7d2e2e;--accent:#7d2e2e}
::selection{background:var(--rouge);color:var(--blanc)}
.texte h1::before{content:'';display:block;width:3rem;height:.3rem;background:var(--rouge);margin-bottom:.9rem}
.marque{display:inline-flex;align-items:center;gap:.7rem}
.marque img{display:block;height:4.5rem;width:auto}
@media (max-width:600px){.marque img{height:3.5rem}}
.marque:hover{color:var(--accent)}
.projet ul:first-of-type{border-color:var(--rouge)}
.texte blockquote{margin:1.5rem 0;padding-left:1rem;border-left:.25rem solid var(--rouge)}
.galerie img{transition:none}

/* accueil */
.accroche{font-size:clamp(.85rem,1.2vw,1rem);line-height:1.35;max-width:46rem;margin:0}
.accroche p{margin:0}
.signature{margin:.9rem 0 0;font-family:var(--sans);font-size:0.79rem;letter-spacing:.03em}
.signature a{color:var(--doux);text-decoration:none}
.signature a:hover{color:var(--accent);text-decoration:underline}
/* qui / contact */
.deux{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem}
.deux aside{padding-top:.2rem}
.carte{border-top:1px solid var(--filet);padding:1rem 0}
.carte h3{margin:0 0 .2rem;font-size:1.06rem}
.carte p{margin:.2rem 0;font-size:0.88rem}
@media (max-width:760px){
  .deux{grid-template-columns:1fr}
      }


/* accueil : une seule schermata */
.tous{margin:0;font-size:.78rem}
.tous a{color:var(--doux)}
body[data-rubrique=sol] .cadre{height:100vh;height:100dvh;display:flex;flex-direction:column;padding-bottom:1rem}
body[data-rubrique=sol] header.marge{margin-bottom:.8rem;padding-bottom:.6rem}
body[data-rubrique=sol] main{flex:1;min-height:0;display:flex;flex-direction:column}
.accroche p{margin:0}
body[data-rubrique=sol] .signature{margin:.3rem 0 0}
.filet{border:0;border-top:1px solid var(--filet);margin:.8rem 0}
.trois{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem}
.trois a{position:relative;display:block;min-height:0;overflow:hidden;background:#2a1a0e;color:#fffaf0;text-decoration:none}
.trois img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.trois span{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .6rem .5rem;background:linear-gradient(to top,rgba(20,12,6,.9),rgba(20,12,6,0));font-size:.72rem;line-height:1.35}
.trois strong{display:block;font-weight:400;font-size:.78rem}
.trois a:hover strong,.trois a:focus-visible strong{text-decoration:underline}
body[data-rubrique=sol] .tous{margin:.6rem 0 0}
@media (max-width:760px){.trois{grid-template-columns:1fr;grid-template-rows:repeat(3,1fr)}}

body[data-rubrique=sol]{height:100vh;height:100dvh;display:flex;flex-direction:column}
body[data-rubrique=sol] .cadre{flex:1;min-height:0;height:auto;width:100%}
.filtres p{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .4rem}.filtres a{margin-right:0}

/* site micélisé : réseau de fond, filets en hyphes */
nav,.langues{position:relative;z-index:6}
header.marge{border-bottom:0;position:relative}
header.marge::after{content:none}
.tous,.filtres{position:relative;z-index:6}
.accroche,.signature,.texte,.indice li,.carte,.deux aside,.retour{position:relative;z-index:6}
.trois span{z-index:6}


/* fond gris avec profondeur */
body{background:url('../images/pores.webp') center/cover fixed var(--fond)}
/* photos monochromes virées au brun ; couleur au survol / à la sélection */
.trois img,.indice .vi img,.galerie img,.texte img{filter:var(--riso);transition:filter .45s ease}
.trois a:hover img,.trois a:focus-visible img,.indice a:hover .vi img,.indice a:focus-visible .vi img,.galerie img:hover,.galerie figure:focus-within img,.texte img:hover{filter:none}
@media (prefers-reduced-motion:reduce){.trois img,.indice .vi img,.galerie img,.texte img{transition:none}}


/* voile de mycélium : deux réglages indépendants
   --velo-fond : opacité sur le fond (0 = rien, 1 = très dense)
   --velo-photo : opacité sur les photos */
:root{--velo-fond:.2;--velo-photo:.0;--velo-logo:.2;
  /* encre des photos (risographie) : url(#riso-brun) ou url(#riso-gris) */
  --riso:none}
body::after{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:url('../images/micelio.webp') 0 0/768px,url('../images/micelio.webp') 300px 180px/1100px;opacity:var(--velo-fond)}
.galerie figure,.indice .vi{position:relative}
.trois a::after,.galerie figure::after,.indice .vi::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:url('../images/micelio.webp') fixed 0 0/768px,url('../images/micelio.webp') fixed 300px 180px/1100px;opacity:var(--velo-photo)}
header.marge img{position:relative;z-index:6}
.galerie figcaption{font-size:.7rem;color:var(--doux);margin:.35rem 0 0;line-height:1.4;position:relative;z-index:6}
/* galerie : clic pour voir en grand */
.galerie a.zoom{display:block;cursor:zoom-in}
.lb{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;background:rgba(24,16,10,.94)}
.lb.on{display:flex}
.lb figure{margin:0;max-width:94vw;text-align:center}
.lb img{display:block;max-width:94vw;max-height:84vh;width:auto;height:auto;margin:0 auto;filter:none}
.lb figcaption{margin-top:.6rem;color:#e8e6e1;font-size:.75rem}
.lb button{position:absolute;background:none;border:0;color:#e8e6e1;font:inherit;font-size:2.2rem;line-height:1;cursor:pointer;padding:.5rem .9rem}
.lb button:hover,.lb button:focus-visible{color:#fff;outline:1px solid #e8e6e1}
.lb-x{top:.5rem;right:.5rem}.lb-p{left:.3rem;top:50%;transform:translateY(-50%)}.lb-n{right:.3rem;top:50%;transform:translateY(-50%)}
.lb.seul .lb-p,.lb.seul .lb-n{display:none}
/* page Rotting : vignettes plus grandes */
.indice.grandes .vi{width:9rem;height:6rem}
@media (min-width:56rem){.indice.grandes a{grid-template-columns:9rem 4rem 2fr 2fr 1.2fr}}
@media (max-width:55.99rem){
  .indice.grandes a{grid-template-columns:6.5rem 1fr;align-items:start}
  .indice.grandes .vi{width:6.5rem;height:4.5rem;grid-row:span 4}
  .indice.grandes .an{grid-row:auto}
}
.nb{white-space:nowrap}
.indice.grandes .ti{white-space:nowrap}

/* le micelio passe aussi sur le logo (seulement sur sa forme) */
a.marque{position:relative;display:inline-block;line-height:0}
a.marque::after{content:'';position:absolute;inset:0;z-index:7;pointer-events:none;background:url('../images/micelio.webp') fixed 0 0/768px,url('../images/micelio.webp') fixed 300px 180px/1100px;opacity:var(--velo-logo);-webkit-mask:url('../images/logo.svg') center/contain no-repeat;mask:url('../images/logo.svg') center/contain no-repeat}
.texte img{display:block;max-width:100%;height:auto;margin:1rem 0 .6rem}
.tete{display:flex;gap:1.5rem;align-items:flex-start;position:relative;z-index:6}
.tete .gauche{flex:1 1 auto;min-width:0}
.prochain{flex:0 0 23rem;border-left:1px solid var(--doux);padding-left:1.2rem;font-size:.78rem;line-height:1.35;margin:0}
.prochain a{display:block;color:inherit;text-decoration:none}
.prochain a:hover .pt{text-decoration:underline}
.prochain strong,.prochain .pt,.prochain .pd{display:block}
.prochain strong{font-weight:400;opacity:.7;margin-bottom:.2rem}
.prochain .pd{margin-top:.2rem;opacity:.8}.tete{margin-bottom:.8rem}
@media (max-width:760px){.tete{flex-direction:column;gap:.7rem}.prochain{flex:none;border-left:0;border-top:1px solid var(--doux);padding:.6rem 0 0}}
.legende-galerie{font-size:.78rem;color:var(--doux);margin:.8rem 0 0;position:relative;z-index:6}


/* ===== barre de menu en bas ; l'accueil s'ouvre en bas et se lit en remontant ===== */
.cadre{padding-bottom:9rem}
header.marge{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;padding:.4rem 1.2rem;background:rgba(218,216,210,.94);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:0;border-top:1px solid var(--filet);display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.6rem}
header.marge nav{flex:1 1 auto;display:flex;flex-wrap:wrap;gap:.3rem 1.6rem;align-items:center}
header.marge nav a{color:var(--texte)}
header.marge nav a:hover,header.marge nav a[aria-current]{color:var(--accent);text-decoration:underline;text-decoration-thickness:2px}
header.marge nav .langues{margin-left:auto}
.marque img{height:4.5rem}
@media (max-width:600px){
  .cadre{padding-bottom:11.3rem}
  header.marge{padding:.5rem .8rem;gap:.3rem 1rem}
  header.marge nav,header.marge nav ul{gap:.2rem .9rem}
  header.marge nav{font-size:.78rem}
  .marque img{height:3.5rem}
}
/* sens inversé : la barre en bas, puis le texte, puis les images au-dessus */
.cadre{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;min-height:0;display:flex;flex-direction:column-reverse}
.bloc-images,.bloc{min-width:0}
body[data-rubrique=sol]{height:100vh;height:100dvh;display:flex;flex-direction:column}
body[data-rubrique=sol] .cadre{flex:1;min-height:0;height:auto;padding-bottom:7.6rem}
@media (max-width:600px){body[data-rubrique=sol] .cadre{padding-bottom:10.4rem}}
body[data-rubrique=sol] main{flex-direction:column-reverse}
.bloc-images{margin-bottom:1.6rem}
.tete{margin:.9rem 0 0}
.tous{margin:0 0 .5rem}
body[data-rubrique=sol] .tous{margin:0 0 .5rem}
/* barre en bas : beige brun */
body header.marge,body[data-rubrique=sol] header.marge{margin:0;background:linear-gradient(to bottom,#d3c0a0 0%,#c6ad87 45%,#9a7a54 100%);border-top:0;backdrop-filter:none}
header.marge::before{content:'';position:absolute;left:0;right:0;top:-34px;height:35px;pointer-events:none;
 background:url('../images/micelio.webp') center/640px,linear-gradient(to bottom,rgba(211,192,160,0),#d3c0a0);background-blend-mode:multiply;
 -webkit-mask-image:linear-gradient(to bottom,transparent,#000 85%);mask-image:linear-gradient(to bottom,transparent,#000 85%)}
header.marge::after{content:'';position:absolute;left:0;right:0;top:-34px;height:35px;pointer-events:none;background:linear-gradient(to bottom,rgba(211,192,160,0),rgba(211,192,160,.85) 70%,#d3c0a0)}
header.marge nav{justify-content:center}
@media (min-width:601px){header.marge nav .langues{position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);margin:0}}
.tous,body[data-rubrique=sol] .tous{margin:.6rem 0 .5rem}
header.marge nav,header.marge nav a{font-size:1.15rem}
header.marge nav .langues,header.marge nav .langues a{font-size:1rem}
@media (max-width:600px){header.marge nav,header.marge nav a{font-size:.84rem}header.marge nav,header.marge nav ul{gap:.2rem .7rem}header.marge nav .langues,header.marge nav .langues a{font-size:.84rem}}
/* galerie : lignes inversées, la première ligne est en bas, contre le texte */
.galerie{flex-wrap:wrap-reverse;align-items:flex-end}
/* logo à côté du menu, au centre de la barre */
@media (min-width:601px){header.marge{justify-content:center;gap:0 2rem}header.marge nav{flex:0 1 auto}}
@media (min-width:601px){header.marge nav{position:static}}
@media (min-width:601px) and (max-width:1000px){header.marge{gap:0 1rem}header.marge nav{flex:0 1 auto;gap:.3rem 1rem}header.marge nav>ul{gap:.3rem 1rem}header.marge nav .langues{position:static;transform:none;margin-left:.6rem}header.marge nav,header.marge nav a{font-size:1rem}}
/* téléphone : barre compacte (logo + langues sur une ligne, menu dessous), accueil qui défile */
@media (max-width:600px){
header.marge{padding:.35rem .8rem .45rem;gap:.1rem .8rem}
header.marge nav{display:contents}
header.marge .marque{order:1}
header.marge .marque img{height:2.5rem}
header.marge nav .langues{order:2;margin-left:auto;font-size:.84rem}
header.marge nav>ul:not(.langues){order:3;flex:1 1 100%;display:flex;justify-content:center;gap:.2rem .9rem}
header.marge::before,header.marge::after{top:-22px;height:23px}
.cadre,body[data-rubrique=sol] .cadre{padding-bottom:6.8rem}
}
@media (max-width:760px){
body[data-rubrique=sol]{height:auto;min-height:100vh;min-height:100dvh;display:block}
body[data-rubrique=sol] .cadre{height:auto;min-height:100dvh;flex:none}
.trois{flex:none;grid-template-rows:repeat(3,9rem)}
}

/* lecture normale, de haut en bas : on garde seulement la barre en bas */
main,body[data-rubrique=sol] main{flex-direction:column}
.galerie{flex-wrap:wrap;align-items:flex-start}
.tete,body[data-rubrique=sol] .tete{margin:0 0 .9rem}
.tous,body[data-rubrique=sol] .tous{margin:.6rem 0 .5rem}