@font-face{ font-family:'Swiss721'; src:url('assets/fonts/SWISS_721_THIN.OTF') format('opentype'); font-weight:100; font-style:normal; font-display:swap; }
@font-face{ font-family:'Swiss721'; src:url('assets/fonts/SWISS_721_LIGHT.OTF') format('opentype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Swiss721'; src:url('assets/fonts/SWISS_721_LIGHT_ITALIC.OTF') format('opentype'); font-weight:300; font-style:italic; font-display:swap; }
@font-face{ font-family:'Swiss721'; src:url('assets/fonts/SWISS_721_REGULAR_EXTENDED.OTF') format('opentype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Swiss721'; src:url('assets/fonts/SWISS_721_MEDIUM.OTF') format('opentype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Swiss721'; src:url('assets/fonts/SWISS_721_MEDIUM_ITALIC.OTF') format('opentype'); font-weight:500; font-style:italic; font-display:swap; }
@font-face{ font-family:'Swiss721'; src:url('assets/fonts/SWISS_721_BOLD.OTF') format('opentype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Swiss721'; src:url('assets/fonts/SWISS_721_BLACK.OTF') format('opentype'); font-weight:900; font-style:normal; font-display:swap; }

:root{
  --bg:#FFFFFF; --ink:#111110; --stone:#6E6E66; --line:#E4E4E0; --panel:#F4F4F2;
  --accent:#D5FF92; --accent-ink:#111110; --maxw:none; --pad:clamp(20px,6vw,64px);
  /* Échelle typographique (calée sur la page Projets) */
  --t-label:.75rem; --t-h1:clamp(2.2rem,6vw,4.5rem); --t-h2:clamp(1.5rem,3.2vw,2.6rem); --t-h3:clamp(1.25rem,2.2vw,1.9rem);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){ --bg:#111110; --ink:#F3F3EE; --stone:#9B9B90; --line:#2C2C28; --panel:#1B1B18; }
}
:root[data-theme="dark"]{ --bg:#111110; --ink:#F3F3EE; --stone:#9B9B90; --line:#2C2C28; --panel:#1B1B18; }
*{box-sizing:border-box;}
html{ background:#9C9C8E; }
.page-wrap{ background:var(--bg); min-height:100vh; transform-origin:center;
  transition:transform .75s cubic-bezier(.22,1,.36,1), opacity .75s cubic-bezier(.22,1,.36,1), filter .75s cubic-bezier(.22,1,.36,1); }
.page-wrap.page-recede{ transform:scale(.97); opacity:.55; filter:saturate(.85); }

/* --- Transition entre pages : la page suivante arrive en petit depuis la droite,
     par-dessus l'actuelle qui recule légèrement, puis grandit plein écran. --- */
#navOverlay{ position:fixed; inset:0; z-index:9999; pointer-events:none; transform-origin:center;
  transform:translateX(45%) scale(.62); border-radius:26px; overflow:hidden; background:var(--bg); opacity:0;
  box-shadow:0 20px 70px rgba(0,0,0,.16);
  transition:transform .75s cubic-bezier(.22,1,.36,1), border-radius .75s cubic-bezier(.22,1,.36,1), opacity .6s ease; }
#navOverlay.active{ transform:translateX(0) scale(1); border-radius:0; opacity:1; }
#navOverlay iframe{ width:100%; height:100%; border:none; display:block; }
body{
  margin:0; background:#9C9C8E; color:var(--ink);
  font-family:'Poppins', 'Swiss721', 'Helvetica Neue', Arial, sans-serif;
  font-weight:300;
  font-size:1rem; line-height:1.4; -webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
a{color:inherit;} img{max-width:100%; display:block;}
::selection{ background:var(--accent); color:var(--accent-ink); }
.char{ font-family:'Poppins', sans-serif; font-style:italic; font-weight:500; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.caps{ text-transform:uppercase; letter-spacing:.12em; font-size:.72rem; font-weight:500; color:var(--stone); }

header{ position:sticky; top:0; z-index:50; border-bottom:1px solid var(--line); padding-top:env(safe-area-inset-top,0px); }
/* Le flou est porté par un pseudo-élément : un backdrop-filter sur le header lui-même enfermerait le menu mobile (position:fixed) dans la barre du haut. */
header::before{ content:""; position:absolute; inset:0; z-index:-1; background:color-mix(in srgb, var(--bg) 85%, transparent); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
nav.wrap{ display:flex; align-items:center; justify-content:space-between; height:88px; }
.nav-right{ display:flex; align-items:center; gap:2.6rem; }
.logo{ text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; font-weight:600; text-decoration:none; }
.navlinks{ display:flex; gap:2.6rem; list-style:none; margin:0; padding:0; }
.navlinks a{ text-transform:uppercase; letter-spacing:.1em; font-size:.72rem; font-weight:400; text-decoration:none; position:relative; padding:.2rem 0; }
.navlinks a::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:var(--accent);
  transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
.navlinks a:hover::after, .navlinks a.active::after{ transform:scaleX(1); }
.burger{ display:none; background:none; border:1px solid var(--line); border-radius:6px; width:40px; height:40px; cursor:pointer; }
.burger span{ display:block; width:16px; height:1px; background:var(--ink); margin:4px auto; }
.mobilemenu{ display:none; }
@media (max-width:760px){
  .navlinks{ display:none; } .burger{ display:block; }
  .mobilemenu.open{ display:flex; flex-direction:column; position:fixed; inset:calc(88px + env(safe-area-inset-top,0px)) 0 0 0; overflow-y:auto; background:var(--bg); padding:1rem var(--pad); z-index:49; }
  .mobilemenu a{ padding:1.3rem 0; border-bottom:1px solid var(--line); text-decoration:none; font-size:1.4rem; text-transform:uppercase; letter-spacing:.03em; }
}

section{ padding:9rem 0; border-bottom:1px solid var(--line); }
section:last-of-type{ border-bottom:none; }
h1,h2{ font-weight:300; letter-spacing:-0.02em; margin:0; }
h1{ font-size:clamp(2.6rem,8.2vw,7.2rem); line-height:.95; max-width:17ch; }
h2{ font-size:var(--t-h2); font-weight:300; }
.hero-lede{ max-width:38ch; color:var(--stone); font-size:1.2rem; line-height:1.55; margin-top:2.6rem; font-weight:300; }
.section-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; margin-bottom:4rem; flex-wrap:wrap; }

.preview-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
@media (max-width:760px){ .preview-grid{ grid-template-columns:1fr 1fr; } }
.preview-item{ text-decoration:none; }
.preview-thumb{ aspect-ratio:3/4; background:linear-gradient(155deg,var(--panel),var(--line)); border:1px solid var(--line); overflow:hidden; position:relative; }
.preview-thumb span{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--stone); font-size:.75rem; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.preview-item:hover .preview-thumb span{ transform:scale(1.08); }
.preview-name{ margin-top:1rem; font-size:.95rem; letter-spacing:-0.01em; }

.services{ list-style:none; margin:0; padding:0; }
.services li{ display:flex; align-items:baseline; gap:2rem; border-top:1px solid var(--line); padding:2.2rem 0; }
.services li:last-child{ border-bottom:1px solid var(--line); }
.services .num{ color:var(--stone); font-size:.85rem; width:2.5rem; flex-shrink:0; }
.services .name{ flex:1; font-size:clamp(1.4rem,3vw,2rem); font-weight:300; letter-spacing:-0.01em; }
.services .desc{ color:var(--stone); font-size:.95rem; max-width:30ch; text-align:right; }
@media (max-width:700px){ .services li{ flex-wrap:wrap; } .services .desc{ text-align:left; width:100%; margin-top:.4rem; } }

.client-row{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); }
.client-cell{ background:var(--bg); display:flex; align-items:center; justify-content:center; padding:2.6rem 1rem; font-weight:500; color:var(--stone); filter:grayscale(1); opacity:.7; transition:.2s; font-size:1.05rem; }
.client-cell:hover{ opacity:1; color:var(--ink); }

/* --- Galerie travaux : liste + aperçu flottant qui suit le curseur avec inertie --- */
.work-list{ list-style:none; margin:0; padding:0; }
.work-row{ border-top:1px solid var(--line); }
.work-row:last-child{ border-bottom:1px solid var(--line); }
.work-row a{ display:flex; align-items:baseline; justify-content:space-between; gap:1.5rem; padding:2.4rem 0; text-decoration:none;
  transition:padding-left .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease; }
.work-list:hover .work-row a{ opacity:.4; }
.work-row a:hover{ padding-left:1.6rem; opacity:1 !important; }
.work-row .wnum{ font-size:.8rem; color:var(--stone); width:2.5rem; }
.work-row .wname{ font-size:clamp(1.8rem,5.5vw,3.6rem); flex:1; font-weight:300; letter-spacing:-0.02em; }
.work-row .wtype{ font-size:.78rem; color:var(--stone); text-transform:uppercase; letter-spacing:.1em; }
.cursor-preview{
  position:fixed; top:0; left:0; width:320px; aspect-ratio:4/5; pointer-events:none; z-index:60;
  background:var(--panel); border:1px solid var(--line); opacity:0; transform:translate(-50%,-50%) scale(.85);
  transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.2,1); display:flex; align-items:flex-end; justify-content:flex-start;
  font-size:.72rem; color:var(--stone); overflow:hidden; text-transform:uppercase; letter-spacing:.08em; padding:1rem;
}
.cursor-preview.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }
@media (pointer:coarse){ .cursor-preview{ display:none !important; } .work-row .row-thumb{ display:block !important; } }
.work-row .row-thumb{ display:none; width:100%; aspect-ratio:16/9; background:linear-gradient(155deg,var(--panel),var(--line)); border:1px solid var(--line); margin:0 0 .6rem; align-items:center; justify-content:center; color:var(--stone); font-size:.78rem; }

.about-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:4.5rem; align-items:start; }
@media (max-width:800px){ .about-grid{ grid-template-columns:1fr; } }
.about-name{ font-size:clamp(2.4rem,7vw,5rem); font-weight:400; text-transform:uppercase; letter-spacing:-0.02em; margin:0; }
.enzo-name{ display:block; font-size:clamp(3.2rem,13vw,9rem); font-weight:700; line-height:.85; letter-spacing:-0.02em; margin:0; }
.enzo-name sup{ font-size:.3em; font-weight:400; margin-left:.1em; }
.about-photo-row{ display:flex; justify-content:center; }
.about-photo{ aspect-ratio:3/4; width:min(420px,60vw); background:linear-gradient(155deg,var(--panel),var(--line)); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; color:var(--stone); font-size:.85rem; }
.about-liam-text{ display:grid; grid-template-columns:1fr 2fr 2fr; gap:2.4rem; padding-top:2.2rem; border-top:1px solid var(--line); align-items:start; margin-bottom:2.6rem; }
.about-liam-text p{ font-size:1rem; line-height:1.6; color:var(--stone); font-weight:300; margin:0; }
@media (max-width:800px){ .about-liam-text{ grid-template-columns:1fr; gap:1.2rem; } }
.facts{ list-style:none; padding:0; margin:2.4rem 0 0; display:grid; gap:1rem; }
.facts li{ display:flex; justify-content:space-between; border-top:1px solid var(--line); padding-top:1rem; font-size:.95rem; }
.facts span:first-child{ color:var(--stone); }

.contact-grid{ display:grid; grid-template-columns:1fr 1.15fr; gap:4.5rem; }
@media (max-width:800px){ .contact-grid{ grid-template-columns:1fr; } }
.contact-info p{ color:var(--stone); line-height:1.6; max-width:34ch; font-size:1.1rem; }
.contact-info a.mail{ font-size:1.6rem; font-weight:300; display:inline-block; margin-top:1.2rem; text-decoration:none; border-bottom:2px solid var(--accent); }
.field{ margin-bottom:1.5rem; }
label{ display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; color:var(--stone); margin-bottom:.5rem; }
input, select, textarea{ width:100%; background:transparent; border:none; border-bottom:1px solid var(--line); padding:.7rem 0; font:inherit; color:var(--ink); outline:none; transition:border-color .2s ease; font-size:1.05rem; }
input:focus, select:focus, textarea:focus{ border-color:var(--accent); }
textarea{ resize:vertical; min-height:110px; }
.honey{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
button.submit{ margin-top:.8rem; background:var(--ink); color:var(--bg); border:none; border-radius:100px; padding:1rem 2rem; font:inherit; cursor:pointer; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; transition:background .2s ease, color .2s ease; }
button.submit:hover{ background:var(--accent); color:var(--accent-ink); }
.form-note, .form-status{ font-size:.8rem; color:var(--stone); margin-top:1.2rem; }
.form-status{ display:none; } .form-status.show{ display:block; }

footer{ padding:4rem 0; }
.foot-row{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1.5rem; align-items:center; font-size:.78rem; color:var(--stone); text-transform:uppercase; letter-spacing:.06em; }
.foot-row a{ text-decoration:none; }
.foot-links{ display:flex; gap:1.6rem; list-style:none; padding:0; margin:0; }
.themebtn{ border:1px solid var(--line); background:none; color:var(--ink); border-radius:100px; width:36px; height:36px; cursor:pointer; }

/* --- Logo "studionze" (SVG inline, s'adapte au thème via currentColor) --- */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.logo-mark{ text-decoration:none; color:var(--ink); display:inline-flex; }
.logo-svg text{ fill:currentColor; }
.logo-mark.small .logo-svg{ height:22px; width:auto; display:block; }
.logo-mark.big .logo-svg{ height:clamp(56px,9.5vw,128px); width:auto; display:block; }

/* --- Hero home façon Katerina --- */
#accueil.hero-lines{ padding-top:2.2rem; padding-bottom:3rem; }
.hero-lines{ background-image:repeating-linear-gradient(90deg, var(--line) 0, var(--line) 1px, transparent 1px, transparent calc(var(--pad) + 4vw)); }
.hero-top{ padding-top:1.5rem; }
.hero-grid{ display:grid; grid-template-columns:1.35fr 1fr; gap:3rem; align-items:end; margin-top:2rem; }
@media (max-width:800px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-intro p{ max-width:32ch; color:var(--stone); font-size:1.05rem; line-height:1.55; margin-top:.9rem; }
.hero-photo{ aspect-ratio:16/10; background:var(--panel); border:1px solid var(--line); position:relative; }
.hero-count{ position:absolute; top:-2.4rem; right:0; font-size:.78rem; color:var(--stone); display:flex; align-items:center; gap:.5rem; }
.scroll-tag{ display:flex; align-items:center; gap:.6rem; margin-top:2rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.1em; color:var(--stone); }
.scroll-tag .arrow{ display:inline-block; animation:bob 1.6s ease-in-out infinite; }
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

/* --- Page Travaux : filtres + grille numérotée + vue liste --- */
.filters{ display:flex; flex-wrap:wrap; gap:1.6rem; align-items:center; padding-bottom:2.5rem; border-bottom:1px solid var(--line); margin-bottom:3rem; }
.filters select{ border:1px solid var(--line); border-bottom:1px solid var(--line); padding:.5rem .9rem; border-radius:100px; font-size:.8rem; text-transform:uppercase; letter-spacing:.05em; width:auto; }
.view-toggle{ margin-left:auto; display:flex; gap:1.2rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; }
.view-toggle button{ background:none; border:none; color:var(--stone); cursor:pointer; font:inherit; text-transform:inherit; letter-spacing:inherit; padding:0; }
.view-toggle button.active{ color:var(--ink); border-bottom:1px solid var(--accent); }

.grid-view{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.6rem; }
@media (max-width:700px){ .grid-view{ grid-template-columns:1fr; } }
.grid-card{ position:relative; text-decoration:none; overflow:hidden; }
.grid-card.featured{ grid-column:span 2; }
@media (max-width:700px){ .grid-card.featured{ grid-column:span 1; } }
.grid-thumb{ aspect-ratio:4/3; background:linear-gradient(155deg,var(--panel),var(--line)); border:1px solid var(--line); position:relative; overflow:hidden; }
.grid-thumb img, .grid-thumb .ph{ transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.grid-card:hover .grid-thumb .ph{ transform:scale(1.06); }
.grid-num{ position:absolute; top:1rem; left:1rem; font-size:.75rem; color:var(--stone); z-index:2; }
.grid-pill{ position:absolute; bottom:.9rem; right:.9rem; background:var(--bg); color:var(--ink); font-size:.68rem;
  text-transform:uppercase; letter-spacing:.05em; padding:.35rem .8rem; border-radius:100px; z-index:2; opacity:.94; }
.grid-thumb .ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--stone); font-size:.78rem; }
.grid-overlay{ position:absolute; inset:0; background:rgba(17,17,16,.45); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; }
.grid-card:hover .grid-overlay{ opacity:1; }
.view-btn{ background:var(--bg); color:var(--ink); border-radius:100px; padding:.7rem 1.4rem; font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; display:inline-flex; align-items:center; gap:.5rem; }
.grid-caption{ display:flex; flex-direction:column; gap:.3rem; margin-top:.9rem; }
.grid-caption .meta{ color:var(--stone); font-size:.78rem; }
.grid-caption .name{ font-size:1rem; font-weight:600; text-transform:uppercase; letter-spacing:.01em; }

.view-block{ display:none; }
.view-block.active{ display:block; }

/* --- Services : bloc immersif sur fond accent, titres énormes empilés --- */
.services-pop{ background:var(--bg); padding:6.5rem 0 7.5rem; }
.services-pop .caps{ color:var(--stone); }
.services-pop h2{ margin-top:.6rem; }
.services-card{ margin:0; padding:0 var(--pad); }
.service-acc{ list-style:none; margin:0; padding:0; }
.service-item{ border-top:1px solid var(--line); }
.service-item:first-child{ border-top:none; }
.service-item:last-child{ border-bottom:1px solid var(--line); }
.service-top{ display:flex; align-items:flex-start; gap:1.3rem; padding:1.5rem 0 .3rem; cursor:default; }
.service-top .num{ font-size:.82rem; color:var(--stone); margin-top:.9em; width:2rem; flex-shrink:0; }
.service-title{ text-transform:uppercase; font-size:clamp(2.6rem,8vw,6.6rem); font-weight:400; line-height:.86; letter-spacing:-0.03em; margin:0; max-width:88%; color:var(--ink); }
.service-body{ max-height:0; overflow:hidden; transition:max-height .5s cubic-bezier(.2,.8,.2,1); }
.service-item:hover .service-body, .service-item:focus-within .service-body{ max-height:480px; }
.service-body-inner{ display:flex; gap:2.4rem; padding:.4rem 0 2.3rem 3.3rem; align-items:flex-start; flex-wrap:wrap; }
.service-text{ flex:1 1 280px; }
.service-text p{ color:var(--stone); font-size:1rem; line-height:1.55; margin:0 0 1.1rem; max-width:42ch; }
.service-tags2{ columns:2; column-gap:2rem; list-style:none; padding:0; margin:0; font-size:.9rem; color:var(--ink); }
.service-tags2 li{ padding:.3rem 0; break-inside:avoid; }
.service-photo{ width:540px; max-width:50vw; aspect-ratio:4/3; overflow:hidden; flex-shrink:0; }
.service-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:700px){
  .service-title{ max-width:100%; font-size:clamp(2.1rem,11vw,3.2rem); }
  .service-body-inner{ padding-left:0; flex-direction:column-reverse; }
  .service-photo{ width:100%; max-width:100%; }
}

/* --- Travaux récents (home) : filmstrip plein écran + catégories --- */
.travaux-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.8rem; }
.travaux-head h2{ font-size:var(--t-label); text-transform:uppercase; font-weight:500; letter-spacing:.12em; color:var(--stone); }
.travaux-head h2::before{ content:'('; } .travaux-head h2::after{ content:')'; }
.travaux-head .caps{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; }
.filmstrip{ display:flex; gap:1.1rem; width:100%; overflow-x:auto; cursor:grab; padding-bottom:.6rem; scrollbar-width:thin; scrollbar-color:var(--stone) transparent; }
.filmstrip::-webkit-scrollbar{ height:4px; }
.filmstrip::-webkit-scrollbar-track{ background:transparent; }
.filmstrip::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.filmstrip.dragging{ cursor:grabbing; }
.filmstrip-item{ flex:0 0 auto; width:30vw; min-width:0; position:relative; text-decoration:none; display:block; }
.filmstrip-label{ text-align:center; font-size:.65rem; text-transform:uppercase; letter-spacing:.08em; color:var(--stone); padding:.9rem 0; }
.filmstrip-img{ aspect-ratio:3/4; overflow:hidden; background:var(--panel); }
.filmstrip-img img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; transition:transform .6s cubic-bezier(.2,.8,.2,1); }
.filmstrip-item:hover .filmstrip-img img{ transform:scale(1.05); }
@media (max-width:800px){ .filmstrip-item{ width:68vw; } }

.cat-list{ list-style:none; margin:3.5rem 0 0; padding:0; }
.cat-item{ display:flex; align-items:baseline; gap:1.4rem; border-top:1px solid var(--line); padding:1.6rem 0; transition:color .25s ease; }
.cat-item:last-child{ border-bottom:1px solid var(--line); }
.cat-item:hover{ color:var(--stone); }
.cat-item .num{ font-size:.8rem; color:var(--stone); width:2.2rem; flex-shrink:0; }
.cat-name{ font-size:clamp(2rem,6.2vw,4.4rem); text-transform:uppercase; font-weight:400; letter-spacing:-0.01em; margin:0; }

/* --- Citation / introduction éditoriale --- */
.quote-section{ padding:5.5rem 0; }
.quote-block{ max-width:110ch; margin:0 auto; text-align:center; }
.quote-text{ font-size:40px; font-weight:400; line-height:1.4; letter-spacing:-0.01em; text-transform:uppercase; margin:0; }
mark{ background:var(--accent); color:var(--accent-ink); padding:0 .15em; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.clients-title{ text-align:center; text-transform:uppercase; margin-bottom:2.6rem; font-weight:400; }
.quote-cite{ display:block; margin-top:1.6rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:var(--stone); font-style:normal; }


/* --- Fiche projet : colonne info fixe à gauche, galerie qui scrolle à droite --- */
.project-hero{ padding-top:3rem; padding-bottom:2.5rem; }
.project-title{ font-size:clamp(2.4rem,7vw,5.5rem); font-weight:400; line-height:.95; letter-spacing:-0.02em; margin:.6rem 0 0; }
.project-sub{ color:var(--stone); font-size:1.1rem; margin:.8rem 0 0; }
.project-meta{ display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:2.2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.project-meta .caps{ display:block; margin-bottom:.3rem; }
.project-meta p{ margin:0; font-size:.95rem; }

.project-split{ display:grid; grid-template-columns:38% 62%; align-items:start; border-top:1px solid var(--line); }
.project-info{ position:sticky; top:88px; align-self:start; padding:2.4rem var(--pad) 3rem; border-right:1px solid var(--line); }
.project-info h2, .project-info h3{ font-size:.75rem; }
.project-info p{ color:var(--stone); font-size:.95rem; line-height:1.55; margin:.8rem 0 1.6rem; }
.palette-list{ list-style:none; margin:.8rem 0 1.8rem; padding:0; display:grid; gap:.6rem; }
.palette-list li{ display:flex; align-items:center; gap:.7rem; font-size:.85rem; color:var(--stone); }
.swatch{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); flex-shrink:0; }
.type-specimen{ margin:.8rem 0 2rem; display:grid; gap:.5rem; }
.type-specimen p{ margin:0; font-size:1.3rem; color:var(--ink); }
.next-project{ display:inline-block; margin-top:1rem; font-size:.85rem; text-transform:uppercase; letter-spacing:.06em; text-decoration:none; border-top:1px solid var(--line); padding-top:1.2rem; width:100%; }

.project-gallery{ padding:2.4rem var(--pad) 4rem; }
.gallery-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; }
.gallery-grid img{ width:100%; aspect-ratio:4/5; object-fit:cover; background:var(--panel); }
.gallery-grid .wide{ grid-column:1 / -1; aspect-ratio:16/9; }

@media (max-width:900px){
  .project-split{ grid-template-columns:1fr; }
  .project-info{ position:static; border-right:none; border-bottom:1px solid var(--line); }
  .gallery-grid{ grid-template-columns:1fr; }
}

/* --- Curseur personnalisé : rond vert acide translucide qui remplace le curseur pointeur --- */
@media (pointer:fine){
  a, button, .filmstrip-item, .grid-card, .service-item, input, select, textarea{ cursor:none; }
  #cursorDot{
    position:fixed; top:0; left:0; width:34px; height:34px; margin:-17px 0 0 -17px;
    border-radius:50%; background:var(--accent); opacity:0; pointer-events:none; z-index:10000;
    transition:opacity .2s ease, transform .2s ease; transform:scale(.6);
  }
  #cursorDot.show{ opacity:.4; transform:scale(1); }
}

