/* Dr Philippe Dransart — proposition V5 « L'herbier bleu ». 2Cafés, octobre 2026.
   La V4 (l'herbier : papier à grain, planches numérotées, étiquettes à la machine à écrire, dessins au trait) dans les
   couleurs de la V3 que le client aime : bleu nuit, ivoire, or. Le bandeau et le pied sont de nuit, les pages d'ivoire.
   Instrument Serif (la voix) + Instrument Sans (la lecture) + Courier Prime (les étiquettes). */
:root {
  --papier: #F4EDE2; --papier-2: #ECE3D4; --carte: #FBF8F2; --nuit: #0F233D; --nuit-2: #22395A; --bleu: #4F6C8C; --brume: #8EA2BA;
  --or-3: #7D5E22; --or: #C39A52; --encre: #16202E; --encre-2: #4A5668; --encre-3: #7A8494; --filet: rgba(22, 32, 46, .14); --filet-nuit: rgba(244, 237, 226, .16);
  --serif: 'Instrument Serif', 'Instrument Serif Repli', 'Times New Roman', serif; --sans: 'Instrument Sans', 'Instrument Sans Repli', Arial, sans-serif; --mono: 'Courier Prime', 'Courier New', monospace;
  --r: 6px; --tete: 76px; --ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--tete) + 16px); }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 1.0625rem/1.65 var(--sans); overflow-x: clip; position: relative; }
/* le grain du papier : un bruit SVG très léger posé sur toute la page */
body::before { content: ""; position: fixed; inset: 0; z-index: 90; 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='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; text-decoration-color: var(--or-3); }
a:hover { color: var(--or-3); }
:focus-visible { outline: 2px solid var(--or-3); outline-offset: 3px; }
h1, h2, h3 { margin: 0 0 .5em; font-family: var(--serif); font-weight: 400; line-height: 1; letter-spacing: -.005em; text-wrap: balance; }
h1 { font-size: clamp(3rem, 7vw, 6.4rem); }
h2 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); }
h3 { font-size: 1.7rem; }
h1 em, h2 em, .citation em { font-style: italic; color: var(--or-3); }
p { margin: 0 0 1em; text-wrap: pretty; }
.enveloppe { width: min(1240px, 100% - 2 * clamp(18px, 4.5vw, 56px)); margin-inline: auto; }
.etroit { max-width: 760px; }
.etiq { margin: 0 0 1.1rem; font: 400 .78rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); display: flex; flex-wrap: wrap; gap: .4em .9em; align-items: baseline; }
.etiq-n { font: 400 .78rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--or-3); }
.etiq .etiq-n::after { content: "·"; margin-left: .9em; color: var(--encre-3); }
.etiq a { text-decoration: none; }
.petit { font-size: .9rem; color: var(--encre-2); }
.chapo { font: italic 400 clamp(1.3rem, 2.1vw, 1.7rem)/1.4 var(--serif); color: var(--encre-2); max-width: 44em; }
.num { font: 400 3.4rem/1 var(--serif); color: var(--or); margin: 0 0 .6rem; }
.vh, .pot { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.evitement { position: absolute; left: 12px; top: -80px; background: var(--nuit); color: var(--papier); padding: 10px 16px; border-radius: var(--r); z-index: 100; }
.evitement:focus { top: 12px; }
.lettrine::first-letter { float: left; font: 400 4.4rem/.8 var(--serif); color: var(--or-3); margin: .1em .14em 0 0; }
.lettrine-bloc p:first-child::first-letter { float: left; font: 400 4.6rem/.8 var(--serif); color: var(--or-3); margin: .08em .14em 0 0; }
.onde { display: block; width: min(100%, 320px); height: 12px; color: var(--or-3); margin: .4rem 0 1.4rem; }
mark { background: linear-gradient(transparent 55%, rgba(195, 154, 82, .38) 55%); color: inherit; padding: 0 .1em; }

/* dessins au trait : ils se tracent à l'écran */
.dessin { display: block; color: var(--nuit); }
.trait { stroke-dasharray: 600; stroke-dashoffset: 600; }
.js .vu .trait, .js .dessin.vu .trait { animation: tracer 2.2s var(--ease) forwards; }
.js .vu .trait:nth-child(2), .js .dessin.vu .trait:nth-child(2) { animation-delay: .25s; } .js .vu .trait:nth-child(3), .js .dessin.vu .trait:nth-child(3) { animation-delay: .4s; }
.js .vu .trait:nth-child(4), .js .dessin.vu .trait:nth-child(4) { animation-delay: .55s; } .js .vu .trait:nth-child(5), .js .dessin.vu .trait:nth-child(5) { animation-delay: .7s; }
.js .vu .trait:nth-child(6), .js .dessin.vu .trait:nth-child(6) { animation-delay: .85s; } .js .vu .trait:nth-child(7), .js .dessin.vu .trait:nth-child(7) { animation-delay: 1s; }
.js .vu .trait:nth-child(8), .js .dessin.vu .trait:nth-child(8) { animation-delay: 1.15s; } .js .vu .trait:nth-child(9), .js .dessin.vu .trait:nth-child(9) { animation-delay: 1.3s; } .js .vu .trait:nth-child(10), .js .dessin.vu .trait:nth-child(10) { animation-delay: 1.45s; }
@keyframes tracer { to { stroke-dashoffset: 0; } }
html:not(.js) .trait { stroke-dashoffset: 0; }

/* apparition au défilement */
.js .apparait { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
.js .apparait.vu { opacity: 1; transform: none; }

/* le scotch de l'herbier et les cadres de planche */
.planche-cadre { position: relative; display: block; background: var(--carte); padding: clamp(10px, 1.6vw, 18px); border: 1px solid var(--filet); box-shadow: 0 18px 36px -24px rgba(22, 32, 46, .5); }
.planche-cadre img { width: 100%; }
.scotch { position: absolute; left: 50%; top: -9px; width: 72px; height: 20px; transform: translateX(-50%) rotate(-2deg); background: rgba(222, 216, 204, .8); border: 1px solid rgba(22, 32, 46, .08); box-shadow: 0 1px 2px rgba(22, 32, 46, .12); z-index: 2; }
.planche-etiq { display: grid; gap: .1rem; padding: .7rem .9rem; margin: 0; background: var(--carte); border: 1px solid var(--filet); font: 400 .8rem/1.4 var(--mono); }
.planche-etiq b { font: 400 1.25rem/1.15 var(--serif); }
.planche-etiq i { font: italic 400 .85rem/1.3 var(--sans); color: var(--encre-2); }

/* boutons et liens */
.btn { display: inline-flex; align-items: center; gap: .6em; padding: .95em 1.5em; border-radius: var(--r); background: var(--encre); color: var(--papier); border: 1px solid transparent; font: 600 .92rem/1 var(--sans); text-decoration: none; cursor: pointer; transition: background .3s, color .3s, transform .3s var(--ease); }
.btn:hover { background: var(--or); color: var(--encre); transform: translateY(-1px); }
.btn-nuit { background: var(--nuit); }
.btn-or { background: var(--or); color: var(--encre); }
.btn-or:hover { background: var(--or); }
.btn-ligne { background: transparent; color: var(--encre); border-color: var(--encre); }
.btn-ligne:hover { background: var(--encre); color: var(--papier); }
.btn-ligne-clair { background: transparent; color: var(--papier); border-color: rgba(244, 237, 226, .5); }
.btn-ligne-clair:hover { background: var(--papier); color: var(--nuit); }
.fl { width: 1.05em; height: 1.05em; flex: none; transition: transform .3s var(--ease); }
a:hover .fl, button:hover .fl { transform: translateX(4px); }
.lien-fort { display: inline-flex; align-items: center; gap: .5em; font: 600 .9rem/1.3 var(--sans); text-decoration: none; padding: .3em 0; border: 0; border-bottom: 1px solid var(--or-3); background: none; color: var(--encre); cursor: pointer; }
.lien-fort:hover { color: var(--or-3); }
.lien-fort.clair { color: var(--papier); }
.lien-fort.clair:hover { color: var(--or); }
.actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }
.btn-rond { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--filet); background: transparent; color: inherit; cursor: pointer; transition: background .3s, border-color .3s; }
.btn-rond:hover { border-color: var(--or-3); background: rgba(195, 154, 82, .12); }
.btn-rond svg { width: 20px; height: 20px; }
.lire { display: inline-flex; align-items: center; gap: .4em; font: 600 .84rem/1 var(--sans); color: var(--or-3); margin-top: .8rem; }
.tampon { display: inline-block; padding: .2em .6em; border: 1.5px solid var(--or-3); border-radius: 3px; color: var(--or-3); font: 700 .72rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; transform: rotate(-3deg); }
.tampon.avenir { color: var(--nuit); border-color: var(--nuit); }

