/* ==========================================================================
   MAFOTO — Socle éditorial
   Fusion de trois références, chacune pour ce qu'elle fait le mieux :

     FIBER      discipline typographique, micro-nav, dock flottant, la Pile 3D
     MILES      display géant en graisse LÉGÈRE, grandes tuiles média, roulement de texte
     FUSION AI  cartes de verre, arc lumineux tournant en conic-gradient

   Toutes les valeurs ci-dessous sont relevées sur les sites en production,
   pas estimées à l'œil.
   ========================================================================== */

/* Inter Display — la police des deux références. Le poids visé est 300/400,
   jamais 700 : chez Miles le titre de 206 px est en graisse 400. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&display=swap');

:root {
  /* --- Couleurs — parti pris CLAIR, définitif -----------------------------
     C'est le fond de Fiber. Le blanc cassé plutôt que le blanc pur : le #fff
     brûle à côté d'une photo. L'encre est un noir doux, pas un #000 qui vibre. */
  --paper:  #fafafa;
  --ink:    #121212;

  --ink-1: rgba(18, 18, 18, 1);
  --ink-2: rgba(18, 18, 18, .68);
  --ink-3: rgba(18, 18, 18, .45);
  --rule:  rgba(18, 18, 18, .10);

  /* Surfaces de verre — la recette de Fusion AI, transposée sur fond clair */
  --glass-bg:     rgba(255, 255, 255, .55);
  --glass-border: rgba(18, 18, 18, .10);
  --glass-blur:   16px;

  /* Or de marque : un seul usage, l'arc lumineux. Nulle part ailleurs. */
  --beam: #ffc000;

  /* --- Typographie ------------------------------------------------------
     Trois tailles utilitaires (Fiber) + une échelle display (Miles). */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --t-meta:  12px;
  --t-body:  14px;
  --t-lead:  20px;
  --t-read:  24px;                              /* corps long, Miles */
  --t-display: clamp(64px, 13.5vw, 206px);      /* Miles : 206 px exactement */

  --w-light:  300;
  --w-normal: 400;
  --w-medium: 500;

  /* --- Structure --------------------------------------------------------- */
  --gutter: 16px;
  --radius: 14px;        /* Fiber laisse carré, Fusion AI arrondit à 16 px */
  --radius-pill: 999px;

  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  400ms;
}

/* --------------------------------------------------------------------------
   Socle
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--font);
  font-size: var(--t-body);
  font-weight: var(--w-normal);
  line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

/* --------------------------------------------------------------------------
   PAS DE BARRE DE DÉFILEMENT NATIVE
   C'est elle, la « colonne blanche » à droite : 15 px de piste claire posés
   par le système sur toute la hauteur. Sur une ouverture sombre pleine page
   elle coupe la vidéo, et surtout elle tranche la diagonale en deux — le bord
   incliné s'arrête net avant le bord de l'écran.
   On la retire et on la remplace par un filet de progression de 2 px
   (.progress), neutre, qui se lit aussi bien sur noir que sur blanc.

   `overflow-x: clip` plutôt que `hidden` : `clip` ne crée pas de conteneur de
   défilement, donc la bande diagonale peut déborder de 8 % de chaque côté sans
   allonger la page ni bloquer le `position: fixed`.
   -------------------------------------------------------------------------- */
html {
  overflow-x: clip;
  scrollbar-width: none;             /* Firefox */
  -ms-overflow-style: none;          /* Edge ancien */
}
html::-webkit-scrollbar { width: 0; height: 0; }

.progress {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: 60;
  width: 2px;
  background: rgba(128, 128, 128, .14);
  pointer-events: none;
}
.progress span {
  display: block;
  width: 100%;
  height: calc(var(--p, 0) * 100%);
  background: rgba(128, 128, 128, .62);
}
@media (max-width: 640px) { .progress { display: none; } }

/* La page défile verticalement comme n'importe quelle landing.
   Le défilement horizontal est confiné à la Pile et ne détourne jamais la
   molette verticale — sinon on piège le visiteur dans la section. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:where(a, button, [tabindex]):focus-visible {
  outline: 1px solid var(--ink-1);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --------------------------------------------------------------------------
   Classes de texte
   -------------------------------------------------------------------------- */
