@font-face{font-family:"Space Grotesk";src:url("/assets/polices/space-grotesk.woff2") format("woff2");font-weight:300 700;font-display:swap}
@font-face{font-family:"Manrope";src:url("/assets/polices/manrope.woff2") format("woff2");font-weight:200 800;font-display:swap}
/* Couleurs : la page s'ouvre dans le noir ; le script fait passer ces valeurs au clair a la premiere section claire.
   Sans script, tout reste dans le noir, lisible. */
:root{--fond:#0B0C0F;--texte:#ECEBE6;--doux:#A8A49B;--accent:#93B2DD;--filet:#1D2026;--filet-2:#23262D;--carte:#12141A;
  --rose:#C9708A;--titre:"Space Grotesk",system-ui,sans-serif;--corps:"Manrope",system-ui,sans-serif;--marge:clamp(20px,5vw,72px);
  --max:1240px;--ease:cubic-bezier(.2,.8,.2,1)}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--fond);color:var(--texte);-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;font:400 1.0625rem/1.65 var(--corps);background:var(--fond);color:var(--texte)}
/* grain : la matiere du fond, discrete, qui vibre a peine */
body::after{content:"";position:fixed;inset:-60px;z-index:45;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{20%{transform:translate(-18px,12px)}40%{transform:translate(14px,-20px)}60%{transform:translate(-10px,-8px)}80%{transform:translate(20px,16px)}}
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.35s}
.tete-logo{view-transition-name:logo}
img,picture,video{display:block;max-width:100%;height:auto}
a{color:inherit}
a[href^="mailto:"]{white-space:nowrap}
h1,h2,h3,h4{font-family:var(--titre);font-weight:600;letter-spacing:-.025em;line-height:1.04;margin:0;text-wrap:balance}
h1{font-size:clamp(2rem,7.4vw,6.2rem)}
.page-tete.studio-accueil h1{font-size:clamp(2rem,4.6vw,4.4rem);font-size:min(clamp(2rem,4.6vw,4.4rem),8.1cqi)}
/* le nom complet, insecable, tient toujours sur sa ligne : la taille suit la largeur de la colonne (04/10) */
.studio-accueil>div{container-type:inline-size}
.studio-accueil h2{font-size:min(clamp(1.9rem,4.4vw,3.5rem),8.6cqi)}
h2{font-size:clamp(1.9rem,4.4vw,3.5rem)}
h3{font-size:clamp(1.2rem,2vw,1.55rem);line-height:1.15}
h4{font-size:clamp(1.35rem,2.4vw,2rem);line-height:1.1}
p{margin:0 0 1em;text-wrap:pretty;max-width:68ch}
h1+p,h2+p,h3+p,h4+p{margin-top:.9em}
.tete-section h2+p{margin-top:.6em}
em{font-style:normal;color:var(--accent)}
.evitement{position:absolute;left:-999px;top:0;background:var(--texte);color:var(--fond);padding:10px 14px;z-index:99}
.evitement:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.etiquette{font:600 .78rem/1 var(--titre);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin:0 0 18px}
.chapo{font-size:clamp(1.1rem,1.6vw,1.3rem);color:var(--doux);max-width:46ch}
.sens{display:inline-block;text-wrap:balance}
[data-coupe] .sens,.coupe-mesure .sens{display:inline}
[data-coupe]{text-wrap:wrap}
.coupe-mesure{position:absolute!important;left:-9999px!important;top:0;white-space:nowrap!important;width:auto!important;max-width:none!important;visibility:hidden}
.nw{white-space:nowrap}
[hidden]{display:none!important}
/* le cadre du logo : deux coins bleus autour d'un titre (taille animee par le script, pleine sans lui) */
.cadre-logo,.page-tete h1{position:relative;display:inline-block;padding:.14em .38em .1em;margin-left:-.38em}
.cadre-logo::before,.cadre-logo::after,.page-tete h1::before,.page-tete h1::after{content:"";position:absolute;width:var(--coin,clamp(16px,2.2vw,30px));height:var(--coin,clamp(16px,2.2vw,30px));border:0 solid var(--accent);pointer-events:none}
.cadre-logo::before,.page-tete h1::before{left:0;top:0;border-width:3px 0 0 3px}
.cadre-logo::after,.page-tete h1::after{right:0;bottom:0;border-width:0 3px 3px 0}
.ouverture .cadre-logo,.appel .cadre-logo{margin-left:0}
@media (max-width:520px){.cadre-logo,.page-tete h1{padding:.12em .28em .08em;margin-left:-.28em}}
/* en-tete */
.tete{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:28px;padding:14px var(--marge);background:linear-gradient(var(--fond) 60%,transparent)}
.tete-logo{display:block;width:127px;margin-right:auto;--s:1}
.tete-logo .logo{width:100%;height:auto;overflow:visible}
.tete-logo .ja{fill:var(--texte)}.tete-logo .studio{fill:var(--doux)}.tete-logo .coin{stroke:var(--accent)}
.logo .coin,.logo .ja,.logo .studio{transform-box:fill-box}
.logo .studio{transform-origin:left bottom}
/* STUDIO adapte a chaque ecran (04/10) : vise 7 a 8 px de capitales ; origine sur la ligne de base, aligne sur JA */
@media (max-width:760px){.tete-logo{--s:1.1}}
@media (min-width:1600px){.tete-logo{--s:1.08}}
/* STUDIO a l'echelle de l'ecran ; le coin bas-droit se decale d'autant (STUDIO mesure 106,6 unites) */
.tete-logo .studio{scale:var(--s)}.tete-logo .coin-bd{translate:calc((var(--s) - 1) * 106.6px) 0}
.tete-nav{display:flex;gap:22px;font:500 .95rem var(--titre)}
.tete-nav a{text-decoration:none;color:var(--doux)}
.tete-nav a:hover,.tete-nav a[aria-current]{color:var(--texte)}
.tete-menu{display:none;font:600 .9rem var(--titre);text-decoration:none}
.tete-cta{font:600 .9rem var(--titre);text-decoration:none;border:1px solid var(--texte);border-radius:99px;padding:9px 16px}
@media (max-width:760px){.tete-nav{display:none}.tete-menu{display:block}.tete{gap:16px}.tete-logo{width:103px}.tete-cta{padding:8px 12px;font-size:.85rem}}
/* sections */
main{overflow-x:clip}
main section{position:relative;padding:clamp(72px,12vw,160px) var(--marge);max-width:calc(var(--max) + 2*var(--marge));margin:0 auto}
.tete-section{margin-bottom:clamp(32px,5vw,64px)}
.bouton{display:inline-block;background:var(--texte);color:var(--fond);font:700 1rem var(--titre);text-decoration:none;border:0;border-radius:99px;padding:15px 24px;cursor:pointer;transition:filter .3s}
.bouton:hover{filter:brightness(1.18)}
.bouton[disabled]{background:var(--doux);cursor:wait}
.bouton-secondaire{background:transparent;color:var(--texte);border:1px solid var(--filet-2);border-radius:99px;padding:14px 22px;font:600 1rem var(--titre);cursor:pointer}
.lien-fleche{font:600 1rem var(--titre);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:2px}
.lien-fleche::after{content:"\00a0\2192"}
.actions{display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;margin-top:30px}

