/* ── Polices auto-hébergées (remplace l'import Google Fonts bloquant) ── */
@font-face {
  font-family: 'Albert Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../fonts/albert-sans-variable.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 300 400;
  font-display: swap;
  src: url('../fonts/playfair-display-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('../fonts/playfair-display-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --font-body:  'Albert Sans', sans-serif;
  --font-title: 'Playfair Display', 'Lora', serif;
  --accent: #8A73B6;
  /* Gris suffisamment contrasté (~4.6:1) sur fond clair --bg pour rester
     lisible en plein soleil (Audit UX/UI Phase 3) */
  --muted:  #6e6e6e;
  --headerPad: clamp(12px, 2.5vw, 24px);

  /* Thème clair (défaut) */
  --bg:             #F8F8F8;
  --text:           #1A1A1A;
  --gradient-color: rgba(248,248,248,0.95);
  --panel:          #F8F8F8;
  --panelBorder:    rgba(26,26,26,.1);
  --line-color:     #1A1A1A;
  --dot-color:      rgba(26,26,26,.28);
  --footer-bg:      #EBEBEB;
  --footer-text:    #1A1A1A;
  --header-glass:   rgba(248, 248, 248, 0.85);
}

/* ── Mode sombre ───────────────────────────────────── */
html.dark-theme {
  /* Sur fond sombre, un gris plus clair reste nécessaire pour ~4.5:1 */
  --muted:          #9a9a9a;
  --bg:             #1A1A1A;
  --text:           #F0EFEB;
  --gradient-color: rgba(26,26,26,0.95);
  --panel:          #111111;
  --panelBorder:    rgba(255,255,255,.08);
  --line-color:     rgba(240,239,235,.55);
  --dot-color:      rgba(240,239,235,.35);
  --footer-bg:      #242424;
  --footer-text:    #888888;
  --header-glass:   rgba(26, 26, 26, 0.85);
}
*{box-sizing:border-box}

/* ── Audit UX/UI Phase 3 — Focus clavier élégant et cohérent ──
   Filet de sécurité global : tout lien/bouton/champ qui ne possède
   pas déjà son propre style :focus-visible (composants ci-dessous)
   hérite de cette bordure discrète couleur accent. Les règles plus
   spécifiques (classes) restent prioritaires et gardent leurs
   propres décalages. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
html, body { margin: 0; padding: 0; }
/* height:100% sur html = référence relative pour body min-height.
   Évite les quirks de 100vh sur certains navigateurs mobiles. */
html { height: 100%; scroll-behavior: smooth; }
body{
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--bg); color:var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  opacity: 0;
  transition: opacity .4s ease-in-out;
}
a{color:inherit}
/* Héritage de la police Albert Sans sur tous les éléments d'interface */
input, textarea, button, select, label, a { font-family: var(--font-body); }
/* Header */
.header{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--headerPad) clamp(16px,4vw,40px);
  background-color: transparent;
  pointer-events: none;
  transition:
    padding          .4s ease,
    background-color .3s ease,
    backdrop-filter  .3s ease,
    box-shadow       .3s ease;
}
.header > * { pointer-events: auto; }

/* ── État scrollé : verre dépoli ───────────────────── */
.header.scrolled {
  background-color: var(--header-glass);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(128, 128, 128, 0.12);
  pointer-events: auto;
}
/* Groupe logo + texte de marque */
.brand-group {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.brand-logo-link {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  /* Padding + marge négative égale : zone cliquable ≥44px autour du logo,
     sans agrandir le logo ni décaler le groupe de marque */
  padding: 3px;
  margin: -3px;
  border-radius: 4px;
}
.brand-text {
  font-family: var(--font-title);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: clamp(.9rem, 2.4vw, 1.05rem);
  color: var(--text);
  line-height: 1.4;
}
.header-phone {
  font-family: inherit;
  font-weight: inherit;
  font-size: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-decoration: none;
  color: inherit;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  transition: color 0.3s ease;
}
.header-phone:hover { color: var(--accent); }
/* Base logo: remove border and let width/height be controlled via CSS classes.
   The logo uses an inline flexbox to vertically center its contents and
   allows its size to be overridden when the header is in its large state.
   Sized in "em" against a font-size matching .brand-text, at 2× its line-height
   (line-height: 1.4), so the logo always reads as twice the height of the
   brand text — in both header states and at every viewport width. */
.logo{
  font-size: clamp(.9rem, 2.4vw, 1.05rem);
  width: 2.8em;
  height: 2.8em;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  object-fit:contain;
}

/* Animate size changes on logo, brand-name, phone and hamburger for a smooth header shrink */
.header .logo,
.header .brand-text,
.header .header-phone,
.header .hamburger {
  transition: width .4s ease, height .4s ease, font-size .4s ease;
}

.hamburger{background:transparent; border:0; color:var(--text); width:44px; height:44px; display:grid; place-items:center; cursor:pointer}
.hamburger:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.hamburger .bar{width:32px; height:2.5px; background:var(--text); position:relative; border-radius:2px; transition:transform .3s ease, background .3s ease}
.hamburger .bar::before, .hamburger .bar::after{content:""; position:absolute; left:0; right:0; height:2.5px; background:var(--text); border-radius:2px; transition: transform .3s ease, opacity .3s ease}
.hamburger .bar::before{top:-8px}
.hamburger .bar::after{top:8px}
.hamburger[aria-expanded="true"] .bar { background:transparent; }
.hamburger[aria-expanded="true"] .bar::before { transform:none; }
.hamburger[aria-expanded="true"] .bar::after { transform:none; }

/* Header scaling states
   The header starts in a "large" state, with bigger logo, brand name and hamburger.
   When the page is scrolled down past a threshold, the JavaScript will remove
   the `.large` class to shrink these elements back to their default sizes. */
.header.large {
  /* Increase top/bottom padding when large */
  padding-top: calc(var(--headerPad) * 1.4);
  padding-bottom: calc(var(--headerPad) * 1.4);
}
.header.large .logo {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}
.header.large .brand-text {
  font-size: clamp(1.1rem, 2vw, 1.5rem);
}
.header.large .hamburger {
  width: 60px;
  height: 60px;
}


/* Panel */
.overlay{position:fixed; inset:0; background:rgba(0,0,0,.4); backdrop-filter:saturate(120%) blur(2px);
  opacity:0; pointer-events:none; transition:opacity .25s ease; z-index:40}
.overlay.open{opacity:1; pointer-events:auto}
.panel{position:fixed; top:0; right:0; bottom:0; width:min(90vw, 500px); background:var(--panel); color:var(--text);
  border-left:1px solid var(--panelBorder); transform:translateX(100%); transition: transform .3s ease; z-index:9999;
  display:flex; flex-direction:column; overflow-y:auto; -webkit-overflow-scrolling:touch}
.panel.open{transform:translateX(0)}
.panel-header{display:flex; align-items:center; justify-content:space-between; padding:22px 32px; border-bottom:1px solid var(--panelBorder)}
.panel-title{font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text)}

