/* =========================================================
   De Lummen & Willems — feuille de style principale
   Charte : #007CB0 / #1BB7E0 / #1E1E1E — Myriad Pro
   ========================================================= */

@font-face{font-family:"Myriad Pro";src:url("../fonts/MyriadPro-Light.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("../fonts/MyriadPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("../fonts/MyriadPro-Semibold.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Myriad Pro";src:url("../fonts/MyriadPro-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --blue:#007CB0;
  --cyan:#1BB7E0;
  --ink:#1E1E1E;
  --ink-60:rgba(30,30,30,.60);
  --ink-40:rgba(30,30,30,.40);
  --ink-12:rgba(30,30,30,.12);
  --paper:#fff;
  --paper-2:#F4F5F6;

  --gut:clamp(20px,4.5vw,72px);
  --maxw:1560px;
  --head:82px;
  --sp:clamp(18px,2.6vw,42px);          /* respiration entre les photos */
  --sp-strip:clamp(8px,1vw,16px);       /* separations verticales du bandeau */

  --ease:cubic-bezier(.22,.61,.36,1);
  --slow:.75s var(--ease);
  --med:.42s var(--ease);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Myriad Pro",-apple-system,"Segoe UI",sans-serif;
  font-weight:300;
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* --- typographie -------------------------------------- */
.h-xl,.h-l,.h-m,.h-s{
  font-weight:600;
  letter-spacing:.012em;   /* évoque le SemiExtended de la charte */
  line-height:1.06;
  margin:0;
  text-wrap:balance;
}
.h-xl{font-size:clamp(2.6rem,6.2vw,6.2rem)}
.h-l {font-size:clamp(2rem,4.2vw,3.9rem);line-height:1.08}
.h-m {font-size:clamp(1.4rem,2.1vw,2.05rem);line-height:1.14}
.h-s {font-size:clamp(1.05rem,1.25vw,1.24rem);line-height:1.25}

.eyebrow{
  font-size:.735rem;font-weight:600;letter-spacing:.19em;
  text-transform:uppercase;color:var(--blue);margin:0 0 1.1rem;
}
.eyebrow--mute{color:var(--ink-40)}
.lede{font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.62;max-width:56ch;color:var(--ink-60);font-weight:300}
.meta{font-size:.83rem;letter-spacing:.05em;color:var(--ink-40)}

/* --- structure ---------------------------------------- */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.section{padding-block:clamp(72px,9vw,150px)}
.section--tight{padding-block:clamp(52px,6vw,96px)}
.section--paper{background:var(--paper-2)}
.rule{height:1px;background:var(--ink-12);border:0;margin:0}

/* --- en-tête ------------------------------------------ */
.head{
  position:fixed;inset:0 0 auto;z-index:60;height:var(--head);
  display:flex;align-items:center;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--med),background var(--med);
}
.head.is-stuck{border-bottom-color:var(--ink-12)}
.head__in{display:flex;align-items:center;gap:clamp(16px,3vw,52px);width:100%}
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.brand img{width:52px;height:52px}
.brand__txt{font-size:.775rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.brand__txt span{display:block;font-size:.6rem;font-weight:300;letter-spacing:.13em;color:var(--ink-40);margin-top:2px}

.nav{display:flex;gap:clamp(16px,2.2vw,34px);margin-inline:auto}
.nav a{
  position:relative;font-size:.895rem;font-weight:400;padding-block:6px;
  color:var(--ink-60);transition:color var(--med);
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1.5px;width:100%;
  background:var(--blue);transform:scaleX(0);transform-origin:left;
  transition:transform var(--med);
}
.nav a:hover,.nav a[aria-current]{color:var(--ink)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}

.contact-inline{display:flex;align-items:center;gap:18px;flex:0 0 auto;font-size:.865rem}
.contact-inline a{display:flex;align-items:center;gap:7px;color:var(--ink-60);transition:color var(--med)}
.contact-inline a:hover{color:var(--blue)}
.contact-inline svg{width:14px;height:14px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.6}
.contact-inline .sep{width:1px;height:15px;background:var(--ink-12)}

.lang{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-left:18px;font-size:.79rem;letter-spacing:.08em;font-weight:600}
.lang a{color:var(--ink-40);transition:color var(--med)}
.lang a:hover{color:var(--ink)}
.lang a[aria-current]{color:var(--blue)}
.lang span{color:var(--ink-12)}

.burger{display:none;width:38px;height:38px;align-items:center;justify-content:center;margin-left:auto}
.burger span{display:block;width:19px;height:1.5px;background:var(--ink);position:relative;transition:background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:19px;height:1.5px;background:var(--ink);transition:transform var(--med)}
.burger span::before{top:-6px}.burger span::after{top:6px}
body.nav-open .burger span{background:transparent}
body.nav-open .burger span::before{transform:translateY(6px) rotate(45deg)}
body.nav-open .burger span::after{transform:translateY(-6px) rotate(-45deg)}

/* --- héros -------------------------------------------- */
.hero{position:relative;height:min(72vh,660px);min-height:420px;overflow:hidden;background:var(--ink);margin-top:calc(var(--head) + var(--sp))}
.hero,.split,.strip{width:min(100% - var(--gut) * 2, var(--maxw));margin-inline:auto}
.hero .wrap{max-width:none;padding-inline:clamp(22px,3vw,48px)}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.05);transition:opacity 1.3s var(--ease),transform 2.4s var(--ease)}
.hero__img.is-in{opacity:1;transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.18) 0%,rgba(0,0,0,0) 24%,rgba(0,0,0,0) 48%,rgba(0,0,0,.26) 72%,rgba(0,0,0,.54) 100%)}
.hero__body{position:absolute;inset:auto 0 0;z-index:2;padding-bottom:clamp(38px,6vw,76px);color:#fff;text-shadow:0 1px 20px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.3)}
.hero__body .h-xl{max-width:19ch}
.hero__title{display:flex;align-items:center;gap:clamp(14px,1.8vw,30px)}
.hero__logo{flex:0 0 auto;width:auto;height:calc(2.12 * clamp(2.6rem,6.2vw,6.2rem));filter:drop-shadow(0 2px 14px rgba(0,0,0,.45))}
.hero__sub{margin:1.15rem 0 0;max-width:48ch;font-size:clamp(1rem,1.3vw,1.24rem);color:rgba(255,255,255,.82);font-weight:300}
.hero__scroll{position:absolute;right:clamp(22px,3vw,48px);bottom:clamp(38px,6vw,76px);z-index:2;display:flex;align-items:center;gap:10px;color:rgba(255,255,255,.7);font-size:.72rem;letter-spacing:.17em;text-transform:uppercase}
.hero__scroll i{display:block;width:34px;height:1px;background:currentColor;animation:slide 2.2s var(--ease) infinite}
.hero__scroll{cursor:pointer;transition:color var(--med)}
.hero__scroll:hover{color:#fff}
.hero__scroll:hover i{animation-play-state:paused;transform:scaleX(1)}
@keyframes slide{0%{transform:scaleX(.2);transform-origin:left}50%{transform:scaleX(1);transform-origin:left}51%{transform:scaleX(1);transform-origin:right}100%{transform:scaleX(.2);transform-origin:right}}

/* --- bifurcation des deux pôles ----------------------- */
[id]{scroll-margin-top:var(--head)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp);background:var(--paper);margin-top:var(--sp)}
.pole{position:relative;display:block;overflow:hidden;background:var(--ink);aspect-ratio:4/3.05}
.pole__img{width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1.1s var(--ease),filter var(--slow)}
.pole::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(0,124,176,.10) 0%,rgba(0,0,0,0) 42%,rgba(0,0,0,.68) 100%);transition:opacity var(--slow)}
.pole__body{position:absolute;inset:auto 0 0;z-index:2;padding:clamp(24px,3.2vw,52px);color:#fff}
.pole__body .h-l{max-width:14ch}
.pole__go{display:inline-flex;align-items:center;gap:11px;margin-top:1.1rem;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.pole__go i{display:block;width:26px;height:1px;background:currentColor;transition:width var(--med)}
.pole:hover .pole__img{transform:scale(1.055)}
.pole:hover .pole__go i{width:46px}
/* liseré diagonal : rappel du logo */
.pole__edge{position:absolute;right:0;bottom:0;z-index:3;width:clamp(56px,6vw,88px);aspect-ratio:1;background:var(--cyan);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:0;transform:translate(14px,14px);transition:opacity var(--slow),transform var(--slow)}
.pole:hover .pole__edge{opacity:1;transform:translate(0,0)}

/* --- grille de projets -------------------------------- */
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(20px,2.4vw,42px)}
.card{grid-column:span 6;display:block}
.card--wide{grid-column:span 12}
.card--third{grid-column:span 4}
.card__media{display:block;position:relative;overflow:hidden;background:var(--paper-2);aspect-ratio:3/2}
.card--tall .card__media{aspect-ratio:4/5}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.05s var(--ease),filter var(--slow)}
.card:hover .card__media img{transform:scale(1.04)}
.card__media::after{content:"";position:absolute;inset:0;background:var(--blue);mix-blend-mode:multiply;opacity:0;transition:opacity var(--slow)}
.card:hover .card__media::after{opacity:.08}
.card__body{padding-top:1.35rem;display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.card__t{display:block;font-weight:600;font-size:clamp(1.02rem,1.15vw,1.18rem);letter-spacing:.01em;line-height:1.3}
.card__k{display:block;font-size:.79rem;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-40);white-space:nowrap;flex:0 0 auto}
.card__d{margin:.34rem 0 0;font-size:.93rem;color:var(--ink-60);max-width:52ch}