/* en-tête */
.tete { position: sticky; top: 0; z-index: 50; background: rgba(244, 237, 226, .9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--filet); }
.tete-in { width: min(1320px, 100% - 2 * clamp(18px, 3vw, 40px)); margin-inline: auto; height: var(--tete); display: flex; align-items: center; gap: 1.5rem; }
.marque { display: flex; align-items: center; gap: .7rem; text-decoration: none; flex: none; }
.marque:hover { color: inherit; }
.marque-signe { width: 40px; height: 40px; color: var(--nuit); }
.marque-txt { display: grid; line-height: 1.1; }
.marque-nom { font: 400 1.3rem/1.05 var(--serif); }
.marque-metier { font: 400 .64rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: .1rem; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: .5rem .7rem; font: 500 .9rem/1 var(--sans); text-decoration: none; white-space: nowrap; color: var(--encre-2); border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.nav a:hover, .nav a[aria-current] { color: var(--encre); border-bottom-color: var(--or-3); }
.nav a[aria-current] { font-weight: 700; }
.tete-outils { display: flex; align-items: center; gap: .4rem; }
.btn-menu { display: none; align-items: center; gap: .6rem; height: 44px; padding: 0 1rem; border-radius: 999px; border: 1px solid var(--filet); background: none; color: inherit; font: 600 .84rem var(--sans); cursor: pointer; }
.btn-menu-traits { width: 18px; height: 10px; border-top: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; }
@media (max-width: 1180px) {
  .btn-menu { display: inline-flex; }
  .nav { position: fixed; inset: var(--tete) 0 0 0; background: var(--papier); padding: 2rem clamp(18px, 4.5vw, 56px); overflow: auto; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: opacity .3s, transform .4s var(--ease), visibility 0s .3s; }
  .menu-ouvert .nav { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .menu-ouvert { overflow: hidden; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav a { font: 400 2rem/1.2 var(--serif); padding: .55rem 0; border-bottom: 1px solid var(--filet); color: var(--encre); }
  .nav a:hover, .nav a[aria-current] { color: var(--or-3); }
  .marque-metier { display: none; }
}
@media (max-width: 640px) {
  .tete-in { gap: .6rem; }
  .marque-nom { font-size: 1.15rem; }
  .btn-menu { padding: 0 .9rem; }
  .btn-menu-txt { display: none; }
}

/* ---------------------------------------------------------------- accueil */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); position: relative; }
.hero-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero h1 { margin-bottom: .45em; }
.hero .chapo { font-size: clamp(1.2rem, 1.9vw, 1.5rem); }
.medaillon { position: relative; margin: 0; width: min(100%, 460px); justify-self: center; padding: 1.5rem 1.5rem 0; }
.medaillon-cadre { position: relative; border-radius: 50% / 46%; overflow: hidden; border: 1px solid var(--filet); box-shadow: 0 30px 50px -34px rgba(22, 32, 46, .6); background: var(--carte); padding: 10px; }
.medaillon-cadre::before { content: ""; position: absolute; inset: 10px; border-radius: 50% / 46%; border: 1px solid var(--or-3); opacity: .7; z-index: 1; pointer-events: none; }
.medaillon-cadre img { border-radius: 50% / 46%; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.medaillon .scotch-g { left: 18%; top: 1.2rem; transform: rotate(-32deg); }
.medaillon .scotch-d { left: auto; right: 18%; top: 1.2rem; transform: rotate(32deg); }
.medaillon-fleur { position: absolute; left: -4%; bottom: 3rem; width: 34%; color: var(--nuit); filter: drop-shadow(0 6px 10px rgba(22, 32, 46, .15)); }
.fiche-specimen { position: relative; display: grid; gap: .15rem; width: min(100%, 300px); margin: -2.2rem 0 0 auto; padding: .9rem 1.1rem; background: var(--carte); border: 1px solid var(--filet); box-shadow: 0 14px 30px -22px rgba(22, 32, 46, .5); font: 400 .78rem/1.5 var(--mono); color: var(--encre-2); transform: rotate(1.2deg); }
.fiche-specimen b { font: 400 1.25rem/1.15 var(--serif); color: var(--encre); }

.annonce { margin: clamp(2rem, 4vw, 3rem) auto; }
.annonce-in { position: relative; display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; padding: clamp(1.2rem, 2.5vw, 1.8rem) clamp(1.3rem, 3vw, 2.4rem); background: var(--carte); border: 1px dashed var(--encre-3); text-decoration: none; }
.annonce-in:hover { color: inherit; border-color: var(--or-3); }
.annonce-in .tampon { position: absolute; right: clamp(1rem, 3vw, 2.4rem); top: -.7rem; background: var(--papier); }
.annonce-date { display: grid; justify-items: center; text-align: center; padding-right: clamp(1.2rem, 3vw, 2.4rem); border-right: 1px solid var(--filet); font: 400 .78rem/1.3 var(--mono); text-transform: uppercase; color: var(--encre-2); }
.annonce-date b { font: 400 2.6rem/1 var(--serif); color: var(--encre); }
.annonce-date b:last-child { font-size: .78rem; font-family: var(--mono); color: var(--encre-2); margin-top: .3rem; }
.annonce-txt { display: grid; gap: .2rem; }
.annonce-txt .etiq { margin: 0; }
.annonce-titre { font: 400 clamp(1.3rem, 2.2vw, 1.8rem)/1.2 var(--serif); }
.annonce-plus { color: var(--encre-2); }
.annonce .lire { margin: 0; white-space: nowrap; }

.pierre { padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
.carnet { max-width: 820px; margin-inline: auto; padding: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.4rem); background: var(--carte); border: 1px solid var(--filet); box-shadow: 0 24px 50px -36px rgba(22, 32, 46, .5); background-image: repeating-linear-gradient(transparent 0 31px, rgba(22, 32, 46, .06) 31px 32px); background-origin: content-box; }
.citation { font: 400 clamp(2rem, 4.4vw, 3.8rem)/1.1 var(--serif); margin: 0 0 1.2rem; }
.pierre-txt { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--encre-2); }
.pierre-note { font: italic 400 1.1rem/1.4 var(--serif); color: var(--encre-3); margin: 0; }

.langage { background: var(--nuit); color: var(--papier); padding: clamp(4rem, 8vw, 7rem) 0; margin-top: clamp(3rem, 6vw, 5rem); }
.deux-col { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); }
.deux-col h2 { font-size: clamp(2rem, 3.2vw, 2.9rem); color: #FBF8F2; }
.deux-col p:not(.num) { color: var(--brume); }
.langage .lettrine::first-letter { color: var(--or); }

.germe { padding: clamp(5rem, 9vw, 8rem) 0 clamp(4rem, 7vw, 6rem); }
.germe-in { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.germe-dessin .dessin { width: min(100%, 320px); margin-inline: auto; }
.germe p:not(.etiq) { color: var(--encre-2); max-width: 44em; }
.sept-liste-accueil { list-style: none; margin: 1.5rem 0 0; padding: 0; border-top: 1px solid var(--filet); }
.sept-liste-accueil a { display: grid; grid-template-columns: 3rem 1fr auto; gap: 1rem; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--filet); text-decoration: none; font: 400 1.3rem/1.2 var(--serif); transition: color .25s, padding-left .3s var(--ease); }
.sept-liste-accueil a:hover { color: var(--or-3); padding-left: .4rem; }
.sept-liste-accueil .fl { color: var(--or-3); }

.planches { padding: 0 0 clamp(5rem, 9vw, 8rem); }
.planches-tete, .journal-tete { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.planches-tete p:not(.etiq), .journal-tete p:not(.etiq) { color: var(--encre-2); margin: 0; max-width: 46em; }
.herbier { list-style: none; margin: 0 0 2.5rem; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.6rem) clamp(1rem, 2.5vw, 2rem); }
.planche a { display: grid; gap: .6rem; text-decoration: none; transition: transform .5s var(--ease); }
.planche a:hover { transform: translateY(-6px); color: inherit; }
.planche:nth-child(odd) .planche-cadre { transform: rotate(-.8deg); } .planche:nth-child(even) .planche-cadre { transform: rotate(.7deg); }
.planche .planche-cadre { padding: clamp(14px, 2vw, 22px) clamp(14px, 2vw, 22px) clamp(10px, 1.6vw, 16px); }
.planche .planche-cadre img { width: min(100%, 160px); margin-inline: auto; }
.planche a:hover b { color: var(--or-3); }

.partage { padding: 0 0 clamp(5rem, 9vw, 8rem); }
.specimens { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.2rem, 2.5vw, 2rem); }
.specimen { position: relative; background: var(--carte); border: 1px solid var(--filet); padding: clamp(1.6rem, 3vw, 2.4rem); display: flex; flex-direction: column; box-shadow: 0 18px 36px -30px rgba(22, 32, 46, .5); }
.specimen-dessin { display: block; height: 120px; margin-bottom: 1.2rem; }
.specimen-dessin .dessin { height: 100%; width: auto; }
.specimen .etiq { margin-bottom: .6rem; }
.specimen p:not(.etiq) { color: var(--encre-2); font-size: .97rem; flex: 1; }

