/* Subtle botanical background for all pages (light, natural, non-intrusive) */
:root{
  --bg-base: #fbfaf7;            /* warm off-white */
  --bg-ink: rgba(81,114,76,.10); /* muted plant green */
  --bg-ink2: rgba(196,122,90,.06); /* warm brand tint */
  --page-scale: 0.8;          /* default visual scale (80%) */
}


/* --- Global: avoid white gutters/overscroll on tablets --- */
html, body{
  background: #FCF8F6; /* same as body Tailwind bg-[#FCF8F6] */
  max-width: 100%;
  overflow-x: hidden;
}

/* Ajustement vidéo "Tout comprendre" - mobiles paysage & tablettes */
@media (max-width: 1024px) and (orientation: landscape),
       (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  video[src*="5-bonnes-raisons-coloration-vegetale"] {
    max-width: 85%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Ajustement vidéo "Tout comprendre" - mobiles paysage & tablettes */
@media (max-width: 1024px) and (orientation: landscape),
       (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  video[src*="5-bonnes-raisons-coloration-vegetale"] {
    max-width: 85%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}
/* Apply texture to the whole page */
html, body { height: 100%; }

/* Default page scale (80%)
   Note: browsers don't allow sites to change the user's zoom setting.
   This applies a visual scale while keeping layout readable. */
html{
  zoom: var(--page-scale);
}

/* Firefox (and other browsers without `zoom`) fallback */
@supports not (zoom: 1){
  body{
    transform: scale(var(--page-scale));
    transform-origin: top left;
    width: calc(100% / var(--page-scale));
  }
}

body{
  background-color: var(--bg-base);
  /* 1) tiled botanical line-art  2) soft light vignettes  3) very subtle paper grain */
  background-image:
    url("bg-botanical.svg"),
    radial-gradient(1200px 800px at 15% 10%, rgba(81,114,76,.07), transparent 55%),
    radial-gradient(900px 700px at 90% 25%, rgba(196,122,90,.06), transparent 60%),
    radial-gradient(900px 900px at 60% 95%, rgba(81,114,76,.05), transparent 62%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.012), rgba(0,0,0,.012) 1px, transparent 1px, transparent 6px);
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, repeat;
  background-size: 520px 520px, cover, cover, cover, 420px 420px;
  background-attachment: fixed, fixed, fixed, fixed, fixed;
}

/* =====================================================
   Produits rechargeables — images trop grandes sur
   - petites tablettes en portrait (ex: Nexus 7)
   - petits téléphones en paysage (ex: Nexus 6P)
   Objectif: réduire proportionnellement sans rognage.
   ===================================================== */

/* Base: garder le comportement responsive standard */
.pr-img{ max-width: 100%; height: auto; }

/* Petite tablette en portrait: limiter la hauteur visible */
@media (min-width: 600px) and (max-width: 820px) and (orientation: portrait){
  .pr-img{
    max-height: 42vh;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* Petit téléphone en paysage: hauteur d'écran limitée */
@media (max-width: 820px) and (orientation: landscape){
  .pr-img{
    max-height: 70vh;
    width: auto;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }
}

/* Keep text blocks readable even on large screens */
main, section{
  position: relative;
}

/* Optional: slightly lift large white cards from the textured page */
.bg-white, .bg-white\/90{
  backdrop-filter: saturate(1.05);
}


/* Brand title spans (default: one line) */
.brand-title .brand-line1,
.brand-title .brand-line2{ display:inline; }
.brand-title .brand-line2{ margin-left: .22rem; }

/* ===== HEADER MOBILE : + grand (portrait + paysage) ===== */

/* 📱 Portrait */
@media (max-width: 767px) and (orientation: portrait) {

  /* La hauteur vient surtout de cette rangée (py-2 Tailwind) */
  header .mobile-header-row{
    padding-top: 0.85rem !important;
    padding-bottom: 0.85rem !important;
  }

  /* Logo un peu plus gros */
  header .mobile-header-row img{
    width: 2.25rem !important;
    height: 2.25rem !important;
  }

  /* Titre salon plus lisible */
  header > div > a:first-child .brand-title{
    font-size: 0.92rem !important;
    line-height: 1.05rem !important;
    max-width: 8.6rem !important;
    white-space: normal !important;
    display: flex !important;
    flex-direction: column;
  }
  .brand-title .brand-line1,
  .brand-title .brand-line2{
    display:block;
  }


  /* Épaisseur du titre salon : identique au mode paysage
     - index (aria-current="page") : gras
     - autres pages : normal */
  header > div > a:first-child[aria-current="page"] .brand-title{
    font-weight: 700 !important;
  }
  header > div > a:first-child:not([aria-current="page"]) .brand-title{
    font-weight: 400 !important;
  }

}

/* 📱 Paysage */
@media (max-width: 1023px) and (orientation: landscape) {

  /* --- Header "smartphone paysage" : logique mobile --- */

  /* Force mobile elements visible even if Tailwind (md:) hides them */
  header #mobile-menu-toggle,
  header #mobile-page-title,
  header #mobile-cta-planity{
    display: inline-flex !important;
  }
  header #mobile-page-title{ display: block !important; }

  /* Hide desktop nav + desktop CTA to avoid duplicates */
  header > div > nav,
  header a[href^="https://www.planity.com"]:not(#mobile-cta-planity){
    display: none !important;
  }

  /* Row layout */
  header .mobile-header-row{
    display:flex !important;
    align-items:center;
    column-gap: .65rem;
    position: relative;
    z-index: 60;
  }

  /* Make the menu button reliably clickable */
  header #mobile-menu-toggle{
    position: relative;
    z-index: 70;
    pointer-events: auto;
  }
  header #mobile-menu-panel{
    z-index: 80;
  }

  /* IMPORTANT: allow the panel to show even when Tailwind's `md:hidden` is active (>=768px) */
  header #mobile-menu-panel{ display: block !important; }
  header #mobile-menu-panel.hidden{ display: none !important; }

  /* IMPORTANT: allow the panel to show even when Tailwind's `md:hidden` is active (>=768px) */
  header #mobile-menu-panel{ display: block !important; }
  header #mobile-menu-panel.hidden{ display: none !important; }

  /* Order: Menu | Brand | Page title | CTA */
  header #mobile-menu-toggle{ order: 0; }
  header .mobile-header-row > a:first-child{ order: 1; }
  header #mobile-page-title{
    order: 2;
    flex: 1 1 auto;
    max-width: 46vw;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding-left: .25rem;
    padding-right: .25rem;
  }
  header #mobile-cta-planity{ order: 3; margin-left:auto; }

  /* CTA: short label in phone landscape */
  header #mobile-cta-planity .cta-short{ display:inline !important; }
  header #mobile-cta-planity .cta-long{ display:none !important; }
}

