/* ==========================================================================
   Windkair — site vitrine : couche propre au site, posee SUR style.css
   (le design system de la boutique, repris a l'identique : tokens --brand,
   composants wk-*, header, footer).

   Le site est une ONE PAGE (hero, reassurance, fonctionnalites, beta) plus une
   page contact et deux pages legales. Cette feuille ne declare donc que ce que
   ces quatre ecrans consomment : les blocs des pages retirees en cours de
   route (tarifs, pages de doc) ont ete supprimes avec elles.

   Regle inchangee : TOUTE couleur passe par un token. Les tokens ajoutes ici
   sont declares dans les deux themes.
   ========================================================================== */

/* Site en THEME CLAIR UNIQUEMENT : aucun attribut `data-theme`
   n'est pose, ces tokens s'appliquent donc par `:root`. Il n'existe plus de
   redefinition sombre — ne pas en reintroduire sans decision produit.

   `color-scheme: light` est DECLARE, pas sous-entendu : sans lui, un visiteur
   dont le systeme est en sombre peut recevoir des controles natifs sombres
   (cases a cocher, listes deroulantes, barres de defilement) sur une page
   claire. Le declarer rend le rendu independant du reglage systeme, ce qui est
   exactement ce que « theme clair uniquement » veut dire. */
:root {
  color-scheme: light;

  --site-hero-from: #f7f6f5;
  --site-hero-to: #c8dde1;
  --site-iconbox: #f4f4f4;
  --site-on-dark: #ffffff;
  --site-shot-frame: #ffffff;

  /* accents « version beta » */
  --site-beta-bg: #fdf3e0;
  --site-beta-text: #7a5410;
  --site-beta-border: #f0dfba;

  /* contour du bouton secondaire du hero (valeur fixee par le client) */
  --site-btn-outline: #cec6c6;
}

/* ==========================================================================
   En-tete — le bouton boutique, a cote de « Ouvrir la carte »

   BOUTON SECONDAIRE, sur le meme traitement que le bouton secondaire du hero
   (`.site-btn-outline`) : contour, fond transparent. « Ouvrir la carte » reste
   l'action principale et garde son fond plein — deux boutons pleins cote a cote
   se neutralisent, et le visiteur ne sait plus lequel compte.

   Il n'herite PAS de `.site-btn-outline` telle quelle : ses 18px de texte et
   son padding de hero sont trop grands pour un en-tete. Les valeurs ci-dessous
   sont calees sur `.wk-btn--header`, son voisin immediat.

   Le seuil du burger est a 1024px, et `.wk-actions` NE DISPARAIT PAS a ce
   moment-la : ce bouton doit donc tenir a cote de l'autre jusque dans les
   petites largeurs. C'est le mode de panne a surveiller ici — un en-tete qui
   deborde horizontalement a 390px. La verification automatisee le controle.
   ========================================================================== */
.site-shop-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--site-btn-outline);
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 15px;
  white-space: nowrap;
}
.site-shop-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
}

/* Le bouton principal du header recoit lui aussi son picto : les deux actions
   doivent se lire de la meme facon. `inline-flex` n'est pas dans le DS pour ce
   bouton — sans lui, l'icone et le texte ne s'alignent pas verticalement. */
