[hidden] { display: none !important; }
:root{
  /* ===== Couleurs HEP ===== */
  --hep-bleu: #009cde;            --rgb-bleu: 0,156,222;
  --hep-bleu-sombre: #00354c;     --rgb-bleu-sombre: 0,53,76;
  --hep-bleu-50: #94cef2;         --rgb-bleu-50: 148,206,242;
  --hep-bleu-sombre-50: #6891a8;  --rgb-bleu-sombre-50: 104,145,168;
  --hep-bleu-25: #cee7fa;         --rgb-bleu-25: 206,231,250;
  --hep-bleu-sombre-25: #b1c6d5;  --rgb-bleu-sombre-25: 177,198,213;

  --hep-vert: #82c8ac;            --rgb-vert: 130,200,172;
  --hep-mauve: #dad2fa;           --rgb-mauve: 218,210,250;
  --hep-abricot: #f9eacf;         --rgb-abricot: 249,234,207;
  --hep-jaune: #f5f0a4;           --rgb-jaune: 245,240,164;
  --hep-corail: #ef9286;          --rgb-corail: 239,146,134;

  /* ===== Assombrissement (modifiable !) ===== */
  --card-darken: 10; /* % assombrissement des cartes (0–30 recommandé) */
  --bg-darken: 0;    /* % assombrissement du fond (0–12 recommandé) */

  /* ===== Fond (base) – recalculé via JS selon --bg-darken ===== */
  --bg-base: #f5f7fa; /* blanc légèrement grisé */
  --bg-1: var(--bg-base);
  --bg-2: #eef3f8;

  /* ===== Texte / UI ===== */
  --text: #0f2230;
  --muted: #526b7a;
  --line: rgba(15,23,42,.22);

  /* ===== Géométrie / lisibilité ===== */
  --radius: 14px;
  --shadow: 0 6px 18px rgba(0,0,0,.10);
  --card-size: 160px;
  --card-gap-arc: 22px;
  --ring-margin: 44px;
  --screen-margin: 32px;
  --center-min: 200px;
  --card-min: 92px;
  
  /* largeur = hauteur * multiplicateur (par défaut: 1 = carré) */
  --card-width-mult: 1.40;                 /* mets 1.25, 1.35, 1.5… pour élargir */
  --card-width: calc(var(--card-size) * var(--card-width-mult));

  /* Étirement horizontal des anneaux (desktop) */
  --ring-stretch-x: 1.18;   /* >1 pousse plus les côtés gauche/droite */
  --ring-stretch-y: 1.00;   /* 1 = inchangé en vertical */
  --ring-stretch-step: 0.06;/* +étirement par anneau (0 = tous pareil) */

  /* ===== Icône centre ===== */
  --center-icon-size: 48px;

  /* Couleur par défaut si non précisée */
  --c-rgb-default: var(--rgb-bleu);
}
:root{
  --charte-w: 120px;          /* largeur du bouton sur grand écran */
  --charte-gap: 12px;         /* écart entre bouton et contenu */
  --charte-w-gap: calc(var(--charte-w) + var(--charte-gap) + 8px); /* 8px = left du bouton */
}

/* Ajuste automatiquement la largeur du bouton en mobile */
@media (max-width: 900px){ :root{ --charte-w: 48px; } }
@media (max-width: 480px){ :root{ --charte-w: 36px; } }

/* En mode mobile, décale tout le contenu pour ne pas passer SOUS le bouton */
body.mobile{ padding-left: 0; }

