/* =========================================================
   Flex — pages intérieures : Tarifs, Essai gratuit / Contact, Paiement
   Se charge APRÈS site.css : mêmes couleurs, polices, boutons, en-tête et pied de page.
   Ce fichier ne redéfinit rien de site.css ; il ajoute seulement ce qui est propre à ces pages.
   ========================================================= */

/* ---------- Outils ---------- */
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* [À COMPLÉTER] visibles seulement avec ?relecture : règle .relecture-seule dans site.css (commune à toutes les pages) */

/* page en cours dans la navigation */
.nav-liens a[aria-current="page"] { color: #fff; background: rgba(168, 148, 255, .13); }
.menu-mobile li a[aria-current="page"] { color: var(--lavande); }
.pied-col a[aria-current="page"] { color: #fff; }

/* lien discret avec flèche (« Choisir cette offre ») */
.lien-offre {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em;
  min-height: 44px; padding: 0 14px; border-radius: 999px;
  color: var(--lavande); text-decoration: none;
  font: 600 .98rem/1.15 var(--f-titre); letter-spacing: -.01em; text-align: center;
  transition: color .25s, background-color .25s;
}
.lien-offre:hover { color: #fff; background: rgba(168, 148, 255, .09); }
.lien-offre .ic { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
.lien-offre:hover .ic { transform: translateX(3px); }
.lien-offre:focus-visible { border-radius: 999px; }

/* ---------- En-tête des pages intérieures ---------- */
.page-tete { position: relative; padding: calc(var(--entete) + 34px) 0 clamp(52px, 6.5vw, 92px); overflow-x: clip; }
.page-tete .heros-halo--a { width: 760px; height: 760px; top: -240px; }
.page-tete-grille { position: relative; z-index: 1; display: grid; gap: 44px; }
.page-texte { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.page-titre {
  margin: 20px 0 20px;
  font-size: clamp(2.85rem, 1.25rem + 5.1vw, 5.3rem);
  line-height: .93; letter-spacing: -.035em; text-wrap: balance;
}
.page-titre--moyen { font-size: clamp(2.5rem, 1.25rem + 4vw, 4.4rem); }
.page-titre .accent { color: var(--lavande); }
.page-titre .accent .mot-in {
  background: linear-gradient(110deg, #A894FF 0%, #A894FF 42%, #EDE8FF 50%, #A894FF 58%, #A894FF 100%);
  background-size: 260% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.motion .page-titre .accent .mot-in { animation: reflet 7s ease-in-out 2.2s infinite; }
.motion .page-titre .accent .mot:nth-child(2) .mot-in { animation-delay: 2.4s; }
.page-chapeau { font-size: clamp(1.06rem, 1rem + .42vw, 1.25rem); line-height: 1.55; color: var(--texte-2); max-width: 40ch; }
.page-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; width: 100%; }
.page-actions .btn { flex: 1 1 210px; }
.page-faits {
  list-style: none; width: 100%;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--trait);
}
.page-faits li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.page-faits b { font: 500 1.25rem/1 var(--f-mono); letter-spacing: -.03em; color: var(--texte); }
.page-faits span { font-size: .86rem; line-height: 1.35; color: var(--texte-2); }
.page-faits .vert { color: var(--vert); }
@media (min-width: 720px) {
  .page-actions { width: auto; }
  .page-actions .btn { flex: 0 0 auto; }
  .page-faits { grid-template-columns: repeat(3, auto); justify-content: start; gap: 40px; }
  .page-faits b { font-size: 1.45rem; }
}
@media (min-width: 1024px) {
  .page-tete-grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: 48px; }
}

/* Scène d'un personnage (même famille que la scène de Bruno sur l'accueil) */
.page-visuel { position: relative; display: grid; gap: 14px; min-width: 0; }
.scene-agent {
  position: relative; isolation: isolate;
  height: clamp(300px, 84vw, 420px);
  border-radius: 30px; overflow: hidden;
  border: 1px solid var(--trait-2);
  background: radial-gradient(110% 80% at 50% 28%, #2C2456 0%, #1C1838 46%, #131129 100%);
  box-shadow: 0 50px 120px -50px rgba(91, 63, 207, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.scene-agent::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 45% at 50% 42%, rgba(168, 148, 255, .3), transparent 72%);
}
.scene-agent::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .06) 1px, transparent 1.4px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 60%);
  mask-image: linear-gradient(180deg, #000, transparent 60%);
}
.scene-agent .perso-hote { inset: 14% 10% 0; }
.bulle-agent {
  position: absolute; top: 7%; right: 5%; z-index: 3;
  max-width: min(240px, 62%);
  padding: 12px 16px; border-radius: 18px 18px 18px 6px;
  background: rgba(240, 238, 250, .97); color: var(--encre);
  font: 600 .95rem/1.35 var(--f-titre); letter-spacing: -.01em;
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .7);
  transform-origin: 0% 100%;
}
.scene-agent .scene-etiquette { left: 14px; bottom: 14px; }
@media (min-width: 1024px) {
  .scene-agent { height: clamp(380px, 54vh, 470px); margin-left: 8%; }
  .scene-agent .perso-hote { inset: 10% 0 0 14%; }
  .scene-agent .scene-etiquette { top: 16px; bottom: auto; left: 16px; right: auto; }
}

/* Journal « Votre démarrage » (fil rouge : le journal des agents) */
.pj {
  position: relative; z-index: 4;
  padding: 16px 16px 12px; border-radius: 22px;
  background: rgba(22, 20, 42, .86);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid var(--trait-2);
  box-shadow: 0 40px 90px -36px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
}
.pj-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--trait); }
.pj-titre { display: flex; align-items: center; gap: 8px; font: 700 1rem/1 var(--f-titre); letter-spacing: -.01em; }
.pj-titre .ic { color: var(--lavande); width: 18px; height: 18px; }
.pj-liste { list-style: none; padding: 2px 0; }
.pj-liste li {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 11px;
  padding: 11px 2px; border-bottom: 1px dashed rgba(168, 148, 255, .1);
}
.pj-liste li:last-child { border-bottom: 0; }
.pj-num { font: 500 .72rem/1 var(--f-mono); color: var(--texte-3); font-variant-numeric: tabular-nums; }
.pj-icone { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: rgba(168, 148, 255, .14); color: var(--lavande); }
.pj-icone .ic { width: 18px; height: 18px; }
.pj-texte { display: grid; gap: 3px; min-width: 0; }
.pj-texte b { font: 700 .98rem/1.15 var(--f-titre); letter-spacing: -.01em; }
.pj-texte span { font-size: .84rem; line-height: 1.35; color: var(--texte-2); }
.pj-pied {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 12px;
  padding-top: 11px; border-top: 1px solid var(--trait);
  font: 500 .72rem/1.3 var(--f-mono); color: var(--texte-2);
}
.pj-pied > span { display: inline-flex; align-items: center; gap: 8px; }
@media (min-width: 1024px) {
  .page-visuel { display: block; padding-bottom: 8px; }
  .pj { width: 84%; margin: -96px 0 0 -2%; }
}

/* ---------- Offres (cartes de l'accueil + deux boutons) ---------- */
.formule-actions { display: grid; gap: 4px; margin-top: auto; padding-top: 4px; }
.formule .formule-actions .btn { margin-top: 0; padding-inline: 1em; white-space: normal; text-align: center; line-height: 1.15; }
@media (max-width: 719px) { .formules > .formule { padding: 24px 22px; } }
.formule li b { color: var(--texte); font-weight: 600; }
.offres-note { margin-top: 22px; display: grid; gap: 6px; justify-items: center; text-align: center; }
.offres-note .note { margin-top: 0; }
.glisser { display: none; margin-top: 4px; font: 500 .7rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lavande); }
@media (max-width: 719px) { .glisser { display: block; } }

