/* Wintg Mail — même charte que wintg.group : Slabo, Orange, Blanc Wintg, Cacao, Nuit. Pas d'ombres. */
@font-face { font-family: "Slabo 27px"; src: url("/fonts/Slabo27px-Regular.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Slabo 13px"; src: url("/fonts/Slabo13px-Regular.woff2") format("woff2"); font-display: swap; }

:root {
  --orange: #E67A1E; --orange-ton: #D96F14; --orange-profond: #A84A08; --orange-pale: #FDE8D4;
  --blanc: #FFF8EF; --blanc-pur: #FFFFFF; --cacao: #3A1C0A; --taupe: #6E5846; --argile: #B5A08C; --filet: #EADFD0;
  --nuit: #171310; --surface: #221A14; --bordure-sombre: #3B2F26;
  --titre: "Slabo 27px", Georgia, serif; --petit: "Slabo 13px", Georgia, serif;
  --mouvement: cubic-bezier(.2, .8, .2, 1);
  --bord: clamp(0.625rem, 1.2vw, 1rem);
  --rayon: clamp(1.125rem, 1.8vw, 1.75rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
/* Téléphone : 1 rem = 4,4 % de la largeur, le même format sur tous les écrans. */
@media (max-width: 600px) { html { font-size: 4.4vw; } }
body { margin: 0; min-height: 100vh; background: var(--blanc); color: var(--cacao); font: 400 1.0625rem/1.55 var(--titre); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: inherit; }
h1, h2 { font-weight: 400; margin: 0; letter-spacing: -.01em; }
button, input { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.etiquette { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 1.125rem; font: 400 0.75rem/1.3 var(--petit); letter-spacing: .16em; text-transform: uppercase; color: var(--orange); }
.etiquette::before { content: ""; width: 1.375rem; height: 1px; background: currentColor; }
.etiquette--sombre { color: var(--orange-profond); }
.surligne { background: var(--orange); color: var(--cacao); padding: 0 .12em; border-radius: .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.motif { position: relative; isolation: isolate; }
.motif::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: url("/img/motif-trait-blanc.svg") 0 0 / 35rem; opacity: .03; pointer-events: none; }

/* ---------- Boutons, champs, notes ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem; width: 100%; padding: 0.9375rem 1.375rem; border: 0; border-radius: 62.4375rem; background: var(--orange); color: var(--cacao); font-size: 1.0625rem; cursor: pointer; transition: background .2s, transform .2s var(--mouvement); }
.bouton svg { width: 1.25rem; height: 1.25rem; transition: transform .25s var(--mouvement); }
.bouton:hover { background: var(--orange-ton); }
.bouton:hover svg { transform: translateX(0.25rem); }
.bouton:active { transform: scale(.98); }
.bouton:focus-visible, .champ input:focus-visible, .champ__voir:focus-visible { outline: 2px solid var(--orange); outline-offset: 0.1875rem; }
.bouton--attente { opacity: .75; cursor: progress; }
.bouton--attente svg { animation: va-vient .8s ease-in-out infinite alternate; }
@keyframes va-vient { to { transform: translateX(0.375rem); } }
.bouton:disabled:not(.bouton--attente) { opacity: .55; cursor: not-allowed; }

.champ { display: grid; gap: 0.5rem; margin-bottom: 1.125rem; }
.champ > span:first-child { font: 400 0.8125rem/1.2 var(--petit); letter-spacing: .04em; color: var(--taupe); }
.champ input { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--filet); border-radius: 0.875rem; background: var(--blanc-pur); font-size: 1.0625rem; transition: border-color .2s; }
.champ input::placeholder { color: var(--argile); }
.champ input:hover { border-color: var(--argile); }
.champ input:focus { border-color: var(--orange); outline: none; }
.champ__mdp { position: relative; display: block; }
.champ__mdp input { padding-right: 6rem; }
.champ__voir { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); padding: 0.375rem 0.75rem; border: 0; border-radius: 62.4375rem; background: var(--blanc); color: var(--taupe); font: 400 0.8125rem/1 var(--petit); cursor: pointer; }
.champ__voir:hover { color: var(--cacao); background: var(--orange-pale); }
.champ__voir svg { display: none; }
.champ__voir--actif { color: var(--orange-profond); background: var(--orange-pale); }

.note { margin: 0 0 1.125rem; padding: 0.75rem 1rem; border-radius: 0.875rem; font-size: 0.9375rem; line-height: 1.4; }
.note--erreur { background: #FBE3DC; color: #8A2A12; }
.note--ok { background: var(--orange-pale); color: var(--cacao); }

/* ---------- Connexion ---------- */
.connexion { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: var(--bord); min-height: 100vh; padding: var(--bord); }
.connexion__marque { position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 3rem; padding: clamp(1.75rem, 4vw, 4rem); border-radius: var(--rayon); background: var(--nuit); color: var(--blanc); overflow: hidden; }
.connexion__marque::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/img/motif-trait-blanc.svg") 0 0 / 35rem; opacity: .03; }
.connexion__marque::after { content: ""; position: absolute; right: -12%; bottom: -18%; z-index: -1; width: 62%; aspect-ratio: 1; background: url("/img/wintg_symbole_orange.svg") center / contain no-repeat; opacity: .06; }
.connexion__logo img { width: 9.25rem; height: auto; }
.connexion__texte { margin: auto 0; }
.connexion__texte h1 { font-size: clamp(2.375rem, 5vw, 4.75rem); line-height: 1.08; }
.connexion__texte h1 .surligne { white-space: nowrap; }
.connexion__texte .chapeau { max-width: 30rem; margin: 1.625rem 0 0; color: var(--argile); font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }

.connexion__formulaire { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; padding: clamp(1.25rem, 3vw, 3rem) clamp(0.25rem, 2vw, 1.5rem); }
.carte-connexion { width: min(100%, 26.875rem); animation: monte .7s var(--mouvement) both; }
@keyframes monte { from { opacity: 0; transform: translateY(1.125rem); } }
.carte-connexion__symbole { width: 2.75rem; height: auto; margin-bottom: 1.625rem; }
.carte-connexion h2 { font-size: clamp(2rem, 2.8vw, 2.625rem); line-height: 1.1; }
.carte-connexion__aide { margin: 0.625rem 0 1.875rem; color: var(--taupe); }
.carte-connexion .bouton { margin-top: 0.5rem; }
.carte-connexion__pied { margin: 1.375rem 0 0; padding-top: 1.125rem; border-top: 1px solid var(--filet); color: var(--taupe); font: 400 0.875rem/1.4 var(--petit); text-align: center; }
.connexion__legal { margin: 0; color: var(--argile); font: 400 0.8125rem/1.4 var(--petit); }

/* Téléphone : fond Nuit avec le logo seul, et le formulaire dans une feuille posée en bas, décollée des bords. */
@media (max-width: 900px) {
  /* La page est figée : aucun défilement ni rebond, même quand le clavier s'ouvre. */
  html:has(.page-connexion) { height: 100%; overflow: hidden; overscroll-behavior: none; }
  .page-connexion { position: fixed; inset: 0; min-height: 0; overflow: hidden; overscroll-behavior: none; background: var(--nuit); }
  .page-connexion::before { content: ""; position: fixed; inset: 0; background: url("/img/motif-trait-blanc.svg") 0 0 / 35rem; opacity: .03; pointer-events: none; }
  .connexion { position: relative; display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0; padding: 0; overflow: hidden; }
  .connexion__marque { flex: 1; display: grid; place-items: center; min-height: 0; padding: 6vw 0; border-radius: 0; background: transparent; overflow: visible; }
  .connexion__marque::before, .connexion__marque::after, .connexion__texte, .carte-connexion__symbole, .connexion__legal { display: none; }
  .connexion__logo img { width: 36vw; max-width: 15rem; animation: monte .7s var(--mouvement) both; }
  .connexion__formulaire { display: block; width: 94%; max-width: 34rem; margin: 0 auto calc(3vw + env(safe-area-inset-bottom)); padding: 1.375rem 1.25rem 1.125rem; border-radius: 1.625rem; background: var(--blanc); animation: feuille .6s var(--mouvement) both; }
  .carte-connexion { width: 100%; animation: none; }
  .carte-connexion h2 { font-size: 1.5rem; margin-bottom: 1rem; }
  .carte-connexion__aide { display: none; }
  .note { margin-bottom: 0.875rem; padding: 0.625rem 0.875rem; font-size: 0.8125rem; border-radius: 0.75rem; }
  .champ { gap: 0.375rem; margin-bottom: 0.875rem; }
  .champ > span:first-child { font-size: 0.75rem; }
  .champ input { padding: 0.75rem 0.875rem; font-size: 0.9375rem; border-radius: 0.75rem; }
  .champ__mdp input { padding-right: 3rem; }
  .champ__voir { right: 0.375rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border-radius: 0.625rem; background: transparent; }
  .champ__voir span { display: none; }
  .champ__voir svg { display: block; width: 1.125rem; height: 1.125rem; }
  .carte-connexion .bouton { margin-top: 0.25rem; padding: 0.8125rem 1.25rem; font-size: 1rem; }
  .bouton svg { width: 1.125rem; height: 1.125rem; }
  .carte-connexion__pied { margin-top: 0.875rem; padding-top: 0.75rem; font-size: 0.75rem; }
}
@media (max-width: 900px) and (max-height: 520px) { .connexion__marque { display: none; } .connexion { justify-content: flex-end; } }
@keyframes feuille { from { transform: translateY(110%); } }

/* ---------- Espace connecté ---------- */
.page-appli { background: var(--blanc); }
.bouton--cacao { background: var(--cacao); color: var(--blanc); }
.bouton--cacao:hover { background: #4d2611; }
.bouton--contour-clair { background: transparent; color: var(--blanc); border: 1px solid rgba(255, 248, 239, .35); }
.bouton--contour-clair:hover { background: transparent; border-color: var(--blanc); }
.puce { display: inline-block; padding: 0.25rem 0.625rem; border-radius: 999px; background: var(--orange); color: var(--cacao); font: 400 0.75rem/1 var(--petit); letter-spacing: .06em; }
.puce--claire { background: rgba(255, 248, 239, .1); color: var(--orange); }

.avatar { display: block; flex: none; width: 2.75rem; height: 2.75rem; border-radius: 50%; object-fit: cover; }
.avatar--lettre { display: grid; place-items: center; background: var(--orange); color: var(--cacao); font: 400 1.25rem/1 var(--titre); }
.avatar--grand { width: 7.5rem; height: 7.5rem; font-size: 3.25rem; }

/* En-tête : menu · recherche · profil */
.haut { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; background: var(--blanc); }
.haut__bouton { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--filet); border-radius: 50%; background: var(--blanc-pur); color: var(--cacao); cursor: pointer; }
.haut__bouton svg { width: 1.25rem; height: 1.25rem; }
.haut__profil { display: block; border-radius: 50%; text-decoration: none; }
.haut__replier, .haut__onglets { display: none; }
.haut__profil:focus-visible, .haut__bouton:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.recherche { display: flex; align-items: center; gap: 0.5rem; height: 2.75rem; padding: 0 1rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); transition: border-color .2s; }
.recherche:focus-within { border-color: var(--orange); }
.recherche svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--argile); }
.recherche input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 1rem; outline: none; }
.recherche input::placeholder { color: var(--argile); }
.recherche input::-webkit-search-cancel-button { display: none; }

