/* ==========================================================================
   PORTFOLIO — Laurine Grange
   --------------------------------------------------------------------------
   Sommaire
   0. Réglages (couleurs, polices, espacements)   ← modifie ici les couleurs
   1. Base
   2. Composants réutilisables (polaroid, bouton, déchirures)
   3. Header
   4. Hero
   5. Skills (cartes)
   6. Projects (polaroids)
   7. About
   8. Footer
   9. Animations au scroll
   10. Responsive (1280 / 1024 / 768 / 600 / 390)
   ========================================================================== */

/* Polices auto-hébergées (dossier assets/fonts, licence SIL OFL) */
@font-face { font-family: "Outfit"; font-weight: 300; font-display: swap; src: url("../assets/fonts/outfit-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 400; font-display: swap; src: url("../assets/fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 500; font-display: swap; src: url("../assets/fonts/outfit-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 600; font-display: swap; src: url("../assets/fonts/outfit-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-weight: 700; font-display: swap; src: url("../assets/fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Mynerve"; font-weight: 400; font-display: swap; src: url("../assets/fonts/mynerve-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Mynerve"; font-weight: 400; font-display: swap; src: url("../assets/fonts/mynerve-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* --------------------------------------------------------------------------
   0. RÉGLAGES
   -------------------------------------------------------------------------- */
:root {
  /* Couleurs */
  --cream:      #f7f5ec;
  --bordeaux:   #52041d;
  --bordeaux-2: #75163d;   /* rayures */
  --orange:     #ff7551;
  --pink:       #ffb3dd;
  --yellow:     #faf69c;
  --blue:       #bbdaf2;
  --logo:       #560500;
  --star:       #ede4d6;
  --white:      #ffffff;

  /* Polices */
  --font-text: "Outfit", system-ui, sans-serif;
  --font-hand: "Mynerve", "Comic Sans MS", cursive;

  /* Largeur de contenu et gouttières */
  --container: 1760px;
  --gutter: clamp(16px, 4.2vw, 80px);
  --header-h: clamp(70px, 7.6vw, 146px);   /* hauteur du header, sert aussi à aligner le grain du papier */

  /* Échelle des décors : 1vw = 19.2px sur la maquette 1920 */
  --vw: 1vw;
}

/* --------------------------------------------------------------------------
   1. BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Curseur personnalisé (flèche sticker), version 2x pour les écrans Retina ; la souris système reste en secours */
html, a, button, [role="button"] {
  cursor: url("../assets/img/cursor.png") 5 4, auto;
  cursor: image-set(url("../assets/img/cursor.png") 1x, url("../assets/img/cursor@2x.png") 2x) 5 4, auto;
}
body {
  margin: 0;
  font-family: var(--font-text);
  font-weight: 300;
  color: var(--bordeaux);
  background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--cream);
  background-blend-mode: multiply;
  overflow-x: clip;               /* aucun scroll horizontal, quoi qu'il arrive */
  line-height: 1.5;
}

img, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure { margin: 0; }

section, footer { position: relative; overflow-x: clip; }

/* Décor absolu : gagne sur .polaroid (position relative) */
figure.deco { position: absolute; }

/* Décors : toujours en absolu À L'INTÉRIEUR de leur section relative */
.deco { position: absolute; pointer-events: none; user-select: none; }

.section-title {
  font-family: var(--font-hand);
  font-weight: 400;
  line-height: .9;
}
.section-title--light { color: var(--cream); }

/* --------------------------------------------------------------------------
   2. COMPOSANTS
   -------------------------------------------------------------------------- */

/* ---- Polaroid ---- */
.polaroid {
  position: relative;
  display: block;
  background: var(--cream);
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
  /* proportions de la maquette : 558 × 654, photo 504 carrée à 27px des bords */
  padding: 4.8% 4.8% 22%;
  aspect-ratio: 558 / 654;
  transition: transform .35s cubic-bezier(.2,.8,.3,1.2);
}
.polaroid__photo {
  position: absolute;
  inset: 4.8% 4.8% auto;
  width: 90.4%;
  aspect-ratio: 1;
  object-fit: cover;
  background: #ddd;
}
.polaroid__photo--hover {
  opacity: 0;
  transition: opacity .3s ease-out;
}
.polaroid--project { background: var(--cream); }
.polaroid--project:hover .polaroid__photo--hover,
.polaroid--project:focus-visible .polaroid__photo--hover { opacity: 1; }

/* ---- Bouton orange ---- */
.btn {
  display: inline-block;
  background: var(--orange);
  color: var(--white);
  font-weight: 500;
  font-size: clamp(15px, .9vw, 17.25px);
  letter-spacing: .02em;
  padding: .65em 1.7em;
  border-radius: 4px 6px 5px 4px;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 14px rgba(82,4,29,.2); }

/* ---- CTA manuscrit ("> Voir tout") ---- */
.cta-hand {
  position: relative;
  display: inline-block;
  font-family: var(--font-hand);
  font-size: clamp(26px, 2.2vw, 42px);
  color: var(--white);
  padding-bottom: .5em;
  background: url("../assets/svg/trait-cta.svg") no-repeat 60% 100% / 65% auto;
  transition: transform .2s;
}
.cta-hand:hover { transform: rotate(-2deg) scale(1.04); }

/* ---- Déchirures (bords de papier) ----
   Chaque .tear contient 2 couches : ::before (papier blanc en dessous) et ::after (couleur).
   Les formes viennent des SVG exportés de la maquette, utilisées en masque CSS.       */
.tear { position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
.tear::before, .tear::after {
  content: ""; position: absolute; left: 0; right: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}

/* --------------------------------------------------------------------------
   3. HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: transparent;                 /* transparent en haut de page… */
  box-shadow: 0 4px 24px rgba(0,0,0,0);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header.is-scrolled {                 /* …beige dès qu'on scrolle (js/main.js) */
  background: var(--cream);
  box-shadow: 0 4px 24px rgba(0,0,0,.08);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  min-height: var(--header-h);
  padding: 0 var(--gutter);
  max-width: var(--container); margin: 0 auto;
}
.logo > img:first-child { width: clamp(180px, 25vw, 480px); height: auto; }

.main-nav ul, .footer-nav ul { display: flex; align-items: center; gap: clamp(20px, 2.9vw, 56px); }
.main-nav a, .footer-nav a {
  font-weight: 600;
  font-size: clamp(14px, 1.25vw, 24px);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--bordeaux);
  padding: .3em 0;
  transition: opacity .2s;
}
.main-nav a:hover, .footer-nav a:hover { opacity: .65; }

/* Lien "Contact" cerclé à la main */
.nav-contact {
  padding: .55em 1em !important;
  background: url("../assets/svg/nav-cercle.svg") no-repeat center / 100% 100%;
}
.nav-contact:hover { opacity: .65; transform: rotate(-2deg); }

.nav-toggle { display: none; }

/* --------------------------------------------------------------------------
   4. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  z-index: 1;
}
.hero__inner {
  position: relative; isolation: isolate;   /* les étoiles de fond (z-index -1) restent dans la section */
  max-width: 1920px; margin: 0 auto;
  min-height: clamp(500px, 41vw, 790px);
}
/* tout le contenu du hero est remonté de 2,3 vw (44 px à 1920) sur ordinateur */
.hero__inner > * { --shift: -2.3vw; }

/* ---- Parallaxe et survols (voir js/main.js) ----
   --py / --pr : décalage et rotation calculés au scroll (data-px / data-pr dans le HTML)
   --shift     : décalage fixe éventuel
   --hover-r   : rotation ajoutée au survol des stickers (.spin) */
.hero__inner > *, [data-px] {
  translate: 0 calc(var(--shift, 0px) + var(--py, 0px));
  rotate: calc(var(--pr, 0deg) + var(--hover-r, 0deg));
}
.spin { transition: rotate .45s cubic-bezier(.2, .8, .3, 1.25); pointer-events: auto; }
.spin:hover { --hover-r: var(--spin, 10deg); }
.deco--sun   { --spin: 18deg; }  .deco--berry  { --spin: -14deg; } .deco--cursor { --spin: 12deg; }
.deco--badge { --spin: -10deg; } .deco--spark-r { --spin: 30deg; }
.deco--pen   { --spin: -12deg; } .deco--laptop { --spin: 10deg; }  .deco--pencil { --spin: -14deg; }
.deco--smiley { --spin: 14deg; } .deco--flower { --spin: -16deg; } .deco--clover { --spin: 12deg; }
.deco--butterfly { --spin: -16deg; } .deco--badge2 { --spin: 10deg; } .deco--eyes { --spin: -12deg; }
.deco--heart { --spin: 16deg; }  .deco--polaroid { --spin: -7deg; }  .deco--star-a, .deco--star-b, .deco--star-c { --spin: 36deg; }

.hero__title {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  top: clamp(75px, 8.5vw, 165px);
  width: max-content; max-width: 90%;
  text-align: center;
  font-weight: 500;
  font-size: clamp(28px, 2.8vw, 54px);
  line-height: 1.37;
  letter-spacing: .06em;
  color: var(--bordeaux);
  z-index: 2;
}
.hero__title .t-hand {
  font-family: var(--font-hand);
  font-weight: 400;
  font-size: 1.35em;
  letter-spacing: .05em;
}

/* Positions des décors du hero (en % de la largeur de la section, 1920 = 100 %) */
.deco--portrait { left: 8.6%; top: clamp(150px, 15.5vw, 298px);  width: clamp(170px, 20.2vw, 388px); transform: rotate(-12deg); z-index: 3; }
.deco--sun      { left: 18.4%; top: clamp(95px, 9.8vw, 188px);  width: clamp(80px, 9vw, 172px);  z-index: 4; }
.deco--berry    { left: 27.8%; top: clamp(310px, 27.5vw, 528px); width: clamp(64px, 7vw, 135px); z-index: 4; }
.deco--cursor   { left: 55.6%; top: clamp(310px, 27.8vw, 534px); width: clamp(60px, 6.8vw, 130px); z-index: 4; }
.deco--torn     { left: 70.7%; top: -1vw; width: clamp(170px, 17.1vw, 330px); transform: rotate(19deg); z-index: 3; }
.deco--badge    { left: 76.4%; top: clamp(190px, 17.4vw, 335px); width: clamp(100px, 10.2vw, 195px); z-index: 4; }
.deco--spark-l  { left: 31.2%; top: clamp(40px, 4.4vw, 85px);  width: clamp(20px, 1.9vw, 36px); }
.deco--spark-r  { left: 70.6%; top: clamp(290px, 26vw, 501px);  width: clamp(44px, 4.3vw, 82px); }
.deco--arrow    { left: 49%;   top: clamp(420px, 39vw, 750px);  width: clamp(30px, 2.6vw, 50px); }
.deco--bgstar   { left: -12.5%; top: 0; width: clamp(200px, 22.5vw, 433px); z-index: -1; transform: rotate(-10deg); }
.deco--bgstar--r { left: auto; right: -6%; top: clamp(200px, 23.6vw, 453px); transform: rotate(8deg); }

/* --------------------------------------------------------------------------
   5. SKILLS
   -------------------------------------------------------------------------- */
.skills {
  position: relative; z-index: 2;
  --tear-top: clamp(100px, 12vw, 230px);
  --tear-bottom: clamp(90px, 10.4vw, 200px);
  color: var(--bordeaux);
  padding: clamp(160px, 17.7vw, 340px) 0 clamp(150px, 16.6vw, 320px);
}
/* corps orange entre les deux déchirures */
.skills::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--tear-top) - 2px); bottom: calc(var(--tear-bottom) - 2px);
  background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--orange);
  background-blend-mode: multiply;
}
.skills .tear--top    { top: 0;    height: var(--tear-top); }
.skills .tear--bottom { bottom: 0; height: var(--tear-bottom); }

.skills .tear--top::before  { top: 0; height: 100%; background: var(--white);
  -webkit-mask-image: url("../assets/svg/tear-white-top.svg");  mask-image: url("../assets/svg/tear-white-top.svg"); }
.skills .tear--top::after   { top: 5%; height: 100%; background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--orange); background-blend-mode: multiply;
  -webkit-mask-image: url("../assets/svg/tear-orange-top.svg"); mask-image: url("../assets/svg/tear-orange-top.svg"); }
.skills .tear--bottom::before { bottom: 0; height: 100%; background: var(--white);
  -webkit-mask-image: url("../assets/svg/tear-white-bottom.svg");  mask-image: url("../assets/svg/tear-white-bottom.svg"); }
.skills .tear--bottom::after  { top: 0; height: 88%; background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--orange); background-blend-mode: multiply;
  -webkit-mask-image: url("../assets/svg/tear-orange-bottom.svg"); mask-image: url("../assets/svg/tear-orange-bottom.svg"); }

.skills__inner {
  position: relative; z-index: 2;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}

/* Éventail de 4 cartes à jouer */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
}
.card {
  position: relative;
  container-type: inline-size;    /* permet de dimensionner liseré et symboles en % de la carte (cqw) */
  width: 102%;                    /* carte de 447 px pour une colonne de 440 px (maquette 1920) */
  aspect-ratio: 447 / 605;
  border-radius: clamp(14px, 1.35vw, 26px);
  padding: 6% 8%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.17);
  transform: rotate(var(--rot));
}
/* liseré intérieur */
.card::before {
  content: ""; position: absolute; inset: 2.3% 3.1%;
  border: .9cqw solid var(--stroke);      /* 4 px pour une carte de 447 px, comme la maquette */
  border-radius: clamp(8px, .6vw, 11px);
  pointer-events: none;
}
.card--pink   { background: var(--pink);   --stroke: var(--orange); z-index: 1; }
.card--cream  { background: var(--cream);  --stroke: var(--blue);   z-index: 2; }
.card--yellow { background: var(--yellow); --stroke: var(--pink);   z-index: 3; }
.card--blue   { background: var(--blue);   --stroke: var(--yellow); z-index: 1; }

