/* ============================================================
   BANQUE D'ESCOMPTE — components.css — identité "IRIS"
   ============================================================ */

/* ── Services : une grande carte + liste secondaire ── */
.services-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;}
.service-feature{
  background:var(--void);color:var(--text-inv);border-radius:var(--radius);
  padding:44px 40px;display:flex;flex-direction:column;justify-content:flex-end;min-height:420px;position:relative;overflow:hidden;
}
.service-feature::before{
  content:'';position:absolute;inset:-30% -20% auto auto;width:70%;height:80%;
  background:radial-gradient(closest-side, rgba(74,70,245,0.4), transparent 70%);
}
.service-feature .eyebrow{color:var(--iris-on-void);position:relative;z-index:1;}
.service-feature h3{color:var(--text-inv);font-size:1.8rem;margin:12px 0 12px;position:relative;z-index:1;}
.service-feature p{color:var(--text-inv-soft);font-size:14.5px;position:relative;z-index:1;}
.service-list{display:flex;flex-direction:column;gap:12px;}
.service-row{
  background:var(--bg);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:24px 28px;
  display:flex;justify-content:space-between;align-items:center;gap:20px;cursor:pointer;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.service-row:hover{transform:translateX(4px);border-color:var(--iris);box-shadow:0 12px 26px rgba(74,70,245,0.12);}
.service-row .num{font-size:12px;font-weight:700;color:var(--iris);font-variant-numeric:tabular-nums;min-width:22px;}
.service-row .label{flex:1;}
.service-row h4{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:3px;}
.service-row p{font-size:13px;color:var(--text-soft);}
.service-row .arrow{font-size:18px;color:var(--iris);transition:transform .2s;}
.service-row:hover .arrow{transform:translateX(4px);}
@media (max-width:1024px){.services-layout{grid-template-columns:1fr;} .service-feature{min-height:260px;}}

/* ── Confiance / sécurité ── */
.security-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.security-item{
  background:var(--bg);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:30px 26px;
}
.security-item .si-icon{
  width:44px;height:44px;border-radius:12px;margin-bottom:18px;
  background:var(--void);color:var(--iris-on-void);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.security-item h4{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:8px;}
.security-item p{font-size:13.5px;color:var(--text-soft);}
@media (max-width:860px){.security-grid{grid-template-columns:1fr;}}

/* ── Accompagnement ── */
.accomp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-light);border:1px solid var(--line-light);border-radius:var(--radius);overflow:hidden;}
.accomp-item{background:var(--bg);padding:32px 28px;}
.accomp-item span.idx{
  display:inline-flex;width:30px;height:30px;border-radius:50%;background:var(--iris-soft);color:var(--iris);
  align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:13px;margin-bottom:16px;
}
.accomp-item h4{font-family:var(--display);font-weight:600;font-size:1.05rem;margin-bottom:8px;}
.accomp-item p{font-size:13.5px;color:var(--text-soft);}
@media (max-width:860px){.accomp-grid{grid-template-columns:1fr;}}

/* ── Transformation list (old -> new) ── */
.trans-list{border-top:1px solid var(--line-light);}
.trans-item{
  display:grid;grid-template-columns:1fr auto 1fr auto;gap:20px;align-items:center;
  padding:24px 4px;border-bottom:1px solid var(--line-light);
}
.trans-item .old{color:var(--text-soft);font-size:14px;}
.trans-item .sep{color:var(--iris);font-size:16px;}
.trans-item .new{font-size:14px;font-weight:600;}
.badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;padding:6px 14px;border-radius:var(--radius-pill);white-space:nowrap;}
.badge.maquette{background:var(--iris-soft);color:var(--iris);}
.badge.futur{background:var(--bg-deep);color:var(--text-soft);border:1px solid var(--line-light);}
@media (max-width:760px){
  .trans-item{grid-template-columns:1fr;gap:8px;}
  .trans-item .sep{display:none;}
}