/* Menu latéral, décollé des bords, sans barre de défilement visible */
.voile { position: fixed; inset: 0; z-index: 30; background: rgba(23, 19, 16, .5); opacity: 0; transition: opacity .3s; }
.menu-ouvert .voile { opacity: 1; }
.tiroir { position: fixed; z-index: 40; top: 3vw; bottom: 3vw; left: 3vw; display: flex; flex-direction: column; gap: 1.25rem; width: 78%; max-width: 21rem; padding: 1.25rem 1rem; border-radius: 1.75rem; background: var(--nuit); color: var(--blanc); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform: translateX(-110%); transition: transform .35s var(--mouvement); isolation: isolate; }
.tiroir::-webkit-scrollbar { display: none; }
.tiroir::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/img/motif-trait-blanc.svg") 0 0 / 35rem; opacity: .03; pointer-events: none; }
.menu-ouvert .tiroir { transform: none; }
.tiroir__tete { display: flex; align-items: center; gap: 0.5rem; min-height: 2.5rem; padding: 0 0.25rem; }
.tiroir__logo { width: 6rem; height: auto; }
.tiroir__symbole { display: none; width: 2rem; height: auto; }
.tiroir__fermer { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--argile); cursor: pointer; }
.tiroir__fermer svg { width: 1.125rem; height: 1.125rem; }
.tiroir__ecrire { display: flex; align-items: center; justify-content: center; gap: 0.625rem; flex: none; height: 3.25rem; padding: 0 1rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--cacao); font-size: 1rem; white-space: nowrap; cursor: pointer; transition: background-color .2s; }
.tiroir__ecrire:hover { background: var(--orange-ton); }
.tiroir__ecrire svg { flex: none; width: 1.125rem; height: 1.125rem; }
.tiroir__dossiers { display: grid; gap: 0.125rem; }
.tiroir__dossiers a { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border-radius: 0.875rem; color: var(--argile); text-decoration: none; font-size: 1rem; white-space: nowrap; }
.tiroir__dossiers a:hover { color: var(--blanc); }
.tiroir__dossiers a.est-actif { background: var(--surface); color: var(--blanc); }
.tiroir__dossiers a.est-actif svg { color: var(--orange); }
.tiroir__dossiers svg { flex: none; width: 1.25rem; height: 1.25rem; }
.tiroir__dossiers b { margin-left: auto; min-width: 1.5rem; padding: 0.1875rem 0.4375rem; border-radius: 999px; background: var(--orange); color: var(--cacao); font: 400 0.75rem/1 var(--petit); text-align: center; }
.tiroir__contacts { position: relative; margin-top: 0.875rem; }
.tiroir__contacts::before { content: ""; position: absolute; top: -0.5rem; left: 0.75rem; right: 0.75rem; border-top: 1px solid var(--bordure-sombre); }
.tiroir__sortir { margin: auto 0 0; }
.tiroir__sortir button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.875rem 0.75rem 0.25rem; border: 0; border-top: 1px solid var(--bordure-sombre); background: transparent; color: var(--argile); font-size: 1rem; white-space: nowrap; cursor: pointer; }
.tiroir__sortir svg { flex: none; width: 1.25rem; height: 1.25rem; }
.tiroir__sortir button:hover { color: var(--orange); }

/* Contenu */
.page { padding: 0.25rem 1rem calc(8rem + env(safe-area-inset-bottom)); }
.page > .note { margin-top: 0.5rem; }
.page--sans-barre { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.page__tete { margin: 0.5rem 0.25rem 1rem; }
.page__tete h1 { font-size: 1.875rem; line-height: 1.1; }
.page__compte { margin: 0.375rem 0 0; color: var(--taupe); font: 400 0.875rem/1.4 var(--petit); }
.page__compte b { font-weight: 400; color: var(--orange-profond); }
.page__compte a { color: var(--orange-profond); }

.liste { margin: 0; padding: 0; list-style: none; border: 1px solid var(--filet); border-radius: 1.25rem; background: var(--blanc-pur); overflow: hidden; }
.ligne { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem 1rem; }
.ligne + .ligne, li + li > .ligne { border-top: 1px solid var(--filet); }
.ligne--lien { color: inherit; text-decoration: none; transition: background-color .2s; }
.ligne__lettre { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--orange-pale); color: var(--orange-profond); font-size: 1.0625rem; position: relative; overflow: hidden; }
.ligne__lettre img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 22%; border: 1px solid var(--filet); border-radius: 50%; background: var(--blanc-pur); object-fit: contain; }
.ligne__lettre img.logo--plein { padding: 0; border: 0; }
.ligne__lettre--grand { width: 3rem; height: 3rem; font-size: 1.25rem; }
.ligne__corps { display: grid; gap: 0.125rem; flex: 1; min-width: 0; }
.ligne__haut { display: flex; align-items: baseline; gap: 0.5rem; }
.ligne__nom { flex: 1; min-width: 0; font-weight: 400; font-size: 1rem; color: var(--taupe); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne__date { flex: none; color: var(--argile); font: 400 0.75rem/1 var(--petit); }
.ligne__sujet { display: flex; align-items: center; gap: 0.25rem; min-width: 0; color: var(--argile); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne__etoile { flex: none; width: 0.875rem; height: 0.875rem; fill: var(--orange); stroke: var(--orange); }
.ligne--nouveau .ligne__lettre { background: var(--orange); color: var(--cacao); }
.ligne--nouveau .ligne__nom, .ligne--nouveau .ligne__sujet { color: var(--cacao); }
.ligne--nouveau .ligne__date { color: var(--orange-profond); }
.ligne--nouveau .ligne__nom::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin: 0 0.375rem 0.125rem 0; border-radius: 50%; background: var(--orange); vertical-align: middle; }

.pages { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 1.25rem 0 0; color: var(--taupe); font: 400 0.8125rem/1 var(--petit); }
.pages__bouton { padding: 0.625rem 1rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); color: var(--cacao); text-decoration: none; font: 400 0.875rem/1 var(--titre); }
.vide { display: grid; justify-items: center; gap: 0.75rem; padding: 3rem 1rem; color: var(--taupe); text-align: center; }
.vide svg { width: 3rem; height: 3rem; color: var(--argile); }
.vide p { margin: 0; }

