/* votez.app : seuls compléments au gabarit Jixic (index-5), rien du gabarit n'est modifié */
.header-upper-style5 .acces-app { display: inline-block; color: #ffffff; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 500; line-height: 100px; text-transform: none; }
.header-upper-style5 .acces-app:hover { color: #EF883D; }
.social-share-links .title h5 { padding-bottom: 0; }
.friendly-interface-content .inner-content ul li h5 a { color: inherit; }
.subscribe-form-box a.btn-one { position: relative; display: block; width: 100%; background: #EF883D; color: #ffffff; font-size: 16px; line-height: 60px; font-weight: 600; border-radius: 5px; font-family: 'Poppins', sans-serif; transition: all 200ms linear; text-align: center; }
.subscribe-form-box a.btn-one:hover { background: #D27836; color: #ffffff; }
.footer-style5-bottom-content .liens-pied li { width: auto; height: auto; margin: 0 14px; }
.footer-style5-bottom-content .liens-pied li a { display: inline; width: auto; height: auto; line-height: 1.6; font-size: 15px; background: none; border: 0; color: #ffffff; }
.footer-style5-bottom-content .liens-pied li a:hover { color: #EF883D; background: none; }
.version-site { opacity: .6; }
/* Français : pas de majuscule automatique à chaque mot (le gabarit met « capitalize ») */
.main-menu.style4 .navigation > li > a, .main-menu.style4 .navigation > li > ul > li > a,
.banner-style5-area .inner .button a, .single-feature-box .button a, .testimonial-style4-content .inner-content .button a,
.brand-style4-title-box .button a, .subscribe-form-box .btn-one, .footer-style5-content .button a { text-transform: none; }
/* Menu : les libellés français sont plus longs que ceux du gabarit, on élargit la colonne du menu */
@media only screen and (min-width: 1200px) {
  /* v1.2 : l'en-tête prend la largeur du conteneur (1170 px) pour que le logo s'aligne sur la verticale du titre, comme l'en-tête collant */
  .header-upper-style5 { max-width: 1170px; padding: 0; }
  .header-upper-style5 .header-upper-left { max-width: 240px; }
  .header-upper-style5 .header-upper-middle { max-width: 640px; }
  .header-upper-style5 .header-upper-right { max-width: 240px; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) { .header-upper-style5 .header-upper-left { max-width: 200px; } .header-upper-style5 .header-upper-middle { max-width: 600px; } .header-upper-style5 .header-upper-right { display: none; } .main-menu.style4 .navigation > li { margin-right: 26px; } }
@media only screen and (max-width: 1199px) { .header-upper-style5 .acces-app { display: none; } }
/* Logo : fichier de Philippe (logo-votez_app_v4.png, 1723 × 460) affiché à la hauteur du logo du gabarit (41 px) */
.header-upper-style5 .header-upper-left .logo img, .sticky-header .logo img { width: 187px; height: auto; }
@media only screen and (max-width: 991px) { .header-upper-style5 .header-upper-left .logo img { width: 100%; height: auto; } }
/* v1.2 : marge haute du héros réduite (gabarit : 268 px) */
@media only screen and (min-width: 1200px) { .banner-style5-area { padding-top: 200px; } }
/* v1.4 : le mot « votez.app » du logo est calé sur la ligne de texte du menu (le fichier contient les arcs au-dessus du mot, ce qui faisait descendre le mot de 8 px sous la ligne) */
@media only screen and (min-width: 992px) {
  .header-upper-style5 .header-upper-left .logo img { position: relative; top: -8px; }
  .sticky-header .logo img { position: relative; top: -9px; }
}
/* v1.5 : bloc « 10 000 participants » sans logos partenaires, titre centré ; ligne « Rien à installer » rapprochée du bouton */
.brand-style4-title-box-centre { max-width: 700px; margin: 0 auto; text-align: center; padding: 0; }
.brand-style4-title-box-centre .brand-style4-title-box { margin: 0 auto; }
.banner-style5-area .inner .social-share-links { margin-top: 26px; }
.banner-style5-area .inner .social-share-links .title h5 { font-size: 16px; }
/* v1.5 : l'image du héros est composée (lecteur + téléphone) en 1082 × 771, toujours affichée entière */
.banner-style5-area .phone { background-size: contain; background-position: right bottom; }
@media only screen and (min-width: 1771px) { .banner-style5-area .phone { width: 900px; height: 665px; bottom: 120px; } }
@media only screen and (min-width: 1200px) and (max-width: 1770px) { .banner-style5-area .phone { width: 720px; height: 532px; bottom: 200px; right: 30px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-style5-area .phone { width: 480px; height: 355px; } }
@media only screen and (min-width: 768px) and (max-width: 991px) { .banner-style5-area .phone { width: 480px; height: 355px; } }
@media only screen and (max-width: 767px) { .banner-style5-area .phone { width: 320px; height: 237px; } }
.banner-style5-area .inner .button { padding-bottom: 0; }
.banner-style5-area .inner .social-share-links { margin-top: 22px; }
/* v1.6 : les trois écrans côte à côte (le gabarit superposait des avis, ici ce sont des textes à lire) */
@media (min-width: 992px) {
  .testimonial-style4-right-content { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; padding: 0; min-height: 0; }
  .single-testimonial-style4, .single-testimonial-style4.one, .single-testimonial-style4.two, .single-testimonial-style4.three { position: static; bottom: auto; height: auto; width: auto; max-width: none; padding: 34px 26px 26px; transition: transform .2s; }
  .single-testimonial-style4.one:hover, .single-testimonial-style4.three:hover { transform: translateY(-4px); }
  .single-testimonial-style4 .top { margin-bottom: 14px; }
}
@media (min-width: 992px) { .single-testimonial-style4 .top, .single-testimonial-style4 .text { position: static; height: auto; } .testimonial-style4-area .testimonial-style4-right-content { position: static; } }
.single-testimonial-style4 .quote-box { display: none; }
/* v1.7 : images en double définition (écrans Retina et téléphones), affichées à la taille des emplacements du gabarit */
.single-feature-box .icon img { width: 198px; height: auto; }
.about-style4-bg .shape2 img { width: 100%; height: auto; }
.interface-box1 img, .interface-box2 img { width: 404px; max-width: none; height: auto; }
.interface-box3 img { width: 633px; max-width: none; height: auto; }
/* Image du héros en WebP (152 Ko au lieu de 1,5 Mo en PNG) */
.banner-style5-area .phone { background-image: url(../images/slides/mobile.webp); }

/* ==================== v1.8 ==================== */
/* Orange des boutons et équivalents : #EF883D (survol #D27836), à la place de l'orange du gabarit */
.main-menu.style4 .navigation > li:hover > a, 
.main-menu.style4 .navigation > li.current > a { color: #EF883D; }
.header-upper-style5 .outer-search-box .seach-toggle:hover,
.header-upper-style5 .outer-search-box .seach-toggle.active { color: #EF883D; }
.header-upper-style5 .cart-box a:hover span:before { color: #EF883D; }
.header-upper-style5 .cart-box a span.number { background: #EF883D; }
.banner-style5-area .inner .button a { background: #EF883D; }
.banner-style5-area .inner .button a:hover { background: #D27836; }
.single-feature-box .count { color: #EF883D; }
.single-feature-box .button a:before { background: #EF883D; }
.single-feature-box .button a:after { background: #EF883D; }
.single-feature-box .button a:hover { color: #EF883D; }
.feature-carousel.owl-carousel.style1 .owl-nav [class*="owl-"]:hover { color: #EF883D; border-color: #EF883D; }
.about-style4-content .inner-content .content-box ul li:hover:before { color: #EF883D; }
.about-style4-content .inner-content .content-box ul li .icon { background: #EF883D; background: -moz-linear-gradient(top, #EF883D 0%, #EF883D 50%, #F6B98C 100%); background: -webkit-linear-gradient(top, #EF883D 0%, #EF883D 50%, #F6B98C 100%); background: linear-gradient(to bottom, #EF883D 0%, #EF883D 50%, #F6B98C 100%); }
.about-style4-content .inner-content .content-box ul li:hover .title h5 { color: #EF883D; }
.friendly-interface-content .inner-content ul li .icon span:before { color: #EF883D; }
.screenshot-carousel.owl-carousel.style1 .owl-nav [class*="owl-"]:hover { background: #EF883D; }
.app-setup-process-area .sec-title-style4 .border-box { background: #EF883D; background: -moz-linear-gradient(left, #EF883D 0%, #EF883D 50%, #F4AC78 100%); background: -webkit-linear-gradient(left, #EF883D 0%, #EF883D 50%, #F4AC78 100%); background: linear-gradient(to right, #EF883D 0%, #EF883D 50%, #F4AC78 100%); }
.single-app-setup-process .count-box { background: #EF883D; }
.testimonial-style4-content .inner-content .button a { background: #EF883D; }
.testimonial-style4-content .inner-content .button a:hover { background: #D27836; }
.single-testimonial-style4 .top .title-box span { color: #EF883D; }
.single-brand-item-style4 .overlay-content { background-color: #EF883D; }
.single-brand-item-style4 .overlay-content:before { color: #EF883D; }
.brand-style4-title-box .button a { background: #EF883D; }
.brand-style4-title-box .button a:hover { background: #D27836; }
.subscribe-form-box input[type="email"]:focus { border-color: #EF883D; }
.subscribe-form-box input[type="text"]:focus { border-color: #EF883D; }
.subscribe-form-box button { background: #EF883D; }
.subscribe-form-box button:hover { background: #D27836; }
.footer-style5-content .button a:hover { background: #EF883D; }
.footer-style5-bottom-content .footer-social-links ul li a:hover i { background: #EF883D; }
.footer-style5-bottom-content .copyright-text p a:hover { color: #EF883D; }
/* Montage : ombre douce sous l'écran questions (contour blanc dans l'image) */
.interface-box2 img { filter: drop-shadow(0 18px 30px rgba(22,14,60,.35)); }
/* Icônes votez.app (remplacent les icônes du gabarit) */
.votez-icone { display: inline-block; vertical-align: middle; }
.about-style4-content .inner-content .content-box ul li .icon { display: flex; align-items: center; justify-content: center; }
.about-style4-content .inner-content .content-box ul li .icon .votez-icone { width: 30px; height: 30px; color: #fff; --accent: #fff; }
.friendly-interface-content .inner-content ul li .icon { display: flex; align-items: center; justify-content: center; }
.friendly-interface-content .inner-content ul li .icon .votez-icone { width: 58px; height: 58px; color: #453188; --accent: #EF883D; position: relative; z-index: 2; }
.single-app-setup-process .icon .votez-icone { width: 76px; height: 76px; color: #453188; --accent: #EF883D; }
/* Titres de l'accordéon : place réservée au chevron à droite (le texte passait dessous) */
.about-style4-content .inner-content .content-box ul li .title { padding-right: 48px; }

/* ==================== v4.0 : page claire et homogène ==================== */
/* Titres : le titre du héros est le seul h1, les titres de sections sont des h2 (mêmes styles que le gabarit) */
h1.big-title, h2.title, .subscribe-area .title h2, .footer-style5-content h2 { display: block; }
.subscribe-area .title h2 { color: #443087; font-size: 36px; line-height: 44px; font-weight: 600; margin: 0 0 13px; font-family: 'Poppins', sans-serif; }
.footer-style5-content h2 { color: #ffffff; font-size: 36px; line-height: 48px; font-weight: 600; margin: 0 0 14px; font-family: 'Poppins', sans-serif; }

/* 1. Trois cartes fixes, dans l'ordre 01 02 03, toutes identiques (plus de carrousel, plus de carte surélevée) */
.trois-cartes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; max-width: 1170px; margin: 0 auto; padding-top: 30px; }
.trois-cartes .single-feature-box { padding: 57px 30px 50px; transform: none; overflow: hidden; z-index: 1; }
.trois-cartes .single-feature-box:before { bottom: 0; opacity: 1; transform: none; -webkit-box-shadow: 0px 4px 20px 4px #f2f2f2; box-shadow: 0px 4px 20px 4px #f2f2f2; }
.trois-cartes .single-feature-box:after { display: none; }
.trois-cartes .single-feature-box .button { opacity: 1; transform: none; }
.trois-cartes .single-feature-box .inner { display: flex; flex-direction: column; height: 100%; }
.trois-cartes .single-feature-box .text { flex: 1; }
@media (max-width: 991px) { .trois-cartes { grid-template-columns: 1fr; max-width: 420px; } }

/* 2. Bloc application : la console est dans la colonne de gauche (plus d'image flottante coupée) */
.about-style4-area { overflow: hidden; }
.about-style4-bg { z-index: 0; }
.console-visuel { position: relative; z-index: 2; padding: 40px 30px 0 0; }
.console-visuel img { width: 100%; height: auto; display: block; }
@media (min-width: 992px) { .about-style4-area .row { align-items: center; } .about-style4-content { padding-top: 0; } }
@media (max-width: 991px) { .console-visuel { padding: 20px 0 40px; } .about-style4-bg { display: none; } }

/* 3. Métiers : texte à gauche, une seule photo à droite, puis les cinq métiers sur une ligne (chacun mène à sa page) */
.friendly-interface-area { padding: 130px 0 120px; }
.friendly-interface-content { padding-top: 0; }
.friendly-interface-content .sec-title-style4 { padding-bottom: 32px; }
.salle-visuel { position: relative; z-index: 2; }
.salle-visuel img { width: 100%; height: auto; display: block; border-radius: 20px; -webkit-box-shadow: 0 20px 40px rgba(22,14,60,.28); box-shadow: 0 20px 40px rgba(22,14,60,.28); }
.metiers-liste { padding-top: 70px; }
.metiers-liste .inner-content ul { text-align: center; overflow: visible; }
.metiers-liste .inner-content ul li { float: none; display: inline-block; vertical-align: top; width: 150px; margin: 0 20px 20px; }
.metiers-liste .inner-content ul li .icon { margin: 0 auto; width: 120px; height: 120px; -webkit-box-shadow: 0 6px 16px rgba(22,14,60,.08); box-shadow: 0 6px 16px rgba(22,14,60,.08); }
.metiers-liste .inner-content ul li a { display: block; color: inherit; }
.metiers-liste .inner-content ul li h5 { transition: color .3s; }
.metiers-liste .inner-content ul li:hover h5 { color: #EF883D; }
.metiers-liste .inner-content ul li:hover .icon .votez-icone { color: #ffffff; --accent: #ffffff; transition: all 900ms ease 300ms; }
@media (max-width: 991px) { .friendly-interface-area { padding: 90px 0 80px; } .friendly-interface-content { padding-bottom: 0; } .salle-visuel { margin-top: 20px; } .metiers-liste { padding-top: 50px; } .friendly-interface-area .layer-image:before { display: none; } }
@media (max-width: 767px) { .metiers-liste .inner-content ul li { width: 140px; margin: 0 6px 17px; } }

/* 4. « Un grand événement demande une application à sa mesure » : titre centré comme les autres sections, trois cartes de même hauteur, sur le fond gris clair du gabarit ; remplace le bloc « trois écrans » et la bande « 10 000 participants » */
.testimonial-style4-area.v4-audience { background: #f6f5fa; padding: 120px 0 120px; }
.testimonial-style4-area.v4-audience .layer-shape { opacity: .5; }
.v4-audience .sec-title-style4.max-witdth { padding-bottom: 40px; }
.trois-atouts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.trois-atouts .single-testimonial-style4 { position: static; max-width: none; width: auto; padding: 36px 30px 30px; -webkit-box-shadow: 0px 2px 12px 4px #ecebf1; box-shadow: 0px 2px 12px 4px #ecebf1; }
.trois-atouts .single-testimonial-style4 .top, .trois-atouts .single-testimonial-style4 .text { position: static; height: auto; }
.trois-atouts .single-testimonial-style4 .top .title-box { padding-left: 0; }
.trois-atouts .single-testimonial-style4 .top .title-box h3 { line-height: 24px; }
.trois-atouts .single-testimonial-style4 .text { padding: 18px 0 0; }
.atouts-bouton { padding-top: 50px; }
@media (max-width: 991px) { .testimonial-style4-area.v4-audience { padding: 90px 0 80px; } .trois-atouts { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } .atouts-bouton { padding-top: 40px; } }
.friendly-interface-area .layer-image:before { display: none; }
/* Photo de la salle : largeur limitée pour équilibrer la colonne */
.salle-visuel { max-width: 470px; margin-left: auto; }
@media (max-width: 991px) { .salle-visuel { margin: 20px auto 0; } }

/* 5. « Parlons de votre prochain Direct » : bouton toujours visible (animation d'apparition retirée), section moins haute */
.subscribe-area { padding-top: 120px; }
.subscribe-form-box a.btn-one { max-width: 330px; margin: 0 auto; }
/* 6. Héros sur mobile et tablette : l'image (lecteur + téléphone) vient sous le texte, centrée et entière, au lieu d'être coupée ou de chevaucher le titre */
@media (max-width: 991px) {
  .banner-style5-area { height: auto; padding-top: 70px; padding-bottom: 50px; }
  .banner-style5-area .phone { position: relative; bottom: auto; right: auto; width: 100%; max-width: 520px; height: auto; aspect-ratio: 1082 / 800; margin: 24px auto 0; background-position: center; }
  .banner-style5-area .inner .button { padding-bottom: 0; }
  .banner-style5-area .round-box { display: none; }
}
/* 7. Mobile : espaces entre sections resserrés (le gabarit prévoyait des images flottantes qui n'existent plus) */
@media (max-width: 767px) {
  .features-area { padding-bottom: 50px; }
  .subscribe-area { padding-top: 90px; padding-bottom: 170px; }
  .footer-style5-area { padding-top: calc(55.2vw - 50px); }
  .footer-style5-area .layer-outer { top: -110px; height: 0; max-height: none; padding-bottom: 55.2%; }
  .footer-style5-content h2 br { display: none; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .footer-style5-area .layer-outer { top: -180px; height: 0; max-height: none; padding-bottom: 55.2%; }
  .footer-style5-area { padding-top: calc(55.2vw - 120px); }
  .subscribe-area { padding-bottom: 240px; }
}
@media (min-width: 992px) and (max-width: 1199px) { .metiers-liste .inner-content ul li { margin: 0 10px 20px; } }

/* ==================== v4.1 ==================== */
/* Boutons : hauteur 52 px au lieu de 60 (marge haute et basse réduites), partout */
.banner-style5-area .inner .button a, .testimonial-style4-content .inner-content .button a, .brand-style4-title-box .button a,
.subscribe-form-box a.btn-one, .footer-style5-content .button a { line-height: 52px; }
/* Héros : image recomposée (mobile-v41.webp, 2164 × 1660 pour 1082 × 830 affichés) : téléphone agrandi (+18 %), lecteur un peu réduit (-12 %), ombres plus diffuses (deux couches) */
.banner-style5-area .phone { background-image: url(../images/slides/mobile-v41.webp); }
@media only screen and (min-width: 1771px) { .banner-style5-area .phone { width: 900px; height: 690px; } }
@media only screen and (min-width: 1200px) and (max-width: 1770px) { .banner-style5-area .phone { width: 720px; height: 552px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-style5-area .phone { width: 480px; height: 368px; } }
@media only screen and (max-width: 991px) { .banner-style5-area .phone { aspect-ratio: 1082 / 830; } }
/* Badge LIVE avec point clignotant, posé en HTML sur le coin du lecteur (position en pourcentage de l'image) */
.banner-style5-area .phone .badge-live { position: absolute; left: 26%; top: 7.8%; display: inline-flex; align-items: center; gap: .45em; padding: .3em .7em .3em .6em; border-radius: 999px; background: rgba(12,10,30,.72); color: #ffffff; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; line-height: 1; z-index: 4; }
.banner-style5-area .phone .badge-live i { display: block; width: .6em; height: .6em; border-radius: 50%; background: #E0243A; box-shadow: 0 0 0 0 rgba(224,36,58,.6); animation: votez-live 1.6s ease-out infinite; }
@keyframes votez-live { 0% { box-shadow: 0 0 0 0 rgba(224,36,58,.6); opacity: 1; } 70% { box-shadow: 0 0 0 .55em rgba(224,36,58,0); opacity: 1; } 100% { box-shadow: 0 0 0 0 rgba(224,36,58,0); opacity: .55; } }
@media only screen and (min-width: 1771px) { .banner-style5-area .phone .badge-live { font-size: 16px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-style5-area .phone .badge-live { font-size: 10px; } }
@media only screen and (max-width: 767px) { .banner-style5-area .phone .badge-live { font-size: 9px; } }

/* ==================== v4.2 ==================== */
/* Héros : les ombres ne sont plus dans l'image (le WebP les compressait en paliers visibles sur le dégradé) ; le lecteur et le téléphone sont deux images séparées, l'ombre est calculée par le navigateur (drop-shadow, sans palier) */
.banner-style5-area .phone { background-image: none; }
.banner-style5-area .phone .hero-lecteur, .banner-style5-area .phone .hero-telephone { position: absolute; height: auto; display: block; max-width: none; }
.banner-style5-area .phone .hero-lecteur { left: 24.17%; top: 5.42%; width: 73.98%; z-index: 1; filter: drop-shadow(0 14px 10px rgba(22,14,60,.18)) drop-shadow(0 40px 50px rgba(22,14,60,.30)); }
.banner-style5-area .phone .hero-telephone { left: 2.77%; top: 24.1%; width: 25.83%; z-index: 2; filter: drop-shadow(0 14px 10px rgba(22,14,60,.18)) drop-shadow(0 40px 50px rgba(22,14,60,.30)); }
/* Pied : écran scène aux proportions d'une diapositive projetée (question 60 px et réponses 52 px sur 1080, mockup-scene-v42.webp) */

/* ==================== v4.3 ==================== */
/* Accordéon : 4e ligne « marque blanche », même dégradé violet que la 2e (le gabarit n'a pas de style4) */
.about-style4-content .inner-content .content-box ul li.style4 .icon { background: #453188; background: linear-gradient(to bottom, #453188 0%, #5B50B4 50%, #7675EA 100%); }

/* ==================== v4.4 : icônes redessinées, style 1 « aplats bicolores » ==================== */
.votez-icone { --ic-0: #ffffff; --ic-1: #453188; --ic-2: #C9C4F2; --ic-3: #EF883D; }
/* Accordéon : quatre carrés au même dégradé violet, dessin en blanc (forme secondaire blanche translucide, accent orange) */
.about-style4-content .inner-content .content-box ul li .icon,
.about-style4-content .inner-content .content-box ul li.style2 .icon,
.about-style4-content .inner-content .content-box ul li.style3 .icon,
.about-style4-content .inner-content .content-box ul li.style4 .icon { background: #453188; background: linear-gradient(160deg, #453188 0%, #7675EA 100%); }
.about-style4-content .inner-content .content-box ul li .icon .votez-icone { width: 32px; height: 32px; --ic-0: #453188; --ic-1: #ffffff; --ic-2: rgba(255,255,255,.45); --ic-3: #EF883D; }
/* Métiers : tuiles blanches arrondies, dessin bicolore ; au survol le gabarit passe la tuile en dégradé, le dessin passe en blanc */
.metiers-liste .inner-content ul li .icon { border-radius: 18px; overflow: hidden; }
.metiers-liste .inner-content ul li .icon:before { border-radius: 18px; }
.metiers-liste .inner-content ul li .icon .votez-icone { width: 60px; height: 60px; transition: all 900ms ease 300ms; }
.metiers-liste .inner-content ul li:hover .icon .votez-icone { --ic-0: #453188; --ic-1: #ffffff; --ic-2: rgba(255,255,255,.45); --ic-3: #EF883D; color: inherit; }
/* Quatre temps : cercles blancs, dessin bicolore */
.single-app-setup-process .icon .votez-icone { width: 72px; height: 72px; }
/* Boutons : icônes lecture et téléphone redessinées (remplacent Font Awesome) */
.votez-icone.ic-btn { width: 14px; height: 14px; margin-right: 10px; position: relative; top: -1px; }
.footer-style5-content .button a .votez-icone.ic-btn { width: 16px; height: 16px; margin-right: 8px; top: -2px; }

/* ==================== v4.5 ==================== */
/* En-tête moins haut : 100 px au lieu de 140 sur ordinateur (liens du menu 40 px de marge au lieu de 60), 70 px au lieu de 90 sur mobile et tablette */
@media (min-width: 992px) {
  .header-upper-style5 .main-menu.style4 .navigation > li > a { padding: 40px 0; }
  .header-upper-style5 .acces-app { line-height: 100px; }
  .header-upper-style5 .header-upper-left .logo { line-height: 100px; }
}
@media (max-width: 991px) {
  .main-menu .navbar-header { min-height: 70px; }
  .main-menu .navbar-header .navbar-toggle { margin: 14px 0; }
  .header-upper-style5 .header-upper-left .logo { margin: 16px 0 14px; }
}
/* Pied : mention discrète (13 px, normale, blanc à 70 %) sans « © Images Pro, Paris » */
.footer-style5-bottom-content .copyright-text p { font-size: 13px; font-weight: 400; color: rgba(255,255,255,.7); }
.footer-style5-bottom-content .copyright-text p a { color: rgba(255,255,255,.85); }

/* ==================== v4.6 ==================== */
/* Espaces entre sections réduits d'environ un tiers sur ordinateur (moins de défilement) */
@media (min-width: 992px) {
  .banner-style5-area { height: 960px; padding-bottom: 200px; }
  .features-area { padding-top: 50px; padding-bottom: 70px; }
  .about-style4-area { padding: 40px 0 70px; }
  .friendly-interface-area { padding: 90px 0 80px; }
  .metiers-liste { padding-top: 50px; }
  .app-screenshot-area { padding: 80px 0 60px; }
  .app-setup-process-area { padding: 90px 0 90px; }
  .testimonial-style4-area.v4-audience { padding: 80px 0; }
  .subscribe-area { padding-top: 80px; padding-bottom: 300px; }
  .footer-style5-content { padding-bottom: 60px; }
  .sec-title-style4.max-witdth, .sec-title-style4 { padding-bottom: 40px; }
  .features-area .sec-title-style4.max-witdth { padding-bottom: 20px; }
}
@media (min-width: 1200px) { .banner-style5-area { padding-top: 180px; } }
/* Quatre temps : ronds réduits à 120 px, icône centrée par flex, décalage en quinconce ramené à 50 px, pastille du numéro recalée */
.single-app-setup-process { width: 200px; }
.single-app-setup-process .icon { width: 120px; height: 120px; line-height: normal; display: flex; align-items: center; justify-content: center; }
.single-app-setup-process .icon .votez-icone { width: 54px; height: 54px; display: block; }
.single-app-setup-process .count-box { top: -4px; right: 14px; }
.single-app-setup-process.martop80 { margin-top: 50px; }
.single-app-setup-process h5 { margin-top: 20px; }
.app-setup-process:before { display: none; }
/* Pied : marge sous la ligne des liens, avant la mention */
.footer-style5-bottom-content .liens-pied { margin-bottom: 22px; }
.footer-style5-bottom-content .copyright-text { padding-top: 0; }
.footer-style5-bottom-content { padding-bottom: 36px; }

/* ==================== v4.7 ==================== */
/* Quatre temps : diamètre des ronds ramené à 96 px (icône 44 px), pastille 30 px */
.app-setup-process .single-app-setup-process .icon { width: 96px; height: 96px; }
.app-setup-process .single-app-setup-process .icon .votez-icone { width: 44px; height: 44px; }
.app-setup-process .single-app-setup-process .count-box { width: 30px; height: 30px; line-height: 30px; font-size: 14px; top: -2px; right: 30px; }
.app-setup-process .single-app-setup-process.martop80 { margin-top: 40px; }

/* ==================== v4.8 ==================== */
/* Héros : illustration descendue de 60 px sur ordinateur */
@media only screen and (min-width: 1771px) { .banner-style5-area .phone { bottom: 60px; } }
@media only screen and (min-width: 1200px) and (max-width: 1770px) { .banner-style5-area .phone { bottom: 140px; } }
@media only screen and (min-width: 992px) and (max-width: 1199px) { .banner-style5-area .phone { bottom: 140px; } }

/* ==================== v4.9 ==================== */
/* Premier conteneur sous le héros (« Le vote s'affiche sur le lecteur du Direct ») : marge haute 100 px au lieu de 50 sur ordinateur, 70 px sur mobile */
@media (min-width: 992px) { .features-area { padding-top: 100px; } }
@media (max-width: 991px) { .features-area { padding-top: 70px; } }

/* ==================== v4.10 ==================== */
/* Trois cartes : vignettes de l'application en pleine largeur de carte (620 × 470 affichées à 310 × 235), numéro du gabarit réduit */
.trois-cartes .single-feature-box { padding: 68px 30px 44px; }
.trois-cartes .single-feature-box .icon img { width: 100%; max-width: 300px; height: auto; }
.trois-cartes .single-feature-box .count { width: 72px; height: 58px; line-height: 58px; font-size: 20px; border-bottom-left-radius: 40px; }
.trois-cartes .single-feature-box .icon { padding-bottom: 20px; }
/* Console : image détourée sans ombre incorporée (console-v410.webp), ombre calculée par le navigateur ; plus de rectangle clair ni de bord coupé */
.console-visuel img { filter: drop-shadow(0 12px 10px rgba(22,14,60,.14)) drop-shadow(0 36px 44px rgba(22,14,60,.24)); border-radius: 12px; }

/* ==================== v4.13 ==================== */
/* Héros : lecteur moins large (1414 px dans l'image de 2164), panneau de vote agrandi de 35 %, téléphone à la même place, 6 % moins haut */
.banner-style5-area .phone .hero-lecteur { left: 32.9%; top: 5.4%; width: 65.3%; }
.banner-style5-area .phone .hero-telephone { left: 3.4%; top: 26.5%; width: 24.3%; }
.banner-style5-area .phone .badge-live { left: 35%; }
/* Pied : plus de filet blanc sous la ligne des liens */
.footer-style5-bottom-content:before, .footer-style5-bottom-content:after { display: none; }
/* Sous-menu Métiers : plus de points (le gabarit dessinait deux points au survol, avant et après le libellé) */
.main-menu .navigation > li > ul > li > a:before, .main-menu .navigation > li > ul > li > a:after { display: none !important; }
.main-menu .navigation > li > ul > li:hover > a { padding-left: 0; }
.main-menu .navigation > li > ul > li.current > a { color: #EF883D; }
/* Menu collant (à l'intérieur des pages) : moins haut (70 px), logo réduit, page courante en orange comme en haut de page */
.sticky-header .logo { padding: 14px 0 13px; }
.sticky-header .logo img { width: 150px; }
.sticky-header .main-menu.style4 .navigation > li > a { padding: 25px 0; }
.sticky-header .main-menu.style4 .navigation > li.current > a, .sticky-header .main-menu.style4 .navigation > li:hover > a { color: #EF883D; }
@media only screen and (min-width: 992px) { .sticky-header .logo img { top: -6px; } }
/* Sections qui se suivent avec le même fond : marge réduite entre elles (classe « suite » posée par script) */
section.suite { padding-top: 0 !important; }
.page-corps section.suite { padding-top: 10px !important; }

/* ==================== v4.14 ==================== */
/* Menu collant : liens alignés sur la ligne du mot « votez.app » du logo (les arcs sont au-dessus), en-tête de 60 px */
.sticky-header .logo { padding: 12px 0 8px; }
.sticky-header .logo img { width: 150px; top: 0 !important; }
.sticky-header .main-menu.style4 .navigation > li > a { padding: 24px 0 16px; }
.sticky-header .main-menu.style4 .navigation > li > ul { top: 100%; }

/* ==================== v4.15 ==================== */
/* Héros : le lecteur passe en partie sous le téléphone (décalé vers la gauche, le téléphone reste devant) */
.banner-style5-area .phone .hero-lecteur { left: 20%; top: 4%; width: 65.3%; z-index: 1; }
.banner-style5-area .phone .hero-telephone { left: 3.4%; top: 26.5%; width: 24.3%; z-index: 2; }
.banner-style5-area .phone .badge-live { left: 22.2%; top: 6.4%; }

/* ==================== v4.16 ==================== */
/* Menu collant : 64 px (12 px au-dessus et au-dessous du logo), liens centrés sur le mot « votez.app » du logo */
.sticky-header .logo { padding: 12px 0 12px; }
.fixed-header .sticky-header .main-menu.style4 .navigation > li > a, .sticky-header .main-menu.style4 .navigation > li > a { padding: 27px 0 17px; line-height: 20px; }
/* Pages intérieures : le bandeau montre le bas de l'image de fond (la vague), plus le haut tronqué */
.entete-page-v4 { background-position: center bottom !important; }
/* Sections qui se suivent : seules deux couleurs de fond opaques identiques sont resserrées (plus les sections transparentes) */

/* ==================== v4.28 ==================== */
/* Accueil : principales fonctions sous l'accroche */
.banner-style5-area .hero-fonctions { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; max-width: 520px; }
.banner-style5-area .hero-fonctions li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px 6px 11px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); color: #fff; font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 500; line-height: 20px; }
.banner-style5-area .hero-fonctions li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #EF883D; }
@media only screen and (max-width: 767px) { .banner-style5-area .hero-fonctions { gap: 6px; } .banner-style5-area .hero-fonctions li { font-size: 13px; padding: 5px 12px 5px 10px; } }
.banner-style5-area .hero-tagline { margin: -6px 0 26px; font-family: 'Poppins', sans-serif; font-size: 20px; line-height: 30px; font-weight: 500; color: rgba(255,255,255,.92); max-width: 520px; }
@media only screen and (max-width: 767px) { .banner-style5-area .hero-tagline { font-size: 17px; line-height: 26px; margin: 0 auto 20px; } }
/* Pied de page : écosystème Images Pro */
.footer-style5-bottom-content .ecosysteme-pied { padding-top: 0; }
.footer-style5-bottom-content .ecosysteme-pied p { font-size: 13px; line-height: 22px; color: rgba(255,255,255,.7); margin: 0 0 8px; }
.footer-style5-bottom-content .ecosysteme-pied a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255,255,255,.35); text-underline-offset: 3px; }
.footer-style5-bottom-content .ecosysteme-pied a:hover { color: #EF883D; }
/* ==================== v4.31 ==================== */
/* En-tête : « Accéder à l'application » en bouton transparent à contour fin blanc, nouvel onglet */
.header-upper-style5 .acces-app { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1.5px solid rgba(255,255,255,.85); border-radius: 7px; line-height: 34px; color: #fff; background: transparent; transition: background .2s, color .2s, border-color .2s; }
.header-upper-style5 .acces-app:hover { background: #fff; color: #453188; border-color: #fff; }
.header-upper-style5 .acces-app { margin-top: 0; position: relative; top: 0; }

/* Accueil : marge sous « Logiciel en ligne… » égale à la marge au-dessus (22 px) */
.banner-style5-area .hero-fonctions { margin-top: 22px; }

/* ==================== v4.33 · mobile et tablette (agence) ==================== */
@media (max-width: 1199px) { .header-upper-style5 .acces-app { display: none !important; } }
@media (min-width: 1200px) { .navigation .menu-acces { display: none !important; } }
@media (max-width: 991px) {
  .header-upper-style5 { padding: 0; }
  .header-upper-style5 .outer-container { padding: 0 20px; position: relative; }
  .header-upper-style5 { height: 70px; }
  .header-upper-style5 .header-upper-left { position: static; float: none; max-width: none; padding: 0; margin: 0; height: 70px; display: flex; align-items: center; }
  .header-upper-style5 .header-upper-left .logo { padding: 0; margin: 0; }
  .header-upper-style5 .header-upper-left .logo img { position: static; }
  .header-upper-style5 .header-upper-left .logo img, .sticky-header .logo img { width: 150px; }
  .header-upper-style5 .header-upper-middle { float: none; max-width: none; position: static; }
  .header-upper-style5 .outer-container { height: 70px; }
  .main-header .main-menu, .main-header .nav-outer, .main-header .main-menu.style4, .header-upper-style5 .nav-outer { position: static !important; }
  .header-upper-style5 .header-upper-right { display: none; }
  .main-menu .navbar-header { position: static; min-height: 0; }
  .main-menu .navbar-header .navbar-toggle, .main-menu .navbar-header .navbar-toggle.mar-right0 { position: absolute; top: 14px; right: 20px; margin: 0; padding: 8px 8px; background: transparent; border: 1.5px solid rgba(255,255,255,.7); border-radius: 8px; width: 44px; height: 42px; }
  .main-menu .navbar-header .navbar-toggle .icon-bar { width: 22px; height: 2px; margin: 4px 3px; background: #fff; border-radius: 2px; }
  .main-menu .navbar-collapse { position: absolute; left: 20px; right: 20px; top: 66px; max-height: calc(100vh - 90px); z-index: 50; }
  .main-menu .navbar-collapse > .navigation { background: #2F2266; border-radius: 14px; padding: 8px 0; box-shadow: 0 20px 50px rgba(20,12,60,.45); overflow: hidden; }
  .main-menu .navbar-collapse > .navigation > li { border-top: 1px solid rgba(255,255,255,.08) !important; }
  .main-menu .navbar-collapse > .navigation > li:first-child { border-top: 0 !important; }
  .main-menu .navbar-collapse > .navigation > li > a { padding: 14px 20px !important; color: #fff !important; font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 600; line-height: 22px; background: transparent !important; }
  .main-menu .navbar-collapse > .navigation > li.current > a, .main-menu .navbar-collapse > .navigation > li > a:hover { color: #FDA501 !important; }
  .main-menu .navbar-collapse > .navigation > li.menu-acces > a { color: #FDA501 !important; }
  .main-menu .navbar-collapse > .navigation > li.menu-acces > a::after { content: " ↗"; font-weight: 400; }
  .main-menu .navbar-collapse > .navigation > li > ul { background: rgba(0,0,0,.18) !important; border: 0 !important; padding: 4px 0; }
  .main-menu .navbar-collapse > .navigation > li > ul > li { border-top: 0 !important; }
  .main-menu .navbar-collapse > .navigation > li > ul > li > a { padding: 11px 20px 11px 34px !important; color: rgba(255,255,255,.88) !important; font-size: 15px; font-weight: 500; background: transparent !important; }
  .main-menu .navigation li.dropdown .dropdown-btn { position: absolute; right: 10px; top: 8px; width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: transparent; color: #fff; text-align: center; line-height: 32px; cursor: pointer; }
  .main-menu .navigation li.dropdown .dropdown-btn span { color: #fff; font-size: 14px; }
  .main-menu .navigation li.dropdown .dropdown-btn span::before { content: "⌄"; font-family: inherit; }
  .banner-style5-area .inner .big-title { font-size: 38px; line-height: 46px; padding-bottom: 22px; }
  .sec-title-style4 .title, .sec-title-style4 .title.clr-white { font-size: 26px; line-height: 34px; padding-bottom: 14px; margin-top: 0; }
  .sec-title-style4 .text p { font-size: 16px; line-height: 26px; }
  .sec-title-style4 .border-box { margin-bottom: 18px; }
  .features-area, .about-style4-area, .friendly-interface-area, .app-screenshot-area, .app-setup-process-area, .testimonial-style4-area.v4-audience, .subscribe-area { padding: 60px 0 !important; }
  .banner-style5-area { margin-top: -70px; padding-top: 104px; padding-bottom: 30px; background-size: cover; background-position: center bottom; }
  .banner-style5-area .inner .big-title { padding-top: 0; }
  html, body { overflow-x: hidden; }
  .main-menu .navbar-collapse { max-width: calc(100vw - 40px); }
  .main-header.style5 { position: relative; z-index: 60; }
  .banner-style5-area .inner .button a { width: 100%; text-align: center; }
  .about-style4-content { padding-top: 10px; }
  .console-visuel { padding: 0 0 28px !important; z-index: 3; }
  .about-style4-content { margin-top: 0; }
  .features-area .trois-cartes { margin-bottom: 0; }
  .single-feature-box.v4-carte:last-child { margin-bottom: 0; }
  .about-style4-content .inner-content .content-box ul li { padding: 0 0 0 60px; min-height: 60px; margin-bottom: 14px; }
  .about-style4-content .inner-content .content-box ul li .title { padding: 12px 40px 12px 16px; width: 100%; }
  .about-style4-content .inner-content .content-box ul li .title h5 { font-size: 15px; line-height: 21px; }
  .about-style4-content .inner-content .content-box ul li:before { right: 14px; }
  .console-visuel img { border-radius: 10px; }
  .about-style4-area { overflow: visible; }
  .metiers-liste .inner-content ul { display: flex; flex-wrap: wrap; justify-content: center; }
  .footer-style5-content h2 { font-size: 24px; line-height: 32px; }
  .footer-style5-content .button a { display: block; width: 100%; margin: 0 0 12px; }
  .footer-style5-bottom-content .liens-pied li { margin: 0 8px 8px; }
  .footer-style5-bottom-content .ecosysteme-pied p, .footer-style5-bottom-content .copyright-text p { font-size: 12px; line-height: 20px; padding: 0 20px; }
}
@media (max-width: 767px) {
  .banner-style5-area .inner .big-title { font-size: 34px; line-height: 42px; }
  .banner-style5-area .inner .social-share-links .title h5 { font-size: 15px; line-height: 24px; }
  .sec-title-style4 .title, .sec-title-style4 .title.clr-white { font-size: 24px; line-height: 32px; }
  .single-feature-box.v4-carte { margin-bottom: 30px; }
}
@media (min-width: 768px) and (max-width: 991px) {
  .banner-style5-area .inner .button a { width: auto; min-width: 320px; }
  .features-area .trois-cartes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .single-feature-box.v4-carte { margin-bottom: 0; }
  .metiers-liste .inner-content ul li { width: 150px; }
}
/* ==================== v4.35 · en-tête ordinateur et portable : place pour le menu en Poppins ==================== */
@media (min-width: 1200px) {
  .header-upper-style5 .header-upper-left { max-width: 190px; }
  .header-upper-style5 .header-upper-middle { max-width: 690px; }
  .header-upper-style5 .header-upper-right { max-width: 230px; }
  .header-upper-style5 .main-menu.style4 .navigation > li { margin-right: 34px; }
  .header-upper-style5 .main-menu.style4 .navigation > li:nth-last-child(2) { margin-right: 0; }
  .main-menu.style4 .navigation > li > a { white-space: nowrap; }
  .header-upper-style5 .header-upper-middle .nav-outer { display: flex; justify-content: center; }
  .header-upper-style5 .main-menu.style4 { float: none; }
}
@media (min-width: 992px) and (max-width: 1199px) {
  .header-upper-style5 .header-upper-left { max-width: 170px; }
  .header-upper-style5 .header-upper-middle { max-width: 560px; }
  .header-upper-style5 .header-upper-right { display: block; max-width: 200px; }
  .header-upper-style5 .acces-app { display: inline-flex !important; height: 34px; padding: 0 12px; font-size: 14px; line-height: 32px; }
  .navigation .menu-acces { display: none !important; }
  .header-upper-style5 .main-menu.style4 .navigation > li { margin-right: 18px; }
  .header-upper-style5 .main-menu.style4 .navigation > li:nth-last-child(2) { margin-right: 0; }
  .main-menu.style4 .navigation > li > a { white-space: nowrap; font-size: 15px; }
  .sticky-header .main-menu.style4 .navigation > li { margin-right: 18px; }
}