/* ==========================================================================
   style.css — toute la mise en forme du site (couleurs, tailles, positions, animations)

   Comment lire ce fichier :
   - Ce bloc est un commentaire CSS : il commence par une barre oblique et une étoile,
     et se termine par une étoile et une barre oblique. Le navigateur l'ignore.
   - Une règle = un sélecteur (qui est concerné), puis des propriétés entre accolades { }.
   - Pour changer une couleur partout sur le site, modifie les variables du début (:root).

   Plan du fichier, dans l'ordre :
   1. Variables et réglages de base      7. Section « Mes projets » (vignettes)
   2. Fond halftone et barre de scroll   8. Section « Contact » (formulaire)
   3. Boutons                            9. Pied de page
   4. En-tête et menu                   10. Pages projet (bannière, infos, galerie)
   5. Hero (premier écran)              11. Animations au scroll
   6. Section « À propos »              12. Responsive (adaptation tablette et mobile)
   ========================================================================== */
/* ==========================================================================
   Variables & reset — thème sombre + halftone
   ========================================================================== */
/* Variables : les couleurs, polices et tailles du site sont définies ici une seule fois. Pour changer une couleur partout, modifie sa valeur ci-dessous ; on l'utilise ensuite avec var(--nom). */
:root {
  --color-primary: #DA4167;  /* rose principal (boutons, accents) */
  --color-primary-light: #e592b3;  /* rose clair (survols) */
  --color-accent: #f7d9e3;  /* rose très pâle (traits, points halftone) */
  --color-bg: #0a0a0f;  /* fond de la page (presque noir) */
  --color-surface: #14141d;  /* fond des cartes */
  --color-line: rgba(255, 255, 255, 0.16);  /* traits et bordures (blanc très transparent) */
  --color-text: #cfcfd8;  /* texte courant */
  --color-heading: #ffffff;  /* titres */
  --font-heading: "oso-sans", "Fredoka", sans-serif;  /* police des titres (Oso, Fredoka en secours) */
  --font-body: "Quicksand", sans-serif;  /* police du texte */
  --container-width: 1140px;  /* largeur maximale du contenu */
  --radius: 16px;  /* arrondi des coins */
  --header-height: 89px;  /* hauteur de l'en-tête (sert au calcul de la hauteur du hero) */
}

/* Fait en sorte que la largeur d'un élément inclue son padding et sa bordure (plus simple pour calculer les tailles). */
* {
  box-sizing: border-box;
}

/* Tous les éléments reprennent le curseur défini sur <html> (le curseur halftone). */
*, *::before, *::after {
  cursor: inherit;
}

/* Défilement doux quand on clique sur un lien d'ancre, et curseur personnalisé : l'image cursor-halftone.svg (3 3 = la pointe du curseur). */
html {
  scroll-behavior: smooth;
  /* Quand on arrive sur une ancre (#apropos, #projets, #contact), on garde la hauteur de l'en-tête libre : sinon l'en-tête collé en haut cache le début de la section. */
  scroll-padding-top: var(--header-height);
  cursor: url("../assets/img/cursor-halftone.svg") 3 3, auto;
}

/* Dans les champs de texte, on remet le curseur texte habituel (la barre verticale). */
input,
textarea {
  cursor: text;
}

/* Style de base de toute la page : police, couleur du texte, fond noir. */
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
}

/* Fine couche de grain posée sur toute la page pour un effet texturé. pointer-events: none = elle ne bloque pas les clics. */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  opacity: 0.07;
  mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* Les images ne dépassent jamais la largeur de leur conteneur. */
img {
  max-width: 100%;
  display: block;
}

/* Liens : même couleur que le texte autour, sans soulignement. */
a {
  color: inherit;
  text-decoration: none;
}

/* Listes : on enlève les puces et les marges par défaut. */
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Titres : police Oso (ou Fredoka si Oso ne charge pas), en blanc. */
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5em;
  color: var(--color-heading);
}

/* Tailles des titres. clamp(min, idéal, max) adapte la taille à la largeur de l'écran sans jamais dépasser le min ni le max. */
h1 { font-size: clamp(2.2rem, 5vw, 3.2rem); }
h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); }
h3 { font-size: 1.25rem; }

/* Paragraphes : un espace en dessous. */
p { margin: 0 0 1em; }

