/* =============================================================
   main.css — styles communs à toutes les pages
   -------------------------------------------------------------
   Sommaire
   00. Polices (hébergées sur le site)
   01. Variables (couleurs, typo, espacements)
   02. Base & reset
   03. Typographie
   04. Mise en page & utilitaires
   05. Boutons & liens
   06. Petits composants (surtitre, pastilles, pilule)
   07. En-tête & menu mobile
   08. Carte projet
   09. Bloc profil
   10. Bloc contact
   11. Pied de page
   12. Bouton retour en haut
   13. Infobulle (popover)
   14. Curseur personnalisé
   15. Animations (apparition, scintillement)
   16. Mouvement réduit
   17. Mode repérage du contenu provisoire (?provisoire)
   ============================================================= */


/* -------------------------------------------------------------
   00. Polices — hébergées sur le site (assets/fonts/), licence SIL OFL
   ------------------------------------------------------------- */
@font-face {
  font-family: "Gloock";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/gloock-400.woff2") format("woff2");
}

/* Police variable : un seul fichier pour les graisses 400 à 600 */
@font-face {
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/fonts/work-sans-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Work Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/work-sans-italic-400.woff2") format("woff2");
}


/* -------------------------------------------------------------
   01. Variables
   ------------------------------------------------------------- */
:root {
  /* Couleurs principales */
  --c-foret: #24472b;          /* vert forêt : boutons, accents */
  --c-foret-fonce: #1a3520;    /* survol des boutons */
  --c-encre: #0e1a12;          /* titres */
  --c-texte: #2b3a2f;          /* texte courant */
  --c-texte-doux: #4a5c4e;     /* texte secondaire (contraste AA) */
  --c-sauge: #4f6e52;          /* surtitres */
  --c-fond: #f6f6f0;           /* fond de page */
  --c-blanc: #ffffff;
  --c-ligne: rgba(36, 71, 43, 0.14);
  --c-ligne-forte: rgba(36, 71, 43, 0.28);

  /* Pastels (dégradés) */
  --c-pastel-vert: #dff6d3;
  --c-pastel-jaune: #f8f1b8;
  --c-pastel-bleu: #d7eaf6;
  --c-pastel-sauge: #e8efe1;
  --c-dispo: #6dbf5e;          /* pastille « disponible » */
  --c-erreur: #b3261e;         /* messages d'erreur des formulaires */

  /* Dégradé personnalisé (fichier fourni) */
  --img-degrade: url("/assets/img/ui/degrade.webp");
  --degrade-texte: linear-gradient(100deg, #e4f7c9 0%, #f8f1b8 45%, #d7eaf6 100%);

  /* Typographie */
  --f-titre: "Gloock", "Times New Roman", serif;
  --f-texte: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --fs-lg: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --fs-h3: clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --fs-h2: clamp(2.375rem, 1.6rem + 3.4vw, 4.5rem);
  --fs-h1: clamp(2.85rem, 1.6rem + 5.2vw, 6.25rem);

  /* Espacements */
  --gouttiere: clamp(1.25rem, 4vw, 3rem);
  --largeur-max: 1240px;
  --section-y: clamp(4.5rem, 10vw, 8.5rem);

  /* Rayons & ombres */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: clamp(28px, 4vw, 44px);
  --ombre-douce: 0 1px 2px rgba(14, 26, 18, 0.04), 0 18px 40px -22px rgba(20, 45, 26, 0.28);
  --ombre-forte: 0 2px 4px rgba(14, 26, 18, 0.05), 0 30px 60px -28px rgba(20, 45, 26, 0.4);

  /* Animations */
  --ease: cubic-bezier(0.22, 0.68, 0.2, 1);
  --duree: 0.35s;

  /* En-tête */
  --header-h: 60px;
}

@media (min-width: 900px) {
  :root { --header-h: 68px; }
}


/* -------------------------------------------------------------
   02. Base & reset
   ------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  color-scheme: light;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  min-height: 100vh;
  font-family: var(--f-texte);
  font-size: var(--fs-base);
  line-height: 1.5;
  color: var(--c-texte);
  background-color: var(--c-fond);
  /* halos pastel très doux en arrière-plan */
  background-image:
    radial-gradient(60rem 40rem at -10% 38%, rgba(223, 246, 211, 0.65), transparent 70%),
    radial-gradient(50rem 36rem at 110% 62%, rgba(215, 234, 246, 0.6), transparent 70%),
    radial-gradient(46rem 30rem at 20% 88%, rgba(248, 241, 184, 0.4), transparent 70%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img,
svg,
video { display: block; max-width: 100%; }

img { height: auto; }

a { color: inherit; text-decoration: none; }

button,
input,
textarea,
select { font: inherit; color: inherit; }

button { cursor: pointer; background: none; border: 0; padding: 0; }

ul[role="list"],
ol[role="list"] { list-style: none; padding: 0; }

/* Focus clavier bien visible */
:focus-visible {
  outline: 2px solid var(--c-foret);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--c-pastel-vert); color: var(--c-encre); }

/* Le contenu ne passe pas sous l'en-tête fixe */
main { padding-top: var(--header-h); }


/* -------------------------------------------------------------
   03. Typographie
   ------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--f-titre);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.015em;
  color: var(--c-encre);
  text-wrap: balance;
}

h3 { font-size: var(--fs-h3); line-height: 1.1; }

p { text-wrap: pretty; }

/* Mot mis en valeur dans un titre */
.accent { color: var(--c-foret); }

.titre-section { font-size: var(--fs-h2); }

/* Titre principal des pages intérieures (profil, projets, contact…) */
.titre-page {
  font-size: clamp(2.6rem, 1.7rem + 3.6vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
}

.chapo {
  font-size: var(--fs-lg);
  color: var(--c-texte-doux);
  max-width: 42ch;
}


/* -------------------------------------------------------------
   04. Mise en page & utilitaires
   ------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--largeur-max) + 2 * var(--gouttiere));
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}

.section { padding-block: var(--section-y); }

/* Haut des pages intérieures : dégradé qui passe sous l'en-tête fixe */
.intro-page {
  position: relative;
  isolation: isolate;
  overflow: clip; /* « clip » et non « hidden » : laisse fonctionner position: sticky */
  margin-top: calc(-1 * var(--header-h));
  padding: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(4rem, 8vw, 6rem);
}

.intro-page::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(246, 246, 240, 0.15) 0%, rgba(246, 246, 240, 0.3) 60%, var(--c-fond) 100%),
    var(--img-degrade) 30% 40% / cover;
}

