/**
 * GlowGo — Design system
 * Emplacement cible : /assets/css/app.css
 *
 * Palette dérivée du logo (dégradé sarcelle → bleu du repère géo).
 * Display : Fraunces (chaleur, personnalité) — réservé aux titres.
 * UI/body : Manrope (géométrique, lisible) — tout le reste.
 */

:root {
    /* Couleurs de marque */
    --glowgo-teal: #14c8a8;
    --glowgo-blue: #1652f0;
    --glowgo-blue-deep: #0b2e99;
    --glowgo-ink: #10141f;
    --glowgo-mist: #f5f7fa;
    --glowgo-line: #e4e8f0;
    --glowgo-erreur: #e64545;
    --glowgo-blanc: #ffffff;

    --glowgo-degrade: linear-gradient(135deg, var(--glowgo-teal) 0%, var(--glowgo-blue) 100%);

    /* Typographie — une seule famille, en plus gras pour les titres :
       plus robuste que le duo serif/sans si les polices web tardent à
       charger sur une connexion lente, et plus "app moderne". */
    --police-display: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
    --police-ui: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Rayons & ombres */
    --rayon-carte: 24px;
    --rayon-champ: 14px;
    --rayon-pilule: 999px;
    --ombre-carte: 0 20px 40px -20px rgba(11, 46, 153, 0.25);

    /* Rythme */
    --espace-1: 4px;
    --espace-2: 8px;
    --espace-3: 16px;
    --espace-4: 24px;
    --espace-5: 32px;
    --espace-6: 48px;

    /* Mouvement */
    --duree-rapide: 160ms;
    --duree-normale: 280ms;
    --easing: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
    :root { --duree-rapide: 0ms; --duree-normale: 0ms; }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--glowgo-mist);
    color: var(--glowgo-ink);
    font-family: var(--police-ui);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
    font-family: var(--police-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin: 0;
}

p { margin: 0; line-height: 1.5; }

button { font-family: inherit; }

/* ---------------------------------------------------------------
   MISE EN PAGE — page d'authentification
--------------------------------------------------------------- */
.page-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--glowgo-blanc);
}

/* Pleine page : plus de carte flottante sur fond gris, l'écran entier
   appartient au formulaire. Sur grand écran, on limite la largeur du
   contenu pour rester lisible, mais le fond reste blanc de bord à bord. */
.carte-auth {
    flex: 1;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    background: var(--glowgo-blanc);
    border-radius: 0;
    box-shadow: none;
    padding: calc(var(--espace-6) + env(safe-area-inset-top)) var(--espace-4)
              calc(var(--espace-5) + env(safe-area-inset-bottom));
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: entree-carte var(--duree-normale) var(--easing) both;
}

@keyframes entree-carte {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Halo dégradé ambiant — signature visuelle de la marque, agrandie
   maintenant qu'elle habille tout le haut de l'écran. */
.halo-marque {
    position: absolute;
    top: -140px;
    right: -100px;
    width: 340px;
    height: 340px;
    border-radius: 50%;
    background: var(--glowgo-degrade);
    filter: blur(80px);
    opacity: 0.28;
    animation: derive-halo 9s ease-in-out infinite;
    pointer-events: none;
}

@keyframes derive-halo {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-14px, 12px) scale(1.08); }
}

.entete-auth { position: relative; text-align: center; margin-bottom: var(--espace-5); }
.entete-auth .logo { width: 72px; height: 72px; margin: 0 auto var(--espace-3); display: block; }
.entete-auth h1 { font-size: 27px; color: var(--glowgo-ink); }
.entete-auth p { font-size: 14px; color: #626b7a; margin-top: var(--espace-1); }

/* Le lien secondaire ("Déjà un compte ?") se cale en bas de l'écran */
.carte-auth .lien-secondaire { margin-top: auto; padding-top: var(--espace-4); }

/* ---------------------------------------------------------------
   TOGGLE SEGMENTÉ — Client / Prestataire (indicateur glissant)
--------------------------------------------------------------- */
.toggle-segmente {
    position: relative;
    display: flex;
    background: var(--glowgo-mist);
    border-radius: var(--rayon-pilule);
    padding: 4px;
    margin-bottom: var(--espace-4);
}

.toggle-segmente .curseur {
    position: absolute;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc(50% - 4px);
    background: var(--glowgo-degrade);
    border-radius: var(--rayon-pilule);
    transition: transform var(--duree-normale) var(--easing);
}

.toggle-segmente[data-actif="prestataire"] .curseur {
    transform: translateX(100%);
}

.toggle-segmente button {
    position: relative;
    flex: 1;
    z-index: 1;
    border: none;
    background: transparent;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 600;
    color: #626b7a;
    border-radius: var(--rayon-pilule);
    cursor: pointer;
    transition: color var(--duree-rapide) var(--easing);
}

.toggle-segmente button[aria-pressed="true"] { color: var(--glowgo-blanc); }

/* ---------------------------------------------------------------
   CHAMPS DE FORMULAIRE (labels flottants)
--------------------------------------------------------------- */
.champ {
    position: relative;
    margin-bottom: var(--espace-3);
}

.champ input,
.champ select {
    width: 100%;
    padding: 18px 14px 6px;
    height: 56px;
    border: 1.5px solid var(--glowgo-line);
    border-radius: var(--rayon-champ);
    font-size: 15px;
    font-family: var(--police-ui);
    color: var(--glowgo-ink);
    background: var(--glowgo-blanc);
    transition: border-color var(--duree-rapide) var(--easing);
}

.champ input:focus,
.champ select:focus {
    outline: none;
    border-color: var(--glowgo-blue);
}

.champ label {
    position: absolute;
    left: 15px;
    top: 18px;
    font-size: 15px;
    color: #8a92a3;
    pointer-events: none;
    transition: all var(--duree-rapide) var(--easing);
}

.champ input:focus + label,
.champ input:not(:placeholder-shown) + label {
    top: 8px;
    font-size: 11px;
    color: var(--glowgo-blue);
}

.champ .erreur-champ {
    display: block;
    font-size: 12px;
    color: var(--glowgo-erreur);
    margin-top: 6px;
    padding-left: 4px;
}

/* ---------------------------------------------------------------
   BOUTONS
--------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: var(--rayon-pilule);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: transform var(--duree-rapide) var(--easing), opacity var(--duree-rapide) var(--easing);
}

.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primaire { background: var(--glowgo-degrade); color: var(--glowgo-blanc); }
.btn-fantome { background: transparent; color: var(--glowgo-blue); }

.lien-secondaire {
    display: block;
    text-align: center;
    margin-top: var(--espace-4);
    font-size: 14px;
    color: #626b7a;
}

.lien-secondaire a,
.lien-souligne {
    color: var(--glowgo-blue);
    font-weight: 700;
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
}

/* ---------------------------------------------------------------
   TOASTS (remplace les alert() natives du navigateur)
--------------------------------------------------------------- */
#glowgo-toasts {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--espace-4) + env(safe-area-inset-bottom));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
    z-index: 999;
}

