/* ============================================================================
 * slides/gmail-migration — video-level styles
 * ----------------------------------------------------------------------------
 * Tout ce qui n'existe pas déjà dans le framework zen : header éditorial,
 * arbre de dossiers Outlook, cartes d'action, table de traduction, liste des
 * opérateurs de recherche, panneaux empilés. Les écrans Gmail viennent du
 * composant `zen-gmail-mock`, pas d'ici.
 *
 * Conventions :
 *   - préfixe `.g-` pour toute classe propre à ce support
 *   - aucun `left:` / `top:` : la position vient de data-at / data-region
 *   - aucune unité `vw` / `vh` : la scène est un stage fixe 1920×1080
 *   - la visibilité binaire passe par `.show`, le cycle de vie par
 *     `.a-active` / `.a-past` / `.a-dimmed` (CONTRACT §3)
 * ============================================================================ */


/* ══════════════════════════════════════════════════════════════════════
 * Scene layers
 * ══════════════════════════════════════════════════════════════════════ */
.scene-layer {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.55s var(--ease-natural);
}
.scene-layer.is-active {
    opacity: 1;
    pointer-events: auto;
}
.scene-layer .zen-scope > .zen-scope-label {
    font-size: 0.9rem;
    padding: 3px 14px;
}

.z-overlay-scene {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 5;
}


/* ══════════════════════════════════════════════════════════════════════
 * Header éditorial — commun à toutes les scènes
 * ══════════════════════════════════════════════════════════════════════ */
.g-header {
    text-align: center;
    width: 92%;
    max-width: 1340px;
}
.g-brand {
    font-family: 'SF Mono', Menlo, 'Courier New', monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 4px;
    color: var(--cyan);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.g-heading {
    font: 700 38px/1.2 'Inter', -apple-system, system-ui, sans-serif;
    color: var(--white);
    letter-spacing: -0.02em;
    margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════
 * Primitives partagées : notes, verdicts, listes à puces
 * ══════════════════════════════════════════════════════════════════════ */

/* Note explicative sous un scope — `.show` pour la révéler */
.g-note {
    font: 400 15px/1.45 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.62);
    text-align: center;
    width: 40%;
    max-width: 620px;
    margin: 0;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.55s var(--ease-natural),
                transform 0.55s var(--ease-natural);
}
.g-note.show { opacity: 1; transform: translateY(0); }
.g-note.a-agent { color: rgba(249, 115, 22, 0.72); }
.g-note.a-auth  { color: rgba(0, 230, 118, 0.72); }
.g-note.a-idp   { color: rgba(167, 139, 250, 0.78); }
.g-note.a-proxy { color: rgba(34, 211, 238, 0.72); }

/* Verdict encadré — la phrase à retenir sous une démonstration */
.g-verdict {
    font: 600 17px/1.35 'Inter', -apple-system, system-ui, sans-serif;
    letter-spacing: -0.005em;
    text-align: center;
    width: 38%;
    max-width: 600px;
    padding: 11px 20px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.5s var(--ease-natural),
                transform 0.5s var(--ease-natural);
}
.g-verdict.show { opacity: 1; transform: translateY(0); }
.g-verdict.a-auth   { color: var(--green); border-color: rgba(0, 230, 118, 0.40); }
.g-verdict.a-danger { color: #FCA5A5;      border-color: rgba(239, 68, 68, 0.42); }

/* Liste à puces — utilisée dans tous les zen-side du support */
.g-list { margin: 0; padding-left: 0; list-style: none; }
.g-list li {
    font: 400 15.5px/1.5 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.82);
    padding: 6px 0 6px 20px;
    position: relative;
}
.g-list li::before {
    content: "·";
    position: absolute;
    left: 5px;
    top: 2px;
    color: var(--cyan);
    font-weight: 700;
    font-size: 21px;
    line-height: 1;
}
.g-list--tight li { padding: 3px 0 3px 20px; font-size: 14.5px; line-height: 1.42; }


/* ══════════════════════════════════════════════════════════════════════
 * Panneaux empilés — plusieurs zen-side au même ancrage, un seul visible.
 * (footgun #1 : zen-side n'a pas d'opacity:0 par défaut)
 * ══════════════════════════════════════════════════════════════════════ */
/* Hauteur calée pour laisser respirer la note « on peut le renommer »
 * ancrée à 80 % dans la scène 04 (21 % + 54 % = 75 %, la note démarre à 78 %). */
.g-panels {
    width: 44%;
    height: 54%;
    position: relative;
}
/* Zone basse : plusieurs blocs empilés au même endroit, un seul `.is-current`.
 * Ils sont ancrés par le BAS (`bottom: 0` ci-dessous) et le conteneur est posé
 * en `data-anchor="bottom-center"`. Un panneau qui s'allonge grandit donc vers
 * le haut au lieu de sortir du stage — plus de débordement à recalibrer à
 * chaque retouche de texte. */
.g-bottom {
    width: 74%;
    max-width: 1440px;
    position: relative;
    min-height: 120px;
}

.g-panel {
    box-sizing: border-box;
    padding: 20px 26px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.55s var(--ease-natural),
                transform 0.55s var(--ease-natural);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(34, 211, 238, 0.03));
    border-color: rgba(125, 211, 252, 0.42);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.28);
}
.g-panel.is-current { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* Dans .g-panels, les panneaux se superposent, calés en haut et dimensionnés
 * par leur contenu. (`inset: 0` poserait aussi `bottom: 0` et les étirerait
 * sur toute la hauteur du conteneur, avec un grand vide sous le texte.) */
.g-panels .g-panel {
    position: absolute;
    top: 0; left: 0; right: 0;
    width: 100%;
    height: auto;
    max-height: 100%;
    overflow: auto;
}
/* Dans .g-bottom, ils se superposent, calés sur le bas du conteneur */
.g-bottom .g-panel,
.g-bottom .g-reassure,
.g-bottom .g-bottom__note {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    width: 100%;
    box-sizing: border-box;
}
/* Typo resserrée dans la zone basse : elle cohabite avec le hero de clôture */
.g-bottom .g-panel { padding: 16px 24px; }
.g-bottom .g-panel .zen-side__title { font-size: 22px; margin-bottom: 9px; }
.g-bottom .g-panel .zen-side__body  { font-size: 15.5px; margin-bottom: 9px; }
.g-bottom .g-panel .g-list li       { font-size: 14.5px; padding-top: 4px; padding-bottom: 4px; }

.g-panel .zen-side__tag {
    font-size: 12.5px;
    letter-spacing: 2.6px;
    color: var(--cyan);
    margin-bottom: 9px;
}
.g-panel .zen-side__title {
    font: 700 24px/1.2 'Inter', -apple-system, system-ui, sans-serif;
    letter-spacing: -0.015em;
    color: var(--white);
    margin: 0 0 12px 0;
}
.g-panel .zen-side__body {
    font: 400 16.5px/1.5 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 12px 0;
}
.g-panel .zen-side__body:last-child { margin-bottom: 0; }

/* Tonalités */
.g-panel--warn {
    border-color: rgba(251, 191, 36, 0.45);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(251, 191, 36, 0.045));
}
.g-panel--warn .zen-side__tag { color: var(--yellow); }
.g-panel--warn .g-list li::before { color: var(--yellow); }