.journal { padding: 0 0 clamp(5rem, 9vw, 8rem); }
.arts { list-style: none; margin: 0 0 2rem; padding: 0; border-top: 1px solid var(--filet); }
.art a { display: grid; grid-template-columns: 110px 1fr 180px; gap: clamp(1.2rem, 3vw, 2.5rem); padding: 1.5rem 0; border-bottom: 1px solid var(--filet); text-decoration: none; align-items: start; }
.art a:hover { color: inherit; }
.art-date time { display: grid; font: 400 .78rem/1.3 var(--mono); text-transform: uppercase; color: var(--encre-2); }
.art-date time::first-line { font: 400 2.4rem/1 var(--serif); color: var(--encre); }
.art-date i { font-style: normal; }
.art-txt .etiq { margin-bottom: .4rem; }
.art-txt h2, .art-txt h3 { font-size: clamp(1.4rem, 2vw, 1.9rem); margin-bottom: .4rem; transition: color .3s; }
.art a:hover h2, .art a:hover h3 { color: var(--or-3); }
.art-ex { display: block; color: var(--encre-2); font-size: .97rem; }
.art-vis { display: block; border: 1px solid var(--filet); background: var(--carte); padding: 8px; aspect-ratio: 4 / 3; }
.art-vis img { width: 100%; height: 100%; object-fit: cover; }
.art-vis .dessin { height: 100%; width: auto; margin-inline: auto; color: var(--bleu); }

