/* ==========================================================================
   Base globale
   ========================================================================== */

/*
  Reset minimal :
  - box-sizing: border-box rend les dimensions plus prévisibles.
    Avec cette valeur, width/height incluent le padding et la bordure.
  - margin/padding à 0 supprime les espacements par défaut du navigateur.
*/
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/*
  Variables CSS globales.
  Elles centralisent les couleurs principales du site pour éviter de répéter
  les mêmes valeurs partout. On les utilise ensuite avec var(--nom-variable).
*/
:root {
  --bg-main: #F7F5F2;
  --bg-soft: #ECE2B7;
  --bg-gallery: #F1EFEA;
  --bg-science: #E7EEF6;
  --deep: #1E293B;
  --text-main: #161616;
  --text-soft: #5F5B53;
  --accent: #A78BFA;
  --accent-soft: #D8CCFF;
  --border-soft: rgba(22, 22, 22, 0.14);
  --font-title: "Space Grotesk", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/*
  Le site occupe toute la fenêtre.
  overflow: hidden empêche le scroll global du body : la navigation se fait
  en déplaçant .map, et seule la section "À propos" possède son propre scroll.
*/
html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: var(--font-text);
  background: var(--bg-main);
}

/* Les titres utilisent Space Grotesk. Le reste hérite d'Archivo depuis body. */
h1,
h2,
h3,
.hero-title,
.section-title,
.about-title {
  font-family: var(--font-title);
}

/* ==========================================================================
   Carte en croix
   ========================================================================== */

