@charset "UTF-8";

/* ---- Fonts ---- */
@font-face{
  font-family:'altehaasgrotesk';
  src:url("font/altehaasgroteskregular-webfont.woff2") format('woff2'),
      url("font/altehaasgroteskregular-webfont.woff") format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'altehaasgrotesk';
  src:url("font/altehaasgroteskbold-webfont.woff2") format('woff2'),
      url("font/altehaasgroteskbold-webfont.woff") format('woff');
  font-weight:700; font-style:normal; font-display:swap;
}
/* ---- Anim ---- */

/* ----------------------------------------------
 * Generated by Animista on 2025-9-2 15:3:40
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}@keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}

.vibrate-1 {
	-webkit-animation: vibrate-1 0.5s linear infinite both;
	        animation: vibrate-1 0.5s linear infinite both;
}
/* ---- Loader ---- */
.loader-container{
  position:fixed; inset:0; background:#fff; z-index:2000;
  display:flex; justify-content:center; align-items:center;
  transition:opacity .3s ease;
}
.loader-container.hidden{ opacity:0; pointer-events:none; }
.loader_txt{ font-family:'altehaasgrotesk',sans-serif; font-size:28px; }
.flicker-2{ animation:flicker-2 2s linear infinite both; }
@keyframes flicker-2{
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}
  20%,24%,55%{opacity:0}
}

/* ---- Sticker vidéo (Camping) ---- */
.video-wrapper{ position:relative; display:inline-block; }
.video-wrapper video{ display:block; width:100%; height:auto; }
.video-wrapper .sticker{
  position:absolute; bottom:20px; left:20px;
  width:160px; height:auto; pointer-events:none;
}

/* ===== Reset / Base ===== */
:root{ --banner-h:40px; }
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ display:block; max-width:100%; height:auto; }
a{ color:#000; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* iOS: empêcher l’agrandissement auto du texte */
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }

body{
  background:#fff; color:#000;
  font-family:'altehaasgrotesk',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:400; font-size:20px; line-height:1.5;
  overflow-x:hidden;
  /* compense la bannière + notch iOS */
  padding-top:calc(var(--banner-h) + env(safe-area-inset-top));
}

/* ===== Nav (style du début, non bold) ===== */
body.page-rp nav a.Title{
  font-family:'altehaasgrotesk',sans-serif;
  font-weight:400; font-size:40px; line-height:1.2;
  text-transform:uppercase; color:#000; text-decoration:none;
  display:inline-flex; align-items:center;
  font-synthesis-weight:none;
}
body.page-rp nav a.Title:hover,
body.page-rp nav a.Title[aria-current="page"]{ text-decoration:underline; }

/* ===== Bannière défilante ===== */
.scrolling-banner{
  position:fixed; left:0; right:0; top:0; z-index:1000;
  background:#000; color:#fff; overflow:hidden;
  /* padding + marge notch iOS */
  padding-top:calc(10px + env(safe-area-inset-top));
  padding-bottom:10px;
}
.scrolling-banner-inner{ display:flex; align-items:center; width:200%; animation:scroll 20s linear infinite; }
.scrolling-banner p{ margin:0; white-space:nowrap; font-weight:700; }
@keyframes scroll{ from{transform:translateX(0)} to{transform:translateX(-100%)} }

/* ===== Index ===== */
.titre{ margin:20px 5%; }
.conteneur_general{
  margin:0 5% 5%;
  display:flex; justify-content:space-between; flex-wrap:wrap;
}
.projet{
  width:47%; margin:0 0 30px;
  border-bottom:1px solid #000; padding-bottom:11px;
  transform:scale(1); transition:transform .3s ease;
}
.projet:hover{ transform:scale(1.05); }
.article{ display:block; }
.article video{ width:100%; height:auto; mix-blend-mode:multiply; }

/* Bloc About (index) */
.aboutcont{
  margin:0 5% 40px; width:90%;
  border-bottom:1px solid #000; padding-bottom:11px;
}
.aboutcont .about{ display:block; transition:transform .3s ease; }
.aboutcont .about:hover{ transform:scale(1.02); text-decoration:underline; }

