/* @category: styles */
/* Polices ludiques mais très lisibles : Fredoka (titres, arrondie et
   sympathique) + Quicksand (texte courant, arrondie et claire) */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Quicksand:wght@400;500;600;700&display=swap');

/* Importe la structure complète du thème par défaut */
@import url('default.css');

/* ==========================================
   Template: Colors (Flexisite Survey)
   Palette vive mais harmonisée (framboise /
   turquoise / jaune), formes bien arrondies,
   bouton "gummy" avec effet 3D bondissant.
   ========================================== */

/* On écrase les variables de couleurs du thème par défaut */
.poll-template-colors {
    --poll-primary-color: #D6336C;   /* framboise vive (bon contraste avec du texte blanc) */
    --poll-primary-hover: #B92A5B;
    --poll-secondary-color: #22C1C3; /* turquoise, pour les barres de résultats */
    --poll-success-color: #06D6A0;
    --poll-success-bg: #DFFCF3;
    --poll-error-color: #FF6B6B;
    --poll-error-bg: #FFE8E8;

    --poll-text-color: #2D2A55;      /* indigo foncé : plus sympa qu'un noir pur, très lisible */
    --poll-muted-color: #8B87A8;
    --poll-bg-light: #F5F1FF;        /* lavande très clair, pour les cartes/inputs internes */
    --poll-bg-hover: #EDE6FF;
    --poll-bg-bar: #F0EAFF;

    --poll-border-color: #E4DBFF;
    --poll-border-dark: #C9B8FF;

    --poll-bg-main: #FFFBF7;         /* blanc chaud, doux */
    --poll-box-shadow: 0 10px 28px rgba(214, 51, 108, 0.18);

    /* Polices propres au template (non gérées par des variables dans default.css) */
    --poll-font-display: 'Fredoka', sans-serif;
    --poll-font-body: 'Quicksand', sans-serif;

    font-family: var(--poll-font-body);
}

/* Carte du sondage : coins bien arrondis + liseré multicolore en haut */
.poll-survey.poll-template-colors .poll-container {
    background: var(--poll-bg-main) !important;
    color: var(--poll-text-color) !important;
    border: 2px solid var(--poll-border-color);
    border-radius: 24px;
    box-shadow: var(--poll-box-shadow);
    position: relative;
    overflow: hidden;
}

.poll-survey.poll-template-colors .poll-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 8px;
    background: linear-gradient(
        90deg,
        #D6336C 0%, #FFC857 33%, #22C1C3 66%, #7C6FFF 100%
    );
}

/* Le sondage s'intègre parfois seul sur une page hôte (titre en h2),
   parfois imbriqué sous un autre titre, ex. la galerie de templates
   (titre en h3) : on style les deux pour rester correct dans les deux
   contextes. */
.poll-survey.poll-template-colors h2,
.poll-survey.poll-template-colors h3 {
    text-align: center;
    margin: 20px 0;
}

/* Titres en Fredoka, plus ronds et enjoués */
.poll-survey.poll-template-colors h2,
.poll-survey.poll-template-colors h3,
.poll-survey.poll-template-colors .poll-question-title,
.poll-survey.poll-template-colors .poll-stats-title,
.poll-survey.poll-template-colors .poll-stats-subtitle {
    font-family: var(--poll-font-display);
    font-weight: 600;
}

/* Bouton "gummy" : pilule bien ronde, ombre pleine en dessous façon
   bonbon, qui s'aplatit au clic pour un effet bondissant */
.poll-survey.poll-template-colors .poll-submit-btn {
    border-radius: 999px;
    font-family: var(--poll-font-display);
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 6px 0 var(--poll-primary-hover);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.poll-survey.poll-template-colors .poll-submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 0 var(--poll-primary-hover);
}
.poll-survey.poll-template-colors .poll-submit-btn:active {
    transform: translateY(4px);
    box-shadow: 0 2px 0 var(--poll-primary-hover);
}

/* Options de vote : coins arrondis, petit "saut" au survol,
   mise en avant colorée de l'option sélectionnée */
.poll-survey.poll-template-colors .poll-option-label {
    border: 2px solid var(--poll-border-color);
    border-radius: 14px;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.poll-survey.poll-template-colors .poll-option-label:hover {
    background: var(--poll-bg-hover);
    transform: translateX(4px);
}
.poll-survey.poll-template-colors .poll-option-label:has(input:checked) {
    background: var(--poll-bg-hover);
    border-color: var(--poll-primary-color);
}

/* Image de couverture et items triables : coins arrondis, cohérence avec le reste */
.poll-survey.poll-template-colors .poll-cover {
    border-radius: 18px;
}
.poll-survey.poll-template-colors .sortable-item {
    border-radius: 14px;
    border-width: 2px;
}

/* Barres de résultats : bien arrondies */
.poll-survey.poll-template-colors .poll-bar-container,
.poll-survey.poll-template-colors .poll-bar-container-split,
.poll-survey.poll-template-colors .poll-stats-daily-bar-container {
    border-radius: 999px;
}

/* Liens de navigation : couleur turquoise au survol, petit clin d'œil ludique */
.poll-survey.poll-template-colors .poll-nav-links a:hover {
    color: var(--poll-secondary-color);
}

/* Nouveaux éléments (default.css) : boutons de tri mobile et bannière
   de succès, arrondis pour rester cohérents avec le reste du template */
.poll-survey.poll-template-colors .sort-btns button {
    border-radius: 10px;
}
.poll-survey.poll-template-colors .poll-success-banner {
    border-radius: 20px;
}
.poll-survey.poll-template-colors .poll-success-banner h3 {
    font-family: var(--poll-font-display);
}