/*! Kidopass Design System · généré par build.mjs, ne pas modifier : éditer les sources */

/* ---- foundations/tokens.css ---- */
/* ==========================================================================
   Kidopass Design System — Tokens
   Source : Kidopass Brand Book & Webdesign, Direction 01 (septembre 2026).
   Toute valeur visuelle passe par ces variables. Aucun composant ne
   code une couleur, une taille ou un rayon en dur.
   ========================================================================== */

:root {
  /* --- Couleurs de marque (Marine & miel, retenue le 18.09.2026) ------ */
  --kp-marine: #1E2A47;       /* encre : structure, texte, bandes */
  --kp-miel: #FFC85C;         /* action principale, avantage (encre marine dessus : 9,3:1) */
  --kp-creme: #FAF5EC;        /* fond principal */
  --kp-abricot: #FFB59C;      /* accroche, accent */
  --kp-ciel: #D6E4F5;         /* accent ponctuel */

  /* --- Twist « Le bon plan qui claque » -------------------------------
     Le corail est la couleur du deal : prix XXL, éclats, bandeaux,
     surfaces d'impact. La marine reste l'encre (texte, logo).
     Pour revenir à une version plus sobre : --kp-fort: var(--kp-marine) et
     --kp-sur-fort: var(--kp-creme). */
  --kp-corail: #FF8A6B;       /* texte marine dessus : 6,2:1 */
  --kp-corail-fort: #F5765A;
  --kp-corail-profond: #C9401F;  /* le seul corail qui porte du blanc : 4,96:1 */
  --kp-corail-clair: #FFE3DA;

  /* --- Dérivés d'interface --------------------------------------------- */
  --kp-blanc: #FFFFFF;        /* cartes, champs */
  --kp-sable: #F1EADC;        /* surface secondaire */
  --kp-ligne: #E3DCCB;        /* filets, bordures */
  --kp-marine-80: #2A3859;    /* marine survolée */
  --kp-marine-60: #4E587A;    /* texte secondaire (6,4:1 sur crème) */
  --kp-marine-40: #8890A8;    /* texte discret, placeholders, bordures fortes (3,2:1 sur blanc) */
  --kp-marine-10: rgba(30, 42, 71, 0.08);
  --kp-miel-fort: #F5B93D;    /* miel survolé */
  --kp-abricot-clair: #FFE6DC;
  --kp-ciel-clair: #EAF1FA;
  --kp-erreur: #B93A24;       /* erreurs de formulaire uniquement */
  --kp-erreur-clair: #FBE6E1;

  /* --- Rôles ----------------------------------------------------------- */
  --kp-fond: var(--kp-creme);
  --kp-surface: var(--kp-blanc);
  --kp-surface-2: var(--kp-sable);
  --kp-texte: var(--kp-marine);
  --kp-texte-2: var(--kp-marine-60);
  --kp-texte-3: var(--kp-marine-40);
  --kp-bordure: var(--kp-ligne);
  --kp-bordure-champ: var(--kp-marine-40);   /* contour des champs : 3:1 sur blanc */
  --kp-action: var(--kp-miel);
  --kp-focus: var(--kp-marine);
  --kp-fort: var(--kp-corail);             /* grande surface d'impact */
  --kp-sur-fort: var(--kp-marine);         /* texte sur surface d'impact */
  --kp-sur-fort-doux: rgba(30, 42, 71, 0.78);  /* grands textes et décor uniquement */
  --kp-filet-fort: rgba(30, 42, 71, 0.28);
  --kp-deal: var(--kp-corail);             /* badges et stickers de réduction */
  --kp-fort-blanc: var(--kp-corail-profond);  /* aplat qui porte du texte blanc */
  --kp-voile-rgb: 18, 22, 38;              /* voile sur photo : encre nuit */

  /* --- Typographie ----------------------------------------------------- */
  --kp-police-titre: "Manrope", "Helvetica Neue", Arial, sans-serif;
  --kp-police-texte: "Inter", "Helvetica Neue", Arial, sans-serif;
  --kp-police-main: "Caveat", "Segoe Script", cursive;

  --kp-taille-display: clamp(42px, 5.4vw, 76px);
  --kp-taille-h1: clamp(34px, 4.2vw, 58px);
  --kp-taille-h2: clamp(28px, 3.3vw, 46px);
  --kp-taille-h3: clamp(23px, 2.2vw, 30px);
  --kp-taille-h4: 22px;
  --kp-taille-h5: 18px;
  --kp-taille-lead: clamp(17px, 1.4vw, 19px);
  --kp-taille-texte: 17px;
  --kp-taille-sm: 15px;
  --kp-taille-xs: 13px;
  --kp-taille-label: 12px;

  --kp-graisse-titre: 800;
  --kp-approche-display: -0.045em;
  --kp-approche-h1: -0.04em;
  --kp-approche-h2: -0.035em;
  --kp-approche-h3: -0.025em;
  --kp-approche-label: 0.14em;

  /* --- Espacements (base 4) -------------------------------------------- */
  --kp-1: 4px;  --kp-2: 8px;  --kp-3: 12px; --kp-4: 16px; --kp-5: 20px;
  --kp-6: 24px; --kp-8: 32px; --kp-10: 40px; --kp-12: 48px; --kp-14: 56px;
  --kp-16: 64px; --kp-20: 80px; --kp-24: 96px;

  /* --- Grille ---------------------------------------------------------- */
  --kp-contenu: 1280px;
  --kp-gouttiere: 24px;
  --kp-marge: 24px;           /* 20px sous 900px */
  --kp-section: clamp(48px, 7vw, 88px);

  /* --- Formes ---------------------------------------------------------- */
  --kp-rayon-carte: 20px;
  --kp-rayon-bloc: 16px;
  --kp-rayon-champ: 12px;
  --kp-rayon-petit: 8px;
  --kp-rayon-pilule: 999px;

  /* --- Élévation : une seule ombre, très douce ------------------------- */
  --kp-ombre: 0 10px 30px rgba(30, 42, 71, 0.08);
  --kp-ombre-haute: 0 -8px 28px rgba(30, 42, 71, 0.10);

  /* --- Contrôles ------------------------------------------------------- */
  --kp-hauteur-sm: 44px;
  --kp-hauteur: 52px;
  --kp-hauteur-lg: 60px;
  --kp-entete: 76px;
  --kp-tabbar: 72px;

  /* --- Mouvement ------------------------------------------------------- */
  --kp-duree: 160ms;
  --kp-courbe: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* --- Couches --------------------------------------------------------- */
  --kp-z-collant: 20;
  --kp-z-entete: 30;
  --kp-z-menu: 40;

  /* Points de rupture (référence, non utilisables en @media) :
     large 1080px · tablette 900px · mobile 600px · petit 400px */
}

@media (max-width: 900px) {
  :root { --kp-marge: 20px; --kp-entete: 64px; }
}

/* ---- foundations/base.css ---- */
/* ==========================================================================
   Base : remise à zéro, typographie, liens, focus.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kp-entete) + 16px); }
body { margin: 0; }
img, svg, video { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, h4, h5, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 0.9em; }

.kp {
  background: var(--kp-fond);
  color: var(--kp-texte);
  font-family: var(--kp-police-texte);
  font-size: var(--kp-taille-texte);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.kp ::selection { background: var(--kp-miel); color: var(--kp-marine); }
.kp :focus-visible { outline: 3px solid var(--kp-focus); outline-offset: 3px; }

/* --- Titres ------------------------------------------------------------ */
.kp-display, .kp-h1, .kp-h2, .kp-h3, .kp-h4, .kp-h5 {
  font-family: var(--kp-police-titre);
  font-weight: var(--kp-graisse-titre);
  text-wrap: balance;
}
.kp-display { font-size: var(--kp-taille-display); line-height: 0.98; letter-spacing: var(--kp-approche-display); }
.kp-h1 { font-size: var(--kp-taille-h1); line-height: 1.02; letter-spacing: var(--kp-approche-h1); }
.kp-h2 { font-size: var(--kp-taille-h2); line-height: 1.06; letter-spacing: var(--kp-approche-h2); }
.kp-h3 { font-size: var(--kp-taille-h3); line-height: 1.15; letter-spacing: var(--kp-approche-h3); }
.kp-h4 { font-size: var(--kp-taille-h4); line-height: 1.22; letter-spacing: -0.02em; }
.kp-h5 { font-size: var(--kp-taille-h5); line-height: 1.3; letter-spacing: -0.01em; }

/* --- Textes ------------------------------------------------------------ */
.kp-lead { font-size: var(--kp-taille-lead); line-height: 1.5; text-wrap: pretty; }
.kp-texte { font-size: var(--kp-taille-texte); text-wrap: pretty; }
.kp-sm { font-size: var(--kp-taille-sm); line-height: 1.5; }
.kp-xs { font-size: var(--kp-taille-xs); line-height: 1.45; }
.kp-muted { color: var(--kp-texte-2); }
.kp-discret { color: var(--kp-texte-3); }
.kp-gras { font-weight: 600; }
.kp-label { font-size: var(--kp-taille-label); font-weight: 600; letter-spacing: var(--kp-approche-label); text-transform: uppercase; color: var(--kp-texte-2); line-height: 1.3; }
.kp-label--miel { color: var(--kp-miel); }
.kp-main { font-family: var(--kp-police-main); font-weight: 700; line-height: 1; }
.kp-prix { font-family: var(--kp-police-titre); font-weight: 800; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kp-barre { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--kp-texte-2); font-weight: 500; }

/* Surlignage miel : aplat posé sur la partie basse des lettres, ligne par
   ligne. Il ne recouvre jamais la ligne du dessus, quelle que soit la longueur. */
.kp-surligne {
  background-image: linear-gradient(var(--kp-miel), var(--kp-miel));
  background-repeat: no-repeat;
  background-size: 100% 0.78em;
  background-position: 0 78%;
  padding: 0 0.12em;
  margin: 0 -0.12em;
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;
}

/* Contenu de texte long (conditions, FAQ, pages légales) */
.kp-prose { max-width: 68ch; }
.kp-prose > * + * { margin-top: 1em; }
.kp-prose a { text-decoration: underline; text-underline-offset: 4px; }

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

/* ---- foundations/layout.css ---- */
/* ==========================================================================
   Primitives de mise en page. Pas de style de marque ici : seulement de
   l'espace, de l'alignement et des colonnes.
   ========================================================================== */

.kp-conteneur { width: 100%; max-width: calc(var(--kp-contenu) + 2 * var(--kp-marge)); margin-inline: auto; padding-inline: var(--kp-marge); }
.kp-conteneur--large { max-width: calc(var(--kp-contenu) + 2 * var(--kp-marge) + 96px); }
.kp-conteneur--etroit { max-width: calc(820px + 2 * var(--kp-marge)); }

/* Pile : enfants empilés, espacement réglable avec --pile */
.kp-pile { display: flex; flex-direction: column; gap: var(--pile, var(--kp-4)); }
.kp-pile > * { min-width: 0; }

/* Grappe : éléments en ligne qui passent à la ligne, espacement --grappe */
.kp-grappe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--grappe, var(--kp-4)); }
.kp-grappe--entre { justify-content: space-between; }
.kp-grappe--fin { align-items: flex-end; }
.kp-grappe--haut { align-items: flex-start; }
.kp-grappe--sans-retour { flex-wrap: nowrap; }

/* Grille : 2, 3 ou 4 colonnes qui se replient seules */
.kp-grille { display: grid; gap: var(--grille, var(--kp-gouttiere)); grid-template-columns: repeat(var(--colonnes, 1), minmax(0, 1fr)); }
.kp-grille--2 { --colonnes: 2; }
.kp-grille--3 { --colonnes: 3; }
.kp-grille--4 { --colonnes: 4; }
.kp-grille--auto { grid-template-columns: repeat(auto-fill, minmax(var(--min, 240px), 1fr)); }

/* Section : rythme vertical de page */
.kp-sections { display: flex; flex-direction: column; gap: var(--kp-section); }
.kp-debut { padding-top: var(--kp-6); }

/* Divers */
.kp-centre { text-align: center; }
.kp-plein { width: 100%; }
.kp-visuellement-cache { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.kp-lien-evitement { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--kp-marine); color: var(--kp-creme); padding: 10px 16px; border-radius: var(--kp-rayon-petit); font-weight: 600; }
.kp-lien-evitement:focus { top: 12px; }

@media (max-width: 1080px) {
  .kp-grille--4 { --colonnes: 2; }
}
@media (max-width: 900px) {
  .kp-grille--3 { --colonnes: 2; }
  .kp-seulement-large { display: none !important; }
}
@media (min-width: 901px) {
  .kp-seulement-mobile { display: none !important; }
}
@media (max-width: 700px) {
  .kp-grille--2, .kp-grille--3 { --colonnes: 1; }
}
@media (max-width: 600px) {
  .kp-grille--4 { --colonnes: 1; }
}

/* ---- components/icone.css ---- */
/* Icônes : trait 2 px, grille 24, couleur héritée. */
.kp-icone { display: inline-block; flex: none; width: 20px; height: 20px; vertical-align: middle; }
.kp-icone--sm { width: 16px; height: 16px; }
.kp-icone--lg { width: 24px; height: 24px; }

/* ---- components/logo.css ---- */
/* Logo : le mot-symbole « kidopass », en tracés détourés (brand/logo.svg,
   inliné par composants.mjs). Aucune dépendance aux polices : la chasse est
   toujours celle du brand book. La taille se règle par la hauteur. */
.kp-logo { display: inline-flex; align-items: center; --kp-logo-h: 30px; --kp-logo-encre: var(--kp-marine); }
.kp-logo__dessin { display: block; height: var(--kp-logo-h); width: auto; }
.kp-logo__encre { fill: var(--kp-logo-encre); }

/* Sur fond marine, photo ou aplat sombre. */
.kp-logo--creme { --kp-logo-encre: var(--kp-creme); }
/* Sur miel, abricot, corail : l'encre reste le marine. */
.kp-logo--sur-miel { --kp-logo-encre: var(--kp-marine); }

.kp-logo--sm { --kp-logo-h: 24px; }
.kp-logo--lg { --kp-logo-h: 44px; }
.kp-logo--xl { --kp-logo-h: clamp(56px, 10vw, 128px); }

/* Ticket « k » seul : ses couleurs sont passées en attributs (fond, lettre). */
.kp-logo-ticket { display: block; flex: none; height: 32px; width: auto; }

/* ---- components/bouton.css ---- */
/* Bouton : pilule. Un seul primaire (miel) visible par écran. */
.kp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: var(--kp-hauteur); padding: 0 28px;
  border: 1.5px solid transparent; border-radius: var(--kp-rayon-pilule);
  background: var(--kp-sable); color: var(--kp-marine);
  font-family: var(--kp-police-titre); font-weight: 800; font-size: 16px; line-height: 1; letter-spacing: -0.01em;
  white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none;
  transition: background-color var(--kp-duree) var(--kp-courbe), border-color var(--kp-duree) var(--kp-courbe), transform var(--kp-duree) var(--kp-courbe);
}
.kp-btn .kp-icone { width: 20px; height: 20px; transition: transform var(--kp-duree) var(--kp-courbe); }
.kp-btn:hover { background: var(--kp-ligne); }
.kp-btn:hover .kp-icone--fin { transform: translateX(3px); }
.kp-btn:active { transform: translateY(1px); }
.kp-btn--primaire { background: var(--kp-miel); color: var(--kp-marine); }
.kp-btn--primaire:hover { background: var(--kp-miel-fort); }
.kp-btn--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-btn--marine:hover { background: var(--kp-marine-80); }
.kp-btn--creme { background: var(--kp-creme); color: var(--kp-marine); }
.kp-btn--creme:hover { background: var(--kp-blanc); }
.kp-btn--contour { background: transparent; border-color: var(--kp-marine); }
.kp-btn--contour:hover { background: var(--kp-marine-10); }
.kp-btn--fantome { background: transparent; padding: 0 16px; }
.kp-btn--fantome:hover { background: var(--kp-marine-10); }
.kp-btn--sm { height: var(--kp-hauteur-sm); padding: 0 20px; font-size: 15px; }
.kp-btn--lg { height: var(--kp-hauteur-lg); padding: 0 34px; font-size: 18px; }
.kp-btn--rond { width: var(--kp-hauteur); padding: 0; }
.kp-btn--rond.kp-btn--sm { width: var(--kp-hauteur-sm); }
.kp-btn--rond.kp-btn--lg { width: var(--kp-hauteur-lg); }
.kp-btn--bloc { width: 100%; }
.kp-btn:disabled, .kp-btn[aria-disabled="true"] { background: var(--kp-sable); border-color: transparent; color: var(--kp-texte-3); cursor: not-allowed; transform: none; }
.kp-btn[aria-pressed="true"] { background: var(--kp-miel); border-color: var(--kp-miel); }