/* Navigation principale — typographie éditoriale */
.panel-nav{
  padding: 48px 32px 24px;
  display: flex;
  flex-direction: column;
}
.panel-nav a{
  font-family: var(--font-title);
  font-size: clamp(2.2rem, 7vw, 3.5rem);
  font-weight: 300;
  color: var(--text);
  text-decoration: none;
  line-height: 1.1;
  margin-bottom: 32px;
  display: inline-block;
  transform: translateX(0);
  transition: color .25s ease, font-style .25s ease, transform .25s ease;
}
.panel-nav a:last-child { margin-bottom: 0; }
.panel-nav a:hover{
  color: var(--accent);
  font-style: italic;
  transform: translateX(10px);
}

.panel-spacer{flex:1}

/* Footer de contact */
.panel-footer{
  padding: 24px 32px;
  border-top: 1px solid var(--panelBorder);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: .04em;
  line-height: 2;
}
.panel-footer-brand{
  font-size: 0.92rem;
  line-height: 1.45;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.panel-footer a{color: var(--text); text-decoration:none}
.panel-footer a:hover{color:var(--accent)}
.panel-social{margin-top:14px}
.social-icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  /* Padding + marge négative égale : zone cliquable ≥44px sans décaler
     le bloc environnant (cohérent avec les autres liens du header/footer) */
  padding:10px;
  margin:-10px;
  border-radius:4px;
  color:var(--text);
  font-size:1.3rem;
  transition:color .3s ease;
}
.social-icon-link:hover{color:var(--accent)}
/* Carousel */
.carousel{position:relative; height:100vh; overflow:hidden;}
/* Vignette supérieure — protège le header */
.carousel::before {
  content:"";
  position:absolute; top:0; left:0; right:0;
  height:25%;
  background: linear-gradient(to bottom, var(--gradient-color) 0%, transparent 100%);
  z-index:2;
  pointer-events:none;
}
/* Vignette inférieure — protège la pagination */
.carousel::after {
  content:"";
  position:absolute; bottom:0; left:0; right:0;
  height:25%;
  background: linear-gradient(to top, var(--gradient-color) 0%, transparent 100%);
  z-index:2;
  pointer-events:none;
}
.slides{position:relative; height:100%; width:100%;}
.slide{position:absolute; inset:0; width:100%; height:100%; opacity:0; transition: opacity .6s cubic-bezier(.2,.7,.2,1);} 
.slide.active{opacity:1; z-index:1;}
.slides > .slide {
  /* override flex sizing from earlier definitions */
  flex: unset;
}
.slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; filter: saturate(.96);}
.slide .caption{position:absolute; left:clamp(16px,5vw,64px); bottom:clamp(18px,5vw,72px); color:#fff; font-size: clamp(.9rem, 2.4vw, 1.05rem); letter-spacing:.04em}
.slide::after{content:""; position:absolute; inset:auto 0 0 0; height:35vh; background:none; pointer-events:none;}
/* Wrapper bas de carrousel : nav + légende */
.carousel-bottom {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(12px, 3.5vw, 28px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 5;
  white-space: nowrap;
}
/* Rangée chevron-gauche | dots | chevron-droit */
.carousel-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* Dots miniaturisés */
.dots { display: flex; gap: 8px; align-items: center; }
.dot {
  position: relative;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--dot-color);
  border: 0; padding: 0; cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
/* Zone cliquable invisible ≥ 44x44px, sans agrandir le point visible */
.dot::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
.dot[aria-current="true"] {
  background: var(--accent);
  transform: scale(1.25);
}
.dot:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
/* Boutons chevrons */
.carousel-prev,
.carousel-next {
  background: transparent;
  border: none;
  cursor: pointer;
  /* Zone cliquable 44x44px (WCAG) — le chevron dessiné ci-dessous reste 9x9px */
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
}
.carousel-prev:focus-visible,
.carousel-next:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
/* Chevron dessiné en CSS — 1 px anthracite */
.carousel-prev::before,
.carousel-next::before {
  content: "";
  display: block;
  width: 9px; height: 9px;
  border-top: 1px solid var(--text);
  border-right: 1px solid var(--text);
}
.carousel-prev::before { transform: rotate(-135deg) translate(-1px, 1px); }
.carousel-next::before { transform: rotate(45deg) translate(-1px, 1px); }
/* Légende coulissante sous la navigation */
.carousel-slide-caption {
  margin: 0;
  color: var(--text) !important;
  font-size: .9rem;
  font-weight: 300;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
  transition: opacity .35s ease;
}
.carousel-slide-caption.updating {
  opacity: 0;
}
/* Page shells */
.main      { flex: 1 0 auto; padding-top: 0; }
.container { max-width: 860px; margin: 0 auto; padding: 24px; }
footer     { margin: 0; padding: 0; }

/* Utility */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0}

/* Global scroll-to-top button — position:fixed force l'élément hors du flux Flexbox du body */
.scroll-top {
  position: fixed !important;
  bottom: 100px;
  right: 30px;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: none;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  z-index: 60;
}
.scroll-top.show {
  opacity: 1;
  pointer-events: auto;
}

/* When page has loaded, reveal the content */
body.page-loaded {
  opacity: 1;
}

/* ── Menu plein écran sur mobile / tablette ──────────── */
@media (max-width: 900px) {
  /* Plein écran */
  .panel {
    width: 100vw !important;
  }
  /* Header : conserve le padding pour ancrer la croix, retire la ligne */
  .panel-header {
    padding: 24px 24px;
    border-bottom: none;
    justify-content: flex-end; /* pousse la croix à droite (titre masqué) */
  }
  .panel-title {
    display: none;
  }
  /* Navigation trône au centre de l'écran */
  .panel-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
  }
  /* Annule le décalage horizontal au survol (tactile) */
  .panel-nav a,
  .panel-nav a:hover {
    transform: none !important;
  }
  /* Croix : taille confortable, reste dans le flux flex du header */
  .closebtn,
  #closepanel {
    position: relative !important; /* annule tout repositionnement */
    width: 48px;
    height: 48px;
  }
  /* Bouton toggle thème aligné à gauche */
  .theme-toggle-btn {
    align-self: flex-start;
  }
}

