/* ============================================================================
   kw-ds-accueil.css — ajustements de la page d'accueil réelle (lot ACCUEIL, 09/10/2026)
   Chargé après kw-ds.css, sur l'accueil migré seulement. Tenu à part de kw-ds.css
   (généré depuis la synthèse par construire.py) pour ne pas être effacé au prochain
   assemblage.
   ============================================================================ */

/* Quatre moyens de paiement et non cinq : Orange Money est retiré tant que sa
   passerelle n'est pas active (décision du 09/10). La grille de la synthèse en
   prévoyait cinq, ce qui laissait une colonne vide. */
.kw-ds .moyens.kw-moyens-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 960px) { .kw-ds .moyens.kw-moyens-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kw-ds .moyens.kw-moyens-4 { grid-template-columns: minmax(0, 1fr); } }

/* Comparatif : les prix réels portent leur devise (« 22 146 F CFA ») là où la synthèse
   n'affichait que le nombre ; « / an » passe donc sous le prix, d'un bloc, au lieu de
   se couper entre « / » et « an ». */
.kw-ds .comparatif .tarif { white-space: nowrap; }
.kw-ds .comparatif .tarif small { display: block; margin-top: 2px; }

/* Héros centré (09/10/2026, demande du dirigeant) : la recherche de domaine est l'élément central,
   en pleine largeur sous le titre, au lieu d'une carte isolée à droite. */
.kw-ds .heros-centre { padding-block: 72px 56px; }
.kw-ds .heros-centre .cadre { display: block; text-align: center; }
.kw-ds .heros-centre h1 { max-width: 20ch; margin-inline: auto; }
.kw-ds .heros-centre .chapo { max-width: 64ch; margin: 20px auto 34px; }
.kw-ds .recherche-xl { max-width: 880px; margin-inline: auto; text-align: start; padding: 10px; border-width: 2px; border-radius: var(--r3); }
.kw-ds .recherche-xl .modes { margin: 0 0 8px; }
.kw-ds .recherche-xl .ligne { align-items: stretch; }
.kw-ds .recherche-xl .champ { position: relative; flex: 1; min-width: 0; display: flex; }
.kw-ds .recherche-xl .loupe { position: absolute; inset-inline-start: 14px; top: 50%; translate: 0 -50%; width: 22px; height: 22px; fill: none; stroke: var(--gris); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.kw-ds .recherche-xl input { width: 100%; height: 64px; font-size: 21px; padding-inline-start: 46px; }
.kw-ds .recherche-xl .bouton { min-height: 64px; padding: 0 36px; font-size: 17px; }
.kw-ds .heros-centre .sous-recherche { margin: 12px auto 0; font-size: 14.5px; color: var(--gris); }
.kw-ds .heros-centre .rapides { justify-content: center; margin-top: 18px; }
.kw-ds .heros-centre .vers-tout { justify-content: center; margin-top: 14px; padding-top: 0; border-top: 0; }
.kw-ds .heros-centre .payer-avec { justify-content: center; margin-top: 20px; }
.kw-ds .heros-centre .chiffres-cles { justify-content: center; gap: 12px 64px; margin: 44px auto 0; padding-top: 28px; border-top: 1px solid var(--filet); max-width: 880px; }
.kw-ds .heros-centre .chiffres-cles li { justify-items: center; }
@media (max-width: 560px) {
  .kw-ds .heros-centre { padding-block: 36px 40px; }
  .kw-ds .recherche-xl { padding: 8px; }
  .kw-ds .recherche-xl input { height: 56px; font-size: 18px; }
  .kw-ds .recherche-xl .bouton { min-height: 52px; }
  .kw-ds .heros-centre .chiffres-cles { gap: 14px 28px; }
}

/* Héros allégé (09/10/2026, dirigeant) : barre de recherche visible sans défiler, dès 600 px de haut. */
.kw-ds .heros-centre { padding-block: 40px 48px; }
.kw-ds .heros-centre h1 { max-width: none; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.08; }
.kw-ds .heros-centre .accroche { margin: 12px auto 26px; max-width: 60ch; font-size: 18px; color: var(--gris); }
@media (max-width: 560px) {
  .kw-ds .heros-centre { padding-block: 22px 32px; }
  .kw-ds .heros-centre h1 { font-size: 29px; }
  .kw-ds .heros-centre .accroche { margin: 8px auto 18px; font-size: 15.5px; }
}

/* Sous la barre de recherche (09/10/2026, dirigeant) : tuiles d'extensions illustrées, le .sn en tête
   avec le drapeau du Sénégal ; puis « toutes les extensions » et les moyens de paiement (Stripe compris). */
.kw-ds .ext-vedettes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; max-width: 880px; margin: 24px auto 0; padding-top: 10px; }
.kw-ds .ext-tuile { position: relative; display: grid; justify-items: center; align-content: start; gap: 2px; padding: 16px 10px 14px; background: var(--surface); border: 1px solid var(--filet); border-radius: var(--r2); color: var(--texte); text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.kw-ds .ext-tuile:hover, .kw-ds .ext-tuile:focus-visible { border-color: var(--filet-fort); box-shadow: var(--ombre); transform: translateY(-2px); text-decoration: none; }
.kw-ds .ext-ico { width: 26px; height: 26px; margin-bottom: 6px; fill: none; stroke: var(--bleu); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kw-ds .ext-drapeau { width: 36px; height: 24px; margin-bottom: 6px; border-radius: 3px; box-shadow: 0 0 0 1px rgba(15, 23, 51, .12); }
.kw-ds .ext-nom { font: 700 21px var(--mono); color: var(--encre); letter-spacing: -.01em; }
.kw-ds .ext-legende { font-size: 12.5px; color: var(--gris); text-align: center; }
.kw-ds .ext-prix { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--encre); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kw-ds .ext-prix small { font-weight: 500; color: var(--gris); }
.kw-ds .ext-tuile-sn { border-color: var(--orange); background: linear-gradient(180deg, var(--orange-doux), var(--surface) 75%); }
.kw-ds .ext-tuile-sn .ext-nom { color: var(--orange-texte); }
.kw-ds .ext-badge { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px; background: var(--orange); color: var(--sur-orange, #1a1206); font: 700 11px var(--corps); letter-spacing: .02em; white-space: nowrap; }
.kw-ds .sous-barre-pied { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 28px; max-width: 880px; margin: 22px auto 0; }
.kw-ds .ext-toutes { min-height: 42px; gap: 8px; }
.kw-ds .ext-toutes svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kw-ds .heros-centre .sous-barre-pied .payer-avec { margin-top: 0; }
@media (prefers-reduced-motion: reduce) { .kw-ds .ext-tuile { transition: none; } .kw-ds .ext-tuile:hover { transform: none; } }
@media (max-width: 760px) {
  /* Mobile : une rangée qui défile du doigt, plutôt que cinq lignes qui repoussent la page. */
  .kw-ds .ext-vedettes { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding: 12px 2px 6px; margin-top: 12px; gap: 10px; scrollbar-width: none; }
  .kw-ds .ext-vedettes::-webkit-scrollbar { display: none; }
  .kw-ds .ext-tuile { flex: 0 0 138px; scroll-snap-align: start; padding: 14px 8px 12px; }
  .kw-ds .ext-nom { font-size: 19px; }
  .kw-ds .sous-barre-pied { margin-top: 14px; gap: 12px; }
}