/* =========================================================
   RESPONSIVE FLEX PERFORMANCE — MOBILE / TABLETTE
   Ce fichier doit être chargé après global.css et les CSS pages.
========================================================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Images, vidéos et iframes fluides */
img,
video,
iframe {
  max-width: 100%;
}

/* HEADER DESKTOP STABLE */
.site-header {
  z-index: 1000;
}

.nav {
  max-width: 1640px;
  width: 100%;
  min-height: 92px;
  height: auto;
  padding: 12px 34px;
  gap: 24px;
  position: relative;
}

.logo {
  width: 180px;
  min-width: 180px;
  height: 68px;
  display: flex;
  align-items: center;
}

.logo img {
  width: 100%;
  height: auto;
  max-height: 68px;
  object-fit: contain;
}

.nav-links {
  min-width: 0;
  gap: 6px;
}

.nav-pill {
  padding: 10px 12px;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}

.contact-btn {
  padding: 12px 18px;
  font-size: 0.68rem;
  white-space: nowrap;
}

.nav-toggle,
.nav-toggle-label {
  display: none;
}

/* TABLETTE */
@media (max-width: 1180px) {
  .nav {
    padding: 12px 22px;
    gap: 16px;
  }

  .logo {
    width: 150px;
    min-width: 150px;
    height: 60px;
  }

  .logo img {
    max-height: 60px;
  }

  .nav-pill {
    padding: 9px 10px;
    font-size: 0.66rem;
    letter-spacing: 0.1em;
  }

  .contact-btn {
    padding: 11px 14px;
    font-size: 0.64rem;
  }
}

/* MENU BURGER TABLETTE / MOBILE */
@media (max-width: 980px) {
  .site-header {
    position: sticky;
    top: 0;
  }

  .nav {
    min-height: 78px;
    padding: 10px 16px;
    justify-content: space-between;
    gap: 12px;
  }

  .logo {
    width: 155px;
    min-width: 155px;
    height: 56px;
  }

  .logo img {
    max-height: 56px;
  }

  .nav-toggle {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }

  .nav-toggle-label {
    display: inline-flex;
    width: 46px;
    height: 46px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border-radius: 999px;
    border: 1px solid rgba(255, 36, 56, 0.55);
    background: rgba(255, 36, 56, 0.1);
    cursor: pointer;
    order: 3;
    flex-shrink: 0;
  }

  .nav-toggle-label span {
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: #fff;
    transition: 0.25s ease;
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle:checked + .nav-toggle-label span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .nav-links {
    position: absolute;
    left: 12px;
    right: 12px;
    top: calc(100% + 8px);
    display: none;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 12px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(8, 8, 12, 0.98);
    box-shadow: 0 22px 60px rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(18px);
    z-index: 1001;
  }

  .nav-toggle:checked ~ .nav-links {
    display: grid;
  }

  .nav-pill {
    width: 100%;
    justify-content: flex-start;
    padding: 13px 14px;
    min-height: 44px;
    font-size: 0.76rem;
    letter-spacing: 0.12em;
    border-color: rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.025);
  }

  .contact-btn {
    order: 2;
    margin-left: auto;
    padding: 11px 14px;
    min-height: 44px;
    font-size: 0.66rem;
  }
}

@media (max-width: 620px) {
  .nav {
    padding: 9px 12px;
  }

  .logo {
    width: 132px;
    min-width: 132px;
    height: 50px;
  }

  .logo img {
    max-height: 50px;
  }

  .contact-btn {
    display: none;
  }

  .nav-toggle-label {
    margin-left: auto;
  }

  .nav-links::after {
    content: "";
    display: none;
  }

  .nav-links {
    left: 10px;
    right: 10px;
  }
}

/* SOCIAL BAR */
@media (max-width: 700px) {
  .floating-social-bar {
    top: auto !important;
    bottom: 14px !important;
    right: 50% !important;
    left: auto !important;
    transform: translateX(50%) !important;
    flex-direction: row !important;
    border-radius: 999px !important;
    border-right: 1px solid #2b2d35 !important;
    padding: 8px 10px !important;
    gap: 6px !important;
  }

  .floating-social-bar a {
    width: 36px;
    height: 36px;
  }

  .floating-social-bar a span {
    font-size: 18px;
  }
}

