/*
  Feuille de style de la vitrine.
  Écrite à la main plutôt que reprise de l'application : celle-ci utilise
  Tailwind et un pas de compilation, dont une page de présentation n'a pas
  besoin. Les couleurs et les polices, elles, sont bien les mêmes — c'est le
  même produit, et un visiteur qui passe de la vitrine à l'application ne doit
  pas avoir l'impression de changer de maison.
*/

:root {
  --mer: #0d5c63;
  --mer-clair: #3a8891;
  --mer-50: #e8f1f2;
  --mer-900: #063337;
  --roche: #c1502e;
  --roche-clair: #e07a52;
  --sable: #f4ecdf;
  --sable-100: #faf6ee;
  --sable-fonce: #e8dcc6;
  --maquis: #3d4a2f;
  --encre: #241c17;
  --gris: #6b625a;
  --or: #b08d3f;

  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ombre: 0 8px 30px rgb(36 28 23 / 0.08);
  --large: 1080px;
  --etroit: 660px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--sable);
  color: var(--encre);
  font-family: var(--serif);
  font-size: 18px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: var(--serif);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 0.5em;
}

h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.4rem);
}
h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  color: var(--mer);
}
h3 {
  font-size: 1.15rem;
}

p {
  margin: 0 0 1em;
}

a {
  color: var(--mer);
}

.contenu {
  max-width: var(--large);
  margin: 0 auto;
  padding: 0 24px;
}
.contenu-etroit {
  max-width: var(--etroit);
  margin: 0 auto;
  padding: 0 24px;
}
.centre {
  text-align: center;
}

.surtitre {
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--roche);
  margin-bottom: 0.9em;
}

.sous-titre {
  color: var(--gris);
  margin-top: -0.4em;
}

.mention {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: var(--gris);
}
/* Sur un fond sombre, le gris de lecture devient illisible : les mentions y
   passent en crème. Elles disent une chose qui compte — « sans carte
   bancaire » — et ne doivent pas s'effacer. */
.mention.pale,
.hero .mention,
.finale .mention {
  color: rgb(244 236 223 / 0.78);
}

/* ---------- Boutons ---------- */

.bouton {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  border-radius: 999px;
  transition:
    background-color 0.15s ease,
    color 0.15s ease;
  white-space: nowrap;
}

.bouton-fort {
  background: var(--roche);
  color: #fff;
}
.bouton-fort:hover {
  background: var(--roche-clair);
}

.bouton-fin {
  border: 1px solid var(--mer);
  color: var(--mer);
  padding: 11px 22px;
}
.bouton-fin:hover {
  background: var(--mer);
  color: #fff;
}

.bouton-clair {
  background: var(--sable);
  color: var(--mer-900);
}
.bouton-clair:hover {
  background: #fff;
}

.bouton.large {
  display: block;
  text-align: center;
}

.actions {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 1.6em;
}
.actions-centre {
  justify-content: center;
}

/* ---------- Bandeau ---------- */

.bandeau {
  background: var(--mer);
  color: var(--sable-100);
}
.bandeau-inner {
  max-width: var(--large);
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.marque {
  font-family: var(--serif);
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--sable-100);
  text-decoration: none;
}
.bandeau-liens {
  display: flex;
  align-items: center;
  gap: 26px;
}
.bandeau-liens a {
  font-family: var(--sans);
  font-size: 0.82rem;
  color: var(--sable-100);
  text-decoration: none;
}
.bandeau-liens a:hover {
  text-decoration: underline;
  text-underline-offset: 5px;
}
.bandeau-liens .bouton-fin {
  border-color: rgb(244 236 223 / 0.5);
  color: var(--sable-100);
}
.bandeau-liens .bouton-fin:hover {
  background: var(--sable-100);
  color: var(--mer);
  text-decoration: none;
}

/* ---------- Hero ---------- */

