/* Ecran de recherche. */

.fs-wrap { max-width: 980px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px) 96px; }
.is-hidden { display: none !important; }
.field__input { width: 100%; box-sizing: border-box; }
.fs-field { display: grid; gap: 8px; }
.fs-field > label { font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--color-accent); }
.fs-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.fs-row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; align-items: start; }
.fs-field + .fs-field, .fs-row2, .fs-row3 { margin-top: 14px; }

/* Le selecteur ci-dessus visait l'empilement vertical normal du
   formulaire, mais « + » ne distingue pas « suit dans le flux » de
   « voisin dans une meme rangee » : les deux champs d'une .fs-row2/
   .fs-row3 sont aussi des .fs-field adjacents, donc le second heritait
   de la meme marge — decalage vertical entre les deux colonnes d'une
   rangee, signale le 19/08/2026. */
.fs-row2 > .fs-field, .fs-row3 > .fs-field { margin-top: 0; }
.input:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-divider)); box-shadow: 0 0 0 3px var(--color-accent-100); }
.fs-combo { position: relative; }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--color-divider); background: var(--color-neutral-100); padding: 6px 10px; font-size: 13px; direction: ltr; }
.chip__remove { border: none; background: none; cursor: pointer; color: var(--color-text); font-size: 14px; line-height: 1; padding: 0; }
.chip__remove:hover { color: var(--color-accent); }
.combobox__option { list-style: none; padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: baseline; gap: 8px; direction: ltr; text-align: left; }
.combobox__option:hover, .combobox__option[aria-selected="true"] { background: var(--color-neutral-100); }
.combobox__name { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; }
.combobox__country { font-size: 14px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.combobox__code { font-size: 14px; color: var(--color-accent-700); margin-inline-start: auto; font-feature-settings: "tnum" 1; }
#dest-list { position: absolute; z-index: 5; inset-inline-start: 0; top: calc(100% + 6px); width: 100%; margin: 0; padding: 6px; background: var(--color-surface); border: 1.5px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 260px; overflow: auto; }

/* Meme positionnement pour la liste du panneau d'analyse, depuis qu'il
   utilise lui aussi la barre horizontale (26/08/2026) : sans cette
   regle, elle s'affichait DANS la barre au lieu d'en dessous. La regle
   est portee par .search-bar pour ne pas toucher aux autres usages de
   .combobox__list ailleurs sur le site. */
.search-bar #analyze-list { position: absolute; z-index: 5; inset-inline-start: 0; top: calc(100% + 6px); width: 100%; margin: 0; padding: 6px; background: var(--color-surface); border: 1.5px solid var(--color-divider); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); max-height: 260px; overflow: auto; list-style: none; }
.results__count { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 26px; margin: 0 0 8px; }
/* Note quand la recherche a ete elargie automatiquement (voir search.js,
   14/08/2026) : informe sans alarmer, contrairement a .warning qui
   signale un risque sur la disponibilite. */
.results__hint { color: var(--color-accent); font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.warning { border: 2px solid var(--color-accent); background: var(--color-accent-100); color: var(--color-text); padding: 14px 16px; font-size: 16px; margin-bottom: 20px; }
.notice { border-top: 2px solid var(--color-divider); padding: 20px 0; font-size: 16px; color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.notice--error { color: var(--color-accent-700); }
.notice:has(.track) { border: none; border-top: 2px solid var(--color-divider); background: var(--color-accent-100); padding: 28px 24px; margin: 8px 0; }
.notice:has(.track) strong { color: var(--color-accent-700); }
/* Chaque offre est un lien vers le partenaire.

   Rien ne le montrait : le seul indice etait un changement de couleur au
   survol, invisible avant de survoler et inexistant au toucher. Des
   visiteurs ne comprenaient pas qu'on pouvait cliquer.

   Trois signes permanents desormais : un chevron, un fond au survol, et
   une bordure d'accent qui apparait du cote ou commence la lecture. */
.offer {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding: 22px 16px;
  margin-inline: -16px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-text);
  cursor: pointer;
  border-inline-start: 3px solid transparent;
  transition: background .15s, border-color .15s;
}

.offer:hover,
.offer:focus-visible {
  background: var(--color-neutral-100);
  border-inline-start-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  outline: none;
}

.offer:hover .offer__route,
.offer:focus-visible .offer__route { color: var(--color-accent-700); }

/* Le chevron pointe vers la gauche : c'est le sens du depart en lecture
   RTL, et celui de la fleche « suivant » dans cette direction. */
/* Premiere colonne de la grille, donc a l'extremite gauche du bloc en
   lecture RTL : la ou le regard termine sa course. */
.offer__go {
  grid-column: 1;
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--color-neutral-400);
  transition: color .15s, transform .15s;
}

.offer:hover .offer__go {
  color: var(--color-accent);
  transform: translateX(-3px);
}
.offer + .offer, .offer + .notice, .notice + .offer { border-top: 2px solid var(--color-divider); }
/* Le trajet, annonce une fois pour toute la liste quand la recherche ne
   porte que sur une destination. */
.results__route {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  direction: ltr;
  text-align: left;
  margin: 0 0 4px;
}

/* Montants.

   Le ₪ est neutre pour l'algorithme bidirectionnel : dans un paragraphe
   RTL il se place devant le chiffre. L'isolation en LTR force l'ordre
   « 1718₪ » sans deplacer le texte hebreu autour. */
.money {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

/* Le trajet est le titre de la ligne : il a besoin d'air avant les
   details qui le precisent. */
.offer__route {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  direction: ltr;
  text-align: left;
  display: block;
  margin: 0 0 20px;
}
/* Dates et details du vol.

   Ils etaient a 70 % d'opacite sur un fond clair : lisibles de pres,
   penibles autrement. Ce sont pourtant les informations qui font choisir
   entre deux lignes. */
.offer__dates {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 5px;
}

.offer__meta {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent);
  margin: 0;
}

/* L'anciennete du releve reste en retrait : elle qualifie le prix, elle
   ne participe pas au choix. La mettre au meme niveau que les dates
   diluerait ce qu'on cherche a mettre en avant. */
.offer__age {
  font-size: 14px;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 7px 0 0;
}
.offer__body { min-width: 0; }
/* Colonne des prix.

   Pas de direction: ltr sur le prix : le shekel se place a gauche du
   nombre en hebreu, et « לאדם » figure sur la meme ligne. Forcer le sens
   latin renverrait le symbole a droite et l'hebreu du mauvais cote. */
/* Le prix reste cale a gauche du bloc — c'est le chiffre qu'on cherche.
   Les mentions qui le qualifient s'alignent a droite, du cote ou le
   regard revient en lecture RTL. */
/* Tout le bloc s'aligne a droite : le prix, la mention « לאדם » qui le
   suit sur la meme ligne, puis le total et l'economie en dessous.

   text-align: right plutot que end : le conteneur est en RTL, « end »
   y designe la gauche. */
.offer__prices { text-align: right; }

.offer__price {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 30px;
  margin: 0;
  white-space: nowrap;
}

/* « מ־ » devant le montant : le prix est un plancher releve lors du
   dernier scan, pas une cotation. Discret et sur la meme ligne -- il
   qualifie le chiffre, il ne doit pas lui disputer l'attention. */
.offer__from {
  font-family: var(--font-body);
  font-weight: normal;
  font-size: 17px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* Reste sur la ligne du prix : c'est une precision sur le montant, pas
   une ligne separee. */
.offer__unit {
  font-family: var(--font-body);
  font-weight: normal;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

.offer__total {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin: 2px 0 0;
  white-space: nowrap;
}

/* L'economie est une bonne nouvelle, pas un tarif : le vert et une taille
   nettement inferieure au prix evitent qu'on la lise pour un montant a
   payer. C'est la confusion qui a motive ce bloc. */
.offer__gain {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #17795e;
  margin: 6px 0 0;
  white-space: nowrap;
}
.offer__cta {
  display: block;
  font-size: 15px;
  font-weight: 800;
  color: #b8860b;
  margin: 6px 0 0;
  white-space: nowrap;
  animation: offer-cta-clignote 1.1s ease-in-out infinite;
}
@keyframes offer-cta-clignote {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
  .offer__cta { animation: none; }
}
.track { padding: 20px 0 4px; }
.track > p:first-child { font-weight: 600; font-size: 17px; margin: 0 0 4px; }

/* Bandeau d'appel a l'action (25/08/2026) -- cloche + phrase + bouton,
   sur une carte nette, pour que l'invitation a creer une alerte se voie
   au moment ou le visiteur vient de decouvrir les prix. Le formulaire
   lui-meme reste replie tant qu'il n'a pas clique. */
.track__banner {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 18px 22px;
}

.track__bell { flex: none; color: var(--color-text); }

.track__text {
  flex: 1;
  margin: 0;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.45;
  color: var(--color-text);
}

.track__cta {
  flex: none;
  border: 2px solid var(--color-accent-2);
  background: none;
  color: var(--color-accent-2);
  border-radius: 999px;
  padding: 10px 22px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.3;
}

.track__cta:hover { background: var(--color-accent-2); color: #fff; }

.track__form { margin-top: 14px; }

/* Panneau centre facon "activer une alerte de prix" (25/08/2026) :
   grosse cloche, titre, explication, route, puis les champs empiles.
   Colonne etroite et centree -- un formulaire large se lit comme un
   champ de saisie de plus, celui-ci se lit comme une proposition. */
.track__panel {
  margin: 14px auto 0;
  max-width: 380px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 32px 28px;
}

.track__panel-bell { color: var(--color-text); margin-bottom: 18px; }

/* Les titres des trois sections de l'accueil -- recherche, analyse,
   alerte -- et celui de la page d'analyse. Demandes le 09/09/2026 dans
   la couleur du bouton « creer l'alerte », puis passes au bleu de la
   marque le meme jour : l'ambre ne donnait que 2,38:1 de contraste sur
   le fond de page, sous le minimum de 3:1 exige meme pour du gros
   texte. Le bleu en donne 10,72. Une seule classe pour les quatre :
   ecrite quatre fois en style inline, une des valeurs finit toujours
   par deriver. */
/* « start » et non « left » : le titre se cale a gauche en anglais et
   en francais, a droite en hebreu, sans deuxieme regle a maintenir
   (demande le 09/09/2026). */
.section-title { color: var(--color-accent); text-align: start; }

.track__title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
  line-height: 1.25;
  margin: 0 0 10px;
  color: var(--color-text);
}

/* Le panneau d'alerte de l'accueil se cale sur le debut de la ligne --
   a gauche en anglais et en francais, a droite en hebreu (09/09/2026).
   « margin-inline » suit la direction de la page ; « margin-left: 0 »
   l'aurait colle a gauche en hebreu aussi.

   Vise #alert-panel et lui seul : le meme panneau apparait sous les
   resultats de recherche, ou il reste centre dans sa colonne. */
#alert-panel .track__panel { margin-inline: 0 auto; }

/* La fleche « retour » suit la direction de la page : en hebreu, revenir
   se montre vers la droite. Une seule icone, retournee, plutot que deux
   dessins a garder identiques. */
[dir="rtl"] #back-button svg { transform: scaleX(-1); }

.track__subtitle {
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-neutral-600);
  margin: 0 0 14px;
}

.track__route {
  font-weight: 700;
  font-size: 15px;
  color: var(--color-accent-2);
  margin: 0 0 18px;
}

.track__panel .track__price,
.track__panel .track__email {
  width: 100%;
  max-width: none;
  margin-bottom: 10px;
  text-align: start;
}

/* Grille des criteres pre-remplis (27/08/2026) : deux colonnes pour
   tenir dans la largeur etroite du panneau sans l'allonger a l'infini.
   Libelles au-dessus des champs, alignes a droite (RTL). */
.track__criteres {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
  text-align: start;
}

.track__critere label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-neutral-600);
  margin-bottom: 4px;
}