/* Conteneur centré qui limite la largeur du contenu (1140 px) et laisse 24 px de marge sur les côtés. */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Le contenu et le pied de page passent au-dessus du fond halftone (z-index plus grand). */
main,
/* Pied de page : fond presque noir, copyright à gauche et réseaux à droite. */
.site-footer {
  position: relative;
  z-index: 1;
}

/* Une section de la page : 80 px d'espace au-dessus et en dessous. */
.section {
  padding: 80px 0;
}

/* Grand titre de section (À PROPOS, MES PROJETS, CONTACT) en majuscules. */
.section-title {
  text-transform: uppercase;
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 44px;
}

/* Petit trait rose pâle sous chaque titre de section. */
.section-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 5px;
  background: var(--color-accent);
  border-radius: 5px;
  margin-top: 16px;
}

/* ==========================================================================
   Fond halftone animé + barre de progression (créés par js/main.js)
   ========================================================================== */
/* Toile du fond halftone (créée par main.js) : fixe, plein écran, derrière le contenu. */
#halftone-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Barre de progression du scroll (créée par main.js) : fine barre en haut qui s'élargit de 0 à 100 % (scaleX). */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 3000;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  pointer-events: none;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
/* Bouton de base (forme arrondie). Les variantes de couleur sont juste en dessous. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: inherit;
  border: 2px solid transparent;
  transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Au survol, le bouton monte légèrement. */
.btn:hover {
  transform: translateY(-2px);
}

/* Bouton plein rose (ex. « Voir l'e-portfolio », « Voir mon CV », « Envoyer »). */
.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

/* Rose un peu plus clair au survol. */
.btn-primary:hover {
  background: #ea5a82;
}

/* Bouton avec contour rose et fond transparent (ex. « Voir la brochure complète »). */
.btn-outline {
  background: transparent;
  border-color: var(--color-primary);
  color: #fff;
}

/* Au survol, le bouton se remplit de rose. */
.btn-outline:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* ==========================================================================
   Header
   ========================================================================== */
/* En-tête : reste collé en haut de l'écran quand on scrolle (sticky), fond noir semi-transparent avec flou (backdrop-filter). */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 15, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--color-line);
}

/* Dans l'en-tête : logo à gauche, menu à droite, alignés verticalement. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Zone du logo, cliquable (renvoie à l'accueil). */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Hauteur du logo : 72 px (56 px sur mobile, voir plus bas). */
.logo img {
  height: 72px;
  width: auto;
}

/* Menu : les liens sont côte à côte avec 32 px d'espace. */
.main-nav ul {
  display: flex;
  gap: 32px;
}

/* Style des liens du menu : majuscules, lettres espacées. */
.main-nav a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 1rem;
  color: var(--color-heading);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  padding: 4px 0;
}

/* Trait pâle sous le lien, invisible (largeur 0) tant qu'on ne survole pas. */
.main-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--color-accent);
  transition: width 0.2s ease;
}

/* Au survol, ou si c'est la section visible (classe .active ajoutée par main.js), le trait s'étend sous tout le lien. */
.main-nav a:hover::after,
.main-nav a.active::after {
  width: 100%;
}

/* Bouton hamburger (3 barres) : caché sur ordinateur, affiché sur mobile (voir plus bas). */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 32px;
  background: none;
  border: none;
  cursor: inherit;
  padding: 0;
}

/* Une des 3 barres du hamburger. */
.nav-toggle span {
  display: block;
  width: 100%;
  height: 3px;
  background: var(--color-heading);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

/* Quand le menu est ouvert, les 3 barres deviennent une croix : la 1re et la 3e pivotent, la 2e disparaît. */
.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);
}

/* ==========================================================================
   Hero (première chose visible à l'arrivée)
   ========================================================================== */
/* Hero : premier écran de la page d'accueil, il prend toute la hauteur visible sous l'en-tête. La 2e ligne min-height (svh) corrige la hauteur sur les navigateurs mobiles. */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  min-height: calc(100svh - var(--header-height));
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Bloc de texte du hero, centré. main.js le déplace et l'estompe quand on scrolle. */
.hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  will-change: transform, opacity;
}


/* Petite phrase « Bienvenue sur le e-portfolio de » : elle apparaît en glissant vers le haut (animation hero-fade-up, plus bas). */
.hero-eyebrow {
  font-family: var(--font-heading);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: clamp(0.8rem, 1.6vw, 1rem);
  margin-bottom: 16px;
  opacity: 0;
  animation: hero-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s forwards;
}