.wk-btn--header {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* Les deux pictos : `cart` pour la boutique et `map` pour la carte. Le panier
   dit « on commande ici », ce qu'aucune icone de balise ne disait — c'etait le
   defaut de la premiere version, qui utilisait `antenna`.

   Le trace de `cart-shopping` a ete ajoute au jeu embarque et verifie au rendu,
   pas suppose : un trace SVG recopie de travers ne leve aucune erreur, il
   dessine simplement autre chose. */
.site-shop-btn svg,
.wk-btn--header svg { flex: none; }

/* La fleche oblique dit « ce lien vous sort du site ». C'est un CARACTERE et
   non une icone : le jeu d'icones embarque n'en contient
   aucune, et inventer un trace SVG donnerait un dessin faux. `aria-hidden` sur
   le span — un lecteur d'ecran annonce deja le lien, la fleche n'ajouterait
   qu'un « fleche nord-est » parasite. */
.site-shop-btn .site-ext { font-size: 13px; line-height: 1; }

@media (max-width: 1240px) {
  .site-shop-btn { padding: 9px 14px; font-size: 14px; }
}

/* Sous 560px, les deux boutons gardent leur PICTO SEUL : le texte s'efface, la
   place manque pour deux libelles a cote du burger et du logo.

   L'ACCESSIBILITE NE DOIT PAS S'EFFACER AVEC LE TEXTE. Chaque lien porte un
   `aria-label` qui reprend le libelle : sans lui, un lien reduit a une icone
   n'aurait plus AUCUN nom accessible — un lecteur d'ecran annoncerait « lien »
   et rien d'autre. Ne pas retirer ces attributs en croyant qu'ils font doublon
   avec le texte visible : ils prennent le relais exactement quand il disparait.

   Une version precedente MASQUAIT le bouton boutique en dessous de ce seuil. Le
   picto seul est meilleur : la boutique reste atteignable la ou elle etait. */
@media (max-width: 560px) {
  .site-btn-label { display: none; }
  .site-shop-btn,
  .wk-btn--header { padding: 10px 12px; gap: 0; }
}

/* ==========================================================================
   Logo — correction du traitement sur fond sombre
   Le logo.png fourni est un PNG entierement OPAQUE (verifie : 64 800 pixels
   sur 64 800 ont alpha = 255). Le filtre `brightness(0) invert(1)` du design
   system boutique le transforme donc en rectangle blanc plein au lieu d'un
   lettrage blanc — visible dans le pied de page de chaque ecran. On sert a la
   place une silhouette detouree (logo-blanc.png, alpha derive de la luminance)
   et on neutralise le filtre.

   Le PIED DE PAGE reste sur fond sombre meme si le site est en theme clair :
   cette correction ne disparait donc pas avec le theme sombre.
   ========================================================================== */
.wk-logo-img--footer { filter: none; }

/* ==========================================================================
   Formulaires — accent aux couleurs de la marque
   Le SCHEMA des controles natifs n'est pas decide ici : il l'est par
   `color-scheme: light` sur `:root`, en tete de ce fichier. Ne pas rejouer ce
   raisonnement a deux endroits — et surtout ne pas conclure d'ici que cette
   declaration serait devenue inutile : sans elle, un visiteur dont le SYSTEME
   est en sombre recevrait des cases et des listes sombres sur une page claire.
   ========================================================================== */
.wk-check input,
.wk-input,
.wk-select,
.wk-textarea { accent-color: var(--brand); }

/* ==========================================================================
   Accents « version beta »
   ========================================================================== */
.site-beta-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--site-beta-bg);
  border: 1px solid var(--site-beta-border);
  color: var(--site-beta-text);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

/* Variante « En developpement » du tag, sur la carte Previsions.

   L'explication vit dans `data-tip` et sort en infobulle au survol ET au focus
   — d'ou le tabindex sur l'element. `:focus` et non `:focus-visible` : c'est ce
   qui la rend atteignable au clic et au toucher, la ou il n'y a pas de survol.

   L'element ne porte PAS de `title` : le navigateur en dessinait sa propre
   bulle, qui s'ajoutait a celle-ci au bout de quelques secondes de survol. Le
   texte est repris dans `aria-label` pour les lecteurs d'ecran.

   L'infobulle est ancree a DROITE du tag (`right: 0`) et s'etend vers la
   gauche : la carte Previsions est la quatrieme de la grille, une infobulle
   centree sortirait de la fenetre. `.site-card` n'a pas d'`overflow: hidden`,
   elle peut donc deborder de la carte, ce qu'elle doit faire. */
.site-beta-tag--dev { position: relative; cursor: help; }
.site-beta-tag--dev::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 5;
  width: max-content;
  max-width: 260px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  opacity: 0;
  visibility: hidden;
  transition: opacity 120ms ease;
}
.site-beta-tag--dev:hover::after,
.site-beta-tag--dev:focus::after { opacity: 1; visibility: visible; }

.wk-footer-beta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: 13px;
  color: var(--footer-text);
}

/* ==========================================================================
   Ossature des pages — bandes pleine largeur, contenu plafonne
   ========================================================================== */
.site-band { width: 100%; }
.site-band--muted { background: var(--bg-alt); }
.site-band--dark { background: var(--footer-bg); }