/* Deux sections qui se suivent : on évite le double espacement */
.section + .section { padding-top: 0; }

/* Titre de section sur toute la largeur, sous-titre en dessous */
.section-entete {
  display: grid;
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.75rem;
}

/* Masqué visuellement, lu par les lecteurs d'écran */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Lien d'évitement (visible au premier Tab) */
.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  background: var(--c-foret);
  color: var(--c-blanc);
  font-weight: 500;
  transform: translateY(-150%);
  transition: transform var(--duree) var(--ease);
}

.skip-link:focus { transform: none; }

/* Icônes du sprite */
.icone {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
}

.icone--etoile { width: auto; height: 1.4em; aspect-ratio: 109 / 146; }


/* -------------------------------------------------------------
   05. Boutons & liens
   ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6em;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  transition:
    background-color var(--duree) var(--ease),
    color var(--duree) var(--ease),
    border-color var(--duree) var(--ease),
    transform var(--duree) var(--ease),
    box-shadow var(--duree) var(--ease);
}

.btn .icone { transition: transform var(--duree) var(--ease); }

/* Plein vert forêt */
.btn--primaire {
  background: var(--c-foret);
  color: var(--c-blanc);
  box-shadow: 0 10px 24px -14px rgba(36, 71, 43, 0.9);
}

.btn--primaire:hover {
  background: var(--c-foret-fonce);
  transform: translateY(-2px);
  box-shadow: 0 16px 28px -14px rgba(36, 71, 43, 0.9);
}

/* Contour */
.btn--contour {
  border-color: var(--c-ligne-forte);
  color: var(--c-foret);
  background: rgba(255, 255, 255, 0.45);
}

.btn--contour:hover {
  border-color: var(--c-foret);
  background: var(--c-blanc);
}

/* Clair (sur fond vert) */
.btn--clair {
  background: var(--c-fond);
  color: var(--c-foret);
}

.btn--clair:hover { background: var(--c-blanc); transform: translateY(-2px); }

/* Lien texte avec flèche */
.btn--lien {
  min-height: 44px;
  padding-inline: 0.25rem;
  color: var(--c-foret);
  background:
    linear-gradient(currentColor, currentColor) left calc(100% - 0.55rem) / 0 1px no-repeat;
  border-radius: 0;
}

