/* KiloGo — page vitrine publique. Mêmes couleurs et mêmes styles que l'application (styles.css), quelques
   ajouts seulement. Pensée d'abord pour le téléphone. */
.vitrine-haut { padding-bottom: 30px; }
.vitrine-haut h1 { font-size: 30px; }
.essai-vitrine {
  margin-top: 4px; padding: 12px 14px; border-radius: 16px;
  background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1.5px var(--vert-sur-nuit);
  color: #ffffff !important; font-weight: 800; font-size: 18px; line-height: 1.35;
}
.actions-vitrine { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.actions-bas { margin-top: 0; }
.bouton-gp { --accent: var(--vert); }
.bouton-client { --accent: var(--bleu); }
.titre-section { padding: 6px 2px 0; }
.offre h3 { line-height: 1.3; }
.offre .prix-entier { white-space: nowrap; }
.partie { display: flex; flex-direction: column; gap: 10px; }
.partie + .partie { margin-top: 6px; }
.partie-client { --accent: var(--bleu); }
.partie-client h3 { color: var(--bleu); }
.partie-gp { --accent: var(--vert); }
.partie-gp h3 { color: var(--vert); }
.garanties li { line-height: 1.45; }
[hidden] { display: none !important; }

/* Drapeaux (emoji) à côté de « CANADA ↔ SÉNÉGAL », comme sur les affiches des GP. */
.vitrine-haut .sourcil { display: flex; align-items: center; gap: 8px; }
.drapeau { font-size: 22px; line-height: 1; letter-spacing: 0; text-transform: none; }

/* Illustration du haut : dessin seulement (aucune photo). Bleu = Canada, vert = Sénégal. */
.illustration-vitrine { display: block; width: 100%; height: auto; max-height: 124px; overflow: visible; margin: 0 0 2px; }
.illu-arc { fill: none; stroke: rgba(255, 255, 255, 0.72); stroke-width: 2.5; stroke-dasharray: 2 9; stroke-linecap: round; }
.illu-halo-ca { fill: rgba(91, 149, 255, 0.18); stroke: rgba(143, 184, 255, 0.55); stroke-width: 1.5; }
.illu-halo-sn { fill: rgba(111, 224, 166, 0.16); stroke: rgba(111, 224, 166, 0.5); stroke-width: 1.5; }
.illu-ca, .illu-scotch-ca { fill: var(--bleu-sur-nuit); }
.illu-sn, .illu-scotch-sn { fill: var(--vert-sur-nuit); }
.illu-avion { fill: #ffffff; }
.illu-colis { fill: #f4f7fb; stroke: rgba(13, 27, 46, 0.35); stroke-width: 1; }

/* Annonces publiques : couleur des clients (bleu). */
.annonces-vitrine { --accent: var(--bleu); --accent-clair: var(--bleu-clair); scroll-margin-top: 12px; }
.choix-annonces { display: flex; flex-direction: column; gap: 12px; }
.choix-annonces .bascule { background: #e9eef4; }
.choix-annonces .bascule .bouton { color: var(--gris); }
.choix-annonces .bascule .bouton[aria-pressed="true"] { background: var(--surface); color: var(--bleu); box-shadow: 0 2px 6px rgba(13, 27, 46, 0.1); }
.choix-annonces input { min-height: 52px; }
/* Dans la carte, la place est plus étroite : chaque sens reste entier dans son bouton (2 lignes si besoin). */
.choix-annonces .bascule { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.choix-annonces .bascule .bouton { min-width: 0; font-size: 16px; line-height: 1.2; white-space: normal; text-align: center; }

/* Section « Pas encore de GP sur votre trajet ? » : couleur des clients (bleu), juste sous le haut de page.
   Remarquable sans être agressive : léger reflet bleu, cloche qui sonne deux fois à l'arrivée puis une onde douce.
   Animations seulement sur transform / opacity (rien de lourd pour le téléphone) ; coupées si le téléphone
   demande moins d'animations (règle commune de styles.css). */
.alerte-vitrine {
  --accent: var(--bleu); --accent-clair: var(--bleu-clair);
  overflow: hidden; isolation: isolate; scroll-margin-top: 12px;
  background: linear-gradient(180deg, #f3f7ff 0, var(--surface) 70%);
  box-shadow: 0 0 0 1.5px rgba(37, 99, 235, 0.22), 0 1px 2px rgba(13, 27, 46, 0.08), 0 14px 30px -16px rgba(37, 99, 235, 0.55);
  animation: alerte-arrivee 0.5s ease-out both;
}
/* Fine ligne bleue en haut de la carte, et un reflet qui passe une seule fois. */
.alerte-vitrine::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 4px; z-index: -1;
  background: linear-gradient(90deg, var(--bleu), var(--bleu-sur-nuit), var(--bleu));
}
.alerte-vitrine::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(169, 200, 255, 0.35) 50%, transparent 65%);
  transform: translateX(-100%); animation: alerte-reflet 1.6s ease-in-out 0.6s 1 both;
}
.alerte-vitrine { position: relative; }
.alerte-tete { display: flex; align-items: center; gap: 14px; }
.alerte-tete h2 { font-size: 22px; line-height: 1.2; color: var(--encre); }
.alerte-cloche {
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 16px; display: grid; place-items: center;
  background: linear-gradient(160deg, #4f86f7, var(--bleu));
  box-shadow: 0 8px 18px -8px rgba(37, 99, 235, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.alerte-cloche svg { width: 28px; height: 28px; fill: #ffffff; transform-origin: 50% 12%; animation: alerte-sonne 0.9s ease-in-out 0.9s 2 both; }
/* Onde douce autour de la cloche, lente et légère. */
.alerte-cloche::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.45);
  opacity: 0; animation: alerte-onde 3.6s ease-out 2.8s infinite;
}
.alerte-vitrine p.alerte-texte { color: var(--gris); font-size: 17px; line-height: 1.45; margin: -4px 0 0; }
.alerte-vitrine .bascule { background: #e9eef4; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.alerte-vitrine .bascule .bouton { color: var(--gris); min-width: 0; font-size: 16px; line-height: 1.2; white-space: normal; text-align: center; }
.alerte-vitrine .bascule .bouton[aria-pressed="true"] { background: var(--surface); color: var(--bleu); box-shadow: 0 2px 6px rgba(13, 27, 46, 0.1); }
.alerte-vitrine .alerte-corridor > .bouton { margin-top: 0; width: 100%; }
/* Le formulaire s'ouvre dans la carte : pas de seconde carte avec ombre, juste une séparation fine. */
.alerte-vitrine .formulaire-alerte { margin-top: 0; padding: 16px 0 0; border-radius: 0; box-shadow: none; background: none; border-top: 1px solid var(--trait); }

@keyframes alerte-arrivee { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes alerte-reflet { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@keyframes alerte-sonne {
  0%, 100% { transform: rotate(0); } 15% { transform: rotate(14deg); } 30% { transform: rotate(-12deg); }
  45% { transform: rotate(8deg); } 60% { transform: rotate(-5deg); } 75% { transform: rotate(2deg); }
}
@keyframes alerte-onde { 0% { opacity: 0.9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.45); } }
/* La règle commune (styles.css) ne touche pas les ::after : on coupe aussi le reflet et l'onde. */
@media (prefers-reduced-motion: reduce) {
  .alerte-vitrine::after, .alerte-cloche::after { animation: none !important; opacity: 0; }
}

/* Essai gratuit des GP : en premier, avant l'outil et les offres (vert = GP). */
.essai-gp { box-shadow: inset 0 0 0 2px var(--vert); }
.essai-gp h2 { color: var(--vert); }
.essai-chiffre { font-size: 20px; font-weight: 800; line-height: 1.3; }
.liste-outil { display: flex; flex-direction: column; gap: 10px; margin: 0; padding-left: 20px; }
.liste-outil li { line-height: 1.45; }

/* Pages légales (Conditions d'utilisation, Politique de confidentialité) et liens du bas de page. */
.texte-legal h2 { font-size: 20px; margin-top: 10px; }
.texte-legal h3 { font-size: 18px; margin-top: 6px; }
.texte-legal p, .texte-legal li { line-height: 1.5; }
.liste-legale { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-left: 20px; }
.maj-legale { font-size: 16px; }
.retour-legal { color: #ffffff; font-weight: 700; text-decoration: none; }

/* ===== Ordinateur (grand écran, 900 px et plus) : la page utilise la largeur de l'écran. =====
   Téléphone et petite tablette : RIEN ne change (tout ce qui suit est seulement dans ce bloc).
   Fonds de couleur sur toute la largeur, contenu jusqu'à 1200 px, cartes côte à côte. Mêmes couleurs, textes, boutons. */
@media (min-width: 900px) {
  body.vitrine {
    --large: 1200px;
    --colonnes: [plein-debut] minmax(32px, 1fr) [contenu-debut] minmax(0, calc(var(--large) / 2 - 12px)) [milieu]
      minmax(0, calc(var(--large) / 2 - 12px)) [contenu-fin] minmax(32px, 1fr) [plein-fin];
  }
  body.vitrine .bandeau-haut-interieur { max-width: var(--large); }
  body.vitrine main {
    max-width: none; padding: 0 0 48px;
    display: grid; grid-template-columns: var(--colonnes); column-gap: 24px; row-gap: 24px; align-items: start;
  }
  body.vitrine main > * { grid-column: contenu-debut / contenu-fin; min-width: 0; }
  /* Plus fort que « #ecran:has(#liste-annonces) { gap: 12px } » de styles.css (téléphone, inchangé). */
  body.vitrine #ecran#ecran { column-gap: 24px; row-gap: 24px; }

  /* Haut de page : fond nuit sur toute la largeur ; texte et boutons à gauche, dessin du trajet à droite. */
  body.vitrine main > .ciel {
    grid-column: plein-debut / plein-fin; margin: 0; padding: 36px 0 72px; border-radius: 0 0 40px 40px;
    display: grid; grid-template-columns: var(--colonnes); column-gap: 24px; row-gap: 14px; align-content: start;
  }
  body.vitrine main > .ciel > * { grid-column: contenu-debut / milieu; min-width: 0; }
  body.vitrine .vitrine-haut h1 { font-size: 40px; line-height: 1.12; }
  body.vitrine .vitrine-haut p { font-size: 18px; }
  body.vitrine .vitrine-haut .illustration-vitrine {
    grid-column: milieu / contenu-fin; grid-row: 1 / span 6; align-self: center; max-height: 260px; margin: 0;
  }
  body.vitrine .vitrine-haut .actions-vitrine { flex-direction: row; flex-wrap: wrap; }
  body.vitrine .vitrine-haut .actions-vitrine .bouton { flex: 1 1 220px; }
  body.vitrine main > .ciel + * { margin-top: -40px; }

  /* « Pas encore de GP sur votre trajet ? » : explication à gauche, choix du sens et bouton à droite. */
  body.vitrine .alerte-vitrine {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 12px; align-items: center;
    padding: 24px 28px;
  }
  body.vitrine .alerte-vitrine > .alerte-tete { grid-column: 1; grid-row: 1; align-self: end; }
  body.vitrine .alerte-vitrine > .alerte-texte { grid-column: 1; grid-row: 2; margin: 0; align-self: start; }
  body.vitrine .alerte-vitrine > .bascule { grid-column: 2; grid-row: 1; }
  body.vitrine .alerte-vitrine > #zone-alerte-vitrine { grid-column: 2; grid-row: 2 / span 2; }

  /* Annonces des GP : le choix en haut (titre à gauche, sens et ville à droite), puis 3 annonces par ligne. */
  body.vitrine .choix-annonces {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 12px; align-items: center;
    padding: 24px 28px;
  }
  body.vitrine .choix-annonces > h2 { grid-column: 1; grid-row: 1; align-self: end; }
  body.vitrine .choix-annonces > .doux { grid-column: 1; grid-row: 2; align-self: start; }
  body.vitrine .choix-annonces > .bascule { grid-column: 2; grid-row: 1; }
  body.vitrine .choix-annonces > .champ { grid-column: 2; grid-row: 2; }
  body.vitrine #liste-annonces { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 24px; align-items: start; }
  body.vitrine #liste-annonces > :not(.billet) { grid-column: 1 / -1; }

  /* Essai gratuit et outil côte à côte ; les 3 offres sur une ligne. */
  body.vitrine main > .essai-gp { grid-column: contenu-debut / milieu; align-self: stretch; }
  body.vitrine main > .outil-vitrine { grid-column: milieu / contenu-fin; align-self: stretch; }
  body.vitrine .essai-gp .bouton { margin-top: auto; }
  body.vitrine .offres-vitrine { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
  body.vitrine .offres-vitrine > h2 { grid-column: 1 / -1; }

  /* Comment ça marche : clients et GP côte à côte ; garanties sur 2 colonnes. */
  body.vitrine .comment-vitrine { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; row-gap: 12px; }
  body.vitrine .comment-vitrine > h2 { grid-column: 1 / -1; }
  body.vitrine .comment-vitrine .partie + .partie { margin-top: 0; }
  body.vitrine .garanties { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; row-gap: 10px; }

  /* Boutons du bas : côte à côte, centrés. */
  body.vitrine .actions-bas { flex-direction: row; justify-content: center; }
  body.vitrine .actions-bas .bouton { flex: 0 1 340px; }

  /* Page d'un voyage : la carte de l'annonce à gauche, les autres boutons à droite. */
  body.page-voyage main > .ciel > * { grid-column: contenu-debut / contenu-fin; }
  body.page-voyage main > #cartes-voyage { grid-column: contenu-debut / milieu; margin-top: 0; }
  body.page-voyage main > .actions-bas {
    grid-column: milieu / contenu-fin; grid-row: 2; flex-direction: column; justify-content: flex-start;
    position: sticky; top: 16px;
  }
  body.page-voyage main > .actions-bas .bouton { flex: none; }

  /* Pages légales : texte dans une colonne confortable à lire (760 px), petite liste des sections à côté. */
  body.page-legale main {
    grid-template-columns: [plein-debut] minmax(32px, 1fr) [contenu-debut] 260px [milieu] minmax(0, 760px) [contenu-fin] minmax(32px, 1fr) [plein-fin];
  }
  body.page-legale #ecran#ecran { column-gap: 40px; }
  body.page-legale main > .ciel { grid-template-columns: [plein-debut] minmax(32px, 1fr) [contenu-debut] minmax(0, 1060px) [contenu-fin] minmax(32px, 1fr) [plein-fin]; column-gap: 40px; }
  body.page-legale main > .ciel > * { grid-column: contenu-debut / contenu-fin; }
  body.page-legale main > .texte-legal { grid-column: milieu / contenu-fin; grid-row: 2; padding: 28px 32px; }
  body.page-legale main > .sommaire-legal { display: block; grid-column: contenu-debut / milieu; grid-row: 2; position: sticky; top: 16px; }
}

/* Petite liste des sections des pages légales : seulement sur ordinateur (cachée sur téléphone). */
.sommaire-legal { display: none; }
.sommaire-legal ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.sommaire-legal a { display: block; padding: 8px 12px; border-radius: 12px; color: var(--encre); font-weight: 700; font-size: 16px; line-height: 1.35; text-decoration: none; }
.sommaire-legal a:hover { background: var(--surface); }