.g-panel--ok {
    border-color: rgba(0, 230, 118, 0.40);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(0, 230, 118, 0.04));
}
.g-panel--ok .zen-side__tag { color: var(--green); }
.g-panel--ok .g-list li::before { color: var(--green); }

.g-panel--focus { border-color: rgba(34, 211, 238, 0.42); }

/* Ligne « la solution » en bas d'un panneau d'alerte */
.g-panel__fix {
    margin-top: 6px;
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(0, 230, 118, 0.08);
    border: 1px solid rgba(0, 230, 118, 0.30);
    font: 600 16px/1.4 'Inter', -apple-system, system-ui, sans-serif;
    color: var(--green);
}


/* ══════════════════════════════════════════════════════════════════════
 * Scene 01 — les trois temps de la bascule + les invariants
 * ══════════════════════════════════════════════════════════════════════ */
.g-world { min-width: 168px; }

.g-stage {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* le contenu respire au centre de la cellule */
    padding: 18px 20px;
    border-radius: var(--r-lg);
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border: 1.5px solid var(--border);
    opacity: 0.15;
    transition: all var(--d-slow) var(--ease-natural);
}
.g-stage.a-active { opacity: 1; border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 0 34px rgba(34, 211, 238, 0.16); }
.g-stage.a-past   { opacity: 0.28; filter: grayscale(0.35); }
.g-stage__tag {
    font-family: 'SF Mono', Menlo, 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    color: var(--cyan);
    margin-bottom: 8px;
}
.g-stage__title {
    font: 700 19px/1.25 'Inter', -apple-system, system-ui, sans-serif;
    color: var(--white);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.g-stage__body {
    font: 400 14.5px/1.45 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.68);
    margin: 0;
}
.g-stage__todo {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding-top: 11px;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    font: 600 13.5px/1.3 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.55);
}
.g-stage__todo-icon { flex-shrink: 0; color: var(--cyan); fill: none; }