/* ---------------------------------------------------------------- pages intérieures */
.page-tete { padding: clamp(3rem, 7vw, 6rem) 0 clamp(2rem, 4vw, 3rem); }
.page-tete h1 { max-width: 16ch; }
.tete-longue .chapo { max-width: 60em; font-size: 1.25rem; }
.lecture { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.lecture span { display: block; height: 100%; background: var(--or-3); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.sept { padding: 1rem 0 4rem; }
.sept-grille { display: grid; grid-template-columns: 300px 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: start; }
.sommaire { position: sticky; top: calc(var(--tete) + 24px); }
.sommaire ol { list-style: none; margin: 0 0 1.5rem; padding: 0; border-top: 1px solid var(--filet); }
.sommaire a { display: grid; grid-template-columns: 2.4rem 1fr; gap: .6rem; align-items: start; padding: .55rem 0; border-bottom: 1px solid var(--filet); text-decoration: none; font-size: .93rem; color: var(--encre-2); line-height: 1.35; transition: color .2s, padding-left .3s var(--ease); }
.som-n { font: 400 .8rem/1.6 var(--mono); color: var(--or-3); }
.sommaire a:hover, .sommaire a.actif { color: var(--encre); }
.sommaire a.actif { padding-left: .4rem; border-bottom-color: var(--or-3); }
.sept-outils { display: flex; gap: 1.2rem; }
.sommaire-brin { width: 90px; margin-top: 2.5rem; color: var(--bleu); }
.point { border-top: 1px solid var(--filet); }
.point:last-child { border-bottom: 1px solid var(--filet); }
.point summary { list-style: none; display: grid; grid-template-columns: 4.2rem 1fr 2.5rem; align-items: center; gap: 1rem; padding: 1.6rem 0; cursor: pointer; }
.point summary::-webkit-details-marker { display: none; }
.point-n { font: 400 .95rem/1 var(--mono); color: var(--or-3); letter-spacing: .06em; }
.point-t { font: 400 clamp(1.5rem, 2.4vw, 2.1rem)/1.15 var(--serif); }
.point-ico { width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--filet); position: relative; transition: transform .35s var(--ease), background .3s; }
.point-ico::before, .point-ico::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1px; background: currentColor; transform: translate(-50%, -50%); }
.point-ico::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .35s var(--ease); }
.point[open] .point-ico { background: var(--nuit); border-color: var(--nuit); color: var(--papier); }
.point[open] .point-ico::after { transform: translate(-50%, -50%) rotate(0); }
.point summary:hover .point-t { color: var(--or-3); }
.point-corps { padding: 0 0 2.4rem 5.2rem; max-width: 760px; }
.prose { font-size: 1.06rem; }
.prose p, .prose li { color: #2A3444; }
.prose h2 { font-size: 2rem; margin-top: 2rem; }
.prose h3 { font-size: 1.5rem; margin-top: 1.8rem; }
.prose h4 { font: 600 1rem var(--sans); margin: 1.6rem 0 .5rem; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; }
.prose blockquote { margin: 1.8rem 0; padding: .2rem 0 .2rem 1.4rem; border-left: 2px solid var(--or-3); font: italic 400 1.35rem/1.45 var(--serif); }
.prose a { color: var(--or-3); }
.prose figure { margin: 2rem 0; background: var(--carte); border: 1px solid var(--filet); padding: 10px; }
.prose figure img { margin-inline: auto; max-height: 560px; width: auto; }
.prose strong { font-weight: 700; }
.signature { font: italic 400 1.4rem var(--serif); color: var(--or-3); }
.diapo { padding: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 7rem); }
.diapo-in { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; background: var(--nuit); color: var(--papier); overflow: hidden; }
.diapo-vis img { width: 100%; height: 100%; object-fit: cover; min-height: 280px; }
.diapo-txt { padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem) 0; }
.diapo-txt .etiq { color: var(--brume); } .diapo-txt h2 { color: #FBF8F2; } .diapo-txt p:not(.etiq) { color: var(--brume); }

/* ouvrages */
.ouvrages { padding-bottom: 3rem; }
.liste-ouvrages { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.ouvrage { display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--carte); border: 1px solid var(--filet); }
.ouvrage-couv { width: min(100%, 190px); margin-inline: auto; background: var(--papier); }
.ouvrage-couv img { width: 100%; }
.ouvrage h2 { font-size: clamp(1.8rem, 2.8vw, 2.5rem); margin-bottom: .2rem; }
.ouvrage h2 a { text-decoration: none; }
.sous { font: italic 400 1.3rem/1.35 var(--serif); color: var(--encre-2); margin-bottom: .9rem; }
.ouvrage p:not(.sous):not(.etiq) { color: var(--encre-2); }
.libs { padding: clamp(3rem, 6vw, 5rem) 0 clamp(5rem, 9vw, 8rem); }
.libs-in { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; border-top: 1px solid var(--filet); padding-top: clamp(2rem, 4vw, 3rem); }
.libs-l { list-style: none; margin: 0; padding: 0; }
.libs-l li { border-bottom: 1px solid var(--filet); }
.libs-l a { display: flex; justify-content: space-between; align-items: center; padding: .9rem 0; text-decoration: none; font: 400 1.45rem var(--serif); }
.libs-num { grid-column: 1 / -1; color: var(--encre-2); font-size: .95rem; }
.fiche { padding: clamp(3rem, 6vw, 5rem) 0; }
.fiche-grille { display: grid; grid-template-columns: minmax(240px, 380px) 1fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.fiche-couv { position: sticky; top: calc(var(--tete) + 24px); display: grid; gap: 0; }
.planche-cadre.grande { padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--papier-2); }
.planche-cadre.grande img { width: min(100%, 200px); margin-inline: auto; }
.planche-cadre.grande.hd img { width: min(100%, 280px); }
.fiche-couv .planche-etiq { border-top: 0; }
.fiche h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); }
.bio { font-size: .95rem; color: var(--encre-2); border-left: 2px solid var(--or-3); padding-left: 1rem; margin: 2rem 0; }
.fiche-ou { border-top: 1px solid var(--filet); padding-top: 1.5rem; margin-top: 2rem; }
.fiche-ou h2 { font-size: 1.8rem; }
.fiche-ou ul { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; }
.fiche-ou p { font-size: .92rem; color: var(--encre-2); }
.voisins { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--filet); padding-top: 1.5rem; }
.voisin { display: flex; align-items: center; gap: 1rem; text-decoration: none; }
.voisin.suiv { flex-direction: row-reverse; text-align: right; }
.voisin img { width: 56px; border: 1px solid var(--filet); }
.voisin span { display: grid; font: 400 1.25rem/1.2 var(--serif); }
.voisin small { font: 400 .72rem/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); }

