/* ============================================================
   ADME-AI Studio · responsive-fixes.css
   Global mobile-first responsive overhaul · juin 2026
   Inject via Code Snippets (PHP wp_head priority 20) or
   wp_enqueue_style after the theme stylesheet.
   ============================================================ */

/* ---- 0. Variables shared with V2 ------------------------- */
:root{
  --adme-navy:#070A12;
  --adme-navy-2:#0B1222;
  --adme-card:#0E172B;
  --adme-stroke:rgba(255,255,255,.10);
  --adme-text:#EAF0FF;
  --adme-muted:rgba(234,240,255,.72);
  --adme-blue:#2C6BFF;
  --adme-gold:#C9A24A;
  --adme-radius:22px;
  --adme-radius-sm:14px;
  --adme-container:1240px;
  --adme-fs-body:clamp(15px,1.6vw,18px);
  --adme-fs-h2:clamp(32px,6vw,64px);
  --adme-fs-h1:clamp(48px,11vw,168px);
  --adme-pad-section-y:clamp(60px,8vw,120px);
  --adme-pad-section-x:clamp(20px,5vw,40px);
}

/* ---- 1. Base globals & safe-area ------------------------- */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{
  font-size:var(--adme-fs-body);
  line-height:1.6;
}
img,video,iframe{ max-width:100%; height:auto; }

/* Safe-area inset (iPhone notch + home indicator) */
@supports (padding:max(0px)){
  body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
  }
}

/* ---- 2. CRITICAL TABLET (768-1023) hero V2 fix ----------- */
/* Bug : zone noire vide à 768px → hero-v2 utilise 100vh sur iOS
   Safari, et l'overlay sombre + video opacity cachent le texte.
   Fix : 100svh (small viewport) + min-height, z-index isolated. */
.hero-v2{
  min-height:100svh;
  min-height:100vh;    /* fallback */
  height:auto;
  isolation:isolate;
}
.hero-v2 .hero-v2__inner{
  min-height:100svh;
  min-height:100vh;
  position:relative;
  z-index:5;
}
/* S'assurer que le titre est dessus même si autres layers buggés */
.hero-v2__title,
.hero-v2__sub,
.hero-v2__actions,
.hero-v2__eyebrow,
.hero-v2__stats{
  position:relative;
  z-index:10;
}
/* Garantie d'affichage si bug d'opacité hérité */
.hero-v2__title{ opacity:1 !important; visibility:visible !important; }

/* Tablet : opacité vidéo réduite pour lecture H1 + ajustement padding */
@media (min-width:768px) and (max-width:1023px){
  .hero-v2 .hero-video{ opacity:.40; }
  .hero-v2__inner{
    padding-top:clamp(96px,12vh,140px);
    padding-bottom:clamp(80px,10vh,120px);
  }
  .hero-v2__title{
    font-size:clamp(56px,9vw,92px);
    line-height:.96;
  }
  .hero-v2__sub{ max-width:560px; font-size:17px; }
  .hero-v2__stats{
    grid-template-columns:repeat(4,auto);
    gap:32px;
  }
  .hero-v2__scroll{ display:none; }
}

/* ---- 3. MOBILE (<768) hero V2 ---------------------------- */
@media (max-width:767px){
  .hero-v2{ min-height:88svh; min-height:88vh; }
  .hero-v2 .hero-video{
    opacity:.32;
    /* Vidéo allégée mobile, image poster prioritaire si bug autoplay */
  }
  .hero-v2__inner{
    padding-top:96px;
    padding-bottom:120px;
    padding-left:clamp(18px,5vw,28px);
    padding-right:clamp(18px,5vw,28px);
    justify-content:center;
  }
  .hero-v2__eyebrow{
    font-size:10px;letter-spacing:.18em;
    margin-bottom:24px;
  }
  .hero-v2__title{
    font-size:clamp(46px,12vw,68px);
    line-height:.98;
    letter-spacing:-.025em;
    margin-bottom:24px;
  }
  .hero-v2__sub{
    font-size:15.5px;line-height:1.55;
    margin-bottom:32px;max-width:100%;
  }
  .hero-v2__actions{
    flex-direction:column;align-items:stretch;
    gap:12px;margin-bottom:40px;
  }
  .hero-v2__cta-primary,
  .hero-v2__cta-secondary{
    width:100%;justify-content:center;
    min-height:54px;
    padding:16px 24px;
    font-size:14.5px;
  }
  .hero-v2__stats{
    grid-template-columns:repeat(2,1fr);
    gap:24px 20px;
    width:100%;
  }
  .hero-v2__stats .stat{ padding-right:0; }
  .hero-v2__stats .stat:nth-child(odd)::after{ display:none; }
  .hero-v2__stats .num{ font-size:clamp(32px,8vw,42px); }
  .hero-v2__guides,
  .hero-v2__scroll{ display:none; }
  /* Marquee bottom : conserver mais ralentir et masquer si <480 */
  .hero-v2__marquee{ padding:14px 0; }
  .hero-v2__marquee-track{ animation-duration:48s; gap:40px; }
  .hero-v2__marquee span{ font-size:12px; }
}

