/* ============================================================
   GROUPE CHEDJOU — Components Premium
   ============================================================ */

/* ══════════════════════════════════════════════
   BOUTONS — Pill shape + animations visibles
══════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--font-weight-semi);
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 1.05em 2.8em;
  border-radius: 50px;          /* Pill shape */
  border: 1.5px solid transparent;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition:
    background   320ms var(--ease-card),
    color        320ms var(--ease-card),
    border-color 320ms var(--ease-card),
    transform    280ms var(--ease-card),
    box-shadow   320ms var(--ease-card);
}

/* Levée prononcée au hover */
.btn:hover  { transform: translateY(-5px); }
.btn:active { transform: translateY(-1px) scale(0.98); }

/* ── Primary — Or / Gold ── */
.btn-primary {
  background: var(--color-gold);
  color: var(--color-blue-night);
  border-color: var(--color-gold);
}
.btn-primary:hover {
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  box-shadow: 0 14px 32px rgba(252,200,31,.55), 0 4px 12px rgba(252,200,31,.3);
}

/* ── Outline blanc ── */
.btn-outline-white {
  background: transparent;
  color: var(--color-white);
  border-color: rgba(255,255,255,0.55);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.12);
  border-color: var(--color-white);
  box-shadow: 0 10px 28px rgba(255,255,255,.15);
}

/* ── Outline bleu ── */
.btn-outline-blue {
  background: transparent;
  color: var(--color-blue-deep);
  border-color: var(--color-blue-deep);
}
.btn-outline-blue:hover {
  background: var(--color-blue-deep);
  color: var(--color-white);
  box-shadow: 0 14px 32px rgba(28,116,185,.45);
}

/* ── Ghost avec flèche animée ── */
.btn-ghost {
  background: transparent;
  color: var(--color-gold);
  border-color: transparent;
  padding-inline: 0;
  letter-spacing: 0.1em;
  gap: var(--space-2);
}
.btn-ghost .btn-arrow {
  display: inline-block;
  transition: transform 0.35s var(--ease-out);
}
.btn-ghost:hover .btn-arrow { transform: translateX(8px); }
.btn-ghost:hover { transform: none; color: var(--color-gold-dark); }

/* ── Tailles ── */
.btn-lg { font-size: var(--text-sm); padding: 1.15em 3.4em; }
.btn-full { width: 100%; }
.btn-header-cta { font-size: 0.68rem; padding: 0.75em 1.8em; }

/* ══════════════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════════════ */

.section-header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }

.section-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--space-4);
}
.section-label::before {
  content: '';
  display: inline-block;
  width: 24px;
  height: 1.5px;
  background: var(--color-gold);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--color-grey-dark);
}
.section-title--white { color: var(--color-white); }
.section-title--blue  { color: var(--color-blue-deep); }

.section-subtitle {
  margin-top: var(--space-5);
  font-size: var(--text-md);
  color: var(--color-grey-mid);
  line-height: 1.75;
  max-width: 58ch;
}
.section-subtitle--white { color: rgba(255,255,255,0.72); }

/* ══════════════════════════════════════════════
   ICÔNES — Animations hover
══════════════════════════════════════════════ */

/* Icons dans les cartes valeurs (entreprise) */
.ep-value-icon {
  transition: transform 0.4s var(--ease-out), background 0.35s, box-shadow 0.35s;
}
.ep-value-card:hover .ep-value-icon {
  transform: translateY(-6px) scale(1.12);
  background: rgba(28,116,185,.14);
  box-shadow: 0 8px 20px rgba(28,116,185,.15);
}
.ep-value-icon svg {
  transition: transform 0.4s var(--ease-out), color 0.3s;
}
.ep-value-card:hover .ep-value-icon svg {
  transform: rotate(12deg) scale(1.1);
  color: var(--color-blue-deep);
}

/* Icons dans les cartes contact */
.cp-icon {
  transition: transform 0.4s var(--ease-out), background 0.35s;
}
.cp-contact-card:hover .cp-icon {
  transform: scale(1.18) rotate(-8deg);
}
.cp-icon svg {
  transition: transform 0.4s var(--ease-out);
}

/* Icons footer contact */
.footer-contact-item {
  transition: transform 0.25s var(--ease-out);
}
.footer-contact-item svg {
  transition: transform 0.4s var(--ease-out), color 0.3s;
  flex-shrink: 0;
}
.footer-contact-item:hover svg {
  transform: scale(1.3) rotate(-10deg);
  color: var(--color-gold);
}

