/*
 * Compagnon IA — page plein écran (ONMT-29).
 * Maquette Figma « Ntla9awfbladna_UI_Compagnon_IA » — écrans 12 à 21 (Lot 1).
 * Tokens repris des variables Figma (primary/deep-burgundy, base/whisper…).
 */
:root {
    --cp-red: #af1914;
    --cp-red-dark: #9b2528;
    --cp-black: #000;
    --cp-charcoal: #1a1a1a;
    --cp-whisper: #f7f7fc;
    --cp-whisper-border: #eff0f6;
    --cp-seashell: #eaeaea;
    --cp-light-grey: #c9c9c9;
    --cp-stardust: #949494;
    --cp-dove: #6d6d6d;
    --cp-warn-bg: #fef7eb;
    --cp-warn: #954600;
    --cp-ok: #2f7d4f;
    --cp-amber: #e8b04a;
    --cp-font: "Source Sans 3", "Source Sans Pro", "Noto Sans Arabic", system-ui, sans-serif;
    --cp-display: "Arsenal", "Noto Sans Arabic", Georgia, serif;
    --cp-col: 992px;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

.cp-body {
    font-family: var(--cp-font);
    color: var(--cp-black);
    background: var(--cp-whisper);
    -webkit-font-smoothing: antialiased;
}
.cp-body.is-rtl { --cp-font: "Noto Sans Arabic", "Source Sans 3", system-ui, sans-serif; }

:where(.cp-body) button { font: inherit; color: inherit; }
.cp-body img { display: block; }

/* ---------- Cadre ---------- */
.cp-app {
    height: 100vh;
    height: 100dvh;
    padding: 8px;
    display: flex;
}
.cp-panel {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    padding: 8px 16px;
    overflow: hidden;
}

/* ---------- Navbar ---------- */
.cp-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--cp-seashell);
    flex-shrink: 0;
    position: relative;
    z-index: 4;
}
.cp-brand { display: flex; align-items: center; gap: 16px; min-width: 0; }
.cp-logo img { width: 28px; height: 37px; }
.cp-brand-sep { width: 1px; height: 16px; background: var(--cp-light-grey); flex-shrink: 0; }
.cp-brand-labels { display: flex; align-items: flex-end; gap: 12px; min-width: 0; }
.cp-brand-title {
    font-size: 24px; line-height: 24px; letter-spacing: -0.5px;
    color: var(--cp-charcoal); white-space: nowrap;
}
.cp-brand-sub {
    font-size: 15px; line-height: 17px; color: var(--cp-dove); white-space: nowrap;
    transition: opacity .2s;
}
.cp-app.has-thread .cp-brand-sub { opacity: 0; }

.cp-nav-right { display: flex; align-items: center; justify-content: flex-end; gap: 16px; flex: 1; }

.cp-btn {
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 60px; padding: 16px; cursor: pointer;
    font-family: var(--cp-display); font-weight: 700; font-size: 14px; line-height: 16px;
    text-transform: uppercase; text-decoration: none; white-space: nowrap;
    transition: background-color .15s, opacity .15s;
}
.cp-btn-primary { background: var(--cp-red); color: #fff; }
.cp-btn-primary:hover { background: var(--cp-red-dark); }
.cp-btn-primary:disabled { opacity: .45; cursor: default; }

.cp-segmented {
    display: flex; align-items: center; padding: 6px;
    background: var(--cp-seashell); border-radius: 60px;
}
.cp-segment {
    display: flex; align-items: center; justify-content: center; padding: 12px;
    border-radius: 60px; text-decoration: none; color: var(--cp-black);
    font-family: "Arsenal", Georgia, serif; font-weight: 700; font-size: 14px; line-height: 12px;
    letter-spacing: 1.5px; text-transform: uppercase;
}
.cp-segment.is-active { background: var(--cp-black); color: #fff; }

.cp-icon-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; padding: 12px; border: 0; border-radius: 60px;
    background: transparent; cursor: pointer;
}
.cp-icon-btn:hover { background: var(--cp-whisper); }
.cp-download[hidden] { display: none; }
.cp-round-new { display: none; }

/* ---------- Zone défilante ---------- */
.cp-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    position: relative;
    z-index: 1;
    scrollbar-width: thin;
}