.site-inner {
  --site-cw: 1184px;
  width: 100%;
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: clamp(20px,
                        calc((100% - var(--site-cw)) / 2),
                        calc((1440px - var(--site-cw)) / 2));
  padding-block: 88px;
}
.site-inner--narrow { --site-cw: 880px; }
/* la bande de reassurance est plus basse que les autres sections */
.site-inner--reassurance { padding-block: 48px; }

.site-title {
  font-family: var(--font-heading);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.site-title--center { text-align: center; }

.site-lede {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 760px;
}

.site-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: 48px;
}
.site-head--center { align-items: center; text-align: center; }

.site-band--dark .site-title,
.site-band--dark .site-lede { color: var(--site-on-dark); }
.site-band--dark .site-lede { opacity: .82; }

/* ==========================================================================
   HERO
   ========================================================================== */
.site-hero {
  background: linear-gradient(117deg, var(--site-hero-from) 2%, var(--site-hero-to) 91%);
}
.site-hero .site-inner { padding-block: 84px 92px; }

.site-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: center;
}

.site-hero-content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  align-items: flex-start;
}

.site-hero-title {
  font-family: var(--font-heading);
  font-size: 46px;
  letter-spacing: -0.015em;
  font-weight: 400;
  line-height: 1.14;
  color: var(--text);
  margin: 0;
  text-wrap: balance;
}
.site-hero-title b { font-weight: 600; font-style: italic; color: var(--brand); }

.site-hero-sub {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-2);
  max-width: 560px;
}

.site-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.site-hero-ctas .wk-btn { min-height: 58px; border-radius: 10px; }

/* Bouton secondaire du hero : fond transparent, contour #CEC6C6 (valeur
   fixee par le client, portee par le token --site-btn-outline pour rester
   lisible en theme sombre). */
.site-btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--site-btn-outline);
  padding: var(--space-lg) var(--space-2xl);
  font-size: 18px;
}
.site-btn-outline:hover {
  color: var(--brand);
  border-color: var(--brand);
}

/* ==========================================================================
   Bande de reassurance
   Reprise du traitement de `pages/configurateur.html` de la maquette
   boutique (.wk-reassurance) : une bande plate, sans carte ni bordure,
   trois blocs centres, pictogramme brand puis titre gras et description.
   La bande passe par .site-inner comme toutes les autres sections, pour que
   ses bords s'alignent sur elles et qu'elle reste plafonnee a 1440 px.
   ========================================================================== */
.site-reassurance {
  display: flex;
  gap: 0;
}
.site-reassurance-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 0 24px;
  min-width: 0;
}
.site-reassurance-ico {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--brand);
}
.site-reassurance-title { font-size: 16px; font-weight: 700; color: var(--text); }
.site-reassurance-desc { font-size: 14px; font-weight: 300; line-height: 1.5; color: var(--text-2); }

/* ==========================================================================
   Captures de l'app — cadre « navigateur »
   ========================================================================== */
.site-shot {
  border-radius: var(--radius-xl);
  overflow: hidden;
  background: var(--site-shot-frame);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
  margin: 0;
}
.site-shot img { width: 100%; height: auto; display: block; }
/* Captures nues : pas de cadre. `.site-shot` habille la capture du hero d'une
   fenetre de navigateur (fond, bordure, ombre portee) ; les captures de
   l'application portent deja leurs propres cartes a l'interieur de l'image, un
   cadre de plus faisait carte dans la carte. */
.site-shot--bare {
  background: none;
  border: 0;
  box-shadow: none;
}

.site-shot-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: var(--surface-muted);
  border-bottom: 1px solid var(--border);
}
.site-shot-bar i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}
.site-shot-bar span {
  flex: 1;
  margin-left: var(--space-sm);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  font-size: 12px;
  color: var(--text-2);
  text-align: center;
}

