/* ==========================================================================
   Institut Pay — feuille de style unique
   Palette et typographie alignées sur le logiciel (document design §2 et §3).
   ========================================================================== */

:root{
  /* Encres et fonds */
  --encre:        #0B1F1C;
  --texte:        #1A2332;
  --texte-doux:   #55677B;
  --texte-faible: #8A9AAC;
  --blanc:        #FFFFFF;
  --gris:         #F6F8FA;   /* le gris de l'application */
  --papier:       #FAF7F0;   /* le blanc chaud du reçu papier */
  --bord:         #E3E8EF;

  /* Teal — couleur du produit */
  --teal:         #0E7569;
  --teal-fonce:   #0A5D53;
  --teal-soft:    #E3F4F1;
  --teal-nuit:    #072E29;

  /* Ambre — une seule touche chaude, jamais pour une action */
  --ambre:        #D99A2B;
  --ambre-soft:   #FBF3E2;
  --ambre-clair:  #F0C169;

  --vert-wa:      #25D366;

  /* Typographie */
  --display: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --corps:   "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --rayon: 12px;
  --ombre: 0 1px 2px rgba(11,31,28,.05), 0 12px 32px -12px rgba(11,31,28,.18);
}

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

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

body{
  margin:0;
  background:var(--blanc);
  color:var(--texte);
  font-family:var(--corps);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:var(--teal); }

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

.skip{
  position:absolute; left:-9999px; top:0;
  background:var(--blanc); color:var(--teal); padding:12px 18px; z-index:100;
}
.skip:focus{ left:8px; top:8px; }

/* ---------------------------------------------------------------- Ossature */

.wrap{ width:min(1180px, 100% - 40px); margin-inline:auto; }
.wrap--etroit{ width:min(760px, 100% - 40px); }

.sec{ padding: clamp(60px, 8vw, 112px) 0; }
.sec--papier{ background:var(--papier); }

/* -------------------------------------------------------------- Typographie */

.h1{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(2.15rem, 1.35rem + 3.3vw, 3.6rem);
  line-height:1.05;
  letter-spacing:-.025em;
  margin:.35em 0 .5em;
  text-wrap:balance;
}
.h2{
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.7rem, 1.15rem + 2.1vw, 2.5rem);
  line-height:1.12;
  letter-spacing:-.02em;
  margin:.2em 0 .6em;
  text-wrap:balance;
}
.h2--centre{ text-align:center; max-width:22ch; margin-inline:auto; }
.h2--clair{ color:var(--blanc); }
.h3{
  font-family:var(--display);
  font-weight:600;
  font-size:1.22rem;
  line-height:1.25;
  letter-spacing:-.01em;
  margin:0 0 .4em;
}

.eyebrow{
  font-family:var(--mono);
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--teal);
  margin:0;
}
.eyebrow--centre{ text-align:center; }

.lead{ font-size:1.16rem; color:var(--texte-doux); margin:0 0 1.6em; max-width:46ch; }
.sous-titre{
  text-align:center; color:var(--texte-doux);
  max-width:56ch; margin:-.2em auto 3.2em;
}

/* ----------------------------------------------------------------- Boutons */

.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--corps); font-size:1rem; font-weight:600; line-height:1;
  padding:15px 24px;
  border:0; border-radius:10px;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .15s ease, transform .15s ease;
}
.btn--wa{ background:var(--teal); color:var(--blanc); }
.btn--wa:hover{ background:var(--teal-fonce); transform:translateY(-1px); }
.btn--sm{ padding:10px 16px; font-size:.94rem; border-radius:8px; }
.btn--lg{ padding:18px 30px; font-size:1.08rem; }
.btn--bloc{ display:flex; justify-content:center; width:100%; }
.ico-wa{ width:1.15em; height:1.15em; flex:none; }

.lien-sobre{
  color:var(--texte-doux); text-decoration:none;
  border-bottom:1px solid var(--bord); padding-bottom:2px;
}
.lien-sobre:hover{ color:var(--teal); border-color:var(--teal); }

/* ------------------------------------------------------------ Barre du haut */

