* {box-sizing:border-box;}
    html, body {min-height:100%;}

    body {margin:0; background:radial-gradient(circle at 10% 10%, rgba(10,132,255,.08), transparent 30rem),
        var(--page); color:#1c1c1e; font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;}

    button, input, select, textarea {font:inherit;}
    .generator-app-shell {max-width:1460px; margin:0 auto; padding:24px 16px 70px;}

    .generator-studio-card {background:rgba(255,255,255,.92); border:1px solid rgba(0,0,0,.07); border-radius:20px; box-shadow:0 10px 35px rgba(0,0,0,.06);}

    .generator-preview-sticky {position:sticky; top:18px;}

    .generator-avatar-stack .generator-avatar:first-child {margin-left:0;}

.generator-group-title {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.generator-group-chevron {
    display: block;
    width: 5px;
    height: auto;
    object-fit: contain;
    margin-top: 3px;
}

    .generator-chat-scroll::-webkit-scrollbar {display:none;}
    .generator-chat-date {text-align:center; font-size:11px; font-weight:600; color:#8e8e93; margin:6px 0 16px;}

    .generator-message-row.generator-mine {justify-content:flex-end;}
    .generator-message-row.generator-theirs {justify-content:flex-start;}

    .generator-avatar img {width:100%; height:100%; object-fit:cover; display:block;}

    .generator-message-row.generator-mine .generator-message-column {display:flex; flex-direction:column; align-items:flex-end;}
    .generator-message-row.generator-theirs .generator-message-column {display:flex; flex-direction:column; align-items:flex-start;}

    .generator-message-row.generator-mine .generator-bubble:not(.generator-has-media)::after {content:""; position:absolute; right:-5px; bottom:0; width:10px; height:12px; background:var(--ios-blue); border-bottom-left-radius:10px; transform:skewX(0deg); z-index:-1;}

    .generator-bubble.generator-has-media {padding:3px; overflow:hidden; background:transparent;}

    .generator-bubble.generator-has-media.generator-has-text {padding:3px; overflow:hidden;}
 
    .generator-reaction-wrap {position:relative; display:inline-block;}

    .generator-typing-row {width:100%; display:flex; align-items:flex-end; gap:5px; margin-top:8px; animation:typingRowIn .16s ease both;}

    .generator-typing-row.generator-mine {justify-content:flex-end;}
    .generator-typing-row.generator-theirs {justify-content:flex-start;}

    .generator-typing-row.generator-mine .generator-typing-bubble {background:var(--ios-blue);}

    .generator-typing-dot {width:7px; height:7px; border-radius:50%; background:#8e8e93; animation:typingBounce 1s infinite ease-in-out;}

    .generator-typing-row.generator-mine .generator-typing-dot {background:rgba(255,255,255,.88);}
    .generator-typing-dot:nth-child(2) {animation-delay:.14s;}
    .generator-typing-dot:nth-child(3) {animation-delay:.28s;}

    @keyframes typingBounce {
      0%, 60%, 100% { transform: translateY(0); opacity: .55; }
      30% { transform: translateY(-4px); opacity: 1; }
    }

    @keyframes typingRowIn {
      from { opacity: 0; transform: translateY(8px) scale(.96); }
      to { opacity: 1; transform: none; }
    }

    .generator-audio-bubble.generator-voice-animating .generator-waveform i {animation:voicePulse .56s ease-in-out infinite alternate; animation-delay:calc(var(--bar-index, 0) * -35ms); transform-origin:center;}

    @keyframes voicePulse {
      from { transform: scaleY(.55); opacity: .62; }
      to { transform: scaleY(1.12); opacity: 1; }
    }

    .generator-admin-reaction-select {width:72px; flex:0 0 72px; padding-left:7px; padding-right:24px;}

    .generator-media-caption {margin:0; padding:8px 9px 6px; border-radius:14px 14px 0 0;}

    .generator-mine .generator-media-caption {background:var(--ios-blue); color:#fff;}
    .generator-theirs .generator-media-caption {background:var(--ios-gray); color:#111;}

    .generator-message-media {display:block; width:min(250px, 100%); max-height:260px; object-fit:cover; border-radius:16px; background:#111;}

    video.generator-message-media {aspect-ratio:4 / 3;}

    .generator-mine .generator-audio-bubble {background:var(--ios-blue); color:#fff;}
    .generator-theirs .generator-audio-bubble {background:var(--ios-gray); color:#111;}

    .generator-audio-play {width:28px; height:28px; border-radius:50%; border:0; display:grid; place-items:center; background:rgba(255,255,255,.25); color:inherit; flex:0 0 auto;}

    .generator-theirs .generator-audio-play {background:rgba(0,0,0,.08);}

.generator-waveform {
    display: flex;
    flex: 0 0 auto;
    align-items: center;

    width: 94px;
    height: 26px;

    gap: 2px;
    opacity: .9;
}

.generator-waveform i {
    display: block;
    flex: 0 0 2px;

    width: 2px;
    border-radius: 2px;
    background: currentColor;
}

    .generator-audio-time {font-size:10px; opacity:.75; min-width:28px; text-align:right;}

    .generator-control-card {border:1px solid #e5e5ea; border-radius:16px; padding:16px; background:#fff;}

    .generator-control-card + .generator-control-card {margin-top:14px;}

    .generator-help-text {color:#7b7b80; font-size:.84rem;}

    .generator-participant-item,
    .generator-message-admin-item {display:flex; align-items:center; gap:9px; padding:8px 0; border-bottom:1px solid #f0f0f2;}

    .generator-participant-item:last-child,
    .generator-message-admin-item:last-child {border-bottom:0;}

    .generator-participant-meta,
    .generator-message-admin-meta {min-width:0; flex:1 1 auto;}

    .generator-participant-name {font-weight:700;}
    .generator-message-admin-text {white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-size:.88rem;}

    .generator-message-admin-sender {font-size:.72rem; color:#8e8e93; font-weight:700;}

    .generator-emoji-panel {display:none; grid-template-columns:repeat(8, 1fr); gap:4px; padding:8px; background:#f7f7fa; border:1px solid #e5e5ea; border-radius:12px; margin-top:8px;}

    .generator-emoji-panel.generator-open {display:grid;}

    .generator-emoji-btn {border:0; background:transparent; font-size:22px; border-radius:8px; padding:3px;}

    .generator-emoji-btn:hover {background:#e9e9ef;}

    .generator-media-selected {display:none; align-items:center; gap:10px; padding:8px 10px; border-radius:10px; background:#f4f4f7; font-size:.82rem; margin-top:8px;}

    .generator-media-selected.generator-show {display:flex;}
    .generator-root .progress {height:10px; border-radius:10px;}
    .generator-export-note {font-size:.78rem; color:#77777c;}
    .generator-export-format {font-size:.78rem; color:#0a7a32; font-weight:700;}
    .generator-btn-soft {background:#f2f2f7; border-color:#e5e5ea; color:#1c1c1e;}
    .generator-btn-soft:hover {background:#e9e9ef; color:#111;}

    .generator-range-value {min-width:64px; text-align:right; font-size:.82rem; color:#6c757d; font-variant-numeric:tabular-nums;}

    .generator-root .form-range {accent-color:var(--ios-blue);}

    #exportCanvas {position:fixed; left:-10000px; top:-10000px; width:720px; height:1280px; pointer-events:none;}

    .generator-toast-zone {position:fixed; right:18px; bottom:18px; z-index:3000; display:grid; gap:8px; max-width:min(360px, calc(100vw - 36px));}

    .generator-app-toast {background:rgba(28,28,30,.94); color:#fff; padding:10px 13px; border-radius:12px; box-shadow:0 8px 30px rgba(0,0,0,.25); font-size:.88rem; animation:toastIn .18s ease both;}

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: none; }
    }

    @media (max-width: 991.98px) {
      .generator-preview-sticky {position:static;}
      .generator-phone-stage {min-height:0; padding:10px 0 20px;}
    }

    @media (max-width: 460px) {
      :root {--phone-w:min(390px, calc(100vw - 30px)); --phone-h:calc(var(--phone-w) * 2.1641);}
      .generator-app-shell {padding-left:8px; padding-right:8px;}
      .generator-studio-card {border-radius:14px;}
      .generator-emoji-panel {grid-template-columns:repeat(7, 1fr);}
    }

    /* 03. Aperçu iPhone et fidélité iOS */

    .generator-iphone::before,
    .generator-iphone::after {content:""; position:absolute; z-index:-1; background:linear-gradient(180deg, #4a4a4d, #1d1d1f); box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);}

    .generator-iphone::before {left:-13px; top:140px; width:4px; height:76px; border-radius:3px 0 0 3px; box-shadow:0 92px 0 #2a2a2d,
        0 156px 0 #2a2a2d;}

    .generator-iphone::after {right:-13px; top:185px; width:4px; height:118px; border-radius:0 3px 3px 0;}

    .generator-iphone-screen {width:100%; height:100%; position:relative; background:#fff; overflow:hidden; display:flex; flex-direction:column; border-radius:42px;}

    .generator-dynamic-island {position:absolute; left:50%; transform:translateX(-50%); z-index:5; top:8px; width:122px; height:34px; border-radius:22px; background:#000; box-shadow:inset 0 0 0 1px rgba(255,255,255,.025),
        0 1px 1px rgba(255,255,255,.04); transition:width .24s cubic-bezier(.2,.8,.2,1), height .24s cubic-bezier(.2,.8,.2,1);}

    .generator-dynamic-island::before {content:""; position:absolute; width:8px; height:8px; right:10px; top:50%; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle at 38% 34%, #183b48 0 18%, #08161d 31%, #020506 70%); box-shadow:0 0 0 1px rgba(45,92,112,.22);}

    .generator-dynamic-island::after {content:""; position:absolute; width:4px; height:4px; left:12px; top:8px; border-radius:50%; background:rgba(255,255,255,.06); filter:blur(.2px);}

    .generator-iphone.generator-preview-active .generator-dynamic-island {width:146px; height:36px;}

    .generator-iphone.generator-export-active .generator-dynamic-island {width:154px; height:36px; box-shadow:inset 0 0 0 1px rgba(255,255,255,.03),
        0 0 0 1px rgba(255,59,48,.08);}

    .generator-avatar-stack .generator-avatar {margin-left:-8px; box-shadow:0 1px 2px rgba(0,0,0,.06);}

    .generator-message-row.generator-play-hidden {pointer-events:none; opacity:0; transform:translateY(9px) scale(.94);}

    .generator-message-row.generator-play-visible {opacity:1; transform:none; animation:iosMessagePop .24s cubic-bezier(.2,.92,.24,1.18) both;}

    @keyframes iosMessagePop {
      0% { opacity: 0; transform: translateY(9px) scale(.94); }
      70% { opacity: 1; transform: translateY(-1px) scale(1.01); }
      100% { opacity: 1; transform: none; }
    }

    .generator-avatar-spacer {width:24px; height:1px; flex:0 0 24px;}

    /* Tails only on the last bubble of a sender run, like iMessage. */
    .generator-message-row .generator-bubble:not(.generator-has-media)::before,
    .generator-message-row .generator-bubble:not(.generator-has-media)::after {content:none;}

    .generator-message-row.generator-mine.generator-last-in-run .generator-bubble:not(.generator-has-media)::before {content:""; position:absolute; z-index:-1; right:-7px; bottom:0; width:18px; height:18px; background:var(--ios-blue); border-bottom-left-radius:15px 13px;}

    .generator-message-row.generator-mine.generator-last-in-run .generator-bubble:not(.generator-has-media)::after {content:""; position:absolute; z-index:-1; right:-10px; bottom:-3px; width:10px; height:30px; background:#fff; border-bottom-left-radius:10px;}

    .generator-typing-bubble {padding:0 13px; display:flex; align-items:center; justify-content:center; gap:4px; background:var(--ios-gray); min-width:60px; height:40px; border-radius:20px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.018);}

    .generator-audio-bubble {padding:10px 12px; display:flex; gap:10px; align-items:center; border-radius:20px;}

    .generator-home-indicator {position:absolute; left:50%; transform:translateX(-50%); border-radius:4px; z-index:10; height:5px; width:134px; bottom:7px; background:#000;}

    .generator-media-volume-note {font-size:.76rem; color:#6c757d;}



    .generator-phone-stage-video,
    .generator-phone-stage-overlay {position:absolute; inset:0; border-radius:32px; pointer-events:none;}

    .generator-phone-stage.generator-has-video .generator-phone-stage-video {display:block;}

    .generator-wifi-icon::before,

    .generator-header-action-icon,
    .generator-plus-circle-icon {display:grid; place-items:center; padding:0; background:transparent;}

    .generator-ui-png-icon {display:block; user-select:none; pointer-events:none; object-fit:contain;}

    .generator-composer-mic {position:relative; width:20px; height:20px; display:inline-grid; place-items:center; margin-left:auto; border-radius:50%; background:transparent; color:#8f9198; font-size:0;}

    .generator-voice-reader-label {font-weight:700; min-width:84px; display:flex; align-items:center; gap:8px;}

    .generator-voice-reader-label .generator-avatar-mini {width:26px; height:26px; border-radius:50%; overflow:hidden; display:inline-grid; place-items:center; font-size:11px; color:#fff; background:#9ca3af; flex:0 0 auto;}

    .generator-voice-reader-label .generator-avatar-mini img {width:100%; height:100%; object-fit:cover;}

    .generator-voice-reader-row select {min-width:0;}

    /* ===== V5 iOS fidelity ===== */
    :root {--ios-green:#34c759; --ios-gray:#e9e9eb; --ios-text:#111111; --ios-muted:#8e8e93; --panel:#ffffff; --page:#f2f2f7; --danger:#ff3b30; --phone-w:390px; --phone-h:844px; --ios-blue:#0a84ff; --ios-header-gray:#f1f2f4; --ios-received:#e9e9eb;}

    .generator-status-bar,
    .generator-conversation-header {background:var(--ios-header-gray)!important;}

    .generator-conversation-header {flex:0 0 94px; display:grid; position:relative; z-index:2; -webkit-backdrop-filter:saturate(180%) blur(22px); backdrop-filter:saturate(180%) blur(22px); background:#f1f2f4; border-bottom:1px solid #dfe1e6; height:92px; flex-basis:70px; border-bottom-color:#dcdee3; grid-template-columns:52px 1fr 52px;}

    .generator-header-action {border:0; background:transparent; color:var(--ios-blue); line-height:1; min-width:44px; min-height:44px; font-size:34px; font-weight:300; transform:translateY(-1px); width:52px; height:52px; padding:0; display:grid; place-items:center;}

    .generator-ui-back-icon {width:10px; height:auto;}

    .generator-ui-camera-icon {width:27px; height:auto;}

    .generator-status-icons {display:flex; align-items:center; color:#5b5e66; gap:6px;}

    .generator-battery-icon,
    .generator-wifi-icon,

    .generator-group-head {min-width:0; text-align:center; padding-top:1px;}

    .generator-avatar-stack {position:relative; display:flex; justify-content:center; align-items:center; height:43px; margin-bottom:1px;}

    .generator-group-title {line-height:16px; max-width:250px; margin:0 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-.01em; color:#242529; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; font-size:12px; font-weight:600;}

    .generator-chat-scroll {flex:1 1 auto; min-height:0; overscroll-behavior:contain; scrollbar-width:none; padding-left:9px; padding-right:9px; overflow-y:auto!important; overflow-x:hidden; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding:8px 9px 24px; background:#fff; touch-action:pan-y;}

    .generator-message-row {width:100%; display:flex; align-items:flex-end; transform-origin:50% 100%; transition:opacity .18s cubic-bezier(.2,.8,.2,1),
        transform .22s cubic-bezier(.2,.9,.2,1); margin-top:2px; gap:5px;}

    .generator-message-row.generator-new-sender {margin-top:10px;}

    .generator-message-column {max-width:70%;}

    .generator-bubble {position:relative; display:inline-block; max-width:100%; overflow-wrap:anywhere; white-space:pre-wrap; border-radius:18px; padding:7px 11px 8px; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif; font-size:15px; line-height:19px; letter-spacing:-.01em;}

    .generator-mine .generator-bubble {color:#fff; border-bottom-right-radius:18px; background:#0a84ff;}

    .generator-theirs .generator-bubble {border-bottom-left-radius:18px; background:#e9e9eb; color:#121316;}

    .generator-sender-name {font-size:10px; line-height:13px; margin:0 10px 3px; color:#8d8f96; margin-bottom:2px;}

    .generator-message-row.generator-mine .generator-tapback-badge {right:8px;}

    .generator-message-row.generator-theirs .generator-tapback-badge {left:8px;}

    .generator-plus-circle {border-radius:50%; color:#fff; font-size:23px; line-height:25px; display:grid; place-items:center; padding:0; background:transparent; border:0; width:31px; height:31px;}

    .generator-ui-plus-icon {width:31px; height:31px;}

    .generator-composer-field {border:1px solid #c7c7cc; flex:1 1 auto; display:flex; align-items:center; padding:0 8px 0 11px; font-size:15px; min-width:0; box-shadow:inset 0 0 0 .5px rgba(255,255,255,.5); height:30px; border-radius:18px; border-color:#d9dbe0; color:#8e8e93; padding-left:12px;}

    .generator-ui-mic-icon {width:12px; height:auto;}

    .generator-v5-capture-note {border:1px solid #d8e8ff; background:#f4f8ff; border-radius:12px; padding:10px 12px; color:#355070; font-size:.84rem; line-height:1.4;}

    .generator-voice-reader-panel {display:grid; gap:8px;}

    .generator-voice-reader-row {display:grid; gap:10px; align-items:center; border:1px solid #e7e8ec; grid-template-columns:minmax(105px, auto) minmax(0, 1fr) auto; padding:9px 10px; border-radius:13px; background:#fafbfc;}

    @media (max-width: 575.98px) {
      .generator-voice-reader-row {grid-template-columns:1fr;}
    }

    /* 06. Composition vidéo et arrière-plan */
    .generator-v6-editor-block {padding:14px; border:1px solid #e3e5ea; border-radius:16px; background:linear-gradient(180deg, #fbfcfd, #f7f8fa);}

    .generator-v6-editor-title {margin-bottom:12px; color:#1c1c1e; font-size:.92rem; font-weight:800;}

    .generator-phone-stage {display:flex; align-items:flex-start; justify-content:center; padding:18px 8px; position:relative; border-radius:36px; isolation:isolate; min-height:980px; background:linear-gradient(180deg, #f4f5f7 0%, #e9ecf1 100%); --bg-x:50%; --bg-y:50%; --bg-zoom:1; --bg-blur:0px; --bg-darkness:0; overflow:hidden;}

    .generator-phone-stage-video {display:none; z-index:0; inset:-36px; width:calc(100% + 72px); height:calc(100% + 72px); object-fit:cover; object-position:var(--bg-x) var(--bg-y); transform-origin:center center; transform:scale(var(--bg-zoom)); filter:blur(var(--bg-blur)); transition:transform .12s ease, filter .12s ease, object-position .12s ease;}

    .generator-phone-stage-overlay {z-index:1; inset:0; border-radius:32px; background:#000; opacity:var(--bg-darkness); transition:opacity .12s ease;}

    .generator-phone-stage.generator-has-video .generator-phone-stage-overlay {opacity:var(--bg-darkness);}

    @media (max-width: 575.98px) {
      .generator-v6-editor-block {padding:12px;}
    }

    /* 07. Actions et icônes de statut */

    .generator-status-icons-png {display:flex; align-items:center; justify-content:flex-end; gap:2px; min-width:78px;}

    .generator-status-png {display:block; object-fit:contain; user-select:none; pointer-events:none;}

    .generator-status-signal-png {width:18px; height:10px;}
    .generator-status-wifi-png {width:17px; height:10px;}
    .generator-status-battery-png {width:25px; height:10px;}

    .generator-studio-card.generator-preview-sticky {background:transparent; border:0; box-shadow:none;}

    .generator-studio-card.generator-preview-sticky .generator-phone-stage {box-shadow:0 10px 35px rgba(0,0,0,.06);}

    /* 08. Réactions et alignement des messages */
    .generator-iphone {width:var(--phone-w); height:var(--phone-h); border-radius:52px; background:#fff; flex:0 0 auto; overflow:visible; border:9px solid #0a0a0b; outline:1px solid rgba(255,255,255,.28); box-shadow:0 30px 80px rgba(0,0,0,.28),
        0 0 0 1px rgba(0,0,0,.4),
        inset 0 0 0 1px rgba(255,255,255,.16); position:relative; z-index:2; transform-origin:top center; will-change:transform; transition:transform .12s ease; --tapback-overlap:4px;}

    .generator-reaction-wrap.generator-has-reaction {padding-bottom:18px!important;}

    .generator-tapback-badge {position:absolute; display:grid; place-items:center; border-radius:999px; line-height:1; z-index:4; min-width:29px; height:24px; padding:0 6px; border:2px solid #fff; background:#f2f2f7; font-size:13px; bottom:calc(var(--tapback-overlap) - 6px)!important;}

    /* Avatar aligné avec les réactions */
    .generator-message-row.generator-theirs.generator-has-reaction > .generator-avatar,
    .generator-message-row.generator-theirs.generator-has-reaction > .generator-avatar-spacer {margin-bottom:18px;}

    .generator-message-row.generator-theirs.generator-has-reaction > .generator-avatar {align-self:flex-end;}

    /* 09. Règles finales de l'interface */
    .generator-status-bar {flex:0 0 48px; position:relative; display:flex; align-items:center; justify-content:space-between; font-weight:700; z-index:3; height:50px; flex-basis:50px; padding:10px 24px 0 36px; font-size:14px; letter-spacing:-.015em; -webkit-backdrop-filter:saturate(180%) blur(18px); backdrop-filter:saturate(180%) blur(18px); background:rgba(241,242,244,.96); border-radius:50px 50px 0 0;}

    .generator-composer {flex:0 0 75px; padding:9px 9px 18px; display:flex; align-items:center; gap:7px; -webkit-backdrop-filter:saturate(180%) blur(18px); height:76px; padding-left:10px; padding-right:10px; border-radius:0 0 50px 50px;}

    .generator-avatar,
    .generator-avatar-stack .generator-avatar {border:0;}

    .generator-avatar {width:30px; height:30px; font-weight:400; border-radius:50%; object-fit:cover; flex:0 0 auto; display:inline-grid; place-items:center; color:#fff; font-size:11px; font-weight:800; overflow:hidden; user-select:none; background:linear-gradient(180deg,#d9d9de 0%,#7d7d83 100%);}

    .generator-message-row.generator-theirs.generator-last-in-run .generator-bubble:not(.generator-has-media) {position:relative; z-index:3; isolation:isolate; overflow:visible;}

    .generator-message-row.generator-theirs.generator-last-in-run .generator-bubble:not(.generator-has-media)::before {content:""; position:absolute; z-index:2; left:-7px; bottom:0; width:18px; height:18px; background:var(--ios-gray); border-bottom-right-radius:15px 13px;}

    .generator-message-row.generator-theirs.generator-last-in-run .generator-bubble:not(.generator-has-media)::after {content:""; position:absolute; z-index:2; left:-10px; bottom:-1px; width:10px; height:30px; background:#fff; border-bottom-right-radius:10px;}

    .generator-preview-actions-wrap {display:flex; justify-content:center; margin-top:14px; background:transparent;}

    .generator-preview-actions-grid {width:min(100%, 820px); display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:0 auto; background:transparent;}

    .generator-preview-action-box {border-radius:0; flex:0 1 190px; padding:0; border:0; background:transparent; box-shadow:none;}

    .generator-step-disclosure {padding:0; overflow:hidden;}

    .generator-step-summary::-webkit-details-marker {display:none;}

    .generator-step-summary::after {content:"⌄"; margin-left:auto; color:#7b7d84; font-size:22px; line-height:1; transition:transform .16s ease;}

    .generator-step-disclosure[open] > .generator-step-summary::after {transform:rotate(180deg);}

    .generator-step-summary-title {flex:1 1 auto;}

    .generator-step-body {padding:0 18px 18px;}

    @media (max-width: 575.98px) {
      .generator-preview-actions-grid {display:grid; grid-template-columns:1fr; width:100%;}

      .generator-preview-action-box {width:100%;}
    }

    .generator-image-media-bubble {width:fit-content; max-width:240px;}

    .generator-image-media-bubble .generator-message-media {width:auto; max-width:236px; height:auto; max-height:300px; object-fit:contain;}

    .generator-participant-actions {display:flex; flex-direction:column; align-items:stretch; gap:6px; flex:0 0 auto;}

    .generator-step-summary {min-height:58px; padding:16px 18px; display:flex; align-items:center; gap:10px; cursor:pointer; list-style:none; user-select:none; font-weight:800; position:relative;}

    .generator-step-drag-handle {width:28px; height:28px; display:inline-grid; place-items:center; flex:0 0 28px; border-radius:8px; color:#8b8d94; font-size:18px; font-weight:900; line-height:1; cursor:grab; touch-action:none; user-select:none;}

    .generator-step-drag-handle:hover {background:#f2f2f7; color:#45464c;}

    .generator-step-drag-handle:active {cursor:grabbing;}

    .generator-step-drag-ghost {opacity:.38;}

    .generator-step-drag-chosen {box-shadow:0 12px 32px rgba(0,0,0,.13);}

    .generator-step-dragging {opacity:.95;}

    @media (max-width: 575.98px) {
      .generator-participant-item {display: flex;align-items:flex-start; flex-direction: column;gap: 9px;padding: 8px 0;}

      .generator-participant-actions {width:100%; flex-direction:row; margin-top:6px;}
    }

    .generator-participant-color-picker {display:flex; align-items:center; gap:10px; min-height:38px;}

    .generator-avatar-color-input {width:34px; height:34px; flex:0 0 34px; padding:0; border:2px solid #fff; border-radius:50%; background:transparent; box-shadow:0 0 0 1px rgba(0,0,0,.16); cursor:pointer; overflow:hidden; appearance:none; -webkit-appearance:none;}

    .generator-avatar-color-input::-webkit-color-swatch-wrapper {padding:0;}

    .generator-avatar-color-input::-webkit-color-swatch {border:0; border-radius:50%;}

    .generator-avatar-color-input::-moz-color-swatch {border:0; border-radius:50%;}

    .generator-avatar-color-input:focus-visible {outline:3px solid rgba(10,132,255,.32); outline-offset:2px;}

    .generator-message-row.generator-mine.generator-last-in-run
    .generator-bubble:not(.generator-has-media) {position:relative; z-index:0; isolation:isolate; overflow:visible;}

    .generator-message-row.generator-theirs > .generator-avatar {position:relative; z-index:4;}

/* 10. Page PrankShit, SEO, FAQ et modèles */
body {
    background:
        radial-gradient(circle at 12% 10%, rgba(7, 133, 175, .10), transparent 30rem),
        #f2f2f7;
}

.ps-iphone-generator-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(1.35rem, 3vw, 2.35rem);
    color: #fff;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, .97), rgba(7, 133, 175, .94) 55%, rgba(0, 0, 0, .98));
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 24px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

.ps-iphone-generator-hero-glow {
    position: absolute;
    width: 280px;
    height: 280px;
    right: -90px;
    top: -150px;
    border-radius: 50%;
    background: rgba(50, 182, 223, .24);
    filter: blur(10px);
    pointer-events: none;
}

.ps-iphone-generator-hero-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.ps-iphone-generator-h1 {
    max-width: 850px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.75rem, 4vw, 3rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.04em;
}

.ps-iphone-generator-hero-actions {
    display: flex;
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: .6rem;
}

.ps-iphone-generator-hero .generator-btn-soft {
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
}

.ps-iphone-generator-hero .generator-btn-soft:hover {
    color: #fff;
    background: rgba(255, 255, 255, .18);
}

.ps-generator-seo-section {
    position: relative;
    overflow: hidden;
    margin: 0 auto clamp(3rem, 7vw, 5.5rem);
    padding: clamp(1.5rem, 4vw, 3rem);
    background: #fff;
    border: 1px solid rgba(7, 133, 175, .13);
    border-radius: 26px;
    box-shadow: 0 16px 45px rgba(9, 47, 65, .08);
}

.ps-generator-seo-section::before {
    position: absolute;
    inset: 0 auto 0 0;
    width: 5px;
    content: "";
    background: linear-gradient(180deg, #0785af, #32b6df);
}

.ps-generator-seo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .8rem;
    color: #0785af;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ps-generator-seo-section h2,
.ps-generator-seo-section h3 {
    color: #101820;
    font-weight: 900;
    letter-spacing: -.025em;
}

.ps-generator-seo-section h2 {
    margin-bottom: 1rem;
    font-size: clamp(1.55rem, 3vw, 2.3rem);
}

.ps-generator-seo-section h3 {
    margin: 1.65rem 0 .7rem;
    font-size: 1.15rem;
}

.ps-generator-seo-section p {
    max-width: 980px;
    margin-bottom: .9rem;
    color: #4c5963;
    font-size: .98rem;
    line-height: 1.8;
}

.ps-generator-feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .85rem;
    margin-top: 1.4rem;
}

.ps-generator-feature {
    padding: 1rem;
    background: linear-gradient(145deg, #f7fbfd, #fff);
    border: 1px solid rgba(7, 133, 175, .12);
    border-radius: 16px;
}

.ps-generator-feature strong {
    display: block;
    margin-bottom: .35rem;
    color: #0785af;
}

.ps-generator-related-links {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: 1rem;
}

.ps-generator-related-links a {
    display: inline-flex;
    align-items: center;
    min-height: 38px;
    padding: .5rem .8rem;
    color: #075d79;
    background: #eef9fc;
    border: 1px solid rgba(7, 133, 175, .14);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 800;
    text-decoration: none;
}

.ps-generator-related-links a:hover {
    color: #fff;
    background: #0785af;
}

@media (max-width: 767.98px) {
    .ps-iphone-generator-hero-content {
        align-items: stretch;
        flex-direction: column;
    }

    .ps-iphone-generator-hero-actions {
        width: 100%;
    }

    .ps-iphone-generator-hero-actions .btn {
        flex: 1 1 150px;
    }

    .ps-generator-feature-grid {
        grid-template-columns: 1fr;
    }
}

.ps-generator-models {
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(7, 133, 175, .12);
}

.ps-generator-models-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.ps-generator-models-head p {
    margin: 0;
}

.ps-model-carousel {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(7, 133, 175, .14);
    border-radius: 22px;
    background:
        radial-gradient(circle at 50% 0, rgba(50, 182, 223, .14), transparent 45%),
        #f7fbfd;
}

.ps-model-carousel-viewport {
    overflow: hidden;
}

.ps-model-carousel-track {
    display: flex;
    transition: transform .32s ease;
    will-change: transform;
}

.ps-model-carousel-slide {
    display: grid;
    flex: 0 0 100%;
    min-width: 100%;
    place-items: center;
    padding: clamp(1rem, 4vw, 2rem);
}

.ps-model-carousel-slide img {
    display: block;
    width: auto;
    max-width: 100%;
    height: min(620px, 72vh);
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 18px 46px rgba(0, 0, 0, .16);
}

.ps-model-carousel-button {
    position: absolute;
    z-index: 3;
    top: 50%;
    display: grid;
    width: 44px;
    height: 44px;
    padding: 0;
    color: #fff;
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50%;
    place-items: center;
    transform: translateY(-50%);
}

.ps-model-carousel-button:hover,
.ps-model-carousel-button:focus-visible {
    background: #0785af;
}

.ps-model-carousel-prev {
    left: .8rem;
}

.ps-model-carousel-next {
    right: .8rem;
}

.ps-model-carousel-dots {
    display: flex;
    justify-content: center;
    gap: .45rem;
    padding: .85rem 1rem 1rem;
}

.ps-model-carousel-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    background: #b8c5cb;
    border: 0;
    border-radius: 50%;
}

.ps-model-carousel-dot[aria-current="true"] {
    width: 24px;
    background: #0785af;
    border-radius: 999px;
}

.ps-model-carousel-empty {
    padding: 2rem;
    color: #59666d;
    text-align: center;
    background: #f7fbfd;
    border: 1px dashed rgba(7, 133, 175, .3);
    border-radius: 18px;
}

.ps-generator-faq {
    margin-top: 2rem;
    padding-top: 1.8rem;
    border-top: 1px solid rgba(7, 133, 175, .12);
}

.ps-generator-faq details {
    overflow: hidden;
    margin-top: .7rem;
    background: #f8fbfc;
    border: 1px solid rgba(7, 133, 175, .12);
    border-radius: 14px;
}

.ps-generator-faq summary {
    padding: 1rem 1.1rem;
    color: #101820;
    cursor: pointer;
    font-weight: 850;
}

.ps-generator-faq details p {
    margin: 0;
    padding: 0 1.1rem 1.1rem;
}

@media (max-width: 767.98px) {
    .ps-generator-models-head {
        align-items: stretch;
        flex-direction: column;
    }

    .ps-model-carousel-slide img {
        height: min(520px, 68vh);
    }

    .ps-model-carousel-button {
        width: 40px;
        height: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-model-carousel-track {
        transition: none;
    }
}

.ps-model-carousel-image-button {
    position: relative;
    display: block;
    max-width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 18px;
    cursor: zoom-in;
}

.ps-model-carousel-image-button:focus-visible {
    outline: 3px solid rgba(7, 133, 175, .35);
    outline-offset: 4px;
}

.ps-model-carousel-zoom {
    position: absolute;
    right: .8rem;
    bottom: .8rem;
    display: grid;
    width: 38px;
    height: 38px;
    color: #fff;
    background: rgba(0, 0, 0, .72);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    place-items: center;
    pointer-events: none;
}

.ps-model-carousel-caption {
    width: min(760px, 100%);
    margin-top: 1rem;
    text-align: center;
}

.ps-model-carousel-caption strong {
    display: block;
    color: #101820;
    font-size: 1rem;
    font-weight: 900;
}

.ps-model-carousel-caption p {
    max-width: 720px;
    margin: .4rem auto 0;
    color: #5c6970;
    font-size: .9rem;
    line-height: 1.6;
}

.ps-model-lightbox {
    position: fixed;
    z-index: 11000;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    padding: clamp(.8rem, 3vw, 2rem);
}

.ps-model-lightbox.is-open {
    display: flex;
}

.ps-model-lightbox-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    background: rgba(0, 0, 0, .88);
    border: 0;
}

.ps-model-lightbox-dialog {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(1100px, 100%);
    max-height: calc(100vh - 2rem);
    align-items: center;
    justify-content: center;
}

.ps-model-lightbox-content {
    display: flex;
    width: min(900px, calc(100% - 110px));
    max-height: calc(100vh - 2rem);
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.ps-model-lightbox-image {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: calc(100vh - 170px);
    object-fit: contain;
    border-radius: 18px;
    box-shadow: 0 22px 70px rgba(0, 0, 0, .45);
}

.ps-model-lightbox-copy {
    width: min(760px, 100%);
    padding: .9rem 1rem 0;
    color: #fff;
    text-align: center;
}

.ps-model-lightbox-copy strong {
    display: block;
    font-size: 1rem;
    font-weight: 900;
}

.ps-model-lightbox-copy p {
    margin: .35rem 0 0;
    color: rgba(255, 255, 255, .72);
    font-size: .88rem;
    line-height: 1.55;
}

.ps-model-lightbox-close,
.ps-model-lightbox-nav {
    position: absolute;
    z-index: 2;
    display: grid;
    width: 46px;
    height: 46px;
    padding: 0;
    color: #fff;
    background: rgba(18, 18, 18, .82);
    border: 1px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    place-items: center;
}

.ps-model-lightbox-close:hover,
.ps-model-lightbox-close:focus-visible,
.ps-model-lightbox-nav:hover,
.ps-model-lightbox-nav:focus-visible {
    background: #0785af;
}

.ps-model-lightbox-close {
    top: 0;
    right: 0;
}

.ps-model-lightbox-prev {
    left: 0;
}

.ps-model-lightbox-next {
    right: 0;
}

body.ps-model-lightbox-open {
    overflow: hidden;
}

@media (max-width: 767.98px) {
    .ps-model-lightbox {
        padding: .65rem;
    }

    .ps-model-lightbox-dialog {
        width: 100%;
    }

    .ps-model-lightbox-content {
        width: 100%;
        padding: 3.3rem 0 3.2rem;
    }

    .ps-model-lightbox-image {
        max-height: calc(100vh - 200px);
    }

    .ps-model-lightbox-close,
    .ps-model-lightbox-nav {
        width: 42px;
        height: 42px;
    }

    .ps-model-lightbox-close {
        top: .2rem;
        right: .2rem;
    }

    .ps-model-lightbox-prev {
        bottom: .1rem;
        left: calc(50% - 52px);
        top: auto;
    }

    .ps-model-lightbox-next {
        right: calc(50% - 52px);
        bottom: .1rem;
        top: auto;
    }
}


#phoneTime {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
}




.generator-avatar-stack .generator-avatar {
    display: grid;
    place-items: center;

    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;
    line-height: 1;
    text-align: center;

    padding: 0;
}



.generator-avatar-stack .generator-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}




.generator-avatar {
    display: grid;
    place-items: center;

    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    line-height: 1;
    text-align: center;
    padding: 0;
}

.ps-generator-donation {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-top: 20px;
    margin-bottom: 8px;
}

.ps-generator-donation-button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 13px;

    min-width: 270px;
    min-height: 64px;
    padding: 10px 18px;

    color: #fff;
    text-decoration: none;

    background:
        linear-gradient(
            135deg,
            #2b1b00 0%,
            #8b6508 28%,
            #d4af37 52%,
            #8b6508 72%,
            #2b1b00 100%
        );

    border: 1px solid #d4af37;
    border-radius: 18px;

    box-shadow:
        0 10px 28px rgba(125, 89, 10, .26),
        inset 0 1px 0 rgba(255, 255, 255, .28);

    overflow: hidden;

    transition:
        transform .18s ease,
        box-shadow .18s ease,
        filter .18s ease;
}

.ps-generator-donation-button::before {
    position: absolute;
    inset: 0;
    content: "";

    background:
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 255, 255, .22) 45%,
            transparent 70%
        );

    transform: translateX(-120%);
    transition: transform .55s ease;
    pointer-events: none;
}

.ps-generator-donation-button:hover {
    color: #fff;
    text-decoration: none;

    transform: translateY(-2px);

    box-shadow:
        0 15px 35px rgba(125, 89, 10, .34),
        inset 0 1px 0 rgba(255, 255, 255, .3);

    filter: brightness(1.06);
}

.ps-generator-donation-button:hover::before {
    transform: translateX(120%);
}

.ps-generator-donation-button:focus-visible {
    outline: 3px solid rgba(212, 175, 55, .4);
    outline-offset: 3px;
}

.ps-generator-donation-icon {
    position: relative;
    z-index: 1;

    display: grid;
    flex: 0 0 auto;

    width: 42px;
    height: 42px;

    color: #2d1d00;
    background: linear-gradient(
        145deg,
        #fff0a6,
        #d4af37
    );

    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 13px;

    place-items: center;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .55),
        0 5px 12px rgba(0, 0, 0, .18);
}

.ps-generator-donation-copy {
    position: relative;
    z-index: 1;

    display: flex;
    min-width: 0;
    flex: 1;

    flex-direction: column;
    align-items: flex-start;

    line-height: 1.15;
}

.ps-generator-donation-copy strong {
    color: #fff;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .01em;
}

.ps-generator-donation-copy small {
    margin-top: 4px;

    color: rgba(255, 255, 255, .72);
    font-size: 11px;
    font-weight: 600;
}

.ps-generator-donation-arrow {
    position: relative;
    z-index: 1;

    margin-left: auto;

    color: #ffe8a3;
    font-size: 18px;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .ps-generator-donation-button {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ps-generator-donation-button,
    .ps-generator-donation-button::before {
        transition: none;
    }

    .ps-generator-donation-button:hover {
        transform: none;
    }
}