@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {

  /* --- Header "tablette portrait" : même header que smartphone paysage --- */

  header #mobile-menu-toggle,
  header #mobile-page-title,
  header #mobile-cta-planity{
    display: inline-flex !important;
  }
  header #mobile-page-title{ display: block !important; }

  header > div > nav,
  header a[href^="https://www.planity.com"]:not(#mobile-cta-planity){
    display: none !important;
  }

  header .mobile-header-row{
    display:flex !important;
    align-items:center;
    column-gap: .8rem;
    position: relative;
    z-index: 60;
  }

  header #mobile-menu-toggle{
    position: relative;
    z-index: 70;
    pointer-events: auto;
  }
  header #mobile-menu-panel{
    z-index: 80;
  }

  /* IMPORTANT: allow the panel to show even when Tailwind's `md:hidden` is active (>=768px) */
  header #mobile-menu-panel{ display: block !important; }
  header #mobile-menu-panel.hidden{ display: none !important; }

  header #mobile-menu-toggle{ order: 0; }
  header .mobile-header-row > a:first-child{ order: 1; }
  header #mobile-page-title{
    order: 2;
    flex: 1 1 auto;
    max-width: 52vw;
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    padding-left: .35rem;
    padding-right: .35rem;
  }
  header #mobile-cta-planity{ order: 3; margin-left:auto; }

  /* CTA: long label on tablet portrait */
  header #mobile-cta-planity .cta-short{ display:none !important; }
  header #mobile-cta-planity .cta-long{ display:inline !important; }
}



/* --- Tablettes portrait : même header que paysage, mais on laisse plus de place au titre --- */
@media (max-width: 1024px) and (orientation: portrait) {
  header #mobile-page-title{
    max-width: 55vw;
  }
}

/* --- Mobile portrait : on garde le CTA court "Prendre rdv" --- */
@media (max-width: 767px) and (orientation: portrait) {
  header #mobile-cta-planity .cta-short { display: inline !important; }
  header #mobile-cta-planity .cta-long { display: none !important; }
}

/* --- Smartphone paysage (plus petit) : on garde le CTA court --- */
@media (max-width: 767px) and (orientation: landscape) {
  header #mobile-cta-planity .cta-short { display: inline !important; }
  header #mobile-cta-planity .cta-long { display: none !important; }
}

