/* ============================================================================
   LES THEMES INVITES (05/09/2026, Patrick)
   ----------------------------------------------------------------------------
   L IDEE. « J accueille comme Rimuru, quand il a fait une fete pour les gens
   des differents pays : on doit etre pret a les accueillir. » Quand quelqu un
   d une autre maison ouvre ce site, il doit s y sentir chez lui — sans qu on
   lui ait rien demande.

   CE QUE C EST, ET CE QUE CE N EST PAS. C est un jeu de COULEURS et de FORMES,
   pose sur NOTRE site, avec NOTRE nom et NOTRE logo. Ce n est ni un logo
   emprunte, ni une page qui se fait passer pour quelqu un d autre. Un invite
   reconnait ses couleurs ; il ne peut pas croire qu il est ailleurs.

   COMMENT CA MARCHE. Un seul attribut sur la page : data-invite="ardoise".
   Chaque maison redefinit les memes sept variables, plus deux reglages de
   forme. Le theme clair/sombre continue de marcher par-dessus, comme avant.

   AJOUTER UNE MAISON : copier un bloc, changer les couleurs. Rien d autre.
   ========================================================================= */


/* ============================ LES POLICES ==================================
   CE QUI EST VRAI, ET CE QUI EST UN EQUIVALENT (05/09/2026).
   Une seule des sept maisons publie sa police sous licence libre : Roboto,
   sous licence Apache 2.0. Toutes les autres utilisent des polices PRIVEES
   qu on n a pas le droit de recopier. On ne les prend donc pas : on choisit
   pour chacune la police LIBRE la plus proche d esprit, et on le dit.

     palette        police posee     licence
     ------------   --------------   ----------
     Ardoise        Roboto           Apache 2.0
     Bureau         Open Sans        OFL
     Terre cuite    Inter + Lora     OFL
     Bleu nuit      Inter            OFL
     Vert atelier   Barlow           OFL
     Vert d eau     Inter            OFL
     Gris bleute    Public Sans      OFL
   OFL = Open Font License : libre d usage, y compris sur un site public.

   POURQUOI ON NE LES CHARGE PAS TOUTES. Sept familles de caracteres a
   telecharger d un coup, c est une page lente pour rien. Chaque police n est
   demandee qu au moment ou son theme est choisi (voir le bout de programme
   dans la page). Tant qu on reste sur « Maison », aucune n est chargee.
   =========================================================================== */

/* --- Reglages communs a tous les invites --------------------------------- */
html[data-invite]{
  --g-courbe:cubic-bezier(.2,0,0,1);
  --rond-carte:16px;      /* coins des cartes */
  --rond-bouton:999px;    /* 999px = pilule ; 8px = rectangle arrondi */
}

/* ===== le gris, jamais le noir ================== */
html[data-invite="ardoise"]{
  --police:"Roboto",system-ui,sans-serif;
  --fond:#131314; --surface:#1e1f20; --surface2:#3c4043;
  --texte:#e3e3e3; --doux:#9aa0a6; --primaire:#a8c7fa; --ok:#6dd58c;
  --ombre:0 1px 2px rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15);
  --ombre-haute:0 2px 3px rgba(0,0,0,.3), 0 6px 10px 4px rgba(0,0,0,.15);
}
html[data-invite="ardoise"][data-theme="clair"]{
  --fond:#f8f9fa; --surface:#ffffff; --surface2:#dadce0;
  --texte:#1f1f1f; --doux:#5f6368; --primaire:#0b57d0; --ok:#188038;
  --ombre:0 1px 2px rgba(60,64,67,.3), 0 1px 3px 1px rgba(60,64,67,.15);
  --ombre-haute:0 1px 3px rgba(60,64,67,.3), 0 4px 8px 3px rgba(60,64,67,.15);
}

