/* Le tunnel d'invitation V2 (V8-81, maquettes P10-11 → P10-17).
   Rien que des jetons : changer les 5 couleurs d'un réseau recolore le tunnel aussi.
   Les options de réponse réutilisent `.quiz-option` de quiz.css — c'est le même geste, il n'a pas
   à se dessiner deux fois. */

/* Chaque écran du tunnel tient dans une colonne étroite : au-delà, l'œil se perd et l'invariant
   « zéro scroll avant le jeu » ne veut plus rien dire sur un grand écran. */
.tunnel-screen {
    width: 100%;
    max-width: 26rem;
    margin: 0 auto;
    padding-block: 1rem 2rem;
}

.tunnel-lead {
    margin-bottom: 1.1rem;
}

.tunnel-cta {
    margin-top: 1.2rem;
}

.tunnel-aside {
    margin-top: 1.6rem;
}

.tunnel-progress {
    height: 3px;
}

/* ── Écran 1 : l'accueil signé ─────────────────────────────────────────────── */

.tunnel-welcome {
    padding-top: 2rem;
}

.tunnel-face {
    display: block;
    width: 6rem;
    height: 6rem;
    margin: 0 auto .9rem;
    object-fit: cover;
    border-radius: 50%;
    border: 3px solid var(--brand-accent);
}

/* Sans photo : l'initiale dans la même pastille — jamais un cadre vide ni une silhouette grise. */
.tunnel-face-initial {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.25rem;
    font-weight: 700;
    color: var(--brand-accent);
    background: var(--brand-surface-soft);
}

/* Sur l'écran 1, le chip vocal (composant ci-dessous) se centre comme un mot du texte. */
.tunnel-voice {
    margin: 0 0 1rem;
}

/* ── Le chip vocal (components/vocal_chip.html.twig + assets/vocal_chip.js) — maquette P10-11 ──
   Sans JavaScript : le lecteur natif, borné à 16 rem (ses contrôles ont une largeur minimale,
   ~250 px chez Chrome, et le premier écran doit tenir à 320 px). Avec : la pastille
   « ▶ ▂▆▃█▄ 0:12 » le remplace (is-ready) et ses barres ondulent pendant la lecture (is-playing).
   Jetons de marque seulement : un réseau qui change ses couleurs recolore le chip. */
.vocal-player {
    display: inline-block;
    max-width: 100%;
    vertical-align: middle;
}

.vocal-player-native {
    display: block;
    width: 16rem;
    max-width: 100%;
}

.vocal-player.is-ready .vocal-player-native,
.vocal-player:not(.is-ready) .vocal-chip {
    display: none;
}

.vocal-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    max-width: 100%;
    padding: .35rem .8rem .35rem .4rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--brand-radius-pill);
    background: var(--brand-surface);
    color: var(--brand-text);
    font-size: .8rem;
    line-height: 1;
    transition: border-color .15s ease, background-color .15s ease;
}

.vocal-player.is-playing .vocal-chip {
    border-color: var(--brand-accent);
    background: var(--brand-surface-soft);
}

/* Le rond ▶ / ❚❚ */
.vc-play {
    display: grid;
    place-items: center;
    width: 1.85rem;
    height: 1.85rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--brand-accent);
    color: var(--brand-on-dark);
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
}

.vc-play::before {
    content: '▶';
    margin-left: .1em; /* le triangle paraît décentré sinon */
}

.vocal-player.is-playing .vc-play::before {
    content: '❚❚';
    margin-left: 0;
}

.vc-play:focus-visible,
.vc-wave:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 3px;
}

/* La vague = la barre de progression : 24 barres, hauteurs en motif de 7, colorées au fil de la
   lecture (is-played), qui se touchent ou se glissent pour avancer / reculer. Si la place manque
   vraiment, elle se rogne à droite plutôt que d'élargir la page. */
.vc-wave {
    display: inline-flex;
    flex: 0 1 auto;
    gap: 2px;
    align-items: center;
    min-width: 0;
    height: 26px;
    padding: 4px 0; /* zone de toucher plus haute que les barres */
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    touch-action: none;
    user-select: none;
}

.vc-wave i {
    flex: 0 0 3px;
    width: 3px;
    border-radius: 2px;
    background: var(--brand-line);
    transform-origin: center;
    transition: background-color .15s ease;
}

.vc-wave i.is-played {
    background: var(--brand-accent);
}

.vc-wave i:nth-child(7n+1) { height: 6px; }
.vc-wave i:nth-child(7n+2) { height: 12px; }
.vc-wave i:nth-child(7n+3) { height: 8px; }
.vc-wave i:nth-child(7n+4) { height: 16px; }
.vc-wave i:nth-child(7n+5) { height: 7px; }
.vc-wave i:nth-child(7n+6) { height: 11px; }
.vc-wave i:nth-child(7n+7) { height: 5px; }