/* Grand titre « MANON QUADRI ». Le contour (text-stroke) de la couleur du fond épaissit visuellement les lettres sur le fond de points. */
.hero-title {
  margin: 0;
  font-size: clamp(3rem, 10.5vw, 8rem);
  text-transform: uppercase;
  letter-spacing: -0.03em;
  line-height: 0.92;
  -webkit-text-stroke: 6px var(--color-bg);
  paint-order: stroke fill;
}

/* Chaque mot sur sa propre ligne. overflow: hidden cache les lettres tant qu'elles sont en dessous (avant leur animation). */
.hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: 0.05em;
}

/* Deuxième ligne du titre (« Quadri »), en blanc. */
.hero-line-accent {
  color: var(--color-heading);
}

/* Une lettre du titre (créée par main.js). Elle part en dessous puis monte à sa place ; le délai dépend de son numéro --i, donc les lettres arrivent l'une après l'autre. */
.char {
  display: inline-block;
  transform: translateY(108%);
  animation: char-in 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i) * 60ms + 200ms);
}

/* Animation des lettres : de leur position de départ (en bas) jusqu'à leur place normale. */
@keyframes char-in {
  to {
    transform: translateY(0);
  }
}

/* Zone sous le titre (le bouton). Elle apparaît après les lettres (délai de 0,9 s). */
.hero-bottom {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  margin-top: 28px;
  opacity: 0;
  animation: hero-fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}

/* Bouton centré. */
.hero-bottom .btn {
  align-self: center;
}

/* Animation d'apparition : de transparent et décalé de 24 px vers le bas, à visible et à sa place. */
@keyframes hero-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   À propos
   ========================================================================== */
/* Section « À propos » : le texte est à gauche, la photo est positionnée en absolu à droite. */
.presentation {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
}

/* Le texte passe au-dessus de la photo (z-index: 1). */
.presentation .container {
  position: relative;
  z-index: 1;
}

/* Les conteneurs de la section couvrent toute la largeur, donc ils recouvriraient la photo et empêcheraient le survol. On les rend « transparents » à la souris (pointer-events: none) et on réactive la souris sur leur contenu (texte, titre, boutons). */
.presentation .container {
  pointer-events: none;
}

.presentation .container > * {
  pointer-events: auto;
}

/* Le titre n'occupe que la largeur de son texte, pour ne pas bloquer la souris au-dessus de la photo. */
.presentation .section-title {
  width: fit-content;
}

/* Section plus compacte que les autres : 52 px d'espace en haut et en bas au lieu de 80 px. La hauteur minimale laisse la place à la tête de la photo qui dépasse du cadre. */
.presentation.section {
  padding: 52px 0;
  min-height: 680px;
}

/* Titre « À propos » plus petit que les autres titres de section. */
.presentation .section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  margin-bottom: 24px;
}

/* Trait sous le titre, un peu plus proche. */
.presentation .section-title::after {
  margin-top: 12px;
}

/* Colonne de texte : 620 px au maximum, ou 58 % de la largeur si l'écran est plus étroit. */
.presentation-text {
  max-width: min(620px, 58%);
}

/* Paragraphes de présentation : taille réduite pour que tout tienne. */
.presentation-text p {
  font-size: 0.92rem;
  line-height: 1.5;
  margin-bottom: 0.7em;
}

/* Cadre de la photo de profil : un carré transparent avec seulement un contour rose (la couleur principale du site) et les coins arrondis comme les vignettes, mais un peu plus grand (420 px au maximum). Il est posé à droite, aligné sur le bord du contenu, et collé en bas de la section. Pas de overflow: hidden ici : c'est ce qui permet à la photo de dépasser du cadre. */
.presentation-photo {
  position: absolute;
  bottom: 52px;
  right: max(24px, calc((100% - 1140px) / 2 + 24px));
  width: min(420px, 36%);
  aspect-ratio: 1 / 1;
  z-index: 0;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius);
}

/* La photo (détourée, fond transparent) est plus grande que le cadre : sa hauteur fait 140 % de celle du carré. Son bas est collé au bas du cadre et sa tête dépasse par le haut, comme si on sortait du cadre. Le trait du haut et des côtés passe derrière le corps. Le décalage de -56 % centre le corps (légèrement à droite dans l'image d'origine) au milieu du cadre. */
.presentation-photo img {
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 50%;
  height: 140%;
  width: auto;
  max-width: none;
  transform: translateX(-56%);
  transition: filter 0.5s ease;
}