/* --- bandeau clients ---------------------------------- */
.clients{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:clamp(26px,5vw,72px)}
.clients img{
  height:clamp(24px,2.5vw,34px);width:auto;
  filter:grayscale(1) opacity(.42) contrast(.85);
  transition:filter var(--slow);
}
.clients img:hover{filter:grayscale(1) opacity(.8) contrast(1)}
.clients .c-sq{height:clamp(34px,3.4vw,46px)}

/* --- avant / après ------------------------------------ */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp)}
.ba figure{margin:0;position:relative}
.ba img{width:100%;aspect-ratio:3/2;object-fit:cover}
.ba figcaption{
  position:absolute;left:0;top:0;padding:7px 13px;background:rgba(255,255,255,.93);
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
}

/* --- équipe (survol sérieux → complice) ---------------- */
.team{position:relative;overflow:hidden;background:var(--paper-2);cursor:pointer}
/* Fondu volontairement lent : entre les deux prises le groupe s'est resserré.
   Un fondu court se lirait comme un défaut de calage, un fondu long comme un mouvement. */
.team img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:opacity .72s var(--ease)}
.team__b{position:absolute;inset:0;opacity:0}
.team:hover .team__b,.team.is-flipped .team__b{opacity:1}
.team:hover .team__a,.team.is-flipped .team__a{opacity:0}
.team__hint{
  position:absolute;right:16px;bottom:16px;z-index:3;
  display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:rgba(255,255,255,.9);font-size:.7rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-60);
  transition:opacity var(--med);
}
.team:hover .team__hint,.team.is-flipped .team__hint{opacity:0}

