/* Direction artistique KEORA.
 *
 * Source de verite: le theme de la page d'accueil
 * (_next/static/css/5cefd20581cdc874.css), ou sont definis --font-sans,
 * --font-serif et la palette sandstone/cream/blue. Les pages construites a la
 * main (tunnel, panier, pages legales, SAV) importaient chacune leurs propres
 * polices Google et leur propre palette: trois systemes cohabitaient et aucun
 * ne ressemblait a la page d'accueil. Ce fichier est le seul endroit ou la
 * charte est ecrite; les pages n'utilisent plus que ces jetons.
 */

@font-face {
  font-family: 'AkkuratLL';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/AkkuratLL-Regular.woff2') format('woff2');
}

@font-face {
  font-family: 'AkkuratLL';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('/assets/fonts/AkkuratLL-Light.woff2') format('woff2');
}

:root {
  /* Typographie. La serif de la maquette (Editorial New) n'a pas de fichier:
     le repli est explicite ici ET sur la page d'accueil, pour que les deux
     rendent la meme chose au lieu de tomber sur des polices differentes. */
  --kr-sans: 'AkkuratLL', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --kr-serif: 'Editorial New', Georgia, 'Times New Roman', serif;

  /* Encres (sandstone-500 et ses attenuations). */
  --kr-ink: #4a4741;
  --kr-ink-soft: #6e6a60;
  --kr-ink-faint: #8f8a80;

  /* Fonds (cream-50, sandstone-100/300/450). */
  --kr-cream: #f7f1e8;
  --kr-cream-light: #fefaef;
  --kr-cream-deep: #efeae2;
  --kr-cream-edge: #e6ded3;
  --kr-surface: #ffffff;
  --kr-backdrop: #222428;

  /* Filets. */
  --kr-line: rgba(74, 71, 65, 0.14);
  --kr-line-soft: rgba(74, 71, 65, 0.08);

  /* Action (blue-100/200 du theme). */
  --kr-blue: #2a72de;
  --kr-blue-deep: #2056a6;

  /* Alerte (red-600). */
  --kr-danger: #d22c15;

  /* Vert du glyphe du logo. Reserve au monogramme, jamais en aplat de texte. */
  --kr-lime: #d4ff3a;
}

/* Titres: memes reglages que le h1 de la page d'accueil (serif, graisse
   legere, approche resserree), a l'echelle de chaque page. */
.kr-display {
  font-family: var(--kr-serif);
  font-weight: 300;
  letter-spacing: -0.035em;
  line-height: 1.06;
  color: var(--kr-ink);
}

/* Micro-titre en capitales espacees. La maquette l'ecrit en AkkuratLL, pas
   dans une police a chasse fixe. */
.kr-eyebrow {
  font-family: var(--kr-sans);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kr-ink-soft);
}

/* Boutons: pilule pleine encre, libelle creme. Le bleu reste pour les
   actions secondaires qui l'utilisent deja sur le site. */
.kr-btn {
  display: inline-block;
  border: 0;
  border-radius: 999px;
  padding: 16px 30px;
  font-family: var(--kr-sans);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  background: var(--kr-ink);
  color: var(--kr-cream);
  transition: filter 0.15s ease;
}

.kr-btn:hover { filter: brightness(1.12); }

.kr-btn--soft {
  background: var(--kr-cream);
  color: var(--kr-ink);
  border: 1px solid var(--kr-line);
}

.kr-btn--blue { background: var(--kr-blue); color: #fff; }
.kr-btn--blue:hover { background: var(--kr-blue-deep); filter: none; }

/* ---------------------------------------------------------------------------
 * Regles d'affichage mobile.
 *
 * Elles corrigent des comportements que les navigateurs mobiles appliquent
 * d'eux-memes et qui deformaient boutons et textes:
 *  - Safari et Chrome mobile regrossissent le texte des blocs larges en mode
 *    paysage (text-size-adjust);
 *  - iOS zoome sur le formulaire des qu'un champ fait moins de 16px;
 *  - une cible tactile sous 44px est difficile a viser (Apple HIG);
 *  - 100vh ignore la barre d'adresse et deborde;
 *  - un mot long (adresse e-mail, reference) elargit toute la page.
 * ------------------------------------------------------------------------ */

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

body {
  overflow-x: hidden;           /* aucune page ne defile lateralement */
  overflow-wrap: break-word;    /* un mot trop long se coupe au lieu d'elargir */
}

/* Les champs restent a 16px: en dessous, iOS zoome et decadre la page. */
input, select, textarea {
  font-size: max(16px, 1rem);
  font-family: var(--kr-sans);
}

/* Cible tactile confortable, et pas de halo bleu au tap. */
button, a[role="button"], .kr-btn, [class*="btn"], [class*="cta"] {
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 768px) {
  button, a[role="button"], .kr-btn {
    min-height: 44px;
  }

  /* Un bouton pleine largeur ne doit jamais depasser son conteneur ni se
     retrouver comprime par un flex parent. */
  button, .kr-btn {
    max-width: 100%;
    white-space: normal;
    flex-shrink: 0;
  }

  /* Les images et media suivent la largeur disponible. */
  img, video, svg, iframe, table {
    max-width: 100%;
    height: auto;
  }

  /* Barres collantes: on tient compte de l'encoche et de la barre du bas. */
  .ck-paybar, .kr-sticky, [class*="sticky"] {
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }
}

/* La hauteur d'ecran dynamique evite le saut quand la barre d'adresse se
   retracte. Repli sur vh pour les navigateurs qui ne connaissent pas dvh. */
@supports (height: 100dvh) {
  .kr-fullheight { height: 100dvh; }
}