@font-face{font-family:'Cormorant Garamond';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/cormorant-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:400;font-style:normal;font-display:swap;src:url(/fonts/eb-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:500;font-style:normal;font-display:swap;src:url(/fonts/eb-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:400;font-style:italic;font-display:swap;src:url(/fonts/eb-garamond-latin-400-italic.woff2) format('woff2')}

:root{
  color-scheme: light;
  --ivoire:#fbf6ec; --encre:#2b2118; --laiton:#a6792d;
  --fond:#fbf6ec; --fond-papier:#f3ebdc; --texte:#2b2118; --texte-doux:#6e5e4d;
  --laiton-texte:#86601f; --filet:#d8cbb4; --action:#2b2118; --sur-action:#fbf6ec; --focus:#86601f;
  --titrage:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --texte-f:'EB Garamond', Georgia, 'Times New Roman', serif;
  box-sizing:border-box;
  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"]){ color-scheme:dark;
    --fond:#2b2118; --fond-papier:#3a2e23; --texte:#fbf6ec; --texte-doux:#cbbfa9;
    --laiton-texte:#c49a52; --filet:#5a4a3a; --action:#fbf6ec; --sur-action:#2b2118; --focus:#c49a52; }
}
:root[data-theme="dark"]{ color-scheme:dark;
    --fond:#2b2118; --fond-papier:#3a2e23; --texte:#fbf6ec; --texte-doux:#cbbfa9;
    --laiton-texte:#c49a52; --filet:#5a4a3a; --action:#fbf6ec; --sur-action:#2b2118; --focus:#c49a52; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 44px); background:var(--encre)}
body{margin:0;background:var(--fond);color:var(--texte);font-family:var(--texte-f);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased;font-variant-numeric:lining-nums}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:#1c150f}
img{max-width:100%}
a{color:var(--laiton-texte);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--texte)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}



/* ---------- le seuil ---------- */
.seuil{position:relative;min-height:100svh;background:var(--encre);color:var(--ivoire);display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;padding:64px 24px}
.seuil canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.logo{display:block;height:auto}
.logo-seuil{width:min(78vw,440px);color:var(--ivoire);position:relative}
.logo-seuil .linteau{transform:translateY(64px);animation:ouvre-h 2.4s cubic-bezier(.2,.7,.1,1) .5s forwards}
.logo-seuil .seuil-f{transform:translateY(-62px);animation:ouvre-b 2.4s cubic-bezier(.2,.7,.1,1) .5s forwards}
.logo-seuil .mot{opacity:0;animation:parait 1.6s ease 1.7s forwards}
@keyframes ouvre-h{to{transform:translateY(0)}}
@keyframes ouvre-b{to{transform:translateY(0)}}
@keyframes parait{to{opacity:1}}
.seuil .date{position:relative;margin:40px 0 0;font-size:15px;color:#cbbfa9;opacity:0;animation:parait 1.4s ease 3s forwards}
.seuil .descendre{position:absolute;bottom:calc(28px + env(safe-area-inset-bottom,0px));left:50%;width:1px;height:48px;background:#a6792d;transform-origin:top;transform:scaleY(0);animation:trait 1.6s ease 3.6s forwards}
@keyframes trait{to{transform:scaleY(1)}}

/* l'acte, qui s'éclaire */
.acte{background:var(--encre);padding:24px 24px 104px;display:flex;justify-content:center}
.acte figure{margin:0;width:min(100%,560px)}
.acte .photo{display:block;width:100%;height:auto;filter:brightness(.15);transition:filter 2.8s ease}
.acte.allume .photo{filter:brightness(1)}
.acte figcaption{margin-top:16px;font-size:14px;line-height:1.45;color:#cbbfa9}

/* ---------- la lecture ---------- */
.lecture{padding:104px 24px 64px}
.colonne{max-width:34em;margin:0 auto}
h1{font-family:var(--titrage);font-weight:500;font-size:34px;line-height:1.08;margin:0 0 32px;letter-spacing:-.005em}
@media (min-width:600px){h1{font-size:48px;line-height:1.05}}
.intro{font-size:17px;line-height:1.6;margin:0 0 40px}
@media (min-width:600px){.intro{font-size:19px}}

.inscription{display:flex;flex-direction:column;gap:16px}
.inscription label{font-size:14px;color:var(--texte-doux)}
.inscription input{font:400 19px/1.3 var(--texte-f);color:var(--texte);background:transparent;border:0;border-bottom:1px solid var(--texte-doux);padding:10px 0;border-radius:0;width:100%}
.inscription input::placeholder{color:var(--texte-doux);opacity:.7}
.inscription .erreur{min-height:1.4em;font-size:14px;color:var(--texte);margin:0}
.btn{font:500 15px/1 var(--texte-f);letter-spacing:.08em;background:var(--action);color:var(--sur-action);border:0;padding:18px 24px;cursor:pointer;border-radius:0;align-self:flex-start;text-decoration:none;display:inline-block}
.btn:hover{background:var(--laiton-texte);color:var(--sur-action)}
.mention{font-size:14px;line-height:1.45;color:var(--texte-doux);margin:8px 0 0}

.recoit{border-top:1px solid var(--filet);margin:104px auto 0;max-width:34em;padding-top:40px}
.recoit h2{font-family:var(--titrage);font-weight:500;font-size:32px;line-height:1.15;margin:0 0 24px}
.recoit ul{list-style:none;margin:0;padding:0}
.recoit li{padding:20px 0;border-bottom:1px solid var(--filet);font-size:19px;line-height:1.45}
.recoit li span{display:block;font-size:15px;color:var(--texte-doux);margin-top:4px}
.recoit .btn{margin-top:40px}

.pied{padding:64px 24px calc(40px + env(safe-area-inset-bottom,0px));text-align:center;font-size:14px;color:var(--texte-doux)}
.pied .mot-texte{font-family:var(--titrage);font-weight:500;font-size:20px;color:var(--texte);display:block;margin-bottom:16px}
.pied nav{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}

/* ---------- écrans après ---------- */
.simple{min-height:100svh;padding:104px 24px 64px}
.logo-haut,.logo-cl{width:200px;color:var(--texte);margin:0 0 64px}
.simple h1{margin-bottom:24px}
.simple p{font-size:19px;line-height:1.6;margin:0 0 16px}
.simple .doux{font-size:15px;color:var(--texte-doux)}
.lien{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch;margin:24px 0 8px}
.lien code{flex:1 1 220px;font:400 16px/1.4 var(--texte-f);background:var(--fond-papier);padding:16px;word-break:break-all;color:var(--texte)}
.lien .btn{align-self:stretch}
.bloc{margin-top:64px;border-top:1px solid var(--filet);padding-top:32px}
.bloc h2{font-family:var(--titrage);font-weight:500;font-size:28px;margin:0 0 16px;line-height:1.15}
.paliers{list-style:none;margin:0;padding:0}
.paliers li{display:grid;grid-template-columns:1fr;gap:2px;padding:18px 0;border-bottom:1px solid var(--filet)}
@media (min-width:600px){.paliers li{grid-template-columns:150px 1fr}.paliers .p-texte{grid-column:2}}
.p-seuil{font-size:14px;color:var(--laiton-texte)}
.p-nom{font-family:var(--titrage);font-weight:500;font-size:22px;line-height:1.2}
.p-texte{font-size:16px;color:var(--texte)}

/* ---------- classement ---------- */
.compteur{margin:0 0 8px;font-family:var(--titrage);font-weight:500;font-size:56px;line-height:1;font-variant-numeric:lining-nums tabular-nums}
.compteur small{font-size:28px;color:var(--texte-doux)}
.barre{height:3px;background:var(--filet);margin:16px 0 12px}
.barre i{display:block;height:100%;background:var(--laiton);width:0}
.vous{background:var(--fond-papier);padding:24px;margin-top:40px}
.vous code{background:var(--fond)}
.vous .rang{font-family:var(--titrage);font-weight:500;font-size:40px;line-height:1}
table{width:100%;border-collapse:collapse;font-size:17px;font-variant-numeric:lining-nums tabular-nums}
th{text-align:left;font:500 14px/1.3 var(--texte-f);color:var(--texte-doux);padding:8px 0;border-bottom:1px solid var(--texte-doux)}
th:last-child,td:last-child{text-align:right}
td{padding:12px 0;border-bottom:1px solid var(--filet)}
td.r{width:56px;color:var(--texte-doux)}
.vide{padding:24px 0;color:var(--texte-doux);font-size:16px}
.test{margin-top:16px;font-size:14px;color:var(--texte-doux)}
.test button{font:inherit;color:var(--laiton-texte);background:none;border:0;text-decoration:underline;cursor:pointer;padding:0}

/* ---------- lettres ---------- */
.lettres{padding:64px 16px 104px;background:var(--fond-papier)}
.lettres .avert{max-width:600px;margin:0 auto 40px;font-size:15px;color:var(--texte-doux)}
.lettre{max-width:600px;margin:0 auto 64px}
.l-meta{display:flex;justify-content:space-between;font-size:14px;color:var(--texte-doux);margin-bottom:8px}
.l-corps{background:var(--fond);padding:40px clamp(20px,6vw,40px)}
.l-logo{width:200px;color:var(--texte);margin-bottom:32px}
.lettre h3{font-family:var(--titrage);font-weight:500;font-size:32px;line-height:1.15;margin:0 0 24px}
.lettre p{font-size:17px;line-height:1.6;margin:0 0 16px}
@media (min-width:600px){.lettre p{font-size:19px}}
.l-paliers{margin:0 0 16px;padding-left:1.1em;font-size:17px;line-height:1.55}
.l-paliers li{margin-bottom:8px}
.l-paliers b{font-weight:500}
.l-img{margin:8px 0 24px}
.l-img .ph{aspect-ratio:4/5;background:var(--fond-papier);border:1px solid var(--filet);display:flex;align-items:center;justify-content:center;color:var(--texte-doux);font-size:15px}
.l-img figcaption{font-size:14px;color:var(--texte-doux);margin-top:8px}
.l-sign{margin-top:24px!important}
.l-ps{font-size:16px!important;color:var(--texte)}
.todo{background:#efe2c4;color:#2b2118;padding:12px 14px;font-size:15px!important}
.l-pied{margin-top:40px;padding-top:16px;border-top:1px solid var(--filet);font-size:14px;line-height:1.45;color:var(--texte-doux)}

@media (prefers-reduced-motion: reduce){
  .logo-seuil .linteau,.logo-seuil .seuil-f{animation:none;transform:none}
  .logo-seuil .mot,.seuil .date{animation:none;opacity:1}
  .seuil .descendre{animation:none;transform:none}
  .acte .photo{filter:none;transition:none}
}

.cache{display:none}
.legal h2{font-family:var(--titrage);font-weight:500;font-size:26px;margin:40px 0 12px;line-height:1.2}
.legal p{font-size:17px;margin:0 0 12px}
.retour{display:inline-block;margin-top:48px}