/* ==========================================================================
   La Macarine : feuille de style
   Palette : forêt (vert très sombre), calcaire (gris-vert clair), mousse,
   et un seul accent, le rose des rosiers qui poussent sur les murs.
   ========================================================================== */

@font-face{font-family:"IM Fell English";src:url("../fonts/im-fell-english-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IM Fell English";src:url("../fonts/im-fell-english-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("../fonts/source-sans-3-latin-wght-italic.woff2") format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{
  --foret:#1c2a21;
  --mousse:#52683f;
  --pierre:#e2e0d3;
  --calcaire:#f4f3ec;
  --papier:#ebe9de;
  --filet:#c9c6b6;
  --encre:#1f271f;
  --discret:#585f4e;
  --rose:#9a2c52;
  --rose-clair:#eaa9c0;
  --serif:"IM Fell English","Iowan Old Style","Palatino Linotype",Georgia,serif;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --largeur:1180px;
  --mesure:42rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--papier);color:var(--encre);font:400 1.0625rem/1.65 var(--sans);overflow-x:clip;text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
main:focus{outline:none}
:focus-visible{outline:3px solid var(--rose);outline-offset:3px}

/* Transition douce entre les pages (navigateurs compatibles) */
@view-transition{navigation:auto}
.entete{view-transition-name:entete}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

.saut{position:absolute;left:-999px;top:0}
.saut:focus{left:1rem;top:1rem;z-index:60;background:var(--calcaire);padding:.6rem 1rem}

/* ---------- En-tête et menu ---------- */
.entete{position:sticky;top:0;z-index:30;background:var(--foret);color:var(--pierre)}
.entete :focus-visible{outline-color:var(--rose-clair)}
.entete-in{max-width:var(--largeur);margin:0 auto;padding:0 1.25rem;min-height:4.1rem;display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.marque{font:400 1.75rem/1 var(--serif);color:var(--calcaire);text-decoration:none}
.menu ul{display:flex;gap:clamp(1.1rem,3.2vw,2.6rem);list-style:none;margin:0;padding:0}
.menu a{display:block;padding:.65rem 0;color:var(--pierre);text-decoration:none;font-weight:600;border-bottom:2px solid transparent;transition:border-color .2s}
.menu a:hover{border-color:var(--rose-clair)}
.menu a[aria-current]{border-color:var(--calcaire);color:var(--calcaire)}

@media (max-width:620px){
  .entete-in{flex-direction:column;gap:0;padding-top:.55rem;align-items:stretch}
  .marque{text-align:center;font-size:1.6rem}
  .menu ul{justify-content:space-around;gap:0}
}

/* ---------- Accueil : ouverture ---------- */
.hero{position:relative;height:clamp(440px,76vh,800px);background:var(--foret);overflow:hidden}
.hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:ouverture 2.6s cubic-bezier(.2,.6,.2,1) both}
@keyframes ouverture{from{transform:scale(1.07);opacity:.55}to{transform:none;opacity:1}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,42,33,.94) 0,rgba(28,42,33,.5) 32%,rgba(28,42,33,0) 64%)}
.hero-texte{position:absolute;z-index:1;left:0;right:0;bottom:0;max-width:var(--largeur);margin:0 auto;padding:0 1.25rem 10rem;color:var(--calcaire)}
.hero h1{font:400 clamp(3.6rem,11vw,8rem)/.92 var(--serif);margin:0 0 1.1rem}
.hero p{margin:0;max-width:30rem;font-size:clamp(1.05rem,2vw,1.35rem);line-height:1.4;color:var(--pierre)}

