/* ============================================================
   EDGE QUANTUM 65 — système de design
   Noir d'atelier · os chaud · ambre résine
   (repris du système DUSVAL, adapté labo)
   ============================================================ */

:root {
  --noir: #0a0a0b;
  --noir-2: #101012;
  --encre: #e8e3d8;
  --brume: #918b7f;
  --ambre: #b98a44;
  --ambre-doux: rgba(185, 138, 68, .55);
  --filet: rgba(232, 227, 216, .13);
  --serif: 'Cormorant Garamond', 'Times New Roman', serif;
  --sans: 'Jost', 'Segoe UI', sans-serif;
  --mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
img, svg, video { max-width: 100%; height: auto; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--ambre);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--noir);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--ambre); color: var(--noir); }

/* ---- grain ---- */
.grain {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 90;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 7s steps(6) infinite;
}
@keyframes grain {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-4%,3%); }
  40% { transform: translate(3%,-5%); }
  60% { transform: translate(-5%,-2%); }
  80% { transform: translate(4%,4%); }
}

/* ---- navigation ---- */
nav {
  position: fixed; top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 48px;
  z-index: 100;
  transition: background .5s ease, padding .5s ease;
}
nav.scrolled {
  background: rgba(10,10,11,.86);
  backdrop-filter: blur(14px);
  padding: 16px 48px;
  border-bottom: 1px solid var(--filet);
}
.wordmark {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: .34em;
  margin-right: -.34em;
  color: var(--encre);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark b { color: var(--ambre); font-weight: 500; }
nav ul { display: flex; gap: 38px; list-style: none; }
nav ul a {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--brume);
  text-decoration: none;
  transition: color .35s;
}
nav ul a:hover, nav ul a.actif { color: var(--ambre); }

