/* ============================================================
   Libiduo — page de présentation
   Palette Velvet Night de l'application, mise en page de vitrine.
   Un seul moment fort : les deux téléphones inclinés l'un vers
   l'autre en ouverture, comme les deux silhouettes du logo.
   Le reste reste sobre : texte aligné à gauche, filets fins,
   pas de cartes empilées.
   ============================================================ */

@font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/fraunces.woff2') format('woff2'); }
@font-face { font-family: 'Fraunces'; font-style: italic; font-weight: 400 500; font-display: swap; src: url('/fonts/fraunces-italic.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/nunito-sans.woff2') format('woff2'); }
@font-face { font-family: 'Nunito Sans'; font-style: italic; font-weight: 400; font-display: swap; src: url('/fonts/nunito-sans-italic.woff2') format('woff2'); }

:root {
  --nuit: #120a14;          /* fond de page */
  --prune: #1c121d;         /* surfaces */
  --prune-clair: #261827;   /* surfaces relevées */
  --cadre: #0b060c;         /* bord des téléphones */
  --rose: #e88791;          /* accent, boutons */
  --rose-sombre: #b85a6b;   /* bas du dégradé des boutons */
  --poudre: #f2c7c7;        /* titres */
  --texte: #f3e3e3;
  --texte-doux: #cdb7c0;
  --texte-discret: #a28d99;
  --filet: rgba(235, 158, 169, .18);
  --filet-fort: rgba(235, 158, 169, .32);

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Nunito Sans', -apple-system, 'Segoe UI', sans-serif;

  --largeur: 1120px;
  --marge: clamp(20px, 5vw, 48px);
}

* { box-sizing: border-box; }
html { background: var(--nuit); color-scheme: dark; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--nuit);
  color: var(--texte);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--poudre); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--texte); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; margin: 0; color: var(--poudre); }
p { margin: 0; }
figure { margin: 0; }

:focus-visible { outline: 2px solid var(--rose); outline-offset: 3px; border-radius: 6px; }

.largeur { max-width: var(--largeur); margin: 0 auto; padding: 0 var(--marge); }
.largeur-lecture { max-width: 780px; }

.evitement {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--rose); color: var(--nuit); padding: 10px 16px; border-radius: 8px; font-weight: 700;
}
.evitement:focus { top: 12px; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px;
  border: 0; border-radius: 999px;
  background: linear-gradient(180deg, var(--rose), var(--rose-sombre));
  color: #fff; font-family: var(--sans); font-size: 17px; font-weight: 700; letter-spacing: .005em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 10px 30px -12px rgba(232, 135, 145, .7), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .15s ease, box-shadow .15s ease;
}
.bouton:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 14px 34px -12px rgba(232, 135, 145, .85), inset 0 1px 0 rgba(255,255,255,.25); }
.bouton:active { transform: translateY(0); }
.bouton-petit { min-height: 40px; padding: 0 18px; font-size: 15px; }