/* ---------- Accueil : les trois portes ---------- */
.tuiles{position:relative;z-index:2;max-width:var(--largeur);margin:-8.5rem auto 0;padding:0 1.25rem;display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.tuile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--foret);color:var(--calcaire);text-decoration:none;box-shadow:0 0 0 .45rem var(--papier)}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .9s cubic-bezier(.2,.6,.2,1)}
.tuile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,42,33,.92) 0,rgba(28,42,33,.55) 34%,rgba(28,42,33,0) 62%)}
.tuile-texte{position:absolute;z-index:1;left:0;right:0;bottom:0;padding:1.4rem 1.5rem 1.6rem}
.tuile-titre{display:block;margin-bottom:.55rem;font:400 clamp(2.1rem,3.6vw,2.8rem)/1 var(--serif)}
.tuile-resume{display:block;max-width:21rem;font-size:1rem;line-height:1.4;color:var(--pierre)}
.tuile:hover img,.tuile:focus-visible img{transform:scale(1.05)}
.tuile:hover .tuile-titre,.tuile:focus-visible .tuile-titre{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.tuile:focus-visible{outline-color:var(--rose-clair);outline-offset:0}

@media (max-width:760px){
  .hero-texte{padding-bottom:7rem}
  .tuiles{grid-template-columns:1fr;margin-top:-5rem;gap:1.1rem}
  .tuile{aspect-ratio:4/3}
}

/* ---------- Accueil : présentation ---------- */
.intro{max-width:var(--largeur);margin:0 auto;padding:5.5rem 1.25rem 6rem;display:grid;grid-template-columns:5fr 7fr;gap:clamp(2rem,6vw,5.5rem);align-items:start}
.intro-lede{position:sticky;top:6.5rem;margin:0;font:italic 400 clamp(2.5rem,5.2vw,4rem)/1.04 var(--serif)}
.intro-corps p{max-width:36rem;margin:0 0 1.2rem}
.intro-corps p:first-child{font-size:1.2rem;line-height:1.6}
@media (max-width:860px){
  .intro{grid-template-columns:1fr;padding:4rem 1.25rem}
  .intro-lede{position:static}
}

.bouton{display:inline-block;margin-top:.6rem;padding:.7rem 1.25rem;border:1.5px solid var(--foret);border-radius:2px;color:var(--foret);font-weight:600;text-decoration:none;transition:background .2s,color .2s}
.bouton:hover{background:var(--foret);color:var(--calcaire)}

/* ---------- Pages de rubrique : bandeau ---------- */
.bandeau{position:relative;height:clamp(250px,46vh,450px);background:var(--foret);overflow:hidden}
.bandeau img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bandeau::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(28,42,33,.9) 0,rgba(28,42,33,.35) 45%,rgba(28,42,33,0) 75%)}
.bandeau-texte{position:absolute;z-index:1;left:0;right:0;bottom:0;max-width:var(--largeur);margin:0 auto;padding:0 1.25rem 2.1rem;color:var(--calcaire)}
.bandeau h1{margin:0;font:400 clamp(2.9rem,7.5vw,5.4rem)/1 var(--serif)}

/* ---------- Sous-menu d'une rubrique ---------- */
.sous-nav{background:var(--pierre);border-bottom:1px solid var(--filet)}
.sous-nav ul{max-width:var(--largeur);margin:0 auto;padding:0 1.25rem;display:flex;gap:1.9rem;list-style:none;overflow-x:auto;scrollbar-width:thin}
.sous-nav a{display:block;padding:.9rem 0;white-space:nowrap;color:var(--encre);font-size:.98rem;text-decoration:none;border-bottom:2px solid transparent}
.sous-nav a:hover{border-color:var(--discret)}
.sous-nav a[aria-current]{border-color:var(--rose);font-weight:600}

/* ---------- Texte courant ---------- */
.contenu{max-width:calc(var(--mesure) + 2.5rem);margin:0 auto;padding:3.5rem 1.25rem 4.5rem}
.contenu p{margin:0 0 1.2em}
.contenu h2{margin:2.4em 0 .6em;font:400 clamp(1.8rem,3.5vw,2.3rem)/1.15 var(--serif)}
.contenu h2:first-child{margin-top:0}
.contenu a{color:var(--rose);text-underline-offset:.18em}
.page-titre{margin:0 0 1.6rem;font:400 clamp(2.4rem,6vw,3.8rem)/1.05 var(--serif)}

