/* Pastille d'aide flottante vers le tutoriel (coin haut-droit, sous le header).
   Collapsée = pastille ronde avec "?", se déplie au survol pour révéler le lien. */

/* Hauteur de butée : la pastille est en `position: fixed`, donc ce `top` est
   aussi le point le plus haut qu'elle atteigne quand on remonte la page. Il
   valait 78 px, soit 26 px sous le bandeau en-tête : elle recouvrait alors la
   barre d'actions et de filtres de l'écran. Elle s'arrête désormais à la
   hauteur de la LIGNE D'EN-TÊTES du tableau, à droite du libellé « Actions »
   (demande Joe, 2026-08-13) - hauteur calculée sur la mise en page de
   référence : bandeau 52 + padding 20 de `.page-content` + barre d'actions +
   barre d'export. */
/* Ce composant est recopie A LA MAIN dans les gabarits AUTONOMES (`mon_avis`,
   `mon_abonnement`, `login`, `register`, `mon_compte`, `plans`, `succes`), qui
   portent leur propre `<!DOCTYPE>` et ne chargent donc PAS `style.css` - ni
   son reset `*, *::before, *::after { box-sizing: border-box }` (ligne 14).

   Sans ce reglage, `max-width: 34px` bornait la boite de CONTENU : la pastille
   sortait a 52 px (34 + 16 de padding + 2 de bordure) et laissait passer le
   `gap` et les deux premieres lettres de « Voir le tuto ». Elle avait l'air de
   ne pas se replier (signale par Joe le 2026-08-16 sur `/mon-avis/`). Mesure :
   `getComputedStyle(a).boxSizing` rend `content-box` sur ces pages-la et
   `border-box` sur celles qui heritent de `core/base.html`.

   Un composant destine a etre DEPOSE dans une page nue ne peut pas dependre
   d'un reset qu'il n'embarque pas. La regle est sans effet la ou le reset
   s'applique deja : elle ne coute rien aux autres ecrans. */
.aide-tuto, .aide-tuto *,
.retour-exp, .retour-exp * {
    box-sizing: border-box;
}

.aide-tuto {
    position: fixed;
    top: 160px;
    right: 26px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 8px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
    max-width: 34px;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.2s ease, color 0.15s, border-color 0.15s;
}
.aide-tuto:hover,
.aide-tuto:focus-visible {
    max-width: 180px;
    color: #4f46e5;
    border-color: #6366f1;
    outline: none;
}
.aide-tuto-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-circle, 50%);
    background: #eef2ff;
    color: #4f46e5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}
.aide-tuto-label {
    font-size: 13px;
}

/* Pastille "Votre avis", juste sous la pastille d'aide. Meme gabarit, teinte
   ambre pour la distinguer du "?" sans crier plus fort que lui. L'ecart de
   42 px (34 de hauteur + 8 de respiration) suit la pastille d'aide : les deux
   valeurs se deplacent ensemble. */
.retour-exp {
    position: fixed;
    top: 202px;
    right: 26px;
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 34px;
    padding: 0 8px;
    border-radius: 18px;
    background: #fff;
    border: 1px solid #cbd5e1;
    color: #475569;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
    max-width: 34px;
    overflow: hidden;
    white-space: nowrap;
    transition: max-width 0.2s ease, color 0.15s, border-color 0.15s;
}
.retour-exp:hover,
.retour-exp:focus-visible {
    max-width: 180px;
    color: #b45309;
    border-color: #f59e0b;
    outline: none;
}
.retour-exp-icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-circle, 50%);
    background: var(--color-warning-bg, #fef3c7);
    color: #b45309;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
/* SVG de `core/icons/` : viewBox 24, ramene a la taille de la pastille. */
.retour-exp-icon svg {
    display: block;
    width: 11px;
    height: 11px;
}
.retour-exp-label {
    font-size: 13px;
}

/* Variante PORTAIL : la pastille y vit seule (pas de « ? » au-dessus) et le
   coin haut-droit est deja occupe par les badges du header (Nous contacter,
   abonnement, Mon compte, Deconnexion). On la pose donc en bas a droite, ou
   elle ne recouvre rien, et on l'ouvre par defaut : sur une page d'accueil
   parcourue en trois secondes, une pastille ronde muette ne serait jamais
   cliquee. */
.retour-exp-portail {
    top: auto;
    bottom: 24px;
    right: 24px;
    max-width: 200px;
    border-color: #fcd34d;
    background: linear-gradient(180deg, #fffbeb 0%, #fef3c7 100%);
    color: #92400e;
}
.retour-exp-portail:hover,
.retour-exp-portail:focus-visible {
    max-width: 200px;
    color: #92400e;
    border-color: #f59e0b;
    box-shadow: 0 6px 18px rgba(245, 158, 11, 0.35);
}
.retour-exp-portail .retour-exp-icon { background: #fde68a; }

/* La barre d'impersonation est DANS LE FLUX (`utilities.css`, ~34 px) : elle
   pousse toute la page vers le bas alors que les deux pastilles sont en
   `position: fixed` a un `top` constant. Sans ce decalage de 34 px, elles
   remontaient de la hauteur de la barre pendant une impersonation, donc
   au-dessus de la ligne d'en-tetes qu'elles doivent longer. Le `z-index: 50`
   du `.top-header` couvre le cas residuel (en-tete sur deux lignes) : la
   pastille passe DERRIERE le bandeau, jamais dessus. */
/* Borne a >640 px : en dessous, les pastilles passent en bas a droite
   (`top: auto`) et ce selecteur, plus specifique, ecraserait ce reglage. */
@media (min-width: 641px) {
    body:has(.impersonation-bar) .aide-tuto  { top: 194px; }
    body:has(.impersonation-bar) .retour-exp { top: 236px; }
}

/* Confort tactile (audit responsive 2026-08-02) : la pastille repliee mesurait
   34x34, sur 18 des 22 ecrans sondes. Au doigt il n'y a pas de survol, donc
   elle reste repliee : c'est bien une cible de 34 px qu'il faut viser pour
   ouvrir le tutoriel. On la passe a 44 px (seuil WCAG 2.5.5) sans la deplier,
   le lien fonctionne aussi bien replie. */
@media (max-width: 900px) {
    .aide-tuto,
    .retour-exp {
        height: 44px;
        max-width: 44px;
        border-radius: 22px;
        padding: 0 13px;
    }
    /* Le portail garde sa pastille ouverte : elle y vit seule et sert de CTA. */
    .retour-exp-portail { max-width: 200px; padding: 0 14px; }
}

@media (max-width: 640px) {
    .aide-tuto { top: auto; bottom: 18px; right: 18px; }
    /* Empilees en bas a droite : l'aide dessous, l'avis au-dessus. L'ecart
       suit la hauteur de pastille (44 px + 8 px de respiration). */
    .retour-exp { top: auto; bottom: 70px; right: 18px; }
    /* Sur le portail elle est seule : elle reprend la place du bas. */
    .retour-exp-portail { bottom: 18px; right: 18px; }
}