.toast {
    pointer-events: auto;
    max-width: 90vw;
    padding: 12px 20px;
    border-radius: var(--rayon-pilule);
    background: var(--glowgo-ink);
    color: var(--glowgo-blanc);
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.35);
    animation: toast-entree var(--duree-normale) var(--easing) both;
}

.toast[data-type="erreur"] { background: var(--glowgo-erreur); }
.toast[data-type="succes"] { background: #0f9d68; }
.toast.sortie { animation: toast-sortie var(--duree-rapide) var(--easing) both; }

@keyframes toast-entree { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes toast-sortie { to { opacity: 0; transform: translateY(12px); } }

/* ---------------------------------------------------------------
   MODALES IN-APP (remplace confirm()/prompt() du navigateur)
--------------------------------------------------------------- */
.modale-fond {
    position: fixed;
    inset: 0;
    background: rgba(16, 20, 31, 0.55);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    animation: modale-fond-entree var(--duree-normale) var(--easing) forwards;
}

@keyframes modale-fond-entree { to { opacity: 1; } }

.modale-boite {
    width: 100%;
    max-width: 420px;
    /* Plafond de hauteur + défilement interne : sans ça, un formulaire un
       peu long (ex. "ajouter une prestation") déborde purement et
       simplement de l'écran sur un mobile à écran court ou carré (ex.
       Unihertz Titan), rendant les derniers champs et le bouton de
       validation totalement inatteignables. Le premier max-height (vh)
       sert de repli pour les navigateurs qui ne connaissent pas encore
       dvh ; le second (dvh) le remplace partout où c'est supporté et
       gère correctement la barre d'adresse mobile qui apparaît/disparaît. */
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--glowgo-blanc);
    border-radius: 24px 24px 0 0;
    padding: var(--espace-4);
    padding-bottom: calc(var(--espace-4) + env(safe-area-inset-bottom));
    transform: translateY(100%);
    animation: modale-boite-entree var(--duree-normale) var(--easing) forwards;
}

@keyframes modale-boite-entree { to { transform: translateY(0); } }

@media (min-width: 480px) {
    .modale-fond { align-items: center; }
    .modale-boite { border-radius: 24px; transform: translateY(24px); opacity: 0; animation: modale-boite-entree-desktop var(--duree-normale) var(--easing) forwards; }
    @keyframes modale-boite-entree-desktop { to { transform: translateY(0); opacity: 1; } }
}

.modale-boite h2 { font-size: 18px; margin-bottom: var(--espace-2); }
.modale-boite p { font-size: 14px; color: #626b7a; margin-bottom: var(--espace-4); }

/* ---------------------------------------------------------------
   UTILITAIRES
--------------------------------------------------------------- */
.masque { display: none !important; }
.centre-texte { text-align: center; }

/* ---------------------------------------------------------------
   ÉCRAN D'AU REVOIR (déconnexion)
--------------------------------------------------------------- */
.ecran-aurevoir {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: var(--glowgo-degrade);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--espace-4);
    animation: aurevoir-entree var(--duree-normale) var(--easing) both;
}

@keyframes aurevoir-entree {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.contenu-aurevoir { animation: aurevoir-contenu 520ms var(--easing) both; }

@keyframes aurevoir-contenu {
    from { opacity: 0; transform: translateY(14px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

.logo-aurevoir {
    width: 84px;
    height: 84px;
    border-radius: 24px;
    margin: 0 auto var(--espace-4);
    display: block;
    background: rgba(255, 255, 255, 0.92);
    padding: 10px;
    animation: aurevoir-logo 2s ease-in-out infinite;
}

@keyframes aurevoir-logo {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

.contenu-aurevoir h2 {
    font-size: 24px;
    color: var(--glowgo-blanc);
    margin-bottom: 6px;
}

.contenu-aurevoir p {
    font-size: 14.5px;
    color: rgba(255, 255, 255, 0.9);
}

.points-chargement {
    display: flex;
    justify-content: center;
    gap: 7px;
    margin-top: var(--espace-4);
}

.points-chargement span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    animation: point-rebond 1.3s ease-in-out infinite;
}

.points-chargement span:nth-child(2) { animation-delay: 0.18s; }
.points-chargement span:nth-child(3) { animation-delay: 0.36s; }

@keyframes point-rebond {
    0%, 80%, 100% { transform: scale(0.7); opacity: 0.5; }
    40%           { transform: scale(1);   opacity: 1; }
}