/* CSS portail FlexiSite Default v.2 */
/* */

html { scroll-behavior: smooth; scrollbar-color: #333 rgba(0,0,0,.15); scrollbar-width: thin; }
html::-webkit-scrollbar { width: 0.5rem; background-color: rgba(0,0,0,.15); }
html::-webkit-scrollbar-thumb { background: #333; }

body { background-color:#fff; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 1.1em; margin: 0; text-align: center; }
#print-footer { display:none; }

h1 { font-style: italic; background-color:#f5f5f5; padding:10px 15px; border-radius:5px; border-left:4px solid #FF4D4D; margin:0; font-size:1.8em; text-align:center; flex:1 1 0; min-width:0; }
.survey-header-bar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:20px; }
.survey-create-btn { flex:0 0 auto; white-space:nowrap; background:#f37a7a; color:#fff !important; text-decoration:none; padding:10px 20px; border-radius:7px; font-weight:bold; display:inline-block; transition:background 0.2s; }
.survey-create-btn:hover { background:#d65f5f; color:#fff !important; }

h2 { font-weight: 500; font-size:1.7em; color:#000; text-shadow: -0.7px 0.7px 1px #ccc; }
h3 { font-weight: 500; font-size:1.5em; color:#f37a7a; }

A { text-decoration: none; }
A:link { color:#000; }
A:visited { color:#000; }
A:active { color:#555; }
A:hover { color:#FF4D4D; }

img { border:0px; padding:0px; margin:0px; max-width:100%; }

/* Puces personnalisées (barre verticale) à appliquer via classe */
.custom-list { list-style: none; margin: 0; padding: 0; }
.custom-list li { border-left: 2px solid #555; padding-left: 10px; margin-bottom: 8px; }

.photo { border:1px solid #555; }
.return { clear:both }
.center { margin:auto; text-align:center; }
.mini { font-size:0.7em }
.big { font-size:2em; font-weight: bold; color:#FF4D4D; }
.zoom:hover { -webkit-transform:scale(1.2); transform:scale(1.2); }
.icon { width: 24px; vertical-align: middle;}

/*  entete  */
#header { background-color:#fff; width:100%; margin:0px; display: flex; align-items: center; flex-wrap:wrap; border-bottom: 1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.03); position: relative; z-index: 999; padding:0 1%; box-sizing:border-box; }

#bloc_titre { font-size:2em; font-weight: bold; padding:1%; white-space:nowrap; }
.txt-flexi { color:#000; }
.txt-polls { color:#FF4D4D; }

#menu { text-align:left; margin-left:20px; }
#menu ul { padding:0; margin:0; }
#menu li { display: inline-block; padding:3px; margin:0 }

/* bouton hamburger : masqué au-delà de 822px, activé dans le media query correspondant */
.menu_toggle_cb, #menu_burger { display:none; }

/* menu déroulant des langues */
#bloc_lg { position:relative; margin-left:auto; height:32px; }
.lg_toggle_cb { display:none; }
#lg_current { display:flex; align-items:center; gap:5px; height:32px; box-sizing:border-box; cursor:pointer; background:#f5f5f5; border:1px solid #e0e0e0; border-radius:20px; padding:0 12px; user-select:none; }
#lg_current .lg_globe { font-size:1.1em; filter: hue-rotate(180deg) saturate(3); }
#lg_current .lg_code { font-weight:bold; }
#lg_current .lg_caret { font-size:0.7em; }

#lg_menu { display:none; position:absolute; top:100%; right:0; margin-top:0; background:#fff; border:1px solid #e0e0e0; border-radius:8px; box-shadow:0 2px 8px rgba(0,0,0,0.1); padding:5px 0; min-width:120px; text-align:left; z-index:1000; }
#lg_menu li { display:block; list-style-type:none; }
#lg_menu a { display:grid; grid-template-columns:20px 1fr; align-items:center; column-gap:6px; padding:6px 12px; }
#lg_menu img { width:20px; height:20px; flex:0 0 20px; margin-right:0; }
#lg_menu .lg_code { font-size:0.9em; }

.lg_toggle_cb:checked ~ #lg_menu { display:block; }

@media screen and (min-width:823px) {
    #bloc_lg:hover #lg_menu { display:block; }
}

/* bloc compte : login/inscription ou compte/déconnexion, à droite du menu de langue */
#bloc_compte { display:flex; align-items:center; gap:12px; margin-left:12px; height:32px; flex-wrap:nowrap; flex-shrink:0; }
#bloc_compte a { display:flex; align-items:center; gap:6px; font-size:0.9em; font-weight:bold; color:#333; text-decoration:none; white-space:nowrap; }
#bloc_compte a:hover { color:#FF4D4D; }
#bloc_compte .icon_compte { width:20px; height:20px; object-fit:cover; border-radius:50%; }
    
#content { clear:both; width:98%; text-align:left; margin:auto; padding:1%; }

#bloc { clear:both; width:100%; text-align:center; margin:auto; vertical-align:top; }
#bloc_100 { width:98%; margin:auto; padding:1%; display:inline-block; text-align:left; }

#col_3 { display:none; }
#col_2 { float:right; width:255px; padding:5px; margin:0; text-align:center; margin-bottom:5px; border-left:1px #333 solid; }
#col_1b { margin:0; padding:0; margin-right:280px; white-space:normal; }
#col_1 { margin:auto; text-align:left; margin:0; padding:0; }
/*#col_1 img { border:1px #333 solid; border-radius:5px; }*/

#description img { max-width:100% }

/* Nouveau bloc de largeur 30% (remplace l'ancien bloc_S)
.bloc_30 { transform:skewY(0deg); -webkit-transform:skewY(0deg); animation: intro 3s 1; width:30%; margin:1%; padding:0.5%; display:inline-block; vertical-align:top; text-align:left; }
.bloc_30:hover { transform:skewY(-5deg); -webkit-transform:skewY(-5deg); transition:.40s;} */
/*
.bloc_30 {
    width: 30%;
    margin: 1%;
    padding: 0.5%;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    animation: intro 3s 1;
    transition: transform .4s ease, box-shadow .4s ease;
    will-change: transform;
}

.bloc_30:hover {
    transform: scale(1.12);
   
    z-index: 1;
    position: relative;
}*/
/* box-shadow: 0 8px 20px rgba(0, 0, 0, 0.10);*/

/*
@keyframes intro {
    from { transform:  translate(0em, 10em);}
    to { transform: translate(0em, 0em);}
}
@-webkit-keyframes intro { 
    from { transform:  translate(0em, 10em);}
    to { transform: translate(0em, 0em);}
}*/


.bloc_30 {
    width: 30%;
    margin: 1%;
    padding: 0.5%;
    display: inline-block;
    vertical-align: top;
    text-align: left;
    will-change: transform;
}

.bloc_30.zoom-seq {
    animation: zoom_seq .8s ease-in-out;
}

@keyframes zoom_seq {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.22); }
    100% { transform: scale(1); }
}

.bloc_290 { background-color:rgba(245, 245, 245,0.7); padding:20px 22px; display:flex; flex-direction:column; border:1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); vertical-align:top; text-align:left; min-height:175px; box-sizing: border-box; }

/*#bloc_newsletter { background-color:rgba(245, 245, 245,0.7); border-radius:5px; border:1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); display: flex; flex-wrap: wrap;}
#search_bar { text-align:right; height:38px; }
#search_bar img { border:0px; margin:0 }*/

#bloc_A, #bloc_B { background-color: rgba(245, 245, 245, 0.7); width:calc(47% - 4px); margin:1%; padding:0.5%; border-radius: 5px; border:1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); vertical-align:top; text-align:left; }

.bloc50 { width:46%; margin: 0 1%; padding:0; display:inline-block; vertical-align:top; text-align:left; }
.img50d { width:50%; float:right; border-radius: 7%; margin-left:2%;}

.bloc_button1 { background:#fff; border:1px solid #f37a7a; padding:10px 20px; border-radius:7px; font-weight:bold; text-align:center; display:inline-block; color:#f37a7a !important; text-decoration:none; transition:background 0.2s, color 0.2s; box-sizing: border-box; }
.bloc_button1:hover { background:#f37a7a; color:#fff !important; }

.bloc_button2 { background:#f37a7a; padding:10px 20px; border-radius:7px; font-weight:bold; text-align:center; display:inline-block; transition:background 0.2s; box-sizing: border-box; }
.bloc_button2 a { color:#fff !important; text-decoration:none; }
.bloc_button2:hover { background:#d65f5f; }

.bloc_290 .bloc_button2 { margin-top: auto; width: fit-content; width: 100%; text-align:center; }
.bloc_290 .bloc_button1 { margin-top: auto; width: fit-content; width: 100%; text-align:center; }

.line_art { margin:0; height:0px; border-top:1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); content: '\002665'; }
.rate_art { height:16px; width:80px;  margin:3px; border:1px solid #000; border-radius:5px; float:right }

#line_photo { width: 100%; vertical-align:top;}
#line_photo img {vertical-align:middle; margin:0.5%;}
#line_photo img:hover:not(.active) {width: 100%;}

.bloc_art { width:100%; margin:0; padding:0; display:inline-block; text-align:left; margin-bottom:1% ;}
.bloc_art img { float:left; margin-right:1%; height:190px;width:300px; }
.bloc_art_txt { width:calc(100% - 320px); float:right; margin:0; padding:0;  }
.bloc_art_txt h2 { margin:0; line-height: 1.7em; }

.pagination  { margin:auto; text-align:center; clear:both; margin-top:10px; }
.pagination a { display:inline-block; padding: 8px 16px; text-decoration:none; transition: background-color .3s; margin:2px; }
.pagination a.active { background-color: #555; color: white; }
.pagination a:hover:not(.active) { background-color: #ddd;}

#bloc_annonce { background-color:#3339; border:1px solid #333;  width:98%; padding:2%; position:fixed; bottom:0; right:0; text-align:center; display:none; font-size: 0.95em; }
#ann2 { background-color: #ccc; width:fit-content; margin:auto; padding:0.5%; }
#b_ok a { float:right; background-color:#555; color:#FF4D4D; }
#b_ok a:hover { background-color:#FF4D4D; color:#555}

/* --- account administration --- */

/*.photo_admin { width:120px; text-align: center; overflow: hidden; aspect-ratio: 4 / 4; float:left; margin:1px; border: #000 1px solid; border-radius:7px }
.photo_admin img { height: calc(100% - 40px); width: calc(100%); object-fit: cover; margin:auto; vertical-align:top;}*/

.bloc_account { border-radius: 10px; background-color: #E9E5DC; padding:1%; margin:1%; border:1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); }
.bloc_account ul { list-style-type: none; display:block; padding: 0; }
.item { width: 9rem; display: inline-block; }
#avatar { float:right; width:100px; height:100px; border:1px solid #7A7267; border-radius:100%; overflow:hidden; text-align:center; display:table-cell; vertical-align:top; margin-right: 1%; margin-top: -15px ; background-size:cover; }
#avatar img { width:32px; margin-top:70px; }

/* pied de page */ 
footer { margin:0px; }
#footer { clear:both; background-color:#f9f9f9; width:100%; margin:0px; text-align:left; border-top: 1px solid #e0e0e0; padding:2% 1%; box-sizing:border-box; }
#footer_bottom_bar { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:15px; margin-top:20px; padding-top:15px; border-top:1px solid #e0e0e0; }
#footer_grid { display:flex; flex-wrap:wrap; justify-content:space-between; gap:40px; font-size:0.85em; }

#bloc_marque { font-size:1.3em; font-weight:bold; }
#bloc_adr { display:flex; gap:10px; align-items:flex-start; }
#bloc_adr ul { list-style-type: none; padding:0; margin:0; }
#bloc_adr img { width:64px; flex-shrink:0; margin:0; }

#bloc_social { text-align:left; flex-shrink:0; }
#lien_social { margin:0; padding:0; display:flex; flex-wrap:nowrap; gap:10px; }
#lien_social li { display: inline-block; list-style-type: none;}

#bloc_contact img { filter: grayscale(100%);}
#bloc_contact img:hover { filter: grayscale(0%); -webkit-transform:scale(1.1); transform:scale(1.1); }

#bloc_adr li.about-item { display: inline-block !important; margin-right: 15px; }

#bloc_liens { display:flex; gap:30px; }
#lien_bloc1, #lien_bloc2 { display:block; width:auto; min-width:350px; text-align:left; margin:0; padding:0;}
#lien_bloc1 li, #lien_bloc2 li { list-style:none; position: relative;  padding-left: 10px;   }
#lien_bloc1 li::before, #lien_bloc2 li::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 2px; background: #555; }
#lien_bloc1 li:hover::before, #lien_bloc2 li:hover::before{ background: #FF4D4D; }


#flexisite { margin:0; font-size:0.7em; text-align:left; }
#flexisite img { vertical-align: middle; width:24px; }

#rss { font-size: 0.8em;  background-color:orange; color:black; padding:1px 7px 1px 7px; margin:21%; border-radius:8px; }

#ads_1 { width:100% !important; max-width: 100% !important; margin:0; padding:0; text-align:center; margin-bottom:2%; margin-top: 50px; box-sizing: border-box; }
#ads_1 p { text-align: left; margin-left: 1%; width:auto; }
#ads_1 iframe { max-width: 100% !important; }
#ads_1 div { max-width: 100% !important; }

/* Force le contenu à ne pas déborder */
#ads_1 > * { max-width: 100% !important; }

#ads_2 { width:100% !important; max-width: 100% !important; margin:0; padding:0; text-align:center; margin-bottom:0; overflow: hidden; box-sizing: border-box; }
#ads_2 p { text-align: left; margin:0; margin-left: 1%; width:auto; }
#ads_2 iframe, #ads_2 div { max-width: 100% !important; height: auto !important; }

/* ==========================================
   FORMULAIRES (Harmonisation globale)
   ========================================== */
fieldset { border-radius: 8px; background-color: #f9f9f9; margin: auto; width: 90%; margin-top: 12px; border: 1px solid #e0e0e0; padding: 15px; }
legend { font-weight: bold; color: #333; padding: 0 10px; }

form label { display: inline-block; width: auto; max-width: 100%; line-height: 1.5em; margin-bottom: 5px; color: #333; }
form textarea { width: 100%; border-radius: 5px; border: 1px solid #ccc; background-color: #fff; padding: 8px; box-sizing: border-box; font-family: inherit; } 

/* Harmonisation des inputs et selects (Même taille, même look) */
form input, form select { height: 38px; padding: 0 10px; border-radius: 5px; border: 1px solid #ccc; background-color: #fff; box-sizing: border-box; font-family: inherit; font-size: 1em; display: inline-block; vertical-align: middle; }
form input {width:100%; box-sizing:border-box; }
form input[type=date] { width: auto; }
form input[type=radio] { width: auto; height: auto; border: none; zoom: 1.2; vertical-align: middle; margin-right: 5px; }
form input[type=checkbox] { width: auto; height: auto; border: none; zoom: 1.2; vertical-align: middle; margin-right: 5px; }


form input[type=file] { width:auto; border-radius:5px; background-color:#FAFAFA; padding:0}

input[type="file"]::file-selector-button { background: #f37a7a; border: 1px solid #f37a7a; color: #fff; border-radius: 5px; height:100%; cursor: pointer; margin-left:0 }
input[type="file"]::file-selector-button:hover { background-color:#f37a7a; border-color: #f37a7a; }


/* Effets de survol et focus (Couleur d'accentuation du site) */
form textarea:focus, form textarea:hover, form input:focus, form input:hover, form select:focus, form select:hover { color: #000; background-color: #fff; border: 1px solid #f37a7a; box-shadow: 0 0 0 2px rgba(243, 122, 122, 0.2); outline: none; }

/* Boutons Submit (Alignés verticalement, sans marge qui décale) */
form input[type=submit] { display: inline-block; width: auto; height: 38px; line-height: 36px; padding: 0 20px; margin: 5px 0; background-color: #f37a7a; color: #fff; border: 1px solid #f37a7a; font-weight: bold; cursor: pointer; transition: background 0.2s; box-sizing: border-box; vertical-align: middle; }
form input[type=submit]:hover { background-color: #d65f5f; border-color: #d65f5f; }

/** ------------------------------ **/
/** pour les rollovers bas de page **/
/** ------------------------------ **/
.rollover1 { background:url("../../themes/flexipolls/imgs/round_facebook.svg") 0 0 no-repeat; }
.rollover2 { background:url("../../themes/flexipolls/imgs/round_tiktok.svg") 0 0 no-repeat; }
.rollover3 { background:url("../../themes/flexipolls/imgs/round_twitter.svg") 0 0 no-repeat; }
.rollover4 { background:url("../../themes/flexipolls/imgs/round_linkedin.svg") 0 0 no-repeat; }
.rollover5 { background:url("../../themes/flexipolls/imgs/round_youtube.svg") 0 0 no-repeat; }
.rollover6 { background:url("../../themes/flexipolls/imgs/round_pinterest.svg") 0 0 no-repeat; }
.rollover7 { background:url("../../themes/flexipolls/imgs/round_instagram.svg") 0 0 no-repeat; }
.rollover8 { background:url("../../themes/flexipolls/imgs/footer-skype.png") 0 0 no-repeat; }
.rollover9 { background:url("../../themes/flexipolls/imgs/footer-yahoo.png") 0 0 no-repeat; }
.rollover10 { background:url("../../themes/flexipolls/imgs/round_zalo.svg") 0 0 no-repeat; }

.rollover1, .rollover2, .rollover3, .rollover4, .rollover5, .rollover6, .rollover7, .rollover8, .rollover9, .rollover10 { display:inline-block; width:30px; height:30px; filter: grayscale(100%); }

.rollover1:hover, .rollover2:hover, .rollover3:hover, .rollover4:hover, .rollover5:hover, .rollover6:hover, .rollover7:hover, .rollover8:hover, .rollover9:hover, .rollover10:hover { filter: grayscale(0%); -webkit-transform:scale(1.1); transform:scale(1.1); }

.rollover1 span , .rollover2 span ,.rollover3 span , .rollover4 span , .rollover5 span, .rollover6 span, .rollover7 span, .rollover8 span, .rollover9 span, .rollover10 span { display:none }

/** sharing bouton **/
#share-buttons { text-align:right; font-weight:bold; font-style:oblique; display:inline-block; font-size:0.9em; width:100%; clear:both }
#share-buttons img { width:30px; border:0; display:inline; vertical-align:middle; }
#share-buttons img:hover { -webkit-transform:scale(1.1); transform:scale(1.1); -webkit-filter:saturate(4); filter:saturate(4); }

/** comment box **/
#com_art { min-width:300px; max-width:600px;padding:0 }
#com_art fieldset { padding:5px; background-color:#ccc; }
#com_art input[type=submit] { margin: 0 auto; }
#com_art input[type=text] { max-width:350px; }
#com_art input[type=email] { max-width:350px; }
#com_show { min-width:300px; max-width:800px;margin:10px }
#com_line { margin-left:4px; color:#ccc; font-weight: bold; }
#com_text { border-bottom:1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); padding:2px; margin:2px; }

/** flexichat 
#flexichat { width:120px; height:32px; background-color: #ccc; padding:0; position:fixed; bottom:120px; right:0; text-align:center; border-radius: 15px 0px 0 15px; overflow: hidden; display:none; }
#flexichat img { width: 32px; vertical-align: middle; }
#flexichat:hover { background-color: #555; width:300px; height:320px; }
#flexichat_txt { width: 96%; height:230px; margin:1%; padding: 1%; background-color: #fff; text-align: left; border-radius: 15px; overflow-y:scroll; }**/

/* ==========================================
   Page d'accueil Sondages : Styles spécifiques
   ========================================== */

/* Catégories de fonctionnalités (Pourquoi nous choisir ?) */

.home h2 { margin-top: 60px; text-align: center; }

#bloc_1 { padding:0; margin:0 2% }
#bloc_2 { text-align: left; padding: 1%; margin-top: 70px;}
#bloc_2 hr { border: 0; height: 3px; background: #d65f5f; margin: 20px 0; }
#bloc_2 p { width:90%; margin-bottom: 70px; }
.claim { color: #000; font-size:1.3em }

.home_features_wrap { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 20px; justify-content: left; }
#preuve_sociale { margin: 30px 0; text-align: center; display: flex; flex-wrap: wrap; justify-content: center; gap: 40px; }

@media (max-width: 400px) { 
    .home h2 { margin-top: 60px } 
    #bloc_2 { width: 96%; margin-top: 0; padding: 10px;}
    #bloc_2 p { width:98%; margin-bottom: 70px; }
    #bloc_1 { padding-top:10px }
    #preuve_sociale { margin: 30px 0; gap: 18px; font-size: 0.8em }
}

.home_feature_pill {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid rgba(26,23,20,0.10);
    border-bottom: 3px solid var(--home_cat-color, #7A7267);
    border-radius: 4px;
    padding: 10px 16px 8px;
    background-color: var(--home_cat-bg, #E9E5DC);
}
.home_feature_pill img { width: 16px; height: 16px; opacity: 0.85; }
.home_feature_pill span { font-size: 13px; line-height: 1.3; color: #333; }
.home_feature_pill.featured { box-shadow: 0 1px 3px rgba(26,23,20,0.08); }
.home_feature_pill.featured span { font-weight: 600; }
.home_feature_pill.featured img { opacity: 1; }

/* Assignation des couleurs par catégorie (Fond + Bordure bas) */
.home_cat-1 { --home_cat-color: #7C93B8; --home_cat-bg: rgba(124, 147, 184, 0.1); }
.home_cat-2 { --home_cat-color: #7E9E76; --home_cat-bg: rgba(126, 158, 118, 0.1); }
.home_cat-3 { --home_cat-color: #9C82BA; --home_cat-bg: rgba(156, 130, 186, 0.1); }
.home_cat-4 { --home_cat-color: #C79A46; --home_cat-bg: rgba(199, 154, 70, 0.1); }
.home_cat-5 { --home_cat-color: #C06A63; --home_cat-bg: rgba(192, 106, 99, 0.1); }
.home_cat-6 { --home_cat-color: #4E9A96; --home_cat-bg: rgba(78, 154, 150, 0.1); }

/* Si featured, on renforce le fond avec du blanc */
.home_feature_pill.featured.home_cat-1 { --home_cat-bg: rgba(124, 147, 184, 0.2); }
.home_feature_pill.featured.home_cat-2 { --home_cat-bg: rgba(126, 158, 118, 0.2); }
.home_feature_pill.featured.home_cat-3 { --home_cat-bg: rgba(156, 130, 186, 0.2); }
.home_feature_pill.featured.home_cat-4 { --home_cat-bg: rgba(199, 154, 70, 0.2); }
.home_feature_pill.featured.home_cat-5 { --home_cat-bg: rgba(192, 106, 99, 0.2); }
.home_feature_pill.featured.home_cat-6 { --home_cat-bg: rgba(78, 154, 150, 0.2); }

/* 3 steps */
.step_head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 4px; margin-top: 0px; }
.step_head h3 { margin: 0; }
.step_head .step_num { font-size: 2em; font-weight: bold; color: #FF4D4D; line-height: 1; }

/* FAQ */
.faq_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px 30px; }
.faq_item h3 { border-left: 2px solid #555; padding-left: 10px; margin: 0 0 16px; }
.faq_item p { margin: 0; }
.faq_item p a { color: #FF4D4D; white-space: nowrap; }
.faq_item p a:hover { color: #555; }

@media (max-width: 640px) {
    .faq_grid { grid-template-columns: 1fr; }
}

/* Exemples d'utilisation des sondages */
.home_examples_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 980px) { .home_examples_grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .home_examples_grid { grid-template-columns: 1fr; } }

.home_example_card { background-color: #E9E5DC; border: 1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05); overflow: hidden; }
.home_example_image_wrap { width: 100%; height: 140px; position: relative; overflow: hidden; background-color: #E9E5DC; }
.home_example_image_wrap img { width: 100%; height: 100%; object-fit: cover; filter: sepia(20%) contrast(1.05); }
.home_example_image_wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 40%, rgba(200,65,10,0.15) 100%); }
.home_example_body { padding: 20px 22px; }
.home_example_label { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #C8410A; margin: 0 0 14px; }
/*.home_example_list { font-size: 13px; line-height: 1.5; }*/

/* Grille des prix (4 colonnes) */
.home_pricing_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 20px; }
.home_pricing_grid h3 { margin: 0; color: #7A7267; }
.price_promo { color:#000; font-size:0.55em; font-weight: normal; position: relative;  display: inline-block;}
.price_promo::before { content: ''; position: absolute; top: 50%; left: -5px; right: -5px; height: 3px; background: #C8410A; transform: translateY(-50%) rotate(-15deg); border-radius: 2px; }

/* Grille des prix - subscription.html */
.subs_grid_2 { display: grid; grid-template-columns: repeat(2, minmax(0, 400px)); gap: 24px; margin-top: 20px; justify-content: center; }
.subs_grid_1 { display: grid; grid-template-columns: minmax(0, 400px); gap: 24px; margin-top: 20px; justify-content: center; }
.subs_grid_2 h3,
.subs_grid_1 h3 { margin: 0; color: #7A7267; }

.highlighted {  border:1px solid #FF4D4D; box-shadow: 0 2px 5px rgba(248, 1, 1, 0.05); }


@media (max-width: 980px) { .home_pricing_grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .home_pricing_grid { grid-template-columns: 1fr; } }


/* ==========================================
   MODULE SONDAGE (Templates, Partage, Liste, Création)
   ========================================== */

/* --- Layouts Sondage --- */
.poll-survey.poll-layout-top .poll-col { width: 100%; }
.poll-survey.poll-layout-left .poll-container, .poll-survey.poll-layout-right .poll-container { display: flex; flex-wrap: wrap; gap: 30px; align-items: flex-start; text-align: left; }
.poll-survey.poll-layout-left .poll-col-cover { flex: 1 1 300px; max-width: 40%; }
.poll-survey.poll-layout-left .poll-col-form { flex: 1 1 300px; }
.poll-survey.poll-layout-right .poll-col-cover { order: 2; flex: 1 1 300px; max-width: 40%; }
.poll-survey.poll-layout-right .poll-col-form { order: 1; flex: 1 1 300px; }


@media (max-width: 768px) {
    .poll-survey.poll-layout-left .poll-container, .poll-survey.poll-layout-right .poll-container { flex-direction: column; }
    .poll-survey.poll-layout-left .poll-col-cover, .poll-survey.poll-layout-right .poll-col-cover { order: 1; max-width: 100%; }
    .poll-survey.poll-layout-left .poll-col-form, .poll-survey.poll-layout-right .poll-col-form { order: 2; }
}

/* --- Boutons de Partage (Social & Embed) --- */
.poll-share-container { margin-top: 30px; text-align: center; position: relative; }
.poll-share-label { font-size: 0.85em; color: #666; margin-bottom: 10px; font-weight: bold; }
.poll-share-btns { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; position: relative; }
.poll-share-btn { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; cursor: pointer; border: none; transition: transform 0.2s, opacity 0.2s; position: relative; }
.poll-share-btn:hover { transform: scale(1.1); opacity: 0.9; }
.poll-share-fb { background: #1877F2; } .poll-share-wa { background: #25D366; } .poll-share-copy { background: #f37a7a; } .poll-share-qr { background: #333; }
.poll-share-msgr { background: #0084FF; } .poll-share-zalo { background: #0068FF; } .poll-share-linkedin { background: #0077B5; } .poll-share-reddit { background: #FF4500; } .poll-share-mail { background: #777; }
.poll-share-more { background: #eee; color: #555 !important; } .poll-share-more svg { width: 20px; height: 20px; fill: currentColor; } .poll-share-btn svg { width: 18px; height: 18px; fill: currentColor; }
.copy-tooltip { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%); background: #333; color: #fff; padding: 3px 8px; border-radius: 4px; font-size: 0.75em; white-space: nowrap; opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.copy-tooltip.show { opacity: 1; }
.qr-modal { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.7); justify-content: center; align-items: center; }
.qr-modal-content { background: #fff; padding: 20px; border-radius: 10px; text-align: center; max-width: 280px; } .qr-modal-content img { width: 100%; height: auto; }
.qr-modal-close { margin-top: 15px; padding: 8px 20px; background: #f37a7a; color: #fff; border: none; border-radius: 5px; cursor: pointer; font-weight: bold; }
.more-share-container { position: relative; display: inline-block; }
.more-share-menu { display: flex; position: absolute; bottom: 38px; right: 0; left: auto; transform: none; background: #fff; padding: 8px; border-radius: 20px; box-shadow: 0 4px 15px rgba(0,0,0,0.15); gap: 10px; z-index: 10; border: 1px solid #eee; opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0.2s; pointer-events: none; }
.poll-share-btns:hover .more-share-menu { opacity: 1; visibility: visible; pointer-events: auto; }
.more-share-menu::after { content: ''; position: absolute; bottom: -8px; right: 19px; left: auto; transform: none; border-width: 8px 8px 0; border-style: solid; border-color: #eee transparent transparent transparent; }
.share-modal-box .poll-share-container { text-align: left !important; } .share-modal-box .poll-share-btns { justify-content: flex-start !important; }
.share-modal-box .more-share-container { position: static !important; } .share-modal-box .more-share-menu { left: -8px !important; right: auto !important; transform: none !important; }
.share-modal-box .more-share-menu::after { left: 203px !important; right: auto !important; transform: none !important; }

/* --- Boutons Standardisés (Flexisite) --- */
.flex-btn { display: inline-block; padding: 8px 15px; border-radius: 7px; text-decoration: none; text-align: center; cursor: pointer; transition: all 0.2s; border: 1px solid transparent; font-weight: bold; font-size: 0.9em; box-sizing: border-box; line-height: 1.2; }
.flex-btn-primary { background-color: #ddd; color: #000 !important; border-color: #FF4D4D; } .flex-btn-primary:hover { background-color: #F7800077; color: #000 !important; }
.flex-btn-secondary { background-color: #fff; color: #FF4D4D !important; border-color: #FF4D4D; } .flex-btn-secondary:hover { background-color: #F7800077; color: #000 !important; }
.flex-btn-danger { background-color: #ffebee; color: #c62828 !important; border-color: #ffcdd2; } .flex-btn-danger:hover { background-color: #ffebee; color: #c62828 !important; }
.flex-btn-stretch { flex: 1 1 auto; margin: 2px; } input.flex-btn { width: auto; height: auto; }

/* --- Tableau de Bord (list_survey) --- */
.survey-filter-form { margin-bottom: 25px; display: flex; align-items: center; width: 100%; flex-wrap: wrap; gap: 10px; }
.survey-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 25px; max-width: 1800px; margin: 0 auto; }
.survey-card { border: 1px solid #e0e0e0; border-radius: 10px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: box-shadow 0.2s, transform 0.2s; }
.survey-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.08); transform: translateY(-2px); }
.survey-card-cover { width: 100%; height: 160px; object-fit: cover; background: #f5f5f5; }
.survey-card-body { padding: 15px; flex: 1; display: flex; flex-direction: column; }
.survey-card-title { font-size: 1.1em; font-weight: bold; margin: 0 0 10px 0; color: #333; }
.survey-card-meta { font-size: 0.95em; color: #666; margin-bottom: 5px; display: flex; align-items: center; justify-content: flex-start; gap: 5px; flex-wrap: wrap; } 
.survey-card-badges { margin: 10px 0; display: flex; flex-wrap: nowrap; gap: 8px; overflow: hidden; }
.survey-badge { background: #f5f5f5; padding: 3px 8px; border-radius: 12px; font-size: 0.85em; color: #555; white-space: nowrap; flex-shrink: 0; }
.survey-badge.active { background: #e8f5e9; color: #2e7d32; font-weight: bold; } .survey-badge.inactive { background: #ffebee; color: #c62828; font-weight: bold; } .survey-badge.locked { background: #e3f2fd; color: #1565c0; font-weight: bold; }

/*.survey-card-actions { margin-top: auto; border-top: 1px solid #eee; padding-top: 15px; display: flex; flex-wrap: wrap; gap: 8px; }
.survey-card-actions a, .survey-card-actions button { font-size: 0.9em; text-decoration: none; padding: 8px 5px; border-radius: 5px; transition: background 0.2s, color 0.2s; flex: 1 1 auto; text-align: center; white-space: nowrap; border: 1px solid transparent; cursor: pointer; }*/

/* [BTN-GRID] 3 colonnes egales : les 3 boutons restent alignes sur une seule ligne ;
   un libelle long passe sur 2 lignes A L'INTERIEUR de son bouton. Flex + min-height :
   texte centre verticalement et horizontalement, hauteur homogene (38px = hauteur
   standard des boutons du site). */
.survey-card-actions { margin-top: auto; border-top: 1px solid #eee; padding-top: 15px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.survey-card-actions a, .survey-card-actions button { font-size: 0.9em; text-decoration: none; padding: 8px 5px; border-radius: 5px; transition: background 0.2s, color 0.2s; text-align: center; border: 1px solid transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 38px; box-sizing: border-box; }


.survey-btn-participate { background: #f37a7a; color: #fff !important; border-color: #f37a7a; } .survey-btn-participate:hover { background: #d65f5f; color: #fff !important; }

/* [BTN-2NIVEAUX] Resultats et Partager partagent le meme style secondaire :
   fond gris clair visible sur la carte blanche, en regard du primaire Participer. */
.survey-btn-results { background: #f5f5f5; color: #555 !important; border-color: #ddd; } .survey-btn-results:hover { background: #e0e0e0; color: #333 !important; }
.survey-btn-share { background: #f5f5f5; color: #555 !important; border-color: #ddd; } .survey-btn-share:hover { background: #e0e0e0; color: #333 !important; }

/* Plus utilises dans list_survey (modifier/supprimer vivent desormais dans
   gestion_sondage) : conserves ici par securite, supprimables si rien ne les appelle. */
.survey-btn-edit { background: #fff; border: 1px solid #f37a7a; color: #f37a7a !important; } .survey-btn-edit:hover { background: #ffebee; color: #f37a7a !important; }
.survey-btn-delete { background: #ffebee; border: 1px solid #ffcdd2; color: #c62828 !important; } .survey-btn-delete:hover { background: #ffebee; color: #c62828 !important; }

/*.survey-filter-select { margin: 0; height: 32px; padding: 0 5px; box-sizing: border-box; border: 1px solid #f37a7a; border-radius: 7px; background-color: #FAFAFA; cursor: pointer; }
.survey-search-input { margin: 0; height: 32px; padding: 0 10px; flex: 1 1 150px; box-sizing: border-box; }
.survey-search-submit { margin: 0; height: 32px; padding: 0 15px; cursor: pointer; box-sizing: border-box; border: 1px solid #f37a7a; border-radius: 7px; background-color: #f37a7a; color: #fff; font-weight: bold; }*/
.survey-search-input { flex: 1 1 150px; }
@media (max-width: 768px) {
    .survey-search-input { flex: 1 1 auto; min-width: 0; width: auto; } .survey-search-submit { flex: 0 0 auto; width: auto; } .survey-filter-select { flex: 1 1 calc(33.33% - 10px); min-width: 0; width: 33.33%; }
}
.share-modal-overlay { display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; }
.share-modal-box { background: #fff; padding: 25px; border-radius: 10px; width: 90%; max-width: 600px; box-sizing: border-box; text-align: center; position: relative; max-height: 90vh; overflow-y: auto; overflow-x: hidden; }
.share-modal-close { position: absolute; top: 10px; right: 15px; font-size: 24px; color: #888; cursor: pointer; border: none; background: none; z-index: 10; }
.embed-code-container { margin-top: 15px; text-align: left; }
.embed-code-container label { font-weight: bold; font-size: 0.9em; display: block; margin-bottom: 5px; }
.embed-code-container textarea { width: 100%; height: 60px; box-sizing: border-box; font-size: 0.8em; padding: 8px; border-radius: 5px; border: 1px solid #ccc; background: #f9f9f9; resize: none; }

/* --- Formulaires & Boutons (Création de Sondage) --- */
.form-section { border: 1px solid #e0e0e0; border-radius: 8px; margin-bottom: 25px; overflow: hidden; }
.form-section-title { background: #f5f5f5; padding: 12px 20px; font-weight: bold; border-bottom: 1px solid #e0e0e0; margin:0 }

.form-section-body { padding: 20px; background: #fff; }
.btn-poll { display: inline-block; padding: 10px 25px; font-size: 1em; border-radius: 5px; text-decoration: none; cursor: pointer; vertical-align: middle; line-height: 1.2; box-sizing: border-box; border: 1px solid transparent; }
.btn-poll-primary { background: #f37a7a; color: #fff; border-color: #f37a7a; } .btn-poll-primary:hover { background: #d65f5f; }
.btn-poll-secondary { background: #fff; color: #666; border-color: #ccc; margin-left: 15px; } .btn-poll-secondary:hover { background: #f9f9f9; }
.btn-poll-danger { background: #c62828; color: #fff; border-color: #c62828; }
.poll-form-row { display: flex; flex-wrap: wrap; gap: 15px; align-items: center; margin-bottom: 15px; }
.poll-form-group { margin-bottom: 15px; }
.poll-form-label { font-weight: bold; display: block; margin-bottom: 5px; }
.poll-form-textarea { width: 100%; min-height: 80px; padding: 10px; border-radius: 5px; border: 1px solid #ccc; box-sizing: border-box; font-family: inherit; font-size: 1em; resize: vertical; }
.poll-alert-error { color: #c62828; margin-bottom: 15px; padding: 10px; background: #ffebee; border-radius: 5px; } .poll-alert-error p { margin: 0; }
.poll-preview-box { border: 2px dashed #bbb; padding: 15px; border-radius: 8px; background: #f9f9f9; text-align: center; }
.poll-image-preview { max-width: 300px; max-height: 200px; display: block; margin-bottom: 10px; border-radius: 6px; }
.poll-multilang-box { padding: 15px; background: #f9f9f9; border-radius: 8px; border: 1px solid #eee; }
.poll-nav-links-row { padding: 10px 0; }
.poll-lang-row { display: flex; align-items: center; gap: 10px; margin-bottom: 15px; }
.poll-lang-input-group { flex: 1; background: #f5f5f5; padding: 10px 15px; border-radius: 6px; border-left: 3px solid #ccc; }
.poll-lang-label { display: block; margin-bottom: 4px; }
.poll-lang-input { width: 100%; box-sizing: border-box; background: #fff; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; }
.poll-quest-row { display: flex; align-items: center; gap: 10px; margin-top: 5px; }
.poll-quest-input { width: 100%; box-sizing: border-box; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-family: inherit; }

/* --- Boutons de Layout --- */
.layout-radio { display: none; }
.layout-btn-group { display: inline-flex; border: 1px solid #ccc; border-radius: 5px; overflow: hidden; }
.layout-label { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; background: #fff; cursor: pointer; font-size: 0.9em; border-right: 1px solid #ccc; color: #555; transition: background 0.2s, color 0.2s; white-space: nowrap; }
.layout-label:last-child { border-right: none; }
.layout-radio:checked + .layout-label { background: #f37a7a; color: #fff; font-weight: bold; }

/* --- Page Catégories (poll_categories) --- */
.survey-cat-h2 { border-bottom: 2px solid #eee; padding-bottom: 10px; margin-bottom: 25px; color: #333; }
.survey-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 20px; }
.survey-cat-card { text-decoration: none; color: #333; display: block; padding: 0; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); transition: box-shadow 0.2s, transform 0.2s; }
.survey-cat-card:hover { box-shadow: 0 4px 15px rgba(0,0,0,0.1); transform: translateY(-2px); }
.survey-cat-card img { height: 100px; width: 100%; object-fit: cover; display: block; margin: 0; padding: 0; }
.survey-cat-card-body { padding: 15px; text-align: center; }
.survey-cat-card-title { font-size: 1.1em; font-weight: bold; color: #f37a7a; margin-bottom: 8px; }
.survey-cat-card-meta1 { font-size: 0.85em; color: #666; }
.survey-cat-card-meta2 { font-size: 0.75em; color: #999; }

@media (max-width: 480px) {
    .survey-cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .survey-cat-card img { height: 80px !important; }
    .survey-cat-card-body { padding: 10px !important; }
}

/** ------------------------------------------- **/
/** pour les petits écrans quelques adaptations **/
/** ------------------------------------------- **/

@media screen and (max-width:822px) {
    #footer_bottom_bar { flex-direction:column; align-items:center; }
    #menu_burger { display:flex; flex-direction:column; justify-content:center; gap:4px; width:26px; height:20px; margin-left:12px; cursor:pointer; order:2; }
    #menu_burger span { display:block; height:3px; background:#333; border-radius:2px; }
    #lg_menu { left:0; right:auto; }

    #bloc_lg { display:none; order:5; margin:10px 0 0 0; }
    .menu_toggle_cb:checked ~ #bloc_lg { display:block; }
    #bloc_compte { order:3; margin-left:auto; }

    #menu { display:none; order:4; flex-basis:100%; width:100%; margin:10px 0 0 0; }
    #menu ul { padding:0 }
    .menu_toggle_cb:checked ~ #menu { display:block; }
    #bloc_social { width:100%; }
    .hidden {display:none;}
    h1 { font-size:1.3rem; clear:both }
    h2 { font-size:1.2rem; clear:both }
    h3 { font-size:1rem; }
    body { font-size:0.9em; }
    li.bouton_menu { width: 95px; }
    .footer { width:100%; vertical-align: top; padding:1% }

    #footer_grid { flex-direction:column; align-items:center; text-align:center; gap:20px; }
    #bloc_social, #bloc_liens { text-align:center; flex-direction:column; } 
    #lien_bloc1, #lien_bloc2 { min-width:0; }
    #lien_social { justify-content:center; }
    #bloc_adr { text-align:left; }

    #content, #bloc_100, #bloc_A, #bloc_B, #bloc_AB { width:98%; margin:auto; }
    #col_2 { display:none; }
    #col_1b { margin:0; width:98% }
    .bloc_290 { margin:auto; width:48%; clear:both; margin-bottom: 1%;}
    img { margin:auto }
    /*.bloc_shop2, .bloc_shop1 { height:auto; width:48%; padding:2px; margin:0.3%; font-size:0.9em; float:left; }
    .bloc_shop1 { width:100%; height: auto; }
    .bloc_shop { width:100%; height: auto; }
     #art_cover { width:100%; height: auto; }
    */
    .bloc50 { width:98%; margin: 1%; padding:1%; display:inline-block;vertical-align:top; text-align:left; }
    /*   border-radius: 5px; border:1px solid #e0e0e0; box-shadow: 0 2px 5px rgba(0,0,0,0.05);   */
    .img50d { width:100%; float:right; border-radius: 5px; margin-left:0;}
    .bloc_art img { height:auto; width:250px; }
	.bloc_art_txt { width:calc(100% - 270px); margin: 0; }
	.bloc_art_txt h2 { margin:0; line-height: 1em; }
    .survey-filter-form { gap: 5px !important; margin-bottom: 15px !important; }
}

@media screen and (max-width: 420px) {
    #bloc_titre { font-size:1.7em; }
    /* #bloc_lg img {width:24px;}	#claim { font-size:0.8em; }#bloc_G, #bloc_Q, #bloc_C.bloc_190,  #lien_bloc1, #lien_bloc2 { width: 80%; } */
    form input[type=date] { width: 40%; }
    .bloc_290 { margin:auto; width:94%; margin-bottom: 1%;}
    .bloc_30 { margin:auto; width:31%; margin-right: 1.6%; padding:0; }
    #menu {  margin:0; width:100%; }
    #menu ul { padding:0 }
    .step_head { align-items: flex-start; }
    .step_head h3 { min-height: 4.2em; line-height: 1.4em; }
    .bloc_art img { margin:0; width:100%;  height: auto; }
	.bloc_art_txt { width:100%; margin: 0; }
	.bloc_art_txt h2 { margin-top: 2%; }
}

@media print {
    body { margin: 0; color: #000; background-color: #fff; font-size: 10pt; }
    #header, #footer, #bloc_annonce, #menu, #share-buttons { display:none; }
    .noprint { display:none; }
    #col_2 { display:none; }
    #col_1b { margin:0; width:98% }
    #print-footer { display:block ;position: absolute; width:100%; bottom: 0cm; font-size:7pt; } 
}

/* ==========================================
   Galerie des templates de sondages (poll_templates.php) — grille, cartes de démo et pagination. Rien ici n'est utilisé à l'intérieur des templates de sondage eux-mêmes (default.css, france.css...), qui restent autonomes pour l'intégration sur d'autres sites.
   ========================================== */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr));
    gap: 40px 30px;
    max-width: 1800px;
    margin: 0 auto;
}
.gallery-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    margin-bottom: 20px;
}
.gallery-item h2 {
    text-transform: capitalize;
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}
.gallery-preview {
    width: 100%;
    pointer-events: none;
}
.gallery-cta-link {
    align-self: flex-end;
    margin-top: 15px;
    text-decoration: none;
    color: #666;
    font-weight: bold;
    font-size: 0.95em;
    display: inline-block;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: all 0.2s;
}
.gallery-cta-link:hover {
    color: #f37a7a;
    border-bottom-color: #f37a7a;
}
.gallery-pagination {
    text-align: center;
    margin-top: 50px;
}
.gallery-pagination a {
    margin: 0 5px;
    text-decoration: none;
    color: #f37a7a;
}
.gallery-pagination a.nav {
    margin: 0 10px;
    font-weight: bold;
}
.gallery-pagination strong {
    margin: 0 5px;
    color: #333;
    font-size: 1.2em;
}

/* La carte de démo est plus étroite qu'un vrai widget en pleine
   largeur (700px) : default.css prévoit 300px par colonne + 30px
   d'écart pour les layouts gauche/droite, ce qui ne tient pas ici et
   fait retomber les colonnes l'une sous l'autre. On force donc des
   colonnes flexibles qui se partagent toujours la largeur disponible. */
.poll-survey.gallery-preview.poll-layout-left .poll-col-cover, .poll-survey.gallery-preview.poll-layout-left .poll-col-form, .poll-survey.gallery-preview.poll-layout-right .poll-col-cover, .poll-survey.gallery-preview.poll-layout-right .poll-col-form { flex: 1 1 0; min-width: 0; max-width: 50%; }
/* default.css force aussi un empilement vertical en dessous de 768px
   pour un vrai widget qui n'a pas la place sur mobile. Dans la
   galerie, on veut continuer à montrer la différence gauche/droite
   même sur petit écran : on neutralise cette media query ici,
   uniquement dans le contexte .gallery-preview. */
.poll-survey.gallery-preview.poll-layout-left .poll-container, .poll-survey.gallery-preview.poll-layout-right .poll-container { flex-direction: row !important; }
.poll-survey.gallery-preview.poll-layout-right .poll-col-cover { order: 2 !important; max-width: 50% !important; }
.poll-survey.gallery-preview.poll-layout-right .poll-col-form { order: 1 !important; }
.poll-survey.gallery-preview.poll-layout-left .poll-col-cover { order: 1 !important; max-width: 50% !important; }
.poll-survey.gallery-preview.poll-layout-left .poll-col-form { order: 2 !important; }

    .poll-help-wrap { position:relative; display:inline-block; }
    .poll-help-toggle { display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:#999; color:#fff; font-size:0.8em; font-weight:bold; cursor:pointer; user-select:none; vertical-align:middle; }
    .poll-help-toggle:hover, .poll-help-toggle:focus { background:#f37a7a; outline:none; }
    .poll-help-bubble { display:none; position:absolute; top:calc(100% + 7px); left:0; z-index:100; width:300px; max-width:75vw; padding:10px 12px; background:#333; color:#fff; font-size:0.85em; line-height:1.5; text-align:left; box-shadow:0 3px 12px rgba(0,0,0,0.3); }
    .poll-help-bubble.open { display:block; }
    .poll-help-bubble::after { content:""; position:absolute; top:-6px; left:10px; border:6px solid transparent; border-bottom-color:#333; border-top:none; }