/* ── Menu hamburger : téléphone en paysage ─────────────
   Sur un viewport bas (~350–450px), clamp(2.2rem, 7vw, …) devient énorme
   car 7vw suit la largeur (ex. 800px → ~56px), et Contact / footer
   se retrouvent hors écran. On compacte la typo et les espacements. */
@media (max-height: 500px) and (orientation: landscape) {
  .panel-header {
    padding: 8px 16px;
  }
  .panel-nav {
    flex: 0 1 auto;
    justify-content: flex-start;
    padding: 8px 20px 4px;
  }
  .panel-nav a {
    font-size: clamp(1.25rem, 4.5vh, 1.8rem);
    margin-bottom: 10px;
    line-height: 1.15;
  }
  .panel-spacer {
    display: none;
  }
  .theme-toggle-btn {
    margin: 4px 16px;
  }
  .panel-footer {
    padding: 10px 20px 14px;
    font-size: 0.95rem;
    line-height: 1.55;
  }
  .panel-social {
    margin-top: 8px;
  }
}

/* Close button clean X (no extra bar) */
#closepanel {
  position: relative;
  width: 44px;
  height: 44px;
}
#closepanel .bar {
  display: none !important;
}
#closepanel::before, #closepanel::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
}
#closepanel::before {
  transform: translate(-50%, -50%) rotate(45deg);
}
#closepanel::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* Close button — caché par défaut, visible quand .panel.open */
.closebtn{
  background: transparent;
  border: 0;
  color: var(--text);
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  display: none;           /* invisible par défaut */
}
.panel.open .closebtn{
  display: flex;
  align-items: center;
  justify-content: center;
}
.closebtn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Note : la croix du bouton est dessinée par #closepanel::before/::after
   ci-dessus (sélecteur plus spécifique que .closebtn, appliqué au même
   bouton) — pas de règle .closebtn::before/::after ici pour éviter le doublon. */

/* Bouton de bascule thème */
.theme-toggle-btn {
  background: none;
  border: none;
  color: var(--text);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 12px 32px;
  min-height: 44px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  transition: color .25s ease;
}
.theme-toggle-btn:hover { color: var(--accent); }
.theme-toggle-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* Panel footer */
.panel-footer-legal{margin-top:10px}

/* Utility visibility */
.is-hidden{display:none !important}
.is-visible{display:block}

/* ============================================================
   PAGE PROJET — Gabarit Monographie / Art Book
   ============================================================ */
.project-page { padding-top: 0; }

.project-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 280px 60px 100px;
}

/* ── Titre ──────────────────────────────────────────────── */
.project-title {
  font-family: var(--font-title);
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-weight: 400;
  color: var(--text);
  text-align: left;
  margin: 0 0 40px;
  letter-spacing: .01em;
}

/* ── Image principale panoramique ───────────────────────── */
.project-hero { margin-bottom: 60px; }
.project-hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 0;
  border: none;
}