/* ---- components/lien.css ---- */
/* Lien d'action : Manrope, flèche qui avance au survol. */
.kp-lien { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kp-police-titre); font-weight: 800; font-size: var(--kp-taille-sm); color: var(--kp-marine); letter-spacing: -0.01em; }
.kp-lien .kp-icone { width: 18px; height: 18px; transition: transform var(--kp-duree) var(--kp-courbe); }
.kp-lien:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px; }
.kp-lien:hover .kp-icone { transform: translateX(3px); }
.kp-lien--creme { color: var(--kp-creme); }
.kp-lien--texte { font-family: var(--kp-police-texte); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* ---- components/champ.css ---- */
/* Champs de formulaire : libellé au-dessus, aide en dessous, focus miel. */
.kp-champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kp-champ__label { font-size: var(--kp-taille-sm); font-weight: 600; }
.kp-champ__aide { font-size: var(--kp-taille-xs); color: var(--kp-texte-2); }
.kp-champ__controle { position: relative; display: flex; align-items: center; }
.kp-champ__controle > .kp-icone { position: absolute; left: 16px; color: var(--kp-texte-2); pointer-events: none; }
.kp-input, .kp-select, .kp-textarea {
  width: 100%; height: var(--kp-hauteur); padding: 0 16px;
  border: 1.5px solid var(--kp-bordure-champ); border-radius: var(--kp-rayon-champ);
  background: var(--kp-surface); color: var(--kp-texte); font-size: 16px;
  transition: border-color var(--kp-duree) var(--kp-courbe);
}
.kp-champ__controle > .kp-icone + .kp-input { padding-left: 46px; }
.kp-textarea { height: auto; min-height: 120px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.kp-input::placeholder, .kp-textarea::placeholder { color: var(--kp-texte-3); }
.kp-input:hover, .kp-select:hover, .kp-textarea:hover { border-color: var(--kp-marine-60); }
.kp-input:focus, .kp-select:focus, .kp-textarea:focus { outline: 3px solid var(--kp-miel); outline-offset: 0; border-color: var(--kp-marine); }
.kp-select { appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23203B32' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.kp-champ--erreur .kp-input, .kp-champ--erreur .kp-select, .kp-champ--erreur .kp-textarea { border-color: var(--kp-erreur); }
.kp-champ--erreur .kp-champ__aide { color: var(--kp-erreur); font-weight: 600; }
.kp-input:disabled, .kp-select:disabled, .kp-textarea:disabled { background: var(--kp-sable); color: var(--kp-texte-3); cursor: not-allowed; }

/* ---- components/liste.css ---- */
/* Liste déroulante maison : remplace le style natif du <select>.
   Le <select> reste dans le HTML (source de vérité, envoi du formulaire,
   fonctionne sans JS) ; kidopass.js construit l'habillage à côté.
   Variantes : rien (champ encadré) · --nu (posée dans une cellule de recherche). */

.kp-liste { position: relative; display: block; min-width: 0; }

/* Le select natif reste focusable tant que JS n'a pas pris la main. */
.kp-liste__natif { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* --- Déclencheur -------------------------------------------------------- */
.kp-liste__declencheur {
  display: flex; align-items: center; gap: 10px; width: 100%;
  height: var(--kp-hauteur); padding: 0 14px 0 16px;
  border: 1.5px solid var(--kp-bordure-champ); border-radius: var(--kp-rayon-champ);
  background: var(--kp-surface); color: var(--kp-texte);
  font-family: var(--kp-police-texte); font-size: 16px; text-align: left; cursor: pointer;
  transition: border-color var(--kp-duree) var(--kp-courbe);
}
.kp-liste__declencheur:hover { border-color: var(--kp-marine-60); }
.kp-liste__declencheur:focus-visible { outline: 3px solid var(--kp-miel); outline-offset: 0; border-color: var(--kp-marine); }
.kp-liste__valeur { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.kp-liste__valeur--vide { color: var(--kp-texte-3); }
.kp-liste__fleche { flex: none; width: 18px; height: 18px; color: var(--kp-texte); transition: transform var(--kp-duree) var(--kp-courbe); }
.kp-liste[data-ouvert="true"] .kp-liste__fleche { transform: rotate(180deg); }
.kp-liste__compte {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--kp-rayon-pilule);
  background: var(--kp-miel); color: var(--kp-marine);
  font-size: 12px; font-weight: 700; line-height: 1;
}
.kp-liste__compte[hidden] { display: none; }
.kp-champ--erreur .kp-liste__declencheur { border-color: var(--kp-erreur); }
.kp-liste--desactive .kp-liste__declencheur { background: var(--kp-sable); color: var(--kp-texte-3); cursor: not-allowed; }

/* --- Panneau ------------------------------------------------------------ */
.kp-liste__panneau {
  position: absolute; z-index: var(--kp-z-menu); top: calc(100% + 6px); left: 0; min-width: 100%; width: max-content; max-width: min(360px, 90vw);
  padding: 6px; border-radius: var(--kp-rayon-bloc);
  background: var(--kp-surface); box-shadow: var(--kp-ombre), 0 0 0 1.5px var(--kp-bordure);
  transform-origin: top center;
  animation: kp-liste-entree var(--kp-duree) var(--kp-courbe);
}
.kp-liste__panneau[hidden] { display: none; }
/* Dans le top layer, on neutralise les styles par défaut du popover ; le
   placement exact est posé en style inline par le script. */
.kp-liste__panneau:popover-open { display: block; height: auto; max-width: min(360px, 90vw); max-height: none; border: 0; margin: 0; overflow: visible; color: inherit; }
.kp-liste__panneau:not(:popover-open) { display: none; }
.kp-liste__panneau[popover] { inset: auto; }
.kp-liste--haut .kp-liste__panneau { top: auto; bottom: calc(100% + 6px); transform-origin: bottom center; }
.kp-liste--fin .kp-liste__panneau { left: auto; right: 0; }
@keyframes kp-liste-entree { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .kp-liste__panneau { animation: none; } .kp-liste__fleche { transition: none; } }

.kp-liste__options { max-height: min(320px, 50vh); overflow-y: auto; list-style: none; margin: 0; padding: 0; overscroll-behavior: contain; }
.kp-liste__options:focus { outline: none; }

.kp-liste__option {
  display: flex; align-items: center; gap: 10px;
  min-height: 42px; padding: 8px 12px; border-radius: var(--kp-rayon-petit);
  font-size: var(--kp-taille-sm); line-height: 1.3; color: var(--kp-texte); cursor: pointer;
}
.kp-liste__option:hover { background: var(--kp-sable); }
.kp-liste__option[data-actif="true"] { background: var(--kp-sable); box-shadow: inset 0 0 0 2px var(--kp-marine); }
.kp-liste__option[aria-selected="true"] { font-weight: 600; }
.kp-liste__option[aria-disabled="true"] { color: var(--kp-texte-3); cursor: not-allowed; }
.kp-liste__option[aria-disabled="true"]:hover { background: transparent; }

/* Coche : puce ronde en mono-sélection, case carrée en multi-sélection. */
.kp-liste__marque {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border: 1.5px solid var(--kp-bordure-champ); border-radius: var(--kp-rayon-pilule);
  background: var(--kp-surface); color: transparent;
}
.kp-liste--multi .kp-liste__marque { border-radius: 6px; }
.kp-liste__marque .kp-icone { width: 13px; height: 13px; stroke-width: 3; }
.kp-liste__option[aria-selected="true"] .kp-liste__marque { border-color: var(--kp-marine); background: var(--kp-marine); color: var(--kp-miel); }
.kp-liste__texte { flex: 1; min-width: 0; }

/* Pied du panneau : tout effacer (multi-sélection). */
.kp-liste__pied { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 6px; padding: 8px 12px 4px; border-top: 1.5px solid var(--kp-bordure); }
.kp-liste__effacer { border: 0; background: none; padding: 0; color: var(--kp-texte-2); font-family: var(--kp-police-texte); font-size: var(--kp-taille-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.kp-liste__effacer:hover { color: var(--kp-texte); }

/* --- Variante « nue » : dans une cellule de recherche -------------------- */
.kp-liste--nu .kp-liste__declencheur {
  height: auto; padding: 2px 0; border: 0; background: transparent;
  font-family: var(--kp-police-titre); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--kp-marine);
}
.kp-liste--nu .kp-liste__declencheur:hover { border: 0; }
.kp-liste--nu .kp-liste__declencheur:focus-visible { outline: 2px solid var(--kp-marine); outline-offset: 4px; border-radius: var(--kp-rayon-petit); }
.kp-liste--nu .kp-liste__fleche { width: 16px; height: 16px; stroke-width: 2.4; }
.kp-liste--nu .kp-liste__panneau { left: -12px; min-width: calc(100% + 24px); }

@media (max-width: 600px) {
  .kp-liste__panneau { position: fixed; z-index: calc(var(--kp-z-menu) + 1); top: auto; bottom: 0; left: 0; right: 0; width: auto; max-width: none; padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); border-radius: var(--kp-rayon-carte) var(--kp-rayon-carte) 0 0; box-shadow: var(--kp-ombre-haute), 0 0 0 1.5px var(--kp-bordure); animation: kp-liste-feuille var(--kp-duree) var(--kp-courbe); }
  .kp-liste--haut .kp-liste__panneau, .kp-liste--fin .kp-liste__panneau { top: auto; bottom: 0; left: 0; right: 0; }
  .kp-liste__options { max-height: 54vh; }
  .kp-liste__option { min-height: 48px; font-size: 16px; }
  @keyframes kp-liste-feuille { from { transform: translateY(100%); } }
}

/* ---- components/choix.css ---- */
/* Case à cocher, bouton radio, interrupteur : vrais champs natifs, habillés. */
.kp-case { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 16px; line-height: 1.35; min-height: 32px; }
.kp-case__input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; cursor: pointer; }
.kp-case__boite { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid var(--kp-marine-40); border-radius: 7px; background: var(--kp-surface); transition: background-color var(--kp-duree), border-color var(--kp-duree); }
.kp-case__boite .kp-icone { width: 14px; height: 14px; opacity: 0; stroke-width: 3; }
.kp-case__input:checked + .kp-case__boite { background: var(--kp-miel); border-color: var(--kp-marine); }
.kp-case__input:checked + .kp-case__boite .kp-icone { opacity: 1; }
.kp-case__input:focus-visible + .kp-case__boite { outline: 3px solid var(--kp-focus); outline-offset: 2px; }
.kp-case__input:disabled + .kp-case__boite { background: var(--kp-sable); border-color: var(--kp-ligne); }
.kp-case--radio .kp-case__boite { border-radius: 50%; }
.kp-case--radio .kp-case__input:checked + .kp-case__boite { background: var(--kp-marine); box-shadow: inset 0 0 0 5px var(--kp-surface); }

.kp-interrupteur { position: relative; display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-size: 16px; line-height: 1.35; }
.kp-interrupteur__input { position: absolute; opacity: 0; width: 50px; height: 30px; margin: 0; cursor: pointer; }
.kp-interrupteur__piste { position: relative; width: 50px; height: 30px; flex: none; border-radius: var(--kp-rayon-pilule); background: var(--kp-ligne); transition: background-color var(--kp-duree); }
.kp-interrupteur__piste::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--kp-surface); box-shadow: 0 1px 3px rgba(30, 42, 71, 0.25); transition: transform var(--kp-duree) var(--kp-courbe), background-color var(--kp-duree); }
.kp-interrupteur__input:checked + .kp-interrupteur__piste { background: var(--kp-marine); }
.kp-interrupteur__input:checked + .kp-interrupteur__piste::after { transform: translateX(20px); background: var(--kp-miel); }
.kp-interrupteur__input:focus-visible + .kp-interrupteur__piste { outline: 3px solid var(--kp-focus); outline-offset: 2px; }

.kp-groupe { display: flex; flex-direction: column; gap: 10px; }
.kp-groupe__legende { font-size: var(--kp-taille-sm); font-weight: 600; margin-bottom: 2px; }

/* ---- components/chip.css ---- */
/* Chip : filtre rapide. Bouton bascule (aria-pressed). */
.kp-chip { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; flex: none; border: 1.5px solid var(--kp-marine); border-radius: var(--kp-rayon-pilule); background: transparent; color: var(--kp-marine); font-family: var(--kp-police-texte); font-size: 14px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background-color var(--kp-duree), color var(--kp-duree); }
.kp-chip .kp-icone { width: 16px; height: 16px; }
.kp-chip:hover { background: var(--kp-marine-10); }
.kp-chip[aria-pressed="true"], .kp-chip--actif { background: var(--kp-marine); color: var(--kp-creme); }
.kp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.kp-chips--defilant { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; margin-inline: calc(var(--kp-marge) * -1); padding-inline: var(--kp-marge); scroll-padding-inline: var(--kp-marge); }
.kp-chips--defilant::-webkit-scrollbar { display: none; }

/* ---- components/segment.css ---- */
/* Contrôle segmenté : choix exclusif (tri, intérieur/extérieur). Radios natifs. */
.kp-segment { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--kp-rayon-pilule); background: var(--kp-sable); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.kp-segment::-webkit-scrollbar { display: none; }
.kp-segment__option { position: relative; flex: 1 0 auto; }
.kp-segment__input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.kp-segment__libelle { display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 18px; border-radius: var(--kp-rayon-pilule); font-size: 14px; font-weight: 600; color: var(--kp-texte-2); white-space: nowrap; transition: background-color var(--kp-duree), color var(--kp-duree); }
.kp-segment__input:hover + .kp-segment__libelle { color: var(--kp-marine); }
.kp-segment__input:checked + .kp-segment__libelle { background: var(--kp-surface); color: var(--kp-marine); box-shadow: 0 1px 3px rgba(30, 42, 71, 0.12); }
.kp-segment__input:focus-visible + .kp-segment__libelle { outline: 3px solid var(--kp-focus); outline-offset: -3px; }
/* En bloc, les segments se partagent la largeur au lieu de défiler : dans une
   colonne de filtres, un libellé coupé est un libellé perdu. */
.kp-segment--bloc { display: flex; width: 100%; overflow-x: visible; }
.kp-segment--bloc .kp-segment__option { flex: 1 1 0; min-width: 0; }
.kp-segment--bloc .kp-segment__libelle { padding: 0 8px; font-size: 13px; }

/* ---- components/onglets.css ---- */
/* Onglets : même dessin que le segment, avec panneaux (role="tablist"). */
.kp-onglets__liste { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--kp-rayon-pilule); background: var(--kp-sable); max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.kp-onglets__liste::-webkit-scrollbar { display: none; }
.kp-onglets__onglet { flex: 1 0 auto; height: 40px; padding: 0 18px; border: 0; border-radius: var(--kp-rayon-pilule); background: transparent; font-size: 14px; font-weight: 600; color: var(--kp-texte-2); cursor: pointer; white-space: nowrap; }
.kp-onglets__onglet:hover { color: var(--kp-marine); }
.kp-onglets__onglet[aria-selected="true"] { background: var(--kp-surface); color: var(--kp-marine); box-shadow: 0 1px 3px rgba(30, 42, 71, 0.12); }
.kp-onglets__onglet:focus-visible { outline: 3px solid var(--kp-focus); outline-offset: -3px; }
.kp-onglets__compte { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--kp-ligne); font-size: 12px; }
.kp-onglets__onglet[aria-selected="true"] .kp-onglets__compte { background: var(--kp-miel); }
.kp-onglets__panneau { padding-top: var(--kp-6); }
.kp-onglets__panneau[hidden] { display: none; }
.kp-onglets--bloc .kp-onglets__liste { display: flex; width: 100%; }

/* ---- components/ticket.css ---- */
/* Badge ticket : deux encoches. Réservé à l'avantage (réduction, offert). */
.kp-ticket {
  --encoche: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: none;
  height: 36px; padding: 0 18px;
  border-radius: 8px; background: var(--kp-deal); color: var(--kp-marine);
  font-family: var(--kp-police-titre); font-weight: 800; font-size: 15px; letter-spacing: -0.01em; line-height: 1; white-space: nowrap;
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) right / 51% 100% no-repeat;
}
.kp-ticket--miel { background: var(--kp-miel); }
.kp-ticket--abricot { background: var(--kp-abricot); }
.kp-ticket--ciel { background: var(--kp-ciel); }
.kp-ticket--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-ticket--creme { background: var(--kp-creme); }
.kp-ticket--sm { --encoche: 5px; height: 28px; padding: 0 13px; font-size: 13px; border-radius: 6px; }
.kp-ticket--lg { --encoche: 8px; height: 46px; padding: 0 24px; font-size: 20px; border-radius: 10px; }

/* ---- components/pass.css ---- */
/* Le pass : carte ticket à deux encoches. Miel (offre) ou marine (membre, avec code). */
.kp-pass {
  --encoche: 16px;
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px;
  width: 100%; max-width: 380px; aspect-ratio: 1.6; padding: 24px 28px;
  border-radius: 22px; background: var(--kp-miel); color: var(--kp-marine);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) right / 51% 100% no-repeat;
}
.kp-pass--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-pass--abricot { background: var(--kp-abricot); }
.kp-pass__haut, .kp-pass__bas { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.kp-pass__bas { align-items: flex-end; }
.kp-pass .kp-logo { --kp-logo-h: 26px; }
.kp-pass__accroche { font-family: var(--kp-police-titre); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: -0.02em; }
.kp-pass__label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; }
.kp-pass__valeur { font-family: var(--kp-police-titre); font-weight: 800; font-size: 16px; }
.kp-pass__infos { display: flex; flex-direction: column; gap: 8px; }
.kp-qr { width: 68px; height: 68px; flex: none; padding: 7px; border-radius: 10px; background: var(--kp-creme); color: var(--kp-marine); }
.kp-qr svg { width: 100%; height: 100%; }

/* ---- components/telephone.css ---- */
/* Cadre de téléphone : sert à montrer un écran de l'app (le pass, un menu).
   Le pass étant virtuel, c'est la seule façon honnête de le matérialiser —
   une carte imprimée promettrait un objet qui n'arrivera jamais. */
.kp-telephone {
  --largeur: 300px;
  position: relative; flex: none;
  width: var(--largeur); aspect-ratio: 9 / 17.6;
  padding: 10px; border-radius: calc(var(--largeur) * 0.13);
  background: var(--kp-marine);
  box-shadow: 0 24px 60px rgba(30, 42, 71, 0.28), inset 0 0 0 1.5px rgba(250, 245, 236, 0.14);
}
.kp-telephone__ecran { position: relative; display: flex; flex-direction: column; gap: 1.1em; height: 100%; padding: 2em 1.1em 1.4em; border-radius: calc(var(--largeur) * 0.1); background: var(--kp-creme); color: var(--kp-texte); overflow: hidden; font-size: calc(var(--largeur) / 21); }
/* L'îlot : un détail, mais sans lui le cadre ne se lit pas comme un téléphone. */
.kp-telephone__ilot { position: absolute; z-index: 2; left: 50%; top: 3.5%; width: 30%; height: 4.5%; max-height: 15px; border-radius: 999px; background: var(--kp-marine); transform: translateX(-50%); }
.kp-telephone__barre { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.kp-telephone__barre .kp-logo { --kp-logo-h: 1.3em; }
.kp-telephone__titre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 0.92em; color: var(--kp-texte-2); }
.kp-telephone__contenu { display: flex; flex-direction: column; gap: 0.85em; min-width: 0; }
.kp-telephone__note { margin-top: auto; font-size: 0.76em; line-height: 1.35; text-align: center; color: var(--kp-texte-2); }
.kp-telephone .kp-pass { max-width: none; }
/* Dans un écran étroit, un nom de titulaire ne doit pas passer à la ligne. */
.kp-telephone .kp-pass { padding: 1.1em 1.25em; gap: 0.9em; border-radius: 1.1em; --encoche: 0.75em; }
.kp-telephone .kp-pass .kp-logo { --kp-logo-h: 1.15em; }
.kp-telephone .kp-pass__valeur { font-size: 1.05em; white-space: nowrap; }
.kp-telephone .kp-pass .kp-etat { height: 1.7em; padding: 0 0.7em; font-size: 0.8em; }
.kp-telephone .kp-pass__label { font-size: 0.68em; }
.kp-telephone .kp-qr { width: 3.9em; height: 3.9em; padding: 0.35em; border-radius: 0.5em; }

.kp-telephone__sortie { display: flex; flex-direction: column; gap: 0.55em; }
.kp-telephone__offre { display: flex; align-items: center; gap: 0.6em; min-width: 0; padding: 0.55em; border-radius: 0.85em; background: var(--kp-surface); box-shadow: 0 0 0 1.5px var(--kp-bordure); }
.kp-telephone__offre > div { min-width: 0; }
.kp-telephone__vignette { width: 2.4em; flex: none; border-radius: 0.55em; }
.kp-telephone__offre-titre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 0.82em; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-telephone__offre-meta { font-size: 0.72em; color: var(--kp-texte-2); white-space: nowrap; }
.kp-telephone__offre .kp-ticket { margin-left: auto; height: 1.6em; padding: 0 0.6em; font-size: 0.78em; --encoche: 0.3em; }
.kp-telephone__ligne { display: flex; align-items: center; gap: 0.5em; font-size: 0.82em; font-weight: 600; color: var(--kp-texte); }
.kp-telephone__ligne .kp-icone { flex: none; width: 1.15em; height: 1.15em; padding: 0.15em; border-radius: 999px; background: var(--kp-miel); color: var(--kp-marine); stroke-width: 3; }

/* Écrans enchaînés : le téléphone montre le fonctionnement (choisir, montrer,
   profiter), pas une maquette figée. Trois vues en fondu, en boucle. */
.kp-telephone__ecran--anime { padding: 0; }
.kp-telephone__vue { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.1em; padding: 2em 1.1em 2.4em; opacity: 0; transform: translateY(6px); animation: kp-telephone-vue calc(var(--n) * 4s) infinite; animation-delay: calc(var(--i) * 4s); }
@keyframes kp-telephone-vue { 0% { opacity: 0; transform: translateY(6px); } 4% { opacity: 1; transform: none; } 30% { opacity: 1; transform: none; } 34% { opacity: 0; transform: translateY(-6px); } 100% { opacity: 0; transform: translateY(6px); } }
.kp-telephone__points { position: absolute; left: 0; right: 0; bottom: 1em; display: flex; justify-content: center; gap: 0.4em; }
.kp-telephone__points span { width: 0.5em; height: 0.5em; border-radius: 999px; background: var(--kp-ligne); animation: kp-telephone-point calc(var(--n) * 4s) infinite; animation-delay: calc(var(--i) * 4s); }
@keyframes kp-telephone-point { 0% { background: var(--kp-ligne); } 4% { background: var(--kp-marine); } 30% { background: var(--kp-marine); } 34% { background: var(--kp-ligne); } 100% { background: var(--kp-ligne); } }
.kp-telephone__etape { display: inline-flex; align-items: center; gap: 0.5em; font-family: var(--kp-police-titre); font-weight: 800; font-size: 0.86em; color: var(--kp-marine); }
.kp-telephone__etape b { display: inline-flex; align-items: center; justify-content: center; width: 1.7em; height: 1.7em; border-radius: 999px; background: var(--kp-miel); font-size: 0.9em; }
.kp-telephone__chiffre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 2.3em; line-height: 1; letter-spacing: -0.04em; color: var(--kp-marine); }
.kp-telephone__prix { display: flex; justify-content: space-between; gap: 0.6em; padding: 0.55em 0.7em; border-radius: 0.7em; background: var(--kp-surface); box-shadow: 0 0 0 1.5px var(--kp-bordure); font-size: 0.8em; }
.kp-telephone__prix--miel { background: var(--kp-miel); box-shadow: none; font-weight: 700; }
.kp-telephone__prix b { font-family: var(--kp-police-titre); font-weight: 800; }
.kp-telephone__bouton { display: flex; align-items: center; justify-content: center; height: 2.6em; border-radius: 999px; background: var(--kp-miel); font-family: var(--kp-police-titre); font-weight: 800; font-size: 0.85em; color: var(--kp-marine); }
.kp-telephone__qr { display: flex; justify-content: center; padding: 0.6em; }
.kp-telephone__qr .kp-qr { width: 7em; height: 7em; padding: 0.6em; border-radius: 0.8em; background: var(--kp-surface); box-shadow: 0 0 0 1.5px var(--kp-bordure); color: var(--kp-marine); }
@media (prefers-reduced-motion: reduce) {
  .kp-telephone__vue, .kp-telephone__points span { animation: none; }
  .kp-telephone__vue { opacity: 0; }
  .kp-telephone__vue:first-child { opacity: 1; transform: none; }
  .kp-telephone__points span:first-child { background: var(--kp-marine); }
}