.track__critere .field__input {
  width: 100%;
  max-width: none;
  font-size: 14px;
  padding: 8px 10px;
}

@media (max-width: 420px) {
  .track__criteres { grid-template-columns: 1fr; }
}

.track__check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-neutral-600);
  text-align: start;
  margin-top: 10px;
}

.track__submit {
  width: 100%;
  margin-top: 20px;
  border: none;
  background: var(--color-accent-2);
  color: #fff;
  border-radius: 999px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.track__submit:hover { filter: brightness(0.94); }

@media (max-width: 560px) {
  .track__banner { flex-wrap: wrap; }
  .track__cta { width: 100%; }
}

.track__row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.track__row .field__input { max-width: 320px; }
.track__row .track__price { max-width: 140px; }

/* Video de demonstration : ratio 16:9 preserve via le padding-top a
   56.25%, technique classique pour eviter qu'un iframe ne deforme le
   contenu selon la largeur d'ecran. */
.video-demo { margin-top: 28px; }

/* Texte de referencement, sous la video. Bleu et blanc plutot que le
   texte noir standard du site : un bloc entierement en --color-text
   faisait "institutionnel" a cet endroit, alors que le reste de la page
   reste gai. Fond d'accent tres clair, titre en accent plein, texte en
   bleu fonce plutot que noir. */
.intro-seo {
  margin-top: 24px;
  padding: 20px;
  background: var(--color-accent-100);
  border: 1px solid color-mix(in srgb, var(--color-accent) 25%, transparent);
  border-radius: var(--radius-md);
}

.intro-seo h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 19px;
  color: var(--color-accent);
  margin: 0 0 10px;
}

