:root{
  --ink:#3D4A5C;
  --ink-soft:#4E5C70;
  --paper:#FDF8F2;
  --paper-soft:#FBE3C4;
  --blush:#E7EEF5;
  --moss:#C2703A;
  --moss-deep:#9C5228;
  --gold:#FAC098;
  --ivory:#FBF3E4;
  --line-light: rgba(61,74,92,0.12);
  /* --max et --line-dark viennent de tokens.css, chargé avant ce fichier */
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
section[id], header[id]{scroll-margin-top:88px;}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
h1,h2,h3,h4{
  font-family:'Bricolage Grotesque', sans-serif;
  font-weight:600;
  letter-spacing:-0.025em;
  line-height:1.02;
}
.mono{
  font-family:'IBM Plex Mono', monospace;
  letter-spacing:0.06em;
  text-transform:uppercase;
}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
section{position:relative;}
::selection{background:var(--gold); color:var(--ink);}

/* ---------- NAV ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(253,251,248,0.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-light);
}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.nav-logo{font-family:'Bricolage Grotesque', sans-serif; font-weight:500; font-size:18px; letter-spacing:0.01em; display:flex; align-items:center;}
.nav-logo img{height:38px; width:38px; display:block; margin-right:12px;}
.nav-logo .nom span{color:var(--moss);}
.nav-logo .nom{display:block; line-height:1.05;}
.nav-logo .baseline{display:block; margin-top:3px; font-family:'IBM Plex Mono', monospace; font-size:9px; font-weight:500; letter-spacing:0.11em; text-transform:uppercase; color:rgba(61,74,92,0.55);}
.nav-links{display:flex; gap:24px; align-items:center;}
.nav-links a{font-size:12px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; font-family:'IBM Plex Mono', monospace; opacity:0.75; transition:opacity .2s; position:relative;}
.nav-links a:not(.nav-cta)::after{content:""; position:absolute; left:0; right:100%; bottom:-4px; height:1.5px; background:var(--moss); transition:right .3s cubic-bezier(.2,.8,.2,1);}
.nav-links a:not(.nav-cta):hover::after{right:0;}
.nav-links a:hover{opacity:1;}
.nav-links a.actif{opacity:1; color:var(--moss-deep);}
.nav-links a.actif:not(.nav-cta)::after{right:0;}
.nav-cta{padding:9px 16px; border:1px solid var(--ink); border-radius:2px; font-size:11.5px !important;}
.nav-toggle{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.nav-toggle span{width:22px; height:2px; background:var(--ink); display:block;}

/* ---------- HERO ---------- */
.hero{background:var(--paper-soft); color:var(--ink); padding:150px 0 88px; overflow:hidden;}
.hero .wrap{
  display:grid; grid-template-columns:1.05fr 0.85fr; gap:60px; align-items:center; position:relative;
}
.eyebrow{font-size:12px; color:var(--moss); font-weight:700; margin-bottom:24px; display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--moss); display:inline-block; animation:pulse 2.2s ease-in-out infinite;}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.5); opacity:0.55;}}
.contact .eyebrow{color:var(--gold);}
.contact .eyebrow::before{background:var(--gold);}
.hero h1{font-size:clamp(40px, 5.4vw, 72px);}
.hero h1 em{color:var(--moss-deep); font-style:normal; font-weight:800;}
.hero-sub{max-width:480px; margin-top:24px; font-size:17.5px; color:rgba(61,74,92,0.82); line-height:1.5;}
.hero-sub2{max-width:480px; margin-top:16px; font-size:15.5px; color:rgba(61,74,92,0.68);}
.hero-cta{display:flex; gap:16px; margin-top:38px; flex-wrap:wrap;}
.btn{padding:16px 28px; font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:12.5px; letter-spacing:0.06em; text-transform:uppercase; border-radius:2px; display:inline-block; transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, background .25s ease; cursor:pointer; border:1px solid transparent; will-change:transform;}
.btn:hover{transform:translateY(-3px); box-shadow:0 14px 28px rgba(61,74,92,0.18);}
.btn:active{transform:translateY(-1px);}
.btn-solid{background:var(--gold); color:var(--ink);}
.btn-solid:hover{background:var(--ivory);}
.btn-outline{border-color:rgba(251,243,228,0.4); color:var(--ivory);}
.btn-outline:hover{border-color:var(--ivory);}
.btn-outline-dark{border-color:var(--ink); color:var(--ink);}
.btn-outline-dark:hover{background:var(--ink); color:var(--ivory);}
.hero-credit{margin-top:52px; padding-top:22px; border-top:1px solid var(--line-light); font-size:13.5px; color:rgba(61,74,92,0.62); max-width:470px; line-height:1.55;}