.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--bord);
}
.topbar__in{ display:flex; align-items:center; gap:24px; min-height:64px; }
.marque{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--teal); }
.marque__logo{ width:32px; height:32px; }
.marque__nom{
  font-family:var(--display); font-weight:800; font-size:1.12rem;
  letter-spacing:-.02em; color:var(--encre);
}
.topnav{ display:flex; gap:26px; margin-left:auto; }
.topnav a{ color:var(--texte-doux); text-decoration:none; font-size:.97rem; }
.topnav a:hover{ color:var(--teal); }
.topbar .btn--sm{ margin-left:0; }

/* -------------------------------------------------------------------- Hero */

.hero{
  background:var(--teal-nuit);
  background-image:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 34px);
  color:var(--blanc);
  padding: clamp(52px, 7vw, 92px) 0 clamp(60px, 8vw, 104px);
  overflow:hidden;
}
.hero__in{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap: clamp(32px, 5vw, 64px); align-items:center;
}
.hero .eyebrow{ color:var(--ambre-clair); }
.hero .lead{ color:rgba(255,255,255,.78); font-size:1.2rem; }
.hero__actions{ display:flex; flex-wrap:wrap; align-items:center; gap:20px; }
.hero .lien-sobre{ color:rgba(255,255,255,.72); border-color:rgba(255,255,255,.28); }
.hero .lien-sobre:hover{ color:var(--blanc); border-color:var(--blanc); }
.hero__note{ margin:22px 0 0; font-size:.93rem; color:rgba(255,255,255,.55); }

.offre-pill{ border-radius:14px;
  display:inline-flex; flex-wrap:wrap; align-items:center; gap:10px;
  margin:0 0 26px; padding:9px 16px 9px 10px;
  background:rgba(217,154,43,.13);
  border:1px solid rgba(240,193,105,.35);
  font-size:.95rem; color:var(--ambre-clair);
}
.offre-pill__label{
  background:var(--ambre); color:#2A1C05;
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  padding:5px 10px; border-radius:999px;
}
.offre-pill s{ color:rgba(255,255,255,.45); }

/* --------------------------------------------------- Fenêtre Windows (cadre) */