/*
  .viewport représente la fenêtre visible.
  position: fixed + inset: 0 le colle aux quatre bords de l'écran.
  Tout ce qui dépasse est caché pour ne montrer qu'une section à la fois.
*/
.viewport {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

/*
  .map est la grande carte qui contient les cinq sections.
  Elle fait 3 fois la largeur et 3 fois la hauteur de l'écran.

  Les sections sont placées comme ceci :

          [ À propos ]
  [ Contact ] [ Hero ] [ Projets ]
          [ Expertise ]

  Au chargement, transform: translate(-100vw, -100vh) place la section centrale
  dans la fenêtre visible. Le JS modifie ensuite ce transform pour naviguer.
*/
.map {
  position: absolute;
  width: 300vw;
  height: 300vh;
  left: 0;
  top: 0;
  transition: transform 800ms cubic-bezier(.22, 1, .36, 1);
  transform: translate(-100vw, -100vh);
}

/*
  Style commun à toutes les sections de la carte.
  Chaque section occupe exactement une fenêtre complète : 100vw x 100vh.
*/
.section {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
}

/*
  Position des cinq sections sur la carte.
  left/top indiquent leur emplacement dans la grille 3 x 3.
*/
.center {
  left: 100vw;
  top: 100vh;
  background: var(--bg-main);
  color: var(--text-main);
}

.section-1 {
  left: 100vw;
  top: 0;
  background: var(--bg-soft);
}

.section-2 {
  left: 200vw;
  top: 100vh;
  background: var(--bg-gallery);
}

.section-3 {
  left: 100vw;
  top: 200vh;
  background: var(--bg-science);
}

.section-4 {
  left: 0;
  top: 100vh;
  background: var(--deep);
  color: var(--bg-main);
}

/* ==========================================================================
   Typographie des sections simples
   ========================================================================== */

/* Titre principal de la section centrale. clamp() rend la taille responsive. */
.hero-title {
  margin-bottom: 1.2rem;
  font-size: clamp(2.5rem, 8vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.06em;
  line-height: 0.9;
}

/* Sous-titre de la section centrale, limité en largeur pour rester lisible. */
.hero-subtitle {
  max-width: 720px;
  margin: 0 auto;
  font-size: clamp(1rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: var(--text-soft);
  font-weight: 500;
  letter-spacing: -0.02em;
}

/* Ligne descriptive sous le sous-titre, en style "kicker" éditorial. */
.hero-kicker {
  margin-top: 1.4rem;
  font-size: clamp(0.72rem, 1.15vw, 0.9rem);
  line-height: 1.4;
  color: var(--text-soft);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Titres des sections Projets, Expertise et Travailler ensemble. */
.section-title {
  font-size: clamp(2rem, 6vw, 5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
}

/* ==========================================================================
   Section "À propos"
   ========================================================================== */

/*
  Cette section remplace le centrage flex de .section par une mise en page
  plus complexe. Elle est scrollable verticalement, contrairement au body.

  Les variables locales --about-pad et --about-bottom-gap servent à synchroniser
  les espacements de plusieurs éléments de cette section.
*/
.about-section {
  --about-pad: clamp(3rem, 5vw, 5rem);
  --about-bottom-gap: 4rem;
  position: relative;
  display: block;
  text-align: left;
  padding: var(--about-pad);
  overflow-y: auto;
  overflow-x: hidden;
  align-items: flex-start;
  justify-content: flex-start;
  background-color: var(--bg-soft);
}

/*
  Motif de fond répété sur toute la fenêtre.
  ::before crée un pseudo-élément décoratif sans ajouter de balise HTML.
  pointer-events: none évite qu'il bloque les clics.
*/
.about-section::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url('937953_ODE0A11.min.svg');
  background-repeat: repeat;
  background-position: top left;
  background-size: 260px auto;
  opacity: 0.105;
  mix-blend-mode: multiply;
}

/*
  Grand texte décoratif en arrière-plan.
  La variable --parallax-offset est mise à jour par script.js pendant le scroll.
*/
.about-bg-word {
  position: absolute;
  left: clamp(1rem, 4vw, 4rem);
  top: clamp(2rem, 6vh, 5rem);
  font-size: clamp(5rem, 16vw, 15rem);
  font-weight: 900;
  line-height: 0.82;
  letter-spacing: -0.09em;
  color: rgba(216, 204, 255, 0.58);
  mix-blend-mode: multiply;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  transform: translateY(var(--parallax-offset, 0px));
  transition: transform 0.08s linear;
}

/* Ancien emplacement possible pour un motif : conservé mais masqué. */
.about-pattern {
  display: none;
}

/* Ligne décorative SVG posée derrière le contenu. */
.about-line {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.22;
}

.about-line svg {
  width: 100%;
  height: 100%;
}

/* Le pointillé est produit par stroke-dasharray. */
.about-line path {
  fill: none;
  stroke: rgba(22,22,22,0.24);
  stroke-width: 1.2;
  stroke-dasharray: 6 10;
}

/*
  Grille principale de la section "À propos".
  Elle comporte deux colonnes sur desktop :
  - une zone image ;
  - une zone texte.
*/
.about-inner {
  position: relative;
  z-index: 2;
  width: min(1180px, 100%);
  min-height: calc(100vh - clamp(6rem, 10vw, 10rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(360px, 1.1fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: stretch;
  padding-bottom: var(--about-bottom-gap);
}

/*
  Bande photo horizontale.
  position: sticky la garde visible pendant une partie du scroll.
  .about-inner est limité en largeur, mais la bande doit couvrir tout l'écran.
  On ajoute 2rem de largeur pour dépasser légèrement des deux côtés.
  Cela évite un petit vide visuel causé par la barre de scroll verticale.
*/
.about-photo-band {
  --photo-band-height: min(68vh, 680px);
  --photo-tile-width: clamp(320px, 36vw, 470px);
  grid-column: 1 / -1;
  grid-row: 1;
  position: sticky;
  top: 10vh;
  align-self: start;
  z-index: 1;
  width: calc(100vw + 2rem);
  margin-left: calc(50% - 50vw - 1rem);
  height: var(--photo-band-height);
  min-height: 430px;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  pointer-events: none;
  box-shadow: 0 30px 80px rgba(30, 41, 59, 0.12);
}

/*
  Les tuiles et la photo centrale partagent les mêmes dimensions.
  flex: 0 0 var(...) fixe leur largeur dans la bande flex.
*/
.about-photo-tile,
.about-photo-wrap {
  flex: 0 0 var(--photo-tile-width);
  width: var(--photo-tile-width);
  height: 100%;
  min-height: 430px;
  position: relative;
  overflow: hidden;
}

/*
  Les tuiles décoratives utilisent la même photo que l'image centrale.
  L'URL est injectée dans --about-photo-url par le JavaScript.
*/
.about-photo-tile {
  background-image:
    linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.18)),
    var(--about-photo-url);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 62% center;
}

/* Voile sombre au-dessus des photos pour harmoniser le contraste. */
.about-photo-tile::after,
.about-photo-wrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.22));
  pointer-events: none;
}

/*
  Variantes visuelles des tuiles.
  Chaque classe ajuste filtre, opacité et position de fond pour éviter l'effet
  d'une simple répétition identique de la même image.
*/
.about-photo-tile.left-2 {
  filter: grayscale(0.62) saturate(0.38) brightness(0.76) contrast(1.06);
  opacity: 0.86;
  background-position: 48% center;
}

.about-photo-tile.left-1 {
  filter: grayscale(0.04) saturate(1.02) brightness(0.92) contrast(1.03);
  opacity: 0.96;
  background-position: 54% center;
}

.about-photo-tile.right-1 {
  filter: grayscale(0.16) saturate(0.84) brightness(0.86) contrast(1.02);
  opacity: 0.88;
  background-position: 60% center;
}

.about-photo-tile.right-2 {
  filter: grayscale(0.38) saturate(0.62) brightness(0.80) contrast(1.04);
  opacity: 0.86;
  background-position: 66% center;
}

.about-photo-tile.right-3 {
  filter: grayscale(0.58) saturate(0.44) brightness(0.77) contrast(1.06);
  opacity: 0.86;
  background-position: 70% center;
}

.about-photo-tile.right-4 {
  filter: grayscale(0.82) saturate(0.18) brightness(0.73) contrast(1.08);
  opacity: 0.88;
  background-position: 74% center;
}

.about-photo-tile.right-5 {
  filter: grayscale(1) contrast(1.12) brightness(0.68) blur(0.3px);
  opacity: 0.90;
  background-position: 78% center;
}

.about-photo-tile.right-6 {
  filter: grayscale(0.82) saturate(0.22) brightness(0.72) contrast(1.08);
  opacity: 0.88;
  background-position: 82% center;
}

.about-photo-tile.right-7 {
  filter: grayscale(0.62) saturate(0.36) brightness(0.76) contrast(1.06);
  opacity: 0.86;
  background-position: 70% center;
}

.about-photo-tile.right-8 {
  filter: grayscale(0.28) saturate(0.72) brightness(0.84) contrast(1.03);
  opacity: 0.88;
  background-position: 58% center;
}

.about-photo-tile.right-9 {
  filter: grayscale(0.48) saturate(0.54) brightness(0.80) contrast(1.05);
  opacity: 0.86;
  background-position: 64% center;
}

.about-photo-tile.right-10 {
  filter: grayscale(0.92) saturate(0.16) brightness(0.70) contrast(1.1);
  opacity: 0.88;
  background-position: 76% center;
}

/* Conteneur de la photo centrale, placé au-dessus des tuiles avec z-index. */
.about-photo-wrap {
  z-index: 2;
  box-shadow: 0 30px 80px rgba(30, 41, 59, 0.16);
}

/* Le <picture> doit occuper tout le cadre pour que l'image reste en cover. */
.about-photo-wrap picture {
  display: block;
  width: 100%;
  height: 100%;
}

/*
  Image centrale.
  object-fit: cover remplit le cadre sans déformer la photo.
*/
.about-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% center;
  display: block;
}

/*
  Bloc de texte au-dessus de la bande photo.
  Il est placé dans la deuxième colonne de la grille.
*/
.about-content {
  grid-column: 2;
  grid-row: 1;
  align-self: stretch;
  position: relative;
  z-index: 3;
  max-width: 680px;
  padding: clamp(2rem, 3vw, 3rem);
  color: #f5f1e8;
  isolation: isolate;
}

/*
  Fond translucide derrière le texte.
  Le z-index négatif fonctionne proprement grâce à isolation: isolate sur
  .about-content : le pseudo-élément reste derrière le contenu du bloc.
*/
.about-content::before {
  content: "";
  position: absolute;
  top: calc(-1 * var(--about-pad));
  right: 0;
  bottom: calc(-1 * var(--about-pad) - var(--about-bottom-gap));
  left: 0;
  z-index: -1;
  background: rgba(26, 20, 16, 0.66);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

/* Remet tous les enfants du bloc texte au-dessus du fond ::before. */
.about-content > * {
  position: relative;
  z-index: 1;
}

/* Couleurs adaptées au fond sombre du bloc de texte. */
.about-content .about-title,
.about-content .about-lead,
.about-content .about-text {
  color: #f5f1e8;
}

.about-content .about-eyebrow {
  color: #cbb7ff;
}

.about-content .about-tag {
  color: #f5f1e8;
  border-color: rgba(245, 241, 232, 0.28);
  background: rgba(245, 241, 232, 0.08);
}

/* Petit libellé au-dessus du titre. */
.about-eyebrow {
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Titre de la section "À propos". */
.about-title {
  margin-bottom: 1.6rem;
  font-size: clamp(2.2rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.06em;
}

/* Paragraphe d'introduction, plus grand et plus dense que le texte courant. */
.about-lead {
  margin-bottom: 1.8rem;
  font-size: clamp(1.15rem, 2vw, 1.45rem);
  line-height: 1.45;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -0.03em;
}

/* Groupe de paragraphes. display: grid + gap crée un espacement régulier. */
.about-text {
  display: grid;
  gap: 1rem;
  color: var(--text-soft);
  font-size: clamp(0.98rem, 1.3vw, 1.08rem);
  line-height: 1.75;
}

/* Liste visuelle des domaines principaux. */
.about-tags {
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}

/* Apparence de chaque tag. */
.about-tag {
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: rgba(247, 245, 242, 0.45);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/*
  Tablettes et petits écrans.
  La grille "À propos" passe en une colonne et la bande photo prend moins
  de hauteur pour laisser plus de place au texte.
*/
@media (max-width: 900px) {
  .about-section {
    overflow-y: auto;
    padding: 6rem 1.4rem 7rem;
  }

  .about-inner {
    height: auto;
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .about-photo-band {
    --photo-band-height: 46vh;
    --photo-tile-width: 100%;
    width: calc(100vw + 2rem);
    margin-left: calc(50% - 50vw - 1rem);
    min-height: 300px;
  }

  .about-photo-tile,
  .about-photo-wrap {
    min-height: 300px;
  }

  .about-content {
    grid-column: 1;
    grid-row: 1;
    max-width: none;
  }
}

/* Ajustements mobiles propres à la section "À propos". */
@media (max-width: 700px) {
  .about-photo-band {
    --photo-band-height: 34vh;
    --photo-tile-width: 72vw;
  }

  .about-content {
    width: min(100%, calc(100vw - 12rem));
    margin-right: auto;
    margin-left: auto;
    padding: 2rem 1.2rem;
  }

  .about-title {
    font-size: clamp(1.75rem, 7.8vw, 2.6rem);
    line-height: 1;
  }

  .about-lead {
    font-size: clamp(0.96rem, 3.9vw, 1.12rem);
  }

  .about-text {
    font-size: clamp(0.9rem, 3.6vw, 0.96rem);
  }
}

/* ==========================================================================
   Hero central
   ========================================================================== */

.hero-section {
  position: absolute;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 50%, rgba(167, 139, 250, 0.08), transparent 28rem),
    linear-gradient(180deg, #f8f5ef 0%, #f1eee8 100%);
  color: #050505;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 18% 24%, rgba(22, 22, 22, 0.035), transparent 18rem),
    radial-gradient(circle at 78% 72%, rgba(22, 22, 22, 0.028), transparent 20rem),
    linear-gradient(rgba(30, 41, 59, 0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(30, 41, 59, 0.018) 1px, transparent 1px);
  background-size: auto, auto, 150px 150px, 150px 150px;
  background-position: center;
  opacity: 1;
  mix-blend-mode: multiply;
}

.hero-bg-word {
  position: absolute;
  z-index: 0;
  left: 50%;
  width: 120vw;
  pointer-events: none;
  user-select: none;
  color: rgba(22, 22, 22, 0.04);
  font-family: var(--font-title);
  font-size: clamp(8rem, 19vw, 22rem);
  font-weight: 900;
  letter-spacing: -0.09em;
  line-height: 0.8;
  text-align: center;
  text-transform: uppercase;
  transform: translateX(-50%);
}

.hero-bg-word-top {
  top: 8vh;
}

.hero-bg-word-bottom {
  bottom: 8vh;
}

.hero-orbit {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  width: min(42vw, 680px);
  aspect-ratio: 1;
  border: 1px dashed rgba(167, 139, 250, 0.18);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -48%);
}

.hero-content {
  position: relative;
  z-index: 1;
  width: min(1080px, calc(100vw - 18rem));
  margin: 0 auto;
  text-align: center;
}

.hero-name {
  margin-bottom: clamp(2.2rem, 6vh, 4.6rem);
  color: #111;
  font-family: var(--font-text);
  font-size: clamp(1.05rem, 1.45vw, 1.45rem);
  font-weight: 500;
  line-height: 1.1;
}

.hero-name::after,
.hero-domains li::after,
.arrow-label::after {
  content: "";
  display: block;
  width: 2rem;
  height: 1px;
  margin: 0.8rem auto 0;
  background: #7c65a3;
}

.hero-title {
  margin-bottom: clamp(1.2rem, 2.8vh, 1.8rem);
  color: #050505;
  font-size: clamp(3.4rem, 5vw, 5.9rem);
  font-weight: 800;
  letter-spacing: -0.065em;
  line-height: 0.92;
}

.hero-dot {
  color: #7c65a3;
}

.hero-subtitle {
  max-width: 760px;
  margin: 0 auto;
  color: #101010;
  font-size: clamp(1.05rem, 1.55vw, 1.45rem);
  font-weight: 500;
  line-height: 1.38;
  letter-spacing: -0.025em;
}

.hero-kicker {
  margin-top: 1.1rem;
  color: #6f5f9c;
  font-size: clamp(0.86rem, 1.05vw, 1rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.4;
  text-transform: none;
}

.hero-kicker span {
  margin: 0 0.65rem;
  color: rgba(22, 22, 22, 0.5);
}

.hero-domains {
  margin-top: clamp(1.8rem, 4vh, 3rem);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(1.4rem, 4vw, 4rem);
  list-style: none;
}

.hero-domains li {
  position: relative;
  color: #050505;
  font-family: var(--font-title);
  font-size: clamp(0.72rem, 1vw, 0.92rem);
  font-weight: 700;
  letter-spacing: 0.34em;
  line-height: 1;
  text-transform: uppercase;
}

.hero-domains li + li::before {
  content: "+";
  position: absolute;
  left: calc(-1 * clamp(0.9rem, 2vw, 2.25rem));
  top: -0.12rem;
  color: #7c65a3;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 300;
  letter-spacing: 0;
}

/* ==========================================================================
   Navigation cardinale façon maquette
   ========================================================================== */

/*
  Ces boutons restent dans le DOM partout et le JS choisit lesquels afficher.
  --nav-ink permet de passer les pictogrammes du noir au blanc sans dupliquer
  le dessin CSS des icônes.
*/
.arrow {
  --nav-ink: #050505;
  --nav-surface: transparent;
  --nav-surface-hover: transparent;
  --nav-border: transparent;
  --nav-shadow: none;
  position: fixed;
  z-index: 20;
  width: clamp(7.5rem, 10vw, 10rem);
  height: auto;
  min-width: 0;
  max-width: none;
  padding: 0;
  background: var(--nav-surface);
  border: 1px solid var(--nav-border);
  border-radius: 0;
  box-shadow: var(--nav-shadow);
  color: var(--nav-ink);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.2s ease, background 0.2s ease;
}

.arrow.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.arrow.is-active {
  opacity: 1;
  pointer-events: none;
}

.arrow:hover {
  background: var(--nav-surface-hover);
  transform: scale(1.04);
}

.arrow-label {
  width: 100%;
  color: var(--nav-ink);
  font-family: var(--font-title);
  font-size: clamp(0.86rem, 1.05vw, 1.1rem);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.05;
  text-transform: none;
}

.arrow-icon {
  position: relative;
  width: 3.8rem;
  height: 3.8rem;
  background: transparent;
  border-radius: 0;
  color: var(--nav-ink);
}

.arrow-icon::before,
.arrow-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.arrow-up .arrow-icon::before {
  left: 50%;
  top: 0.1rem;
  width: 2.35rem;
  height: 2.35rem;
  border: 2px solid var(--nav-ink);
  transform: translateX(-50%);
}

.arrow-up .arrow-icon::after {
  left: 50%;
  top: 2.05rem;
  width: 0.82rem;
  height: 0.82rem;
  background: #7c65a3;
  transform: translateX(-50%);
}

.arrow-left .arrow-icon::before {
  left: 1.8rem;
  top: 1.65rem;
  width: 2.15rem;
  height: 2.15rem;
  border: 2px solid var(--nav-ink);
}

.arrow-left .arrow-icon::after {
  left: 0.65rem;
  top: 0.85rem;
  width: 2.15rem;
  height: 2.15rem;
  border: 2px solid #7c65a3;
}

.arrow-right .arrow-icon {
  width: 3.4rem;
  height: 3.4rem;
  background:
    linear-gradient(#7c65a3, #7c65a3) 0.35rem 0.35rem / 0.46rem 0.46rem no-repeat,
    linear-gradient(var(--nav-ink), var(--nav-ink)) 1.45rem 0.35rem / 0.46rem 0.46rem no-repeat,
    linear-gradient(var(--nav-ink), var(--nav-ink)) 2.55rem 0.35rem / 0.46rem 0.46rem no-repeat,
    linear-gradient(var(--nav-ink), var(--nav-ink)) 0.35rem 1.45rem / 0.46rem 0.46rem no-repeat,
    linear-gradient(var(--nav-ink), var(--nav-ink)) 1.45rem 1.45rem / 0.46rem 0.46rem no-repeat,
    linear-gradient(var(--nav-ink), var(--nav-ink)) 2.55rem 1.45rem / 0.46rem 0.46rem no-repeat,
    linear-gradient(var(--nav-ink), var(--nav-ink)) 0.35rem 2.55rem / 0.46rem 0.46rem no-repeat,
    linear-gradient(var(--nav-ink), var(--nav-ink)) 1.45rem 2.55rem / 0.46rem 0.46rem no-repeat,
    linear-gradient(var(--nav-ink), var(--nav-ink)) 2.55rem 2.55rem / 0.46rem 0.46rem no-repeat;
}

.arrow-down .arrow-icon::before {
  left: 50%;
  top: 50%;
  width: 2.55rem;
  height: 2.55rem;
  border: 1.5px solid var(--nav-ink);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.arrow-down .arrow-icon::after {
  inset: 0;
  background:
    linear-gradient(#7c65a3, #7c65a3) center / 100% 1px no-repeat,
    linear-gradient(var(--nav-ink), var(--nav-ink)) center / 1px 100% no-repeat,
    radial-gradient(circle at center, rgba(124, 101, 163, 0.35) 0 0.85rem, transparent 0.9rem);
}

/*
  Variante de navigation sur la section "À propos".
  Les boutons passent dans un conteneur sombre translucide pour rester lisibles
  au-dessus de la bande photo et du bloc texte.
*/
body[data-current-section="top"] .arrow {
  --nav-ink: #f5f1e8;
  --nav-surface: rgba(26, 20, 16, 0.68);
  --nav-surface-hover: rgba(26, 20, 16, 0.78);
  --nav-border: rgba(245, 241, 232, 0.16);
  --nav-shadow: 0 18px 48px rgba(0, 0, 0, 0.16);
  padding: 0.7rem 0.8rem;
  border-radius: 8px;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.arrow-up {
  top: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
}

.arrow-up:hover {
  transform: translateX(-50%) scale(1.04);
}

.arrow-left {
  left: clamp(2.4rem, 4vw, 4rem);
  top: 50%;
  transform: translateY(-50%);
}

.arrow-left:hover {
  transform: translateY(-50%) scale(1.04);
}

.arrow-right {
  right: clamp(2.4rem, 4vw, 4rem);
  top: 50%;
  transform: translateY(-50%);
}

.arrow-right:hover {
  transform: translateY(-50%) scale(1.04);
}

.arrow-down {
  bottom: 1.8rem;
  left: 50%;
  transform: translateX(-50%);
}

.arrow-down:hover {
  transform: translateX(-50%) scale(1.04);
}

@media (max-width: 900px) {
  .hero-content {
    width: min(720px, calc(100vw - 9rem));
  }

  .hero-title {
    font-size: clamp(2.8rem, 8vw, 5rem);
  }

  .hero-domains {
    gap: 1.6rem;
  }

  .hero-domains li {
    letter-spacing: 0.2em;
  }

  .arrow {
    width: 7rem;
  }
}

@media (max-width: 700px) {
  .hero-section {
    padding: 6rem 1.1rem;
  }

  .hero-bg-word {
    font-size: clamp(5rem, 27vw, 8rem);
  }

  .hero-bg-word-top {
    top: 8vh;
  }

  .hero-bg-word-bottom {
    bottom: 8vh;
  }

  .hero-content {
    width: min(100%, calc(100vw - 2.2rem));
  }

  .hero-name {
    margin-bottom: 2.6rem;
  }

  .hero-title {
    max-width: calc(100vw - 11rem);
    margin-right: auto;
    margin-left: auto;
    font-size: clamp(2rem, 9.8vw, 3.05rem);
    line-height: 0.96;
  }

  .hero-subtitle br {
    display: none;
  }

  .hero-kicker span {
    margin: 0 0.35rem;
  }

  .hero-domains {
    flex-wrap: wrap;
    gap: 1.2rem 1.8rem;
  }

  .hero-domains li + li::before {
    display: none;
  }

  .arrow {
    width: 5.4rem;
    gap: 0.3rem;
  }

  .arrow-icon {
    transform: scale(0.72);
  }

  .arrow-label {
    font-size: 0.7rem;
  }

  .arrow-up { top: 1rem; }
  .arrow-right { right: 0.75rem; }
  .arrow-down { bottom: 1rem; }
  .arrow-left { left: 0.75rem; }
}