.intro-seo p {
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-accent-700);
}

.intro-seo p:last-child { margin-bottom: 0; }

.video-demo__frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(15, 36, 56, .12);
}

.video-demo__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}
@media (max-width: 760px) {
  .fs-row2, .fs-row3 { grid-template-columns: 1fr; }
  .hero-grid { grid-template-columns: 1fr !important; }
  .how-it-works-grid { grid-template-columns: 1fr !important; }
  /* Sur mobile, la description et les prix s'empilent. Le chevron reste
     sur sa propre colonne, cale en haut : le mettre en troisieme ligne
     l'aurait isole loin de ce qu'il designe. */
  .offer {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px 12px;
  }

  .offer__body { grid-column: 2; }
  .offer__prices { grid-column: 2; text-align: right; }

  .offer__go {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
  }
}

/* Le champ contient des noms anglais separes par des virgules : il se lit
   de gauche a droite, meme dans un formulaire RTL. Le texte indicatif, lui,
   est en hebreu et suit la direction du document. */
#dest-input { direction: ltr; text-align: left; }
#dest-input:placeholder-shown { direction: rtl; text-align: right; }

/* Confirmation du partage.

   Sur ordinateur, le clic copie l'adresse sans rien ouvrir : sans retour
   visible, l'utilisateur croit que le bouton ne marche pas. */