/* ── Parcours split (particuliers / professionnels) ── */
.parcours-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.parcours{background:var(--bg);border:1px solid var(--line-light);border-radius:var(--radius);padding:48px 40px;min-height:340px;display:flex;flex-direction:column;justify-content:space-between;}
.parcours.is-pro{background:var(--void);color:var(--text-inv);border-color:var(--line);}
.parcours.is-pro h3{color:var(--text-inv);}
.parcours.is-pro p{color:var(--text-inv-soft);}
.parcours ul{list-style:none;margin-top:18px;font-size:14px;color:var(--text-soft);display:flex;flex-direction:column;gap:9px;}
.parcours.is-pro ul{color:var(--text-inv-soft);}
.parcours ul li{padding-left:18px;position:relative;}
.parcours ul li::before{content:'—';position:absolute;left:0;color:var(--iris);}
.parcours.is-pro ul li::before{color:var(--iris-on-void);}
@media (max-width:760px){.parcours-grid{grid-template-columns:1fr;}}

/* ── Reassurance ── */
.reassure-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;}
.reassure-item{border-top:2px solid var(--iris);padding-top:18px;}
.reassure-item h4{font-family:var(--display);font-weight:600;font-size:1.1rem;margin-bottom:8px;}
.reassure-item p{font-size:13.5px;color:var(--text-soft);}
@media (max-width:760px){.reassure-grid{grid-template-columns:1fr;gap:28px;}}

/* ── Contact form ── */
.contact-shell{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.contact-info{background:var(--void);color:var(--text-inv);border-radius:var(--radius);padding:48px 40px;}
.contact-info h3{color:var(--text-inv);margin-bottom:18px;}
.contact-info p{font-size:14px;color:var(--text-inv-soft);margin-bottom:14px;}
.contact-info .fictif-tag{font-size:11px;color:var(--iris-on-void);display:block;margin-top:2px;}
.contact-form{background:var(--bg);border:1px solid var(--line-light);border-radius:var(--radius);padding:48px 40px;}
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:12.5px;font-weight:600;color:var(--text-soft);margin-bottom:8px;}
.form-group input,.form-group select,.form-group textarea{
  width:100%;padding:13px 16px;border:1px solid var(--line-light);background:var(--bg);
  font-family:var(--sans);font-size:14px;color:var(--text);border-radius:var(--radius-sm);outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--iris);box-shadow:0 0 0 3px var(--iris-soft);}
.form-group textarea{min-height:120px;resize:vertical;}
.form-error{font-size:12px;color:#C4382C;margin-top:6px;display:none;}
.form-group.has-error input,.form-group.has-error textarea{border-color:#C4382C;}
.form-group.has-error .form-error{display:block;}
.form-note{font-size:12px;color:var(--text-soft);margin-top:16px;}
.confirm-panel{display:none;background:var(--iris-soft);border:1px solid var(--iris);padding:32px;border-radius:var(--radius);text-align:center;}
.confirm-panel.show{display:block;}
.confirm-panel h3{margin-bottom:8px;}
.confirm-panel p{font-size:13.5px;color:var(--text-soft);}
.confirm-panel .ref{font-size:12px;color:var(--text-soft);margin-top:10px;}
@media (max-width:800px){.contact-shell{grid-template-columns:1fr;}}

/* ── Footer ── */
footer{background:var(--void);color:var(--text-inv);padding:64px 0 28px;}
.footer-top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:32px;padding-bottom:36px;border-bottom:1px solid var(--line);}


/* ── Footer : logo Banque d'Escompte ── */
.footer-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.footer-logo-image {
  display: block;
  width: 220px;
  height: 65px;
  object-fit: contain;
  object-position: left center;
}

/* Adaptation mobile */
@media (max-width: 600px) {
  .footer-logo-image {
    width: 180px;
    height: 54px;
  }
}

.footer-disclaimer{max-width:440px;font-size:12.5px;color:var(--text-inv-soft);margin-top:12px;}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap;}
.footer-col h5{font-size:12px;color:var(--text-inv-soft);font-weight:700;text-transform:uppercase;letter-spacing:.05em;margin-bottom:14px;}
.footer-col a,.footer-col p{display:block;font-size:13.5px;color:var(--text-inv-soft);margin-bottom:10px;}
.footer-col a:hover{color:var(--text-inv);}
.footer-bottom{padding-top:22px;font-size:11.5px;color:var(--text-inv-soft);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* ── Pages internes (services / banque / contact) ── */


/* ============================================================
   PAGE SERVICES — HERO PHOTOGRAPHIQUE
   Banque d'Escompte — Identité IRIS
   ============================================================ */

.page-hero--services {
  position: relative;
  isolation: isolate;
  min-height: 570px;
  display: flex;
  align-items: center;
  padding: 150px 0 90px;
  overflow: hidden;

  background-color: var(--void);
  background-image:
    linear-gradient(
      90deg,
      rgba(8, 10, 18, 0.96) 0%,
      rgba(8, 10, 18, 0.86) 36%,
      rgba(8, 10, 18, 0.52) 66%,
      rgba(8, 10, 18, 0.22) 100%
    ),
    linear-gradient(
      0deg,
      rgba(8, 10, 18, 0.38),
      transparent 55%
    ),
    url("../images/services/services-hero.png");

  background-size: cover;
  background-position: center, center, center 45%;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--line);
}