/* --- Avis (cartes) --- */
/* --- Avis (cartes) --- */
.reviews-track{
  display:flex;
  gap:1rem;
  overflow-x:auto;
  overflow-y:visible; /* évite de rogner l’avatar */
  padding: .6rem .25rem 1rem;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling: touch;
}
.reviews-track::-webkit-scrollbar{ height: 10px; }
.reviews-track::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12);
  border-radius: 999px;
}
.review-card{
  flex: 0 0 auto;
  min-width: 280px;
  max-width: 360px;
  width: 85%;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 20px;
  padding: 1.1rem 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 18px 40px rgba(0,0,0,.06);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.review-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 22px 55px rgba(0,0,0,.08);
}
.review-top{
  display:flex;
  align-items:center;
  gap:.8rem;
}
.review-avatar{
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(29, 78, 50, .12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 700;
}
.review-meta{ flex: 1 1 auto; min-width: 0; }
.review-name{
  font-weight: 700;
  margin: 0;
  line-height: 1.15;
}
.review-sub{
  margin: .25rem 0 0;
  font-size: .78rem;
  opacity: .7;
}
.review-stars{
  font-size: 1.05rem;
  letter-spacing: 1px;
}
.review-text{
  margin: .9rem 0 0;
  line-height: 1.65;
  opacity: .9;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px){
  .review-card{ width: 340px; }
}

/* --- Google reviews cards (format "capture" : avatar au-dessus, nom/date/étoiles) --- */
.g-review-card{
  position: relative;
  flex: 0 0 auto;
  min-width: 280px;
  max-width: 380px;
  width: 85%;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 18px;
  padding: 2.6rem 1.25rem 1.25rem;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 18px 45px rgba(0,0,0,.07);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.g-review-card:hover{
  transform: translateY(-2px);
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 22px 60px rgba(0,0,0,.10);
}
.g-review-google{
  position:absolute;
  top: .9rem;
  left: .9rem;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 800;
  font-size: .8rem;
  background: rgba(0,0,0,.06);
}
.g-review-avatar{
  position:absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(29, 78, 50, .14);
  border: 4px solid rgba(255,255,255,.95);
  box-shadow: 0 10px 25px rgba(0,0,0,.10);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.g-review-avatar img{ width:100%; height:100%; object-fit:cover; display:block; }
.g-review-initial{ font-weight: 800; }
.g-review-body{ text-align:center; }
.g-review-name{ margin:0; font-weight:800; font-size: 1.05rem; }
.g-review-meta{
  margin-top: .4rem;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: .65rem;
  font-size: .82rem;
  opacity: .75;
}
.g-review-stars{
  letter-spacing: 1px;
  font-size: 1rem;
}
.g-review-stars.is-placeholder{ opacity: .35; }
.g-review-text{
  margin: .95rem 0 0;
  line-height: 1.7;
  opacity: .92;
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (min-width: 768px){
  .g-review-card{ width: 340px; }
}


/* Reviews: desktop layout (pas de défilement horizontal) */
@media (min-width: 900px){
  .reviews-track{
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    overflow: visible;
    scroll-snap-type: none;
  }
  .g-review-card{
    min-width: 0;
    max-width: none;
    width: 100%;
  }
}

/* ------------------------------------------------------------
   Home page – Mobile-only adjustments (do not affect desktop)
   ------------------------------------------------------------ */
@media (max-width: 1024px){
  /* HERO: show the full image (no cropping) */
  .home-hero-img{
    height: auto !important;
    max-height: 320px;
    object-fit: contain !important;
    object-position: center !important;
    background: rgba(0,0,0,.02);
  }

  /* Section titles: harmonize with the rest of the mobile page */
  .home-section-title{
    font-size: 1.35rem !important;
    line-height: 1.75rem !important;
  }

  /* Curly hair section image (mobile version): fill the bubble (no side bands)
     and keep the focus slightly higher (top is more important than bottom). */
  .home-curly-img{
    width: 100% !important;
    height: 260px !important;
    object-fit: cover !important;          /* removes the white side bands */
    object-position: 50% 0% !important;   /* focus a bit higher */
    display:block;
    background: transparent !important;
  }

/* --- Home: Curly image – reduce zoom on small tablets (e.g., Nexus 7) --- */
@media (min-width: 600px) and (max-width: 767px) {
  /* Nexus 7 / petites tablettes en portrait : image moins recadrée */
  .home-curly-bubble .home-curly-img{
    height: 320px !important;
    object-fit: cover !important;
    object-position: 50% 20% !important;
  }
}

/* INDEX – Petites tablettes en PORTRAIT (type Nexus 7)
   1) HERO (salon.webp) : supprimer les bandes latérales en mode portrait uniquement
   2) CURLY (avant_apres...) : bulle plus haute + photo moins zoomée (moins rognée) */
@media (min-width: 600px) and (max-width: 767px) and (orientation: portrait) {
  /* HERO: on remplit la bulle (pas de letterboxing) */
  .home-hero-bubble .home-hero-img{
    max-height: 360px;
    height: 360px !important;
    object-fit: cover !important;
    object-position: center !important;
    background: transparent !important;
  }

  /* CURLY: augmenter la hauteur pour réduire le crop haut/bas */
  .home-curly-bubble .home-curly-img{
    height: 420px !important;
    object-fit: cover !important;
    object-position: 50% 12% !important;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  /* Tablettes (portrait & paysage) : réduire le crop de l'image desktop */
  .home-curly-media img{
    height: 360px !important;
    object-fit: cover !important;
    object-position: 50% 15% !important;
  }
}


  /* Google reviews: on mobile, ensure the avatar circle isn't visually clipped */
  .reviews-track{
    padding-top: 2.2rem !important; /* creates headroom for the avatar above cards */
  }
  .g-review-avatar{
    top: -18px !important;
    z-index: 2;
  }
  .g-review-card{
    z-index: 1;
  }

  /* "Nous trouver" hours bubble: keep two columns on mobile */
  .home-hours-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
/* "Nous trouver" – allonger la bulle Horaires/Contact/Accès en mobile */
  .home-hours-bubble{
    height: auto !important;      /* laisse la bulle grandir selon le contenu */
    min-height: 230px;            /* optionnel: force une hauteur mini plus longue */
    overflow: visible !important; /* évite de couper le contenu */
  }

/* Google reviews avatars: prioritize seeing the forehead/eyes on mobile */
  .g-review-avatar img{
    object-fit: cover !important;
    object-position: 50% 10% !important;
  }

  /* Tout comprendre – Nuancier/collections: smaller images on mobile without cropping */
  .collection-card{
    max-width: 20rem;
    margin-left: auto;
    margin-right: auto;
  }
  .collection-img{
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important; /* never crop */
    object-position: center !important;
  }
}

/* INDEX – "Bienvenue au salon" images: keep the full photo visible on classic mobile widths */
@media (max-width: 639px){
  .home-welcome-img{
    height: auto !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block;
    background: rgba(0,0,0,.02);
  }
}

@media (max-width: 1024px){

  /* mobile: 3 colonnes */
  .boudin-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* mobile: pas de rognage */
  .boudin-img{
    height: 200px !important;          /* annule h-44 */
    object-fit: cover !important;   /* plus de crop */
    display: block;
    object-position: 50% 50% !important;
  }
  /* Exception : capillumdepollution -> pas de bande blanche : fill */
  .boudin-depollution{
    height: 200px !important;         /* adapte la taille de la vignette en grid */
    object-fit: cover !important;      /* supprime les bandes */
    object-position: 50% 10% !important; /* favorise le haut */
  }

  /* mobile: mettre l'image marquée au milieu en 2ème position */
  .boudin-middle{
    order: 2;
  }
}

/* ===== Texture poudre - MOBILE ONLY ===== */
@media (max-width: 1024px) {

  .texture-poudre-wrap > div {
    width: 200px;
    max-width: 200px;
  }

  .texture-poudre {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }

}



/* --- Mobile landscape header behaviour: keep mobile title + hamburger visible --- */
@media (max-width: 1024px) and (max-height: 500px) and (orientation: landscape) {
  /* Force the mobile title + menu button to appear even when Tailwind's md: breakpoint hides them */
  #mobile-page-title,
  #mobile-menu-toggle {
    display: inline-flex !important;
  }
  #mobile-page-title {
    justify-content: center;
    align-items: center;
    white-space: nowrap;
  }
  /* Keep ONLY the desktop nav hidden in phone landscape to avoid header overflow
     (Do NOT hide the mobile menu panel nav, which lives under #mobile-menu-panel) */
  header > nav {
    display: none !important;
  }

  /* Ensure the hamburger panel can actually show on wide phone landscape where Tailwind's
     md:hidden would otherwise keep it hidden even after we remove the .hidden class in JS. */
  #mobile-menu-panel {
    display: block !important;
    pointer-events: auto;
  }
  #mobile-menu-panel.hidden {
    display: none !important;
  }

  #mobile-menu-toggle {
    pointer-events: auto;
    z-index: 60;
  }

  #mobile-page-title {
    pointer-events: none;
  }

}


