/* Portfolio — mise en page, sur la DA Pupitre (pupitre.css chargé avant).
   Mobile d'abord : tout est pensé pour 375 px, puis s'élargit. */

/* Polices hébergées dans le site : la CSP refuse Google Fonts. */
@font-face {
  font-family: "Sofia Sans Extra Condensed";
  font-style: normal;
  font-weight: 800 900;
  font-display: swap;
  src: url("fonts/sofia-sans-extra-condensed-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/rubik-latin.woff2") format("woff2");
}

html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
main, .pied { box-sizing: border-box; width: 100%; max-width: 1240px; margin: 0 auto; padding-inline: var(--espace-4); }
kbd { padding: 0 6px; border: 2px solid currentColor; border-radius: 6px; font: 700 12px/18px var(--font-texte); }

.evitement { position: absolute; left: -999px; }
.evitement:focus { left: var(--espace-4); top: var(--espace-4); z-index: 10; padding: 8px 16px; border-radius: var(--rayon-pilule); background: var(--rouge); color: var(--sur-rouge); }

/* Barre */
.barre { max-width: 1240px; margin: 0 auto; box-sizing: border-box; gap: var(--espace-2) var(--espace-4); }
.barre__role { color: var(--encre-2); font-weight: 600; }
.barre nav { gap: var(--espace-4); }

/* --- Accueil -------------------------------------------------------------------- */
.accueil { display: grid; gap: var(--espace-3); padding-block: var(--espace-2) var(--espace-8); }
.accueil__titre { margin: 0; font: 900 clamp(68px, 21vw, 220px)/.8 var(--font-affiche); letter-spacing: -.01em; text-transform: uppercase; text-wrap: balance; }
.accueil__titre em { font-style: normal; color: var(--rouge-texte); }

/* La scène : l'avatar au centre, l'objet du projet qui surgit, la bulle */
.scene { position: relative; display: grid; justify-items: center; gap: var(--espace-4); margin-top: var(--espace-4); }
.scene::before { content: ""; position: absolute; z-index: -1; top: -4%; left: 50%; width: min(72vw, 420px); aspect-ratio: 1; border-radius: 50%; background: var(--famille); transform: translateX(-50%); transition: background-color 400ms; }
.scene__avatar { width: min(58vw, 340px); cursor: pointer; aspect-ratio: 1; animation: flotter 5s ease-in-out infinite; transform-origin: 50% 90%; }
.scene__avatar svg { display: block; width: 100%; height: 100%; overflow: visible; }
.scene__avatar .pupille { transition: transform 160ms ease-out; }
.scene__avatar .oeil { transform-box: fill-box; transform-origin: center; animation: cligner 5.5s infinite; }
.scene__avatar.saute { animation: sauter 620ms cubic-bezier(.3, 1.6, .5, 1); }
.scene__objet { position: absolute; z-index: 1; top: 0; right: 0; width: min(30vw, 150px); height: auto; filter: drop-shadow(0 10px 14px #50312F33); }
.scene__objet.surgit { animation: surgir 700ms cubic-bezier(.2, 1.5, .4, 1) both; }

.bulle { position: relative; box-sizing: border-box; display: grid; gap: var(--espace-3); justify-items: start; width: 100%; max-width: 640px; margin: 0; padding: var(--espace-6) 22px 22px; border-radius: var(--rayon-l); background: var(--blanc); box-shadow: var(--ombre-flottant); }
.bulle::before { content: ""; position: absolute; top: -14px; left: 50%; width: 32px; height: 32px; border-radius: 6px; background: var(--blanc); transform: translateX(-50%) rotate(45deg); }
.bulle__etiquette { position: relative; }
.bulle__phrase { position: relative; margin: 0; min-height: 3lh; font: 600 20px/27px var(--font-texte); text-wrap: pretty; }
.bulle__phrase::before { content: "« "; color: var(--rouge-texte); }
.bulle__phrase::after { content: " »"; color: var(--rouge-texte); }

/* Le dé, à côté du lien */
.bulle__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--espace-3); width: 100%; }
.de { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: var(--espace-2); height: 58px; padding: 0 22px 0 6px; border: var(--trait) solid var(--encre); border-radius: var(--rayon-pilule); background: var(--citron); color: var(--sur-citron); font: 900 26px/1 var(--font-affiche); text-transform: uppercase; cursor: pointer; box-shadow: 0 5px 0 var(--encre); transition: transform 120ms, box-shadow 120ms; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.de img { width: 50px; height: 50px; }
.de:hover img { animation: hesiter 600ms ease-in-out; }
.de:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--encre); }
.de.roule img { animation: rouler 640ms cubic-bezier(.3, .7, .3, 1); }
.lancer__aide { margin: 0; color: var(--encre-2); font-size: 14px; text-align: center; }