.g-facts { display: flex; gap: 26px; align-items: stretch; }
.g-fact {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 420px;
    padding: 12px 18px;
    border-radius: var(--r-md);
    background: rgba(0, 230, 118, 0.05);
    border: 1px solid rgba(0, 230, 118, 0.26);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.6s var(--ease-natural), transform 0.6s var(--ease-natural);
}
.g-fact.show { opacity: 1; transform: translateY(0); }
.g-fact__icon { flex-shrink: 0; color: var(--green); fill: none; }
.g-fact__title { font: 600 15px/1.25 'Inter', -apple-system, system-ui, sans-serif; color: var(--white); }
.g-fact__sub   { font: 400 12.5px/1.35 'Inter', -apple-system, system-ui, sans-serif; color: rgba(255, 255, 255, 0.55); margin-top: 2px; }


/* ══════════════════════════════════════════════════════════════════════
 * Scene 02 — arbre Outlook / carte message + libellés Gmail
 * ══════════════════════════════════════════════════════════════════════ */
.g-tree {
    display: flex;
    flex-direction: column;
    gap: 22px;
    justify-content: center;
    font-family: 'SF Mono', Menlo, 'Courier New', monospace;
}
.g-tree__folder {
    opacity: 0.18;
    transition: opacity 0.6s var(--ease-natural);
}
.g-tree__folder.a-active { opacity: 1; }
.g-tree__folder.a-past   { opacity: 0.4; }
.g-tree__folder-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
    color: var(--orange);
    letter-spacing: 0.3px;
}
.g-tree__icon { flex-shrink: 0; fill: none; }
.g-tree__child {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 9px 0 0 16px;
    padding: 7px 12px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.09);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.5s var(--ease-natural), transform 0.5s var(--ease-natural);
}
.g-tree__child.show { opacity: 1; transform: translateX(0); }
.g-tree__elbow { color: rgba(255, 255, 255, 0.3); font-size: 15px; }
.g-tree__mail  { font-size: 14px; color: rgba(255, 255, 255, 0.85); }
.g-tree__child.is-copy {
    border-color: rgba(239, 68, 68, 0.45);
    background: rgba(239, 68, 68, 0.07);
}
.g-tree__child.is-copy .g-tree__mail { color: #FCA5A5; }
.g-tree__child.is-copy .g-tree__icon { color: #FCA5A5; }

.g-gmailpane {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 34px;
}
.g-chips { display: flex; gap: 18px; }
.g-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 15px;
    border-radius: 999px;
    font: 600 14px/1 'Inter', -apple-system, system-ui, sans-serif;
    opacity: 0;
    transform: translateY(-8px) scale(0.94);
    transition: opacity 0.5s var(--ease-natural), transform 0.5s var(--ease-natural);
}
.g-chip.show { opacity: 1; transform: translateY(0) scale(1); }
.g-chip__icon { flex-shrink: 0; fill: none; }
.g-chip--c1 { color: var(--cyan); background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.5); }
.g-chip--c2 { color: var(--pink); background: rgba(244, 114, 182, 0.12); border: 1px solid rgba(244, 114, 182, 0.5); }

.g-mailcard {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 22px;
    border-radius: var(--r-lg);
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border: 1.5px solid var(--border);
    opacity: 0.18;
    transition: all var(--d-slow) var(--ease-natural);
}
.g-mailcard.a-active { opacity: 1; border-color: rgba(0, 230, 118, 0.55); box-shadow: 0 0 36px rgba(0, 230, 118, 0.18); }
.g-mailcard.a-past   { opacity: 0.3; }
.g-mailcard__icon { flex-shrink: 0; color: var(--green); fill: none; }
.g-mailcard__subject { font: 600 17px/1.25 'Inter', -apple-system, system-ui, sans-serif; color: var(--white); }
.g-mailcard__meta    { font: 400 13px/1.3 'SF Mono', Menlo, monospace; color: rgba(255, 255, 255, 0.5); margin-top: 3px; }


/* ══════════════════════════════════════════════════════════════════════
 * Scene 03 — cartes d'action (archiver / supprimer / déplacer)
 * ══════════════════════════════════════════════════════════════════════ */
