/* ==========================================================
   HOPES V14 — RESPONSIVE CONSOLIDÉ
   Cibles : 320px, iPhone SE/mini, iPhone 12-16, tablettes,
   portrait/paysage et écrans intermédiaires.
   Chargé EN DERNIER pour neutraliser les anciennes règles
   responsives qui se contredisaient parfois.
========================================================== */

html {
  overflow-x: clip;
  scroll-padding-top: 88px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-width: 0;
  overflow-x: clip;
}

img,
video,
iframe,
svg,
canvas {
  max-width: 100%;
}

main,
section,
article,
aside,
header,
footer,
nav,
div {
  min-width: 0;
}

p,
h1,
h2,
h3,
h4,
a,
strong,
small,
span {
  overflow-wrap: break-word;
}

/* iPhone : évite le zoom automatique des champs de formulaire. */
@media (max-width: 768px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ==========================================================
   NAVIGATION
========================================================== */
@media (max-width: 1200px) {
  .header {
    height: auto !important;
    min-height: 72px;
    padding: 9px clamp(16px, 3vw, 32px) !important;
  }

  .navbar {
    gap: 12px;
  }

  .logo {
    height: 52px !important;
    flex: 0 0 auto;
  }

  .logo img {
    width: auto !important;
    height: 100% !important;
    max-width: 150px !important;
  }
}

/* ----------------------------------------------------------
   Le panneau mobile couvre tout l'intervalle 0 → 1200px.
   Avant la v15 il s'arrêtait à 1100px alors que le bouton burger,
   lui, apparaissait dès 1200px : entre 1101px et 1200px (iPad Air
   paysage, petits portables) le bouton était visible mais aucune
   règle n'affichait le panneau — le menu ne s'ouvrait pas.
---------------------------------------------------------- */
@media (max-width: 1200px) {
  .header {
    /* Au-dessus du bouton flottant « réseaux sociaux » (1200) pour que le
       panneau du menu reste toujours au premier plan et cliquable. */
    z-index: 1400 !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
  }

  .navbar {
    position: relative;
  }

  /* navigation.js pose .show ET .active : les deux sont acceptées ici pour
     rester compatible avec les anciennes règles restées dans style.css. */
  .header .nav-menu {
    position: absolute !important;
    top: calc(100% + 9px) !important;
    right: 0 !important;
    left: 0 !important;
    z-index: 1450;
    display: none !important;
    max-height: min(72dvh, 620px) !important;
    overflow-x: hidden;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    padding: 10px !important;
    border: 1px solid rgba(112, 197, 0, .18) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.985) !important;
    box-shadow: 0 24px 65px rgba(10, 28, 15, .18) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
  }

  body.dark-mode .header .nav-menu {
    background: rgba(14, 20, 16, .985) !important;
    border-color: rgba(126, 203, 50, .20) !important;
  }

  .header .nav-menu.show,
  .header .nav-menu.active {
    display: block !important;
    animation: hopesMobileMenuIn .28s cubic-bezier(.2,.8,.2,1) both;
  }

  @keyframes hopesMobileMenuIn {
    from { opacity: 0; transform: translateY(-8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }

  /* Voile sombre derrière le panneau : il isole visuellement le menu et
     garantit qu'aucun contenu de la page ne reste cliquable au travers. */
  body.mobile-nav-open::before {
    content: "";
    position: fixed;
    z-index: 1390;
    inset: 0;
    background: rgba(8, 16, 10, .42);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    animation: hopesMobileMenuVeil .28s ease both;
  }

  @keyframes hopesMobileMenuVeil {
    from { opacity: 0; }
    to { opacity: 1; }
  }

  /* Le bouton flottant des réseaux sociaux passait AU-DESSUS du menu
     (z-index 1200 contre 1000) et rendait les derniers liens intouchables. */
  body.mobile-nav-open .floating-social {
    z-index: 1 !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .header .nav-list {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px !important;
  }

  .header .nav-link {
    width: 100%;
    min-height: 46px;
    justify-content: flex-start !important;
    padding: 11px 13px !important;
    font-size: 13px !important;
  }

  .menu-toggle {
    position: relative;
    z-index: 1460;
    display: grid !important;
    place-items: center;
    flex: 0 0 auto;
  }

  .nav-actions {
    margin-left: auto;
    gap: 7px !important;
  }

  .round-btn,
  .menu-toggle {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px;
  }

  .official-site-nav-btn {
    flex: 0 0 auto;
  }

  .official-site-nav-copy,
  .official-site-nav-arrow {
    display: none !important;
  }
}

@media (max-width: 1200px) and (min-width: 861px) {
  /* Sur tablette il reste de la place pour trois colonnes de liens. */
  .header .nav-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .header {
    min-height: 64px;
    padding-top: 7px !important;
    padding-bottom: 7px !important;
  }

  .logo {
    height: 46px !important;
  }

  .logo img {
    max-width: 112px !important;
  }

  .header .nav-list {
    grid-template-columns: 1fr;
  }

  .header .nav-menu {
    max-height: calc(100dvh - 86px) !important;
  }

  .official-site-nav-btn,
  .round-btn,
  .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px !important;
  }

  .official-site-nav-btn {
    padding: 4px !important;
  }

  .official-site-nav-icon {
    width: 30px !important;
    height: 30px !important;
  }
}

@media (max-width: 350px) {
  .header {
    padding-left: max(8px, env(safe-area-inset-left)) !important;
    padding-right: max(8px, env(safe-area-inset-right)) !important;
  }

  .navbar { gap: 5px; }
  .nav-actions { gap: 4px !important; }
  .logo { height: 42px !important; }
  .logo img { max-width: 88px !important; }

  .official-site-nav-btn,
  .round-btn,
  .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    min-height: 38px !important;
  }
}

/* ==========================================================
   ACCUEIL / HERO
========================================================== */
@media (max-width: 1024px) {
  .hero-container {
    height: auto !important;
    min-height: 0 !important;
    align-items: center;
  }

  .hero-left {
    height: auto !important;
  }

  .hero-right img {
    height: auto !important;
    object-fit: contain !important;
  }

  .hero-label.hero-label-liquid {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .hero {
    overflow: hidden !important;
  }

  .hero-container {
    display: flex !important;
    flex-direction: column !important;
  }

  .hero-left {
    width: 100% !important;
    padding: clamp(34px, 7vw, 52px) clamp(16px, 5vw, 32px) 20px !important;
    text-align: center;
  }

  .hero-label.hero-label-liquid {
    justify-content: center !important;
    margin-inline: auto;
    margin-bottom: 22px !important;
    padding: 10px 15px !important;
    border-radius: 17px !important;
  }

  .hero-label-liquid .word {
    font-size: clamp(.62rem, 2.5vw, .76rem) !important;
    letter-spacing: .045em !important;
  }

  .hero-left h1 {
    max-width: 680px;
    margin-inline: auto;
    font-size: clamp(2.15rem, 8vw, 3.4rem) !important;
    line-height: 1.07 !important;
    letter-spacing: -.045em !important;
  }

  .hero-description {
    max-width: 590px;
    margin: 18px auto 0 !important;
    font-size: clamp(.92rem, 3vw, 1.05rem) !important;
    line-height: 1.6 !important;
  }

  .hero-left h1 br,
  .hero-description br {
    display: none !important;
  }

  .hero-buttons {
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .hero-buttons .btn {
    min-height: 48px;
  }

  .hero-right {
    width: 100% !important;
    min-height: 0 !important;
    padding: 8px 16px 24px;
    justify-content: center !important;
  }

  .hero-right img {
    width: min(100%, 650px) !important;
    max-height: 370px !important;
  }
}

@media (max-width: 480px) {
  .hero-left {
    padding-inline: 14px !important;
  }

  .hero-label.hero-label-liquid {
    gap: 3px 7px !important;
    width: fit-content !important;
    max-width: 100% !important;
  }

  .hero-left h1 {
    font-size: clamp(1.95rem, 9.5vw, 2.65rem) !important;
  }

  .hero-buttons {
    display: grid !important;
    grid-template-columns: 1fr;
    width: 100%;
  }

  .hero-buttons .btn {
    width: 100% !important;
  }

  .hero-right {
    padding-inline: 8px;
  }
}

@media (max-width: 320px) {
  .hero-left {
    padding-top: 28px !important;
    padding-inline: 10px !important;
  }

  .hero-label.hero-label-liquid {
    padding: 8px 10px !important;
    border-radius: 14px !important;
  }

  .hero-label-liquid .word {
    font-size: .57rem !important;
    letter-spacing: .03em !important;
  }

  .hero-left h1 {
    font-size: 1.78rem !important;
    letter-spacing: -.035em !important;
  }

  .hero-description {
    font-size: .88rem !important;
  }
}

/* ==========================================================
   SECTIONS GÉNÉRALES DE L'ACCUEIL
========================================================== */
@media (max-width: 1024px) {
  .events,
  .bim-even,
  .about-details,
  .testimonials,
  .faq-section {
    padding-left: clamp(18px, 4vw, 34px) !important;
    padding-right: clamp(18px, 4vw, 34px) !important;
  }

  .events-container,
  .bim-even-container,
  .about-container,
  .testimonials-container,
  .faq-container {
    width: 100% !important;
    max-width: 100% !important;
  }

  .bim-even-layout {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .bim-even-video {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }

  .bim-even-video video {
    height: 100% !important;
  }
}

@media (max-width: 768px) {
  .events,
  .bim-even,
  .about-details,
  .testimonials,
  .faq-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .events-heading,
  .testimonials-heading,
  .faq-heading {
    margin-bottom: 28px !important;
  }

  .events-heading h2,
  .testimonials-heading h2,
  .contact-heading h2,
  .faq-heading h2,
  .about-content h2 {
    font-size: clamp(1.8rem, 7vw, 2.6rem) !important;
    line-height: 1.08 !important;
  }

  .events-heading p,
  .testimonials-heading p,
  .faq-heading p,
  .about-content p {
    font-size: .94rem !important;
    line-height: 1.65 !important;
  }

  .events-track {
    gap: 14px !important;
  }

  .event-card {
    min-width: 100% !important;
    border-radius: 20px !important;
  }

  .event-image {
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
  }

  .event-content {
    padding: 18px !important;
  }

  .bim-even-info-card {
    align-items: flex-start;
    gap: 13px !important;
    padding: 16px !important;
  }

  .bim-even-info-content h3 {
    font-size: 1.05rem !important;
  }

  /* À propos : supprime les positions absolues instables sur mobile/tablette. */
  .about-visual {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    min-height: 0 !important;
  }

  .about-main-image {
    position: relative !important;
    inset: auto !important;
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    width: min(100%, 580px) !important;
    max-width: 100% !important;
    max-height: none !important;
    margin: 0 auto -16px !important;
    transform: none !important;
  }

  .about-feature,
  .about-feature--trainers,
  .about-feature--certificate,
  .about-feature--practice,
  .about-feature--employment,
  .about-feature--quality,
  .about-feature--environment {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-height: 92px !important;
    transform: none !important;
  }

  .about-feature:hover,
  .about-feature--certificate:hover,
  .about-feature--environment:hover {
    transform: translateY(-3px) !important;
  }
}

@media (max-width: 520px) {
  .events,
  .bim-even,
  .about-details,
  .testimonials,
  .faq-section {
    padding-left: 13px !important;
    padding-right: 13px !important;
  }

  .about-visual {
    grid-template-columns: 1fr !important;
  }

  .about-main-image {
    margin-bottom: -8px !important;
  }

  .about-feature {
    min-height: 82px !important;
    padding: 12px !important;
  }

  .about-feature-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    border-radius: 13px !important;
  }
}

/* ==========================================================
   CONTACT + TÉLÉPHONE 3D
========================================================== */
@media (max-width: 1024px) {
  .contact-section {
    min-height: 0 !important;
    overflow: hidden;
  }

  .contact-heading {
    padding-inline: clamp(18px, 4vw, 34px) !important;
  }

  .contact-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    max-height: none !important;
    padding: 24px clamp(18px, 4vw, 34px) 34px !important;
  }

  .contact-info-card {
    width: 100% !important;
    max-height: none !important;
    padding: 10px 0 !important;
  }

  .contact-showcase {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 18px auto 0 !important;
    padding: 18px 0 !important;
  }

  .phone-stage {
    width: 100% !important;
    height: auto !important;
    min-height: 570px;
  }
}

@media (max-width: 768px) {
  .contact-heading {
    padding-inline: 16px !important;
  }

  .contact-container {
    padding: 18px 14px 28px !important;
  }

  .contact-info-list {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .contact-social-link {
    grid-template-columns: 44px minmax(0,1fr) !important;
  }

  .contact-social-platforms {
    grid-column: 2 !important;
    flex-wrap: wrap;
  }

  .phone-stage {
    min-height: 510px;
  }

  .phone-device {
    width: min(260px, 72vw) !important;
  }
}

@media (max-width: 420px) {
  .contact-heading h2 {
    font-size: clamp(1.8rem, 8vw, 2.25rem) !important;
  }

  .contact-item,
  .contact-item--wide {
    grid-template-columns: 42px minmax(0,1fr) !important;
    gap: 10px !important;
    min-height: 0 !important;
    padding: 12px !important;
  }

  .contact-item > i {
    display: none !important;
  }

  .contact-icon,
  .contact-item--wide .contact-icon {
    width: 42px !important;
    height: 42px !important;
  }

  .contact-phone-card .contact-phone-number {
    font-size: clamp(1.25rem, 7vw, 1.7rem) !important;
  }

  .contact-social-platforms {
    gap: 16px !important;
  }

  .phone-stage {
    min-height: 455px;
  }

  .phone-device {
    width: min(230px, 70vw) !important;
  }
}

@media (max-width: 320px) {
  .contact-container { padding-inline: 9px !important; }
  .phone-stage { min-height: 410px; }
  .phone-device { width: 204px !important; }
}

/* ==========================================================
   TÉMOIGNAGES — VIDÉOS / CAPTURE / COVERFLOW
========================================================== */
@media (max-width: 1024px) {
  .testimonials-media-layout {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .testimonial-video-column,
  .testimonial-capture-column {
    width: 100% !important;
    min-width: 0 !important;
  }

  .testimonial-video-card,
  .testimonial-capture-card {
    width: 100%;
  }
}

@media (max-width: 760px) {
  .premium-testimonial-slider {
    margin-top: 28px !important;
    padding: 18px 12px !important;
    border-radius: 24px !important;
  }

  .premium-testimonial-topbar {
    gap: 12px !important;
  }

  .premium-testimonial-heading-copy > strong,
  .premium-testimonial-topbar > div:first-child > strong {
    font-size: .92rem !important;
  }

  .premium-testimonial-viewport {
    min-height: 500px !important;
    overflow: hidden !important;
    padding-inline: 0 !important;
  }

  .premium-testimonial-track {
    min-height: 470px !important;
  }

  .premium-testimonial-slide {
    width: min(88%, 360px) !important;
    min-height: 445px !important;
    padding: 18px !important;
  }

  .premium-testimonial-slide.is-prev {
    opacity: .18 !important;
    transform: translateX(-128%) scale(.82) !important;
  }

  .premium-testimonial-slide.is-next {
    opacity: .18 !important;
    transform: translateX(28%) scale(.82) !important;
  }

  .premium-testimonial-photo {
    height: 145px !important;
  }

  .premium-testimonial-slide blockquote {
    font-size: .92rem !important;
    line-height: 1.55 !important;
  }
}

@media (max-width: 390px) {
  .premium-testimonial-slider {
    padding: 14px 8px !important;
  }

  .premium-testimonial-controls button {
    width: 38px !important;
    height: 38px !important;
  }

  .premium-testimonial-viewport {
    min-height: 475px !important;
  }

  .premium-testimonial-track {
    min-height: 450px !important;
  }

  .premium-testimonial-slide {
    width: 92% !important;
    min-height: 425px !important;
    padding: 15px !important;
  }

  .premium-testimonial-slide.is-prev,
  .premium-testimonial-slide.is-next {
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* ==========================================================
   FAQ
========================================================== */
@media (max-width: 900px) {
  .faq-section {
    min-height: 0 !important;
  }

  .faq-layout {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .faq-tabs {
    display: flex !important;
    overflow-x: auto;
    gap: 8px !important;
    padding: 3px 2px 10px;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }

  .faq-tab {
    flex: 0 0 auto;
    min-width: min(230px, 78vw);
    scroll-snap-align: start;
  }

  .faq-help {
    grid-template-columns: auto minmax(0,1fr) !important;
  }

  .faq-help-link {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .faq-panel,
  .faq-help {
    padding: 16px !important;
    border-radius: 18px !important;
  }

  .faq-question {
    gap: 10px !important;
    padding: 15px 12px !important;
    font-size: .9rem !important;
  }
}

/* ==========================================================
   FOOTER + BOUTON RÉSEAUX SOCIAUX
========================================================== */
@media (max-width: 768px) {
  .footer-container {
    width: calc(100% - 32px) !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 30px 18px !important;
  }

  .footer-about,
  .footer-location {
    grid-column: 1 / -1 !important;
  }

  .footer-map iframe {
    min-height: 230px;
  }

  .floating-social {
    right: max(12px, env(safe-area-inset-right)) !important;
    bottom: max(12px, env(safe-area-inset-bottom)) !important;
  }
}

@media (max-width: 520px) {
  .footer-container {
    width: calc(100% - 26px) !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .footer-about,
  .footer-location {
    grid-column: auto !important;
  }

  .footer-bottom-container {
    width: calc(100% - 26px) !important;
  }

  .floating-social-link {
    min-width: min(12rem, calc(100vw - 86px)) !important;
  }

  .floating-social-link-label strong {
    font-size: .82rem !important;
  }
}

/* ==========================================================
   PAGE TUTORIELS — 3 cartes desktop / 2 tablette / 1 mobile
========================================================== */
@media (min-width: 769px) and (max-width: 1120px) {
  .tv9-container {
    width: min(calc(100% - 38px), 1410px) !important;
  }

  .tv9-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 34px !important;
  }

  .tv9-player-card {
    width: 100% !important;
  }

  /* Le JS place gauche/centre/droite dans cet ordre. Sur tablette,
     on masque la carte de gauche pour que centre + suivante soient visibles. */
  .tv9-card.is-left {
    display: none !important;
  }

  .tv9-card {
    flex-basis: calc((100% - 18px) / 2) !important;
  }
}

@media (max-width: 768px) {
  .tv9-shell {
    padding: 40px 0 70px !important;
  }

  .tv9-container {
    width: calc(100% - 26px) !important;
  }

  .tv9-feature-grid {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }

  .tv9-lesson-copy h1 {
    font-size: clamp(2.1rem, 10vw, 3.4rem) !important;
    line-height: 1 !important;
  }

  .tv9-lead {
    font-size: .94rem !important;
  }

  .tv9-meta-row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .tv9-meta-chip {
    width: 100%;
    grid-template-columns: auto 1fr !important;
  }

  .tv9-meta-chip strong {
    grid-column: 2;
  }

  .tv9-tip-card {
    grid-template-columns: 44px minmax(0,1fr) !important;
    padding: 15px !important;
  }

  .tv9-tip-icon {
    width: 42px !important;
    height: 42px !important;
  }

  .tv9-player-card {
    width: 100% !important;
    padding: 6px !important;
    border-radius: 20px !important;
  }

  .tv9-player-frame {
    border-radius: 14px !important;
  }

  .tv9-library {
    margin-top: 34px !important;
    padding: 20px 12px 22px !important;
    border-radius: 22px !important;
  }

  .tv9-library-head {
    display: grid !important;
    grid-template-columns: 1fr;
    gap: 14px !important;
  }

  .tv9-library-title-wrap {
    align-items: flex-start !important;
  }

  .tv9-slider {
    min-height: 420px !important;
    padding: 0 42px !important;
  }

  .tv9-viewport {
    padding-inline: 0 !important;
  }

  /* En mobile on montre uniquement la carte centrée : les flèches/dots/swipe
     changent toujours la carte visuelle, puis un clic change le lecteur. */
  .tv9-card.is-left,
  .tv9-card.is-right {
    display: none !important;
  }

  .tv9-card.is-active {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    transform: none !important;
  }

  .tv9-card-body {
    min-height: 176px !important;
  }
}

@media (max-width: 480px) {
  .tv9-container {
    width: calc(100% - 18px) !important;
  }

  .tv9-lesson-badge {
    font-size: 9px !important;
  }

  .tv9-now {
    margin-top: 16px !important;
    font-size: .82rem !important;
  }

  .tv9-meta-row {
    grid-template-columns: 1fr !important;
  }

  .tv9-tip-card {
    grid-template-columns: 1fr !important;
  }

  .tv9-player-floating-brand {
    display: none !important;
  }

  .tv9-episode {
    top: 12px !important;
    right: 12px !important;
  }

  .tv9-library-icon {
    width: 40px !important;
    height: 40px !important;
  }

  .tv9-library h2 {
    font-size: 1.45rem !important;
  }

  .tv9-slider {
    min-height: 390px !important;
    padding: 0 32px !important;
  }

  .tv9-nav {
    width: 36px !important;
    height: 36px !important;
  }

  .tv9-card-body {
    min-height: 168px !important;
    padding: 14px !important;
  }

  .tv9-card-foot {
    gap: 8px !important;
    flex-wrap: wrap;
  }
}

@media (max-width: 320px) {
  .tv9-container { width: calc(100% - 12px) !important; }
  .tv9-lesson-copy h1 { font-size: 1.9rem !important; }
  .tv9-library { padding-inline: 8px !important; }
  .tv9-slider { padding-inline: 28px !important; }
  .tv9-card-number { left: 9px !important; top: 9px !important; }
  .tv9-card-duration { right: 8px !important; top: 8px !important; }
}

/* ==========================================================
   FICHE FORMATION / ARTICLE
========================================================== */
@media (max-width: 1080px) {
  .formation-detail-container,
  .article-detail-container {
    width: min(calc(100% - 32px), 1080px) !important;
  }
}

@media (max-width: 900px) {
  .formation-premium-hero {
    grid-template-columns: 1fr !important;
  }

  .formation-hero-copy {
    padding: clamp(28px, 6vw, 48px) !important;
  }

  .formation-hero-visual {
    min-height: 360px !important;
  }

  .formation-premium-layout {
    grid-template-columns: 1fr !important;
  }

  .formation-side-column {
    position: static !important;
    width: 100%;
  }

  .formation-enrollment-card {
    position: static !important;
  }
}

@media (max-width: 680px) {
  .article-detail-page {
    padding-top: 24px !important;
  }

  .formation-detail-container,
  .article-detail-container {
    width: calc(100% - 20px) !important;
  }

  .article-breadcrumb {
    gap: 7px !important;
    overflow-x: auto;
    padding-bottom: 4px;
    white-space: nowrap;
  }

  .article-breadcrumb span {
    max-width: 52vw;
    flex: 0 0 auto;
  }

  .formation-premium {
    border-radius: 24px !important;
  }

  .formation-hero-copy {
    padding: 26px 18px !important;
  }

  .formation-hero-labels {
    align-items: flex-start !important;
    flex-direction: column !important;
  }

  .formation-hero-copy h1 {
    font-size: clamp(2rem, 10vw, 3rem) !important;
  }

  .formation-quick-infos {
    grid-template-columns: 1fr !important;
  }

  .formation-hero-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .formation-primary-cta,
  .formation-secondary-cta {
    width: 100% !important;
    justify-content: center !important;
  }

  .formation-hero-visual {
    min-height: 250px !important;
  }

  .formation-visual-badge,
  .formation-visual-rating {
    max-width: calc(100% - 24px);
  }

  .formation-premium-layout {
    padding: 16px !important;
    gap: 18px !important;
  }

  .formation-section-card {
    padding: 20px 16px !important;
    border-radius: 20px !important;
  }

  .formation-section-heading {
    grid-template-columns: 42px minmax(0,1fr) !important;
    gap: 12px !important;
  }

  .formation-section-icon {
    width: 42px !important;
    height: 42px !important;
  }

  .formation-program-list li {
    grid-template-columns: 42px minmax(0,1fr) !important;
    gap: 10px !important;
    padding: 14px 12px !important;
  }

  .formation-program-list li > i {
    display: none !important;
  }

  .formation-enrollment-card {
    padding: 22px 16px !important;
    border-radius: 22px !important;
  }
}

@media (max-width: 360px) {
  .formation-detail-container,
  .article-detail-container {
    width: calc(100% - 12px) !important;
  }

  .formation-hero-copy {
    padding-inline: 13px !important;
  }

  .formation-premium-layout {
    padding-inline: 10px !important;
  }

  .formation-section-card,
  .formation-enrollment-card {
    padding-inline: 13px !important;
  }
}

/* ==========================================================
   BLOG / CATÉGORIES / FORMATIONS SIMPLES
========================================================== */
@media (max-width: 768px) {
  .blog-container {
    width: calc(100% - 28px) !important;
  }

  .blog-hero {
    padding: 54px 0 44px !important;
  }

  .blog-hero h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  .blog-grid {
    grid-template-columns: 1fr !important;
  }

  .blog-pagination {
    gap: 8px !important;
    flex-wrap: wrap;
  }

  .pagination-button,
  .pagination-current {
    flex: 1 1 auto;
    justify-content: center;
    text-align: center;
  }
}

@media (max-width: 360px) {
  .blog-container { width: calc(100% - 18px) !important; }
  .blog-content .article-detail[style] { padding: 18px !important; }
}

/* ==========================================================
   PAYSAGE MOBILE / PETITES HAUTEURS
========================================================== */
@media (max-height: 520px) and (orientation: landscape) and (max-width: 950px) {
  .header .nav-menu {
    max-height: calc(100dvh - 72px) !important;
  }

  .hero-left {
    padding-top: 24px !important;
  }

  .phone-stage {
    min-height: 430px !important;
  }
}

/* Les animations lourdes restent accessibles aux utilisateurs qui les désactivent. */
@media (prefers-reduced-motion: reduce) {
  .header .nav-menu.show {
    animation: none !important;
  }
}

/* Verrou de défilement : il DOIT être posé sur <html> et non sur <body>.
   Sur <body>, il transforme le corps en conteneur de défilement et casse le
   `position: sticky` de l'en-tête : ouvert depuis le bas du site, le menu
   partait à près de 10 000px au-dessus de l'écran et devenait inatteignable. */
@media (max-width: 1200px) {
  html.mobile-nav-open {
    overflow: hidden;
    touch-action: none;
  }
}

/* ==========================================================
   V15 — CORRECTIFS COMPLÉMENTAIRES
   1. coupure des mots sur les titres animés
   2. carrousel témoignages sur tablette
   3. zones tactiles et tailles de texte minimales
   4. barres de défilement parasites
   5. finitions 320px
========================================================== */

/* ----------------------------------------------------------
   1. Titres animés : chaque mot reste insécable.
   Les lettres sont des inline-block indépendants : sans ce
   conteneur, le navigateur coupait la ligne au milieu d'un mot
   (« avenir professionnel a / ssuré » à 320px).
---------------------------------------------------------- */
.split-word {
  display: inline-block;
  white-space: nowrap;
}

.hero-stagger-title,
.hero-description-matrix {
  overflow-wrap: normal;
  word-break: normal;
}

/* ----------------------------------------------------------
   2. Carrousel de témoignages : entre 761px et 1200px les cartes
   voisines chevauchaient la carte centrale et les textes se
   superposaient. On écarte les voisines et on les estompe.
---------------------------------------------------------- */
@media (min-width: 761px) and (max-width: 1200px) {
  .premium-testimonial-viewport {
    min-height: 545px !important;
    overflow: hidden !important;
  }

  .premium-testimonial-slide {
    width: min(46%, 370px) !important;
    min-height: 480px !important;
  }

  /* -148% / 48% : les voisines viennent se ranger bord à bord avec la
     carte active au lieu de passer par-dessus son texte. */
  .premium-testimonial-slide.is-prev {
    opacity: .34 !important;
    transform: translateX(-148%) rotateY(7deg) scale(.87) !important;
    filter: saturate(.8) brightness(.72);
  }

  .premium-testimonial-slide.is-next {
    opacity: .34 !important;
    transform: translateX(48%) rotateY(-7deg) scale(.87) !important;
    filter: saturate(.8) brightness(.72);
  }

  .premium-testimonial-slide.is-active {
    transform: translateX(-50%) scale(1) !important;
    filter: none;
  }
}

/* ----------------------------------------------------------
   3a. Zones tactiles : les pastilles de carrousel faisaient 8×8px.
   On agrandit la surface cliquable sans changer le visuel.
---------------------------------------------------------- */
@media (max-width: 1200px) {
  .events-dots,
  .premium-testimonial-dots,
  .tv9-dots {
    gap: 16px !important;
    padding-block: 12px;
  }

  .event-dot,
  .premium-testimonial-dots button,
  .tv9-dots button {
    position: relative;
    overflow: visible;
  }

  /* Surface de frappe de 44px de haut, large du point + de l'écart :
     on n'empiète pas sur la pastille voisine. */
  .event-dot::after,
  .premium-testimonial-dots button::after,
  .tv9-dots button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(100% + 16px);
    height: 44px;
    transform: translate(-50%, -50%);
  }

  /* 3b. Liens de contenu : hauteur de frappe confortable. */
  .event-link,
  .footer-links a,
  .footer-bottom a,
  .blog-card-link,
  .faq-help-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .events-controls button,
  .event-button,
  .premium-testimonial-controls button,
  .tv9-nav {
    min-width: 44px !important;
    min-height: 44px !important;
  }
}

/* ----------------------------------------------------------
   3c. Lisibilité : plus aucun texte de contenu sous 11px.
   Les libellés décoratifs de la maquette de téléphone sont exclus.
---------------------------------------------------------- */
@media (max-width: 480px) {
  .hero-label-liquid .word {
    font-size: clamp(.7rem, 3vw, .78rem) !important;
    letter-spacing: .04em !important;
  }

  .event-status,
  .events-label,
  .testimonials-label,
  .faq-label,
  .blog-card-meta,
  .article-meta,
  .footer-bottom,
  .footer-links a,
  .contact-item-content small,
  .footer-contact-item small,
  .premium-testimonial-heading-copy span,
  .premium-testimonial-index,
  .premium-testimonial-photo-badge,
  .testimonial-video-item-content span,
  .premium-testimonial-slide footer > div > span {
    font-size: 11.5px !important;
  }

  .testimonial-video-item-content strong,
  .premium-testimonial-slide footer strong {
    font-size: 13px !important;
  }

  .official-site-nav-copy small {
    font-size: 9px !important;
  }
}

@media (max-width: 320px) {
  .hero-label-liquid .word {
    font-size: .7rem !important;
  }
}

/* ----------------------------------------------------------
   4. Barres de défilement parasites sur les zones glissantes
   (fil d'Ariane des articles, onglets de la FAQ, pastilles).
---------------------------------------------------------- */
.article-breadcrumb,
.faq-tabs,
.events-track,
.tv9-viewport {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.article-breadcrumb::-webkit-scrollbar,
.faq-tabs::-webkit-scrollbar,
.events-track::-webkit-scrollbar,
.tv9-viewport::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* ----------------------------------------------------------
   5. Finitions des très petits écrans.
---------------------------------------------------------- */
@media (max-width: 360px) {
  /* Le bouton « site officiel » rognait son icône (36px de large
     pour 42px de contenu). */
  .official-site-nav-btn {
    width: 42px !important;
    min-width: 42px !important;
    padding: 0 !important;
    place-content: center;
    overflow: visible !important;
  }

  .official-site-nav-icon {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
  }
}

@media (max-width: 320px) {
  /* 12px de marge totale collaient les cartes aux bords de l'écran. */
  .tv9-container {
    width: calc(100% - 20px) !important;
  }

  .blog-container,
  .formation-detail-container,
  .article-detail-container {
    width: calc(100% - 20px) !important;
  }

  .events,
  .bim-even,
  .about-details,
  .testimonials,
  .faq-section {
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .header .nav-link {
    padding: 11px 10px !important;
  }
}

/* ==========================================================
   V15 — LE PANNEAU EST ANCRÉ À L'ÉCRAN, PAS À LA PAGE

   En `position: absolute` le panneau suivait le document : ouvert
   depuis le bas du site il s'affichait très au-dessus de la zone
   visible. En `position: fixed` il est toujours devant l'écran,
   quel que soit le défilement, et reste insensible aux
   déplacements de la barre d'adresse d'Android.
   --hopes-header-height est mesurée par navigation.js.
========================================================== */
@media (max-width: 1200px) {
  .header .nav-menu {
    position: fixed !important;
    top: calc(var(--hopes-header-height, 72px) + 8px) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    left: max(12px, env(safe-area-inset-left)) !important;
    max-height: calc(
      100dvh - var(--hopes-header-height, 72px) - 24px - env(safe-area-inset-bottom)
    ) !important;
    -webkit-overflow-scrolling: touch;

    /* Fond OPAQUE, sans backdrop-filter.
       Le panneau est imbriqué dans un en-tête qui possède déjà un
       `backdrop-filter` : deux filtres imbriqués empêchent Chrome de
       recouvrir les couches de composition séparées. Le plan Google Maps
       du pied de page (une iframe) traversait littéralement le menu. */
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body.dark-mode .header .nav-menu {
    background: #0e1410 !important;
  }

  /* L'animation d'ouverture se terminait sur `transform: translateY(0)`
     (fill-mode `both`). Un transform, même identité, maintient l'élément sur
     une couche de composition séparée, ce qui perturbe l'ordre de dessin
     face aux autres couches de la page. On ne laisse plus que l'opacité
     dans l'état final : la couche est libérée dès la fin de l'animation. */
  @keyframes hopesMobileMenuIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; }
  }

  /* Même raison : le voile doit rester un aplat, sans filtre. */
  body.mobile-nav-open::before {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(8, 16, 10, .55) !important;
  }

  /* Garde-fou Android : une iframe tierce est composée dans sa propre couche
     et certains WebView anciens l'affichent au-dessus des calques fixes.
     Le plan est de toute façon masqué par le voile pendant l'ouverture. */
  body.mobile-nav-open .footer-map iframe {
    visibility: hidden !important;
  }
}

/* ==========================================================
   V15 — SECTION « POURQUOI CHOISIR HOPES FORMATION ? »

   La v14 imposait une grille de 2 colonnes jusqu'à 768px, alors
   que style.css prévoyait une pile verticale sous 560px. À 320px
   chaque colonne ne faisait que 90px : l'icône en occupait 52,
   il restait 5px pour le titre, qui s'affichait donc à la
   verticale, une lettre par ligne.

   Deux comportements nets et sans ambiguïté :
     561px → 768px : deux colonnes
     0     → 560px : une seule colonne, carte en ligne
========================================================== */
@media (min-width: 561px) and (max-width: 768px) {
  .about-visual {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  /* Pile verticale : plus aucune colonne étroite possible. */
  .about-visual {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    gap: 12px !important;
  }

  .about-main-image {
    order: -1;
    width: min(100%, 420px) !important;
    max-width: 100% !important;
    margin: 0 auto -6px !important;
  }

  .about-feature,
  .about-feature--trainers,
  .about-feature--certificate,
  .about-feature--practice,
  .about-feature--employment,
  .about-feature--quality,
  .about-feature--environment {
    position: static !important;
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 0 !important;
    align-items: center;
    gap: 12px !important;
    padding: 13px !important;
  }

  /* L'icône garde sa taille mais ne prend plus la place du texte. */
  .about-feature-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    border-radius: 13px !important;
    font-size: 18px !important;
  }

  .about-feature-icon--stars {
    gap: 2px;
    font-size: 11px !important;
  }

  /* min-width: 0 : sans lui un enfant flex refuse de descendre
     sous la largeur de son plus long mot. */
  .about-feature-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .about-feature-content h3 {
    margin-bottom: 3px !important;
    font-size: 13.5px !important;
    line-height: 1.25 !important;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  .about-feature-content p {
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    overflow-wrap: break-word;
  }
}

@media (max-width: 340px) {
  .about-feature,
  .about-feature--trainers,
  .about-feature--certificate,
  .about-feature--practice,
  .about-feature--employment,
  .about-feature--quality,
  .about-feature--environment {
    gap: 10px !important;
    padding: 11px !important;
  }

  .about-feature-icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    flex: 0 0 40px !important;
    font-size: 16px !important;
  }

  .about-feature-content h3 {
    font-size: 13px !important;
  }
}


/* =========================================================
   V20 — DERNIER LIEN DU MENU BURGER INATTEIGNABLE

   Signalé sur téléphone Android : « Tutoriels », dernier
   élément de la liste, ne réagit pas.

   Mesuré à 360x480 (hauteur utile réelle d'un téléphone une
   fois la barre d'adresse et les barres système déduites) :

     panneau visible   64 -> 456   (max-height 392px)
     contenu           478px       -> 88px de trop
     lien « Tutoriels »  439 -> 485

   Le lien était donc coupé en deux : son haut dans le
   panneau, son centre en dessous. Le doigt tombait sur le
   corps de page, `handleOutside` se déclenchait, le menu se
   fermait — sans rien ouvrir. Au-dessus de ~566px de hauteur
   la liste tient entière et le défaut disparaît, ce qui
   explique qu'on ne le voie pas sur un écran d'ordinateur.

   Deux corrections, aucune ne réduit la surface tactile en
   dessous de 42px :
   1. le panneau descend jusqu'au bas de la fenêtre, ce qui
      supprime la bande morte où le doigt se perdait ;
   2. une réserve en bas de la zone de défilement permet au
      dernier lien de se dégager complètement du bord.
========================================================= */
@media (max-width: 1200px) {

  /* La hauteur réelle de l'en-tête est publiée par
     navigation.js (--hopes-header-height) au moment de
     l'ouverture : on s'y accroche plutôt que de figer 64px,
     car l'en-tête change de taille selon la largeur. */
  .header .nav-menu {
    max-height: calc(100dvh - var(--hopes-header-height, 64px) - 13px) !important;
    padding-bottom: 18px !important;
  }
}

/* Écrans courts : téléphone en paysage, ou petit appareil.
   On resserre pour que la liste tienne le plus souvent
   entière, sans descendre sous 42px de hauteur de cible. */
@media (max-width: 1200px) and (max-height: 620px) {

  .header .nav-list {
    gap: 4px !important;
  }

  .header .nav-list .nav-link {
    min-height: 42px !important;
    padding-block: 8px !important;
  }

  .header .lang-switch--menu {
    margin-top: 6px !important;
  }
}


/* =========================================================
   V21 — MENU HORIZONTAL EN MALAGASY

   Les libellés malagasy sont nettement plus longs que les
   français : 88 caractères contre 63 pour les huit entrées.
   « Fifandraisana » pour Contact, « Fanontaniana » pour FAQ,
   « Vavolombelona » pour Témoignages.

   Mesuré à 1280px avant correction :
     .nav-list  largeur utile 829px, contenu 861px  (+32)
     dernier élément « Torolalana » : bord droit 975
     zone .nav-actions : commence à 961
   Le dernier lien passait donc SOUS le sélecteur de langue
   et le bouton d'inscription.

   On resserre l'espacement uniquement quand l'interface est
   en malagasy : le français garde exactement son rendu.
   Le sélecteur se fonde sur <html lang="mg">, posé par i18n.
========================================================= */
@media (min-width: 1280px) {

  html[lang="mg"] .nav-list {
    gap: 14px;
  }

  html[lang="mg"] .nav-list .nav-link {
    padding-inline: 10px;
  }

  /* Le bouton « Tranonkala ofisialy / Hisoratra anarana » est
     lui aussi plus large qu'en français : on lui rend un peu
     de place en réduisant l'écart qui le précède. */
  html[lang="mg"] .nav-actions {
    gap: 10px;
  }
}

/* Bande 1280-1439px : c'est la seule où il manquait encore de
   la place en malagasy (18px après le premier resserrement).
   On la récupère sur les marges extérieures de la barre plutôt
   que sur les liens, qui gardent ainsi leur surface cliquable.
   Au-delà de 1440px tout tient déjà : on n'y touche pas. */
@media (min-width: 1280px) and (max-width: 1439px) {

  html[lang="mg"] .header {
    padding-inline: 26px;
  }

  html[lang="mg"] .nav-list {
    gap: 12px;
  }

  html[lang="mg"] .navbar {
    gap: 12px;
  }
}