/* petit décalage vertical comme sur la maquette (cartes posées à la main) */
.card:nth-child(1) { margin-top: 11%; --hspin: 3deg; }
.card:nth-child(2) { margin-top: 18%; --hspin: -3deg; }
.card:nth-child(3) { margin-top: 14%; --hspin: 2.5deg; }
.card:nth-child(4) { margin-top: 0;   --hspin: -3.5deg; }
/* survol : chaque carte pivote dans un sens différent (transition définie en section 9) */
.card:hover { rotate: var(--hspin, 3deg); z-index: 5; }

.card__title {
  font-family: var(--font-hand); font-weight: 400;
  font-size: clamp(28px, 3.3vw, 65px);
  line-height: .95;
  margin-bottom: .6em;
  max-width: 88%;
}
.card__title--underlined {
  white-space: nowrap;
  padding-bottom: .5em;
  background: url("../assets/svg/trait-soulignage.svg") no-repeat 55% 100% / 62% auto;
}
.card__list {
  font-size: clamp(12px, .9vw, 17.25px);
  line-height: 1.9;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.card__suit { position: absolute; width: 7.2cqw; }
.card__suit--tl { top: 4%; left: 7%; }
.card__suit--br { bottom: 4%; right: 7%; transform: rotate(180deg); }

/* stickers posés sur les cartes */
.deco--pen    { top: -17%; left: 48%; width: clamp(70px, 7.8vw, 150px); }
.deco--arrow1 { top: 11%; left: -14%; width: clamp(40px, 4.6vw, 88px); z-index: 5; }
.deco--laptop { bottom: -14%; left: 8%; width: clamp(90px, 10vw, 192px); }
.deco--pencil { top: -2%; right: -7%; width: clamp(64px, 7vw, 134px); }

.skills__more {
  font-family: var(--font-hand);
  font-size: clamp(26px, 2.2vw, 42px);
  color: var(--white);
  text-align: right;
  padding-right: 20%;
  margin-top: clamp(30px, 3vw, 60px);
}

/* --------------------------------------------------------------------------
   6. PROJECTS
   -------------------------------------------------------------------------- */
.projects {
  position: relative; z-index: 1;
  margin-top: calc(-1 * clamp(90px, 10.4vw, 200px));  /* passe sous la déchirure orange */
  background-color: var(--bordeaux);
  background-image: repeating-linear-gradient(90deg,
      var(--bordeaux-2) 0 clamp(38px, 3.96vw, 76px),
      var(--bordeaux) clamp(38px, 3.96vw, 76px) clamp(71px, 7.4vw, 142px));
  padding: clamp(130px, 14.8vw, 285px) 0 clamp(90px, 9.5vw, 180px);
  color: var(--cream);
}
.projects__inner {
  position: relative; z-index: 2;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
}

.projects .section-title {
  position: relative;
  width: max-content; margin: 0 auto clamp(40px, 5.5vw, 105px);
  font-size: clamp(52px, 4.7vw, 90px);
  padding: 0 .6em;
}
.deco--star-a { left: -1.1em; top: -.45em; width: .6em; }
.deco--star-b { left: -.4em;  top: .7em;   width: .4em; }
.deco--star-c { right: -.5em; top: -.3em;  width: .6em; }

/* Grille des polaroids : 3 colonnes, avec décalages verticaux individuels (--dy)
   et rotations individuelles (--rot) définies dans le HTML                        */
.polaroids {
  display: grid;
  /* l'ensemble (polaroids + stickers) est réduit à 86 % de la largeur et centré : plus d'air sur les côtés */
  width: 86%; margin-inline: auto;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(12px, 1.6vw, 30px);
  row-gap: clamp(30px, 3.3vw, 64px);
  --stagger: clamp(60px, 8.3vw, 160px);
}
.polaroid-item {
  position: relative;
  width: 100%; max-width: 558px;
  justify-self: center;
  transform: translateY(calc(var(--dy) * var(--stagger)));
}
.polaroid-item { --k: 1; }             /* facteur d'inclinaison (réduit sur mobile) */
.polaroid-item .polaroid { transform: rotate(calc(var(--rot) * var(--k))); }
/* Scotchs et trombone : dans le polaroid, ils tournent et bougent avec lui.
   Positions = centre du sticker en % du polaroid (mesurées dans les composants Figma).
   La rotation inverse garde l'orientation exportée depuis Figma. */
.polaroid__sticker { position: absolute; z-index: 3; pointer-events: none;
  transform: translate(-50%, -50%) rotate(calc(-1 * var(--rot) * var(--k))); }
.polaroid__sticker--scotch-a { left: 9.7%;  top: 9.3%;   width: 64%; }
.polaroid__sticker--trombone { left: 82.9%; top: 7.2%;   width: 15%; }
.polaroid__sticker--scotch-b { left: 69%;   top: 100.9%; width: 56%; }
.polaroid__sticker--scotch-c { left: 6.9%;  top: 90.8%;  width: 57%; }
.polaroid-item:hover .polaroid,
.polaroid-item:focus-within .polaroid {
  transform: rotate(calc(var(--rot) * var(--k) + var(--hover-rot, -3deg))) scale(1.04);
  z-index: 3;
}
/* alternance droite / gauche au survol */
.polaroid-item:nth-child(even) { --hover-rot: 3deg; }

/* décors attachés aux polaroids (% de la largeur du polaroid) */
.deco--smiley    { left: 62%;  top: -13%; width: 25%; }
.deco--flower    { left: -26%; top: 32%;  width: 31%; }
.deco--clover    { right: -14%; bottom: -10%; width: 29%; }

.projects__footer {
  position: relative;
  display: flex; justify-content: flex-end; align-items: flex-end;
  margin-top: clamp(40px, 4vw, 80px);
  padding-right: 8%;
  min-height: clamp(80px, 11vw, 210px);
}
.deco--twist { left: 18%; bottom: -30%; width: clamp(60px, 6.3vw, 122px); }

/* Bas de la section : bordeaux déchiré, puis papier blanc déchiré, puis crème */
.tear--projects-bottom { bottom: 0; height: clamp(150px, 19vw, 370px); transform: translateY(100%); z-index: 0; }
.tear--projects-bottom::before { top: 0; height: 100%; background: var(--white);
  -webkit-mask-image: url("../assets/svg/tear-bottom-edge.svg"); mask-image: url("../assets/svg/tear-bottom-edge.svg"); }
.tear--projects-bottom::after  { top: -1px; height: 60%;
  background-color: var(--bordeaux);
  background-image: repeating-linear-gradient(90deg,
      var(--bordeaux-2) 0 clamp(38px, 3.96vw, 76px),
      var(--bordeaux) clamp(38px, 3.96vw, 76px) clamp(71px, 7.4vw, 142px));
  -webkit-mask-image: url("../assets/svg/tear-bottom-edge.svg"); mask-image: url("../assets/svg/tear-bottom-edge.svg"); }

/* --------------------------------------------------------------------------
   6b. PAGE PROJETS (projets.html) : même papier rayé, grille 3 × 3 droite
   -------------------------------------------------------------------------- */
.projects--page {
  margin-top: 0;
  --tear-top: clamp(60px, 7vw, 135px);
  padding-top: calc(var(--tear-top) + clamp(60px, 7vw, 140px));
  padding-bottom: clamp(140px, 14vw, 270px);
}
/* déchirure beige en haut (le papier du header se déchire sur le papier rayé) */
.projects--page .tear--top { top: 0; height: var(--tear-top); z-index: 1; }
.projects--page .tear--top::before {
  top: 0; height: 100%;
  /* même grain que le fond de page, décalé de la hauteur du header pour que les deux se raccordent */
  background: url("../assets/img/grain.png") repeat 0 calc(-1 * var(--header-h)) / 512px, var(--cream);
  background-blend-mode: multiply;
  -webkit-mask-image: url("../assets/svg/tear-white-bottom.svg"); mask-image: url("../assets/svg/tear-white-bottom.svg");
}
.projects--page .section-title { margin-bottom: clamp(40px, 4vw, 78px); }
.projects--page .polaroids {
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(16px, 3vw, 58px);
  row-gap: clamp(24px, 3vw, 58px);
  --stagger: 0px;
}
.projects--page .polaroid-item { max-width: none; --rot: 0deg; --dy: 0; }
/* survol : un coup à droite, un coup à gauche (comme sur l'accueil), amplitude un peu plus forte car les polaroids sont droits */
.projects--page .polaroid-item { --hover-rot: -4deg; }
.projects--page .polaroid-item:nth-child(even) { --hover-rot: 4deg; }
.projects--page .polaroid-item:nth-child(3n) { --hover-rot: -3deg; }

/* le papier rayé continue derrière la déchirure du footer (pas de bande beige entre les deux) */
.page-projets .site-footer {
  background-color: var(--bordeaux);
  background-image: repeating-linear-gradient(90deg,
      var(--bordeaux-2) 0 clamp(38px, 3.96vw, 76px),
      var(--bordeaux) clamp(38px, 3.96vw, 76px) clamp(71px, 7.4vw, 142px));
}

/* --------------------------------------------------------------------------
   6d. PAGE CONTACT (contact.html) : papier rayé bordeaux, titre, pastilles, porte-clés.
   Les positions sont en vw depuis le haut de la section (.contact__inner est en position relative).
   -------------------------------------------------------------------------- */
.contact {
  position: relative; z-index: 2; overflow-x: clip;   /* au-dessus du footer : le porte-clés ne doit pas être coupé */
  --tear-top: clamp(60px, 7vw, 135px);
  background-color: var(--bordeaux);
  background-image: repeating-linear-gradient(90deg,
      var(--bordeaux-2) 0 clamp(38px, 3.96vw, 76px),
      var(--bordeaux) clamp(38px, 3.96vw, 76px) clamp(71px, 7.4vw, 142px));
  color: var(--cream);
}
.contact .tear--top { top: 0; height: var(--tear-top); z-index: 1; }
.contact .tear--top::before {
  top: 0; height: 100%;
  background: url("../assets/img/grain.png") repeat 0 calc(-1 * var(--header-h)) / 512px, var(--cream);
  background-blend-mode: multiply;
  -webkit-mask-image: url("../assets/svg/tear-white-bottom.svg"); mask-image: url("../assets/svg/tear-white-bottom.svg");
}
.contact__inner { position: relative; max-width: 1920px; margin: 0 auto; min-height: 60vw; }
.contact__text {
  position: absolute; left: 14.4%; top: 12.2vw; width: clamp(280px, 27vw, 520px); text-align: center; z-index: 2;
  font-family: var(--font-hand); font-size: clamp(34px, 4.4vw, 85px); line-height: 1.04;
}
.contact__title { font-weight: 400; font-size: inherit; margin: 0 0 .25em; }
.contact__cta   { color: #faf69c; margin: 0; }

/* pastilles */
.ct-pill {
  position: absolute; z-index: 3; display: inline-block; white-space: nowrap;
  padding: .7em 2.1em; border-radius: 999px;
  font-weight: 600; font-size: clamp(14px, 1.86vw, 36px); color: var(--bordeaux); text-decoration: none;
  transition: rotate .35s ease, translate .35s ease;
}
.ct-pill--tel   { left: 4.8%;  top: 32.4vw; background: #ffb3dd; --spin: 4deg;  transform: rotate(-9deg); }
.ct-pill--insta { left: 29.6%; top: 34.4vw; background: #bbdaf2; --spin: -4deg; transform: rotate(9deg); }
.ct-pill--mail  { left: 9.2%;  top: 39.9vw; background: #ff7551; --spin: 3deg;  transform: rotate(-2.3deg); }
.ct-pill { rotate: calc(var(--hover-r, 0deg)); }
.ct-pill:hover { --hover-r: var(--spin); }

/* stickers, étincelles, porte-clés */
.ct--soleil      { left: 22.2%; top: 31.9vw; width: 6.3vw; z-index: 4; --spin: 30deg; }
.ct--fleur       { left: 50.5%; top: 10.6vw; width: 10vw; transform: rotate(7.8deg); z-index: 3; --spin: -12deg; }
.ct--etoile-a    { left: 71.4%; top: 10.9vw; width: 4.3vw; z-index: 3; --spin: 40deg; }
.ct--etoile-b    { left: 36%;   top: 52.5vw; width: 4.1vw; transform: rotate(-35.5deg); z-index: 3; --spin: 40deg; }
.ct--etincelle-a { left: 68.1%; top: 17.9vw; width: 1.9vw; z-index: 3; --spin: 45deg; }
.ct--etincelle-b { left: 6.4%;  top: 16.2vw; width: 1.9vw; z-index: 3; --spin: 45deg; }
.ct--porte-cles  { left: 61%; top: 1vw; width: 42vw; max-width: none; transform: rotate(11.3deg); z-index: 2; }

/* le papier rayé continue derrière la déchirure du footer */
.page-contact .site-footer {
  background-color: var(--bordeaux);
  background-image: repeating-linear-gradient(90deg,
      var(--bordeaux-2) 0 clamp(38px, 3.96vw, 76px),
      var(--bordeaux) clamp(38px, 3.96vw, 76px) clamp(71px, 7.4vw, 142px));
}

/* --------------------------------------------------------------------------
   6c. FICHES PROJET (projet-*.html) : hero papier orange déchiré + galerie
   Positions du hero mesurées sur la maquette « 2A - Projet Epicuvin » (1920 px, 1 vw = 19,2 px).
   Les décors sont en position absolute DANS .phero__inner (position relative).
   -------------------------------------------------------------------------- */
.phero {
  position: relative; z-index: 1; overflow: hidden;
  --tear-top: clamp(50px, 6vw, 115px);
  --tear-bottom: clamp(50px, 6vw, 115px);
  --phero-bg: var(--orange);                 /* couleur du papier, redéfinie par fiche */
  background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--phero-bg);
  background-blend-mode: multiply;
  color: var(--white);
}
.phero--gameinlyon { --phero-bg: #503eaa; }
.phero--fika { --phero-bg: #c6d85e; color: var(--bordeaux); }
.phero--fika .tags li { border-color: var(--bordeaux); }
.phero--gapc { --phero-bg: #122569; }
.phero--preskado { --phero-bg: #583f92; }
.phero--couleurs { --phero-bg: #ffb65f; color: var(--bordeaux); }
.phero--couleurs .tags li { border-color: var(--bordeaux); }
.phero--nombres { --phero-bg: #5b3b90; }
.phero--samata { --phero-bg: #cf9489; }
.phero--genevieve { --phero-bg: #003c33; }
.phero .tear--top    { top: 0;    height: var(--tear-top); z-index: 1; }
.phero .tear--bottom { bottom: 0; height: var(--tear-bottom); z-index: 1; }
.phero .tear--top::before, .phero .tear--bottom::before {
  background: url("../assets/img/grain.png") repeat 0 calc(-1 * var(--header-h)) / 512px, var(--cream);
  background-blend-mode: multiply; top: 0; height: 100%;
}
.phero .tear--top::before    { -webkit-mask-image: url("../assets/svg/tear-white-bottom.svg"); mask-image: url("../assets/svg/tear-white-bottom.svg"); }
.phero .tear--bottom::before { -webkit-mask-image: url("../assets/svg/tear-white-top.svg");    mask-image: url("../assets/svg/tear-white-top.svg"); }

.phero__inner {
  position: relative; isolation: isolate;
  max-width: 1920px; margin: 0 auto;
  min-height: clamp(760px, 83vw, 1600px);
  overflow: visible;
}
.phero__text {
  position: absolute; left: 13.9%; top: 14.8vw; width: clamp(300px, 30vw, 560px); z-index: 4;
}
.phero__title {
  font-family: var(--font-hand); font-weight: 400;
  font-size: clamp(44px, 4.4vw, 85px); line-height: 1; margin-bottom: .35em;
}
.tags { display: flex; flex-wrap: wrap; gap: .6em; margin-bottom: clamp(20px, 1.6vw, 32px); }
.tags li {
  border: 1.5px solid var(--white); border-radius: 999px;
  padding: .45em 1.6em; font-size: clamp(12px, .78vw, 15px); font-weight: 500; letter-spacing: .02em;
}
.phero__body { font-size: clamp(14px, .9vw, 17.25px); line-height: 1.55; font-weight: 300; }
.phero__body + .phero__body { margin-top: 1em; }
.phero__body strong { font-weight: 600; }
.phero__stage { display: none; }   /* zone réservée au collage en tablette / mobile */
.phero__note { position: absolute; left: 32%; top: 72vw; width: 21vw; min-width: 240px; font-size: clamp(13px, .95vw, 18px); line-height: 1.5; font-weight: 300; z-index: 4; }

/* silhouettes (15 % d'opacité) */
.pdeco--bouteille { left: -5.8%; top: 17.5vw; width: 14.7vw; opacity: .15; transform: rotate(6.4deg); z-index: 0; }
.pdeco--verre     { left: 43.3%; top: 46vw; width: 14.7vw; opacity: .15; transform: rotate(1deg); z-index: 0; }
.pdeco--tire      { left: 78.7%; top: 2.3vw; width: 11.8vw; transform: rotate(-8deg); z-index: 2; }
/* papier quadrillé, polaroids (scotch et pince incrustés), dessous de verre */
.pdeco--papier    { left: 51%; top: 7vw; width: 52vw; z-index: 1; }   /* déborde à droite : collé au bord de l'écran */
.pdeco--polaroid1 { left: 47.7%; top: 7vw;    width: 25vw;   transform: rotate(-13deg); z-index: 2; }
.pdeco--polaroid2 { left: 72.8%; top: 15.2vw; width: 20.5vw; transform: rotate(17.4deg); z-index: 2; }
.pdeco--mockup    { left: -4.9%; top: 50vw;   width: 37.4vw; transform: rotate(9.5deg); z-index: 2; }
/* stickers */
.pdeco--oeil   { left: 9.6%;  top: 3.7vw;  width: 11.6vw; z-index: 3; --spin: -14deg; }
.pdeco--main   { left: 51.7%; top: 30.6vw; width: 11.5vw; z-index: 3; --spin: 12deg; }
.pdeco--raisin { left: 75.6%; top: 54vw; width: 11.1vw; z-index: 3; --spin: -12deg; }

/* ---- Fiche Game in Lyon : positions mesurées sur la maquette « 2B » (1920 px) ---- */
.gil--papier    { left: 51%;   top: 7vw;    width: 52vw;   z-index: 1; }
.gil--polaroid1 { left: 48%;   top: 8vw; width: 27vw;   transform: rotate(-13.5deg); z-index: 2; }
.gil--polaroid2 { left: 72.6%; top: 15vw; width: 21.6vw; transform: rotate(17.9deg);  z-index: 2; }
/* portail : dans le flux du bloc texte (jamais sous le texte) ; déborde à gauche du bloc comme sur la maquette */
.phero__text .gil--portail { position: static; display: block; width: 36vw; max-width: none; margin: 1vw 0 0 -5vw; }
.gil--joystick  { left: 2.2%;  top: 6vw; width: 9.6vw; transform: rotate(-24.8deg); z-index: 3; --spin: 14deg; }
.gil--coeurs    { left: 52.7%; top: 34vw; width: 17.6vw; transform: rotate(-10.5deg); z-index: 3; --spin: 10deg; }
.gil--pingpong  { left: 76%;   top: 49vw; width: 14.7vw; transform: rotate(-8.4deg);  z-index: 3; --spin: -14deg; }
.phero--gameinlyon .phero__note { left: 2.9%; top: 72.8vw; }
.phero--gameinlyon .phero__text { top: 12.6vw; }
@media (min-width: 1024px) {
  .phero--gameinlyon .phero__text { width: clamp(300px, 33vw, 640px); }   /* ordi : texte plus large, une ligne de moins, place pour le portail */
}
/* GAPC */
.gp--icons { position: static; display: block; width: 109%; max-width: none; margin-top: clamp(40px, 11vw, 230px); pointer-events: auto; }   /* dans le flux du texte : jamais sous les paragraphes */
.gp--sticker     { left: 70.1%; top: 38.1vw; width: 15.3vw; z-index: 3; --spin: 10deg; }
.gp--hex-a       { left: 77.3%; top: 8.5vw;  width: 3.1vw;  z-index: 3; --spin: 30deg; }   /* petit hexagone dégradé, en haut à droite */
.gp--hex-b       { left: 5.2%;  top: 35.9vw; width: 4.1vw;  z-index: 3; --spin: -30deg; }  /* hexagone dégradé, à gauche du texte */
.gp--hex-faint-s { left: 48.6%; top: 28.4vw; width: 8.4vw;  z-index: 0; }
.gp--hex-faint-l { left: 0;     top: 44.6vw; width: 16vw;   z-index: 0; }
/* Presk'ado : personnage dans une boîte de rognage (jamais sur le texte), stickers autour */
.pk--perso-clip  { left: 0; top: 36.5vw; width: 13vw; height: 39vw; overflow: hidden; z-index: 2; }
.pk--perso       { position: absolute; left: -16.2vw; top: -.4vw; width: 24.1vw; max-width: none; transform: rotate(24.8deg); }
.pk--calin       { left: 5.9%;  top: 9.4vw;  width: 7.7vw; transform: rotate(9deg);     z-index: 3; --spin: -12deg; }
.pk--etincelles  { left: 87.3%; top: 40.7vw; width: 5.7vw;                              z-index: 3; --spin: 14deg; }
.pk--arc         { left: calc(13.9% + clamp(300px, 30vw, 560px) + 2vw);  top: 45.6vw; width: 6.4vw; transform: rotate(9.8deg); z-index: 3; --spin: -12deg; }   /* toujours à droite du bloc texte */
.pk--coeur       { left: calc(13.9% + clamp(300px, 30vw, 560px) + .3vw); top: 52.5vw; width: 4.1vw; z-index: 3; --spin: 16deg; }
.pk--smiley      { position: static; display: block; width: 6.4vw; margin: 5vw 0 0 5vw; pointer-events: auto; transform: rotate(-15.4deg); --spin: 14deg; }   /* dans le flux du texte : toujours sous les paragraphes */
/* Couleurs d'ailleurs */
.ca--sticker      { left: 73.1%; top: 41.4vw; width: 14.3vw; z-index: 3; --spin: 12deg; }
.ca--spirale-clip { left: 0; top: 44.5vw; width: 12.6vw; z-index: 0; }
.ca--spirale      { display: block; width: 100%; transform: rotate(3.4deg); }
.ca--cercle-creme { left: 79.7%; top: 12.1vw; width: 2.4vw; z-index: 3; --spin: 40deg; }
.ca--cercle-rouge { position: static; display: block; width: 4.4vw; margin: 4.5vw 0 0 60%; pointer-events: auto; --spin: 40deg; }   /* dans le flux du texte */
.ca--carre        { position: static; display: block; width: 2.4vw; margin: 3.5vw 0 0 40%; pointer-events: auto; transform: rotate(13.5deg); --spin: 45deg; }
.phero--couleurs .phero__note { left: 2.9%; top: 72.8vw; }
/* Les nombres en lettres */
.nb--trefle { left: 6.5%;  top: 5vw;    width: 6.8vw;  transform: rotate(60deg);   z-index: 3; --spin: 30deg; }
.nb--moulin { left: -2.5%; top: 42vw;   width: 12vw;   transform: rotate(24.6deg); z-index: 3; --spin: 20deg; }   /* dépasse légèrement du bord gauche */
.nb--reine  { left: 75.9%; top: 41vw;   width: 13.9vw; z-index: 3; --spin: 12deg; }
.nb--requin { position: static; display: block; width: 11.4vw; margin: 4vw 0 0 50%; pointer-events: auto; transform: rotate(-14.3deg); --spin: -14deg; }   /* dans le flux du texte */
/* Samata Spirit */
.sm--telephone    { left: -4%; top: 54vw; width: 15vw; transform: rotate(38.9deg); z-index: 3; }   /* coupé par le bord gauche */
.sm--sticker      { left: calc(13.9% + clamp(300px, 30vw, 560px) + 1vw); top: 47.7vw; width: 16.7vw; transform: rotate(3.9deg); z-index: 3; --spin: 12deg; }   /* toujours à droite du bloc texte */
.sm--etoile-creme { left: 92.9%; top: 49vw; width: 14.9vw; transform: rotate(-17.1deg); z-index: 3; --spin: 30deg; }   /* coupée par le bord droit */
.sm--etincelle-a  { left: 79.2%; top: 11vw; width: 2.7vw; z-index: 3; --spin: 45deg; }
.sm--under        { position: relative; height: 8vw; margin-top: 8vw; }   /* dans le flux du texte */
.sm--etoile-sauge { left: 72%; top: 0; width: 4.6vw; z-index: 3; pointer-events: auto; --spin: 30deg; }
.sm--etincelle-b  { left: 54%; top: 5.5vw; width: 1.7vw; z-index: 3; pointer-events: auto; --spin: 45deg; }
/* Genevieve Vaughn */
.gv--bleues { left: 78.6%; top: 8.7vw;  width: 7.7vw;  transform: rotate(16.2deg); z-index: 3; --spin: -14deg; }
.gv--lys    { left: 3.7%;  top: 39.5vw; width: 7vw;    transform: rotate(-5.5deg); z-index: 3; --spin: 16deg; }    /* à gauche du bloc texte */
.gv--rouge  { left: calc(13.9% + clamp(300px, 30vw, 560px) + 3vw); top: 43.3vw; width: 11.6vw; transform: rotate(-6.9deg); z-index: 3; --spin: -12deg; }   /* toujours à droite du bloc texte */
.gv--jaune  { left: 80.1%; top: 53.5vw; width: 13.7vw; z-index: 3; --spin: 18deg; }
.gv--under  { position: relative; height: 9vw; margin-top: 3vw; }   /* dans le flux du texte */
.gv--rose   { left: 11%; bottom: calc(var(--tear-bottom) * .55); width: 15vw; z-index: 3; --spin: -10deg; }   /* la tige touche le bas du papier ; reste à gauche du texte sous 1280 px */
.gv--orange { left: 57%; top: 5vw; width: 7vw; transform: rotate(32deg); z-index: 3; pointer-events: auto; --spin: 20deg; }
@media (max-width: 1279px) {
  .phero--preskado .phero__body { font-size: 13px; }   /* texte long : une taille en dessous pour rester dans le papier */
  .pk--smiley { position: absolute; left: calc(100% + .5vw); top: 45vw; margin: 0; }   /* à droite du bloc texte, sous le petit cœur */
}
/* Fika Roasters */
.fk--sticker  { left: 45.9%; top: 37.3vw; width: 15.5vw; z-index: 3; --spin: 12deg; }
.fk--grains-g { left: -12%; top: 24vw; width: 22vw; transform: rotate(-27deg); z-index: 2; }
.fk--grains-d { left: 79%; top: 34.2vw; width: 22vw; transform: rotate(-12deg); z-index: 3; }
/* illustration grains : dans le flux du bloc texte ; l'écart sous le texte se réduit avec l'écran (23 vw à 1920, 4 vw à 1280) */
.phero__text .fk--illu { position: static; display: block; width: 14vw; margin: max(0px, 30vw - 346px) 0 0 5.9vw; --spin: -10deg; pointer-events: auto; }
.phero--fika .phero__note { left: 2.9%; top: 72.8vw; }

/* silhouettes (15 % d'opacité) */
/* papier quadrillé, polaroids, dessous de verre */
/* stickers */

/* Galerie */
.pgallery {
  max-width: 1731px; margin: 0 auto;
  padding: clamp(40px, 3.5vw, 67px) var(--gutter) clamp(60px, 4.2vw, 80px);
  display: grid; row-gap: clamp(16px, 2vw, 38px);
}
.pgallery__row { display: grid; column-gap: clamp(16px, 2vw, 38px); }
.pgallery__row--a    { grid-template-columns: 677fr 1015fr; }
.pgallery__row--full { grid-template-columns: 1fr; }
.pgallery__row--b    { grid-template-columns: 1fr 1fr; }
.pgallery__row--c    { grid-template-columns: 1015fr 677fr; }
.pgallery img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  border-radius: clamp(12px, 1.1vw, 20px);
  aspect-ratio: 1015 / 701;
}
.pgallery__row--a img:first-child, .pgallery__row--c img:last-child { aspect-ratio: 677 / 701; }
.pgallery__row--full img { aspect-ratio: 1731 / 701; }
.pgallery__row--b img { aspect-ratio: 848 / 701; }
/* apparition en cascade : le 2e visuel d'une ligne arrive un peu après le 1er */
.pgallery img.reveal { transition-delay: 0s; }
.pgallery img.reveal:nth-child(2) { transition-delay: .15s; }

.pnav { display: flex; justify-content: center; gap: clamp(12px, 1.1vw, 22px); margin-top: clamp(40px, 4.1vw, 79px); }
.pnav .btn { min-width: clamp(150px, 10.8vw, 207px); text-align: center; padding: .7em 1.4em; }
.btn--orange   { background: var(--orange); }
.btn--bordeaux { background: var(--bordeaux); }

/* --------------------------------------------------------------------------
   7. ABOUT
   -------------------------------------------------------------------------- */
.about {
  position: relative; z-index: 0;
  padding: clamp(200px, 23vw, 440px) 0 clamp(60px, 6vw, 110px);
}
.about__inner {
  position: relative; z-index: 1; isolation: isolate;   /* les étoiles de fond (z-index -1) restent sous le contenu */
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 1.6fr);
  gap: clamp(30px, 5vw, 100px);
  align-items: start;
}
.about__text { padding-left: clamp(0px, 8.6vw, 165px); padding-top: clamp(0px, 6vw, 120px); }
.about__title {
  position: relative;
  font-size: clamp(56px, 5.2vw, 100px);
  line-height: .88;
  margin-bottom: .55em;
  width: max-content;
}
.deco--butterfly { position: absolute; right: -.9em; bottom: .05em; width: 1.05em; }
.about__body {
  max-width: 400px;
  font-size: clamp(15px, .9vw, 17.25px);
  line-height: 1.5;
  letter-spacing: .02em;
  margin-bottom: clamp(24px, 2.9vw, 56px);
}
.about__body strong { font-weight: 700; }   /* sans cette règle, « bolder » sur du 300 ne donne que du 400 */

/* Collage de photos */
.about__collage {
  position: relative;
  aspect-ratio: 1040 / 1140;
  max-width: 1040px;
  justify-self: end;
  width: 100%;
}
.deco--papers   { left: -2%; top: 9%;   width: 96%; z-index: 0; }
.deco--photos   { left: 15%; top: 4%;    width: 78%; z-index: 2; }
.deco--polaroid { left: 1%;  top: 29%;   width: 36%; z-index: 3; }
.deco--badge2   { left: 71%; top: 36%;   width: 22.4%; z-index: 4; }
.deco--eyes   { left: 21%; top: 89%; width: 13%; z-index: 4; }

.deco--bgstar2 { left: -10%; top: 40%; width: clamp(240px, 22.7vw, 436px); z-index: -1; }
.deco--bgstar3 { right: -8%; top: -6%; width: clamp(240px, 22.7vw, 436px); z-index: -1; }

/* --------------------------------------------------------------------------
   8. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative; z-index: 1;
  --tear-top: clamp(90px, 9.5vw, 180px);
  padding: calc(var(--tear-top) + clamp(16px, 1.6vw, 30px)) 0 clamp(36px, 3.6vw, 70px);
}
.site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0;
  top: calc(var(--tear-top) - 2px);
  background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--orange);
  background-blend-mode: multiply;
}
.site-footer .tear--top { top: 0; height: var(--tear-top); }
.site-footer .tear--top::before { top: 0; height: 100%; background: var(--white);
  -webkit-mask-image: url("../assets/svg/tear-white-top.svg");  mask-image: url("../assets/svg/tear-white-top.svg"); }
.site-footer .tear--top::after  { top: 5%; height: 100%; background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--orange); background-blend-mode: multiply;
  -webkit-mask-image: url("../assets/svg/tear-orange-top.svg"); mask-image: url("../assets/svg/tear-orange-top.svg"); }

.site-footer__inner {
  position: relative; z-index: 2;
  max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(24px, 4vw, 80px);
  flex-wrap: wrap;
}
.logo--footer { position: relative; display: inline-block; }
.logo--footer > img:first-child { width: clamp(180px, 17vw, 330px); }
.deco--heart { right: -16%; top: -16%; width: clamp(30px, 3vw, 58px); }

.footer-nav ul { flex-wrap: wrap; }
.footer-nav__social { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 50px); margin-left: clamp(8px, 1vw, 24px); }
.footer-nav__social a:last-child img { translate: 0 3px; }   /* Behance : un poil plus bas, aligné sur Instagram */
.footer-nav__social img { width: clamp(36px, 2.9vw, 55px); height: auto; }
.footer-nav__social a { transition: transform .2s; }
.footer-nav__social a:hover { transform: rotate(-8deg) scale(1.1); opacity: 1; }

/* --------------------------------------------------------------------------
   9. ANIMATIONS AU SCROLL
   -------------------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .7s ease-out, transform .7s ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }

/* Cartes : se déploient une à une depuis le centre */
.card { transition: transform .8s cubic-bezier(.2,.8,.3,1.1), opacity .6s, rotate .5s cubic-bezier(.2,.8,.3,1.2);
        transition-delay: calc(var(--i, 0) * .12s), calc(var(--i, 0) * .12s), 0s; }
.cards:not(.is-visible) .card { opacity: 0; transform: translateY(60px) rotate(0deg); }

/* Polaroids : arrivent en fondu, décalés */
.polaroid-item { transition: opacity .7s ease-out, transform .7s ease-out; transition-delay: calc(var(--i, 0) * .08s); }
.polaroids:not(.is-visible) .polaroid-item { opacity: 0; transform: translateY(calc(var(--dy) * var(--stagger) + 60px)); }

/* Hero : stickers qui "se posent" au chargement */
.hero .deco { animation: pop .6s cubic-bezier(.2,.8,.3,1.2) both; animation-delay: calc(var(--i, 0) * .07s + .1s); }
@keyframes pop { from { opacity: 0; scale: .6; } to { opacity: 1; scale: 1; } }

@media (prefers-reduced-motion: reduce) {
  .spin, .card { transition: none; }
  [data-px] { --py: 0px !important; --pr: 0deg !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .cards:not(.is-visible) .card, .polaroids:not(.is-visible) .polaroid-item { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   10. RESPONSIVE
   -------------------------------------------------------------------------- */

/* ---------- ≤ 1279 px : tablette paysage ---------- */
@media (max-width: 1500px) {
  .phero__text .gil--portail { width: 30vw; margin-left: -4vw; }
}

@media (max-width: 1279px) {
  .deco--portrait { left: 4%; }
  .cards { gap: 12px; }
  .about__inner { grid-template-columns: minmax(240px, 1fr) minmax(0, 1.4fr); }
  .fk--sticker { left: 49%; width: 14.5vw; }   /* reste à droite du texte */
  .phero__text .fk--illu { margin-left: 14vw; }   /* reste à droite de la note « Project created… » */
}
/* ---------- 1024 à 1279 px : petits écrans d'ordinateur et tablettes en paysage ----------
   Le texte garde une hauteur en pixels alors que les décors suivent la largeur (vw) : sur ces
   écrans le texte descend plus bas que prévu. Règle : aucun décor sous le texte, aucun décor
   coupé. Quand il manque de place, on agrandit le papier (min-height) au lieu de réduire. */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Épicuvin : verre et dessous de verre calés en bas du papier, papier agrandi, note déplacée */
  .phero--epicuvin .phero__inner { min-height: 1120px; }
  .pdeco--verre  { top: auto; bottom: 14vw; }
  .pdeco--mockup { top: auto; bottom: 7vw; }
  .phero--epicuvin .phero__note { left: 38%; top: auto; bottom: 4vw; }
  /* GAPC : grand hexagone pâle sous le texte */
  .gp--hex-faint-l { top: auto; bottom: -3vw; }
  /* Presk’ado : smiley un peu plus à droite du bloc texte */
  .pk--smiley { left: calc(100% + 1.5vw); }
  /* Couleurs d’ailleurs : petit carré décalé pour ne pas toucher la note */
  .ca--carre { margin-left: 48%; }
  /* Les nombres en lettres : le requin suit le texte, papier agrandi pour ne pas le couper */
  .phero--nombres .phero__inner { min-height: 1040px; }
}
/* Samata Spirit : le téléphone frôle la dernière ligne dès 1365 px ; on le cale sous le texte
   et on agrandit un peu le papier (sans effet à partir de 1366 px, où 83 vw dépasse déjà 1090 px) */
@media (min-width: 1024px) and (max-width: 1365px) {
  .phero--samata .phero__inner { min-height: max(83vw, 1090px); }
  .sm--telephone { top: max(54vw, 740px); }
}

@media (max-width: 1279px) {
  .phero__text .gil--portail { width: 20vw; margin-left: -3vw; }
  .gv--under { height: 7vw; margin-top: 1vw; }   /* texte plus long : fleurs du bas plus petites */
  .gv--rose { left: 2%; width: 10.5vw; }
  .gv--orange { width: 5.5vw; top: 2vw; }
}

/* ---------- ≤ 1023 px : tablette portrait ---------- */
@media (max-width: 1023px) {
  .hero__inner { min-height: clamp(560px, 72vw, 740px); }
  .hero__inner > * { --shift: 0px; }
  .hero__title { top: 8%; font-size: clamp(26px, 3.6vw, 38px); }
  .deco--portrait { left: 4%;  top: 42%; width: 28vw; }
  .deco--sun      { left: 8%;  top: 6%;  width: 13vw; }
  .deco--berry    { left: 36%; top: 64%; width: 11vw; }
  .deco--cursor   { left: 52%; top: 58%; width: 10vw; }
  .deco--torn     { left: 66%; top: 47%; width: 30vw; }
  .deco--badge    { left: 82%; top: 36%; width: 13vw; }
  .deco--spark-l  { left: 88%; top: 8%; }
  .deco--spark-r  { left: 62%; top: 44%; }
  .deco--arrow    { top: auto; bottom: 4%; }

  .skills { padding-top: clamp(120px, 14vw, 180px); padding-bottom: clamp(110px, 13vw, 170px); }
  .cards { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 6vw 8vw; }
  .card { width: 100%; }
  .card:nth-child(n) { margin-top: 0; }
  .card__title { font-size: clamp(30px, 5vw, 48px); }
  .card__list { font-size: clamp(13px, 1.5vw, 16px); }
  .deco--arrow1 { display: none; }
  .skills__more { text-align: center; padding-right: 0; }

  .polaroids { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); --stagger: clamp(30px, 5vw, 60px); column-gap: 6vw; row-gap: 8vw; }
  .projects--page .polaroids { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 6vw; }
  .projects--page .polaroid-item { max-width: 420px; }
  .polaroid-item { max-width: 420px; }
  .polaroid-item:last-child { grid-column: 1 / -1; --dy: 0; }
  .deco--flower  { left: -10%; top: auto; bottom: -6%; width: 24%; }

  /* fiche projet : hero en deux temps (texte puis collage), galerie 2 colonnes */
  .phero__inner { min-height: 0; padding-bottom: 6vw; }
  .phero__text { position: static; width: min(100%, 560px); padding: 8vw var(--gutter) 0 var(--gutter); }
  .phero__note { position: static; width: auto; padding: 2vw var(--gutter) 0; }
  .phero__stage { display: block; height: 80vw; }
  .phero--gameinlyon .phero__stage { height: 92vw; }
  .pdeco--bouteille { left: 14%; top: auto; bottom: 22vw; width: 20vw; }   /* filigrane : dans le collage, jamais derrière le texte */
  .pdeco--verre  { display: none; }
  .pdeco--tire   { left: 76%; top: 2vw; width: 18vw; }
  .pdeco--papier { left: 40%; top: auto; bottom: -14vw; width: 62vw; }
  .pdeco--polaroid1 { left: 2%;  top: auto; bottom: 30vw; width: 44vw; }
  .pdeco--polaroid2 { left: 58%; top: auto; bottom: 32vw; width: 32vw; }
  .pdeco--mockup    { left: -8%; top: auto; bottom: 7vw; width: 50vw; }   /* entier, au-dessus du bord déchiré */
  .pdeco--oeil   { left: 78%; top: 8vw; width: 15vw; }
  .pdeco--main   { left: 40%; top: auto; bottom: 24vw; width: 16vw; }
  .pdeco--raisin { left: 80%; top: auto; bottom: 12vw; width: 14vw; }
  .gil--papier    { left: 40%; top: auto; bottom: -14vw; width: 62vw; }
  .gil--polaroid1 { left: 4%;  top: auto; bottom: 40vw; width: 40vw; }
  .gil--polaroid2 { left: 54%; top: auto; bottom: 36vw; width: 32vw; }
  .phero__text .gil--portail { position: absolute; margin: 0; left: 4%; top: auto; bottom: 8vw; width: 34vw; }
  .gil--joystick  { left: 70%; top: 6vw;  width: 14vw; }
  .gil--coeurs    { left: 28%; top: auto; bottom: 30vw; width: 24vw; }
  .gil--pingpong  { left: 74%; top: auto; bottom: 12vw; width: 18vw; }
  .phero--gameinlyon .phero__note { position: static; }
  .fk--grains-g { left: -12%; top: auto; bottom: 40vw; width: 22vw; z-index: 0; }
  .fk--grains-d { left: 70%; top: auto; bottom: 20vw; width: 30vw; }
  .fk--sticker  { left: 2%; top: auto; bottom: 10vw; width: 30vw; }
  .phero__text .fk--illu { position: absolute; margin: 0; left: 38%; top: auto; bottom: 2vw; width: 14vw; }
  .phero--fika .phero__note { position: static; }
  .gp--icons       { position: static; width: 60%; max-width: 420px; margin-top: 6vw; }
  .gp--sticker     { left: 62%; top: auto; bottom: 18vw; width: 20vw; }
  .gp--hex-a       { left: 90%; top: 4vw; width: 5vw; }
  .gp--hex-b       { left: 4%; top: auto; bottom: 30vw; width: 6vw; }
  .gp--hex-faint-s { left: 80%; top: auto; bottom: 62vw; width: 14vw; }
  .gp--hex-faint-l { left: -6%; top: auto; bottom: 2vw; width: 26vw; }
  .pk--perso-clip  { left: 0; top: auto; bottom: 0; width: 20vw; height: 60vw; }
  .pk--perso       { left: -22vw; top: 2vw; width: 36vw; }
  .pk--calin       { left: 86%; top: 9vw; width: 11vw; }
  .pk--etincelles  { left: 90%; top: auto; bottom: 58vw; width: 7vw; }
  .pk--arc         { left: 48%; top: auto; bottom: 20vw; width: 9vw; }
  .pk--coeur       { left: 42%; top: auto; bottom: 12vw; width: 6vw; }
  .pk--smiley      { position: absolute; left: 24%; top: auto; bottom: 4vw; width: 9vw; margin: 0; z-index: 3; }
  .ca--sticker      { left: 64%; top: auto; bottom: 16vw; width: 20vw; }
  .ca--spirale-clip { left: 0; top: auto; bottom: 0; width: 18vw; }
  .ca--cercle-creme { left: 90%; top: 4vw; width: 4vw; }
  .ca--cercle-rouge { position: absolute; left: 40%; top: auto; bottom: 10vw; width: 6vw; margin: 0; z-index: 3; }
  .ca--carre        { position: absolute; left: 30%; top: auto; bottom: 4vw; width: 3.5vw; margin: 0; z-index: 3; }
  .phero--couleurs .phero__note { position: static; }
  .nb--trefle { left: 88%; top: 6vw; width: 9vw; }
  .nb--moulin { left: -4%; top: auto; bottom: 10vw; width: 16vw; }
  .nb--reine  { left: 70%; top: auto; bottom: 20vw; width: 18vw; }
  .nb--requin { position: absolute; left: 36%; top: auto; bottom: 2vw; width: 18vw; margin: 0; z-index: 3; }
  .sm--telephone    { left: -6%; top: auto; bottom: 6vw; width: 20vw; }
  .sm--sticker      { left: 46%; top: auto; bottom: 14vw; width: 22vw; }
  .sm--etoile-creme { left: 86%; top: auto; bottom: 30vw; width: 22vw; }
  .sm--etincelle-a  { left: 90%; top: 5vw; width: 4vw; }
  .sm--under        { position: absolute; left: 24%; top: auto; bottom: 0; width: 20vw; height: 16vw; margin: 0; }
  .sm--etoile-sauge { left: 40%; top: 0; width: 8vw; }
  .sm--etincelle-b  { left: 0; top: 10vw; width: 3vw; }
  .gv--bleues { left: 86%; top: 3vw; width: 11vw; }
  .gv--lys    { left: 88%; top: auto; bottom: 44vw; width: 10vw; }   /* à droite du polaroid pince */
  .gv--rouge  { left: 40%; top: auto; bottom: 26vw; width: 16vw; }
  .gv--jaune  { left: 80%; top: auto; bottom: 8vw; width: 16vw; }
  .gv--under  { position: absolute; left: 4%; top: auto; bottom: 2vw; width: 40vw; height: 22vw; margin: 0; }
  .gv--rose   { left: 2%; bottom: calc(var(--tear-bottom) * .55); width: 18vw; }
  .gv--orange { left: 60%; top: 8vw; width: 11vw; }
  /* tablette : on garde les proportions d'origine des visuels (pas de recadrage carré) */
  .about { padding-top: clamp(200px, 26vw, 300px); }
  .about__inner { grid-template-columns: 1fr; }
  .about__text { padding-left: 0; padding-top: 0; }
  .about__collage { justify-self: center; max-width: 720px; }
}

/* ---------- ≤ 767 px : mobile (d'après la maquette « 1 - Home - responsive », 390 px) ----------
   Règle : aucun décor ne passe sur un texte. Les positions sont en vw (1 vw = 3,9 px sur la maquette). */
@media (max-width: 767px) {
  .site-header__inner { min-height: 44px; }
  :root { --header-h: 44px; }
  .logo > img:first-child { width: clamp(140px, 40vw, 200px); }

  /* menu burger */
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 8px; border: 0; background: none; cursor: inherit;
  }
  .nav-toggle span { display: block; height: 3px; border-radius: 2px; background: var(--bordeaux); transition: transform .25s, opacity .25s; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
  .main-nav {
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--cream); box-shadow: 0 12px 24px rgba(0,0,0,.1);
    display: none; padding: 16px var(--gutter) 24px;
  }
  .main-nav.is-open { display: block; }
  .main-nav ul { flex-direction: column; align-items: flex-start; gap: 14px; }
  .main-nav a { font-size: 14px; }
  .nav-contact { padding: .55em 1.2em !important; }

  /* Hero : calqué sur la maquette 390 px (1 vw = 3,9 px). Titre en haut, décors en dessous.
     Le titre a une taille en vw, donc sa hauteur est prévisible : aucun décor ne le touche. */
  .hero { z-index: 3; }
  .hero__inner { min-height: 70vw; }
  .hero__title { position: static; transform: none; width: auto; max-width: 100%; margin: 0 auto;
    padding: 14vw 8vw 0; font-size: clamp(16px, 5vw, 26px); line-height: 1.3; letter-spacing: .06em; }
  .deco--sun      { left: 14%;   top: 5.5vw; width: 11.5vw; z-index: 1; }
  .deco--spark-l  { left: 37%;   top: 8.5vw; width: 2.6vw; }
  .deco--torn     { left: 78%;   top: -3vw;  width: 36vw; transform: rotate(17deg); }
  .deco--badge    { left: 81.5%; top: 38vw;  width: 14vw; }
  .deco--cursor   { display: block; left: 52.5%; top: 41vw; width: 10vw; }
  .deco--spark-r  { left: 72.5%; top: 51.5vw; width: 6vw; }
  .deco--portrait { left: 0;     top: 40vw;  width: 31vw; transform: rotate(-20deg); }
  .deco--berry    { left: 27%;   top: 46vw;  width: 12vw; }
  .deco--arrow    { display: none; }
  .deco--bgstar   { left: -16%;  top: 1vw;   width: 35vw; }
  .deco--bgstar--r { left: auto; right: -14%; top: 46vw; width: 34vw; }

  /* Skills : cartes empilées, légèrement décalées et penchées */
  .skills { padding-top: 36vw; padding-bottom: 42vw; }
  .btn { font-size: 14px; padding: .55em 1.4em; }
  .cards { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 0; }
  .card { width: 64vw; max-width: 300px; }
  .card:nth-child(n) { margin-top: 0; }
  .card:nth-child(2) { translate: 7vw 0;  margin-top: -6vw; }
  .card:nth-child(3) { translate: -1vw 0; margin-top: -4vw; }
  .card:nth-child(4) { translate: 7vw 0; margin-top: -8vw; }
  .card__title { font-size: clamp(26px, 8vw, 38px); }
  .card__list  { font-size: clamp(11px, 3.1vw, 14px); }
  .deco--pen    { top: -17%; left: 44%; width: 30%; }
  .deco--arrow1 { display: block; top: 8%; left: -12%; width: 17%; }
  .deco--laptop { bottom: -3%; left: -10%; width: 38%; }
  .deco--pencil { top: 34%; right: -14%; width: 26%; }

  /* Projets : polaroids en une colonne, tous centrés, deux plus grands au milieu */
  .projects { padding-top: 150px; padding-bottom: 80px; }
  .projects--page { padding-top: calc(var(--tear-top) + 44px); padding-bottom: 120px; }
  .projects--page .polaroids { grid-template-columns: minmax(0, 1fr); row-gap: 6vw; }
  .projects--page .polaroid-item { width: 62vw; max-width: 300px; }
  .projects .section-title { font-size: clamp(30px, 8.5vw, 44px); margin-bottom: 20vw; }
  .polaroids { grid-template-columns: minmax(0, 1fr); --stagger: 0px; row-gap: 6vw; }
  .polaroid-item { width: 62vw; max-width: 300px; }
  .polaroid-item:last-child { grid-column: auto; }
  .polaroid-item { --k: .5; }
  .deco--smiley    { left: 86%;  top: 1%;   width: 24%; }
  .deco--flower    { left: -20%; top: 34%;  width: 31%; }
  .deco--clover    { right: -10%; bottom: -12%; width: 28%; }
  .projects__footer { justify-content: center; padding-right: 0; min-height: 0; margin-top: 12vw; }
  .deco--twist { display: block; left: 8%; bottom: -8vw; width: 12vw; }

  /* fiche projet mobile : une colonne */
  /* positions de la maquette mobile (390 px, 1 vw = 3,9 px). La « scène » (128 vw) est le dernier bloc
     du hero : top = calc(100% - 128vw + décalage) = distance depuis le haut de la scène. */
  .phero__inner { --stage: 160vw; padding-bottom: 0; }
  .phero__stage { height: var(--stage); }
  .pdeco--tire   { display: block; left: 90%; top: 18vw; width: 40vw; transform: rotate(11deg); }
  .pdeco--bouteille { left: -6%; top: 57vw; bottom: auto; width: 28vw; transform: rotate(14.8deg); }
  .pdeco--oeil   { left: 65%; top: 9vw; width: 20vw; }
  .pdeco--papier    { left: 27.4%; top: calc(100% - var(--stage) - 26vw); width: 94.6vw; }
  .pdeco--polaroid1 { left: 5%;    top: calc(100% - var(--stage) + 13vw);  width: 54vw;   transform: rotate(-16deg); z-index: 2; }
  .pdeco--polaroid2 { left: 58%;   top: calc(100% - var(--stage) + 10vw);  width: 40.8vw; transform: rotate(18.2deg); z-index: 3; }
  .pdeco--main   { left: 13%;   top: calc(100% - var(--stage) + 62vw); width: 18.5vw; z-index: 4; }
  .pdeco--verre  { display: block; left: 42%; top: calc(100% - var(--stage) + 78vw); width: 35vw; }
  .pdeco--raisin { left: 77%;   top: calc(100% - var(--stage) + 88vw); width: 15vw; }
  .pdeco--mockup { left: -15%;  top: calc(100% - var(--stage) + 104vw); bottom: auto; width: 76vw; transform: rotate(9.5deg); }
  /* Game in Lyon mobile (maquette « 2B - responsive », 390 px), mêmes tailles que la fiche Épicuvin.
     La règle tablette (.phero--gameinlyon .phero__stage) est plus précise : on la surcharge ici. */
  .phero--gameinlyon .phero__inner { --stage: 150vw; }
  .phero--gameinlyon .phero__stage { height: var(--stage); }
  .gil--joystick  { left: 68%;   top: 15vw; width: 18vw; }   /* à droite du titre sur 2 lignes, au-dessus des pastilles */
  .gil--papier    { left: 27.4%; top: calc(100% - var(--stage) - 22vw); width: 94.6vw; }
  .gil--polaroid1 { left: 3%;    top: calc(100% - var(--stage) + 10vw); width: 54vw;   transform: rotate(-16deg); z-index: 2; }
  .gil--polaroid2 { left: 55%;   top: calc(100% - var(--stage) + 16vw); width: 40.8vw; transform: rotate(18.2deg); z-index: 3; }
  .gil--coeurs    { left: 12%;   top: calc(100% - var(--stage) + 62vw); width: 32vw;   transform: rotate(-13.2deg); }
  .phero__text .gil--portail { left: 6%; top: calc(100% - var(--stage) + 84vw); bottom: auto; width: 46vw; }
  .gil--pingpong  { left: 72.8%; top: calc(100% - var(--stage) + 80vw); width: 24vw; }
  /* Fika mobile */
  .phero--fika .phero__inner { --stage: 142vw; }
  .phero--fika .phero__stage { height: var(--stage); }
  .fk--grains-g { left: -15.5%; top: 14vw; bottom: auto; width: 25vw; transform: rotate(-27deg); z-index: 0; }
  .fk--sticker  { left: 5%; top: calc(100% - var(--stage) + 58vw); bottom: auto; width: 33vw; }
  .fk--grains-d { left: 64%; top: calc(100% - var(--stage) + 48vw); bottom: auto; width: 34vw; }
  .phero__text .fk--illu { left: 24%; top: calc(100% - var(--stage) + 92vw); bottom: auto; width: 22vw; }
  /* GAPC mobile : collage sous le texte, pictos en bas à gauche du collage */
  .phero--gapc .phero__inner { --stage: 150vw; }
  .phero--gapc .phero__stage { height: var(--stage); }
  .gp--icons       { position: absolute; left: 9.5%; top: calc(100% - var(--stage) + 106vw); bottom: auto; width: 41vw; margin: 0; }
  .gp--sticker     { left: 54.6%; top: calc(100% - var(--stage) + 70vw); bottom: auto; width: 21.3vw; }
  .gp--hex-a       { left: 57%; top: 21vw; bottom: auto; width: 6.2vw; }     /* à droite du titre GAPC */
  .gp--hex-b       { left: 7%; top: calc(100% - var(--stage) + 72vw); bottom: auto; width: 6.2vw; }
  .gp--hex-faint-s { left: 74%; top: calc(100% - var(--stage) + 8vw); bottom: auto; width: 17vw; }
  .gp--hex-faint-l { left: -6%; top: calc(100% - var(--stage) + 82vw); bottom: auto; width: 30vw; }
  /* Presk'ado mobile */
  .phero--preskado .phero__inner { --stage: 160vw; }
  .phero--preskado .phero__stage { height: var(--stage); }
  .pk--perso-clip  { left: 0; top: calc(100% - var(--stage) + 65vw); bottom: auto; width: 27.4vw; height: 82.3vw; }
  .pk--perso       { left: -32.6vw; top: -.7vw; width: 50.9vw; }
  .pk--calin       { left: 68%;   top: 11.1vw; bottom: auto; width: 18.4vw; }   /* en haut à droite du titre */
  .pk--etincelles  { left: 80.4%; top: calc(100% - var(--stage) + 61vw);  bottom: auto; width: 9.6vw; }
  .pk--arc         { left: 54.5%; top: calc(100% - var(--stage) + 84vw);  bottom: auto; width: 13.8vw; }
  .pk--coeur       { left: 43.6%; top: calc(100% - var(--stage) + 95vw);  bottom: auto; width: 9.2vw; }
  .pk--smiley      { left: 34.8%; top: calc(100% - var(--stage) + 115vw); bottom: auto; width: 12.4vw; }
  /* Couleurs d'ailleurs mobile */
  .phero--couleurs .phero__inner { --stage: 140vw; }
  .phero--couleurs .phero__stage { height: var(--stage); }
  .ca--sticker      { left: 53.6%; top: calc(100% - var(--stage) + 77vw); bottom: auto; width: 23.8vw; }
  .ca--spirale-clip { left: 0; top: calc(100% - var(--stage) + 75vw); bottom: auto; width: 23.8vw; }
  .ca--cercle-creme { left: 61%; top: 26vw; bottom: auto; width: 4.6vw; }
  .ca--cercle-rouge { left: 38%; top: calc(100% - var(--stage) + 99vw); bottom: auto; width: 5.9vw; }
  .ca--carre        { left: 31%; top: calc(100% - var(--stage) + 110vw); bottom: auto; width: 3.3vw; }
  /* Les nombres en lettres mobile */
  .phero--nombres .phero__inner { --stage: 160vw; }
  .phero--nombres .phero__stage { height: var(--stage); }
  /* collage descendu de 10vw : le texte est long, il ne doit pas toucher les polaroids */
  .phero--nombres .pdeco--papier    { top: calc(100% - var(--stage) - 16vw); }
  .phero--nombres .pdeco--polaroid1 { top: calc(100% - var(--stage) + 23vw); }
  .phero--nombres .pdeco--polaroid2 { top: calc(100% - var(--stage) + 20vw); }
  .nb--trefle { left: 80%;   top: 17vw; bottom: auto; width: 15vw; }
  .nb--moulin { left: -8%;   top: calc(100% - var(--stage) + 84vw); bottom: auto; width: 31vw; }   /* dépasse du bord gauche */
  .nb--reine  { left: 65.3%; top: calc(100% - var(--stage) + 70vw); bottom: auto; width: 23.3vw; }
  .nb--requin { left: 32%;   top: calc(100% - var(--stage) + 110vw); bottom: auto; width: 23vw; }
  /* Samata Spirit mobile */
  .phero--samata .phero__title { max-width: 62vw; }   /* « Samata / Spirit » sur 2 lignes : l'étincelle reste à droite */
  .sm--telephone    { left: -9%;  top: calc(100% - var(--stage) + 86vw); bottom: auto; width: 26vw; }
  .sm--sticker      { left: 48%;  top: calc(100% - var(--stage) + 80.5vw); bottom: auto; width: 26.4vw; }
  .sm--etoile-creme { left: 86%;  top: calc(100% - var(--stage) + 76vw); bottom: auto; width: 24vw; }
  .sm--etincelle-a  { left: 78%;  top: 23vw; bottom: auto; width: 6.7vw; }
  .sm--under        { left: 30%;  top: calc(100% - var(--stage) + 107vw); bottom: auto; width: 20vw; height: 16vw; }
  .sm--etoile-sauge { left: 45%;  top: 0; width: 9.5vw; }
  .sm--etincelle-b  { left: 0;    top: 11vw; width: 3.3vw; }
  /* Genevieve Vaughn mobile */
  .phero--genevieve .phero__inner { --stage: 160vw; }
  .phero--genevieve .phero__stage { height: var(--stage); }
  /* collage descendu de 10vw pour laisser de l'air sous le texte */
  .phero--genevieve .pdeco--papier    { top: calc(100% - var(--stage) - 16vw); }
  .phero--genevieve .pdeco--polaroid1 { top: calc(100% - var(--stage) + 23vw); }
  .phero--genevieve .pdeco--polaroid2 { top: calc(100% - var(--stage) + 20vw); }
  .phero--genevieve .phero__title { max-width: 62vw; }
  .gv--bleues { left: 81.4%; top: 20vw; bottom: auto; width: 14.4vw; }   /* à droite du titre */
  .gv--lys    { left: 62.4%; top: 40vw; bottom: auto; width: 13.4vw; }   /* à droite de « Vaughn » */
  .gv--rouge  { left: 11%;   top: calc(100% - var(--stage) + 72vw);  bottom: auto; width: 23vw; }
  .gv--jaune  { left: 76%;   top: calc(100% - var(--stage) + 88vw);  bottom: auto; width: 17.5vw; }
  .gv--under  { left: 7.9%;  top: calc(100% - var(--stage) + 115vw); bottom: auto; width: 50vw; height: 32vw; }
  .gv--rose   { left: 5%; top: auto; bottom: calc(var(--tear-bottom) * .55); width: 29vw; }
  .gv--orange { left: 66%; top: 4vw; width: 13vw; }
  .phero__text { padding-top: 10vw; }
  .phero__title { font-size: 11.3vw; }
  .phero--gameinlyon .phero__title { max-width: 62vw; }   /* force « Game in / Lyon » sur 2 lignes : le joystick reste à droite du titre */
  .phero__text { width: 100%; padding: 17vw 9.7% 0; }
  .phero__note { padding: 4vw 9.7% 0; font-size: 10px; }
  .tags li { font-size: 11px; padding: .35em 1.1em; }
  .tags { gap: .45em; }
  .phero__body { font-size: 12px; line-height: 1.4; }
  .pgallery { padding: 14px 12.3% 60px; row-gap: 14px; }
  .pgallery__row { grid-template-columns: 1fr !important; row-gap: 14px; }
  /* mobile : chaque visuel garde sa proportion d'origine, comme sur la maquette */
  .pnav { flex-direction: column; align-items: center; }
  /* About : texte puis collage, marges de 15 % comme la maquette */
  .about { padding-top: 180px; padding-bottom: 40px; }
  .about__inner { padding: 0 12vw; grid-template-columns: minmax(0, 1fr); }   /* minmax(0) : le collage pleine largeur n'élargit pas la colonne du texte */
  .about__title { font-size: clamp(34px, 10vw, 46px); }
  .about__body  { font-size: clamp(13px, 3.6vw, 15px); }
  /* collage : bloc de 324 × 342 à x = 29 sur la maquette téléphone (390 px) ; positions en % du bloc */
  .about__collage { max-width: none; width: 83.1vw; margin: 2vw 0 12vw calc(7.4vw - 12vw); aspect-ratio: 324 / 342; }
  .deco--papers   { left: 1%;    top: 17%;   width: 95.5%; }
  .deco--photos   { left: 17.6%; top: 0;     width: 82.4%; }
  .deco--polaroid { left: 2.2%;  top: 19%;   width: 51.9%; }
  .deco--badge2   { left: 74.1%; top: 29.8%; width: 24.1%; }
  .deco--eyes     { left: 26%;   top: 101%;  width: 16%; }
  .deco--bgstar2, .deco--bgstar3 { width: 40vw; }

  /* Footer : tout centré */
  .site-footer__inner { flex-direction: column; align-items: center; text-align: center; gap: 8vw; }
  .logo--footer > img:first-child { width: clamp(150px, 42vw, 220px); }
  .deco--heart { right: -14%; top: -12%; width: 30px; }
  .footer-nav ul { justify-content: center; gap: 18px 24px; }
  .footer-nav__social { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---------- ≤ 430 px : petit mobile ---------- */
/* ---------- Contact, mobile : tout est calé en vw sur une scène de hauteur fixe ---------- */
@media (max-width: 767px) {
  .contact { --tear-top: clamp(40px, 7vw, 60px); }
  .contact__inner { min-height: 222vw; }
  .contact__text { left: 50%; translate: -50% 0; top: 34.9vw; width: 70vw; font-size: 9.7vw; line-height: 1.02; }
  .ct-pill { font-size: 4.5vw; padding: .75em 2.2em; }
  .ct-pill--tel   { left: 50%; translate: -50% 0; top: 78vw; }
  .ct-pill--insta { left: 50%; translate: -50% 0; top: 93.5vw; }
  .ct-pill--mail  { left: 50%; translate: -50% 0; top: 108vw; }
  .ct--soleil      { left: 65.4%; top: 78.2vw; width: 15.9vw; }
  .ct--fleur       { left: 72%; top: 12vw; width: 20vw; }
  .ct--etoile-a    { left: 88.5%; top: 62.8vw; width: 6.9vw; }
  .ct--etoile-b    { left: 9.2%;  top: 128.7vw; width: 9vw; }
  .ct--etincelle-a { left: 82.8%; top: 74.4vw; width: 3.3vw; }
  .ct--etincelle-b { left: 6.7%;  top: 46.7vw; width: 3.8vw; }
  .ct--porte-cles  { left: 14%; top: 90vw; width: 90vw; transform: rotate(22.3deg); }
}

@media (max-width: 430px) {
  .gil--joystick { left: 70%; }
  .card { padding: 10% 8%; }
}

/* ==========================================================================
   6e. PAGE PRÉSENTATION (presentation.html)
   Maquette « 4 - Présentation » (1920 px, 1 vw = 19,2 px, header 196 px) et « responsive » (390 px).
   5 sections : Hello (collage), Experience (frise orange), Education (cadres sur papier rayé),
   Software Skills (ordinateur), Languages (drapeaux sur papier à carreaux).
   ========================================================================== */

/* ---- 1. Hello ---- */
.pres-hero { position: relative; z-index: 3; }
.pres-hero__inner { position: relative; max-width: 1920px; margin: 0 auto; min-height: 47vw; }
.pres-hero__text { position: absolute; left: 64%; top: 3.7vw; width: clamp(300px, 22.2vw, 426px); z-index: 4; }
.pres-hero__title {
  font-family: var(--font-hand); font-weight: 400;
  font-size: clamp(44px, 4.43vw, 85px); line-height: .92; margin-bottom: clamp(16px, 2.2vw, 42px);
}
.pres-hero__body { font-size: clamp(14px, .9vw, 17.25px); line-height: 1.5; font-weight: 300; }
.pres-hero__body + .pres-hero__body { margin-top: 1.5em; }
.pres-hero__body strong { font-weight: 700; }
.pres-hero__btn { margin-top: clamp(24px, 3.3vw, 64px); }

/* Collage : bloc de 1140 × 1290 sur la maquette, calé en haut à gauche de la section.
   Les calques sont en % du bloc, la rotation est appliquée sur le calque droit (export non tourné). */
.pres-collage {
  position: absolute; left: 3.1%; top: -1.35vw; width: 59.4%; aspect-ratio: 1140 / 1290;
  z-index: 3; pointer-events: none;
}
.pc { position: absolute; max-width: none; height: auto; }
.pc--papier { left: 3.38%;  top: 52.71%; width: 72.50%; }
.pc--stack, .pc--cover { left: 8.5%; top: 3.5%; width: 88%; }   /* même canevas : même position */
.pc--strip  { left: 59.80%; top: 42.07%; width: 21.80%; transform: rotate(37.9deg); }   /* bande de photos : au-dessus du dos, sous la couverture */
.pc--plume  { left: 62.21%; top: 51.40%; width: 15.04%; --spin: -12deg; }
.pc--pola1  { left: 19.52%; top: 15.27%; width: 32.46%; transform: rotate(-9.7deg); }   /* polaroid + scotch : tournent ensemble */
.pc--pola1 > img:first-child { width: 100%; height: auto; display: block; }
.pc--scotch { position: absolute; left: 54.2%; top: 69.4%; width: 61.1%; transform: rotate(9.7deg); }
.pc--soleil { left: 11.32%; top: 26.43%; width: 16.40%; --spin: 20deg; }
.pc--etin-g { left: 30.09%; top: 69.07%; width: 7.19%; }
.pc--etin-p { left: 40.00%; top: 75.04%; width: 3.25%; }
.pc.spin { pointer-events: auto; }

/* polaroid de droite, fraise, trombone : dans le bloc de texte, en vw depuis son coin haut gauche
   (maquette : bloc à 1189 × 267, polaroid 1621 × 803, fraise 1508 × 964, trombone 1775 × 760).
   Calés sur le BAS du bloc (le bouton) : quelle que soit la hauteur du texte, le polaroid reste sous la dernière ligne. */
.pr--pola2    { left: 20.4vw; bottom: -20.5vw; width: 16.85vw; max-width: none; transform: rotate(-30.4deg); z-index: 3; }   /* polaroid + trombone : tournent ensemble */
.pr--pola2 > img:first-child { width: 100%; height: auto; display: block; }
.pr--fraise   { left: 14.5vw; bottom: -18vw;   width: 7.50vw; z-index: 4; --spin: -14deg; pointer-events: auto; }
.pr--trombone { position: absolute; left: 74.9%; top: -2.2%; width: 16.7%; transform: rotate(-11.3deg); z-index: 4; }

/* étoiles de fond (beige clair) */
.pres-bgstar { z-index: 0; }
.pres-bgstar--1 { left: -12.5%; top: -.5vw;  width: 26vw;   transform: rotate(-10.1deg); }
.pres-bgstar--2 { left: 83%;    top: 13.8vw; width: 29.3vw; transform: rotate(22.7deg); }

/* ---- 2. Experience ---- */
.pres-exp {
  position: relative; z-index: 2;
  --tear-top: clamp(100px, 12vw, 230px);
  --tear-bottom: clamp(90px, 10.4vw, 200px);
  --tl: 1vw;                                   /* unité de la frise : 1 vw sur ordinateur (19,2 px) */
  color: var(--bordeaux);
  padding: 25vw 0 calc(var(--tear-bottom) + 1vw);
}
.pres-exp::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: calc(var(--tear-top) - 2px); bottom: calc(var(--tear-bottom) - 2px);
  background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--orange);
  background-blend-mode: multiply;
}
.pres-exp .tear--top    { top: 0;    height: var(--tear-top); }
.pres-exp .tear--bottom { bottom: 0; height: var(--tear-bottom); }
.pres-exp .tear--top::before  { top: 0; height: 100%; background: var(--white);
  -webkit-mask-image: url("../assets/svg/tear-white-top.svg");  mask-image: url("../assets/svg/tear-white-top.svg"); }
.pres-exp .tear--top::after   { top: 5%; height: 100%; background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--orange); background-blend-mode: multiply;
  -webkit-mask-image: url("../assets/svg/tear-orange-top.svg"); mask-image: url("../assets/svg/tear-orange-top.svg"); }
.pres-exp .tear--bottom::before { bottom: 0; height: 100%; background: var(--white);
  -webkit-mask-image: url("../assets/svg/tear-white-bottom.svg");  mask-image: url("../assets/svg/tear-white-bottom.svg"); }
.pres-exp .tear--bottom::after  { top: 0; height: 88%; background: url("../assets/img/grain.png") repeat 0 0 / 512px, var(--orange); background-blend-mode: multiply;
  -webkit-mask-image: url("../assets/svg/tear-orange-bottom.svg"); mask-image: url("../assets/svg/tear-orange-bottom.svg"); }

.pres-exp__inner { position: relative; z-index: 2; max-width: 1920px; margin: 0 auto; }
.pres-exp__title { position: absolute; left: 6.8%; top: -6.8vw; font-size: clamp(40px, 5vw, 96px); }

/* Frise : plus large que l'écran, défilement horizontal (la 4e carte « Future » se découvre en faisant glisser) */
.timeline { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.timeline::-webkit-scrollbar { display: none; }
.timeline__track {
  list-style: none; margin: 0;
  position: relative; display: flex; gap: calc(3.8 * var(--tl)); width: max-content;
  padding: 0 calc(10 * var(--tl)) calc(3 * var(--tl)) 4.9%;
}
/* ligne blanche : part transparente puis blanche, dépasse à droite */
.timeline__track::before {
  content: ""; position: absolute; left: 3.7%; right: 0; top: calc(12.76 * var(--tl)); height: calc(.52 * var(--tl));
  background: linear-gradient(90deg, rgba(255,255,255,0), #fff calc(10 * var(--tl)));
  border-radius: 999px;
}
.tl-item { position: relative; flex: none; width: calc(26.6 * var(--tl)); padding-top: calc(18.1 * var(--tl)); }
.tl-item__sticker {
  position: absolute; left: 50%; top: calc(6.35 * var(--tl)); width: calc(10 * var(--tl)); height: auto;
  translate: -50% -50%; z-index: 2; --spin: 12deg;
}
.tl-item__sticker--monstera { width: calc(8.3 * var(--tl)); transform: rotate(19.4deg); --spin: -12deg; }
.tl-item__sticker--fusee    { width: calc(8.3 * var(--tl)); transform: rotate(74.2deg); --spin: -10deg; }
.tl-item__dot {
  position: absolute; left: 50%; top: calc(12 * var(--tl)); width: calc(2 * var(--tl)); height: calc(2 * var(--tl));
  translate: -50% 0; border-radius: 50%; background: #fff; z-index: 1;
}
.tl-item__dot::after {       /* petit trait vertical vers la pastille de dates */
  content: ""; position: absolute; left: 50%; top: 100%; width: calc(.52 * var(--tl)); height: calc(3.3 * var(--tl));
  translate: -50% 0; background: #fff;
}
.tl-item__date {
  position: absolute; left: 50%; top: calc(17.1 * var(--tl)); translate: -50% 0; z-index: 3; white-space: nowrap;
  height: calc(2.9 * var(--tl)); padding: 0 calc(1.4 * var(--tl)); border-radius: 999px;
  display: inline-flex; align-items: center;
  background: #fff; color: var(--bordeaux); font-weight: 600; font-size: max(11px, calc(1.1 * var(--tl))); letter-spacing: .02em;
  box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.tl-card {
  position: relative; min-height: calc(17.6 * var(--tl));
  padding: calc(3.65 * var(--tl)) calc(2.9 * var(--tl)) calc(2 * var(--tl));
  border-radius: 3px; box-shadow: 10px 7px 27px rgba(0,0,0,.1);
  transform: rotate(var(--rot, 0deg));
}
.tl-card--blue   { background: var(--blue); }
.tl-card--yellow { background: var(--yellow); }
.tl-card--pink   { background: var(--pink); }
.tl-card__title { font-size: max(12px, calc(1.21 * var(--tl))); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.4; }
.tl-card__role  { font-size: max(11px, calc(1 * var(--tl))); font-weight: 500; letter-spacing: .02em; line-height: 1.4; margin-top: .25em; }
.tl-card__list  { margin-top: calc(1.5 * var(--tl)); font-size: max(10.5px, calc(.9 * var(--tl))); font-weight: 300; line-height: 1.5; letter-spacing: .02em; }
.tl-card__list li { position: relative; padding-left: 1.1em; }
.tl-card__list li::before { content: "•"; position: absolute; left: .15em; }
.tl-card--future { display: flex; align-items: center; justify-content: center; }
.tl-card__hand {
  font-family: var(--font-hand); font-size: max(16px, calc(1.72 * var(--tl))); line-height: 1.1; text-align: center;
  -webkit-text-stroke: .45px currentColor; transform: rotate(5deg); padding: 0 .3em;
}

/* ---- 3. Education ---- */
.pres-edu {
  position: relative; z-index: 1;
  margin-top: calc(-1 * clamp(90px, 10.4vw, 200px));     /* passe sous la déchirure orange */
  --tear-bottom: clamp(90px, 10.4vw, 200px);
  padding-bottom: var(--tear-bottom);
  color: var(--cream);
}
/* papier rayé : s'arrête au-dessus de la déchirure (le bas déchiré est dessiné par .tear--bottom sur le fond crème) */
.pres-edu::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: calc(var(--tear-bottom) - 2px);
  background-color: var(--bordeaux);
  background-image: repeating-linear-gradient(90deg,
      var(--bordeaux-2) 0 clamp(38px, 3.96vw, 76px),
      var(--bordeaux) clamp(38px, 3.96vw, 76px) clamp(71px, 7.4vw, 142px));
}
.pres-edu .tear--bottom { bottom: 0; height: var(--tear-bottom); z-index: 1; }
.pres-edu .tear--bottom::before { bottom: 0; height: 100%; background: var(--white);
  -webkit-mask-image: url("../assets/svg/tear-white-bottom.svg");  mask-image: url("../assets/svg/tear-white-bottom.svg"); }
.pres-edu .tear--bottom::after  { top: 0; height: 88%;
  background-color: var(--bordeaux);
  background-image: repeating-linear-gradient(90deg,
      var(--bordeaux-2) 0 clamp(38px, 3.96vw, 76px),
      var(--bordeaux) clamp(38px, 3.96vw, 76px) clamp(71px, 7.4vw, 142px));
  -webkit-mask-image: url("../assets/svg/tear-orange-bottom.svg"); mask-image: url("../assets/svg/tear-orange-bottom.svg"); }
.pres-edu__inner { position: relative; max-width: 1920px; margin: 0 auto; height: 93vw; }
.pres-edu__title { position: absolute; left: 60.5%; top: 17.5vw; font-size: clamp(50px, 6.35vw, 122px); line-height: .92; }

/* Cadres : image du cadre + zone crème (figcaption) positionnée en % du cadre ; textes en cqw (largeur du cadre) */
.edu-frame { position: absolute; margin: 0; container-type: inline-size; z-index: 2;
  transition: transform .45s cubic-bezier(.2,.8,.3,1.25); }
.edu-frame:hover { transform: rotate(var(--hspin, 3deg)); z-index: 5; }
.edu-frame--master { --hspin: 5deg; } .edu-frame--dnmade { --hspin: -6deg; } .edu-frame--bac { --hspin: 6deg; } .edu-frame--photo { --hspin: -5deg; }
.edu-frame__img { width: 100%; height: auto; display: block; }
.edu-frame__inner {
  position: absolute; background: var(--cream); color: var(--bordeaux);
  box-shadow: inset 0 4px 6px rgba(0,0,0,.25);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding-left: 4cqw; padding-right: 4cqw;
}
.edu-frame__title  { font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.3; }
.edu-frame__school { font-weight: 400; letter-spacing: .02em; line-height: 1.3; }
.edu-frame__sep    { display: block; width: 9.8cqw; height: .5cqw; background: var(--blue); border-radius: 2px; }
.edu-frame__year {
  position: absolute; bottom: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bordeaux); color: #fff; font-family: var(--font-hand); letter-spacing: .02em;
  border-radius: 8px 8px 0 0;
}
.edu-frame--master { left: 18.4%; top: 14.6vw; width: 30.6vw; }
.edu-frame--master .edu-frame__inner { left: 16.06%; top: 12.46%; width: 67.9%; height: 75.1%; padding: 19% 6cqw 0; }
.edu-frame--master .edu-frame__title  { font-size: 6.6cqw; }
.edu-frame--master .edu-frame__sep    { margin: 6.8cqw 0 5.5cqw; }
.edu-frame--master .edu-frame__school { font-size: 6.1cqw; }
.edu-frame--master .edu-frame__year   { left: 17.3%; width: 65.5%; height: 16.7%; font-size: 6.8cqw; }

.edu-frame--dnmade { left: 55.8%; top: 27.4vw; width: 34.4vw; }
.edu-frame--dnmade .edu-frame__inner { left: 15.28%; top: 18.86%; width: 69.44%; height: 62.5%; padding: 6.5% 8cqw 0; }
.edu-frame--dnmade .edu-frame__title  { font-size: 5.2cqw; }
.edu-frame--dnmade .edu-frame__school { font-size: 4.9cqw; margin-top: .8cqw; }
.edu-frame--dnmade .edu-frame__year   { left: 23.2%; width: 53.8%; height: 24.8%; font-size: 5.4cqw; }

.edu-frame--bac { left: 10%; top: 60.4vw; width: 31.3vw; }
.edu-frame--bac .edu-frame__inner { left: 14.65%; top: 15.43%; width: 70.7%; height: 69.1%; padding: 10% 4.5cqw 0; }
.edu-frame--bac .edu-frame__title  { font-size: 5.9cqw; }
.edu-frame--bac .edu-frame__school { font-size: 5.1cqw; margin-top: 3.6cqw; }
.edu-frame--bac .edu-frame__year   { left: 21.1%; width: 57.9%; height: 17%; font-size: 5.9cqw; }

.edu-frame--photo { left: 48.4%; top: 57vw; width: 24.4vw; }
.edu-frame__oval {
  position: absolute; left: 16.5%; top: 12.6%; width: 66.9%; height: 74.9%; border-radius: 50%; overflow: hidden;
  background: #1b2a5a;
}
.edu-frame__oval img { width: 100%; height: 100%; object-fit: cover; }
.edu-frame__oval::after {     /* léger reflet blanc (dégradé de la maquette) */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(155deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%);
}

.ed--etoile  { left: 5.3%;  top: 34.6vw; width: 3.4vw; --spin: 40deg; pointer-events: auto; }
.ed--etin-p1 { left: 11.5%; top: 23.2vw; width: 1.9vw; }
.ed--etin-g  { left: 86.6%; top: 71.25vw; width: 4.3vw; --spin: -40deg; pointer-events: auto; }
.ed--etin-p2 { left: 82.2%; top: 82vw; width: 1.9vw; }
.ed--traits  { left: 73%;   top: 59vw; width: 6vw; }

/* ---- 4. Software skills ---- */
.pres-soft { position: relative; z-index: 0; padding: 7vw 0 6.5vw; }
.pres-soft__inner { position: relative; max-width: 1920px; margin: 0 auto; }
.pres-soft__title { position: relative; z-index: 2; text-align: center; font-size: clamp(40px, 5vw, 96px); }
.pres-soft__laptop { position: relative; z-index: 2; width: 74%; margin: 3.5vw auto 0; }
.pres-soft__laptop > img:first-child { width: 100%; height: auto; }
.sf--curseur { left: 77.6%; top: 42.6%; width: 16.6%; transform: rotate(-13.5deg); --spin: 12deg; pointer-events: auto; z-index: 3; }
.pres-bgstar--3 { left: 73.6%; top: -3vw;   width: 40vw; transform: rotate(22.7deg); }
.pres-bgstar--4 { left: -18%;  top: 53.9vw; width: 40vw; transform: rotate(22.7deg); }

/* ---- 5. Languages ---- */
.pres-lang {
  position: relative; z-index: 2;
  --tear-top: clamp(100px, 12vw, 230px);
  --grid: clamp(22px, 2.3vw, 44px);
  color: var(--bordeaux);
  padding-top: var(--tear-top);
}
/* papier à carreaux : bleu + lignes blanches */
.pres-lang::before, .page-presentation .site-footer, .pres-lang .tear--top::after {
  background-color: var(--blue);
  background-image:
    linear-gradient(rgba(255,255,255,.5) 2px, transparent 2px),
    linear-gradient(90deg, rgba(255,255,255,.5) 2px, transparent 2px);
  background-size: var(--grid) var(--grid);
}
.pres-lang::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--tear-top) - 2px); bottom: 0; }
.page-presentation .site-footer { --grid: clamp(22px, 2.3vw, 44px); }
.pres-lang .tear--top { top: 0; height: var(--tear-top); }
.pres-lang .tear--top::before { top: 0; height: 100%; background: var(--white);
  -webkit-mask-image: url("../assets/svg/tear-white-top.svg");  mask-image: url("../assets/svg/tear-white-top.svg"); }
.pres-lang .tear--top::after  { top: 5%; height: 100%;
  -webkit-mask-image: url("../assets/svg/tear-orange-top.svg"); mask-image: url("../assets/svg/tear-orange-top.svg"); }

.pres-lang__inner { position: relative; z-index: 2; max-width: 1920px; margin: 0 auto; height: calc(49vw - var(--tear-top)); }
.pres-lang__title { position: absolute; left: 66.9%; top: calc(12vw - var(--tear-top)); font-size: clamp(40px, 5vw, 96px); }

.langs { position: absolute; left: 0; right: 0; top: calc(21vw - var(--tear-top)); }
.lang { position: absolute; width: 24vw; translate: -50% 0; text-align: center; }
.lang--fr { left: 24.35%; }
.lang--en { left: 50.4%; }
.lang--it { left: 75%; }
.lang__visual { position: relative; width: 18.2vw; margin: 0 auto; }
.lang__flag { width: 100%; height: auto; display: block; }
.lang__flag { transition: transform .45s cubic-bezier(.2,.8,.3,1.25); }
.lang--fr { --tilt: -4.7deg; } .lang--en { --tilt: 3deg; } .lang--it { --tilt: 7.3deg; }
.lang__sticker { position: absolute; height: auto; z-index: 2; pointer-events: auto;
  opacity: 0; scale: .5; transition: opacity .4s ease-out, scale .5s cubic-bezier(.2,.8,.3,1.3), rotate .45s cubic-bezier(.2,.8,.3,1.25); }
.lang__sticker:nth-of-type(2) { transition-delay: .08s, .08s, 0s; }
/* survol : le drapeau s'incline, les stickers apparaissent (sur écran tactile, tout est visible d'emblée) */
.lang:hover .lang__flag, .lang:focus-within .lang__flag { transform: rotate(var(--tilt)); }
.lang:hover .lang__sticker, .lang:focus-within .lang__sticker { opacity: 1; scale: 1; }
/* écran tactile : pas de survol, la classe .is-on est posée par main.js quand le drapeau arrive au centre de l'écran */
.lang.is-on .lang__flag { transform: rotate(var(--tilt)); }
.lang.is-on .lang__sticker { opacity: 1; scale: 1; }
.lang__sticker--eiffel    { left: -19.4%; top: -20.8%; width: 50%;   transform: rotate(21.3deg); --spin: -10deg; }
.lang__sticker--croissant { left: 68.6%;  top: 50.1%;  width: 47.3%; transform: rotate(-2.9deg); --spin: 12deg; }
.lang__sticker--tasse     { left: 57.1%;  top: -28.8%; width: 53.4%; --spin: -10deg; }
.lang__sticker--cabine    { left: -11.4%; top: 39.6%;  width: 42.9%; --spin: 10deg; }
.lang__sticker--citron    { left: -9%;    top: -24.3%; width: 41.3%; transform: rotate(7.3deg); --spin: -12deg; }
.lang__sticker--pizza     { left: 65.9%;  top: 55.2%;  width: 50%;   transform: rotate(6.6deg); --spin: 14deg; }
.lang__name  { margin-top: 3.3vw; font-size: clamp(16px, 2vw, 38px); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; line-height: 1.4; }
.lang__level { font-size: clamp(15px, 1.93vw, 37px); font-weight: 400; letter-spacing: .02em; line-height: 1.4; }

/* ---- Responsive présentation ---- */
@media (max-width: 1279px) {
  .pres-hero__text { width: clamp(300px, 26vw, 426px); left: 62%; }
  .pres-collage { width: 55%; }        /* le coin de la bande de photos reste à gauche du texte */
}

/* Tablette et mobile : texte au-dessus, collage en dessous (maquette téléphone) */
@media (max-width: 1023px) {
  .pres-hero__inner { min-height: 0; padding: 2vw 0 0; }
  .pres-hero__text { position: relative; left: auto; top: auto; width: auto; max-width: 560px; padding: 0 9.2%; }
  .pres-hero__title { font-size: clamp(34px, 9.6vw, 56px); margin-bottom: .55em; }
  .pres-hero__body { font-size: clamp(13px, 1.7vw, 16px); }
  .pres-hero__btn { margin-top: 5vw; font-size: clamp(12px, 1.6vw, 15px); }
  .pres-collage { position: relative; left: -12vw; top: auto; width: 78vw; margin-top: 4vw; }
  .pres-hero { margin-bottom: -14vw; }           /* le collage chevauche la déchirure orange */
  .pr--pola2    { left: 72vw; bottom: -22vw; width: 24vw; }
  .pr--fraise   { left: 69vw; bottom: -30vw; width: 14vw; }
  .pres-bgstar--1 { width: 36vw; }
  .pres-bgstar--2 { top: 40vw; width: 36vw; }

  .pres-exp { --tl: 1.4vw; --tear-top: clamp(70px, 12vw, 230px); padding-top: calc(var(--tear-top) + 6vw); }
  .pres-exp__title { position: static; text-align: center; margin: 0 0 4vw; font-size: clamp(34px, 5vw, 60px); }
  .timeline__track { padding-left: 8%; padding-right: 10vw; }
}

@media (max-width: 767px) {
  .pres-hero__inner { padding-top: 3vw; }
  .pres-collage { left: -17vw; width: 102vw; margin-top: 10vw; }
  .pc--stack, .pc--cover { top: 8.5%; }   /* pochette un peu plus basse sur téléphone */
  .pc--papier { top: 58%; }
  .pc--strip  { top: 47%; }
  .pres-hero { margin-bottom: -18vw; }
  .pr--pola2    { left: 74vw;   bottom: -26vw; width: 31vw; }
  .pr--fraise   { left: 74.5vw; bottom: -32vw; width: 14vw; }
  .pres-bgstar--1 { left: -16%; top: -5vw; width: 35vw; }
  .pres-bgstar--2 { left: 77%; top: 50vw; width: 35vw; }

  .pres-exp { --tl: 2.83vw; --tear-top: 14vw; --tear-bottom: 12vw; padding: calc(var(--tear-top) + 14vw) 0 calc(var(--tear-bottom) + 14vw); }
  .pres-exp__title { font-size: clamp(30px, 10.4vw, 40px); margin-bottom: 1vw; }
  .timeline__track { padding-left: 11%; padding-right: 12.4vw; }   /* en fin de frise, la carte « Future » est centrée */
  .tl-card { box-shadow: 6px 4px 16px rgba(0,0,0,.1); }

  .pres-edu { margin-top: -12vw; --tear-bottom: 12vw; }
  .pres-edu__inner { height: auto; padding: 27vw 0 6vw; display: flex; flex-direction: column; align-items: center; gap: 8.5vw; }
  .pres-edu__title { position: relative; left: auto; top: auto; font-size: clamp(30px, 10.4vw, 40px); margin-bottom: 2vw; }
  .edu-frame { position: relative; left: auto; top: auto; }
  .edu-frame--master { width: 71vw; }
  .edu-frame--dnmade { width: 80vw; }
  .edu-frame--bac    { width: 73vw; }
  .edu-frame--photo  { width: 57vw; }
  .ed--etoile  { left: 11.5%; top: 24vw;  width: 7.2vw; }
  .ed--etin-p1 { left: 21%;   top: 12.5vw; width: 3.8vw; }
  .ed--etin-g  { left: 13.6%; top: auto; bottom: 8vw;  width: 10.5vw; }
  .ed--etin-p2 { left: 77.7%; top: auto; bottom: 14vw; width: 4.6vw; }
  .ed--traits  { left: 72%;   top: auto; bottom: 60vw; width: 16.7vw; }

  .pres-soft { padding: 10vw 0 10vw; }
  .pres-soft__title { font-size: clamp(30px, 10.4vw, 40px); max-width: 60vw; margin: 0 auto; line-height: 1; }
  .pres-soft__laptop { width: 95.4%; margin-top: 12vw; }
  .sf--curseur { left: 78%; top: 39%; width: 20%; }
  .pres-bgstar--3 { left: 72%; top: 0; width: 40vw; }
  .pres-bgstar--4 { left: -20%; top: 70vw; width: 40vw; }

  .pres-lang { --tear-top: 14vw; --grid: 24px; }
  .page-presentation .site-footer { --grid: 24px; }
  .pres-lang__inner { height: auto; padding: 4vw 0 24vw; }
  .pres-lang__title { position: static; text-align: center; font-size: clamp(30px, 10.4vw, 40px); margin-bottom: 16vw; }
  .langs { position: static; display: flex; flex-direction: column; align-items: center; gap: 15vw; }
  .lang { position: static; translate: none; width: 70vw; }
  .lang__visual { width: 48.7vw; }
  .lang__name  { margin-top: 6vw; font-size: clamp(16px, 5vw, 20px); }
  .lang__level { font-size: clamp(15px, 4.9vw, 19px); }
}

/* ---- Animations de la page Présentation ---- */
/* Hello : titre tapé lettre par lettre (js), curseur clignotant pendant la frappe */
.pres-hero__title.is-typing::after { content: ""; display: inline-block; width: .06em; height: .85em; margin-left: .08em; background: currentColor; vertical-align: -.05em; animation: caret .7s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
/* texte et bouton : arrivent en fondu, l'un après l'autre */
.pres-hero__body, .pres-hero__btn { animation: rise .7s ease-out both; }
.pres-hero__body:nth-of-type(1) { animation-delay: .9s; } .pres-hero__body:nth-of-type(2) { animation-delay: 1.1s; } .pres-hero__body:nth-of-type(3) { animation-delay: 1.3s; }
.pres-hero__btn { animation-delay: 1.5s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* collage et polaroid de droite : se posent un à un au chargement (comme le hero de l'accueil) */
.pres-collage .pc, .pr--pola2, .pr--fraise { animation: pop .6s cubic-bezier(.2,.8,.3,1.2) both; animation-delay: calc(var(--i, 0) * .07s + .2s); }
.pr--pola2 { --i: 13; } .pr--fraise { --i: 15; }
/* sections suivantes : les enfants d'un bloc .cascade apparaissent un à un quand le bloc entre à l'écran */
.cascade > * { animation: pop .6s cubic-bezier(.2,.8,.3,1.2) both paused; animation-delay: calc(var(--i, 0) * .1s); }
.cascade.is-visible > * { animation-play-state: running; }
.pres-edu__inner.cascade > .deco { animation-delay: calc(var(--i, 0) * .06s + .3s); }
.pres-soft__laptop.reveal { transition-delay: .15s; }
@media (prefers-reduced-motion: reduce) {
  .cascade > *, .pres-collage .pc, .pr--pola2, .pr--fraise, .pres-hero__body, .pres-hero__btn { animation: none; opacity: 1; }
  .lang .lang__flag { transform: rotate(var(--tilt)); } .lang .lang__sticker { opacity: 1; scale: 1; }
}