/* =====================================================================
   ar-confiance.css — Analyse Retraite
   Styles ajoutés par l'optimisation : encarts, tableaux, calculettes,
   pied de page, accessibilité, impression.
   ===================================================================== */

/* --- Accessibilité : lien d'évitement --- */
.ar-skip { position: absolute; left: -9999px; top: 0; background: #14477d; color: #fff; padding: 8px 14px; z-index: 2000; }
.ar-skip:focus { left: 8px; top: 8px; outline: 3px solid #ffbf47; }
.ar-tel { color: inherit; text-decoration: none; }
.ar-nav-cta { font-weight: 700; color: #ffd166 !important; }

/* --- Bandeau d'accueil : hauteur adaptée aux deux boutons (master.css fixe 300px) --- */
.hero { height: auto !important; min-height: 300px; padding-bottom: 28px; }
.hero .btn-outline-light { border-color: #fff; color: #fff; }
.hero .btn-outline-light:hover { background: #fff; color: #14477d; }

/* --- Encart d'appel à l'action (remplace les styles inline) --- */
.encart-ar { margin: 28px auto; max-width: 900px; padding: 22px 26px; border-left: 4px solid #14477d; background: #eef3f9; border-radius: 4px; }
.encart-ar p.titre { margin: 0 0 6px; font-weight: 700; color: #14477d; }
.encart-ar p { margin: 0 0 14px; }
.encart-ar .btn { font-weight: 600; margin: 4px; }

/* --- Tableaux de données --- */
.table-ar { border-collapse: collapse; width: 100%; max-width: 760px; margin: 12px 0 20px; font-size: 15px; }
.table-ar th, .table-ar td { border: 1px solid #d5dce4; padding: 8px 12px; text-align: left; }
.table-ar th { background: #14477d; color: #fff; font-weight: 600; }
.table-ar tr:nth-child(even) td { background: #f2f4f7; }
.table-responsive-ar { overflow-x: auto; }

/* --- Calculettes --- */
.calc-ar { max-width: 560px; margin: 30px auto; padding: 22px 26px; border: 1px solid #d5dce4; border-radius: 8px; background: #fff; }
.calc-ar h3 { margin-top: 0; }
.calc-ar label { display: block; font-weight: 600; margin-top: 12px; }
.calc-ar input, .calc-ar select { width: 100%; padding: 9px 10px; border: 1px solid #c7cfd8; border-radius: 4px; margin-top: 4px; font-size: 16px; }
.calc-ar button { margin-top: 16px; width: 100%; padding: 11px; background: #14477d; color: #fff; border: 0; border-radius: 4px; font-weight: 700; font-size: 16px; cursor: pointer; }
.calc-ar button:hover { background: #0f365f; }
.calc-ar .resultat { margin-top: 16px; padding: 12px 14px; background: #eef3f9; border-radius: 4px; min-height: 24px; }
.calc-ar .note { font-size: 0.85rem; color: #6f7d8c; margin-top: 10px; }

/* --- Bloc de preuves / réassurance --- */
.ar-preuves { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 30px auto; max-width: 1000px; }
.ar-preuves .item { flex: 1 1 210px; background: #fff; border: 1px solid #d5dce4; border-radius: 8px; padding: 18px; text-align: center; }
.ar-preuves .item i { font-size: 28px; color: #14477d; margin-bottom: 8px; }
.ar-preuves .item strong { display: block; margin-bottom: 4px; }
.ar-preuves .item span { font-size: 0.92rem; color: #445; }

/* --- Étapes (comment ça marche) --- */
.ar-etapes { counter-reset: etape; list-style: none; padding: 0; max-width: 900px; margin: 20px auto; }
.ar-etapes li { position: relative; padding: 10px 0 10px 56px; font-size: 1.05rem; line-height: 1.55; }
.ar-etapes li::before { counter-increment: etape; content: counter(etape); position: absolute; left: 0; top: 8px; width: 38px; height: 38px; border-radius: 50%; background: #14477d; color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* --- Avis clients (à alimenter avec de VRAIS avis) --- */
.ar-avis { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin: 20px auto; max-width: 1000px; }
.ar-avis blockquote { flex: 1 1 280px; background: #eef3f9; border-left: 4px solid #14477d; padding: 16px 18px; margin: 0; border-radius: 4px; font-size: 0.97rem; }
.ar-avis blockquote footer { font-size: 0.85rem; color: #556; margin-top: 8px; }

/* --- Pied de page --- */
.ar-footer-reassurance { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center; padding: 18px 10px 6px; font-size: 0.93rem; }
.ar-footer-reassurance i { margin-right: 6px; color: #7fd1a3; }
.ar-footer-legal { font-size: 0.82rem; opacity: 0.85; }
#footer_middle a { color: inherit; }

/* --- Formulaires --- */
.ar-form-aide { font-size: 0.85rem; color: #6f7d8c; }
.ar-honeypot { position: absolute; left: -9999px; }
.ar-source { font-size: 0.9rem; color: #6f7d8c; font-style: italic; }

/* --- Impression (déplacé depuis le header) --- */
@media print {
  body { width: 100% !important; height: auto !important; margin: auto !important; font-family: serif; font-size: 12pt; background: #fff !important; color: #000 !important; }
  p, h1, h2, h3, h4, h5, h6, blockquote, ul, ol { color: #000 !important; margin-left: auto !important; margin-right: auto !important; margin-bottom: 25px !important; }
  #header, .navigation, .pre-header, .corner-ribbon, #footer, .encart-ar, .calc-ar, iframe { display: none !important; }
  p, blockquote { orphans: 3; widows: 3; }
  blockquote, ul, ol, table { page-break-inside: avoid; }
  h1, h2, h3, caption { page-break-after: avoid; }
  a { color: #000 !important; text-decoration: underline !important; }
  a[href^="http"]:after { content: " (" attr(href) ")"; }
}