/*
 * LE SITE VITRINE DE BOTOLEAGUE.
 *
 * LA MISE EN PAGE EST CELLE DE LA MAQUETTE DU PROPRIETAIRE, mesuree sur l'image (1122 x 2000, page
 * blanche de 1009 px) puis portee a une page de 1280 px : les cotes valent la mesure multipliee
 * par 1,27. Les couleurs sont celles de l'application (apps/mobile/src/ui/theme.ts), a la place
 * de l'indigo de la maquette.
 *
 * AUCUNE RESSOURCE EXTERIEURE, et une garde y veille (tests/proprete.test.mjs) : la police est
 * servie par le site, les icones de la barre d'etat sont un SVG en data URI.
 */

@font-face {
  font-family: "Outfit";
  src: url("/assets/outfit-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --bleu: #2e6bff;
  --bleu-fonce: #1f55d6;
  --encre: #0b0b0f;
  --gris: #8a8f98;
  --gris-doux: #a6abb3;
  --gris-clair: #f6f7f8;
  --bordure: #e9eaec;
  --blanc: #ffffff;
  --page: 1280px;
  --marge: 76px;
  --police: "Outfit", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  overflow-x: clip;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--bleu);
  outline-offset: 3px;
  border-radius: 8px;
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: 500;
  line-height: 1.15;
  text-wrap: balance;
}

/* LA PILULE BLEUE, le seul bouton de la maquette. */
.pilule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--bleu);
  color: var(--blanc);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.pilule:hover {
  background: var(--bleu-fonce);
}

.pilule:active {
  transform: translateY(1px);
}

.pilule--grande {
  height: 57px;
  padding: 0 34px;
  font-size: 16px;
}