.hero {
  background: var(--mer);
  color: var(--sable-100);
  padding: 56px 24px 72px;
  display: grid;
  gap: 48px;
  grid-template-columns: 1fr;
  max-width: var(--large);
  margin: 0 auto;
  align-items: center;
}
@media (min-width: 900px) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
    padding: 72px 24px 90px;
  }
}
.hero {
  /* Le fond doit couvrir toute la largeur, pas seulement la colonne centrale. */
  max-width: none;
}
.hero-texte {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 900px) {
  .hero-texte {
    margin-left: auto;
    margin-right: 0;
    padding-right: 40px;
  }
}
.hero h1 {
  color: #fff;
}
.hero .surtitre {
  color: var(--roche-clair);
}
.chapeau {
  font-size: 1.1rem;
  color: rgb(244 236 223 / 0.9);
}

/* ---------- L'aperçu dessiné ---------- */

.hero-apercu {
  display: flex;
  justify-content: center;
}
.telephone {
  /* L'aperçu est posé dans le hero, dont le texte est crème. Sans cette ligne,
     le contenu des cartes hérite de cette couleur et disparaît sur leur fond
     blanc. Il lui faut sa propre encre : c'est un morceau d'application, pas
     un morceau de bandeau. */
  color: var(--encre);
  width: 300px;
  background: var(--sable);
  border-radius: 34px;
  padding: 10px;
  box-shadow: 0 24px 60px rgb(0 0 0 / 0.28);
  border: 1px solid rgb(255 255 255 / 0.12);
}
.tel-haut {
  background: var(--mer-900);
  border-radius: 26px 26px 12px 12px;
  padding: 22px 16px 18px;
  text-align: center;
}
.tel-surtitre {
  display: block;
  font-family: var(--sans);
  font-size: 0.52rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--roche-clair);
  margin-bottom: 6px;
}
.tel-titre {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: #fff;
}
.tel-corps {
  padding: 12px 10px 16px;
}
.carte-voyage {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--ombre);
}
.carte-photo {
  height: 96px;
  background: linear-gradient(160deg, var(--mer-clair), var(--mer-900));
  position: relative;
  padding: 10px;
}
.pastille {
  display: inline-block;
  background: var(--roche);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
}
.carte-dates {
  position: absolute;
  left: 12px;
  bottom: 8px;
  font-family: var(--sans);
  font-size: 0.6rem;
  color: rgb(255 255 255 / 0.9);
}
.carte-bas {
  padding: 10px 12px 14px;
}
.carte-titre {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.25;
}
.ligne-jour {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  margin-top: 8px;
  font-family: var(--sans);
  font-size: 0.72rem;
  line-height: 1.35;
}
.ligne-jour small {
  color: var(--gris);
  font-size: 0.66rem;
}
.jour-num {
  background: var(--sable-fonce);
  color: var(--mer);
  font-weight: 700;
  font-size: 0.6rem;
  padding: 5px 8px;
  border-radius: 8px;
}
.coche {
  color: var(--maquis);
  font-weight: 700;
}
.coche.pale {
  color: var(--sable-fonce);
}

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

.section {
  padding: 72px 0;
}
.fond-clair {
  background: var(--sable-100);
}

.bande-probleme {
  background: var(--sable-100);
  padding: 64px 0;
  text-align: center;
}
.bande-probleme .fort {
  font-size: 1.15rem;
  color: var(--mer);
  margin-top: 1.2em;
}