.vocal-player.is-playing .vc-wave i {
    animation: vc-wave .8s ease-in-out infinite alternate;
}

.vocal-player.is-playing .vc-wave i:nth-child(7n+2) { animation-delay: .1s; }
.vocal-player.is-playing .vc-wave i:nth-child(7n+3) { animation-delay: .2s; }
.vocal-player.is-playing .vc-wave i:nth-child(7n+4) { animation-delay: .3s; }
.vocal-player.is-playing .vc-wave i:nth-child(7n+5) { animation-delay: .4s; }
.vocal-player.is-playing .vc-wave i:nth-child(7n+6) { animation-delay: .5s; }
.vocal-player.is-playing .vc-wave i:nth-child(7n+7) { animation-delay: .6s; }

@keyframes vc-wave {
    from { transform: scaleY(.4); }
    to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
    .vocal-player.is-playing .vc-wave i {
        animation: none;
    }
}

.vc-time {
    min-width: 2.4em;
    color: var(--brand-muted);
    font-variant-numeric: tabular-nums;
    text-align: left;
}

/* ── Écrans 2-5 : le miroir ────────────────────────────────────────────────── */

.tunnel-question {
    margin: .4rem 0 1rem;
}

/* La réponse précédente, rappelée en tête : elle se lit, elle ne se re-clique pas. */
.tunnel-echoed {
    opacity: .7;
    pointer-events: none;
}

/* L'écho conversationnel — la bulle qui transforme un formulaire en conversation. */
/* L'écho = une bulle de conversation (maquette P10-12 ②, `.echo-bubble`) : fond doux, coin bas
   gauche fermé comme un message reçu, italique, couleur secondaire. */
.tunnel-echo {
    margin: .7rem 0 1rem;
    padding: .6rem .8rem;
    font-style: italic;
    color: var(--brand-secondary);
    border-radius: var(--brand-radius-btn) var(--brand-radius-btn) var(--brand-radius-btn) 4px;
    background: var(--brand-surface-soft);
}

/* ── Écran 6 : le portrait ─────────────────────────────────────────────────── */

/* Le portrait au dessin de la maquette P10-13 (`.profile-card` + `.portrait-sec` de maquette.css) :
   une carte claire à fond doux et trait doré, centrée, puis les trois traits dans une carte blanche
   séparés par des pointillés — plus le pavé bleu marine d'avant (recette Axel du 16/09 : « ça jure
   avec le reste du site »). Jetons seulement. */
.tunnel-portrait {
    padding: 1rem .9rem;
    text-align: center;
    color: var(--brand-text);
    border: 1.5px solid color-mix(in srgb, var(--brand-accent) 50%, transparent);
    border-radius: var(--brand-radius-card);
    background: linear-gradient(180deg, var(--brand-surface-soft), var(--brand-surface));
}

.tunnel-eyebrow {
    display: block;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .25em;
    text-transform: uppercase;
    color: var(--brand-accent-deep);
}

.tunnel-portrait-name {
    margin: .2rem 0 .3rem;
    font-size: 1.6rem;
    line-height: 1.15;
    color: inherit;
}

.tunnel-portrait-lead {
    margin: 0;
    color: var(--brand-muted);
}

.tunnel-traits-card {
    margin-top: .6rem;
    padding: .2rem .9rem;
    background: var(--brand-surface);
    border: 1px solid var(--brand-line-soft);
    border-radius: var(--brand-radius-card);
    box-shadow: var(--brand-shadow-card);
}

.tunnel-traits {
    margin: 0;
}

.tunnel-traits dt {
    padding-top: .6rem;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--brand-accent-deep);
}

.tunnel-traits dd {
    margin: .15rem 0 0;
    padding-bottom: .6rem;
    border-bottom: 1px dashed var(--brand-line-soft);
}

.tunnel-traits dd:last-child {
    border-bottom: 0;
}

/* Le bloc « à copier » du partage : aucune maquette ne le dessine (P10-13 s'arrête au bouton) —
   il reprend les cartes de message de la maquette P10-26 (`.share-msg`) : fond doux, trait,
   libellé en petites capitales dorées, le bouton de copie sous le texte (retour Axel 16/09). */
.tunnel-share {
    margin-top: 1rem;
    text-align: left;
}

.tunnel-share-msg {
    margin-bottom: .5rem;
    padding: .6rem .7rem;
    font-size: .9rem;
    background: var(--brand-surface-soft);
    border: 1px solid var(--brand-line);
    border-radius: var(--brand-radius-btn);
}

.tunnel-share-msg b {
    display: block;
    margin-bottom: .2rem;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-accent-deep);
}

