/* ==========================================================================
   BCE France — correctifs responsive (mobile / tablette)
   À charger APRÈS css/responsive.css et css/cookies.css dans head.php :
   <link rel="stylesheet" type="text/css" href="css/responsive-fix.css">
   Aucune modification des fichiers du thème Megh : tout est en surcharge.
   ========================================================================== */

:root {
  /* Hauteur réservée sous le menu (absolu) en haut de la bannière.
     Ajuster si le logo/burger chevauche le titre ou laisse trop de vide. */
  --bce-menu-offset-tablet: 150px;
  --bce-menu-offset-mobile: 100px;
}


/* --------------------------------------------------------------------------
   1. Garde-fous globaux (toutes tailles)
   -------------------------------------------------------------------------- */

/* Médias : jamais plus larges que leur conteneur */
video, iframe, embed, object {max-width: 100%;}
video {height: auto;}

/* Bandeau cookies : il porte la classe Bootstrap .row (marges -15px) et se
   trouve hors de .main-page-wrapper, donc hors du overflow-x:hidden.
   => scroll horizontal sur toute la page en mobile. */
#cookies-eu-banner {margin-left: 0; margin-right: 0;}

/* Captcha du formulaire : en .col-md-1 (60 à 80px) l'image déborde sur le champ.
   La colonne prend la largeur de l'image, à toutes les tailles. */
.contact-section form .col-md-1 {flex: 0 0 auto; width: auto; max-width: none;}

/* Boutons "Tamaya" : sur écran tactile, pas de survol => l'effet d'éclatement
   se déclenche au premier tap et le texte coupé en deux moitiés casse dès
   que le libellé passe sur deux lignes. On affiche le bouton à plat. */