/* ── Cartouche technique (bandeau horizontal) ───────────── */
.project-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--text);
  border-bottom: 1px solid var(--text);
  padding: 20px 0;
  margin-bottom: 60px;
}
.meta-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 24px;
}
.meta-item + .meta-item {
  border-left: 1px solid var(--line-color);
}
.meta-label {
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--footer-text);
}
.meta-value {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.4;
}

/* ── Texte descriptif ───────────────────────────────────── */
.project-description {
  background: transparent;
  max-width: 800px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
  line-height: 1.8;
  margin-bottom: 80px;
  color: var(--text);
}
.project-description h2,
.project-description h3,
.project-description .read-more-toggle {
  text-align: left;
}
.project-description p + p { margin-top: 1.2em; }

.description-more {
  overflow: hidden;
  max-height: 0;
  transition: max-height .5s ease;
}
.description-more p:first-child { margin-top: 1.2em; }

/* Bouton de réduction en haut du texte déplié (miroir du bouton du bas) —
   affiché uniquement (via JS) si le texte ajouté dépasse la hauteur d'un écran */
.description-more .read-more-toggle-top {
  margin: 0 0 24px;
}
.description-more .read-more-toggle-top.is-hidden { display: none; }
.description-more .read-more-toggle-top:not(.is-hidden) + p { margin-top: 0; }
.description-more .read-more-toggle-top.is-hidden + p { margin-top: 1.2em; }
.description-more .read-more-toggle-top i { transform: none !important; }

/* Grandes parties (ex. "Choix architectural") : séparées par un dinkus discret */
.description-more h2 {
  font-family: var(--font-title);
  font-size: 1.35rem;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
  margin: 0 0 .6em;
}
.description-more h2::before {
  content: "· · ·";
  display: block;
  text-align: center;
  color: var(--accent);
  font-size: .95rem;
  letter-spacing: .35em;
  margin: 2.4em 0 1.6em;
}

/* Sous-parties (ex. "Le soubassement") : identifiées par un liseré d'accent */
.description-more h3 {
  font-family: var(--font-body);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 1.8em 0 .7em;
  padding-left: 14px;
  border-left: 2px solid var(--accent);
  line-height: 1.5;
}

.description-more h2 + p,
.description-more h3 + p { margin-top: 0; }
.description-list {
  margin: 1em 0 0;
  padding-left: 1.3em;
  list-style: disc;
}
.description-list li {
  margin-bottom: .7em;
  padding-left: .3em;
}
.description-list li:last-child { margin-bottom: 0; }

.read-more-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  padding: 0 0 3px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--line-color);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text);
  transition: color .3s ease, border-color .3s ease, gap .3s ease;
}
.read-more-toggle:hover,
.read-more-toggle:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  gap: 14px;
}
.read-more-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
.read-more-toggle i {
  font-size: .65rem;
  transition: transform .4s ease;
}
.read-more-toggle[aria-expanded="true"] i { transform: rotate(180deg); }

/* ── Mosaïque galerie — trame 4 colonnes ────────────────── */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 300px;
  gap: 20px;
  grid-auto-flow: dense;
}

.photo-credit {
  margin-top: 16px;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.photo-credit:hover { opacity: 1; }
.photo-credit a {
  color: var(--text);
  text-decoration: none;
}
.photo-credit a:hover { color: var(--accent); }

/* Classes de redimensionnement */
.format-paysage  { grid-column: span 2; }
.format-portrait { grid-row: span 2; }
.format-large    { grid-column: span 2; grid-row: span 2; }

/* ── Élément galerie — clip du zoom + transition ombre ─── */
.gallery-item {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 4px;
  border: none;
  box-shadow: 0 0 0 rgba(0,0,0,0);
  transition: box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ── État par défaut : N&B ──────────────────────────────── */
.gallery-item img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  filter: grayscale(100%);
  transform: scale(1);
  transition: filter   0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
              transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* ── Survol : couleur + zoom + ombre portée ─────────────── */
.gallery-item:hover {
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}
.gallery-item:hover img {
  filter: grayscale(0%);
  transform: scale(1.03);
}

/* ── Responsive ─────────────────────────────────────────── */

@media (max-width: 900px) {
  .project-wrapper { padding: 180px 32px 80px; }
  .project-meta { grid-template-columns: repeat(2, 1fr); gap: 0; }
  .meta-item:nth-child(3) { border-left: none; }
  .meta-item:nth-child(3),
  .meta-item:nth-child(4) { border-top: 1px solid var(--line-color); margin-top: 16px; padding-top: 16px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 220px; }
  .format-large    { grid-row: span 1; }
  .format-portrait { grid-row: span 1; }
}
@media (max-width: 600px) {
  .project-wrapper { padding: 140px 20px 60px; }
  .project-title { font-size: 2rem; }
  .project-meta { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 250px; }
  .format-paysage,
  .format-large,
  .format-portrait { grid-column: span 1; grid-row: span 1; }
}

/* Visionneuse galerie */
.overlay-viewer{position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,.08); backdrop-filter:blur(8px) brightness(.92); z-index:80}
.overlay-viewer.open{display:flex}
.overlay-viewer img{max-width:90vw; max-height:90vh; border-radius:12px; box-shadow:0 10px 30px rgba(0,0,0,.4)}
.viewer-nav{position:absolute; top:50%; transform:translateY(-50%); display:flex; align-items:center; justify-content:center; min-width:44px; min-height:44px; font-size:2.5rem; color:var(--accent); cursor:pointer; user-select:none; background:transparent; border:none; padding:0 8px; line-height:1}
.viewer-prev{left:24px}
.viewer-next{right:24px}
.viewer-nav:hover{color:#AD9DCC}
.viewer-nav:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:4px}

/* Bouton retour réalisations */
.return-link{position:fixed; bottom:100px; right:90px; width:48px; height:48px; border-radius:24px; border:none; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.4rem; cursor:pointer; opacity:0; pointer-events:none; transition:opacity .3s ease; z-index:60}
.return-link.show{opacity:1; pointer-events:auto}

/* === Page agence === */

/* Animation scroll-reveal */
.agency-block {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s ease, transform .6s ease;
}
.agency-block.visible { opacity: 1; transform: none; }

/* ── Titre & hero (page agence) — même traitement que les pages projets ── */
.agence-hero-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 60px;
  padding-right: 60px;
}
/* Image affichée en plein format, sans recadrage ni déformation
   (contrairement aux pages projets qui forcent un ratio 16:9) */