/* Accueil */
.cp-home {
    min-height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(20px, 4vh, 40px); padding: clamp(16px, 4vh, 48px) 0 110px;
}
.cp-app.has-thread .cp-home { display: none; }
.cp-home-title {
    margin: 0; text-align: center;
    font-family: var(--cp-display); font-weight: 400;
    font-size: clamp(40px, 7vh, 64px); line-height: 1.1; color: var(--cp-charcoal);
}
/* Slider d'accueil — même comportement que les sliders de la page d'accueil
   (glisser, défilement auto, barre de progression « custom-scrollbar »). */
.cp-slider {
    width: calc(100% + 32px);
    margin: 0 -16px;
    display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.cp-carousel {
    width: 100%;
    display: flex; gap: 24px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
    cursor: grab; user-select: none; -webkit-user-select: none;
}
.cp-carousel::-webkit-scrollbar { display: none; }
.cp-carousel.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cp-carousel-item img { pointer-events: none; }
button.cp-carousel-item {
    position: relative; padding: 0; border: 0; cursor: pointer; display: block;
    font: inherit; text-align: start;
}
.cp-carousel.is-dragging .cp-carousel-item { cursor: grabbing; }
.cp-carousel-item img { transition: transform .4s ease; }
.cp-carousel-item:hover img, .cp-carousel-item:focus-visible img { transform: scale(1.04); }
.cp-carousel-item:focus-visible { outline: 3px solid var(--cp-red); outline-offset: 3px; }
.cp-carousel-label {
    position: absolute; inset: auto 0 0 0; padding: 48px 20px 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0));
    color: #fff; font-family: var(--cp-display); font-size: 20px; line-height: 24px;
    opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
    pointer-events: none;
}
.cp-carousel-item:hover .cp-carousel-label,
.cp-carousel-item:focus-visible .cp-carousel-label { opacity: 1; transform: none; }
@media (hover: none) { .cp-carousel-label { opacity: 1; transform: none; font-size: 17px; padding: 36px 16px 14px; } }
.cp-scrollbar {
    position: relative; width: 250px; height: 3px;
    background: #e0e0e0; border-radius: 3px; cursor: pointer;
}
.cp-scrollbar-thumb {
    position: absolute; top: 0; left: 0; height: 100%; width: 25%;
    background: var(--cp-charcoal); border-radius: 3px; cursor: grab;
}
.cp-slider.no-scroll .cp-scrollbar { display: none; }
.cp-carousel-item {
    flex: 0 0 clamp(200px, 34vh, 320px); height: clamp(200px, 34vh, 320px); border-radius: 32px; overflow: hidden;
    scroll-snap-align: start; background: var(--cp-whisper);
}
.cp-carousel-item img { width: 100%; height: 100%; object-fit: cover; }
.cp-home-intro {
    margin: 0; max-width: 560px; text-align: center;
    font-size: 18px; line-height: 32px; letter-spacing: -0.3px; color: var(--cp-dove);
}

/* Fil de conversation */
.cp-thread {
    max-width: var(--cp-col);
    margin: 0 auto;
    padding: 40px 0 180px;
    display: flex; flex-direction: column; gap: 64px;
}
.cp-thread:empty { display: none; }

.cp-turn { display: flex; flex-direction: column; gap: 40px; }

.cp-bubble-row { display: flex; justify-content: flex-end; }
.cp-bubble {
    max-width: 482px; padding: 16px; border-radius: 12px;
    background: var(--cp-whisper);
    font-size: 16px; line-height: 24px; letter-spacing: -0.3px;
    overflow-wrap: anywhere; white-space: pre-wrap;
}