/* ===== le bleu de Microsoft ===================== */
html[data-invite="bureau"]{
  --police:"Open Sans",system-ui,sans-serif;
  --fond:#1b1a19; --surface:#252423; --surface2:#3b3a39;
  --texte:#f3f2f1; --doux:#a19f9d; --primaire:#4fa3f7; --ok:#6bb700;
  --rond-carte:6px; --rond-bouton:4px;      /* Microsoft coupe droit */
  --ombre:0 1.6px 3.6px rgba(0,0,0,.4), 0 .3px .9px rgba(0,0,0,.3);
  --ombre-haute:0 6.4px 14.4px rgba(0,0,0,.4), 0 1.2px 3.6px rgba(0,0,0,.3);
}
html[data-invite="bureau"][data-theme="clair"]{
  --fond:#faf9f8; --surface:#ffffff; --surface2:#edebe9;
  --texte:#201f1e; --doux:#605e5c; --primaire:#0078d4; --ok:#107c10;
  --ombre:0 1.6px 3.6px rgba(0,0,0,.13), 0 .3px .9px rgba(0,0,0,.1);
  --ombre-haute:0 6.4px 14.4px rgba(0,0,0,.13), 0 1.2px 3.6px rgba(0,0,0,.1);
}

/* ===== la terre cuite sur le creme ================ */
html[data-invite="terre-cuite"]{
  --police:"Inter",system-ui,sans-serif;
  --fond:#191917; --surface:#262624; --surface2:#3d3d3a;
  --texte:#f0eee6; --doux:#a3a096; --primaire:#d97757; --ok:#7d9a6b;
  --rond-carte:12px; --rond-bouton:10px;
  --ombre:0 1px 2px rgba(0,0,0,.35);
  --ombre-haute:0 4px 14px rgba(0,0,0,.4);
}
html[data-invite="terre-cuite"][data-theme="clair"]{
  --fond:#faf9f5; --surface:#ffffff; --surface2:#e5e2d9;
  --texte:#191917; --doux:#6b6961; --primaire:#c15f3c; --ok:#5c7a4a;
  --ombre:0 1px 2px rgba(25,25,23,.08);
  --ombre-haute:0 4px 14px rgba(25,25,23,.12);
}

/* ===== le bleu profond ====================== */
html[data-invite="bleu-nuit"]{
  --police:"Inter",system-ui,sans-serif;
  --fond:#0e0f1a; --surface:#181a2b; --surface2:#2b2f4a;
  --texte:#eceefb; --doux:#9298c0; --primaire:#7d92ff; --ok:#4ad4a0;
  --rond-carte:14px; --rond-bouton:999px;
  --ombre:0 2px 8px rgba(77,107,254,.12);
  --ombre-haute:0 6px 20px rgba(77,107,254,.22);
}
html[data-invite="bleu-nuit"][data-theme="clair"]{
  --fond:#f6f7ff; --surface:#ffffff; --surface2:#dfe3f7;
  --texte:#12142a; --doux:#5b608a; --primaire:#4d6bfe; --ok:#12a37c;
  --ombre:0 2px 8px rgba(77,107,254,.1);
  --ombre-haute:0 6px 20px rgba(77,107,254,.18);
}

/* ===== le vert sur le noir ==================== */
html[data-invite="vert-atelier"]{
  --police:"Barlow",system-ui,sans-serif;
  --fond:#000000; --surface:#111111; --surface2:#2a2a2a;
  --texte:#f2f2f2; --doux:#9b9b9b; --primaire:#76b900; --ok:#76b900;
  --rond-carte:4px; --rond-bouton:2px;     /* le vert atelier coupe net */
  --ombre:0 0 0 1px #1f1f1f;
  --ombre-haute:0 0 0 1px #76b900, 0 6px 18px rgba(118,185,0,.16);
}
html[data-invite="vert-atelier"][data-theme="clair"]{
  --fond:#ffffff; --surface:#ffffff; --surface2:#d9d9d9;
  --texte:#000000; --doux:#5c5c5c; --primaire:#5b8f00; --ok:#5b8f00;
  --ombre:0 0 0 1px #e6e6e6;
  --ombre-haute:0 0 0 1px #76b900, 0 6px 18px rgba(118,185,0,.14);
}

/* ===== le noir et blanc, le vert d eau ============= */
html[data-invite="vert-eau"]{
  --police:"Inter",system-ui,sans-serif;
  --fond:#0d0d0d; --surface:#171717; --surface2:#2f2f2f;
  --texte:#ececec; --doux:#a0a0a0; --primaire:#19c37d; --ok:#19c37d;
  --rond-carte:14px; --rond-bouton:999px;
  --ombre:0 1px 2px rgba(0,0,0,.4);
  --ombre-haute:0 8px 24px rgba(0,0,0,.5);
}
html[data-invite="vert-eau"][data-theme="clair"]{
  --fond:#ffffff; --surface:#ffffff; --surface2:#e5e5e5;
  --texte:#0d0d0d; --doux:#6e6e80; --primaire:#10a37f; --ok:#10a37f;
  --ombre:0 1px 2px rgba(0,0,0,.06);
  --ombre-haute:0 8px 24px rgba(0,0,0,.1);
}

