:root {
  /* Échelle typographique Pico réglée à 90 %, en conservant sa progression
     selon la largeur d'écran. */
  --ol-font-scale: 90%;
  --pico-font-size: var(--ol-font-scale);

  /* ESIEA COLOR */
  --esiea-blue: #36a9e1;
  --esiea-orange: #f59e00;
  --esiea-dark: #151d34; 
  --esiea-creme: #fdf8f1;

  /* OpenLab COLOR */
  --openlab-main: var(--esiea-blue);
  --openlab-blue:var(--esiea-dark) ;
  --openlab-grey-blue: color-mix(in srgb, var(--esiea-blue) 50%, var(--esiea-dark) 50%);

  --green: #75B758;

  /* Skill-tree graph (light mode) */
  --cy-bg:             #f0f0f0;
  --cy-node:           var(--esiea-dark);
  --cy-node-validated: var(--green);
  --cy-node-unavail:   #4A4A49;
  --cy-edge:           var(--esiea-orange);
  --cy-tooltip-bg:     #e0e0e0;
}

/* Skill-tree graph (dark mode) — réagit au thème forcé ET à la préférence système.
   Même garde :not([data-theme="light"]) que les couleurs d'état d'openlab.css. */
:root[data-theme="dark"] {
  --cy-bg:             color-mix(in srgb, var(--esiea-dark) 90%, var(--esiea-blue) 10%);
  --cy-node:           var(--esiea-blue);
  --cy-node-validated: var(--green);
  --cy-node-unavail:   #4A4A49;
  --cy-edge:           var(--esiea-orange);
  --cy-tooltip-bg:     #1e2a40;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cy-bg:             color-mix(in srgb, var(--esiea-dark) 90%, var(--esiea-blue) 10%);
    --cy-node:           var(--esiea-blue);
    --cy-node-validated: var(--green);
    --cy-node-unavail:   #4A4A49;
    --cy-edge:           var(--esiea-orange);
    --cy-tooltip-bg:     #1e2a40;
  }
}

@media (min-width: 576px) {
  :root { --pico-font-size: calc(var(--ol-font-scale) * 1.0625); }
}

@media (min-width: 768px) {
  :root { --pico-font-size: calc(var(--ol-font-scale) * 1.125); }
}

@media (min-width: 1024px) {
  :root { --pico-font-size: calc(var(--ol-font-scale) * 1.1875); }
}

@media (min-width: 1280px) {
  :root { --pico-font-size: calc(var(--ol-font-scale) * 1.25); }
}

@media (min-width: 1536px) {
  :root { --pico-font-size: calc(var(--ol-font-scale) * 1.3125); }
}

/*todo : add ESIEA graphic chart fonts*/

/* Boutons, breadcrumb et primitives de layout : voir openlab.css.
   styles.css ne conserve que les overrides projet et les cas limites (id). */

header+main
{
  /* Le header est fixe (voir openlab.css .site-header) : cet espace réserve
     sa hauteur pleine (non compactée), mesurée et posée par
     js/sticky-header.js. Fallback si JS indisponible. */
  padding-top: var(--site-header-height, 6rem);
}

/* Gabarit global : main centré, 80% de la largeur de page, plafonné à 1920px.
   Borne aussi les layouts .page* d'openlab.css. */
main
{
  max-width: min(80%, 1920px);
  margin-inline: auto;
}


body>header
{
  padding-block: 0;
}


#hero {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 40vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--pico-spacing);
  color: #fff;
  text-shadow: 0 1px 4px rgba(0,0,0,.6);
}

#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--esiea-dark) 65%, transparent);
  z-index: 0;
}

#hero > * {
  position: relative;
  z-index: 1;
}

#hero hgroup p,#hero hgroup h1 {
  color: #fff;
}

#partenaires-logos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
}

#partenaires-logos img {
  max-height: 60px;
  width: auto;
  object-fit: contain;
}

#theme-toggle
{
  min-width: 1em;
}