/* =============================================================================
   Schell Consult — sc2026.css
   Autonome : aucune police, image ou script chargé depuis un tiers.
   Direction : grille suisse + lecture d'instrument. Palette dérivée du logo ;
   accent bleu réservé à VulnAway et aux marqueurs de structure.
   ========================================================================== */

/* --------------------------------- Tokens -------------------------------- */
:root {
  --ink:      #0E1726;
  --ink-2:    #1B2839;
  --ink-3:    #33465E;
  --steel:    #57575B;   /* gris du logo */
  --paper:    #F7F7F4;
  --paper-2:  #EFEEE9;
  --surface:  #FFFFFF;
  --rule:     #DEDDD6;
  --rule-dk:  #2C3A4D;

  /* Palette prélevée dans logo.svg :
     #0091BE disque · #93D1D5 chevron clair · #57575B texte · #B3B1B4 chevrons.
     Le bleu de marque donne 3.38:1 sur fond clair — suffisant pour un aplat ou
     un filet (seuil AA 3:1), insuffisant pour du texte (seuil 4.5:1).
     D'où deux tokens : --brand pour les surfaces, --brand-ink pour le texte.
     Ne pas les intervertir. */
  --brand:     #0091BE;   /* aplats, filets, marqueurs      — 3.38:1 */
  --brand-ink: #00708F;   /* texte de marque sur fond clair — 5.27:1 */
  --sky:       #93D1D5;   /* accents sur fond encre         — 10.5:1 */

  /* Sémantique de criticité — hors charte à dessein : ces couleurs portent un
     sens (niveau CVSS), elles ne décorent pas. */
  --crit:      #FF5A6E;
  --high:      #F0B33B;
  --ok:        #55D6A0;

  --sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --wrap: 1180px;
  --gut:  clamp(20px, 5vw, 48px);
  --step: clamp(56px, 8vw, 104px);
}

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

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

a { color: var(--ink); text-decoration-color: var(--rule); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--brand); }

h1, h2, h3 { margin: 0; line-height: 1.08; letter-spacing: -.02em; font-weight: 700; }
p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--brand-ink);
  outline-offset: 3px;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #fff; padding: 12px 18px;
  font: 600 14px/1 var(--sans); text-decoration: none;
}
.skip:focus { left: 0; }

.wrap {
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gut);
}

/* ------------------------------- Typographie ------------------------------ */
.eyebrow {
  font: 500 12px/1.4 var(--mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--steel);
  margin-bottom: 14px;
}
.eyebrow--light { color: rgba(255,255,255,.55); }

