/*
  Projet   : C2SL / site vitrine de la société
  Fichier  : site/style.css
  Version  : 0.3.0
  Date     : 2026-10-01 11:59
  Objectif : feuille de style unique du site (fond clair, encre anthracite du
             logo, or du logo en seul accent, escalier de blocs en signature,
             apparitions en CSS seul, polices auto-hébergées).
*/

@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/polices/SchibstedGrotesk.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/polices/SchibstedGrotesk-italique.woff2") format("woff2");
  font-weight: 400 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/polices/JetBrainsMono.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;
  --papier: #f2f4f4;
  --surface: #fbfcfc;
  --brume: #e6ebec;
  --encre: #263032;
  --anthracite: #3d4749;
  --encre-douce: #525e61;
  --filet: #d5dcdd;
  --or: #f0b340;
  --or-clair: #fbe7bd;
  --or-fonce: #c98a12;
  --ombre: 0 1px 2px rgba(38, 48, 50, 0.06), 0 12px 32px -12px rgba(38, 48, 50, 0.18);
  --ombre-haute: 0 2px 4px rgba(38, 48, 50, 0.06), 0 22px 44px -16px rgba(38, 48, 50, 0.26);
  --rayon: 14px;
  --largeur: 1120px;
  --sortie: cubic-bezier(0.23, 1, 0.32, 1);
  --texte: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --chiffres: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font-family: var(--texte);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

a { color: inherit; text-decoration-color: var(--or); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--encre); }
a:focus-visible, .bouton:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; border-radius: 4px; }

.contenu { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 16px; }
@media (min-width: 720px) { .contenu { padding: 0 32px; } }

.passer { position: absolute; left: -9999px; }
.passer:focus { left: 16px; top: 12px; background: var(--surface); padding: 8px 12px; z-index: 30; }

.chiffres { font-family: var(--chiffres); font-size: 0.95em; letter-spacing: 0; }

/* ---------- En-tête ---------- */
.entete {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(242, 244, 244, 0.86);
  border-bottom: 1px solid rgba(213, 220, 221, 0.8);
}
@supports (backdrop-filter: blur(4px)) {
  .entete { backdrop-filter: blur(14px) saturate(160%); }
}
.entete .contenu { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; letter-spacing: -0.01em; font-size: 1.15rem; }
.marque img { width: 34px; height: auto; }
.nav { display: flex; gap: 4px; flex-wrap: wrap; }
.nav a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-weight: 500; font-size: 0.98rem; }
.nav a:hover { background: var(--brume); }
.nav a[aria-current="page"] { background: var(--encre); color: var(--surface); }

/* ---------- Boutons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bouton {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 999px;
  border: 2px solid var(--encre);
  white-space: nowrap;
}
.bouton.principal { background: var(--encre); color: var(--surface); }
.bouton.principal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--or);
  transform: scaleX(0);
  transform-origin: left center;
}
.bouton.principal::after { content: "→" / ""; display: inline-block; }
.bouton.principal:hover { color: var(--encre); border-color: var(--encre); }
.bouton.principal:hover::before { transform: scaleX(1); }
.bouton.principal:hover::after { transform: translateX(3px); }
.bouton.second { background: transparent; }
.bouton.second:hover { background: var(--surface); box-shadow: var(--ombre); }

/* ---------- Signature : l'escalier de blocs ---------- */
.marches { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: clamp(36px, 6vw, 84px); display: block; pointer-events: none; }
.marches path { fill: var(--surface); }
.marches .bloc-or { fill: var(--or); }
.marches.vers-sombre path { fill: var(--anthracite); }
.marches.vers-papier path { fill: var(--papier); }

