/* =========================================================
   SCV FOTOGRAFIA — Feuille de style principale
   Couleurs et polices modifiables ci-dessous (:root)
   ========================================================= */
:root{
  --creme:#F1EAE0;
  --sable:#D9C9B5;
  --anthracite:#262626;
  --blanc:#FAF8F4;
  --sable-fonce:#B9A68E;
  --texte-doux:#5c5650;
  --serif:"Cormorant Garamond", "Times New Roman", serif;
  --sans:"Manrope", "Helvetica Neue", Arial, sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --gouttiere:clamp(20px,5vw,72px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--blanc);color:var(--anthracite);font-family:var(--sans);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--sable)}

/* ---------- Transition entre pages ---------- */
.voile{position:fixed;inset:0;background:var(--creme);z-index:999;pointer-events:none;opacity:1;transition:opacity .9s var(--ease)}
body.pret .voile{opacity:0}
body.sortie .voile{opacity:1;transition-duration:.45s}

/* ---------- Typographie ---------- */
.surtitre{font-family:var(--sans);font-size:11px;letter-spacing:.32em;text-transform:uppercase;font-weight:600;color:var(--sable-fonce)}
.titre-xl{font-family:var(--serif);font-weight:400;font-size:clamp(48px,9vw,138px);line-height:.92;letter-spacing:-.01em}
.titre-l{font-family:var(--serif);font-weight:400;font-size:clamp(38px,5.4vw,82px);line-height:1;letter-spacing:-.01em}
.titre-m{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.2vw,46px);line-height:1.08}
em{font-style:italic;font-family:var(--serif)}
.texte{color:var(--texte-doux);max-width:46ch;font-size:15.5px}

/* ---------- Boutons ---------- */
.bouton{display:inline-flex;align-items:center;gap:14px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;padding:17px 30px;border:1px solid currentColor;transition:background .5s var(--ease),color .5s var(--ease),gap .5s var(--ease)}
.bouton .fleche{width:22px;height:1px;background:currentColor;position:relative;transition:width .5s var(--ease)}
.bouton .fleche::after{content:"";position:absolute;right:0;top:-3px;width:7px;height:7px;border-top:1px solid currentColor;border-right:1px solid currentColor;transform:rotate(45deg)}
.bouton:hover{gap:20px}
.bouton:hover .fleche{width:32px}
.bouton.clair{color:var(--blanc)}
.bouton.clair:hover{background:var(--blanc);color:var(--anthracite)}
.bouton.fonce{color:var(--anthracite)}
.bouton.fonce:hover{background:var(--anthracite);color:var(--blanc)}
.bouton.plein{background:var(--anthracite);color:var(--blanc);border-color:var(--anthracite)}
.bouton.plein:hover{background:transparent;color:var(--anthracite)}

/* ---------- En-tête ---------- */
.entete{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:26px var(--gouttiere);color:var(--blanc);transition:background .6s var(--ease),padding .6s var(--ease),color .6s var(--ease)}
.entete.compact{background:rgba(250,248,244,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--anthracite);padding-top:14px;padding-bottom:14px;box-shadow:0 1px 0 rgba(38,38,38,.06)}
.logo{display:flex;flex-direction:column;align-items:center;line-height:1}
.logo .scv{font-family:var(--serif);font-size:34px;letter-spacing:.14em;font-weight:500;padding-left:.14em}
.logo .foto{font-size:8.5px;letter-spacing:.52em;font-weight:600;margin-top:4px;padding-left:.52em}
.nav{display:flex;gap:clamp(18px,2.6vw,42px)}
.nav a{font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;font-weight:500;position:relative;padding:6px 0;opacity:.86;transition:opacity .4s}
.nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav a:hover,.nav a.actif{opacity:1}
.nav a:hover::after,.nav a.actif::after{transform:scaleX(1);transform-origin:left}
.entete .bouton{padding:12px 22px;font-size:11px}
.entete .bouton:hover{background:currentColor}
.entete .bouton:hover span{color:var(--anthracite)}
.entete.compact .bouton:hover span{color:var(--blanc)}
.burger{display:none;width:34px;height:20px;position:relative;background:none;border:0;cursor:pointer;color:inherit}
.burger span{position:absolute;left:0;right:0;height:1px;background:currentColor;transition:transform .4s var(--ease),top .4s var(--ease)}
.burger span:nth-child(1){top:4px}.burger span:nth-child(2){top:15px}
body.menu-ouvert .burger span:nth-child(1){top:10px;transform:rotate(45deg)}
body.menu-ouvert .burger span:nth-child(2){top:10px;transform:rotate(-45deg)}

