:root {
      --bg: #eee;
      --muted: #3033BE;
      --text: #3033BE;
      /*--accent: #e5b700;*/
      --panel: rgba(48,51,190,1);
      --textnav: #fff;
      --swiper-navigation-size: 50px;
      --swiper-navigation-sides-offset: 20px;
      --swiper-theme-color: #3033BE;
    }

    /* Base */
    * { box-sizing: border-box; }
    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      background: var(--bg);
      color: var(--text);
      font-family: "Cormorant Garamond", serif;
    }
    a { color: inherit; text-decoration: none; }
	  p a, h3 a, h5 a {transition: opacity .6s ease; opacity: 1;}
	  p a:hover, h3 a:hover, h5 a:hover{opacity: 0.5;}
	sup {font-size: 45%;font-weight: 600;}

/* Focus par défaut : rien (on va piloter en .kbd-nav) */
:focus { outline: none; }
/* N’affiche le focus visuel que si l’utilisateur navigue au clavier */
.kbd-nav :focus-visible {
  outline: 3px solid rgba(48,51,190,.35);
  outline-offset: 4px;
  border-radius: 12px;
}

/* Focus personnalisé sur éléments clés seulement au clavier */
.kbd-nav .hamburger:focus-visible,
.kbd-nav .offcanvas nav a:focus-visible,
.kbd-nav .lien-cadre:focus-visible,
.kbd-nav .logo:focus-visible {
  box-shadow: 0 0 0 3px rgba(48,51,190,.20);
  outline: none;
  border-radius: 12px;
}

/* iOS/Safari : pas de flash bleu au tap */
a, button { -webkit-tap-highlight-color: transparent; }
/* Firefox : supprime l’anneau interne bouton */
button::-moz-focus-inner { border: 0; }






    /* Masonry valeurs par défaut*/
.masonry {
  --masonry-gap: 40px;
  --masonry-cols: 1;
	position: relative; display: grid;
}

.portfolio-container.masonry{  --masonry-cols: 2;--masonry-gap: 16px;}
.portfolio-container{}
.boxed { padding: 60px 28px 30px; max-width: 1400px; margin: 0 auto; }


       
	  
    h2 { font-size: 48px; letter-spacing: .02em; margin: 0 0 18px; font-weight: 100; }
    h3 { margin: 0 0 8px; font-size: 38px; font-weight: 100; }
	h4 {font-size: 24px; margin-block-start:0.8em; margin-block-end:0;}
	h5 {font-size: 18px; margin-block-start:0.8em; margin-block-end:0;}
    p { color: var(--muted); font-size: 18px; line-height: 1.7; }
    
    .fullwidth { position: relative; width: 100%; overflow: hidden; }
	.button-off{opacity: 0.6; pointer-events: none}
	  