/* FIX mobile portrait: keep title on 2 lines */
@media (max-width: 767px) and (orientation: portrait) {
  .site-title { white-space: normal !important; line-height: 1.15; }
}


/* FIX mobile portrait: force brand title to wrap on 2 lines */
@media (max-width: 767px) and (orientation: portrait) {
  .brand-title {
    display: inline-block;
    max-width: 8.5rem; /* forces wrap without changing colors/weight */
    white-space: normal !important;
    line-height: 1.15;
  }
}


/* INDEX – Mobile LANDSCAPE fixes (prevent side bands without cropping) */
@media (max-width: 1024px) and (orientation: landscape) {
  /* Make the image “bubble” wrap to the image width (centered) */
  .home-hero-bubble,
  .home-curly-bubble{
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* HERO image: keep full image visible, but avoid empty side bands by not forcing 100% width */
  .home-hero-bubble .home-hero-img{
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 70vh;
    object-fit: contain !important;
  }

  /* CURLY image: reduce zoom (no cover) and adapt bubble to image */
  .home-curly-bubble .home-curly-img{
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 75vh;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Google map a bit taller in landscape */
  .home-map-bubble{
    height: 320px !important;
  }
}


/* FIX: Curly section – mobile landscape – buttons under text */
@media (max-width: 932px) and (orientation: landscape) {
  .curly__left {
    display: flex;
    flex-direction: column;
  }

  .curly__actions {
    order: 2;
    margin-top: 12px;
  }

  .curly__text {
    order: 1;
  }
}


/* === FIX CURLY - MOBILE PAYSAGE === */
@media (max-width: 932px) and (orientation: landscape) {

  .curly__left {
    display: flex;
    flex-direction: column;
  }

  .curly__text {
    order: 1;
  }

  .curly__actions {
    order: 2;
    margin-top: 14px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
  }
}



/* Ajustement cartes partenaires - mobile paysage */
@media (max-width: 767px) and (orientation: landscape) {
  img[src*="cartecouleurgaia"],
  img[src*="cartecapillumbegood"] {
    max-width: 70%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Ajustement vidéo "Tout comprendre" (5-bonnes-raisons...) -
   - mobiles en paysage (petits & moyens)
   - petites tablettes (portrait + paysage)
   - tablettes "classiques" en portrait
   NOTE: ciblé via l'id pour ne rien impacter d'autre. */
@media (max-width: 1024px) and (orientation: landscape),
       (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) {
  /* Le conteneur ne garde pas une largeur fixe: il s'adapte à la vidéo */
  #video-5-bonnes-raisons-wrap {
    width: fit-content !important;
    max-width: 100% !important;
  }

  /* On limite surtout la hauteur (le vrai problème en paysage), en gardant les proportions */
  #video-5-bonnes-raisons {
    width: auto !important;
    max-width: 100% !important;
    max-height: 75vh;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mise en colonnes (texte à gauche / vidéo à droite) uniquement en paysage
   sur mobiles & petites tablettes. Exclut les grandes tablettes en paysage
   (ex: iPad landscape) via la hauteur. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1023px) {
  #tc-hero-grid {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  /* La vidéo doit remplir sa colonne sans créer d'espaces inutiles */
  #video-5-bonnes-raisons-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  #video-5-bonnes-raisons {
    width: 100% !important;
    height: auto !important;
    max-height: 85vh;
    display: block;
  }
}


  #video-5-bonnes-raisons-wrap video {
    border-radius: 1rem;
    background: transparent;
  }



/* Ajustement final - alignement texte / vidéo (landscape petits écrans) */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1023px) {

  #video-5-bonnes-raisons-wrap {
    grid-template-columns: 1.1fr 0.9fr;
  }

  #video-5-bonnes-raisons-wrap > div:first-child {
    padding-left: 1.5rem;
  }

  #video-5-bonnes-raisons-wrap video {
    margin-left: auto;
    margin-right: auto;
  }

  #video-5-bonnes-raisons-wrap .text-center {
    text-align: center;
  }
}


