/* ============================================================
   DEVCODE CAMER — CSS Général
   Charte graphique globale du site
   ============================================================ */

/* ── Variables ────────────────────────────────────────────── */
:root {
  --dcc-orange:     #E8732A;
  --dcc-orange-dk:  #d4621e;
  --dcc-red:        #C0392B;
  --dcc-cyan:       #2ABDE8;
  --dcc-dark:       #1a1a1a;
  --dcc-gray:       #555;
  --dcc-light:      #f4f5f7;
  --dcc-border:     #eee;
  --dcc-radius:     8px;
  --dcc-radius-lg:  12px;
  --dcc-transition: 0.2s ease;
}

/* ── Reset & Base ─────────────────────────────────────────── */
body {
  font-family: 'Segoe UI', sans-serif;
  color: #333;
  background: #fff;
}

a {
  transition: color var(--dcc-transition);
}

/* ── Bandeau tricolore (navbar + footer) ─────────────────── */
.dcc-stripe {
  height: 3px;
  background: linear-gradient(90deg, var(--dcc-orange) 0%, var(--dcc-red) 45%, var(--dcc-cyan) 100%);
  display: block;
}

/* ── Navbar ───────────────────────────────────────────────── */
.navigation {
  background: #fff !important;
  border-bottom: 1px solid var(--dcc-border);
}
.navigation::after {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--dcc-orange) 0%, var(--dcc-red) 45%, var(--dcc-cyan) 100%);
}
.navigation .nav-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #333 !important;
  padding: 8px 12px !important;
  border-radius: var(--dcc-radius);
  transition: color var(--dcc-transition), background var(--dcc-transition);
}
.navigation .nav-link:hover {
  color: var(--dcc-cyan) !important;
  background: rgba(42, 189, 232, 0.07);
}
.navigation .btn-outline-info {
  font-size: 12.5px;
  font-weight: 600;
  border-color: var(--dcc-cyan);
  color: var(--dcc-cyan);
}
.navigation .btn-outline-info:hover {
  background: var(--dcc-cyan);
  color: #fff;
}
.navigation .bg-gradiant-color {
  background: var(--dcc-orange) !important;
  border-color: var(--dcc-orange) !important;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.navigation .bg-gradiant-color:hover {
  background: var(--dcc-orange-dk) !important;
  border-color: var(--dcc-orange-dk) !important;
}

/* ── Eyebrow label (réutilisable partout) ─────────────────── */
.dcc-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--dcc-cyan);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.dcc-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dcc-cyan);
}

/* ── Titres de section ────────────────────────────────────── */
.dcc-section-title {
  font-size: 28px;
  font-weight: 800;
  color: var(--dcc-dark);
  line-height: 1.3;
  margin-bottom: 16px;
}
.dcc-section-title span {
  color: var(--dcc-orange);
}

/* ── Boutons ──────────────────────────────────────────────── */
.btn.bg-gradiant-color,
.bg-gradiant-color {
  background: var(--dcc-orange) !important;
  border-color: var(--dcc-orange) !important;
  color: #fff !important;
  font-weight: 700;
  letter-spacing: 0.4px;
  border-radius: var(--dcc-radius);
  transition: background var(--dcc-transition), border-color var(--dcc-transition);
}
.btn.bg-gradiant-color:hover,
.bg-gradiant-color:hover {
  background: var(--dcc-orange-dk) !important;
  border-color: var(--dcc-orange-dk) !important;
}

.btn-dcc-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  border: 1.5px solid var(--dcc-border);
  border-radius: var(--dcc-radius);
  text-decoration: none;
  transition: border-color var(--dcc-transition), color var(--dcc-transition);
}
.btn-dcc-outline:hover {
  border-color: var(--dcc-cyan);
  color: var(--dcc-cyan);
}

.btn-dcc-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--dcc-orange);
  text-decoration: none;
  border-bottom: 2px solid var(--dcc-orange);
  padding-bottom: 2px;
  transition: color var(--dcc-transition), border-color var(--dcc-transition);
}
.btn-dcc-link:hover {
  color: var(--dcc-cyan);
  border-color: var(--dcc-cyan);
}

/* ── Cartes génériques ────────────────────────────────────── */
.dcc-card {
  border-radius: var(--dcc-radius-lg);
  border: 1px solid var(--dcc-border);
  background: #fff;
  padding: 28px 20px;
  transition: transform var(--dcc-transition), box-shadow var(--dcc-transition);
}
.dcc-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.dcc-card.border-orange { border-top: 3px solid var(--dcc-orange); }
.dcc-card.border-cyan   { border-top: 3px solid var(--dcc-cyan); }
.dcc-card.border-red    { border-top: 3px solid var(--dcc-red); }

