/* ==========================================================================
   PORTFOLIO JULIEN EHRET
   --------------------------------------------------------------------------
   Sommaire
   1. Variables (couleurs, typo, espacements)  ← à ajuster en priorité
   2. Base
   3. Navigation
   4. Hero
   5. Sections communes
   6. Parcours (frise + formation)
   7. Compétences (chaîne de traitement)
   8. Réalisations (filtres + cartes)
   9. Fenêtre de détail
   10. Contact + pied de page
   11. Animations
   12. Responsive et mouvement réduit
   ========================================================================== */


/* 1. VARIABLES ============================================================ */
:root {
  /* Couleurs : remplace ces valeurs par les codes exacts de l'observatoire
     (inspecteur du navigateur sur observatoire.grand-site-rocamadour.fr). */
  --c-fond:        #EEF1EC;  /* pierre claire, fond général */
  --c-fond-teinte: #E2E8E1;  /* fond des sections alternées */
  --c-surface:     #F8FAF7;  /* cartes */
  --c-encre:       #16313A;  /* texte principal */
  --c-encre-douce: #566B70;  /* texte secondaire */
  --c-principal:   #1F6B73;  /* bleu-vert, couleur de la donnée */
  --c-vegetal:     #86A585;  /* vert causse, couleur secondaire */
  --c-accent:      #D29A33;  /* ocre, réservé aux pics et aux points forts */
  --c-trait:       rgba(22, 49, 58, .14);

  /* Typographie */
  --police: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --t-xs:  .8125rem;
  --t-s:   .9375rem;
  --t-m:   1.0625rem;
  --t-l:   1.375rem;
  --t-xl:  clamp(1.75rem, 1.2rem + 2vw, 2.5rem);
  --t-xxl: clamp(3rem, 1.5rem + 7vw, 6.5rem);

  /* Espacements et formes */
  --largeur: 1180px;
  --marge: clamp(1.25rem, 4vw, 3rem);
  --espace-section: clamp(4.5rem, 10vw, 8rem);
  --rayon-carte: 22px 22px 22px 6px;   /* forme "galet", volontairement asymétrique */
  --rayon-tag: 999px;
  --duree: .25s;
}


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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(4.5rem + env(safe-area-inset-top, 0px));
}

body {
  margin: 0;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: var(--c-fond);
  color: var(--c-encre);
  font-family: var(--police);
  font-size: var(--t-m);
  line-height: 1.55;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; }

:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: 3px;
  border-radius: 4px;
}


/* 3. NAVIGATION =========================================================== */
.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem var(--marge);
  padding-top: calc(.9rem + env(safe-area-inset-top, 0px));
  margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  background: color-mix(in srgb, var(--c-fond) 85%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duree);
}
.nav.est-defilee { border-bottom-color: var(--c-trait); }

.nav__logo {
  font-weight: 700;
  text-decoration: none;
  letter-spacing: -.01em;
}

.nav__liens { display: flex; gap: clamp(.75rem, 2.5vw, 2rem); }
.nav__liens a {
  font-size: var(--t-s);
  text-decoration: none;
  color: var(--c-encre-douce);
  padding-block: .25rem;
  border-bottom: 2px solid transparent;
  transition: color var(--duree), border-color var(--duree);
}
.nav__liens a:hover,
.nav__liens a.est-actif {
  color: var(--c-encre);
  border-bottom-color: var(--c-principal);
}


/* 4. HERO ================================================================= */
/* Le hero occupe toute la largeur ; les courbes sont en fond (.hero__fond),
   le texte passe par-dessus, aligné sur la même colonne que le reste du site. */
.hero {
  position: relative;
  isolation: isolate;
  min-height: min(calc(100svh - 4rem), 900px);
  display: flex;
  align-items: center;
  padding: clamp(3rem, 8vw, 6rem) max(var(--marge), calc((100% - var(--largeur)) / 2 + var(--marge)))
           clamp(9rem, 22vh, 14rem);
  overflow: hidden;
}

/* Calque des courbes */
.hero__fond {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: -2;
}

/* Voile : garde le texte lisible à gauche et fond le bas dans la section suivante */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 2.9rem 0;          /* s'arrête au-dessus de l'axe des mois */
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c-fond) 100%, transparent) 0%,
    color-mix(in srgb, var(--c-fond) 70%, transparent) 35%,
    transparent 58%);
}