.agence-hero-img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* ── Les 3 Piliers ────────────────────────────────────── */
/* Accordéon éditorial : chaque titre est visible d'emblée, le texte
   (justifié, en colonne large ~800px pour éviter les rivières de
   blancs) se déplie au clic. Réduit fortement le scroll par défaut,
   tout en restant plus raffiné qu'un simple bouton "voir plus". */
.agency-pillars {
  display: flex;
  flex-direction: column;
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 5%;
}
.pillar-item {
  border-bottom: 1px solid var(--line-color);
}
.pillar-item:first-child {
  border-top: 1px solid var(--line-color);
}

.pillar-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 32px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  text-align: left;
}
.pillar-header h2 {
  font-family: var(--font-title);
  font-size: clamp(1.8rem, 3.2vw, 2.4rem);
  font-weight: 400;
  color: var(--text);
  margin: 0;
  letter-spacing: .02em;
  transition: opacity .25s ease;
}
.pillar-header:hover h2 { opacity: .7; }

.pillar-icon {
  font-family: var(--font-body);
  font-size: 1.6rem;
  font-weight: 300;
  color: var(--accent);
  flex-shrink: 0;
  transition: transform 0.35s ease;
}
.pillar-item.active .pillar-icon { transform: rotate(45deg); }

.pillar-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s ease;
}
.pillar-long-text {
  padding-bottom: 40px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
}
.pillar-long-text p {
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text);
  margin: 0 0 1em;
}
.pillar-long-text p:last-child { margin-bottom: 0; }
.pillar-long-text .description-list {
  margin: 1em 0 0;
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--text);
}

/* ── Séparateur élégant ───────────────────────────────── */
.elegant-separator {
  border: none;
  border-top: 1px solid var(--text);
  opacity: 0.2;
  width: 80%;
  margin: 0 auto;
}

/* ── Trombinoscope ────────────────────────────────────── */
.team-section {
  padding: 60px 5% 100px;
  max-width: 1400px;
  margin: 0 auto;
}
.team-section .page-main-title { margin-bottom: 0; }

.team-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 30px;
  margin-top: 80px;
}
.team-member {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1 1 280px;
  max-width: 340px;
}
.team-member img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  filter: grayscale(100%);
  transition: filter .4s ease;
}
.team-member:hover img { filter: grayscale(0%); }

/* ── Lexique (accordéon) ──────────────────────────────── */
.agency-lexicon {
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 60px;
}
.agency-lexicon .page-main-title {
  grid-column: 1 / -1;
  margin: 0 0 60px;
}

.accordion-item {
  border-bottom: 1px solid var(--line-color);
}

.accordion-header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text);
  text-align: left;
}

.lexicon-word {
  font-family: var(--font-title);
  font-size: 1.5rem;
}

.lexicon-icon {
  font-family: var(--font-body);
  font-size: 1.3rem;
  font-weight: 300;
  flex-shrink: 0;
  margin-left: 20px;
  transition: transform 0.3s ease;
}
.accordion-item.active .lexicon-icon { transform: rotate(45deg); }

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.accordion-content p {
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.6;
  padding-bottom: 25px;
  opacity: 0.8;
  margin: 0;
  max-width: 620px;
  text-align: justify;
  text-justify: inter-word;
  hyphens: none;
  -webkit-hyphens: none;
}

/* ── Espacement commun header → premier contenu (toutes pages) ──── */
.page-top {
  padding-top: 280px;
}

/* === Page contact — refonte éditoriale === */
.contact-page { background: var(--bg); padding-top: 0; }
.agence-page  { padding-top: 0; }

.contact-wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding-left:   40px;
  padding-right:  40px;
  padding-bottom: 80px;
}
.contact-wrapper .page-main-title {
  margin-bottom: 60px;
}

/* ── Grille 2 colonnes ─────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: start;
}

/* ── Intro ─────────────────────────────────────── */
.contact-intro {
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 36px;
}

