/* Pages annexes d'AELYS (merci, 404) : mêmes couleurs, mêmes polices, même calme que l'accueil */
:root{
  --fond:#0b0b0c; --fond-2:#131315; --texte:#f2eee7; --texte-2:rgba(242,238,231,.66); --texte-3:rgba(242,238,231,.56);
  --ligne:rgba(242,238,231,.14); --accent:#d6bd8f; --accent-texte:#d6bd8f; --lueur-1:rgba(214,186,140,.22);
  --serif:"Cormorant Garamond","Times New Roman",serif; --sans:"Geist",system-ui,sans-serif;
  --gouttiere:clamp(16px,4vw,56px); --sortie:cubic-bezier(.16,1,.3,1); color-scheme:dark;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    --fond:#f2eee7; --fond-2:#e8e3d9; --texte:#0f0f10; --texte-2:rgba(15,15,16,.68); --texte-3:rgba(15,15,16,.6);
    --ligne:rgba(15,15,16,.14); --accent:#a8834f; --accent-texte:#7d5f33; --lueur-1:rgba(214,186,140,.5); color-scheme:light;
  }
}
:root[data-theme="light"]{
  --fond:#f2eee7; --fond-2:#e8e3d9; --texte:#0f0f10; --texte-2:rgba(15,15,16,.68); --texte-3:rgba(15,15,16,.6);
  --ligne:rgba(15,15,16,.14); --accent:#a8834f; --accent-texte:#7d5f33; --lueur-1:rgba(214,186,140,.5); color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--fond)}
body{min-height:100svh;display:flex;flex-direction:column;background:var(--fond);color:var(--texte);font-family:var(--sans);font-weight:300;font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
  background-image:radial-gradient(70vw 50vw at 50% -10%,var(--lueur-1),transparent 70%);background-repeat:no-repeat}
a{color:inherit}
::selection{background:var(--accent);color:#0b0b0c}

/* la barre du haut reste toujours visible : le logo ramène à l'accueil depuis n'importe où */
.tete{position:sticky;top:0;z-index:30;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px var(--gouttiere);
  transition:background-color .5s,border-color .5s,padding .6s var(--sortie);border-bottom:1px solid transparent}
.tete.posee{padding-block:14px;background:color-mix(in srgb,var(--fond) 72%,transparent);border-color:var(--ligne);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
.logo{font-family:var(--serif);font-size:24px;letter-spacing:.38em;margin-right:-.38em;text-decoration:none}
.retour{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--texte-2);text-decoration:none;display:inline-flex;align-items:center;gap:10px;transition:color .4s}
.retour::before{content:"";width:22px;height:1px;background:currentColor;transform-origin:right;transition:transform .7s var(--sortie)}
.retour:hover{color:var(--texte)} .retour:hover::before{transform:scaleX(1.6)}

main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:clamp(40px,8vh,90px) var(--gouttiere) clamp(60px,10vh,110px)}
.surtitre{display:flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--texte-2)}
.surtitre::before{content:"";width:42px;height:1px;background:var(--texte-3)}
h1{margin-top:22px;font-weight:300;font-size:clamp(2.8rem,7.4vw,6.4rem);line-height:1;letter-spacing:-.045em}
h1 em{font-family:"DM Serif Display",var(--serif);font-style:italic;font-weight:400;letter-spacing:-.02em;color:var(--accent);padding-right:.06em}
.chapo{margin-top:26px;max-width:34em;font-size:clamp(17px,1.4vw,20px);color:var(--texte-2)}
.chapo b{font-weight:400;color:var(--texte)}

/* boutons : verre fin, le mot roule vers le haut, un reflet d'or traverse ; le bouton plein garde sa flèche dans un rond */
.bouton{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:16px;height:52px;padding:0 28px;border-radius:999px;
  font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;white-space:nowrap;color:var(--texte);
  border:1px solid color-mix(in srgb,var(--texte) 20%,transparent);background:color-mix(in srgb,var(--fond) 55%,transparent);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent);
  transition:border-color .5s,background-color .5s,transform .7s var(--sortie)}
.bouton::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,color-mix(in srgb,var(--accent) 30%,transparent) 50%,transparent 70%);transform:translateX(-130%);transition:transform 1s var(--sortie)}
.bouton:hover{border-color:color-mix(in srgb,var(--accent) 70%,transparent);transform:translateY(-2px)}
.bouton:hover::before{transform:translateX(130%)}
.bouton .roule{position:relative;display:block;overflow:hidden;line-height:1.2;padding-left:.18em}
.bouton .roule > span{display:block;transition:transform .65s var(--sortie)}
.bouton .roule::after{content:attr(data-texte);position:absolute;left:.18em;top:100%;transition:transform .65s var(--sortie)}
.bouton:hover .roule > span,.bouton:hover .roule::after{transform:translateY(-100%)}
.bouton.plein{padding:0 6px 0 28px;border-color:transparent;background:var(--accent);color:#0b0b0c;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.bouton.plein::before{background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%)}
.bouton.plein:hover{border-color:transparent}
.bouton .rond{position:relative;flex:none;width:40px;height:40px;border-radius:50%;background:#0b0b0c;overflow:hidden}
.bouton .rond svg{position:absolute;inset:0;margin:auto;width:15px;height:15px;stroke:var(--accent);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--sortie)}
.bouton .rond svg + svg{transform:translateX(-200%)}
.bouton:hover .rond svg:first-child{transform:translateX(200%)}
.bouton:hover .rond svg + svg{transform:none}
/* un seul bouton ; les autres chemins, en liens fins sur une ligne */
.actions{margin-top:40px;display:grid;justify-items:start;gap:22px}
.ou{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;font-size:14.5px;color:var(--texte-3)}
.ou i{width:3px;height:3px;border-radius:50%;background:var(--texte-3)}
.lien-fin{position:relative;padding:4px 0;color:var(--texte);text-decoration:none}
.lien-fin::before,.lien-fin::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px}
.lien-fin::before{background:var(--ligne)}
.lien-fin::after{background:var(--accent);transform:scaleX(0);transform-origin:right;transition:transform .8s var(--sortie)}
.lien-fin:hover::after,.lien-fin:focus-visible::after{transform:none;transform-origin:left}
.lien-fin:focus-visible{outline:1px solid var(--texte);outline-offset:4px}
.bouton:focus-visible,.retour:focus-visible,.carte:focus-visible{outline:1px solid var(--texte);outline-offset:4px}

/* entrée : chaque bloc monte doucement, l'un après l'autre */
.monte{opacity:0;transform:translateY(18px);animation:monte 1.2s var(--sortie) forwards;animation-delay:calc(.15s + var(--d,0) * .12s)}
@keyframes monte{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){ .monte{animation:none;opacity:1;transform:none} }

.pied{display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px 28px;padding:26px var(--gouttiere) 30px;border-top:1px solid var(--ligne);font-size:13px;color:var(--texte-2)}
.pied nav{display:flex;flex-wrap:wrap;gap:22px}
.lien{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.4em;text-decoration-color:var(--texte-3);transition:text-decoration-color .3s}
.lien:hover{text-decoration-color:var(--texte)}
.note-maquette{margin-top:18px;font-size:12px;color:var(--texte-3)}

/* petits téléphones : le texte des boutons tient en entier */
@media (max-width:420px){
  .bouton{gap:12px;padding:0 20px;font-size:11.5px;letter-spacing:.12em}
  .bouton.plein{padding:0 6px 0 20px}
}