.fenetre{
  min-width:0;
  margin:0;
  background:var(--blanc);
  border:1px solid var(--bord);
  border-radius:var(--rayon);
  overflow:hidden;
  box-shadow:var(--ombre);
}
.fenetre__barre{
  min-width:0;
  display:flex; align-items:center; gap:12px;
  height:34px; padding:0 12px;
  background:linear-gradient(to bottom, #FBFCFD, #F1F4F8);
  border-bottom:1px solid var(--bord);
}
.fenetre__titre{
  font-size:.76rem; color:var(--texte-faible); letter-spacing:.01em;
}
.fenetre__boutons{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.fenetre__boutons i{ display:block; width:9px; height:9px; position:relative; }
.fenetre__boutons i::before,
.fenetre__boutons i::after{ content:""; position:absolute; background:#9AA8B8; }
.fenetre__boutons i:nth-child(1)::before{ left:0; right:0; top:4px; height:1px; }
.fenetre__boutons i:nth-child(2)::before{
  inset:0; background:none; border:1px solid #9AA8B8;
}
.fenetre__boutons i:nth-child(3)::before,
.fenetre__boutons i:nth-child(3)::after{
  left:-1px; right:-1px; top:4px; height:1px; transform:rotate(45deg);
}
.fenetre__boutons i:nth-child(3)::after{ transform:rotate(-45deg); }

.fenetre--hero img{ width:100%; }
.fenetre--hero{ box-shadow:0 24px 60px -20px rgba(0,0,0,.55); border-color:rgba(255,255,255,.12); }
.fenetre--hero .fenetre__barre{ background:linear-gradient(to bottom,#F4F7FA,#E9EEF4); }

/* -------------------------------------------------------------- Confiance */

.confiance{ background:var(--blanc); border-bottom:1px solid var(--bord); padding:34px 0 30px; }
.confiance__liste{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4, 1fr); gap:22px 32px;
}
.confiance__liste li{ display:flex; gap:11px; font-size:.95rem; color:var(--texte-doux); line-height:1.45; }
.confiance__liste strong{ color:var(--texte); font-weight:600; }
.confiance__liste svg{
  width:21px; height:21px; flex:none; margin-top:1px;
  fill:none; stroke:var(--teal); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.confiance__franchise{
  margin:26px auto 0; max-width:74ch; padding-top:20px;
  border-top:1px dashed var(--bord);
  font-size:.92rem; color:var(--texte-faible); text-align:center;
}

/* --------------------------------------------------------------- Problème */

.probleme__lignes{ display:grid; gap:22px; }
.probleme__lignes p{
  margin:0; padding-left:22px;
  border-left:3px solid var(--ambre);
  font-size:clamp(1.06rem, 1rem + .45vw, 1.28rem);
  line-height:1.55; color:var(--texte);
}

/* ---------------------------------------------------------------- Écrans */

.ecrans{ display:grid; gap:clamp(40px, 4.5vw, 68px); }
.ecran{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
  gap:clamp(28px, 4vw, 56px); align-items:center;
}
.ecran--inverse .fenetre{ order:2; }
.ecran .fenetre img{ width:100%; aspect-ratio:2.05; object-fit:cover; object-position:top center; }
.ecran__texte p{ color:var(--texte-doux); margin:0; }

.encart-install{
  margin-top:clamp(48px, 6vw, 80px);
  background:var(--teal-soft);
  border-radius:var(--rayon);
  padding:clamp(24px, 3vw, 36px);
  max-width:760px; margin-inline:auto;
}
.encart-install .h3{ color:#0B4F47; }
.encart-install p{ margin:0; color:#12564E; }
.encart-install code{
  font-family:var(--mono); font-size:.9em;
  background:rgba(255,255,255,.7); padding:2px 6px; border-radius:5px;
}

/* -------------------------------------------------------------- Bénéfices */

.benefices{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:20px;
}
.benefice{
  background:var(--blanc);
  border:1px solid var(--bord);
  border-radius:var(--rayon);
  padding:26px 24px 28px;
}
.benefice p{ margin:0; color:var(--texte-doux); font-size:.98rem; }
.benefice__ico{
  display:flex; align-items:center; justify-content:center;
  width:42px; height:42px; margin-bottom:16px;
  background:var(--teal-soft); border-radius:10px;
}
.benefice__ico svg{
  width:22px; height:22px;
  fill:none; stroke:var(--teal); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}

/* ------------------------------------------------------------------ Vidéo */

.video .h2--centre{ margin-bottom:2rem; }
.yt{
  position:relative; aspect-ratio:16/9; max-width:820px; margin-inline:auto;
  background:var(--encre); border-radius:var(--rayon); overflow:hidden; cursor:pointer;
  box-shadow:var(--ombre);
}
.yt__vignette{ width:100%; height:100%; object-fit:cover; opacity:.82; }
.yt__play{
  position:absolute; inset:0; margin:auto;
  width:78px; height:78px; border:0; border-radius:50%;
  background:var(--blanc); color:var(--teal);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 8px 26px rgba(0,0,0,.3);
  transition:transform .15s ease;
}
.yt__play svg{ width:34px; height:34px; margin-left:3px; }
.yt:hover .yt__play{ transform:scale(1.06); }
.yt iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.video__note{ text-align:center; color:var(--texte-faible); font-size:.9rem; margin-top:16px; }

.demo-directe{
  text-align:center; background:var(--gris);
  border:1px solid var(--bord); border-radius:var(--rayon);
  padding:clamp(28px, 4vw, 44px);
}
.demo-directe p{ margin:0 auto 24px; max-width:52ch; color:var(--texte-doux); }

/* ------------------------------------------------------------ Témoignages */

.temoignages{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.temoignage{
  margin:0; background:var(--blanc); border:1px solid var(--bord);
  border-radius:var(--rayon); padding:26px;
}
.temoignage blockquote{ margin:0 0 18px; font-size:1.02rem; }
.temoignage figcaption{ display:flex; align-items:center; gap:12px; }
.temoignage figcaption img{ border-radius:50%; object-fit:cover; }
.temoignage figcaption span{ display:flex; flex-direction:column; line-height:1.35; }
.temoignage figcaption em{ font-style:normal; font-size:.88rem; color:var(--texte-faible); }

/* ------------------------------------------------------- Prix — le reçu */

.prix{ background:var(--gris); }

.recu{
  --recu-bg:#FFFDF7;
  max-width:470px; margin:0 auto;
  filter:drop-shadow(0 14px 34px rgba(11,31,28,.13));
}
.recu__dentelure{
  height:11px;
  background-repeat:repeat-x;
  background-size:15px 11px;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--recu-bg) 50%),
    linear-gradient(-45deg, transparent 50%, var(--recu-bg) 50%);
}
.recu__dentelure:first-child{ transform:scaleY(-1); }
.recu__corps{
  background:var(--recu-bg);
  padding:clamp(26px, 4vw, 38px) clamp(22px, 3.4vw, 34px);
}
.recu__entete{
  display:flex; justify-content:space-between; gap:16px;
  font-family:var(--mono); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--teal);
  padding-bottom:12px; border-bottom:2px solid var(--encre);
}
.recu__objet{
  margin:14px 0 22px; text-align:center;
  font-family:var(--display); font-weight:600; font-size:1.1rem; color:var(--encre);
}
.recu__lignes{ list-style:none; margin:0; padding:0; display:grid; gap:11px; }
.recu__lignes li{ display:flex; align-items:flex-end; gap:8px; font-size:.95rem; }
.recu__lignes li::before{
  content:""; order:1; flex:1 1 auto;
  border-bottom:1px dotted #C9C2B2; transform:translateY(-.35em);
}
.recu__libelle{ flex:0 1 auto; color:var(--texte-doux); }
.recu__val{
  order:2; flex:none;
  font-family:var(--mono); font-size:.88rem; color:var(--texte-doux);
}
.recu__lignes--chiffres .recu__val{ font-size:.95rem; color:var(--texte); }
.recu__val--remise{ color:var(--teal); }
.recu__val s{ color:var(--texte-faible); }
.recu__sep{ height:1px; margin:20px 0; background:repeating-linear-gradient(to right, #C9C2B2 0 5px, transparent 5px 10px); }

.recu__total{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  padding:16px 18px; margin-bottom:10px;
  border:2px solid var(--encre); border-radius:8px;
}
.recu__total span{
  font-family:var(--mono); font-size:.76rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--texte-doux);
}
.recu__total strong{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.65rem, 1.2rem + 1.6vw, 2.1rem);
  letter-spacing:-.02em; color:var(--encre); white-space:nowrap;
}
.recu__lettres{
  margin:0 0 20px; font-size:.83rem; color:var(--texte-faible); font-style:italic;
}
.recu__minuteur{
  margin:0 0 20px; padding:11px 14px;
  background:var(--ambre-soft); border-radius:8px;
  font-family:var(--mono); font-size:.86rem; color:#8A5E10; text-align:center;
}
.recu__minuteur b{ font-weight:600; }
.recu__paiement{
  margin:16px 0 0; text-align:center; font-size:.88rem; color:var(--texte-faible);
}
.recu__paiement strong{ color:var(--teal); }
.prix__apres{
  margin:26px auto 0; text-align:center; font-size:.92rem; color:var(--texte-faible);
}

/* -------------------------------------------------------- Garantie et FAQ */

.garantie{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--ambre-soft); border:1px solid #F0DDB8;
  border-radius:var(--rayon); padding:20px 22px;
  margin-bottom:clamp(44px, 6vw, 72px);
}
.garantie svg{
  width:26px; height:26px; flex:none; margin-top:2px;
  fill:none; stroke:#B07714; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.garantie p{ margin:0; color:#6B4A0E; font-size:.98rem; }
.garantie strong{ color:#4A330A; }

.faq__liste{ border-top:1px solid var(--bord); }
.faq__item{ border-bottom:1px solid var(--bord); }
.faq__item summary{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:20px 0; cursor:pointer; list-style:none;
  font-family:var(--display); font-weight:600; font-size:1.06rem; color:var(--encre);
}
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__croix{ position:relative; width:15px; height:15px; flex:none; }
.faq__croix::before, .faq__croix::after{
  content:""; position:absolute; background:var(--teal);
  transition:transform .2s ease, opacity .2s ease;
}
.faq__croix::before{ left:0; right:0; top:7px; height:1.5px; }
.faq__croix::after{ top:0; bottom:0; left:7px; width:1.5px; }
.faq__item[open] .faq__croix::after{ transform:rotate(90deg); opacity:0; }
.faq__rep{ padding:0 0 22px; max-width:64ch; }
.faq__rep p{ margin:0; color:var(--texte-doux); }
.faq__reste{ margin-top:34px; text-align:center; color:var(--texte-doux); }

/* ----------------------------------------------------------- CTA final */

.final{
  background:var(--teal-nuit);
  background-image:repeating-linear-gradient(
    to bottom, rgba(255,255,255,.035) 0 1px, transparent 1px 34px);
  color:var(--blanc);
  padding: clamp(64px, 8vw, 108px) 0;
}
.final__in{ text-align:center; }
.final .h2--clair{ margin-inline:auto; }
.final__texte{
  color:rgba(255,255,255,.76); max-width:52ch; margin:0 auto 30px;
}
.final .btn--wa{ background:var(--blanc); color:var(--teal-nuit); }
.final .btn--wa:hover{ background:var(--ambre-clair); }
.final__coord{ margin:26px 0 4px; font-family:var(--mono); font-size:1.02rem; }
.final__coord a{ color:var(--blanc); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.3); }
.final__coord a:hover{ border-color:var(--blanc); }
.final__sep{ color:rgba(255,255,255,.35); margin:0 6px; }
.final__note{ margin:0; font-size:.9rem; color:rgba(255,255,255,.5); }

/* ------------------------------------------------------------------ Pied */

.pied{ background:#051C19; color:rgba(255,255,255,.6); padding:34px 0 96px; }
.pied__in p{ margin:0 0 6px; font-size:.9rem; }
.pied strong{ color:rgba(255,255,255,.9); font-weight:600; }
.pied__mention{ color:rgba(255,255,255,.42); }

/* ------------------------------------------------------ Bouton flottant WA */

.wa-flottant{
  position:fixed; right:18px; bottom:18px; z-index:60;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--vert-wa); color:#fff; text-decoration:none;
  padding:13px 18px; border-radius:999px;
  font-weight:600; font-size:.97rem; line-height:1;
  box-shadow:0 6px 20px rgba(0,0,0,.24);
  transition:transform .15s ease, opacity .25s ease;
}
.wa-flottant:hover{ transform:translateY(-2px); }
.wa-flottant .ico-wa{ width:22px; height:22px; }

/* ------------------------------------------------------------- Apparition */

.reveal{ opacity:0; transform:translateY(16px); }
.reveal.vu{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s ease; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 980px){
  .hero__in{ grid-template-columns:minmax(0,1fr); }
  .hero__visuel{ order:2; }
  .confiance__liste{ grid-template-columns:repeat(2, 1fr); }
  .benefices, .temoignages{ grid-template-columns:repeat(2, 1fr); }
  .ecran{ grid-template-columns:minmax(0,1fr); gap:22px; }
  .ecran--inverse .fenetre{ order:0; }
  .ecran__texte{ order:1; }
}

@media (max-width: 760px){
  body{ font-size:16px; }
  .topnav{ display:none; }
  .topbar__in{ gap:12px; }
  .marque{ margin-right:auto; }
  .benefices, .temoignages{ grid-template-columns:1fr; }
  .confiance__liste{ grid-template-columns:1fr; gap:14px; }
  .hero__actions .btn--lg{ width:100%; justify-content:center; }
  .wa-flottant__txt{ display:none; }
  .wa-flottant{ padding:15px; border-radius:50%; right:14px; bottom:14px; }
  .wa-flottant .ico-wa{ width:26px; height:26px; }
  .pied{ padding-bottom:110px; }
  .fenetre--hero img{ width:185%; max-width:none; }
}

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

@media print{
  .topbar, .wa-flottant, .hero__actions, .btn{ display:none !important; }
  .hero, .final{ background:#fff; color:#000; }
}