* { box-sizing: border-box; }
html, body {
  height: 100%; margin: 0;
  background: radial-gradient(1200px 800px at 50% 16%, #ffffff 0%, var(--bg-1) 65%, var(--bg-2) 100%);
  color: var(--text);
  font-family: Arial, "Helvetica Neue", Helvetica, "Noto Sans", "Liberation Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden;
}

/* ===== Fil d’Ariane (radial) ===== */
.breadcrumb {
  position: fixed; top: 10px; left: 12px; /* gauche par défaut */
  display: none;
  max-width: min(92vw, 1100px);
  padding: 10px 14px; border-radius: 12px;
  background: #ffffffd6;
  backdrop-filter: blur(6px);
  border: 1px solid #e6eef5;
  color: #183a4c;
  z-index: 6; font-size: 14px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.breadcrumb.right { right: 12px; left: auto; }
.breadcrumb a { color: var(--hep-bleu); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { margin: 0 6px; color: #7e99aa; }
.show-bc .breadcrumb{ display: block; }
body.leaf-open .breadcrumb{ display:block !important; }

/* ===== Conteneur radial ===== */
main#app{ position: relative; width:100vw; height:100vh; overflow:hidden; }

/* ===== Lignes radiales ===== */
svg#links{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.link-line{ stroke: var(--line); stroke-width: 2; stroke-linecap: round; opacity: .9; }

/* ===== Couche cartes ===== */
.layer{ position:absolute; inset:0; z-index:1; }

/* ===== Centre ===== */
.center{
  position:absolute; left:50%; top:50%; transform:translate(-50%, -50%);
  display:grid; place-items:center; gap:10px; text-align:center;
  padding:18px 20px; min-width: var(--center-min);
  border-radius: 18px;
  background: linear-gradient(160deg, #ffffff, #f7fbff);
  border: 1px solid #dce8f2;
  box-shadow: var(--shadow);
  z-index:2;
  user-select: none;
}
.center.clickable { cursor: pointer; }
.center .picto-center{
  width: var(--center-icon-size);
  height: var(--center-icon-size);
  padding: 6px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #e9f0f6;
  overflow: hidden;
  font-size: calc(var(--center-icon-size) * 0.62);
  line-height: 1;
  font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", inherit;
}
.center .picto-center img{ width: 100%; height: 100%; object-fit: contain; display: block; }
.center .label{ font-weight: 700; letter-spacing:.2px; color: #0c2a3a; font-size: clamp(16px, 2.2vmin, 22px); }
.center .hint{ color: #6c8898; font-size: 12px; }
.center .back{
  margin-top: 6px; padding: 8px 12px; border-radius: 999px;
  border: 1px solid #e1edf5; background: #ffffff; color: var(--text);
}
.center:not(.has-back) .back{ display:none; }

/* ===== Cartes ===== */
.card{
  position:absolute;
  width: var(--card-width);
  height: var(--card-size);
  aspect-ratio: auto;
  display:grid; grid-template-rows: 1fr auto; align-items:center; justify-items:center;
  border-radius: var(--radius);
  text-decoration:none; color: var(--text);
  padding: 10px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .2s ease;
  will-change: transform;
  background: rgba(255,255,255);
/*
  background: linear-gradient(
    160deg,
    rgba(255,255,255,.88),
    rgba(var(--c-rgb-actual, var(--c-rgb, var(--c-rgb-default))), .20)
  );*/
  border: 1px solid rgba(var(--c-rgb-actual, var(--c-rgb, var(--c-rgb-default))), .38);
  box-shadow: var(--shadow);
}
.card:hover{ transform: translateY(-2px) scale(1.02); box-shadow: 0 8px 22px rgba(0,0,0,.12); }
.card:focus-visible{ outline: 2px solid rgba(var(--c-rgb-actual, var(--c-rgb, var(--c-rgb-default))), .9); outline-offset: 2px; }

.picto{
  width: 66%; max-width: 60px; max-height: 60px;
  display:grid; place-items:center; overflow:hidden; border-radius: 12px;
  background: #ffffff; border: 1px solid #e6eef5;
  aspect-ratio: 1 / 1;
  font-size: clamp(22px, 5.2vmin, 44px);
  line-height: 1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", inherit;
}
.picto img{ width:100%; height:100%; object-fit:contain; }

.title{
  width:100%; text-align:center; margin-top:8px;
  font-size: clamp(12px, 1.8vmin, 16px); line-height:1.25; text-wrap: balance;
  color: #29485a;
}

/* ===== Classes de couleur ===== */
.c-bleu               { --c-rgb: var(--rgb-bleu); }
.c-bleu-sombre        { --c-rgb: var(--rgb-bleu-sombre); }
.c-bleu-50            { --c-rgb: var(--rgb-bleu-50); }
.c-bleu-sombre-50     { --c-rgb: var(--rgb-bleu-sombre-50); }
.c-bleu-25            { --c-rgb: var(--rgb-bleu-25); }
.c-bleu-sombre-25     { --c-rgb: var(--rgb-bleu-sombre-25); }
.c-vert               { --c-rgb: var(--rgb-vert); }
.c-mauve              { --c-rgb: var(--rgb-mauve); }
.c-abricot            { --c-rgb: var(--rgb-abricot); }
.c-jaune              { --c-rgb: var(--rgb-jaune); }
.c-corail             { --c-rgb: var(--rgb-corail); }

/* ===== Overlay “écran trop petit” ===== */
.too-small-overlay{
  position: fixed; inset: 0;
  background: rgba(255,255,255,.9);
  color: #0f2230;
  display: none;
  z-index: 10;
  align-items: center; justify-content: center; text-align: center;
  padding: 24px;
}
.too-small-overlay .box{
  max-width: 680px;
  background: #ffffff;
  border: 1px solid #e6eef5;
  border-radius: 16px;
  padding: 18px 22px;
  box-shadow: var(--shadow);
}
.too-small-overlay h2{ margin: 0 0 8px 0; font-size: 18px; }
.too-small-overlay p{ margin: 4px 0; color: #3c5667; font-size: 14px; }
.too-small-overlay .tip{ margin-top: 10px; font-size: 12px; color: #6c8898; }

/* ===== MODE MOBILE ===== */
/* En mobile, le conteneur respecte l’espace réservé au bouton Charte */
.mobile main#app{
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.mobile #links{ display: none !important; }
.mobile .layer{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-width), 1fr));
  flex: 1 1 auto; min-height: 0;
  order: 1;
  gap: 14px;
  padding: 16px 16px 24px;
  align-content: start;
  overflow: auto;
  position: static !important; width: 100%;
}
.mobile .card{
  width: 100%;             /* occupe la colonne */
  height: var(--card-size);/* garde la même hauteur */
  position: static;
  margin: 0 auto;
  left:auto !important;
  top:auto !important;
  transform:none !important;
}
.mobile .center{
  position: static; left: auto; top: auto; transform: none; margin: 72px auto 12px;
  padding: 10px 14px; min-width: unset;
  z-index: 5;
  flex: 0 0 auto; order: 0;
}
.mobile .breadcrumb{ z-index: 6; }
@media (prefers-reduced-motion: reduce) { .card{ transition:none; } }

/* Image/logo au centre : taille raisonnable en mobile */
.mobile #center img{ max-width: 120px; height: auto; }


/* ===== Page “dernier niveau” ===== */
body.leaf-open main#app{ display:none; }
body.leaf-open section#leafPage{ display:block; }
section#leafPage{
  display:none;
  max-width:1000px; margin:0 auto;
  padding:clamp(16px,3vw,28px) 16px 48px; text-align:center;
}
.leaf-bc{ display:inline-flex; gap:8px; align-items:center; font-size:.85rem; color:#66778a; margin:12px auto; }
body.leaf-open .leaf-bc{ display:none !important; }
.leaf-bc a{ color:#4c83a6; text-decoration:none; }
.leaf-bc a:hover{ text-decoration:underline; }
.leaf-bc .sep{ opacity:.7; }

.leaf-hero{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.leaf-icon{
  width:56px; height:56px; border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #e6eef5; background:#fff;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",inherit;
}
.leaf-title{
  margin:6px 0 0;
  font-family: Aptos, Arial, "Helvetica Neue", Helvetica, system-ui, sans-serif;
  font-weight:800; font-size:clamp(2rem,3.2vw,2.6rem);
  color:#0f2230; letter-spacing:-.01em;
}
.leaf-desc{ max-width:72ch; margin:10px auto 20px; color:#334155; white-space:pre-line; }
.leaf-subtitle{
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-size:1.05rem; font-weight:700; letter-spacing:.02em; text-transform:uppercase;
  color:#0f2230; margin:18px auto 10px; padding:6px 12px; border-radius:999px; background:#f3f7fb;
}
.leaf-subtitle::before{ content:""; width:8px; height:8px; border-radius:999px; background:#3b82f6; }

.leaf-group{ margin:12px 0 22px; }
.chips{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:12px 16px; border:1px solid #cbd5e1; border-radius:9999px; background:#fff; color:#0f2230; text-decoration:none;
}
.chip:hover{ background:#f1f5f9; }
.chip-img{ width:18px; height:18px; border-radius:4px; object-fit:cover; }
.chip-icon,.chip-ext{ display:inline-flex; width:16px; height:16px; }
.chip-icon svg,.chip-ext svg{ width:16px; height:16px; display:block; }

/* ===== INSPIRE – Acronyme (fixe, visible partout) ===== */
.inspire-acronym{
  position: fixed; right: 12px; bottom: 10px; top: auto;
  display: block; margin: 0; padding: 0;
  border: 0; background: transparent; box-shadow: none; backdrop-filter: none;
  opacity: .65;                /* un peu transparent */
  z-index: 3;                  /* derrière l’UI interactive */
  pointer-events: none;        /* non cliquable */
  user-select: none; -webkit-user-select: none; /* non sélectionnable */
}
.inspire-acronym .acro-list{ 
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.inspire-acronym .acro-list li{
  display: grid; grid-template-columns: 1.2ch auto; column-gap: 8px;
  align-items: baseline; color: #0c2a3a; line-height: 1.1;
}
.inspire-acronym .acro-list li b{
  font-weight: 800; font-size: 1.1rem; line-height: 1; text-align: right;
}
.inspire-acronym .acro-list li span{
  font-size: .85rem; letter-spacing: .1px; opacity: .95;
}

/* ===== Bouton vertical "Charte éthique" (gauche) ===== */
.charte-btn{
  position: fixed; left: 12px; bottom: 54px;
  padding: 8px 10px; font-size: 12px; line-height: 1;
  height: auto;
  width: auto;
  writing-mode: horizontal-tb;
  text-orientation: initial;
  transform: none;
  border-radius: 20px;
  border: 1px solid #e1edf5;
  background: rgba(var(--rgb-mauve), .30);
  color: var(--text);
  box-shadow: var(--shadow);
  font-weight: 600; letter-spacing: .2px;
  cursor: pointer;
  z-index: 6;
}
.charte-btn:hover{ background: rgba(var(--rgb-mauve), .45); }

.signal-btn{
  position: fixed; left: 12px; bottom: 10px;
  padding: 15px 15px; font-size: 14px; line-height: 1;
  border-radius: 12px; border: 1px solid #e1edf5;
  background: rgba(var(--rgb-vert), .28); color: var(--text);
  box-shadow: var(--shadow); font-weight: 600; letter-spacing: .2px;
  cursor: pointer; z-index: 6;
  text-decoration: none;
  display: inline-block;
}
.signal-btn:hover{ background: rgba(var(--rgb-vert), .42); }

/* ===== Overlay / Modale "Charte éthique" ===== */
.charte-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  display: grid; place-items: center;
  z-index: 99;
}
.charte-overlay[hidden] { display: none !important; }
.charte-dialog{
  width: min(1100px, 92vw);
  height: min(96svh, 920px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0,0,0,.25);
  display: grid; grid-template-rows: auto 1fr;
  overflow: hidden;
  overscroll-behavior: contain;
}
.charte-header{
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid #eef3f7;
  background: linear-gradient(180deg, #fff, #fbfdff);
}
.charte-header h2{ margin: 0; font-size: 18px; color: #ffffff; }
.charte-close{
  border: 1px solid #e1edf5; background: #fff; border-radius: 999px;
  width: 34px; height: 34px; cursor: pointer;
}
.charte-body{ height: 100%; overflow:auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; }
.charte-body iframe{
  width: 100%; height: 100%; border: 0; display: block;
  background: #f7fafc;
}
@supports (-webkit-touch-callout: none){
  /* iOS WebKit : aide le scroll interne des PDF dans les iframes */
  .charte-dialog{ height: 96svh; }
}

/* Petits écrans : réduire l’emprise visuelle */
@media (max-width: 900px){
  .inspire-acronym{
  right: 8px; bottom: 10px; top: auto;
  font-size: 11px; gap: 8px;
  opacity:.9; background: transparent;
  z-index:5;
  max-width: 50vw; /* ≈ la moitié de la largeur de l’écran */
}
.inspire-acronym .acro-list li b{ font-size: 1rem; }
.inspire-acronym .acro-list li span{ font-size: .8rem; }
  .charte-btn{ width: auto; }
}
.charte-overlay[hidden]{ display:none !important; }

@media (max-width: 1280px) and (min-width: 901px){ :root{ --card-size: 112px; } }
@media (max-width: 1100px) and (min-width: 901px){ :root{ --card-size: 102px; } }

    /* === Overlay plein écran pour #charteOverlay === */
    .charte-overlay[hidden] { display: none !important; }

    .charte-overlay {
      position: fixed;
      inset: 0;
      z-index: 1000;
      display: flex;                 /* visible par défaut si pas [hidden] */
      align-items: stretch;
      justify-content: stretch;
      /* voile semi-opaque aux couleurs HEP (fallback si var absente) */
      background: rgba(var(--rgb-bleu-sombre, 0,53,76), .65);
      backdrop-filter: blur(2px);
    }

    .charte-modal {
      display: flex;
      flex-direction: column;
      width: 100vw;
      height: 100vh;
      margin: 0;                     /* plein écran */
      background: #fff;
      border-radius: 0;              /* pas d’arrondis en full page */
      box-shadow: none;
      max-width: none;
      max-height: none;
      overflow: hidden;              /* évite les scrollbars internes */
    }

    .charte-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .75rem;
      padding: .75rem 1rem;
      background: var(--hep-bleu-sombre, #00354c);
      color: #fff;
      font: 600 16px/1.2 Inter, system-ui, Arial, sans-serif;
      /* gère les encoches iOS */
      padding-top: calc(.75rem + env(safe-area-inset-top, 0));
      -webkit-user-select: none; user-select: none;
    }

    .charte-close {
      appearance: none;
      border: 0;
      background: rgba(255,255,255,.15);
      color: #fff;
      width: 40px; height: 40px;
      border-radius: 999px;
      font-size: 22px;
      line-height: 1;
      cursor: pointer;
    }
    .charte-close:hover { background: rgba(255,255,255,.25); }

    .charte-frame {
      flex: 1 1 auto;     /* prend tout l’espace restant */
      width: 100%;
      min-height: 0;      /* important pour que flex calcule bien la hauteur */
      border: 0;
      display: block;
      background: #fff;
    }

    /* Petite animation d’apparition */
    @media (prefers-reduced-motion: no-preference) {
      .charte-modal { animation: overlayIn .18s ease-out both; }
      @keyframes overlayIn {
        from { opacity:.75; transform: scale(.995); }
        to   { opacity:1;    transform: scale(1); }
      }
    }

    /* Mobile : déjà plein écran, mais on laisse la marge safe-area */
    @media (max-width: 900px) {
      .charte-modal {
        padding-bottom: env(safe-area-inset-bottom, 0);
      }
    }