.btn--lien:hover { background-size: calc(100% - 1.6em) 1px; }

.btn--lien:hover .icone { transform: translate(2px, -2px); }

.btn--lien.btn--sur-fonce { color: var(--c-fond); }

.btn:hover .icone--bas { transform: translateY(2px); }


/* -------------------------------------------------------------
   06. Petits composants
   ------------------------------------------------------------- */

/* Surtitre avec étoile (« ✦ PROJETS ») */
.surtitre {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-sauge);
}

.surtitre .icone--etoile { height: 1.9em; color: var(--c-foret); }

/* Pilule d'information (hero, badges) */
.pilule {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 1rem 0.45rem 0.8rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-foret);
}

/* Point « disponible » qui pulse doucement */
.point-dispo {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c-dispo);
  flex-shrink: 0;
}

.point-dispo::after {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 2px solid var(--c-dispo);
  opacity: 0;
  animation: pulse 2.4s var(--ease) infinite;
}

/* Pastilles de compétences */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.tag {
  display: inline-block;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  border: 1px solid var(--c-ligne-forte);
  background: rgba(255, 255, 255, 0.65);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--c-foret);
}

/* Variante pleine (compétences) */
.tag--plein {
  border-color: transparent;
  background: var(--c-pastel-vert);
}

/* Étoiles décoratives */
.etoile-deco {
  position: absolute;
  width: auto;
  aspect-ratio: 109 / 146;
  color: var(--c-foret);
  pointer-events: none;
}


/* -------------------------------------------------------------
   07. En-tête & menu mobile
   ------------------------------------------------------------- */
.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
}

/* Fond flouté sur un pseudo-élément : le menu mobile (position fixed)
   reste ainsi calé sur l'écran et non sur l'en-tête. */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(246, 246, 240, 0.78);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid var(--c-ligne);
  opacity: 0;
  transition: opacity var(--duree) var(--ease);
}

.header.is-scrolled::before,
.menu-ouvert .header::before { opacity: 1; }

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  gap: 1.5rem;
}

/* Logo */
.logo {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--f-titre);
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-encre);
}

.logo .icone--etoile {
  height: 1.35em;
  color: var(--c-foret);
  transition: transform 0.6s var(--ease);
}

.logo:hover .icone--etoile { transform: rotate(90deg) scale(1.08); }

/* En-tête : étoile seule, zone cliquable d'au moins 44 px */
.logo--etoile {
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-left: -0.5rem;
}

.logo--etoile .icone--etoile { height: 1.8rem; }

/* Bouton burger (mobile) */
.burger {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin-right: -0.5rem;
  border-radius: 50%;
}

.burger__lignes {
  position: relative;
  width: 22px;
  height: 12px;
}

.burger__lignes::before,
.burger__lignes::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--c-encre);
  transition: transform var(--duree) var(--ease), top var(--duree) var(--ease);
}

.burger__lignes::before { top: 0; }
.burger__lignes::after { top: calc(100% - 1.5px); }

.menu-ouvert .burger__lignes::before { top: calc(50% - 0.75px); transform: rotate(45deg); }
.menu-ouvert .burger__lignes::after { top: calc(50% - 0.75px); transform: rotate(-45deg); }

/* Panneau de navigation : plein écran sur mobile, contenu en haut */
.nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 2rem;
  padding: calc(var(--header-h) + 1.5rem) var(--gouttiere) 2rem;
  background:
    linear-gradient(rgba(246, 246, 240, 0.35), rgba(246, 246, 240, 0.75)),
    var(--img-degrade) 30% 50% / cover;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}

.menu-ouvert .nav {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.4s var(--ease), visibility 0s;
}

.menu-ouvert body { overflow: hidden; }

.nav__liste {
  display: flex;
  flex-direction: column;
}

.nav__lien {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding-block: 0.25rem;
  font-family: var(--f-titre);
  font-size: clamp(2.1rem, 9vw, 2.75rem);
  line-height: 1.1;
  color: var(--c-encre);
}

/* Étoile devant le lien de la page active */
.nav__lien::before {
  content: "";
  width: 0.45em;
  aspect-ratio: 109 / 146;
  background: currentColor;
  -webkit-mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
  mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
  display: none;
}

.nav__lien[aria-current] { color: var(--c-foret); }
.nav__lien[aria-current]::before { display: block; }

.nav__cv { align-self: center; }