blockquote {margin: 10px 0; opacity: 0.9}
blockquote i {font-size: 16px; letter-spacing: 0.5;}

	 
	  
	  
	  
	  .bandeau { height: clamp(300px,25vw,400px); }
    
	  
	  
	  
	  .masquebandeau {
      position: absolute; inset: 0; bottom: 0; height: 100%;
      background: linear-gradient(0deg, rgba(238,238,238,1) 0%, rgba(238,238,238,0.8) 20%, rgba(238,238,238,0) 50%);
      pointer-events: none; z-index: 1500;
    }
	  .lien-cadre {
		  font-size: 22px;
		  border: var(--text) solid 1px;
		  padding: 8px 35px;
		  transition: all .65s ease;
		  text-align: center;
		  width: 100%;
		  display: block;
		  margin: 32px 0 0 0;
		  border-radius: 8px;
		  
		  
	  }
	  .lien-cadre:hover{
		  background: var(--panel);
		  color: var(--textnav);
		  border-radius: 24px;
	  }

	.lien-cadre-blanc {
		  font-size: 22px;
		  border: var(--textnav) solid 1px;
		  padding: 8px 35px;
		  transition: all .65s ease;
		  text-align: center;
		  width: 100%;
		  display: block;
		  margin: 32px 0 0 0;
		  border-radius: 8px;
		text-decoration: none;
		  
	  }
	  .lien-cadre-blanc:hover{
		  background: #FFFFFF;
		  color: var(--text);
	  }
	
	.lien-small{
		width: 160px;
		font-size: 16px;
		margin-bottom: 30pt;
	}
    /* Dégradé blanc en haut pour lisibilité */
    .top-gradient {
      position: fixed; inset: 0 0 auto 0; height: 320px;
      background: linear-gradient(to bottom, rgba(255,255,255,0.3), rgba(255,255,255,0));
      pointer-events: none; z-index: 1500;
    }

    /* Logo */
    .logo {
      position: fixed; top: 16px; left: 16px; z-index: 2000;
      display: inline-flex; align-items: center; gap: 10px; padding: 6px 10px;
    }
    .logo img { width: clamp(100px,35%,160px); height: auto; display: block; mix-blend-mode: multiply; }
    .logo span { font-weight: 600; letter-spacing: .02em; font-size: 14px; }

    /* Hamburger */
    .hamburger {
      position: fixed; top: 16px; right: 16px; z-index: 2100;
      border: none; background: none; padding: 10px 12px; cursor: pointer;
      display: flex; align-items: center; gap: 10px;
    }
    .hamburger .bars { width: 22px; height: 14px; position: relative; display: inline-block; }
    .hamburger .bars::before,
    .hamburger .bars::after,
    .hamburger .bars span {
      content: ""; position: absolute; left: 0; width: 100%; height: 2px;
      background-color: #3033BE; transition: transform .3s ease, opacity .3s ease, top .3s ease; mix-blend-mode: normal;
    }
    .hamburger .bars span { top: 6px; }
    .hamburger .bars::before { top: 0; }
    .hamburger .bars::after { top: 12px; }
    .hamburger[aria-expanded="true"] .bars::before { top: 6px; transform: rotate(45deg); }
    .hamburger[aria-expanded="true"] .bars::after { top: 6px; transform: rotate(-45deg); }
    .hamburger[aria-expanded="true"] .bars span { opacity: 0; }
    .hamburger[aria-expanded="true"] .bars::before,
    .hamburger[aria-expanded="true"] .bars::after,
    .hamburger[aria-expanded="true"] .bars span { background-color: rgba(255,255,255,.6); }

    /* Panneau du menu */
    .offcanvas {
      background: var(--panel);
      position: fixed; top: 0; right: 0; width: min(420px, 92vw); height: 100vh;
      border-left: 1px solid rgba(255,255,255,0.12);
      transform: translateX(100%); transition: transform .35s ease; z-index: 1900;
      padding: 80px 24px 24px; overflow-y: auto; mix-blend-mode: normal;
    }
    .offcanvas.open { transform: translateX(0); }
    /*.offcanvas[aria-hidden="true"] { visibility: hidden; }*/
    .offcanvas nav { display: flex; flex-direction: column; justify-content: center; height: 100%; position: relative; z-index: 1; }
    .offcanvas nav a { display: block; padding: 25px 8px; font-size: 26px; font-weight: 100; border-bottom: 1px solid rgba(255,255,255,0.1); color: var(--textnav); opacity: .6; transition: opacity .3s ease; }
    .offcanvas nav a:hover,
    .offcanvas nav a:focus,
    .offcanvas nav a.active { opacity: 1; }

    /* HERO slider */
    .swiper-hero { position: relative; width: 100%; height: 100vh; overflow: hidden; }
    .swiper { position: absolute; inset: 0; width: 100%; height: 100%; }

    /* Contexte et ordres de calques clairs */
    .swiper-slide{ position: relative; overflow: hidden; }
    .fullscreen{
      position: absolute; inset: 0; /* passe la vidéo en fond */
      object-fit: cover;
      z-index: 0;                    /* sous l’overlay */
      transform: translateZ(0);      /* propre calque, plus fluide */
      width: 100%; height: 100%;
      display: block;
    }

    /* Overlay et texte */
    .overlay{
      position: absolute; left: 0; right: 0; bottom: 0;
      z-index: 2;                   /* au-dessus de la vidéo */
      will-change: transform, opacity;
      backface-visibility: hidden;
      transform: translateZ(0);
      padding: clamp(20px, 8vw, 120px);
      display: grid; gap: 8px;
      background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.9) 100%);
    }
    .slidetext{
      position: relative;
      z-index: 3;                   /* au-dessus du dégradé */
      will-change: transform, opacity;
      backface-visibility: hidden;
      transform: translateZ(0);
      max-width: 90ch;
		
    }
	  .overlay img {max-width: 60vw; }
	  .overlay h1 { margin: 10px 0; font-size: clamp(31px, 9vw, 72px); line-height: 1.05; letter-spacing: .02em; font-weight: 100; color: #3033BE; }
    .overlay p { margin: 10px 0; font-size: clamp(20px, 5vw, 40px); color: #3033BE; line-height: clamp(36px,5vw,40px); }

    /* Slider controls (utilise les boutons natifs Swiper) */
    .swiper-hero-button-prev,
    .swiper-hero-button-next { color: var(--text); }

    /* Series */
    .series-container { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; }
    .series-item { position: relative; overflow: hidden; background: rgba(255,255,255,0.5); border-radius: 12px; height: clamp(170px, 20vh, 350px); }
    .series-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 1; }
    .series-item .cadrebg { position: absolute; inset: 0; background: var(--panel); mix-blend-mode: multiply; z-index: 2; pointer-events: none; opacity: 1; transition: opacity .6s ease; }
    .series-container figcaption { color: #fff; transition: opacity .6s ease; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 1; text-align: center; padding: 0; z-index: 2; }
    .series-container figcaption h3 { font-weight: 100; font-size: clamp(40px,4vw,70px); line-height: clamp(40px,3.2vw,56px); margin: 0; }
    .series-container figcaption h5 { font-weight: 100; font-variant: italic; font-size: clamp(16px,1.4em,20px); margin: 0; }
    .series-container a { width: 100%; height: 100%; z-index: 3; opacity: 1; transition: opacity 1s ease; position: relative; display: block; }
    .series-container a:hover .cadrebg { opacity: 0; }
    .series-container a:hover figcaption { opacity: 0; }

    .series-container .series-item,
    .series-container figure,
    figure.series-item { margin: 0; }

	  
	  
	/*liste */
	  .list{grid-template-columns: 1fr; display: grid; gap: 16px}
	  .list .list-item {position: relative;display: grid;grid-template-columns: 180px auto; grid-template-rows: auto; gap:16px; margin: 0; align-items: stretch;}
	  .list .list-item .thumb {width: 180px; aspect-ratio: 1/1; position: relative;}
	  .list-item img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; display: block; z-index: 1; border-radius: 12px; }
	  .list .list-item .text{align-self: end; padding-bottom: 6px; transition: opacity .6s ease; height: 180px; overflow: hidden;}
	  
		.list-item .cadrebg { position: absolute; inset: 0; background: var(--panel); mix-blend-mode: multiply; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; border-radius: 12px}
		.list-item:hover .cadrebg { opacity: 1; }
	  .list-item:hover .text { opacity: 0.5; }




	

	.lightbox-item { cursor: zoom-in;}
    .masonry-item { position: relative; overflow: hidden; background: rgba(255,255,255,0.5); border-radius: 12px; }
    .masonry-item img { width: 100%; height: auto; display: block; z-index: 1; position: relative; }
    .masonry-item .cadrebg { position: absolute; inset: 0; background: var(--panel); mix-blend-mode: multiply; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
    .masonry-item figcaption { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); text-align: center; padding: 25px; color: #fff; mix-blend-mode: normal; z-index: 3; opacity: 0; transition: opacity .6s ease; }
    figcaption h3 { font-weight: 100; font-size: clamp(20px, 5vw,38px); line-height: clamp(20px, 5vw,38px); margin: 0 0 6px 0; }
    figcaption h5 { font-weight: 100; font-variant: italic; font-size: clamp(13px, 2.2vw,18px); line-height: clamp(13px, 2.2vw,18px); margin: 0; }
    /*.masonry-item a { position: absolute; inset: 0; width: 100%; height: 100%;} /*z-index: 3; opacity: 1; transition: opacity 1s ease; */
	.masonry-item a.spip_out{
	  position: relative; 
		color:#7174DB;
	}


	.masonry-item figure a,
	.series-container a {
	  position: absolute;
	  inset: 0;
	  width: 100%;
	  height: 100%;
	}

	.masonry-item figure.spip_doc_inner a{
		position: relative;	
		
	}

	.masonry-item figure.spip_doc_inner{
		width: 50%;
		transition: opacity 0.6s ease;
		opacity: 1;
	}

	.masonry-item figure.spip_doc_inner img{
		opacity: 1;
		border-radius: 12px;	
	}

	.masonry-item figure.spip_doc_inner:hover{
		opacity: 0.5;
	}

	.spip_doc_inner a{position: relative; pointer-events: none; border-radius: 12px;}
    .masonry-item:hover .cadrebg { opacity: 1; }
    .masonry-item:hover figcaption { opacity: 1; }

    .masonry.is-masonry { display: block; }
    .masonry.is-masonry .masonry-item { position: absolute; margin: 0; }

    .masonry .masonry-item,
    .masonry figure,
    figure.masonry-item { margin: 0; }
    figure { margin: 0; }
		




    /* About (Section bio + Série) */
    .masonry.about-container { display: grid; grid-template-columns: 1fr; gap: 50px; position: relative;}
  

    .about-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 24px 0; }
    .about-photo { border-radius: 12px; overflow: hidden; }
	.about-photo aside {margin-bottom: 28^x;}
    .about-photo img, .about-photo video { width: 100%; height: auto; display: block; }

    /* Footer */
    .contact { font-size: 22px; margin-bottom: 28px; }
    .copyright { font-size: 13px; margin-bottom: 28px; }

    /* === Lightbox (overlay + swiper) === */
    #lightbox{ position: fixed; inset: 0; transform: translateY(100%); opacity: 1; pointer-events: none; transition: transform .55s ease-in-out, opacity .55s ease-in-out; z-index: 999999; }
	#lightbox.afficher{transform: none; pointer-events: auto; z-index:1;}
    body.lb-open #lightbox{ transform: translateY(0); opacity: 1; pointer-events: auto; }

    .lightbox { background: var(--panel); position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; height: 100vh; }

    body.lb-open { overflow: hidden; }
    html.lb-open, body.lb-open { overscroll-behavior: none; }

    .lightbox .lb-content { display: grid; gap: clamp(16px, 2vw, 28px); padding: 25px 74px; align-items: start; width: 100vw; max-height: 100vh; align-self: start; overflow: auto; cursor: default; }
    .lightbox figure { margin: 0; }
    .lightbox img { position: relative; z-index: 51; max-width: 100%; max-height: 92vh; height: auto; opacity: 1; transition: opacity 0.4s ease; mix-blend-mode: normal; }

    .lb-meta { color: #fff; z-index: 52; overflow: visible; max-height: none; padding: 24px 2px 24px 8px; }
    .lb-meta * { color: #fff; }
    .lb-meta a { color: #fff; }

    .lb-content.is-portrait { grid-template-columns: auto minmax(285px,1fr); grid-template-rows: auto; }
    .is-portrait figure { align-self: top; text-align: center; }

    .lb-content.is-standard { grid-template-columns: 1fr clamp(280px, 32vw, 420px); grid-template-rows: auto; }

    .lb-content.is-panorama { grid-template-columns: 1fr; grid-template-rows: auto auto; }
    .is-panorama .lb-meta { width: 100%; columns: 2; column-gap: 32px; }

    .swiper-lb-button-prev,
    .swiper-lb-button-next { color: rgba(255,255,255,0.85); }
    .swiper-lb-button-prev:hover,
    .swiper-lb-button-next:hover{ color: rgba(255,255,255,1); }

    #lb-close { position: fixed; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: none; background: rgba(0,0,0,0.15); border-radius: 999px; cursor: pointer; z-index: 20000; }
    #lb-close svg { width: 26px; height: 26px; stroke: #fff; fill: none; stroke-width: 2; }

    /* Mobile */
/* Breakpoints */
@media (min-width: 700px)  { 
	.masonry { --masonry-cols: 2; } 
	.masonry.about-container { --masonry-cols: 1;}
	.boxed { padding: 60px 140px 30px;  }
	.list{grid-template-columns: 1fr}
	
}
@media (min-width: 1024px) { 
	.masonry { --masonry-cols: 3; } 
	.masonry.about-container { --masonry-cols: 2;}
	.list{grid-template-columns: repeat(2, 1fr);}
	.portfolio-container.masonry{  --masonry-cols: 3}
}




    @media (max-width: 1024px) { .lightbox .lb-content { grid-template-columns: 1fr; grid-template-rows: auto auto; } .lightbox img { max-height: 78svh; } .is-panorama .lb-meta { columns: 1; } }

    /* Mobile hero overlay */
    @media (max-width: 699px) {
      .swiper-hero { height: 100svh; }
      .overlay { background: none !important; }
      .overlay::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 75svh; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 65%, rgba(255,255,255,0.85) 100%); z-index: 0; pointer-events: none; }
      .overlay .slidetext { position: relative; z-index: 1; transform: translateY(-6svh); padding: 0 4.5svh; }
	.swiper-lb-button-prev,
		.swiper-lb-button-next{display: none;}
		.lightbox .lb-content{padding: 25px;}
    }

    /* Accessibility & motion preferences */
    @media (prefers-reduced-motion: reduce) {
      .slide, .overlay, .hamburger .bars::before, .hamburger .bars::after, .hamburger .bars span { transition: none !important; }
      .swiper-hero .slider { animation: none !important; }
      #lightbox, #lightbox .lightbox{ transition: none !important; transform: none !important; opacity: 1 !important; pointer-events: auto !important; }
    }