.hero__texte { position: relative; max-width: 40rem; }
/* Halo couleur de fond autour des petits textes : ils restent nets même sur les courbes */
.hero__statut, .hero__role, .hero__pitch {
  text-shadow: 0 0 4px var(--c-fond), 0 0 10px var(--c-fond), 0 0 18px var(--c-fond);
}

.hero__identite {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.hero__photo {
  flex: none;
  width: 76px; height: 76px;
  object-fit: cover;
  border-radius: 46% 54% 50% 50% / 55% 45% 55% 45%;  /* forme organique */
  border: 3px solid var(--c-surface);
  outline: 2px solid var(--c-vegetal);
}
.hero__statut {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-s);
  color: var(--c-encre-douce);
}
.pastille {
  width: .6rem; height: .6rem;
  border-radius: 50%;
  background: var(--c-vegetal);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-vegetal) 30%, transparent);
}

.hero__nom {
  font-size: var(--t-xxl);
  font-weight: 750;
  line-height: .92;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 96;
}

.hero__role {
  margin-top: 1rem;
  font-size: var(--t-l);
  font-weight: 500;
  color: var(--c-principal);
}

.hero__pitch {
  margin-top: 1.5rem;
  max-width: 34rem;
  color: black
}

.hero__actions {
  margin-top: 2.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.bouton {
  display: inline-block;
  padding: .8rem 1.4rem;
  border: 1.5px solid var(--c-encre);
  border-radius: var(--rayon-tag);
  font-weight: 600;
  font-size: var(--t-s);
  text-decoration: none;
  transition: background var(--duree), color var(--duree);
}
.bouton:hover { background: var(--c-encre); color: var(--c-fond); }
.bouton--plein { background: var(--c-principal); border-color: var(--c-principal); color: #fff; }
.bouton--plein:hover { background: var(--c-encre); border-color: var(--c-encre); }

/* Visuel : les courbes sont dessinées par main.js, au pixel près de l'écran */
#courbes-hero { display: block; width: 100%; height: 100%; overflow: visible; }
#courbes-hero .courbe {
  fill: none;
  stroke: var(--c-principal);
  stroke-linecap: round;
}
#courbes-hero .courbe--sommet { stroke: var(--c-encre); stroke-width: 2.5; }
#courbes-hero .pic { fill: var(--c-accent); }
#courbes-hero .pic-halo { fill: var(--c-accent); opacity: .22; }
#courbes-hero .pic-texte {
  font-family: var(--police);
  font-size: 15px;
  font-weight: 600;
  fill: var(--c-encre);
}
#courbes-hero .pic-ligne { stroke: var(--c-accent); stroke-width: 1.5; stroke-dasharray: 3 4; }

/* Axe des mois, collé en bas du hero, une colonne par mois */
.hero__legende {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  padding: .55rem 0 .9rem;
  font-size: var(--t-xs);
  color: var(--c-encre-douce);
  text-align: center;
  border-top: 1px solid var(--c-trait);
}


/* 5. SECTIONS COMMUNES ==================================================== */
.section {
  max-width: var(--largeur);
  margin: 0 auto;
  padding: var(--espace-section) var(--marge);
}

/* Section avec fond teinté pleine largeur, contenu centré */
.section--teinte {
  max-width: none;
  background: var(--c-fond-teinte);
  border-radius: 48px 48px 48px 48px / 32px 32px 32px 32px;
  padding-inline: max(var(--marge), calc((100% - var(--largeur)) / 2 + var(--marge)));
}

.section__titre {
  font-size: var(--t-xl);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.section__intro {
  margin-top: .75rem;
  max-width: 40rem;
  color: var(--c-encre-douce);
}


/* 6. PARCOURS ============================================================= */
.parcours {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
}

.parcours__soustitre {
  font-size: var(--t-m);
  font-weight: 600;
  color: var(--c-encre-douce);
  margin-bottom: 1.5rem;
}

/* Frise : une ligne verticale avec un point par expérience */
.frise { position: relative; padding-left: 1.75rem; }
/* ::before = le rail, ::after = la partie "remplie" (pilotée par --progression en JS) */
.frise::before,
.frise::after {
  content: "";
  position: absolute;
  left: 5px; top: .5rem; bottom: .5rem;
  width: 2px;
  border-radius: 2px;
}
.frise::before { background: var(--c-trait); }
.frise::after {
  background: linear-gradient(var(--c-principal), var(--c-vegetal));
  transform: scaleY(var(--progression, 1));
  transform-origin: top;
}
.frise__item { position: relative; padding-bottom: 2rem; }
.frise__item:last-child { padding-bottom: 0; }
.frise__item::before {
  content: "";
  position: absolute;
  left: calc(-1.75rem + 1px);
  top: .45rem;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--c-fond);
  border: 2px solid var(--c-vegetal);
  z-index: 1;
  transition: background .4s, transform .4s;
}
.frise__item.est-atteint::before { background: var(--c-vegetal); }
.frise__item--fort::before {
  width: 14px; height: 14px;
  left: calc(-1.75rem - 1px);
  background: var(--c-accent);
  border-color: var(--c-accent);
}