/* === Tout comprendre: texte à gauche / vidéo à droite (landscape petits écrans) ===
   Cible le grid du hero, pas uniquement le wrapper vidéo.
   N'affecte pas le portrait ni les grandes tablettes en paysage. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1023px) {
  #tc-hero-grid {
    grid-template-columns: 1.1fr 0.9fr;
    column-gap: 1.75rem;
    align-items: center;
  }

  /* Décale légèrement la colonne texte vers la droite */
  #tc-hero-grid > div:first-child {
    padding-left: 1.5rem;
  }

  /* Colonne droite centrée */
  #tc-hero-grid > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Le conteneur de la vidéo doit suivre la largeur de la colonne (pas 75%) */
  #video-5-bonnes-raisons-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Vidéo: grande, sans rognage */
  #video-5-bonnes-raisons {
    width: 100%;
    height: auto;
    max-height: 85vh;
    object-fit: contain;
    margin: 0;
    display: block;
  }

  /* Légende centrée sous la vidéo */
  #tc-hero-grid > div:last-child p {
    width: 100%;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }
}


/* === Tout comprendre: centrer parfaitement la légende sous la vidéo (landscape petits écrans + petites tablettes) ===
   On évite que la légende se centre sur la colonne (100%) alors que la vidéo est plus étroite (max-height).
   Le wrapper se cale sur la largeur réelle de la vidéo. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1023px) {

  /* Colonne droite : centre son contenu */
  #tc-hero-grid > div:last-child {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Wrapper vidéo : largeur = contenu (donc largeur réelle de la vidéo) */
  #video-5-bonnes-raisons-wrap {
    width: fit-content !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Vidéo : dimensionnée par la hauteur dispo, sans rognage */
  #video-5-bonnes-raisons {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* Légende : même largeur que le wrapper vidéo, donc parfaitement alignée */
  #video-5-bonnes-raisons-wrap + p,
  #tc-hero-grid > div:last-child p {
    width: 100%;
    max-width: 100%;
    text-align: center;
    margin-left: 0;
    margin-right: 0;
  }
}