.contenu figure{margin:2.3rem 0}
.contenu figure img{display:block;width:auto;max-width:100%;height:auto;max-height:76vh;margin:0 auto;background:var(--pierre)}
a.zoom{display:block;cursor:zoom-in;text-align:center;color:inherit}
figcaption{margin-top:.65rem;color:var(--discret);font-size:.95rem;font-style:italic;text-align:center}

.galerie{display:flex;flex-wrap:wrap;gap:.8rem;margin:2.3rem 0;width:min(66rem,calc(100vw - 2.5rem));position:relative;left:50%;transform:translateX(-50%)}
.galerie figure{margin:0;min-width:0}
.galerie figure img{width:100%;max-height:none}

/* Liste des chapitres d'une rubrique */
.chapitres{margin-top:3.6rem;padding-top:1.6rem;border-top:1px solid var(--filet)}
.contenu .chapitres h2{margin:0 0 .6rem;font-size:1.6rem}
.chapitres ul{margin:0;padding:0;list-style:none}
.chapitres li{border-bottom:1px solid var(--filet)}
.contenu .chapitres a{display:block;padding:1.15rem 0;color:var(--encre);text-decoration:none}
.chapitre-titre{display:block;font:400 1.75rem/1.2 var(--serif)}
.chapitre-resume{display:block;margin-top:.25rem;color:var(--discret)}
.contenu .chapitres a:hover .chapitre-titre{color:var(--rose)}

/* Chapitre précédent / suivant */
.precsuiv{max-width:calc(var(--mesure) + 2.5rem);margin:0 auto;padding:0 1.25rem 4.5rem;display:flex;justify-content:space-between;gap:1rem}
.precsuiv a{display:block;max-width:48%;padding:1rem 1.15rem;border:1px solid var(--filet);color:var(--encre);font:400 1.25rem/1.25 var(--serif);text-decoration:none;transition:border-color .2s}
.precsuiv a span{display:block;margin-bottom:.25rem;color:var(--discret);font:600 .88rem var(--sans)}
.precsuiv .suiv{margin-left:auto;text-align:right}
.precsuiv a:hover{border-color:var(--rose)}

/* ---------- Pied de page ---------- */
.pied{background:var(--foret);color:var(--pierre)}
.pied :focus-visible{outline-color:var(--rose-clair)}
.pied-in{max-width:var(--largeur);margin:0 auto;padding:3.2rem 1.25rem;display:grid;grid-template-columns:1fr 1fr;gap:2rem 3rem}
.pied p{margin:0 0 .55rem}
.pied-nom{font:400 1.9rem/1 var(--serif);color:var(--calcaire)}
.pied a{color:var(--calcaire)}
@media (max-width:700px){.pied-in{grid-template-columns:1fr}}

/* ---------- Agrandissement des photos ---------- */
.visionneuse{width:100%;height:100%;max-width:100vw;max-height:100vh;padding:0;border:0;background:transparent;color:var(--calcaire)}
.visionneuse::backdrop{background:rgba(14,20,16,.93)}
.visionneuse[open]{display:grid;place-items:center}
.visionneuse figure{max-width:92vw;margin:0;text-align:center}
.visionneuse img{display:block;width:auto;height:auto;max-width:92vw;max-height:80vh;margin:0 auto;object-fit:contain}
.visionneuse figcaption{margin-top:.8rem;color:var(--pierre);font-size:1rem}
.visionneuse button{position:absolute;padding:.4rem 1rem;border:0;background:none;color:var(--calcaire);font:400 2.6rem/1 var(--sans);cursor:pointer}
.visionneuse button:focus-visible{outline-color:var(--rose-clair)}
.vis-fermer{top:.4rem;right:.4rem}
.vis-prec{left:.2rem;top:50%;transform:translateY(-50%)}
.vis-suiv{right:.2rem;top:50%;transform:translateY(-50%)}