.frise__date { font-size: var(--t-xs); color: var(--c-encre-douce); }
.frise__poste { font-size: var(--t-m); font-weight: 650; margin-top: .15rem; }
.frise__item--fort .frise__poste { font-size: var(--t-l); line-height: 1.25; }
.frise__structure { font-size: var(--t-s); color: var(--c-principal); font-weight: 500; }
.frise__desc { margin-top: .4rem; font-size: var(--t-s); color: var(--c-encre-douce); max-width: 36rem; }

.frise__etapes {
  margin-top: .9rem;
  display: grid;
  gap: .5rem;
  font-size: var(--t-s);
}
.frise__etapes li {
  padding: .6rem .9rem;
  background: var(--c-surface);
  border-radius: 12px;
  border: 1px solid var(--c-trait);
}
.frise__etapes strong { color: var(--c-principal); margin-right: .35rem; }

/* Formation */
.diplomes { display: grid; gap: 1.5rem; }
.diplome { padding-left: 1rem; border-left: 2px solid var(--c-trait); }
.diplome--fort { border-left-color: var(--c-principal); }
.diplome__date { font-size: var(--t-xs); color: var(--c-encre-douce); }
.diplome__titre { font-weight: 600; line-height: 1.3; margin-top: .15rem; }
.diplome__lieu { font-size: var(--t-s); color: var(--c-principal); }
.diplome__desc { margin-top: .4rem; font-size: var(--t-s); color: var(--c-encre-douce); }

/* Mémoire de Master, sous la description du diplôme */
.diplome__memoire {
  margin-top: .9rem;
  padding: .9rem 1rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon-carte);
  display: grid;
  gap: .35rem;
  justify-items: start;
}
.diplome__memoire-label { font-size: var(--t-xs); font-weight: 600; color: var(--c-principal); }
.diplome__memoire-titre { font-size: var(--t-s); font-weight: 600; line-height: 1.4; }
.diplome__memoire .bouton { margin-top: .4rem; }
.bouton--petit { padding: .45rem 1rem; font-size: var(--t-xs); }

.interets { margin-top: 3rem; }
.interets p { font-size: var(--t-s); color: var(--c-encre-douce); }


/* 7. COMPÉTENCES : chaîne de traitement =================================== */
.chaine {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  position: relative;
}
/* Le fil qui relie les étapes */
.chaine::before {
  content: "";
  position: absolute;
  top: 1.25rem; left: 1.25rem; right: 1.25rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-principal) 0 8px, transparent 8px 14px);
  opacity: .5;
}

.chaine__etape { position: relative; }
.chaine__num {
  position: relative;
  display: grid;
  place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  background: var(--c-principal);
  color: #fff;
  font-weight: 700;
}
.chaine__etape:last-child .chaine__num { background: var(--c-accent); color: var(--c-encre); }

.chaine__titre { margin-top: 1.1rem; font-size: var(--t-l); font-weight: 700; letter-spacing: -.01em; }
.chaine__desc { margin-top: .25rem; font-size: var(--t-s); color: var(--c-encre-douce); }

.tags { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.tags li {
  font-size: var(--t-xs);
  padding: .3rem .7rem;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon-tag);
}

.aussi {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--c-trait);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}
.aussi__titre { font-size: var(--t-s); font-weight: 650; margin-bottom: .35rem; }
.aussi p { font-size: var(--t-s); color: var(--c-encre-douce); }