.g-action {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    border-radius: var(--r-lg);
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border: 1.5px solid var(--border);
    opacity: 0.15;
    transition: all var(--d-slow) var(--ease-natural);
}
.g-action.a-past { opacity: 0.3; filter: grayscale(0.4); }
.g-action__head { display: flex; align-items: center; gap: 11px; margin-bottom: 12px; }
.g-action__icon { flex-shrink: 0; fill: none; }
.g-action__tag {
    font-family: 'SF Mono', Menlo, 'Courier New', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.6px;
}
.g-action__title {
    font: 700 22px/1.2 'Inter', -apple-system, system-ui, sans-serif;
    color: var(--white);
    letter-spacing: -0.015em;
    margin-bottom: 10px;
}
.g-action__body {
    font: 400 15px/1.5 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.72);
    margin: 0 0 auto 0;
}
.g-action__dest {
    margin-top: 16px;
    padding: 9px 13px;
    border-radius: 8px;
    font: 500 13px/1.35 'SF Mono', Menlo, 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.78);
}
.g-action__note {
    margin-top: 10px;
    font: 400 13px/1.35 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.48);
    font-style: italic;
}

.g-action--ok .g-action__icon, .g-action--ok .g-action__tag { color: var(--green); }
.g-action--ok.a-active { border-color: rgba(0, 230, 118, 0.55); box-shadow: 0 0 36px rgba(0, 230, 118, 0.18); opacity: 1; }
.g-action--ok.a-active .g-action__dest { background: rgba(0, 230, 118, 0.08); border-color: rgba(0, 230, 118, 0.3); }

.g-action--danger .g-action__icon, .g-action--danger .g-action__tag { color: #F87171; }
.g-action--danger.a-active { border-color: rgba(239, 68, 68, 0.55); box-shadow: 0 0 36px rgba(239, 68, 68, 0.18); opacity: 1; }
.g-action--danger.a-active .g-action__dest { background: rgba(239, 68, 68, 0.09); border-color: rgba(239, 68, 68, 0.32); color: #FCA5A5; }

.g-action--focus .g-action__icon, .g-action--focus .g-action__tag { color: var(--cyan); }
.g-action--focus.a-active { border-color: rgba(34, 211, 238, 0.55); box-shadow: 0 0 36px rgba(34, 211, 238, 0.18); opacity: 1; }
.g-action--focus.a-active .g-action__dest { background: rgba(34, 211, 238, 0.08); border-color: rgba(34, 211, 238, 0.3); }

/* Aparté conversations — zen-side autonome piloté par .a-active */
.g-tip {
    box-sizing: border-box;
    width: 68%;
    max-width: 1220px;
    padding: 20px 26px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.55s var(--ease-natural), transform 0.55s var(--ease-natural);
    border-color: rgba(34, 211, 238, 0.42);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(34, 211, 238, 0.035));
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.28);
}
.g-tip.a-active { opacity: 1; transform: translateY(0); }
.g-tip .zen-side__tag {
    font-size: 12.5px; letter-spacing: 2.6px; color: var(--cyan); margin-bottom: 9px;
}
.g-tip .zen-side__title {
    font: 700 24px/1.2 'Inter', -apple-system, system-ui, sans-serif;
    color: var(--white); margin: 0 0 10px 0; letter-spacing: -0.015em;
}
.g-tip .zen-side__body {
    font: 400 16px/1.5 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.78); margin: 0 0 10px 0;
}


/* ══════════════════════════════════════════════════════════════════════
 * Scene 04 — table de traduction Outlook → Gmail
 * ══════════════════════════════════════════════════════════════════════ */
.g-map {
    display: flex;
    flex-direction: column;
    gap: 3px;
    justify-content: center;
}
.g-map__caption {
    font-family: 'SF Mono', Menlo, 'Courier New', monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin: 14px 0 6px;
    opacity: 0.3;
    transition: opacity 0.5s var(--ease-natural), color 0.5s var(--ease-natural);
}
.g-map__caption:first-child { margin-top: 0; }
.g-map__caption.a-active { opacity: 1; color: var(--cyan); }
.g-map__caption.a-past   { opacity: 0.65; }