/* vidéos */
.sauts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.sauts a { display: inline-flex; align-items: center; gap: .6em; padding: .7em 1.2em; border: 1px solid var(--filet); background: var(--carte); text-decoration: none; font: 600 .9rem var(--sans); }
.sauts b { color: var(--or-3); font-weight: 600; }
.salle { padding-bottom: clamp(3rem, 6vw, 5rem); }
.salle-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; border-bottom: 1px solid var(--filet); padding-bottom: .8rem; margin-bottom: 1.5rem; }
.salle-tete p { margin: 0; color: var(--encre-2); }
.tuiles { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.tuiles.t4 { grid-template-columns: repeat(4, 1fr); }
.tuile { background: var(--carte); border: 1px solid var(--filet); overflow: hidden; }
.tuile-in { display: grid; align-content: start; gap: .3rem; width: 100%; min-height: 230px; padding: 1.4rem; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.tuile-in .etiq { margin: 0 0 .2rem; }
.tuile-t { font: 400 1.5rem/1.15 var(--serif); }
.tuile-s { font-size: .9rem; color: var(--encre-2); }
.tuile-jouer { margin-top: auto; display: flex; align-items: center; gap: .6rem; font: 400 .74rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--nuit); padding-top: 1rem; }
.jouer { width: 42px; height: 42px; transition: transform .4s var(--ease); }
.facade:hover .jouer { transform: scale(1.08); }
.facade:hover .tuile-t { color: var(--or-3); }
.tuile-vide { opacity: .7; }
.avec-img { position: relative; padding: 0; min-height: 0; aspect-ratio: 16 / 10; color: var(--papier); }
.avec-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tuile-voile { position: relative; display: grid; align-content: end; gap: .3rem; height: 100%; padding: 1.2rem; background: linear-gradient(to top, rgba(15, 35, 61, .94), rgba(15, 35, 61, .1) 70%); }
.tuile-voile .etiq { color: var(--brume); } .tuile-voile .tuile-jouer { color: var(--papier); }
.lecteur { position: relative; aspect-ratio: 16 / 9; background: #000; }
.lecteur iframe, .lecteur video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* causeries, formulaires */
.causeries { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-bottom: clamp(4rem, 8vw, 7rem); }
.formulaire { background: var(--carte); border: 1px solid var(--filet); padding: clamp(1.5rem, 3vw, 2.5rem); }
.formulaire h2 { font-size: 2rem; }
.champ { display: grid; gap: .35rem; margin-bottom: 1rem; }
.champ label { font: 400 .78rem var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); }
.champ input, .champ textarea { width: 100%; padding: .85em 1em; border: 1px solid var(--filet); border-radius: var(--r); background: var(--papier); color: var(--encre); font: inherit; transition: border-color .25s, box-shadow .25s; }
.champ input:focus, .champ textarea:focus { outline: none; border-color: var(--or-3); box-shadow: 0 0 0 3px rgba(195, 154, 82, .18); }
.champ [aria-invalid="true"] { border-color: #A8402C; }
.case { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; font-size: .95rem; }
.form-retour { margin: .9rem 0 0; font-size: .92rem; min-height: 1.2em; }
.form-retour.ok { color: var(--nuit); } .form-retour.ko { color: #A8402C; }
.form-liens { display: flex; gap: 1.4rem; margin: 1.2rem 0 0; font-size: .92rem; }
.themes { background: var(--nuit); color: var(--papier); padding: clamp(4rem, 8vw, 7rem) 0; }
.themes-in { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); }
.themes-tete .etiq { color: var(--brume); } .themes h2 { color: #FBF8F2; } .themes-tete p:not(.etiq) { color: var(--brume); }
.themes-tete a:not(.lien-fort) { color: var(--or); }
.liste-th { list-style: none; margin: 0; padding: 0; }
.liste-th li { display: grid; grid-template-columns: 3rem 1fr; gap: .2rem 1rem; padding: 1rem 0; border-bottom: 1px solid var(--filet-nuit); }
.th-n { grid-row: span 2; font: 400 .8rem/1.9 var(--mono); color: var(--or); }
.th-t { font: 400 1.5rem/1.2 var(--serif); }
.th-s { font-size: .9rem; color: var(--brume); }
.resumes { padding: clamp(4rem, 8vw, 7rem) 0; }
.docs { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.docs a { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; padding: 1.2rem 1.4rem; background: var(--carte); border: 1px solid var(--filet); text-decoration: none; }
.docs a .etiq { grid-column: 1; margin: 0; }
.docs a b { font: 400 1.5rem/1.15 var(--serif); grid-column: 1; }
.docs a .fl { grid-column: 2; grid-row: 1 / span 2; width: 1.4em; height: 1.4em; color: var(--or-3); }

/* actualités, articles */
.journal-page { padding-bottom: clamp(4rem, 8vw, 7rem); }
.puces { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; }
.puce { padding: .55em 1.1em; border: 1px solid var(--filet); background: var(--carte); color: var(--encre-2); font: 400 .78rem var(--mono); text-transform: uppercase; letter-spacing: .04em; cursor: pointer; transition: background .25s, color .25s; }
.puce:hover, .puce[aria-pressed="true"] { background: var(--nuit); color: var(--papier); border-color: var(--nuit); }
.article .page-tete h1 { max-width: 22ch; font-size: clamp(2.4rem, 5vw, 4.2rem); }
.art-une { margin: 0 0 2.5rem; background: var(--carte); border: 1px solid var(--filet); padding: 10px; }
.art-une.affiche { max-width: 460px; }
.art-corps { padding-bottom: 1rem; }
.art-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 3rem 0 clamp(3rem, 6vw, 5rem); border-top: 1px solid var(--filet); padding-top: 1.5rem; }
.art-nav a { display: grid; gap: .2rem; text-decoration: none; font: 400 1.3rem/1.2 var(--serif); }
.art-nav a:last-child { text-align: right; }
.art-nav small { font: 400 .72rem/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); }
.note-maquette, .renvoi { font-size: .95rem; }

/* agenda */
.agenda { padding-bottom: clamp(4rem, 8vw, 7rem); }
.liste-ev { list-style: none; margin: 0; padding: 0; }
.ev { display: grid; grid-template-columns: 130px 1fr 200px; gap: clamp(1.2rem, 3vw, 2.5rem); align-items: start; padding: 1.8rem 0; border-bottom: 1px solid var(--filet); }
.ev-date { margin: 0; display: grid; justify-items: start; font: 400 .78rem/1.3 var(--mono); text-transform: uppercase; color: var(--encre-2); }
.ev-date b { font: 400 3rem/1 var(--serif); color: var(--encre); }
.ev-date b:last-of-type { font-size: .78rem; font-family: var(--mono); color: var(--encre-2); margin-top: .2rem; }
.ev-date .tampon { margin-top: .8rem; }
.ev.passe .ev-date b:first-child { color: var(--encre-3); }
.ev-txt h2 { font-size: clamp(1.6rem, 2.6vw, 2.3rem); margin-bottom: .3rem; }
.ev-s { font: italic 400 1.2rem/1.4 var(--serif); color: var(--encre-2); }
.ev-lieu { font-weight: 600; }
.ev-txt p { color: var(--encre-2); margin-bottom: .5rem; }
.ev-l { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: .8rem; }
.ev-aff { padding: 8px; }
.ev:nth-child(odd) .ev-aff { transform: rotate(-1deg); } .ev:nth-child(even) .ev-aff { transform: rotate(1deg); }
.visionneuse { border: 0; padding: 0; background: transparent; max-width: min(92vw, 820px); max-height: 92vh; }
.visionneuse::backdrop { background: rgba(22, 32, 46, .85); }
.visionneuse img { max-height: 92vh; width: auto; }
.visionneuse form { position: absolute; top: 8px; right: 8px; }
.visionneuse .btn-rond { background: var(--papier); }

/* contact */
.portes-contact { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.etiquette-porte { display: grid; gap: .4rem; padding: clamp(1.6rem, 3vw, 2.4rem); background: var(--carte); border: 1px dashed var(--encre-3); text-decoration: none; transition: border-color .3s, transform .5s var(--ease); }
.etiquette-porte:hover { border-color: var(--or-3); transform: translateY(-4px); color: inherit; }
.etiquette-porte b { font: 400 1.7rem/1.15 var(--serif); max-width: 22ch; }
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-bottom: clamp(4rem, 8vw, 7rem); }
.perso { background: var(--carte); border-top: 1px solid var(--filet); padding: clamp(4rem, 8vw, 7rem) 0; }
.perso h2 { max-width: 30ch; }
.perso-s { font: italic 400 1.4rem/1.4 var(--serif); color: var(--encre-2); margin-bottom: 2.5rem; }
.perso-grille { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); }
.conseils { list-style: none; margin: 0; padding: 0; }
.conseils li { padding: 1.4rem 0; border-top: 1px solid var(--filet); }
.conseils h3 { font-size: 1.7rem; margin: .4rem 0; }
.conseils p { color: var(--encre-2); font-size: .97rem; }

/* espace membres, téléchargements, mentions */
.espace { display: grid; grid-template-columns: 1fr .8fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-bottom: clamp(4rem, 8vw, 7rem); }
.espace > div > h2 { font-size: 2.1rem; }
.espace > div > p { color: var(--encre-2); }
.ressources { border-left: 1px solid var(--filet); padding-left: clamp(1.5rem, 3vw, 2.5rem); }
.ressources h2 { font-size: 1.9rem; }
.mini { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.mini a { display: grid; gap: .1rem; padding: .7rem 0; border-bottom: 1px solid var(--filet); text-decoration: none; font: 400 1.25rem/1.2 var(--serif); }
.mini time { font: 400 .72rem/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--encre-2); }
.raccourcis { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem; }
.dl { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; padding-bottom: clamp(4rem, 8vw, 7rem); }
.mentions { padding-bottom: clamp(4rem, 8vw, 7rem); }

/* recherche */
.recherche { border: 1px solid var(--filet); padding: 0; width: min(92vw, 680px); background: var(--carte); color: var(--encre); box-shadow: 0 40px 80px -40px rgba(22, 32, 46, .6); }
.recherche::backdrop { background: rgba(22, 32, 46, .6); backdrop-filter: blur(4px); }
.recherche-in { display: flex; align-items: center; gap: .6rem; padding: .8rem .8rem .8rem 1.4rem; border-bottom: 1px solid var(--filet); }
.recherche-in input { flex: 1; border: 0; background: none; font: 400 1.5rem var(--serif); color: inherit; outline: none; min-width: 0; }
.recherche-res { list-style: none; margin: 0; padding: .5rem; max-height: 60vh; overflow: auto; }
.recherche-res a { display: grid; gap: .1rem; padding: .7rem .9rem; text-decoration: none; }
.recherche-res a:hover { background: var(--papier); }
.recherche-res small { font: 400 .72rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--or-3); }
.recherche-res b { font: 400 1.25rem/1.25 var(--serif); }
.recherche-res .vide { padding: 1rem; color: var(--encre-2); }