/* ---------- HERO ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;color:var(--blanc);display:flex;align-items:flex-end}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:none}
@keyframes respire{to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.38) 0%,rgba(20,18,16,.05) 35%,rgba(20,18,16,.15) 60%,rgba(20,18,16,.62) 100%)}
.hero-contenu{position:relative;z-index:2;width:100%;padding:0 var(--gouttiere) clamp(56px,9vh,110px);display:grid;grid-template-columns:1fr auto;align-items:end;gap:30px}
.hero h1{max-width:11ch}
.hero .sous{display:flex;gap:clamp(14px,2.2vw,34px);margin-top:30px;font-size:12px;letter-spacing:.42em;font-weight:500}
.hero .sous span+span::before{content:"·";margin-right:clamp(14px,2.2vw,34px);opacity:.6}
.hero-cote{display:flex;flex-direction:column;align-items:flex-end;gap:26px;text-align:right}
.hero-cote .lieu{font-size:11px;letter-spacing:.3em;text-transform:uppercase;opacity:.85}
.defiler{position:absolute;z-index:2;left:50%;bottom:26px;transform:translateX(-50%);width:1px;height:54px;background:rgba(250,248,244,.3);overflow:hidden}
.defiler::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--blanc);animation:goutte 2.2s var(--ease) infinite}
@keyframes goutte{to{top:100%}}

/* ---------- Mots qui montent ---------- */
.monte{display:inline-block;overflow:hidden;vertical-align:bottom}
.monte>span{display:inline-block;transform:translateY(105%);transition:transform 1.3s var(--ease)}
body.pret .hero .monte>span{transform:none}
.hero .monte:nth-child(2)>span{transition-delay:.12s}
.hero .monte:nth-child(3)>span{transition-delay:.24s}
.hero .fondu{opacity:0;transform:translateY(16px);transition:opacity 1.2s var(--ease) .6s,transform 1.2s var(--ease) .6s}
body.pret .hero .fondu{opacity:1;transform:none}

/* ---------- Apparitions au défilement ---------- */
.apparait{opacity:0;transform:translateY(46px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.apparait.vu{opacity:1;transform:none}
.d1{transition-delay:.12s}.d2{transition-delay:.24s}.d3{transition-delay:.36s}

/* ---------- Sections ---------- */
section{position:relative}
.bloc{padding:clamp(90px,13vw,190px) var(--gouttiere)}

/* Intro éditoriale */
.intro{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,7vw,120px);align-items:center}
.intro::before{content:"";position:absolute;top:0;bottom:22%;left:0;width:58%;background:var(--creme);z-index:-1}
.intro .titre-l{margin:22px 0 30px}
.intro .texte+.texte{margin-top:16px}
.intro .signature{margin-top:42px;display:flex;align-items:center;gap:18px;font-family:var(--serif);font-style:italic;font-size:22px}
.intro .signature::before{content:"";width:48px;height:1px;background:var(--anthracite)}
.arche{position:relative;justify-self:end;width:min(100%,430px);aspect-ratio:3/4.3;border-radius:999px 999px 0 0;overflow:hidden;background:var(--sable)}
.arche video{width:100%;height:100%;object-fit:cover}
.arche-cadre{position:relative;justify-self:end}
.arche-cadre .pastille{position:absolute;left:-58px;bottom:56px;width:116px;height:116px;border-radius:50%;background:var(--anthracite);color:var(--creme);display:grid;place-items:center;text-align:center;font-size:9.5px;letter-spacing:.26em;line-height:1.7;text-transform:uppercase;animation:tourne 26s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}

/* Domaines */
.domaines{background:var(--blanc)}
.domaines-tete{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:clamp(50px,7vw,90px);flex-wrap:wrap}
.liste-domaines{border-top:1px solid rgba(38,38,38,.14)}
.domaine{display:grid;grid-template-columns:90px 1fr 1.1fr 40px;gap:30px;align-items:center;padding:34px 0;border-bottom:1px solid rgba(38,38,38,.14);position:relative;transition:padding .6s var(--ease)}
.domaine::before{content:"";position:absolute;inset:0;background:var(--creme);transform:scaleY(0);transform-origin:bottom;transition:transform .6s var(--ease);z-index:-1}
.domaine:hover{padding-left:24px;padding-right:24px}
.domaine:hover::before{transform:scaleY(1)}
.domaine .num{font-family:var(--serif);font-style:italic;font-size:20px;color:var(--sable-fonce)}
.domaine h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,2.8vw,40px);line-height:1.05}
.domaine p{color:var(--texte-doux);font-size:14.5px}
.domaine .plus{width:34px;height:34px;border:1px solid rgba(38,38,38,.3);border-radius:50%;position:relative;transition:transform .6s var(--ease),background .4s}
.domaine .plus::before,.domaine .plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1px;background:var(--anthracite);transform:translate(-50%,-50%)}
.domaine .plus::after{transform:translate(-50%,-50%) rotate(90deg)}
.domaine:hover .plus{transform:rotate(90deg);background:var(--blanc)}