/* TYPO / ESPACEMENTS GLOBAUX */
@media (max-width: 900px) {
  .container {
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  section {
    scroll-margin-top: 90px;
  }

  .hero-title,
  .galerie-title,
  .reprog-title,
  .faq-title,
  .legal-title,
  .contact-intro h1 {
    font-size: clamp(2rem, 8vw, 3.2rem) !important;
    line-height: 1.05 !important;
  }

  .hero-text,
  .section-text,
  .contact-text,
  .galerie-text,
  .reprog-text {
    font-size: 0.95rem !important;
    line-height: 1.75 !important;
  }
}

@media (max-width: 560px) {
  .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .btn-main,
  .btn-secondary {
    width: 100%;
    min-height: 46px;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
  }
}

/* ACCUEIL */
@media (max-width: 900px) {
  .hero-home {
    padding: 1.4rem 0 1rem !important;
  }

  .hero-panel {
    min-height: 360px !important;
    border-radius: 22px !important;
    background-position: center !important;
  }

  .hero-content {
    padding: 2rem 1.25rem !important;
  }

  .presentation-grid,
  .contact-grid,
  .map-card,
  .pricing-grid,
  .galerie-grid,
  .faq-grid,
  .contact-main-grid,
  .contact-hero-grid,
  .map-contact-card,
  .performance-card,
  .why-grid,
  .services-grid,
  .home-gallery-grid {
    grid-template-columns: 1fr !important;
  }

  .presentation-card,
  .contact-card,
  .map-card,
  .pricing-card,
  .galerie-card,
  .faq-card,
  .contact-form-card,
  .zone-card,
  .map-contact-card {
    border-radius: 18px !important;
  }
}

@media (max-width: 560px) {
  .hero-panel {
    min-height: 300px !important;
  }

  .hero-content {
    padding: 1.35rem 1rem !important;
  }

  .hero-title {
    font-size: clamp(2rem, 11vw, 2.8rem) !important;
  }

  .hero-badge,
  .section-kicker,
  .contact-badge,
  .galerie-badge,
  .reprog-badge,
  .faq-badge {
    font-size: 0.62rem !important;
    letter-spacing: 0.1em !important;
  }
}

/* TARIFS */
@media (max-width: 900px) {
  .hero-tarifs {
    padding: 2rem 0 1rem !important;
  }

  .pricing-card {
    padding: 1.2rem !important;
  }

  .pricing-row {
    align-items: flex-start !important;
    gap: 0.8rem !important;
  }
}

@media (max-width: 520px) {
  .pricing-row {
    flex-direction: column !important;
  }

  .price,
  .price-from {
    width: 100%;
    text-align: left;
  }
}

/* GALERIE */
@media (max-width: 900px) {
  .galerie-hero-panel,
  .galerie-cta-card {
    padding: 1.4rem !important;
    border-radius: 22px !important;
  }

  .galerie-image-btn img,
  .galerie-card img {
    height: 220px !important;
  }

  .galerie-filters {
    overflow-x: auto;
    flex-wrap: nowrap !important;
    padding-bottom: 6px;
  }

  .filter-btn {
    white-space: nowrap;
    flex: 0 0 auto;
  }
}

/* CONTACT */
@media (max-width: 900px) {
  .contact-hero,
  .contact-main-section,
  .map-section-contact {
    padding-top: 1.4rem !important;
  }

  .form-row,
  .info-grid {
    grid-template-columns: 1fr !important;
  }

  .contact-form input,
  .contact-form select,
  .contact-form textarea {
    font-size: 16px !important; /* évite le zoom iPhone */
  }
}

/* CARTES GOOGLE */
@media (max-width: 900px) {
  .map-frame,
  .map-frame-contact,
  .map-frame-wrap-contact {
    height: 310px !important;
    min-height: 310px !important;
  }
}

/* ADMIN */
@media (max-width: 900px) {
  .admin-bar,
  .admin-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .admin-actions a,
  .admin-actions .btn-secondary,
  .admin-actions .btn-main {
    width: 100% !important;
    text-align: center !important;
  }

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

  .admin-table-wrap {
    overflow-x: auto !important;
  }

  .admin-table {
    min-width: 680px;
  }
}

/* FOOTER */
@media (max-width: 760px) {
  .site-footer {
    padding-bottom: 84px; /* place pour barre sociale mobile */
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }

  .footer-links {
    justify-content: center;
    gap: 0.8rem 1rem;
  }
}



/* =========================================================
   FIX MOBILE FINAL — FLEX PERFORMANCE
   Garde le design actuel, corrige mobile/tablette.
========================================================= */

/* Sécurité globale */
*,
*::before,
*::after{
  box-sizing:border-box;
}

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

/* Empêche les textes et cartes de déborder */
h1,h2,h3,p,a,span,strong,small,li,td,th{
  overflow-wrap:anywhere;
}

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

/* HEADER MOBILE/TABLETTE */
@media(max-width:980px){

  .site-header{
    position:sticky;
    top:0;
    z-index:100000;
  }

  .nav{
    min-height:74px !important;
    height:auto !important;
    padding:10px 14px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
  }

  .logo{
    width:150px !important;
    min-width:150px !important;
    height:54px !important;
    display:flex !important;
    align-items:center !important;
  }

  .logo img{
    width:100% !important;
    height:auto !important;
    max-height:54px !important;
    object-fit:contain !important;
  }

  .nav-toggle-label{
    display:inline-flex !important;
    order:3 !important;
    margin-left:auto !important;
  }

  .nav-links{
    position:absolute !important;
    left:12px !important;
    right:12px !important;
    top:calc(100% + 8px) !important;
    width:auto !important;
    display:none !important;
    grid-template-columns:1fr !important;
    padding:12px !important;
    gap:8px !important;
    border-radius:20px !important;
    background:rgba(8,8,12,.98) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    box-shadow:0 22px 60px rgba(0,0,0,.75) !important;
    backdrop-filter:blur(18px) !important;
    z-index:100001 !important;
  }

  .nav-toggle:checked ~ .nav-links{
    display:grid !important;
  }

  .nav-pill{
    width:100% !important;
    justify-content:flex-start !important;
    min-height:44px !important;
    padding:13px 14px !important;
    font-size:.74rem !important;
    letter-spacing:.10em !important;
    border:1px solid rgba(255,255,255,.06) !important;
    background:rgba(255,255,255,.025) !important;
  }

  .contact-btn{
    order:2 !important;
    margin-left:auto !important;
    white-space:nowrap !important;
  }
}

@media(max-width:620px){
  .nav{
    min-height:68px !important;
    padding:9px 12px !important;
  }

  .logo{
    width:132px !important;
    min-width:132px !important;
    height:48px !important;
  }

  .logo img{
    max-height:48px !important;
  }

  .contact-btn{
    display:none !important;
  }
}

/* BARRE SOCIALE : PC à droite, mobile en bas */
@media(max-width:780px){

  body{
    padding-bottom:86px !important;
  }

  .floating-social-bar{
    top:auto !important;
    right:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:100% !important;
    transform:none !important;

    display:flex !important;
    flex-direction:row !important;
    justify-content:space-around !important;
    align-items:center !important;
    gap:0 !important;

    padding:10px 14px calc(10px + env(safe-area-inset-bottom)) !important;
    background:rgba(5,5,7,.98) !important;
    border:none !important;
    border-top:1px solid #24242c !important;
    border-radius:0 !important;
    box-shadow:0 -12px 35px rgba(0,0,0,.65) !important;
    z-index:99999 !important;
  }

  .floating-social-bar a{
    width:46px !important;
    height:46px !important;
    border-radius:14px !important;
  }

  .floating-social-bar a span{
    font-size:24px !important;
    color:#fff !important;
  }
}

/* BOUTONS ET FORMULAIRES */
@media(max-width:760px){

  .btn-main,
  .btn-secondary,
  .contact-submit,
  button.btn-main,
  button.btn-secondary{
    width:100% !important;
    min-height:48px !important;
    padding:.85rem 1rem !important;
    font-size:.72rem !important;
    letter-spacing:.10em !important;
    text-align:center !important;
  }

  input,
  select,
  textarea{
    font-size:16px !important;
  }

  textarea{
    min-height:140px !important;
  }
}

/* GRILLES : passage propre en 1 colonne */
@media(max-width:900px){

  .services-grid,
  .services-grid.essential,
  .hero-trust,
  .proof-card,
  .contact-short-card,
  .home-gallery-preview,
  .reviews-grid,
  .contact-hero-card,
  .contact-main-grid,
  .contact-layout,
  .form-layout,
  .map-card,
  .map-contact-card,
  .pricing-grid,
  .faq-grid,
  .galerie-grid,
  .ethanol-grid,
  .ethanol-form-grid,
  .cles-grid,
  .admin-grid,
  .quick-contact-grid,
  .contact-cards-grid,
  .form-row{
    grid-template-columns:1fr !important;
  }

  .home-gallery-item.large{
    grid-column:auto !important;
    grid-row:auto !important;
  }

  .section-heading.split,
  .reviews-heading,
  .home-reviews-header{
    grid-template-columns:1fr !important;
    flex-direction:column !important;
    align-items:flex-start !important;
  }
}

/* ESPACEMENTS PAGES */
@media(max-width:760px){

  .container{
    width:100% !important;
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .hero-home,
  .contact-hero,
  .galerie-hero,
  .faq-hero,
  .hero-tarifs,
  .reprog-wrap{
    padding-top:1.4rem !important;
  }

  .home-section,
  .contact-form-section,
  .contact-main-section,
  .form-section,
  .zone-section,
  .cities-section,
  .map-section,
  .map-section-contact,
  .galerie-section,
  .faq-section,
  .tarifs-section{
    padding-top:1.4rem !important;
    padding-bottom:1.8rem !important;
  }

  .hero-panel,
  .contact-hero-inner,
  .contact-hero-card,
  .galerie-hero-panel,
  .faq-hero-card,
  .proof-card,
  .contact-short-card,
  .contact-form-card,
  .contact-side-card,
  .side-card,
  .zone-card,
  .cities-card,
  .map-card,
  .map-contact-card,
  .seo-card,
  .service-card,
  .pricing-card,
  .faq-card,
  .galerie-card,
  .card{
    border-radius:18px !important;
    padding:1.15rem !important;
  }

  .hero-content{
    min-height:auto !important;
    padding:1.5rem 1.05rem !important;
  }

  .hero-panel{
    min-height:auto !important;
  }
}

/* TITRES MOBILE */
@media(max-width:760px){

  .hero-title,
  .hero-left h1,
  .hero-copy h1,
  .contact-hero h1,
  .galerie-title,
  .faq-title,
  .reprog-title{
    font-size:clamp(1.85rem,9vw,2.55rem) !important;
    line-height:1.05 !important;
    letter-spacing:-.03em !important;
  }

  .section-title,
  .contact-form-card h2,
  .contact-side-card h2,
  .side-card h2,
  .zone-card h2,
  .cities-card h2,
  .map-copy h2,
  .seo-card h2{
    font-size:clamp(1.45rem,7vw,2.05rem) !important;
    line-height:1.12 !important;
  }

  .hero-text,
  .section-text,
  .contact-muted,
  .contact-hero p,
  .galerie-text,
  .faq-text,
  .reprog-text{
    font-size:.94rem !important;
    line-height:1.72 !important;
  }

  .hero-badge,
  .section-kicker,
  .contact-badge,
  .galerie-badge,
  .faq-badge,
  .reprog-badge{
    font-size:.62rem !important;
    letter-spacing:.09em !important;
    padding:.45rem .75rem !important;
  }
}

/* GALERIE MOBILE */
@media(max-width:760px){

  .home-gallery-preview{
    grid-auto-rows:220px !important;
  }

  .galerie-grid{
    gap:1rem !important;
  }

  .galerie-image-btn img,
  .galerie-card img,
  .home-gallery-item img{
    height:220px !important;
    object-fit:cover !important;
  }

  .galerie-filters{
    display:flex !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    padding-bottom:6px !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .filter-btn{
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }
}

/* AVIS DÉFILANTS MOBILE */
@media(max-width:760px){

  .reviews-marquee::before,
  .reviews-marquee::after{
    width:30px !important;
  }

  .review-card{
    flex:0 0 285px !important;
    min-height:280px !important;
    padding:1.1rem !important;
  }

  .reviews-track{
    animation-duration:110s !important;
  }
}

/* TABLEAUX ADMIN/TARIFS */
@media(max-width:760px){

  .admin-table-wrap{
    width:100% !important;
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .admin-table{
    min-width:680px !important;
  }

  .pricing-row{
    align-items:flex-start !important;
    gap:.7rem !important;
  }
}

@media(max-width:520px){
  .pricing-row{
    flex-direction:column !important;
  }

  .price,
  .price-from{
    width:100% !important;
    text-align:left !important;
  }
}

/* IFRAMES / CARTES */
@media(max-width:760px){

  .map-frame-wrap,
  .map-frame,
  .map-frame-wrap-contact,
  .map-frame-contact{
    height:300px !important;
    min-height:300px !important;
  }

  .reprog-widget{
    overflow-x:auto !important;
    padding:.75rem !important;
    -webkit-overflow-scrolling:touch !important;
  }
}

/* FOOTER */
@media(max-width:760px){

  .site-footer{
    padding-bottom:94px !important;
  }

  .footer-inner{
    flex-direction:column !important;
    text-align:center !important;
  }

  .footer-links{
    justify-content:center !important;
    gap:.8rem 1rem !important;
  }
}