.cp-answer { display: flex; align-items: flex-start; gap: 18px; }
.cp-avatar {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 12px;
    background: var(--cp-red);
    display: flex; align-items: center; justify-content: center;
}
.cp-avatar img { width: 20px; height: 20px; }
.cp-answer.is-loading .cp-avatar img { animation: cp-spin 2.4s linear infinite; }
.cp-answer-body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; align-items: flex-start; gap: 24px;
}

.cp-text {
    max-width: 688px;
    font-size: 16px; line-height: 26px; letter-spacing: -0.3px;
    overflow-wrap: anywhere;
}
.cp-text p { margin: 0 0 12px; }
.cp-text p:last-child { margin-bottom: 0; }
.cp-text ul { margin: 0 0 12px; padding-inline-start: 20px; }
.cp-text li { margin: 4px 0; }
.cp-text .cp-heading { display: block; margin: 8px 0 4px; font-weight: 600; }
.cp-text.is-muted { color: var(--cp-dove); }
.cp-text a.cp-link { color: var(--cp-red); text-decoration: underline; overflow-wrap: anywhere; }
/* Réponse en arabe dans l'interface française (et inversement) : sens et
   police propres au texte (recette Lot 1, AF-021). */
.cp-answer-body.is-rtl-text { font-family: "Noto Sans Arabic", "Source Sans 3", system-ui, sans-serif; text-align: right; }
.cp-cite {
    font-size: 12px; vertical-align: super; line-height: 0;
    color: var(--cp-red); text-decoration: none; margin-inline-start: 1px;
}
.cp-cite:hover { text-decoration: underline; }
.cp-caret {
    display: inline-block; width: 2px; height: 1em; margin-inline-start: 2px;
    background: var(--cp-red); vertical-align: -2px;
    animation: cp-blink 1s steps(2, start) infinite;
}

