/* ============================================================
   Keepnew — Design System Tokens & Utility Classes
   2026 Rebrand : Vintage · Classique · Luxe
   ============================================================ */

/* Google Fonts — Display : Playfair Display · UI/corps : Jost · Signature : Great Vibes */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..700;1,400..700&family=Jost:ital,wght@0,300..700;1,400&family=Great+Vibes&display=swap');

/* 1. Custom Properties
   ------------------------------------------------------------ */
:root {
  /* ── Palette navy ── */
  --kn-navy:        #24355C;
  --kn-navy-deep:   #1B2A4A;
  --kn-navy-ink:    #141F38;
  --kn-navy-muted:  #9AA7C4;

  /* ── Crème (papier) ── */
  --kn-cream:       #F7F4EC;
  --kn-cream-soft:  #EFEADD;
  --kn-cream-deep:  #E2DBC8;

  /* ── Rose poudré (accent vintage) ── */
  --kn-rose:        #F8E7E9;
  --kn-rose-mid:    #EFC6CB;
  --kn-rose-deep:   #E4AEB7;
  --kn-rose-600:    #A15D69;

  /* ── Royal (action) ── */
  --kn-blue:        #4A63E7;
  --kn-blue-600:    #3B50C9;
  --kn-blue-700:    #2F40A3;
  --kn-blue-050:    #E5E9FB;

  /* ── Blanc / Or / Neutres ── */
  --kn-white:       #FFFFFF;
  --kn-gold:        #B0821F;
  --kn-gold-light:  #F6EDD8;
  --kn-green:       #3E7C4F;
  --kn-green-light: #E4EFE7;
  --kn-red:         #B3453E;
  --kn-red-light:   #F7E4E2;

  /* ── Alias de compat ── */
  --kn-night:       var(--kn-navy);
  --kn-bg-alt:      var(--kn-cream);
  --kn-border:      #E4DECF;
  --kn-muted:       #6E7891;
  --kn-yellow:      var(--kn-rose-mid);   /* accents vintage (ex-jaune → rose) */
  --kn-yellow-deep: var(--kn-gold);       /* étoiles avis : reste or chaud */

  /* ── Typographie ── */
  --font-display: "Playfair Display", Georgia, serif;
  --font-body:    "Jost", "Century Gothic", Futura, sans-serif;
  --font-script:  "Great Vibes", cursive;
  --font-sans:    var(--font-body);   /* compat */

  /* ── Rayons — classiques, quasi carrés ── */
  --r-xs:   2px;
  --r-sm:   3px;
  --r-md:   6px;
  --r-card: 6px;
  --r-lg:   10px;
  --r-pill: 999px;
  --radius: var(--r-md);

  /* ── Ombres teintées navy ── */
  --shadow-card:   0 1px 2px rgba(27,42,74,.06),  0 8px 24px rgba(27,42,74,.08);
  --shadow-cta:    0 2px 6px rgba(27,42,74,.10),  0 12px 32px rgba(27,42,74,.14);
  --shadow-raised: 0 2px 6px rgba(27,42,74,.10),  0 16px 40px rgba(27,42,74,.14);
  --focus-ring:    0 0 0 2px var(--kn-cream), 0 0 0 4px var(--kn-blue);
  --ease-classic:  cubic-bezier(.4,0,.2,1);
  --dur-fast:      120ms;
  --dur-base:      220ms;
}

/* 2. Reset & Base
   ------------------------------------------------------------ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

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

body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--kn-navy-deep);
  background: var(--kn-cream);
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

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

ul, ol {
  list-style: none;
}

::selection { background: var(--kn-rose-mid); color: var(--kn-navy); }

/* 3. Échelle typographique
   ------------------------------------------------------------ */
h1, .h1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-style: normal;
  line-height: 1.08;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: .01em;
  color: var(--kn-navy);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: .01em;
  color: var(--kn-navy);
}

h3, .h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1.1rem;
  line-height: 1.3;
  color: var(--kn-navy);
}

p {
  font-weight: 400;
  line-height: 1.6;
}

/* 4. Conteneur
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: 1160px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

/* 5. Overline / Eyebrow
   ------------------------------------------------------------ */
.kn-eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .22em;
  color: var(--kn-blue);
  margin-bottom: .75rem;
}

/* 6. Ornements typographiques
   ------------------------------------------------------------ */

/* Soulignement royal */
.kn-highlight {
  position: relative;
  display: inline;
}
.kn-highlight::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .05em;
  width: 100%;
  height: 2px;
  background: var(--kn-blue);
}

/* Tampon rose — boîte bordée, capitales */
.kn-stamp {
  display: inline-block;
  border: 2px solid var(--kn-rose-mid);
  color: var(--kn-navy);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: .25em .7em;
}