.team__names{margin:1.1rem 0 0;font-size:.86rem;letter-spacing:.03em;color:var(--ink-40)}

.about-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.5vw,80px);align-items:start;margin-top:.8rem}
.about-intro h1{max-width:15ch}
.about-intro .lede{max-width:none}
@media(max-width:860px){.about-intro{grid-template-columns:1fr;gap:clamp(18px,3vw,30px)}.about-intro .lede{max-width:56ch}}

.pull{margin:clamp(44px,5vw,80px) 0 0;padding-left:clamp(18px,2vw,30px);border-left:2px solid var(--cyan);max-width:none}
.pull q{quotes:"«\00a0" "\00a0»";display:block;font-size:clamp(1.35rem,2.4vw,2.05rem);font-weight:600;letter-spacing:.012em;line-height:1.18}
.pull cite{display:block;margin-top:.9rem;font-style:normal;font-size:.755rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-40);font-weight:600}

.founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4.5vw,84px);margin-top:clamp(24px,3vw,44px)}
.founder{padding-top:26px;border-top:1px solid var(--ink-12)}
.li{display:inline-flex;align-items:center;justify-content:center;vertical-align:.04em;margin-left:.45em;width:.78em;height:.78em;color:var(--ink-40);transition:color var(--med)}
.li svg{width:100%;height:100%;fill:currentColor}
.li:hover{color:var(--blue)}
.founder__role{margin:.7rem 0 1.1rem;font-size:.755rem;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);font-weight:600}
.founder .lede{font-size:1rem;max-width:none}
@media(max-width:720px){.founders{grid-template-columns:1fr}}
.roster{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:1.6rem}
.roster li{list-style:none;font-size:.9rem;color:var(--ink-60)}
.roster b{font-weight:600;color:var(--ink)}