/* Barre flottante du bas (téléphone) : un 8 couché, E-mail à gauche, Réunions à droite */
.flottante { position: fixed; z-index: 25; left: 50%; bottom: calc(4vw + env(safe-area-inset-bottom)); width: 54%; aspect-ratio: 200 / 80; transform: translateX(-50%); }
.flottante__fond { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.flottante__fond path { fill: var(--nuit); stroke: none; }
.flottante__lien { position: absolute; top: 0; bottom: 0; width: 39%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.1875rem; color: var(--argile); text-decoration: none; -webkit-tap-highlight-color: transparent; isolation: isolate; }
.flottante__lien--gauche { left: 0.5%; }
.flottante__lien--droite { right: 0.5%; }
.flottante__lien::before { content: ""; position: absolute; z-index: -1; width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); transform: scale(0); transition: transform .35s var(--mouvement); }
.flottante__lien svg { width: 1.375rem; height: 1.375rem; }
.flottante__lien span { font: 400 0.625rem/1 var(--petit); letter-spacing: .03em; white-space: nowrap; }
.flottante__lien.est-actif { color: var(--cacao); }
.flottante__lien.est-actif::before { transform: scale(1); }

/* Message bref en haut de l'écran */

/* Réunions */

/* Profil */
.profil-page { max-width: 36rem; margin: 0 auto; }
.profil { display: grid; justify-items: center; gap: 0.25rem; margin: 0.75rem 0 1.5rem; text-align: center; }
.profil__photo { position: relative; margin-bottom: 0.75rem; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.profil__photo:focus-visible { outline: 2px solid var(--orange); outline-offset: 0.25rem; }
.profil__changer { position: absolute; right: 0; bottom: 0.25rem; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0.1875rem solid var(--blanc); border-radius: 50%; background: var(--cacao); color: var(--blanc); }
.profil__changer svg { width: 1.125rem; height: 1.125rem; }
.profil h1 { font-size: 1.625rem; line-height: 1.15; }
.profil__role { margin: 0; color: var(--orange-profond); font: 400 0.8125rem/1.3 var(--petit); letter-spacing: .1em; text-transform: uppercase; }
.profil__adresse { margin: 0.125rem 0 0; color: var(--taupe); font: 400 0.875rem/1.3 var(--petit); }
.reglages { display: grid; border: 1px solid var(--filet); border-radius: 1.25rem; background: var(--blanc-pur); overflow: hidden; }
.reglage { display: flex; align-items: center; gap: 0.875rem; width: 100%; padding: 0.875rem 1rem; border: 0; background: transparent; color: var(--cacao); text-align: left; cursor: pointer; transition: background-color .2s; }
.reglage + .reglage { border-top: 1px solid var(--filet); }
.reglage:hover { background: var(--blanc); }
.reglage__icone { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%; background: var(--orange-pale); color: var(--orange-profond); }
.reglage__icone svg { width: 1.25rem; height: 1.25rem; }
.reglage__texte { display: grid; gap: 0.125rem; flex: 1; min-width: 0; }
.reglage__texte b { font-weight: 400; font-size: 1rem; }
.reglage__texte small { color: var(--taupe); font: 400 0.8125rem/1.3 var(--petit); }
.reglage__fleche { flex: none; width: 1.125rem; height: 1.125rem; color: var(--argile); }

/* Feuilles : en bas et décollées des bords sur téléphone, fenêtre au centre sur ordinateur. Ni trait ni croix. */
html.feuille-active { overflow: hidden; }
.feuille { position: fixed; inset: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.feuille[hidden] { display: none; }
.feuille__voile { position: absolute; inset: 0; background: rgba(23, 19, 16, .55); opacity: 0; transition: opacity .3s; }
.feuille__boite { position: relative; width: 94%; max-height: 88vh; max-height: 88dvh; margin-bottom: calc(3vw + env(safe-area-inset-bottom)); padding: 1.5rem 1.25rem 1rem; border-radius: 1.75rem; background: var(--blanc); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform: translateY(110%); transition: transform .4s var(--mouvement); }
.feuille__boite::-webkit-scrollbar { display: none; }
.feuille.est-ouverte .feuille__voile { opacity: 1; }
.feuille.est-ouverte .feuille__boite { transform: none; }
.feuille__boite h2 { font-size: 1.5rem; line-height: 1.15; }
.feuille__aide { margin: 0.375rem 0 1.25rem; color: var(--taupe); font-size: 0.9375rem; line-height: 1.45; }
.feuille__boite .note { margin-bottom: 1rem; }
.feuille__boite .champ { margin-bottom: 0.875rem; }
.feuille__note { margin: -0.25rem 0 0.75rem 0.25rem; color: var(--argile); font: 400 0.75rem/1.3 var(--petit); }
.feuille__action { width: 100%; margin-top: 0.25rem; padding: 0.875rem 1.25rem; font-size: 1rem; cursor: pointer; }
.feuille__lien { display: block; margin: 0.75rem auto 0; padding: 0.375rem 0.75rem; border: 0; background: none; color: var(--taupe); font: 400 0.875rem/1.4 var(--petit); text-decoration: underline; cursor: pointer; }
.feuille__fermer { display: block; width: 100%; margin-top: 0.75rem; padding: 0.8125rem; border: 1px solid var(--filet); border-radius: 999px; background: transparent; color: var(--cacao); font-size: 1rem; cursor: pointer; }
.feuille__fermer:hover { border-color: var(--argile); }

.photos-wintg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; margin: 0 0 1.25rem; }
.photos-wintg button { aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; transition: transform .2s var(--mouvement); }
.photos-wintg button:hover { transform: scale(1.04); }
.photos-wintg img { display: block; width: 100%; height: 100%; border-radius: 50%; border: 1px solid var(--filet); }
.photos-wintg .est-choisie { outline: 0.1875rem solid var(--orange); outline-offset: 0.1875rem; }

.interrupteur { display: flex; align-items: center; gap: 1rem; padding: 0.875rem 1rem; border: 1px solid var(--filet); border-radius: 1.125rem; background: var(--blanc-pur); cursor: pointer; }
.interrupteur > span { display: grid; gap: 0.125rem; flex: 1; }
.interrupteur b { font-weight: 400; font-size: 1rem; }
.interrupteur small { color: var(--taupe); font: 400 0.8125rem/1.3 var(--petit); }
.interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur i { position: relative; flex: none; width: 3.125rem; height: 1.875rem; border-radius: 999px; background: var(--filet); transition: background-color .25s; }
.interrupteur i::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--blanc-pur); transition: transform .25s var(--mouvement); }
.interrupteur input:checked + i { background: var(--orange); }
.interrupteur input:checked + i::after { transform: translateX(1.25rem); }
.interrupteur input:focus-visible + i { outline: 2px solid var(--orange); outline-offset: 2px; }

