/* =====================================================================
   TROFOS ONGD — Composants & mise en page
   ===================================================================== */

/* --- Barre supérieure (langues + coordonnées) --- */
.topbar {
  background: var(--bleu-nuit);
  color: #bcd3e6;
  font-size: var(--fs-xs);
}
.topbar .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 8px; flex-wrap: wrap; }
.topbar a { color: #bcd3e6; }
.topbar a:hover { color: #fff; }
.topbar__contact { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.langues { display: flex; gap: 0.35rem; align-items: center; }
.langues a {
  padding: 2px 8px; border-radius: var(--r-sm);
  font-family: var(--police-donnee); letter-spacing: 0.05em;
}
.langues a.actif { background: var(--orange); color: #fff; }

/* --- En-tête / navigation --- */
.entete {
  position: sticky; top: 0; z-index: 1000;
  background: rgba(255,255,255,0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--ligne);
  transition: box-shadow var(--transition);
}
.entete.ombre { box-shadow: var(--ombre-sm); }
.entete .conteneur { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 12px; }

.logo { display: flex; align-items: center; gap: 0.7rem; }
.logo__marque { display: flex; flex-direction: column; line-height: 1; }
.logo__nom { font-family: var(--police-titre); font-weight: 800; font-size: 1.25rem; color: var(--bleu-profond); letter-spacing: -0.02em; }
.logo__slogan { font-family: var(--police-donnee); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vert-sante); }
.logo__sceau {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--degrade-heros);
  display: grid; place-items: center; color: #fff; font-weight: 800; font-family: var(--police-titre);
  box-shadow: var(--ombre-sm);
}

.nav { display: flex; align-items: center; gap: 0.1rem; }
.nav a {
  font-family: var(--police-titre); font-weight: 500; font-size: 0.82rem; letter-spacing: -0.01em;
  color: var(--encre); padding: 0.5rem 0.62rem; border-radius: var(--r-sm); white-space: nowrap;
}
.nav a:hover, .nav a.actif { color: var(--bleu-profond); background: var(--brume); }
.entete__actions { display: flex; align-items: center; gap: 0.6rem; }

.burger { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--bleu-profond); cursor: pointer; }

/* --- HERO --- */
.hero {
  position: relative;
  background: var(--degrade-heros);
  color: #fff;
  overflow: hidden;
}
.hero__slot {
  position: absolute; inset: 0;
  opacity: 0.22;
  color: #dbeafe;
}
.hero .conteneur { position: relative; z-index: 2; padding-block: clamp(4rem, 9vw, 7.5rem); }
.hero__grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 3rem; align-items: center; }
.hero h1 { color: #fff; max-width: 15ch; }
.hero h1 em { font-style: normal; color: #ffd9a8; }
.hero__lede { font-size: var(--fs-lg); color: #dbe9f5; max-width: 46ch; margin-bottom: 1.75rem; }
.hero__cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.22);
  padding: 0.4rem 0.9rem; border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-family: var(--police-donnee); letter-spacing: 0.08em; margin-bottom: 1.25rem;
}
.hero__badge i { color: var(--vert-clair); }

/* Vidéo de présentation (emplacement) */
.hero__video {
  aspect-ratio: 16 / 10; border-radius: var(--r-lg);
  border: 1px solid rgba(255,255,255,0.25);
  background:
    linear-gradient(rgba(8,55,94,0.35), rgba(8,55,94,0.35)),
    repeating-linear-gradient(45deg, #17608f 0 16px, #145784 16px 32px);
  position: relative; display: grid; place-items: center; overflow: hidden;
  box-shadow: var(--ombre-lg);
}
.hero__lecteur {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; background: #08375e;
}
.hero__play {
  position: relative; z-index: 2;
  width: 78px; height: 78px; border-radius: 50%; border: 0;
  background: var(--orange); color: #fff; display: grid; place-items: center;
  font-size: 1.5rem; box-shadow: 0 0 0 12px rgba(240,138,36,0.25); cursor: pointer;
  transition: transform var(--transition);
}
.hero__play:hover { transform: scale(1.08); }
.hero__play.cache { display: none; }

/* Bandeau « triade » sous le hero */
.bandeau-triade { height: 6px; background: var(--degrade-triade); }

/* --- COMPTEURS D'IMPACT --- */
.impact { margin-top: -3.5rem; position: relative; z-index: 5; }
.impact__grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem;
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-lg);
  padding: 2rem 1.5rem; box-shadow: var(--ombre-md);
}
.stat { text-align: center; position: relative; }
.stat:not(:last-child)::after {
  content: ''; position: absolute; right: -0.6rem; top: 15%; height: 70%; width: 1px; background: var(--ligne);
}
.stat__nombre { font-family: var(--police-donnee); font-weight: 600; font-size: var(--fs-3xl); color: var(--bleu-profond); line-height: 1; }
.stat__nombre .suf { color: var(--orange); }
.stat__label { font-size: var(--fs-sm); color: var(--ardoise); margin-top: 0.35rem; }

