/* ============================================================
   GRILLE PROJETS HOME — principe Nash&Young (page line-up)
   appliqué à la grille Webflow existante, SANS modifier son
   HTML : 2 colonnes pleine largeur, ratio uniforme 3:2,
   zoom 105% au survol, 1 colonne en mobile.
   ============================================================ */

/* Le conteneur Webflow sort de ses marges pour laisser la
   grille occuper toute la largeur (padding 25px comme N&Y) */
.grille-photo-accueil .container-hero {
  width: 100%;
  max-width: none;
  padding-left: 25px;
  padding-right: 25px;
}

/* La grille Webflow devient 2 colonnes égales :
   une seule mesure pour tout, comme sur la home : la goutière
   du milieu vaut exactement les marges sur les côtés (25px).
   La maçonnerie d'origine (3 colonnes + spans) est neutralisée. */
#grille-photo .quick-stack-20 {
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  column-gap: 25px;
  row-gap: 25px;
  align-items: start;
  padding: 25px 0 0;
}

/* Chaque cellule occupe exactement 1 case × 1 case :
   toutes les cartes font la même mesure, comme Nash&Young */
#grille-photo .quick-stack-20 .w-layout-cell {
  grid-row: span 1 / span 1 !important;
  grid-column: auto !important;
  padding: 0;
}

/* Les cellules vides de fin de grille ne créent pas de case fantôme */
#grille-photo .quick-stack-20 .w-layout-cell:empty {
  display: none;
}

/* PRINCIPE CLÉ du système Nash&Young : un ratio uniforme 3:2
   sur chaque carte. Les anciens « hacks » Webflow (ratio par
   padding-top, hauteurs en %) sont neutralisés d'autorité. */
#grille-photo .quick-stack-20 a {
  display: block !important;
  aspect-ratio: 3 / 2 !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
}

#grille-photo .quick-stack-20 a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: scale .3s ease-in-out;
}

/* Zoom 105% au survol, comme la page de référence
   (propriété "scale" pour cohabiter avec les transforms
   inline posés par les animations Webflow) */
#grille-photo .quick-stack-20 a:hover img {
  scale: 1.05;
}

/* --- Responsive : 1 colonne à partir de 680px (Nash&Young) --- */

@media screen and (max-width: 680px) {
  /* marges de 15px sur cette largeur : la goutière suit */
  .grille-photo-accueil .container-hero {
    padding-left: 15px;
    padding-right: 15px;
  }

  #grille-photo .quick-stack-20 {
    grid-template-columns: 1fr;
    column-gap: 15px;
  }
}

/* ============================================================
   Les noms sous les photos ont été retirés : le titre vit
   désormais sur la page projet, au-dessus de la description.
   ============================================================ */

/* ============================================================
   INTRO — écran plein entre la vidéo et la grille, texte centré
   ============================================================ */

.intro-camille {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--beige);
  padding: 0 25px;
}

.intro-texte {
  margin: 0;
  text-align: center;
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
  font-size: clamp(34px, 5.5vw, 96px);
  line-height: 1.08;
  color: var(--black);
}

/* ============================================================
   VIDÉO ÉPINGLÉE — le contenu (intro, grille) glisse au-dessus
   de la vidéo pendant le scroll, comme un calque
   ============================================================ */

/* La vidéo reste au-dessus du footer épinglé (z0) à l'arrivée :
   position normale + z-index 1, elle occupe tout l'écran */
.video {
  position: relative;
  z-index: 1;
}

.intro-camille,
.section-8,
.grille-photo-accueil {
  position: relative;
  z-index: 1;
  background-color: var(--beige);
}

/* ============================================================
/* ============================================================
   PROJETS ACCUEIL — section façon Athom Studio :
   1 carte pleine largeur + paires asymétriques (large/étroit),
   coins arrondis, badges pilules qui descendent au survol,
   bouton pilule noir « Tous les projets »
   ============================================================ */