/* ---- components/etat.css ---- */
/* État : information sans encoche (disponibilité, réservation, déjà utilisé). */
.kp-etat { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 28px; padding: 0 12px; border-radius: var(--kp-rayon-pilule); background: var(--kp-sable); color: var(--kp-marine); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; }
.kp-etat .kp-icone { width: 14px; height: 14px; }
.kp-etat--miel { background: var(--kp-miel); }
.kp-etat--ciel { background: var(--kp-ciel); }
.kp-etat--abricot { background: var(--kp-abricot); }
.kp-etat--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-etat--contour { background: transparent; box-shadow: inset 0 0 0 1.5px var(--kp-ligne); }

/* ---- components/sticker.css ---- */
/* Sticker : ticket manuscrit posé de biais sur une photo. Une accroche par visuel. */
.kp-sticker {
  --encoche: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 10px 28px 14px; border-radius: 12px;
  background: var(--kp-deal); color: var(--kp-marine);
  font-family: var(--kp-police-main); font-weight: 700; font-size: 34px; line-height: 1; white-space: nowrap;
  transform: rotate(-7deg);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) right / 51% 100% no-repeat;
}
.kp-sticker--miel { background: var(--kp-miel); }
.kp-sticker--sm { --encoche: 6px; font-size: 24px; padding: 7px 20px 10px; border-radius: 9px; }

/* Étiquette de marque : ticket miel avec logo et signature, posé sur photo. */
.kp-etiquette {
  --encoche: 10px;
  display: inline-flex; flex-direction: column; gap: 4px; padding: 14px 30px 16px; border-radius: 14px;
  background: var(--kp-miel); color: var(--kp-marine); transform: rotate(-5deg);
  -webkit-mask: radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px));
          mask: radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px));
}
.kp-etiquette .kp-logo { font-size: 30px; }
.kp-etiquette__signature { font-size: 13px; font-weight: 600; padding-left: 2px; }

/* ---- components/media.css ---- */
/* Média : photo recadrée, ou emplacement photo si l'image manque. */
.kp-media { position: relative; overflow: hidden; background: var(--kp-sable); border-radius: var(--kp-rayon-carte); isolation: isolate; }
.kp-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kp-media--16x10 { aspect-ratio: 16 / 10; }
.kp-media--4x3 { aspect-ratio: 4 / 3; }
.kp-media--carre { aspect-ratio: 1; }
.kp-media--portrait { aspect-ratio: 3 / 4; }
.kp-media--plat { border-radius: 0; }
.kp-media__vide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--kp-marine); background: var(--ton, var(--kp-ciel-clair)); }
.kp-media__vide .kp-icone { width: 40px; height: 40px; opacity: 0.55; }
.kp-media__vide span { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--kp-texte-2); }
.kp-media__coin { position: absolute; z-index: 2; }
.kp-media__coin--haut-gauche { left: 16px; top: 16px; }
.kp-media__coin--haut-droite { right: 16px; top: 16px; }
.kp-media__coin--bas-gauche { left: 16px; bottom: 16px; }
.kp-media__coin--bas-droite { right: 16px; bottom: 16px; }
.kp-favori { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--kp-surface); color: var(--kp-marine); cursor: pointer; box-shadow: 0 2px 8px rgba(30, 42, 71, 0.12); transition: background-color var(--kp-duree), transform var(--kp-duree); }
.kp-favori .kp-icone { width: 20px; height: 20px; }
.kp-favori:hover { transform: scale(1.06); }
.kp-favori[aria-pressed="true"] { background: var(--kp-miel); }
.kp-favori[aria-pressed="true"] .kp-icone { fill: currentColor; }

/* ---- components/carte.css ---- */
/* Carte d'offre : photo, avantage, titre, lieu · âge · type, action. Contours simples. */
.kp-carte { position: relative; display: flex; flex-direction: column; min-width: 0; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); overflow: hidden; transition: box-shadow var(--kp-duree) var(--kp-courbe), transform var(--kp-duree) var(--kp-courbe); }
.kp-carte:hover { box-shadow: var(--kp-ombre); }
.kp-carte > .kp-media { border-radius: 0; }
.kp-carte__corps { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 20px 22px 18px; }
.kp-carte__titre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 21px; line-height: 1.18; letter-spacing: -0.025em; }
.kp-carte__titre a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.kp-carte__titre a:focus-visible { outline: none; }
.kp-carte:has(.kp-carte__titre a:focus-visible) { outline: 3px solid var(--kp-focus); outline-offset: 3px; }
.kp-carte__corps > .kp-etat, .kp-carte__corps > .kp-ticket, .kp-carte__corps > .kp-chip { align-self: flex-start; }
.kp-carte__pied { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 14px; border-top: 1.5px solid var(--kp-bordure); }
.kp-carte__prix { display: flex; align-items: baseline; gap: 8px; }
.kp-carte__prix .kp-prix { font-size: 19px; }
.kp-carte .kp-favori, .kp-carte .kp-lien, .kp-carte .kp-btn { position: relative; z-index: 2; }

/* Méta : lieu · âge · type */
.kp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; font-size: var(--kp-taille-sm); color: var(--kp-texte-2); }
.kp-meta > * + *::before { content: "·"; margin-right: 10px; color: var(--kp-texte-3); }

/* Variante ligne : image à gauche, pour les listes courtes et le mobile */
.kp-carte--ligne { flex-direction: row; }
.kp-carte--ligne > .kp-media { width: 132px; flex: none; aspect-ratio: auto; }
.kp-carte--ligne .kp-carte__corps { padding: 16px 18px; gap: 6px; }
.kp-carte--ligne .kp-carte__titre { font-size: 18px; }
.kp-carte--ligne .kp-media__coin--haut-gauche { left: 10px; top: 10px; }
.kp-carte--ligne .kp-media__vide span { display: none; }
.kp-carte--ligne .kp-media__vide { padding-top: 28px; }

/* Variante avantage : espace membre */
.kp-carte--utilise { background: var(--kp-sable); }
.kp-carte--utilise .kp-media, .kp-carte--utilise .kp-carte__titre { opacity: 0.6; }

@media (max-width: 600px) {
  .kp-carte--ligne > .kp-media { width: 104px; }
  .kp-carte__corps { padding: 18px 18px 16px; }
}

/* ---- components/prix.css ---- */
/* Bloc prix : le tarif, le tarif de référence, l'économie. Toujours avant l'action. */
.kp-bloc-prix { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; border-radius: var(--kp-rayon-bloc); background: var(--kp-miel); color: var(--kp-marine); }
.kp-bloc-prix__label { font-size: var(--kp-taille-sm); font-weight: 600; }
.kp-bloc-prix__ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.kp-bloc-prix__montant { font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(38px, 4vw, 48px); line-height: 1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.kp-bloc-prix__reference { font-size: 18px; color: var(--kp-marine); opacity: 0.7; }
.kp-bloc-prix__economie { font-size: var(--kp-taille-sm); font-weight: 600; }

/* ---- components/conditions.css ---- */
/* Conditions : « À savoir avant de partir ». Coches miel, lien vers le détail. */
.kp-conditions { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: var(--kp-rayon-bloc); background: var(--kp-surface); }
.kp-conditions--creme { background: var(--kp-creme); }
.kp-conditions__titre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.kp-conditions__liste { display: flex; flex-direction: column; gap: 10px; list-style: none; padding: 0; }
.kp-conditions__item { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.kp-coche { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--kp-miel); color: var(--kp-marine); }
.kp-coche .kp-icone { width: 13px; height: 13px; stroke-width: 3; }
.kp-coche--creme { background: var(--kp-creme); }
.kp-conditions__lien { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 14px; border-top: 1.5px solid var(--kp-bordure); font-size: 15px; font-weight: 600; }
.kp-conditions__lien span { display: inline-flex; align-items: center; gap: 10px; }
.kp-conditions__lien:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Liste de définitions : Qui ? Quoi ? Quand ? Comment ? · horaires */
.kp-definitions { display: flex; flex-direction: column; }
.kp-definitions__ligne { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 20px; padding: 16px 0; border-top: 1.5px solid var(--kp-bordure); }
.kp-definitions__ligne:last-child { border-bottom: 1.5px solid var(--kp-bordure); }
.kp-definitions__terme { font-family: var(--kp-police-titre); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.kp-definitions--compact .kp-definitions__ligne { grid-template-columns: minmax(0, 1fr) auto; padding: 10px 0; font-size: var(--kp-taille-sm); }
.kp-definitions--compact .kp-definitions__ligne:last-child { border-bottom: 0; }
.kp-definitions--compact .kp-definitions__terme { font-family: var(--kp-police-texte); font-weight: 400; font-size: var(--kp-taille-sm); }
.kp-definitions--compact dd { font-weight: 600; text-align: right; }
@media (max-width: 600px) {
  .kp-definitions:not(.kp-definitions--compact) .kp-definitions__ligne { grid-template-columns: 1fr; gap: 4px; }
}

/* ---- components/blocs.css ---- */
/* Blocs de contenu : encart, carte info, plan, tarif. */
.kp-encart { display: flex; flex-direction: column; gap: 14px; padding: clamp(24px, 3vw, 36px); border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-encart--sable { background: var(--kp-sable); }
.kp-encart--miel { background: var(--kp-miel); }
.kp-encart--ciel { background: var(--kp-ciel); }
.kp-encart--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-encart__numero { font-family: var(--kp-police-titre); font-weight: 800; font-size: 40px; line-height: 1; letter-spacing: -0.04em; }


.kp-tarif { position: relative; display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 3.4vw, 40px); border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-tarif--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-tarif--marine .kp-muted { color: rgba(250, 245, 236, 0.75); }
.kp-tarif__badge { position: absolute; right: 24px; top: 24px; }
.kp-tarif__prix { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kp-tarif__montant { font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(40px, 4.4vw, 56px); line-height: 1; letter-spacing: -0.04em; }
.kp-tarif__filet { border: 0; border-top: 1.5px solid var(--kp-bordure); margin: 0; }
.kp-tarif--marine .kp-tarif__filet { border-color: rgba(250, 245, 236, 0.18); }
.kp-tarif > .kp-btn { margin-top: auto; }

.kp-filet { border: 0; border-top: 1.5px solid var(--kp-bordure); margin: 0; }
.kp-avatar { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--kp-ciel); color: var(--kp-marine); font-size: 14px; font-weight: 700; }
.kp-avatar--sm { width: 32px; height: 32px; font-size: 12px; }

/* ---- components/bande.css ---- */
/* Bande : le fonctionnement en trois étapes. Titre et action sur la première
   ligne, les trois étapes sur toute la largeur en dessous — sinon les colonnes
   se retrouvent écrasées par le bouton et les titres cassent à chaque mot. */
.kp-bande { display: flex; flex-direction: column; gap: clamp(28px, 3.5vw, 44px); padding: clamp(28px, 4vw, 48px) clamp(24px, 5vw, 64px); border-radius: var(--kp-rayon-carte); background: var(--kp-fort); color: var(--kp-sur-fort); }
.kp-bande__haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; }
.kp-bande__titre { flex: 1 1 min(100%, 520px); max-width: 16ch; font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(30px, 4vw, 56px); line-height: 1.02; letter-spacing: -0.04em; }
.kp-bande__haut .kp-btn { flex: none; }

.kp-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; list-style: none; padding: 0; }
.kp-etape { display: flex; align-items: baseline; gap: 16px; padding: 0 clamp(20px, 2.5vw, 36px); border-left: 1.5px solid var(--kp-filet-fort); }
.kp-etape:first-child { padding-left: 0; border-left: 0; }
.kp-etape:last-child { padding-right: 0; }
/* Le numéro est décoratif : il peut être voilé. Les textes, eux, gardent
   l'encre pleine — le marine à 78 % ne passe pas les 4,5:1 sur la corail. */
.kp-etape__numero { flex: none; font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(34px, 3vw, 44px); line-height: 0.9; letter-spacing: -0.04em; color: var(--kp-sur-fort-doux); }
.kp-etape__titre { font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.25; letter-spacing: -0.015em; text-wrap: balance; }
.kp-etape__texte { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--kp-sur-fort); }

@media (max-width: 900px) {
  .kp-bande__haut { flex-direction: column; align-items: flex-start; }
  .kp-bande__titre { max-width: none; }
  .kp-etapes { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .kp-etape { padding: 0 0 22px; border-left: 0; border-bottom: 1.5px solid var(--kp-filet-fort); }
  .kp-etape:last-child { padding-bottom: 0; border-bottom: 0; }
}

/* ---- components/faq.css ---- */
/* FAQ : accordéon natif (<details>). Accessible au clavier sans JavaScript. */
.kp-faq { display: flex; flex-direction: column; border-top: 1.5px solid var(--kp-bordure); }
.kp-faq__item { border-bottom: 1.5px solid var(--kp-bordure); }
.kp-faq__question { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; font-family: var(--kp-police-titre); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.kp-faq__question::-webkit-details-marker { display: none; }
.kp-faq__question:hover { text-decoration: underline; text-underline-offset: 5px; }
.kp-faq__signe { position: relative; width: 22px; height: 22px; flex: none; }
.kp-faq__signe::before, .kp-faq__signe::after { content: ""; position: absolute; left: 3px; right: 3px; top: 10px; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--kp-duree) var(--kp-courbe); }
.kp-faq__signe::after { transform: rotate(90deg); }
.kp-faq__item[open] .kp-faq__signe::after { transform: rotate(0deg); }
.kp-faq__reponse { padding: 0 40px 22px 0; color: var(--kp-texte-2); max-width: 70ch; }

/* ---- components/recherche.css ---- */
/* Recherche : Où ? Quel âge ? Une envie ? Trois vrais <select>, un bouton. */
.kp-recherche { display: flex; flex-direction: column; gap: 12px; padding: 12px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); box-shadow: var(--kp-ombre); }
.kp-recherche__ligne { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: center; gap: 6px; }
/* Le séparateur est dessiné en ::after au milieu de la gouttière : il ne colle
   donc jamais au fond de survol, et disparaît autour de la cellule active. */
.kp-recherche__cellule { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 18px; border-radius: var(--kp-rayon-champ); }
.kp-recherche__cellule::after { content: ""; position: absolute; right: -3px; top: 10px; bottom: 10px; width: 1.5px; background: var(--kp-bordure); transition: opacity var(--kp-duree); }
.kp-recherche__cellule:nth-child(3)::after { content: none; }
.kp-recherche__cellule:hover::after, .kp-recherche__cellule:focus-within::after,
.kp-recherche__cellule:has(+ .kp-recherche__cellule:hover)::after,
.kp-recherche__cellule:has(+ .kp-recherche__cellule:focus-within)::after { opacity: 0; }
.kp-recherche__cellule:hover { background: var(--kp-creme); }
.kp-recherche__cellule:focus-within { background: var(--kp-creme); box-shadow: inset 0 0 0 2px var(--kp-marine); }
.kp-recherche__cellule:has(.kp-liste[data-ouvert="true"]) { background: var(--kp-creme); box-shadow: inset 0 0 0 2px var(--kp-marine); }
.kp-recherche__cellule > .kp-icone { width: 22px; height: 22px; }
.kp-recherche__champ { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.kp-recherche__label { font-size: 13px; color: var(--kp-texte-2); }
.kp-recherche__select { appearance: none; width: 100%; padding: 2px 28px 2px 0; border: 0; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23203B32' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right center; font-family: var(--kp-police-titre); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--kp-marine); cursor: pointer; text-overflow: ellipsis; }
.kp-recherche__select:focus { outline: none; }
.kp-recherche__envoyer { margin-left: 10px; }
.kp-recherche .kp-chips { padding: 0 8px 4px; }

/* Barre compacte mobile : lieu, âge, bouton filtres */
.kp-recherche-compacte { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: var(--kp-rayon-bloc); background: var(--kp-surface); box-shadow: var(--kp-ombre); }
.kp-recherche-compacte__valeur { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kp-recherche-compacte__valeur .kp-icone { width: 18px; height: 18px; }
.kp-recherche-compacte__separateur { width: 1.5px; height: 24px; flex: none; background: var(--kp-bordure); }
.kp-recherche-compacte .kp-btn { margin-left: auto; }

@media (max-width: 900px) {
  .kp-recherche__ligne { grid-template-columns: minmax(0, 1fr); }
  .kp-recherche__cellule { border-right: 0; border-bottom: 1.5px solid var(--kp-bordure); border-radius: 0; }
  .kp-recherche__cellule:nth-child(3) { border-bottom: 0; }
  .kp-recherche__envoyer { width: auto; margin: 8px 0 0; border-radius: var(--kp-rayon-pilule); }
  .kp-recherche .kp-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 6px; }
  .kp-recherche--repliable:not([data-ouvert="true"]) { display: none; }
}
@media (min-width: 901px) {
  .kp-recherche-compacte { display: none; }
}

/* ---- components/plan.css ---- */
/* Plan (carte Leaflet) aux couleurs de la marque.
   Tuiles OpenStreetMap (libres, sans clé) décolorées puis réchauffées au
   filtre pour tomber dans la crème ; encre marine, marqueurs miel.
   On tinte le fond, on ne peint pas la marque dessus. Leaflet est chargé à la
   demande par kidopass.js, uniquement sur les pages qui posent un plan. */

.kp-plan { position: relative; border-radius: var(--kp-rayon-carte); overflow: hidden; background: var(--kp-sable); box-shadow: 0 0 0 1.5px var(--kp-bordure); }
.kp-plan__toile { height: var(--kp-plan-hauteur, 420px); background: var(--kp-sable); }
.kp-plan__toile:focus-visible { outline: 3px solid var(--kp-focus); outline-offset: -3px; }

/* Repli tant que Leaflet n'est pas chargé (et si le réseau le bloque). */
.kp-plan__attente { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--kp-texte-2); font-size: var(--kp-taille-sm); pointer-events: none; }
.kp-plan__attente .kp-icone { width: 26px; height: 26px; }
.kp-plan[data-kp-plan-pret="true"] .kp-plan__attente { display: none; }

/* --- Fond de carte ------------------------------------------------------ */
.kp-plan .leaflet-container { background: var(--kp-sable); font-family: var(--kp-police-texte); }
.kp-plan .leaflet-tile-pane { filter: grayscale(1) contrast(0.88) brightness(1.1) sepia(0.45) saturate(0.8) hue-rotate(-10deg); }
.kp-plan .leaflet-container a { color: var(--kp-texte-2); }

/* Contrôles */
.kp-plan .leaflet-bar { border: 0; border-radius: var(--kp-rayon-petit); box-shadow: var(--kp-ombre), 0 0 0 1.5px var(--kp-bordure); overflow: hidden; }
.kp-plan .leaflet-bar a { width: 34px; height: 34px; line-height: 34px; border-bottom-color: var(--kp-bordure); background: var(--kp-surface); color: var(--kp-marine); font-family: var(--kp-police-titre); font-weight: 800; }
.kp-plan .leaflet-bar a:hover { background: var(--kp-sable); color: var(--kp-marine); }
.kp-plan .leaflet-control-attribution { padding: 2px 8px; border-radius: var(--kp-rayon-pilule) 0 0 0; background: rgba(250, 245, 236, 0.9); color: var(--kp-texte-3); font-size: 10px; }

/* --- Marqueurs ---------------------------------------------------------- */
.kp-plan__marqueur { display: grid; place-items: center; }
.kp-plan__epingle {
  display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--kp-rayon-pilule) var(--kp-rayon-pilule) 4px var(--kp-rayon-pilule);
  background: var(--kp-marine); color: var(--kp-miel);
  box-shadow: 0 6px 16px rgba(30, 42, 71, 0.28);
  transform: rotate(45deg);
  transition: transform var(--kp-duree) var(--kp-courbe), background-color var(--kp-duree);
}
.kp-plan__epingle > * { transform: rotate(-45deg); }
.kp-plan__epingle .kp-icone { width: 18px; height: 18px; }
.kp-plan__marqueur:hover .kp-plan__epingle,
.kp-plan__marqueur--actif .kp-plan__epingle { transform: rotate(45deg) scale(1.1); background: var(--kp-corail); color: var(--kp-marine); }
.kp-plan__prix { font-family: var(--kp-police-titre); font-weight: 800; font-size: 13px; letter-spacing: -0.02em; }
.kp-plan .leaflet-marker-icon:focus-visible { outline: 3px solid var(--kp-focus); outline-offset: 2px; border-radius: var(--kp-rayon-petit); }