@media (max-width:480px){
  .hero-v2__marquee{ display:none; }
  .hero-v2__title{ font-size:clamp(42px,13vw,56px); }
}

/* ---- 4. Typography fluide globale ----------------------- */
h1, .h1{
  font-family:'Fraunces',Georgia,serif;
  font-style:italic;font-weight:300;
  font-size:var(--adme-fs-h1);
  line-height:.95;letter-spacing:-.03em;
}
h2, .h2, .section-title{
  font-size:var(--adme-fs-h2);
  line-height:1.05;letter-spacing:-.02em;
}
h3{ font-size:clamp(20px,2.6vw,28px); line-height:1.2; }
.eyebrow, .section-label, .kicker{
  font-size:clamp(11px,1.1vw,13px);
  letter-spacing:.22em;text-transform:uppercase;
  font-weight:500;
}
p, li{ font-size:var(--adme-fs-body); line-height:1.65; }

/* ---- 5. Sections / containers ---------------------------- */
.section,
section.section,
.adme-section{
  padding:var(--adme-pad-section-y) var(--adme-pad-section-x);
  max-width:var(--adme-container);
  margin:0 auto;
}
.container, .adme-container{
  max-width:var(--adme-container);
  margin:0 auto;
  padding-left:var(--adme-pad-section-x);
  padding-right:var(--adme-pad-section-x);
}

/* ---- 6. CTAs touch-friendly ------------------------------ */
.btn-primary,
.btn-outline,
.btn-gold,
.hero-v2__cta-primary,
.hero-v2__cta-secondary,
.adme-cta,
button{
  min-height:48px;
  padding:14px 28px;
  font-size:clamp(14px,1.4vw,16px);
}
@media (max-width:767px){
  .btn-primary,
  .btn-outline,
  .btn-gold,
  .hero-v2__cta-primary,
  .hero-v2__cta-secondary,
  .adme-cta{
    min-height:52px;
    padding:16px 28px;
  }
  /* Stack CTAs côte à côte → empilés */
  .hero-actions,
  .cta-actions,
  .adme-cta-row{ flex-direction:column; align-items:stretch; }
}

/* ---- 7. BENTO grid V2 sécurisé --------------------------- */
@media (max-width:980px){
  .bento-v2,
  .bento-v2__grid{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
  }
  .bento-v2 .card,
  .bento-v2__card{
    grid-column:auto !important;
    grid-row:auto !important;
    min-height:auto;
  }
}

/* ---- 8. Compteurs V2 ------------------------------------- */
@media (max-width:768px){
  .counters-v2,
  .stats-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:24px 0 !important;
  }
  .stats-section{ margin:0 16px; padding:40px 20px; }
}
@media (max-width:480px){
  .counters-v2 .stat-big,
  .stat-big{ font-size:clamp(36px,10vw,52px); }
}

/* ---- 9. Marquees / tickers ------------------------------- */
@media (max-width:767px){
  .ticker-wrap{ display:none !important; }
  .clients-track,
  .marquee-track,
  .hero-v2__marquee-track{ animation-duration:48s !important; }
}
@media (prefers-reduced-motion: reduce){
  .ticker-wrap,
  .clients-section,
  .hero-v2__marquee,
  .marquee{ display:none !important; }
  .clients-track,
  .marquee-track,
  .hero-v2__marquee-track,
  .ticker-track{ animation:none !important; }
}