/* Service card arrow */
.service-card__arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  letter-spacing: 0.1em;
  color: var(--color-gold);
  font-weight: var(--font-weight-semi);
  margin-top: var(--space-4);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.service-card:hover .service-card__arrow {
  opacity: 1;
  transform: translateX(0);
}

/* News card link arrow */
.ncard__link-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease-out);
}
.ncard:hover .ncard__link-arrow { transform: translateX(6px); }

/* Timeline icônes */
.ep-timeline__item::before {
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s;
}
.ep-timeline__item:hover::before {
  transform: scale(1.5);
  box-shadow: 0 0 0 8px rgba(252,200,31,.15);
}

/* Certification icons */
.ep-cert__icon {
  transition: transform 0.4s var(--ease-out), background 0.35s;
}
.ep-cert:hover .ep-cert__icon {
  transform: translateY(-5px) scale(1.1);
  background: rgba(28,116,185,.15);
}
.ep-cert__icon svg {
  transition: transform 0.4s var(--ease-out);
}
.ep-cert:hover .ep-cert__icon svg {
  transform: rotate(10deg);
}

/* ══════════════════════════════════════════════
   CARTES SERVICE
══════════════════════════════════════════════ */

.service-card {
  position: relative;
  border-radius: var(--radius-xs);
  overflow: hidden;
  min-height: 320px;
  cursor: pointer;
  background: var(--color-blue-night);
  display: block;
  color: inherit;
  transition: transform 350ms var(--ease-card), box-shadow 350ms var(--ease-card);
}

.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.service-card__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slower) var(--ease-out);
}

.service-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(17,30,46,.96) 0%, rgba(28,116,185,.45) 55%, transparent 100%);
  transition: background var(--dur-med) var(--ease-out);
}

.service-card:hover .service-card__img { transform: scale(1.06); }
.service-card:hover::after {
  background: linear-gradient(to top, rgba(17,30,46,.98) 0%, rgba(28,116,185,.7) 55%, rgba(28,116,185,.2) 100%);
}

.service-card__body {
  position: absolute; bottom: 0; left: 0; right: 0;
  z-index: var(--z-above);
  padding: var(--space-8) var(--space-6);
  border-left: 2px solid transparent;
  transition: border-color var(--dur-med) var(--ease-out);
}
.service-card:hover .service-card__body { border-left-color: var(--color-gold); }

.service-card__number {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.18em;
  color: var(--color-gold);
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}

.service-card__title {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-white);
  line-height: 1.25;
}

/* ══════════════════════════════════════════════
   PILLS FILTRE
══════════════════════════════════════════════ */

.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-12);
}

.filter-pill {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.65em 1.8em;
  border-radius: 50px;         /* pill aussi */
  border: 1.5px solid var(--color-grey-border);
  color: var(--color-grey-mid);
  background: transparent;
  cursor: pointer;
  transition: all 300ms var(--ease-card);
}
.filter-pill:hover,
.filter-pill.active {
  background: var(--color-blue-deep);
  border-color: var(--color-blue-deep);
  color: var(--color-white);
  box-shadow: var(--shadow-blue);
  transform: translateY(-2px);
}
.filter-pill:active { transform: translateY(-2px) scale(0.95); }

/* ══════════════════════════════════════════════
   FORMULAIRE
══════════════════════════════════════════════ */

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  position: relative;
}

.form-label {
  font-family: var(--font-heading);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-grey-dark);
}

.form-control {
  width: 100%;
  padding: 0.95em 1.2em;
  background: var(--color-white);
  border: 1.5px solid var(--color-grey-border);
  border-radius: var(--radius-xs);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-grey-dark);
  transition: border-color 300ms var(--ease-out), box-shadow 300ms var(--ease-out), transform 300ms var(--ease-out);
  outline: none;
}
.form-control:focus {
  border-color: var(--color-gold);
  box-shadow: 0 0 0 3px var(--color-gold-glow);
  transform: translateX(2px);
}
.form-control::placeholder { color: var(--color-grey-mid); opacity: 0.6; }
textarea.form-control { resize: vertical; min-height: 140px; }

/* ── Floating label (label placé après l'input dans le DOM) ── */
.form-group--floating { padding-top: 0; }
.form-group--floating .form-control { padding-top: 1.5em; padding-bottom: 0.55em; }
.form-group--floating .form-label {
  position: absolute;
  left: 1.2em;
  top: 1.55em;
  transform: translateY(-50%);
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-weight-reg);
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-grey-mid);
  background: transparent;
  pointer-events: none;
  transition: all 300ms var(--ease-out);
}
.form-group--floating .form-control:focus ~ .form-label,
.form-group--floating .form-control:not(:placeholder-shown) ~ .form-label {
  top: 0.9em;
  font-size: 0.66rem;
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-gold-dark);
}