/* ── Icône ronde colorée ──────────────────────────────────── */
.dcc-icon-wrap {
  width: 56px;
  height: 56px;
  border-radius: var(--dcc-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin-bottom: 16px;
}
.dcc-icon-wrap.orange { background: rgba(232,115,42,0.1); color: var(--dcc-orange); }
.dcc-icon-wrap.cyan   { background: rgba(42,189,232,0.1);  color: var(--dcc-cyan); }
.dcc-icon-wrap.red    { background: rgba(192,57,43,0.1);   color: var(--dcc-red); }

/* ── Section générique ────────────────────────────────────── */
.section {
  padding: 70px 0;
}
.section.bg-light-dcc {
  background: var(--dcc-light);
}

/* ── About Us ─────────────────────────────────────────────── */
.about-block-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--dcc-red);
  margin-bottom: 8px;
  margin-top: 20px;
}
.about-missions {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
}
.about-missions li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: #444;
  line-height: 1.6;
  padding: 7px 0;
  border-bottom: 1px solid #f0f0f0;
}
.about-missions li:last-child { border-bottom: none; }
.about-missions li i { color: var(--dcc-orange); margin-top: 3px; flex-shrink: 0; }

/* ── Hero section ─────────────────────────────────────────── */
.dcc-hero { min-height: 520px; overflow: hidden; }

.hero-accent-bar {
  position: absolute;
  left: 0; top: 0;
  width: 5px; height: 100%;
  background: linear-gradient(180deg, var(--dcc-orange) 0%, var(--dcc-red) 50%, var(--dcc-cyan) 100%);
  z-index: 3;
}

.txt-typed {
  color: var(--dcc-orange);
  border-right: 3px solid var(--dcc-orange);
  padding-right: 3px;
  animation: dcc-blink 0.75s step-end infinite;
}
@keyframes dcc-blink { 50% { border-color: transparent; } }

.hero-stats {
  display: flex;
  gap: 28px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--dcc-border);
}
.stat-num {
  font-size: 22px;
  font-weight: 800;
  color: var(--dcc-dark);
}
.stat-num span { color: var(--dcc-orange); }
.stat-label {
  font-size: 11px;
  color: #888;
  letter-spacing: 0.4px;
  margin-top: 3px;
}

/* ── Footer ───────────────────────────────────────────────── */
footer {
  background: #1a1a1a;
  color: #ccc;
}
footer::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--dcc-orange) 0%, var(--dcc-red) 45%, var(--dcc-cyan) 100%);
}
footer a {
  color: #aaa;
  text-decoration: none;
  transition: color var(--dcc-transition);
}
footer a:hover { color: var(--dcc-cyan); }

.footer-col-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #fff;
  margin-bottom: 16px;
  padding-bottom: 10px;
  position: relative;
}
.footer-col-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 28px; height: 2px;
}
.footer-col-title.orange::after { background: var(--dcc-orange); }
.footer-col-title.red::after    { background: var(--dcc-red); }
.footer-col-title.cyan::after   { background: var(--dcc-cyan); }

