/* ==========================================================================
   KCHROM SYSTEMS · feuille de style unique
   Palette échantillonnée directement sur le logo de la marque :
   or #E5B35A, reflets #FAD47D, nuit #01030E, violet #2C1F6D.
   Aucune dépendance, aucun framework, aucun appel réseau externe.
   ========================================================================== */

/* ------------------------------ Polices --------------------------------- */

@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Space Grotesk';
  src: url('/fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-400-normal.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-latin-600-normal.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------ Jetons ---------------------------------- */

:root {
  --nuit:          #01030E;
  --nuit-surface:  #060B1B;
  --nuit-elevee:   #0A1226;
  --trait:         rgba(174, 190, 220, 0.11);
  --trait-vif:     rgba(229, 179, 90, 0.34);

  --or:            #E5B35A;
  --or-clair:      #FAD47D;
  --or-profond:    #C29146;
  --violet:        #7C5CFF;
  --cyan:          #22D3EE;

  --texte:         #EDEFF3;
  --texte-doux:    #A5AEBE;
  --texte-faible:  #7C8698;

  --titre:  'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --corps:  'Inter', 'Segoe UI', system-ui, sans-serif;

  --largeur: 1180px;
  --marge:   clamp(1.25rem, 5vw, 3rem);
  --rayon:   18px;
  --souple:  cubic-bezier(0.22, 1, 0.36, 1);
}

/* ------------------------------ Base ------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--corps);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--or); text-decoration-thickness: 1px; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--or-clair);
  outline-offset: 3px;
  border-radius: 4px;
}

h1, h2, h3 {
  font-family: var(--titre);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

.enveloppe {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--marge);
}

.saut-contenu {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--or);
  color: #16120A;
  padding: 0.8rem 1.4rem;
  font-weight: 600;
  border-radius: 0 0 10px 0;
}
.saut-contenu:focus { left: 0; }

/* --------------------- Lueurs d'ambiance de fond ------------------------- */

.lueurs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.lueur {
  position: absolute;
  border-radius: 50%;
  filter: blur(110px);
  opacity: 0.5;
}
/* Violet à gauche et cyan à droite : c'est la disposition exacte des
   circuits imprimés du logo. L'ambiance de la page prolonge la marque. */
.lueur--violette {
  width: min(58vw, 620px);
  aspect-ratio: 1;
  top: -14vh;
  left: -14vw;
  background: radial-gradient(circle, rgba(124, 92, 255, 0.30), transparent 68%);
  animation: respire 22s var(--souple) infinite alternate;
}
.lueur--cyan {
  width: min(52vw, 560px);
  aspect-ratio: 1;
  top: -6vh;
  right: -12vw;
  background: radial-gradient(circle, rgba(34, 211, 238, 0.22), transparent 68%);
  animation: respire 26s var(--souple) infinite alternate-reverse;
}
@keyframes respire {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(2.5vw, 3vh, 0) scale(1.14); }
}

/* ------------------------------ Héros ----------------------------------- */

.heros {
  position: relative;
  z-index: 1;
  padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}

/* Le cadrage large est haut : au-delà de 940px, l'accroche passait sous la
   ligne de flottaison sur un écran d'ordinateur portable. */
.heros__logo {
  margin-inline: auto;
  width: min(940px, 78vw);
}
/* Le visuel du logo porte son propre fond nuit. Ses bords sont fondus vers
   #01030E directement dans le fichier image, et non par un masque CSS : le
   résultat est ainsi identique sur tous les navigateurs, et le fichier est
   même plus léger. Ne pas remplacer ce visuel sans réappliquer ce fondu,
   sinon un rectangle apparaîtra au milieu de la page. */
/* Le rapport est déclaré ici pour chaque cadrage : sans cela, le navigateur
   se fie aux attributs width et height de la balise <img>, qui décrivent la
   version large, et le cadrage resserré du téléphone se retrouve déformé. */
.heros__logo img {
  width: 100%;
  height: auto;
  aspect-ratio: 1448 / 850;
}
@media (max-width: 720px) {
  .heros__logo    { width: 94vw; }
  .heros__logo img { aspect-ratio: 1170 / 750; }
}

.surtitre {
  margin-top: clamp(0.5rem, 2vw, 1.25rem);
  font-family: var(--titre);
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--or-profond);
}