/* Groupe de captures : deux colonnes sur desktop, tout empile sous 720px.
   A gauche, l'en-tete d'une balise (786x427, rapport 1.841) au-dessus de ses
   conditions actuelles (777x658, rapport 1.181) ; a droite, l'onglet Analyse
   (1920x1087, rapport 1.766).

   La proportion 1 / 2.616 des colonnes est calculee pour que les deux cotes
   tombent a la meme hauteur a la largeur de reference : a gauche
   `L/1.841 + gouttiere + L/1.181`, a droite `R/1.766`. La gouttiere etant une
   constante, l'egalite se degrade doucement aux autres largeurs — d'ou
   `align-items: start` et des images en `height: auto` : l'ecart se solde en
   blanc sous la colonne la plus courte, jamais en recadrage.

   REGLE : ces nombres decoulent des rapports des trois images. Remplacer une
   capture, c'est les recalculer. */
.site-shots { display: flex; flex-direction: column; gap: var(--space-xl); }
.site-shots-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.616fr);
  gap: var(--space-xl);
  align-items: start;
}
.site-shots-col { display: flex; flex-direction: column; gap: var(--space-xl); }

/* ==========================================================================
   Grilles de cartes
   ========================================================================== */
.site-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  align-items: stretch;
}
.site-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.site-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.site-card h3 {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  flex-wrap: wrap;
}
.site-card p { font-size: 15px; font-weight: 300; line-height: 1.55; color: var(--text-2); }

/* Cartes de fonctionnalites : le survol les souleve legerement. Discret et
   sans decalage de mise en page — `transform` et `box-shadow` seulement, aucune
   propriete qui declenche un reflow. Neutralise si l'utilisateur a demande
   moins d'animations. */
.site-card {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.site-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-pop);
  border-color: var(--border-strong);
}
@media (prefers-reduced-motion: reduce) {
  .site-card { transition: none; }
  .site-card:hover { transform: none; }
}

.site-ico {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--site-iconbox);
  color: var(--brand);
  flex: none;
}

/* Listes a puces cochees.
   L'item est un BLOC avec la coche en position absolue, et non un conteneur
   flex : en flex, un `<b>` suivi de texte brut donne deux items separes par
   la gouttiere, ce qui insere un blanc parasite au milieu d'une phrase et
   casse la cesure. En bloc, le contenu reste du texte en ligne quelle que
   soit la facon dont la page a ecrit son markup. */
.site-checks { display: flex; flex-direction: column; gap: var(--space-md); margin: 0; padding: 0; list-style: none; }
.site-checks li {
  position: relative;
  display: block;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--text-2);
}
.site-checks li b { font-weight: 600; color: var(--text); }
.site-checks li > svg { position: absolute; left: 0; top: 3px; color: var(--brand); }

/* ==========================================================================
   Bande d'appel a l'action
   ========================================================================== */
.site-cta { text-align: center; }
.site-cta .site-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
  padding-block: 72px;
}
.site-cta p {
  font-size: 17px;
  font-weight: 300;
  color: var(--site-on-dark);
  opacity: .85;
  max-width: 640px;
}
.site-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-lg); justify-content: center; }
.site-cta .wk-btn--primary { background: var(--brand); }
.site-cta .wk-btn--outline {
  background: transparent;
  color: var(--site-on-dark);
  border: 1.5px solid rgba(255, 255, 255, .35);
  padding: var(--space-lg) var(--space-2xl);
  font-size: 18px;
}
.site-cta .wk-btn--outline:hover { border-color: var(--site-on-dark); }

/* ==========================================================================
   Contact
   ========================================================================== */
.site-contact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}
.site-contact-aside { display: flex; flex-direction: column; gap: var(--space-xl); }
.site-contact-block { display: flex; gap: var(--space-lg); align-items: flex-start; }
.site-contact-block .site-ico { width: 44px; height: 44px; }
.site-contact-block b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 2px; }
.site-contact-block p { font-size: 14px; font-weight: 300; line-height: 1.55; color: var(--text-2); }
.site-contact-block a { color: var(--brand); }

/* Resultat du dernier envoi du formulaire. Le succes reutilise .wk-notice--ok
   du design system (comme la maquette) ; seul l'echec a besoin d'une regle. */
.site-status {
  margin-top: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  font-size: 14px;
}
.site-status[data-state="error"] { background: var(--danger-soft); color: var(--danger); }

/* ==========================================================================
   Divers
   ========================================================================== */
.site-note {
  display: flex;
  gap: var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--brand-soft);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text);
}
.site-note svg { flex: none; color: var(--brand); }

