/* ╔══════════════════════════════════════════════════════════╗
    MODALE « FONCTIONNEMENT » (js/aide-fonctionnement.js)

    Choix du mode, puis diaporama de vraies captures dans des
    appareils dessinés en CSS : téléphone, portable, PC fixe
    (écran et tour). Aucune image de maquette : rien à créditer,
    net à toutes les tailles.

    Tout est proportionnel à --h (taille de référence de la
    scène) et --k (1 pour l'appareil mis en avant, plus petit
    pour l'autre). --h suit la hauteur de l'écran, pour que la
    modale tienne sans barre de défilement, même sur un écran
    peu haut.
   ╚══════════════════════════════════════════════════════════╝ */

/* Plus large que les autres modales : deux appareils côte à côte */
#usageModal .info-modal-box { width: min(920px, calc(100vw - 40px)); }

/* ─── ÉCRAN 1 : CHOIX DU MODE ───────────────────────────── */
.aide-choix { display: flex; flex-direction: column; gap: 18px; }
.aide-choix[hidden], .aide-diapo[hidden] { display: none !important; }

.aide-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.aide-mode {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 10px 16px;
  background: #f4f9ff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  font-family: var(--sans);
  color: var(--text);
  text-align: center;
  cursor: pointer;
  transition: border-color .18s, transform .15s, box-shadow .18s, background .18s;
}
.aide-mode:hover, .aide-mode:focus-visible {
  border-color: var(--accent);
  background: #fff;
  transform: translateY(-2px);
  box-shadow: var(--shadow-blue-md);
  outline: none;
}
.aide-mode-icones { font-size: 1.7rem; line-height: 1.2; white-space: nowrap; }
.aide-fleche { font-size: 1rem; color: var(--accent); font-weight: 900; vertical-align: middle; }
.aide-mode strong { font-size: .9rem; font-weight: 800; }
.aide-mode-sous { font-family: var(--mono); font-size: .74rem; color: var(--muted); }

/* « En classe » sur toute la largeur, icône à gauche */
.aide-mode--classe {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto auto;
  justify-content: center;
  column-gap: 14px;
  row-gap: 0;
  text-align: left;
  padding: 14px 18px;
}
.aide-mode--classe .aide-mode-icones { grid-row: span 2; align-self: center; }

/* ─── ÉCRAN 2 : DIAPORAMA ───────────────────────────────── */
.aide-diapo { display: flex; flex-direction: column; gap: 14px; }

.aide-diapo-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-right: 44px; /* place du bouton ✕ de la modale */
}
.aide-retour {
  background: #f4f9ff;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .18s, color .18s;
}
.aide-retour:hover { border-color: var(--accent); color: var(--accent); }
.aide-titre-mode { font-weight: 900; font-size: 1rem; color: var(--text); text-align: right; }

/* La scène : la hauteur disponible moins tout le reste de la modale
   (en-tête, légende, navigation, marges), bornée des deux côtés, et
   limitée par la largeur pour que les deux appareils tiennent. */
.aide-scene {
  --h: clamp(150px, calc(100vh - 430px), 320px);
  --k-autre: .62;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(18px, 4vw, 56px);
  padding-top: 6px;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  /* Hauteur fixe pour tout le mode (le plus grand appareil, en avant,
     et sa légende) : sans elle, la modale, centrée, sautait d'une
     étape à l'autre. */
  height: calc(var(--h) + 36px);
}
/* Sans téléphone, les appareils sont moins hauts */
.aide-scene--pc2pc { height: calc(var(--h) * .82 + 36px); }
@supports (height: 100dvh) {
  .aide-scene { --h: clamp(150px, calc(100dvh - 430px), 320px); }
}

/* ─── APPAREILS (style commun) ──────────────────────────── */
.aide-app {
  --k: var(--k-autre);
  --coque: #1f2328;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  opacity: .5;
  filter: saturate(.6);
  transition: opacity .3s, filter .3s;
}
.aide-app.is-actif { --k: 1; opacity: 1; filter: none; }