#share-button { transition: background .15s, border-color .15s; }
#share-button.is-confirmed {
  background: var(--color-accent);
  border-color: var(--color-accent);
}
#share-button.is-confirmed svg { stroke: var(--color-bg); }

/* --- Compatibilite avec le contrat ---------------------------------------
   Le JavaScript emet les classes .button et .button--primary, nommees dans
   CONTRAT.md. Le systeme de design, lui, emploie .btn / .btn-primary. On
   fait correspondre les deux plutot que de renommer d'un cote ou de
   l'autre : chaque convention reste valable dans son domaine. */

.button { display: inline-flex; align-items: center; justify-content: center;
  gap: 6px; cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: 14px calc(var(--space-3) * 1.2); border-radius: var(--radius-md); }

.button:disabled { opacity: 0.45; cursor: not-allowed; }

.button--primary { background: var(--color-accent-500); color: var(--color-bg); }
.button--primary:hover { background: var(--color-accent-600); }
.button--primary:active { background: var(--color-accent-700); }

/* =====================================================================
   Analyse d'une destination
   ===================================================================== */

/* --- Onglets --------------------------------------------------------- */

/* Les onglets sont le premier choix du visiteur : recherche ou analyse.
   Ils passaient inapercus — trop petits, sans signe distinctif. */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 22px;
  padding: 5px;
  background: var(--color-neutral-100);
  border: 1px solid var(--color-divider);
  border-radius: 999px;
  width: fit-content;
}

/* L'analyse passe en premier a l'oeil, la recherche en second.

   flex-direction plutot qu'un echange dans le HTML : l'ordre du document
   reste celui de la logique — recherche d'abord — ce que suivent la
   navigation au clavier et les lecteurs d'ecran. */
.tabs--reversed { flex-direction: row-reverse; }

/* Precision sur la fenetre de dates. Elle evite une erreur de saisie
   frequente — confondre « du 1er au 15 » avec un depart le 1er et un
   retour le 15 — et doit donc se lire sans effort. */
/* Le cercle de la case a cocher.

   Sa bordure employait --color-divider, un gris trop pale : hors survol,
   rien n'indiquait qu'il y avait quelque chose a cliquer. Des visiteurs
   ne voyaient pas l'option. */
.radio .dot {
  width: 20px;
  height: 20px;
  border-width: 2px;
  border-color: var(--color-neutral-400);
  background: var(--color-surface);
  transition: border-color .15s, background .15s;
}

.radio { font-size: 17px; }

.radio:hover .dot,
.radio input:focus-visible + .dot {
  border-color: var(--color-accent);
}

/* Le focus clavier doit se voir : l'input reel est masque, l'anneau se
   pose donc sur le cercle qui le remplace. */