/* Infos de contact en bas du menu mobile (masquées sur ordinateur) */
.nav__infos {
  display: grid;
  justify-items: end; /* à droite : plus facile à atteindre avec le pouce */
  gap: 0.35rem;
  margin-top: auto;
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-ligne-forte);
  font-size: var(--fs-sm);
  text-align: right;
}

.nav__infos a {
  justify-self: end;
  padding-block: 0.3rem;
  color: var(--c-foret);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.nav__dispo {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.35rem;
  font-weight: 600;
  color: var(--c-encre);
}

/* Menu mobile : liens séparés par un filet, serpent en décor */
@media (max-width: 899.98px) {
  .nav__liste li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    border-bottom: 1px solid var(--c-ligne);
  }

  /* Toute la ligne est cliquable, pas seulement le mot */
  .nav__lien {
    flex: 1;
    padding-block: 0.8rem;
  }

  .nav::before {
    content: "";
    position: absolute;
    z-index: -1;
    right: -18%;
    bottom: -8%;
    width: min(70vw, 340px);
    aspect-ratio: 285 / 483;
    background: linear-gradient(170deg, rgba(36, 71, 43, 0.12), rgba(36, 71, 43, 0.04));
    -webkit-mask: url("/assets/img/ui/serpent.svg") center / contain no-repeat;
    mask: url("/assets/img/ui/serpent.svg") center / contain no-repeat;
    rotate: -10deg;
  }
}

/* Animation d'entrée des liens du menu mobile */
@media (max-width: 899.98px) {
  .nav__liste li,
  .nav__cv,
  .nav__infos {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);
  }

  .menu-ouvert .nav__liste li,
  .menu-ouvert .nav__cv,
  .menu-ouvert .nav__infos { opacity: 1; transform: none; }

  .menu-ouvert .nav__liste li:nth-child(2) { transition-delay: 0.05s; }
  .menu-ouvert .nav__liste li:nth-child(3) { transition-delay: 0.1s; }
  .menu-ouvert .nav__cv { transition-delay: 0.15s; }
  .menu-ouvert .nav__infos { transition-delay: 0.2s; }
}

/* Version bureau : navigation en ligne */
@media (min-width: 900px) {
  .burger { display: none; }

  .nav {
    position: static;
    flex-direction: row;
    align-items: center;
    gap: 2.25rem;
    padding: 0;
    overflow: visible; /* ne pas couper le contour de focus */
    background: none;
    visibility: visible;
    opacity: 1;
    transition: none;
  }

  .nav__liste {
    flex-direction: row;
    gap: 2rem;
  }

  .nav__lien {
    gap: 0.4rem;
    font-family: var(--f-texte);
    font-size: var(--fs-sm);
    font-weight: 500;
    letter-spacing: 0.02em;
    padding-block: 0.4rem;
  }

  .nav__lien::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.25rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform var(--duree) var(--ease);
  }

  .nav__lien:hover::after,
  .nav__lien[aria-current]::after {
    transform: scaleX(1);
    transform-origin: left;
  }

  .nav__lien::before { width: 0.7em; }

  .nav__cv {
    align-self: auto;
    min-height: 40px;
    padding: 0.5rem 1.15rem;
    font-size: 0.8125rem;
  }

  .nav__infos { display: none; }
}


/* -------------------------------------------------------------
   08. Carte projet (accueil + page « Mes projets »)
   -------------------------------------------------------------
   Une carte : le visuel en haut, le texte dessous sur un fond
   translucide (comme les coordonnées de la page « Me contacter »)
   qui s'opacifie au survol. Toute la carte est cliquable : le visuel
   est un lien (masqué aux lecteurs d'écran, doublon du titre) et le
   lien du titre couvre la zone de texte. */
.carte-projet {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: var(--ombre-douce);
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
}

.carte-projet:hover,
.carte-projet.is-actif {
  transform: translateY(-6px);
  box-shadow: var(--ombre-forte);
}

/* Contour de focus porté par toute la carte */
.carte-projet:has(.carte-projet__lien:focus-visible) {
  outline: 2px solid var(--c-foret);
  outline-offset: 4px;
}

.carte-projet__lien:focus-visible { outline: none; }

.carte-projet__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}

.carte-projet__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c-pastel-sauge);
}

.carte-projet__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1s var(--ease);
}

.carte-projet:hover .carte-projet__media img,
.carte-projet.is-actif .carte-projet__media img { transform: scale(1.045); }

