/* Page de presentation : la vitrine publique du produit.

   Elle s'appuie sur les jetons de identite.css (--pd-*) pour les couleurs, les
   rayons et les ombres, et ne redefinit donc aucune teinte de la marque. Ce qui
   lui est propre, c'est sa mise en page : barre de navigation, heros centre,
   grille de tuiles, apercu produit en CSS pur, bande finale.

   Le verre reste RARE, comme le veut l'identite : il n'apparait que sur
   l'apercu, la bande finale et le bouton secondaire. Les tuiles sont opaques,
   une grille de six surfaces translucides fatiguerait l'oeil.

   Le contraste est calibre sur les fonds REELLEMENT rendus, jamais sur un noir
   suppose : l'apercu et la finale sont translucides, leur fond depend de ce qui
   passe dessous. La methode est celle de design.css et identite.css. */

.page-presentation {
  min-height: 100dvh;
  margin: 0;
  color: var(--pd-texte);
  background: var(--pd-fond);
}

/* Le fond vivant : les memes degrades radiaux verts que l'application, poses
   ici sur le corps de page puisque cette page n'a pas de conteneur `.appli`. */
.page-presentation {
  background: var(--pd-fond-degrade);
  background-attachment: fixed;
}

.presentation-enveloppe {
  width: min(100%, 74rem);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* --- Barre de navigation --- */
.presentation-barre {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--pd-verre);
  border-bottom: 1px solid var(--pd-bord);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
}

.presentation-barre .presentation-enveloppe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.25rem;
}

.presentation-marque {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--pd-texte);
  font-weight: 650;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.presentation-marque svg { display: block; }

.presentation-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.presentation-nav a {
  color: var(--pd-doux);
  font-size: 0.9rem;
  text-decoration: none;
  transition: color 160ms ease;
}

.presentation-nav a:hover { color: var(--pd-texte); }

/* --- Boutons --- */
.presentation-bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.85rem 1.6rem;
  border-radius: var(--pd-rayon-champ);
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: transform 160ms ease, filter 160ms ease, background 160ms ease;
}

.presentation-bouton--mini {
  min-height: 0;
  padding: 0.55rem 1.05rem;
  font-size: 0.88rem;
}

.presentation-bouton--plein {
  color: #04120c;
  background: linear-gradient(180deg, var(--pd-vert-vif), var(--pd-vert-profond));
  box-shadow: 0 12px 28px -10px rgba(52, 211, 153, 0.6);
}

.presentation-bouton--plein:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.presentation-bouton--verre {
  color: var(--pd-texte);
  background: var(--pd-surface);
  border: 1px solid var(--pd-bord-fort);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.presentation-bouton--verre:hover { background: var(--pd-surface-2); }

.presentation-bouton:focus-visible {
  outline: 2px solid var(--pd-vert-vif);
  outline-offset: 3px;
}

/* --- Heros --- */
.presentation-heros {
  padding: clamp(4rem, 10vw, 8rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
}

.presentation-pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
  padding: 0.4rem 0.85rem;
  color: var(--pd-accent);
  font-size: 0.8rem;
  background: var(--pd-accent-fond);
  border: 1px solid var(--pd-accent-bord);
  border-radius: 999px;
}

.presentation-point {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pd-vert-vif);
  box-shadow: 0 0 10px var(--pd-vert-vif);
}

.presentation-heros h1 {
  max-width: 20ch;
  margin: 0 auto 1.35rem;
  font-size: clamp(2.4rem, 6vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
  font-weight: 640;
}

.presentation-accent {
  background: linear-gradient(120deg, var(--pd-vert-vif), var(--pd-vert));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.presentation-sous-titre {
  max-width: 52ch;
  margin: 0 auto;
  color: var(--pd-doux);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.65;
}

.presentation-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-content: center;
  margin-top: 2.25rem;
}

/* --- Apercu produit : la maquette de l'interface, en CSS pur --- */
.presentation-apercu {
  max-width: 60rem;
  margin: clamp(2rem, 5vw, 4rem) auto 0;
  overflow: hidden;
  background: var(--pd-verre);
  border: 1px solid var(--pd-bord-fort);
  border-radius: 20px;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--pd-ombre-surcouche);
}

.presentation-apercu-barre {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.8rem 1rem;
  border-bottom: 1px solid var(--pd-bord);
}

.presentation-rond {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--pd-bord-fort);
}

.presentation-apercu-corps {
  display: grid;
  grid-template-columns: 12rem 1fr;
  min-height: 20rem;
}

.presentation-rail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 0.9rem;
  border-right: 1px solid var(--pd-bord);
}

.presentation-rail-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.7rem;
  color: var(--pd-doux);
  font-size: 0.87rem;
  border-radius: 10px;
}

