/*
 * Fiche produit (/videoshow, /hint5-min, ...) : habillage assorti au nouveau menu (2 novembre 2026).
 * Fond blanc, carte arrondie avec un trait aux couleurs du logo en haut, texte bleu marine, boutons en pilule.
 * Rien n'est supprime des anciennes regles (style.css, styleY.css) : ce fichier passe apres elles. Pour revenir
 * en arriere, retirer la ligne page-logiciel.css (et page-logiciel.js) tout en haut de templates/Logiciels/view.php.
 * La couleur propre a chaque categorie (--accent) ne sert plus que pour de petites touches.
 */
#popup {
  --accent: #4478b4;
  --navy: #2d4770;
  --line: #e3e9f1;
  background: #fff !important;
  background-image: none !important;
}
#popup.audioPopup  { --accent: #04b6d0; }
#popup.orlPopup    { --accent: #7fb300; }
#popup.orthoPopup  { --accent: #ff8400; }
#popup.famillePopup{ --accent: #70217c; }
#popup.proPopup    { --accent: #4478b4; }

/* carte principale */
#popup #infoLogiciel {
  position: relative;
  max-width: 1170px;
  margin: 48px auto 40px;
  padding: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(45, 71, 112, .12);
  overflow: hidden;
  color: var(--navy);
}
#popup #infoLogiciel::before {
  content: "";
  display: block;
  height: 5px;
  background: linear-gradient(90deg, #2d4770 0 16.66%, #e9002d 16.66% 33.33%, #7da4cf 33.33% 50%, #f2a912 50% 66.66%, #70217c 66.66% 83.33%, #a3b92a 83.33% 100%);
}

/* en-tete : logo, titre, prix et bouton Acheter sur une ligne */
#popup .headerLogiciel {
  float: none;
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  height: auto;
  padding: 26px 34px 18px;
  background: #fff !important;
  color: var(--navy);
}
#popup .headerLogiciel > div { float: none !important; max-width: none !important; width: auto !important; display: block !important; }
#popup .headerLogiciel #logo {
  position: static;
  height: 118px;
  width: auto;
  left: auto;
  bottom: auto;
  padding: 0;
  filter: drop-shadow(0 6px 10px rgba(45, 71, 112, .22));
}
#popup .headerLogiciel .en_tete_logiciel {
  flex: 1 1 auto;
  position: static;
  top: auto;
  margin: 0;
  width: auto;
  max-width: none;
}
#popup .headerLogiciel .en_tete_logiciel h2 {
  margin: 0 0 4px;
  font-size: 36px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--navy);
}
#popup .headerLogiciel .en_tete_logiciel h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  color: #5d7396;
}
/* prix : plus de bulle, un texte simple */
#popup .headerLogiciel .espacePrixAge {
  position: static;
  display: block;
  min-width: 0 !important;
  left: auto;
  top: auto;
}
#popup .headerLogiciel .espacePrixAge > div { margin: 0 !important; padding: 0 !important; width: auto !important; float: none !important; }
#popup .headerLogiciel .espacePrixAge p,
#popup .headerLogiciel .espacePrixAge #prix_2,
#popup .headerLogiciel .espacePrixAge #prixTTC_2 {
  position: static;
  display: block;
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0 !important;
  border-radius: 0;
  background: none !important;
  color: var(--navy) !important;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  text-align: right;
  white-space: nowrap;
}
#popup .headerLogiciel .espacePrixAge #prix_2 font,
#popup .headerLogiciel .espacePrixAge p font { font-size: 12px !important; font-weight: 600; letter-spacing: .08em; color: #5d7396; }
#popup .headerLogiciel .espacePrixAge #age_2 {
  display: inline-block;
  position: static;
  height: auto; width: auto;
  margin-top: 4px;
  font-size: 12px;
  color: #5d7396 !important;
}
#popup .headerLogiciel > div:last-child { text-align: right; }
#popup .headerLogiciel > div:last-child > a { text-decoration: none; }
#popup .headerLogiciel .pl-acheter {
  display: inline-block;
  margin-top: 10px;
  padding: 10px 28px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: var(--navy);
  color: #fff !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
