/* Wintg Mail (mail.wintg.org) - même design que le panneau wintg.org : sombre, monochrome (noir, gris, blanc), police Geist.
   Toutes les tailles en rem : 1 rem suit la largeur de l'écran (téléphone 4,4vw, tablette 1,92vw, ordinateur 1,111vw). */
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/geist.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("/fonts/geist-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 500; font-display: swap; src: url("/fonts/geist-mono.woff2") format("woff2"); }

:root {
  --fond: #0a0a0a; --surface: #111111; --carte: #151515; --carte-2: #1b1b1b; --bord: #232323; --bord-fort: #333333;
  --texte: #f3f3f3; --gris: #9a9a9a; --gris-2: #626262; --vert: #4ade80; --rouge: #f87171; --rouge-fond: #241010; --rouge-bord: #5a2525;
  --police: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, monospace;
  --mouvement: cubic-bezier(.2, .8, .2, 1);
  --rail: 4.25rem;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 4.4vw; -webkit-text-size-adjust: 100%; background: var(--fond); }
@media (min-width: 768px) { html { font-size: 1.92vw; } }
@media (min-width: 1024px) { html { font-size: 1.111vw; } }
body { margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte); font: 400 0.9rem/1.55 var(--police); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: inherit; }
h1, h2, h3 { font-weight: 600; margin: 0; letter-spacing: -.015em; }
button, input, textarea { font: inherit; color: inherit; }
svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.hi { flex: none; }
::selection { background: #fff; color: #000; }

.etiquette { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1rem; font: 500 0.7rem/1.3 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--gris); }
.surligne { background: #fff; color: #000; padding: 0 .12em; border-radius: .15em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Boutons, champs, notes ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; width: 100%; height: 3rem; padding: 0 1.25rem; border: 1px solid #fff; border-radius: 0.75rem; background: #fff; color: #000; font-size: 0.92rem; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--mouvement); }
.bouton svg { width: 1.1rem; height: 1.1rem; transition: transform .25s var(--mouvement); }
.bouton:hover { background: #e5e5e5; border-color: #e5e5e5; }
.bouton:hover svg { transform: translateX(0.15rem); }
.bouton:active { transform: scale(.985); }
.bouton:focus-visible, .champ input:focus-visible, .champ__voir:focus-visible { outline: 0.125rem solid #fff; outline-offset: 0.1875rem; }
.bouton--attente { opacity: .8; cursor: progress; }
.bouton--attente svg { animation: va-vient .8s ease-in-out infinite alternate; }
@keyframes va-vient { to { transform: translateX(0.3rem); } }
.bouton:disabled:not(.bouton--attente) { opacity: .5; cursor: not-allowed; }
.bouton--sombre, .bouton--cacao { border-color: var(--bord-fort); background: var(--carte-2); color: var(--texte); font-weight: 500; }
.bouton--sombre:hover, .bouton--cacao:hover { border-color: #444; background: #222; }
.bouton--contour-clair { border-color: var(--bord-fort); background: transparent; color: var(--texte); font-weight: 500; }
.bouton--contour-clair:hover { background: var(--carte-2); border-color: #444; }
.bouton--danger { border-color: var(--rouge-bord); background: var(--rouge-fond); color: #fecaca; font-weight: 500; }
.bouton--danger:hover { border-color: var(--rouge); background: #2e1212; }

.champ { display: grid; gap: 0.45rem; margin-bottom: 1rem; }
.champ > span:first-child { font-size: 0.78rem; color: var(--gris); }
.champ input { width: 100%; height: 2.75rem; padding: 0 0.9rem; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte); font-size: 0.92rem; transition: border-color .2s; }
.champ input::placeholder { color: var(--gris-2); }
.champ input:hover { border-color: var(--bord-fort); }
.champ input:focus { border-color: rgba(255, 255, 255, .35); outline: none; }
.champ__mdp { position: relative; display: block; }
.champ__mdp input { padding-right: 3rem; }
.champ__voir { position: absolute; right: 0.35rem; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 0; border-radius: 0.5rem; background: transparent; color: var(--gris); cursor: pointer; }
.champ__voir:hover { color: var(--texte); }
.champ__voir span { display: grid; place-items: center; }
.champ__voir span[hidden] { display: none; }
.champ__voir svg { width: 1.15rem; height: 1.15rem; }
.champ__voir--actif { color: var(--texte); }

.note { margin: 0 0 1rem; padding: 0.7rem 0.9rem; border: 1px solid var(--bord); border-radius: 0.75rem; background: var(--carte); font-size: 0.84rem; line-height: 1.45; }
.note--erreur { border-color: var(--rouge-bord); background: var(--rouge-fond); color: #fecaca; }
.note--ok { color: var(--texte); }

/* ---------- Connexion (comme celle du panneau : grille de cases à gauche, formulaire à droite) ---------- */
.page-connexion { background: var(--fond); }
.connexion { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 0.75rem; min-height: 100vh; padding: 0.75rem; }
.connexion__marque { position: relative; overflow: hidden; border: 1px solid var(--bord); border-radius: 1rem; background: var(--surface); }
.grille { position: absolute; inset: 1.5rem; display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); align-content: start; gap: 0.35rem; overflow: hidden; }
.case { aspect-ratio: 1; border-radius: 0.18rem; background: #1a1a1a; transition: background-color 1.2s ease; }
.case.n1 { background: #262626; } .case.n2 { background: #555; } .case.n3 { background: #b9b9b9; } .case.n4 { background: #f4f4f4; }
.case.raye { background: repeating-linear-gradient(135deg, #4a4a4a 0 0.1rem, #1a1a1a 0.1rem 0.28rem); }
.connexion__bas { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 1rem; padding: 8rem 2rem 2rem; background: linear-gradient(to top, var(--surface) 45%, transparent); }
.connexion__bas img { width: auto; height: 3rem; align-self: flex-start; }
.connexion__bas p { margin: 0; font: 500 0.7rem/1.4 var(--mono); letter-spacing: .2em; color: var(--gris); }
.connexion__formulaire { position: relative; display: flex; align-items: center; justify-content: center; }
.carte-connexion { width: 24rem; max-width: 100%; }
.carte-connexion__tete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem; }
.carte-connexion__tete img { width: auto; height: 1.75rem; }
.pastille-secu { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.25rem 0.75rem; border: 1px solid var(--bord); border-radius: 999px; color: var(--gris); font-size: 0.72rem; }
.pastille-secu svg { width: 0.95rem; height: 0.95rem; }
.carte-connexion h1 { font-size: 2.1rem; line-height: 1.15; }
.carte-connexion__aide { margin: 0.5rem 0 2rem; color: var(--gris); font-size: 0.9rem; }
.champ-ligne { position: relative; margin-bottom: 1.25rem; }
.champ-ligne input { display: block; width: 100%; height: 3.5rem; padding: 1rem 2.5rem 0 2rem; border: 0; border-bottom: 1px solid var(--bord-fort); border-radius: 0; background: transparent; font-size: 0.98rem; color: var(--texte); outline: none; transition: border-color .2s; }
.champ-ligne::after { content: ""; position: absolute; left: 0; bottom: 0; height: 0.0625rem; width: 0; background: #fff; transition: width .35s ease; }
.champ-ligne:focus-within::after { width: 100%; }
.champ-ligne.faux input { border-bottom-color: rgba(248, 113, 113, .8); }
.champ-ligne.faux::after { background: var(--rouge); }
.champ-ligne label { position: absolute; top: 1.85rem; left: 2rem; transform: translateY(-50%); color: var(--gris); font-size: 0.92rem; pointer-events: none; transition: all .2s; }
.champ-ligne input:focus + label, .champ-ligne input:not(:placeholder-shown) + label { top: 0.75rem; font-size: 0.7rem; letter-spacing: .03em; }
.champ-ligne .icone-champ { position: absolute; left: 0; bottom: 0.9rem; width: 1.25rem; height: 1.25rem; color: var(--gris-2); pointer-events: none; transition: color .2s; }
.champ-ligne:focus-within .icone-champ { color: var(--texte); }
.champ-ligne .champ__voir { top: auto; bottom: 0.5rem; right: 0; transform: none; }
.carte-connexion .bouton { margin-top: 1.5rem; }
.carte-connexion__pied { margin: 1.25rem 0 0; color: var(--gris-2); font-size: 0.78rem; text-align: center; }
.carte-connexion__pied a { color: var(--gris); }
.connexion__legal { position: absolute; bottom: 1.5rem; margin: 0; color: var(--gris-2); font-size: 0.72rem; }

/* Téléphone et tablette : la grille en haut, le formulaire dans une feuille en bas, page figée */
@media (max-width: 1023px) {
  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; }
  .connexion { display: flex; flex-direction: column; gap: 0; height: 100%; min-height: 0; padding: 0; }
  .connexion__marque { flex: 1; min-height: 0; border: 0; border-radius: 0; background: var(--fond); }
  .grille { inset: 4vw; grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .connexion__bas { padding: 6rem 1.25rem 1.25rem; background: linear-gradient(to top, var(--fond) 40%, transparent); }
  .connexion__bas img { height: 2.25rem; }
  .connexion__bas p { font-size: 0.6rem; letter-spacing: .14em; }
  .connexion__formulaire { display: block; width: 94%; margin: 0 auto calc(3vw + env(safe-area-inset-bottom)); padding: 1.25rem 1.25rem 1rem; border: 1px solid var(--bord); border-radius: 1.25rem; background: var(--surface); animation: feuille .5s var(--mouvement) both; }
  .carte-connexion { width: 100%; }
  .carte-connexion__tete { margin-bottom: 1rem; }
  .carte-connexion h1 { font-size: 1.5rem; }
  .carte-connexion__aide { display: none; }
  .champ-ligne { margin-bottom: 0.75rem; }
  .carte-connexion .bouton { margin-top: 1rem; }
  .carte-connexion__pied { margin-top: 0.75rem; font-size: 0.7rem; }
  .connexion__legal { display: none; }
}
@media (max-width: 1023px) and (max-height: 520px) { .connexion__marque { display: none; } .connexion { justify-content: flex-end; } }
@keyframes feuille { from { transform: translateY(110%); } }
@keyframes monte { from { opacity: 0; transform: translateY(0.75rem); } }

/* ---------- Espace connecté ---------- */
.page-appli { background: var(--fond); }
.puce { display: inline-block; padding: 0.2rem 0.55rem; border: 1px solid var(--bord); border-radius: 999px; color: var(--gris); font: 500 0.66rem/1 var(--mono); letter-spacing: .08em; }
.puce--claire { color: var(--texte); }

.avatar { display: block; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; object-fit: cover; }
.avatar--lettre { display: grid; place-items: center; background: var(--carte-2); border: 1px solid var(--bord-fort); color: var(--texte); font: 600 0.95rem/1 var(--police); }
.avatar--grand { width: 6.5rem; height: 6.5rem; font-size: 2.6rem; }
.avatar--petit { width: 1.9rem; height: 1.9rem; font-size: 0.8rem; }

/* En-tête : téléphone = menu · recherche · compte ; ordinateur = fil · recherche · Écrire · compte */
.haut { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 0.6rem; height: 3.75rem; padding: 0 0.9rem; border-bottom: 1px solid var(--bord); background: rgba(10, 10, 10, .85); -webkit-backdrop-filter: blur(0.75rem); backdrop-filter: blur(0.75rem); }
.haut__bouton { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte); color: var(--texte); cursor: pointer; }
.haut__bouton svg { width: 1.2rem; height: 1.2rem; }
.haut__fil, .haut__ecrire { display: none; }
.haut__fil { align-items: center; gap: 0.5rem; font-size: 0.85rem; white-space: nowrap; }
.haut__fil span:first-child { color: var(--gris); }
.haut__fil svg { width: 0.875rem; height: 0.875rem; color: var(--gris-2); }
.recherche { display: flex; align-items: center; gap: 0.5rem; flex: 1; min-width: 0; height: 2.5rem; padding: 0 0.75rem; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte); transition: border-color .2s; }
.recherche:focus-within { border-color: rgba(255, 255, 255, .3); }
.recherche svg { flex: none; width: 1rem; height: 1rem; color: var(--gris); }
.recherche input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 0.86rem; outline: none; }
.recherche input::placeholder { color: var(--gris-2); }
.recherche input::-webkit-search-cancel-button { display: none; }
.recherche kbd { display: none; flex: none; padding: 0 0.35rem; border: 1px solid var(--bord); border-radius: 0.25rem; color: var(--gris-2); font: 500 0.62rem/1.5 var(--mono); }

/* Le compte (rond en haut à droite) : la liste des comptes connectés, en ajouter un, passer de l'un à l'autre */
.compte { position: relative; flex: none; }
.haut__profil { display: block; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.haut__profil:focus-visible, .haut__bouton:focus-visible { outline: 0.125rem solid #fff; outline-offset: 0.125rem; }
.comptes { position: absolute; z-index: 60; top: calc(100% + 0.6rem); right: 0; width: 20rem; padding: 0.5rem; border: 1px solid var(--bord); border-radius: 0.9rem; background: var(--surface); box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, .55); animation: monte .15s var(--mouvement) both; }
.comptes[hidden] { display: none; }
.comptes__titre { margin: 0; padding: 0.35rem 0.5rem 0.6rem; color: var(--gris); font: 500 0.66rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.comptes form { margin: 0; }
.comptes__ligne { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.5rem; border: 0; border-radius: 0.6rem; background: transparent; color: var(--texte); text-align: left; text-decoration: none; font-size: 0.84rem; cursor: pointer; transition: background-color .15s; }
.comptes__ligne:hover { background: var(--carte-2); }
.comptes__ligne.est-actif { background: var(--carte-2); }
.comptes__adresse { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.comptes__ligne small { display: block; color: var(--gris); font-size: 0.7rem; }
.comptes__ligne > svg { width: 1.1rem; height: 1.1rem; color: var(--gris); }
.comptes__ligne.est-actif > svg { color: var(--texte); }
.comptes__icone { display: grid; place-items: center; flex: none; width: 1.9rem; height: 1.9rem; border: 1px dashed var(--bord-fort); border-radius: 50%; color: var(--gris); }
.comptes__icone svg { width: 1rem; height: 1rem; }
.comptes__trait { height: 1px; margin: 0.4rem 0.25rem; background: var(--bord); }
.comptes__ligne--sortir { color: var(--gris); }
.comptes__ligne--sortir:hover { color: var(--texte); }

/* Menu : téléphone = tiroir qui glisse depuis la gauche ; ordinateur = barre d'icônes comme le panneau */
.voile { position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .6); 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: 1rem; width: 78%; max-width: 21rem; padding: 1rem 0.75rem; border: 1px solid var(--bord); border-radius: 1.1rem; background: var(--surface); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; transform: translateX(-110%); transition: transform .35s var(--mouvement); }
.tiroir::-webkit-scrollbar { display: none; }
.menu-ouvert .tiroir { transform: none; }
.tiroir__tete { display: flex; align-items: center; gap: 0.6rem; min-height: 2.5rem; padding: 0 0.25rem; }
.tiroir__marque { display: grid; place-items: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: 0.5rem; background: #fff; }
.tiroir__marque img { width: 1.25rem; height: auto; filter: invert(1); }
.tiroir__nom { font-weight: 600; font-size: 0.95rem; }
.tiroir__fermer { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; margin-left: auto; padding: 0; border: 1px solid var(--bord); border-radius: 0.6rem; background: var(--carte); color: var(--gris); cursor: pointer; }
.tiroir__fermer svg { width: 1.1rem; height: 1.1rem; }
.tiroir__ecrire { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.5rem; flex: none; height: 2.9rem; padding: 0 1rem; border-radius: 0.75rem; background: #fff; color: #000; font-size: 0.9rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color .2s; }
.tiroir__ecrire:hover { background: #e5e5e5; }
.tiroir__ecrire svg { width: 1.15rem; height: 1.15rem; }
.tiroir__dossiers { display: grid; gap: 0.15rem; }
.tiroir__dossiers a, .tiroir__lien { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.75rem; border-radius: 0.65rem; color: var(--gris); text-decoration: none; font-size: 0.92rem; white-space: nowrap; transition: background-color .15s, color .15s; }
.tiroir__dossiers a:hover, .tiroir__lien:hover { background: var(--carte); color: var(--texte); }
.tiroir__dossiers a.est-actif, .tiroir__lien.est-actif { background: var(--carte-2); color: #fff; box-shadow: inset 0 0 0 1px var(--bord); }
.tiroir__dossiers svg, .tiroir__lien svg { flex: none; width: 1.25rem; height: 1.25rem; }
.tiroir__dossiers b { margin-left: auto; min-width: 1.4rem; padding: 0.15rem 0.4rem; border-radius: 999px; background: #fff; color: #000; font: 600 0.68rem/1 var(--police); text-align: center; }
.tiroir__contacts { margin-top: 0.75rem; }
.tiroir__contacts::before { content: ""; position: absolute; top: -0.45rem; left: 0.75rem; right: 0.75rem; border-top: 1px solid var(--bord); }
.tiroir__bas { display: grid; gap: 0.15rem; margin-top: auto; padding-top: 0.75rem; border-top: 1px solid var(--bord); }
.tiroir__sortir { margin: 0; }
.tiroir__sortir button { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.7rem 0.75rem; border: 0; border-radius: 0.65rem; background: transparent; color: var(--gris); font-size: 0.92rem; white-space: nowrap; cursor: pointer; }
.tiroir__sortir svg { flex: none; width: 1.25rem; height: 1.25rem; }
.tiroir__sortir button:hover { background: var(--carte); color: var(--texte); }

/* Contenu */
.page { padding: 1rem 0.9rem calc(8rem + env(safe-area-inset-bottom)); }
.page > .note { margin-top: 0.25rem; }
.page--sans-barre { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.page__tete { margin: 0.25rem 0.1rem 1rem; }
.page__tete h1 { font-size: 1.55rem; line-height: 1.15; }
.page__compte { margin: 0.35rem 0 0; color: var(--gris); font-size: 0.82rem; }
.page__compte b { font-weight: 500; color: var(--texte); }
.page__compte a { color: var(--texte); }

.liste { margin: 0; padding: 0; list-style: none; border: 1px solid var(--bord); border-radius: 0.9rem; background: var(--surface); overflow: hidden; }
.ligne { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; }
.ligne + .ligne, li + li > .ligne { border-top: 1px solid var(--bord); }
.ligne--lien { color: inherit; text-decoration: none; transition: background-color .15s; }
.ligne__lettre { position: relative; display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border: 1px solid var(--bord); border-radius: 50%; background: var(--carte-2); color: var(--gris); font-size: 0.95rem; font-weight: 500; overflow: hidden; }
.ligne__lettre img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 22%; border-radius: 50%; background: #fff; object-fit: contain; }
.ligne__lettre img.logo--plein { padding: 0; }
.ligne__lettre--grand { width: 2.9rem; height: 2.9rem; font-size: 1.1rem; }
.ligne__corps { display: grid; gap: 0.1rem; 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: 0.92rem; color: var(--gris); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne__date { flex: none; color: var(--gris-2); font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.ligne__sujet { display: flex; align-items: center; gap: 0.25rem; min-width: 0; color: var(--gris-2); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ligne__etoile { flex: none; width: 0.85rem; height: 0.85rem; fill: #fff; stroke: #fff; }
.ligne--nouveau .ligne__lettre { border-color: #fff; background: #fff; color: #000; }
.ligne--nouveau .ligne__nom { color: var(--texte); font-weight: 600; }
.ligne--nouveau .ligne__sujet { color: var(--texte); }
.ligne--nouveau .ligne__date { color: var(--texte); }
.ligne--nouveau .ligne__nom::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin: 0 0.4rem 0.1rem 0; border-radius: 50%; background: #fff; vertical-align: middle; }

.pages { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin: 1.25rem 0 0; color: var(--gris); font-size: 0.8rem; }
.pages__bouton { display: inline-flex; align-items: center; height: 2.25rem; padding: 0 0.9rem; border: 1px solid var(--bord-fort); border-radius: 0.6rem; background: var(--carte-2); color: var(--texte); text-decoration: none; font-size: 0.82rem; }
.pages__bouton:hover { background: #222; }
.vide { display: grid; justify-items: center; gap: 0.75rem; padding: 3rem 1rem; color: var(--gris); text-align: center; }
.vide svg { width: 2.75rem; height: 2.75rem; color: var(--gris-2); }
.vide p { margin: 0; }

/* Barre flottante du bas (téléphone) : un 8 couché, E-mail à gauche, Contacts à 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(--surface); stroke: var(--bord-fort); stroke-width: 0.6; }
.flottante__lien { position: absolute; top: 0; bottom: 0; width: 39%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; color: var(--gris); 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: #fff; transform: scale(0); transition: transform .35s var(--mouvement); }
.flottante__lien svg { width: 1.3rem; height: 1.3rem; }
.flottante__lien span { font-size: 0.6rem; font-weight: 500; white-space: nowrap; }
.flottante__lien.est-actif { color: #000; }
.flottante__lien.est-actif::before { transform: scale(1); }

/* Profil */
.profil-page { max-width: 36rem; margin: 0 auto; }
.profil { display: grid; justify-items: center; gap: 0.2rem; 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: 0.125rem solid #fff; outline-offset: 0.25rem; }
.profil__changer { position: absolute; right: 0; bottom: 0.2rem; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 0.1875rem solid var(--fond); border-radius: 50%; background: #fff; color: #000; }
.profil__changer svg { width: 1rem; height: 1rem; }
.profil h1 { font-size: 1.45rem; line-height: 1.2; }
.profil__role { margin: 0; color: var(--gris); font: 500 0.68rem/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.profil__adresse { margin: 0.1rem 0 0; color: var(--gris); font-size: 0.84rem; }
.reglages { display: grid; border: 1px solid var(--bord); border-radius: 0.9rem; background: var(--surface); overflow: hidden; }
.reglage { display: flex; align-items: center; gap: 0.85rem; width: 100%; padding: 0.85rem 0.95rem; border: 0; background: transparent; color: var(--texte); text-align: left; text-decoration: none; cursor: pointer; transition: background-color .15s; }
.reglage + .reglage { border-top: 1px solid var(--bord); }
.reglage:hover { background: var(--carte); }
.reglage__icone { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte-2); color: var(--texte); }
.reglage__icone svg { width: 1.15rem; height: 1.15rem; }
.reglage__texte { display: grid; gap: 0.1rem; flex: 1; min-width: 0; }
.reglage__texte b { font-weight: 500; font-size: 0.92rem; }
.reglage__texte small { color: var(--gris); font-size: 0.76rem; }
.reglage__fleche { flex: none; width: 1rem; height: 1rem; color: var(--gris-2); }

/* 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(0, 0, 0, .65); 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.4rem 1.2rem 1rem; border: 1px solid var(--bord); border-radius: 1.1rem; background: var(--surface); overflow-x: hidden; 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.3rem; line-height: 1.2; }
.feuille__aide { margin: 0.35rem 0 1.2rem; color: var(--gris); font-size: 0.86rem; line-height: 1.5; }
.feuille__boite .note { margin-bottom: 1rem; }
.feuille__boite .champ { margin-bottom: 0.85rem; }
.feuille__note { margin: -0.25rem 0 0.75rem 0.2rem; color: var(--gris-2); font-size: 0.74rem; }
.feuille__action { width: 100%; margin-top: 0.25rem; }
.feuille__lien { display: block; margin: 0.75rem auto 0; padding: 0.35rem 0.75rem; border: 0; background: none; color: var(--gris); font-size: 0.82rem; text-decoration: underline; cursor: pointer; }
.feuille__fermer { display: flex; align-items: center; justify-content: center; width: 100%; height: 2.75rem; margin-top: 0.75rem; border: 1px solid var(--bord-fort); border-radius: 0.75rem; background: var(--carte-2); color: var(--texte); font-size: 0.88rem; cursor: pointer; }
.feuille__fermer:hover { background: #222; }

.photos-wintg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.85rem; margin: 0 0 1.2rem; }
.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: 1px solid var(--bord); border-radius: 50%; }
.photos-wintg .est-choisie { outline: 0.1875rem solid #fff; outline-offset: 0.1875rem; }

.interrupteur { display: flex; align-items: center; gap: 1rem; padding: 0.85rem 0.95rem; border: 1px solid var(--bord); border-radius: 0.8rem; background: var(--carte); cursor: pointer; }
.interrupteur > span { display: grid; gap: 0.1rem; flex: 1; }
.interrupteur b { font-weight: 500; font-size: 0.92rem; }
.interrupteur small { color: var(--gris); font-size: 0.76rem; }
.interrupteur input { position: absolute; opacity: 0; pointer-events: none; }
.interrupteur i { position: relative; flex: none; width: 2.6rem; height: 1.5rem; border-radius: 999px; background: var(--bord-fort); transition: background-color .25s; }
.interrupteur i::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #9a9a9a; transition: transform .25s var(--mouvement), background-color .25s; }
.interrupteur input:checked + i { background: #fff; }
.interrupteur input:checked + i::after { transform: translateX(1.1rem); background: #000; }
.interrupteur input:focus-visible + i { outline: 0.125rem solid #fff; outline-offset: 0.125rem; }

/* Signature e-mail */
.signature-apercu { margin: 0 0 1.2rem; padding: 1rem; border: 1px solid var(--bord); border-radius: 0.8rem; background: #fff; 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(--gris-2); letter-spacing: 0; }
.champ__titre { margin: 0.25rem 0 0.5rem 0.2rem; color: var(--gris); font-size: 0.78rem; }
.choix-forme { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-bottom: 0.85rem; }
.choix-forme label { cursor: pointer; }
.choix-forme input { position: absolute; opacity: 0; pointer-events: none; }
.choix-forme span { display: grid; gap: 0.1rem; height: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--bord); border-radius: 0.75rem; background: var(--carte); transition: border-color .2s, background-color .2s; }
.choix-forme b { font-weight: 500; font-size: 0.88rem; }
.choix-forme small { color: var(--gris); font-size: 0.72rem; }
.choix-forme input:checked + span { border-color: #fff; background: var(--carte-2); }
.choix-forme input:focus-visible + span { outline: 0.125rem solid #fff; outline-offset: 0.125rem; }
.interrupteur--petit { margin-bottom: 1rem; padding: 0.7rem 0.85rem; }
.signature-outils { display: grid; gap: 0.5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--bord); }
.outil { display: flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.6rem; padding: 0 1rem; border: 1px solid var(--bord-fort); border-radius: 0.65rem; background: var(--carte-2); color: var(--texte); text-decoration: none; font-size: 0.85rem; font-weight: 500; white-space: nowrap; cursor: pointer; transition: background-color .15s, border-color .15s; }
.outil svg { width: 1.05rem; height: 1.05rem; }
.outil:hover { border-color: #444; background: #222; }
.outil--attente { color: var(--gris); font-weight: 400; cursor: default; }
.outil--danger { color: var(--rouge); }

/* Lecture d'un message */
.rond { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte); color: var(--texte); text-decoration: none; cursor: pointer; transition: border-color .15s, background-color .15s; }
.rond svg { width: 1.15rem; height: 1.15rem; }
.rond:hover { border-color: var(--bord-fort); background: var(--carte-2); }
.rond--danger { color: var(--rouge); }
.rond--danger:hover { border-color: var(--rouge-bord); }
.pieces { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; }
.piece { display: flex; align-items: center; gap: 0.6rem; max-width: 100%; padding: 0.55rem 0.8rem; border: 1px solid var(--bord); border-radius: 0.7rem; background: var(--carte); color: var(--texte); text-decoration: none; }
.piece:hover { border-color: var(--bord-fort); }
.piece svg { flex: none; width: 1.1rem; height: 1.1rem; color: var(--gris); }
.piece span { display: grid; min-width: 0; }
.piece b { font-weight: 500; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.piece small { color: var(--gris-2); font-size: 0.7rem; }
.lecture__cadre { display: block; width: 100%; min-height: 10rem; border: 0; border-radius: 0.6rem; background: #fff; }
.lecture__texte { font-size: 0.9rem; line-height: 1.65; overflow-wrap: anywhere; }
.lecture__texte a { color: var(--texte); }
.lecture__vide { margin: 0; color: var(--gris-2); }

/* Glisser une ligne */
.glisse { position: relative; overflow: hidden; transition: height .3s var(--mouvement); }
li.glisse + li.glisse > .ligne { border-top: 1px solid var(--bord); }
.glisse > .ligne { position: relative; z-index: 1; background: var(--surface); 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.4rem; color: #fff; font-size: 0.86rem; font-weight: 500; }
.glisse__fond svg { width: 1.2rem; height: 1.2rem; transition: transform .2s; }
.glisse__fond--supprimer { justify-content: flex-start; background: #7f1d1d; }
.glisse__fond--corbeille { justify-content: flex-end; background: #fff; color: #000; }
.glisse.vers-droite .glisse__fond--supprimer, .glisse.vers-gauche .glisse__fond--corbeille { display: flex; }
.glisse.vers-droite .glisse__fond--lu, .glisse.vers-gauche .glisse__fond--reception { display: flex; }
.glisse.pret .glisse__fond svg { transform: scale(1.25); }
.glisse.est-parti { opacity: .6; }
.glisse__fond--reception { justify-content: flex-end; background: #14532d; color: #fff; }
.glisse__fond--lu { justify-content: flex-start; background: var(--carte-2); color: var(--texte); }
.ligne__nombre { flex: none; padding: 0.05rem 0.4rem; border: 1px solid var(--bord); border-radius: 999px; color: var(--gris); font-size: 0.66rem; }

/* Conversation */
.conversation { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem; }
a.bouton, a.tiroir__ecrire { text-decoration: none; }
.courriel { padding: 1rem; border: 1px solid var(--bord); border-radius: 0.9rem; background: var(--surface); }
.courriel__tete { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.courriel__qui { display: grid; gap: 0.05rem; flex: 1; min-width: 0; }
.courriel__qui b { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.courriel__adresse { color: var(--gris); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.courriel__qui time { color: var(--gris-2); font-size: 0.72rem; }
.courriel__resume { flex-basis: 100%; min-width: 0; color: var(--gris); font-size: 0.84rem; 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.3rem; line-height: 1.3; overflow-wrap: anywhere; }
.courriel__a { margin: 0 0 1rem; color: var(--gris-2); font-size: 0.78rem; overflow-wrap: anywhere; }
.courriel__corps { margin: 0; }
.images { display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.5rem; margin: 1rem 0 0; }
.images a { display: block; overflow: hidden; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte); }
.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.6rem; margin-top: 1.25rem; pointer-events: none; }
.actions-flottantes .bouton { width: auto; pointer-events: auto; box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .5); }
.actions-flottantes .bouton--sombre { box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, .5); }
.actions-flottantes svg { width: 1.1rem; height: 1.1rem; }

/* Écrire */
.ecrire__tete { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0.1rem 1rem; }
.ecrire__tete h1 { flex: 1; min-width: 0; font-size: 1.3rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ecrire__envoyer { flex: none; width: auto; font-variant-numeric: tabular-nums; }
.ecrire__envoyer svg { width: 1.1rem; height: 1.1rem; }
.letou-bouton { display: flex; align-items: center; gap: 0.45rem; height: 2.5rem; padding: 0 0.85rem 0 0.3rem; border: 1px solid var(--bord-fort); border-radius: 0.65rem; background: var(--carte-2); color: var(--texte); font-size: 0.85rem; cursor: pointer; }
.letou-bouton img { width: 1.9rem; height: 1.9rem; }
.letou-bouton:hover { border-color: #444; }
@media (max-width: 767px) { .letou-bouton { padding: 0 0.3rem; } .letou-bouton span { display: none; } }
.ecrire__carte { border: 1px solid var(--bord); border-radius: 0.9rem; background: var(--surface); }
.ecrire__ligne { position: relative; display: flex; align-items: center; gap: 0.6rem; min-height: 3.1rem; padding: 0.35rem 0.95rem; border-bottom: 1px solid var(--bord); }
.ecrire__ligne.est-cache { display: none; }
.ecrire__ligne > span { flex: none; width: 3rem; color: var(--gris); font-size: 0.78rem; }
.ecrire__ligne > input { flex: 1; min-width: 0; height: 2.4rem; border: 0; background: transparent; font-size: 0.92rem; outline: none; }
.ecrire__cc { flex: none; padding: 0.25rem 0.5rem; border: 0; background: none; color: var(--gris); font-size: 0.78rem; cursor: pointer; }
.ecrire__cc:hover { color: var(--texte); }
.pastilles { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; 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: 0.92rem; outline: none; }
.pastille-adresse { display: inline-flex; align-items: center; gap: 0.25rem; max-width: 100%; min-width: 0; padding: 0.2rem 0.2rem 0.2rem 0.6rem; border: 1px solid var(--bord-fort); border-radius: 999px; background: var(--carte-2); color: var(--texte); font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pastille-adresse button { display: grid; place-items: center; flex: none; width: 1.3rem; height: 1.3rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gris); font-size: 0.95rem; line-height: 1; cursor: pointer; }
.pastille-adresse button:hover { color: var(--texte); }
.pastille-adresse.est-fausse { border-color: var(--rouge-bord); background: var(--rouge-fond); color: #fecaca; }
.suggestions { position: absolute; z-index: 30; top: 100%; left: 0; right: 0; margin: 0.25rem 0 0; padding: 0.35rem; list-style: none; border: 1px solid var(--bord); border-radius: 0.75rem; background: var(--surface); box-shadow: 0 1rem 2rem rgba(0, 0, 0, .5); }
.suggestions li { display: grid; padding: 0.5rem 0.7rem; border-radius: 0.5rem; cursor: pointer; }
.suggestions li.est-choisie, .suggestions li:hover { background: var(--carte-2); }
.suggestions b { font-weight: 500; font-size: 0.86rem; }
.suggestions small { color: var(--gris); font-size: 0.72rem; }
.outils { display: flex; gap: 0.1rem; padding: 0.45rem 0.7rem; border-bottom: 1px solid var(--bord); overflow-x: auto; scrollbar-width: none; }
.outils::-webkit-scrollbar { display: none; }
.outils button { flex: none; display: grid; place-items: center; min-width: 2.2rem; height: 2.2rem; padding: 0 0.5rem; border: 0; border-radius: 0.5rem; background: transparent; color: var(--texte); font: 500 0.88rem/1 var(--police); cursor: pointer; }
.outils button:hover { background: var(--carte-2); }
.outils svg { width: 1.05rem; height: 1.05rem; }
.outils .outils__bouton { margin-left: auto; padding: 0 0.75rem; border-radius: 0.5rem; background: #fff; color: #000; font-size: 0.78rem; font-weight: 600; }
.outils .outils__bouton:hover { background: #e5e5e5; }
.editeur { min-height: 16rem; padding: 1rem; font: 400 0.95rem/1.65 var(--police); color: var(--texte); outline: none; overflow-wrap: anywhere; }
.editeur:empty::before { content: attr(data-placeholder); color: var(--gris-2); }
.editeur p { margin: 0 0 0.75rem; }
.editeur a { color: var(--texte); }
.editeur a[data-bouton] { display: inline-block; padding: 0.6rem 1.4rem; border-radius: 999px; background: #E67A1E; color: #3A1C0A; text-decoration: none; }
.editeur blockquote { margin: 1rem 0 0; padding-left: 0.75rem; border-left: 0.125rem solid var(--bord-fort); color: var(--gris); }
.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.35rem 0.35rem 0.35rem 0.7rem; border: 1px solid var(--bord); border-radius: 0.6rem; background: var(--carte); font-size: 0.78rem; }
.piece-ecrire b { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem; }
.piece-ecrire small { color: var(--gris-2); font-size: 0.7rem; }
.piece-ecrire button { width: 1.4rem; height: 1.4rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--gris); font-size: 0.95rem; cursor: pointer; }
.ecrire__options { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; padding: 0.85rem 0.95rem; border-top: 1px solid var(--bord); }
.mini-interrupteur { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.82rem; color: var(--gris); cursor: pointer; }
.mini-interrupteur input[type=checkbox] { position: absolute; opacity: 0; pointer-events: none; }
.mini-interrupteur i { position: relative; flex: none; width: 2.1rem; height: 1.25rem; border-radius: 999px; background: var(--bord-fort); transition: background-color .2s; }
.mini-interrupteur i::after { content: ""; position: absolute; top: 0.1875rem; left: 0.1875rem; width: 0.875rem; height: 0.875rem; border-radius: 50%; background: #9a9a9a; transition: transform .2s var(--mouvement), background-color .2s; }
.mini-interrupteur input:checked + i { background: #fff; }
.mini-interrupteur input:checked + i::after { transform: translateX(0.85rem); background: #000; }
.mini-interrupteur input:checked ~ * { color: var(--texte); }
.mini-interrupteur input:focus-visible + i { outline: 0.125rem solid #fff; outline-offset: 0.125rem; }
.ecrire__joindre { display: inline-flex; align-items: center; gap: 0.35rem; height: 2.25rem; margin-left: auto; padding: 0 0.8rem; border: 1px solid var(--bord-fort); border-radius: 0.6rem; background: var(--carte-2); color: var(--texte); font-size: 0.8rem; 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.85rem; }
.ecrire__bas .outil { padding: 0 0.5rem; font-size: 0.8rem; }
.letou-visage { flex: none; width: 2.5rem; height: 2.5rem; }
.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.45rem; margin: -0.25rem 0 1rem; }
.raccourcis-heure button { height: 2.1rem; padding: 0 0.8rem; border: 1px solid var(--bord); border-radius: 0.55rem; background: var(--carte); color: var(--texte); font-size: 0.78rem; cursor: pointer; }
.raccourcis-heure button:hover, .raccourcis-heure .est-choisi { border-color: #fff; background: var(--carte-2); }
.date-heure { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0.6rem; }
.date-heure input { width: 100%; height: 2.75rem; padding: 0 0.85rem; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte); font-size: 0.9rem; color: var(--texte); color-scheme: dark; }
.feuille__boite--apercu { display: flex; flex-direction: column; }
.apercu-cadre { width: 100%; height: 62vh; border: 1px solid var(--bord); border-radius: 0.75rem; background: #fff; }

/* Lètou : une discussion, la barre de message en bas */
.ecrire__etat { flex: none; color: var(--gris-2); font-size: 0.72rem; }
.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: 0.95rem 1.1rem; border-bottom: 1px solid var(--bord); }
.letou__tete h2 { font-size: 1.1rem; line-height: 1.15; }
.letou__tete p { margin: 0.1rem 0 0; color: var(--gris); font-size: 0.72rem; }
.letou__fermer { display: grid; place-items: center; flex: none; width: 2.2rem; height: 2.2rem; margin-left: auto; padding: 0; border: 1px solid var(--bord); border-radius: 0.55rem; background: var(--carte); color: var(--gris); cursor: pointer; }
.letou__fermer svg { width: 1rem; height: 1rem; }
.letou__fil { flex: 1; display: flex; flex-direction: column; gap: 0.6rem; padding: 1rem 1.1rem; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.letou__fil::-webkit-scrollbar { display: none; }
.bulle { max-width: 86%; padding: 0.7rem 0.95rem; border-radius: 0.95rem; font-size: 0.88rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; animation: monte .3s var(--mouvement) both; }
.bulle--letou { align-self: flex-start; border: 1px solid var(--bord); border-bottom-left-radius: 0.3rem; background: var(--carte); color: var(--texte); }
.bulle--moi { align-self: flex-end; border-bottom-right-radius: 0.3rem; background: #fff; color: #000; }
.bulle--erreur { border-color: var(--rouge-bord); background: var(--rouge-fond); color: #fecaca; }
.bulle--attente { display: flex; gap: 0.3rem; padding: 0.9rem 1rem; }
.bulle--attente span { width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--gris-2); 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: #fff; } }
.bulle__carte { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0.1rem 0.75rem; margin-top: 0.6rem; padding: 0.6rem 0.7rem; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte-2); white-space: normal; }
.bulle__carte b { font-weight: 500; font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bulle__carte small { grid-column: 1; color: var(--gris); font-size: 0.72rem; }
.bulle__carte button { grid-column: 2; grid-row: 1 / 3; height: 2rem; padding: 0 0.7rem; border: 1px solid var(--bord-fort); border-radius: 0.5rem; background: transparent; color: var(--texte); font-size: 0.78rem; cursor: pointer; }
.bulle__carte button:disabled { opacity: .5; cursor: default; }
.letou__bas { padding: 0.6rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--bord); background: var(--surface); }
.letou__idees { display: flex; gap: 0.35rem; margin: 0 -0.85rem 0.5rem; padding: 0 0.85rem; overflow-x: auto; scrollbar-width: none; }
.letou__idees::-webkit-scrollbar { display: none; }
.letou__idees button { flex: none; height: 2rem; padding: 0 0.7rem; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte); color: var(--texte); font-size: 0.78rem; white-space: nowrap; cursor: pointer; }
.letou__idees button:hover { border-color: var(--bord-fort); background: var(--carte-2); }
.letou__saisie { display: flex; align-items: flex-end; gap: 0.5rem; padding: 0.3rem 0.3rem 0.3rem 0.9rem; border: 1px solid var(--bord); border-radius: 0.9rem; background: var(--carte); transition: border-color .2s; }
.letou__saisie:focus-within { border-color: rgba(255, 255, 255, .3); }
.letou__saisie textarea { flex: 1; min-width: 0; max-height: 10rem; padding: 0.55rem 0; border: 0; background: transparent; font: 400 0.92rem/1.45 var(--police); color: var(--texte); resize: none; outline: none; }
.letou__saisie textarea::placeholder { color: var(--gris-2); }
.letou__envoyer { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 0.65rem; background: #fff; color: #000; cursor: pointer; transition: background-color .2s, opacity .2s; }
.letou__envoyer:hover { background: #e5e5e5; }
.letou__envoyer:disabled { opacity: .5; cursor: progress; }
.letou__envoyer svg { width: 1.1rem; height: 1.1rem; stroke-width: 2; }
.letou__note { margin: 0.35rem 0 0; color: var(--gris-2); font-size: 0.66rem; text-align: center; }

/* Toasts : en haut, comme le panneau ; 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.6rem; width: max-content; max-width: min(92%, 30rem); margin: 0; padding: 0.6rem 0.7rem 0.6rem 0.6rem; border-radius: 0.8rem; background: #fff; color: #000; font-size: 0.86rem; font-weight: 500; line-height: 1.35; box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .5); 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.6rem; height: 1.6rem; border-radius: 50%; background: #000; color: #fff; }
.toast__icone svg { width: 0.95rem; height: 0.95rem; stroke-width: 2.2; }
.toast--erreur { border: 1px solid var(--rouge-bord); background: var(--rouge-fond); color: #fecaca; }
.toast--erreur .toast__icone { background: var(--rouge); color: #000; }
.toast__texte { flex: 1; min-width: 0; }
.toast__action { flex: none; height: 2rem; padding: 0 0.8rem; border: 0; border-radius: 0.5rem; background: #000; color: #fff; font-size: 0.8rem; cursor: pointer; }
.toast--erreur .toast__action { background: #fff; color: #000; }
.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: #fff; color: #000; transform: scale(0); transition: transform .2s var(--mouvement); }
.ligne__coche svg { width: 1.15rem; height: 1.15rem; stroke-width: 2.4; }
.glisse.est-choisi > .ligne { background: var(--carte-2); }
.glisse.est-choisi .ligne__coche { transform: scale(1); }
.glisse.est-arrive > .ligne { animation: arrive 1.6s var(--mouvement); }
@keyframes arrive { 0% { background: #262626; } 100% { background: var(--surface); } }
.ligne__dossier { flex: none; padding: 0.05rem 0.4rem; border: 1px solid var(--bord); border-radius: 999px; color: var(--gris); font-size: 0.66rem; }
.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.35rem; border: 1px solid var(--bord-fort); border-radius: 0.9rem; background: var(--surface); box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, .55); animation: monte .25s var(--mouvement) both; }
.selection[hidden] { display: none; }
.selection__fermer { display: grid; place-items: center; flex: none; width: 2.4rem; height: 2.4rem; padding: 0; border: 0; border-radius: 0.6rem; background: var(--carte-2); color: var(--texte); cursor: pointer; }
.selection__fermer svg { width: 1.05rem; height: 1.05rem; }
.selection__nombre { flex: 1; min-width: 1.5rem; padding-left: 0.25rem; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.selection__actions { display: flex; gap: 0.1rem; }
.selection__actions button { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 0; border-radius: 0.55rem; background: transparent; color: var(--texte); cursor: pointer; }
.selection__actions button:hover { background: var(--carte-2); }
.selection__actions svg { width: 1.15rem; height: 1.15rem; }
.selection__actions .selection__danger { color: var(--rouge); }

.notif-essai { width: 100%; margin-top: 0.75rem; }
.notif-essai + .feuille__note { margin: 0.85rem 0 1.1rem 0.2rem; font-size: 0.78rem; line-height: 1.5; }
.champ__zone { width: 100%; padding: 0.8rem 0.9rem; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte); font: 400 0.92rem/1.5 var(--police); color: var(--texte); resize: vertical; outline: none; }
.champ__zone:focus { border-color: rgba(255, 255, 255, .35); }

/* Pages d'erreur */
.page-erreur { background: var(--fond); }
.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: auto; height: 2.25rem; }
.erreur__carte { width: min(100%, 28rem); padding: 2rem 1.5rem 1.5rem; border: 1px solid var(--bord); border-radius: 1rem; background: var(--surface); text-align: center; animation: monte .5s var(--mouvement) both; }
.erreur__code { margin: 0; font: 600 4rem/1 var(--mono); color: #fff; letter-spacing: -.03em; }
.erreur h1 { margin-top: 0.75rem; font-size: 1.4rem; line-height: 1.25; }
.erreur__texte { margin: 0.6rem 0 1.5rem; color: var(--gris); font-size: 0.88rem; line-height: 1.55; }
.erreur__actions { display: grid; gap: 0.5rem; }
.erreur__actions .bouton { text-decoration: none; }
.erreur__retour { height: 2.9rem; border: 1px solid var(--bord-fort); border-radius: 0.75rem; background: var(--carte-2); color: var(--texte); font-size: 0.9rem; cursor: pointer; }
.erreur__pied { margin: 0; color: var(--gris-2); font-size: 0.72rem; }

.choix-pastilles { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.choix-pastilles label { position: relative; cursor: pointer; }
.choix-pastilles input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; pointer-events: none; }
.choix-pastilles span { display: block; padding: 0.45rem 0.75rem; border: 1px solid var(--bord); border-radius: 999px; background: var(--carte); font-size: 0.84rem; }
.choix-pastilles input:checked + span { border-color: #fff; background: #fff; color: #000; }
.choix-pastilles input:focus-visible + span { outline: 0.125rem solid #fff; outline-offset: 0.125rem; }
.pastilles--cadre { padding: 0.35rem 0.6rem; border: 1px solid var(--bord); border-radius: 0.65rem; background: var(--carte); }
.pastilles--cadre:focus-within { border-color: rgba(255, 255, 255, .35); }
.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.2rem; height: 2.2rem; }
.champ__deja { display: block; margin-top: 0.35rem; color: var(--gris); font-size: 0.72rem; overflow-wrap: anywhere; }
.depot { position: relative; display: flex; align-items: center; gap: 0.75rem; margin: -0.5rem 0 1rem; padding: 0.85rem 0.95rem; border: 1px dashed var(--bord-fort); border-radius: 0.8rem; background: var(--carte); cursor: pointer; }
.depot[hidden] { display: none; }
.depot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.depot svg { flex: none; width: 1.6rem; height: 1.6rem; color: var(--gris); }
.depot span { display: grid; gap: 0.1rem; min-width: 0; }
.depot b { font-weight: 500; font-size: 0.88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.depot small { color: var(--gris); font-size: 0.72rem; }
.depot.est-rempli { border-style: solid; border-color: #fff; background: var(--carte-2); }

/* Programmés */
.programmes { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; }
.programme { padding: 1rem; border: 1px solid var(--bord); border-radius: 0.9rem; background: var(--surface); }
.programme--echec { border-color: var(--rouge-bord); }
.programme__haut { display: flex; align-items: center; gap: 0.5rem; color: var(--texte); font-size: 0.86rem; }
.programme__haut svg { width: 1.05rem; height: 1.05rem; color: var(--gris); }
.programme__haut b { font-weight: 500; color: var(--rouge); }
.programme__sujet { margin: 0.5rem 0 0.1rem; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
.programme__a { margin: 0; color: var(--gris); font-size: 0.78rem; overflow-wrap: anywhere; }
.programme__erreur { margin: 0.5rem 0 0; color: #fecaca; font-size: 0.78rem; }
.programme__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.85rem; }
.programme__actions form { margin: 0; }
.programme__actions .outil { height: 2.25rem; padding: 0 0.8rem; font-size: 0.78rem; }

/* Bandeau des dossiers Spam et Corbeille */
.bandeau-dossier { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.85rem; margin: 0 0 1rem; padding: 0.85rem 0.95rem; border: 1px solid var(--bord); border-radius: 0.8rem; background: var(--surface); }
.bandeau-dossier > svg { flex: none; width: 1.2rem; height: 1.2rem; color: var(--gris); }
.bandeau-dossier p { flex: 1; min-width: 12rem; margin: 0; color: var(--gris); font-size: 0.84rem; line-height: 1.5; }
.bandeau-dossier--alerte { border-color: var(--rouge-bord); background: var(--rouge-fond); }
.bandeau-dossier--alerte p { color: #fecaca; }
.bandeau-dossier--alerte > svg { color: var(--rouge); }
.bandeau-dossier__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem; }
.bandeau-dossier__actions form { margin: 0; }
.bandeau-dossier__bouton { height: 2.25rem; padding: 0 0.9rem; border: 0; border-radius: 0.55rem; background: #fff; color: #000; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
.bandeau-dossier__lien { padding: 0; border: 0; background: none; color: var(--texte); font-size: 0.8rem; text-decoration: underline; cursor: pointer; }
.bandeau-dossier__lien--danger { color: var(--rouge); }

.infos-lecture { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem 1rem; margin: 0 0 1.2rem; }
.infos-lecture dt { color: var(--gris); font-size: 0.82rem; } .infos-lecture dd { margin: 0; overflow-wrap: anywhere; }

/* ---------- Ordinateur : la coque du panneau (barre d'icônes à gauche, en-tête avec le fil, contenu) ---------- */
@media (min-width: 1024px) {
  .page-appli { display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 100vh; }
  .tiroir { position: sticky; top: 0; left: auto; bottom: auto; grid-column: 1; grid-row: 1 / 3; z-index: 30; align-items: center; gap: 0.5rem; width: var(--rail); max-width: none; height: 100vh; padding: 1rem 0; border: 0; border-right: 1px solid var(--bord); border-radius: 0; background: var(--fond); transform: none; transition: none; overflow: visible; }
  .haut { grid-column: 2; grid-row: 1; gap: 1rem; height: 3.5rem; padding: 0 1.5rem; }
  .page { grid-column: 2; grid-row: 2; width: 100%; max-width: 92rem; padding: 1.5rem 1.5rem 3rem; }
  .tiroir__fermer, .haut__menu, .voile, .flottante, .tiroir__nom { display: none !important; }
  .tiroir__tete { justify-content: center; min-height: 0; margin-bottom: 1rem; padding: 0; }
  .tiroir__ecrire { width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 0.6rem; }
  .tiroir__dossiers, .tiroir__bas { justify-items: center; gap: 0.5rem; }
  .tiroir__bas { width: 100%; border-top: 0; }
  .tiroir__dossiers a, .tiroir__lien, .tiroir__sortir button { justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0; border-radius: 0.6rem; }
  .tiroir__contacts { margin-top: 0.5rem; }
  .tiroir__contacts::before { left: 0.25rem; right: 0.25rem; top: -0.3rem; }
  .tiroir__dossiers b { position: absolute; top: 0.25rem; right: 0.25rem; min-width: 0; width: 0.55rem; height: 0.55rem; padding: 0; font-size: 0; box-shadow: 0 0 0 0.125rem var(--fond); }
  /* Le nom de chaque bouton : une étiquette blanche qui apparaît au survol, comme dans le panneau */
  .tiroir__ecrire span, .tiroir__dossiers a span, .tiroir__lien span, .tiroir__sortir span { position: absolute; left: calc(100% + 0.75rem); top: 50%; transform: translateY(-50%); padding: 0.25rem 0.5rem; border-radius: 0.375rem; background: #fff; color: #000; font-size: 0.74rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
  .tiroir__sortir button { position: relative; }
  .tiroir__ecrire:hover span, .tiroir__dossiers a:hover span, .tiroir__lien:hover span, .tiroir__sortir button:hover span { opacity: 1; }
  .haut__fil { display: flex; }
  .recherche { flex: none; width: 22rem; margin-left: auto; height: 2.25rem; }
  .recherche kbd { display: block; }
  .haut__ecrire { display: inline-flex; width: auto; height: 2.25rem; padding: 0 0.9rem; border-radius: 0.6rem; font-size: 0.82rem; }
  .haut__ecrire svg { width: 1rem; height: 1rem; }
  .haut__profil .avatar { width: 2.25rem; height: 2.25rem; }
  .feuille { align-items: center; }
  .feuille__boite { width: 30rem; margin: 0; padding: 1.75rem 1.75rem 1.4rem; transform: translateY(0.75rem) scale(.98); opacity: 0; transition: transform .25s var(--mouvement), opacity .25s; }
  .feuille.est-ouverte .feuille__boite { transform: none; opacity: 1; }
  .feuille__boite--large { width: 34rem; }
  /* Lètou : panneau collé à droite, la page reste utilisable à côté */
  .feuille--cote { inset: 0.75rem 0.75rem 0.75rem 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.4rem 1.3rem; opacity: 1; transform: translateX(calc(100% + 2rem)); pointer-events: auto; transition: transform .35s var(--mouvement); }
  .feuille--cote.est-ouverte .feuille__boite { transform: none; }
  .feuille--cote .feuille__boite.letou { height: 100%; padding: 0; }
  .panneau-ouvert .page, .panneau-ouvert .haut { padding-right: calc(26rem + 2.5rem); }
  .selection { left: calc(var(--rail) + 1.5rem); right: 1.5rem; }
  .courriel { padding: 1.2rem 1.4rem; }
  .courriel__sujet { font-size: 1.6rem; }
  .ligne--lien:hover, .glisse > .ligne--lien:hover { background: var(--carte); }
  .comptes { width: 21rem; }
}

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