/* ---------- SMARTPHONES ---------- */
.telephone{position:relative;width:var(--l,260px);aspect-ratio:9/19.2;border-radius:calc(var(--l,260px)*.165);background:#141414;padding:calc(var(--l,260px)*.035);box-shadow:0 50px 80px -30px rgba(38,30,20,.45),0 18px 30px -14px rgba(38,30,20,.35),inset 0 0 0 1.5px #3a3a3a,inset 0 0 0 3px #0c0c0c;transform:rotate(var(--r,0deg));transition:transform 1s var(--ease)}
.telephone::before{content:"";position:absolute;top:calc(var(--l,260px)*.06);left:50%;transform:translateX(-50%);width:30%;height:calc(var(--l,260px)*.085);background:#050505;border-radius:99px;z-index:3}
.telephone::after{content:"";position:absolute;right:calc(var(--l,260px)*-.012);top:24%;width:3px;height:13%;background:#2b2b2b;border-radius:0 3px 3px 0}
.ecran{position:relative;width:100%;height:100%;border-radius:calc(var(--l,260px)*.135);overflow:hidden;background:#000;isolation:isolate}
.ecran video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ecran::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,0) 32%);pointer-events:none;z-index:2}
.telephone:hover{transform:rotate(var(--r,0deg)) translateY(-10px)}

/* Composition : duo incliné */
.duo{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,100px);align-items:center;overflow:hidden}
.duo::before{content:"";position:absolute;right:0;top:12%;bottom:0;width:62%;background:var(--sable);z-index:-1}
.duo-scene{position:relative;height:clamp(560px,62vw,760px);display:flex;justify-content:center;align-items:center}
.duo-scene .telephone{position:absolute}
.duo-scene .t1{--l:clamp(200px,21vw,290px);--r:-8deg;left:12%;top:4%;z-index:2}
.duo-scene .t2{--l:clamp(200px,21vw,290px);--r:7deg;right:10%;bottom:2%}
.duo-scene .cercle{position:absolute;width:62%;aspect-ratio:1;border-radius:50%;border:1px solid rgba(38,38,38,.25);left:50%;top:50%;transform:translate(-50%,-50%)}
.duo-texte .titre-l{margin:22px 0 28px}
.duo-texte .chiffres{display:flex;gap:46px;margin-top:44px}
.duo-texte .chiffres strong{display:block;font-family:var(--serif);font-weight:400;font-size:46px;line-height:1}
.duo-texte .chiffres span{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--texte-doux)}

/* Composition : grande image + smartphone */
.panorama{padding:0 var(--gouttiere) clamp(90px,13vw,190px)}
.panorama-cadre{position:relative;height:clamp(440px,64vw,820px);overflow:hidden}
.panorama-cadre>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.panorama-cadre::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,18,16,.55) 0%,rgba(20,18,16,.05) 55%)}
.panorama-texte{position:absolute;z-index:2;left:clamp(24px,5vw,80px);bottom:clamp(30px,6vw,80px);color:var(--blanc);max-width:520px}
.panorama-texte .titre-l{margin:18px 0 26px}
.panorama-texte .surtitre{color:var(--sable)}
.panorama .telephone.solo{--l:clamp(190px,18vw,260px);--r:5deg;position:absolute;right:clamp(30px,9vw,150px);top:50%;margin-top:calc(var(--l)*-1.066);z-index:3}
.panorama .etiquette{position:absolute;z-index:3;right:clamp(30px,9vw,150px);bottom:24px;color:var(--blanc);font-size:11px;letter-spacing:.28em;text-transform:uppercase}