.radio input:focus-visible + .dot {
  box-shadow: 0 0 0 3px var(--color-accent-100);
}

.radio input:checked + .dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 5px var(--color-surface);
}

/* Invitation a partager. Sous le formulaire et en fin d'analyse : deux
   moments ou le visiteur vient de trouver quelque chose d'utile, donc le
   plus probable pour qu'il partage. Le bouton reprend le meme trace et le
   meme comportement que celui de la navigation. */
.fs-share {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--color-accent);
  margin: 14px 0 0;
}

.fs-share .share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  background: none;
  border: 1.5px solid currentColor;
  border-radius: 999px;
  color: inherit;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}

.fs-share .share-btn:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.fs-share .share-btn.is-confirmed {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

/* En fin d'analyse, le bouton "chercher" au-dessus porte deja l'accent :
   l'invitation a partager reste discrete pour ne pas rivaliser. */
.fs-share--analysis { margin-top: 12px; }

.fs-hint {
  font-size: 16px;
  font-weight: 700;
  color: color-mix(in srgb, var(--color-text) 85%, transparent);
  margin: 0 0 12px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 20px;
  padding: 15px 34px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--color-neutral-600);
  cursor: pointer;
  transition: background .15s, color .15s;
}

/* L'icone dit de quoi il s'agit avant qu'on ait lu : une loupe pour
   chercher, des barres pour l'analyse. */
.tab__icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

.tab:hover { color: var(--color-text); }

.tab.is-active {
  background: var(--color-accent);
  color: #fff;
}

/* --- Cadre ----------------------------------------------------------- */

.analysis {
  margin-top: 20px;
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
}

.analysis__city {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 26px;
  margin: 0 0 4px;
  direction: ltr;
  text-align: right;
}

.analysis__summary { margin-bottom: 22px; }

/* Le prix plancher est ce que le visiteur cherche : il porte l'accent. */
.analysis__price {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 28px;
  color: var(--color-accent);
  margin: 0 0 4px;
}

.analysis__meta {
  margin: 0;
  font-size: 13.5px;
  color: var(--color-neutral-600);
}

/* --- Conclusions ----------------------------------------------------- */

.insights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.insight {
  padding: 20px;
  background: var(--color-accent-100);
  border-radius: var(--radius-md);
  border-top: 3px solid var(--color-accent);
}

.insight__label {
  margin: 0 0 8px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-weight: 600;
  color: var(--color-neutral-600);
}

.insight__value {
  margin: 0 0 4px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 24px;
}

.insight__detail { margin: 0; font-size: 14px; color: var(--color-accent-700); font-weight: 600; }

/* --- Sections -------------------------------------------------------- */

.analysis__block { margin-bottom: 26px; }
.analysis__block:last-of-type { margin-bottom: 0; }

.analysis__title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 16px;
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-divider);
}

/* --- Graphes de la page d'analyse (28/08/2026) ------------------------
   Remplacent les tableaux « par duree » et « par mois » : un visiteur
   veut voir d'un coup d'oeil si les prix montent ou descendent, pas
   lire des colonnes de chiffres. SVG construit a la main -- ces formes
   sont simples, charger une bibliotheque ralentirait la page pour rien. */

.chart__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.chart__ranges { display: flex; gap: 6px; flex-wrap: wrap; }

.chart__range {
  border: 1px solid var(--color-divider);
  background: none;
  color: var(--color-neutral-600);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

.chart__range:hover { border-color: var(--color-accent-400); }

.chart__range.is-active {
  background: var(--color-accent-500);
  border-color: var(--color-accent-500);
  color: #fff;
}

.chart__trend {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-neutral-600);
}

.chart {
  width: 100%;
  height: 200px;
  margin-top: 10px;
  overflow: visible;
}

.chart__grid { stroke: var(--color-divider); stroke-width: 1; }
.chart__tick { fill: var(--color-neutral-500); font-size: 11px; }

.chart__area { fill: color-mix(in srgb, var(--color-accent-500) 12%, transparent); }

.chart__line {
  fill: none;
  stroke: var(--color-accent-500);
  stroke-width: 2.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  /* vector-effect : sans lui, preserveAspectRatio="none" etirerait aussi
     l'epaisseur du trait, qui deviendrait epais et flou en largeur. */
  vector-effect: non-scaling-stroke;
}

.chart__last { fill: var(--color-accent-2); }

