/* ==========================================================================
   SkylineVision — base.css
   Reset, variables de design, typographie.
   ========================================================================== */

/* --- Polices locales (variables, un fichier par famille) ----------------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* --- Variables ----------------------------------------------------------- */
:root {
  /* ======================================================================
     COULEURS

     Toute la palette descend des deux pigments du logo : le vert du disque
     (#004B30) et l'or du monogramme (#D4AF37).

     L'ancienne palette avait un défaut de fond : le crème (teinte 47°) et
     l'or (46°) partageaient la même teinte. L'accent était donc mort avant
     d'être posé — c'est ce qui donnait au site son air de gabarit. Les
     fonds clairs passent à une craie à chroma quasi nul (4 points d'écart
     entre canaux) : ils ne posent plus aucune dominante sous les photos.

     Quatre fonds en tout : trois crans clairs très proches, et un seul
     sombre. Le vert de marque, lui, n'est plus un fond — c'est une encre.
     ====================================================================== */

  /* Les trois crans clairs, du plus lumineux au plus dense */
  --craie-clair:  #f6f8f4;   /* sections éditoriales, respirantes */
  --craie:        #eaede7;   /* valeur par défaut du site (body) */
  --brume:        #dce0d9;   /* bandeau clients, lu comme encastré */

  /* UN SEUL fond sombre pour tout le site.
     Il y en avait deux — un vert vif pour la bande de marque, un noir pour
     le reste — et ils ne se lisaient pas comme une même famille : quand ils
     se touchaient, on voyait deux verts qui se disputent. */
  --nuit:         #072a1c;   /* sections sombres, appel, menu, pied */

  /* Le vert de marque ne sert plus de fond : il devient une encre.
     Boutons sur fond clair, italiques d'accent, anneau de focus. */
  --emeraude:     #06402a;

  /* Textes */
  --encre:        #12201b;   /* noir vert : le texte appartient à la famille */
  --gris:         #525c54;   /* secondaire — 5,21:1 même sur le cran le plus dense */

  /* Accent et blanc */
  --or:           #d4af37;   /* valeur exacte du monogramme, un métal et non un jaune */
  --blanc:        #ffffff;

  /* Triplets, pour les transparences.
     Tout le sombre du site — voiles, ombres, filets — dérive du même
     pigment : le site a une ombre, au singulier. */
  --craie-rvb:    234, 237, 231;
  --encre-rvb:    18, 32, 27;
  --voile:        10, 26, 19;

  /* Typographie */
  --serif:  "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:   "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide.
     Le titre de hero est borné par la LARGEUR comme par la HAUTEUR : sur une
     fenêtre large mais peu haute — un portable en paysage, une fenêtre
     réduite — une taille calculée sur la seule largeur donnait un titre plus
     grand que l'espace disponible, qui venait chevaucher l'en-tête. */
  --display: clamp(3.2rem, min(11vw, 18vh), 9.5rem);
  --titre-1:  clamp(2.4rem, 6.5vw, 5.2rem);
  --titre-2:  clamp(1.9rem, 4vw, 3.2rem);
  --titre-3:  clamp(1.3rem, 2.2vw, 1.75rem);
  --corps:    clamp(0.95rem, 1.05vw, 1.05rem);
  --label:    0.68rem;

  /* Rythme */
  --gouttiere: clamp(1.25rem, 5vw, 5rem);
  /* Respiration verticale d'une section. Resserrée volontairement : au-delà,
     deux sections claires qui se suivent finissent par former un trou. */
  --section:   clamp(3.5rem, 8vw, 7.5rem);

  /* Mouvement */
  --transition: 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

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

body {
  margin: 0;
  background: var(--craie);
  color: var(--encre);
  font-family: var(--sans);
  font-size: var(--corps);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.015em;
}

p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

/* --- Typographie utilitaire ---------------------------------------------- */
.display {
  font-family: var(--serif);
  font-size: var(--display);
  font-weight: 300;
  line-height: 0.92;
  letter-spacing: -0.03em;
}

.titre-1 { font-size: var(--titre-1); }
.titre-2 { font-size: var(--titre-2); }
.titre-3 { font-size: var(--titre-3); line-height: 1.2; }

/* Petit label capitales espacées — signature du design */
.label {
  font-family: var(--sans);
  font-size: var(--label);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gris);
}

.texte-mesure {
  max-width: 34ch;
  color: var(--gris);
  line-height: 1.75;
}

/* --- Accessibilité -------------------------------------------------------- */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 1rem;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--emeraude);
  color: var(--blanc);
  font-size: var(--label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }

/* Anneau de focus.
   L'or sur un fond clair ne donne que 1,85:1, alors que la règle WCAG 1.4.11
   en exige 3 pour un élément d'interface. L'anneau est donc conditionnel :
   émeraude par défaut (11,07:1 sur la craie claire), or seulement là où le
   fond est sombre (8,54:1). */
:focus-visible {
  outline: 2px solid var(--emeraude);
  outline-offset: 3px;
}

.section-nuit :focus-visible,
.menu-plein :focus-visible,
.hero :focus-visible,
.pied :focus-visible {
  outline-color: var(--or);
}

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