/* palette d'essai (image proposee par une graphiste du studio, 6/11): blanc, noir, rose mesure sur l'image #DE226E.
   ?rose=marque dans l'adresse reprend le framboise de la charte, pour comparer */
:root{--pink:#DE226E;--pink-deep:#B61C5A;--pink-light:#E65992}
html.rose-marque{--pink:#CF1149;--pink-deep:#A30D39;--pink-light:#E84E77}

/* version 2: la table seule. Un objet ouvert, la camera le cadre a gauche (en haut sur un ecran en hauteur) et ses projets
   s'ouvrent en eventail de cartes dans le panneau d'a cote. Plus de plans de travail ni de decor de logiciel: barres sans fond */

/* la scene: titre, version a plat et boutons des objets par-dessus le canevas */
.stage{position:absolute;inset:0;pointer-events:none}
.stage .ab.a1{position:absolute;inset:0;background:transparent;overflow:visible}
.stage .head{position:absolute;transition:opacity .45s ease,transform .6s var(--out)}
/* l'entree du titre ne garde pas son etat final: le fondu de sortie joue */
html.js:not(.boot) :is(.ab,.head){animation-fill-mode:backwards}
html.away .stage .head{opacity:0;transform:translateY(-10px);transition:opacity .2s ease,transform .4s var(--out)}
html.js .fallback{position:absolute;inset:auto;transform-origin:0 0;transition:transform .9s var(--out)}
.fallback>rect{fill:transparent}
.fbhit.on{cursor:default}
html.js .fbhit.on:hover{fill:transparent}
/* la 3D arrivee apres le delai prend la place du dessin a plat */
html.late .fallback{opacity:0;transition:opacity .7s ease}
html.late .fallback .fbhit{pointer-events:none}
html:is(.away,.lead) .objs{opacity:0;pointer-events:none}
html.lead .stage .head{opacity:0;transform:translateY(-10px);transition:opacity .2s ease,transform .4s var(--out)}
html.lead .hint{display:none}
html.away .hint{display:none}
html.away .back{animation:backin .3s ease .2s backwards}
@keyframes backin{from{opacity:0}}

/* objet ouvert: la table passe sous la barre du haut, un fondu garde le logo, le menu et le retour lisibles */
#pin::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--hb,60px) + 76px);z-index:2;pointer-events:none;
  background:linear-gradient(180deg,#111 calc(var(--hb,60px) - 6px),rgba(17,17,17,.82) calc(var(--hb,60px) + 30px),rgba(17,17,17,0));opacity:0;transition:opacity .5s ease}
html:is(.away,.lead) #pin::after{opacity:1}

/* barres: textes poses sur le fond, sans boite */
.ui.bar,.ui.cbar{background:transparent}
/* plus de menu des objets en haut a droite: la table, sa barre d'objets et les boutons des panneaux y menent deja.
   Il reste dans la version sans JavaScript, ou il est le seul sommaire */
html.js .menub,html.js .pages{display:none!important}
.brandbar{padding:0 4px}
.acts{padding:0 0 0 6px}
.pages a{position:relative;padding:0 10px}
.pages a:hover{background:none;color:#fff}
.pages a[aria-current="page"]{background:none;color:#fff}
.pages a[aria-current="page"]::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:2px;background:var(--pink)}
.langs a:hover{background:none;color:#fff}
.menub:hover,.menub[aria-expanded="true"]{background:none;color:#fff}
html.js:not(.desk) .pages{background:#111;box-shadow:0 0 0 1px rgba(255,255,255,.12)}
html.js:not(.desk) .pages .ps{display:inline}
html.js:not(.desk) .pages .pl,html.js:not(.desk) .pages .pn{display:none}
html.js:not(.desk) .pages a[aria-current="page"]::after{right:auto;width:24px;bottom:9px}
html.js.mob .pages{width:calc(100vw - 28px)}
/* retour a la table, objet precedent et suivant: boutons roses pleins, texte blanc, comme Nous ecrire */
.ui.back{background:var(--pink);color:#fff;padding:0 16px 0 13px;gap:9px}
.ui.back:hover{background:var(--pink-deep)}
.back .ar{color:#fff}
/* ecran large: Retour a la table monte dans la barre du haut, a cote du logo (la barre est vide depuis le retrait du menu).
   Sous le logo, il couvrait le haut du panneau de gauche (l'ordinateur) sur les ecrans bas */
html.js:not(.tall):not(.low) .back{top:max(14px,env(safe-area-inset-top,0px));left:calc(max(14px,env(safe-area-inset-left,0px)) + 134px)}
html.js.desk:not(.touchy) .back{height:46px}
/* barre du bas: le seul bouton Nous ecrire, a droite (l'adresse est sur la carte de visite de la table) */
.cbar{padding:0;gap:16px}
html.mob .cbar{justify-content:flex-end}
.hint{left:max(18px,env(safe-area-inset-left,0px));bottom:calc(30px + env(safe-area-inset-bottom,0px));transform:none;background:none;padding:0;font-size:13px;color:var(--ink3)}
.hint.off{transform:translateY(6px)}
#tip{background:#000;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.head h1{font-size:clamp(28px,calc(18px + 2.2vw),64px)}

/* panneaux: au-dessus du canevas, sous les barres. Un fond commun reste en place quand on passe d'un objet a l'autre;
   ecran large: a droite, la moitie de l'ecran, un fondu court laisse voir la table */
.panes{position:fixed;inset:0;z-index:6;pointer-events:none}
.panes::before{content:"";position:absolute;top:0;right:0;bottom:0;width:var(--pw,50vw);background:linear-gradient(90deg,rgba(17,17,17,0),rgba(17,17,17,.9) 48px,#111 72px);opacity:0;transition:opacity .45s ease}
html.away .panes::before{opacity:1}
/* objet pose a droite de la table (l'ordinateur): panneau a gauche, son propre fond fondu vers la droite */
.panes::after{content:"";position:absolute;top:0;left:0;bottom:0;width:var(--pw,50vw);background:linear-gradient(270deg,rgba(17,17,17,0),rgba(17,17,17,.9) 48px,#111 72px);opacity:0;transition:opacity .45s ease}
html.away.pane-left .panes::after{opacity:1}
html.away.pane-left .panes::before{opacity:0}
html.pane-left .pane{left:0;right:auto;padding-left:56px;padding-right:80px}
/* les degrades d'ombre passent sous les panneaux: celui de gauche, dessine apres eux, couvrait le texte et les boutons du panneau de l'ordinateur */
.panes::before,.panes::after{z-index:0}
.pane{z-index:1}
.pane{position:absolute;top:0;right:0;bottom:0;width:var(--pw,50vw);display:flex;flex-direction:column;overflow:hidden auto;overscroll-behavior:contain;touch-action:pan-y;
  padding:calc(var(--hb,60px) + 26px) 56px calc(var(--bb,60px) + 30px) 80px;
  visibility:hidden;opacity:0;transition:opacity .2s ease,visibility 0s .2s}
html.js .pane:not(.in){display:none}
/* un panneau qui defile s'efface avant de passer sous les boutons fixes: logo, retour et langue en haut, Nous ecrire en bas */
html.js:not(.tall):not(.lin) .pane{--mt:var(--hb,60px);
  -webkit-mask-image:linear-gradient(180deg,transparent var(--mt),#000 calc(var(--mt) + 16px),#000 calc(100% - var(--bb,60px) - 28px),transparent calc(100% - var(--bb,60px)));
  mask-image:linear-gradient(180deg,transparent var(--mt),#000 calc(var(--mt) + 16px),#000 calc(100% - var(--bb,60px) - 28px),transparent calc(100% - var(--bb,60px)))}
/* ecran bas: Nous ecrire n'est qu'une icone dans le coin, le bas du panneau reste net */
html.js.low:not(.tall):not(.lin) .pane{-webkit-mask-image:linear-gradient(180deg,transparent var(--mt),#000 calc(var(--mt) + 8px));mask-image:linear-gradient(180deg,transparent var(--mt),#000 calc(var(--mt) + 8px))}
.pane:focus{outline:none}
.pane.in{visibility:visible;transition:opacity .2s ease,visibility 0s}
.pane.on{opacity:1;pointer-events:auto;transition:opacity .4s ease .2s,visibility 0s}
.pane-in{position:relative;width:100%;max-width:min(860px,100%);margin:auto 0}
.pane .kick{margin:0 0 14px;font:500 clamp(12px,calc(6px + .4vw),16px)/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--pink-light)}
.pane h2:not(.kick),.pane .lead{margin:0 0 34px;max-width:15em;font-size:clamp(26px,calc(14px + 1.5vw),52px);font-weight:500;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.pane .sub{margin:-18px 0 30px;max-width:24em;font-size:clamp(17px,calc(10px + .7vw),24px);line-height:1.3;color:var(--ink2)}
.pane.nda .lead{max-width:21em;font-size:clamp(20px,calc(12px + 1vw),34px);line-height:1.3;letter-spacing:-.015em}
.pane :is(.kick,h2,.lead,.sub,.fine,.dlist,.cta,.pnav){transform:translateY(12px);opacity:0;transition:transform .6s var(--out),opacity .45s ease}
.pane.on :is(.kick,h2,.lead,.sub,.fine,.dlist,.cta,.pnav){transform:none;opacity:1}
.pane.on .sub{transition-delay:.12s}
.pane.on :is(h2:not(.kick),.lead){transition-delay:.06s}
.pane.on :is(.fine,.dlist,.cta,.pnav){transition-delay:.3s}

/* l'eventail: des tirages poses en arc, chacun couvre le bord droit du precedent; ils s'ouvrent depuis le bas a gauche */
.fan{position:relative;margin:0 0 20px;padding:0;list-style:none}
.fc{position:absolute;left:0;top:0;width:var(--cw,260px);transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg));transform-origin:50% 100%;
  transition:transform .75s var(--out) calc(.2s + var(--i) * 70ms),opacity .4s ease calc(.2s + var(--i) * 70ms)}
.pane:not(.on) .fc{transform:translate(-30px,80px) rotate(-16deg);opacity:0;transition-duration:.3s;transition-delay:0s}
.fc:has(> a.card):hover,.fc:focus-within{transform:translate(var(--x,0px),calc(var(--y,0px) - 22px)) rotate(calc(var(--r,0deg) * .25));z-index:30!important;transition-delay:0s;transition-duration:.35s}
.card{position:relative;display:block;padding:8px 8px 0;background:#F2F1EC;color:#141414;text-decoration:none;
  box-shadow:0 1px 0 rgba(0,0,0,.35),0 24px 42px -20px rgba(0,0,0,.8)}
.card .cv{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#D9D7D0}
.card.tall .cv{aspect-ratio:3/4}
.card .cv :is(img,video){position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.card .cl{display:flex;flex-direction:column;gap:5px;padding:10px 4px 12px}
.card .cl b{font:500 clamp(16px,calc(var(--cw,260px) * .045),21px)/1.2 var(--sans);letter-spacing:-.01em}
.card .cl em{display:flex;align-items:center;gap:6px;font:500 clamp(10.5px,calc(var(--cw,260px) * .028),13px)/1.25 var(--sans);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#4A4A4A}
.card .cl svg{flex:none;width:10px;height:10px;fill:currentColor}
a.card:focus-visible{outline:2px solid var(--pink-light);outline-offset:4px}
a.card:hover .cl b{color:var(--pink-deep)}
.card.still{cursor:default}
/* plus de 3 cartes: seule la derniere garde sa legende, les autres la montrent au survol ou au focus */
.fan.many .fc:not(:last-child):not(:hover):not(:focus-within) .cl{visibility:hidden}

/* cartes sans image: la matiere de l'objet, le titre en grand sur la face (la legende garde la nature) */
.card.mat .cv{display:grid;place-items:center;padding:18px;text-align:center}
.card.mat .cl b{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cvt{font:600 clamp(20px,calc(var(--cw,260px) * .08),34px)/1.12 var(--sans);letter-spacing:-.02em;text-wrap:balance}
.pane.film .card.mat .cv{background:#1C1C1C;color:#E9E9E9;box-shadow:inset 0 0 0 2px rgba(233,233,233,.5);padding-top:30px}
.pane.film .card.mat .cv::before{content:"";position:absolute;left:0;right:0;top:0;height:14px;background:repeating-linear-gradient(-45deg,#E9E9E9 0 11px,#1C1C1C 11px 22px)}
.pane.graphisme .card.mat .cv{background:linear-gradient(152deg,transparent 60%,var(--pink) 60% 73%,transparent 73%),#ECECEA}
.pane.interactif .card.mat .cv{background:var(--pink);color:#fff}
.pane.web .card.mat .cv{background:#E9E9E9;box-shadow:inset 0 0 0 10px #1A1A1A}
.pane.studio .card.mat .cv{background:#ECECEA}
.pane.studio .fc:nth-child(odd) .card.mat .cv{background:#1C1C1C;color:#E9E9E9}
/* sous NDA: cartes retournees, rayures de la chemise; le tampon sur la carte du dessus seulement */
.card.seal{padding:8px}
.card.seal .cv{background:repeating-linear-gradient(45deg,var(--pink-deep) 0 2px,transparent 2px 9px),#141414}
.stamp{padding:6px 12px;border:2px solid var(--pink-light);color:var(--pink-light);font:600 18px/1 var(--sans);letter-spacing:.12em;transform:rotate(-8deg);background:#141414}
.fan.sealed .fc:not(:last-child) .stamp{display:none}
.cta{margin:4px 0 0}
.rdv{display:inline-flex;align-items:center;gap:10px;min-height:46px;padding:0 18px;background:var(--pink);color:#fff;text-decoration:none;font:500 15px/1.2 var(--sans)}
.rdv:hover{background:var(--pink-deep)}

/* bas du panneau: documents, ligne de bas, objets voisins */
.pane .fine{margin:4px 0 0;max-width:36em;font-size:14px;line-height:1.5;color:var(--ink3)}
.pane .dlist{margin:0 0 16px;padding:0;list-style:none}
.pane .dlist a{display:flex;justify-content:space-between;gap:16px;padding:10px 0;color:#fff;text-decoration:none;border-top:1px solid rgba(255,255,255,.14)}
.pane .dlist span{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink3)}
.pnav{display:flex;justify-content:space-between;gap:16px;margin-top:18px}
.pnav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;background:var(--pink);font:500 clamp(13.5px,calc(8px + .38vw),17px)/1.2 var(--sans);color:#fff;text-decoration:none;transition:background .18s}
.pnav a:hover{background:var(--pink-deep)}
.pnav a:active,.ui.back:active{transform:translateY(1px)}

/* ecran tactile: 44 px sous le doigt pour les barres, le menu, la langue, le retour, l'adresse, les metiers et les objets */
html.touchy :is(.brandbar,.acts){height:44px}
html.touchy .brand{display:flex;align-items:center;height:100%}
html.touchy :is(.menub,.langs a){height:44px}
html.touchy .langs a{min-width:44px;justify-content:center}
html.js.touchy .pages a{height:44px}
html.touchy .back{height:44px}
html.touchy .cmail2{line-height:44px}
html.touchy .svc a{min-height:44px}
html.js:is(.mob,.touchy) .objs button{height:44px}
/* tablette debout: la rangee des objets defile comme au telephone */
html.js.tall.touchy .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.tall.touchy .objs.end{-webkit-mask-image:none;mask-image:none}
html.js.tall.touchy .objs button{flex:none}

/* ecran en hauteur (telephone, tablette debout): l'objet en haut, le panneau en bas, les cartes en rangee qui defile au doigt */
html.tall .panes::after{display:none}
html.tall .panes::before{top:auto;left:0;width:auto;height:var(--ph,56vh);background:linear-gradient(180deg,rgba(17,17,17,0),rgba(17,17,17,.94) 22px,#111 30px)}
html.tall .pane{top:auto;left:0;right:0;bottom:0;width:auto;height:var(--ph,56vh);display:block;padding:34px 18px calc(var(--bb,60px) + 18px);scroll-padding-bottom:calc(var(--bb,60px) + 12px)}
html.tall .pane.more{-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent)}
html.tall .pane-in{margin:0;max-width:none}
html.tall .pane .kick{margin-bottom:8px;font-size:11.5px}
html.tall .pane :is(h2:not(.kick),.lead){margin-bottom:16px;font-size:clamp(20px,5.6vw,26px);max-width:none}
html.tall .pane .sub{margin:-8px 0 14px;font-size:clamp(15px,4.2vw,18px)}
html.tall .pane.nda .lead{font-size:clamp(16px,4.4vw,19px)}
html.tall .fan{display:flex;gap:14px;height:auto!important;margin:0 -18px 6px;padding:12px 18px 14px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-padding:0 18px;touch-action:pan-x pan-y;scrollbar-width:none}
html.tall .fan::-webkit-scrollbar{display:none}
html.tall .fc{position:relative;flex:none;width:min(220px,56vw);transform:rotate(var(--r,0deg));scroll-snap-align:start}
html.tall .fc:has(.card.tall){width:min(160px,42vw)}
html.tall .pane:not(.on) .fc{transform:translateX(40px) rotate(var(--r,0deg))}
html.tall .fc:has(> a.card):hover,html.tall .fc:focus-within{transform:translateY(-6px) rotate(var(--r,0deg))}
html.tall .card .cl b{font-size:15px}
html.tall .pnav{margin-top:6px}
html.tab.tall .pnav{justify-content:flex-start;gap:40px}
html.tall .cbar{background:#111;padding:6px 6px 6px 14px}
/* telephone debout, objet ouvert: la barre contact laisse sa place au panneau (Contact reste dans le menu et sur la carte de visite) */
html.mob.away .cbar{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s,visibility 0s .3s}
html.mob.away .pane{padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
html.mob .fc{width:min(196px,52vw)}
html.mob .fc:has(.card.tall){width:min(140px,37vw)}
html.mob .cvt{font-size:19px}

/* mode bas (telephone en paysage): le titre dans la barre du haut, panneau compact */
html.low .stage .head{height:44px;display:flex;align-items:center}
html.low .head h1{font-size:19px;white-space:nowrap}
html.low .pane{padding:calc(var(--hb,56px) + 8px) max(18px,env(safe-area-inset-right,0px)) 14px 28px}
html.low .pane :is(h2:not(.kick),.lead){margin-bottom:16px;font-size:20px}
html.low .pane .kick{margin-bottom:8px}
html.low .card .cl{padding:7px 2px 9px}
html.low .card .cl b{font-size:13.5px}
html.low .cvt{font-size:16px}
html.low .pnav{margin-top:10px;padding-right:60px}
html.low .pane.nda .fan.sealed{display:none}

/* document lineaire, sans JavaScript: la table puis chaque objet et ses projets */
html.lin .ui.bar{position:absolute}
html.lin .stage{position:relative;inset:auto;max-width:880px;margin:0 auto;padding:96px 20px 0;pointer-events:auto}
html.lin .stage .head{position:relative}
html.lin .stage .ab.a1{position:relative;inset:auto;aspect-ratio:1200/760;margin-top:28px}
html.lin .fallback{position:absolute;inset:0;width:100%;height:100%}
html.lin .panes{position:static;max-width:880px;margin:0 auto;padding:0 20px 80px;pointer-events:auto}
html.lin .panes::before,html.lin .panes::after{display:none}
html.lin .pane{position:static;width:auto;height:auto;display:block;visibility:visible;opacity:1;padding:56px 0 0}
html.lin .pane :is(.kick,h2,.lead,.sub,.fine,.dlist,.cta){transform:none;opacity:1}
html.lin .fan{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px;height:auto!important}
html.lin .fc{position:static;width:auto;transform:none!important;opacity:1!important}
html.lin .card.mat .cl b{position:static;width:auto;height:auto;clip:auto}
html.lin .pnav{display:none}

@media (prefers-reduced-motion:reduce){
  .stage .head,.fallback,.pane,.panes::before,.panes::after,.pane :is(.kick,h2,.lead,.sub,.fine,.dlist,.cta,.pnav),.fc{transition:none!important}
  html.away .back{animation:none}
  .pane:not(.on) .fc{transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg))}
  .fc:has(> a.card):hover,.fc:focus-within{transform:translate(var(--x,0px),var(--y,0px)) rotate(var(--r,0deg))}
}