/* Iris — l'agente du courrier (iris.soiagent.ai, 30/10/2026).
   Même langage que Kai et Eva (bandeau, pastilles de verre, compteurs, onglets collés), aux couleurs d'Iris : cyan.
   Une colonne sur l'iPhone ; deux volets à partir de 1000 px. Clair le jour, nuit bleu pétrole le soir. */
:root{
  --ground:#F2F8FA; --surface:#FFFFFF; --surface-2:#F5FAFB; --surface-3:#E7F1F4;
  --ink:#0B1E26; --ink-2:#34505B; --mute:#6A8692; --line:#D8E7EC; --line-2:#E6F0F3;
  --iris:#0891B2; --iris-2:#22D3EE; --iris-tint:#E0F7FA; --iris-ink:#0E7490; --iris-fonce:#155E75;
  --gain:#0E9F6E; --gain-tint:#E4F6EE; --gain-ink:#05714F;
  --loss:#E5484D; --loss-tint:#FDECEC; --loss-ink:#B42318;
  --flag:#D97706; --flag-tint:#FFF3DE; --flag-ink:#9A5300;
  --info:#2F6BFF; --info-tint:#EAF0FF;
  --verre:linear-gradient(135deg, rgba(255,255,255,.88), rgba(255,255,255,.62) 58%, rgba(236,250,253,.72)); --verre-bord:rgba(255,255,255,.85);
  --ombre-verre:0 22px 46px -26px rgba(8,80,110,.40), 0 3px 10px -5px rgba(11,30,40,.08);
  --serif:ui-serif, "New York", "Iowan Old Style", Palatino, Georgia, serif;
  --max:1280px; --gout:16px; --nav-h:58px;
  color-scheme:light dark;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#071318; --surface:#0E1F26; --surface-2:#12262E; --surface-3:#1A333D;
    --ink:#EAF6F9; --ink-2:#BCD5DD; --mute:#82A1AC; --line:#22404B; --line-2:#1A333D;
    --iris:#22D3EE; --iris-2:#67E8F9; --iris-tint:#0E3440; --iris-ink:#67E8F9; --iris-fonce:#A5F3FC;
    --gain:#34D399; --gain-tint:#0F2A22; --gain-ink:#6EE7B7; --loss:#F87171; --loss-tint:#2E1519; --loss-ink:#FCA5A5;
    --flag:#FBBF24; --flag-tint:#2C2210; --flag-ink:#FCD34D; --info:#7AA2FF; --info-tint:#16213F;
    --verre:linear-gradient(135deg, rgba(20,44,54,.92), rgba(14,31,38,.84)); --verre-bord:rgba(255,255,255,.07); --ombre-verre:0 22px 46px -26px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --ground:#071318; --surface:#0E1F26; --surface-2:#12262E; --surface-3:#1A333D;
  --ink:#EAF6F9; --ink-2:#BCD5DD; --mute:#82A1AC; --line:#22404B; --line-2:#1A333D;
  --iris:#22D3EE; --iris-2:#67E8F9; --iris-tint:#0E3440; --iris-ink:#67E8F9; --iris-fonce:#A5F3FC;
  --gain:#34D399; --gain-tint:#0F2A22; --gain-ink:#6EE7B7; --loss:#F87171; --loss-tint:#2E1519; --loss-ink:#FCA5A5;
  --flag:#FBBF24; --flag-tint:#2C2210; --flag-ink:#FCD34D; --info:#7AA2FF; --info-tint:#16213F;
  --verre:linear-gradient(135deg, rgba(20,44,54,.92), rgba(14,31,38,.84)); --verre-bord:rgba(255,255,255,.07); --ombre-verre:0 22px 46px -26px rgba(0,0,0,.75);
}

*{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%}
body{font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif; color:var(--ink); line-height:1.4; -webkit-font-smoothing:antialiased;
  overflow-wrap:anywhere; min-height:100vh; padding-bottom:calc(40px + env(safe-area-inset-bottom, 0px));
  background:radial-gradient(900px 560px at 88% -8%, rgba(34,211,238,.20), transparent 62%), radial-gradient(760px 520px at -8% 4%, rgba(8,145,178,.07), transparent 60%), var(--ground) fixed}