.projets-accueil {
  position: relative;
  z-index: 1;
  background-color: var(--beige);
  padding: 60px 30px 70px;
}

.projets-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.projet-item {
  border-radius: 0;
  position: relative;
}

/* motif Athom : 1re carte pleine largeur, puis paires large/étroit */
.projet-item.premier {
  width: 100%;
}

.projet-item.large {
  flex: 1 1 0%;
  min-width: 30%;
}

.projet-item.etroit {
  width: 40%;
  min-width: 38%;
}

.projet-lien {
  display: block;
  width: 100%;
  /* même hauteur que les cases de la grille de la page projets */
  height: calc((100vw - 58px) / 3);
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.projet-nom-accueil {
  padding: 10px 0 0;
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 20px;
  line-height: 25px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-align: left;
  color: var(--black);
}

.projet-lien img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale .3s ease-in-out;
}

/* Survol : zoom 105% dans le cadre, comme sur la page projets */
.projet-lien:hover img {
  scale: 1.05;
}

/* Apparition au scroll, comme sur la page projets : le fondu et
   la montée sont posés par le script (index.html) via
   .proj-et-anime / .proj-et-visible */
.proj-et-anime {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
  transition: opacity .6s ease, transform .6s ease;
}

.proj-et-anime.proj-et-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* bouton pilule noir « Tous les projets » */
.projets-accueil-cta {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.bouton-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  background-color: var(--black);
  border: 1px solid var(--black);
  border-radius: 50em;
  color: #ffffff;
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: .8px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .3s ease, color .3s ease;
}

.bouton-pill:hover {
  background-color: transparent;
  color: var(--black);
}

/* les hauteurs suivent la formule de la grille à toutes les tailles */

@media screen and (max-width: 767px) {
  .projets-accueil {
    padding: 40px 15px 50px;
  }

  .projet-item,
  .projet-item.etroit {
    width: 100%;
    min-width: 100%;
  }

  .projet-lien {
    height: auto;
    aspect-ratio: 3 / 2;
  }
}

/* ============================================================
   TÉMOIGNAGES — avis qui défilent avec flèches de chaque côté
   (flèche gauche pour aller à gauche, flèche droite à droite)
   ============================================================ */

.temoignages {
  position: relative;
  z-index: 1;
  background-color: var(--beige);
  display: flex;
  align-items: center;
  gap: 50px;
  padding: 40px 60px 90px;
}

.temoignage-slider {
  flex: 1 1 auto;
  min-width: 0;
}

/* centrage vertical des avis de tailles différentes */
.temoignage-slider .slick-track {
  display: flex;
}

/* 3 colonnes : la gouttière vient du padding de la slide,
   Slick calcule lui-même la largeur de chacune */
.temoignage-slider .slick-slide {
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 25px;
}

.temoignage-texte {
  margin: 0 0 30px;
  font-family: 'Libre Baskerville', Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 24px);
  line-height: 1.55;
  text-align: center;
  color: var(--black);
}

.temoignage-auteur {
  text-align: center;
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 22px;
  font-weight: 400;
  text-transform: none;

  letter-spacing: .01em;
  color: var(--black);
}

.temoignage-societe {
  display: block;
  margin-top: 1px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .01em;
}

@media screen and (max-width: 991px) {
  .temoignages {
    padding: 40px 40px 80px;
  }

  .temoignage-slider .slick-slide {
    padding: 0 18px;
  }
}

@media screen and (max-width: 767px) {
  .temoignages {
    padding: 20px 15px 60px;
  }

  .temoignage-slider .slick-slide {
    padding: 0 12px;
  }
}

/* ============================================================
   FOOTER — fond noir, textes blancs, agencement demandé :
   liens en haut à droite, appel découverte + mail puis
   CAMILLE PETITBON en bas à gauche. Épinglé en bas d'écran,
   le contenu glisse par-dessus pour le dévoiler.
   ============================================================ */

.footer-nouveau {
  position: sticky;
  bottom: 0;
  z-index: 0;
  background-color: var(--black);
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 45px 30px 35px;
}

