/* =========================================================
   AXLSTONE — maquette
   La tagline EST la direction artistique :
   deux humeurs, deux mondes, un interrupteur.
   Tout le design passe par les tokens ci-dessous —
   pour changer la palette, on ne touche que ce bloc.
   ========================================================= */
:root{
  /* --- humeur « drôle » (par défaut) : rétro 1972, solaire --- */
  --fond:#F6E7C9;
  --fond-2:#F0DCAE;
  --encre:#57301F;
  --encre-douce:#9A6B4F;
  --accent:#E8622C;        /* orange brûlé */
  --accent-2:#E8A33C;      /* moutarde */
  --accent-3:#7B7A36;      /* olive */
  --carte:#FBEFD3;
  --trait:#DCC08D;
  --r-carte:150px 150px 16px 16px;  /* arches seventies */
  --r-doux:24px;                    /* arrondi généreux des autres cartes */
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --corps:'Karla','Helvetica Neue',sans-serif;
  --lit:'Newsreader',Georgia,serif;
}
[data-humeur="triste"]{
  /* --- humeur « un peu triste » : bleu nuit, calme --- */
  --fond:#1B2430;
  --fond-2:#16202B;
  --encre:#DCE4EE;
  --encre-douce:#8C9BAD;
  --accent:#8FB4D9;        /* pluie */
  --accent-2:#B9A7E0;      /* lavande */
  --accent-3:#5E7A9B;      /* nuit d'orage */
  --carte:#222E3C;
  --trait:#33414F;
  /* les formes (arches, arrondis) sont les mêmes dans les deux humeurs :
     seule la couleur change — --r-carte et --r-doux héritent de :root */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--fond);
  color:var(--encre);
  font-family:var(--corps);
  font-size:clamp(1rem,.95rem + .3vw,1.12rem);
  line-height:1.62;
  transition:background 600ms ease,color 600ms ease;
}
::selection{background:var(--accent);color:var(--fond)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit}
.page{max-width:1060px;margin:0 auto;padding:0 clamp(1.25rem,4vw,3rem)}
section{padding:clamp(2.6rem,6vw,4.5rem) 0}
.libelle{font-size:.7rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:1rem}
h2{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:1.12;letter-spacing:-.01em;margin-bottom:1.2rem;text-wrap:balance}
.rev{opacity:0;transform:translateY(20px);transition:opacity 600ms ease,transform 600ms ease}
.rev.visible{opacity:1;transform:none}

/* ---------- rayures seventies en haut de page ---------- */
.rayures{
  height:12px;
  background:repeating-linear-gradient(90deg,
    var(--accent) 0 25%,var(--accent-2) 25% 50%,
    var(--accent-3) 50% 75%,var(--encre-douce) 75% 100%);
  transition:background 600ms ease;
}

/* ---------- en-tête + interrupteur d'humeur ---------- */
header{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.4rem;flex-wrap:wrap}
.marque{font-family:var(--display);font-weight:800;font-size:1.15rem;letter-spacing:-.02em}
.marque span{color:var(--accent)}
.humeur{
  display:flex;align-items:center;gap:.6rem;
  font-size:.78rem;font-weight:700;letter-spacing:.06em;
  background:var(--carte);border:1px solid var(--trait);border-radius:999px;
  padding:.35rem .5rem;cursor:pointer;color:var(--encre);
  transition:background 600ms ease,border-color 600ms ease;
}
.humeur .opt{padding:.3rem .8rem;border-radius:999px;transition:background 300ms ease,color 300ms ease}
.humeur .opt.actif{background:var(--accent);color:var(--fond)}

/* ---------- héro : la tagline en architecture + soleil d'époque ---------- */
.hero{padding-top:clamp(2.5rem,7vw,5rem);position:relative}
.soleil{
  position:absolute;right:0;top:clamp(1rem,4vw,2.5rem);
  width:clamp(110px,19vw,210px);pointer-events:none;
}
.soleil path{transition:fill 600ms ease,stroke 600ms ease}
.soleil .arc{transform-origin:50% 100%;animation:leve 900ms cubic-bezier(.2,1,.3,1) both}
.soleil .arc:nth-child(2){animation-delay:120ms}
.soleil .arc:nth-child(3){animation-delay:240ms}
.soleil .arc:nth-child(4){animation-delay:360ms}
@keyframes leve{from{transform:translateY(30%);opacity:0}to{transform:none;opacity:1}}
@media(max-width:640px){.soleil{width:84px;opacity:.55}}
.hero h1{
  position:relative;z-index:1;
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.6rem,9vw,6.4rem);
  line-height:1.02;letter-spacing:-.025em;text-wrap:balance;
}
.hero h1 .drole{color:var(--accent)}
.hero h1 .triste{
  font-family:var(--lit);font-weight:400;font-style:italic;
  display:inline-block;transform:rotate(-1.6deg) translateY(.06em);
  color:var(--encre-douce);
}
.hero .qui{margin-top:1.8rem;max-width:56ch;font-size:clamp(1.05rem,1.7vw,1.25rem)}
.hero .qui b{font-weight:700}
.hero .qui .metier{color:var(--encre-douce)}