/* Chargement : sources consultées + squelette */
.cp-loading { display: flex; flex-direction: column; gap: 24px; width: 100%; max-width: 688px; }
.cp-loading-text { font-size: 16px; line-height: 26px; letter-spacing: -0.3px; color: var(--cp-charcoal); }
.cp-loading-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.cp-loading-chips:empty { display: none; }
.cp-src-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 14px; border: 1px solid var(--cp-seashell); border-radius: 60px;
    font-size: 15px; line-height: 16px; color: var(--cp-charcoal);
    animation: cp-fade .3s ease both;
}
.cp-src-pill::before {
    content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--cp-ok); flex-shrink: 0;
}
.cp-src-pill.is-data { color: var(--cp-dove); }
.cp-src-pill.is-data::before { background: var(--cp-amber); }
.cp-skeleton { display: flex; flex-direction: column; gap: 16px; }
.cp-skeleton span {
    display: block; height: 12px; border-radius: 6px;
    background: linear-gradient(90deg, #f0f0f6 0%, #f7f7fc 50%, #f0f0f6 100%);
    background-size: 200% 100%;
    animation: cp-shimmer 1.4s ease-in-out infinite;
}
.cp-skeleton span:nth-child(1), .cp-skeleton span:nth-child(2) { width: 100%; }
.cp-skeleton span:nth-child(3) { width: 60%; }
.cp-skeleton span:nth-child(4) { width: 31%; }
.cp-skeleton span:nth-child(5) { width: 29%; }
.cp-skeleton span:nth-child(6) { width: 46%; }

/* Mise en forme du détail (programme / options) pendant l'écriture */
.cp-building {
    width: 100%; max-width: 688px; display: flex; flex-direction: column; gap: 16px;
    padding: 20px; border: 1px solid var(--cp-seashell); border-radius: 16px;
    animation: cp-fade .3s ease both;
}
.cp-building-text { font-size: 15px; line-height: 20px; color: var(--cp-dove); }
.cp-building-text::before {
    content: ""; display: inline-block; width: 8px; height: 8px; margin-inline-end: 10px; border-radius: 50%;
    background: var(--cp-red); vertical-align: 1px; animation: cp-pulse 1s ease-in-out infinite;
}
.cp-skeleton-table span { height: 14px; }
.cp-skeleton-table span:nth-child(1) { width: 35%; }
.cp-skeleton-table span:nth-child(2) { width: 90%; }
.cp-skeleton-table span:nth-child(3) { width: 80%; }
.cp-skeleton-table span:nth-child(4) { width: 60%; }

/* Choix rapides */
.cp-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.cp-chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px; border: 0; border-radius: 60px; cursor: pointer;
    background: var(--cp-whisper); color: var(--cp-black);
    font-size: 16px; line-height: 14px; letter-spacing: -0.1px; white-space: nowrap;
    transition: background-color .15s, color .15s;
}
.cp-chip:hover { background: #ececf5; }
.cp-chip.is-selected { background: var(--cp-red); color: #fff; }
.cp-chip.is-selected::before {
    content: ""; width: 14px; height: 14px; flex-shrink: 0;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cp-choices.is-done .cp-chip { cursor: default; }
.cp-choices.is-done .cp-chip:not(.is-selected) { opacity: .5; }
.cp-choices.is-done .cp-chip:not(.is-selected):hover { background: var(--cp-whisper); }

.cp-box {
    width: 100%; max-width: 688px;
    border: 1px solid var(--cp-seashell); border-radius: 16px; padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
}
.cp-label {
    font-family: var(--cp-display); font-weight: 700;
    font-size: 12px; line-height: 12px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--cp-dove);
}
.cp-choice-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.cp-hint { font-size: 14px; line-height: 16px; color: var(--cp-dove); }
.cp-choices.is-done .cp-choice-actions { display: none; }

/* Cartes d'options */
.cp-cards { display: flex; gap: 16px; width: 100%; align-items: stretch; }
.cp-card {
    position: relative;
    flex: 1 1 0; min-width: 0;
    display: flex; flex-direction: column; gap: 16px;
    border: 1px solid var(--cp-seashell); border-radius: 16px; overflow: hidden;
    background: #fff;
}
.cp-card-thumb {
    position: relative; height: 147px; padding: 12px; flex-shrink: 0;
    background: var(--cp-whisper) center / cover no-repeat;
}
.cp-card-thumb.is-empty {
    background-image: url("../images/compagnon/logo.svg"), linear-gradient(135deg, #f7f7fc, #eeeef5);
    background-size: 36px auto, cover;
    background-position: center, center;
    opacity: .9;
}
.cp-card-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-badge {
    position: relative;
    display: inline-flex; padding: 6px 8px; border-radius: 60px;
    background: rgba(0, 0, 0, .9); color: #fff;
    font-weight: 700; font-size: 12px; line-height: 11px; letter-spacing: -0.3px;
}
.cp-card-content {
    flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
    padding: 0 16px 16px;
}
.cp-card-upper { display: flex; flex-direction: column; gap: 16px; }
.cp-card-desc { display: flex; flex-direction: column; gap: 12px; }
.cp-card-title {
    margin: 0; font-family: var(--cp-display); font-weight: 400;
    font-size: 21px; line-height: 26px; color: var(--cp-black);
}
.cp-card-title a { color: inherit; text-decoration: none; }
.cp-card-title a:hover { text-decoration: underline; }
.cp-card-places { font-size: 13px; line-height: 16px; color: var(--cp-stardust); }
.cp-why {
    display: flex; flex-direction: column; gap: 6px;
    padding: 12px; border-radius: 16px; background: var(--cp-whisper);
}
.cp-why .cp-label { font-size: 11px; }
.cp-why p { margin: 0; font-size: 14px; line-height: 24px; letter-spacing: -0.3px; }
.cp-bullets { display: flex; flex-direction: column; gap: 14px; }
.cp-bullet {
    display: flex; align-items: center; gap: 12px;
    font-size: 14px; line-height: 19px; letter-spacing: -0.3px; color: var(--cp-dove);
}
.cp-bullet img { width: 16px; height: 16px; flex-shrink: 0; }
.cp-card-footer { border-top: 1px solid var(--cp-seashell); padding-top: 16px; }
.cp-link-upper {
    position: relative; display: inline-flex; flex-direction: column; gap: 5px;
    padding: 0; border: 0; background: none; cursor: pointer;
    font-family: var(--cp-display); font-weight: 700;
    font-size: 12px; line-height: 12px; letter-spacing: 1.5px; text-transform: uppercase;
    color: var(--cp-black);
}
.cp-link-upper::after {
    content: ""; height: 2px; width: 0; border-radius: 60px; background: var(--cp-black);
    transition: width .2s ease;
}
.cp-link-upper:hover::after, .cp-link-upper:focus-visible::after { width: 100%; }
.cp-link-upper:disabled { cursor: default; color: var(--cp-stardust); }
.cp-link-upper:disabled::after { width: 0; }

/* Programme jour par jour */
.cp-program { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.cp-day { border: 1px solid var(--cp-seashell); border-radius: 16px; background: #fff; overflow: hidden; }
.cp-day-head {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 16px; background: var(--cp-whisper);
}
.cp-day-left, .cp-slot-left { display: flex; align-items: center; gap: 32px; min-width: 0; }
.cp-day-name, .cp-slot-moment {
    flex: 0 0 80px;
    font-family: var(--cp-display); font-weight: 700;
    font-size: 12px; line-height: 12px; letter-spacing: 1.5px; text-transform: uppercase;
}
.cp-day-name { color: var(--cp-red); }
.cp-slot-moment { color: var(--cp-stardust); }
.cp-day-route, .cp-slot-text { font-size: 16px; line-height: 20px; letter-spacing: -0.3px; }
.cp-day-meta { font-size: 14px; line-height: 16px; letter-spacing: -0.3px; color: var(--cp-stardust); white-space: nowrap; }
.cp-slot {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 12px 16px; border-bottom: 1px solid var(--cp-seashell);
}
.cp-slot:last-child { border-bottom: 0; }
.cp-open {
    display: inline-flex; align-items: center; gap: 12px; flex-shrink: 0;
    padding: 8px 12px; border: 1px solid var(--cp-red); border-radius: 70px;
    color: var(--cp-red); text-decoration: none; font-size: 14px; line-height: 16px; letter-spacing: -0.3px;
    opacity: 0; transition: opacity .15s;
}
.cp-open img { width: 16px; height: 16px; }
.cp-slot:hover .cp-open, .cp-open:focus-visible { opacity: 1; }
@media (hover: none) { .cp-open { opacity: 1; } }

/* Lieux du parcours (slider) */
.cp-places { width: 100%; display: flex; flex-direction: column; gap: 16px; }
.cp-places-track {
    display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
    padding-bottom: 4px; scrollbar-width: none; cursor: grab;
}
.cp-places-track::-webkit-scrollbar { display: none; }
.cp-places-track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cp-places-track.is-dragging .cp-place { pointer-events: none; }
.cp-place {
    flex: 0 0 240px; scroll-snap-align: start;
    display: flex; flex-direction: column;
    border: 1px solid var(--cp-seashell); border-radius: 16px; overflow: hidden;
    background: #fff; color: var(--cp-black); text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}
.cp-place:hover { border-color: var(--cp-light-grey); box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.cp-place-thumb { position: relative; height: 130px; background: var(--cp-whisper); flex-shrink: 0; }
.cp-place-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-place-thumb.is-empty {
    background-image: url("../images/compagnon/logo.svg"), linear-gradient(135deg, #f7f7fc, #eeeef5);
    background-size: 30px auto, cover; background-position: center, center; background-repeat: no-repeat;
}
.cp-place-content { flex: 1; display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.cp-place-name { margin: 0; font-family: var(--cp-display); font-weight: 400; font-size: 19px; line-height: 23px; }
.cp-place-text {
    margin: 0; font-size: 14px; line-height: 21px; letter-spacing: -0.3px; color: var(--cp-dove);
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}
.cp-place-name { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.cp-place-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 6px; }
.cp-place-foot img { width: 16px; height: 16px; }
.is-rtl .cp-place-foot img { transform: scaleX(-1); }
.cp-choices-groups .cp-chips + .cp-label { margin-top: 8px; }

/* Avertissement */
.cp-warning {
    width: 100%; display: flex; flex-direction: column; gap: 12px; padding: 24px;
    border: 1px solid var(--cp-seashell); border-radius: 16px; background: var(--cp-warn-bg);
    color: var(--cp-warn);
}
.cp-warning-title { display: flex; align-items: center; gap: 10px; font-size: 16px; line-height: 20px; letter-spacing: -0.3px; }
.cp-warning-title img { width: 18px; height: 18px; flex-shrink: 0; }
.cp-warning p { margin: 0; font-size: 14px; line-height: 21px; letter-spacing: -0.3px; }

/* Sources */
.cp-sources { max-width: none; }
.cp-source {
    display: inline-flex; align-items: center; gap: 12px; max-width: 100%;
    padding: 12px 14px; border-radius: 24px; background: var(--cp-whisper);
    color: var(--cp-black); text-decoration: none;
    font-size: 15px; line-height: 20px; letter-spacing: -0.1px;
}
a.cp-source:hover { background: #ececf5; }
/* Le titre revient à la ligne au lieu d'être masqué en largeur étroite
   (recette Lot 1, AF-022 : largeur visible de 0 px à 390 / 615 px). */
.cp-source-title { font-weight: 600; min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.cp-source-label { font-size: 14px; color: var(--cp-stardust); flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; }
.cp-source-num { font-size: 13px; color: var(--cp-red); }
.cp-source img { width: 16px; height: 16px; flex-shrink: 0; }
.is-rtl .cp-source img, .is-rtl .cp-open img,
.is-rtl-text .cp-source img, .is-rtl-text .cp-open img { transform: scaleX(-1); }
.cp-body.is-rtl .cp-answer-body[dir="ltr"] .cp-source img,
.cp-body.is-rtl .cp-answer-body[dir="ltr"] .cp-open img { transform: none; }

/* ---------- Saisie ---------- */
.cp-shade {
    position: absolute; left: 0; right: 0; bottom: 0; height: 115px; z-index: 2;
    pointer-events: none; border-radius: 0 0 12px 12px;
    background: linear-gradient(to top, #fff 54%, rgba(255, 255, 255, .15) 80%, rgba(255, 255, 255, 0));
}
.cp-input {
    position: absolute; z-index: 3; bottom: 16px; left: 50%; transform: translateX(-50%);
    width: 794px; max-width: calc(100% - 32px); height: 60px;
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px 9px 24px;
    background: var(--cp-whisper); border: 1px solid var(--cp-whisper-border); border-radius: 60px;
}
.is-rtl .cp-input { padding: 9px 24px 9px 12px; }
.cp-input:focus-within { border-color: var(--cp-light-grey); }
.cp-input-field {
    flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
    font: inherit; font-size: 16px; line-height: 24px; letter-spacing: -0.3px; color: var(--cp-black);
}
.cp-input-field::placeholder { color: var(--cp-stardust); }
.cp-input-actions { display: flex; align-items: center; gap: 4px; }
.cp-input .cp-icon-btn { width: 36px; height: 36px; padding: 8px; }
.cp-send { opacity: .6; transition: opacity .15s; }
.cp-send:not(:disabled) { opacity: 1; }
.cp-send:not(:disabled) img { filter: brightness(0); }
.cp-send:disabled { cursor: default; background: transparent; }
.cp-mic.is-recording { background: rgba(175, 25, 20, .1); }
.cp-mic.is-recording img { animation: cp-pulse 1s ease-in-out infinite; }
.cp-stop {
    position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--cp-red); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.cp-stop::before {
    content: ""; position: absolute; inset: -4px; border-radius: 50%;
    border: 2px solid rgba(175, 25, 20, .2); border-top-color: var(--cp-red);
    animation: cp-spin 1s linear infinite;
}
.cp-stop-square { width: 14px; height: 14px; border-radius: 2px; background: #fff; }
.cp-stop[hidden], .cp-send[hidden], .cp-mic[hidden] { display: none; }

/* ---------- Animations ---------- */
@keyframes cp-spin { to { transform: rotate(360deg); } }
@keyframes cp-blink { to { visibility: hidden; } }
@keyframes cp-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@keyframes cp-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes cp-pulse { 50% { opacity: .4; } }
.cp-reveal { animation: cp-fade .35s ease both; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
    .cp-thread { padding-left: 8px; padding-right: 8px; }
    .cp-cards { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; scrollbar-width: none; }
    .cp-cards::-webkit-scrollbar { display: none; }
    .cp-card { flex: 0 0 280px; scroll-snap-align: start; }
}

/* ---------- Mobile (maquette « 21 - MOBILE ») ---------- */
@media (max-width: 767px) {
    .cp-app { padding: 0; }
    .cp-panel { border-radius: 0; padding: 12px 16px 0; }
    .cp-nav { padding-bottom: 12px; }
    .cp-logo img { width: 24px; height: 32px; }
    .cp-brand { gap: 12px; }
    .cp-brand-title { font-size: 20px; line-height: 24px; }
    .cp-brand-sub, .cp-new, .cp-segmented, .cp-close { display: none; }
    .cp-round-new {
        display: inline-flex; align-items: center; justify-content: center;
        width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--cp-red); cursor: pointer;
    }
    .cp-round-new img { filter: brightness(0) invert(1); }

    .cp-home { gap: 24px; padding: 24px 0 120px; }
    .cp-home-title { font-size: 40px; }
    .cp-carousel { gap: 12px; padding-inline: 16px; scroll-padding-inline: 16px; }
    .cp-slider { gap: 16px; }
    .cp-scrollbar { width: 60%; }
    .cp-carousel-item { flex-basis: 220px; height: 220px; border-radius: 24px; }
    .cp-home-intro { font-size: 16px; line-height: 26px; padding: 0 8px; }

    .cp-thread { padding: 24px 0 120px; gap: 40px; }
    .cp-turn { gap: 24px; }
    .cp-bubble { max-width: 85%; font-size: 15px; line-height: 23px; }
    .cp-answer { gap: 12px; }
    .cp-avatar { flex-basis: 26px; width: 26px; height: 26px; border-radius: 9px; }
    .cp-avatar img { width: 16px; height: 16px; }
    .cp-answer-body { gap: 18px; }
    .cp-text { font-size: 15px; line-height: 24px; }
    .cp-box { padding: 16px; }
    .cp-chip { font-size: 15px; }

    /* Cartes : défilement horizontal, vignette carrée à côté du titre. */
    .cp-cards { margin-inline-start: -38px; width: calc(100% + 54px); padding-inline-start: 38px; padding-inline-end: 16px; }
    .cp-card { flex: 0 0 250px; background: var(--cp-whisper); border-color: var(--cp-seashell); }
    .cp-card-thumb {
        position: absolute; top: 16px; inset-inline-start: 16px;
        width: 48px; height: 48px; padding: 0; border-radius: 12px;
    }
    .cp-card-thumb.is-empty { background-size: 20px auto, cover; }
    .cp-badge { display: none; }
    .cp-card-content { padding: 16px; }
    .cp-card-desc { min-height: 48px; padding-inline-start: 62px; justify-content: center; gap: 4px; }
    .cp-card-title { font-size: 19px; line-height: 22px; }
    .cp-why { background: #fff; }
    .cp-places-track { margin-inline-start: -38px; width: calc(100% + 54px); padding-inline: 38px 16px; scroll-padding-inline: 38px; }
    .cp-place { flex-basis: 210px; }

    .cp-day-head, .cp-slot { flex-wrap: wrap; }
    .cp-day-left, .cp-slot-left { gap: 12px; flex-wrap: wrap; }
    .cp-day-name, .cp-slot-moment { flex-basis: auto; }
    .cp-slot-left { flex-direction: column; align-items: flex-start; gap: 6px; }
    .cp-open { opacity: 1; }

    .cp-input { bottom: 12px; height: 52px; max-width: calc(100% - 24px); padding-inline-start: 18px; }
    .cp-shade { height: 90px; border-radius: 0; }
}