/* ===== Footer ===== */
footer{
  margin-top:30px; padding:2% 10% 0; background:#000; color:#fff;
  margin-bottom:-20px !important;
}
footer a{ color:#fff; display:block; margin-bottom:5px; }
footer a:hover{ text-decoration:underline; }
.copyright{ margin-top:10%; text-align:center; color:#828282; }

/* ===== Pages internes ===== */
body.page-rp .page-wrap{ margin:0 5% 6%; }
body.page-rp header{ margin:0; }
body.page-rp nav{ margin:0; border-bottom:1px solid #000; }
body.page-rp nav ul{
  list-style:none; display:flex; flex-wrap:wrap; justify-content:flex-start;
  padding:20px 0 15px; margin:0;
}
body.page-rp nav li{ margin-right:30px; }
body.page-rp .intro{ line-height:1.6; margin-bottom:24px; }

/* Images “About” / équivalents */
.page-about .img_about,
.page-bc .img_about,
.page-j .img_about,
.page-dm .img_about{
  max-width:70%; margin:0 auto; mix-blend-mode:multiply;
}

/* Galerie (index = bordure, internes = sans) */
body.index .gallery .item{ border-bottom:1px solid #000; padding-bottom:11px; }

body.page-rp .gallery .item,
body.page-j .gallery .item,
body.page-dm .gallery .item,
body.page-bc .gallery .item,
body.page-about .gallery .item{
  border:none; padding-bottom:0;
}
body.page-rp .gallery{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px;
}

/* ===== Tee's (page-te) — vidéo = même hauteur que les images ===== */
body.page-te .gallery .item{ border:none !important; padding-bottom:0 !important; }
body.page-te .gallery .item img,
body.page-te .gallery .item video{
  display:block; width:100%; height:auto; max-width:100%;
}
body.page-te .gallery .item video{ aspect-ratio:3/4; object-fit:cover; }

/* Fallback aspect-ratio (vieux Safari iOS) */
@supports not (aspect-ratio:1/1){
  body.page-te .gallery .item .ratio-box{
    position:relative; width:100%; padding-top:133.333%; overflow:hidden; /* 3:4 */
  }
  body.page-te .gallery .item .ratio-box > video,
  body.page-te .gallery .item .ratio-box > img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  }
}

/* ===== Responsive ===== */
@media (max-width:1167px){
  .titre{ margin:20px 5%; }
}
@media (max-width:877px){
  .conteneur_general{ flex-direction:column; align-items:center; }
  .projet{ width:90%; }
  body.page-rp .page-wrap{ margin:0 14% 12%; }
  body.page-rp .gallery{ grid-template-columns:1fr; }
}
@media (max-width:547px){
  body.page-rp nav ul{ flex-direction:column; padding:10px; }
  body.page-rp nav li{ margin-right:0; }
  body.page-rp nav a.Title{ font-size:26px; line-height:39px; }
  body.page-rp .page-wrap{ margin:0 10% 14%; }
  .projet{ width:100%; }
  .page-about .img_about,
  .page-bc .img_about,
  .page-j .img_about,
  .page-dm .img_about{ max-width:85%; }
  .video-wrapper .sticker{ bottom:20px; left:20px; width:100px; height:auto; }
}

/* Mobile tactile : pas de zoom au hover */
@media (hover:none) and (pointer:coarse){
  .projet:hover{ transform:none; }
}

/* ===== iPhone / Safari fixes ciblés ===== */

/* type + nav + bannière plus sages sur petits écrans */
@media (max-width:600px){
  body{ font-size:16px; }
  .titre h1{
    font-size:clamp(28px,10vw,40px);
    line-height:1.15;
  }
  .aboutcont h2{ font-size:clamp(22px,7vw,28px); }
  body.page-rp nav a.Title{ font-size:26px; line-height:1.2; text-transform:uppercase; }
  .scrolling-banner p{ font-size:14px; }
}

/* sticker responsive sur mobile */
.video-wrapper .sticker{ width:28vw; max-width:160px; }

/* ===== iPhone/Safari — forcer le même ratio que les images pour les vidéos ===== */
/* Cible uniquement les .item qui contiennent une <video> */
body.page-te .gallery .item:has(video) {
  position: relative;
}

/* Crée une "cage" 3:4 (hauteur = 133.333% de la largeur) */
body.page-te .gallery .item:has(video)::before {
  content: "";
  display: block;
  padding-top: 133.333%;
}

/* Place la vidéo dans la cage, couvrant exactement comme une image */
body.page-te .gallery .item:has(video) > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Ceinture & bretelles : désactiver toute bordure résiduelle sur Tee's */
body.page-te .gallery .item {
  border: none !important;
  padding-bottom: 0 !important;
}