/* Barres horizontales : plus lisibles que des colonnes pour des
   libelles en hebreu, qui tiennent mal a la verticale. */
.bars { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

.bar {
  display: grid;
  grid-template-columns: 90px 1fr 70px;
  align-items: center;
  gap: 10px;
  font-size: 14px;
}

.bar__label { color: var(--color-neutral-700); font-weight: 600; }

.bar__track {
  height: 10px;
  background: var(--color-neutral-200);
  border-radius: 999px;
  overflow: hidden;
}

.bar__fill {
  display: block;
  height: 100%;
  background: var(--color-accent-500);
  border-radius: 999px;
}

.bar__value { font-weight: 700; color: var(--color-text); text-align: start; }

@media (max-width: 520px) {
  .bar { grid-template-columns: 72px 1fr 62px; font-size: 13px; }
  .chart { height: 170px; }
}

.analysis__table { width: 100%; border-collapse: collapse; font-size: 14.5px; }

.analysis__table th {
  text-align: right;
  font-weight: 600;
  font-size: 12.5px;
  color: var(--color-neutral-600);
  padding-bottom: 8px;
}

.analysis__table td { padding: 7px 0; border-top: 1px solid var(--color-neutral-200); }
.analysis__table td:first-child { font-weight: 600; }

/* --- Baisses --------------------------------------------------------- */

.drops, .bests, .airlines { list-style: none; margin: 0; padding: 0; }

.drop, .best {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 0;
  font-size: 14.5px;
  border-top: 1px solid var(--color-neutral-200);
}

.drop:first-child, .best:first-child { border-top: none; }

.drop__date, .best__dates { flex: 0 0 auto; font-weight: 600; }
.drop__airline, .best__airline { flex: 1; color: var(--color-neutral-600); font-size: 13.5px; }

.drop__prices s { color: var(--color-neutral-500); }
.drop__prices strong { color: var(--color-text); }

/* Une baisse est la seule bonne nouvelle de la page : elle a sa couleur. */
.drop__delta {
  flex: 0 0 auto;
  font-weight: 700;
  color: #17795e;
}

/* Plus d'espace entre les 3 valeurs (avant barre, apres, economie) —
   demande le 21/08/2026. Regle ajoutee separement plutot que d'augmenter
   le gap partage avec .best : .best n'a que 3 elements (dates, compagnie,
   prix), .drop en a 4 (date, compagnie, avant/apres, economie) — les
   deux n'ont pas besoin du meme espacement. */
.drop { gap: 20px; }
.drop__prices { display: inline-flex; gap: 10px; }

.best__price {
  flex: 0 0 auto;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 17px;
  color: var(--color-accent);
}

/* --- Compagnies ------------------------------------------------------ */

.airline {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 14.5px;
  border-top: 1px solid var(--color-neutral-200);
}

.airline:first-child { border-top: none; }
.airline__name { flex: 1; }

.airline__tag {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-neutral-100);
  color: var(--color-neutral-600);
}

.airline__price { font-weight: 600; color: var(--color-accent); }

/* --- Invitation ------------------------------------------------------ */

.analysis__cta { margin-top: 24px; }

@media (max-width: 560px) {
  .analysis { padding: 18px 16px; }
  .drop, .best { flex-wrap: wrap; gap: 6px 10px; }
  .tabs { width: 100%; }
  .tab { flex: 1; padding: 9px 12px; }
}

/* Les lignes cliquables de l'analyse.

   Un prix qui ne mene nulle part envoie chercher le vol ailleurs : chaque
   offre et chaque baisse ouvre le partenaire. */
.drop--link, .best--link {
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius-sm);
  padding-inline: 8px;
  margin-inline: -8px;
  transition: background .15s;
}

.drop--link:hover, .best--link:hover {
  background: var(--color-neutral-100);
  text-decoration: none;
}

.drops li, .bests li { list-style: none; }

/* Passage a la recherche depuis l'analyse. Un bouton seul, sans texte
   d'accompagnement : le visiteur vient de lire, il sait ce qu'il veut. */
.analysis__next {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--color-divider);
}

/* =====================================================================
   Pages de destination

   Contenu editorial genere depuis la base. Une seule colonne, mesure
   courte : ces pages se lisent, elles ne s'utilisent pas.
   ===================================================================== */

/* Banniere en tete des pages destination (27/08/2026) : la meme image
   que le partage, cliquable vers une recherche pre-remplie. */
.page-banniere {
  display: block;
  margin-bottom: 28px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  transition: transform .15s;
}