/* --- pied de page ------------------------------------- */
.foot{background:var(--ink);color:rgba(255,255,255,.7);padding-block:clamp(56px,6vw,92px) 30px}
.foot a{color:rgba(255,255,255,.7);transition:color var(--med)}
.foot a:hover{color:var(--cyan)}
.foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(28px,4vw,64px);align-items:start}
.foot__mark{width:44px;height:44px;margin-bottom:1.3rem}
.foot__big{color:#fff;font-size:clamp(1.5rem,2.6vw,2.3rem);font-weight:600;letter-spacing:.012em;line-height:1.12;margin:0 0 1.5rem}
.foot h4{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.38);font-weight:600;margin:0 0 .95rem}
.foot p{margin:0 0 .4rem;font-size:.95rem}
.foot__tel{font-size:1.12rem;color:#fff;font-weight:400}
.foot__bar{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;margin-top:clamp(40px,5vw,72px);padding-top:24px;border-top:1px solid rgba(255,255,255,.12);font-size:.79rem;color:rgba(255,255,255,.42)}

/* --- fiche projet ------------------------------------- */
.pj-head{padding-top:calc(var(--head) + clamp(46px,6vw,96px))}
.pj-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:clamp(20px,2.6vw,44px);margin-top:clamp(34px,4vw,58px);padding-top:30px;border-top:1px solid var(--ink-12)}
.pj-facts dt{font-size:.71rem;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-40);font-weight:600}
.pj-facts dd{margin:.5rem 0 0;font-size:1.02rem;font-weight:400}
/* credit architecte : le logo au-dessus du nom, en gris comme les libelles */
.pj-facts .dd-archi{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.archi-logo{height:44px;width:auto;opacity:.92}
.archi-lien{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem;color:inherit}
.archi-lien .archi-logo{transition:opacity var(--med)}
.archi-lien span{transition:color var(--med)}
.archi-lien:hover .archi-logo{opacity:1}
.archi-lien:hover span{color:var(--blue)}
.shots{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp)}
.shots figure{margin:0;grid-column:span 12}
.shots .s6{grid-column:span 6}
.shots .s7{grid-column:span 7}
.shots .s5{grid-column:span 5}
.shots .s4{grid-column:span 4}
.shots img{width:100%;object-fit:cover}
.shots .r32 img{aspect-ratio:3/2}
.shots .r45 img{aspect-ratio:4/5}
.shots .r219 img{aspect-ratio:2.1/1}

.pj-next{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.btn-line{display:inline-flex;align-items:center;gap:12px;font-size:.83rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--blue)}
.btn-line i{display:block;width:28px;height:1px;background:currentColor;transition:width var(--med)}
.btn-line:hover i{width:48px}

/* --- apparition au défilement ------------------------- */
.rise{opacity:0;transform:translateY(24px);transition:opacity .82s var(--ease),transform .82s var(--ease)}
.rise.is-in{opacity:1;transform:none}
.rise[data-d="1"]{transition-delay:.09s}
.rise[data-d="2"]{transition-delay:.18s}
.rise[data-d="3"]{transition-delay:.27s}