/* liens en haut à droite */
.footer-haut {
  display: flex;
  justify-content: flex-end;
}

.footer-liens {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}

.footer-liens a {
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: opacity .25s ease;
}

.footer-liens a:hover {
  opacity: .5;
}

/* appel découverte + mail, au-dessus du nom, à gauche */
.footer-bas {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-appel {
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 23px;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
}

.footer-appel:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.footer-mail {
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  color: #ffffff;
}

.footer-mail a {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* CAMILLE PETITBON en bas à gauche */
.footer-titre {
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(40px, 7.4vw, 107px);
  line-height: .95;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: left;
  color: #ffffff;
  white-space: nowrap;
}

@media screen and (max-width: 767px) {
  .footer-nouveau {
    padding: 35px 20px 25px;
  }

  .footer-titre {
    white-space: normal;
  }
}

/* ============================================================
   NAVBAR (accueil) — transparente, texte seul. Apparaît quand
   la vidéo est slidée à 80%. mix-blend-mode: difference :
   le texte est noir sur fond clair, blanc sur fond foncé,
   automatiquement (photos comprises).
   ============================================================ */

.accueil .navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity .45s ease, transform .45s ease;
}

.accueil .navbar.nav-visible {
  opacity: 1;
  transform: translateY(0);
}

/* couleur des liens pilotée en JS : noir ou blanc franc,
   uniforme sur tout le lien selon le fond échantillonné */
.accueil .navbar .link-navbarr-2 {
  color: #000000;
  transition: color .25s ease;
}

.accueil .navbar .image-110 {
  filter: brightness(0) invert(1);
}

/* Navbar accueil : texte seul — le logo est masqué */
.accueil .navbar .brand-2 {
  display: none;
}

/* ============================================================
   LIENS NAVBAR (accueil) — textes flottants, aucun fond ni
   barre épaisse. Soulignement FIN qui vient de gauche à
   droite au survol et au clic.
   ============================================================ */

.accueil .navbar .nav-menu,
.accueil .navbar .container-full-2 {
  background-color: transparent;
}

.accueil .navbar .link-navbarr-2 {
  position: relative;
  padding-bottom: 4px;
}

/* on retire la barre épaisse Webflow au survol */
.accueil .navbar .link-navbarr-2:hover {
  box-shadow: none;
}

/* le trait fin : 1px, couleur du texte, animé de gauche à droite */
.accueil .navbar .link-navbarr-2::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .35s ease;
}

.accueil .navbar .link-navbarr-2:hover::after,
.accueil .navbar .link-navbarr-2:active::after,
.accueil .navbar .link-navbarr-2.w--current::after {
  transform: scaleX(1);
}

/* ============================================================
   GRILLE HOME — système Nash & Young : 2 colonnes uniformes
   3:2. Une seule mesure pour tout : la goutière du milieu
   entre les deux photos vaut exactement les marges sur les
   côtés (25px), donc chaque colonne fait (100% - 25px) / 2.
   ============================================================ */

.projets-accueil {
  padding: 25px;
}

.projets-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 25px;
}

.projet-item,
.projet-item.premier,
.projet-item.large,
.projet-item.etroit {
  width: calc(50% - 12.5px);
  flex: 0 0 auto;
  min-width: 0;
  border-radius: 0;
}

.projet-lien {
  height: auto;
  aspect-ratio: 3 / 2;
}

@media screen and (max-width: 680px) {
  .projet-item,
  .projet-item.premier,
  .projet-item.large,
  .projet-item.etroit {
    width: 100%;
  }

  /* marges de 15px sur cette largeur : la goutière suit */
  .projets-grille {
    gap: 15px;
  }
}

/* Page projets : grille descendue sous la navbar, et de l'air
   en dessous avant le pied de page */
.grille-photo-accueil {
  padding-top: 70px;
  padding-bottom: 70px;
}

/* Navbar : trait de soulignement espacé du texte */
.navbar .link-navbarr-2,
.navbar .lien-camille {
  padding-bottom: 6px;
}