/* ---- 10. Hero vidéo perf mobile -------------------------- */
@media (max-width:767px){
  .hero-video,
  .hero-v2 .hero-video{
    /* La balise <video preload="auto"> est lourde mobile.
       Préférer poster + autoplay silencieux. JS optionnel : 
       remplacer preload="auto" → "metadata" côté markup. */
    object-fit:cover;
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-video, .hero-v2 .hero-video{
    display:none !important;
  }
  .hero-v2{
    background-image:
      radial-gradient(ellipse 1200px 800px at 30% 50%, rgba(44,107,255,0.18) 0%, transparent 70%),
      radial-gradient(ellipse 900px 600px at 85% 80%, rgba(201,162,74,0.12) 0%, transparent 65%),
      linear-gradient(180deg, rgba(7,10,18,1) 0%, rgba(7,10,18,.85) 100%),
      url("https://adme-aistudio.com/wp-content/uploads/2026/06/hero-premium-final-poster.jpg");
    background-size:cover;
    background-position:center;
  }
}

/* ---- 11. Services / portfolio / process grids ------------ */
@media (max-width:980px){
  .services-grid,
  .portfolio-grid,
  .process-grid,
  .testimonials-grid{ grid-template-columns:repeat(2,1fr) !important; gap:14px !important; }
}
@media (max-width:600px){
  .services-grid,
  .portfolio-grid,
  .process-grid,
  .testimonials-grid{ grid-template-columns:1fr !important; }
}

/* ---- 12. Footer responsive ------------------------------- */
@media (max-width:980px){
  .footer-grid{
    grid-template-columns:repeat(2,1fr) !important;
    gap:32px !important;
  }
}
@media (max-width:600px){
  .footer-grid{
    grid-template-columns:1fr !important;
    text-align:left;
  }
  #site-footer{ padding:48px 20px 0 !important; }
}

/* ---- 13. CTA section bottom ------------------------------ */
@media (max-width:767px){
  .cta-section{
    margin:0 16px 48px !important;
    padding:48px 24px !important;
    border-radius:18px !important;
  }
  .cta-section h2{ font-size:clamp(28px,7vw,40px) !important; }
  .cta-section p{ font-size:15px !important; }
}

/* ---- 14. Cookies Complianz banner mobile ----------------- */
@media (max-width:767px){
  #cmplz-cookiebanner-container,
  .cmplz-cookiebanner{
    left:12px !important; right:12px !important; bottom:12px !important;
    top:auto !important;
    max-width:calc(100% - 24px) !important;
    max-height:30vh !important;
    width:auto !important;
    padding:14px 16px !important;
    border-radius:16px !important;
    overflow-y:auto;
    font-size:13px !important;
  }
  .cmplz-cookiebanner .cmplz-buttons,
  .cmplz-cookiebanner .cmplz-categories{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .cmplz-cookiebanner .cmplz-buttons button,
  .cmplz-cookiebanner .cmplz-buttons .cmplz-btn{
    flex:1 1 auto !important;
    min-width:120px !important;
    min-height:44px !important;
    padding:10px 14px !important;
    font-size:13px !important;
  }
  .cmplz-cookiebanner .cmplz-title{ font-size:14px !important; margin-bottom:6px !important; }
  .cmplz-cookiebanner p,
  .cmplz-cookiebanner .cmplz-description{ font-size:12.5px !important; line-height:1.4 !important; }
}

/* ---- 15. WhatsApp / popups respect z-index --------------- */
.wa-chat-box,
.wa-widget-send-button,
[class*="whatsapp"][class*="float"],
.joinchat,
.pmpb-whatsapp,
.adme-newsletter-popup{
  z-index:999990 !important;
}
@media (max-width:767px){
  .joinchat__button,
  .wa-widget-send-button,
  [class*="whatsapp"][class*="float"]{
    bottom:84px !important; /* éviter chevauchement bandeau cookies */
  }
}

/* ---- 16. Form fields touch-friendly --------------------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
textarea,
select{
  font-size:16px;       /* évite zoom auto iOS */
  min-height:48px;
  padding:12px 16px;
  border-radius:12px;
}
textarea{ min-height:120px; }

/* ---- 17. Article / single post --------------------------- */
@media (max-width:767px){
  .single-post .entry-content,
  .single .entry-content,
  article .entry-content{
    padding:0 18px;
    font-size:16.5px;
    line-height:1.72;
  }
  article h2{ margin-top:36px; }
  article h3{ margin-top:24px; }
  article img, article video, article iframe{ border-radius:14px; }
}

/* ---- 18. Tables scrollable -------------------------------- */
@media (max-width:767px){
  .entry-content table,
  article table{
    display:block;overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    white-space:nowrap;
    font-size:14px;
  }
}

/* ---- 19. prefers-reduced-motion global ------------------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* ---- 20. Anti-overflow horizontal global ---------------- */
html, body{
  overflow-x:hidden;
  max-width:100vw;
}
.section, section, .container{
  max-width:100%;
  box-sizing:border-box;
}

/* ---- 21. Démo agent IA chat / calculateur (préservation) -- */
@media (max-width:767px){
  .adme-chat-demo, .adme-roi-calc{
    margin-left:14px !important;margin-right:14px !important;
    padding:20px 16px !important;
    border-radius:18px !important;
  }
  .adme-chat-demo input,
  .adme-roi-calc input,
  .adme-roi-calc select{ font-size:16px; }
}

/* ---- 22. Mobile-specific spacing fine-tuning ------------- */
@media (max-width:600px){
  .section, section.section, .adme-section{
    padding-top:56px;padding-bottom:56px;
  }
}

/* ---- END ------------------------------------------------- */