/* Étiquette « Projet à la une », posée en haut à droite du visuel */
.carte-projet__badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem 0.4rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 18px rgba(20, 40, 25, 0.12);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-foret);
  pointer-events: none;
}

.carte-projet__badge .icone--etoile { height: 1.35em; color: var(--c-foret); }

/* Zone de texte translucide, qui s'opacifie au survol */
.carte-projet__infos {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 0.9rem 1rem;
  padding: 1.4rem 1.5rem 1.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.38);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  transition: background-color 0.5s var(--ease);
}

.carte-projet:hover .carte-projet__infos,
.carte-projet.is-actif .carte-projet__infos { background: rgba(255, 255, 255, 0.92); }

.carte-projet__infos .tags { grid-column: 1 / -1; }

.carte-projet__titre {
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem);
  line-height: 1.05;
}

.carte-projet__resume {
  margin-top: 0.35rem;
  font-size: var(--fs-sm);
  color: var(--c-texte-doux);
}

/* Année · entreprise · type de projet */
.carte-projet__meta {
  margin-bottom: 0.35rem;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-sauge);
}

.carte-projet__fleche {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--c-ligne-forte);
  color: var(--c-foret);
  background: rgba(255, 255, 255, 0.55);
  transition: background-color var(--duree) var(--ease), color var(--duree) var(--ease), transform var(--duree) var(--ease);
}

.carte-projet:hover .carte-projet__fleche,
.carte-projet.is-actif .carte-projet__fleche {
  background: var(--c-foret);
  border-color: var(--c-foret);
  color: var(--c-blanc);
  transform: rotate(45deg);
}


/* --- Liste à puces en petites étoiles (profil, pages projet) --- */
.liste-etoiles {
  display: grid;
  gap: 0.4rem;
  margin-top: 1rem;
}

.liste-etoiles li {
  position: relative;
  padding-left: 1.4rem;
}

.liste-etoiles li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35em;
  width: 0.6rem;
  aspect-ratio: 109 / 146;
  background: var(--c-foret);
  -webkit-mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
  mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
}


/* --- Étapes numérotées (méthode, méthodologie d'un projet) ---
   Grille de cartes « 01 · Titre · texte », séparées par des filets. */
.etapes {
  display: grid;
  border-radius: var(--r-lg);
  border: 1px solid var(--c-ligne);
  background: rgba(255, 255, 255, 0.45);
  overflow: hidden;
}

@media (min-width: 640px) {
  .etapes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1000px) {
  .etapes { grid-template-columns: repeat(var(--nb-etapes, 4), 1fr); }
}

.etape {
  padding: clamp(1.5rem, 2.5vw, 2rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--c-ligne);
  transition: background-color 0.5s var(--ease);
}

.etape:first-child { border-top: 0; }

@media (min-width: 640px) {
  .etape { border-top: 0; border-left: 1px solid var(--c-ligne); }
  .etape:nth-child(2n + 1) { border-left: 0; }
  .etape:nth-child(n + 3) { border-top: 1px solid var(--c-ligne); }
}

@media (min-width: 1000px) {
  .etape:nth-child(n) { border-top: 0; border-left: 1px solid var(--c-ligne); }
  .etape:first-child { border-left: 0; }
}

.etape.is-actif { background: rgba(255, 255, 255, 0.8); }
.etape.is-actif .etape__numero { color: var(--c-foret); }

@media (hover: hover) {
  .etape:hover { background: rgba(255, 255, 255, 0.8); }
}

.etape__numero {
  display: block;
  font-family: var(--f-titre);
  font-size: clamp(2.75rem, 2rem + 2.5vw, 3.75rem);
  line-height: 1;
  color: #cfdccb;
  transition: color 0.5s var(--ease);
}

@media (hover: hover) {
  .etape:hover .etape__numero { color: var(--c-foret); }
}

.etape__titre {
  margin-top: 1rem;
  font-size: clamp(1.3rem, 1.15rem + 0.5vw, 1.5rem);
  line-height: 1.15;
}

.etape p {
  margin-top: 0.5rem;
  font-size: var(--fs-sm);
  color: var(--c-texte-doux);
}


/* -------------------------------------------------------------
   09. Bloc profil (photo + texte + CTA)
   ------------------------------------------------------------- */