/* Composition : trio de projets */
.trio{background:var(--anthracite);color:var(--blanc);overflow:hidden}
.trio::after{content:"";position:absolute;left:0;bottom:0;width:38%;height:34%;background:#2f2d2b;z-index:0}
.trio>*{position:relative;z-index:1}
.trio-tete{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end;margin-bottom:clamp(60px,8vw,110px)}
.trio-tete .texte{color:rgba(250,248,244,.7);justify-self:end}
.trio-rangee{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4vw,70px);align-items:start}
.trio-rangee figure{display:flex;flex-direction:column;align-items:center}
.trio-rangee figure:nth-child(2){margin-top:clamp(40px,8vw,120px)}
.trio-rangee figure:nth-child(3){margin-top:clamp(10px,3vw,40px)}
.trio-rangee .telephone{--l:clamp(170px,19vw,270px)}
.trio-rangee figure:nth-child(1) .telephone{--r:-4deg}
.trio-rangee figure:nth-child(3) .telephone{--r:4deg}
.trio-rangee figcaption{margin-top:34px;text-align:center}
.trio-rangee figcaption .cat{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--sable)}
.trio-rangee figcaption h4{font-family:var(--serif);font-weight:400;font-size:26px;margin-top:6px}

/* Composition : téléphone seul, graphique */
.manifeste{display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(30px,5vw,80px);align-items:center;overflow:hidden}
.manifeste .mots{font-family:var(--serif);font-size:clamp(40px,6.2vw,96px);line-height:.96}
.manifeste .mots.droite{text-align:left}
.manifeste .mots.gauche{text-align:right}
.manifeste .mots em{color:var(--sable-fonce)}
.manifeste-centre{position:relative;display:grid;place-items:center;padding:40px 0}
.manifeste-centre .disque{position:absolute;width:150%;aspect-ratio:1;border-radius:50%;background:var(--creme);z-index:-1}
.manifeste-centre .rectangle{position:absolute;width:115%;height:62%;background:var(--sable);z-index:-1;transform:rotate(-6deg)}
.manifeste-centre .telephone{--l:clamp(200px,20vw,280px);--r:-3deg}