#popup .headerLogiciel .pl-acheter:hover {
  background: #fff;
  color: var(--navy) !important;
  box-shadow: 0 4px 12px rgba(45, 71, 112, .2);
}
/* l'ancien bouton Acheter (sous l'en-tete) est remplace par celui de l'en-tete */
#popup .logiciels .logiciel_btn_acheter { display: none !important; }

/* zone de contenu */
#popup .logiciels.view {
  border: 0 !important;
  background: #fff !important;
  padding: 0 34px 20px;
}
#popup .logiciels .glyphicon, #popup .logiciels h3, #popup .logiciels p { color: var(--navy); }
#popup .logiciels #essentiel h3 {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--navy);
}
#popup .logiciels #essentiel h3::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 6px;
  border-radius: 3px;
  background: var(--accent);
}

/* carrousel : image arrondie, fleches rondes, points fins */
#popup .w_60 { margin-top: 10px; padding-right: 26px; }
@media (max-width: 900px) { #popup .w_60 { padding-right: 0; } }
#popup .slider_container_full { padding-left: 0; position: relative; }
#popup #center.slide_image { width: calc(100% - 0px); max-width: none; float: none; display: block; }
#popup #previous, #popup #next {
  position: absolute;
  top: 0;
  z-index: 5;
  top: 38%;
  transform: translateY(-50%);
  width: 44px !important;
  height: 44px !important;
}
#popup #previous { left: 12px; }
#popup #next { right: 12px; }
#popup #previous_arrow, #popup #next_arrow { margin-top: 0 !important; height: 44px !important; }
#popup #prevBtn, #popup #nextBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--line);
  box-shadow: 0 4px 12px rgba(45, 71, 112, .22);
  color: var(--navy);
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
#popup #prevBtn:hover, #popup #nextBtn:hover {
  background: var(--navy);
  transform: scale(1.06);
}
#popup #diap_arrow_l_img, #popup #diap_arrow_r_img { display: none; }
#popup #prevBtn::before, #popup #nextBtn::before {
  content: "";
  width: 11px;
  height: 11px;
  border-top: 3px solid var(--navy);
  border-right: 3px solid var(--navy);
  border-radius: 1px;
  transition: border-color .2s ease;
}
#popup #prevBtn::before { transform: rotate(-135deg); margin-left: 5px; }
#popup #nextBtn::before { transform: rotate(45deg); margin-right: 5px; }
#popup #prevBtn:hover::before, #popup #nextBtn:hover::before { border-color: #fff; }

/* les diapositives suivent la largeur du cadre (avant : largeurs fixes en pixels selon la taille d'ecran) */
#popup #slideshow .slider { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; display: flex; height: auto !important; }
#popup #center.slide_image, #popup .slider_container_full, #popup #slider_container { height: auto !important; }
#popup .img_container { height: auto !important; aspect-ratio: 3 / 2; }
#popup #slideshow .slider .img_texte_box { flex: 0 0 100%; width: 100% !important; max-width: none !important; float: none; }
#popup #slideshow, #popup #slideshow .container { width: 100% !important; height: auto !important; }
#popup #slideshow { border-radius: 14px; overflow: hidden; }
#popup #slider_container, #popup .container_diap { border-radius: 14px; overflow: hidden; }
#popup .img_texte_box { background: #f3f6fa !important; }
#popup .img_container { border-radius: 14px 14px 0 0; }
#popup .bulle_off {
  width: 8px;
  height: 8px;
  margin: 12px 3px 8px;
  border-radius: 8px;
  background: #cfd8e6 !important;
  transition: width .25s ease, background-color .25s ease;
}
#popup .bulle_on { width: 22px; background: var(--accent) !important; }

