/* dwip — styles communs ajoutés après l'export Webflow (chargée sur toutes les pages) */

/* ===== Pas de défilement horizontal =====
   100vw inclut la barre de défilement quand elle est permanente (souris branchée) :
   ces sections dépassaient de ~15 px. « clip » ne casse pas les éléments sticky. */
html, body { overflow-x: clip; }
.home-hero, .home-details, .savoir-faire-section, .section-project-container { width: 100%; }

/* ===== Mobile ===== */
@media screen and (max-width: 767px) {
  /* Home : « Découvrir le studio » garde sa largeur naturelle, aligné sur le texte des cartes */
  .home-details-card-all > .primary-button { align-self: flex-start; }
  /* Le studio : « bottom: 72px » sert à l'empilement sticky sur ordinateur ; en position relative
     sur mobile, il remontait les cartes 2 et 3 sur la précédente */
  .accordion-panel { bottom: auto; }
  /* Pages projet : texte sur une seule colonne (la zone nommée « Area » de Webflow gardait
     une 2e colonne de 85 px + 213 px sur téléphone) */
  .section-project-right-content { grid-template: none / minmax(0, 1fr); }
  .section-project-right-content > * { grid-area: auto !important; grid-column: 1 / -1 !important; } /* !important : Webflow le place par identifiant (#w-node-…) */
}

/* ===== Pages projet : bouton retour toujours visible =====
   L'animation Webflow des boutons (apparition au scroll) le laissait bloqué entre 0 et 40 % d'opacité
   dans la colonne fixe. */
.section-project-right-button-back .primary-button { opacity: 1 !important; transform: none !important; }

/* ===== Pages projet (classes posées par js/dwip-projet.js) =====
   project-split    : écran unique, images en boucle à gauche, texte à droite (portable, tablette paysage)
   project-carousel : page qui défile, carrousel horizontal en haut, texte dessous (téléphone, tablette portrait)
   Sans classe (prefers-reduced-motion) : mise en page Webflow d'origine. */
html.project-locked, html.project-locked body { overflow: hidden; }
html.project-split .section-project { height: 100vh; height: 100dvh; overflow: hidden; align-items: stretch; }
html.project-split .section-project-container { height: 100%; min-height: 0; }
html.project-split .section-project-grid { height: 100%; align-items: stretch; flex-direction: row; gap: 3rem; }
html.project-split .section-project ~ .dwip-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; }
html.project-split .section-project-images,
html.project-carousel .section-project-images { will-change: transform; backface-visibility: hidden; }
html.project-split .section-project-images .project-image,
html.project-carousel .section-project-images .project-image { backface-visibility: hidden; transform: translateZ(0); }
html.project-split .section-project-left {
  width: 40%; align-self: flex-start; overflow: hidden;
  height: calc(100% - var(--dwip-footer-h, 2.5rem));
}
html.project-split .section-project-images { border-right: 2px solid var(--davana-300); padding: 0 0 1rem; }
html.project-split .section-project-right {
  position: relative; top: auto; min-height: 0; order: 0; flex: 1; width: auto; height: 100%;
  overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin;
  padding: calc(var(--dwip-nav-h, 5rem) + 1.5rem) 3.5% calc(var(--dwip-footer-h, 2.5rem) + 1.5rem) 0;
}

/* Texte trop long même réduit : il défile dans sa colonne, le bouton retour reste accroché en bas,
   et les lignes sont affichées d'office (leur animation suit le défilement de la page, qui est bloquée) */
html.project-textscroll .section-project-right { padding-bottom: 0; }
html.project-textscroll .section-project-right-button-back {
  position: sticky; bottom: 0; z-index: 2; width: 100%; flex: none;
  padding: 1.25rem 0 calc(var(--dwip-footer-h, 2.5rem) + 1rem);
  background: linear-gradient(to bottom, rgba(223, 239, 239, 0), var(--silex) 1.25rem);
}
html.project-textscroll .section-project-right .gsap_split_line { transform: none !important; translate: none !important; opacity: 1 !important; }

/* Carrousel horizontal : chaque photo fait ~84 % de la largeur (on voit le bord de la suivante),
   sans dépasser 42 % de la hauteur de l'écran ; il monte avec la page */
html.project-carousel .section-project-grid { flex-direction: column; gap: 0; }
html.project-carousel .section-project-left {
  order: 0; width: 100%; flex: none; overflow: hidden;
  margin-top: calc(var(--dwip-nav-h, 4rem) + .25rem);
  touch-action: pan-y;
}
html.project-carousel .section-project-images {
  flex-direction: row; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start;
  gap: .75rem; width: max-content; border-right: none; padding: 0;
}
html.project-carousel .section-project-images .project-image {
  flex: none; width: min(84vw, 56vh, 56dvh); height: auto;
  user-select: none; -webkit-user-drag: none; pointer-events: none;
}
html.project-carousel .section-project-right {
  order: 1; position: static; width: 100%; height: auto; justify-content: flex-start;
  padding: 1.75rem 5% 3rem;
}

/* ===== Footer (toutes les pages) =====
   Entre 768 et 1199 px, les trois colonnes à 100 % faisaient passer Instagram / LinkedIn /
   Mentions légales sur deux lignes, qui débordaient du footer (hauteur fixe 2,5 rem). */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  .footer-buttons, .footer-localisation { width: auto; flex: none; white-space: nowrap; grid-column-gap: 1.25rem; }
  .footer-logo { width: auto; flex: 1; }
}

/* ===== Écran de chargement ===== */
html.dwip-loading, html.dwip-loading body { overflow: hidden; }
html.dwip-no-loader .dwip-loader { display: none; } /* pages suivantes de la visite */
.dwip-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background-color: #000b12;
  transition: opacity 550ms cubic-bezier(.22, 1, .36, 1), visibility 0s linear 550ms;
}
.dwip-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.dwip-loader-logo {
  width: clamp(120px, 22vw, 190px); height: auto; overflow: visible;
  transition: transform 550ms cubic-bezier(.22, 1, .36, 1);
}
.dwip-loader.is-done .dwip-loader-logo { transform: scale(1.06); }
.dwip-loader-ghost { fill: #dfefef; opacity: .12; }
.dwip-loader-liquid { fill: #23bb8f; }
.dwip-loader-liquid-back { fill: #79dcb9; opacity: .45; }