serge/site-mva-global-fret
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Service Commande: stack transport card on mobile (button no longer cropped)

Browse Source 
Avant : flex row figé même sur mobile → l'icône 60px écrasait la colonne
texte → le bouton 'Voir nos tarifs détaillés' wrappait sur 2 lignes
avec un cadre asymétrique.

Maintenant : sous 600px de large, le layout passe en colonne (icône
au-dessus, contenu centré). Bouton avec white-space: nowrap pour rester
sur 1 ligne. Sur desktop (>=600px), le layout reste en row classique.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MVA Global Fret 2026-05-05 22:07:51 +02:00
parent e58e3d674d
commit 8ba9fc9161
2 changed files with 65 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
css/style.css
View File

@ -735,6 +735,64 @@ p {
} }
} }
/* --- Transport card (page Service Commande) --- */
.transport-card {
max-width: 720px;
margin: 0 auto;
background: var(--white);
border-radius: 16px;
padding: var(--space-xl);
box-shadow: 0 10px 30px rgba(26, 26, 62, 0.08);
}
.transport-card-row {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--space-md);
}
.transport-card-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
border-radius: 14px;
background: linear-gradient(135deg, var(--navy), #2a2a5e);
display: flex;
align-items: center;
justify-content: center;
color: var(--gold);
font-size: 1.5rem;
}
.transport-card-body h3 {
color: var(--navy);
margin-bottom: var(--space-sm);
}
.transport-card-body p {
color: var(--text-light);
margin: 0 0 var(--space-md);
}
.transport-card-cta {
display: inline-flex;
white-space: nowrap;
}
@media (min-width: 600px) {
.transport-card-row {
flex-direction: row;
align-items: flex-start;
text-align: left;
gap: var(--space-lg);
}
.transport-card-cta {
margin-top: var(--space-sm);
}
}
/* --- About section preview --- */ /* --- About section preview --- */
.about-preview { .about-preview {
display: grid; display: grid;

14
service-commande.html
View File

@ -160,15 +160,15 @@
<div class="gold-line"></div> <div class="gold-line"></div>
</div> </div>
<div class="animate-on-scroll" style="max-width: 720px; margin: 0 auto; background: var(--white); border-radius: 16px; padding: 32px; box-shadow: 0 10px 30px rgba(26,26,62,0.08);"> <div class="animate-on-scroll transport-card">
<div style="display:flex; gap: 20px; align-items: flex-start;"> <div class="transport-card-row">
<div style="flex-shrink: 0; width: 60px; height: 60px; border-radius: 14px; background: linear-gradient(135deg, var(--navy), #2a2a5e); display:flex; align-items:center; justify-content:center; color: var(--gold); font-size: 1.5rem;"> <div class="transport-card-icon">
<i class="fa-solid fa-plane"></i> <i class="fa-solid fa-plane"></i>
</div> </div>
<div> <div class="transport-card-body">
<h3 style="color: var(--navy); margin-bottom: 12px;" data-i18n="serviceCommande.transportCardTitle">70 000 Ar par kilo</h3> <h3 data-i18n="serviceCommande.transportCardTitle">70 000 Ar par kilo</h3>
<p style="color: var(--text-light);" data-i18n="serviceCommande.transportCardDesc">Une fois le colis arrivé à Madagascar, vous payez le transport au tarif standard de fret aérien : 70 000 Ar par kilo, à régler à la réception après contre-pesée. Comme pour tous nos envois.</p> <p data-i18n="serviceCommande.transportCardDesc">Une fois le colis arrivé à Madagascar, vous payez le transport au tarif standard de fret aérien : 70 000 Ar par kilo, à régler à la réception après contre-pesée. Comme pour tous nos envois.</p>
<a href="tarifs.html" class="btn btn-secondary" style="margin-top: 16px;" data-i18n="serviceCommande.transportCardCta">Voir nos tarifs détaillés</a> <a href="tarifs.html" class="btn btn-secondary transport-card-cta" data-i18n="serviceCommande.transportCardCta">Voir nos tarifs détaillés</a>
</div> </div>
</div> </div>
</div> </div>