/* =============================================
   CARNET CATALAN — CHAT IMMERSIF
   Direction Immersive, artboards Chat.dc.html / ChatDesktop.dc.html.

   Deux surfaces, deux rôles :
   - le RAIL (vert forêt) porte la DISCUSSION — le fil des questions et des
     réponses, comme dans n'importe quel tchat, et la console de saisie ;
   - le CANEVAS (papier) porte l'OUTIL — la carte, la fiche ou la liste du
     message sélectionné, et les articles en lien.
   Le teal (--color-teal) n'est utilisé que pour les libellés système et la
   saisie ; l'or (--color-secondary) reste la couleur de marque/CTA. Angles
   droits et filets 1px partout : c'est ce qui distingue cette page du reste
   des interfaces de chat arrondies.
   ============================================= */

#cc-chat-page {
    /* 91px ≈ hauteur du header sticky (.header-inner). Hauteur bornée et non
       min-height : c'est ce qui permet aux deux colonnes de défiler chacune de
       leur côté au lieu de faire défiler la page entière. */
    height: calc(100vh - 91px);
    padding: 0;
    overflow: hidden;
    background: var(--color-paper, #F9F8F6);
}

/* Barre d'administration WordPress (comptes connectés) : 32 px de moins (46 px sous 783 px). Sans
   cette règle la saisie dépassait le bas de l'écran et la page entière défilait. */
.admin-bar #cc-chat-page { height: calc(100vh - 91px - 32px); }
@media (max-width: 782px) { .admin-bar #cc-chat-page { height: calc(100dvh - 91px - 46px); } }

#cc-chat-shell {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    position: relative;
    font-family: var(--font-textes, 'Inter', system-ui, sans-serif);
}

/* =============================================
   RAIL — index de conversation + console
   ============================================= */

#cc-chat-rail {
    background: var(--color-ink, #14201C);
    color: #F9F8F6;
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

#cc-rail-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(249, 248, 246, 0.16);
}

#cc-rail-identity {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

#cc-rail-wordmark {
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.01em;
    color: #F9F8F6;
}

#cc-rail-tagline {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-teal, #4FA8C9);
}

#cc-rail-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.cc-rail-icon-btn {
    /* Reset complet : la règle globale du thème (`button { padding:12px 24px }`)
       écrase sinon la taille et fait disparaître l'icône. */
    padding: 0;
    margin: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(249, 248, 246, 0.18);
    border-radius: 0;
    color: rgba(249, 248, 246, 0.72);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s;
}