.presentation-rail-item::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: currentColor;
  opacity: 0.7;
}

.presentation-rail-item--actif {
  color: var(--pd-texte);
  background: var(--pd-accent-fond);
}

.presentation-apercu-contenu {
  display: grid;
  gap: 0.9rem;
  padding: 1.4rem;
}

.presentation-vignette {
  padding: 1rem 1.1rem;
  background: var(--pd-surface);
  border: 1px solid var(--pd-bord);
  border-radius: 14px;
}

.presentation-vignette-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}

.presentation-vignette-titre {
  font-size: 0.95rem;
  font-weight: 560;
}

.presentation-etat {
  padding: 0.2rem 0.6rem;
  font-size: 0.72rem;
  border-radius: 999px;
}

.presentation-etat--pret {
  color: var(--pd-vert-vif);
  background: var(--pd-accent-fond);
}

.presentation-etat--programme {
  color: #7cb8ff;
  background: rgba(80, 150, 255, 0.12);
}

.presentation-etat--brouillon {
  color: var(--pd-doux);
  background: var(--pd-surface-2);
}

.presentation-ligne {
  display: block;
  height: 8px;
  margin-bottom: 0.5rem;
  border-radius: 4px;
  background: var(--pd-surface-2);
}

.presentation-ligne--courte { width: 55%; }

/* --- Section fonctionnalites --- */
.presentation-section { padding: clamp(3.5rem, 8vw, 6rem) 0; }

.presentation-section h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  letter-spacing: -0.03em;
  font-weight: 620;
  text-align: center;
}

.presentation-chapeau {
  max-width: 46ch;
  margin: 0 auto 3rem;
  color: var(--pd-doux);
  line-height: 1.65;
  text-align: center;
}

.presentation-grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.1rem;
}

.presentation-tuile {
  padding: 1.6rem 1.5rem;
  background: var(--pd-surface);
  border: 1px solid var(--pd-bord);
  border-radius: 18px;
  transition: transform 200ms ease, background 200ms ease, border-color 200ms ease;
}

.presentation-tuile:hover {
  transform: translateY(-3px);
  background: var(--pd-surface-2);
  border-color: var(--pd-accent-bord);
}

.presentation-tuile-icone {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1.1rem;
  color: var(--pd-vert-vif);
  background: var(--pd-accent-fond);
  border: 1px solid var(--pd-accent-bord);
  border-radius: 12px;
}

.presentation-icone { width: 20px; height: 20px; display: block; }

.presentation-tuile h3 {
  margin: 0 0 0.55rem;
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.presentation-tuile p {
  margin: 0;
  color: var(--pd-doux);
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- Tarifs --- */
.presentation-carte-prix {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  max-width: 48rem;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem);
  background: var(--pd-surface);
  border: 1px solid var(--pd-bord);
  border-radius: 22px;
}

.presentation-prix-bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6rem;
}

.presentation-prix {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
}

.presentation-montant {
  font-size: clamp(3rem, 7vw, 4.2rem);
  font-weight: 660;
  line-height: 1;
  letter-spacing: -0.04em;
}

.presentation-unite {
  color: var(--pd-doux);
  font-size: 0.95rem;
  line-height: 1.35;
}

.presentation-avantages {
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--pd-doux);
  font-size: 0.95rem;
  line-height: 1.9;
}

.presentation-avantages li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.presentation-avantages li::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pd-vert-vif);
}

/* --- Bande finale --- */
.presentation-finale {
  margin: clamp(2rem, 5vw, 4rem) 0 clamp(4rem, 8vw, 6rem);
  padding: clamp(2.5rem, 5vw, 4rem);
  text-align: center;
  background: var(--pd-verre);
  border: 1px solid var(--pd-bord-fort);
  border-radius: 24px;
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow: var(--pd-ombre-surcouche);
}

.presentation-finale h2 {
  margin: 0 0 0.8rem;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  letter-spacing: -0.03em;
}

.presentation-finale p {
  max-width: 44ch;
  margin: 0 auto 1.75rem;
  color: var(--pd-doux);
  line-height: 1.6;
}

/* --- Pied de page --- */
.presentation-pied {
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--pd-bord);
}

.presentation-pied .presentation-enveloppe {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  color: var(--pd-doux);
  font-size: 0.83rem;
}

@media (max-width: 700px) {
  .presentation-nav a:not(.presentation-bouton--mini) { display: none; }
  .presentation-apercu-corps { grid-template-columns: 1fr; }
  .presentation-rail {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--pd-bord);
  }
  .presentation-carte-prix { grid-template-columns: 1fr; gap: 1.75rem; }
  .presentation-carte-prix .presentation-bouton { width: 100%; }
}