:root, :root[data-charte="terre"]{ --fond:#201812; --fond2:#2A2019; --encre:#F0E7D8; --encre2:#C9BBA6; --c1:#E3A13B; --c2:#86A65C; --c3:#E15A38; --c4:#3EB5AB; --c5:#5578C2; --c6:#D45C92; --c7:#55B4D4; --police-titre:'Yeseva One',serif; --police-texte:'Jost',sans-serif; --police-citation:'Cormorant Garamond',serif; --police-lecture:'Lora',serif; --graisse:300; --bordure:rgba(240,231,216,.08); --voile:rgba(16,11,8,.96); --ombre-douce:0 10px 26px rgba(0,0,0,.5); --ombre-forte:0 14px 32px rgba(0,0,0,.65); --ombre-cadre:0 18px 45px rgba(0,0,0,.55); --papier-fond:#F2EADB; --papier-encre:#2B2118; --papier-titre:#4A3524; --papier-lettrine:#B0562F; --incline1:-1.6deg; --incline2:1.4deg; --rayon:3px }
:root[data-charte="encre"]{ --fond:#101823; --fond2:#17212E; --encre:#E9EEF2; --encre2:#9FB0BE; --c1:#D9B45B; --c2:#6FA894; --c3:#E2705A; --c4:#63A8C9; --c5:#8C93C6; --c6:#C9738F; --c7:#C8B08A; --police-titre:'Playfair Display',serif; --police-texte:'Karla',sans-serif; --police-citation:'Cormorant Garamond',serif; --police-lecture:'Lora',serif; --graisse:400; --bordure:rgba(233,238,242,.10); --voile:rgba(8,13,20,.97); --ombre-douce:0 10px 28px rgba(0,0,0,.55); --ombre-forte:0 15px 36px rgba(0,0,0,.7); --ombre-cadre:0 18px 48px rgba(0,0,0,.6); --papier-fond:#17212E; --papier-encre:#E9EEF2; --papier-titre:#D9B45B; --papier-lettrine:#E2705A; --incline1:-1deg; --incline2:0.8deg; --rayon:2px }
:root[data-charte="prune"]{ --fond:#1A1118; --fond2:#241926; --encre:#F2E9EE; --encre2:#BCA7B4; --c1:#D9A441; --c2:#7FA893; --c3:#C9527A; --c4:#9B6FA8; --c5:#6273B0; --c6:#D9A87E; --c7:#DBA0AE; --police-titre:'Cormorant Garamond',serif; --police-texte:'Jost',sans-serif; --police-citation:'Cormorant Garamond',serif; --police-lecture:'Lora',serif; --graisse:300; --bordure:rgba(242,233,238,.10); --voile:rgba(14,8,12,.97); --ombre-douce:0 10px 26px rgba(0,0,0,.55); --ombre-forte:0 14px 34px rgba(0,0,0,.7); --ombre-cadre:0 18px 46px rgba(0,0,0,.6); --papier-fond:#241926; --papier-encre:#F2E9EE; --papier-titre:#D9A87E; --papier-lettrine:#C9527A; --incline1:-1.8deg; --incline2:1.5deg; --rayon:4px }
:root[data-charte="bronze"]{ --fond:#14161A; --fond2:#1C1F25; --encre:#ECEAE5; --encre2:#9AA0A6; --c1:#C9A227; --c2:#8AA39B; --c3:#B4643C; --c4:#5E9AA8; --c5:#7C8AA3; --c6:#A8657F; --c7:#C7B08B; --police-titre:'Spectral',serif; --police-texte:'Inter',sans-serif; --police-citation:'Spectral',serif; --police-lecture:'Spectral',serif; --graisse:300; --bordure:rgba(236,234,229,.12); --voile:rgba(10,11,13,.97); --ombre-douce:0 10px 30px rgba(0,0,0,.6); --ombre-forte:0 16px 40px rgba(0,0,0,.75); --ombre-cadre:0 20px 50px rgba(0,0,0,.7); --papier-fond:#20242A; --papier-encre:#ECEAE5; --papier-titre:#C9A227; --papier-lettrine:#B4643C; --incline1:0deg; --incline2:0deg; --rayon:0px }
*{box-sizing:border-box; margin:0; padding:0}
body{background:var(--fond); color:var(--encre); font-family:var(--police-texte);
     font-weight:var(--graisse); letter-spacing:.02em; line-height:1.6; min-height:100vh}
.nuancier{display:flex; height:7px}
.nuancier span{flex:1}
header{text-align:center; padding:3rem 1rem 1.4rem}
header a{text-decoration:none; color:inherit}
h1{font-family:var(--police-titre); font-weight:400;
   font-size:clamp(2.4rem,7vw,4.4rem); letter-spacing:.02em}
h1 .m{color:var(--c3)}
.sous{font-size:clamp(.85rem,2vw,1.05rem); letter-spacing:.55em; text-transform:uppercase;
      color:var(--encre2); margin-top:.4rem; text-indent:.55em; display:block}
.fil{text-align:center; margin-top:.4rem}
.fil a{color:var(--encre2); text-decoration:none; letter-spacing:.12em; font-size:.95rem;
      border-bottom:2px solid var(--c1); padding-bottom:2px}
.fil a:hover{border-color:var(--c3); color:var(--encre)}
.entree{max-width:780px; margin:2rem auto 0; padding:0 1rem}
.entree .splash{display:none}
.entree .cadre, .entree img{border-radius:var(--rayon)}
.entree img{display:block; width:100%; height:auto; padding:6px;
      background:linear-gradient(120deg,var(--c1),var(--c3),var(--c6),var(--c5),var(--c4),var(--c2));
      box-shadow:var(--ombre-cadre)}
.citation{max-width:640px; margin:3.2rem auto 0; padding:0 1.4rem; text-align:center;
      font-family:var(--police-citation); font-weight:500;
      font-size:clamp(1.45rem,3.4vw,2rem); line-height:1.45}
.citation cite{display:block; margin-top:1.1rem; font-family:var(--police-texte);
      font-weight:300; font-size:clamp(.8rem,1.6vw,.95rem); letter-spacing:.12em;
      color:var(--encre2)}
.connaitre{text-align:center; margin:2.4rem auto 0}
.connaitre a{display:inline-block; position:relative; color:var(--encre); text-decoration:none;
      font-size:1.05rem; letter-spacing:.12em; padding:.35rem .2rem .6rem}
.connaitre a::after{content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
      background:var(--c6); border-radius:var(--rayon); transform:skewY(-.6deg);
      transition:transform .25s ease}
.connaitre a:hover::after, .connaitre a:focus-visible::after{transform:skewY(-.6deg) scaleX(1.08)}
main{max-width:1080px; margin:0 auto; padding:4.2rem 1.2rem 3rem}
.titre-galerie{font-family:var(--police-titre); font-weight:400; text-align:center;
      font-size:clamp(1.6rem,4vw,2.3rem); margin-bottom:2.6rem}
.titre-galerie .sous-titre{display:block; font-family:var(--police-texte);
      font-weight:300; font-size:clamp(.85rem,1.8vw,1.05rem); letter-spacing:.24em;
      text-transform:uppercase; color:var(--encre2); margin-top:.85rem}
.grille{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
      gap:2.2rem 1.6rem; justify-items:center}
.carte{display:flex; flex-direction:column; align-items:center; gap:.8rem;
      text-decoration:none; color:var(--encre); transition:transform .3s ease;
      width:100%; max-width:240px}
.carte:nth-child(odd){transform:rotate(var(--incline1))}
.carte:nth-child(even){transform:rotate(var(--incline2))}
.carte:hover, .carte:focus-visible{transform:rotate(0deg) translateY(-4px)}
.carte .photo{width:100%; height:230px; display:flex; align-items:center; justify-content:center;
      background:var(--fond2); border:1px solid var(--bordure); border-radius:var(--rayon);
      box-shadow:var(--ombre-douce); padding:10px; transition:box-shadow .3s ease}
.carte:hover .photo{box-shadow:var(--ombre-forte), 0 0 0 2px var(--accent)}
.carte .photo img{max-width:100%; max-height:100%; display:block}
.carte figcaption{text-align:center; font-size:.98rem; letter-spacing:.14em;
      text-transform:uppercase; line-height:1.35; position:relative; padding-bottom:14px}
.carte figcaption b{font-weight:400}
.carte figcaption .sous-titre{display:block; font-size:.82rem; letter-spacing:.1em;
      color:var(--encre2); margin-top:.3rem}
.carte figcaption::after{content:''; position:absolute; left:50%; transform:translateX(-50%) skewY(-1.2deg);
      bottom:0; width:80px; height:3px; background:var(--accent); border-radius:var(--rayon)}
.legende-statue{max-width:640px; margin:-1.2rem auto 2.6rem; padding:0 1rem;
      text-align:center; font-family:var(--police-citation);
      font-size:1.35rem; line-height:1.5; color:var(--encre2)}
.legende-statue p{margin:0 0 .9rem}
.legende-statue p:last-child{margin-bottom:0}
.legende-statue p:first-child{color:var(--encre)}
.presentation{max-width:680px; margin:-.6rem auto 3rem; padding:0 1.2rem;
      font-family:var(--police-lecture); font-size:1.03rem; line-height:1.8; color:var(--encre)}
.presentation p{margin:0 0 1.1rem; text-align:justify; hyphens:auto}
.presentation p:last-child{margin-bottom:0}
.photos{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1.6rem}
.photos a{display:block; background:var(--fond2); padding:10px;
      border:1px solid var(--bordure); border-radius:var(--rayon);
      box-shadow:var(--ombre-douce); transition:box-shadow .2s ease, transform .2s ease}
.photos a:hover{transform:translateY(-3px);
      box-shadow:var(--ombre-forte), 0 0 0 2px var(--c1)}
.photos img{display:block; width:100%; height:auto}
.papier{max-width:720px; margin:2.5rem auto 4rem; background:var(--papier-fond); color:var(--papier-encre);
      padding:clamp(1.6rem,5vw,3.4rem); border-radius:var(--rayon);
      box-shadow:var(--ombre-cadre);
      font-family:var(--police-lecture); font-weight:400; font-size:1.05rem; line-height:1.75}
.papier h2{font-family:var(--police-titre); font-weight:400; text-align:center;
      font-size:clamp(1.6rem,4.5vw,2.4rem); margin-bottom:2rem; color:var(--papier-titre)}
.papier p{margin-bottom:1.15rem; text-align:justify; hyphens:auto}
.papier p:first-of-type::first-letter{font-family:var(--police-titre); font-size:3.2em;
      float:left; line-height:.85; padding-right:.12em; color:var(--papier-lettrine)}
.vide{text-align:center; font-family:var(--police-citation);
      font-size:1.6rem; color:var(--encre2); margin:4rem 0}
/* Muriel ne veut pas d'italique : aucune règle de cette feuille n'en pose,
   et rien dans les pages n'utilise <em> ou <i>. */
em, i, cite{font-style:normal}
body.fige{overflow:hidden}
.visionneuse{position:fixed; inset:0; z-index:50; display:flex; align-items:center;
      justify-content:center; background:var(--voile); padding:clamp(.5rem,3vw,2.5rem)}
.visionneuse[hidden]{display:none}   /* sinon display:flex l'emporte sur hidden */
.visionneuse figure{margin:0; max-width:100%; max-height:100%; display:flex;
      flex-direction:column; align-items:center; gap:.9rem}
.visionneuse img{max-width:100%; max-height:calc(100vh - 7rem); width:auto; height:auto;
      display:block; object-fit:contain; box-shadow:var(--ombre-cadre);
      transition:opacity .18s}
.visionneuse.chargement img{opacity:.25}
.visionneuse figcaption{color:var(--encre2); font-size:.85rem; letter-spacing:.22em}
.visionneuse button{position:absolute; background:none; border:0; cursor:pointer;
      color:var(--encre2); font-family:var(--police-texte); line-height:1;
      padding:.4rem .7rem; border-radius:var(--rayon); transition:color .2s}
.visionneuse button:hover{color:var(--encre)}
.visionneuse button:focus-visible{outline:2px solid var(--c1); outline-offset:3px}
.visionneuse .fermer{top:clamp(.5rem,2vw,1.4rem); right:clamp(.5rem,2vw,1.4rem); font-size:1.5rem}
.visionneuse .prec, .visionneuse .suiv{top:50%; transform:translateY(-50%);
      font-size:clamp(2.6rem,7vw,4rem)}
.visionneuse .prec{left:clamp(.2rem,1.5vw,1.2rem)}
.visionneuse .suiv{right:clamp(.2rem,1.5vw,1.2rem)}
@media (max-width:640px){
  .visionneuse .prec, .visionneuse .suiv{top:auto; bottom:.4rem; transform:none}
}
.video{max-width:760px; margin:3.5rem auto 1rem; padding:0 1rem}
.video video{display:block; width:100%; height:auto; border-radius:var(--rayon);
      background:#000; box-shadow:var(--ombre-cadre)}
.video figcaption{text-align:center; margin-top:.9rem; color:var(--encre2);
      font-size:.9rem; letter-spacing:.12em; text-transform:uppercase}
.liens{max-width:880px; margin:5rem auto .5rem; padding:0 1.4rem}
.liens h2{font-family:var(--police-titre); font-weight:400; text-align:center;
      font-size:clamp(1.2rem,3vw,1.6rem); margin-bottom:2.2rem}
.liens ul{list-style:none; display:grid; gap:2.2rem;
      grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
.liens li{border-top:3px solid var(--accent); padding-top:1.1rem}
.liens a{display:inline-block; color:var(--encre); text-decoration:none;
      font-size:1.06rem; letter-spacing:.08em; padding-bottom:3px;
      border-bottom:1px solid transparent; transition:border-color .25s}
.liens a:hover, .liens a:focus-visible{border-color:var(--accent)}
.liens .fleche{color:var(--accent); font-size:.85em; padding-left:.25em}
.liens p{margin-top:.7rem; font-family:var(--police-lecture); font-size:.95rem;
      line-height:1.7; color:var(--encre2)}
footer{text-align:center; padding:2.5rem 1rem 3rem; color:var(--encre2);
      font-size:.85rem; letter-spacing:.15em}
a:focus-visible{outline:2px solid var(--c4); outline-offset:4px}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }