/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* Fond vert vif style affiche */
body {
    background-color: #59b278 !important;
    background-image: 
        repeating-linear-gradient(0deg, transparent, transparent 40px, rgba(0,0,0,0.05) 40px, rgba(0,0,0,0.05) 41px),
        repeating-linear-gradient(90deg, transparent, transparent 40px, rgba(0,0,0,0.05) 40px, rgba(0,0,0,0.05) 41px);
    font-family: 'Arial Black', 'Arial Bold', Arial, sans-serif;
}

/* Effet damier subtil en arrière-plan */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        linear-gradient(45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
        linear-gradient(-45deg, rgba(0,0,0,0.1) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, rgba(0,0,0,0.1) 75%),
        linear-gradient(-45deg, transparent 75%, rgba(0,0,0,0.1) 75%);
    background-size: 60px 60px;
    background-position: 0 0, 0 30px, 30px -30px, -30px 0px;
    opacity: 0.15;
    pointer-events: none;
    z-index: -1;
}

.logo-container > img {
    max-height: 67px;
    padding-right: 6px;
    padding-left: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Titres avec effet 3D style affiche */
h1, h2, h3, h4, h5, h6 {
    color: #ffe866 !important;
    text-shadow: 
        3px 3px 0 #e444a6,
        -1px -1px 0 #e444a6,
        1px -1px 0 #e444a6,
        -1px 1px 0 #e444a6,
        2px 2px 0 #e444a6;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
}

h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

/* Conteneur principal avec bordure style affiche */
.container, .container-fluid {
    background-color: rgba(255, 255, 255, 0.95);
    border: 4px solid #ffe866;
    border-radius: 0;
    box-shadow: 8px 8px 0 rgba(228, 68, 166, 0.3);
    padding: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
}

/* Texte du corps en bleu comme sur l'affiche */
body {
    color: #0065bd !important;
}

p, .container p, .container-fluid p,
li, .container li, .container-fluid li,
.container > div:not(.btn):not(.alert):not(.navbar):not(footer),
.container-fluid > div:not(.btn):not(.alert):not(.navbar):not(footer) {
    color: #0065bd !important;
}

/* Exceptions pour les titres et éléments spéciaux */
h1, h2, h3, h4, h5, h6,
.btn, .alert, .navbar, footer,
.navbar *, footer * {
    color: inherit !important;
}

/* Sections avec fond jaune pour les prix et informations importantes */
.highlight-yellow, .prize-section, .info-box,
[class*="highlight"]:not(.question-valid-container):not([class*="valid"]),
[class*="prize"]:not(.question-valid-container):not([class*="valid"]),
[class*="info"]:not(.question-valid-container):not([class*="valid"]) {
    background-color: #ffe866 !important;
    border: 3px solid #e444a6 !important;
    padding: 15px 20px;
    margin: 15px 0;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
}

.highlight-yellow p, .prize-section p, .info-box p {
    color: #000 !important;
    font-weight: bold;
    margin: 0;
}

/* Style spécifique pour question-valid-container - plus compact */
.question-valid-container {
    background-color: #ffe866 !important;
    border: 3px solid #e444a6 !important;
    padding: 8px 12px !important;
    margin: 8px 0 !important;
    border-radius: 0;
    box-shadow: 2px 2px 0 rgba(0,0,0,0.2);
    min-height: auto !important;
    max-height: none !important;
}

.question-valid-container p,
.question-valid-container div,
.question-valid-container span,
.question-valid-container ul,
.question-valid-container li {
    margin: 4px 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}

.question-valid-container ul {
    list-style: none;
    padding-left: 0 !important;
}

.question-valid-container li {
    margin: 2px 0 !important;
}

/* Cacher les cadres vides (survey-description, question-valid-container, etc.) */
.survey-description:empty,
.question-valid-container:empty,
.survey-description:not(:has(*:not(script):not(style))),
.question-valid-container:not(:has(*:not(script):not(style))) {
    display: none !important;
}

/* Alternative pour les navigateurs qui ne supportent pas :has() */
.survey-description,
.question-valid-container {
    min-height: 0;
}

.survey-description:empty::before,
.question-valid-container:empty::before {
    content: none !important;
}

/* Vérifier si le conteneur n'a que des espaces ou des retours à la ligne */
.survey-description,
.question-valid-container {
    white-space: normal !important;
}

/* Masquer si seulement des espaces/blancs (via JavaScript dans custom.js) */
.survey-description.hidden-empty,
.question-valid-container.hidden-empty {
    display: none !important;
}

/***** navbar style affiche *****/

#navbar {
    border-bottom: 4px solid #ffe866;
    background-color: #e444a6 !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

.navbar-brand {
    float: left;
    padding: 2px 15px;
    font-size: 18px;
    line-height: 20px;
    height: 80px;
    color: #ffe866 !important;
    text-shadow: 
        2px 2px 0 #e444a6,
        -1px -1px 0 #e444a6;
    font-weight: bold;
    text-transform: uppercase;
}

.navbar-header {
    float: left;
    margin-bottom: 5px;
    margin-top: 5px;
}

.fruity .navbar {
    box-shadow: none;
}

.navbar-default .navbar-brand {
    color: #ffe866 !important;
}

.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #ffe866 !important;
    background-color: transparent;
    text-shadow: 
        2px 2px 0 #ffe866,
        -1px -1px 0 #ffe866;
}

.navbar-default .navbar-text {
    color: #ffe866 !important;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.navbar-default .navbar-nav>li>a {
    color: #ffe866 !important;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
}

.navbar-default .navbar-nav > li > a:hover {
    color: #ffe866 !important;
    background-color: rgba(255, 232, 102, 0.2);
}

/***** Boutons style affiche *****/

.btn-primary, .btn-success, .btn-default {
    background-color: #e444a6 !important;
    border: 3px solid #ffe866 !important;
    color: #ffe866 !important;
    font-weight: bold;
    text-transform: uppercase;
    text-shadow: 1px 1px 0 rgba(0,0,0,0.3);
    padding: 10px 20px;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
    transition: all 0.2s;
}

.btn-primary:hover, .btn-success:hover, .btn-default:hover {
    background-color: #ffe866 !important;
    color: #e444a6 !important;
    border-color: #e444a6 !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
}

.btn-primary:active, .btn-success:active, .btn-default:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

.btn-primary.active, .btn-success.active, .btn-default.active {
    background-color: #fffd44 !important;
    border-color: #e444a6 !important;        
}

/***** Formulaires style affiche *****/

.form-control, input[type="text"], input[type="email"], textarea, select {
    border: 3px solid #e444a6 !important;
    border-radius: 0;
    padding: 0 !important;
    background-color: #fff;
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
}

.form-control:focus, input[type="text"]:focus, input[type="email"]:focus, textarea:focus, select:focus {
    border-color: #ffe866 !important;
    box-shadow: 0 0 0 3px rgba(255, 232, 102, 0.3), inset 2px 2px 4px rgba(0,0,0,0.1);
    outline: none;
}

/* Questions et réponses */
.question {
    background-color: rgba(255, 255, 255, 0.9);
    border: 3px solid #e444a6;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 4px 4px 0 rgba(228, 68, 166, 0.2);
}

.question-title {
    color: #e444a6 !important;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 15px;
}

/* Cases à cocher et radio style pixelisé */
input[type="checkbox"], input[type="radio"] {
    width: 20px;
    height: 20px;
    border: 3px solid #e444a6 !important;
    border-radius: 0;
    accent-color: #e444a6;
}

input[type="checkbox"]:checked, input[type="radio"]:checked {
    background-color: #e444a6;
    border-color: #ffe866;
}

/***** footer style affiche *****/

footer {
    border-top: 4px solid #ffe866;
    background-color: #ffe866 !important;
    margin-top: 20px;
    padding: 20px 0;
    box-shadow: 0 -4px 8px rgba(0,0,0,0.2);
}

footer ul li {
    display: inline;
    padding: 15px 20px 0 0;
}

.lien_footer a {
    color: #e444a6 !important;
    font-weight: bold;
    text-shadow: 1px 1px 0 rgba(255,255,255,0.5);
}

.lien_footer a:hover {
    color: #59b278 !important;
    text-decoration: underline;
}

/* Alertes et messages - style bannière jaune-orange */
.alert, .ls-alert, .alert-warning, .alert-info {
    border: 3px solid #e444a6 !important;
    border-radius: 0;
    background-color: #ffcc66 !important;
    background: linear-gradient(to bottom, #ffdd88, #ffcc66) !important;
    color: #000 !important;
    font-weight: bold;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
    padding: 15px 20px;
    margin: 15px 0;
}

.alert .close, .ls-alert .close {
    color: #000 !important;
    opacity: 0.8;
    font-weight: bold;
    font-size: 20px;
    text-shadow: none;
}

.alert .close:hover {
    opacity: 1;
    color: #e444a6 !important;
}

.alert-success {
    background-color: #59b278 !important;
    background: linear-gradient(to bottom, #6bc28a, #59b278) !important;
    border-color: #ffe866 !important;
    color: #ffe866 !important;
}

.alert-danger, .alert-error {
    background-color: #e444a6 !important;
    border-color: #ffe866 !important;
    color: #ffe866 !important;
}

/* Liens - bleu comme sur l'affiche */
a, a:link, a:visited {
    color: #0065bd !important;
    font-weight: normal;
    text-decoration: underline;
}

a:hover, a:active {
    color: #0088ff !important;
    text-decoration: underline;
    background-color: transparent;
    padding: 0;
}

/* Liens dans les listes à puces */
ul li a, ol li a {
    color: #0065bd !important;
}

/* Liens dans le contenu principal */
.container a, .container-fluid a {
    color: #0065bd !important;
}

/* Tableaux */
table {
    border: 3px solid #e444a6;
    border-collapse: separate;
    border-spacing: 0;
}

table th {
    background-color: #e444a6;
    color: #ffe866;
    font-weight: bold;
    text-transform: uppercase;
    padding: 10px;
    border: 2px solid #ffe866;
}

table td {
    border: 2px solid #e444a6;
    padding: 10px;
    background-color: #fff;
}

table tr:nth-child(even) td {
    background-color: rgba(255, 232, 102, 0.1);
}

/* Progress bar - style fine ligne magenta avec pourcentage bleu */
.progress, .ls-progress, #ls-progress,
[class*="progress"]:not(.progress-bar):not(.progress-text):not(.progress-percent),
[id*="progress"]:not(#ls-progress-bar):not(#ls-progress-text) {
    background-color: transparent !important;
    border: none !important;
    border-radius: 0;
    height: 4px !important;
    box-shadow: none;
    margin: 25px 0 10px 0 !important;
    position: relative !important;
    width: 100%;
    display: block;
    overflow: visible !important;
    padding-top: 0 !important;
}

.progress-bar, .ls-progress-bar, #ls-progress-bar {
    background-color: #e444a6 !important;
    height: 4px !important;
    border-radius: 0;
    box-shadow: none;
    min-width: 0;
    position: relative;
    display: block;
    transition: width 0.3s ease;
}

/* Pourcentage de progression en bleu à gauche - sélecteurs spécifiques uniquement */
.progress-text, .ls-progress-text, #ls-progress-text,
.progress-percent, .ls-progress-percent,
.progress .percent, .ls-progress .percent,
[class*="progress-percent"], [class*="progress-text"],
.progress > span:first-child, .ls-progress > span:first-child {
    color: #0065bd !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: absolute !important;
    left: 0 !important;
    top: -20px !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 999 !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1.2;
    white-space: nowrap;
    pointer-events: none !important;
}

/* Texte dans les spans et divs de pourcentage */
.progress-text span, .ls-progress-text span,
.progress-percent span, .ls-progress-percent span,
.progress .percent span, .ls-progress .percent span {
    color: #0065bd !important;
    font-weight: bold !important;
    font-size: 14px !important;
    display: inline !important;
    position: static !important;
}

/* Conteneur de la barre de progression */
.progress-container, .ls-progress-container,
#ls-progress-wrapper, .progress-wrapper {
    position: relative;
    margin: 15px 0;
    padding-top: 25px;
    min-height: 30px;
    width: 100%;
    overflow: visible !important;
}