button, input{font:inherit; color:inherit}
a{color:var(--iris)}
svg{flex:none}
kbd{font:600 11px/1 ui-monospace, Menlo, monospace; min-width:22px; text-align:center; padding:4px 6px; border-radius:7px; background:var(--surface-3); color:var(--ink-2); box-shadow:inset 0 -1px 0 var(--line)}
:focus-visible{outline:3px solid var(--iris); outline-offset:2px}

/* ── Pastilles de verre (charte des agents SoiAgent), en cyan Iris ── */
.ir-verre{--t:44px; position:relative; flex:none; width:var(--t); height:var(--t); border-radius:calc(var(--t) * .32); display:grid; place-items:center; overflow:hidden; isolation:isolate; color:#fff;
  background:radial-gradient(120% 85% at 78% 118%, rgba(255,255,255,.38), rgba(255,255,255,0) 62%), linear-gradient(155deg, #67E8F9 0%, #0891B2 55%, #155E75 100%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.2), inset 0 -3px 6px rgba(8,51,68,.3), 0 8px 18px -8px rgba(8,145,178,.7), 0 1px 2px rgba(11,18,40,.1)}
.ir-verre::before{content:""; position:absolute; left:7%; right:7%; top:4%; height:46%; z-index:-1; border-radius:40% 40% 50% 50% / 60% 60% 40% 40%; background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0))}
.ir-verre svg{width:calc(var(--t) * .48); height:calc(var(--t) * .48); filter:drop-shadow(0 1px 1.5px rgba(8,51,68,.45))}
.ir-verre.petit{--t:34px}
.ir-verre.cyan{background:radial-gradient(120% 85% at 78% 118%, rgba(255,255,255,.35), transparent 62%), linear-gradient(155deg, #A5F3FC, #22D3EE 50%, #0E7490)}
.ir-verre.ok{background:radial-gradient(120% 85% at 78% 118%, rgba(255,255,255,.35), transparent 62%), linear-gradient(155deg, #34D399, #10B981 55%, #047857); box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 -3px 6px rgba(4,72,52,.3), 0 8px 18px -8px rgba(16,185,129,.7)}
.ir-verre.info{background:radial-gradient(120% 85% at 78% 118%, rgba(255,255,255,.35), transparent 62%), linear-gradient(155deg, #6E9BFF, #2F6BFF 50%, #2254D8); box-shadow:inset 0 1px 1px rgba(255,255,255,.9), inset 0 -3px 6px rgba(8,30,100,.3), 0 8px 18px -8px rgba(47,107,255,.7)}
.ir-dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--mute); margin-right:6px; vertical-align:1px; flex:none}
.ir-dot.ok{background:var(--gain); box-shadow:0 0 0 3px color-mix(in srgb, var(--gain) 18%, transparent)}
.ir-dot.warn{background:var(--flag); box-shadow:0 0 0 3px color-mix(in srgb, var(--flag) 20%, transparent)}
.ir-dot.info{background:var(--info); box-shadow:0 0 0 3px color-mix(in srgb, var(--info) 18%, transparent)}
.ir-dot.cyan{background:var(--iris-2)} .ir-dot.fonce{background:var(--iris-fonce); margin-left:14px}

/* ── Pastilles de texte, boutons ── */
.ir-pill{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:700; padding:3px 9px; border-radius:99px; background:var(--surface-3); color:var(--ink-2); white-space:nowrap; max-width:100%}
.ir-pill.iris{background:var(--iris-tint); color:var(--iris-ink)} .ir-pill.vert{background:var(--gain-tint); color:var(--gain-ink)}
.ir-pill.rouge{background:var(--loss-tint); color:var(--loss-ink)} .ir-pill.orange{background:var(--flag-tint); color:var(--flag-ink)} .ir-pill.bleu{background:var(--info-tint); color:var(--info)}
.ir-go{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:0 16px; border-radius:13px; border:1px solid var(--line);
  background:var(--surface); color:var(--ink); font-size:14.5px; font-weight:650; cursor:pointer; text-decoration:none; white-space:nowrap; transition:box-shadow .2s, transform .1s}
.ir-go:hover{box-shadow:0 6px 18px -10px rgba(8,80,110,.45)} .ir-go:active{transform:scale(.98)} .ir-go:disabled{opacity:.6}
.ir-go svg{width:17px; height:17px}
.ir-go.pri{background:var(--ink); color:var(--ground); border-color:transparent}
.ir-go.iris{background:var(--iris); color:#fff; border-color:transparent}
.ir-go.discret{border-color:transparent; background:none; color:var(--mute)}
.ir-go kbd{display:none; background:transparent; box-shadow:none; border:1px solid currentColor; opacity:.5; color:inherit; padding:3px 5px}
.ir-av{flex:none; width:36px; height:36px; border-radius:50%; display:grid; place-items:center; font-size:13px; font-weight:750; color:var(--iris-ink); background:var(--iris-tint)}
.ir-segment{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:2px; padding:3px; border-radius:13px; background:var(--surface-3)}
.ir-segment button{border:0; background:none; border-radius:10px; min-height:36px; padding:0 10px; font-size:13px; font-weight:650; color:var(--ink-2); cursor:pointer; white-space:nowrap}
.ir-segment button[aria-pressed="true"]{background:var(--surface); color:var(--ink); box-shadow:0 1px 3px rgba(8,40,60,.18)}
.ir-vide{padding:26px 18px; text-align:center; color:var(--mute); font-size:14px; line-height:1.5}
.ir-attente{padding:40px 18px; text-align:center; color:var(--mute); font-size:14px}
.ir-toast{position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom, 0px)); transform:translateX(-50%); z-index:90; max-width:min(560px, calc(100% - 32px));
  padding:12px 18px; border-radius:14px; background:var(--ink); color:var(--ground); font-size:14px; font-weight:600; box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
@keyframes ir-monte{from{opacity:0; transform:translateY(12px)}}
@keyframes ir-tour{to{transform:rotate(360deg)}}

/* ── Porte (connexion) ── */
.ir-porte{min-height:100vh; display:grid; place-items:center; padding:24px var(--gout)}
.ir-porte-c{max-width:440px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; animation:ir-monte .6s cubic-bezier(.16,1,.3,1) both}
.ir-porte-p{width:132px; height:132px; border-radius:50%; overflow:hidden; background:#fff; box-shadow:0 0 0 4px var(--surface), 0 0 0 6px var(--iris), 0 24px 50px -20px rgba(8,145,178,.7)}
.ir-porte-p img{width:100%; height:100%; object-fit:cover}
.ir-porte h1{font-size:30px; font-weight:700; letter-spacing:-.04em; line-height:1.1}
.ir-porte-t{color:var(--ink-2); font-size:15px; line-height:1.5}
.ir-porte .ir-go{margin-top:6px; min-width:260px}
.ir-porte-e{color:var(--loss-ink); font-size:14px}

/* ── Barre du haut ── */
.ir-barre{position:relative; z-index:40; background:color-mix(in srgb, var(--surface) 58%, transparent); -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6);
  border-bottom:1px solid rgba(8,145,178,.14); padding-top:env(safe-area-inset-top, 0px)}
.ir-barre-in{max-width:var(--max); margin:0 auto; padding:0 var(--gout); display:flex; align-items:center; gap:8px; height:56px}
.ir-marque{display:flex; align-items:baseline; gap:8px; white-space:nowrap; text-decoration:none; color:var(--ink)}
.ir-marque .wm{font-size:1.1rem; font-weight:650; letter-spacing:-.045em}
.ir-marque .wm i{font-style:normal; color:var(--iris)}
.ir-marque .fil{color:var(--mute); font-size:.95rem}
.ir-barre-liens{margin-left:auto; display:flex; align-items:center; gap:2px}
.ir-barre-lien{display:inline-flex; align-items:center; gap:7px; padding:8px 11px; border-radius:999px; font-size:.86rem; color:var(--ink-2); text-decoration:none; white-space:nowrap}
.ir-barre-lien:hover{background:rgba(8,145,178,.09); color:var(--iris-ink)}
.ir-barre-lien svg{width:16px; height:16px}
.ir-rond{width:36px; height:36px; flex:none; border-radius:50%; border:1px solid var(--line); background:color-mix(in srgb, var(--surface) 70%, transparent); display:grid; place-items:center; cursor:pointer; color:var(--ink-2); margin-left:4px}
.ir-rond svg{width:17px; height:17px}
.ir-rond.tourne svg{animation:ir-tour .9s linear infinite}
.ir-barre-av{display:block; margin-left:6px; border-radius:50%}
.ir-barre-av img{width:36px; height:36px; border-radius:50%; object-fit:cover; object-position:50% 20%; background:#fff; display:block; box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--iris), 0 6px 16px -6px rgba(8,145,178,.6)}

/* ── Bandeau (iPhone : compact, portrait rond à côté du titre) ── */
.ir-heros{max-width:var(--max); margin:0 auto; padding:20px var(--gout) 0; display:flow-root; animation:ir-monte .6s cubic-bezier(.16,1,.3,1) both}
.ir-surtitre{display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:.72rem; font-weight:650; letter-spacing:.2em; text-transform:uppercase; color:var(--iris-ink)}
.ir-surtitre span{letter-spacing:.01em; text-transform:none; color:var(--mute); font-weight:600; font-size:.82rem}
.ir-q kbd{display:none}
.ir-heros h1{font-size:1.7rem; font-weight:650; letter-spacing:-.045em; line-height:1.08; margin-top:10px; text-wrap:balance}
.ir-lum{background:linear-gradient(100deg, #155E75 0%, #0891B2 30%, #22D3EE 62%, #0E7490 100%); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 0 22px rgba(34,211,238,.25))}
.ir-chapo{margin-top:12px; font-family:var(--serif); font-size:1.06rem; line-height:1.45; max-width:62ch}
.ir-chapo-l{margin-top:6px; font-size:.8rem; color:var(--mute)}
.ir-missions{display:none}
.ir-portrait{float:right; position:relative; margin:2px 0 8px 14px; width:88px; height:88px}
.ir-portrait img{width:88px; height:88px; border-radius:50%; object-fit:cover; object-position:50% 18%; background:#fff; box-shadow:0 0 0 3px var(--surface), 0 0 0 5px var(--iris), 0 18px 34px -16px rgba(8,145,178,.7)}
.ir-halo, .ir-disque, .ir-note{display:none}

/* ── Compteurs ── */
.ir-compteurs{max-width:var(--max); margin:18px auto 0; padding:0 var(--gout); display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px}
.ir-cpt{display:flex; align-items:center; gap:12px; padding:14px; min-width:0; text-decoration:none; color:var(--ink); border-radius:20px;
  background:var(--verre); border:1px solid var(--verre-bord); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--ombre-verre); transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s}
.ir-cpt:hover{transform:translateY(-2px)}
.ir-cpt .ir-verre{--t:38px}
.ir-cpt-t{display:block; min-width:0}
.ir-cpt-t b{display:block; font-size:1.5rem; font-weight:650; letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums}
.ir-cpt-t > span{display:block; font-size:.8rem; font-weight:650; margin-top:5px}
.ir-cpt-t small{display:block; font-size:.72rem; color:var(--mute); margin-top:3px; line-height:1.45}

/* ── Onglets collés ── */
.ir-onglets{position:sticky; top:0; z-index:45; margin-top:20px; background:color-mix(in srgb, var(--ground) 80%, transparent);
  -webkit-backdrop-filter:blur(18px) saturate(1.6); backdrop-filter:blur(18px) saturate(1.6); border-top:1px solid rgba(8,145,178,.10); border-bottom:1px solid rgba(8,145,178,.14)}
.ir-onglets-in{max-width:var(--max); margin:0 auto; padding:9px var(--gout); display:flex; gap:4px; overflow-x:auto; scrollbar-width:none}
.ir-onglets-in::-webkit-scrollbar{display:none}
.ir-onglets a{display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px; font-size:.88rem; font-weight:600; color:var(--ink-2); text-decoration:none; white-space:nowrap; border:1px solid transparent}
.ir-onglets a svg{width:16px; height:16px; color:var(--mute)}
.ir-onglets a:hover{background:rgba(8,145,178,.07)}
.ir-onglets a[aria-current="page"]{background:var(--surface); color:var(--ink); border-color:rgba(8,145,178,.28); box-shadow:0 6px 16px -10px rgba(8,145,178,.6)}
.ir-onglets a[aria-current="page"] svg{color:var(--iris)}
.ir-onglets a b{font-size:11px; font-weight:750; min-width:20px; height:20px; padding:0 6px; border-radius:99px; display:grid; place-items:center; background:var(--surface-3); color:var(--ink-2); font-variant-numeric:tabular-nums}
.ir-onglets a b.chaud{background:var(--iris); color:#fff}

.ir-main{max-width:var(--max); margin:0 auto; padding:14px var(--gout) 0}

/* ── Liste ── */
.ir-crr{display:block}
.ir-g{display:flex; flex-direction:column; gap:10px}
.ir-q{display:flex; align-items:center; gap:8px; padding:0 8px 0 12px; height:42px; border-radius:13px; background:var(--surface); box-shadow:0 0 0 1px var(--line); color:var(--mute); flex:none}
.ir-q:focus-within{box-shadow:0 0 0 2px var(--iris)}
.ir-q svg{width:16px; height:16px}
.ir-q input{flex:1; min-width:0; border:0; outline:0; background:none; font-size:15px; color:var(--ink)}
.ir-q input::-webkit-search-cancel-button{display:none}
.ir-liste{border-radius:20px; background:var(--surface); box-shadow:var(--ombre-verre), 0 0 0 1px var(--line-2); padding:6px}
.ir-sec{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:12px 10px 6px; font-size:11.5px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--mute);
  position:sticky; top:var(--nav-h); z-index:1; background:var(--surface)}
.ir-sec small{margin-left:6px; letter-spacing:0}
.ir-sec .ir-lot{letter-spacing:0; text-transform:none}
.ir-r{display:grid; grid-template-columns:minmax(0, 1fr) auto; grid-template-areas:"h h" "s s" "x p"; gap:2px 10px; padding:11px 12px; border-radius:14px; cursor:pointer; outline:none}
.ir-r:hover{background:var(--surface-2)}
.ir-r.sel{background:var(--iris-tint); box-shadow:inset 3px 0 0 var(--iris)}
.ir-r-h{grid-area:h; display:flex; justify-content:space-between; gap:8px; font-size:13px; min-width:0}
.ir-r-h b{font-weight:650; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.ir-r-h small{color:var(--mute); white-space:nowrap; font-size:12px}
.ir-r-s{grid-area:s; font-size:14.5px; font-weight:650; letter-spacing:-.01em; line-height:1.35; overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.ir-r-x{grid-area:x; font-size:12.5px; color:var(--mute); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; align-self:center; min-width:0}
.ir-r-p{grid-area:p; display:flex; align-items:center; gap:6px; justify-self:end}
.ir-r-g{display:flex; gap:4px; align-items:center}
.ir-ok, .ir-non{border:0; cursor:pointer; min-height:30px; border-radius:9px; font-size:12px; font-weight:650; display:inline-grid; place-items:center}
.ir-ok{width:36px; background:var(--gain-tint); color:var(--gain-ink)} .ir-ok svg{width:15px; height:15px}
.ir-ok:hover{background:var(--gain); color:#fff}
.ir-non{padding:0 10px; background:var(--surface-3); color:var(--ink-2)} .ir-non:hover{background:var(--iris-tint); color:var(--iris-ink)}
.ir-grp{border-radius:14px}
.ir-grp.ouvert{background:color-mix(in srgb, var(--surface-2) 80%, transparent); margin:3px 0}
.ir-gh{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:14px; cursor:pointer; outline:none}
.ir-gh:hover{background:var(--surface-2)}
.ir-gh .ir-av{width:32px; height:32px; font-size:12px}
.ir-gt{flex:1; min-width:0}
.ir-gt b{display:flex; align-items:center; gap:6px; font-size:13.5px; font-weight:650; white-space:nowrap; overflow:hidden}
.ir-gt b i{font-style:normal; font-size:11px; font-weight:750; background:var(--iris-tint); color:var(--iris-ink); padding:1px 7px; border-radius:99px}
.ir-gt small{display:block; font-size:12px; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ir-gl{display:flex; gap:4px; flex:none}
.ir-gch{display:grid; place-items:center; color:var(--mute)}
.ir-gch svg{width:14px; height:14px; transition:transform .2s}
.ir-grp.ouvert .ir-gch svg{transform:rotate(90deg)}
.ir-gc{padding:0 0 4px 12px}
.ir-lot{border:0; cursor:pointer; font-size:12px; font-weight:650; padding:6px 10px; border-radius:99px; background:var(--surface-3); color:var(--ink-2); white-space:nowrap}
.ir-lot:hover{background:var(--iris-tint); color:var(--iris-ink)}
.ir-lot.ok{background:var(--gain-tint); color:var(--gain-ink)}
.ir-lot.arme{background:var(--gain); color:#fff}

/* ── Lecteur : sur l'iPhone, une feuille plein écran ── */
.ir-lect{display:none}
.ir-lit{overflow:hidden}
.ir-lit .ir-lect{display:block; position:fixed; inset:0; z-index:70; overflow:auto; overscroll-behavior:contain; background:var(--surface); padding-top:env(safe-area-inset-top, 0px); animation:ir-monte .3s cubic-bezier(.16,1,.3,1) both}
.ir-retour{display:inline-flex; align-items:center; gap:4px; border:0; background:none; color:var(--iris); font-size:16px; font-weight:600; padding:14px 14px 4px; cursor:pointer}
.ir-retour svg{width:20px; height:20px}
.ir-lv{padding:0 18px 30px; display:flex; flex-direction:column; gap:14px}
.ir-acts{order:9; display:flex; flex-wrap:wrap; gap:8px; position:sticky; bottom:0; z-index:2; margin:6px -18px -30px; padding:12px 18px calc(14px + env(safe-area-inset-bottom, 0px));
  background:color-mix(in srgb, var(--surface) 92%, transparent); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-top:1px solid var(--line-2)}
.ir-acts .ir-go{flex:1 1 auto}
.ir-acts .ir-go.pri{flex-basis:100%}
.ir-pills{display:flex; flex-wrap:wrap; gap:6px}
.ir-sujet{font-size:22px; font-weight:700; letter-spacing:-.03em; line-height:1.22}
.ir-de{display:flex; align-items:center; gap:12px}
.ir-de > span:nth-child(2){flex:1; min-width:0}
.ir-de b{display:block; font-size:14.5px}
.ir-de small{display:block; font-size:12.5px; color:var(--mute)}
.ir-de time{font-size:12.5px; color:var(--mute); white-space:nowrap}
.ir-raison{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:16px; background:var(--iris-tint)}
.ir-raison img{width:30px; height:30px; border-radius:50%; object-fit:cover; object-position:50% 18%; background:#fff; flex:none}
.ir-raison p{font-size:14px; line-height:1.5}
.ir-br{border-radius:16px; border:1px solid color-mix(in srgb, var(--gain) 35%, transparent); background:var(--gain-tint); overflow:hidden}
.ir-br-t{display:flex; align-items:center; gap:8px; padding:10px 14px; font-size:13px; font-weight:650; color:var(--gain-ink)}
.ir-br-t svg{width:16px; height:16px} .ir-br-t a{color:inherit}
.ir-br-c{padding:12px 16px 14px; background:var(--surface); white-space:pre-wrap; font-size:14px; line-height:1.55; color:var(--ink-2); border-top:1px solid color-mix(in srgb, var(--gain) 25%, transparent)}
.ir-corps{white-space:pre-wrap; font-size:15px; line-height:1.65}
.ir-pj{display:flex; flex-wrap:wrap; gap:8px}
.ir-pj span{display:inline-flex; gap:6px; align-items:center; font-size:12.5px; padding:6px 10px; border-radius:10px; background:var(--surface-3)}
.ir-pj svg{width:14px; height:14px}
.ir-acc{padding-top:26px}
.ir-acc-t{display:flex; gap:14px; align-items:center}
.ir-acc-t img{width:56px; height:56px; border-radius:50%; object-fit:cover; object-position:50% 18%; background:#fff; flex:none; box-shadow:0 0 0 2px var(--surface), 0 0 0 3.5px var(--iris)}
.ir-acc-t h2{font-size:20px; font-weight:700; letter-spacing:-.03em}
.ir-acc-t p{font-size:14px; color:var(--ink-2); margin-top:3px; line-height:1.5; max-width:62ch}
.ir-touches{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px 18px; font-size:13px; color:var(--ink-2); margin-top:8px}
.ir-touches span{display:flex; align-items:center; gap:10px}

/* ── Ce qu'elle a appris ── */
.ir-cols{display:grid; gap:14px}
.ir-col{display:flex; flex-direction:column; gap:14px; min-width:0}
.ir-carte{border-radius:22px; background:var(--verre); border:1px solid var(--verre-bord); box-shadow:inset 0 1px 0 rgba(255,255,255,.95), var(--ombre-verre); overflow:hidden}
.ir-pad{padding:18px}
.ir-carte-t{display:flex; gap:14px; align-items:center}
.ir-carte-t h2{font-size:19px; font-weight:700; letter-spacing:-.03em}
.ir-carte-t p{font-size:13px; color:var(--mute); margin-top:2px}
.ir-texte{font-size:14px; line-height:1.55; color:var(--ink-2); margin-top:14px}
.ir-h3{font-size:12px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; color:var(--mute); display:flex; align-items:center; gap:8px; margin-bottom:12px}
.ir-h3 small{font-size:11px; letter-spacing:0; background:var(--surface-3); color:var(--ink-2); padding:1px 7px; border-radius:99px}
.ir-pad-h{padding:18px 18px 0}
.ir-auto{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 0; border-top:1px solid var(--line-2); font-size:14px}
.ir-auto:first-of-type{border-top:0}
.ir-auto span{flex:1; min-width:0}
.ir-regles > div{display:flex; align-items:center; gap:10px; padding:11px 18px; border-top:1px solid var(--line-2); font-size:13.5px}
.ir-regles > div:first-child{border-top:0}
.ir-regles > div > span:first-child{flex:1; min-width:0; overflow-wrap:anywhere}
.ir-regles small{color:var(--mute); white-space:nowrap}
.ir-regles svg{width:16px; height:16px; color:var(--iris)}
.ir-pouls{display:grid; grid-template-columns:repeat(7, 1fr); gap:10px; align-items:end}
.ir-pouls-j{display:flex; flex-direction:column; align-items:center; gap:5px}
.ir-pouls-b{height:110px; width:100%; max-width:42px; display:flex; align-items:flex-end}
.ir-pouls-b > i{display:flex; align-items:flex-end; width:100%; min-height:3px; border-radius:8px; background:linear-gradient(180deg, var(--iris-2), color-mix(in srgb, var(--iris-2) 55%, var(--iris))); overflow:hidden}
.ir-pouls-b > i > i{display:block; width:100%; background:var(--iris-fonce)}
.ir-pouls-j b{font-size:13px; font-variant-numeric:tabular-nums}
.ir-pouls-j small{font-size:11px; color:var(--mute); font-weight:650}
.ir-legende{font-size:12px; color:var(--mute); margin-top:12px}

/* ══════════════════════════════ Mac : bandeau complet, deux volets, clavier ══════════════════════════════ */
@media (min-width:1000px){
  :root{--gout:clamp(16px, 3.4vw, 40px)}
  .ir-barre-in{height:62px}
  .ir-heros{grid-template-columns:minmax(0, 1.32fr) minmax(0, .68fr); gap:clamp(20px, 4vw, 56px); align-items:center; padding:clamp(26px, 3.4vw, 42px) var(--gout) 0}
  .ir-heros{display:grid}
  .ir-surtitre span::before{content:"·"; margin-right:10px}
  .ir-q kbd{display:inline-block}
  .ir-heros-t{order:1}
  .ir-heros h1{font-size:clamp(2.2rem, 3.9vw, 3.4rem); line-height:1.06; margin-top:14px}
  .ir-chapo{margin-top:18px; font-size:clamp(1.08rem, 1.35vw, 1.24rem)}
  .ir-chapo-l{margin-top:8px; font-size:.84rem}
  .ir-missions{list-style:none; margin:22px 0 0; padding:6px; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); max-width:640px; border-radius:24px;
    background:var(--verre); -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6); border:1px solid var(--verre-bord);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9), 0 18px 40px -26px rgba(8,80,110,.6), 0 2px 6px -3px rgba(11,18,40,.1)}
  .ir-missions li{position:relative; display:flex; align-items:center; gap:10px; padding:6px 10px 6px 6px; min-width:0}
  .ir-missions li + li::before{content:""; position:absolute; left:0; top:20%; bottom:20%; width:1px; background:linear-gradient(180deg, transparent, var(--line), transparent)}
  .ir-missions .ir-verre{--t:38px}
  .ir-missions b{display:block; font-size:.85rem; font-weight:650; line-height:1.2}
  .ir-missions li div span{display:block; font-size:.74rem; line-height:1.3; color:var(--mute); margin-top:1px}
  .ir-portrait{order:2; float:none; margin:0; justify-self:center; width:min(100%, 330px); height:auto; aspect-ratio:1 / 1.02}
  .ir-halo{display:block; position:absolute; inset:0 -6% -4%; border-radius:50%; filter:blur(10px);
    background:radial-gradient(52% 50% at 50% 46%, rgba(34,211,238,.42), transparent 72%), radial-gradient(70% 60% at 60% 70%, rgba(8,145,178,.14), transparent 70%)}
  .ir-disque{display:block; position:absolute; inset:7% 7% 2%; border-radius:50% 50% 38px 38px; background:linear-gradient(165deg, rgba(255,255,255,.97), rgba(224,247,250,.78) 70%, rgba(186,236,245,.65));
    border:1px solid rgba(255,255,255,.85); box-shadow:inset 0 1px 0 #fff, 0 34px 60px -30px rgba(8,145,178,.75)}
  /* Le portrait d'Iris a un fond crème : il prend la forme de l'arche au lieu de déborder en carré. */
  .ir-portrait img{position:absolute; inset:7% 7% 2%; width:86%; height:91%; border-radius:50% 50% 38px 38px; object-fit:cover; object-position:50% 12%; background:#fff;
    box-shadow:inset 0 1px 0 #fff, 0 34px 60px -30px rgba(8,145,178,.75), 0 0 0 1px rgba(255,255,255,.85)}
  .ir-note{position:absolute; left:-18%; bottom:9%; display:flex; align-items:center; gap:11px; max-width:300px; padding:10px 16px 10px 10px; border-radius:20px; text-decoration:none; color:var(--ink);
    background:var(--verre); -webkit-backdrop-filter:blur(22px) saturate(1.9); backdrop-filter:blur(22px) saturate(1.9); border:1px solid var(--verre-bord);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.98), 0 22px 46px -24px rgba(8,80,110,.55), 0 3px 10px -5px rgba(11,18,40,.14); animation:ir-monte .7s .35s cubic-bezier(.16,1,.3,1) both}
  .ir-note b{display:block; font-size:.86rem; line-height:1.25}
  .ir-note small{display:block; font-size:.74rem; color:var(--mute); margin-top:2px}
  .ir-compteurs{grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; margin-top:clamp(22px, 2.6vw, 32px)}
  .ir-cpt{padding:16px 18px; gap:14px; border-radius:22px}
  .ir-cpt .ir-verre{--t:44px}
  .ir-cpt-t b{font-size:1.75rem}
  .ir-cpt-t > span{font-size:.82rem} .ir-cpt-t small{font-size:.75rem}
  .ir-onglets{margin-top:clamp(24px, 3vw, 34px)}

  /* Deux volets : la pile à gauche, le mail à droite ; ils remplissent l'écran sous les onglets. */
  .ir-crr{display:grid; grid-template-columns:minmax(360px, 440px) minmax(0, 1fr); gap:18px; height:calc(100vh - var(--nav-h) - 28px); min-height:560px}
  .ir-g{min-height:0}
  .ir-liste{flex:1; min-height:0; overflow:auto; overscroll-behavior:contain}
  .ir-sec{top:-6px}
  .ir-gl{display:none}
  .ir-gh:hover .ir-gl, .ir-gh:focus-within .ir-gl, .ir-gl:has(.arme){display:flex}
  .ir-lect, .ir-lit .ir-lect{display:block; position:static; min-height:0; overflow:auto; overscroll-behavior:contain; border-radius:22px; background:var(--surface);
    box-shadow:var(--ombre-verre), 0 0 0 1px var(--line-2); padding-top:0; animation:none}
  .ir-lit{overflow:visible}
  .ir-retour{display:none}
  .ir-lv{padding:0 30px 30px}
  .ir-acts{order:0; top:0; bottom:auto; margin:0 -30px; padding:16px 30px 14px; border-top:0; border-bottom:1px solid var(--line-2)}
  .ir-acts .ir-go, .ir-acts .ir-go.pri{flex:0 1 auto; min-height:40px; padding:0 14px; font-size:14px; border-radius:12px}
  .ir-acts .ir-go.discret{margin-left:auto; padding:0 8px}
  .ir-acts .ir-go.discret kbd{display:none}
  .ir-go kbd{display:inline-block}
  .ir-sujet{font-size:24px}
  .ir-corps{font-size:14.5px}
  .ir-cols{grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); align-items:start}
}
@media (min-width:1000px) and (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ir-disque{background:linear-gradient(165deg, rgba(30,64,76,.95), rgba(14,52,64,.8)); border-color:rgba(255,255,255,.08)}
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .ir-lum{background:linear-gradient(100deg, #A5F3FC 0%, #22D3EE 40%, #CFFAFE 75%, #22D3EE 100%); -webkit-background-clip:text; background-clip:text}
  :root:not([data-theme="light"]) :is(.ir-cpt, .ir-carte, .ir-missions, .ir-note){box-shadow:var(--ombre-verre)}
  :root:not([data-theme="light"]) :is(.ir-go.iris, .ir-onglets a b.chaud){color:#042F38}
}
:root[data-theme="dark"] :is(.ir-go.iris, .ir-onglets a b.chaud){color:#042F38}