/* --- Bouton "Prendre contact" dans la nav --- */
.nav-cta{
  display:inline-flex; align-items:center; gap:.5rem; background:var(--accent); color:var(--accent-ink);
  text-transform:uppercase; letter-spacing:.06em; font-size:.72rem; font-weight:500;
  padding:.55rem 1.1rem; border-radius:100px; text-decoration:none;
}
.nav-cta .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-ink); }
@media (max-width:760px){ .nav-cta{ display:none; } }

/* --- CTA "Un projet en tête ?" avant le footer --- */
.home-cta{ text-align:center; padding:7rem 0; }
.home-cta h2{ font-size:clamp(2.2rem,6vw,4.2rem); font-weight:400; text-transform:uppercase; letter-spacing:-0.01em; line-height:1.02; margin:0; }
.home-cta p{ max-width:52ch; margin:1.6rem auto 0; color:var(--stone); font-size:1rem; line-height:1.55; font-weight:300; }
.home-cta .nav-cta{ margin-top:2rem; padding:.8rem 1.6rem; font-size:.78rem; }

/* --- Footer riche (contenu inset, pas collé aux bords) --- */
.site-footer{ background:#111110; color:#F3F3EE; }
.site-footer a{ color:inherit; }
.footer-inner{ padding:0 var(--pad); }
.footer-top{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 0; border-bottom:1px solid rgba(255,255,255,.12); }
.footer-top .logo-mark.small{ color:#F3F3EE; }
.footer-loc{ font-size:.78rem; color:#9B9B93; text-transform:uppercase; letter-spacing:.05em; }
.footer-nav{ display:flex; gap:1.8rem; list-style:none; margin:0; padding:0; font-size:.78rem; text-transform:uppercase; letter-spacing:.05em; }
.footer-nav a{ text-decoration:none; }
.footer-top .themebtn{ border-color:rgba(255,255,255,.25); color:#F3F3EE; }
.footer-cta{ padding:2.8rem 0 2.2rem; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:1.2rem; }
.footer-cta h2{ font-size:clamp(1.8rem,4vw,2.8rem); font-weight:400; margin:0; letter-spacing:-0.01em; line-height:1.05; }
.footer-mail{ font-size:clamp(1.15rem,2.4vw,1.7rem); text-decoration:underline; text-underline-offset:6px; }
.footer-main{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-end; gap:2rem; padding:0 0 2rem; }
.footer-cols{ display:flex; flex-wrap:wrap; gap:3.5rem; }
.footer-cols .caps{ color:#8f8f88; }
.footer-cols ul{ list-style:none; margin:.9rem 0 0; padding:0; display:grid; gap:.5rem; font-size:.9rem; }
.footer-cols a{ text-decoration:none; }
.footer-wordmark .logo-svg{ width:clamp(170px,18vw,270px); height:auto; color:#F3F3EE; display:block; }
.footer-bottom{ display:flex; justify-content:space-between; padding:1.1rem 0; border-top:1px solid rgba(255,255,255,.12);
  font-size:.78rem; color:#9B9B93; }
.footer-bottom a{ text-decoration:none; }

/* --- Fiche projet avec vrais visuels --- */
.gallery-grid img.natural{ aspect-ratio:auto; height:auto; }
.palette-list small{ display:block; font-size:.72rem; opacity:.85; margin-top:.1rem; }
.project-meta a{ text-decoration:underline; text-underline-offset:4px; }

/* --- Vignette de la grille Projets avec image --- */
.grid-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.grid-card:hover .grid-thumb img{ transform:scale(1.04); }
.grid-thumb.has-img .grid-num{ color:#F3F3EE; text-shadow:0 1px 10px rgba(0,0,0,.45); }

/* ===== Système de sections : titres capitales, accordéons, tuiles, animations ===== */
.sec{ padding:6.5rem 0; border-top:1px solid var(--line); border-bottom:none; }
.sec-head{ display:flex; justify-content:space-between; align-items:baseline; gap:2rem; margin-bottom:2.5rem; }
.sec-title{ text-transform:uppercase; font-size:var(--t-label); font-weight:500; line-height:1.2; letter-spacing:.12em; margin:0; color:var(--stone); }
.sec-title::before{ content:'('; } .sec-title::after{ content:')'; }
.sec-count{ font-size:var(--t-label); color:var(--stone); letter-spacing:.12em; white-space:nowrap; }
.manifest{ text-transform:uppercase; font-size:clamp(1.3rem,2.6vw,2.2rem); line-height:1.12; letter-spacing:-0.02em; font-weight:400; margin:0; }
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; margin-top:3rem; }
.cols-2 p{ margin:0 0 1.2rem; color:var(--stone); line-height:1.7; font-weight:300; max-width:60ch; }

/* Accordéon : numéro, titre capitales, flèche — se déploie au survol / au clic */
.acc{ --accnum:clamp(3.5rem,9vw,8rem); list-style:none; margin:0; padding:0; }
.acc-item{ position:relative; }
.acc-item::before{ content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--line); transform-origin:left center; }
.acc-item:last-child{ border-bottom:1px solid var(--line); }
.acc-top{ display:grid; grid-template-columns:var(--accnum) 1fr auto; align-items:center; gap:1rem; width:100%; background:none; border:0; color:inherit; font:inherit; text-align:left; padding:1.3rem 0; cursor:pointer; }
.acc-num{ font-size:clamp(1.1rem,2.4vw,2rem); font-weight:300; letter-spacing:-0.03em; line-height:1; color:var(--stone); transition:color .3s; }
.acc-title{ display:block; text-transform:uppercase; font-size:var(--t-h2); font-weight:400; line-height:.95; letter-spacing:-0.03em; transition:color .3s; }
.acc-meta{ display:block; margin-top:.8rem; }
.acc-arrow{ font-size:clamp(1.2rem,2vw,1.6rem); transition:transform .45s cubic-bezier(.2,.8,.2,1); }
.acc-body{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1); }
.acc-body-in{ overflow:hidden; min-height:0; }
.acc-body-in p{ margin:0 0 2.2rem calc(var(--accnum) + 1rem); max-width:62ch; color:var(--stone); line-height:1.7; font-weight:300; }
.acc-item.is-open .acc-body{ grid-template-rows:1fr; }
.acc-item.is-open .acc-arrow{ transform:rotate(90deg); }
.acc-item.is-open .acc-num{ color:var(--ink); }
.acc-top:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
html:not(.js) .acc-body{ grid-template-rows:1fr; }
@media (hover:hover){
  .acc-item:hover .acc-body{ grid-template-rows:1fr; }
  .acc-item:hover .acc-arrow{ transform:rotate(90deg); }
  .acc-item:hover .acc-num{ color:var(--ink); }
  .acc:hover .acc-item:not(:hover) .acc-title{ color:var(--stone); }
}

/* Tuiles : le texte se dévoile au survol, la tuile passe au vert acide */
.tiles{ --cols:2; display:grid; grid-template-columns:repeat(var(--cols),1fr); border-top:1px solid var(--line); border-left:1px solid var(--line); }
.tiles.c3{ --cols:3; }
.tile{ position:relative; min-height:clamp(250px,28vw,360px); padding:1.6rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; overflow:hidden; transition:background .35s, color .35s; outline-offset:-3px; }
.tile-num{ font-size:.82rem; color:var(--stone); transition:color .35s; }
.tile-title{ text-transform:uppercase; font-size:clamp(1.4rem,2.6vw,2.3rem); font-weight:400; line-height:.95; letter-spacing:-0.03em; margin:0; }
.tile-text{ margin:1rem 0 0; max-width:42ch; font-size:.98rem; line-height:1.55; font-weight:300; color:var(--stone); }
@media (hover:hover){
  .tile-text{ max-height:0; opacity:0; transform:translateY(12px); margin-top:0; transition:max-height .45s cubic-bezier(.2,.8,.2,1), opacity .35s, transform .45s cubic-bezier(.2,.8,.2,1), margin .45s, color .35s; }
  .tile:hover, .tile:focus-visible{ background:var(--accent); color:var(--accent-ink); }
  .tile:hover .tile-num, .tile:focus-visible .tile-num, .tile:hover .tile-text, .tile:focus-visible .tile-text{ color:var(--accent-ink); }
  .tile:hover .tile-text, .tile:focus-visible .tile-text{ max-height:12rem; opacity:1; transform:none; margin-top:1rem; }
}


/* Carrousel horizontal (compétences) */
.car{ --cw:clamp(290px,42vw,620px); }
.car-track{ position:relative; display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain; cursor:grab; padding-bottom:.4rem; }
.car-track::-webkit-scrollbar{ display:none; }
.car-track::after{ content:''; flex:0 0 calc(100% - var(--cw) - 1.5rem); }
.car-track.dragging{ cursor:grabbing; scroll-snap-type:none; }
.car-track:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.car-card{ flex:0 0 var(--cw); scroll-snap-align:start; opacity:.4; transition:opacity .5s; user-select:none; -webkit-user-select:none; }
.car-card.on{ opacity:1; }
.car-img{ position:relative; aspect-ratio:3/2; overflow:hidden; background:var(--panel); }
.car-img img{ width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; transition:transform .9s cubic-bezier(.2,.8,.2,1); }
.car-card:hover .car-img img{ transform:scale(1.04); }
.car-tag{ position:absolute; top:1rem; left:1rem; padding:.3rem .85rem; border-radius:100px; font-size:.72rem; background:color-mix(in srgb, var(--bg) 88%, transparent); color:var(--ink); backdrop-filter:blur(6px); }
.car-info{ display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; padding-top:1.5rem; }
.car-n{ display:flex; align-items:center; gap:.5rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--stone); align-self:start; padding-top:.7rem; }
.car-n i{ width:7px; height:7px; border-radius:50%; background:var(--ink); }
.car-title{ text-transform:uppercase; font-size:var(--t-h3); font-weight:400; line-height:.98; letter-spacing:-0.03em; margin:0 0 1rem; }
.car-desc{ margin:0 0 1.3rem; color:var(--stone); line-height:1.6; font-weight:300; font-size:.98rem; max-width:46ch; }
.car-link{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:100px; padding:.5rem 1.1rem; font-size:.78rem; text-decoration:none; transition:background .3s, color .3s, border-color .3s; }
.car-link:hover{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.car-ui{ display:flex; justify-content:space-between; align-items:flex-end; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line); }
.car-btns{ display:flex; gap:.7rem; }
.car-btn{ width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:none; color:var(--ink); font-size:1.15rem; cursor:pointer; transition:background .3s, border-color .3s, opacity .3s; }
.car-btn:hover:not(:disabled){ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.car-btn:disabled{ opacity:.3; cursor:default; }
.car-count{ font-size:clamp(2.2rem,4.5vw,3.8rem); font-weight:300; letter-spacing:-0.04em; line-height:.85; color:color-mix(in srgb, var(--ink) 22%, var(--bg)); }
.car-count b{ font-weight:300; color:var(--ink); }
@media (max-width:900px){
  .car{ --cw:82vw; }
  .car-info{ grid-template-columns:1fr; gap:.6rem; }
}

/* Chiffres */
.src{ display:block; margin-bottom:1.4rem; }
.stats{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }
.stat{ padding:1.6rem 1rem 2rem 0; }
.stat strong{ display:block; font-size:clamp(3rem,9vw,8rem); font-weight:300; letter-spacing:-0.04em; line-height:.9; }
.stat span{ display:block; margin-top:1rem; }
.gauges{ display:grid; grid-template-columns:repeat(4,1fr); gap:2rem; margin-top:4rem; }
@property --p{ syntax:'<number>'; inherits:false; initial-value:0; }
.gauge{ display:flex; flex-direction:column; align-items:flex-start; gap:1rem; }
.gauge b{ --p:var(--v); width:clamp(96px,11vw,150px); aspect-ratio:1; border-radius:50%; display:grid; place-items:center; font-size:clamp(1.8rem,3vw,2.6rem); font-weight:300; letter-spacing:-0.03em;
  background:radial-gradient(closest-side, var(--bg) 80%, transparent 82% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), var(--line) 0); }
.concl{ margin:3.5rem 0 0; }

/* Avant / maquettes */
.before{ display:grid; grid-template-columns:1.2fr 1fr; gap:2rem; align-items:start; }
.before figure{ margin:0; }
.before figure:nth-child(2){ margin-top:6rem; }
.before img{ display:block; width:100%; height:auto; border:1px solid var(--line); filter:grayscale(1); transition:filter .5s; }
.before figure:hover img{ filter:none; }
.fcap{ display:block; margin-top:.8rem; }
.frames{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; align-items:start; }
.frame{ margin:0; }
.frame:nth-child(2){ margin-top:3.5rem; }
.scroll{ height:560px; overflow-y:auto; border:1px solid var(--line); background:var(--panel); }
.scroll:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.scroll img{ display:block; width:100%; height:auto; }

/* Page À propos */
.hero2{ padding:3.5rem 0 2rem; border-bottom:none; }
.hero2 h1{ font-size:clamp(2.6rem,8.5vw,6.5rem); text-transform:uppercase; font-weight:400; line-height:.88; letter-spacing:-0.04em; max-width:none; }
.hero2 .caps{ display:block; margin-top:1.2rem; }
.intro{ display:grid; grid-template-columns:minmax(240px,420px) 1fr; gap:4.5rem; align-items:start; }
.intro .about-photo{ width:100%; }
.intro-text .manifest{ font-size:clamp(1.3rem,2.4vw,2rem); line-height:1.12; color:var(--ink); font-weight:400; max-width:none; margin:0; }
.intro-text p:not(.manifest){ color:var(--stone); font-size:1.02rem; line-height:1.7; font-weight:300; margin:1.6rem 0 0; max-width:62ch; }

/* Témoignages (masqués tant qu'ils ne sont pas remplis) */
section[hidden]{ display:none; }
.testi-list{ margin:0; padding:0; list-style:none; }
.testi{ margin:0; border-top:1px solid var(--line); padding:2.2rem 0; display:grid; grid-template-columns:1fr 3fr; gap:2rem; align-items:baseline; }
.testi:last-child{ border-bottom:1px solid var(--line); }
.testi blockquote{ margin:0; text-transform:uppercase; font-size:clamp(1.3rem,2.8vw,2.3rem); line-height:1.15; letter-spacing:-0.02em; }
.testi figcaption{ display:flex; flex-direction:column; gap:.2rem; font-size:.9rem; }
.testi figcaption span{ color:var(--stone); }

/* Services (accueil) */
.services-head{ padding:0 0 1.6rem; }

/* Animations d'apparition */
@media (prefers-reduced-motion:no-preference){
  html.js .rv{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .9s cubic-bezier(.2,.8,.2,1); transition-delay:var(--d,0s); }
  html.js .rv.in{ opacity:1; transform:none; }
  /* petit titre : l'espacement des lettres se resserre à l'apparition */
  html.js .sec-head .sec-title{ letter-spacing:.34em; transition:letter-spacing 1.1s cubic-bezier(.2,.8,.2,1); }
  html.js .sec-head.in .sec-title{ letter-spacing:.12em; }
  /* filets des listes : ils se tracent de gauche à droite */
  html.js .acc-item::before{ transition:transform 1s cubic-bezier(.7,0,.2,1); transition-delay:var(--d,0s); }
  html.js .acc-item.rv:not(.in)::before{ transform:scaleX(0); }
  html.js .acc-item:nth-child(2){ --d:.06s; } html.js .acc-item:nth-child(3){ --d:.12s; } html.js .acc-item:nth-child(4){ --d:.18s; }
  html.js .rv-img img{ clip-path:inset(0 0 100% 0); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1), filter .5s; transition-delay:var(--d,0s), 0s; }
  html.js .rv-img.in img{ clip-path:inset(0); }
  html.js .gauge b{ --p:0; transition:--p 1.6s cubic-bezier(.2,.8,.2,1); }
  html.js .gauge.in b{ --p:var(--v); }
}

@media (max-width:900px){
  .sec{ padding:4rem 0; }
  .sec-head{ margin-bottom:2.2rem; gap:1rem; }
  .cols-2, .intro, .before, .testi{ grid-template-columns:1fr; gap:1.6rem; }
  .before figure:nth-child(2), .frame:nth-child(2){ margin-top:0; }
  .acc{ --accnum:3.4rem; }
  .acc-body-in p{ margin-left:0; }
  .tiles, .tiles.c3{ --cols:1; }
  .stats, .gauges{ grid-template-columns:1fr 1fr; }
  .frames{ grid-template-columns:1fr; }
  .scroll{ height:480px; }
}


/* ===== Carrousel Compétences piloté par le scroll vertical ===== */
.car-sec{ padding:0; }
.car-pin.on{ position:relative; }
.car-pin.on .car-sticky{ position:sticky; top:0; height:100vh; box-sizing:border-box; padding-top:104px; padding-bottom:2rem; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.car-pin.on .sec-head{ margin-bottom:1.6rem; }
.car-pin.on .car-track{ overflow:visible; scroll-snap-type:none; cursor:default; padding:0 var(--pad); will-change:transform; }
.car-pin.on .car-track::after{ display:none; }
.car-pin.on .car-card{ scroll-snap-align:none; }
.car-pin.on .car-ui{ margin:1.6rem var(--pad) 0; }
.car-pin.on .car-img{ aspect-ratio:16/10; }
@media (max-height:760px){ .car-pin.on .car-img{ aspect-ratio:2/1; } .car-pin.on .car-desc{ display:none; } }
.car-pin.on .car-sticky > .wrap{ width:100%; }

/* ===== Étude de cas Ruelle-Dommange ===== */
.project-cover{ padding:0 0 3rem; border-top:none; }
.shot{ margin:0; }
.shot img{ display:block; width:100%; height:auto; border:1px solid var(--line); background:var(--panel); }
.shot .fcap{ display:block; margin-top:.8rem; }
.note{ margin:2rem 0 0; color:var(--stone); font-size:.9rem; max-width:62ch; }
.pair{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:start; margin-top:3rem; }
.pair + .shot, .shot + .shot{ margin-top:1.5rem; }
.pair .shot, .pair .shot + .shot{ margin-top:0; }
.sw ~ .cols-2, .swatches + .cols-2{ margin-top:3.5rem; }
.cols-2 > div > .caps{ display:block; margin-bottom:.8rem; }

/* Enjeu : trois colonnes visibles d'un coup d'œil */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:3rem; border-top:1px solid var(--line); }
.trio > div{ padding:1.6rem 2rem 1rem 0; }
.trio > div + div{ padding-left:2rem; border-left:1px solid var(--line); }
.trio h3{ font-size:var(--t-h3); font-weight:400; line-height:1.15; letter-spacing:-0.02em; margin:.9rem 0 .8rem; }
.trio p{ margin:0; color:var(--stone); font-weight:300; line-height:1.6; max-width:34ch; }

/* Démarche : la chaîne de réflexion */
.chain{ list-style:none; counter-reset:chain; display:grid; grid-template-columns:repeat(6,1fr); margin:2.6rem 0 3.5rem; padding:0; border-top:1px solid var(--ink); }
.chain li{ counter-increment:chain; padding:1rem 1rem 0 0; font-size:.9rem; line-height:1.35; }
.chain li::before{ content:counter(chain, decimal-leading-zero); display:block; font-size:var(--t-label); letter-spacing:.12em; color:var(--stone); margin-bottom:.5rem; }

/* Avant / après : le menu */
.navcmp{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-bottom:4rem; }
.navcmp-col{ border:1px solid var(--line); padding:1.6rem 1.8rem 1.4rem; }
.navcmp-col.is-new{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.navcmp-col.is-new .caps{ color:var(--accent-ink); opacity:.7; }
.navcmp-n{ display:block; font-size:var(--t-h2); font-weight:300; letter-spacing:-0.03em; line-height:1.05; margin:1rem 0 1.2rem; }
.navcmp-n small{ display:block; font-size:.85rem; letter-spacing:0; font-weight:400; opacity:.7; margin-top:.5rem; }
.navcmp ul{ list-style:none; margin:0; padding:0; }
.navcmp li{ padding:.65rem 0; border-top:1px solid color-mix(in srgb, currentColor 18%, transparent); font-size:.95rem; }
.navcmp li em{ display:block; font-style:normal; font-size:.8rem; opacity:.65; margin-top:.15rem; }

/* Expérience produit : texte + capture */
.rowshot{ display:grid; grid-template-columns:5fr 7fr; gap:3rem; align-items:start; margin-top:4.5rem; }
.rowshot.rev{ grid-template-columns:7fr 5fr; }
.rowshot.rev .rowshot-text{ order:2; }
.rowshot-text{ position:sticky; top:112px; }
.rowshot-text h3{ font-size:var(--t-h3); font-weight:400; line-height:1.15; letter-spacing:-0.02em; margin:.8rem 0 1rem; }
.rowshot-text p{ margin:0; color:var(--stone); font-weight:300; line-height:1.65; max-width:46ch; }

/* Direction artistique : palette */
.swatches{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin:3.5rem 0 0; }
.sw{ min-height:clamp(220px,24vw,300px); padding:1.4rem 1.5rem; display:flex; flex-direction:column; justify-content:space-between; border:1px solid var(--line); }
.sw .caps{ color:inherit; opacity:.75; }
.sw strong{ display:block; font-size:var(--t-h3); font-weight:400; letter-spacing:-0.02em; margin-bottom:.5rem; }
.sw p{ margin:0; font-size:.88rem; line-height:1.5; opacity:.8; max-width:30ch; }

/* Résultat : statut honnête */
.status{ margin:0 0 1.6rem; }
.status .pill{ display:inline-flex; align-items:center; gap:.55rem; padding:.4rem 1rem; border-radius:100px; background:var(--accent); color:var(--accent-ink); font-size:var(--t-label); letter-spacing:.12em; text-transform:uppercase; font-weight:500; }
.status .pill i{ width:7px; height:7px; border-radius:50%; background:var(--accent-ink); }
@media (prefers-reduced-motion:no-preference){ .status .pill i{ animation:rdpulse 2s ease-in-out infinite; } }
@keyframes rdpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.25; } }

@media (max-width:900px){
  .pair, .navcmp, .swatches, .trio, .rowshot, .rowshot.rev{ grid-template-columns:1fr; }
  .rowshot, .rowshot.rev{ gap:1.4rem; margin-top:3rem; }
  .rowshot-text{ position:static; }
  .rowshot.rev .rowshot-text{ order:0; }
  .trio > div, .trio > div + div{ padding:1.4rem 0 .6rem; border-left:none; border-top:1px solid var(--line); }
  .trio{ border-top:none; }
  .chain{ grid-template-columns:1fr 1fr; row-gap:1.2rem; }
}

/* Maquettes : deux écrans côte à côte (fiche Resolar) */
@media (min-width:901px){
  .frames.two{ grid-template-columns:repeat(2,1fr); }
  .frames.two .frame:nth-child(2){ margin-top:0; }
  .frames.two .scroll{ height:clamp(420px,46vw,640px); }
}


/* ===== Avis Google (accueil) ===== */
.reviews-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.4rem; }
.reviews-head .caps{ display:inline-flex; align-items:center; gap:.6rem; }
.reviews-head .caps::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 1px var(--ink); }
.reviews-btns{ display:flex; gap:.6rem; }
.reviews-track{ list-style:none; margin:0; padding:0 0 .8rem; display:flex; gap:1rem; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:var(--line) transparent; cursor:grab; overscroll-behavior-x:contain; }
.reviews-track.dragging{ cursor:grabbing; scroll-snap-type:none; scroll-behavior:auto; }
.reviews-track::-webkit-scrollbar{ height:4px; }
.reviews-track::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.reviews-track:focus-visible{ outline:2px solid var(--ink); outline-offset:4px; }
.review{ flex:0 0 clamp(280px,29vw,400px); scroll-snap-align:start; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; border:1px solid var(--line); padding:1.8rem 1.8rem 1.5rem; }
.review-stars{ letter-spacing:.18em; font-size:.95rem; line-height:1; }
.review blockquote{ margin:0; font-size:1rem; line-height:1.6; font-weight:300; user-select:none; }
.review-by{ margin:0; display:flex; flex-direction:column; gap:.15rem; font-size:.9rem; }
.review-by span{ color:var(--stone); font-size:.8rem; }
@media (max-width:900px){ .review{ flex-basis:82vw; } }
.review blockquote{ flex:1; }