#ls-progress-wrapper .progress, .progress-wrapper .progress {
    margin-top: 0;
}

/* S'assurer que le texte de progression est visible mais ne pas casser la barre */
.progress-text, .ls-progress-text,
.progress-percent, .ls-progress-percent {
    color: #0065bd !important;
}

/* Ne pas affecter la barre de progression elle-même */
.progress-bar *, .ls-progress-bar * {
    position: static !important;
}

/* Afficher le pourcentage depuis les attributs HTML (fallback si JS ne fonctionne pas) */
.progress[aria-valuenow]::before {
    content: attr(aria-valuenow) "%";
    color: #0065bd !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: absolute;
    left: 0 !important;
    top: -22px !important;
    z-index: 10 !important;
    display: block !important;
}

.progress[data-percent]::before {
    content: attr(data-percent) "%";
    color: #0065bd !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: absolute;
    left: 0 !important;
    top: -22px !important;
    z-index: 10 !important;
    display: block !important;
}

.progress-bar[aria-valuenow]::after {
    content: attr(aria-valuenow) "%";
    color: #0065bd !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: absolute;
    left: 0 !important;
    top: -22px !important;
    z-index: 10 !important;
    display: block !important;
}

.progress-bar[data-percent]::after {
    content: attr(data-percent) "%";
    color: #0065bd !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: absolute;
    left: 0 !important;
    top: -22px !important;
    z-index: 10 !important;
    display: block !important;
}

/* Solution CSS pure : utiliser le conteneur parent pour afficher le pourcentage */
.progress:not(:has(.progress-percent))::before,
.ls-progress:not(:has(.progress-percent))::before {
    content: "0%";
    color: #0065bd !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: absolute;
    left: 0 !important;
    top: -22px !important;
    z-index: 10 !important;
    display: block !important;
}

/* Afficher le pourcentage calculé depuis la largeur de la barre (nécessite JS mais fallback CSS) */
.progress-bar::after {
    content: "";
    color: #0065bd !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: absolute;
    left: 0 !important;
    top: -22px !important;
    z-index: 10 !important;
    display: block !important;
}

/* Forcer l'affichage d'un élément de pourcentage même s'il est caché */
.progress-percent, .ls-progress-percent {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #0065bd !important;
    font-weight: bold !important;
    font-size: 14px !important;
    position: absolute !important;
    left: 0 !important;
    top: -22px !important;
    z-index: 999 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* S'assurer que le conteneur parent permet l'affichage */
.progress:has(.progress-percent),
.ls-progress:has(.progress-percent) {
    position: relative !important;
    margin-bottom: 25px !important;
}

/* Sélecteur de langue - style affiche */
.changelang, .ls-changelang, #changelang, #ls-changelang,
.language-selector, .ls-language-selector {
    margin: 15px 0;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.9);
    border: 3px solid #e444a6;
    border-radius: 0;
}

.changelang label, .ls-changelang label,
.language-selector label, .ls-language-selector label {
    color: #000 !important;
    font-weight: bold;
    margin-right: 10px;
    display: inline-block;
}