.photo-block{
  position:relative; overflow:hidden; border-radius:2px;
  background:linear-gradient(150deg, var(--moss-deep) 0%, var(--ink) 65%, #232B36 100%);
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.photo-block:hover{transform:scale(1.025);}
.photo-block img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;}
.photo-block .frame-corner{z-index:1;}
.photo-block .caption{z-index:2;}
.photo-block .frame-corner{position:absolute; top:14px; left:14px; right:14px; bottom:14px; border:1px solid rgba(251,243,228,0.22); pointer-events:none;}
.photo-block .caption{position:absolute; bottom:16px; left:16px; right:16px; display:flex; justify-content:space-between; align-items:flex-end;}
.photo-block .caption .mono{font-size:9.5px; color:rgba(251,243,228,0.62); letter-spacing:0.05em;}
.photo-block.on-paper{background:linear-gradient(150deg, var(--moss) 0%, var(--ink-soft) 70%);}
.photo-block.on-paper .caption .mono{color:rgba(251,243,228,0.75);}

.hero-photo-bloc{min-width:0;}
.hero-photo{aspect-ratio:1080/1500;}
.hero-photo img{object-position:center 15%;}


/* ---------- BANDEAU CHIFFRES ---------- */
.chiffres-band{background:var(--blush); padding:52px 0;}
.chiffres-band .wrap{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.chiffres-band b{display:block; font-family:'Bricolage Grotesque', sans-serif; font-size:clamp(28px,3.2vw,40px); font-weight:700; letter-spacing:-0.02em; color:var(--moss-deep); line-height:1;}
.chiffres-band span{display:block; margin-top:10px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(61,74,92,0.6);}

/* ---------- TRIPTYQUE (projet mis en avant) ---------- */
.triptyque-head{background:var(--paper); padding:80px 0 34px;}
.triptyque-head h2{max-width:640px;}
.triptyque-head .lede{margin-top:18px; font-size:16px; color:rgba(61,74,92,0.68); max-width:560px;}
.triptyque{background:var(--paper); max-width:var(--max); margin:0 auto; padding:0 32px;}
.triptyque-track{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.triptyque-track .copie{display:none;}   /* le second jeu ne sert qu'au ruban mobile */
.triptyque .photo-block{aspect-ratio:4/5;}
.triptyque .photo-block img{object-position:center 22%;}
/* --defile-x : distance exacte entre une image et sa copie, mesurée en JS. Un pourcentage
   supposerait que les deux moitiés du ruban font la même largeur au pixel près, et le
   moindre écart se voit comme un saut à chaque boucle. */
@keyframes defile-triptyque{ from{transform:translateX(0);} to{transform:translateX(calc(-1 * var(--defile-x, 0px)));} }
.triptyque-note{background:var(--paper); padding:30px 0 64px;}
.triptyque-note .wrap{display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:end;}
.triptyque-row{display:flex; flex-direction:column; align-items:flex-start; gap:16px;}
.triptyque-row > p{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(61,74,92,0.55);}

/* ---------- MARQUEE ---------- */
.marquee-band{background:var(--blush); color:var(--moss-deep); overflow:hidden; padding:20px 0 18px;}
.marquee-label{text-align:center; font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.16em; text-transform:uppercase; color:rgba(156,82,40,0.6); margin-bottom:12px;}
.marquee-track{display:flex; width:max-content; animation:scroll 30s linear infinite;}
.marquee-track span{font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:13.5px; letter-spacing:0.12em; text-transform:uppercase; padding:0 34px; white-space:nowrap; opacity:0.9;}
.marquee-track span:not(:last-child)::after{content:"·"; margin-left:34px; opacity:0.4;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* ---------- SECTION HEAD ---------- */
.sec-head{margin-bottom:56px; max-width:640px;}
.light .sec-head .eyebrow{color:var(--moss);}
.light .sec-head .eyebrow::before{background:var(--moss);}
.dark .sec-head .eyebrow{color:var(--gold);}
.dark .sec-head .eyebrow::before{background:var(--gold);}
h2, .sec-head h2, .triptyque-head h2, .projet-titre{font-size:clamp(30px, 3.8vw, 50px);}
.cs-stages-title, .avis cite{font-size:inherit;}
.sec-head p.lede{margin-top:18px; font-size:16px; color:rgba(61,74,92,0.68); max-width:560px;}
.dark .sec-head p.lede{color:rgba(251,243,228,0.68);}

/* ---------- PROJETS (selection grid) ---------- */
.projets{padding:88px 0 56px; background:var(--paper);}
.proj-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px;}

.proj-grid-full{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.proj-card{display:block; transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.proj-card:hover{transform:translateY(-5px);}
.proj-card .photo-block{aspect-ratio:4/3; margin-bottom:14px;}
.pc-tag{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:var(--moss); display:block; margin-bottom:6px;}
.proj-card h3{font-size:18px; font-weight:600;}
.proj-tile{display:block; transition:transform .4s cubic-bezier(.2,.8,.2,1);}
.proj-tile:hover{transform:translateY(-6px);}
.proj-tile .photo-block{aspect-ratio:5/4; margin-bottom:18px;}
.proj-tile .idx{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--moss); display:block; margin-bottom:8px;}
.proj-tile h3{font-size:24px; margin-bottom:8px;}
.proj-tile p{font-size:14.5px; color:rgba(61,74,92,0.68); max-width:420px;}
.explore-tile{grid-column:1 / -1; margin-top:8px; padding:36px; border:1px solid var(--line-light); border-radius:2px; display:flex; flex-wrap:wrap; gap:32px; align-items:flex-start; justify-content:space-between;}
.explore-tile .exp-head{max-width:360px;}
.explore-tile .exp-head .idx{font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:var(--moss); display:block; margin-bottom:8px;}
.explore-tile h3{font-size:21px; margin-bottom:8px;}
.explore-tile p{font-size:14px; color:rgba(61,74,92,0.65);}
.exp-tags{display:flex; flex-wrap:wrap; gap:10px; max-width:440px;}
.exp-tags span{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; padding:8px 13px; border:1px solid var(--line-light); border-radius:2px; color:var(--moss-deep);}

/* ---------- CASE STUDY: DOUCEUR ---------- */
.douceur{background:var(--paper-soft); padding:88px 0;}
.cs-top{display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; margin-bottom:64px;}
.cs-top .photo-block.on-paper{aspect-ratio:4/5;}
.cs-intro p:not(.eyebrow){font-size:16.5px; color:rgba(61,74,92,0.78); margin-bottom:18px;}
.projet-titre{letter-spacing:-0.02em; margin-bottom:22px;}
.cs-intro h2 + p{font-size:19px; font-family:'Bricolage Grotesque', sans-serif; font-weight:400; color:var(--ink); line-height:1.44;}
h2.cs-stages-title{font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-0.02em; margin-top:8px;}
.cs-planche-note + .cs-stages-title{margin-top:72px;}
.cs-stages-lede{font-size:15px; color:rgba(61,74,92,0.65); margin-top:8px; max-width:560px;}
/* Frise horizontale : un filet traverse la rangée, chaque étape pose sa pastille
   dessus. La dernière est pleine pour marquer l'arrivée. */
.cs-stages{display:flex; align-items:flex-start; margin-top:40px; position:relative;}
.cs-stages::before{content:""; position:absolute; left:-26px; right:0; top:9px; height:1px; background:rgba(61,74,92,0.18);}
.cs-stage{flex:1; position:relative; padding-right:14px;}
.cs-stage::before{content:""; position:absolute; left:0; top:4px; width:11px; height:11px; border-radius:50%; background:var(--paper-soft); border:1.5px solid var(--moss); box-sizing:border-box;}
.cs-stage .n{display:block; margin-top:26px; font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.08em; color:var(--moss);}
.cs-stage .t{display:block; margin-top:7px; font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3;}
.cs-stage:last-child::after{content:""; position:absolute; left:0; top:4px; width:11px; height:11px; border-radius:50%; background:var(--moss);}
.cs-role{margin-top:60px;}
.cs-role h4{font-size:13px; text-transform:uppercase; letter-spacing:0.06em; font-family:'IBM Plex Mono', monospace; color:var(--moss-deep); margin-bottom:18px; font-weight:600;}
.cs-role-list{list-style:none; columns:2; column-gap:48px;}
.cs-role-list li{font-size:15px; color:rgba(61,74,92,0.75); padding:9px 0 9px 20px; position:relative; border-bottom:1px solid var(--line-light); break-inside:avoid;}
.cs-role-list li::before{content:"·"; position:absolute; left:0; color:var(--moss);}
.cs-note{font-size:13.5px; color:rgba(61,74,92,0.55);  margin-top:18px; max-width:460px;}
.cs-gallery{display:grid; grid-template-columns:1.3fr 1fr; gap:20px; margin:64px 0;}
.cs-gallery .photo-block.on-paper:first-child{aspect-ratio:3/2;}
.cs-gallery .photo-block.on-paper:last-child{aspect-ratio:4/5;}
.cs-quotes{display:grid; grid-template-columns:0.5fr 1fr; gap:1px; background:var(--line-light); border:1px solid var(--line-light); margin-top:60px; align-items:stretch;}
.quote-photo{aspect-ratio:4/5;}
.quote-card{background:var(--paper-soft); padding:36px 30px; transition:transform .4s cubic-bezier(.2,.8,.2,1); display:flex; flex-direction:column; justify-content:center;}
.cs-coulisses{display:grid; grid-template-columns:1fr 0.85fr; gap:48px; align-items:center; margin-top:64px;}
.cs-coulisses .photo-block{order:2;}
.cs-coulisses .photo-block{aspect-ratio:4/5;}
.cs-coulisses p{font-size:16.5px; color:rgba(61,74,92,0.78); margin-bottom:16px;}
.cs-coulisses p:first-of-type{font-size:19px; font-family:'Bricolage Grotesque', sans-serif; font-weight:400; color:var(--ink); line-height:1.44;}
.cs-planche{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:64px;}
.cs-planche .photo-block{aspect-ratio:4/5;}
.cs-planche-note{margin-top:16px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(61,74,92,0.5);}
.quote-card:hover{transform:translateY(-4px);}
.quote-card .mark{font-family:'Bricolage Grotesque', sans-serif; font-size:38px; color:var(--gold);  line-height:1; margin-bottom:14px;}
.quote-card p{font-size:17px; color:var(--ink); line-height:1.5; margin-bottom:16px;}
.quote-card cite{font-family:'IBM Plex Mono', monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:0.05em; color:var(--moss); font-style:normal;}
.cs-result{margin-top:30px; padding:22px 26px; border-left:2px solid var(--gold); background:rgba(250,192,152,0.08);}
.cs-result p{font-size:14px; color:rgba(61,74,92,0.8);}
.cs-link{display:inline-block; margin-top:36px; font-family:'IBM Plex Mono', monospace; font-size:12px; letter-spacing:0.05em; text-transform:uppercase; color:var(--moss-deep); border-bottom:1px solid var(--moss-deep); padding-bottom:3px;}

/* ---------- KQUEO ---------- */
.kqueo{background:var(--paper); color:var(--ink); padding:88px 0;}
.kqueo .wrap{display:grid; grid-template-columns:0.9fr 1.1fr; column-gap:64px; row-gap:56px; align-items:start;}
.kqueo-univers{display:grid; gap:14px; align-content:start;}
.kqueo .kqueo-univers .photo-block{aspect-ratio:16/9;}
.kqueo-univers-note{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(61,74,92,0.45); margin-top:4px;}
.kqueo-body p:not(.eyebrow){font-size:16px; color:rgba(61,74,92,0.8); margin-bottom:20px; max-width:540px;}
.kqueo-body p.callout{font-size:19px; font-family:'Bricolage Grotesque', sans-serif; font-weight:700; color:var(--moss-deep); line-height:1.34; }

/* Encart avis client, réutilisable ; .avis-large pour la variante pleine largeur */
.avis{margin-top:34px; padding:26px 30px; background:rgba(250,192,152,0.14); border-left:2px solid var(--gold);}
.avis .guillemet{font-family:'Bricolage Grotesque', sans-serif; font-size:30px; line-height:1; color:var(--gold); display:block; margin-bottom:10px;}
.avis p{font-size:15px; color:rgba(61,74,92,0.86); line-height:1.6;}
.avis p + p{margin-top:12px;}
.avis cite{display:block; margin-top:16px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-style:normal; letter-spacing:0.05em; text-transform:uppercase; color:var(--moss-deep);}
.avis-large{max-width:none; margin:0; padding:22px 26px;}
.avis-large p{font-size:14.5px;}
.avis-large .guillemet{font-size:24px; margin-bottom:6px;}
.avis-large cite{margin-top:12px;}

.kqueo-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.kqueo-tags span{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; padding:8px 13px; border:1px solid rgba(61,74,92,0.2); border-radius:2px; color:var(--moss-deep);}
/* Trois teintes qui alternent, pour que la liste de tags respire */
.kqueo-tags span:nth-child(3n+1){background:rgba(250,192,152,0.22); border-color:rgba(194,112,58,0.30);}
.kqueo-tags span:nth-child(3n+2){background:rgba(231,238,245,0.80); border-color:rgba(61,74,92,0.18);}
.kqueo-tags span:nth-child(3n){background:rgba(251,243,228,0.95); border-color:rgba(156,82,40,0.22);}
.kqueo-since{font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--moss-deep); margin-top:30px; display:block;}
.kqueo-chiffres{grid-column:1 / -1; margin-top:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(61,74,92,0.14); border:1px solid rgba(61,74,92,0.14);}
.kq-chiffre{background:var(--paper); padding:30px 24px;}
.kq-chiffre .n{font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:clamp(30px,3vw,40px); color:var(--moss-deep); line-height:1; letter-spacing:-0.03em; margin-bottom:12px;}
.kq-chiffre .l{font-size:13px; color:rgba(61,74,92,0.72); line-height:1.45;}

/* ---------- UNIVERS PHOTO (breathing) ---------- */
.univers{background:var(--paper); padding:88px 0;}
.univ-grid{display:grid; grid-template-columns:repeat(3,1fr); column-gap:26px; row-gap:64px;}
.univ-item .photo-block{aspect-ratio:3/4; margin-bottom:18px;}
.univ-item h4{font-size:15.5px; font-weight:500; margin-bottom:4px;}
.univ-item p{font-size:13px; color:rgba(61,74,92,0.6);}
.univ-item .role-detail{margin-top:8px; color:rgba(61,74,92,0.82);}
strong{font-weight:600; color:var(--ink);}
.contact strong, .kqueo-lead strong{color:inherit;}
.univ-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.univ-tags span{font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.05em; text-transform:uppercase; padding:5px 9px; border:1px solid rgba(61,74,92,0.18); border-radius:2px; color:var(--moss-deep);}
.univ-item .role{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--moss); display:block; margin-bottom:6px;}
.univ-item .photo-block.on-noir{background:#000;}
.univ-item .photo-block.on-noir img{inset:0; width:100%; height:100%; object-fit:contain;}
.univ-item .photo-block.on-noir .frame-corner{border-color:rgba(251,243,228,0.18);}
.photo-vide{display:flex; align-items:center; justify-content:center;}
.photo-vide .attente{position:relative; z-index:2; font-family:'IBM Plex Mono', monospace; font-size:9.5px; letter-spacing:0.12em; text-transform:uppercase; color:rgba(251,243,228,0.5); text-align:center; padding:0 16px;}

/* ---------- APPROCHE ---------- */
.approche{background:var(--blush); color:var(--ink); padding:88px 0;}
.approche .sec-head .eyebrow{color:var(--moss-deep);}
.approche .sec-head .eyebrow::before{background:var(--moss-deep);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:rgba(61,74,92,0.14); border:1px solid rgba(61,74,92,0.14);}
.step{background:var(--blush); padding:32px 26px 34px; position:relative;}
.step::before{content:""; position:absolute; left:26px; top:0; width:26px; height:2px; background:var(--moss);}
.step .num{font-family:'Bricolage Grotesque', sans-serif; font-weight:700; font-size:34px; color:var(--moss-deep); margin-bottom:18px;}
.step h4{margin-top:14px; font-size:17px; margin-bottom:10px; font-weight:500;}
.step p{font-size:13.5px; color:rgba(61,74,92,0.7);}

/* Cadre de travail : les engagements qui valent sur tous les projets */
.cadre{margin-top:52px;}
.cadre h3{font-size:15px; font-weight:600; margin-bottom:24px;}
.cadre-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.cadre-item .t{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--moss-deep); display:block; margin-bottom:9px;}
.cadre-item p{font-size:14px; color:rgba(61,74,92,0.72); line-height:1.5;}

/* ---------- APROPOS ---------- */
.apropos{background:var(--paper-soft); padding:88px 0;}
.apropos .wrap{display:grid; grid-template-columns:0.85fr 1.15fr; gap:72px; align-items:start;}
.apropos .photo-block{aspect-ratio:4/5;}
.apropos-body p:not(.eyebrow){margin-bottom:20px; font-size:16.5px; color:rgba(61,74,92,0.82); max-width:560px;}
.apropos-body p:not(.eyebrow):first-of-type{font-size:20px; font-family:'Bricolage Grotesque', sans-serif; font-weight:400; color:var(--ink); line-height:1.42; }
/* Légende sous la photo du portrait */
.credit{margin-top:12px; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; color:rgba(61,74,92,0.5);}
.credit a{color:var(--moss-deep); border-bottom:1px solid rgba(156,82,40,0.3); padding-bottom:1px; transition:border-color .2s;}
.credit a:hover{border-color:var(--moss-deep);}

/* ---------- SIGNAUX DE CONFIANCE ---------- */
.signal-list{display:flex; flex-direction:column; border-top:1px solid rgba(61,74,92,0.16);}
.signal{display:grid; grid-template-columns:90px 1fr; gap:28px; padding:32px 0; border-bottom:1px solid rgba(61,74,92,0.16); align-items:start;}
.signal .tag{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--moss); text-transform:uppercase; letter-spacing:0.05em; padding-top:4px;}
.signal p{font-family:'Bricolage Grotesque', sans-serif; font-weight:600; font-size:19px; color:var(--moss-deep); line-height:1.4;}
.signal cite{display:block; margin-top:10px; font-family:'IBM Plex Mono', monospace; font-size:11px; text-transform:uppercase; letter-spacing:0.05em; color:rgba(61,74,92,0.55); font-style:normal;}

/* ---------- CONTACT ---------- */
.contact{background:var(--ink); color:var(--ivory); padding:104px 0 80px; position:relative; overflow:hidden;}
.contact::before{content:""; position:absolute; right:-120px; top:-120px; width:420px; height:420px; border-radius:50%; background:radial-gradient(circle, rgba(250,192,152,0.16), transparent 70%);}
.contact .wrap{position:relative;}
.contact h2{font-size:clamp(32px, 4.6vw, 56px); max-width:760px;}
.contact h2 em{color:var(--gold); font-style:normal;}
.contact-sub{max-width:480px; color:rgba(251,243,228,0.7); margin-top:20px; font-size:16px;}
.contact-cta{display:flex; gap:18px; margin-top:38px; flex-wrap:wrap; align-items:center;}
.contact-email{font-family:'IBM Plex Mono', monospace; font-size:14px; color:var(--ivory); border-bottom:1px solid var(--gold); padding-bottom:2px;}
.contact-mark{width:52px; height:52px; margin-bottom:28px; opacity:0.92;}

/* .foot, .foot-row, .foot-links, .foot-btn : voir media/css/footer.css (partagé avec /projets/) */

/* ---------- BOUTIQUE PHOTO ---------- */
.faq{background:var(--paper); padding:88px 0;}
.faq-list{max-width:880px; margin-top:52px; border-top:1px solid var(--line-light);}
.faq-item{border-bottom:1px solid var(--line-light);}
.faq-item summary{list-style:none; cursor:pointer; padding:26px 52px 26px 0; position:relative; font-family:'Bricolage Grotesque', sans-serif; font-size:18.5px; font-weight:500; letter-spacing:-0.01em; color:var(--ink); transition:color .2s ease;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary:hover{color:var(--moss-deep);}
.faq-item summary::after{content:"+"; position:absolute; right:8px; top:23px; font-family:'IBM Plex Mono', monospace; font-size:21px; font-weight:400; color:var(--moss);}
.faq-item[open] summary{color:var(--moss-deep);}
.faq-item[open] summary::after{content:"\2013";}
.faq-item .rep{font-size:15.5px; color:rgba(61,74,92,0.78); line-height:1.62; padding:0 64px 28px 0; margin-top:-6px;}
.boutique{background:var(--paper-soft); padding:88px 0;}
.shop-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:44px;}
/* Tirages : la photo entière, posée dans un passe-partout, jamais recadrée. */
.shop-item .photo-block{aspect-ratio:1/1; margin-bottom:14px; background:var(--ivory);}
.shop-item .photo-block img{inset:30px 28px 52px; width:calc(100% - 56px); height:calc(100% - 82px); object-fit:contain;}
.shop-item .photo-block .frame-corner{border-color:rgba(61,74,92,0.13);}
.shop-item .photo-block .caption .mono{color:rgba(61,74,92,0.42);}
.shop-item h4{font-size:15px; font-weight:500; margin-bottom:4px;}
.shop-item .price{font-size:11px; color:var(--moss-deep); display:block;}
.shop-btn{display:inline-block;}


/* ---------- OFFRES ---------- */
.offres{background:var(--paper); padding:88px 0;}
.offre-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-light); border:1px solid var(--line-light);}
.offre{background:var(--paper); padding:38px 28px 32px; display:flex; flex-direction:column;}
.offre .num{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; color:var(--moss); display:block; margin-bottom:16px;}
.offre h3{font-size:23px; margin-bottom:10px;}
.offre .for{font-size:13.5px; color:rgba(61,74,92,0.6); margin-bottom:22px; min-height:38px;}
.offre ul{list-style:none; margin-bottom:26px;}
.offre li{font-size:14.5px; color:rgba(61,74,92,0.78); padding:9px 0 9px 18px; position:relative; border-bottom:1px solid var(--line-light);}
.offre li::before{content:"—"; position:absolute; left:0; color:var(--moss);}
.offre .from{margin-top:auto; padding-top:18px; border-top:1px solid var(--line-light); font-family:'IBM Plex Mono', monospace; font-size:11.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--moss-deep);}
.offre-intro{font-size:15px; color:rgba(61,74,92,0.82); line-height:1.55; margin-bottom:22px;}
.offre-label{font-size:11.5px; letter-spacing:0.04em; color:var(--moss-deep); margin-bottom:10px;}
/* Trame d'une offre : à qui elle s'adresse, le problème, puis la liste sèche */
.offre-pour{font-size:13px; color:var(--moss-deep); margin-bottom:16px; font-family:'IBM Plex Mono', monospace; line-height:1.5;}
.offre-txt{font-size:14.5px; color:rgba(61,74,92,0.8); line-height:1.6; margin-bottom:16px;}
.offre-liste{list-style:none; margin-bottom:6px;}
.offre-liste li{font-size:13.5px; color:rgba(61,74,92,0.72); line-height:1.5; padding:7px 0; border-bottom:1px solid var(--line-light);}
.offre-liste li{padding-left:0;}
.offre-liste li::before{content:none;}
.offre-bloc-txt{margin-bottom:20px;}
.offre-bloc-txt .offre-label{margin-bottom:7px;}
.offre-bloc-txt p{font-size:14.5px; color:rgba(61,74,92,0.78); line-height:1.55;}
.offre-bas{margin-top:auto;}
.offre-note{font-size:13px; color:rgba(61,74,92,0.62); line-height:1.55; padding-top:16px;}
.offre-resultat{background:rgba(250,192,152,0.15); border-left:2px solid var(--gold); padding:14px 16px 15px; margin-bottom:24px;}
.offre-resultat .offre-label{margin-bottom:7px;}
.offre-resultat p:not(.offre-label){font-size:14px; color:var(--ink); line-height:1.5;}
.offre-prix{margin-top:auto; padding-top:14px; border-top:1px solid var(--line-light); font-family:'IBM Plex Mono', monospace;}
.offre-prix div{display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:7px 0; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; border-bottom:1px solid var(--line-light);}
.offre-prix div:last-child{border-bottom:0; padding-bottom:0;}
.offre-prix span{color:rgba(61,74,92,0.6);}
.offre-prix b{font-weight:500; color:var(--moss-deep); white-space:nowrap;}
.offre .from small{display:block; margin-top:6px; font-size:10px; letter-spacing:0.05em; color:rgba(61,74,92,0.5); text-transform:none;}
.offres-cta{margin-top:42px; padding-top:34px; border-top:1px solid var(--line-light); display:flex; align-items:center; justify-content:space-between; gap:36px; flex-wrap:wrap;}
.offres-cta p{font-family:'Bricolage Grotesque', sans-serif; font-size:20px; font-weight:500; letter-spacing:-0.01em; color:var(--ink); max-width:600px; line-height:1.42;}
.offres-cta .mention{font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:400; letter-spacing:0.05em; text-transform:uppercase; color:rgba(61,74,92,0.5); display:block; margin-top:10px;}
/* Bas de la section Offres : encart SEO et missions ponctuelles côte à côte */
.bas-offres{display:grid; grid-template-columns:1.05fr 0.95fr; gap:28px; margin-top:48px; align-items:start;}
.offre-seo{padding:26px 30px; background:rgba(250,192,152,0.16); border-left:2px solid var(--gold);}
.offre-seo h3{font-size:16px; font-weight:600; margin-bottom:10px;}
.offre-seo p{font-size:14.5px; color:rgba(61,74,92,0.8); line-height:1.6;}
.ponctuel{margin-top:0; padding:26px 30px; border:1px solid var(--line-light); border-radius:2px;}
.ponctuel h3{font-size:16.5px; font-weight:600; color:rgba(61,74,92,0.88); margin-bottom:10px;}
.ponctuel p{font-size:14px; color:rgba(61,74,92,0.65); line-height:1.6; max-width:720px;}
.ponctuel-liste{display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 20px;}
.ponctuel-liste span{font-family:'IBM Plex Mono', monospace; font-size:10px; letter-spacing:0.05em; text-transform:uppercase; padding:6px 11px; border:1px solid var(--line-light); border-radius:2px; color:var(--moss-deep);}
.offre-groupe{display:flex; align-items:center; gap:16px; font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:0.09em; text-transform:uppercase; color:var(--moss); margin-bottom:20px;}
.offre-groupe::after{content:""; flex:1; height:1px; background:var(--line-light);}
.offres-note{margin-top:34px; padding-left:18px; border-left:2px solid var(--gold); font-size:14px; color:rgba(61,74,92,0.72); max-width:680px;}