/* Étiquette crème (post-it classique) */
.kn-postit {
  display: inline-block;
  background: var(--kn-cream-soft);
  color: var(--kn-navy);
  font-weight: 600;
  padding: .5rem 1rem;
  border: 1px solid var(--kn-border);
  box-shadow: var(--shadow-card);
}

/* Bulle — tag de style */
.kn-bubble {
  display: inline-block;
  background: var(--kn-blue-050);
  color: var(--kn-blue-700);
  font-weight: 600;
  font-size: .85rem;
  padding: .3em .85em;
  border-radius: var(--r-pill);
  border: 1px solid rgba(74,99,231,.25);
}

/* ── Surbrillance marqueur
   Usage : <h1>Votre <span class="hl">voiture</span> comme neuve.</h1>
   .hl = fond crème/blanc · .hl-strong = plus de punch ·
   .hl-inverse = sur fond navy · .hl-on-rose = sur fond rose
   -------------------------------------------------------- */

.hl         { background: linear-gradient(transparent 55%, var(--kn-rose-mid)  55%, var(--kn-rose-mid)  92%, transparent 92%); padding: 0 .08em; }
.hl-strong  { background: linear-gradient(transparent 55%, var(--kn-rose-deep) 55%, var(--kn-rose-deep) 92%, transparent 92%); padding: 0 .08em; }
.hl-inverse { background: linear-gradient(transparent 55%, var(--kn-rose-600)  55%, var(--kn-rose-600)  92%, transparent 92%); padding: 0 .08em; }
.hl-on-rose { background: linear-gradient(transparent 55%, var(--kn-cream)     55%, var(--kn-cream)     92%, transparent 92%); padding: 0 .08em; }

/* ── Surbrillances de titre (inline <span> dans h1/h2/h3)
   --------------------------------------------------------
   Usage : <h1>Gardez vos biens <span class="kn-hl-rose">comme neufs</span>.</h1>
   -------------------------------------------------------- */

/* 1. Italique Playfair Display (emphase élégante) */
.kn-hl-italic {
  font-style: italic;
  font-weight: inherit;
}

/* 2. Soulignement rose poudré décalé */
.kn-hl-underline {
  position: relative;
  display: inline;
  white-space: nowrap;
}
.kn-hl-underline::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: .08em;
  width: 100%;
  height: .1em;
  background: var(--kn-rose-mid);
  border-radius: 1px;
}

/* 3. Fond rose poudré — marker pastel */
.kn-hl-rose {
  background: var(--kn-rose-mid);
  color: var(--kn-navy);
  padding: .04em .18em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 4. Fond crème sur navy (inverse doux) */
.kn-hl-cream {
  background: var(--kn-cream);
  color: var(--kn-navy);
  padding: .04em .18em;
  border-radius: 2px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 5. Fond navy inversé — texte crème */
.kn-hl-navy {
  background: var(--kn-navy);
  color: var(--kn-cream);
  padding: .06em .22em;
  border-radius: var(--r-xs);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* 6. Couleur or — prix, chiffres, stats */
.kn-hl-gold {
  color: var(--kn-gold);
}

/* 7. Couleur royal — action, accent bleu */
.kn-hl-royal {
  color: var(--kn-blue);
}

/* 8. Couleur rose — accent vintage */
.kn-hl-rose-text {
  color: var(--kn-rose-deep);
}

/* 9. Accent Great Vibes (signature calligraphique, parcimonieux) */
.kn-hl-script {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 1.25em;
  line-height: .8;
  color: var(--kn-rose-deep);
  letter-spacing: .02em;
}

/* 10. Double filet — effet gravure cérémoniel */
.kn-hl-engraved {
  display: inline-block;
  padding: .04em .3em;
  border: 1px solid var(--kn-navy);
  outline: 1px solid var(--kn-navy);
  outline-offset: 3px;
  border-radius: 0;
  line-height: 1.2;
}
/* Sur fond navy */
.kn-bg--blue .kn-hl-engraved,
.kn-bg--night .kn-hl-engraved {
  border-color: var(--kn-cream);
  outline-color: rgba(247,244,236,.35);
  color: var(--kn-cream);
}

/* 7. Pills / Tags
   ------------------------------------------------------------ */
.kn-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .82rem;
  font-weight: 600;
  padding: .35em .9em;
  border-radius: var(--r-pill);
  white-space: nowrap;
}

.kn-pill--blue   { background: var(--kn-blue-050);  color: var(--kn-blue-700); }
.kn-pill--navy   { background: var(--kn-navy);       color: var(--kn-cream); }
.kn-pill--rose   { background: var(--kn-rose);       color: var(--kn-navy); }
.kn-pill--cream  { background: var(--kn-cream-soft); color: var(--kn-navy); }
.kn-pill--white  { background: rgba(255,255,255,.15); color: var(--kn-white); border: 1px solid rgba(255,255,255,.3); }
.kn-pill--night  { background: var(--kn-navy);        color: var(--kn-cream); }
/* compat */
.kn-pill--yellow { background: var(--kn-rose);       color: var(--kn-navy); }

/* 8. Boutons
   ------------------------------------------------------------ */
.kn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .04em;
  color: var(--kn-white);
  background: var(--kn-navy);
  border: none;
  border-radius: var(--r-xs);
  padding: .85em 2em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-classic),
              transform    var(--dur-fast) var(--ease-classic),
              box-shadow   var(--dur-fast) var(--ease-classic);
  text-decoration: none;
  white-space: nowrap;
}