/* 8. RÉALISATIONS ========================================================= */
.filtres { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.filtre {
  font: inherit;
  font-size: var(--t-s);
  padding: .45rem 1rem;
  border-radius: var(--rayon-tag);
  border: 1.5px solid var(--c-trait);
  background: transparent;
  color: var(--c-encre);
  cursor: pointer;
  transition: background var(--duree), border-color var(--duree), color var(--duree);
}
.filtre:hover { border-color: var(--c-principal); }
.filtre[aria-pressed="true"] { background: var(--c-encre); border-color: var(--c-encre); color: var(--c-fond); }

.projets {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr));
  gap: 1.25rem;
}
.projets li[hidden] { display: none; }

/* La carte entière est un bouton (ouvre la fenêtre de détail) */
.carte {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  text-align: left;
  font: inherit;
  color: inherit;
  padding: 0;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon-carte);
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duree), border-color var(--duree);
}
.carte:hover { transform: translateY(-3px); border-color: var(--c-principal); }

.carte__visuel {
  aspect-ratio: 16 / 7;
  background: var(--c-fond-teinte);
  display: grid;
  place-items: center;
  padding: 1rem 1.25rem .5rem;
}
.carte__visuel svg { width: 100%; height: 100%; overflow: visible; }

/* Couleurs des mini-visualisations (générées par main.js) */
.mv-principal { stroke: var(--c-principal); fill: none; }
.mv-aire      { fill: var(--c-principal); opacity: .14; }
.mv-barre     { fill: var(--c-principal); opacity: .75; }
.mv-vegetal   { fill: var(--c-vegetal); }
.mv-trait     { stroke: var(--c-vegetal); fill: none; }
.mv-accent    { fill: var(--c-accent); }
.mv-accent-trait { stroke: var(--c-accent); fill: none; }
.mv-noeud     { fill: var(--c-surface); stroke: var(--c-principal); stroke-width: 2; }

.carte__corps { padding: 1.25rem 1.4rem 1.4rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.carte__meta { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--t-xs); color: var(--c-encre-douce); }
.carte__categorie { color: var(--c-principal); font-weight: 600; }
.carte__titre { font-size: var(--t-l); font-weight: 650; line-height: 1.2; letter-spacing: -.01em; }
.carte__resume { font-size: var(--t-s); color: var(--c-encre-douce); }
.carte__ouvrir {
  margin-top: auto;
  padding-top: .75rem;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--c-principal);
}
.carte__lien-ext { font-size: var(--t-xs); color: var(--c-encre-douce); font-weight: 400; margin-left: .4rem; }


/* 9. FENÊTRE DE DÉTAIL ==================================================== */
.detail {
  width: min(760px, calc(100% - 2rem));
  max-height: calc(100dvh - 3rem);
  padding: 0;
  border: none;
  border-radius: 24px;
  background: var(--c-surface);
  color: var(--c-encre);
  box-shadow: 0 30px 80px rgba(22, 49, 58, .28);
  overflow: hidden;              /* c'est .detail__contenu qui défile */
}
.detail::backdrop { background: rgba(22, 49, 58, .45); backdrop-filter: blur(3px); }
.detail[open] { animation: ouverture .28s ease-out; }
@keyframes ouverture { from { opacity: 0; transform: translateY(12px) scale(.98); } }

.detail__fermer {
  position: absolute;
  top: .75rem;
  right: .75rem;
  width: 2.5rem; height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--c-trait);
  background: var(--c-surface);
  color: var(--c-encre);
  font-size: 1rem;
  cursor: pointer;
  z-index: 1;
}
.detail__fermer:hover { background: var(--c-encre); color: var(--c-fond); }