/* ---------- Composez votre équipe ---------- */
html:not(.js) .compo { display: none; }
.compo-grille { display: grid; gap: 16px; }
.compo-agents { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.compo-agent {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0;
  padding: 8px 6px 12px; text-align: center;
  border-radius: 20px; border: 1px solid var(--trait);
  background: linear-gradient(180deg, #1C1937 0%, #151329 100%);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: border-color .3s, box-shadow .45s var(--ease), transform .45s var(--ease);
}
.compo-agent:hover { border-color: var(--trait-2); transform: translateY(-3px); }
.compo-agent[aria-pressed="true"] {
  border-color: rgba(168, 148, 255, .62);
  background: linear-gradient(180deg, #282151 0%, #18152F 100%);
  box-shadow: 0 24px 60px -26px rgba(124, 99, 255, .75), inset 0 0 0 1px rgba(168, 148, 255, .22);
}
.compo-agent:focus-visible { border-radius: 20px; }
.compo-portrait {
  position: relative; display: block; width: 100%; max-width: 128px; aspect-ratio: 1;
  border-radius: 16px;
  background: radial-gradient(70% 62% at 50% 62%, rgba(168, 148, 255, .2), transparent 72%);
}
.compo-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; }
.compo-coche {
  position: absolute; top: 2px; right: 2px; z-index: 2;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--vert); color: var(--encre);
  box-shadow: 0 0 0 3px #1E1A3C;
  transform: scale(0); transition: transform .45s var(--ease);
}
.compo-coche .ic { width: 15px; height: 15px; }
.compo-agent[aria-pressed="true"] .compo-coche { transform: scale(1); }
.compo-nom { font: 800 1.06rem/1.1 var(--f-titre); letter-spacing: -.02em; }
.compo-role { font: 500 .62rem/1.25 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--lavande); }

.compo-resultat { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 22px; }
.compo-annonce { display: grid; gap: 10px; }
.compo-compte { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 .72rem/1.3 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.compo-compte b { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; margin-right: 6px; border-radius: 999px; background: rgba(168, 148, 255, .15); color: var(--lavande); font: 500 .8rem/1 var(--f-mono); }
.compo-avatars { display: flex; min-height: 28px; }
.compo-avatars .avatar { width: 28px; height: 28px; margin-left: -7px; box-shadow: 0 0 0 2px #1A1734; }
.compo-avatars .avatar:first-child { margin-left: 0; }
.compo-offre { font-size: clamp(1.7rem, 1.4rem + 1vw, 2.2rem); letter-spacing: -.035em; }
.compo-detail { color: var(--texte-2); font-size: .98rem; }
.compo-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.compo-prix .fp-montant { font-size: 2.6rem; }
.compo-prix .fp-de { width: 100%; }
.compo-mise { width: 100%; font: 500 .8rem/1.4 var(--f-mono); color: var(--lavande); }
.compo-dit { display: flex; align-items: flex-end; gap: 9px; min-height: 40px; }
.compo-dit .avatar { width: 30px; height: 30px; }
.compo-dit p { padding: 9px 13px; border-radius: 16px 16px 16px 5px; background: #221E40; border: 1px solid var(--trait); font-size: .92rem; line-height: 1.4; }
.compo-actions { display: grid; gap: 4px; margin-top: auto; padding-top: 6px; }
.compo-actions .btn { white-space: normal; text-align: center; line-height: 1.15; }
.compo-actions.is-inactif { opacity: .45; pointer-events: none; }
.compo-fiches { margin-top: 18px; font-size: .92rem; line-height: 1.7; color: var(--texte-2); }
.compo-fiches a { color: var(--lavande); text-underline-offset: 3px; }
@media (min-width: 720px) {
  .compo-agents { gap: 12px; }
  .compo-agent { padding: 10px 10px 14px; }
}
@media (min-width: 1024px) {
  .compo-grille { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
  .compo-resultat { padding: 28px; }
}

/* ---------- Ce que vous payez (tickets) ---------- */
.tickets { list-style: none; display: grid; gap: 14px; }
.ticket { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px; }
.ticket-quand { font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.ticket h3 { font-size: 1.45rem; }
.ticket-prix { font: 800 1.5rem/1.1 var(--f-titre); letter-spacing: -.03em; color: var(--texte); font-variant-numeric: tabular-nums; }
.ticket-prix small { display: block; margin-bottom: 4px; font: 500 .7rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--texte-3); }
.ticket-prix.vert { color: var(--vert); }
.ticket-coupe { position: relative; height: 1px; margin: 8px -24px 6px; border-top: 1.5px dashed rgba(168, 148, 255, .22); }
.ticket-coupe::before, .ticket-coupe::after {
  content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--fond); border: 1px solid var(--trait);
}
.ticket-coupe::before { left: -12px; clip-path: inset(0 0 0 50%); }
.ticket-coupe::after { right: -12px; clip-path: inset(0 50% 0 0); }
.ticket ul { list-style: none; display: grid; gap: 10px; }
.ticket li { display: flex; gap: 10px; align-items: flex-start; color: var(--texte-2); font-size: .96rem; line-height: 1.45; }
.ticket li .ic { color: var(--vert); width: 18px; height: 18px; margin-top: 3px; }
@media (min-width: 900px) { .tickets { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Comparatif ---------- */
.cmp { position: relative; }
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; }
.cmp-table th, .cmp-table td { vertical-align: middle; }
.cmp-col { text-align: center; }
.cmp-nom { display: block; font: 800 1.15rem/1.1 var(--f-titre); letter-spacing: -.02em; color: var(--texte); }
.cmp-sous { display: block; margin-top: 6px; font: 500 .68rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--texte-3); }
.cmp-badge { display: inline-block; margin-bottom: 6px; padding: 3px 8px; border-radius: 999px; background: var(--lavande); color: var(--encre); font: 500 .58rem/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.cmp-table tbody th[scope="row"] { text-align: left; font: 600 .98rem/1.35 var(--f-titre); letter-spacing: -.01em; color: var(--texte); }
.cmp-table tbody th[scope="row"] small { display: block; margin-top: 3px; font: 400 .82rem/1.4 var(--f-texte); letter-spacing: 0; color: var(--texte-3); }
.cmp-table td { text-align: center; color: var(--texte-2); font-size: .94rem; line-height: 1.35; }
.cmp-val { display: inline-block; color: var(--texte); font: 600 .96rem/1.25 var(--f-titre); letter-spacing: -.01em; }
.cmp-val small { display: block; font: 500 .62rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); margin-bottom: 2px; }
.cmp-val--vert { color: var(--vert); }
.cmp-val.cmp-petit { font: 500 .82rem/1.3 var(--f-texte); letter-spacing: 0; color: var(--texte-2); }
.cmp-oui { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(76, 197, 148, .13); color: var(--vert); }
.cmp-oui .ic { width: 17px; height: 17px; }
.cmp-oui path { stroke-dasharray: 22; stroke-dashoffset: 0; }
.motion .cmp-ligne:not(.is-vue) .cmp-oui path { stroke-dashoffset: 22; }
.cmp-ligne.is-vue .cmp-oui path { transition: stroke-dashoffset .6s var(--ease) .15s; }
.cmp-non { color: var(--texte-3); font: 500 1rem/1 var(--f-mono); }
.cmp-groupe th { text-align: left; font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lavande); }
.cmp-table tfoot .btn { white-space: normal; text-align: center; line-height: 1.1; }
.cmp-table .is-survol { background-color: rgba(168, 148, 255, .07); }

@media (min-width: 720px) {
  .cmp {
    border-radius: 28px; border: 1px solid var(--trait-2);
    background: linear-gradient(180deg, rgba(31, 27, 58, .62), rgba(19, 17, 38, .8));
    box-shadow: 0 40px 100px -60px rgba(91, 63, 207, .6), inset 0 1px 0 rgba(255, 255, 255, .05);
  }
  .cmp-table col.cmp-c0 { width: 34%; }
  .cmp-table thead th {
    position: sticky; top: var(--entete); z-index: 2;
    padding: 20px 12px 16px;
    background: rgba(22, 20, 42, .96);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--trait-2);
  }
  .cmp-table thead th:first-child { border-top-left-radius: 27px; }
  .cmp-table thead th:last-child { border-top-right-radius: 27px; }
  .cmp-coin { text-align: left !important; padding-left: 24px !important; }
  .cmp-coin span { font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
  .cmp-table tbody th[scope="row"] { padding: 15px 18px 15px 24px; border-top: 1px solid var(--trait); }
  .cmp-table tbody td { padding: 15px 10px; border-top: 1px solid var(--trait); }
  .cmp-groupe th { padding: 30px 24px 12px !important; border-top: 0 !important; }
  .cmp-groupe + tr > * { border-top: 0 !important; }
  .cmp-table td:nth-child(3), .cmp-table thead th:nth-child(3) { background-color: rgba(168, 148, 255, .055); }
  .cmp-table thead th:nth-child(3) { background-color: rgba(38, 33, 70, .97); }
  .cmp-table td.is-survol:nth-child(3) { background-color: rgba(168, 148, 255, .11); }
  .cmp-table tfoot td { padding: 18px 10px 22px; border-top: 1px solid var(--trait-2); }
  .cmp-table tfoot .btn { min-width: 0; width: 100%; max-width: 220px; }
}
@media (max-width: 719px) {
  .cmp-table, .cmp-table thead, .cmp-table tbody, .cmp-table tfoot { display: block; }
  .cmp-table caption { display: block; }
  .cmp-table tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 6px; }
  .cmp-table colgroup { display: none; }
  .cmp-table .cmp-coin { display: none; }
  .cmp-table thead {
    position: sticky; top: var(--entete); z-index: 3;
    margin-inline: calc(var(--gouttiere) * -1); padding: 10px var(--gouttiere);
    background: rgba(15, 14, 26, .95);
    -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--trait-2);
  }
  .cmp-table thead th { padding: 6px 2px; border-radius: 12px; }
  .cmp-table thead th:nth-child(3) { background: rgba(168, 148, 255, .1); }
  .cmp-nom { font-size: .98rem; }
  .cmp-sous { font-size: .6rem; margin-top: 4px; }
  .cmp-badge { display: none; }
  .cmp-table tbody tr { border-bottom: 1px solid var(--trait); }
  .cmp-table tbody th[scope="row"] { grid-column: 1 / -1; padding: 14px 2px 8px; font-size: .95rem; }
  .cmp-table tbody td { padding: 2px 2px 14px; font-size: .86rem; }
  .cmp-table tbody td:nth-child(3) { background: rgba(168, 148, 255, .05); border-radius: 10px; padding-top: 6px; margin-top: -4px; }
  .cmp-val { font-size: .86rem; }
  .cmp-val small { font-size: .56rem; }
  .cmp-groupe { border-bottom: 0 !important; }
  .cmp-groupe th { grid-column: 1 / -1; padding: 28px 2px 4px; }
  .cmp-table tfoot tr { padding-top: 16px; }
  .cmp-table tfoot .btn { --h: 44px; width: 100%; padding: 0 6px; font-size: .9rem; }
}