.bloc-profil {
  position: relative;
  display: grid;
  gap: 1.25rem clamp(2.5rem, 5vw, 5rem);
  padding: clamp(1.5rem, 3.5vw, 3rem) clamp(1.25rem, 6vw, 5.5rem) clamp(2rem, 6vw, 5.5rem);
  border-radius: var(--r-xl);
  border: 1px solid rgba(255, 255, 255, 0.85);
  background:
    linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)),
    var(--img-degrade) 60% 40% / cover;
  box-shadow: var(--ombre-douce);
}

/* Surtitre « Mon profil » au-dessus de la photo */
.bloc-profil > .surtitre { margin-bottom: 0; }

.bloc-profil__visuel {
  position: relative;
  width: min(100%, 420px);
}

.bloc-profil__texte { margin-top: 1.75rem; }

/* Bureau : photo à gauche, texte à droite.
   La photo prend toute la hauteur de la colonne de texte : le haut de la
   photo s'aligne sur le titre, le bas sur les boutons. */
@media (min-width: 900px) {
  .bloc-profil {
    grid-template-columns: 5fr 6fr;
    grid-template-areas:
      "surtitre ."
      "visuel   texte";
  }

  .bloc-profil > .surtitre { grid-area: surtitre; }
  .bloc-profil__visuel { grid-area: visuel; }

  .bloc-profil__texte {
    grid-area: texte;
    display: flex;
    flex-direction: column;
    margin-top: 0;
  }

  .bloc-profil__texte .actions { margin-top: auto; }

  .bloc-profil__photo { height: 100%; }
}

.bloc-profil__photo {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-forte);
}


/* Badge « disponible » posé sur la photo */
.badge-dispo {
  position: absolute;
  left: clamp(-1.75rem, -3vw, -0.5rem);
  bottom: 11%;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.4rem 0.85rem 1.1rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: var(--ombre-douce);
  line-height: 1.35;
}

.badge-dispo .point-dispo { width: 12px; height: 12px; }

.badge-dispo strong {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--c-foret);
}

.badge-dispo span:not(.point-dispo) {
  font-size: var(--fs-xs);
  color: var(--c-texte-doux);
}

.bloc-profil__texte > p:not(.surtitre) {
  max-width: 52ch;
  margin-top: 1.25rem;
}

/* Mobile et tablette : boutons centrés */
@media (max-width: 899.98px) {
  .bloc-profil .actions { justify-content: center; }
}

/* Repères chiffrés : 2 colonnes sur mobile (le dernier prend toute la
   largeur s'il est seul sur sa ligne), 3 colonnes ensuite */
.reperes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  margin-block: 2rem 2.5rem;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--c-ligne);
  background: var(--c-ligne);
}

.reperes li:last-child:nth-child(odd) { grid-column: 1 / -1; }

@media (min-width: 560px) {
  .reperes { grid-template-columns: repeat(3, 1fr); }
  .reperes li:last-child:nth-child(odd) { grid-column: auto; }
}

.reperes li {
  padding: 1rem 1.1rem;
  background: rgba(255, 255, 255, 0.7);
  font-size: var(--fs-sm);
  line-height: 1.4;
  color: var(--c-texte-doux);
}

.reperes strong {
  display: block;
  margin-bottom: 0.2rem;
  font-family: var(--f-titre);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--c-encre);
}

/* Le « + » de Gloock est très petit : on le passe en Work Sans
   (à utiliser partout : <span class="plus">+</span>) */
.plus {
  font-family: var(--f-texte);
  font-weight: 500;
  font-size: 0.85em;
}


/* -------------------------------------------------------------
   10. Bloc contact (bandeau vert forêt, compact)
   -------------------------------------------------------------
   Mobile : centré. Ordinateur : étoile | titre + texte | boutons. */
.bloc-contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 2.25rem clamp(1.25rem, 5vw, 2rem);
  border-radius: var(--r-xl);
  background: var(--c-foret);
  /* Même ombre portée que les autres blocs du site, pour qu'il ne paraisse pas plat */
  box-shadow: var(--ombre-forte);
  color: rgba(246, 246, 240, 0.88);
  text-align: center;
}

/* Halos lumineux jaunes tirés du dégradé */
.bloc-contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(32rem 20rem at 6% -25%, rgba(240, 236, 150, 0.5), transparent 65%),
    radial-gradient(30rem 20rem at 100% 125%, rgba(252, 232, 128, 0.55), transparent 65%);
  animation: halos-pulse 9s ease-in-out infinite alternate;
}

