/* Zapette — feuille de styles unique du site.
   Rondeurs de Rubik et du disque de la croix : le site reprend la forme de l'appli. */

@font-face {
  font-family: "Rubik";
  src: url("/fonts/rubik-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-display: swap;
}

:root {
  --lagon: #00B8AD;
  --lagon-fonce: #008C84;
  --lagon-texte: #00716A;      /* turquoise lisible sur fond clair (contraste AA) */
  --brume: #E1F5F3;            /* le disque pâle de la croix dans l'appli */
  --papier: #F4F7F6;
  --carte: #FFFFFF;
  --encre: #0D2B29;
  --encre-douce: #4A6563;
  --trait: #D5E4E2;
  --ombre: 0 1px 2px rgb(13 43 41 / .06), 0 12px 32px -12px rgb(13 43 41 / .18);
  --rayon: 22px;
  --marge: clamp(1rem, 4vw, 3rem);
  --largeur: 72rem;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --lagon-texte: #3FD6CB;
    --brume: #123A37;
    --papier: #071C1B;
    --carte: #0F2B29;
    --encre: #E4F3F1;
    --encre-douce: #9BB9B6;
    --trait: #1E403D;
    --ombre: 0 1px 2px rgb(0 0 0 / .3), 0 16px 40px -16px rgb(0 0 0 / .6);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font: 400 1.0625rem/1.55 "Rubik", system-ui, -apple-system, sans-serif;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--lagon-texte); text-underline-offset: .18em; }
h1, h2, h3 { line-height: 1.08; letter-spacing: -.025em; margin: 0; text-wrap: balance; }
h2 { font-size: clamp(1.85rem, 3.6vw, 2.75rem); font-weight: 700; }
h3 { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--lagon); outline-offset: 3px; border-radius: 6px; }

