`, parce qu'on
rattache une fois et qu'on lit cent fois. */
.mail-link-form { margin-top: 10px; }
.mail-link-form summary { cursor: pointer; font-size: 12.5px; color: var(--m-green); font-weight: 600; }
.mail-link-form form { display: flex; gap: 8px; margin-top: 10px; }
/* ══════════════════════════════════════════════════════════════════════════
§17 §32 — LE COMPOSEUR
═════════════════════════════════════════════════════════════════════════ */
.mail-composer {
position: fixed; right: 24px; bottom: 0;
width: 620px; max-width: calc(100vw - 48px);
height: 560px; max-height: calc(100vh - 80px);
background: #fff;
border: 1px solid var(--m-line); border-bottom: 0;
border-radius: var(--m-radius) var(--m-radius) 0 0;
box-shadow: 0 -2px 10px rgba(20,32,28,.06), 0 20px 50px rgba(20,32,28,.22);
z-index: 80;
display: flex; flex-direction: column;
}
/* Réduit : seule la barre de titre reste. Le brouillon continue de vivre —
on n'a rien perdu, on a juste rangé. */
.mail-composer.is-collapsed { height: 44px; min-height: 44px; }
.mail-composer.is-collapsed .mail-composer__body,
.mail-composer.is-collapsed .mail-composer__foot { display: none; }
/* Agrandi : au centre, plus haut, pour écrire un long message. */
.mail-composer.is-expanded {
right: 50%; transform: translateX(50%);
width: min(920px, calc(100vw - 80px));
height: calc(100vh - 100px);
border-radius: var(--m-radius);
bottom: 40px; border-bottom: 1px solid var(--m-line);
}
.mail-composer.is-dragover { outline: 2px dashed var(--m-green); outline-offset: -6px; }
.mail-composer__form { display: flex; flex-direction: column; min-height: 0; flex: 1; }
.mail-composer__bar {
display: flex; align-items: center; gap: 4px;
height: 44px; padding: 0 6px 0 16px;
background: var(--m-green); color: #fff;
border-radius: var(--m-radius) var(--m-radius) 0 0;
cursor: move; flex: 0 0 auto;
}
.mail-composer__title { font-size: 13.5px; font-weight: 600; flex: 1; }
/* L'horodatage d'enregistrement. Discret : il rassure, il n'informe pas. */
.mail-composer__saved { font-size: 11.5px; opacity: .75; margin-right: 6px; }
.mail-composer__icon {
width: 30px; height: 30px; border: 0; border-radius: 6px;
background: none; color: #fff; cursor: pointer; font-size: 12px;
display: grid; place-items: center;
}
.mail-composer__icon:hover { background: rgba(255,255,255,.16); }
.mail-composer__body {
flex: 1; min-height: 0; overflow-y: auto;
display: flex; flex-direction: column; position: relative;
}
.mail-field {
display: flex; align-items: center; gap: 10px;
padding: 0 16px; height: 42px;
border-bottom: 1px solid var(--m-line-2); flex: 0 0 auto;
}
.mail-field__label {
width: 42px; flex: 0 0 auto;
font-size: 12.5px; color: var(--m-ink-3);
}
.mail-field__input {
flex: 1; min-width: 0; border: 0; outline: none; background: none;
font: 13.5px var(--m-font); color: var(--m-ink); height: 100%;
}
.mail-field__more {
border: 0; background: none; cursor: pointer;
font: 600 12px var(--m-font); color: var(--m-ink-3); padding: 4px 6px;
}
.mail-field__more:hover { color: var(--m-green); }
.mail-composer__text {
flex: 1; min-height: 160px; resize: none;
border: 0; outline: none; padding: 14px 16px;
font: 13.5px/1.6 var(--m-font); color: var(--m-ink);
}
.mail-composer__drop {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center; gap: 10px;
background: rgba(255,255,255,.94); color: var(--m-green);
font-weight: 600; font-size: 14px; pointer-events: none;
}
.mail-composer__files { list-style: none; margin: 0; padding: 0 16px 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.mail-composer__files li {
display: flex; align-items: center; gap: 8px;
padding: 6px 10px; border: 1px solid var(--m-line); border-radius: 7px;
font-size: 12px; background: var(--m-bg);
}
.mail-composer__foot {
display: flex; align-items: center; gap: 8px;
padding: 10px 14px; border-top: 1px solid var(--m-line); flex: 0 0 auto;
}
.mail-composer__spacer { flex: 1; }
/* ══════════════════════════════════════════════════════════════════════════
§34 — LA SESSION EXPIRÉE
Une modale, pas une page 500 : le §34 exige qu'on « ne casse pas
l'expérience ». Ce qui était écrit reste à l'écran derrière le voile, et
l'enregistrement automatique l'a déjà mis à l'abri.
═════════════════════════════════════════════════════════════════════════ */
.mail-expired {
position: fixed; inset: 0; z-index: 200;
display: grid; place-items: center;
background: rgba(20,32,28,.52);
backdrop-filter: blur(2px);
padding: 20px;
}
.mail-expired__box {
background: #fff; border-radius: 14px; padding: 26px 28px;
max-width: 400px; width: 100%; box-shadow: var(--m-shadow); text-align: center;
}
.mail-expired__box h2 { margin: 0 0 8px; font-size: 17px; }
.mail-expired__box p { margin: 0 0 18px; color: var(--m-ink-2); font-size: 13.5px; line-height: 1.55; }
/* ══════════════════════════════════════════════════════════════════════════
§5 — LA PAGE DE CONNEXION
Elle n'a ni barre latérale ni en-tête : on ne montre pas les dossiers de
quelqu'un qui n'est pas encore identifié.
═════════════════════════════════════════════════════════════════════════ */
body.mail-auth {
display: grid; place-items: center;
min-height: 100vh; min-height: 100dvh; height: auto; overflow: auto;
padding: 24px; background: var(--m-bg);
}
.mail-auth__card {
width: 100%; max-width: 400px;
background: #fff; border: 1px solid var(--m-line);
border-radius: 14px; padding: 30px 28px; box-shadow: var(--m-shadow);
}
.mail-auth__brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.mail-auth__card h1 { margin: 0 0 6px; font-size: 19px; }
.mail-auth__card p.mail-auth__lead { margin: 0 0 22px; color: var(--m-ink-3); font-size: 13px; line-height: 1.5; }
.mail-auth__field { display: block; margin-bottom: 14px; }
.mail-auth__field span { display: block; margin-bottom: 5px; font-size: 12.5px; font-weight: 600; color: var(--m-ink-2); }
.mail-auth__field input {
width: 100%; height: 42px; padding: 0 13px;
border: 1px solid var(--m-line); border-radius: 8px;
font: 14px var(--m-font); color: var(--m-ink); background: #fff;
}
.mail-auth__field input:focus { border-color: var(--m-green); outline: none; }
.mail-auth__submit {
width: 100%; height: 44px; margin-top: 6px;
border: 0; border-radius: 8px; cursor: pointer;
background: var(--m-green); color: #fff; font: 600 14.5px var(--m-font);
}
.mail-auth__submit:hover { background: var(--m-green-soft); }
.mail-auth__links { margin: 18px 0 0; text-align: center; font-size: 12.5px; color: var(--m-ink-3); }
.mail-auth__links a { color: var(--m-green); font-weight: 600; }
.mail-auth__error {
margin: 0 0 16px; padding: 11px 13px; border-radius: 8px;
background: #fef3f2; color: var(--m-red); font-size: 13px;
}
/* ══════════════════════════════════════════════════════════════════════════
§31 §32 — LE RESPONSIVE
Trois régimes, et non « un desktop rétréci ». Les points de rupture suivent
les tailles nommées au §59 : 1366 et au-delà, 768–1200, 390/430.
═════════════════════════════════════════════════════════════════════════ */
/* ── Compact (768 → 1200) : la lecture passe en pleine largeur ───────────── */
@media (max-width: 1200px) {
:root { --m-w-side: 76px; --m-w-list: 320px; }
/* La barre latérale se réduit aux icônes. Elle ne DISPARAÎT pas : perdre
l'accès aux dossiers sur une tablette obligerait à revenir en arrière pour
changer de dossier. */
.mail-side { padding: 12px 8px; align-items: center; }
.mail-compose-cta { width: 52px; height: 52px; border-radius: 26px; padding: 0; }
.mail-compose-cta span,
.mail-folders span, .mail-boxes span,
.mail-side__title, .mail-side__link span,
.mail-count { display: none; }
.mail-folders { width: 100%; }
.mail-folders a, .mail-boxes a {
justify-content: center; border-radius: 9px; padding: 0; height: 40px;
}
.mail-brand__text { display: none; }
}
/* ── Mobile (≤ 767) : un panneau à la fois ───────────────────────────────── */
@media (max-width: 767px) {
:root { --m-h-header: 52px; }
.mail-burger { display: block; }
/* La barre latérale devient un tiroir. Fermée, elle ne prend AUCUNE place —
`transform` et non `display`, pour qu'elle glisse au lieu d'apparaître. */
.mail-shell { grid-template-columns: 1fr; }
.mail-side {
position: fixed; top: var(--m-h-header); bottom: 0; left: 0;
width: 264px; padding: 14px 10px; align-items: stretch;
background: #fff; border-right: 1px solid var(--m-line);
transform: translateX(-100%);
transition: transform .2s ease;
z-index: 70;
}
.mail-side.is-open { transform: none; box-shadow: 0 0 40px rgba(20,32,28,.28); }
.mail-compose-cta { width: auto; height: 44px; border-radius: 22px; }
.mail-compose-cta span,
.mail-folders span, .mail-boxes span,
.mail-side__title, .mail-side__link span,
.mail-count { display: initial; }
.mail-folders a, .mail-boxes a { justify-content: flex-start; padding: 0 12px; height: 40px; }
/* §32 — Réception → message → retour. Sur l'écran de lecture, la liste
n'est pas affichée : 390 pixels ne se partagent pas. */
.mail-panes { grid-template-columns: 1fr; }
.mail-pane--list { display: none; }
.mail-panes--list .mail-pane--list { display: block; border-right: 0; }
.mail-panes--list .mail-pane--read { display: none; }
.mail-read__back { display: inline-flex; margin-bottom: 10px; }
.mail-read__subject { font-size: 16px; }
.mail-msg__body { padding: 0 14px 18px; }
.mail-read__head, .mail-rail { padding-left: 14px; padding-right: 14px; }
.mail-row { padding: 11px 12px; }
/* Sur 390 pixels, chaque élément d'en-tête se dispute la largeur de la
recherche. On resserre les écarts et on retire le seul bouton dont
l'absence ne coûte rien : « Ouvrir CamerounServices » — sur un téléphone,
on ne travaille pas à deux onglets. */
.mail-brand__text { display: none; }
.mail-search { max-width: none; }
.mail-header { gap: 6px; padding: 0 8px; }
.mail-header__actions { gap: 0; }
.mail-header__actions > a[target="_blank"] { display: none; }
.mail-iconbtn { width: 32px; }
.mail-burger { padding: 6px; }
/* §32 — Le composeur en PLEIN ÉCRAN. Une fenêtre flottante de 620 pixels sur
un écran de 390 serait une fenêtre qui déborde. */
.mail-composer {
inset: 0; right: 0; bottom: 0;
width: 100%; max-width: none; height: 100%; max-height: none;
border: 0; border-radius: 0;
}
.mail-composer.is-expanded { transform: none; right: 0; bottom: 0; width: 100%; height: 100%; border-radius: 0; }
.mail-composer.is-collapsed { inset: auto 0 0 0; height: 44px; }
.mail-composer__bar { border-radius: 0; cursor: default; }
}
/* Le voile du tiroir. Il n'existe que sur mobile et seulement quand le tiroir
est ouvert : un `` transparent permanent intercepterait les clics. */
.mail-scrim {
position: fixed; inset: var(--m-h-header) 0 0 0;
background: rgba(20,32,28,.4); z-index: 65;
}
/* ── Grands écrans (1440+) : on donne la largeur au texte, pas au vide ───── */
@media (min-width: 1440px) {
:root { --m-w-list: 420px; }
.mail-msg__body, .mail-read__head { max-width: 1100px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
SMART-MAIL-SEND-UX-FIX-01 §16 — LA CONFIRMATION D'ENVOI
══ POURQUOI EN BAS À GAUCHE ══
Le composeur occupe le bas à DROITE. Une confirmation posée au même endroit
apparaîtrait pile là où la fenêtre vient de disparaître — donc là où le
regard n'est plus. En bas à gauche, elle est dans le champ de vision sans
recouvrir la liste ni le message qu'on relit.
══ POURQUOI ELLE NE BLOQUE RIEN ══
`pointer-events: none` : un envoi réussi ne doit pas intercepter le clic
suivant. Elle informe, elle ne demande rien, et elle s'efface seule.
════════════════════════════════════════════════════════════════════════ */
.mail-toast {
position: fixed; left: 20px; bottom: 22px; z-index: 90;
max-width: min(420px, calc(100vw - 40px));
padding: 11px 16px;
border-radius: 10px;
background: var(--m-green);
color: #fff;
font-size: 13.5px; font-weight: 600; line-height: 1.45;
box-shadow: 0 10px 30px rgba(11, 61, 46, .28);
pointer-events: none;
opacity: 0; transform: translateY(8px);
transition: opacity .18s ease, transform .18s ease;
}
.mail-toast.is-visible { opacity: 1; transform: translateY(0); }
/* Sur téléphone le composeur est plein écran : la confirmation se centre. */
@media (max-width: 767px) {
.mail-toast {
left: 12px; right: 12px; bottom: 14px;
max-width: none; text-align: center;
}
}
/* ── §7 §8 — L'échec, DANS le composeur ──────────────────────────────────
Il ne remplace pas le formulaire et ne le ferme pas : il s'insère au-dessus
du pied, juste au-dessus du bouton qu'on vient de presser, là où le regard
se trouve déjà. */
.mail-composer__error {
margin: 8px 14px 0;
padding: 9px 12px;
border-radius: 8px;
background: #fef3f2;
border: 1px solid #fecdca;
color: var(--m-red);
font-size: 12.5px; line-height: 1.5;
}
/* ── Mouvement réduit ────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}