.heros h1 {
  margin-top: 1.1rem;
  font-size: clamp(2.15rem, 1.1rem + 4.6vw, 4.2rem);
}
.accent {
  background: linear-gradient(96deg, var(--or-clair), var(--or) 42%, var(--or-profond));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.chapeau {
  margin: 1.6rem auto 0;
  max-width: 63ch;
  color: var(--texte-doux);
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.16rem);
}

.actions {
  margin-top: clamp(1.9rem, 4vw, 2.6rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  justify-content: center;
}

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 1.65rem;
  border-radius: 999px;
  font-family: var(--titre);
  font-weight: 500;
  font-size: 0.98rem;
  text-decoration: none;
  transition: transform 0.35s var(--souple), box-shadow 0.35s var(--souple),
              background-color 0.35s var(--souple), border-color 0.35s var(--souple);
}
.bouton--or {
  background: linear-gradient(140deg, var(--or-clair), var(--or-profond));
  color: #17130A;
  box-shadow: 0 10px 30px -14px rgba(229, 179, 90, 0.72);
}
.bouton--fantome {
  border: 1px solid var(--trait);
  color: var(--texte);
  background: rgba(255, 255, 255, 0.02);
}
.bouton:hover { transform: translateY(-2px); }
.bouton--or:hover    { box-shadow: 0 16px 38px -14px rgba(229, 179, 90, 0.9); }
.bouton--fantome:hover { border-color: var(--trait-vif); background: rgba(229, 179, 90, 0.06); }

.filet {
  margin-top: clamp(2.2rem, 5vw, 3.4rem);
  height: 1px;
  background: linear-gradient(90deg,
    transparent, rgba(124, 92, 255, 0.30) 22%,
    var(--trait-vif) 50%,
    rgba(34, 211, 238, 0.30) 78%, transparent);
}

/* ----------------------------- Sections --------------------------------- */

.section {
  position: relative;
  z-index: 1;
  padding-block: clamp(3.5rem, 9vw, 6.5rem);
}
.section--sobre { background: linear-gradient(180deg, transparent, var(--nuit-surface) 12% 88%, transparent); }

.section h2 {
  font-size: clamp(1.65rem, 1.1rem + 2.3vw, 2.6rem);
}

.intro {
  margin-top: 1rem;
  max-width: 58ch;
  color: var(--texte-doux);
}

/* ------------------------------ Cartes ---------------------------------- */

.grille {
  list-style: none;
  margin: clamp(2.2rem, 5vw, 3.2rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.5rem);
  /* 230px permet aux quatre cartes de tenir sur une seule ligne en grand
     écran, puis de passer à deux, puis à une. Au-delà, la quatrième se
     retrouvait seule sur sa ligne, ce qui déséquilibrait la section. */
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.carte {
  position: relative;
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--nuit-surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  overflow: hidden;
  transition: transform 0.4s var(--souple), border-color 0.4s var(--souple),
              background-color 0.4s var(--souple);
}
/* Liseré supérieur violet vers cyan : le dôme de points du logo, réduit
   à un trait. Il s'allume au survol. */
.carte::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--violet), var(--cyan), transparent);
  opacity: 0.34;
  transition: opacity 0.4s var(--souple);
}
.carte:hover {
  transform: translateY(-4px);
  border-color: var(--trait-vif);
  background: var(--nuit-elevee);
}
.carte:hover::before { opacity: 1; }

.carte__numero {
  display: block;
  font-family: var(--titre);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  color: var(--or-profond);
}
.carte h3 {
  margin: 0.7rem 0 0.6rem;
  font-size: 1.2rem;
}
.carte p {
  color: var(--texte-doux);
  font-size: 0.97rem;
}

/* ------------------------------ Étapes ---------------------------------- */

.etapes {
  list-style: none;
  margin: clamp(2.2rem, 5vw, 3.2rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(276px, 1fr));
}
.etape {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}
.etape__rang {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--trait-vif);
  font-family: var(--titre);
  font-weight: 700;
  color: var(--or);
  background: rgba(229, 179, 90, 0.06);
}
.etape h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.etape p  { color: var(--texte-doux); font-size: 0.96rem; }

/* --------------------------- Réalisation -------------------------------- */

.vitrine {
  margin-top: clamp(2.2rem, 5vw, 3.2rem);
  display: grid;
  gap: clamp(1.6rem, 4vw, 3rem);
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: center;
  padding: clamp(1.6rem, 4vw, 2.8rem);
  background: var(--nuit-surface);
  border: 1px solid var(--trait);
  border-radius: calc(var(--rayon) + 6px);
}