/* ── Formulaire minimaliste ────────────────────── */
.contact-form {
  display: flex;
  flex-direction: column;
}
.contact-form label {
  font-size: .8rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text);
  margin: 28px 0 6px;
}
.contact-form label:first-of-type { margin-top: 0; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--line-color);
  background: transparent;
  border-radius: 0;
  padding: 10px 0;
  font-size: 1rem;
  color: var(--text);
  outline: none;
  transition: border-color .2s ease;
  -webkit-appearance: none;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-bottom-color: var(--accent);
}
.contact-form input:focus-visible,
.contact-form select:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.contact-form textarea {
  resize: vertical;
  min-height: 90px;
}
.contact-form select { cursor: pointer; color-scheme: light; }
body.dark-theme .contact-form select { color-scheme: dark; }
.contact-form select option {
  background-color: var(--bg);
  color: var(--text);
}
.checkbox-field {
  display: flex;
  align-items: center;
  margin-top: 20px;
  font-size: .9rem;
  align-self: flex-start;
  gap: 0;
}
.checkbox-field label {
  font-size: .9rem;
  text-transform: none;
  letter-spacing: 0;
  margin: 0;
  font-weight: 300;
  cursor: pointer;
}
/* Restaure la case à cocher native */
input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: auto !important;
  width: auto !important;
  height: auto !important;
  margin-right: 10px;
  cursor: pointer;
  flex-shrink: 0;
  border: unset !important;
  background: unset !important;
  border-radius: unset !important;
  padding: unset !important;
}
.contact-form button[type="submit"] {
  margin-top: 36px;
  align-self: flex-start;
  padding: .85rem 2.2rem;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease;
}
.contact-form button[type="submit"]:hover  { background: #75629B; }
.contact-form button[type="submit"]:disabled { opacity: .6; cursor: not-allowed; }
.contact-message {
  margin-top: 20px;
  font-size: 1rem;
  color: var(--text);
  display: none;
}
.contact-message.is-visible { display: block; }

/* ── Colonne droite ────────────────────────────── */
.contact-visit-title {
  font-family: var(--font-title);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--text);
  margin: 0 0 20px;
  letter-spacing: .02em;
}
.contact-address-text {
  font-size: 1rem;
  font-weight: 300;
  line-height: 2;
  color: var(--text);
  margin: 0 0 36px;
}

/* Carte en noir et blanc, couleur au survol */
.contact-map {
  border: 0;
  width: 100%;
  height: 420px;
  display: block;
  filter: grayscale(100%) contrast(1.1);
  transition: filter .4s ease;
}
.contact-map:hover { filter: grayscale(0%) contrast(1); }

.google-review-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  /* Padding + marge négative égale : élargit la zone cliquable (44px)
     sans décaler le texte ni le bloc environnant */
  padding: 12px 0;
  margin-bottom: -12px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--text);
  text-decoration: none;
  opacity: 0.75;
  transition: opacity 0.3s ease, color 0.3s ease;
}
.google-review-link i { font-size: 1rem; color: #4285F4; }
.google-review-link:hover { opacity: 1; color: var(--accent); }

/* ── Footer bande pleine largeur ────────────────── */
.site-footer {
  flex-shrink: 0;
  margin: 0;
  background-color: var(--footer-bg);
  color: var(--footer-text);
  transition: background-color .3s ease, color .3s ease;
}
.footer-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 16px 40px;
  font-size: .82rem;
  letter-spacing: .06em;
}
.footer-band__left,
.footer-band__right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.footer-sep { opacity: .45; }
.site-footer a {
  color: var(--footer-text);
  text-decoration: none;
  transition: color .25s ease;
  /* Padding + marge négative égale : élargit la zone cliquable sans
     déplacer le texte ni agrandir visuellement la bande de footer */
  padding: 10px 4px;
  margin: -10px -4px;
  border-radius: 2px;
}
.site-footer a:hover { color: var(--accent); }

/* ============================================================
   PAGE RÉALISATIONS — Mise en page 3 colonnes
   ============================================================ */

/* Annule le padding-top par défaut du .main sur la page réalisations */
.realisations-main {
  padding-top: 0;
}

/* Conteneur principal : donne la clearance sous le header fixe */
.gallery-container {
  max-width: 1200px;
  margin: 0 auto;
  padding-left:   40px;
  padding-right:  40px;
  padding-bottom: 80px;
}
.gallery-container .page-main-title {
  margin-bottom: 60px;
}

/* Titre principal de la page */
.page-main-title {
  font-family: var(--font-title);
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 48px);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--text);
  display: flex;
  align-items: center;
  margin: 0 0 60px;
  line-height: 1.2;
}
.page-main-title::before,
.page-main-title::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid var(--line-color);
  margin: 0 40px;
}

/* ── Menu de filtres Isotope ──────────────────────────────── */
.filter-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  width: 100%;
  max-width: 1000px;
  margin: 0 auto 60px auto;
  padding: 0;
}
.filter-menu::before,
.filter-menu::after {
  content: '';
  flex-grow: 1;
  height: 1px;
  background-color: var(--text);
  opacity: 1;
}
.filter-menu::before { margin-right: 30px; }
.filter-menu::after  { margin-left:  30px; }

.filter-menu li {
  display: flex;
  align-items: center;
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  cursor: pointer;
  /* Padding vertical généreux : zone cliquable ≥ 44px sans agrandir le texte */
  padding: 13px 0;
  border: none;
  outline: none;
  text-decoration: none;
  color: var(--text);
  opacity: 0.7;
  transition: opacity 0.3s ease, color 0.3s ease;
  user-select: none;
}
.filter-menu li:focus,
.filter-menu li:active {
  border: none;
  outline: none;
  text-decoration: none;
  box-shadow: none;
}
.filter-menu li:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}
.filter-menu li:not(:last-child)::after {
  content: '';
  display: block;
  width: 30px;
  height: 1px;
  background-color: var(--text);
  opacity: 1;
  margin: 0 30px;
}
.filter-menu li:hover    { opacity: 0.85; color: var(--accent); }
.filter-menu li.is-checked { opacity: 1;    color: var(--accent); }