/* Le lien se lit d'un bloc : il défile plutôt que de se couper (comme un code dans le dossier marraine) */
.tunnel-share-link {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
}

/* ── Écran 7 : les deux portes ─────────────────────────────────────────────── */

/* Les deux portes ont le MÊME poids de lecture : seule la bordure et le badge distinguent la
   conseillée. Jamais de porte grisée, jamais de porte plus petite (C4-R13). */
/* Au dessin de la maquette P10-14 (`.door-card`) : carte blanche, trait ferme, la conseillée
   cernée d'accent sur fond doux, le badge posé À CHEVAL sur le bord haut, à droite (recette Axel
   du 16/09 : les cartes prenaient la couleur du fond). Même relief que les cartes des questions. */
.tunnel-door {
    display: block;
    position: relative;
    padding: .85rem .9rem;
    margin-bottom: .6rem;
    color: var(--brand-text);
    text-decoration: none;
    background: var(--brand-surface);
    border: 1.5px solid var(--brand-line);
    border-radius: var(--brand-radius-btn);
    box-shadow: var(--brand-shadow-card);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.tunnel-door:hover,
.tunnel-door:focus-visible {
    color: var(--brand-text);
    border-color: var(--brand-accent);
    box-shadow: var(--brand-shadow-float);
    transform: translateY(-1px);
}

.tunnel-door:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

.tunnel-door.is-advised {
    border-color: var(--brand-accent);
    background: var(--brand-surface-soft);
}

.tunnel-door-flag {
    position: absolute;
    top: -.6rem;
    right: .75rem;
    padding: .12rem .55rem;
    font-size: .6rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--brand-secondary);
    background: var(--brand-accent);
    border-radius: var(--brand-radius-pill);
}

@media (prefers-reduced-motion: reduce) {
    .tunnel-door,
    .tunnel-door:hover,
    .tunnel-door:focus-visible {
        transition: none;
        transform: none;
    }
}

.tunnel-door-title {
    display: flex;
    gap: .4rem;
    align-items: center;
    font-size: 1.05rem;
    color: var(--brand-secondary);
}

.tunnel-door-text {
    display: block;
    margin-top: .2rem;
    font-size: .875rem;
    color: var(--brand-muted);
}

/* ── Écrans 8-9 et la sortie ───────────────────────────────────────────────── */

/* Le mot « aucun créneau » / « un autre moment » : la carte cernée d'accent de la maquette P10-15 ②. */
.tunnel-note {
    padding: .85rem 1rem;
    margin-bottom: 1.1rem;
    text-align: center;
    border: 1.5px solid var(--brand-accent);
    border-radius: var(--brand-radius-card);
    background: var(--brand-surface);
    box-shadow: var(--brand-shadow-card);
}

.tunnel-note-icon {
    display: block;
    font-size: 1.5rem;
}

.tunnel-note span {
    display: block;
    margin-top: .25rem;
    font-size: .875rem;
    opacity: .8;
}

/* Les créneaux (V8-82, P10-15 ①) : un bouton pleine largeur par créneau, le choisi cerclé d'accent.
   Même poids de lecture pour tous — c'est le moment qui distingue, jamais la taille. */
.slot-list {
    margin-bottom: .75rem;
}

/* Au dessin de la maquette P10-15 ① (`.slot-btn`) : une ligne centrée en gras, carte blanche au
   trait ferme, le choisi cerné d'accent sur fond doux. */
.slot-btn {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .35rem .5rem;
    width: 100%;
    padding: .7rem .8rem;
    margin-bottom: .5rem;
    text-align: center;
    font-weight: 700;
    color: var(--brand-secondary);
    background: var(--brand-surface);
    border: 1.5px solid var(--brand-line);
    border-radius: var(--brand-radius-btn);
    box-shadow: var(--brand-shadow-card);
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}

.slot-btn:hover,
.slot-btn:focus-visible {
    border-color: var(--brand-accent);
    box-shadow: var(--brand-shadow-float);
    transform: translateY(-1px);
}

.slot-btn:focus-visible {
    outline: 2px solid var(--brand-accent);
    outline-offset: 2px;
}

.slot-btn.is-picked {
    border-color: var(--brand-accent);
    background: var(--brand-surface-soft);
}

.slot-btn-mode {
    flex: 0 0 auto;
    font-size: .85rem;
    font-weight: 500;
    color: var(--brand-muted);
}

.slot-btn-mode::before {
    content: '— ';
}

@media (prefers-reduced-motion: reduce) {
    .slot-btn,
    .slot-btn:hover,
    .slot-btn:focus-visible {
        transition: none;
        transform: none;
    }
}

.slot-card {
    margin-bottom: 1rem;
}