/* Désactive l'ancien halo décoratif du hero */
.page-hero--services::before {
  display: none;
}

.page-hero--services .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}

.page-hero--services .eyebrow {
  color: var(--iris-on-void);
}

.page-hero--services h1 {
  max-width: 780px;
  color: #fff;
  font-size: clamp(2.7rem, 5.2vw, 4.8rem);
  line-height: 1.06;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

.page-hero--services p {
  max-width: 600px;
  margin-top: 22px;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  line-height: 1.8;
}

/* ============================================================
   CARTE PRINCIPALE DES SERVICES — IMAGE EN FOND
   ============================================================ */
 
.service-feature {
  background-color: var(--void);
  background-image:
    linear-gradient(
      0deg,
      rgba(8, 10, 18, 0.97) 0%,
      rgba(8, 10, 18, 0.78) 45%,
      rgba(8, 10, 18, 0.20) 100%
    ),
    url("../images/services/services-expertise.jfif");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: var(--text-inv);
}

/* Supprime le halo violet pour laisser voir la photographie */
.service-feature::before {
  display: none;
}

/* Adaptation tablette */
@media (max-width: 1024px) {
  .page-hero--services {
    min-height: 520px;
    padding: 130px 0 76px;
    background-position: center, center, 58% center;
  }
}

/* Adaptation mobile */
@media (max-width: 640px) {
  .page-hero--services {
    min-height: 560px;
    padding: 120px 0 64px;
    background-image:
      linear-gradient(
        90deg,
        rgba(8, 10, 18, 0.88),
        rgba(8, 10, 18, 0.62)
      ),
      linear-gradient(
        0deg,
        rgba(8, 10, 18, 0.65),
        transparent
      ),
      url("../images/services/services-hero.png");

    background-position: center, center, 62% center;
  }

  .page-hero--services h1 {
    font-size: clamp(2.4rem, 10vw, 3.4rem);
  }

  .page-hero--services p {
    font-size: 15px;
  }

  .service-feature {
    min-height: 320px;
    padding: 32px 26px;
  }
}

.page-hero{
  position:relative;overflow:hidden;background:var(--void);color:var(--text-inv);padding:168px 0 76px;
}
.page-hero::before{
  content:'';position:absolute;inset:-30% -10% auto auto;width:55%;height:110%;
  background:radial-gradient(closest-side, rgba(74,70,245,0.42), transparent 70%);
}
.page-hero .eyebrow{color:var(--iris-on-void);position:relative;z-index:1;}
.page-hero h1{color:var(--text-inv);margin-top:14px;max-width:760px;position:relative;z-index:1;}
.page-hero p{color:var(--text-inv-soft);margin-top:18px;max-width:560px;position:relative;z-index:1;}
.prose{max-width:680px;}
.prose h2{margin:44px 0 14px;}
.prose p{color:var(--text-soft);margin-bottom:14px;}
.prose ul{margin:0 0 14px 20px;color:var(--text-soft);}

/* ── Article / news cards ── */
.article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px;}
.article-card{background:var(--bg);border:1px solid var(--line-light);border-radius:var(--radius);padding:32px 28px;display:flex;flex-direction:column;gap:14px;min-height:220px;transition:transform .2s ease, box-shadow .2s ease;}
.article-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px rgba(8,10,18,0.08);}
.article-card .eyebrow{font-size:11px;}
.article-card h3{font-size:1.15rem;}
.article-card p{font-size:13.5px;color:var(--text-soft);}
@media (max-width:860px){.article-grid{grid-template-columns:1fr;}}