/* Signature e-mail */
.signature-apercu { margin: 0 0 1.25rem; padding: 1rem; border: 1px solid var(--filet); border-radius: 1.125rem; background: var(--blanc-pur); overflow: hidden; }
.signature-apercu table { width: max-content; transform-origin: 0 0; }
.signature-apercu td, .signature-apercu div { white-space: nowrap; }
.champ em.champ__suite { font-style: normal; color: var(--argile); letter-spacing: 0; }
.champ__titre { margin: 0.25rem 0 0.5rem 0.25rem; color: var(--taupe); font: 400 0.8125rem/1.2 var(--petit); letter-spacing: .04em; }
.choix-forme { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.875rem; }
.choix-forme label { cursor: pointer; }
.choix-forme input { position: absolute; opacity: 0; pointer-events: none; }
.choix-forme span { display: grid; gap: 0.125rem; height: 100%; padding: 0.75rem 0.875rem; border: 1.5px solid var(--filet); border-radius: 1rem; background: var(--blanc-pur); transition: border-color .2s, background-color .2s; }
.choix-forme b { font-weight: 400; font-size: 0.9375rem; }
.choix-forme small { color: var(--taupe); font: 400 0.75rem/1.3 var(--petit); }
.choix-forme input:checked + span { border-color: var(--orange); background: var(--orange-pale); }
.choix-forme input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.interrupteur--petit { margin-bottom: 1rem; padding: 0.75rem 0.875rem; }
.signature-outils { display: grid; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--filet); }
.outil { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); color: var(--cacao); text-decoration: none; font-size: 0.9375rem; cursor: pointer; }
.outil svg { width: 1.125rem; height: 1.125rem; }
.outil:hover { border-color: var(--argile); }
.outil--attente { color: var(--taupe); font: 400 0.8125rem/1.3 var(--petit); cursor: default; }