/* vignettes : toutes visibles, coins arrondis, la vignette en cours est soulignee */
#popup .logiciels .miniature_2 { padding-top: 12px !important; }
#popup .logiciels .miniature_2 ol { margin: 0; padding: 0; height: auto !important; }
#popup .logiciels .miniature_2 li {
  display: inline-block;
  width: 16.2%;
  height: auto;
  min-height: 0;
  margin: 0 .4% 8px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  overflow: visible;
  vertical-align: top;
  box-sizing: border-box;
}
#popup .vignette_image_box {
  /* toutes les vignettes ont la même proportion 4/3, quelle que soit l'image : hauteur donnée par le remplissage (padding-bottom),
     donc connue avant le chargement de l'image et identique dans tous les navigateurs (aspect-ratio débordait de son conteneur) */
  position: relative;
  height: 0 !important;
  padding-bottom: 75%;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 9px;
  box-shadow: 0 2px 6px rgba(45, 71, 112, .12);
  transition: transform .2s ease, box-shadow .2s ease;
}
#popup .vignette_image_box img { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; }
#popup .miniature_2, #popup .miniature_2 ol { display: flow-root; height: auto !important; overflow: visible !important; }
#popup .miniature_2 li > div { float: none !important; display: block !important; }
#popup .logiciels .miniature_2 li:hover .vignette_image_box {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(45, 71, 112, .22);
}
#popup .logiciels .miniature_2 li > div > div[id^="min_carrousels_over_"] {
  background-color: var(--accent) !important;
  height: 3px !important;
  border-radius: 3px;
  margin-top: 4px !important;
}

/* boutons "Demande d'informations", "Demande de devis" : pilule contour marine */
#popup .btn_essayer_off {
  display: inline-block;
  width: auto;
  min-width: 200px;
  white-space: nowrap;
  height: 38px;
  line-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  background: #fff !important;
  color: var(--navy) !important;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
#popup .btn_essayer_off:hover {
  background: var(--navy) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(45, 71, 112, .2);
}
#popup a:hover .btn_essayer_off { color: #fff !important; }

/* choix de la version (PC / TAB, packs...) */
#popup .btn_videoshow_off,
#popup #information_capitale .detailss div[style*="border-radius: 50px"] {
  padding: 9px 22px !important;
  border: 1px solid var(--navy);
  border-radius: 999px !important;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
}
#popup .btn_videoshow_off {
  background: #fff !important;
  color: var(--navy) !important;
  transition: background-color .25s ease, color .25s ease;
}
#popup .btn_videoshow_off:hover { background: var(--navy) !important; color: #fff !important; }
#popup #information_capitale .detailss div[style*="border-radius: 50px"] {
  background: var(--navy) !important;
  color: #fff !important;
}
#popup .btn_opt_box {
  border: 1px solid var(--navy) !important;
  border-radius: 999px;
  color: var(--navy);
  transition: background-color .25s ease, color .25s ease;
}
#popup .btn_opt_box:hover { background: var(--navy); color: #fff; }

/* blocs de texte : fond tres pale, coins arrondis, titre avec petit trait */
#popup .texte_box, #popup .texte_box_white {
  margin: 22px 0 !important;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 2px 10px rgba(45, 71, 112, .05);
}
#popup .texte_box { background: #f6f9fc !important; }
#popup .texte_box_white { background: #fff !important; }
#popup .logiciel_texte_box_titre {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--navy) !important;
}
#popup .logiciel_texte_box_titre::after {
  content: "";
  display: block;
  width: 34px;
  height: 3px;
  margin-top: 8px;
  border-radius: 3px;
  background: var(--accent);
}
#popup .logiciel_texte_box { color: #3b4d6b !important; }

@media (max-width: 900px) {
  #popup .headerLogiciel { flex-wrap: wrap; gap: 14px; padding: 20px 18px 10px; }
  #popup .headerLogiciel > div:last-child { text-align: left; width: 100% !important; }
  #popup .headerLogiciel .espacePrixAge p, #popup .headerLogiciel .espacePrixAge #prix_2 { text-align: left; }
  #popup .headerLogiciel .en_tete_logiciel h2 { font-size: 28px; }
  #popup .logiciels.view { padding: 0 16px 16px; }
  #popup .logiciels .miniature_2 li { width: 23%; }
}