/* Mention d'information du formulaire de contact (RGPD art. 13).
   Petit et discret, mais LISIBLE : `--text-2` reste contraste sur le fond de la
   page. Ne pas le passer sous 13px ni sur une couleur plus pale — une mention
   legale illisible ne remplit pas l'obligation d'information qu'elle porte. */
.site-form-legal {
  margin-top: var(--space-lg);
  font-size: 13px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--text-2);
}
.site-form-legal a { text-decoration: underline; }

/* L'etoile des champs obligatoires, et sa legende.

   Une couleur ne peut pas etre le SEUL porteur de l'information (WCAG 1.4.1) :
   ici c'est le caractere `*` qui informe, la couleur ne fait que l'accentuer. Un
   daltonien lit l'etoile, un lecteur d'ecran entend `required`, et la legende
   explique le symbole a tout le monde. */
.site-req { color: var(--brand); font-weight: 600; }

.site-req-legend {
  margin-bottom: var(--space-md);
  font-size: 13px;
  font-weight: 300;
  color: var(--text-2);
}

.site-prose { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 780px; }
.site-prose h2 { font-family: var(--font-heading); font-size: 22px; font-weight: 400; margin-top: var(--space-lg); }
/* Sous-titre d'une section : meme fonte que h2, un cran plus bas, et SANS le
   margin-top de h2 — un h3 suit son h2 de pres, l'espacement du conteneur
   (gap) suffit. Sans cette regle, `.site-prose` ne stylant que h2, un h3
   sortirait en gras sans-serif, en rupture avec toute la page. */
.site-prose h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 400; }
.site-prose p, .site-prose li { font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--text-2); }
.site-prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: var(--space-sm); }
.site-prose a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ==========================================================================
   Page 404 — dans le theme : le zero du « 404 » est une balise, dont le picto
   de vent derive doucement.
   ========================================================================== */
.site-404 { text-align: center; }

.site-404-code {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.6vw, 18px);
  font-family: var(--font-heading);
  font-size: clamp(84px, 16vw, 168px);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--brand);
}
.site-404-zero {
  display: grid;
  place-items: center;
  width: 0.92em;
  height: 0.92em;
  border: 0.085em solid var(--brand);
  border-radius: 50%;
}
.site-404-zero svg { width: 46%; height: 46%; animation: wk-souffle 3.2s ease-in-out infinite; }

