/* ========================================
STYLE DU TEXTE DES ARTICLES (LISIBILITÉ MAXIMALE)
======================================== */
/* 1. Le corps de texte standard (Gris foncé, confortable) */
.newsx-post-content p,
.newsx-post-content li {
font-size: 16px; /* Un tout petit peu plus grand que 16px */
line-height: 1.5; /* Espace entre les lignes pour aérer */
color: #3c3c3c; /* Gris anthracite (pas noir total) pour la douceur */
margin-bottom: 13px; /* Bel espace sous chaque paragraphe */
}
/* 2. Le GRAS (Noir pur et épais) */
.newsx-post-content strong,
.newsx-post-content b {
font-weight: 800 !important; /* 800 = Très gras (plus que le standard 700) */
color: #000000 !important; /* Noir PUR pour créer le contraste avec le gris */
}
/* 3. Les listes à puces (pour qu'elles soient alignées avec le texte) */
.newsx-post-content ul,
.newsx-post-content ol {
margin-bottom: 20px;
padding-left: 20px;
}
/* ========================================
STYLE DES TITRES DANS LES ARTICLES (H2, H3)
======================================== */
.newsx-post-content h2,
.newsx-post-content h3,
.newsx-post-content h4 {
color: #000000 !important; /* Noir pur pour s'aligner avec le gras du texte */
font-weight: 700 !important; /* Bien gras */
margin-top: 1.5em !important;/* Espace au-dessus pour bien séparer du paragraphe précédent */
margin-bottom: 0.6em !important; /* Petit espace en dessous */
line-height: 1.3 !important;
}
/* ========================================
STYLE DU CHAPO (Version Épurée & Fluide)
======================================== */
.is-style-chapo {
background: #f5f5f5;
/* On enlève tout ce qui surchargeait */
border-top: none !important;
box-shadow: none !important;
padding: 1.5em 2em;
margin: 2em 0;
border-radius: 4px;
/* Typo générale du chapo */
font-size: 18px !important;
line-height: 1.6;
color: #2c3e50;
}
/* LE SURTITRE ORANGE */
.is-style-chapo strong {
display: inline; /* MAGIQUE : Garde le titre sur la même ligne */
color: #ff6901 !important; /* Orange */
font-weight: 800; /* Très gras */
text-transform: uppercase; /* Majuscules */
letter-spacing: 0.5px;
}
/* LE TIRET AUTOMATIQUE */
/* Ajoute un tiret noir après le texte orange */
.is-style-chapo strong::after {
content: " – ";
color: #2c3e50; /* Couleur du texte normal */
font-weight: normal;
}
/* Style pour les intertitres */
.is-style-intertitre {
font-size: 18px !important;
font-weight: bolder !important;
color: black !important;
margin: 0.5em 0 1.5em 0;
padding: 0.6em 0 0.6em 1.5em;
background: #f8f9fa;
border-left: 6px solid #00863c;
border-radius: 0 4px 4px 0;
}
/* ========================================
ENCADRÉS PERSONNALISÉS
======================================== */
/* Citation encadrée */
.is-style-citation-encadree {
border-left: 5px solid #3498db;
background: linear-gradient(to right, #f8f9fa 0%, #ffffff 100%);
padding: 25px 30px;
margin: 2em 0;
font-style: italic;
border-radius: 0 8px 8px 0;
}
.is-style-citation-encadree p {
margin: 0;
font-size: 1.1em;
color: #2c3e50;
}
/* Encadré Info (sur bloc Groupe) */
.is-style-encadre-info {
background: #e3f2fd;
border-left: 5px solid #2196f3;
padding: 20px 25px;
margin: 2em 0;
border-radius: 0 8px 8px 0;
position: relative;
}
.is-style-encadre-info::before {
content: "ℹ️ Info"; /* J'ai ajouté un emoji, optionnel */
display: block;
font-weight: 700;
color: #1976d2;
margin-bottom: 15px;
font-size: 0.95em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Styles pour le contenu à l'intérieur */
.is-style-encadre-info > * {
margin-top: 0;
}
.is-style-encadre-info > *:last-child {
margin-bottom: 0;
}
/* Titres dans l'encadré */
.is-style-encadre-info h3,
.is-style-encadre-info h4 {
color: #1976d2;
font-size: 1.1em;
margin-top: 0;
margin-bottom: 10px;
}
/* Paragraphes dans l'encadré */
.is-style-encadre-info p {
margin: 10px 0;
line-height: 1.7;
color: #2c3e50;
}
/* Listes dans l'encadré */
.is-style-encadre-info ul,
.is-style-encadre-info ol {
margin: 15px 0;
padding-left: 25px;
}
.is-style-encadre-info li {
margin-bottom: 8px;
line-height: 1.6;
}
/* Liens dans l'encadré */
.is-style-encadre-info a {
color: #1976d2;
font-weight: 600;
text-decoration: underline;
}
.is-style-encadre-info a:hover {
color: #0d47a1;
}
/* Encadré Attention */
.is-style-encadre-attention {
background: #fff3e0;
border-left: 5px solid #ff9800;
padding: 20px 25px;
margin: 2em 0;
border-radius: 0 8px 8px 0;
position: relative;
}
.is-style-encadre-attention::before {
content: "⚠️ Attention";
display: block;
font-weight: 700;
color: #f57c00;
margin-bottom: 15px;
font-size: 0.95em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.is-style-encadre-attention > * {
margin-top: 0;
}
.is-style-encadre-attention > *:last-child {
margin-bottom: 0;
}
.is-style-encadre-attention h3,
.is-style-encadre-attention h4 {
color: #f57c00;
font-size: 1.1em;
margin-top: 0;
margin-bottom: 10px;
}
.is-style-encadre-attention p {
margin: 10px 0;
line-height: 1.7;
color: #2c3e50;
}
.is-style-encadre-attention ul,
.is-style-encadre-attention ol {
margin: 15px 0;
padding-left: 25px;
}
.is-style-encadre-attention li {
margin-bottom: 8px;
line-height: 1.6;
}
.is-style-encadre-attention a {
color: #f57c00;
font-weight: 600;
text-decoration: underline;
}
.is-style-encadre-attention a:hover {
color: #e65100;
}
/* Encadré À retenir */
.is-style-encadre-retenir {
background: #e8f5e9;
border-left: 5px solid #4caf50;
padding: 20px 25px;
margin: 2em 0;
border-radius: 0 8px 8px 0;
position: relative;
}
.is-style-encadre-retenir::before {
content: "✓ À retenir";
display: block;
font-weight: 700;
color: #388e3c;
margin-bottom: 15px;
font-size: 0.95em;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.is-style-encadre-retenir > * {
margin-top: 0;
}
.is-style-encadre-retenir > *:last-child {
margin-bottom: 0;
}
.is-style-encadre-retenir h3,
.is-style-encadre-retenir h4 {
color: #388e3c;
font-size: 1.1em;
margin-top: 0;
margin-bottom: 10px;
}
.is-style-encadre-retenir p {
margin: 10px 0;
line-height: 1.7;
color: #2c3e50;
}
.is-style-encadre-retenir ul,
.is-style-encadre-retenir ol {
margin: 15px 0;
padding-left: 25px;
}
.is-style-encadre-retenir li {
margin-bottom: 8px;
line-height: 1.6;
}
.is-style-encadre-retenir a {
color: #388e3c;
font-weight: 600;
text-decoration: underline;
}
.is-style-encadre-retenir a:hover {
color: #1b5e20;
}
/* ========================================
RESPONSIVE pour les encadrés
======================================== */
@media (max-width: 768px) {
.is-style-encadre-info,
.is-style-encadre-attention,
.is-style-encadre-retenir {
padding: 15px 20px;
}
.is-style-encadre-info::before,
.is-style-encadre-attention::before,
.is-style-encadre-retenir::before {
font-size: 0.9em;
}
}
/* ========================================
ENCADRÉ NOTES DE FIN D'ARTICLE (Final complet)
======================================== */
/* Version Ordinateur */
p.is-style-notes-fin {
/* 1. Texte */
font-style: italic !important; /* Force l'italique */
font-size: 1.1em !important; /* Plus petit que le texte normal */
line-height: 1.6 !important;
color: #666666 !important; /* Gris moyen */
/* 2. Style de la boîte */
background: transparent;
border-top: 1px solid #ddd;
padding-top: 20px;
margin-top: 3em !important; /* Espacement haut */
margin-bottom: 2em !important; /* Espacement bas */
}
/* Le petit titre "NOTES" */
p.is-style-notes-fin::before {
content: "Notes";
display: block;
font-style: normal !important; /* Le titre reste droit, pas italique */
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
color: #999;
margin-bottom: 8px;
}
/* Les liens à l'intérieur */
p.is-style-notes-fin a {
color: #666 !important;
text-decoration: underline;
}
p.is-style-notes-fin a:hover {
color: #2d7a4f !important; /* Votre vert au survol */
}
/* Version Mobile (Smartphone) */
@media (max-width: 768px) {
p.is-style-notes-fin {
font-size: 0.8em !important; /* Encore un peu plus petit sur mobile */
margin-top: 2em !important; /* On réduit la marge du haut */
padding-top: 15px;
}
}
/* ========================================
LETTRINE
======================================== */
/* Le paragraphe */
p.is-style-lettrine {
overflow: hidden;
}
/* La première lettre uniquement */
p.is-style-lettrine::first-letter {
font-size: 3.5em;
font-weight: 700;
color: #00863c;
float: left;
line-height: 0.8;
margin-right: 0.1em;
margin-top: 0.1em;
font-family: Georgia, serif;
}
/* ========================================
INTERVIEW - STYLE PRESSE V3 (site public)
Presse agricole - tons verts
======================================== */
.is-style-interview-question {
margin: 2em 0 0.5em 0;
padding: 0.5em 0 0.5em 1.2em;
border-left: 5px solid #e67e22;
background: linear-gradient(90deg, rgba(230, 126, 34, 0.08) 0%, transparent 100%);
font-weight: 900 !important;
color: #1a1a1a;
}
.is-style-interview-reponse {
margin: 0 0 2em 0;
padding: 0.5em 0 0.5em 1.2em;
border-left: 5px solid #27ae60;
background: linear-gradient(90deg, rgba(39, 174, 96, 0.05) 0%, transparent 100%);
font-weight: 400;
color: #333;
line-height: 1.8;
}
/* ========================================
PAGE COMPTE - NAVIGATION "CAPSULE" (Correction Espacement)
======================================== */
.pms-account-navigation {
display: block !important; /* On remet en block pour éviter les conflits flex bizarres */
text-align: left !important; /* Alignement à GAUCHE */
margin-bottom: 40px;
padding: 0;
list-style: none !important;
border-bottom: 1px solid #eee;
padding-bottom: 25px;
font-size: 0 !important; /* Astuce pour supprimer les espaces fantômes */
}
/* --- Forcer l'espace sur l'élément de liste --- */
.pms-account-navigation li {
display: inline-block !important; /* Aligner les puces */
margin-right: 20px !important; /* MARGE FORCÉE À DROITE DE CHAQUE BOUTON */
margin-bottom: 15px !important; /* Espace en dessous pour le mobile */
float: none !important; /* Désactive les 'float' qui collent tout */
padding: 0 !important;
border: none !important; /* Enlève les bordures parasites du conteneur li */
}
/* Enlever la marge du tout dernier bouton pour pas décaler */
.pms-account-navigation li:last-child {
margin-right: 0 !important;
}
/* --- STYLE DES BOUTONS (INACTIFS) --- */
.pms-account-navigation a {
display: inline-block !important;
padding: 12px 25px !important;
background-color: #ffffff !important;
color: #555 !important; /* Gris plus foncé pour être lisible */
text-decoration: none !important;
font-family: 'Roboto', sans-serif !important;
font-weight: 700 !important; /* Gras pour bien voir le texte */
font-size: 13px !important;
text-transform: uppercase !important;
border-radius: 50px !important;
/* Bordure grise visible pour bien délimiter la pilule */
border: 1px solid #d1d5db !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.05);
transition: all 0.2s ease-in-out !important;
line-height: 1.5 !important; /* Hauteur de ligne standard */
}
/* --- ETAT SURVOL (HOVER) --- */
.pms-account-navigation a:hover {
background-color: #f0fdf4 !important;
color: #2d7a4f !important;
border-color: #2d7a4f !important;
transform: translateY(-2px);
}
/* --- ETAT ACTIF (ONGLET VERT) --- */
.pms-account-navigation .pms-active a,
.pms-account-navigation a.active,
.pms-account-navigation a[aria-current="page"] {
background-color: #2d7a4f !important;
color: white !important;
border-color: #2d7a4f !important;
box-shadow: 0 4px 12px rgba(45, 122, 79, 0.25) !important;
transform: translateY(0);
}
/* ========================================
MOBILE
======================================== */
@media (max-width: 768px) {
.pms-account-navigation li {
display: block !important; /* Un bouton par ligne sur mobile */
margin-right: 0 !important; /* Pas de marge à droite sur mobile */
width: 100%;
}
.pms-account-navigation a {
display: block !important;
text-align: center;
width: 100%;
border-radius: 12px !important; /* Moins rond sur mobile */
}
}
/* ========================================
DESIGN FORMULAIRE PROFIL (VERSION FLAT & GAUCHE)
======================================== */
/* 1. Le conteneur principal */
#pms_edit-profile-form {
background-color: #ffffff;
padding: 40px;
border-radius: 16px;
/* MODIF : Pas d'ombre et aligné à gauche */
box-shadow: none !important;
margin: 0 !important;
border: 1px solid #e5e7eb; /* Bordure fine grise pour délimiter */
max-width: 800px; /* Largeur max pour la lisibilité */
width: 100%;
}
/* 2. La mise en page (GRID) */
ul.pms-form-fields-wrapper {
display: grid !important;
grid-template-columns: 1fr 1fr; /* 2 colonnes */
gap: 20px; /* Espace entre les éléments */
padding: 0;
margin: 0;
list-style: none;
}
/* Par défaut, un champ prend TOUTE la largeur (2 colonnes) */
.pms-field {
grid-column: span 2;
margin: 0 !important;
}
/* EXCEPTIONS : Prénom/Nom et Mots de passe sur une seule colonne */
.pms-first-name-field,
.pms-last-name-field,
.pms-pass1-field,
.pms-pass2-field {
grid-column: span 1;
}
/* 3. Les Libellés (Labels) */
.pms-form label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: #374151; /* Gris foncé */
font-family: 'Roboto', sans-serif;
}
/* 4. Les Champs de saisie (Inputs) */
.pms-form input[type="text"],
.pms-form input[type="email"],
.pms-form input[type="password"] {
width: 100%;
padding: 12px 16px;
background-color: #f9fafb; /* Fond gris très pâle */
border: 1px solid #d1d5db;
border-radius: 8px;
font-size: 15px;
color: #1f2937;
transition: all 0.2s ease;
box-sizing: border-box;
height: auto; /* Sécurité */
}
/* Focus : Quand on clique dedans */
.pms-form input:focus {
background-color: #ffffff;
border-color: #2d7a4f; /* Bordure verte au clic */
outline: none;
}
/* Champs désactivés (ex: identifiant) */
.pms-form input[disabled] {
background-color: #f3f4f6;
color: #9ca3af;
cursor: not-allowed;
border-color: #e5e7eb;
}
/* 5. Le Bouton "Modifier le profil" */
.pms-form-fields-wrapper li:last-child {
grid-column: span 2;
text-align: left !important; /* Alignement du bouton à GAUCHE */
margin-top: 20px !important;
padding-top: 20px;
border-top: 1px solid #f3f4f6; /* Petite ligne de séparation avant le bouton */
}
input[name="pms_edit_profile"] {
background-color: #2d7a4f !important; /* Ton vert */
color: white !important;
padding: 12px 35px !important;
border: none !important;
border-radius: 50px !important; /* Forme capsule */
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px;
cursor: pointer;
transition: background-color 0.2s;
}
input[name="pms_edit_profile"]:hover {
background-color: #246340 !important;
}
/* ========================================
VERSION MOBILE (Responsive)
======================================== */
@media (max-width: 768px) {
#pms_edit-profile-form {
padding: 20px;
border: none; /* Plus de bordure sur très petit écran pour gagner de la place */
}
ul.pms-form-fields-wrapper {
grid-template-columns: 1fr; /* Tout sur une colonne */
}
.pms-first-name-field,
.pms-last-name-field,
.pms-pass1-field,
.pms-pass2-field {
grid-column: span 1;
}
input[name="pms_edit_profile"] {
width: 100%; /* Bouton pleine largeur sur mobile */
}
}
/* ========================================
DESIGN TABLEAU ABONNEMENT (STYLE FLAT & CLEAN)
======================================== */
/* 1. Le conteneur du tableau */
table.pms-account-subscription-details-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px;
margin-bottom: 20px;
overflow: hidden;
}
/* 2. Les cellules */
table.pms-account-subscription-details-table td {
padding: 18px 25px;
border-bottom: 1px solid #f3f4f6;
vertical-align: middle;
font-size: 15px;
color: #1f2937;
}
/* Enlever la ligne du bas pour le dernier élément */
table.pms-account-subscription-details-table tr:last-child td {
border-bottom: none;
}
/* 3. La colonne de gauche (Labels) */
table.pms-account-subscription-details-table td:first-child {
width: 35%;
font-weight: 600;
color: #6b7280;
background-color: #fafafa;
border-right: 1px solid #f3f4f6;
}
/* 4. Le Badge de Statut "ACTIF" */
td.status-active {
color: #166534 !important;
font-weight: 700;
}
td.status-active::before {
content: '●';
margin-right: 6px;
color: #22c55e;
}
/* 5. Les Boutons d'actions (CORRIGÉ : SANS SOULIGNEMENT) */
.pms-account-subscription-action-link {
display: inline-block;
/* MODIFICATION ICI : On force la suppression du soulignement */
text-decoration: none !important;
border: none !important;
box-shadow: none !important;
font-size: 13px;
font-weight: 600;
padding: 6px 12px;
border-radius: 6px;
margin-right: 8px;
transition: all 0.2s ease;
background-color: #f3f4f6;
color: #374151 !important; /* Force la couleur gris foncé */
}
.pms-account-subscription-action-link:hover {
background-color: #e5e7eb;
color: #000 !important;
}
/* Style spécifique pour "Annuler" et "Abandon" (Rouge) */
.pms-account-subscription-action-link__cancel,
.pms-account-subscription-action-link__abandon {
background-color: #fee2e2;
color: #991b1b !important;
}
.pms-account-subscription-action-link__cancel:hover,
.pms-account-subscription-action-link__abandon:hover {
background-color: #fecaca;
}
/* Responsive mobile pour le tableau de détails */
@media (max-width: 600px) {
/* On transforme la ligne (TR) en conteneur flexible */
tr.pms-account-subscription-details-table__plan,
table.pms-account-subscription-details-table tr {
display: flex;
flex-direction: column;
border: 1px solid #e5e7eb;
border-radius: 8px;
margin-bottom: 12px; /* Espace entre chaque bloc d'info */
padding: 10px;
background: #fff;
}
/* On nettoie les cellules (TD) */
table.pms-account-subscription-details-table td {
display: block;
width: 100%;
padding: 2px 0; /* Réduit l'espace vertical interne */
border: none !important; /* SUPPRIME TOUTES LES BORDURES INTERNES */
}
/* Le premier TD (Le Label : ex "Date de début") */
table.pms-account-subscription-details-table td:first-child {
color: #9ca3af;
font-size: 11px;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 2px;
}
/* Le deuxième TD (La Valeur : ex "26/12/2025") */
table.pms-account-subscription-details-table td:last-child {
color: #1f2937;
font-size: 15px;
font-weight: 500;
}
}
/* ========================================
HISTORIQUE DES PAIEMENTS (STYLE FLAT)
======================================== */
/* 1. Le Conteneur du tableau */
#pms-payment-history {
width: 100%;
border-collapse: separate; /* Important pour les arrondis */
border-spacing: 0;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 16px; /* Coins arrondis comme l'autre */
margin-bottom: 20px;
overflow: hidden;
}
/* 2. L'En-tête (Titres des colonnes) */
#pms-payment-history thead th {
background-color: #f9fafb; /* Gris très léger */
color: #6b7280;
font-weight: 600;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
padding: 15px 20px;
border-bottom: 1px solid #e5e7eb;
text-align: left;
}
/* 3. Les Lignes de données */
#pms-payment-history tbody td {
padding: 18px 20px;
border-bottom: 1px solid #f3f4f6;
color: #1f2937;
font-size: 14px;
vertical-align: middle;
}
/* Enlever la bordure du bas de la dernière ligne */
#pms-payment-history tbody tr:last-child td {
border-bottom: none;
}
/* 4. Colonnes Spécifiques (ID et Montant) */
td.pms-payment-id {
color: #9ca3af; /* ID en gris discret */
font-family: monospace; /* Police style code */
}
td.pms-payment-amount {
font-weight: 700; /* Montant en gras */
color: #111827;
}
/* 5. Statut "Terminé" (Style Badge Vert) */
td.pms-payment-status.status-completed {
color: #166534; /* Vert foncé */
font-weight: 600;
}
/* La petite puce verte avant le texte */
td.pms-payment-status.status-completed::before {
content: '●';
color: #22c55e; /* Vert vif */
margin-right: 6px;
font-size: 10px;
vertical-align: middle;
}
/* ========================================
VERSION MOBILE CORRIGÉE (Mode Liste compacte)
======================================== */
@media (max-width: 768px) {
/* On cache l'en-tête */
#pms-payment-history thead {
display: none;
}
/* Le tableau prend toute la largeur */
#pms-payment-history {
border: none;
background: transparent;
}
/* Chaque ligne de paiement devient une carte blanche */
#pms-payment-history tbody tr {
display: block;
background-color: #ffffff;
border: 1px solid #e5e7eb;
border-radius: 12px;
margin-bottom: 15px;
padding: 15px;
box-shadow: 0 2px 4px rgba(0,0,0,0.02); /* Ombre très légère */
}
/* Chaque cellule devient une ligne flexible */
#pms-payment-history tbody td {
display: flex;
justify-content: space-between; /* Label à gauche, Valeur à droite */
align-items: center;
padding: 8px 0; /* Un peu d'espace entre les lignes */
border-bottom: 1px dashed #f3f4f6; /* Séparation discrète */
text-align: right;
width: 100%;
box-sizing: border-box;
}
/* Enlever la bordure de la dernière ligne dans la carte */
#pms-payment-history tbody td:last-child {
border-bottom: none;
}
/* --- CORRECTION DU GROS BLOC VERT --- */
/* On force le fond transparent sur la cellule mobile pour éviter la barre verte */
#pms-payment-history tbody td.pms-payment-status {
background-color: transparent !important;
padding: 8px 0 !important;
}
/* On garde le texte vert, mais sans le fond massif */
#pms-payment-history tbody td.pms-payment-status.status-completed {
color: #166534;
font-weight: 700;
background: transparent;
}
/* Optionnel : Si tu veux un petit fond vert juste autour du texte "Terminé" (badge) */
/* Décommente les lignes ci-dessous si tu préfères un style "badge" */
/*
#pms-payment-history tbody td.pms-payment-status.status-completed {
background-color: #dcfce7 !important;
padding: 4px 10px !important;
border-radius: 20px;
flex: 0 0 auto;
margin-left: auto;
}
*/
/* --- LES LABELS (ID, Plan, etc.) --- */
td.pms-payment-id::before { content: "ID"; font-weight: 600; color: #9ca3af; font-size: 11px; text-transform: uppercase; }
td.pms-payment-subscription-plan::before { content: "Plan"; font-weight: 600; color: #9ca3af; font-size: 11px; text-transform: uppercase; margin-right: 15px;}
td.pms-payment-amount::before { content: "Montant"; font-weight: 600; color: #9ca3af; font-size: 11px; text-transform: uppercase; }
td.pms-payment-date::before { content: "Date"; font-weight: 600; color: #9ca3af; font-size: 11px; text-transform: uppercase; }
td.pms-payment-status::before { content: "Statut"; font-weight: 600; color: #9ca3af; font-size: 11px; text-transform: uppercase; }
/* Cas particulier pour le PLAN qui peut être long : on autorise le retour à la ligne du texte à droite */
td.pms-payment-subscription-plan {
align-items: flex-start; /* Aligner en haut si le texte fait 2 lignes */
}
/* Le texte du plan prend max 60% de la largeur pour laisser de la place au label */
td.pms-payment-subscription-plan {
text-align: right;
}
}
/* ========================================
PAGE ANNONCES LÉGALES
======================================== */
.annonces-legales-page {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* ========================================
En-tête
======================================== */
.annonces-header {
text-align: left;
margin-bottom: 40px;
border-bottom: 2px solid #2d7a4f;
padding-bottom: 20px;
}
.annonces-header h1 {
font-size: 42px;
color: #2d7a4f;
margin-bottom: 10px;
font-weight: 400;
font-family: 'Georgia', serif;
}
.annonces-header .subtitle {
font-size: 16px;
color: #333;
margin: 0;
}
/* ========================================
Grille 2 colonnes
======================================== */
.annonces-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
margin-bottom: 40px;
}
/* ========================================
Cartes
======================================== */
.annonce-card {
background: white;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.annonce-card:hover {
transform: translateY(-4px);
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.annonce-card h2 {
text-align: center;
font-size: 22px;
font-weight: 600;
color: #333;
padding: 20px;
margin: 0;
background-color: #f8f9fa;
border-bottom: 1px solid #e0e0e0;
}
/* ========================================
Images
======================================== */
.annonce-image {
width: 100%;
height: 260px;
overflow: hidden;
}
.annonce-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.annonce-card:hover .annonce-image img {
transform: scale(1.05);
}
/* ========================================
Contenu
======================================== */
.annonce-content {
padding: 25px;
text-align: center;
}
.annonce-content p {
font-size: 15px;
line-height: 1.7;
color: #555;
margin-bottom: 15px;
}
.annonce-content .website {
font-size: 16px;
color: #2d7a4f;
font-weight: 600;
margin: 20px 0;
}
/* ========================================
Boutons verts
======================================== */
.btn-annonce {
display: inline-block;
background-color: #2d7a4f;
color: white !important;
padding: 12px 28px;
border-radius: 25px;
text-decoration: none !important;
font-weight: 600;
font-size: 14px;
letter-spacing: 0.5px;
transition: all 0.3s ease;
margin-top: 15px;
}
.btn-annonce:hover {
background-color: #246840;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(45, 122, 79, 0.3);
}
/* ========================================
Encadré gris informatif
======================================== */
.annonces-info-box {
background-color: #f5f5f5;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 30px;
margin-top: 40px;
}
.annonces-info-box .info-title {
font-size: 16px;
color: #333;
margin-bottom: 20px;
line-height: 1.6;
}
.annonces-info-box .info-list {
list-style: disc;
padding-left: 25px;
margin: 20px 0;
}
.annonces-info-box .info-list li {
font-size: 15px;
color: #555;
line-height: 1.8;
margin-bottom: 12px;
}
.annonces-info-box .contact-info {
font-size: 15px;
color: #555;
margin-top: 20px;
line-height: 1.6;
}
.annonces-info-box .contact-info a {
color: #2d7a4f;
text-decoration: none;
font-weight: 600;
}
.annonces-info-box .contact-info a:hover {
text-decoration: underline;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 768px) {
.annonces-grid {
grid-template-columns: 1fr;
}
.annonces-header h1 {
font-size: 32px;
}
.annonce-image {
height: 220px;
}
}
/* ========================================
SECTION LISTE DES ANNONCES
======================================== */
.annonces-liste-section {
max-width: 1200px;
margin: 60px auto;
padding: 0 20px;
}
/* ========================================
En-tête et filtres
======================================== */
.annonces-liste-header {
margin-bottom: 40px;
}
.annonces-liste-header h2 {
font-size: 32px;
color: #1a1a1a;
margin-bottom: 25px;
font-weight: 600;
}
/* ========================================
Filtres
======================================== */
.annonces-filtres {
background: white;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.filtre-recherche {
margin-bottom: 20px;
}
.filtre-recherche input {
width: 100%;
padding: 12px 18px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
transition: border-color 0.3s;
}
.filtre-recherche input:focus {
outline: none;
border-color: #2d7a4f;
box-shadow: 0 0 0 3px rgba(45, 122, 79, 0.1);
}
.filtres-selects label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 12px;
font-size: 15px;
}
.selects-row {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 12px;
align-items: center;
}
.selects-row select {
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
background-color: white;
cursor: pointer;
transition: border-color 0.3s;
}
.selects-row select:hover,
.selects-row select:focus {
border-color: #2d7a4f;
outline: none;
}
.btn-filtrer {
padding: 10px 24px;
background-color: #2d7a4f;
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
white-space: nowrap;
}
.btn-filtrer:hover {
background-color: #246840;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(45, 122, 79, 0.3);
}
/* ========================================
Container des annonces
======================================== */
.annonces-container {
display: flex;
flex-direction: column;
gap: 30px;
}
/* ========================================
Carte d'annonce individuelle
======================================== */
.annonce-item {
background: white;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s;
}
.annonce-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
/* ========================================
Bandeau vert (date de publication)
======================================== */
.annonce-bandeau {
background: linear-gradient(135deg, #2d7a4f 0%, #1f5738 100%);
padding: 12px 25px;
color: white;
}
.annonce-date {
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
}
/* ========================================
Corps de l'annonce
======================================== */
.annonce-corps {
padding: 30px;
}
.annonce-corps h3 {
font-size: 24px;
color: #1a1a1a;
margin: 0 0 15px 0;
font-weight: 700;
text-align: center;
}
.annonce-type,
.annonce-capital,
.annonce-adresse,
.annonce-rcs {
text-align: center;
font-size: 15px;
color: #555;
margin: 8px 0;
line-height: 1.6;
}
.annonce-type {
font-weight: 600;
color: #2d7a4f;
}
.annonce-separator {
width: 60px;
height: 3px;
background: #2d7a4f;
margin: 25px auto;
border-radius: 2px;
}
.annonce-corps h4 {
text-align: center;
font-size: 20px;
color: #333;
margin: 20px 0;
font-weight: 600;
}
/* ========================================
Texte de l'annonce
======================================== */
.annonce-texte {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #2d7a4f;
}
.annonce-texte p {
font-size: 15px;
line-height: 1.8;
color: #444;
margin-bottom: 12px;
}
.annonce-texte ul {
margin: 15px 0;
padding-left: 25px;
}
.annonce-texte ul li {
font-size: 15px;
line-height: 1.8;
color: #444;
margin-bottom: 10px;
}
.annonce-signature {
text-align: right;
font-style: italic;
margin-top: 20px;
color: #666;
}
.annonce-signature strong {
display: block;
font-style: normal;
color: #333;
margin-top: 5px;
}
/* ========================================
Pied de l'annonce (informations)
======================================== */
.annonce-pied {
background-color: #2d7a4f;
padding: 18px 25px;
color: white;
}
.annonce-pied p {
margin: 5px 0;
font-size: 13px;
line-height: 1.6;
}
/* ========================================
Pagination
======================================== */
.annonces-pagination {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 50px;
}
.btn-page {
padding: 10px 18px;
background-color: white;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: #555;
cursor: pointer;
transition: all 0.3s;
}
.btn-page:hover {
background-color: #2d7a4f;
color: white;
border-color: #2d7a4f;
}
.btn-page.active {
background-color: #2d7a4f;
color: white;
border-color: #2d7a4f;
}
/* ========================================
INTÉGRATION LEGALPLUS - ANNONCES LÉGALES
======================================== */
/* Override des styles générés par LegalPlus */
/* Recherche */
#legalplus-search {
margin-bottom: 20px;
}
#legalplus-search input[type="text"],
#legalplus-search input[type="search"] {
width: 100%;
padding: 12px 18px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 15px;
transition: border-color 0.3s;
}
#legalplus-search input:focus {
outline: none;
border-color: #2d7a4f;
box-shadow: 0 0 0 3px rgba(45, 122, 79, 0.1);
}
/* Filtres */
#legalplus-filter {
background: white;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 25px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
margin-bottom: 40px;
}
#legalplus-filter label {
display: block;
font-weight: 600;
color: #333;
margin-bottom: 12px;
font-size: 15px;
}
#legalplus-filter select {
padding: 10px 15px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
background-color: white;
cursor: pointer;
transition: border-color 0.3s;
margin-right: 12px;
margin-bottom: 12px;
min-width: 200px;
}
#legalplus-filter select:hover,
#legalplus-filter select:focus {
border-color: #2d7a4f;
outline: none;
}
#legalplus-filter button,
#legalplus-filter input[type="submit"] {
padding: 10px 24px;
background-color: #2d7a4f;
color: white;
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: all 0.3s;
}
#legalplus-filter button:hover,
#legalplus-filter input[type="submit"]:hover {
background-color: #246840;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(45, 122, 79, 0.3);
}
/* Container des annonces */
#legalplus-plugin {
display: flex;
flex-direction: column;
gap: 30px;
}
/* Chaque annonce individuelle */
#legalplus-plugin > div,
#legalplus-plugin > article,
#legalplus-plugin .legal-notice,
#legalplus-plugin .annonce {
background: white;
border: 1px solid #e0e0e0;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
transition: transform 0.3s, box-shadow 0.3s;
}
#legalplus-plugin > div:hover,
#legalplus-plugin > article:hover,
#legalplus-plugin .legal-notice:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
}
/* Bandeau de date (vert) */
#legalplus-plugin .date,
#legalplus-plugin .publication-date,
#legalplus-plugin header,
#legalplus-plugin .legal-notice-header {
background: linear-gradient(135deg, #2d7a4f 0%, #1f5738 100%);
padding: 12px 25px;
color: white !important;
font-size: 14px;
font-weight: 500;
letter-spacing: 0.3px;
}
#legalplus-plugin .date *,
#legalplus-plugin .publication-date *,
#legalplus-plugin header *,
#legalplus-plugin .legal-notice-header * {
color: white !important;
}
/* Corps de l'annonce */
#legalplus-plugin .content,
#legalplus-plugin .body,
#legalplus-plugin .legal-notice-body {
padding: 30px;
}
/* Titre de l'annonce */
#legalplus-plugin h1,
#legalplus-plugin h2,
#legalplus-plugin h3,
#legalplus-plugin .title {
font-size: 24px !important;
color: #1a1a1a !important;
margin: 0 0 15px 0 !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1.3 !important;
}
/* Type de société */
#legalplus-plugin .type,
#legalplus-plugin .company-type,
#legalplus-plugin .forme-juridique {
text-align: center;
font-size: 15px;
color: #2d7a4f !important;
font-weight: 600;
margin: 8px 0;
}
/* Capital, adresse, RCS */
#legalplus-plugin .capital,
#legalplus-plugin .address,
#legalplus-plugin .rcs,
#legalplus-plugin .siege,
#legalplus-plugin .info {
text-align: center;
font-size: 15px;
color: #555 !important;
margin: 8px 0;
line-height: 1.6;
}
/* Séparateur */
#legalplus-plugin hr,
#legalplus-plugin .separator {
width: 60px;
height: 3px;
background: #2d7a4f;
margin: 25px auto;
border: none;
border-radius: 2px;
}
/* Titre de section (ex: "Avis") */
#legalplus-plugin h4,
#legalplus-plugin .section-title {
text-align: center;
font-size: 20px !important;
color: #333 !important;
margin: 20px 0 !important;
font-weight: 600 !important;
}
/* Texte de l'annonce (bloc gris) */
#legalplus-plugin .notice-text,
#legalplus-plugin .text-content,
#legalplus-plugin .description {
background-color: #f9f9f9;
padding: 20px;
border-radius: 8px;
border-left: 4px solid #2d7a4f;
margin: 15px 0;
}
#legalplus-plugin .notice-text p,
#legalplus-plugin .text-content p,
#legalplus-plugin .description p {
font-size: 15px;
line-height: 1.8;
color: #444;
margin-bottom: 12px;
}
#legalplus-plugin .notice-text ul,
#legalplus-plugin .text-content ul {
margin: 15px 0;
padding-left: 25px;
}
#legalplus-plugin .notice-text li,
#legalplus-plugin .text-content li {
font-size: 15px;
line-height: 1.8;
color: #444;
margin-bottom: 10px;
}
/* Signature */
#legalplus-plugin .signature,
#legalplus-plugin .gerance {
text-align: right;
font-style: italic;
margin-top: 20px;
color: #666;
}
#legalplus-plugin .signature strong,
#legalplus-plugin .gerance strong {
display: block;
font-style: normal;
color: #333;
margin-top: 5px;
}
/* Footer de l'annonce */
#legalplus-plugin footer,
#legalplus-plugin .legal-notice-footer,
#legalplus-plugin .annonce-footer {
background-color: #2d7a4f;
padding: 18px 25px;
color: white !important;
}
#legalplus-plugin footer *,
#legalplus-plugin .legal-notice-footer *,
#legalplus-plugin .annonce-footer * {
color: white !important;
font-size: 13px;
line-height: 1.6;
margin: 5px 0;
}
/* Pagination */
#legalplus-plugin .pagination,
#legalplus-plugin .pager {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 50px;
flex-wrap: wrap;
}
#legalplus-plugin .pagination a,
#legalplus-plugin .pagination button,
#legalplus-plugin .pagination span,
#legalplus-plugin .pager a,
#legalplus-plugin .pager button {
padding: 10px 18px;
background-color: white;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 14px;
font-weight: 600;
color: #555;
cursor: pointer;
transition: all 0.3s;
text-decoration: none;
}
#legalplus-plugin .pagination a:hover,
#legalplus-plugin .pagination button:hover,
#legalplus-plugin .pager a:hover {
background-color: #2d7a4f;
color: white;
border-color: #2d7a4f;
}
#legalplus-plugin .pagination .active,
#legalplus-plugin .pagination .current,
#legalplus-plugin .pager .active {
background-color: #2d7a4f;
color: white;
border-color: #2d7a4f;
}
/* Message "Aucun résultat" */
#legalplus-plugin .no-results,
#legalplus-plugin .empty,
#legalplus-plugin .no-data {
text-align: center;
padding: 60px 20px;
font-size: 16px;
color: #999;
background-color: #f9f9f9;
border-radius: 10px;
border: 1px solid #e0e0e0;
}
/* Loading / Chargement */
#legalplus-plugin .loading,
#legalplus-plugin .spinner {
text-align: center;
padding: 60px 20px;
font-size: 16px;
color: #2d7a4f;
}
/* ========================================
Responsive pour LegalPlus
======================================== */
@media (max-width: 768px) {
#legalplus-filter {
padding: 20px;
}
#legalplus-filter select {
width: 100%;
margin-right: 0;
min-width: auto;
}
#legalplus-filter button {
width: 100%;
margin-top: 10px;
}
#legalplus-plugin .content,
#legalplus-plugin .body,
#legalplus-plugin .legal-notice-body {
padding: 20px;
}
#legalplus-plugin h1,
#legalplus-plugin h2,
#legalplus-plugin h3,
#legalplus-plugin .title {
font-size: 20px !important;
}
#legalplus-plugin .pagination,
#legalplus-plugin .pager {
gap: 5px;
}
#legalplus-plugin .pagination a,
#legalplus-plugin .pagination button,
#legalplus-plugin .pager a {
padding: 8px 12px;
font-size: 13px;
}
}
/* ========================================
Fix pour certains cas spécifiques
======================================== */
/* Si LegalPlus ajoute des classes personnalisées */
#legalplus-plugin [class*="legal-"],
#legalplus-plugin [class*="annonce-"],
#legalplus-plugin [class*="notice-"] {
box-sizing: border-box;
}
/* Reset des margins/paddings indésirables */
#legalplus-plugin * {
box-sizing: border-box;
}
/* Force la police de caractère */
#legalplus-plugin,
#legalplus-plugin * {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
/* Liens dans les annonces */
#legalplus-plugin a:not(.btn):not([class*="pagination"]) {
color: #2d7a4f;
text-decoration: none;
transition: color 0.3s;
}
#legalplus-plugin a:not(.btn):not([class*="pagination"]):hover {
color: #1f5738;
text-decoration: underline;
}
/* ========================================
Responsive
======================================== */
@media (max-width: 768px) {
.selects-row {
grid-template-columns: 1fr;
}
.annonce-corps {
padding: 20px;
}
.annonce-corps h3 {
font-size: 20px;
}
.annonce-texte {
padding: 15px;
}
}
/* ================
STYLE MENU PRINCIPAL (CENTRÉ & COMPACT)
=============================== */
/* 1. Force le conteneur global à centrer son contenu */
.newsx-header-menu-primary-wrapper,
.newsx-header-menu-primary-wrapper-parent {
justify-content: center !important;
text-align: center !important;
width: 100%;
}
/* 2. La liste des liens (ul) - Espacement réduit */
#newsx-header-menu-primary {
display: flex !important;
justify-content: center !important;
align-items: center !important;
gap: 2px !important; /* C'est ici qu'on serre les éléments entre eux */
margin: 0 auto !important;
flex-wrap: wrap;
}
/* 3. Apparence des liens - Taille réduite */
#newsx-header-menu-primary .menu-item a {
font-size: 16px !important;
font-weight: 700 !important;
color: #1a1a1a !important;
padding: 8px 12px !important; /* Moins d'espace autour du texte */
border-radius: 6px !important; /* Arrondi un peu plus subtil */
transition: all 0.2s ease !important;
background: transparent;
text-decoration: none !important;
}
/* 4. État actif et Survol */
#newsx-header-menu-primary .menu-item.current-menu-item > a,
#newsx-header-menu-primary .menu-item > a:hover {
background-color: #f0f4ef !important;
color: #05833C !important;
}
#newsx-header-menu-primary li {
margin: 0 !important;
}
/* ========================================
WIDGET HSA "ARTICLES RÉCENTS" - STYLE STRICT (UNIVERSEL)
======================================== */
/* 1. J'ai simplifié cette ligne pour cibler le widget partout */
.widget_hsa_recent_posts,
#secondary .widget_hsa_recent_posts,
.widget-area .widget_hsa_recent_posts {
background-color: #f5f5f5 !important;
padding: 20px 20px !important;
border-radius: 8px !important;
box-shadow: none !important; /* Pas d'ombre sur la boite */
margin-bottom: 30px !important;
}
/* On garde la marge du haut spécifique à l'accueil si vous y tenez */
body.home .widget_hsa_recent_posts {
margin-top: 40px !important;
}
/* === TITRE DU WIDGET (Votre style exact : Merriweather 32px) === */
.widget_hsa_recent_posts .widget-title {
font-size: 32px !important;
font-weight: 700 !important;
text-transform: none !important;
color: #1a1a1a !important;
margin-bottom: 10px !important;
margin-top: 0 !important;
padding-bottom: 0 !important;
border-bottom: none !important;
letter-spacing: 0 !important;
}
/* === LISTE DES ARTICLES === */
.widget_hsa_recent_posts ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* === CHAQUE ARTICLE (Sans bordure, comme demandé) === */
.widget_hsa_recent_posts li {
margin-bottom: 0 !important;
padding: 12px 0 !important;
border-bottom: none !important; /* Aucune ligne de séparation */
background: none !important;
transition: background-color 0.3s ease !important;
}
/* 🆕 EFFET SURVOL (Juste fond blanc, PAS D'OMBRE) */
.widget_hsa_recent_posts li:hover {
background-color: #ffffff !important;
padding-left: 15px !important;
padding-right: 15px !important;
border-radius: 6px !important;
box-shadow: none !important; /* Je confirme : pas d'ombre ici */
}
/* === MÉTA (DATE + CATÉGORIE) === */
.widget_hsa_recent_posts .hsa-post-meta {
display: flex !important;
gap: 15px !important;
align-items: baseline !important;
margin-bottom: 8px !important;
flex-wrap: wrap; /* Sécurité pour les petites colonnes */
}
/* === DATE === */
.widget_hsa_recent_posts .hsa-post-date {
font-family: 'Roboto', sans-serif !important;
font-size: 16px !important;
font-weight: 400 !important;
color: #666 !important;
}
/* === CATÉGORIE === */
.widget_hsa_recent_posts .hsa-post-category {
font-family: 'Roboto', sans-serif !important;
font-size: 16px !important;
font-weight: 700 !important;
color: #ff6b35 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
}
/* === TITRE DE L'ARTICLE (Votre style exact : Oswald 22px) === */
.widget_hsa_recent_posts li a {
font-family: 'Oswald', sans-serif !important;
font-size: 22px !important;
font-weight: 500 !important;
color: #2d6a4f !important;
text-decoration: none !important;
line-height: 1.4 !important;
display: block !important;
transition: all 0.3s ease !important;
}
.widget_hsa_recent_posts li a:hover {
color: #02853c !important;
text-decoration: underline !important;
}
/* ============================================================
1. S'ABONNER & MON COMPTE (TOP BAR)
============================================================ */
/* Style commun pour S'abonner et Mon compte */
#menu-item-403 a,
#menu-item-294 a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
height: 38px !important; /* Hauteur identique pour les deux */
padding: 0 18px !important; /* Même espacement interne */
border-radius: 10px !important; /* Même arrondi */
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: all 0.3s ease !important;
white-space: nowrap !important;
}
/* ============================================================
2. BOUTON S'ABONNER (ORANGE)
============================================================ */
#menu-item-403 {
margin-right: 2px !important; /* Rapprochement léger du séparateur */
}
#menu-item-403 a {
background-color: #ff6b2b !important;
color: #ffffff !important;
border: none !important;
}
#menu-item-403 a:hover {
background-color: #d9541a !important;
transform: none !important;
}
/* ============================================================
3. BOUTON MON COMPTE (SOBRE)
============================================================ */
#menu-item-294 a {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
}
#menu-item-294 a:hover {
background-color: rgba(255, 255, 255, 0.2) !important;
transform: none !important;
}
/* ============================================================
4. LE SÉPARATEUR VERTICAL
============================================================ */
#menu-item-294 {
margin-left: 12px !important;
padding-left: 15px !important;
border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
display: flex !important;
align-items: center !important;
}
/* ============================================================
5. ALIGNEMENT DES ICÔNES SOCIALES
============================================================ */
.newsx-header-social-icons {
margin-left: 10px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.newsx-social-icon {
color: #ffffff !important;
font-size: 16px !important;
transition: opacity 0.2s !important;
}
.newsx-social-icon:hover {
opacity: 0.8 !important;
}
@media screen and (max-width: 768px) {
.newsx-header-top-container .newsx-flex {
justify-content: center !important;
padding: 5px 0 !important;
}
#menu-item-403 a, #menu-item-294 a {
height: 32px !important;
padding: 0 12px !important;
font-size: 12px !important;
}
#menu-item-294 {
margin-left: 8px !important;
padding-left: 10px !important;
}
/* On remet une marge normale sur mobile pour éviter les chevauchements */
#newsx-header-menu-secondary .newsx-nav-menu > #menu-item-403 {
margin-right: 0 !important;
}
}
/* =========================
BLOC AGENDA - EVENEMENTS
=============================== */
/* AGENDA : Conteneur de la date - VERSION COMPACTE */
.tribe-events-widget-events-list__event-date-tag-datetime {
display: inline-flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
/* Fond orange arrondi - PLUS PETIT */
background: linear-gradient(135deg, #ff6b35 0%, #ff8c42 100%);
border-radius: 8px;
padding: 6px 5px;
/* Espacement réduit */
margin-right: 10px;
min-width: 50px;
}
/* Le mois - AVEC PLUS D'ESPACE EN BAS */
.tribe-events-widget-events-list__event-date-tag-month {
display: block !important;
color: white !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase;
letter-spacing: 0.3px;
margin-bottom: 5px !important;
line-height: 1 !important;
}
/* Le jour - PLUS PETIT */
.tribe-events-widget-events-list__event-date-tag-daynum {
display: block !important;
color: white !important;
font-size: 20px !important;
font-weight: 700 !important;
line-height: 1 !important;
margin: 0 !important;
}
/* Stylisation du titre H2 du widget */
.tribe-events-widget-events-list__header-title.tribe-common-h6.tribe-common-h--alt {
color: #05833C !important; /* Votre vert agricole */
font-family: inherit; /* Utilise la police de votre thème */
font-size: 1.1rem !important; /* Taille équilibrée */
font-weight: 700 !important;
text-transform: uppercase;
letter-spacing: 1.2px; /* Un peu d'air entre les lettres */
/* Positionnement */
margin: 0 0 20px 0 !important;
padding-bottom: 10px !important;
/* Petite ligne décorative en dessous */
border-bottom: 2px solid #e8ede3 !important;
display: block;
position: relative;
}
/* Le petit détail : un accent sous le titre */
.tribe-events-widget-events-list__header-title.tribe-common-h6.tribe-common-h--alt::after {
content: "";
position: absolute;
bottom: -2px; /* Se place exactement sur la bordure grise */
left: 0;
width: 40px; /* Longueur de l'accent vert */
height: 2px;
background-color: #05833C;
}
/* Container principal - Style Carte Fichée */
.tribe-common.tribe-events.tribe-events-view.tribe-events-view--widget-events-list.tribe-events-widget {
background-color: #ffffff;
background-size: 30px 30px;
border-radius: 16px; /* Coins bien arrondis */
padding: 20px;
/* Bordure fine tout autour, couleur vert pâle */
border: 2px solid #dae8db;
border-top: none; /* On garde le haut ouvert ou on ferme tout (ici ouvert pour le style) */
border-top: 4px solid #05833C; /* Juste un petit accent en haut */
max-width: 100%;
}
/* ========================================
/* Style complet pour formulaire agricole */
.pms-form.pms-register-form {
max-width: 500px;
margin: 0 auto;
background: white;
padding: 40px;
border-radius: 12px;
border-top: 4px solid #7ba428;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.pms-form.pms-register-form h3 {
color: #2d5016;
margin-bottom: 25px;
font-size: 26px;
text-align: center;
}
.pms-field-wrapper {
margin-bottom: 20px;
}
.pms-form .pms-field-errors {
color: #dc3545;
font-size: 13px;
margin-top: 5px;
}
.pms-form .pms-checkbox-wrapper {
display: flex;
align-items: center;
gap: 10px;
}
/* Modification bloc abonnement */
.pms-pt-list li::before {
content: "✓ "; /* Change le symbole */
color: #ff6901; /* Change la couleur */
}
.is-style-outline--1 .wp-block-button__link {
background: transparent;
border: 2px solid #05833C !important;
border-radius: 5px;
padding: 12px 24px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-block;
width: 100%;
text-align: center;
}
.is-style-outline--1 .wp-block-button__link:hover {
background: #05833C !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(5, 131, 60, 0.3);
}
/* ========================================
NEWSLETTER FINAL (Full Width + Aéré)
======================================== */
.brevo-newsletter {
/* 1. Le Fond & Dimensions */
background: linear-gradient(135deg, #05833C 0%, #03602b 100%);
color: #ffffff;
/* TOUTE LA LARGEUR */
width: 100%;
max-width: 100%;
box-sizing: border-box; /* Important pour que le padding ne dépasse pas */
margin: 30px 0;
padding: 50px 60px; /* Un peu plus d'espace interne */
border-radius: 8px; /* On garde l'arrondi si le bloc n'est pas collé aux bords de l'écran */
position: relative;
overflow: hidden;
}
/* --- DÉCOR DE FOND (Enveloppe) --- */
.brevo-newsletter::before {
content: "\2709";
position: absolute;
right: -10px;
bottom: -50px;
font-size: 300px; /* Encore plus grande pour le bloc large */
color: #ffffff;
opacity: 0.05;
transform: rotate(-15deg);
pointer-events: none;
line-height: 1;
}
/* --- TITRE ET TEXTE --- */
.brevo-newsletter h3.brevo-title {
font-family: 'Georgia', serif;
font-size: 28px;
font-weight: 700;
color: #ffffff;
margin: 0 0 15px 0;
text-align: left;
position: relative;
z-index: 2;
}
.brevo-newsletter h3.brevo-title::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: #ff6901;
margin-top: 12px;
border-radius: 2px;
}
.brevo-newsletter p.brevo-description {
font-size: 16px;
color: #e0f2f1;
text-align: left;
margin-bottom: 30px; /* Plus d'espace avant le formulaire */
max-width: 700px;
position: relative;
z-index: 2;
line-height: 1.5;
}
/* --- FORMULAIRE (La correction est ici) --- */
.brevo-newsletter form {
display: flex;
flex-wrap: wrap; /* Permet de passer à la ligne si l'écran rétrécit */
align-items: flex-end; /* Aligne le bas du bouton avec le bas du champ */
gap: 20px; /* ESPACE VITAL entre le champ et le bouton */
position: relative;
z-index: 2;
text-align: left;
}
/* Label caché */
.brevo-newsletter label { display: none; }
/* Conteneur du champ input */
.brevo-newsletter .sib-email-area {
flex: 1; /* Prend l'espace disponible */
min-width: 250px; /* Mais pas moins de 250px */
max-width: 450px; /* Et pas plus de 450px pour rester esthétique */
margin: 0; /* Important : supprime les marges par défaut de Brevo */
}
/* Le Champ Email */
.brevo-newsletter input[type="email"] {
width: 100% !important;
background: #ffffff !important;
border: 2px solid transparent !important; /* Bordure transparente pour éviter le saut au focus */
border-radius: 4px !important;
height: 50px !important; /* Hauteur confortable */
padding: 0 20px !important;
color: #333 !important;
font-size: 16px !important;
text-align: left !important;
box-sizing: border-box !important;
}
.brevo-newsletter input[type="email"]:focus {
outline: none !important;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2) !important;
}
/* Le Bouton */
.brevo-newsletter .sib-default-btn {
background-color: #ff6901 !important;
color: #ffffff !important;
font-weight: 700 !important;
font-size: 15px !important;
text-transform: uppercase !important;
padding: 0 35px !important;
height: 50px !important; /* IDENTIQUE au champ input */
border: none !important;
border-radius: 4px !important;
cursor: pointer !important;
white-space: nowrap !important;
width: auto !important;
transition: all 0.2s ease !important;
margin: 10px 0 0 0 !important; /* Zéro marge, c'est le GAP qui gère l'espace */
}
.brevo-newsletter .sib-default-btn:hover {
background-color: #e65c00 !important;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* ========================================
RESPONSIVE (Mobile & Tablette)
======================================== */
@media (max-width: 768px) {
.brevo-newsletter {
padding: 30px 20px;
border-radius: 0; /* Sur mobile, souvent mieux sans bords arrondis si ça touche les bords */
}
.brevo-newsletter form {
flex-direction: column; /* Force la colonne */
align-items: stretch; /* Tout prend la largeur max */
gap: 15px; /* Espace vertical entre les éléments */
}
/* On force l'input et le bouton à 100% sur mobile */
.brevo-newsletter .sib-email-area,
.brevo-newsletter input[type="email"],
.brevo-newsletter .sib-default-btn {
max-width: 100% !important;
width: 100% !important;
}
.brevo-newsletter h3.brevo-title::after {
margin-top: 10px;
}
}
/* ========================================
PAGE NOS PUBLICATIONS - STYLE KIOSQUE
======================================== */
/* ----------------------------------------
1. TITRE SECTION AVEC POINTILLÉS
---------------------------------------- */
.publi-section-title {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.publi-section-title h2 {
font-family: 'Impact', 'Arial Black', sans-serif;
font-size: 32px;
color: #05833C;
text-transform: uppercase;
margin: 0;
line-height: 1;
white-space: nowrap;
}
.publi-dots {
flex-grow: 1;
height: 6px;
background-image: radial-gradient(circle, #05833C 2px, transparent 2.5px);
background-size: 8px 8px;
background-repeat: repeat-x;
background-position: center;
opacity: 0.5;
}
.publi-subtitle {
font-family: inherit;
font-size: 24px;
color: #2c3e50;
text-transform: uppercase;
font-weight: 800;
margin-bottom: 40px;
}
/* ----------------------------------------
2. GRILLE DES CARTES
---------------------------------------- */
.publi-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 30px;
margin-bottom: 50px;
}
/* ----------------------------------------
3. CARTE KIOSQUE
---------------------------------------- */
.publi-card {
display: flex;
flex-direction: column;
}
/* Date/Numéro au-dessus - ORANGE */
.publi-meta {
font-size: 12px;
font-weight: 800;
color: #ff6901;
text-transform: uppercase;
margin-bottom: 10px;
letter-spacing: 0.5px;
}
/* Cadre de la carte - VERT */
.publi-box {
border: 2px solid #05833C;
background: #fff;
display: flex;
flex-direction: column;
overflow: hidden;
transition: all 0.3s ease;
}
/* Carte entièrement cliquable */
a.publi-box {
text-decoration: none;
color: inherit;
cursor: pointer;
}
/* Effet survol carte */
.publi-box:hover {
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(5, 131, 60, 0.2);
border-color: #ff6901;
}
/* Contenu interne */
.publi-content {
display: flex;
flex-direction: column;
height: 100%;
}
/* ----------------------------------------
4. IMAGE COUVERTURE
---------------------------------------- */
.publi-cover {
width: 100%;
height: 320px;
position: relative;
overflow: hidden;
background: #f5f5f5;
}
.publi-cover img {
display: block;
width: 100% !important;
height: 100%;
object-fit: cover;
object-position: top center;
transition: transform 0.5s ease;
/* Reset styles Heyzine inline */
border: none !important;
box-shadow: none !important;
}
/* Zoom image au survol */
.publi-box:hover .publi-cover img {
transform: scale(1.05);
}
/* ----------------------------------------
5. ZONE INFOS (sous l'image)
---------------------------------------- */
.publi-info {
padding: 20px;
text-align: center;
background: #fff;
}
.publi-info h4 {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
margin: 0 0 8px 0;
color: #1a1a1a;
}
.publi-excerpt {
font-size: 13px;
color: #666;
line-height: 1.5;
margin-bottom: 15px;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* ----------------------------------------
6. BOUTON "LIRE LE JOURNAL"
---------------------------------------- */
.publi-link {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 800;
text-transform: uppercase;
color: #fff;
background: #05833C;
text-decoration: none;
padding: 12px 25px;
border-radius: 3px;
transition: all 0.3s ease;
}
.publi-link:hover {
background: #ff6901;
transform: scale(1.05);
}
/* Flèche avant le texte */
.publi-link::before {
content: "→";
margin-right: 8px;
font-size: 14px;
}
/* ----------------------------------------
7. RESPONSIVE
---------------------------------------- */
/* Tablette */
@media (max-width: 768px) {
.publi-grid {
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.publi-cover {
height: 280px;
}
.publi-section-title h2 {
font-size: 26px;
}
.publi-subtitle {
font-size: 20px;
margin-bottom: 30px;
}
}
/* Mobile */
@media (max-width: 480px) {
.publi-grid {
grid-template-columns: 1fr;
max-width: 320px;
margin: 0 auto 50px auto;
}
.publi-cover {
height: 380px;
}
.publi-section-title h2 {
font-size: 22px;
}
.publi-subtitle {
font-size: 18px;
margin-bottom: 25px;
}
.publi-info {
padding: 15px;
}
.publi-link {
padding: 10px 20px;
font-size: 11px;
}
}
/* ========================
WIDGET METEO
=======================*/
.widget-meteo-wrapper {
background: #fff;
padding: 15px;
border: 1px solid #eee; /* Cadre léger */
border-radius: 5px;
text-align: center; /* Centre le widget */
}
/* Force le contenu météo à ne jamais dépasser la largeur */
.widget-meteo-wrapper iframe,
.widget-meteo-wrapper div {
max-width: 100% !important;
width: 100% !important;
}
/* ============================================================
STYLE MENU SECONDAIRE (Widget Menu #nav_menu-6)
============================================================ */
/* 1. Le Conteneur principal (la liste ul) */
#nav_menu-6 ul.menu {
display: flex !important; /* Met les éléments côte à côte */
flex-wrap: wrap; /* Retour à la ligne si écran trop petit */
align-items: center; /* Aligne verticalement */
margin: 0;
padding: 0;
list-style: none; /* Enlève les puces */
border-bottom: 1px solid #e0e0e0; /* La ligne grise de séparation */
margin-bottom: 20px; /* Espace sous le menu */
}
/* 2. Les éléments de la liste */
#nav_menu-6 ul.menu li {
margin: 0 25px 0 0 !important; /* Espace à droite de chaque élément */
padding: 0 !important;
background: none !important; /* Enlève d'éventuels fonds par défaut */
}
/* 3. Cacher les icônes (Chevrons SVG) */
/* C'est important pour que le menu soit propre à l'horizontale */
#nav_menu-6 .newsx-svg-icon {
display: none !important;
}
/* 4. Le style des liens (Texte) */
#nav_menu-6 ul.menu a {
display: block;
text-decoration: none;
color: #444; /* Gris foncé */
font-size: 14px;
font-weight: 700; /* Gras */
text-transform: uppercase; /* Majuscules */
padding-bottom: 15px; /* Espace pour l'effet de bordure */
border-bottom: 3px solid transparent; /* Bordure invisible par défaut */
transition: color 0.3s, border-bottom 0.3s;
}
/* 5. Au survol de la souris */
#nav_menu-6 ul.menu a:hover {
color: #007f3e; /* Ton vert agricole */
border-bottom: 3px solid #007f3e; /* La barre verte apparaît */
}
/* ============================================================
AJOUT DES ICÔNES PERSONNALISÉES (Technique Mask SVG)
============================================================ */
/* 1. Configuration de base pour l'icône (le ::before) */
#nav_menu-6 ul.menu li a::before {
content: "";
display: inline-block;
width: 18px; /* Taille de l'icône */
height: 18px;
margin-right: 8px; /* Espace entre icône et texte */
vertical-align: text-bottom;/* Alignement avec le texte */
/* La Magie : L'icône prend la couleur du texte (Gris puis Vert) */
background-color: currentColor;
/* On prépare le masque pour recevoir l'image SVG */
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: contain;
mask-size: contain;
}
/* ============================================================
2. ICÔNES FINES (STYLE "OUTLINE") POUR LA LISIBILITÉ
============================================================ */
/* -- NOS PUBLICATIONS (ID 745) -> Livre Ouvert (Traits fins) -- */
#nav_menu-6 #menu-item-745 a::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* -- NOS DOSSIERS (ID 38) -> Dossier ) -- */
#nav_menu-6 #menu-item-38 a::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* -- PETITES ANNONCES (ID 744) -> Mégaphone (Traits fins) -- */
#nav_menu-6 #menu-item-744 a::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* -- EMPLOIS (ID 39) -> Mallette (Traits fins) -- */
#nav_menu-6 #menu-item-39 a::before {
-webkit-mask-image: url('data:image/svg+xml;utf8,');
mask-image: url('data:image/svg+xml;utf8,');
}
/* ========================================
WIDGET ARCHIVES STYLISÉ
======================================== */
/* 1. Le Conteneur principal */
.widget_archive {
background: #fff; /* Fond blanc propre */
padding: 20px; /* Espace intérieur */
border: 1px solid #e0e0e0; /* Bordure grise très fine */
border-radius: 4px; /* Coins légèrement arrondis */
margin-bottom: 30px; /* Espace sous le widget */
}
/* 2. Le Titre du Widget */
.widget_archive .widget-title {
font-size: 1.1rem;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 15px;
padding-bottom: 10px;
border-bottom: 2px solid #007f3e; /* Soulignement vert agricole */
color: #222;
}
/* 3. Nettoyage de la liste (enlève les points noirs moches) */
.widget_archive ul {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
/* 4. Les Éléments de la liste */
.widget_archive li {
border-bottom: 1px dotted #ccc; /* Ligne de séparation discrète */
margin: 0;
padding: 0;
}
/* Enlève la ligne sous le dernier élément pour faire propre */
.widget_archive li:last-child {
border-bottom: none;
}
/* 5. Les Liens (Textes) */
.widget_archive a {
display: block; /* Le lien prend toute la largeur */
padding: 10px 0; /* Espace en haut et en bas pour cliquer facilement */
color: #555; /* Gris foncé par défaut */
text-decoration: none; /* Pas de soulignement classique */
transition: all 0.3s ease; /* Animation fluide */
font-weight: 500;
position: relative; /* Nécessaire pour l'icône */
padding-left: 20px; /* Place pour la petite flèche */
}
/* 6. Ajout d'une petite flèche (chevron) avant le texte */
.widget_archive a::before {
content: "›"; /* Caractère chevron */
position: absolute;
left: 0;
color: #ccc; /* Gris clair au repos */
font-size: 1.2em;
font-weight: bold;
line-height: 1;
top: 50%;
transform: translateY(-55%); /* Centrage vertical parfait */
transition: color 0.3s ease;
}
/* 7. EFFET AU SURVOL (HOVER) */
.widget_archive a:hover {
color: #007f3e; /* Le texte devient vert */
padding-left: 25px; /* Le texte se décale légèrement vers la droite */
}
.widget_archive a:hover::before {
color: #007f3e; /* La flèche devient verte aussi */
}
/* ========================================
WIDGET BRÈVES / FIL INFO (Style "Flash")
======================================== */
/* 1. Le cadre global du widget */
/* 2. Le Titre (Style Souligné Court) */
.widget_hsa_breves_widget .widget-title {
background: #fff;
color: #222;
margin: 0;
padding: 20px 20px 10px 20px;
font-size: 1.2rem;
font-weight: 800;
text-transform: uppercase;
position: relative;
border-bottom: 1px solid #f0f0f0; /* Ligne grise très fine toute longueur */
}
/* La ligne orange épaisse juste sous le mot */
.widget_hsa_breves_widget .widget-title::after {
content: '';
display: block;
width: 60px; /* Longueur de la ligne orange */
height: 4px; /* Épaisseur */
background: #ff6901; /* Orange */
margin-top: 10px;
border-radius: 2px;
}
/* 3. La liste (Conteneur des brèves) */
.hsa-breves-list {
list-style: none !important;
padding: 20px; /* On remet le padding ici autour du contenu */
margin: 0;
position: relative;
/* OPTIONNEL : Si tu mets 15 articles, ça permet de scroller DANS le widget */
max-height: 400px;
overflow-y: auto;
}
/* Scrollbar personnalisée (fine et verte) */
.hsa-breves-list::-webkit-scrollbar { width: 6px; }
.hsa-breves-list::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 3px; }
/* La ligne verticale de la timeline */
.hsa-breves-list::before {
content: '';
position: absolute;
top: 20px;
bottom: 20px;
left: 65px; /* Ajusté selon le padding */
width: 2px;
background: #f0f0f0; /* Gris très clair */
}
/* 4. Chaque élément (Brève) */
.hsa-breves-list li {
display: flex;
margin-bottom: 20px;
position: relative;
align-items: flex-start;
}
/* Le point sur la ligne (LA TOUCHE ORANGE) */
.hsa-breves-list li::after {
content: '';
position: absolute;
left: 41px; /* Centré sur la ligne */
top: 6px;
width: 10px;
height: 10px;
background: #ff6901; /* Fond ORANGE */
border: 2px solid #fff; /* Contour blanc pour détacher */
box-shadow: 0 0 0 1px #ff6901; /* Petit anneau orange */
border-radius: 50%;
z-index: 1;
}
/* 5. Date et Heure */
.breve-time {
width: 45px;
text-align: right;
padding-right: 15px;
flex-shrink: 0;
}
.breve-time .heure {
display: block;
font-weight: 800;
color: #333; /* Heure en noir fort */
font-size: 0.9em;
}
.breve-time .date {
display: block;
font-size: 0.7em;
color: #999; /* Date plus discrète */
text-transform: uppercase;
}
/* 6. Le texte du lien */
.breve-content {
padding-left: 15px;
flex-grow: 1;
}
.breve-content a {
text-decoration: none;
color: #444;
font-weight: 500;
line-height: 1.3;
display: block;
font-size: 0.95rem;
transition: color 0.2s;
}
/* Au survol, le texte devient Orange */
.breve-content a:hover {
color: #ff6901;
}
/* ========================================
GRILLE DOSSIERS (Style Editorial Soft)
======================================== */
/* La Grille */
.dossiers-grid-soft {
display: grid;
/* Colonnes réactives : minimum 280px de large */
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 40px 30px; /* Grand écart vertical (40), écart standard horizontal (30) */
margin: 40px 0;
}
/* Le conteneur de l'article */
.dossier-item {
background: transparent; /* Pas de fond gris ou blanc, juste la page */
}
/* Le lien global (pour le survol) */
.dossier-link {
text-decoration: none !important;
color: inherit !important;
display: flex;
flex-direction: column !important;
cursor: pointer; /* Curseur pointeur au survol */
}
/* --- L'IMAGE --- */
.dossier-img-wrapper {
margin: 0 0 15px 0 !important; /* Espace sous l'image */
overflow: hidden;
position: relative;
/* Ratio 3/2 (Standard photo journalisme) */
aspect-ratio: 3 / 2;
background-color: #f0f0f0; /* Fond gris clair pendant le chargement */
}
.dossier-img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease !important; /* Transition douce */
display: block;
}
/* Effet "Soft" au survol : l'image s'éclaircit légèrement */
.dossier-link:hover .dossier-img-wrapper img {
opacity: 0.85 !important;
}
/* --- LE TEXTE --- */
.dossier-info {
/* Pas de padding, le texte s'aligne avec l'image */
padding: 0 !important;
}
/* Le Surtitre (La catégorie) */
.dossier-tag {
display: block;
color: #ff6901 !important; /* Ton Orange */
font-size: 0.75rem !important; /* Petit */
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px;
margin-bottom: 8px;
font-family: sans-serif !important; /* Police simple pour le tag */
}
/* Le Titre */
.dossier-headline {
font-size: 1.35rem; /* Taille confortable */
line-height: 1.3;
font-weight: 700;
color: #1a1a1a; /* Noir presque pur */
margin: 0;
transition: color 0.2s ease;
}
/* Au survol de tout le bloc, seul le titre change de couleur */
.dossier-link:hover .dossier-headline {
color: #ff6901; /* Le titre devient orange */
}
/* ========================================
AMÉLIORATION CARTE "À LA UNE" (MAGAZINE)
======================================== */
/* 1. LE NAPPAGE (Gradient de fond pour lisibilité) */
/* On force un dégradé du bas vers le haut pour que le texte blanc ressorte toujours */
.newsx-grid-over-media {
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.4) 60%, rgba(0,0,0,0.9) 100%) !important;
}
/* 2. LE TEXTE (CORRECTIF : Uniquement pour le texte SUR les images) */
/* On cible précisément les éléments qui sont DANS (.newsx-grid-over-media) */
.newsx-grid-over-media .newsx-grid-title h2 a,
.newsx-grid-over-media .newsx-grid-excerpt p,
.newsx-grid-over-media .newsx-grid-post-meta span,
.newsx-grid-over-media .newsx-grid-author-name {
color: #ffffff !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.8) !important;
}
/* Le survol du titre (Correctif de ciblage aussi) */
article.newsx-grid-item:hover .newsx-grid-over-media .newsx-grid-title h2 a {
color: #00863b !important;
text-shadow: none !important;
}
/* 3. L'IMAGE (Transition douce) */
.newsx-grid-image {
transition: transform 0.5s ease, filter 0.3s ease !important;
}
/* === EFFETS AU SURVOL (HOVER) === */
/* A. L'image s'assombrit un peu plus pour focus sur le texte */
article.newsx-grid-item:hover .newsx-grid-image {
filter: brightness(0.7) !important; /* On baisse la luminosité à 70% */
/* Le zoom existe déjà dans ton thème, on le laisse agir */
}
/* B. Le titre devient Vert #00863b */
article.newsx-grid-item:hover .newsx-grid-title h2 a {
color: #00863b !important;
text-shadow: none !important; /* On enlève l'ombre pour un rendu "plat" et propre */
text-decoration: none !important;
}
/* =======================================================
PAGE DOSSIER - CORRECTIF (Orange & Vert Actif)
======================================================= */
.dossier-wrapper {
margin-bottom: 60px;
font-family: sans-serif;
}
/* --- 1. HEADER (BANDEAU) --- */
.dossier-header {
position: relative;
height: 200px;
background-size: cover;
background-position: center;
border-radius: 8px;
overflow: hidden;
margin-bottom: 25px;
box-shadow: none;
border: 1px solid #ddd;
}
.dossier-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.3) 60%, transparent 100%);
display: flex;
align-items: center;
padding: 0 40px;
}
.dossier-infos h2 {
color: #fff !important;
font-size: 32px;
margin: 0 0 10px 0;
text-transform: uppercase;
font-weight: 700;
text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}
/* --- BOUTON ORANGE (SANS SOULIGNEMENT) --- */
.btn-voir-dossier {
color: #fff !important;
background-color: #ff6b36;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none !important;
border-bottom: none !important;
font-size: 14px;
font-weight: bold;
display: inline-block;
transition: all 0.3s ease;
border: 1px solid #ff7847;
}
.btn-voir-dossier:hover {
background-color: #ff571a;
color: #fff !important;
transform: translateY(-2px);
text-decoration: none !important;
}
/* --- 2. GRILLE ARTICLES --- */
.dossier-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 30px;
}
/* CARTE ARTICLE */
.carte-article-moderne {
background: #fff;
border-radius: 8px;
overflow: hidden;
box-shadow: none;
border: 1px solid #e0e0e0;
transition: transform 0.3s ease, border-color 0.3s ease;
}
.carte-article-moderne:hover {
transform: translateY(-5px);
border-color: #bbb;
}
.carte-article-moderne a {
text-decoration: none;
color: inherit;
}
/* IMAGE */
.carte-article-moderne .img-container img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.carte-article-moderne:hover .img-container img {
transform: scale(1.05);
}
.contenu-carte {
padding: 20px;
}
/* --- TITRE ARTICLE (LE VERT) --- */
.carte-article-moderne h3,
.carte-article-moderne h3 a {
font-size: 18px;
margin: 0 0 10px 0;
line-height: 1.4;
color: #222;
font-weight: 700;
text-decoration: none !important;
transition: color 0.3s ease;
}
.carte-article-moderne:hover h3,
.carte-article-moderne:hover h3 a {
color: #00863b !important;
}
.date-article {
font-size: 12px;
color: #888;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* =========================================
RESPONSIVE - PAGE DOSSIER
========================================= */
/* TABLETTES (768px - 1024px) */
@media (max-width: 1024px) {
.dossier-overlay {
padding: 0 30px;
}
.dossier-infos h2 {
font-size: 28px;
}
.dossier-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 25px;
}
}
/* MOBILE (max 768px) */
@media (max-width: 768px) {
.dossier-wrapper {
margin-bottom: 40px;
}
.dossier-header {
height: 150px;
margin-bottom: 20px;
}
.dossier-overlay {
padding: 0 20px;
}
.dossier-infos h2 {
font-size: 22px;
margin-bottom: 12px;
}
.btn-voir-dossier {
font-size: 13px;
padding: 8px 16px;
}
.dossier-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.carte-article-moderne .img-container img {
height: 200px;
}
.carte-article-moderne h3,
.carte-article-moderne h3 a {
font-size: 17px;
}
.contenu-carte {
padding: 16px;
}
}
/* TRÈS PETIT MOBILE (max 480px) */
@media (max-width: 480px) {
.dossier-header {
height: 130px;
}
.dossier-infos h2 {
font-size: 20px;
}
.btn-voir-dossier {
font-size: 12px;
padding: 7px 14px;
}
.carte-article-moderne h3,
.carte-article-moderne h3 a {
font-size: 16px;
}
}
/* =========================================
NOS DOSSIERS - Page accueil - STYLE CARTE CLASSIQUE
========================================= */
.home-categories-section {
margin-top: -30px !important;
margin-bottom : 30px;
font-family: 'Oswald', sans-serif;
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 25px;
}
.cat-card {
position: relative;
display: block;
height: 200px;
border-radius: 16px;
overflow: hidden;
text-decoration: none;
transition: all 0.3s ease;
}
.cat-bg {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-size: cover;
background-position: center;
transition: transform 0.5s ease;
z-index: 1;
}
.cat-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.5) 100%);
transition: all 0.3s ease;
z-index: 2;
}
.cat-content {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 3;
padding: 30px;
}
.cat-content h3 {
color: #fff;
font-size: 32px;
text-transform: uppercase;
font-weight: 800;
letter-spacing: 2px;
margin: 0 0 15px 0;
text-shadow: 2px 2px 8px rgba(0,0,0,0.8);
transition: all 0.3s ease;
text-align: center;
}
.cat-count {
color: #fff;
background: #ff6b36;
font-size: 13px;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
padding: 8px 18px;
border-radius: 20px;
opacity: 1;
transition: all 0.3s ease;
}
/* SURVOL */
.cat-card:hover {
transform: translateY(-8px);
}
.cat-card:hover .cat-bg {
transform: scale(1.1);
}
.cat-card:hover .cat-overlay {
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.6) 100%);
}
.cat-card:hover h3 {
letter-spacing: 3px;
}
.cat-card:hover .cat-count {
background: #fff;
color: #ff6b36;
}
@media (max-width: 768px) {
.categories-grid { grid-template-columns: 1fr; gap: 20px; }
.cat-card { height: 200px; }
.cat-content h3 { font-size: 26px; }
.home-categories-section {
margin-top: 2px !important; /* Espace correct sur mobile */
}
}
/* Nettoyage du cadre Heyzine */
iframe.a-heyzine-iframe {
border: none !important; /* Enlève les bordures moches */
box-shadow: none !important; /* Enlève les ombres si présentes */
background: transparent;
}