.grille {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: 42px;
}
@media (min-width: 640px) {
  .grille {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 980px) {
  .grille {
    grid-template-columns: repeat(3, 1fr);
  }
}
.tuile {
  background: #fff;
  border: 1px solid var(--sable-fonce);
  border-radius: 18px;
  padding: 24px 22px;
}
.tuile .ico {
  font-size: 1.5rem;
  display: block;
  margin-bottom: 10px;
}
.tuile h3 {
  color: var(--mer);
}
.tuile p {
  font-size: 0.95rem;
  color: var(--gris);
  margin: 0;
}

.bande-recit {
  background: var(--maquis);
  color: var(--sable-100);
  padding: 64px 0;
  text-align: center;
}
.bande-recit h2 {
  color: #fff;
}
.bande-recit .surtitre {
  color: #c9d6b6;
}
.bande-recit p {
  color: rgb(244 236 223 / 0.9);
}

.promesses {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}
.promesses li {
  border-left: 3px solid var(--roche);
  padding: 4px 0 4px 18px;
  margin-bottom: 20px;
  font-size: 0.98rem;
  color: var(--gris);
}
.promesses b {
  color: var(--encre);
  display: block;
  font-family: var(--serif);
  font-size: 1.05rem;
}

/* ---------- Offres ---------- */

.offres {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  margin-top: 42px;
  align-items: start;
}
@media (min-width: 760px) {
  .offres {
    grid-template-columns: repeat(2, 1fr);
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
  }
}
.offre {
  background: #fff;
  border: 1px solid var(--sable-fonce);
  border-radius: 20px;
  padding: 30px 26px;
}
.offre-vedette {
  border: 2px solid var(--roche);
  position: relative;
  box-shadow: var(--ombre);
}
.ruban {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--roche);
  color: #fff;
  font-family: var(--sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  white-space: nowrap;
}
.offre h3 {
  color: var(--mer);
  font-size: 1.3rem;
  margin-bottom: 0.2em;
}
.prix {
  font-family: var(--serif);
  font-size: 2.4rem;
  font-weight: 600;
  margin: 0;
  line-height: 1.1;
}
.prix .par {
  font-size: 1rem;
  color: var(--gris);
  font-weight: 400;
}
.prix-detail {
  font-family: var(--sans);
  font-size: 0.8rem;
  color: var(--gris);
  margin-top: 4px;
}
.offre ul {
  list-style: none;
  padding: 0;
  margin: 22px 0 26px;
}
.offre li {
  font-size: 0.95rem;
  padding: 7px 0 7px 26px;
  position: relative;
  border-bottom: 1px solid var(--sable);
}
.offre li::before {
  content: "·";
  position: absolute;
  left: 8px;
  color: var(--roche);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
}
.offre li:last-child {
  border-bottom: 0;
}
.apres-offres {
  max-width: var(--etroit);
  margin: 36px auto 0;
  text-align: center;
  font-size: 0.95rem;
  color: var(--gris);
}

.bande-appareils {
  background: var(--mer-50);
  padding: 64px 0;
  text-align: center;
}

.question {
  border-top: 1px solid var(--sable-fonce);
  padding-top: 22px;
  margin-top: 22px;
}
.question h3 {
  color: var(--mer);
  margin-bottom: 0.3em;
}
.question p {
  font-size: 0.98rem;
  color: var(--gris);
  margin: 0;
}

.finale {
  background: var(--mer);
  color: #fff;
  padding: 80px 0;
}
.finale h2 {
  color: #fff;
  max-width: 20ch;
  margin: 0 auto 0.6em;
}

/* ---------- Pied ---------- */

.pied {
  background: var(--mer-900);
  color: rgb(244 236 223 / 0.8);
  padding: 34px 0;
}
.pied .contenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}
.pied-marque {
  font-family: var(--serif);
  font-size: 1.1rem;
  color: var(--sable-100);
  margin: 0;
}
.pied-liens {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
}
.pied-liens a {
  font-family: var(--sans);
  font-size: 0.78rem;
  color: rgb(244 236 223 / 0.8);
  text-decoration: none;
}
.pied-liens a:hover {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 5px;
}

/* Sur un petit écran, les liens du bandeau prennent trop de place :
   on garde le bouton, qui est ce pour quoi on est venu. */
@media (max-width: 560px) {
  .bandeau-liens a:not(.bouton) {
    display: none;
  }
}