.lien-secondaire { color: var(--poudre); font-weight: 600; text-decoration: underline; }
.lien-discret { color: var(--texte-doux); font-size: 15px; font-weight: 600; text-decoration: none; }
.lien-discret:hover { color: var(--texte); text-decoration: underline; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.actions-centre { justify-content: center; }

/* ---------- Bandeau ---------- */
.bandeau {
  position: sticky; top: 0; z-index: 20;
  background: rgba(18, 10, 20, .82);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--filet);
  padding-top: env(safe-area-inset-top);
}
.bandeau-ligne { display: flex; align-items: center; justify-content: space-between; min-height: 68px; gap: 16px; }
.marque { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marque-logo { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px var(--filet-fort); }
.marque-nom { font-family: var(--serif); font-size: 26px; color: #f7dfde; letter-spacing: -.01em; line-height: 1; }
.marque-nom span { color: #df7f88; font-style: italic; }
.bandeau-actions { display: flex; align-items: center; gap: 20px; }

/* ---------- Ouverture ---------- */
.ouverture { position: relative; padding: clamp(40px, 7vw, 96px) 0 clamp(56px, 8vw, 112px); }
.ouverture-grille { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; }
.ouverture h1 {
  font-size: clamp(46px, 6.8vw, 88px);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: #f7dfde;
  max-width: 13ch;
  text-wrap: balance;
}
.chapeau { margin-top: 28px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.6; color: var(--texte-doux); max-width: 34em; }
.ouverture .actions { margin-top: 36px; }
.precision { margin-top: 22px; font-size: 14.5px; color: var(--texte-discret); }

/* Les deux téléphones : ils se penchent l'un vers l'autre. */
.duo {
  position: relative;
  height: clamp(460px, 48vw, 600px);
  isolation: isolate;
}
.duo::before {
  /* Halo rose derrière le point de rencontre des deux écrans. */
  content: ""; position: absolute; z-index: -1;
  left: 50%; top: 52%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(232, 135, 145, .42), rgba(232, 135, 145, .12) 55%, transparent);
  filter: blur(8px);
}
.telephone {
  background: var(--cadre);
  border-radius: 40px;
  padding: 9px;
  box-shadow: 0 0 0 1px var(--filet-fort), 0 40px 80px -30px rgba(0, 0, 0, .9);
}
.telephone img { border-radius: 31px; width: 100%; }
.duo .telephone { position: absolute; top: 0; width: 50%; max-width: 300px; }
.telephone-a { left: 6%; transform: rotate(-7deg); transform-origin: bottom right; z-index: 2; }
.telephone-b { right: 6%; top: 9% !important; transform: rotate(7deg); transform-origin: bottom left; }

@media (prefers-reduced-motion: no-preference) {
  .telephone-a { animation: rapproche-a 1.1s cubic-bezier(.2, .8, .2, 1) both .15s; }
  .telephone-b { animation: rapproche-b 1.1s cubic-bezier(.2, .8, .2, 1) both .15s; }
  .duo::before { animation: halo 1.6s ease-out both .5s; }
}
@keyframes rapproche-a { from { opacity: 0; transform: translateX(-40px) rotate(-14deg); } to { opacity: 1; transform: rotate(-7deg); } }
@keyframes rapproche-b { from { opacity: 0; transform: translateX(40px) rotate(14deg); } to { opacity: 1; transform: rotate(7deg); } }
@keyframes halo { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Sections ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; border-top: 1px solid var(--filet); }
.section h2 {
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 20ch;
  text-wrap: balance;
}

/* Étapes : une vraie suite, d'où la numérotation. Chaque étape
   montre l'écran correspondant, puis son numéro et son explication. */
.etapes {
  list-style: none; margin: 56px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px;
  counter-reset: etape;
}
.etapes li { counter-increment: etape; }
.etapes .telephone-seul { width: min(260px, 100%); margin-bottom: 32px; }
.etape-texte { position: relative; padding-left: 56px; }
.etape-texte::before {
  content: counter(etape);
  position: absolute; top: -6px; left: 0;
  font-family: var(--serif); font-size: 52px; line-height: 1; color: var(--rose);
  font-variant-numeric: lining-nums;
}
.etapes h3 { font-size: 24px; line-height: 1.2; margin-bottom: 10px; }
.etapes p { color: var(--texte-doux); max-width: 30em; font-size: 17px; }
#etapes .actions { margin-top: 56px; }

/* Fonctionnalités : une rangée par fonction, image et texte alternés. */
.fonction {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(32px, 7vw, 96px); align-items: center;
  margin-top: clamp(56px, 8vw, 96px);
}
.fonction-inverse { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.fonction-inverse .telephone { order: 2; }
.fonction-double { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); }
.paire { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.paire .telephone:last-child { margin-top: 56px; }
.fonction-sans-image { grid-template-columns: 1fr; border-top: 1px solid var(--filet); padding-top: clamp(40px, 6vw, 64px); }
.fonction-sans-image .fonction-texte { max-width: 36em; }
.fonction-texte h3 { font-size: clamp(28px, 3vw, 38px); line-height: 1.15; letter-spacing: -.015em; margin-bottom: 18px; }
.fonction-texte p { color: var(--texte-doux); max-width: 32em; }
.fonction-texte p + p { margin-top: 14px; }
.telephone-seul { border-radius: 34px; padding: 7px; }
.telephone-seul img { border-radius: 27px; }

/* Confidentialité : une liste de garanties, sur fond relevé. */
.section-confidentialite { background: linear-gradient(180deg, var(--prune), var(--nuit)); }
.garanties {
  margin: 56px 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px;
}
.garanties div { border-top: 1px solid var(--filet-fort); padding: 24px 0 36px; }
.garanties dt { font-family: var(--serif); font-size: 24px; line-height: 1.25; color: var(--poudre); margin-bottom: 10px; }
.garanties dd { margin: 0; color: var(--texte-doux); max-width: 30em; }

/* Installation */
.installation {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 48px;
  background: var(--prune-clair);
  border: 1px solid var(--filet-fort);
  border-radius: 32px;
  padding: clamp(28px, 5vw, 56px);
}
.installation-intro p { margin: 20px 0 32px; color: var(--texte-doux); max-width: 30em; }
.installation-plateformes { display: grid; gap: 32px; align-content: center; }
.installation-plateformes h3 { font-size: 22px; margin-bottom: 10px; }
.installation-plateformes ol { margin: 0; padding-left: 1.3em; color: var(--texte-doux); font-size: 16.5px; }
.installation-plateformes li + li { margin-top: 4px; }
.installation-plateformes li::marker { color: var(--rose); font-weight: 700; }

/* Questions */
.questions { margin-top: 40px; }
.questions details { border-top: 1px solid var(--filet); }
.questions details:last-child { border-bottom: 1px solid var(--filet); }
.questions summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 22px 0;
  font-family: var(--serif); font-size: 22px; line-height: 1.3; color: var(--texte);
}
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after {
  content: ""; flex-shrink: 0; width: 14px; height: 14px;
  background:
    linear-gradient(var(--rose), var(--rose)) center / 14px 2px no-repeat,
    linear-gradient(var(--rose), var(--rose)) center / 2px 14px no-repeat;
  transition: transform .2s ease;
}
.questions details[open] summary::after { transform: rotate(45deg); }
.questions details p { padding: 0 0 24px; color: var(--texte-doux); max-width: 38em; }

/* Clôture */
.cloture { padding: clamp(72px, 10vw, 140px) 0; border-top: 1px solid var(--filet); text-align: center; position: relative; overflow: hidden; }
.cloture::before {
  content: ""; position: absolute; left: 50%; bottom: -40%; width: min(900px, 120vw); aspect-ratio: 1; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(232, 135, 145, .16), transparent);
  pointer-events: none;
}
.cloture-phrase {
  position: relative;
  font-family: var(--serif); font-size: clamp(34px, 5vw, 62px); line-height: 1.1; letter-spacing: -.02em;
  color: #f7dfde; max-width: 16ch; margin: 0 auto 40px;
}
.cloture .actions { position: relative; }

/* Pied de page */
.pied { border-top: 1px solid var(--filet); padding: 48px 0 calc(48px + env(safe-area-inset-bottom)); font-size: 15px; color: var(--texte-discret); }
.pied-grille { display: grid; grid-template-columns: auto 1fr auto; gap: 24px 48px; align-items: start; }
.pied nav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding-top: 8px; }
.pied nav a, .pied p a { color: var(--texte-doux); text-decoration: none; }
.pied nav a:hover, .pied p a:hover { color: var(--texte); text-decoration: underline; }
.pied p { padding-top: 8px; text-align: right; }

/* ---------- Fenêtre d'installation ---------- */
.fenetre {
  width: min(460px, calc(100vw - 32px));
  border: 1px solid var(--filet-fort);
  border-radius: 28px;
  padding: 36px 28px 28px;
  background: var(--prune-clair);
  color: var(--texte);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, .9);
}
.fenetre::backdrop { background: rgba(8, 4, 9, .72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.fenetre h2 { font-size: 28px; line-height: 1.15; letter-spacing: -.01em; padding-right: 32px; margin-bottom: 20px; }
.fenetre p { color: var(--texte-doux); }
.fenetre .actions { margin-top: 24px; }
.fenetre-fermer {
  position: absolute; top: 14px; right: 14px;
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: transparent; border: 1px solid var(--filet); color: var(--texte-doux); cursor: pointer;
}
.fenetre-fermer:hover { color: var(--texte); border-color: var(--filet-fort); }
.consignes { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.consignes li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; font-size: 16.5px; line-height: 1.45; }
.consignes strong { color: var(--texte); }
.pictogramme {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(232, 135, 145, .12); color: var(--rose);
}
.pictogramme-texte { font-weight: 700; font-size: 14px; }
.fenetre-note { margin-top: 20px; font-size: 14.5px; color: var(--texte-discret) !important; }

/* ---------- Tablettes ---------- */
@media (max-width: 960px) {
  .ouverture-grille { grid-template-columns: 1fr; gap: 56px; }
  .ouverture h1 { max-width: 14ch; }
  .duo { height: auto; aspect-ratio: 1 / 1.02; max-width: 520px; width: 100%; margin: 0 auto; }
  .fonction, .fonction-inverse, .fonction-double { grid-template-columns: 1fr; gap: 36px; }
  .fonction .telephone-seul { width: min(280px, 72vw); margin: 0 auto; }
  .fonction-inverse .telephone { order: 0; }
  .paire { max-width: 560px; width: 100%; margin: 0 auto; }
  .paire .telephone-seul { width: auto; }
  .garanties { grid-template-columns: 1fr; }
  .etapes { grid-template-columns: 1fr; gap: 64px; max-width: 520px; margin-left: auto; margin-right: auto; }
  .etapes li { display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr); gap: 28px; align-items: center; }
  .etapes .telephone-seul { width: 100%; margin: 0; }
  .installation { grid-template-columns: 1fr; }
  .pied-grille { grid-template-columns: 1fr; }
  .pied p { text-align: left; }
}

/* ---------- Téléphones ---------- */
@media (max-width: 560px) {
  body { font-size: 17px; }
  .bandeau-ligne { min-height: 60px; }
  .marque-logo { width: 34px; height: 34px; }
  .marque-nom { font-size: 23px; }
  .bandeau-actions { gap: 14px; }
  .lien-discret { font-size: 14px; }
  .bouton-petit { min-height: 38px; padding: 0 16px; font-size: 14.5px; }
  .ouverture .actions { flex-direction: column; align-items: stretch; text-align: center; }
  .ouverture .bouton { width: 100%; }
  .duo { aspect-ratio: 1 / 1.1; }
  .telephone-a { left: 10%; }
  .telephone-b { right: 10%; }
  .duo .telephone { width: 47%; }
  .telephone { border-radius: 30px; padding: 6px; }
  .telephone img { border-radius: 24px; }
  .paire { gap: 14px; }
  .etapes li { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 20px; align-items: start; }
  .etape-texte { padding-left: 0; }
  .etape-texte::before { position: static; display: block; font-size: 40px; margin-bottom: 8px; }
  .etapes h3 { font-size: 21px; }
  .etapes p { font-size: 16px; }
  .paire .telephone:last-child { margin-top: 36px; }
  .questions summary { font-size: 20px; }
  .cloture .actions { flex-direction: column; }
}