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

/* ==========================================
   Template: France (Flexisite Survey)
   Couleurs officielles du drapeau français
   (bleu #0055A4 / blanc / rouge #EF4135),
   dans un esprit sobre (style site officiel),
   avec une cocarde tricolore discrète en
   bas à droite de l'image de couverture.
   ========================================== */

/* On écrase les variables de couleurs du thème par défaut */
.poll-template-france {
    --poll-primary-color: #0055A4;   /* bleu France officiel */
    --poll-primary-hover: #003D7A;
    --poll-secondary-color: #EF4135; /* rouge France officiel, utilisé pour les barres/accents */
    --poll-success-color: #2E7D32;
    --poll-success-bg: #E8F5E9;
    --poll-error-color: #C62828;
    --poll-error-bg: #FDECEA;

    --poll-text-color: #14213D;      /* bleu marine très foncé, plus sobre qu'un noir pur */
    --poll-muted-color: #5A6472;
    --poll-bg-light: #F4F7FB;        /* blanc légèrement bleuté */
    --poll-bg-hover: #E8EFF7;
    --poll-bg-bar: #E9ECF1;

    --poll-border-color: #DCE3EC;
    --poll-border-dark: #B9C4D1;

    --poll-bg-main: #FFFFFF;         /* blanc, comme le drapeau */
    --poll-box-shadow: 0 4px 14px rgba(0, 85, 164, 0.10);
}

/* Carte du sondage : liseré tricolore en haut, sobre et officiel */
.poll-survey.poll-template-france .poll-container {
    background: var(--poll-bg-main) !important;
    color: var(--poll-text-color) !important;
    border: 1px solid var(--poll-border-color);
    border-radius: 6px;
    box-shadow: var(--poll-box-shadow);
    position: relative;
    overflow: hidden;
}

.poll-survey.poll-template-france .poll-container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(
        to right,
        #0055A4 0%, #0055A4 33.33%,
        #FFFFFF 33.33%, #FFFFFF 66.66%,
        #EF4135 66.66%, #EF4135 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. default.css ne stylait que h1 à l'origine, on reprend
   cette base ici. */
.poll-survey.poll-template-france h2,
.poll-survey.poll-template-france h3 {
    text-align: center;
    margin: 20px 0;
}

/* Titres en bleu France, un peu plus affirmés */
.poll-survey.poll-template-france h2,
.poll-survey.poll-template-france h3,
.poll-survey.poll-template-france .poll-question-title,
.poll-survey.poll-template-france .poll-stats-title,
.poll-survey.poll-template-france .poll-stats-subtitle {
    color: var(--poll-primary-color);
}

/* Options de vote : liseré bleu au survol / à la sélection */
.poll-survey.poll-template-france .poll-option-label:hover {
    background: var(--poll-bg-hover);
}
.poll-survey.poll-template-france .poll-option-label:has(input:checked) {
    background: var(--poll-bg-hover);
    border-left: 3px solid var(--poll-primary-color);
    padding-left: 5px;
}

/* Liens de navigation : rouge au survol, clin d'œil discret au drapeau */
.poll-survey.poll-template-france .poll-nav-links a:hover {
    color: var(--poll-secondary-color);
}

/* Cocarde tricolore en bas à droite de l'image de couverture.
   NB : un <img> ne peut pas recevoir de pseudo-élément CSS. Le widget
   de sondage enveloppe systématiquement .poll-cover dans .poll-col-cover
   (voir les règles poll-layout-left/right/top de default.css) : c'est
   une structure interne au widget, présente dans tous les layouts et
   indépendante de la page hôte qui l'intègre. On accroche donc la
   cocarde sur ce wrapper plutôt que sur l'image elle-même. */
.poll-survey.poll-template-france .poll-col-cover {
    position: relative;
}
.poll-survey.poll-template-france .poll-col-cover::after {
    content: "";
    position: absolute;
    bottom: -14px;
    right: 10px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background:
        repeating-conic-gradient(rgba(0,0,0,0.10) 0deg 9deg, rgba(255,255,255,0.12) 9deg 18deg),
        radial-gradient(
            circle at center,
            #0055A4 0%, #0055A4 26%,
            #FFFFFF 26%, #FFFFFF 46%,
            #EF4135 46%, #EF4135 100%
        );
    border: 2px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    z-index: 2;
    pointer-events: none;
}