/* ===========================================================
   Instinct, pixel-exact rebuild of instinct.paris
   Desktop design canvas = 1024 wide; phone design canvas = 390 wide.
   Each canvas holds elements in TRUE design pixels, then is scaled
   as a whole to fit the screen (one screen, no scroll, like the live
   Readymag viewer). Font sizes are fixed px and scale with the canvas.
   =========================================================== */

@font-face {
  font-family: 'akira';
  font-weight: 700; font-style: normal; font-display: block;
  src: url('../fonts/akira-expanded.woff2') format('woff2');
}
@font-face {
  font-family: 'alegreya';
  font-weight: 400; font-style: normal; font-display: block;
  src: url('../fonts/alegreya-regular.woff2') format('woff2');
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* visually hidden but readable by Google + screen readers (the page's single H1) */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
html, body { background: #fff; height: 100%; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }

.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #fff; overflow: hidden;
}
.canvas {
  position: relative;
  transform-origin: center center;
  background: #fff;
  flex: 0 0 auto;
}
.canvas.desktop { width: 1024px; height: 495px; }
.canvas.phone   { width: 390px;  height: 1010px; display: none; }

.w { position: absolute; color: #000; }

/* ---------- shared widget styles ---------- */
.logo img { width: 100%; height: auto; display: block; }
.slideshow { overflow: hidden; background:#fff; touch-action: pan-y; cursor: default; }
.slideshow:active { cursor: default; }
.slideshow .slide {
  position: absolute; inset: 0;
  background-size: contain; background-repeat: no-repeat; background-position: center;
  background-color: #fff;
  transform: translateX(100%);            /* position is driven inline by JS */
}
.slideshow.anim .slide { transition: transform 1s cubic-bezier(0.40,0.24,0.40,1); }
.poincon img { width: 100%; height: 100%; object-fit: contain; display: block; }

.hd  { font-family:'akira',sans-serif; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.body{ font-family:'alegreya',Georgia,serif; font-weight:400; text-align:justify; }
.links{ font-family:'akira',sans-serif; font-weight:700; text-transform:uppercase; }
.links .req { display:block; text-decoration: none; cursor:default; }
.links a.ig { display:block; text-decoration: underline; text-underline-offset:2px; }
.links a.ig:hover { opacity:.55; }
.contact .name{ position:absolute; font-family:'akira',sans-serif; font-weight:700; text-transform:uppercase; white-space:nowrap; }
.contact .role,.contact .mail{ position:absolute; font-family:'alegreya',Georgia,serif; font-weight:400; white-space:nowrap; }
.contact .mail:hover{ opacity:.55; }
.footer{ font-family:'alegreya',Georgia,serif; font-weight:400; text-align:right; }
.footer a{ text-decoration:underline; text-underline-offset:2px; }
.footer a:hover{ opacity:.55; }

/* ======================= DESKTOP (1024) =======================
   Content shifted up 244px to trim dead space (canvas is now 1024x470,
   a wide aspect that scales by width to fill the screen with margins). */
.desktop .logo      { left:49px;   top:14.3px;  width:182.4px; }  /* 5% smaller */
.desktop .slideshow { left:47px;   top:92.3px;  width:496px; height:302px; }  /* +10px gap below logo */
.desktop .poincon   { left:589.5px;top:195.3px; width:16px;  height:36px; }

.desktop .hd        { font-size:11px; line-height:20px; }
.desktop .hd-cd { left:587px; top:91.5px; }
.desktop .hd-tr { left:787px; top:91.5px; }
.desktop .hd-ep { left:587px; top:108.5px; }
.desktop .hd-pp { left:846px; top:108.5px; }   /* right-aligned to TALENT REPRESENTATION (ends ≈985) */

.desktop .body  { font-size:10px; line-height:13px; width:329px; }
.desktop .body-1{ left:638px; top:193.5px; }
.desktop .body-2{ left:638px; top:248.5px; }

/* Portfolio + social icons: "Portfolio on request" baseline sits on the image's
   bottom border line (image bottom ≈ 384px), icons row just under it. */
.desktop .links { left:587px; top:382px; font-size:11px; line-height:16px; }
.desktop .links .social { display:flex; gap:12px; margin-top:43px; }  /* icons on the contacts/footer baseline */
.links .social a { display:inline-flex; color:#000; }
.links .social a:hover { opacity:.55; }
.desktop .links .social svg { width:17px; height:17px; display:block; }

.desktop .contact .name { font-size:7px; line-height:9px; }
.desktop .contact .role,
.desktop .contact .mail { font-size:8px; line-height:10px; }
.desktop .c1 .name{top:438px} .desktop .c1 .role{top:449px} .desktop .c1 .mail{top:459px}
.desktop .c2 .name{top:438px} .desktop .c2 .role{top:449px} .desktop .c2 .mail{top:459px}
.desktop .c3 .name{top:438px} .desktop .c3 .role{top:449px} .desktop .c3 .mail{top:459px}
.desktop .c1 .name,.desktop .c1 .role,.desktop .c1 .mail{ left:47px; }
.desktop .c2 .name,.desktop .c2 .role,.desktop .c2 .mail{ left:212px; }
.desktop .c3 .name,.desktop .c3 .role,.desktop .c3 .mail{ left:376px; }

.desktop .footer{ left:638px; top:441px; width:329px; font-size:7px; line-height:10px; }

/* ======================= PHONE (fluid, scrollable) =======================
   Not a scaled fixed canvas anymore: a real flowing column. One gutter (28px)
   so logo, services, image and text all share the same left vertical border. */
.canvas.phone {
  width: 100%; max-width: 520px; height: auto; margin: 0 auto;
  padding: 56px 7.2% 64px;            /* gutter is a % so it scales with the column */
  container-type: inline-size;        /* lets children size in cqw (relative to THIS box) */
}
.phone .ph-head { display: flex; align-items: center; justify-content: space-between; }
.phone .ph-logo { display: block; width: 156px; }
.phone .ph-logo img { width: 100%; height: auto; display: block; }
.phone .ph-poincon { width: 20px; }   /* the "S" poinçon mark, top-right by the logo */
.phone .ph-poincon img { width: 100%; height: auto; display: block; }

/* services: same 2-column format as desktop, scaled by the column width (cqw) so the
   ratio is identical phone↔pc at any screen. Content-width columns spread left/right +
   nowrap = never wraps; 2.3cqw is the largest that still fits "TALENT REPRESENTATION".
   All horizontal values (gap, letter-spacing, gutter) are relative so the box width
   cancels out and one ratio holds from a 320px phone up to the 520px cap. */
/* two EQUAL columns (a box), col2 starts at 50% exactly like desktop (measured 50.3%).
   Different line lengths give the staircase. 2.6cqw is the biggest that still keeps
   "TALENT REPRESENTATION" inside its half-column without wrapping. */
.phone .ph-services {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: .55em;
  margin-top: 70px;
  font-family: 'akira', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 2.76cqw; line-height: 1.25; letter-spacing: .02em;   /* no-wrap ceiling for the box (breaks at ~2.8) */
  white-space: nowrap;
}
/* col2 (TALENT REPRESENTATION / POSTPRODUCTION) right-aligned: space before
   POSTPRODUCTION so its right edge reaches TALENT REPRESENTATION's. */
.phone .ph-services > *:nth-child(2),
.phone .ph-services > *:nth-child(4) { text-align: right; }
/* les 4 services sont des h2 (structure lisible par les moteurs) : ils héritent
   de la grille ci-dessus, on neutralise juste les valeurs par défaut du titre. */
.phone .ph-services h2, .desktop .hd { font-size: inherit; font-weight: 700; }
.desktop .hd { font-size: 11px; }

/* image box = the boundary; the artwork fits whole inside it (no crop) */
.phone .ph-slideshow {
  position: relative; width: 100%; aspect-ratio: 4 / 3;
  margin-top: 30px; overflow: hidden; background: #fff;
}

.phone .ph-body {
  margin-top: 36px;
  font-family: 'alegreya', Georgia, serif; font-weight: 400;
  font-size: 14.5px; line-height: 1.6; text-align: left;
}
.phone .ph-body p + p { margin-top: 22px; }

.phone .ph-links { margin-top: 45px; }   /* phone-only: Portfolio raised 5px */
.phone .ph-links .req {
  display: block;
  font-family: 'akira', sans-serif; font-weight: 700; text-transform: uppercase;
  font-size: 10px; letter-spacing: .2px;
}
.phone .ph-social { display: flex; gap: 18px; margin-top: 28px; }  /* phone-only: icons lowered 10px */
.phone .ph-social a { display: inline-flex; color: #000; }
.phone .ph-social a:hover { opacity: .55; }
.phone .ph-social svg { width: 24px; height: 24px; display: block; }

.phone .ph-team { margin-top: 44px; display: flex; flex-direction: column; gap: 24px; }
.phone .ph-person .nm { font-family: 'akira', sans-serif; font-weight: 700; text-transform: uppercase; font-size: 11px; line-height: 1.3; }
.phone .ph-person .rl { font-family: 'alegreya', Georgia, serif; font-size: 13.5px; line-height: 1.4; margin-top: 4px; }
.phone .ph-person .ml { font-family: 'alegreya', Georgia, serif; font-size: 13.5px; line-height: 1.4; display: inline-block; }
.phone .ph-person .ml:hover { opacity: .55; }

.phone .ph-footer {
  margin-top: 48px;
  font-family: 'alegreya', Georgia, serif; font-size: 13px; line-height: 1.5; text-align: left;
}
.phone .ph-footer a { text-decoration: underline; text-underline-offset: 2px; }
.phone .ph-footer a:hover { opacity: .55; }

/* ===================== legal mentions page ===================== */
.legal-wrap{ max-width:720px; margin:0 auto; padding:80px 28px 110px; font-family:'alegreya',Georgia,serif; font-size:15px; line-height:1.6; color:#000; }
.legal-wrap .legal-logo{ display:inline-block; width:190px; margin-bottom:46px; }
.legal-wrap .legal-logo img{ width:100%; height:auto; display:block; }
.legal-wrap h1{ font-family:'akira',sans-serif; font-weight:700; font-size:20px; text-transform:uppercase; margin-bottom:4px; }
.legal-wrap .updated{ font-style:italic; color:#666; margin-bottom:30px; }
.legal-wrap h2{ font-family:'akira',sans-serif; font-weight:700; font-size:14px; text-transform:uppercase; margin:26px 0 7px; }
.legal-wrap p{ margin-bottom:11px; }
.legal-wrap .back{ display:inline-block; margin-top:44px; font-family:'akira',sans-serif; font-weight:700; font-size:12px; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; }

/* ===================== about page ===================== */
.about-wrap .tagline{ font-family:'akira',sans-serif; font-weight:700; font-size:11px;
  text-transform:uppercase; letter-spacing:.16em; color:#000; margin:0 0 40px; }
.about-wrap .lede p{ margin-bottom:15px; text-align:justify; }
.about-wrap .lede p:last-child{ margin-bottom:0; }
.about-wrap .rule{ display:block; width:13px; height:auto; margin:52px 0 46px; }
.about-wrap h2{ margin:0 0 4px; }
.about-wrap .exp{ list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; column-gap:44px; }
.about-wrap .exp li{ border-top:1px solid #e4e4e4; padding:11px 0; }
.about-wrap .exp li:last-child{ border-bottom:1px solid #e4e4e4; }
.about-wrap .exp li:nth-child(2){ border-bottom:1px solid #e4e4e4; }
@media (max-width:640px){
  .about-wrap .exp{ grid-template-columns:1fr; }
  .about-wrap .exp li:nth-child(2){ border-bottom:0; }
  .about-wrap .exp li:last-child{ border-bottom:1px solid #e4e4e4; }
}

/* ===================== chantier SEO 2026-09-01 : /about et pages projets ===================== */
.about-wrap .exp strong, .about-wrap .exp a{ font-family:'akira',sans-serif; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.06em; display:block; }
.about-wrap .exp a{ text-decoration:underline; text-underline-offset:3px; }
.about-wrap .exp a:hover{ opacity:.55; }
.about-wrap .exp span{ display:block; font-size:13.5px; line-height:1.5; color:#333; margin-top:4px; }
.about-wrap .exp.works{ margin-top:6px; }
.about-wrap .exp + h2{ margin-top:36px; }
.about-wrap .lede h2{ margin:26px 0 6px; }
.about-wrap .lede h2:first-child{ margin-top:0; }
.legal-wrap .credits{ font-size:13px; color:#444; }
.legal-wrap .autres{ margin-top:18px; font-size:13.5px; }
.legal-wrap .autres a{ text-decoration:underline; text-underline-offset:2px; }
.legal-wrap .autres a:hover{ opacity:.55; }

/* telephone : texte a gauche (le justifie cree des trous en colonne etroite), marges plus courtes, titres de liens plus aeres */
@media (max-width:640px){
  .legal-wrap{ padding:52px 22px 72px; font-size:15px; }
  .legal-wrap .legal-logo{ width:150px; margin-bottom:34px; }
  .legal-wrap h1{ font-size:17px; line-height:1.35; }
  .legal-wrap p, .about-wrap .lede p{ text-align:left; }
  .about-wrap .tagline{ letter-spacing:.1em; line-height:1.5; margin-bottom:30px; }
  .about-wrap .rule{ margin:40px 0 34px; }
  .about-wrap .exp li{ padding:14px 0; }
  .about-wrap .exp strong, .about-wrap .exp a{ font-size:10.5px; line-height:1.6; letter-spacing:.05em; }
  .about-wrap .exp span{ font-size:14px; }
  .about-wrap .exp + h2{ margin-top:30px; }
  .legal-wrap .credits{ font-size:12.5px; }
  .legal-wrap .back{ margin-top:36px; }
}

/* ===================== newsletter (2026-09-01) : le poincon dans la rangee des icones ouvre le champ ===================== */
.news { display:flex; align-items:center; position:relative; }
.news__open { background:none; border:0; padding:0; cursor:pointer; display:inline-flex; align-items:center; color:#000; transition:opacity .25s, transform .6s cubic-bezier(.4,.24,.4,1); }
.news__open svg { width:100%; height:100%; display:block; }
.news__open:hover { opacity:.55; }
.is-sent .news__open { transform:none; }
.news__form { display:flex; align-items:baseline; gap:10px; max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  transition:max-width .6s cubic-bezier(.4,.24,.4,1), opacity .45s ease .1s, margin-left .6s cubic-bezier(.4,.24,.4,1); margin-left:0; }
.is-open .news__form { max-width:320px; opacity:1; margin-left:14px; }
.is-sending .news__form, .is-sent .news__form { opacity:0; transform:translateY(-3px); transition:opacity .35s, transform .35s; }
.is-sent .news__form { max-width:0; margin-left:0; pointer-events:none; transition:max-width .25s ease, margin-left .25s ease, opacity .2s; }
.news__ok { transition:opacity .5s ease; }
.news__email { font-family:'alegreya',Georgia,serif; font-weight:400; background:none; border:0; border-bottom:1px solid #000; border-radius:0; padding:0 0 2px; color:#000; outline:none; text-transform:none; letter-spacing:0; }
.news__email::placeholder { color:#b3b3b3; }
.news__email.is-bad { border-bottom-color:#A63D24; }
.news__go { font-family:'akira',sans-serif; font-weight:700; text-transform:uppercase; background:none; border:0; padding:0; color:#000; cursor:pointer; line-height:1; }
.news__go:hover { opacity:.55; }
.news__hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.news__note { position:absolute; left:0; top:100%; margin-top:4px; font-family:'alegreya',Georgia,serif; font-weight:400; text-transform:none; letter-spacing:0; color:#8a8a8a; white-space:nowrap; }
.news__note a { text-decoration:underline; text-underline-offset:2px; }
.news__ok { font-family:'akira',sans-serif; font-weight:700; text-transform:uppercase; opacity:0; max-width:0; overflow:hidden; white-space:nowrap; display:inline-flex; align-items:center; align-self:center; line-height:1; padding-top:2px; transition:opacity .4s ease .15s, max-width .01s linear .15s, margin-left .01s linear .15s; }
.is-sent .news__ok { opacity:1; max-width:260px; margin-left:14px; }
/* le pied de page absolu chevauchait la rangee des icones et avalait le clic */
.desktop .footer { pointer-events:none; }
.desktop .footer a { pointer-events:auto; }
/* desktop : le troisieme pictogramme, meme 17px, meme trait */
.desktop .links .social { align-items:center; }
.desktop .news { height:17px; }
.desktop .news__open { width:17px; height:17px; }
.desktop .news__email { font-size:10px; width:118px; }
.desktop .news__go { font-size:9px; }
.desktop .news__note { font-size:7px; line-height:10px; left:31px; margin-top:7px; white-space:normal; width:236px; }
.desktop .news__ok { font-size:9px; }
/* phone : 24px comme les deux autres, le champ passe sous la rangee si l ecran est etroit */
.phone .ph-social { align-items:center; flex-wrap:wrap; row-gap:14px; }
.phone .news__open { width:24px; height:24px; }
.phone .news__email { font-size:14px; width:170px; }
.phone .news__go { font-size:10px; }
.phone .news { height:auto; min-height:24px; min-width:0; align-items:flex-start; }
.phone .news:not(.is-open) .news__form { flex:0 0 0; width:0; height:0; min-width:0; margin:0; }
.phone .news:not(.is-open) .news__email { width:0; flex:0 0 0; }
.phone .news.is-open { width:100%; }
.phone .is-open .news__form { flex:1 1 auto; min-width:0; flex-wrap:wrap; max-width:none; align-items:baseline; }
.phone .is-open .news__email { flex:1 1 120px; width:auto; }
.phone .news__note { position:static; flex-basis:100%; font-size:11px; line-height:1.4; margin-top:6px; white-space:normal; }
.phone .news__ok { font-size:10px; }
/* /about : le bloc ouvert, en bas de page */
.about-wrap .news--about { display:block; margin-top:44px; }
.about-wrap .news--about h2 { margin-bottom:10px; }
.about-wrap .news--about .news__form { max-width:none; opacity:1; margin-left:0; }
.about-wrap .news--about .news__email { font-size:15px; width:260px; }
.about-wrap .news--about .news__go { font-size:11px; }
.about-wrap .news--about .news__note { position:static; display:block; margin-top:8px; font-size:12.5px; white-space:normal; }
.about-wrap .news--about .news__ok { display:block; font-size:12px; }
.about-wrap .news--about.is-sent .news__ok { margin-left:0; }