/* La page « Fonctionnalités » (fonctionnalites.html), par-dessus site.css.
 *
 * D'après la page « Fonctionnalités » de vinteer.io : ce que fait chaque écran, avec
 * l'écran lui-même, puis ce qu'il y a autour, la confiance et un dernier appel. En
 * gardant la grammaire du site : le ciel du haut de page, les panneaux teintés où
 * l'app sort par le bas (comme Klintt Track sur l'accueil), des points de trois mots
 * séparés d'un filet, et une colonne de sommaire dont la pastille glisse comme la
 * boîte du menu du haut.
 */

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ── Le haut de page : la carte du ciel, sans l'app ────────────────────── */

.heros--page .heros__carte { padding-bottom: 96px; }
.heros--page .heros__texte { margin-top: 88px; }

/* un raccourci vers chaque page de l'app, en verre sur le ciel */
.raccourcis {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 820px;
  margin-top: 40px;
}
.raccourci {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px 0 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: inset 0 0 0 1px var(--blanc), 0 2px 8px rgba(var(--ombre-bleue), 0.06);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: var(--encre);
  white-space: nowrap;
  transition: background-color 0.2s, transform 0.25s var(--courbe);
}
.raccourci:hover { background: rgba(255, 255, 255, 0.95); }
.raccourci:active { transform: scale(0.98); }
.raccourci:focus-visible { outline: 2px solid #2547FF; outline-offset: 3px; }
.raccourci svg { flex: none; width: 18px; height: 18px; color: #52525B; }
.raccourci .otto { --t: 18px; }
.raccourci .pastille__bientot { margin: 0 -6px 0 2px; background: rgba(24, 24, 27, 0.06); }

/* ── La colonne du sommaire et les pages ──────────────────────────────── */

.pages {
  width: var(--large);
  margin: 0 auto;
  padding: 120px 0 0;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.sommaire {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.sommaire__liste {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* la pastille de la page lue : elle glisse d'un lien à l'autre */
.sommaire__curseur {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 40px;
  border-radius: 12px;
  background: #F2F3F6;
  opacity: 0;
  pointer-events: none;
}
.sommaire__liste[data-pret] .sommaire__curseur {
  opacity: 1;
  transition: transform 0.45s var(--courbe), height 0.45s var(--courbe), opacity 0.2s;
}
.sommaire__lien {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: #71717A;
  transition: color 0.2s;
}
.sommaire__lien:hover, .sommaire__lien[aria-current] { color: var(--encre); }
.sommaire__lien:focus-visible { outline: 2px solid #2547FF; outline-offset: 2px; }
.sommaire__lien svg { flex: none; width: 18px; height: 18px; }
.sommaire__lien .otto { --t: 18px; color: currentColor; }
.sommaire__lien .pastille__bientot { margin-left: auto; margin-right: -4px; }
.sommaire__appel { margin: 24px 0 0 12px; }

.modules { display: flex; flex-direction: column; gap: 136px; min-width: 0; }

/* ── Une page de l'app ─────────────────────────────────────────────────── */

.module { scroll-margin-top: 100px; }
.module__tete { display: flex; flex-direction: column; align-items: flex-start; }
.module__nom {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  color: #52525B;
}
.module__nom .pastille__bientot { margin-left: 2px; }
.module__icone {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #F2F3F6;
  color: var(--encre);
}
.module__icone svg { width: 18px; height: 18px; }
.module__icone .otto { --t: 18px; }
.module__titre {
  margin: 18px 0 0;
  font-weight: 600;
  font-size: 44px;
  line-height: 50px;
  letter-spacing: -0.035em;
  color: var(--encre);
  text-wrap: balance;
}
.module__texte {
  margin: 12px 0 0;
  max-width: 52ch;
  font-size: 18px;
  line-height: 28px;
  letter-spacing: -0.008em;
  color: #71717A;
  text-wrap: pretty;
}

/* le panneau teinté : l'écran de l'app y entre par le haut et sort par le bas */
.module__panneau {
  margin: 36px 0 0;
  padding: 40px 40px 0;
  border-radius: 28px;
  overflow: hidden;
  /* le ciel du haut de page */
  background: linear-gradient(200deg, #CCDFFF 0%, #E3EDFF 45%, #F2F6FF 100%);
}
.module__panneau--otto { background: linear-gradient(200deg, #E4DCFD 0%, #EEE9FE 45%, #F6F4FB 100%); }
/* la teinte menthe de Klintt Track, comme sur l'accueil */
.module__panneau--track { background: linear-gradient(200deg, #D3F8EA 0%, #E6F5F1 34%, #F0F2F6 72%, #F4F5F8 100%); }
.module__ecran {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 0 0 1px rgba(24, 24, 27, 0.05), 0 30px 60px -24px rgba(var(--ombre-bleue), 0.28);
}

/* six points de trois mots, séparés d'un filet */
.module__points {
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 32px;
}
.module__points li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid #ECECEF;
}
.module__points b {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.01em;
  color: var(--encre);
}
.module__points li > span { font-size: 15px; line-height: 22px; color: #71717A; }
/* l'offre à partir de laquelle un point est ouvert */
.offre-min {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 7px;
  border-radius: 999px;
  background: #EAF1FE;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0;
  color: var(--bleu);
}

/* ── Et aussi : huit cartes grises ─────────────────────────────────────── */

.plus {
  margin: 36px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
.plus li { padding: 22px; border-radius: 22px; background: #F4F5F8; }
.plus__icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blanc);
  box-shadow: inset 0 0 0 1px #ECECEF, 0 1px 2px rgba(24, 24, 27, 0.05);
  color: var(--encre);
}
.plus__icone svg { width: 20px; height: 20px; }
.plus b { display: block; margin-top: 18px; font-weight: 500; font-size: 16px; line-height: 22px; letter-spacing: -0.01em; color: var(--encre); }
.plus li > span:last-child { display: block; margin-top: 4px; font-size: 14.5px; line-height: 21px; color: #71717A; }

/* la confiance suit les pages : un peu plus d'air au-dessus ; le dernier appel s'en détache */
.pages + .confiance { padding-top: 136px; }
.confiance + .appel { margin-top: 136px; }

/* ── Aux autres largeurs ───────────────────────────────────────────────── */

/* Sous 1100 : plus de place pour la colonne ; les raccourcis du haut la remplacent */
@media (max-width: 1100px) {
  .pages { grid-template-columns: minmax(0, 1fr); padding-top: 96px; }
  .sommaire { display: none; }
}

@media (max-width: 1024px) {
  .heros--page .heros__texte { margin-top: 72px; }
  .module__titre { font-size: 40px; line-height: 46px; }
  .modules { gap: 112px; }
  .plus { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pages + .confiance { padding-top: 112px; }
  .confiance + .appel { margin-top: 112px; }
}

@media (max-width: 880px) {
  .module__points { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .module__panneau { padding: 32px 32px 0; }
}

/* Téléphone : l'écran entier serait illisible ; on en montre la moitié gauche à une
 * taille qu'on lit (celle d'Otto : la moitié droite, où il est) */
@media (max-width: 640px) {
  .heros--page .heros__carte { padding-bottom: 56px; }
  .heros--page .heros__texte { margin-top: 44px; }
  .raccourcis { gap: 8px; margin-top: 28px; }
  .raccourci { height: 36px; padding: 0 12px 0 10px; border-radius: 11px; font-size: 14px; }
  .raccourci svg { width: 16px; height: 16px; }
  .raccourci .otto { --t: 16px; }

  .pages { padding-top: 72px; }
  .modules { gap: 88px; }
  .module { scroll-margin-top: 76px; }
  .module__titre { margin-top: 14px; font-size: 30px; line-height: 36px; }
  .module__texte { font-size: 16px; line-height: 24px; }
  .module__panneau { display: flex; margin-top: 24px; padding: 20px 0 0 20px; border-radius: 22px; }
  .module__panneau picture { flex: none; width: 190%; }
  .module__ecran { border-radius: 12px 0 0 0; }
  .module__panneau--otto { justify-content: flex-end; padding: 20px 20px 0 0; }
  .module__panneau--otto .module__ecran { border-radius: 0 12px 0 0; }
  .module__points { grid-template-columns: minmax(0, 1fr); }
  .module__points li { margin-top: 18px; padding-top: 16px; }
  .plus { gap: 10px; margin-top: 28px; }
  .plus li { padding: 18px; border-radius: 18px; }
  .plus b { margin-top: 14px; font-size: 15px; }
  .plus li > span:last-child { font-size: 14px; line-height: 20px; }
  .pages + .confiance { padding-top: 88px; }
  .confiance + .appel { margin-top: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .sommaire__liste[data-pret] .sommaire__curseur, .raccourci { transition: none; }
}

/* vers la page qui va plus loin (Otto), ou l'outil gratuit qui va avec (colis, compta) */
.module__lien {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 14px;
  font-weight: 500;
  font-size: 15px;
  color: var(--bleu);
}
.module__lien svg { width: 16px; height: 16px; transition: transform 0.2s var(--courbe); }
.module__lien:hover svg { transform: translateX(3px); }
.module__lien:focus-visible { outline: 2px solid #2547FF; outline-offset: 3px; border-radius: 6px; }

/* ── L'arrivée de chaque page (30/09, « ça manque un peu d'animation ») ─────
 * Le sommaire ne change pas. Quand on arrive sur une page de l'app (js/scenes.js) :
 * son écran monte dans le panneau teinté, comme l'app dans le haut de l'accueil ;
 * puis deux étiquettes se posent devant, celles de l'accueil, et flottent à peine ;
 * les points arrivent un par un. Sans script, ou avec moins d'animations, tout est là. */
.module__panneau { position: relative; }
/* le panneau ne bouge pas : c'est l'écran qui monte dedans */
.avec-js .module__panneau[data-apparait]:not(.apparu) { opacity: 1; transform: none; }
.module__panneau picture { display: block; transition: transform 1.2s var(--courbe), opacity 0.8s; }
.avec-js .module__panneau:not(.apparu) picture { transform: translateY(96px); opacity: 0; }
.module__etiquettes { position: absolute; inset: 0; pointer-events: none; }
.module__etiquettes .etiquette {
  transition: opacity 0.6s, transform 0.7s var(--courbe);
  transition-delay: calc(0.7s + var(--rang, 0) * 0.16s);
  animation: flotte-etiquette 6s ease-in-out infinite;
  animation-delay: calc(var(--rang, 0) * -3s);
}
.avec-js .module__panneau:not(.apparu) .etiquette { opacity: 0; transform: translateY(10px) scale(0.96); }
@keyframes flotte-etiquette { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
@media (max-width: 640px) {
  .module__etiquettes .etiquette { height: 30px; padding-right: 11px; font-size: 12.5px; }
  .module__etiquettes .etiquette img, .module__etiquettes .etiquette__icone { width: 20px; height: 20px; }
  .module__etiquettes .etiquette:nth-child(2) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .module__etiquettes .etiquette { animation: none; }
  .module__panneau picture { transition: none; }
}