/* ---------- « en ce moment » (zone éditée à la main) ---------- */
.maintenant{padding-top:0}
.maintenant .bandeau{
  display:flex;flex-wrap:wrap;gap:.7rem;align-items:center;
  border:1px dashed var(--trait);border-radius:var(--r-doux);
  background:var(--fond-2);padding:1rem 1.3rem;
  transition:background 600ms ease,border-color 600ms ease,border-radius 600ms ease;
}
.maintenant .point{width:9px;height:9px;border-radius:50%;background:var(--accent);animation:bat 2s ease-in-out infinite}
@keyframes bat{50%{opacity:.35}}
.maintenant p{font-size:.95rem}
.maintenant p em{font-family:var(--lit);font-style:italic}

/* ---------- livres : des objets, pas des liens ---------- */
.livres .rayon{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,3.5vw,3rem);align-items:stretch}
@media(max-width:720px){.livres .rayon{grid-template-columns:1fr}}
.livre{display:grid;grid-template-columns:auto 1fr;gap:1.4rem;align-items:start}
.couv{
  width:clamp(96px,12vw,130px);aspect-ratio:2/3;border-radius:3px 8px 8px 3px;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:.9rem .7rem;position:relative;flex-shrink:0;
  box-shadow:6px 8px 0 rgba(0,0,0,.12);
  transform:rotate(-2deg);transition:transform 300ms cubic-bezier(.2,1.6,.4,1);
}
.livre:hover .couv{transform:rotate(0) translateY(-4px)}
.couv::before{content:'';position:absolute;left:7px;top:0;bottom:0;width:1px;background:rgba(0,0,0,.18)}
.couv .c-titre{font-family:var(--lit);font-weight:500;font-size:.82rem;line-height:1.2}
.couv .c-nom{font-size:.55rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;opacity:.8}
.couv-img{object-fit:cover;padding:0;display:block}
.couv-nuits{background:linear-gradient(160deg,#233046,#0F1622);color:#E7DFCB}
.couv-lhotel{background:linear-gradient(160deg,#8C2B2B,#4A1214);color:#F2E3D0}
.livre h3{font-family:var(--lit);font-weight:500;font-size:1.35rem;font-style:italic;margin-bottom:.2rem}
.livre .genre{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-douce);display:block;margin-bottom:.6rem}
.livre p{font-size:.95rem;margin-bottom:.8rem}
.lien{
  display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:.05em;
  color:var(--accent);text-decoration:none;border-bottom:2px solid var(--accent);
  padding-bottom:2px;transition:opacity 200ms ease;
}
.lien:hover{opacity:.7}

/* ---------- visual novel : l'aura sombre, quelle que soit l'humeur ---------- */
.vn .cadre{
  background:#14111A;color:#DCD4E8;border-radius:var(--r-doux);
  padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden;
  transition:border-radius 600ms ease;
}
.vn .cadre::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse at 80% 0%,rgba(185,167,224,.16),transparent 55%);
}
.vn .libelle{color:#B9A7E0}
.vn h2{color:#EFEAF7}
.vn p{max-width:56ch;font-family:var(--lit);font-size:1.05rem}
.vn .statut{
  display:inline-block;margin-top:1.4rem;font-family:var(--corps);
  font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid rgba(185,167,224,.5);border-radius:999px;padding:.5rem 1.1rem;color:#B9A7E0;
}

/* ---------- à venir : le projet phare + la liste ---------- */
.projets{margin-top:1.4rem;border-top:1px solid var(--trait)}
.projet{display:flex;gap:1rem;align-items:baseline;flex-wrap:wrap;padding:1rem 0;border-bottom:1px solid var(--trait)}
.projet h3{font-family:var(--display);font-weight:600;font-size:1.05rem}
.projet p{font-size:.9rem;color:var(--encre-douce);flex:1 1 30ch;margin:0}
.etat{font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;border:1px solid var(--accent);color:var(--accent);border-radius:999px;padding:.3rem .8rem;white-space:nowrap;transition:border-color 600ms ease,color 600ms ease}

/* ---------- sites : cartes avec dernières publications ---------- */
.sites-grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.site-carte{background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-doux);padding:1.4rem;transition:background 600ms ease,border-color 250ms ease,border-radius 600ms ease}
.site-carte:hover{border-color:var(--accent)}
.site-carte h3{font-family:var(--display);font-weight:700;font-size:1.1rem;margin-bottom:.15rem}
.site-carte .quoi{font-size:.8rem;color:var(--encre-douce);margin-bottom:1rem}
.pubs{list-style:none;border-top:1px solid var(--trait);margin-bottom:1rem}
.pubs li{border-bottom:1px solid var(--trait)}
.pubs a{display:flex;justify-content:space-between;gap:1rem;align-items:baseline;text-decoration:none;padding:.6rem 0;font-size:.92rem;transition:color 200ms ease}
.pubs a:hover{color:var(--accent)}
.pubs .date{font-size:.7rem;color:var(--encre-douce);white-space:nowrap}

/* ---------- vidéos & stream ---------- */
.chaines{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;margin-top:.4rem}
.chaine{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-carte);
  padding:2rem 1.4rem 1.4rem;text-decoration:none;display:block;text-align:center;
  transition:transform 250ms ease,border-color 250ms ease,background 600ms ease,border-radius 600ms ease;
}
.chaine .ic{margin-left:auto;margin-right:auto}
.chaine:hover{transform:translateY(-4px);border-color:var(--accent)}
.chaine .ic{display:block;margin-bottom:.7rem}
.ic{width:24px;height:24px;stroke:var(--accent);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;transition:stroke 600ms ease}
.programme{display:flex;flex-wrap:wrap;gap:1.1rem;flex-basis:100%;margin-top:.4rem;padding-top:1rem;border-top:1px solid var(--trait)}
.programme .item{display:flex;align-items:center;gap:.45rem;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--encre-douce)}
.programme .ic{width:18px;height:18px}
.chaine h3{font-family:var(--display);font-weight:600;font-size:1.02rem;margin-bottom:.25rem}
.chaine p{font-size:.86rem;color:var(--encre-douce)}
.chaine .pastille{
  display:inline-block;margin-top:.7rem;font-size:.65rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--accent);
}

