/* Scène Maili, identité « Casier » : fond blanc, gris froids, un accent bleu, rouge réservé aux alertes. */
.maili{position:absolute;inset:0;overflow:hidden;background:#fff;color:#17181b;font-family:"Public Sans","Helvetica Neue",Arial,sans-serif;--marge:clamp(20px,5vw,84px);--bleu:#0064d2;--alerte:#ba3728;--lw:clamp(150px,16vw,244px);--lh:calc(var(--lw) / 1.72)}

.maili__col{position:absolute;left:var(--marge);top:clamp(84px,14vh,136px);width:min(35vw,520px)}
.maili__bloc{position:absolute;left:0;top:0;width:100%;opacity:0;will-change:opacity,transform}
.maili__etape{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;color:#7e8085;margin:0 0 20px;white-space:pre}
.maili__phrase{font:700 clamp(30px,3.5vw,56px)/1.06 "Bitter",Georgia,serif;letter-spacing:-.018em;margin:0;text-wrap:balance}
.maili__detail{font-size:15px;line-height:1.45;color:#53555a;margin:18px 0 0;max-width:42ch}

.maili__couverture{position:absolute;left:var(--marge);top:50%;width:min(44vw,640px);transform:translateY(-50%);opacity:0;will-change:opacity}
.maili__marque{font:800 clamp(76px,10.4vw,170px)/.95 "Bitter",Georgia,serif;letter-spacing:-.035em;margin:0}
.maili__sous{font-size:clamp(17px,1.7vw,24px);color:#53555a;margin:14px 0 0}
.maili__perso{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.16em;color:#7e8085;margin:28px 0 0}

.passages{position:relative;height:42px;margin-top:34px}
.passages__ligne{position:absolute;left:0;right:0;top:6px;height:2px;background:#ebedef}
.passages__fait{position:absolute;left:0;top:0;bottom:0;background:var(--bleu);transform-origin:0 50%}
.passages__point{position:absolute;top:0;width:14px;height:14px;margin-left:-7px;border-radius:50%;background:#fff;border:2px solid #cfd2d7}
.passages__point.est-actif{border-color:var(--bleu);background:var(--bleu)}
.passages__heure{position:absolute;top:24px;white-space:nowrap;transform:translateX(-50%);font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;color:#53555a}
.passages__heure:first-of-type{transform:none}.passages__heure:last-of-type{transform:translateX(-100%)}

.mesures{display:flex;gap:clamp(20px,2.6vw,40px);margin-top:30px}
.mesure b{display:block;font:800 clamp(42px,5vw,76px)/1 "Bitter",Georgia,serif;color:var(--bleu);letter-spacing:-.03em}
.mesure span{display:block;font-size:13px;line-height:1.35;color:#53555a;margin-top:8px;max-width:21ch}
.mesures__note{font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.08em;color:#7e8085;margin:20px 0 0}

.regle{margin-top:24px;border:1px solid #e3e4e7;border-radius:4px;padding:14px;background:#f9fafb}
.regle__titre{font-size:13px;font-weight:600;margin:0 0 10px}
.regle__ligne{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.regle__nom{font-size:14px;font-weight:600;display:flex;align-items:center;gap:8px}
.regle__nom i{width:9px;height:9px;background:#cb7300;display:block}
.regle__choix{display:flex;border:1px solid #d6d8dd;border-radius:4px;overflow:hidden;background:#fff}
.regle__choix button{border:0;background:none;padding:8px 10px;font-size:12.5px;font-weight:500;color:#53555a;cursor:pointer}
.regle__choix button[aria-pressed="true"]{background:var(--bleu);color:#fff}
.regle__choix button:focus-visible{outline:2px solid var(--bleu);outline-offset:-2px}
.journal{margin-top:12px;font-size:13px;line-height:1.4;opacity:0}
.journal small{display:block;font:500 11px/1.4 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;color:#7e8085;margin-bottom:6px}
.journal strong{font-weight:600}.journal span{color:#53555a}
.journal button{border:0;background:none;padding:0;margin-left:8px;font-size:13px;color:var(--bleu);text-decoration:underline;cursor:pointer}
.regle__simu{font-size:12.5px;color:#53555a;margin:10px 0 0}

.maili__fin .maili__phrase{font-size:clamp(34px,4.4vw,70px)}
.maili__credit{font-size:17px;font-weight:600;margin:26px 0 0}
.maili__role{font-size:14px;color:#53555a;margin:6px 0 0;line-height:1.45}

.maili__meuble{position:absolute;right:var(--marge);top:clamp(72px,11vh,110px);bottom:clamp(56px,9vh,86px);width:min(50vw,calc((100vh - 170px) * 1.38));display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:clamp(7px,.9vw,13px)}
.casier{position:relative;display:flex;flex-direction:column;min-height:0;border:1px solid #e3e4e7;background:#f9fafb;border-radius:3px;transform-origin:50% 100%;will-change:transform,opacity;opacity:0}
.casier__creux{position:relative;flex:1;min-height:0;margin:7px 7px 0;background:linear-gradient(180deg,#c9cdd4 0%,#dfe2e7 38%,#eef0f3 100%);box-shadow:inset 0 7px 12px rgba(23,24,27,.2);border-radius:2px;overflow:hidden}
.casier__feuille{position:absolute;left:9%;right:9%;bottom:0;background:#fff;border-top:3px solid var(--c);box-shadow:0 -1px 0 rgba(23,24,27,.08);height:clamp(14px,16%,28px);will-change:transform;transform-origin:50% 100%}
.casier__feuille.est-tampon{background:repeating-linear-gradient(135deg,#fff 0 5px,#fdf1e0 5px 10px);border-top-style:dashed}
.casier__eclat{position:absolute;inset:-1px;border:2px solid var(--c);border-radius:3px;opacity:0;pointer-events:none}
.casier__bas{display:flex;align-items:baseline;justify-content:space-between;gap:6px;padding:7px 9px 8px;font-size:clamp(11.5px,1vw,14px);font-weight:600;white-space:nowrap}
.casier__nom{overflow:hidden;text-overflow:ellipsis;color:var(--c)}
.casier__nb{font:500 13px/1 "IBM Plex Mono",ui-monospace,monospace;color:#17181b}
.casier__tag{position:absolute;left:50%;top:10%;transform:translateX(-50%);background:#17181b;color:#fff;font-size:11px;font-weight:600;padding:5px 7px;border-radius:2px;white-space:nowrap;opacity:0;z-index:2}

.maili__plateau{position:absolute;left:var(--marge);bottom:clamp(56px,9vh,86px);width:calc(var(--lw) * 1.2);border-top:3px solid #17181b;padding-top:8px;font:500 11px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.1em;color:#7e8085;opacity:0;white-space:nowrap}

.lettre{position:absolute;left:0;top:0;width:var(--lw);height:var(--lh);background:#fff;border:1px solid #d3d6dc;border-radius:3px;box-shadow:0 7px 18px rgba(23,24,27,.11);padding:0 10px 9px;display:flex;flex-direction:column;justify-content:flex-end;will-change:transform,opacity;opacity:0;overflow:hidden}
.lettre::before{content:"";position:absolute;left:0;right:0;top:0;height:46%;background:linear-gradient(to bottom right,transparent calc(50% - .7px),#dfe1e6 calc(50% - .7px),#dfe1e6 calc(50% + .7px),transparent calc(50% + .7px)) left/50.2% 100% no-repeat,linear-gradient(to bottom left,transparent calc(50% - .7px),#dfe1e6 calc(50% - .7px),#dfe1e6 calc(50% + .7px),transparent calc(50% + .7px)) right/50.2% 100% no-repeat}
.lettre__heure{position:absolute;top:8px;right:9px;font:400 10px/1 "IBM Plex Mono",ui-monospace,monospace;color:#7e8085}
.lettre__de{font-size:clamp(11.5px,.95vw,14px);font-weight:600;position:relative}
.lettre__objet{font-size:clamp(10.5px,.82vw,12.5px);line-height:1.25;color:#53555a;margin-top:2px;position:relative;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.maili__carte{position:absolute;left:0;top:0;width:min(620px,88vw);background:#fff;border:1px solid #efc9bf;border-top:4px solid var(--alerte);border-radius:4px;box-shadow:0 24px 60px rgba(23,24,27,.2);padding:clamp(16px,2vw,26px);opacity:0;will-change:transform,opacity;pointer-events:none}
.carte__type{font-size:13px;font-weight:600;color:var(--alerte);margin:0 0 8px}
.carte__objet{font:700 clamp(19px,1.9vw,27px)/1.18 "Bitter",Georgia,serif;margin:0 0 10px;letter-spacing:-.012em}
.carte__pourquoi{font-size:14px;line-height:1.45;color:#53555a;margin:0 0 16px}
.carte__auth{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;font-weight:500;align-items:center;padding-top:13px;border-top:1px solid #e8e9ec}
.carte__auth code{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;color:#7e8085}
.carte__oui,.carte__non{position:relative;opacity:0}
.carte__oui{color:#00804a}
.carte__non{color:var(--alerte)}
.carte__non i{position:absolute;left:-2px;right:-2px;top:52%;height:2px;background:var(--alerte);transform:scaleX(0);transform-origin:0 50%}

.maili__mention{position:absolute;left:var(--marge);bottom:clamp(16px,3vh,30px);font:500 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;color:#9a9ca1}

@media (max-width:720px){
  .maili{--lw:clamp(146px,44vw,180px)}
  .maili__col{top:62px;left:20px;right:20px;width:auto}
  .maili__etape{margin-bottom:12px}
  .maili__phrase{font-size:28px}
  .maili__detail{font-size:14px;margin-top:10px}
  .maili__couverture{left:20px;top:24%;width:auto}
  .maili__marque{font-size:84px}
  .passages{margin-top:20px}
  .mesures{margin-top:16px}.mesure b{font-size:40px}.mesure span{font-size:12px}
  .mesures__note{display:none}
  .regle{margin-top:14px;padding:11px}
  .maili__fin .maili__phrase{font-size:32px}
  .maili__meuble{left:20px;right:20px;width:auto;top:56%;bottom:44px;gap:6px}
  .casier__creux{margin:5px 5px 0}.casier__bas{padding:5px 6px 6px;font-size:11px}.casier__nb{font-size:11px}
  .maili__plateau{left:50%;margin-left:calc(var(--lw) * -.6);bottom:auto;top:calc(56% - 18px);padding-top:0;border-top:0;border-bottom:3px solid #17181b;height:6px;color:transparent}
  .maili__mention{left:20px;bottom:14px;font-size:9.5px}
}
@media (max-width:720px) and (max-height:700px){.maili__phrase{font-size:24px}.maili__meuble{top:60%}.maili__plateau{top:calc(60% - 18px)}}
/* Fin commune (css/fin.css) aux couleurs de Maili : elle recouvre la scène. */
.maili__fc{position:absolute;inset:0;z-index:60;background:#fff;visibility:hidden;opacity:0;padding:6vh 6vw 12vh;--fc-texte:#17181b;--fc-texte-2:#53555a;--fc-accent:#0064d2;--fc-sur-accent:#fff;--fc-accent-texte:#0058b8;--fc-trait:#e3e5e8;--fc-corps:"Public Sans","Helvetica Neue",Arial,sans-serif;--fc-titre:700 1em/1 "Bitter",Georgia,serif}
.maili__fc .fc__nom{letter-spacing:-.018em}
/* Téléphone debout : la mention passe en haut, loin des boutons de la barre. */
@media (max-width:720px) and (orientation:portrait){.maili__mention{top:18px;bottom:auto}}