/* ===== le bleu large ========================= */
html[data-invite="gris-bleute"]{
  --police:"Public Sans",system-ui,sans-serif;
  --fond:#18191a; --surface:#242526; --surface2:#3a3b3c;
  --texte:#e4e6eb; --doux:#b0b3b8; --primaire:#4599ff; --ok:#31a24c;
  --rond-carte:12px; --rond-bouton:8px;
  --ombre:0 1px 2px rgba(0,0,0,.4);
  --ombre-haute:0 4px 12px rgba(0,0,0,.5);
}
html[data-invite="gris-bleute"][data-theme="clair"]{
  --fond:#f0f2f5; --surface:#ffffff; --surface2:#ced0d4;
  --texte:#050505; --doux:#65676b; --primaire:#0064e0; --ok:#31a24c;
  --ombre:0 1px 2px rgba(0,0,0,.1);
  --ombre-haute:0 4px 12px rgba(0,0,0,.15);
}

/* --- Ce que les couleurs changent, sur la page --------------------------- */
html[data-invite] body{background:var(--fond); color:var(--texte)}
html[data-invite] .carte,
html[data-invite] .bloc-etude,
html[data-invite] .art-fiche{
  background:var(--surface); border:none; border-radius:var(--rond-carte);
  box-shadow:var(--ombre);
  transition:box-shadow .28s var(--g-courbe), transform .28s var(--g-courbe);
}
html[data-invite] .carte:hover,
html[data-invite] .bloc-etude:hover,
html[data-invite] .art-fiche:hover{box-shadow:var(--ombre-haute); border:none}
html[data-invite] .carte:hover{transform:translateY(-3px)}
html[data-invite] .carte .vignette-art{border:none; border-radius:calc(var(--rond-carte) - 4px)}
html[data-invite] .bloc-etude .ruban{background:var(--primaire); border:none}
html[data-invite] .bloc-etude .ruban span{color:var(--fond); font-weight:600}
html[data-invite] .bloc-etude .chiffres li{background:transparent;
  border:1px solid var(--surface2); border-radius:8px}
html[data-invite] .bloc-etude .chiffres b{color:var(--texte)}
html[data-invite] .bloc-etude .portes a{border-radius:var(--rond-bouton);
  border:1px solid var(--surface2); color:var(--primaire); font-weight:500}
html[data-invite] .bloc-etude .portes a.premiere{background:var(--primaire);
  color:var(--fond); border-color:transparent}
html[data-invite] .etudes-fleche{background:var(--surface); border:none;
  box-shadow:var(--ombre); color:var(--texte)}
html[data-invite] .etudes-zone{--barre:var(--surface2); --barre-vive:var(--doux)}
html[data-invite] .art-cherche{border-radius:var(--rond-bouton);
  border:1px solid var(--surface2); background:var(--surface)}
html[data-invite] .art-rail button,
html[data-invite] .art-bascule button{border-radius:var(--rond-bouton)}

/* --- Le mouvement, le meme pour tous ------------------------------------ */
@keyframes invite-entree{ from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none} }
html[data-invite] .anime{animation:invite-entree .42s var(--g-courbe) both}
@media (prefers-reduced-motion: reduce){
  html[data-invite] .anime{animation:none}
  html[data-invite] .carte, html[data-invite] .bloc-etude, html[data-invite] .art-fiche{transition:none}
  html[data-invite] .carte:hover{transform:none}
}

/* La terre cuite met ses titres en serif : c est ce qui la distingue le plus. */
html[data-invite="terre-cuite"] h1,
html[data-invite="terre-cuite"] .bloc-etude h2,
html[data-invite="terre-cuite"] .carte h2{font-family:"Lora",Georgia,serif; font-weight:600}
/* Le vert atelier serre ses titres, comme un cartouche d atelier. */
html[data-invite="vert-atelier"] h1,
html[data-invite="vert-atelier"] .carte h2{letter-spacing:-.01em; text-transform:none}

/* La police du theme s applique a toute la page. */
html[data-invite] body{font-family:var(--police, system-ui), sans-serif}