.g-map__row {
    display: grid;
    grid-template-columns: 1fr 26px 1fr;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 8px;
    border: 1px solid transparent;
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.45s var(--ease-natural),
                transform 0.45s var(--ease-natural),
                background 0.45s var(--ease-natural),
                border-color 0.45s var(--ease-natural);
}
.g-map__row.show { opacity: 1; transform: translateX(0); }
.g-map__row.a-past { opacity: 0.45; }
.g-map__row.a-active { background: rgba(255, 255, 255, 0.035); }
.g-map__from {
    font: 400 14.5px/1.3 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(249, 115, 22, 0.85);
    text-align: right;
}
.g-map__arrow { color: rgba(255, 255, 255, 0.28); fill: none; justify-self: center; }
.g-map__to {
    font: 600 14.5px/1.3 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(0, 230, 118, 0.9);
}
.g-map__row.is-highlight {
    background: rgba(251, 191, 36, 0.09);
    border-color: rgba(251, 191, 36, 0.45);
}
.g-map__row.is-highlight .g-map__to { color: var(--yellow); }


/* ══════════════════════════════════════════════════════════════════════
 * Scene 05 — barre de recherche, opérateurs, résultats
 * ══════════════════════════════════════════════════════════════════════ */
/* Note « filtres cliquables » du dernier beat */
.g-bottom__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: var(--r-md);
    background: rgba(34, 211, 238, 0.05);
    border: 1px solid rgba(34, 211, 238, 0.28);
    font: 400 16px/1.4 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.78);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s var(--ease-natural), transform 0.55s var(--ease-natural);
}
.g-bottom__note.is-current { opacity: 1; transform: translateY(0); }
.g-bottom__note-icon { flex-shrink: 0; color: var(--cyan); fill: none; }


/* ══════════════════════════════════════════════════════════════════════
 * Scene 06 — items « non repris » + bandeau qui rassure
 * ══════════════════════════════════════════════════════════════════════ */
/* `.zen-box` est en position:absolute (framework) : dans une cellule de grid il
 * se pose en haut à gauche, en shrink-to-fit. `inset: 0` le fait remplir sa
 * cellule, avec le contenu calé à gauche (sinon `.zen-box`
 * `justify-content: center` centrerait le groupe icône + texte). */
.g-item {
    inset: 0;
    justify-content: flex-start;
}
.g-item .zen-box__text { gap: 4px; }
.g-item h3 { font-size: 14.5px !important; }
/* Bat `.zen-scope > .zen-box .sub { text-align: center }` du framework (0,2,1),
 * qui l'emporte sinon sur `.zen-box--row .sub { text-align: left }` (0,2,0). */
.g-item .zen-box__text .sub {
    font-size: 12px !important;
    opacity: 0.7 !important;
    text-align: left;
}

.g-reassure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 18px 28px;
    border-radius: var(--r-lg);
    background: rgba(0, 230, 118, 0.06);
    border: 1px solid rgba(0, 230, 118, 0.35);
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.55s var(--ease-natural), transform 0.55s var(--ease-natural);
}
.g-reassure.is-current { opacity: 1; transform: translateY(0); }
.g-reassure__icon  { flex-shrink: 0; color: var(--green); fill: none; }
.g-reassure__title { font: 700 22px/1.2 'Inter', -apple-system, system-ui, sans-serif; color: var(--white); letter-spacing: -0.015em; }
.g-reassure__body  { font: 400 15.5px/1.4 'Inter', -apple-system, system-ui, sans-serif; color: rgba(255, 255, 255, 0.7); margin-top: 4px; }


/* ══════════════════════════════════════════════════════════════════════
 * Scene 07 — points d'attention sur les boîtes partagées
 * ══════════════════════════════════════════════════════════════════════ */
.g-watch {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    border-radius: var(--r-lg);
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border: 1.5px solid var(--border);
    opacity: 0.15;
    transition: all var(--d-slow) var(--ease-natural);
}
.g-watch.a-active { opacity: 1; border-color: rgba(251, 191, 36, 0.5); box-shadow: 0 0 32px rgba(251, 191, 36, 0.14); }
.g-watch.a-past   { opacity: 0.3; filter: grayscale(0.35); }
.g-watch__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.g-watch__tag {
    font: 700 15px/1 'SF Mono', Menlo, 'Courier New', monospace;
    letter-spacing: 1.6px;
    color: var(--yellow);
}
.g-watch__icon { flex-shrink: 0; color: var(--yellow); fill: none; opacity: 0.75; }
.g-watch__title {
    font: 700 17.5px/1.25 'Inter', -apple-system, system-ui, sans-serif;
    color: var(--white);
    letter-spacing: -0.01em;
    margin-bottom: 8px;
}
.g-watch__body {
    font: 400 14px/1.45 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
}


/* ══════════════════════════════════════════════════════════════════════
 * Scene 09 — cartes de récap
 * ══════════════════════════════════════════════════════════════════════ */