/* ---------- Appel final ---------- */
.appel {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; gap: 20px; text-align: center;
  padding: clamp(30px, 6vw, 72px) clamp(20px, 5vw, 64px);
  border-radius: 32px; border: 1px solid rgba(168, 148, 255, .32);
  background: radial-gradient(120% 120% at 0% 0%, #2C2559 0%, #1A1734 50%, #141229 100%);
  box-shadow: 0 50px 120px -60px rgba(124, 99, 255, .7), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.appel::after {
  content: ""; position: absolute; right: -180px; bottom: -220px; z-index: -1; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 148, 255, .2), transparent);
}
.appel h2 { max-width: 16ch; }
.appel .section-accroche { margin-inline: auto; }
.appel .avatars .avatar { width: 40px; height: 40px; margin-left: -10px; box-shadow: 0 0 0 3px #221D45; }
.appel .avatars .avatar:first-child { margin-left: 0; }
.appel .page-actions { justify-content: center; margin-top: 4px; }

/* ================= CONTACT ================= */
.contact-page { position: relative; z-index: 1; display: grid; gap: 26px; }
.contact-intro { display: flex; flex-direction: column; align-items: flex-start; gap: 0; min-width: 0; }
.contact-julie { display: flex; align-items: center; gap: 4px; margin-top: 8px; }
.contact-julie-portrait {
  position: relative; flex: none; width: 104px; height: 104px; border-radius: 26px; overflow: hidden;
  border: 1px solid var(--trait-2);
  background: radial-gradient(80% 70% at 50% 65%, rgba(168, 148, 255, .32), rgba(30, 26, 60, .9) 72%);
}
.contact-julie-portrait .perso-hote { inset: 8% 4% 0; }
.contact-julie .bulle-agent { position: relative; top: auto; right: auto; max-width: 250px; margin-left: 8px; border-radius: 18px 18px 18px 6px; }
.contact-page .contact-suite { margin-top: 0; }
.garanties { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.garanties li {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px;
  border-radius: 999px; border: 1px solid var(--trait-2); background: rgba(255, 255, 255, .025);
  font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--texte-2);
}
.garanties .ic { width: 15px; height: 15px; color: var(--vert); }
/* « Vous voulez simplement essayer ? » : l'essai se démarre seul, sur l'appli (pas besoin de ce formulaire) */
.contact-essai {
  display: grid; justify-items: start; gap: 10px; width: 100%; max-width: 520px; margin: 4px 0 6px;
  padding: 16px 18px; border-radius: 20px;
  border: 1px solid rgba(76, 197, 148, .32); background: linear-gradient(180deg, rgba(76, 197, 148, .09), rgba(76, 197, 148, .03));
}
.contact-essai-titre { font: 700 1.08rem/1.2 var(--f-titre); letter-spacing: -.01em; color: var(--texte); }
.contact-essai-texte { font-size: .94rem; line-height: 1.5; color: var(--texte-2); }
.contact-essai .btn { white-space: normal; text-align: center; line-height: 1.15; }
.offre-astuce { margin-top: 6px; font-size: .88rem; line-height: 1.45; color: var(--texte-2); }
.offre-astuce a { color: var(--vert); font-weight: 600; text-underline-offset: 3px; }

.form-carte {
  position: relative; min-width: 0; scroll-margin-top: calc(var(--entete) + 16px);
  padding: 6px; border-radius: 30px;
  border: 1px solid rgba(168, 148, 255, .32);
  background: radial-gradient(120% 120% at 0% 0%, #2C2559 0%, #1A1734 52%, #141229 100%);
  box-shadow: 0 50px 120px -60px rgba(124, 99, 255, .75), inset 0 1px 0 rgba(255, 255, 255, .07);
}
.form-carte .formulaire { border: 0; border-radius: 24px; background: rgba(13, 12, 24, .55); gap: 18px; padding: clamp(18px, 3.2vw, 32px); }
.form-tete { display: grid; gap: 6px; padding-bottom: 4px; }
.form-titre { font: 800 1.45rem/1.1 var(--f-titre); letter-spacing: -.03em; }
.form-aide { font-size: .92rem; line-height: 1.5; color: var(--texte-2); }
.offre-resume { min-height: 1.5em; margin-top: 8px; font: 500 .78rem/1.5 var(--f-mono); color: var(--lavande); }
.puce--agent span { gap: 8px; padding: 0 16px 0 6px; }
.puce--agent .avatar { width: 30px; height: 30px; font-size: .78rem; }
.puce input:checked + span .avatar { box-shadow: 0 0 0 2px rgba(23, 21, 43, .35); }
/* libellé et champ restent en haut de leur colonne : un message d'erreur sous le champ voisin ne les décale plus */
.formulaire .champ { align-content: start; }
.champ-erreur { font-size: .86rem; line-height: 1.4; color: #FFB3C3; }
.champ-erreur:empty { display: none; }
.champ textarea[aria-invalid="true"] { border-color: #FF8FA6; }
.piege { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.champ-rgpd {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; align-items: start;
  padding: 14px 14px 14px 12px; border-radius: 16px;
  border: 1px solid var(--trait-2); background: rgba(255, 255, 255, .025);
  transition: border-color .25s, background-color .25s;
}
.champ-rgpd input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; flex: none;
  display: grid; place-items: center; width: 26px; height: 26px; margin: 0;
  border-radius: 8px; border: 1.5px solid rgba(168, 148, 255, .6); background: rgba(255, 255, 255, .04);
  cursor: pointer; transition: background-color .2s, border-color .2s, transform .2s var(--ease);
}
.champ-rgpd input[type="checkbox"]::after {
  content: ""; width: 7px; height: 13px; margin-top: -3px;
  border: solid var(--encre); border-width: 0 2.6px 2.6px 0;
  transform: rotate(45deg) scale(0); transition: transform .25s var(--ease);
}
.champ-rgpd input[type="checkbox"]:checked { background: var(--lavande); border-color: var(--lavande); }
.champ-rgpd input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
.champ-rgpd input[type="checkbox"]:active { transform: scale(.92); }
.champ-rgpd label { padding-top: 2px; font: 600 .95rem/1.4 var(--f-titre); letter-spacing: -.005em; color: var(--texte); cursor: pointer; }
.champ-rgpd .rgpd-note, .champ-rgpd .champ-erreur { grid-column: 2; }
.rgpd-note { font-size: .82rem; line-height: 1.5; color: var(--texte-3); }
.rgpd-note a { color: var(--lavande); }
.champ-rgpd.is-erreur { border-color: rgba(255, 143, 166, .6); background: rgba(255, 120, 150, .06); }

.form-envoyer .fe-roue { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(23, 21, 43, .25); border-top-color: var(--encre); animation: tourne .8s linear infinite; }
.form-envoyer.is-envoi .fe-roue { display: inline-block; }
.form-envoyer.is-envoi .btn-fleche { display: none; }
.form-envoyer.is-envoi { cursor: progress; transform: none; }
@keyframes tourne { to { transform: rotate(360deg); } }
.form-erreur { display: grid; gap: 8px; }
.form-erreur a { color: #FFD3DC; font-weight: 600; }
.form-repli { font-size: .88rem; color: #F3C9D3; }
.form-repli .a-completer { display: inline-block; margin: 2px 0; }

.form-succes {
  display: grid; justify-items: center; gap: 14px; text-align: center;
  padding: clamp(28px, 5vw, 48px) clamp(18px, 4vw, 36px);
  border-radius: 24px; background: rgba(13, 12, 24, .55);
}
.form-succes:focus { outline: none; }
.succes-coche svg { width: 78px; height: 78px; overflow: visible; }
.succes-coche circle { fill: rgba(76, 197, 148, .12); stroke: var(--vert); stroke-width: 2; stroke-dasharray: 152; stroke-dashoffset: 152; transform: rotate(-90deg); transform-origin: 50% 50%; }
.succes-coche path { fill: none; stroke: var(--vert); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; }
.form-succes.is-vu circle { animation: trace .75s var(--ease) forwards; }
.form-succes.is-vu path { animation: trace .45s .55s var(--ease) forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.succes-titre { font-size: clamp(1.9rem, 1.5rem + 1.4vw, 2.5rem); letter-spacing: -.03em; }
.succes-texte { max-width: 36ch; color: var(--texte-2); font-size: 1.05rem; }
.succes-journal {
  list-style: none; width: 100%; max-width: 420px; margin-top: 6px; padding: 8px 14px;
  border-radius: 18px; border: 1px solid var(--trait-2); background: rgba(22, 20, 42, .75); text-align: left;
}
.succes-journal li { display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px dashed rgba(168, 148, 255, .1); font-size: .88rem; color: var(--texte-2); }
.succes-journal li:last-child { border-bottom: 0; }
.succes-journal time { font: 500 .7rem/1 var(--f-mono); color: var(--texte-3); }
.succes-journal b { font: 700 .9rem/1 var(--f-titre); color: var(--texte); margin-right: 3px; }
.succes-journal .avatar { width: 24px; height: 24px; font-size: .66rem; }
.avatar.av-flex { --c: #17152B; background: #17152B; box-shadow: 0 0 0 1px rgba(168, 148, 255, .4); }
.avatar.av-flex svg { width: 15px; height: 15px; }
.succes-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 6px; }

.raccourcis { list-style: none; display: grid; gap: 12px; }
.raccourci {
  display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 22px;
  color: inherit; text-decoration: none;
}
.raccourci .eng-icone { margin-bottom: 4px; }
.raccourci h3 { font-size: 1.2rem; }
.raccourci p { color: var(--texte-2); font-size: .94rem; overflow-wrap: anywhere; }
.raccourci a { color: var(--lavande); }
.raccourci-fleche { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--lavande); font: 600 .92rem/1 var(--f-titre); }
.raccourci-fleche .ic { width: 1.05em; height: 1.05em; transition: transform .35s var(--ease); }
a.raccourci:hover .raccourci-fleche .ic { transform: translateX(3px); }
@media (min-width: 640px) { .raccourcis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .raccourcis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (max-width: 1023px) {
  .contact-intro { display: contents; }
  .contact-intro > .pastille { order: 1; justify-self: start; }
  .contact-intro > .page-titre { order: 2; margin: 0; }
  .contact-intro > .page-chapeau { order: 3; }
  .contact-intro > .contact-essai { order: 3; margin: 0; max-width: none; }
  .contact-intro > .contact-julie { order: 4; margin-top: 0; }
  .form-carte { order: 5; margin-top: 6px; }
  .contact-intro > .contact-suite { order: 6; margin-top: 12px; }
  .contact-intro > .garanties { order: 7; }
  .contact-page { gap: 18px; }
}
@media (min-width: 1024px) {
  .contact-page { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; align-items: start; }
  .contact-intro { position: sticky; top: calc(var(--entete) + 34px); gap: 22px; }
  .contact-intro .page-titre { margin: 0; }
  .contact-julie-portrait { width: 132px; height: 132px; border-radius: 30px; }
}

/* ================= PAIEMENT ================= */
.pp-info {
  display: inline-flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 11px 14px;
  border-radius: 14px; border: 1px dashed rgba(76, 197, 148, .4); background: rgba(76, 197, 148, .07);
  font-size: .92rem; line-height: 1.45; color: var(--texte);
}
.pp-info .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--vert); }
/* « Retour aux tarifs » : zone tactile de 44 px de haut (doigt), sans changer la mise en page */
.page-texte > .retour { min-height: 44px; margin-block: -12.5px; }
.pp-etapes { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 26px; }
.pp-etapes li { display: inline-flex; align-items: center; gap: 8px; font: 600 .92rem/1 var(--f-titre); color: var(--texte-2); }
.pp-etapes li + li::before { content: ""; width: 22px; height: 1.5px; margin-right: 2px; background: var(--trait-2); }
.pp-etapes li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--trait-2); font: 500 .74rem/1 var(--f-mono); color: var(--lavande); }
.pp-etapes .is-fait > span { background: var(--lavande); border-color: var(--lavande); color: var(--encre); }
.pp-etapes .is-fait { color: var(--texte); }
.pp-etapes em { font: 500 .62rem/1 var(--f-mono); font-style: normal; letter-spacing: .1em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; background: rgba(255, 196, 92, .13); color: #FFD08A; }
.pp-sophie { display: flex; align-items: center; gap: 4px; margin-top: 22px; }

.pp-corps { padding-top: 8px; }
.pp-grille { display: grid; gap: 18px; align-items: start; }
.pp-gauche { display: grid; gap: 14px; min-width: 0; }
.pp-bloc {
  min-width: 0; margin: 0; padding: 22px clamp(18px, 3vw, 28px);
  border-radius: 24px; border: 1px solid var(--trait);
  background: linear-gradient(180deg, #1B1835 0%, #141229 100%);
}
.pp-bloc > legend, .pp-bloc > h2 {
  display: flex; align-items: center; gap: 12px; float: left; width: 100%; padding: 0; margin: 0 0 16px;
  font: 800 1.25rem/1.15 var(--f-titre); letter-spacing: -.025em; color: var(--texte);
}
.pp-bloc > legend + *, .pp-bloc > h2 + * { clear: both; }
.pp-num { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--trait-2); font: 500 .76rem/1 var(--f-mono); color: var(--lavande); }
/* les cartes portent une icône, pas de numéro : la seule suite 1-2-3 de la page est le fil d'étapes du haut */
.pp-num .ic { width: 16px; height: 16px; }
.pp-badge { margin-left: auto; padding: 5px 9px; border-radius: 999px; background: rgba(255, 196, 92, .13); color: #FFD08A; font: 500 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pp-offres { display: grid; gap: 10px; }
.pp-offre { position: relative; display: block; cursor: pointer; }
.pp-offre input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pp-offre-corps {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px;
  padding: 15px 16px; border-radius: 18px; border: 1px solid var(--trait-2); background: rgba(255, 255, 255, .02);
  transition: border-color .25s, background-color .25s, box-shadow .35s var(--ease);
}
.pp-radio { grid-row: span 2; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid rgba(168, 148, 255, .55); display: grid; place-items: center; transition: border-color .2s; }
.pp-radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--lavande); transform: scale(0); transition: transform .3s var(--ease); }
.pp-offre-nom { font: 800 1.12rem/1.1 var(--f-titre); letter-spacing: -.02em; color: var(--texte); }
.pp-offre-agents { grid-column: 2; font-size: .86rem; color: var(--texte-2); }
.pp-offre-prix { grid-row: span 2; grid-column: 3; text-align: right; font: 500 .74rem/1.35 var(--f-mono); color: var(--lavande); }
.pp-offre-prix b { display: block; font: 800 1.15rem/1.1 var(--f-titre); letter-spacing: -.02em; color: var(--texte); }
.pp-offre:hover .pp-offre-corps { border-color: rgba(168, 148, 255, .45); }
.pp-offre input:checked + .pp-offre-corps { border-color: rgba(168, 148, 255, .7); background: rgba(91, 63, 207, .16); box-shadow: 0 18px 50px -28px rgba(124, 99, 255, .8), inset 0 0 0 1px rgba(168, 148, 255, .2); }
.pp-offre input:checked + .pp-offre-corps .pp-radio { border-color: var(--lavande); }
.pp-offre input:checked + .pp-offre-corps .pp-radio::after { transform: scale(1); }
.pp-offre input:focus-visible + .pp-offre-corps { outline: 3px solid var(--lavande); outline-offset: 3px; }
.pp-lignes { list-style: none; display: grid; gap: 10px; }
.pp-lignes li { display: flex; align-items: center; gap: 12px; color: var(--texte-2); }
.pp-lignes b { color: var(--texte); font-family: var(--f-titre); font-weight: 700; }
.pp-lignes .ic { width: 18px; height: 18px; color: var(--vert); }
.pp-note { margin-top: 12px; font: 500 .76rem/1.5 var(--f-mono); color: var(--texte-3); }
.pp-avenir { list-style: none; display: grid; gap: 8px; margin-top: 12px; }
.pp-avenir li { display: flex; align-items: flex-start; gap: 12px; color: var(--texte-2); font-size: .96rem; line-height: 1.45; }
.pp-avenir .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--lavande); opacity: .8; }
.pp-texte { color: var(--texte-2); }
.pp-cgv { margin-top: 2px; }
/* tant que les CGV ne sont pas publiées : texte simple (pas l'air d'un lien) et case désactivée ; pages.js en fait un vrai lien
   et réactive la case quand FLEX_CGV_URL est rempli */
a.pp-cgv-lien { color: var(--lavande); text-decoration: underline; text-underline-offset: 3px; }
.pp-cgv-avenir { font-weight: 500; color: var(--texte-3); }
.champ-rgpd input[type="checkbox"]:disabled { opacity: .4; cursor: not-allowed; }
.champ-rgpd input[type="checkbox"]:disabled:active { transform: none; }
.champ-rgpd input[type="checkbox"]:disabled + label { color: var(--texte-2); cursor: default; }

.pp-recap { min-width: 0; }
.pp-recap-carte {
  position: relative; display: grid; gap: 16px; padding: clamp(20px, 3vw, 28px);
  border-radius: 28px; border: 1px solid rgba(168, 148, 255, .4);
  background: radial-gradient(120% 90% at 0% 0%, #2C2559 0%, #1A1734 55%, #141229 100%);
  box-shadow: 0 50px 120px -60px rgba(124, 99, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .08);
}
.pp-recap-tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 .74rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.pp-recap-offre { font: 800 2.1rem/1 var(--f-titre); letter-spacing: -.03em; }
.pp-recap-pour { margin-top: -6px; color: var(--texte-2); font-size: .96rem; }
.pp-recap-agents { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--texte-2); }
.pp-recap-agents .avatars .avatar { box-shadow: 0 0 0 2px #241F4A; }
.pp-recap-lignes { display: grid; margin: 0; border-top: 1px solid var(--trait); }
.pp-recap-lignes > div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px dashed rgba(168, 148, 255, .14); }
.pp-recap-lignes dt { color: var(--texte-2); font-size: .95rem; }
.pp-recap-lignes dd { margin: 0; text-align: right; font: 700 1rem/1.25 var(--f-titre); letter-spacing: -.01em; color: var(--texte); font-variant-numeric: tabular-nums; }
.pp-recap-lignes dd small { display: block; font: 500 .62rem/1.3 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--texte-3); }
.pp-recap-lignes dd.vert { color: var(--vert); }
.pp-recap-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pp-recap-total span { font: 500 .74rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.pp-recap-total b { font: 800 1.35rem/1.1 var(--f-titre); letter-spacing: -.03em; color: var(--vert); }
.pp-recap-note { font: 500 .74rem/1.5 var(--f-mono); color: var(--texte-3); }
.pp-recap .is-flash { animation: flash .9s var(--ease); }
@keyframes flash { 0% { color: #fff; text-shadow: 0 0 18px rgba(168, 148, 255, .9); } 100% { text-shadow: none; } }

/* bouton « Payer » : désactivé tant que le paiement en ligne n'est pas branché */
.pp-payer.btn, .pp-payer.btn:hover, .pp-payer.btn:active {
  color: var(--texte-3); background: rgba(255, 255, 255, .04);
  border: 1px dashed rgba(168, 148, 255, .3); box-shadow: none; transform: none; cursor: not-allowed;
}
.pp-payer .ic { width: 1.1em; height: 1.1em; }
.pp-bientot { margin-left: 4px; padding: 4px 8px; border-radius: 999px; background: rgba(255, 196, 92, .13); color: #FFD08A; font: 500 .62rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; }
.pp-encadre {
  position: relative; display: grid; gap: 12px; padding: 16px;
  border-radius: 18px; border: 1px solid rgba(76, 197, 148, .38);
  background: linear-gradient(180deg, rgba(76, 197, 148, .12), rgba(76, 197, 148, .05));
}
.motion .pp-encadre { animation: halo-vert 3.2s ease-in-out 1.2s 3; }
@keyframes halo-vert { 0%, 100% { box-shadow: 0 0 0 0 rgba(76, 197, 148, 0); } 50% { box-shadow: 0 0 0 6px rgba(76, 197, 148, .12); } }
.pp-encadre p { font-size: .98rem; line-height: 1.5; color: var(--texte); }
.pp-encadre p b { font-family: var(--f-titre); font-weight: 700; }
.pp-encadre .btn { white-space: normal; text-align: center; line-height: 1.15; }
.pp-securite { display: flex; align-items: flex-start; gap: 8px; font-size: .84rem; line-height: 1.45; color: var(--texte-3); }
.pp-securite .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--texte-3); }
@media (min-width: 1024px) {
  .pp-grille { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 24px; }
  .pp-recap { position: sticky; top: calc(var(--entete) + 24px); }
  .pp-tete-grille { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
}
@media (max-width: 420px) {
  .pp-offre-corps { grid-template-columns: auto minmax(0, 1fr); }
  .pp-offre-prix { grid-row: auto; grid-column: 2; text-align: left; }
  .pp-offre-prix b { display: inline; margin-right: 4px; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .cmp-oui path { stroke-dashoffset: 0 !important; }
  .succes-coche circle, .succes-coche path { stroke-dashoffset: 0; }
}

/* ---------- Ajustements (relecture n° 1) ---------- */
/* Contact : offres en grille 2 × 2 sur téléphone */
@media (max-width: 559px) {
  .puces--offre { display: grid; grid-template-columns: 1fr 1fr; }
  .puces--offre .puce span { justify-content: center; width: 100%; padding: 0 10px; text-align: center; }
}
/* Paiement : étapes en trois colonnes sur téléphone */
@media (max-width: 559px) {
  .pp-etapes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px; }
  .pp-etapes li { flex-direction: column; justify-content: flex-start; gap: 7px; text-align: center; font-size: .86rem; }
  .pp-etapes li + li::before { display: none; }
}
/* Paiement : case CGV dans le récapitulatif, juste au-dessus du bouton « Payer » */
.pp-recap .pp-cgv { margin-top: 2px; background: rgba(13, 12, 24, .35); }
.pp-recap .pp-cgv label { font-size: .92rem; }
/* Paiement, téléphone : le récapitulatif suit directement le choix de l'offre */
@media (max-width: 1023px) {
  .pp-gauche { display: contents; }
  .pp-gauche > .pp-bloc:first-child { order: 1; }
  .pp-recap { order: 2; }
  .pp-gauche > .pp-bloc:not(:first-child) { order: 3; }
}

/* =========================================================
   TARIFS 2026 : présentation façon page « Offres » de Limova, ADN Flex
   Bascule mensuel / annuel, trois cartes (Essentiel, Équipe « Populaire », Sur mesure),
   têtes des agents inclus, bandeau de garanties, essai jour par jour, échanges, comparatif.
   ========================================================= */

/* Période choisie : seul le prix de cette période s'affiche (sans JavaScript : mensuel, écrit dans la page) */
[data-periode="mensuel"] [data-seul="annuel"],
[data-periode="annuel"] [data-seul="mensuel"] { display: none !important; }

/* ---------- En-tête centré ---------- */
.page-tete--offres { padding-top: calc(var(--entete) + 22px); padding-bottom: clamp(64px, 7vw, 104px); }
.page-tete--offres .heros-halo--a { right: auto; left: 50%; margin-left: -450px; top: -360px; }
.page-tete--offres .heros-halo--b { top: 620px; }
.page-tete--offres .heros-points {
  -webkit-mask-image: radial-gradient(ellipse 70% 46% at 50% 20%, #000 10%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 46% at 50% 20%, #000 10%, transparent 72%);
}
.offres-tete { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 980px; margin: 0 auto clamp(42px, 4.4vw, 54px); }
.offres-tete .page-titre { margin: 16px 0 14px; font-size: clamp(2.55rem, 1.35rem + 3.3vw, 3.9rem); }
.offres-tete .page-chapeau { max-width: 62ch; text-wrap: balance; }

/* ---------- Bascule Mensuel / Annuel ---------- */
.bascule {
  position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px;
  margin-top: 24px; padding: 5px; border-radius: 999px;
  border: 1px solid var(--trait-2); background: rgba(19, 17, 38, .86);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 24px 60px -34px rgba(0, 0, 0, .95);
}
.bascule::before {
  content: ""; position: absolute; z-index: 0; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 7px);
  border-radius: 999px; border: 1px solid rgba(168, 148, 255, .45);
  background: linear-gradient(180deg, #3B3274 0%, #2A2358 100%);
  box-shadow: 0 12px 28px -12px rgba(124, 99, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .12);
  transition: transform .5s var(--ease);
}
[data-periode="annuel"] .bascule::before { transform: translateX(calc(100% + 4px)); }
.bascule button {
  position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 1.02rem/1 var(--f-titre); letter-spacing: -.01em; color: var(--texte-2); white-space: nowrap;
  -webkit-tap-highlight-color: transparent; transition: color .3s;
}
.bascule button:hover { color: var(--texte); }
.bascule button[aria-checked="true"] { color: #fff; }
.bascule button:focus-visible { outline-offset: 2px; border-radius: 999px; }
.bascule-remise { padding: 5px 8px; border-radius: 999px; background: rgba(76, 197, 148, .16); color: var(--vert); font: 500 .64rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; }
html:not(.js) .bascule { display: none; }
@media (max-width: 440px) {
  .bascule { width: 100%; }
  .bascule button { flex-direction: column; gap: 5px; min-height: 58px; padding: 6px 8px; }
}

/* ---------- Les trois cartes ---------- */
.offres-grille { position: relative; z-index: 1; display: grid; gap: 26px; max-width: 580px; margin-inline: auto; }
.offre { display: flex; flex-direction: column; gap: 18px; min-width: 0; padding: 28px 22px 22px; }
.offre-tete { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.offre-nom { font-size: clamp(1.75rem, 1.55rem + .6vw, 2.05rem); line-height: 1; letter-spacing: -.035em; text-wrap: nowrap; }
.offre-essai {
  flex: none; padding: 6px 10px; border-radius: 999px;
  border: 1px solid rgba(76, 197, 148, .35); background: rgba(76, 197, 148, .1); color: var(--vert);
  font: 500 .66rem/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
}
.offre-essai--demo { border-color: var(--trait-2); background: rgba(168, 148, 255, .1); color: var(--lavande); }
.offre-pour { color: var(--texte-2); font-size: .97rem; line-height: 1.5; }
.offre-prix { display: grid; align-content: start; gap: 8px; }
.op-ligne { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.op-montant { font: 800 clamp(2.8rem, 2.4rem + 1.1vw, 3.25rem)/1 var(--f-titre); letter-spacing: -.04em; font-variant-numeric: tabular-nums; color: var(--texte); }
.op-montant--texte { font-size: clamp(2.3rem, 2.05rem + .9vw, 2.7rem); letter-spacing: -.035em; }
.op-unite { font-size: .98rem; color: var(--texte-2); }
.op-barre {
  align-self: center; font: 600 1.05rem/1 var(--f-titre); color: var(--texte-3);
  text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(168, 148, 255, .65);
}
.op-detail { font: 500 .78rem/1.5 var(--f-mono); color: var(--texte-2); font-variant-numeric: tabular-nums; }
.op-detail > span { display: grid; gap: 1px; }
.op-vert { color: var(--vert); }
.op-vert--lavande { color: var(--lavande); }
.op-alt { color: var(--texte-2); }
.ou-exemple { color: var(--texte-3); }
.offre-utilisateurs { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 10px; font-size: .94rem; line-height: 1.45; color: var(--texte-2); }
.offre-utilisateurs .ic { width: 20px; height: 20px; margin-top: 1px; color: var(--lavande); }
.offre-utilisateurs b { color: var(--texte); font-family: var(--f-titre); font-weight: 700; }
.offre-action { display: grid; align-content: start; gap: 9px; }
.offre-action .btn { white-space: normal; text-align: center; line-height: 1.15; }
.offre-sous-bouton { text-align: center; font: 500 .72rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--texte-3); }
@media (max-width: 440px) { .offre-action .btn { padding-inline: .9em; font-size: 1rem; } }

.offre-bloc { display: grid; align-content: start; gap: 14px; padding-top: 20px; border-top: 1px solid var(--trait); }
.offre-titre { display: flex; align-items: center; gap: 10px; font: 500 .72rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-3); }
.offre-titre b { padding: 4px 8px; border-radius: 999px; background: rgba(168, 148, 255, .14); color: var(--lavande); font-weight: 500; letter-spacing: .04em; }
.offre-agents { list-style: none; display: grid; gap: 12px; }
.offre-agents li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 13px; font-size: .92rem; line-height: 1.4; color: var(--texte-2); }
.offre-agents li > .avatar { width: 46px; height: 46px; font-size: 1rem; box-shadow: 0 0 0 2px rgba(255, 255, 255, .07), 0 12px 24px -12px rgba(0, 0, 0, .85); }
.offre-agents b { color: var(--texte); font: 700 1rem/1.2 var(--f-titre); letter-spacing: -.01em; }
.offre-agents-tous .avatars .avatar { width: 32px; height: 32px; margin-left: -10px; box-shadow: 0 0 0 2px #1A1734; }
.offre-agents-tous .avatars .avatar:first-child { margin-left: 0; }
.avatar-plus { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgba(168, 148, 255, .12); border: 1.5px dashed rgba(168, 148, 255, .55); color: var(--lavande); box-shadow: none; }
.avatar-plus .ic { width: 20px; height: 20px; }
.offre-absents { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; border: 1px dashed rgba(168, 148, 255, .24); font-size: .86rem; line-height: 1.35; color: var(--texte-3); }
.offre-absents .avatars .avatar { width: 28px; height: 28px; filter: grayscale(1); opacity: .5; }
.offre-inclus { list-style: none; display: grid; gap: 11px; }
.offre-inclus li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 11px; align-items: start; font-size: .94rem; line-height: 1.45; color: var(--texte-2); }
.offre-inclus .ic { width: 18px; height: 18px; margin-top: 2px; color: var(--vert); }
.offre-inclus b { color: var(--texte); font-weight: 600; }
.offre-limite {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; align-self: end; margin-top: auto;
  padding: 14px; border-radius: 16px; border: 1px solid var(--trait); background: rgba(13, 12, 24, .5);
  font-size: .86rem; line-height: 1.5; color: var(--texte-2);
}
.offre-limite .ic { width: 22px; height: 22px; color: var(--lavande); }
.offre-limite b { color: var(--texte); font-family: var(--f-titre); font-weight: 700; }

/* Offre mise en avant : « Populaire » */
.offre--phare {
  border-color: rgba(168, 148, 255, .62);
  background: radial-gradient(120% 55% at 50% 0%, #342B68 0%, #221D47 48%, #17142F 100%);
  box-shadow: 0 60px 140px -60px rgba(124, 99, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .09);
}
.offre--phare:hover { border-color: rgba(168, 148, 255, .8); }
.offre--phare .offre-limite { background: rgba(13, 12, 24, .38); border-color: rgba(168, 148, 255, .2); }
.offre--phare .offre-agents-tous .avatars .avatar { box-shadow: 0 0 0 2px #2A2354; }
.offre-populaire {
  position: absolute; top: 0; left: 50%; z-index: 2; transform: translate(-50%, -50%);
  padding: 8px 16px; border-radius: 999px;
  background: linear-gradient(180deg, #C2B6FF 0%, #A894FF 55%, #937AFF 100%); color: var(--encre);
  font: 700 .84rem/1 var(--f-titre); letter-spacing: -.005em; white-space: nowrap;
  box-shadow: 0 12px 30px -10px rgba(168, 148, 255, .95), inset 0 1px 0 rgba(255, 255, 255, .5);
}

@media (min-width: 1024px) {
  .offres-grille { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
  .offre { padding: 32px 26px 26px; }
  /* entre 1024 et 1199 px, les cartes sont étroites : un peu moins de marge intérieure */
  @media (max-width: 1199px) { .offre { padding-inline: 20px; } .offre-action .btn { padding-inline: .8em; } }
  /* les parties des trois cartes s'alignent d'une carte à l'autre (prix, bouton, agents…) */
  @supports (grid-template-rows: subgrid) {
    .offre { display: grid; grid-row: span 8; grid-template-rows: subgrid; gap: 0; row-gap: 18px; }
  }
}

/* ---------- Garanties sous les offres ---------- */
.rassurance { position: relative; z-index: 1; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 1060px; margin: clamp(32px, 4vw, 52px) auto 0; }
.rassurance li {
  display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 14px;
  border-radius: 16px; border: 1px solid var(--trait); background: rgba(255, 255, 255, .025);
  font: 600 .94rem/1.3 var(--f-titre); letter-spacing: -.005em; color: var(--texte);
}
.rassurance .ic { flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 11px; background: rgba(76, 197, 148, .12); color: var(--vert); }
@media (min-width: 900px) { .rassurance { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 359px) { .rassurance { grid-template-columns: 1fr; } }
.offres-tva { position: relative; z-index: 1; margin-top: 18px; text-align: center; font: 500 .76rem/1.6 var(--f-mono); color: var(--texte-3); }

/* ---------- Comment ça se passe : inscription → assistant → appel d'installation → agents au travail ---------- */
.passe-etapes { list-style: none; display: grid; gap: 14px; }
.passe-etape {
  position: relative; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: 22px; border-radius: 22px; border: 1px solid var(--trait);
  background: linear-gradient(180deg, #1B1835 0%, #141229 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04);
}
.passe-haut { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.passe-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--lavande); color: var(--encre); font: 500 .9rem/1 var(--f-mono);
  box-shadow: 0 0 0 6px rgba(168, 148, 255, .14);
}
.passe-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--trait-2); background: rgba(168, 148, 255, .1); color: var(--lavande); }
.passe-icone .ic { width: 20px; height: 20px; }
.passe-etape h3 { font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem); line-height: 1.15; text-wrap: balance; }
.passe-etape > p:not([class]) { color: var(--texte-2); font-size: .95rem; line-height: 1.5; }
.passe-tag { margin-top: auto; padding-top: 8px; font: 500 .7rem/1.35 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--vert); }
.passe-bas { display: grid; justify-items: center; gap: 12px; margin-top: clamp(26px, 3.4vw, 40px); text-align: center; }
.passe-note { font: 500 .76rem/1.5 var(--f-mono); color: var(--texte-3); }
.passe-note a { color: var(--lavande); text-underline-offset: 3px; }
@media (min-width: 640px) { .passe-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .passe-etapes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
  /* petite flèche entre deux étapes, comme le parcours de l'accueil */
  .passe-etape:not(:last-child)::after {
    content: ""; position: absolute; right: -13px; top: 41px; z-index: 1; width: 9px; height: 9px;
    border-top: 1.5px solid var(--lavande); border-right: 1.5px solid var(--lavande); transform: rotate(45deg);
  }
}

/* ---------- L'essai, jour par jour ---------- */
.essai-grille { display: grid; gap: 30px; align-items: center; }
.essai-texte { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; min-width: 0; }
.essai-texte h2 { max-width: 13ch; }
.essai .pj { width: 100%; margin-top: 6px; }
.essai .pj-num { min-width: 3.2em; }
.essai-note { font: 500 .76rem/1.5 var(--f-mono); color: var(--texte-3); }
.essai-scene { height: clamp(300px, 82vw, 430px); }
.essai-scene .perso-hote { inset: 15% 8% 0; }
.essai-scene .bulle-agent { top: 7%; right: 5%; }
/* téléphone : le jour à gauche, le texte en pleine largeur, l'étiquette dessous (l'icône, décorative, est masquée) */
@media (max-width: 559px) {
  .essai .pj-liste li { grid-template-columns: 3.4em minmax(0, 1fr); grid-template-areas: "num texte" ". tag"; row-gap: 7px; align-items: start; }
  .essai .pj-icone { display: none; }
  .essai .pj-num { grid-area: num; padding-top: 4px; }
  .essai .pj-texte { grid-area: texte; }
  .essai .pj-liste .j-tag { grid-area: tag; justify-self: start; }
  .essai .pj-pied { flex-direction: column; align-items: flex-start; }
}
@media (min-width: 1024px) {
  .essai-grille { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 56px; }
  .essai-scene { height: 540px; margin-left: 0; }
  .essai-scene .perso-hote { inset: 13% 4% 0; }
  .essai-scene .scene-etiquette { top: auto; bottom: 16px; left: 16px; right: auto; }
  .essai .pj { width: 100%; margin: 6px 0 0; }
}

/* ---------- Les échanges ---------- */
.echanges { display: grid; gap: 26px; margin-top: 18px; padding: clamp(22px, 3.4vw, 38px); }
.echanges-texte { display: grid; align-content: start; gap: 12px; min-width: 0; }
.echanges-sur { display: inline-flex; align-items: center; gap: 8px; font: 500 .72rem/1.2 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--lavande); }
.echanges-sur .ic { width: 18px; height: 18px; }
.echanges-texte h3 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.95rem); line-height: 1.1; letter-spacing: -.03em; max-width: 24ch; }
.echanges-texte > p { color: var(--texte-2); }
.echanges-texte ul { list-style: none; display: grid; gap: 10px; margin-top: 4px; }
.echanges-texte li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; align-items: start; color: var(--texte-2); font-size: .96rem; line-height: 1.45; }
.echanges-texte li .ic { width: 18px; height: 18px; margin-top: 3px; color: var(--vert); }
.echanges-chiffres { list-style: none; display: grid; gap: 10px; align-content: center; min-width: 0; }
.echanges-chiffres li {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center;
  padding: 15px 18px; border-radius: 18px; border: 1px solid var(--trait); background: rgba(13, 12, 24, .45);
}
.echanges-chiffres b { grid-row: span 2; min-width: 3.3ch; font: 800 2.3rem/1 var(--f-titre); letter-spacing: -.04em; color: var(--texte); font-variant-numeric: tabular-nums; }
.echanges-chiffres span { align-self: end; font: 700 1rem/1.2 var(--f-titre); color: var(--texte); }
.echanges-chiffres small { align-self: start; font: 500 .74rem/1.3 var(--f-mono); color: var(--texte-3); }
.echanges-chiffres .is-phare { border-color: rgba(168, 148, 255, .5); background: rgba(91, 63, 207, .16); }
.echanges-chiffres .is-phare b { color: var(--lavande); }
@media (min-width: 900px) { .echanges { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 44px; align-items: center; } }

/* ---------- Comparatif : têtes des agents, précisions sous les valeurs ---------- */
.cmp-agent { display: flex; align-items: center; gap: 12px; }
.cmp-agent > .avatar { width: 36px; height: 36px; font-size: .85rem; }
.cmp-agent > .avatar-plus { width: 36px; height: 36px; }
.cmp-agent > .avatar-plus .ic { width: 16px; height: 16px; }
.cmp-val .cmp-apres { display: block; margin: 3px 0 0; font: 500 .64rem/1.3 var(--f-mono); letter-spacing: .02em; text-transform: none; color: var(--texte-3); }
.cmp-petit-dessous { display: block; margin-top: 2px; font: 500 .66rem/1.3 var(--f-mono); color: var(--texte-3); }
@media (max-width: 719px) {
  .cmp-agent { gap: 10px; }
  .cmp-agent > .avatar, .cmp-agent > .avatar-plus { width: 30px; height: 30px; }
}


/* ---------- Paiement : badges dans les choix, période désactivée pour le Sur mesure ---------- */
.pp-populaire { display: inline-block; margin-left: 6px; padding: 3px 7px; border-radius: 999px; vertical-align: 2px; background: var(--lavande); color: var(--encre); font: 500 .58rem/1.2 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.pp-populaire--vert { background: rgba(76, 197, 148, .16); color: var(--vert); }
.pp-offre input:disabled + .pp-offre-corps { opacity: .45; cursor: not-allowed; }
.pp-offre:has(input:disabled) { cursor: not-allowed; }
.pp-recap-agents .avatars .avatar { width: 30px; height: 30px; margin-left: -8px; }
.pp-recap-agents .avatars .avatar:first-child { margin-left: 0; }
/* téléphone : offre, puis période, puis récapitulatif */
@media (max-width: 1023px) { .pp-gauche > .pp-bloc:nth-child(2) { order: 1; } }