/* ==========================================================================
   social.chilah.fr — feuille de style unique.
   Deux mondes : la plage (photo, accroche en encre sur le ciel) et le faux
   ordinateur (verre sombre sur la même plage floutée). L'écran du portable
   est un vrai bouton HTML posé en perspective sur la photo par app.js.
   ========================================================================== */

@font-face {
  font-family: "Unbounded";
  src: url("fonts/Unbounded-latin.woff2") format("woff2");
  font-weight: 500 900;
  font-display: swap;
  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: "Zalando Sans";
  src: url("fonts/ZalandoSans-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  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;
}

:root {
  /* Marque */
  --royal: #1e61f4;
  --social: #7a8fb2;          /* couleur du Pôle Social (POLE_COLORS du CRM) */
  --ink: #071118;
  --ink-2: rgba(7, 17, 24, 0.78);
  /* Plage : voile clair qui garantit l'encre même si l'accroche déborde sur la mer */
  --voile: 236, 232, 222;
  --ciel: #d1d7cc;            /* haut du ciel de scene-mac-2048.webp, moyenne mesurée */
  /* Faux ordinateur */
  --os-fond: #0b1220;
  --os-verre: rgba(14, 18, 27, 0.9);
  --os-verre-barre: rgba(10, 14, 24, 0.45);   /* barre de menus : verre sombre flouté */
  --os-verre-flottant: rgba(24, 28, 38, 0.78); /* menu déroulant, notification, info-bulles */
  --os-verre-dock: rgba(16, 20, 30, 0.38);
  --os-ligne: rgba(255, 255, 255, 0.12);
  --os-survol: rgba(255, 255, 255, 0.1);
  --os-texte: #f4f6fa;
  --os-texte-2: #b4bccb;
  --os-accent: #6e98ff;
  --os-alerte: #c42b1c;       /* pastille des non-lus : blanc dessus = 5,7:1 */
  --os-note: #f0d48a;
  /* Géométrie du bureau : barre de menus en haut, dock flottant en bas. Les fenêtres vivent entre
     les deux ; app.js mesure la barre et le dock eux-mêmes (zone), il ne recopie pas ces valeurs. */
  --menus-h: 30px;
  --dock-h: 70px;
  --dock-bas: 8px;
  --zone-bas: calc(var(--dock-h) + var(--dock-bas));
  /* Mouvement */
  --duree-zoom: 1100ms;
  --courbe-zoom: cubic-bezier(0.65, 0, 0.35, 1);
  --pile-titre: "Unbounded", "Arial Black", system-ui, sans-serif;
  --pile-texte: "Zalando Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; }
body {
  background: var(--os-fond);
  color: var(--ink);
  font-family: var(--pile-texte);
  font-size: 16px;
  line-height: 1.5;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--os-accent); outline-offset: 2px; }

.evitement {
  position: fixed; left: 12px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--ink); color: #fff; text-decoration: none;
  transform: translateY(-160%);
  transition: transform 160ms ease-out;
}
.evitement:focus { transform: none; }
.lecteur {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.logo-carre {
  display: inline-block; flex: none;
  width: 1.6em; height: 1.6em;
  background: url("favicon.svg") center / contain no-repeat;
}

/* ============================================================== la plage */

.plage { position: fixed; inset: 0; overflow: hidden; background: var(--ciel); }
.plage.cachee { visibility: hidden; }

.scene {
  position: absolute; inset: 0;
  transform-origin: 0 0;
  transition: transform var(--duree-zoom) var(--courbe-zoom);
  will-change: transform;
}
.scene.sans-transition { transition: none; }
/* Ciel prolongé au-dessus de la photo quand elle ne couvre pas tout (téléphone, tablette en hauteur) :
   la rangée du haut de la photo, étirée colonne par colonne, pour un raccord sans couture. */
.scene::before {
  content: ""; position: absolute; top: 0;
  left: var(--photo-x, 0px); width: var(--photo-w, 100%);
  height: calc(var(--haut-photo, 0px) + 1px);
  background: var(--ciel) url("img/ciel-mac.webp") 0 0 / 100% 1px repeat-y;
  pointer-events: none;
}
.scene-img {
  position: absolute; left: 0; top: 0;
  max-width: none; user-select: none; -webkit-user-drag: none;
}

/* L'écran : 960 × 540 « logiques », projetés sur la photo (matrix3d). */
.ecran {
  position: absolute; left: 0; top: 0;
  width: 960px; height: 540px;
  transform-origin: 0 0;
  padding: 0; border: 0; margin: 0;
  overflow: hidden;
  display: grid; place-content: center; justify-items: center; gap: 6px;
  background: #0d1117; color: #fff;
  font-family: var(--pile-titre);
}
/* L'anneau de focus est peint sur le dernier enfant : un outline serait recouvert par .ecran-fond. */
.ecran:focus-visible { outline: none; }
.ecran:focus-visible .ecran-reflet { box-shadow: inset 0 0 0 12px #fff; }
.ecran-fond {
  position: absolute; inset: 0;
  background: #1d3170 url("img/fond-pole-social.webp") center / cover;
  transition: filter 300ms ease-out;
}
.ecran:hover .ecran-fond { filter: brightness(1.15); }
/* La caméra du portable : pilule flottante en haut de l'écran, comme dans la barre de menus. */
.ecran-ile {
  position: absolute; left: 50%; top: 1.2%;
  width: 7%; height: 3.6%;
  border-radius: 999px;
  background: #000;
  transform: translateX(-50%);
}
.ecran-heure { position: relative; font-size: 148px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.ecran-date { position: relative; font-family: var(--pile-texte); font-size: 30px; opacity: 0.85; }
.ecran-date::first-letter { text-transform: uppercase; }
.ecran-entrer {
  position: relative; margin-top: 44px;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 30px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  font-family: var(--pile-texte); font-size: 30px; font-weight: 600;
  transition: background-color 200ms ease-out;
  animation: respire 2.8s ease-in-out infinite;
}
.ecran:hover .ecran-entrer, .ecran:focus-visible .ecran-entrer { background: rgba(255, 255, 255, 0.32); }
.ecran-reflet {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 36%);
}
@keyframes respire {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.28); }
  50% { box-shadow: 0 0 0 14px rgba(255, 255, 255, 0); }
}

