/* Vitrine publique.
 *
 * Elle s'adresse à deux visiteurs qui n'ont rien en commun : un voyageur qui
 * découvre le service depuis son téléphone, et un restaurateur qui évalue s'il
 * a intérêt à y venir. D'où deux chemins clairs dès le premier écran plutôt
 * qu'une longue explication.
 *
 * Le socle commun (couleurs, boutons) vient de /shared/style.css : cette
 * feuille n'ajoute que la mise en page d'une page de présentation, qui
 * n'existe nulle part ailleurs dans le produit.
 */

.contenu-large { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.contenu-etroit { max-width: 620px; margin: 0 auto; padding: 0 20px; }

.entete-site {
  border-bottom: 1px solid var(--trait);
  position: sticky; top: 0; z-index: 10;
  background: rgba(15, 17, 21, .92);
  backdrop-filter: blur(8px);
}
.barre { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 68px; }
.marque { display: inline-flex; flex: none; text-decoration: none; }
.marque .logo-entete { width: 172px; }
.liens-entete { display: flex; align-items: center; gap: 22px; }
.liens-entete a { color: var(--texte-faible); text-decoration: none; font-size: 15px; }
.liens-entete a:hover { color: var(--texte); }
.bouton-lien {
  background: var(--accent); color: #05121f !important;
  padding: 9px 16px; border-radius: 10px; font-weight: 600;
}

.heros { padding: 76px 0 64px; }
.heros h1 {
  font-size: clamp(32px, 5.6vw, 52px); line-height: 1.1;
  margin: 0 0 20px; letter-spacing: -.02em; max-width: 15ch;
}
.accroche {
  font-size: clamp(17px, 2.2vw, 20px); line-height: 1.6;
  color: var(--texte-faible); max-width: 56ch; margin: 0 0 32px;
}
.actions-heros { display: flex; flex-wrap: wrap; gap: 12px; }
.bouton {
  display: inline-block; padding: 14px 24px; border-radius: 12px;
  font-weight: 600; text-decoration: none; font-size: 16px;
}
.bouton.principal { background: var(--accent); color: #05121f; }
.bouton.secondaire { background: var(--carte-haute); color: var(--texte); border: 1px solid var(--trait); }

.section { padding: 64px 0; }
.section-sombre { background: var(--carte); border-block: 1px solid var(--trait); }
.section h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 0 0 12px; letter-spacing: -.01em; }
.section .sous-titre { color: var(--texte-faible); margin: 0 0 28px; line-height: 1.6; }

.parcours { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 20px; }
@media (min-width: 760px) { .parcours { grid-template-columns: repeat(2, 1fr); gap: 28px; } }
.parcours li {
  display: block;
  background: var(--carte); border: 1px solid var(--trait);
  border-radius: var(--rayon); padding: 22px;
}
.numero {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--accent); color: #05121f; font-weight: 700; font-size: 15px;
}
.parcours h3 { margin: 14px 0 8px; font-size: 17px; }
.parcours p { margin: 0; color: var(--texte-faible); line-height: 1.6; font-size: 15px; }

.grille-atouts { display: grid; gap: 20px; margin-top: 28px; }
@media (min-width: 760px) { .grille-atouts { grid-template-columns: repeat(2, 1fr); } }
.atout h3 { margin: 0 0 8px; font-size: 17px; }
.atout p { margin: 0; color: var(--texte-faible); line-height: 1.6; font-size: 15px; }

/* Le formulaire reprend les champs du socle commun ; seul l'agencement en
   deux colonnes sur grand écran est propre à cette page. */
.paire-champs { display: grid; gap: 0; }
@media (min-width: 620px) { .paire-champs { grid-template-columns: 1fr 1fr; gap: 0 16px; } }
textarea {
  width: 100%; background: var(--carte-haute); color: var(--texte);
  border: 1px solid var(--trait); border-radius: 10px;
  padding: 12px 14px; font: inherit; font-size: 16px;
  min-height: 96px; resize: vertical;
}
textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

.pied { border-top: 1px solid var(--trait); padding: 26px 0; margin-top: 20px; }
.pied .contenu-large { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.pied .faible { color: var(--texte-faible); }
.logo-pied { display: block; width: 146px; height: auto; }

@media (max-width: 680px) {
  .liens-entete a:not(.bouton-lien) { display: none; }
}

@media (max-width: 380px) {
  .barre { gap: 12px; }
  .marque .logo-entete { width: 142px; }
  .bouton-lien { padding-inline: 12px; }
}