/* rail maquettes */
.frames-rail{ display:flex; gap:1.5rem; overflow-x:auto; scroll-snap-type:x mandatory; padding:0 0 1rem; scrollbar-width:thin; scrollbar-color:var(--line) transparent; overscroll-behavior-x:contain; align-items:start; }
.frames-rail::-webkit-scrollbar{ height:4px; } .frames-rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:10px; }
.frames-rail .frame{ flex:0 0 clamp(280px,31vw,430px); scroll-snap-align:start; margin:0 !important; }
.frames-rail .frame:nth-child(even){ margin-top:2.5rem !important; }
.rail-hint{ display:block; margin-bottom:1rem; color:var(--stone); }
.mini-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2.2rem 3rem; margin-top:2.5rem; }
.mini-grid h3{ font-weight:400; text-transform:uppercase; letter-spacing:-.02em; margin:.5rem 0 .6rem; }
.mini-grid p{ font-weight:300; line-height:1.6; margin:0; }
.shots3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
.shots3 img,.shots2 img{ width:100%; height:auto; display:block; }
.shots2{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1.5rem; }
.refs{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; margin-top:2rem; max-width:44rem; }
.refs img{ width:100%; height:auto; display:block; }
.timeline{ list-style:none; margin:2.5rem 0 0; padding:0; border-top:1px solid var(--line); }
.timeline li{ display:grid; grid-template-columns:9rem 1fr; gap:2rem; padding:1.2rem 0; border-bottom:1px solid var(--line); }
.timeline strong{ font-weight:400; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em; } .timeline p{ margin:0; font-weight:300; line-height:1.55; }
@media (max-width:800px){ .mini-grid,.shots3,.shots2{ grid-template-columns:1fr; } .timeline li{ grid-template-columns:1fr; gap:.4rem; } .frames-rail .frame:nth-child(even){ margin-top:0 !important; } }

