/* YO — l'identité graphique : le mode clair de QG+, extrait au propre (spec § 6.2).
   Verre dépoli sur un fond multicolore, une couleur par appli, police Hellix. Il n'y a pas de mode sombre.
   Ce qu'un client personnalise passe par --yo-accent (posé par yo.js d'après l'identité de l'office). */

@font-face { font-family: "Hellix"; src: url(fonts/Hellix-500.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Hellix"; src: url(fonts/Hellix-600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  color-scheme: only light;
  --yo-fond:
    radial-gradient(70% 48% at 0% 0%, rgba(255, 159, 10, .55) 0%, rgba(255, 159, 10, 0) 62%),
    radial-gradient(62% 44% at 100% 4%, rgba(255, 55, 95, .40) 0%, rgba(255, 55, 95, 0) 62%),
    radial-gradient(66% 50% at 100% 60%, rgba(94, 92, 230, .34) 0%, rgba(94, 92, 230, 0) 64%),
    radial-gradient(62% 50% at 0% 70%, rgba(48, 209, 88, .32) 0%, rgba(48, 209, 88, 0) 62%),
    radial-gradient(72% 46% at 55% 100%, rgba(100, 210, 255, .45) 0%, rgba(100, 210, 255, 0) 64%),
    radial-gradient(46% 34% at 46% 36%, rgba(255, 214, 10, .20) 0%, rgba(255, 214, 10, 0) 70%),
    linear-gradient(165deg, #fff3e6 0%, #fff0f5 38%, #f2eeff 66%, #e9f6ff 100%);
  --yo-encre: #1c1c1e;
  --yo-encre-2: #4a4a52;
  --yo-encre-3: #5c5c66;
  --yo-trait: rgba(60, 60, 67, .14);
  --yo-trait-2: rgba(60, 60, 67, .24);
  --yo-verre: rgba(255, 255, 255, .58);
  --yo-verre-reflet: rgba(255, 255, 255, .8);
  --yo-verre-lisere: rgba(255, 255, 255, .78);
  --yo-flou: blur(22px) saturate(185%);
  --yo-ombre: 0 8px 26px rgba(96, 52, 10, .10), 0 1px 2px rgba(96, 52, 10, .06);
  --yo-accent: #0a84ff;
  --yo-accent-2: #5e5ce6;
  --yo-police: "Hellix", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --yo-chasse-fixe: ui-monospace, "SF Mono", Menlo, monospace;
  --yo-rayon: 22px;
  --yo-ressort: cubic-bezier(.2, .9, .25, 1.12);        /* arrive un peu trop loin, puis se pose */
  --yo-doux: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--yo-police); font-weight: 500; font-size: 16px; line-height: 1.4;
  color: var(--yo-encre); background: #fff3e6; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
body::before { content: ""; position: fixed; inset: -9%; z-index: -1; background: var(--yo-fond); animation: yo-derive 38s ease-in-out infinite alternate; }
::selection { background: rgba(10, 132, 255, .22); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
h1, h2, p { margin: 0; }
[hidden] { display: none !important; }

/* ---------- Le verre ---------- */
.verre {
  background: var(--yo-verre);
  -webkit-backdrop-filter: var(--yo-flou); backdrop-filter: var(--yo-flou);
  box-shadow: inset 0 0 0 1px var(--yo-verre-lisere), inset 0 1px 0 var(--yo-verre-reflet), var(--yo-ombre);
  border: 0; border-radius: var(--yo-rayon);
}

/* ---------- Mise en page ---------- */
.page { max-width: 980px; margin: 0 auto; min-height: 100dvh;
  padding: calc(18px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(120px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left)); }
.centre { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }

/* Haut de l'écran : pas de bandeau, le fond coloré monte jusqu'en haut ; pastilles en verre. */
/* Au-dessus du reste de la page : le menu du compte, qui en sort, ne doit pas passer sous le contenu. */
.haut { position: relative; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 34px; }
.pastille { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 12px; border-radius: 999px;
  font-weight: 600; font-size: 14px; color: rgba(28, 28, 30, .78); max-width: 70vw; }
.pastille span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.led { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #30d158; box-shadow: 0 0 0 3px rgba(48, 209, 88, .18); }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 0; flex: none; color: #fff; font-weight: 600; font-size: 14px; letter-spacing: .02em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .16);
  background: linear-gradient(140deg, #ff9f0a 0%, #ff375f 52%, #bf5af2 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(255, 255, 255, .22), 0 6px 16px rgba(255, 55, 95, .28); }
.menu { position: absolute; right: 0; top: 50px; z-index: 5; min-width: 230px; padding: 14px; text-align: left; }
.menu b { display: block; font-weight: 600; }
.menu small { display: block; color: var(--yo-encre-3); margin-bottom: 12px; overflow-wrap: anywhere; }
.ancre { position: relative; }

.salut { font-weight: 600; font-size: clamp(28px, 5vw, 40px); letter-spacing: -.02em; margin-bottom: 22px; }
.rubrique { font-weight: 600; font-size: 13px; text-transform: lowercase; letter-spacing: .02em; color: var(--yo-encre-3); margin: 30px 4px 10px; }

/* ---------- Tuiles : une couleur par appli, comme une icône d'iPhone ---------- */
.tuiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
a.tuile { color: inherit; text-decoration: none; }
.tuile { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px; text-align: left; }
.tuile .libelle { font-weight: 600; font-size: 15px; text-transform: lowercase; }
.icone { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; color: #fff; flex: none;
  background: linear-gradient(135deg, var(--c1), var(--c2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 6px 14px color-mix(in srgb, var(--c1) 34%, transparent); }
.icone svg { width: 24px; height: 24px; }
.icone.petite { width: 34px; height: 34px; border-radius: 10px; }
.icone.petite svg { width: 18px; height: 18px; }
.docx { --c1: #0a84ff; --c2: #5e5ce6; }
.xlsx { --c1: #30d158; --c2: #248a3d; }
.pptx { --c1: #ff9f0a; --c2: #ff375f; }

/* ---------- Liste des documents ---------- */
.liste { padding: 6px; }
.ligne { display: flex; align-items: center; gap: 13px; width: 100%; padding: 11px 12px; border: 0; background: none; border-radius: 16px; text-align: left; }
.ligne + .ligne { box-shadow: 0 -1px 0 var(--yo-trait); }
.ligne:hover { background: rgba(255, 255, 255, .5); box-shadow: none; }
.ligne:hover + .ligne { box-shadow: none; }
.ligne .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ligne .meta { font-size: 13px; color: var(--yo-encre-3); }
.ligne .texte { flex: 1; min-width: 0; }
.rond { width: 36px; height: 36px; border-radius: 50%; border: 0; display: grid; place-items: center; flex: none; color: var(--yo-encre-2);
  background: rgba(255, 255, 255, .52); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .82), 0 4px 14px rgba(120, 60, 30, .10); }
.rond svg { width: 18px; height: 18px; }
.vide { padding: 34px 20px; text-align: center; color: var(--yo-encre-2); }

/* ---------- Formulaires ---------- */
.carte { width: min(400px, 100%); padding: 30px 26px 26px; }
.carte h1 { font-weight: 600; font-size: 24px; letter-spacing: -.01em; margin: 18px 0 4px; }
.carte p.aide { color: var(--yo-encre-2); font-size: 14px; margin-bottom: 18px; }
.logo { display: block; max-height: 44px; max-width: 180px; }
.champ { display: block; margin-top: 12px; }
.champ span { display: block; font-size: 13px; font-weight: 600; text-transform: lowercase; color: var(--yo-encre-3); margin: 0 0 5px 4px; }
.champ input { width: 100%; padding: 12px 14px; border-radius: 14px; border: 0; outline: 0; background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px var(--yo-trait); transition: box-shadow .15s; }
.champ input:focus { box-shadow: inset 0 0 0 2px var(--yo-accent); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border: 0; border-radius: 999px;
  font-weight: 600; color: #fff; background: linear-gradient(135deg, var(--yo-accent), var(--yo-accent-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px color-mix(in srgb, var(--yo-accent) 30%, transparent); }
.bouton:disabled { opacity: .55; cursor: default; }
.bouton.large { width: 100%; margin-top: 20px; }
.bouton.discret { color: var(--yo-encre); background: rgba(255, 255, 255, .6); box-shadow: inset 0 0 0 1px var(--yo-verre-lisere), 0 4px 14px rgba(120, 60, 30, .10); }
.ou { margin-top: 18px; padding-top: 2px; box-shadow: 0 -1px 0 var(--yo-trait); }
.carte p.note { margin: 10px 0 0; text-align: center; font-size: 13px; }
.etiquette { flex: none; font-size: 11px; padding: 2px 8px; border-radius: 999px; text-transform: lowercase; color: #fff;
  background: linear-gradient(135deg, var(--yo-accent), var(--yo-accent-2)); }
.avis { padding: 13px 18px; font-size: 14px; color: var(--yo-encre-2); margin: -6px 0 20px; border-radius: 18px; }
.erreur { margin-top: 14px; padding: 10px 14px; border-radius: 14px; font-size: 14px; color: #b3261e; background: rgba(255, 59, 48, .10); box-shadow: inset 0 0 0 1px rgba(255, 59, 48, .22); }
:focus-visible { outline: 2px solid var(--yo-accent); outline-offset: 2px; }

dialog { border: 0; padding: 26px; width: min(400px, calc(100vw - 32px)); color: inherit; }
dialog::backdrop { background: rgba(60, 40, 30, .22); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
dialog h2 { font-weight: 600; font-size: 20px; margin-bottom: 4px; }
.actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }

/* ---------- Édition : la barre YO au-dessus, l'éditeur en plein cadre ---------- */
.edition { position: fixed; inset: 0; display: flex; flex-direction: column;
  padding: calc(10px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); gap: 10px; }
.barre { display: flex; align-items: center; gap: 12px; padding: 7px 14px 7px 7px; border-radius: 999px; flex: none; }
.barre .nom { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.barre .etat { font-size: 13px; color: var(--yo-encre-3); text-transform: lowercase; white-space: nowrap; }
.barre .etat.alerte { display: inline !important; color: #b3261e; text-transform: none; }
.lien { background: none; border: 0; padding: 0; color: var(--yo-accent); font-weight: 600; text-decoration: underline; }
.cadre { flex: 1; min-height: 0; border-radius: var(--yo-rayon); overflow: hidden; background: #fff; display: grid; }
.cadre iframe { width: 100%; height: 100%; border: 0; display: block; }
.cadre .vide { align-self: center; }

/* ---------- Dock flottant : il reste en place d'un écran à l'autre ; sa pilule glisse vers l'onglet choisi ---------- */
.dock { --rang: 0; --replie: 54px; --ouvert: 124px;
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 20; view-transition-name: dock;
  display: flex; align-items: center; padding: 6px; border-radius: 999px;
  transform: translateX(-50%); transition: transform .55s var(--yo-ressort), opacity .3s; }
.dock.range { transform: translate(-50%, 140%); opacity: 0; pointer-events: none; }
.capsule { position: absolute; left: 6px; top: 6px; width: var(--ouvert); height: 46px; border-radius: 999px;
  background: linear-gradient(135deg, var(--yo-accent), var(--yo-accent-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 6px 16px color-mix(in srgb, var(--yo-accent) 30%, transparent);
  transform: translateX(calc(var(--rang) * var(--replie))); transition: transform .5s var(--yo-ressort); }
.onglet { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; width: var(--replie);
  border-radius: 999px; overflow: hidden; color: var(--yo-encre-2); text-decoration: none; font-weight: 600; font-size: 14px; text-transform: lowercase;
  transition: width .5s var(--yo-ressort), color .3s; }
.onglet svg { width: 22px; height: 22px; flex: none; }
.onglet span { max-width: 0; opacity: 0; white-space: nowrap; transition: max-width .5s var(--yo-ressort), opacity .25s; }
.onglet.actif { width: var(--ouvert); color: #fff; }
.onglet.actif span { max-width: 80px; opacity: 1; transition-delay: 0s, .12s; }
.onglet svg { transition: transform .35s var(--yo-ressort); }
.onglet.saute svg { animation: yo-saut .55s var(--yo-doux); }
.onglet:not(.actif):hover svg { transform: scale(1.16); }

/* ---------- Drive ---------- */
.dossier { --c1: #64d2ff; --c2: #0a84ff; }
.pdf { --c1: #ff6961; --c2: #ff375f; }
.image { --c1: #bf5af2; --c2: #5e5ce6; }
.autre { --c1: #aeaeb2; --c2: #8e8e93; }
.barre-drive { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.fil { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-weight: 600; font-size: 20px; letter-spacing: -.01em; min-width: 0; }
.fil a { color: var(--yo-encre-2); text-decoration: none; }
.fil a:last-child, .fil span:last-child { color: var(--yo-encre); }
.fil a:hover { color: var(--yo-accent); }
.fil span[aria-hidden] { color: var(--yo-encre-3); font-weight: 500; }
.outils { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.outils .bouton { padding: 10px 16px; font-size: 14px; }
.bouton svg { width: 17px; height: 17px; }
.bouton.petit { padding: 7px 14px; font-size: 13px; }
.bouton.danger { background: linear-gradient(135deg, #ff453a, #ff375f); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 8px 20px rgba(255, 55, 95, .26); }
.recherche { display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; height: 40px; border-radius: 999px; color: var(--yo-encre-3); }
.recherche svg { width: 17px; height: 17px; flex: none; }
.recherche input { border: 0; outline: 0; background: none; width: 150px; }
.recherche input::placeholder { color: var(--yo-encre-3); }
.recherche:focus-within { box-shadow: inset 0 0 0 2px var(--yo-accent), var(--yo-ombre); }
button.texte { background: none; border: 0; padding: 0; text-align: left; }
a.texte { color: inherit; text-decoration: none; }
.pied { margin: 14px 6px 0; font-size: 13px; color: var(--yo-encre-3); }
.pied a { color: var(--yo-encre-2); font-weight: 600; }
.pied.haut-de-liste { margin: 0 6px 12px; }

/* Menus flottants, messages brefs */
.menu.flottant { position: fixed; top: 0; left: 0; right: auto; z-index: 40; min-width: 210px; padding: 6px; border-radius: 16px; }
.entree { display: block; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 11px; text-align: left; color: inherit; text-decoration: none; font-size: 15px; }
.entree:hover, .entree:focus-visible { background: rgba(255, 255, 255, .7); }
.entree.danger { color: #c4161c; }
.avis-bref { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 45;
  padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; max-width: calc(100vw - 32px); }
.avis-bref.grave { color: #b3261e; }
.choix { max-height: 46vh; overflow: auto; margin-top: 12px; }
.choix .ligne { cursor: pointer; }

/* Dépôt de fichiers */
.voile-depot { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; pointer-events: none;
  background: color-mix(in srgb, var(--yo-accent) 10%, transparent); }
.voile-depot > div { display: flex; align-items: center; gap: 12px; padding: 22px 30px; font-weight: 600; font-size: 18px;
  box-shadow: inset 0 0 0 2px var(--yo-accent), var(--yo-ombre); }
.voile-depot svg { width: 26px; height: 26px; color: var(--yo-accent); }
.depots { position: fixed; right: 18px; bottom: calc(92px + env(safe-area-inset-bottom)); z-index: 30; width: min(320px, calc(100vw - 36px));
  max-height: 40vh; overflow: auto; padding: 8px 14px; border-radius: 18px; }
.depot { padding: 8px 0; }
.depot + .depot { box-shadow: 0 -1px 0 var(--yo-trait); }
.depot .nom { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot small { font-size: 12px; color: var(--yo-encre-3); }
.depot small.grave { color: #b3261e; }
.jauge { height: 4px; margin-top: 6px; border-radius: 999px; background: var(--yo-trait); overflow: hidden; }
.jauge i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--yo-accent), var(--yo-accent-2)); transition: width .2s; }

/* Aperçu d'une image ou d'un PDF */
.apercu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; gap: 12px; padding: 14px;
  background: rgba(60, 40, 30, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.apercu .feuille { flex: 1; min-height: 0; width: 100%; border: 0; border-radius: var(--yo-rayon); background: rgba(255, 255, 255, .9); }
.apercu img.feuille { object-fit: scale-down; background: rgba(255, 255, 255, .5); }      /* une petite image n'est pas agrandie */

/* ====================================================================================================================
   Le mouvement. Tout arrive, part et répond avec souplesse. Rien de saccadé : aucun mouvement image par image.
   ==================================================================================================================== */
@keyframes yo-derive { 0% { transform: translate3d(-2%, -1.5%, 0) scale(1) rotate(0deg); } 50% { transform: translate3d(2%, 1%, 0) scale(1.06) rotate(1.2deg); } 100% { transform: translate3d(-1%, 2.5%, 0) scale(1.03) rotate(-1deg); } }
@keyframes yo-monte { from { opacity: 0; transform: translateY(18px) scale(.985); filter: blur(5px); } }
@keyframes yo-pose { from { opacity: 0; transform: translateY(26px) scale(.95); filter: blur(8px); } }
@keyframes yo-eclot { from { opacity: 0; transform: scale(.86); } }
@keyframes yo-part { to { opacity: 0; transform: translateY(-8px) scale(.985); filter: blur(4px); } }
@keyframes yo-fond-vient { from { opacity: 0; } }
@keyframes yo-saut { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-4px) scale(1.1); } 100% { transform: translateY(0) scale(1); } }
@keyframes yo-pouls { 0%, 100% { box-shadow: 0 0 0 3px rgba(48, 209, 88, .18); } 50% { box-shadow: 0 0 0 7px rgba(48, 209, 88, 0); } }
@keyframes yo-brille { from { background-position: -160px 0; } to { background-position: 320px 0; } }
@keyframes yo-respire { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

/* D'un écran à l'autre : l'ancien s'efface en reculant, le nouveau monte se poser. Le fond et le dock ne bougent pas. */
#yo { view-transition-name: ecran; }
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-old(ecran) { animation: yo-part .2s var(--yo-doux) both; }
::view-transition-new(ecran) { animation: yo-monte .5s var(--yo-ressort) both; }
::view-transition-group(dock) { animation: none; }

/* Ce qui compose un écran arrive en cascade. */
.page > *, .centre > *, .edition > * { animation: yo-monte .55s var(--yo-ressort) both; }
.page > :nth-child(2) { animation-delay: 50ms; } .page > :nth-child(3) { animation-delay: 100ms; } .page > :nth-child(4) { animation-delay: 150ms; }
.page > :nth-child(5) { animation-delay: 200ms; } .page > :nth-child(6) { animation-delay: 250ms; } .page > :nth-child(n+7) { animation-delay: 300ms; }
.centre > * { animation-name: yo-pose; animation-duration: .7s; }
.carte > * { animation: yo-monte .5s var(--yo-ressort) both; }
.carte > :nth-child(2) { animation-delay: 80ms; } .carte > :nth-child(3) { animation-delay: 130ms; } .carte > :nth-child(4) { animation-delay: 180ms; }
.carte > :nth-child(5) { animation-delay: 230ms; } .carte > :nth-child(n+6) { animation-delay: 280ms; }
.tuiles > * { animation: yo-eclot .5s var(--yo-ressort) both; }
.tuiles > :nth-child(1) { animation-delay: 120ms; } .tuiles > :nth-child(2) { animation-delay: 180ms; } .tuiles > :nth-child(3) { animation-delay: 240ms; } .tuiles > :nth-child(4) { animation-delay: 300ms; }
.liste > .ligne, .choix > .ligne { animation: yo-monte .45s var(--yo-ressort) both; }
.liste > :nth-child(2), .choix > :nth-child(2) { animation-delay: 35ms; } .liste > :nth-child(3), .choix > :nth-child(3) { animation-delay: 70ms; }
.liste > :nth-child(4), .choix > :nth-child(4) { animation-delay: 105ms; } .liste > :nth-child(5) { animation-delay: 140ms; } .liste > :nth-child(6) { animation-delay: 175ms; }
.liste > :nth-child(7) { animation-delay: 210ms; } .liste > :nth-child(8) { animation-delay: 245ms; } .liste > :nth-child(n+9) { animation-delay: 280ms; }
.edition > .cadre { animation-delay: 90ms; }

/* Ce qu'on touche répond. */
.tuile, .bouton, .rond, .avatar, .pastille, .entree, .ligne, .recherche { transition: transform .28s var(--yo-ressort), box-shadow .28s, background-color .2s, filter .2s; }
.tuile:hover { transform: translateY(-4px) scale(1.012); box-shadow: inset 0 0 0 1px var(--yo-verre-lisere), inset 0 1px 0 var(--yo-verre-reflet), 0 16px 34px rgba(96, 52, 10, .14); }
.tuile:active { transform: scale(.965); }
.icone { transition: transform .4s var(--yo-ressort), box-shadow .3s; }
.tuile:hover .icone { transform: scale(1.1) translateY(-2px); }
.ligne:hover .icone { transform: scale(1.08); }
.bouton:hover:not(:disabled) { transform: translateY(-1px) scale(1.02); filter: brightness(1.04); }
.bouton:active:not(:disabled) { transform: scale(.95); }
.rond:hover, .avatar:hover { transform: scale(1.1); }
.rond:active, .avatar:active { transform: scale(.9); }
.ligne:hover { transform: translateX(3px); }
.entree:hover { transform: translateX(3px); }
.recherche:focus-within input { width: 200px; }
.recherche input { transition: width .4s var(--yo-ressort); }
.led { animation: yo-pouls 2.8s ease-in-out infinite; }
.champ input { transition: box-shadow .2s, transform .25s var(--yo-ressort); }
.champ input:focus { transform: scale(1.012); }
.etat.marque { animation: yo-fond-vient .4s var(--yo-doux) both; }

/* Boîtes, menus, messages : ils s'ouvrent d'un souffle et se referment sans à-coup. */
dialog[open] { animation: yo-pose .42s var(--yo-ressort) both; }
dialog[open]::backdrop { animation: yo-fond-vient .3s both; }
dialog.sort { animation: yo-part .17s var(--yo-doux) both; }
.menu.flottant { transform-origin: 85% 0; animation: yo-eclot .28s var(--yo-ressort) both; }
.menu.flottant .entree { animation: yo-monte .3s var(--yo-ressort) both; }
.menu.flottant .entree:nth-child(2) { animation-delay: 30ms; } .menu.flottant .entree:nth-child(3) { animation-delay: 60ms; }
.menu.flottant .entree:nth-child(4) { animation-delay: 90ms; } .menu.flottant .entree:nth-child(n+5) { animation-delay: 120ms; }
.ancre .menu:not([hidden]) { transform-origin: 90% 0; animation: yo-eclot .3s var(--yo-ressort) both; }
.avis-bref { animation: yo-surgit .45s var(--yo-ressort) both; }
.avis-bref.sort { animation: yo-replonge .25s var(--yo-doux) both; }
@keyframes yo-surgit { from { opacity: 0; transform: translate(-50%, 22px) scale(.9); } }
@keyframes yo-replonge { to { opacity: 0; transform: translate(-50%, 14px) scale(.96); } }
.apercu { animation: yo-fond-vient .25s both; }
.apercu > * { animation: yo-pose .45s var(--yo-ressort) both; }
.apercu > .feuille { animation-delay: 60ms; }
.apercu.sort { animation: yo-part .2s var(--yo-doux) both; }
.depots { animation: yo-pose .45s var(--yo-ressort) both; }
.depot { animation: yo-monte .35s var(--yo-ressort) both; }
.jauge i { background-image: linear-gradient(90deg, var(--yo-accent), var(--yo-accent-2)), linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  background-size: 100% 100%, 160px 100%; background-repeat: no-repeat; background-blend-mode: normal; animation: yo-brille 1.3s linear infinite; }
.voile-depot { animation: yo-fond-vient .2s both; }
.voile-depot > div { animation: yo-pose .4s var(--yo-ressort) both, yo-respire 1.6s ease-in-out .4s infinite; }
.cadre iframe { animation: yo-fond-vient .6s .15s both; }

@media (max-width: 600px) {
  .tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fil { font-size: 17px; }
  .recherche input { width: 110px; }
  .ligne .meta { font-size: 12px; }
  .tuiles { gap: 10px; }
  .tuile { padding: 14px 12px; align-items: center; text-align: center; gap: 10px; }
  .tuile .libelle { font-size: 13px; }
  .haut { margin-bottom: 24px; }
  .barre .etat { display: none; }
}
/* Écran non dessiné (onglet en arrière-plan) : pas d'animation, pour que rien ne reste invisible à en attendre une. */
html.fige *, html.fige *::before, html.fige *::after { animation: none !important; transition: none !important; }
html.fige::view-transition-group(*), html.fige::view-transition-old(*), html.fige::view-transition-new(*) { animation: none !important; }
html.fige::view-transition-old(*) { display: none; }

/* Qui a demandé moins de mouvement à son appareil n'en reçoit aucun. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after, ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; transition: none !important; }
}