.meta {
  font-size: var(--t-meta);
  font-weight: var(--w-medium);
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-1);
}
.meta--dim { color: var(--ink-2); }

.lead {
  font-size: var(--t-lead);
  font-weight: var(--w-normal);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* L'échelle Miles : énorme, mais LÉGÈRE. C'est ce contraste qui fait la
   différence entre « éditorial » et « template d'agence ». */
.display {
  font-size: var(--t-display);
  font-weight: var(--w-normal);
  line-height: .8;
  letter-spacing: -0.06em;
}
.display--light { font-weight: var(--w-light); }

.rule { height: 1px; background: var(--rule); border: 0; }

/* --------------------------------------------------------------------------
   En-tête : micro-information seulement (Fiber)
   -------------------------------------------------------------------------- */
.head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: var(--gutter);
  padding-top: max(var(--gutter), env(safe-area-inset-top));
  color: var(--ink-1);
}
.head__clock { min-width: 42px; font-variant-numeric: tabular-nums; }
.head__spacer { flex: 1; }
.head__social { display: flex; gap: 14px; }
.head__social a {
  color: var(--ink-2);
  transition: color var(--dur) var(--ease);
  /* Une cible tactile de 20 px de haut se rate une fois sur trois. On monte à
     40 px sans bouger la ligne de base : le texte reste centré dans sa boîte. */
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding-inline: 2px;
}
.head__social a:hover { color: var(--ink-1); }
@media (max-width: 640px) { .head__hide { display: none; } }

/* --- LE VOILE DE L'EN-TÊTE ------------------------------------------------
   Sur grand écran, l'en-tête flotte sur des marges vides : elle se lit sans
   fond. Sur téléphone il n'y a PLUS de marge — le corps de page passe à 16 px
   sous elle, et « 15:47 ANTANANARIVO MAFOTO » se retrouve écrit par-dessus le
   titre d'une section ou une photo en plein soleil. Illisible dans les deux
   sens : ni l'en-tête, ni la page.

   On lui donne donc la même assise que celle du bas de fenêtre (.veil) :
   un dégradé qui suit le chapitre survolé — clair sur le corps éditorial,
   sombre sur l'ouverture et les chapitres noirs. Uniquement sous 900 px :
   le bureau ne change pas.
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .head::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    z-index: -1;
    /* 76 px : la hauteur de la barre (16 + 40 + 16) plus une lisière de
       fondu. Plus haut, le voile blanchissait la PREMIÈRE LIGNE du paragraphe
       qui passe dessous — on gagnait la lisibilité de l'en-tête en perdant
       celle de la page. */
    height: 76px;
    background: linear-gradient(180deg,
      var(--head-wash, rgba(250, 250, 250, .90)) 0%,
      var(--head-wash, rgba(250, 250, 250, .90)) 58%,
      transparent 100%);
    transition: background var(--dur) var(--ease);
    pointer-events: none;
  }
  body[data-head='dark'] { --head-wash: rgba(6, 6, 10, .78); }
}

/* Sous 420 px il ne reste de la place que pour l'essentiel : l'heure, la
   marque, les quatre réseaux. La ville est déjà dite trois fois plus bas. */
@media (max-width: 420px) {
  .head { gap: 10px; }
  .head__city { display: none; }
  .head__social { gap: 10px; }
}

/* --------------------------------------------------------------------------
   Dock flottant — verre (Fusion AI) + forme (Fiber)
   -------------------------------------------------------------------------- */