/* ---------- ailleurs : les portes, en sourdine ---------- */
.ailleurs .portes{display:flex;flex-wrap:wrap;gap:.7rem}
.porte{
  font-size:.85rem;font-weight:500;text-decoration:none;
  border:1px solid var(--trait);border-radius:999px;padding:.55rem 1.15rem;
  transition:border-color 200ms ease,color 200ms ease;
}
.porte:hover{border-color:var(--accent);color:var(--accent)}
.porte span{color:var(--encre-douce);font-weight:400}
.rs-groupe{margin-bottom:1.3rem}
.rs-groupe .sous{font-size:.7rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--encre-douce);display:block;margin-bottom:.6rem}

/* ---------- stream : la carte CEsoir ---------- */
.direct{
  background:var(--carte);border:1px solid var(--trait);border-radius:var(--r-doux);
  padding:clamp(1.4rem,3vw,2rem);display:flex;gap:1.4rem;align-items:center;flex-wrap:wrap;
  text-decoration:none;transition:transform 250ms ease,border-color 250ms ease,background 600ms ease,border-radius 600ms ease;
}
.direct:hover{transform:translateY(-4px);border-color:var(--accent)}
.direct .live{
  width:14px;height:14px;border-radius:50%;background:#E23D3D;flex-shrink:0;
  box-shadow:0 0 0 0 rgba(226,61,61,.5);animation:ondes 2s ease-out infinite;
}
@keyframes ondes{to{box-shadow:0 0 0 14px rgba(226,61,61,0)}}
.direct h3{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,2.6vw,1.7rem)}
.direct p{font-size:.92rem;color:var(--encre-douce);flex:1 1 26ch}
.direct .pastille{font-size:.65rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}

/* ---------- pied ---------- */
footer{
  border-top:1px solid var(--trait);padding:1.5rem 0 2.6rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;
  font-size:.78rem;color:var(--encre-douce);
  transition:border-color 600ms ease;
}
footer .sig{font-family:var(--lit);font-style:italic}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .rev{opacity:1;transform:none}
}