.page-banniere:hover { transform: translateY(-2px); }

.page-banniere img {
  display: block;
  width: 100%;
  height: auto;
}

/* Masque a l'ecran, lu par Google et les lecteurs d'ecran. Le titre de
   ces pages est desormais incruste dans la banniere : une image, meme
   avec un alt, ne remplace pas un <h1> dans la structure du document.

   Selecteur double (.visually-hidden.visually-hidden) pour passer devant
   `.page-article h1`, plus specifique -- constate le 27/08/2026 : le
   titre restait visible sous la banniere, en doublon. */
.visually-hidden.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.page-article {
  max-width: 680px;
  margin: 0 auto;
  padding: 40px clamp(20px, 4vw, 32px) 80px;
  font-size: 17px;
  line-height: 1.7;
}

.page-article h1 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(28px, 5vw, 40px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.page-article h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 23px;
  margin: 44px 0 14px;
}

.page-article p { margin: 0 0 16px; }

.page-lead {
  font-size: 19px;
  color: color-mix(in srgb, var(--color-text) 80%, transparent);
  margin-bottom: 28px !important;
}

/* Le nom anglais, en incise. */
.page-en {
  direction: ltr;
  unicode-bidi: isolate;
  color: var(--color-neutral-500);
}

/* La reponse a la question du titre. Elle doit se voir sans lire le
   reste : beaucoup de visiteurs ne veulent que ce chiffre.

   27/08/2026 : ce bloc a ete RETIRE du generateur -- la banniere en tete
   de page porte desormais la meme reponse, le repeter juste en dessous
   faisait doublon. Le style reste en place tant que des pages generees
   avant cette date sont en ligne ; le supprimer maintenant les
   afficherait cassees jusqu'a leur regeneration. A nettoyer une fois
   les 30 pages regenerees. */
.page-answer {
  margin: 28px 0 36px;
  padding: 24px;
  background: var(--color-accent-100);
  border-top: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
}

.page-answer__label {
  margin: 0 0 6px !important;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--color-accent-700);
}

.page-answer__value {
  margin: 0 0 4px !important;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 30px;
  line-height: 1.1;
}

.page-answer__detail {
  margin: 0 !important;
  font-size: 15px;
  color: var(--color-accent-700);
  font-weight: 600;
}

.page-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 24px;
  font-size: 16px;
}

.page-table th {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-neutral-600);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-divider);
}

.page-table td {
  padding: 11px 0;
  border-bottom: 1px solid var(--color-neutral-200);
}

.page-table td:first-child { font-weight: 600; }

/* Les reserves methodologiques. Discretes mais presentes : une page qui
   avance des chiffres sans dire d'ou ils viennent ne merite pas d'etre
   crue. */
.page-note {
  font-size: 14px;
  color: var(--color-neutral-500);
  line-height: 1.6;
}

.page-cta {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--color-divider);
  text-align: center;
}

.page-cta p { font-size: 18px; margin-bottom: 16px !important; }

@media (max-width: 560px) {
  .page-article { padding: 28px 18px 60px; font-size: 16px; }
  .page-answer { padding: 20px; }
  .page-answer__value { font-size: 26px; }
}

/* --- Grille de cartes dynamiques (deals-grid) -------------------------
   Ajoutee le 25/08/2026, en plus du carrousel existant (pas a sa place
   pour l'instant) -- plusieurs destinations visibles simultanement,
   avec vraie photo, construites en HTML/CSS reel (pas des images PNG
   pre-generees) a partir du meme manifest.json que le carrousel. */
.deals-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 4px 2px 16px;
  scroll-snap-type: x proximity;
}

.deals-grid::-webkit-scrollbar { height: 6px; }
.deals-grid::-webkit-scrollbar-thumb { background: var(--color-neutral-300); border-radius: 999px; }

.deals-grid__note {
  color: var(--color-text-muted, #6b6353);
  font-size: 14px;
  margin: 2px 2px 0;
  line-height: 1.5;
}

.deal-card {
  flex: 0 0 auto;
  width: 220px;
  scroll-snap-align: start;
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--color-surface);
  transition: transform .15s, box-shadow .15s;
}

.deal-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

.deal-card__photo {
  position: relative;
  width: 100%;
  height: 130px;
  background: var(--color-neutral-200) center/cover no-repeat;
}

.deal-card__badge {
  position: absolute;
  top: 10px;
  inset-inline-start: 10px;
  background: var(--color-accent-2);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  padding: 3px 9px;
  border-radius: 999px;
}