.detail__visuel { background: var(--c-fond-teinte); padding: 2rem 2rem 1rem; aspect-ratio: 16 / 6; }
.detail__visuel svg { width: 100%; height: 100%; overflow: visible; }
.detail__contenu { max-height: calc(100dvh - 3rem); overflow-y: auto; overscroll-behavior: contain; }
.detail__corps { padding: 1.75rem clamp(1.25rem, 4vw, 2.25rem) 2.25rem; display: grid; gap: 1.5rem; }
.detail__titre { font-size: var(--t-xl); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.detail__meta { font-size: var(--t-s); color: var(--c-principal); font-weight: 500; margin-top: .4rem; }
.detail__texte { color: var(--c-encre-douce); max-width: 40rem; }
.detail__soustitre { font-size: var(--t-s); font-weight: 650; margin-bottom: .6rem; }

.detail__actions { display: grid; gap: .5rem; }
.detail__actions li { position: relative; padding-left: 1.25rem; font-size: var(--t-s); }
.detail__actions li::before {
  content: "";
  position: absolute; left: 0; top: .55em;
  width: .45rem; height: .45rem;
  border-radius: 50%;
  background: var(--c-vegetal);
}

.chiffres { display: flex; flex-wrap: wrap; gap: 2rem; }
.chiffre__valeur { display: block; font-size: var(--t-xl); font-weight: 750; color: var(--c-principal); line-height: 1; }
.chiffre__libelle { font-size: var(--t-xs); color: var(--c-encre-douce); }

.detail__liens { display: flex; flex-wrap: wrap; gap: .6rem; }

/* Pastilles de format de fichier (fenêtre de détail + pages projets) */
.formats { display: flex; flex-wrap: wrap; gap: .3rem; }
.format {
  display: inline-block;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: .12rem .5rem;
  border-radius: var(--rayon-tag);
  line-height: 1.4;
  white-space: nowrap;
}
.format--csv   { background: var(--c-principal); color: #fff; }
.format--excel { background: var(--c-vegetal); color: var(--c-encre); }
.format--pdf   { background: var(--c-accent); color: var(--c-encre); }
.format--web   { border: 1.5px solid var(--c-encre-douce); color: var(--c-encre-douce); }

/* Flèche animée : le même fil pointillé que la chaîne de compétences */
.fleche {
  position: relative;
  align-self: center;
  width: 100%;
  min-width: 1.5rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--c-principal) 0 8px, transparent 8px 14px);
}
.fleche::after {
  content: "";
  position: absolute;
  right: -2px; top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid var(--c-principal);
  border-right: 2px solid var(--c-principal);
  transform: translateY(-50%) rotate(45deg);
}
.avec-animations .fleche { animation: mv-fil 1.2s linear infinite; }

/* Mini-schéma dans la fenêtre de détail */
.mini-schema {
  margin: 0;
  padding: 1.1rem 1.2rem;
  background: var(--c-fond);
  border: 1px solid var(--c-trait);
  border-radius: var(--rayon-carte);
  display: grid;
  gap: .8rem;
}
.mini-schema__flux {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(1.5rem, .35fr) minmax(0, 1fr) minmax(1.5rem, .35fr) minmax(0, 1fr);
  align-items: center;
  gap: .5rem;
}
.mini-schema__sources { display: grid; gap: .4rem; }
.mini-schema__sources li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem .6rem;
  padding: .45rem .7rem;
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: 12px;
}
.mini-schema__nom { font-size: var(--t-s); font-weight: 600; }
.mini-schema__etape,
.mini-schema__cible {
  display: grid;
  gap: .15rem;
  padding: .8rem .9rem;
  border-radius: 14px;
  font-size: var(--t-xs);
  line-height: 1.35;
}
.mini-schema__etape { background: var(--c-surface); border: 2px solid var(--c-principal); }
.mini-schema__cible { background: var(--c-principal); color: #fff; }
.mini-schema__etape strong,
.mini-schema__cible strong { font-size: var(--t-m); }
.mini-schema figcaption { font-size: var(--t-xs); color: var(--c-encre-douce); }

@media (max-width: 600px) {
  .mini-schema__flux { grid-template-columns: 1fr; }
  .mini-schema__flux .fleche { width: 2px; height: 1.5rem; min-width: 0; justify-self: center;
    background: repeating-linear-gradient(180deg, var(--c-principal) 0 8px, transparent 8px 14px); }
  .mini-schema__flux .fleche::after { right: auto; top: auto; bottom: -2px; left: 50%; transform: translateX(-50%) rotate(135deg); }
  .avec-animations .mini-schema__flux .fleche { animation: none; }
}
.detail__vide { font-size: var(--t-s); color: var(--c-encre-douce); font-style: italic; }

.apercu-pdf {
  width: 100%;
  height: 60vh;
  border: 1px solid var(--c-trait);
  border-radius: 12px;
  background: #fff;
}


/* 10. CONTACT + PIED DE PAGE ============================================== */
/* Bloc d'appel à l'action : fond encre, courbes de fréquentation en filigrane
   (même motif que le hero), bouton principal ocre. */
.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  background: var(--c-encre);
  color: var(--c-fond);
  border-radius: 40px 40px 40px 10px;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}
