/* =============================================================
   Bourille — mobile.css
   Affichage smartphone / tablette du front public (chargé après theme.css).
   Tout est dans des media queries : le rendu desktop (>= 992px) n'est pas touché
   (seule exception : le menu mobile fermé est masqué aux lecteurs d'écran et au clavier).
   Repères visés : titres lisibles sur photo (contraste), zones tactiles de 44px,
   champs en 16px (pas de zoom automatique sur iOS), espacements réduits.
   Les !important l'emportent sur les classes générées par l'éditeur de templates
   (class-xxx) et sur les utilitaires Bootstrap (text-primary).
   ============================================================= */

/* Menu fermé : ses liens hors écran ne doivent pas recevoir le focus clavier */
.tgmobile__menu { visibility: hidden; }
.mobile-menu-visible .tgmobile__menu { visibility: visible; }

/* ---------- Smartphone + tablette (menu burger) ---------- */
@media (max-width: 991.98px) {

  /* En-tête : 147px de haut à l'origine, soit 20 % de l'écran une fois collant */
  .b-site-header .tg-header__area {
    padding: 8px 0 !important;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: none;
  }
  .b-site-header .tgmenu__nav .logo img {
    width: auto !important;
    height: 52px !important;
    max-width: none;
    padding: 0 !important;
  }
  .b-site-header .tgmenu__nav { justify-content: flex-start; }
  .b-site-header .tgmenu__nav .logo { margin-right: auto; }
  .b-site-header .tgmenu__action { margin-right: 12px; }

  /* Bouton du menu : icône universelle et mot « Menu », plus clairs que la grille de points */
  .b-site-header .mobile-nav-toggler {
    gap: 8px;
    width: auto;
    height: 44px;
    margin-top: 0;
    padding: 0 14px;
    border: 0;
    font-size: 15px;
    font-weight: 600;
  }
  .b-site-header .mobile-nav-toggler svg { flex: none; }

  /* Appel direct depuis n'importe quelle page */
  .b-header-call {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 44px;
    height: 44px;
    margin-right: 8px;
    border-radius: 10px;
    background: var(--tg-theme-primary-500);
    color: #fff;
    font-size: 17px;
  }
  .b-header-call:hover,
  .b-header-call:focus { color: #fff; }

  /* Bannière : voile sombre et texte blanc, lisibles quelle que soit la photo */
  .banner-area {
    padding: 104px 0 44px !important;
    min-height: 0;
  }
  .banner-area::before {
    background: linear-gradient(to bottom, rgba(20, 20, 20, 0.55) 0%, rgba(20, 20, 20, 0.68) 100%);
  }
  .banner-area .banner-content { text-align: center; }
  .banner-area .banner-content .title {
    color: #fff !important;
    font-size: clamp(28px, 8vw, 40px) !important;
    line-height: 1.15;
    margin-bottom: 14px;
  }
  .banner-area .banner-content p {
    color: #fff !important;
    font-size: 17px !important;
    line-height: 1.45;
    margin-bottom: 24px;
  }
  /* Fil d'Ariane : repère utile sur les pages intérieures, inutile sur l'accueil (« Accueil > Accueil ») */
  .b-home .banner-area .b-breadcrumb { display: none; }
  .banner-area .b-breadcrumb .breadcrumb {
    justify-content: center;
    margin-bottom: 10px;
    font-size: 14px;
  }
  .banner-area .b-breadcrumb .breadcrumb-item,
  .banner-area .b-breadcrumb .breadcrumb-item::before,
  .banner-area .b-breadcrumb .breadcrumb-item a { color: #fff !important; }
  .banner-area .b-breadcrumb .breadcrumb-item a {
    display: inline-block;
    padding: 12px 4px;
    margin: -12px -4px;
    text-decoration: underline;
  }
  .banner-area .banner-content > div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
  .banner-area .banner-content > div .btn {
    margin: 0 !important;
    min-height: 48px;
  }

  /* Espacement vertical : 100 à 124px en haut et en bas de chaque section à l'origine */
  main section:not(.banner-area):not(.partners__area-six) {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }
  .footer-top { padding: 56px 0 16px !important; }

  /* Bandeau défilant des partenaires */
  .partners__area-six {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
  .partners__area-six .text-stroke {
    font-size: 36px !important;
    line-height: 1.2;
  }

  /* Formes décoratives flottantes par-dessus le contenu */
  .counter-shape-wrap,
  .faqs__area-six .circle,
  .footer-shape img:nth-child(3) { display: none; }

  /* Contrastes : texte sombre sur fond rouge */
  .choose-area .sub-title,
  .faqs__area-six h6 { color: #fff !important; }

  /* FAQ : question identifiable comme dépliable, zone tactile confortable */
  .faqs__area-six .accordion-item {
    border: 0 !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12) !important;
    border-radius: 0 !important;
    background: transparent;
    box-shadow: none;
  }
  .faqs__area-six .accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 56px;
    margin: 0;
    padding: 12px 0;
    font-size: 18px !important;
    line-height: 1.3;
  }
  .faqs__area-six .accordion-header::after {
    content: "+";
    flex: none;
    width: 28px;
    font-size: 26px;
    line-height: 1;
    font-weight: 400;
    text-align: center;
  }
  .faqs__area-six .accordion-header:has(+ .show)::after { content: "\2212"; }
  .faqs__area-six .accordion-body {
    margin-bottom: 14px;
    padding: 14px 16px !important;
  }

  /* Carte : 420px à l'origine, presque un écran entier */
  .contact-map {
    height: auto;
    margin-bottom: 36px;
  }
  .contact-map .b-map { height: 300px !important; }

  /* Coordonnées et formulaire de contact */
  .contact__info a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: inherit;
    text-decoration: underline;
  }
  .contact__form-wrap input,
  .contact__form-wrap textarea {
    font-size: 16px !important;
  }
  .contact__form-wrap input { min-height: 50px; }

  /* Pied de page */
  .footer-widget { margin-bottom: 28px; }
  .fw-logo img {
    width: 130px !important;
    height: auto !important;
    max-width: 100%;
    max-height: none;
  }
  .footer-link-list .list-wrap li { margin-bottom: 0; }
  .footer-link-list .list-wrap li a {
    display: block;
    padding: 10px 0;
    line-height: 1.3;
  }
  .footer-social .social-linkedin li a {
    padding: 14px 16px !important;
    line-height: 16px !important;
  }
  /* padding bas : le bouton « retour en haut » ne recouvre pas le copyright */
  .footer-bottom { text-align: center; padding-bottom: 76px; }
  .footer-bottom .footer-newsletter p,
  .footer-bottom .footer-newsletter p a { color: inherit !important; }
  /* Liens légaux déjà présents dans « Liens utiles » */
  .footer-bottom .copyright-text ul { display: none !important; }

  /* Menu mobile : volet large mais qui laisse voir la page, en-tête compact,
     liste défilante et actions principales fixées en bas, à portée de pouce */
  .tgmobile__menu {
    width: min(340px, 88vw);
    padding-right: 0;
  }
  .tgmobile__menu-box { overflow: hidden; }
  .tgmobile__menu .nav-logo { padding: 10px 16px; }
  .tgmobile__menu .nav-logo img {
    display: block;
    max-height: 44px;
  }
  .tgmobile__menu-box .close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    right: 10px;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
  }
  .b-mobile-menu-scroll {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* Rubriques : texte sombre (le rouge est réservé à la page courante), lignes de 52px */
  .tgmobile__menu .navigation > li > a,
  .b-mobile-submenu-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 52px;
    padding: 10px 16px;
    border: 0;
    background: transparent;
    color: var(--tg-theme-secondary-500);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
  }
  .b-mobile-submenu-toggle { justify-content: space-between; gap: 12px; }
  .b-mobile-submenu-toggle::after {
    content: "";
    flex: none;
    width: 10px;
    height: 10px;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform 0.2s ease;
  }
  .b-mobile-submenu-toggle[aria-expanded="true"]::after { transform: translateY(3px) rotate(-135deg); }

  /* Sous-pages : retrait et fond léger pour distinguer les niveaux */
  .tgmobile__menu .navigation li > ul { background: rgba(0, 0, 0, 0.03); }
  .tgmobile__menu .navigation li ul li > a {
    display: flex;
    align-items: center;
    min-height: 46px;
    margin-left: 0;
    padding: 10px 16px 10px 28px;
    color: var(--tg-theme-secondary-500);
    font-size: 15px;
    line-height: 1.3;
  }

  /* Page courante */
  .tgmobile__menu .navigation li.active > .b-mobile-submenu-toggle { font-weight: 700; }
  .tgmobile__menu .navigation li > a[aria-current="page"] {
    color: var(--tg-theme-primary-500);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--tg-theme-primary-500);
  }

  /* Mode sombre : la couleur secondaire du thème serait trop peu contrastée sur le fond du volet */
  [data-bs-theme=dark] .tgmobile__menu .navigation > li > a:not([aria-current]),
  [data-bs-theme=dark] .tgmobile__menu .navigation li ul li > a:not([aria-current]),
  [data-bs-theme=dark] .b-mobile-submenu-toggle,
  [data-bs-theme=dark] .tgmobile__menu-box .close-btn { color: #fff; }
  [data-bs-theme=dark] .tgmobile__menu .navigation li > ul { background: rgba(255, 255, 255, 0.05); }
  [data-bs-theme=dark] .tgmobile__menu .navigation li,
  [data-bs-theme=dark] .b-mobile-menu-cta { border-color: rgba(255, 255, 255, 0.15); }

  /* Coordonnées secondaires */
  .tgmobile__menu-bottom { padding: 16px; }
  .tgmobile__menu-bottom .contact-info a {
    display: inline-block;
    margin-bottom: 0;
    padding: 10px 0;
    overflow-wrap: anywhere;
  }

  .tgmobile__menu-bottom .social-links .social-linkedin li a {
    padding: 14px 16px;
    line-height: 16px;
  }

  /* Actions principales */
  .b-mobile-menu-cta {
    display: flex;
    flex: none;
    gap: 8px;
    padding: 10px 16px 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
  }
  .b-mobile-menu-cta a {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    border-radius: 10px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
  }
  .b-mobile-menu-cta a:hover,
  .b-mobile-menu-cta a:focus { color: #fff; }
  .b-mobile-menu-cta__call { background: var(--tg-theme-primary-500); }
  .b-mobile-menu-cta__write { background: #333; }

  /* Retour en haut */
  .scroll__top {
    width: 44px;
    height: 44px;
    line-height: 44px;
    right: 16px;
  }
  .scroll__top::after { display: none; }
}

/* ---------- Smartphone ---------- */
@media (max-width: 767.98px) {
  main section:not(.banner-area):not(.partners__area-six) {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .footer-top { padding-top: 40px !important; }

  /* Hiérarchie des titres : 40px et 32px à l'origine sur un écran de 375px */
  main .section-title .title,
  main h1.tg-element-title,
  main h2.tg-element-title,
  .contact__form-wrap .title {
    font-size: clamp(24px, 7vw, 28px) !important;
    line-height: 1.2;
  }

  .banner-area .banner-content > div .btn { flex: 1 1 100%; justify-content: center; }

  /* Largeurs fixes du thème qui dépassent sur un écran de 320px */
  .mask-img-wrap,
  .mask-img-wrap img,
  main .btn { max-width: 100%; }
  main .btn { white-space: normal; }

  /* Formulaire : on se présente avant d'écrire, bouton pleine largeur */
  #contact-form {
    display: flex;
    flex-direction: column;
  }
  #contact-form > .row { order: -1; }
  #contact-form > .btn {
    width: 100%;
    justify-content: center;
    min-height: 50px;
  }
}

/* ---------- Petit smartphone : colonnes courtes du pied de page côte à côte ---------- */
@media (max-width: 575.98px) {
  .footer-top .row > :nth-child(3),
  .footer-top .row > :nth-child(4) {
    flex: 0 0 50%;
    width: 50%;
    max-width: 50%;
  }
}

/* ---------- Mouvement réduit demandé dans les réglages du téléphone ---------- */
@media (prefers-reduced-motion: reduce) {
  .tgmobile__menu,
  .tgmobile__menu-backdrop { transition: none; }
}