/* pied */
.pied { background: var(--nuit); color: var(--papier); padding: clamp(4rem, 8vw, 7rem) 0 2rem; }
.pied-in { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 6rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid var(--filet-nuit); }
.pied .etiq { color: var(--brume); }
.pied h2 { color: #FBF8F2; font-size: clamp(2rem, 3.2vw, 2.9rem); }
.pied h2 em { color: var(--or); }
.pied-lettre p:not(.etiq):not(.form-retour) { color: var(--brume); }
.form-lettre { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.4rem; }
.form-lettre input { flex: 1 1 240px; padding: .9em 1.1em; border: 1px solid var(--filet-nuit); border-radius: var(--r); background: rgba(255, 255, 255, .06); color: var(--papier); font: inherit; }
.form-lettre input:focus { outline: none; border-color: var(--or); }
.form-lettre .form-retour { flex-basis: 100%; }
.pied-colonnes { display: grid; grid-template-columns: 1fr 1fr auto; gap: 2rem; }
.pied ul { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.pied li a { display: inline-block; padding: .22rem 0; text-decoration: none; color: var(--brume); }
.pied li a:hover { color: var(--or); }
.pied .lien-fort { color: var(--papier); }
.pied-brin { width: 70px; color: var(--brume); opacity: .8; }
.pied-bas { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.4rem; font-size: .82rem; color: var(--brume); }
.pied-bas p { margin: 0; }

/* ---------------------------------------------------------------- écrans */
@media (max-width: 1000px) {
  .hero-in { grid-template-columns: 1fr; }
  .medaillon { max-width: 420px; }
  .annonce-in { grid-template-columns: auto 1fr; }
  .annonce .lire { grid-column: 2; }
  .deux-col, .planches-tete, .journal-tete, .libs-in, .causeries, .contact, .perso-grille, .espace, .dl, .themes-in, .pied-in, .diapo-in, .germe-in { grid-template-columns: 1fr; }
  .germe-dessin .dessin { width: min(100%, 220px); margin: 0; }
  .herbier { grid-template-columns: repeat(3, 1fr); }
  .specimens, .tuiles, .tuiles.t4 { grid-template-columns: repeat(2, 1fr); }
  .sept-grille { grid-template-columns: 1fr; }
  .sommaire { position: static; }
  .sommaire ol { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 1.5rem; }
  .sommaire-brin { display: none; }
  .fiche-grille { grid-template-columns: 1fr; }
  .fiche-couv { position: static; max-width: 380px; }
  .ev { grid-template-columns: 110px 1fr; }
  .ev-aff { grid-column: 2; max-width: 220px; }
  .art a { grid-template-columns: 90px 1fr; }
  .art-vis { grid-column: 2; max-width: 240px; }
  .ressources { border-left: 0; padding-left: 0; border-top: 1px solid var(--filet); padding-top: 2rem; }
  .pied-colonnes { grid-template-columns: 1fr 1fr; }
  .pied-brin { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 1rem; }
  h1 { font-size: clamp(2.6rem, 12vw, 3.6rem); }
  .medaillon { padding: 1.2rem .6rem 0; }
  .medaillon-fleur { left: -2%; width: 30%; }
  .fiche-specimen { margin-top: -1.4rem; width: min(100%, 260px); }
  .annonce-in { grid-template-columns: 1fr; gap: 1rem; padding: 1.3rem; }
  .annonce-in .tampon { right: 1rem; }
  .annonce-date { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--filet); padding-bottom: .8rem; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: .5rem; }
  .annonce-date b { font-size: 2rem; }
  .annonce .lire { grid-column: 1; }
  .herbier { grid-template-columns: repeat(2, 1fr); }
  .specimens, .tuiles, .tuiles.t4, .docs, .portes-contact { grid-template-columns: 1fr; }
  .art a { grid-template-columns: 1fr; gap: .8rem; }
  .art-vis { grid-column: 1; }
  .ouvrage { grid-template-columns: 1fr; text-align: center; }
  .ouvrage .etiq { justify-content: center; }
  .ouvrage .lien-fort { margin-inline: auto; }
  .point summary { grid-template-columns: 2.6rem 1fr 2.2rem; }
  .point-corps { padding-left: 0; }
  .voisins, .art-nav { grid-template-columns: 1fr; }
  .voisin.suiv { flex-direction: row; text-align: left; }
  .art-nav a:last-child { text-align: left; }
  .ev { grid-template-columns: 1fr; }
  .ev-date { grid-auto-flow: column; align-items: baseline; gap: .5rem; }
  .ev-date b { font-size: 2.2rem; }
  .ev-date .tampon { margin: 0 0 0 .6rem; }
  .ev-aff { grid-column: 1; }
  .pied-colonnes { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; transition-duration: .001s !important; }
  .js .apparait { opacity: 1; transform: none; }
  .trait { stroke-dashoffset: 0; }
}
.sans-anim *, .sans-anim *::before, .sans-anim *::after { animation: none !important; transition: none !important; }
.sans-anim .apparait { opacity: 1; transform: none; }
.sans-anim .trait { stroke-dashoffset: 0; }

/* ---------------------------------------------------------------- V5 : le bandeau de nuit, le héros de nuit, le cycle 2027 */
.tete { background: rgba(15, 35, 61, .9); color: var(--papier); border-bottom-color: var(--filet-nuit); }
.marque-signe { color: var(--or); }
.marque-metier { color: var(--brume); }
.nav a { color: var(--brume); }
.nav a:hover, .nav a[aria-current] { color: var(--papier); border-bottom-color: var(--or); }
.tete .btn-rond, .tete .btn-menu { border-color: var(--filet-nuit); }
.tete .btn-rond:hover { border-color: var(--or); background: rgba(195, 154, 82, .18); }
@media (max-width: 1180px) {
  .nav { background: var(--nuit); }
  .nav a { color: var(--papier); border-bottom-color: var(--filet-nuit); }
  .nav a:hover, .nav a[aria-current] { color: var(--or); }
}

/* l'accueil commence dans la nuit, comme la V3 : le médaillon est une fiche d'ivoire épinglée sur le bleu, et l'aube d'or monte du bas */
.hero { background: var(--nuit); color: var(--papier); padding-bottom: clamp(5rem, 9vw, 8rem); overflow: clip; }
.hero::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -35%; height: 80%; background: radial-gradient(55% 60% at 50% 100%, rgba(195, 154, 82, .3), rgba(195, 154, 82, 0) 70%); pointer-events: none; }
.hero-in { position: relative; }
.hero .etiq { color: var(--brume); } .hero .etiq-n { color: var(--or); } .hero .etiq .etiq-n::after { color: var(--brume); }
.hero h1 { color: var(--carte); } .hero h1 em { color: var(--or); }
.hero .chapo { color: var(--brume); }
.hero .btn-nuit { background: var(--or); color: var(--nuit); } .hero .btn-nuit:hover { background: var(--carte); color: var(--nuit); }
.hero .btn-ligne { color: var(--papier); border-color: rgba(244, 237, 226, .45); } .hero .btn-ligne:hover { background: var(--papier); color: var(--nuit); }
.hero .medaillon-cadre { border-color: transparent; box-shadow: 0 40px 70px -34px rgba(0, 0, 0, .7); }
.hero .medaillon-cadre::before { border-color: var(--or); }
/* sur la nuit, le ruban doit tenir le cadre (posé sur la courbe de l'ovale, translucide) et la fleur se dessine en or, à gauche du médaillon, sans passer sur la fiche */
.hero .medaillon .scotch-g, .hero .medaillon .scotch-d { top: 4rem; width: 80px; height: 22px; background: rgba(244, 237, 226, .5); border-color: rgba(244, 237, 226, .35); box-shadow: 0 2px 4px rgba(0, 0, 0, .35); z-index: 3; }
.hero .medaillon .scotch-g { left: 20%; transform: rotate(-40deg); }
.hero .medaillon .scotch-d { right: 20%; transform: rotate(40deg); }
.hero .medaillon-fleur { left: -9%; bottom: 3.5rem; width: 36%; color: var(--or); filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .55)); }
.hero .medaillon-fleur .dessin { color: var(--or); }
.hero .medaillon-fleur .trait { stroke-width: 1.6; }
.hero .medaillon-fleur circle[fill] { fill: var(--carte); }
@media (max-width: 640px) { .hero .medaillon .scotch-g, .hero .medaillon .scotch-d { top: 3.2rem; width: 64px; } .hero .medaillon-fleur { left: -3%; width: 30%; bottom: 3rem; } }
.hero .fiche-specimen { box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .7); z-index: 4; }   /* au-dessus de l'anneau d'or (::before, z-index 1) et du ruban */
.annonce { position: relative; z-index: 2; margin-top: calc(-1 * clamp(3rem, 6vw, 5rem)); }
.annonce-in { box-shadow: 0 30px 60px -40px rgba(15, 35, 61, .7); }
.annonce-titre em { color: var(--or-3); font-style: italic; }