.week{ list-style:none; display:grid; grid-template-columns:repeat(7,1fr); gap:.5rem; margin:0 0 2.5rem; padding:0; }
.week li{ border:1px solid var(--line); padding:1rem .6rem; text-align:center; display:flex; flex-direction:column; gap:.5rem; }
.week strong{ font-weight:300; font-size:.85rem; } .week .off{ opacity:.45; border-style:dashed; }
@media (max-width:800px){ .week{ grid-template-columns:repeat(4,1fr); } }

.da-h{ font-weight:400; text-transform:uppercase; letter-spacing:-.02em; margin:4.5rem 0 1rem; font-size:clamp(1.3rem,2.4vw,1.9rem); }
.da-p{ font-weight:300; line-height:1.6; max-width:46rem; margin:0 0 1.5rem; }
.moodboard{ columns:3; column-gap:1rem; margin-top:1.5rem; } .moodboard figure{ break-inside:avoid; margin:0 0 1rem; } .moodboard img{ width:100%; height:auto; display:block; }
.logo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; margin-top:1.5rem; }
.logo-card{ margin:0; display:flex; flex-direction:column; border:1px solid var(--line); } .logo-card.wide{ grid-column:1/-1; }
.logo-stage{ display:flex; align-items:center; justify-content:center; padding:2.5rem 2rem; background:#FFFFFF; min-height:15rem; }
.logo-card.dark .logo-stage{ background:#012318; padding:3rem 2rem; } .logo-stage img{ max-width:100%; max-height:13rem; width:auto; height:auto; display:block; } .logo-card.wide .logo-stage img{ max-height:11rem; width:min(100%,38rem); }
.logo-card figcaption{ padding:1.1rem 1.2rem 1.4rem; } .logo-card figcaption p{ margin:.5rem 0 0; font-weight:300; line-height:1.55; font-size:.95rem; }
@media (max-width:900px){ .logo-grid{ grid-template-columns:1fr 1fr; } .moodboard{ columns:2; } }
@media (max-width:600px){ .logo-grid{ grid-template-columns:1fr; } .moodboard{ columns:1; } }

.form-status.ok{ color:var(--ink); }
.form-status.err{ color:#c0392b; }
.form-note a{ text-decoration:underline; text-underline-offset:3px; }
button.submit:disabled{ opacity:.5; cursor:default; }

/* ===== Mentions légales & confidentialité ===== */
.legal{ padding:3.5rem 0 6rem; border-top:none; }
.legal .wrap > .caps:first-child{ display:inline-block; margin-bottom:1.6rem; }
.legal h1{ font-size:var(--t-h1); font-weight:400; letter-spacing:-0.02em; line-height:1; margin:0 0 1rem; text-transform:uppercase; max-width:none; }
.legal-date{ display:block; color:var(--stone); margin-bottom:2.4rem; }
.legal-nav{ display:flex; gap:1.6rem; flex-wrap:wrap; padding:1rem 0; margin-bottom:3.5rem; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.legal-nav a{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em; }
.legal-block{ display:grid; grid-template-columns:1fr 2fr; gap:3rem; padding:3rem 0; border-top:1px solid var(--line); scroll-margin-top:110px; }
.legal-block:first-of-type{ border-top:none; padding-top:0; }
.legal-block > h2{ font-size:var(--t-h3); font-weight:400; line-height:1.15; letter-spacing:-0.02em; margin:0; position:sticky; top:112px; align-self:start; }
.legal-body h3{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em; font-weight:500; color:var(--stone); margin:2.2rem 0 .7rem; }
.legal-body h3:first-child{ margin-top:0; }
.legal-body p, .legal-body li{ font-weight:300; line-height:1.7; max-width:62ch; margin:0 0 1rem; }
.legal-body ul{ padding-left:1.1rem; margin:0 0 1rem; }
.legal-body a{ text-decoration:underline; text-underline-offset:3px; }
.legal-dl{ margin:0; display:grid; grid-template-columns:minmax(120px,1fr) 2fr; border-top:1px solid var(--line); }
.legal-dl dt, .legal-dl dd{ margin:0; padding:.9rem 0; border-bottom:1px solid var(--line); }
.legal-dl dt{ font-size:var(--t-label); text-transform:uppercase; letter-spacing:.12em; color:var(--stone); padding-top:1.05rem; }
@media (max-width:900px){
  .legal-block{ grid-template-columns:1fr; gap:1.4rem; padding:2.2rem 0; }
  .legal-block > h2{ position:static; }
}

/* Accueil : l'intro est le h1 de la page, avec exactement le style d'un paragraphe d'intro */
.hero-intro h1.hero-lede{ max-width:32ch; color:var(--stone); font-size:1.05rem; line-height:1.55; margin:.9rem 0 1em; font-weight:inherit; letter-spacing:normal; text-transform:none; }

.legal-lede{ font-weight:300; line-height:1.6; max-width:48ch; margin:0 0 2.4rem; color:var(--stone); }

.svc-proj{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:0 0 1.2rem}
.svc-proj a{display:block;text-decoration:none}
.svc-proj img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.svc-proj span{display:block;margin-top:.6rem;font-size:.9rem}
.svc-list{columns:2;column-gap:2rem;margin:0 0 1rem}
@media(max-width:900px){.svc-proj{grid-template-columns:1fr}.svc-list{columns:1}}

.service-link{ display:inline-block; margin-top:1.1rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.12em; text-decoration:underline; text-underline-offset:4px; }

/* Logos clients : noir sur fond transparent (inversé automatiquement en thème sombre) */
:root{ --logo-filter:none; }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --logo-filter:invert(1); } }
:root[data-theme="dark"]{ --logo-filter:invert(1); }
.client-row.logos{ grid-template-columns:repeat(5,1fr); }
.client-cell img{ display:block; width:auto; height:auto; max-height:56px; max-width:78%; filter:var(--logo-filter); }
@media (max-width:900px){ .client-row.logos{ grid-template-columns:repeat(2,1fr); } .client-cell{ padding:2rem 1rem; } }

.about-photo{ overflow:hidden; }
.about-photo img{ display:block; width:100%; height:100%; object-fit:cover; }

html:has(.mobilemenu.open){ overflow:hidden; }


/* --- Carrousel « Projets à la une » (hero home) --- */
.hero-car{ --hc-ease:cubic-bezier(.2,.7,.2,1); --hc-dur:.45s; }
.hc-index{ font-variant-numeric:tabular-nums; letter-spacing:.06em; margin-right:.4rem; }
.hc-btn{ width:1.9rem; height:1.9rem; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font:inherit; font-size:1.1rem; line-height:1; display:grid; place-items:center; cursor:pointer; transition:background .3s, border-color .3s, opacity .3s; }
.hc-btn:hover:not(:disabled), .hc-btn:focus-visible{ background:var(--accent); border-color:var(--accent); color:var(--accent-ink); }
.hc-btn:disabled{ opacity:.3; cursor:default; }
.hc-viewport{ position:absolute; inset:0; overflow:hidden; }
.hc-track{ display:flex; height:100%; transition:transform var(--hc-dur) var(--hc-ease); will-change:transform; }
.hc-slide{ position:relative; flex:0 0 100%; height:100%; display:block; overflow:hidden; color:var(--ink); text-decoration:none; }
.hc-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s var(--hc-ease); }
.hc-cap{ position:absolute; left:1rem; bottom:1rem; display:flex; flex-direction:column; gap:.2rem; padding:.7rem .9rem; background:var(--bg); color:var(--ink); max-width:calc(100% - 5.5rem); }
.hc-name{ font-size:1.05rem; font-weight:500; letter-spacing:-.01em; display:block; }
.hc-cat{ font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; color:var(--stone); }
.hc-go{ position:absolute; right:1rem; bottom:1rem; width:2.6rem; height:2.6rem; border-radius:50%; background:var(--accent); color:var(--accent-ink); display:grid; place-items:center; font-size:1.1rem; opacity:0; transform:scale(.8); transition:opacity .35s ease, transform .35s var(--hc-ease); }
@media (hover:none){ .hc-go{ opacity:1; transform:none; } }
.hc-slide:focus-visible{ outline:2px solid var(--ink); outline-offset:-4px; }
@media (max-width:800px){
  .hero-car{ aspect-ratio:4/5; }
  .hero-count{ top:-2.6rem; }
}
@media (prefers-reduced-motion:reduce){
  .hc-track, .hc-slide img, .hc-name, .hc-go{ transition:none; }
}



/* --- Carrousel hero : transition « volet vert + logo » --- */
.hero-car{ --hc-green:#CBFF5C; }
.hc-track{ position:absolute; inset:0; display:block; transition:none; transform:none; will-change:auto; }
.hc-slide{ position:absolute; inset:0; flex:none; visibility:hidden; }
.hc-slide.is-active{ visibility:visible; }
.hc-media{ position:absolute; inset:0; display:block; will-change:transform; }
.hc-media img{ will-change:transform; }
.hc-cap-in{ display:flex; flex-direction:column; gap:0; }
.hc-cap{ flex-direction:column; }
.hc-viewport.is-busy{ pointer-events:none; }
.hc-panel{ position:absolute; inset:0; z-index:5; background:var(--hc-green); color:#111110; display:grid; place-items:center; visibility:hidden; pointer-events:none; clip-path:inset(0 0 0 100%); }
.hc-panel.is-on{ visibility:visible; }
.hc-panel-logo{ width:min(58%,420px); height:auto; display:block; color:#111110; }
.hc-panel-logo path{ fill:#111110; }
@media (max-width:800px){ .hc-panel-logo{ width:64%; } }


/* --- Hover chorégraphié (souris uniquement, mouvement normal) --- */
.hc-cap, .hc-go{ z-index:2; }
.hc-cat{ margin-top:.2rem; }
.hc-rev{ display:grid; grid-template-rows:1fr; }
.hc-clip{ min-height:0; overflow:hidden; display:block; }
.hc-rev-cta{ grid-template-rows:0fr; }
.hc-cta{ display:block; padding-top:.55rem; font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); white-space:nowrap; }
.hc-alt{ clip-path:inset(0 100% 0 0); }
@media (prefers-reduced-motion:reduce){ .hc-go{ opacity:1; transform:none; } }
@media (hover:none){ .hc-go{ opacity:1; transform:none; } }
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .hc-media img:not(.hc-alt){ translate:calc(var(--px,0)*-6px) calc(var(--py,0)*-3px); scale:1.03; transition:scale .9s var(--hc-ease); }
  .hc-alt{ translate:calc(var(--px,0)*8px) calc(var(--py,0)*5px); scale:1.09; transition:clip-path .6s cubic-bezier(.7,0,.2,1), scale .9s var(--hc-ease); }
  .hc-cap{ translate:calc(var(--px,0)*4px) calc(var(--py,0)*3px); }
  .hc-go{ translate:calc(var(--px,0)*7px) calc(var(--py,0)*5px); transition:opacity .4s ease, transform .5s var(--hc-ease); }
  .hc-rev{ grid-template-rows:0fr; transition:grid-template-rows .5s var(--hc-ease); }
  .hc-clip > *{ opacity:0; transform:translateY(8px); transition:opacity .4s ease, transform .5s var(--hc-ease); }
  /* état survolé (classe posée par le script, jamais pendant une transition) */
  .hero-car.is-hover .hc-slide.is-active .hc-media img:not(.hc-alt){ scale:1.05; }
  .hero-car.is-hover .hc-slide.is-active .hc-alt{ clip-path:inset(0); scale:1.03; transition-delay:.15s,.15s; }
  .hero-car.is-hover .hc-slide.is-active .hc-rev{ grid-template-rows:1fr; transition-delay:.45s; }
  .hero-car.is-hover .hc-slide.is-active .hc-rev-cta{ transition-delay:.58s; }
  .hero-car.is-hover .hc-slide.is-active .hc-clip > *{ opacity:1; transform:none; transition-delay:.5s; }
  .hero-car.is-hover .hc-slide.is-active .hc-rev-cta .hc-clip > *{ transition-delay:.63s; }
  .hero-car.is-hover .hc-slide.is-active .hc-go{ opacity:1; transform:none; transition-delay:.55s; }
}