/* ---------- ouverture : la scene des vrais ecrans ---------- */
.ouverture{max-width:none;text-align:center;padding-top:clamp(36px,6vh,64px);padding-bottom:clamp(40px,7vw,90px)}
.ouverture .chapo{margin-left:auto;margin-right:auto}
.ouverture .actions{justify-content:center}
.ouverture h1 em{display:block;color:transparent;background:linear-gradient(100deg,var(--accent) 0 42%,#F4F7FC 50%,var(--accent) 58% 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text}
.halo{position:absolute;left:50%;top:clamp(180px,32vh,320px);width:min(1100px,100vw);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,rgba(147,178,221,.16),transparent 70%);pointer-events:none}
.scene{position:relative;width:min(var(--max),100%);margin:clamp(36px,5vh,56px) auto 0;perspective:1800px;text-align:left}
.camera{transform-style:preserve-3d;transform-origin:50% 50%}
.plateau{position:relative;transform-style:preserve-3d;transform-origin:50% 0;padding-bottom:6%}
.legende-scene{max-width:760px;margin:clamp(40px,6vh,64px) auto 0;font-size:.9rem;color:var(--doux)}
/* le theatre : sur ordinateur, la scene reste en place pendant la sequence de camera */
@media (min-width:900px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .js .theatre{height:280vh}
  .js .colle{position:sticky;top:78px}
}
/* appareils : un navigateur et des telephones qui montrent de vrais ecrans */
.ordi{position:relative;transform-style:preserve-3d;border-radius:14px;box-shadow:0 50px 120px -45px rgba(0,0,0,.85)}
.plateau .ordi{width:74%;margin-left:13%}
.barre{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#1C1F25;border-radius:14px 14px 0 0}
.barre i{width:10px;height:10px;border-radius:50%;background:#3A3D44}
.barre span{margin:0 auto;padding:4px 16px;border-radius:6px;background:#121418;font:500 11px/1.2 var(--corps);color:#8E8A82}
.ecran-boite{position:relative;transform-style:preserve-3d}
.ordi .ecran{position:relative;aspect-ratio:16/10;overflow:hidden;background:#EDE7DA;border-radius:0 0 14px 14px}
.ordi .ecran picture,.ordi .ecran img{width:100%}
.ordi .ecran>picture{will-change:transform}
.tel{position:absolute;width:17%;padding:2.2%;border-radius:18%/8.3%;background:#121214;box-shadow:0 40px 90px -25px rgba(0,0,0,.9),0 0 0 1px rgba(255,255,255,.1);transform-style:preserve-3d}
.tel .ecran{position:relative;aspect-ratio:207.3/448.6;border-radius:13%/6%;overflow:hidden;background:#F9F3ED}
/* l'image de l'ecran remplit l'ecran ; les petites images posees dessus (icones, notification) gardent leur taille */
.tel .ecran>picture,.appli-ecran>picture{position:absolute;inset:0}
.tel .ecran>picture img,.appli-ecran>picture img{width:100%;height:100%;object-fit:cover;object-position:top}
.tel .ecran[data-defile-auto]>picture{bottom:auto}
.tel .ecran[data-defile-auto]>picture img{height:auto}
/* en-tete et barre d'appel du site, fixes sur l'ecran pendant que la page defile dessous */
.tel .ecran>picture.fixe-haut{inset:0 0 auto 0;z-index:1}.tel .ecran>picture.fixe-bas{inset:auto 0 0 0;z-index:1}
.tel .ecran>picture.fixe-haut img,.tel .ecran>picture.fixe-bas img{height:auto;object-fit:fill}
.ecran picture.etat{opacity:0}
.ecran picture.etat.vu{opacity:1}
.plateau .tel-ferem{left:2%;bottom:-4%}
.plateau .tel-direction{right:15.5%;bottom:3%}
.plateau .tel-artiste{right:2%;bottom:-8%}
@media (max-width:899px){
  .plateau .ordi{width:92%;margin-left:4%}
  .plateau .tel{width:30%}
  .plateau .tel-ferem{left:0;bottom:2%}.plateau .tel-direction{display:none}.plateau .tel-artiste{right:0;bottom:-2%}
  .plateau{padding-bottom:38%}
}
/* vue eclatee : les pieces de l'interface, decoupees au pixel pres dans la vraie capture */
.eclate{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none}
.tuile{position:absolute;overflow:hidden;opacity:0;box-shadow:0 22px 46px -14px rgba(0,0,0,var(--ombre,0))}
.socle{position:absolute;inset:0;opacity:0}
/* pieces du site : bords adoucis (lisere clair, ombre plus diffuse) */
.ordi .tuile{box-shadow:0 30px 60px -18px rgba(22,21,15,var(--ombre,0)),inset 0 0 0 1px rgba(255,255,255,.45)}
.tuile img{position:absolute;max-width:none;height:auto}
/* noms des pieces : etiquettes sombres a bord bleu, trait epais a lisere sombre, lisibles meme sur un ecran clair */
.nom-piece{position:absolute;left:104%;display:flex;align-items:center;white-space:nowrap;font:700 12px/1.2 var(--titre);letter-spacing:.08em;text-transform:uppercase;color:#DCE7F7;opacity:0}
.nom-piece::before{content:"";flex:none;width:46px;height:2px;margin-right:-1px;background:#9DBCE6;box-shadow:0 0 0 1.5px rgba(11,12,15,.75)}
.nom-piece::after{content:"";position:absolute;left:-4px;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:#9DBCE6;box-shadow:0 0 0 2px rgba(11,12,15,.8)}
.nom-piece:not(.sur){padding:0}
.nom-piece:not(.sur)>span{display:block}
.nom-piece:not(.sur){gap:0}
.nom-piece:not(.sur){text-shadow:none}
.nom-piece b{padding:7px 12px;border-radius:99px;background:rgba(11,12,15,.9);border:1.5px solid #9DBCE6;font:inherit;color:inherit}
.nom-piece.sur{left:auto;gap:7px;padding:6px 11px 6px 8px;border-radius:99px;background:rgba(11,12,15,.86);border:1px solid rgba(147,178,221,.45);font-size:11px;color:#C9D8EE}
.nom-piece.sur::before{width:7px;height:7px;margin-right:7px;border-radius:50%;background:#9DBCE6;box-shadow:none}
.nom-piece.sur::after{display:none}
.nom-piece.sur b{padding:0;border:0;background:none}

/* ---------- realisations de l'accueil ---------- */
.realisations-accueil .tete-section{max-width:var(--max)}
.projet{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,5vw,80px);align-items:center}
.num{font:600 clamp(4rem,8vw,7.5rem)/.8 var(--titre);color:transparent;-webkit-text-stroke:1.5px var(--accent);margin:0}
.projet-texte h3{font-size:clamp(1.75rem,3vw,2.5rem);margin-top:18px}
.projet-texte p{color:var(--doux);max-width:46ch}
.construit{list-style:none;padding:0;margin:22px 0 26px;display:flex;flex-wrap:wrap;gap:8px}
.construit li{font:500 .82rem/1 var(--titre);border:1px solid var(--filet-2);border-radius:99px;padding:9px 13px}
.compo{position:relative;margin-bottom:9%}
.compo .ordi{box-shadow:0 40px 90px -45px rgba(22,21,15,.55)}
.compo .tel-compo{width:21%;right:-5%;bottom:-16%}
@media (max-width:899px){.projet{grid-template-columns:1fr}.compo{margin:0 4% 18%}.compo .tel-compo{width:28%;right:-4%}}
/* LogesClub : l'histoire en trois gestes, avec un cadre lumineux sur la partie exacte de l'ecran */
.lc{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,5vw,80px);margin-top:clamp(110px,14vh,160px)}
.lc-scene{position:sticky;top:12vh;height:76vh;display:flex;align-items:center;justify-content:center;gap:4%}
.lc-scene .tel{position:relative;width:38%}
.lc-scene .tel:nth-child(2){transform:translateY(8%)}
.focus{position:absolute;border:2px solid var(--rose);border-radius:9px;box-shadow:0 0 0 4px rgba(201,112,138,.16),0 0 28px rgba(201,112,138,.45);pointer-events:none;opacity:0}
.lc-gestes{position:relative;padding:10vh 0 18vh 34px}
.rail{position:absolute;left:0;top:calc(12vh + 300px);bottom:26vh;width:2px;background:var(--filet-2)}
.rail i{position:absolute;inset:0;background:var(--accent);transform-origin:top;transform:scaleY(0)}
.geste{position:relative;min-height:50vh;display:flex;flex-direction:column;justify-content:center;opacity:.3;transition:opacity .5s}
.geste::before{content:"";position:absolute;left:-40px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:var(--fond);border:2px solid var(--filet-2);transition:border-color .4s,background .4s}
.geste.actif{opacity:1}
.geste.actif::before,.geste.passe::before{border-color:var(--accent);background:var(--accent)}
.geste-num{font:600 .8rem/1 var(--titre);letter-spacing:.2em;color:var(--accent);margin:0}
.geste h4{margin-top:14px}
.geste p{color:var(--doux);max-width:40ch}
.geste .duo{display:none}
@media (max-width:899px),(pointer:coarse){
  .lc{grid-template-columns:1fr}.lc-scene{display:none}.lc-gestes{padding:0}.rail{display:none}
  .geste{min-height:0;opacity:1;margin-top:56px}.geste::before{display:none}
  .geste .duo{display:flex;gap:4%;margin-top:22px}
  .geste .duo picture{width:48%;border-radius:20px;overflow:hidden;box-shadow:0 20px 50px -20px rgba(22,21,15,.45)}
}
/* sans script : l'histoire reste lisible, chaque geste a ses ecrans */
html.sans-js .geste{opacity:1}
html.sans-js .lc-scene{display:none}
html.sans-js .geste .duo{display:flex;gap:4%;margin-top:22px;max-width:420px}

/* ---------- sur tous les ecrans ---------- */
.formats-grille{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,5vw,80px);align-items:center}
.formats-scene{display:flex;align-items:center;gap:clamp(18px,3vw,40px)}
.morph{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center}
.morph-cadre{height:clamp(260px,30vw,420px);aspect-ratio:16/10.6;max-width:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:12px;border:0 solid #16181D;background:#16181D;box-shadow:0 40px 90px -45px rgba(22,21,15,.6)}
.morph-barre{flex:none;height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#E4DFD3;overflow:hidden}
.morph-barre i{width:8px;height:8px;border-radius:50%;background:#B9B2A4}
.morph-ecran{position:relative;flex:1;overflow:hidden;background:#EDE7DA}
.morph-etat{position:absolute;inset:0}
.morph-etat picture,.morph-etat img{width:100%;height:100%;object-fit:cover;object-position:top}
.morph-etat:not([data-format="ordi"]){opacity:0}
/* barre d'appel du site, fixe au bas de l'ecran du telephone */
.morph-appel{position:absolute;left:0;right:0;bottom:0;z-index:1}
.morph-etat .morph-appel picture,.morph-etat .morph-appel img{display:block;width:100%;height:auto;object-fit:fill}
.morph-nom{margin:16px 0 0;font:600 .78rem/1 var(--titre);letter-spacing:.16em;text-transform:uppercase;color:var(--doux)}
.tel-appli{position:relative;flex:none;width:clamp(150px,15vw,220px);padding:9px;border-radius:30px}
.tel-appli .ecran{background:linear-gradient(165deg,#3B4F6E,#1A2130 70%)}
.accueil-tel{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);align-content:start;gap:12% 9%;padding:30% 10% 0;opacity:0}
.accueil-tel>span{aspect-ratio:1;border-radius:24%;background:rgba(255,255,255,.16)}
.accueil-tel .icone-lc{position:relative;background:none}
.icone-lc picture,.icone-lc img{width:100%;height:100%;border-radius:24%}
.icone-lc b{position:absolute;left:50%;top:104%;translate:-50% 0;font:600 8px/1.2 var(--corps);color:#fff;white-space:nowrap}
.appli-ecran{position:absolute;inset:0}
.notif{position:absolute;left:4%;right:4%;top:3.5%;display:flex;gap:7px;align-items:flex-start;padding:7px 8px;border-radius:14px;background:rgba(252,250,246,.95);box-shadow:0 12px 30px -10px rgba(0,0,0,.4);font:500 clamp(8px,.62vw,10px)/1.3 var(--corps);color:#33272C}
.notif-icone{flex:none;width:22%;max-width:30px}
.notif-icone picture,.notif-icone img{display:block;width:100%;height:auto;border-radius:24%}
.notif-texte b{display:block;font-weight:700}
.hors-ligne{position:absolute;left:50%;bottom:17%;translate:-50% 0;display:flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 10px;border-radius:99px;background:#16150F;color:#F1EEE6;font:600 clamp(8px,.6vw,10px)/1 var(--titre)}
.hors-ligne i{width:7px;height:7px;border-radius:50%;background:#E0893F}
.hors-ligne.envoye i{background:#5BB98C}
.formats-points{list-style:none;margin:0;padding:0;display:grid;gap:26px}
.formats-points li{border-left:2px solid var(--filet-2);padding-left:20px;transition:border-color .4s,opacity .4s}
.formats-points li.actif{border-color:var(--accent)}
.formats-points li.actif h3{color:var(--accent)}
.formats-points h3{font-size:1.2rem}
.formats-points p{color:var(--doux);margin:.4em 0 0;font-size:.98rem}
.formats-grille>*{min-width:0}
@media (max-width:899px){.formats-grille{grid-template-columns:1fr}.formats-scene{flex-direction:column;gap:28px}.morph{width:100%}.morph-cadre{height:200px}.tel-appli{width:150px;padding:7px;border-radius:24px}}

/* selecteur de theme LogesClub : n'apparait que pres des ecrans LogesClub */
.themes-lc{position:fixed;left:50%;bottom:22px;z-index:60;display:flex;align-items:center;gap:4px;padding:6px;border-radius:99px;background:rgba(14,15,18,.9);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 40px -12px rgba(0,0,0,.5);color:#ECEBE6;font:600 13px/1 var(--titre);translate:-50% 0;opacity:0;transform:translateY(16px);transition:opacity .25s ease,transform .25s ease}
.themes-lc.ouvert{opacity:1;transform:none;transition-duration:.45s;transition-timing-function:var(--ease)}
/* apparition douce (.45 s), depart plus vif (.25 s) : la barre est partie avant que l'ecran suivant arrive */
.themes-lc-titre{padding:0 10px 0 12px;color:#A8A49B;font-size:12px;letter-spacing:.04em;white-space:nowrap}
.themes-lc button{display:flex;align-items:center;gap:7px;border:0;border-radius:99px;min-height:40px;padding:0 14px;background:transparent;color:inherit;font:inherit;cursor:pointer;white-space:nowrap}
.themes-lc button:hover{background:rgba(255,255,255,.08)}
.themes-lc button[aria-pressed=true]{background:#ECEBE6;color:#0B0C0F}
.themes-lc i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--a) 50%,var(--b) 50%);box-shadow:0 0 0 1px rgba(255,255,255,.3)}
@media (max-width:520px){.themes-lc-titre{display:none}.themes-lc button{padding:0 11px}}

/* manifeste */
.manifeste [data-allumage]{font:600 clamp(1.6rem,3.6vw,2.9rem)/1.22 var(--titre);letter-spacing:-.02em;max-width:34ch}
/* cartes de projet (page Realisations, pages d'offre) */
.carte-projet{position:relative;display:block;aspect-ratio:16/10;border-radius:12px;overflow:hidden;border:1px solid var(--filet-2);text-decoration:none;background:var(--carte)}
.carte-projet picture,.carte-projet img{width:100%;height:100%;object-fit:cover;object-position:top}
.carte-texte{position:absolute;left:0;right:0;bottom:0;padding:22px 24px;background:linear-gradient(transparent,#0B0C0FEE 55%);color:#ECEBE6;display:grid;gap:4px}
.carte-texte strong{font:700 1.45rem var(--titre)}
.carte-texte span{color:#C9C4BA;font-size:.95rem}
.carte-num{position:absolute;left:18px;top:16px;font:600 .8rem var(--titre);background:#0B0C0FB0;color:#ECEBE6;padding:5px 8px;border-radius:5px}
.cas-galerie .carte-projet{transition:translate .6s var(--ease)}
@media (hover:hover){.cas-galerie .carte-projet:hover{translate:0 -6px}}
/* offres */
.offres-grille{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.offre{position:relative;display:block;border:1px solid var(--filet-2);border-radius:12px;padding:30px;min-height:320px;text-decoration:none;overflow:hidden;background:var(--carte)}
.offre p{color:var(--doux);max-width:38ch}
.offre-apercu{position:absolute;right:-40px;bottom:-70px;width:340px;border-radius:8px;overflow:hidden;opacity:.7;rotate:-6deg;box-shadow:0 20px 50px -20px rgba(22,21,15,.4);transition:translate .6s var(--ease),opacity .6s}
@media (hover:hover){.offre:hover .offre-apercu{translate:0 -22px;opacity:1}}
.aussi{margin-top:26px;color:var(--doux);border-top:1px solid var(--filet);padding-top:18px;max-width:none}
.aussi strong{color:var(--texte)}
@media (max-width:760px){.offres-grille{grid-template-columns:1fr}.offre{min-height:0;padding-bottom:190px}.offre-apercu{width:230px;right:-24px;bottom:-60px}}
/* pour qui, methode, engagements */
.familles{list-style:none;padding:0;margin:28px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.familles li{border:1px solid var(--filet-2);border-radius:99px;padding:9px 16px;font:500 .95rem var(--titre)}
.etapes{list-style:none;padding:24px 0 0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;position:relative}
.etapes::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent);transform-origin:left;transform:scaleX(var(--trace,1))}
.etapes .num{font:600 .85rem var(--titre);color:var(--accent);-webkit-text-stroke:0}
.etapes h3{margin:10px 0 8px}
.etapes p{color:var(--doux);font-size:.98rem}
@media (max-width:900px){.etapes{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.etapes{grid-template-columns:1fr}}
.liste-engagements{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px 40px}
.liste-engagements li{border-top:1px solid var(--filet-2);padding-top:16px}
/* studio */
.studio-accueil{display:grid;grid-template-columns:minmax(220px,360px) 1fr;gap:clamp(28px,5vw,72px);align-items:center}
.studio-photo{margin:0;border-radius:12px;overflow:hidden}
.studio-accueil>*{min-width:0}
@media (max-width:760px){.studio-accueil{grid-template-columns:1fr}.studio-photo{max-width:320px}}
/* faq */
.faq details{border-top:1px solid var(--filet-2);padding:20px 0}
.faq details:last-of-type{border-bottom:1px solid var(--filet-2)}
.faq summary{cursor:pointer;font:600 1.15rem var(--titre);list-style:none;display:flex;justify-content:space-between;gap:20px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent)}
.faq details[open] summary::after{content:"\00d7"}
.faq details p{color:var(--doux);margin-top:14px}
/* appel : le titre se referme dans le cadre du logo */
.appel{text-align:center}
.appel h2{font-size:clamp(2.3rem,6vw,5rem);margin:0 auto 28px}
.appel p{margin:0 auto}
/* pages interieures */
.page-tete{padding-top:clamp(56px,9vw,120px)}
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.bloc{border-top:1px solid var(--filet-2);padding-top:18px}
.bloc p{color:var(--doux)}
/* titre de carte de deux mots : la taille suit la largeur de la carte, sans couper « Applications / installables » (04/10) */
.colonnes .bloc{container-type:inline-size}.colonnes .bloc h3{font-size:min(clamp(1.2rem,2vw,1.55rem),8.8cqi)}
.texte-long>*{max-width:72ch}
.cas .texte-long{padding-top:clamp(40px,6vw,80px);padding-bottom:clamp(40px,6vw,80px)}
.texte-long h2{font-size:clamp(1.5rem,3vw,2.1rem);margin:2em 0 .6em}
.texte-long ul{padding-left:1.2em}
.texte-long table{border-collapse:collapse;width:100%}
.texte-long td,.texte-long th{border-top:1px solid var(--filet-2);padding:10px 12px 10px 0;text-align:left;vertical-align:top}
/* etude de cas */
.cas-infos{display:flex;flex-wrap:wrap;gap:10px 28px;color:var(--doux);font-size:.95rem;margin:22px 0 34px;padding:0;list-style:none}
.cas-image{border-radius:12px;overflow:hidden;border:1px solid var(--filet-2);box-shadow:0 50px 110px -50px rgba(0,0,0,.8)}
.cas-galerie{display:grid;gap:32px}
.cas-galerie figure{margin:0}
.cas-galerie figure picture{border-radius:12px;overflow:hidden;border:1px solid var(--filet-2)}
.cas-galerie figcaption{color:var(--doux);font-size:.92rem;margin-top:10px}
.cas-video video{width:100%;border-radius:12px;border:1px solid var(--filet-2)}
.cas-suivant{display:block;text-decoration:none;border-top:1px solid var(--filet-2);padding-top:28px}
.temoignage blockquote{margin:0;font:500 clamp(1.4rem,3vw,2.2rem)/1.3 var(--titre);max-width:30ch}
/* parcours */
.formulaire{max-width:720px}
.etape{border:0;padding:0;margin:0 0 40px;min-width:0}
.etape legend{font:600 clamp(1.4rem,3vw,2.1rem)/1.15 var(--titre);margin-bottom:22px;padding:0}
.choix{display:flex;gap:12px;align-items:center;border:1px solid var(--filet-2);border-radius:10px;padding:16px 18px;margin-bottom:10px;cursor:pointer;transition:border-color .25s,background .25s}
.choix:has(input:checked){border-color:var(--accent);background:color-mix(in srgb,var(--accent) 9%,transparent)}
.choix input{accent-color:var(--accent);width:18px;height:18px;margin:0}
.formulaire label:not(.choix){display:block;font:600 .95rem var(--titre);margin:18px 0 8px}
.formulaire input:not([type=radio]),.formulaire textarea,.formulaire select{width:100%;background:var(--carte);color:var(--texte);border:1px solid var(--filet-2);border-radius:8px;padding:13px 14px;font:inherit}
.facultatif{color:var(--doux);font-weight:400}
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mention{color:var(--doux);font-size:.9rem;margin-top:18px}
.parcours-boutons{display:flex;gap:12px;flex-wrap:wrap}
.parcours-progression{color:var(--accent);font:600 .85rem var(--titre);letter-spacing:.12em;text-transform:uppercase}
html.sans-js .parcours-progression{display:none}
.parcours-retour{border:1px solid #E1655C;border-radius:8px;padding:14px 16px;max-width:720px}
/* pied */
.pied{border-top:1px solid var(--filet);padding:48px var(--marge) 28px;color:var(--doux);font-size:.95rem}
.pied-haut{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;margin-bottom:28px}
.pied-appel{font:600 1.3rem var(--titre);color:var(--texte)}
.pied-plan{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:28px;font:500 .95rem var(--titre)}
.pied-bas{display:flex;flex-wrap:wrap;gap:8px 28px}
.pied a{color:var(--texte)}
/* logo et attente des titres */
@media (prefers-reduced-motion:no-preference){
  html.attente [data-titre-anime]{visibility:hidden}
  html.logo-premiere .tete-logo .coin-hg{animation:coinHG .6s cubic-bezier(.3,1.4,.4,1) both}
  html.logo-premiere .tete-logo .coin-bd{animation:coinBD .6s cubic-bezier(.3,1.4,.4,1) both}
  html.logo-premiere .tete-logo .ja{animation:jaIn .7s var(--ease) .4s both}
  html.logo-premiere .tete-logo .studio{animation:studioIn .8s var(--ease) .8s both}
  html.logo-deja .tete-logo .logo{animation:fondu .3s ease both}
}
@keyframes coinHG{from{transform:translate(22px,22px);opacity:0}}
@keyframes coinBD{from{transform:translate(-22px,-22px);opacity:0}}
@keyframes jaIn{from{transform:translateY(14px);opacity:0}}
@keyframes studioIn{from{transform:scaleX(1.35);opacity:0}}
@keyframes fondu{from{opacity:0}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  .ouverture h1 em{background-position:0 0}
}