/* Les halos respirent très lentement */
@keyframes halos-pulse {
  from { opacity: 0.55; transform: scale(1); }
  to { opacity: 1; transform: scale(1.08); }
}

/* Halo jaune qui suit la souris, ou le doigt sur mobile (position donnée par main.js) */
.bloc-contact::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(18rem circle at var(--halo-x, 50%) var(--halo-y, 50%),
    rgba(252, 232, 128, 0.42), rgba(252, 232, 128, 0.12) 45%, transparent 70%);
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.bloc-contact.halo-actif::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .bloc-contact::before { animation: none; }
}

.bloc-contact__etoile {
  display: block;
  height: 44px;
  width: auto;
  aspect-ratio: 109 / 146;
  margin: 0 auto 1rem;
  background: var(--degrade-texte);
  -webkit-mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
  mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
  animation: scintille 5s var(--ease) infinite;
}


.bloc-contact__titre {
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  line-height: 1.1;
  color: var(--c-fond);
}

/* Mot en dégradé pastel */
.bloc-contact__titre .accent {
  background: var(--degrade-texte);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.bloc-contact__texte {
  max-width: 48ch;
  margin: 0.75rem auto 1.5rem;
}

.bloc-contact .actions { justify-content: center; gap: 0.5rem 1.5rem; }

.bloc-contact :focus-visible { outline-color: var(--c-pastel-vert); }

@media (min-width: 900px) {
  .bloc-contact {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "etoile titre actions"
      "etoile texte actions";
    align-items: center;
    column-gap: clamp(1.5rem, 3vw, 2.5rem);
    padding: clamp(2rem, 3vw, 2.5rem) clamp(2rem, 4vw, 3.25rem);
    text-align: left;
  }

  .bloc-contact__etoile { grid-area: etoile; height: 64px; margin: 0; }
  .bloc-contact__titre { grid-area: titre; align-self: end; }
  .bloc-contact__texte { grid-area: texte; align-self: start; margin: 0.4rem 0 0; }
  .bloc-contact .actions { grid-area: actions; justify-content: flex-end; }
}


/* -------------------------------------------------------------
   11. Pied de page
   -------------------------------------------------------------
   Le dégradé apparaît en fondu progressif (masque) : aucune
   ligne de séparation visible avec le contenu au-dessus. */
.footer {
  position: relative;
  isolation: isolate;
  padding-block: clamp(5rem, 10vw, 8rem) 2rem;
  font-size: var(--fs-sm);
}

.footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--img-degrade) 40% 80% / cover;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 30%, #000 60%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 30%, #000 60%);
}

/* Nom seul, en serif */
.footer__logo {
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.4rem);
  color: var(--c-encre);
}

.footer__haut {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 760px) {
  .footer__haut { grid-template-columns: 1.4fr 1fr 1fr; }
}

.footer__marque p {
  margin-top: 0.75rem;
  max-width: 28ch;
  color: var(--c-texte);
}

.footer__titre {
  margin-bottom: 0.9rem;
  font-family: var(--f-texte);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-sauge);
}

.footer__liste {
  display: grid;
  gap: 0.15rem;
}

.footer__liste a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: 36px;
  color: var(--c-texte);
  transition: color var(--duree) var(--ease);
}

.footer__liste a:hover { color: var(--c-foret); text-decoration: underline; text-underline-offset: 4px; }

.footer__liste .icone { color: var(--c-foret); }

.footer__bas {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--c-ligne-forte);
  font-size: var(--fs-xs);
  color: var(--c-texte-doux);
}

.footer__bas a { text-decoration: underline; text-underline-offset: 3px; }
.footer__bas a:hover { color: var(--c-foret); }


/* -------------------------------------------------------------
   12. Bouton retour en haut
   ------------------------------------------------------------- */
.retour-haut {
  position: fixed;
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 2rem);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--c-foret);
  color: var(--c-blanc);
  box-shadow: 0 12px 26px -12px rgba(36, 71, 43, 0.85);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--duree) var(--ease), transform var(--duree) var(--ease), visibility 0s linear var(--duree), background-color var(--duree);
}

.retour-haut.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--duree) var(--ease), transform var(--duree) var(--ease), visibility 0s, background-color var(--duree);
}

.retour-haut:hover { background: var(--c-foret-fonce); }
.retour-haut:hover .icone { transform: translateY(-2px); }
.retour-haut .icone { width: 20px; height: 20px; transition: transform var(--duree) var(--ease); }