/* === Tout comprendre: aligner exactement vidéo + légende (landscape petits écrans & petites tablettes) ===
   On centre un bloc unique (vidéo + légende) dont la largeur suit la vidéo.
   N'affecte pas le portrait ni les grandes tablettes en paysage. */
@media (orientation: landscape) and (max-height: 700px) and (max-width: 1023px) {
  #video-5-bonnes-raisons-block {
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* La légende prend exactement la largeur du bloc vidéo */
  #video-5-bonnes-raisons-block > p {
    width: 100%;
    text-align: center;
  }
}


/* === Tout comprendre: corrige centrage légende sous la vidéo (landscape mobiles + petites tablettes) ===
   Couvre aussi les petites tablettes dont la hauteur landscape dépasse 700px.
   Exclut les grandes tablettes landscape (iPad ~1024px) en restant sous 1000px. */
@media (orientation: landscape) and (max-width: 1000px) {
  /* Le bloc vidéo+caption se cale sur la largeur réelle du contenu (vidéo),
     puis est centré dans la colonne. */
  #video-5-bonnes-raisons-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Le wrapper interne ne doit pas recentrer “plus large” que le contenu */
  #video-5-bonnes-raisons-block > .w-full.flex.justify-center {
    width: 100%;
    justify-content: flex-start;
  }

  /* Caption : même largeur que la vidéo et alignée à gauche */
  #video-5-bonnes-raisons-block > p {
    width: 100%;
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* === Tout comprendre: centre parfaitement vidéo + légende (landscape mobiles + petites tablettes) === */
@media (orientation: landscape) and (max-width: 1000px) {
  /* Centre la colonne droite dans le grid */
  #tc-hero-grid > div:last-child {
    display: flex;
    justify-content: center;
  }

  /* Le bloc vidéo+caption prend la largeur du contenu et reste centré */
  #video-5-bonnes-raisons-block {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    max-width: 100%;
  }

  /* Annule le wrapper "w-full justify-center" qui peut fausser l'alignement */
  #video-5-bonnes-raisons-block > .w-full.flex.justify-center {
    width: auto !important;
    justify-content: center !important;
  }

  /* Le conteneur de la vidéo: taille responsive, centrée, sans bandes */
  #video-5-bonnes-raisons-wrap {
    width: clamp(260px, 40vw, 420px) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Vidéo: remplit le conteneur, sans rognage */
  #video-5-bonnes-raisons {
    width: 100% !important;
    height: auto !important;
    max-height: 85vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }

  /* Légende: exactement centrée sous la vidéo */
  #video-5-bonnes-raisons-block > p {
    width: 100%;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* === FIX v15: centrage parfait vidéo + légende (landscape mobiles + petites tablettes) ===
   Le parent doit avoir une largeur "réelle" (fit-content) basée sur la vidéo.
   On neutralise le wrapper w-full qui élargit artificiellement le bloc. */
@media (orientation: landscape) and (max-width: 1000px) {
  /* Colonne droite centrée dans la grille */
  #tc-hero-grid > div:last-child {
    display: flex !important;
    justify-content: center !important;
  }

  /* Bloc vidéo+caption : se cale sur la largeur de la vidéo */
  #video-5-bonnes-raisons-block {
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Neutralise le wrapper "w-full" : sinon le bloc prend la largeur de la colonne */
  #video-5-bonnes-raisons-block > .w-full.flex.justify-center {
    width: fit-content !important;
    justify-content: center !important;
  }

  /* Largeur vidéo responsive (sans rognage) */
  #video-5-bonnes-raisons-wrap {
    width: clamp(300px, 44vw, 480px) !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  #video-5-bonnes-raisons {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* Légende : exactement sous la vidéo */
  #video-5-bonnes-raisons-block > p {
    width: 100% !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* === OVERRIDE FINAL: centre parfaitement vidéo + légende (landscape mobiles + petites tablettes) ===
   Corrige les règles précédentes (flex-start / align-left) qui décalent la vidéo.
   N'affecte PAS iPad / grandes tablettes en paysage (>= 1024px). */