/* ---------- CTA DE SECTION ---------- */
/* Relance en fin de section : une phrase, une mention, un bouton */
.cta-bloc{margin-top:64px; padding-top:30px; border-top:1px solid var(--line-light); display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap;}
.cta-bloc p{font-family:'Bricolage Grotesque', sans-serif; font-size:19.5px; font-weight:500; letter-spacing:-0.01em; color:var(--ink); max-width:560px; line-height:1.4;}
.cta-bloc .mention{display:block; margin-top:9px; font-family:'IBM Plex Mono', monospace; font-size:10.5px; font-weight:400; letter-spacing:0.05em; text-transform:uppercase; color:rgba(61,74,92,0.5);}
.kqueo .cta-bloc{grid-column:1 / -1; margin-top:0;}
.univers .cta-bloc{margin-top:56px;}
@media (max-width: 900px){
  .cta-bloc{margin-top:48px; gap:22px;}
  .cta-bloc p{font-size:17.5px;}
  .cta-bloc .btn{width:100%; text-align:center;}
}

/* ---------- FORMULAIRE ---------- */
.contact-form{margin-top:48px; display:grid; grid-template-columns:1fr 1fr; gap:20px; max-width:740px;}
.field{display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{font-family:'IBM Plex Mono', monospace; font-size:10.5px; letter-spacing:0.06em; text-transform:uppercase; color:rgba(251,243,228,0.62);}
.field input, .field select, .field textarea{
  background:rgba(251,243,228,0.04); border:1px solid var(--line-dark); border-radius:2px;
  color:var(--ivory); font-family:'Inter', sans-serif; font-size:15px; padding:13px 14px;
  transition:border-color .2s ease, background .2s ease; width:100%;
}
.field select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,rgba(251,243,228,.6) 50%),linear-gradient(135deg,rgba(251,243,228,.6) 50%,transparent 50%); background-position:calc(100% - 19px) 22px, calc(100% - 13px) 22px; background-size:6px 6px, 6px 6px; background-repeat:no-repeat; cursor:pointer;}
.field select option{background:var(--ink); color:var(--ivory);}
.field input:hover, .field select:hover, .field textarea:hover{border-color:rgba(251,243,228,0.3);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold); background:rgba(251,243,228,0.07);}
.field textarea{min-height:132px; resize:vertical; line-height:1.55;}
.hp{position:absolute; left:-9999px; opacity:0;}
.form-success{display:none; margin-top:28px; padding:16px 20px; border:1px solid var(--gold); border-radius:2px; background:rgba(250,192,152,0.1); color:var(--ivory); font-size:14.5px; line-height:1.5;}
.form-success.visible{display:block;}
.form-error{display:none; margin-top:16px; font-size:13.5px; color:#FF9B85;}
.form-error.visible{display:block;}
.form-actions{grid-column:1 / -1; display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:4px;}
.form-note{font-size:12.5px; color:rgba(251,243,228,0.55); max-width:300px; line-height:1.5;}
button.btn{font-family:'IBM Plex Mono', monospace;}
.contact-or{margin-top:34px; font-size:13.5px; color:rgba(251,243,228,0.6);}
.contact-or a{border-bottom:1px solid var(--gold); padding-bottom:2px;}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px;}