@keyframes flotter { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-10px) rotate(2deg); } }
@keyframes cligner { 0%, 94%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.08); } }
@keyframes sauter { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(6px) scale(1.08, .9); } 55% { transform: translateY(-34px) scale(.95, 1.06); } 100% { transform: translateY(0) scale(1); } }
@keyframes surgir { 0% { transform: translate(-60%, 50%) scale(.2) rotate(-40deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes rouler { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(400deg) scale(1.3); } 100% { transform: rotate(720deg) scale(1); } }
@keyframes hesiter { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 70% { transform: rotate(10deg); } }

/* --- Chiffres ------------------------------------------------------------------- */
.chiffres .pp-mesures { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.chiffres .pp-mesure { padding: var(--espace-6) 20px 20px; }
.chiffres .pp-mesure__valeur { font-size: clamp(64px, 16vw, 120px); }

/* --- Réalisations --------------------------------------------------------------- */
.realisations { display: grid; gap: var(--espace-6); padding-block: var(--espace-16) var(--espace-8); scroll-margin-top: var(--espace-4); }
.realisations__entete { display: grid; gap: var(--espace-4); }
.realisations__titre { font-size: clamp(56px, 14vw, 120px); }
.filtres { justify-self: start; flex-wrap: nowrap; max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; }
.filtres button { flex: none; }
.grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--espace-3); }
.carte { -webkit-appearance: none; appearance: none; border: 0; font: inherit; text-align: left; cursor: pointer; min-height: 100%; }
.carte img { max-width: 120px; }
.carte .pp-tuile__nom { font-size: 26px; }
.carte__resume { margin: 0; color: var(--encre-2); font-size: 13px; line-height: 18px; }
.carte[hidden] { display: none; }
.carte.apparait { animation: apparaitre 360ms ease-out both; }
@keyframes apparaitre { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }

/* --- Contact et pied ------------------------------------------------------------ */
.contact[hidden] { display: none; }
.contact { display: grid; gap: var(--espace-6); padding: var(--espace-8) 22px; border-radius: var(--rayon-l); background: var(--citron); color: var(--sur-citron); }
.contact .pp-affiche { font-size: clamp(48px, 12vw, 104px); }
.contact__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); }
.contact .pp-touche:not(.pp-touche--primaire) { border-color: var(--sur-citron); color: var(--sur-citron); }
.pied { padding-top: var(--espace-8); overflow: hidden; }
.pied__ligne { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--espace-2); margin: 0; color: var(--encre-2); font-size: 14px; }
.pied .pp-geant { margin-top: var(--espace-6); margin-bottom: -2%; }