.g-recap {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    border-radius: var(--r-lg);
    background: linear-gradient(145deg, var(--bg2), var(--bg3));
    border: 1.5px solid var(--border);
    opacity: 0.15;
    transition: all var(--d-slow) var(--ease-natural);
}
.g-recap.a-active { opacity: 1; border-color: rgba(34, 211, 238, 0.5); box-shadow: 0 0 32px rgba(34, 211, 238, 0.15); }
.g-recap.a-past   { opacity: 0.32; filter: grayscale(0.35); }
.g-recap__icon  { flex-shrink: 0; color: var(--cyan); fill: none; }
.g-recap__title { font: 700 18px/1.25 'Inter', -apple-system, system-ui, sans-serif; color: var(--white); letter-spacing: -0.01em; }
.g-recap__sub   { font: 400 14px/1.4 'Inter', -apple-system, system-ui, sans-serif; color: rgba(255, 255, 255, 0.62); margin-top: 4px; }


/* ══════════════════════════════════════════════════════════════════════
 * Hero de clôture — slot `.zen-footer` du framework (canvas.css)
 * ══════════════════════════════════════════════════════════════════════ */
.zen-footer {
    grid-template-columns: 1fr;
    padding: 18px 28px 28px;
    background: linear-gradient(0deg,
        rgba(13, 17, 23, 0.94) 0%,
        rgba(13, 17, 23, 0.55) 60%,
        rgba(13, 17, 23, 0.0)  100%);
}
.zen-footer > [data-scene-footer] {
    display: none;
    justify-self: center;
    pointer-events: none;
}
.zen-footer > [data-scene-footer].is-active { display: block; }

.g-hero-footer {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    font: 700 31px/1.2 'Inter', -apple-system, system-ui, sans-serif;
    letter-spacing: -0.02em;
    color: var(--white);
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.8s var(--ease-natural),
                transform 0.8s var(--ease-natural);
}
[data-scene-footer].is-revealed .g-hero-footer {
    opacity: 1;
    transform: translateY(0);
}


/* ══════════════════════════════════════════════════════════════════════
 * Ajouts de la refonte « mockups Gmail »
 * ══════════════════════════════════════════════════════════════════════ */

/* Colonnes étroites de la scène 02 : la note et le verdict Outlook tiennent
 * sous un scope de 29 % de large, pas sous les 38-40 % par défaut. */
.g-note--narrow    { width: 28%; }
.g-verdict--narrow { width: 28%; font-size: 15.5px; padding: 10px 16px; }

/* Panneaux de la scène 04 : colonne de droite, à côté du mock Gmail. */
.g-panels--right { width: 34%; height: 50%; }

/* Étapes numérotées — le mode d'emploi du filtre (scène 06). La puce « · »
 * générique ne dit pas qu'il faut suivre l'ordre ; un compteur, si. */
.g-list--steps { counter-reset: g-step; }
.g-list--steps li { padding-left: 28px; }
.g-list--steps li::before {
    counter-increment: g-step;
    content: counter(g-step);
    left: 0;
    top: 3px;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(251, 191, 36, 0.16);
    border: 1px solid rgba(251, 191, 36, 0.5);
    color: var(--yellow);
    font: 700 10.5px/1 'SF Mono', Menlo, monospace;
}

/* Le mock Gmail vit dans un scope : on neutralise le cadre pointillé du scope
 * autour de lui, la fenêtre porte déjà sa propre bordure. */
.zen-scope > .zen-gmail-mock { border-radius: var(--r-lg); }


/* ══════════════════════════════════════════════════════════════════════
 * Scène 05 — la liste des opérateurs de recherche
 * ══════════════════════════════════════════════════════════════════════ */
.g-ops {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}
.g-op {
    display: grid;
    grid-template-columns: 210px 1fr;
    align-items: baseline;
    gap: 16px;
    padding: 6px 12px;
    border-radius: 7px;
    opacity: 0.18;
    transition: opacity 0.45s var(--ease-natural), background 0.45s var(--ease-natural);
}
.g-op.a-active { opacity: 1; background: rgba(34, 211, 238, 0.09); }
.g-op.a-past   { opacity: 0.42; }
.g-op__q {
    font: 600 14px/1.3 'SF Mono', Menlo, 'Courier New', monospace;
    color: var(--cyan);
    white-space: nowrap;
}
.g-op__d {
    font: 400 14px/1.35 'Inter', -apple-system, system-ui, sans-serif;
    color: rgba(255, 255, 255, 0.66);
}