.kn-btn:hover,
.kn-btn:focus-visible {
  background: var(--kn-navy-deep);
  transform: translateY(-1px);
  box-shadow: var(--shadow-cta);
  outline: none;
}

.kn-btn:active { transform: translateY(0); }

.kn-btn--royal {
  background: var(--kn-blue);
}
.kn-btn--royal:hover,
.kn-btn--royal:focus-visible {
  background: var(--kn-blue-600);
}

.kn-btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .04em;
  color: var(--kn-navy);
  background: transparent;
  border: 1px solid var(--kn-navy);
  border-radius: var(--r-xs);
  padding: .85em 2em;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-classic),
              color      var(--dur-fast) var(--ease-classic),
              transform  var(--dur-fast) var(--ease-classic);
  text-decoration: none;
  white-space: nowrap;
}

.kn-btn-outline:hover,
.kn-btn-outline:focus-visible {
  background: var(--kn-navy);
  color: var(--kn-cream);
  transform: translateY(-1px);
  outline: none;
}

/* 9. Carte
   ------------------------------------------------------------ */
.kn-card {
  background: var(--kn-white);
  border-radius: var(--r-card);
  border: 1px solid var(--kn-border);
  padding: 2rem;
  box-shadow: var(--shadow-card);
  transition: box-shadow var(--dur-base) var(--ease-classic),
              transform  var(--dur-base) var(--ease-classic);
}

.kn-card:hover {
  box-shadow: var(--shadow-raised);
  transform: translateY(-2px);
}

/* 10. CTA Pavé — Bloc de signature
   ------------------------------------------------------------ */
.kn-cta-pave {
  padding: 5rem 1.5rem;
}

.kn-cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  border-radius: var(--r-md);
  padding: 1.75rem 2rem;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-classic),
              box-shadow var(--dur-base) var(--ease-classic);
  cursor: pointer;
}
.kn-cta-card:hover { transform: translateY(-1px); }

.kn-cta-card__content {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
}
.kn-cta-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.1rem, 2vw, 1.8rem);
  line-height: 1.1;
  letter-spacing: .01em;
  margin: 0;
  white-space: nowrap;
}

.kn-cta-card__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  min-width: 60px;
  border-radius: 50%;
  font-size: 1.4rem;
  transition: transform var(--dur-base) var(--ease-classic);
}
.kn-cta-card:hover .kn-cta-card__arrow { transform: translateX(3px); }

/* — Variante glass (sur fond sombre) */
.kn-cta-card--glass {
  background: rgba(247,244,236,.1);
  border: 1px solid rgba(247,244,236,.2);
}
.kn-cta-card--glass .kn-eyebrow         { color: var(--kn-rose-mid); }
.kn-cta-card--glass .kn-cta-card__title { color: var(--kn-cream); }
.kn-cta-card--glass .kn-cta-card__arrow { background: var(--kn-cream); color: var(--kn-navy); }
.kn-cta-card--glass:hover .kn-cta-card__arrow { background: var(--kn-rose-mid); color: var(--kn-navy); }
.kn-cta-card--glass:hover { background: rgba(247,244,236,.17); }

/* — Variante navy (sur fond clair) */
.kn-cta-card--blue,
.kn-cta-card--night {
  background: var(--kn-navy);
  box-shadow: var(--shadow-cta);
}
.kn-cta-card--blue .kn-eyebrow,
.kn-cta-card--night .kn-eyebrow          { color: var(--kn-rose-mid); }
.kn-cta-card--blue .kn-cta-card__title,
.kn-cta-card--night .kn-cta-card__title  { color: var(--kn-cream); }
.kn-cta-card--blue .kn-cta-card__arrow,
.kn-cta-card--night .kn-cta-card__arrow  { background: var(--kn-cream); color: var(--kn-navy); }
.kn-cta-card--blue:hover .kn-cta-card__arrow,
.kn-cta-card--night:hover .kn-cta-card__arrow { background: var(--kn-rose-mid); color: var(--kn-navy); }