/* --------------------------------- Boutons -------------------------------- */
.btn {
  display: inline-block;
  padding: 14px 26px;
  font: 600 14px/1 var(--sans);
  letter-spacing: .02em;
  text-decoration: none;
  border: 1.5px solid transparent;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn--primary { background: var(--brand); color: var(--ink); border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: #fff; }

.btn--invert { background: #fff; color: var(--ink); border-color: #fff; }
.btn--invert:hover { background: var(--brand-ink); border-color: var(--brand-ink); color: #fff; }

/* ------------------------- Barre technique (IP) --------------------------- */
.readout { background: var(--ink); color: rgba(255,255,255,.7); }
.readout__in {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-block: 8px;
  font: 500 12px/1.6 var(--mono);
  letter-spacing: .06em;
}
.readout__label { text-transform: uppercase; color: rgba(255,255,255,.62); }
.readout__val { display: inline-flex; align-items: center; gap: 8px; color: #fff; }
.readout__val .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.readout__val.is-ok   { color: var(--sky); }
.readout__val.is-warn { color: var(--high); }
.readout__note { color: rgba(255,255,255,.58); }
@media (max-width: 640px) { .readout__note { display: none; } }

/* --------------------------------- En-tête -------------------------------- */
.head {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247,247,244,.92);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--rule);
}
.head__in {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 68px;
}
.brand { display: block; flex: none; }
.brand img { width: 132px; height: auto; aspect-ratio: 178 / 77.9; }

.nav { display: flex; align-items: center; gap: 28px; }
.nav__list { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.nav__a {
  font: 600 13.5px/1 var(--sans);
  text-decoration: none;
  color: var(--ink-3);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.nav__a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.nav__a--flag { color: var(--brand-ink); }
.nav__a--flag:hover { color: var(--ink); border-bottom-color: var(--brand); }

.lang { display: flex; gap: 10px; padding-left: 20px; border-left: 1px solid var(--rule); }
.lang a {
  font: 500 12px/1 var(--mono); letter-spacing: .1em;
  color: var(--steel); text-decoration: none;
}
.lang a:hover { color: var(--brand-ink); }

.burger {
  display: none;
  width: 44px; height: 44px;
  background: none; border: 1px solid var(--rule); cursor: pointer;
  padding: 0;
}
.burger__bars, .burger__bars::before, .burger__bars::after {
  display: block; width: 20px; height: 1.5px; background: var(--ink);
  margin-inline: auto; transition: transform .2s ease, opacity .2s ease;
}
.burger__bars::before, .burger__bars::after { content: ""; position: relative; }
.burger__bars::before { top: -6px; }
.burger__bars::after  { top: 4.5px; }
.burger[aria-expanded="true"] .burger__bars { background: transparent; }
.burger[aria-expanded="true"] .burger__bars::before { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__bars::after  { transform: translateY(-4.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .burger { display: block; }
  /* Sans JS, le burger est inopérant : le menu reste déplié. */
  .no-js .burger { display: none; }
  .no-js .nav { display: flex; position: static; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding: 8px var(--gut) 20px;
  }
  .nav.is-open { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__list li { border-bottom: 1px solid var(--rule); }
  .nav__a { display: block; padding: 14px 0; border-bottom: none; font-size: 16px; }
  .lang { padding: 16px 0 0; border-left: none; }
}

/* ---------------------------------- Hero ---------------------------------- */
.hero { padding-block: clamp(48px, 7vw, 88px) var(--step); }
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
@media (max-width: 900px) { .hero__in { grid-template-columns: 1fr; } }

.hero__h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  letter-spacing: -.035em;
  margin-bottom: 24px;
}
.hero__lead {
  font-size: clamp(16px, 1.6vw, 18.5px);
  color: var(--ink-3);
  max-width: 52ch;
  margin-bottom: 32px;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------- Signature : lecture de rapport VulnAway ------------------ */
.scan {
  margin: 0;
  background: var(--ink);
  border: 1px solid var(--rule-dk);
  box-shadow: 0 24px 60px -32px rgba(14,23,38,.5);
}
.scan__head {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule-dk);
}
.scan__dots { display: flex; gap: 6px; }
.scan__dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--rule-dk); }
.scan__title {
  font: 500 12px/1 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.5);
}
.scan__body { padding: 20px 18px; }
.scan__line {
  font: 400 13px/1.85 var(--mono);
  white-space: pre-wrap;
  color: rgba(255,255,255,.58);
}
.scan__line--crit { color: var(--crit); font-weight: 600; }
.scan__line--high { color: var(--high); }
.scan__line--med  { color: rgba(255,255,255,.66); }
.scan__line--ok   { color: var(--ok); margin-top: 10px; }

.js [data-scan] .scan__line { opacity: 0; transform: translateY(4px); }
.js [data-scan].is-live .scan__line { animation: scanIn .28s ease forwards; }

/* Cascade des lignes — sans style inline, pour rester compatible avec une
   CSP stricte (style-src 'self' bloque aussi les attributs style). */
.js [data-scan].is-live .scan__line:nth-child(1) { animation-delay: 0s;    }
.js [data-scan].is-live .scan__line:nth-child(2) { animation-delay: .16s;  }
.js [data-scan].is-live .scan__line:nth-child(3) { animation-delay: .32s;  }
.js [data-scan].is-live .scan__line:nth-child(4) { animation-delay: .48s;  }
.js [data-scan].is-live .scan__line:nth-child(5) { animation-delay: .64s;  }
.js [data-scan].is-live .scan__line:nth-child(6) { animation-delay: .80s;  }
.js [data-scan].is-live .scan__line:nth-child(7) { animation-delay: .96s;  }
.js [data-scan].is-live .scan__line:nth-child(n+8) { animation-delay: 1.12s; }

@keyframes scanIn { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .js [data-scan] .scan__line { opacity: 1; transform: none; }
}

.scan__note {
  padding: 0 18px 16px;
  font: 400 12px/1.5 var(--mono);
  color: rgba(255,255,255,.55);
}

/* -------------------------------- VulnAway -------------------------------- */
.va {
  background: var(--ink);
  color: #fff;
  padding-block: var(--step);
  position: relative;
}
.va::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
  background: var(--brand);
}
.va__h {
  font-size: clamp(40px, 7vw, 82px);
  letter-spacing: -.045em;
  margin-bottom: 10px;
}
.va__claim {
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 400;
  color: #fff;
  max-width: 24ch;
  margin-bottom: 22px;
  letter-spacing: -.01em;
}
.va__lead {
  max-width: 62ch;
  color: rgba(255,255,255,.62);
  margin-bottom: 48px;
}
.va__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule-dk);
  border-block: 1px solid var(--rule-dk);
  margin-bottom: 44px;
}
@media (max-width: 900px) { .va__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .va__grid { grid-template-columns: 1fr; } }

.va__cell { background: var(--ink); padding: 28px 22px 30px; }
.va__cell h3 {
  font: 600 12px/1.4 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--crit);
  margin-bottom: 12px;
}
.va__cell p { font-size: 15px; color: rgba(255,255,255,.66); }
.va__cell em { font-style: normal; color: #fff; border-bottom: 1px solid var(--sky); }

.va__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.va__more {
  display: inline-flex; align-items: center; min-height: 34px;
  font: 600 14px/1 var(--sans);
  color: var(--sky);
  text-decoration: none;
  box-shadow: inset 0 -1px 0 rgba(147,209,213,.45);
}
.va__more:hover { color: #fff; box-shadow: inset 0 -1px 0 #fff; }

.va__meta {
  display: flex; flex-wrap: wrap; gap: 8px 28px;
  margin: -20px 0 40px;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
}

/* -------------------------------- Sections -------------------------------- */
.sec { padding-block: var(--step); border-top: 1px solid var(--rule); }
.sec--alt { background: var(--paper-2); }
.sec--contact { background: var(--ink); color: #fff; border-top-color: var(--rule-dk); }

.sec__in {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
}
@media (max-width: 860px) { .sec__in { grid-template-columns: 1fr; gap: 24px; } }

.sec__rail { position: sticky; top: 92px; align-self: start; }
@media (max-width: 860px) { .sec__rail { position: static; } }

.sec__h { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -.03em; }
.sec--contact .sec__h { color: #fff; }

.sec__lead {
  font-size: clamp(17px, 1.8vw, 20px);
  color: var(--ink-3);
  max-width: 62ch;
  margin-bottom: 32px;
}
.sec--contact .sec__lead { color: rgba(255,255,255,.62); }

.sec__more { margin-top: 26px; font-size: 15px; }

/* Listes de prestations : filets, pas de puces */
.items { border-top: 1px solid var(--rule); }
.items li {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0 14px 26px;
  position: relative;
  font-size: 16px;
  color: var(--ink-2);
}
.items li::before {
  content: ""; position: absolute; left: 0; top: 23px;
  width: 12px; height: 1.5px; background: var(--brand);
}
.items--2col { columns: 2; column-gap: 44px; border-top: none; }
.items--2col li { break-inside: avoid; border-top: 1px solid var(--rule); border-bottom: none; }
@media (max-width: 720px) { .items--2col { columns: 1; } }

/* Certifications */
.certs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 30px; }
.certs li { display: flex; }
.certs a {
  display: inline-flex; align-items: center; min-height: 34px;
  font: 600 12px/1 var(--mono);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 13px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-2);
  text-decoration: none;
  transition: border-color .15s ease, color .15s ease;
}
.certs a:hover { border-color: var(--brand); color: var(--brand-ink); }

/* Captures d'audit */
.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.shot { margin: 0; }
.shot img { display: block; }   /* pas de cadre : les captures portent le leur */
.shot figcaption {
  margin-top: 10px;
  font: 400 12px/1.5 var(--mono);
  color: var(--steel);
}

.ipv6badge { margin-top: 32px; }
.ipv6badge a { display: inline-flex; gap: 14px; align-items: center; }

/* Cartes ressources */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  padding: 26px 24px 24px;
  display: flex; flex-direction: column;
}
.card__kind {
  font: 600 12px/1 var(--mono);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand-ink); margin-bottom: 14px;
}
.card__h { font-size: 22px; margin-bottom: 10px; }
.card__d { font-size: 15px; color: var(--steel); margin-bottom: 20px; flex: 1; }
.card__a {
  align-self: flex-start;
  font: 600 13.5px/1 var(--sans);
  text-decoration: none;
  border-bottom: 2px solid var(--brand);
  padding-bottom: 4px;
}
.card__a:hover { color: var(--brand-ink); }