/* --- Fiche projet : un panneau qui monte du bas sur téléphone ------------------ */
.fiche { box-sizing: border-box; width: 100%; max-width: 100%; max-height: 92dvh; margin: auto 0 0; padding: 0; border: 0; border-radius: var(--rayon-l) var(--rayon-l) 0 0; background: var(--fond); color: var(--encre); overscroll-behavior: contain; }
.fiche::backdrop { background: #1E1312aa; backdrop-filter: blur(3px); }
.fiche[open] { animation: monter 320ms cubic-bezier(.2, .9, .3, 1); }
.fiche__cadre { display: grid; gap: var(--espace-6); padding: var(--espace-6) 20px calc(var(--espace-8) + env(safe-area-inset-bottom)); }
.fiche__fermer { -webkit-appearance: none; appearance: none; position: sticky; top: 0; z-index: 1; justify-self: end; width: 44px; height: 44px; margin-bottom: -44px; border: var(--trait) solid var(--encre); border-radius: 50%; background: var(--fond); color: var(--encre); font: 600 26px/1 var(--font-texte); cursor: pointer; }
.fiche__tete { display: grid; gap: var(--espace-3); justify-items: start; padding: var(--espace-6) 20px; border-radius: var(--rayon-l); background: var(--famille); }
.fiche__objet { justify-self: center; width: 180px; height: auto; }
.fiche__titre { margin: 0; font: 900 clamp(56px, 15vw, 96px)/.85 var(--font-affiche); text-transform: uppercase; overflow-wrap: anywhere; }
.fiche__resume { margin: 0; font: 600 18px/26px var(--font-texte); }
.fiche__image { width: 100%; height: auto; border-radius: var(--rayon-m); }
.fiche__corps { max-width: var(--largeur-texte); font-size: 17px; line-height: 27px; }
.fiche__corps > :first-child { margin-top: 0; }
.fiche__corps ul { padding: 0; list-style: none; display: grid; gap: var(--espace-2); }
.fiche__corps li { position: relative; padding-left: 28px; }
.fiche__corps li::before { content: "↳"; position: absolute; left: 4px; color: var(--rouge-texte); font-weight: 700; }
.fiche__corps h3 { margin: var(--espace-6) 0 0; font: 900 32px/.9 var(--font-affiche); text-transform: uppercase; }
.fiche__corps code { padding: 1px 6px; border-radius: 6px; background: var(--blanc); font: 500 14px/20px var(--font-code); }
.fiche__techno { display: flex; flex-wrap: wrap; gap: var(--espace-2); margin: 0; padding: 0; list-style: none; }
.fiche__actions { display: flex; flex-wrap: wrap; gap: var(--espace-3); align-items: center; }
.fiche__actions > span { display: contents; }
@keyframes monter { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }

/* --- Plus large ----------------------------------------------------------------- */
@media (min-width: 720px) {
  main, .pied { padding-inline: var(--espace-8); }
  .accueil { padding-top: var(--espace-6); }
  .accueil__titre { font-size: min(11.2vw, 168px); }
  .scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--espace-8); }
  .scene::before { left: 25%; width: min(42vw, 480px); top: 50%; transform: translate(-50%, -50%); }
  .scene__avatar { width: min(38vw, 420px); }
  .scene__objet { top: -2%; right: auto; left: calc(25% + min(10vw, 130px)); width: min(14vw, 170px); }
  .bulle { padding: var(--espace-8); }
  .bulle::before { top: 50%; left: -14px; transform: translateY(-50%) rotate(45deg); }
  .bulle__phrase { font-size: 28px; line-height: 36px; }
  .lancer__aide { text-align: right; }
  .de { height: 66px; font-size: 30px; }
  .de img { width: 58px; height: 58px; }
  .grille { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--espace-4); }
  .carte img { max-width: 160px; }
  .carte .pp-tuile__nom { font-size: 34px; }
  .carte__resume { font-size: 14px; line-height: 20px; }
  .realisations__entete { grid-template-columns: 1fr auto; align-items: end; }
  .contact { padding: var(--espace-16) var(--espace-8); }
  .fiche { width: min(760px, calc(100% - 48px)); max-height: 90dvh; margin: auto; border-radius: var(--rayon-l); }
  .fiche__cadre { padding: var(--espace-8); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}