/* BDX — Home V4 « Le Cockpit » (17/08/2026). Chargé uniquement sur la front page
   (inc/home-helpers.php). Charte : gris + #FCAF3B, Century Gothic Bold.
   Full width assumé : aucune section ne plafonne sa largeur (demande Adrien). */

.bxh3 { --ambre: #FCAF3B; --ambre-f: #f5a017; --encre: #17171a; --gris: #6b7075;
        --fond: #f5f5f6; --ligne: #e5e6e9; --vert: #009847;
        color: var(--encre); }
.bxh3 .bxh3-in { padding: 0 clamp(14px, 2.5vw, 28px) 8px; }
.bxh3 h2, .bxh3 .bxh3-titre { font-family: "Century Gothic", "Questrial", Futura, "Trebuchet MS", sans-serif; font-weight: 700; }
.bxh3 a { text-decoration: none; color: inherit; }
.bxh3 img { max-width: 100%; }

/* ── Rangée 1 : recherche | estimation ── */
.bxh3-r1 { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; margin: 18px 0 16px; align-items: stretch; }
@media (max-width: 1150px) { .bxh3-r1 { grid-template-columns: 1fr; } }
.bxh3-hero { position: relative; overflow: hidden; background: #fff; border: 1.5px solid var(--ligne); border-radius: 20px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; justify-content: center; }
.bxh3-hero::before { content: ""; position: absolute; right: -70px; top: -100px; width: 300px; height: 300px; border-radius: 50%; background: radial-gradient(circle, rgba(252,175,59,.22), transparent 70%); }
.bxh3-sur { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: #b45309; margin-bottom: 10px; position: relative; }
.bxh3-titre { font-size: clamp(24px, 2.7vw, 34px); line-height: 1.07; letter-spacing: -.015em; margin: 0 0 10px; position: relative; }
.bxh3-titre em { font-style: normal; position: relative; white-space: nowrap; box-shadow: inset 0 -0.18em 0 var(--ambre); }
.bxh3-seo { font-size: 12.5px; color: #a2a4aa; margin: 0 0 16px; position: relative; }
.bxh3-cmd { display: flex; background: #fff; border: 2px solid var(--encre); border-radius: 14px; padding: 5px 5px 5px 17px; align-items: center; gap: 10px; box-shadow: 0 14px 34px rgba(23,23,26,.1); position: relative; margin-bottom: 12px; }
.bxh3-cmd input[type="search"] { flex: 1; border: 0; outline: 0; font-size: 15px; font-family: inherit; min-width: 0; background: none; padding: 6px 0; }
.bxh3-cmd button { background: var(--ambre); border: 0; font-family: inherit; font-weight: 800; font-size: 13.5px; padding: 11px 20px; border-radius: 10px; cursor: pointer; transition: background .15s; color: var(--encre); }
.bxh3-cmd button:hover { background: var(--ambre-f); }
.bxh3-chips { display: flex; gap: 7px; flex-wrap: wrap; position: relative; }
.bxh3-chips a { border: 1.5px solid var(--ligne); background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 12px; transition: border-color .12s, background .12s; }
.bxh3-chips a:hover { border-color: var(--ambre); background: #fff8ec; }
.bxh3-chips b { color: #b45309; font-variant-numeric: tabular-nums; }

.bxh3-machine { background: #fff; border: 1.5px solid var(--ligne); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 18px 44px rgba(23,23,26,.08); }
.bxh3-machine-h { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 13px 18px; border-bottom: 1px solid var(--ligne); }
.bxh3-machine-h b { font-size: 14px; }
.bxh3-machine-h span { font-size: 11px; font-weight: 800; color: var(--vert); }
.bxh3-machine-c { padding: 14px 18px 18px; display: flex; flex-direction: column; flex: 1; }
.bxh3-mgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 12px; }
@media (max-width: 560px) { .bxh3-mgrid { grid-template-columns: repeat(2, 1fr); } }
.bxh3-mp { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--ligne); background: #fff; border-radius: 10px; padding: 7px 9px; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700; text-align: left; transition: border-color .12s, background .12s; color: var(--encre); }
.bxh3-mp img { width: 34px; height: 34px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.bxh3-mp small { display: block; font-weight: 400; color: var(--gris); font-size: 10px; font-variant-numeric: tabular-nums; }
.bxh3-mp:hover { border-color: #c9cbd2; }
.bxh3-mp.on { border-color: var(--ambre); background: #fff8ec; }
.bxh3-prix { background: var(--fond); border-radius: 12px; padding: 12px 15px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.bxh3-prix .n { font-size: 12.5px; color: var(--gris); }
.bxh3-prix .v { font-family: "Century Gothic", Futura, sans-serif; font-weight: 700; font-size: 27px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bxh3-prix .v small { font-size: 12px; color: var(--gris); font-weight: 400; }
.bxh3-mnote { font-size: 11px; color: var(--gris); margin: 0 0 12px; }
.bxh3-mnote b { color: var(--vert); }
.bxh3-mcta { display: block; text-align: center; background: var(--ambre); font-weight: 800; font-size: 13.5px; padding: 12px; border-radius: 11px; margin-top: auto; transition: background .15s; }
.bxh3-mcta:hover { background: var(--ambre-f); }

/* ── Cockpit / teaser (panneau nuit) ── */
.bxh3-cockpit { background: linear-gradient(115deg, #1f2937, #111827 70%); border-radius: 22px; padding: clamp(16px, 2.2vw, 26px); margin-bottom: 30px; position: relative; overflow: hidden; }
.bxh3-cockpit::before { content: ""; position: absolute; right: -90px; top: -120px; width: 340px; height: 340px; border-radius: 50%; background: radial-gradient(circle, rgba(252,175,59,.18), transparent 70%); }
.bxh3-ck-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; position: relative; }
.bxh3-ck-head h2 { color: #fff; font-size: clamp(19px, 2.2vw, 25px); margin: 0; }
.bxh3-ck-head h2 em { font-style: normal; color: var(--ambre); }
.bxh3-ck-head span { font-size: 12.5px; color: #9aa1ac; }
.bxh3-ck-head a { font-size: 12.5px; font-weight: 800; color: var(--ambre); }
.bxh3-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; position: relative; }
.bxh3-b { background: #fff; border-radius: 16px; padding: 16px 18px; min-width: 0; }
.bxh3-b h3 { font-size: 13.5px; margin: 0 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: inherit; font-weight: 800; }
.bxh3-b h3 a { font-size: 11.5px; color: #b45309; font-weight: 800; }
.bxh3-colis { grid-column: span 5; grid-row: span 2; background: linear-gradient(135deg, var(--ambre), #f7b544 55%, #ffd479); display: flex; flex-direction: column; }
.bxh3-urgent { grid-column: span 4; }
.bxh3-fid { grid-column: span 3; }
.bxh3-cmd { grid-column: span 4; }
.bxh3-devis { grid-column: span 3; }
@media (max-width: 1150px) {
  .bxh3-colis { grid-column: span 12; grid-row: span 1; }
  .bxh3-urgent, .bxh3-cmd { grid-column: span 6; }
  .bxh3-fid, .bxh3-devis { grid-column: span 6; }
}
@media (max-width: 700px) { .bxh3-bento > .bxh3-b { grid-column: span 12 !important; } }

.bxh3-colis .et { font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: rgba(23,23,26,.65); margin-bottom: 6px; }
.bxh3-colis .quoi { font-size: 13.5px; font-weight: 700; color: rgba(23,23,26,.85); margin-bottom: 2px; }
.bxh3-colis .date { font-family: "Century Gothic", Futura, sans-serif; font-weight: 700; font-size: clamp(20px, 2.1vw, 26px); line-height: 1.12; color: #17171a; margin-bottom: 16px; }
.bxh3-colis .vide { font-size: 13.5px; color: rgba(23,23,26,.8); line-height: 1.55; margin: 0 0 16px; max-width: 420px; }
.bxh3-timeline { display: flex; flex-direction: column; margin-bottom: 14px; }
.bxh3-step { display: flex; gap: 11px; align-items: flex-start; }
.bxh3-step .pt { display: flex; flex-direction: column; align-items: center; align-self: stretch; }
.bxh3-step .dot { width: 15px; height: 15px; border-radius: 50%; background: #17171a; color: var(--ambre); display: grid; place-items: center; font-size: 9px; font-weight: 900; flex-shrink: 0; }
.bxh3-step.pas .dot { background: rgba(23,23,26,.18); color: transparent; }
.bxh3-step.actif .dot { position: relative; }
.bxh3-step.actif .dot::after { content: ""; position: absolute; inset: -4.5px; border-radius: 50%; border: 2px solid rgba(23,23,26,.5); animation: bxh3Pulse 1.6s ease-out infinite; }
@keyframes bxh3Pulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.25); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .bxh3-step.actif .dot::after { animation: none; } }
.bxh3-step .lien { width: 2px; flex: 1; min-height: 12px; background: #17171a; opacity: .5; }
.bxh3-step.pas .lien { background: rgba(23,23,26,.18); opacity: 1; }
.bxh3-step:last-child .lien { display: none; }
.bxh3-step .txt { padding-bottom: 10px; font-size: 12.5px; color: rgba(23,23,26,.8); }
.bxh3-step .txt b { display: block; font-size: 13px; color: #17171a; }
.bxh3-colis .cta { margin-top: auto; align-self: flex-start; background: #17171a; color: #fff; font-weight: 800; font-size: 13px; padding: 11px 20px; border-radius: 11px; transition: transform .15s; }
.bxh3-colis .cta:hover { transform: translateY(-1px); }

.bxh3-urg { display: flex; flex-direction: column; gap: 8px; }
.bxh3-u { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--ligne); border-radius: 11px; padding: 9px 11px; font-size: 12.5px; transition: border-color .12s, background .12s; }
.bxh3-u:hover { border-color: var(--ambre); background: #fffdf7; }
.bxh3-u .p { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.bxh3-u.rouge .p { background: #ef4444; box-shadow: 0 0 0 3px #fee2e2; }
.bxh3-u.ambre .p { background: #f59e0b; box-shadow: 0 0 0 3px #fef3c7; }
.bxh3-u.jaune .p { background: #eab308; box-shadow: 0 0 0 3px #fef9c3; }
.bxh3-u > span { flex: 1; min-width: 0; }
.bxh3-u b { display: block; font-size: 12.5px; }
.bxh3-u small { color: var(--gris); font-size: 11px; }
.bxh3-u .go { background: var(--ambre); border-radius: 8px; font-size: 11.5px; font-weight: 800; padding: 7px 12px; white-space: nowrap; transition: background .12s; color: var(--encre); }
.bxh3-u .go:hover { background: var(--ambre-f); }
.bxh3-rien { font-size: 12.5px; color: var(--gris); line-height: 1.6; margin: 0; }
.bxh3-rien a { color: #b45309; font-weight: 800; }

.bxh3-fid .pts { display: flex; align-items: baseline; gap: 6px; margin-bottom: 8px; }
.bxh3-fid .pts b { font-family: "Century Gothic", Futura, sans-serif; font-size: 30px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bxh3-fid .pts span { font-size: 12px; color: var(--gris); }
.bxh3-jauge { height: 9px; border-radius: 999px; background: #f0f1f3; overflow: hidden; margin-bottom: 7px; }
.bxh3-jauge i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--ambre), #ffd479); transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
.bxh3-fid .vers { font-size: 11px; color: var(--gris); margin: 0 0 10px; }
.bxh3-fid .vers b { color: #b45309; }
.bxh3-fid .parr { border-top: 1px dashed var(--ligne); padding-top: 9px; font-size: 11.5px; color: var(--gris); margin: 0; }
.bxh3-fid .parr b { color: var(--encre); }

.bxh3-cmds { display: flex; flex-direction: column; }
.bxh3-c { display: flex; align-items: center; gap: 9px; padding: 7px 0; border-bottom: 1px dashed var(--ligne); font-size: 12.5px; }
.bxh3-c:last-child { border: none; }
.bxh3-c img { width: 32px; height: 32px; border-radius: 7px; object-fit: cover; flex-shrink: 0; }
.bxh3-c > span { flex: 1; min-width: 0; }
.bxh3-c b { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12.5px; }
.bxh3-c small { color: var(--gris); font-size: 11px; font-variant-numeric: tabular-nums; }
.bxh3-etat { font-style: normal; font-size: 10.5px; font-weight: 800; border-radius: 6px; padding: 3px 8px; white-space: nowrap; }
.bxh3-etat.prod { background: #fef3c7; color: #92400e; }
.bxh3-etat.ok { background: #e7f6ee; color: #147a43; }
.bxh3-etat.urg { background: #fee2e2; color: #b91c1c; }
.bxh3-c .re { border: 1.5px solid var(--ligne); border-radius: 7px; width: 27px; height: 27px; display: grid; place-items: center; flex-shrink: 0; transition: border-color .12s; }
.bxh3-c .re:hover { border-color: var(--ambre); }

.bxh3-dv { border: 1.5px solid var(--ligne); border-radius: 12px; padding: 11px 13px; margin-bottom: 9px; }
.bxh3-dv b { display: block; font-size: 12.5px; }
.bxh3-dv .mt { display: block; font-family: "Century Gothic", Futura, sans-serif; font-weight: 700; font-size: 19px; font-variant-numeric: tabular-nums; margin: 3px 0 9px; }
.bxh3-dv .mt small { font-size: 11px; color: var(--gris); font-weight: 400; }
.bxh3-dv .row { display: flex; gap: 7px; }
.bxh3-dv .row a { flex: 1; text-align: center; font-size: 11.5px; font-weight: 800; border-radius: 8px; padding: 7px; }
.bxh3-dv .row a.oui { background: var(--ambre); color: var(--encre); }
.bxh3-dv .row a.oui:hover { background: var(--ambre-f); }
.bxh3-devis .aucun { font-size: 11.5px; color: var(--gris); margin: 0; }
.bxh3-devis .aucun a { color: #b45309; font-weight: 800; }

/* Teaser visiteur */
.bxh3-vis { display: grid; grid-template-columns: 1.15fr 1fr; gap: 16px; align-items: stretch; position: relative; }
@media (max-width: 1000px) { .bxh3-vis { grid-template-columns: 1fr; } }
.bxh3-vis-g { display: flex; flex-direction: column; }
.bxh3-vis-p { color: #cfd3da; font-size: 15px; line-height: 1.6; max-width: 520px; margin: 0 0 16px; }
.bxh3-vis-p b { color: #fff; }
.bxh3-vis-benef { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 18px; }
@media (max-width: 640px) { .bxh3-vis-benef { grid-template-columns: 1fr; } }
.bxh3-vb { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: 13px; padding: 13px 15px; transition: border-color .15s, background .15s; }
.bxh3-vb:hover { border-color: rgba(252,175,59,.6); background: rgba(252,175,59,.1); }
.bxh3-vb b { display: block; color: #fff; font-size: 13.5px; margin-bottom: 3px; }
.bxh3-vb small { color: #9aa1ac; font-size: 11.5px; line-height: 1.45; }
.bxh3-vis-ctas { margin-top: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bxh3-vis-cta { background: var(--ambre); color: #17171a; font-weight: 800; font-size: 14.5px; padding: 13px 24px; border-radius: 12px; transition: background .15s, transform .15s; }
.bxh3-vis-cta:hover { background: var(--ambre-f); transform: translateY(-1px); }
.bxh3-vis-login { color: #cfd3da; font-size: 13px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.bxh3-vis-login:hover { color: var(--ambre); }
.bxh3-colis-demo { position: relative; grid-column: auto; grid-row: auto; }
.demo-badge { position: absolute; top: -9px; right: 14px; background: #17171a; color: var(--ambre); font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 5px 12px; letter-spacing: .04em; }

/* ── Sections vente ── */
.bxh3-sec { margin-bottom: 30px; }
.bxh3-h { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.bxh3-h h2 { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -.01em; margin: 0; }
.bxh3-h h2 .acc { color: #b45309; }
.bxh3-h > a { font-size: 13.5px; font-weight: 800; color: #b45309; }

.bxh3-best { display: grid; grid-template-columns: repeat(auto-fill, minmax(192px, 1fr)); gap: 12px; }
.bxh3-p { display: block; background: #fff; border: 1.5px solid var(--ligne); border-radius: 14px; overflow: hidden; transition: border-color .15s, transform .15s, box-shadow .15s; }
.bxh3-p:hover { border-color: var(--ambre); transform: translateY(-3px); box-shadow: 0 14px 32px rgba(23,23,26,.09); }
.bxh3-p img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.bxh3-p .in { display: block; padding: 10px 12px 12px; }
.bxh3-p .nm { display: block; font-weight: 700; font-size: 13px; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bxh3-p .px { display: block; font-size: 11.5px; color: var(--gris); font-variant-numeric: tabular-nums; }
.bxh3-p .px .bxh-price { color: var(--encre); font-weight: 700; font-size: 13px; }
.bxh3-p .liv { display: inline-block; font-style: normal; margin-top: 6px; font-size: 10px; font-weight: 800; color: var(--vert); background: #e7f6ee; border-radius: 6px; padding: 2px 7px; }

.bxh3-entrees { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 1000px) { .bxh3-entrees { grid-template-columns: 1fr; } }
.bxh3-e { position: relative; border-radius: 18px; overflow: hidden; min-height: 190px; display: flex; align-items: flex-end; padding: 18px; background: linear-gradient(120deg, #1f2937, #111827); transition: transform .2s, box-shadow .2s; }
.bxh3-e:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(23,23,26,.22); }
.bxh3-e .fond { position: absolute; inset: 0; opacity: .5; transition: opacity .2s; }
.bxh3-e:hover .fond { opacity: .75; }
.bxh3-e .filigrane { position: absolute; right: 10px; top: 10px; opacity: .85; transition: transform .25s; }
.bxh3-e:hover .filigrane { transform: scale(1.08) rotate(-3deg); }
.bxh3-e .tx { position: relative; z-index: 2; color: #fff; }
.bxh3-e small { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; color: var(--ambre); margin-bottom: 4px; }
.bxh3-e b { display: block; font-family: "Century Gothic", Futura, sans-serif; font-size: 19px; margin-bottom: 2px; }
.bxh3-e i { display: block; font-style: normal; font-size: 12.5px; color: rgba(255,255,255,.82); }

.bxh3-univ { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
@media (max-width: 1200px) { .bxh3-univ { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .bxh3-univ { grid-template-columns: repeat(2, 1fr); } }
.bxh3-u2 { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 1/1.05; display: flex; align-items: flex-end; padding: 12px; border: 1.5px solid var(--ligne); background: #1f2937; transition: transform .15s; }
.bxh3-u2:hover { transform: translateY(-3px); }
.bxh3-u2 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.bxh3-u2::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(23,23,26,.82)); }
.bxh3-u2 span { position: relative; z-index: 2; color: #fff; font-size: 13px; font-weight: 800; }

.bxh3-outils { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.bxh3-o { display: block; background: #fff; border: 1.5px solid var(--ligne); border-radius: 14px; padding: 16px; transition: border-color .15s, transform .15s; }
.bxh3-o:hover { border-color: var(--ambre); transform: translateY(-3px); }
.bxh3-o .pic { width: 36px; height: 36px; border-radius: 10px; background: #fff3dd; display: grid; place-items: center; margin-bottom: 10px; }
.bxh3-o b { display: block; font-family: "Century Gothic", Futura, sans-serif; font-size: 14px; margin-bottom: 3px; }
.bxh3-o i { display: block; font-style: normal; font-size: 12px; color: var(--gris); line-height: 1.45; }
.bxh3-o em { display: inline-block; font-style: normal; margin-top: 8px; font-size: 12px; color: #b45309; font-weight: 800; }

.bxh3-duo { display: grid; grid-template-columns: 1.25fr 1fr; gap: 14px; }
@media (max-width: 1000px) { .bxh3-duo { grid-template-columns: 1fr; } }
.bxh3-parr { background: linear-gradient(115deg, #fff8ec, #fff); border: 1.5px solid #f3dcb2; border-radius: 18px; padding: 22px; }
.bxh3-parr h2 { font-size: 20px; margin: 0 0 6px; }
.bxh3-parr p { font-size: 13.5px; color: var(--gris); margin: 0 0 14px; max-width: 460px; }
.bxh3-parr .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
.bxh3-parr .chips span { background: #fff; border: 1.5px solid #f3dcb2; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 700; }
.bxh3-parr .chips b { color: #b45309; }
.bxh3-parr .cta, .bxh3-comp .cta { display: inline-block; background: var(--ambre); color: #17171a; font-weight: 800; font-size: 13.5px; padding: 11px 20px; border-radius: 11px; transition: background .15s; }
.bxh3-parr .cta:hover, .bxh3-comp .cta:hover { background: var(--ambre-f); }
.bxh3-comp { background: var(--encre); color: #fff; border-radius: 18px; padding: 22px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.bxh3-comp::after { content: ""; position: absolute; right: -50px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle, rgba(252,175,59,.3), transparent 70%); }
.bxh3-comp h2 { font-size: 20px; margin: 0; }
.bxh3-comp p { font-size: 13px; color: #b9bcc2; max-width: 420px; margin: 0; }
.bxh3-comp .cta { position: relative; margin-top: auto; align-self: flex-start; }