/* HandWise · page de présentation. Couleurs et polices : kit visuel v2 « L’empreinte » (10/11/2026). */

@font-face {
  font-family: "Newsreader";
  src: url("/polices/Newsreader-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Newsreader";
  src: url("/polices/Newsreader-Italic-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("/polices/SourceSans3-variable.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --hw-sapin: #1F4A3D;
  --hw-creme: #F7F4EE;
  --hw-encre: #202B28;
  --hw-brume: #DCE7DF;
  --hw-vert-grise: #879C91;
  --hw-nuit: #13231D;
  --hw-action-sombre: #BFD5C6;

  --fond: var(--hw-creme);
  --texte: var(--hw-encre);
  --marque: var(--hw-sapin);
  --titre: var(--hw-sapin);
  --surface: var(--hw-brume);
  --filet: color-mix(in srgb, var(--hw-sapin) 22%, transparent);
  --texte-doux: color-mix(in srgb, var(--hw-encre) 78%, var(--hw-creme));
  --bouton-fond: var(--hw-sapin);
  --bouton-texte: var(--hw-creme);

  --titres: "Newsreader", Georgia, "Times New Roman", serif;
  --textes: "Source Sans 3", -apple-system, "Segoe UI", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fond: var(--hw-nuit);
    --texte: var(--hw-creme);
    --marque: var(--hw-action-sombre);
    --titre: var(--hw-creme);
    --surface: color-mix(in srgb, var(--hw-sapin) 55%, var(--hw-nuit));
    --filet: color-mix(in srgb, var(--hw-action-sombre) 25%, transparent);
    --texte-doux: color-mix(in srgb, var(--hw-creme) 80%, var(--hw-nuit));
    --bouton-fond: var(--hw-action-sombre);
    --bouton-texte: var(--hw-nuit);
  }
}

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

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

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--textes);
  font-size: 1.125rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

:focus-visible { outline: 2px solid var(--marque); outline-offset: 3px; }

.cadre {
  width: 100%;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0 clamp(1rem, 4vw, 2.5rem);
}

/* En-tête */
.entete { border-bottom: 1px solid var(--filet); }
.entete .cadre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}
.logo { display: block; }
.logo img { width: 150px; }
.statut {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--marque);
}

/* Titres */
h1, h2, .phrase, .principe p {
  font-family: var(--titres);
  font-weight: 400;
  color: var(--titre);
  letter-spacing: -0.01em;
}
h1 em, h2 em, .phrase em, .principe em { font-style: italic; }
.phrase em, .principe em { white-space: nowrap; }

.surtitre {
  margin: 0 0 1rem;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--marque);
}

/* Accueil */
.accueil { padding: clamp(3rem, 9vw, 7rem) 0 clamp(3rem, 8vw, 6rem); }
.accueil-grille {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}
h1 {
  margin: 0 0 1.5rem;
  font-size: clamp(3.5rem, 10vw, 7rem);
  line-height: 0.95;
  font-variation-settings: "opsz" 72;
}
h1 em { display: block; }
.chapo {
  max-width: 30rem;
  margin: 0 0 2rem;
  font-size: clamp(1.1875rem, 2.2vw, 1.375rem);
  line-height: 1.45;
}
.bouton {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border-radius: 4px;
  background: var(--bouton-fond);
  color: var(--bouton-texte);
  font-weight: 600;
  text-decoration: none;
}
.bouton:hover { filter: brightness(1.12); }
.signe { justify-self: center; }
.signe img { width: clamp(10rem, 26vw, 20rem); }

/* Blocs */
.bloc { padding: clamp(3.5rem, 8vw, 6rem) 0; border-top: 1px solid var(--filet); }
h2 {
  max-width: 40rem;
  margin: 0 0 1.25rem;
  font-size: clamp(2.125rem, 5vw, 3.25rem);
  line-height: 1.08;
  font-variation-settings: "opsz" 60;
}
.intro { max-width: 40rem; margin: 0 0 3rem; color: var(--texte-doux); }

ol { list-style: none; margin: 0; padding: 0; }
h3 {
  margin: 0;
  font-family: var(--titres);
  font-size: 1.625rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--titre);
}
.num {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--marque);
}

/* Cinq domaines */
.domaines {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
.domaines li {
  padding: 1.5rem 1.25rem 1.75rem;
  border-radius: 4px;
  background: var(--surface);
}
.domaines .num { margin-bottom: 2.5rem; }
.domaines h3 { margin-bottom: 0.75rem; }
.domaines p { margin: 0; font-size: 1rem; line-height: 1.5; }
.domaines .question {
  margin-bottom: 0.75rem;
  font-family: var(--titres);
  font-style: italic;
  font-size: 1.0625rem;
  color: var(--marque);
}

/* Quatre niveaux */
.niveaux li {
  display: grid;
  grid-template-columns: 3rem 11rem 1fr;
  align-items: baseline;
  gap: 1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--filet);
}
.niveaux li:last-child { border-bottom: 1px solid var(--filet); }
.niveaux .num { font-family: var(--titres); font-size: 1.625rem; font-weight: 400; letter-spacing: 0; }
.niveaux p { margin: 0; max-width: 40rem; }

.principe { margin: 3.5rem 0 0; padding: 0; }
.principe p {
  margin: 0 0 0.75rem;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.15;
}
.principe footer { max-width: 36rem; color: var(--texte-doux); }

/* Bandeau */
.bandeau { padding: clamp(3.5rem, 8vw, 6rem) 0; background: var(--surface); }
.phrase {
  max-width: 44rem;
  margin: 0 0 1.25rem;
  font-size: clamp(2rem, 4.6vw, 3.25rem);
  line-height: 1.1;
}
.bandeau p:last-child { max-width: 36rem; margin: 0; }

/* Pied */
.pied { padding: 3.5rem 0 3rem; background: var(--hw-sapin); color: var(--hw-creme); }
.pied-logo { width: 220px; margin-bottom: 1rem; }
.descripteur { margin: 0 0 2.5rem; font-size: 1rem; }
.mentions {
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--hw-creme) 25%, transparent);
  font-size: 0.875rem;
  line-height: 1.5;
}
.mentions p { max-width: 46rem; margin: 0 0 0.5rem; }
@media (prefers-color-scheme: dark) {
  .pied { background: color-mix(in srgb, var(--hw-sapin) 40%, var(--hw-nuit)); }
}

/* Écrans moyens et petits */
@media (max-width: 64rem) {
  .domaines { grid-template-columns: repeat(2, 1fr); }
  .domaines li:last-child { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .accueil-grille { grid-template-columns: 1fr; }
  .signe { grid-row: 1; justify-self: start; }
  .signe img { width: 5.5rem; }
  .domaines { grid-template-columns: 1fr; }
  .domaines .num { margin-bottom: 1.25rem; }
  .niveaux li { grid-template-columns: 2.25rem 1fr; }
  .niveaux li p { grid-column: 2; }
}