/* @category: styles */
/* Police de la charte graphique FlexiPolls */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

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

/* ==========================================
   Template: FlexiPolls (Flexisite Survey)
   Reprend la charte graphique réelle du site
   FlexiPolls : rouge corail, texte quasi noir,
   fond gris très clair, cartes blanches à
   coins bien arrondis avec ombre douce,
   boutons modérément arrondis, typographie
   Plus Jakarta Sans.
   ========================================== */

/* On écrase les variables de couleurs du thème par défaut */
.poll-template-flexipolls {
    --poll-primary-color: #EF5451;   /* rouge corail de la marque */
    --poll-primary-hover: #D8433F;
    --poll-secondary-color: #F5A199; /* corail plus doux, pour les barres de résultats */
    --poll-success-color: #2E7D32;
    --poll-success-bg: #E8F5E9;
    --poll-error-color: #C62828;
    --poll-error-bg: #FDECEA;

    --poll-text-color: #16181D;      /* quasi noir, comme les titres du site */
    --poll-muted-color: #6B7280;
    --poll-bg-light: #F7F7F8;        /* gris très clair, fond de page du site */
    --poll-bg-hover: #EFEFF1;
    --poll-bg-bar: #ECECEE;

    --poll-border-color: #E5E5E8;
    --poll-border-dark: #D1D1D6;

    --poll-bg-main: #FFFFFF;         /* cartes blanches du site */
    --poll-box-shadow: 0 4px 20px rgba(16, 18, 24, 0.07); /* ombre douce, comme les cartes du site */

    font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* Carte du sondage : coins bien arrondis, ombre douce, cohérent avec
   les cartes de la page d'accueil (étapes, tarifs, FAQ...) */
.poll-survey.poll-template-flexipolls .poll-container {
    background: var(--poll-bg-main) !important;
    color: var(--poll-text-color) !important;
    border: 1px solid var(--poll-border-color);
    border-radius: 18px;
    box-shadow: var(--poll-box-shadow);
}

/* Titres bien gras, Plus Jakarta Sans. 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. */
.poll-survey.poll-template-flexipolls h2,
.poll-survey.poll-template-flexipolls h3,
.poll-survey.poll-template-flexipolls .poll-question-title,
.poll-survey.poll-template-flexipolls .poll-stats-title,
.poll-survey.poll-template-flexipolls .poll-stats-subtitle {
    color: var(--poll-text-color);
    font-weight: 800;
    letter-spacing: -0.01em;
}

/* Bouton : rouge corail, modérément arrondi (pas une pilule), comme
   "Créer un sondage" / "Voter maintenant" sur le site */
.poll-survey.poll-template-flexipolls .poll-submit-btn {
    border-radius: 10px;
    font-weight: 700;
}

/* Options de vote : coins arrondis, mise en avant corail douce à la
   sélection (même esprit que les blocs "Quel est votre plus grand
   défi ?" de la page d'accueil) */
.poll-survey.poll-template-flexipolls .poll-option-label {
    border: 1px solid var(--poll-border-color);
    border-radius: 10px;
}
.poll-survey.poll-template-flexipolls .poll-option-label:hover {
    background: var(--poll-bg-hover);
}
.poll-survey.poll-template-flexipolls .poll-option-label:has(input:checked) {
    background: var(--poll-bg-hover);
    border-color: var(--poll-primary-color);
}

/* Image de couverture, items triables et barres : coins arrondis,
   cohérence avec le reste */
.poll-survey.poll-template-flexipolls .poll-cover {
    border-radius: 14px;
}
.poll-survey.poll-template-flexipolls .sortable-item {
    border-radius: 10px;
}
.poll-survey.poll-template-flexipolls .poll-bar-container,
.poll-survey.poll-template-flexipolls .poll-bar-container-split,
.poll-survey.poll-template-flexipolls .poll-stats-daily-bar-container {
    border-radius: 999px;
}

/* Boutons de tri mobile et bannière de succès : arrondis, cohérents */
.poll-survey.poll-template-flexipolls .sort-btns button {
    border-radius: 8px;
}
.poll-survey.poll-template-flexipolls .poll-success-banner {
    border-radius: 14px;
}

/* Curseur (input type="range") en rouge corail */
.poll-survey.poll-template-flexipolls .poll-range {
    accent-color: var(--poll-primary-color);
}

/* Liens de navigation : rouge corail au survol, comme "Voir les
   exemples →" sur la page d'accueil */
.poll-survey.poll-template-flexipolls .poll-nav-links a:hover {
    color: var(--poll-primary-color);
}