/* =========================================================================
   SOMMAIRE DE PAGE — bouton spherique, ouverture en camembert
   Pose le 16/08/2026, sur demande d'Akim.

   Present sur telephone, tablette et ordinateur.
   Le bouton se tient sur le bord DROIT, a mi-hauteur.
   A l'ouverture, un panneau se deploie depuis le bouton et porte le titre de
   la page et ses sections : H1 et H2 seulement (Akim, 16/08).

   COUT : ce fichier et son script sont les deux seuls ajouts. Aucun octet
   n'entre dans le HTML des pages : le bouton est cree par le script, la liste
   est construite au premier appui, depuis les titres deja presents.

   RETOUR ARRIERE, EN UNE COMMANDE
       mv .../vhu-v2/vhu-sommaire.css .../vhu-v2/vhu-sommaire.js \
          ~/archives-claude/2026-08-16-sommaire/
   Le chargement teste l'existence des deux fichiers.
   ========================================================================= */

.vhu-som{
  --vhu-som-jaune:#ffce11;
  --vhu-som-nuit:#123a5a;
  --vhu-som-encre:#1a202c;
  --vhu-som-blanc:#fff;
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:8000;                       /* sous la barre d'appel, qui est a 9000 */
  font-family:Verdana,Geneva,Helvetica,Arial,sans-serif;
}

