/* Conversation « services » (18/10) : premier exemple de « Pendant le séjour ». Le téléphone affiche une vraie
   conversation (un voyageur réserve un chef à domicile), réécrite en HTML au style des captures, message après
   message. Armé par services-conversation.js : sans JS, l'exemple parking d'origine. Les tailles sont en cqw
   (largeur du bouton qui porte le téléphone), comme la barre d'état d'iphone.css.
   Pour retirer : supprimer ce fichier, services-conversation.js et leurs deux lignes dans index.html, puis
   retirer la garde « services » de interactif-c-sejour.js (copie d'avant : interactif-c-sejour-avant-services.js). */
.conversation-proof.svc-mode .phone-screen>img{visibility:hidden}
.conversation-proof.svc-mode .zoom-label{visibility:hidden}
.conversation-proof.svc-mode .proof-button:disabled{cursor:default;opacity:1}
.svc-chat{display:none}
.conversation-proof.svc-mode .svc-chat{position:absolute;top:12.5cqw;right:0;bottom:0;left:0;display:flex;flex-direction:column;background:#ebe4d8;font-family:var(--sans,'DM Sans',sans-serif);color:#2b2b2b;text-align:left;overflow:hidden}

/* En-tête : retour, avatar, numéro masqué, logement, bouton de rafraîchissement */
.svc-head{flex:none;display:flex;align-items:center;gap:3cqw;height:15cqw;padding:0 3.6cqw 0 4cqw;border-bottom:.2cqw solid #00000014;background:#fff}
.svc-head svg{flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.svc-back{width:5cqw;height:5cqw}
.svc-avatar{flex:none;display:grid;place-items:center;width:9.4cqw;height:9.4cqw;border-radius:50%;background:#ece2d3;font-size:3.6cqw;color:#555}
.svc-who{flex:1;min-width:0;line-height:1.25}
.svc-who b{display:block;font-size:3.9cqw;font-weight:500;white-space:nowrap}
.svc-who span{display:flex;align-items:center;gap:1.2cqw;font-size:3.3cqw;color:#555;white-space:nowrap}
.svc-who span svg{width:3.3cqw;height:3.3cqw;stroke-width:1.8}
.svc-refresh{flex:none;display:grid;place-items:center;width:10cqw;height:10cqw;border:.25cqw solid #00000024;border-radius:2.6cqw}
.svc-refresh svg{width:4.6cqw;height:4.6cqw}

/* Le fil : les messages s'empilent par le bas, les plus anciens sortent par le haut */
.svc-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:2.6cqw;padding:3cqw 3cqw 3.4cqw;overflow:hidden}
.svc-row{display:flex;align-items:flex-end;gap:1.8cqw}
.svc-row-tia{justify-content:flex-end}
.svc-face{flex:none;display:grid;place-items:center;width:6.4cqw;height:6.4cqw;margin-bottom:5cqw;border:.25cqw solid #0000001f;border-radius:50%;background:#f4efe6}
.svc-row-tia .svc-face{background:#efe7f1;border-color:#72596f33}
.svc-face svg{width:3.4cqw;height:3.4cqw;fill:none;stroke:#555;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-row-tia .svc-face svg{stroke:#72596f}
.svc-msg{max-width:80%;padding:2.4cqw 3.4cqw 1.8cqw;border-radius:4.4cqw;font-size:3.45cqw;line-height:1.45;overflow-wrap:anywhere}
.svc-row-guest .svc-msg{border-bottom-left-radius:1.4cqw;background:#fff}
.svc-row-tia .svc-msg{border:.25cqw solid #d8cadd;border-bottom-right-radius:1.4cqw;background:#efe7f1}
.svc-msg p{margin:0}
.svc-msg p+p,.svc-msg ul+p{margin-top:1.8cqw}
.svc-msg ul{margin:1cqw 0 0;padding:0;list-style:none}
.svc-msg li{position:relative;padding-left:3cqw}
.svc-msg li:before{content:"";position:absolute;left:.6cqw;top:.68em;width:1cqw;height:1cqw;border-radius:50%;background:#72596f}
.svc-tag{display:flex;align-items:center;gap:1.4cqw;margin-bottom:1cqw;font-size:2.9cqw;font-weight:600;letter-spacing:.06em;color:#72596f}
.svc-tag svg{width:3.4cqw;height:3.4cqw;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-tag i{padding:.2cqw 1.2cqw;border:.25cqw solid #72596f66;border-radius:99px;font-style:normal;font-weight:500;letter-spacing:0}
/* La chouette de signature : les règles des captures (img pleine largeur) ne doivent pas l'atteindre */
.conversation-proof .svc-chat img.svc-owl{display:inline-block;width:3.2cqw;max-width:none;height:3.4cqw;margin:0 0 0 .6cqw;vertical-align:-.5cqw;visibility:visible}
.svc-recap{display:grid;gap:.8cqw;margin:1cqw 0 0;padding:0;list-style:none}
.svc-recap li{display:flex;align-items:flex-start;gap:1.8cqw;padding:0}
.svc-recap li:before{content:none}
.svc-recap svg{flex:none;width:3.6cqw;height:3.6cqw;margin-top:.5cqw;fill:none;stroke:#72596f;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc-time{display:block;margin-top:.8cqw;font-size:2.8cqw;color:#6f6a62;text-align:right}
.svc-typing{display:flex;gap:1.3cqw;padding:3.4cqw 4cqw}
.svc-typing span{width:1.6cqw;height:1.6cqw;border-radius:50%;background:#72596f;animation:svc-dot 1s ease-in-out infinite}
.svc-typing span:nth-child(2){animation-delay:.15s}.svc-typing span:nth-child(3){animation-delay:.3s}
@keyframes svc-dot{50%{transform:translateY(-1cqw);opacity:.5}}
.svc-new{animation:svc-pop .4s cubic-bezier(.2,.75,.2,1) both}
@keyframes svc-pop{from{opacity:0;transform:translateY(3cqw)}}

/* Barre d'écriture */
.svc-foot{flex:none;display:flex;align-items:center;gap:2.6cqw;padding:2.8cqw 3.4cqw 4.4cqw;border-top:.2cqw solid #00000014;background:#fff}
.svc-input{flex:1;height:11cqw;padding:0 3.4cqw;border:.25cqw solid #0000001f;border-radius:3.6cqw;background:#f6f1e8;font-size:3.6cqw;line-height:11cqw;color:#8b857b}
.svc-send{flex:none;display:grid;place-items:center;width:11cqw;height:11cqw;border-radius:50%;background:#9b9893}
.svc-send svg{width:4.6cqw;height:4.6cqw;fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Déroulé à côté : les lignes arrivent avec leur message */
#relay-sequence.svc-armed>li{opacity:0;transform:translateY(10px);transition:opacity .45s cubic-bezier(.2,.75,.2,1),transform .45s cubic-bezier(.2,.75,.2,1)}
#relay-sequence.svc-armed>li.svc-in{opacity:1;transform:none}

/* Calme : tout est affiché d'un coup */
.no-motion .svc-new,.no-motion .svc-typing span{animation:none}
.no-motion #relay-sequence.svc-armed>li{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){.svc-new,.svc-typing span{animation:none!important}#relay-sequence.svc-armed>li{opacity:1;transform:none;transition:none}}

/* Sélecteur en onglets (18/10) : les trois exemples sur une seule ligne, à parts égales, avec une icône au trait.
   La classe svc-tabs est posée par services-conversation.js. */
html #pendant-sejour .conversation-selector.svc-tabs{display:flex;flex-direction:row;flex-wrap:nowrap;gap:4px;width:100%;max-width:540px;margin:24px 0 26px;padding:4px;border:1px solid #72596f33;border-radius:20px;background:#fffaf2;box-shadow:0 8px 22px #2f382d0d}
html #pendant-sejour .conversation-selector.svc-tabs button{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:64px;padding:9px 6px;border:0;border-radius:16px;background:transparent;font-size:12.5px;font-weight:500;line-height:1.25;color:var(--forest);text-align:center;transition:background-color .2s,color .2s}
html #pendant-sejour .conversation-selector.svc-tabs button:not([aria-pressed=true]):hover{background:#72596f14}
html #pendant-sejour .conversation-selector.svc-tabs button[aria-pressed=true]{background:var(--forest);color:var(--cream)}
html #pendant-sejour .conversation-selector.svc-tabs button:focus-visible{outline:2px solid var(--terra);outline-offset:2px}
html #pendant-sejour .conversation-selector.svc-tabs .selector-dot,html #pendant-sejour .conversation-selector.svc-tabs button>span[aria-hidden]{display:none}
.svc-tab-icon{flex:none;width:19px;height:19px;fill:none;stroke:#72596f;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
[aria-pressed=true]>.svc-tab-icon{stroke:currentColor}

/* Le déroulé écrit à côté du téléphone répétait la conversation : retiré de l'écran, gardé pour les lecteurs d'écran */
html #pendant-sejour #relay-sequence{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important}