/* -------------------------------------------------------------
   13. Infobulle (popover) — citation, anecdotes du profil…
   ------------------------------------------------------------- */
.popover {
  position: absolute;
  z-index: 50;
  width: min(360px, calc(100vw - 2rem));
  padding: 1.4rem 1.5rem 1.5rem;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.96);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid var(--c-ligne);
  box-shadow: var(--ombre-forte);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: left;
  animation: popover-in 0.3s var(--ease);
}

.popover[hidden] { display: none; }

.popover__titre {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
  padding-right: 2rem;
  font-family: var(--f-titre);
  font-size: 1.35rem;
  line-height: 1.2;
  color: var(--c-encre);
}

.popover__titre .icone--etoile { height: 1.1em; color: var(--c-foret); }

.popover p + p { margin-top: 0.6rem; }

.popover__fermer {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--c-texte-doux);
  transition: background-color var(--duree);
}

.popover__fermer:hover { background: var(--c-pastel-sauge); color: var(--c-encre); }


/* -------------------------------------------------------------
   14. Curseur personnalisé (souris uniquement, ajouté par main.js)
   ------------------------------------------------------------- */
.curseur-actif,
.curseur-actif a,
.curseur-actif button,
.curseur-actif label,
.curseur-actif summary { cursor: none; }

.curseur-actif input,
.curseur-actif textarea,
.curseur-actif select { cursor: auto; }

.curseur {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.curseur.is-visible { opacity: 1; }
.curseur.is-champ { opacity: 0; }

.curseur__etoile {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
}

/* Étoile : la pointe de la souris est au centre de l'étoile */
.curseur__etoile::before {
  content: "";
  position: absolute;
  width: 18px;
  height: 24px;
  margin: -12px 0 0 -9px;
  background: var(--c-foret);
  -webkit-mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
  mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
  transition: transform 0.4s var(--ease), background-color 0.3s;
}

/* Survol d'un lien ou d'un bouton : l'étoile pivote et grandit */
.curseur.is-survol .curseur__etoile::before { transform: rotate(90deg) scale(1.4); }

/* Clic */
.curseur.is-clic .curseur__etoile::before { transform: scale(0.7); }

/* Fond vert forêt : étoile jaune pastel */
.curseur.is-clair .curseur__etoile::before { background: var(--c-pastel-jaune); }

/* Mini-étoiles qui jaillissent au clic */
.curseur__etincelle {
  position: absolute;
  width: 8px;
  height: 11px;
  margin: -5.5px 0 0 -4px;
  background: var(--c-foret);
  -webkit-mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
  mask: url("/assets/img/ui/etoile.svg") center / contain no-repeat;
  animation: etincelle 0.65s var(--ease) forwards;
}

.curseur.is-clair .curseur__etincelle { background: var(--c-pastel-jaune); }

@keyframes etincelle {
  from { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 1; }
  to { transform: translate(var(--dx), var(--dy)) scale(1) rotate(90deg); opacity: 0; }
}


/* -------------------------------------------------------------
   15. Animations
   ------------------------------------------------------------- */

/* Apparition au scroll : uniquement si JavaScript est actif */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--delai, 0s);
}

.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@keyframes pulse {
  0% { opacity: 0.7; transform: scale(0.6); }
  80%, 100% { opacity: 0; transform: scale(1.6); }
}

@keyframes scintille {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50% { transform: scale(0.82) rotate(8deg); opacity: 0.75; }
}

@keyframes flotte {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-14px) rotate(1.5deg); }
}

@keyframes popover-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.etoile-deco { animation: scintille 4.5s var(--ease) infinite; }


/* -------------------------------------------------------------
   16. Mouvement réduit : on coupe les animations
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
}


/* -------------------------------------------------------------
   17. Repérage du contenu provisoire
   -------------------------------------------------------------
   Ajoutez ?provisoire à l'adresse (ex. http://localhost:8080/?provisoire)
   pour encadrer en orange tout ce qui est marqué data-provisoire. */
.voir-provisoire [data-provisoire] {
  outline: 2px dashed #d9541e !important;
  outline-offset: 4px;
  background-color: rgba(255, 196, 120, 0.18);
}

.voir-provisoire body::after {
  content: "Mode repérage : les éléments encadrés en orange sont provisoires";
  position: fixed;
  left: 50%;
  bottom: 1rem;
  z-index: 9998;
  transform: translateX(-50%);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  background: #d9541e;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}