/* ---------- Accueil : ouverture ---------- */
.ouverture {
  position: relative;
  padding: 48px 0 104px;
  background:
    radial-gradient(55% 65% at 80% 38%, rgba(240, 179, 64, 0.12), transparent 70%),
    linear-gradient(180deg, var(--papier) 0%, #e8eded 100%);
}
.ouverture .contenu { display: grid; gap: 48px; align-items: center; }
@media (min-width: 880px) {
  .ouverture { padding: 96px 0 160px; }
  .ouverture .contenu { grid-template-columns: 1.75fr 1fr; gap: 64px; }
}
.ouverture h1 {
  font-size: clamp(2.3rem, 5vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 800;
  margin: 0 0 22px;
  text-wrap: balance;
}
.surligne {
  background-image: linear-gradient(var(--or), var(--or));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 100% 0.2em;
  padding-bottom: 0.02em;
}
.ouverture p.chapeau { font-size: 1.2rem; color: var(--encre-douce); max-width: 36ch; margin: 0 0 34px; }

.embleme { position: relative; justify-self: center; width: min(56%, 210px); margin: 8px 0 0; }
@media (min-width: 880px) { .embleme { width: min(100%, 340px); margin: 0; } }
.embleme::before,
.embleme::after {
  content: "";
  position: absolute;
  border-radius: 10px;
  z-index: 0;
}
.embleme::before { width: 34%; aspect-ratio: 1; top: -9%; right: -10%; background: var(--or); }
.embleme::after { width: 46%; aspect-ratio: 1; bottom: -10%; left: -12%; background: #d9e0e1; }
.embleme .socle {
  position: relative;
  z-index: 1;
  background: var(--surface);
  border-radius: 22px;
  padding: 14%;
  box-shadow: var(--ombre-haute);
}
.embleme img { width: 100%; }

/* ---------- Registre des logiciels ---------- */
.registre { position: relative; background: var(--surface); padding: 56px 0 120px; }
@media (min-width: 880px) { .registre { padding: 72px 0 156px; } }
.registre h2, .section h2 { font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.025em; line-height: 1.12; margin: 0 0 12px; font-weight: 800; }
.registre .entete-section { display: grid; gap: 4px 48px; margin-bottom: 36px; }
@media (min-width: 880px) { .registre .entete-section { grid-template-columns: 1fr 1.2fr; align-items: end; } }
.registre .intro { color: var(--encre-douce); max-width: 56ch; margin: 0; }
.produits { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--encre); }
.produit {
  position: relative;
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 6px 18px;
  padding: 24px 12px;
  margin: 0 -12px;
  border-bottom: 1px solid var(--filet);
  border-radius: 4px;
}
.produit::before {
  content: "";
  grid-row: 1;
  align-self: center;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  background: var(--anthracite);
}
.produit h3, .produit p, .produit .lien { grid-column: 2; }
@media (min-width: 880px) {
  .produit { grid-template-columns: 14px 230px 1fr auto; gap: 6px 32px; padding: 30px 16px; margin: 0 -16px; align-items: center; }
  .produit h3, .produit p, .produit .lien { grid-column: auto; }
}
.produit h3 { margin: 0; font-size: 1.65rem; letter-spacing: -0.025em; font-weight: 800; line-height: 1.15; }
.produit .metier { display: block; font-size: 0.95rem; font-weight: 500; color: var(--encre-douce); letter-spacing: 0; margin-top: 2px; }
.produit p { margin: 0; max-width: 58ch; color: var(--encre); }
.produit .lien {
  font-family: var(--chiffres);
  font-size: 0.92rem;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 6px 12px;
  border: 1px solid var(--filet);
  border-radius: 999px;
  background: var(--surface);
}
.produit .lien::after { content: "↗" / ""; display: inline-block; }
/* La ligne entière est cliquable, le lien reste l'élément annoncé. */
.produit .lien::before { content: ""; position: absolute; inset: 0; border-radius: 4px; }
.produit:hover { background: var(--papier); }
.produit:hover::before { background: var(--or); transform: scale(1.15) rotate(45deg); }
.produit:hover .lien { border-color: var(--encre); }
.produit:hover .lien::after { transform: translate(2px, -2px); }
.produit:focus-within { outline: 3px solid var(--encre); outline-offset: 2px; }
.produit .lien:focus-visible { outline: none; }

/* ---------- Sections courantes ---------- */
.section { position: relative; padding: 64px 0; }
@media (min-width: 880px) { .section { padding: 88px 0; } }
.section.avant-sombre { padding-bottom: 120px; }
@media (min-width: 880px) { .section.avant-sombre { padding-bottom: 168px; } }

.facture { display: grid; gap: 32px; }
@media (min-width: 880px) { .facture { grid-template-columns: 1fr 1.25fr; gap: 64px; align-items: start; } .facture .texte { position: sticky; top: 108px; } }
.facture .texte p { color: var(--encre-douce); max-width: 44ch; font-size: 1.1rem; }
.reperes {
  margin: 0;
  display: grid;
  background: var(--surface);
  border: 1px solid var(--filet);
  border-radius: var(--rayon);
  box-shadow: var(--ombre);
  padding: 4px 22px;
}
.reperes div { padding: 18px 0; border-top: 1px solid var(--filet); display: grid; gap: 4px; }
.reperes div:first-child { border-top: 0; }
@media (min-width: 600px) { .reperes { padding: 6px 28px; } .reperes div { grid-template-columns: 210px 1fr; gap: 24px; padding: 20px 0; } }
.reperes dt { font-weight: 700; display: flex; align-items: baseline; gap: 10px; }
.reperes dt::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 2px; background: var(--or); transform: translateY(-1px); }
.reperes dd { margin: 0; color: var(--encre-douce); }

/* ---------- Bandeau de contact (le seul fond sombre du site) ---------- */
.joindre { background: var(--anthracite); color: #f4f6f6; padding: 56px 0 72px; }
.joindre .contenu { display: grid; gap: 28px; }
@media (min-width: 880px) { .joindre .contenu { grid-template-columns: 1.2fr 1fr; align-items: center; } .joindre { padding: 64px 0 88px; } }
.joindre h2 { margin: 0 0 8px; font-size: clamp(1.7rem, 3.2vw, 2.4rem); letter-spacing: -0.025em; }
.joindre p { margin: 0; color: #cfd6d7; max-width: 46ch; }
.joindre ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.joindre li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border: 1px solid rgba(244, 246, 246, 0.18);
  border-radius: var(--rayon);
  font-size: clamp(1.1rem, 2.4vw, 1.3rem);
  font-weight: 650;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.joindre li a::after { content: "→" / ""; color: var(--or); flex: none; }
.joindre li a:hover { background: rgba(244, 246, 246, 0.06); border-color: var(--or); }
.joindre li a:hover::after { transform: translateX(4px); }
.joindre a { text-decoration-color: var(--or); }
.joindre a:focus-visible { outline-color: var(--or); }

/* ---------- Pages de texte (support, légal) ---------- */
.page { position: relative; padding: 48px 0 80px; }
@media (min-width: 880px) { .page { padding: 72px 0 104px; } }
.page::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: min(42vw, 420px);
  height: 150px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 150'%3E%3Cpath fill='%23e6ebec' d='M0 0h420v150h-105v-37.5h-105v-37.5h-105v-37.5h-105z'/%3E%3Crect fill='%23f0b340' x='315' y='112.5' width='42' height='37.5'/%3E%3C/svg%3E") no-repeat right top / 100% 100%;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 719px) { .page::before { width: 46vw; height: 80px; } }
.page .contenu { position: relative; z-index: 1; display: grid; gap: 40px; }
@media (min-width: 960px) { .page.avec-sommaire .contenu { grid-template-columns: 240px minmax(0, 1fr); gap: 64px; } }
.page h1 { font-size: clamp(2.1rem, 4.6vw, 3.3rem); line-height: 1.06; letter-spacing: -0.035em; margin: 0 0 16px; font-weight: 800; text-wrap: balance; max-width: 24ch; }
.page .chapeau { font-size: 1.15rem; color: var(--encre-douce); max-width: 60ch; margin: 0; }
.prose { max-width: 70ch; }
.prose h2 { font-size: 1.45rem; letter-spacing: -0.015em; margin: 48px 0 12px; line-height: 1.25; scroll-margin-top: 96px; }
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.1rem; margin: 28px 0 8px; }
.prose p, .prose ul, .prose ol { margin: 0 0 14px; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose ul li::marker { color: var(--or-fonce); }
.prose li { margin-bottom: 6px; }
.prose table { border-collapse: collapse; width: 100%; margin: 8px 0 18px; font-size: 0.97rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--filet); }
.prose th { font-weight: 700; border-bottom: 2px solid var(--encre); }
.tableau-defile { overflow-x: auto; }
.mise-a-jour { color: var(--encre-douce); font-size: 0.95rem; }

.sommaire { align-self: start; }
@media (min-width: 960px) { .sommaire { position: sticky; top: 100px; } }
.sommaire p { font-weight: 700; margin: 0 0 8px; }
.sommaire ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--filet); }
.sommaire a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; border-left: 2px solid transparent; text-decoration: none; color: var(--encre-douce); font-size: 0.95rem; }
.sommaire a:hover { color: var(--encre); border-left-color: var(--or); }