/* Champ de sélection de langue - blanc avec texte noir lisible */
.changelang select, .ls-changelang select,
.language-selector select, .ls-language-selector select,
#changelang select, #ls-changelang select,
select[name*="lang"], select[id*="lang"] {
    background-color: #fff !important;
    background-image: none !important;
    border: 3px solid #e444a6 !important;
    border-radius: 0;
    padding: 2px 12px !important;
    color: #000 !important;
    font-weight: normal;
    font-size: 14px !important;
    margin-right: 10px;
    min-width: 200px;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

/* Options dans le dropdown - texte noir sur fond blanc */
.changelang select option, .ls-changelang select option,
.language-selector select option, .ls-language-selector select option,
#changelang select option, #ls-changelang select option,
select[name*="lang"] option, select[id*="lang"] option {
    background-color: #fff !important;
    color: #000 !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.changelang select:focus, .ls-changelang select:focus,
.language-selector select:focus, .ls-language-selector select:focus,
#changelang select:focus, #ls-changelang select:focus,
select[name*="lang"]:focus, select[id*="lang"]:focus {
    border-color: #ffe866 !important;
    box-shadow: 0 0 0 3px rgba(255, 232, 102, 0.3);
    outline: none;
    background-color: #fff !important;
    color: #000 !important;
}

/* Forcer le texte sélectionné à être noir */
.changelang select:not(:focus), .ls-changelang select:not(:focus),
.language-selector select:not(:focus), .ls-language-selector select:not(:focus) {
    color: #000 !important;
}

/* Style pour le sélecteur dans la navbar - amélioration de la lisibilité */
.navbar .language-selector select, .navbar .changelang select,
.navbar select[name*="lang"], .navbar select[id*="lang"] {
    background-color: #fff !important;
    border: 2px solid #ffe866 !important;
    color: #000 !important;
    padding: 5px 10px;
    font-size: 14px;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
}

.navbar .language-selector select option, .navbar .changelang select option,
.navbar select[name*="lang"] option, .navbar select[id*="lang"] option {
    background-color: #fff !important;
    color: #000 !important;
    padding: 8px 12px !important;
}

/* Amélioration supplémentaire pour la lisibilité - forcer le contraste */
select, select:focus, select:hover, select:active {
    color: #000 !important;
    background-color: #fff !important;
}

select option {
    background-color: #fff !important;
    color: #000 !important;
}

select option:checked, select option:focus {
    background-color: #ffe866 !important;
    color: #000 !important;
}

/* Bouton "Changer de langue" - orange style affiche */
.changelang .btn, .ls-changelang .btn,
.language-selector .btn, .ls-language-selector .btn,
#changelang .btn, #ls-changelang .btn,
button[name="changelang"], input[name="changelang"],
button[type="submit"][name*="lang"], input[type="submit"][name*="lang"] {
    background-color: #ff8800 !important;
    border: 3px solid #e444a6 !important;
    color: #fff !important;
    font-weight: bold;
    text-transform: uppercase;
    padding: 8px 20px;
    border-radius: 0;
    box-shadow: 4px 4px 0 rgba(0,0,0,0.2);
    transition: all 0.2s;
    cursor: pointer;
}

.changelang .btn:hover, .ls-changelang .btn:hover,
.language-selector .btn:hover, .ls-language-selector .btn:hover,
button[name="changelang"]:hover, input[name="changelang"]:hover,
button[type="submit"][name*="lang"]:hover, input[type="submit"][name*="lang"]:hover {
    background-color: #ffaa33 !important;
    transform: translate(-2px, -2px);
    box-shadow: 6px 6px 0 rgba(0,0,0,0.3);
}

.changelang .btn:active, .ls-changelang .btn:active,
.language-selector .btn:active, .ls-language-selector .btn:active,
button[name="changelang"]:active, input[name="changelang"]:active,
button[type="submit"][name*="lang"]:active, input[type="submit"][name*="lang"]:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}

/* Style spécifique pour le formulaire de changement de langue */
form[name="changelang"], form[id*="changelang"], form[action*="changelang"] {
    display: inline-block;
    margin: 0;
}

form[name="changelang"] .form-group, form[id*="changelang"] .form-group {
    display: inline-block;
    margin: 0 10px 0 0;
    vertical-align: middle;
}

/* Amélioration des liens de langue dans la navbar */
.navbar .language-selector, .navbar .changelang {
    display: inline-block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
}

.navbar .language-selector select, .navbar .changelang select {
    background-color: rgba(255, 255, 255, 0.9) !important;
    border: 2px solid #ffe866 !important;
    color: #000 !important;
    padding: 5px 10px;
    font-size: 14px;
}

.navbar .language-selector .btn, .navbar .changelang .btn {
    background-color: #ff8800 !important;
    border: 2px solid #ffe866 !important;
    padding: 5px 15px;
    font-size: 14px;
    margin-left: 5px;
}

/* Effet pixelisé pour les images */
img {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}
	
	
/* Taille des images et du texte du footer */
footer img.small {
    height: 30px;
}
footer a {
    font-size: 12px;
}