.entete {
  position: absolute; left: clamp(20px, 4vw, 64px); top: 18px;
  display: flex; align-items: center; gap: 10px;
  font-family: var(--pile-titre); font-weight: 600; font-size: 15px; color: var(--ink);
}
.entete-pole { font-family: var(--pile-texte); font-weight: 500; color: var(--ink-2); margin-left: 4px; }

.accroche {
  position: absolute;
  left: clamp(20px, 4vw, 64px);
  top: clamp(56px, 9vh, 120px);
  width: min(52vw, 46rem);
  margin: 0;
}
.accroche::before {
  content: ""; position: absolute; z-index: -1;
  inset: -12% -18% -22% -14%;
  background: radial-gradient(ellipse at 35% 45%, rgba(var(--voile), 0.72) 0%, rgba(var(--voile), 0.45) 45%, rgba(var(--voile), 0) 72%);
  pointer-events: none;
}
.surtitre {
  margin: 0 0 10px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-2);
}
.accroche h1 {
  margin: 0;
  font-family: var(--pile-titre); font-weight: 600;
  font-size: clamp(24px, 2.6vw, 46px); line-height: 1.1; letter-spacing: -0.01em;
  text-wrap: balance;
}
/* Dernier recours si la toile du parasol passe sous l'accroche (app.js, calculer) : plaque claire. */
.accroche.sur-toile::before {
  inset: -14px -18px; border-radius: 18px;
  background: rgba(var(--voile), 0.9);
}
.sous {
  margin: 14px 0 0; max-width: 32rem;
  font-size: clamp(15px, 1.15vw, 19px); color: var(--ink-2);
}

.pied {
  position: absolute; right: clamp(16px, 3vw, 40px); bottom: 14px;
  display: flex; gap: 16px;
  font-size: 13px;
}
.pied a { color: #fff; text-decoration: none; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6); }
.pied a:hover { text-decoration: underline; }

.entete, .accroche, .pied { transition: opacity 320ms ease-out; }
.plage.zoom .entete, .plage.zoom .accroche, .plage.zoom .pied { opacity: 0; pointer-events: none; }

.sans-script {
  position: absolute; left: 20px; right: 20px; bottom: 20px;
  padding: 16px 20px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.92);
}

/* ===================================================== le faux ordinateur */

