/* ══════════════════════════════════════════════════════════════
   HOBAN — /collectivites/
   Feuille propre à la page, cloisonnée par .collec.
   Palette : #1A2E24 fond sombre · #2D7A4F accent · #6AAE80 accent clair
             #F0F4F1 fond clair · #E8EBF0 bordures · #4A6358 texte secondaire
══════════════════════════════════════════════════════════════ */

.collec { --vert: #2D7A4F; --vert-clair: #6AAE80; --sombre: #1A2E24; --fond: #F0F4F1;
          --bord: #E8EBF0; --gris: #4A6358; --gris-clair: #7C8A83; --blanc: #FFFFFF;
          color: var(--sombre); }

.collec section { padding: 56px 20px; }
.collec .wrap { max-width: 1120px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.collec h2 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.2; font-weight: 700; letter-spacing: -0.4px; }
.collec h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.collec .lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--gris); }
.collec .txt { font-size: 16px; line-height: 1.5; color: var(--gris); }
.collec .ttl { font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--sombre); }
.collec .clair { background: var(--fond); }
.collec img { max-width: 100%; height: auto; display: block; }
.collec .blanc { background: var(--blanc); }

/* ─── Accroche ─────────────────────────────────────────────── */
.collec .hero { background: var(--sombre); color: var(--blanc); }
.collec .hero .wrap { display: flex; gap: 48px; align-items: center; }
.collec .hero-texte { flex: 1.15; display: flex; flex-direction: column; gap: 18px; }
.collec .surtitre { font-size: 13px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--vert-clair); }
.collec .hero h1 { margin: 0; font-size: clamp(30px, 4.4vw, 50px); line-height: 1.08; font-weight: 800; letter-spacing: -1px; color: var(--blanc); }
.collec .hero p { margin: 0; font-size: 19px; line-height: 1.5; color: #D5E3DA; max-width: 560px; }
.collec .hero-actions { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; padding-top: 6px; }
.collec .hero-gratuit { display: flex; gap: 10px; align-items: center; font-size: 14px; line-height: 1.35; color: #D5E3DA; }
.collec .hero-gratuit strong { color: var(--blanc); }
.collec .hero-visuel { flex: 0.85; position: relative; padding: 96px 0 0 24px; }
.collec .hero-visuel .cadre { background: var(--blanc); border-radius: 26px; padding: 10px; box-shadow: 0 16px 40px rgba(0,0,0,0.25); }
.collec .hero-visuel .cadre img { display: block; width: 100%; border-radius: 18px; }
.collec .hero-visuel .notif { position: absolute; top: 24px; left: 0; width: 86%; border-radius: 18px; box-shadow: 0 12px 30px rgba(0,0,0,0.30); }

/* ─── Boutons ──────────────────────────────────────────────── */
.collec .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 54px;
  padding: 0 28px; border-radius: 12px; font-size: 17px; font-weight: 600; text-decoration: none; }
.collec .btn-blanc { background: var(--blanc); color: var(--sombre); }
.collec .btn-blanc:hover { background: #E8EFE9; }
.collec .btn-contour { border: 1px solid var(--sombre); color: var(--sombre); }
.collec .btn-contour:hover { background: var(--sombre); color: var(--blanc); }

/* ─── Bénéfices ────────────────────────────────────────────── */
.collec .benefices .wrap { display: flex; flex-direction: column; gap: 22px; }
.collec .cartes { display: flex; gap: 20px; }
.collec .carte { flex: 1; border-radius: 14px; padding: 20px; background: var(--fond); display: flex; flex-direction: column; gap: 6px; }

/* ─── Offre ────────────────────────────────────────────────── */
.collec .offre .wrap { display: flex; flex-direction: column; gap: 22px; }
.collec .modules { display: flex; gap: 20px; }
.collec .module { flex: 1; border: 1px solid var(--bord); border-radius: 14px; padding: 24px; background: var(--fond);
  display: flex; flex-direction: column; gap: 10px; }
.collec .module-gratuit { border: 2px solid var(--vert); }
.collec .module-tete { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.collec .module-nom { font-size: 28px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.1; }
.collec .badge { font-size: 13px; font-weight: 600; color: var(--gris); background: var(--bord); padding: 5px 12px; border-radius: 999px; }
.collec .badge-gratuit { color: var(--blanc); background: var(--vert); font-weight: 700; }
.collec .module-sous { font-size: 16px; font-weight: 500; color: var(--gris); }
.collec .objection { display: flex; gap: 12px; align-items: center; padding-top: 4px; font-size: 15px; line-height: 1.55; color: var(--gris-clair); }
.collec .objection strong { font-weight: 600; }

/* ─── Bande de contact ─────────────────────────────────────── */
.collec .bande { background: var(--sombre); }
.collec .bande .wrap { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.collec .bande h2 { color: var(--blanc); }
.collec .bande p { margin: 8px 0 0; font-size: 18px; line-height: 1.55; color: #D5E3DA; max-width: 620px; }

/* ─── Engagements ──────────────────────────────────────────── */
.collec .engagements .wrap { display: flex; gap: 56px; align-items: flex-start; }
.collec .engagements-texte { width: 340px; flex-shrink: 0; display: flex; flex-direction: column; gap: 16px; padding-top: 10px; }
.collec .engagements-liste { flex: 1; display: flex; flex-direction: column; }
.collec .engagement { display: flex; gap: 24px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--bord); }
.collec .engagement:last-child { border-bottom: none; }
.collec .engagement-num { width: 64px; flex-shrink: 0; font-size: 40px; font-weight: 300; letter-spacing: -1px; line-height: 1; color: var(--vert); }
.collec .engagement-ttl { width: 230px; flex-shrink: 0; font-size: 18px; font-weight: 600; }

/* ─── Application ──────────────────────────────────────────── */
.collec .appli .wrap { display: flex; gap: 56px; align-items: stretch; }
.collec .appli-texte { flex: 1; display: flex; flex-direction: column; gap: 22px; }
.collec .garantie { display: flex; gap: 14px; align-items: flex-start; }
.collec .garantie svg { flex-shrink: 0; margin-top: 2px; }
.collec .appli-visuels { flex: 1; display: flex; gap: 20px; align-items: flex-start; }
.collec .appli-visuels img { width: 50%; flex: 1; min-width: 0; border-radius: 18px; box-shadow: 0 10px 30px rgba(26,46,36,0.12); }
.collec .appli-visuels img:last-child { margin-top: 60px; }
.collec .appli-texte .btn { margin-top: auto; align-self: flex-start; }

/* ─── Contact et formulaire ────────────────────────────────── */
.collec .contact .wrap { display: flex; gap: 56px; align-items: flex-start; }
.collec .contact-texte { flex: 1; display: flex; flex-direction: column; gap: 18px; }
.collec .fondateurs { display: flex; gap: 32px; padding-top: 4px; }
.collec .fondateur { display: flex; gap: 14px; align-items: center; }
.collec .fondateur img { width: 72px; height: 72px; border-radius: 999px; object-fit: cover; flex-shrink: 0; }
.collec .fondateur-nom { font-size: 17px; font-weight: 600; }
.collec .fondateur-role { font-size: 14px; color: var(--gris); }
.collec .heberge { display: flex; gap: 12px; align-items: center; background: var(--fond); border-radius: 12px; padding: 16px 18px;
  font-size: 15px; font-weight: 600; }
.collec .contact-form { flex: 1; min-width: 0; }

/* Formulaire Brevo : on reprend la police et la largeur du site */
.collec .sib-form { padding: 0 !important; text-align: left !important; }
.collec #sib-container { max-width: none !important; padding: 28px !important; }
.collec .sib-form *,
.collec #sib-container input,
.collec #sib-container textarea,
.collec #sib-container button { font-family: 'Outfit', system-ui, sans-serif !important; }
.collec #sib-container .entry__field { border-radius: 12px; border-color: var(--bord); }
.collec #sib-container .sib-form-block__button { width: auto; min-height: 52px; padding: 0 28px; }
.collec #sib-container textarea { min-height: 110px; }

/* ─── Questions fréquentes ─────────────────────────────────── */
.collec .faq .wrap { display: flex; flex-direction: column; gap: 12px; }
.collec .faq-liste { display: flex; flex-direction: column; gap: 10px; max-width: 880px; }
.collec details { background: var(--blanc); border-radius: 14px; padding: 0 24px; }
.collec details summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between;
  align-items: center; gap: 16px; padding: 20px 0; }
.collec details summary::-webkit-details-marker { display: none; }
.collec details summary svg { flex-shrink: 0; transition: transform .2s ease; }
.collec details[open] summary svg { transform: rotate(180deg); }
.collec details .txt { padding: 0 0 20px; }

/* ─── Mobile ───────────────────────────────────────────────── */
@media (max-width: 900px) {
  .collec section { padding: 40px 20px; }
  .collec .hero .wrap,
  .collec .bande .wrap,
  .collec .engagements .wrap,
  .collec .appli .wrap,
  .collec .contact .wrap { flex-direction: column; gap: 28px; align-items: stretch; }
  .collec .cartes, .collec .modules { flex-direction: column; }
  .collec .hero-visuel { padding: 72px 0 0; }
  .collec .hero-actions .btn { width: 100%; }
  .collec .engagements-texte { width: auto; }
  .collec .engagement { align-items: flex-start; gap: 16px; }
  .collec .engagement-num { width: 48px; font-size: 32px; }
  .collec .engagement-ttl { width: auto; }
  .collec .engagement { flex-wrap: wrap; }
  .collec .engagement .txt { flex-basis: 100%; padding-left: 64px; }
  .collec .appli-visuels img:last-child { margin-top: 32px; }
  .collec .fondateurs { flex-direction: column; gap: 16px; }
}