:root{
  --text:#000;
  --link: rgb(0,0,0);
  --hover: rgb(100,100,100);
  /* --active: rgb(190,0,0); */
  --border:#000;
  --max: 1200px;
  --pad: 14px;
  --gap: 14px;
  --header-h: 88px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  /* color:#000; */
  font-family: Helvetica, Arial, sans-serif;
  line-height:1.25;
  background:#fff;
}

/* Type */
h1,h2,h3,h4{
  margin:0 0 10px 0px;
  font-weight:800; /* Helvetica Semibold approximation */
  line-height:1;
  /* letter-spacing:1px; */
}

p{
  margin: 12px 0 12px 8px;
  font-size:13px;
  font-weight:400;
  text-align:justify;
}

/* Links */
a{
  color:var(--link);
  text-decoration:none;
}
a:hover, a:active, a:focus{
  color:var(--hover);
  outline:none;
}

/* Fixed header */
header{
  position:fixed;
  top:0; left:0; right:0;
  background:#fff;
  /* border-bottom:1px solid rgba(0,0,0,0.15); */
  z-index:1000;
}
.header-inner{
  max-width:var(--max);
  margin:0 auto;
  padding:12px var(--pad);
}
.brand{
  font-weight:1000;
  font-size:14px;
  line-height:1,1;
  /* letter-spacing:1px; */
  margin-bottom:10px;
  /* text-align:justify; */
}

nav{
  margin-top:4px;
  font-weight:600;
  font-size:13px;
  line-height:1.1;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  /* text-align:justify; */
}
nav a.is-active{
  color: rgb(190,0,0);
}

/* Page layout */
main{
  max-width:var(--max);
  margin:0 auto;
  padding: calc(var(--header-h) + 18px) var(--pad) 48px var(--pad);
}

/* Sections */
section{
  width:100%;
  padding: 16px 0;
  /* border-bottom: 0px solid rgba(0,0,0,0.12); */
}
section:last-child{ border-bottom:none; }

.section-title{
  font-size:26px;
  margin-bottom:2px;
}

.paragraph{
  font-size:14px;
  margin-bottom:0;
}

/* Two-column content on tablet/desktop */
.text-columns{
  width:100%;
}

/* Projects grid */
.projects-grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap);
}

.project{
  /* border:0px dotted var(--border); */
  padding:8px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.project h3{
  font-size:16px;
  text-align:justify;
  margin:0;
}
.project .project-text{
  margin:0;
  font-size:13px;
  text-align:justify;
  width:100%;
}

.project figure{
  margin:0;
  width:100%;
}
.project img{
  display:block;
  width:100%;
  height:auto;
}

.project-footer{
  margin-top:0px;
  font-size:13px;
  font-weight:600;
  /* line-height:1,1; */
  color: rgb(0,0,0);
  text-align:justify;
  width:100%;
}

.project-link{
  font-size:14px;
  width:100%;
  text-align:justify;
}

.project-link-wrapper{
  display:block;
  color:inherit;
  text-decoration:none;
  height:100%;
}
.project-link-wrapper:hover{
  color:inherit;
}

/* Global figures/images (fiche + contenu) */
figure{
  margin:0;
  width:100%;
  margin-bottom:8px;
}
img{
  display:block;
  width:100%;
  height:auto;
  margin:0;
}

.caption{
  margin-top:8px;
  font-size:12px;
  text-align:justify;
}

.fiche-meta{
  font-weight:600;
  font-size:16px;
  text-align:justify;
  width:100%;
  margin-bottom:8px;
}
.fiche-infos{
  margin-top:8px;
  font-weight:400;
  font-size:16px;
  text-align:justify;
  width:100%;
  margin-bottom:8px;
}

/* ---------------------------- */
/* SLIDESHOW (propre + points visibles) */
/* HTML attendu :
<div class="slideshow" data-slideshow>
  <div class="slideshow-viewport">
    <div class="slides"> ... </div>
  </div>
  <div class="slide-dots"></div>
</div>
*/
/* ---------------------------- */

.slideshow{
  width:100%;
  position:relative;
  margin: 8px 0 12px 0;
  user-select:none;
}

.slideshow-viewport{
  width:100%;
  overflow:hidden; /* coupe seulement les images */
}

.slides{
  display:flex;
  width:100%;
  transition: transform 320ms ease;
  will-change: transform;
}

.slide{
  flex: 0 0 100%;
  width:100%;
  height:100%;
}

.slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover; /* recadrage propre à hauteur constante */
  cursor:pointer;
}

/* Points (noirs) + actif (rouge) */
.slide-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:10px;
}

.slide-dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#000;
  border:none;
  padding:0;
  cursor:pointer;
}
.slide-dot.is-active{
  background: rgb(190,0,0);
}

/* Tablet / Desktop */
@media (min-width: 768px){
  :root{ --header-h: 96px; }

  .text-columns{
    column-count: 2;
    column-gap: 22px;
    column-fill: balance;
    -moz-column-fill: balance;

  }

  .text-columns p{
    break-inside: avoid;
  }

  .projects-grid{
    grid-template-columns: 1fr 1fr;
  }
}

/* Anchor offset for fixed header */
.anchor{
  scroll-margin-top: calc(var(--header-h) + 14px);
}