/* ── Dropdown mobile (masqué sur desktop) ─────────────────── */
.filter-dropdown-wrapper {
  display: none;          /* visible seulement via media query */
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 36px;
  position: relative;
  z-index: 20;
}

.filter-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--text);
  padding: 8px 4px;
  min-height: 44px;
  cursor: pointer;
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: color 0.3s, border-color 0.3s;
}
.filter-dropdown-btn:hover,
.filter-dropdown-btn[aria-expanded="true"] {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Flèche chevron pure CSS */
.filter-dropdown-arrow {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-block;
  flex-shrink: 0;
}
.filter-dropdown-btn[aria-expanded="true"] .filter-dropdown-arrow {
  transform: rotate(-135deg) translateY(1px);
}

.filter-dropdown-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 240px;
  background: var(--bg);
  border: 1px solid transparent;
  text-align: center;

  /* ── État fermé ── */
  opacity: 0;
  transform: translateY(-10px);
  visibility: hidden;
  pointer-events: none;

  /* ── Fermeture : rapide, nette ── */
  transition:
    opacity     0.18s ease-in,
    transform   0.18s ease-in,
    visibility  0s    linear 0.18s,
    border-color 0.18s ease,
    box-shadow   0.18s ease;
}

/* ── État ouvert : expo-out premium ── */
.filter-dropdown-list.is-open {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  padding: 10px 0;
  border-color: var(--panelBorder);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.14);

  /* Ouverture : courbe expo-out — démarre vite, se pose doucement */
  transition:
    opacity     0.4s  cubic-bezier(0.16, 1, 0.3, 1),
    transform   0.45s cubic-bezier(0.16, 1, 0.3, 1),
    visibility  0s    linear 0s,
    border-color 0.3s ease,
    box-shadow   0.4s ease;
}

.filter-dropdown-list li {
  padding: 15px 28px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  color: var(--text);

  /* ── État fermé : invisible + léger décalage bas ── */
  opacity: 0;
  transform: translateY(6px);

  /* ── Fermeture : rapide, de bas en haut ── */
  transition: opacity 0.12s ease-in, transform 0.12s ease-in, color 0.2s ease;
}
.filter-dropdown-list li:nth-child(1) { transition-delay: 0.09s; }
.filter-dropdown-list li:nth-child(2) { transition-delay: 0.06s; }
.filter-dropdown-list li:nth-child(3) { transition-delay: 0.04s; }
.filter-dropdown-list li:nth-child(4) { transition-delay: 0.02s; }
.filter-dropdown-list li:nth-child(5) { transition-delay: 0.01s; }
.filter-dropdown-list li:nth-child(6) { transition-delay: 0s; }

/* ── Ouverture : remontée + fondu, de haut en bas ── */
.filter-dropdown-list.is-open li {
  opacity: 0.7;
  transform: translateY(0);
  transition: opacity 0.38s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.42s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.2s ease;
}
.filter-dropdown-list.is-open li:nth-child(1) { transition-delay: 0.08s; }
.filter-dropdown-list.is-open li:nth-child(2) { transition-delay: 0.13s; }
.filter-dropdown-list.is-open li:nth-child(3) { transition-delay: 0.18s; }
.filter-dropdown-list.is-open li:nth-child(4) { transition-delay: 0.23s; }
.filter-dropdown-list.is-open li:nth-child(5) { transition-delay: 0.28s; }
.filter-dropdown-list.is-open li:nth-child(6) { transition-delay: 0.33s; }

.filter-dropdown-list li:hover     { opacity: 0.9 !important; color: var(--accent); }
.filter-dropdown-list li.is-active { opacity: 1   !important; color: var(--accent); }
.filter-dropdown-list li:focus-visible {
  opacity: 1 !important;
  outline: 2px solid var(--accent);
  outline-offset: -2px;
  border-radius: 2px;
}

/* ── Grille Isotope ───────────────────────────────────────── */

/* fitWidth: true laisse Isotope définir la largeur exacte du bloc.
   Les largeurs sont en px/vw (jamais en % du conteneur) pour éviter le
   rétrécissement en cascade lors du filtrage. margin: 0 auto centre le bloc. */
.isotope-grid {
  margin: 0 auto;
  padding: 0;
  transition: margin-top 0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* .grid-sizer : référence de colonne pour Isotope — aucune hauteur, aucun contenu */
/* Projets en attente de contenu (photos/textes) — masqués mais conservés dans le code */
.project-item.is-draft { display: none !important; }

.grid-sizer { width: 280px; }   /* 4 colonnes · 4 × 280 = 1120 px */

.project-item {
  width: 280px;
  padding: 8px;
  box-sizing: border-box;
}

/* La carte occupe 100 % de la cellule */
.project-item .gallery-card       { margin-bottom: 0; }
.project-item .gallery-card-inner { max-width: 100%; margin: 0; }

/* Carte projet */
.gallery-card {
  margin-bottom: 0;
}
.gallery-card a {
  display: block;
  text-decoration: none;
}
.gallery-card-inner {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.gallery-card-inner img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform .4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.gallery-card:hover .gallery-card-inner img {
  transform: scale(1.03);
}
.gallery-card .meta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: rgba(26, 26, 26, .75);
  color: #fff;
  text-align: center;
  padding: 20px;
  opacity: 0;
  transition: opacity .3s ease;
}
.gallery-card:hover .meta,
.gallery-card a:focus-visible .meta {
  opacity: 1;
}
.gallery-card .meta .title {
  font-family: var(--font-title);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: .06em;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.gallery-card .meta .kv {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  font-size: .8rem;
  font-family: var(--font-body);
  letter-spacing: .06em;
  color: rgba(255,255,255,.75);
}

/* ── Responsive réalisations ─────────────────────────────── */

/* ── ≤ 1200px → 3 colonnes (px stables) ── */
@media (max-width: 1200px) {
  .grid-sizer,
  .project-item { width: 340px; }   /* 3 × 340 = 1020 px */
  .filter-menu { max-width: 860px; }
  .filter-menu::before { margin-right: 20px; }
  .filter-menu::after  { margin-left:  20px; }
  .filter-menu li:not(:last-child)::after { width: 20px; margin: 0 20px; }
}

/* ── ≤ 800px → menu desktop masqué, dropdown mobile affiché, 2 colonnes (vw) ── */
@media (max-width: 800px) {
  .filter-menu { display: none !important; }
  .filter-dropdown-wrapper { display: flex; }

  .grid-sizer,
  .project-item { width: 44vw; }   /* vw = stable vs. le conteneur Isotope */
  .project-item { padding: 5px; }
}

/* ── ≤ 420px → 1 colonne (vw) ── */
@media (max-width: 420px) {
  .grid-sizer,
  .project-item { width: 88vw; }
  .project-item { padding: 6px 0; }
}

/* ============================================================
   PAGE MENTIONS LÉGALES
   ============================================================ */
.legal-page { padding-top: 0; }

.legal-wrapper {
  max-width: 800px;
  margin: 0 auto;
  padding: 280px 40px 100px;
}

.legal-title {
  font-family: var(--font-title);
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  color: var(--text);
  text-align: left;
  margin: 0 0 60px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line-color);
}

.legal-section {
  margin-bottom: 48px;
}

.legal-h2 {
  font-family: var(--font-title);
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--text);
  margin: 0 0 16px;
  letter-spacing: .02em;
}

.legal-wrapper p {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--text);
  margin-bottom: 12px;
}

.legal-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}
.legal-list li {
  font-size: .95rem;
  line-height: 1.8;
  color: var(--text);
  padding: 4px 0 4px 16px;
  position: relative;
}
.legal-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: .8rem;
}

.legal-wrapper a {
  color: var(--accent);
  text-decoration: none;
  transition: opacity .2s ease;
}
.legal-wrapper a:hover { opacity: .75; }

.legal-update {
  font-size: .8rem;
  color: var(--footer-text);
  margin-top: 24px;
  font-style: italic;
}

@media (max-width: 600px) {
  .legal-wrapper { padding: 140px 20px 60px; }
  .legal-title { font-size: 1.8rem; }
}

/* ============================================================
   MEDIA QUERIES REGROUPÉES (Audit Perf — Phase 1)
   Les points de rupture ci-dessous étaient dupliqués à plusieurs
   endroits du fichier (même valeur max-width déclarée séparément
   pour des composants différents). Ils sont regroupés ici par
   point de rupture pour réduire le nombre de blocs @media et
   faciliter la maintenance.
   ============================================================ */
@media (max-width: 1024px) {
  /* Galerie projets — tablette large : évite les trous du dense-packing */
  .format-tablette-large { grid-column: span 2 !important; }
  /* Page agence — lexique : 3 → 2 colonnes */
  .agency-lexicon { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  /* Page réalisations — titre + grille + menu de filtres */
  .page-main-title { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  .page-main-title::before,
  .page-main-title::after { margin: 0 20px; }
  .grid-sizer,
  .project-item { width: 44vw; }
  .filter-menu { max-width: 100%; padding: 0 16px; }
  .filter-menu::before { margin-right: 16px; }
  .filter-menu::after  { margin-left:  16px; }
  .filter-menu li { font-size: 0.8rem; letter-spacing: 0.11em; }
  .filter-menu li:not(:last-child)::after { width: 14px; margin: 0 14px; }
}

@media (max-width: 768px) {
  /* Page agence — hero */
  .agence-hero-wrapper { padding-left: 20px; padding-right: 20px; }
  /* Page agence — piliers, trombinoscope */
  .agency-pillars { padding: 60px 20px; }
  .team-section { padding: 40px 20px 60px; }
  .team-grid { margin-top: 48px; }
  /* Page agence — lexique */
  .agency-lexicon { grid-template-columns: 1fr; padding: 40px 20px; }
  /* Espacement header → contenu (toutes pages) */
  .page-top { padding-top: 140px; }
  /* Page contact */
  .contact-wrapper,
  .gallery-container { padding-left: 20px; padding-right: 20px; padding-bottom: 60px; }
  .contact-grid { grid-template-columns: 1fr; gap: 48px; }
}

@media (max-width: 600px) {
  /* Footer bande pleine largeur */
  .footer-band {
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 6px;
    padding: 14px 20px;
  }
}