/* la fenêtre du prochain cycle */
.cycle { border: 0; padding: 0; width: min(92vw, 600px); max-height: 92vh; overflow: auto; background: var(--carte); color: var(--encre); box-shadow: 0 40px 90px -40px rgba(15, 35, 61, .8); }
.cycle::backdrop { background: rgba(15, 35, 61, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cycle[open] { animation: cycle-ouvrir .6s var(--ease); }
@keyframes cycle-ouvrir { from { opacity: 0; transform: translateY(16px); } }
.cycle-haut { position: relative; background: var(--nuit); color: var(--papier); padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 4vw, 2.4rem) clamp(1.2rem, 3vw, 1.8rem); overflow: hidden; }
.cycle-haut .etiq { color: var(--brume); margin: 0 3rem .8rem 0; } .cycle-haut .etiq-n { color: var(--or); } .cycle-haut .etiq .etiq-n::after { color: var(--brume); }
.cycle-haut h2 { font-size: clamp(1.9rem, 4.5vw, 2.7rem); margin: 0; color: var(--carte); max-width: 15ch; position: relative; z-index: 1; } .cycle-haut h2 em { color: var(--or); }
.cycle-brin { position: absolute; right: clamp(.6rem, 3vw, 2rem); bottom: -1.4rem; width: 86px; color: var(--brume); opacity: .7; }
.cycle-brin .dessin { color: inherit; }
.cycle-haut form { position: absolute; top: .7rem; right: .7rem; margin: 0; z-index: 2; }
.cycle-fermer { border-color: var(--filet-nuit); color: var(--papier); background: rgba(15, 35, 61, .4); }
.cycle-fermer:hover { border-color: var(--or); background: rgba(195, 154, 82, .2); }
.cycle-corps { padding: clamp(1.3rem, 3vw, 1.8rem) clamp(1.4rem, 4vw, 2.4rem) clamp(1.5rem, 3vw, 2.2rem); }
.cycle-corps > p:first-child { color: var(--encre-2); margin: 0; }
.cycle-faits { list-style: none; margin: 1.2rem 0 0; padding: 1.2rem 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; border-top: 1px solid var(--filet); }
.cycle-faits li { display: grid; gap: .25rem; align-content: start; font: 400 .74rem/1.45 var(--mono); text-transform: uppercase; letter-spacing: .04em; color: var(--encre-2); }
.cycle-faits b { font: 400 1.9rem/1 var(--serif); color: var(--or-3); text-transform: none; letter-spacing: 0; }
.cycle .actions { margin-top: 1.5rem; }

/* la page des causeries : le cycle et l'inscription en tête */
.cycle-bloc { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; padding-bottom: clamp(4rem, 8vw, 7rem); scroll-margin-top: calc(var(--tete) + 16px); }
.cycle-carte { position: relative; background: var(--nuit); color: var(--papier); padding: clamp(1.8rem, 4vw, 3rem); overflow: hidden; }
.cycle-carte::after { content: ""; position: absolute; left: -20%; right: -20%; bottom: -40%; height: 70%; background: radial-gradient(50% 60% at 50% 100%, rgba(195, 154, 82, .3), rgba(195, 154, 82, 0) 70%); pointer-events: none; }
.cycle-carte > * { position: relative; z-index: 1; }
.cycle-carte .etiq { color: var(--brume); } .cycle-carte .etiq-n { color: var(--or); } .cycle-carte .etiq .etiq-n::after { color: var(--brume); }
.cycle-carte h2 { color: var(--carte); font-size: clamp(2rem, 3.6vw, 3rem); } .cycle-carte h2 em { color: var(--or); }
.cycle-carte p { color: var(--brume); }
.cycle-carte a:not(.btn) { color: var(--carte); text-decoration-color: var(--or); }
.cycle-carte .cycle-faits { border-top-color: var(--filet-nuit); margin-top: .6rem; }
.cycle-carte .cycle-faits li { color: var(--brume); } .cycle-carte .cycle-faits b { color: var(--or); }
.cycle-carte .petit { margin-top: 1.2rem; }
.cycle-carte .btn-or { margin-top: .6rem; }
.causeries-texte { display: block; padding-bottom: clamp(3rem, 6vw, 5rem); }
.causeries-texte .prose { max-width: 760px; }
.formulaire .petit { margin: 1rem 0 0; }
@media (max-width: 1000px) { .cycle-bloc { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .cycle-faits { grid-template-columns: 1fr; gap: .7rem; }
  .cycle-faits li { grid-template-columns: 5.4rem 1fr; align-items: baseline; gap: .8rem; }
  .cycle-faits b { font-size: 1.6rem; }
  .cycle-brin { display: none; }
  .cycle-corps > p:first-child { font-size: .95rem; }
  .cycle-faits { margin-top: .9rem; padding-top: .9rem; }
  .cycle .actions { margin-top: 1.1rem; gap: .5rem; }
  .cycle .actions .btn { width: 100%; justify-content: center; }
  .hero { padding-bottom: 4rem; }
  .annonce { margin-top: -2.4rem; }
}