/* ═══════════════════════════════════════════════════════════════════════════════
   TUTORIELS INTERACTIFS
   ═══════════════════════════════════════════════════════════════════════════════
   Habillage de driver.js aux couleurs de Bubul, et le bouton flottant qui rejoue
   le tutoriel de la page courante.

   `--tour-accent` est posé par `_organisms/tour/tour-live.html.twig` depuis la
   couleur de l'outil : la bulle d'un tutoriel Serenia est verte, celle de Slidia
   ambre, sans une ligne de CSS de plus.

   Un seul fichier, importé une fois dans app.css : retirer la fonctionnalité, c'est
   supprimer ce fichier et son import.
   ═════════════════════════════════════════════════════════════════════════════ */

@import 'driver.js/dist/driver.css';

/* ── La bulle ──────────────────────────────────────────────────────────────────
   `!important` sur la plupart des règles : driver.js écrit ses propres valeurs
   dans une feuille embarquée que l'ordre d'import ne suffit pas à dépasser. */
.driver-popover.tour-bulle {
    background: #fff !important;
    border-radius: 16px !important;
    border: 1px solid #e9edf3 !important;
    box-shadow: 0 18px 48px rgba(11, 18, 32, .18) !important;
    padding: 18px 18px 14px !important;
    max-width: 340px !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

.driver-popover.tour-bulle .driver-popover-title {
    /* La place de la croix est RÉSERVÉE ici : le titre est un bloc pleine largeur, et sans
       cette réserve son texte passe dessous. */
    padding-right: 26px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1b2440 !important;
    line-height: 1.35 !important;
    margin-bottom: 6px !important;
}

.driver-popover.tour-bulle .driver-popover-description {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: #4b5563 !important;
    margin-bottom: 14px !important;
}

/* La flèche prend la couleur du fond de la bulle, pas celle du thème par défaut. */
.driver-popover.tour-bulle .driver-popover-arrow-side-top    { border-top-color: #fff !important; }
.driver-popover.tour-bulle .driver-popover-arrow-side-bottom { border-bottom-color: #fff !important; }
.driver-popover.tour-bulle .driver-popover-arrow-side-left   { border-left-color: #fff !important; }
.driver-popover.tour-bulle .driver-popover-arrow-side-right  { border-right-color: #fff !important; }

/* Le corps d'une étape porte un HTML restreint — `<strong>`, `<em>`, `<br>`. Le gras
   sert à nommer un bouton de l'interface : il doit se distinguer nettement du texte
   courant sans crier, d'où l'encre pleine plutôt qu'une couleur. */
.driver-popover.tour-bulle .driver-popover-description strong {
    font-weight: 700 !important;
    color: #1b2440 !important;
}
.driver-popover.tour-bulle .driver-popover-description em {
    font-style: normal !important;
    font-weight: 600 !important;
    color: var(--tour-accent, #0c81e4) !important;
}

/* Un `<br><br>` sépare deux idées : sans cette règle il n'ouvre qu'une ligne vide de
   la hauteur du texte, trop serrée pour marquer une rupture. */
.driver-popover.tour-bulle .driver-popover-description br + br {
    content: '';
    display: block;
    height: 0.45em;
}

/* ── Pied : l'étape courante à gauche, les commandes à droite ─────────────── */
.driver-popover.tour-bulle .driver-popover-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-top: 0 !important;
}

.driver-popover.tour-bulle .driver-popover-progress-text {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    color: #9aa3b2 !important;
    font-variant-numeric: tabular-nums;
}

.driver-popover.tour-bulle .driver-popover-navigation-btns {
    display: flex !important;
    gap: 8px !important;
}

.driver-popover.tour-bulle .driver-popover-navigation-btns button {
    all: unset;
    cursor: pointer;
    border-radius: 10px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    text-shadow: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* Les trois règles qui suivent RÉPÈTENT le chemin `… .driver-popover-navigation-btns button`
   de la règle `all: unset` ci-dessus. Sans cela elles lui sont MOINS spécifiques (0,3,0 contre
   0,3,1) et c'est `all: unset` qui gagne : « Suivant » se retrouvait sans fond, en simple
   texte, sur tous les outils. */

/* « Précédent » — discret : ce n'est pas là qu'on veut envoyer le regard. */
.driver-popover.tour-bulle .driver-popover-navigation-btns button.driver-popover-prev-btn {
    background: #fff;
    border: 1px solid #e4e8ef;
    color: #4b5563;
}
.driver-popover.tour-bulle .driver-popover-navigation-btns button.driver-popover-prev-btn:hover {
    background: #f7f9ff;
    border-color: rgba(var(--tour-accent-rgb, 12, 129, 228), .35);
}

/* `all: unset` ci-dessus a emporté le style que driver.js donne à un bouton hors
   d'usage : sans ces deux lignes, « Précédent » a l'air cliquable à la première
   étape alors qu'il ne fait rien. */
.driver-popover.tour-bulle .driver-popover-navigation-btns button.driver-popover-btn-disabled {
    opacity: .4;
    cursor: not-allowed;
}
.driver-popover.tour-bulle .driver-popover-navigation-btns button.driver-popover-btn-disabled:hover {
    background: #fff;
    border-color: #e4e8ef;
}

/* « Suivant » / « Terminer » — la couleur de l'outil, et le point d'arrivée de l'œil. */
.driver-popover.tour-bulle .driver-popover-navigation-btns button.driver-popover-next-btn {
    background: var(--tour-accent, #0c81e4);
    color: #fff;
}
.driver-popover.tour-bulle .driver-popover-navigation-btns button.driver-popover-next-btn:hover {
    opacity: .9;
}

/* La croix de fermeture — c'est le « Passer », visible à chaque étape.
   La MÊME croix que partout dans Bubul : le tracé est substitué au rendu de la bulle
   (`CROIX_BUBUL` dans tour_controller.js), la bibliothèque posant sinon un `×`
   typographique.

   `z-index` : sans lui la croix ne répondait pas au clic. `all: unset` avait emporté
   l'empilement que driver.js lui donne, et le titre — un bloc pleine largeur, plus loin
   dans le DOM — se peignait par-dessus : `elementFromPoint` au centre de la croix
   renvoyait le titre. Le bouton était bien là, visible, et inerte. */
.driver-popover.tour-bulle .driver-popover-close-btn {
    all: unset;
    position: absolute !important;
    z-index: 2 !important;
    top: 10px !important;
    right: 12px !important;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    cursor: pointer;
    color: #6b7280 !important;
    transition: background-color .15s ease, color .15s ease;
}
/* Le survol se lit sur la COULEUR DU TRAIT, jamais sur un aplat : c'est la règle de
   l'atome de fermeture (`_atoms/close-button`), et elle vaut ici aussi. */
.driver-popover.tour-bulle .driver-popover-close-btn:hover {
    color: #111827 !important;
}

/* L'anneau de focus doit se voir : ce tutoriel se parcourt aussi au clavier.
   `!important` et la croix nommée à part : `all: unset` lui rend l'`outline: auto` du
   navigateur, qui se dessine en bleu système — une couleur qui n'appartient à aucun outil
   de Bubul, et qui jurait franchement sur l'ambre de Slidia. */
.driver-popover.tour-bulle button:focus-visible,
.driver-popover.tour-bulle .driver-popover-close-btn:focus-visible {
    outline: 2px solid var(--tour-accent, #0c81e4) !important;
    outline-offset: 2px !important;
}

/* La croix est ronde : son anneau doit l'être aussi. */
.driver-popover.tour-bulle .driver-popover-close-btn:focus-visible {
    border-radius: 999px !important;
}

/* ── L'ouverture découpée dans le voile ──────────────────────────────────── */
.driver-active .driver-overlay { z-index: 700 !important; }
.driver-popover               { z-index: 701 !important; }

/* ── Le bouton flottant « Revoir le tutoriel » ─────────────────────────────
   Sous les toasts (z-9999), qui occupent le même coin mais ne font que passer.
   `--tour-bouton-decalage` laisse une page pousser le bouton vers le haut quand
   elle a déjà du mobilier ici — sans toucher à ce fichier ni au partiel. */
.tour-bouton {
    position: fixed;
    right: 1.5rem;
    bottom: calc(1.5rem + var(--tour-bouton-decalage, 0px));
    z-index: 40;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--tour-accent-rgb, 12, 129, 228), .22);
    border-radius: 999px;
    background: #fff;
    color: var(--tour-accent, #0c81e4);
    box-shadow: 0 6px 20px rgba(11, 18, 32, .10);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.tour-bouton svg { width: 20px; height: 20px; }

.tour-bouton:hover {
    background: rgba(var(--tour-accent-rgb, 12, 129, 228), .07);
    box-shadow: 0 10px 26px rgba(11, 18, 32, .14);
    transform: translateY(-1px);
}
.tour-bouton:focus-visible {
    outline: 2px solid var(--tour-accent, #0c81e4);
    outline-offset: 2px;
}

/* Pendant le tutoriel, le bouton s'efface : il est dans le coin où les bulles
   arrivent, et il n'a rien à faire au-dessus du voile. */
.driver-active .tour-bouton { display: none; }

/* Sur mobile, la place est comptée — le bouton se réduit et se rapproche du bord. */
@media (max-width: 640px) {
    .tour-bouton {
        right: 1rem;
        bottom: calc(1rem + var(--tour-bouton-decalage, 0px));
        width: 36px;
        height: 36px;
    }
    .tour-bouton svg { width: 18px; height: 18px; }

    .driver-popover.tour-bulle {
        max-width: calc(100vw - 2rem) !important;
        padding: 15px 15px 12px !important;
    }
}