/* ═══════════ CV interactif — s'ouvre avec le bouton « CV » de chaque page (voir cv.js) ═══════════
   L'affiche reprend la composition du CV papier (595 × 842) : chaque élément est placé avec des
   coordonnées de l'affiche, multipliées par --u (1/595e de la largeur). Sous 640 px de large,
   l'affiche passe en colonne pour rester lisible. */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:ital,wght@0,300;0,400;0,500;0,600;0,700;0,900;1,300;1,700&display=swap');

html.cv-open,html.cv-open body{overflow:hidden}

/* ───────── Fenêtre ───────── */
.cvm{position:fixed;inset:0;z-index:300;font-family:"Inter Tight",system-ui,sans-serif;color:#fff;-webkit-font-smoothing:antialiased}
.cvm[hidden]{display:none}
.cvm__backdrop{position:absolute;inset:0;background:rgba(6,10,20,.66);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .45s}
.cvm.is-open .cvm__backdrop{opacity:1}
.cvm__scroll{position:absolute;inset:0;z-index:1;overflow-y:auto;overscroll-behavior:contain;padding:76px 16px 48px;display:flex;flex-direction:column;align-items:center}
.cvm__bar{position:fixed;top:14px;left:16px;right:16px;z-index:5;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;pointer-events:none;
  opacity:0;transform:translateY(-10px);transition:opacity .4s .1s,transform .5s cubic-bezier(.2,.8,.2,1) .1s}
.cvm.is-open .cvm__bar{opacity:1;transform:none}
.cvm__btn{pointer-events:auto;display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:14px;border:0;cursor:pointer;
  font:500 14px/1 "Inter Tight",system-ui,sans-serif;color:#111;background:#fff;text-decoration:none;box-shadow:0 8px 24px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s}
.cvm__btn:hover{transform:translateY(-2px)}
.cvm__btn:focus-visible{outline:2px solid #1D4DFF;outline-offset:2px}
.cvm__btn--dark{background:#111;color:#fff}
.cvm__btn--close{width:42px;padding:0;justify-content:center;font-size:24px}
.cvm__btn[hidden]{display:none}
.cvm__hint{margin-top:14px;font-size:13px;color:rgba(255,255,255,.7);text-align:center;max-width:560px}

.cvm__sheet{width:min(940px,100%);container:mtcv / inline-size;opacity:0;transform:translateY(40px) scale(.98);transition:opacity .5s,transform .8s cubic-bezier(.2,.8,.2,1)}
.cvm.is-open .cvm__sheet{opacity:1;transform:none}

/* ───────── Affiche ───────── */
/* charte du site : bleu, typo Inter Tight et grands cercles blancs translucides (comme « Travaillons ensemble ») */
.mtcv{--u:calc(100cqw / 595);position:relative;isolation:isolate;aspect-ratio:595/842;overflow:hidden;border-radius:calc(22 * var(--u));
  background:#1D4DFF;box-shadow:0 40px 90px -30px rgba(10,20,80,.7)}
.mtcv__ribbons{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.mtcv__ribbons path{fill:none;stroke:rgba(255,255,255,.14);stroke-width:74;stroke-linecap:round;stroke-linejoin:round}
/* les regroupements n'existent pas dans l'affiche : leurs enfants se placent directement dessus */
.mtcv__tiles,.mtcv__meta,.mtcv__cards,.mtcv__tools{display:contents}
.mtcv [data-p]{position:absolute;left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u))}

/* apparition en cascade à l'ouverture */
.mtcv [data-in]{opacity:0;translate:0 calc(12 * var(--u));transition:opacity .6s ease calc(var(--i,0) * 70ms + .15s),translate .8s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * 70ms + .15s),transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mtcv.is-in [data-in]{opacity:1;translate:0 0}

/* ── Logos des expériences ── */
.mtcv__tile{height:calc(51 * var(--u));padding:0;border:0;background:none;cursor:default;z-index:10}
.mtcv__logo{display:block;width:100%;height:100%;border-radius:calc(7 * var(--u));overflow:hidden;box-shadow:0 calc(4 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.28);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.mtcv__logo img{display:block;width:100%;height:100%;object-fit:cover}
.mtcv__tile:hover .mtcv__logo,.mtcv__tile:focus-visible .mtcv__logo{transform:translateY(calc(-3 * var(--u))) scale(1.05)}
.mtcv__tile:focus-visible{outline:none}
.mtcv__tile:focus-visible .mtcv__logo{box-shadow:0 0 0 calc(2 * var(--u)) #fff}
.mtcv__tip{position:absolute;top:calc(100% + 8 * var(--u));left:50%;width:max-content;max-width:calc(170 * var(--u));transform:translate(-50%,calc(-4 * var(--u)));
  padding:calc(6 * var(--u)) calc(8 * var(--u));border-radius:calc(6 * var(--u));background:#fff;color:#111;text-align:left;
  font-size:calc(7 * var(--u));line-height:1.4;box-shadow:0 calc(8 * var(--u)) calc(20 * var(--u)) rgba(0,0,0,.3);opacity:0;pointer-events:none;transition:opacity .25s,transform .3s}
.mtcv__tip b{display:block;font-weight:700;margin-bottom:calc(1 * var(--u))}
.mtcv__tile--start .mtcv__tip{left:0;transform:translate(0,calc(-4 * var(--u)))}
.mtcv__tile--end .mtcv__tip{left:auto;right:0;transform:translate(0,calc(-4 * var(--u)))}
.mtcv__tile:hover .mtcv__tip,.mtcv__tile:focus-visible .mtcv__tip{opacity:1;transform:translate(-50%,0)}
.mtcv__tile--start:hover .mtcv__tip,.mtcv__tile--start:focus-visible .mtcv__tip,.mtcv__tile--end:hover .mtcv__tip,.mtcv__tile--end:focus-visible .mtcv__tip{transform:none}

/* ── Âge, avis, note ── */
.mtcv__age{position:absolute;right:calc(20 * var(--u));top:calc(14 * var(--u));text-align:right;line-height:.84;z-index:10}
.mtcv__age b{display:block;font-size:calc(66 * var(--u));font-weight:900;letter-spacing:-.045em;font-variant-numeric:tabular-nums}
.mtcv__age span{font-size:calc(24 * var(--u));font-weight:900;letter-spacing:-.02em}
.mtcv__stars{display:flex;align-items:center;gap:calc(8 * var(--u));font-size:calc(12.5 * var(--u));font-weight:600;letter-spacing:-.02em;white-space:nowrap;z-index:10}
.mtcv__stars i{display:flex;gap:calc(2.5 * var(--u))}
.mtcv__stars svg{width:calc(14 * var(--u));height:calc(14 * var(--u));fill:#fff;opacity:.2;scale:.6;transition:opacity .4s,scale .5s cubic-bezier(.34,1.56,.64,1)}
.mtcv.is-in .mtcv__stars svg{opacity:1;scale:1}
.mtcv__stars svg:nth-child(1){transition-delay:.5s}.mtcv__stars svg:nth-child(2){transition-delay:.6s}.mtcv__stars svg:nth-child(3){transition-delay:.7s}
.mtcv__stars svg:nth-child(4){transition-delay:.8s}.mtcv__stars svg:nth-child(5){transition-delay:.9s}
.mtcv__note{font-size:calc(5.8 * var(--u));line-height:1.45;color:rgba(255,255,255,.9);z-index:10}

/* ── Cartes de compétences ── */
.mtcv__card{height:calc(var(--h) * var(--u));z-index:var(--z);padding:calc(var(--pt) * var(--u)) calc(var(--px) * var(--u)) 0;border-radius:calc(7 * var(--u));
  background:#fff;color:#111;font-size:calc(7.4 * var(--u));line-height:1.72;text-align:left;cursor:default;
  box-shadow:0 calc(6 * var(--u)) calc(18 * var(--u)) rgba(0,0,0,.2)}
.mtcv__card h3{font-size:calc(8 * var(--u));font-weight:700;line-height:1.55;letter-spacing:-.01em;color:var(--c)}
.mtcv__card ul{list-style:none;margin:0;padding:0}
.mtcv__card--end{text-align:right}
.mtcv__card:hover,.mtcv__card:focus-visible,.mtcv__card.is-active{transform:translateY(calc(-3 * var(--u)));z-index:30;outline:none;
  box-shadow:0 0 0 calc(1.5 * var(--u)) var(--c),0 calc(16 * var(--u)) calc(34 * var(--u)) rgba(0,0,0,.32)}

/* ── Photo ── */
.mtcv__photo{height:calc(var(--h) * var(--u));z-index:1;pointer-events:none}
.mtcv__photo img{display:block;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 84%,transparent);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 13%,#000 87%,transparent),linear-gradient(180deg,transparent,#000 9%,#000 84%,transparent);mask-composite:intersect}

/* ── Outils ── */
.mtcv__disc{position:absolute;left:calc((var(--x) - var(--d) / 2) * var(--u));top:calc((var(--y) - var(--d) / 2) * var(--u));width:calc(var(--d) * var(--u));height:calc(var(--d) * var(--u));
  border-radius:50%;background:rgba(255,255,255,var(--a));z-index:4;pointer-events:none}
.mtcv__tool{position:absolute;left:calc((var(--x) - var(--d) / 2) * var(--u));top:calc((var(--y) - var(--d) / 2) * var(--u));width:calc(var(--d) * var(--u));height:calc(var(--d) * var(--u));
  display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:var(--bg,#fff);cursor:default;z-index:6;
  box-shadow:0 calc(5 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.22);
  opacity:0;scale:.4;transition:opacity .5s ease calc(var(--i,0) * 50ms + .45s),scale .7s cubic-bezier(.34,1.56,.64,1) calc(var(--i,0) * 50ms + .45s),filter .35s,box-shadow .35s;
  animation:mtcvBob 6s ease-in-out calc(var(--i,0) * -.7s) infinite}
.mtcv.is-in .mtcv__tool{opacity:var(--o,1);scale:1}
.mtcv__tool--ring{box-shadow:0 0 0 calc(4 * var(--u)) rgba(255,255,255,.55),0 calc(5 * var(--u)) calc(14 * var(--u)) rgba(0,0,0,.22)}
.mtcv__tool--sq{border-radius:calc(11 * var(--u))}
.mtcv__tool svg{width:62%;height:62%;overflow:visible}
.mtcv__tool img{width:100%;height:100%;border-radius:inherit;object-fit:cover}
.mtcv__tool[data-name]::after{content:attr(data-name);position:absolute;bottom:calc(100% + 5 * var(--u));left:50%;translate:-50% calc(3 * var(--u));
  padding:calc(3 * var(--u)) calc(6 * var(--u));border-radius:calc(5 * var(--u));background:#111;color:#fff;white-space:nowrap;
  font-size:calc(6.5 * var(--u));font-weight:500;line-height:1.2;opacity:0;pointer-events:none;transition:opacity .2s,translate .25s}
.mtcv__tool:hover,.mtcv__tool:focus-visible{scale:1.12;z-index:12;outline:none}
.mtcv__tool:hover::after,.mtcv__tool:focus-visible::after{opacity:1;translate:-50% 0}
/* une carte survolée met en avant ses outils */
.mtcv.is-focus .mtcv__tool{opacity:.25;filter:grayscale(.7)}
.mtcv.is-focus .mtcv__tool.is-hit{opacity:1;filter:none;scale:1.14;z-index:12;box-shadow:0 0 0 calc(3 * var(--u)) #fff,0 calc(8 * var(--u)) calc(22 * var(--u)) rgba(0,0,0,.3)}
@keyframes mtcvBob{50%{translate:0 calc(-3 * var(--u))}}

/* ── Nom, accroche, formation ── */
.mtcv__name{z-index:8;line-height:1.12;text-shadow:0 2px 14px rgba(0,0,0,.28)}
.mtcv__name span{display:block;font-size:calc(20 * var(--u));font-style:italic;font-weight:300;letter-spacing:-.01em}
.mtcv__name b{display:block;margin-left:calc(13 * var(--u));font-size:calc(20 * var(--u));font-style:italic;font-weight:700;letter-spacing:-.01em}
.mtcv__line{position:absolute;z-index:8;background:rgba(255,255,255,.85);left:calc(var(--x) * var(--u));top:calc(var(--y) * var(--u));width:calc(var(--w) * var(--u));height:calc(var(--h) * var(--u))}
.mtcv__tag{z-index:8;margin:0;text-align:center;font-size:calc(9.6 * var(--u));font-weight:700;line-height:1.45;letter-spacing:-.01em}
.mtcv__edu{z-index:8;display:grid;gap:calc(10 * var(--u));margin:0;font-size:calc(7.3 * var(--u));line-height:1.55;color:rgba(255,255,255,.92)}
.mtcv__edu b{font-weight:700;text-transform:uppercase;color:#fff;letter-spacing:.01em}

/* ───────── Petits écrans : l'affiche passe en colonne ───────── */
@container mtcv (max-width:640px){
  .mtcv{--u:1.5px;aspect-ratio:auto;display:flex;flex-direction:column;gap:18px;padding:22px 18px 28px;border-radius:24px}
  .mtcv [data-p],.mtcv__age,.mtcv__tool,.mtcv__line{position:static;width:auto;height:auto}
  .mtcv__line,.mtcv__disc{display:none}
  .mtcv__tiles{display:flex;flex-wrap:wrap;gap:8px;order:1}
  .mtcv .mtcv__tile{height:38px;width:auto;aspect-ratio:var(--w) / 51}
  .mtcv__tip{display:none}
  .mtcv__age{order:2;text-align:left;display:flex;align-items:baseline;gap:8px}
  .mtcv__age b{font-size:64px}
  .mtcv__age span{font-size:22px}
  .mtcv__meta{display:flex;flex-direction:column;gap:8px;order:3}
  .mtcv__stars{white-space:normal;flex-wrap:wrap}
  .mtcv__note{font-size:12px}
  /* le haut de la photo (caché par les cartes sur l'affiche) est rogné */
  .mtcv .mtcv__photo{order:4;width:78%;height:auto;min-height:0;overflow:hidden;align-self:center;aspect-ratio:218 / 206;margin-bottom:-58px}
  .mtcv__photo img{object-position:50% 100%}
  .mtcv .mtcv__name{order:5;position:relative;left:auto;top:auto;z-index:8;align-self:center;text-align:left}
  .mtcv__tag{order:6}
  .mtcv__cards{display:flex;flex-direction:column;gap:12px;order:7}
  .mtcv__card{height:auto;padding:14px 16px;text-align:left}
  .mtcv__tools{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;order:8}
  .mtcv__tool{width:46px;height:46px;animation:none}
  .mtcv__tool--sq{border-radius:14px}
  .mtcv__tool[data-name]::after{display:none}
  .mtcv__edu{order:9;font-size:12px}
}

@media (prefers-reduced-motion:reduce){
  .mtcv__tool{animation:none}
  .mtcv [data-in],.mtcv__tool,.mtcv__stars svg,.cvm__sheet,.cvm__bar,.cvm__backdrop{transition:none}
}

/* ───────── Impression / export PDF : seule l'affiche est imprimée, en A4 ───────── */
@media print{
  @page{size:A4;margin:10mm}
  html.cv-open body>*:not(.cvm){display:none!important}
  html.cv-open,html.cv-open body{overflow:visible;background:#fff}
  .cvm{position:static}
  .cvm__backdrop,.cvm__bar,.cvm__hint{display:none}
  .cvm__scroll{position:static;overflow:visible;padding:0;display:block}
  .cvm__sheet{width:190mm;margin:0 auto;opacity:1;transform:none;transition:none}
  .mtcv{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mtcv [data-in],.mtcv__tool{opacity:var(--o,1);translate:none;scale:1;animation:none;transition:none}
}

/* ── CV affiché en image (fichier cv.pdf) ── */
.cvm__sheet--doc{width:min(760px,100%)}
.cvm__doc{display:block;border-radius:20px;overflow:hidden;background:#0b1020;box-shadow:0 30px 90px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.cvm__doc:hover{transform:translateY(-4px)}
.cvm__doc img{display:block;width:100%;height:auto}
.cvm__doc:focus-visible{outline:3px solid #fff;outline-offset:4px}
@media print{
  .cvm__doc{border-radius:0;box-shadow:none;transform:none}
  .cvm__sheet--doc{width:190mm}
}
@media (max-width:660px){
  /* la barre de boutons passe sur deux lignes : on décale le CV d'autant */
  .cvm__scroll{padding-top:126px}
}