/* =========================================================
   STYLE COMMUN À TOUTES LES PAGES INTÉRIEURES DU SITE NUES
   Couleurs et polices : modifiez-les ici une seule fois.
   ========================================================= */
:root{
  --papier:#F0EBE5; --papier-2:#E5DDD4; --encre:#2B1F1B; --encre-douce:#6F5C52; --filet:#D5CABF;
  --mauve:#9B3A2A; --ocre-voile:#4A241C; --soeurs-texte:#F3E8DE; /* accent : ocre rouge, premier pigment de l'humanité : poétique et revendiqué */
  --chair-a:#CFBBAB; --chair-b:#8D7262;
  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --texte:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --mono:"DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme:light;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --papier:#1B1411; --papier-2:#261C18; --encre:#EFE4DA; --encre-douce:#B4A094; --filet:#3E2F29; --mauve:#E2826A; --ocre-voile:#3A1F18; --soeurs-texte:#EFE4DA; --chair-a:#4D3830; --chair-b:#2A1D18; color-scheme:dark}}
:root[data-theme="dark"]{
  --papier:#1B1411; --papier-2:#261C18; --encre:#EFE4DA; --encre-douce:#B4A094; --filet:#3E2F29; --mauve:#E2826A; --ocre-voile:#3A1F18; --soeurs-texte:#EFE4DA; --chair-a:#4D3830; --chair-b:#2A1D18; color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papier);color:var(--encre);font-family:var(--texte);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--papier)}
img{max-width:100%}
[hidden]{display:none!important}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid var(--mauve);outline-offset:3px}
figure{margin:0}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.accent{color:var(--mauve)}

/* En-tête */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--papier) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--filet)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:16px;position:relative}
.logo{font-family:var(--display);font-style:italic;font-size:26px;text-decoration:none}
.nav ul{display:flex;gap:28px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav ul a{text-decoration:none;font-size:14px;font-weight:500;color:var(--encre-douce);transition:color .2s}
.nav ul a:hover,.nav ul a[aria-current="page"]{color:var(--encre)}
.nav ul a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--mauve);text-underline-offset:6px;text-decoration-thickness:1.5px}
.menu-btn{display:none;background:none;border:1px solid var(--filet);color:var(--encre);font:inherit;font-size:13px;padding:6px 12px;border-radius:999px;cursor:pointer}
@media (max-width:820px){
  .menu-btn{display:block}
  .nav ul{display:none;position:absolute;left:calc(-1 * max(24px,env(safe-area-inset-left,0px)));right:calc(-1 * max(24px,env(safe-area-inset-right,0px)));top:100%;background:var(--papier);flex-direction:column;gap:0;border-bottom:1px solid var(--filet);padding:8px max(24px,env(safe-area-inset-right,0px)) 16px max(24px,env(safe-area-inset-left,0px))}
  .nav ul.ouvert{display:flex}
  .nav ul a{display:block;padding:10px 0;font-size:16px}
}

/* Ouverture de page */
.ouverture{padding-block:72px 56px;display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:40px;align-items:end}
.ouverture .mono{color:var(--mauve);display:block;margin-bottom:18px}
.ouverture h1{font-family:var(--display);font-weight:430;font-variation-settings:"opsz" 33;font-optical-sizing:none;font-size:clamp(60px,10vw,150px);line-height:.88;letter-spacing:-.04em;margin:0;text-wrap:balance}
.ouverture h1 em{font-style:italic;color:var(--mauve)}
.ouverture p{margin:0;color:var(--encre-douce);max-width:30em}
@media (max-width:820px){.ouverture{grid-template-columns:1fr;gap:24px;padding-block:48px 36px}}

/* Sections */
section{padding-block:88px;border-top:1px solid var(--filet)}
@media (max-width:820px){section{padding-block:60px}}
.tete{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px;margin-bottom:44px}
.tete .mono{color:var(--mauve);padding-top:10px}
.tete h2{font-family:var(--display);font-weight:400;font-size:clamp(36px,4.6vw,60px);line-height:1.04;letter-spacing:-.02em;margin:0;text-wrap:balance}
.tete h2 em{font-style:italic}
@media (max-width:820px){.tete{grid-template-columns:1fr;gap:10px}}
.decale{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:32px}
.decale > *{grid-column:2;min-width:0}
@media (max-width:820px){.decale{grid-template-columns:1fr}.decale > *{grid-column:auto}}
.texte-long{max-width:36em}
.texte-long p{margin:0 0 1.1em}