/* ============================================================
   SÉLECTION HOME — slider Slick exactement comme Nash & Young
   (slidesToShow 2.2, flèches .control_diapo, bouton dans .lien)
   Remplace la grille 2 colonnes de la home.
   ============================================================ */

.selection {
  position: relative;
  z-index: 1;
  background-color: var(--beige);
  padding: 50px 25px 0 25px;
}

.selection .centre {
  position: relative;
  width: calc(100% + 10px);
  left: -10px;
}

.selection .slick-list {
  overflow: hidden;
}

.selection .selection-carte {
  width: auto;
  padding-left: 10px;
  box-sizing: border-box;
}

.selection .selection-carte a {
  display: block;
  text-decoration: none;
}

.selection .selection-carte figure {
  height: 530px;
  overflow: hidden;
  margin: 0;
}

@media screen and (max-width: 1580px) {
  .selection .selection-carte figure { height: 480px; }
}

@media screen and (max-width: 1380px) {
  .selection .selection-carte figure { height: 400px; }
}

@media screen and (max-width: 1080px) {
  .selection .selection-carte figure { height: 300px; }
}

.selection .selection-carte img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale .3s ease-in-out;
}

.selection .selection-carte a:hover img {
  scale: 1.05;
}

.selection-nom {
  margin: 0;
  padding: 15px 0 0;
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 21px;
  line-height: 25px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  text-align: left;
  color: var(--black);
}

.lien {
  position: relative;
  z-index: 1;
  background-color: var(--beige);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding: 30px 25px 60px;
}

.control_diapo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 45px;
  height: 45px;
  cursor: pointer;
  user-select: none;
  transition: opacity .25s ease;
}

.control_diapo.slick-disabled {
  opacity: .25;
  cursor: default;
  pointer-events: none;
}

.control_diapo svg {
  display: block;
}

.lien .bouton {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid var(--black);
  background-color: var(--beige);
  color: var(--black);
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 4px;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.lien .bouton:hover {
  background-color: var(--black);
  color: var(--beige);
}

@media screen and (max-width: 521px) {
  .selection {
    padding: 25px 15px 0 15px;
  }

  .lien {
    gap: 20px;
    padding: 25px 15px 50px;
  }

  .lien .bouton {
    padding: 12px 18px;
    font-size: 12px;
    letter-spacing: 3px;
  }
}

/* ============================================================
   LIEN « voir plus de projets » sous la grille home
   ============================================================ */

.voir-plus-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 50px;
  padding-bottom: 110px;
}

/* bouton noir plein, même construction que les autres boutons
   posés sur du blanc */
.voir-plus {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 32px;
  font-family: 'Acumin Variable Concept', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 4px;
  text-transform: lowercase;
  color: var(--beige);
  background-color: var(--black);
  border: 1px solid var(--black);
  border-radius: 0;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  transition: color .3s ease, background-color .3s ease;
}

.voir-plus:hover {
  color: var(--black);
  background-color: var(--beige);
}

/* Pas de barre de soulignement sous le lien */
.voir-plus::after {
  display: none;
}

.voir-plus:hover::after {
  display: none;
}

/* ===== Approche -50 (letter-spacing -0.05em) sur tout le texte en majuscules ===== */
#grille-photo .quick-stack-20 .w-layout-cell::after { letter-spacing: -0.05em; }
.intro-texte { letter-spacing: -0.05em; }
.projet-nom-accueil { letter-spacing: -0.05em; }
.bouton-pill { letter-spacing: -0.05em; }
.temoignage-auteur { letter-spacing: -0.05em; }
.footer-liens a { letter-spacing: -0.05em; }
.footer-appel { letter-spacing: -0.05em; }
.footer-titre { letter-spacing: -0.05em; }
.selection-nom { letter-spacing: -0.05em; }
.lien .bouton { letter-spacing: -0.05em; }
.voir-plus { letter-spacing: -0.05em; }