/* la table du studio: canevas, plans de travail, surcouche, barres fixes, modes d'ecran (classes posees par le script de tete).
   Style plat: ni arrondi, ni ombre, ni filet decoratif; seuls les anneaux de focus restent */

/* le canevas */
#pin{position:fixed;inset:0;z-index:1;overflow:hidden;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
#pin:focus{outline:none}
.world{position:absolute;left:0;top:0;transform-origin:0 0}
.wtop{pointer-events:none;z-index:2}

/* plans de travail: le cadre; leur contenu est dans sections.css */
.ab{position:absolute;background:var(--frame)}
.ab:focus{outline:none}
.ab.a1{background:var(--paper);opacity:1;overflow:hidden}
.abin{position:relative;padding:36px 40px 40px}

/* le titre pose sur le canevas */
.head{position:absolute;left:0;top:-200px;width:840px;padding:0}
html.js .head{pointer-events:none}
.head a{pointer-events:auto}
.head h1{font-size:clamp(28px,calc(18px + 2.2vw),48px);line-height:1.04;letter-spacing:-.035em}
.head .l1{display:block}
.nw{white-space:nowrap}
.svc{display:flex;flex-wrap:wrap;gap:6px 28px;margin-top:18px;font:500 11.5px/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
html.js .svc{font-size:13px;letter-spacing:.12em;margin-top:16px}
.svc a{display:inline-flex;align-items:center;color:inherit;text-decoration:none;transition:color .2s}
.svc a:hover{color:var(--pink-light)}
.hmail{display:none}

/* la table 3D, et sa version a plat sans WebGL */
#gl{display:none}
html.js #gl{display:block;position:absolute;left:0;top:0;width:100%;height:100%;outline:none;opacity:0;transition:opacity .7s ease}
html.glon #gl{opacity:1}
html.nogl #gl{display:none}
.fallback{position:absolute;inset:0;width:100%;height:100%;display:none}
html:not(.js) .fallback,html.nogl .fallback,html.late .fallback{display:block}
.fbhit{fill:transparent;pointer-events:all}
html.js .fbhit{cursor:pointer}
html.js .fbhit:hover{fill:rgba(255,255,255,.08)}
.load{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:12px;font:500 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.load i{display:block;width:120px;height:2px;background:var(--surf2);overflow:hidden;position:relative}
.load i::after{content:"";position:absolute;inset:0;width:40%;background:var(--pink);animation:ld 1.1s var(--out) infinite}
@keyframes ld{from{transform:translateX(-100%)}to{transform:translateX(260%)}}
html.glon .load,html.nogl .load,html:not(.js) .load{display:none}

/* surcouche en pixels ecran: commentaire du studio */
.ovl{position:absolute;inset:0;pointer-events:none;z-index:3}
.cpin{position:absolute;left:0;top:0;pointer-events:auto;display:block;transition:opacity .25s,visibility 0s}
.cpin .dot{position:absolute;left:0;bottom:0;width:30px;height:30px;background:var(--pink);color:#fff;display:grid;place-items:center;font:700 12px/1 var(--sans);letter-spacing:.02em;transition:transform .25s var(--out)}
.cpin:hover .dot{transform:scale(1.08)}
.cpin.gone{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility 0s .25s}
.bub{position:absolute;left:40px;bottom:-4px;min-width:178px;width:max-content;max-width:min(320px,calc(100vw - 80px));background:var(--surf);padding:10px 13px 11px;transform-origin:0 100%;transition:opacity .25s,transform .3s var(--out)}
.cpin.left .bub{left:auto;right:8px;bottom:40px}
.cpin.far .bub,.cpin.shut .bub{opacity:0;transform:scale(.9);pointer-events:none}
.bub .who{display:flex;gap:8px;align-items:center;font:500 12px/1 var(--sans);letter-spacing:.04em;color:var(--ink3);white-space:nowrap}
.bub .who b{color:var(--ink);font-weight:600}
.bub .txt{display:block;font:600 16px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.08em;color:var(--pink-light);margin-top:8px}

/* interface flottante: aplats sur le canevas */
.ui{position:fixed;z-index:10;background:var(--surf)}
html:not(.js) .ui:not(.bar){display:none}
.bar{top:max(14px,env(safe-area-inset-top,0px));height:46px;display:flex;align-items:center}
.brandbar{left:max(14px,env(safe-area-inset-left,0px));gap:14px;padding:0 16px 0 16px}
.brand{display:block;width:112px;line-height:0;color:#fff}
.brand svg{width:100%;height:auto;display:block}
.acts{right:max(14px,env(safe-area-inset-right,0px));gap:6px;padding:0 6px 0 10px}
.ui:has(.pages.open){z-index:12}

/* barre du haut: plans de travail, en menu sur les ecrans etroits */
.pages{display:flex;align-items:center;gap:2px}
.pages a{display:inline-flex;align-items:center;height:32px;padding:0 11px;font:500 13.5px/1 var(--sans);color:var(--ink2);text-decoration:none;white-space:nowrap;transition:background .18s,color .18s}
.pages a:hover{background:rgba(255,255,255,.07);color:#fff}
.pages a[aria-current="page"]{background:rgba(207,17,73,.2);color:#fff}
/* langue: un lien vers l'autre version du site, au bout de la barre des plans */
.langs{display:flex;align-items:center;margin-left:4px}
.langs a{display:inline-flex;align-items:center;height:32px;padding:0 10px;font:500 12.5px/1 var(--sans);letter-spacing:.12em;color:var(--ink2);text-decoration:none;transition:background .18s,color .18s}
.langs a:hover{background:rgba(255,255,255,.07);color:#fff}
.pages .pn,.pages .pl{display:none}
.menub{display:none;align-items:center;gap:8px;height:32px;padding:0 10px;font:500 13.5px/1 var(--sans);color:var(--ink2);white-space:nowrap;transition:background .18s,color .18s}
.menub:hover,.menub[aria-expanded="true"]{background:rgba(255,255,255,.07);color:#fff}
.menub svg{width:15px;height:15px;flex:none}
.menub .chev{width:11px;height:11px;transition:transform .2s var(--out)}
.menub[aria-expanded="true"] .chev{transform:rotate(180deg)}
.menub .ms{display:none}
html:not(.js) .menub{display:none}
html.js:not(.desk) .menub{display:inline-flex}
html.js:not(.desk) .pages{position:absolute;left:auto;right:0;top:calc(100% + 8px);display:none;flex-direction:column;align-items:stretch;gap:2px;width:300px;padding:6px;background:var(--surf)}
html.js:not(.desk) .pages.open{display:flex}
html.js:not(.desk) .pages a{height:42px;gap:12px;padding:0 10px;font-size:14px}
html.js:not(.desk) .pages .ps{display:none}
html.js:not(.desk) .pages .pl{display:inline}
html.js:not(.desk) .pages .pn{display:inline-grid;place-items:center;width:22px;height:22px;font-size:11.5px;font-weight:600;color:var(--ink3)}
html.js:not(.desk) .pages a[aria-current="page"] .pn{color:var(--pink-light)}
html.mob .pages{width:calc(100vw - 28px)}
html.mob .menub .ml{display:none}
html.mob .menub .ms{display:inline}
/* mode bas: le menu ouvert tient en deux colonnes au-dessus du bouton contact */
html.js.low .pages.open{display:grid;grid-template-rows:repeat(4,auto);grid-auto-flow:column;width:min(600px,calc(100vw - 28px))}

/* retour a la table */
.back{left:max(14px,env(safe-area-inset-left,0px));top:calc(max(14px,env(safe-area-inset-top,0px)) + 58px);height:42px;display:inline-flex;align-items:center;gap:9px;padding:0 16px 0 13px;font:500 14px/1 var(--sans);color:#fff;text-decoration:none;white-space:nowrap;transition:background .18s,opacity .3s}
.back:hover{background:var(--surf2)}
.back .ar{color:var(--pink-light);font-size:17px;line-height:1}

/* bas a droite: l'adresse et Nous ecrire ensemble */
.cbar{right:max(14px,env(safe-area-inset-right,0px));bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:12;display:flex;align-items:center;gap:6px;padding:5px 5px 5px 16px}
.cmail2{font:500 14px/1 var(--sans);color:var(--ink2);text-decoration:none;white-space:nowrap}
.cmail2:hover{color:var(--pink-light)}
.fab{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 18px 0 15px;background:var(--pink);color:#fff;font:500 14.5px/1 var(--sans);text-decoration:none;white-space:nowrap;transition:background .18s,transform .18s}
.fab:hover{background:var(--pink-deep)}
.fab:active{transform:translateY(1px)}
.fab svg{width:17px;height:17px;flex:none}

/* l'aide au survol reste dans le cadre de la table, au-dessus de la barre contact */
.hint{position:fixed;z-index:9;pointer-events:none;left:50%;bottom:98px;transform:translateX(-50%);display:flex;align-items:center;gap:9px;background:var(--surf);padding:8px 14px;font-size:12.5px;color:var(--ink2);white-space:nowrap;transition:opacity .4s,transform .4s var(--out)}
.hint.off{opacity:0;transform:translate(-50%,8px);pointer-events:none}
html:not(.js) .hint,html.away .hint,html.nogl .hint,html.touchy .hint{display:none}
#tip{position:fixed;left:0;top:0;z-index:8;pointer-events:none;display:flex;gap:8px;align-items:center;background:#000;color:#fff;font:500 12px/1 var(--sans);padding:7px 10px;white-space:nowrap;opacity:0;transition:opacity .18s}
#tip b{font-weight:600}
#tip span{color:var(--ink3)}
#tip.on{opacity:1}

/* accessibilite: aller au contenu, objets de la table au clavier */
.skip{position:fixed;left:14px;top:14px;z-index:70;transform:translateY(-200%);background:var(--pink);color:#fff;font:500 14px/1 var(--sans);padding:13px 16px;text-decoration:none}
.skip:focus{transform:none}
/* objets de la table en boutons: caches sauf au clavier sur ordinateur, visibles au toucher et sans 3D */
.objs{position:absolute;left:0;top:0;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;clip-path:inset(50%);pointer-events:none}
html.js .objs:has(:focus-visible),html.js.mob .objs,html.js.touchy .objs,html.js.nogl .objs{clip-path:none;pointer-events:auto}
.objs button{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;background:var(--surf);font:500 13.5px/1 var(--sans);color:var(--ink);white-space:nowrap}
.objs button em{font-style:normal;color:var(--ink3)}
.objs button:hover{background:var(--surf2)}

/* ecran de lancement: un logiciel de design qui ouvre son fichier (duree: splash_ms dans config.php) */
.splash{display:none}
html.boot .splash,html.opening .splash{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:#000;color:#fff;cursor:pointer}
.sp-in{display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 24px;width:min(440px,100%)}
.sp-logo{display:block;width:min(300px,70vw);height:auto;color:#fff;animation:spfade .5s ease both}
@keyframes spfade{from{opacity:0}}
html.boot #pin{opacity:0;transform:scale(.96)}
html.boot :is(.ui,.hint){opacity:0}
html.opening #pin{transition:opacity .6s ease,transform .6s var(--out)}
html.opening :is(.ui,.hint){transition:opacity .45s ease .2s}
html.opening .splash{opacity:0;pointer-events:none;transition:opacity .6s ease .05s}
html.opening .sp-in{opacity:0;transform:scale(.9);transition:transform .6s var(--out),opacity .35s ease}

/* entree */
html.js:not(.boot) :is(.ab,.head){animation:rise .9s var(--out) both}
html.js .ab.studio,html.js .ab.nda{animation-delay:.35s}
@keyframes rise{from{opacity:0}}

/* tailles par mode */
html.js:not(.desk) .brand{width:96px}
html.js:not(.desk) .brandbar{gap:10px}
html.mob .brandbar,html.low .brandbar{height:42px;padding:0 12px}
html.mob .acts,html.low .acts{height:42px;padding:0 4px}

/* telephone */
html.mob .hint{display:none}
html.mob .back{top:calc(max(14px,env(safe-area-inset-top,0px)) + 50px);height:40px}
html.mob .abin{padding:24px 22px 26px}
html.js.mob .svc{display:grid;grid-template-columns:1fr 1fr;font-size:12px;letter-spacing:.08em;gap:8px 10px;margin-top:14px}
/* rangee des objets sur une ligne qui defile au doigt, fondu a droite */
html.js.mob .objs{flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;overflow-y:hidden;padding:4px;touch-action:pan-x;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 84%,transparent);mask-image:linear-gradient(90deg,#000 84%,transparent)}
html.js.mob .objs::-webkit-scrollbar{display:none}
html.js.mob .objs.end{-webkit-mask-image:none;mask-image:none}
html.js.mob .objs button{flex:none}
html.js.mob .objs::after{content:"";flex:none;width:30px}
html.mob .fab{height:44px;padding:0 15px 0 13px;font-size:14px}
html.mob .cbar{left:max(14px,env(safe-area-inset-left,0px));justify-content:space-between;padding:4px 4px 4px 14px}
html.mob .cmail2{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:clamp(11px,3.4vw,13px)}

/* mode bas: telephone en paysage, fenetre peu haute. La table prend la hauteur, le contact se range en colonne a droite */
html.low .back{top:max(14px,env(safe-area-inset-top,0px));height:42px;left:calc(max(14px,env(safe-area-inset-left,0px)) + 134px)}
html.low .head h1{font-size:clamp(22px,6.4vh,30px)}
html.low .head .svc,html.low .cmail2{display:none}
/* telephone: les metiers sous le titre doublent le menu et les objets; la table prend leur place */
html.mob .head .svc{display:none}
html.js.low .objs:not(:has(:focus-visible)){clip-path:inset(50%);pointer-events:none}
html.low .hint{bottom:26px}
html.low .cbar{padding:5px}
html.low .cbar .fab{width:46px;padding:0;justify-content:center}
html.low .cbar .fab .bt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
html.low .abin{display:flow-root;padding:22px 28px 24px}

/* document lineaire, sans JavaScript: les memes plans de travail l'un sous l'autre, avec le defilement natif */
html.lin{scroll-padding-top:104px;scroll-padding-bottom:90px}
html.lin,html.lin body{height:auto;overflow:visible}
html.lin #pin{position:relative;inset:auto;overflow:visible;touch-action:auto;-webkit-user-select:auto;user-select:auto}
html.lin .world{position:relative;transform:none!important;max-width:880px;margin:0 auto;padding:96px 20px 40px;display:flex;flex-direction:column;gap:70px}
html.lin .head{position:relative;left:auto;top:auto!important;width:auto!important;margin:6px 14px 0}
html.lin .ab{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important}
html.lin .ab.a1{aspect-ratio:840/525;overflow:visible}
html.lin .abin{padding:30px 30px 32px}
html.lin :is(.ovl,#tip){display:none}
html.lin .hmail{display:inline-block;margin-top:14px;font-size:16px;font-weight:500;text-decoration:underline;text-decoration-color:var(--pink);text-decoration-thickness:1.5px;text-underline-offset:4px}
@media (max-width:699px){
  html.lin .world{padding:80px 16px 36px;gap:64px}
  html.lin .head{margin:4px 8px 0}
  html.lin .head h1{font-size:30px}
  html.lin .svc{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin-top:16px;letter-spacing:.08em}
  html.lin .ab.a1{aspect-ratio:1.45}
  html.lin .abin{padding:24px 20px 26px}
  html:not(.js) .brandbar{left:10px;top:10px;height:42px;padding:0 12px;gap:10px}
  html:not(.js) .brand{width:96px}
  html:not(.js) .pages{display:none}
  html:not(.js) .acts{right:10px;top:10px;height:42px;padding:0 4px}
}

@media (prefers-reduced-motion:reduce){
  .load i::after,.sp-logo{animation:none}
  html.js:not(.boot) :is(.ab,.head){animation:none}
  html.boot #pin{transform:none}
  .hint,.hint.off{transform:translateX(-50%)}
  html.opening #pin,html.opening .ui,html.opening .hint,html.opening .splash,html.opening .sp-in{transition:none}
  html.opening .sp-in{transform:none}
  .back,.menub .chev{transition:none}
}

/* telephone et mode bas: barres, menu, langue, retour et adresse a 44 px au moins sous le doigt */
html:is(.mob,.low) :is(.brandbar,.acts){height:44px}
html:is(.mob,.low) .brand{display:flex;align-items:center;height:100%}
html:is(.mob,.low) :is(.menub,.langs a){height:44px}
html:is(.mob,.low) .langs a{min-width:44px;justify-content:center}
html.js:is(.mob,.low) .pages a{height:44px}
html.mob .back{top:calc(max(14px,env(safe-area-inset-top,0px)) + 52px);height:44px}
html.low .back{height:44px}
html.mob .cmail2{line-height:44px}