/* — Variante light */
.kn-cta-card--light {
  background: var(--kn-navy);
  box-shadow: var(--shadow-cta);
}
.kn-cta-card--light .kn-eyebrow          { color: var(--kn-rose-mid); }
.kn-cta-card--light .kn-cta-card__title  { color: var(--kn-cream); }
.kn-cta-card--light .kn-cta-card__arrow  { background: var(--kn-cream); color: var(--kn-navy); }
.kn-cta-card--light:hover .kn-cta-card__arrow { background: var(--kn-rose-mid); color: var(--kn-navy); }

/* Ligne téléphone sous le CTA */
.kn-cta-pave__phone {
  font-size: .9375rem;
  font-weight: 500;
  text-align: center;
  margin-top: 1.25rem;
  color: var(--kn-muted);
}
.kn-cta-pave__phone a { color: var(--kn-blue); }
.kn-bg--blue .kn-cta-pave__phone,
.kn-bg--night .kn-cta-pave__phone { color: rgba(247,244,236,.6); }
.kn-bg--blue .kn-cta-pave__phone a,
.kn-bg--night .kn-cta-pave__phone a { color: var(--kn-rose-mid); }

/* Mobile */
@media (max-width: 480px) {
  .kn-cta-card { padding: 1.25rem 1.5rem; }
  .kn-cta-card__title { font-size: 1.1rem; }
  .kn-cta-card__arrow { width: 44px; height: 44px; min-width: 44px; font-size: 1rem; }
}

/* 11. Utilitaires
   ------------------------------------------------------------ */
.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;
}

.text-center  { text-align: center; }
.text-muted   { color: var(--kn-muted); }

/* Ambiances de fond */
.kn-bg--white  { background: var(--kn-white);  color: var(--kn-navy); }
.kn-bg--alt    { background: var(--kn-cream);   color: var(--kn-navy); }
.kn-bg--cream  { background: var(--kn-cream);   color: var(--kn-navy); }
.kn-bg--rose   { background: var(--kn-rose);    color: var(--kn-navy); }
.kn-bg--blue   { background: var(--kn-navy);    color: var(--kn-cream); }
.kn-bg--night  { background: var(--kn-navy-ink);color: var(--kn-cream); }

.kn-bg--rose .kn-eyebrow  { color: var(--kn-rose-600); }
.kn-bg--blue .kn-eyebrow,
.kn-bg--night .kn-eyebrow { color: var(--kn-rose-mid); }

.kn-bg--blue h2,  .kn-bg--blue .h2,
.kn-bg--blue h1,  .kn-bg--blue .h1,
.kn-bg--night h2, .kn-bg--night .h2,
.kn-bg--night h1, .kn-bg--night .h1 { color: var(--kn-cream); }

.kn-bg--blue p,  .kn-bg--night p { color: rgba(247,244,236,.82); }

/* ── Grilles colonnes ──────────────────────────────────────── */
.kn-grid { display: grid; gap: 4rem; align-items: center; }
.kn-grid--1-1 { grid-template-columns: 1fr 1fr; }
.kn-grid--1-2 { grid-template-columns: 1fr 2fr; }
.kn-grid--2-1 { grid-template-columns: 2fr 1fr; }
.kn-grid--1-3 { grid-template-columns: 1fr 3fr; }
.kn-grid--3-1 { grid-template-columns: 3fr 1fr; }
.kn-grid--3-2 { grid-template-columns: 3fr 2fr; }
.kn-grid--2-3 { grid-template-columns: 2fr 3fr; }
.kn-grid--full { grid-template-columns: 1fr; }

.kn-grid--reverse > *:first-child { order: 2; }
.kn-grid--reverse > *:last-child  { order: 1; }

@media (max-width: 1024px) {
  .kn-grid--1-1, .kn-grid--1-2, .kn-grid--2-1,
  .kn-grid--1-3, .kn-grid--3-1, .kn-grid--3-2,
  .kn-grid--2-3 { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

@media (max-width: 768px) {
  .kn-grid--1-1, .kn-grid--1-2, .kn-grid--2-1,
  .kn-grid--1-3, .kn-grid--3-1, .kn-grid--3-2,
  .kn-grid--2-3 { grid-template-columns: 1fr; gap: 2rem; }

  .kn-grid--mobile-reverse > *:first-child { order: 2; }
  .kn-grid--mobile-reverse > *:last-child  { order: 1; }
  .kn-grid--mobile-hide-visual > *:last-child { display: none; }
}

/* ── Visibilité responsive ─────────────────────────────────── */
@media (max-width: 767px)              { .kn-hide-mobile  { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .kn-hide-tablet  { display: none !important; } }
@media (min-width: 1025px)             { .kn-hide-desktop { display: none !important; } }