.etiquette {
  font-family: var(--titre);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.vitrine h3 {
  margin: 0.6rem 0 0.9rem;
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
}
.vitrine__texte p { color: var(--texte-doux); }
.vitrine__texte p + p { margin-top: 0.8rem; }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1.4rem;
  min-height: 44px;
  font-family: var(--titre);
  font-weight: 500;
  text-decoration: none;
  color: var(--or);
}
.lien-fleche span { transition: transform 0.32s var(--souple); }
.lien-fleche:hover { text-decoration: underline; }
.lien-fleche:hover span { transform: translateX(5px); }

.vitrine__mesures {
  padding: clamp(1.2rem, 3vw, 1.7rem);
  background: var(--nuit);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
}
.mesures__titre {
  font-family: var(--titre);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.notes {
  list-style: none;
  margin: 1.1rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 0.8rem;
}
.notes li { display: flex; flex-direction: column; }
.notes strong {
  font-family: var(--titre);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: 1;
  background: linear-gradient(150deg, var(--or-clair), var(--or-profond));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.notes span {
  margin-top: 0.3rem;
  font-size: 0.79rem;
  color: var(--texte-doux);
}
.mesures__note {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--trait);
  font-size: 0.83rem;
  color: var(--texte-faible);
}

/* ------------------------------ Contact --------------------------------- */

.section--contact { padding-bottom: clamp(4rem, 10vw, 7rem); }

.coordonnees {
  margin-top: clamp(2rem, 5vw, 2.8rem);
  display: grid;
  gap: 0.9rem;
  /* Les quatre moyens de contact tiennent sur une seule ligne en grand
     écran. Au-dessus de 238px, l'adresse se retrouvait seule en dessous. */
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.contact-bloc {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.2rem 1.4rem;
  min-height: 92px;
  justify-content: center;
  background: var(--nuit-surface);
  border: 1px solid var(--trait);
  border-radius: var(--rayon);
  text-decoration: none;
  color: var(--texte);
  transition: transform 0.35s var(--souple), border-color 0.35s var(--souple),
              background-color 0.35s var(--souple);
}
a.contact-bloc:hover {
  transform: translateY(-3px);
  border-color: var(--trait-vif);
  background: var(--nuit-elevee);
}
.contact-bloc--fixe { cursor: default; }
.contact-bloc__cle {
  font-family: var(--titre);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--or-profond);
}
.contact-bloc__valeur {
  font-size: 0.99rem;
  overflow-wrap: anywhere;
}

.rappel {
  margin-top: 1.4rem;
  font-size: 0.92rem;
  color: var(--texte-doux);
}

/* ------------------------------- Pied ----------------------------------- */

.pied {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 6vw, 3.5rem);
  border-top: 1px solid var(--trait);
  background: var(--nuit-surface);
}
.pied__marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--titre);
  font-weight: 700;
  letter-spacing: 0.05em;
}
.pied__marque img { border-radius: 7px; }

.mentions {
  margin: 1.8rem 0 0;
  display: grid;
  gap: 1rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(196px, 1fr));
}
.mentions div { display: flex; flex-direction: column; gap: 0.2rem; }
.mentions dt {
  font-family: var(--titre);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--texte-faible);
}
.mentions dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--texte-doux);
}

.pied__bas {
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--trait);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--texte-faible);
}

/* ---------------------------- Animations -------------------------------- */

.anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.75s var(--souple), transform 0.75s var(--souple);
}
.anim[data-anim='fondu'] { transform: none; }
.anim[data-delai='1'] { transition-delay: 0.08s; }
.anim[data-delai='2'] { transition-delay: 0.16s; }
.anim[data-delai='3'] { transition-delay: 0.24s; }
.anim[data-delai='4'] { transition-delay: 0.32s; }

.anim.est-visible { opacity: 1; transform: none; }

/* Deux filets de sécurité, parce qu'une page ne doit jamais dépendre d'un
   script pour être lisible : la balise <noscript> du document couvre le cas
   du JavaScript désactivé, et animations.js révèle tout au bout de trois
   secondes si l'observateur n'a pas fait son travail. */

/* --------------------------- Petits écrans ------------------------------ */

@media (max-width: 860px) {
  .vitrine { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
  .notes { grid-template-columns: 1fr; gap: 0.9rem; }
  .actions .bouton { width: 100%; }
}

/* ----------------------- Mouvement réduit ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .anim { opacity: 1; transform: none; }
}