/* --- Infobulle ---------------------------------------------------------- */
.kp-plan .leaflet-popup-content-wrapper { padding: 0; border-radius: var(--kp-rayon-bloc); background: var(--kp-surface); box-shadow: var(--kp-ombre), 0 0 0 1.5px var(--kp-bordure); }
.kp-plan .leaflet-popup-content { margin: 0; width: 244px !important; }
.kp-plan .leaflet-popup-tip { background: var(--kp-surface); box-shadow: none; }
/* Le bouton de fermeture tombe souvent sur la photo : il lui faut son fond. */
.kp-plan .leaflet-popup-close-button { top: 8px; right: 8px; width: 26px; height: 26px; padding: 0; border-radius: var(--kp-rayon-pilule); background: var(--kp-creme); color: var(--kp-marine); font-size: 17px; line-height: 24px; text-align: center; box-shadow: 0 2px 8px rgba(30, 42, 71, 0.2); }
.kp-plan .leaflet-popup-close-button:hover { background: var(--kp-miel); color: var(--kp-marine); }

.kp-bulle { display: block; color: inherit; text-decoration: none; }
.kp-bulle__photo { display: block; width: 100%; height: 118px; object-fit: cover; background: var(--kp-ciel-clair); }
.kp-bulle__corps { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; padding: 12px 14px 14px; }
.kp-bulle__titre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 16px; line-height: 1.2; letter-spacing: -0.02em; }
.kp-bulle__meta { font-size: var(--kp-taille-xs); color: var(--kp-texte-2); }
.kp-bulle:hover .kp-bulle__titre { text-decoration: underline; text-underline-offset: 3px; }

/* --- Adresse et légende -------------------------------------------------- */
.kp-plan__adresse { position: absolute; z-index: 500; left: 12px; bottom: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--kp-rayon-pilule); background: var(--kp-creme); box-shadow: var(--kp-ombre), 0 0 0 1.5px var(--kp-bordure); font-size: var(--kp-taille-xs); font-weight: 600; }
.kp-plan__adresse .kp-icone { width: 15px; height: 15px; color: var(--kp-texte-2); }
.kp-plan__adresse + .kp-plan__legende { bottom: 58px; }

.kp-plan__legende { position: absolute; z-index: 500; left: 12px; bottom: 12px; display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: calc(100% - 24px); padding: 10px 14px; border-radius: var(--kp-rayon-bloc); background: rgba(250, 245, 236, 0.94); box-shadow: 0 0 0 1.5px var(--kp-bordure); font-size: var(--kp-taille-xs); font-weight: 600; }
.kp-plan__legende span { display: inline-flex; align-items: center; gap: 7px; }
.kp-plan__puce { width: 12px; height: 12px; border-radius: var(--kp-rayon-pilule); background: var(--kp-marine); }
.kp-plan__puce--actif { background: var(--kp-corail); }

@media (max-width: 600px) {
  .kp-plan__toile { height: var(--kp-plan-hauteur-mobile, 320px); }
  .kp-plan__adresse { left: 10px; bottom: 10px; }
  .kp-plan__adresse + .kp-plan__legende { bottom: auto; }
  .kp-plan__legende { position: static; max-width: none; border-radius: 0; box-shadow: none; border-top: 1.5px solid var(--kp-bordure); }
}

/* ---- components/navigation.css ---- */
/* Fil d'Ariane et pagination */
.kp-fil { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: var(--kp-texte-2); }
.kp-fil li { display: inline-flex; align-items: center; gap: 6px; }
.kp-fil li + li::before { content: ""; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; }
.kp-fil a:hover { color: var(--kp-marine); text-decoration: underline; text-underline-offset: 4px; }
.kp-fil [aria-current="page"] { color: var(--kp-marine); font-weight: 600; }

.kp-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.kp-pagination__page { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1.5px solid var(--kp-marine); border-radius: 50%; font-size: 15px; font-weight: 600; }
.kp-pagination__page:hover { background: var(--kp-marine-10); }
.kp-pagination__page[aria-current="page"] { background: var(--kp-marine); color: var(--kp-creme); }
.kp-pagination__page .kp-icone { width: 18px; height: 18px; }
.kp-pagination__page[aria-disabled="true"] { border-color: var(--kp-ligne); color: var(--kp-texte-3); pointer-events: none; }

/* Titre de section : titre à gauche, lien à droite */
.kp-titre-section { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.kp-titre-section__texte { display: flex; flex-direction: column; gap: 10px; }

/* ---- components/retours.css ---- */
/* Retours : alerte, notification, état vide. Chaque message dit quoi faire ensuite. */
.kp-alerte { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--kp-rayon-bloc); background: var(--kp-sable); color: var(--kp-marine); font-size: 15px; line-height: 1.45; }
.kp-alerte > .kp-icone { margin-top: 1px; }
.kp-alerte__titre { display: block; margin-bottom: 2px; font-family: var(--kp-police-titre); font-weight: 800; }
.kp-alerte--avantage { background: var(--kp-miel); }
.kp-alerte--info { background: var(--kp-ciel); }
.kp-alerte--attention { background: var(--kp-abricot-clair); }
.kp-alerte--erreur { background: var(--kp-erreur-clair); color: #6E2114; }

.kp-toast { display: inline-flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 14px; background: var(--kp-marine); color: var(--kp-creme); box-shadow: var(--kp-ombre); font-size: 15px; font-weight: 600; }
.kp-toast .kp-icone { color: var(--kp-miel); }
.kp-toasts { position: fixed; left: 50%; bottom: 24px; z-index: 60; display: flex; flex-direction: column; gap: 8px; transform: translateX(-50%); pointer-events: none; }
.kp-toasts .kp-toast { animation: kp-toast-entree 220ms var(--kp-courbe); }
@keyframes kp-toast-entree { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .kp-toasts { bottom: calc(var(--kp-tabbar) + 16px); } }

.kp-vide { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 24px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); text-align: center; }
.kp-vide__icone { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--kp-ciel); }
.kp-vide__icone .kp-icone { width: 26px; height: 26px; }

/* ---- components/promo.css ---- */
/* ==========================================================================
   Promotion : les codes de la bonne affaire, assumés mais honnêtes.
   Compte à rebours réel, jauge branchée sur de vraies données, prix
   comparés. Pas de fausse notification ni de fausse rareté.
   ========================================================================== */

/* Éclat : sticker en étoile pour la réduction phare */
.kp-eclat { --taille: 168px; position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: var(--taille); height: var(--taille); flex: none; color: var(--kp-marine); text-align: center; transform: rotate(-12deg); }
.kp-eclat::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--kp-miel); clip-path: polygon(50% 0%, 59% 11%, 72% 4%, 76% 18%, 91% 16%, 89% 30%, 100% 38%, 92% 50%, 100% 62%, 89% 70%, 91% 84%, 76% 82%, 72% 96%, 59% 89%, 50% 100%, 41% 89%, 28% 96%, 24% 82%, 9% 84%, 11% 70%, 0% 62%, 8% 50%, 0% 38%, 11% 30%, 9% 16%, 24% 18%, 28% 4%, 41% 11%); }
.kp-eclat--corail::before { background: var(--kp-corail); }
.kp-eclat--ciel::before { background: var(--kp-ciel); }
.kp-eclat__valeur { font-family: var(--kp-police-titre); font-weight: 800; font-size: calc(var(--taille) * 0.3); line-height: 0.9; letter-spacing: -0.05em; }
.kp-eclat__texte { max-width: 70%; margin-top: 4px; font-size: calc(var(--taille) * 0.085); font-weight: 700; line-height: 1.1; text-transform: uppercase; letter-spacing: 0.04em; }
.kp-eclat--sm { --taille: 112px; }
.kp-eclat--lg { --taille: 230px; }

/* Compte à rebours */
.kp-compte { display: inline-flex; flex-direction: column; gap: 10px; }
.kp-compte__label { font-size: var(--kp-taille-sm); font-weight: 600; }
.kp-compte__cases { display: flex; gap: 8px; }
.kp-compte__case { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 72px; padding: 10px 8px 8px; border-radius: var(--kp-rayon-champ); background: var(--kp-marine); color: var(--kp-creme); }
.kp-compte__nombre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 34px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.kp-compte__unite { margin-top: 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; }
.kp-compte--clair .kp-compte__case { background: var(--kp-surface); color: var(--kp-marine); }
.kp-compte--sm .kp-compte__case { min-width: 48px; padding: 6px 6px 5px; border-radius: 8px; }
.kp-compte--sm .kp-compte__nombre { font-size: 20px; }
.kp-compte--sm .kp-compte__unite { font-size: 9px; }
.kp-compte--ligne { flex-direction: row; align-items: center; gap: 12px; }

/* Bandeau défilant */
/* Bandeau défilant : corail de marque, texte blanc — choix assumé de la
   direction artistique. Le blanc y est à 2,6:1 : la bande est décorative, son
   contenu doit donc exister ailleurs sur la page (elle porte déjà un
   aria-label, et sa copie est masquée aux lecteurs d'écran). */
.kp-defilant { overflow: hidden; background: var(--kp-corail); color: var(--kp-blanc); }
.kp-defilant__piste { display: flex; width: max-content; animation: kp-defiler 32s linear infinite; }
.kp-defilant:hover .kp-defilant__piste { animation-play-state: paused; }
.kp-defilant__groupe { display: flex; align-items: center; gap: 28px; padding: 16px 14px; }
.kp-defilant__item { display: inline-flex; align-items: center; gap: 28px; font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(19px, 2vw, 26px); letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; }
.kp-defilant__item::after { content: ""; width: 14px; height: 14px; border-radius: 3px; background: currentColor; transform: rotate(45deg); }
.kp-defilant--profond { background: var(--kp-corail-profond); }
.kp-defilant--encre { color: var(--kp-marine); }
.kp-defilant--miel { background: var(--kp-miel); color: var(--kp-marine); }
.kp-defilant--marine { background: var(--kp-marine); color: var(--kp-miel); }
@keyframes kp-defiler { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .kp-defilant__piste { animation: none; } }

/* Barre promo en haut de page */
.kp-barre-promo { background: var(--kp-marine); color: var(--kp-creme); }
.kp-barre-promo__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 20px; min-height: 56px; padding-block: 8px; font-size: 15px; font-weight: 600; text-align: center; }
.kp-barre-promo .kp-compte__case { background: var(--kp-miel); color: var(--kp-marine); }
.kp-barre-promo--corail { background: var(--kp-corail); color: var(--kp-marine); }
.kp-barre-promo--corail .kp-compte__case { background: var(--kp-marine); color: var(--kp-creme); }

/* Prix comparés */
.kp-comparatif { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: hidden; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-comparatif__colonne { display: flex; flex-direction: column; gap: 10px; padding: clamp(24px, 3.4vw, 44px); }
.kp-comparatif__colonne--fondateur { position: relative; background: var(--kp-miel); }
.kp-comparatif__montant { font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(44px, 5.4vw, 72px); line-height: 1; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.kp-comparatif__colonne:not(.kp-comparatif__colonne--fondateur) .kp-comparatif__montant { color: var(--kp-texte-3); text-decoration: line-through; text-decoration-thickness: 4px; }
.kp-comparatif__economie { position: absolute; right: clamp(16px, 2vw, 28px); top: clamp(16px, 2vw, 28px); }
@media (max-width: 700px) { .kp-comparatif { grid-template-columns: minmax(0, 1fr); } }

/* Bon plan du jour */
.kp-deal { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-deal > .kp-media { min-height: 480px; border-radius: 0; }
.kp-deal__eclat { position: absolute; right: 28px; top: 28px; z-index: 3; }
.kp-deal__corps { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(24px, 3.4vw, 44px); }
.kp-deal__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; }
.kp-deal__montant { font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(52px, 6vw, 84px); line-height: 0.95; letter-spacing: -0.05em; color: var(--kp-corail-fort); font-variant-numeric: tabular-nums; }
.kp-deal--corail { background: var(--kp-corail); color: var(--kp-marine); }
.kp-deal--corail .kp-deal__montant { color: var(--kp-marine); }
.kp-deal--corail .kp-muted, .kp-deal--corail .kp-meta, .kp-deal--corail .kp-barre { color: var(--kp-marine); }
.kp-deal--corail .kp-jauge { --kp-jauge-piste: rgba(30, 42, 71, 0.18); }
.kp-deal .kp-jauge { --kp-jauge-valeur: var(--kp-corail); }
.kp-deal--corail .kp-jauge { --kp-jauge-valeur: var(--kp-marine); }
@media (max-width: 900px) {
  .kp-deal { grid-template-columns: minmax(0, 1fr); }
  .kp-deal > .kp-media { min-height: 260px; }
  .kp-deal__eclat .kp-eclat { --taille: 120px; }
}

/* Barre mobile collante de conversion */
.kp-barre-conversion { display: none; }
@media (max-width: 900px) {
  .kp-barre-conversion { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--kp-z-collant); display: flex; align-items: center; gap: 12px; padding: 10px var(--kp-marge) calc(10px + env(safe-area-inset-bottom)); background: var(--kp-marine); color: var(--kp-creme); box-shadow: var(--kp-ombre-haute); }
  .kp-barre-conversion__texte { display: flex; flex-direction: column; flex: 1; min-width: 0; font-size: 13px; line-height: 1.25; }
  .kp-barre-conversion__texte strong { font-family: var(--kp-police-titre); font-size: 17px; color: var(--kp-miel); }
  /* Variante corail : le miel sur corail tombe à 2,2:1, tout passe
     donc en encre marine — et le bouton en marine plutôt qu'en miel, qui vibrerait
     contre l'orange. */
  .kp-barre-conversion--corail { background: var(--kp-corail); color: var(--kp-marine); }
  .kp-barre-conversion--corail .kp-barre-conversion__texte strong { color: var(--kp-marine); }
  .kp-page--conversion .kp-pied { padding-bottom: 120px; }
}

/* ---- components/entete.css ---- */
/* En-tête du site : logo, navigation, langue, compte, appel à l'action.
   Sous 900 px : logo + menu seulement, l'action passe dans le menu. */
/* Fond plein, y compris collé en haut : le voile translucide laissait passer
   le contenu et, surtout, le backdrop-filter créait un bloc conteneur qui
   piégeait les éléments en position fixed posés dans l'en-tête. */
.kp-entete { position: sticky; top: 0; z-index: var(--kp-z-entete); background: var(--kp-creme); }
.kp-entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--kp-entete); }
.kp-entete__logo { display: inline-flex; flex: none; }
.kp-entete__nav { display: flex; align-items: center; gap: 32px; list-style: none; margin: 0; padding: 0; }
.kp-entete__lien { font-size: 15px; font-weight: 600; padding: 8px 0; }
.kp-entete__lien:hover, .kp-entete__lien[aria-current="page"] { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 2px; }
.kp-entete__actions { display: flex; align-items: center; gap: 20px; flex: none; }
/* Sélecteur de langue : une vraie liste déroulante, posée sans encadré. */
.kp-entete__langue { display: inline-flex; }
.kp-entete__langue .kp-liste__declencheur { gap: 4px; font-size: 15px; font-weight: 600; letter-spacing: 0; }
.kp-entete__langue .kp-liste__fleche { width: 16px; height: 16px; }
.kp-entete__menu-bouton { display: none; }

@media (max-width: 900px) {
  .kp-entete__nav, .kp-entete__langue, .kp-entete__compte, .kp-entete__cta { display: none; }
  .kp-entete__menu-bouton { display: inline-flex; }
}

/* Mention de territoire posée à côté du logo (landings). */
.kp-entete__mention { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; padding-left: 16px; font-family: var(--kp-police-titre); font-weight: 800; font-size: 14px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--kp-texte); white-space: nowrap; }
/* Barre centrée : logo et mention seuls, sans action à droite. */
.kp-entete--centre .kp-entete__barre { justify-content: center; }
.kp-entete--centre .kp-entete__mention { margin-right: 0; }
.kp-entete__separateur { width: 1.5px; height: 28px; margin-right: 6px; background: var(--kp-ligne); }
.kp-entete__drapeau { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 17px; line-height: 1; letter-spacing: 0; }
@media (max-width: 600px) {
  /* Le drapeau tient seul : trois éléments sur une barre de 350 px, c'est un de trop. */
  .kp-entete__mention { padding-left: 10px; }
  .kp-entete__mention > span:last-child { display: none; }
}

/* ---- components/menu.css ---- */
/* Menu mobile à plusieurs niveaux.
   Une seule vue est visible à la fois : on navigue dedans comme dans une
   appli, plutôt que d'empiler des accordéons. Le tiroir est un dialogue :
   il prend l'écran, piège le focus, se ferme à Échap. */

.kp-menu { display: none; }
.kp-menu[hidden] { display: none; }
/* Dans le top layer : styles par défaut du popover neutralisés. */
.kp-menu[popover] { width: auto; height: auto; max-width: none; max-height: none; border: 0; padding: 0; margin: 0; overflow: visible; color: inherit; }
.kp-menu[popover]:not(:popover-open) { display: none; }

@media (max-width: 900px) {
  .kp-menu {
    position: fixed; z-index: var(--kp-z-menu); inset: var(--kp-entete) 0 0;
    display: flex; flex-direction: column;
    background: var(--kp-creme); border-top: 1.5px solid var(--kp-bordure);
    animation: kp-menu-entree var(--kp-duree) var(--kp-courbe);
  }
  .kp-menu[hidden] { display: none; }
  .kp-menu[popover]:not(:popover-open) { display: none; }
  .kp-menu[popover]:popover-open { display: flex; }
}
@keyframes kp-menu-entree { from { opacity: 0; transform: translateY(-8px); } }

/* --- Vues ---------------------------------------------------------------- */
.kp-menu__vues { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 4px var(--kp-marge) 24px; }
.kp-menu__vue[hidden] { display: none; }
.kp-menu__vue { animation: kp-menu-avance var(--kp-duree) var(--kp-courbe); }
.kp-menu__vue[data-sens="retour"] { animation-name: kp-menu-recule; }
@keyframes kp-menu-avance { from { opacity: 0; transform: translateX(16px); } }
@keyframes kp-menu-recule { from { opacity: 0; transform: translateX(-16px); } }
@media (prefers-reduced-motion: reduce) {
  .kp-menu, .kp-menu__vue { animation: none; }
}

/* --- Fil de retour ------------------------------------------------------- */
.kp-menu__fil { display: flex; flex-direction: column; gap: 2px; padding: 12px 0 8px; }
.kp-menu__retour { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-left: -6px; padding: 6px; border: 0; border-radius: var(--kp-rayon-petit); background: none; color: var(--kp-texte-2); font-family: var(--kp-police-texte); font-size: var(--kp-taille-sm); font-weight: 600; cursor: pointer; }
.kp-menu__retour:hover { color: var(--kp-texte); background: var(--kp-sable); }
.kp-menu__retour .kp-icone { width: 18px; height: 18px; }
.kp-menu__titre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 26px; letter-spacing: -0.03em; }
.kp-menu__titre:focus-visible { outline: 3px solid var(--kp-focus); outline-offset: 4px; border-radius: var(--kp-rayon-petit); }