@media (hover: none) {
  .button--tamaya::before,
  .button--tamaya::after {display: none;}
  .button--tamaya > span {opacity: 1; transform: none; -webkit-transform: none;}
  .button--tamaya.color-one {background: #0f98dc;}
  .button--tamaya.color-two {background: #215b9a;}
}


/* --------------------------------------------------------------------------
   2. Tablette et en dessous (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {

  /* iOS ignore background-attachment:fixed et zoome l'image */
  .get-started-banner {background-attachment: scroll;}

  /* Bannière : hauteur libre au lieu de 800/700/650px + centrage translateY */
  #theme-main-banner {
    height: auto;
    padding: var(--bce-menu-offset-tablet) 0 70px;
  }
  #theme-main-banner .container {top: auto; transform: none;}
  .banner-one h1 {padding-top: 0;}

  /* Sections : on resserre les grands espacements desktop */
  .service-bg, .project-bg {padding: 50px 0 60px;}
  .latest-news .theme-title-one {margin-bottom: 40px;}

  /* Newsletter : la .row en -30px déborde de la carte une fois le padding réduit */
  .subscription-form .row {margin: 0;}
  .subscription-form .row [class*="col-"] {padding: 0;}
  /* le -45px prévu pour chevaucher le footer colle la section contact à la carte */
  .subscription-form {margin-bottom: 0;}

  /* AOS + Owl Carousel : les items clonés par Owl ne sont jamais "révélés"
     par AOS => cartes vides en boucle. On neutralise l'animation en mobile. */
  [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  /* Bloc actualité (tableau vidéo + texte) : on empile les cellules */
  .latest-news table,
  .latest-news tbody,
  .latest-news tr,
  .latest-news td {display: block; width: 100%;}
  .latest-news td {padding: 0 !important;}         /* annule le padding-left:2em inline */
  .latest-news td + td {padding-top: 25px !important;}
  .latest-news video {width: 100%;}
  .latest-news td h5 {padding-bottom: 10px;}
}


/* --------------------------------------------------------------------------
   3. Smartphone (< 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

  /* Typo : titres proportionnels à l'écran au lieu de 38-45px fixes */
  h2,
  .contact-section .title h2 {font-size: clamp(26px, 7.5vw, 34px); line-height: 1.25;}
  h3 {font-size: 24px; line-height: 32px;}
  .section-spacing {padding-top: 40px;}

  /* Logo : "margin: 0 40%" ne centre pas vraiment et peut chevaucher le burger.
     max-width laisse la place au bouton burger (.collapse-button) à droite. */
  .theme-main-menu .logo {
    left: 50%;
    margin: 0;
    transform: translateX(-50%);
    max-width: 55%;
  }
  .theme-main-menu .logo img {max-height: 50px; width: auto; max-width: 100%;}

  /* Le menu est en absolute au-dessus de la bannière : 35px d'air suffisent
     largement en haut de page sur un téléphone */
  .theme-main-menu {padding-top: 15px;}
  .theme-menu-wrapper.fixed {padding-top: 5px;}

  /* Menu déplié : si le téléphone est en paysage, il doit rester scrollable */
  #mega-menu-holder > ul.collapsed {
    max-height: calc(100vh - 90px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* Zones de tap confortables dans le menu déplié */
  #mega-menu-holder > ul.collapsed li > a {padding-top: 12px; padding-bottom: 12px;}

  /* Bannière */
  #theme-main-banner {padding: var(--bce-menu-offset-mobile) 0 50px;}
  #theme-main-banner h1 {font-size: clamp(26px, 8vw, 38px); line-height: 1.2;}
  .banner-one p {font-size: 16px; line-height: 26px; padding: 20px 0 25px;}

  /* Boutons de la bannière : pleine largeur, empilés */
  #theme-main-banner ul {display: block; margin: 0;}
  #theme-main-banner ul li {float: none; padding: 0; margin-top: 10px;}
  #theme-main-banner .theme-button-one {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    font-size: 16px;
  }

  /* Boutons du thème en général : pas de min-width 190px qui déborde */
  body .theme-button-one {min-width: 0; font-size: 16px; line-height: 46px;}
  .intro-section .text .theme-button-one {width: 100%; max-width: none;}

  /* Intro "Depuis 1997" */
  .intro-section .round-box .since-text strong {font-size: 56px;}
  .intro-section .round-box .since-text span {font-size: 20px;}
  .intro-section .text h3 {padding: 30px 0 20px;}
  .intro-section .text p {font-size: 16px; line-height: 27px;}

  /* Cartes services */
  .our-service-v1 .single-service-block {padding: 35px 20px 30px;}
  .our-service-v1 .single-service-block h5 {padding-bottom: 25px;}
  .theme-title-one p {font-size: 16px; line-height: 26px; padding: 20px 0 10px;}

  /* Newsletter : 16px mini sinon iOS zoome au focus */
  .subscription-form form input {font-size: 16px;}

  /* Contact : espacements desktop beaucoup trop grands */
  .contact-section .title {padding-bottom: 30px;}
  .contact-section .title h2 {padding-bottom: 20px;}
  .contact-section .title p {font-size: 16px;}
  .contact-section form input,
  .contact-section form textarea,
  .contact-section form #category-select {margin-bottom: 30px; font-size: 16px;}
  .contact-section form textarea {height: 160px;}

  /* Captcha : image et champ sur la même ligne au lieu de deux blocs empilés */
  .contact-section form .col-md-1 img {margin-bottom: 30px;}
  .contact-section form .col-md-3 {flex: 1 1 0; width: auto; min-width: 0;}
  .contact-section form .col-md-4 p {font-size: 15px !important; line-height: 22px;}

  /* Bouton Envoyer pleine largeur, mention CNIL lisible (11px inline) */
  .contact-section form > .theme-button-one {width: 100%; max-width: none;}
  .contact-section p[style*="font-size:11px"] {font-size: 12px !important; line-height: 17px !important;}

  /* Footer : colonnes vides masquées, contenu centré */
  .theme-main-footer .footer-latest-news,
  .theme-main-footer .footer-information {display: none;}
  .theme-main-footer .top-footer .row > div {text-align: center;}
  .theme-main-footer .about-widget ul li a {margin: 0 5px;}
  .theme-main-footer .footer-list .logo img {margin: 15px auto 0; max-width: 180px;}
  .theme-main-footer .bottom-footer p {font-size: 13px; line-height: 22px;}

  /* Bouton retour en haut : 25px, trop petit au doigt */
  .scroll-top {width: 40px; height: 40px; right: 10px; bottom: 15px;}

  /* Bandeau cookies : tableau lien/bouton empilé */
  #cookies-eu-banner {padding: 12px 15px; font-size: 14px; line-height: 20px;}
  #cookies-eu-banner table,
  #cookies-eu-banner tbody,
  #cookies-eu-banner tr,
  #cookies-eu-banner td {display: block; width: 100%; text-align: center;}
  #cookies-eu-banner td {padding: 6px 0;}
  #cookies-eu-banner #cookies-eu-accept {display: inline-block; min-width: 140px;}
}


/* --------------------------------------------------------------------------
   4. Petits smartphones (< 400px)
   -------------------------------------------------------------------------- */
@media (max-width: 399px) {
  .intro-section .round-box {padding: 40px 12px;}
  .subscription-form {padding: 30px 10px;}
}