/* prix sur une seule ligne : "1250 € HT" */
#popup .headerLogiciel .espacePrixAge #prix_2 br,
#popup .headerLogiciel .espacePrixAge #prixTTC_2 br { display: none; }
#popup .headerLogiciel .espacePrixAge #prix_2 font { margin-left: 5px; }
#popup #information_capitale .detailss span { color: var(--navy) !important; }

/* hauteur du carrousel = image 3:2 + legende (une legende tres longue ne doit pas allonger tout le cadre) */
#popup #slideshow #slider_container { height: 0 !important; padding-bottom: calc(66.667% + 78px); overflow: hidden; }
#popup #slideshow .slider { align-items: flex-start; height: auto !important; }

/* ===== fiche produit, mobile uniquement (<= 767 px) =====
   en-tête : miniature | nom + accroche ; puis diaporama pleine largeur, vignettes, prix + Acheter, L'essentiel ;
   blocs de texte décollés des bords (16 px, comme les autres pages). Sur ordinateur : rien de changé. */
.pl-mobile-achat { display: none; }
@media (max-width: 767px) {
  #popup .headerLogiciel {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    grid-template-areas: "logo titre";
    align-items: center;
    gap: 14px;
    padding: 18px 16px 12px;
  }
  #popup .headerLogiciel > div:first-child { grid-area: logo; align-self: start; width: 84px !important; max-width: 84px !important; }
  #popup .headerLogiciel #logo { height: auto !important; width: 84px !important; max-width: 84px !important; max-height: 96px; object-fit: contain; }
  #popup .headerLogiciel .en_tete_logiciel { grid-area: titre; width: auto !important; }
  #popup .headerLogiciel .en_tete_logiciel h2 { margin: 0 0 4px; font-size: 24px; line-height: 1.15; white-space: normal !important; overflow-wrap: anywhere; }
  #popup .headerLogiciel .en_tete_logiciel h3 { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 500; white-space: normal !important; overflow-wrap: anywhere; width: auto !important; max-width: 100% !important; }
  /* prix et Acheter de l'en-tête : remplacés par le bloc placé sous les vignettes */
  #popup .headerLogiciel > div:last-child { display: none !important; }

  /* diaporama : le plus large possible (le cadre déborde des marges des blocs de texte), flèches posées sur l'image */
  #popup .logiciels.view { padding: 0 0 16px; }
  #popup .w_60 { padding: 0 16px !important; margin: 4px 0 0 !important; width: 100% !important; box-sizing: border-box; }
  #popup #carousel_miniature { padding: 0 !important; margin: 0 !important; width: 100% !important; }
  #popup #presentationx { padding: 0 16px !important; margin: 4px 0 0 !important; width: 100% !important; box-sizing: border-box; }
  #popup .slider_container_full_m, #popup .slider_container_full { width: 100% !important; padding: 0 !important; }
  #popup #center.slide_image, #popup #slideshow, #popup #slideshow .container, #popup #slider_container, #popup .container_diap {
    width: 100% !important; max-width: none !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; left: auto !important;
  }
  #popup #previous { left: 8px; }
  #popup #next { right: 8px; }
  #popup #previous, #popup #next, #popup #prevBtn, #popup #nextBtn { width: 38px !important; height: 38px !important; }

  /* sous le diaporama : vignettes, puis prix + Acheter, puis « L'essentiel » */
  #popup #descriptionx { display: flex; flex-direction: column; width: 100% !important; padding: 0 16px !important; margin: 0 !important; box-sizing: border-box; }
  #popup #descriptionx > .miniature_2 { order: 1; padding-top: 10px !important; }
  #popup #descriptionx > .pl-mobile-achat { order: 2; }
  #popup #descriptionx > #essentiel { order: 3; margin-top: 8px !important; }
  #popup #descriptionx > div:last-child { order: 4; }
  #popup #descriptionx > div:not(.miniature_2):not(.pl-mobile-achat):not(#essentiel):not(:last-child) { order: 5; }
  #popup .pl-mobile-achat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 12px 0 6px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  #popup .pl-mobile-prix { color: var(--navy); font-size: 26px; font-weight: 700; white-space: nowrap; }
  #popup .pl-mobile-prix small { font-size: 12px; font-weight: 600; letter-spacing: .08em; color: #5d7396; }
  #popup .pl-mobile-achat .pl-acheter {
    display: inline-block; margin: 0; padding: 11px 28px; white-space: nowrap;
    border: 1px solid var(--navy); border-radius: 999px; background: var(--navy); color: #fff !important;
    font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  }

  /* blocs de texte (Description, « quand le test devient un jeu »...) : décollés des bords comme les autres pages */
  #popup .logiciels.view > *:not(:nth-child(-n+2)) { margin-left: 16px !important; margin-right: 16px !important; width: auto !important; box-sizing: border-box; }
  #popup .logiciels.view > div:nth-child(2) { margin: 0 !important; width: 100% !important; }
}

