/* Composants visuels services Expat'Immo
   Utilisé sur : chasseur villes, gestion-location, pilier A, etc.
   Palette : #1a2b4a (deep navy), #1b8089 (teal), #229FA8 (teal clair), #f5a623 (amber) */

/* ── Step cards numérotées (méthode étape par étape) ───────────── */
.step-cards{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:2rem 0;counter-reset:step}
@media(min-width:760px){.step-cards{grid-template-columns:1fr 1fr}}
@media(min-width:1100px){.step-cards.cols-3{grid-template-columns:repeat(3,1fr)}}
.step-card{position:relative;background:#fff;border-radius:16px;padding:1.75rem 1.5rem 1.5rem;box-shadow:0 6px 24px -10px rgba(15,23,42,.18);border-top:4px solid #1b8089;counter-increment:step}
.step-card::before{content:counter(step,decimal-leading-zero);position:absolute;top:-18px;left:1.5rem;width:42px;height:42px;border-radius:50%;background:#1b8089;color:#fff;font-weight:700;font-size:1.05rem;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(27,128,137,.4)}
.step-card h3{margin:.5rem 0 .75rem;color:#0f172a;font-size:1.15rem;line-height:1.35}
.step-card p{margin:0;color:#475569;font-size:.95rem;line-height:1.55}

/* ── Feature grid (icônes + texte court) ───────────────────────── */
.feature-grid{display:grid;grid-template-columns:1fr;gap:1rem;margin:1.5rem 0}
@media(min-width:600px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.feature-grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:960px){.feature-grid.cols-4{grid-template-columns:repeat(4,1fr)}}
.feature-card{display:flex;gap:.85rem;padding:1.1rem 1rem;background:#f8fafc;border-radius:12px;border-left:3px solid #229FA8}
.feature-icon{font-size:1.6rem;line-height:1;flex-shrink:0;width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:#fff;border-radius:50%;box-shadow:0 2px 8px rgba(15,23,42,.08)}
.feature-body{flex:1;min-width:0}
.feature-title{font-weight:700;color:#0f172a;font-size:.95rem;margin:0 0 .25rem}
.feature-text{font-size:.88rem;color:#475569;line-height:1.45;margin:0}

/* ── Avis clients (cards avec étoiles + drapeau) ───────────────── */
.avis-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:1.5rem 0}
@media(min-width:780px){.avis-grid{grid-template-columns:repeat(3,1fr)}}
.avis-card{background:#fff;border-radius:14px;padding:1.5rem 1.35rem;box-shadow:0 8px 28px -12px rgba(15,23,42,.18);position:relative;border-top:3px solid #f5a623}
.avis-card::before{content:'"';position:absolute;top:-15px;right:1.25rem;font-size:5rem;color:#f5a623;line-height:1;font-family:Georgia,serif;opacity:.3}
.avis-stars{color:#f5a623;font-size:1rem;letter-spacing:1px;margin-bottom:.65rem}
.avis-text{font-size:.92rem;line-height:1.55;color:#334155;font-style:italic;margin:0 0 1rem;position:relative;z-index:1}
.avis-meta{display:flex;align-items:center;gap:.65rem;padding-top:.9rem;border-top:1px solid #e2e8f0}
.avis-flag{font-size:1.4rem;line-height:1}
.avis-author{font-weight:700;color:#0f172a;font-size:.92rem;margin:0}
.avis-loc{font-size:.78rem;color:#64748b;margin:0}

/* ── Réalisations grid (cards portfolio) ───────────────────────── */
.realisations-grid{display:grid;grid-template-columns:1fr;gap:1.25rem;margin:1.5rem 0}
@media(min-width:780px){.realisations-grid{grid-template-columns:repeat(3,1fr)}}
.realisation-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 8px 28px -12px rgba(15,23,42,.18);transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.realisation-card:hover{transform:translateY(-3px);box-shadow:0 14px 34px -10px rgba(15,23,42,.25)}
.realisation-image{aspect-ratio:16/10;overflow:hidden;background:#e2e8f0}
.realisation-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.realisation-card:hover .realisation-image img{transform:scale(1.05)}
.realisation-body{padding:1.1rem 1.25rem 1.25rem;flex:1;display:flex;flex-direction:column;gap:.5rem}
.realisation-tag{font-size:.72rem;font-weight:700;color:#1b8089;text-transform:uppercase;letter-spacing:1.2px;margin:0}
.realisation-title{font-size:1.02rem;font-weight:700;color:#0f172a;margin:0;line-height:1.4}
.realisation-cta{margin-top:auto;padding-top:.5rem;font-size:.85rem;color:#1b8089;font-weight:600}
.realisation-cta::after{content:" →";transition:transform .2s}
.realisation-card:hover .realisation-cta::after{padding-left:4px}

/* ── CTA humanisé (avec photos conseillers) ────────────────────── */
.cta-human-banner{display:grid;grid-template-columns:auto 1fr auto;gap:1.5rem;align-items:center;background:linear-gradient(135deg,#1b8089 0%,#229FA8 100%);border-radius:18px;padding:1.75rem 2rem;box-shadow:0 14px 32px -10px rgba(27,128,137,.4)}
@media(max-width:780px){.cta-human-banner{grid-template-columns:1fr;text-align:center}}
.cta-human-photos{display:flex;align-items:center}
.cta-human-photos img{width:70px;height:70px;border-radius:50%;border:3px solid #fff;object-fit:cover;box-shadow:0 4px 14px rgba(0,0,0,.25);background:#fff}
.cta-human-photos img:nth-child(2){margin-left:-22px;z-index:1}
/* WCAG AA : texte blanc plein contraste sur fond teal */
.cta-human-body h3,
.cta-human-banner .cta-human-body h3{margin:0 0 .4rem !important;color:#ffffff !important;font-size:1.3rem;font-weight:700;line-height:1.3}
.cta-human-body p,
.cta-human-banner .cta-human-body p{margin:0 !important;color:#ffffff !important;font-size:.95rem;line-height:1.55;opacity:.97}
.cta-human-body p strong,
.cta-human-banner .cta-human-body p strong{color:#1a2b4a !important;background:#ffffff;padding:.1rem .45rem;border-radius:5px;font-weight:700;display:inline-block;line-height:1.4}
.cta-human-btn{background:#ffffff !important;color:#1a2b4a !important;font-weight:700;padding:.95rem 1.6rem;border-radius:10px;text-decoration:none !important;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.22);transition:background .2s,color .2s,transform .2s;display:inline-block}
.cta-human-btn:hover{background:#f5a623 !important;color:#ffffff !important;transform:translateY(-2px)}

/* ── Inclusions visuelles (au lieu d'une liste à puces) ────────── */
.inclusions-grid{display:grid;grid-template-columns:1fr;gap:.85rem;margin:1.25rem 0}
@media(min-width:760px){.inclusions-grid{grid-template-columns:1fr 1fr}}
.inclusion-item{display:flex;gap:.75rem;align-items:flex-start;padding:.85rem 1rem;background:linear-gradient(135deg,#f0f9fa 0%,#e8f1f4 100%);border-radius:10px}
.inclusion-check{color:#1b8089;font-size:1.25rem;flex-shrink:0;font-weight:700;line-height:1.3}
.inclusion-text{font-size:.94rem;color:#0f172a;line-height:1.45}
.inclusion-text strong{color:#0a1730}