.deal-card__dates {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  background: color-mix(in srgb, #000 45%, transparent);
  color: #fff;
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 999px;
}

.deal-card__body { padding: 12px 14px 14px; }
.deal-card__city { font-family: var(--font-heading); font-weight: 700; font-size: 18px; margin: 0; }
.deal-card__from { font-size: 12.5px; color: var(--color-neutral-600); margin: 2px 0 6px; }
.deal-card__before { font-size: 13px; color: var(--color-neutral-500); text-decoration: line-through; }
.deal-card__after { font-size: 22px; font-weight: 800; color: var(--color-accent-500); }

@media (max-width: 560px) {
  .deal-card { width: 170px; }
  .deal-card__photo { height: 100px; }
}

/* --- Barre de recherche horizontale (search-bar) ----------------------
   Ajoutee le 25/08/2026 : reproduit fidelement le motif standard des
   sites de vols (Opodo, Kayak, Skyscanner, Google Flights -- tous tres
   proches sur ce point) -- un seul bandeau large, champs colles les uns
   aux autres avec des separateurs, bouton de recherche a la fin.
   Remplace l'ancienne carte verticale (search-form en <div class="card">)
   demandee explicitement "petite, dans la largeur". */
.search-bar {
  display: flex;
  align-items: stretch;
  background: var(--color-surface);
  border-radius: 999px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--color-divider);
  /* Pas d'overflow:hidden ici : #dest-list (autocomplete) est en
     position:absolute et doit deborder SOUS la barre. Avec
     overflow:hidden, la liste existait dans le DOM mais etait
     visuellement decoupee -- invisible a l'ecran (constate le
     25/08/2026 : le test la trouvait, la capture ne la montrait pas).
     Les coins arrondis des elements aux extremites sont geres
     individuellement plus bas. */
}

.search-bar__field:first-child {
  border-start-start-radius: 999px;
  border-end-start-radius: 999px;
}

.search-bar__field {
  flex: 1 1 0;
  min-width: 0;
  padding: 10px 20px;
  border-inline-start: 1px solid var(--color-divider);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Les champs date ont besoin d'un peu plus de place que les autres :
   l'icone native du calendrier s'ajoute au texte, et le format complet
   (jj/mm/aaaa) ne doit pas etre tronque. Constate le 25/08/2026 au
   premier rendu de la barre. */
.search-bar__field:has(input[type="date"]) { flex: 1.2 1 0; }

.search-bar__field:first-child { border-inline-start: none; }

.search-bar__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-neutral-500);
  margin: 0 0 2px;
}

.search-bar__field input,
.search-bar__field select {
  border: none;
  background: none;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  width: 100%;
  outline: none;
}

.search-bar__submit {
  flex: 0 0 auto;
  border-radius: 999px;
  margin: 6px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
}

/* Ligne d'options sous la barre de recherche -- 25/08/2026, remplace le
   <details> "עוד אפשרויות" qui prenait trop de place une fois deplie.
   Tout est visible en permanence, sur une ligne, en petits selects
   discrets qui ne concurrencent pas la barre principale. */
.search-options {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-inline: 8px;
}

.search-options__select {
  border: 1px solid var(--color-divider);
  background: var(--color-surface);
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-neutral-700);
  cursor: pointer;
}

.search-options__select:hover { border-color: var(--color-accent-400); }

/* Bouton « כל היעדים » : meme forme que les selects voisins, mais en
   accent pour qu'il se remarque -- c'est une action, pas un reglage. */
.search-options__anywhere {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--color-accent-400);
  background: none;
  color: var(--color-accent-500);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
}

.search-options__anywhere:hover {
  background: var(--color-accent-500);
  color: #fff;
}

/* Barre a champ unique (panneau d'analyse) : sans deuxieme champ pour
   equilibrer, le bouton heritait d'une hauteur egale a la barre entiere
   et devenait un disque deforme -- constate le 26/08/2026. Hauteur
   bornee et arrondi normal le remettent d'aplomb. */
.search-bar__submit {
  align-self: center;
  padding-block: 13px;
}

@media (max-width: 720px) {
  .search-bar { flex-direction: column; border-radius: var(--radius-lg); }
  .search-bar__field { border-inline-start: none; border-top: 1px solid var(--color-divider); }
  .search-bar__field:first-child { border-top: none; }
  .search-bar__submit { margin: 10px; }
}