/* vidéos intégrées (iframe YouTube de la table `videos`, 560 x 315 fixes) : jamais plus larges que le cadre, ratio 16/9 conservé */
#popup iframe { max-width: 100%; }
#popup iframe[src*="youtube"], #popup iframe[src*="youtu.be"], #popup iframe[src*="vimeo"] {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 16 / 9;
  max-width: 760px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  border: 0;
  border-radius: 12px;
}

/* avis clients : un avis par ligne sur mobile (deux par ligne était trop serré pour être lu) */
@media (max-width: 767px) {
  #popup .pl-avis { display: block !important; }
  #popup .pl-avis .pl-avis-item { float: none !important; width: 100% !important; max-width: none !important; padding: 14px 16px !important; }
  #popup .pl-avis .pl-avis-item > div { float: none !important; }
}

/* VideoShow : vidéo et témoignages (blocs ajoutés en dur dans view.php) - mobile uniquement */
@media (max-width: 767px) {
  #popup .pl-video, #popup .pl-video-cadre { display: block !important; width: 100% !important; }
  #popup .pl-video iframe { max-width: 100%; }
  /* un témoignage par ligne, pleine largeur, lisible */
  #popup .pl-temoignages { float: none !important; display: block !important; width: 100% !important; padding: 0 !important; }
  #popup .pl-temoignage { float: none !important; display: block !important; width: 100% !important; padding: 14px 4px !important; }
}

/* fiche produit, mobile : textes des blocs (Description, Caractéristiques...) à la même taille que « L'essentiel »,
   interligne 22 px, marges intérieures réduites (avant : police ~12 px proportionnelle à l'écran et 25 px + 20 px de marge en haut) */
@media (max-width: 767px) {
  #popup #essentiel h3 { font-size: 15px !important; }
  #popup #essentiel p { font-size: 14px !important; line-height: 22px !important; }
  #popup .details { margin: 14px 16px !important; border-radius: 14px; }
  #popup .details > div { width: 100% !important; padding: 0 !important; }
  #popup .details h3.logiciel_texte_box_titre {
    margin: 0 !important; padding: 16px 16px 0 !important;
    font-size: 15px !important; line-height: 1.3 !important; text-align: left !important;
  }
  #popup .details p.logiciel_texte_box {
    margin: 0 !important; padding: 8px 16px 16px !important;
    font-size: 14px !important; line-height: 22px !important; text-align: left !important;
  }
  #popup .details p.logiciel_texte_box * { font-size: inherit; }
}

/* diaporama : l'image occupe toute la largeur de la diapositive à toutes les tailles (de 624 à 767 px, l'ancien style fixait 500 px) */
#popup .img_container { width: 100% !important; max-width: none !important; }