.slot-picked-line {
    font-size: 1.05rem;
}

.tunnel-hooray {
    font-size: 2.5rem;
    line-height: 1;
    margin-bottom: .4rem;
}

/* La suite en trois lignes : l'incertitude après un oui est la première cause d'annulation.
   Au dessin de la maquette P10-16 (`.next-3`) : une carte blanche, un rond numéroté sombre devant
   chaque ligne, pas de filet. */
.tunnel-next {
    counter-reset: tunnel-next;
    list-style: none;
    margin: 1rem 0;
    padding: .5rem .9rem;
    text-align: left;
    background: var(--brand-surface);
    border: 1px solid var(--brand-line-soft);
    border-radius: var(--brand-radius-card);
    box-shadow: var(--brand-shadow-card);
}

.tunnel-next li {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    padding: .45rem 0;
}

.tunnel-next li::before {
    counter-increment: tunnel-next;
    content: counter(tunnel-next);
    display: inline-flex;
    flex: 0 0 22px;
    align-items: center;
    justify-content: center;
    height: 22px;
    font-size: .66rem;
    font-weight: 800;
    font-style: normal;
    color: var(--brand-on-dark);
    background: var(--brand-secondary);
    border-radius: 50%;
}

/* La limite écrite : encadrée, jamais en petit — c'est elle qui crée la confiance.
   Au dessin de la maquette P10-17 (`.limit-box`) : pointillé sombre, fond blanc. */
.tunnel-limit {
    margin-top: 1rem;
    padding: .8rem .9rem;
    font-size: .875rem;
    line-height: 1.6;
    background: var(--brand-surface);
    border: 1.5px dashed var(--brand-secondary);
    border-radius: var(--brand-radius-btn);
}

/* ── Côté marraine : mes 15 minutes (V8-82, P10-25) ─────────────────────────── */

.slot-day + .slot-day {
    margin-top: .6rem;
}

/* Les pastilles des créneaux disent une heure (« 9 h 20 · Sonia ✓ ») : pas de capitales ni
   d'espacement de badge — c'est du texte qu'on lit, pas une étiquette. */
.slot-day .badge {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

.slot-window-row,
.slot-booking-row,
.slot-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .5rem 0;
    border-bottom: 1px solid var(--brand-line-soft);
}

.slot-window-row:last-of-type,
.slot-booking-row:last-of-type,
.slot-setting-row:last-of-type {
    border-bottom: 0;
}

.slot-window-row form,
.slot-booking-row form {
    margin: 0;
}

/* Le pliage « ajouter une fenêtre » : le résumé est un bouton, pas un triangle. */
.slot-add > summary {
    list-style: none;
    display: inline-block;
}

.slot-add > summary::-webkit-details-marker {
    display: none;
}

/* ── Côté marraine : le dépôt de l'accueil signé ───────────────────────────── */

/* Le chip vocal passe sous la photo quand la ligne est trop courte (320 px) : l'enfant flex
   demande 12 rem au moins avant de rester à côté. */
.intro-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
}

.intro-photo {
    flex: 0 0 auto;
    width: 4.5rem;
    height: 4.5rem;
    object-fit: cover;
    border-radius: 50%;
    border: 2px solid var(--brand-accent);
}

.intro-photo-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    border-style: dashed;
    background: var(--brand-surface-soft);
}

/* L'enfant flex prend la place qui reste : sans ça, un lecteur natif à 100 % d'un parent sans
   largeur se résout à zéro et disparaît (vu en recette pilotée, 390 et 320 px). Le chip vocal
   (composant, voir plus haut) y vit avec sa largeur propre. */
.intro-preview-body {
    flex: 1 1 12rem;
    min-width: 0;
}

/* Le recadrage de la photo (Cropper.js, sponsor_intro.js) : la scène prend la place qui reste, la
   photo y est en bloc et bornée en hauteur (une photo portrait ne doit pas faire défiler l'écran) ;
   le rond à côté reprend la pastille de l'aperçu. Les couleurs de la bibliothèque sont ramenées
   aux jetons — jamais son bleu par défaut. */
.intro-cropper-row {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.intro-cropper-stage {
    display: flex;
    justify-content: center;
    flex: 1 1 auto;
    min-width: 0;
}

.intro-cropper-image {
    display: block;
    max-width: 100%;
    max-height: 20rem;
}

.intro-cropper-preview {
    flex: 0 0 auto;
    overflow: hidden;
}

.intro-cropper .cropper-view-box {
    outline-color: var(--brand-accent);
}

.intro-cropper .cropper-line,
.intro-cropper .cropper-point {
    background-color: var(--brand-accent);
}

.intro-cropper .cropper-modal {
    background-color: var(--brand-secondary);
}