/* Le bas du cadre est redessiné PAR-DESSUS la photo : seul le bas du contour est gardé (clip-path), ce qui donne l'impression que le corps se tient dans le cadre au lieu de le recouvrir. */
.presentation-photo::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -3px;
  border: 3px solid var(--color-primary);
  border-radius: var(--radius);
  clip-path: inset(calc(100% - 30px) 0 0 0);
  pointer-events: none;
}

/* Effet halftone derrière la photo : un grand halo de points roses qui s'estompe vers l'extérieur (mask-image). Il est invisible au départ (opacity: 0) et apparaît au survol. */
.presentation-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 38%;
  width: 150%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%) scale(0.8);
  background-image: radial-gradient(circle, var(--color-primary) 36%, transparent 42%);
  background-size: 9px 9px;
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 66%);
  mask-image: radial-gradient(circle, #000 0%, transparent 66%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background-size 0.6s ease;
}

/* Au survol de la photo : le halo de points apparaît, grandit et ses points grossissent. */
.presentation-photo:hover::before {
  opacity: 0.9;
  transform: translate(-50%, -50%) scale(1);
  background-size: 15px 15px;
}

/* Au survol, la silhouette de la photo s'illumine (drop-shadow suit le contour de la découpe) : un halo rose pâle serré et un halo rose plus large. */
.presentation-photo:hover img {
  filter: drop-shadow(0 0 14px rgba(247, 217, 227, 0.55)) drop-shadow(0 0 46px rgba(218, 65, 103, 0.65));
}

/* Première phrase de présentation, en blanc et un peu plus grande. */
.presentation-text .lead {
  font-size: 1.02rem;
  color: var(--color-heading);
}

/* Petits titres « OBJECTIF » et « COMPÉTENCES ». */
.presentation-text h3 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-accent);
  margin: 1.2em 0 0.4em;
}

/* Grille des compétences : autant de colonnes que possible, chacune d'au moins 170 px (auto-fit + minmax). */
.skills-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 10px 0 20px;
}

/* Carte d'une compétence : fond blanc très transparent, bordure fine, coins arrondis. */
.skills-list li {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 10px 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

/* Au survol, la carte s'éclaircit et sa bordure devient rose pâle. */
.skills-list li:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--color-accent);
}

/* Nom de la compétence (ex. « Identité visuelle »). */
.skill-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  color: #fff;
  margin-bottom: 2px;
}

/* Courte description sous le nom de la compétence. */
.skill-desc {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: #a4a4b0;
}


/* ==========================================================================
   Projects section
   ========================================================================== */
/* Section « Mes projets ». */
.projets {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
}

.projets .container {
  position: relative;
  z-index: 1;
}

/* Grille des vignettes de projets : 3 colonnes (2 puis 1 sur écran plus étroit, voir plus bas). */
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Une vignette de projet. */
.project-card {
  background: var(--color-surface);
  border: 1px solid var(--color-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Au survol : la vignette monte, sa bordure devient rose pâle et une lueur apparaît. */
.project-card:hover {
  transform: translateY(-6px);
  border-color: var(--color-accent);
  box-shadow: 0 18px 40px rgba(247, 217, 227, 0.1);
}

/* Toute la vignette est un lien (on peut cliquer n'importe où dessus). */
.project-card a {
  display: block;
  position: relative;
}

/* Image de la vignette : toujours au format 4/3, recadrée si besoin (object-fit: cover). */
.project-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* Léger zoom de l'image au survol. */
.project-card:hover img {
  transform: scale(1.04);
}

/* Zone de texte sous l'image de la vignette (titre, description, lien). */
.project-card-body {
  padding: 18px 20px 20px;
}

/* Titre du projet. */
.project-card-body h3 {
  font-size: 1.05rem;
}

/* Description du projet, en gris. */
.project-card-body p {
  color: #a4a4b0;
  font-size: 0.88rem;
  line-height: 1.5;
}

/* Lien « Voir le projet → » en rose pâle. */
.link-arrow {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-accent);
}

/* ==========================================================================
   Contact section
   ========================================================================== */
/* Section « Contact ». */
.contact {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-line);
}

.contact .container {
  position: relative;
  z-index: 1;
}

/* Deux colonnes : texte et cartes de contact à gauche, formulaire à droite. */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}

