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

Contact: center the price reminder block below the 2-column grid

Browse Source 
Avant : le bloc 'Rappel tarifaire' était collé en bas de la colonne droite,
créant un déséquilibre visuel avec le formulaire plus court à gauche.

Maintenant : sorti de la grille, centré avec max-width 720px sous les
deux colonnes, en grille 2 colonnes sur ses items pour une lecture
plus dense et équilibrée.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
MVA Global Fret 2026-05-05 21:57:39 +02:00
parent a8bf913e68
commit baa71149b2
2 changed files with 64 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
contact.html
View File

@ -211,23 +211,23 @@
</div>
</div>
</div>
<!-- Info tarifs rapide -->
<div style="margin-top: 24px; background: var(--light-gray); border-radius: 12px; padding: 20px; border-left: 4px solid var(--gold);">
<h4 style="margin-bottom: 12px; display:flex; align-items:center; gap:8px;">
<i class="fa-solid fa-tag" style="color: var(--gold);"></i> <span data-i18n="contact.priceReminder">Rappel tarifaire</span>
</h4>
<ul style="list-style: none; padding: 0; font-size: 0.9rem; color: var(--text-light);">
<li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail1">70 000 Ar / kg</span></li>
<li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail2">Paiement à la réception</span></li>
<li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail3">2 envois / semaine</span></li>
<li style="padding: 4px 0;"><i class="fa-solid fa-check" style="color: var(--green); margin-right: 8px;"></i><span data-i18n="contact.priceDetail4">Livraison en 2 semaines à compter du dépôt à Paris</span></li>
</ul>
</div>
</div>
</div>
<!-- Info tarifs rapide — bloc centré pleine largeur -->
<div class="price-reminder animate-on-scroll">
<h4>
<i class="fa-solid fa-tag" style="color: var(--gold);"></i> <span data-i18n="contact.priceReminder">Rappel tarifaire</span>
</h4>
<ul>
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail1">70 000 Ar / kg</span></li>
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail2">Paiement à la réception</span></li>
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail3">2 envois / semaine</span></li>
<li><i class="fa-solid fa-check"></i><span data-i18n="contact.priceDetail4">Livraison en 2 semaines à compter du dépôt à Paris</span></li>
</ul>
</div>
<!-- CARTE -->
<div class="map-section animate-on-scroll">
<div class="section-header">

51
css/style.css
View File

@ -680,6 +680,57 @@ p {
.step-card { z-index: 1; }
}
/* --- Rappel tarifaire (page Contact, bloc centré) --- */
.price-reminder {
max-width: 720px;
margin: var(--space-xxl) auto 0;
background: var(--light-gray);
border-radius: var(--radius-md);
padding: var(--space-lg) var(--space-xl);
border-left: 4px solid var(--gold);
box-shadow: 0 4px 16px rgba(26, 26, 62, 0.05);
}
.price-reminder h4 {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
margin-bottom: var(--space-md);
color: var(--navy);
font-size: 1.15rem;
}
.price-reminder ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
font-size: 0.95rem;
color: var(--text-light);
}
.price-reminder ul li {
display: flex;
align-items: center;
gap: 10px;
padding: 4px 0;
}
.price-reminder ul li i {
color: var(--green);
flex-shrink: 0;
}
@media (min-width: 600px) {
.price-reminder ul {
grid-template-columns: 1fr 1fr;
column-gap: var(--space-xl);
}
}
/* --- About section preview --- */
.about-preview {
display: grid;