/* ---- héros ---- */
.hero {
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  position: relative;
  padding: 130px 24px 90px;
}
.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 8.4vw, 118px);
  letter-spacing: .24em;
  margin-right: -.24em;
  line-height: 1.05;
  animation: lever 2.4s cubic-bezier(.19,1,.22,1) both .3s;
}
.hero h1 b { color: var(--ambre); font-weight: 400; }
.hero .sous-titre {
  margin-top: 48px;
  max-width: 640px;
  font-style: italic;
  font-size: clamp(19px, 2.4vw, 25px);
  color: var(--brume);
  animation: lever 2.4s cubic-bezier(.19,1,.22,1) both .9s;
}
.hero .echo {
  margin-top: 20px;
  font-family: var(--sans);
  font-size: 10.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(145,139,127,.55);
  animation: lever 2.4s both 1.3s;
}
.hero .pieds {
  margin-top: 46px;
  display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center;
  animation: lever 2.4s both 1.6s;
}
.hero .pieds span {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(145,139,127,.7);
}
@keyframes lever {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}
.fil-descente {
  position: absolute; bottom: 38px; left: 50%;
  width: 1px; height: 64px;
  background: linear-gradient(var(--ambre), transparent);
  animation: fil 2.8s ease-in-out infinite;
}
@keyframes fil {
  0% { transform: scaleY(0); transform-origin: top; }
  45% { transform: scaleY(1); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---- structure commune ---- */
main { max-width: 1160px; margin: 0 auto; padding: 0 32px; }
.section { padding: 130px 0 40px; }
.section-tete { padding-top: 180px; }

.sur-titre {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .44em;
  text-transform: uppercase;
  color: var(--ambre);
  margin-bottom: 26px;
  display: block;
}
.titre-section {
  font-weight: 400;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.2;
  margin-bottom: 34px;
  max-width: 760px;
}
.texte-courant { max-width: 660px; color: var(--brume); font-size: 20px; }
.texte-courant + .texte-courant { margin-top: 24px; }
.filet { border: none; border-top: 1px solid var(--filet); margin: 90px 0; }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity 1.2s cubic-bezier(.19,1,.22,1), transform 1.2s cubic-bezier(.19,1,.22,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Le navigateur ne calcule que ce qui est proche de l'écran. */
.section { content-visibility: auto; contain-intrinsic-size: 900px; }
.hero { content-visibility: visible; }

/* ---- piliers ---- */
.piliers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; margin-top: 70px; }
.pilier .numeral {
  font-family: var(--sans); font-size: 12px; letter-spacing: .4em;
  color: var(--ambre); display: block; margin-bottom: 20px;
}
.pilier h3 { font-weight: 400; font-size: 25px; margin-bottom: 14px; }
.pilier p { color: var(--brume); font-size: 17.5px; }

/* ---- deux pôles ---- */
.poles { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; margin-top: 70px; }
.pole {
  display: block; text-decoration: none; color: inherit;
  border: 1px solid var(--filet);
  background:
    radial-gradient(120% 90% at 50% 108%, rgba(185,138,68,.12), transparent 55%),
    linear-gradient(180deg, var(--noir-2), #0c0c0e);
  padding: 52px 42px 46px;
  transition: transform .8s cubic-bezier(.19,1,.22,1), border-color .8s;
}
.pole:hover { transform: translateY(-8px); border-color: var(--ambre-doux); }
.pole .numeral { font-family: var(--sans); font-size: 11px; letter-spacing: .4em; color: var(--ambre); }
.pole h3 { font-weight: 400; font-size: 31px; margin: 20px 0 16px; }
.pole p { color: var(--brume); font-size: 17.5px; }
.pole .suite {
  display: inline-block; margin-top: 30px;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .32em;
  text-transform: uppercase; color: var(--ambre);
}

/* ---- bande de chiffres ---- */
.chiffres {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 34px; margin-top: 70px;
  border-top: 1px solid var(--filet);
  border-bottom: 1px solid var(--filet);
  padding: 46px 0;
}
.chiffre .valeur { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--encre); }
.chiffre .valeur small { font-size: 20px; color: var(--brume); margin-left: 6px; }
.chiffre .etiquette {
  margin-top: 14px; font-family: var(--sans); font-size: 10.5px;
  letter-spacing: .3em; text-transform: uppercase; color: var(--brume); display: block;
}
.chiffre .source {
  margin-top: 10px; font-family: var(--sans); font-size: 10px;
  letter-spacing: .12em; color: rgba(145,139,127,.55); display: block;
}

/* ---- briques technologiques ---- */
.briques { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 30px; margin-top: 66px; }
.brique {
  border: 1px solid var(--filet);
  background: linear-gradient(180deg, var(--noir-2), #0c0c0e);
  padding: 36px 32px 32px;
  transition: border-color .8s;
}
.brique:hover { border-color: var(--ambre-doux); }
.brique .etage {
  font-family: var(--sans); font-size: 10px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--ambre); display: block; margin-bottom: 18px;
}
.brique h3 { font-weight: 400; font-size: 24px; margin-bottom: 14px; }
.brique p { color: var(--brume); font-size: 16.5px; }
.brique .tech {
  margin-top: 22px; font-family: var(--mono); font-size: 11.5px;
  color: rgba(232,227,216,.6); display: block;
}

/* ---- portefeuille ---- */
.lignes { margin-top: 66px; display: grid; gap: 22px; }
.ligne {
  display: grid; grid-template-columns: 92px 1fr auto;
  gap: 30px; align-items: center;
  border: 1px solid var(--filet);
  padding: 30px 34px;
  transition: border-color .8s;
}
.ligne:hover { border-color: var(--ambre-doux); }
.ligne .secteur {
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ambre);
}
.ligne h3 { font-weight: 400; font-size: 23px; margin-bottom: 8px; }
.ligne p { color: var(--brume); font-size: 16.5px; }
.ligne .niveau {
  font-family: var(--sans); font-size: 10px; letter-spacing: .28em;
  text-transform: uppercase; color: var(--brume); white-space: nowrap;
  border: 1px solid var(--filet); padding: 8px 16px;
}

/* ---- tableau ---- */
.table-registre { width: 100%; border-collapse: collapse; margin-top: 56px; font-family: var(--sans); font-size: 13.5px; }
.table-registre th {
  text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: .34em;
  text-transform: uppercase; color: var(--brume); padding: 14px 18px;
  border-bottom: 1px solid var(--filet);
}
.table-registre td { padding: 18px; border-bottom: 1px solid var(--filet); color: var(--brume); overflow-wrap: break-word; }
.table-registre td.fort { color: var(--encre); }
.table-registre td.hash { color: var(--encre); font-family: var(--mono); font-size: 12.5px; overflow-wrap: anywhere; }
.table-registre td .attente { color: var(--ambre); font-size: 10.5px; letter-spacing: .28em; text-transform: uppercase; }
/* Sur écran étroit, les tableaux deviennent des fiches empilées. */
.table-registre.empilable, .table-registre { word-break: normal; }

/* ---- tableau responsive (mobile) ---- */
@media (max-width: 720px) {
  .table-registre { display: block; }
  .table-registre thead { display: none; }
  .table-registre tbody { display: block; }
  .table-registre tr { display: block; border: 1px solid var(--filet); padding: 6px 16px; margin-top: 16px; }
  .table-registre td { display: block; padding: 9px 0; border: none; }
  .table-registre td.fort { font-size: 15px; }
  .table-registre td.hash { font-size: 11.5px; }
}


/* ---- code / pseudocode ---- */
.bloc-code {
  margin-top: 44px;
  border: 1px solid var(--filet);
  background: #0c0c0e;
  padding: 34px 34px 30px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bloc-code pre { font-family: var(--mono); font-size: 13px; line-height: 1.85; color: rgba(232,227,216,.86); white-space: pre; }
.bloc-code pre .c { color: rgba(145,139,127,.75); }

/* ---- notes ---- */
.note {
  margin-top: 46px; padding: 26px 30px;
  border-left: 1px solid var(--ambre-doux);
  background: rgba(185,138,68,.045);
  color: var(--brume); font-size: 17px; font-style: italic;
  max-width: 760px;
}
.note strong { color: var(--encre); font-style: normal; font-weight: 400; }

/* ---- contact ---- */
.contact-bloc { max-width: 580px; margin: 0 auto; text-align: center; }
.contact-bloc .courriel {
  display: inline-block; margin-top: 44px;
  font-family: var(--sans); font-size: 15px; letter-spacing: .22em;
  color: var(--encre); text-decoration: none;
  border-bottom: 1px solid var(--ambre-doux); padding-bottom: 6px;
  transition: color .4s;
}
.contact-bloc .courriel:hover { color: var(--ambre); }
.avertissement { margin-top: 70px; font-style: italic; color: var(--brume); font-size: 17px; }

/* ---- pied de page ---- */
footer {
  margin-top: 140px;
  padding: 44px 48px;
  border-top: 1px solid var(--filet);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--sans); font-size: 10.5px; letter-spacing: .3em;
  text-transform: uppercase; color: rgba(145,139,127,.6);
}
footer a { color: rgba(145,139,127,.7); text-decoration: none; }
footer a:hover { color: var(--ambre); }

/* ---- responsive ---- */
@media (max-width: 900px) {
  nav { padding: 14px 14px; flex-direction: column; gap: 10px; }
  nav.scrolled { padding: 10px 14px; }
  nav ul {
    display: grid;
    grid-template-columns: repeat(3, auto);
    gap: 8px 16px;
    justify-content: center;
    text-align: center;
  }
  nav ul a { font-size: 10px; letter-spacing: .1em; }
  .wordmark { font-size: 16px; letter-spacing: .22em; margin-right: -.22em; }
  .piliers, .poles { grid-template-columns: 1fr; gap: 40px; }
  .chiffres { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .ligne { grid-template-columns: 1fr; gap: 14px; }
  main { padding: 0 20px; }
  .section { padding: 96px 0 30px; }
  footer { flex-direction: column; gap: 16px; text-align: center; }
}

@media (max-width: 620px) {
  nav { padding: 12px 10px; gap: 8px; }
  nav ul { gap: 6px 14px; }
  nav ul a { font-size: 9.5px; letter-spacing: .08em; }
  .wordmark { font-size: 15px; letter-spacing: .18em; margin-right: -.18em; }
  .hero { min-height: auto; padding: 130px 18px 70px; }
  .hero .sous-titre { margin-top: 28px; }
  .hero .pieds { margin-top: 32px; gap: 10px 22px; }
  .fil-descente { display: none; }
}




@media (max-width: 480px) {
  body { font-size: 17.5px; }
  nav ul { gap: 8px 14px; }
  nav ul a { font-size: 9.5px; letter-spacing: .16em; }
  .section { padding: 76px 0 24px; }
  .section-tete { padding-top: 150px; }
  main { padding: 0 18px; }
  .chiffres { grid-template-columns: 1fr; gap: 24px; padding: 34px 0; }
  .brique { padding: 28px 24px 24px; }
  .pole { padding: 38px 28px 34px; }
  .bloc-code { padding: 22px 18px 20px; }
  .bloc-code pre { font-size: 11.5px; }
  .ligne { padding: 24px 22px; }
}


@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ---- menu sur téléphone et tablette (29/09/2026) ----
   Le menu fixe passait sur 3 lignes et recouvrait le titre de l'accueil.
   Sous 900 px, il reprend sa place dans la page (plus de chevauchement possible)
   et chaque lien offre une zone tactile d'au moins 36 px de haut. */
@media (max-width: 900px) {
  nav, nav.scrolled {
    position: relative;
    background: transparent;
    backdrop-filter: none;
    padding: 18px 14px 6px;
    border-bottom: 1px solid var(--filet);
  }
  nav ul { gap: 0 10px; }
  nav ul a { display: inline-block; padding: 11px 6px; font-size: 10.5px; }
  .hero { padding-top: 64px; }
  .section-tete { padding-top: 64px; }
}

/* Titre de l'accueil sur PC : « 65 » passait seul à la ligne (il faut 12,4 em pour une ligne). */
@media (min-width: 901px) {
  .hero h1 { font-size: clamp(40px, 7.2vw, 118px); }
}

/* Quatre cartes (portefeuille « Ce que vous recevez ») : 2 × 2 sur PC, 1 colonne sur téléphone. */
.briques.quatre { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .briques.quatre { grid-template-columns: 1fr; } }