/* =====================================================================
   OR PRODUCT DESIGN — feuille de style
   ---------------------------------------------------------------------
   Toutes les mesures sont exprimées en « unités de maquette » (u) :
   - ordinateur : maquette de 2560 u de large  → 1 u = 100vw / 2560
   - tablette   : 1 u = 100vw / 1400
   - smartphone : maquette de 524 u de large   → 1 u = 100vw / 524
   Chaque page garde ainsi exactement les proportions des PDF.

   Tailles, graisses et crénages ont été mesurés sur les PDF (rendus à
   600 dpi) puis comparés aux contours réels des polices :
   - Archivo Thin 100 ........ menu, corps de texte, contact
   - Archivo Medium 500 ...... mots en gras du texte « à propos »
   - Archivo Bold 700 ........ grands titres et chiffres
   - IBM Plex Mono ExtraLight 200 : sous-titre expertise, « MON 19 08 EN Détail »
   - IBM Plex Mono Light 300 ..... légendes chiffres, boutons, intertitres compétences
   - Archivo Regular 400 / Plex Mono Regular 400 : fenêtre visuels
   ===================================================================== */

/* ---------- Polices ---------- */
@font-face{font-family:"Archivo";font-weight:100;font-style:normal;font-display:swap;src:url("../fonts/Archivo-Thin.ttf") format("truetype")}
@font-face{font-family:"Archivo";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/Archivo-Regular.ttf") format("truetype")}
@font-face{font-family:"Archivo";font-weight:500;font-style:normal;font-display:swap;src:url("../fonts/Archivo-Medium.ttf") format("truetype")}
@font-face{font-family:"Archivo";font-weight:700;font-style:normal;font-display:swap;src:url("../fonts/Archivo-Bold.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Mono";font-weight:200;font-style:normal;font-display:swap;src:url("../fonts/IBMPlexMono-ExtraLight.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Mono";font-weight:300;font-style:normal;font-display:swap;src:url("../fonts/IBMPlexMono-Light.ttf") format("truetype")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url("../fonts/IBMPlexMono-Regular.ttf") format("truetype")}

/* ---------- Variables ---------- */
:root{
  --bg:#F7F6F5;
  --ink:#000;              /* noir pur */
  --gold:#C8BE99;          /* beige doré des titres / du bloc contact */
  --gold-line:#D6BF76;     /* chevrons dorés */
  --brown:#605438;         /* texte du bloc contact */
  --brown-l:#7F724E;
  --muted:#84775B;
  --panel:#FBFAF8;         /* panneau texte de la fenêtre visuels */
  --font:"Archivo",Arial,Helvetica,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.65,0,.35,1);
  --bh:106.67;             /* hauteur du bandeau (u) */
  /* ordinateur : la maquette (2560 × 1413) tient dans la fenêtre */
  --u:max(min(calc(100vw / 2560), calc(100vh / 1413.33)), .5px);
}
@media (max-width:1199px){ :root{ --u:calc(100vw / 1400) } }
@media (max-width:699px){  :root{ --u:calc(100vw / 524)  } }

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:auto;overflow-x:clip}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-weight:100;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
img,svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,p{margin:0;font-weight:inherit}
b{font-weight:500}
.gold{color:var(--gold)}
:focus-visible{outline:1px solid var(--gold-line);outline-offset:4px}
::selection{background:var(--gold);color:#000}

/* ---------- Positionnement dans la maquette ----------
   --y  : ligne de base de la 1re ligne      --fs : corps      --lh : interligne
   --x  : bord gauche du texte (.l)           --cx : centre (.c)   --w : largeur de la boîte */
.frame{position:relative;flex:none;width:calc(2560 * var(--u));height:calc(1413.33 * var(--u))}
.t{
  position:absolute;--kb:.33;                               /* .33 Archivo · .37 Plex Mono : position de la ligne de base */
  font-size:calc(var(--fs) * var(--u));
  line-height:calc(var(--lh) * var(--u));
  top:calc((var(--y) - var(--lh) / 2 - var(--kb) * var(--fs)) * var(--u));
}
.t.mono{--kb:.37;font-family:var(--mono)}
.t.l{left:calc(var(--x) * var(--u))}
.t.c{left:calc((var(--cx) - var(--w) / 2) * var(--u));width:calc(var(--w) * var(--u));text-align:center}
.bold{font-weight:700}
.c-cols{display:contents}
br.p{display:none}

/* ---------- Pages ---------- */
.page,.slide{
  display:flex;align-items:center;justify-content:center;
  min-height:max(100vh, calc(1413.33 * var(--u)));
  background:var(--bg);overflow:hidden;position:relative;
}

/* =====================================================================
   BANDEAU
   ===================================================================== */
#bandeau{position:fixed;inset:0 0 auto 0;z-index:60;height:calc(var(--bh) * var(--u));background:var(--bg)}
.b-in{position:relative;width:calc(2560 * var(--u));height:100%;left:50%;transform:translateX(-50%)}
.b-logo{position:absolute;left:calc(893.3 * var(--u));top:calc(28.2 * var(--u));width:calc(89.7 * var(--u));display:block}
.b-logo img{width:100%;height:auto}
.b-nav a{
  position:absolute;white-space:nowrap;font-weight:100;letter-spacing:-.02em;
  font-size:calc(34 * var(--u));line-height:calc(40 * var(--u));
  top:calc((72.25 - 20 - .33 * 34) * var(--u));left:calc(var(--x) * var(--u));
}
.b-nav a:nth-child(1){--x:1044}
.b-nav a:nth-child(2){--x:1221.3}
.b-nav a:nth-child(3){--x:1405}
.b-nav a:nth-child(4){--x:1556}


.burger{display:none}

/* =====================================================================
   ACCUEIL  (reste en place : la page « à propos » glisse par-dessus)
   ===================================================================== */
.home{position:sticky;top:0;z-index:0;height:100vh;height:100svh;display:flex;align-items:center;justify-content:center;background:var(--bg)}
.home-logo{width:calc(684 * var(--u));height:auto}
.home-chev{position:absolute;left:50%;bottom:calc(73.3 * var(--u));width:calc(92 * var(--u));height:calc(29 * var(--u));transform:translateX(-50%);
  transition:transform .4s var(--ease)}
.chev-svg{width:100%;height:100%;overflow:visible;fill:none;stroke:var(--gold-line);stroke-width:calc(1.3 * var(--u))}
.chev-svg path{vector-effect:non-scaling-stroke}

#site>section:not(.home){position:relative;z-index:1}

/* =====================================================================
   À PROPOS ⇄ COMPÉTENCES (glissé horizontal)
   ===================================================================== */
.slot{overflow:hidden;background:var(--bg)}
.slides{display:flex;width:200%;align-items:flex-start;transition:transform .8s var(--ease)}
.slot[data-active="1"] .slides{transform:translateX(-50%)}
.slide{width:50%;flex:none}

/* ---- à propos ---- */
.a-title{--fs:60;--lh:57;--y:236.25;--cx:1277.5;--w:2000;font-weight:700;letter-spacing:-.037em}
.a-fig{--fs:176;--lh:176;--y:521.25;font-weight:700;letter-spacing:-.034em;white-space:nowrap}
.a-fig-l{--x:897.25}
.a-fig-r{--x:1456.7}
.a-num.gold{color:var(--gold)}
.a-sep{position:absolute;left:calc(1279 * var(--u));top:calc(392 * var(--u));width:calc(2 * var(--u));height:calc(192 * var(--u));background:#7B7B7A}
.a-cap{font-family:var(--mono);--kb:.37;--fs:19.2;--lh:23.25;--w:700;font-weight:300;letter-spacing:.088em;white-space:nowrap}
.a-cap-l{--cx:999.85;--y:565.25}
.a-cap-r{--cx:1559.85;--y:565.25}
.a-body{--fs:26.6;--lh:31.75;--y:706.25;--x:666.5;width:calc(1225 * var(--u));letter-spacing:-.003em}
.a-body p{margin:0 0 calc(31.75 * var(--u))}
.a-body p:last-child{margin-bottom:0}

/* boutons « découvrez mes compétences » / « à propos » */
.btn-next,.btn-prev{
  --fs:19.2;--lh:24;--y:1352.25;
  font-family:var(--mono);font-weight:300;letter-spacing:.088em;text-transform:uppercase;white-space:nowrap;
  display:flex;align-items:center;gap:calc(20.5 * var(--u));
}
.btn-next{right:calc(2560 * var(--u) - 1894.5 * var(--u))}
.btn-prev{left:calc(639 * var(--u))}
.btn-next svg,.btn-prev svg{flex:none;width:calc(12 * var(--u));height:calc(32 * var(--u));fill:none;stroke:var(--gold-line);stroke-width:calc(1.3 * var(--u));overflow:visible;
  transition:transform .35s var(--ease);margin-top:calc(-4.5 * var(--u))}
.btn-next svg path,.btn-prev svg path{vector-effect:non-scaling-stroke}
.btn-next:hover svg{transform:translateX(calc(5.33 * var(--u)))}
.btn-prev:hover svg{transform:translateX(calc(-5.33 * var(--u)))}
.btn-label{position:relative}

.btn-next:hover .btn-label::after,.btn-prev:hover 

/* ---- compétences ---- */
.c-title span{position:absolute;white-space:nowrap;line-height:1}
.c-mon,.c-en,.c-detail{font-family:var(--mono);font-weight:200}
.c-19,.c-08{font-weight:700;font-size:calc(140.6 * var(--u));letter-spacing:-.067em}
.c-08{color:var(--gold)}
.c-mon{font-size:calc(91.7 * var(--u));letter-spacing:-.073em;left:calc(631.7 * var(--u));top:calc((269 - .87 * 91.7) * var(--u))}
.c-19{left:calc(776 * var(--u));top:calc((269.4 - .83 * 140.6) * var(--u))}
.c-08{left:calc(776 * var(--u));top:calc((382.5 - .83 * 140.6) * var(--u))}
.c-en{font-size:calc(103.2 * var(--u));letter-spacing:.133em;left:calc(798 * var(--u));top:calc((478.3 - .87 * 103.2) * var(--u))}
.c-detail{font-size:calc(68.3 * var(--u));letter-spacing:.088em;
  left:calc((992.6 - .87 * 68.3) * var(--u));top:calc(485.3 * var(--u));transform-origin:0 0;transform:rotate(-90deg)}
.c-col{--fs:26.4;--lh:28.35;--kb:.37;width:calc(572 * var(--u));letter-spacing:-.027em}
.c-col h2{font-family:var(--mono);font-weight:300;font-size:calc(26.5 * var(--u));line-height:calc(28.35 * var(--u));margin:0 0 calc(28.35 * var(--u));letter-spacing:-.029em}
.c-list{margin:0 0 calc(28.35 * var(--u))}
.c-col > :last-child,.c-muted > :last-child{margin-bottom:0}
.c-left{--x:639;--y:550.2}
.c-right{--x:1349.6;--y:192}
.c-muted{color:var(--muted);letter-spacing:-.04em}.c-muted h2{color:var(--muted);letter-spacing:-.044em}

/* ---- expertise ---- */
.e-title{--fs:60;--lh:66;--y:279.5;--cx:1277;--w:2000;font-weight:700;letter-spacing:-.037em}
.e-sub{font-family:var(--mono);--kb:.37;--fs:37.7;--lh:34.3;--y:357.5;--cx:1277.5;--w:1262;font-weight:200;letter-spacing:0}
.e-h{--fs:49;--lh:54;--w:2000;font-weight:700;letter-spacing:-.039em}
.e-h1{--y:592;--cx:1279.5}
.e-h2{--y:909;--cx:1277.8}
.e-p{--fs:34;--lh:37.8;--w:2000;letter-spacing:0}
.e-p1{--y:663.9;--cx:1278.7}
.e-p2{--y:980.4;--cx:1277.5}

/* =====================================================================
   PROJETS + CONTACT
   ===================================================================== */
.projets{background:var(--bg);padding-top:0}
.p-title{position:relative;font-size:calc(60 * var(--u));line-height:calc(66 * var(--u));font-weight:700;letter-spacing:-.037em;text-align:center;
  height:calc(334 * var(--u));margin:0;padding-top:calc((272.7 - 33 - .33 * 60) * var(--u));left:calc(-2 * var(--u))}
.grille{width:calc(1800 * var(--u));margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr)}
.tuile{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;background:#e6e6e6;cursor:pointer;border:0;padding:0}
.tuile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .45s ease,transform 2s cubic-bezier(.2,.7,.2,1)}



.contact{background:var(--bg);display:flex;justify-content:center}
.ct-box{position:relative;width:calc(1800 * var(--u));height:calc(376.57 * var(--u));background:var(--gold);color:var(--brown)}
.ct-title{position:absolute;left:0;right:0;font-size:calc(37.7 * var(--u));line-height:calc(40 * var(--u));text-align:center;text-transform:uppercase;
  font-weight:100;letter-spacing:0;color:var(--brown);top:calc((58.25 - 20 - .33 * 37.7) * var(--u));padding-left:calc(3 * var(--u))}
.ct-col{position:absolute;top:0;width:calc(500 * var(--u));height:100%;color:var(--brown);left:calc(50% + (var(--cx) - var(--c0) - 250) * var(--u))}
.ct-box{--c0:1280}
.ct-adr{--cx:890.5}
.ct-tel{--cx:1280.5}
.ct-mail{--cx:1676.5}
.ct-picto{position:absolute;display:block;left:50%;transform:translateX(-50%)}
.ct-picto img{width:100%;height:100%}
.ct-adr .ct-picto{top:calc(140 * var(--u));width:calc(41 * var(--u));height:calc(55 * var(--u))}
.ct-tel .ct-picto{top:calc(132 * var(--u));width:calc(59 * var(--u));height:calc(59 * var(--u))}
.ct-mail .ct-picto{top:calc(138 * var(--u));width:calc(64 * var(--u));height:calc(45 * var(--u))}
.ct-label,.ct-val{position:absolute;left:0;right:0;text-align:center;font-weight:100;white-space:nowrap;letter-spacing:0}
.ct-label{font-size:calc(23 * var(--u));line-height:calc(26 * var(--u));text-transform:uppercase;color:var(--brown-l)}
.ct-val{font-size:calc(22.7 * var(--u));line-height:calc(22.5 * var(--u))}
.ct-adr .ct-label{top:calc((232.25 - 13 - .33 * 23) * var(--u))}
.ct-tel .ct-label{top:calc((231 - 13 - .33 * 23) * var(--u))}
.ct-mail .ct-label{top:calc((228.75 - 13 - .33 * 23) * var(--u))}
.ct-adr .ct-val{top:calc((284.5 - 11.25 - .33 * 22.7) * var(--u))}
.ct-tel .ct-val{top:calc((307 - 11.25 - .33 * 22.7) * var(--u))}
.ct-mail .ct-val{top:calc((307.5 - 11.25 - .33 * 22.7) * var(--u))}
.ct-picto,.ct-label,.ct-val{transition:opacity .3s ease}
.ct-val:hover{opacity:.62}


/* =====================================================================
   FENÊTRE VISUELS
   ===================================================================== */
#viewer{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
#viewer.is-open{opacity:1;visibility:visible;transition:opacity .35s ease}
#viewer[hidden]{display:flex}
.v-backdrop{position:absolute;inset:0;background:rgba(38,38,38,.82)}
.v-window{--vu:var(--u);position:relative;display:flex;width:calc(1600 * var(--vu));height:calc(800 * var(--vu));background:var(--panel);
  transform:scale(.97);transition:transform .45s var(--ease);box-shadow:0 20px 80px rgba(0,0,0,.35)}
#viewer.is-open .v-window{transform:scale(1)}
.v-media{position:relative;flex:none;width:66.667%;height:100%;background:#cbc9ca;overflow:hidden}
.v-stage{position:absolute;inset:0;display:flex;transition:transform .6s var(--ease)}
.v-stage img{flex:none;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}
.v-btn{position:absolute;z-index:2;color:#000;transition:color .3s ease,transform .3s var(--ease),opacity .3s ease}
.v-btn svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:calc(.76 * var(--vu));overflow:visible}
.v-btn path{vector-effect:non-scaling-stroke}
.v-btn.on-dark{color:#fff}
.v-close{top:calc(26 * var(--vu));right:calc(25.7 * var(--vu));width:calc(28 * var(--vu));height:calc(27 * var(--vu))}
.v-prev,.v-next{top:50%;width:calc(29 * var(--vu));height:calc(91 * var(--vu));margin-top:calc(-45.5 * var(--vu))}
.v-prev{left:calc(24 * var(--vu))}
.v-next{right:calc(24 * var(--vu))}
.v-btn::before{content:"";position:absolute;inset:-14px}     /* zone de clic élargie */
.v-close:hover{transform:rotate(90deg) scale(1.12)}


.v-close:hover{opacity:.65}
.v-info{position:relative;flex:1;min-width:0;padding:0 calc(55 * var(--vu)) 0 calc(56.7 * var(--vu));background:var(--panel)}
.v-title{position:absolute;left:calc(56.7 * var(--vu));right:calc(55 * var(--vu));top:calc((73.25 - 14 - .33 * 22.67) * var(--vu));
  font-size:calc(22.67 * var(--vu));line-height:calc(28 * var(--vu));font-weight:400;letter-spacing:-.006em}
.v-text{position:absolute;left:calc(56.7 * var(--vu));right:calc(55 * var(--vu));top:calc((194.7 - 11.35 - .37 * 18.67) * var(--vu));
  font-family:var(--mono);font-weight:400;font-size:calc(18.67 * var(--vu));line-height:calc(22.7 * var(--vu));letter-spacing:0;text-align:justify;hyphens:none}
.v-dots{position:absolute;left:calc(56 * var(--vu));top:calc(751 * var(--vu));display:flex;gap:calc(6.1 * var(--vu))}
.v-dot{width:calc(8.4 * var(--vu));height:calc(8.4 * var(--vu));border-radius:50%;background:#DCDCDC;transition:background .3s ease,transform .3s ease;cursor:pointer;position:relative}
.v-dot::after{content:"";position:absolute;inset:-8px}
.v-dot.is-on{background:#AF964E}
.v-dot:hover{transform:scale(1.35)}
body.v-lock{overflow:hidden}
html.menu-open{overflow:hidden}

/* =====================================================================
   TABLETTE (700 – 1199 px) : même composition que l'ordinateur, mise à
   l'échelle sur une maquette de 1400 u de large. La grille des projets
   et le bloc contact occupent toute la largeur.
   ===================================================================== */
@media (max-width:1199px) and (min-width:700px){
  .grille{width:100%;grid-template-columns:repeat(3,1fr)}
  .ct-box{width:100%}
  .v-window{--vu:min(var(--u), calc(94vw / 1600))}
}
@media (max-width:899px) and (min-width:700px){
  .grille{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:700px){ #menu-mobile{display:none!important} }

/* fenêtre visuels « portrait » (smartphone et tablette portrait) : image en haut, texte dessous */
@media (max-width:999px){
  .v-window{--vu:min(calc(92vw / 444), calc(640px / 444));width:calc(444 * var(--vu));height:calc(514.7 * var(--vu));flex-direction:column}
  .v-media{width:100%;height:calc(333.2 * var(--vu))}
  .v-close{top:calc(12 * var(--vu));right:calc(12 * var(--vu));width:calc(13 * var(--vu));height:calc(13 * var(--vu))}
  .v-btn svg{stroke-width:calc(.9 * var(--vu))}
  .v-prev,.v-next{width:calc(13.6 * var(--vu));height:calc(42.7 * var(--vu));margin-top:calc(-21.35 * var(--vu))}
  .v-prev{left:calc(11.3 * var(--vu))}
  .v-next{right:calc(11.3 * var(--vu))}
  .v-btn::before{inset:calc(-10 * var(--vu))}
  .v-info{flex:1;padding:0}
  .v-title{left:calc(21 * var(--vu));right:calc(21 * var(--vu));top:calc((50.3 - 9 - .33 * 15.3) * var(--vu));font-size:calc(15.3 * var(--vu));line-height:calc(18 * var(--vu))}
  .v-text{left:calc(21 * var(--vu));right:calc(21 * var(--vu));top:calc((78.9 - 6.8 - .37 * 11.5) * var(--vu));font-size:calc(11.5 * var(--vu));line-height:calc(13.6 * var(--vu))}
  .v-dots{left:50%;transform:translateX(-50%);top:calc(6.6 * var(--vu));gap:calc(2.3 * var(--vu))}
  .v-dot{width:calc(4.4 * var(--vu));height:calc(4.4 * var(--vu))}
}

/* =====================================================================
   SMARTPHONE (< 700 px) : maquette de 524 u de large
   ===================================================================== */
@media (max-width:699px){
  .page,.slide{display:block;min-height:0}
  .frame{width:100%;height:calc(var(--H) * var(--u))}
  .page-about .frame{--H:1698.2}
  .page-comp .frame{--H:2278.3}
  .page-exp .frame{--H:904.5}
  .p{display:inline}
  br.p{display:inline}

  /* bandeau */
  #bandeau{height:calc(93.33 * var(--u))}
  .b-in{width:100%;left:0;transform:none}
  .b-logo{left:calc(53.5 * var(--u));top:calc(36 * var(--u));width:calc(59.5 * var(--u))}
  .b-nav{display:none}
  .burger{display:block;position:absolute;right:calc(52.9 * var(--u));top:calc(36 * var(--u));width:calc(28.5 * var(--u));height:calc(30 * var(--u))}
  .burger::before{content:"";position:absolute;left:-16px;right:-16px;top:-12px;bottom:-12px}
  .burger span{position:absolute;left:0;width:100%;height:max(1.3px, calc(1.3 * var(--u)));background:#000;transition:transform .35s var(--ease),opacity .25s ease;top:0}
  .burger span:nth-child(1){top:calc(5.1 * var(--u))}
  .burger span:nth-child(2){top:calc(14.6 * var(--u))}
  .burger span:nth-child(3){top:calc(24.1 * var(--u))}
  .burger.is-open span:nth-child(1){transform:translateY(calc(9.5 * var(--u))) rotate(45deg)}
  .burger.is-open span:nth-child(2){opacity:0}
  .burger.is-open span:nth-child(3){transform:translateY(calc(-9.5 * var(--u))) rotate(-45deg)}

  /* menu */
  #menu-mobile{position:fixed;inset:0;z-index:55;background:var(--bg);opacity:0;transition:opacity .3s ease}
  #menu-mobile[hidden]{display:none}
  #menu-mobile.is-open{opacity:1}
  #menu-mobile a{position:absolute;left:calc(53.5 * var(--u));font-size:calc(34 * var(--u));line-height:calc(40 * var(--u));font-weight:100;letter-spacing:-.02em;white-space:nowrap;
    top:calc((var(--y) - 20 - .33 * 34) * var(--u))}
  #menu-mobile a:nth-child(1){--y:185.9}
  #menu-mobile a:nth-child(2){--y:284.9}
  #menu-mobile a:nth-child(3){--y:383.9}
  #menu-mobile a:nth-child(4){--y:482.7}
  #menu-mobile nav{position:absolute;inset:0}

  /* accueil */
  .home-logo{width:calc(358 * var(--u));margin-top:calc(28 * var(--u))}
  .home-chev{bottom:calc(51 * var(--u));width:calc(91 * var(--u));height:calc(29.5 * var(--u))}

  /* à propos */
  .a-title{--fs:42;--lh:40;--y:197;--cx:262;--w:524;white-space:nowrap}
  .a-fig{--fs:150;--lh:150;letter-spacing:-.045em}
  .a-fig-l{--x:176.4;--y:501.2}
  .a-fig-r{--x:174.5;--y:733.3}
  .a-sep{display:none}
  .a-cap{--fs:16.1;--lh:19;--w:524}
  .a-cap-l{--cx:262.4;--y:537.5}
  .a-cap-r{--cx:260.8;--y:769.5}
  .a-body{--fs:18.8;--lh:22.2;--y:884;--x:38.7;width:calc(447 * var(--u))}
  .a-body p{margin-bottom:calc(22.2 * var(--u))}
  .btn-next{--fs:18.9;--y:1606;right:calc(39 * var(--u))}
  .btn-prev{--fs:18.9;--y:2202;left:calc(39 * var(--u))}
  .btn-prev{gap:calc(24 * var(--u))}

  /* compétences */
  .c-mon{font-size:calc(101.5 * var(--u));letter-spacing:-.053em;left:calc(54.5 * var(--u));top:calc((266 - .87 * 101.5) * var(--u))}
  .c-19{font-size:calc(154 * var(--u));letter-spacing:-.031em;left:calc(218.5 * var(--u));top:calc((266 - .83 * 154) * var(--u))}
  .c-08{font-size:calc(154 * var(--u));letter-spacing:-.0755em;left:calc(225 * var(--u));top:calc((390 - .83 * 154) * var(--u))}
  .c-en{font-size:calc(113.5 * var(--u));letter-spacing:.175em;left:calc(243 * var(--u));top:calc((496.5 - .87 * 113.5) * var(--u))}
  .c-detail{font-size:calc(75.2 * var(--u));letter-spacing:.09em;left:calc((463 - .87 * 75.2) * var(--u));top:calc(504.5 * var(--u))}
  .c-cols{display:block;position:absolute;left:calc(39.4 * var(--u));top:calc((618 - 11.3 - .37 * 18.8) * var(--u));width:calc(445 * var(--u));font-size:calc(18.8 * var(--u));line-height:calc(22.67 * var(--u))}
  .c-col{position:static;width:auto;font-size:calc(18.8 * var(--u));line-height:calc(22.67 * var(--u))}
  .c-col h2{font-size:calc(18.8 * var(--u));line-height:calc(22.67 * var(--u));margin-bottom:calc(22.67 * var(--u))}
  .c-list{margin-bottom:calc(22.67 * var(--u))}
  .c-right{margin-top:calc(22.67 * var(--u))}

  /* expertise */
  .e-title{--fs:42;--lh:46;--y:180;--cx:261.75;--w:524}
  .e-sub{--fs:26.3;--lh:24;--y:241;--cx:262.5;--w:430}
  .e-h{--fs:33.8;--lh:38;--w:524}
  .e-h1{--y:476;--cx:262.5}
  .e-h2{--y:653.5;--cx:261.5}
  .e-p{--fs:17;--lh:21.1;--w:452}
  .e-p1{--y:510.5;--cx:262}
  .e-p2{--y:687.8;--cx:262}

  /* projets + contact */
  .p-title{height:calc(276.5 * var(--u));padding-top:calc((193 - 33 - .33 * 60) * var(--u));left:calc(-3 * var(--u))}
  .grille{width:100%;grid-template-columns:1fr}
  .ct-box{width:100%;height:calc(590.87 * var(--u))}
  .ct-title{display:none}
  .ct-col{--c0:262;--cx:261.75}
  .ct-adr .ct-picto{top:calc(80 * var(--u));width:calc(27.5 * var(--u));height:calc(37.5 * var(--u))}
  .ct-tel .ct-picto{top:calc(258.5 * var(--u));width:calc(39.5 * var(--u));height:calc(39.5 * var(--u))}
  .ct-mail .ct-picto{top:calc(442 * var(--u));width:calc(43 * var(--u));height:calc(30.5 * var(--u))}
  .ct-label{font-size:calc(15.2 * var(--u));line-height:calc(18 * var(--u))}
  .ct-val{font-size:calc(15.2 * var(--u));line-height:calc(15 * var(--u))}
  .ct-adr .ct-label{top:calc((142.5 - 9 - .33 * 15.2) * var(--u))}
  .ct-tel .ct-label{top:calc((325.5 - 9 - .33 * 15.2) * var(--u))}
  .ct-mail .ct-label{top:calc((503.5 - 9 - .33 * 15.2) * var(--u))}
  .ct-adr .ct-val{top:calc((177.5 - 7.5 - .33 * 15.2) * var(--u))}
  .ct-tel .ct-val{top:calc((375.5 - 7.5 - .33 * 15.2) * var(--u))}
  .ct-mail .ct-val{top:calc((556.3 - 7.5 - .33 * 15.2) * var(--u))}
}


/* =====================================================================
   EFFETS DE SURVOL (ordinateur) — repris de la version de référence
   ===================================================================== */
/* liens du bandeau : dorés au survol, naturels ensuite */
.b-nav a{transition:color .35s ease}
.b-nav a:hover{color:#AF964E}
/* logo, chevrons, flèches, pictos */
.b-logo{transition:opacity .35s ease}
.b-logo:hover{opacity:.62}
.home-chev svg{transition:transform .35s ease,opacity .35s ease}
.home-chev:hover svg{transform:translateY(calc(4 * var(--u)));opacity:.72}
.ct-picto img{transition:transform .35s ease,opacity .35s ease}
.ct-picto:hover img{transform:translateY(calc(-2.67 * var(--u)));opacity:.7}
/* fenêtre visuels : flèches (échelle + trait plus épais + halo) */
.v-btn svg{transition:transform .3s ease}
.v-btn path{transition:stroke-width .3s ease}
.v-prev svg,.v-next svg{transition:transform .35s ease,opacity .35s ease}
.v-prev:hover svg{transform:translateX(calc(-4 * var(--vu)));opacity:.72}
.v-next:hover svg{transform:translateX(calc(4 * var(--vu)));opacity:.72}



/* =====================================================================
   PROJETS : zoom + légende
   ===================================================================== */
.tuile-cap{position:absolute;left:0;right:0;bottom:7%;z-index:2;padding:0 6%;text-align:center;pointer-events:none;
  font-family:var(--mono);font-weight:400;letter-spacing:0;line-height:1.3;color:var(--cap-color,#000);
  font-size:max(9px, calc(6.67 * var(--u)));opacity:0;transition:opacity .5s ease}
@media (hover:hover) and (min-width:1200px){
  .tuile:hover img,.tuile:focus-visible img{filter:grayscale(0);transform:scale(1.2)}
  .tuile:hover .tuile-cap,.tuile:focus-visible .tuile-cap{opacity:1}
}
/* tablette et smartphone : 1er toucher = voile blanc + léger zoom + légende ; 2e toucher = ouverture */
.tuile::after{content:"";position:absolute;inset:0;background:#fff;opacity:0;transition:opacity .6s ease;pointer-events:none;z-index:1}
.tuile.is-armed::after{opacity:.5}
.tuile.is-armed img{filter:grayscale(1);transform:scale(1.08)}
.tuile.is-armed .tuile-cap{color:#000}

/* ---- bandeau du bandeau : soulignement doré qui se dessine au survol (comme la version de référence) ---- */
.b-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:calc(-8 * var(--u));height:1px;background:#D6BF76;
  transform:none;transition:right .35s cubic-bezier(.66,0,.24,1)}
.b-nav a:hover::after{right:0}

/* ---- légende des projets : bandeau blanc 80 % qui monte du bas de l'image en 0,3 s ---- */
.tuile-cap{left:0;right:0;bottom:0;padding:0;display:grid;grid-template-rows:0fr;opacity:1;background:rgba(255,255,255,.8);color:#000;
  font-size:calc(16 * var(--u));transition:grid-template-rows 1s cubic-bezier(.4,0,.2,1)}
.tuile-cap>span{min-height:0;overflow:hidden}
.tuile-cap>span>span{display:block;padding:.9em 6%}
@media (hover:hover) and (min-width:1200px){
  .tuile:hover .tuile-cap,.tuile:focus-visible .tuile-cap{grid-template-rows:1fr}
}
.tuile.is-armed .tuile-cap{grid-template-rows:1fr}
@media (max-width:1199px),(hover:none){ .tuile-cap{font-size:max(10px, calc(13.33 * var(--u)))} }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}
}