/* Pages 3e pilier, 22.10.2026.
   Même charte que /assurance-maladie.html : la feuille landing-primes.css porte
   l'essentiel, celle-ci n'ajoute que ce que les questions du 3e pilier rendent
   nécessaire (menus déroulants, grille à deux colonnes, lien croisé).
   Aucun style en ligne : le CSP du site interdit les attributs style. */

/* Le titre garde trois lignes capitales, avec le dernier fragment en or. La
   taille est très légèrement réduite pour que « FRONTALIER » et « SANS JARGON »
   ne touchent jamais les bords à 390 px. */
body.lp-3p .lp-hero h1{font-size:clamp(31px,9.2vw,56px);overflow-wrap:break-word}
body.lp-3p .lp-hero h1 span.lp-line{text-wrap:balance}
/* Le « e » de « 3e » reste en bas de casse : la regle generique de la page
   LAMal transforme tout span du titre en bloc, il faut la neutraliser ici. */
body.lp-3p .lp-hero h1 span.ord{display:inline;margin:0;font:inherit;font-size:inherit;line-height:inherit;
 letter-spacing:inherit;font-weight:inherit;color:inherit;text-transform:none;white-space:nowrap}

/* Les menus déroulants reprennent exactement la forme des champs de saisie. */
body.lp-3p .lp-field select{width:100%;height:42px;margin:0;padding:0 34px 0 12px;border:1px solid #d5e0d3;border-radius:12px;background-color:#fcfdfb;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%236a8477' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;color:var(--p-ink);font:inherit;font-size:15px;line-height:1;appearance:none;-webkit-appearance:none}
body.lp-3p .lp-field select:focus{outline:none;border-color:#4f8a68;box-shadow:0 0 0 3px #dcecd440;background-color:#fff}
body.lp-3p .lp-field select[aria-invalid="true"]{border-color:#b4453a;background-color:#fff7f6}
body.lp-3p .lp-field select:invalid{color:#6a7f70}

/* Le formulaire du 3e pilier porte plus de questions que celui de la LAMal :
   deux colonnes à partir de 600 px, le téléphone et le consentement sur toute
   la largeur. Le repli reste fermé par défaut, le bouton principal inchangé. */
body.lp-3p .lp-form{grid-template-columns:1fr}
@media(min-width:600px){
 body.lp-3p .lp-quick-card{max-width:640px}
 body.lp-3p .lp-form{grid-template-columns:1fr 1fr;gap:10px 14px}
 body.lp-3p .lp-field:nth-child(3){grid-column:auto}
 body.lp-3p .lp-field--wide,
 body.lp-3p .lp-consent,
 body.lp-3p .lp-error,
 body.lp-3p .lp-actions{grid-column:1/-1}
 body.lp-3p .lp-field input,
 body.lp-3p .lp-field select,
 body.lp-3p .lp-dial{height:46px}
}

/* La mention « facultatif » d'un libellé, en petit et sans graisse. */
body.lp-3p .lp-opt{font-weight:500;font-size:.9em;color:#6a7f70;text-transform:none;letter-spacing:0}

/* Le lien croisé entre les deux pages, sous la ligne de réassurance. */
body.lp-3p .lp-cross{margin:10px auto 20px;font-size:12.5px;line-height:1.5;text-align:center;color:#5f7568}
body.lp-3p .lp-cross a{color:var(--p-green);font-weight:650;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}

/* Les deux sections sous le premier écran reprennent les composants de la page
   LAMal (lp-how, lp-steps), sans aucun chiffre. */
body.lp-3p .lp-how{padding:22px 0 0}
body.lp-3p .lp-3p-notes{display:grid;gap:14px;margin:16px 0 0;padding:0;list-style:none}
body.lp-3p .lp-3p-notes li{padding:14px 16px;border:1px solid #e2ebd8;border-radius:16px;background:#fff}
body.lp-3p .lp-3p-notes strong{display:block;font-size:14.5px;line-height:1.3;color:var(--p-ink)}
body.lp-3p .lp-3p-notes p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--p-muted)}
@media(min-width:820px){
 body.lp-3p .lp-hero h1{font-size:clamp(48px,4vw,58px)}
 body.lp-3p .lp-3p-notes{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
}