/* =====================================================================
   CERCLE MAGUS – Fondations partagées (thème « observatoire »)
   Fond nuit céleste, accents lumineux, typographie humaniste moderne.
   ===================================================================== */

/* ---------------------------------------------------------------------
   POLICES – hébergées sur notre serveur, aucun appel à l'extérieur.

   Les fichiers vivent dans assets/fonts/. Deux découpes par police :
   « latin » couvre le français courant, « latin-ext » les caractères
   plus rares ; le navigateur ne télécharge que ce dont il a besoin.

   Cinq familles sont déclarées, mais un navigateur ne télécharge QUE
   celles réellement utilisées. Pour changer la police des titres, il
   suffit donc de modifier « --display » plus bas : rien d'autre.
   Toutes sont sous licence libre SIL Open Font License (voir
   assets/fonts/LICENCES.txt).
   --------------------------------------------------------------------- */

/* Police d'interface (textes, formulaires, chiffres) */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/space-grotesk-300-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url('../fonts/space-grotesk-300-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Police des titres – actuellement Cinzel */
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/cinzel-400-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Cinzel';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/cinzel-400-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Titres – autres pistes gardées sous la main (voir --display) */
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/marcellus-400-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Marcellus';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/marcellus-400-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/playfair-display-400-700-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/playfair-display-400-700-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/spectral-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/spectral-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/spectral-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;
  src:url('../fonts/spectral-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Fonds & neutres */
  --ground:#141733; --ground-2:#1b2048; --panel:#1c2250;
  --ivory:#eef1ff; --muted:#9aa3cf; --muted-2:#7f88bf; --line:#3a4176;
  --gilt:#e8c07a;

  /* Pigments des quatre Maisons – repli si la base ne fournit rien.
     La couleur qui compte est toujours celle de la base : c'est elle que les
     pages posent dans --house. */
  --kamo:#09e9de; --dralignis:#b57bf5; --heptacrocs:#f7c33f; --sans-visage:#0d9488;

  /* Bleu d'interface : boutons, liens et contours de focus de l'espace
     professeurs. Il n'appartient à aucune Maison. */
  --azur:#4db8ff;

  /* Sémantique */
  --gain:#2ee6a6; --perte:#ff6a7d; --alerte:#ffb454;

  /* Typographie
     Pour essayer une autre police de titres, remplacer le premier nom de
     --display par 'Marcellus', 'Playfair Display' ou 'Spectral'. */
  --display:'Cinzel',Georgia,serif;
  --ui:'Space Grotesk',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;

  --rayon:12px;
  --ombre:0 20px 60px rgba(0,0,0,.4);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  font-family:var(--ui);
  color:var(--ivory);
  font-size:17px;
  line-height:1.6;
  background:radial-gradient(120% 80% at 50% -8%, #232a63 0%, var(--ground) 46%, #0f1128 100%);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* Semis d'étoiles fixe et discret, commun à toutes les pages */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%,rgba(238,241,255,.7),transparent),
    radial-gradient(1.2px 1.2px at 82% 16%,rgba(238,241,255,.5),transparent),
    radial-gradient(1px 1px at 66% 42%,rgba(238,241,255,.5),transparent),
    radial-gradient(1.3px 1.3px at 28% 72%,rgba(238,241,255,.5),transparent),
    radial-gradient(1px 1px at 90% 78%,rgba(238,241,255,.45),transparent),
    radial-gradient(1.2px 1.2px at 46% 88%,rgba(238,241,255,.4),transparent),
    radial-gradient(1px 1px at 8% 54%,rgba(238,241,255,.4),transparent);
  background-repeat:no-repeat;
}

h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;margin:0}
a{color:var(--ivory)}

/* Accessibilité */
.lien-evitement{position:absolute;left:-999px;top:0}
.lien-evitement:focus{left:1rem;top:1rem;z-index:30;background:var(--azur);color:#08122a;padding:.5rem .9rem;border-radius:8px;font-weight:600}
:focus-visible{outline:2px solid var(--azur);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------------------------------------------------------------------
   MENU DES PAGES PUBLIQUES (voir src/vue_menu.php)

   Le bouton est posé en haut à droite, hors du flux : il ne repousse rien,
   et sur l'Observatoire les cadrans restent visibles sans faire défiler.
   Le panneau s'ouvre PAR-DESSUS la page. Même place sur toutes les pages
   publiques, pour qu'on le retrouve sans le chercher.
   --------------------------------------------------------------------- */
.menu-site{--menu-marge:clamp(.75rem,2.5vw,1.75rem);position:absolute;top:clamp(.6rem,1.6vw,1.1rem);right:var(--menu-marge);z-index:20}
.menu{position:relative}
.menu__bouton{display:inline-flex;align-items:center;gap:.6rem;list-style:none;cursor:pointer;user-select:none;font-family:var(--ui);font-size:.78rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding:.62em 1.05em .62em .95em;border:1px solid var(--line);border-radius:999px;background:rgba(20,23,51,.6);backdrop-filter:blur(6px);transition:color .2s,border-color .2s,background .2s}
.menu__bouton::-webkit-details-marker{display:none}
.menu__bouton:hover,.menu[open] .menu__bouton{color:var(--ivory);border-color:color-mix(in srgb,var(--gilt) 55%,var(--line))}
/* Trois traits qui se croisent en une croix quand le panneau est ouvert */
.menu__icone{position:relative;display:block;width:16px;height:12px}
.menu__icone::before,.menu__icone::after,.menu__icone span{content:"";position:absolute;left:0;width:100%;height:1.5px;border-radius:2px;background:currentColor;transition:transform .25s,opacity .2s,top .25s}
.menu__icone::before{top:0}
.menu__icone span{top:5.25px}
.menu__icone::after{top:10.5px}
.menu[open] .menu__icone::before{top:5.25px;transform:rotate(45deg)}
.menu[open] .menu__icone span{opacity:0}
.menu[open] .menu__icone::after{top:5.25px;transform:rotate(-45deg)}

.menu__panneau{position:absolute;right:0;top:calc(100% + .6rem);width:min(19rem,calc(100vw - 2 * var(--menu-marge,1rem)));padding:1.1rem 1rem .8rem;text-align:left;background:linear-gradient(180deg,rgba(28,34,80,.97),rgba(20,23,51,.98));border:1px solid var(--line);border-radius:var(--rayon);box-shadow:var(--ombre);backdrop-filter:blur(8px)}
.menu[open] .menu__panneau{animation:menu-ouverture .22s ease-out}
@keyframes menu-ouverture{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.menu__titre{margin:0 0 .5rem .55rem;font-family:var(--ui);font-size:.68rem;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--muted-2)}
.menu__liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.1rem}
.menu__lien{display:flex;align-items:center;gap:.75rem;padding:.4rem .55rem;border-radius:10px;color:var(--ivory);text-decoration:none;transition:background .2s}
.menu__lien:hover,.menu__lien:focus-visible{background:color-mix(in srgb,var(--house) 15%,transparent)}
.menu__lien[aria-current="page"]{background:color-mix(in srgb,var(--house) 11%,transparent);box-shadow:inset 2px 0 0 var(--house)}
.menu__logo{flex:none;width:40px;height:40px;color:var(--house);filter:drop-shadow(0 0 4px color-mix(in srgb,var(--house) 70%,transparent));transition:transform .3s}
.menu__lien:hover .menu__logo{transform:scale(1.08)}
.menu__textes{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.menu__nom{font-family:var(--display);font-weight:600;font-size:1rem;letter-spacing:.01em}
.menu__detail{font-size:.78rem;color:var(--muted);color:color-mix(in srgb,var(--house) 40%,var(--muted))}

/* Téléphone : le mot « Menu » s'efface (le bouton garderait sinon le titre
   au coude à coude), mais reste lu par les lecteurs d'écran. */
@media (max-width:560px){
  .menu__bouton{padding:.7em;gap:0}
  .menu__mot{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (pointer:coarse){
  .menu__bouton{min-width:44px;min-height:44px;justify-content:center}
  .menu__lien{min-height:48px}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}