/* ==========================================================================
   10-Lexique — les petites vidéos « Mettre l'application sur l'écran
   d'accueil » (assets/demo-installer.js)

   Tout est dessiné en HTML : un appareil, son navigateur, et un doigt (ou
   une souris) qui touche les bons boutons, dans l'ordre. Les tailles sont
   exprimées en « cqw » (pour cent de la largeur de l'écran dessiné) : la
   scène garde ses proportions, quelle que soit la place disponible.
   ========================================================================== */

.di-lecteur { display: grid; gap: 0.75rem; justify-items: center; margin: 0 auto 1.25rem; max-width: 100%; }
.di-scene { position: relative; width: 100%; display: grid; justify-items: center; }

/* ── L'appareil ──────────────────────────────────────────────────────── */
.di-telephone { width: min(17.5rem, 78vw); aspect-ratio: 9 / 18.5; background: #111; border-radius: 2.4rem; padding: 0.55rem; box-shadow: 0 14px 34px rgb(0 0 0 / .22); }
.di-ordinateur { width: min(34rem, 92vw); aspect-ratio: 16 / 10.4; background: #2b2b2e; border-radius: 0.9rem; padding: 0.55rem 0.55rem 1.1rem; box-shadow: 0 14px 34px rgb(0 0 0 / .22); }
.di-ecran { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 1.9rem; background: #fff; container-type: inline-size; color: #111; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; line-height: 1.25; }
.di-ordinateur .di-ecran { border-radius: 0.35rem; }

.di-vue { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transition: opacity .35s ease; }
.di-vue.di-visible { opacity: 1; }

/* Barre d'état du téléphone */
.di-statut { display: flex; justify-content: space-between; align-items: center; padding: 3.2cqw 7cqw 1.5cqw; font-size: 4.2cqw; font-weight: 600; flex: 0 0 auto; }
.di-statut .di-encoche { width: 26cqw; height: 6cqw; border-radius: 4cqw; background: #111; }

/* Le site, en miniature */
.di-site { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: #fff; overflow: hidden; }
.di-site-tete { display: flex; align-items: center; gap: 2cqw; padding: 2.5cqw 4cqw; border-bottom: 0.4cqw solid #e2ece5; font-weight: 800; color: #247b3e; font-size: 4.6cqw; }
.di-site-tete img { width: 7cqw; height: 7cqw; border-radius: 1.6cqw; }
.di-site-heros { background: #247b3e; color: #fff; padding: 7cqw 6cqw; text-align: center; display: grid; gap: 3cqw; }
.di-site-heros b { font-size: 6.6cqw; line-height: 1.15; }
.di-site-heros span { font-size: 3.6cqw; opacity: .92; }
.di-site-heros i { justify-self: center; font-style: normal; background: #fff; color: #247b3e; font-weight: 700; padding: 2.4cqw 5cqw; border-radius: 3cqw; font-size: 3.6cqw; }
.di-site-lignes { padding: 5cqw 6cqw; display: grid; gap: 2.6cqw; }
.di-site-lignes s { display: block; height: 2.6cqw; border-radius: 2cqw; background: #e6efe9; text-decoration: none; }
.di-site-lignes s:nth-child(2) { width: 80%; }
.di-site-lignes s:nth-child(3) { width: 60%; }
.di-site-cartes { padding: 0 6cqw 5cqw; display: grid; gap: 3cqw; }
.di-site-cartes div { display: flex; align-items: center; gap: 3cqw; padding: 3.4cqw; border: 0.4cqw solid #e2ece5; border-radius: 3cqw; font-size: 3.6cqw; font-weight: 600; }
.di-site-cartes span { font-size: 6cqw; }
.di-fenetre .di-site-cartes { display: none; }

/* Barres de navigateur */
.di-barre { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-around; gap: 2cqw; padding: 2.4cqw 4cqw 4.5cqw; background: #f7f7f8; border-top: 0.3cqw solid #ddd; color: #0a66d8; }
.di-barre svg, .di-adresse svg, .di-onglet svg { width: 6.4cqw; height: 6.4cqw; flex: 0 0 auto; }
.di-adresse { flex: 0 0 auto; display: flex; align-items: center; gap: 2cqw; margin: 1.5cqw 3cqw 2cqw; padding: 2.4cqw 3.4cqw; border-radius: 3.5cqw; background: #eef0f2; font-size: 3.8cqw; color: #222; }
.di-adresse span { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.di-adresse.di-bas { margin: 1.5cqw 3cqw 4.5cqw; }
.di-gris { color: #555; }

/* Feuilles et menus qui s'ouvrent */
.di-voile { position: absolute; inset: 0; background: rgb(0 0 0 / .28); }
.di-feuille { position: absolute; left: 0; right: 0; bottom: 0; background: #f2f2f7; border-radius: 5cqw 5cqw 0 0; padding: 3cqw 4cqw 5cqw; display: grid; gap: 2.4cqw; animation: di-monte .35s ease both; }
@keyframes di-monte { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.di-feuille-tete { display: flex; align-items: center; gap: 3cqw; padding-bottom: 2cqw; border-bottom: 0.3cqw solid #dcdce0; font-size: 3.7cqw; }
.di-feuille-tete img, .di-icone-app { width: 10cqw; height: 10cqw; border-radius: 2.4cqw; }
.di-feuille-tete b { display: block; font-size: 4cqw; }
.di-liste { background: #fff; border-radius: 3cqw; overflow: hidden; }
.di-liste div { display: flex; justify-content: space-between; align-items: center; padding: 3cqw 4cqw; font-size: 4cqw; border-bottom: 0.3cqw solid #ececf0; }
.di-liste div:last-child { border-bottom: 0; }
.di-liste div span:last-child { color: #555; font-size: 4.6cqw; }
.di-cible { background: #e9f1ff; }
.di-menu { position: absolute; top: 15cqw; right: 3cqw; width: 66cqw; background: #fff; border-radius: 3cqw; box-shadow: 0 2cqw 8cqw rgb(0 0 0 / .25); padding: 1.5cqw 0; animation: di-ouvre .25s ease both; }
.di-menu.di-menu-bas { top: auto; bottom: 17cqw; }
@keyframes di-ouvre { from { transform: scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
.di-menu div { padding: 2.8cqw 4.5cqw; font-size: 3.9cqw; display: flex; gap: 3cqw; align-items: center; }
.di-menu svg, .di-liste svg { width: 5.4cqw; height: 5.4cqw; flex: 0 0 auto; }
.di-ordinateur .di-menu svg { width: 2.4cqw; height: 2.4cqw; }
.di-dialogue { position: absolute; left: 7cqw; right: 7cqw; top: 50%; transform: translateY(-50%); background: #fff; border-radius: 5cqw; padding: 5cqw; display: grid; gap: 3cqw; box-shadow: 0 3cqw 10cqw rgb(0 0 0 / .3); animation: di-ouvre .3s ease both; font-size: 3.9cqw; }
.di-dialogue b { font-size: 4.6cqw; }
.di-dialogue .di-appli { display: flex; gap: 3cqw; align-items: center; }
.di-boutons { display: flex; justify-content: flex-end; gap: 5cqw; font-weight: 700; color: #1a66d2; }
.di-boutons span { padding: 1.5cqw 2cqw; border-radius: 2cqw; }
.di-entete-ajout { display: flex; justify-content: space-between; align-items: center; gap: 2.5cqw; padding: 3cqw 4cqw; font-size: 3.8cqw; background: #f7f7f8; border-bottom: 0.3cqw solid #ddd; }
.di-entete-ajout > b { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 3.6cqw; }
.di-bleu { color: #0a66d8; }
.di-champ { margin: 5cqw 4cqw 0; background: #fff; border-radius: 3cqw; padding: 4cqw; display: flex; gap: 4cqw; align-items: center; font-size: 4cqw; }
.di-champ small { display: block; color: #777; font-size: 3.3cqw; margin-top: 1cqw; }
.di-interrupteur { margin: 4cqw 4cqw 0; background: #fff; border-radius: 3cqw; padding: 3.4cqw 4cqw; display: flex; justify-content: space-between; align-items: center; font-size: 3.9cqw; }
.di-interrupteur i { width: 11cqw; height: 6.6cqw; border-radius: 4cqw; background: #34c759; position: relative; }
.di-interrupteur i::after { content: ''; position: absolute; right: 0.6cqw; top: 0.6cqw; width: 5.4cqw; height: 5.4cqw; border-radius: 50%; background: #fff; }
.di-gris-fond { background: #f2f2f7; }

/* L'écran d'accueil du téléphone */
.di-accueil { flex: 1 1 auto; background: linear-gradient(160deg, #6a8fd8, #9b7fd1 55%, #e59bb4); padding: 6cqw 6cqw; display: grid; grid-template-columns: repeat(4, 1fr); align-content: start; gap: 5cqw 4cqw; }
.di-accueil.di-android { background: linear-gradient(160deg, #1f4e5f, #2d7a6b 60%, #8bc6a3); }
.di-app { display: grid; justify-items: center; gap: 1.2cqw; font-size: 2.9cqw; color: #fff; text-shadow: 0 0.3cqw 1cqw rgb(0 0 0 / .4); }
.di-app i { width: 13.5cqw; height: 13.5cqw; border-radius: 3.4cqw; display: grid; place-items: center; font-style: normal; font-size: 7cqw; background: rgb(255 255 255 / .85); }
.di-android .di-app i { border-radius: 50%; }
.di-app img { width: 13.5cqw; height: 13.5cqw; border-radius: 3.4cqw; }
.di-android .di-app img { border-radius: 50%; }
.di-nouvelle { animation: di-apparait .7s cubic-bezier(.3, 1.5, .5, 1) both .2s; }
@keyframes di-apparait { from { transform: scale(0); } to { transform: none; } }

/* L'ordinateur */
.di-fenetre { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; background: #fff; }
.di-onglets { display: flex; align-items: flex-end; gap: 1cqw; padding: 1.2cqw 2cqw 0; background: #dfe3e8; font-size: 1.7cqw; }
.di-onglet { display: flex; align-items: center; gap: 1cqw; background: #fff; padding: 1cqw 2cqw; border-radius: 1cqw 1cqw 0 0; }
.di-onglet img { width: 2.2cqw; height: 2.2cqw; border-radius: 0.5cqw; }
.di-points-fenetre { display: flex; gap: 0.8cqw; margin-right: 2cqw; align-self: center; }
.di-points-fenetre i { width: 1.3cqw; height: 1.3cqw; border-radius: 50%; background: #ff5f57; }
.di-points-fenetre i:nth-child(2) { background: #febc2e; }
.di-points-fenetre i:nth-child(3) { background: #28c840; }
.di-barre-pc { display: flex; align-items: center; gap: 1.5cqw; padding: 1cqw 2cqw; border-bottom: 0.2cqw solid #ddd; font-size: 1.8cqw; color: #555; }
.di-barre-pc .di-omni { flex: 1 1 auto; display: flex; align-items: center; justify-content: space-between; background: #eef0f2; border-radius: 3cqw; padding: 0.9cqw 2cqw; color: #222; }
.di-barre-pc svg { width: 2.6cqw; height: 2.6cqw; }
.di-fenetre .di-site { font-size: 1cqw; }
.di-fenetre .di-site-tete { font-size: 2cqw; padding: 1.2cqw 2.5cqw; gap: 1cqw; }
.di-fenetre .di-site-tete img { width: 2.8cqw; height: 2.8cqw; border-radius: 0.6cqw; }
.di-fenetre .di-site-heros { padding: 4cqw; gap: 1.5cqw; }
.di-fenetre .di-site-heros b { font-size: 3.4cqw; }
.di-fenetre .di-site-heros span { font-size: 1.7cqw; }
.di-fenetre .di-site-heros i { font-size: 1.7cqw; padding: 1.1cqw 2.4cqw; border-radius: 1.2cqw; }
.di-fenetre .di-site-lignes { padding: 2.5cqw 4cqw; gap: 1.2cqw; }
.di-fenetre .di-site-lignes s { height: 1.2cqw; }
.di-bulle { position: absolute; top: 9.5cqw; right: 3cqw; width: 34cqw; background: #fff; border-radius: 1.4cqw; box-shadow: 0 1cqw 4cqw rgb(0 0 0 / .25); padding: 2.2cqw; display: grid; gap: 1.6cqw; font-size: 1.8cqw; animation: di-ouvre .25s ease both; }
.di-bulle b { font-size: 2.1cqw; }
.di-bulle .di-appli { display: flex; gap: 1.4cqw; align-items: center; }
.di-bulle img { width: 4.4cqw; height: 4.4cqw; border-radius: 1cqw; }
.di-bulle .di-boutons { gap: 1.2cqw; font-size: 1.8cqw; }
.di-bulle .di-boutons span { padding: 0.8cqw 1.8cqw; border-radius: 2cqw; border: 0.2cqw solid #c9d4e3; }
.di-bulle .di-boutons span:last-child { background: #1a66d2; color: #fff; border-color: #1a66d2; }
.di-titre-appli { display: flex; align-items: center; gap: 1.2cqw; padding: 1cqw 2cqw; background: #247b3e; color: #fff; font-size: 1.8cqw; font-weight: 700; }
.di-titre-appli img { width: 2.4cqw; height: 2.4cqw; border-radius: 0.5cqw; }
.di-mac-menus { display: flex; gap: 2.4cqw; padding: 0.7cqw 2cqw; background: rgb(240 240 244 / .95); font-size: 1.8cqw; border-bottom: 0.2cqw solid #ccc; }
.di-mac-menus b { font-weight: 700; }
.di-mac-menus span.di-ouvert { background: #1a66d2; color: #fff; border-radius: 0.5cqw; padding: 0 0.8cqw; margin: 0 -0.8cqw; }
.di-mac-bureau { position: relative; flex: 1 1 auto; background: linear-gradient(160deg, #4a6fa5, #7b6aa8 60%, #c98aa0); padding: 2.2cqw 4cqw 9cqw; display: flex; min-height: 0; }
.di-mac-bureau .di-fenetre { border-radius: 1cqw; overflow: hidden; box-shadow: 0 1cqw 4cqw rgb(0 0 0 / .35); }
.di-mac-deroulant { position: absolute; top: 3.6cqw; left: 13.5cqw; width: 30cqw; background: rgb(246 246 248 / .98); border-radius: 1cqw; box-shadow: 0 1cqw 4cqw rgb(0 0 0 / .3); padding: 0.8cqw 0; font-size: 1.8cqw; animation: di-ouvre .2s ease both; z-index: 2; }
.di-mac-deroulant div { padding: 0.65cqw 2cqw; }
.di-mac-deroulant hr { border: 0; border-top: 0.2cqw solid #d8d8dc; margin: 0.6cqw 0; }
.di-dock { position: absolute; left: 50%; bottom: 1.4cqw; transform: translateX(-50%); display: flex; gap: 1.4cqw; padding: 1cqw 1.6cqw; border-radius: 2cqw; background: rgb(255 255 255 / .35); backdrop-filter: blur(1cqw); }
.di-dock i { width: 5.4cqw; height: 5.4cqw; border-radius: 1.3cqw; display: grid; place-items: center; font-style: normal; font-size: 3cqw; background: rgb(255 255 255 / .9); }
.di-dock img { width: 5.4cqw; height: 5.4cqw; border-radius: 1.3cqw; }
.di-mac-dialogue { position: absolute; top: 3.6cqw; left: 50%; transform: translateX(-50%); width: 46cqw; background: #f4f4f6; border-radius: 0 0 1.4cqw 1.4cqw; box-shadow: 0 1cqw 4cqw rgb(0 0 0 / .35); padding: 2.4cqw; display: grid; gap: 1.6cqw; font-size: 1.8cqw; animation: di-monte .3s ease both; z-index: 2; }
.di-mac-dialogue .di-appli { display: flex; gap: 1.6cqw; align-items: center; }
.di-mac-dialogue img { width: 5cqw; height: 5cqw; border-radius: 1.2cqw; }
.di-mac-dialogue .di-boutons { gap: 1.2cqw; font-size: 1.8cqw; }
.di-mac-dialogue .di-boutons span { background: #fff; color: #111; border: 0.2cqw solid #ccc; padding: 0.6cqw 2cqw; border-radius: 0.8cqw; }
.di-mac-dialogue .di-boutons span:last-child { background: #1a66d2; color: #fff; border-color: #1a66d2; }

/* ── Le doigt, ou la souris ──────────────────────────────────────────── */
.di-doigt { position: absolute; left: 50%; top: 110%; width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; border-radius: 50%; background: rgb(124 58 237 / .28); border: 0.9cqw solid rgb(124 58 237 / .85); pointer-events: none; z-index: 5; transition: left .7s cubic-bezier(.4, 0, .2, 1), top .7s cubic-bezier(.4, 0, .2, 1), transform .15s; }
.di-ordinateur .di-doigt { width: 3.4cqw; height: 3.4cqw; margin: -0.6cqw 0 0 -0.6cqw; border-radius: 0; border: 0; background: none; }
.di-ordinateur .di-doigt::before { content: ''; position: absolute; inset: 0; background: #111; clip-path: polygon(0 0, 0 78%, 22% 60%, 38% 95%, 52% 89%, 37% 55%, 66% 55%); filter: drop-shadow(0 0 0.15cqw #fff); }
.di-doigt.di-appui { transform: scale(.78); }
.di-onde { position: absolute; width: 11cqw; height: 11cqw; margin: -5.5cqw 0 0 -5.5cqw; border-radius: 50%; border: 0.8cqw solid rgb(124 58 237 / .7); pointer-events: none; z-index: 4; animation: di-onde .55s ease-out forwards; }
.di-ordinateur .di-onde { width: 4cqw; height: 4cqw; margin: -2cqw 0 0 -2cqw; border-width: 0.4cqw; }
@keyframes di-onde { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

/* ── Sous la vidéo : la légende et les commandes ─────────────────────── */
.di-legende { margin: 0; min-height: 3.2em; max-width: 30rem; text-align: center; font-weight: 600; color: hsl(var(--foreground, 140 40% 12%)); }
.di-commandes { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; }
.di-commandes button { min-height: 2.75rem; min-width: 2.75rem; padding: 0.45rem 0.9rem; border-radius: 0.75rem; border: 2px solid hsl(var(--primary, 138 55% 31%)); background: transparent; color: hsl(var(--primary, 138 55% 31%)); font: inherit; font-weight: 700; cursor: pointer; }
.di-commandes button.di-principal { background: hsl(var(--primary, 138 55% 31%)); color: #fff; }
.di-commandes button:focus-visible { outline: 3px solid hsl(var(--primary, 138 55% 31%)); outline-offset: 2px; }
.di-points { display: flex; gap: 0.35rem; }
.di-points i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: hsl(var(--border, 138 20% 88%)); }
.di-points i.di-fait { background: hsl(var(--primary, 138 55% 31%)); }

@media (prefers-reduced-motion: reduce) {
  .di-vue, .di-doigt { transition: none; }
  .di-feuille, .di-menu, .di-dialogue, .di-bulle, .di-mac-deroulant, .di-mac-dialogue, .di-nouvelle, .di-onde { animation: none; }
}