/* LA MARQUE : le terrain de l'icone de l'app, repeint en bleu, et le nom. */
.marque {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.marque__logo {
  width: 30px;
}

.marque__nom {
  color: var(--bleu);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* EN-TETE */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: var(--page);
  margin: 0 auto;
  padding: 25px var(--marge) 0;
}

.entete__nav {
  display: flex;
  align-items: center;
  gap: 48px;
}

.entete__lien {
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.entete__lien:hover {
  color: var(--bleu);
}

/* HEROS : le texte a gauche, l'iPhone sur son carre bleu a droite. */
.heros {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 387px;
  column-gap: 64px;
  align-items: start;
  max-width: var(--page);
  margin: 0 auto;
  padding: 67px calc(var(--marge) + 12px) 0 var(--marge);
}

.heros__texte {
  position: relative;
  z-index: 0;
}

/* La carte du monde pointillee de la maquette : une trame de points qui s'efface. */
.heros__texte::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -40px;
  left: -46px;
  width: 640px;
  height: 330px;
  background-image: radial-gradient(circle, rgba(11, 11, 15, 0.1) 1.1px, transparent 1.4px);
  background-size: 8px 8px;
  -webkit-mask-image: radial-gradient(ellipse 58% 52% at 48% 50%, #000 25%, transparent 78%);
  mask-image: radial-gradient(ellipse 58% 52% at 48% 50%, #000 25%, transparent 78%);
  pointer-events: none;
}

.heros__titre {
  font-size: 58px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.heros__titre > span {
  display: block;
  white-space: nowrap;
}

.heros__titre-bleu {
  color: var(--bleu);
}

.heros__croix {
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-left: 0.14em;
  vertical-align: -0.06em;
  fill: var(--bleu);
}

.heros__chapo {
  max-width: 500px;
  margin: 46px 0 0;
  color: var(--gris);
  font-size: 18px;
  line-height: 1.5;
}

.heros__texte .pilule--grande {
  margin-top: 50px;
}

/* A la place des logos de marques : des faits, dans le meme gris, le premier en bleu. */
.faits {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  margin: 82px 0 0;
  padding: 0;
  list-style: none;
  color: var(--gris-doux);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.faits li:first-child {
  color: var(--bleu);
}

.heros__visuel {
  position: relative;
  height: 680px;
}

.heros__carre {
  position: absolute;
  inset: 135px 0 auto;
  height: 531px;
  border-radius: 50px;
  background: var(--bleu);
  box-shadow: 46px 58px 90px -34px rgba(11, 11, 15, 0.2);
}

.heros__visuel .heros__iphone {
  position: absolute;
  top: 0;
  left: 46px;
}

/*
 * L'IPHONE, DESSINE EN CSS AUTOUR D'UNE VRAIE CAPTURE. Ses cotes suivent sa propre largeur :
 * pourcentages pour l'ecran et l'encoche, unites de conteneur pour la barre d'etat. Le meme
 * dessin sert a 301 px dans le heros et a 182 px dans les cartes.
 */
.iphone {
  container-type: inline-size;
  position: relative;
  flex: none;
  width: 301px;
  aspect-ratio: 301 / 624;
  border-radius: 15% / 7.25%;
  background: var(--encre);
  box-shadow: inset 0 0 0 1.5px #2c2e35, 0 34px 60px -24px rgba(11, 11, 15, 0.45);
}

/* L'encoche. */
.iphone::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: 1.73%;
  left: 50%;
  width: 36%;
  height: 4.3%;
  transform: translateX(-50%);
  border-radius: 0 0 16px 16px;
  background: var(--encre);
}

.iphone__ecran {
  position: absolute;
  inset: 1.73% 3.6%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 12% / 5.6%;
  background: var(--blanc);
}

.iphone__statut {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  height: 11cqw;
  padding: 0 8cqw 0 11cqw;
  color: var(--encre);
  font-size: 4.2cqw;
  font-weight: 600;
}

.iphone__icones {
  width: 15cqw;
  height: 3.8cqw;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 11'%3E%3Cg fill='%230b0b0f'%3E%3Crect x='0' y='7' width='2.6' height='4' rx='.7'/%3E%3Crect x='3.8' y='5' width='2.6' height='6' rx='.7'/%3E%3Crect x='7.6' y='2.6' width='2.6' height='8.4' rx='.7'/%3E%3Crect x='11.4' y='0' width='2.6' height='11' rx='.7'/%3E%3Cpath d='M22 2.2c2.3 0 4.4.9 6 2.4l-1.1 1.1A7 7 0 0 0 22 3.8a7 7 0 0 0-4.9 1.9L16 4.6a8.6 8.6 0 0 1 6-2.4Zm0 3.2c1.4 0 2.7.5 3.7 1.4l-1.1 1.1a3.9 3.9 0 0 0-5.2 0l-1.1-1.1a5.4 5.4 0 0 1 3.7-1.4Zm0 3.2c.6 0 1.1.2 1.5.6L22 10.7l-1.5-1.5c.4-.4.9-.6 1.5-.6Z'/%3E%3Crect x='31.5' y='1' width='10.5' height='9' rx='2.6' fill='none' stroke='%230b0b0f' stroke-opacity='.4'/%3E%3Crect x='33' y='2.5' width='7.5' height='6' rx='1.4'/%3E%3Cpath d='M43 4v3a1.5 1.5 0 0 0 0-3Z' fill-opacity='.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

.iphone__ecran img {
  flex: 1;
  width: 100%;
  min-height: 0;
  object-fit: cover;
  object-position: top;
}

.iphone--petit {
  width: 182px;
}

/* LE BANDEAU NOIR, et ses trois cartes qui debordent dessous. */
.bandeau {
  position: relative;
  isolation: isolate;
  width: min(calc(100% - 114px), 1166px);
  margin: 104px auto 0;
  padding: 75px 37px 0;
  text-align: center;
}

/*
 * Le fond noir ne couvre que le haut du bandeau : les cartes le debordent de 202 px. Les arcs
 * concentriques de la maquette sont dessines dans ce meme fond, centres sous le titre.
 */
.bandeau::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 auto;
  height: 391px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 263px, transparent 164px, rgba(255, 255, 255, 0.16) 165px, transparent 166.5px),
    radial-gradient(circle at 50% 263px, transparent 215px, rgba(255, 255, 255, 0.11) 216px, transparent 217.5px),
    radial-gradient(circle at 50% 263px, transparent 266px, rgba(255, 255, 255, 0.07) 267px, transparent 268.5px),
    var(--encre);
}

.bandeau__titre {
  color: var(--blanc);
  font-size: 32px;
  letter-spacing: -0.01em;
}

.bandeau__lumiere {
  color: var(--bleu);
  text-shadow: 0 0 14px rgba(46, 107, 255, 0.95), 0 0 36px rgba(46, 107, 255, 0.65), 0 0 70px rgba(46, 107, 255, 0.45);
}

.cartes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 37px;
  margin-top: 62px;
}

.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 419px;
  overflow: hidden;
  padding: 34px 26px 0;
  border-radius: 20px;
  background: var(--gris-clair);
  color: var(--encre);
}

.carte--inversee {
  padding: 0 26px 34px;
}

.carte__titre {
  font-size: 22px;
  line-height: 1.27;
}

.carte__texte {
  max-width: 280px;
  margin: 8px 0 0;
  color: var(--gris);
  font-size: 14px;
  line-height: 1.45;
}

.carte__visuel {
  position: relative;
  display: flex;
  flex: 1;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  /* Sans elle, l'iPhone impose sa hauteur au visuel et pousse le titre de la carte inversee
     hors de la carte (vu sur l'apercu du 2026-09-10). */
  min-height: 0;
  margin-top: 26px;
}

.carte--inversee .carte__visuel {
  align-items: flex-end;
  margin: 0 0 26px;
}

/* Les cercles concentriques autour de l'iPhone. */
.carte__visuel::before {
  content: "";
  position: absolute;
  top: 44%;
  left: 50%;
  width: 340px;
  height: 340px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 33px, rgba(11, 11, 15, 0.06) 34px 35px);
  -webkit-mask-image: radial-gradient(circle, #000 52%, transparent 71%);
  mask-image: radial-gradient(circle, #000 52%, transparent 71%);
  pointer-events: none;
}

.carte__visuel .iphone {
  z-index: 1;
}

/*
 * BIENTOT SUR L'APP STORE : un grand iPhone DROIT ET ENTIER, sur ses cercles pales. La maquette
 * l'incline en perspective et laisse le pied de page le couper : ainsi dessine, il se lisait comme
 * une petite tablette deformee, et le proprietaire l'a refuse le 2026-09-11.
 */
.bientot {
  max-width: var(--page);
  margin: 96px auto 0;
  padding: 0 var(--marge);
  text-align: center;
}

.bientot__titre {
  font-size: 34px;
  letter-spacing: -0.01em;
}

/* `overflow: hidden` retient les cercles, plus larges que l'ecran d'un telephone. */
.bientot__visuel {
  position: relative;
  display: flex;
  justify-content: center;
  margin-top: 56px;
  padding-bottom: 96px;
  overflow: hidden;
}

.bientot__visuel::before {
  content: "";
  position: absolute;
  top: 45%;
  left: 50%;
  width: 760px;
  height: 760px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: repeating-radial-gradient(circle, transparent 0 58px, rgba(11, 11, 15, 0.05) 59px 60px);
  -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 71%);
  mask-image: radial-gradient(circle, #000 55%, transparent 71%);
  pointer-events: none;
}

.iphone--grand {
  z-index: 1;
  width: 320px;
}

/* PIED DE PAGE */
.pied {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  gap: 48px;
  width: min(calc(100% - 112px), 1168px);
  margin: 0 auto;
  padding: 65px 62px 90px;
  border-radius: 30px 30px 0 0;
  background: var(--gris-clair);
}

.pied__copyright {
  margin: 20px 0 0;
  color: var(--gris);
  font-size: 15px;
  line-height: 1.6;
}

.pied__marque .pilule {
  margin-top: 34px;
}

.pied__colonnes {
  display: flex;
  gap: 42px;
}

.pied__colonne {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  min-width: 104px;
}

.pied__titre {
  margin: 0 0 4px;
  font-size: 18px;
  font-weight: 500;
}

.pied__colonne a {
  color: var(--gris);
  font-size: 15px;
  text-decoration: none;
}

.pied__colonne a:hover {
  color: var(--bleu);
}

/* LES PAGES DE TEXTE : assistance, confidentialite, conditions, 404. */
.page-texte {
  max-width: var(--page);
  margin: 0 auto;
  padding: 88px var(--marge) 110px;
}

.texte {
  max-width: 720px;
}

.texte--centre {
  margin: 0 auto;
  text-align: center;
}

.texte__surtitre {
  margin: 0 0 14px;
  color: var(--bleu);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.texte h1 {
  font-size: 52px;
  letter-spacing: -0.02em;
}

.texte__date {
  margin: 16px 0 0;
  color: var(--gris);
  font-size: 14px;
}

.texte__chapo {
  margin: 24px 0 0;
  color: var(--gris);
  font-size: 20px;
  line-height: 1.5;
}

.texte h2 {
  margin: 52px 0 14px;
  font-size: 26px;
  letter-spacing: -0.01em;
}

.texte p,
.texte li {
  font-size: 17px;
  line-height: 1.65;
}

.texte p {
  margin: 0 0 12px;
}

.texte ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 20px;
}

.texte a:not(.pilule) {
  color: var(--bleu);
  text-underline-offset: 3px;
}

.texte--centre .pilule {
  margin-top: 36px;
}

.encart {
  margin-top: 40px;
  padding: 28px 32px;
  border-radius: 20px;
  background: var(--gris-clair);
}

.encart h2 {
  margin-top: 0;
}

.encart__email {
  font-size: 24px;
  font-weight: 500;
  text-decoration: none;
}

.question {
  border-bottom: 1px solid var(--bordure);
}

.question summary {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  cursor: pointer;
  list-style: none;
  font-size: 18px;
  font-weight: 500;
}

.question summary::-webkit-details-marker {
  display: none;
}

.question summary::after {
  content: "+";
  content: "+" / "";
  flex: none;
  color: var(--bleu);
  font-size: 26px;
  line-height: 1;
  transition: transform 0.2s ease;
}

.question[open] summary::after {
  transform: rotate(45deg);
}

.question p {
  margin: 0 0 20px;
  color: #4b5058;
}

/* ECRANS MOYENS : le heros s'empile. */
@media (max-width: 1140px) {
  :root {
    --marge: 40px;
  }

  .heros {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 72px;
    padding-right: var(--marge);
  }

  .heros__titre > span {
    white-space: normal;
  }

  .heros__visuel {
    justify-self: center;
    width: 387px;
  }

  .bandeau,
  .pied {
    width: calc(100% - 48px);
  }
}

/* TABLETTES : les cartes et le pied de page s'empilent. */
@media (max-width: 900px) {
  .bandeau {
    padding: 56px 24px 24px;
  }

  .bandeau::before {
    inset: 0;
    height: auto;
  }

  .cartes {
    grid-template-columns: minmax(0, 360px);
    justify-content: center;
    gap: 24px;
    margin-top: 40px;
  }

  .pied {
    flex-direction: column;
    padding: 48px 32px 64px;
  }

  .pied__colonnes {
    flex-wrap: wrap;
    gap: 32px 42px;
  }

  .page-texte {
    padding-top: 56px;
  }

  .texte h1 {
    font-size: 40px;
  }
}

/* PETITS ECRANS : la trame de points du titre deborderait de la page (220 px a 390 px de large). */
@media (max-width: 700px) {
  .heros__texte::before {
    left: -16px;
    width: calc(100% + 32px);
  }
}

/* TELEPHONES */
@media (max-width: 560px) {
  :root {
    --marge: 16px;
  }

  body {
    font-size: 16px;
  }

  .entete {
    padding-top: 16px;
  }

  .entete__lien {
    display: none;
  }

  .entete .pilule {
    height: 38px;
    padding: 0 14px;
    font-size: 13px;
  }

  .heros {
    row-gap: 48px;
    padding-top: 40px;
  }

  .heros__titre {
    font-size: 34px;
  }

  .heros__chapo {
    margin-top: 24px;
    font-size: 16px;
  }

  .heros__texte .pilule--grande {
    margin-top: 32px;
  }

  .faits {
    gap: 8px 24px;
    margin-top: 40px;
    font-size: 16px;
  }

  .heros__visuel {
    width: 300px;
    height: 527px;
  }

  .heros__carre {
    top: 105px;
    height: 412px;
    border-radius: 40px;
  }

  .heros__visuel .heros__iphone {
    left: 36px;
    width: 228px;
  }

  .bandeau {
    width: calc(100% - 24px);
    margin-top: 72px;
  }

  .bandeau__titre,
  .bientot__titre {
    font-size: 26px;
  }

  .bientot {
    margin-top: 72px;
  }

  .bientot__visuel {
    margin-top: 40px;
    padding-bottom: 64px;
  }

  .iphone--grand {
    width: 250px;
  }

  .pied {
    width: calc(100% - 24px);
    padding: 40px 24px 56px;
  }

  .texte h1 {
    font-size: 34px;
  }

  .texte h2 {
    font-size: 22px;
  }
}

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

  .pilule,
  .question summary::after {
    transition: none;
  }
}