/* --- Lignes -------------------------------------------------------------- */
.kp-menu__liste { list-style: none; margin: 0; padding: 0; }
.kp-menu__ligne {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 15px 4px; border: 0; border-bottom: 1.5px solid var(--kp-bordure);
  background: none; color: var(--kp-texte); text-align: left; cursor: pointer;
  font-family: var(--kp-police-titre); font-weight: 800; font-size: 19px; letter-spacing: -0.02em;
}
.kp-menu__liste li:last-child .kp-menu__ligne { border-bottom: 0; }
.kp-menu__ligne:hover { color: var(--kp-marine-80); }
.kp-menu__ligne:focus-visible { outline: 3px solid var(--kp-focus); outline-offset: -3px; border-radius: var(--kp-rayon-petit); }
.kp-menu__ligne[aria-current="page"] { color: var(--kp-marine); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.kp-menu__ligne > .kp-icone { flex: none; width: 21px; height: 21px; color: var(--kp-texte-2); }
.kp-menu__texte { flex: 1; min-width: 0; }
.kp-menu__fleche { flex: none; width: 20px; height: 20px; color: var(--kp-texte-3); }
.kp-menu__puce { flex: none; width: 21px; height: 21px; }

/* « Tout voir » : c'est un raccourci, pas une rubrique. */
.kp-menu__ligne[data-tout] { font-family: var(--kp-police-texte); font-weight: 600; font-size: var(--kp-taille-sm); color: var(--kp-texte-2); }
.kp-menu__ligne[data-tout]:hover { color: var(--kp-texte); }

/* Les sous-niveaux respirent moins : ce sont des valeurs, pas des rubriques. */
.kp-menu__vue .kp-menu__fil ~ .kp-menu__liste .kp-menu__ligne { font-size: 17px; padding: 13px 4px; }

/* --- Pied : langue et action -------------------------------------------- */
.kp-menu__pied { flex: none; display: flex; align-items: flex-end; gap: 12px; padding: 16px var(--kp-marge) calc(16px + env(safe-area-inset-bottom)); border-top: 1.5px solid var(--kp-bordure); background: var(--kp-surface); }
.kp-menu__pied .kp-champ { flex: none; width: 128px; }
.kp-menu__pied .kp-btn { flex: 1; }
@media (max-width: 400px) {
  .kp-menu__pied { flex-direction: column; align-items: stretch; }
  .kp-menu__pied .kp-champ { width: auto; }
}

/* ---- components/pied.css ---- */
/* Pied de page */
.kp-pied { margin-top: var(--kp-section); border-top: 1.5px solid var(--kp-bordure); padding: 32px 0 40px; }
.kp-pied__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 32px; }
.kp-pied__marque { display: flex; align-items: center; gap: 20px; }
.kp-pied__separateur { width: 1.5px; height: 36px; background: var(--kp-bordure); }
.kp-pied__signature { font-size: 13px; line-height: 1.45; color: var(--kp-texte-2); }
.kp-pied__liens { display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.kp-pied__liens a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kp-pied__mentions { margin-top: 20px; font-size: 12px; color: var(--kp-texte-3); }
@media (max-width: 900px) {
  .kp-pied { padding-bottom: calc(40px + var(--kp-tabbar)); }
  .kp-pied--sans-tabbar { padding-bottom: calc(40px + 96px); }
  .kp-pied__barre { flex-direction: column; align-items: flex-start; }
}

/* ---- components/tabbar.css ---- */
/* Barre d'onglets mobile : navigation au pouce, fixée en bas sous 900 px. */
.kp-tabbar { display: none; }
@media (max-width: 900px) {
  .kp-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--kp-z-collant); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: calc(var(--kp-tabbar) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); border-radius: 20px 20px 0 0; background: var(--kp-marine); color: var(--kp-creme); box-shadow: var(--kp-ombre-haute); }
}
.kp-tabbar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 12px; font-weight: 600; color: rgba(250, 245, 236, 0.82); }
.kp-tabbar__item .kp-icone { width: 24px; height: 24px; }
.kp-tabbar__item[aria-current="page"] { color: var(--kp-miel); }
/* Aperçu dans la documentation */
.kp-tabbar--apercu { position: static; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); height: var(--kp-tabbar); max-width: 390px; border-radius: 20px; background: var(--kp-marine); color: var(--kp-creme); }

/* ---- components/barre-action.css ---- */
/* Barre d'action mobile : l'action de la fiche reste sous le pouce. */
.kp-barre-action { display: none; }
@media (max-width: 900px) {
  .kp-barre-action { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--kp-z-collant); display: flex; flex-direction: column; gap: 6px; padding: 12px var(--kp-marge) calc(14px + env(safe-area-inset-bottom)); border-radius: 20px 20px 0 0; background: var(--kp-surface); box-shadow: var(--kp-ombre-haute); }
  .kp-barre-action__ligne { display: flex; align-items: center; gap: 14px; }
  .kp-barre-action__prix { display: flex; flex-direction: column; flex: none; line-height: 1.1; }
  .kp-barre-action__prix .kp-prix { font-size: 22px; }
  .kp-barre-action__note { font-size: 12px; text-align: center; color: var(--kp-texte-2); }
}
.kp-barre-action--apercu { position: static; display: flex; flex-direction: column; gap: 6px; max-width: 390px; padding: 12px 20px 14px; border-radius: 20px; background: var(--kp-surface); box-shadow: var(--kp-ombre-haute); }
.kp-barre-action--apercu .kp-barre-action__ligne { display: flex; align-items: center; gap: 14px; }
.kp-barre-action--apercu .kp-barre-action__prix { display: flex; flex-direction: column; flex: none; line-height: 1.1; }
.kp-barre-action--apercu .kp-barre-action__prix .kp-prix { font-size: 22px; }
.kp-barre-action--apercu .kp-barre-action__note { font-size: 12px; text-align: center; color: var(--kp-texte-2); }

/* ---- patterns/page.css ---- */
/* Gabarit de page : pile de sections, place pour la barre mobile. */
.kp-page { min-height: 100vh; display: flex; flex-direction: column; }
.kp-page__contenu { flex: 1; display: flex; flex-direction: column; gap: var(--kp-section); padding-top: var(--kp-6); }
@media (max-width: 900px) {
  .kp-page__contenu { padding-top: var(--kp-3); }
}

/* ---- patterns/hero.css ---- */
/* Héros : promesse à gauche, photo vécue à droite avec accroche et étiquette. */
.kp-hero { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; gap: clamp(28px, 4vw, 56px); }
.kp-hero__texte { display: flex; flex-direction: column; gap: 22px; }
.kp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; padding-top: 6px; }
.kp-hero__visuel { position: relative; }
.kp-hero__visuel .kp-media { height: clamp(320px, 42vw, 540px); }
.kp-hero__accroche { position: absolute; right: clamp(16px, 3vw, 40px); top: clamp(16px, 3vw, 40px); z-index: 2; }
.kp-hero__etiquette { position: absolute; right: clamp(16px, 3vw, 40px); bottom: clamp(16px, 3vw, 40px); z-index: 2; }

@media (max-width: 900px) {
  .kp-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .kp-hero__actions .kp-btn--primaire { width: 100%; }
  .kp-hero__visuel .kp-media { height: 240px; }
  .kp-hero__accroche .kp-sticker { --encoche: 6px; font-size: 24px; padding: 7px 20px 10px; }
  .kp-hero__etiquette { display: none; }
}

/* Héros du pass : deux passes superposés */
.kp-hero-pass { position: relative; display: flex; align-items: center; justify-content: center; min-height: 420px; }
.kp-hero-pass .kp-pass { position: absolute; width: min(380px, 78%); }
.kp-hero-pass .kp-pass:first-child { transform: translate(-22%, -18%) rotate(-8deg); }
.kp-hero-pass .kp-pass:last-child { transform: translate(18%, 20%) rotate(4deg); }
@media (max-width: 900px) {
  .kp-hero-pass { min-height: 300px; }
  .kp-hero-pass .kp-pass { width: min(300px, 76%); --encoche: 13px; padding: 18px 20px; }
  .kp-hero-pass .kp-pass .kp-logo { font-size: 22px; }
}

/* ---- patterns/offre.css ---- */
/* Fiche offre : galerie, en-tête, bloc d'avantage collant, détails.
   Sur mobile, l'avantage passe juste sous le titre et l'action est fixée en bas. */
.kp-galerie { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; height: clamp(280px, 34vw, 460px); }
.kp-galerie__cote { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 16px; min-height: 0; }
.kp-galerie .kp-media { height: 100%; min-height: 0; }

.kp-fiche { display: grid; grid-template-columns: minmax(0, 1fr) 400px; grid-template-areas: "entete avantage" "details avantage"; column-gap: clamp(32px, 4vw, 56px); row-gap: 40px; align-items: start; }
.kp-fiche__entete { grid-area: entete; display: flex; flex-direction: column; gap: 14px; }
.kp-fiche__avantage { grid-area: avantage; position: sticky; top: calc(var(--kp-entete) + 16px); display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); box-shadow: var(--kp-ombre); }
.kp-fiche__details { grid-area: details; display: flex; flex-direction: column; gap: 40px; }
.kp-fiche__note { font-size: 13px; text-align: center; color: var(--kp-texte-2); }

@media (max-width: 1080px) {
  .kp-fiche { grid-template-columns: minmax(0, 1fr) 340px; }
}
@media (max-width: 900px) {
  .kp-galerie { grid-template-columns: minmax(0, 1fr); height: auto; }
  .kp-galerie > .kp-media { height: 240px; }
  .kp-galerie__cote { display: none; }
  .kp-fiche { grid-template-columns: minmax(0, 1fr); grid-template-areas: "entete" "avantage" "details"; row-gap: 24px; }
  .kp-fiche__avantage { position: static; padding: 0; background: none; box-shadow: none; }
  .kp-fiche__avantage .kp-fiche__action, .kp-fiche__avantage .kp-fiche__note { display: none; }
  .kp-fiche__avantage .kp-conditions { background: var(--kp-surface); }
}

/* ---- patterns/catalogue.css ---- */
/* Catalogue : filtres à gauche, résultats à droite. Filtres repliés sur mobile. */
.kp-catalogue { display: grid; grid-template-columns: 272px minmax(0, 1fr); gap: 40px; align-items: start; }
.kp-filtres { position: sticky; top: calc(var(--kp-entete) + 16px); display: flex; flex-direction: column; gap: 28px; }
.kp-filtres__entete { display: flex; align-items: center; justify-content: space-between; }
.kp-filtres__ouvrir { display: none; }
.kp-resultats { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.kp-resultats__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }

@media (max-width: 1080px) {
  .kp-catalogue { grid-template-columns: 236px minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 900px) {
  .kp-catalogue { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .kp-filtres__ouvrir { display: inline-flex; }
  .kp-filtres { position: static; padding: 20px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
  .kp-filtres:not([data-ouvert="true"]) { display: none; }
}

/* ---- patterns/membre.css ---- */
/* Espace membre : le pass à gauche, les avantages en onglets à droite. */
.kp-membre { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: clamp(32px, 4vw, 56px); align-items: start; }
.kp-membre__pass { position: sticky; top: calc(var(--kp-entete) + 16px); display: flex; flex-direction: column; gap: 16px; }
.kp-membre__pass .kp-pass { max-width: none; }
@media (max-width: 900px) {
  .kp-membre { grid-template-columns: minmax(0, 1fr); }
  .kp-membre__pass { position: static; }
}

/* ---- patterns/blocs.css ---- */
/* ==========================================================================
   Blocs de page : sections autonomes à empiler dans <main class="kp-blocs">.
   Chaque bloc gère son fond et son espacement vertical ; deux blocs
   consécutifs ne se collent jamais et ne doublent jamais leur marge.
   ========================================================================== */

.kp-blocs { display: flex; flex-direction: column; }
.kp-section { padding-block: clamp(36px, 5vw, 64px); }
.kp-section--serre { padding-block: clamp(20px, 3vw, 32px); }
.kp-section--sans-marge { padding-block: 0; }
.kp-section--blanc { background: var(--kp-surface); }
.kp-section--sable { background: var(--kp-sable); }
.kp-section--ciel { background: var(--kp-ciel); }
.kp-section--miel { background: var(--kp-miel); color: var(--kp-marine); }
.kp-section--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-section--corail { background: var(--kp-corail); color: var(--kp-marine); }
.kp-section--corail .kp-label, .kp-section--corail .kp-muted, .kp-section--corail .kp-meta { color: var(--kp-marine); }
.kp-section--corail .kp-chiffre { border-color: var(--kp-filet-fort); }
.kp-section--marine .kp-muted, .kp-section--marine .kp-meta { color: rgba(250, 245, 236, 0.78); }
.kp-section--marine .kp-label { color: var(--kp-miel); }
.kp-section--marine .kp-lien { color: var(--kp-creme); }
.kp-section--miel .kp-label, .kp-section--ciel .kp-label { color: var(--kp-marine); }
.kp-section--miel .kp-muted, .kp-section--ciel .kp-muted { color: var(--kp-marine); }

/* Introduction de section */
.kp-intro { display: flex; flex-direction: column; gap: 12px; max-width: 780px; }
.kp-intro--centre { margin-inline: auto; align-items: center; text-align: center; }
.kp-bloc-pile { display: flex; flex-direction: column; gap: clamp(24px, 3vw, 36px); }

/* --- Héros ------------------------------------------------------------- */
.kp-hero--inverse .kp-hero__visuel { order: -1; }
.kp-hero-centre { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: 920px; margin-inline: auto; text-align: center; }
.kp-hero-centre .kp-lead { max-width: 640px; }
.kp-hero-centre .kp-hero__actions { justify-content: center; }
.kp-hero-image { position: relative; }
.kp-hero-image > .kp-media { height: clamp(440px, 50vw, 640px); }
.kp-hero-image__panneau { position: absolute; left: clamp(20px, 4vw, 56px); bottom: clamp(20px, 4vw, 56px); z-index: 2; display: flex; flex-direction: column; gap: 18px; max-width: 580px; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--kp-rayon-carte); background: var(--kp-marine); color: var(--kp-creme); }
.kp-hero-image__panneau .kp-label { color: var(--kp-miel); }
.kp-hero-image__panneau .kp-lien { color: var(--kp-creme); }
.kp-hero-image__panneau--creme { background: var(--kp-creme); color: var(--kp-marine); }
.kp-hero-image__panneau--creme .kp-label { color: var(--kp-texte-2); }
.kp-hero-image__panneau--creme .kp-lien { color: var(--kp-marine); }
.kp-hero-image__accroche { position: absolute; right: clamp(20px, 4vw, 56px); top: clamp(20px, 4vw, 56px); z-index: 2; }
.kp-entete-page { display: flex; flex-direction: column; gap: 16px; }
.kp-entete-page .kp-lead { max-width: 720px; }
.kp-galerie-unique { height: clamp(260px, 36vw, 480px); }

@media (max-width: 900px) {
  .kp-hero--inverse .kp-hero__visuel { order: 0; }
  .kp-hero-image > .kp-media { height: 300px; }
  .kp-hero-image__panneau { position: relative; left: auto; bottom: auto; max-width: none; margin: -56px 12px 0; }
  .kp-hero-image__accroche .kp-sticker { --encoche: 6px; font-size: 24px; padding: 7px 20px 10px; }
}

/* --- Offres ------------------------------------------------------------ */
.kp-carrousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--kp-gouttiere)) / 3); gap: var(--kp-gouttiere); overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; padding-bottom: 4px; }
.kp-carrousel::-webkit-scrollbar { display: none; }
.kp-carrousel > * { scroll-snap-align: start; }
.kp-carrousel__nav { display: flex; gap: 8px; }
@media (max-width: 900px) {
  .kp-carrousel { grid-auto-columns: 80%; margin-inline: calc(var(--kp-marge) * -1); padding-inline: var(--kp-marge); scroll-padding-inline: var(--kp-marge); }
  .kp-carrousel__nav { display: none; }
}

.kp-vedette { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); overflow: hidden; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-vedette > .kp-media { min-height: 460px; border-radius: 0; }
.kp-vedette__corps { display: flex; flex-direction: column; justify-content: center; gap: 16px; padding: clamp(24px, 3.4vw, 44px); }
.kp-vedette--inverse > .kp-media { order: 2; }
.kp-vedette--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-vedette--marine .kp-meta, .kp-vedette--marine .kp-muted { color: rgba(250, 245, 236, 0.78); }
.kp-vedette--marine .kp-label { color: var(--kp-miel); }
@media (max-width: 900px) {
  .kp-vedette { grid-template-columns: minmax(0, 1fr); }
  .kp-vedette > .kp-media { min-height: 240px; order: 0; }
}

.kp-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 16px; }
.kp-tuile { display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); transition: background-color var(--kp-duree), transform var(--kp-duree); }
.kp-tuile:hover { background: var(--kp-miel); transform: translateY(-2px); }
.kp-tuile__icone { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--ton, var(--kp-ciel)); }
.kp-tuile__icone .kp-icone { width: 26px; height: 26px; }
.kp-tuile__nom { display: block; font-family: var(--kp-police-titre); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.kp-tuile__compte { display: block; font-size: 13px; color: var(--kp-texte-2); }
.kp-tuile-photo { position: relative; display: block; border-radius: var(--kp-rayon-carte); overflow: hidden; }
.kp-tuile-photo .kp-media { border-radius: 0; transition: transform 400ms var(--kp-courbe); }
.kp-tuile-photo:hover .kp-media { transform: scale(1.03); }
.kp-tuile-photo__nom { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--kp-rayon-pilule); background: var(--kp-creme); font-family: var(--kp-police-titre); font-weight: 800; font-size: 15px; }
.kp-tuile-photo__nom .kp-icone { width: 16px; height: 16px; }

/* --- Contenu ----------------------------------------------------------- */
.kp-media-texte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(28px, 5vw, 72px); }
.kp-media-texte--inverse > .kp-media { order: 2; }
.kp-media-texte__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.kp-liste-coches { display: flex; flex-direction: column; gap: 12px; list-style: none; margin: 0; padding: 0; }
.kp-liste-coches li { display: flex; align-items: flex-start; gap: 12px; }
.kp-liste-coches .kp-coche { margin-top: 1px; }
@media (max-width: 900px) {
  .kp-media-texte { grid-template-columns: minmax(0, 1fr); }
  .kp-media-texte--inverse > .kp-media { order: 0; }
}

.kp-parcours { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.kp-parcours__etape { position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 20px; padding-bottom: 32px; }
.kp-parcours__etape::before { content: ""; position: absolute; left: 27px; top: 60px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--kp-ligne); }
.kp-parcours__etape:last-child { padding-bottom: 0; }
.kp-parcours__etape:last-child::before { display: none; }
.kp-parcours__numero { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: var(--kp-miel); font-family: var(--kp-police-titre); font-weight: 800; font-size: 20px; }
.kp-parcours__texte { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; }