/* Photos (emplacements à remplacer) */
.photo{position:relative;overflow:hidden;background:linear-gradient(160deg,var(--chair-a),var(--chair-b));max-width:100%;width:100%}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo::after{content:"";position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.photo .vide{position:absolute;left:14px;bottom:12px;color:var(--papier);opacity:.85}
.portrait{aspect-ratio:4/5}.paysage{aspect-ratio:3/2}.carre{aspect-ratio:1/1}.vertical{aspect-ratio:2/3}
.legende{display:flex;justify-content:space-between;gap:12px;margin-top:10px;color:var(--encre-douce)}
.a-venir{color:var(--encre-douce);font-style:italic}

/* Boutons */
.bouton{display:inline-flex;align-items:center;gap:10px;padding:12px 20px;background:var(--encre);color:var(--papier);text-decoration:none;font-weight:500;font-size:15px;border:0;cursor:pointer;font-family:var(--texte)}
.bouton:hover{background:var(--mauve)}
.lien{color:var(--mauve);text-decoration:none}
.lien:hover{text-decoration:underline;text-underline-offset:4px}
.etiquette{display:inline-block;padding:4px 10px;border:1px solid currentColor;border-radius:999px;color:var(--mauve)}

/* Bande sombre */
.sombre{background:var(--encre);color:var(--papier);border-top:0}
.sombre .mono{color:var(--papier);opacity:.7}
.sombre .bouton{background:var(--papier);color:var(--encre)}
.sombre .bouton:hover{background:var(--mauve);color:var(--papier)}

/* Suite de navigation en bas de page */
.suite{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--encre)}
.suite a{padding:32px 0;text-decoration:none;display:flex;flex-direction:column;gap:6px;min-width:0}
.suite a + a{border-left:1px solid var(--filet);padding-left:32px;text-align:right;align-items:flex-end}
.suite .titre{font-family:var(--display);font-size:clamp(28px,3.4vw,44px);line-height:1.05}
.suite a:hover .titre{color:var(--mauve)}
.suite .mono{color:var(--encre-douce)}
@media (max-width:600px){.suite{grid-template-columns:1fr}.suite a + a{border-left:0;border-top:1px solid var(--filet);padding-left:0}}

footer{border-top:1px solid var(--encre);padding-block:32px 48px;color:var(--encre-douce)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.reseaux{display:flex;gap:20px;flex-wrap:wrap}
.reseaux a{text-decoration:none}
.reseaux a:hover{color:var(--mauve)}

/* Grain de matière sur le fond, comme un papier fait main */
body{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .35  0 0 0 0 .22  0 0 0 0 .16  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");background-attachment:fixed}

/* Sœurs : le seul grand aplat d'ocre du site, adouci */
#soeurs.sombre{background:var(--ocre-voile);color:var(--soeurs-texte)}
#soeurs.sombre .mono{color:var(--soeurs-texte)}
#soeurs.sombre .bouton{background:var(--soeurs-texte);color:var(--ocre-voile)}
#soeurs.sombre .bouton:hover{background:var(--mauve);color:var(--soeurs-texte)}
#soeurs .jalons{border-top-color:color-mix(in srgb,var(--soeurs-texte) 35%,transparent)}
#soeurs .jalons li{border-bottom-color:color-mix(in srgb,var(--soeurs-texte) 18%,transparent)}

/* Sur une vraie photo, pas de grain ajouté : l'image reste telle quelle */
.photo:has(img)::after{display:none}
.photo:has(img){background:var(--papier-2)}

.sombre.soeurs-bande{background:var(--ocre-voile);color:var(--soeurs-texte)}
.sombre.soeurs-bande .bouton{background:var(--soeurs-texte);color:var(--ocre-voile)}
.sombre.soeurs-bande .bouton:hover{background:var(--mauve);color:var(--soeurs-texte)}

/* Glyphes */
.glyphe{display:block;color:inherit}
.glyphe .g-o,.glyphe-sept .g-o{fill:var(--mauve)}
.glyphe-sept{width:52px;height:52px;margin-bottom:14px;color:var(--encre)}
.glyphe-soeurs{width:96px;height:64px;margin-bottom:22px}
.soeurs .glyphe-soeurs .g-o,.sombre .glyphe-soeurs .g-o{fill:#C9674F}
.glyphe-e{width:1em;height:1.1em;color:var(--mauve);vertical-align:-.25em;margin-right:.55em}