/* Titre « Un projet en tête ? » en rose. */
.contact-intro h3 {
  color: var(--color-primary);
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  text-transform: uppercase;
  letter-spacing: -0.01em;
  margin-bottom: 0.6em;
}

.contact-intro p {
  color: var(--color-text);
  max-width: 440px;
}

/* Les 3 cartes E-mail / LinkedIn / Instagram, l'une sous l'autre. */
.contact-cards {
  display: grid;
  gap: 10px;
  margin-top: 24px;
  max-width: 440px;
}

/* Une carte de contact (au survol, elle s'éclaircit, voir la règle suivante). */
.contact-cards li {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.contact-cards li:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: var(--color-accent);
}

/* Toute la carte est cliquable : icône à gauche, texte à droite. */
.contact-cards a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}

/* Icône de la carte, en blanc. */
.contact-cards svg {
  width: 22px;
  height: 22px;
  fill: #fff;
  flex-shrink: 0;
}

/* Bloc de texte de la carte : le nom du réseau au-dessus, l'adresse en dessous. */
.contact-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Nom du réseau (E-mail, LinkedIn, Instagram). */
.contact-card-label {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-accent);
}

/* Adresse ou pseudo. overflow-wrap: anywhere permet de couper une adresse trop longue. */
.contact-card-value {
  font-size: 0.92rem;
  color: #fff;
  overflow-wrap: anywhere;
}

/* Formulaire de contact : les champs sont l'un sous l'autre. */
.contact-form {
  width: 100%;
  max-width: 600px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Le premier libellé n'a pas de marge au-dessus. */
.contact-form label:first-of-type {
  margin-top: 0;
}

/* Libellés des champs (NOM, EMAIL, MESSAGE). */
.contact-form label {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-heading);
  margin-top: 14px;
}

/* Champs de saisie : fond sombre et bordure fine. */
.contact-form input,
.contact-form textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 12px 16px;
  color: var(--color-heading);
  border: 2px solid var(--color-line);
  border-radius: 12px;
  background: rgba(20, 20, 29, 0.85);
  resize: vertical;
  transition: border-color 0.2s ease;
}

/* Quand on clique dans un champ, sa bordure devient rose pâle. */
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Bouton « Envoyer », aligné à gauche. */
.contact-form button {
  margin-top: 24px;
  align-self: flex-start;
}

/* Bouton grisé pendant l'envoi (main.js le désactive). */
.contact-form button:disabled {
  opacity: 0.6;
}

/* Case anti-spam invisible (« honeypot ») : un humain ne la voit pas, un robot la remplit et le message est refusé. */
.contact-form .botcheck {
  display: none;
}

/* Message affiché sous le bouton après l'envoi (merci ou erreur). */
.form-feedback {
  margin-top: 16px;
  font-family: var(--font-heading);
  color: var(--color-accent);
  min-height: 1.4em;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: #06060a;
  border-top: 1px solid var(--color-line);
  color: #fff;
  padding: 32px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.9rem;
}

/* Liens e-mail / LinkedIn / Instagram du pied de page. */
.footer-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
}

.footer-socials a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: color 0.2s ease;
}

/* Icônes : fill: currentColor prend la couleur du texte, donc elles changent de couleur au survol. */
.footer-socials svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

.footer-socials a:hover {
  color: var(--color-primary-light);
}

/* ==========================================================================
   Pages projet
   ========================================================================== */
/* Bannière en haut d'une page projet : l'image est mise en fond du bloc (background-image est défini dans le HTML de chaque page) et le titre est posé en bas. */
.project-banner {
  position: relative;
  background-size: cover;
  background-position: center;
  min-height: 380px;
  display: flex;
  align-items: flex-end;
}

/* Dégradé noir en bas de la bannière pour que le titre blanc reste lisible. */
.project-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, var(--color-bg), rgba(10, 10, 15, 0.15));
}

/* Variante pour la page IRL : fond clair, logo entier visible (contain) et pas de dégradé. */
.project-banner--light {
  background-color: rgb(252, 253, 255);
  background-size: contain;
  background-repeat: no-repeat;
}

.project-banner--light::before {
  display: none;
}

/* Titre en foncé sur le fond clair. */
.project-banner.project-banner--light h1 {
  color: #12131c;
}

.project-banner .container {
  position: relative;
  padding-bottom: 40px;
}