.kp-atout { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.kp-atout__icone { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 16px; background: var(--kp-miel); color: var(--kp-marine); }
.kp-atout__icone .kp-icone { width: 26px; height: 26px; }
.kp-atout--carte { padding: 28px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-section--sable .kp-atout--carte { background: var(--kp-surface); }

.kp-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--kp-gouttiere); }
.kp-chiffre { display: flex; flex-direction: column; gap: 6px; padding-left: 20px; border-left: 2px solid var(--kp-ligne); }
.kp-chiffre__valeur { font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.kp-section--marine .kp-chiffre { border-color: rgba(250, 245, 236, 0.2); }
.kp-section--marine .kp-chiffre__valeur { color: var(--kp-miel); }
.kp-chiffres--cartes .kp-chiffre { padding: 28px; border: 0; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
@media (max-width: 900px) { .kp-chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; } }

.kp-citation { display: flex; flex-direction: column; gap: 28px; max-width: 980px; margin: 0; }
.kp-citation--centre { align-items: center; margin-inline: auto; text-align: center; }
.kp-citation__texte { font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(26px, 3.4vw, 44px); line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }
.kp-auteur { display: flex; align-items: center; gap: 14px; text-align: left; }
.kp-auteur__nom { display: block; font-weight: 600; }
.kp-auteur__role { display: block; font-size: 14px; color: var(--kp-texte-2); }
.kp-temoignage { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; margin: 0; padding: 28px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-temoignage__texte { font-size: 17px; line-height: 1.55; }

.kp-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; list-style: none; margin: 0; padding: 0; }
.kp-logos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kp-logos__item { display: flex; align-items: center; justify-content: center; height: 88px; padding: 12px; border-radius: var(--kp-rayon-bloc); background: var(--kp-surface); color: var(--kp-texte-3); font-family: var(--kp-police-titre); font-weight: 800; font-size: 14px; text-align: center; }
@media (max-width: 900px) { .kp-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kp-logos, .kp-logos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.kp-mosaique { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(140px, 16vw, 220px); gap: 16px; }
.kp-mosaique > .kp-media { height: 100%; }
.kp-mosaique__grand { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) { .kp-mosaique { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 150px; } }

.kp-article { display: flex; flex-direction: column; gap: 28px; max-width: 760px; margin-inline: auto; }
.kp-article--sommaire { display: grid; grid-template-columns: 220px minmax(0, 760px); justify-content: center; align-items: start; gap: 28px 56px; max-width: none; }
.kp-article__sommaire { position: sticky; top: calc(var(--kp-entete) + 16px); display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.kp-article__sommaire ol { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
.kp-article__sommaire a { display: block; padding: 6px 10px; border-radius: var(--kp-rayon-petit); color: var(--kp-texte-2); }
.kp-article__sommaire a:hover { background: var(--kp-sable); color: var(--kp-marine); }
.kp-article__corps { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.kp-prose h2 { margin-top: 1.4em; font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; letter-spacing: -0.03em; }
.kp-prose h3 { margin-top: 1.2em; font-family: var(--kp-police-titre); font-weight: 800; font-size: 20px; letter-spacing: -0.02em; }
.kp-prose ul, .kp-prose ol { padding-left: 1.2em; }
.kp-prose li + li { margin-top: 0.4em; }
.kp-prose blockquote { margin: 1.4em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--kp-miel); font-family: var(--kp-police-titre); font-weight: 800; font-size: 22px; line-height: 1.3; letter-spacing: -0.02em; }
@media (max-width: 900px) {
  .kp-article--sommaire { grid-template-columns: minmax(0, 1fr); }
  .kp-article__sommaire { position: static; padding: 18px; border-radius: var(--kp-rayon-bloc); background: var(--kp-surface); }
}

.kp-lieux { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; gap: var(--kp-gouttiere); }
.kp-lieux .kp-plan { height: 100%; }
.kp-lieux .kp-plan__toile { height: 100%; min-height: 440px; }
.kp-lieux__liste { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 900px) { .kp-lieux { grid-template-columns: minmax(0, 1fr); } .kp-lieux .kp-plan__toile { min-height: 280px; } }

/* --- Conversion -------------------------------------------------------- */
.kp-tableau-conteneur { overflow-x: auto; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-tableau { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.kp-tableau caption { padding: 20px 24px 0; text-align: left; font-family: var(--kp-police-titre); font-weight: 800; font-size: 18px; }
.kp-tableau th, .kp-tableau td { padding: 16px 24px; border-bottom: 1.5px solid var(--kp-ligne); text-align: center; vertical-align: middle; }
.kp-tableau th:first-child { text-align: left; }
.kp-tableau thead th { font-family: var(--kp-police-titre); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.kp-tableau tbody th { font-weight: 600; }
.kp-tableau tbody tr:last-child > * { border-bottom: 0; }
.kp-tableau .kp-tableau__vedette { background: rgba(255, 200, 92, 0.4); }
.kp-tableau .kp-coche { margin-inline: auto; }
.kp-tableau__non { color: var(--kp-texte-3); }

.kp-cta { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px 48px; overflow: hidden; padding: clamp(28px, 4.4vw, 56px); border-radius: var(--kp-rayon-carte); background: var(--kp-miel); color: var(--kp-marine); }
.kp-cta__texte { display: flex; flex-direction: column; gap: 14px; max-width: 640px; }
.kp-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.kp-cta--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-cta--marine .kp-muted { color: rgba(250, 245, 236, 0.78); }
.kp-cta--marine .kp-lien { color: var(--kp-creme); }
.kp-cta--marine .kp-label { color: var(--kp-miel); }
.kp-cta--sable { background: var(--kp-sable); }
.kp-cta--corail { background: var(--kp-corail); }
.kp-cta--corail .kp-label, .kp-cta--corail .kp-muted { color: var(--kp-marine); }
.kp-cta--blanc { background: var(--kp-surface); }
.kp-cta--visuel { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.kp-cta__visuel { position: relative; display: flex; justify-content: center; }
.kp-cta--centre { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
.kp-cta--centre .kp-cta__texte { align-items: center; }
.kp-cta--centre .kp-cta__actions { justify-content: center; }
@media (max-width: 900px) { .kp-cta, .kp-cta--visuel { grid-template-columns: minmax(0, 1fr); } }

.kp-inscription { display: flex; gap: 10px; width: 100%; max-width: 540px; }
.kp-inscription .kp-input { flex: 1; min-width: 0; }
.kp-intro--centre .kp-inscription { margin-inline: auto; }
@media (max-width: 600px) { .kp-inscription { flex-direction: column; } }

.kp-banniere { background: var(--kp-marine); color: var(--kp-creme); font-size: 14px; }
.kp-banniere__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 16px; min-height: 44px; padding-block: 8px; text-align: center; }
.kp-banniere .kp-lien { font-size: 14px; color: inherit; }
.kp-banniere--miel { background: var(--kp-miel); color: var(--kp-marine); }

.kp-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; gap: clamp(32px, 5vw, 72px); }
.kp-formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: clamp(24px, 3vw, 36px); border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-formulaire__plein { grid-column: 1 / -1; }
@media (max-width: 900px) { .kp-contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .kp-formulaire { grid-template-columns: minmax(0, 1fr); } }

/* --- Pied de page : variantes de bloc ---------------------------------- */
.kp-pied--bloc { margin-top: 0; }
.kp-pied__colonnes { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 32px; margin-bottom: 24px; padding-bottom: 32px; border-bottom: 1.5px solid var(--kp-bordure); }
.kp-pied__colonne { display: flex; flex-direction: column; gap: 12px; }
.kp-pied__titre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 15px; }
.kp-pied__colonne ul { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.kp-pied__colonne a:hover { text-decoration: underline; text-underline-offset: 4px; }
.kp-pied--marine { border-top: 0; background: var(--kp-marine); color: var(--kp-creme); }
.kp-pied--marine .kp-pied__signature, .kp-pied--marine .kp-pied__mentions { color: rgba(250, 245, 236, 0.7); }
.kp-pied--marine .kp-pied__separateur { background: rgba(250, 245, 236, 0.2); }
.kp-pied--marine .kp-pied__colonnes { border-color: rgba(250, 245, 236, 0.16); }
@media (max-width: 900px) {
  .kp-pied__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kp-pied__colonne:first-child { grid-column: 1 / -1; }
}

/* Texte secondaire sur les surfaces marine (lisibilité) */
.kp-hero-image__panneau:not(.kp-hero-image__panneau--creme) .kp-muted,
.kp-encart--marine .kp-muted,
.kp-bande .kp-muted { color: rgba(250, 245, 236, 0.78); }
.kp-chiffres--cartes .kp-chiffre__valeur { font-size: clamp(32px, 3.2vw, 46px); white-space: nowrap; }

/* Recherche posée sur un fond coloré : garde ses couleurs de carte */
.kp-recherche, .kp-recherche-compacte { color: var(--kp-marine); }
.kp-inscription .kp-input { flex: 1 1 auto; }
@media (max-width: 600px) {
  .kp-inscription .kp-input { flex: none; }
  .kp-tuiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kp-tuile { padding: 18px; }
  .kp-chiffres--cartes .kp-chiffre { padding: 20px; }
  .kp-chiffres--cartes .kp-chiffre__valeur { font-size: 30px; }
}

/* ---- patterns/fond-image.css ---- */
/* ==========================================================================
   Blocs à image en fond. La photo couvre la section ; le texte repose
   toujours sur un voile marine uni ou sur un panneau, jamais directement
   sur la photo (règle « pas de texture sous le texte »).
   ========================================================================== */

.kp-fond { position: relative; isolation: isolate; display: flex; overflow: hidden; min-height: clamp(520px, 62vw, 760px); color: var(--kp-creme); }
.kp-fond__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, center); }
.kp-fond::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--kp-voile-rgb), var(--voile, 0.5)); }
.kp-fond--sans-voile::before { display: none; }
.kp-fond--court { min-height: clamp(360px, 38vw, 480px); }
.kp-fond--haut { align-items: flex-start; }
.kp-fond--centre { align-items: center; }
.kp-fond--bas { align-items: flex-end; }
.kp-fond > .kp-conteneur { position: relative; padding-block: clamp(40px, 6vw, 88px); }
.kp-fond--arrondi { border-radius: var(--kp-rayon-carte); }

/* Contenu posé sur le voile */
.kp-fond__contenu { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; max-width: 640px; }
.kp-fond__contenu--centre { align-items: center; max-width: 860px; margin-inline: auto; text-align: center; }
.kp-fond__contenu--droite { margin-left: auto; }
.kp-fond .kp-label { color: var(--kp-miel); }
.kp-fond .kp-muted { color: rgba(250, 245, 236, 0.86); }
.kp-fond .kp-lien { color: var(--kp-creme); }
.kp-fond .kp-hero__actions { padding-top: 4px; }
.kp-fond__contenu--centre .kp-hero__actions { justify-content: center; }

/* Panneau posé sur la photo (sans voile) */
.kp-fond__panneau { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; max-width: 560px; padding: clamp(24px, 3.4vw, 44px); border-radius: var(--kp-rayon-carte); background: var(--kp-creme); color: var(--kp-marine); box-shadow: var(--kp-ombre); }
.kp-fond__panneau .kp-label { color: var(--kp-texte-2); }
.kp-fond__panneau .kp-muted { color: var(--kp-texte-2); }
.kp-fond__panneau .kp-lien { color: var(--kp-marine); }
.kp-fond__panneau--marine { background: var(--kp-marine); color: var(--kp-creme); }
.kp-fond__panneau--marine .kp-label { color: var(--kp-miel); }
.kp-fond__panneau--marine .kp-muted { color: rgba(250, 245, 236, 0.8); }
.kp-fond__panneau--marine .kp-lien { color: var(--kp-creme); }
.kp-fond__panneau--miel { background: var(--kp-miel); }
.kp-fond__panneau--corail { background: var(--kp-corail); }
.kp-fond__panneau--corail .kp-label, .kp-fond__panneau--corail .kp-muted { color: var(--kp-marine); }
.kp-fond__panneau--miel .kp-label, .kp-fond__panneau--miel .kp-muted { color: var(--kp-marine); }
.kp-fond__panneau--droite { margin-left: auto; }
.kp-fond__accroche { position: absolute; right: clamp(20px, 4vw, 56px); top: clamp(20px, 4vw, 56px); z-index: 2; }

/* Deux tuiles image côte à côte */
.kp-duo-images { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kp-gouttiere); }
.kp-tuile-fond { position: relative; isolation: isolate; display: flex; align-items: flex-end; overflow: hidden; min-height: clamp(340px, 34vw, 460px); padding: clamp(24px, 3vw, 36px); border-radius: var(--kp-rayon-carte); color: var(--kp-creme); }
.kp-tuile-fond img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--kp-courbe); }
.kp-tuile-fond::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(var(--kp-voile-rgb), 0.4); transition: background-color var(--kp-duree); }
.kp-tuile-fond:hover img { transform: scale(1.04); }
.kp-tuile-fond:hover::before { background: rgba(var(--kp-voile-rgb), 0.5); }
.kp-tuile-fond__texte { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kp-tuile-fond .kp-lien { color: var(--kp-creme); }

/* Carte de prix flottante (offre sur fond image) */
.kp-fond__offre { display: grid; grid-template-columns: minmax(0, 1fr) 380px; align-items: end; gap: 32px; width: 100%; }
.kp-fond__carte { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); color: var(--kp-marine); box-shadow: var(--kp-ombre); }

@media (max-width: 900px) {
  .kp-fond { min-height: 0; }
  .kp-fond::before { background: rgba(var(--kp-voile-rgb), var(--voile-mobile, 0.58)); }
  .kp-fond > .kp-conteneur { padding-block: 72px 40px; }
  .kp-fond--panneau { flex-direction: column; min-height: 0; }
  .kp-fond--panneau .kp-fond__image { position: relative; z-index: 0; height: 280px; }
  .kp-fond--panneau::before { display: none; }
  .kp-fond--panneau > .kp-conteneur { margin-top: -48px; padding-block: 0 32px; }
  .kp-fond__panneau { max-width: none; }
  .kp-fond__accroche .kp-sticker { --encoche: 6px; font-size: 24px; padding: 7px 20px 10px; }
  .kp-duo-images, .kp-fond__offre { grid-template-columns: minmax(0, 1fr); }
  .kp-fond__offre > .kp-fond__contenu { padding-top: 40px; }
}

/* Voile dégradé vertical : pour un contenu centré, qui tombe au milieu de
   l'image — donc sur sa zone la plus chargée. */
.kp-fond--scrim-v::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(18, 22, 38, 0.1) 0%, rgba(18, 22, 38, 0.34) 30%, rgba(18, 22, 38, 0.34) 72%, rgba(18, 22, 38, 0.08) 100%); }

/* Voile dégradé : protège le texte aligné à gauche sans assombrir toute la
   photo. Le voile uniforme éteint l'image ; celui-ci la laisse vivre à droite. */
.kp-fond--scrim::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(18, 22, 38, 0.82) 0%, rgba(18, 22, 38, 0.66) 38%, rgba(18, 22, 38, 0.12) 72%, rgba(18, 22, 38, 0) 100%); }
/* Voile dégradé doux : pour une photo claire et joyeuse, juste ce qu'il faut
   derrière la colonne de texte ; la moitié droite reste intacte. */
.kp-fond--scrim-doux::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, rgba(18, 22, 38, 0.26) 0%, rgba(18, 22, 38, 0.46) 34%, rgba(18, 22, 38, 0.06) 62%, rgba(18, 22, 38, 0) 100%); }
@media (max-width: 900px) {
  .kp-fond--scrim-doux::after { background: linear-gradient(180deg, rgba(18, 22, 38, 0.22) 0%, rgba(18, 22, 38, 0.5) 45%, rgba(18, 22, 38, 0.62) 100%); }
}
@media (max-width: 900px) {
  .kp-fond--scrim::after { background: linear-gradient(180deg, rgba(18, 22, 38, 0.34) 0%, rgba(18, 22, 38, 0.62) 55%, rgba(18, 22, 38, 0.7) 100%); }
}