.cc-rail-icon-btn:hover {
    border-color: var(--color-secondary, #C89445);
    color: var(--color-gold-light, #E3B563);
}

.cc-rail-avatar {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    font-weight: 600;
    color: var(--color-gold-light, #E3B563);
}

#cc-rail-label {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(249, 248, 246, 0.5);
    padding: 16px 20px 8px;
}

#cc-rail-thread {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 6px 22px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    scrollbar-width: thin;
    scrollbar-color: rgba(249, 248, 246, 0.2) transparent;
}

#cc-rail-thread::-webkit-scrollbar { width: 4px; }
#cc-rail-thread::-webkit-scrollbar-thumb { background: rgba(249, 248, 246, 0.2); }

/* Un message = une bulle. La question du visiteur à droite, la réponse pleine
   largeur à gauche : c'est ce qui fait de ce fil une discussion, pas un index. */
.cc-msg-text {
    margin: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12.5px;
    line-height: 1.55;
    color: #F9F8F6;
    text-align: left;
    overflow-wrap: anywhere;
}

.cc-msg--user {
    align-self: flex-end;
    max-width: 88%;
    background: rgba(249, 248, 246, 0.09);
    border: 1px solid rgba(249, 248, 246, 0.2);
    padding: 10px 14px;
}

/* La réponse est cliquable : elle ramène son outil dans le panneau. Le filet
   d'or marque celle dont l'outil est affiché. */
.cc-msg--bot {
    align-self: stretch;
    padding: 2px 0 2px 14px;
    border-left: 2px solid rgba(249, 248, 246, 0.14);
    cursor: pointer;
    transition: border-color 0.15s;
}

.cc-msg--bot:hover { border-left-color: rgba(249, 248, 246, 0.4); }
.cc-msg--bot.is-active { border-left-color: var(--color-secondary, #C89445); }
.cc-msg--bot.is-error .cc-msg-body { color: #F2B8A6; }

.cc-msg-body {
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 14.5px;
    line-height: 1.7;
    color: rgba(249, 248, 246, 0.94);
    text-align: left;
    overflow-wrap: anywhere;
}

.cc-msg-body p { margin: 0 0 0.9em; text-align: left; }
.cc-msg-body p:last-child { margin-bottom: 0; }
.cc-msg-body strong { color: #fff; font-weight: 700; }
.cc-msg-body em { color: rgba(249, 248, 246, 0.85); }
.cc-msg-body ul { margin: 0 0 0.9em; padding-left: 1.2em; }
.cc-msg-body li { margin: 0 0 0.45em; padding-left: 0.15em; }
.cc-msg-body li::marker { color: var(--color-secondary, #C89445); }
.cc-msg-body a {
    color: var(--color-gold-light, #E3B563);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.cc-msg-body a:hover { color: #fff; }

/* Bouton « Carte · 12 lieux → » sous la réponse : rend visible qu'un outil
   l'accompagne, et le ramène à droite quand on a consulté un message ancien. */
.cc-msg .cc-turn-typing span { background: #7CC3DC; }

/* Articles en lien : ils appartiennent au message, pas à l'outil. */
.cc-msg-sources {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(249, 248, 246, 0.14);
}

.cc-msg-sources-label {
    display: block;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(249, 248, 246, 0.5);
    margin-bottom: 6px;
}

.cc-msg-sources a {
    display: block;
    padding: 3px 0;
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-gold-light, #E3B563);
    text-decoration: none;
}

.cc-msg-sources a::before { content: '↗ '; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 10px; }
.cc-msg-sources a:hover { color: #fff; text-decoration: underline; }

/* Pendant qu'une réponse arrive, le panneau garde son dernier contenu, atténué. */
#cc-canvas-scroll.is-loading #cc-canvas-stage,
#cc-canvas-scroll.is-loading #cc-canvas-empty { opacity: 0.45; transition: opacity 0.2s; }
#cc-canvas-stage { transition: opacity 0.2s; }

.cc-msg-panel {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    margin-top: 12px;
    padding: 7px 11px;
    border: 1px solid rgba(79, 168, 201, 0.55);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-teal, #4FA8C9);
    transition: background-color 0.15s, color 0.15s;
}

.cc-msg-panel:hover { background: rgba(79, 168, 201, 0.16); color: #fff; }
.cc-msg-panel:focus-visible { outline: 2px solid var(--color-teal, #4FA8C9); outline-offset: 2px; }

/* ── Options de précision (demande large, cf. chatbot/CLARIFICATION.md) ── */

.cc-relance { margin-top: 14px; }

.cc-relance-question {
    display: block;
    margin-bottom: 8px;
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 14.5px;
    font-weight: 700;
    color: #fff;
}

.cc-relance-options { display: flex; flex-wrap: wrap; gap: 6px; }

.cc-relance-option {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 7px 11px;
    border: 1px solid var(--color-secondary, #C89445);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11.5px;
    color: var(--color-gold-light, #E3B563);
    transition: background-color 0.15s, color 0.15s;
}
.cc-relance-option small { margin-left: 5px; font-size: 10px; opacity: 0.7; }
.cc-relance-option:hover { background: var(--color-secondary, #C89445); color: var(--color-ink, #14201C); }
.cc-relance-option:focus-visible { outline: 2px solid var(--color-teal, #4FA8C9); outline-offset: 2px; }

/* Dans le bloc du canevas (mobile), sur fond clair. Sur bureau il est déjà dans le fil, en face. */
.cc-turn-block .cc-relance { margin: 0 0 20px; }
.cc-turn-block .cc-relance-question { color: var(--color-ink, #14201C); }
.cc-turn-block .cc-relance-option { color: #8C6423; }
@media (min-width: 1000px) { .cc-turn-block .cc-relance { display: none; } }

/* ── Console de saisie ── */

#cc-rail-console {
    border-top: 1px solid rgba(249, 248, 246, 0.16);
    padding: 14px 20px 18px;
    flex-shrink: 0;
}

#cc-chat-input-area {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(249, 248, 246, 0.22);
    background: rgba(249, 248, 246, 0.04);
    padding: 9px 11px;
    transition: border-color 0.15s;
}

#cc-chat-input-area:focus-within { border-color: var(--color-teal, #4FA8C9); }

#cc-chat-prompt {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 14px;
    line-height: 1;
    color: var(--color-teal, #4FA8C9);
    flex-shrink: 0;
}

#cc-chat-input {
    flex: 1;
    min-width: 0;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12.5px;
    color: #F9F8F6;
    caret-color: var(--color-teal, #4FA8C9);
}

#cc-chat-input::placeholder { color: rgba(249, 248, 246, 0.38); }

#cc-chat-send {
    padding: 0;
    margin: 0;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--color-gold-light, #E3B563);
    cursor: pointer;
    transition: transform 0.15s, color 0.15s;
}

#cc-chat-send:hover { transform: translateX(2px); }
#cc-chat-send:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

/* ── Porte de connexion (quota épuisé) ── */

#cc-chat-login-gate {
    margin-top: 14px;
    border-top: 1px dashed rgba(249, 248, 246, 0.22);
    padding-top: 14px;
}

#cc-chat-login-message {
    margin: 0 0 12px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    line-height: 1.55;
    color: rgba(249, 248, 246, 0.72);
    text-align: left;
}

#cc-chat-login-form,
#cc-chat-register-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#cc-chat-login-form input,
#cc-chat-register-form input {
    background: rgba(249, 248, 246, 0.05);
    border: 1px solid rgba(249, 248, 246, 0.22);
    border-radius: 0;
    padding: 9px 11px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    color: #F9F8F6;
    outline: none;
}

#cc-chat-login-form input::placeholder,
#cc-chat-register-form input::placeholder { color: rgba(249, 248, 246, 0.38); }

#cc-chat-login-form input:focus,
#cc-chat-register-form input:focus { border-color: var(--color-teal, #4FA8C9); }

#cc-chat-login-error,
#cc-chat-register-error {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    color: #E38A7A;
    min-height: 1em;
}

#cc-chat-login-submit,
#cc-chat-register-submit {
    padding: 10px 14px;
    border: none;
    border-radius: 0;
    background: var(--color-secondary, #C89445);
    color: var(--color-ink, #14201C);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.15s;
}

#cc-chat-login-submit:hover,
#cc-chat-register-submit:hover { background: var(--color-gold-light, #E3B563); }
#cc-chat-login-submit:disabled,
#cc-chat-register-submit:disabled { opacity: 0.5; cursor: not-allowed; }

#cc-chat-show-register,
#cc-chat-show-login {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    color: rgba(249, 248, 246, 0.55);
    text-align: center;
    cursor: pointer;
}

#cc-chat-show-register:hover,
#cc-chat-show-login:hover { color: var(--color-gold-light, #E3B563); }

/* ── Porte de quota (plafond glissant atteint, déjà connecté) ── */

#cc-chat-quota-gate {
    margin-top: 14px;
    border-top: 1px dashed rgba(249, 248, 246, 0.22);
    padding-top: 14px;
}

#cc-chat-quota-message {
    margin: 0 0 12px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    line-height: 1.55;
    color: rgba(249, 248, 246, 0.72);
    text-align: left;
}

#cc-chat-quota-dismiss {
    display: block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(249, 248, 246, 0.22);
    border-radius: 0;
    background: none;
    color: rgba(249, 248, 246, 0.72);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}

#cc-chat-quota-dismiss:hover { border-color: var(--color-teal, #4FA8C9); color: #F9F8F6; }

/* =============================================
   CANEVAS — la réponse en pleine page
   ============================================= */

#cc-chat-canvas {
    background: var(--color-paper, #F9F8F6);
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
}

#cc-canvas-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 14px clamp(20px, 4vw, 48px);
    border-bottom: 1px solid #E3DCC8;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6C7364;
    flex-shrink: 0;
}

#cc-canvas-head-right { color: var(--color-teal, #4FA8C9); }

#cc-canvas-head-left {
    display: flex;
    align-items: baseline;
    gap: 14px;
    min-width: 0;
}

/* Espaces à explorateur : ramène le panneau par défaut quand une réponse l'a remplacé. */
#cc-canvas-back {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 5px 10px;
    border: 1px solid var(--color-secondary, #C89445);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #8C6423;
    transition: background-color 0.15s, color 0.15s;
}
#cc-canvas-back[hidden] { display: none; }
#cc-canvas-back:hover { background: var(--color-secondary, #C89445); color: var(--color-ink, #14201C); }
#cc-canvas-back:focus-visible { outline: 2px solid var(--color-teal, #4FA8C9); outline-offset: 2px; }

/* ── Accueil du rail (espaces) : ce que l'assistant sait faire ici, et par où commencer ── */

#cc-rail-welcome { padding-top: 6px; }

.cc-rail-welcome-text {
    margin: 0 0 16px;
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 14px;
    line-height: 1.7;
    color: rgba(249, 248, 246, 0.86);
    text-align: left;
}

.cc-rail-suggestions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-rail-suggestion {
    all: unset;
    box-sizing: border-box;
    cursor: pointer;
    padding: 10px 13px;
    border: 1px solid rgba(249, 248, 246, 0.2);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    line-height: 1.45;
    color: #F9F8F6;
    transition: border-color 0.15s, background-color 0.15s;
}
.cc-rail-suggestion::before { content: '› '; color: var(--color-teal, #4FA8C9); }
.cc-rail-suggestion:hover { border-color: var(--color-secondary, #C89445); background: rgba(249, 248, 246, 0.05); }
.cc-rail-suggestion:focus-visible { outline: 2px solid var(--color-teal, #4FA8C9); outline-offset: 2px; }

#cc-canvas-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: clamp(22px, 3vw, 38px) clamp(20px, 4vw, 48px) 56px;
    scrollbar-width: thin;
    scrollbar-color: #D8D2C0 transparent;
}

#cc-canvas-scroll::-webkit-scrollbar { width: 5px; }
#cc-canvas-scroll::-webkit-scrollbar-thumb { background: #D8D2C0; }

/* ── État vide ── */

#cc-canvas-empty { max-width: 620px; }

#cc-canvas-intro {
    margin: 0 0 30px;
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.65;
    color: var(--color-ink, #14201C);
    text-align: left;
}

.cc-canvas-suggestions-label {
    display: block;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #6C7364;
    margin-bottom: 12px;
}

.cc-canvas-suggestions {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #E3DCC8;
    border: 1px solid #E3DCC8;
    max-width: 520px;
}

.cc-canvas-suggestion {
    all: unset;
    box-sizing: border-box;
    display: block;
    cursor: pointer;
    background: #fff;
    padding: 14px 16px;
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 15px;
    line-height: 1.45;
    color: var(--color-ink, #14201C);
    transition: background-color 0.15s, color 0.15s;
}

.cc-canvas-suggestion:hover { background: var(--color-ink, #14201C); color: #F9F8F6; }
.cc-canvas-suggestion:focus-visible { outline: 2px solid var(--color-teal, #4FA8C9); outline-offset: -2px; }

/* ── Un tour de conversation ── */

.cc-turn-block { max-width: 680px; }

/* Sur mobile les tours s'empilent : il leur faut un séparateur. Sur bureau un
   seul est visible à la fois (cf. media query), le filet disparaît alors. */
.cc-turn-block + .cc-turn-block {
    margin-top: 34px;
    padding-top: 30px;
    border-top: 1px solid #E3DCC8;
}

/* La question n'est rappelée dans le canevas que sur mobile : sur bureau elle
   est déjà lisible dans le rail, en face. */
.cc-turn-question {
    display: none;
    margin: 0 0 14px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    line-height: 1.5;
    color: #0C3F4E;
    background: rgba(79, 168, 201, 0.12);
    border: 1px solid rgba(79, 168, 201, 0.35);
    padding: 9px 12px;
    text-align: left;
}

.cc-turn-kicker {
    display: block;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-teal, #4FA8C9);
    margin-bottom: 12px;
}

/* Le texte du modèle. En italique quand il n'est que l'introduction d'une
   fiche (c'est une voix qui présente), en romain quand il EST la réponse. */
.cc-turn-prose {
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-ink, #14201C);
    text-align: left;
    margin: 0;
}

.cc-turn-prose p { margin: 0 0 1em; text-align: left; }
.cc-turn-prose p:last-child { margin-bottom: 0; }
.cc-turn-prose ul { margin: 0 0 1em; padding-left: 1.2em; }
.cc-turn-prose li { margin: 0 0 0.45em; }
.cc-turn-prose strong { font-weight: 700; }
.cc-turn-prose a { color: #8C6423; text-decoration: underline; text-underline-offset: 2px; }
.cc-turn-prose a:hover { color: var(--color-secondary, #C89445); }

.cc-turn-prose--intro {
    font-style: italic;
    font-size: 15px;
    color: #3B4540;
    margin-bottom: 20px;
}

.cc-turn-card { margin-top: 4px; }

/* Note « pas d'appel d'outil » : dit au visiteur d'où sort la réponse quand
   aucune fiche n'accompagne le texte. */
.cc-turn-note {
    margin: 18px 0 0;
    padding-top: 11px;
    border-top: 1px dashed #C0AC79;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    line-height: 1.6;
    color: #6C7364;
    text-align: left;
}

.cc-turn-sources {
    margin-top: 20px;
    padding-top: 12px;
    border-top: 1px solid #E3DCC8;
}

.cc-turn-sources-label {
    display: block;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6C7364;
    margin-bottom: 8px;
}

.cc-turn-source {
    display: block;
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 14px;
    line-height: 1.5;
    color: #8C6423;
    text-decoration: none;
    padding: 4px 0;
}

.cc-turn-source:hover { color: var(--color-secondary, #C89445); text-decoration: underline; }
.cc-turn-source::before { content: '↗ '; font-family: var(--font-mono, 'IBM Plex Mono', monospace); font-size: 11px; }

/* Indicateur de frappe */
.cc-turn-typing {
    display: flex;
    gap: 5px;
    padding: 6px 0;
}

.cc-turn-typing span {
    width: 6px;
    height: 6px;
    background: var(--color-teal, #4FA8C9);
    animation: cc-bounce 1.3s infinite;
}

.cc-turn-typing span:nth-child(2) { animation-delay: 0.18s; }
.cc-turn-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes cc-bounce {
    0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .cc-turn-typing span { animation: none; opacity: 0.6; }
}

/* =============================================
   FICHES STRUCTURÉES (sortie tool-calling)
   Établissement / événement / liste / carte.
   Surface blanche, filets droits, données en mono : la fiche se lit comme un
   encadré de magazine, pas comme une carte d'application.
   ============================================= */

.cc-card {
    background: #fff;
    border: 1px solid #E3DCC8;
    padding: 24px 26px;
}

.cc-card-kicker {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9.5px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-teal, #4FA8C9);
}

.cc-card-title {
    margin: 8px 0 16px;
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-weight: 700;
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    line-height: 1.15;
    color: var(--color-ink, #14201C);
}

.cc-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 32px;
    border-top: 1px dashed #C0AC79;
    padding-top: 15px;
}

.cc-card-fact {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.cc-card-fact-label {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.06em;
    color: #6C7364;
}

.cc-card-fact-value {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12.5px;
    font-weight: 500;
    color: #124657;
    font-variant-numeric: tabular-nums;
}

.cc-card-title a {
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid rgba(200, 148, 69, 0.5);
}

.cc-card-title a:hover { border-bottom-color: var(--color-secondary, #C89445); }

/* Horaires : la ligne du jour reste sur la fiche, la semaine se déplie. */
.cc-card-hours {
    margin-top: 14px;
    border-top: 1px dashed #E3DCC8;
    padding-top: 12px;
}

.cc-card-hours summary {
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6C7364;
}

.cc-card-hours summary::-webkit-details-marker { display: none; }
.cc-card-hours summary::before { content: '▸ '; }
.cc-card-hours[open] summary::before { content: '▾ '; }
.cc-card-hours summary:hover { color: var(--color-ink, #14201C); }

.cc-card-hours ul {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

.cc-card-hours li {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11.5px;
    line-height: 1.75;
    color: #124657;
}

.cc-card-contacts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    margin-top: 16px;
}

.cc-card-link {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 12px;
    color: #8C6423;
    text-decoration: none;
    border-bottom: 1px solid rgba(140, 100, 35, 0.4);
}

.cc-card-link:hover { color: var(--color-secondary, #C89445); }

/* Absence assumée : le corpus est incomplet (téléphone/horaires manquent sur la
   plupart des établissements). On le dit plutôt que d'afficher des champs vides
   — et surtout plutôt que de laisser le modèle les inventer. */
.cc-card-note {
    margin: 16px 0 0;
    padding-top: 11px;
    border-top: 1px dashed #E3DCC8;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    line-height: 1.55;
    color: #6C7364;
    text-align: left;
}

.cc-card-price {
    margin-top: 16px;
    background: rgba(79, 168, 201, 0.08);
    border-left: 3px solid var(--color-teal, #4FA8C9);
    padding: 13px 15px;
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 14px;
    line-height: 1.55;
    color: var(--color-ink, #14201C);
    text-align: left;
}

/* ── Liste de résultats / points de carte ── */

.cc-card--liste,
.cc-card--carte { padding: 0; }

.cc-card--liste .cc-card-kicker,
.cc-card--carte .cc-card-kicker { display: block; padding: 18px 22px 0; }

.cc-card--liste .cc-card-title,
.cc-card--carte .cc-card-title { margin: 8px 22px 16px; font-size: clamp(1.15rem, 1.8vw, 1.4rem); }

.cc-card-list { border-top: 1px solid #E3DCC8; }

/* Les cartes « liste » et « carte » n'ont pas de padding propre : leurs notes
   de bas de fiche doivent le reprendre. */
.cc-card--liste .cc-card-note,
.cc-card--carte .cc-card-note {
    margin: 0;
    padding: 12px 22px 14px;
    border-top: 1px solid #E3DCC8;
}

.cc-card-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 22px;
}

.cc-card-list-item + .cc-card-list-item { border-top: 1px solid #E3DCC8; }

.cc-card-list-name {
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-weight: 700;
    font-size: 15px;
    line-height: 1.35;
    color: var(--color-ink, #14201C);
    text-decoration: none;
    min-width: 0;
}

a.cc-card-list-name:hover { color: #8C6423; text-decoration: underline; }

/* Miniature d'établissement + son crédit (politique Google Places : jamais l'une sans l'autre). */
.cc-card-list-ident { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cc-card-list-vignette {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    object-fit: cover;
    border: 1px solid #E3DCC8;
    background: #EDE9DE;
}
.cc-card-list-texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cc-card-list-credit {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9.5px;
    color: #8A8F82;
}
.cc-card-list-credit a { color: inherit; }
.cc-popup-photo { margin-bottom: 6px; }
.cc-popup-photo .cc-card-list-vignette { width: 100%; height: 90px; display: block; }
.cc-popup-photo .cc-card-list-credit { display: block; margin-top: 3px; }

.cc-card-fiche {
    display: inline-block;
    margin-top: 16px;
    padding: 9px 13px;
    background: var(--color-ink, #14201C);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-light, #E3B563);
    text-decoration: none;
}
.cc-card-fiche:hover { background: #22332D; color: #fff; }

.cc-card-list-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    max-width: 55%;
}

.cc-card-list-sub {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    color: #6C7364;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cc-card-list-chip {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-teal, #4FA8C9);
    background: rgba(79, 168, 201, 0.12);
    padding: 3px 7px;
    flex-shrink: 0;
}

/* ── Carte Leaflet ── */

.cc-card-map {
    height: 300px;
    border-top: 1px solid #E3DCC8;
    background: #EDE9DE;
}

.cc-card-map .leaflet-container {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    background: #EDE9DE;
}

.cc-card-map .leaflet-control-zoom a {
    border-radius: 0;
    color: var(--color-ink, #14201C);
    border-color: #E3DCC8;
}

.cc-card-map .leaflet-control-attribution {
    font-size: 9px;
    background: rgba(249, 248, 246, 0.85);
}

.cc-card-map .leaflet-popup-content-wrapper,
.cc-card-map .leaflet-popup-tip {
    border-radius: 0;
    box-shadow: 0 6px 18px rgba(20, 32, 28, 0.18);
}

.cc-card-map .leaflet-popup-content {
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 13px;
    line-height: 1.5;
}

/* ── Carte en mode circuit (dès qu'un itinéraire est présent) ── */

/* La liste passe à droite de la carte : une randonnée se choisit en comparant
   des chiffres (distance, dénivelé, difficulté), pas en lisant une ligne. */
.cc-carte-split { border-top: 1px solid #E3DCC8; }
.cc-card--circuits .cc-card-map { border-top: 0; }

.cc-carte-panneau {
    overflow-y: auto;
    max-height: 260px;
    border-top: 1px solid #E3DCC8;
}

@media (min-width: 1000px) {
    .cc-carte-split {
        display: grid;
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    }
    /* Même hauteur que .cc-card-map, pour que les deux colonnes se ferment
       ensemble : un panneau plus haut que la carte laisserait un vide gris. */
    .cc-carte-panneau {
        max-height: 300px;
        border-top: 0;
        border-left: 1px solid #E3DCC8;
    }
}

.cc-carte-panneau .cc-card-list-item { padding: 11px 16px; }
.cc-circuit + .cc-circuit,
.cc-circuit + .cc-card-list-item,
.cc-card-list-item + .cc-circuit { border-top: 1px solid #E3DCC8; }

.cc-circuit.is-actif { background: rgba(200, 148, 69, 0.10); }

.cc-circuit-tete {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 100%;
    padding: 11px 16px;
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.cc-circuit-tete:hover { background: rgba(200, 148, 69, 0.08); }
.cc-circuit-tete:focus-visible { outline: 2px solid var(--color-teal, #4FA8C9); outline-offset: -2px; }

.cc-circuit-nom {
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-weight: 700;
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-ink, #14201C);
}

.cc-circuit-sub {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    color: #6C7364;
}

.cc-circuit-fiche { padding: 0 16px 13px; }

.cc-circuit-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 9px 12px;
    margin-bottom: 10px;
}

.cc-circuit-chiffre { display: flex; flex-direction: column; gap: 1px; }

.cc-circuit-chiffre span,
.cc-circuit-repere span {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #6C7364;
}

.cc-circuit-chiffre strong {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--color-ink, #14201C);
}

/* Départ et communes sont des phrases, pas des chiffres : une ligne pleine
   largeur, sinon « Maison de la vallée, Eyne » se comprime en colonne. */
.cc-circuit-repere {
    display: block;
    font-size: 12px;
    line-height: 1.45;
    color: #3A4440;
    margin-bottom: 5px;
}

.cc-circuit-repere span { display: block; }

.cc-circuit-lien {
    display: inline-block;
    margin-top: 6px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    color: #8C6423;
    text-decoration: none;
}

.cc-circuit-lien:hover { text-decoration: underline; }

/* Pastille de niveau devant le nom du circuit : même couleur que son tracé sur la carte. */
.cc-circuit-nom::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--c, #2A8FB8);
    box-shadow: 0 0 0 1.5px #fff, 0 0 0 2.5px rgba(20, 32, 28, 0.35);
    vertical-align: 1px;
}

/* Légende des niveaux, sous la carte des circuits. */
.cc-carte-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 10px 16px;
    border-top: 1px solid #E3DCC8;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    color: #6C7364;
}
.cc-carte-legende i {
    display: inline-block;
    width: 16px;
    height: 4px;
    margin-right: 6px;
    background: var(--c);
    vertical-align: 2px;
}

/* Renvoi vers la page qui présente tout ce type de contenu (espace Randonnées, agenda). */
.cc-card-espace {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-top: 1px solid #E3DCC8;
    background: var(--color-ink, #14201C);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-gold-light, #E3B563);
    text-decoration: none;
    transition: background-color 0.15s;
}
.cc-card-espace:hover { background: #22332D; color: #fff; }
.cc-card--evenement .cc-card-espace { margin: 18px -26px -24px; }

/* =============================================
   PANNEAU HISTORIQUE
   ============================================= */

/* Mobile : un tiroir qui glisse depuis la gauche, AU-DESSUS de la carte. Avant (panneau à droite, z-index 40), les
   calques de Leaflet (400 et plus) passaient par-dessus l'historique. */
#cc-chat-history-panel {
    position: fixed;
    inset: 0 auto 0 0;
    width: min(360px, 88vw);
    background: var(--color-paper, #F9F8F6);
    border-right: 1px solid #E3DCC8;
    box-shadow: 18px 0 40px rgba(20, 32, 28, 0.18);
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.28s ease, visibility 0s linear 0.28s;
    z-index: 100000;
}

#cc-chat-history-panel.is-open { transform: translateX(0); visibility: visible; transition: transform 0.28s ease; }

/* La carte du canevas garde ses calques pour elle : ses z-index ne débordent plus sur le reste du chat. */
#cc-chat-canvas { isolation: isolate; }

#cc-chat-history-new {
    margin-left: auto;
    height: 28px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid var(--color-secondary, #C89445);
    border-radius: 0;
    color: var(--color-gold-light, #E3B563);
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    letter-spacing: 0.06em;
    cursor: pointer;
}
#cc-chat-history-new:hover { background: rgba(200, 148, 69, 0.15); }

/* Bureau : une vraie colonne à gauche du fil, que le bouton horloge ouvre et ferme. */
@media (min-width: 1000px) {
    #cc-chat-history-panel { display: none; }
    #cc-chat-shell.cc-historique-ouvert {
        grid-template-columns: 280px minmax(400px, 36%) minmax(0, 1fr);
    }
    .cc-historique-ouvert #cc-chat-history-panel {
        display: flex;
        position: static;
        width: auto;
        transform: none;
        visibility: visible;
        transition: none;
        box-shadow: none;
        grid-column: 1;
        grid-row: 1;
        min-height: 0;
        z-index: auto;
    }
    .cc-historique-ouvert #cc-chat-rail { grid-column: 2; grid-row: 1; }
    .cc-historique-ouvert #cc-chat-canvas { grid-column: 3; grid-row: 1; }
    .cc-historique-ouvert #cc-chat-history-close { display: none; }
    #cc-chat-history-btn[aria-expanded="true"] { border-color: var(--color-secondary, #C89445); color: var(--color-gold-light, #E3B563); }
}

#cc-chat-history-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    background: var(--color-ink, #14201C);
    flex-shrink: 0;
}

#cc-chat-history-panel-header h2 {
    margin: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    font-weight: 500;
    color: #F9F8F6;
}

#cc-chat-history-close {
    padding: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(249, 248, 246, 0.2);
    border-radius: 0;
    color: #F9F8F6;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

#cc-chat-history-close:hover { border-color: var(--color-secondary, #C89445); color: var(--color-gold-light, #E3B563); }

#cc-chat-history-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 18px 20px 30px;
}

.cc-chat-history-loading,
.cc-chat-history-empty,
.cc-chat-history-login-hint {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11.5px;
    line-height: 1.7;
    color: #6C7364;
    text-align: left;
}

.cc-chat-history-login-hint a {
    display: inline-block;
    margin-top: 8px;
    color: #8C6423;
}

.cc-chat-history-item {
    display: block;
    width: 100%;
    text-align: left;
    font: inherit;
    color: inherit;
    border: 1px solid #E3DCC8;
    border-radius: 0;
    background: #fff;
    padding: 13px 15px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: border-color 0.15s;
}

.cc-chat-history-item:hover { border-color: var(--color-secondary, #C89445); transform: none; }
.cc-chat-history-item.is-active { border-color: var(--color-secondary, #C89445); background: #FBF3E4; }

.cc-chat-history-item strong {
    display: block;
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-ink, #14201C);
    margin-bottom: 6px;
}

.cc-chat-history-item span {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    color: #6C7364;
}

/* D'où vient la conversation (/chat ou un espace) : « Reprendre » la rouvre là-bas. */
.cc-chat-history-espace {
    display: inline-block;
    margin-bottom: 7px;
    font-style: normal;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 9px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-teal, #4FA8C9);
    background: rgba(79, 168, 201, 0.12);
    padding: 3px 7px;
}

#cc-chat-history-detail-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

#cc-chat-history-back {
    padding: 0;
    background: none;
    border: none;
    border-radius: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    color: #6C7364;
    cursor: pointer;
}

#cc-chat-history-back:hover { color: var(--color-ink, #14201C); }

#cc-chat-history-resume {
    padding: 8px 12px;
    background: var(--color-secondary, #C89445);
    color: var(--color-ink, #14201C);
    border: none;
    border-radius: 0;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}

#cc-chat-history-resume:hover { background: var(--color-gold-light, #E3B563); }

.cc-chat-history-msg {
    font-size: 13px;
    line-height: 1.6;
    padding: 10px 12px;
    margin-bottom: 8px;
    text-align: left;
}

.cc-chat-history-msg--user {
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 11.5px;
    color: #0C3F4E;
    background: rgba(79, 168, 201, 0.1);
    border: 1px solid rgba(79, 168, 201, 0.3);
}

.cc-chat-history-msg--bot {
    font-family: var(--font-titres, 'Merriweather', Georgia, serif);
    color: var(--color-ink, #14201C);
    background: #fff;
    border: 1px solid #E3DCC8;
}

/* =============================================
   BUREAU — deux volets côte à côte
   ============================================= */

@media (min-width: 1000px) {
    /* Le rail porte maintenant des réponses argumentées : il lui faut de la largeur. */
    #cc-chat-shell {
        grid-template-columns: minmax(440px, 40%) minmax(0, 1fr);
        grid-template-rows: 1fr;
    }

    #cc-chat-rail { border-right: 1px solid rgba(249, 248, 246, 0.1); }

    /* Le canevas ne montre que le tour sélectionné : c'est le rail qui sert de
       fil. Tous les blocs restent dans le DOM (le clic sur une ligne du rail
       n'a donc rien à recharger), seul l'affichage change. */
    .cc-turn-block { display: none; max-width: none; }
    .cc-turn-block.is-active { display: block; }

    /* Question et réponse sont dans le fil, à gauche : le canevas ne garde que
       l'outil (sur-titre, carte ou fiche, articles en lien). */
    .cc-turn-block .cc-turn-prose { display: none; }
    /* Le sur-titre (« Carte · 20 lieux ») est déjà dans l'en-tête du canevas. */
    .cc-turn-block .cc-turn-kicker { display: none; }
    /* Les articles en lien sont dans le fil, sous la réponse. */
    .cc-turn-block .cc-turn-sources { display: none; }
    .cc-turn-block + .cc-turn-block { margin-top: 0; padding-top: 0; border-top: none; }

    /* L'outil a tout le panneau pour lui : la carte en prend la hauteur au lieu de 300 px fixes
       (retour du 2026-09-23 : « l'appel à outil carte est vraiment petit »). */
    .cc-turn-block .cc-card-map { height: clamp(340px, calc(100vh - 330px), 680px); }
    .cc-turn-block .cc-carte-panneau { max-height: clamp(340px, calc(100vh - 330px), 680px); }
}

/* =============================================
   MOBILE — un seul fil, console fixée en bas
   ============================================= */

@media (max-width: 999px) {
    #cc-chat-page { height: calc(100dvh - 91px); }

    /* Le rail se réduit à son en-tête : l'index par tour n'a pas de place, et
       le fil complet est de toute façon déroulé dans le canevas. */
    #cc-rail-label,
    #cc-rail-thread { display: none; }

    #cc-chat-shell { grid-template-rows: auto minmax(0, 1fr) auto; }

    #cc-chat-rail {
        display: contents;
    }

    #cc-rail-brand {
        grid-row: 1;
        background: var(--color-ink, #14201C);
    }

    #cc-rail-console {
        grid-row: 3;
        background: var(--color-ink, #14201C);
        border-top: none;
        max-height: 62vh;
        overflow-y: auto;
    }

    #cc-chat-canvas { grid-row: 2; }

    /* Le nom du site est déjà dans l'en-tête du thème juste au-dessus : le
       répéter dans la barre du rail ne fait que manger de la hauteur. */
    #cc-rail-wordmark { display: none; }

    .cc-turn-question { display: block; }

    /* Sur mobile la sélection n'a pas de sens : tout est visible. */
    .cc-turn-block.is-active { display: block; }

    #cc-canvas-head { display: none; }

    .cc-card { padding: 18px 18px 16px; }
    .cc-card--liste .cc-card-kicker,
    .cc-card--carte .cc-card-kicker { padding: 16px 16px 0; }
    .cc-card--liste .cc-card-title,
    .cc-card--carte .cc-card-title { margin: 6px 16px 12px; }
    .cc-card-list-item { padding: 12px 16px; }
    .cc-card-list-meta { max-width: 48%; }
    .cc-card-map { height: 230px; }
}

/* Photo de l'établissement, importée depuis Google Places.
   Le crédit à l'auteur n'est pas une mention décorative : la politique Places l'impose dès
   que la photo est affichée. Il est donc stylé comme une partie de la figure, jamais
   masquable indépendamment d'elle. */
.cc-card-media {
    margin: 0 0 16px;
}

.cc-card-media img {
    display: block;
    width: 100%;
    height: 190px;
    object-fit: cover;
    border: 1px solid #E3DCC8;
}

.cc-card-credit {
    margin-top: 6px;
    font-family: var(--font-mono, 'IBM Plex Mono', monospace);
    font-size: 10px;
    letter-spacing: 0.04em;
    color: #6C7364;
}

.cc-card-credit a {
    color: #124657;
    text-decoration: none;
    border-bottom: 1px solid rgba(18, 70, 87, 0.35);
}

.cc-card-credit a:hover { border-bottom-color: #124657; }