.contact::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 70%;
  z-index: -1;
  opacity: .5;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 300' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2386A585' stroke-width='1.5'%3E%3Cpath opacity='.35' d='M0 290 C200 285 320 240 420 250 S560 120 700 90 S860 200 960 230 S1120 270 1200 280'/%3E%3Cpath opacity='.5' d='M0 280 C220 272 330 215 430 228 S570 80 705 50 S870 180 965 215 S1125 262 1200 270'/%3E%3Cpath opacity='.7' d='M0 270 C240 260 340 190 440 205 S580 40 710 12 S880 160 970 200 S1130 255 1200 262'/%3E%3C/g%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}
.contact__surtitre {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--c-vegetal);
}
.contact__titre {
  font-size: clamp(2.75rem, 1.6rem + 5vw, 5.5rem);
  font-weight: 750;
  line-height: .95;
  letter-spacing: -.035em;
  font-variation-settings: "opsz" 96;
}
.contact__point { color: var(--c-accent); }
.contact__texte {
  max-width: 38rem;
  font-size: var(--t-m);
  line-height: 1.6;
  color: color-mix(in srgb, var(--c-fond) 82%, transparent);
}
.contact__actions { margin-top: .9rem; display: flex; flex-wrap: wrap; gap: .75rem; }
.bouton--cta {
  padding: 1rem 1.8rem;
  font-size: var(--t-m);
  background: var(--c-accent);
  border-color: var(--c-accent);
  color: var(--c-encre);
}
.bouton--cta:hover { background: var(--c-fond); border-color: var(--c-fond); color: var(--c-encre); }
.bouton--cta span { display: inline-block; transition: transform var(--duree); }
.bouton--cta:hover span { transform: translateX(4px); }
.bouton--clair { padding: 1rem 1.5rem; border-color: color-mix(in srgb, var(--c-fond) 45%, transparent); color: var(--c-fond); }
.bouton--clair:hover { background: var(--c-fond); border-color: var(--c-fond); color: var(--c-encre); }
.contact__infos {
  margin-top: .6rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.4rem;
  font-size: var(--t-s);
  color: color-mix(in srgb, var(--c-fond) 65%, transparent);
}
.contact__infos a { color: inherit; }

.pied {
  padding: 2rem var(--marge) calc(2rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: var(--t-xs);
  color: var(--c-encre-douce);
  border-top: 1px solid var(--c-trait);
}


/* 11. ANIMATIONS ===========================================================
   Les états "cachés" ne s'appliquent que si html a la classe .avec-animations
   (ajoutée par main.js, jamais si l'utilisateur a réduit les animations).
   Une mini-visualisation s'anime quand elle reçoit la classe .anime.
   --i = rang de l'élément, sert à décaler les départs.
   ========================================================================== */

/* Hero : pic qui pulse + repère au survol */
#courbes-hero { touch-action: pan-y; }
#courbes-hero .pulse .pic-halo {
  transform-box: fill-box;
  transform-origin: center;
  animation: mv-ping 2.4s ease-out infinite;
}
#courbes-hero .repere { opacity: 0; transition: opacity .2s; pointer-events: none; }
#courbes-hero.survol .repere { opacity: 1; }
#courbes-hero .repere-ligne { stroke: var(--c-encre); stroke-width: 1; stroke-dasharray: 2 4; opacity: .5; }
#courbes-hero .repere-point { fill: var(--c-surface); stroke: var(--c-encre); stroke-width: 2.5; }
#courbes-hero .repere-texte {
  font-family: var(--police);
  font-size: 15px;
  font-weight: 600;
  fill: var(--c-principal);
  paint-order: stroke;
  stroke: var(--c-fond);
  stroke-width: 5px;
}

/* Tracés qui se dessinent (pathLength="1" dans le SVG) */
.avec-animations .dessin { stroke-dasharray: 1; stroke-dashoffset: 1; }
.avec-animations .anime .dessin {
  animation: mv-dessin 1.1s cubic-bezier(.6, 0, .2, 1) calc(var(--i, 0) * .12s) both;
}
.avec-animations .anime .dessin--tard { animation-delay: 1s; }

/* Barres et aires qui poussent depuis le bas */
.avec-animations .pousse { transform: scaleY(0); transform-box: fill-box; transform-origin: 50% 100%; }
.avec-animations .anime .pousse {
  animation: mv-pousse .75s cubic-bezier(.3, 1.4, .5, 1) calc(var(--i, 0) * .06s) both;
}