/* --- En-têtes de section --- */
.entete-section { max-width: 640px; margin-bottom: 2.5rem; }
.entete-section.centre { margin-inline: auto; text-align: center; }
.entete-section p { color: var(--ardoise); font-size: var(--fs-lg); margin: 0; }

/* --- DOMAINES D'INTERVENTION --- */
.domaines { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.domaine {
  padding: 1.6rem 1.4rem; background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-md);
  transition: all var(--transition);
}
.domaine:hover { transform: translateY(-5px); box-shadow: var(--ombre-md); border-color: transparent; }
.domaine__icone {
  width: 52px; height: 52px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 1.3rem; color: #fff; margin-bottom: 1rem;
  background: var(--bleu-azur);
}
.domaine:nth-child(3n+1) .domaine__icone { background: var(--bleu-azur); }
.domaine:nth-child(3n+2) .domaine__icone { background: var(--vert-sante); }
.domaine:nth-child(3n+3) .domaine__icone { background: var(--orange); }
.domaine h3 { font-size: var(--fs-lg); margin-bottom: 0.35rem; }
.domaine p { font-size: var(--fs-sm); color: var(--ardoise); margin: 0; }

/* --- ACTUALITÉS --- */
.actus { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.actu__media { aspect-ratio: 16 / 10; }
.actu__corps { padding: 1.25rem 1.4rem 1.6rem; }
.actu__meta { display: flex; gap: 0.75rem; font-size: var(--fs-xs); color: var(--ardoise); margin-bottom: 0.6rem; font-family: var(--police-donnee); }
.actu__cat { color: var(--vert-sante); font-weight: 600; }
.actu h3 { font-size: var(--fs-lg); margin-bottom: 0.4rem; }
.actu h3 a { color: var(--encre); }
.actu h3 a:hover { color: var(--bleu-profond); }
.actu p { font-size: var(--fs-sm); color: var(--ardoise); margin-bottom: 0.75rem; }
.lien-fleche { font-family: var(--police-titre); font-weight: 600; font-size: var(--fs-sm); display: inline-flex; gap: 0.4rem; align-items: center; }
.lien-fleche i { transition: transform var(--transition); }
.lien-fleche:hover i { transform: translateX(4px); }

/* --- TÉMOIGNAGES --- */
.temoignage {
  background: #fff; border: 1px solid var(--ligne); border-radius: var(--r-lg);
  padding: 2rem; height: 100%;
}
.temoignage__texte { font-size: var(--fs-lg); color: var(--encre); font-style: italic; }
.temoignage__auteur { display: flex; align-items: center; gap: 0.8rem; margin-top: 1.25rem; }
.temoignage__photo { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.temoignage__nom { font-weight: 700; font-family: var(--police-titre); }
.temoignage__role { font-size: var(--fs-sm); color: var(--ardoise); }

/* --- CARTE RDC --- */
.carte-rdc { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.carte-rdc__zone { aspect-ratio: 4 / 3; border-radius: var(--r-lg); }
.province-liste { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.25rem; }
.province {
  padding: 0.45rem 0.95rem; border-radius: var(--r-pill); border: 1px solid var(--ligne);
  font-size: var(--fs-sm); font-family: var(--police-donnee); cursor: pointer; transition: all var(--transition);
}
.province:hover { background: var(--bleu-profond); color: #fff; border-color: var(--bleu-profond); }

/* --- PARTENAIRES --- */
.partenaires { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.partenaire { aspect-ratio: 3 / 2; border-radius: var(--r-md); }

/* --- APPEL AU DON --- */
.don-cta {
  background: var(--degrade-heros); color: #fff; border-radius: var(--r-lg);
  padding: clamp(2.5rem, 5vw, 4rem); text-align: center; position: relative; overflow: hidden;
}
.don-cta h2 { color: #fff; }
.don-cta p { color: #dbe9f5; font-size: var(--fs-lg); max-width: 52ch; margin-inline: auto; }
.don-moyens { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 1.5rem; }
.don-moyen {
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.25);
  padding: 0.5rem 1rem; border-radius: var(--r-pill); font-size: var(--fs-sm); font-family: var(--police-donnee);
}

/* --- NEWSLETTER --- */
.newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: center; }
.newsletter form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.newsletter input[type=email] {
  flex: 1; min-width: 220px; padding: 0.85rem 1.1rem; border-radius: var(--r-pill);
  border: 1px solid var(--ligne); font-family: var(--police-texte); font-size: var(--fs-base);
}
.newsletter input:focus { outline: 2px solid var(--bleu-azur); border-color: transparent; }

/* --- PIED DE PAGE --- */
.footer { background: var(--bleu-nuit); color: #a9c4da; padding-block: 3.5rem 1.5rem; }
.footer a { color: #a9c4da; }
.footer a:hover { color: #fff; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
.footer h4 { color: #fff; font-size: var(--fs-base); margin-bottom: 1rem; letter-spacing: 0.02em; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; font-size: var(--fs-sm); }
.footer__logo { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.footer__logo .logo__nom { color: #fff; }
.reseaux { display: flex; gap: 0.6rem; margin-top: 1rem; }
.reseaux a {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,0.08);
  display: grid; place-items: center; color: #fff; transition: all var(--transition);
}
.reseaux a:hover { background: var(--orange); transform: translateY(-3px); }
.footer__bas {
  border-top: 1px solid rgba(255,255,255,0.1); margin-top: 2.5rem; padding-top: 1.5rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--fs-xs);
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 992px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__video { max-width: 520px; }
  .impact__grid { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-child(2)::after { display: none; }
  .domaines { grid-template-columns: repeat(2, 1fr); }
  .actus { grid-template-columns: repeat(2, 1fr); }
  .carte-rdc, .newsletter { grid-template-columns: 1fr; }
  .partenaires { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .nav { display: none; }
  .burger { display: block; }
}
@media (max-width: 620px) {
  .impact__grid { grid-template-columns: 1fr 1fr; padding: 1.25rem; }
  .stat::after { display: none !important; }
  .domaines, .actus { grid-template-columns: 1fr; }
  .partenaires { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; }
  .topbar__contact { display: none; }
}

/* --- Menu mobile déployé --- */
.nav.ouvert {
  display: flex; flex-direction: column; align-items: stretch;
  position: absolute; top: 100%; left: 0; right: 0;
  background: #fff; border-bottom: 1px solid var(--ligne);
  padding: 0.75rem; gap: 0.15rem; box-shadow: var(--ombre-md);
}

/* =====================================================================
   PAGES INTÉRIEURES
   ===================================================================== */
.page-hero {
  background: var(--degrade-heros); color:#fff; padding-block: clamp(2.5rem,6vw,4.5rem);
  position: relative;
}
.page-hero h1 { color:#fff; margin:0 0 .5rem; }
.page-hero p { color:#dbe9f5; max-width:60ch; margin:0; }
.fil { font-family:var(--police-donnee); font-size:var(--fs-xs); color:#bcd3e6; margin-bottom:1rem; }
.fil a { color:#bcd3e6; } .fil a:hover { color:#fff; }

.prose { max-width: 72ch; }
.prose p { color: var(--encre); margin-bottom:1.1rem; }
.prose h2 { margin-top:2.5rem; }
.prose h3 { margin-top:1.75rem; }

.bloc-fort {
  background: var(--brume); border-left: 4px solid var(--vert-sante);
  border-radius: var(--r-md); padding:1.5rem 1.75rem; margin: 1.5rem 0;
}
.bloc-fort--bleu { border-left-color: var(--bleu-azur); }
.bloc-fort--orange { border-left-color: var(--orange); }

.liste-check { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.liste-check li { display:flex; gap:.75rem; align-items:flex-start; }
.liste-check li::before {
  content:'\f00c'; font-family:'Font Awesome 6 Free'; font-weight:900;
  color:var(--vert-sante); margin-top:.15rem; flex-shrink:0;
}

.grille-2 { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
.grille-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
@media (max-width:820px){ .grille-2,.grille-3,.vm-grid,.carte-rdc,.newsletter{ grid-template-columns:1fr !important; } }

/* Frise chronologique (actualités) */
.frise { position:relative; padding-left:1.75rem; }
.frise::before { content:''; position:absolute; left:6px; top:.4rem; bottom:.4rem; width:2px; background:var(--ligne); }
.frise__item { position:relative; margin-bottom:1.75rem; }
.frise__item::before {
  content:''; position:absolute; left:-1.75rem; top:.35rem; width:12px; height:12px; border-radius:50%;
  background:var(--vert-sante); box-shadow:0 0 0 4px rgba(47,169,107,.18);
}
.frise__date { font-family:var(--police-donnee); font-size:var(--fs-xs); color:var(--bleu-azur); font-weight:600; }
.frise__annee {
  font-family:var(--police-titre); font-weight:800; font-size:var(--fs-xl); color:var(--bleu-profond);
  margin:1.5rem 0 1rem; padding-left:.25rem;
}

/* Formulaire */
.form-champ { margin-bottom:1.1rem; }
.form-champ label { display:block; font-weight:600; font-size:var(--fs-sm); margin-bottom:.35rem; }
.form-champ input, .form-champ textarea, .form-champ select {
  width:100%; padding:.8rem 1rem; border:1px solid var(--ligne); border-radius:var(--r-sm);
  font-family:var(--police-texte); font-size:var(--fs-base);
}
.form-champ input:focus, .form-champ textarea:focus { outline:2px solid var(--bleu-azur); border-color:transparent; }

/* Cartes de don */
.dons-grille { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1.25rem; }
.don-carte { text-align:center; padding:1.75rem 1.4rem; }
.don-carte__ico { width:56px;height:56px;border-radius:50%;display:grid;place-items:center;margin:0 auto 1rem;color:#fff;font-size:1.35rem;background:var(--bleu-profond); }
.montants { display:flex; gap:.6rem; flex-wrap:wrap; }
.montant { flex:1; min-width:80px; text-align:center; padding:.7rem; border:1px solid var(--ligne); border-radius:var(--r-sm); cursor:pointer; font-family:var(--police-donnee); font-weight:600; transition:all var(--transition); }
.montant:hover, .montant.actif { background:var(--bleu-profond); color:#fff; border-color:var(--bleu-profond); }

/* Ressources */
.ressource { display:flex; align-items:center; gap:1rem; padding:1rem 1.25rem; border:1px solid var(--ligne); border-radius:var(--r-md); background:#fff; transition:all var(--transition); }
.ressource:hover { box-shadow:var(--ombre-sm); border-color:var(--bleu-azur); }
.ressource__ico { width:44px;height:44px;border-radius:var(--r-sm);display:grid;place-items:center;background:#fdecdd;color:var(--orange-fonce);flex-shrink:0; }

/* =====================================================================
   LOGO IMAGE (officiel) + HERO PHOTO + GALERIE
   ===================================================================== */
.logo { display:flex; flex-direction:column; align-items:flex-start; gap:.18rem; text-decoration:none; line-height:1; }
.logo__img { height:44px; width:auto; display:block; }
.logo .logo__slogan { font-size:.64rem; color:var(--ardoise); font-weight:600; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; padding-left:2px; }
.footer__logo img { display:block; }
@media (max-width:600px){ .logo .logo__slogan{ display:none; } .logo__img{ height:40px; } }

/* Hero : photo réelle sous le dégradé */
.hero { position:relative; isolation:isolate; }
.hero__photo {
  position:absolute; inset:0; z-index:-2; background-size:cover; background-position:center 40%;
}
.hero::after {
  content:''; position:absolute; inset:0; z-index:-1;
  background: linear-gradient(120deg, rgba(11,61,107,.94) 0%, rgba(15,86,120,.88) 45%, rgba(30,120,90,.82) 100%);
}
.hero .hero__slot { display:none; }

/* Vignette d'actualité avec vraie image */
.actu__media { background-size:cover; background-position:center; position:relative; }
.actu__media--photo { border:none; }
.actu__media--photo span, .actu__media--photo i { display:none; }

/* Galerie photos */
.galerie-grille { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.galerie-item {
  position:relative; overflow:hidden; border-radius:var(--r-md); aspect-ratio:4/3; cursor:pointer;
  box-shadow:var(--ombre-sm);
}
.galerie-item img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; display:block; }
.galerie-item:hover img { transform:scale(1.06); }
.galerie-item figcaption {
  position:absolute; inset-inline:0; bottom:0; padding:1.5rem .8rem .7rem;
  background:linear-gradient(transparent, rgba(11,32,54,.85)); color:#fff;
  font-size:var(--fs-xs); line-height:1.3; opacity:0; transform:translateY(8px); transition:all .3s ease;
}
.galerie-item:hover figcaption { opacity:1; transform:none; }

/* Bloc image « à propos » */
.photo-cadre { border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--ombre-md); }
.photo-cadre img { width:100%; height:100%; object-fit:cover; display:block; }

/* Tuiles logos partenaires */
.partenaires-logos { display:grid; grid-template-columns:repeat(5,1fr); gap:1rem; }
@media (max-width:820px){ .partenaires-logos{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:520px){ .partenaires-logos{ grid-template-columns:repeat(2,1fr); } }
.partenaire-logo {
  background:#fff; border:1px solid var(--ligne); border-radius:var(--r-md);
  aspect-ratio:16/10; display:flex; align-items:center; justify-content:center;
  overflow:hidden; transition:box-shadow .2s, transform .2s;
}
.partenaire-logo img { width:100%; height:100%; object-fit:contain; }
.partenaire-logo:hover { box-shadow:var(--ombre-sm); transform:translateY(-2px); }
.partenaire-logo--txt { font-family:var(--police-titre); font-weight:700; color:var(--bleu-profond); font-size:var(--fs-lg); }

/* Alerte flash (site public) */
.alerte-site { max-width:820px; margin:1.5rem auto 0; padding:1rem 1.25rem; border-radius:var(--r-md); font-size:var(--fs-sm); display:flex; gap:.6rem; align-items:flex-start; }
.alerte-site--ok  { background:#e5f5ec; color:#1c7a4a; border:1px solid #b7e2c9; }
.alerte-site--err { background:#fdeaea; color:#b23b3b; border:1px solid #f2c9c9; }

/* Bannière de message flash */
.flash-zone { position:sticky; top:0; z-index:60; }
.flash { padding:.85rem 1.25rem; font-size:var(--fs-sm); display:flex; gap:.6rem; align-items:center; justify-content:center; }
.flash--ok  { background:#e5f5ec; color:#1c7a4a; }
.flash--err { background:#fdeaea; color:#b23b3b; }
.flash i { font-size:1rem; }

/* Page article individuelle */
.fil-ariane { font-size:var(--fs-sm); color:var(--ardoise); margin-bottom:1.5rem; }
.fil-ariane a { color:var(--bleu-azur); }
.fil-ariane span { margin:0 .35rem; color:var(--ligne); }
.fil-ariane__actuel { color:var(--ardoise); }
.article-meta { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin-bottom:.75rem; font-size:var(--fs-sm); color:var(--ardoise); }
.article-meta time { font-family:var(--police-donnee); }
.article-titre { font-size:clamp(1.7rem,4vw,2.4rem); line-height:1.2; margin:0 0 1rem; }
.article-chapo { font-size:var(--fs-lg); color:var(--encre); font-weight:500; line-height:1.6; margin:0 0 1.5rem; }
.article-image { margin:0 0 1.75rem; border-radius:var(--r-lg); overflow:hidden; }
.article-image img { width:100%; height:auto; display:block; }
.article-corps { font-size:1.05rem; line-height:1.8; color:var(--encre); }
.article-corps p { margin:0 0 1.1rem; }
.article-pied { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--ligne); }
.article-partage { display:flex; align-items:center; gap:.6rem; font-size:var(--fs-sm); color:var(--ardoise); }
.article-partage a { width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:var(--brume); color:var(--bleu-profond); transition:background .2s,color .2s; }
.article-partage a:hover { background:var(--bleu-azur); color:#fff; }

/* Vidéo dans un article */
.article-video { margin:0 0 1.75rem; border-radius:var(--r-lg); overflow:hidden; background:#08375e; aspect-ratio:16/9; }
.article-video iframe, .article-video video { width:100%; height:100%; border:0; display:block; object-fit:cover; }