/* =========================================================
   porte-garage — styles propres a cette page
   ---------------------------------------------------------
   Le chrome commun (charte, boutons, header, mega-menus,
   menu mobile, footer) vit dans assets/site.css.
   ========================================================= */

/* ============ PLACEHOLDERS IMAGE ============ */
.ph{position:relative;overflow:hidden;border-radius:var(--radius);background:repeating-linear-gradient(135deg, rgba(248,182,138,.18) 0 14px, rgba(248,182,138,.06) 14px 28px),linear-gradient(160deg,#e9dcc9,#d8c6ad);display:flex;align-items:flex-end;min-height:200px;color:var(--navy);border:1px solid var(--line)}
.ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.ph span{font-family:var(--font-title);font-weight:700;font-size:.82rem;background:rgba(255,255,255,.82);padding:.4rem .7rem;border-radius:8px;margin:12px;display:inline-flex;align-items:center;gap:.4rem;position:relative;z-index:1}
/* ============ SECTIONS GÉNÉRIQUES ============ */
.section{padding:80px 0}
.section-head{max-width:64ch;margin-bottom:40px}
.section-head h2{font-size:clamp(1.9rem,3.4vw,2.5rem);margin:12px 0}
.audience-tag{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem .9rem;border-radius:100px;font-family:var(--font-title);font-weight:700;font-size:.82rem;background:var(--blue-light);color:var(--navy)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;padding:72px 24px 80px;position:relative;z-index:1}
.hero h1{color:#fff;font-size:clamp(2.1rem,4.4vw,3.2rem);margin:14px 0 18px;max-width:16ch}
.hero p.lead{font-size:clamp(1.02rem,1.6vw,1.16rem);color:rgba(255,255,255,.86);max-width:48ch;margin-bottom:28px}
/* ============ SECTION 1 : texte + image ============ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split .ph{min-height:360px}
.mat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.mat-card .ph{border-radius:0;min-height:180px;border:none;border-bottom:1px solid var(--line)}
/* ============ SECTION 3 : partenaires ============ */
.partners{text-align:center}
.partner-row{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;margin-top:8px}
.partner{height:70px;min-width:160px;padding:0 22px;background:#fff;border:1px solid #e7ddd0;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--blue);font-family:var(--font-title);font-weight:700;letter-spacing:.02em;opacity:.9;transition:opacity .15s ease,border-color .15s ease}
.partner:hover{opacity:1;border-color:var(--blue)}
/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .hero-grid,.split{grid-template-columns:1fr;gap:34px}
}
@media (max-width:680px){
  .section{padding:56px 0}
  .hero-grid{padding:44px 24px 52px}
}