/* Éléments qui éclosent */
.avec-animations .apparait { transform: scale(0); transform-box: fill-box; transform-origin: center; }
.avec-animations .anime .apparait {
  animation: mv-apparait .5s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i, 0) * .08s) both;
}

/* Halo qui pulse (pics, point d'arrivée) */
.ping { transform-box: fill-box; transform-origin: center; }
.avec-animations .ping { opacity: 0; }
.avec-animations .anime .ping { animation: mv-ping 2.4s ease-out 1s infinite; }

/* Véhicules qui circulent sur les routes (carte "flux") */
.flux-particules {
  fill: none;
  stroke: var(--c-surface);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: .1 17.9;
}
.avec-animations .flux-particules { opacity: 0; }
.avec-animations .anime .flux-particules {
  animation: mv-particules var(--vitesse, 2s) linear 1s infinite, mv-fondu .4s ease 1s forwards;
}

/* Paquets de données qui traversent la chaîne (carte "pipeline") */
.avec-animations .paquet { opacity: 0; }
.avec-animations .anime .paquet {
  animation: mv-paquet 2.6s linear calc(1.2s + var(--i, 0) * .87s) infinite;
}

/* Bulles qui flottent (carte "nuage") */
.avec-animations .anime .flotte {
  animation: mv-flotte var(--duree, 5s) ease-in-out calc(var(--i, 0) * -.7s) infinite alternate;
}

/* Chaîne de compétences : les étapes s'allument dans l'ordre, le fil circule */
.avec-animations .chaine__etape { opacity: 0; transform: translateY(14px); }
.avec-animations .chaine.anime .chaine__etape { animation: mv-montee .6s ease-out both; }
.avec-animations .chaine.anime .chaine__etape:nth-child(2) { animation-delay: .25s; }
.avec-animations .chaine.anime .chaine__etape:nth-child(3) { animation-delay: .5s; }
.avec-animations .chaine.anime .chaine__etape:nth-child(4) { animation-delay: .75s; }
.avec-animations .chaine::before { transform: scaleX(0); transform-origin: left; }
.avec-animations .chaine.anime::before {
  animation: mv-trace 1.2s ease-out both, mv-fil 1.2s linear 1.2s infinite;
}

/* Survol d'une carte : le visuel accélère légèrement */
.carte:hover .flux-particules,
.carte:hover .paquet { animation-duration: 1.2s; }

@keyframes mv-dessin    { to { stroke-dashoffset: 0; } }
@keyframes mv-pousse    { to { transform: scaleY(1); } }
@keyframes mv-apparait  { to { transform: scale(1); } }
@keyframes mv-ping      { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes mv-particules{ to { stroke-dashoffset: -36; } }
@keyframes mv-fondu     { to { opacity: 1; } }
@keyframes mv-paquet {
  0%   { transform: translateX(18px);  opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(182px); opacity: 0; }
}
@keyframes mv-flotte    { from { transform: translateY(-2.5px); } to { transform: translateY(2.5px); } }
@keyframes mv-montee    { to { opacity: 1; transform: none; } }
@keyframes mv-trace     { to { transform: scaleX(1); } }
@keyframes mv-fil       { to { background-position-x: 14px; } }


/* 12. RESPONSIVE ET MOUVEMENT RÉDUIT ====================================== */
@media (max-width: 900px) {
  .hero { align-items: flex-start; min-height: 0; padding-bottom: clamp(14rem, 45vw, 20rem); }
  /* Sur écran étroit le texte prend toute la largeur : voile du haut vers le bas */
  .hero::before {
    background: linear-gradient(180deg,
      color-mix(in srgb, var(--c-fond) 80%, transparent) 0%,
      color-mix(in srgb, var(--c-fond) 55%, transparent) 55%,
      transparent 75%);
  }
  .parcours { grid-template-columns: 1fr; }
  .chaine { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .chaine::before { display: none; }
  .aussi { grid-template-columns: 1fr; gap: 1.25rem; }
}

@media (max-width: 600px) {
  .nav__liens { display: none; }   /* page courte : le défilement suffit sur mobile */
  .hero__legende span:nth-child(even) { visibility: hidden; }
  .chaine { grid-template-columns: 1fr; }
  .section--teinte { border-radius: 28px; }
  .contact { border-radius: 28px 28px 28px 8px; }
  .contact__actions .bouton { width: 100%; text-align: center; }
  .hero__photo { width: 60px; height: 60px; }
}

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