/* ---------- le bouton spherique ---------- */
.vhu-som__bouton{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  width:52px; height:52px; margin-right:10px;
  border:0; border-radius:50%; padding:0; cursor:pointer;
  background:radial-gradient(circle at 34% 30%, #ffe27a 0%, var(--vhu-som-jaune) 46%, #e0a800 100%);
  box-shadow:0 6px 18px -6px rgba(18,58,90,.65), inset 0 -2px 6px rgba(0,0,0,.18);
  color:var(--vhu-som-encre);
  transition:transform .18s ease, box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.vhu-som__bouton:hover{transform:scale(1.06)}
.vhu-som__bouton:active{transform:scale(.96)}
.vhu-som__bouton:focus-visible{outline:3px solid var(--vhu-som-nuit); outline-offset:3px}

/* les trois traits qui convergent : la meme idee que les parts du camembert */
.vhu-som__traits{display:block; width:22px; height:16px}
.vhu-som__traits span{
  display:block; height:2.5px; border-radius:2px;
  background:var(--vhu-som-encre); margin:0 0 4px auto;
  transition:width .18s ease;
}
.vhu-som__traits span:nth-child(1){width:22px}
.vhu-som__traits span:nth-child(2){width:15px}
.vhu-som__traits span:nth-child(3){width:9px; margin-bottom:0}
.vhu-som[data-ouvert="1"] .vhu-som__traits span:nth-child(1){width:9px}
.vhu-som[data-ouvert="1"] .vhu-som__traits span:nth-child(3){width:22px}

/* ---------- la part de camembert ---------- */
.vhu-som__part{
  position:absolute; right:0; top:50%;
  width:min(78vw, 340px); max-height:min(74vh, 560px);
  transform:translateY(-50%) scale(.2); transform-origin:100% 50%;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.2), opacity .18s ease, visibility 0s .2s;
  background:var(--vhu-som-blanc);
  border-radius:14px 0 0 14px;        /* panneau droit, juste adouci aux angles */
  box-shadow:0 10px 34px -10px rgba(18,58,90,.55);
  padding:20px 66px 20px 24px;
  overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.vhu-som[data-ouvert="1"] .vhu-som__part{
  transform:translateY(-50%) scale(1); opacity:1; visibility:visible;
  pointer-events:auto; transition-delay:0s;
}

.vhu-som__titre{
  margin:0 0 10px; padding:0 0 8px;
  font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--vhu-som-nuit); border-bottom:2px solid var(--vhu-som-jaune);
}

.vhu-som__liste{margin:0; padding:0; list-style:none}
.vhu-som__liste li{margin:0}

.vhu-som__lien{
  display:block; padding:7px 0; text-decoration:none; line-height:1.35;
  color:var(--vhu-som-encre); font-size:14px;
  border-bottom:1px solid rgba(18,58,90,.10);   /* le trait qui separe deux parts */
}
.vhu-som__lien:hover,
.vhu-som__lien:focus{color:var(--vhu-som-nuit); text-decoration:underline}
.vhu-som__liste li:last-child .vhu-som__lien{border-bottom:0}

/* deux niveaux seulement : le titre de la page, puis ses sections */
.vhu-som__lien[data-n="1"]{font-weight:700; font-size:15px; color:var(--vhu-som-nuit)}
.vhu-som__lien[data-n="2"]{font-weight:500}
/* la section en cours de lecture */
.vhu-som__lien[aria-current="true"]{
  color:var(--vhu-som-nuit); font-weight:700;
  box-shadow:inset 3px 0 0 var(--vhu-som-jaune); padding-left:calc(var(--vhu-som-pad,0px) + 9px);
}

/* ---------- sur telephone, la barre d'appel occupe le bas ---------- */
@media (max-width:980px){
  .vhu-som{top:auto; bottom:190px; transform:none}
  .vhu-som__part{top:auto; bottom:0; transform:translateY(0) scale(.2); transform-origin:100% 100%;
    max-height:min(62vh, 460px); border-radius:14px 0 0 14px}
  .vhu-som[data-ouvert="1"] .vhu-som__part{transform:translateY(0) scale(1)}
}

/* ---------- l'ecran large a de la place : la part s'ouvre plus grand ---------- */
@media (min-width:1200px){
  .vhu-som__bouton{width:58px; height:58px; margin-right:14px}
  .vhu-som__part{width:min(32vw, 400px); padding:24px 80px 24px 28px}
  .vhu-som__lien{font-size:14.5px}
}

/* ---------- on respecte le reglage du systeme ---------- */
@media (prefers-reduced-motion:reduce){
  .vhu-som__part{transition:opacity .12s ease, visibility 0s}
  .vhu-som__bouton{transition:none}
  .vhu-som__bouton:hover{transform:none}
}

/* ---------- impression : le sommaire n'a rien a y faire ---------- */
@media print{.vhu-som{display:none}}

/* =========================================================================
   BOUTON D'APPEL BLOQUE — ORDINATEUR UNIQUEMENT
   Garde tel quel sur decision d'Akim (16/08). Le bouton d'appel de la banniere
   est fixe a l'ecran sur ordinateur, en haut a droite : le numero reste sous
   les yeux du lecteur quand il descend.
   Sous 981 px, rien n'est touche : le numero est deja joignable dans le pied
   de page et dans la barre d'appel.
   ========================================================================= */
@media (min-width:981px){
  .et-l--header .btn_header.et_pb_button,
  .et-l--header a.et_pb_button_0_tb_header,
  #main-header .btn_header.et_pb_button{
    position:fixed !important;
    top:18px; right:26px;
    z-index:9500;
    margin:0 !important;
    box-shadow:0 8px 22px -8px rgba(18,58,90,.6);
  }
}

/* Retour en haut de page — Akim, 17/08/2026.
   En tete de pile et repris en pied, dans le sommaire lui-meme : aucun objet
   flottant supplementaire ne vient disputer le coin de l'ecran. */
.vhu-som__haut{
  display:flex; align-items:center; gap:7px;
  margin:0 0 10px; padding:0 0 9px;
  font-size:13px; font-weight:700; line-height:1.2;
  color:var(--vhu-som-nuit); text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.08);
}
.vhu-som__haut--bas{
  margin:10px 0 0; padding:9px 0 0;
  border-bottom:0; border-top:1px solid rgba(0,0,0,.08);
}
.vhu-som__haut:hover{text-decoration:underline}
.vhu-som__haut:focus-visible{outline:2px solid var(--vhu-som-nuit); outline-offset:3px}