@font-face {
  font-family: "Inter";
  src: url("/polices/inter.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --encre: #101217;
  --doux: #626875;
  --pale: #8b909c;
  --trait: rgba(16, 18, 23, .07);
  --verre: rgba(255, 255, 255, .76);
  --fond: #f6f7fb;
  --vert: #2fbf71;
  --rouge: #e5484d;
  --rayon: 24px;
  --marge: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  color: var(--encre);
  font: 14px/1.45 "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  background:
    radial-gradient(900px 500px at 85% -10%, #e4ddff 0%, transparent 60%),
    radial-gradient(800px 500px at 10% 0%, #dff3ff 0%, transparent 55%),
    var(--fond);
  background-attachment: fixed;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; }
.nb { font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
[hidden] { display: none !important; }

/* Menu : colonne à gauche sur grand écran, barre en bas sur téléphone */
.menu { position: fixed; z-index: 10; }
.menu nav a { display: flex; align-items: center; gap: 12px; color: var(--doux); font-weight: 600; text-decoration: none; }
.menu svg { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .menu .court { display: none; } }
@media (max-width: 899px) { .menu nav a span:has(+ .court) { display: none; } }
.menu .compte { font-size: 11px; background: #ffe7e7; color: #d33; padding: 1px 7px; border-radius: 999px; }
.marque { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; letter-spacing: -.01em; }
.marque img { width: 32px; height: 32px; border-radius: 10px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg, #c9d6ff, #e2d1ff); display: grid; place-items: center; font-size: 13px; }

@media (min-width: 900px) {
  body { padding-left: 232px; }
  body.dehors { padding-left: 0; }
  .menu { inset: 0 auto 0 0; width: 232px; padding: 28px 16px; display: flex; flex-direction: column; gap: 4px; }
  .marque { padding: 0 12px 26px; }
  .menu nav { display: flex; flex-direction: column; gap: 4px; }
  .menu nav a { padding: 10px 12px; border-radius: 12px; }
  .menu nav a:hover { color: var(--encre); }
  .menu nav a.on { background: #fff; color: var(--encre); box-shadow: 0 1px 2px rgba(16,18,23,.06), 0 6px 16px rgba(16,18,23,.05); }
  .menu .compte { margin-left: auto; }
  .profil { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 12px; }
  .profil .qui { font-weight: 600; font-size: 13px; line-height: 1.25; }
  .profil small { display: block; color: var(--doux); font-weight: 500; }
  main { padding: 30px 36px 40px 12px; max-width: 1260px; }
}

@media (max-width: 899px) {
  :root { --marge: 12px; --rayon: 22px; }
  .marque, .profil { display: none; }
  .menu {
    left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    padding: 6px; border-radius: 22px;
    background: rgba(255,255,255,.94); backdrop-filter: blur(24px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.6);
    border: 1px solid rgba(255,255,255,.9);
    box-shadow: 0 10px 30px rgba(40,44,80,.14), 0 1px 2px rgba(16,18,23,.06);
  }
  .menu nav { display: grid; grid-template-columns: repeat(6, 1fr); }
  .menu nav a { font-size: 10.5px; letter-spacing: -.01em; }
  .menu nav a { position: relative; flex-direction: column; gap: 3px; padding: 8px 0 6px; border-radius: 16px; font-size: 11px; }
  .menu nav a { color: #7a7f8a; transition: background .2s, color .2s; }
  .menu nav a.on { color: #fff; background: var(--encre); box-shadow: 0 4px 12px rgba(16,18,23,.22); }
  .menu nav a.on svg { stroke-width: 2.1; }
  .menu .compte { position: absolute; top: 4px; left: calc(50% + 6px); padding: 0 6px; box-shadow: 0 0 0 2px #fff; }
  .menu nav a.on .compte { box-shadow: 0 0 0 2px var(--encre); }
  main { padding: calc(18px + env(safe-area-inset-top)) 16px calc(108px + env(safe-area-inset-bottom)); }
}

/* En-tête de page */
.entete { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.date { color: var(--doux); font-weight: 600; font-size: 13px; }
h1 { font-size: 34px; line-height: 1.15; letter-spacing: -.035em; margin: 2px 0 6px; }
.resume { color: #3a3f4a; font-size: 15px; max-width: 660px; }
.resume b { color: var(--encre); }
.actualiser { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 12px; border-radius: 999px; background: var(--verre); border: 1px solid rgba(255,255,255,.9); color: var(--doux); font-size: 12px; font-weight: 600; box-shadow: 0 1px 2px rgba(16,18,23,.04); }
.actualiser svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; }
.actualiser.tourne svg { animation: tour 0.9s linear infinite; }
@keyframes tour { to { transform: rotate(360deg); } }
@media (max-width: 899px) {
  h1 { font-size: 28px; }
  .resume { font-size: 14px; }
  .actualiser span { display: none; }
  .actualiser { padding: 9px; }
}

/* Cartes */
.bento { display: grid; grid-template-columns: 1.25fr 1fr; gap: var(--marge); margin-top: 22px; align-items: start; }
.pleine { grid-column: 1 / -1; }
@media (max-width: 899px) { .bento { grid-template-columns: 1fr; margin-top: 18px; } }
.carte { min-width: 0; background: var(--verre); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,.9); border-radius: var(--rayon); padding: 20px 22px; box-shadow: 0 1px 2px rgba(16,18,23,.04), 0 12px 32px rgba(40,44,80,.06); }
@media (max-width: 899px) { .carte { padding: 18px; } }
.titre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.titre h2 { font-size: 15px; letter-spacing: -.01em; }
.titre a, .titre span { color: var(--doux); font-size: 12px; font-weight: 600; text-decoration: none; }

/* Accueil : trois rubriques nettement séparées, chacune avec son en-tête et sa carte */
.accueil { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px 24px; align-items: start; margin-top: 26px; }
.accueil section { display: grid; gap: 32px; min-width: 0; }
.accueil .liste-cours { margin-top: 0; }
.rubrique { display: flex; align-items: center; gap: 10px; margin: 0 4px 12px; }
.rubrique i { --c: #999; flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 15%, white); }
.rubrique svg { width: 17px; height: 17px; stroke: var(--c); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rubrique h2 { font-size: 19px; letter-spacing: -.02em; }
.rubrique span, .rubrique a { margin-left: auto; color: var(--doux); font-size: 13px; font-weight: 600; text-decoration: none; }
@media (max-width: 899px) { .accueil { grid-template-columns: 1fr; gap: 32px; margin-top: 22px; } .carte .cours { grid-template-columns: 46px 1fr; gap: 10px; } }

/* Devoirs */
.tache { display: flex; gap: 12px; padding: 12px 0; border-top: 1px solid var(--trait); }
.tache:first-child { border-top: 0; padding-top: 2px; }
.tache:last-child { padding-bottom: 0; }
.case { flex: none; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c9ced8; margin-top: -1px; transition: background .15s, border-color .15s; }
.case:hover { border-color: var(--vert); }
.tache.ok .case { background: var(--vert); border-color: var(--vert); box-shadow: inset 0 0 0 3px #fff; }
.tache.ok .texte { text-decoration: line-through; color: var(--doux); }
.tache.attente .case { opacity: .5; }
.corps { flex: 1; min-width: 0; }
.ligne1 { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.ligne1 i { flex: none; width: 8px; height: 8px; border-radius: 3px; }
.ligne1 em { margin-left: auto; flex: none; font-style: normal; color: var(--doux); font-weight: 600; }
.ligne1 em.urgent { color: var(--rouge); }
.texte { font-size: 13.5px; margin-top: 2px; white-space: pre-line; overflow-wrap: anywhere; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tag { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: #ffe9e9; color: #d63c41; text-decoration: none; }
.tag.pj { background: #eef1f6; color: var(--doux); }
.tag.pj:hover { color: var(--encre); }
.vide { color: var(--doux); padding: 18px 0 6px; text-align: center; font-weight: 600; }

/* Notes */
.moy { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 10px; }
.moy .gros { font-size: 44px; font-weight: 700; letter-spacing: -.04em; line-height: 1.1; }
.moy .gros small { font-size: 18px; color: var(--doux); letter-spacing: 0; }
.ecart { font-size: 12px; font-weight: 700; color: #1f9d5c; background: #e3f7ec; padding: 3px 10px; border-radius: 999px; }
.ecart.bas { color: #c2410c; background: #fff0e5; }
.jauge { position: relative; height: 8px; border-radius: 99px; background: #eceff4; }
.jauge i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.jauge u { position: absolute; top: -4px; bottom: -4px; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--encre); opacity: .55; }

/* Emploi du temps */
.jours { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 20px; }
.jour { padding: 10px 0; border-radius: 16px; text-align: center; background: var(--verre); border: 1px solid rgba(255,255,255,.9); color: var(--doux); font-weight: 600; font-size: 12px; box-shadow: 0 1px 2px rgba(16,18,23,.04); }
.jour b { display: block; font-size: 20px; color: var(--encre); letter-spacing: -.02em; }
.jour.auj b { color: #12a594; }
.jour.on { background: var(--encre); color: rgba(255,255,255,.7); border-color: var(--encre); }
.jour.on b { color: #fff; }
.jour .points { display: flex; justify-content: center; gap: 3px; height: 6px; margin-top: 4px; }
.jour .points i { width: 5px; height: 5px; border-radius: 50%; }
.semaines { display: flex; align-items: center; gap: 6px; }
.semaines button { width: 34px; height: 34px; border-radius: 50%; background: var(--verre); border: 1px solid rgba(255,255,255,.9); display: grid; place-items: center; box-shadow: 0 1px 2px rgba(16,18,23,.04); }
.semaines button:disabled { opacity: .35; cursor: default; }
.semaines svg { width: 16px; height: 16px; stroke: var(--encre); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.liste-cours { display: grid; gap: 10px; margin-top: var(--marge); }
.cours { display: grid; grid-template-columns: 54px 1fr; gap: 12px; }
.cours .h { padding-top: 12px; font-size: 13px; font-weight: 700; line-height: 1.25; }
.cours .h small { display: block; color: var(--pale); font-weight: 600; font-size: 12px; }
.cours .c { --c: #999; position: relative; padding: 12px 14px 12px 18px; border-radius: 18px; background: color-mix(in srgb, var(--c) 13%, white); border: 1px solid color-mix(in srgb, var(--c) 22%, white); overflow: hidden; }
.cours .c::before { content: ""; position: absolute; left: 6px; top: 10px; bottom: 10px; width: 4px; border-radius: 4px; background: var(--c); }
.cours .c b { display: block; font-size: 15px; color: color-mix(in srgb, var(--c) 62%, black); letter-spacing: -.01em; }
.cours .c .infos { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 4px; font-size: 12.5px; font-weight: 600; color: color-mix(in srgb, var(--c) 35%, #555); }
.cours .c .tags { margin-top: 8px; }
.cours.passe .c { opacity: .55; }
.cours.passe .c:has(.contenu) { opacity: 1; }
.cours.annule .c { background: repeating-linear-gradient(135deg, #f3f4f7 0 6px, #fff 6px 12px); border-color: var(--trait); }
.cours.annule .c b { color: var(--pale); text-decoration: line-through; }
.cours.annule .c::before { background: #c9ced8; }
.pause { grid-column: 2; display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 14px; border: 1px dashed rgba(16,18,23,.12); color: var(--doux); font-size: 12.5px; font-weight: 600; }
.pause em { margin-left: auto; font-style: normal; }
.pause.recre { border-style: solid; border-color: transparent; background: rgba(16,18,23,.035); padding-block: 7px; }
.enCours { position: absolute; right: 12px; top: 12px; font-size: 11px; font-weight: 700; color: #fff; background: var(--c); padding: 2px 8px; border-radius: 999px; }

/* Travail à faire */
.segments { display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 14px; background: rgba(16,18,23,.05); margin-top: 18px; }
.segments button { padding: 7px 16px; border-radius: 10px; font-weight: 600; font-size: 13px; color: var(--doux); }
.segments button.on { background: #fff; color: var(--encre); box-shadow: 0 1px 2px rgba(16,18,23,.08); }
.groupe { margin-top: var(--marge); }
.groupe .titre { margin-bottom: 8px; }
.groupe .titre span.urgent { color: var(--rouge); }

/* Notes, écran complet */
.grille-mat { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--marge); }
.mat { --c: #999; }
.ouvrir { display: block; width: 100%; text-align: left; }
.mat .nom { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; }
.mat .nom i { width: 8px; height: 8px; border-radius: 3px; background: var(--c); }
.mat .val { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 12px; }
.mat .val b { font-size: 28px; letter-spacing: -.03em; }
.mat .val small { color: var(--doux); font-weight: 600; font-size: 12px; }
.mat .jauge i { background: var(--c); }
.mat .bornes { display: flex; justify-content: space-between; margin-top: 6px; color: var(--pale); font-size: 11px; font-weight: 600; }
.mat .detail { margin-top: 12px; border-top: 1px solid var(--trait); }
.ligne-note { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--trait); }
.ligne-note:first-child { border-top: 0; }
.ligne-note .corps p { font-size: 13.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne-note .corps small { color: var(--doux); font-size: 12px; font-weight: 500; }
.ligne-note .pt { flex: none; text-align: right; font-weight: 700; font-size: 16px; }
.ligne-note .pt small { display: block; color: var(--doux); font-weight: 600; font-size: 11px; }
.ligne-note .neuf { margin-left: 6px; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: #e3f7ec; color: #1f9d5c; vertical-align: 2px; }
.ligne-note .pt sub { font-size: 11px; color: var(--doux); vertical-align: baseline; }

/* Connexion */
.connexion { min-height: 70vh; display: grid; place-items: center; }
.connexion form { width: min(360px, 100%); text-align: center; }
.connexion img { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 10px 30px rgba(18,150,165,.25); }
.connexion h1 { margin-top: 16px; }
.connexion p { color: var(--doux); margin-bottom: 20px; }
.connexion input { width: 100%; padding: 14px 16px; border-radius: 14px; border: 1px solid rgba(16,18,23,.1); background: #fff; font: inherit; font-size: 15px; }
.connexion input:focus { outline: 2px solid #12b5a5; outline-offset: 1px; }
.bouton { width: 100%; margin-top: 10px; padding: 14px; border-radius: 14px; background: var(--encre); color: #fff; font-weight: 700; font-size: 15px; }
.connexion form { padding: 24px 0; }
.connexion form > input + input, .connexion .fichier + input { margin-top: 10px; }
.etapes { text-align: left; margin: 0 0 18px; padding: 14px 16px 14px 34px; border-radius: 16px; background: var(--verre); border: 1px solid rgba(255,255,255,.9); color: #3a3f4a; font-size: 13.5px; display: grid; gap: 6px; }
.fichier { position: relative; display: grid; place-items: center; min-height: 64px; padding: 12px; border-radius: 14px; border: 1.5px dashed rgba(16,18,23,.18); background: rgba(255,255,255,.6); color: var(--doux); font-weight: 600; cursor: pointer; }
.fichier input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.fichier.ok { border-style: solid; border-color: var(--vert); background: #e9f9f0; color: #1f9d5c; }
.lien { margin-top: 14px; color: var(--doux); font-weight: 600; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.discret { margin: 14px 0 0 !important; font-size: 12.5px; }
.pied { margin-top: 28px; text-align: center; color: var(--doux); font-size: 12.5px; }
.pied button { color: var(--doux); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.erreur { color: var(--rouge); font-weight: 600; margin-top: 12px; min-height: 20px; }

/* Messagerie */
.liste-fils { padding: 6px 8px; }
.fil-ligne { display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; padding: 12px 10px; border-radius: 16px; }
.fil-ligne + .fil-ligne { border-top: 1px solid var(--trait); border-radius: 0 0 16px 16px; }
.fil-ligne:hover { background: rgba(16,18,23,.03); }
.avatar-fil { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; color: #3b3f8f; background: linear-gradient(135deg, #dfe6ff, #ece0ff); }
.fil-ligne .corps { display: block; }
.fil-ligne .ligne1 b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fil-ligne .sujet { display: block; font-size: 14px; font-weight: 600; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #3a3f4a; }
.fil-ligne small { color: var(--pale); font-size: 12px; font-weight: 500; }
.fil-ligne.nonlu .sujet { color: var(--encre); font-weight: 700; }
.pastille-nonlu { flex: none; align-self: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; background: #4f7cff; color: #fff; font-size: 12px; font-style: normal; font-weight: 700; }
.fil-haut { display: flex; align-items: center; gap: 12px; }
.retour { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--verre); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 1px 2px rgba(16,18,23,.04); }
.retour svg { width: 18px; height: 18px; stroke: var(--encre); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fil-titre { font-size: 22px; line-height: 1.2; margin: 0; }
.fil { display: grid; gap: 12px; margin-top: 20px; }
.bulle { max-width: 88%; padding: 12px 14px; border-radius: 20px 20px 20px 6px; background: #fff; border: 1px solid rgba(16,18,23,.06); box-shadow: 0 1px 2px rgba(16,18,23,.04); }
.bulle b { display: block; font-size: 12px; color: #3b3f8f; margin-bottom: 4px; }
.bulle p { white-space: pre-line; overflow-wrap: anywhere; font-size: 14px; }
.bulle small { display: block; margin-top: 6px; color: var(--pale); font-size: 11px; font-weight: 600; }
.bulle.moi { justify-self: end; border-radius: 20px 20px 6px 20px; background: var(--encre); color: #fff; border-color: var(--encre); }
.bulle.moi small { color: rgba(255,255,255,.55); }
.repondre { display: flex; gap: 8px; align-items: flex-end; margin-top: 18px; }
.repondre textarea { flex: 1; resize: vertical; min-height: 48px; padding: 12px 14px; border-radius: 16px; border: 1px solid rgba(16,18,23,.1); background: #fff; font: inherit; font-size: 15px; }
.repondre textarea:focus { outline: 2px solid #4f7cff; outline-offset: 1px; }
.repondre .bouton { width: auto; margin: 0; padding: 13px 16px; }

/* Contenu d'un cours */
button.tag { cursor: pointer; }
.contenu-tag { background: color-mix(in srgb, var(--c) 22%, white); color: color-mix(in srgb, var(--c) 60%, black); }
.contenu-tag.on { background: color-mix(in srgb, var(--c) 60%, black); color: #fff; }
.contenu { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--c) 25%, white); display: grid; gap: 10px; }
.contenu b { font-size: 13px; color: color-mix(in srgb, var(--c) 62%, black); }
.contenu p { white-space: pre-line; overflow-wrap: anywhere; font-size: 13.5px; color: #2e323b; margin-top: 2px; }

/* Cantine */
.menu-cantine { margin-top: var(--marge); }
.plat { padding: 9px 0; border-top: 1px solid var(--trait); }
.plat:first-of-type { border-top: 0; padding-top: 0; }
.plat:last-child { padding-bottom: 0; }
.plat small { display: block; color: var(--doux); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.plat p { font-size: 14px; margin-top: 2px; }

/* Vie scolaire */
.tuiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--marge); margin-top: 22px; }
.tuile { --c: #999; padding: 16px; border-radius: 20px; background: color-mix(in srgb, var(--c) 10%, white); border: 1px solid color-mix(in srgb, var(--c) 18%, white); }
.tuile b { display: block; font-size: 30px; line-height: 1.1; color: color-mix(in srgb, var(--c) 70%, black); }
.tuile span { display: block; font-weight: 700; font-size: 13px; }
.tuile small { color: var(--doux); font-size: 12px; font-weight: 500; }
@media (max-width: 899px) { .tuiles { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; } }
.pile { display: grid; gap: var(--marge); align-content: start; }
.ligne-vie { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--trait); }
.ligne-vie:first-of-type { border-top: 0; padding-top: 0; }
.ligne-vie:last-child { padding-bottom: 0; }
.ligne-vie .corps p { font-size: 13.5px; font-weight: 600; }
.ligne-vie .corps small { color: var(--doux); font-size: 12px; }
.etiq { flex: none; width: 104px; text-align: center; font-size: 11px; font-weight: 700; padding: 3px 0; border-radius: 999px; }
.etiq.vert { background: #e3f7ec; color: #1f9d5c; }
.etiq.orange { background: #fff0e5; color: #c2410c; }
.etiq.rouge { background: #ffe9e9; color: #d63c41; }
.etiq.gris { background: #eef1f6; color: var(--doux); }

/* Message bref */
#toast { position: fixed; z-index: 20; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; padding: 10px 16px; border-radius: 999px; background: var(--encre); color: #fff; font-weight: 600; font-size: 13px; transition: .25s; white-space: nowrap; }
#toast.vu { opacity: 1; transform: translate(-50%, 0); }
@media (min-width: 900px) { #toast { bottom: 28px; margin-left: 116px; } }

.squelette { height: 180px; border-radius: var(--rayon); background: linear-gradient(90deg, rgba(255,255,255,.5), rgba(255,255,255,.9), rgba(255,255,255,.5)); background-size: 200% 100%; animation: lueur 1.2s infinite; }
@keyframes lueur { to { background-position: -200% 0; } }

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }