:root {
  --bg: #0b0b0b;
  --surface: #131313;
  --surface-2: #1a1a1a;
  --text: #f4f4f1;
  --muted: #b9b9b2;
  --line: rgba(255,255,255,.16);
  --max: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Raleway", system-ui, sans-serif;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }

.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 30px;
  background: rgba(0,0,0,.42);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: background .3s ease, box-shadow .3s ease;
}
.brand {
  display: inline-flex;
  align-items: center;
}
.brand img { display:block; width:72px; height:auto; }
.site-header.scrolled { background: rgba(0,0,0,.86); box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.main-nav { display: flex; gap: 31px; font-size: .88rem; font-weight: 500; letter-spacing: .11em; text-transform: uppercase; }
.main-nav a { position:relative; opacity:.88; padding:8px 0; transition:opacity .2s ease; }
.main-nav a::after { content:""; position:absolute; left:0; right:100%; bottom:2px; height:1px; background:currentColor; transition:right .25s ease; }
.main-nav a:hover { opacity:1; }
.main-nav a:hover::after, .main-nav a.active::after { right:0; }
.menu-toggle { display: none; }

.hero {
  min-height: 100svh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
}
.hero-panel {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding: 120px 38px 54px;
  border-right: 1px solid var(--line);
  overflow: hidden;
  transition: flex .45s ease, filter .35s ease, background .35s ease;
}
.hero-panel:last-child { border-right: 0; }
.hero-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(0,0,0,.80) 0%, rgba(0,0,0,.35) 42%, rgba(0,0,0,.16) 72%, rgba(0,0,0,.28) 100%),
    linear-gradient(to right, rgba(0,0,0,.16), transparent 55%);
}
.hero-panel.event {
  background-image: url("../images/img-00.jpg");
  background-size: cover;
  background-position: 50% 50%;
}
.hero-panel.architecture {
  background-image: url("../images/img-01.jpg");
  background-size: cover;
  background-position: 52% 50%;
}
.hero-panel.portrait {
  background-image: url("../images/img-02.jpg");
  background-size: cover;
  background-position: 50% 42%;
}
.hero-panel:hover { background-size: cover; }
.placeholder-label {
  position: absolute;
  top: 90px;
  left: 38px;
  z-index: 2;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(255,255,255,.48);
}
.panel-content { position: relative; z-index: 2; max-width: 420px; }
.eyebrow, .section-kicker {
  margin: 0 0 14px;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero h1 {
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-size: clamp(1.85rem, 2.65vw, 3.4rem);
  line-height: .96;
  letter-spacing: .065em;
  font-weight: 300;
}
.hero-panel p:not(.eyebrow) { max-width: 34ch; color: #d2d2cd; margin: 18px 0 26px; }
.hero-panel a {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,255,255,.65);
  font-size: .76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.section {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  padding: 110px 0;
  border-bottom: 1px solid var(--line);
}
.section h2 {
  margin: 0;
  font-family: "Raleway", sans-serif;
  font-size: clamp(2.2rem, 4.5vw, 4.8rem);
  line-height: 1.02;
  letter-spacing: .015em;
  font-weight: 300;
}
.lead { max-width: 760px; color: var(--muted); font-size: 1.08rem; margin-top: 28px; }

.work-section {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: 70px;
  align-items: center;
}
.work-section.reverse .work-copy { order: 2; }
.work-section.reverse .gallery-placeholder { order: 1; }
.work-copy p:not(.section-kicker) { color: var(--muted); max-width: 48ch; margin-top: 24px; }
.gallery-placeholder {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: 220px 220px;
  gap: 12px;
}
.gallery-placeholder div {
  display: grid;
  place-items: center;
  min-height: 180px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: #74746f;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: .72rem;
}
.gallery-placeholder div:first-child { grid-row: 1 / span 2; }

.about-section { display: grid; grid-template-columns: .8fr 1.2fr; gap: 70px; }
.about-copy { max-width: 720px; color: var(--muted); font-size: 1.08rem; }
.about-copy p:first-child { margin-top: 0; }

.contact-section { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }
.contact-section > div > p:not(.section-kicker) { color: var(--muted); max-width: 48ch; }
.contact-form { display: grid; gap: 20px; }
.contact-form label { display: grid; gap: 8px; font-size: .82rem; color: #d7d7d2; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #111;
  color: var(--text);
  padding: 14px 15px;
  font: inherit;
  border-radius: 0;
}
.contact-form textarea { resize: vertical; }
.contact-form button {
  justify-self: start;
  border: 1px solid #f1f1ed;
  background: #f1f1ed;
  color: #111;
  padding: 13px 20px;
  font: inherit;
  cursor: pointer;
}

.site-footer {
  width: min(calc(100% - 48px), var(--max));
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding: 28px 0 36px;
  color: #87877f;
  font-size: .78rem;
}

@media (max-width: 900px) {
  .site-header { padding: 18px 20px; background: rgba(11,11,11,.88); backdrop-filter: blur(8px); }
  .menu-toggle {
    display: block;
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    cursor: pointer;
  }
  .main-nav {
    position: absolute;
    top: 64px; left: 0; right: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 10px 20px 22px;
    background: rgba(11,11,11,.97);
  }
  .main-nav.open { display: flex; }
  .main-nav a { padding: 12px 0; border-top: 1px solid var(--line); }

  .hero { grid-template-columns: 1fr; }
  .hero-panel { min-height: 48svh; border-right: 0; border-bottom: 1px solid var(--line); padding: 90px 24px 30px; }
  .placeholder-label { top: 74px; left: 24px; }
  .hero h1 { font-size: clamp(2.4rem, 12vw, 4.2rem); }

  .section { width: min(calc(100% - 36px), var(--max)); padding: 82px 0; }
  .work-section,
  .about-section,
  .contact-section { grid-template-columns: 1fr; gap: 42px; }
  .work-section.reverse .work-copy,
  .work-section.reverse .gallery-placeholder { order: initial; }
  .gallery-placeholder { grid-template-rows: 170px 170px; }
}

@media (max-width: 560px) {
  .gallery-placeholder { grid-template-columns: 1fr; grid-template-rows: repeat(3, 180px); }
  .gallery-placeholder div:first-child { grid-row: auto; }
  .site-footer { width: calc(100% - 36px); flex-direction: column; gap: 4px; }
}

/* Visual placeholders: deliberately image-free, so the layout already feels finished. */
.hero-panel { isolation:isolate; cursor:pointer; }
.hero-panel::after {
  content:""; position:absolute; inset:0; z-index:0; opacity:0; pointer-events:none;
  transition:opacity .45s ease, transform .8s cubic-bezier(.2,.7,.2,1);
}
.hero-panel.event::after {
  background:
    radial-gradient(circle at 70% 22%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 28% 36%, rgba(255,255,255,.10) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 68%, rgba(255,255,255,.08) 0 2px, transparent 3px),
    linear-gradient(115deg, transparent 0 48%, rgba(255,255,255,.055) 49% 50%, transparent 51% 100%);
  background-size: 86px 86px, 126px 126px, 168px 168px, auto;
}
.hero-panel.architecture::after {
  background:
    linear-gradient(90deg, transparent 0 23%, rgba(255,255,255,.07) 23.2% 23.8%, transparent 24% 52%, rgba(255,255,255,.045) 52.2% 52.8%, transparent 53%),
    linear-gradient(0deg, transparent 0 32%, rgba(255,255,255,.055) 32.2% 32.8%, transparent 33% 66%, rgba(255,255,255,.04) 66.2% 66.8%, transparent 67%),
    linear-gradient(135deg, transparent 0 48%, rgba(255,255,255,.055) 49% 50%, transparent 51%);
}
.hero-panel.portrait::after {
  background:
    radial-gradient(ellipse at 72% 35%, rgba(255,255,255,.12), transparent 27%),
    radial-gradient(ellipse at 42% 62%, rgba(255,255,255,.07), transparent 24%),
    repeating-linear-gradient(118deg, transparent 0 24px, rgba(255,255,255,.035) 25px, transparent 26px 52px);
}
.hero-panel:hover::after { opacity:0; transform:none; }
.panel-index {
  position:absolute; right:24px; top:88px; z-index:3; font-family:"Raleway",sans-serif;
  font-size:clamp(4rem,8vw,8.5rem); line-height:1; color:rgba(255,255,255,.055); letter-spacing:-.06em;
}
.visual-mark { display:none; }
.visual-circle { width:clamp(180px,28vw,420px); aspect-ratio:1; border:1px solid rgba(255,255,255,.12); border-radius:50%; top:24%; right:-14%; box-shadow:0 0 0 44px rgba(255,255,255,.018), 0 0 0 90px rgba(255,255,255,.01); }
.visual-grid { width:58%; height:46%; right:-5%; top:21%; border:1px solid rgba(255,255,255,.1); transform:skewY(-8deg); background:repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.045) 47px), repeating-linear-gradient(0deg, transparent 0 46px, rgba(255,255,255,.045) 47px); }
.visual-motion { width:65%; height:35%; right:-15%; top:30%; border-top:1px solid rgba(255,255,255,.13); border-bottom:1px solid rgba(255,255,255,.08); transform:rotate(-17deg); box-shadow:0 42px 0 rgba(255,255,255,.018), 0 84px 0 rgba(255,255,255,.012); }
.placeholder-label { display:none; }
.panel-content { transform:translateY(0); transition:transform .45s ease; }
.hero-panel:hover .panel-content { transform:translateY(-10px); }
.hero-panel a::after { content:"  →"; }
@media (min-width:901px){ .hero:hover .hero-panel{ filter:brightness(.7); } .hero:hover .hero-panel:hover{ filter:brightness(1.08); } }
@media (max-width:900px){ .panel-index{top:70px;right:18px;font-size:4.5rem;} .visual-circle{right:-22%;}.visual-grid{width:45%;}.visual-motion{width:55%;} }

  

/* === AS Photos v8 — accueil affiné === */
.site-header {
  padding: 7px 28px;
  min-height: 64px;
  background: rgba(0,0,0,.34);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.brand img { width: 78px; }
.site-header.scrolled { background: rgba(0,0,0,.82); }
.main-nav {
  gap: 38px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .095em;
}
.main-nav a { padding: 6px 0; }

@media (min-width: 901px) {
  .hero {
    display: flex;
    grid-template-columns: none;
  }
  .hero-panel {
    flex: 1 1 0;
    width: 0;
    transition: flex-grow .75s cubic-bezier(.22,.61,.36,1), filter .45s ease;
    filter: none !important;
  }
  .hero:hover .hero-panel { filter: none !important; }
  .hero:hover .hero-panel:hover,
  .hero-panel:focus-within {
    flex-grow: 1.34;
    filter: none !important;
  }
}

.hero-panel::before {
  background:
    linear-gradient(to top, rgba(0,0,0,.58) 0%, rgba(0,0,0,.21) 43%, rgba(0,0,0,.07) 72%, rgba(0,0,0,.14) 100%),
    linear-gradient(to right, rgba(0,0,0,.08), transparent 58%);
  transition: background .55s ease;
}
.hero-panel:hover::before,
.hero-panel:focus-within::before {
  background:
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.48) 43%, rgba(0,0,0,.24) 72%, rgba(0,0,0,.29) 100%),
    linear-gradient(to right, rgba(0,0,0,.15), transparent 58%);
}

.hero-panel a {
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity .35s ease .08s, transform .35s ease .08s;
}
.hero-panel:hover a,
.hero-panel:focus-within a {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.panel-content { transition: transform .55s cubic-bezier(.22,.61,.36,1); }
.hero-panel:hover .panel-content,
.hero-panel:focus-within .panel-content { transform: translateY(-8px); }

@media (max-width: 900px) {
  .site-header { padding: 7px 18px; min-height: 60px; }
  .brand img { width: 72px; }
  .main-nav { top: 60px; font-size: 13px; }
  .hero-panel a { opacity: 1; transform: none; pointer-events: auto; }
}


/* === AS Photos v10 — signature + navigation active === */
.site-header {
  min-height: 60px;
  padding: 5px 26px;
}
.brand {
  gap: 12px;
  min-width: max-content;
}
.brand img {
  width: 58px;
  height: auto;
}
.brand-signature {
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1.05;
  color: var(--text);
}
.brand-name {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .055em;
}
.brand-role {
  margin-top: 4px;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(244,244,241,.68);
}
.main-nav a.active { opacity: 1; }
.main-nav a.active::after { right: 0; }

@media (max-width: 900px) {
  .site-header { min-height: 58px; padding: 5px 16px; }
  .brand { gap: 9px; }
  .brand img { width: 52px; }
  .brand-name { font-size: 12px; }
  .brand-role { font-size: 8px; letter-spacing: .18em; margin-top: 3px; }
  .main-nav { top: 58px; }
}

@media (max-width: 420px) {
  .brand-name { font-size: 11px; }
  .brand-role { font-size: 7px; }
}

  


/* --- Portfolio v11 --- */
.portfolio-section{
  background:#f4f2ee;
  color:#111;
  padding:clamp(92px,10vw,150px) 0 clamp(90px,10vw,150px);
}
.portfolio-inner{
  width:min(1440px,92vw);
  margin:0 auto;
}
.portfolio-heading{
  max-width:760px;
  margin-bottom:42px;
}
.portfolio-kicker{
  margin:0 0 12px;
  font-family:'Raleway',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.32em;
  color:#77736d;
}
.portfolio-heading h2{
  margin:0;
  font-family:'Raleway',sans-serif;
  font-size:clamp(42px,6vw,78px);
  line-height:.95;
  font-weight:300;
  letter-spacing:.08em;
}
.portfolio-intro{
  max-width:620px;
  margin:24px 0 0;
  font-family:'Raleway',sans-serif;
  font-size:14px;
  line-height:1.8;
  font-weight:400;
  color:#68645f;
}
.portfolio-filters{
  display:flex;
  flex-wrap:wrap;
  gap:8px 28px;
  margin:0 0 42px;
  padding-bottom:18px;
  border-bottom:1px solid rgba(0,0,0,.15);
}
.portfolio-filter{
  appearance:none;
  border:0;
  background:none;
  padding:8px 0;
  position:relative;
  cursor:pointer;
  color:#77736d;
  font-family:'Raleway',sans-serif;
  font-size:12px;
  font-weight:600;
  letter-spacing:.16em;
}
.portfolio-filter::after{
  content:"";
  position:absolute;
  left:0; right:100%; bottom:0;
  height:1px;
  background:#111;
  transition:right .3s ease;
}
.portfolio-filter:hover,
.portfolio-filter.active{color:#111}
.portfolio-filter:hover::after,
.portfolio-filter.active::after{right:0}

.masonry-grid{
  columns:3 300px;
  column-gap:18px;
}
.masonry-item{
  width:100%;
  display:block;
  break-inside:avoid;
  margin:0 0 18px;
  border:0;
  position:relative;
  overflow:hidden;
  cursor:pointer;
  background:
    linear-gradient(135deg,rgba(255,255,255,.08),rgba(0,0,0,.08)),
    #d9d6d0;
  color:#fff;
  text-align:left;
  font-family:'Raleway',sans-serif;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), filter .45s ease, opacity .35s ease;
}
.masonry-item::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.48),rgba(0,0,0,.02) 58%);
}
.masonry-item::after{
  content:"";
  position:absolute;
  inset:10px;
  border:1px solid rgba(255,255,255,.20);
  pointer-events:none;
}
.masonry-item span,
.masonry-item small{
  position:absolute;
  z-index:2;
  left:24px;
}
.masonry-item span{
  bottom:38px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.16em;
}
.masonry-item small{
  bottom:20px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.20em;
  opacity:.72;
}
.masonry-item:hover{
  transform:translateY(-3px);
  filter:brightness(.84);
}
.masonry-item.tall{height:520px}
.masonry-item.landscape{height:270px}
.masonry-item.portrait{height:430px}
.masonry-item.square{height:340px}
.masonry-item.wide{height:300px}
.masonry-item.is-hidden{display:none}

@media (max-width:720px){
  .portfolio-section{padding:80px 0}
  .portfolio-inner{width:min(92vw,620px)}
  .portfolio-filters{gap:6px 18px;margin-bottom:26px}
  .portfolio-filter{font-size:10px}
  .masonry-grid{columns:2 150px;column-gap:10px}
  .masonry-item{margin-bottom:10px}
  .masonry-item.tall{height:350px}
  .masonry-item.landscape{height:190px}
  .masonry-item.portrait{height:290px}
  .masonry-item.square{height:230px}
  .masonry-item.wide{height:210px}
  .masonry-item span{left:14px;bottom:30px;font-size:10px}
  .masonry-item small{left:14px;bottom:15px;font-size:7px}
}



/* --- Services descriptifs v12 --- */
.service-section{
  position:relative;
  padding:clamp(95px,11vw,170px) 0;
  overflow:hidden;
}
.service-dark{background:#080808;color:#fff}
.service-mid{background:#171717;color:#fff}
.service-light{background:#2a2a2a;color:#fff}

.service-inner{
  width:min(1440px,92vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr);
  gap:clamp(55px,8vw,130px);
  align-items:center;
  position:relative;
}
.service-inner.reverse .service-copy{order:2}
.service-inner.reverse .service-placeholder{order:1}

.service-copy{
  position:relative;
  z-index:2;
  max-width:720px;
}
.service-number{
  position:absolute;
  top:-58px;
  left:-8px;
  font-family:'Raleway',sans-serif;
  font-size:clamp(92px,13vw,190px);
  line-height:1;
  font-weight:200;
  letter-spacing:-.03em;
  color:rgba(255,255,255,.045);
  user-select:none;
  pointer-events:none;
}
.service-kicker{
  margin:0 0 16px;
  font-family:'Raleway',sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.30em;
  color:rgba(255,255,255,.58);
}
.service-copy h2{
  margin:0 0 28px;
  font-family:'Raleway',sans-serif;
  font-size:clamp(42px,6vw,82px);
  line-height:.98;
  font-weight:300;
  letter-spacing:.08em;
}
.service-copy p:last-child{
  margin:0;
  max-width:620px;
  font-family:'Raleway',sans-serif;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.85;
  font-weight:300;
  color:rgba(255,255,255,.72);
}
.service-placeholder{
  min-height:clamp(360px,42vw,620px);
  position:relative;
  background:
    linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
    #111;
  border:1px solid rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}
.service-mid .service-placeholder{background:#101010}
.service-light .service-placeholder{background:#1e1e1e}
.service-placeholder::after{
  content:"";
  position:absolute;
  inset:12px;
  border:1px solid rgba(255,255,255,.06);
}
.service-placeholder span{
  position:relative;
  z-index:2;
  font-family:'Raleway',sans-serif;
  font-size:9px;
  font-weight:500;
  letter-spacing:.26em;
  color:rgba(255,255,255,.32);
}
.portfolio-transition{
  height:210px;
  background:linear-gradient(to bottom,#2a2a2a 0%,#454440 28%,#8e8a83 58%,#d8d4cd 82%,#f4f2ee 100%);
}
@media (max-width:850px){
  .service-section{padding:85px 0}
  .service-inner,
  .service-inner.reverse{
    grid-template-columns:1fr;
    gap:42px;
  }
  .service-inner.reverse .service-copy,
  .service-inner.reverse .service-placeholder{order:initial}
  .service-placeholder{min-height:360px}
  .portfolio-transition{height:140px}
}



/* --- v13 refinements --- */
.section-anchor{
  position:relative;
  top:-64px;
  height:0;
  visibility:hidden;
}

.service-copy h2{
  font-size:clamp(34px,4.4vw,64px) !important;
  letter-spacing:.06em !important;
  line-height:1.03 !important;
  overflow-wrap:normal;
  word-break:normal;
}

.service-copy p:last-child{
  font-size:clamp(14px,1vw,16px) !important;
  line-height:1.75 !important;
  max-width:560px !important;
}

.service-kicker{
  font-size:9px !important;
  letter-spacing:.26em !important;
}

.service-copy{
  max-width:620px !important;
  min-width:0;
}

.service-inner{
  grid-template-columns:minmax(0, .95fr) minmax(300px, 1.05fr) !important;
  gap:clamp(42px,6vw,90px) !important;
}

@media (max-width: 1100px){
  .service-copy h2{
    font-size:clamp(32px,5vw,52px) !important;
  }
}

@media (max-width: 850px){
  .service-copy h2{
    font-size:clamp(30px,9vw,44px) !important;
    letter-spacing:.04em !important;
  }
  .service-copy p:last-child{
    font-size:14px !important;
  }
}



/* v14 accueil header */
header,.site-header,.navbar,.main-header{background:transparent!important;background-color:transparent!important;box-shadow:none!important;border-bottom:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;}
.brand,.logo-wrap,.site-brand,.branding{min-height:72px;}
.brand img,.logo-wrap img,.site-brand img,.branding img,header img[alt*="AS"],header img[alt*="logo"]{width:auto!important;height:58px!important;max-height:58px!important;}
.brand-name,.brand-text,.logo-text,.site-brand-text{font-size:18px!important;line-height:1.08!important;letter-spacing:.08em!important;}
.brand-name small,.brand-text small,.logo-text small,.site-brand-text small,.brand-subtitle{font-size:11px!important;letter-spacing:.18em!important;}
header.scrolled,.site-header.scrolled,.navbar.scrolled,.main-header.scrolled{background:rgba(8,8,8,.88)!important;backdrop-filter:blur(10px)!important;-webkit-backdrop-filter:blur(10px)!important;}
@media(max-width:720px){.brand img,.logo-wrap img,.site-brand img,.branding img,header img[alt*="AS"],header img[alt*="logo"]{height:48px!important;max-height:48px!important}.brand-name,.brand-text,.logo-text,.site-brand-text{font-size:15px!important}}



/* === v16: mobile coherent typography + native menu === */
.mobile-nav-native{display:none}
@media (max-width:900px){
  /* Native menu: independent of the desktop JS menu. */
  .menu-toggle{display:none!important}
  .site-header > .main-nav{display:none!important}
  .mobile-nav-native{display:block; margin-left:auto; position:relative; z-index:60}
  .mobile-nav-native summary{
    list-style:none; width:42px; height:42px; cursor:pointer;
    display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;
  }
  .mobile-nav-native summary::-webkit-details-marker{display:none}
  .mobile-nav-native summary span{display:block;width:24px;height:1.5px;background:#fff;transition:.25s ease}
  .mobile-nav-native[open] summary span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .mobile-nav-native[open] summary span:nth-child(2){opacity:0}
  .mobile-nav-native[open] summary span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  .mobile-nav-native nav{
    position:fixed; top:72px; left:0; right:0;
    display:flex; flex-direction:column; gap:0;
    padding:8px 20px 18px;
    background:rgba(8,8,8,.98);
    border-top:1px solid rgba(255,255,255,.10);
    box-shadow:0 14px 34px rgba(0,0,0,.28);
  }
  .mobile-nav-native nav a{
    padding:14px 2px;
    font-size:13px; font-weight:500; letter-spacing:.12em; text-transform:uppercase;
    border-bottom:1px solid rgba(255,255,255,.10);
  }

  /* All three cover titles share exactly the same typography. */
  .hero h1,
  .hero-panel h1{
    font-size:clamp(1.7rem,7.2vw,2.25rem)!important;
    line-height:1.04!important;
    letter-spacing:.035em!important;
    white-space:nowrap!important;
    overflow:visible!important;
  }
  .hero-panel{padding-left:24px!important;padding-right:24px!important}

  /* Descriptive service titles also share one mobile scale. */
  .service-copy h2{
    font-size:clamp(2rem,8.2vw,2.65rem)!important;
    line-height:1.05!important;
    letter-spacing:.035em!important;
    overflow-wrap:normal!important;
    word-break:normal!important;
  }
}
@media (max-width:360px){
  .hero h1,.hero-panel h1{font-size:1.58rem!important;letter-spacing:.02em!important}
  .mobile-nav-native nav{top:68px}
}



/* --- Textes Prestations v17 --- */
.service-text{
  max-width:590px;
}
.service-text p{
  margin:0;
  font-family:'Raleway',sans-serif;
  font-size:clamp(14px,1.02vw,16px);
  line-height:1.82;
  font-weight:300;
  color:rgba(255,255,255,.76);
}
.service-text p + p{
  margin-top:18px;
}
@media (max-width:850px){
  .service-text{
    max-width:100%;
  }
  .service-text p{
    font-size:14px;
    line-height:1.72;
  }
  .service-text p + p{
    margin-top:15px;
  }
}



/* --- Transitions de fond entre les 3 sections v18 --- */
/* On conserve les couleurs existantes (#080808, #171717, #2a2a2a),
   mais on adoucit le passage de l'une à l'autre. */
.service-dark{
  background:
    linear-gradient(
      to bottom,
      #080808 0%,
      #080808 78%,
      #0d0d0d 88%,
      #131313 95%,
      #171717 100%
    ) !important;
}

.service-mid{
  background:
    linear-gradient(
      to bottom,
      #171717 0%,
      #171717 76%,
      #1b1b1b 86%,
      #222222 94%,
      #2a2a2a 100%
    ) !important;
}

/* La troisième section reste dans sa couleur actuelle et rejoint
   ensuite le dégradé déjà prévu vers le Portfolio clair. */
.service-light{
  background:#2a2a2a !important;
}

/* Évite toute ligne visible entre les sections. */
.service-section{
  margin:0 !important;
  border:0 !important;
}

@media (max-width:850px){
  .service-dark{
    background:
      linear-gradient(
        to bottom,
        #080808 0%,
        #080808 72%,
        #101010 90%,
        #171717 100%
      ) !important;
  }

  .service-mid{
    background:
      linear-gradient(
        to bottom,
        #171717 0%,
        #171717 72%,
        #202020 90%,
        #2a2a2a 100%
      ) !important;
  }
}



/* --- Paragraph spacing v19 --- */
.service-text p{
  margin:0 !important;
}
.service-text p + p{
  margin-top:28px !important;
}
@media (max-width:850px){
  .service-text p + p{
    margin-top:22px !important;
  }
}



/* --- Photos Prestations v20 --- */
.service-photo{
  min-height:clamp(360px,42vw,620px);
  position:relative;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
}
.service-photo img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
#evenements .service-photo img{
  object-position:center 38%;
}
#architecture .service-photo img{
  object-position:center center;
}
#portraits .service-photo img{
  object-position:center 42%;
}
@media (max-width:850px){
  .service-photo{
    min-height:340px;
  }
  #evenements .service-photo img{
    object-position:center 32%;
  }
  #architecture .service-photo img{
    object-position:center center;
  }
  #portraits .service-photo img{
    object-position:center 36%;
  }
}



/* --- Photos carrées Prestations v21 --- */
.service-photo{
  width:100% !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
  overflow:hidden !important;
}

.service-photo img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}

/* Même centrage pour les trois univers, desktop et mobile. */
#evenements .service-photo img,
#architecture .service-photo img,
#portraits .service-photo img{
  object-position:center center !important;
}

@media (max-width:850px){
  .service-photo{
    width:100% !important;
    min-height:0 !important;
    aspect-ratio:1 / 1 !important;
  }
}



/* --- Ajustements desktop + mobile v22 --- */

/* DESKTOP : rapprocher les trois sections et donc les trois images */
@media (min-width: 851px){
  .service-section{
    padding:70px 0 !important;
  }

  .service-inner{
    gap:clamp(34px,4.5vw,68px) !important;
  }

  .service-photo{
    max-width:560px;
    justify-self:center;
  }
}

/* MOBILE : vraie marge latérale, meilleure largeur de lecture, sections plus compactes */
@media (max-width: 850px){
  .service-section{
    padding:58px 0 !important;
  }

  .service-inner,
  .service-inner.reverse{
    width:88vw !important;
    max-width:620px !important;
    margin:0 auto !important;
    grid-template-columns:1fr !important;
    gap:28px !important;
  }

  .service-copy{
    width:100% !important;
    max-width:100% !important;
    padding:0 6px !important;
    box-sizing:border-box !important;
  }

  .service-kicker,
  .service-copy h2,
  .service-text{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .service-copy h2{
    font-size:clamp(28px,8vw,38px) !important;
    line-height:1.03 !important;
    letter-spacing:.035em !important;
    margin-bottom:20px !important;
  }

  .service-kicker{
    margin-bottom:12px !important;
  }

  .service-text{
    max-width:34em !important;
  }

  .service-text p{
    font-size:14px !important;
    line-height:1.65 !important;
  }

  .service-text p + p{
    margin-top:20px !important;
  }

  .service-photo{
    width:100% !important;
    max-width:520px !important;
    margin:0 auto !important;
  }

  /* Sur mobile, garder le texte avant l'image pour chaque section */
  .service-inner.reverse .service-copy{
    order:1 !important;
  }

  .service-inner.reverse .service-photo{
    order:2 !important;
  }
}

/* Téléphones étroits */
@media (max-width: 420px){
  .service-inner,
  .service-inner.reverse{
    width:90vw !important;
  }

  .service-copy{
    padding:0 4px !important;
  }

  .service-copy h2{
    font-size:30px !important;
  }

  .service-text p{
    font-size:13.5px !important;
    line-height:1.62 !important;
  }

  .service-section{
    padding:48px 0 !important;
  }
}



/* --- Ajustements navigation + transition accueil v23 --- */

/* Plus d'espace entre l'accueil et la première section Prestations */
#prestations{
  scroll-margin-top:72px;
}

#evenements{
  padding-top:120px !important;
}

@media (max-width:850px){
  #evenements{
    padding-top:92px !important;
  }
}

/* Barre totalement noire dès qu'elle devient fixe/visible au scroll */
header.scrolled,
.site-header.scrolled,
.navbar.scrolled,
.main-header.scrolled{
  background:#000 !important;
  background-color:#000 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Défilement fluide pour les ancres */
html{
  scroll-behavior:smooth;
}



/* --- Accueil / Prestations + hover v24 --- */

/* Doubler l'espace demandé entre l'accueil et Événements */
#evenements{
  padding-top:240px !important;
}
@media (max-width:850px){
  #evenements{
    padding-top:184px !important;
  }
}

/* Accueil : au survol, la colonne choisie reste lumineuse,
   tandis que les deux autres s'assombrissent. */
.hero-panels:hover .hero-panel,
.home-panels:hover .home-panel,
.cover-grid:hover .cover-item,
.hero:hover .hero-column{
  filter:brightness(.58) !important;
}

.hero-panels .hero-panel:hover,
.home-panels .home-panel:hover,
.cover-grid .cover-item:hover,
.hero .hero-column:hover{
  filter:brightness(1) !important;
}

/* Si l'assombrissement est géré par un pseudo-élément */
.hero-panel::after,
.home-panel::after,
.cover-item::after,
.hero-column::after{
  transition:opacity .45s ease !important;
}

.hero-panels:hover .hero-panel::after,
.home-panels:hover .home-panel::after,
.cover-grid:hover .cover-item::after,
.hero:hover .hero-column::after{
  opacity:.32 !important;
}

.hero-panels .hero-panel:hover::after,
.home-panels .home-panel:hover::after,
.cover-grid .cover-item:hover::after,
.hero .hero-column:hover::after{
  opacity:.08 !important;
}



/* --- Correction définitive du hover accueil v25 --- */
@media (min-width:901px){

  /* Dès que la souris est sur l'accueil, les 3 panneaux sont légèrement assombris */
  .hero:hover .hero-panel{
    filter:brightness(.62) !important;
  }

  /* Le panneau réellement survolé reste lumineux */
  .hero:hover .hero-panel:hover,
  .hero .hero-panel:focus-within{
    filter:brightness(1.04) !important;
  }

  /* Neutraliser l'ancienne règle qui assombrissait précisément le panneau survolé */
  .hero-panel:hover::before,
  .hero-panel:focus-within::before{
    background:
      linear-gradient(to top,
        rgba(0,0,0,.43) 0%,
        rgba(0,0,0,.15) 43%,
        rgba(0,0,0,.03) 72%,
        rgba(0,0,0,.08) 100%),
      linear-gradient(to right, rgba(0,0,0,.05), transparent 58%) !important;
  }

  /* Les panneaux non survolés reçoivent un voile plus sombre */
  .hero:hover .hero-panel:not(:hover)::before{
    background:
      linear-gradient(to top,
        rgba(0,0,0,.72) 0%,
        rgba(0,0,0,.50) 43%,
        rgba(0,0,0,.34) 72%,
        rgba(0,0,0,.40) 100%),
      linear-gradient(to right, rgba(0,0,0,.18), transparent 58%) !important;
  }
}



/* --- Portfolio réel v27 --- */
.portfolio-real{
  padding-top:clamp(95px,9vw,145px) !important;
}
.portfolio-masonry{
  column-count:3;
  column-gap:14px;
}
.portfolio-photo{
  display:block;
  width:100%;
  padding:0;
  margin:0 0 14px;
  border:0;
  background:#ddd;
  break-inside:avoid;
  overflow:hidden;
  cursor:zoom-in;
  position:relative;
}
.portfolio-photo img{
  display:block;
  width:100%;
  height:auto;
  transition:transform .55s cubic-bezier(.2,.7,.2,1), filter .45s ease;
}
.portfolio-photo:hover img{
  transform:scale(1.025);
  filter:brightness(.92);
}
.portfolio-photo.is-hidden{
  display:none !important;
}

.lightbox{
  position:fixed;
  inset:0;
  z-index:5000;
  background:rgba(0,0,0,.97);
  display:none;
  align-items:center;
  justify-content:center;
}
.lightbox.open{
  display:flex;
}
.lightbox-stage{
  margin:0;
  width:min(88vw,1500px);
  height:88vh;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.lightbox-image{
  display:block;
  max-width:100%;
  max-height:86vh;
  width:auto;
  height:auto;
  object-fit:contain;
  box-shadow:0 12px 60px rgba(0,0,0,.32);
}
.lightbox-meta{
  position:absolute;
  left:50%;
  bottom:-2px;
  transform:translateX(-50%);
  font-family:'Raleway',sans-serif;
  font-size:10px;
  font-weight:500;
  letter-spacing:.18em;
  color:rgba(255,255,255,.58);
  white-space:nowrap;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  position:fixed;
  z-index:5002;
  border:0;
  background:transparent;
  color:#fff;
  cursor:pointer;
  font-family:Arial,sans-serif;
  font-weight:200;
  opacity:.76;
  transition:opacity .2s ease, transform .2s ease;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{
  opacity:1;
}
.lightbox-close{
  top:18px;
  right:26px;
  font-size:42px;
  line-height:1;
}
.lightbox-prev,
.lightbox-next{
  top:50%;
  transform:translateY(-50%);
  font-size:58px;
  line-height:1;
  padding:24px;
}
.lightbox-prev{left:10px}
.lightbox-next{right:10px}
body.lightbox-open{
  overflow:hidden;
}

@media (max-width:1000px){
  .portfolio-masonry{
    column-count:2;
    column-gap:10px;
  }
  .portfolio-photo{
    margin-bottom:10px;
  }
}
@media (max-width:620px){
  .portfolio-inner{
    width:92vw !important;
  }
  .portfolio-masonry{
    column-count:2;
    column-gap:7px;
  }
  .portfolio-photo{
    margin-bottom:7px;
  }
  .portfolio-filters{
    gap:5px 14px !important;
  }
  .portfolio-filter{
    font-size:9px !important;
    letter-spacing:.12em !important;
  }
  .lightbox-stage{
    width:94vw;
    height:82vh;
  }
  .lightbox-image{
    max-height:80vh;
  }
  .lightbox-prev,
  .lightbox-next{
    font-size:42px;
    padding:12px;
  }
  .lightbox-close{
    top:12px;
    right:16px;
    font-size:36px;
  }
}



/* --- À propos v28 --- */
.about-section-v28{
  background:#111;
  color:#fff;
  padding:clamp(100px,10vw,160px) 0 clamp(110px,11vw,175px);
}
.about-v28-inner,
.about-v28-bottom{
  width:min(1380px,90vw);
  margin:0 auto;
}
.about-v28-inner{
  display:grid;
  grid-template-columns:minmax(320px,.9fr) minmax(0,1.1fr);
  gap:clamp(55px,7vw,110px);
  align-items:start;
}
.about-v28-photo{
  position:sticky;
  top:110px;
}
.about-v28-photo img{
  display:block;
  width:100%;
  height:auto;
  max-height:760px;
  object-fit:cover;
}
.about-v28-kicker{
  margin:0 0 14px;
  font-family:'Raleway',sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.30em;
  color:rgba(255,255,255,.52);
}
.about-v28-content h2{
  margin:0;
  font-family:'Raleway',sans-serif;
  font-size:clamp(44px,6vw,82px);
  line-height:.98;
  font-weight:300;
  letter-spacing:.06em;
}
.about-v28-role{
  margin:14px 0 38px;
  font-family:'Raleway',sans-serif;
  font-size:10px;
  font-weight:600;
  letter-spacing:.26em;
  color:rgba(255,255,255,.56);
}
.about-v28-text{
  max-width:720px;
}
.about-v28-text p,
.about-v28-bottom p{
  margin:0;
  font-family:'Raleway',sans-serif;
  font-size:clamp(14px,1.02vw,16px);
  line-height:1.82;
  font-weight:300;
  color:rgba(255,255,255,.76);
}
.about-v28-text p + p,
.about-v28-bottom p + p{
  margin-top:24px;
}
.about-v28-quote{
  width:min(1180px,86vw);
  margin:clamp(95px,10vw,150px) auto;
  padding:0;
  border:0;
  font-family:'Raleway',sans-serif;
  font-size:clamp(34px,5vw,68px);
  line-height:1.18;
  font-weight:200;
  letter-spacing:.015em;
  text-align:center;
  color:#fff;
}
.about-v28-bottom{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(40px,6vw,90px);
  max-width:1160px;
}
.about-v28-bottom p + p{
  margin-top:0;
}

@media (max-width:850px){
  .about-section-v28{
    padding:82px 0 92px;
  }
  .about-v28-inner{
    width:88vw;
    grid-template-columns:1fr;
    gap:44px;
  }
  .about-v28-photo{
    position:static;
  }
  .about-v28-photo img{
    max-height:none;
  }
  .about-v28-content h2{
    font-size:clamp(36px,10vw,52px);
  }
  .about-v28-text p,
  .about-v28-bottom p{
    font-size:14px;
    line-height:1.72;
  }
  .about-v28-quote{
    width:86vw;
    margin:78px auto;
    font-size:clamp(30px,8vw,46px);
  }
  .about-v28-bottom{
    width:88vw;
    grid-template-columns:1fr;
    gap:24px;
  }
}



.language-switcher{display:flex;align-items:center;gap:7px;margin-left:20px;padding-left:20px;border-left:1px solid rgba(255,255,255,.18);font-family:'Raleway',sans-serif;font-size:10px;font-weight:500;letter-spacing:.13em;color:rgba(255,255,255,.42);white-space:nowrap}
.lang-btn{border:0;padding:5px 1px;background:transparent;color:rgba(255,255,255,.56);font:inherit;letter-spacing:inherit;cursor:pointer;position:relative}
.lang-btn:hover,.lang-btn.active{color:#fff}
.lang-btn.active:after{content:"";position:absolute;left:1px;right:1px;bottom:1px;height:1px;background:#fff}
.about-language-note{width:min(1160px,90vw);margin:52px auto 0;padding-top:28px;border-top:1px solid rgba(255,255,255,.14);font-family:'Raleway',sans-serif;font-size:14px;line-height:1.7;font-weight:400;color:rgba(255,255,255,.88)}
@media(max-width:850px){.language-switcher{margin:18px 0 0;padding:18px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.15);justify-content:center;gap:12px;font-size:11px}.about-language-note{width:88vw;margin-top:42px}}



/* --- Multilingue + À propos v30 --- */
.desktop-language-switcher{
  display:flex;
}
.mobile-language-switcher{
  display:none;
}

.about-location-language{
  color:rgba(255,255,255,.76) !important;
  font-weight:300 !important;
}

@media (max-width:850px){
  .desktop-language-switcher{
    display:none !important;
  }
  .mobile-language-switcher{
    display:flex !important;
  }

}



.project-memory{background:#171717;color:#fff;padding:clamp(95px,10vw,155px) 0}
.project-memory-inner{width:min(1160px,88vw);margin:0 auto}
.project-memory-kicker{margin:0 0 18px;font-family:'Raleway',sans-serif;font-size:10px;font-weight:600;letter-spacing:.28em;color:rgba(255,255,255,.48)}
.project-memory h2{margin:0;font-family:'Raleway',sans-serif;font-size:clamp(42px,6.3vw,86px);line-height:1;font-weight:300;letter-spacing:.035em}
.project-memory-tagline{margin:17px 0 58px;font-family:'Raleway',sans-serif;font-size:12px;font-weight:500;letter-spacing:.20em;text-transform:uppercase;color:rgba(255,255,255,.58)}
.project-memory-copy{display:grid;grid-template-columns:1fr 1fr;gap:25px clamp(45px,7vw,95px)}
.project-memory-copy p{margin:0;font-family:'Raleway',sans-serif;font-size:clamp(14px,1.02vw,16px);line-height:1.82;font-weight:300;color:rgba(255,255,255,.76)}
.project-memory-copy strong{font-weight:500;color:#fff}
.about-professional{color:rgba(255,255,255,.76)!important;font-weight:300!important}
@media(max-width:850px){.project-memory{padding:80px 0}.project-memory-inner{width:88vw}.project-memory-tagline{margin-bottom:42px}.project-memory-copy{grid-template-columns:1fr;gap:24px}}



/* --- Titres Prestations v33 --- */
.service-copy h2{
  max-width:760px !important;
  font-size:clamp(34px,4.35vw,62px) !important;
  line-height:1.05 !important;
  letter-spacing:.045em !important;
  text-wrap:balance;
}

@media (max-width:1100px){
  .service-copy h2{
    font-size:clamp(32px,4.7vw,50px) !important;
  }
}

@media (max-width:850px){
  .service-copy h2{
    max-width:100% !important;
    font-size:clamp(27px,7.2vw,37px) !important;
    line-height:1.08 !important;
    letter-spacing:.025em !important;
    white-space:normal !important;
    overflow-wrap:normal !important;
    word-break:normal !important;
  }
}

@media (max-width:420px){
  .service-copy h2{
    font-size:clamp(25px,6.9vw,31px) !important;
  }
}



/* --- Harmonisation titres + fonds v34 --- */

/* Même échelle typographique que les 3 sections Prestations */
.project-memory h2,
.portfolio-heading h2{
  max-width:760px !important;
  font-size:clamp(34px,4.35vw,62px) !important;
  line-height:1.05 !important;
  letter-spacing:.045em !important;
  text-wrap:balance;
}

/* Palette progressive : Événements -> Architecture -> Portraits -> Mémoire d'un projet */
.service-dark{
  background:
    linear-gradient(
      to bottom,
      #080808 0%,
      #080808 82%,
      #0d0d0d 90%,
      #131313 96%,
      #171717 100%
    ) !important;
}

.service-mid{
  background:
    linear-gradient(
      to bottom,
      #171717 0%,
      #171717 82%,
      #1d1d1d 90%,
      #232323 96%,
      #2a2a2a 100%
    ) !important;
}

.service-light{
  background:
    linear-gradient(
      to bottom,
      #2a2a2a 0%,
      #2a2a2a 82%,
      #303030 90%,
      #363636 96%,
      #3d3d3d 100%
    ) !important;
}

.project-memory{
  background:#3d3d3d !important;
  color:#fff;
}

/* Le passage vers le Portfolio clair reste progressif mais démarre
   seulement après Mémoire d'un projet. */
.portfolio-transition{
  height:210px !important;
  background:
    linear-gradient(
      to bottom,
      #3d3d3d 0%,
      #575552 28%,
      #8f8b84 58%,
      #d7d3cc 82%,
      #f4f2ee 100%
    ) !important;
}

@media (max-width:1100px){
  .project-memory h2,
  .portfolio-heading h2{
    font-size:clamp(32px,4.7vw,50px) !important;
  }
}

@media (max-width:850px){
  .project-memory h2,
  .portfolio-heading h2{
    max-width:100% !important;
    font-size:clamp(27px,7.2vw,37px) !important;
    line-height:1.08 !important;
    letter-spacing:.025em !important;
    white-space:normal !important;
  }

  .service-dark{
    background:
      linear-gradient(
        to bottom,
        #080808 0%,
        #080808 76%,
        #101010 90%,
        #171717 100%
      ) !important;
  }

  .service-mid{
    background:
      linear-gradient(
        to bottom,
        #171717 0%,
        #171717 76%,
        #202020 90%,
        #2a2a2a 100%
      ) !important;
  }

  .service-light{
    background:
      linear-gradient(
        to bottom,
        #2a2a2a 0%,
        #2a2a2a 76%,
        #343434 90%,
        #3d3d3d 100%
      ) !important;
  }

  .portfolio-transition{
    height:150px !important;
  }
}

@media (max-width:420px){
  .project-memory h2,
  .portfolio-heading h2{
    font-size:clamp(25px,6.9vw,31px) !important;
  }
}



/* --- Corrections transitions + Portfolio compact v35 --- */

/* Portraits -> Mémoire d'un projet : transition uniquement en bas de Portraits */
.service-light{
  background:
    linear-gradient(
      to bottom,
      #2a2a2a 0%,
      #2a2a2a 84%,
      #2d2d2d 90%,
      #303030 95%,
      #343434 100%
    ) !important;
}

/* Mémoire d'un projet : même teinte au départ que la fin de Portraits,
   puis transition vers le fond clair du Portfolio uniquement à la fin */
.project-memory{
  background:
    linear-gradient(
      to bottom,
      #343434 0%,
      #343434 82%,
      #5a5753 88%,
      #8a8680 93%,
      #c9c5be 97%,
      #f4f2ee 100%
    ) !important;
  color:#fff !important;
}

/* Le grand bloc de transition séparé n'est plus nécessaire */
.portfolio-transition{
  display:none !important;
}

/* Portfolio commence directement sur son fond clair */
.portfolio-section,
.portfolio-real{
  background:#f4f2ee !important;
}

/* --- Portfolio plus compact --- */
.portfolio-inner{
  width:min(1320px,90vw) !important;
}

.portfolio-masonry{
  column-count:4 !important;
  column-gap:10px !important;
}

.portfolio-photo{
  margin-bottom:10px !important;
}

.portfolio-photo img{
  width:100% !important;
  height:auto !important;
}

/* Cacher une partie du portfolio au chargement */
.portfolio-photo.portfolio-extra{
  display:none !important;
}

.portfolio-masonry.expanded .portfolio-photo.portfolio-extra{
  display:block !important;
}

.portfolio-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:34px;
}

.portfolio-more-btn{
  appearance:none;
  border:1px solid rgba(0,0,0,.28);
  background:transparent;
  color:#111;
  padding:12px 22px;
  font-family:'Raleway',sans-serif;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}

.portfolio-more-btn:hover{
  background:#111;
  color:#fff;
  border-color:#111;
}

@media (max-width:1100px){
  .portfolio-masonry{
    column-count:3 !important;
  }
}

@media (max-width:850px){
  .service-light{
    background:
      linear-gradient(
        to bottom,
        #2a2a2a 0%,
        #2a2a2a 80%,
        #2e2e2e 90%,
        #343434 100%
      ) !important;
  }

  .project-memory{
    background:
      linear-gradient(
        to bottom,
        #343434 0%,
        #343434 78%,
        #5f5b57 88%,
        #aaa59e 95%,
        #f4f2ee 100%
      ) !important;
  }

  .portfolio-masonry{
    column-count:2 !important;
    column-gap:7px !important;
  }

  .portfolio-photo{
    margin-bottom:7px !important;
  }

  .portfolio-more-btn{
    font-size:10px;
    padding:11px 18px;
  }
}



/* --- Galerie Mémoire d'un projet v36 --- */
.project-memory-gallery{
  margin-top:58px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.project-memory-shot{
  margin:0;
  aspect-ratio:4 / 3;
  overflow:hidden;
  background:#222;
}
.project-memory-shot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  transition:transform .5s ease, filter .4s ease;
}
.project-memory-shot:hover img{
  transform:scale(1.025);
  filter:brightness(.95);
}

@media(max-width:850px){
  .project-memory-gallery{
    margin-top:42px;
    grid-template-columns:1fr;
    gap:10px;
  }
  .project-memory-shot{
    aspect-ratio:4 / 3;
  }
}



/* --- Ajustements v37 --- */

/* Rapprocher Mémoire d'un projet de la section Portraits */
.project-memory{
  padding-top:72px !important;
}
.project-memory-inner{
  margin-top:0 !important;
}

/* S'assurer que le bouton Portfolio est bien visible */
.portfolio-more-wrap{
  display:flex !important;
  justify-content:center !important;
  margin-top:34px !important;
  margin-bottom:10px !important;
}

.portfolio-more-btn{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  appearance:none;
  border:1px solid rgba(0,0,0,.32) !important;
  background:transparent !important;
  color:#111 !important;
  padding:12px 24px !important;
  font-family:'Raleway',sans-serif;
  font-size:11px !important;
  font-weight:600 !important;
  letter-spacing:.16em !important;
  cursor:pointer;
  opacity:1 !important;
  visibility:visible !important;
}

.portfolio-more-btn:hover{
  background:#111 !important;
  color:#fff !important;
}

@media(max-width:850px){
  .project-memory{
    padding-top:58px !important;
  }
  .portfolio-more-btn{
    font-size:10px !important;
    padding:11px 18px !important;
  }
}



/* --- Corrections v38 --- */

/* Plus d'espace après les 3 photos de "Mémoire d'un projet"
   avant le début de la transition vers le Portfolio. */
.project-memory-gallery{
  margin-bottom:90px !important;
}

.project-memory{
  padding-bottom:120px !important;
}

/* Le filtrage doit toujours avoir priorité sur l'état "Voir plus". */
.portfolio-photo.is-hidden,
.portfolio-masonry.expanded .portfolio-photo.is-hidden,
.portfolio-photo.portfolio-extra.is-hidden,
.portfolio-masonry.expanded .portfolio-photo.portfolio-extra.is-hidden{
  display:none !important;
}

/* Les photos supplémentaires restent cachées tant que le portfolio
   n'est pas développé, sauf si elles sont déjà exclues par un filtre. */
.portfolio-photo.portfolio-extra{
  display:none !important;
}

.portfolio-masonry.expanded .portfolio-photo.portfolio-extra:not(.is-hidden){
  display:block !important;
}

@media(max-width:850px){
  .project-memory-gallery{
    margin-bottom:64px !important;
  }

  .project-memory{
    padding-bottom:90px !important;
  }
}



/* --- Ajustements v39 --- */

/* Mémoire d'un projet reste sur une seule ligne dans les 3 langues */
.project-memory h2{
  max-width:none !important;
  white-space:nowrap !important;
  font-size:clamp(30px,3.65vw,52px) !important;
  letter-spacing:.025em !important;
}

/* Le portfolio affiche un peu plus de contenu au départ afin que
   les quatre colonnes soient visuellement remplies. */
@media(max-width:850px){
  .project-memory h2{
    font-size:clamp(24px,6.2vw,34px) !important;
    letter-spacing:.01em !important;
  }
}

@media(max-width:520px){
  .project-memory h2{
    font-size:clamp(21px,5.5vw,28px) !important;
  }
}



.about-section-v28{background:linear-gradient(to bottom,#111 0%,#111 92%,#171717 96%,#242424 100%)!important}
.contact-v40{background:#242424;color:#fff;padding:110px 0 100px}.contact-v40-inner{width:min(1160px,88vw);margin:auto}.contact-v40-heading{max-width:820px;margin-bottom:65px}.contact-v40-kicker{margin:0 0 15px;font:600 10px Raleway,sans-serif;letter-spacing:.3em;color:rgba(255,255,255,.48)}.contact-v40 h2{margin:0;font:300 clamp(34px,4.35vw,62px)/1.05 Raleway,sans-serif;letter-spacing:.045em}.contact-v40-intro{max-width:720px;margin-top:34px}.contact-v40-intro p{margin:0;font:300 clamp(14px,1.02vw,16px)/1.82 Raleway,sans-serif;color:rgba(255,255,255,.74)}.contact-v40-intro p+p{margin-top:20px}
.contact-v40-form{display:grid;grid-template-columns:1fr 1fr;gap:30px 42px}.contact-v40-form label,.contact-date-block{display:flex;flex-direction:column;gap:10px;font-family:Raleway,sans-serif}.contact-v40-form label>span:first-child,.contact-date-field>span{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.56)}
.contact-v40-form input[type=text],.contact-v40-form input[type=email],.contact-v40-form select,.contact-v40-form textarea{width:100%;box-sizing:border-box;border:0;border-bottom:1px solid rgba(255,255,255,.28);border-radius:0;outline:0;background:transparent;color:#fff;padding:10px 0 13px;font:300 14px Raleway,sans-serif}.contact-v40-form select option{color:#111;background:#fff}.contact-v40-form input:focus,.contact-v40-form select:focus,.contact-v40-form textarea:focus{border-bottom-color:#fff}.contact-v40-form input:disabled{opacity:.28}
.contact-date-block{gap:14px}.contact-agree{flex-direction:row!important;align-items:center;align-self:flex-start;gap:9px!important;cursor:pointer}.contact-agree input{position:absolute;opacity:0}.contact-agree i{width:14px;height:14px;border:1px solid rgba(255,255,255,.48);display:flex;align-items:center;justify-content:center}.contact-agree input:checked+i:after{content:"";width:6px;height:6px;background:#fff}.contact-agree span{font-size:12px!important;font-weight:400!important;letter-spacing:.04em!important;text-transform:none!important;color:rgba(255,255,255,.78)!important}
.contact-message{grid-column:1/-1}.contact-v40-form textarea{resize:vertical;min-height:125px}.contact-v40-form input::placeholder,.contact-v40-form textarea::placeholder{color:rgba(255,255,255,.28)}.contact-submit{grid-column:1/-1;justify-self:start;margin-top:10px;border:1px solid rgba(255,255,255,.55);background:transparent;color:#fff;padding:14px 23px;font:600 10px Raleway,sans-serif;letter-spacing:.16em;cursor:pointer}.contact-submit:hover{background:#fff;color:#171717}
.contact-socials{margin-top:75px;padding-top:30px;border-top:1px solid rgba(255,255,255,.13);display:flex;justify-content:space-between;gap:25px;font-family:Raleway,sans-serif}.contact-socials>span{font-size:9px;font-weight:600;letter-spacing:.2em;color:rgba(255,255,255,.38)}.contact-socials div{display:flex;gap:28px}.contact-socials a{color:rgba(255,255,255,.76);text-decoration:none;font-size:11px;font-weight:500;letter-spacing:.1em}.contact-socials a:hover{color:#fff}
@media(max-width:850px){.contact-v40{padding:82px 0 90px}.contact-v40-inner{width:88vw}.contact-v40-heading{margin-bottom:50px}.contact-v40 h2{font-size:clamp(27px,7.2vw,37px)}.contact-v40-form{grid-template-columns:1fr;gap:28px}.contact-message,.contact-submit{grid-column:auto}.contact-socials{margin-top:60px;flex-direction:column}.about-section-v28{background:linear-gradient(to bottom,#111 0%,#111 94%,#191919 98%,#242424 100%)!important}}



/* --- Lisibilité formulaire + réseaux + footer v41 --- */

/* Formulaire plus lisible */
.contact-v40-form label > span:first-child,
.contact-date-field > span,
.contact-agree span{
  font-size:12px !important;
}

.contact-v40-form input[type=text],
.contact-v40-form input[type=email],
.contact-v40-form select,
.contact-v40-form textarea{
  font-size:15.5px !important;
  line-height:1.55 !important;
}

.contact-v40-form input::placeholder,
.contact-v40-form textarea::placeholder{
  font-size:14px !important;
}

.contact-submit{
  font-size:11px !important;
}

/* Icônes sociales */
.contact-social-links{
  display:flex !important;
  align-items:center;
  gap:22px !important;
}

.social-icon-link{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.62) !important;
  transition:color .22s ease, transform .22s ease;
}

.social-icon-link:hover{
  color:rgba(255,255,255,.95) !important;
  transform:translateY(-1px);
}

.social-icon-link svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Pied de page */
.site-footer-v41{
  background:#171717;
  color:#fff;
  border-top:1px solid rgba(255,255,255,.08);
  padding:38px 0 34px;
}

.site-footer-v41-inner{
  width:min(1160px,88vw);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
}

.footer-brand-v41{
  display:flex;
  align-items:center;
  gap:14px;
  flex:0 0 auto;
}

.footer-brand-v41 img{
  width:52px;
  height:52px;
  object-fit:contain;
  display:block;
}

.footer-brand-text-v41{
  display:flex;
  flex-direction:column;
  gap:3px;
  font-family:'Raleway',sans-serif;
}

.footer-brand-text-v41 strong{
  font-size:14px;
  font-weight:500;
  letter-spacing:.06em;
}

.footer-brand-text-v41 span{
  font-size:9px;
  font-weight:500;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(255,255,255,.52);
}

.footer-rights-v41{
  margin:0;
  max-width:700px;
  text-align:right;
  font-family:'Raleway',sans-serif;
  font-size:10px;
  line-height:1.65;
  font-weight:300;
  color:rgba(255,255,255,.48);
}

@media(max-width:850px){
  .contact-v40-form label > span:first-child,
  .contact-date-field > span,
  .contact-agree span{
    font-size:11.5px !important;
  }

  .contact-v40-form input[type=text],
  .contact-v40-form input[type=email],
  .contact-v40-form select,
  .contact-v40-form textarea{
    font-size:15px !important;
  }

  .site-footer-v41{
    padding:34px 0 30px;
  }

  .site-footer-v41-inner{
    width:88vw;
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
  }

  .footer-rights-v41{
    max-width:none;
    text-align:left;
    font-size:9.5px;
  }
}



/* --- Ajustements fin de site v42 --- */

/* Contact et zone réseaux deviennent un seul bloc anthracite continu.
   Suppression de la ligne qui donnait l'impression d'une bande séparée. */
.contact-socials{
  border-top:0 !important;
  padding-top:0 !important;
  margin-top:70px !important;
}

/* Logos Instagram / LinkedIn plus présents */
.social-icon-link{
  width:36px !important;
  height:36px !important;
}
.social-icon-link svg{
  width:31px !important;
  height:31px !important;
}

/* Dernière bande entièrement noire pour intégrer le fond noir du logo */
.site-footer-v41{
  background:#000 !important;
  border-top:0 !important;
  padding-top:42px !important;
  padding-bottom:38px !important;
}

/* Le logo se fond naturellement dans le noir du footer */
.footer-brand-v41 img{
  background:#000 !important;
}

@media(max-width:850px){
  .contact-socials{
    margin-top:58px !important;
  }
  .social-icon-link{
    width:34px !important;
    height:34px !important;
  }
  .social-icon-link svg{
    width:29px !important;
    height:29px !important;
  }
  .site-footer-v41{
    padding-top:36px !important;
    padding-bottom:32px !important;
  }
}



/* Version 42 - logo de pied de page agrandi */
.footer-brand-v41 img{
  width:82px !important;
  height:82px !important;
  object-fit:contain !important;
}
@media(max-width:850px){
  .footer-brand-v41 img{
    width:72px !important;
    height:72px !important;
  }
}



/* Version 43 - finition contact et pied de page */
.contact-social-links{gap:28px !important;}
.social-icon-link{width:48px !important;height:48px !important;padding:0 !important;overflow:visible !important;}
.social-icon-link img{display:block;width:44px !important;height:44px !important;object-fit:contain;opacity:.82;transition:opacity .22s ease,transform .22s ease;}
.social-icon-link:hover img{opacity:1;transform:translateY(-1px);}
.site-footer-v41{background:#000 !important;border:0 !important;margin:0 !important;padding:44px 0 40px !important;}
.site-footer-v41-inner{width:min(1380px,94vw) !important;max-width:none !important;gap:30px !important;}
.footer-brand-v41 img{width:96px !important;height:96px !important;background:#000 !important;}
.footer-rights-v41{max-width:none !important;white-space:nowrap !important;font-size:12px !important;line-height:1.45 !important;}
@media(max-width:1100px){.footer-rights-v41{white-space:normal !important;}}
@media(max-width:850px){
 .social-icon-link{width:44px !important;height:44px !important;}
 .social-icon-link img{width:40px !important;height:40px !important;}
 .footer-brand-v41 img{width:82px !important;height:82px !important;}
 .footer-rights-v41{font-size:10.5px !important;white-space:normal !important;}
}



/* Réseaux sociaux : même taille d'icônes que la v43, seulement regroupés visuellement */
.contact-socials{
  justify-content:flex-start !important;
  align-items:center !important;
  gap:18px !important;
}
.contact-socials > span{
  margin:0 !important;
  flex:0 0 auto;
}
.contact-social-links{
  margin:0 !important;
}

/* Bouton fixe de retour en haut */
.back-to-top-v44{
  position:fixed;
  right:24px;
  bottom:26px;
  width:46px;
  height:46px;
  box-sizing:border-box;
  border:1px solid rgba(255,255,255,.34);
  background:rgba(0,0,0,.78);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  cursor:pointer;
  z-index:10000;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .22s ease, visibility .22s ease, transform .22s ease, background .22s ease;
}
.back-to-top-v44.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.back-to-top-v44:hover{
  background:#000;
}
.back-to-top-v44 svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

@media(max-width:850px){
  .contact-socials{
    flex-direction:row !important;
    align-items:center !important;
    gap:14px !important;
  }
  .back-to-top-v44{
    right:14px;
    bottom:16px;
    width:42px;
    height:42px;
  }
}



.social-icon-link{
  width:48px !important;
  height:48px !important;
  padding:0 !important;
  flex:0 0 48px !important;
  overflow:visible !important;
}
.social-icon-link img{
  width:44px !important;
  height:44px !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:contain !important;
}
@media(max-width:850px){
  .social-icon-link{
    width:44px !important;
    height:44px !important;
    flex-basis:44px !important;
  }
  .social-icon-link img{
    width:40px !important;
    height:40px !important;
  }
}



/* Instagram a davantage de marge interne dans son fichier PNG :
   on agrandit uniquement son image pour égaliser sa taille visuelle avec LinkedIn. */
.social-icon-link[aria-label="Instagram"] img{
  width:54px !important;
  height:54px !important;
  max-width:none !important;
  max-height:none !important;
}
@media(max-width:850px){
  .social-icon-link[aria-label="Instagram"] img{
    width:49px !important;
    height:49px !important;
  }
}



/* Pied de page noir plus compact */
.site-footer-v41{
  padding-top:26px !important;
  padding-bottom:24px !important;
}

/* "Retrouvez-moi aussi sur" plus lisible */
.contact-socials > span{
  font-size:11.5px !important;
  line-height:1.4 !important;
  letter-spacing:.16em !important;
  color:rgba(255,255,255,.58) !important;
}

@media(max-width:850px){
  .site-footer-v41{
    padding-top:24px !important;
    padding-bottom:22px !important;
  }
  .contact-socials > span{
    font-size:11px !important;
  }
}



/* Mobile : bande noire permanente derrière le logo et le menu */
@media(max-width:850px){
  .site-header{
    background:#000 !important;
  }

  .site-header.scrolled{
    background:#000 !important;
  }
}



/* Le filtre Portfolio a toujours priorité, sur ordinateur comme sur téléphone */
.portfolio-photo.is-hidden,
.portfolio-masonry.expanded .portfolio-photo.is-hidden{
  display:none !important;
}

/* Instagram légèrement plus grand visuellement, LinkedIn inchangé */
.social-icon-link[aria-label="Instagram"] img{
  width:60px !important;
  height:60px !important;
  max-width:none !important;
  max-height:none !important;
}
@media(max-width:850px){
  .social-icon-link[aria-label="Instagram"] img{
    width:55px !important;
    height:55px !important;
  }
}



/* Les commandes du portfolio restent au-dessus de toute galerie sur écran tactile. */
.portfolio-filters,
.portfolio-more-wrap,
.portfolio-filter,
.portfolio-more-btn{
  position:relative;
  z-index:30;
  pointer-events:auto !important;
  touch-action:manipulation;
}

/* Instagram encore légèrement agrandi, LinkedIn reste inchangé. */
.social-icon-link[aria-label="Instagram"] img{
  width:66px !important;
  height:66px !important;
  max-width:none !important;
  max-height:none !important;
}
@media(max-width:850px){
  .social-icon-link[aria-label="Instagram"] img{
    width:61px !important;
    height:61px !important;
  }
}



/* Contrôles suffisamment grands pour le tactile */
@media(max-width:850px){
  .portfolio-filter{
    min-height:34px !important;
    padding:8px 2px !important;
  }

  .portfolio-more-btn{
    min-height:42px !important;
    padding:12px 22px !important;
  }

  .portfolio-filters,
  .portfolio-more-wrap{
    position:relative !important;
    z-index:100 !important;
  }
}

/* Instagram encore un peu plus grand visuellement */
.social-icon-link[aria-label="Instagram"] img{
  width:72px !important;
  height:72px !important;
  max-width:none !important;
  max-height:none !important;
}
@media(max-width:850px){
  .social-icon-link[aria-label="Instagram"] img{
    width:67px !important;
    height:67px !important;
  }
}



/* === Portfolio v50 : version propre === */
.portfolio-v50 .portfolio-masonry{
  column-count:4 !important;
  column-gap:10px !important;
}

.portfolio-v50 .portfolio-photo{
  display:block !important;
  width:100% !important;
  margin:0 0 10px !important;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  break-inside:avoid !important;
  overflow:hidden !important;
  cursor:zoom-in;
}

.portfolio-v50 .portfolio-photo img{
  display:block !important;
  width:100% !important;
  height:auto !important;
}

.portfolio-v50 .portfolio-photo[hidden]{
  display:none !important;
}

.portfolio-v50 .portfolio-more-wrap{
  display:flex;
  justify-content:center;
  margin-top:34px;
}

.portfolio-v50 .portfolio-more-btn{
  touch-action:manipulation;
}

@media(max-width:1100px) and (min-width:851px){
  .portfolio-v50 .portfolio-masonry{
    column-count:3 !important;
  }
}

@media(max-width:850px){
  /* Mobile : vraie grille 2 colonnes, aucun multicolumn. */
  .portfolio-v50 .portfolio-masonry{
    column-count:initial !important;
    columns:initial !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:7px !important;
    align-items:start !important;
  }

  .portfolio-v50 .portfolio-photo{
    margin:0 !important;
    width:100% !important;
    break-inside:auto !important;
  }

  .portfolio-v50 .portfolio-photo img{
    width:100% !important;
    height:auto !important;
  }

  .portfolio-v50 .portfolio-filters{
    position:relative !important;
    z-index:20 !important;
  }

  .portfolio-v50 .portfolio-filter{
    min-height:34px !important;
    padding:8px 2px !important;
    touch-action:manipulation !important;
    pointer-events:auto !important;
  }

  .portfolio-v50 .portfolio-more-wrap,
  .portfolio-v50 .portfolio-more-btn{
    position:relative !important;
    z-index:20 !important;
    pointer-events:auto !important;
    touch-action:manipulation !important;
  }

  .portfolio-v50 .portfolio-more-btn{
    min-height:42px !important;
    padding:12px 22px !important;
  }
}



.mobile-portfolio-state,
.mobile-portfolio-filters,
.mobile-portfolio-more{display:none}

@media(max-width:850px){
  /* Desktop controls are disabled on mobile; native controls take over. */
  .desktop-portfolio-filters,
  .desktop-portfolio-more{display:none !important}

  .mobile-portfolio-state{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
  }

  .mobile-portfolio-filters{
    display:flex !important;
    flex-wrap:wrap;
    justify-content:center;
    gap:6px 16px;
    margin:0 0 26px;
    position:relative;
    z-index:50;
  }
  .mobile-portfolio-filters label{
    position:relative;
    padding:8px 1px;
    font-family:'Raleway',sans-serif;
    font-size:10px;
    font-weight:500;
    letter-spacing:.12em;
    color:#777;
    cursor:pointer;
    touch-action:manipulation;
  }
  .mobile-portfolio-filters label:after{
    content:"";
    position:absolute;
    left:1px;
    right:100%;
    bottom:4px;
    height:1px;
    background:#111;
    transition:right .2s ease;
  }

  #mp-all:checked ~ .mobile-portfolio-filters label[for="mp-all"],
  #mp-events:checked ~ .mobile-portfolio-filters label[for="mp-events"],
  #mp-architecture:checked ~ .mobile-portfolio-filters label[for="mp-architecture"],
  #mp-portraits:checked ~ .mobile-portfolio-filters label[for="mp-portraits"],
  #mp-landscapes:checked ~ .mobile-portfolio-filters label[for="mp-landscapes"]{color:#111}

  #mp-all:checked ~ .mobile-portfolio-filters label[for="mp-all"]:after,
  #mp-events:checked ~ .mobile-portfolio-filters label[for="mp-events"]:after,
  #mp-architecture:checked ~ .mobile-portfolio-filters label[for="mp-architecture"]:after,
  #mp-portraits:checked ~ .mobile-portfolio-filters label[for="mp-portraits"]:after,
  #mp-landscapes:checked ~ .mobile-portfolio-filters label[for="mp-landscapes"]:after{right:1px}

  /* Real mobile masonry: each photo keeps its natural height, no grid-row holes. */
  .portfolio-v50 .portfolio-masonry{
    display:block !important;
    column-count:2 !important;
    -webkit-column-count:2 !important;
    column-gap:7px !important;
    -webkit-column-gap:7px !important;
  }
  .portfolio-v50 .portfolio-photo,
  .portfolio-v50 .portfolio-photo[hidden]{
    display:inline-block !important;
    width:100% !important;
    margin:0 0 7px !important;
    break-inside:avoid !important;
    -webkit-column-break-inside:avoid !important;
    vertical-align:top !important;
  }

  /* Filtering is 100% CSS/native on Safari. */
  #mp-events:checked ~ .portfolio-masonry .portfolio-photo:not([data-category="evenements"]),
  #mp-architecture:checked ~ .portfolio-masonry .portfolio-photo:not([data-category="architecture"]),
  #mp-portraits:checked ~ .portfolio-masonry .portfolio-photo:not([data-category="portraits"]),
  #mp-landscapes:checked ~ .portfolio-masonry .portfolio-photo:not([data-category="paysages"]){display:none !important}

  /* In ALL, only the first 16 show until the native checkbox is activated. */
  #mp-all:checked ~ #mp-more:not(:checked) ~ .portfolio-masonry .mobile-extra{display:none !important}

  /* In a category, show every matching photo (all categories currently have <=16). */
  #mp-events:checked ~ .portfolio-masonry .portfolio-photo[data-category="evenements"],
  #mp-architecture:checked ~ .portfolio-masonry .portfolio-photo[data-category="architecture"],
  #mp-portraits:checked ~ .portfolio-masonry .portfolio-photo[data-category="portraits"],
  #mp-landscapes:checked ~ .portfolio-masonry .portfolio-photo[data-category="paysages"]{display:inline-block !important}

  .mobile-portfolio-more{
    display:none;
    justify-content:center;
    margin-top:30px;
  }
  #mp-all:checked ~ .mobile-portfolio-more{display:flex !important}

  .mobile-more-label{
    border:1px solid rgba(0,0,0,.32);
    padding:12px 22px;
    font-family:'Raleway',sans-serif;
    font-size:10px;
    font-weight:600;
    letter-spacing:.16em;
    color:#111;
    cursor:pointer;
    touch-action:manipulation;
  }
  #mp-more:not(:checked) ~ .mobile-portfolio-more .less,
  #mp-more:checked ~ .mobile-portfolio-more .more{display:none !important}

  /* Language spans need no JS. */
  .mobile-portfolio-filters .en,
  .mobile-portfolio-filters .pt,
  .mobile-portfolio-more .en,
  .mobile-portfolio-more .pt{display:none}
  html[lang="en"] .mobile-portfolio-filters .fr,
  html[lang="en"] .mobile-portfolio-filters .pt,
  html[lang="en"] .mobile-portfolio-more .fr,
  html[lang="en"] .mobile-portfolio-more .pt{display:none !important}
  html[lang="en"] .mobile-portfolio-filters .en,
  html[lang="en"] .mobile-portfolio-more .en{display:inline !important}
  html[lang="pt"] .mobile-portfolio-filters .fr,
  html[lang="pt"] .mobile-portfolio-filters .en,
  html[lang="pt"] .mobile-portfolio-more .fr,
  html[lang="pt"] .mobile-portfolio-more .en{display:none !important}
  html[lang="pt"] .mobile-portfolio-filters .pt,
  html[lang="pt"] .mobile-portfolio-more .pt{display:inline !important}
}

/* Production fix: social logos on transparent background */
.social-icon-link img{
  background:transparent !important;
  mix-blend-mode:normal !important;
}

/* Ajustement final Instagram après suppression du fond damier */
.social-icon-link[aria-label="Instagram"] img{
  width:50px !important;
  height:50px !important;
}
@media(max-width:850px){
  .social-icon-link[aria-label="Instagram"] img{
    width:47px !important;
    height:47px !important;
  }
}