/* ---------- Support : les trois façons de nous joindre ---------- */
.canaux { display: grid; gap: 16px; }
@media (min-width: 760px) { .canaux { grid-template-columns: 1.3fr 1fr 1fr; } }
.canal { background: var(--surface); border: 1px solid var(--filet); border-radius: var(--rayon); padding: 26px; box-shadow: var(--ombre); }
.canal.premier { background: var(--or-clair); border-color: #ecd29a; }
.canal h2 { font-size: 1rem; margin: 0 0 12px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.canal h2::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--anthracite); flex: none; }
.canal.premier h2::before { background: var(--or-fonce); }
.canal .valeur { font-size: 1.35rem; font-weight: 750; letter-spacing: -0.01em; margin: 0 0 10px; overflow-wrap: anywhere; }
.canal p { margin: 0; color: var(--encre-douce); font-size: 0.98rem; }
.canal.premier p { color: #4a4232; }
.canal:hover { box-shadow: var(--ombre-haute); transform: translateY(-2px); }

/* ---------- Pied de page ---------- */
.pied { background: var(--surface); border-top: 1px solid var(--filet); font-size: 0.95rem; color: var(--encre-douce); }
.pied .colonnes { display: grid; gap: 28px; padding-top: 48px; padding-bottom: 36px; }
@media (min-width: 760px) { .pied .colonnes { grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; } }
.pied .colonnes > * { min-width: 0; }
.pied p { margin: 0; }
.pied .marque { color: var(--encre); margin-bottom: 14px; }
.pied .titre-colonne { font-weight: 700; color: var(--encre); margin: 0 0 10px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pied a { color: var(--encre); }
.pied a[aria-current="page"] { text-decoration-color: var(--encre); }
.pied .bas { border-top: 1px solid var(--filet); padding-top: 18px; padding-bottom: 28px; font-size: 0.9rem; }

/* ---------- Mouvement (seulement si la personne ne l'a pas réduit) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .bouton, .nav a, .produit, .canal, .joindre li a, .sommaire a {
    transition: background-color 200ms var(--sortie), color 200ms var(--sortie), border-color 200ms var(--sortie), box-shadow 240ms var(--sortie), transform 240ms var(--sortie);
  }
  .bouton.principal::before { transition: transform 320ms var(--sortie); }
  .bouton::after, .produit .lien::after, .joindre li a::after { transition: transform 240ms var(--sortie); }
  .produit::before { transition: transform 280ms var(--sortie), background-color 200ms var(--sortie); }
  .bouton:active { transform: scale(0.97); }

  /* Arrivée sur l'accueil : le texte, puis le logo, puis les blocs. */
  .ouverture h1, .ouverture .chapeau, .ouverture .actions { animation: monte 700ms var(--sortie) both; }
  .ouverture .chapeau { animation-delay: 80ms; }
  .ouverture .actions { animation-delay: 160ms; }
  .surligne { animation: trace 900ms 380ms var(--sortie) both; }
  .embleme .socle { animation: monte 800ms 120ms var(--sortie) both; }
  .embleme::before { animation: pose-or 900ms 420ms var(--sortie) both; }
  .embleme::after { animation: pose 900ms 300ms var(--sortie) both; }
  .marches .bloc-or { transform-box: fill-box; transform-origin: center bottom; animation: pose-bloc 700ms 600ms var(--sortie) both; }
  .page h1, .page .chapeau, .page .mise-a-jour { animation: monte 600ms var(--sortie) both; }
  .page .chapeau, .page .mise-a-jour { animation-delay: 80ms; }
  .canal { animation: monte 600ms var(--sortie) both; }
  .canal:nth-child(2) { animation-delay: 70ms; }
  .canal:nth-child(3) { animation-delay: 140ms; }

  /* Apparition au défilement, là où le navigateur sait le faire en CSS. */
  @supports (animation-timeline: view()) {
    .revele {
      animation: monte linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    .produits .produit {
      animation: glisse linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
  }
}

@keyframes monte { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes glisse { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes trace { from { background-size: 0% 0.2em; } to { background-size: 100% 0.2em; } }
@keyframes pose { from { opacity: 0; transform: translate(-14px, 14px); } to { opacity: 1; transform: none; } }
@keyframes pose-or { from { opacity: 0; transform: translate(14px, -18px) rotate(8deg); } to { opacity: 1; transform: none; } }
@keyframes pose-bloc { from { transform: scaleY(0); } to { transform: scaleY(1); } }

@media print {
  .entete { position: static; }
  .entete .nav, .joindre, .sommaire, .marches, .page::before, .embleme::before, .embleme::after { display: none; }
  body, .pied, .registre { background: #fff; }
}