.dock {
  position: fixed;
  left: 50%;
  bottom: max(14px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-pill);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.5);
}
.dock a {
  padding: 9px 17px;
  border-radius: var(--radius-pill);
  color: var(--ink-2);
  white-space: nowrap;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dock a:hover { color: var(--ink-1); }
.dock a[aria-current='page'] {
  background: #fff;
  color: var(--ink-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
}

/* --------------------------------------------------------------------------
   LE DOCK NE TIENT PAS SUR UN TÉLÉPHONE — mesuré, pas supposé.
   Sept entrées à 17 px de padding font 513 px de large. Dans une fenêtre de
   406 px, il dépasse de 53 px de chaque côté ; et comme `html` est en
   `overflow-x: clip`, ce dépassement n'est pas défilable : « Index » et
   « Contact » sont simplement INTROUVABLES.

   On ne coupe aucune entrée — chacune mène à un chapitre qui existe. On rend
   la pastille défilable horizontalement, avec un aimant sur chaque lien et
   un fondu aux deux bords pour dire qu'il y a une suite. index.html amène en
   plus le chapitre courant dans le champ : le dock suit la lecture.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .dock {
    max-width: calc(100vw - 24px);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Le fondu doit épargner le fond de verre : il ne porte que sur le
       contenu, donc on masque la piste, pas la pastille. */
    scroll-padding-inline: 12px;
  }
  .dock::-webkit-scrollbar { width: 0; height: 0; }
  .dock a { scroll-snap-align: center; }
}

@media (max-width: 560px) {
  .dock { font-size: 13px; }
  .dock a { padding: 10px 12px; }
}

@media (max-width: 400px) {
  .dock a { padding: 10px 10px; }
}

/* --------------------------------------------------------------------------
   Coins
   -------------------------------------------------------------------------- */
/* Les repères de coin appartiennent au premier écran, pas à toute la page :
   en `fixed` ils venaient chevaucher le bloc contact plus bas. */
.corner {
  position: absolute;
  bottom: var(--gutter);
  z-index: 40;
  color: var(--ink-3);
  font-size: var(--t-body);
}
.corner--left  { left: var(--gutter); }
.corner--right { right: var(--gutter); }
.corner--right a:hover { color: var(--ink-1); }
@media (max-width: 1024px) { .corner { display: none; } }

/* --------------------------------------------------------------------------
   Sections de la landing
   -------------------------------------------------------------------------- */
.section {
  position: relative;
  padding: clamp(80px, 12vh, 160px) var(--gutter);
}

/* --------------------------------------------------------------------------
   CHAPITRE SOMBRE                                                  [FUEL]
   Chez Fuel le corps alterne : noir, puis blanc, puis noir. Ce n'est pas de la
   décoration — c'est ce qui découpe la page en chapitres sans avoir à poser un
   trait de séparation à chaque fois.

   Le bloc ne change pas de règles : il REDÉFINIT les jetons d'encre. Tout ce
   qui est écrit avec `--ink-*`, `--rule` ou `--glass-*` bascule tout seul,
   cartes de verre comprises. Aucune règle en double, aucun `!important`.
   -------------------------------------------------------------------------- */
.section--dark {
  --ink-1: rgba(255, 255, 255, 1);
  --ink-2: rgba(255, 255, 255, .66);
  --ink-3: rgba(255, 255, 255, .44);
  --rule:  rgba(255, 255, 255, .14);
  --glass-bg:     rgba(255, 255, 255, .05);
  --glass-border: rgba(255, 255, 255, .13);

  background: #08080b;
  color: var(--ink-1);
}
.section__head {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 12px;
  margin-bottom: clamp(32px, 6vh, 72px);
  border-bottom: 1px solid var(--rule);
}
.section__title { font-size: var(--t-lead); font-weight: var(--w-medium); }
.section__note { margin-left: auto; color: var(--ink-3); }

/* Le titre et sa note sont sur UNE ligne, poussés aux deux bords. À 375 px,
   « Sur le terrain » et « Immobilier · Corporate · Évènementiel » se marchent
   dessus, les deux à moitié coupés. On les empile : la note passe dessous,
   alignée à gauche comme tout le reste. */
@media (max-width: 640px) {
  .section__head { flex-wrap: wrap; gap: 2px 16px; }
  .section__note { margin-left: 0; flex-basis: 100%; }
}

/* Paragraphe d'intro : étroit et à gauche, comme chez Fiber. */
.section__lede {
  max-width: 34ch;
  font-size: var(--t-lead);
  line-height: 1.35;
  color: var(--ink-2);
  margin-bottom: clamp(28px, 5vh, 56px);
}

/* Révélations à l'entrée dans le champ de vision */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease);
  transition-delay: var(--reveal-delay, 0ms);
}
[data-reveal='in'] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}