/* KaioShield — feuille de style unique.

   ⚠️ RÈGLE À NE PAS ENFREINDRE (fondateur, 22/08/2026) :
   PARTOUT OÙ LE LOGO APPARAÎT, LE FOND DOIT ÊTRE CLAIR.
   Le logo s'affiche dans ses couleurs d'origine, sans retouche ; or « KAIO »
   est en bleu marine et disparaît sur un fond sombre. L'alternance clair/sombre
   du reste des sections est voulue et reste libre — elle ne concerne que les
   zones SANS logo.

   Palette relevée dans le logo : marine #021D4F, bleu #3F71B8, cyan #00C5FD.
   Aucune dépendance externe : pas de CDN, pas de police distante, pas de tracker.
   C'est un choix de sécurité et de vie privée autant qu'un choix technique. */

:root {
  --marine: #021D4F;
  --bleu: #3F71B8;   /* couleur de « SHIELD » — mise à jour le 22/08/2026 */
  --cyan: #00C5FD;
  --encre: #101828;
  --gris: #5b6478;
  --gris-clair: #eef1f6;
  --blanc: #ffffff;
  --largeur: 1080px;
  --police: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--police);
  color: var(--encre);
  background: var(--blanc);
  line-height: 1.6;
  font-size: 17px;
}

.contenu { max-width: var(--largeur); margin: 0 auto; padding: 0 24px; }

/* ── En-tête ─────────────────────────────────────────────────────────────── */
/* En-tête CLAIR : le logo y est affiché dans ses couleurs d'origine, sans
   retouche (demande du fondateur, 22/08/2026). C'est pour cette raison que le
   fond ne peut pas être sombre : « KAIO » est en bleu marine et s'y effacerait. */
header {
  background: var(--blanc);
  padding: 16px 0;
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid #e3e8f0;
}
header .contenu { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
/* Le logo fourni empile blason et texte : réduit à 46 px il devenait illisible.
   Il est donc découpé en deux images, recomposées côte à côte — le texte reste
   lisible et le blason garde sa place. */
.marque { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.marque .blason { height: 44px; width: auto; display: block; }
.marque .mot { height: 21px; width: auto; display: block; }
@media (max-width: 560px) {
  .marque .blason { height: 38px; }
  .marque .mot { height: 18px; }
  nav ul { gap: 18px; }
}
nav ul { list-style: none; display: flex; gap: 28px; margin: 0; padding: 0; flex-wrap: wrap; }
nav a { color: var(--marine); text-decoration: none; font-weight: 600; font-size: 15px; }
nav a:hover, nav a:focus { color: var(--bleu); }
nav a[aria-current="page"] { color: var(--bleu); border-bottom: 2px solid var(--bleu); padding-bottom: 3px; }

/* ── Bandeau d'accueil ───────────────────────────────────────────────────── */
.hero { background: linear-gradient(160deg, var(--marine) 0%, #063a86 100%); color: var(--blanc); padding: 88px 0 96px; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.15; margin: 0 0 18px; letter-spacing: -0.5px; }
.hero p { font-size: 1.15rem; color: #c9d8f2; max-width: 640px; margin: 0 0 32px; }

.bouton {
  display: inline-block;
  background: var(--bleu);
  color: var(--blanc);
  text-decoration: none;
  font-weight: 700;
  padding: 14px 30px;
  border-radius: 6px;
}
.bouton:hover, .bouton:focus { background: var(--cyan); color: var(--marine); }
.bouton.secondaire { background: transparent; border: 2px solid #6f9de8; margin-left: 12px; }
.bouton.secondaire:hover { background: var(--blanc); border-color: var(--blanc); color: var(--marine); }

/* ── Sections ────────────────────────────────────────────────────────────── */
section { padding: 72px 0; }
section.alt { background: var(--gris-clair); }
h2 { font-size: 1.9rem; margin: 0 0 12px; color: var(--marine); letter-spacing: -0.3px; }
h3 { font-size: 1.15rem; margin: 0 0 8px; color: var(--marine); }
.chapeau { color: var(--gris); max-width: 620px; margin: 0 0 40px; }

.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 28px; }
.carte { background: var(--blanc); border: 1px solid #dde3ed; border-radius: 10px; padding: 28px; }
.carte p { margin: 0; color: var(--gris); font-size: 15.5px; }

/* Emplacement réservé à une future référence : présent visuellement, muet.
   On ne remplit pas une case avec « à venir » — annoncer un produit qu'on n'a
   pas est une promesse, et ce site n'en fait aucune. */
.carte.vide {
  border-style: dashed;
  border-color: #dfe5ee;
  background: #fafbfd;
  min-height: 132px;
}

/* ── Fiche produit ───────────────────────────────────────────────────────── */
.specs { width: 100%; border-collapse: collapse; margin: 28px 0; }
.specs th, .specs td { text-align: left; padding: 13px 16px; border-bottom: 1px solid #dde3ed; }
.specs th { width: 42%; color: var(--marine); font-weight: 600; }
.specs tr:nth-child(odd) { background: #f7f9fc; }

.visuel-attente {
  background: repeating-linear-gradient(45deg, #eef1f6, #eef1f6 12px, #e5eaf3 12px, #e5eaf3 24px);
  border: 1px dashed #a8b4c8;
  border-radius: 10px;
  min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  color: var(--gris); font-size: 15px; text-align: center; padding: 24px;
}

/* ── Où acheter ──────────────────────────────────────────────────────────── */
/* La boutique officielle est mise en avant par une SECTION sombre, comme les
   zones du bandeau d'accueil, plutôt que par un cadre autour du texte : un
   encadré isolé au milieu d'une page claire faisait bricolé, et l'alternance
   clair/sombre est déjà le langage du reste du site (demande du fondateur,
   23/08/2026). Même dégradé que .hero — aucun logo n'apparaît dans ces zones,
   la règle du fond clair ne s'y applique donc pas. */
section.marine { background: linear-gradient(160deg, var(--marine) 0%, #063a86 100%); color: var(--blanc); }
section.marine h2, section.marine h3 { color: var(--blanc); }
section.marine .chapeau { color: #c9d8f2; }
section.marine a:not(.bouton) { color: #cfe0fb; }

.etiquette { display: inline-block; background: var(--cyan); color: var(--marine); font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; margin-bottom: 12px; }

/* ── Pied de page ────────────────────────────────────────────────────────── */
/* Pas de marge au-dessus : le pied de page doit toucher la dernière section.
   Avec une marge, une section colorée (grise ou marine) laissait une bande
   blanche parasite juste avant le pied de page. L'écart vient du padding
   des sections, pas d'une marge. */
footer { background: var(--marine); color: #9fb3d4; padding: 48px 0 36px; font-size: 14.5px; }
footer a { color: #cfe0fb; }
footer .liens { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 20px; }
footer .copyright { color: #8ba4c9; margin-top: 4px; }
footer .mentions-tierces { color: #7089b0; font-size: 13px; border-top: 1px solid #123168; padding-top: 18px; margin-top: 22px; }

/* ── Pages de texte ──────────────────────────────────────────────────────── */
.page-texte { padding: 64px 0; max-width: 760px; }
.page-texte h1 { color: var(--marine); font-size: 2.1rem; margin-bottom: 8px; }
.page-texte h2 { font-size: 1.25rem; margin-top: 36px; }