/* --- adaptations ---------------------------------------*/
@media (max-width:860px){
  /* Le nom en toutes lettres ne tient plus a cote du telephone,
     du selecteur de langue et du bouton menu : le logo suffit a identifier. */
  .brand__txt{display:none}
  .contact-inline{margin-left:auto}
  .burger{margin-left:8px}
}
@media (max-width:420px){
  .contact-inline a span,.contact-inline a{font-size:.8rem}
  .lang{margin-left:10px}
}
@media (max-width:1080px){
  .nav{display:none;position:fixed;inset:var(--head) 0 auto;flex-direction:column;gap:0;background:#fff;border-bottom:1px solid var(--ink-12);padding:8px var(--gut) 22px}
  body.nav-open .nav{display:flex}
  .nav a{padding-block:13px;font-size:1.05rem;border-bottom:1px solid var(--ink-12)}
  .nav a:last-child{border-bottom:0}
  .burger{display:flex}
  .contact-inline .mail,.contact-inline .sep{display:none}
  .brand__txt span{display:none}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  /* Le texte du hero occupe bien plus de hauteur sur petit ecran :
     il lui faut un fond plus soutenu pour rester lisible. */
  .hero::after{background:linear-gradient(180deg,rgba(0,0,0,.16) 0%,rgba(0,0,0,0) 16%,rgba(0,0,0,0) 50%,rgba(0,0,0,.32) 68%,rgba(0,0,0,.74) 100%)}
  .hero__body{text-shadow:0 1px 16px rgba(0,0,0,.75),0 1px 3px rgba(0,0,0,.5)}
  .split{grid-template-columns:1fr}
  .pole{aspect-ratio:3/2.4}
  .card,.card--third,.card--wide{grid-column:span 12}
  .ba{grid-template-columns:1fr}
  .shots .s6,.shots .s7,.shots .s5{grid-column:span 12}
  .shots .s4{grid-column:span 6}
  .foot__grid{grid-template-columns:1fr}
  .clients{gap:26px 34px;justify-content:flex-start}
  .hero__scroll{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none}
  .hero__img{opacity:1;transform:none}
}

/* --- impression / export PDF ---------------------------
   Les apparitions au défilement dépendent d'un observateur qui ne se
   déclenche pas hors écran : sans ces règles, tout ce qui est sous la
   ligne de flottaison sortirait blanc. */
@media print{
  .rise{opacity:1!important;transform:none!important}
  .hero__img{opacity:1!important;transform:none!important}
  .head{position:static!important;background:#fff!important;backdrop-filter:none!important;border-bottom:1px solid var(--ink-12)}
  .hero{height:auto!important;min-height:0!important}
  .hero__img{position:relative!important;height:auto!important;max-height:none}
  .hero::after{display:none}
  .hero__body{position:static!important;color:var(--ink)!important;padding-block:22px 0}
  .hero__sub{color:var(--ink-60)!important}
  .hero__scroll{display:none}
  .hero__logo{content:url("../logo/dlw-mark.svg");filter:none!important}
  .pole::after{background:linear-gradient(200deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.55) 100%)}
  .team__hint{display:none}
  .section{padding-block:34px}
  .foot{background:var(--ink)!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  *{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card,.pole,.shots figure,.founder,.ba{break-inside:avoid;page-break-inside:avoid}
}

/* --- bandeau de photos (accueil) -----------------------
   Defilement horizontal continu et lent. La bande est doublee dans le
   HTML : la translation de -50% ramene exactement au point de depart,
   sans saut visible. */
.strip{overflow:hidden;background:var(--paper);position:relative;margin-block:var(--sp)}
.strip__track{display:flex;width:max-content;animation:strip 90s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
/* marge a droite de CHAQUE vignette, derniere comprise : la translation de -50% reste exacte */
.strip figure{margin:0 var(--sp-strip) 0 0;flex:0 0 auto;height:clamp(200px,32vw,400px)}
.strip img{display:block;height:100%;width:auto;object-fit:cover}
@keyframes strip{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
/* voile lateral : la bande semble sortir et entrer du cadre */
.strip::before,.strip::after{content:"";position:absolute;top:0;bottom:0;width:clamp(30px,7vw,110px);z-index:2;pointer-events:none}
.strip::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)}
.strip::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)}
@media (prefers-reduced-motion:reduce){
  .strip__track{animation:none}
  .strip{overflow-x:auto}
}

/* Les photos du bandeau mènent à leur fiche projet : il faut que ça se sente. */
.strip a{display:block;height:100%;position:relative;overflow:hidden}
.strip a::after{content:"";position:absolute;inset:0;background:var(--blue);mix-blend-mode:multiply;opacity:0;transition:opacity var(--med)}
.strip a:hover::after,.strip a:focus-visible::after{opacity:.14}
.strip a img{transition:transform .9s var(--ease)}
.strip a:hover img{transform:scale(1.035)}
.strip a:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}

/* --- projets en blocs pleine image (page Bureaux) ------
   Reprend le dispositif des deux entrées de l'accueil : la photo porte
   le texte, au lieu de le placer dessous. */
.split--full{grid-template-columns:1fr}
.pole--wide{aspect-ratio:2.5/1}
.pole__d{display:block;margin-top:.7rem;max-width:52ch;font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.78)}
.pole--soon{cursor:default}
.pole--soon .pole__go{color:rgba(255,255,255,.55)}
.pole--soon:hover .pole__img{transform:scale(1.01)}
@media (max-width:900px){
  .pole--wide{aspect-ratio:3/2.2}
  .pole__d{font-size:.9rem}
}


/* Deux blocs de projets qui se suivent se séparent comme les colonnes :
   un simple filet, pas la respiration qui isole les sections. */
.split + .split{margin-top:var(--sp)}