/* Page unique de kelosia.fr (site/_landing) : complète kelosia.css, uniquement avec ses jetons.
   Le rythme vient de l'alternance des fonds et des mises en page, pas d'animations. */

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
[id] { scroll-margin-top: 80px; } /* sous l'en-tête collant */

/* ---------- En-tête ---------- */
.une-page .entete .bouton { background: transparent; color: var(--k-anthracite); border-color: var(--k-anthracite); }
.une-page .entete .bouton:hover { background: var(--k-greige); }

/* ---------- Bouton sombre (l'accent prune est pris par le cercle) ---------- */
.bouton--sombre { background: var(--k-anthracite); border-color: var(--k-anthracite); }
.bouton--sombre:hover { background: var(--k-texte-2); border-color: var(--k-texte-2); }

/* ---------- Sur fond sombre ---------- */
.fond-sombre { background: var(--k-anthracite); color: var(--k-greige); }
.fond-sombre h2, .fond-sombre h3 { color: var(--k-blanc-casse); }
.fond-sombre .surtitre { color: var(--k-greige); }
.fond-sombre .surtitre::before { background: var(--k-prune-eclaircie); }
.fond-sombre .titre-fort::after { color: var(--k-prune-eclaircie); }
.fond-sombre :focus-visible { outline-color: var(--k-prune-eclaircie); }

/* ---------- 1. Accroche ---------- */
/* Page de garde et démarche : la hauteur d'un écran, sous l'en-tête */
.ouverture, .demarche { min-height: calc(100svh - 73px); display: flex; align-items: center; }
.ouverture > .conteneur, .demarche > .conteneur { width: 100%; }
.section.ouverture, .section.demarche { padding: var(--k-space-8) 0; }
.ouverture h1 { font-size: clamp(3rem, 9vw, 7rem); letter-spacing: -0.05em; line-height: 0.95; margin-bottom: var(--k-space-4); max-width: 11ch; }
.ouverture .accroche { font-size: clamp(1.25rem, 2.2vw, 1.75rem); max-width: 30ch; margin-bottom: var(--k-space-3); color: var(--k-anthracite); }
.ouverture .texte { color: var(--k-texte-2); margin-bottom: var(--k-space-6); }
.ouverture .boutons { align-items: center; gap: var(--k-space-3); }
.ouverture .lien-suite { color: var(--k-anthracite); text-decoration: underline; text-underline-offset: 5px; }
.ouverture .point-deco { width: clamp(320px, 42vw, 640px); right: calc(-0.28 * clamp(320px, 42vw, 640px)); top: 50%; transform: translateY(-50%); }