/* Contact */
.contact { border-top: 1px solid var(--rule-dk); }
.contact li {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule-dk);
}
@media (max-width: 560px) { .contact li { grid-template-columns: 1fr; } }
.contact__k {
  font: 500 12px/1.6 var(--mono);
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.62);
}
.contact__v {
  font-size: 19px; color: #fff;
  text-decoration-color: rgba(255,255,255,.3);
}
.contact__v:hover { text-decoration-color: var(--sky); }
.contact__note {
  grid-column: 2; font-size: 13.5px; color: rgba(255,255,255,.62);
}
@media (max-width: 560px) { .contact__note { grid-column: 1; } }

/* -------------------------------- Pied de page ---------------------------- */
.foot { background: var(--ink-2); color: rgba(255,255,255,.6); padding-block: 44px; }
.foot__in { display: grid; gap: 26px; }
.foot__addr { font-style: normal; font-size: 15px; line-height: 1.8; }
.foot__addr strong { color: #fff; }
.foot__addr a { color: rgba(255,255,255,.75); }

.foot__certs { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot__certs a {
  font: 500 12px/1 var(--mono); letter-spacing: .1em;
  color: rgba(255,255,255,.68); text-decoration: none;
}
.foot__certs a:hover { color: #fff; }

.foot__sig { font-size: 13px; color: rgba(255,255,255,.62); }
.foot__sig a { color: rgba(255,255,255,.6); }

/* -------------------------------- Impression ------------------------------ */
@media print {
  .readout, .head, .scan, .hero__cta, .burger { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .va, .sec--contact, .foot { background: #fff !important; color: #000 !important; }
  .va__cell, .va__cell p, .sec--contact .sec__lead, .contact__v { color: #000 !important; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}


/* ---------------------------------------------------------------------------
   Accessibilite — cibles tactiles >= 24px (WCAG 2.5.8, niveau AA).
   Ajoute en fin de cascade pour ne pas entrer en conflit avec les regles
   de composant ci-dessus. Les liens en pleine ligne de texte (CNIL, PWD4.CH)
   relevent de l'exception « inline » de la norme et ne sont pas cibles.
   --------------------------------------------------------------------------- */
.lang a,
.foot__certs a,
.card__a {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
}
.lang a { padding-inline: 6px; }

.card__a {
  border-bottom: none;
  padding-bottom: 0;
  box-shadow: inset 0 -2px 0 var(--brand);
}

/* Contrastes releves sur fond encre */
.scan__note   { color: rgba(255,255,255,.55); }
.va__meta     { color: rgba(255,255,255,.55); }
.foot__certs a{ color: rgba(255,255,255,.62); }
.foot__sig    { color: rgba(255,255,255,.5);  }

/* ---------------------------------------------------------------------------
   Liens ouvrant un nouvel onglet — repère visuel sur les liens en ligne
   uniquement. Les boutons et les badges sont déjà identifiables par leur
   forme ; y ajouter une flèche serait du bruit.
   Réserve d'accessibilité : le contenu généré par CSS n'est pas annoncé de
   façon fiable par tous les lecteurs d'écran. Le repère est visuel, pas
   sémantique.
   --------------------------------------------------------------------------- */
.items a[target="_blank"]::after,
.sec__lead a[target="_blank"]::after,
.sec__more a[target="_blank"]::after,
.foot__addr a[target="_blank"]::after {
  content: "\2197";              /* ↗ */
  display: inline-block;
  margin-left: .25em;
  font-size: .85em;
  line-height: 1;
  vertical-align: baseline;
  opacity: .55;
}
.items a[target="_blank"]:hover::after,
.sec__lead a[target="_blank"]:hover::after,
.sec__more a[target="_blank"]:hover::after { opacity: 1; }