/* Page /connexion.php (s'appuie sur articles-page.css, home.css et contact.css) */
.cx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 40px; align-items: stretch; max-width: 980px; margin: 56px auto 64px; }

.cx-card { display: flex; flex-direction: column; justify-content: center; padding: 44px; }
.cx-card h1 { font-family: var(--serif); font-size: clamp(36px, 5vw, 52px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 4px 0 26px; }
.cx-card h1 em { font-style: italic; font-weight: 400; color: var(--orange); }
.cx-note { display: flex; gap: 8px; align-items: baseline; margin: -12px 0 20px; color: var(--muted); font-size: 14px; }

/* Champ avec icône à gauche (et bouton « voir » pour le mot de passe) */
.cx-input { position: relative; }
.cx-input > i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: 14px; pointer-events: none; transition: color .15s; }
.cx .cx-input input {
  display: block; width: 100%; margin: 0; padding: 13px 46px 13px 40px; font: inherit; font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line); border-radius: 10px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.cx .cx-input input:focus { outline: none; background: #fff; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(80, 89, 156, .15); }
.cx-input:focus-within > i { color: var(--accent); }
.cx-voir { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; padding: 0; color: var(--muted); background: none; border: 0; border-radius: 8px; cursor: pointer; }
.cx-voir:hover { color: var(--ink); background: rgba(29, 34, 48, .06); }
.cx-voir:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.cx-send { width: 100%; justify-content: center; margin-top: 8px; }
.cx-aide { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); text-align: center; }
.cx .cx-aide a { color: var(--accent); font-weight: 600; }

/* Colonne sombre : ce qu'apporte un compte */
.cx-side { position: static; display: flex; flex-direction: column; justify-content: center; padding: 40px 36px;
  background: radial-gradient(circle at 100% 0, rgba(232, 89, 12, .28), transparent 55%), var(--dark); }
.cx-side-titre { margin: 0 0 22px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #ffa94d; }

@media (max-width: 860px) {
  .cx-grid { grid-template-columns: 1fr; gap: 24px; margin: 28px auto 40px; }
}
@media (max-width: 560px) {
  .cx-card, .cx-side { padding: 24px; }
}

/* Page /inscription.php : offres, comparatif et formulaire */
.ins-hero { text-align: center; }
.ins-hero .ap-lede { margin-left: auto; margin-right: auto; }
.ins-hero h1 em { font-style: italic; font-weight: 400; color: var(--orange); }
.ins-offres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 860px; margin: 44px auto 0; }
.ins-offre { position: relative; padding: 32px; background: #fff; border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 18px 40px -28px rgba(29, 34, 48, .35); }
.ins-offre-pro { color: #d9dce6; border-color: transparent; background: radial-gradient(circle at 100% 0, rgba(232, 89, 12, .3), transparent 55%), var(--dark); }
.ins-badge { position: absolute; top: 20px; right: 20px; padding: 4px 10px; font-size: 12px; font-weight: 600; color: var(--dark); background: #ffa94d; border-radius: 999px; }
.ins-nom { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.ins-offre-pro .ins-nom { color: #ffa94d; }
.ins-prix { margin: 8px 0 6px; font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1.1; color: var(--ink); }
.ins-offre-pro .ins-prix { font-size: 26px; color: #fff; }
.ins-pour { margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.ins-offre-pro .ins-pour { color: #b9bdcc; }
.ins-offre ul { list-style: none; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; font-size: 15px; }
.ins-offre-pro ul { border-color: rgba(255, 255, 255, .12); }
.ins-offre ul b { color: inherit; }
.ins-offre-pro ul b { color: #fff; }
.ins-offre li i { width: 18px; color: #2f9e44; }
.ins-offre-pro li i { color: #c3fae8; }

.ins-table-wrap { max-width: 860px; margin: 36px auto 0; border: 0; }
.ins-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: 15px; }
.ins-table caption { padding: 0 0 10px; font-weight: 600; color: var(--ink); }
.ins-table th, .ins-table td { padding: 12px 16px; border-bottom: 1px solid var(--line); text-align: center; }
.ins-table th[scope=row] { text-align: left; font-weight: 500; color: var(--ink); }
.ins-table th[scope=row] i { width: 20px; color: var(--accent); }
.ins-table thead th { background: var(--paper); font-weight: 600; }
.ins-table thead th:last-child, .ins-table td:last-child { background: rgba(232, 89, 12, .05); }
.ins-table tr:last-child th, .ins-table tr:last-child td { border-bottom: 0; }
.ins-oui { color: #2f9e44; }
.ins-note { margin: 10px 0 0; font-size: 13px; color: var(--muted); }

.ins-card { max-width: 560px; margin: 44px auto 64px; }
.ins-card h2 { font-size: 28px; font-weight: 700; margin: 0 0 18px; }
.ins-bientot { background: #e8590c; }

@media (max-width: 720px) {
  .ins-offres { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
  .ins-offre { padding: 24px; }
  .ins-table th, .ins-table td { padding: 10px; font-size: 14px; }
  .ins-card { margin: 28px auto 40px; }
}
.ins-ouverture { display: inline-flex; gap: 8px; align-items: center; margin: 0 0 16px; padding: 6px 14px; font-size: 14px; font-weight: 600; color: #c2410c; background: #fff1e6; border: 1px solid #ffd8a8; border-radius: 999px; }
.ins-alerte { display: flex; gap: 12px; align-items: baseline; margin: 0 0 22px; padding: 14px 16px; font-size: 14px; line-height: 1.5; color: #7c2d12; background: #fff4e6; border: 1px solid #ffd8a8; border-radius: 12px; }
.ins-alerte i { color: #e8590c; }
.cx .ins-alerte a { color: #c2410c; font-weight: 600; text-decoration: underline; }
.ins-btn-bientot { margin-left: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; color: var(--dark); background: #ffa94d; border-radius: 999px; }

/* Carte seule (confirmer.php, mot_de_passe_oublie.php) et messages de succès */
.cx-seul { max-width: 520px; margin: 56px auto 64px; }
.cx-ok { display: flex; gap: 10px; align-items: baseline; margin-bottom: 20px; padding: 12px 16px; color: #2b8a3e; background: #ebfbee; border: 1px solid #b2f2bb; border-radius: 10px; }
.cx-renvoi { margin: -8px 0 20px; }
.cx .cx-renvoi button { padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--accent); background: none; border: 0; text-decoration: underline; cursor: pointer; }
.cx-oublie { display: block; margin: -10px 0 18px; text-align: right; font-size: 13px; }
@media (max-width: 560px) { .cx-seul { margin: 28px auto 40px; } }
.ins-cgu label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 14px; line-height: 1.5; cursor: pointer; }
.ins-cgu input { flex: none; margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); }
.cx .ins-cgu a { color: var(--accent); font-weight: 600; }