/* Titre du projet dans la bannière. */
.project-banner h1 {
  color: var(--color-heading);
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(2rem, 6vw, 3.8rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Bloc de texte principal d'une page projet. */
.project-content {
  position: relative;
  overflow: hidden;
}

.project-content .container {
  position: relative;
  z-index: 1;
}

/* Titre « Explication et contexte du projet » : plus petit, sans majuscules. */
.project-content .section-title {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem);
  text-transform: none;
  letter-spacing: 0;
}

/* Paragraphes de la page projet : largeur limitée pour rester faciles à lire. */
.project-content p {
  max-width: 760px;
  font-size: 1.05rem;
}

/* Encadré « Date de réalisation / Livrable final » : un seul cadre avec une ligne par information. */
.project-info {
  max-width: 760px;
  margin-top: 32px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  overflow: hidden;
}

/* Une ligne de l'encadré : le titre à gauche (190 px), la valeur à droite. */
.info-card {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 16px 20px;
}

/* Trait de séparation entre les lignes. */
.info-card + .info-card {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

/* Titre de la ligne, en rose et en majuscules. */
.info-label {
  display: block;
  font-family: var(--font-heading);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
}

/* Valeur de la ligne (la date ou le livrable). */
.info-value {
  display: block;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--color-heading);
}

/* Style « À compléter » : gris et en italique. */
.info-value.info-todo {
  color: #a4a4b0;
  font-style: italic;
}

/* Un bloc d'information sous le texte (Mon rôle, Liens, Logiciels, Matériel, Collaborateurs...). */
.project-fact {
  margin-top: 32px;
}

/* Titre du bloc, en rose et en majuscules. */
.project-fact h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 12px;
}

/* Liste de pastilles (logiciels, matériel) : elles se placent côte à côte et passent à la ligne si besoin. */
.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Une pastille : bordure fine et forme arrondie. */
.tag-list li {
  border: 1px solid var(--color-line);
  border-radius: 999px;
  padding: 6px 16px;
  font-size: 0.9rem;
  color: var(--color-heading);
}

/* Note marquée d'un trait rose à gauche (ex. mention « projet pédagogique »). */
.project-content p.project-note {
  margin-top: 24px;
  padding-left: 16px;
  border-left: 3px solid var(--color-primary);
  font-size: 0.9rem;
  font-style: italic;
  color: #a4a4b0;
}

/* Liste de collaborateurs : cartes en grille (220 px minimum chacune). */
.team-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  max-width: 760px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Carte d'un collaborateur. */
.team-list li {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 14px 16px;
}

/* Nom du collaborateur. */
.team-name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1rem;
  color: #fff;
  margin-bottom: 4px;
}

/* Rôle du collaborateur. */
.team-role {
  display: block;
  font-size: 0.88rem;
  line-height: 1.4;
  color: #a4a4b0;
}

/* Boutons de liens (PDF, Instagram...) côte à côte. */
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Liste à puces roses (ex. « Mon rôle » quand c'est une liste). */
.fact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 760px;
}

.fact-list li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  font-size: 1.05rem;
}

/* La puce : un petit rond rose. */
.fact-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}

/* Pastille du logiciel principal : remplie de rose. */
.tag-list li.tag-main {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

/* Galerie de photos : 3 colonnes, images carrées (ratio 1/1) par défaut. */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--color-line);
}

/* Figure qui occupe toute la largeur de la galerie ; son image est au format panoramique 3/1. */
.gallery-grid .gallery-wide {
  grid-column: 1 / -1;
}

.gallery-grid .gallery-wide img {
  aspect-ratio: 3 / 1;
}

/* Chaque image est dans une balise figure (image + légende) : on enlève la marge par défaut du navigateur. */
.gallery-grid figure {
  margin: 0;
}

/* Légende sous l'image : une phrase en gris clair, avec un titre en gras et en blanc au-dessus. */
.gallery-grid figcaption {
  margin-top: 12px;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #a4a4b0;
}

.gallery-grid figcaption strong {
  display: block;
  margin-bottom: 2px;
  font-family: var(--font-heading);
  font-size: 0.95rem;
  color: var(--color-heading);
}

/* Variante à 2 colonnes pour les images en 4/3 (classe gallery-2col dans le HTML). */
.gallery-grid.gallery-2col {
  grid-template-columns: repeat(2, 1fr);
}

.gallery-grid.gallery-2col img {
  aspect-ratio: 4 / 3;
}

