.pi { --pi-ink: #1E2A52; --pi-acc: #4F46E5; color: #334155; }
.pi-cadre { max-width: 1100px; margin: 0 auto; padding: 32px 16px 48px; display: grid; gap: 28px; }
.pi-etroit { max-width: 760px; width: 100%; margin-inline: auto; }
.pi-texte h2 { font-size: 22px; font-weight: 800; color: var(--pi-ink); margin-bottom: 12px; }
.pi-texte p, .pi-texte li { font-size: 16px; line-height: 1.75; }
.pi-texte p + p { margin-top: 12px; }
.pi-texte ul { padding-left: 22px; display: grid; gap: 8px; }
.pi-texte strong { color: var(--pi-ink); }
.pi-texte a:not(.pi-btn) { color: var(--pi-acc); font-weight: 600; }
.pi-groupe h2 { font-size: 24px; font-weight: 800; color: var(--pi-ink); margin-bottom: 16px; }
.pi-offre { margin: -6px 0 18px; font-size: 15px; font-weight: 600; color: #047857; }
.pi-formules { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pi-formule { display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: 18px; background: #F2F4F4; border: 1px solid #D5DAE3; }
.pi-formule h3, .pi-titre-carte { font-size: 20px; font-weight: 800; color: var(--pi-ink); }
.pi-accroche { font-size: 14.5px; color: #475569; }
.pi-prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: 14px; }
.pi-prix strong { font-size: 26px; font-weight: 800; color: var(--pi-ink); }
.pi-prix s { color: #64748B; }
.pi-lancement { flex-basis: 100%; font-size: 14px; color: #047857; font-weight: 600; }
.pi-formule ul { list-style: none; display: grid; gap: 8px; flex: 1; align-content: start; }
.pi-formule li { position: relative; padding-left: 22px; font-size: 14.5px; line-height: 1.5; }
.pi-formule li::before { content: ""; position: absolute; left: 2px; top: 6px; width: 10px; height: 6px; border-left: 2px solid #10B981; border-bottom: 2px solid #10B981; transform: rotate(-45deg); }
.pi-btn { display: inline-block; text-align: center; padding: 12px 20px; border-radius: 100px; background: var(--pi-ink); color: #FFFFFF; font-weight: 700; font-size: 15px; border: 0; cursor: pointer; font-family: inherit; }
.pi-btn:hover { background: var(--pi-acc); color: #FFFFFF; }
.pi-btn.is-doux { background: #E0E4EF; color: var(--pi-ink); }
.pi-btn.is-doux:hover { background: #D2D8E8; }
.pi-vide { text-align: center; font-size: 16px; }
.pi-faq details { border-bottom: 1px solid #DADEE2; padding: 14px 0; }
.pi-faq summary { font-weight: 700; cursor: pointer; font-size: 15.5px; color: var(--pi-ink); }
.pi-faq details p { margin-top: 10px; }
.pi-form { display: grid; gap: 16px; }
.pi-form label { display: grid; gap: 6px; font-weight: 600; font-size: 14.5px; color: var(--pi-ink); }
.pi-form input, .pi-form select, .pi-form textarea { width: 100%; padding: 11px 13px; border: 1px solid #CBD2DE; border-radius: 10px; background: #FFFFFF; font: inherit; font-weight: 400; color: #1E293B; }
.pi-form input:focus, .pi-form select:focus, .pi-form textarea:focus { outline: 2px solid var(--pi-acc); outline-offset: 1px; }
.pi-form .pi-btn { justify-self: start; }
.pi-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.pi-ok { padding: 14px 16px; border-radius: 12px; background: #E6F4EA; color: #065F46; }
.pi-erreur { padding: 12px 14px; border-radius: 12px; background: #FDECEC; color: #991B1B; margin-bottom: 12px; }
.pi-formules.is-candidat { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
@media (max-width: 900px) { .pi-formules { grid-template-columns: 1fr; } }
.pi-comparees { display: grid; grid-template-columns: repeat(var(--pi-n), minmax(0, 1fr)); column-gap: 14px; row-gap: 18px; margin-bottom: 18px; }
.pi-compare { display: grid; grid-row: span var(--pi-lignes); grid-template-rows: subgrid; row-gap: 0; padding: 22px 20px; border-radius: 18px; background: #F2F4F4; border: 1px solid #D5DAE3; position: relative; min-width: 0; }
.pi-compare.is-nouvelle { border: 2px solid var(--pi-acc); }
.pi-compare .pi-pastille { position: absolute; top: -12px; left: 18px; padding-block: 3px; }
.pi-avant { font-size: 14px; color: #64748B; align-self: end; }
.pi-avant s { margin-right: 4px; }
.pi-avant span { color: #047857; font-weight: 600; }
.pi-compare .pi-prix { display: block; align-self: end; }
.pi-compare .pi-prix small { font-size: 14px; color: #475569; }
.pi-compare .pi-lancement { color: #047857; font-weight: 600; font-size: 14px; align-self: start; }
.pi-compare > * { padding-block: 6px; }
.pi-compare h3 { font-size: 20px; font-weight: 800; color: var(--pi-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pi-pastille { font-size: 11px; font-weight: 800; letter-spacing: normal; text-transform: none; background: var(--pi-acc); color: #FFFFFF; border-radius: 100px; padding: 3px 9px; }
.pi-ligne { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; border-top: 1px solid #D5DAE3; }
.pi-ligne span { color: #475569; }
.pi-ligne b { text-align: right; color: var(--pi-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pi-ligne .pi-oui { color: #047857; font-size: 17px; }
.pi-ligne .pi-non { color: #B42318; font-size: 15px; }
.pi-compare .pi-btn { align-self: end; margin-top: 10px; }
@media (max-width: 1100px) { .pi-comparees { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .pi-comparees { grid-template-columns: minmax(0, 1fr); } }
.pi-sortie h1 { font-size: clamp(24px, 4vw, 30px); font-weight: 800; color: var(--pi-ink); margin-bottom: 14px; }
.pi-sortie p + ul, .pi-sortie ul + p { margin-top: 14px; }
.pi-domaine { margin-top: 14px; font-size: 22px; font-weight: 800; color: var(--pi-ink); overflow-wrap: anywhere; }
.pi-adresse { font-size: 14px; color: #475569; overflow-wrap: anywhere; }
.pi-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.pi-actions-centre { justify-content: center; }
.pi-signaler { margin-top: 18px; font-size: 14.5px; }

@media (min-width: 1025px) { .pi-cadre { max-width: 1320px; box-sizing: border-box; padding-inline: clamp(16px, 4vw, 48px); } }
.pi-onglets { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.pi-onglet { padding: 10px 20px; border-radius: 100px; border: 1px solid #D5DAE3; background: #FFFFFF; color: var(--pi-ink); font-weight: 700; font-size: 15px; text-decoration: none; }
.pi-onglet:hover { border-color: var(--pi-ink); }
.pi-onglet.is-actif { background: var(--pi-ink); border-color: var(--pi-ink); color: #FFFFFF; }