/* ===================================================================================
MEETENNIS — HABILLAGE "MODERNE & DYNAMIQUE" DU CONTENU (v2)
-----------------------------------------------------------------------------------
Ce fichier est un complément à main.css : il ne touche PAS au header, ni au fond
(.box-wrapper), ni à la "boîte" blanche qui encadre tout le site
(.wrapper-body-inner / .custom-container). Il ne fait évoluer QUE le design de la
zone .body-content (tout ce qui suit le header) : raccourcis rapides, titres de
section, et grilles de vidéos / articles.
INSTALLATION
1. Placer ce fichier dans : assets/css/modern-content.css (remplace la v1)
2. Dans , juste APRES la ligne :
avoir :
NOUVEAUTES v2
- Correction du recadrage des images dans les grilles vidéos/articles (technique
"padding-top" + image en position absolute + !important) : fini les images
coupées en deux sur la 1ère ligne de chaque catégorie.
- Les 4 raccourcis du haut (Documents pédagogiques, Formations, Blog, Boutique)
ne sont plus présentés en grandes bannières-photo : ils forment désormais UNE
SEULE LIGNE de 4 "cartes raccourcis" compactes, avec un badge orange + icône.
PRINCIPE DE DESIGN
- Identité "ligne de court de tennis" : un petit angle orange (comme un coin de
carré de service) sert de repère visuel récurrent sur les titres de section et
apparaît au survol des cartes vidéos/articles.
- Cartes blanches arrondies, ombres douces, légère élévation + zoom au survol.
- Les animations d'entrée "wow fadeInUp" déjà présentes dans le HTML restent
actives (wow.js / animate.css déjà chargés) : aucune dépendance JS ajoutée.
SOMMAIRE
01. Variables & réglages globaux
02. Rythme général de .body-content
03. Titres de section "ligne de court"
04. Raccourcis rapides — une seule ligne, accent orange
05. Grilles de cartes vidéos / articles
06. Séparateurs décoratifs (brush.png)
07. Accessibilité & confort (focus, reduced motion)
08. Ajustements responsives
=================================================================================== */
/* ===================================================================================
01. VARIABLES & REGLAGES GLOBAUX
=================================================================================== */
:root {
--mt-orange: #e15e30; /* couleur de marque existante */
--mt-orange-light: #ff8a4c;
--mt-ball: #c6e26b; /* vert "balle de tennis" — accent secondaire, usage discret */
--mt-ink: #1c2128;
--mt-radius: 14px;
--mt-radius-sm: 12px;
--mt-shadow: 0 8px 24px rgba(28, 33, 40, 0.08);
--mt-shadow-hover: 0 18px 38px rgba(28, 33, 40, 0.16);
--mt-ease: cubic-bezier(0.22, 0.8, 0.32, 1);
}
html {
scroll-behavior: smooth;
}
/* ===================================================================================
02. RYTHME GENERAL DE .body-content
=================================================================================== */
.body-content .fashion-v3 {
padding-bottom: 10px;
}
.body-content section.blog-slider {
margin-bottom: 70px;
}
/* ===================================================================================
03. TITRES DE SECTION "LIGNE DE COURT"
([COACH 2 COACH], [ANECDOTES DE COACH], [FRANCOPHONIE], etc.)
=================================================================================== */
.body-content .blog-slider .section-title {
display: inline-flex;
align-items: center;
gap: 12px;
border-bottom: none;
font-size: 22px;
letter-spacing: 2px;
color: var(--mt-ink);
margin-bottom: 36px;
padding-bottom: 0;
}
/* le "coin de court" : repère visuel signature, réutilisé plus bas au survol */
.body-content .blog-slider .section-title::before {
content: '';
flex-shrink: 0;
width: 20px;
height: 20px;
border-left: 3px solid var(--mt-orange);
border-bottom: 3px solid var(--mt-orange);
border-radius: 0 0 0 5px;
}
/* petit trait dégradé qui prolonge le titre */
.body-content .blog-slider .section-title::after {
content: '';
width: 60px;
height: 2px;
margin-left: 8px;
background: linear-gradient(90deg, var(--mt-orange), transparent);
}
/* ===================================================================================
04. RACCOURCIS RAPIDES — une seule ligne, accent orange
(Documents pédagogiques / Formations / Blog / Boutique)
=================================================================================== */
/* Les 2 blocs .banner-2x d'origine deviennent "transparents" pour la mise en page :
leurs 4 enfants (col-md-7 / col-md-5) se retrouvent tous au même niveau, dans
une seule rangée flex définie sur le conteneur .container.banner-non-link. */
.body-content .container.banner-non-link {
display: flex;
flex-wrap: wrap;
gap: 16px;
margin: 20px 0 50px;
}
.body-content .banner-2x {
display: contents;
}
.body-content .banner-2x > [class*="col-"] {
flex: 1 1 240px;
width: auto;
max-width: none;
padding: 0;
}
/* carte raccourci */
.body-content .banner-2x .banner {
height: 100%;
position: static;
overflow: visible;
border-radius: var(--mt-radius-sm);
box-shadow: var(--mt-shadow);
transition: transform 0.35s var(--mt-ease), box-shadow 0.35s var(--mt-ease);
}
.body-content .banner-2x .banner:hover {
transform: translateY(-4px);
box-shadow: var(--mt-shadow-hover);
}
/* le lien doit occuper toute la carte pour que le clic fonctionne partout */
.body-content .banner-2x .banner > a {
display: block;
height: 100%;
}
.body-content .banner-2x .banner-2 {
position: static;
display: flex;
align-items: center;
gap: 16px;
height: 100%;
padding: 18px 20px;
background: #fff;
border: 1px solid #f0f0f0;
border-radius: var(--mt-radius-sm);
transition: background 0.35s ease, border-color 0.35s ease;
}
.body-content .banner-2x .banner:hover .banner-2 {
background: #fff6f0;
border-color: var(--mt-orange-light);
}
/* on masque la photo d'origine */
.body-content .banner-2x .banner-2 .image {
display: none;
}
/* badge orange + icône (icône différente selon la destination du lien) */
.body-content .banner-2x .banner-2::before {
content: '\f019'; /* fa-download — Documents pédagogiques */
font-family: 'FontAwesome';
flex-shrink: 0;
width: 46px;
height: 46px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
color: #fff;
background: linear-gradient(135deg, var(--mt-orange-light), var(--mt-orange));
}
.body-content .banner-2x a[href="formations.html"] .banner-2::before {
content: '\f19d'; /* fa-graduation-cap — Formations */
}
.body-content .banner-2x a[href="blog.html"] .banner-2::before {
content: '\f09e'; /* fa-rss — Blog */
}
.body-content .banner-2x a[href*="boutique"] .banner-2::before {
content: '\f07a'; /* fa-shopping-cart — Boutique */
}
/* texte : petite ligne d'accroche + titre */
.body-content .banner-2x .banner-2 .content {
position: static;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.body-content .banner-2x .banner-2 .content span {
font-size: 11px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--mt-orange);
text-shadow: none;
}
.body-content .banner-2x .banner-2 .content span:first-child {
font-size: 11px;
}
.body-content .banner-2x .banner-2 .content h2 {
margin: 0;
font-size: 17px;
font-weight: 800;
letter-spacing: 0.5px;
color: var(--mt-ink);
text-shadow: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===================================================================================
05. GRILLES DE CARTES VIDEOS / ARTICLES
Remplace l'empilement vertical des .item par une grille de cartes responsives.
=================================================================================== */
/* on neutralise les
utilisés comme espaceurs entre deux grilles d'une même
section, et on gère l'espacement proprement via margin-top */
.body-content .blog-slider-outer > br {
display: none;
}
.body-content .blog-slider-outer .blog-slider-content + .blog-slider-content {
margin-top: 22px;
}
.body-content .blog-slider-outer .blog-slider-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 22px;
}
.body-content .blog-slider-content .item {
margin: 0;
}
.body-content .blog-post {
height: 100%;
background: #fff;
border-radius: var(--mt-radius);
overflow: hidden;
box-shadow: var(--mt-shadow);
transition: transform 0.4s var(--mt-ease), box-shadow 0.4s var(--mt-ease);
}
.body-content .blog-post:hover {
transform: translateY(-8px);
box-shadow: var(--mt-shadow-hover);
}
/* ratio 16:9 garanti par la technique "padding-top", indépendante des dimensions
réelles des miniatures (corrige le recadrage / l'image coupée en deux). */
.body-content .blog-post .blog-post-image {
position: relative;
height: 0;
padding-top: 56.25%;
overflow: hidden;
}
/* le conteneur .image ET le lien remplissent tout le cadre 16:9 : c'est ce qui
garantit que toute l'image (et pas un point invisible) reste cliquable. */
.body-content .blog-post .blog-post-image .image,
.body-content .blog-post .blog-post-image .image a {
position: absolute;
inset: 0;
display: block;
}
.body-content .blog-post .blog-post-image img {
width: 100% !important;
height: 100% !important;
max-width: none !important;
display: block;
object-fit: cover;
object-position: center;
transition: transform 0.7s var(--mt-ease);
}
.body-content .blog-post:hover .blog-post-image img {
transform: scale(1.08);
}
/* voile dégradé au survol, pour faire ressortir le repère "coin de court" */
.body-content .blog-post .blog-post-image::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(20, 20, 28, 0) 55%, rgba(20, 20, 28, 0.6) 100%);
opacity: 0;
pointer-events: none; /* laisse passer le clic vers le lien situé en dessous */
transition: opacity 0.4s ease;
}
.body-content .blog-post:hover .blog-post-image::before {
opacity: 1;
}
/* repère "coin de court" — même signature que les titres de section */
.body-content .blog-post .blog-post-image::after {
content: '';
position: absolute;
inset: 10px;
z-index: 2;
width: 26px;
height: 26px;
border-left: 2px solid var(--mt-orange-light);
border-bottom: 2px solid var(--mt-orange-light);
border-radius: 0 0 0 6px;
opacity: 0;
pointer-events: none; /* idem : purement décoratif */
transform: translate(-6px, 6px);
transition: opacity 0.35s ease, transform 0.35s var(--mt-ease);
}
.body-content .blog-post:hover .blog-post-image::after {
opacity: 1;
transform: translate(0, 0);
}
/* ===================================================================================
06. SEPARATEURS DECORATIFS (brush.png)
On les garde, mais en version discrète pour ne pas casser le rythme des cartes.
=================================================================================== */
.body-content .fashion-v3 > center {
margin: 8px 0 6px;
}
.body-content .fashion-v3 > center img {
max-width: 220px;
opacity: 0.25;
filter: grayscale(1);
}
/* ===================================================================================
07. ACCESSIBILITE & CONFORT
=================================================================================== */
.body-content a:focus-visible {
outline: 3px solid var(--mt-orange-light);
outline-offset: 2px;
border-radius: 4px;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.body-content * {
transition: none !important;
animation: none !important;
}
}
/* ===================================================================================
08. AJUSTEMENTS RESPONSIVES
=================================================================================== */
@media (max-width: 575px) {
.body-content .blog-slider .section-title {
font-size: 18px;
letter-spacing: 1px;
}
.body-content .container.banner-non-link {
gap: 12px;
}
.body-content .banner-2x > [class*="col-"] {
flex: 1 1 100%;
}
.body-content .blog-slider-outer .blog-slider-content {
grid-template-columns: 1fr;
}
}