/* ==============================
   FONTS — Swis721 Black BT (TTF)
   ============================== */
@font-face{
  font-family: "Swis721BlkBT";
  src: url("../assets/fonts/swis721-blk-bt-cufonfonts/SWISS721BLACKBT.TTF") format("truetype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}
@font-face{
  font-family: "Swis721BlkBT";
  src: url("../assets/fonts/swis721-blk-bt-cufonfonts/SWISS721BLACKBT.TTF") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}

/* =================
   VARIABLES GLOBALES
   ================= */
:root{
  --bg:#FFFFFF;
  --ink:#000030;
  --muted:#4a4a6a;
  --gap:clamp(16px, 2.5vw, 28px);
  --maxw:1100px;
  --radius:8px;

  /* Fiche projet (desktop) */
  --edge: clamp(16px, 2vw, 24px);

  /* Rail gauche commun (cadre horizontal partagé) */
  --rail-pad: clamp(16px, 2vw, 32px);
  --rail-max: min(1600px, 96vw);

  /* Offset sous header fixe pour les pages éditoriales */
  --header-h: 64px;
  --header-gap: 16px;
}
@supports (scrollbar-gutter: stable) { html { scrollbar-gutter: stable both-edges; } }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

/* ====== Base ====== */
*{ box-sizing:border-box }
html,body{ height:100% }
html{ scroll-behavior:smooth }
body{
  margin:0;
  font-family:"aktiv-grotesk","Inter",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
}

/* ====== Header ====== */
.site-header{
  position:fixed; inset:0 0 auto 0;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(8px);
  transform:translateY(0);
  transition:transform .3s ease;
  z-index:1000;
  border-bottom:1px solid rgba(0,0,48,.08);
}
.site-header.is-hidden{ transform:translateY(-100%) }

.header-inner{
  max-width: min(1600px, 96vw);
  margin:0 auto;
  padding:12px clamp(16px, 2vw, 32px);
  display:flex; align-items:center; justify-content:space-between;
}

/* Marque */
.brand{
  display:inline-flex;
  align-items:center;
  gap:6px;
  text-decoration:none;
  color:var(--ink);
  line-height:1;
  font-family:"Swis721BlkBT", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:900;
  font-size:clamp(22px, 3.2vw, 30px);
  letter-spacing:-0.01em;
  font-synthesis: none;
}
.brand .expo{ display:inline-flex; align-items:flex-start; line-height:1; transform: translateY(-0.02em) }
.brand .expo sup{ font-size:.55em; line-height:1; margin-left:1px }
/* masque le libellé texte à côté du logo */
.brand-word{ display:none !important; }

.nav a{ margin-left:20px; color:var(--ink); text-decoration:none }
.nav a:focus,.nav a:hover{ text-decoration:underline }

/* ====== Footer ====== */
.site-footer{
  border-top:1px solid rgba(0,0,48,.08);
  margin-top:64px;
  padding:24px 0; /* vertical uniquement : l’horizontal vient du rail */
}
.site-footer .footer-inner{
  max-width: var(--rail-max);
  margin: 0 auto;
  padding-inline: var(--rail-pad);
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 16px;
}
.footer-left p{ margin: 0; }
.site-footer a{ color:var(--ink); text-decoration:none }
.site-footer a:hover,.site-footer a:focus{ text-decoration:underline }
.social{ list-style:none; padding:0; margin:0; display:flex; gap:12px }

@media (max-width:640px){
  .site-footer .footer-inner{ grid-template-columns: 1fr; }
  .social{ margin-top: 8px; }
}

/* ====== Helpers ====== */
.container{ max-width:var(--maxw); margin:0 auto; padding:0 var(--gap) }
.muted{ color:var(--muted) }
.sr-only{
  position:absolute!important; width:1px;height:1px; padding:0;margin:-1px;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* ====== Hero ====== */
.hero{ height:100vh; position:relative }
.hero-slider{ position:relative; overflow:hidden; width:100%; height:100vh; margin-top: var(--header-h) }
.slides{ position:relative; width:100%; height:100% }
.slide{
  position:absolute; inset:0; display:flex; align-items:flex-end; justify-content:flex-start;
  background-size:cover; background-position:center; background-repeat:no-repeat;
  color:#fff; text-decoration:none; opacity:0; transition:opacity .6s ease;
}
.slide.is-active{ opacity:1 }
.slide-caption{
  background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  border-radius:12px; padding:20px 28px; margin:24px; max-width:90%;
}
.slide-caption h2{ margin:0 0 6px; font-size:clamp(1.5rem, 3vw, 2.5rem); font-weight:700 }
.slide-caption p{ margin:0; font-size:1rem; opacity:.85 }
.hero-ctrl{
  position:absolute; z-index:5; background:rgba(255,255,255,.85);
  border:1px solid rgba(0,0,48,.15); border-radius:6px; padding:6px 10px; cursor:pointer;
  font-size:1.2rem; line-height:1; color:var(--ink); backdrop-filter:blur(4px);
  transition:background .2s ease, color .2s ease;
}
.hero-ctrl:hover{ background:#fff }
.hero-ctrl.prev{ left:16px; bottom:16px }
.hero-ctrl.next{ left:64px; bottom:16px }
.hero-ctrl.pause{ right:16px; top:16px }
.slide-caption .slide-link{ color:inherit; text-decoration:none }
.slide-caption .slide-link:hover,.slide-caption .slide-link:focus{ text-decoration:underline }
.hero-slider{ cursor:pointer }

/* ====== Intro (Home) ====== */
.intro{ padding:56px 0 }
.slogan{ font-size:clamp(28px,5vw,54px); line-height:1.1; margin:0 0 12px 0; white-space:pre-line }
.tagline{ max-width:800px; color:var(--muted); font-size:1.125rem }

/* =========================================================
   PROJETS — Page, filtres, liste
   ========================================================= */
.projects-main{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--gap); min-height:100vh;
}

/* Filtres — colonne gauche (desktop) */
.filters{
  position:sticky; top:64px;
  height:calc(100vh - 64px);
  padding:0 calc(var(--gap) * 2) 0 var(--gap);
  display:flex; align-items:center; justify-content:flex-start;
  background:transparent; border:0; z-index:800;
}
.filters h2{ display:none !important }
.filter-chips{
  display:flex; flex-direction:column; align-items:flex-start; gap:14px;
  max-width:520px;
}

/* Chips = texte nu (Projets + Inspirations) */
.is-projects .chip,
.is-pinterest .chip{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:transparent; border:0; box-shadow:none; border-radius:0;
  margin:0; padding:0;
  color:var(--ink); line-height:1.15;
  font:inherit; font-weight:500; font-size:1rem;
  cursor:pointer; text-decoration:none;
  transition: font-size .18s ease, letter-spacing .18s ease, color .18s ease, opacity .18s ease;
}
.is-projects .chip:hover,
.is-pinterest .chip:hover{
  opacity:.9;
}

@media (min-width:901px){
  .is-projects .chip:not(.is-active):hover,
  .is-pinterest .chip:not(.is-active):hover{
    font-size:1.08rem;
  }

  .is-projects .chip.is-active,
  .is-projects .chip.is-active:hover,
  .is-pinterest .chip.is-active,
  .is-pinterest .chip.is-active:hover{
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:.012em;
    opacity:1;
  }

  .filter-chips{ row-gap:12px }
}


/* Mobile : bandeau sous header */
@media (max-width:900px){
  .projects-main{ grid-template-columns:1fr }
  .filters{
    position:sticky; top:64px; height:auto;
    padding:8px var(--gap); background:#fff; border-bottom:1px solid rgba(0,0,48,.12); z-index:900;
    display:block;
  }
  .is-projects .chip,
  .is-pinterest .chip{
    font-size:1rem;
    line-height:1.2;
  }

  .is-projects .chip:not(.is-active):hover,
  .is-pinterest .chip:not(.is-active):hover{
    font-size:1rem;
  }

  .is-projects .chip.is-active,
  .is-projects .chip.is-active:hover,
  .is-pinterest .chip.is-active,
  .is-pinterest .chip.is-active:hover{
    font-weight:800;
    letter-spacing:.005em;
  }
}

/* Liste projets */
body.is-projects{ scroll-snap-type:y mandatory }
.projects-list{ position:relative; height:auto; overflow:visible }
.project-item{
  min-height:100vh; scroll-snap-align:start;
  display:flex; align-items:center; justify-content:center; padding:var(--gap);
}
.project-figure{ position:relative; width:min(1100px,92vw); border-radius:var(--radius); overflow:hidden }
.project-figure img{ width:100%; height:min(80vh, 90vw); object-fit:cover; display:block }

/* Caption sans fond/ombres par défaut */
.project-figure figcaption{
  position:absolute; left:0; right:0; bottom:0;
  background:none; color:#fff; padding:20px;
  display:flex; flex-direction:column; align-items:flex-start; gap:4px;
}
.project-figure figcaption,
.project-figure figcaption h2,
.project-figure figcaption .btn-title,
.project-figure figcaption p{ text-shadow:none !important }
.project-figure h2{ margin:0; font-size:clamp(20px,3vw,34px) }

/* Titre cliquable */
.btn-title{
  appearance:none; background:none; border:0; padding:0; margin:0;
  font:inherit; color:inherit; cursor:pointer; text-decoration:none;
}
.btn-title:hover,.btn-title:focus{ text-decoration:underline; outline:none }

/* ===========================================
   FICHE PROJET — 2 colonnes (images + texte)
   =========================================== */
.project-dialog::backdrop{ background:rgba(0,0,0,.5) }
.project-dialog{
  width:100vw; height:100vh; max-width:none; max-height:none;
  margin:0; border:0; border-radius:0; padding:0; overflow:hidden;
}

/* Bouton fermer */
.dialog-close{
  position:fixed;
  top:clamp(10px, 1.8vw, 16px);
  right:clamp(10px, 1.8vw, 16px);
  z-index:1001;
  min-width:40px; min-height:40px;
  padding:6px 10px;
  background:#fff; border:1px solid rgba(0,0,48,.2); border-radius:10px; cursor:pointer;
}
@media (pointer: coarse){
  .dialog-close{ min-width:44px; min-height:44px }
}

/* Grille fiche */
.project-detail{
  height:100%;
  display:grid;
  grid-template-columns: 1fr 420px;
  gap: 0;
  padding: 16px var(--edge) 20px 0;
  box-sizing:border-box;
}

/* Galerie */
.project-left{
  margin:0; padding:0; min-width:0; overflow:auto;
  scrollbar-width:none; -ms-overflow-style:none;
}
.project-left::-webkit-scrollbar{ width:0; height:0; display:none }
.project-left .gallery{
  padding:0; margin:0;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
}
.project-left .gallery img{
  display:block; margin:0;
  width:100%;
  max-width:1000px;
  height:auto; max-height:80vh;
  object-fit:contain; border-radius:0;
}

/* Panneau info */
.project-info{
  align-self:start;
  position:sticky; top:16px;
  display:flex; flex-direction:column; gap:12px;
  margin-left: var(--edge);
  padding-left: var(--edge);
  padding-right: var(--edge);
}
.project-info .project-header h3{ margin:0; font-size:clamp(22px,3vw,36px) }
.project-info .role{ margin:0; color:var(--muted) }
.project-info .desc{ margin-top:8px }
.project-info .cta{
  display:inline-block; margin-top:8px;
  text-decoration:none; color:#fff; background:var(--ink);
  padding:10px 14px; border-radius:8px;
}

@media (min-width:1200px){
  .project-detail{
    grid-template-columns: minmax(0,58%) minmax(360px,42%);
    column-gap: clamp(12px, 1.4vw, 20px);
    padding: 16px var(--edge) 20px 0;
  }
  .project-info{
    margin-left: 0;
    padding-left: 0;
  }
}

/* Mobile fiche */
@media (max-width:900px){
  .project-detail{
    grid-template-columns:1fr;
    column-gap: 0;
    padding:12px var(--gap);
  }
  .project-info{
    position:static; top:auto;
    margin-left:0;
    padding-left: var(--gap);
    padding-right: var(--gap);
  }
  .project-left .gallery img{ max-width:100%; max-height:70vh }
}

/* ================================
   About / Journal / Contact
   ================================ */
.about-grid{ display:grid; grid-template-columns:1.2fr .8fr; gap:var(--gap); align-items:start }
.about-portrait img{ width:100%; height:auto; border-radius:12px }

.journal-list{ display:grid; grid-template-columns:1fr; gap:16px }
.journal-item{ display:block; padding:16px; border:1px solid rgba(0,0,48,.12); border-radius:12px; text-decoration:none; color:inherit }
.journal-item:hover{ background:#f8f8ff }
.article-main header{ margin-bottom:16px }
.article-main .article-body p{ margin:0 0 12px }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap) }
.contact-form label{ display:block; margin-bottom:12px }
.contact-form input,.contact-form textarea{
  width:100%; padding:10px 12px; border-radius:8px; border:1px solid rgba(0,0,48,.2);
}
.contact-form button{
  background:var(--ink); color:#fff; border:0; padding:10px 14px; border-radius:8px; cursor:pointer;
}

/* ========== Responsif sécurité ========== */
@media (max-width:1280px){ .project-left .gallery img{ max-height:none } }
@media (max-width:768px){
  .about-grid,.contact-grid{ grid-template-columns:1fr }
  .project-figure img{ height:min(60vh,80vw) }
}
@media (max-width:480px){
  .header-inner{ padding:10px var(--gap) }
  .nav a{ margin-left:12px }
  .hero-ctrl.prev{ left:8px; bottom:8px }
  .hero-ctrl.next{ left:56px; bottom:8px }
  .hero-ctrl.pause{ right:8px; top:8px }
}

/* ======= Brand fine-tune (utile si besoin) ======= */
:root{ --brand-size: clamp(22px, 3.2vw, 30px); --brand-shift: -0.06em; --brand-logo-h: clamp(22px, 3.2vw, 30px) }
.brand{ display:inline-flex; align-items:baseline; gap:.35ch; text-decoration:none; color:var(--ink); line-height:1 }
.brand-logo{ height:1em; width:auto; display:block; transform: translateY(var(--brand-shift)) }
.brand img{ height: var(--brand-logo-h); width:auto; display:block }

/* =========================
   RAIL GAUCHE COMMUN (global)
   ========================= */
.site-header .header-inner,
.site-footer .footer-inner{
  max-width: var(--rail-max);
  margin: 0 auto;
  padding-inline: var(--rail-pad);
}

/* Pages éditoriales : rail + offset sous header unifié */
.is-about > main,
.is-journal > main,
.is-article > main,
.is-pinterest > main{
  /* rail horizontal */
  padding-left: calc(max((100% - var(--rail-max)) / 2, 0px) + var(--rail-pad));
  padding-right: var(--rail-pad);

  /* écart sous header fixe (même logique partout) */
  padding-top: calc(var(--header-h) + 16px);
}

@media (max-width: 900px){
  .is-about > main,
  .is-journal > main,
  .is-article > main,
  .is-pinterest > main{
    padding-left: var(--rail-pad);
    padding-right: var(--rail-pad);
    padding-top: calc(var(--header-h) + 16px);
  }
}

@supports (padding-left: calc(1px)){
  .is-about main > .container,
  .is-journal main > .container,
  .is-article main > .container{
    max-width: none;
    padding-left: calc(max((100vw - var(--rail-max)) / 2, 0) + var(--rail-pad));
    padding-right: var(--rail-pad);
  }
  .is-projects .filters{
    padding-left: calc(max((100vw - var(--rail-max)) / 2, 0px) + var(--rail-pad));
    padding-right: var(--rail-pad);
  }
  .is-projects .projects-list{ padding-right: var(--rail-pad) }
}

/* Sticky footer éditorial */
body{ min-height: 100dvh; display: flex; flex-direction: column; }
.is-about   > main, .is-journal > main{ flex: 1 0 auto; }
.is-about   .site-footer, .is-journal .site-footer{ margin-top: auto; }
body.is-about, body.is-journal, body.is-article{ min-height:100dvh; display:flex; flex-direction:column; }
body.is-about > main, body.is-journal > main, body.is-article > main{ flex:1 0 auto }
body.is-about .site-footer, body.is-journal .site-footer, body.is-article .site-footer{ margin-top:auto }

/* ===== Rétablit le comportement normal sur Index & Projets ===== */
body.is-home, body.is-projects{ display:block; min-height:auto }

/* Articles */
.article-body img{ max-width:100%; height:auto; display:block; border-radius:8px }
.article-body figure{ margin:16px 0; }
.article-body figcaption{ color:var(--muted); font-size:.95rem; margin-top:6px; }
.article-body .img-grid-2{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:12px 0;
}
.article-body .img-grid-2 .img{ overflow:hidden; border-radius:8px; }
@media (max-width: 720px){ .article-body .img-grid-2{ grid-template-columns:1fr; } }
.article-body blockquote{
  margin:16px 0; padding:12px 16px; border-left:4px solid rgba(0,0,48,.15);
  background: rgba(0,0,48,.03); border-radius:8px;
}
.article-body blockquote p{ margin:0; }
.article-body blockquote cite{ display:block; margin-top:6px; color:var(--muted); font-style:normal; }

/* Hiérarchie de section */
.section { padding-block: clamp(24px, 6vw, 56px); }
.eyebrow { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; margin: 0 0 8px; }
.section-title { font-size: clamp(28px, 4vw, 36px); line-height: 1.15; margin: 0 0 12px; }
.section-subtitle { font-size: clamp(18px, 2.4vw, 20px); margin: 0 0 16px; opacity: 0.85; }
.copy p { margin: 0 0 12px; line-height: 1.65; }

/* Panneau valeurs : fond léger */
.section--tinted {
  background: rgba(0,0,0,0.04);
  border-radius: 16px;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 32px);
}
.values-list { list-style: none; margin: 0; padding: 0; }
.value-item {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr;
  gap: 12px;
  padding-block: 10px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.value-item:first-child { border-top: 0; }
.val-title { font-weight: 700; }
.val-desc { opacity: 0.9; line-height: 1.6; }

/* ==========================
   PAGE — Mentions légales
   ========================== */
.is-legal main > .container{
  max-width: none;
  padding-left: calc(max((100% - var(--rail-max)) / 2, 0) + var(--rail-pad));
  padding-right: var(--rail-pad);
}
.legal{
  background: var(--bg, #fff);
  color: var(--ink, #000030);
  max-width: min(72ch, 100%);
  padding-block: clamp(32px, 5vw, 72px);
}
.legal h1,
.legal h2{
  font-family: "Swis721BlkBT", "aktiv-grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 900;
  letter-spacing: 0.2px;
  color: var(--ink, #000030);
  margin: 0 0 .75em 0;
}
.legal h1{ font-size: clamp(28px, 3.4vw, 44px); line-height: 1.1; }
.legal h2{ font-size: clamp(18px, 2vw, 24px); line-height: 1.25; margin-top: 2em; }
.legal p,
.legal li{
  font-family: "aktiv-grotesk", Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.2vw, 18px);
  line-height: 1.6;
  color: var(--ink, #000030);
  margin: 0 0 1rem 0;
}
.legal a{
  color: currentColor;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal a:hover{ opacity: .8; }
.legal-link a{ font-size: .9rem; opacity: .7; text-decoration: none; }
.legal-link a:hover{ opacity: 1; }
.legal hr{
  border: 0;
  border-top: 1px solid color-mix(in oklab, var(--ink, #000030) 15%, transparent);
  margin: 2rem 0;
}

/* =========================================================
   ABOUT — Layout canonique (texte + valeurs) / photo (span 2 lignes)
   ========================================================= */
.is-about main > .container{
  /* rail identique au header */
  padding-left: calc(max((100vw - var(--rail-max)) / 2, 0) + var(--rail-pad));
  padding-right: var(--rail-pad);

  /* grille principale */
  display: grid;
  grid-template-columns: minmax(420px, 1fr) minmax(340px, clamp(360px, 34vw, 560px));
  grid-template-rows: auto auto;
  column-gap: clamp(48px, 6vw, 96px);
  align-items: start;
}

/* aplatit le wrapper interne */
.is-about .about-grid{ display: contents; }

/* Colonne gauche : texte (row 1) */
.is-about .about-grid > :first-child{
  grid-column: 1; grid-row: 1;
  max-width: var(--maxw);
  margin: 0 auto 0 0;
  padding: 0;
}

/* Cartouche valeurs (row 2) */
.is-about #about-values.section--tinted{
  grid-column: 1; grid-row: 2;
  max-width: var(--maxw);
  margin: clamp(48px, 6vw, 72px) 0 0 0;
  padding: clamp(28px, 4vw, 48px) clamp(22px, 4vw, 32px);
  border-radius: 16px;
}

/* Colonne droite : photo span 2 lignes */
.is-about .about-illustration{
  grid-column: 2; grid-row: 1 / 3;
  align-self: stretch;
}
.is-about .about-illustration img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 12px;
}

/* Mobile : flux standard */
@media (max-width: 900px){
  .is-about main > .container{ display: block; padding-left: var(--rail-pad); padding-right: var(--rail-pad); }
  .is-about .about-illustration{ height: auto; }
  .is-about .about-illustration img{ height: auto; }
}

/* PATCH ABOUT — mesure et valeurs */
:root{ --measure: 68ch; }

.is-about .about-grid > :first-child{
  max-width: var(--measure);
  margin: 0;
}
.is-about .about-grid > :first-child p{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}
.is-about #about-values.section--tinted{
  display: inline-block;
  width: fit-content;
  max-width: var(--measure);
  margin: clamp(28px, 4vw, 40px) 0 0;
  padding-block: clamp(16px, 2.6vw, 28px);
  padding-inline: clamp(18px, 3vw, 24px);
}
.is-about #about-values.section--tinted{
  margin-top: clamp(32px, 4vw, 48px);
  margin-bottom: clamp(32px, 4vw, 48px);
}

/* About — photo même bas que le cartouche */
:root{ --about-gap-below: clamp(28px, 4vw, 40px); }

.is-about main > .container{
  display:grid;
  grid-template-columns:minmax(420px,1fr) minmax(360px, clamp(38vw, 42vw, 680px));
  grid-template-rows:auto auto;
  column-gap:clamp(48px,6vw,96px);
  align-items:start;
}
.is-about .about-illustration{
  grid-column:2;
  grid-row:1 / 3;
  align-self:stretch;
  position:relative;
  overflow:hidden;
  contain:size;
}
.is-about .about-illustration img{
  position:absolute;
  left:0; right:0; top:0;
  height:calc(100% - var(--about-gap-below));
  width:100%;
  object-fit:cover;
  object-position:center bottom;
}

/* PATCH PROJETS — filtres scroll mobile */
@media (max-width: 900px){
  .filters{
    position: sticky;
    top: var(--header-h, 64px);
    z-index: 900;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,48,.12);
    transition: transform .25s ease, opacity .25s ease;
    will-change: transform;
  }
  .filters.is-hidden{
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
}

/* PATCH PROJETS — supprimer grands vides sur mobile */
@media (max-width: 900px){
  body.is-projects{ scroll-snap-type: none; }
  .project-item{
    min-height: auto;
    padding: clamp(12px, 3vw, 20px) var(--gap);
  }
  .project-figure{
    width: 100%;
    border-radius: var(--radius);
  }
  .project-figure img{
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }
}

/* PATCH PAGE PROJET — colonne unique propre sous 900px */
@media (max-width: 900px){
  .project-detail{ grid-template-columns: 1fr; padding: 12px var(--gap); }
  .project-info{ position: static; margin-left: 0; padding-left: 0; padding-right: 0; }
  .project-left .gallery{ gap: 10px; }
  .project-left .gallery img{ max-height: none; width: 100%; height: auto; }
}

/* PATCH À PROPOS — casse nette en 1 colonne */
@media (max-width: 900px){
  .is-about main > .container{ display:block; padding-left: var(--rail-pad); padding-right: var(--rail-pad); }
  .is-about #about-values.section--tinted{ margin-top: clamp(24px, 4vw, 36px); }
  .is-about .about-illustration{ height: auto; }
  .is-about .about-illustration img{ height: auto; }
}

/* PATCH HERO ACCUEIL — hauteur raisonnable sur mobile */
@media (max-width: 900px){
  .hero{ height: auto; }
  .hero-slider{ height: clamp(320px, 55vh, 600px); margin-top: var(--header-h); }
  .slide{ position:absolute; inset:0; }
}

/* PROJETS — bandeau mobile : même look + même rail que le header */
@media (max-width: 900px){
  .is-projects .filters{
    background: rgba(255,255,255,.9) !important;
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid rgba(0,0,48,.08);
    box-shadow: 0 1px 0 rgba(0,0,48,.04);
  }
  .is-projects .filters{
    padding-left: calc(max((100vw - var(--rail-max)) / 2, 0) + var(--rail-pad)) !important;
    padding-right: var(--rail-pad) !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }
  .is-projects .filter-chips{
    max-width: var(--rail-max);
    margin: 0;
    gap: 10px 14px;
  }
}

/* === PROJETS + PINTEREST — cartouche = même look que le HERO === */
body.is-projects .project-figure,
body.is-pinterest .project-figure{
  position: relative;
}

body.is-projects .project-figure > figcaption,
body.is-pinterest .project-figure > figcaption{
  position: absolute;
  bottom: 24px !important;
  left: 24px !important;
  right: auto !important;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-radius: 12px;
  padding: 20px 28px;
  margin: 0;
  max-width: 90%;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  box-sizing: border-box;
  color: #fff;
}

/* typo identique au hero */
body.is-projects .project-figure > figcaption h2,
body.is-pinterest .project-figure > figcaption h2{
  margin: 0 0 6px;
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  font-weight: 700;
  color: #fff;
}

body.is-projects .project-figure > figcaption p,
body.is-pinterest .project-figure > figcaption p{
  margin: 0;
  font-size: 1rem;
  opacity: .85;
  color: #fff;
}

/* mobile : offsets/padding du hero */
@media (max-width: 900px){
  body.is-projects .project-figure > figcaption,
  body.is-pinterest .project-figure > figcaption{
    bottom: 12px !important;
    left: 12px !important;
    padding: 16px 20px;
    border-radius: 10px;
    max-width: calc(100% - 12px - 20px);
  }
}

html.has-open-project,
body.has-open-project{
  overflow: hidden;
}

@media (max-width: 900px){
  .project-dialog{
    position: fixed;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  .project-detail{
    min-height: 100vh;
    padding-bottom: clamp(24px, 5vh, 48px);
  }

  .project-left{
    overflow: visible;
  }
}

/* Donne un “vrai” pied d’espace pour la fiche projet sur mobile */
@media (max-width: 900px){
  .project-detail{
    padding-bottom: 80px !important;
  }
  .project-left .gallery img:last-child{
    margin-bottom: 20px;
  }
}

/* FOOTER FIXE POUR LA FICHE PROJET (corrige iOS) */
@media (max-width: 900px){
  .project-detail::after{
    content: "";
    display: block;
    height: 110px;
    width: 100%;
  }
}

/* Liens internes des articles (journal) */
.article-body a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
}

.article-body a:hover {
  opacity: 0.6;
}

/* Taille max des images et vidéos dans les articles */
.article-body img,
.article-body video {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 2rem auto;
  border-radius: 4px;
}

/* Conteneur figure */
.article-body figure {
  max-width: 100%;
  margin: 2rem 0;
  text-align: center;
}

.article-body figcaption {
  font-size: 0.875rem;
  color: #777;
  margin-top: 0.5rem;
}
.article-body figure img,
.article-body figure video {
  max-width: 900px;
  width: 100%;
}

/* PINTÉREST — alignement sur le rail comme Projets */
@supports (padding-left: calc(1px)){
  .is-pinterest .filters{
    padding-left: calc(max((100vw - var(--rail-max)) / 2, 0) + var(--rail-pad));
    padding-right: var(--rail-pad);
  }
  .is-pinterest .projects-list{
    padding-right: var(--rail-pad);
  }
}

/* PINTÉREST — bandeau mobile comme Projets */
@media (max-width: 900px){
  .is-pinterest .filters{
    position: sticky;
    top: var(--header-h, 64px);
    z-index: 900;
    background: rgba(255,255,255,.9);
    backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid rgba(0,0,48,.08);
    box-shadow: 0 1px 0 rgba(0,0,48,.04);
    padding-left: calc(max((100vw - var(--rail-max)) / 2, 0) + var(--rail-pad));
    padding-right: var(--rail-pad);
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .is-pinterest .filter-chips{
    max-width: var(--rail-max);
    margin: 0;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    align-items:flex-start;
    gap:10px 14px;
  }
}

/* ============================
   PAGE PINTEREST — layout unifié avec PROJETS
   ============================ */

body.is-pinterest{
  scroll-snap-type: none;
  display: block;
  min-height: auto;
}

.is-pinterest .projects-main{
  min-height: auto;
}

/* Carte centrée comme Projets, mais sans plein écran obligatoire */
.is-pinterest .project-item{
  min-height: auto;
  scroll-snap-align: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 56px) var(--gap);
}

/* Même gabarit que les projets */
.is-pinterest .project-figure{
  position: relative;
  width: min(1100px, 92vw);
  border-radius: var(--radius);
  overflow: hidden;
}
/* PINTÉREST — pas de cartouche noir sur les boards */
body.is-pinterest .project-figure > figcaption{
  display: none;
}
/* PINTÉREST — colonne filtres plus étroite, widgets recentrés */
@media (min-width: 901px){
  .is-pinterest .projects-main{
    display: grid;
    grid-template-columns: minmax(220px, 260px) minmax(0, 1fr);
    align-items: flex-start;
  }

  /* On garde le centrage du widget dans sa colonne */
  .is-pinterest .project-item{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: clamp(32px, 5vw, 56px) var(--gap);
    min-height: auto;
  }

  .is-pinterest .project-figure{
    margin: 0 auto;  /* centre dans la 2e colonne */
  }
}
/* === PATCH HEADER MOBILE : espace logo / menu === */
@media (max-width: 900px){
  .site-header .nav{
    margin-left: 20px; /* augmente l’espace entre le logo et "Projets" */
  }
}

/* === PATCH FILTRES PROJETS MOBILE : marge gauche/droite égale === */
@media (max-width: 900px){
  .is-projects .filters{
    padding-left: var(--gap) !important;
    padding-right: var(--gap) !important;
  }
}
@media (max-width: 900px){
  .is-projects .filters,
  .is-pinterest .filters{
    padding-left: var(--gap) !important;
    padding-right: var(--gap) !important;
  }
}
/* === OFFSET GLOBAL SOUS HEADER pour toutes les pages sauf l'index === */
/* Pages éditoriales : À propos, Journal, Inspirations */
.is-about main,
.is-journal main,
.is-pinterest main {
  padding-top: calc(var(--header-h) + var(--header-gap));
}

/* Mobile : léger ajustement */
@media (max-width: 900px){
  .is-about main,
  .is-journal main,
  .is-pinterest main {
    padding-top: calc(var(--header-h) + 12px);
  }
}
/* === OFFSET SOUS HEADER : À propos / Journal / Inspirations === */
.is-about   > main,
.is-journal > main,
.is-pinterest > main{
  padding-top: calc(var(--header-h) + 24px) !important;
}

/* Mobile : un peu plus compact */
@media (max-width: 900px){
  .is-about   > main,
  .is-journal > main,
  .is-pinterest > main{
    padding-top: calc(var(--header-h) + 16px) !important;
  }
}
/* === OFFSET SOUS HEADER — forcé pour Journal === */
body.is-journal main {
  padding-top: calc(var(--header-h) + 28px) !important;
}
body.is-about main,
body.is-journal main,
body.is-pinterest main {
  padding-top: calc(var(--header-h) + 28px) !important;
}

/* ==========================
   ESPACE UNIFIÉ SOUS LE HEADER
   ========================== */

/* 1. Même padding-top pour toutes les pages */
.site-main{
  padding-top: clamp(32px, 5vw, 56px); /* calé sur la logique de la page Projets */
}

/* 2. On annule les marges hautes du premier bloc de contenu */
.site-main > *:first-child{
  margin-top: 0;
}
/* UNIFORMISATION PROJETS / INSPIRATIONS : typologie collée au header */

/* 1) On supprime tous les offsets sous le header pour la page Inspirations */
.is-pinterest > main,
.is-pinterest main,
body.is-pinterest main{
  padding-top: 0 !important;
}

/* 2) On s'assure que le bandeau de filtres a la même logique que Projets */
.is-pinterest .filters{
  position: sticky;
  top: var(--header-h, 64px);
}
/* HEADER — on laisse tous les liens en regular */
.nav a[aria-current="page"]{
  font-weight: 400;
}

/* TYPOLOGIES PROJETS + INSPIRATIONS : mêmes styles */
.is-projects .chip,
.is-pinterest .chip{
  appearance:none;
  -webkit-appearance:none;
  -moz-appearance:none;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  margin:0;
  padding:0;
  color:var(--ink);
  line-height:1.15;
  font:inherit;
  font-weight:500;
  font-size:1rem;
  cursor:pointer;
  text-decoration:none;
  transition: font-size .18s ease,
              letter-spacing .18s ease,
              color .18s ease,
              opacity .18s ease;
}

.is-projects .chip:hover,
.is-pinterest .chip:hover{
  opacity:.9;
}

/* état actif : même rendu que sur Projets */
@media (min-width:901px){
  .is-projects .chip:not(.is-active):hover,
  .is-pinterest .chip:not(.is-active):hover{
    font-size:1.08rem;
  }

  .is-projects .chip.is-active,
  .is-projects .chip.is-active:hover,
  .is-pinterest .chip.is-active,
  .is-pinterest .chip.is-active:hover{
    font-size:1.35rem;
    font-weight:800;
    letter-spacing:.012em;
    opacity:1;
  }
}
/* MOBILE — même largeur de bandeau Projets / Inspirations */
@media (max-width:900px){
  .is-pinterest > main{
    padding-left: 0;
    padding-right: 0;
  }
}
/* DESKTOP — remettre un offset propre sous le header pour INSPIRATIONS */
@media (min-width: 901px){
  body.is-pinterest > main{
    padding-top: calc(var(--header-h) + 16px) !important;
  }
}
/* PATCH HEADER — le header ne doit jamais prendre tout l'écran */
.site-header{
  height: auto !important;        /* taille basée sur le contenu */
  max-height: 80px !important;    /* limite hard de sécurité */
  overflow: visible !important;
}

.header-inner{
  min-height: 64px;               /* hauteur confortable */
}
/* OFFSET SOUS HEADER — Mentions légales */
.is-legal > main{
  padding-top: calc(var(--header-h) + 24px);
}

@media (max-width: 900px){
  .is-legal > main{
    padding-top: calc(var(--header-h) + 16px);
  }
}
.pinterest-note{
  font-size: .9rem;
  color: var(--muted);
  margin-top: 6px;
}
.pinterest-note a{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}