/* ---------- 2. L'enjeu ---------- */
/* Sur ordinateur : deux colonnes, la section tient sur un écran */
.enjeu h2 { font-size: var(--k-h2); max-width: 16ch; margin-bottom: var(--k-space-4); }
.enjeu .intro { font-size: var(--k-accroche); color: var(--k-greige); max-width: 36ch; margin-bottom: var(--k-space-6); }
.enjeu-grille { display: grid; gap: 0 var(--k-space-8); align-items: center; }
@media (min-width: 900px) {
  .enjeu { padding: var(--k-space-8) 0; }
  .enjeu-grille { grid-template-columns: 5fr 7fr; }
  .enjeu .intro { margin-bottom: 0; }
}
.bascule-temps { list-style: none; padding: 0; margin: 0 0 var(--k-space-4); }
.bascule-temps li { display: grid; gap: var(--k-space-1) var(--k-space-6); padding: var(--k-space-3) 0; border-top: 1px solid var(--k-texte-2); }
.bascule-temps li:last-child { border-bottom: 1px solid var(--k-texte-2); }
@media (min-width: 900px) { .bascule-temps li { grid-template-columns: 1fr 1fr; gap: var(--k-space-1) var(--k-space-4); } }
.bascule-temps .moment { display: block; font-size: var(--k-libelle); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.bascule-temps .avant { color: var(--k-greige); }
.bascule-temps .avant .moment { color: var(--k-greige); }
.bascule-temps .apres { color: var(--k-blanc-casse); font-weight: 600; }
.bascule-temps .apres .moment { color: var(--k-prune-eclaircie); }
.enjeu .conclusion { font-family: var(--k-font-titre); font-weight: 600; font-size: var(--k-h3); line-height: 1.2; letter-spacing: -0.02em; color: var(--k-blanc-casse); max-width: 30ch; margin: 0; }

/* ---------- 2 bis. Avant d'acheter ---------- */
/* Mobile : constat, signes, réponse. Ordinateur : constat et réponse à gauche, signes à droite. */
.achat-grille { display: grid; gap: var(--k-space-6); }
@media (min-width: 900px) {
  .achat-grille { grid-template-columns: 7fr 5fr; grid-template-areas: "constat signes" "reponse signes"; gap: var(--k-space-4) var(--k-space-8); }
  .achat-constat { grid-area: constat; }
  .achat-reponse { grid-area: reponse; }
  .signes { grid-area: signes; align-self: center; }
}
.achat h2 { max-width: 16ch; }
.achat .accroche { margin-bottom: 0; }
.achat h3 { font-size: var(--k-accroche); }
.achat .texte { color: var(--k-texte-2); margin-bottom: var(--k-space-4); }
.signes { padding: var(--k-space-6) var(--k-space-4); border-top: 3px solid var(--k-anthracite); }
.signes h3 { margin-bottom: var(--k-space-3); }
.signes .liste li { margin-bottom: var(--k-space-2); }

/* ---------- 3. Notre rôle ---------- */
.role h2 { max-width: 18ch; }
.role .colonnes { display: grid; gap: var(--k-space-6); margin: var(--k-space-6) 0; }
@media (min-width: 900px) { .role .colonnes { grid-template-columns: 1fr 1fr; gap: var(--k-space-8); } }
.role h3 { font-size: var(--k-accroche); padding-bottom: var(--k-space-2); border-bottom: 1px solid var(--k-anthracite); }
.role .non h3 { color: var(--k-gris); border-color: var(--k-bordure); }
.role .non li { color: var(--k-gris); text-decoration: line-through; text-decoration-color: var(--k-bordure); }
.role .non .liste li::before { background: transparent; border: 1.5px solid var(--k-bordure); }
.role .synthese { font-family: var(--k-font-titre); font-weight: 600; font-size: var(--k-h3); line-height: 1.2; letter-spacing: -0.02em; max-width: 34ch; margin: 0; }

/* ---------- 4. La démarche ---------- */
.temps { list-style: none; padding: 0; margin: var(--k-space-6) 0 0; display: grid; gap: var(--k-space-6); counter-reset: temps; }
@media (min-width: 900px) { .temps { grid-template-columns: repeat(3, 1fr); gap: var(--k-space-4); } }
.temps li { counter-increment: temps; }
.temps li::before {
  content: counter(temps, decimal-leading-zero);
  display: block; font-family: var(--k-font-titre); font-weight: 700;
  font-size: clamp(4rem, 9vw, 7.5rem); line-height: 0.9; letter-spacing: -0.05em;
  color: var(--k-anthracite); padding-bottom: var(--k-space-2); margin-bottom: var(--k-space-3);
  border-bottom: 1px solid var(--k-anthracite);
}
.temps h3 { font-size: var(--k-h3); }
.temps p { margin: 0; color: var(--k-texte-2); }

/* ---------- 5. Phrase forte ---------- */
.phrase { background: var(--k-prune); padding: var(--k-space-12) 0; }
@media (min-width: 768px) { .phrase { padding: var(--k-space-16) 0; } }
.phrase p { font-family: var(--k-font-titre); font-weight: 700; font-size: clamp(2.25rem, 6vw, 4.75rem); line-height: 1.02; letter-spacing: -0.045em; color: var(--k-blanc-casse); max-width: 18ch; margin: 0; }
.phrase .suite { color: var(--k-lilas); display: block; }

/* ---------- 6. Questions ---------- */
.questions .grille { margin-top: var(--k-space-6); }
.questions .carte { padding: var(--k-space-4); border-top: 3px solid var(--k-anthracite); }
.questions h3 { font-size: var(--k-accroche); }
.questions p { color: var(--k-texte-2); }

/* ---------- 7. Qui vous accompagne ---------- */
.qui .conteneur { display: grid; gap: var(--k-space-6); align-items: center; }
@media (min-width: 900px) { .qui .conteneur { grid-template-columns: 5fr 7fr; gap: var(--k-space-8); } }
.qui img { width: 100%; max-width: 440px; height: auto; margin: 0 auto; display: block; }
.qui h2 { font-size: clamp(1.75rem, 3.4vw, 2.5rem); }
.qui .citation { margin: var(--k-space-3) 0 var(--k-space-4); padding-left: var(--k-space-3); border-left: 3px solid var(--k-anthracite); }
.qui .citation p { font-size: var(--k-accroche); line-height: 1.45; color: var(--k-texte-2); }
.qui .citation p:last-child { margin-bottom: 0; }

/* ---------- 8. Contact et pied de page ---------- */
.contact { padding: var(--k-space-12) 0 var(--k-space-8); }
@media (min-width: 768px) { .contact { padding: var(--k-space-16) 0 var(--k-space-12); } }
.contact h2 { font-size: clamp(2.5rem, 6.5vw, 5rem); max-width: 14ch; }
.contact .texte { color: var(--k-greige); margin-bottom: var(--k-space-6); }
.contact .mel { font-family: var(--k-font-titre); font-weight: 600; font-size: clamp(1.5rem, 4.2vw, 3rem); letter-spacing: -0.03em; line-height: 1.1; margin: 0; overflow-wrap: anywhere; }
.contact .mel a { color: var(--k-blanc-casse); text-decoration: underline; text-decoration-color: var(--k-prune-eclaircie); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.contact .mel a:hover { color: var(--k-prune-eclaircie); }

.mentions { background: var(--k-anthracite); color: var(--k-greige); font-size: var(--k-libelle); line-height: 1.6; padding: var(--k-space-4) 0 var(--k-space-6); }
.mentions .conteneur > div { border-top: 1px solid var(--k-texte-2); padding-top: var(--k-space-4); }
.mentions h2 { color: var(--k-blanc-casse); font-family: var(--k-font-texte); font-size: var(--k-libelle); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; line-height: 1.3; margin: 0 0 var(--k-space-1); }
.mentions p { margin: 0 0 var(--k-space-1); max-width: 900px; }
.mentions a { color: var(--k-blanc-casse); text-decoration: underline; }
.mentions a:hover { color: var(--k-prune-eclaircie); }
.mentions :focus-visible { outline-color: var(--k-prune-eclaircie); }
.mentions .liens { display: flex; flex-wrap: wrap; gap: var(--k-space-1) var(--k-space-4); margin-top: var(--k-space-2); }

/* ---------- Page CGV ---------- */
.page-legale-section { padding: var(--k-space-8) 0 var(--k-space-12); }
.page-legale-section .conteneur { max-width: calc(var(--k-largeur-texte) + 2 * var(--k-marge)); }