/* Bandeau CTA */
.appel{display:grid;grid-template-columns:1.2fr .8fr;min-height:560px}
.appel-texte{background:var(--creme);padding:clamp(60px,8vw,120px) var(--gouttiere);display:flex;flex-direction:column;justify-content:center}
.appel-texte .titre-l{margin:22px 0 34px;max-width:13ch}
.appel-texte .actions{display:flex;flex-wrap:wrap;gap:16px}
.appel-media{position:relative;overflow:hidden;background:var(--sable)}
.appel-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Pied de page */
.pied{background:var(--anthracite);color:var(--creme);padding:clamp(70px,8vw,110px) var(--gouttiere) 34px}
.pied-haut{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:70px;border-bottom:1px solid rgba(241,234,224,.14)}
.pied .logo{align-items:flex-start}
.pied .logo .scv{font-size:54px;padding-left:0}
.pied .logo .foto{padding-left:0;font-size:10px}
.pied .slogan{font-family:var(--serif);font-style:italic;font-size:22px;margin-top:26px;color:var(--sable)}
.pied h5{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;font-weight:600;color:var(--sable-fonce);margin-bottom:20px}
.pied li{list-style:none;margin-bottom:10px;font-size:14.5px}
.pied li a{opacity:.82;transition:opacity .3s}
.pied li a:hover{opacity:1}
.pied-bas{display:flex;justify-content:space-between;gap:20px;padding-top:30px;font-size:11.5px;letter-spacing:.14em;color:rgba(241,234,224,.5);flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:1020px){
  .nav,.entete>.bouton{display:none}
  .burger{display:block}
  .nav{position:fixed;inset:0;background:var(--creme);color:var(--anthracite);flex-direction:column;justify-content:center;align-items:center;gap:26px;z-index:-1}
  body.menu-ouvert .nav{display:flex}
  body.menu-ouvert .entete{color:var(--anthracite)}
  .nav a{font-family:var(--serif);font-size:38px;letter-spacing:0;text-transform:none}
  .intro,.duo,.appel{grid-template-columns:1fr}
  .intro::before{width:100%;bottom:45%}
  .arche-cadre{justify-self:center}
  .duo::before{width:100%;top:40%}
  .duo-scene{order:2}
  .domaine{grid-template-columns:60px 1fr 34px}
  .domaine p{grid-column:2/3;grid-row:2}
  .trio-tete{grid-template-columns:1fr}
  .trio-tete .texte{justify-self:start}
  .manifeste{grid-template-columns:1fr}
  .manifeste .mots.gauche,.manifeste .mots.droite{text-align:center}
  .manifeste-centre{padding:80px 0}
  .appel-media{min-height:420px}
  .pied-haut{grid-template-columns:1fr 1fr}
}
@media (max-width:680px){
  .hero-contenu{grid-template-columns:1fr}
  .hero-cote{align-items:flex-start;text-align:left}
  .hero .sous{font-size:10px;letter-spacing:.3em;flex-wrap:wrap}
  .arche-cadre .pastille{left:-10px;width:96px;height:96px;font-size:8px}
  .duo-scene{height:520px}
  .duo-scene .t1{--l:170px;left:4%}
  .duo-scene .t2{--l:170px;right:4%}
  .duo-texte .chiffres{gap:28px}
  .panorama-cadre{height:auto;padding-bottom:30px}
  .panorama-cadre>video{position:relative;height:420px}
  .panorama-texte{position:relative;left:auto;bottom:auto;color:var(--anthracite);padding-top:28px}
  .panorama-cadre::after{display:none}
  .panorama .telephone.solo{--l:150px;top:300px;margin-top:0;right:20px}
  .panorama .etiquette{display:none}
  .trio-rangee{grid-template-columns:1fr;gap:70px}
  .trio-rangee figure:nth-child(n){margin-top:0}
  .trio-rangee .telephone{--l:230px}
  .pied-haut{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .apparait,.monte>span,.hero .fondu{opacity:1;transform:none}
}

/* Les smartphones gardent leur inclinaison pendant l'apparition */
.telephone.apparait{transform:rotate(var(--r,0deg)) translateY(46px)}
.telephone.apparait.vu{transform:rotate(var(--r,0deg))}
.telephone.apparait.vu:hover{transform:rotate(var(--r,0deg)) translateY(-10px)}

/* =========================================================
   PAGES INTÉRIEURES & PORTFOLIO UNE PAGE
   ========================================================= */
.page-tete{padding:clamp(150px,18vw,230px) var(--gouttiere) clamp(60px,8vw,110px);position:relative}
.page-tete::before{content:"";position:absolute;left:0;top:0;width:64%;height:100%;background:var(--creme);z-index:-1}
.page-tete .titre-xl{margin-top:24px;max-width:12ch}
.page-tete .texte{margin-top:30px}

/* Étapes (À propos) */
.etapes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(30px,5vw,80px);border-top:1px solid rgba(38,38,38,.14);padding-top:60px;margin-top:60px}
.etape .num{font-family:var(--serif);font-style:italic;color:var(--sable-fonce);font-size:22px}
.etape h3{font-family:var(--serif);font-weight:400;font-size:32px;margin:10px 0 14px}

/* Services détaillés */
.service{display:grid;grid-template-columns:110px 1fr 1fr;gap:clamp(24px,5vw,80px);padding:clamp(60px,7vw,100px) var(--gouttiere);border-top:1px solid rgba(38,38,38,.12);scroll-margin-top:90px}
.service:nth-of-type(even){background:var(--creme)}
.service .num{font-family:var(--serif);font-style:italic;font-size:26px;color:var(--sable-fonce)}
.service h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.8vw,56px);line-height:1.02}
.service ul{list-style:none;margin-top:26px}
.service li{padding:12px 0;border-bottom:1px solid rgba(38,38,38,.12);font-size:14.5px;display:flex;gap:14px}
.service li::before{content:"—";color:var(--sable-fonce)}