/* ── Validation visuelle ── */
.form-control.is-valid { border-color: #38A169; }
.form-group--floating .form-control.is-valid ~ .form-valid-icon {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}
.form-valid-icon {
  position: absolute;
  right: 1.1em;
  top: 1.55em;
  transform: translateY(-50%) scale(0.5);
  opacity: 0;
  color: #38A169;
  pointer-events: none;
  transition: all 300ms var(--ease-card);
}

/* ══════════════════════════════════════════════
   STAT BADGE
══════════════════════════════════════════════ */

.stat-badge { font-family: var(--font-heading); font-weight: var(--font-weight-black); line-height: 1; color: var(--color-white); }
.stat-badge__num { font-size: var(--text-5xl); letter-spacing: -0.04em; }
.stat-badge__symbol { font-size: 60%; color: var(--color-gold); vertical-align: super; margin-left: 2px; }
.stat-badge__label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-med);
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-top: var(--space-2);
  display: block;
}

/* ══════════════════════════════════════════════
   TÉMOIGNAGE
══════════════════════════════════════════════ */

.testimonial-card { padding: var(--space-10) var(--space-12); position: relative; }
.testimonial-card__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--text-2xl);
  font-weight: 400;
  color: var(--color-white);
  line-height: 1.55;
  margin-bottom: var(--space-10);
  max-width: 70ch;
}
.testimonial-card__author { display: flex; align-items: center; gap: var(--space-5); }
.testimonial-card__avatar { width: 54px; height: 54px; border-radius: 50%; object-fit: cover; border: 2px solid var(--color-gold); }
.testimonial-card__name { font-family: var(--font-heading); font-weight: var(--font-weight-bold); font-size: var(--text-base); color: var(--color-white); }
.testimonial-card__role { font-size: var(--text-sm); color: rgba(255,255,255,.5); margin-top: 2px; }

/* ══════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════ */

.toast {
  position: fixed;
  bottom: var(--space-8);
  right: var(--space-8);
  z-index: var(--z-modal);
  background: var(--color-blue-night);
  color: var(--color-white);
  padding: var(--space-4) var(--space-6);
  border-radius: 50px;
  border-left: 3px solid var(--color-gold);
  font-size: var(--text-sm);
  box-shadow: var(--shadow-xl);
  transform: translateY(120%);
  opacity: 0;
  transition: all var(--dur-slow) var(--ease-out);
}
.toast.show { transform: translateY(0); opacity: 1; }

/* ══════════════════════════════════════════════
   NEWS CARDS
══════════════════════════════════════════════ */

.news-card {
  background: var(--color-white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--color-grey-border);
  transition: box-shadow 350ms var(--ease-card), transform 350ms var(--ease-card), border-color 350ms var(--ease-card);
}
.news-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: transparent; }

.news-card__img-wrap { overflow: hidden; height: 220px; }
.news-card__img-wrap img { width: 100%; height: 100%; transition: transform var(--dur-slower) var(--ease-out); }
.news-card:hover .news-card__img-wrap img { transform: scale(1.05); }
.news-card__body { padding: var(--space-6); }

.news-card__tag {
  display: inline-block;
  font-family: var(--font-heading);
  font-size: 0.62rem;
  font-weight: var(--font-weight-semi);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.32em 0.9em;
  border-radius: 50px;
  margin-bottom: var(--space-4);
}
.news-card__tag--blue { background: rgba(28,116,185,.08); color: var(--color-blue-deep); }
.news-card__tag--gold { background: rgba(252,200,31,.12); color: var(--color-gold-dark); }

.news-card__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: var(--font-weight-bold); color: var(--color-grey-dark); line-height: 1.3; margin-bottom: var(--space-3); }
.news-card__excerpt { font-size: var(--text-sm); color: var(--color-grey-mid); line-height: 1.7; }
.news-card__meta { display: flex; align-items: center; gap: var(--space-4); margin-top: var(--space-5); padding-top: var(--space-4); font-size: var(--text-xs); color: var(--color-grey-mid); border-top: 1px solid var(--color-grey-border); }

/* ══════════════════════════════════════════════
   PARTNER LOGO
══════════════════════════════════════════════ */

.partner-logo {
  display: flex; align-items: center; justify-content: center;
  height: 64px; padding: 0 var(--space-8);
  filter: grayscale(100%) opacity(0.4);
  transition: filter var(--dur-med) var(--ease-out), transform 0.3s var(--ease-out);
}
.partner-logo:hover { filter: grayscale(0%) opacity(1); transform: scale(1.05); }