.bureau {
  position: fixed; inset: 0; z-index: 10;
  background: #1d3170 url("img/fond-pole-social.webp") center / cover;
  color: var(--os-texte);
  font-size: 14px;
  opacity: 0;
  transition: opacity 300ms ease-out;
}
.bureau.visible { opacity: 1; }
/* Fond d'écran du Pôle Social : le dégradé est l'image, le mot-symbole et le libellé sont posés
   par-dessus pour rester entiers et centrés quel que soit le format de l'écran. */
.fond-marque {
  --mot-w: min(48vw, 62vh, 760px);
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(var(--mot-w) * 0.075);
  padding-bottom: 6vh;
  pointer-events: none; user-select: none;
}
.fond-mot { width: var(--mot-w); height: auto; }
.fond-pole {
  color: #fff;
  font-family: var(--pile-texte); font-weight: 500;
  font-size: calc(var(--mot-w) * 0.042); letter-spacing: 0.14em; text-transform: uppercase;
}
.bureau svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* --------------------------------------------------------- barre de menus */
.menus {
  position: absolute; left: 0; right: 0; top: 0; z-index: 9002;
  height: var(--menus-h);
  display: flex; align-items: center; gap: 2px;
  padding: 0 12px 0 6px;
  background: var(--os-verre-barre);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  color: #fff; font-size: 13px; font-weight: 500; line-height: 1;
  user-select: none;
}
.menus-logo {
  flex: none; height: 24px; padding: 0 11px;
  display: grid; place-items: center;
  border: 0; border-radius: 6px; background: transparent; color: #fff;
}
.menus-logo svg { width: 15px; height: 14px; fill: currentColor; stroke: none; }
.menus-logo[aria-expanded="true"] { background: rgba(255, 255, 255, 0.2); }
@media (hover: hover) { .menus-logo:hover { background: rgba(255, 255, 255, 0.2); } }
.menus-logo:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.menus-appli { min-width: 0; padding: 0 8px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Pilule décorative au centre de la barre (caméra), masquée quand la place manque. */
.menus-ile {
  position: absolute; left: 50%; top: 4px;
  width: clamp(84px, 7vw, 124px); height: calc(var(--menus-h) - 8px);
  border-radius: 999px; background: #000;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: translateX(-50%);
}
.menus-droite { flex: none; margin-left: auto; display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.menus-date { display: inline-block; }
.menus-date::first-letter { text-transform: uppercase; }
.menus-heure { font-variant-numeric: tabular-nums; }

/* Menu déroulant du logo, sous la barre. */
.menu {
  position: absolute; left: 6px; top: calc(var(--menus-h) + 4px); z-index: 9003;
  width: 264px; max-width: calc(100% - 12px); padding: 6px;
  display: flex; flex-direction: column;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  background: var(--os-verre-flottant);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  animation: deroule 140ms ease-out;
}
.menu-titre { display: flex; align-items: center; gap: 10px; margin: 0; padding: 8px 10px 10px; font-family: var(--pile-titre); font-size: 13px; font-weight: 600; }
.menu button, .menu a {
  display: block; width: 100%; padding: 7px 10px;
  border: 0; border-radius: 7px; background: transparent;
  font-size: 13.5px; text-align: left; text-decoration: none;
}
.menu button:hover, .menu a:hover, .menu button:focus-visible, .menu a:focus-visible { background: var(--royal); color: #fff; }
.menu button:focus-visible, .menu a:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.menu hr { width: calc(100% - 20px); margin: 5px 10px; border: 0; border-top: 1px solid var(--os-ligne); }
@keyframes deroule { from { opacity: 0; transform: translateY(-4px); } }

/* --------------------------------------------------------- icônes du bureau */
/* En colonne à droite, sous la barre de menus ; une colonne de plus vers la gauche si la hauteur manque. */
.bureau-icones {
  position: absolute; right: 12px; top: calc(var(--menus-h) + 12px); bottom: calc(var(--zone-bas) + 8px);
  display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 110px); gap: 0 6px;
  direction: rtl;
  list-style: none; margin: 0; padding: 0;
  pointer-events: none;
}
.bureau-icones li { direction: ltr; pointer-events: auto; }
/* Une icône qui reçoit le focus passe au-dessus des fenêtres, sinon le focus serait invisible. */
.bureau-icones li:focus-within { position: relative; z-index: 9000; }
.icone {
  width: 108px; padding: 6px 4px;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  border: 0; border-radius: 12px; background: transparent;
  text-align: center; font-size: 12.5px; line-height: 1.2;
}
@media (hover: hover) { .icone:hover { background: rgba(255, 255, 255, 0.12); } }
/* Anneau blanc doublé d'encre : lisible sur les zones sombres comme claires du fond. */
.icone:focus-visible { outline: 2px solid #fff; outline-offset: 0; box-shadow: 0 0 0 4px var(--ink); }
.icone-pic { display: block; width: 64px; height: 64px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.3)); }
.icone-nom {
  max-width: 100%; padding: 2px 7px 3px; border-radius: 6px;
  background: rgba(8, 12, 22, 0.66); color: #fff; font-weight: 500;
}

/* ------------------------------------------------------------- fenêtres */
.fenetre {
  position: absolute;
  display: flex; flex-direction: column;
  min-width: 320px; min-height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 12px;
  background: var(--os-verre);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.42), 0 0 0 1px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  animation: ouvre 180ms ease-out;
}
.fenetre:not(.active) { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 0, 0, 0.45); }
.fenetre:focus { outline: none; }
.fenetre-petite { min-height: 0; max-height: calc(100% - var(--menus-h) - var(--zone-bas) - 16px); }
/* Agrandie : tout l'espace entre la barre de menus et le dock. */
.fenetre.agrandie {
  left: 0 !important; top: var(--menus-h) !important;
  width: 100% !important; height: calc(100% - var(--menus-h) - var(--zone-bas)) !important;
  max-height: none;
}
@keyframes ouvre { from { opacity: 0; transform: scale(0.97); } }