/* Lecture d'un message */
.bouton--danger { background: #B3261E; color: var(--blanc-pur); }
.bouton--danger:hover { background: #8E1D17; }
.rond { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--filet); border-radius: 50%; background: var(--blanc-pur); color: var(--cacao); text-decoration: none; cursor: pointer; transition: border-color .2s, color .2s; }
.rond svg { width: 1.25rem; height: 1.25rem; }
.rond:hover { border-color: var(--argile); }
.rond--danger { color: #B3261E; }
.rond--danger:hover { border-color: #B3261E; }
.pieces { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.piece { display: flex; align-items: center; gap: 0.625rem; max-width: 100%; padding: 0.625rem 0.875rem; border: 1px solid var(--filet); border-radius: 1rem; background: var(--blanc-pur); color: var(--cacao); text-decoration: none; }
.piece:hover { border-color: var(--argile); }
.piece svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--orange-profond); }
.piece span { display: grid; min-width: 0; }
.piece b { font-weight: 400; font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piece small { color: var(--argile); font: 400 0.75rem/1.2 var(--petit); }
.lecture__cadre { display: block; width: 100%; min-height: 10rem; border: 0; }
.lecture__texte { font-size: 0.9375rem; line-height: 1.6; overflow-wrap: anywhere; }
.lecture__texte a { color: var(--orange-profond); }
.lecture__vide { margin: 0; color: var(--argile); }


/* Glisser une ligne : corbeille à gauche, suppression à droite */
.glisse { position: relative; overflow: hidden; transition: height .3s var(--mouvement); }
li.glisse + li.glisse > .ligne { border-top: 1px solid var(--filet); }
.glisse > .ligne { position: relative; z-index: 1; background: var(--blanc-pur); touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .3s var(--mouvement); }
.glisse.est-glisse > .ligne { transition: none; }
.glisse__fond { position: absolute; inset: 0; display: none; align-items: center; gap: 0.5rem; padding: 0 1.5rem; color: var(--blanc-pur); font-size: 0.9375rem; }
.glisse__fond svg { width: 1.25rem; height: 1.25rem; transition: transform .2s; }
.glisse__fond--supprimer { justify-content: flex-start; background: #B3261E; }
.glisse__fond--corbeille { justify-content: flex-end; background: var(--orange); color: var(--cacao); }
.glisse.vers-droite .glisse__fond--supprimer, .glisse.vers-gauche .glisse__fond--corbeille { display: flex; }
.glisse.pret .glisse__fond svg { transform: scale(1.25); }
.glisse.est-parti { opacity: .6; }
.ligne__nombre { flex: none; padding: 0.0625rem 0.4375rem; border-radius: 999px; background: var(--filet); color: var(--taupe); font: 400 0.6875rem/1.4 var(--petit); }

/* Conversation */
.conversation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-top: 0.5rem; }
a.bouton, a.tiroir__ecrire { text-decoration: none; }
.courriel { border: 1px solid var(--filet); border-radius: 1.25rem; background: var(--blanc-pur); padding: 1rem; }
.courriel__tete { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; flex-wrap: wrap; }
.courriel__qui { display: grid; gap: 0.0625rem; flex: 1; min-width: 0; }
.courriel__qui b { font-weight: 400; font-size: 1.0625rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.courriel__adresse { color: var(--taupe); font: 400 0.8125rem/1.35 var(--petit); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.courriel__qui time { color: var(--argile); font: 400 0.75rem/1.35 var(--petit); }
.courriel__resume { flex-basis: 100%; min-width: 0; color: var(--taupe); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.courriel.est-ouvert .courriel__resume { display: none; }
.courriel__contenu { display: none; }
.courriel.est-ouvert .courriel__contenu { display: block; }
.courriel__sujet { margin: 1rem 0 0.25rem; font-size: 1.375rem; line-height: 1.25; overflow-wrap: anywhere; }
.courriel__a { margin: 0 0 1rem; color: var(--argile); font: 400 0.8125rem/1.4 var(--petit); overflow-wrap: anywhere; }
.courriel__corps { margin: 0 -0.25rem; }
.images { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; margin: 1rem 0 0; }
.images a { display: block; border-radius: 0.875rem; overflow: hidden; border: 1px solid var(--filet); background: var(--blanc); }
.images img { display: block; width: 100%; height: 8rem; object-fit: cover; }
.courriel .pieces { margin: 1rem 0 0; }
.actions-flottantes { position: sticky; z-index: 15; bottom: calc(4vw + env(safe-area-inset-bottom)); display: flex; justify-content: center; gap: 0.625rem; margin-top: 1.25rem; pointer-events: none; }
.actions-flottantes .bouton { width: auto; padding: 0.875rem 1.375rem; font-size: 1rem; pointer-events: auto; }
.actions-flottantes svg { width: 1.125rem; height: 1.125rem; }

/* Écrire */
.ecrire__tete { display: flex; align-items: center; gap: 0.625rem; margin: 0.5rem 0.25rem 1rem; }
.ecrire__tete h1 { flex: 1; min-width: 0; font-size: 1.375rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecrire__envoyer { width: auto; padding: 0.75rem 1.125rem; font-size: 1rem; }
.ecrire__envoyer svg { width: 1.125rem; height: 1.125rem; }
.letou-bouton { display: flex; align-items: center; gap: 0.4375rem; padding: 0.3125rem 0.875rem 0.3125rem 0.3125rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); color: var(--cacao); font-size: 0.9375rem; cursor: pointer; }
.letou-bouton img { width: 2rem; height: 2rem; }
.letou-bouton:hover { border-color: var(--orange); }
@media (max-width: 600px) { .letou-bouton { padding: 0.25rem; } .letou-bouton span { display: none; } }
.ecrire__carte { border: 1px solid var(--filet); border-radius: 1.25rem; background: var(--blanc-pur); }
.ecrire__ligne { position: relative; display: flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; padding: 0.375rem 1rem; border-bottom: 1px solid var(--filet); }
.ecrire__ligne.est-cache { display: none; }
.ecrire__ligne > span { flex: none; width: 3rem; color: var(--taupe); font: 400 0.8125rem/1 var(--petit); }
.ecrire__ligne > input { flex: 1; min-width: 0; height: 2.5rem; border: 0; background: transparent; font-size: 1rem; outline: none; }
.ecrire__cc { flex: none; padding: 0.25rem 0.5rem; border: 0; background: none; color: var(--taupe); font: 400 0.8125rem/1 var(--petit); cursor: pointer; }
.pastilles { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; flex: 1; min-width: 0; padding: 0.25rem 0; cursor: text; }
.pastilles__saisie { flex: 1; min-width: 8rem; height: 2rem; border: 0; background: transparent; font-size: 1rem; outline: none; }
.pastille-adresse { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; min-width: 0; padding: 0.25rem 0.25rem 0.25rem 0.625rem; border-radius: 999px; background: var(--orange-pale); color: var(--cacao); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pastille-adresse button { flex: none; }
.pastille-adresse button { display: grid; place-items: center; width: 1.375rem; height: 1.375rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--orange-profond); font-size: 1rem; line-height: 1; cursor: pointer; }
.pastille-adresse.est-fausse { background: #FBE6DF; color: #8A2A12; }
.suggestions { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin: 0.25rem 0 0; padding: 0.375rem; list-style: none; border: 1px solid var(--filet); border-radius: 1rem; background: var(--blanc-pur); }
.suggestions li { display: grid; padding: 0.5rem 0.75rem; border-radius: 0.75rem; cursor: pointer; }
.suggestions li.est-choisie, .suggestions li:hover { background: var(--blanc); }
.suggestions b { font-weight: 400; font-size: 0.9375rem; }
.suggestions small { color: var(--taupe); font: 400 0.75rem/1.3 var(--petit); }
.outils { display: flex; gap: 0.125rem; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--filet); overflow-x: auto; scrollbar-width: none; }
.outils::-webkit-scrollbar { display: none; }
.outils button { flex: none; display: grid; place-items: center; min-width: 2.25rem; height: 2.25rem; padding: 0 0.5rem; border: 0; border-radius: 0.625rem; background: transparent; color: var(--cacao); font: 400 0.9375rem/1 var(--titre); cursor: pointer; }
.outils button:hover { background: var(--blanc); }
.outils svg { width: 1.125rem; height: 1.125rem; }
.outils .outils__bouton { margin-left: auto; padding: 0 0.75rem; border-radius: 999px; background: var(--orange); color: var(--cacao); font-size: 0.8125rem; }
.editeur { min-height: 16rem; padding: 1rem; font: 400 1rem/1.6 var(--titre); color: var(--cacao); outline: none; overflow-wrap: anywhere; }
.editeur:empty::before { content: attr(data-placeholder); color: var(--argile); }
.editeur p { margin: 0 0 0.75rem; }
.editeur a { color: var(--orange-profond); }
.editeur a[data-bouton] { display: inline-block; padding: 0.625rem 1.5rem; border-radius: 999px; background: var(--orange); color: var(--cacao); text-decoration: none; }
.editeur blockquote { margin: 1rem 0 0; padding-left: 0.75rem; border-left: 2px solid var(--filet); color: var(--taupe); }
.pieces-ecrire { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0 1rem; }
.pieces-ecrire:not(:empty) { padding-bottom: 0.75rem; }
.piece-ecrire { display: inline-flex; align-items: center; gap: 0.5rem; max-width: 100%; padding: 0.375rem 0.375rem 0.375rem 0.75rem; border: 1px solid var(--filet); border-radius: 0.875rem; background: var(--blanc); font-size: 0.8125rem; }
.piece-ecrire b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.piece-ecrire small { color: var(--argile); font: 400 0.75rem/1 var(--petit); }
.piece-ecrire button { width: 1.5rem; height: 1.5rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--taupe); font-size: 1rem; cursor: pointer; }
.ecrire__options { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.875rem 1rem; border-top: 1px solid var(--filet); }
.mini-interrupteur { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer; }
.mini-interrupteur input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.mini-interrupteur i { position: relative; flex: none; width: 2.25rem; height: 1.375rem; border-radius: 999px; background: var(--filet); transition: background-color .2s; }
.mini-interrupteur i::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--blanc-pur); transition: transform .2s var(--mouvement); }
.mini-interrupteur input:checked + i { background: var(--orange); }
.mini-interrupteur input:checked + i::after { transform: translateX(0.875rem); }
.mini-interrupteur input:focus-visible + i { outline: 2px solid var(--orange); outline-offset: 2px; }
.ecrire__joindre { display: inline-flex; align-items: center; gap: 0.375rem; margin-left: auto; padding: 0.5rem 0.875rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); color: var(--orange-profond); font-size: 0.875rem; cursor: pointer; }
.ecrire__joindre svg { width: 1rem; height: 1rem; }
.ecrire__bas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; margin-top: 0.875rem; }
.ecrire__bas .outil { padding: 0.75rem 0.5rem; font-size: 0.875rem; }
.outil--danger { color: #B3261E; }
.letou-visage { width: 3rem; height: 3rem; }
.letou-visage.est-active { animation: letou 1.2s ease-in-out infinite; }
@keyframes letou { 50% { transform: scale(1.08) rotate(-4deg); } }
.raccourcis-heure { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.25rem 0 1rem; }
.raccourcis-heure button { padding: 0.4375rem 0.875rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); color: var(--cacao); font-size: 0.8125rem; cursor: pointer; }
.raccourcis-heure button:hover, .raccourcis-heure .est-choisi { border-color: var(--orange); background: var(--orange-pale); }
.date-heure { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.625rem; }
.date-heure input { width: 100%; padding: 0.75rem 0.875rem; border: 1px solid var(--filet); border-radius: 0.875rem; background: var(--blanc-pur); font-size: 1rem; color: var(--cacao); }
.feuille__boite--apercu { display: flex; flex-direction: column; }
.apercu-cadre { width: 100%; height: 62vh; border: 1px solid var(--filet); border-radius: 1rem; background: #FFF8EF; }

/* Lètou : une discussion, la barre de message en bas */
.ecrire__etat { flex: none; color: var(--argile); font: 400 0.75rem/1 var(--petit); }
.feuille__boite.letou { display: flex; flex-direction: column; height: 88vh; height: 88dvh; padding: 0; overflow: hidden; }
.letou__tete { display: flex; align-items: center; gap: 0.75rem; padding: 1rem 1.125rem; border-bottom: 1px solid var(--filet); }
.letou__tete h2 { font-size: 1.25rem; line-height: 1.1; }
.letou__tete p { margin: 0.125rem 0 0; color: var(--taupe); font: 400 0.75rem/1.2 var(--petit); }
.letou__fermer { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; margin-left: auto; padding: 0; border: 1px solid var(--filet); border-radius: 50%; background: var(--blanc-pur); color: var(--taupe); cursor: pointer; }
.letou__fermer svg { width: 1rem; height: 1rem; }
.letou-visage { flex: none; width: 2.5rem; height: 2.5rem; }
.letou__fil { flex: 1; display: flex; flex-direction: column; gap: 0.625rem; padding: 1rem 1.125rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.letou__fil::-webkit-scrollbar { display: none; }
.bulle { max-width: 86%; padding: 0.75rem 1rem; border-radius: 1.125rem; font-size: 0.9375rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; animation: monte .3s var(--mouvement) both; }
.bulle--letou { align-self: flex-start; border: 1px solid var(--filet); border-bottom-left-radius: 0.375rem; background: var(--blanc-pur); color: var(--cacao); }
.bulle--moi { align-self: flex-end; border-bottom-right-radius: 0.375rem; background: var(--nuit); color: var(--blanc); }
.bulle--erreur { border-color: #F2C3B5; background: #FBE6DF; color: #8A2A12; }
.bulle--attente { display: flex; gap: 0.3125rem; padding: 0.9375rem 1rem; }
.bulle--attente span { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--argile); animation: point 1s ease-in-out infinite; }
.bulle--attente span:nth-child(2) { animation-delay: .15s; }
.bulle--attente span:nth-child(3) { animation-delay: .3s; }
@keyframes point { 50% { transform: translateY(-0.25rem); background: var(--orange); } }
.bulle__carte { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.125rem 0.75rem; margin-top: 0.625rem; padding: 0.625rem 0.75rem; border-radius: 0.875rem; background: var(--orange-pale); white-space: normal; }
.bulle__carte b { font-weight: 400; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulle__carte small { grid-column: 1; color: var(--taupe); font: 400 0.75rem/1.2 var(--petit); }
.bulle__carte button { grid-column: 2; grid-row: 1 / 3; padding: 0.375rem 0.75rem; border: 1px solid var(--argile); border-radius: 999px; background: transparent; color: var(--cacao); font-size: 0.8125rem; cursor: pointer; }
.bulle__carte button:disabled { opacity: .5; cursor: default; }
.letou__bas { padding: 0.625rem 0.875rem calc(0.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--filet); background: var(--blanc); }
.letou__idees { display: flex; gap: 0.375rem; margin: 0 -0.875rem 0.5rem; padding: 0 0.875rem; overflow-x: auto; scrollbar-width: none; }
.letou__idees::-webkit-scrollbar { display: none; }
.letou__idees button { flex: none; padding: 0.375rem 0.75rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); color: var(--cacao); font-size: 0.8125rem; white-space: nowrap; cursor: pointer; }
.letou__idees button:hover { border-color: var(--orange); background: var(--orange-pale); }
.letou__saisie { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.3125rem 0.3125rem 0.3125rem 1rem; border: 1px solid var(--filet); border-radius: 1.5rem; background: var(--blanc-pur); transition: border-color .2s; }
.letou__saisie:focus-within { border-color: var(--orange); }
.letou__saisie textarea { flex: 1; min-width: 0; max-height: 10rem; padding: 0.5625rem 0; border: 0; background: transparent; font: 400 1rem/1.4 var(--titre); color: var(--cacao); resize: none; outline: none; }
.letou__saisie textarea::placeholder { color: var(--argile); }
.letou__envoyer { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--orange); color: var(--cacao); cursor: pointer; transition: background-color .2s, opacity .2s; }
.letou__envoyer:hover { background: var(--orange-ton); }
.letou__envoyer:disabled { opacity: .5; cursor: progress; }
.letou__envoyer svg { width: 1.125rem; height: 1.125rem; stroke-width: 2; }
.letou__note { margin: 0.375rem 0 0; color: var(--argile); font: 400 0.6875rem/1.2 var(--petit); text-align: center; }

/* Toasts : en haut, le glisser dans n'importe quel sens le fait disparaître */
.toast { position: fixed; z-index: 70; top: calc(0.75rem + env(safe-area-inset-top)); left: 50%; display: flex; align-items: center; gap: 0.625rem; width: max-content; max-width: min(92%, 30rem); margin: 0; padding: 0.625rem 0.75rem 0.625rem 0.625rem; border-radius: 1.25rem; background: var(--nuit); color: var(--blanc); font-size: 0.9375rem; line-height: 1.35; transform: translate(-50%, -160%); transition: transform .4s var(--mouvement); touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; }
.toast.est-visible { transform: translate(-50%, 0); }
.toast__icone { display: grid; place-items: center; flex: none; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: rgba(255, 248, 239, .12); color: var(--orange); }
.toast__icone svg { width: 1rem; height: 1rem; stroke-width: 2.2; }
.toast--succes .toast__icone { background: #2F6B4F; color: var(--blanc-pur); }
.toast--erreur .toast__icone { background: #B3261E; color: var(--blanc-pur); }
.toast__texte { flex: 1; min-width: 0; }
.toast__action { flex: none; padding: 0.375rem 0.875rem; border: 0; border-radius: 999px; background: var(--orange); color: var(--cacao); font-size: 0.875rem; cursor: pointer; }
.toast__action[hidden] { display: none; }

/* Sélection de plusieurs messages */
.ligne__choix { position: relative; flex: none; display: grid; border-radius: 50%; cursor: pointer; }
.ligne__coche { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; background: var(--orange); color: var(--cacao); transform: scale(0); transition: transform .2s var(--mouvement); }
.ligne__coche svg { width: 1.25rem; height: 1.25rem; stroke-width: 2.4; }
.glisse.est-choisi > .ligne { background: var(--orange-pale); }
.glisse.est-choisi .ligne__coche { transform: scale(1); }
.glisse.est-arrive > .ligne { animation: arrive 1.6s var(--mouvement); }
@keyframes arrive { 0% { background: var(--orange-pale); } 100% { background: var(--blanc-pur); } }
.ligne__dossier { flex: none; padding: 0.0625rem 0.4375rem; border-radius: 999px; background: var(--blanc); color: var(--taupe); font: 400 0.6875rem/1.4 var(--petit); }
.selection { position: fixed; z-index: 45; top: calc(0.5rem + env(safe-area-inset-top)); left: 3vw; right: 3vw; display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem; border-radius: 999px; background: var(--nuit); color: var(--blanc); animation: monte .25s var(--mouvement) both; }
.selection[hidden] { display: none; }
.selection__fermer { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--blanc); cursor: pointer; }
.selection__fermer svg { width: 1.125rem; height: 1.125rem; }
.selection__nombre { flex: 1; min-width: 1.5rem; font-weight: 400; font-size: 1.125rem; padding-left: 0.25rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selection__actions { display: flex; gap: 0.125rem; }
.selection__actions button { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--blanc); cursor: pointer; }
.selection__actions button:hover { background: var(--surface); }
.selection__actions svg { width: 1.25rem; height: 1.25rem; }
.selection__actions .selection__danger { color: #F2A08F; }

.notif-essai { width: 100%; margin-top: 0.75rem; }
.champ__zone { width: 100%; padding: 0.875rem 1rem; border: 1px solid var(--filet); border-radius: 0.875rem; background: var(--blanc-pur); font: 400 1rem/1.5 var(--titre); color: var(--cacao); resize: vertical; outline: none; }
.champ__zone:focus { border-color: var(--orange); }

/* Pages d'erreur */
.page-erreur { background: var(--nuit); }
.page-erreur::before { content: ""; position: fixed; inset: 0; background: url("/img/motif-trait-blanc.svg") 0 0 / 35rem; opacity: .03; pointer-events: none; }
.erreur { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.75rem; min-height: 100vh; min-height: 100dvh; padding: 1.5rem 4vw; }
.erreur__logo { width: 8.75rem; height: auto; }
.erreur__carte { width: min(100%, 30rem); padding: 2rem 1.5rem 1.5rem; border-radius: 1.75rem; background: var(--blanc); text-align: center; animation: monte .5s var(--mouvement) both; }
.erreur__code { margin: 0; font-size: 4.5rem; line-height: 1; color: var(--orange); letter-spacing: -.02em; }
.erreur h1 { margin-top: 0.75rem; font-size: 1.625rem; line-height: 1.2; }
.erreur__texte { margin: 0.625rem 0 1.5rem; color: var(--taupe); font-size: 0.9375rem; line-height: 1.5; }
.erreur__actions { display: grid; gap: 0.5rem; }
.erreur__actions .bouton { text-decoration: none; }
.erreur__retour { padding: 0.75rem; border: 1px solid var(--filet); border-radius: 999px; background: transparent; color: var(--cacao); font-size: 1rem; cursor: pointer; }
.erreur__pied { margin: 0; color: var(--taupe); font: 400 0.75rem/1 var(--petit); }

/* ---------- Réunions (Wintg Meet) ---------- */
.reunions-tete { display: grid; grid-template-columns: minmax(0, 1fr); overflow: hidden; gap: 1.25rem; margin-bottom: 1.75rem; padding: 1.5rem 1.25rem; border-radius: 1.75rem; background: var(--nuit); color: var(--blanc); }
.reunions-tete__texte { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.625rem; }
.reunions-tete__logo { width: 5.5rem; height: auto; }
.reunions-tete h2 { flex-basis: 100%; margin-top: 0.5rem; font-size: 1.5rem; line-height: 1.15; }
.reunions-tete__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; min-width: 0; }
.reunions-tete .bouton { min-width: 0; max-width: 100%; padding: 0.875rem 1.25rem; font-size: 1rem; }
.reunion > * { min-width: 0; }
.reunions-tete__erreur { margin: 0; color: #F2A08F; font: 400 0.875rem/1.3 var(--petit); }
.code-reunion { display: flex; align-items: center; min-width: 0; max-width: 100%; gap: 0.5rem; padding: 0.3125rem 0.3125rem 0.3125rem 1rem; border: 1px solid var(--bordure-sombre); border-radius: 999px; background: var(--surface); }
.code-reunion svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--argile); }
.code-reunion input { flex: 1; width: 0; min-width: 0; height: 2.5rem; border: 0; background: transparent; color: var(--blanc); font-size: 1rem; outline: none; }
.code-reunion input::placeholder { color: var(--argile); }
.code-reunion button { flex: none; padding: 0.625rem 1.125rem; border: 0; border-radius: 999px; background: var(--blanc); color: var(--cacao); font-size: 0.9375rem; cursor: pointer; }
.code-reunion button:hover { background: var(--orange-pale); }
.code-reunion:focus-within { border-color: var(--orange); }
.reunions-titre { margin: 0 0.25rem 0.75rem; font-size: 1.25rem; }
.reunion { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem 1rem; overflow: hidden; align-items: start; margin-bottom: 0.75rem; padding: 1rem; border: 1px solid var(--filet); border-radius: 1.375rem; background: var(--blanc-pur); }
.reunion.est-nouvelle { border-color: var(--orange); animation: arrive 2.4s var(--mouvement); }
.reunion__date { display: grid; place-items: center; width: 3.5rem; padding: 0.5rem 0; border-radius: 1rem; background: var(--blanc); text-align: center; }
.reunion__date b { font-weight: 400; font-size: 1.5rem; line-height: 1; }
.reunion__date span { color: var(--orange-profond); font: 400 0.75rem/1.2 var(--petit); text-transform: uppercase; letter-spacing: .08em; }
.est-en-cours .reunion__date { background: var(--nuit); color: var(--blanc); }
.est-en-cours .reunion__date span { color: var(--orange); }
.reunion__corps { min-width: 0; }
.reunion__corps h3 { margin: 0; font-weight: 400; font-size: 1.125rem; line-height: 1.25; overflow-wrap: anywhere; }
.reunion__quand { margin: 0.125rem 0 0; color: var(--cacao); font-size: 0.9375rem; }
.reunion__infos { display: flex; flex-wrap: wrap; gap: 0.25rem 0.375rem; margin: 0.5rem 0 0; color: var(--taupe); font: 400 0.75rem/1.3 var(--petit); }
.reunion__infos span { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1875rem 0.5rem; border-radius: 999px; background: var(--blanc); }
.reunion__infos img { width: 0.875rem; height: 0.875rem; }
.reunion__direct { background: #E3F1E8 !important; color: #2F6B4F; }
.reunion__direct::before { content: ""; width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: #2F6B4F; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .3; } }
.reunion__letou { background: var(--orange-pale) !important; color: var(--orange-profond); }
.reunion__code { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0.625rem 0 0; }
.reunion__code button { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; border: 1px dashed var(--filet); border-radius: 999px; background: transparent; color: var(--taupe); font: 400 0.8125rem/1 var(--petit); letter-spacing: .04em; cursor: pointer; }
.reunion__code button:hover { border-color: var(--argile); color: var(--cacao); }
.reunion__code svg { width: 0.9375rem; height: 0.9375rem; }
.reunion__code .reunion__supprimer, .reunion__code .reunion__modifier { padding: 0.375rem; border-style: solid; border-color: transparent; }
.reunion__code .reunion__modifier:hover { border-color: var(--argile); color: var(--cacao); }
.champ__deja { display: block; margin-top: 0.375rem; color: var(--taupe); font: 400 0.75rem/1.4 var(--petit); overflow-wrap: anywhere; }
.reunion__code .reunion__supprimer:hover { border-color: #F2C4B8; color: #B3261E; }
.reunion__rejoindre { grid-column: 1 / -1; display: flex; max-width: 100%; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.125rem; border-radius: 999px; background: var(--orange); color: var(--cacao); text-decoration: none; font-size: 0.9375rem; }
.reunion__rejoindre:hover { background: var(--orange-ton); }
.reunion__rejoindre svg { width: 1.125rem; height: 1.125rem; }
.reunion__rejoindre--calme { background: var(--blanc); color: var(--cacao); border: 1px solid var(--filet); }
.reunion__rejoindre--calme:hover { background: var(--orange-pale); }
.reunion--passee { opacity: .78; }
.reunion--passee .reunion__date { background: var(--blanc); }
.reunions-passees { margin-top: 1.5rem; }
.reunions-passees summary { display: flex; align-items: center; gap: 0.5rem; margin: 0 0.25rem 0.75rem; color: var(--taupe); font-size: 1rem; cursor: pointer; list-style: none; }
.reunions-passees summary::-webkit-details-marker { display: none; }
.reunions-passees summary::after { content: ""; width: 0.5rem; height: 0.5rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-0.125rem); transition: transform .2s; }
.reunions-passees[open] summary::after { transform: rotate(-135deg); }
.reunions-passees summary b { font-weight: 400; padding: 0 0.4375rem; border-radius: 999px; background: var(--filet); font-size: 0.8125rem; }
.vide--reunions { margin-bottom: 0.5rem; border: 1px dashed var(--filet); border-radius: 1.375rem; }
.choix-pastilles { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.choix-pastilles label { cursor: pointer; }
.choix-pastilles input { position: absolute; opacity: 0; pointer-events: none; }
.choix-pastilles span { display: block; padding: 0.5rem 0.75rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); font-size: 0.9375rem; }
.choix-pastilles input:checked + span { border-color: var(--nuit); background: var(--nuit); color: var(--blanc); }
.choix-pastilles input:focus-visible + span { outline: 2px solid var(--orange); outline-offset: 2px; }
.pastilles--cadre { padding: 0.375rem 0.625rem; border: 1px solid var(--filet); border-radius: 0.875rem; background: var(--blanc-pur); }
.pastilles--cadre:focus-within { border-color: var(--orange); }
.champ .pastilles--cadre .pastilles__saisie { width: auto; padding: 0 0.25rem; border: 0; background: transparent; }
.interrupteur--letou { gap: 0.75rem; }
.interrupteur__icone { flex: none; width: 2.25rem; height: 2.25rem; }
.depot { position: relative; display: flex; align-items: center; gap: 0.75rem; margin: -0.5rem 0 1rem; padding: 0.875rem 1rem; border: 1.5px dashed var(--argile); border-radius: 1.125rem; background: var(--blanc); cursor: pointer; }
.depot[hidden] { display: none; }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot svg { flex: none; width: 1.75rem; height: 1.75rem; color: var(--orange-profond); }
.depot span { display: grid; gap: 0.125rem; min-width: 0; }
.depot b { font-weight: 400; font-size: 0.9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot small { color: var(--taupe); font: 400 0.75rem/1.3 var(--petit); }
.depot.est-rempli { border-style: solid; border-color: var(--orange); background: var(--orange-pale); }

/* Programmés */
.programmes { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.programme { padding: 1rem; border: 1px solid var(--filet); border-radius: 1.25rem; background: var(--blanc-pur); }
.programme--echec { border-color: #F2C3B5; }
.programme__haut { display: flex; align-items: center; gap: 0.5rem; color: var(--orange-profond); font-size: 0.9375rem; }
.programme__haut svg { width: 1.125rem; height: 1.125rem; }
.programme__haut b { font-weight: 400; color: #B3261E; }
.programme__sujet { margin: 0.5rem 0 0.125rem; font-size: 1.0625rem; overflow-wrap: anywhere; }
.programme__a { margin: 0; color: var(--taupe); font: 400 0.8125rem/1.4 var(--petit); overflow-wrap: anywhere; }
.programme__erreur { margin: 0.5rem 0 0; color: #8A2A12; font-size: 0.8125rem; }
.programme__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.875rem; }
.programme__actions form { margin: 0; }
.programme__actions .outil { padding: 0.5rem 0.875rem; font-size: 0.8125rem; }

/* Bandeau des dossiers Spam et Corbeille */
.bandeau-dossier { display: flex; flex-wrap: wrap; align-items: center; gap: 0.625rem 0.875rem; margin: 0 0 1rem; padding: 0.875rem 1rem; border: 1px solid var(--filet); border-radius: 1.125rem; background: var(--blanc-pur); }
.bandeau-dossier > svg { flex: none; width: 1.25rem; height: 1.25rem; color: var(--orange-profond); }
.bandeau-dossier p { flex: 1; min-width: 12rem; margin: 0; color: var(--taupe); font-size: 0.875rem; line-height: 1.45; }
.bandeau-dossier--alerte { border-color: #F2C3B5; background: #FBE6DF; }
.bandeau-dossier--alerte p { color: #8A2A12; }
.bandeau-dossier--alerte > svg { color: #B3261E; }
.bandeau-dossier__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.875rem; }
.bandeau-dossier__actions form { margin: 0; }
.bandeau-dossier__bouton { padding: 0.5rem 1rem; border: 0; border-radius: 999px; background: var(--nuit); color: var(--blanc); font-size: 0.875rem; cursor: pointer; }
.bandeau-dossier__lien { padding: 0; border: 0; background: none; color: var(--cacao); font: 400 0.8125rem/1.3 var(--petit); text-decoration: underline; cursor: pointer; }
.bandeau-dossier__lien--danger { color: #B3261E; }
.glisse__fond--reception { background: #2F6B4F; color: var(--blanc-pur); }

/* Ordinateur : le même menu, toujours visible (repliable), et pas de barre du bas. */
@media (min-width: 901px) {
  .page-appli { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
  .tiroir { grid-column: 1; }
  .haut { grid-column: 2; grid-row: 1; }
  .page { grid-column: 2; grid-row: 2; }
  .tiroir { position: sticky; top: var(--bord); left: auto; bottom: auto; grid-row: 1 / 3; width: 17.5rem; max-width: none; height: calc(100vh - 2 * var(--bord)); margin: var(--bord) 0 var(--bord) var(--bord); transform: none; transition: width .3s var(--mouvement), padding .3s var(--mouvement); overflow-x: hidden; }
  .tiroir__fermer, .haut__menu, .voile, .flottante { display: none !important; }
  .haut { grid-template-columns: 2.75rem minmax(0, 1fr) auto 2.75rem; gap: 0.875rem; padding: 1.25rem 2rem 0.75rem; }
  .haut__replier { display: grid; }
  .haut__fleche { transition: transform .3s var(--mouvement); transform-box: fill-box; transform-origin: center; }
  .haut__onglets { grid-column: 3; display: flex; gap: 0.25rem; padding: 0.25rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); }
  .haut__onglets a { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1.125rem; border-radius: 999px; color: var(--taupe); text-decoration: none; font-size: 0.9375rem; transition: background-color .2s, color .2s; }
  .haut__onglets a:hover { color: var(--cacao); }
  .haut__onglets a.est-actif { background: var(--nuit); color: var(--blanc); }
  .haut__onglets a.est-actif svg { color: var(--orange); }
  .haut__onglets svg { width: 1.125rem; height: 1.125rem; }
  .haut__profil { grid-column: 4; }
  .page { width: 100%; padding: 0.5rem 2rem 3rem; }
  .reunions-tete { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; padding: 2.25rem 2.5rem; }
  .reunions-tete h2 { font-size: 1.875rem; }
  .reunion { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; padding: 1.125rem 1.25rem; }
  .reunion__rejoindre { grid-column: 3; }
  .feuille { align-items: center; }
  .feuille__boite { width: 30rem; margin: 0; padding: 2rem 2rem 1.5rem; transform: translateY(1rem) scale(.97); opacity: 0; transition: transform .3s var(--mouvement), opacity .3s; }
  .feuille.est-ouverte .feuille__boite { transform: none; opacity: 1; }
  .feuille__boite--large { width: 34rem; }
  /* Lètou : panneau collé à droite (décollé des bords), la page reste utilisable à côté */
  .feuille--cote { inset: var(--bord) var(--bord) var(--bord) auto; width: 26rem; align-items: stretch; pointer-events: none; }
  .feuille--cote .feuille__voile { display: none; }
  .feuille--cote .feuille__boite { display: flex; flex-direction: column; width: 100%; height: 100%; max-height: none; padding: 1.5rem 1.375rem; border: 1px solid var(--filet); opacity: 1; transform: translateX(calc(100% + 2rem)); pointer-events: auto; transition: transform .35s var(--mouvement); }
  .feuille--cote.est-ouverte .feuille__boite { transform: none; }
  .selection { left: calc(17.5rem + 2 * var(--bord) + 1rem); right: 2rem; }
  .tiroir-replie .selection { left: calc(5rem + 2 * var(--bord) + 1rem); }
  .panneau-ouvert .page, .panneau-ouvert .haut { padding-right: calc(26rem + 2 * var(--bord) + 1rem); }
  .feuille--cote .feuille__boite.letou { height: 100%; padding: 0; }
  .courriel { padding: 1.25rem 1.5rem; }
  .courriel__sujet { font-size: 1.75rem; }
  .ligne--lien:hover { background: var(--blanc); }

  /* Menu replié : une colonne d'icônes */
  .tiroir-replie .tiroir { width: 5rem; padding-left: 0.75rem; padding-right: 0.75rem; }
  .tiroir-replie .tiroir__logo, .tiroir-replie .tiroir .puce, .tiroir-replie .tiroir__dossiers span, .tiroir-replie .tiroir__ecrire span, .tiroir-replie .tiroir__sortir span { display: none; }
  .tiroir-replie .tiroir__tete { justify-content: center; padding: 0; }
  .tiroir-replie .tiroir__symbole { display: block; }
  .tiroir-replie .tiroir__ecrire { width: 3.25rem; padding: 0; align-self: center; }
  .tiroir-replie .tiroir__dossiers a { position: relative; justify-content: center; padding: 0.75rem 0; }
  .tiroir-replie .tiroir__dossiers b { position: absolute; top: 0.3125rem; right: 0.375rem; min-width: 0; width: 0.625rem; height: 0.625rem; padding: 0; font-size: 0; }
  .tiroir-replie .tiroir__sortir button { justify-content: center; padding-left: 0; padding-right: 0; }
  .tiroir-replie .haut__fleche { transform: scaleX(-1); }
}

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.infos-lecture { display: grid; grid-template-columns: auto 1fr; gap: 0.625rem 1rem; margin: 0 0 1.25rem; }
.infos-lecture dt { color: var(--taupe); font-size: 0.875rem; } .infos-lecture dd { margin: 0; overflow-wrap: anywhere; }

/* Glisser à droite hors corbeille / spam : lu ou non lu (plus de suppression définitive). */
.glisse__fond--lu { background: var(--nuit, #171310); color: var(--blanc-pur, #fff); }

/* La présentation vidéo de Lètou, sur la carte de la réunion */
.interrupteur--video { margin-top: -0.25rem; }
.reunion__video { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem 0.625rem; margin-top: 0.625rem; padding: 0.5rem 0.75rem; border-radius: 0.875rem; background: var(--blanc); color: var(--taupe); font: 400 0.8125rem/1.35 var(--petit); }
.reunion__video svg { flex: none; width: 1.125rem; height: 1.125rem; color: var(--orange-profond); }
.reunion__video span { flex: 1 1 12rem; min-width: 0; }
.reunion__video b { font-weight: 400; color: var(--cacao); }
.reunion__video form { margin: 0; }
.reunion__video a, .reunion__video button { padding: 0.3125rem 0.75rem; border: 1px solid var(--filet); border-radius: 999px; background: var(--blanc-pur); color: var(--cacao); font: inherit; text-decoration: none; cursor: pointer; }
.reunion__video a:hover, .reunion__video button:hover { border-color: var(--argile); }
.reunion__video--prete { background: #E3F1E8; } .reunion__video--prete svg { color: #2F6B4F; }
.reunion__video--en_cours span b::after, .reunion__video--attente span b::after { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; margin-left: 0.375rem; border-radius: 50%; background: var(--orange); animation: video-pulse 1.2s ease-in-out infinite; }
@keyframes video-pulse { 50% { opacity: .25; } }
.reunion__video--erreur { background: #FBE3DC; }
.reunion__video-note { display: block; color: var(--taupe); font-size: 0.75rem; }
.choix-video { display: grid; gap: 0.5rem; margin: -0.25rem 0 0; padding: 0; border: 0; min-width: 0; }
.choix-video[hidden] { display: none; }
.choix-video legend { margin-bottom: 0.375rem; padding: 0; color: var(--taupe); font: 400 0.8125rem/1.3 var(--petit); }
.choix-video label { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0.875rem; border: 1px solid var(--filet); border-radius: 1rem; background: var(--blanc-pur); cursor: pointer; }
.choix-video label:has(input:checked) { border-color: var(--orange); background: var(--orange-pale); }
.choix-video input { flex: none; width: 1.125rem; height: 1.125rem; margin: 0.125rem 0 0; accent-color: var(--orange-profond); }
.choix-video span { display: grid; gap: 0.125rem; }
.choix-video b { font-weight: 400; color: var(--cacao); }
.choix-video small { color: var(--taupe); font: 400 0.8125rem/1.4 var(--petit); }