/* ---- patterns/landing.css ---- */
/* Landing de pré-inscription : formulaire mis en avant, offre fondateur, confirmation. */
.kp-preinscription { display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: 580px; padding: 20px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); box-shadow: var(--kp-ombre); color: var(--kp-marine); text-align: left; }
.kp-preinscription__titre { font-family: var(--kp-police-titre); font-weight: 800; font-size: 17px; line-height: 1.3; letter-spacing: -0.015em; color: var(--kp-marine); }
.kp-preinscription__sous-titre { display: block; margin-top: 4px; font-family: var(--kp-police-texte); font-weight: 400; font-size: 15px; line-height: 1.45; letter-spacing: 0; color: var(--kp-texte-2); }
.kp-preinscription__ligne { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.kp-preinscription__champ { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.kp-preinscription__options { display: flex; flex-direction: column; gap: 8px; }
.kp-preinscription__rassurance { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; font-weight: 600; color: var(--kp-texte); }
.kp-preinscription__gage { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: var(--kp-rayon-pilule); background: var(--kp-sable); }
.kp-preinscription__rassurance--sombre { color: var(--kp-marine); }
.kp-preinscription__rassurance--sombre .kp-preinscription__gage { background: var(--kp-blanc); }
.kp-preinscription__rassurance .kp-icone { width: 15px; height: 15px; }
.kp-preinscription__erreur { margin-top: -6px; font-size: 13px; font-weight: 600; color: var(--kp-erreur); }
.kp-preinscription__succes { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: var(--kp-rayon-bloc); background: var(--kp-miel); }
.kp-preinscription__succes[hidden], .kp-preinscription__erreur[hidden], .kp-preinscription [hidden] { display: none; }
.kp-preinscription__succes .kp-coche { width: 40px; height: 40px; background: var(--kp-marine); color: var(--kp-miel); }
.kp-preinscription__succes .kp-coche .kp-icone { width: 20px; height: 20px; }
.kp-preinscription .kp-champ--erreur .kp-input { border-color: var(--kp-erreur); }
.kp-preinscription .kp-muted, .kp-preinscription .kp-label { color: var(--kp-texte-2); }
@media (max-width: 600px) {
  .kp-preinscription__ligne { grid-template-columns: minmax(0, 1fr); }
  .kp-preinscription .kp-btn { width: 100%; }
}

/* Offre fondateur : grand ticket */
.kp-offre-fondateur { --encoche: 22px; position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; border-radius: 28px; background: var(--kp-marine); color: var(--kp-creme);
  -webkit-mask: radial-gradient(circle at 0 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) right / 51% 100% no-repeat;
          mask: radial-gradient(circle at 0 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) left / 51% 100% no-repeat, radial-gradient(circle at 100% 50%, #0000 var(--encoche), #000 calc(var(--encoche) + 0.5px)) right / 51% 100% no-repeat; }
.kp-offre-fondateur__remise { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: clamp(32px, 4vw, 56px); background: var(--kp-miel); color: var(--kp-marine); }
.kp-offre-fondateur__montant { font-family: var(--kp-police-titre); font-weight: 800; font-size: clamp(76px, 10vw, 148px); line-height: 0.9; letter-spacing: -0.06em; }
/* Souche miel, talon marine : la paire du brand book. La corail collée au
   miel faisait vibrer les deux couleurs et tassait le contraste du texte. */
.kp-offre-fondateur__corps { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 20px; padding: clamp(32px, 4vw, 56px); border-left: 3px dashed rgba(250, 245, 236, 0.3); }
.kp-offre-fondateur__corps .kp-label { color: var(--kp-miel); }
.kp-offre-fondateur__corps .kp-h2, .kp-offre-fondateur__corps .kp-liste-coches { color: var(--kp-creme); }
.kp-offre-fondateur .kp-liste-coches .kp-coche { background: var(--kp-miel); color: var(--kp-marine); }
.kp-offre-fondateur .kp-jauge { --kp-jauge-piste: rgba(250, 245, 236, 0.22); --kp-jauge-valeur: var(--kp-miel); }
.kp-jauge { display: flex; flex-direction: column; gap: 8px; }
.kp-jauge__piste { height: 14px; overflow: hidden; border-radius: 999px; background: var(--kp-jauge-piste, rgba(30, 42, 71, 0.16)); }
.kp-jauge__valeur { height: 100%; width: var(--progression, 50%); border-radius: 999px; background: var(--kp-jauge-valeur, var(--kp-marine)); }
.kp-jauge__legende { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; font-weight: 600; }
@media (max-width: 900px) {
  .kp-offre-fondateur { --encoche: 16px; grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
  .kp-offre-fondateur__corps { border-left: 0; border-top: 3px dashed rgba(250, 245, 236, 0.3); }
}

/* En-tête de landing */
.kp-entete--landing .kp-entete__barre { gap: 16px; }
.kp-entete--landing .kp-entete__lien { display: inline-flex; }
@media (max-width: 600px) { .kp-entete--landing .kp-entete__lien { display: none; } }

/* Annonce « bientôt » : bandeau de photos et grille d'avantages */
.kp-bandeau-photos { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kp-bandeau-photos .kp-media { aspect-ratio: 3 / 4; }
.kp-bandeau-photos .kp-media:nth-child(even) { transform: translateY(28px); }
.kp-bandeau-photos__nom { position: absolute; left: 10px; bottom: 10px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: var(--kp-creme); font-family: var(--kp-police-titre); font-weight: 800; font-size: 13px; }
@media (max-width: 900px) {
  .kp-bandeau-photos { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(var(--kp-marge) * -1); padding: 0 var(--kp-marge) 32px; }
  .kp-bandeau-photos::-webkit-scrollbar { display: none; }
  .kp-bandeau-photos .kp-media { scroll-snap-align: start; }
}
.kp-avantages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.kp-avantage { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border-radius: var(--kp-rayon-carte); background: var(--kp-surface); }
.kp-avantage .kp-atout__icone { flex: none; }
.kp-avantage__texte { display: flex; flex-direction: column; gap: 4px; }
.kp-avantage--vedette { background: var(--kp-corail); }
.kp-avantage--vedette .kp-atout__icone { background: var(--kp-marine); color: var(--kp-miel); }
.kp-avantage--vedette .kp-muted { color: var(--kp-marine); }
@media (max-width: 900px) { .kp-avantages { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kp-avantages { grid-template-columns: minmax(0, 1fr); } }

/* Formulaire large : quand la capture d'e-mail est l'unique action de l'écran. */
.kp-preinscription--lg { max-width: 660px; padding: 22px; }
.kp-preinscription--lg .kp-input { height: var(--kp-hauteur-lg); font-size: 17px; }
.kp-preinscription--lg .kp-champ__controle > .kp-icone + .kp-input { padding-left: 50px; }

/* --- Landing « rejoindre la liste » -------------------------------------
   Une seule action : l'e-mail. Tout le reste sert à la comprendre.
   L'offre s'annonce dès le héros : badge, éclat corail, et un bandeau
   miel collé au formulaire. Un préinscrit doit voir qu'il gagne quelque
   chose avant d'avoir lu une ligne. */
.kp-rejoindre__hero { max-width: 700px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.kp-rejoindre__intro { max-width: 620px; font-size: var(--kp-taille-texte); }

/* Héros en deux colonnes : l'argumentaire et le formulaire à gauche, le pass
   à droite. On voit ce qu'on reçoit sans avoir à défiler. */
.kp-rejoindre__duo { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(32px, 5vw, 80px); }
.kp-rejoindre__vitrine { display: flex; justify-content: center; }
.kp-rejoindre__vitrine .kp-telephone { --largeur: clamp(238px, 21vw, 300px); transform: rotate(3deg); }
/* Accroche manuscrite : la Caveat porte mal les longues phrases, elle sert
   ici de respiration entre le titre et l'argumentaire. */
.kp-rejoindre__manuscrit { max-width: 18ch; margin: -6px 0 -2px; font-family: var(--kp-police-main); font-weight: 700; font-size: clamp(34px, 3.4vw, 48px); line-height: 1.05; color: var(--kp-blanc); }

/* Enseigne : le badge de l'offre, puis le territoire. */
.kp-rejoindre__enseigne { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.kp-rejoindre__ou { display: inline-flex; align-items: center; gap: 8px; font-family: var(--kp-police-titre); font-weight: 800; font-size: 15px; letter-spacing: 0.02em; text-transform: uppercase; color: var(--kp-creme); }
/* Le drapeau garde sa police système : Manrope n'a pas les emojis. */
.kp-rejoindre__drapeau { font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: 18px; line-height: 1; letter-spacing: 0; }

/* Annonce corail, posée dans l'angle du héros. */
.kp-rejoindre__annonce { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin: 0 0 -4px; transform: rotate(-3deg); }
@media (min-width: 1200px) {
  .kp-rejoindre__annonce { position: absolute; z-index: 2; right: clamp(16px, 4vw, 72px); top: clamp(80px, 9vw, 120px); align-items: flex-end; margin: 0; transform: rotate(-4deg); }
}
.kp-rejoindre__annonce .kp-ticket { --encoche: 10px; height: clamp(54px, 5.2vw, 70px); padding: 0 clamp(26px, 2.8vw, 38px); border-radius: 12px; color: var(--kp-blanc); font-size: clamp(21px, 2.2vw, 29px); box-shadow: 0 12px 32px rgba(30, 42, 71, 0.26); }
/* Le second billet porte une phrase, pas une étiquette : il passe sur deux
   lignes plutôt que de s'étaler et de mordre le titre. */
.kp-rejoindre__annonce .kp-ticket:last-child { height: auto; max-width: min(460px, 100%); padding: 16px clamp(24px, 2.6vw, 34px); font-size: clamp(22px, 2.1vw, 29px); line-height: 1.18; white-space: normal; text-align: left; }

/* Le bloc de capture : l'accroche annonce l'offre juste au-dessus du champ,
   en miel sur la photo. Pas d'aplat derrière le formulaire — la carte
   blanche suffit à le détacher. */
.kp-rejoindre__capture { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; width: 100%; margin-top: 4px; }
.kp-rejoindre__capture-titre { display: flex; align-items: center; gap: 10px; color: var(--kp-miel); font-family: var(--kp-police-titre); font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -0.015em; }
.kp-rejoindre__capture-titre .kp-icone { flex: none; width: 20px; height: 20px; }

/* Bandeau d'aperçu : dire en une seconde de quelles sorties on parle. */
.kp-rejoindre__apercu { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.kp-rejoindre__vignette { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.kp-rejoindre__vignette .kp-media { border-radius: var(--kp-rayon-bloc); }
.kp-rejoindre__vignette figcaption { font-size: var(--kp-taille-xs); font-weight: 600; color: var(--kp-texte-2); }

/* L'offre : panneau marine, photo à droite avec le badge de l'offre. */
.kp-rejoindre__offre { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; gap: clamp(28px, 4vw, 64px); padding: clamp(32px, 4vw, 64px); border-radius: var(--kp-rayon-carte); background: var(--kp-marine); color: var(--kp-creme); }
.kp-rejoindre__offre .kp-lead, .kp-rejoindre__offre .kp-xs { color: rgba(250, 245, 236, 0.86); }
.kp-rejoindre__condition { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; border-radius: var(--kp-rayon-bloc); background: rgba(250, 245, 236, 0.1); font-size: var(--kp-taille-sm); }
.kp-rejoindre__condition .kp-icone { flex: none; width: 20px; height: 20px; color: var(--kp-miel); }
.kp-rejoindre__photo { border-radius: var(--kp-rayon-bloc); }

.kp-rejoindre__final { max-width: 720px; display: flex; flex-direction: column; gap: 16px; align-items: center; }
.kp-rejoindre__final .kp-pile { margin-top: 10px; align-items: center; }

@media (max-width: 900px) {
  /* Mobile : billet droit, centré, à la même taille que sur grand écran. */
  .kp-rejoindre__annonce { gap: 10px; align-self: stretch; align-items: center; transform: none; }
  .kp-rejoindre__annonce .kp-ticket { --encoche: 8px; height: 52px; padding: 0 24px; font-size: 21px; }
  .kp-rejoindre__annonce .kp-ticket:last-child { max-width: 100%; font-size: 29px; text-align: center; }
  .kp-rejoindre__hero { max-width: none; }
  /* Mobile : une colonne, le pass sous le formulaire — l'e-mail reste
     l'élément haut de l'écran. */
  .kp-rejoindre__duo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kp-rejoindre__vitrine .kp-telephone { --largeur: min(250px, 66vw); transform: rotate(2deg); }
  .kp-rejoindre__apercu { grid-template-columns: repeat(5, 46%); overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--kp-marge) * -1); padding-inline: var(--kp-marge); scroll-snap-type: x mandatory; }
  .kp-rejoindre__apercu::-webkit-scrollbar { display: none; }
  .kp-rejoindre__vignette { scroll-snap-align: start; }
  .kp-rejoindre__offre { grid-template-columns: minmax(0, 1fr); }
  .kp-rejoindre__photo { order: -1; }
}
@media (max-width: 600px) {
  .kp-rejoindre__enseigne > span { font-size: 13px; }
  .kp-rejoindre__capture-titre { font-size: 15px; }
  .kp-rejoindre__annonce .kp-ticket { --encoche: 7px; height: 44px; padding: 0 18px; font-size: 17px; }
  .kp-rejoindre__annonce .kp-ticket:last-child { padding: 16px 22px; font-size: 29px; }
}

/* Landing de préinscription (rejoindre-2) : en-tête épuré, téléphone droit,
   points de l'intro, catalogue dans le téléphone, règles mobile. */
.kp-entete--landing .kp-entete__mention { margin-right: auto; padding-left: 0; text-transform: none; font-size: 15px; letter-spacing: 0; }
@media (max-width: 900px) { .kp-entete--landing .kp-entete__mention > span:last-child { display: inline; } }
/* Téléphone droit, en grand, dont on ne voit que le haut : la colonne le rogne. */
.kp-rejoindre__vitrine--droit { align-self: end; align-items: flex-end; margin-bottom: calc(-1 * clamp(40px, 6vw, 88px)); }
.kp-rejoindre__vitrine--droit .kp-telephone { --largeur: clamp(320px, 28vw, 400px); transform: translateY(var(--remonte, 38%)); will-change: transform; }
@media (prefers-reduced-motion: reduce) { .kp-rejoindre__vitrine--droit .kp-telephone { transform: translateY(32%); } }
@media (max-width: 900px) {
  .kp-rejoindre__vitrine--droit { align-self: auto; align-items: flex-start; height: 280px; overflow: hidden; padding-top: 0; margin-bottom: -40px; }
  .kp-rejoindre__vitrine--droit .kp-telephone { --largeur: min(340px, 84vw); transform: none; }
}
.kp-rejoindre__points { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: var(--kp-taille-texte); }
.kp-rejoindre__points li { display: flex; align-items: center; gap: 10px; }
.kp-rejoindre__points li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--kp-miel); }
.kp-telephone__filtres { display: flex; gap: 0.4em; overflow: hidden; }
.kp-telephone__filtre { flex: none; height: 1.9em; padding: 0 0.7em; border-radius: 999px; box-shadow: inset 0 0 0 1.5px var(--kp-ligne); font-size: 0.74em; font-weight: 600; line-height: 1.9em; white-space: nowrap; }
.kp-telephone__filtre--actif { background: var(--kp-marine); color: var(--kp-creme); box-shadow: none; }
.kp-telephone__liste { display: flex; flex-direction: column; gap: 0.5em; }
.kp-pied--marine .kp-pied__signature { color: var(--kp-blanc); }
@media (max-width: 600px) {
  .kp-page--conversion .kp-barre-promo__barre { min-height: 40px; padding-block: 6px; font-size: 13px; }
  .kp-page--conversion .kp-btn--primaire { width: 100%; }
  .kp-page--conversion .kp-rejoindre__hero { align-items: center; }
  .kp-page--conversion .kp-rejoindre__hero { text-align: center; }
  .kp-page--conversion .kp-rejoindre__hero > * { align-self: stretch; }
  .kp-page--conversion .kp-rejoindre__enseigne { justify-content: center; }
  /* Sur mobile, un simple badge pilule, sans encoches ni relief. */
  .kp-page--conversion .kp-rejoindre__enseigne .kp-ticket { --encoche: 0px; height: 30px; padding: 0 14px; border-radius: 999px; font-size: 13px; box-shadow: none; mask: none; -webkit-mask: none; clip-path: none; }
  .kp-page--conversion .kp-rejoindre__points { align-items: flex-start; text-align: left; }
  .kp-page--conversion .kp-rejoindre__capture { margin-top: 0; }
  /* La suite du hero, en section blanche : texte marine, téléphone collé en bas. */
  .kp-page--conversion .kp-rejoindre__suite { padding-block: 40px 0; }
  .kp-page--conversion .kp-rejoindre__suite .kp-rejoindre__hero { gap: 16px; align-items: center; text-align: center; }
  .kp-page--conversion .kp-rejoindre__suite .kp-rejoindre__intro { font-size: var(--kp-taille-texte); }
  .kp-page--conversion .kp-rejoindre__suite .kp-rejoindre__vitrine--droit { margin-bottom: 0; }
  .kp-page--conversion .kp-rejoindre__hero { gap: 14px; }
  .kp-page--conversion .kp-fond > .kp-conteneur { padding-block: 28px 40px; }
  .kp-page--conversion .kp-preinscription__titre { font-size: 15px; }
  .kp-page--conversion .kp-barre-conversion { display: none; }
  .kp-page--conversion .kp-rejoindre__hero .kp-encart { align-items: center; }
  .kp-page--conversion .kp-rejoindre__hero .kp-preinscription { text-align: center; }
  .kp-page--conversion .kp-rejoindre__hero .kp-champ__label { text-align: left; }
  .kp-page--conversion h1, .kp-page--conversion h2 { text-align: center; }
  .kp-page--conversion .kp-offre-fondateur__corps h2 { text-align: left; }
  .kp-page--conversion .kp-intro { align-items: stretch; }
  .kp-page--conversion .kp-preinscription__rassurance { justify-content: center; }
  .kp-page--conversion .kp-rejoindre__final .kp-preinscription__rassurance { justify-content: center; }
}

/* Bloc de l'offre de lancement : l'économie en francs, centrée. */
.kp-page--conversion .kp-offre-fondateur__remise { align-items: center; text-align: center; }
.kp-offre-fondateur__note { font-size: var(--kp-taille-xs); line-height: 1.45; text-align: center; opacity: 0.8; }
.kp-page--conversion .kp-rejoindre__titre { font-size: clamp(38px, 4.8vw, 66px); color: var(--kp-blanc); }
.kp-page--conversion .kp-rejoindre__capture { padding-bottom: 20px; }
.kp-page--conversion .kp-barre-promo__barre { font-weight: 400; }
.kp-page--conversion .kp-barre-promo__barre strong { font-weight: 700; }
.kp-page--conversion .kp-rejoindre__enseigne { margin-bottom: -8px; }
.kp-page--conversion .kp-rejoindre__titre { margin-bottom: 4px; }
@media (max-width: 600px) { .kp-page--conversion .kp-rejoindre__titre { margin-bottom: 12px; } }
@media (max-width: 600px) {
  .kp-page--conversion .kp-entete--landing .kp-entete__barre { justify-content: center; gap: 12px; }
  .kp-page--conversion .kp-entete--landing .kp-entete__mention { margin-right: 0; }
}
.kp-contents { display: contents; }
/* Mobile : l'offre visible dès le premier écran, sous le titre. */
.kp-rejoindre__offre-mobile { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--kp-miel); color: var(--kp-marine); text-align: center; line-height: 1.3; }
.kp-rejoindre__offre-mobile strong { font-family: var(--kp-police-titre); font-weight: 800; font-size: 16px; letter-spacing: -0.01em; }
.kp-rejoindre__offre-mobile span { font-size: 13px; }
.kp-rejoindre__offre-mobile span strong { font-family: inherit; font-size: inherit; font-weight: 700; }
@media (max-width: 600px) { .kp-page--conversion .kp-rejoindre__offre-mobile { align-self: stretch; } }
/* Sections plus aérées sur la landing, sauf la suite du hero mobile (téléphone collé en bas). */
.kp-page--conversion .kp-section:not(.kp-rejoindre__suite) { padding-block: clamp(60px, 8vw, 112px); }
/* Pied de page de la landing : plus de barre collante, donc plus de réserve en bas ; centré sur mobile. */
.kp-page--conversion .kp-pied { padding-bottom: 32px; }
@media (max-width: 900px) {
  .kp-page--conversion .kp-pied .kp-pied__barre { align-items: center; text-align: center; }
  .kp-page--conversion .kp-pied .kp-pied__marque { flex-direction: column; gap: 12px; }
  .kp-page--conversion .kp-pied .kp-pied__separateur { display: none; }
  .kp-page--conversion .kp-pied .kp-pied__liens { justify-content: center; }
}
@media (max-width: 600px) { .kp-page--conversion .kp-rejoindre__centre-mobile { text-align: center; } }
@media (max-width: 600px) { .kp-page--conversion .kp-rejoindre__exemple { --pile: 4px; } .kp-page--conversion .kp-rejoindre__exemple > p:last-child { margin-top: 2px !important; } }
/* Le montant de l'offre tient sur une ligne. */
.kp-page--conversion .kp-offre-fondateur__montant { font-size: clamp(56px, 6.2vw, 84px); white-space: nowrap; }

/* ---- patterns/social.css ---- */
/* Visuels réseaux sociaux : formats fixes en pixels, exportés en PNG. */
.kp-social { position: relative; isolation: isolate; overflow: hidden; flex: none; background: var(--kp-creme); color: var(--kp-marine); font-family: var(--kp-police-texte); }
.kp-social--carre { width: 1080px; height: 1080px; }
.kp-social--portrait { width: 1080px; height: 1350px; }
.kp-social--story { width: 1080px; height: 1920px; }
.kp-social--paysage { width: 1200px; height: 630px; }
.kp-social--couverture { width: 1640px; height: 624px; }
.kp-social__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, center); }
.kp-social__voile { position: absolute; inset: 0; z-index: -1; background: rgba(var(--kp-voile-rgb), var(--voile, 0.45)); }
.kp-social__marge { position: absolute; inset: 72px; display: flex; flex-direction: column; }
.kp-social__titre { font-family: var(--kp-police-titre); font-weight: 800; letter-spacing: -0.045em; line-height: 0.96; text-wrap: balance; }
.kp-social__texte { font-size: 38px; line-height: 1.3; }
.kp-social__label { font-size: 26px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.kp-social__pastille { display: inline-flex; align-items: center; gap: 16px; height: 96px; padding: 0 48px; border-radius: 999px; font-family: var(--kp-police-titre); font-weight: 800; font-size: 38px; letter-spacing: -0.01em; }
.kp-social__pastille .kp-icone { width: 40px; height: 40px; }
.kp-social .kp-logo { font-size: 64px; }
.kp-social .kp-sticker { --encoche: 16px; font-size: 76px; padding: 20px 56px 28px; border-radius: 24px; }
.kp-social .kp-ticket { --encoche: 14px; height: 84px; padding: 0 44px; font-size: 40px; border-radius: 18px; }
.kp-social .kp-telephone .kp-ticket { --encoche: 0.3em; height: 1.6em; padding: 0 0.6em; font-size: 0.78em; border-radius: 6px; }
.kp-social .kp-telephone .kp-logo { font-size: inherit; }
.kp-social .kp-surligne { color: var(--kp-marine); }

/* Planche */
.kp-planche { display: flex; flex-direction: column; gap: 56px; }
.kp-planche__groupe { display: flex; flex-direction: column; gap: 20px; }
.kp-planche__grille { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 28px; }
.kp-planche__item { display: flex; flex-direction: column; gap: 10px; }
.kp-planche__cadre { --s: calc(var(--echelle) * var(--reduction, 1)); overflow: hidden; border-radius: 12px; box-shadow: var(--kp-ombre); width: calc(var(--l) * var(--s)); height: calc(var(--h) * var(--s)); }
.kp-planche__cadre > .kp-social, .kp-planche__cadre > .kp-print { transform: scale(var(--s)); transform-origin: 0 0; }
@media (max-width: 700px) { .kp-planche__cadre { --reduction: 0.5; } .kp-planche__legende { max-width: none !important; } }
.kp-planche__legende { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; font-size: 14px; }
body.kp-export { background: transparent; margin: 0; }
body.kp-export > *:not(.kp-export-scene) { display: none !important; }
.kp-export-scene { position: absolute; left: 0; top: 0; }

/* Supports imprimés : mêmes bases que les visuels sociaux, tailles en px à 96 dpi */
.kp-print { position: relative; isolation: isolate; overflow: hidden; flex: none; background: var(--kp-creme); color: var(--kp-marine); font-family: var(--kp-police-texte); }
.kp-print__image { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--cadrage, center); }
.kp-print__titre { font-family: var(--kp-police-titre); font-weight: 800; letter-spacing: -0.045em; line-height: 0.96; text-wrap: balance; }
.kp-print__texte { line-height: 1.4; }
.kp-print__label { font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.kp-print__qr { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.kp-print__qr-code { padding: 6%; border-radius: 10%; background: var(--kp-surface); color: var(--kp-marine); }
.kp-print__qr-code svg { display: block; width: 100%; height: 100%; }
.kp-print__lignes { background-image: linear-gradient(transparent calc(100% - 1px), var(--kp-ligne) 0); }
.kp-print .kp-eclat { transform: rotate(-12deg); }

/* Campagne de préinscription. Les mesures sont celles du fichier exporté,
   indépendantes de la taille de la vignette de la planche. */
.kp-annonce { --annonce-fond: var(--kp-creme); --annonce-accent: var(--kp-corail); --annonce-marge: 56px; background: var(--annonce-fond); color: var(--kp-marine); }
.kp-annonce p, .kp-annonce h2 { margin: 0; }
.kp-annonce__entete { position: absolute; z-index: 2; top: 48px; left: var(--annonce-marge); right: var(--annonce-marge); display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.kp-annonce .kp-logo { --kp-logo-h: 45px; }
.kp-annonce__territoire { font-size: 25px; font-weight: 650; }
.kp-annonce__photo { position: absolute; overflow: hidden; border-radius: 28px; inset: 132px 32px auto; height: 360px; background: var(--kp-sable); }
.kp-annonce__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kp-annonce__photo-note { display: none; }
.kp-annonce__contenu { position: absolute; left: var(--annonce-marge); right: var(--annonce-marge); top: 526px; bottom: 203px; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }
.kp-annonce__contexte { font-size: 27px; line-height: 1.2; font-weight: 750; letter-spacing: 0.015em; }
.kp-annonce__contexte::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: currentColor; margin-right: 12px; vertical-align: 3px; }
.kp-annonce__titre { font-family: var(--kp-police-titre); font-size: 76px; line-height: 1; font-weight: 800; letter-spacing: -0.047em; text-wrap: pretty; margin-top: 18px !important; }
.kp-annonce__titre em { font-style: normal; }
.kp-annonce__texte { font-size: 29px; line-height: 1.3; max-width: 900px; margin-top: 20px !important; }
.kp-annonce--bas .kp-annonce__texte { display: none; }
.kp-annonce__offre { padding-top: 18px; border-top: 2px solid currentColor; display: flex; flex-direction: column; gap: 5px; font-size: 24px; line-height: 1.3; }
.kp-annonce__offre strong { font-size: 32px; font-weight: 800; letter-spacing: -0.025em; }
.kp-annonce__offre s { white-space: nowrap; }
.kp-annonce__action { position: absolute; left: var(--annonce-marge); right: var(--annonce-marge); bottom: 48px; display: flex; flex-direction: column; align-items: flex-start; gap: 15px; }
.kp-annonce__cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 40px; padding: 25px 34px; border-radius: 18px; color: var(--kp-marine); background: var(--kp-miel); font-family: var(--kp-police-titre); font-size: 34px; font-weight: 800; letter-spacing: -0.02em; text-decoration: none; line-height: 1.2; white-space: nowrap; }
.kp-annonce__cta .kp-icone { width: 36px; height: 36px; flex: none; }
.kp-annonce__cta:focus-visible { outline: 5px solid currentColor; outline-offset: 6px; }
.kp-annonce__rassurance { font-size: 25px; line-height: 1.3; }
.kp-annonce__prix { padding: 30px 34px; border-radius: 24px; background: var(--kp-miel); color: var(--kp-marine); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.kp-annonce__prix-label { font-size: 26px; font-weight: 700; }
.kp-annonce__prix strong { font-family: var(--kp-police-titre); font-size: 116px; letter-spacing: -0.06em; line-height: 1; white-space: nowrap; }
.kp-annonce__prix-detail { font-size: 25px; line-height: 1.3; }
.kp-annonce__places { font-size: 24px; font-weight: 750; border-top: 1px solid var(--kp-marine); width: 100%; padding-top: 14px; margin-top: 6px; }

/* Photo à droite et bloc éditorial à gauche. */
.kp-annonce--gauche .kp-annonce__photo { inset: 132px 32px 220px auto; width: 38%; height: auto; }
.kp-annonce--gauche .kp-annonce__contenu { top: 158px; right: 44%; bottom: 227px; }
.kp-annonce--gauche .kp-annonce__titre { font-size: 74px; }
.kp-annonce--gauche .kp-annonce__contexte { max-width: 440px; }
.kp-annonce--gauche .kp-annonce__titre em { color: var(--kp-marine); background: var(--kp-miel); box-shadow: 8px 0 var(--kp-miel), -3px 0 var(--kp-miel); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.kp-annonce--gauche .kp-annonce__texte { font-size: 28px; }
.kp-annonce--gauche .kp-annonce__offre { font-size: 23px; }
.kp-annonce--gauche .kp-annonce__offre strong { font-size: 29px; }

/* Carte tarif + photo, sans comparaison fictive de billets partenaires. */
.kp-annonce--carte .kp-annonce__photo { inset: 132px 32px auto; height: 380px; }
.kp-annonce--carte .kp-annonce__contenu { top: 546px; flex-direction: row; align-items: flex-start; gap: 28px; }
.kp-annonce--carte .kp-annonce__message { flex: 1; min-width: 0; }
.kp-annonce--carte .kp-annonce__titre { font-size: 65px; }
.kp-annonce--carte .kp-annonce__texte { display: none; }
.kp-annonce--carte .kp-annonce__prix { width: 435px; flex: none; }
.kp-annonce--carte .kp-annonce__prix strong { font-size: 98px; }

/* Affiche à dominante typographique. */
.kp-annonce--plat .kp-annonce__contenu { top: 198px; bottom: 225px; }
.kp-annonce--plat .kp-annonce__titre { font-size: 103px; line-height: 1.03; }
.kp-annonce--plat .kp-annonce__titre em { color: inherit; }
.kp-annonce--plat .kp-annonce__cta { background: var(--kp-marine); color: var(--kp-creme); }
.kp-annonce--sombre { color: var(--kp-creme); }
.kp-annonce--sombre .kp-annonce__titre em { color: var(--kp-miel); }
.kp-annonce--sombre .kp-annonce__cta { background: var(--kp-miel); color: var(--kp-marine); }
.kp-annonce--plat.kp-annonce--avec-prix .kp-annonce__titre { font-size: 92px; }
.kp-annonce--plat.kp-annonce--avec-prix .kp-annonce__texte { display: none; }
.kp-annonce--plat .kp-annonce__prix { background: var(--kp-creme); flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 24px; }
.kp-annonce--plat .kp-annonce__prix-label { width: 100%; }
.kp-annonce--plat .kp-annonce__prix strong { font-size: 106px; }
.kp-annonce--plat .kp-annonce__prix-detail { margin-left: auto; }

/* Composition photo pleine largeur en haut, texte sur un panneau marine. */
.kp-annonce--coches { background: var(--kp-marine); color: var(--kp-creme); }
.kp-annonce--coches .kp-logo { --kp-logo-encre: var(--kp-creme); }
.kp-annonce--coches .kp-annonce__photo { border-radius: 120px 24px 24px 24px; height: 310px; }
.kp-annonce--coches .kp-annonce__contenu { top: 476px; }
.kp-annonce--coches .kp-annonce__texte { display: none; }
.kp-annonce--coches .kp-annonce__titre em { color: var(--kp-miel); }

/* Portrait : garder une vraie place aux familles photographiées. */
.kp-annonce--portrait .kp-annonce__photo { height: 540px; }
.kp-annonce--portrait .kp-annonce__contenu { top: 706px; }
.kp-annonce--portrait .kp-annonce__titre { font-size: 90px; }
.kp-annonce--portrait.kp-annonce--plat .kp-annonce__contenu { top: 230px; }
.kp-annonce--portrait.kp-annonce--plat .kp-annonce__titre { font-size: 110px; }
.kp-annonce--portrait.kp-annonce--plat .kp-annonce__texte { font-size: 37px; margin-top: 34px !important; }
.kp-annonce--portrait.kp-annonce--plat .kp-annonce__prix { padding: 40px; }
.kp-annonce--portrait.kp-annonce--carte .kp-annonce__titre { font-size: 78px; }
.kp-annonce--portrait.kp-annonce--coches .kp-annonce__texte { display: block; }
.kp-annonce--portrait.kp-annonce--gauche .kp-annonce__contenu { top: 190px; }
.kp-annonce--portrait.kp-annonce--gauche .kp-annonce__photo { height: auto; }

/* Stories : titre, contexte, tarif et CTA hors des zones d’interface. */
.kp-annonce--story .kp-annonce__entete { top: 180px; }
.kp-annonce--story .kp-annonce__photo { top: 280px; height: 690px; border-radius: 36px; }
.kp-annonce--story .kp-annonce__contenu { top: 1010px; bottom: 460px; }
.kp-annonce--story .kp-annonce__titre { font-size: 102px; }
.kp-annonce--story .kp-annonce__contexte { font-size: 31px; }
.kp-annonce--story .kp-annonce__offre { font-size: 28px; gap: 7px; padding-top: 24px; }
.kp-annonce--story .kp-annonce__offre strong { font-size: 38px; }
.kp-annonce--story .kp-annonce__action { bottom: 285px; gap: 22px; }
.kp-annonce--story .kp-annonce__cta { width: 100%; font-size: 40px; padding: 30px 38px; }
.kp-annonce--story .kp-annonce__rassurance { font-size: 29px; }
.kp-annonce--story.kp-annonce--carte .kp-annonce__photo { height: 570px; }
.kp-annonce--story.kp-annonce--carte .kp-annonce__contenu { top: 900px; flex-direction: column; }
.kp-annonce--story.kp-annonce--carte .kp-annonce__titre { font-size: 94px; }
.kp-annonce--story.kp-annonce--carte .kp-annonce__prix { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 26px; }
.kp-annonce--story.kp-annonce--carte .kp-annonce__prix-label { width: 100%; }
.kp-annonce--story.kp-annonce--carte .kp-annonce__prix-detail { margin-left: auto; font-size: 29px; }
.kp-annonce--story.kp-annonce--plat .kp-annonce__contenu { top: 400px; bottom: 500px; }
.kp-annonce--story.kp-annonce--plat .kp-annonce__titre { font-size: 128px; }
.kp-annonce--story.kp-annonce--plat .kp-annonce__texte { display: block; font-size: 42px; line-height: 1.35; margin-top: 42px !important; }
.kp-annonce--story.kp-annonce--plat .kp-annonce__prix { padding: 42px; }

/* Facebook 1,91:1 : lisibilité et hiérarchie propres au format horizontal. */
.kp-annonce--lien { --annonce-marge: 40px; }
.kp-annonce--lien .kp-annonce__entete { top: 32px; }
.kp-annonce--lien .kp-logo { --kp-logo-h: 34px; }
.kp-annonce--lien .kp-annonce__territoire { font-size: 20px; }
.kp-annonce--lien .kp-annonce__photo { inset: 96px 24px 24px auto; width: 37%; height: auto; border-radius: 20px 90px 20px 20px; }
.kp-annonce--lien .kp-annonce__contenu { top: 110px; right: 43%; bottom: 169px; gap: 18px; }
.kp-annonce--lien .kp-annonce__contexte { font-size: 23px; max-width: none; }
.kp-annonce--lien .kp-annonce__contexte::before { width: 9px; height: 9px; margin-right: 9px; }
.kp-annonce--lien .kp-annonce__titre { font-size: 53px; margin-top: 14px !important; }
.kp-annonce--lien .kp-annonce__texte { display: none; }
.kp-annonce--lien .kp-annonce__offre { font-size: 20px; padding-top: 12px; gap: 3px; }
.kp-annonce--lien .kp-annonce__offre strong { font-size: 26px; }
.kp-annonce--lien .kp-annonce__action { bottom: 34px; right: 42%; gap: 13px; }
.kp-annonce--lien .kp-annonce__cta { font-size: 27px; padding: 18px 24px; gap: 28px; border-radius: 14px; }
.kp-annonce--lien .kp-annonce__cta .kp-icone { width: 28px; height: 28px; }
.kp-annonce--lien .kp-annonce__rassurance { font-size: 21px; }
.kp-annonce--lien.kp-annonce--plat .kp-annonce__contenu { right: 40px; }
.kp-annonce--lien.kp-annonce--plat .kp-annonce__message { max-width: 680px; }
.kp-annonce--lien.kp-annonce--plat .kp-annonce__titre { font-size: 60px; }
.kp-annonce--lien.kp-annonce--plat .kp-annonce__offre { width: 680px; }
.kp-annonce--lien.kp-annonce--avec-prix .kp-annonce__contenu { right: 40px; flex-direction: row; }
.kp-annonce--lien.kp-annonce--avec-prix .kp-annonce__message { width: 650px; flex: none; }
.kp-annonce--lien.kp-annonce--avec-prix .kp-annonce__prix { width: 390px; flex-direction: column; padding: 25px; gap: 10px; }
.kp-annonce--lien.kp-annonce--avec-prix .kp-annonce__prix strong { font-size: 84px; }
.kp-annonce--lien.kp-annonce--avec-prix .kp-annonce__prix-label, .kp-annonce--lien.kp-annonce--avec-prix .kp-annonce__places { font-size: 21px; }
.kp-annonce--lien.kp-annonce--avec-prix .kp-annonce__prix-detail { margin-left: 0; font-size: 23px; }
.kp-annonce--lien.kp-annonce--carte .kp-annonce__photo { inset: 96px 24px 24px auto; }
.kp-annonce--lien.kp-annonce--carte .kp-annonce__prix { background: var(--kp-miel); margin-top: 32px; }
.kp-annonce--lien.kp-annonce--carte .kp-annonce__message { width: 640px; }

/* Les liens et textes de diffusion restent hors du PNG. */
.kp-annonce--carre.kp-annonce--bas .kp-annonce__photo { height: 288px; }
.kp-annonce--carre.kp-annonce--bas .kp-annonce__contenu { top: 452px; }
.kp-annonce--carre.kp-annonce--bas .kp-annonce__titre { font-size: 74px; }
.kp-annonce--carre.kp-annonce--gauche .kp-annonce__titre { font-size: 68px; }
.kp-annonce--carre.kp-annonce--gauche .kp-annonce__texte { display: none; }
.kp-annonce--carre.kp-annonce--plat .kp-annonce__titre { font-size: 92px; }
.kp-annonce--carre.kp-annonce--coches .kp-annonce__photo { height: 284px; }
.kp-annonce--carre.kp-annonce--coches .kp-annonce__contenu { top: 450px; }
.kp-annonce--portrait .kp-annonce__photo { height: 500px; }
.kp-annonce--portrait .kp-annonce__contenu { top: 666px; }
.kp-annonce--portrait.kp-annonce--coches .kp-annonce__photo { height: 420px; }
.kp-annonce--portrait.kp-annonce--coches .kp-annonce__contenu { top: 586px; }
.kp-annonce--portrait.kp-annonce--coches .kp-annonce__titre { font-size: 84px; }
.kp-annonce--story .kp-annonce__photo { height: 600px; }
.kp-annonce--story .kp-annonce__contenu { top: 920px; }
.kp-annonce--story .kp-annonce__titre { font-size: 96px; }
.kp-annonce--story.kp-annonce--carte .kp-annonce__photo { height: 470px; }
.kp-annonce--story.kp-annonce--carte .kp-annonce__contenu { top: 800px; }
.kp-planche__campagne { width: 100%; font-size: 14px; line-height: 1.5; }
.kp-planche__campagne summary { cursor: pointer; font-weight: 650; }
.kp-planche__campagne p { margin-top: 10px; }
.kp-planche__destination { display: block; margin-top: 10px; }

/* ---- patterns/documentation.css ---- */
/* Documentation du design system : sommaire collant, exemples, code. */
.kp-doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }
.kp-doc__sommaire { position: sticky; top: calc(var(--kp-entete) + 16px); max-height: calc(100vh - var(--kp-entete) - 32px); overflow-y: auto; display: flex; flex-direction: column; gap: 18px; padding-right: 8px; font-size: 14px; }
.kp-doc__sommaire ul { display: flex; flex-direction: column; gap: 2px; list-style: none; margin: 0; padding: 0; }
.kp-doc__sommaire a { display: block; padding: 5px 10px; border-radius: var(--kp-rayon-petit); color: var(--kp-texte-2); }
.kp-doc__sommaire a:hover { background: var(--kp-sable); color: var(--kp-marine); }
.kp-doc__contenu { display: flex; flex-direction: column; gap: 72px; min-width: 0; }
.kp-doc__section { display: flex; flex-direction: column; gap: 20px; scroll-margin-top: calc(var(--kp-entete) + 24px); }
.kp-doc__section > header { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.kp-doc__regles { display: flex; flex-direction: column; gap: 6px; margin: 0; padding-left: 20px; font-size: 15px; color: var(--kp-texte-2); }
.kp-doc__exemple { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; padding: clamp(20px, 3vw, 36px); border-radius: var(--kp-rayon-carte) var(--kp-rayon-carte) 0 0; background: var(--kp-surface); }
.kp-doc__exemple--creme { background: var(--kp-creme); box-shadow: inset 0 0 0 1.5px var(--kp-bordure); }
.kp-doc__exemple--marine { background: var(--kp-marine); }
.kp-doc__exemple--pile { flex-direction: column; align-items: stretch; }
.kp-doc__code { position: relative; margin: 0; border-radius: 0 0 var(--kp-rayon-carte) var(--kp-rayon-carte); background: #141C33; color: #E7EAF2; }
.kp-doc__code pre { margin: 0; padding: 20px 24px; overflow-x: auto; font-size: 13px; line-height: 1.6; tab-size: 2; }
.kp-doc__code .kp-doc__appel { display: block; padding: 12px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); color: var(--kp-miel); font-size: 13px; overflow-x: auto; white-space: pre; }
.kp-doc__copier { position: absolute; right: 12px; top: 10px; height: 32px; padding: 0 14px; border: 0; border-radius: 999px; background: rgba(255,255,255,0.1); color: #E7EAF2; font-size: 12px; font-weight: 600; cursor: pointer; }
.kp-doc__copier:hover { background: rgba(255,255,255,0.18); }
.kp-doc__tokens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 16px; }
.kp-doc__token { display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.kp-doc__pastille { height: 88px; border-radius: var(--kp-rayon-bloc); box-shadow: inset 0 0 0 1.5px rgba(30, 42, 71,0.08); }
.kp-doc__var { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--kp-texte-2); }
.kp-doc__echelle { display: flex; flex-direction: column; }
.kp-doc__echelle > div { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 16px 0; border-top: 1.5px solid var(--kp-bordure); }
.kp-doc__icones { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; }
.kp-doc__icones > div { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: var(--kp-rayon-bloc); background: var(--kp-surface); font-size: 12px; color: var(--kp-texte-2); }
.kp-doc__icones .kp-icone { width: 24px; height: 24px; color: var(--kp-marine); }
.kp-doc__espace { display: flex; align-items: center; gap: 16px; font-size: 13px; }
.kp-doc__espace span:first-child { height: 20px; background: var(--kp-miel); border-radius: 4px; }
@media (max-width: 900px) {
  .kp-doc { grid-template-columns: minmax(0, 1fr); }
  .kp-doc__sommaire { position: static; max-height: none; display: none; }
  .kp-doc__echelle > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}

/* Aperçu du menu mobile dans la documentation : un cadre de téléphone, pour
   montrer un tiroir plein écran sans ouvrir de tiroir plein écran. */
.kp-doc__telephone { position: relative; width: 100%; max-width: 380px; height: 620px; overflow: hidden; border-radius: 28px; background: var(--kp-creme); box-shadow: 0 0 0 1.5px var(--kp-bordure), var(--kp-ombre); }
.kp-menu--apercu { position: absolute; inset: 0; display: flex; flex-direction: column; animation: none; }
.kp-menu--apercu .kp-menu__pied { padding-bottom: 16px; }

/* ---- patterns/builder.css ---- */
/* Catalogue de blocs : index collant, barre de variante, rendu pleine largeur, code. */
.kp-builder__index { position: sticky; top: var(--kp-entete); z-index: 15; padding-block: 12px; border-block: 1.5px solid var(--kp-bordure); background: rgba(250, 245, 236, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.kp-builder__index .kp-chip { height: 36px; font-size: 13px; }
.kp-builder__categorie { display: flex; flex-direction: column; gap: 56px; scroll-margin-top: calc(var(--kp-entete) + 72px); }
.kp-builder__bloc { display: flex; flex-direction: column; gap: 32px; scroll-margin-top: calc(var(--kp-entete) + 72px); }
.kp-builder__variante { display: flex; flex-direction: column; }
.kp-builder__barre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-block: 12px; }
.kp-builder__nom { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; }
.kp-builder__id { padding: 3px 8px; border-radius: 6px; background: var(--kp-sable); color: var(--kp-texte-2); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.kp-builder__rendu { position: relative; overflow-x: clip; border-block: 1.5px dashed var(--kp-marine-40); background: var(--kp-fond); }
.kp-builder__rendu .kp-entete { position: relative; }
.kp-builder__code { margin-top: 12px; }
.kp-builder__code > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-weight: 600; font-size: 14px; list-style: none; }
.kp-builder__code > summary::-webkit-details-marker { display: none; }
.kp-builder__code > summary .kp-icone { width: 16px; height: 16px; transition: transform var(--kp-duree); }
.kp-builder__code[open] > summary .kp-icone { transform: rotate(180deg); }
.kp-builder__code .kp-doc__code { margin-top: 12px; border-radius: var(--kp-rayon-bloc); }
.kp-builder__code pre { max-height: 460px; }