.list-footer {
  list-style: none;
  padding: 0;
  margin: 0;
}
.list-footer li {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 9px;
  font-size: 13.5px;
  color: #aaa;
}
.list-footer li::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--dcc-cyan);
  flex-shrink: 0;
  opacity: 0.6;
}
.list-footer li a { color: #aaa; }
.list-footer li a:hover { color: var(--dcc-cyan); padding-left: 3px; }

.social-icons .list-inline-item a {
  width: 36px; height: 36px;
  border-radius: var(--dcc-radius);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #333;
  color: #aaa;
  font-size: 16px;
  transition: all var(--dcc-transition);
}
.social-icons .list-inline-item a:hover {
  border-color: var(--dcc-cyan);
  color: var(--dcc-cyan);
  background: rgba(42,189,232,0.08);
}

/* ── Carte : titre et texte ───────────────────────────────── */
.dcc-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--dcc-dark);
  margin: 0 0 10px;
  line-height: 1.4;
}
.dcc-card-text {
  font-size: 13.5px;
  color: var(--dcc-gray);
  line-height: 1.65;
  margin: 0;
}
.cta-img-float {
  animation: float 5s ease-in-out infinite;
}
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}
.cta-qp {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--dcc-border);
  border-radius: 20px; padding: 6px 14px;
  font-size: 12.5px; color: #555; font-weight: 600;
}
/* Uniquement ce qui n'est pas dans devcode-camer.css */
  .logo-block {
    border: 1px solid var(--dcc-border);
    border-radius: var(--dcc-radius);
    padding: 16px 20px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 90px;
    transition: border-color var(--dcc-transition), box-shadow var(--dcc-transition), transform var(--dcc-transition);
  }
  .logo-block:hover {
    border-color: var(--dcc-orange);
    box-shadow: 0 6px 20px rgba(232,115,42,0.12);
    transform: translateY(-3px);
  }
  .logo-img {
    width: 130px;
    height: 60px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter var(--dcc-transition), opacity var(--dcc-transition);
  }
  .logo-block:hover .logo-img {
    filter: grayscale(0%);
    opacity: 1;
  }
  .slide { padding: 0 10px; }

  /* Compteur clients */
  .client-count {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(232,115,42,0.08);
    border: 1px solid rgba(232,115,42,0.2);
    border-radius: 20px; padding: 6px 16px;
    font-size: 13px; font-weight: 700; color: var(--dcc-orange);
    margin-bottom: 8px;
  }

  /* Uniquement ce qui n'est pas dans devcode-camer.css */
  .temo-card-dcc {
    display: none;
    animation: temoFade 0.5s ease both;
  }
  .temo-card-dcc.active { display: block; }
  @keyframes temoFade {
    from { opacity:0; transform:translateY(12px); }
    to   { opacity:1; transform:translateY(0); }
  }

  .temo-quote-icon {
    font-size: 56px; line-height: 1;
    color: rgba(232,115,42,0.15);
    font-family: Georgia, serif;
    margin-bottom: -12px;
    display: block;
  }

  .temo-ind {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700;
    background: #f0f0f0; color: #999; border: 1px solid #eee;
    cursor: pointer; transition: all var(--dcc-transition);
  }
  .temo-ind.active, .temo-ind:hover {
    background: var(--dcc-orange); color: #fff; border-color: var(--dcc-orange);
  }

  .temo-avatar-dcc {
    width: 48px; height: 48px; border-radius: 50%;
    object-fit: cover; border: 2px solid var(--dcc-orange); flex-shrink: 0;
  }

  /* Uniquement ce qui n'est pas dans devcode-camer.css */
  .contact-info-item {
    display: flex; align-items: flex-start; gap: 14px;
    padding: 16px; border-radius: var(--dcc-radius);
    border: 1px solid var(--dcc-border); background: #fff;
    transition: border-color var(--dcc-transition), transform var(--dcc-transition);
    margin-bottom: 12px;
  }
  .contact-info-item:hover {
    border-color: var(--dcc-orange);
    transform: translateX(4px);
  }
  .contact-info-item h6 {
    font-size: 13px; font-weight: 700; color: #1a1a1a; margin-bottom: 3px;
  }
  .contact-info-item a,
  .contact-info-item span {
    font-size: 13.5px; color: var(--dcc-gray); text-decoration: none;
  }
  .contact-info-item a:hover { color: var(--dcc-orange); }

  /* Formulaire */
  .form-control {
    border: 1px solid var(--dcc-border);
    border-radius: var(--dcc-radius);
    padding: 10px 14px;
    font-size: 13.5px; color: #333;
    transition: border-color var(--dcc-transition), box-shadow var(--dcc-transition);
  }
  .form-control:focus {
    border-color: var(--dcc-orange);
    box-shadow: 0 0 0 3px rgba(232,115,42,0.1);
    outline: none;
  }
  .form-control::placeholder { color: #bbb; }
  textarea.form-control { min-height: 120px; resize: vertical; }

  /* Disponibilité */
  .avail-pill {
    display: inline-flex; align-items: center; gap: 7px;
    background: rgba(46,204,113,0.08);
    border: 1px solid rgba(46,204,113,0.2);
    border-radius: 20px; padding: 6px 14px;
    font-size: 12px; font-weight: 700; color: #2ecc71;
    margin-bottom: 28px;
  }
  .avail-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: #2ecc71;
    animation: availPulse 1.5s ease-in-out infinite;
  }
  @keyframes availPulse {
    0%,100% { opacity:1; transform:scale(1); }
    50%      { opacity:0.4; transform:scale(1.3); }
  }

  #error-message {
    padding: 10px 14px;
    background: rgba(192,57,43,0.08);
    border: 1px solid rgba(192,57,43,0.2);
    border-radius: var(--dcc-radius);
    color: var(--dcc-red);
    font-size: 13px; font-weight: 600;
  }

  .real-slide {
    border-radius: var(--dcc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--dcc-border);
    background: #fff;
    transition: transform var(--dcc-transition), box-shadow var(--dcc-transition);
  }
  .real-slide:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
  }
  .real-slide figure { margin: 0; position: relative; overflow: hidden; }
  .real-slide figure img {
    width: 100%; height: 200px;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
  }
  .real-slide:hover figure img { transform: scale(1.06); }
  .real-slide figure::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 60%);
    opacity: 0; transition: opacity var(--dcc-transition);
  }
  .real-slide:hover figure::after { opacity: 1; }

  .real-tag {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; color: #fff; letter-spacing: 0.5px;
  }

  /* Bouton voir */
  .real-view-btn {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -60%);
    opacity: 0; z-index: 3;
    background: #fff; color: var(--dcc-orange);
    font-size: 12px; font-weight: 700;
    padding: 8px 18px; border-radius: 6px;
    cursor: pointer; border: none;
    transition: opacity var(--dcc-transition), transform var(--dcc-transition);
    display: flex; align-items: center; gap: 5px;
  }
  .real-slide:hover .real-view-btn {
    opacity: 1; transform: translate(-50%, -50%);
  }

  .real-caption {
    padding: 14px 16px;
    border-top: 1px solid var(--dcc-border);
  }
  .real-caption-type {
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; margin-bottom: 3px;
  }
  .real-caption-name {
    font-size: 14px; font-weight: 700; color: #1a1a1a;
  }

  /* Contrôles */
  .real-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-top: 28px;
  }
  .real-btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--dcc-border);
    background: #fff; cursor: pointer; font-size: 18px; color: #555;
    transition: all var(--dcc-transition); user-select: none;
  }
  .real-btn:hover {
    background: var(--dcc-orange);
    border-color: var(--dcc-orange);
    color: #fff;
  }

  .swiper-pagination-bullet {
    background: #ccc !important; opacity: 1 !important;
  }
  .swiper-pagination-bullet-active {
    background: var(--dcc-orange) !important;
    width: 20px !important; border-radius: 4px !important;
  }

  /* ── LIGHTBOX ────────────────────────────────────────── */
  .real-lightbox {
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(0,0,0,0.92);
    display: none; align-items: center; justify-content: center;
    padding: 20px;
    animation: lbFade 0.25s ease both;
  }
  .real-lightbox.open { display: flex; }
  @keyframes lbFade { from { opacity:0; } to { opacity:1; } }

  .lb-inner {
    position: relative; max-width: 900px; width: 100%;
    animation: lbZoom 0.3s ease both;
  }
  @keyframes lbZoom {
    from { opacity:0; transform:scale(0.88); }
    to   { opacity:1; transform:scale(1); }
  }

  .lb-inner img {
    width: 100%; border-radius: var(--dcc-radius-lg);
    display: block; box-shadow: 0 24px 60px rgba(0,0,0,0.5);
  }

  .lb-caption {
    text-align: center; margin-top: 14px;
  }
  .lb-caption strong { color: #fff; font-size: 15px; display: block; }
  .lb-caption span   { color: #888; font-size: 13px; }

  .lb-close {
    position: absolute; top: -14px; right: -14px;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--dcc-orange); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; cursor: pointer; border: none;
    transition: background var(--dcc-transition);
    z-index: 2;
  }
  .lb-close:hover { background: var(--dcc-red); }

  /* Flèches lightbox */
  .lb-arrow {
    position: fixed; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2);
    color: #fff; font-size: 20px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background var(--dcc-transition); z-index: 10000;
  }
  .lb-arrow:hover { background: var(--dcc-orange); border-color: var(--dcc-orange); }
  .lb-arrow.lb-prev { left: 16px; }
  .lb-arrow.lb-next { right: 16px; }

  /* Uniquement ce qui n'est pas dans devcode-camer.css */
  .stat-card {
    border-radius: var(--dcc-radius-lg);
    border: 1px solid var(--dcc-border);
    background: #fff;
    padding: 28px 24px;
    display: flex; align-items: center; gap: 18px;
    transition: transform var(--dcc-transition), box-shadow var(--dcc-transition), border-color var(--dcc-transition);
  }
  .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.08);
  }
  .stat-card.border-orange:hover { border-color: var(--dcc-orange); }
  .stat-card.border-cyan:hover   { border-color: var(--dcc-cyan); }
  .stat-card.border-red:hover    { border-color: var(--dcc-red); }

  .stat-num {
    font-size: 38px; font-weight: 900; line-height: 1;
    margin-bottom: 4px;
  }
  .stat-num.orange { color: var(--dcc-orange); }
  .stat-num.cyan   { color: var(--dcc-cyan); }
  .stat-num.red    { color: var(--dcc-red); }

  .stat-label {
    font-size: 13px; color: var(--dcc-gray);
    line-height: 1.4; font-weight: 600;
  }

  /* Barre de progression animée sous chaque chiffre */
  .stat-bar-bg {
    height: 3px; background: var(--dcc-border);
    border-radius: 3px; margin-top: 10px; overflow: hidden;
  }
  .stat-bar {
    height: 3px; border-radius: 3px;
    animation: growBar 1.4s ease both;
  }
  @keyframes growBar {
    from { width: 0; }
    to   { width: var(--w); }
  }

  /* Image flottante */
  .stats-img-float {
    animation: floatImg 5s ease-in-out infinite;
  }
  @keyframes floatImg {
    0%,100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
  }

  /* Uniquement ce qui n'est pas dans devcode-camer.css */
  .blog-card {
    border-radius: var(--dcc-radius-lg);
    overflow: hidden;
    border: 1px solid var(--dcc-border);
    background: #fff;
    transition: transform var(--dcc-transition), box-shadow var(--dcc-transition);
    height: 100%;
  }
  .blog-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.1);
  }

  /* Image */
  .blog-card-img {
    position: relative; overflow: hidden; height: 190px;
  }
  .blog-card-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform 0.4s ease;
  }
  .blog-card:hover .blog-card-img img { transform: scale(1.06); }
  .blog-card-img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.4) 0%, transparent 60%);
    opacity: 0; transition: opacity var(--dcc-transition);
  }
  .blog-card:hover .blog-card-img::after { opacity: 1; }

  /* Tag catégorie */
  .blog-tag {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    font-size: 10px; font-weight: 700; padding: 3px 10px;
    border-radius: 20px; color: #fff; letter-spacing: 0.5px;
  }

  /* Lire la suite btn */
  .blog-read-btn {
    position: absolute; bottom: 12px; right: 12px; z-index: 2;
    opacity: 0; transition: opacity var(--dcc-transition);
    background: #fff; color: var(--dcc-orange);
    font-size: 11px; font-weight: 700;
    padding: 5px 12px; border-radius: 6px;
    text-decoration: none; display: flex; align-items: center; gap: 5px;
  }
  .blog-card:hover .blog-read-btn { opacity: 1; }

  /* Corps */
  .blog-card-body { padding: 18px; }
  .blog-card-excerpt {
    font-size: 13px; color: var(--dcc-gray);
    line-height: 1.65; margin-bottom: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .blog-card-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding-top: 12px; border-top: 1px solid var(--dcc-border);
  }
  .blog-card-footer a {
    font-size: 12.5px; font-weight: 700; color: var(--dcc-orange);
    text-decoration: none; display: flex; align-items: center; gap: 5px;
    transition: gap var(--dcc-transition);
  }
  .blog-card-footer a:hover { gap: 8px; }
  .blog-card-meta {
    font-size: 11px; color: #bbb;
    display: flex; align-items: center; gap: 5px;
  }

  /* Contrôles */
  .blog-controls {
    display: flex; align-items: center; justify-content: center;
    gap: 12px; margin-top: 28px;
  }
  .blog-btn {
    width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1.5px solid var(--dcc-border);
    background: #fff; cursor: pointer; font-size: 18px; color: #555;
    transition: all var(--dcc-transition); user-select: none;
  }
  .blog-btn:hover {
    background: var(--dcc-orange);
    border-color: var(--dcc-orange);
    color: #fff;
  }
  .swiper-pagination-bullet { background: #ccc !important; opacity:1 !important; }
  .swiper-pagination-bullet-active {
    background: var(--dcc-orange) !important;
    width: 20px !important; border-radius: 4px !important;
  }

/* ── Utilitaires DCC ──────────────────────────────────────── */
.text-dcc-orange { color: var(--dcc-orange) !important; }
.text-dcc-cyan   { color: var(--dcc-cyan)   !important; }
.text-dcc-red    { color: var(--dcc-red)    !important; }
.bg-dcc-orange   { background: var(--dcc-orange) !important; }
.bg-dcc-cyan     { background: var(--dcc-cyan)   !important; }
.bg-dcc-red      { background: var(--dcc-red)    !important; }
.border-dcc-orange { border-color: var(--dcc-orange) !important; }
.border-dcc-cyan   { border-color: var(--dcc-cyan)   !important; }
.border-dcc-red    { border-color: var(--dcc-red)    !important; }