/* Le picto de vent derive doucement dans le zero : c'est toute l'animation. */
@keyframes wk-souffle {
  0%, 100% { transform: translateX(-9%); opacity: 0.72; }
  50%      { transform: translateX(9%);  opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .site-404-zero svg { animation: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
/* Section « Tout pour preparer votre session » : les quatre cartes sont a
   l'etroit dans la colonne de contenu standard. En desktop seulement, on
   elargit cette colonne — le padding lateral de .site-inner en est deduit, il
   se reduit donc d'autant, sans regle de padding concurrente.

   Le seuil suit celui du hero : en dessous, la grille reflue (2 colonnes a
   1024px, 1 a 900px) et la largeur standard reprend, ou elle est la bonne. */
@media (min-width: 1181px) {
  #fonctionnalites .site-inner { --site-cw: 1312px; }
}

@media (max-width: 1180px) {
  .site-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 1024px) {
  /* Le header bascule en panneau deroulant : les entrees s'empilent. */
  .wk-navitem { display: block; }
  .wk-navitem > a {
    padding-block: var(--space-md);
    border-bottom: 1px solid var(--divider);
  }
  .wk-navitem:last-child > a { border-bottom: 0; }
}

@media (max-width: 1100px) {
  .site-grid, .site-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-contact { grid-template-columns: minmax(0, 1fr); gap: 40px; }
}

@media (max-width: 900px) {
  .site-inner { padding-block: 64px; }
  .site-hero .site-inner { padding-block: 56px 64px; }
  .site-title { font-size: 32px; }
  .site-hero-title { font-size: 36px; }
  .site-head { margin-bottom: 32px; }

  /* Reassurance : empilee, separee par un filet — comme sur la boutique */
  .site-reassurance { flex-direction: column; }
  .site-reassurance-item { padding: 24px 0; }
  .site-reassurance-item + .site-reassurance-item { border-top: 1px solid var(--divider); }
  .site-inner--reassurance { padding-block: 32px; }
}

/* Depuis le retrait du « Se connecter », le header n'a plus qu'une seule
   action. La regle boutique masque .wk-btn--header sous 560 px (la boutique
   avait aussi un panier et un compte) : ici cela laisserait un en-tete sans
   aucun appel a l'action. On la garde, simplement plus compacte. */
@media (max-width: 560px) {
  .wk-btn--header { display: inline-flex; padding: 9px 14px; font-size: 14px; }
}

@media (max-width: 720px) {
  .site-inner { padding-block: 48px; }
  .site-grid, .site-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .site-shots-row { grid-template-columns: minmax(0, 1fr); }
  .site-title { font-size: 26px; }
  .site-hero-title { font-size: 30px; }
  .site-hero-sub { font-size: 17px; }
  .site-hero-ctas .wk-btn { width: 100%; }
}

@media (max-width: 480px) {
  .site-hero-title { font-size: 26px; }
  .site-title { font-size: 23px; }
}

/* ==========================================================================
   Defilement des ancres

   Le site est une ONE PAGE : « Fonctionnalites » et « Beta » sont des ancres,
   et un saut instantane fait perdre le fil — on ne sait pas si la page a
   change ou si elle a saute.

   `scroll-margin-top` N'EST PAS UN DETAIL : l'en-tete est `position: sticky` et
   haut de 80px. Sans cette marge, la cible se cale sous l'en-tete, qui recouvre
   son titre — le visiteur atterrit sur un texte tronque en croyant que le lien
   est faux.

   L'ANIMATION EST DESACTIVEE pour qui demande moins de mouvement
   (`prefers-reduced-motion`). Ce n'est pas une precaution de principe : un
   defilement anime declenche des nausees chez les personnes sensibles aux
   troubles vestibulaires, et le reglage systeme existe pour cela.
   ========================================================================== */
html { scroll-behavior: smooth; }

:target,
#fonctionnalites,
#beta { scroll-margin-top: 96px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   Logos — header et pied de page a la MEME taille

   Le design system les servait a deux tailles differentes (56px et 30px). Ils
   sont desormais identiques et plus grands. La surcharge vit ICI et non dans
   `style.css`, qui est repris tel quel de l'e-shop et destine a y etre
   resynchronise : le modifier ferait perdre ces valeurs au prochain report.

   64px dans un en-tete haut de 80px laisse 8px de part et d'autre. C'est serre
   et c'est voulu ; ne pas monter plus haut sans augmenter aussi `.wk-header`.
   ========================================================================== */
/* PLEINE HAUTEUR DE L'EN-TETE, sans aucune marge : le fichier logo porte deja
   ses propres marges internes, en ajouter une seconde le rapetissait pour rien.
   `.wk-header` fait 80px et n'a QUE du `padding-inline` — aucun padding
   vertical — donc 80px de logo tiennent exactement, bord a bord.

   Si la hauteur de l'en-tete change un jour, cette valeur doit suivre : c'est
   la meme mesure ecrite a deux endroits. Et deux autres la suivent — le panneau
   du menu mobile, ancre a `top: 80px` dans style.css, et le `scroll-margin-top`
   des ancres plus bas. */
.wk-logo-img { height: 80px; }

/* Le pied de page garde la meme taille que l'en-tete : c'est la demande
   d'origine, et deux logos de tailles differentes sur une meme page se lisent
   comme une inconsistance, pas comme une intention. */
.wk-logo-img--footer { height: 80px; }

/* ==========================================================================
   Section beta — deux boutons de meme taille sur mobile

   Empiles, deux boutons de largeurs differentes se lisent comme une hierarchie
   qui n'existe pas : la difference ne vient que de la longueur des libelles.
   On les etire donc a la meme largeur, et on aligne le padding et la taille de
   texte du bouton principal sur ceux du secondaire, que `.site-cta` redefinit.
   ========================================================================== */
@media (max-width: 560px) {
  .site-cta-actions { flex-direction: column; align-items: stretch; }
  .site-cta-actions .wk-btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-lg) var(--space-2xl);
    font-size: 18px;
  }
}