/* Galerie de smartphones (Réalisations) */
.galerie{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:clamp(50px,6vw,90px) clamp(24px,4vw,60px);padding:0 var(--gouttiere) clamp(90px,12vw,170px)}
.galerie figure{display:flex;flex-direction:column;align-items:center}
.galerie figure:nth-child(3n+2){margin-top:clamp(0px,6vw,90px)}
.galerie .telephone{--l:clamp(190px,17vw,250px)}
.galerie figure:nth-child(odd) .telephone{--r:-3deg}
.galerie figure:nth-child(even) .telephone{--r:3deg}
.galerie figcaption{margin-top:30px;text-align:center}
.galerie figcaption .cat{font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--sable-fonce)}
.galerie figcaption h4{font-family:var(--serif);font-weight:400;font-size:26px;margin-top:6px}

/* Duo inversé */
.duo.inverse{grid-template-columns:1.1fr .9fr}
.duo.inverse::before{left:0;right:auto}
.duo.inverse .duo-scene{order:-1}

/* Contact */
.contact{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,120px);padding:0 var(--gouttiere) clamp(90px,12vw,170px)}
.contact-liens a,.contact-liens span{display:block;font-family:var(--serif);font-size:clamp(26px,2.6vw,38px);line-height:1.2;padding:18px 0;border-bottom:1px solid rgba(38,38,38,.14);transition:padding .5s var(--ease),color .4s}
.contact-liens a:hover{padding-left:14px;color:var(--sable-fonce)}
.contact-liens small{display:block;font-family:var(--sans);font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--sable-fonce);margin-bottom:4px}
.formulaire{background:var(--creme);padding:clamp(30px,5vw,64px)}
.formulaire .ligne{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.champ{display:flex;flex-direction:column;margin-bottom:26px}
.champ label{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;font-weight:600;color:var(--texte-doux);margin-bottom:8px}
.champ input,.champ select,.champ textarea{font:inherit;font-size:16px;background:transparent;border:0;border-bottom:1px solid rgba(38,38,38,.3);padding:10px 0;color:var(--anthracite);outline:none;transition:border-color .4s;border-radius:0;-webkit-appearance:none;appearance:none}
.champ textarea{min-height:120px;resize:vertical}
.champ input:focus,.champ select:focus,.champ textarea:focus{border-bottom-color:var(--anthracite)}
.formulaire button{cursor:pointer;font-family:inherit}
.formulaire .etat{margin-top:20px;font-size:14px;min-height:1.4em}
.hp{position:absolute;left:-9999px}

/* Portfolio une page : contact final */
.final{text-align:center;background:var(--creme);padding:clamp(90px,12vw,170px) var(--gouttiere)}
.final .titre-l{margin:22px auto 40px;max-width:14ch}
.final .actions{display:flex;justify-content:center;flex-wrap:wrap;gap:16px}
.final .coord{margin-top:46px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px 40px;font-size:14.5px;color:var(--texte-doux)}
.final .coord a:hover{color:var(--anthracite)}

@media (max-width:1020px){
  .page-tete::before{width:100%}
  .etapes{grid-template-columns:1fr}
  .service{grid-template-columns:1fr;gap:14px}
  .duo.inverse{grid-template-columns:1fr}
  .duo.inverse .duo-scene{order:2}
  .duo.inverse::before{width:100%}
  .contact{grid-template-columns:1fr}
}
@media (max-width:680px){
  .formulaire .ligne{grid-template-columns:1fr;gap:0}
  .galerie figure:nth-child(n){margin-top:0}
}

/* ---------- ORDINATEUR PORTABLE (vidéos paysage) ---------- */
.ordinateur{--l:620px;position:relative;width:var(--l);max-width:100%;transition:transform 1s var(--ease)}
.ordinateur .dalle{position:relative;background:#141414;border-radius:calc(var(--l)*.028) calc(var(--l)*.028) 0 0;padding:calc(var(--l)*.03) calc(var(--l)*.022) calc(var(--l)*.026);box-shadow:inset 0 0 0 1.5px #3a3a3a,0 40px 70px -30px rgba(38,30,20,.45)}
.ordinateur .dalle::before{content:"";position:absolute;top:calc(var(--l)*.011);left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#2c2c2c}
.ordinateur .ecran-pc{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border-radius:3px}
.ordinateur .ecran-pc video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.ordinateur .ecran-pc::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 30%);pointer-events:none}
.ordinateur .socle{position:relative;width:116%;margin-left:-8%;height:calc(var(--l)*.034);background:linear-gradient(180deg,#e4e1dc 0%,#c9c5bf 55%,#9e9a94 100%);border-radius:0 0 calc(var(--l)*.05) calc(var(--l)*.05)/0 0 calc(var(--l)*.03) calc(var(--l)*.03);box-shadow:0 30px 40px -20px rgba(38,30,20,.4)}
.ordinateur .socle::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:16%;height:38%;background:#b3afa9;border-radius:0 0 8px 8px}
.ordinateur:hover{transform:translateY(-8px)}

/* Duo ordinateur + smartphone */
.duo-scene.avec-pc{height:auto;padding:60px 0 90px;display:block}
.duo-scene.avec-pc .ordinateur{--l:clamp(300px,40vw,640px);margin:0 auto;position:relative}
.duo-scene.avec-pc .telephone{--l:clamp(130px,11vw,180px);--r:6deg;position:absolute;right:2%;bottom:20px;z-index:2}

/* Galerie : un projet paysage prend deux colonnes */
.galerie figure.large{grid-column:span 2}
.galerie figure.large .ordinateur{--l:clamp(300px,38vw,560px)}
@media (max-width:680px){
  .galerie figure.large{grid-column:auto}
  .duo-scene.avec-pc .telephone{--l:120px;right:0}
}

/* ---------- BOUTON SON ---------- */
.son{position:absolute;z-index:4;right:10%;bottom:5%;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:rgba(250,248,244,.82);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:center;color:var(--anthracite);box-shadow:0 6px 16px rgba(0,0,0,.25);transition:transform .4s var(--ease),background .4s}
.son:hover{transform:scale(1.1)}
.son svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.son .on{display:none}
.son.actif{background:var(--anthracite);color:var(--creme)}
.son.actif .on{display:block}.son.actif .off{display:none}
.ecran-pc .son{right:3%;bottom:5%}

/* ---------- SÉLECTEUR DE LANGUE ---------- */
.langues{display:flex;gap:10px;font-size:10.5px;letter-spacing:.18em;font-weight:600;margin-left:clamp(14px,2vw,30px);padding-left:clamp(14px,2vw,30px);border-left:1px solid currentColor;border-left-color:rgba(127,127,127,.4)}
.langues a{opacity:.55;transition:opacity .3s}
.langues a:hover,.langues a.actif{opacity:1}
.entete-droite{display:flex;align-items:center;gap:clamp(14px,2vw,26px)}
@media (max-width:1020px){
  .entete-droite .bouton{display:none}
  .langues{margin-left:0;padding-left:0;border-left:0}
}

/* ---------- RÉSEAUX SOCIAUX ---------- */
.reseaux{padding:clamp(90px,12vw,160px) var(--gouttiere);text-align:center}
.reseaux .titre-l{margin:20px auto 18px}
.reseaux .texte{margin:0 auto}
.reseaux-cartes{display:flex;justify-content:center;flex-wrap:wrap;gap:clamp(18px,3vw,36px);margin-top:clamp(46px,6vw,70px)}
.reseau{display:flex;align-items:center;gap:22px;min-width:min(100%,330px);padding:26px 34px 26px 26px;border:1px solid rgba(38,38,38,.16);background:var(--blanc);text-align:left;transition:background .5s var(--ease),color .5s var(--ease),transform .6s var(--ease),border-color .5s}
.reseau:hover{background:var(--anthracite);color:var(--creme);border-color:var(--anthracite);transform:translateY(-6px)}
.reseau .icone{flex:none;width:58px;height:58px;border-radius:50%;background:var(--creme);display:grid;place-items:center;color:var(--anthracite);transition:background .5s}
.reseau:hover .icone{background:var(--sable)}
.reseau .icone svg{width:26px;height:26px}
.reseau small{display:block;font-size:10.5px;letter-spacing:.3em;text-transform:uppercase;color:var(--sable-fonce);font-weight:600}
.reseau strong{display:block;font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.1;margin-top:2px}
.reseau em{display:block;font-family:var(--sans);font-style:normal;font-size:12px;letter-spacing:.14em;text-transform:uppercase;margin-top:6px;opacity:.7}