/* Maquette de la page Support / contact (26/10/2026), trois versions : tpl/v2/support/page.php.
   Mêmes polices et mêmes filets que les pages légales et l'installation. */
@font-face { font-family: 'Inter Tight Doc'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/v2/fonts/essai/inter-tight-latin-wght-normal.woff2) format('woff2'); }
@font-face { font-family: 'Inter Doc'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(/assets/v2/fonts/inter-var.woff2) format('woff2'); }

.su {
  --su-titre: 'Inter Tight Doc', 'Inter Doc', system-ui, sans-serif;
  --su-corps: 'Inter Doc', system-ui, sans-serif;
  --su-filet: rgba(17,17,17,.1);
  --su-doux: #F4F4F2;
  font-family: var(--su-corps);
  width: min(100% - 32px, 1120px); margin: 0 auto; padding: 168px 0 var(--fg-bas, 120px);
}
.su a { color: inherit; text-decoration: underline; text-decoration-color: var(--su-filet); text-underline-offset: 3px; }
.su a:hover { text-decoration-color: currentColor; }
.su p { font-size: 17px; line-height: 1.6; color: var(--fg-texte, #333); margin: 0 0 14px; }
.su b { color: var(--fg-encre); font-weight: 600; }

.su-h1 { font-family: var(--su-titre); font-weight: 800; font-size: clamp(44px, 6.4vw, 80px); line-height: 1; letter-spacing: -.035em; color: var(--fg-encre); margin: 0; }
.su-h2 { font-family: var(--su-titre); font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -.02em; color: var(--fg-encre); margin: 0 0 16px; }
.su-h2--centre { text-align: center; margin-bottom: 28px; }
.su-chapo { max-width: 600px; margin: 20px 0 0 !important; font-size: 19px !important; line-height: 1.5 !important; color: var(--fg-gris) !important; }
.su-sur { font-size: 12px !important; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-gris) !important; margin: 0 0 14px !important; }
.su-sur--centre { text-align: center; }
.su-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 24px 0 0 !important; }
.su-meta span { font-size: 13px; padding: 5px 11px; border: 1px solid var(--su-filet); border-radius: 999px; color: var(--fg-texte, #333); }

.su-haut { text-align: center; padding-bottom: 64px; }
.su-haut .su-chapo { margin-inline: auto !important; }
.su-bloc { padding-top: 80px; scroll-margin-top: 104px; }
.su-bloc--aide { padding-top: 0; }
.su-bloc--etroit { max-width: 760px; margin: 0 auto; }

/* Les raccourcis vers l'aide écrite */
.su-raccourcis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.su-raccourci { position: relative; display: grid; gap: 6px; align-content: start; padding: 20px 44px 20px 20px; border: 1px solid var(--su-filet); border-radius: 16px; text-decoration: none !important; transition: border-color .2s; }
.su-raccourci:hover { border-color: rgba(17,17,17,.35); }
.su-raccourci b { font-size: 16px; }
.su-raccourci span { font-size: 14px; line-height: 1.5; color: var(--fg-gris); }
.su-raccourci i { position: absolute; right: 18px; top: 18px; font-style: normal; color: var(--fg-gris); transition: transform .2s; }
.su-raccourci:hover i { transform: translateX(3px); color: var(--fg-encre); }

/* Le formulaire */
.su-form { display: grid; gap: 16px; }
.su-hp { position: absolute; left: -9999px; }
.su-raisons { border: 0; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.su-raisons legend { font-size: 14px; font-weight: 600; color: var(--fg-encre); padding: 0; margin: 0 0 10px; }
.su-raison { position: relative; display: grid; gap: 4px; padding: 14px 16px 14px 44px; border: 1px solid var(--su-filet); border-radius: 12px; background: #fff; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.su-raison input { position: absolute; left: 16px; top: 16px; margin: 0; width: 16px; height: 16px; accent-color: var(--fg-encre); }
.su-raison-t { font-size: 15px; font-weight: 600; color: var(--fg-encre); }
.su-raison-d { font-size: 13px; line-height: 1.45; color: var(--fg-gris); }
.su-raison:has(input:checked) { border-color: var(--fg-encre); box-shadow: inset 0 0 0 1px var(--fg-encre); }
.su-raison:has(input:focus-visible) { outline: 2px solid var(--fg-encre); outline-offset: 2px; }

.su-ligne { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.su-champ { display: grid; gap: 6px; }
.su-champ > span { font-size: 14px; font-weight: 500; color: var(--fg-encre); }
.su-champ em { font-style: normal; font-weight: 400; color: var(--fg-gris); margin-left: 4px; }
.su-champ input, .su-champ select, .su-champ textarea { font: inherit; font-size: 16px; color: var(--fg-encre); background: #fff; border: 1px solid rgba(17,17,17,.18); border-radius: 10px; padding: 11px 13px; width: 100%; box-sizing: border-box; transition: border-color .15s; }
.su-champ textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.su-champ input::placeholder, .su-champ textarea::placeholder { color: #9A9A95; }
.su-champ input:focus, .su-champ select:focus, .su-champ textarea:focus { outline: none; border-color: var(--fg-encre); box-shadow: 0 0 0 3px rgba(17,17,17,.08); }
.su-boutique { display: grid; gap: 16px; }
/* Les champs de la boutique ne servent que pour un souci ou une licence */
.su-form:has(input[value="question"]:checked) .su-boutique,
.su-form:has(input[value="other"]:checked) .su-boutique { display: none; }

.su-envoi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 4px; }
.su-envoi p { margin: 0 !important; font-size: 14px !important; color: var(--fg-gris) !important; }
.su-btn { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 999px; font-size: 15px; font-weight: 500; cursor: pointer; }
.su-btn--plein { background: var(--fg-encre); color: #fff; }
.su-btn--plein:hover { background: #000; }
.su-btn:focus-visible { outline: 2px solid var(--fg-encre); outline-offset: 3px; }

.su-avis { padding: 14px 16px; border-radius: 12px; font-size: 15px !important; margin: 0 0 16px !important; }
.su-avis--ok { background: #EAF5EE; color: #1F5F35 !important; }
.su-avis--err { background: #FBECEC; color: #8A2020 !important; }

/* Ce que le support couvre */
.su-perimetre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.su-perimetre > div { padding: 24px; border-radius: 16px; background: var(--su-doux); }
.su-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.su-liste li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.45; color: var(--fg-encre); }
.su-liste li::before { position: absolute; left: 0; top: 0; width: 18px; text-align: center; font-weight: 600; }
.su-liste--oui li::before { content: '✓'; }
.su-liste--non li { color: var(--fg-gris); }
.su-liste--non li::before { content: '–'; }

/* Questions */
.su-faq { border-bottom: 1px solid var(--su-filet); }
.su-faq:first-of-type { border-top: 1px solid var(--su-filet); }
.su-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font-size: 17px; font-weight: 500; color: var(--fg-encre); }
.su-faq summary::-webkit-details-marker { display: none; }
.su-faq summary i { position: relative; width: 14px; height: 14px; flex: none; margin-top: 5px; }
.su-faq summary i::before, .su-faq summary i::after { content: ''; position: absolute; left: 0; top: 6.5px; width: 14px; height: 1.5px; background: currentColor; }
.su-faq summary i::after { transform: rotate(90deg); transition: transform .2s; }
.su-faq[open] summary i::after { transform: rotate(0); }
.su-faq p { padding-bottom: 18px; color: var(--fg-gris); }

/* ── A : le titre centré d'Atoks, puis infos à gauche et formulaire dans un bloc gris ── */
.su--a .su-duo { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; padding-top: 96px; scroll-margin-top: 104px; }
.su--a .su-infos { position: sticky; top: 120px; }
.su--a .su-infos .su-h2 { font-size: 40px; font-weight: 800; letter-spacing: -.03em; }
.su--a .su-carte-form { background: var(--su-doux); border-radius: 20px; padding: 32px; }
.su-lignes { margin: 28px 0 0; }
.su-lignes > div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--su-filet); }
.su-lignes > div:first-child { border-top: 1px solid var(--su-filet); }
.su-lignes dt { font-size: 14px; color: var(--fg-gris); }
.su-lignes dd { margin: 0; font-size: 16px; color: var(--fg-encre); }

/* ── B : une colonne centrée, comme les pages légales ── */
.su--b { width: min(100% - 32px, 760px); }
.su--b .su-haut { padding-bottom: 24px; }
.su--b .su-raccourcis { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--su-filet); }
.su--b .su-raccourci { border: 0; border-bottom: 1px solid var(--su-filet); border-radius: 0; padding: 18px 44px 18px 0; grid-template-columns: 240px minmax(0, 1fr); align-items: baseline; gap: 16px; }
.su--b .su-raccourci i { right: 4px; top: 19px; }
.su--b .su-form { margin-top: 24px; }

/* ── C : l'essentiel collé à gauche, le reste défile à droite ── */
.su--c { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; padding-top: 152px; }
.su--c .su-cote { position: sticky; top: 120px; }
.su--c .su-h1 { font-size: clamp(48px, 6vw, 76px); }
.su-engagements { list-style: none; margin: 36px 0 0; padding: 0; border-top: 1px solid var(--su-filet); }
.su-engagements li { display: grid; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--su-filet); }
.su-engagements b { font-size: 16px; }
.su-engagements span { font-size: 14px; line-height: 1.5; color: var(--fg-gris); }
.su-mail { margin-top: 24px !important; font-size: 16px !important; }
.su--c .su-bloc--premier { padding-top: 6px; }
.su--c .su-raccourcis { grid-template-columns: 1fr; gap: 8px; }
.su--c .su-perimetre { grid-template-columns: 1fr; }

@media (max-width: 999px) {
  .su--a .su-duo, .su--c { display: block; }
  .su--a .su-infos, .su--c .su-cote { position: static; }
  .su--a .su-infos { margin-bottom: 32px; }
  .su--c .su-col { margin-top: 56px; }
}
@media (max-width: 809px) {
  .su { padding-top: 120px; }
  .su--c { padding-top: 120px; }
  .su-haut { text-align: left; padding-bottom: 40px; }
  .su-haut .su-chapo { margin-inline: 0 !important; }
  .su-meta { justify-content: flex-start; gap: 0; }
  .su-meta span { border: 0; padding: 0; color: var(--fg-gris); }
  .su-meta span + span::before { content: '·'; margin: 0 8px; }
  .su-h1 { font-size: 44px; }
  .su-chapo { font-size: 17px !important; }
  .su-h2, .su--a .su-infos .su-h2 { font-size: 28px; }
  .su-h2--centre, .su-sur--centre { text-align: left; }
  .su p { font-size: 16px; }
  .su-bloc { padding-top: 56px; }
  .su--a .su-duo { padding-top: 56px; }
  .su-raccourcis, .su-perimetre, .su-raisons, .su-ligne { grid-template-columns: 1fr; }
  .su--b .su-raccourci { grid-template-columns: 1fr; gap: 4px; }
  .su--a .su-carte-form { padding: 20px; margin: 0 -4px; border-radius: 16px; }
  .su-raison { padding: 12px 14px 12px 42px; }
  .su-raison input { top: 14px; }
  .su-perimetre > div { padding: 20px; }
}

/* ══ Version S : la DA de Sonos (support.sonos.com), retenue par Théo le 26/10 ══
   Bandeau photo et recherche, titres centrés, tuiles de sujets, onglets de produits,
   ressources en photo, bandeau gris de fin. Un seul gros bouton de discussion. */
.sn {
  --sn-titre: 'Inter Tight Doc', 'Inter Doc', system-ui, sans-serif;
  --sn-filet: rgba(17,17,17,.12);
  --sn-gris: #F4F4F3;
  font-family: 'Inter Doc', system-ui, sans-serif; color: var(--fg-encre);
  padding: 72px 0 0;
}
.sn a { color: inherit; }
.sn-h1 { font-family: var(--sn-titre); font-weight: 700; font-size: clamp(40px, 5.4vw, 64px); line-height: 1.04; letter-spacing: -.03em; margin: 0; }
.sn-h2 { font-family: var(--sn-titre); font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.1; letter-spacing: -.025em; text-align: center; margin: 0 0 40px; }
.sn-sec { padding: 96px max(16px, calc((100% - 1120px) / 2)); }
.sn-gris { background: var(--sn-gris); }
.sn-centre { text-align: center; margin: 40px 0 0; }

/* Bandeau : les démos en mosaïque, passées en gris, sous le titre */
.sn-bandeau { position: relative; overflow: hidden; background: #2A2A28; min-height: 360px; display: grid; place-items: center; }
.sn-mosaique { position: absolute; inset: -20px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; transform: rotate(-4deg) scale(1.12); }
.sn-mosaique img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; object-position: top; filter: grayscale(1) contrast(.9); opacity: .55; border-radius: 10px; }
.sn-bandeau::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,20,19,.25), rgba(20,20,19,.55)); }
.sn-bandeau-corps { position: relative; z-index: 1; width: min(100% - 32px, 620px); text-align: center; padding: 72px 0; }
.sn-bandeau .sn-h1 { color: #fff; }
.sn-cherche { position: relative; margin: 28px 0 0; }
.sn-cherche svg { position: absolute; left: 16px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); fill: none; stroke: #6B6B66; stroke-width: 1.8; stroke-linecap: round; }
.sn-cherche input { width: 100%; box-sizing: border-box; height: 52px; border: 0; border-radius: 10px; padding: 0 16px 0 46px; font: inherit; font-size: 16px; color: var(--fg-encre); background: #fff; }
.sn-cherche input:focus { outline: 3px solid rgba(255,255,255,.5); }
.sn-trouve { position: relative; list-style: none; margin: 8px 0 0; padding: 6px; background: #fff; border-radius: 10px; text-align: left; box-shadow: 0 20px 40px -20px rgba(0,0,0,.4); }
.sn-trouve button { all: unset; box-sizing: border-box; display: block; width: 100%; padding: 10px 12px; border-radius: 8px; font-size: 15px; cursor: pointer; }
.sn-trouve button:hover, .sn-trouve button:focus-visible { background: var(--sn-gris); }
.sn-trouve .sn-trouve-chat { font-weight: 600; }
html:not(.js) .sn-cherche { display: none; }

/* Get in touch : un seul gros bouton */
.sn-contact { padding-bottom: 72px; }
.sn-chat-carte { max-width: 920px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 32px 36px; border: 1px solid var(--sn-filet); border-radius: 18px; }
.sn-chat-texte { display: grid; gap: 6px; max-width: 520px; }
.sn-pastille { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-gris); }
.sn-pastille i { width: 8px; height: 8px; border-radius: 50%; background: #2E9E5B; box-shadow: 0 0 0 4px rgba(46,158,91,.15); }
.sn-chat-t { font-family: var(--sn-titre); font-weight: 700; font-size: 24px; line-height: 1.2; letter-spacing: -.015em; margin: 4px 0 0; }
.sn-chat-d { font-size: 15px; line-height: 1.55; color: var(--fg-gris); margin: 0; }
.sn-ou { text-align: center; font-size: 14px; color: var(--fg-gris); margin: 20px 0 0; }
.sn-ou a { text-underline-offset: 3px; }

.sn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .2s, color .2s, transform .2s; }
.sn-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; }
.sn-btn--plein { background: var(--fg-encre); color: #fff !important; }
.sn-btn--plein:hover { background: #000; transform: translateY(-1px); }
.sn-btn--grand { height: 60px; padding: 0 34px; font-size: 17px; }
.sn-btn--contour { border: 1.5px solid var(--fg-encre); color: var(--fg-encre); min-width: 220px; }
.sn-btn--contour:hover { background: var(--fg-encre); color: #fff !important; }

/* Sujets : tuiles à pictogramme */
.sn-sujets { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.sn-sujet { display: grid; justify-items: center; gap: 6px; padding: 28px 12px 24px; background: #fff; border: 1px solid var(--sn-filet); border-radius: 14px; text-align: center; text-decoration: none; transition: border-color .2s, transform .2s; }
.sn-sujet:hover { border-color: var(--fg-encre); transform: translateY(-2px); }
.sn-sujet svg { width: 28px; height: 28px; fill: none; stroke: var(--fg-encre); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.sn-sujet b { font-size: 15px; font-weight: 600; }
.sn-sujet span { font-size: 13px; color: var(--fg-gris); line-height: 1.4; }

/* Produits en onglets */
.sn-onglets { display: flex; justify-content: center; gap: 36px; border-bottom: 1px solid var(--sn-filet); margin: 0 0 40px; }
.sn-onglet { padding: 0 0 14px; font-size: 16px; color: var(--fg-gris); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.sn-onglet[aria-selected="true"] { color: var(--fg-encre); border-color: var(--fg-encre); font-weight: 600; }
.sn-produits { display: flex; justify-content: center; flex-wrap: wrap; gap: 20px; }
.sn-produits[data-sn-cache] { display: none; }
html:not(.js) .sn-produits[data-sn-cache] { display: flex; margin-top: 32px; }
.sn-produit { display: grid; justify-items: center; gap: 12px; width: 160px; text-decoration: none; }
.sn-produit-img { display: block; width: 100%; aspect-ratio: 1; background: var(--sn-gris); border-radius: 12px; overflow: hidden; padding: 14px 30px 0; box-sizing: border-box; }
.sn-produit-img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 8px 8px 0 0; box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); transition: transform .3s; }
.sn-produit:hover img { transform: translateY(-4px); }
.sn-produit b { font-size: 15px; font-weight: 600; }

/* Ressources en photo */
.sn-ressources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.sn-ressource-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--sn-gris); margin-bottom: 16px; }
.sn-ressource-img img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .4s; }
.sn-ressource:hover .sn-ressource-img img { transform: scale(1.04); }
.sn-ressource h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.sn-ressource p { font-size: 14px; line-height: 1.55; color: var(--fg-gris); margin: 0 0 12px; }
.sn-lien { font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.sn-lien span { display: inline-block; transition: transform .2s; }
.sn-lien:hover span { transform: translateX(3px); }

.sn-questions { padding-top: 24px; }
.sn-faq-liste { max-width: 760px; margin: 0 auto; }

/* Fin : le grand « Get support » de Sonos */
.sn-fin-haut { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.sn-fin-haut p { font-size: 16px; color: var(--fg-texte, #333); margin: 14px 0 0; max-width: 520px; }
.sn-h1--fin { font-size: clamp(36px, 4.4vw, 56px); }
.sn-sansjs { max-width: 760px; margin: 48px 0 0; }
html.js .sn-sansjs { display: none; }

/* La conversation */
.sn-chat { width: min(100% - 24px, 440px); height: min(100% - 48px, 680px); max-height: none; padding: 0; border: 0; border-radius: 20px; margin: auto 24px 24px auto; display: none; flex-direction: column; background: #fff; box-shadow: 0 40px 80px -30px rgba(0,0,0,.45); overflow: hidden; }
.sn-chat[open] { display: flex; animation: sn-monte .35s cubic-bezier(.2,.8,.2,1); }
.sn-chat::backdrop { background: rgba(17,17,17,.28); }
@keyframes sn-monte { from { opacity: 0; transform: translateY(24px) scale(.98); } }
.sn-chat-tete { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--sn-filet); }
.sn-chat-tete div { display: grid; flex: 1; }
.sn-chat-tete b { font-size: 15px; }
.sn-chat-tete small { font-size: 12px; color: var(--fg-gris); }
.sn-chat-logo { width: 34px; height: 34px; border-radius: 50%; background: var(--fg-encre); display: grid; grid-template-columns: 6px 6px; gap: 3px; place-content: center; }
.sn-chat-logo { display: grid; place-items: center; grid-template-columns: none; gap: 0; }
.sn-chat-logo svg { width: 12px; height: auto; fill: #fff; }   /* le symbole entier de brand/v2, comme une photo de profil */
.sn-chat-x { all: unset; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; cursor: pointer; color: var(--fg-gris); }
.sn-chat-x:hover { background: var(--sn-gris); color: var(--fg-encre); }
.sn-chat-fil { flex: 1; overflow-y: auto; padding: 20px 18px; display: flex; flex-direction: column; gap: 8px; }
.sn-b { max-width: 84%; padding: 10px 14px; border-radius: 16px; font-size: 15px; line-height: 1.45; animation: sn-bulle .25s ease-out; }
@keyframes sn-bulle { from { opacity: 0; transform: translateY(6px); } }
.sn-b--studio { align-self: flex-start; background: var(--sn-gris); border-bottom-left-radius: 4px; }
.sn-b--vous { align-self: flex-end; background: var(--fg-encre); color: #fff; border-bottom-right-radius: 4px; }
.sn-b--passe { background: transparent; color: var(--fg-gris); border: 1px dashed var(--sn-filet); }
.sn-b--tape { display: flex; gap: 4px; padding: 14px 16px; }
.sn-b--tape i { width: 6px; height: 6px; border-radius: 50%; background: #9A9A95; animation: sn-tape 1s infinite; }
.sn-b--tape i:nth-child(2) { animation-delay: .15s; } .sn-b--tape i:nth-child(3) { animation-delay: .3s; }
@keyframes sn-tape { 50% { opacity: .3; transform: translateY(-2px); } }
.sn-b--recap { align-self: stretch; max-width: none; background: #fff; border: 1px solid var(--sn-filet); }
.sn-b--recap dl { margin: 0; display: grid; gap: 6px; }
.sn-b--recap div { display: grid; grid-template-columns: 90px 1fr; gap: 8px; font-size: 14px; }
.sn-b--recap dt { color: var(--fg-gris); }
.sn-b--recap dd { margin: 0; overflow-wrap: anywhere; }
.sn-chat-saisie { padding: 14px 18px 18px; border-top: 1px solid var(--sn-filet); }
.sn-chat-saisie:empty { display: none; }
.sn-puces { display: flex; flex-wrap: wrap; gap: 8px; }
.sn-puce { all: unset; box-sizing: border-box; padding: 9px 14px; border-radius: 999px; border: 1.5px solid var(--fg-encre); font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; transition: background .15s, color .15s; }
.sn-puce:hover, .sn-puce:focus-visible { background: var(--fg-encre); color: #fff; }
.sn-puce--lien { border-color: var(--sn-filet); color: var(--fg-gris); }
.sn-ecrire { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.sn-ecrire input, .sn-ecrire textarea { flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; border: 1px solid rgba(17,17,17,.2); border-radius: 12px; resize: none; }
.sn-ecrire input:focus, .sn-ecrire textarea:focus { outline: none; border-color: var(--fg-encre); }
.sn-ecrire--faux input { border-color: #B42318; }
.sn-envoyer { all: unset; width: 44px; height: 44px; border-radius: 50%; background: var(--fg-encre); display: grid; place-items: center; cursor: pointer; flex: none; }
.sn-envoyer svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sn-passer { all: unset; flex-basis: 100%; font-size: 13px; color: var(--fg-gris); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sn-fini { margin: 0; font-size: 14px; color: var(--fg-gris); text-align: center; }

/* ── Retours de Théo (26/10, 18 h) ── */
/* Plus d'air entre la navigation et le bandeau, et un bandeau plus grand */
.sn { padding-top: 120px; }
.sn-bandeau { min-height: 460px; }
.sn-bandeau-corps { padding: 96px 0; }
/* À la place de la pastille verte : les quatre blocs du symbole qui « écrivent »,
   l'un après l'autre, comme les trois points d'une messagerie */
.sn-pastille { gap: 10px; }
.sn-pastille i { display: none; }
.sn-ecrit { width: 13px; height: auto; flex: none; }
.sn-ecrit path { fill: var(--fg-encre); opacity: .18; animation: sn-ecrit 2.4s infinite; }
.sn-ecrit path:nth-child(2) { animation-delay: .3s; } .sn-ecrit path:nth-child(3) { animation-delay: .6s; } .sn-ecrit path:nth-child(4) { animation-delay: .9s; }
@keyframes sn-ecrit { 0%, 100% { opacity: .18; } 20%, 55% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sn-ecrit path { animation: none; opacity: 1; } }
/* « Get support » en noir (Théo : « je préfère en noir ») */
.sn-fin { background: #111; color: #fff; }
.sn-fin .sn-h1 { color: #fff; }
.sn-fin-haut p { color: rgba(255,255,255,.7); }
.sn-btn--blanc { background: #fff; color: #111 !important; min-width: 220px; }
.sn-btn--blanc:hover { background: #E8E8E6; transform: translateY(-1px); }
.sn-fin .sn-sansjs { color: var(--fg-encre); background: #fff; border-radius: 16px; padding: 24px; }

@media (max-width: 999px) {
  .sn-sujets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sn-ressources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 809px) {
  .sn { padding-top: 60px; }
  .sn-sec { padding-top: 64px; padding-bottom: 64px; }
  .sn-bandeau { min-height: 300px; }
  .sn-mosaique { grid-template-columns: repeat(3, 1fr); }
  .sn-mosaique img:nth-child(n+4) { display: none; }
  .sn-h2 { margin-bottom: 28px; }
  .sn-chat-carte { flex-direction: column; align-items: stretch; padding: 24px 20px; gap: 20px; }
  .sn-btn--grand { width: 100%; }
  .sn-sujets { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .sn-onglets { justify-content: flex-start; gap: 24px; overflow-x: auto; }
  .sn-produits { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -16px; padding: 0 16px 8px; }
  .sn-produit { flex: 0 0 140px; scroll-snap-align: start; }
  .sn-ressources { grid-template-columns: 1fr; gap: 36px; }
  .sn-ressource-img { aspect-ratio: 16 / 9; }
  .sn-fin-haut { flex-direction: column; align-items: flex-start; }
  .sn { padding-top: 76px; }
  .sn-bandeau { min-height: 340px; }
  .sn-bandeau-corps { padding: 64px 0; }
  .sn-btn--fin { width: 100%; }
  .sn-chat { width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .sn *, .sn-chat { animation: none !important; transition: none !important; }
}

/* Les deux portes de la discussion et l'assistant (26/10, soir) */
.sn-chat-retour { all: unset; width: 34px; height: 34px; margin: 0 -4px 0 -8px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; }
.sn-chat-retour[hidden] { display: none; }
.sn-chat-retour:hover { background: var(--sn-gris); }
.sn-chat-retour svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sn-portes { display: grid; gap: 10px; margin-top: auto; }
.sn-porte { all: unset; box-sizing: border-box; position: relative; display: grid; gap: 4px; padding: 18px 48px 18px 18px; border: 1px solid var(--sn-filet); border-radius: 16px; cursor: pointer; transition: border-color .15s, background .15s; animation: sn-bulle .25s ease-out; }
.sn-porte:hover, .sn-porte:focus-visible { border-color: var(--fg-encre); }
.sn-porte b { font-family: var(--sn-titre); font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.sn-porte span { font-size: 14px; line-height: 1.45; color: var(--fg-gris); }
.sn-porte .sn-porte-q { justify-self: start; font-size: 12px; font-weight: 600; color: var(--fg-encre); padding: 3px 9px; border-radius: 999px; background: var(--sn-gris); }
.sn-porte i { position: absolute; right: 18px; top: 50%; translate: 0 -50%; font-style: normal; font-size: 18px; transition: translate .2s; }
.sn-porte:hover i { translate: 4px -50%; }
.sn-porte:first-child { background: var(--fg-encre); border-color: var(--fg-encre); color: #fff; }
.sn-porte:first-child span { color: rgba(255,255,255,.72); }
.sn-porte:first-child .sn-porte-q { background: rgba(255,255,255,.14); color: #fff; }
.sn-reprise { margin: 4px 0 0; font-size: 13px; color: var(--fg-gris); text-align: center; }
.sn-b ul { margin: 6px 0; padding-left: 18px; }
.sn-b li + li { margin-top: 3px; }
.sn-b a { color: inherit; text-underline-offset: 3px; }
.sn-cmd { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; }
.sn-cmd button { all: unset; font-size: 13px; color: var(--fg-gris); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.sn-cmd button:hover, .sn-cmd button:focus-visible { color: var(--fg-encre); }

/* Les visages (27/10) : le robot pour l'assistant, le symbole pour le studio, en code */
.sn-chat-logo .sn-robot, .sn-chat[data-qui="assistant"] .sn-chat-logo .sn-symbole { display: none; }
.sn-chat[data-qui="assistant"] .sn-chat-logo .sn-robot { display: block; }
.sn-chat[data-qui="assistant"] .sn-chat-logo { background: #fff; box-shadow: inset 0 0 0 1.5px var(--fg-encre); }
.sn-robot { width: 20px; height: 20px; fill: none; stroke: var(--fg-encre); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sn-robot circle { fill: var(--fg-encre); stroke: none; }
.sn-robot-oeil { transform-box: fill-box; transform-origin: center; animation: sn-cligne 4.5s infinite; }
@keyframes sn-cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.15); } }
.sn-porte { grid-template-columns: 48px 1fr; align-items: start; column-gap: 14px; }
.sn-porte-corps { display: grid; gap: 4px; }
.sn-porte .sn-porte-corps span:not(.sn-porte-q) { font-size: 14px; line-height: 1.45; }
.sn-av { width: 48px; height: 48px; border-radius: 50%; display: grid !important; place-items: center; }
.sn-av--assistant { background: #fff; }
.sn-av--assistant .sn-robot { width: 28px; height: 28px; }
.sn-av--studio { background: var(--fg-encre); }
.sn-av--studio svg { width: 16px; height: auto; fill: #fff; }
@media (prefers-reduced-motion: reduce) { .sn-robot-oeil { animation: none !important; } }
.sn-porte .sn-porte-corps { color: inherit; }
.sn-porte:first-child .sn-porte-corps > span:not(.sn-porte-q) { color: rgba(255,255,255,.72); }
.sn-chat-logo svg.sn-robot { width: 22px; height: 22px; }

/* L'orbe vocale (27/10), d'après la Siri Orb de SmoothUI retenue par Théo : deux dégradés coniques
   qui tournent en sens contraire sous un flou, dans un disque. --niveau (0 à 1) vient du micro ou
   de la voix de synthèse et la fait respirer. Couleurs par défaut ; ?orbe=noir pour la version
   noir et blanc de l'identité. */
@property --sn-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.sn-orbe {
  --o-taille: 28px; --c1: #7B5CFF; --c2: #2F7BFF; --c3: #22D3C5; --c4: #FF5FB4; --fond: #0E0E12; --vitesse: 7s;
  position: relative; display: block; width: var(--o-taille); aspect-ratio: 1; border-radius: 50%; overflow: hidden; isolation: isolate;
  background: var(--fond);
  scale: calc(1 + var(--niveau, 0) * .22); transition: scale .12s ease-out;
}
.sn-orbe::before, .sn-orbe::after {
  content: ''; position: absolute; inset: -30%;
  background: conic-gradient(from var(--sn-a), var(--c1), var(--c2), var(--c3), var(--c4), var(--c1));
  filter: blur(calc(var(--o-taille) * .14)); animation: sn-orbe var(--vitesse) linear infinite;
}
.sn-orbe::after { inset: -10% 20% 20% -10%; background: conic-gradient(from calc(var(--sn-a) * -1), var(--c3), transparent 30%, var(--c4), transparent 70%, var(--c3)); mix-blend-mode: screen; animation-duration: calc(var(--vitesse) * 1.6); opacity: .85; }
.sn-orbe i { position: absolute; inset: 22%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,.95), rgba(255,255,255,.25) 45%, transparent 70%); filter: blur(calc(var(--o-taille) * .06)); z-index: 1; opacity: calc(.55 + var(--niveau, 0) * .45); }
@keyframes sn-orbe { to { --sn-a: 360deg; } }
.sn-chat[data-orbe="noir"] .sn-orbe { --c1: #111; --c2: #6B6B6B; --c3: #F2F2F2; --c4: #2B2B2B; --fond: #000; }

.sn-micro { all: unset; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; }
.sn-micro .sn-orbe { --o-taille: 40px; }
.sn-micro:hover .sn-orbe { --vitesse: 3s; }

.sn-voix { --niveau: 0; display: grid; justify-items: center; gap: 6px; padding: 18px 18px 16px; border-top: 1px solid var(--sn-filet); animation: sn-bulle .3s ease-out; }
.sn-voix-orbe { all: unset; cursor: pointer; border-radius: 50%; padding: 10px; }
.sn-voix-orbe:focus-visible { outline: 2px solid var(--fg-encre); outline-offset: 2px; }
.sn-orbe--grande { --o-taille: 132px; box-shadow: 0 18px 50px -18px rgba(47,123,255,.55); }
.sn-chat[data-orbe="noir"] .sn-orbe--grande { box-shadow: 0 18px 50px -18px rgba(0,0,0,.5); }
.sn-voix[data-etat="ecoute"] .sn-orbe { --vitesse: 3.2s; }
.sn-voix[data-etat="pense"] .sn-orbe { --vitesse: 1.1s; animation: sn-pense 1.4s ease-in-out infinite; }
.sn-voix[data-etat="parle"] .sn-orbe { --vitesse: 2.4s; }
.sn-voix[data-etat="pause"] .sn-orbe { --vitesse: 12s; filter: saturate(.55); }
@keyframes sn-pense { 50% { scale: .92; } }
.sn-voix-etat { margin: 4px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
.sn-voix-texte { margin: 0; min-height: 1.45em; max-width: 34ch; text-align: center; font-size: 15px; line-height: 1.45; color: var(--fg-gris); }
.sn-voix-fin { all: unset; margin-top: 4px; font-size: 13px; color: var(--fg-gris); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .sn-orbe::before, .sn-orbe::after, .sn-voix .sn-orbe { animation: none !important; } }

/* ------------------------------------------------------------------------------------------
   L'île (27/10, deuxième passe d'après les retours de Théo), d'après la Dynamic Island.
   repos : l'orbe seule, ronde, dans un coin ; une étiquette « Ask us anything » au survol.
   ouvert : l'île grandit depuis l'orbe avec un ressort, claire comme la page, la bascule
   Assistant / Studio en tête et un volet par interlocuteur (basculer ne rejoue rien).
   voix : elle se resserre autour de la grande orbe. [data-pense] : un halo tourne sur son contour.
   L'emplacement tient en deux variables (--ile-x, --ile-y) : il est en discussion avec Théo. */
.sn-ile {
  --ressort: cubic-bezier(.32, 1.25, .45, 1); --doux: cubic-bezier(.2, .8, .2, 1);
  --ile-x: 24px; --ile-y: 24px; --ile-fond: #FFFFFF; --ile-texte: #111; --ile-gris: #6E6E73; --ile-filet: rgba(17,17,17,.08); --ile-voile: #F4F4F2;
  --c1: #2A4BFF; --c2: #7C6CFF; --c3: #F4F1FF; --c4: #8FB0FF;   /* l'orbe : bleus, indigo, blanc nacré */
  position: fixed; right: var(--ile-x); bottom: var(--ile-y); z-index: 60;
  width: 56px; height: 56px; border-radius: 28px; color: var(--ile-texte);
  transition: width .62s var(--ressort), height .62s var(--ressort), border-radius .62s var(--ressort), box-shadow .4s;
}
.sn-ile[data-etat="ouvert"] { width: min(420px, 100vw - 32px); height: min(660px, 100dvh - 48px); border-radius: 28px; box-shadow: 0 1px 0 rgba(17,17,17,.04), 0 30px 80px -24px rgba(17,17,17,.28), 0 0 0 1px var(--ile-filet); }
.sn-ile[data-etat="voix"] { width: min(360px, 100vw - 32px); height: min(380px, 100dvh - 48px); border-radius: 44px; box-shadow: 0 30px 80px -24px rgba(17,17,17,.28), 0 0 0 1px var(--ile-filet); }
.sn-ile[data-orbe="noir"] { --c1: #3A3A3A; --c2: #8A8A8A; --c3: #FFFFFF; --c4: #5A5A5A; }
.sn-ile .sn-orbe { --c1: inherit; --c2: inherit; --c3: inherit; --c4: inherit; --fond: #0B0B12; }

/* Le fond vit dans ::after, au-dessus du halo (::before) : l'île crée son propre contexte
   d'empilement, un z-index négatif y passerait sinon devant son fond. */
.sn-ile::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--ile-fond); opacity: 0; transition: opacity .25s; }
.sn-ile:not([data-etat="repos"])::after { opacity: 1; transition-duration: .1s; }
.sn-ile::before { content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: conic-gradient(from var(--sn-a), var(--c1), var(--c2), var(--c3), var(--c4), var(--c1)); filter: blur(12px); opacity: 0; transition: opacity .4s; animation: sn-orbe 2.4s linear infinite; }
.sn-ile[data-pense]::before { opacity: .75; }

/* Le lanceur : l'orbe seule, en couleurs, qui respire. */
.sn-ile-lanceur { all: unset; box-sizing: border-box; position: absolute; right: 0; bottom: 0; width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; transition: opacity .2s .25s, scale .35s var(--ressort); }
.sn-ile-lanceur .sn-orbe { --o-taille: 56px; box-shadow: 0 14px 30px -10px rgba(42,75,255,.55); animation: sn-souffle 4s ease-in-out infinite; }
.sn-ile-lanceur:hover { scale: 1.06; }
.sn-ile-lanceur:hover .sn-orbe { --vitesse: 2.6s; }
.sn-ile-lanceur:active { scale: .94; }
.sn-ile-lanceur:focus-visible { outline: 2px solid var(--fg-encre); outline-offset: 4px; }
@keyframes sn-souffle { 50% { scale: 1.04; } }
.sn-ile-bulle { position: absolute; right: calc(100% + 12px); top: 50%; translate: 6px -50%; white-space: nowrap; padding: 8px 14px; border-radius: 999px; background: #111; color: #fff; font-size: 13px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, translate .3s var(--doux); }
.sn-ile-lanceur:is(:hover, :focus-visible) .sn-ile-bulle { opacity: 1; translate: 0 -50%; }
.sn-ile:not([data-etat="repos"]) .sn-ile-lanceur { opacity: 0; scale: .6; pointer-events: none; transition: opacity .12s, scale .3s var(--doux); }

/* Le corps : il entre une fois l'île assez grande, puis chaque rangée glisse à son tour. */
.sn-ile-corps { position: absolute; inset: 0; display: flex; flex-direction: column; overflow: hidden; border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity .12s; }
.sn-ile:not([data-etat="repos"]) .sn-ile-corps { opacity: 1; pointer-events: auto; transition: opacity .3s .16s; }
.sn-ile-corps > * { transition: translate .5s var(--doux), opacity .4s; }
.sn-ile[data-etat="repos"] .sn-ile-corps > * { translate: 0 10px; opacity: 0; }
.sn-ile:not([data-etat="repos"]) .sn-ile-tete { transition-delay: .18s; }
.sn-ile:not([data-etat="repos"]) .sn-ile-sous { transition-delay: .24s; }
.sn-ile:not([data-etat="repos"]) .sn-ile-volets { transition-delay: .3s; }
.sn-ile-tete { display: flex; align-items: center; gap: 4px; padding: 12px 10px 4px 12px; }
.sn-bascule { position: relative; display: flex; flex: 1; padding: 3px; border-radius: 999px; background: var(--ile-voile); }
.sn-bascule button { all: unset; position: relative; z-index: 1; flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; height: 36px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--ile-gris); cursor: pointer; transition: color .3s; }
.sn-bascule button[aria-selected="true"] { color: var(--ile-texte); }
.sn-bascule button:focus-visible { outline: 2px solid var(--fg-encre); outline-offset: 2px; }
.sn-ile-v { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.sn-bascule .sn-ile-v--robot .sn-robot { width: 20px; height: 20px; stroke: currentColor; }
.sn-bascule .sn-ile-v--robot .sn-robot circle { fill: currentColor; }
.sn-bascule .sn-ile-v--studio { background: currentColor; }
.sn-bascule .sn-ile-v--studio svg { width: 8px; height: auto; fill: #fff; }
.sn-bascule button[aria-selected="true"] .sn-ile-v--robot { color: #2A4BFF; }
/* Le visage d'Otto : l'orbe en miniature, qui ne tourne vite que lorsqu'il est choisi. */
.sn-bascule .sn-ile-v--orbe .sn-orbe { --o-taille: 22px; --vitesse: 14s; filter: saturate(.35); transition: filter .3s; }
.sn-bascule button[aria-selected="true"] .sn-ile-v--orbe .sn-orbe { --vitesse: 5s; filter: none; }
.sn-ile[data-pense] .sn-bascule .sn-ile-v--orbe .sn-orbe { --vitesse: 1.6s; }
.sn-bascule-curseur { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: #fff; box-shadow: 0 1px 2px rgba(17,17,17,.08), 0 4px 12px -4px rgba(17,17,17,.14); transition: translate .5s var(--ressort); }
.sn-ile[data-qui="studio"] .sn-bascule-curseur { translate: 100% 0; }
.sn-ile-nouveau { all: unset; height: 36px; padding: 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ile-gris); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.sn-ile-nouveau:hover, .sn-ile-nouveau:focus-visible { background: var(--ile-voile); color: var(--ile-texte); }
.sn-ile-ico { all: unset; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; flex: none; transition: background .2s; }
.sn-ile-ico:hover, .sn-ile-ico:focus-visible { background: var(--ile-voile); }
.sn-ile-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--ile-texte); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sn-ile-sous { margin: 8px 0 0; padding: 0 20px; font-size: 12px; color: var(--ile-gris); }

/* Les volets : les deux fils vivent côte à côte, la bascule glisse de l'un à l'autre. */
.sn-ile-volets { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.sn-ile-volet { position: absolute; inset: 0; display: flex; flex-direction: column; transition: translate .55s var(--doux), opacity .35s, filter .35s; }
.sn-ile[data-qui="assistant"] .sn-ile-volet[data-volet="studio"] { translate: 14% 0; opacity: 0; filter: blur(4px); pointer-events: none; }
.sn-ile[data-qui="studio"] .sn-ile-volet[data-volet="assistant"] { translate: -14% 0; opacity: 0; filter: blur(4px); pointer-events: none; }

/* La conversation, sur fond blanc */
.sn-ile .sn-chat-fil { padding: 16px 16px 12px; gap: 10px; scrollbar-width: thin; }
.sn-ile .sn-b { animation: sn-bulle-ile .4s var(--doux); }
@keyframes sn-bulle-ile { from { opacity: 0; translate: 0 6px; scale: .98; } }
.sn-ile .sn-b--studio { background: var(--ile-voile); color: var(--ile-texte); }
.sn-ile .sn-b--vous { background: #111; color: #fff; }
.sn-ile .sn-b--recap { background: #fff; border: 1px solid var(--ile-filet); }
.sn-mot { display: inline-block; white-space: pre; animation: sn-mot .5s var(--doux) both; animation-delay: calc(var(--i) * 32ms); }
@keyframes sn-mot { from { opacity: 0; filter: blur(6px); translate: 0 .25em; } }
.sn-ile .sn-chat-saisie { border-top: 0; padding: 4px 12px 12px; }
.sn-ile .sn-puces { animation: sn-bulle-ile .4s var(--doux); }

/* Le champ : une capsule sur une ligne, le texte, l'orbe et l'envoi alignés au centre. */
.sn-ile .sn-ecrire { flex-wrap: nowrap; align-items: center; gap: 4px; padding: 5px 5px 5px 16px; border-radius: 26px; background: var(--ile-voile); border: 1px solid transparent; transition: border-color .2s, background .2s; }
.sn-ile .sn-ecrire:focus-within { background: #fff; border-color: rgba(17,17,17,.18); }
.sn-ile .sn-ecrire input, .sn-ile .sn-ecrire textarea { border: 0; border-radius: 0; padding: 10px 0; background: transparent; line-height: 22px; height: 42px; max-height: 132px; box-sizing: border-box; overflow-y: auto; scrollbar-width: none; color: var(--ile-texte); }
.sn-ile .sn-ecrire textarea::placeholder { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sn-ile .sn-ecrire input:focus, .sn-ile .sn-ecrire textarea:focus { outline: none; }
.sn-ile .sn-ecrire--faux { border-color: #B42318; }
.sn-ile .sn-micro, .sn-ile .sn-envoyer { width: 40px; height: 40px; }
.sn-ile .sn-micro .sn-orbe { --o-taille: 32px; }
/* L'orbe du champ : un halo qui tourne et une onde qui part toutes les quatre secondes ; elle
   cède la place à l'envoi dès qu'on écrit (le champ porte alors [data-plein]). */
.sn-ile .sn-micro, .sn-ile .sn-envoyer { position: relative; transition: width .45s var(--ressort), opacity .25s, scale .45s var(--ressort), margin .45s var(--ressort); }
.sn-ile .sn-micro::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: conic-gradient(from var(--sn-a), var(--c1), var(--c2), var(--c3), var(--c4), var(--c1)); filter: blur(7px); opacity: .55; animation: sn-orbe 3s linear infinite; }
.sn-ile .sn-micro::after { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1.5px solid var(--c2); opacity: 0; animation: sn-onde 4s var(--doux) infinite 1s; }
@keyframes sn-onde { 0% { opacity: .7; scale: 1; } 40%, 100% { opacity: 0; scale: 1.7; } }
.sn-ile .sn-micro .sn-orbe { position: relative; transition: scale .3s var(--ressort); }
.sn-ile .sn-micro:hover .sn-orbe { scale: 1.12; }
.sn-ile .sn-ecrire[data-voix]:focus-within .sn-micro::before { opacity: .85; }
.sn-ile .sn-ecrire[data-voix]:not([data-plein]) .sn-envoyer, .sn-ile .sn-ecrire[data-voix][data-plein] .sn-micro { width: 0; margin-left: -4px; opacity: 0; scale: .3; pointer-events: none; }
.sn-ile .sn-envoyer { background: #111; }
.sn-ile .sn-passer { font-size: 13px; padding: 0 8px; color: var(--ile-gris); }

/* La voix : l'île se resserre autour de l'orbe */
.sn-ile[data-etat="voix"] :is(.sn-ile-tete, .sn-ile-sous, .sn-chat-fil, .sn-chat-saisie) { display: none; }
.sn-ile .sn-voix { position: absolute; inset: 0; border: 0; align-content: center; gap: 10px; padding: 28px 24px; animation: sn-bulle-ile .5s var(--doux); }
.sn-ile .sn-orbe--grande { --o-taille: 120px; box-shadow: 0 24px 60px -18px rgba(42,75,255,.5); }
.sn-ile .sn-voix-texte { color: var(--ile-gris); }

@media (max-width: 600px) {
  .sn-ile { --ile-x: 16px; --ile-y: 16px; }
  .sn-ile[data-etat="ouvert"] { width: calc(100vw - 16px); height: calc(100dvh - 16px); right: 8px; bottom: 8px; border-radius: 28px; }
  .sn-ile-bulle { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sn-ile, .sn-ile-corps, .sn-ile-corps > *, .sn-ile-lanceur, .sn-ile-volet, .sn-bascule-curseur { transition: none !important; }
  .sn-ile::before, .sn-ile-lanceur .sn-orbe, .sn-mot, .sn-ile .sn-b, .sn-ile .sn-micro::before, .sn-ile .sn-micro::after { animation: none !important; }
}
.sn-recap-t { margin: 0; font-size: 14px; line-height: 1.5; }

/* La dictée (27/10) : la transcription défile dans son cadre au lieu de déborder, « Terminé » envoie. */
.sn-ile .sn-voix { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; }
.sn-ile .sn-orbe--grande { --o-taille: 96px; }
.sn-ile .sn-voix-texte { width: 100%; max-height: 6.2em; overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain; flex: none; }
.sn-voix-ok { all: unset; box-sizing: border-box; height: 44px; padding: 0 22px; border-radius: 999px; background: #111; color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; transition: scale .3s var(--ressort); }
.sn-voix-ok:active { scale: .96; }
.sn-voix-ok:focus-visible { outline: 2px solid #111; outline-offset: 3px; }
.sn-voix:not([data-etat="ecoute"]) .sn-voix-ok { display: none; }
@media (max-width: 600px) {
  .sn-ile { --ile-y: calc(16px + env(safe-area-inset-bottom)); }
  .sn-ile-lanceur, .sn-ile-lanceur .sn-orbe { width: 48px; height: 48px; --o-taille: 48px; }
  .sn-ile[data-etat="repos"] { width: 48px; height: 48px; transition: width .62s var(--ressort), height .62s var(--ressort), border-radius .62s var(--ressort), opacity .3s, translate .4s var(--doux); }
  .sn-ile[data-etat="repos"][data-discret] { opacity: 0; translate: 0 16px; pointer-events: none; }
}

/* La voix plein écran (27/10, Théo : « comme si c'était une application ») : l'île grandit jusqu'aux
   bords le temps de la question, puis revient à sa taille pour la réponse. */
.sn-ile { transition: width .62s var(--ressort), height .62s var(--ressort), border-radius .62s var(--ressort), right .5s var(--doux), bottom .5s var(--doux), box-shadow .4s, opacity .3s, translate .4s var(--doux); }
.sn-ile[data-etat="voix"] { --ile-x: 0px; --ile-y: 0px; width: 100vw; height: 100dvh; border-radius: 0; box-shadow: none; z-index: 80; }
.sn-ile[data-etat="voix"]::after { background: radial-gradient(120% 70% at 50% 38%, #F3F2FF 0%, #fff 60%); }
.sn-ile .sn-orbe--grande { --o-taille: min(200px, 46vw); }
.sn-ile .sn-voix { padding: 32px 24px calc(32px + env(safe-area-inset-bottom)); gap: 14px; }
.sn-voix-qui { margin: 18px 0 0; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ile-gris); }
.sn-ile .sn-voix-etat { font-size: 15px; }
.sn-ile .sn-voix-texte { max-width: 30ch; max-height: 9.5em; font-size: clamp(18px, 4.6vw, 22px); line-height: 1.4; color: var(--ile-texte); }
.sn-voix-ok { height: 52px; padding: 0 30px; font-size: 16px; margin-top: 8px; }
/* Le lanceur sur téléphone : une pilule « Une question ? » qui monte quand il n'y a plus de bouton
   « Start a conversation » à l'écran, et qui laisse l'orbe seule une fois qu'on l'a vue. */
@media (max-width: 600px) {
  .sn-ile-bulle { display: block; position: absolute; right: calc(100% + 8px); top: 50%; translate: 0 -50%; opacity: 1; padding: 9px 14px; font-size: 14px; box-shadow: 0 10px 24px -12px rgba(0,0,0,.5); animation: sn-bulle-entre .6s var(--ressort) both .25s; }
  .sn-ile[data-discret] .sn-ile-bulle { animation: none; opacity: 0; }
  @keyframes sn-bulle-entre { from { opacity: 0; translate: 12px -50%; scale: .9; } }
}

/* Troisième passe (28/10, audit d'après le test de Théo sur iPhone). */
/* Le fil : repère des bulles (pour s'arrêter au début d'une longue réponse), défilement qui ne
   déborde pas sur la page. Sur téléphone, la page ne défile plus sous l'île ouverte, et l'île suit
   le clavier au lieu de passer dessous. */
.sn-ile .sn-chat-fil { position: relative; overscroll-behavior: contain; }
@media (max-width: 600px) {
  html[data-ile-ouverte], html[data-ile-ouverte] body { overflow: hidden; overscroll-behavior: none; }
  .sn-ile[data-clavier][data-etat="ouvert"] { top: calc(var(--vv-haut, 0px) + 8px); bottom: auto; height: calc(var(--vv-h, 100dvh) - 16px); transition: none; }
}
/* Le champ pendant qu'Otto répond : il reste là, l'envoi attend. */
.sn-ile .sn-ecrire[data-attente] .sn-envoyer { opacity: .35; pointer-events: none; }

/* La voix : la consigne apparaît puis s'efface ; l'orbe ondule tant qu'Otto écoute, et vibre à chaque
   mot entendu ; après « Terminé », il ouvre les yeux le temps de réfléchir. */
.sn-ile .sn-voix-etat { transition: opacity .6s var(--doux), translate .6s var(--doux); }
.sn-voix[data-indice="vu"][data-etat="ecoute"] .sn-voix-etat { opacity: 0; translate: 0 -4px; }
.sn-voix-orbe { position: relative; }
.sn-voix-orbe::before, .sn-voix-orbe::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 2px solid var(--c2); opacity: 0; pointer-events: none; }
.sn-voix[data-etat="ecoute"] .sn-voix-orbe::before { animation: sn-ecoute 2.4s var(--doux) infinite; }
.sn-voix[data-etat="ecoute"] .sn-voix-orbe::after { animation: sn-ecoute 2.4s var(--doux) infinite 1.2s; }
@keyframes sn-ecoute { 0% { opacity: .55; scale: 1; } 100% { opacity: 0; scale: 1.45; } }
.sn-voix[data-etat="ecoute"] .sn-orbe--grande { animation: sn-souffle 2.4s ease-in-out infinite; }
.sn-voix .sn-orbe--grande { transition: transform .35s var(--ressort); }
.sn-voix[data-entend] .sn-orbe--grande { transform: scale(1.08); transition-duration: .15s; }   /* transform, pas scale : l'animation tient déjà scale */
.sn-voix[data-etat="pense"] .sn-orbe--grande { animation: sn-pense 1.6s ease-in-out infinite; --vitesse: 1.6s; }
.sn-voix[data-etat="pense"] .sn-voix-texte { opacity: .55; transition: opacity .4s; }
.sn-yeux { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 15%; opacity: 0; translate: 0 6%; transition: opacity .35s .15s, translate .5s var(--ressort) .15s; }
.sn-yeux i { position: static; inset: auto; filter: none; opacity: 1; z-index: auto; width: 9%; height: 19%; border-radius: 999px; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.8); animation: sn-cligne-orbe 3.6s infinite; }
.sn-voix[data-etat="pense"] .sn-yeux { opacity: 1; translate: 0 0; animation: sn-regarde 3.2s var(--doux) infinite .6s; }
@keyframes sn-cligne-orbe { 0%, 44%, 52%, 100% { scale: 1 1; } 48% { scale: 1 .12; } }
@keyframes sn-regarde { 0%, 20%, 100% { translate: 0 0; } 35%, 55% { translate: 9% -3%; } 70%, 85% { translate: -9% -3%; } }
.sn-voix[data-etat="pense"] .sn-voix-ok { display: block; }
.sn-voix[data-etat="pense"] :is(.sn-voix-ok, .sn-voix-fin) { visibility: hidden; }   /* gardés en place : rien ne bouge quand ils s'effacent */
@media (prefers-reduced-motion: reduce) { .sn-voix-orbe::before, .sn-voix-orbe::after, .sn-yeux, .sn-yeux i { animation: none !important; } }
/* Le haut du fil s'estompe sous la légende au lieu d'y être coupé net. */
.sn-ile .sn-chat-fil { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px); mask-image: linear-gradient(to bottom, transparent 0, #000 14px); }

/* Otto sur tout le site (29/10, Théo) : le gabarit V2 pose l'île dans une coquille .sn--seule, hors de
   la page, sur toutes celles qui ne l'ont pas déjà (tpl/v2/layout.php). Les couleurs de la page (.fg)
   ne l'atteignent pas : elle porte les siennes. Une scène où Otto paraît en grand porte [data-otto-scene] ;
   tant qu'elle est à l'écran, l'orbe se retire (support.js), puis elle se pose en bas et suit la lecture. */
.sn.sn--seule { padding: 0; --fg-encre: #111111; --fg-texte: #333333; --fg-gris: #767676; }
.sn-ile[data-etat="repos"] { transition: width .62s var(--ressort), height .62s var(--ressort), border-radius .62s var(--ressort), box-shadow .4s, opacity .3s, translate .4s var(--doux); }
.sn-ile[data-etat="repos"][data-otto-cache] { opacity: 0; translate: 0 16px; pointer-events: none; }
.sn-ile[data-otto-cache] .sn-ile-bulle { animation: none; opacity: 0; }
[data-otto-parle] { cursor: pointer; }
/* La bulle ne reste plus ouverte (Théo, 30/10) : support.js pose [data-bulle] le temps qu'elle se montre. */
.sn-ile[data-etat="repos"][data-bulle]:not([data-otto-cache], [data-discret]) .sn-ile-bulle { opacity: 1; translate: 0 -50%; }
@media (max-width: 600px) { .sn-ile:not([data-bulle]) .sn-ile-bulle { opacity: 0; translate: 8px -50%; animation: none; transition: opacity .25s, translate .3s var(--doux); } }

/* Otto a toujours ses yeux (Théo, 29/10 au soir : « pour qu'il soit plus reconnaissable ») : les deux
   ovales blancs du personnage 3D, qui clignent, sur toutes ses orbes ; plus gros sur les petites. */
.sn-orbe .sn-yeux { opacity: 1; translate: 0 4%; gap: 17%; }
.sn-orbe .sn-yeux i { width: 11%; height: 22%; box-shadow: 0 0 6px rgba(255,255,255,.7); }
.sn-ile-v--orbe .sn-orbe .sn-yeux i, .sn-micro .sn-orbe .sn-yeux i { width: 14%; height: 28%; box-shadow: none; }