@media (orientation: landscape) and (max-width: 1023px) {
  #video-5-bonnes-raisons-block {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  #video-5-bonnes-raisons-block > .w-full.flex.justify-center {
    width: 100% !important;
    justify-content: center !important;
  }

  /* même largeur pour la vidéo et sa légende -> centrage parfait */
  #video-5-bonnes-raisons-wrap {
    width: min(520px, 90vw) !important;
    max-width: 90vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #video-5-bonnes-raisons-block > p {
    width: min(520px, 90vw) !important;
    max-width: 90vw !important;
    text-align: center !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


/* (supprimé) Ancien hotfix translateX: causait des décalages imprévisibles sur desktop via les changements de zoom */

/* === Produits rechargeables: responsive tweaks (Nexus 7 portrait + small phone landscape) === */

/* Target 1: small tablets in portrait (roughly 600-767px wide) */
@media (min-width: 600px) and (max-width: 767px) and (orientation: portrait) {
  .pr-formats-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }

  /* Move hero image between H1 and intro text */
  .pr-hero-img-inline{ display:block !important; margin: 0.75rem 0 1rem !important; }
  .pr-hero-img-side{ display:none !important; }
}

/* Target 2: small phones in landscape (up to md breakpoint) */
@media (max-width: 767px) and (orientation: landscape) {
  .pr-formats-grid{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    align-items: center !important;
    gap: 1.25rem !important;
  }

  /* Move hero image between H1 and intro text */
  .pr-hero-img-inline{ display:block !important; margin: 0.75rem 0 1rem !important; }
  .pr-hero-img-side{ display:none !important; }
}

/* Default: inline hero image hidden (desktop/tablet landscape etc.) */
.pr-hero-img-inline{ display:none; }

/* Mobile portrait: put text above the VracCouleurGaia image */
@media (max-width: 767px) and (orientation: portrait) {
  .pr-vrac-block > img{ order: 2 !important; }
  .pr-vrac-block > p{ order: 1 !important; }
}

/*
   Desktop uniquement (page "Tout comprendre")
   - Colonne gauche : titre + paragraphe
   - Colonne droite : vidéo + légende
   - Vidéo: taille fixe en desktop (ne rétrécit pas quand on réduit la fenêtre tant qu'on reste en desktop)
   - Pas de bandes blanches: vidéo en cover dans un cadre 9:16
   - Mobile paysage: vidéo plus grande (dimensionnée par la hauteur), sans bandes, centrée avec sa légende
*/

/* ===== Desktop ===== */
@media (min-width: 1024px) {
  /* Hero "Tout comprendre" : 2 colonnes (desktop uniquement) */
  #tc-hero-grid {
    grid-template-columns: 1fr 1fr !important;
    align-items: center;
  }

  /* Neutralise les col-span Tailwind sur desktop pour éviter tout décalage */
  #tc-hero-grid > div {
    grid-column: auto !important;
  }

  /* Cadre fixe (comme les images) */
  #video-5-bonnes-raisons-block {
    --tc-video-h: 680px;
    --tc-video-w: calc(var(--tc-video-h) * 9 / 16); /* 9/16 de 720px */

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Le wrapper doit être non-flexible pour ne pas "shrink" quand on réduit la fenêtre */
  #video-5-bonnes-raisons-wrap {
    width: var(--tc-video-w) !important;
    height: var(--tc-video-h) !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
  }

  /* Le conteneur de la vidéo occupe tout le cadre */
  #video-5-bonnes-raisons {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
  }

  /* Vidéo: remplit le cadre sans bandes */
  #video-5-bonnes-raisons video,
  #video-5-bonnes-raisons iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  /* Légende: même largeur que la vidéo => centre identique */
  #video-5-bonnes-raisons-block > p.video-legend {
    width: var(--tc-video-w) !important;
    max-width: none !important;
    text-align: center !important;
    margin: 12px auto 0 !important;
  }
}

/* ===== Mobile / petite tablette en paysage ===== */
@media (max-width: 1023px) and (orientation: landscape) {
  #video-5-bonnes-raisons-block {
    /* plus grand qu'avant en paysage */
    --tc-land-h: 82vh;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Cadre vertical dimensionné par la hauteur dispo */
  #video-5-bonnes-raisons-wrap {
    height: var(--tc-land-h) !important;
    width: min(calc(var(--tc-land-h) * 9 / 16), 92vw) !important;
    max-width: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    background: transparent !important;
  }

  #video-5-bonnes-raisons {
    width: 100% !important;
    height: 100% !important;
  }

  #video-5-bonnes-raisons video,
  #video-5-bonnes-raisons iframe {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  #video-5-bonnes-raisons-block > p.video-legend {
    width: min(calc(var(--tc-land-h) * 9 / 16), 92vw) !important;
    text-align: center !important;
    margin: 12px auto 0 !important;
  }
}