.evitement { position: absolute; left: -999px; top: 0; }
.evitement:focus { left: 1rem; top: 1rem; z-index: 10; background: var(--carte); padding: .5rem 1rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- En-tête ---------- */
.entete {
  display: flex; align-items: center; justify-content: space-between;
  max-width: var(--largeur); margin: 0 auto; padding: 1.25rem var(--marge);
}
.marque { display: flex; align-items: center; gap: .6rem; color: var(--encre); text-decoration: none; font-weight: 700; font-size: 1.25rem; letter-spacing: -.02em; }
.entete nav { display: flex; gap: 1.5rem; }
.entete nav a { color: var(--encre-douce); text-decoration: none; font-weight: 500; }
.entete nav a:hover { color: var(--encre); }

main > section { max-width: var(--largeur); margin: 0 auto; padding: clamp(4rem, 9vw, 7.5rem) var(--marge) 0; }

/* ---------- Accroche ---------- */
.accroche {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
  padding-top: clamp(1.5rem, 4vw, 3rem) !important;
}
.accroche h1 {
  font-size: clamp(2.5rem, 4.7vw, 3.9rem); font-weight: 750; letter-spacing: -.04em; line-height: .98;
}
.chapeau { margin-top: 1.4rem; font-size: clamp(1.125rem, 1.6vw, 1.3rem); color: var(--encre-douce); max-width: 30ch; }
.compatible { margin-top: 1.25rem; font-size: .9375rem; color: var(--encre-douce); }

.badges { display: flex; flex-wrap: wrap; align-items: center; gap: .875rem; margin-top: 2rem; }
.badge-app-store { display: inline-block; border-radius: 10px; }
.badge-app-store img { height: 48px; width: auto; }
.bouton-android {
  display: inline-flex; align-items: center; gap: .55rem; height: 48px; padding: 0 1.1rem 0 .9rem;
  font: inherit; font-weight: 600; font-size: 1rem; line-height: 1.05; text-align: left;
  color: var(--encre); background: transparent; border: 1.5px solid var(--trait); border-radius: 10px; cursor: pointer;
}
.bouton-android small { display: block; font-size: .6875rem; font-weight: 400; color: var(--encre-douce); }
.bouton-android:hover { border-color: var(--lagon); }

/* ---------- Scène de démonstration ---------- */
.scene {
  position: relative; aspect-ratio: 1 / .92;
  border-radius: 36px; padding: 7% 7% 0;
  background: linear-gradient(170deg, var(--lagon) 0%, var(--lagon-fonce) 100%);
  overflow: hidden; isolation: isolate;
}
.scene::before { /* reflet doux, comme le fond des captures App Store */
  content: ""; position: absolute; inset: -30% -10% auto auto; width: 70%; aspect-ratio: 1;
  background: radial-gradient(closest-side, rgb(255 255 255 / .22), transparent); z-index: -1;
}

.tv { width: 80%; }
.tv-ecran {
  position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden;
  background: #0B1716; border: 6px solid #10201F;
  box-shadow: 0 30px 60px -20px rgb(0 40 37 / .55);
}
.tv-pied { width: 26%; height: 10px; margin: 0 auto; border-radius: 0 0 8px 8px; background: rgb(0 40 37 / .45); }

.tv-accueil {
  position: absolute; inset: 0; padding: 9% 7%;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 7% 5%; align-content: center;
  transition: opacity .25s, transform .35s;
}
.tuile {
  position: relative; aspect-ratio: 16 / 10; border-radius: 9px; background: var(--t);
  transition: transform .28s cubic-bezier(.3, 1.5, .5, 1), box-shadow .28s;
}
.tuile span {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); text-align: center;
  font-size: clamp(.5rem, 1vw, .7rem); color: rgb(255 255 255 / .0); transition: color .2s;
}
.t1 { --t: #2E86DE; } .t2 { --t: #E84A5F; } .t3 { --t: #F5A623; } .t4 { --t: #8E54C9; } .t5 { --t: #7FBF1E; } .t6 { --t: #30363A; }
.tuile.focus { transform: scale(1.14); box-shadow: 0 10px 24px -6px rgb(0 0 0 / .7), 0 0 0 2px rgb(255 255 255 / .85); z-index: 1; }
.tuile.focus span { color: rgb(255 255 255 / .9); }

.tv-appli { /* l'appli « ouverte » après OK */
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--t, #2E86DE); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .4s cubic-bezier(.2, .9, .3, 1);
  color: #fff; font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.6rem); letter-spacing: -.02em;
}
.tv.ouverte .tv-appli { opacity: 1; transform: none; }
.tv.ouverte .tv-accueil { opacity: 0; transform: scale(1.1); }

.tv-lecture, .tv-volume { position: absolute; opacity: 0; transition: opacity .25s; }
.tv-lecture { inset: 0; margin: auto; width: 16%; aspect-ratio: 1; border-radius: 50%; background: rgb(0 0 0 / .55); }
.tv-lecture::after { content: ""; position: absolute; inset: 30% 28% 30% 38%; background: #fff; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.tv-lecture.pause::after { inset: 32%; clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0); }
.tv-volume { right: 5%; top: 18%; bottom: 18%; width: 3.2%; border-radius: 99px; background: rgb(255 255 255 / .2); overflow: hidden; }
.tv-volume i { position: absolute; left: 0; right: 0; bottom: 0; height: var(--v, 50%); background: #fff; transition: height .2s; }
.montre { opacity: 1 !important; }

/* La télécommande : mêmes formes que l'appli, inclinée comme sur l'icône */
.zapette {
  position: absolute; right: 5%; bottom: -10%; width: 36%;
  padding: 7% 6% 14%; border-radius: 34px 34px 0 0;
  background: var(--carte); box-shadow: 0 40px 70px -20px rgb(0 40 37 / .6);
  transform: rotate(-9deg); transform-origin: 50% 100%;
}
.croix {
  position: relative; aspect-ratio: 1; border-radius: 50%; background: var(--brume);
}
.croix button, .touches button {
  display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; font: inherit;
  color: var(--lagon-texte); background: transparent; -webkit-tap-highlight-color: transparent;
}
.croix svg, .touches svg { width: 46%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.croix svg { width: 60%; }
.croix .rempli, .touches .rempli { fill: currentColor; stroke: none; }
.croix button { position: absolute; width: 28%; height: 28%; border-radius: 50%; }
.c-haut { top: 3%; left: 36%; } .c-bas { bottom: 3%; left: 36%; }
.c-gauche { left: 3%; top: 36%; } .c-droite { right: 3%; top: 36%; }
.croix .c-ok {
  inset: 30%; width: auto; height: auto; background: var(--lagon); color: #fff;
  font-weight: 600; font-size: clamp(.8rem, 1.6vw, 1.15rem);
  transition: transform .12s;
}
.touches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9%; margin-top: 12%; }
.touches button { aspect-ratio: 1; border-radius: 50%; background: var(--brume); transition: transform .12s; }
.touches .plein { background: var(--lagon); color: #fff; }
.touches .volume { grid-column: span 2; display: flex; gap: 12%; justify-content: center; padding: 0 6%; border-radius: 99px; background: var(--brume); }
.touches .volume button { width: 42%; background: color-mix(in srgb, var(--lagon) 12%, var(--brume)); }
.zapette button.appui, .zapette button:active { transform: scale(.88); }
.croix button.appui:not(.c-ok) { background: color-mix(in srgb, var(--lagon) 18%, transparent); }

/* Ondes : partent de la télécommande vers la TV à chaque appui, comme sur l'icône */
.ondes { position: absolute; right: 40%; bottom: 44%; width: 11%; aspect-ratio: 1; pointer-events: none; }
.ondes i {
  position: absolute; inset: 0; border-radius: 50%;
  border: 4px solid transparent; border-top-color: #fff; border-left-color: #fff; transform: rotate(-8deg);
  opacity: 0;
}
.ondes i + i { inset: -70%; }
.ondes.emet i { animation: onde .6s ease-out; }
.ondes.emet i + i { animation-delay: .08s; }
@keyframes onde { 0% { opacity: 0; scale: .6; } 30% { opacity: 1; } 100% { opacity: 0; scale: 1.15; } }

.essayez {
  position: absolute; left: 7%; bottom: 6%; max-width: 40%;
  font-size: .8125rem; line-height: 1.35; color: rgb(255 255 255 / .92);
}

/* Entrée de la scène : le seul mouvement non déclenché de la page */
@media (prefers-reduced-motion: no-preference) {
  .scene .tv { animation: allume .9s .15s both cubic-bezier(.2, .8, .2, 1); }
  .scene .zapette { animation: arrive 1s .35s both cubic-bezier(.2, .9, .25, 1.05); }
  @keyframes allume { from { opacity: 0; transform: translateY(14px) scale(.97); } }
  @keyframes arrive { from { transform: translateY(60%) rotate(4deg); } }
}

/* ---------- Bénéfices ---------- */
.benefices h2 { max-width: 20ch; }
.liste-benefices {
  list-style: none; margin: 3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.5rem 2.5rem;
}
.liste-benefices li { padding-top: 1.25rem; border-top: 3px solid var(--lagon); }
.liste-benefices p { margin-top: .6rem; color: var(--encre-douce); max-width: 34ch; }

/* ---------- Appareils ---------- */
.appareils h2 { max-width: 18ch; }
.vitrine {
  margin-top: 3rem; padding: clamp(2rem, 5vw, 4rem) clamp(1rem, 4vw, 3.5rem) 0;
  border-radius: 36px; background: linear-gradient(170deg, var(--lagon), var(--lagon-fonce));
  display: grid; grid-template-columns: .9fr .85fr 1.6fr; gap: clamp(1rem, 3vw, 2.5rem); align-items: end; overflow: hidden;
}
.vitrine figure { margin: 0; display: flex; flex-direction: column-reverse; gap: 1.25rem; }
.vitrine figcaption { color: #fff; font-size: .9375rem; line-height: 1.4; }
.vitrine figcaption strong { display: block; font-size: 1.125rem; }
.vitrine img { box-shadow: 0 30px 60px -24px rgb(0 40 37 / .7); }
.ecran-mac img { border-radius: 14px 14px 0 0; max-height: 34rem; object-fit: cover; object-position: top; }
.ecran-iphone img { border-radius: 16% / 7.6%; border-bottom-left-radius: 0; border-bottom-right-radius: 0; max-height: 30rem; object-fit: cover; object-position: top; }
.ecran-ipad img { border-radius: 6% 6% 0 0 / 7% 7% 0 0; }

/* ---------- Comparaison ---------- */
.intro { margin-top: 1rem; color: var(--encre-douce); max-width: 52ch; }
.tableau-defile { margin-top: 2.5rem; overflow-x: auto; }
table { width: 100%; min-width: 34rem; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 1.05rem 1.25rem 1.05rem 0; border-bottom: 1px solid var(--trait); }
thead th { font-size: 1.125rem; font-weight: 700; padding-bottom: .9rem; }
thead th:nth-child(2) { color: var(--lagon-texte); }
tbody th { font-weight: 500; width: 28%; }
td { color: var(--encre-douce); width: 36%; }
td.oui { color: var(--encre); font-weight: 500; padding-left: 1.9rem; position: relative; }
td.oui::before { /* coche */
  content: ""; position: absolute; left: 0; top: 1.35rem; width: 1.05rem; height: .55rem;
  border-left: 3px solid var(--lagon); border-bottom: 3px solid var(--lagon); transform: rotate(-45deg) translate(1px, -3px);
}
td.bof { color: var(--encre); padding-left: 1.9rem; position: relative; }
td.bof::before { content: ""; position: absolute; left: .1rem; top: 1.55rem; width: .9rem; height: 3px; border-radius: 2px; background: var(--encre-douce); }

/* ---------- Étapes : une vraie séquence, d'où la numérotation ---------- */
.etapes ol { list-style: none; counter-reset: etape; margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.etapes li { counter-increment: etape; }
.etapes li::before {
  content: counter(etape); display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: 1.25rem;
  border-radius: 50%; background: var(--lagon); color: #fff; font-weight: 700; font-size: 1.375rem;
}
.etapes p { margin-top: .5rem; color: var(--encre-douce); max-width: 30ch; }

/* ---------- FAQ ---------- */
.faq h2 { margin-bottom: 2rem; }
.faq details { border-bottom: 1px solid var(--trait); max-width: 48rem; }
.faq summary {
  display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 0;
  font-weight: 500; font-size: 1.125rem; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: .65rem; height: .65rem; margin-top: .4rem;
  border-right: 2.5px solid var(--lagon-texte); border-bottom: 2.5px solid var(--lagon-texte);
  transform: rotate(45deg); transition: transform .2s;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq details p { padding: 0 0 1.4rem; color: var(--encre-douce); max-width: 60ch; }
.lien { font: inherit; color: var(--lagon-texte); background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; }

/* ---------- Appel final ---------- */
.final { text-align: center; padding-bottom: clamp(4rem, 9vw, 7rem) !important; }
.final h2 { max-width: 16ch; margin: 0 auto; font-size: clamp(2.1rem, 4.6vw, 3.5rem); letter-spacing: -.035em; }
.final .badges { justify-content: center; }

/* ---------- Fenêtre Android ---------- */
.fenetre {
  width: min(28rem, calc(100% - 2rem)); padding: 2rem; border: 0; border-radius: var(--rayon);
  color: var(--encre); background: var(--carte); box-shadow: var(--ombre);
}
.fenetre::backdrop { background: rgb(7 28 27 / .55); backdrop-filter: blur(4px); }
.fenetre h2 { font-size: 1.6rem; padding-right: 2rem; }
.fenetre > p { margin-top: .6rem; color: var(--encre-douce); }
.fermer { position: absolute; right: 1rem; top: 1rem; }
.fermer button { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; font-size: 1.4rem; line-height: 1; color: var(--encre); background: var(--brume); cursor: pointer; }
.inscription { display: grid; gap: .6rem; margin-top: 1.5rem; }
/* Tant que Brevo n'est pas branché, le formulaire reste caché (attribut hidden) et l'adresse e-mail le remplace. */
.inscription[hidden], .inscription:not([hidden]) ~ .attente { display: none; }
.attente { margin-top: 1.2rem; }
.inscription label { font-weight: 500; font-size: .9375rem; }
.inscription input[type=email] {
  font: inherit; padding: .8rem 1rem; border-radius: 12px; border: 1.5px solid var(--trait); background: var(--papier); color: var(--encre);
}
.consentement { display: flex; gap: .65rem; align-items: flex-start; margin-top: .4rem; font-weight: 400 !important; color: var(--encre-douce); }
.consentement input { margin-top: .25rem; width: 1.1rem; height: 1.1rem; accent-color: var(--lagon-fonce); flex: none; }
.bouton {
  margin-top: .6rem; padding: .9rem 1.2rem; border: 0; border-radius: 12px; cursor: pointer;
  font: inherit; font-weight: 600; color: #fff; background: var(--lagon-texte);
}
@media (prefers-color-scheme: dark) { .bouton { color: #04211F; } }
.petit { font-size: .8125rem; color: var(--encre-douce); }

/* ---------- Pied de page ---------- */
.pied { max-width: var(--largeur); margin: 0 auto; padding: 2.5rem var(--marge) 3rem; border-top: 1px solid var(--trait); font-size: .875rem; color: var(--encre-douce); }
.pied nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1rem; }
.pied nav a { color: var(--encre); }
.pied p { max-width: 70ch; }

/* ---------- Pages intérieures : assistance, confidentialité, mentions légales ---------- */
.page > section { max-width: none; margin: 0; padding: 0; }
.page { max-width: 46rem; margin: 0 auto; padding: clamp(2rem, 6vw, 4.5rem) var(--marge) clamp(4rem, 8vw, 6rem); }
.page h1 { font-size: clamp(2.4rem, 5vw, 3.5rem); font-weight: 750; letter-spacing: -.035em; }
.page .chapeau { max-width: 40ch; }
.page h2 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); margin: 3.25rem 0 1rem; }
.page h3 { margin: 2rem 0 .5rem; }
.page p, .page li { color: var(--encre-douce); max-width: 66ch; }
.page p + p, .page ul + p, .page p + ul { margin-top: .9rem; }
.page ul { padding-left: 1.2rem; margin: .6rem 0 0; }
.page li + li { margin-top: .4rem; }
.page strong { color: var(--encre); font-weight: 600; }
.page .faq { padding: 0; }
.page .faq h2 { margin-bottom: 1rem; }
.page .etapes ol { margin-top: 1.5rem; gap: 1.5rem; }
.maj { margin-top: 1rem; font-size: .875rem; }
.contact {
  margin-top: 1.25rem; padding: 1.5rem 1.75rem; border-radius: var(--rayon);
  background: var(--carte); box-shadow: var(--ombre);
}
.contact .adresse { display: inline-block; margin-top: .4rem; font-size: 1.375rem; font-weight: 600; letter-spacing: -.01em; }
.page .badges { margin-top: 1.5rem; }
dl.fiche { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .55rem 1.5rem; margin: 1rem 0 0; }
dl.fiche dt { font-weight: 500; }
dl.fiche dd { margin: 0; color: var(--encre-douce); }
.opposition { display: flex; gap: .7rem; align-items: flex-start; margin-top: 1rem; padding: 1.1rem 1.25rem; border-radius: 14px; background: var(--brume); }
.opposition input { margin-top: .25rem; width: 1.15rem; height: 1.15rem; accent-color: var(--lagon-fonce); flex: none; }
.opposition label { color: var(--encre); }
.message-envoi { margin-top: 1rem; font-weight: 500; color: var(--lagon-texte); }
@media (max-width: 560px) { dl.fiche { grid-template-columns: 1fr; gap: .15rem; } dl.fiche dd { margin-bottom: .6rem; } }

/* ---------- Mobile ---------- */
@media (max-width: 900px) {
  .accroche { grid-template-columns: 1fr; }
  .chapeau { max-width: 36ch; }
  .liste-benefices { grid-template-columns: 1fr 1fr; }
  .vitrine { grid-template-columns: 1fr 1fr; }
  .ecran-ipad { grid-column: 1 / -1; }
  .etapes ol { grid-template-columns: 1fr; gap: 2rem; }
}
@media (max-width: 560px) {
  .entete nav { gap: 1rem; font-size: .9375rem; }
  .scene { aspect-ratio: 1 / 1.08; border-radius: 28px; }
  .zapette { width: 48%; border-radius: 26px 26px 0 0; }
  .essayez { max-width: 38%; font-size: .75rem; }
  .vitrine, .liste-benefices { grid-template-columns: 1fr; }
  .ecran-mac, .ecran-iphone { width: 100%; max-width: 17rem; margin: 0 auto; }
  .ecran-mac img, .ecran-iphone img { max-height: 22rem; }
  .vitrine figcaption { text-align: center; }
  table { min-width: 0; font-size: .9375rem; }
  th, td { padding-right: .75rem; }
  td.oui, td.bof { padding-left: 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}