.aide-app-corps {
  position: relative;
  background: var(--coque);
  transition: width .35s ease, box-shadow .3s;
}
.aide-app.is-actif .aide-app-corps { box-shadow: 0 12px 34px rgba(74,144,217,.35); }

.aide-app-ecran {
  position: relative;
  overflow: hidden;
  background: var(--bg);
}
.aide-app-ecran img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: opacity .16s ease; /* FONDU_MS dans le JS */
  -webkit-user-drag: none;
}
.aide-app-ecran img.is-fondu { opacity: 0; }
/* Écran éteint : l'appareil n'a pas encore servi */
.aide-app-ecran.is-eteint { background: radial-gradient(circle at 30% 20%, #2e3843, #11161c 70%); }
.aide-app-ecran.is-eteint img { visibility: hidden; }

.aide-app figcaption {
  margin-top: 10px;
  font-family: var(--sans);
  font-size: .76rem;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: color .3s;
}
.aide-app.is-actif figcaption { color: var(--accent); }

/* ─── TÉLÉPHONE ─────────────────────────────────────────── */
.aide-app--tel .aide-app-corps {
  width: calc(var(--h) * .47 * var(--k));
  padding: 3.4%;
  border-radius: 16% / 7.4%;
}
.aide-app--tel .aide-app-ecran {
  aspect-ratio: 375 / 812;
  border-radius: 12.5% / 5.8%;
}
/* Encoche (pastille), posée sur le haut de l'écran */
.aide-app--tel .aide-app-corps::after {
  content: '';
  position: absolute;
  top: 2.6%;
  left: 50%;
  width: 26%;
  height: 2.4%;
  transform: translateX(-50%);
  border-radius: 99px;
  background: var(--coque);
}

/* ─── PORTABLE ──────────────────────────────────────────── */
.aide-app--portable .aide-app-corps {
  width: calc(var(--h) * 1.25 * var(--k));
  padding: 2.4% 2.4% 3%;
  border-radius: 3.2% 3.2% 0 0 / 5.4% 5.4% 0 0;
}
.aide-app--portable .aide-app-ecran { aspect-ratio: 1366 / 768; border-radius: 1px; }
.aide-app-socle {
  position: relative;
  width: calc(var(--h) * 1.42 * var(--k));
  height: calc(var(--h) * .045 * var(--k));
  background: linear-gradient(#d4d8dd, #9ba1a8);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transition: width .35s ease, height .35s ease;
}
/* Encoche pour ouvrir le capot */
.aide-app-socle::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 14%;
  height: 34%;
  transform: translateX(-50%);
  border-radius: 0 0 6px 6px;
  background: #8b9198;
}

/* ─── PC FIXE : écran sur pied et tour à droite ─────────── */
.aide-app--fixe {
  display: grid;
  grid-template-columns: auto auto;
  align-items: end;
  justify-items: center;
}
.aide-app--fixe .aide-app-corps {
  grid-column: 1;
  width: calc(var(--h) * 1.08 * var(--k));
  padding: 2.2%;
  border-radius: 2.4% / 4.2%;
}
.aide-app--fixe .aide-app-ecran { aspect-ratio: 1366 / 768; border-radius: 1px; }
.aide-app-pied {
  grid-column: 1;
  width: calc(var(--h) * .34 * var(--k));
  height: calc(var(--h) * .15 * var(--k));
  background: linear-gradient(#bfc4ca, #8f959c);
  clip-path: polygon(42% 0, 58% 0, 60% 78%, 100% 84%, 100% 100%, 0 100%, 0 84%, 40% 78%);
  transition: width .35s ease, height .35s ease;
}
.aide-app-tour {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  width: calc(var(--h) * .22 * var(--k));
  height: calc(var(--h) * .58 * var(--k));
  margin-left: calc(var(--h) * .06 * var(--k));
  border-radius: 7% / 3%;
  /* Voyant vert, deux fentes et une grille d'aération */
  background:
    radial-gradient(circle, #5dcaa5 0 40%, transparent 46%) 50% 8% / 14% 6% no-repeat,
    linear-gradient(#3b424b, #3b424b) 50% 18% / 64% 2.4% no-repeat,
    linear-gradient(#3b424b, #3b424b) 50% 24% / 64% 2.4% no-repeat,
    repeating-linear-gradient(#2b3038 0 3px, transparent 3px 7px) 50% 82% / 64% 30% no-repeat,
    var(--coque);
  transition: width .35s ease, height .35s ease;
}
.aide-app--fixe figcaption { grid-column: 1 / -1; }

/* ─── LÉGENDE ET NAVIGATION ─────────────────────────────── */
.aide-legende {
  text-align: center;
  min-height: 5.6em; /* pas de saut quand le texte passe d'une à deux lignes */
}
.aide-etape-num {
  display: block;
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 4px;
}
.aide-legende strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text);
}
.aide-legende p {
  max-width: 560px;
  margin: 4px auto 0;
  font-family: var(--mono);
  font-size: .86rem;
  line-height: 1.45;
  color: var(--muted);
}

.aide-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.aide-nav-btn {
  min-width: 44px;
  height: 44px;
  border-radius: 22px;
  border: none;
  background: var(--accent);
  color: #fff;
  font-family: var(--sans);
  font-size: 1.1rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: var(--shadow-blue);
  transition: transform .15s, opacity .2s, background .18s;
}
.aide-nav-btn:hover:not(:disabled) { transform: scale(1.06); }
.aide-nav-btn:focus { outline: none; }
.aide-nav-btn:focus-visible, .aide-point:focus-visible, .aide-retour:focus-visible {
  outline: 3px solid var(--accent3);
  outline-offset: 2px;
}
.aide-nav-btn:disabled { opacity: .3; cursor: default; box-shadow: none; }
.aide-nav-btn.is-fin { padding: 0 20px; font-size: .9rem; background: var(--success); }

.aide-points { display: flex; gap: 8px; }
.aide-point {
  width: 9px;
  height: 9px;
  padding: 0;
  border: none;
  border-radius: 5px;
  background: var(--border);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.aide-point.is-actif { width: 26px; background: var(--accent); }

/* ─── ÉCRAN PEU HAUT (portable 1366×657…) ───────────────── */
@media (max-height: 720px) {
  #usageModal .info-modal-box { padding: 24px 36px 22px; gap: 14px; }
  #usageModal .info-modal-header img { width: 46px; height: 46px; }
  .aide-scene { --h: clamp(150px, calc(100vh - 405px), 320px); }
  @supports (height: 100dvh) {
    .aide-scene { --h: clamp(150px, calc(100dvh - 405px), 320px); }
  }
}

/* ─── MOBILE ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .aide-modes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .aide-mode { padding: 14px 8px 12px; }
  .aide-mode-icones { font-size: 1.45rem; }
  .aide-mode strong { font-size: .82rem; }
  .aide-mode-sous { font-size: .68rem; }
  .aide-mode--classe { padding: 12px 14px; }

  /* Deux appareils côte à côte rendaient les captures illisibles sur
     ~300 px : on ne montre que celui sur lequel on agit, en grand (sa
     légende dit lequel c'est). Le téléphone a sa propre taille (--ht),
     limitée par la hauteur ; les PC, plus larges, par la largeur. */
  .aide-app:not(.is-actif) { display: none; }
  .aide-scene {
    --h: min(clamp(150px, calc(100vh - 400px), 300px), calc((100vw - 76px) / 1.5));
    --ht: clamp(150px, calc(100vh - 400px), 300px);
    height: calc(var(--ht) + 36px);
  }
  @supports (height: 100dvh) {
    .aide-scene {
      --h: min(clamp(150px, calc(100dvh - 400px), 300px), calc((100vw - 76px) / 1.5));
      --ht: clamp(150px, calc(100dvh - 400px), 300px);
    }
  }
  .aide-scene--pc2pc { height: calc(var(--h) * .82 + 36px); }
  .aide-app--tel .aide-app-corps { width: calc(var(--ht) * .47); }
  .aide-titre-mode { display: none; }
  .aide-diapo-haut { justify-content: flex-start; }
  .aide-legende { min-height: 8.2em; }
  .aide-legende p { font-size: .8rem; }
}