/* filet de sécurité : si le JS ne charge pas, tout reste visible */
.no-js .reveal{opacity:1; transform:none;}

.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in{opacity:1; transform:translateY(0);}

/* chiffres en cours de comptage : largeur de chiffre fixe, pas de tremblement */
.compte{font-variant-numeric:tabular-nums;}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
  .marquee-track{animation:none;}
  html{scroll-behavior:auto;}
}

@media (max-width: 900px){
  .nav-links{position:fixed; top:72px; left:0; right:0; background:var(--paper); flex-direction:column; align-items:flex-start; padding:24px 32px 32px; gap:18px; border-bottom:1px solid var(--line-light); transform:translateY(-10px); opacity:0; pointer-events:none; transition:all .25s ease; z-index:99;}
  .nav-links.open{transform:translateY(0); opacity:1; pointer-events:auto;}
  .nav-toggle{display:flex;}
  .hero .wrap{grid-template-columns:1fr;}
  /* order sur le conteneur : c'est lui l'enfant direct de la grille */
  .hero-photo-bloc{order:-1;}
  .hero-photo{aspect-ratio:4/5; max-height:70vh;}
  .hero-photo img{object-position:center 22%;}
  .proj-grid{grid-template-columns:1fr;}
  .proj-grid-full{grid-template-columns:1fr 1fr;}
  .cs-top{grid-template-columns:1fr; gap:32px;}
  .cs-role-list{columns:1;}
  .cs-gallery{grid-template-columns:1fr;}
  .cs-quotes{grid-template-columns:1fr;}
  .cs-coulisses{grid-template-columns:1fr; gap:28px;}
  .cs-coulisses .photo-block{order:0;}
  .quote-photo{aspect-ratio:3/2;}
  .cs-planche{grid-template-columns:repeat(2,1fr);}
  /* La frise bascule en colonne : le filet devient vertical à gauche */
  .cs-stages{display:grid; grid-template-columns:1fr; gap:0; padding-left:22px;}
  .cs-stages::before{left:5px; right:auto; top:0; bottom:0; width:1px; height:auto;}
  .cs-stage{padding:0 0 22px;}
  .cs-stage::before{left:-22px; top:2px;}
  .cs-stage:last-child::after{left:-22px; top:2px;}
  .cs-stage .n{margin-top:0;}
  .cs-stage .t{margin-top:4px;}
  /* Le triptyque devient un ruban plein cadre qui défile en continu.
     Sans le JS (donc sans le second jeu d'images), il reste simplement glissable au doigt. */
  .triptyque{padding:0; overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;}
  .triptyque::-webkit-scrollbar{display:none;}
  .triptyque.defile{overflow:hidden;}
  .triptyque-track{display:flex; width:max-content; gap:14px;}
  .triptyque-track .copie{display:block;}
  .triptyque-track .photo-block{flex:0 0 min(80vw, 420px);}
  .triptyque.defile .triptyque-track{animation:defile-triptyque 25s linear infinite;}
  .triptyque-note .wrap{grid-template-columns:1fr; gap:32px;}
  .chiffres-band .wrap{grid-template-columns:1fr 1fr; gap:26px;}
  .cadre-grid{grid-template-columns:1fr 1fr; gap:24px;}
  .bas-offres{grid-template-columns:1fr; gap:22px;}
  .offres-cta .btn{width:100%; text-align:center;}
  .faq{padding:80px 0;}
  .faq-item summary{font-size:17px; padding-right:40px;}
  .faq-item .rep{padding-right:16px;}
  .kqueo .wrap{grid-template-columns:1fr; gap:36px;}
  .univ-grid{grid-template-columns:repeat(2,1fr); row-gap:48px;}
  .shop-grid{grid-template-columns:1fr;}
  .steps{grid-template-columns:repeat(2,1fr);}
  .offre-grid{grid-template-columns:1fr;}
  .offre-bas{margin-top:20px;}
  .ponctuel{padding:28px 24px;}
  .offres-cta{flex-direction:column; align-items:flex-start; gap:22px;}
  .offres-cta p{font-size:18px;}
  .kqueo-chiffres{grid-template-columns:repeat(2,1fr);}
  .offre .for{min-height:0;}
  .contact-form{grid-template-columns:1fr;}
  .apropos .wrap{grid-template-columns:1fr; gap:36px;}
  .signal{grid-template-columns:1fr; gap:10px;}
  .explore-tile{flex-direction:column;}
}
@media (max-width: 520px){
  .wrap{padding:0 22px;}
  .hero{padding:130px 0 64px;}
  .hero-photo{aspect-ratio:3/4; max-height:66vh;}
  .projets,.douceur,.kqueo,.univers,.approche,.apropos,.boutique{padding:80px 0;}
  .offres{padding:80px 0;}
  .proj-grid-full{grid-template-columns:1fr;}
  .univ-grid{grid-template-columns:1fr; row-gap:44px;}
  .cs-planche{grid-template-columns:1fr; gap:16px;}
}

/* Placé après les media queries : sinon la règle mobile du ruban, plus loin dans
   le fichier et de même spécificité, reprendrait le dessus. */
@media (prefers-reduced-motion: reduce){
  .triptyque.defile .triptyque-track{animation:none;}
  .triptyque.defile{overflow-x:auto;}   /* ruban à l'arrêt : on rend la main au doigt */
  .triptyque-track .copie{display:none;}   /* et pas de doublons à faire défiler */
}