/* Barre de titre : les trois boutons à gauche (fermer, réduire, agrandir), le titre au centre. */
.titre {
  position: relative; flex: none; height: 38px;
  display: flex; align-items: center;
  padding: 0 12px;
  border-bottom: 1px solid var(--os-ligne);
  color: var(--os-texte-2); font-size: 13px; font-weight: 600;
  cursor: grab; user-select: none; touch-action: none;
}
.fenetre.active .titre { color: var(--os-texte); background: rgba(255, 255, 255, 0.04); }
.fenetre.agrandie .titre { cursor: default; }
.titre-nom {
  position: absolute; left: 90px; right: 90px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center;
  pointer-events: none;
}
.titre-boutons { position: relative; z-index: 1; display: flex; align-items: center; }
/* Pastilles de 14 px ; la zone cliquable déborde à 24 × 24 px (::after), sans chevauchement. */
.titre-boutons button {
  position: relative; flex: none;
  width: 14px; height: 14px; margin-right: 10px; padding: 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  color: rgba(0, 0, 0, 0.62);
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25);
}
.titre-boutons button::after { content: ""; position: absolute; inset: -5px; }
.titre-boutons [data-cmd="fermer"] { background: #ff5f57; }
.titre-boutons [data-cmd="reduire"] { background: #febc2e; }
.titre-boutons [data-cmd="agrandir"] { background: #28c840; }
.fenetre:not(.active) .titre-boutons:not(:hover):not(:focus-within) button { background: #6f7580; }
.titre-boutons button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.titre-boutons svg { width: 10px; height: 10px; stroke-width: 2.6; opacity: 0; }
.titre-boutons:hover svg, .titre-boutons:focus-within svg { opacity: 1; }
@media (hover: none) { .titre-boutons svg { opacity: 1; } }

/* ------------------------------------------------------------ navigateur */
.nav-barre {
  flex: none; display: flex; align-items: center; gap: 4px;
  padding: 8px 10px 6px;
}
.nav-btn {
  width: 32px; height: 32px; flex: none;
  display: grid; place-items: center;
  border: 0; border-radius: 8px; background: transparent;
}
.nav-btn:hover:not(:disabled) { background: var(--os-survol); }
.nav-btn:disabled { opacity: 0.35; cursor: default; }
.nav-adresse {
  flex: 1; min-width: 0; height: 32px; margin: 0 4px;
  display: flex; align-items: center; gap: 6px;
  padding: 0 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  white-space: nowrap; overflow: hidden;
}
.nav-cadenas { width: 15px !important; height: 15px !important; flex: none; color: var(--os-texte-2); }
.nav-page { margin-left: -6px; color: var(--os-texte-2); overflow: hidden; text-overflow: ellipsis; }
.nav-onglet {
  flex: none; height: 32px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 0 12px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  text-decoration: none; font-size: 13px;
}
.nav-onglet:hover { background: rgba(255, 255, 255, 0.16); }
.nav-onglet svg { width: 15px; height: 15px; }
.favoris {
  flex: none; display: flex; gap: 2px;
  padding: 0 10px 8px;
  overflow-x: auto; scrollbar-width: none;
  border-bottom: 1px solid var(--os-ligne);
}
.favoris button {
  flex: none; padding: 4px 10px;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--os-texte-2); font-size: 12.5px;
}
.favoris button:hover { background: var(--os-survol); color: var(--os-texte); }
.favoris button[aria-current="page"] { background: rgba(255, 255, 255, 0.14); color: var(--os-texte); }
.favoris button:focus-visible { outline-offset: -2px; } /* la barre défile (overflow) : un anneau extérieur serait rogné */
.vue { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #fff; }
.vue iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #fff; }
.vue:has(> .vue-accueil:not([hidden])) iframe { visibility: hidden; }
.nav-info {
  flex: none; margin: 0; padding: 5px 14px;
  border-bottom: 1px solid var(--os-ligne);
  color: var(--os-texte-2); font-size: 12px;
}
/* Page de démarrage du faux navigateur : le site tiers ne se charge qu'après ce choix. */
.vue-accueil {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  padding: 32px; text-align: center;
  background: #10151f; color: var(--os-texte);
}
.vue-accueil h2 { margin: 6px 0 0; font-family: var(--pile-titre); font-size: 20px; font-weight: 600; }
.vue-accueil p { margin: 0; max-width: 34rem; color: var(--os-texte-2); line-height: 1.6; }
.vue-accueil a:not(.bouton) { color: var(--os-texte); }
.tuile-lk {
  width: 72px; height: 72px; border-radius: 18px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #8fa3c4, #556d96);
  font-family: var(--pile-titre); font-size: 22px; font-weight: 700; color: #fff;
}
.vue-accueil-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }
.vue-accueil-actions .bouton { margin-top: 0; }
.fenetre.deplacee iframe { pointer-events: none; }
.vue-attente {
  position: absolute; inset: 0; margin: 0;
  display: grid; place-items: center;
  background: #f5f6f8; color: #3d4757; font-size: 14px;
}

/* ----------------------------------------------------------------- mails */
.mails-avertissement {
  flex: none; margin: 0; padding: 8px 14px;
  background: rgba(240, 180, 41, 0.16); color: var(--os-note);
  border-bottom: 1px solid var(--os-ligne);
  font-size: 13px; font-weight: 600;
}
.mails {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(230px, 300px) 1fr;
}
.mails-liste {
  list-style: none; margin: 0; padding: 0;
  overflow-y: auto;
  border-right: 1px solid var(--os-ligne);
}
.mail-ligne {
  width: 100%; display: grid; grid-template-columns: 34px 1fr auto; gap: 2px 10px; align-items: start;
  padding: 12px 14px;
  border: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  background: transparent; text-align: left;
  color: var(--os-texte-2);
}
.mail-ligne:hover { background: rgba(255, 255, 255, 0.05); }
.mail-ligne:focus-visible { outline-offset: -2px; } /* la liste défile (overflow) : un anneau extérieur serait rogné */
.mail-ligne[aria-current="true"] { background: rgba(110, 152, 255, 0.16); }
.mail-avatar { grid-row: span 2; }
.mail-de { font-size: 13px; color: var(--os-texte); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mail-exemple {
  align-self: center; padding: 1px 7px; border-radius: 999px;
  background: rgba(240, 212, 138, 0.14); color: var(--os-note);
  font-size: 11px; font-weight: 600;
}
.mail-objet { grid-column: 2 / 4; font-size: 13px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.mail-ligne.non-lu .mail-de, .mail-ligne.non-lu .mail-objet { font-weight: 700; color: var(--os-texte); }
.mail-ligne.non-lu .mail-avatar { box-shadow: 0 0 0 2px var(--os-accent); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--pile-titre); font-size: 11px; font-weight: 700; color: #fff;
}
.avatar-lk { background: linear-gradient(145deg, #8fa3c4, #556d96); }
.avatar-chilah { background: var(--social) url("favicon.svg") center / 100% no-repeat; border-radius: 9px; }
.mails-lecture { overflow-y: auto; padding: 22px 28px 28px; line-height: 1.6; }
.mails-lecture h2 { margin: 0 0 12px; font-family: var(--pile-titre); font-size: 19px; font-weight: 600; line-height: 1.3; }
.mail-entete { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; color: var(--os-texte-2); font-size: 13px; }
.mail-entete strong { display: block; color: var(--os-texte); font-weight: 600; }
.mails-lecture p { margin: 0 0 12px; max-width: 38rem; }
.mail-retour { display: none; margin: 0 0 14px; padding: 6px 10px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.mail-fictif { margin-top: 22px !important; padding-top: 12px; border-top: 1px solid var(--os-ligne); color: var(--os-note); font-size: 13px; }

/* ------------------------------------------- petites fenêtres de texte */
.texte { padding: 24px 26px 28px; overflow-y: auto; line-height: 1.6; }
.texte h2 { margin: 0 0 12px; font-family: var(--pile-titre); font-size: 21px; font-weight: 600; line-height: 1.25; }
.texte p { margin: 0 0 12px; }
.texte strong { color: #fff; }
.bouton {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 10px 18px;
  border: 0; border-radius: 999px;
  background: var(--royal); color: #fff;
  font-weight: 600; text-decoration: none;
}
.bouton:hover { background: #1953d6; }
.bouton-second { background: rgba(255, 255, 255, 0.1); }
.bouton-second:hover { background: rgba(255, 255, 255, 0.18); }
.texte-note { margin-top: 14px !important; color: var(--os-texte-2); font-size: 13px; }
.texte-note a { color: var(--os-texte-2); }
.bouton svg { width: 16px; height: 16px; }

/* ------------------------------------------------- notification (en haut à droite) */
.notif {
  position: absolute; right: 12px; top: calc(var(--menus-h) + 10px); z-index: 9001;
  width: 344px;
  display: grid; grid-template-columns: 40px 1fr; column-gap: 12px; row-gap: 2px; align-items: center;
  padding: 12px 16px 12px 12px; text-align: left;
  border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 18px;
  background: var(--os-verre-flottant);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(30px) saturate(160%);
  -webkit-backdrop-filter: blur(30px) saturate(160%);
  animation: arrive 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.notif:focus-visible { outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 4px var(--ink), 0 16px 40px rgba(0, 0, 0, 0.38); }
.notif-icone { grid-row: span 2; width: 40px; height: 40px; }
.notif-app { font-size: 12px; color: var(--os-texte-2); }
.notif-texte { font-size: 14px; font-weight: 600; }
@keyframes arrive { from { opacity: 0; transform: translateX(28px); } }

/* --------------------------------------------------------------------- dock */
.dock {
  position: absolute; left: 50%; bottom: var(--dock-bas); z-index: 9002;
  height: var(--dock-h); max-width: calc(100% - 16px);
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 22px;
  background: var(--os-verre-dock);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(26px) saturate(170%);
  -webkit-backdrop-filter: blur(26px) saturate(170%);
  transform: translateX(-50%);
}
.dock-app {
  position: relative; flex: none;
  width: 52px; height: 52px; padding: 0;
  border: 0; border-radius: 12px; background: transparent;
}
.dock-pic {
  position: relative; display: block; width: 100%; height: 100%;
  border-radius: 23%;
  transform-origin: 50% 100%;
  transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.dock-pic img { display: block; width: 100%; height: 100%; }
/* Grossissement léger au survol (souris) et au focus clavier. */
@media (hover: hover) {
  .dock-app:hover .dock-pic { transform: translateY(-6px) scale(1.16); }
}
.dock-app:focus-visible { outline: none; }
.dock-app:focus-visible .dock-pic {
  transform: translateY(-6px) scale(1.16);
  outline: 2px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 2px var(--ink);
}
/* Le nom de l'appli au-dessus de l'icône (c'est son nom accessible : aucune copie à tenir). */
.dock-app::before {
  content: attr(aria-label);
  position: absolute; left: 50%; bottom: calc(100% + 18px);
  padding: 4px 10px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: var(--os-verre-flottant); color: #fff;
  font-size: 12.5px; font-weight: 500; line-height: 1.3; white-space: nowrap;
  transform: translateX(-50%);
  opacity: 0; pointer-events: none;
  transition: opacity 120ms ease-out;
}
@media (hover: hover) {
  .dock-app:hover::before { opacity: 1; }
}
.dock-app:focus-visible::before { opacity: 1; }
/* Un point sous chaque appli ouverte (classe posée par majBarre d'après l'état des fenêtres). */
.dock-app.ouverte::after {
  content: ""; position: absolute; left: 50%; bottom: -7px;
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.72);
  transform: translateX(-50%);
}
.dock-app.active::after { background: #fff; }
.dock-separateur { flex: none; align-self: stretch; width: 1px; margin: 14px 2px; background: rgba(255, 255, 255, 0.3); }
.pastille {
  position: absolute; top: -5px; right: -5px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  display: grid; place-items: center;
  background: var(--os-alerte); color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  font-size: 11.5px; font-weight: 700; line-height: 1;
}

/* ============================================================ téléphone */
@media (max-width: 760px) {
  .accroche { right: 20px; width: auto; top: 58px; }
  .accroche h1 { font-size: clamp(23px, 6.6vw, 30px); }
  .surtitre { font-size: 12px; margin-bottom: 6px; }
  .sous { margin-top: 10px; font-size: 15px; }
  .entete { top: 16px; font-size: 13px; }
  .entete-pole { display: none; }
  .pied { left: 0; right: 0; justify-content: center; }

  :root { --dock-h: 62px; --dock-bas: 6px; }
  .menus-ile { display: none; }
  .bureau-icones {
    left: 8px; right: 8px; bottom: auto;
    grid-auto-flow: row; grid-template-rows: none; grid-template-columns: repeat(4, 1fr); gap: 6px 0;
    direction: ltr;
  }
  .icone { width: 100%; padding: 6px 2px; }
  .icone-pic { width: 58px; height: 58px; }
  .icone-nom { padding: 2px 3px 3px; white-space: nowrap; } /* « Rendez-vous » tient sur une ligne, sans coupure au trait d'union */
  /* Une fenêtre à la fois, entre la barre de menus et le dock. */
  .fenetre, .fenetre.agrandie {
    left: 0 !important; top: var(--menus-h) !important;
    width: 100% !important; height: calc(100% - var(--menus-h) - var(--zone-bas)) !important;
    min-width: 0; max-height: none; border-radius: 0 0 14px 14px; border-width: 0;
  }
  .titre { cursor: default; }
  .titre-nom { left: 68px; right: 68px; }
  .titre-boutons [data-cmd="agrandir"] { display: none; }
  .nav-onglet span, .nav-onglet { font-size: 0; gap: 0; padding: 0 9px; }
  .nav-onglet svg { width: 17px; height: 17px; }
  .mails { grid-template-columns: 1fr; }
  .mails.lecture-ouverte .mails-liste { display: none; }
  .mails:not(.lecture-ouverte) .mails-lecture { display: none; }
  .mail-retour { display: inline-block; }
  .notif { left: 8px; right: 8px; top: auto; bottom: calc(var(--zone-bas) + 8px); width: auto; }
  .dock { gap: 7px; padding: 0 8px; border-radius: 19px; }
  .dock-app { width: 46px; height: 46px; }
  .dock-separateur { margin: 12px 1px; }
  .fond-marque { --mot-w: min(70vw, 420px); }
}
@media (max-height: 640px) and (max-width: 760px) {
  .sous { display: none; }
}

/* ===================================================== mouvement réduit */
@media (prefers-reduced-motion: reduce) {
  :root { --duree-zoom: 0ms; }
  .ecran-entrer, .fenetre, .notif, .menu { animation: none; }
  .bureau, .entete, .accroche, .pied, .evitement, .dock-pic, .dock-app::before { transition: none; }
  /* Pas de grossissement du dock : l'anneau de focus et le nom suffisent. */
  .dock-app:hover .dock-pic, .dock-app:focus-visible .dock-pic { transform: none; }
}

/* ====================================================== contraste forcé */
/* Les pastilles colorées des fenêtres perdent leur fond : on montre leur contour et leur glyphe. */
@media (forced-colors: active) {
  .titre-boutons button { border: 1px solid ButtonText; }
  .titre-boutons svg { opacity: 1; }
  .menus-ile, .ecran-ile { forced-color-adjust: none; }
}