/* Variante « mise en avant » : la 1re image prend toute la largeur en 16/9 (utilisée sur la brochure MAH). */
.gallery-grid.gallery-feature > figure:first-child {
  grid-column: 1 / -1;
}

.gallery-grid.gallery-feature > figure:first-child img {
  aspect-ratio: 16 / 9;
}

/* Espace « À venir » pour les projets qui n'ont pas encore de photos : un cadre en pointillés rempli de petits points (halftone très discret), avec le mot « À VENIR » en filigrane, c'est-à-dire en grand, très pâle et légèrement penché. */
.coming-soon {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3 / 1;
  min-height: 180px;
  border: 2px dashed rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.03);
  background-image: radial-gradient(circle, rgba(247, 217, 227, 0.16) 1.5px, transparent 2px);
  background-size: 18px 18px;
  overflow: hidden;
}

/* Le mot en filigrane : couleur rose pâle à 16 % d'opacité, non sélectionnable. */
.coming-soon span {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.4rem, 9vw, 5.5rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(247, 217, 227, 0.16);
  transform: rotate(-6deg);
  user-select: none;
}

/* Bouton « ← Retour aux projets » en bas des pages projet. */
.project-nav {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-bottom: 80px;
}

/* ==========================================================================
   Animations au scroll
   ========================================================================== */
/* Éléments qui apparaissent au scroll : au départ invisibles et décalés vers le bas. main.js ajoute la classe .reveal, puis .is-visible quand l'élément entre à l'écran. */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* État final : visible et à sa place (la transition rend le passage progressif). */
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Pour les personnes qui ont demandé moins d'animations dans leurs réglages : on les désactive (accessibilité). */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .presentation-photo::before,
  .presentation-photo img {
    transition: none;
  }

  .char,
  .hero-eyebrow,
  .hero-bottom {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Tablette : sous 900 px de large. Le texte passe en pleine largeur, la photo passe sous le texte, les grilles passent à 2 colonnes. */
@media (max-width: 900px) {
  .presentation-text {
    max-width: none;
  }

  .presentation {
    padding-bottom: 0;
  }

  /* Le cadre passe sous le texte, aligné à gauche, avec la même marge que le contenu. Le grand espace au-dessus (margin-top) laisse la place à la tête qui dépasse du cadre. */
  .presentation.section {
    min-height: 0;
  }

  .presentation-photo {
    position: relative;
    bottom: auto;
    right: auto;
    width: calc(100% - 48px);
    max-width: 420px;
    margin: 190px 24px 0;
  }

  .projects-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Boutons « Voir mon CV » et « Envoyer » centrés. Le bouton CV devient un bloc de la largeur de son texte (width: fit-content) avec des marges automatiques à gauche et à droite, ce qui le centre. */
  .presentation-text > .btn {
    display: flex;
    width: fit-content;
    margin: 0 auto;
  }

  /* Le formulaire prend toute la largeur disponible (au lieu de 600 px au maximum, collé à gauche) : le bouton centré est ainsi au milieu de la page. */
  .contact-form {
    max-width: none;
  }

  .contact-form button {
    align-self: center;
  }

  /* Le message de confirmation sous le bouton « Envoyer » est centré lui aussi. */
  .form-feedback {
    text-align: center;
  }
}

/* Mobile : sous 700 px de large. Le menu devient un hamburger et les grilles passent à 1 colonne. */
@media (max-width: 700px) {
  :root {
    --header-height: 73px;
  }

  .projects-grid {
    grid-template-columns: 1fr;
  }

  .logo img {
    height: 56px;
  }

  /* Menu mobile : caché (hauteur 0) tant que le hamburger n'est pas ouvert, puis déroulé sous l'en-tête. */
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-line);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }

  /* Menu ouvert (la classe « open » est ajoutée par main.js). */
  .main-nav.open {
    max-height: 260px;
  }

  .main-nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
  }

  .main-nav li {
    border-top: 1px solid var(--color-line);
  }

  .main-nav a {
    display: block;
    padding: 14px 0;
  }

  /* On affiche le bouton hamburger. */
  .nav-toggle {
    display: flex;
  }
  .section {
    padding: 64px 0;
  }

  .gallery-grid,
  .gallery-grid.gallery-2col {
    grid-template-columns: 1fr;
  }

  .gallery-grid .gallery-wide img {
    aspect-ratio: 4 / 3;
  }

  .info-card {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .footer-inner {
    flex-direction: column;
    text-align: center;
  }
}