/* === Tout comprendre: vidéo un peu plus grande en mobile portrait (sans bandes, centrée avec la légende) === */
@media (max-width: 767px) and (orientation: portrait) {
  #video-5-bonnes-raisons-block{
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Cadre vertical par hauteur (évite les bandes blanches, augmente la taille) */
  #video-5-bonnes-raisons-block{
    --tc-por-h: min(78vh, 720px);
    --tc-por-w: calc(var(--tc-por-h) * 9 / 16);
  }

  #video-5-bonnes-raisons-wrap{
    width: var(--tc-por-w) !important;
    height: var(--tc-por-h) !important;
    max-width: 92vw !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #video-5-bonnes-raisons{
    width: 100% !important;
    height: 100% !important;
  }

  #video-5-bonnes-raisons video,
  #video-5-bonnes-raisons iframe{
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
  }

  #video-5-bonnes-raisons-block > p.video-legend{
    width: min(var(--tc-por-w), 92vw) !important;
    text-align: center !important;
    margin: 12px auto 0 !important;
  }
}


/* === TC: fonctionnement — tableau 2 colonnes (mobile landscape uniquement) === */
@media (max-width: 1023px) and (orientation: landscape) {
  /* Fonctionnement : 2 colonnes en landscape mobile uniquement
     - Colonne gauche : image Texture-poudre-2
     - Colonne droite : titre + paragraphes
     - Bulles : après (pleine largeur)
  */
  #fonctionnement .fonctionnement-main{
    display: grid;
    grid-template-columns: minmax(140px, 38%) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
  }

  /* Image à gauche */
  #fonctionnement .fonctionnement-media{
    grid-column: 1;
    grid-row: 1 / span 3;
    margin-bottom: 0 !important; /* annule le mb-5 */
    justify-content: center;
    align-self: start;
  }
  #fonctionnement .fonctionnement-media .rounded-2xl{
    width: 100%;
  }
  #fonctionnement .fonctionnement-media img{
    width: 100%;
    height: auto;
    display: block;
  }

  /* Texte à droite */
  #fonctionnement .fonctionnement-title{
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
  #fonctionnement .fonctionnement-desc{
    grid-column: 2;
    grid-row: 2;
  }
  #fonctionnement .fonctionnement-desc2{
    grid-column: 2;
    grid-row: 3;
  }

  /* Bulles après le tableau */
  #fonctionnement .fonctionnement-bubbles{
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 16px;
  }
}

/* =========================================================
   FIX: peinture_begood.jpeg (Actualités) — mobile sans bandes
   On isole l'image pour éviter qu'elle hérite des règles home-hero
   (contain/width:auto/fit-content) en mobile portrait & paysage.
   ========================================================= */

.news-hero-bubble{
  width: 100% !important;
  max-width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  position: relative !important;
  background: transparent !important;
}

/* L'image remplit TOUJOURS la bulle */
.news-hero-img{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  background: transparent !important;
}

/* Mobile portrait: hauteur fixe propre */
@media (max-width: 767px) and (orientation: portrait){
  .news-hero-bubble{ height: 320px !important; }
}

/* Mobile paysage: hauteur basée sur l’écran (supprime totalement le letterboxing) */
@media (max-width: 1024px) and (orientation: landscape){
  .news-hero-bubble{ height: 65vh !important; }
}

/* Cible l'image */
img[src*="peinture_begood.jpeg"]{
  display: block !important;
}

/* --- Mobile portrait: on garde un rendu propre (pas obligatoire mais cohérent) --- */
@media (max-width: 767px) and (orientation: portrait){
  img[src*="peinture_begood.jpeg"]{
    width: 100% !important;
    height: 320px !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* --- Mobile paysage: le vrai fix anti-bandes --- */
@media (max-width: 1024px) and (orientation: landscape){
  /* Le parent (le div qui contient l'image) devient un “cadre” */
  img[src*="peinture_begood.jpeg"]{
    width: 100% !important;
    height: 65vh !important;          /* ajustable: 65vh / 75vh */
    object-fit: cover !important;
    object-position: center !important;
  }

  /* Très important: éviter que le bloc se mette en “fit-content” ou se centre trop petit */
  img[src*="peinture_begood.jpeg"]{
    max-width: 100% !important;
  }
}