.wpml-ls-legacy-dropdown{width:15.5em;max-width:100%}.wpml-ls-legacy-dropdown>ul{position:relative;padding:0;margin:0!important;list-style-type:none}.wpml-ls-legacy-dropdown .wpml-ls-current-language:focus .wpml-ls-sub-menu,.wpml-ls-legacy-dropdown .wpml-ls-current-language:hover .wpml-ls-sub-menu{visibility:visible}.wpml-ls-legacy-dropdown .wpml-ls-item{padding:0;margin:0;list-style-type:none}.wpml-ls-legacy-dropdown a{display:block;text-decoration:none;color:#444;border:1px solid #cdcdcd;background-color:#fff;padding:5px 10px;line-height:1}.wpml-ls-legacy-dropdown a span{vertical-align:middle}.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle{position:relative;padding-right:calc(10px + 1.4em)}.rtl .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle{padding-right:10px;padding-left:calc(10px + 1.4em)}.wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after{content:"";vertical-align:middle;display:inline-block;border:.35em solid transparent;border-top:.5em solid;position:absolute;right:10px;top:calc(50% - .175em)}.rtl .wpml-ls-legacy-dropdown a.wpml-ls-item-toggle:after{right:auto;left:10px}.wpml-ls-legacy-dropdown .wpml-ls-current-language:hover>a,.wpml-ls-legacy-dropdown a:focus,.wpml-ls-legacy-dropdown a:hover{color:#000;background:#eee}.wpml-ls-legacy-dropdown .wpml-ls-sub-menu{visibility:hidden;position:absolute;top:100%;right:0;left:0;border-top:1px solid #cdcdcd;padding:0;margin:0;list-style-type:none;z-index:101}.wpml-ls-legacy-dropdown .wpml-ls-sub-menu a{border-width:0 1px 1px}.wpml-ls-legacy-dropdown .wpml-ls-flag{display:inline;vertical-align:middle}.wpml-ls-legacy-dropdown .wpml-ls-flag+span{margin-left:.4em}.rtl .wpml-ls-legacy-dropdown .wpml-ls-flag+span{margin-left:0;margin-right:.4em}.wpml-ls-menu-item .wpml-ls-flag{display:inline;vertical-align:baseline}.wpml-ls-menu-item .wpml-ls-flag+span{margin-left:.3em}.rtl .wpml-ls-menu-item .wpml-ls-flag+span{margin-left:0;margin-right:.3em}ul .wpml-ls-menu-item a{display:flex;align-items:center}.tax-product_brand .brand-description{overflow:hidden;zoom:1}.tax-product_brand .brand-description img.brand-thumbnail{width:25%;float:right}.tax-product_brand .brand-description .text{width:72%;float:left}.widget_brand_description img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0 0 1em}ul.brand-thumbnails{margin-left:0;margin-bottom:0;clear:both;list-style:none}ul.brand-thumbnails:before{clear:both;content:"";display:table}ul.brand-thumbnails:after{clear:both;content:"";display:table}ul.brand-thumbnails li{float:left;margin:0 3.8% 1em 0;padding:0;position:relative;width:22.05%}ul.brand-thumbnails.fluid-columns li{width:auto}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:both}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:0}ul.brand-thumbnails.columns-1 li{width:100%;margin-right:0}ul.brand-thumbnails.columns-2 li{width:48%}ul.brand-thumbnails.columns-3 li{width:30.75%}ul.brand-thumbnails.columns-5 li{width:16.95%}ul.brand-thumbnails.columns-6 li{width:13.5%}.brand-thumbnails li img{box-sizing:border-box;width:100%;max-width:none;height:auto;margin:0}@media screen and (max-width:768px){ul.brand-thumbnails:not(.fluid-columns) li{width:48%!important}ul.brand-thumbnails:not(.fluid-columns) li.first{clear:none}ul.brand-thumbnails:not(.fluid-columns) li.last{margin-right:3.8%}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(odd){clear:both}ul.brand-thumbnails:not(.fluid-columns) li:nth-of-type(even){margin-right:0}}.brand-thumbnails-description li{text-align:center}.brand-thumbnails-description li .term-thumbnail img{display:inline}.brand-thumbnails-description li .term-description{margin-top:1em;text-align:left}#brands_a_z h3:target{text-decoration:underline}ul.brands_index{list-style:none outside;overflow:hidden;zoom:1}ul.brands_index li{float:left;margin:0 2px 2px 0}ul.brands_index li a,ul.brands_index li span{border:1px solid #ccc;padding:6px;line-height:1em;float:left;text-decoration:none}ul.brands_index li span{border-color:#eee;color:#ddd}ul.brands_index li a:hover{border-width:2px;padding:5px;text-decoration:none}ul.brands_index li a.active{border-width:2px;padding:5px}div#brands_a_z a.top{border:1px solid #ccc;padding:4px;line-height:1em;float:right;text-decoration:none;font-size:.8em}.woocommerce.wc-memberships-frontend-banner,.woocommerce.wc-memberships.admin-restricted-content-notice{background-color:#96588a;box-shadow:0 1px 1em rgba(0,0,0,.2);color:#fff;font-size:1em;left:0;margin:0;padding:1em 0;position:absolute;right:0;text-align:center;top:0;width:100%;z-index:99998}.woocommerce.wc-memberships-frontend-banner .dismiss-link:hover,.woocommerce.wc-memberships-frontend-banner a,.woocommerce.wc-memberships.admin-restricted-content-notice .dismiss-link:hover,.woocommerce.wc-memberships.admin-restricted-content-notice a{color:#fff;text-decoration:underline}.woocommerce .wc-memberships-restriction-message{margin:2em 0!important}.woocommerce .wc-memberships-variation-message{display:none}.woocommerce ul.products li.product .onsale.wc-memberships-member-discount{margin-left:-.5em;margin-right:0;right:auto}.woocommerce span.onsale.wc-memberships-member-discount{left:auto;margin-right:-.5em}.woocommerce span.wc-memberships-variation-member-discount{font-style:italic;font-weight:400}.admin-bar .wc-memberships-frontend-banner,.admin-bar .wc-memberships.admin-restricted-content-notice{top:32px}.woocommerce-account table.my_account_memberships{table-layout:fixed}.woocommerce-account .wc-memberships-members-area-sorting .unsorted .sort-order-icon{display:none}.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-asc .sort-order-icon.sort-asc,.woocommerce-account .wc-memberships-members-area-sorting .unsorted:hover .sort-order-icon.sort-asc{display:inline-block}.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-asc .sort-order-icon.sort-desc,.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-asc:focus .sort-order-icon.sort-asc,.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-asc:hover .sort-order-icon.sort-asc{display:none}.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-asc:focus .sort-order-icon.sort-desc,.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-asc:hover .sort-order-icon.sort-desc{display:inline-block}.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-desc .sort-order-icon.sort-asc{display:none}.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-desc .sort-order-icon.sort-desc{display:inline-block}.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-desc:focus .sort-order-icon.sort-desc,.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-desc:hover .sort-order-icon.sort-desc{display:none}.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-desc:focus .sort-order-icon.sort-asc,.woocommerce-account .wc-memberships-members-area-sorting .sorted.sort-desc:hover .sort-order-icon.sort-asc{display:inline-block}.woocommerce-account .wc-memberships-members-area-pagination{float:right;line-height:normal;text-align:right}.woocommerce-account .wc-memberships-members-area-pagination a{text-decoration:none}.woocommerce-account .wc-memberships-members-area-pagination a span{opacity:.4}.woocommerce-account .wc-memberships-members-area-pagination a:focus span,.woocommerce-account .wc-memberships-members-area-pagination a:hover span{opacity:1}.woocommerce-account td.membership-content-actions,.woocommerce-account td.membership-discount-actions,.woocommerce-account td.membership-product-actions,.woocommerce-account th.membership-content-actions,.woocommerce-account th.membership-discount-actions,.woocommerce-account th.membership-product-actions{min-width:150px}.woocommerce-account .membership-discount-image img,.woocommerce-account .membership-product-image img{max-height:84px;max-width:84px}.woocommerce-account td.membership-discount-image,.woocommerce-account td.membership-product-image,.woocommerce-account th.membership-discount-image,.woocommerce-account th.membership-product-image{min-width:130px}.theme-twentytwenty #wc-memberships-members-area,.theme-twentytwentyone #wc-memberships-members-area{margin:0 auto;max-width:1600px;padding:0 6vw}/*
Theme Name: Gentologie Theme
Theme URI: https://gentologie.com/
Author: Groupe Gentologie Média inc. | Normand Boulanger
Author URI: https://gentologiemedia.ca/
Description: Thème personnalisé pour Gentologie, prêt pour un passage progressif en headless.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: gentologie
*/
/* ========================================
ARCHITECTURE CSS - ORDRE OPTIMAL
========================================
1. FONDATIONS (variables, reset, base)
2. LAYOUT (structure globale)
3. NAVIGATION (header, footer)
4. COMPOSANTS (éléments réutilisables)
5. PAGES SPÉCIFIQUES
6. WOOCOMMERCE (à la fin pour override)
======================================== */
/* === 1. FONDATIONS === */
/* ========================================
VARIABLES.CSS - SYSTÈME DE DESIGN GENTOLOGIE
Version: 1.0 - Optimisé
======================================== */
:root {
/* ========================================
COULEURS PRINCIPALES
======================================== */
--color-gentologie-background: #fff5e6;
--color-gentologie-background-alt: #004d28;
--color-gentologie-background-box: #f2e9d8;
--color-gentologie-accent: #abc1b1;
--color-gentologie-green: #004d28;
--color-gentologie-blue: #000b59;
--color-gentologie-yellow: #f2c572;
--color-gentologie-red: #A62626;
--color-gentologie-burgundy: #4d0900;
--color-gentologie-white: #ffffff;
/* ========================================
COULEURS DE TEXTE
======================================== */
--color-gentologie-text: #333333;
--color-gentologie-text-alt: #fff5e6;
--color-gentologie-text-secondary: #4d4d4d;
--color-gentologie-text-green: #004d28;
/* ========================================
COULEURS DE TITRES
======================================== */
--color-gentologie-title: #004d28;
--color-gentologie-title-alt: #fff5e6;
/* ========================================
COULEUR PRINCIPALE MARQUE
======================================== */
--color-gentologie-green-rgb: 0, 77, 40;
--color-gentologie-green-light: #e8f5e8;
--color-gentologie-green-dark: #003d20;
/* ========================================
COULEURS D'ICÔNES
======================================== */
--color-gentologie-icon: #004d28;
--color-gentologie-icon-alt: #fff5e6;
/* ========================================
COULEURS DE BORDURES
======================================== */
--color-gentologie-border: #004d28;
--color-gentologie-border-alt: #fff5e6;
/* ========================================
COULEURS D'INTERACTION
======================================== */
--color-gentologie-hover-green: #abc1b1;
--color-gentologie-focus: #004d28;
--color-gentologie-active: #003d20;
/* ========================================
COULEURS DE BOUTONS
======================================== */
--color-gentologie-background-button: #004d28;
--color-gentologie-background-button-alt: #fff5e6;
--color-gentologie-text-button: #fff5e6;
--color-gentologie-text-button-alt: #004d28;
--color-gentologie-border-button: #004d28;
/* ========================================
COULEURS D'ÉTAT
======================================== */
--color-success: #28a745;
--color-warning: #ffc107;
--color-error: #dc3545;
--color-info: #17a2b8;
--color-success-light: #d4edda;
--color-success-border: #c3e6cb;
--color-warning-light: #fff3cd;
--color-warning-border: #ffeaa7;
--color-error-light: #f8d7da;
--color-error-border: #f5c6cb;
--color-info-light: #d1ecf1;
--color-info-border: #bee5eb;
/* ========================================
NIVEAUX D'ABONNEMENT
======================================== */
--color-gentologie-member-quartz: #abc1b1;
--color-gentologie-member-sphene: #83a38c;
--color-gentologie-member-jade: #5c8569;
--color-gentologie-member-emerald: #346947;
--color-gentologie-member-grandidierite: #004d28;
--color-gentologie-member-numerique: #83a38c; /* Sphène */
--color-gentologie-member-imprime: #5c8569; /* Jade */
--color-gentologie-member-elite: #346947; /* Emerald */
/* ========================================
OMBRES
======================================== */
--shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
--shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
--shadow-large: 0 8px 16px rgba(0, 0, 0, 0.2);
--shadow-hover: 0 4px 12px rgba(0, 77, 40, 0.15);
--shadow-focus: 0 0 0 3px rgba(0, 77, 40, 0.2);
/* ========================================
BORDER RADIUS
======================================== */
--radius-none: 0;
--radius-sm: 4px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-2xl: 20px;
--radius-full: 9999px;
/* ========================================
OPACITÉS
======================================== */
--opacity-disabled: 0.5;
--opacity-overlay: 0.75;
--opacity-overlay-dark: 0.85;
--opacity-subtle: 0.1;
--opacity-hover: 0.9;
/* ========================================
DIMENSIONS MENU
======================================== */
--menu-top-bar-height: 70px;
--menu-total-height: 120px;
--menu-mobile-height: 60px;
/* ========================================
ESPACEMENTS
======================================== */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-small: 0.75rem; /* 12px */
--spacing-md: 1rem; /* 16px */
--spacing-medium: 1.5rem; /* 24px */
--spacing-lg: 2rem; /* 32px */
--spacing-xl: 2.5rem; /* 40px */
--spacing-large: 3rem; /* 48px */
--spacing-xxl: 4rem; /* 64px */
--spacing-3xl: 5rem; /* 80px */
/* ========================================
DIMENSIONS PUBLICITÉ
======================================== */
--ad-width: 18.75rem; /* 300px */
--ad-height: 37.5rem; /* 600px */
--ad-width-mobile: 100%;
--ad-height-mobile: 15.625rem; /* 250px */
/* ========================================
LARGEURS CONTENEURS
======================================== */
--container-max-width: 1400px;
--content-max-width: 1200px;
--article-max-width: 900px;
--narrow-max-width: 700px;
/* ========================================
BREAKPOINTS (référence pour media queries)
======================================== */
--breakpoint-xs: 480px;
--breakpoint-sm: 768px;
--breakpoint-md: 1024px;
--breakpoint-lg: 1200px;
--breakpoint-xl: 1400px;
/* ========================================
TRANSITIONS
======================================== */
--transition-fast: 0.15s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
--transition-all: all 0.3s ease;
/* ========================================
Z-INDEX (ÉCHELLE ORGANISÉE)
======================================== */
--z-base: 1;
--z-dropdown: 100;
--z-sticky: 200;
--z-fixed: 300;
--z-modal-backdrop: 800;
--z-modal: 1000;
--z-tooltip: 1100;
--z-notification: 1200;
--z-top: 9999;
/* Z-index pour sections pleine largeur */
--z-fullwidth: var(--z-sticky);
--z-content: var(--z-modal);
/* ========================================
TYPOGRAPHY - FAMILLES DE POLICES
======================================== */
--font-family-primary: "meno-banner", serif;
--font-family-secondary: "ff-meta-serif-web-pro", serif;
--font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
/* ========================================
TYPOGRAPHY - TAILLES
======================================== */
--font-size-xs: 0.75rem; /* 12px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-lg: 1.125rem; /* 18px */
--font-size-xl: 1.25rem; /* 20px */
--font-size-2xl: 1.5rem; /* 24px */
--font-size-3xl: 1.875rem; /* 30px */
--font-size-4xl: 2.25rem; /* 36px */
--font-size-5xl: 3rem; /* 48px */
--font-size-6xl: 4rem; /* 64px */
/* ========================================
TYPOGRAPHY - LINE HEIGHT
======================================== */
--line-height-tight: 1.2;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.6;
--line-height-loose: 1.8;
/* ========================================
TYPOGRAPHY - FONT WEIGHT
======================================== */
--font-weight-light: 200;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--font-weight-black: 900;
/* ========================================
EFFECTS - FILTERS
======================================== */
--blur-sm: blur(4px);
--blur-md: blur(8px);
--blur-lg: blur(16px);
/* ========================================
BORDERS
======================================== */
--border-width-thin: 1px;
--border-width-normal: 2px;
--border-width-thick: 4px;
--border-style-solid: solid;
--border-style-dashed: dashed;
--border-style-dotted: dotted;
/* ========================================
Breakpoints
======================================== */
--breakpoint-xs: 480px;
--breakpoint-sm: 768px;
--breakpoint-md: 1024px;
--breakpoint-lg: 1200px;
--breakpoint-xl: 1400px;
/* ========================================
CLASSES UTILITAIRES (OPTIONNEL)
======================================== */
.shadow-sm { box-shadow: var(--shadow-small); }
.shadow-md { box-shadow: var(--shadow-medium); }
.shadow-lg { box-shadow: var(--shadow-large); }
.rounded-sm { border-radius: var(--radius-sm); }
.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-full { border-radius: var(--radius-full); }
.transition-fast { transition: var(--transition-fast); }
.transition-normal { transition: var(--transition-normal); }
.transition-slow { transition: var(--transition-slow); }
}
/* ========================================
NOTES D'UTILISATION
========================================
Exemple d'utilisation dans vos fichiers CSS :
.mon-bouton {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
transition: var(--transition-normal);
box-shadow: var(--shadow-small);
}
.mon-bouton:hover {
background: var(--color-gentologie-green-dark);
box-shadow: var(--shadow-medium);
}
======================================== */ /* Variables globales (couleurs, espacements, etc.) */
/* base.css - styles de base (body, typographie, etc.) - VERSION CORRIGÉE LÉGENDES */
@import url(https://use.typekit.net/wos2wpc.css);
/* ========================================
POLICES + TYPOGRAPHIE
======================================== */
body,
input,
select {
font-family: "meno-banner", serif;
}
h1 {
font-family: "meno-banner", serif;
text-decoration: none;
font-size: 4rem;
margin: 1rem 0 0.5rem 0;
}
h2 {
font-family: "meno-banner", serif;
text-decoration: none;
font-size: 3rem;
margin: 1rem 0 0.5rem 0;
}
h3 {
font-family: "meno-banner", serif;
text-decoration: none;
font-size: 2.25rem;
margin: 1rem 0 0.5rem 0;
}
h4 {
font-family: "meno-banner", serif;
text-decoration: none;
font-size: 2rem;
margin: 1rem 0 0.5rem 0;
}
h5 {
font-family: "meno-banner", serif;
text-decoration: none;
font-size: 1.5rem;
margin: 1rem 0 0.5rem 0;
}
h6 {
font-family: "meno-banner", serif;
text-decoration: none;
font-size: 1.25rem;
margin-top: 1rem;
margin-bottom: 0.75rem;
}
p {
font-family: "ff-meta-serif-web-pro", serif;
font-weight: 400;
font-size: 1rem;
color: var(--color-gentologie-text);
line-height: 1.6;
}
ul,
ol,
li {
font-family: "ff-meta-serif-web-pro", serif;
font-weight: 400;
font-size: 1em;
margin: 5px;
color: var(--color-gentologie-text);
line-height: 1.5;
}
p,
ul,
ol,
blockquote {
margin-bottom: 1.5em;
}
/* CORRIGÉ: Images sans marge automatique */
img {
margin-bottom: 0; /* CORRIGÉ: Supprime la marge automatique */
}
/* CORRIGÉ: Figure sans marge excessive */
figure {
margin-bottom: 1em; /* RÉDUIT de 2em à 1em */
}
/* CORRIGÉ: Figcaption collé à l'image */
figcaption {
margin: 2px 0 0 0; /* CORRIGÉ: 2px en haut au lieu de 0.5em, 0 en bas au lieu de 2em */
font-size: 0.8em;
color: var(--color-gentologie-text-secondary);
font-style: italic;
}
/* EXCEPTION: Figcaption dans les articles reste géré par article.css */
.article-content-wrapper figcaption {
margin: 0; /* Reset pour laisser article.css gérer */
}
.article-content-wrapper figure {
margin-bottom: 0; /* Reset pour laisser article.css gérer */
}
body {
background: var(--color-gentologie-background) !important;
margin: 0;
padding: 0;
overflow-x: hidden;
}
a {
color: inherit;
text-decoration: underline;
transition: color 0.3s ease;
}
.wp-element-caption {
font-size: 0.8em;
color: var(--color-gentologie-text-secondary);
text-align: center;
margin-top: 0.5rem;
}
/* ========================================
RESPONSIVE TYPOGRAPHY
======================================== */
@media (max-width: 768px) {
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
h3 {
font-size: 1.75rem;
}
h4 {
font-size: 1.5rem;
}
h5 {
font-size: 1.25rem;
}
h6 {
font-size: 1.1rem;
}
p {
font-size: 0.95rem;
}
/* CORRIGÉ: Légendes encore plus petites sur mobile */
figcaption {
font-size: 0.7em;
margin: 1px 0 0 0; /* Encore plus proche sur mobile */
}
}
@media (max-width: 480px) {
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.75rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
h5 {
font-size: 1.1rem;
}
h6 {
font-size: 1rem;
}
p {
font-size: 0.9rem;
}
/* CORRIGÉ: Légendes très petites sur petit mobile */
figcaption {
font-size: 0.6em;
margin: 1px 0 0 0;
}
}
/* ========================================
ARTICLES RÉCENTS
======================================== */
.articles-grid {
display: flex;
flex-direction: column;
gap: 2rem;
padding: 2rem 0;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.article-row {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 2rem;
width: 100%;
box-sizing: border-box;
}
.article-item {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform 0.3s ease;
box-sizing: border-box;
}
.article-item:hover {
transform: translateY(-2px);
}
.article-thumbnail {
width: 100%;
overflow: hidden;
}
.article-thumbnail img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
transition: transform 0.3s ease;
}
.article-item:hover .article-thumbnail img {
transform: scale(1.05);
}
.recent-article-meta {
margin-top: 1.2rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
}
.recent-article-meta a {
margin-top: 1.2rem;
font-size: 0.75rem;
color: var(--color-text-secondary);
text-decoration: none;
}
.recent-article-meta a:hover {
color: var(--color-gentologie-green);
}
.recent-article-title a,
.recent-article-title a:visited,
.recent-article-title a:hover,
.recent-article-title a:focus {
text-decoration: none !important;
}
.recent-article-title a {
font-size: 1.2rem;
font-weight: 600;
margin-top: 0.5rem;
color: var(--color-gentologie-title);
text-decoration: none !important;
display: block;
line-height: 1.3;
}
.recent-article-title a:hover {
color: var(--color-gentologie-green);
}
/* ========================================
RESPONSIVE ARTICLES
======================================== */
@media (max-width: 768px) {
.articles-grid {
padding: 1.5rem 0;
gap: 1.5rem;
}
.article-row {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.recent-article-title a {
font-size: 1.1rem;
}
}
@media (max-width: 480px) {
.articles-grid {
padding: 1rem 0;
gap: 1rem;
}
.article-row {
grid-template-columns: 1fr;
gap: 1rem;
}
.recent-article-title a {
font-size: 1rem;
}
.recent-article-meta {
font-size: 0.7rem;
}
}
/* ========================================
CORRECTIONS GÉNÉRALES
======================================== */
/* Empêcher les débordements */
* {
box-sizing: border-box;
}
/* Images responsives par défaut */
img {
max-width: 100%;
height: auto;
}
/* Améliorer l'accessibilité */
:focus {
outline: 2px solid var(--color-gentologie-green);
outline-offset: 2px;
}
/* Sélection de texte */
::selection {
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-background);
}
/* ==========================================================================
RECHERCHE - STYLES AMÉLIORÉS GENTOLOGIE
========================================================================== */
/* Page de recherche pleine largeur */
.search-page {
min-height: 100vh;
background-color: var(--color-gentologie-background);
}
.search-page .container {
max-width: 100%;
margin: 0;
height: 100%;
}
/* ==========================================================================
LAYOUTS EN DEUX COLONNES
========================================================================== */
/* Layout pour la page vide/accueil recherche */
.search-layout-empty {
display: grid;
grid-template-columns: 1fr 2fr;
min-height: 100vh;
}
/* Layout pour les résultats */
.search-layout-results {
display: grid;
grid-template-columns: 1fr 2fr;
min-height: 100vh;
}
/* ==========================================================================
COLONNE HERO IMAGE
========================================================================== */
.search-hero-column {
position: relative;
height: 100vh;
overflow: hidden;
}
.search-hero-image {
width: 100%;
height: 100%;
}
.search-hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ==========================================================================
COLONNE CONTENU
========================================================================== */
.search-form-column,
.search-results-column {
padding: 2rem;
padding-top: calc(var(--menu-total-height) + 2rem);
display: block;
background-color: var(--color-gentologie-background);
}
/* En-tête de recherche */
.search-header {
margin-bottom: var(--spacing-md);
width: auto;
text-align: left;
}
.search-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-md);
line-height: var(--line-height-tight);
}
.search-title span {
color: var(--color-gentologie-green);
}
.search-description {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text-secondary);
margin-bottom: var(--spacing-lg);
line-height: var(--line-height-relaxed);
}
/* ==========================================================================
FORMULAIRE DE RECHERCHE
========================================================================== */
.search-form-container {
margin-bottom: var(--spacing-md);
width: auto;
max-width: 400px;
}
.search-form-container.main-search {
margin-bottom: var(--spacing-lg);
}
.search-input-wrapper {
position: relative;
display: flex;
align-items: stretch;
background: var(--color-gentologie-white);
border: 2px solid var(--color-gentologie-border);
overflow: hidden;
box-shadow: var(--shadow-medium);
transition: var(--transition-normal);
}
.search-input-wrapper:focus-within {
border-color: var(--color-gentologie-green);
box-shadow: var(--shadow-hover);
}
.search-field {
flex: 1;
padding: var(--spacing-md) var(--spacing-medium);
border: none;
font-size: var(--font-size-base);
background: transparent;
outline: none;
font-family: var(--font-family-secondary);
}
.search-field::placeholder {
color: var(--color-gentologie-text-secondary);
}
.search-submit {
padding: var(--spacing-md) var(--spacing-medium);
background: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
border: none;
cursor: pointer;
font-weight: var(--font-weight-semibold);
transition: var(--transition-normal);
display: flex;
align-items: center;
justify-content: center;
min-width: 60px;
}
.search-submit:hover {
background: var(--color-gentologie-active);
}
.search-submit i {
font-size: var(--font-size-lg);
}
/* ==========================================================================
RECHERCHE AVANCÉE
========================================================================== */
.advanced-search {
margin-bottom: var(--spacing-md);
width: auto;
max-width: 400px;
}
.advanced-search-toggle {
background: none;
border: 1px solid var(--color-gentologie-green);
color: var(--color-gentologie-green);
padding: var(--spacing-sm) var(--spacing-md);
cursor: pointer;
font-size: var(--font-size-sm);
transition: var(--transition-normal);
font-family: var(--font-family-secondary);
}
.advanced-search-toggle:hover {
background: var(--color-gentologie-green);
color: var(--color-gentologie-white);
}
.advanced-search-form {
margin-top: var(--spacing-md);
padding: var(--spacing-medium);
background: transparent;
display: none; /* Caché par défaut */
}
.advanced-search-fields {
display: grid;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.search-field-group {
display: flex;
flex-direction: column;
}
.search-field-group label {
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-sm);
color: var(--color-gentologie-title);
font-family: var(--font-family-secondary);
}
.search-field-group input,
.search-field-group select {
padding: var(--spacing-small);
border: 1px solid var(--color-gentologie-border);
font-size: var(--font-size-base);
font-family: var(--font-family-secondary);
}
.advanced-search-submit {
background: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
padding: var(--spacing-small) var(--spacing-lg);
border: none;
cursor: pointer;
font-weight: var(--font-weight-semibold);
transition: var(--transition-normal);
}
.advanced-search-submit:hover {
background: var(--color-gentologie-active);
}
/* ==========================================================================
RÉSULTATS DE RECHERCHE EN LISTE SIMPLE
========================================================================== */
.search-results-count {
margin-bottom: var(--spacing-medium);
padding: var(--spacing-md);
background: var(--color-gentologie-background);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-title);
font-family: var(--font-family-secondary);
}
.search-results-list {
margin-bottom: var(--spacing-large);
}
.search-result-item-list {
padding: var(--spacing-md) 0;
border-bottom: 1px solid var(--color-gentologie-border);
transition: var(--transition-normal);
}
.search-result-item-list:last-child {
border-bottom: none;
}
.search-result-item-list:hover {
background-color: var(--color-gentologie-green);
margin: 0 calc(-1 * var(--spacing-md));
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
.search-result-item-list:hover .search-result-title a,
.search-result-item-list:hover .search-result-excerpt {
color: var(--color-gentologie-text-alt);
}
.search-result-content {
display: block;
}
.search-result-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-sm);
line-height: var(--line-height-tight);
}
.search-result-title a {
color: var(--color-gentologie-title);
text-decoration: none;
transition: var(--transition-normal);
}
.search-result-title a:hover {
color: var(--color-gentologie-green);
}
/* Override hover when parent is hovered */
.search-result-item-list:hover .search-result-title a:hover {
color: var(--color-gentologie-text-alt);
}
.search-result-excerpt {
color: var(--color-gentologie-text-secondary);
line-height: var(--line-height-relaxed);
font-family: var(--font-family-secondary);
font-size: var(--font-size-base);
margin: 0;
}
/* ==========================================================================
PAGINATION
========================================================================== */
.search-pagination {
display: flex;
justify-content: center;
margin-top: var(--spacing-large);
}
.search-pagination .nav-links {
display: flex;
gap: var(--spacing-sm);
}
.search-pagination a,
.search-pagination span {
padding: var(--spacing-small) var(--spacing-md);
background: var(--color-gentologie-white);
border: 1px solid var(--color-gentologie-border);
text-decoration: none;
color: var(--color-gentologie-text);
transition: var(--transition-normal);
font-family: var(--font-family-secondary);
}
.search-pagination a:hover,
.search-pagination .current {
background: var(--color-gentologie-green);
color: var(--color-gentologie-white);
border-color: var(--color-gentologie-green);
}
/* ==========================================================================
SUGGESTIONS DROPDOWN
========================================================================== */
.search-suggestions-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--color-gentologie-white);
box-shadow: var(--shadow-large);
z-index: var(--z-dropdown);
display: none;
max-height: 400px;
overflow-y: auto;
border: 1px solid var(--color-gentologie-border);
border-top: none;
}
.search-suggestions-dropdown.active {
display: block;
}
.search-suggestions-list {
list-style: none;
margin: 0;
padding: 0;
}
.search-suggestion-item {
border-bottom: 1px solid var(--color-gentologie-background);
transition: var(--transition-fast);
}
.search-suggestion-item:hover,
.search-suggestion-item.selected {
background-color: var(--color-gentologie-green-light);
}
.search-suggestion-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--spacing-small) var(--spacing-md);
text-decoration: none;
color: var(--color-gentologie-text);
transition: var(--transition-fast);
}
.search-suggestion-link:hover {
color: var(--color-gentologie-green);
}
.suggestion-title {
font-weight: var(--font-weight-medium);
font-size: var(--font-size-sm);
font-family: var(--font-family-secondary);
}
.suggestion-type {
font-size: var(--font-size-xs);
color: var(--color-gentologie-text-secondary);
text-transform: uppercase;
font-weight: var(--font-weight-semibold);
}
/* Surlignage des termes */
.search-highlight {
background-color: var(--color-gentologie-yellow);
color: var(--color-gentologie-text);
padding: 0.1em 0.2em;
font-weight: var(--font-weight-semibold);
}
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 1024px) and (min-width: 769px) {
/* TABLETTE - Garder l'image mais ajuster */
.search-layout-empty,
.search-layout-results {
grid-template-columns: 1fr 2fr;
}
.search-hero-column {
height: 100vh;
}
.search-form-column,
.search-results-column {
padding: 1.5rem;
padding-top: calc(var(--menu-total-height) + 1.5rem);
}
}
@media (max-width: 768px) {
/* MOBILE - Supprimer l'image */
.search-layout-empty,
.search-layout-results {
grid-template-columns: 1fr;
}
.search-hero-column {
display: none;
}
.search-form-column,
.search-results-column {
padding: 1rem;
padding-top: calc(var(--menu-mobile-height) + 1rem);
}
.search-title {
font-size: var(--font-size-3xl);
}
.search-field {
padding: var(--spacing-small) var(--spacing-md);
}
.search-submit {
padding: var(--spacing-small) var(--spacing-md);
min-width: 50px;
}
.advanced-search-fields {
grid-template-columns: 1fr;
}
}
/* ===== Widget Related Posts ===== */
.related-posts-widget {
/* Même largeur et positionnement que la publicité */
position: relative;
width: 100vw; /* Pleine largeur de la fenêtre comme la pub */
max-width: none; /* Supprime la limitation */
left: 50%;
transform: translateX(-50%);
margin: var(--spacing-xl) 0;
padding: var(--spacing-lg) var(--spacing-md) !important;
box-sizing: border-box;
}
.related-posts-header {
text-align: center;
margin-bottom: var(--spacing-lg);
max-width: 1000px; /* Même largeur que le grid */
margin-left: auto;
margin-right: auto;
}
.related-posts-title {
font-size: var(--font-size-2xl);
text-transform: uppercase;
font-weight: var(--font-weight-normal) !important;
color: var(--color-gentologie-title);
margin: 0 0 var(--spacing-md) 0;
line-height: var(--line-height-tight);
padding: 1rem !important;
}
.related-posts-divider {
width: 60px;
height: 3px;
background-color: var(--color-gentologie-green);
margin: 0 auto;
}
.related-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
margin: var(--spacing-lg) auto 0 auto; /* Centré */
width: 100%;
max-width: 1000px; /* Même largeur maximale que l'image de pub */
}
.related-post-item {
background: var(--color-background);
overflow: hidden;
transition: var(--transition-normal);
box-shadow: var(--shadow-light);
display: flex;
flex-direction: column; /* Assure le layout vertical : image puis titre */
}
.related-post-link {
display: flex;
flex-direction: column; /* Layout vertical : image en haut, titre en bas */
text-decoration: none;
color: inherit;
height: 100%;
}
.related-post-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 10; /* Retour à un aspect ratio normal */
overflow: hidden;
background-color: var(--color-gentologie-light);
}
.related-post-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-normal);
}
.related-post-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-gentologie-light);
color: var(--color-text-secondary);
}
.placeholder-icon {
font-size: var(--font-size-3xl);
opacity: 0.5;
}
.related-post-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: auto;
min-height: auto;
width: 100%;
}
.related-post-title {
font-size: var(--font-size-base) !important;
color: var(--color-gentologie-title);
line-height: var(--line-height-normal);
font-weight: var(--font-weight-normal) !important;
margin: 0;
width: 100%;
word-wrap: break-word;
hyphens: auto;
overflow-wrap: break-word;
text-align: left;
}
/* ===== Responsive Related Posts ===== */
/* Tablette - jusqu'à 1024px */
@media screen and (max-width: 1024px) {
.related-posts-widget {
max-width: 100%;
padding: var(--spacing-lg) var(--spacing-md);
}
.related-posts-grid {
grid-template-columns: repeat(3, 1fr); /* Garde 3 colonnes sur tablette */
gap: var(--spacing-md);
}
.related-posts-title {
font-size: var(--font-size-xl);
}
}
/* Mobile - jusqu'à 768px */
@media screen and (max-width: 768px) {
.related-posts-widget {
width: 100%;
max-width: 100%;
left: auto;
transform: none;
margin: var(--spacing-lg) auto;
position: relative;
}
.related-posts-grid {
grid-template-columns: 1fr; /* 1 colonne sur mobile seulement */
gap: var(--spacing-md);
max-width: 100%;
}
.related-posts-header {
max-width: 100%;
}
.related-post-item {
display: flex;
flex-direction: row;
height: auto;
}
.related-post-thumbnail {
width: 70px; /* Image très petite sur mobile */
min-width: 70px;
aspect-ratio: 3 / 2;
}
.related-post-content {
height: auto;
min-height: auto;
flex: 1;
justify-content: flex-start;
width: 100%;
}
.related-post-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
margin: 0;
width: 100%;
word-wrap: break-word;
hyphens: auto;
overflow-wrap: break-word;
}
.related-posts-title {
font-size: var(--font-size-lg);
}
}
/* Petit mobile - jusqu'à 600px */
@media screen and (max-width: 600px) {
.related-posts-widget {
margin: var(--spacing-md) 0;
}
.related-posts-header {
margin-bottom: var(--spacing-md);
}
.related-posts-title {
font-size: var(--font-size-base);
}
.related-posts-divider {
width: 40px;
height: 2px;
}
.related-posts-grid {
gap: var(--spacing-sm);
}
.related-post-thumbnail {
width: 60px; /* Image encore plus petite */
min-width: 60px;
}
.related-post-content {
padding: var(--spacing-xs);
min-height: auto;
width: 100%;
}
.related-post-title {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
margin: 0;
width: 100%;
word-wrap: break-word;
hyphens: auto;
overflow-wrap: break-word;
}
}
/* Très petit écran - jusqu'à 400px */
@media screen and (max-width: 400px) {
.related-post-item {
flex-direction: column;
}
.related-post-thumbnail {
width: 100%;
aspect-ratio: 3 / 1; /* Image très plate sur très petit écran */
}
.related-post-content {
min-height: auto;
width: 100%;
}
.related-post-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
margin: 0;
width: 100%;
word-wrap: break-word;
hyphens: auto;
overflow-wrap: break-word;
}
}
/* === ORDER CONFIRMATION PAGE === */
.gentologie-order-confirmation-wrapper {
max-width: 800px;
margin: 60px auto;
padding: var(--spacing-lg);
}
.order-confirmation-success,
.order-confirmation-failed {
text-align: center;
}
.success-icon,
.failed-icon {
margin: 0 auto 30px;
}
.confirmation-title {
font-family: var(--font-heading);
font-size: 2.5rem;
color: var(--color-dark-green);
margin: 20px 0;
}
.failed-title {
color: #d63638;
}
.confirmation-message {
font-size: 1.125rem;
color: var(--color-text);
margin: 20px 0 40px;
}
.order-details-box {
background: #fff;
border: 2px solid var(--color-dark-green);
border-radius: 8px;
padding: 30px;
margin: 40px 0;
text-align: left;
}
.order-details-box h2 {
font-family: var(--font-heading);
font-size: 1.5rem;
color: var(--color-dark-green);
margin: 0 0 20px;
text-align: center;
}
.order-overview {
list-style: none;
padding: 0;
margin: 0;
}
.order-overview li {
display: flex;
justify-content: space-between;
padding: 15px 0;
border-bottom: 1px solid #e0e0e0;
}
.order-overview li:last-child {
border-bottom: none;
}
.order-overview .label {
font-weight: 600;
color: var(--color-text);
}
.order-overview .value {
color: var(--color-dark-green);
font-weight: 700;
}
.confirmation-actions {
display: flex;
gap: 15px;
justify-content: center;
margin-top: 40px;
}
.confirmation-actions .button {
padding: 12px 30px;
border-radius: 4px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.button-primary {
background: var(--color-dark-green);
color: var(--color-cream);
}
.button-primary:hover {
background: var(--color-dark-green-hover);
}
.button-secondary {
background: transparent;
border: 2px solid var(--color-dark-green);
color: var(--color-dark-green);
}
.button-secondary:hover {
background: var(--color-dark-green);
color: var(--color-cream);
} /* Reset CSS et styles de base */
/* layout.css - Structure et responsive */
/* TOUTES les media queries sont dans ce fichier */
/* ===========================================
NAVIGATION PRINCIPALE DESKTOP
=========================================== */
.menu-logo-row {
display: flex;
justify-content: center;
align-items: center;
height: 70px;
padding: 0 var(--spacing-lg);
border-bottom: 1px solid var(--color-gentologie-border) !important;
}
.main-nav {
position: relative;
border-top: 1.5px solid var(--color-gentologie-border) !important;
border-bottom: 1.5px solid var(--color-gentologie-border) !important;
background-color: var(--color-gentologie-background);
}
.nav-menu {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
list-style: none;
padding: 0;
margin: 0;
gap: var(--spacing-md);
flex-wrap: nowrap;
overflow-x: auto;
}
.nav-menu .menu-item {
margin: 0;
white-space: nowrap;
}
.nav-menu .menu-item a {
font-family: var(--font-family-primary);
text-decoration: none;
color: var(--color-gentologie-green);
font-size: var(--font-size-base);
padding: var(--spacing-sm) var(--spacing-sm);
transition: color var(--transition-normal);
display: inline-block;
}
.nav-menu .menu-item a:hover {
color: var(--color-gentologie-text-secondary);
}
/* ===========================================
BARRE SUPÉRIEURE MOBILE
=========================================== */
.mobile-top-bar {
display: flex;
align-items: center;
justify-content: space-between;
height: 75px;
padding: 0 var(--spacing-md);
border-bottom: 1px solid var(--color-gentologie-border);
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: var(--color-gentologie-background);
z-index: 99998 !important;
box-sizing: border-box;
}
/* ===========================================
NEWSLETTER - COLONNE FORMULAIRE
=========================================== */
.newsletter-form-column {
flex: 1 1 320px;
max-width: 600px;
}
.newsletter-form-column h2 {
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-3xl);
color: var(--color-gentologie-title-alt);
text-align: center;
}
.newsletter-form-subtitle {
margin-bottom: var(--spacing-medium);
color: var(--color-gentologie-text-alt);
font-weight: var(--font-weight-normal);
text-align: center;
}
.newsletter-form-column form label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-green);
}
.newsletter-form-column form input,
.newsletter-form-column form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
border: 1px solid var(--color-gentologie-border);
padding: var(--spacing-md);
font-size: var(--font-size-lg);
width: 100%;
margin-bottom: var(--spacing-md);
box-sizing: border-box;
height: 3.75rem;
line-height: var(--line-height-normal);
}
.newsletter-form-column form input[type="checkbox"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
width: auto;
height: auto;
display: inline;
margin: 0;
padding: 0;
}
.newsletter-form-column form select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 10 6' fill='%23004d28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6H0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--spacing-md) center;
background-size: var(--spacing-md);
padding-right: 2.5rem;
cursor: pointer;
}
.newsletter-form-column form input::placeholder {
color: rgba(0, 77, 40, 0.7);
}
/* ===========================================
NEWSLETTER - CONFIDENTIALITÉ ET GDPR
=========================================== */
.newsletter-privacy {
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
}
.newsletter-privacy input[type="checkbox"] {
margin-right: var(--spacing-sm);
width: 1.2rem;
height: 1.2rem;
}
.newsletter-privacy label {
font-size: var(--font-size-sm);
color: var(--color-gentologie-background-alt);
}
.newsletter-gdpr {
margin-bottom: var(--spacing-md);
font-size: var(--font-size-sm);
}
.newsletter-gdpr-label {
display: flex !important;
align-items: flex-start;
gap: var(--spacing-small);
line-height: var(--line-height-normal);
cursor: pointer;
font-weight: var(--font-weight-normal) !important;
}
.newsletter-gdpr-label input[type="checkbox"] {
width: 1.2rem;
height: 1.2rem;
margin: 0;
cursor: pointer;
flex-shrink: 0;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
.newsletter-gdpr-label span {
flex: 1;
font-size: var(--font-size-sm);
margin-top: 0.1rem;
}
.newsletter-gdpr-label,
.newsletter-gdpr-label span,
.newsletter-gdpr-label a {
color: var(--color-gentologie-text-alt) !important;
}
.newsletter-gdpr-label a {
text-decoration: underline;
}
.newsletter-gdpr-label a:hover {
text-decoration: none;
}
/* ===========================================
NEWSLETTER - BOUTON DE SOUMISSION
=========================================== */
.newsletter-form-column form button {
background-color: transparent;
color: var(--color-gentologie-green);
border: 2px solid var(--color-gentologie-border-alt);
font-family: var(--font-family-primary);
padding: var(--spacing-md) var(--spacing-medium);
cursor: pointer;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
transition: background-color var(--transition-normal), color var(--transition-normal);
width: 100%;
max-width: 320px;
display: block;
margin-top: var(--spacing-sm);
}
.newsletter-form-column form button:hover,
.newsletter-form-column form button:focus {
background-color: var(--color-gentologie-background-button-alt);
color: var(--color-gentologie-text-button-alt);
}
/* ===========================================
NEWSLETTER - COLONNE IMAGE
=========================================== */
.newsletter-image-column {
flex: 1 1 300px;
max-width: 400px;
text-align: center;
}
.newsletter-image-column img,
.newsletter-image-column picture {
max-width: 100%;
height: auto;
}
/* ===========================================
CORRECTIONS DÉBORDEMENT HORIZONTAL
=========================================== */
* {
box-sizing: border-box;
}
body,
html {
overflow-x: hidden;
max-width: 100vw;
}
/* ===========================================
RESPONSIVE - BREAKPOINTS UNIFIÉS
=========================================== */
/* ========================================
GRAND DESKTOP - 1200px et plus
======================================== */
@media (min-width: 1200px) {
/* Structure desktop visible */
.menu-header-wrapper.desktop-menu,
.desktop-menu {
display: block !important;
}
/* Barre du haut avec logo et icônes */
.menu-top-bar {
display: flex !important;
}
/* Navigation principale en dessous */
.main-nav {
display: block !important;
}
.nav-menu {
display: flex !important;
}
/* Éléments individuels */
.menu-logo,
.menu-actions,
.menu-icon,
.menu-subscribe-button {
display: flex !important;
}
/* Menu mobile complètement caché */
.mobile-header,
.mobile-top-bar,
.mobile-menu,
.mobile-menu-toggle,
.mobile-logo,
.mobile-subscribe-button,
.mobile-nav-menu,
.mobile-menu-content,
.mobile-menu-actions,
.mobile-menu-newsletter,
.mobile-languages,
.mobile-secondary-bar,
.mobile-newsletter-bar {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: -9999 !important;
}
body {
padding-top: 0;
}
/* Empêcher le body de se bloquer */
body.mobile-menu-open {
overflow: auto !important;
position: static !important;
width: auto !important;
height: auto !important;
}
}
/* ========================================
TABLETTE ET MOBILE - jusqu'à 1199px
======================================== */
@media (max-width: 1199px) {
/* Menu desktop caché */
.menu-header-wrapper,
.menu-header-wrapper.desktop-menu,
.desktop-menu,
.menu-top-bar,
.menu-logo,
.menu-actions .menu-icon,
.menu-subscribe-button {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
/* Menu mobile visible */
.mobile-header {
display: block !important;
visibility: visible !important;
}
.mobile-top-bar,
.mobile-menu-toggle,
.mobile-logo,
.mobile-subscribe-button {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
.mobile-menu {
display: block !important;
}
/* NE PAS forcer display sur mobile-nav-menu - laisser header.css gérer */
.mobile-menu-actions {
display: flex !important;
}
.mobile-menu-action-link {
display: flex !important;
}
/* Structure */
.site-header {
position: sticky;
}
body {
padding-top: 75px;
overflow-x: hidden;
}
.mobile-menu,
.mobile-top-bar {
max-width: 100vw;
overflow-x: hidden;
}
/* Tailles logo */
.mobile-logo img {
max-height: 60px !important;
}
}
/* ========================================
TABLETTE - jusqu'à 1024px
======================================== */
@media (max-width: 1024px) {
.newsletter-form-column,
.newsletter-image-column {
max-width: 100%;
flex: 1 1 100%;
}
}
/* ========================================
MOBILE - jusqu'à 768px
======================================== */
@media (max-width: 768px) {
.mobile-logo img {
max-height: 50px !important;
}
}
/* ========================================
TRÈS PETITS ÉCRANS - jusqu'à 480px
======================================== */
@media (max-width: 480px) {
.mobile-subscribe-button {
font-size: var(--font-size-xs);
padding: var(--spacing-xs) var(--spacing-sm);
}
.mobile-logo img {
max-height: 40px !important;
}
.mobile-menu-action-link {
font-size: var(--font-size-sm);
padding: var(--spacing-small) var(--spacing-sm);
}
.mobile-menu-newsletter-link {
font-size: var(--font-size-sm);
padding: var(--spacing-small) var(--spacing-md);
}
.newsletter-form-column h2 {
font-size: var(--font-size-xl);
}
.newsletter-form-column form input,
.newsletter-form-column form select {
font-size: var(--font-size-sm);
padding: var(--spacing-xs);
height: 2.8rem;
}
}
/* ========================================
MODE PAYSAGE MOBILE
======================================== */
@media (max-width: 1100px) and (orientation: landscape) {
.mobile-logo img {
max-height: 38px !important;
}
.mobile-top-bar {
height: 65px;
}
body {
padding-top: 65px;
}
.mobile-menu {
top: 65px;
height: calc(100vh - 65px);
}
}
/* ========================================
ANIMATIONS - Désactiver si nécessaire
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
} /* Structure de page et grilles */
/**
* Système de Consentement Cookies - Gentologie
* Design élégant et conforme PIPEDA & Loi 25
*
* @package Gentologie
* @version 2.0.0
*/
/* Compensation pour la bannière fixe */
body.cookie-banner-active {
padding-bottom: 200px; /* Ajuste selon la hauteur de ta bannière */
}
@media (max-width: 768px) {
body.cookie-banner-active {
padding-bottom: 300px; /* Plus de hauteur sur mobile */
}
}
/* ========================================
BANNIÈRE PRINCIPALE
======================================== */
.gentologie-cookie-banner {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
padding: var(--spacing-medium);
box-shadow: var(--shadow-large);
z-index: 3147483535 !important;
animation: slideUp 0.4s ease-out;
border-top: 3px solid var(--color-gentologie-green);
}
@keyframes slideUp {
from {
transform: translateY(100%);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.cookie-banner-content {
max-width: var(--content-max-width);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--spacing-xl);
}
.cookie-banner-text {
flex: 1;
}
.cookie-banner-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin: 0 0 var(--spacing-sm) 0;
color: var(--color-gentologie-green);
letter-spacing: 0.5px;
}
.cookie-banner-description {
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-green);
line-height: var(--line-height-relaxed);
margin: 0 0 var(--spacing-sm) 0;
opacity: 0.95;
}
.cookie-banner-legal {
font-size: var(--font-size-xs);
margin: 0;
opacity: 0.8;
}
.cookie-banner-legal a {
color: var(--color-gentologie-green);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: var(--transition-normal);
}
.cookie-banner-legal a:hover {
border-bottom-color: var(--color-gentologie-yellow);
}
.cookie-banner-actions {
display: flex;
gap: var(--spacing-md);
flex-shrink: 0;
}
/* ========================================
BOUTONS
======================================== */
.cookie-btn {
font-family: var(--font-family-secondary);
padding: var(--spacing-small) var(--spacing-medium);
border: var(--border-width-normal) var(--border-style-solid);
border-radius: var(--radius-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: var(--transition-normal);
white-space: nowrap;
letter-spacing: 0.3px;
text-transform: uppercase;
}
.cookie-btn-settings {
background: transparent;
color: var(--color-gentologie-green);
border-color:var(--color-gentologie-green);
}
.cookie-btn-settings:hover {
border-color: var(--color-gentologie-green);
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
}
.cookie-btn-accept-all {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
border-color: var(--color-gentologie-green);
}
.cookie-btn-accept-all:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.cookie-btn-primary {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
border-color: var(--color-gentologie-green);
}
.cookie-btn-primary:hover {
background: var(--color-gentologie-background);
}
.cookie-btn-secondary {
background: transparent;
color: var(--color-gentologie-green);
border-color: var(--color-gentologie-green);
}
.cookie-btn-secondary:hover {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
}
/* ========================================
MODAL
======================================== */
.gentologie-cookie-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-modal);
display: flex;
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-out;
z-index: 3147483535 !important;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.cookie-modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 77, 40, var(--opacity-overlay-dark));
backdrop-filter: var(--blur-sm);
z-index: 3147483535 !important;
}
.cookie-modal-content {
position: relative;
background: var(--color-gentologie-background);
color: var(--color-gentologie-text);
max-width: 750px;
width: 90%;
max-height: 90vh;
border-radius: var(--radius-md);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
animation: slideInModal 0.3s ease-out;
border: 2px solid var(--color-gentologie-green);
z-index: 3147483535 !important;
}
@keyframes slideInModal {
from {
transform: scale(0.95) translateY(20px);
opacity: 0;
}
to {
transform: scale(1) translateY(0);
opacity: 1;
}
}
.cookie-modal-header {
padding: var(--spacing-medium);
border-bottom: 2px solid var(--color-gentologie-green);
display: flex;
align-items: center;
justify-content: space-between;
background: var(--color-gentologie-green-light);
}
.cookie-modal-header h2 {
font-family: var(--font-family-primary);
margin: 0;
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-green);
letter-spacing: 0.5px;
}
.cookie-modal-close {
background: transparent;
border: none;
font-size: var(--font-size-4xl);
line-height: 1;
color: var(--color-gentologie-green);
cursor: pointer;
padding: 0;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
transition: var(--transition-normal);
}
.cookie-modal-close:hover {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
transform: rotate(90deg);
}
.cookie-modal-body {
padding: var(--spacing-medium);
overflow-y: auto;
flex: 1;
}
.cookie-modal-intro {
font-family: var(--font-family-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin: 0 0 var(--spacing-medium) 0;
color: var(--color-gentologie-text-secondary);
}
/* ========================================
CATÉGORIES
======================================== */
.cookie-category {
background: var(--color-gentologie-background-box);
border-radius: var(--radius-sm);
padding: var(--spacing-lg);
margin-bottom: var(--spacing-md);
border: 1px solid var(--color-gentologie-accent);
transition: var(--transition-normal);
}
.cookie-category:hover {
box-shadow: var(--shadow-small);
}
.cookie-category-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: var(--spacing-small);
}
.cookie-category-title {
display: flex;
align-items: center;
gap: var(--spacing-md);
flex: 1;
}
.cookie-icon {
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
border-radius: var(--radius-sm);
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
}
.cookie-category-title h3 {
font-family: var(--font-family-primary);
margin: 0;
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-green);
}
.cookie-badge {
font-family: var(--font-family-secondary);
font-size: var(--font-size-xs);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: var(--radius-full);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cookie-badge-required {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
}
.cookie-category-description {
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
color: var(--color-gentologie-text-secondary);
}
.cookie-category-description p {
margin: 0 0 var(--spacing-small) 0;
}
.cookie-category-description p:last-child {
margin-bottom: 0;
}
.cookie-category-description strong {
color: var(--color-gentologie-green);
font-weight: var(--font-weight-semibold);
}
/* ========================================
TOGGLE SWITCH ÉLÉGANT
======================================== */
.cookie-toggle {
position: relative;
display: inline-block;
width: 56px;
height: 30px;
}
.cookie-toggle input {
opacity: 0;
width: 0;
height: 0;
}
.cookie-toggle-slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: var(--color-gentologie-accent);
transition: var(--transition-normal);
border-radius: var(--radius-full);
border: 2px solid var(--color-gentologie-green);
}
.cookie-toggle-slider:before {
position: absolute;
content: "";
height: 22px;
width: 22px;
left: 2px;
bottom: 2px;
background-color: var(--color-gentologie-white);
transition: var(--transition-normal);
border-radius: var(--radius-full);
box-shadow: var(--shadow-small);
}
.cookie-toggle input:checked + .cookie-toggle-slider {
background-color: var(--color-gentologie-green);
}
.cookie-toggle input:checked + .cookie-toggle-slider:before {
transform: translateX(26px);
}
/* ========================================
FOOTER MODAL
======================================== */
.cookie-modal-footer {
padding: var(--spacing-medium);
border-top: 2px solid var(--color-gentologie-green);
background: var(--color-gentologie-green-light);
display: flex;
gap: var(--spacing-md);
justify-content: flex-end;
}
/* ========================================
BOUTON PARAMÈTRES FIXE
======================================== */
.cookie-settings-trigger {
position: fixed;
bottom: var(--spacing-lg);
left: var(--spacing-lg);
width: 54px;
height: 54px;
border-radius: var(--radius-full);
background: var(--color-gentologie-green);
border: 2px solid var(--color-gentologie-background);
font-family: var(--font-family-primary);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-text-alt);
cursor: pointer;
box-shadow: var(--shadow-large);
z-index: var(--z-fixed);
transition: var(--transition-normal);
display: none;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.cookie-settings-trigger:hover {
transform: scale(1.05);
box-shadow: 0 6px 20px rgba(0, 77, 40, 0.4);
background: var(--color-gentologie-green-dark);
}
.cookie-settings-trigger.visible {
display: flex;
align-items: center;
justify-content: center;
animation: fadeInBounce 0.5s ease-out;
z-index: 3147483535 !important;
}
@keyframes fadeInBounce {
0% {
transform: scale(0);
opacity: 0;
}
50% {
transform: scale(1.1);
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 768px) {
.cookie-banner-content {
flex-direction: column;
gap: var(--spacing-lg);
}
.cookie-banner-actions {
width: 100%;
flex-direction: column;
}
.cookie-btn {
width: 100%;
}
.cookie-modal-content {
width: 95%;
max-height: 95vh;
}
.cookie-modal-header h2 {
font-size: var(--font-size-2xl);
}
.cookie-modal-footer {
flex-direction: column;
}
.cookie-settings-trigger {
bottom: var(--spacing-md);
left: var(--spacing-md);
width: 50px;
height: 50px;
font-size: 10px;
}
}
/* ========================================
ÉTATS
======================================== */
.gentologie-cookie-banner.hidden,
.gentologie-cookie-modal.hidden {
display: none !important;
}
/* ========================================
ACCESSIBILITÉ
======================================== */
.cookie-btn:focus,
.cookie-toggle input:focus + .cookie-toggle-slider,
.cookie-modal-close:focus,
.cookie-settings-trigger:focus {
outline: 2px solid var(--color-gentologie-yellow);
outline-offset: 2px;
}
/* ========================================
PRINT
======================================== */
@media print {
.gentologie-cookie-banner,
.gentologie-cookie-modal,
.cookie-settings-trigger {
display: none !important;
}
} /* Barre de cookies */
/* === 2. NAVIGATION === */
/* header.css - Styles visuels du menu (sans responsive) */
/* Les media queries sont dans layout.css */
/* ===========================================
VARIABLES CSS ET CORRECTIONS GLOBALES
=========================================== */
/* Corrections pour les hauteurs */
.menu-icon:not(:last-child)::after,
.menu-icon:first-child::before,
.menu-top-bar::after {
height: 135px;
}
/* ===========================================
SUPPRESSION CADRE VERT AU CLIC SUR ICÔNES
=========================================== */
/* Style au survol des éléments */
#menu-primary .menu-item a:hover {
color: var(--color-text-secondary);
}
/* Style pour l'élément actif */
#menu-primary .current-menu-item a {
font-weight: bold;
border-bottom: 2px solid var(--color-gentologie-border);
}
.menu-icon,
.menu-icon *,
.menu-icon a,
.menu-icon button,
.header-bag,
.header-bag *,
.header-bag a,
.header-bag button {
outline: none !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
.menu-icon:focus,
.menu-icon:active,
.menu-icon:hover,
.menu-icon *:focus,
.menu-icon *:active,
.menu-icon *:hover,
.menu-icon a:focus,
.menu-icon a:active,
.menu-icon a:hover,
.menu-icon button:focus,
.menu-icon button:active,
.menu-icon button:hover {
outline: none !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
.header-bag:focus,
.header-bag:active,
.header-bag:hover,
.header-bag *:focus,
.header-bag *:active,
.header-bag *:hover {
outline: none !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
.menu-actions *:focus,
.menu-actions *:active {
outline: none !important;
border: none !important;
box-shadow: none !important;
background: transparent !important;
}
.menu-top-bar *:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
/* ===========================================
STRUCTURE DE BASE MODERNISÉE
=========================================== */
body {
margin: 0;
padding: 0;
}
.site-header {
position: sticky;
top: 0;
background: var(--color-gentologie-background);
backdrop-filter: var(--backdrop-blur);
-webkit-backdrop-filter: var(--backdrop-blur);
border-bottom: 1px solid var(--color-gentologie-green);
z-index: var(--z-sticky);
width: 100%;
transition: all var(--transition-normal);
}
nav {
padding: var(--spacing-sm) 0;
position: relative;
}
.site-content {
margin-top: 0;
}
.menu-header-wrapper {
width: 100%;
}
.menu-header-wrapper.desktop-menu {
position: relative;
top: 0;
background: transparent;
z-index: var(--z-top) !important;
width: 100%;
}
/* ===========================================
MENU DESKTOP - BARRE SUPÉRIEURE GLASSMORPHISME
=========================================== */
.menu-top-bar {
background: var(--color-gentologie-background) !important;
position: relative !important;
justify-content: flex-start !important;
align-items: center !important;
height: 135px !important;
box-sizing: border-box !important;
z-index: var(--z-modal) !important;
overflow: hidden;
position: relative;
width: 100%;
}
.menu-top-bar::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
pointer-events: none;
z-index: -1;
}
.menu-left-space {
width: auto;
}
/* ===========================================
DEUX BOUTONS DISTINCTS : CONNEXION + ABONNEMENT
=========================================== */
/* BOUTON CONNEXION - Style simple */
.login-button {
align-items: center;
gap: 6px;
padding: 8px 12px;
border: 1px solid var(--color-gentologie-border);
background: transparent;
color: var(--color-gentologie-text);
text-decoration: none;
font-size: 14px;
transition: var(--transition-normal);
height: auto;
box-sizing: border-box;
margin-left: var(--spacing-sm);
}
.login-button:hover {
background: var(--color-gentologie-background-box);
color: var(--color-gentologie-green);
border-color: var(--color-gentologie-green);
transform: translateY(-1px);
}
/* BOUTON ABONNEMENT - Style premium */
.subscribe-button {
align-items: center;
gap: 6px;
padding: 10px 16px;
border: 2px solid var(--color-gentologie-green);
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-size: 14px;
font-weight: var(--font-weight-bold);
transition: var(--transition-normal);
height: auto;
box-sizing: border-box;
margin-left: var(--spacing-sm);
margin-right: var(--spacing-md);
}
.subscribe-button:hover {
background: transparent;
color: var(--color-gentologie-green);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 61, 34, 0.3);
}
/* Intégration dans le menu */
.menu-actions .login-button,
.menu-actions .subscribe-button {
white-space: nowrap;
align-self: center;
}
/* ===========================================
LOGO OPTIMISÉ AVEC ANIMATION D'ENTRÉE
=========================================== */
.menu-logo {
position: absolute !important;
left: 50% !important;
top: 50% !important;
transform: translate(-50%, -50%) !important;
z-index: var(--z-modal) !important;
}
.menu-logo img {
height: 100px;
width: auto;
display: block !important;
}
.menu-logo a {
display: block !important;
line-height: 0 !important;
}
/* ===========================================
ACTIONS ET ICÔNES MODERNISÉES
=========================================== */
.menu-actions {
margin-left: auto;
align-items: center;
height: 135px !important;
position: relative;
z-index: 1;
gap: 2px;
padding-right: none;
}
.menu-icon {
position: relative !important;
align-items: center !important;
justify-content: center !important;
width: 60px !important;
height: 135px !important;
padding: 0 var(--spacing-md) !important;
color: var(--color-gentologie-green) !important;
font-size: var(--font-size-base) !important;
box-sizing: border-box !important;
cursor: pointer !important;
transition: all var(--transition-normal) !important;
overflow: hidden;
animation: iconEntrance 0.8s var(--transition-normal) both;
}
/* Animation d'entrée échelonnée pour chaque icône */
.menu-icon:nth-child(1) { animation-delay: 0.1s; }
.menu-icon:nth-child(2) { animation-delay: 0.2s; }
.menu-icon:nth-child(3) { animation-delay: 0.3s; }
.menu-icon:nth-child(4) { animation-delay: 0.4s; }
.menu-icon:nth-child(5) { animation-delay: 0.5s; }
@keyframes iconEntrance {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Effet de survol moderne avec cercle et élévation */
.menu-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(0, 61, 34, 0.1);
transform: translate(-50%, -50%);
transition: all var(--transition-normal);
z-index: -1;
}
.menu-icon:hover::before {
width: 45px;
height: 45px;
background: rgba(0, 61, 34, 0.15);
}
.menu-icon:hover {
color: var(--color-gentologie-text-secondary);
transform: translateY(-3px);
filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.15));
}
.menu-icon:hover:not(:last-child)::after {
background: linear-gradient(to bottom, transparent 20%, rgba(0, 61, 34, 0.5) 50%, transparent 80%);
}
.menu-icon.no-line::after {
display: none;
}
.menu-icon i {
display: block;
line-height: 1;
position: relative;
z-index: 1;
transition: all var(--transition-normal);
}
.menu-icon:hover i {
transform: scale(1.1);
}
.menu-icon,
.menu-icon i,
.menu-icon a {
text-decoration: none !important;
}
/* Cibler spécifiquement l'élément de recherche par son icône */
.menu-icon .fa-magnifying-glass {
display: block;
text-align: center;
}
/* Correction du cercle de survol spécifiquement pour la recherche */
a[href*="?s="].menu-icon::before,
.menu-icon:has(.fa-magnifying-glass)::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(0, 61, 34, 0.1);
transform: translate(-50%, -50%);
transition: all var(--transition-normal);
z-index: -1;
}
a[href*="?s="].menu-icon:hover::before,
.menu-icon:has(.fa-magnifying-glass):hover::before {
width: 50px;
height: 50px;
background: rgba(0, 61, 34, 0.15);
transform: translate(-50%, -50%);
}
/* ===========================================
PANIER MODERNISÉ AVEC BADGE PREMIUM
=========================================== */
.header-bag {
position: relative;
}
.bag-count {
font-size: var(--font-size-sm);
padding-left: .2rem;
}
.header-bag .bag-count.lower {
position: absolute;
top: 25px;
right: 8px;
background: linear-gradient(135deg, #ff4757, #ff3838);
color: var(--color-gentologie-text-alt);
width: 20px;
height: 20px;
align-items: center;
justify-content: center;
font-size: 5px;
font-weight: 700;
line-height: 1;
min-width: 20px;
box-shadow: 0 4px 15px rgba(255, 71, 87, 0.4);
border: 2px solid var(--color-gentologie-text-alt);
animation: badgeBounce 0.6s var(--transition-normal) both;
z-index: 2;
}
@keyframes badgeBounce {
0% {
opacity: 0;
transform: scale(0);
}
50% {
transform: scale(1.3);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.header-bag:hover .bag-count.lower {
animation: badgePulse 1s infinite;
box-shadow: 0 6px 20px rgba(255, 71, 87, 0.6);
}
@keyframes badgePulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
}
.header-bag {
animation: fadeInCart var(--transition-normal);
}
@keyframes fadeInCart {
from {
opacity: 0;
transform: scale(0.8);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* ===========================================
BOUTON SUBSCRIBE PREMIUM AVEC BRILLANCE
=========================================== */
.menu-subscribe-button {
background: linear-gradient(135deg, var(--color-gentologie-green), var(--color-gentologie-green-dark)) !important;
color: var(--color-gentologie-text-alt) !important;
padding: none !important;
margin-left: var(--spacing-sm) !important;
text-decoration: none !important;
font-weight: var(--font-weight-bold) !important;
font-size: var(--font-size-sm) !important;
height: 135px !important;
align-items: center !important;
justify-content: center !important;
transition: all var(--transition-normal) !important;
z-index: 1 !important;
box-sizing: border-box !important;
position: relative !important;
overflow: hidden !important;
box-shadow: 0 8px 25px rgba(0, 61, 34, 0.3) !important;
animation: buttonEntrance 1s var(--transition-normal) 0.6s both;
}
@keyframes buttonEntrance {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Effet de brillance traversante */
.menu-subscribe-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
transition: left var(--transition-slow);
}
.menu-subscribe-button:hover::before {
left: 100%;
}
.menu-subscribe-button:hover {
background: linear-gradient(135deg, var(--color-gentologie-green-dark), var(--color-gentologie-green)) !important;
transform: translateY(-2px) !important;
box-shadow: 0 12px 35px rgba(0, 61, 34, 0.4) !important;
}
.menu-subscribe-button:active {
transform: translateY(0) !important;
box-shadow: 0 6px 20px rgba(0, 61, 34, 0.3) !important;
}
/* ===========================================
BOUTON HAMBURGER MODERNISÉ
=========================================== */
.mobile-menu-toggle {
background: none;
border: none !important;
cursor: pointer;
padding: var(--spacing-sm);
z-index: 99999 !important;
position: relative;
order: 1;
outline: none !important;
box-shadow: none !important;
transition: all var(--transition-normal);
display: flex; /* ← AJOUTE */
flex-direction: column; /* ← AJOUTE */
align-items: center; /* ← AJOUTE */
}
.mobile-menu-toggle:hover {
background: rgba(0, 61, 34, 0.1);
transform: scale(1.05);
}
.mobile-menu-toggle .hamburger-line {
display: block;
width: 25px;
height: 3px;
margin: 2.5px 0;
background: linear-gradient(135deg, var(--color-gentologie-green), var(--color-gentologie-green-dark));
transition: all var(--transition-normal);
transform-origin: center;
box-shadow: 0 2px 4px rgba(0, 61, 34, 0.2);
}
.mobile-menu-toggle:focus {
opacity: 0.8;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
background: linear-gradient(135deg, var(--color-gentologie-green-dark), var(--color-gentologie-green)) !important;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
background: linear-gradient(135deg, var(--color-gentologie-green-dark), var(--color-gentologie-green)) !important;
}
/* ===========================================
LOGO MOBILE MODERNISÉ
=========================================== */
.mobile-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: var(--z-modal);
align-items: center;
justify-content: center;
}
.mobile-logo img {
height: 60px !important;
width: auto !important;
display: block !important;
object-fit: contain;
}
/* ===========================================
BOUTON SUBSCRIBE MOBILE MODERNISÉ
=========================================== */
.mobile-subscribe-button {
background: transparent !important;
color: var(--color-gentologie-green) !important;
padding: var(--spacing-xs) !important;
text-decoration: none !important;
font-weight: var(--font-weight-semibold) !important;
font-size: var(--font-size-xs) !important;
transition: all var(--transition-normal) !important;
white-space: nowrap !important;
z-index: 99997 !important;
order: 3 !important;
border: none !important;
box-shadow: none !important;
position: relative !important;
}
.mobile-subscribe-button:hover {
color: var(--color-gentologie-text-secondary) !important;
transform: translateY(-1px) !important;
text-decoration: underline !important;
}
/* ===========================================
MENU MOBILE - CONTENU GLASSMORPHISME
=========================================== */
.mobile-menu {
position: fixed;
top: 90px;
left: 0;
width: 100vw;
height: calc(100vh - 75px);
background: var(--color-gentologie-background);
transform: translateX(-100%);
transition: transform var(--transition-normal);
z-index: 50000;
overflow-y: auto;
border-right: 1px solid var(--color-gentologie-green);
box-shadow: var(--shadow-glass);
}
.mobile-menu.active {
transform: translateX(0) !important;
}
.mobile-menu.active .mobile-menu-overlay {
opacity: 1 !important;
pointer-events: auto !important;
}
.mobile-menu-overlay.active {
opacity: 1;
pointer-events: auto;
}
.mobile-menu-content {
position: relative;
background: transparent;
width: 100%;
height: 100%;
padding: var(--spacing-lg) 0;
overflow-y: auto;
z-index: 1;
}
body.mobile-menu-open {
overflow: hidden;
position: fixed;
width: 100%;
height: 100vh;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
background: linear-gradient(135deg, var(--color-gentologie-green-dark), var(--color-gentologie-green)) !important;
}
.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
opacity: 0;
transform: scale(0);
}
.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
background: linear-gradient(135deg, var(--color-gentologie-green-dark), var(--color-gentologie-green)) !important;
}
/* ===========================================
NAVIGATION MOBILE MODERNISÉE
=========================================== */
.mobile-nav-menu {
list-style: none;
padding: 0 var(--spacing-md);
margin: 0;
width: 100%;
box-sizing: border-box;
}
.mobile-nav-menu .menu-item {
border-bottom: 1px solid rgba(0, 61, 34, 0.1);
transform: translateY(20px);
opacity: 0;
animation: mobileItemEntrance 0.5s var(--transition-normal) forwards;
}
.mobile-nav-menu .menu-item:nth-child(1) { animation-delay: 0.1s; }
.mobile-nav-menu .menu-item:nth-child(2) { animation-delay: 0.15s; }
.mobile-nav-menu .menu-item:nth-child(3) { animation-delay: 0.2s; }
.mobile-nav-menu .menu-item:nth-child(4) { animation-delay: 0.25s; }
.mobile-nav-menu .menu-item:nth-child(5) { animation-delay: 0.3s; }
@keyframes mobileItemEntrance {
to {
opacity: 1;
transform: translateY(0);
}
}
.mobile-nav-menu .menu-item:last-child {
border-bottom: none !important;
}
.mobile-nav-menu .menu-item a {
display: block;
padding: var(--spacing-medium) var(--spacing-md);
color: var(--color-gentologie-text);
text-decoration: none;
font-size: var(--font-size-lg);
font-family: var(--font-family-primary);
transition: all var(--transition-normal);
text-align: center;
margin: 2px 0;
position: relative;
overflow: hidden;
}
.mobile-nav-menu .menu-item a::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 61, 34, 0.1), transparent);
transition: left var(--transition-normal);
}
.mobile-nav-menu .menu-item a:hover::before {
left: 100%;
}
.mobile-nav-menu .menu-item a:hover {
background: rgba(0, 61, 34, 0.05);
color: var(--color-gentologie-text-secondary);
transform: translateX(5px);
}
/* ===========================================
ACTIONS MENU MOBILE MODERNISÉES
=========================================== */
.mobile-menu-actions {
padding: var(--spacing-lg) var(--spacing-md) var(--spacing-md) var(--spacing-md);
border-top: 1px solid rgba(0, 61, 34, 0.1);
gap: var(--spacing-md);
justify-content: center;
}
.mobile-menu-action-link {
flex: 1;
max-width: 150px;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-medium) var(--spacing-small);
color: var(--color-gentologie-text);
text-decoration: none;
font-size: var(--font-size-base);
transition: all var(--transition-normal);
border: 1px solid rgba(0, 61, 34, 0.2);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(5px);
position: relative;
overflow: hidden;
}
.mobile-menu-action-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 61, 34, 0.1), transparent);
transition: left var(--transition-normal);
}
.mobile-menu-action-link:hover::before {
left: 100%;
}
.mobile-menu-action-link:hover {
background: rgba(0, 61, 34, 0.1);
color: var(--color-gentologie-text-secondary);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 61, 34, 0.2);
}
.mobile-menu-action-link i {
font-size: var(--font-size-lg);
transition: transform var(--transition-normal);
}
.mobile-menu-action-link:hover i {
transform: scale(1.1);
}
/* Styles pour les actions panier mobile */
.mobile-menu-actions .header-bag {
align-items: center;
gap: var(--spacing-sm);
}
.mobile-menu-actions .header-bag .bag-count {
position: relative;
top: auto;
right: auto;
margin-left: -5px;
background: linear-gradient(135deg, #ff4757, #ff3838);
box-shadow: 0 2px 10px rgba(255, 71, 87, 0.4);
}
/* ===========================================
NEWSLETTER ET LANGUES MODERNISÉES
=========================================== */
.mobile-menu-newsletter {
padding: var(--spacing-medium) var(--spacing-md);
border-top: 1px solid rgba(0, 61, 34, 0.1);
text-align: center;
}
.mobile-menu-newsletter-link {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
color: var(--color-gentologie-text);
text-decoration: none;
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
padding: var(--spacing-medium) var(--spacing-lg);
transition: all var(--transition-normal);
border: 2px solid var(--color-gentologie-green);
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(5px);
position: relative;
overflow: hidden;
}
.mobile-menu-newsletter-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-gentologie-green), var(--color-gentologie-green-dark));
transition: left var(--transition-normal);
z-index: -1;
}
.mobile-menu-newsletter-link:hover::before {
left: 0%;
}
.mobile-menu-newsletter-link:hover {
color: var(--color-gentologie-text-alt);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 61, 34, 0.3);
}
.mobile-menu-newsletter-link i {
font-size: var(--font-size-lg);
transition: transform var(--transition-normal);
}
.mobile-menu-newsletter-link:hover i {
transform: scale(1.1);
}
.mobile-languages {
padding: var(--spacing-medium);
border-top: 1px solid rgba(0, 61, 34, 0.1);
margin-top: var(--spacing-md);
text-align: center;
}
.mobile-languages h4 {
margin: 0 0 var(--spacing-md) 0;
font-size: var(--font-size-lg);
color: var(--color-gentologie-text);
font-weight: var(--font-weight-semibold);
}
.mobile-lang-link {
display: inline-block;
padding: var(--spacing-sm) var(--spacing-lg);
margin: 0 var(--spacing-sm) var(--spacing-sm) 0;
color: var(--color-gentologie-text);
text-decoration: none;
border: 1px solid rgba(0, 61, 34, 0.2);
font-size: var(--font-size-base);
transition: all var(--transition-normal);
min-width: 60px;
text-align: center;
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(5px);
position: relative;
overflow: hidden;
}
.mobile-lang-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-gentologie-green), var(--color-gentologie-green-dark));
transition: left var(--transition-normal);
z-index: -1;
}
.mobile-lang-link:hover::before {
left: 0%;
}
.mobile-lang-link:hover {
color: var(--color-gentologie-text-alt);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 61, 34, 0.3);
}
/* ===========================================
BARRES SECONDAIRES MOBILE MODERNISÉES
=========================================== */
.mobile-secondary-bar {
align-items: center;
justify-content: space-between;
height: 45px;
padding: 0 var(--spacing-md);
border-bottom: 1px solid rgba(0, 61, 34, 0.1);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(5px);
}
.mobile-secondary-link {
align-items: center;
gap: var(--spacing-sm);
color: var(--color-gentologie-text);
text-decoration: none;
font-size: var(--font-size-sm);
padding: var(--spacing-sm);
transition: all var(--transition-normal);
position: relative;
overflow: hidden;
}
.mobile-secondary-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 61, 34, 0.1), transparent);
transition: left var(--transition-normal);
}
.mobile-secondary-link:hover::before {
left: 100%;
}
.mobile-secondary-link:hover {
color: var(--color-gentologie-text-secondary);
background: rgba(0, 61, 34, 0.05);
transform: translateY(-1px);
}
.mobile-secondary-link i {
font-size: var(--font-size-lg);
transition: transform var(--transition-normal);
}
.mobile-secondary-link:hover i {
transform: scale(1.1);
}
.mobile-newsletter-bar {
align-items: center;
justify-content: center;
height: 45px;
padding: 0 var(--spacing-md);
border-bottom: 1px solid rgba(0, 61, 34, 0.1);
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(5px);
}
.mobile-newsletter-link {
align-items: center;
gap: var(--spacing-sm);
color: var(--color-gentologie-text);
text-decoration: none;
font-size: var(--font-size-sm);
padding: var(--spacing-sm) var(--spacing-md);
transition: all var(--transition-normal);
font-weight: var(--font-weight-medium);
position: relative;
overflow: hidden;
}
.mobile-newsletter-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 61, 34, 0.1), transparent);
transition: left var(--transition-normal);
}
.mobile-newsletter-link:hover::before {
left: 100%;
}
.mobile-newsletter-link:hover {
color: var(--color-gentologie-text-secondary);
background: rgba(0, 61, 34, 0.05);
transform: translateY(-1px);
}
.mobile-newsletter-link i {
font-size: var(--font-size-lg);
transition: transform var(--transition-normal);
}
.mobile-newsletter-link:hover i {
transform: scale(1.1);
}
/* ===========================================
CLASSES UTILITAIRES
=========================================== */
.visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.wpml-ls-item a[title="Passer à "] {
display: none !important;
}
/* ===========================================
ANIMATIONS DE SCROLL POUR HEADER
=========================================== */
.site-header.scrolled {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}
.site-header.scrolled .menu-top-bar {
background: rgba(255, 255, 255, 0.05) !important;
border-radius: 0;
}
/* ===========================================
ACCESSIBILITÉ ET FOCUS
=========================================== */
/* Focus visible pour accessibilité */
.menu-icon:focus-visible,
.mobile-menu-toggle:focus-visible,
.menu-subscribe-button:focus-visible,
.mobile-subscribe-button:focus-visible,
.login-button:focus-visible,
.subscribe-button:focus-visible {
outline: 2px solid var(--color-gentologie-green);
outline-offset: 2px;
}
/* En-tête et menu principal */
/* ===========================================
FOOTER - STRUCTURE PRINCIPALE
=========================================== */
.site-footer {
background-color: var(--color-gentologie-green) !important;
padding: var(--spacing-lg) 0;
}
.footer-inner {
max-width: 100%;
margin: 0 auto;
padding: 0 10%; /* 10% à gauche et à droite */
}
/* ===========================================
FOOTER - RANGÉE SUPÉRIEURE
=========================================== */
.footer-top-row {
display: flex;
justify-content: space-between; /* logo à gauche, bouton à droite */
align-items: center;
flex-wrap: wrap;
gap: var(--spacing-md);
}
.footer-logo {
flex: 0 0 auto;
}
.scroll-to-top {
font-family: var(--font-family-primary);
color: var(--color-gentologie-text-alt);
background-color: transparent;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
margin-top: var(--spacing-md);
cursor: pointer;
transition: all var(--transition-normal);
border: none;
padding: 0;
text-decoration: none;
}
.scroll-to-top:hover {
color: var(--color-gentologie-background);
transform: translateY(-2px);
}
.scroll-to-top:focus {
outline: 1px solid var(--color-gentologie-text-alt);
outline-offset: 2px;
}
.newsletter-footer-form-column h2 {
color: var(--color-gentologie-title);
}
.newsletter-footer-subtitle {
color: var(--color-gentologie-text-green);
text-align: center;
}
/* ===========================================
FOOTER - RANGÉE CENTRALE (MENUS)
=========================================== */
.footer-middle-row {
display: grid;
grid-template-columns: repeat(7, auto) 1fr; /* 7 colonnes auto + 1 qui prend l'espace restant */
column-gap: 2.5rem;
row-gap: 1.5rem;
margin-bottom: var(--spacing-md);
align-items: start;
justify-content: space-between; /* distribue l'espace entre les colonnes */
}
.footer-columns-main,
.footer-columns-about {
display: contents; /* Les enfants se placent dans la grille parente */
}
.footer-menu-column {
min-width: 0;
margin-bottom: var(--spacing-md);
text-align: left;
}
/* Seulement la colonne À PROPOS alignée à droite */
.footer-about-column {
width: 100%; /* prend toute la largeur de sa cellule */
display: flex;
flex-direction: column;
align-items: flex-end; /* aligne le contenu à droite */
text-align: right;
padding-right: 0; /* pas de padding à droite */
}
.footer-about-column .footer-subcategories {
text-align: right; /* aligne la liste */
}
/* IMPORTANT : alignement des liens dans À PROPOS */
.footer-about-column .footer-subcategories li a {
text-align: right;
}
.footer-category-title {
margin: 0 0 var(--spacing-xs) 0;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
color: var(--color-gentologie-text-alt);
white-space: nowrap; /* titre sur une seule ligne */
}
/* Override spécifique pour le footer */
.site-footer .footer-category-title,
.site-footer .footer-menu-column h4 {
margin: 0 0 var(--spacing-xs) 0 !important;
font-weight: var(--font-weight-bold) !important;
font-size: var(--font-size-xs) !important;
line-height: var(--line-height-normal) !important;
color: var(--color-gentologie-text-alt) !important;
}
.footer-category-title a {
color: var(--color-gentologie-text-alt);
text-decoration: none;
}
.footer-category-link {
color: var(--color-gentologie-background);
text-decoration: none;
border-bottom: 1px solid transparent;
padding-bottom: 2px;
transition: border-color var(--transition-normal);
text-transform: uppercase;
}
.footer-category-link:hover,
.footer-category-link:focus {
border-color: var(--color-gentologie-border);
}
.footer-subcategories {
margin: 0;
padding-left: 0;
list-style: none;
text-align: left;
font-size: var(--font-size-xs);
}
.footer-subcategories li a {
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-size: var(--font-size-xs);
display: block;
padding: var(--spacing-xs) 0;
text-align: left;
font-weight: var(--font-weight-light);
}
.footer-subcategories li a:hover,
.footer-subcategories li a:focus {
color: var(--color-gentologie-text-alt);
}
/* ===========================================
FOOTER - RANGÉE INFÉRIEURE
=========================================== */
.footer-bottom-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
gap: var(--spacing-md);
margin-top: var(--spacing-md); /* espace réduit */
border-top: 1px solid var(--color-gentologie-border);
padding-top: var(--spacing-md);
}
/* Menu légal à gauche */
.footer-legal-affiliation {
display: flex;
flex-direction: column;
}
.footer-legal-menu a {
margin-right: var(--spacing-md);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-size: var(--font-size-sm);
}
.footer-legal-menu a:hover,
.footer-legal-menu a:focus {
text-decoration: underline;
}
/* Réseaux sociaux au-dessus du copyright */
.footer-bottom-right {
display: flex;
flex-direction: column; /* empile verticalement */
align-items: flex-end; /* aligne à droite */
gap: 0.5rem; /* espace entre social et copyright */
}
.footer-social a {
margin-left: var(--spacing-sm);
display: inline-block;
text-align: right;
}
.footer-social img {
width: 20px;
height: 20px;
}
.footer-copyright {
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-alt);
text-align: right;
}
.footer-copyright a {
color: var(--color-gentologie-text-alt);
text-decoration: none;
}
.footer-copyright a:hover,
.footer-copyright a:focus {
text-decoration: underline;
}
.footer-affiliation-note p {
color: var(--color-gentologie-text-alt);
font-size: var(--font-size-xs);
margin: 0.5rem 0 0 0;
}
/* ===========================================
NEWSLETTER FOOTER - STRUCTURE
=========================================== */
.footer-newsletter {
width: 100vw;
position: relative;
overflow: hidden;
padding: var(--spacing-lg) var(--spacing-md);
background: linear-gradient(
to bottom,
rgba(255, 245, 230, 1) 0%,
rgba(233, 230, 213, 1) 14%,
rgba(208, 214, 195, 1) 29%,
rgba(180, 196, 174, 1) 46%,
rgba(120, 156, 129, 1) 64%,
rgba(71, 124, 93, 1) 79%,
rgba(41, 104, 71, 1) 88%,
#004d28 99%,
#004d28 100%
);
}
.footer-newsletter-inner {
display: flex;
justify-content: center; /* centre le contenu horizontalement */
flex-wrap: nowrap; /* empêche l'empilement sur desktop */
width: 100%;
max-width: 1200px; /* largeur max souhaitée */
margin: 0 auto;
padding: 0 20px;
}
/* ===========================================
NEWSLETTER - COLONNE FORMULAIRE
=========================================== */
.newsletter-footer-form-column {
flex: 1 1 100%;
max-width: 100%; /* pas de limite */
}
.newsletter-footer-form-column h2 {
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-3xl);
color: var(--color-gentologie-green);
text-align: center;
}
.newsletter-subtitle {
margin-bottom: var(--spacing-medium);
color: var(--color-gentologie-green);
font-weight: var(--font-weight-normal);
text-align: center;
}
.newsletter-footer-form-column form label {
display: block;
margin-bottom: var(--spacing-xs);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-green);
}
.newsletter-footer-form-column form input,
.newsletter-footer-form-column form select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
border: 1px solid var(--color-gentologie-border);
padding: var(--spacing-md);
font-size: var(--font-size-lg);
width: 100%;
margin-bottom: var(--spacing-md);
box-sizing: border-box;
height: 3.75rem;
line-height: var(--line-height-normal);
}
.newsletter-footer-form-column form input[type="checkbox"] {
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
width: auto;
height: auto;
display: inline;
margin: 0;
padding: 0;
}
.newsletter-footer-form-column form select {
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 10 6' fill='%23004d28' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6H0z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right var(--spacing-md) center;
background-size: var(--spacing-md);
padding-right: 2.5rem;
cursor: pointer;
}
.newsletter-footer-form-column form input::placeholder {
color: rgba(0, 77, 40, 0.7);
}
/* ===========================================
NEWSLETTER - CONFIDENTIALITÉ ET GDPR
=========================================== */
.newsletter-privacy {
margin-bottom: var(--spacing-md);
display: flex;
align-items: center;
}
.newsletter-privacy input[type="checkbox"] {
margin-right: var(--spacing-sm);
width: 1.2rem;
height: 1.2rem;
}
.newsletter-privacy label {
font-size: var(--font-size-sm);
color: var(--color-gentologie-background-alt);
}
.newsletter-gdpr {
margin-bottom: var(--spacing-md);
font-size: var(--font-size-sm);
}
.newsletter-gdpr-label {
display: flex !important;
align-items: flex-start;
gap: var(--spacing-small);
line-height: var(--line-height-normal);
cursor: pointer;
font-weight: var(--font-weight-normal) !important;
}
.newsletter-gdpr-label input[type="checkbox"] {
width: 1.2rem;
height: 1.2rem;
margin: 0;
cursor: pointer;
flex-shrink: 0;
-webkit-appearance: checkbox;
-moz-appearance: checkbox;
appearance: checkbox;
}
.newsletter-gdpr-label span {
flex: 1;
font-size: var(--font-size-sm);
margin-top: 0.1rem;
}
.newsletter-gdpr-label,
.newsletter-gdpr-label span,
.newsletter-gdpr-label a {
color: var(--color-gentologie-text-alt) !important;
}
.newsletter-gdpr-label a {
text-decoration: underline;
}
.newsletter-gdpr-label a:hover {
text-decoration: none;
}
/* ===========================================
NEWSLETTER - BOUTON DE SOUMISSION
=========================================== */
.newsletter-form-column form button {
background-color: transparent;
color: var(--color-gentologie-green);
border: 2px solid var(--color-gentologie-border-alt);
font-family: var(--font-family-primary);
padding: var(--spacing-md) var(--spacing-medium);
cursor: pointer;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
transition: background-color var(--transition-normal), color var(--transition-normal);
width: 100%;
display: block;
margin-top: var(--spacing-sm);
}
.newsletter-form-column form button:hover,
.newsletter-form-column form button:focus {
background-color: var(--color-gentologie-background-button-alt);
color: var(--color-gentologie-text-button-alt);
}
/* ===========================================
RESPONSIVE - DESKTOP (+ que 1200px)
=========================================== */
@media (min-width: 1200px) {
.footer-middle-row {
grid-template-columns: repeat(7, auto) 1fr; /* 8 colonnes auto + À propos */
}
}
/* ===========================================
RESPONSIVE - GRAND DESKTOP (1300px - 1500px)
Fix: Les liens se touchent dans cette plage
=========================================== */
@media (min-width: 1300px) and (max-width: 1500px) {
.footer-middle-row {
column-gap: 4rem; /* Augmenté de 2.5rem à 3.5rem */
}
}
/* ===========================================
RESPONSIVE - DESKTOP MOYEN (1025px - 1199px)
=========================================== */
@media (min-width: 1025px) and (max-width: 1199px) {
.footer-middle-row {
grid-template-columns: repeat(4, 1fr); /* 4 colonnes sur 2 rangées */
}
/* À propos aligné à gauche sur tablette */
.footer-about-column {
justify-self: start;
text-align: left;
}
.footer-about-column .footer-subcategories {
text-align: left;
}
.footer-about-column .footer-subcategories li a {
text-align: left;
}
}
/* ===========================================
RESPONSIVE - DESKTOP (+ que 1025px) - Newsletter
=========================================== */
@media (min-width: 1025px) {
/* Conteneur du formulaire - reset complet */
.newsletter-footer-form-column {
width: 100%;
max-width: 1400px;
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
/* Formulaire en grille - reset complet */
.newsletter-footer-form-column form {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.5rem;
row-gap: 1.5rem;
max-width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Réinitialiser les marges des mc-field-group */
.newsletter-footer-form-column .mc-field-group {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
/* Labels sans marge */
.newsletter-footer-form-column form label {
margin: 0 0 var(--spacing-xs) 0 !important;
padding: 0 !important;
display: block;
width: 100%;
}
/* Forcer chaque input/select à avoir la bonne hauteur */
.newsletter-footer-form-column form input[type="email"],
.newsletter-footer-form-column form input[type="text"],
.newsletter-footer-form-column form select {
width: 100% !important;
height: 3.75rem;
margin: 0 !important;
padding: var(--spacing-md) !important;
box-sizing: border-box !important;
}
/* Email : 1ère ligne, 2 colonnes */
.newsletter-footer-form-column form .mc-field-group:nth-child(1) {
grid-column: 1 / 3;
}
/* Genre : 2e ligne, colonne gauche */
.newsletter-footer-form-column form .mc-field-group:nth-child(2) {
grid-column: 1 / 2;
}
/* Prénom : 2e ligne, colonne droite */
.newsletter-footer-form-column form .mc-field-group:nth-child(3) {
grid-column: 2 / 3;
}
/* Nom : 3e ligne, colonne gauche */
.newsletter-footer-form-column form .mc-field-group:nth-child(4) {
grid-column: 1 / 2;
}
/* Langue : 3e ligne, colonne droite */
.newsletter-footer-form-column form .mc-field-group:nth-child(5) {
grid-column: 2 / 3;
}
/* RGPD : 4e ligne, 2 colonnes */
.newsletter-footer-form-column form .newsletter-gdpr {
grid-column: 1 / 3;
margin-bottom: 0;
}
/* Éléments cachés ne doivent pas occuper d'espace */
.newsletter-footer-form-column form div[hidden],
.newsletter-footer-form-column form div[aria-hidden="true"] {
grid-column: 1 / 3;
height: 0;
overflow: hidden;
}
/* Conteneur messages */
.newsletter-footer-form-column form #mce-responses {
grid-column: 1 / 3;
}
/* Bouton : dernière ligne, 2 colonnes */
.newsletter-footer-form-column form .clear {
grid-column: 1 / 3;
margin: 0 !important;
padding: 0 !important;
width: 100%;
box-sizing: border-box;
}
.newsletter-footer-form-column form input[type="submit"],
.newsletter-footer-form-column form .button {
width: 100% !important;
height: auto;
padding: 1.25rem !important;
font-size: 1.25rem;
margin: 0 !important;
box-sizing: border-box;
display: block;
}
}
/* ===========================================
RESPONSIVE - TABLETTE (jusqu'à 1024px)
=========================================== */
@media (max-width: 1024px) {
.footer-newsletter-inner {
flex-direction: column; /* ok pour empiler */
text-align: center;
gap: var(--spacing-lg);
}
/* Cacher la colonne image */
.newsletter-image-column {
display: none;
}
/* Formulaire prend toute la largeur */
.newsletter-footer-form-column {
max-width: 100%;
flex: 1 1 100%;
margin: 0 auto;
}
}
/* ===========================================
RESPONSIVE - TABLETTE FOOTER MENU (769px - 1024px)
=========================================== */
@media (min-width: 769px) and (max-width: 1024px) {
.footer-middle-row {
grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales sur tablette */
gap: 1.5rem;
}
/* À propos aligné à gauche sur tablette */
.footer-about-column {
justify-self: start;
text-align: left;
}
.footer-about-column .footer-subcategories {
text-align: left;
}
.footer-about-column .footer-subcategories li a {
text-align: left;
}
/* ICÔNES SOCIALES CENTRÉES EN TABLETTE */
.footer-bottom-row {
justify-content: center;
gap: var(--spacing-lg);
}
.footer-bottom-right {
align-items: center;
}
.footer-social {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
}
.footer-social a {
margin: 0;
}
.footer-copyright {
text-align: center;
}
}
/* ===========================================
RESPONSIVE - MOBILE (jusqu'à 768px)
=========================================== */
@media (max-width: 768px) {
.footer-inner {
padding: 0 var(--spacing-md) !important;
}
.scroll-to-top {
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-lg);
}
.footer-top-row {
flex-direction: column;
text-align: center;
gap: var(--spacing-md);
}
/* === MENU EN 2 COLONNES MOBILE === */
.footer-middle-row {
display: flex !important;
grid-template-columns: unset !important;
gap: var(--spacing-sm);
align-items: flex-start;
margin-bottom: var(--spacing-md);
}
/* Annuler display: contents pour mobile */
.footer-columns-main,
.footer-columns-about {
display: block !important;
}
/* Colonne principale (gauche) - FORCE ABSOLUE */
.site-footer .footer-middle-row .footer-columns-main {
flex: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: var(--spacing-md) !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
}
/* Items dans la grille principale */
.site-footer .footer-middle-row .footer-columns-main .footer-menu-column {
min-width: 0 !important;
width: 100% !important;
}
/* Colonne ABOUT (droite) - sticky */
.site-footer .footer-middle-row .footer-columns-about {
width: 110px !important;
flex-shrink: 0 !important;
position: sticky !important;
top: var(--spacing-md) !important;
align-self: flex-start !important;
}
.footer-about-column {
background: rgba(0, 61, 34, 0.05);
padding: var(--spacing-sm);
border: 1px solid rgba(0, 61, 34, 0.15);
}
/* Tous les items alignés à gauche sur mobile */
.footer-menu-column,
.footer-about-column {
justify-self: start !important;
text-align: left !important;
}
.footer-about-column .footer-subcategories {
text-align: left !important;
}
.footer-about-column .footer-subcategories li a {
text-align: left !important;
}
/* === FIN MENU 2 COLONNES === */
/* === FOOTER BOTTOM CENTRÉ MOBILE === */
.footer-bottom-row {
flex-direction: column;
text-align: center;
gap: var(--spacing-md);
align-items: center;
}
/* Colonne légale centrée */
.footer-legal-affiliation {
align-items: center;
width: 100%;
}
.footer-legal-menu {
text-align: center;
width: 100%;
}
.footer-legal-menu a {
margin: 0 var(--spacing-sm);
display: inline-block;
}
/* Colonne droite (icônes + copyright) CENTRÉE */
.footer-bottom-right {
align-items: center;
width: 100%;
}
/* Icônes sociales CENTRÉES */
.footer-social {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
width: 100%;
}
.footer-social a {
margin: 0;
}
/* Copyright centré */
.footer-copyright {
text-align: center;
width: 100%;
}
/* === FIN FOOTER BOTTOM CENTRÉ === */
}
/* ===========================================
RESPONSIVE - TRÈS PETITS ÉCRANS (480px)
=========================================== */
@media (max-width: 480px) {
.footer-inner {
padding: 0 var(--spacing-sm);
}
.footer-middle-row {
gap: var(--spacing-sm);
}
.footer-columns-about {
width: 120px;
}
.footer-newsletter {
padding: var(--spacing-md) var(--spacing-sm);
}
/* === ICÔNES SOCIALES CENTRÉES PETIT ÉCRAN === */
.footer-bottom-row {
flex-direction: column;
text-align: center;
gap: var(--spacing-md);
align-items: center;
}
.footer-bottom-right {
align-items: center;
width: 100%;
}
.footer-social {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
width: 100%;
}
.footer-social a {
margin: 0;
}
.footer-copyright {
text-align: center;
width: 100%;
}
.footer-legal-affiliation {
align-items: center;
width: 100%;
}
.footer-legal-menu {
text-align: center;
width: 100%;
}
.footer-legal-menu a {
margin: 0 var(--spacing-xs);
display: inline-block;
font-size: var(--font-size-xs);
}
/* === FIN ICÔNES CENTRÉES PETIT ÉCRAN === */
}
/* ===========================================
AJUSTEMENT BARRE ADMIN WORDPRESS
=========================================== */
/* Mobile/Tablette uniquement - Barre admin WordPress */
@media screen and (max-width: 1199px) {
/* Barre admin sur écrans larges mobiles (>782px) */
.admin-bar .mobile-top-bar {
top: 32px;
}
.admin-bar .mobile-menu {
top: calc(32px + 75px); /* Barre admin + hauteur mobile-top-bar */
}
/* Barre admin sur petits écrans mobiles (≤782px) */
@media screen and (max-width: 782px) {
.admin-bar .mobile-top-bar {
top: 46px;
}
.admin-bar .mobile-menu {
top: calc(46px + 75px); /* Barre admin + hauteur mobile-top-bar */
height: calc(100vh - 46px - 75px);
}
}
} /* Pied de page */
/* === 3. COMPOSANTS GLOBAUX === */
/* components.css ← boîte auteur, barre de lecture, etc. - VERSION CORRIGÉE */
/* ========================================
AUTHOR BOX
======================================== */
.author-box {
padding: 1rem;
margin: 20px 0;
display: flex;
align-items: center;
color: var(--color-title);
width: 100%;
box-sizing: border-box;
}
.author-link {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
width: 100%; /* AJOUTÉ */
}
.author-photo {
width: 55px;
height: 55px;
object-fit: cover;
margin-right: 15px;
flex-shrink: 0; /* AJOUTÉ pour empêcher la compression */
}
.author-name {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 0.25rem; /* AJOUTÉ pour l'espacement */
}
.author-position {
font-style: italic;
font-size: 0.95rem;
margin-top: 3px;
color: var(--color-text-secondary); /* AJOUTÉ pour différencier */
}
.author-box img {
margin-bottom: 0;
}
.author-info {
display: flex;
flex-direction: column;
flex: 1; /* AJOUTÉ pour prendre l'espace restant */
}
/* ========================================
AUTHOR BOX RESPONSIVE
======================================== */
@media (max-width: 768px) {
.author-box {
padding: 0.75rem;
margin: 15px 0;
}
.author-photo {
width: 45px;
height: 45px;
margin-right: 12px;
}
.author-name {
font-size: 1rem;
}
.author-position {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.author-box {
padding: 0.5rem;
flex-direction: column;
text-align: center;
}
.author-link {
flex-direction: column;
text-align: center;
}
.author-photo {
margin-right: 0;
margin-bottom: 0.5rem;
width: 50px;
height: 50px;
}
.author-info {
align-items: center;
}
}
/* ========================================
CORRECTION NOTE
======================================== */
.correction-note,
.correction-note p {
font-size: 0.8rem;
margin-top: 2rem;
padding-top: 1rem;
border-top: none;
color: var(--color-text-secondary); /* AJOUTÉ */
}
.correction-note .correction-line {
width: 16.6667%;
height: 2px;
background-color: var(--color-gentologie-green);
margin-bottom: 1rem;
}
/* ========================================
READING PROGRESS BAR
======================================== */
#reading-progress-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
background: transparent;
z-index: 9999;
pointer-events: none; /* AJOUTÉ pour éviter les interactions */
}
#reading-progress-bar {
height: 6px;
background-color: var(--color-gentologie-green);
width: 0%;
transition: width 0.25s ease-out;
}
/* ========================================
READING PROGRESS BAR RESPONSIVE
======================================== */
@media (max-width: 768px) {
#reading-progress-container {
height: 4px; /* Plus fin sur mobile */
}
#reading-progress-bar {
height: 4px;
}
}
/* ========================================
COMPOSANTS SUPPLÉMENTAIRES
======================================== */
/* Navigation breadcrumb si utilisée */
.breadcrumb {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin-bottom: 1rem;
}
.breadcrumb a {
color: var(--color-gentologie-green);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb-separator {
margin: 0 0.5rem;
color: var(--color-text-secondary);
}
/* Boutons de partage social si utilisés */
.social-share {
display: flex;
gap: 0.5rem;
margin: 1rem 0;
flex-wrap: wrap;
}
.social-share-button {
padding: 0.5rem 1rem;
border: 1px solid var(--color-border);
background: var(--color-background);
color: var(--color-text);
text-decoration: none;
font-size: 0.875rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.social-share-button:hover {
background: var(--color-gentologie-green);
color: var(--color-background);
border-color: var(--color-gentologie-green);
}
@media (max-width: 480px) {
.social-share {
justify-content: center;
}
.social-share-button {
flex: 1;
justify-content: center;
min-width: 0;
padding: 0.75rem 0.5rem;
}
}
/* Boîte d'information/alerte */
.info-box {
padding: 1rem;
margin: 1.5rem 0;
border-left: 4px solid var(--color-gentologie-green);
background: color-mix(in srgb, var(--color-gentologie-green) 5%, transparent);
}
.info-box.warning {
border-left-color: #ff9800;
background: rgba(255, 152, 0, 0.05);
}
.info-box.error {
border-left-color: #f44336;
background: rgba(244, 67, 54, 0.05);
}
.info-box p:first-child {
margin-top: 0;
}
.info-box p:last-child {
margin-bottom: 0;
}
/* Correction pour empêcher les débordements */
@media (max-width: 768px) {
.author-box,
.correction-note,
.social-share,
.info-box {
max-width: 100%;
overflow-x: hidden;
}
} /* Composants réutilisables (boutons, cards, etc.) */
/* === 4. SECTIONS ARTICLES === */
/* ===== Styles de base des articles - VERSION OPTIMISÉE ET CORRIGÉE ===== */
/* ========================================
STRUCTURE DE BASE
======================================== */
.single-article-thumbnail,
.single-article-header {
width: 75%;
max-width: var(--content-max-width);
margin: 0 auto;
box-sizing: border-box;
}
.single-cover-image {
width: 100%;
height: auto;
display: block;
margin-bottom: 0;
max-width: 100%;
}
.single-article-title {
color: var(--color-gentologie-title);
}
.single-article-title h1 {
text-align: left;
font-size: var(--font-size-4xl);
margin-bottom: var(--spacing-md);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight) !important;
}
.sponsored-label {
display: block;
margin-bottom: 1rem;
padding: 0.5rem 1rem;
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
font-weight: 600;
border-left: 4px solid var(--color-gentologie-accent);
}
.single-article-excerpt {
text-align: center;
font-style: italic;
color: var(--color-text);
margin-bottom: var(--spacing-medium);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
}
.single-article-meta-and-body {
width: 37.5%;
max-width: var(--article-max-width);
margin: 0 auto var(--spacing-lg) auto;
text-align: left;
color: var(--color-text-secondary);
box-sizing: border-box;
}
.single-article-meta {
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-medium);
color: var(--color-gentologie-text-secondary);
}
.single-article-body p {
line-height: var(--line-height-relaxed);
text-align: justify;
font-size: var(--font-size-base);
margin-bottom: var(--spacing-md);
}
.single-drop-cap {
float: left;
font-size: 3em;
line-height: 1;
font-weight: var(--font-weight-medium);
margin: 0;
color: var(--color-gentologie-green);
padding-right: 0.1em;
height: 1em;
overflow: hidden;
transform: translateY(0.05em);
}
/* ========================================
TITRES DANS ARTICLES
======================================== */
body.single h2,
body.single h3,
body.single h4,
body.single h5,
body.single h6 {
color: var(--color-gentologie-title);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
body.single h2 {
font-size: var(--font-size-3xl);
line-height: 1.1;
}
body.single h3 {
font-size: var(--font-size-2xl);
}
body.single h4 {
font-size: var(--font-size-xl);
}
body.single h5 {
font-size: var(--font-size-lg);
}
body.single h6 {
font-size: var(--font-size-base);
}
p:first-of-type {
line-height: var(--line-height-relaxed);
margin-top: 0;
}
/* ========================================
MÉTADONNÉES ARTICLE
======================================== */
.single-article-date {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
}
.single-article-categories,
.single-article-categories a {
display: none;
}
.single-article-categories a:not(:only-child):not(:last-child)::after {
display: none;
}
/* ========================================
LÉGENDES IMAGE DE COUVERTURE
======================================== */
.single-cover-image-caption {
margin-top: 1px;
margin-bottom: var(--spacing-md);
padding: 0;
line-height: var(--line-height-normal);
text-align: left;
border-bottom: 1px solid var(--color-gentologie-border);
padding: var(--spacing-xs) 0 var(--spacing-xs) 0;
width: 100%;
box-sizing: border-box;
}
.single-article-thumbnail {
position: relative;
}
.single-cover-image-caption::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background-color: var(--color-gentologie-border-light);
width: 100%;
}
.single-cover-image-credit {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
letter-spacing: 0.5px;
font-style: italic;
margin: 0;
margin-top: 1px;
padding: 0;
}
.single-cover-image-description {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-style: italic;
line-height: var(--line-height-normal);
margin: 0;
margin-bottom: 1px;
padding: 0;
}
img {
margin-bottom: 0.5rem;
}
/* ========================================
PUBLICITÉ GENTOLOGIE CLUB
======================================== */
.single-gentologie-club-ad-box {
display: block;
margin: var(--spacing-large) auto;
width: 100%;
text-align: center;
box-sizing: border-box;
overflow: visible;
}
.single-gentologie-club-ad-box img {
width: 100%;
height: auto;
object-fit: contain;
max-width: 100%;
transition: var(--transition-normal);
}
.single-gentologie-club-ad-box:hover img {
transform: scale(1.02);
}
.single-gentologie-club-ad-box.full-width-ad {
position: relative;
width: 100vw;
max-width: none;
left: 50%;
transform: translateX(-50%);
margin: var(--spacing-large) 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
.single-image-wrapper {
width: 100%;
max-width: 1000px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
position: relative;
box-sizing: border-box;
}
.single-gentologie-full-width-ad {
align-items: center;
}
.single-gentologie-club-ad-box picture {
display: block;
width: 100%;
height: auto;
}
.single-gentologie-club-ad-box source,
.single-gentologie-club-ad-box img {
display: block;
width: 100%;
height: auto !important;
max-height: none !important;
}
/* ========================================
LÉGENDES D'IMAGES DANS LE CONTENU
======================================== */
.single-article-body .wp-caption,
.article-body figure {
margin: var(--spacing-md) 0 var(--spacing-xs) 0;
}
.single-article-body .wp-caption-text,
.single-article-body figcaption {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-style: italic;
text-align: left;
margin: 1px 0 0 0;
padding: 0;
line-height: var(--line-height-normal);
}
/* ========================================
AUTHOR BOX
======================================== */
.single-author-box {
display: flex;
align-items: center;
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
box-sizing: border-box;
max-width: 100%;
}
.single-author-link {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
}
.single-author-photo {
width: 96px;
height: 96px;
object-fit: cover;
flex-shrink: 0;
}
.single-author-info {
display: flex;
flex-direction: column;
min-width: 0;
}
.single-author-name {
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
color: var(--color-gentologie-title);
}
.single-author-position {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: var(--spacing-xs);
}
/* ========================================
FIX: CENTRAGE DES IMAGES - ÉDITEUR CLASSIQUE + GUTENBERG
======================================== */
/* Images Gutenberg */
.single-article-body .wp-block-image.aligncenter,
.single-article-body figure.aligncenter {
display: table !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center;
max-width: 100%;
}
.single-article-body .wp-block-image.aligncenter img,
.single-article-body figure.aligncenter img {
display: block;
margin: 0 auto;
max-width: 100%;
height: auto;
}
/* Images éditeur classique - avec classe aligncenter */
.single-article-body img.aligncenter {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
height: auto;
}
/* Images éditeur classique - dans des paragraphes */
.single-article-body p img {
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
height: auto;
}
/* Images éditeur classique - dans des divs avec aligncenter */
.single-article-body div.aligncenter,
.single-article-body .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
}
/* wp-caption de l'éditeur classique */
.single-article-body .wp-caption.aligncenter {
display: table !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* ========================================
FIX: FIGCAPTION - GUTENBERG + CLASSIQUE
======================================== */
.single-article-body .wp-element-caption,
.single-article-body figcaption,
.single-article-body .wp-caption-text {
white-space: pre-line !important;
text-align: center !important;
font-size: var(--font-size-xs) !important;
color: var(--color-text-secondary) !important;
font-style: italic !important;
margin-top: var(--spacing-xs) !important;
padding: 0 !important;
line-height: 1.5 !important;
word-wrap: break-word !important;
max-width: 100% !important;
display: block !important;
}
/* ========================================
FIX: CENTRAGE PUB DU HAUT UNIQUEMENT
======================================== */
/* Pub du haut - avec classe single-gentologie-full-width-ad */
.single-gentologie-club-ad-box.single-gentologie-full-width-ad {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: var(--spacing-md) auto !important;
width: 100% !important;
}
/* Contenu de la pub du haut */
.single-gentologie-club-ad-box.single-gentologie-full-width-ad > div,
.single-gentologie-club-ad-box.single-gentologie-full-width-ad img,
.single-gentologie-club-ad-box.single-gentologie-full-width-ad picture {
display: block;
margin: 0 auto;
text-align: center;
}
/* Centrage des divs Google Ad Manager */
.single-gentologie-club-ad-box.single-gentologie-full-width-ad div[id^="div-gpt-ad"] {
margin: 0 auto !important;
display: block !important;
text-align: center !important;
}
/* =========================
=== Widget Related Posts ===
============================= */
.single-related-posts-widget {
/* Même largeur et positionnement que la publicité */
position: relative;
width: 100vw; /* Pleine largeur de la fenêtre comme la pub */
max-width: none; /* Supprime la limitation */
left: 50%;
transform: translateX(-50%);
margin: var(--spacing-xl) 0;
padding: var(--spacing-lg) var(--spacing-md) !important;
box-sizing: border-box;
}
.single-related-posts-header {
text-align: center;
margin-bottom: var(--spacing-lg);
max-width: 1000px; /* Même largeur que le grid */
margin-left: auto;
margin-right: auto;
}
.single-related-posts-title {
font-size: var(--font-size-2xl);
text-transform: uppercase;
font-weight: var(--font-weight-normal) !important;
color: var(--color-gentologie-title);
margin: 0 0 var(--spacing-md) 0;
line-height: var(--line-height-tight);
padding: 1rem !important;
}
.single-related-posts-divider {
width: 60px;
height: 3px;
background-color: var(--color-gentologie-green);
margin: 0 auto;
}
.single-related-posts-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-lg);
margin: var(--spacing-lg) auto 0 auto; /* Centré */
width: 100%;
max-width: 1000px; /* Même largeur maximale que l'image de pub */
}
.single-related-post-item {
background: var(--color-background);
overflow: hidden;
transition: var(--transition-normal);
box-shadow: var(--shadow-light);
display: flex;
flex-direction: column; /* Assure le layout vertical : image puis titre */
}
.single-related-post-link {
display: flex;
flex-direction: column; /* Layout vertical : image en haut, titre en bas */
text-decoration: none;
color: inherit;
height: 100%;
}
.single-related-post-thumbnail {
position: relative;
width: 100%;
aspect-ratio: 16 / 10; /* Retour à un aspect ratio normal */
overflow: hidden;
background-color: var(--color-gentologie-light);
}
.single-related-post-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--transition-normal);
}
.single-related-post-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-gentologie-light);
color: var(--color-text-secondary);
}
.single-placeholder-icon {
font-size: var(--font-size-3xl);
opacity: 0.5;
}
.single-related-post-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
height: auto;
min-height: auto;
width: 100%;
}
.single-related-post-title {
font-size: var(--font-size-base) !important;
color: var(--color-gentologie-title);
line-height: var(--line-height-normal);
font-weight: var(--font-weight-normal) !important;
margin: 0;
width: 100%;
word-wrap: break-word;
hyphens: auto;
overflow-wrap: break-word;
text-align: left;
}
/* =======================
Responsive Related Posts
============================= */
/* Tablette - jusqu'à 1024px */
@media screen and (max-width: 1024px) {
.single-related-posts-widget {
max-width: 100%;
padding: var(--spacing-lg) var(--spacing-md);
}
.single-related-posts-grid {
grid-template-columns: repeat(3, 1fr); /* Garde 3 colonnes sur tablette */
gap: var(--spacing-md);
}
.single-related-posts-title {
font-size: var(--font-size-xl);
}
}
/* Mobile - jusqu'à 768px */
@media screen and (max-width: 768px) {
.single-related-posts-widget {
width: 100%;
max-width: 100%;
left: auto;
transform: none;
margin: var(--spacing-lg) auto;
position: relative;
}
.single-related-posts-grid {
grid-template-columns: 1fr; /* 1 colonne sur mobile seulement */
gap: var(--spacing-md);
max-width: 100%;
}
.single-related-posts-header {
max-width: 100%;
}
.single-related-post-item {
display: flex;
flex-direction: row;
height: auto;
}
.single-related-post-thumbnail {
width: 70px; /* Image très petite sur mobile */
min-width: 70px;
aspect-ratio: 3 / 2;
}
.single-related-post-content {
height: auto;
min-height: auto;
flex: 1;
justify-content: flex-start;
width: 100%;
}
.single-related-post-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
margin: 0;
width: 100%;
word-wrap: break-word;
hyphens: auto;
overflow-wrap: break-word;
}
.single-related-posts-title {
font-size: var(--font-size-lg);
}
}
/* Petit mobile - jusqu'à 600px */
@media screen and (max-width: 600px) {
.single-related-posts-widget {
margin: var(--spacing-md) 0;
}
.single-related-posts-header {
margin-bottom: var(--spacing-md);
}
.single-related-posts-title {
font-size: var(--font-size-base);
}
.single-related-posts-divider {
width: 40px;
height: 2px;
}
.single-related-posts-grid {
gap: var(--spacing-sm);
}
.single-related-post-thumbnail {
width: 60px; /* Image encore plus petite */
min-width: 60px;
}
.single-related-post-content {
padding: var(--spacing-xs);
min-height: auto;
width: 100%;
}
.single-related-post-title {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
margin: 0;
width: 100%;
word-wrap: break-word;
hyphens: auto;
overflow-wrap: break-word;
}
}
/* Très petit écran - jusqu'à 400px */
@media screen and (max-width: 400px) {
.single-related-post-item {
flex-direction: column;
}
.single-related-post-thumbnail {
width: 100%;
aspect-ratio: 3 / 1; /* Image très plate sur très petit écran */
}
.single-related-post-content {
min-height: auto;
width: 100%;
}
.single-related-post-article-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
margin: 0;
width: 100%;
word-wrap: break-word;
hyphens: auto;
overflow-wrap: break-word;
}
}
/* ========================================
ARTICLE FOOTER & TAGS
======================================== */
.single-article-footer {
margin-top: var(--spacing-large);
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-border-light);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
box-sizing: border-box;
}
.single-article-tags {
margin-top: var(--spacing-md);
}
.single-article-tags strong {
font-weight: var(--font-weight-bold);
color: var(--color-title);
}
.single-article-tags a {
color: var(--color-gentologie-green);
text-decoration: none;
margin-right: var(--spacing-sm);
padding: var(--spacing-xs) var(--spacing-sm);
background-color: rgba(0, 61, 34, 0.1);
font-size: var(--font-size-xs);
transition: var(--transition-normal);
display: inline-block;
margin-bottom: var(--spacing-xs);
}
.single-article-tags a:hover {
background-color: var(--color-gentologie-green);
color: var(--color-background);
transform: translateY(-1px);
}
/* ========================================
FIX: ÉVITER QUE LE MENU CACHE L'IMAGE
======================================== */
/* Tablet */
@media screen and (max-width: 1024px) and (min-width: 769px) {
.single-article-thumbnail {
padding-top: calc(var(--menu-total-height) + 0.5rem);
}
}
/* Mobile */
@media screen and (max-width: 768px) {
.single-article-thumbnail {
padding-top: calc(var(--menu-mobile-height) + 0.5rem);
}
}
/* ========================================
RESPONSIVE: DESKTOP (min 1000px)
======================================== */
@media screen and (min-width: 1000px) {
.single-image-wrapper {
aspect-ratio: 10 / 3;
min-height: 300px;
}
}
/* ========================================
RESPONSIVE: TABLETTE (769px - 1024px)
======================================== */
@media screen and (max-width: 1024px) {
.single-article-thumbnail,
.single-article-header {
width: 90%;
padding: 0 var(--spacing-md);
}
.single-article-meta-and-body {
width: 70%;
padding: 0 var(--spacing-md);
}
.single-article-title h1 {
font-size: var(--font-size-3xl);
}
.single-article-excerpt {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-md);
}
.single-article-meta {
font-size: var(--font-size-xs);
}
.single-article-body p {
font-size: var(--font-size-base);
text-align: left;
}
body.single h2 {
font-size: var(--font-size-2xl);
}
body.single h3 {
font-size: var(--font-size-xl);
}
body.single h4 {
font-size: var(--font-size-lg);
}
.single-author-box {
gap: var(--spacing-md);
}
.single-author-photo {
width: 72px;
height: 72px;
}
.single-author-name {
font-size: var(--font-size-base);
}
.single-author-position {
font-size: var(--font-size-xs);
}
.single-gentologie-club-ad-box.full-width-ad {
width: 100%;
padding: 0 var(--spacing-md);
margin: var(--spacing-lg) auto;
}
}
@media screen and (max-width: 1024px) and (min-width: 769px) {
.single-image-wrapper {
aspect-ratio: auto;
min-height: auto;
}
}
/* Tablette moyenne - 769px à 900px */
@media screen and (min-width: 769px) and (max-width: 900px) {
.single-related-posts-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
}
/* ========================================
RESPONSIVE: MOBILE (max 768px)
======================================== */
@media screen and (max-width: 768px) {
.single-article-thumbnail,
.single-article-header,
.single-article-meta-and-body {
width: 95%;
padding: 0 var(--spacing-md);
}
.single-article-title h1 {
font-size: var(--font-size-2xl);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-xs);
}
.single-article-excerpt {
font-size: var(--font-size-base);
text-align: left;
}
.single-article-body p {
font-size: var(--font-size-base);
text-align: left;
}
body.single h2,
.single-article-body h2 {
font-size: var(--font-size-3xl);
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-xs);
}
body.single h3,
.single-article-body h3 {
font-size: var(--font-size-2xl);
margin-top: var(--spacing-md);
margin-bottom: var(--spacing-xs);
}
body.single h4,
.single-article-body h4 {
font-size: var(--font-size-xl);
margin-top: var(--spacing-sm);
margin-bottom: var(--spacing-xs);
}
body.single h5,
.single-article-body h5 {
font-size: var(--font-size-lg);
margin-top: var(--spacing-sm);
margin-bottom: var(--spacing-xs);
}
body.single h6,
.single-article-body h6 {
font-size: var(--font-size-base);
margin-top: var(--spacing-sm);
margin-bottom: var(--spacing-xs);
}
.single-author-box {
gap: var(--spacing-sm);
align-items: flex-start;
}
.single-author-photo {
width: 60px;
height: 60px;
}
.single-author-name {
font-size: var(--font-size-sm);
}
.single-author-position {
font-size: var(--font-size-xs);
}
.single-gentologie-club-ad-box.full-width-ad {
width: 100%;
padding: 0 var(--spacing-md);
margin: var(--spacing-lg) auto;
position: relative;
left: auto;
transform: none;
}
.single-image-wrapper {
aspect-ratio: auto;
min-height: auto;
max-width: 300px;
height: auto;
}
.single-gentologie-club-ad-box img {
width: 100%;
height: auto;
max-width: 300px;
max-height: none;
object-fit: contain;
}
}
/* ========================================
RESPONSIVE: PETIT MOBILE (max 600px)
======================================== */
@media screen and (max-width: 600px) {
.single-article-thumbnail,
.single-article-header,
.single-article-meta-and-body {
width: 100%;
padding: 0 var(--spacing-small);
}
.single-article-thumbnail {
padding-top: calc(var(--menu-total-height) + 0.2rem);
}
.single-single-article-title h1 {
font-size: var(--font-size-xl);
line-height: var(--line-height-tight);
}
.single-article-excerpt {
font-size: var(--font-size-sm);
}
.single-article-body p {
font-size: var(--font-size-base);
}
.single-drop-cap {
font-size: 2.2em;
padding-right: 0.05em;
}
body.single h2,
.single-article-body h2 {
font-size: var(--font-size-2xl);
margin-top: var(--spacing-sm);
margin-bottom: 2px;
}
body.single h3,
.single-article-body h3 {
font-size: var(--font-size-xl);
margin-top: var(--spacing-sm);
margin-bottom: 2px;
}
body.single h4,
.single-article-body h4 {
font-size: var(--font-size-lg);
margin-top: var(--spacing-xs);
margin-bottom: 2px;
}
body.single h5,
.single-article-body h5 {
font-size: var(--font-size-base);
margin-top: var(--spacing-xs);
margin-bottom: 2px;
}
body.single h6,
.single-article-body h6 {
font-size: var(--font-size-sm);
margin-top: var(--spacing-xs);
margin-bottom: 2px;
}
.single-author-box {
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--spacing-sm);
}
.single-author-photo {
width: 64px;
height: 64px;
}
.single-author-info {
margin-top: var(--spacing-sm);
}
.single-author-name {
font-size: var(--font-size-base);
}
.single-author-position {
font-size: var(--font-size-xs);
}
.single-gentologie-club-ad-box.full-width-ad {
width: 100%;
left: auto;
transform: none;
padding: 0 var(--spacing-small);
margin: var(--spacing-medium) auto;
position: relative;
}
.single-image-wrapper {
min-height: auto;
aspect-ratio: auto;
max-width: 300px;
}
.single-gentologie-club-ad-box img {
max-width: 300px;
width: 100%;
height: auto;
max-height: none;
}
.single-article-tags a {
font-size: var(--font-size-xs);
padding: 2px var(--spacing-xs);
margin-right: 2px;
margin-bottom: 2px;
}
}
/* ========================================
RESPONSIVE: TRÈS PETIT MOBILE (max 400px)
======================================== */
@media screen and (max-width: 400px) {
.single-article-thumbnail,
.single-article-header,
.single-article-meta-and-body {
width: 100%;
padding: 0 var(--spacing-sm);
}
.single-article-title h1 {
font-size: var(--font-size-lg);
}
.single-article-excerpt {
font-size: var(--font-size-xs);
}
.single-article-body p {
font-size: var(--font-size-sm);
}
body.single h2,
.single-article-body h2 {
font-size: var(--font-size-xl);
margin-top: var(--spacing-xs);
margin-bottom: 1px;
}
body.single h3,
.single-article-body h3 {
font-size: var(--font-size-lg);
margin-top: var(--spacing-xs);
margin-bottom: 1px;
}
body.single h4,
.single-article-body h4 {
font-size: var(--font-size-base);
margin-top: var(--spacing-xs);
margin-bottom: 1px;
}
body.single h5,
.single-article-body h5 {
font-size: var(--font-size-sm);
margin-top: var(--spacing-xs);
margin-bottom: 1px;
}
body.single h6,
.single-article-body h6 {
font-size: var(--font-size-xs);
margin-top: var(--spacing-xs);
margin-bottom: 1px;
}
.single-gentologie-club-ad-box.full-width-ad {
padding: 0 var(--spacing-xs);
width: 100%;
left: auto;
transform: none;
position: relative;
}
.single-image-wrapper {
max-width: 280px;
}
.single-gentologie-club-ad-box img {
max-width: 280px;
width: 100%;
height: auto;
}
.single-author-box {
gap: var(--spacing-xs);
}
.single-article-tags a {
font-size: 10px;
padding: 1px var(--spacing-xs);
margin-right: 1px;
margin-bottom: 1px;
}
} /* Articles individuels */
/* recent-articles.css - Page Articles Récents */
/* ========================================
STRUCTURE DE BASE
======================================== */
.recent-articles {
max-width: 1400px;
margin: 0 auto;
padding: 0 40px;
width: 100%;
box-sizing: border-box;
}
/* ========================================
EN-TÊTE DE PAGE
======================================== */
.page-header {
text-align: center;
padding: var(--spacing-large) 0 0 0;
margin: 0;
}
.page-header h1 {
font-family: var(--font-family-primary);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title);
margin: 0 0 var(--spacing-md) 0;
}
.page-header .underline {
width: 60px;
height: 4px;
background-color: var(--color-gentologie-green);
margin: 0 auto;
}
/* ========================================
GRILLE D'ARTICLES
======================================== */
.articles-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xl);
margin: var(--spacing-xxl) 0;
width: 100%;
}
.recent-article {
display: flex;
flex-direction: column;
background: var(--color-gentologie-background);
border: 1px solid var(--color-gentologie-border);
transition: all var(--transition-normal);
overflow: hidden;
}
.recent-article:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
}
.recent-article-thumbnail {
width: 100%;
overflow: hidden;
display: block;
}
.recent-article-thumbnail img {
width: 100%;
height: auto;
display: block;
transition: transform var(--transition-normal);
}
.recent-article:hover .article-thumbnail img {
transform: scale(1.05);
}
.recent-article-info {
padding: var(--spacing-lg);
flex-grow: 1;
display: flex;
flex-direction: column;
}
.recent-article-meta {
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
margin-bottom: var(--spacing-sm);
font-family: var(--font-family-secondary);
}
.recent-article-meta a {
color: var(--color-gentologie-green);
text-decoration: none;
transition: color var(--transition-normal);
}
.recent-article-meta a:hover {
color: var(--color-gentologie-text-secondary);
}
.recent-article-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title);
margin: 0;
line-height: var(--line-height-tight);
}
.recent-article-title a {
color: inherit;
text-decoration: none;
transition: color var(--transition-normal);
}
.recent-article-title a:hover {
color: var(--color-gentologie-green);
}
/* ========================================
PAGINATION (Repris de category.css)
======================================== */
.custom-pagination {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
margin: var(--spacing-xxl) auto;
width: 100%;
box-sizing: border-box;
}
.pagination-info {
flex-grow: 1;
text-align: center;
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-text);
max-width: 300px;
}
.pagination-button {
padding: var(--spacing-sm) var(--spacing-lg);
min-width: 120px;
text-align: center;
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
border: 2px solid var(--color-gentologie-green);
text-decoration: none;
cursor: pointer;
user-select: none;
transition: all 0.3s ease;
box-sizing: border-box;
font-weight: var(--font-weight-semibold);
font-family: var(--font-family-secondary);
}
.pagination-button:hover:not(.disabled) {
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.pagination-button.disabled {
border-color: var(--color-gentologie-border);
color: var(--color-text-secondary);
cursor: default;
pointer-events: none;
opacity: 0.5;
}
/* ========================================
MESSAGE "AUCUN ARTICLE"
======================================== */
.recent-articles p {
text-align: center;
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
padding: var(--spacing-xxl) 0;
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
/* Tablette - jusqu'à 1024px */
@media (max-width: 1024px) {
.recent-articles {
padding: 0 var(--spacing-lg);
}
.articles-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
.page-header h1 {
font-size: var(--font-size-4xl);
}
.recent-article-title {
font-size: var(--font-size-lg);
}
}
/* Mobile - jusqu'à 768px */
@media (max-width: 768px) {
.recent-articles {
padding: 0 var(--spacing-md);
}
.page-header {
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg) 0;
}
.page-header h1 {
font-size: var(--font-size-3xl);
}
.articles-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.recent-article-info {
padding: var(--spacing-md);
}
.recent-article-title {
font-size: var(--font-size-lg);
}
.recent-article-meta {
font-size: var(--font-size-xs);
}
/* Pagination responsive */
.custom-pagination {
flex-direction: column;
gap: var(--spacing-md);
margin-top: var(--spacing-xl);
}
.pagination-info {
order: -1;
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-sm);
}
.pagination-button {
width: 100%;
max-width: 200px;
padding: var(--spacing-sm) var(--spacing-md);
}
}
/* Petit mobile - jusqu'à 480px */
@media (max-width: 480px) {
.recent-articles {
padding: 0 var(--spacing-sm);
}
.page-header {
padding: var(--spacing-md) 0;
}
.page-header h1 {
font-size: var(--font-size-2xl);
}
.articles-grid {
gap: var(--spacing-md);
}
.recent-article-info {
padding: var(--spacing-sm);
}
.recent-article-title {
font-size: var(--font-size-base);
}
.pagination-button {
font-size: var(--font-size-sm);
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* ========================================
CORRECTIONS ANTI-DÉBORDEMENT
======================================== */
@media (max-width: 768px) {
* {
max-width: 100% !important;
box-sizing: border-box !important;
}
body, html {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
}
.recent-articles,
.articles-grid,
.recent-article,
.custom-pagination {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
} /* Page articles récents */
/* Fichier : Category.css */
.category-template {
display: flex;
justify-content: center;
padding: var(--spacing-large);
z-index: var(--z-dropdown);
box-sizing: border-box;
width: 100%;
max-width: 100%;
}
.category-container {
max-width: var(--content-max-width);
width: 80%;
max-width: none;
margin:0 auto;
box-sizing: border-box;
}
/* ========================================
FIL D'ARIANE
======================================== */
.breadcrumb-nav {
margin-bottom: var(--spacing-large);
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--color-gentologie-border);
}
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
font-size: var(--font-size-sm);
color: var(--color-text-green);
}
.breadcrumb-item {
display: flex;
align-items: center;
}
.breadcrumb-item:not(:last-child)::after {
content: "›";
margin: 0 var(--spacing-sm);
color: var(--color-gentologie-border);
font-weight: var(--font-weight-bold);
}
.breadcrumb-item a {
color: var(--color-gentologie-green) !important;
text-decoration: none;
transition: var(--transition-normal);
padding: var(--spacing-xs) var(--spacing-sm);
}
.breadcrumb-item a:hover {
color: var(--color-gentologie-green-dark);
text-decoration: underline;
}
.breadcrumb-item.active {
color: var(--color-gentologie-green);
font-weight: var(--font-weight-semibold);
}
/* ========================================
EN-TÊTES
======================================== */
.category-header h1 {
font-size: var(--font-size-5xl);
margin-bottom: var(--spacing-medium);
text-align: center;
color: var(--color-gentologie-title);
}
.category-header h1::after {
content: "";
display: block;
height: 4px;
width: 60px;
background-color: var(--color-gentologie-title);
margin: var(--spacing-sm) auto 0;
}
.category-description {
font-size: var(--font-size-base);
margin: var(--spacing-large) 0;
text-align: center;
color: var(--color-gentologie-text);
}
.category-description a {
text-decoration: none;
color: var(--color-green-gentologie);
}
/* ========================================
LAYOUT PRINCIPAL
======================================== */
body.category .container {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-large);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
@media (min-width: 1280px) {
body.category .container {
grid-template-columns: 1fr 28.75rem;
}
}
/* ========================================
BADGES DE NOUVEAUTÉ
======================================== */
.badge-new, .badge-today, .badge-week {
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
padding: 2px 6px;
margin-right: var(--spacing-xs);
letter-spacing: 0.5px;
display: inline-block;
}
.badge-new {
background: linear-gradient(45deg, var(--color-red-gentologie), #ff4444);
color: white;
animation: pulse-glow 2s infinite;
box-shadow: 0 0 10px rgba(166, 38, 38, 0.3);
}
.badge-today {
background: linear-gradient(45deg, var(--color-yellow-gentologie), #ffcc44);
color: var(--color-gentologie-text);
animation: gentle-pulse 3s infinite;
}
.badge-week {
background: linear-gradient(45deg, var(--color-green-gentologie), #00aa44);
color: white;
}
/* ========================================
ANIMATIONS
======================================== */
@keyframes pulse-glow {
0% {
transform: scale(1);
box-shadow: 0 0 10px rgba(166, 38, 38, 0.3);
}
50% {
transform: scale(1.05);
box-shadow: 0 0 15px rgba(166, 38, 38, 0.5);
}
100% {
transform: scale(1);
box-shadow: 0 0 10px rgba(166, 38, 38, 0.3);
}
}
@keyframes gentle-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.8; }
}
/* ========================================
STYLES GÉNÉRAUX ARTICLES
======================================== */
.first-article .text-right .excerpt,
.first-article .secondary-article-text .excerpt,
.secondary-article-text .excerpt {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin: var(--spacing-sm) 0;
line-height: var(--line-height-normal);
text-align: center;
}
.category-section-name {
font-size: var(--font-size-xs) !important;
text-transform: uppercase;
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title) !important;
margin-bottom: var(--spacing-xs) !important;
letter-spacing: 0.5px;
}
.category .first-article.secondary-article h2 {
font-size: var(--font-size-lg);
font-weight: bold;
color: var(--color-gentologie-title);
}
.category .other-articles .secondary-article h2 {
font-size: var(--font-size-lg);
font-weight: bold;
color: var(--color-gentologie-title);
}
.post-date {
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
margin-top: var(--spacing-sm);
font-style: italic;
border: none !important;
}
/* ========================================
FIRST ARTICLE - DESKTOP
======================================== */
.first-article {
display: flex;
gap: 0;
margin-bottom: var(--spacing-large);
border: 1px solid var(--color-gentologie-border);
width: 100%;
max-width: 100%;
box-sizing: border-box;
overflow: hidden;
transition: var(--transition-normal);
flex-direction: row;
}
.first-article:hover {
opacity: 0.9;
box-shadow: var(--shadow-hover);
}
.first-article .image-left,
.first-article .secondary-article-image {
flex: 1;
aspect-ratio: 1 / 1;
overflow: hidden;
min-width: 0;
border: none !important;
}
.first-article .image-left img,
.first-article .secondary-article-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: var(--transition-normal);
border: none !important;
}
.first-article:hover .image-left img,
.first-article:hover .secondary-article-image img {
transform: scale(1.05);
}
.first-article .text-right,
.first-article .secondary-article-text {
flex: 1;
background-color: var(--color-gentologie-background-box);
padding: var(--spacing-large);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
box-sizing: border-box;
min-width: 0;
border: none !important;
}
.first-article .text-right h2,
.first-article .secondary-article-text h2 {
text-decoration: none;
font-size: var(--font-size-4xl);
color: var(--color-green-gentologie);
word-wrap: break-word;
hyphens: auto;
line-height: var(--line-height-tight);
font-weight: var(--font-weight-bold);
}
.first-article .text-right h2:hover,
.first-article .secondary-article-text h2:hover {
text-decoration: underline;
}
.first-article-link {
display: flex;
width: 100%;
height: 100%;
color: inherit;
text-decoration: none;
box-sizing: border-box;
border: none !important;
}
.article-group {
margin-bottom: var(--spacing-xxl);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
/* ========================================
OTHER ARTICLES (2 & 3)
======================================== */
.other-articles {
display: flex;
flex-direction: column;
position: relative;
gap: 0;
padding-top: var(--spacing-large);
margin-top: var(--spacing-large);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.other-articles .secondary-article {
width: calc(50% - 0.5px);
padding: var(--spacing-md);
box-sizing: border-box;
min-width: 0;
border: none !important;
}
.other-articles::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background-color: var(--color-gentologie-border);
transform: translateX(-50%);
pointer-events: none;
}
@media (min-width: 768px) {
.other-articles {
flex-direction: row;
}
}
.secondary-article {
flex: 1;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
box-sizing: border-box;
min-width: 0;
transition: var(--transition-normal);
overflow: hidden;
border: none !important;
}
.secondary-article:hover {
opacity: 0.9;
transform: translateY(-2px);
}
.secondary-article a {
text-decoration: none;
}
.secondary-article-image {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
border: none !important;
}
.secondary-article-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: var(--transition-normal);
border: none !important;
}
.secondary-article:hover .secondary-article-image img {
transform: scale(1.05);
}
.secondary-article-text {
padding: var(--spacing-medium);
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
border: none !important;
}
.secondary-article-text h2 {
color: var(--color-green-gentologie);
font-size: var(--font-size-4xl);
margin: var(--spacing-md) 0;
word-wrap: break-word;
hyphens: auto;
line-height: var(--line-height-tight);
font-weight: var(--font-weight-bold);
}
.secondary-article-text h2:hover {
text-decoration: underline;
}
.secondary-article .category-section-name {
font-size: var(--font-size-sm);
text-transform: uppercase;
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-sm);
}
.secondary-article .post-date {
font-size: var(--font-size-sm);
color: var(--color-gentologie-title);
margin-top: var(--spacing-md);
border: none !important;
}
/* ========================================
SIDEBAR GÉNÉRALE
======================================== */
.category-sidebar {
width: 100%;
display: flex;
flex-direction: column;
gap: var(--spacing-large);
}
.sidebar-widget {
background: var(--color-gentologie-background-box);
border: 1px solid var(--color-gentologie-border);
overflow: hidden;
transition: var(--transition-normal);
}
.sidebar-widget:hover {
box-shadow: var(--shadow-medium);
}
.widget-title {
background: var(--color-green-gentologie);
color: var(--color-gentologie-text-alt);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
margin: 0;
padding: var(--spacing-medium);
text-align: center;
}
.widget-content {
padding: var(--spacing-medium);
}
/* ========================================
NEWSLETTER WIDGET
======================================== */
.category-sidebar .newsletter-widget{
background: var(--color-gentologie-green);
}
.newsletter-widget .widget-content p {
margin-bottom: var(--spacing-medium);
color: var(--color-gentologie-text);
text-align: center;
}
/* Structure principale du formulaire sidebar */
.sidebar-newsletter {
width: 100%;
padding-top: 2rem;
}
.sidebar-newsletter-inner {
width: 100%;
}
.newsletter-form-column {
width: 100%;
}
/* Titre et sous-titre */
.newsletter-form-column h2 {
color: var(--color-gentologie-title-alt);
margin: 0 0 var(--spacing-xs, 8px) 0;
text-align: center;
font-size: var(--font-size-base, 16px);
line-height: 1.2;
}
.newsletter-subtitle {
margin-bottom: var(--spacing-sm, 12px);
color: var(--color-gentologie-text-alt);
text-align: center;
font-size: var(--font-size-xs, 12px);
line-height: 1.3;
}
/* Groupes de champs */
.mc-field-group {
display: flex;
flex-direction: column;
gap: 4px;
margin-bottom: var(--spacing-xs, 8px);
padding: 0 2rem 0 2rem;
}
.mc-field-group label {
font-weight: var(--font-weight-medium);
color: var(--color-gentologie-text-alt) !important;
font-size: var(--font-size-xs, 12px);
}
.asterisk {
color: var(--color-red, #e74c3c);
}
/* Champs input et select */
.mc-field-group input[type="email"],
.mc-field-group input[type="text"],
.mc-field-group select {
padding: var(--spacing-xs, 8px);
border: 1px solid var(--color-gentologie-border);
font-size: var(--font-size-sm, 14px);
background: var(--color-gentologie-background);
color: var(--color-gentologie-text);
transition: var(--transition-normal);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.mc-field-group input:focus,
.mc-field-group select:focus {
outline: none;
border-color: var(--color-gentologie-green);
box-shadow: 0 0 0 2px rgba(var(--color-gentologie-green-rgb, 76, 175, 80), 0.2);
}
.mc-field-group select {
cursor: pointer;
appearance: none;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 8px center;
background-size: 14px;
padding-right: 28px;
}
/* Groupe RGPD */
.newsletter-gdpr {
margin: var(--spacing-sm, 12px) 0;
}
.newsletter-gdpr-label {
display: flex;
align-items: flex-start;
gap: 6px;
cursor: pointer;
font-size: var(--font-size-xs, 12px);
line-height: 1.3;
}
.newsletter-gdpr input[type="checkbox"] {
margin: 0;
flex-shrink: 0;
width: 14px;
height: 14px;
accent-color: var(--color-gentologie-green);
}
.newsletter-gdpr a {
color: var(--color-gentologie-green);
text-decoration: underline;
}
.newsletter-gdpr a:hover {
text-decoration: none;
}
.newsletter-widget .clear {
padding: 0 2rem;
}
/* Bouton d'inscription */
#mc-embedded-subscribe {
background: var(--color-gentologie-background) !important;
color: var(--color-gentologie-green)!important;
border: none;
font-weight: var(--font-weight-bold);
cursor: pointer;
transition: var(--transition-normal);
width: 100%;
font-size: var(--font-size-sm, 14px);
box-sizing: border-box;
padding: 1rem !important;
}
#mc-embedded-subscribe:hover {
background: var(--color-gentologie-green)!important;
color: var(--color-gentologie-text-alt)!important;
font-weight: var(--font-weight-bold)!important;
border: 1px solid var(--color-gentologie-border-alt)!important;
transform: translateY(-1px);
}
#mc-embedded-subscribe:active {
transform: translateY(0);
}
/* Messages de réponse */
#mce-responses {
margin-top: var(--spacing-sm);
}
.response {
padding: var(--spacing-sm);
font-size: var(--font-size-sm);
text-align: center;
}
#mce-error-response {
background-color: rgba(231, 76, 60, 0.1);
color: var(--color-red, #e74c3c);
border: 1px solid rgba(231, 76, 60, 0.3);
}
#mce-success-response {
background-color: rgba(76, 175, 80, 0.1);
color: var(--color-gentologie-green);
border: 1px solid rgba(76, 175, 80, 0.3);
}
/* Amélioration responsive */
@media (max-width: 768px) {
.newsletter-form-column h2 {
font-size: var(--font-size-base);
}
.newsletter-subtitle {
font-size: var(--font-size-xs);
}
.mc-field-group input,
.mc-field-group select {
font-size: var(--font-size-sm);
}
}
/* ========================================
PODCAST WIDGET
======================================== */
.podcast-cover {
text-align: center;
margin-bottom: var(--spacing-medium);
}
.podcast-cover img {
width: 100%;
max-width: 250px;
height: auto;
object-fit: cover;
}
/* CACHER LE TITRE PRINCIPAL DU WIDGET BALADO */
.podcast-widget h3 {
display: none;
}
/* CACHER LE TITRE DU BALADO */
.podcast-widget h4 {
display: none;
}
.podcast-widget p {
color: var(--color-gentologie-text);
margin-bottom: var(--spacing-medium);
text-align: center;
}
.podcast-buttons {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
align-items: center; /* Centre tous les éléments dans le conteneur */
}
.btn-podcast {
padding: var(--spacing-xs) var(--spacing-sm);
text-decoration: none;
text-align: center;
font-weight: var(--font-weight-medium);
transition: var(--transition-normal);
font-size: var(--font-size-sm);
}
.btn-podcast:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* ========================================
SIDEBAR CLUB GENTOLOGIE - RESPONSIVE
======================================== */
.sidebar-club-gentologie-widget {
background: green !important;
}
/* Conteneur principal */
.sidebar-club-gentologie-widget {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: var(--color-gentologie-green) !important;
border: 1px solid var(--color-gentologie-border);
padding: var(--spacing-medium);
border-radius: 0.5rem;
overflow: hidden;
transition: var(--transition-normal);
}
/* Hover sur le widget */
.sidebar-club-gentologie-widget:hover {
box-shadow: var(--shadow-medium);
}
/* Badge "Exclusif / Exclusive" */
.club-sidebar-badge {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-text-alt);
text-transform: uppercase;
margin-bottom: var(--spacing-xs);
padding: 0.2rem 0.6rem;
border-radius: 0.25rem;
display: inline-block;
}
/* Titre du widget */
.club-sidebar-title {
font-size: clamp(2rem, 4vw, 3rem) !important;
font-weight: 200;
margin-bottom: var(--spacing-medium);
letter-spacing: -0.02em;
color: var(--color-gentologie-text-alt) !important;
}
/* Description */
.club-sidebar-description {
color: var(--color-gentologie-text-alt);
margin-bottom: var(--spacing-medium);
line-height: 1.5;
}
/* Bouton CTA */
.club-sidebar-cta {
display: inline-flex;
justify-content: center;
align-items: center;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-gentologie-text-alt);
color: var(--color-gentologie-green);
font-weight: var(--font-weight-medium);
text-decoration: none;
border-radius: 0.25rem;
transition: var(--transition-normal);
}
/* Hover bouton CTA */
.club-sidebar-cta:hover {
opacity: 0.9;
transform: translateY(-2px);
}
/* Responsive - ajuste sur petits écrans */
@media (max-width: 480px) {
.sidebar-club-gentologie-widget {
padding: var(--spacing-small);
}
.club-sidebar-title {
font-size: clamp(1.5rem, 5vw, 2.5rem);
}
.club-sidebar-description {
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-small);
}
.club-sidebar-cta {
width: 100%;
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* ========================================
PAGINATION
======================================== */
.custom-pagination {
display: flex;
justify-content: space-between;
align-items: center;
max-width: calc(100% - 10rem);
margin: 2rem auto 5rem auto;
width: 100%;
box-sizing: border-box;
}
.pagination-info {
flex-grow: 1;
text-align: center;
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-text-green);
max-width: 300px;
}
.pagination-button {
padding: 0.5rem 1rem;
min-width: 120px;
text-align: center;
background: var(--color-gentologie-background);
color: var(--color-gentologie-text-green);
border: 2px solid var(--color-gentologie-border);
text-decoration: none;
cursor: pointer;
user-select: none;
transition: background-color 0.3s ease, transform 0.2s ease;
box-sizing: border-box;
font-weight: var(--font-weight-medium, 500);
}
.pagination-button:hover:not(.disabled) {
background-color: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-alt);
border: 2px solid var(--color-gentologie-border);
transform: translateY(-1px);
}
.pagination-button.disabled {
border-color: #ccc;
color: #999;
cursor: default;
pointer-events: none;
opacity: 0.5;
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
/* Tablette et mobile - sidebar en dessous des articles */
@media (max-width: 1279px) {
body.category .container {
display: grid !important;
grid-template-columns: 1fr; /* Une seule colonne */
grid-template-rows: auto; /* Laisser articles et sidebar s’empiler */
gap: var(--spacing-large);
}
.category-main-content {
grid-row: 1; /* Articles en haut */
}
.category-sidebar {
grid-row: 2; /* Sidebar en bas */
margin-top: 0; /* Optionnel */
}
}
/* Responsive Breadcrumb */
@media (max-width: 768px) {
.breadcrumb-nav {
margin-bottom: var(--spacing-medium);
padding: var(--spacing-xs) 0;
}
.breadcrumb {
font-size: var(--font-size-xs);
}
.breadcrumb-item a {
padding: var(--spacing-xs);
}
}
@media (max-width: 480px) {
/* Masquer les niveaux intermédiaires si plus de 3 éléments */
.breadcrumb-item:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
display: none;
}
/* Ajouter ... si on a masqué des éléments */
.breadcrumb-item:first-child::after {
content: "›";
}
.breadcrumb:has(.breadcrumb-item:nth-child(4)) .breadcrumb-item:first-child::after {
content: "› ... ›";
}
}
/* Tablette - jusqu'à 1024px */
@media (max-width: 1024px) {
.category-template {
padding: var(--spacing-medium);
}
.category-header h1 {
font-size: var(--font-size-4xl);
}
.first-article .text-right,
.first-article .secondary-article-text {
padding: var(--spacing-medium);
}
.first-article .text-right h2,
.first-article .secondary-article-text h2 {
font-size: var(--font-size-3xl);
}
.secondary-article-text h2 {
font-size: var(--font-size-3xl);
}
}
/* Mobile - jusqu'à 768px */
@media (max-width: 768px) {
.category-template {
padding: var(--spacing-md);
}
.category-container {
width: 100%;
max-width: 100%;
}
.category-header h1 {
font-size: var(--font-size-3xl);
}
.category-description {
font-size: var(--font-size-base);
margin: var(--spacing-medium) 0;
}
/* SIDEBAR MOBILE */
.category-sidebar {
gap: var(--spacing-sm);
}
.widget-title {
font-size: var(--font-size-sm);
padding: var(--spacing-xs) var(--spacing-sm);
}
.widget-content {
padding: var(--spacing-xs) var(--spacing-sm);
}
/* Newsletter verticale sur mobile */
.newsletter-form .form-group {
flex-direction: column;
}
.newsletter-form input[type="email"],
.btn-subscribe {
font-size: var(--font-size-xs);
}
/* PREMIER ARTICLE: Format vertical sur mobile */
.first-article,
.first-article-link {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin-bottom: var(--spacing-large);
overflow: hidden;
background: var(--color-gentologie-background);
border: 1px solid var(--color-gentologie-border) !important;
gap: 0 !important;
}
.first-article .image-left,
.first-article .secondary-article-image {
width: 100% !important;
aspect-ratio: 16 / 9 !important;
order: 1 !important;
flex: none !important;
min-height: 200px !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
}
.first-article .secondary-article-text {
width: 100% !important;
padding: var(--spacing-medium) !important;
background: var(--color-gentologie-background) !important;
order: 2 !important;
flex: none !important;
display: block !important;
text-align: left !important;
margin: 0 !important;
border: none !important;
}
.first-article .secondary-article-text h2 {
font-size: var(--font-size-xl) !important;
color: var(--color-gentologie-title) !important;
margin: var(--spacing-sm) 0 !important;
text-align: left !important;
}
.first-article .secondary-article-text .category-section-name {
font-size: var(--font-size-xs) !important;
color: var(--color-gentologie-title) !important;
margin-bottom: var(--spacing-xs) !important;
text-align: left !important;
}
.first-article .secondary-article-text .excerpt {
font-size: var(--font-size-sm) !important;
color: var(--color-text-secondary) !important;
margin: var(--spacing-sm) 0 !important;
text-align: left !important;
}
.first-article .secondary-article-text .post-date {
font-size: var(--font-size-xs) !important;
color: var(--color-text-secondary) !important;
margin-top: var(--spacing-sm) !important;
text-align: left !important;
border: none !important;
}
.article-group {
margin-bottom: var(--spacing-xl);
}
/* Articles secondaires: une seule colonne */
.other-articles {
flex-direction: column;
padding-top: 0;
margin-top: 0;
gap: var(--spacing-large);
}
.other-articles .secondary-article {
width: 100%;
margin-bottom: 0;
border: 1px solid var(--color-gentologie-border) !important;
overflow: hidden;
background: var(--color-gentologie-background);
}
.secondary-article-image {
aspect-ratio: 16 / 9;
min-height: 150px;
}
.secondary-article-text {
padding: var(--spacing-medium);
text-align: left;
}
.secondary-article-text h2 {
font-size: var(--font-size-xl);
margin: var(--spacing-sm) 0;
color: var(--color-gentologie-title);
}
.secondary-article-text .excerpt {
font-size: var(--font-size-sm);
margin: var(--spacing-sm) 0;
text-align: left;
}
/* Masquer la ligne verticale sur mobile */
.other-articles::before {
display: none;
}
/* Pagination responsive */
.custom-pagination {
flex-direction: column;
gap: var(--spacing-md);
align-items: center;
margin-top: var(--spacing-xl);
}
.pagination-info {
order: -1;
font-size: var(--font-size-sm);
}
.pagination-button {
min-width: 140px;
text-align: center;
padding: var(--spacing-sm) var(--spacing-md);
}
}
/* Petit mobile - jusqu'à 480px */
@media (max-width: 480px) {
.category-template {
padding: var(--spacing-sm);
}
.category-header h1 {
font-size: var(--font-size-2xl);
}
.category-description {
font-size: var(--font-size-sm);
margin: var(--spacing-md) 0;
}
.first-article .secondary-article-text {
padding: var(--spacing-sm) !important;
}
.first-article .secondary-article-text h2 {
font-size: var(--font-size-lg) !important;
}
.secondary-article-text {
padding: var(--spacing-sm);
}
.secondary-article-text h2 {
font-size: var(--font-size-lg);
}
.pagination-button {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-sm);
min-width: 120px;
}
}
/* ========================================
CORRECTIONS ANTI-DÉBORDEMENT
======================================== */
@media (max-width: 768px) {
* {
max-width: 100% !important;
box-sizing: border-box !important;
}
body, html {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
}
.category-template,
.category-container,
.container,
.category-main-content,
.category-sidebar,
.first-article,
.article-group,
.other-articles,
.secondary-article,
.custom-pagination {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
}
/* ========================================
SIDEBAR STICKY - CORRECTION HAUTEUR DES WIDGETS
======================================== */
/* Desktop uniquement - pas de sticky sur tablette/mobile */
@media (min-width: 1280px) {
/* S'assurer que le conteneur grid permet le sticky */
body.category .container {
align-items: flex-start; /* CRUCIAL pour sticky dans grid */
}
.category-sidebar {
position: sticky;
top: calc(var(--menu-total-height) + var(--spacing-medium) + 55px); /* Hauteur menu + marge */
/* SUPPRIMÉ max-height qui causait le problème */
overflow-y: visible; /* Laisse le contenu s'afficher normalement */
z-index: var(--z-dropdown); /* Plus bas que le menu */
align-self: flex-start; /* CRUCIAL pour sticky dans grid */
}
/* OPTIONNEL : Si vous voulez vraiment limiter la hauteur et ajouter un scroll */
.category-sidebar.with-scroll {
max-height: calc(100vh - var(--menu-total-height) - var(--spacing-large) * 2);
overflow-y: auto;
}
/* Scrollbar personnalisée pour la sidebar (seulement si scroll activé) */
.category-sidebar.with-scroll::-webkit-scrollbar {
width: 6px;
}
.category-sidebar.with-scroll::-webkit-scrollbar-track {
background: var(--color-gentologie-background);
}
.category-sidebar.with-scroll::-webkit-scrollbar-thumb {
background: var(--color-gentologie-border);
}
.category-sidebar.with-scroll::-webkit-scrollbar-thumb:hover {
background: var(--color-gentologie-green);
}
} /* Archives catégories */
/* ========================================
STYLES SPÉCIFIQUES AUTHOR PAGE
======================================== */
.author-template {
display: flex;
justify-content: center;
padding: var(--spacing-large);
background: var(--color-gentologie-background);
min-height: 100vh;
box-sizing: border-box;
}
.author-container {
max-width: var(--content-max-width);
width: 100%;
box-sizing: border-box;
}
/* ========================================
SECTION 1: HERO AUTHOR
======================================== */
.author-hero {
display: flex;
gap: var(--spacing-xl);
margin-bottom: var(--spacing-xxl);
align-items: center;
padding: var(--spacing-large);
background: var(--color-gentologie-background-box);
border: 1px solid var(--color-gentologie-border);
box-shadow: var(--shadow-medium);
}
.author-avatar {
flex-shrink: 0;
}
.author-avatar img {
width: 180px;
height: 180px;
object-fit: cover;
display: block;
}
.author-intro {
flex: 1;
min-width: 0;
}
.author-page-name {
font-size: var(--font-size-5xl)!important;
color: var(--color-gentologie-title);
margin: 0 0 var(--spacing-medium) 0;
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
}
.author-poste {
color: var(--color-gentologie-text-green);
}
.author-description {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text-secondary);
line-height: var(--line-height-relaxed);
margin: 0;
}
/* ========================================
SECTION 2: NAVIGATION
======================================== */
.author-nav {
position: relative; /* ou static */
top: auto; /* neutralise le top sticky */
z-index: auto; /* si tu n’as pas besoin du z-index */
border-top: 1px solid var(--color-gentologie-text-green);
border-bottom: 1px solid var(--color-gentologie-text-green);
padding: var(--spacing-xs) 0; /* espace au-dessus et en dessous des liens */
margin-bottom: var(--spacing-large); /* espace entre la nav et la section suivante */
}
.author-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.author-nav li {
flex: 1;
min-width: 120px;
}
.author-nav a {
display: block;
padding: var(--spacing-medium);
color: var(--color-gentologie-text-green);
text-decoration: none;
text-align: center;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
transition: var(--transition-normal);
border-right: 1px solid rgba(255, 245, 230, 0.2);
}
.author-nav li:last-child a {
border-right: none;
}
.author-nav a:hover,
.author-nav a.active {
text-decoration: none;
}
/* ========================================
LAYOUT PRINCIPAL
======================================== */
.author-template .container {
display: grid;
grid-template-columns: 1fr;
gap: var(--spacing-large);
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
@media (min-width: 1280px) {
.author-template .container {
grid-template-columns: 1fr 28.75rem;
}
}
/* ========================================
SECTIONS COMMUNES
======================================== */
.author-about,
.author-contact {
margin-bottom: var(--spacing-xxl);
padding: var(--spacing-large);
}
.author-section-title {
font-size: var(--font-size-3xl);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-large);
font-weight: var(--font-weight-bold);
text-align: center;
position: relative;
}
.author-section-title::after {
content: "";
display: block;
width: 60px;
height: 4px;
background: var(--color-gentologie-green);
margin: var(--spacing-sm) auto 0;
}
.author-section-anchor {
scroll-margin-top: calc(var(--menu-total-height) + var(--spacing-xl));
}
.author-about-text {
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-gentologie-text);
max-width: 800px;
margin: 0 auto;
}
.author-about-text p {
margin-bottom: var(--spacing-medium);
}
.author-about-text p:last-child {
margin-bottom: 0;
}
.author-about-text .author-subtitle {
color: var(--color-gentologie-title);
font-weight: var( --font-weight-semibold);
font-size: 1.1em;
margin-top: 1em;
margin-bottom: 0.5em;
line-height: 1.3;
}
/* ========================================
SECTION 4: CONTACT
======================================== */
.author-contact-methods {
display: flex;
flex-direction: column; /* empile les éléments verticalement */
gap: 0; /* le gap sera géré par la bordure */
margin-top: var(--spacing-large);
}
.author-contact-item {
display: flex;
align-items: center;
color: var(--color-gentologie-green);
gap: var(--spacing-sm);
padding: var(--spacing-sm) 0; /* padding vertical seulement */
border-bottom: 1px solid var(--color-gentologie-green); /* ligne de séparation */
transition: var(--transition-normal);
}
.author-contact-item:last-child {
border-bottom: none; /* pas de ligne sur le dernier élément */
color: var(--color-gentologie-green) !important;
}
.contact-item:hover {
box-shadow: var(--shadow-small);
transform: translateY(-2px);
}
.contact-item strong {
color: var(--color-gentologie-title);
min-width: 80px;
}
.contact-item a {
color: var(--color-gentologie-green);
text-decoration: none;
}
.contact-item a:hover {
text-decoration: underline;
}
/* ========================================
SECTION 5: EN VEDETTE
======================================== */
.author-featured {
margin-bottom: var(--spacing-xxl);
}
/* Grid pour les articles */
.author-featured .author-featured-grid {
display: flex;
gap: var(--spacing-medium);
flex-wrap: wrap;
}
/* Chaque article */
.author-featured .author-featured-item {
width: 100%;
}
@media (min-width: 768px) {
.author-featured .author-featured-item {
width: calc(50% - var(--spacing-medium)/2);
}
}
/* Lien article */
.author-featured .author-featured-link {
display: block;
text-decoration: none;
color: inherit;
}
/* Image avec ratio 9/16 */
.author-featured .author-featured-image {
width: 100%;
overflow: hidden;
aspect-ratio: 9 / 16; /* ratio vertical */
}
.author-featured .author-featured-image img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
}
/* Titre de l'article */
.author-featured .author-featured-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
margin-top: var(--spacing-small);
line-height: var(--line-height-tight);
color: var(--color-gentologie-title);
}
/* Date de publication */
.author-featured .author-featured-date {
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
margin-top: var(--spacing-xs);
}
/* ========================================
SECTION 6: ARTICLES RÉCENTS
======================================== */
.author-recent {
margin-bottom: var(--spacing-xxl);
}
.author-recent-articles {
margin-top: var(--spacing-large);
border-top: 1px solid var(--color-gentologie-green);
}
.author-recent-article-link {
text-decoration: none;
color: inherit;
display: block; /* s'assure que le lien occupe toute la largeur si utilisé */
}
.author-recent-article {
display: grid !important;
text-decoration: none !important;
grid-template-columns: 100px 1fr 120px; /* date | contenu | image */
align-items: center;
gap: var(--spacing-medium);
padding: var(--spacing-medium) 0;
border-bottom: 1px solid var(--color-gentologie-green);
}
.author-recent-date {
text-align: left;
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
font-weight: var(--font-weight-semibold);
line-height: 1.3;
}
.author-recent-content {
text-align: left;
text-decoration: none !important;
}
.author-recent-title-link {
text-decoration: none;
color: inherit;
}
.author-recent-title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-xs);
line-height: var(--line-height-tight);
}
.author-recent-excerpt {
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
line-height: var(--line-height-normal);
margin-bottom: var(--spacing-xs);
}
.author-name-recents {
font-size: var(--font-size-xs) !important;
color: var(--color-gentologie-green);
text-transform: uppercase;
font-weight: var(--font-weight-semibold);
}
.author-recent-image {
width: 120px;
height: 80px;
overflow: hidden;
}
.author-recent-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ========================================
PAGINATION
======================================== */
.author-pagination {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--spacing-xl);
padding: var(--spacing-medium) 0;
}
.author-pagination-btn {
padding: var(--spacing-sm) var(--spacing-medium);
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
border: none;
text-decoration: none;
font-weight: var(--font-weight-semibold);
transition: var(--transition-normal);
}
.author-pagination-btn:hover {
background: var(--color-gentologie-green-dark);
transform: translateY(-1px);
}
.author-pagination-btn.disabled {
background: var(--color-gentologie-background);
color: var(--color-gentologie-green-accent) !important;
cursor: not-allowed;
pointer-events: none;
}
.author-pagination-info {
color: var(--color-gentologie-text-secondary);
font-weight: var(--font-weight-semibold);
}
/* ========================================
SIDEBAR CLUB GENTOLOGIE - RESPONSIVE
======================================== */
.sidebar-club-gentologie-widget {
background: green !important;
}
/* Conteneur principal */
.sidebar-club-gentologie-widget {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
background: var(--color-gentologie-green) !important;
border: 1px solid var(--color-gentologie-border);
padding: var(--spacing-medium);
border-radius: 0.5rem;
overflow: hidden;
transition: var(--transition-normal);
}
/* Hover sur le widget */
.sidebar-club-gentologie-widget:hover {
box-shadow: var(--shadow-medium);
}
/* Badge "Exclusif / Exclusive" */
.club-sidebar-badge {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-text-alt);
text-transform: uppercase;
margin-bottom: var(--spacing-xs);
padding: 0.2rem 0.6rem;
border-radius: 0.25rem;
display: inline-block;
}
/* Titre du widget */
.club-sidebar-title {
font-size: clamp(2rem, 4vw, 3rem) !important;
font-weight: 200;
margin-bottom: var(--spacing-medium);
letter-spacing: -0.02em;
color: var(--color-gentologie-text-alt) !important;
}
/* Description */
.club-sidebar-description {
color: var(--color-gentologie-text-alt);
margin-bottom: var(--spacing-medium);
line-height: 1.5;
}
/* Bouton CTA */
.club-sidebar-cta {
display: inline-flex;
justify-content: center;
align-items: center;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--color-gentologie-text-alt);
color: var(--color-gentologie-green);
font-weight: var(--font-weight-medium);
text-decoration: none;
border-radius: 0.25rem;
transition: var(--transition-normal);
}
/* Hover bouton CTA */
.club-sidebar-cta:hover {
opacity: 0.9;
transform: translateY(-2px);
}
/* Responsive - ajuste sur petits écrans */
@media (max-width: 480px) {
.sidebar-club-gentologie-widget {
padding: var(--spacing-small);
}
.club-sidebar-title {
font-size: clamp(1.5rem, 5vw, 2.5rem);
}
.club-sidebar-description {
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-small);
}
.club-sidebar-cta {
width: 100%;
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
/* Tablette */
@media (max-width: 1024px) {
.author-template {
padding: var(--spacing-medium);
}
.author-hero {
gap: var(--spacing-large);
padding: var(--spacing-medium);
}
.author-avatar img {
width: 150px;
height: 150px;
}
.author-name {
font-size: var(--font-size-4xl);
}
.author-featured-articles {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-medium);
}
.author-recent-image {
width: 100px;
height: 70px;
}
}
/* Tablette - Sidebar en haut */
@media (max-width: 1279px) {
.category-sidebar {
order: -1;
gap: var(--spacing-medium);
}
.widget-title {
font-size: var(--font-size-base);
padding: var(--spacing-sm);
}
.widget-content {
padding: var(--spacing-sm);
}
}
/* Mobile */
@media (max-width: 768px) {
.author-template {
padding: var(--spacing-sm);
}
.author-hero {
flex-direction: column;
text-align: center;
gap: var(--spacing-medium);
padding: var(--spacing-medium);
}
.author-avatar img {
width: 120px;
height: 120px;
}
.author-name {
font-size: var(--font-size-3xl);
}
.author-description {
font-size: var(--font-size-base);
}
.author-nav ul {
flex-direction: column;
}
.author-nav a {
border-right: none;
border-bottom: 1px solid rgba(255, 245, 230, 0.2);
}
.author-nav li:last-child a {
border-bottom: none;
}
.author-about,
.author-contact {
padding: var(--spacing-medium);
}
.author-section-title {
font-size: var(--font-size-2xl);
}
.author-contact-methods {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.author-featured-articles {
grid-template-columns: 1fr;
gap: var(--spacing-medium);
}
.author-recent-article {
flex-direction: column;
gap: var(--spacing-sm);
padding: var(--spacing-sm);
}
.author-recent-date {
width: 100%;
text-align: left;
order: 2;
}
.author-recent-content {
order: 1;
text-align: center;
}
.author-recent-image {
order: 0;
width: 100%;
height: 150px;
margin-bottom: var(--spacing-sm);
}
.author-recent-title {
font-size: var(--font-size-lg);
}
.author-pagination {
flex-direction: column;
gap: var(--spacing-sm);
text-align: center;
}
/* SIDEBAR MOBILE */
.category-sidebar {
gap: var(--spacing-sm);
}
.widget-title {
font-size: var(--font-size-sm);
padding: var(--spacing-xs) var(--spacing-sm);
}
.widget-content {
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* Petit mobile */
@media (max-width: 480px) {
.author-name {
font-size: var(--font-size-2xl);
}
.author-section-title {
font-size: var(--font-size-xl);
}
.author-recent-title {
font-size: var(--font-size-base);
}
.author-featured-title {
font-size: var(--font-size-lg);
}
/* Breadcrumb responsive */
.breadcrumb-item:not(:first-child):not(:last-child):not(:nth-last-child(2)) {
display: none;
}
.breadcrumb:has(.breadcrumb-item:nth-child(4)) .breadcrumb-item:first-child::after {
content: "› ... ›";
}
}
/* ========================================
CORRECTIONS ANTI-DÉBORDEMENT
======================================== */
@media (max-width: 768px) {
* {
max-width: 100% !important;
box-sizing: border-box !important;
}
body, html {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
}
.author-template,
.author-container,
.container,
.author-main-content,
.category-sidebar {
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
}
/* ========================================
SIDEBAR STICKY
======================================== */
@media (min-width: 1280px) {
.author-template .container {
align-items: flex-start;
}
.category-sidebar {
position: sticky;
top: calc(var(--menu-total-height) + var(--spacing-medium) + 55px);
overflow-y: visible;
z-index: var(--z-dropdown);
align-self: flex-start;
}
}
/* Pages auteurs */
/* === 5. PAGES INSTITUTIONNELLES === */
/* about.css - Version corrigée pour Gentologie */
/* Hero Section */
.hero {
min-height: 100vh;
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 2rem 0 2rem 0;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(171, 193, 177, 0.1) 0%, transparent 50%);
}
.hero-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
z-index: 1;
position: relative;
}
/* CORRECTION IMPORTANTE : Utilisation de .hero-about-text comme dans votre PHP */
.hero-about-text h1 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-text-alt);
margin-bottom: 2rem;
letter-spacing: -0.02em;
line-height: 0.9;
}
.hero-about-text .subtitle {
font-size: 1.5rem;
color: var(--color-gentologie-accent);
margin-bottom: 2rem;
font-weight: 300;
}
.hero-about-text .description {
font-size: 1.125rem;
color: rgba(255, 245, 230, 0.9);
line-height: 1.7;
max-width: 500px;
}
/* Section commune */
.section {
padding: 6rem 0;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* Mission Section */
.mission {
background: var(--color-gentologie-background);
padding: 2rem 0 2rem 0;
}
.mission-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 6rem;
align-items: center;
}
.mission-label {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-gentologie-accent);
margin-bottom: 1rem;
}
.mission-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 300;
color: var(--color-gentologie-title);
line-height: 1.1;
margin-bottom: 2rem;
}
.mission-text p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-gentologie-text-secondary);
margin-bottom: 1.5rem;
}
.mission-text p:last-child {
margin-bottom: 0;
}
/* Timeline Section */
.timeline {
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
color: var(--color-gentologie-text-alt);
position: relative;
overflow: hidden;
padding: 2rem 0 2rem 0;
}
.timeline::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
opacity: 0.4;
}
.timeline-header {
text-align: center;
margin-bottom: 6rem;
position: relative;
z-index: 1;
}
.timeline-header h2 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.timeline-header .subtitle {
font-size: 1.25rem;
opacity: 0.8;
font-weight: 300;
color: var(--color-gentologie-text-alt);
}
.timeline-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
z-index: 1;
}
.timeline-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
}
.timeline-item {
background: var(--color-gentologie-background);
backdrop-filter: blur(20px);
padding: 3rem;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.timeline-item:hover {
transform: translateY(-12px);
background: var(--color-gentologie-background-alt);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.timeline-item:hover * {
color: var(--color-gentologie-text-alt) !important;
}
.timeline-item:hover .timeline-year {
color: var(--color-gentologie-accent) !important;
}
.timeline-year {
font-size: 4rem;
font-weight: 100;
color: var(--color-gentologie-green);
margin-bottom: 1rem;
letter-spacing: -0.02em;
transition: color 0.4s ease;
}
.timeline-title {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1.5rem;
color: var(--color-gentologie-title);
transition: color 0.4s ease;
}
.timeline-description {
opacity: 0.9;
line-height: 1.7;
font-size: 1rem;
transition: color 0.4s ease;
color: var(--color-gentologie-text-secondary);
}
/* Values Section */
.values {
background: var(--color-gentologie-background);
position: relative;
overflow: hidden;
padding: 2rem 0 2rem 0;
}
.values::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 80%;
height: 200%;
background: radial-gradient(circle, rgba(0, 77, 40, 0.03) 0%, transparent 70%);
transform: rotate(15deg);
}
.values-header {
margin-bottom: 6rem;
text-align: center;
position: relative;
z-index: 1;
}
.values-header h2 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
color: var(--color-gentologie-title);
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.values-subtitle {
font-size: 1.25rem;
color: var(--color-gentologie-text-secondary);
font-weight: 300;
max-width: 600px;
margin: 0 auto;
}
.values-container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 6rem;
align-items: start;
position: relative;
z-index: 1;
}
.values-intro {
position: sticky;
top: 2rem;
}
.values-intro h3 {
font-size: 2rem;
font-weight: 300;
color: var(--color-gentologie-title);
margin-bottom: 2rem;
}
.values-intro p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-gentologie-text-secondary);
margin-bottom: 3rem;
}
.values-visual {
width: 200px;
height: 200px;
background: linear-gradient(135deg, var(--color-gentologie-accent), var(--color-gentologie-green));
position: relative;
margin: 0 auto;
}
.values-visual::after {
content: 'G';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 4rem;
font-weight: 300;
color: var(--color-gentologie-white);
}
.values-list {
display: flex;
flex-direction: column;
gap: 2rem;
}
.value-item {
background: var(--color-gentologie-green);
padding: 3rem;
border: none;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.value-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(171, 193, 177, 0.1), transparent);
transition: left 0.6s ease;
}
.value-item:hover::before {
left: 100%;
}
.value-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 77, 40, 0.1);
border-color: var(--color-gentologie-accent);
}
.value-header {
display: flex;
align-items: center;
margin-bottom: 2rem;
}
.value-number {
width: 80px;
height: 80px;
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
font-weight: 300;
margin-right: 2rem;
flex-shrink: 0;
}
.value-title {
font-size: 1.75rem;
font-weight: 500;
color: var(--color-gentologie-title-alt);
}
.value-description {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-gentologie-text-alt);
}
/* Products Section */
.about-products {
background: var(--color-gentologie-background-alt);
color: var(--color-gentologie-text-alt);
position: relative;
overflow: hidden;
padding: 2rem 0 2rem 0;
}
.about-products::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, transparent 30%, rgba(171, 193, 177, 0.05) 50%, transparent 70%);
}
.about-products-header {
text-align: center;
margin-bottom: 6rem;
position: relative;
z-index: 1;
}
.about-products-header h2 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.about-products-subtitle {
font-size: 1.25rem;
opacity: 0.8;
font-weight: 300;
max-width: 600px;
margin: 0 auto;
color: var(--color-gentologie-text-alt);
}
.about-products-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
margin-bottom: 6rem;
position: relative;
z-index: 1;
}
.about-products-featured {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
padding: 4rem;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.about-products-featured::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 100%;
height: 200%;
background: radial-gradient(circle, rgba(171, 193, 177, 0.1) 0%, transparent 70%);
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px) rotate(0deg); }
50% { transform: translateY(-20px) rotate(180deg); }
}
.featured-label {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-gentologie-accent);
margin-bottom: 2rem;
}
.featured-title {
font-size: 2.5rem;
font-weight: 300;
margin-bottom: 2rem;
position: relative;
z-index: 1;
}
.featured-description {
font-size: 1.125rem;
line-height: 1.7;
opacity: 0.9;
margin-bottom: 3rem;
position: relative;
z-index: 1;
color: var(--color-gentologie-text-alt)!important;
}
.featured-link {
display: inline-flex;
align-items: center;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-weight: 500;
transition: all 0.4s ease;
position: relative;
z-index: 1;
}
.featured-link:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-2px);
}
.about-products-grid-modern {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
position: relative;
z-index: 1;
}
.about-product-card-modern {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 3rem;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.about-product-card-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--color-gentologie-accent), var(--color-gentologie-yellow));
transform: scaleX(0);
transition: transform 0.4s ease;
}
.about-product-card-modern:hover::before {
transform: scaleX(1);
}
.about-product-card-modern:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.about-product-icon {
width: 60px;
height: 60px;
background: var(--color-gentologie-accent);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2rem;
font-size: 1.5rem;
color: var(--color-gentologie-background-alt);
}
.about-product-title-modern {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1.5rem;
}
.about-product-description-modern {
opacity: 0.9;
line-height: 1.7;
margin-bottom: 2rem;
color: var(--color-gentologie-text-alt);
}
.about-product-link-modern {
color: var(--color-gentologie-accent);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
}
.about-product-link-modern::after {
margin-left: 0.5rem;
transition: transform 0.3s ease;
}
.about-product-link-modern:hover {
color: var(--color-gentologie-white);
}
.about-product-link-modern:hover::after {
transform: translate(4px, -4px);
}
/* Stats Section */
.stats {
background: linear-gradient(135deg, var(--color-gentologie-background) 0%, var(--color-gentologie-white) 100%);
position: relative;
overflow: hidden;
padding: 2rem 0 2rem 0;
}
.stats::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
}
.stats-container {
position: relative;
z-index: 1;
}
.stats-header {
text-align: center;
margin-bottom: 4rem;
}
.stats-header h2 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 200;
color: var(--color-gentologie-title);
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.stats-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 6rem;
align-items: center;
}
.stats-info {
background: var(--color-gentologie-white);
padding: 4rem;
box-shadow: 0 20px 60px rgba(0, 77, 40, 0.08);
border: 1px solid rgba(0, 77, 40, 0.1);
}
.stats-info h3 {
font-size: 2rem;
font-weight: 300;
color: var(--color-gentologie-title);
margin-bottom: 2rem;
}
.stats-info p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-gentologie-text-secondary);
margin-bottom: 2rem;
}
.stats-highlight {
background: linear-gradient(135deg, var(--color-gentologie-green), var(--color-gentologie-accent));
padding: 2rem;
color: var(--color-gentologie-white);
}
.stats-highlight-text {
font-size: 1rem;
font-weight: 500;
text-align: center;
color: var(--color-gentologie-text-alt) !important;
}
.stats-grid-advanced {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.stat-card-advanced {
background: var(--color-gentologie-white);
padding: 3rem;
text-align: center;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 77, 40, 0.1);
}
.stat-card-advanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-gentologie-green), var(--color-gentologie-accent));
}
.stat-card-advanced:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(0, 77, 40, 0.15);
}
.stat-visual {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--color-gentologie-background), var(--color-gentologie-accent));
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.stat-visual::after {
content: '';
position: absolute;
width: 60%;
height: 60%;
background: var(--color-gentologie-green);
}
.stat-number-advanced {
font-size: 3rem;
font-weight: 200;
color: var(--color-gentologie-green);
display: block;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.stat-label-advanced {
font-size: 1rem;
color: var(--color-gentologie-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
/* Contact Section */
.contact {
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
color: var(--color-gentologie-text-alt);
position: relative;
overflow: hidden;
padding: 2rem 0 2rem 0;
}
.contact::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(171, 193, 177, 0.1) 0%, transparent 50%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.contact-container {
position: relative;
z-index: 1;
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
.contact-text h2 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.contact-description {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 300;
color: var(--color-gentologie-text-alt);
}
.contact-cta {
display: inline-flex;
align-items: center;
padding: 1.5rem 3rem;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-weight: 500;
font-size: 1.125rem;
transition: all 0.4s ease;
backdrop-filter: blur(20px);
}
.contact-cta:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.contact-cta::after {
margin-left: 1rem;
font-size: 1.5rem;
transition: transform 0.3s ease;
}
.contact-cta:hover::after {
transform: translate(4px, -4px);
}
.contact-links-advanced {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.contact-link-advanced {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
text-decoration: none;
color: var(--color-gentologie-text-alt);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.contact-link-advanced::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(171, 193, 177, 0.1), transparent);
transition: left 0.6s ease;
}
.contact-link-advanced:hover::before {
left: 100%;
}
.contact-link-advanced:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.contact-link-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.contact-link-subtitle {
font-size: 0.875rem;
opacity: 0.8;
position: relative;
z-index: 1;
}
@media (min-width: 1025px) {
.contact-links-advanced {
grid-template-columns: repeat(3, 1fr);
}
}
/* ============================================
RESPONSIVE DESIGN - CORRIGÉ
============================================ */
/* Tablet Landscape (1025px - 1280px) */
@media (max-width: 1280px) and (min-width: 1025px) {
.hero-content {
gap: 3rem;
}
.mission-grid {
gap: 4rem;
}
.values-container {
gap: 4rem;
}
.about-products-showcase {
gap: 4rem;
}
.stats-layout {
gap: 4rem;
}
.contact-content {
gap: 4rem;
}
}
/* Tablet Portrait & Mobile (≤1024px) */
@media (max-width: 1024px) {
.hero-content {
grid-template-columns: 1fr;
gap: 3rem;
text-align: center;
}
.hero-about-text .description {
max-width: 100%;
}
.mission-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.timeline-grid {
grid-template-columns: 1fr;
}
.values-container {
grid-template-columns: 1fr;
gap: 4rem;
}
.values-intro {
position: static;
text-align: center;
}
/* ← CORRIGÉ: Bon nom de classe */
.about-products-showcase {
grid-template-columns: 1fr;
gap: 4rem;
}
/* ← CORRIGÉ: Bon nom de classe */
.about-products-grid-modern {
grid-template-columns: 1fr;
}
.stats-layout {
grid-template-columns: 1fr;
gap: 4rem;
}
.stats-grid-advanced {
grid-template-columns: repeat(2, 1fr);
}
.contact-content {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.contact-links-advanced {
grid-template-columns: 1fr;
}
}
/* Mobile Small (≤768px) */
@media (max-width: 768px) {
.section {
padding: 4rem 0;
}
.container {
padding: 0 1rem;
}
.hero {
padding: 4rem 0;
}
.hero-about-text h1 {
font-size: clamp(2.5rem, 10vw, 4rem);
line-height: 1;
}
.timeline-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.timeline-item {
padding: 2rem;
}
.timeline-year {
font-size: 3rem;
}
.value-item {
padding: 2rem;
}
.value-header {
flex-direction: column;
text-align: center;
}
.value-number {
margin-right: 0;
margin-bottom: 1rem;
}
.about-products-featured {
padding: 2.5rem;
}
.about-product-card-modern {
padding: 2rem;
}
.stats-info {
padding: 2rem;
}
.stats-grid-advanced {
grid-template-columns: 1fr;
}
.stat-card-advanced {
padding: 2rem;
}
.contact-cta {
padding: 1.25rem 2rem;
font-size: 1rem;
}
} /* Page À propos */
/* ================================
CONTACT PAGE
================================ */
/* Hero Section */
.contact-hero {
width: 100%;
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, var(--color-gentologie-green), var(--color-gentologie-green-dark));
color: var(--color-gentologie-text-alt);
padding: 4rem 2rem;
position: relative;
overflow: hidden;
}
.contact-hero h1 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
margin-bottom: 1.5rem;
line-height: 1;
}
.contact-hero p {
font-size: 1.25rem;
max-width: 800px;
margin: 0 auto;
line-height: 1.7;
opacity: 0.9;
color: var(--color-gentologie-text-alt);
}
/* Contact Info Section */
.contact-info {
width: 100%;
padding: 4rem 2rem;
display: grid;
gap: 2rem;
background: var(--color-gentologie-background);
justify-items: center;
}
.contact-info h2 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 200;
margin-bottom: 1rem;
color: var(--color-gentologie-title);
text-align: center;
}
.contact-info p {
font-size: 1.125rem;
line-height: 1.7;
font-family: var(--font-family-primary);
color: var(--color-gentologie-text-green) !important;
text-align: center;
}
.contact-info .contact-email {
display: inline-block;
padding: 0.5rem 1rem;
background: rgba(255,255,255,0.1);
border: 1px solid var(--color-gentologie-green);
color: var(--color-gentologie-text-green);
font-family: var(--font-family-primary);
text-decoration: none;
font-weight: 500;
transition: all 0.4s ease;
backdrop-filter: blur(20px);
text-align: center;
}
.contact-info .contact-email:hover {
transform: translateY(-4px);
background: rgba(255,255,255,0.2);
box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}
.contact-editor {
width: 100%;
padding: 2rem 2rem; /* moins d'espace global */
display: grid;
gap: 0.5rem; /* espace minimal entre éléments */
background: var(--color-gentologie-green);
justify-items: center;
}
.contact-editor h2 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 200;
margin-bottom: 0.25rem; /* presque collé aux paragraphes */
color: var(--color-gentologie-text-alt);
text-align: center;
}
.contact-editor p {
font-size: 1.125rem;
line-height: 1.3; /* compact mais lisible */
font-family: var(--font-family-primary);
color: var(--color-gentologie-text-alt);
text-align: center;
margin: 0; /* supprime tout margin résiduel */
}
.contact-editor .contact-email {
display: inline-block;
margin-top: 0.25rem; /* tout petit espace au-dessus */
padding: 0.4rem 0.8rem; /* bouton plus petit mais élégant */
background: rgba(255,255,255,0.1);
border: 1px solid var(--color-gentologie-background);
color: var(--color-gentologie-text-alt);
font-family: var(--font-family-primary);
text-decoration: none;
font-weight: 500;
transition: all 0.4s ease;
backdrop-filter: blur(20px);
text-align: center;
}
.contact-editor .contact-email:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.2);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
/* ==========================================
FAQ SECTION PLEINE LARGEUR
========================================== */
.contact-faq {
color: var(--color-gentologie-text-green);
}
.faq-section-fullwidth {
padding: 5rem 0;
background: var(--color-gentologie-background);
width: 100%;
margin: 0;
}
.faq-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.faq-container h2 {
font-size: 2.5rem;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
color: var(--color-gentologie-text-green);
}
.faq-list {
display: flex;
flex-direction: column;
gap: 0;
}
.faq-item {
background: transparent !important;
border: none;
border-bottom: 1px solid #e9ecef;
border-radius: 0 !important;
overflow: visible;
transition: none !important;
margin-bottom: 0;
box-shadow: none !important;
}
.faq-item:last-child {
border-bottom: 1px solid #e9ecef;
}
.faq-item.active {
background: transparent !important;
border-bottom: none;
}
.faq-question {
padding: 1.5rem 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: transparent !important;
transition: none !important;
border-radius: 0 !important;
width: 100%;
border: none;
text-align: left;
outline: none;
}
.faq-question h3 {
font-size: 1.125rem;
font-weight: 600;
margin: 0;
color: var(--color-gentologie-text-green);
flex: 1;
padding-right: 3rem;
line-height: 1.4;
transition: none !important;
}
.faq-toggle {
font-size: 1.5rem;
font-weight: bold;
color: var(--color-gentologie-green);
transition: transform 0.3s ease;
position: relative;
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.faq-item.active .faq-toggle {
transform: rotate(45deg);
}
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background: transparent !important;
padding: 0;
}
.faq-item.active .faq-answer {
max-height: 200px;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--color-gentologie-green-light);
}
.faq-answer p {
padding: 0;
margin: 0;
color: var(--color-gentologie-text-green);
line-height: 1.6;
padding-right: 3rem;
}
.faq-question:focus {
outline: none;
background: transparent !important;
}
.faq-question:focus h3 {
color: #333 !important;
}
/* ==========================================
RESPONSIVE FAQ
========================================== */
@media (max-width: 768px) {
.faq-container {
padding: 0 1rem;
}
.faq-question h3 {
padding-right: 2.5rem;
font-size: 1rem;
}
.faq-toggle {
width: 1.8rem;
height: 1.8rem;
font-size: 1.3rem;
}
.faq-answer p {
padding-right: 2.5rem;
font-size: 0.95rem;
}
.faq-item.active .faq-answer {
padding-bottom: 1.2rem;
}
}
@media (max-width: 480px) {
.faq-container {
padding: 0 0.5rem;
}
.faq-question {
padding: 1.2rem 0;
}
.faq-question h3 {
padding-right: 2.2rem;
font-size: 0.95rem;
}
.faq-toggle {
width: 1.6rem;
height: 1.6rem;
font-size: 1.2rem;
}
.faq-answer p {
padding-right: 2.2rem;
font-size: 0.9rem;
}
.faq-item.active .faq-answer {
padding-bottom: 1.2rem;
}
}
/* RESPONSIVE */
@media (max-width: 768px){
.contact-hero h1 {
font-size: clamp(2rem, 6vw, 3.5rem);
}
.contact-hero p {
font-size: 1rem;
}
.contact-info, .contact-editor {
padding: 3rem 1rem;
}
}
/* Page Contact */
/* ================================
PAGE ÉQUIPE - VERSION COMPLÈTE
================================ */
/* Hero Section */
.team-hero {
width: 100%;
min-height: 80vh;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
background: linear-gradient(135deg, var(--color-gentologie-green), var(--color-gentologie-green-dark));
color: var(--color-gentologie-text-alt);
padding: var(--spacing-xxl) var(--spacing-lg);
position: relative;
overflow: hidden;
}
.team-hero-content {
max-width: var(--content-max-width);
margin: 0 auto;
}
.team-hero h1 {
font-size: clamp(var(--font-size-5xl), 6vw, var(--font-size-6xl));
font-weight: var(--font-weight-light);
margin-bottom: var(--spacing-medium);
line-height: var(--line-height-tight);
}
.team-hero p {
font-size: var(--font-size-lg);
max-width: var(--article-max-width);
margin: 0 auto;
line-height: var(--line-height-relaxed);
opacity: 0.9;
color: var(--color-gentologie-text-alt);
}
/* Container commun */
.team-container {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
/* Équipe permanente */
.permanent-team {
width: 100%;
padding: var(--spacing-xxl) 0;
background: var(--color-gentologie-background);
}
.permanent-team h2 {
font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-6xl));
font-weight: var(--font-weight-light);
margin-bottom: var(--spacing-large);
color: var(--color-gentologie-title);
text-align: center;
}
/* Collaborateurs actuels */
.current-collaborators {
width: 100%;
padding: var(--spacing-xxl) 0;
background: var(--color-gentologie-green);
}
.current-collaborators h2 {
font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-6xl));
font-weight: var(--font-weight-light);
margin-bottom: var(--spacing-lg);
color: var(--color-gentologie-text-alt);
text-align: center;
}
.section-intro {
font-size: var(--font-size-xl);
text-align: center;
margin-bottom: var(--spacing-md);
color: var(--color-gentologie-text-alt);
opacity: 0.9;
}
.collaborators-description {
font-size: var(--font-size-lg);
text-align: center;
margin-bottom: var(--spacing-large);
color: var(--color-gentologie-text-alt);
opacity: 0.8;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Cartes membres d'équipe */
.team-member-card {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: var(--spacing-xl);
margin-bottom: var(--spacing-lg);
transition: all var(--transition-normal);
backdrop-filter: blur(20px);
text-align: center;
}
.team-member-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.15);
box-shadow: var(--shadow-large);
}
.permanent-team .team-member-card {
background: rgba(255, 255, 255, 0.05);
border: 1px solid var(--color-gentologie-green);
max-width: 600px;
margin: 0 auto var(--spacing-lg) auto;
}
.permanent-team .team-member-card:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-8px);
box-shadow: var(--shadow-medium);
}
.member-info h3 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-md);
color: var(--color-gentologie-title);
}
.current-collaborators .member-info h3 {
color: var(--color-gentologie-text-alt);
}
.member-title {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-medium);
color: var(--color-gentologie-text-green);
line-height: var(--line-height-normal);
}
.current-collaborators .member-title {
color: var(--color-gentologie-text-alt);
opacity: 0.9;
}
.member-link {
display: inline-block;
padding: var(--spacing-small) var(--spacing-lg);
background: transparent;
border: 2px solid var(--color-gentologie-green);
color: var(--color-gentologie-green);
text-decoration: none;
font-weight: var(--font-weight-semibold);
transition: all var(--transition-normal);
font-size: var(--font-size-sm);
}
.member-link:hover {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.current-collaborators .member-link {
border-color: var(--color-gentologie-text-alt);
color: var(--color-gentologie-text-alt);
}
.current-collaborators .member-link:hover {
background: var(--color-gentologie-text-alt);
color: var(--color-gentologie-green);
}
/* Grille des collaborateurs */
.collaborators-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--spacing-lg);
margin-top: var(--spacing-large);
}
/* ================================
NOUVELLES SECTIONS
================================ */
/* Collaborateurs ponctuels / occasionnels */
.occasional-collaborators {
width: 100%;
padding: var(--spacing-xxl) 0;
background: var(--color-gentologie-background);
}
.occasional-collaborators h2 {
font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-6xl));
font-weight: var(--font-weight-light);
margin-bottom: var(--spacing-lg);
color: var(--color-gentologie-title);
text-align: center;
}
.occasional-collaborators .section-intro {
color: var(--color-gentologie-text-green);
opacity: 1;
}
.occasional-collaborators .collaborators-description {
color: var(--color-gentologie-text-green);
}
.occasional-collaborators .team-member-card {
background: rgba(255, 255, 255, 0.05);
border: 2px solid var(--color-gentologie-green);
}
.occasional-collaborators .team-member-card:hover {
background: rgba(255, 255, 255, 0.1);
}
.occasional-collaborators .member-info h3 {
color: var(--color-gentologie-title);
}
.occasional-collaborators .member-title {
color: var(--color-gentologie-text-green);
}
/* Section anciens collaborateurs */
.former-collaborators {
width: 100%;
padding: var(--spacing-xxl) 0;
background: var(--color-gentologie-background-box);
}
.former-collaborators h2 {
font-size: clamp(var(--font-size-4xl), 5vw, var(--font-size-6xl));
font-weight: var(--font-weight-light);
margin-bottom: var(--spacing-lg);
color: var(--color-gentologie-title);
text-align: center;
}
.former-collaborators .section-intro {
color: var(--color-gentologie-text-green);
font-size: var(--font-size-lg);
text-align: center;
margin-bottom: var(--spacing-large);
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
/* Accordéon pour anciens collaborateurs */
.accordion-toggle {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
padding: var(--spacing-medium) var(--spacing-large);
border: none;
font-family: var(--font-family-primary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-light);
cursor: pointer;
width: 100%;
max-width: 600px;
margin: 0 auto var(--spacing-lg) auto;
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-md);
transition: all var(--transition-normal);
position: relative;
}
.accordion-toggle:hover {
background: var(--color-gentologie-green-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.accordion-toggle::after {
content: '▼';
font-size: var(--font-size-sm);
transition: transform var(--transition-normal);
}
.accordion-toggle.active::after {
transform: rotate(180deg);
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-slow);
}
.accordion-content.active {
max-height: 5000px;
}
.former-collaborators .team-member-card {
background: rgba(255, 255, 255, 0.8);
border: 1px solid var(--color-gentologie-green-light);
opacity: 0.9;
}
.former-collaborators .team-member-card:hover {
background: rgba(255, 255, 255, 1);
opacity: 1;
}
.former-collaborators .member-info h3 {
color: var(--color-gentologie-title);
}
.former-collaborators .member-title {
color: var(--color-gentologie-text-green);
}
/* Section recrutement */
.recruitment-section {
width: 100%;
padding: var(--spacing-xxl) 0;
background: var(--color-gentologie-background);
}
.recruitment-card {
background: rgba(255, 255, 255, 0.05);
border: 2px solid var(--color-gentologie-green);
padding: var(--spacing-large);
text-align: center;
transition: all var(--transition-normal);
max-width: 700px;
margin: 0 auto;
}
.recruitment-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.1);
box-shadow: var(--shadow-medium);
}
.recruitment-card h3 {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--spacing-md);
color: var(--color-gentologie-title);
}
.recruitment-card p {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-medium);
color: var(--color-gentologie-text-green);
line-height: var(--line-height-relaxed);
}
.info-link {
display: inline-block;
padding: var(--spacing-small) var(--spacing-lg);
background: var(--color-gentologie-green);
border: 2px solid var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-weight: var(--font-weight-semibold);
transition: all var(--transition-normal);
font-size: var(--font-size-sm);
}
.info-link:hover {
background: transparent;
color: var(--color-gentologie-green);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* RESPONSIVE */
@media (max-width: 768px) {
.team-hero h1 {
font-size: clamp(var(--font-size-3xl), 6vw, var(--font-size-5xl));
}
.team-hero p {
font-size: var(--font-size-base);
}
.permanent-team,
.current-collaborators,
.occasional-collaborators,
.former-collaborators,
.recruitment-section {
padding: var(--spacing-large) 0;
}
.team-container {
padding: 0 var(--spacing-md);
}
.collaborators-grid {
grid-template-columns: 1fr;
gap: var(--spacing-medium);
}
.team-member-card {
padding: var(--spacing-lg);
}
.recruitment-card {
padding: var(--spacing-lg);
}
.member-info h3 {
font-size: var(--font-size-2xl);
}
.member-title {
font-size: var(--font-size-base);
}
.accordion-toggle {
padding: var(--spacing-medium) var(--spacing-lg);
font-size: var(--font-size-base);
}
}
@media (max-width: 480px) {
.collaborators-grid {
grid-template-columns: 1fr;
}
.team-member-card {
padding: var(--spacing-medium);
}
.recruitment-card {
padding: var(--spacing-medium);
}
.accordion-toggle {
padding: var(--spacing-md) var(--spacing-medium);
font-size: var(--font-size-sm);
}
} /* Page Équipe */
/* legal-pages.css */
/* ===== PAGES LÉGALES - APPARENCE & LISIBILITÉ ===== */
/* Container principal des pages légales */
.legal-page .page-content,
.page-template-legal .page-content {
max-width: var(--article-max-width);
margin: 0 auto;
padding: var(--spacing-xxl) var(--spacing-large);
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
color: var(--color-gentologie-text);
font-family: var(--font-family-secondary);
}
/* ===== H1 - TITRE PRINCIPAL ===== */
.legal-page .page-content h1,
.page-template-legal .page-content h1 {
font-size: var(--font-size-4xl);
font-family: var(--font-family-primary);
color: var(--color-gentologie-title);
text-align: center;
margin-bottom: var(--spacing-xxl);
padding-bottom: var(--spacing-lg);
border-bottom: 2px solid var(--color-gentologie-accent);
font-weight: var(--font-weight-bold);
max-width: var(--article-max-width);
margin-left: auto;
margin-right: auto;
}
/* ===== H2 - SECTIONS PRINCIPALES ===== */
.legal-page .page-body h2,
.page-template-legal .page-body h2 {
font-size: var(--font-size-2xl);
font-family: var(--font-family-primary);
color: var(--color-gentologie-title);
margin-top: var(--spacing-xxl);
margin-bottom: var(--spacing-lg);
font-weight: var(--font-weight-semibold);
}
/* ===== H3 - SOUS-SECTIONS ===== */
.legal-page .page-body h3,
.page-template-legal .page-body h3 {
font-size: var(--font-size-xl);
font-family: var(--font-family-primary);
color: var(--color-gentologie-title);
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-medium);
font-weight: var(--font-weight-semibold);
}
/* Paragraphes */
.legal-page .page-body p,
.page-template-legal .page-body p {
margin-bottom: var(--spacing-lg);
line-height: var(--line-height-relaxed);
}
/* Listes */
.legal-page .page-body ul,
.page-template-legal .page-body ul {
margin: var(--spacing-xl) 0 var(--spacing-xl) var(--spacing-large);
padding-left: var(--spacing-md);
}
.legal-page .page-body li,
.page-template-legal .page-body li {
margin-bottom: var(--spacing-medium);
line-height: var(--line-height-relaxed);
}
/* Liens - UNIQUEMENT dans le contenu */
.legal-page .page-body a,
.page-template-legal .page-body a {
color: var(--color-gentologie-green);
text-decoration: underline;
transition: color var(--transition-normal);
}
.legal-page .page-body a:hover,
.page-template-legal .page-body a:hover {
color: var(--color-gentologie-green);
}
.legal-page .page-body a:focus,
.page-template-legal .page-body a:focus {
outline: 2px solid var(--color-gentologie-focus);
outline-offset: 2px;
}
/* Texte en gras */
.legal-page .page-body strong,
.page-template-legal .page-body strong {
color: var(--color-gentologie-text);
font-weight: var(--font-weight-bold);
}
/* Date de mise à jour - UNIQUEMENT dans le contenu */
.legal-page .page-body .update-date,
.page-template-legal .page-body .update-date,
.legal-page .page-body p:last-of-type strong,
.page-template-legal .page-body p:last-of-type strong {
margin-top: var(--spacing-xxl);
padding-top: var(--spacing-large);
border-top: 1px solid var(--color-gentologie-accent);
font-style: italic;
color: var(--color-gentologie-text-secondary);
font-size: var(--font-size-base);
}
/* Amélioration des listes à puces */
.legal-page .page-body ul li::marker,
.page-template-legal .page-body ul li::marker {
color: var(--color-gentologie-green);
}
/* Sections avec fond (optionnel pour mettre en évidence certaines sections) */
.legal-page .page-body .wp-block-group.has-background,
.page-template-legal .page-body .wp-block-group.has-background {
background-color: var(--color-gentologie-background-box);
padding: var(--spacing-xl);
border-radius: var(--spacing-sm);
margin: var(--spacing-xl) 0;
}
/* Style de la date de mise à jour - plus discret */
.legal-page .page-body .legal-update-date,
.page-template-legal .page-body .legal-update-date {
display: block;
margin-top: var(--spacing-xxl);
padding-top: var(--spacing-large);
border-top: 1px solid var(--color-gentologie-accent);
font-style: italic;
font-weight: var(--font-weight-normal); /* Pas de gras */
font-size: var(--font-size-sm); /* Plus petit */
color: var(--color-gentologie-text-secondary);
}
/* Responsive - Tablette */
@media (max-width: 1024px) {
.legal-page .page-content,
.page-template-legal .page-content {
padding: var(--spacing-xl) var(--spacing-lg);
}
.legal-page .page-content h1,
.page-template-legal .page-content h1 {
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
}
/* Responsive - Mobile */
@media (max-width: 768px) {
.legal-page .page-content,
.page-template-legal .page-content {
padding: var(--spacing-xl) var(--spacing-medium);
font-size: var(--font-size-base);
}
.legal-page .page-content h1,
.page-template-legal .page-content h1 {
font-size: var(--font-size-3xl);
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-medium);
padding-left: var(--spacing-medium);
padding-right: var(--spacing-medium);
}
.legal-page .page-body h2,
.page-template-legal .page-body h2 {
font-size: var(--font-size-xl);
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-medium);
}
.legal-page .page-body h3,
.page-template-legal .page-body h3 {
font-size: var(--font-size-lg);
margin-top: var(--spacing-lg);
margin-bottom: var(--spacing-small);
}
.legal-page .page-body ul,
.page-template-legal .page-body ul {
margin-left: var(--spacing-lg);
}
}
/* Responsive - Petit mobile */
@media (max-width: 480px) {
.legal-page .page-content,
.page-template-legal .page-content {
padding: var(--spacing-lg) var(--spacing-md);
}
.legal-page .page-content h1,
.page-template-legal .page-content h1 {
font-size: var(--font-size-2xl);
padding-left: var(--spacing-md);
padding-right: var(--spacing-md);
}
.legal-page .page-body h2,
.page-template-legal .page-body h2 {
font-size: var(--font-size-lg);
}
.legal-page .page-body h3,
.page-template-legal .page-body h3 {
font-size: var(--font-size-base);
}
} /* Pages légales (CGV, politique, etc.) */
/* ==========================================
FAQ SECTION PLEINE LARGEUR
========================================== */
.faq-section-fullwidth {
padding: var(--spacing-xxl) 0;
background: var(--color-gentologie-background);
width: 100%;
margin: 0;
}
.faq-section-fullwidth .faq-container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
.faq-section-fullwidth .faq-container h2 {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
text-align: center;
margin-bottom: var(--spacing-large);
color: var(--color-gentologie-text-green);
}
.faq-section-fullwidth .faq-list {
display: flex;
flex-direction: column;
gap: 0;
}
.faq-section-fullwidth .faq-item {
background: transparent !important;
border: none;
border-bottom: 1px solid var(--color-gentologie-background-box);
border-radius: 0 !important;
overflow: visible;
transition: none !important;
margin-bottom: 0;
box-shadow: none !important;
}
.faq-section-fullwidth .faq-item:last-child {
border-bottom: 1px solid var(--color-gentologie-background-box);
}
.faq-section-fullwidth .faq-item:hover {
box-shadow: none !important;
background: transparent !important;
transform: none !important;
border-color: var(--color-gentologie-background-box) !important;
}
.faq-section-fullwidth .faq-item.active {
background: transparent !important;
border-bottom: none;
}
.faq-section-fullwidth .faq-question {
padding: var(--spacing-medium) 0;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
background: transparent !important;
transition: none !important;
border-radius: 0 !important;
width: 100%;
border: none;
text-align: left;
outline: none;
}
.faq-section-fullwidth .faq-question:hover {
background: transparent !important;
color: inherit !important;
transform: none !important;
box-shadow: none !important;
}
.faq-section-fullwidth .faq-question h3 {
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin: 0;
color: var(--color-gentologie-text-green);
flex: 1;
padding-right: var(--spacing-large);
line-height: var(--line-height-normal);
transition: none !important;
}
.faq-section-fullwidth .faq-question:hover h3 {
color: var(--color-gentologie-text) !important;
transform: none !important;
}
.faq-section-fullwidth .faq-toggle {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-green);
transition: transform var(--transition-normal);
position: relative;
flex-shrink: 0;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.faq-section-fullwidth .faq-question:hover .faq-toggle {
color: var(--color-gentologie-green) !important;
background: transparent !important;
transform: none !important;
}
.faq-section-fullwidth .faq-item.active .faq-toggle {
transform: rotate(45deg);
}
.faq-section-fullwidth .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height var(--transition-normal);
background: transparent !important;
padding: 0;
}
.faq-section-fullwidth .faq-item.active .faq-answer {
max-height: 200px;
padding-bottom: var(--spacing-medium);
border-bottom: 1px solid var(--color-gentologie-green-light);
}
.faq-section-fullwidth .faq-answer p {
padding: 0;
margin: 0;
color: var(--color-gentologie-text-green);
line-height: var(--line-height-relaxed);
padding-right: var(--spacing-large);
}
.faq-section-fullwidth .faq-question:focus {
outline: none;
background: transparent !important;
}
.faq-section-fullwidth .faq-question:focus h3 {
color: var(--color-gentologie-text) !important;
}
/* ==========================================
FAQ RESPONSIVE
========================================== */
@media (max-width: var(--breakpoint-sm)) {
.faq-section-fullwidth .faq-container {
padding: 0 var(--spacing-md);
}
.faq-section-fullwidth .faq-container h2 {
font-size: var(--font-size-3xl);
}
.faq-section-fullwidth .faq-question h3 {
padding-right: var(--spacing-lg);
font-size: var(--font-size-base);
}
.faq-section-fullwidth .faq-toggle {
width: 1.8rem;
height: 1.8rem;
font-size: var(--font-size-xl);
}
.faq-section-fullwidth .faq-answer p {
padding-right: var(--spacing-lg);
font-size: var(--font-size-sm);
}
}
@media (max-width: var(--breakpoint-xs)) {
.faq-section-fullwidth {
padding: var(--spacing-large) 0;
}
.faq-section-fullwidth .faq-container {
padding: 0 var(--spacing-sm);
}
.faq-section-fullwidth .faq-container h2 {
font-size: var(--font-size-2xl);
}
.faq-section-fullwidth .faq-question {
padding: var(--spacing-small) 0;
}
.faq-section-fullwidth .faq-question h3 {
padding-right: var(--spacing-medium);
font-size: var(--font-size-sm);
}
.faq-section-fullwidth .faq-toggle {
width: 1.6rem;
height: 1.6rem;
font-size: var(--font-size-lg);
}
.faq-section-fullwidth .faq-answer p {
padding-right: var(--spacing-medium);
font-size: var(--font-size-sm);
}
.faq-section-fullwidth .faq-item.active .faq-answer {
padding-bottom: var(--spacing-small);
}
} /* Page FAQ */
/* === 6. SECTIONS SPÉCIALES === */
/* ==========================================
CLUB GENTOLOGIE - CSS COMPLET
========================================== */
/* Page principale */
.club-gentologie-page {
line-height: var(--line-height-normal);
}
/* ==========================================
HERO SECTION
========================================== */
.hero-section {
background: var(--color-gentologie-background-alt);
padding: var(--spacing-xxl) 0 var(--spacing-xxl);
position: relative;
overflow: hidden;
}
.hero-section .hero-content {
display: flex;
flex-direction: column;
gap: var(--spacing-large);
align-items: flex-start;
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--spacing-lg);
position: relative;
z-index: var(--z-dropdown);
}
.hero-section .hero-text {
max-width: none;
padding: 0;
}
.hero-section .membership-badge {
display: inline-block;
background: transparent;
color: var(--color-gentologie-text-alt);
padding: 0.5em 1em;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
letter-spacing: 0.5px;
text-transform: uppercase;
margin-bottom: var(--spacing-medium);
border: 1px solid var(--color-gentologie-border-alt);
position: relative;
z-index: var(--z-dropdown);
width: auto;
}
.hero-section h1 {
display: block;
width: 100%;
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-text-alt);
margin-bottom: 2rem;
letter-spacing: -0.02em;
line-height: 1.2;
}
.hero-section .subtitle {
font-size: var(--font-size-base) !important;
color: var(--color-gentologie-text-alt);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-lg);
}
/* ========================================
BOUTON PARTENAIRES SUR PAGE CLUB
======================================== */
.partners-button-section {
text-align: center;
margin: var(--spacing-large) 0;
}
.partners-button-section .partners-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
text-decoration: none;
padding: var(--spacing-medium) var(--spacing-large);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
transition: var(--transition-fast);
border: 2px solid var(--color-gentologie-green);
box-shadow: var(--shadow-small);
}
.partners-button-section .partners-button:hover {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
text-decoration: none;
}
/* ==========================================
PRICING SECTION
========================================== */
.pricing-section {
padding: var(--spacing-xxl) 0;
background: var(--color-gentologie-background);
}
.pricing-section .section-header-pricing {
text-align: center;
max-width: 800px;
margin: 0 auto var(--spacing-xxl);
padding: 0 var(--spacing-lg);
}
.pricing-section .section-header-pricing h2 {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-md);
color: var(--color-gentologie-title);
}
.pricing-section .section-header-pricing p {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text);
margin-bottom: var(--spacing-lg);
}
/* ==========================================
PRICING TABLE UNIFIÉ
========================================== */
.pricing-section .pricing-container {
max-width: var(--container-max-width);
margin: 0 auto;
background: var(--color-gentologie-white);
overflow: hidden;
box-shadow: var(--shadow-medium);
}
.pricing-section .pricing-grid {
display: flex;
flex-direction: row;
min-height: 100%;
width: 100%;
}
.pricing-section .pricing-column {
flex: 1;
position: relative;
border-right: 1px solid var(--color-gentologie-background-box);
background-color: var(--color-gentologie-white);
display: flex;
flex-direction: column;
}
.pricing-section .pricing-column:last-child {
border-right: none;
}
/* Plan populaire - style général */
.pricing-section .pricing-column.popular {
transform: scale(1.05);
z-index: var(--z-sticky);
margin: -10px 5px;
}
.pricing-section .popular-badge {
position: absolute;
top: var(--spacing-lg);
right: 0;
line-height: var(--line-height-tight);
color: var(--color-gentologie-green);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
background: var(--color-gentologie-background);
padding: var(--spacing-sm);
animation: none;
}
.pricing-section .pricing-content {
padding: var(--spacing-xl) var(--spacing-large);
height: 100%;
display: flex;
flex-direction: column;
flex: 1;
}
.pricing-section .pricing-column.popular .pricing-content {
padding-top: 50px;
}
.pricing-section .plan-name {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-sm);
text-align: center;
padding-top: var(--spacing-md);
}
.pricing-section .plan-description {
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-large);
line-height: var(--line-height-normal);
text-align: center;
}
.pricing-section .price-section {
margin-bottom: var(--spacing-large);
text-align: center;
}
.pricing-section .price-display {
display: flex;
align-items: baseline;
justify-content: center;
margin-bottom: var(--spacing-sm);
}
.pricing-section .currency {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
margin-right: 2px;
}
.pricing-section .price {
font-size: var(--font-size-6xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
}
.pricing-section .billing {
font-size: var(--font-size-lg);
margin-left: 4px;
}
.pricing-section .billing-info {
font-size: var(--font-size-xs);
text-align: center;
}
.pricing-section .billing-text {
display: block;
margin-bottom: var(--spacing-xs);
color: var(--color-gentologie-text);
}
.pricing-section .annual-savings {
font-size: var(--font-size-xs);
color: var(--color-success);
font-weight: var(--font-weight-semibold);
}
.pricing-section .pricing-column.popular .annual-savings {
color: rgba(255, 255, 255, 0.9);
}
.pricing-section .cta-button {
width: 100%;
padding: var(--spacing-md) var(--spacing-lg);
border: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
cursor: pointer;
transition: all var(--transition-normal);
margin-bottom: var(--spacing-large);
text-transform: none;
text-decoration: none;
display: block;
text-align: center;
}
.pricing-section .cta-button:hover {
transform: translateY(-2px);
text-decoration: none;
}
/* ==========================================
FEATURES SECTION - STYLES DE BASE
========================================== */
.pricing-section .features-section {
margin-top: auto;
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-gentologie-background-box);
}
.pricing-section .features-title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-md);
color: var(--color-gentologie-text-green);
text-align: center;
}
.pricing-section .features-list {
list-style: none;
padding: 0;
margin: 0;
}
.pricing-section .feature-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
padding: var(--spacing-xs) 0;
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-green);
line-height: var(--line-height-normal);
}
.pricing-section .checkmark {
color: var(--color-gentologie-green);
font-weight: var(--font-weight-bold);
flex-shrink: 0;
font-size: var(--font-size-base);
}
/* ==========================================
COULEURS PAR PLAN - VERSION 1.0 ACTUELLE
========================================== */
/* ============================================
DIGITAL / NUMÉRIQUE (1er niveau)
============================================ */
.pricing-section .pricing-column.pricing-digital,
.pricing-section .pricing-column.pricing-numerique {
border-top: 4px solid var(--color-gentologie-member-quartz);
}
.pricing-section .pricing-column.pricing-digital h3,
.pricing-section .pricing-column.pricing-numerique h3 {
color: var(--color-gentologie-member-quartz);
}
.pricing-section .pricing-column.pricing-digital .plan-description,
.pricing-section .pricing-column.pricing-numerique .plan-description {
color: var(--color-gentologie-green);
}
.pricing-section .pricing-column.pricing-digital .price-display,
.pricing-section .pricing-column.pricing-numerique .price-display {
color: var(--color-gentologie-member-quartz);
}
.pricing-section .pricing-column.pricing-digital .billing-text,
.pricing-section .pricing-column.pricing-numerique .billing-text {
color: var(--color-gentologie-green);
}
.pricing-section .pricing-column.pricing-digital .cta-button,
.pricing-section .pricing-column.pricing-numerique .cta-button {
background: var(--color-gentologie-member-quartz);
color: var(--color-gentologie-text-alt);
}
.pricing-section .pricing-column.pricing-digital .cta-button:hover,
.pricing-section .pricing-column.pricing-numerique .cta-button:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-member-quartz);
}
/* Features Digital */
.pricing-section .pricing-column.pricing-digital .features-title,
.pricing-section .pricing-column.pricing-numerique .features-title {
color: var(--color-gentologie-member-quartz);
}
.pricing-section .pricing-column.pricing-digital .feature-item,
.pricing-section .pricing-column.pricing-numerique .feature-item {
color: var(--color-gentologie-member-quartz);
}
.pricing-section .pricing-column.pricing-digital .checkmark,
.pricing-section .pricing-column.pricing-numerique .checkmark {
color: var(--color-gentologie-member-quartz);
}
/* ============================================
PRINT / IMPRIMÉ (2e niveau - POPULAIRE)
============================================ */
.pricing-section .pricing-column.pricing-print,
.pricing-section .pricing-column.pricing-imprime {
border-top: 4px solid var(--color-gentologie-member-sphene);
}
.pricing-section .pricing-column.pricing-print h3,
.pricing-section .pricing-column.pricing-imprime h3 {
color: var(--color-gentologie-member-sphene);
}
.pricing-section .pricing-column.pricing-print .plan-description,
.pricing-section .pricing-column.pricing-imprime .plan-description {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-print .price-display,
.pricing-section .pricing-column.pricing-imprime .price-display {
color: var(--color-gentologie-member-sphene);
}
.pricing-section .pricing-column.pricing-print .billing-text,
.pricing-section .pricing-column.pricing-imprime .billing-text {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-print .cta-button,
.pricing-section .pricing-column.pricing-imprime .cta-button {
background: var(--color-gentologie-member-sphene);
color: var(--color-gentologie-text-alt);
border: 2px solid var(--color-gentologie-border-alt);
}
.pricing-section .pricing-column.pricing-print .cta-button:hover,
.pricing-section .pricing-column.pricing-imprime .cta-button:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-member-sphene);
}
/* Features Print */
.pricing-section .pricing-column.pricing-print .features-title,
.pricing-section .pricing-column.pricing-imprime .features-title {
color: var(--color-gentologie-member-sphene);
}
.pricing-section .pricing-column.pricing-print .feature-item,
.pricing-section .pricing-column.pricing-imprime .feature-item {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-print .checkmark,
.pricing-section .pricing-column.pricing-imprime .checkmark {
color: var(--color-gentologie-member-sphene);
}
/* Print/Imprimé POPULAIRE - fond coloré complet */
.pricing-section .pricing-column.pricing-print.popular,
.pricing-section .pricing-column.pricing-imprime.popular {
background: var(--color-gentologie-member-sphene);
color: var(--color-gentologie-text-alt) !important;
}
.pricing-section .pricing-column.pricing-print.popular h3,
.pricing-section .pricing-column.pricing-imprime.popular h3 {
color: var(--color-gentologie-text-alt) !important;
}
.pricing-section .pricing-column.pricing-print.popular .plan-description,
.pricing-section .pricing-column.pricing-imprime.popular .plan-description {
color: var(--color-gentologie-text-alt) !important;
}
.pricing-section .pricing-column.pricing-print.popular .price-display,
.pricing-section .pricing-column.pricing-imprime.popular .price-display {
color: var(--color-gentologie-text-alt) !important;
}
.pricing-section .pricing-column.pricing-print.popular .billing-text,
.pricing-section .pricing-column.pricing-imprime.popular .billing-text {
color: var(--color-gentologie-text-alt) !important;
}
.pricing-section .pricing-column.pricing-print.popular .cta-button,
.pricing-section .pricing-column.pricing-imprime.popular .cta-button {
background: var(--color-gentologie-member-sphene) !important;
color: var(--color-gentologie-text-alt);
border: 2px solid var(--color-gentologie-border-alt);
}
.pricing-section .pricing-column.pricing-print.popular .cta-button:hover,
.pricing-section .pricing-column.pricing-imprime.popular .cta-button:hover {
background: var(--color-gentologie-background) !important;
color: var(--color-gentologie-member-sphene);
}
/* Features Print Populaire */
.pricing-section .pricing-column.pricing-print.popular .features-title,
.pricing-section .pricing-column.pricing-imprime.popular .features-title {
color: var(--color-gentologie-text-alt);
}
.pricing-section .pricing-column.pricing-print.popular .feature-item,
.pricing-section .pricing-column.pricing-imprime.popular .feature-item {
color: var(--color-gentologie-text-alt);
}
.pricing-section .pricing-column.pricing-print.popular .checkmark,
.pricing-section .pricing-column.pricing-imprime.popular .checkmark {
color: var(--color-gentologie-text-alt);
}
/* ============================================
ÉLITE (3e niveau)
============================================ */
.pricing-section .pricing-column.pricing-elite {
border-top: 4px solid var(--color-gentologie-member-jade);
}
.pricing-section .pricing-column.pricing-elite h3 {
color: var(--color-gentologie-member-jade);
}
.pricing-section .pricing-column.pricing-elite .plan-description {
color: var(--color-gentologie-green);
}
.pricing-section .pricing-column.pricing-elite .price-display {
color: var(--color-gentologie-member-jade);
}
.pricing-section .pricing-column.pricing-elite .billing-text {
color: var(--color-gentologie-green);
}
.pricing-section .pricing-column.pricing-elite .cta-button {
background: var(--color-gentologie-member-jade);
color: var(--color-gentologie-text-alt);
}
.pricing-section .pricing-column.pricing-elite .cta-button:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-member-jade);
}
/* Features Elite */
.pricing-section .pricing-column.pricing-elite .features-title {
color: var(--color-gentologie-member-jade);
}
.pricing-section .pricing-column.pricing-elite .feature-item {
color: var(--color-gentologie-member-jade);
}
.pricing-section .pricing-column.pricing-elite .checkmark {
color: var(--color-gentologie-member-jade);
}
/* ==========================================
VERSION 1.5 - NIVEAUX FUTURS
========================================== */
/* ============================================
QUARTZ (Futur niveau 1)
============================================ */
.pricing-section .pricing-column.pricing-quartz {
border-top: 4px solid var(--color-gentologie-member-quartz);
}
.pricing-section .pricing-column.pricing-quartz h3 {
color: var(--color-gentologie-member-quartz);
}
.pricing-section .pricing-column.pricing-quartz .plan-description {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-quartz .price-display {
color: var(--color-gentologie-member-quartz);
}
.pricing-section .pricing-column.pricing-quartz .billing-text {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-quartz .cta-button {
background: var(--color-gentologie-member-quartz);
color: var(--color-gentologie-text-alt);
}
.pricing-section .pricing-column.pricing-quartz .cta-button:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-member-quartz);
}
/* Features Quartz */
.pricing-section .pricing-column.pricing-quartz .features-title {
color: var(--color-gentologie-member-quartz);
}
.pricing-section .pricing-column.pricing-quartz .feature-item {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-quartz .checkmark {
color: var(--color-gentologie-member-quartz);
}
/* ============================================
SPHÈNE (Futur niveau 2)
============================================ */
.pricing-section .pricing-column.pricing-sphene {
border-top: 4px solid var(--color-gentologie-member-sphene);
}
.pricing-section .pricing-column.pricing-sphene h3 {
color: var(--color-gentologie-member-sphene);
}
.pricing-section .pricing-column.pricing-sphene .plan-description {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-sphene .price-display {
color: var(--color-gentologie-member-sphene);
}
.pricing-section .pricing-column.pricing-sphene .billing-text {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-sphene .cta-button {
background: var(--color-gentologie-member-sphene);
color: var(--color-gentologie-text-alt);
}
.pricing-section .pricing-column.pricing-sphene .cta-button:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-member-sphene);
}
/* Features Sphène */
.pricing-section .pricing-column.pricing-sphene .features-title {
color: var(--color-gentologie-member-sphene);
}
.pricing-section .pricing-column.pricing-sphene .feature-item {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-sphene .checkmark {
color: var(--color-gentologie-member-sphene);
}
/* ============================================
JADE (Futur niveau 3)
============================================ */
.pricing-section .pricing-column.pricing-jade {
border-top: 4px solid var(--color-gentologie-member-jade);
}
.pricing-section .pricing-column.pricing-jade h3 {
color: var(--color-gentologie-member-jade);
}
.pricing-section .pricing-column.pricing-jade .plan-description {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-jade .price-display {
color: var(--color-gentologie-member-jade);
}
.pricing-section .pricing-column.pricing-jade .billing-text {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-jade .cta-button {
background: var(--color-gentologie-member-jade);
color: var(--color-gentologie-text-alt);
}
.pricing-section .pricing-column.pricing-jade .cta-button:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-member-jade);
}
/* Features Jade */
.pricing-section .pricing-column.pricing-jade .features-title {
color: var(--color-gentologie-member-jade);
}
.pricing-section .pricing-column.pricing-jade .feature-item {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-jade .checkmark {
color: var(--color-gentologie-member-jade);
}
/* ============================================
ÉMERAUDE (Futur niveau 4)
============================================ */
.pricing-section .pricing-column.pricing-emerald {
border-top: 4px solid var(--color-gentologie-member-emerald);
}
.pricing-section .pricing-column.pricing-emerald h3 {
color: var(--color-gentologie-member-emerald);
}
.pricing-section .pricing-column.pricing-emerald .plan-description {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-emerald .price-display {
color: var(--color-gentologie-member-emerald);
}
.pricing-section .pricing-column.pricing-emerald .billing-text {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-emerald .cta-button {
background: var(--color-gentologie-member-emerald);
color: var(--color-gentologie-text-alt);
}
.pricing-section .pricing-column.pricing-emerald .cta-button:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-member-emerald);
}
/* Features Émeraude */
.pricing-section .pricing-column.pricing-emerald .features-title {
color: var(--color-gentologie-member-emerald);
}
.pricing-section .pricing-column.pricing-emerald .feature-item {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-emerald .checkmark {
color: var(--color-gentologie-member-emerald);
}
/* ============================================
GRANDIDIÉRITE (Futur niveau 5)
============================================ */
.pricing-section .pricing-column.pricing-grandidierite {
border-top: 4px solid var(--color-gentologie-member-grandidierite);
}
.pricing-section .pricing-column.pricing-grandidierite h3 {
color: var(--color-gentologie-member-grandidierite);
}
.pricing-section .pricing-column.pricing-grandidierite .plan-description {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-grandidierite .price-display {
color: var(--color-gentologie-member-grandidierite);
}
.pricing-section .pricing-column.pricing-grandidierite .billing-text {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-grandidierite .cta-button {
background: var(--color-gentologie-member-grandidierite);
color: var(--color-gentologie-text-alt);
}
.pricing-section .pricing-column.pricing-grandidierite .cta-button:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-member-grandidierite);
}
/* Features Grandidiérite */
.pricing-section .pricing-column.pricing-grandidierite .features-title {
color: var(--color-gentologie-member-grandidierite);
}
.pricing-section .pricing-column.pricing-grandidierite .feature-item {
color: var(--color-gentologie-text);
}
.pricing-section .pricing-column.pricing-grandidierite .checkmark {
color: var(--color-gentologie-member-grandidierite);
}
/* ==========================================
FINAL CTA SECTION
========================================== */
.final-cta-section {
padding: var(--spacing-xxl) 0;
background: var(--color-gentologie-background-alt);
color: var(--color-gentologie-text-alt);
text-align: center;
}
.final-cta-section h2 {
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-md);
color: var(--color-gentologie-title-alt);
}
.final-cta-section p {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text-alt);
margin-bottom: var(--spacing-lg);
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.final-cta-section .final-cta-buttons-club {
display: flex;
gap: var(--spacing-md);
justify-content: center;
flex-wrap: wrap;
}
.final-cta-section .cta-button {
display: inline-block;
padding: var(--spacing-md) var(--spacing-lg);
text-decoration: none;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
transition: all var(--transition-normal);
border: 2px solid transparent;
width: auto;
}
.final-cta-section .cta-button.secondary {
background: transparent;
color: var(--color-gentologie-text-alt);
border-color: var(--color-gentologie-border-alt);
}
.final-cta-section .cta-button.secondary:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-text-green);
}
.final-cta-section .cta-button:not(.secondary) {
background: var(--color-gentologie-member-jade);
color: var(--color-gentologie-text-alt);
border: 1px solid var(--color-gentologie-border-alt);
}
.final-cta-section .cta-button:not(.secondary):hover {
background: var(--color-gentologie-member-emerald);
transform: translateY(-2px);
}
/* ========================================
BOUTON CADEAU SUR PAGE CLUB
======================================== */
.gift-button-section {
text-align: center;
margin: var(--spacing-large) 0;
}
.gift-button-section .gift-button {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
background: var(--color-gentologie-green);
color: var(--color-gentologie-white);
text-decoration: none;
padding: var(--spacing-medium) var(--spacing-large);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
transition: var(--transition-fast);
border: 2px solid var(--color-gentologie-green);
box-shadow: var(--shadow-small);
}
.gift-button-section .gift-button:hover {
background: var(--color-gentologie-white);
color: var(--color-gentologie-green);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
text-decoration: none;
}
.gift-button-section .gift-button i {
font-size: var(--font-size-lg);
}
/* ==========================================
RESPONSIVE
========================================== */
@media (max-width: var(--breakpoint-lg)) {
.pricing-section .pricing-grid {
flex-direction: column;
}
.pricing-section .pricing-column {
margin-bottom: var(--spacing-lg);
}
}
@media (max-width: var(--breakpoint-md)) {
.hero-section {
padding: var(--spacing-xl) 0;
}
.hero-section h1 {
font-size: clamp(2.5rem, 8vw, 4rem);
}
.final-cta-section h2 {
font-size: 2.5rem;
}
}
@media (max-width: var(--breakpoint-sm)) {
.hero-section .hero-content {
padding: 0 var(--spacing-md);
gap: var(--spacing-md);
}
.final-cta-section .final-cta-buttons-club {
flex-direction: column;
gap: var(--spacing-md);
}
} /* Page Club Gentologie */
/**
* Partners Page Styles - Gentologie Edition
* Cartes avec image de fond et modal
* Utilise les variables Gentologie existantes
*/
/* ========================================
HERO SECTION
======================================== */
.partners-hero {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
padding: calc(var(--spacing-xxl) * 2) var(--spacing-medium);
text-align: center;
}
.partners-hero .container {
max-width: var(--content-max-width);
margin: 0 auto;
}
.partners-hero h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: var(--font-weight-light);
margin: 0 0 var(--spacing-medium);
color: var(--color-gentologie-text-alt);
line-height: var(--line-height-tight);
font-family: var(--font-family-primary);
}
.partners-hero .subtitle {
font-size: clamp(1rem, 2vw, var(--font-size-xl));
color: var(--color-gentologie-text-alt);
max-width: 600px;
margin: 0 auto;
font-weight: var(--font-weight-normal);
line-height: var(--line-height-relaxed);
opacity: 0.95;
font-family: var(--font-family-secondary);
}
/* ========================================
FILTRES
======================================== */
.partners-filters {
background: var(--color-gentologie-green);
padding: var(--spacing-xl) var(--spacing-medium);
border-bottom: 2px solid var(--color-gentologie-accent);
position: sticky;
top: 0;
z-index: 90;
backdrop-filter: blur(10px);
}
.partners-filters .container {
max-width: var(--content-max-width);
margin: 0 auto;
}
.filter-tags {
display: flex;
gap: var(--spacing-small);
flex-wrap: wrap;
justify-content: center;
}
.filter-tag {
padding: var(--spacing-sm) var(--spacing-medium);
background: var(--color-gentologie-white);
border-radius: 50px;
border: 2px solid var(--color-gentologie-text-alt);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-gentologie-text-green);
cursor: pointer;
transition: all var(--transition-normal);
white-space: nowrap;
font-family: var(--font-family-secondary);
}
.filter-tag:hover {
border-color: var(--color-gentologie-green);
background: var(--color-gentologie-green-light);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.filter-tag.active {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-button);
border-color: var(--color-gentologie-text-alt);
box-shadow: var(--shadow-medium);
}
/* ========================================
GRILLE DE PARTENAIRES
======================================== */
.partners-grid {
padding: calc(var(--spacing-xxl) * 1.5) var(--spacing-medium) var(--spacing-xxl);
background: var(--color-gentologie-background);
}
.partners-grid .container {
max-width: var(--content-max-width);
margin: 0 auto;
}
.partners-grid .grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--spacing-medium);
}
/* ========================================
CARTE PARTENAIRE
======================================== */
.partner-card {
transition: transform var(--transition-normal);
animation: fadeInUp var(--transition-slow) ease-out backwards;
}
.partner-card-inner {
position: relative;
height: 360px;
overflow: hidden;
background-size: cover;
background-position: center;
cursor: pointer;
box-shadow: var(--shadow-medium);
transition: all var(--transition-normal);
}
.partner-card:hover .partner-card-inner {
transform: translateY(-4px);
box-shadow: var(--shadow-large);
}
.partner-card-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0.3) 50%,
rgba(0, 0, 0, 0.7) 100%);
z-index: 1;
}
.partner-card-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: var(--spacing-medium);
color: var(--color-gentologie-text-alt);
z-index: 2;
cursor: pointer;
}
.partner-name {
font-family: var(--font-family-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--spacing-xs);
color: var(--color-gentologie-title-alt);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.member-badge-card {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-small);
color: var(--color-gentologie-green);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
font-family: var(--font-family-secondary);
}
.partner-view-btn {
position: absolute;
bottom: var(--spacing-medium);
right: var(--spacing-medium);
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--color-gentologie-white);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-normal);
z-index: 3;
box-shadow: var(--shadow-medium);
}
.partner-view-btn:hover {
transform: scale(1.1) rotate(90deg);
box-shadow: var(--shadow-large);
}
.plus-icon {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-light);
color: var(--color-gentologie-green);
line-height: 1;
}
/* ========================================
MODAL
======================================== */
.partner-modal {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-modal);
}
.partner-modal.active {
display: flex;
align-items: center;
justify-content: center;
}
.partner-modal-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
animation: fadeIn var(--transition-normal);
}
.partner-modal-content {
position: relative;
background: var(--color-gentologie-background);
width: 90%;
max-width: 600px;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s ease;
z-index: 1;
border: 3px solid var(--color-gentologie-accent);
}
.partner-modal-close {
position: absolute;
top: var(--spacing-medium);
right: var(--spacing-medium);
width: 40px;
height: 40px;
border: none;
background: var(--color-gentologie-white);
border-radius: 50%;
font-size: var(--font-size-2xl);
color: var(--color-gentologie-green);
cursor: pointer;
transition: all var(--transition-fast);
z-index: 10;
font-weight: var(--font-weight-light);
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--shadow-small);
}
.partner-modal-close:hover {
transform: scale(1.1) rotate(90deg);
}
.partner-modal-inner {
padding: var(--spacing-xxl);
}
/* Modal Header */
.modal-header {
margin-bottom: var(--spacing-xl);
padding-bottom: var(--spacing-medium);
border-bottom: 2px solid var(--color-gentologie-accent);
}
.modal-logo {
width: 80px;
height: 80px;
object-fit: contain;
margin-bottom: var(--spacing-md);
}
.modal-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--spacing-sm);
color: var(--color-gentologie-title);
}
.modal-title-description {
font-family: var(--font-family-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-gentologie-text);
margin: 0;
}
/* Modal Body */
.modal-body {
margin-bottom: var(--spacing-xl);
}
/* Override base.css pour le h3 */
.modal-body h3.modal-offer-title,
h3.modal-offer-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--spacing-sm);
color: var(--color-gentologie-green);
}
.modal-offer-subtitle {
font-family: var(--font-family-secondary);
font-size: var(--font-size-lg);
line-height: var(--line-height-normal);
color: var(--color-gentologie-text-secondary);
margin-bottom: var(--spacing-md);
}
.modal-offer-desc-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--spacing-sm);
color: var(--color-gentologie-green);
}
.modal-offer-desc-subtitle {
font-family: var(--font-family-secondary);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-gentologie-text);
margin: 0;
}
/* Modal Footer */
.modal-footer {
padding-top: var(--spacing-medium);
border-top: 2px solid var(--color-gentologie-accent);
text-align: center;
display: flex;
flex-direction: column;
gap: var(--spacing-md);
}
.modal-btn-website {
display: inline-block;
padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-button);
border-radius: 8px;
text-decoration: none;
font-family: var(--font-family-secondary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
transition: all var(--transition-fast);
border: 2px solid var(--color-gentologie-green);
}
.modal-btn-website:hover {
background: var(--color-gentologie-green-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.modal-link-conditions {
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
text-decoration: underline;
transition: color var(--transition-fast);
font-family: var(--font-family-secondary);
}
.modal-link-conditions:hover {
color: var(--color-gentologie-green);
}
/* ========================================
CTA SECTION
======================================== */
.final-cta-section {
background: var(--color-gentologie-green);
padding: calc(var(--spacing-xxl) * 2) var(--spacing-medium);
text-align: center;
color: var(--color-gentologie-text-alt);
}
.final-cta-section .container {
max-width: var(--content-max-width);
margin: 0 auto;
}
.final-cta-section h2 {
font-family: var(--font-family-primary);
font-size: clamp(2rem, 4vw, 3rem);
font-weight: var(--font-weight-bold);
margin: 0 0 var(--spacing-medium);
color: var(--color-gentologie-title-alt);
line-height: var(--line-height-tight);
}
.final-cta-section p {
font-family: var(--font-family-secondary);
font-size: clamp(1rem, 2vw, var(--font-size-lg));
color: var(--color-gentologie-text-alt);
max-width: 700px;
margin: 0 auto var(--spacing-xl);
line-height: var(--line-height-relaxed);
opacity: 0.95;
}
.final-cta-buttons-club {
display: flex;
gap: var(--spacing-medium);
justify-content: center;
flex-wrap: wrap;
}
.final-cta-buttons-club .cta-button {
display: inline-block;
padding: var(--spacing-md) var(--spacing-xl);
background: var(--color-gentologie-white);
color: var(--color-gentologie-green);
border-radius: 8px;
text-decoration: none;
font-family: var(--font-family-secondary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
transition: all var(--transition-normal);
border: 2px solid var(--color-gentologie-white);
min-width: 200px;
}
.final-cta-buttons-club .cta-button:hover {
background: var(--color-gentologie-green-dark);
color: var(--color-gentologie-white);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.final-cta-buttons-club .cta-button.secondary {
background: transparent;
color: var(--color-gentologie-white);
border-color: var(--color-gentologie-white);
}
.final-cta-buttons-club .cta-button.secondary:hover {
background: var(--color-gentologie-white);
color: var(--color-gentologie-green);
}
/* ========================================
ANIMATIONS
======================================== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Stagger animation */
.partner-card:nth-child(1) { animation-delay: 0s; }
.partner-card:nth-child(2) { animation-delay: 0.05s; }
.partner-card:nth-child(3) { animation-delay: 0.1s; }
.partner-card:nth-child(4) { animation-delay: 0.15s; }
.partner-card:nth-child(5) { animation-delay: 0.2s; }
.partner-card:nth-child(6) { animation-delay: 0.25s; }
/* ========================================
RESPONSIVE
======================================== */
@media (max-width: 768px) {
.partners-hero {
padding: calc(var(--spacing-xxl) * 1.5) var(--spacing-medium) var(--spacing-xl);
}
.partners-hero h1 {
font-size: var(--font-size-4xl);
}
.partners-hero .subtitle {
font-size: var(--font-size-base);
}
.partners-filters {
padding: var(--spacing-medium);
}
.filter-tags {
justify-content: flex-start;
overflow-x: auto;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
padding-bottom: var(--spacing-xs);
}
.filter-tag {
flex-shrink: 0;
}
.partners-grid {
padding: var(--spacing-xl) var(--spacing-medium) calc(var(--spacing-xxl) * 1.5);
}
.partners-grid .grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-medium);
}
.partner-card-inner {
height: 300px;
}
.partner-modal-inner {
padding: var(--spacing-xl) var(--spacing-medium);
}
.modal-title {
font-size: var(--font-size-2xl);
}
.final-cta-section {
padding: calc(var(--spacing-xxl) * 1.5) var(--spacing-medium);
}
.final-cta-buttons-club {
flex-direction: column;
align-items: center;
}
.final-cta-buttons-club .cta-button {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 480px) {
.partners-hero h1 {
font-size: var(--font-size-3xl);
}
.partners-grid .grid {
grid-template-columns: 1fr;
}
.partner-card-inner {
height: 320px;
}
.partner-view-btn {
width: 40px;
height: 40px;
top: var(--spacing-md);
right: var(--spacing-md);
}
.plus-icon {
font-size: var(--font-size-2xl);
}
}
/* ========================================
ACCESSIBILITÉ
======================================== */
.filter-tag:focus,
.partner-view-btn:focus,
.partner-modal-close:focus,
.modal-btn-website:focus,
.final-cta-buttons-club .cta-button:focus {
outline: 3px solid var(--color-gentologie-focus);
outline-offset: 2px;
}
.partner-card-inner:focus {
outline: 3px solid var(--color-gentologie-focus);
outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
.partner-card,
.partner-card-inner,
.filter-tag,
.partner-view-btn {
animation: none;
transition: none;
}
}
/* ========================================
PRINT
======================================== */
@media print {
.partners-filters,
.partner-view-btn,
.partner-modal,
.final-cta-section {
display: none !important;
}
.partner-card-inner {
page-break-inside: avoid;
}
}
/* Smooth scroll */
html {
scroll-behavior: smooth;
} /* Page Partenaires */
/* ===========================================
GUIDE-CADEAUX PAGE - VERSION ISOLÉE
=========================================== */
.gift-guide-page {
min-height: 100vh;
background-color: var(--color-gentologie-background);
}
/* ===========================================
HERO SECTIONS
=========================================== */
.gift-guide-hero-main,
.gift-guide-hero-vs,
.gift-guide-hero-style,
.gift-guide-big-article {
position: relative;
width: 80%;
margin: 0 auto var(--spacing-xxl);
overflow: hidden;
}
.gift-guide-hero-main {
width: 100%;
}
/* Background avec image */
.gift-guide-hero-background {
position: relative;
width: 100%;
overflow: hidden;
}
.gift-guide-hero-background img {
width: 100%;
height: auto;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
/* Dégradé sur l'image */
.gift-guide-hero-gradient {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.85) 0%,
rgba(0, 0, 0, 0.6) 50%,
rgba(0, 0, 0, 0.3) 75%,
transparent 100%
);
pointer-events: none;
}
/* Contenu positionné sur l'image */
.gift-guide-hero-content {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
width: 50%;
max-width: 600px;
padding: var(--spacing-xxl);
display: flex;
flex-direction: column;
gap: var(--spacing-md);
color: var(--color-gentologie-text-alt);
}
/* Catégorie */
.gift-guide-hero-category {
display: block;
font-weight: 600;
text-transform: uppercase;
font-size: var(--font-size-sm);
color: rgba(255, 255, 255, 0.9);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
margin: 0;
}
/* Titre */
.gift-guide-hero-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
color: var(--color-gentologie-text-alt);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
margin: 0;
}
/* Sous-titre */
.gift-guide-hero-subtitle {
font-size: var(--font-size-lg);
color: rgba(255, 255, 255, 0.95);
line-height: var(--line-height-normal);
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
margin: 0;
}
/* ===========================================
GRILLES D'ARTICLES
=========================================== */
.gift-guide-section-vs,
.gift-guide-section-style,
.gift-guide-more-guides,
.gift-guide-editor-choice,
.gift-guide-featured-products,
.gift-guide-all-guides {
margin-bottom: var(--spacing-xxl);
}
.gift-guide-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
width: 80%;
margin: 0 auto var(--spacing-xxl);
}
.gift-guide-article {
display: flex;
flex-direction: column;
}
/* Images des articles */
.gift-guide-image {
width: 100%;
height: 250px;
overflow: hidden;
margin-bottom: var(--spacing-sm);
}
.gift-guide-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.5s ease;
}
.gift-guide-image:hover img {
transform: scale(1.1);
}
/* Infos article */
.gift-guide-info {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
}
.gift-guide-category {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-text);
text-transform: uppercase;
}
.gift-guide-title,
.gift-guide-title a {
font-size: var(--font-size-base);
text-decoration: none;
color: var(--color-gentologie-text);
transition: color 0.3s ease;
margin: 0;
}
.gift-guide-title a:hover {
color: var(--color-gentologie-green);
}
/* ===========================================
TITRES DE SECTIONS
=========================================== */
.gift-guide-section-header {
width: 80%;
margin: 0 auto var(--spacing-xl);
}
.gift-guide-section-header h2 {
font-size: var(--font-size-3xl);
font-weight: 300;
color: var(--color-gentologie-title);
letter-spacing: -0.02em;
margin: 0;
}
/* ===========================================
PUBLICITÉ
=========================================== */
.gift-guide-ad {
width: 80%;
margin: var(--spacing-xxl) auto;
text-align: center;
}
.gift-guide-ad img {
width: 100%;
height: auto;
border-radius: var(--radius-medium);
}
/* ===========================================
PRODUITS
=========================================== */
.gift-guide-product-row {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
width: 80%;
margin: 0 auto var(--spacing-xxl);
}
.gift-guide-product-item {
display: flex;
flex-direction: column;
}
.gift-guide-product-item a {
text-decoration: none;
color: inherit;
transition: opacity 0.3s ease;
}
.gift-guide-product-item a:hover {
opacity: 0.8;
}
.gift-guide-product-item img {
width: 100%;
height: auto;
display: block;
border: 2px solid var(--color-gentologie-text);
margin-bottom: var(--spacing-sm);
transition: border-color 0.3s ease;
}
.gift-guide-product-item a:hover img {
border-color: var(--color-gentologie-green);
}
.gift-guide-product-name {
font-size: var(--font-size-base);
color: var(--color-gentologie-text);
text-align: center;
}
/* ===========================================
BOUTON LOAD MORE
=========================================== */
.gift-guide-view-more {
width: 80%;
margin: 0 auto var(--spacing-xxl);
text-align: center;
}
.gift-guide-btn-load-more {
display: inline-block;
padding: var(--spacing-md) var(--spacing-xl);
font-size: var(--font-size-base);
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
border: 2px solid transparent;
border-radius: var(--radius-medium);
text-decoration: none;
cursor: pointer;
transition: all 0.3s ease;
}
.gift-guide-btn-load-more:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
border-color: var(--color-gentologie-green);
transform: translateY(-2px);
}
.gift-guide-btn-load-more:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 1200px) {
.gift-guide-grid,
.gift-guide-product-row {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 1024px) {
.gift-guide-grid,
.gift-guide-product-row {
grid-template-columns: repeat(2, 1fr);
}
.gift-guide-hero-content {
width: 60%;
padding: var(--spacing-xl);
}
.gift-guide-hero-title {
font-size: var(--font-size-3xl);
}
}
@media (max-width: 768px) {
.gift-guide-hero-main,
.gift-guide-hero-vs,
.gift-guide-big-article,
.gift-guide-grid,
.gift-guide-section-header,
.gift-guide-ad,
.gift-guide-product-row,
.gift-guide-view-more {
width: 95%;
}
.gift-guide-grid,
.gift-guide-product-row {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.gift-guide-hero-content {
width: 80%;
padding: var(--spacing-lg);
}
.gift-guide-hero-title {
font-size: var(--font-size-2xl);
}
.gift-guide-section-header h2 {
font-size: var(--font-size-2xl);
}
}
@media (max-width: 480px) {
.gift-guide-hero-content {
width: 90%;
padding: var(--spacing-md);
}
.gift-guide-hero-title {
font-size: var(--font-size-xl);
}
} /* Guides cadeaux */
/* espace-presse.css - Styles uniques pour l’Espace Presse */
.press-hero-section a,
.press-section a,
.press-events-section a,
.press-contact-section a {
text-decoration: none !important;
color: inherit; /* conserve la couleur du parent */
}
/* Hero Section */
.press-hero-section {
min-height: 100vh;
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 2rem 0;
}
.press-hero-section::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(171, 193, 177, 0.1) 0%, transparent 50%);
}
.press-hero-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.press-hero-text h1 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-text-alt);
margin-bottom: 2rem;
letter-spacing: -0.02em;
line-height: 0.9;
}
.press-hero-text .press-subtitle {
font-size: 1.5rem;
color: var(--color-gentologie-accent);
margin-bottom: 2rem;
font-weight: 300;
}
.press-hero-text .press-description {
font-size: 1.125rem;
color: rgba(255, 245, 230, 0.9);
line-height: 1.7;
max-width: 500px;
}
.press-hero-visual {
position: relative;
height: 600px;
background: var(--color-gentologie-background-box);
overflow: hidden;
}
/* Dernières publications */
.press-section {
padding: 6rem 0;
}
.press-section-heading {
font-size: clamp(3rem, 8vw, 3rem);
font-weight: 300;
color: var(--color-gentologie-text-green);
margin-bottom: 2rem;
letter-spacing: -0.02em;
line-height: 0.9;
}
.press-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
.press-articles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 3rem;
margin-bottom: 4rem;
}
.press-article-card {
background: var(--color-gentologie-background);
padding: 2rem;
overflow: hidden;
transition: all 0.4s ease;
position: relative;
}
.press-article-card:hover {
transform: translateY(-12px);
background: var(--color-gentologie-background);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
border: 2px solid var(--color-gentologie-green);
}
.press-article-card:hover * {
color: var(--color-gentologie-green) !important;
}
.press-article-card img {
width: 100%;
margin-bottom: 1.5rem;
}
.press-article-title {
font-size: 1.5rem;
font-weight: 500;
margin-bottom: 1rem;
color: var(--color-gentologie-title);
transition: color 0.4s ease;
}
.press-article-date {
font-size: 0.875rem;
color: var(--color-gentologie-text-secondary);
margin-bottom: 0.5rem;
}
.press-article-excerpt {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gentologie-text-secondary);
}
/* Contact Section */
.press-contact-section {
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
color: var(--color-gentologie-text-alt);
position: relative;
overflow: hidden;
padding: 4rem 0; /* tu peux ajuster */
}
.press-contact-container {
position: relative;
z-index: 1;
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
}
.press-contact-content {
display: flex;
flex-direction: column; /* empile verticalement */
justify-content: center; /* centre verticalement */
align-items: center; /* centre horizontalement */
text-align: center; /* centre le texte */
gap: 2rem; /* espacement entre texte et bouton */
}
.press-contact-text h2 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.press-contact-description {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 2rem;
line-height: 1.7;
font-weight: 300;
max-width: 600px;
color: var(--color-gentologie-text-alt);
}
.press-contact-cta {
display: inline-flex;
align-items: center;
padding: 1.5rem 3rem;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-weight: 500;
font-size: 1.125rem;
transition: all 0.4s ease;
backdrop-filter: blur(20px);
}
/* Responsive */
@media (max-width: 1024px) {
.press-contact-section {
padding: 3rem 0;
}
.press-contact-description {
font-size: 1.125rem;
}
}
@media (max-width: 768px) {
.press-contact-section {
padding: 2rem 0;
}
.press-contact-description {
font-size: 1rem;
}
.press-contact-cta {
padding: 1rem 2rem;
font-size: 1rem;
}
}
/* Responsive Design */
@media (max-width: 1024px) {
.press-hero-content { grid-template-columns: 1fr; gap: 3rem; text-align: center; }
.press-articles-grid { grid-template-columns: 1fr; }
.press-featured-article { padding: 2.5rem; }
.press-contact-content { grid-template-columns: 1fr; gap: 4rem; text-align: center; }
.press-hero-section {
padding-top: 6rem;
}
@media (max-width: 768px) {
.press-section { padding: 4rem 0; }
.press-container { padding: 0 1rem; }
.press-hero-visual { height: 400px; }
.press-article-card { padding: 1.5rem; }
.press-hero-section {
padding-top: 6rem;
}
}
} /* Espace presse */
/* ========================================
PAGE INFOLETTRE GENTOLOGIE
======================================== */
.newsletter-page-main {
background-color: var(--color-gentologie-background);
min-height: 100vh;
}
/* ========================================
SECTION HERO
======================================== */
.newsletter-hero {
background: var(--color-gentologie-background-alt) !important;
padding: var(--spacing-xxl) 0;
}
.newsletter-hero-inner {
background: var(--color-gentologie-background-alt);
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-medium);
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xxl);
align-items: center;
}
.newsletter-hero-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title-alt);
line-height: var(--line-height-tight);
margin-bottom: var(--spacing-medium);
}
.newsletter-hero-subtitle {
font-family: var(--font-family-secondary);
font-size: var(--font-size-xl);
color: var(--color-gentologie-text-alt);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-xl);
}
.newsletter-stats {
display: flex;
gap: var(--spacing-xl);
margin-top: var(--spacing-xl);
}
.newsletter-stat {
text-align: center;
}
.stat-number {
display: block;
font-family: var(--font-family-primary);
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-text-alt);
line-height: 1;
}
.stat-label {
display: block;
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-alt);
margin-top: var(--spacing-xs);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.newsletter-hero-image {
position: relative;
max-width: 100%;
}
.newsletter-hero-image img {
width: 100%;
height: auto;
box-shadow: var(--shadow-large);
transition: transform var(--transition-normal);
}
.newsletter-hero-image:hover img {
transform: translateY(-8px);
}
/* ========================================
SECTION FORMULAIRE
======================================== */
.newsletter-form-section {
padding: var(--spacing-xxl) 0;
background-color: var(--color-gentologie-background);
scroll-margin-top: calc(var(--menu-total-height) + 20px); /* ajuste selon la hauteur réelle du menu */
}
.newsletter-form-container {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--spacing-medium);
}
.newsletter-form-header {
text-align: center;
margin-bottom: var(--spacing-xl);
}
.newsletter-form-header h2 {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-medium);
}
.newsletter-form-header p {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text-secondary);
line-height: var(--line-height-relaxed);
}
.newsletter-main-form {
background: var(--color-gentologie-background-alt);
padding: var(--spacing-xl);
box-shadow: var(--shadow-medium);
}
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-xl);
}
.form-group-full {
grid-column: 1 / -1;
}
.form-group label {
display: block;
font-weight: var(--font-weight-medium);
color: var(--color-gentologie-text-alt);
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-base);
}
.required-asterisk {
color: var(--color-gentologie-red);
margin-left: 2px;
}
.form-input,
.form-select {
width: 100%;
padding: var(--spacing-medium);
border: 2px solid var(--color-gentologie-accent);
font-size: var(--font-size-base);
font-family: var(--font-family-secondary);
background-color: var(--color-gentologie-background);
transition: all var(--transition-normal);
}
.form-input:focus,
.form-select:focus {
outline: none;
border-color: var(--color-gentologie-green);
box-shadow: 0 0 0 3px rgba(var(--color-gentologie-green-rgb), 0.1);
}
.form-input.invalid {
border-color: var(--color-gentologie-red);
box-shadow: 0 0 0 3px rgba(166, 38, 38, 0.1);
}
.form-input::placeholder {
color: var(--color-gentologie-text-green);
opacity: 0.7;
}
/* Consentement RGPD */
.form-group-consent {
margin: var(--spacing-xl) 0;
}
.consent-label {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
cursor: pointer;
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
}
.consent-checkbox {
appearance: none;
width: 20px;
height: 20px;
border: 2px solid var(--color-gentologie-accent);
position: relative;
cursor: pointer;
flex-shrink: 0;
margin-top: 2px;
}
.consent-checkbox:checked {
background-color: var(--color-gentologie-green);
border-color: var(--color-gentologie-green);
}
.consent-checkbox:checked::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: var(--color-gentologie-white);
font-size: 12px;
font-weight: var(--font-weight-bold);
}
.consent-text {
color: var(--color-gentologie-text-alt);
}
.consent-link {
color: var(--color-gentologie-text-alt);
text-decoration: underline;
transition: color var(--transition-fast);
}
.consent-link:hover {
color: var(--color-gentologie-text-alt);
}
/* Bouton de soumission */
.form-submit {
text-align: center;
}
.newsletter-submit-btn {
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
color: var(--color-gentologie-white);
border: none;
padding: var(--spacing-medium) var(--spacing-xl);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
font-family: var(--font-family-secondary);
cursor: pointer;
transition: all var(--transition-normal);
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
box-shadow: var(--shadow-medium);
}
.newsletter-submit-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.newsletter-submit-btn:active {
transform: translateY(0);
}
.newsletter-submit-btn.loading {
opacity: 0.8;
cursor: not-allowed;
}
.btn-icon {
transition: transform var(--transition-fast);
}
.newsletter-submit-btn:hover .btn-icon {
transform: translateX(4px);
}
/* Messages de réponse */
.form-responses {
margin: var(--spacing-medium) 0;
}
.response {
padding: var(--spacing-medium);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-sm);
}
.error-response {
background-color: rgba(166, 38, 38, 0.1);
color: var(--color-gentologie-red);
border: 1px solid rgba(166, 38, 38, 0.2);
}
.success-response {
background-color: rgba(40, 167, 69, 0.1);
color: var(--color-success);
border: 1px solid rgba(40, 167, 69, 0.2);
}
/* ========================================
SECTION AVANTAGES
======================================== */
.newsletter-benefits {
padding: var(--spacing-xxl) 0;
background: var(--color-gentologie-background);
}
.benefits-container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-medium);
}
.benefits-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
color: var(--color-gentologie-title-alt);
text-align: center;
margin-bottom: var(--spacing-xl);
}
.benefits-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-xl);
}
.benefit-card {
background: var(--color-gentologie-green);
padding: var(--spacing-xl);
text-align: center;
box-shadow: var(--shadow-small);
transition: all var(--transition-normal);
}
.benefit-card:hover {
transform: translateY(-4px);
box-shadow: var(--shadow-medium);
}
.benefit-card h3 {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
color: var(--color-gentologie-title-alt);
margin-bottom: var(--spacing-medium);
}
.benefit-card p {
color: var(--color-gentologie-text-alt);
line-height: var(--line-height-relaxed);
}
/* ========================================
CTA FINAL
======================================== */
.newsletter-final-cta {
padding: var(--spacing-xxl) 0;
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
text-align: center;
}
.final-cta-container {
max-width: 800px;
margin: 0 auto;
padding: 0 var(--spacing-medium);
}
.newsletter-final-cta h2 {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
color: var(--color-gentologie-title-alt);
margin-bottom: var(--spacing-medium);
}
.newsletter-final-cta p {
font-size: var(--font-size-xl);
color: var(--color-gentologie-text-alt);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-xl);
opacity: 0.9;
}
.cta-scroll-anchor {
scroll-margin-top: calc(var(--menu-total-height) + var(--spacing-xxl));
}
.cta-scroll-btn {
display: inline-block;
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
padding: var(--spacing-medium) var(--spacing-xl);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: all var(--transition-normal);
box-shadow: var(--shadow-medium);
}
.cta-scroll-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-large);
background: var(--color-gentologie-background);
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
@media (max-width: 1024px) {
.newsletter-hero-inner {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
text-align: center;
}
.newsletter-hero-title {
font-size: var(--font-size-4xl);
}
.newsletter-stats {
justify-content: center;
}
}
@media (max-width: 768px) {
.newsletter-hero {
padding: var(--spacing-xl) 0;
margin-top: var(--menu-mobile-height);
}
.newsletter-hero-title {
font-size: var(--font-size-3xl);
}
.newsletter-hero-subtitle {
font-size: var(--font-size-lg);
}
.newsletter-stats {
flex-direction: column;
gap: var(--spacing-medium);
}
.newsletter-main-form {
padding: var(--spacing-medium);
}
.form-grid {
grid-template-columns: 1fr;
gap: var(--spacing-medium);
}
.benefits-title,
.newsletter-final-cta h2 {
font-size: var(--font-size-3xl);
}
.benefit-card {
padding: var(--spacing-medium);
}
.consent-label {
font-size: var(--font-size-xs);
}
}
@media (max-width: 480px) {
.newsletter-hero-inner,
.newsletter-form-container,
.benefits-container,
.final-cta-container {
padding: 0 var(--spacing-medium);
}
.newsletter-hero-title {
font-size: var(--font-size-2xl);
}
.newsletter-form-header h2 {
font-size: var(--font-size-2xl);
}
.benefits-title,
.newsletter-final-cta h2 {
font-size: var(--font-size-2xl);
}
.newsletter-submit-btn {
width: 100%;
justify-content: center;
}
} /* Newsletter */
/* publicite.css - Version corrigée pour Gentologie */
/* ================================
STYLES POUR PAGE PUBLICITÉ
================================ */
/* Hero Section */
.hero-ad {
min-height: 100vh;
background: var(--color-gentologie-background-alt);
display: flex;
align-items: center;
position: relative;
overflow: hidden;
padding: 2rem 0;
}
.hero-ad-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
display: grid;
grid-template-columns: 1fr;
gap: 4rem;
align-items: center;
position: relative;
z-index: 1;
}
.hero-ad-about-text h1 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-text-alt);
margin-bottom: 2rem;
line-height: 0.9;
}
.hero-ad-about-text .subtitle {
font-size: 1.5rem;
color: var(--color-gentologie-accent);
margin-bottom: 2rem;
}
.hero-ad-about-text .description {
font-size: 1.125rem;
color: var(--color-gentologie-text-alt);
line-height: 1.7;
max-width: 500px;
}
/* Mission Section */
.mission-ad {
background: var(--color-gentologie-background);
padding: 4rem 0;
}
.mission-ad-grid {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 6rem;
align-items: center;
}
.mission-ad-label {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-gentologie-accent);
margin-bottom: 1rem;
}
.mission-ad-title {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 300;
color: var(--color-gentologie-title);
margin-bottom: 2rem;
}
.mission-ad-text p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-gentologie-text);
margin-bottom: 1.5rem;
}
/* Audience Section */
.audience {
background: var(--color-gentologie-background-alt);
padding: 4rem 0;
}
.audience-header {
text-align: center;
margin-bottom: 4rem;
}
.audience-header h2 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
margin-bottom: 1rem;
color: var(--color-gentologie-text-alt);
}
.audience-subtitle {
font-size: 1.25rem;
font-weight: 300;
color: var(--color-gentologie-text-alt);
}
.audience-container {
display: grid;
gap: 3rem;
}
.audience-intro h3 {
color: var(--color-gentologie-text-alt);
}
.audience-intro p {
color: var(--color-gentologie-text-alt);
}
.audience-title, .audience-number, .audience-description {
color: var(--color-gentologie-text-green);
}
.audience-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
gap: 2rem;
}
.audience-item {
background: var(--color-gentologie-background);
padding: 2rem;
transition: all 0.3s ease;
}
.audience-item:hover {
transform: translateY(-8px);
}
/* Partners Section */
.partners {
background: var(--color-gentologie-background);
padding: 4rem 0;
}
.partners-header {
text-align: center;
margin-bottom: 3rem;
}
.partners-header h2 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
margin-bottom: 2rem;
line-height: 0.9;
color: var(--color-gentologie-title);
}
.partners-header .subtitle {
color: var(--color-gentologie-text-green);
}
.partners-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
align-items: center;
justify-items: center;
}
.partners-item {
background: var(--color-gentologie-background);
padding: 1.5rem;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.partners-item img {
max-width: 300px;
max-height: 160px;
object-fit: contain;
filter: grayscale(100%); /* optionnel, look élégant */
transition: filter 0.3s ease, transform 0.3s ease;
}
.partners-item:hover {
transform: translateY(-6px);
}
.partners-item:hover img {
filter: grayscale(0%);
transform: scale(1.05);
}
/* Solutions Section */
.solutions {
background: var(--color-gentologie-green);
padding: 4rem 0;
}
.solutions-header {
text-align: center;
margin-bottom: 6rem;
position: relative;
z-index: 1;
}
.solutions h2 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
margin-bottom: 2rem;
line-height: 0.9;
color: var(--color-gentologie-text-alt);
}
.solutions-showcase {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.solutions-subtitle {
font-size: 1.25rem;
opacity: 0.8;
font-weight: 300;
max-width: 600px;
margin: 0 auto;
color: var(--color-gentologie-text-alt);
}
.solutions-label {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-gentologie-accent);
margin-bottom: 2rem;
}
.solutions-featured {
background: rgba(255, 255, 255, 0.08);
backdrop-filter: blur(20px);
padding: 4rem;
border: 1px solid rgba(255, 255, 255, 0.1);
position: relative;
overflow: hidden;
}
.solutions-link {
display: inline-flex;
align-items: center;
padding: 1rem 2rem;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-weight: 500;
transition: all 0.4s ease;
position: relative;
z-index: 1;
}
.solutions-featured:hover {
transform: translateY(-8px);
}
.solutions-grid-modern {
display: grid;
grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
gap: 2rem;
}
.solutions-title, .solutions-description, .solutions-link {
color: var(--color-gentologie-text-alt);
}
.solutions-title-modern, .solutions-description-modern, .solutions-link-modern {
color: var(--color-gentologie-text-alt);
}
.solutions-card-modern {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 3rem;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
}
.solutions-card-modern:hover {
transform: translateY(-8px);
}
/* Performance Section */
.performance {
background: linear-gradient(135deg, var(--color-gentologie-background) 0%, var(--color-gentologie-white) 100%);
position: relative;
overflow: hidden;
padding: 2rem 0 2rem 0;
}
.performance::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
}
.performance-container {
position: relative;
z-index: 1;
}
.performance-header {
text-align: center;
margin-bottom: 4rem;
}
.performance-header h2 {
font-size: clamp(2.5rem, 5vw, 4rem);
font-weight: 200;
color: var(--color-gentologie-title);
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.performance-layout {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 6rem;
align-items: center;
}
.performance-info {
background: var(--color-gentologie-white);
padding: 4rem;
box-shadow: 0 20px 60px rgba(0, 77, 40, 0.08);
border: 1px solid rgba(0, 77, 40, 0.1);
}
.performance-info h3 {
font-size: 2rem;
font-weight: 300;
color: var(--color-gentologie-title);
margin-bottom: 2rem;
}
.performance-info p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-gentologie-text-secondary);
margin-bottom: 2rem;
}
.performance-highlight {
background: linear-gradient(135deg, var(--color-gentologie-green), var(--color-gentologie-accent));
padding: 2rem;
color: var(--color-gentologie-white);
}
.performance-highlight-text {
font-size: 1rem;
font-weight: 500;
text-align: center;
color: var(--color-gentologie-text-alt) !important;
}
.performance-grid-advanced {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.performance-card-advanced {
background: var(--color-gentologie-white);
padding: 3rem;
text-align: center;
transition: all 0.4s ease;
position: relative;
overflow: hidden;
border: 1px solid rgba(0, 77, 40, 0.1);
}
.performance-card-advanced::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--color-gentologie-green), var(--color-gentologie-accent));
}
.performance-card-advanced:hover {
transform: translateY(-12px);
box-shadow: 0 20px 60px rgba(0, 77, 40, 0.15);
}
.performance-visual {
width: 100px;
height: 100px;
background: linear-gradient(135deg, var(--color-gentologie-background), var(--color-gentologie-accent));
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.performance-visual::after {
content: '';
position: absolute;
width: 60%;
height: 60%;
background: var(--color-gentologie-green);
}
.performance-number-advanced {
font-size: 3rem;
font-weight: 200;
color: var(--color-gentologie-green);
display: block;
margin-bottom: 1rem;
letter-spacing: -0.02em;
}
.performance-label-advanced {
font-size: 1rem;
color: var(--color-gentologie-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 500;
}
/* Contact Section */
.contact-publicite {
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
color: var(--color-gentologie-text-alt);
position: relative;
overflow: hidden;
padding: 2rem 0 2rem 0;
}
.contact-publicite-container {
position: relative;
z-index: 1;
}
.contact-publicite-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: center;
}
.contact-publicite-text h2 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.contact-publicite-description {
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 300;
color: var(--color-gentologie-text-alt);
}
.contact-publicite-cta {
display: inline-flex;
align-items: center;
padding: 1.5rem 3rem;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-weight: 500;
font-size: 1.125rem;
transition: all 0.4s ease;
backdrop-filter: blur(20px);
}
.contact-publicite-cta:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.contact-publicite-links {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.contact-publicite-link {
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(15px);
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 2rem;
text-decoration: none;
color: var(--color-gentologie-text-alt);
transition: all 0.4s ease;
position: relative;
overflow: hidden;
display: block; /* Ajouté pour s'assurer que le lien occupe tout l'espace */
}
.contact-publicite-link::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(171, 193, 177, 0.1), transparent);
transition: left 0.6s ease;
}
.contact-publicite-link:hover::before {
left: 100%;
}
.contact-publicite-link:hover {
background: rgba(255, 255, 255, 0.1);
transform: translateY(-4px);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
}
.contact-publicite-link-title {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.5rem;
position: relative;
z-index: 1;
}
.contact-publicite-link-subtitle {
font-size: 0.875rem;
opacity: 0.8;
position: relative;
z-index: 1;
}
/* ================================
RESPONSIVE DESIGN COMPLET
================================ */
/* Tablettes (≤ 1024px) */
@media (max-width: 1024px) {
.hero-ad-content {
gap: 2rem;
padding: 0 1.5rem;
}
.mission-ad-grid {
grid-template-columns: 1fr;
gap: 3rem;
}
.performance-layout {
grid-template-columns: 1fr;
gap: 3rem;
}
.contact-publicite-content {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
.partners-grid {
grid-template-columns: repeat(3, 1fr);
}
.solutions-showcase {
grid-template-columns: 1fr;
gap: 2rem;
}
.performance-grid-advanced {
grid-template-columns: repeat(2, 1fr);
}
}
/* Mobiles (≤ 768px) */
@media (max-width: 768px) {
.hero-ad {
padding: 3rem 0;
min-height: 80vh;
}
.hero-ad-content {
padding: 0 1rem;
}
.hero-ad-about-text h1 {
font-size: clamp(2.5rem, 8vw, 4rem);
margin-bottom: 1.5rem;
}
.hero-ad-about-text .subtitle {
font-size: 1.25rem;
margin-bottom: 1.5rem;
}
.hero-ad-about-text .description {
font-size: 1rem;
}
.mission-ad {
padding: 3rem 0;
}
.mission-ad-title {
font-size: clamp(2rem, 6vw, 3rem);
margin-bottom: 1.5rem;
}
.mission-ad-text p {
font-size: 1rem;
}
.audience {
padding: 3rem 0;
}
.audience-header {
margin-bottom: 3rem;
}
.audience-header h2 {
font-size: clamp(2.5rem, 8vw, 4rem);
}
.audience-list {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.audience-item {
padding: 1.5rem;
}
.partners {
padding: 3rem 0;
}
.partners-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.partners-item {
padding: 1rem;
}
.partners-item img {
max-width: 120px;
max-height: 60px;
}
.solutions {
padding: 3rem 0;
}
.solutions-header {
margin-bottom: 4rem;
}
.solutions-header h2 {
font-size: clamp(2.5rem, 8vw, 4rem);
}
.solutions-showcase {
margin-bottom: 3rem;
}
.solutions-featured {
padding: 2.5rem;
}
.solutions-grid-modern {
grid-template-columns: 1fr;
}
.solutions-card-modern {
padding: 2rem;
}
.performance {
padding: 3rem 0;
}
.performance-layout {
gap: 3rem;
}
.performance-info {
padding: 2.5rem;
}
.performance-info h3 {
font-size: 1.75rem;
}
.performance-grid-advanced {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.performance-card-advanced {
padding: 2rem;
}
.performance-visual {
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
}
.performance-number-advanced {
font-size: 2.5rem;
}
.contact-publicite {
padding: 3rem 0;
}
.contact-publicite-content {
gap: 3rem;
text-align: center;
}
.contact-publicite-links {
grid-template-columns: 1fr;
gap: 1rem;
}
.contact-publicite-cta {
padding: 1.25rem 2.5rem;
font-size: 1rem;
width: 100%;
justify-content: center;
}
.contact-publicite-link {
padding: 1.5rem;
}
}
/* Petits mobiles (≤ 480px) */
@media (max-width: 480px) {
.hero-ad-content {
padding: 0 1rem;
}
.hero-ad-about-text h1 {
font-size: 2.5rem;
line-height: 1.1;
}
.hero-ad-about-text .subtitle {
font-size: 1.125rem;
}
.mission-ad-grid {
gap: 2rem;
}
.mission-ad-title {
font-size: 2rem;
}
.audience-header h2 {
font-size: 2.5rem;
}
.audience-subtitle {
font-size: 1.125rem;
}
.partners-header h2 {
font-size: 2.5rem;
}
.partners-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.partners-item img {
max-width: 100px;
max-height: 50px;
}
.solutions-header h2 {
font-size: 2.5rem;
}
.solutions-featured {
padding: 2rem;
}
.solutions-card-modern {
padding: 1.5rem;
}
.performance-header h2 {
font-size: 2.5rem;
}
.performance-info {
padding: 2rem;
}
.performance-info h3 {
font-size: 1.5rem;
}
.performance-card-advanced {
padding: 1.5rem;
}
.performance-visual {
width: 60px;
height: 60px;
margin-bottom: 1rem;
}
.performance-number-advanced {
font-size: 2rem;
}
.contact-publicite-text h2 {
font-size: clamp(2.5rem, 8vw, 3.5rem);
}
.contact-publicite-description {
font-size: 1.125rem;
}
.contact-publicite-cta {
padding: 1rem 2rem;
font-size: 0.95rem;
}
.contact-publicite-link {
padding: 1.25rem;
}
.contact-publicite-link-title {
font-size: 1rem;
}
.contact-publicite-link-subtitle {
font-size: 0.8rem;
}
} /* Publicités et ads */
/* ================================
GIFT SUBSCRIPTIONS PAGE STYLES
CSS optimisé pour page-gift-subscriptions.php
================================ */
/* ================================
HERO SECTION
================================ */
.gift-hero {
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-bottom: 0;
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
overflow: visible;
position: relative;
z-index: 1;
padding: 2rem 0 2rem 0;
}
.gift-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 70%, rgba(171, 193, 177, 0.1) 0%, transparent 50%);
}
.gift-hero-content {
max-width: 1200px;
margin: 0 auto;
position: relative;
z-index: 2;
}
.gift-label {
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-gentologie-accent);
margin-bottom: 1rem;
}
.hero-gift-title {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-text-alt);
margin-bottom: 1.5rem;
overflow: visible;
white-space: normal;
}
.hero-text {
overflow: visible;
max-width: 800px;
}
.hero-subtitle {
font-size: 1.5rem;
color: var(--color-gentologie-accent);
margin-bottom: 2rem;
font-weight: 300;
line-height: 1.3;
}
.hero-description {
font-size: 1.125rem;
color: rgba(255, 245, 230, 0.9);
line-height: 1.7;
max-width: 500px;
margin-bottom: 3rem;
}
/* ================================
SECTION FORMULAIRE (BOUTON)
================================ */
.gift-form-section {
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
color: var(--color-gentologie-text-alt);
padding: 6rem 0;
margin-top: 0;
position: relative;
width: 100vw;
margin-left: calc(-50vw + 50%);
}
.form-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
text-align: center;
}
.form-header {
margin-bottom: 3rem;
}
#selectedLevelTitle {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
color: var(--color-gentologie-title-alt);
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.form-subtitle {
color: var(--color-gentologie-text-alt);
font-size: 1.25rem;
font-weight: 300;
opacity: 0.9;
}
/* Bouton principal pour offrir une carte-cadeau */
.gift-form-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1rem;
background: var(--color-gentologie-yellow, #f4d03f);
color: var(--color-gentologie-background-alt, #333);
border: none;
padding: 2rem 3rem;
font-size: 1.25rem;
font-weight: 600;
font-family: var(--font-family-primary);
cursor: pointer;
transition: all 0.4s ease;
text-decoration: none;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(20px);
position: relative;
overflow: hidden;
}
.gift-form-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.gift-form-btn:hover {
transform: translateY(-8px) scale(1.05);
box-shadow: 0 20px 60px rgba(244, 208, 63, 0.4);
color: var(--color-gentologie-background-alt);
}
.gift-form-btn:hover::before {
width: 300px;
height: 300px;
}
.gift-form-btn:active {
transform: translateY(-4px) scale(1.02);
}
/* ================================
SECTION "POURQUOI OFFRIR"
================================ */
.why-gift-section {
padding: 8rem 0;
background: var(--color-gentologie-background);
position: relative;
overflow: hidden;
}
.why-gift-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
}
.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
.why-gift-header {
text-align: center;
margin-bottom: 6rem;
position: relative;
z-index: 1;
}
.why-gift-header h2 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
color: var(--color-gentologie-title);
margin-bottom: 2rem;
letter-spacing: -0.02em;
}
.why-gift-subtitle {
font-size: 1.25rem;
color: var(--color-gentologie-text-secondary);
font-weight: 300;
max-width: 700px;
margin: 0 auto;
line-height: 1.6;
}
.benefits-showcase {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6rem;
align-items: start;
position: relative;
z-index: 1;
}
.benefits-featured {
background: var(--color-gentologie-white);
padding: 4rem;
box-shadow: 0 20px 60px rgba(0, 77, 40, 0.08);
border: 1px solid rgba(0, 77, 40, 0.1);
position: sticky;
top: 2rem;
}
.featured-content h3 {
font-size: 2rem;
font-weight: 300;
color: var(--color-gentologie-title);
margin-bottom: 2rem;
}
.featured-content p {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-gentologie-text-secondary);
margin-bottom: 3rem;
}
.benefits-grid {
display: flex;
flex-direction: column;
gap: 2rem;
}
.benefit-item {
background: linear-gradient(135deg, var(--color-gentologie-background), var(--color-gentologie-background-box));
padding: 2.5rem;
border: 1px solid rgba(0, 77, 40, 0.1);
transition: all 0.4s ease;
display: flex;
align-items: flex-start;
gap: 2rem;
}
.benefit-item:hover {
transform: translateY(-8px);
box-shadow: 0 20px 60px rgba(0, 77, 40, 0.1);
border-color: var(--color-gentologie-accent);
}
.benefit-icon {
width: 60px;
height: 60px;
background: transparent;
color: var(--color-gentologie-green);
border: 1px solid var(--color-gentologie-green);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
transition: transform 0.3s ease;
}
.benefit-content h3 {
font-size: 1.5rem;
font-weight: 500;
color: var(--color-gentologie-title);
margin-bottom: 1rem;
}
.benefit-content p {
color: var(--color-gentologie-text-secondary);
line-height: 1.6;
}
/* ================================
FINAL CTA SECTION
================================ */
.final-gift-cta {
padding: 8rem 0;
background: linear-gradient(135deg, var(--color-gentologie-green) 0%, var(--color-gentologie-green-dark) 100%);
color: var(--color-gentologie-text-alt);
position: relative;
overflow: hidden;
}
.final-gift-cta::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(171, 193, 177, 0.1) 0%, transparent 50%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.final-cta-content {
display: grid;
grid-template-columns: 1fr;
gap: 6rem;
align-items: center;
position: relative;
z-index: 1;
text-align: center;
}
.final-cta-text h2 {
font-size: clamp(3rem, 6vw, 5rem);
font-weight: 200;
margin-bottom: 2rem;
text-align: center;
color: var(--color-gentologie-text-alt);
}
.final-cta-description {
color: var(--color-gentologie-text-alt);
font-size: 1.25rem;
opacity: 0.9;
margin-bottom: 3rem;
line-height: 1.7;
font-weight: 300;
max-width: 700px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.final-cta-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 2rem;
}
.gift-cta-button,
.gift-cta-button-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 250px;
max-width: 300px;
color: var(--color-gentologie-green) !important;
background-color: var(--color-gentologie-background) !important;
border: 1px solid transparent;
font-family: var(--font-family-primary);
font-weight: 500;
font-size: 1.125rem;
padding: 1.25rem 2rem;
gap: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.gift-cta-button:hover,
.gift-cta-button-secondary:hover {
transform: translateY(-4px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
border-color: var(--color-gentologie-accent);
background-color: var(--color-gentologie-background) !important;
color: var(--color-gentologie-green) !important;
}
/* ================================
RESPONSIVE DESIGN
================================ */
@media (max-width: 1024px) {
.benefits-showcase {
grid-template-columns: 1fr;
gap: 4rem;
}
.benefits-featured {
position: static;
}
.final-cta-content {
grid-template-columns: 1fr;
gap: 4rem;
text-align: center;
}
}
@media (max-width: 768px) {
.container {
padding: 0 1rem;
}
.gift-hero {
padding: 4rem 0;
}
.gift-form-section,
.why-gift-section,
.final-gift-cta {
padding: 4rem 0;
}
.form-container {
padding: 0 1rem;
}
.gift-form-btn {
padding: 1.5rem 2rem;
font-size: 1.125rem;
width: 100%;
max-width: 400px;
}
.benefit-item {
flex-direction: column;
text-align: center;
gap: 1.5rem;
padding: 2rem;
}
.benefit-icon {
align-self: center;
}
.final-cta-buttons {
flex-direction: column;
align-items: center;
}
.gift-cta-button,
.gift-cta-button-secondary {
width: 100%;
max-width: 300px;
}
}
@media (max-width: 480px) {
.form-container {
padding: 0 1rem;
}
.gift-form-btn {
padding: 1.25rem 1.5rem;
font-size: 1rem;
}
.benefit-item {
padding: 1.5rem;
}
.benefits-featured {
padding: 2rem;
}
}
/* Page cadeaux */
/* === 7. BALADOS (PODCASTS) === */
/* ============================
GENTOLOGIE - PAGE BALADOS
============================ */
.gentologie-balados-page-fr {
background-color: var(--color-gentologie-background);
color: var(--color-gentologie-text);
padding: var(--spacing-xxl) 0;
}
.gentologie-balados-hero-fr {
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
text-align: center;
padding: var(--spacing-xxl) var(--spacing-lg);
}
.gentologie-balados-hero-title-fr {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-text-alt);
margin-bottom: var(--spacing-lg);
font-family: var(--font-family-primary);
}
.gentologie-balados-main-fr {
max-width: var(--content-max-width);
margin: 0 auto;
padding: var(--spacing-large) var(--spacing-md);
}
.gentologie-balados-intro-fr {
text-align: center;
margin-bottom: var(--spacing-xxl);
}
.gentologie-balados-episode-title-fr {
display: none;
}
.gentologie-balados-image-fr img {
max-width: 400px;
margin: var(--spacing-lg) auto;
display: block;
}
.gentologie-balados-description-fr {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-large);
}
.gentologie-balados-button-fr {
margin-bottom: var(--spacing-xxl);
}
.gentologie-balados-btn-fr {
display: inline-block;
background-color: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
padding: 0.75rem 2rem;
font-weight: var(--font-weight-bold);
border-radius: 50px;
text-decoration: none;
transition: background-color var(--transition-normal);
}
.gentologie-balados-btn-fr:hover {
background-color: var(--color-gentologie-hover-green);
color: var(--color-gentologie-text-button-alt);
}
.gentologie-balados-note-fr {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text-secondary);
margin-top: var(--spacing-xl);
text-align: center;
font-style: italic;
}
/* ============================
GENTOLOGIE - PODCASTS PAGE EN
============================ */
.gentologie-podcasts-page-en {
background-color: var(--color-gentologie-background);
color: var(--color-gentologie-text);
padding: var(--spacing-xxl) 0;
}
.gentologie-podcasts-hero-en {
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
text-align: center;
padding: var(--spacing-xxl) var(--spacing-lg);
}
.gentologie-podcasts-hero-title-en {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-text-alt);
margin-bottom: var(--spacing-lg);
font-family: var(--font-family-primary);
}
.gentologie-podcasts-main-en {
max-width: var(--content-max-width);
margin: 0 auto;
padding: var(--spacing-large) var(--spacing-md);
}
.gentologie-podcasts-intro-en {
text-align: center;
margin-bottom: var(--spacing-xxl);
}
.gentologie-podcasts-episode-title-en {
font-size: var(--font-size-4xl);
color: var(--color-gentologie-green);
font-family: var(--font-family-primary);
margin-bottom: var(--spacing-lg);
}
.gentologie-podcasts-image-en img {
max-width: 400px;
border-radius: 12px;
margin: var(--spacing-lg) auto;
display: block;
}
.gentologie-podcasts-description-en {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-large);
}
.gentologie-podcasts-button-en {
margin-bottom: var(--spacing-xxl);
}
.gentologie-podcasts-btn-en {
display: inline-block;
background-color: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
padding: 0.75rem 2rem;
font-weight: var(--font-weight-bold);
border-radius: 50px;
text-decoration: none;
transition: background-color var(--transition-normal);
}
.gentologie-podcasts-episode-title-en {
display: none;
}
.gentologie-podcasts-btn-en:hover {
background-color: var(--color-gentologie-hover-green);
color: var(--color-gentologie-text-button-alt);
}
.gentologie-podcasts-note-en {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text-secondary);
margin-top: var(--spacing-xl);
text-align: center;
font-style: italic;
}
/* ============================
GENTOLOGIE - PAGE BALADOS RESPONSIVE
============================ */
/* TABLETTE */
@media (max-width: 1024px) {
.gentologie-balados-hero-fr,
.gentologie-podcasts-hero-en {
padding: var(--spacing-xl) var(--spacing-md);
}
.gentologie-balados-hero-title-fr,
.gentologie-podcasts-hero-title-en {
font-size: clamp(2.5rem, 6vw, 4rem);
}
.gentologie-balados-main-fr,
.gentologie-podcasts-main-en {
padding: var(--spacing-md) var(--spacing-sm);
}
.gentologie-balados-image-fr img,
.gentologie-podcasts-image-en img {
max-width: 300px;
}
}
/* MOBILE */
@media (max-width: 768px) {
.gentologie-balados-hero-fr,
.gentologie-podcasts-hero-en {
padding: var(--spacing-lg) var(--spacing-sm);
}
.gentologie-balados-hero-title-fr,
.gentologie-podcasts-hero-title-en {
font-size: clamp(2rem, 8vw, 3rem);
}
.gentologie-balados-episode-title-fr,
.gentologie-podcasts-episode-title-en {
font-size: var(--font-size-2xl);
}
.gentologie-balados-image-fr img,
.gentologie-podcasts-image-en img {
max-width: 100%;
margin: var(--spacing-md) auto;
}
.gentologie-balados-description-fr,
.gentologie-podcasts-description-en {
font-size: var(--font-size-md);
line-height: 1.5;
}
.gentologie-balados-btn-fr,
.gentologie-podcasts-btn-en {
width: 100%;
text-align: center;
padding: 0.75rem 0;
}
}
/* PETIT MOBILE */
@media (max-width: 480px) {
.gentologie-balados-hero-title-fr,
.gentologie-podcasts-hero-title-en {
font-size: clamp(1.8rem, 10vw, 2.5rem);
}
.gentologie-balados-description-fr,
.gentologie-podcasts-description-en {
font-size: var(--font-size-sm);
}
}
/* Archive balados */
/* ========================================
STYLES POUR PAGE BALADO
======================================== */
.single-balado .balado-header {
max-width: 800px;
margin: var(--spacing-xl) auto 0;
padding: 0 var(--spacing-medium);
}
.single-balado .balado-title-wrapper {
margin-bottom: var(--spacing-large);
}
.single-balado .balado-title {
color: var(--color-gentologie-title);
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
line-height: var(--line-height-tight);
margin: 0;
}
.single-balado .balado-header-content {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--spacing-large);
}
/* Image de l'invité */
.single-balado .balado-image-invite {
width: 200px;
height: 200px;
overflow: hidden;
border: 4px solid var(--color-gentologie-accent);
margin: 0 auto;
display: block;
}
.single-balado .balado-image-invite img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Logo du balado */
.single-balado .balado-logo {
width: 300px;
height: auto;
margin: 0 auto;
display: block;
}
.single-balado .balado-logo img {
width: 100%;
height: auto;
object-fit: contain;
}
/* Section du contenu - MAINTENANT DANS LE HEADER */
.single-balado .balado-content {
max-width: 800px;
margin: var(--spacing-xl) auto 0;
padding: 0 var(--spacing-medium);
}
/* Informations de l'épisode - MAINTENANT DANS LE HEADER */
.single-balado .balado-info {
max-width: 600px;
margin: 0 auto; /* Centrer les infos */
}
.single-balado .balado-info p {
margin: var(--spacing-small) 0;
color: var(--color-gentologie-text);
font-size: var(--font-size-lg);
line-height: var(--line-height-normal);
}
.single-balado .balado-info strong {
color: var(--color-gentologie-text-green);
font-weight: var(--font-weight-semibold);
}
.single-balado .balado-excerpt {
font-style: italic;
color: var(--color-gentologie-text-secondary);
margin-top: var(--spacing-medium) !important;
padding: var(--spacing-medium);
}
/* Lecteur audio - MAINTENANT DANS LE HEADER */
.single-balado .balado-audio-player {
text-align: center;
margin: var(--spacing-xl) 0;
padding: var(--spacing-large);
}
.single-balado .balado-audio-player h3 {
color: var(--color-gentologie-title);
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-medium);
}
/* Fond du lecteur */
.mejs-container,
.mejs-controls {
background: var(--color-gentologie-green) !important;
}
/* Bouton Play */
.mejs-play button {
background: var(--color-gentologie-background) !important;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center;
-webkit-mask-size: 60%;
mask: url("data:image/svg+xml;utf8,") no-repeat center;
mask-size: 60%;
border: none !important;
width: 40px;
height: 40px;
}
/* Bouton Pause */
.mejs-pause button {
background: var(--color-gentologie-background) !important;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center;
-webkit-mask-size: 60%;
mask: url("data:image/svg+xml;utf8,") no-repeat center;
mask-size: 60%;
border: none !important;
width: 40px;
height: 40px;
}
/* Volume (haut-parleur) */
.mejs-mute button {
background: var(--color-gentologie-background) !important;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center;
-webkit-mask-size: 70%;
mask: url("data:image/svg+xml;utf8,") no-repeat center;
mask-size: 70%;
border: none !important;
width: 36px;
height: 36px;
}
/* Volume Muet (muted) */
.mejs-unmute button {
background: var(--color-gentologie-background) !important;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center;
-webkit-mask-size: 70%;
mask: url("data:image/svg+xml;utf8,") no-repeat center;
mask-size: 70%;
border: none !important;
width: 36px;
height: 36px;
}
/* Barre de progression */
.mejs-time-rail .mejs-time-total {
background: var(--color-gentologie-text-alt) !important; /* fond de la barre */
}
.mejs-time-rail .mejs-time-loaded {
background: var(--color-gentologie-text-alt) !important; /* partie chargée */
}
.mejs-time-rail .mejs-time-current {
background: var(--color-gentologie-text-alt) !important; /* partie jouée */
}
/* Volume */
.mejs-horizontal-volume-total {
background: var(--color-gentologie-background) !important;
}
.mejs-horizontal-volume-current {
background: var(--color-gentologie-background) !important;
}
/* Texte du temps (durée, temps actuel) */
.mejs-time {
color: var(--color-gentologie-text-alt) !important;
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-sm);
}
.single-balado .balado-audio-player .wp-audio-shortcode {
margin: var(--spacing-medium) auto 0;
max-width: 100%;
}
/* Description longue */
.single-balado .balado-long-description {
margin-top: var(--spacing-xl);
color: var(--color-gentologie-text);
line-height: var(--line-height-relaxed);
}
.single-balado .balado-long-description h2,
.single-balado .balado-long-description h3 {
color: var(--color-gentologie-title);
margin: var(--spacing-large) 0 var(--spacing-medium);
}
.single-balado .balado-long-description p {
margin-bottom: var(--spacing-medium);
}
/* Version mobile */
@media (max-width: 768px) {
.single-balado .balado-title {
font-size: var(--font-size-3xl);
}
.single-balado .balado-image-invite {
width: 150px;
height: 150px;
}
.single-balado .balado-logo {
width: 120px;
}
.single-balado .balado-header {
padding: var(--spacing-medium) var(--spacing-small);
}
.single-balado .balado-info p {
font-size: var(--font-size-base);
}
.single-balado .balado-audio-player {
padding: var(--spacing-medium);
}
} /* Articles balados */
/* ===== BALADO EN PREMIÈRE CLASSE ===== */
.balado-en-premiere-classe {
width: 100%;
font-family: var(--font-family-secondary);
color: var(--color-gentologie-text);
}
/* ENTÊTE */
.balado-en-premiere-classe .balado-header {
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
padding: var(--spacing-lg) var(--spacing-md);
text-align: center;
}
.balado-en-premiere-classe .balado-header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--spacing-lg);
}
.balado-en-premiere-classe .balado-logo img {
max-width: 600px;
height: auto;
align-items: center;
}
.balado-en-premiere-classe .balado-description p {
max-width: 600px;
margin: 0;
font-family: var(--font-family-primary);
font-size: var(--font-size-3xl);
color: var(--color-gentologie-text-alt);
}
/* NAVIGATION */
*[id]{
scroll-margin-top: 120px;
}
.balado-en-premiere-classe .balado-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: var(--spacing-md) 0 0 0;
padding: var(--spacing-lg);
width: 100%;
background-color: var(--color-gentologie-background-alt);
gap: 2rem;
}
.balado-en-premiere-classe .balado-nav a {
display: inline-flex;
align-items: center;
margin: var(--spacing-xs);
padding: 1.5rem 3rem;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-weight: 500;
font-size: 1.125rem;
transition: all 0.4s ease;
backdrop-filter: blur(20px);
}
.balado-en-premiere-classe .balado-nav a:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* ÉPISODE LE PLUS RÉCENT - PLEIN LARGEUR */
.balado-latest-wrapper {
width: 100%;
background-color: var(--color-gentologie-background);
padding: var(--spacing-md) 0;
display: flex;
justify-content: center;
}
.balado-en-premiere-classe .balado-latest {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--spacing-md);
width: 100%;
max-width: 1200px; /* limite la largeur du contenu mais garde le fond vert complet */
padding: var(--spacing-md);
box-sizing: border-box;
background-color: var(--color-gentologie-background);
color: var(--color-gentologie-text);
}
.balado-en-premiere-classe .latest-image {
flex: 0 0 300px;
height: 300px;
}
.balado-en-premiere-classe .latest-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.balado-en-premiere-classe .latest-info {
max-width: 600px;
flex: 1;
}
.balado-en-premiere-classe .latest-info h2 {
margin-top: 0;
color: var(--color-gentologie-green);
font-weight: 300;
}
.balado-en-premiere-classe .latest-description {
margin: var(--spacing-sm) 0;
}
.balado-en-premiere-classe .latest-embed {
margin: var(--spacing-md) 0;
}
.balado-en-premiere-classe .latest-links {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: nowrap;
width: 100%;
margin-top: var(--spacing-md);
}
.balado-en-premiere-classe .latest-links a img {
max-width: 200px;
height: auto;
}
/* HÔTE */
.balado-en-premiere-classe .balado-host {
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
padding: var(--spacing-lg) var(--spacing-md);
text-align: center;
}
.balado-host h2 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-text-alt);
margin-bottom: var(--spacing-lg);
font-family: var(--font-family-primary);
}
.balado-en-premiere-classe .host-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--spacing-lg);
}
.balado-en-premiere-classe .host-photo img {
width: 600px;
height: 600px;
object-fit: cover;
}
.balado-en-premiere-classe .host-bio h3 {
margin: 0 0 var(--spacing-sm) 0;
font-size: var(--font-size-2xl);
text-align: start;
}
.balado-en-premiere-classe .host-bio p {
max-width: 500px;
margin: 0 auto;
color: var(--color-gentologie-text-alt);
text-align: start;
}
/* ÉPISODES */
.balado-en-premiere-classe .balado-episodes {
background-color: var(--color-gentologie-background);
padding: var(--spacing-lg) var(--spacing-md);
}
.balado-episodes h2{
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-green);
margin-bottom: var(--spacing-lg);
font-family: var(--font-family-primary);
text-align: center;
}
.balado-en-premiere-classe .episodes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
}
.balado-en-premiere-classe .episode-square {
background-color: var(--color-gentologie-white);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--spacing-md);
box-shadow: var(--shadow-small);
height: 100%; /* Assure que toutes les cartes ont la même hauteur */
}
.balado-en-premiere-classe .episode-image img {
width: 100%;
height: 250px;
object-fit: cover;
}
.balado-en-premiere-classe .episode-info {
display: flex;
flex-direction: column;
flex-grow: 1; /* Prend tout l'espace disponible */
justify-content: space-between; /* Distribue l'espace */
width: 100%;
}
.balado-en-premiere-classe .episode-info h4 {
font-size: var(--font-size-base);
margin: var(--spacing-sm) 0;
color: var(--color-gentologie-green);
}
.balado-en-premiere-classe .episode-desc {
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-sm);
flex-grow: 1; /* Prend l'espace restant */
}
.balado-en-premiere-classe .listen-now {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-sm);
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
text-decoration: none;
transition: background 0.3s ease;
margin-top: auto; /* Pousse le bouton vers le bas */
}
.balado-en-premiere-classe .listen-now:hover {
background-color: var(--color-gentologie-green-dark);
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.balado-en-premiere-classe .balado-header-inner,
.balado-en-premiere-classe .balado-latest,
.balado-en-premiere-classe .host-content {
flex-direction: column;
align-items: center;
}
.balado-en-premiere-classe .latest-image,
.balado-en-premiere-classe .latest-image img,
.balado-en-premiere-classe .host-photo img {
width: 80%;
height: auto;
}
}
@media (max-width: 768px) {
.balado-en-premiere-classe .balado-nav a {
display: block;
width: 80%;
margin: var(--spacing-xs) auto;
}
.balado-en-premiere-classe .episodes-grid {
grid-template-columns: 1fr;
}
}
/* Balado En Première Classe */
/* Nom du fichier : the-finest-class-podcast.css */
/* Fonction : Fichier pour la page du Podcast The Finest Class */
/* ===== THE FINEST CLASS PODCAST ===== */
.balado-finest-class {
width: 100%;
font-family: var(--font-family-secondary);
color: var(--color-gentologie-text);
}
/* HEADER */
.balado-finest-class .balado-header {
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
padding: var(--spacing-lg) var(--spacing-md);
text-align: center;
}
.balado-finest-class .balado-header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--spacing-lg);
}
.balado-finest-class .balado-logo img {
max-width: 600px;
height: auto;
align-items: center;
}
.balado-finest-class .balado-description p {
max-width: 600px;
margin: 0;
font-family: var(--font-family-primary);
font-size: var(--font-size-3xl);
color: var(--color-gentologie-text-alt);
}
/* NAVIGATION */
*[id]{
scroll-margin-top: 120px;
}
.balado-finest-class .balado-nav {
display: flex;
justify-content: center;
flex-wrap: wrap;
margin: var(--spacing-md) 0 0 0;
padding: var(--spacing-lg);
width: 100%;
background-color: var(--color-gentologie-background-alt);
gap: 2rem;
}
.balado-finest-class .balado-nav a {
display: inline-flex;
align-items: center;
margin: var(--spacing-xs);
padding: 1.5rem 3rem;
background: rgba(255, 255, 255, 0.1);
border: 2px solid rgba(255, 255, 255, 0.2);
color: var(--color-gentologie-text-alt);
text-decoration: none;
font-weight: 500;
font-size: 1.125rem;
transition: all 0.4s ease;
backdrop-filter: blur(20px);
}
.balado-finest-class .balado-nav a:hover {
background: rgba(255, 255, 255, 0.2);
transform: translateY(-4px);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
/* LATEST EPISODE - FULL WIDTH */
.balado-latest-wrapper {
width: 100%;
background-color: var(--color-gentologie-background);
padding: var(--spacing-md) 0;
display: flex;
justify-content: center;
}
.balado-finest-class .balado-latest {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: var(--spacing-md);
width: 100%;
max-width: 1200px;
padding: var(--spacing-md);
box-sizing: border-box;
background-color: var(--color-gentologie-background);
color: var(--color-gentologie-text);
}
.balado-finest-class .latest-image {
flex: 0 0 300px;
height: 300px;
}
.balado-finest-class .latest-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.balado-finest-class .latest-info {
max-width: 600px;
flex: 1;
}
.balado-finest-class .latest-info h2 {
margin-top: 0;
color: var(--color-gentologie-green);
font-weight: 300;
}
.balado-finest-class .latest-description {
margin: var(--spacing-sm) 0;
}
.balado-finest-class .latest-embed {
margin: var(--spacing-md) 0;
}
.balado-finest-class .latest-links {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: nowrap;
width: 100%;
margin-top: var(--spacing-md);
}
.balado-finest-class .latest-links a img {
max-width: 200px;
height: auto;
}
/* HOST */
.balado-finest-class .balado-host {
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
padding: var(--spacing-lg) var(--spacing-md);
text-align: center;
}
.balado-finest-class .balado-host h2 {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-text-alt);
margin-bottom: var(--spacing-lg);
font-family: var(--font-family-primary);
}
.balado-finest-class .host-content {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--spacing-lg);
}
.balado-finest-class .host-photo img {
width: 600px;
height: 600px;
object-fit: cover;
}
.balado-finest-class .host-bio h3 {
margin: 0 0 var(--spacing-sm) 0;
font-size: var(--font-size-2xl);
text-align: start;
}
.balado-finest-class .host-bio p {
max-width: 500px;
margin: 0 auto;
color: var(--color-gentologie-text-alt);
text-align: start;
}
/* EPISODES */
.balado-finest-class .balado-episodes {
background-color: var(--color-gentologie-background);
padding: var(--spacing-lg) var(--spacing-md);
}
.balado-finest-class .balado-episodes h2{
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-green);
margin-bottom: var(--spacing-lg);
font-family: var(--font-family-primary);
text-align: center;
}
.balado-finest-class .episodes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-md);
}
.balado-finest-class .episode-square {
background-color: var(--color-gentologie-white);
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: var(--spacing-md);
box-shadow: var(--shadow-small);
height: 100%;
}
.balado-finest-class .episode-image img {
width: 100%;
height: 250px;
object-fit: cover;
}
.balado-finest-class .episode-info {
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: space-between;
width: 100%;
}
.balado-finest-class .episode-info h4 {
font-size: var(--font-size-base);
margin: var(--spacing-sm) 0;
color: var(--color-gentologie-green);
}
.balado-finest-class .episode-desc {
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-sm);
flex-grow: 1;
}
.balado-finest-class .listen-now {
display: inline-block;
padding: var(--spacing-xs) var(--spacing-sm);
background-color: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
text-decoration: none;
transition: background 0.3s ease;
margin-top: auto;
}
.balado-finest-class .listen-now:hover {
background-color: var(--color-gentologie-green-dark);
}
/* RESPONSIVE */
@media (max-width: 1024px) {
.balado-finest-class .balado-header-inner,
.balado-finest-class .balado-latest,
.balado-finest-class .host-content {
flex-direction: column;
align-items: center;
}
.balado-finest-class .latest-image,
.balado-finest-class .latest-image img,
.balado-finest-class .host-photo img {
width: 80%;
height: auto;
}
}
@media (max-width: 768px) {
.balado-finest-class .balado-nav a {
display: block;
width: 80%;
margin: var(--spacing-xs) auto;
}
.balado-finest-class .episodes-grid {
grid-template-columns: 1fr;
}
} /* The Finest Class Podcast */
/* === 8. MAGAZINES === */
/**
* GENTOLOGIE MAGAZINES - Styles CSS
* Fichier : css/magazines.css
* Version : 1.0.0
*/
/* ========================================
STYLES GÉNÉRAUX DE LA PAGE
======================================== */
.gentologie-magazines-page {
background-color: var(--color-gentologie-background);
min-height: 100vh;
}
.container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--spacing-medium);
}
/* ========================================
HEADER DE LA PAGE
======================================== */
.page-header {
text-align: center;
padding: var(--spacing-large) 0;
background: var(--color-gentologie-background);
margin-bottom: var(--spacing-large);
}
.page-title {
font-size: clamp(3rem, 8vw, 6rem);
font-weight: 300;
color: var(--color-gentologie-green);
margin-bottom: var(--spacing-lg);
font-family: var(--font-family-primary);
text-align: center !important;
}
.page-subtitle {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text-secondary);
max-width: 600px;
margin: 0 auto var(--spacing-medium);
line-height: var(--line-height-relaxed);
text-align: center !important;
}
.woocommerce-breadcrumb {
margin-top: var(--spacing-medium);
font-size: var(--font-size-sm);
}
.woocommerce-breadcrumb a {
color: var(--color-gentologie-green);
text-decoration: none;
transition: var(--transition-fast);
}
.woocommerce-breadcrumb a:hover {
text-decoration: underline;
color: var(--color-gentologie-hover-green);
}
/* ========================================
ÉTAT DE CHARGEMENT
======================================== */
.loading {
text-align: center;
padding: var(--spacing-xxl);
color: var(--color-gentologie-text-secondary);
}
.loading-spinner {
width: 40px;
height: 40px;
border: 3px solid var(--color-gentologie-background-box);
border-top: 3px solid var(--color-gentologie-green);
animation: spin 1s linear infinite;
margin: 0 auto var(--spacing-medium);
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ========================================
MAGAZINE EN VEDETTE
======================================== */
.featured-magazine {
margin: var(--spacing-large) 0;
background: var(--color-gentologie-background);
overflow: hidden;
}
.featured-content {
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--spacing-large);
align-items: center;
padding: var(--spacing-large);
}
.featured-cover {
position: relative;
overflow: hidden;
}
.featured-cover img {
width: 100%;
height: auto;
display: block;
}
.featured-badge {
position: absolute;
top: var(--spacing-small);
left: var(--spacing-small);
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 0.5px;
z-index: 10;
}
.featured-info h2 {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-medium);
line-height: var(--line-height-tight);
}
.featured-description {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text-secondary);
margin-bottom: var(--spacing-large);
line-height: var(--line-height-relaxed);
}
.featured-meta {
display: flex;
gap: var(--spacing-medium);
margin-bottom: var(--spacing-large);
flex-wrap: wrap;
}
.meta-item {
background: var(--color-gentologie-background-box);
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-green);
font-weight: var(--font-weight-medium);
display: inline-flex;
align-items: center;
gap: var(--spacing-xs);
}
.price-tag {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
font-weight: var(--font-weight-bold);
}
/* ========================================
BOUTONS D'ACTION
======================================== */
.action-buttons {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.btn {
padding: var(--spacing-small) var(--spacing-medium);
border: none;
text-decoration: none;
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
text-align: center;
cursor: pointer;
transition: var(--transition-normal);
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
min-height: 44px;
font-family: inherit;
position: relative;
overflow: hidden;
}
.btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
transition: var(--transition-fast);
}
.btn:hover::before {
left: 100%;
}
.btn:focus {
outline: 2px solid var(--color-gentologie-focus);
outline-offset: 2px;
}
.btn-primary {
background: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
}
.btn-primary:hover {
background: var(--color-gentologie-hover-green);
transform: translateY(-1px);
color: var(--color-gentologie-text-button);
text-decoration: none;
box-shadow: var(--shadow-medium);
}
.btn-secondary {
background: transparent;
color: var(--color-gentologie-green);
border: 2px solid var(--color-gentologie-green);
}
.btn-secondary:hover {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
text-decoration: none;
transform: translateY(-1px);
box-shadow: var(--shadow-medium);
}
.btn-disabled,
.btn:disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
pointer-events: none !important;
transform: none !important;
box-shadow: none !important;
}
.btn-small {
padding: var(--spacing-sm) var(--spacing-md);
font-size: var(--font-size-xs);
min-height: 36px;
}
/* ========================================
GRILLE DES MAGAZINES
======================================== */
.magazines-section {
margin: var(--spacing-large) 0;
}
.section-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-3xl);
color: var(--color-gentologie-title);
text-align: center;
margin-bottom: var(--spacing-large);
line-height: var(--line-height-tight);
}
.magazines-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-large);
}
.magazines-grid:has(> :only-child) {
grid-template-columns: repeat(3, 1fr);
}
.magazine-card {
background: var(--color-gentologie-background);
overflow: hidden;
position: relative;
padding: 1rem;
border: 2px solid var(--color-gentologie-border);
}
.magazine-cover-page {
position: relative;
overflow: hidden;
}
.magazine-cover-page img {
width: 100%;
height: 400px;
object-fit: cover;
}
.magazine-info {
padding: var(--spacing-medium);
background: var(--color-gentologie-background);
}
.magazines-grid .magazine-info h3,
.gentologie-magazines-page .magazine-info h3 {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-small);
line-height: var(--line-height-tight);
}
.magazine-date {
color: var(--color-gentologie-text-secondary);
font-size: var(--font-size-sm);
margin-bottom: var(--spacing-small);
font-weight: var(--font-weight-medium);
}
.magazine-description {
color: var(--color-gentologie-text-secondary);
font-size: var(--font-size-base);
margin-bottom: var(--spacing-medium);
line-height: var(--line-height-normal);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
max-height: calc(var(--font-size-base) * var(--line-height-normal) * 3);
line-clamp: 3;
text-overflow: ellipsis;
word-wrap: break-word;
hyphens: auto;
}
.magazine-actions {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
/* ========================================
BADGES DE STOCK
======================================== */
.stock-badge {
position: absolute;
top: var(--spacing-small);
right: var(--spacing-small);
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-transform: uppercase;
z-index: 10;
letter-spacing: 0.5px;
}
.stock-badge.in-stock {
background: var(--color-success);
color: white;
border-radius: 0px !important;
}
.stock-badge.low-stock {
background: var(--color-warning);
color: var(--color-gentologie-text);
}
.stock-badge.out-of-stock {
background: var(--color-error);
color: white;
}
/* ========================================
ÉTATS VIDES ET ERREURS
======================================== */
.empty-state {
text-align: center;
padding: var(--spacing-xxl);
color: var(--color-gentologie-text-secondary);
}
.empty-state h3 {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-medium);
color: var(--color-gentologie-title);
font-family: var(--font-family-primary);
}
.empty-state p {
margin-bottom: var(--spacing-medium);
line-height: var(--line-height-relaxed);
}
.empty-state details {
max-width: 600px;
margin: 0 auto;
text-align: left;
}
.empty-state summary {
cursor: pointer;
color: var(--color-gentologie-text-secondary);
font-size: var(--font-size-sm);
}
.empty-state pre {
background: var(--color-gentologie-background-box);
padding: var(--spacing-small);
margin-top: var(--spacing-small);
font-size: var(--font-size-xs);
overflow-x: auto;
white-space: pre-wrap;
}
/* ========================================
ICÔNES
======================================== */
.icon {
width: 16px;
height: 16px;
fill: currentColor;
flex-shrink: 0;
}
/* ========================================
NOTIFICATIONS
======================================== */
.gentologie-notifications {
position: fixed;
top: 20px;
right: 20px;
z-index: var(--z-top);
pointer-events: none;
}
.gentologie-notification {
background: var(--color-info);
color: white;
padding: var(--spacing-medium);
margin-bottom: var(--spacing-small);
box-shadow: var(--shadow-large);
pointer-events: auto;
cursor: pointer;
transform: translateX(100%);
transition: transform var(--transition-normal);
max-width: 300px;
word-wrap: break-word;
}
.notification-success {
background: var(--color-success);
}
.notification-error {
background: var(--color-error);
}
.notification-warning {
background: var(--color-warning);
color: var(--color-gentologie-text);
}
/* ========================================
STYLES ADMIN
======================================== */
.admin-preview-notice {
background: var(--color-info);
color: white;
padding: var(--spacing-medium);
text-align: center;
margin-bottom: var(--spacing-large);
}
.admin-preview-notice button {
background: white;
color: var(--color-info);
border: none;
padding: var(--spacing-xs) var(--spacing-small);
cursor: pointer;
font-weight: var(--font-weight-medium);
transition: var(--transition-fast);
}
.admin-preview-notice button:hover {
background: var(--color-gentologie-background-box);
}
.admin-preview-notice code {
background: rgba(255,255,255,0.2);
padding: 2px 6px;
font-family: monospace;
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
@media (max-width: 1024px) {
.featured-content {
grid-template-columns: 1fr;
text-align: center;
}
.magazines-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-medium);
}
.info-grid {
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
}
@media (max-width: 768px) {
.container {
padding: 0 var(--spacing-small);
}
.page-title {
font-size: var(--font-size-4xl);
}
.featured-info h2 {
font-size: var(--font-size-3xl);
}
.featured-content {
padding: var(--spacing-medium);
gap: var(--spacing-medium);
}
.action-buttons,
.magazine-actions {
justify-content: center;
}
.btn {
flex: 1;
min-width: 120px;
justify-content: center;
}
.magazines-grid {
grid-template-columns: 1fr;
gap: var(--spacing-medium);
}
.info-grid {
grid-template-columns: 1fr;
}
.info-card {
padding: var(--spacing-medium);
}
.gentologie-notifications {
right: var(--spacing-small);
left: var(--spacing-small);
}
.gentologie-notification {
max-width: none;
}
}
@media (max-width: 480px) {
.page-title {
font-size: var(--font-size-3xl);
}
.featured-info h2 {
font-size: var(--font-size-2xl);
}
.featured-meta {
justify-content: center;
}
.btn {
min-width: 100px;
font-size: var(--font-size-xs);
padding: var(--spacing-sm);
}
.magazine-cover img {
height: 300px;
}
}
/* ========================================
ANIMATIONS ET TRANSITIONS
======================================== */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
.loading,
.action-buttons,
.magazine-actions,
.admin-preview-notice,
.gentologie-notifications {
display: none !important;
}
.magazine-card,
.featured-magazine,
.info-card {
box-shadow: none !important;
border: 1px solid #ccc;
}
.magazine-cover img {
height: auto !important;
}
} /* Archive magazines */
/*
* Styles CSS pour les magazines Gentologie
* Fichier : src/magazine-styles.css
*/
/* ========================================
STYLES GÉNÉRAUX MAGAZINE
======================================== */
.gentologie-magazine-page {
font-family: var(--font-family-secondary);
line-height: var(--line-height-normal);
color: var(--color-gentologie-text);
}
/* ========================================
SECTION HERO
======================================== */
.magazine-hero {
background: var(--color-gentologie-background);
padding: var(--spacing-xl) var(--spacing-medium);
}
.hero-container {
max-width: var(--content-max-width);
margin: 0 auto;
}
.magazine-showcase {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--spacing-xxl);
align-items: start;
}
.magazine-cover-container {
position: sticky;
top: var(--spacing-lg);
}
.magazine-cover {
position: relative;
box-shadow: var(--shadow-large);
overflow: hidden;
transition: var(--transition-normal);
}
.magazine-cover:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
.cover-image {
width: 100%;
height: auto;
display: block;
}
.availability-badge {
position: absolute;
top: var(--spacing-md);
right: var(--spacing-md);
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-bold);
display: flex;
align-items: center;
gap: var(--spacing-xs);
}
.availability-badge.in-stock {
background: var(--color-success);
color: white;
}
.availability-badge.backorder {
background: var(--color-warning);
color: var(--color-gentologie-text);
}
.availability-badge.out-of-stock {
background: var(--color-error);
color: white;
}
/* ========================================
ICÔNES SVG - STYLES POUR LE TEMPLATE
======================================== */
/* Icônes principales */
.badge-icon {
width: 14px;
height: 14px;
flex-shrink: 0;
}
.urgency-icon {
width: 16px;
height: 16px;
flex-shrink: 0;
color: #f59e0b; /* couleur orange pour l'urgence */
}
.shipping-icon {
width: 18px;
height: 18px;
flex-shrink: 0;
color: var(--color-gentologie-text-secondary);
}
/* Navigation modal */
.modal-prev svg,
.modal-next svg {
width: 20px;
height: 20px;
}
/* Containers avec icônes */
.availability-badge {
display: flex;
align-items: center;
gap: 0.5rem;
}
.shipping-option {
display: flex;
align-items: center;
gap: 1rem;
}
.stock-urgency {
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ========================================
GALERIE D'IMAGES
======================================== */
.magazine-gallery {
margin-top: var(--spacing-md);
}
.gallery-thumbs {
display: flex;
gap: var(--spacing-sm);
overflow-x: auto;
padding: var(--spacing-xs);
}
.gallery-thumbs .thumb {
width: 60px;
height: 80px;
object-fit: cover;
cursor: pointer;
transition: var(--transition-normal);
opacity: 0.7;
border: 2px solid transparent;
}
.gallery-thumbs .thumb.active,
.gallery-thumbs .thumb:hover {
opacity: 1;
border-color: var(--color-gentologie-green);
}
/* ========================================
DÉTAILS DU MAGAZINE
======================================== */
.magazine-details {
padding: var(--spacing-md) 0;
}
.magazine-meta {
display: flex;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
}
.issue-number {
background: var(--color-gentologie-green);
color: white;
padding: var(--spacing-xs) var(--spacing-sm);
font-weight: var(--font-weight-bold);
}
.publication-date {
background: var(--color-gentologie-background-box);
padding: var(--spacing-xs) var(--spacing-sm);
}
.magazine-title {
font-size: var(--font-size-4xl);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-md);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-tight);
}
.magazine-price {
font-size: var(--font-size-2xl);
color: var(--color-gentologie-green);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-lg);
}
.magazine-description {
font-size: var(--font-size-lg);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-lg);
color: var(--color-gentologie-text-secondary);
overflow: visible; /* Assure que le texte n'est pas coupé */
max-height: none; /* Enlève toute limite de hauteur */
}
.magazine-specs {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-md);
margin-bottom: var(--spacing-xl);
}
.spec-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
}
.spec-icon {
font-size: var(--font-size-lg);
}
/* ========================================
ANIMATIONS MAGAZINES
======================================== */
.modal-open {
overflow: hidden;
}
.animate-in {
animation: fadeInUp 0.6s ease-out forwards;
}
.pulse,
.pulse-animation {
animation: pulse 1s ease-in-out;
}
.clicked {
transform: scale(0.95);
transition: transform 0.1s ease;
}
.thumb.hover {
transform: scale(1.05);
transition: transform 0.2s ease;
}
img[data-src] {
opacity: 0.5;
transition: opacity 0.3s;
}
img[data-src].loaded {
opacity: 1;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
/* ========================================
SECTION ACHAT
======================================== */
.magazine-purchase {
background: var(--color-gentologie-background-box);
padding: var(--spacing-lg);
border: 1px solid var(--color-gentologie-border);
}
.purchase-guarantees {
margin-top: var(--spacing-lg);
padding-top: var(--spacing-lg);
border-top: 1px solid var(--color-gentologie-border);
}
.guarantee-item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
}
.guarantee-icon {
font-size: var(--font-size-lg);
}
.stock-urgency {
background: var(--color-gentologie-yellow);
color: var(--color-gentologie-text);
padding: var(--spacing-sm) var(--spacing-md);
margin-top: var(--spacing-md);
font-weight: var(--font-weight-medium);
animation: pulse 2s infinite;
}
/* ========================================
BOUTONS WOOCOMMERCE
======================================== */
.woocommerce .single_add_to_cart_button {
background-color: var(--color-gentologie-background-button) !important;
color: var(--color-gentologie-text-button) !important;
font: var(--font-family-primary) !important;
border: none !important;
padding: 1rem 2rem !important;
font-size: 1rem !important;
cursor: pointer !important;
border-radius: 0 !important;
}
.woocommerce .single_add_to_cart_button.disabled,
.woocommerce .single_add_to_cart_button:disabled {
background-color: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
font: var(--font-family-primary) !important;
font-weight: bold;
padding: 12px 24px;
border-radius: 0 !important;
cursor: pointer;
transition: background-color 0.3s ease;
border: 1px solid var(--color-gentologie-border) !important;
}
.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained {
background-color: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
font: var(--font-family-primary) !important;
font-weight: bold;
padding: 12px 24px;
border-radius: 0 !important;
cursor: pointer;
transition: background-color 0.3s ease;
border: 1px solid var(--color-gentologie-border) !important;
}
.wc-block-components-button.wp-element-button.wc-block-components-checkout-place-order-button.contained:hover {
background-color: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
border: 1px solid var(--color-gentologie-border) !important;
font: var(--font-family-primary) !important;
}
a.reset_variations {
padding-left: 0.5rem;
}
.quantity {
padding-top: 0.5rem;
}
/* ========================================
FORMULAIRE D'ACHAT MAGAZINE
======================================== */
/* Espacement pour le label Format */
.magazine-purchase form.cart label {
display: inline-block;
margin-right: var(--spacing-md);
margin-bottom: var(--spacing-sm);
font-weight: var(--font-weight-bold);
vertical-align: top !important;
padding-bottom: var(--spacing-md);
}
/* Select Format */
.magazine-purchase form.cart select {
margin-bottom: var(--spacing-lg);
padding: var(--spacing-sm) var(--spacing-md);
border: 1px solid #ddd;
font-size: var(--font-size-base);
}
/* Input Quantité */
.magazine-purchase form.cart input[type="number"] {
margin-right: var(--spacing-lg);
margin-bottom: var(--spacing-lg);
padding: var(--spacing-sm);
width: 80px;
text-align: center;
border: 1px solid #ddd;
}
/* Bouton Ajouter au panier */
.magazine-purchase form.cart button[type="submit"],
.magazine-purchase form.cart .single_add_to_cart_button {
background: var(--color-gentologie-accent);
color: white;
border: none;
padding: var(--spacing-md) var(--spacing-xl);
font-weight: var(--font-weight-bold);
cursor: pointer;
transition: var(--transition-normal);
}
.magazine-purchase form.cart button[type="submit"]:hover {
background: var(--color-gentologie-green);
}
/* Supprimer les marges par défaut WooCommerce */
.magazine-purchase form.cart {
margin: 0;
padding: 0;
}
.magazine-purchase .cart table {
border: none;
background: none;
}
.single_add_to_cart_button.button.alt.disabled.wc-variat-slection-needed {
background-color: var(--color-gentologie-background-button) !important;
}
/* ========================================
BOUTON VERSION NUMÉRIQUE
======================================== */
.digital-version-section {
margin-top: var(--spacing-md);
padding-top: var(--spacing-md);
border-top: 1px solid var(--color-gentologie-border);
}
.btn-digital-version {
display: inline-block;
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
padding: var(--spacing-md) var(--spacing-lg);
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
text-decoration: none;
transition: var(--transition-normal);
border: 2px solid var(--color-gentologie-green);
}
.btn-digital-version:hover {
background: var(--color-gentologie-background);
color: var(--color-gentologie-green);
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
text-decoration: none;
}
/* ========================================
SECTION CONTENU AVEC ONGLETS
======================================== */
.magazine-content {
background: var(--color-gentologie-background-alt);
padding: var(--spacing-xxl) var(--spacing-medium);
}
.content-container {
max-width: var(--content-max-width);
margin: 0 auto;
}
.tab-navigation {
display: flex;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xl);
border-bottom: 2px solid var(--color-gentologie-background-box);
overflow-x: auto;
}
.tab-btn {
padding: var(--spacing-md) var(--spacing-lg);
background: var(--color-gentologie-background-button);
border: none;
font-family: var(--font-family-primary);
color: var(--color-gentologie-text-button);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
cursor: pointer;
transition: var(--transition-normal);
border-bottom: 3px solid transparent;
white-space: nowrap;
}
.tab-btn.active,
.tab-btn:hover {
color: var(--color-gentologie-background-button-alt);
background: var(--color-gentologie-text-button-alt);
}
.tab-navigation:focus {
outline: transparent !important;
}
.tab-panel {
display: none;
}
.tab-panel.active {
display: block;
animation: fadeInUp 0.5s ease-out;
}
.content-description {
color: var(--color-gentologie-text-alt);
}
.detail-value {
font-weight: var(--font-weight-normal) !important;
}
.editor-note-content p {
color: var(--color-gentologie-text-alt);
}
/* ========================================
STYLES SPÉCIFIQUES AUX ONGLETS
======================================== */
.articles-list {
display: grid;
gap: var(--spacing-md);
}
.article-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--color-gentologie-background);
border-left: 4px solid var(--color-gentologie-accent);
}
.article-icon {
font-size: var(--font-size-lg);
flex-shrink: 0;
}
.article-title {
font-weight: var(--font-weight-medium);
line-height: var(--line-height-relaxed);
}
.preview-gallery {
margin-bottom: var(--spacing-xl);
}
.preview-images {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: var(--spacing-md);
margin-top: var(--spacing-md);
}
.preview-image {
position: relative;
overflow: hidden;
cursor: pointer;
transition: var(--transition-normal);
}
.preview-image:hover {
transform: scale(1.05);
box-shadow: var(--shadow-medium);
}
.preview-thumb {
width: 100%;
height: 200px;
object-fit: cover;
}
/* ========================================
GRILLE DE DÉTAILS
======================================== */
.details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
}
.magazine-content .detail-group h3,
.gentologie-magazine-page .detail-group h3 {
color: var(--color-gentologie-title-alt) !important;
margin-bottom: var(--spacing-lg);
font-size: var(--font-size-xl);
}
.detail-row {
display: flex;
justify-content: space-between;
padding: var(--spacing-sm) 0;
border-bottom: 1px solid var(--color-gentologie-background-box);
}
.detail-label {
font-weight: var(--font-weight-medium);
color: var(--color-gentologie-text-alt);
}
.detail-value {
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-text-alt);
text-align: right;
}
.shipping-info {
display: grid;
gap: var(--spacing-md);
}
.shipping-option {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: var(--color-gentologie-background);
}
.shipping-details {
display: flex;
flex-direction: column;
}
.shipping-details strong {
color: var(--color-gentologie-text-green);
margin-bottom: var(--spacing-xs);
}
.shipping-details span {
color: var(--color-gentologie-text-secondary);
font-size: var(--font-size-sm);
}
/* ========================================
SOMMAIRE
======================================== */
/* ========================================
SOMMAIRE - TITRE
======================================== */
#tab-sommaire h2 {
color: var(--color-gentologie-text-alt);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-lg);
padding-top: var(--spacing-md);
}
/* ========================================
SOMMAIRE - DESCRIPTION
======================================== */
.articles-summary-list {
padding-left: var(--spacing-lg);
margin: var(--spacing-md) 0;
}
.articles-summary-list::marker {
color: var(--color-gentologie-text-alt);
}
.articles-summary-list li {
margin-bottom: var(--spacing-sm);
line-height: var(--line-height-tight) !important;
color: var(--color-gentologie-text-alt);
}
.sommaire-placeholder {
padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-lg) 0; /* haut, droite, bas, gauche */
background: rgba(0, 77, 40, 0.05);
border: 1px solid rgba(0, 77, 40, 0.1);
border-radius: 4px;
text-align: left;
margin: var(--spacing-lg) 0;
}
.sommaire-placeholder p {
color: var(--color-gentologie-text-alt);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
margin-bottom: var(--spacing-md);
}
.sommaire-placeholder p:first-child {
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-text-alt);
font-size: var(--font-size-base);
}
.sommaire-placeholder p:last-child {
margin-bottom: 0;
opacity: 0.9;
}
/* ========================================
MODAL IMAGES
======================================== */
.image-modal {
display: none;
position: fixed;
z-index: var(--z-modal);
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
backdrop-filter: blur(5px);
}
.modal-content {
position: relative;
margin: auto;
padding: var(--spacing-lg);
width: 90%;
max-width: 800px;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.modal-image {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
box-shadow: var(--shadow-large);
}
.modal-close {
position: absolute;
top: var(--spacing-lg);
right: var(--spacing-xl);
color: white;
font-size: var(--font-size-4xl);
font-weight: bold;
cursor: pointer;
transition: var(--transition-normal);
z-index: 1001;
}
.modal-close:hover {
color: var(--color-gentologie-accent);
transform: scale(1.1);
}
.modal-navigation {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 100%;
display: flex;
justify-content: space-between;
padding: 0 var(--spacing-lg);
pointer-events: none;
}
.modal-prev,
.modal-next {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: var(--font-size-2xl);
padding: var(--spacing-md);
cursor: pointer;
transition: var(--transition-normal);
pointer-events: all;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
.modal-prev:hover,
.modal-next:hover {
background: rgba(255, 255, 255, 0.4);
transform: scale(1.1);
}
/* ========================================
SHORTCODES MAGAZINES
======================================== */
.gentologie-magazines-grid {
display: grid;
grid-template-columns: repeat(var(--columns, 3), 1fr);
gap: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}
.magazine-item {
background: white;
overflow: hidden;
box-shadow: var(--shadow-small);
transition: var(--transition-normal);
position: relative;
}
.magazine-item:hover {
transform: translateY(-5px);
box-shadow: var(--shadow-medium);
}
.magazine-item.special-edition::before {
content: '⭐';
position: absolute;
top: var(--spacing-sm);
left: var(--spacing-sm);
background: var(--color-gentologie-yellow);
color: var(--color-gentologie-text);
padding: var(--spacing-xs);
font-size: var(--font-size-sm);
z-index: 10;
}
.magazine-image {
position: relative;
aspect-ratio: 3/4;
overflow: hidden;
}
.magazine-badges {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
z-index: 10;
}
.issue-badge,
.special-badge,
.stock-badge {
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
text-align: center;
}
.issue-badge {
background: var(--color-gentologie-green);
color: white;
}
.special-badge {
background: var(--color-gentologie-yellow);
color: var(--color-gentologie-text);
}
.stock-badge.instock {
background: var(--color-success);
color: white;
}
.stock-badge.onbackorder {
background: var(--color-warning);
color: var(--color-gentologie-text);
}
.stock-badge.outofstock {
background: var(--color-error);
color: white;
}
.magazine-info {
padding: var(--spacing-lg);
}
.magazine-title {
font-size: var(--font-size-lg);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-sm);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-tight);
}
.magazine-title a {
text-decoration: none;
color: inherit;
}
.magazine-theme {
font-style: italic;
color: var(--color-gentologie-text-secondary);
margin-bottom: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.magazine-excerpt {
color: var(--color-gentologie-text-secondary);
margin-bottom: var(--spacing-md);
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
}
.magazine-meta {
margin-bottom: var(--spacing-md);
}
.publication-date,
.page-count {
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
margin-bottom: var(--spacing-xs);
}
.magazine-price {
font-size: var(--font-size-lg);
color: var(--color-gentologie-green);
font-weight: var(--font-weight-bold);
margin-bottom: var(--spacing-md);
}
.magazine-actions {
display: flex;
gap: var(--spacing-sm);
}
.magazine-btn {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
border: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-decoration: none;
text-align: center;
cursor: pointer;
transition: var(--transition-normal);
}
.magazine-btn.primary {
background: var(--color-gentologie-green);
color: white;
}
.magazine-btn.primary:hover {
background: var(--color-gentologie-green-dark);
}
.magazine-btn.secondary {
background: var(--color-gentologie-accent);
color: var(--color-gentologie-text);
}
.magazine-btn.secondary:hover {
background: var(--color-gentologie-green);
color: white;
}
.magazine-btn.disabled {
background: var(--color-gentologie-text-secondary);
color: white;
cursor: not-allowed;
}
/* ========================================
MAGAZINE CARD POUR SHORTCODE SINGLE
======================================== */
.gentologie-magazine-card.shortcode {
background: white;
overflow: hidden;
box-shadow: var(--shadow-medium);
display: grid;
grid-template-columns: 150px 1fr;
gap: var(--spacing-lg);
padding: var(--spacing-lg);
margin: var(--spacing-lg) 0;
}
.magazine-card-image {
position: relative;
}
.magazine-card-image img {
width: 100%;
height: auto;
}
.magazine-card-status {
position: absolute;
top: var(--spacing-xs);
right: var(--spacing-xs);
padding: var(--spacing-xs);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
}
.magazine-card-status.instock {
background: var(--color-success);
color: white;
}
.magazine-card-status.onbackorder {
background: var(--color-warning);
color: var(--color-gentologie-text);
}
.magazine-card-status.outofstock {
background: var(--color-error);
color: white;
}
.magazine-card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.magazine-card-title {
font-size: var(--font-size-xl);
color: var(--color-gentologie-title);
margin-bottom: var(--spacing-sm);
font-weight: var(--font-weight-medium);
}
.magazine-card-title a {
text-decoration: none;
color: inherit;
}
.magazine-card-issue,
.magazine-card-date,
.magazine-card-theme {
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
margin-bottom: var(--spacing-xs);
}
.magazine-card-price {
font-size: var(--font-size-lg);
color: var(--color-gentologie-green);
font-weight: var(--font-weight-bold);
margin: var(--spacing-sm) 0;
}
.magazine-card-btn {
display: inline-block;
background: var(--color-gentologie-green);
color: white;
padding: var(--spacing-sm) var(--spacing-md);
text-decoration: none;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
text-align: center;
transition: var(--transition-normal);
align-self: flex-start;
}
.magazine-card-btn:hover {
background: var(--color-gentologie-green-dark);
color: white;
}
/* ========================================
WIDGETS MAGAZINES
======================================== */
.gentologie-magazine-widget,
.gentologie-magazine-archive-widget {
padding: var(--spacing-md);
}
.widget-magazine-image {
position: relative;
margin-bottom: var(--spacing-md);
}
.widget-magazine-image img {
width: 100%;
height: auto;
}
.widget-special-badge {
position: absolute;
top: var(--spacing-sm);
right: var(--spacing-sm);
background: var(--color-gentologie-yellow);
color: var(--color-gentologie-text);
padding: var(--spacing-xs) var(--spacing-sm);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-bold);
}
.widget-magazine-info h3 {
margin: 0 0 var(--spacing-sm) 0;
font-size: var(--font-size-lg);
}
/* ========================================
MEDIA QUERIES RESPONSIVE
======================================== */
/* ========================================
TABLETTE - 768px à 1024px
======================================== */
@media screen and (max-width: 1024px) {
.magazine-showcase {
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xl);
}
.magazine-title {
font-size: var(--font-size-3xl);
}
.details-grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.gentologie-magazines-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* ========================================
MOBILE LARGE - 600px à 768px
======================================== */
@media screen and (max-width: 768px) {
.magazine-showcase {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
padding: 0 var(--spacing-md);
}
.magazine-cover-container {
position: static;
max-width: 400px;
margin: 0 auto;
padding: 0 var(--spacing-sm);
}
.magazine-hero {
padding: var(--spacing-lg) var(--spacing-md);
}
.hero-container {
padding: 0 var(--spacing-md);
}
.magazine-details {
padding: var(--spacing-md);
}
.magazine-meta {
flex-direction: column;
gap: var(--spacing-sm);
align-items: flex-start;
}
.magazine-title {
font-size: var(--font-size-2xl);
line-height: var(--line-height-tight);
}
.magazine-price {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
.magazine-specs {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm);
}
.spec-item {
flex-direction: column;
text-align: center;
gap: var(--spacing-xs);
}
.magazine-content {
padding: var(--spacing-xl) var(--spacing-md);
}
.content-container {
padding: 0 var(--spacing-md);
}
.tab-panel {
padding: 0 var(--spacing-sm);
}
.tab-navigation {
justify-content: stretch;
}
.tab-btn {
flex: 1;
padding: var(--spacing-md) var(--spacing-sm);
font-size: var(--font-size-base);
text-align: center;
}
.gentologie-magazine-card.shortcode {
grid-template-columns: 100px 1fr;
gap: var(--spacing-md);
padding: var(--spacing-md);
}
.modal-content {
padding: var(--spacing-md);
width: 95%;
}
.modal-close {
top: var(--spacing-sm);
right: var(--spacing-md);
font-size: var(--font-size-2xl);
}
}
/* ========================================
MOBILE STANDARD - 480px à 600px
======================================== */
@media screen and (max-width: 600px) {
.magazine-hero {
padding: var(--spacing-md) var(--spacing-md);
}
.magazine-content {
padding: var(--spacing-lg) var(--spacing-md);
}
.magazine-details {
padding: var(--spacing-md) var(--spacing-lg);
}
.magazine-title {
font-size: var(--font-size-xl);
}
.magazine-specs {
grid-template-columns: 1fr;
gap: var(--spacing-sm);
}
.spec-item {
justify-content: space-between;
flex-direction: row;
padding: var(--spacing-sm);
background: var(--color-gentologie-background-box);
}
.magazine-purchase {
padding: var(--spacing-md);
margin: 0 var(--spacing-md);
}
.detail-group {
padding: 0 var(--spacing-md);
}
.tab-navigation {
flex-direction: column;
gap: 0;
}
.tab-btn {
border-radius: 0;
border-bottom: 1px solid var(--color-gentologie-border);
}
.tab-btn:first-child {
border-top-left-radius: var(--radius-medium);
border-top-right-radius: var(--radius-medium);
}
.tab-btn:last-child {
border-bottom-left-radius: var(--radius-medium);
border-bottom-right-radius: var(--radius-medium);
border-bottom: none;
}
.detail-row {
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-xs);
}
.detail-value {
text-align: left;
font-weight: var(--font-weight-normal);
}
.shipping-option {
flex-direction: column;
text-align: center;
gap: var(--spacing-sm);
}
.gentologie-magazines-grid {
grid-template-columns: 1fr;
}
.gentologie-magazine-card.shortcode {
grid-template-columns: 1fr;
text-align: center;
}
.magazine-card-image {
max-width: 200px;
margin: 0 auto;
}
}
/* Espacement pour le label Format */
.magazine-purchase form.cart label {
display: inline-block;
margin-right: var(--spacing-md);
margin-bottom: var(--spacing-sm);
font-weight: var(--font-weight-bold);
vertical-align: top !important;
padding-bottom: var(--spacing-xl);
}
/* ========================================
MOBILE PETIT - moins de 480px
======================================== */
@media screen and (max-width: 480px) {
.magazine-hero,
.magazine-content {
padding: var(--spacing-sm) var(--spacing-lg);
}
.hero-container,
.content-container {
padding: 0 var(--spacing-lg);
}
.magazine-details {
padding: var(--spacing-lg) var(--spacing-xl);
}
.magazine-title {
font-size: var(--font-size-lg);
margin-bottom: var(--spacing-sm);
}
.magazine-description {
font-size: var(--font-size-base);
margin-bottom: var(--spacing-md);
}
.magazine-price {
font-size: var(--font-size-lg);
}
.tab-btn {
padding: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.modal-content {
width: 100%;
height: 100vh;
padding: var(--spacing-sm);
}
.modal-image {
max-height: 70vh;
}
.tab-panel {
padding: var(--spacing-md) var(--spacing-lg);
}
.articles-summary-list {
padding-left: var(--spacing-xl);
margin: var(--spacing-md) var(--spacing-lg);
}
.detail-group {
padding: 0 var(--spacing-lg);
margin-bottom: var(--spacing-lg);
}
.magazine-purchase form.cart input[type="number"] {
width: 60px;
margin-right: var(--spacing-sm);
}
.magazine-purchase form.cart .single_add_to_cart_button {
width: 100%;
padding: var(--spacing-md);
font-size: var(--font-size-base);
}
}
/* ========================================
UTILITAIRES RESPONSIVE
======================================== */
@media screen and (max-width: 768px) {
.hide-mobile {
display: none !important;
}
.mobile-only {
display: block !important;
}
}
@media screen and (min-width: 769px) {
.hide-desktop {
display: none !important;
}
.mobile-only {
display: none !important;
}
}
/* ========================================
AMÉLIORATION DU TOUCH SUR MOBILE
======================================== */
@media (hover: none) and (pointer: coarse) {
.tab-btn,
.magazine-btn,
.modal-prev,
.modal-next {
min-height: 44px;
}
.gallery-thumbs .thumb {
min-width: 44px;
min-height: 44px;
}
.magazine-cover:hover,
.magazine-item:hover,
.preview-image:hover {
transform: none;
}
}
/* ========================================
ACCESSIBILITÉ
======================================== */
@media screen and (max-width: 768px) {
.tab-btn:focus,
.magazine-btn:focus,
.gallery-thumbs .thumb:focus {
outline: 2px solid var(--color-gentologie-accent);
outline-offset: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
.magazine-cover,
.magazine-item,
.preview-image,
.tab-panel {
transition: none;
animation: none;
}
.tab-panel.active {
animation: none;
}
}
/* ========================================
ORIENTATION PAYSAGE MOBILE
======================================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
.magazine-hero {
padding: var(--spacing-sm) var(--spacing-xs);
}
.modal-image {
max-height: 60vh;
}
.tab-navigation {
flex-direction: row;
}
.tab-btn {
padding: var(--spacing-sm) var(--spacing-md);
}
}
/* ========================================
PRINT STYLES
======================================== */
@media print {
.magazine-purchase,
.modal-navigation,
.tab-navigation {
display: none !important;
}
.magazine-cover,
.magazine-card {
box-shadow: none !important;
border: 1px solid #ccc;
}
.magazine-cover img {
height: auto !important;
}
}
} /* Styles magazines individuels */
/* === 9. WOOCOMMERCE (À LA FIN POUR OVERRIDE) === */
/* cart.css
* Gentologie
*/
/* ==========================================================================
WOOCOMMERCE - PAGE PANIER
========================================================================== */
/* ============================================
===== CONTAINER PRINCIPAL DU PANIER ===========
============================================== */
.woocommerce-cart {
font-family: var(--font-family-primary);
background: var(--color-gentologie-background);
}
.wp-block-woocommerce-cart.alignwide {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
padding: 2rem;
}
/* ======================================
===== TITRE DE LA PAGE PANIER ===========
========================================== */
.woocommerce-cart h1,
.woocommerce-cart .entry-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-green);
text-align: center;
margin-bottom: var(--spacing-xl);
}
.woocommerce-cart .page-body .wp-block-heading .has-text-align-center h2 {
font-family: var(--font-family-primary);
font-size: var(--font-size-4xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-green);
text-align: center;
margin-bottom: var(--spacing-xl);
}
/* ================================
===== TABLEAU DU PANIER ===========
=================================== */
.woocommerce-cart table.cart {
background: var(--color-gentologie-white);
border-radius: 8px;
box-shadow: var(--shadow-small);
margin-bottom: var(--spacing-lg);
border: none;
}
.woocommerce-cart table.cart th {
font-family: var(--font-family-secondary);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-green);
padding: var(--spacing-medium);
border-bottom: 2px solid var(--color-gentologie-green);
}
.woocommerce-cart table.cart td {
padding: var(--spacing-medium);
color: var(--color-gentologie-text);
font-family: var(--font-family-secondary);
}
/* =============================
===== NOM DU PRODUIT ===========
================================ */
.woocommerce-cart table.cart .product-name a {
color: var(--color-gentologie-green);
font-weight: var(--font-weight-semibold);
text-decoration: none;
font-family: var(--font-family-primary);
font-size: var(--font-size-lg);
}
.woocommerce-cart table.cart .product-name a:hover {
color: var(--color-gentologie-member-jade);
text-decoration: underline;
}
/* =========================
===== PRIX =================
============================= */
.woocommerce-cart table.cart .product-price,
.woocommerce-cart table.cart .product-subtotal {
color: var(--color-gentologie-green);
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
/* ============================
===== IMAGE PRODUIT ===========
============================= */
.woocommerce-cart table.cart .product-thumbnail img {
border-radius: 4px;
box-shadow: var(--shadow-small);
}
/* =========================
===== QUANTITÉ =============
============================= */
.woocommerce-cart table.cart .quantity input {
font-family: var(--font-family-secondary);
padding: var(--spacing-xs) var(--spacing-sm);
border-radius: 4px;
text-align: center;
}
/* ==============================
===== BOUTON SUPPRIMER ===========
============================= */
.woocommerce-cart table.cart .product-remove a {
color: var(--color-error) !important;
font-size: var(--font-size-lg);
transition: all var(--transition-fast);
}
.woocommerce-cart table.cart .product-remove a:hover {
color: var(--color-gentologie-red) !important;
transform: scale(1.2);
}
/* ========================================
===== BOUTONS GÉNÉRAUX DU PANIER ===========
============================================ */
.woocommerce-cart .button,
.woocommerce-cart button.button,
.woocommerce-cart input[type="submit"],
.woocommerce-cart a.button {
background: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
padding: var(--spacing-sm) var(--spacing-lg);
border: none;
border-radius: 4px;
cursor: pointer;
transition: all var(--transition-normal);
text-decoration: none;
display: inline-block;
}
.woocommerce-cart .button:hover,
.woocommerce-cart button.button:hover,
.woocommerce-cart input[type="submit"]:hover,
.woocommerce-cart a.button:hover {
background: var(--color-gentologie-green-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
/* ================================
===== ACTIONS DU PANIER ===========
================================= */
.woocommerce-cart .actions {
background: var(--color-gentologie-background);
padding: var(--spacing-lg);
border-radius: 0 0 8px 8px;
}
/* =========================
===== CODE PROMO ===========
============================= */
.woocommerce-cart .coupon {
display: inline-block;
}
.woocommerce-cart .coupon label {
font-family: var(--font-family-secondary);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-green);
display: inline-block;
margin-right: var(--spacing-sm);
}
.woocommerce-cart .coupon input[type="text"] {
font-family: var(--font-family-secondary);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: 4px;
margin-right: var(--spacing-sm);
}
/* ============================
===== SECTION TOTAUX ===========
============================= */
.woocommerce-cart .cart-collaterals {
margin-top: var(--spacing-xl);
}
.woocommerce-cart .cart_totals {
background: var(--color-gentologie-white);
padding: var(--spacing-large);
border-radius: 8px;
box-shadow: var(--shadow-small);
}
.woocommerce-cart .cart_totals h2 {
font-family: var(--font-family-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-green);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-medium);
border-bottom: 2px solid var(--color-gentologie-green);
}
.woocommerce-cart .cart_totals table {
font-family: var(--font-family-secondary);
width: 100%;
}
.woocommerce-cart .cart_totals th {
color: var(--color-gentologie-text);
font-weight: var(--font-weight-semibold);
padding: var(--spacing-sm) 0;
text-align: left;
}
.woocommerce-cart .cart_totals td {
color: var(--color-gentologie-green);
font-weight: var(--font-weight-bold);
padding: var(--spacing-sm) 0;
text-align: right;
}
.woocommerce-cart .cart_totals .order-total th {
font-size: var(--font-size-lg);
color: var(--color-gentologie-green);
padding-top: var(--spacing-md);
border-top: 2px solid var(--color-gentologie-background);
}
.woocommerce-cart .cart_totals .order-total td {
font-size: var(--font-size-2xl);
color: var(--color-gentologie-green);
padding-top: var(--spacing-md);
border-top: 2px solid var(--color-gentologie-background);
}
/* ========================================
===== BOUTON PASSER LA COMMANDE ===========
========================================== */
.woocommerce-cart .wc-proceed-to-checkout {
margin-top: var(--spacing-lg);
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
font-family: var(--font-family-primary);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-bold);
padding: var(--spacing-md) var(--spacing-xl);
border-radius: 8px;
width: 100%;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
border: none;
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button:hover {
background: var(--color-gentologie-green-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-large);
}
/* =========================
===== MESSAGES ===========
============================= */
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-error,
.woocommerce-cart .woocommerce-info {
font-family: var(--font-family-secondary);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-lg);
border-radius: 4px;
}
.woocommerce-cart .woocommerce-message {
background: var(--color-gentologie-green-light);
border-left: 4px solid var(--color-gentologie-green);
color: var(--color-gentologie-green);
}
.woocommerce-cart .woocommerce-error {
background: #FFE5E5;
border-left: 4px solid var(--color-error);
color: var(--color-error);
}
.woocommerce-cart .woocommerce-info {
background: var(--color-gentologie-background-box);
color: var(--color-gentologie-text);
}
/* =========================
===== PANIER VIDE ===========
============================= */
.woocommerce-cart .cart-empty {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
color: var(--color-gentologie-text-secondary);
text-align: center;
padding: var(--spacing-xxl);
}
.woocommerce-cart .return-to-shop {
text-align: center;
margin-top: var(--spacing-lg);
}
/* =========================
===== RESPONSIVE ===========
============================= */
@media (max-width: 768px) {
.woocommerce-cart {
padding: var(--spacing-lg) var(--spacing-md);
}
.woocommerce-cart h1,
.woocommerce-cart .entry-title {
font-size: var(--font-size-3xl);
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
padding: var(--spacing-sm);
font-size: var(--font-size-sm);
}
.woocommerce-cart .cart_totals {
padding: var(--spacing-md);
}
}
/* ========================================
BREAKPOINT 600px - MOBILE MOYEN
======================================== */
@media (max-width: 600px) {
/* Table overflow scroll sur mobile moyen */
.woocommerce-cart table.cart {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.woocommerce-cart table.cart th,
.woocommerce-cart table.cart td {
padding: var(--spacing-xs);
font-size: var(--font-size-xs);
}
.woocommerce-cart table.cart .product-name a {
font-size: var(--font-size-base);
}
.woocommerce-cart .product-price,
.woocommerce-cart .product-subtotal {
font-size: var(--font-size-base);
}
.woocommerce-cart .cart_totals {
padding: var(--spacing-md);
}
.woocommerce-cart .cart_totals h2 {
font-size: var(--font-size-xl);
}
.woocommerce-cart .cart_totals .order-total td {
font-size: var(--font-size-xl);
}
.woocommerce-cart .wc-proceed-to-checkout .checkout-button {
padding: var(--spacing-sm) var(--spacing-lg);
font-size: var(--font-size-base);
}
.woocommerce-cart .actions {
padding: var(--spacing-md);
}
.woocommerce-cart .coupon {
display: block;
margin-bottom: var(--spacing-sm);
}
.woocommerce-cart .coupon input[type="text"] {
width: 100%;
margin-bottom: var(--spacing-sm);
}
}
@media (max-width: 480px) {
.woocommerce-cart {
padding: var(--spacing-md) var(--spacing-sm);
}
.woocommerce-cart h1,
.woocommerce-cart .entry-title {
font-size: var(--font-size-2xl);
}
.woocommerce-cart .cart_totals {
padding: var(--spacing-sm);
}
} /* Panier */
/* cart-empty.css
* Gentologie
*/
/* ==========================================================================
PANIER VIDE - ULTRA HAUTE SPÉCIFICITÉ AVEC VARIABLES
========================================================================== */
/* Cacher l'icône du panier vide */
body.woocommerce-cart .wp-block-woocommerce-cart .with-empty-cart-icon::before {
display: none !important;
}
/* Container principal */
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block {
max-width: var(--container-max-width) !important;
margin: 0 auto !important;
padding: var(--spacing-large) var(--spacing-lg) !important;
}
/* Titre "Votre panier est vide" */
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-4xl) !important;
font-weight: var(--font-weight-bold) !important;
color: var(--color-gentologie-green) !important;
text-align: center !important;
margin-bottom: var(--spacing-lg) !important;
}
/* Séparateur */
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-separator {
border-color: var(--color-gentologie-accent) !important;
margin: var(--spacing-lg) auto !important;
}
/* Titre "Nouveau dans la boutique" */
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block h2:not(.wc-block-cart__empty-cart__title) {
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-2xl) !important;
font-weight: var(--font-weight-semibold) !important;
color: var(--color-gentologie-green) !important;
text-align: center !important;
margin: var(--spacing-lg) 0 !important;
}
/* Titre du produit */
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title {
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-xl) !important;
font-weight: var(--font-weight-bold) !important;
color: var(--color-gentologie-green) !important;
margin: 0 0 var(--spacing-md) 0 !important;
line-height: var(--line-height-tight) !important;
text-decoration: none !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title a {
color: var(--color-gentologie-green) !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-title a:hover {
color: var(--color-gentologie-member-jade) !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product a,
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product a:hover,
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product a:focus {
text-decoration: none !important;
border-bottom: none !important;
box-shadow: none !important;
}
/* Prix */
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product-price {
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-lg) !important;
color: var(--color-gentologie-green) !important;
margin: var(--spacing-md) 0 !important;
}
/* Boutons */
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button {
margin-top: auto !important;
width: 100% !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link {
background: var(--color-gentologie-green) !important;
color: var(--color-gentologie-text-alt) !important;
font-family: var(--font-family-primary) !important;
font-size: var(--font-size-base) !important;
border-radius: 0px !important;
border: none !important;
transition: all var(--transition-normal) !important;
text-decoration: none !important;
display: block !important;
width: 100% !important;
text-align: center !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button__link:hover {
background: var(--color-gentologie-member-emerald) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-hover) !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__product {
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wp-block-button.wc-block-grid__product-add-to-cart {
margin-top: auto !important;
padding-top: var(--spacing-md) !important;
}
/* Responsive */
@media (max-width: 1200px) {
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
grid-template-columns: repeat(3, 1fr) !important;
}
}
@media (max-width: var(--breakpoint-sm)) {
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
grid-template-columns: repeat(2, 1fr) !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
font-size: var(--font-size-3xl) !important;
}
}
@media (max-width: var(--breakpoint-xs)) {
body.woocommerce-cart .wp-block-woocommerce-cart .wp-block-woocommerce-empty-cart-block .wc-block-grid__products {
grid-template-columns: 1fr !important;
}
body.woocommerce-cart .wp-block-woocommerce-cart .wc-block-cart__empty-cart__title {
font-size: var(--font-size-2xl) !important;
}
} /* Panier vide */
/* checkout.css - Version corrigée pour Gentologie
* Gentologie -
*/
/* ==========================================================================
CHECKOUT WOOCOMMERCE - GENTOLOGIE
========================================================================== */
.wp-block-woocommerce-checkout.alignwide.wc-block-checkout {
max-width: 1200px;
margin-left: auto;
margin-right: auto;
box-sizing: border-box;
padding: 2rem;
}
/* Forcer body en pleine largeur sur checkout */
body.woocommerce-checkout {
max-width: 100vw;
overflow-x: hidden;
margin: 0;
padding: 0;
}
body.woocommerce-checkout .site-header,
body.woocommerce-checkout .site-footer {
width: 100vw;
max-width: 100vw;
margin-left: 0;
margin-right: 0;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
body.woocommerce-checkout #page,
body.woocommerce-checkout .site {
width: 100%;
max-width: 100%;
overflow-x: hidden;
}
/* Section principale en pleine largeur avec background */
body.woocommerce-checkout .site-main,
body.woocommerce-checkout main {
width: 100vw;
max-width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
background: var(--color-gentologie-background);
}
/* Contenu centré à l'intérieur */
body.woocommerce-checkout .woocommerce {
max-width: var(--content-max-width);
margin: 0 auto;
padding: var(--spacing-xl) var(--spacing-lg);
}
/* Forcer pleine largeur pour header et footer */
.woocommerce-checkout .site-header,
.woocommerce-checkout .site-footer {
width: 100%;
max-width: none;
margin: 0;
padding-left: 0;
padding-right: 0;
}
/* Container général du checkout en pleine largeur */
.woocommerce-checkout {
width: 100%;
max-width: 100vw;
margin: 0;
padding: 0;
overflow-x: hidden;
font-family: var(--font-family-primary);
background: var(--color-gentologie-background);
padding: var(--spacing-xl) var(--spacing-lg);
}
/* Section de contenu avec background pleine largeur */
.woocommerce-checkout .woocommerce {
background: var(--color-gentologie-background);
padding: var(--spacing-xl);
}
/* Conteneur du contenu centré */
.woocommerce-checkout .woocommerce-form-login-toggle,
.woocommerce-checkout .woocommerce-form-coupon-toggle,
.woocommerce-checkout .woocommerce-form-login,
.woocommerce-checkout .woocommerce-form-coupon,
.woocommerce-checkout form.checkout {
max-width: var(--content-max-width);
margin-left: auto;
margin-right: auto;
padding-left: var(--spacing-lg);
padding-right: var(--spacing-lg);
}
/* Wrapper du contenu checkout */
.woocommerce-checkout .woocommerce-notices-wrapper {
max-width: var(--content-max-width);
margin: 0 auto;
padding: 0 var(--spacing-lg);
}
/* Titre principal */
.woocommerce-checkout h1,
.woocommerce-checkout .entry-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-5xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-green);
text-align: center;
margin-bottom: var(--spacing-xl);
}
/* Layout deux colonnes */
.woocommerce-checkout .col2-set {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-large);
margin-bottom: var(--spacing-large);
}
/* Sections blanches */
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields,
.woocommerce-checkout #order_review_heading,
.woocommerce-checkout #order_review {
background: var(--color-gentologie-white);
padding: var(--spacing-large);
border-radius: 8px;
box-shadow: var(--shadow-small);
margin-bottom: var(--spacing-lg);
}
/* Titres de sections */
.woocommerce-checkout h3 {
font-family: var(--font-family-primary);
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-green);
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-medium);
border-bottom: 2px solid var(--color-gentologie-green);
}
/* Champs de formulaire */
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
width: 100%;
padding: var(--spacing-small) var(--spacing-medium);
border: 1px solid var(--color-gentologie-green);
border-radius: 4px;
font-size: var(--font-size-base);
font-family: var(--font-family-secondary);
background: var(--color-gentologie-white);
transition: border-color var(--transition-normal);
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
outline: none;
border-color: var(--color-gentologie-focus);
box-shadow: 0 0 0 3px rgba(var(--color-gentologie-green), 0.1);
}
/* Labels */
.woocommerce-checkout .form-row label {
font-family: var(--font-family-secondary);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-green);
margin-bottom: var(--spacing-sm);
display: block;
}
/* Résumé de commande */
#order_review .woocommerce-checkout-review-order-table {
width: 100%;
border-collapse: collapse;
}
/* Ligne de produit */
#order_review .woocommerce-checkout-review-order-table .cart_item td {
padding: var(--spacing-medium) 0;
border-bottom: 1px solid var(--color-gentologie-background-box);
}
/* Nom du produit */
#order_review .product-name {
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-green);
display: flex;
align-items: center;
gap: var(--spacing-md);
}
#order_review .product-name img {
max-width: 60px;
height: auto;
border-radius: 4px;
}
/* Prix produit - CORRIGER LE DOUBLE PRIX */
#order_review .product-total {
text-align: right;
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-green) !important;
font-size: var(--font-size-xl);
}
/* Cacher le prix dupliqué si présent */
#order_review .product-total .woocommerce-Price-amount:first-child {
display: none;
}
#order_review .product-total .woocommerce-Price-amount:last-child {
display: inline;
}
/* Alternative: si les prix sont dans des éléments différents */
#order_review .product-total > *:nth-child(2) {
display: none;
}
/* Totaux */
#order_review .cart-subtotal th,
#order_review .cart-subtotal td,
#order_review .order-total th,
#order_review .order-total td {
padding: var(--spacing-medium) 0;
font-size: var(--font-size-lg);
}
#order_review .order-total {
border-top: 2px solid var(--color-gentologie-green);
font-weight: var(--font-weight-bold);
}
#order_review .order-total .woocommerce-Price-amount {
font-size: var(--font-size-3xl);
color: var(--color-gentologie-green);
}
/* Code promo */
.woocommerce-checkout .checkout_coupon {
background: var(--color-gentologie-background-box);
padding: var(--spacing-lg);
border-radius: 8px;
margin-bottom: var(--spacing-lg);
}
/* Bouton principal de commande */
.woocommerce-checkout #place_order {
background: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
padding: var(--spacing-lg) var(--spacing-xl);
border: none;
border-radius: 8px;
width: 100%;
cursor: pointer;
transition: all var(--transition-normal);
text-transform: uppercase;
letter-spacing: 1px;
}
.woocommerce-checkout #place_order:hover {
background: var(--color-gentologie-green-dark);
transform: translateY(-2px);
box-shadow: var(--shadow-hover);
}
.woocommerce-checkout #place_order:active {
background: var(--color-gentologie-active);
transform: translateY(0);
}
/* Cacher le bouton Link si présent */
#link-button,
.link-checkout-button,
[id*="link"],
.wc-stripe-link-button-wrapper {
display: none !important;
}
/* Messages d'erreur et succès */
.woocommerce-error {
background: #FFE5E5;
border-left: 4px solid var(--color-error);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-lg);
border-radius: 4px;
font-size: var(--font-size-sm);
}
.woocommerce-message {
background: var(--color-gentologie-green-light);
border-left: 4px solid var(--color-gentologie-green);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-lg);
border-radius: 4px;
font-size: var(--font-size-sm);
}
.woocommerce-info {
background: var(--color-gentologie-background-box);
border-left: 4px solid var(--color-gentologie-yellow);
padding: var(--spacing-medium);
margin-bottom: var(--spacing-lg);
border-radius: 4px;
font-size: var(--font-size-sm);
}
/* Sections d'adresse améliorées */
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
position: relative;
}
.woocommerce-billing-fields::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 8px 8px 0 0;
background: linear-gradient(90deg, var(--color-gentologie-green), var(--color-gentologie-member-jade));
}
.woocommerce-shipping-fields::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 8px 8px 0 0;
background: linear-gradient(90deg, var(--color-gentologie-blue), var(--color-gentologie-accent));
}
/* Checkbox "Expédier à une autre adresse" */
.ship-to-different-address {
background: var(--color-gentologie-background-box);
border: 1px solid var(--color-gentologie-yellow);
border-radius: 6px;
padding: var(--spacing-md);
margin: var(--spacing-medium) 0;
}
.ship-to-different-address label {
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-text);
display: flex;
align-items: center;
}
.ship-to-different-address input[type="checkbox"] {
margin-right: var(--spacing-sm);
transform: scale(1.2);
}
/* Amélioration de l'affichage des champs requis */
.woocommerce-checkout .form-row.validate-required label abbr {
color: var(--color-error);
text-decoration: none;
}
/* Responsive Tablette */
@media (max-width: 1024px) {
.woocommerce-checkout {
padding: var(--spacing-large) var(--spacing-medium);
}
.woocommerce-checkout h1,
.woocommerce-checkout .entry-title {
font-size: var(--font-size-4xl);
}
}
/* Responsive Mobile */
@media (max-width: 768px) {
.woocommerce-checkout .col2-set {
grid-template-columns: 1fr;
}
.woocommerce-checkout {
padding: var(--spacing-lg) var(--spacing-md);
}
.woocommerce-checkout h1,
.woocommerce-checkout .entry-title {
font-size: var(--font-size-3xl);
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout #order_review {
padding: var(--spacing-lg);
}
.woocommerce-checkout h3 {
font-size: var(--font-size-xl);
}
#order_review .order-total .woocommerce-Price-amount {
font-size: var(--font-size-2xl);
}
}
@media (max-width: 600px) {
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select {
font-size: 16px; /* Évite le zoom sur iOS */
}
#order_review .product-name img {
max-width: 40px;
}
}
/* Responsive Petit Mobile */
@media (max-width: 480px) {
.woocommerce-checkout {
padding: var(--spacing-md) var(--spacing-sm);
}
.woocommerce-checkout h1,
.woocommerce-checkout .entry-title {
font-size: var(--font-size-2xl);
}
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout #order_review {
padding: var(--spacing-md);
}
.woocommerce-checkout #place_order {
padding: var(--spacing-md) var(--spacing-lg);
font-size: var(--font-size-lg);
}
} /* Processus de commande */
/**
* Thank You / Order Confirmation Page Styles
* Gentologie Theme - Style épuré professionnel
*
* @package Gentologie
* @version 1.4.0 - Style WooCommerce standard amélioré
*/
/* === WRAPPER PRINCIPAL === */
.gentologie-order-confirmation-wrapper {
max-width: var(--content-max-width); /* 1200px - très large */
margin: var(--spacing-xxl) auto;
padding: var(--spacing-xl) var(--spacing-md);
background: var(--color-gentologie-white);
}
/* === SECTIONS SUCCÈS ET ÉCHEC === */
.order-confirmation-success,
.order-confirmation-failed {
text-align: left;
}
/* === ICÔNES === */
.success-icon,
.failed-icon {
display: none; /* Au lieu de juste margin: 0 */
}
/* === SECTIONS SUCCÈS ET ÉCHEC === */
.order-confirmation-success,
.order-confirmation-failed {
text-align: left;
}
/* Masquer complètement l'icône SVG */
.order-confirmation-success > .success-icon,
.order-confirmation-failed > .failed-icon {
display: none !important;
margin: 0 !important;
height: 0 !important;
width: 0 !important;
}
/* === TITRES === */
.confirmation-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-2xl);
color: var(--color-gentologie-green);
margin: 0 0 var(--spacing-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}
.failed-title {
color: var(--color-gentologie-red);
}
/* === MESSAGE DE CONFIRMATION === */
.confirmation-message {
font-size: var(--font-size-base);
color: var(--color-gentologie-text);
margin: 0 0 var(--spacing-xl);
padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
background: var(--color-gentologie-background);
border-left: 3px solid var(--color-gentologie-green);
line-height: var(--line-height-relaxed);
}
/* === BOX DÉTAILS COMMANDE (OVERVIEW) === */
.order-details-box {
background: transparent;
border: none;
padding: 0;
margin: 0 0 var(--spacing-xxl);
}
.order-details-box h2 {
display: none; /* Le titre sera géré par le message de confirmation */
}
/* ========================================
LISTE OVERVIEW - FORMAT VERTICAL AVEC 2 LIGNES
======================================== */
.order-overview {
list-style: none;
padding: 0;
margin: 0 0 var(--spacing-xl);
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colonnes = ligne 1 : ORDER/DATE/EMAIL, ligne 2 : TOTAL/PAYMENT */
gap: var(--spacing-lg) var(--spacing-xl);
row-gap: var(--spacing-lg);
}
/* Supprimer les pseudo-éléments */
.order-overview::before,
.order-overview::after {
display: none !important;
content: none !important;
}
.order-overview li {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding: 0;
border: none;
}
/* Supprimer aussi les pseudo-éléments sur les li */
.order-overview li::before,
.order-overview li::after {
display: none !important;
content: none !important;
}
.order-overview li:first-child {
padding-top: 0;
}
.order-overview .label {
font-weight: var(--font-weight-normal);
color: var(--color-gentologie-text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 1px;
}
.order-overview .value {
text-align: left;
}
.order-overview .value strong {
color: var(--color-gentologie-text);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
}
/* Support pour les classes WooCommerce par défaut */
.woocommerce ul.order_details li strong {
font-size: var(--font-size-sm) !important;
}
.woocommerce ul.order_details li {
padding: 0;
margin-right: 0 !important;
}
/* === BOUTONS D'ACTION - Spécificité ULTRA MAXIMALE === */
.confirmation-actions {
display: flex;
gap: var(--spacing-md);
justify-content: flex-start;
align-items: center;
margin-top: var(--spacing-xxl);
flex-wrap: wrap;
}
/* Forcer les styles avec spécificité maximale + !important */
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button,
.woocommerce-order-received .confirmation-actions a.button.button {
padding: var(--spacing-small) var(--spacing-lg) !important;
border-radius: var(--radius-sm) !important;
text-decoration: none !important;
font-weight: var(--font-weight-semibold) !important;
font-size: var(--font-size-base) !important;
transition: var(--transition-normal) !important;
display: inline-block !important;
cursor: pointer !important;
text-align: center !important;
line-height: 1.5 !important;
}
/* Bouton primaire */
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button-primary,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button-primary,
.woocommerce-order-received .confirmation-actions a.button.button-primary {
background: var(--color-gentologie-background-button) !important;
color: var(--color-gentologie-text-button) !important;
border: var(--border-width-normal) solid var(--color-gentologie-border-button) !important;
}
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button-primary:hover,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button-primary:hover,
.woocommerce-order-received .confirmation-actions a.button.button-primary:hover {
background: var(--color-gentologie-green-dark) !important;
border-color: var(--color-gentologie-green-dark) !important;
color: var(--color-gentologie-text-button) !important;
}
/* Bouton secondaire */
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button-secondary,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button-secondary,
.woocommerce-order-received .confirmation-actions a.button.button-secondary {
background: var(--color-gentologie-background-button-alt) !important;
border: var(--border-width-normal) solid var(--color-gentologie-border-button) !important;
color: var(--color-gentologie-text-button-alt) !important;
}
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button-secondary:hover,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button-secondary:hover,
.woocommerce-order-received .confirmation-actions a.button.button-secondary:hover {
background: var(--color-gentologie-background-button) !important;
color: var(--color-gentologie-text-button) !important;
border-color: var(--color-gentologie-border-button) !important;
}
/* === COMMANDE ÉCHOUÉE === */
.order-confirmation-failed .confirmation-message {
background: var(--color-error-light);
border-left-color: var(--color-gentologie-red);
color: var(--color-gentologie-red);
}
/* === PAS DE COMMANDE TROUVÉE === */
.order-confirmation-no-order {
text-align: center;
padding: var(--spacing-xxl) var(--spacing-md);
}
/* ========================================
SECTIONS WOOCOMMERCE STANDARD
======================================== */
/* === DÉTAILS DE COMMANDE (TABLEAU PRODUITS) === */
.woocommerce-order-details {
margin: var(--spacing-xxl) 0;
}
.woocommerce-order-details__title {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
color: var(--color-gentologie-text);
margin: 0 0 var(--spacing-md);
font-weight: var(--font-weight-semibold);
}
.woocommerce-table--order-details {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--spacing-lg);
}
.woocommerce-table--order-details thead {
background: var(--color-gentologie-background-box);
}
.woocommerce-table--order-details thead th {
color: var(--color-gentologie-text);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
font-size: var(--font-size-xs);
letter-spacing: 0.5px;
padding: var(--spacing-small) var(--spacing-md);
text-align: left;
border-bottom: var(--border-width-thin) solid var(--color-gentologie-accent);
}
.woocommerce-table--order-details thead th:last-child {
text-align: right;
}
.woocommerce-table--order-details tbody td {
padding: var(--spacing-md);
text-align: left;
border-bottom: var(--border-width-thin) solid var(--color-gentologie-accent);
color: var(--color-gentologie-text);
}
.woocommerce-table--order-details tbody tr:last-child td {
border-bottom: var(--border-width-normal) solid var(--color-gentologie-green);
}
.woocommerce-table--order-details tfoot {
background: var(--color-gentologie-background-box);
}
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
font-weight: var(--font-weight-semibold);
border-bottom: var(--border-width-thin) solid var(--color-gentologie-accent);
padding: var(--spacing-small) var(--spacing-md);
color: var(--color-gentologie-text);
}
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
border-bottom: none;
}
/* Ligne Total */
.woocommerce-table--order-details .order-total th,
.woocommerce-table--order-details .order-total td {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text);
font-weight: var(--font-weight-bold);
padding: var(--spacing-md);
}
/* Nom du produit en lien */
.woocommerce-table--order-details .woocommerce-table__product-name a {
color: var(--color-gentologie-green);
text-decoration: none;
font-weight: var(--font-weight-normal);
}
.woocommerce-table--order-details .woocommerce-table__product-name a:hover {
text-decoration: underline;
}
/* Quantité */
.woocommerce-table--order-details .product-quantity {
color: var(--color-gentologie-text-secondary);
}
/* Prix à droite */
.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details thead th:last-child,
.woocommerce-table--order-details tfoot td {
text-align: right;
font-weight: var(--font-weight-semibold);
}
.woocommerce-table--order-details tfoot th {
text-align: left;
}
/* Bouton Invoice/Facture */
.woocommerce-table--order-details .woocommerce-button {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
border: none;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-sm);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
cursor: pointer;
transition: var(--transition-normal);
text-decoration: none;
display: inline-block;
}
.woocommerce-table--order-details .woocommerce-button:hover {
background: var(--color-gentologie-green-dark);
}
/* === ADRESSES CLIENT === */
.woocommerce-customer-details {
margin: var(--spacing-xxl) 0;
}
.woocommerce-customer-details > h2 {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
color: var(--color-gentologie-text);
margin: 0 0 var(--spacing-lg);
font-weight: var(--font-weight-semibold);
}
.woocommerce .woocommerce-customer-details address {
border: none !important;
}
/* Supprimer les pseudo-éléments sur la section colonnes */
.woocommerce-columns::before,
.woocommerce-columns::after {
display: none !important;
content: none !important;
}
.woocommerce-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
}
/* Supprimer les pseudo-éléments sur chaque colonne */
.woocommerce-column::before,
.woocommerce-column::after {
display: none !important;
content: none !important;
}
.woocommerce-column {
background: transparent !important;
border: none;
border-radius: var(--radius-sm);
padding: var(--spacing-md);
}
.woocommerce-customer-details .woocommerce-column__title {
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
color: var(--color-gentologie-text);
margin: 0 0 var(--spacing-sm);
font-weight: var(--font-weight-semibold);
}
.woocommerce-column address {
font-style: normal;
line-height: var(--line-height-relaxed);
color: var(--color-gentologie-text);
font-size: var(--font-size-sm);
}
.woocommerce-column address p {
margin: var(--spacing-xs) 0;
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.gentologie-order-confirmation-wrapper {
padding: var(--spacing-lg) var(--spacing-small);
margin: var(--spacing-lg) auto;
}
.confirmation-title {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
.confirmation-message {
font-size: var(--font-size-sm);
padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.order-overview {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
.order-overview .value strong {
font-size: var(--font-size-sm);
}
.confirmation-actions {
flex-direction: column;
gap: var(--spacing-small);
margin-top: var(--spacing-lg);
}
.confirmation-actions .button {
width: 100%;
}
/* Tables responsive */
.woocommerce-table--order-details {
font-size: var(--font-size-sm);
}
.woocommerce-table--order-details thead th,
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
padding: var(--spacing-sm);
}
.woocommerce-columns {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
}
@media (max-width: 480px) {
.gentologie-order-confirmation-wrapper {
padding: var(--spacing-md) var(--spacing-sm);
}
.confirmation-title {
font-size: var(--font-size-lg);
}
.order-overview {
grid-template-columns: 1fr;
}
.woocommerce-table--order-details {
font-size: var(--font-size-xs);
}
.woocommerce-table--order-details thead th,
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* === PRINT STYLES === */
@media print {
.confirmation-actions,
.woocommerce-button {
display: none;
}
.gentologie-order-confirmation-wrapper {
margin: 0;
padding: var(--spacing-md);
}
.woocommerce-table--order-details thead {
background: #f0f0f0 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
* {
page-break-inside: avoid;
}
} /* Confirmation de commande */
/* ========================================
PAGE MON COMPTE - GENTOLOGIE
account-dashboard.css
Version finale complète avec fix espacement boutons
======================================== */
/* RESET COMPLET */
.woocommerce-account * {
box-sizing: border-box !important;
}
.woocommerce-account {
background: var(--color-gentologie-background, #fff5e6);
min-height: 100vh;
padding: 2rem 0;
}
/* ========================================
BOUTONS WOOCOMMERCE AUX COULEURS GENTOLOGIE
======================================== */
/* Boutons principaux */
.woocommerce-account .button,
.woocommerce-account .woocommerce-button,
.woocommerce-account button[type="submit"],
.woocommerce-account input[type="submit"] {
background: var(--color-gentologie-green) !important;
color: var(--color-gentologie-white, white) !important;
border: none !important;
padding: 1rem 2rem !important;
font-weight: var(--font-weight-medium, 500) !important;
cursor: pointer !important;
transition: all 0.3s ease !important;
font-family: var(--font-family-primary);
}
.woocommerce-account .button:hover,
.woocommerce-account .woocommerce-button:hover {
background: var(--color-gentologie-hover-green) !important;
transform: translateY(-2px) !important;
}
.woocommerce-info {
border-top-color: var(--color-gentologie-green) !important;
}
.woocommerce-error, .woocommerce-info, .woocommerce-message {
background-color: var(--color-gentologie-background);
border-left: 1px solid var(--color-gentologie-green);
border-right: 1px solid var(--color-gentologie-green);
border-bottom: 1px solid var(--color-gentologie-green);
}
.woocommerce-account h2{
font-size: 2rem;
}
.woocommerce-account .addresses .title .edit {
float: none;
}
/* ========================================
ESPACEMENT DES BOUTONS WOOCOMMERCE
======================================== */
/* Espacement entre les boutons dans les tables */
.woocommerce-account table.shop_table td a.button,
.woocommerce-account table.my_account_subscriptions td a.button,
.woocommerce-account table.my_account_orders td a.button,
.woocommerce-account table td.subscription-actions a.button,
.woocommerce-account table td.woocommerce-orders-table__cell-order-actions a.button {
margin-right: 0.75rem !important;
margin-bottom: 0.5rem !important;
display: inline-block !important;
white-space: nowrap !important;
}
/* Dernier bouton sans marge à droite */
.woocommerce-account table.shop_table td a.button:last-child,
.woocommerce-account table td.subscription-actions a.button:last-child {
margin-right: 0 !important;
}
/* Container des actions dans les cellules de table */
.woocommerce-account table.shop_table td.subscription-actions,
.woocommerce-account table.shop_table td.woocommerce-orders-table__cell-order-actions {
white-space: normal !important;
min-width: 200px !important;
}
/* Boutons généraux dans le contenu */
.woocommerce-MyAccount-content .button,
.woocommerce-MyAccount-content .woocommerce-button,
.woocommerce-MyAccount-content a.button {
margin-right: 0.75rem !important;
margin-bottom: 0.5rem !important;
}
/* Sur mobile - empiler les boutons */
@media (max-width: 768px) {
.woocommerce-account table.shop_table td a.button,
.woocommerce-account table td.subscription-actions a.button {
display: block !important;
margin-right: 0 !important;
margin-bottom: 0.5rem !important;
width: 100% !important;
}
}
/* ========================================
ALIGNEMENT DU TITRE "MON COMPTE" - STICKY
======================================== */
body.woocommerce-account h1 {
position: sticky !important;
top: 120px !important;
background: var(--color-gentologie-background, #fff5e6) !important;
z-index: 100 !important;
padding: 1rem 2rem !important;
margin: 0 auto 1rem auto !important;
max-width: 1400px !important;
text-align: left !important;
color: var(--color-gentologie-title);
}
/* Container général pour aligner tout */
.woocommerce-account .entry-content,
.woocommerce-account .page-content {
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
position: relative !important;
}
.woocommerce-account .woocommerce {
display: flex !important;
align-items: flex-start !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
background: transparent !important;
gap: 2rem !important;
}
/* ========================================
NAVIGATION SIDEBAR
======================================== */
.woocommerce-MyAccount-navigation {
width: 320px !important;
flex-shrink: 0 !important;
background: var(--color-gentologie-white, white) !important;
padding: var(--spacing-medium, 1.5rem) !important;
box-shadow: var(--shadow-medium, 0 4px 8px rgba(0,0,0,0.15)) !important;
height: fit-content;
position: sticky;
top: 200px;
z-index: 99 !important;
}
.woocommerce-MyAccount-navigation ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.woocommerce-MyAccount-navigation li {
margin-bottom: var(--spacing-xs, 0.25rem) !important;
}
.woocommerce-MyAccount-navigation a {
display: flex !important;
align-items: center !important;
padding: var(--spacing-small, 0.75rem) var(--spacing-md, 1rem) !important;
color: var(--color-gentologie-text, #333) !important;
text-decoration: none !important;
transition: all var(--transition-fast, 0.15s ease) !important;
font-weight: var(--font-weight-medium, 500) !important;
font-size: var(--font-size-sm, 0.875rem) !important;
position: relative !important;
}
.woocommerce-MyAccount-navigation a::before {
content: '' !important;
width: 8px !important;
height: 8px !important;
background-color: var(--color-gentologie-accent, #abc1b1) !important;
margin-right: var(--spacing-small, 0.5rem) !important;
transition: all var(--transition-fast, 0.15s ease) !important;
flex-shrink: 0 !important;
}
.woocommerce-MyAccount-navigation a:hover,
.woocommerce-MyAccount-navigation .is-active a {
background-color: var(--color-gentologie-green, #004d28) !important;
color: var(--color-gentologie-white, white) !important;
transform: translateX(4px) !important;
}
.woocommerce-MyAccount-navigation a:hover::before,
.woocommerce-MyAccount-navigation .is-active a::before {
background-color: var(--color-gentologie-white, white) !important;
}
/* ========================================
CONTENU PRINCIPAL
======================================== */
.woocommerce-MyAccount-content {
flex: 1 !important;
background: transparent !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
border: none !important;
overflow: visible !important;
display: block !important;
}
/* WRAPPER PRINCIPAL */
.gentologie-dashboard-wrapper {
width: 100% !important;
max-width: 100% !important;
background: var(--color-gentologie-white, white) !important;
box-shadow: var(--shadow-medium, 0 4px 8px rgba(0,0,0,0.15)) !important;
padding: var(--spacing-xl, 2rem) !important;
position: relative !important;
z-index: 10 !important;
display: block !important;
float: none !important;
clear: both !important;
}
/* ========================================
SECTION ABONNEMENT - AVEC ABONNEMENT
======================================== */
.gentologie-dashboard-wrapper .membership-status {
background: linear-gradient(135deg, var(--color-gentologie-green, #004d28) 0%, var(--color-gentologie-member-emerald, #346947) 100%) !important;
color: var(--color-gentologie-white, white) !important;
padding: var(--spacing-lg, 2rem) !important;
margin: 0 0 2rem 0 !important;
width: 100% !important;
position: relative !important;
overflow: hidden !important;
display: block !important;
float: none !important;
box-shadow: none !important;
border: none !important;
}
/* SECTION ABONNEMENT - SANS ABONNEMENT */
.membership-status.membership-none {
background: linear-gradient(135deg, var(--color-gentologie-accent, #abc1b1) 0%, var(--color-gentologie-hover-green, #8fb19a) 100%) !important;
}
.membership-header {
display: flex !important;
justify-content: space-between !important;
align-items: flex-start !important;
margin-bottom: var(--spacing-md, 1rem) !important;
position: relative !important;
z-index: 1 !important;
}
.membership-level {
font-size: var(--font-size-lg, 1.125rem) !important;
font-weight: var(--font-weight-bold, 700) !important;
margin: 0 0 0.5rem 0 !important;
color: var(--color-gentologie-white, white) !important;
font-family: var(--font-family-primary, serif) !important;
}
.membership-badge {
background: rgba(255, 255, 255, 0.2) !important;
padding: var(--spacing-xs, 0.25rem) var(--spacing-small, 0.75rem) !important;
font-size: var(--font-size-sm, 0.875rem) !important;
font-weight: var(--font-weight-medium, 500) !important;
color: var(--color-gentologie-white, white) !important;
backdrop-filter: blur(10px) !important;
border: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.membership-description {
margin: 0 0 1rem 0 !important;
position: relative !important;
z-index: 1 !important;
opacity: 0.9 !important;
color: var(--color-gentologie-white, white) !important;
line-height: var(--line-height-relaxed, 1.6) !important;
}
.membership-cta {
background: var(--color-gentologie-white, white) !important;
color: var(--color-gentologie-green, #004d28) !important;
padding: var(--spacing-small, 0.75rem) var(--spacing-medium, 1.5rem) !important;
text-decoration: none !important;
font-weight: var(--font-weight-medium, 500) !important;
position: relative !important;
z-index: 1 !important;
display: inline-block !important;
transition: all var(--transition-normal, 0.3s ease) !important;
box-shadow: var(--shadow-small, 0 2px 4px rgba(0,0,0,0.1)) !important;
font-size: var(--font-size-sm, 0.875rem) !important;
}
.membership-cta:hover {
transform: translateY(-2px) !important;
box-shadow: var(--shadow-medium, 0 4px 8px rgba(0,0,0,0.15)) !important;
color: var(--color-gentologie-green, #004d28) !important;
text-decoration: none !important;
}
/* CTA spécial pour non-abonnés */
.membership-none .membership-cta {
background: var(--color-gentologie-yellow, #f2c572) !important;
color: var(--color-gentologie-text, #333) !important;
font-weight: var(--font-weight-semibold, 600) !important;
}
.membership-none .membership-cta:hover {
color: var(--color-gentologie-text, #333) !important;
background: var(--color-gentologie-white, white) !important;
}
/* ========================================
CARTES DASHBOARD - VERSION EMPILÉE
======================================== */
.dashboard-cards-wrapper {
width: 100% !important;
margin: 0 0 2rem 0 !important;
padding: 0 !important;
display: block !important;
float: none !important;
clear: both !important;
}
.dashboard-card {
width: 100% !important;
float: none !important;
margin: 0 0 1rem 0 !important;
background: var(--color-gentologie-background-box, #f2e9d8) !important;
padding: 2rem !important;
border-left: 4px solid var(--color-gentologie-accent, #abc1b1) !important;
display: flex !important;
align-items: center !important;
cursor: pointer !important;
transition: all var(--transition-normal, 0.3s ease) !important;
box-shadow: var(--shadow-small, 0 2px 4px rgba(0,0,0,0.1)) !important;
border-top: none !important;
border-right: none !important;
border-bottom: none !important;
position: relative !important;
min-height: 100px !important;
}
.dashboard-card:last-child {
margin-bottom: 0 !important;
}
.dashboard-card:hover {
transform: translateY(-2px) !important;
border-left-color: var(--color-gentologie-green, #004d28) !important;
box-shadow: var(--shadow-hover, 0 4px 12px rgba(0, 77, 40, 0.15)) !important;
}
.card-number {
font-size: 3rem !important;
font-weight: var(--font-weight-bold, 700) !important;
color: var(--color-gentologie-green, #004d28) !important;
margin: 0 2rem 0 0 !important;
flex-shrink: 0 !important;
width: 100px !important;
text-align: center !important;
line-height: 1 !important;
font-family: var(--font-family-primary, serif) !important;
}
.dashboard-card-content {
flex: 1 !important;
}
.dashboard-card h3 {
color: var(--color-gentologie-title, #004d28) !important;
margin: 0 0 0.5rem 0 !important;
font-size: var(--font-size-xl, 1.25rem) !important;
font-weight: var(--font-weight-semibold, 600) !important;
line-height: 1.2 !important;
font-family: var(--font-family-secondary, serif) !important;
}
.dashboard-card p {
color: var(--color-gentologie-text-secondary, #4d4d4d) !important;
font-size: var(--font-size-base, 1rem) !important;
margin: 0 !important;
line-height: 1.3 !important;
}
/* ========================================
TABLEAUX
======================================== */
/* ========================================
ACTIONS RAPIDES - VERSION EMPILÉE
======================================== */
.quick-actions-wrapper {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
float: none !important;
clear: both !important;
}
.quick-actions-wrapper h2 {
color: var(--color-gentologie-title, #004d28) !important;
margin: 0 0 2rem 0 !important;
font-size: var(--font-size-2xl, 1.5rem) !important;
font-weight: var(--font-weight-semibold, 600) !important;
font-family: var(--font-family-primary, serif) !important;
}
.actions-buttons {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
}
.action-button {
width: 100% !important;
float: none !important;
margin: 0 0 1rem 0 !important;
background: var(--color-gentologie-white, white) !important;
border: 2px solid var(--color-gentologie-accent, #abc1b1) !important;
padding: 1.5rem !important;
text-decoration: none !important;
color: var(--color-gentologie-text, #333) !important;
text-align: left !important;
font-weight: var(--font-weight-medium, 500) !important;
transition: all var(--transition-normal, 0.3s ease) !important;
display: block !important;
box-sizing: border-box !important;
box-shadow: var(--shadow-small, 0 2px 4px rgba(0,0,0,0.1)) !important;
font-size: var(--font-size-base, 1rem) !important;
min-height: 70px !important;
line-height: 1.3 !important;
position: relative !important;
}
.action-button:last-child {
margin-bottom: 0 !important;
}
.action-button:hover {
background: var(--color-gentologie-green, #004d28) !important;
color: var(--color-gentologie-white, white) !important;
border-color: var(--color-gentologie-green, #004d28) !important;
transform: translateY(-2px) !important;
box-shadow: var(--shadow-medium, 0 4px 8px rgba(0,0,0,0.15)) !important;
text-decoration: none !important;
}
/* Flèche indicatrice */
.action-button::after {
content: '→' !important;
position: absolute !important;
right: 1.5rem !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-weight: bold !important;
transition: transform var(--transition-fast, 0.15s ease) !important;
}
.action-button:hover::after {
transform: translateY(-50%) translateX(4px) !important;
}
/* ========================================
ANIMATIONS
======================================== */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.gentologie-dashboard-wrapper > * {
animation: fadeIn 0.6s ease-out;
}
.dashboard-card:nth-child(1) { animation-delay: 0.1s; }
.dashboard-card:nth-child(2) { animation-delay: 0.2s; }
.dashboard-card:nth-child(3) { animation-delay: 0.3s; }
.dashboard-card:nth-child(4) { animation-delay: 0.4s; }
.animate-pulse {
animation: pulse 1s infinite;
}
.animate-bounce {
animation: bounce 0.6s ease-in-out;
}
.clicked {
transform: scale(0.95);
transition: transform 0.1s ease;
}
@keyframes pulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
25% { transform: translateY(-5px); }
75% { transform: translateY(-2px); }
}
/* ========================================
RESPONSIVE DESIGN
======================================== */
@media (max-width: 1024px) {
.woocommerce-account .woocommerce {
padding: 0 var(--spacing-lg, 1.5rem) !important;
}
.woocommerce-MyAccount-navigation {
width: 300px !important;
}
.woocommerce-account .entry-title,
.woocommerce-account .page-title,
.woocommerce-account h1.entry-title {
padding: 0 var(--spacing-lg, 1.5rem) !important;
}
.woocommerce-account .entry-content,
.woocommerce-account .page-content {
padding: 0 var(--spacing-lg, 1.5rem) !important;
}
}
@media (max-width: 768px) {
.woocommerce-account .woocommerce {
flex-direction: column !important;
padding: 0 var(--spacing-md, 1rem) !important;
}
.woocommerce-MyAccount-navigation {
width: 100% !important;
flex-shrink: 1 !important;
margin-bottom: 2rem !important;
position: static !important;
order: 1 !important;
}
.woocommerce-MyAccount-content {
order: 2 !important;
}
.gentologie-dashboard-wrapper {
padding: var(--spacing-medium, 1.5rem) !important;
}
.dashboard-card {
padding: var(--spacing-medium, 1.5rem) !important;
}
.card-number {
font-size: 2.5rem !important;
margin-right: 1rem !important;
width: 80px !important;
}
.membership-header {
flex-direction: column !important;
align-items: flex-start !important;
gap: var(--spacing-small, 0.75rem) !important;
}
.woocommerce-account .entry-title,
.woocommerce-account .page-title,
.woocommerce-account h1.entry-title {
padding: 0 var(--spacing-md, 1rem) !important;
font-size: var(--font-size-3xl, 1.875rem) !important;
}
.woocommerce-account .entry-content,
.woocommerce-account .page-content {
padding: 0 var(--spacing-md, 1rem) !important;
}
}
@media (max-width: 480px) {
.woocommerce-account {
padding: var(--spacing-md, 1rem) 0 !important;
}
.woocommerce-account .woocommerce {
padding: 0 var(--spacing-small, 0.75rem) !important;
}
.gentologie-dashboard-wrapper {
padding: var(--spacing-small, 0.75rem) !important;
}
.membership-status {
padding: var(--spacing-medium, 1.5rem) !important;
}
.dashboard-card {
padding: var(--spacing-small, 0.75rem) !important;
flex-direction: column !important;
text-align: center !important;
}
.card-number {
margin: 0 0 0.5rem 0 !important;
width: auto !important;
}
.action-button {
padding: 1rem !important;
min-height: 60px !important;
}
.woocommerce-account .entry-title,
.woocommerce-account .page-title,
.woocommerce-account h1.entry-title {
padding: 0 var(--spacing-small, 0.75rem) !important;
font-size: var(--font-size-2xl, 1.5rem) !important;
}
.woocommerce-account .entry-content,
.woocommerce-account .page-content {
padding: 0 var(--spacing-small, 0.75rem) !important;
}
}
/* ========================================
CORRECTIONS SPÉCIALES POUR L'ALIGNEMENT
======================================== */
/* Assurer l'alignement du titre sur toutes les pages */
body.woocommerce-account .site-main > .entry-header,
body.woocommerce-account .site-main > header {
max-width: 1400px !important;
margin: 0 auto !important;
padding: 0 2rem !important;
}
/* Correction pour les thèmes qui ajoutent des containers */
body.woocommerce-account .container,
body.woocommerce-account .site-content {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* Assurer que le contenu principal est aligné */
body.woocommerce-account .site-main {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
/* ========================================
SUPPRESSION ICÔNE BLEUE WOOCOMMERCE
======================================== */
/* Supprimer l'icône bleue des messages WooCommerce */
.woocommerce-account .woocommerce-info::before,
.woocommerce-account .woocommerce-message::before,
.woocommerce-account .woocommerce-error::before {
display: none !important;
}
/* ========================================
ÉTATS VISUELS POUR LES CARTES EXPIRÉES
======================================== */
.dashboard-card.expired .card-number {
color: var(--color-gentologie-red, #A62626) !important;
}
.dashboard-card.expired {
border-left-color: var(--color-gentologie-red, #A62626) !important;
}
.dashboard-card.expired:hover {
border-left-color: var(--color-gentologie-red, #A62626) !important;
} /* Tableau de bord Mon compte */
/* CSS pour blocs produits WordPress - 100% variables Gentologie */
.product-horizontal {
display: flex;
align-items: center;
padding: var(--spacing-medium);
border: 1px solid var(--color-gentologie-border);
background: var(--color-gentologie-background-box);
margin-bottom: var(--spacing-medium);
gap: var(--spacing-medium);
transition: var(--transition-normal);
font-family: var(--font-family-secondary);
}
.product-horizontal:hover {
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.product-horizontal .wp-block-columns {
margin: 0;
align-items: center;
width: 100%;
}
.product-horizontal .wp-block-column:first-child {
flex-basis: 120px !important;
flex-grow: 0;
flex-shrink: 0;
}
.product-horizontal .wp-block-image {
margin: 0;
}
.product-horizontal .wp-block-image img {
width: 100px;
height: 100px;
object-fit: cover;
border: 2px solid var(--color-gentologie-white);
box-shadow: var(--shadow-small);
transition: var(--transition-fast);
}
.product-horizontal .wp-block-image:hover img {
transform: scale(1.05);
box-shadow: var(--shadow-medium);
}
.product-horizontal .wp-block-column:nth-child(2) {
flex: 1;
padding-left: var(--spacing-medium);
}
.product-horizontal h3 {
margin: 0 0 var(--spacing-xs) 0;
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-title);
line-height: var(--line-height-tight);
font-family: var(--font-family-primary);
}
.product-horizontal .product-price {
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-text);
margin: 0;
font-family: var(--font-family-secondary);
}
.product-horizontal .wp-block-column:last-child {
flex-basis: auto;
text-align: right;
padding-left: var(--spacing-sm);
}
.product-horizontal .wp-block-button {
margin: 0;
}
.product-horizontal .wp-block-button__link {
background: var(--color-gentologie-background-button);
color: var(--color-gentologie-text-button);
border: 1px solid var(--color-gentologie-border-button);
padding: var(--spacing-sm) var(--spacing-medium);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: 1px;
transition: var(--transition-normal);
font-family: var(--font-family-secondary);
text-decoration: none;
}
.product-horizontal .wp-block-button__link:hover {
background: var(--color-gentologie-background-button-alt);
color: var(--color-gentologie-text-button-alt);
transform: translateY(-1px);
box-shadow: var(--shadow-small);
}
.product-horizontal .wp-block-button__link:focus {
outline: 2px solid var(--color-gentologie-focus);
outline-offset: 2px;
}
.product-horizontal .wp-block-button__link:active {
background: var(--color-gentologie-active);
transform: translateY(0);
}
/* Version responsive */
@media (max-width: var(--breakpoint-sm)) {
.product-horizontal {
flex-direction: column;
text-align: center;
gap: var(--spacing-medium);
padding: var(--spacing-medium) var(--spacing-sm);
}
.product-horizontal .wp-block-column:nth-child(2) {
padding-left: 0;
}
.product-horizontal .wp-block-column:last-child {
text-align: center;
padding-left: 0;
}
.product-horizontal .wp-block-image img {
width: 80px;
height: 80px;
}
}
/* Variantes pour différents niveaux membres */
.product-horizontal.member-quartz {
border-color: var(--color-gentologie-member-quartz);
}
.product-horizontal.member-sphene {
border-color: var(--color-gentologie-member-sphene);
}
.product-horizontal.member-jade {
border-color: var(--color-gentologie-member-jade);
}
.product-horizontal.member-emerald {
border-color: var(--color-gentologie-member-emerald);
}
.product-horizontal.member-grandidierite {
border-color: var(--color-gentologie-member-grandidierite);
}
/* Version alternative avec fond différent */
.product-horizontal.alt-background {
background: var(--color-gentologie-background);
border-color: var(--color-gentologie-border-alt);
}
.product-horizontal.alt-background h3 {
color: var(--color-gentologie-title-alt);
}
.product-horizontal.alt-background .product-price {
color: var(--color-gentologie-text-alt);
} /* Blocs produits */
/* =====================================
Styles pour Cartes de Membre Wallet
Fichier: src/wallet-cards.css
===================================== */
/* Section principale */
.gentologie-wallet-card-section {
background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
padding: 32px;
margin: 24px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.gentologie-wallet-card-section h3 {
margin: 0 0 24px 0;
color: #1a202c;
font-size: 24px;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
}
/* Prévisualisation de la carte */
.wallet-card-preview {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 32px;
align-items: start;
}
@media (max-width: 768px) {
.wallet-card-preview {
grid-template-columns: 1fr;
gap: 24px;
}
}
/* Carte visuelle */
.card-visual {
background: linear-gradient(135deg, var(--member-color, #5c8569) 0%, color-mix(in srgb, var(--member-color, #5c8569) 80%, black) 100%);
padding: 24px;
color: white;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
position: relative;
overflow: hidden;
min-height: 320px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.card-visual::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 200px;
height: 200px;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}
.card-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 24px;
}
.card-logo .logo {
height: 32px;
width: auto;
filter: brightness(0) invert(1);
}
.card-level {
text-align: right;
}
.level-name {
display: block;
font-size: 20px;
font-weight: 700;
margin-bottom: 4px;
}
.level-desc {
display: block;
font-size: 12px;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.card-content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.member-info {
margin-bottom: 20px;
}
.member-name {
display: block;
font-size: 22px;
font-weight: 600;
margin-bottom: 8px;
}
.member-id {
display: block;
font-size: 14px;
opacity: 0.8;
font-family: 'Courier New', monospace;
letter-spacing: 1px;
}
.membership-dates {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-bottom: 20px;
}
.date-item {
text-align: center;
}
.date-label {
display: block;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 0.5px;
opacity: 0.7;
margin-bottom: 4px;
}
.date-value {
display: block;
font-size: 14px;
font-weight: 600;
}
.card-barcode {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
.barcode-placeholder {
width: 120px;
height: 20px;
background: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.8) 0px,
rgba(255, 255, 255, 0.8) 2px,
transparent 2px,
transparent 6px
);
}
/* Actions et boutons */
.wallet-actions {
display: flex;
flex-direction: column;
gap: 12px;
margin-bottom: 24px;
}
.wallet-actions button {
background: linear-gradient(135deg, #004d28 0%, #346947 100%);
color: white;
border: none;
padding: 16px 24px;
font-size: 16px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.wallet-actions button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 77, 40, 0.3);
}
.wallet-actions button:active {
transform: translateY(0);
}
.btn-generate-card {
background: linear-gradient(135deg, #000000 0%, #1a1a1a 100%) !important;
}
.btn-update-card {
background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%) !important;
}
.btn-email-card {
background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
}
/* Avantages de la carte */
.wallet-benefits {
background: rgba(255, 255, 255, 0.05);
padding: 20px;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.wallet-benefits h4 {
margin: 0 0 16px 0;
color: #1a202c;
font-size: 18px;
font-weight: 600;
}
.wallet-benefits ul {
list-style: none;
padding: 0;
margin: 0;
}
.wallet-benefits li {
padding: 8px 0;
font-size: 14px;
color: #4a5568;
display: flex;
align-items: center;
gap: 8px;
}
/* Promotion upgrade pour Quartz */
.gentologie-wallet-upgrade-promotion {
background: linear-gradient(135deg, #fef7cd 0%, #fde68a 100%);
padding: 32px;
margin: 24px 0;
border: 1px solid #f59e0b;
}
.upgrade-card {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 32px;
align-items: center;
}
@media (max-width: 768px) {
.upgrade-card {
grid-template-columns: 1fr;
gap: 24px;
}
}
.upgrade-content {
text-align: left;
}
.upgrade-icon {
font-size: 48px;
margin-bottom: 16px;
}
.upgrade-content h4 {
margin: 0 0 12px 0;
color: #92400e;
font-size: 24px;
font-weight: 700;
}
.upgrade-content p {
color: #92400e;
font-size: 16px;
margin-bottom: 20px;
line-height: 1.6;
}
.upgrade-features {
margin: 20px 0;
}
.upgrade-features .feature {
padding: 8px 0;
color: #92400e;
font-size: 14px;
font-weight: 500;
}
.btn-upgrade-premium {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: white;
padding: 16px 32px;
text-decoration: none;
font-weight: 600;
display: inline-block;
transition: all 0.3s ease;
}
.btn-upgrade-premium:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(245, 158, 11, 0.3);
color: white;
text-decoration: none;
}
/* Carte d'exemple */
.upgrade-preview {
display: flex;
justify-content: center;
align-items: center;
}
.sample-card {
background: linear-gradient(135deg, #83a38c 0%, #5c8569 100%);
padding: 20px;
color: white;
width: 240px;
height: 150px;
position: relative;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
justify-content: space-between;
}
.sample-header {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 12px;
}
.sample-logo {
font-weight: 700;
}
.sample-level {
font-size: 10px;
opacity: 0.8;
}
.sample-name {
font-size: 16px;
font-weight: 600;
margin: 8px 0;
}
.sample-id {
font-size: 12px;
opacity: 0.8;
font-family: 'Courier New', monospace;
}
.sample-barcode {
height: 12px;
background: repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.8) 0px,
rgba(255, 255, 255, 0.8) 1px,
transparent 1px,
transparent 3px
);
margin-top: 8px;
}
/* Shortcode styles */
.wallet-card-shortcode {
display: flex;
gap: 12px;
align-items: center;
justify-content: center;
margin: 20px 0;
}
.wallet-card-shortcode.style-inline {
display: inline-flex;
margin: 0;
}
.wallet-btn {
background: none;
border: none;
cursor: pointer;
transition: transform 0.2s ease;
}
.wallet-btn:hover {
transform: scale(1.05);
}
.wallet-btn img {
height: 50px;
width: auto;
}
/* États de chargement */
.generating {
opacity: 0.6;
pointer-events: none;
position: relative;
}
.generating::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border: 2px solid #ffffff;
border-top: 2px solid transparent;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
/* Notifications */
.wallet-notification {
position: fixed;
top: 20px;
right: 20px;
background: #10b981;
color: white;
padding: 16px 24px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
z-index: 9999;
font-weight: 600;
animation: slideInNotification 0.3s ease-out;
}
.wallet-notification.error {
background: #ef4444;
}
@keyframes slideInNotification {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Responsive adjustments */
@media (max-width: 480px) {
.gentologie-wallet-card-section {
padding: 20px;
margin: 16px 0;
}
.card-visual {
padding: 20px;
min-height: 280px;
}
.wallet-actions button {
padding: 14px 20px;
font-size: 14px;
}
.member-name {
font-size: 18px;
}
.level-name {
font-size: 16px;
}
.membership-dates {
grid-template-columns: 1fr;
gap: 12px;
}
} /* Cartes wallet/abonnements */
/* admin-metaboxes.css - Version corrigée pour Gentologie
* Gentologie - Styles admin pour les métaboxes WooCommerce
* @version 2.0.0
*/
/* Configuration rapide des variations */
.magazine-quick-config {
background: #f9f9f9;
padding: 15px;
border: 1px solid #ddd;
margin: 10px 0;
border-radius: 5px;
}
.magazine-quick-config h4 {
margin-top: 0;
margin-bottom: 10px;
color: #333;
}
.magazine-quick-config .button {
margin-right: 10px;
margin-bottom: 5px;
}
/* Configuration rapide variations */
.gentologie-quick-config {
background: #f9f9f9;
padding: 15px;
border: 1px solid #ddd;
margin: 10px 0;
border-radius: 5px;
}
.gentologie-quick-config h4 {
margin: 0 0 10px 0;
color: #333;
}
.gentologie-quick-config .button {
margin-right: 10px;
margin-bottom: 5px;
}
.variation-type-indicator {
border-radius: 3px;
font-size: 13px;
line-height: 1.4;
}
/* Indicateur de type de variation */
.variation-type-indicator {
padding: 5px 10px;
margin: 5px 0;
border-radius: 3px;
font-size: 13px;
line-height: 1.4;
}
/* Métaboxes */
#event_details .form-table,
#magazine_details .form-table {
margin-top: 10px;
}
#event_details .form-table th,
#magazine_details .form-table th {
width: 200px;
padding: 10px;
}
#event_details .form-table td,
#magazine_details .form-table td {
padding: 10px;
}
#event_details .form-table .description,
#magazine_details .form-table .description {
font-style: italic;
color: #666;
margin-top: 5px;
}
/* Champs spécifiques page magazines */
.gentologie-magazines-page-specific-fields {
background: #e3f2fd;
border-left: 3px solid #2196f3;
padding: 15px;
margin: 15px 0;
}
.gentologie-magazines-page-specific-fields h3 {
color: #1976d2;
margin-top: 0 !important;
padding-top: 20px;
border-top: 1px solid #eee;
}
.gentologie-magazines-page-specific-fields .form-field {
margin-bottom: 15px;
}
.gentologie-magazines-page-specific-fields .form-field label {
font-weight: 600;
}
.gentologie-magazines-page-specific-fields .woocommerce-help-tip {
color: #2196f3;
}
/* Notifications */
.gentologie-admin-notice {
position: relative;
padding: 15px;
margin: 15px 0;
}
.gentologie-admin-notice ul {
margin: 10px 0;
padding-left: 20px;
}
.gentologie-admin-notice ul li {
margin: 5px 0;
}
/* checkout-adresses.css
* Gentologie
* version 2.0.0
*/
/* Message d'information */
.gentologie-checkout-info {
background: #e7f3ff;
border: 1px solid #b3d9ff;
border-radius: 6px;
padding: 1rem;
margin-bottom: 2rem;
}
.gentologie-checkout-info h4 {
margin: 0 0 0.5rem 0;
color: #0056b3;
display: flex;
align-items: center;
}
.gentologie-checkout-info h4 i {
margin-right: 0.5rem;
}
.gentologie-checkout-info p {
margin: 0;
color: #333;
line-height: 1.6;
}
/* Sections d'adresse */
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
background: #f8f9fa;
padding: 2rem;
border-radius: 8px;
margin-bottom: 2rem;
border: 1px solid #e9ecef;
position: relative;
}
.woocommerce-billing-fields::before,
.woocommerce-shipping-fields::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
border-radius: 8px 8px 0 0;
}
.woocommerce-billing-fields::before {
background: linear-gradient(90deg, #004d28, #006d39);
}
.woocommerce-shipping-fields::before {
background: linear-gradient(90deg, #0056b3, #007bff);
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
color: #333;
font-size: 1.3rem;
font-weight: 600;
margin-bottom: 1.5rem;
display: flex;
align-items: center;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e9ecef;
}
.woocommerce-billing-fields h3::before {
content: '\f543';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-right: 0.75rem;
color: #004d28;
font-size: 1.2rem;
}
.woocommerce-shipping-fields h3::before {
content: '\f0d1';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-right: 0.75rem;
color: #0056b3;
font-size: 1.2rem;
}
/* Checkbox pour expédier à une autre adresse */
.woocommerce-additional-fields .ship-to-different-address {
background: #fff3cd;
border: 1px solid #ffeaa7;
border-radius: 6px;
padding: 1rem;
margin: 1.5rem 0;
}
.ship-to-different-address label {
font-weight: 600;
color: #856404;
display: flex;
align-items: center;
}
.ship-to-different-address label::before {
content: '\f06a';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-right: 0.5rem;
color: #ffc107;
}
.ship-to-different-address input[type="checkbox"] {
margin-right: 0.5rem;
transform: scale(1.2);
}
/* Animation pour les champs d'expédition */
.shipping_address {
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive Tablette */
@media (max-width: 768px) {
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
padding: 1.5rem;
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
font-size: 1.1rem;
}
}
/* ========================================
BREAKPOINT 600px - MOBILE MOYEN
======================================== */
@media (max-width: 600px) {
.gentologie-checkout-info {
padding: 0.75rem;
}
.gentologie-checkout-info h4 {
font-size: 0.95rem;
flex-direction: column;
align-items: flex-start;
}
.gentologie-checkout-info h4 i {
margin-bottom: 0.25rem;
}
.gentologie-checkout-info p {
font-size: 0.9rem;
}
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
padding: 1.25rem;
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
font-size: 1rem;
flex-direction: column;
align-items: flex-start;
}
.woocommerce-billing-fields h3::before,
.woocommerce-shipping-fields h3::before {
margin-bottom: 0.5rem;
}
.ship-to-different-address {
padding: 0.75rem;
}
.ship-to-different-address label {
font-size: 0.9rem;
}
}
/* Responsive Petit Mobile */
@media (max-width: 480px) {
.gentologie-checkout-info {
padding: 0.5rem;
}
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
padding: 1rem;
}
.woocommerce-billing-fields h3,
.woocommerce-shipping-fields h3 {
font-size: 0.9rem;
}
}
/**
* password-security.css
* Gentologie - Sécurité des mots de passe WooCommerce
* @version 2.1.0 - 100% variables CSS Gentologie
*/
.gentologie-password-wrapper {
position: relative;
display: block;
}
.gentologie-password-toggle {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-gentologie-text-secondary);
z-index: 999;
padding: var(--spacing-xs);
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
transition: all var(--transition-fast);
border-radius: var(--radius-sm);
border: 1px solid transparent;
}
.gentologie-password-toggle:hover {
color: var(--color-gentologie-green);
background-color: var(--color-gentologie-background-box);
border-color: var(--color-gentologie-border);
}
.gentologie-password-wrapper input {
padding-right: 50px !important;
}
.gentologie-password-requirements {
margin-top: var(--spacing-sm);
padding: var(--spacing-md);
background-color: var(--color-gentologie-background-box);
border: 1px solid var(--color-gentologie-border);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
box-shadow: var(--shadow-small);
}
.gentologie-password-requirements strong {
display: flex;
align-items: center;
margin-bottom: var(--spacing-sm);
color: var(--color-gentologie-text);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
}
.gentologie-password-requirements .req-item {
margin: var(--spacing-xs) 0;
padding: var(--spacing-xs) 0;
transition: all var(--transition-fast);
font-weight: var(--font-weight-medium);
display: flex;
align-items: center;
}
.gentologie-password-requirements .req-item::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
margin-right: var(--spacing-xs);
width: 14px;
text-align: center;
font-size: var(--font-size-xs);
}
.gentologie-password-requirements .req-item.valid {
color: var(--color-success);
}
.gentologie-password-requirements .req-item.valid::before {
content: '\f00c';
color: var(--color-success);
}
.gentologie-password-requirements .req-item.invalid {
color: var(--color-error);
}
.gentologie-password-requirements .req-item.invalid::before {
content: '\f00d';
color: var(--color-error);
}
.gentologie-password-strength {
margin-top: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
display: none;
transition: all var(--transition-fast);
align-items: center;
}
/* ✅ 100% VARIABLES - AUCUNE COULEUR HARDCODÉE */
.gentologie-password-strength.weak {
background-color: var(--color-error-light);
border: 1px solid var(--color-error-border);
color: var(--color-error);
display: flex;
}
.gentologie-password-strength.medium {
background-color: var(--color-warning-light);
border: 1px solid var(--color-warning-border);
color: var(--color-warning);
display: flex;
}
.gentologie-password-strength.strong {
background-color: var(--color-success-light);
border: 1px solid var(--color-success-border);
color: var(--color-success);
display: flex;
}
/**
* Thank You / Order Confirmation Page Styles
* Gentologie Theme - Style épuré professionnel
*
* @package Gentologie
* @version 1.4.0 - Style WooCommerce standard amélioré
*/
/* === WRAPPER PRINCIPAL === */
.gentologie-order-confirmation-wrapper {
max-width: var(--content-max-width); /* 1200px - très large */
margin: var(--spacing-xxl) auto;
padding: var(--spacing-xl) var(--spacing-md);
background: var(--color-gentologie-white);
}
/* === SECTIONS SUCCÈS ET ÉCHEC === */
.order-confirmation-success,
.order-confirmation-failed {
text-align: left;
}
/* === ICÔNES === */
.success-icon,
.failed-icon {
display: none; /* Au lieu de juste margin: 0 */
}
/* === SECTIONS SUCCÈS ET ÉCHEC === */
.order-confirmation-success,
.order-confirmation-failed {
text-align: left;
}
/* Masquer complètement l'icône SVG */
.order-confirmation-success > .success-icon,
.order-confirmation-failed > .failed-icon {
display: none !important;
margin: 0 !important;
height: 0 !important;
width: 0 !important;
}
/* === TITRES === */
.confirmation-title {
font-family: var(--font-family-primary);
font-size: var(--font-size-2xl);
color: var(--color-gentologie-green);
margin: 0 0 var(--spacing-lg);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-tight);
}
.failed-title {
color: var(--color-gentologie-red);
}
/* === MESSAGE DE CONFIRMATION === */
.confirmation-message {
font-size: var(--font-size-base);
color: var(--color-gentologie-text);
margin: 0 0 var(--spacing-xl);
padding: var(--spacing-md) var(--spacing-md) var(--spacing-md) var(--spacing-lg);
background: var(--color-gentologie-background);
border-left: 3px solid var(--color-gentologie-green);
line-height: var(--line-height-relaxed);
}
/* === BOX DÉTAILS COMMANDE (OVERVIEW) === */
.order-details-box {
background: transparent;
border: none;
padding: 0;
margin: 0 0 var(--spacing-xxl);
}
.order-details-box h2 {
display: none; /* Le titre sera géré par le message de confirmation */
}
/* ========================================
LISTE OVERVIEW - FORMAT VERTICAL AVEC 2 LIGNES
======================================== */
.order-overview {
list-style: none;
padding: 0;
margin: 0 0 var(--spacing-xl);
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 colonnes = ligne 1 : ORDER/DATE/EMAIL, ligne 2 : TOTAL/PAYMENT */
gap: var(--spacing-lg) var(--spacing-xl);
row-gap: var(--spacing-lg);
}
/* Supprimer les pseudo-éléments */
.order-overview::before,
.order-overview::after {
display: none !important;
content: none !important;
}
.order-overview li {
display: flex;
flex-direction: column;
gap: var(--spacing-xs);
padding: 0;
border: none;
}
/* Supprimer aussi les pseudo-éléments sur les li */
.order-overview li::before,
.order-overview li::after {
display: none !important;
content: none !important;
}
.order-overview li:first-child {
padding-top: 0;
}
.order-overview .label {
font-weight: var(--font-weight-normal);
color: var(--color-gentologie-text-secondary);
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: 1px;
}
.order-overview .value {
text-align: left;
}
.order-overview .value strong {
color: var(--color-gentologie-text);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
}
/* Support pour les classes WooCommerce par défaut */
.woocommerce ul.order_details li strong {
font-size: var(--font-size-sm) !important;
}
.woocommerce ul.order_details li {
padding: 0;
margin-right: 0 !important;
}
/* === BOUTONS D'ACTION - Spécificité ULTRA MAXIMALE === */
.confirmation-actions {
display: flex;
gap: var(--spacing-md);
justify-content: flex-start;
align-items: center;
margin-top: var(--spacing-xxl);
flex-wrap: wrap;
}
/* Forcer les styles avec spécificité maximale + !important */
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button,
.woocommerce-order-received .confirmation-actions a.button.button {
padding: var(--spacing-small) var(--spacing-lg) !important;
border-radius: var(--radius-sm) !important;
text-decoration: none !important;
font-weight: var(--font-weight-semibold) !important;
font-size: var(--font-size-base) !important;
transition: var(--transition-normal) !important;
display: inline-block !important;
cursor: pointer !important;
text-align: center !important;
line-height: 1.5 !important;
}
/* Bouton primaire */
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button-primary,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button-primary,
.woocommerce-order-received .confirmation-actions a.button.button-primary {
background: var(--color-gentologie-background-button) !important;
color: var(--color-gentologie-text-button) !important;
border: var(--border-width-normal) solid var(--color-gentologie-border-button) !important;
}
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button-primary:hover,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button-primary:hover,
.woocommerce-order-received .confirmation-actions a.button.button-primary:hover {
background: var(--color-gentologie-green-dark) !important;
border-color: var(--color-gentologie-green-dark) !important;
color: var(--color-gentologie-text-button) !important;
}
/* Bouton secondaire */
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button-secondary,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button-secondary,
.woocommerce-order-received .confirmation-actions a.button.button-secondary {
background: var(--color-gentologie-background-button-alt) !important;
border: var(--border-width-normal) solid var(--color-gentologie-border-button) !important;
color: var(--color-gentologie-text-button-alt) !important;
}
body.woocommerce-order-received .gentologie-order-confirmation-wrapper .confirmation-actions a.button-secondary:hover,
body.woocommerce-order-received .woocommerce .confirmation-actions a.button-secondary:hover,
.woocommerce-order-received .confirmation-actions a.button.button-secondary:hover {
background: var(--color-gentologie-background-button) !important;
color: var(--color-gentologie-text-button) !important;
border-color: var(--color-gentologie-border-button) !important;
}
/* === COMMANDE ÉCHOUÉE === */
.order-confirmation-failed .confirmation-message {
background: var(--color-error-light);
border-left-color: var(--color-gentologie-red);
color: var(--color-gentologie-red);
}
/* === PAS DE COMMANDE TROUVÉE === */
.order-confirmation-no-order {
text-align: center;
padding: var(--spacing-xxl) var(--spacing-md);
}
/* ========================================
SECTIONS WOOCOMMERCE STANDARD
======================================== */
/* === DÉTAILS DE COMMANDE (TABLEAU PRODUITS) === */
.woocommerce-order-details {
margin: var(--spacing-xxl) 0;
}
.woocommerce-order-details__title {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
color: var(--color-gentologie-text);
margin: 0 0 var(--spacing-md);
font-weight: var(--font-weight-semibold);
}
.woocommerce-table--order-details {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--spacing-lg);
}
.woocommerce-table--order-details thead {
background: var(--color-gentologie-background-box);
}
.woocommerce-table--order-details thead th {
color: var(--color-gentologie-text);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
font-size: var(--font-size-xs);
letter-spacing: 0.5px;
padding: var(--spacing-small) var(--spacing-md);
text-align: left;
border-bottom: var(--border-width-thin) solid var(--color-gentologie-accent);
}
.woocommerce-table--order-details thead th:last-child {
text-align: right;
}
.woocommerce-table--order-details tbody td {
padding: var(--spacing-md);
text-align: left;
border-bottom: var(--border-width-thin) solid var(--color-gentologie-accent);
color: var(--color-gentologie-text);
}
.woocommerce-table--order-details tbody tr:last-child td {
border-bottom: var(--border-width-normal) solid var(--color-gentologie-green);
}
.woocommerce-table--order-details tfoot {
background: var(--color-gentologie-background-box);
}
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
font-weight: var(--font-weight-semibold);
border-bottom: var(--border-width-thin) solid var(--color-gentologie-accent);
padding: var(--spacing-small) var(--spacing-md);
color: var(--color-gentologie-text);
}
.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-table--order-details tfoot tr:last-child td {
border-bottom: none;
}
/* Ligne Total */
.woocommerce-table--order-details .order-total th,
.woocommerce-table--order-details .order-total td {
font-size: var(--font-size-lg);
color: var(--color-gentologie-text);
font-weight: var(--font-weight-bold);
padding: var(--spacing-md);
}
/* Nom du produit en lien */
.woocommerce-table--order-details .woocommerce-table__product-name a {
color: var(--color-gentologie-green);
text-decoration: none;
font-weight: var(--font-weight-normal);
}
.woocommerce-table--order-details .woocommerce-table__product-name a:hover {
text-decoration: underline;
}
/* Quantité */
.woocommerce-table--order-details .product-quantity {
color: var(--color-gentologie-text-secondary);
}
/* Prix à droite */
.woocommerce-table--order-details .product-total,
.woocommerce-table--order-details thead th:last-child,
.woocommerce-table--order-details tfoot td {
text-align: right;
font-weight: var(--font-weight-semibold);
}
.woocommerce-table--order-details tfoot th {
text-align: left;
}
/* Bouton Invoice/Facture */
.woocommerce-table--order-details .woocommerce-button {
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
border: none;
padding: var(--spacing-sm) var(--spacing-md);
border-radius: var(--radius-sm);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
cursor: pointer;
transition: var(--transition-normal);
text-decoration: none;
display: inline-block;
}
.woocommerce-table--order-details .woocommerce-button:hover {
background: var(--color-gentologie-green-dark);
}
/* === ADRESSES CLIENT === */
.woocommerce-customer-details {
margin: var(--spacing-xxl) 0;
}
.woocommerce-customer-details > h2 {
font-family: var(--font-family-primary);
font-size: var(--font-size-xl);
color: var(--color-gentologie-text);
margin: 0 0 var(--spacing-lg);
font-weight: var(--font-weight-semibold);
}
.woocommerce .woocommerce-customer-details address {
border: none !important;
}
/* Supprimer les pseudo-éléments sur la section colonnes */
.woocommerce-columns::before,
.woocommerce-columns::after {
display: none !important;
content: none !important;
}
.woocommerce-columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--spacing-xl);
}
/* Supprimer les pseudo-éléments sur chaque colonne */
.woocommerce-column::before,
.woocommerce-column::after {
display: none !important;
content: none !important;
}
.woocommerce-column {
background: transparent !important;
border: none;
border-radius: var(--radius-sm);
padding: var(--spacing-md);
}
.woocommerce-customer-details .woocommerce-column__title {
font-family: var(--font-family-primary);
font-size: var(--font-size-base);
color: var(--color-gentologie-text);
margin: 0 0 var(--spacing-sm);
font-weight: var(--font-weight-semibold);
}
.woocommerce-column address {
font-style: normal;
line-height: var(--line-height-relaxed);
color: var(--color-gentologie-text);
font-size: var(--font-size-sm);
}
.woocommerce-column address p {
margin: var(--spacing-xs) 0;
}
/* === RESPONSIVE === */
@media (max-width: 768px) {
.gentologie-order-confirmation-wrapper {
padding: var(--spacing-lg) var(--spacing-small);
margin: var(--spacing-lg) auto;
}
.confirmation-title {
font-size: var(--font-size-xl);
margin-bottom: var(--spacing-md);
}
.confirmation-message {
font-size: var(--font-size-sm);
padding: var(--spacing-small) var(--spacing-small) var(--spacing-small) var(--spacing-md);
margin-bottom: var(--spacing-lg);
}
.order-overview {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-md);
}
.order-overview .value strong {
font-size: var(--font-size-sm);
}
.confirmation-actions {
flex-direction: column;
gap: var(--spacing-small);
margin-top: var(--spacing-lg);
}
.confirmation-actions .button {
width: 100%;
}
/* Tables responsive */
.woocommerce-table--order-details {
font-size: var(--font-size-sm);
}
.woocommerce-table--order-details thead th,
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
padding: var(--spacing-sm);
}
.woocommerce-columns {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
}
@media (max-width: 480px) {
.gentologie-order-confirmation-wrapper {
padding: var(--spacing-md) var(--spacing-sm);
}
.confirmation-title {
font-size: var(--font-size-lg);
}
.order-overview {
grid-template-columns: 1fr;
}
.woocommerce-table--order-details {
font-size: var(--font-size-xs);
}
.woocommerce-table--order-details thead th,
.woocommerce-table--order-details tbody td,
.woocommerce-table--order-details tfoot th,
.woocommerce-table--order-details tfoot td {
padding: var(--spacing-xs) var(--spacing-sm);
}
}
/* === PRINT STYLES === */
@media print {
.confirmation-actions,
.woocommerce-button {
display: none;
}
.gentologie-order-confirmation-wrapper {
margin: 0;
padding: var(--spacing-md);
}
.woocommerce-table--order-details thead {
background: #f0f0f0 !important;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
* {
page-break-inside: avoid;
}
}
/* ===========================================
SINGLE PRODUCT - GENTOLOGIE
Page produit e-commerce (pas un article!)
=========================================== */
/* ===========================================
LAYOUT PRINCIPAL
=========================================== */
.site-main {
background: var(--color-gentologie-background);
}
.gentologie-product-single {
max-width: 100%;
margin: 0;
padding: 0;
}
/* Container 2 colonnes */
.gentologie-product-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 80px;
max-width: 1400px;
margin: 0 auto;
padding: 60px 40px;
}
/* ===========================================
SURCHARGE ARTICLE.CSS POUR PRODUITS
=========================================== */
/* Forcer full width sur les pages produits */
body.single-product .article-meta-and-body {
width: 100% !important;
max-width: 100% !important;
flex: none !important;
}
/* Reset du container article si présent */
body.single-product article {
width: 100% !important;
max-width: 100% !important;
}
/* Reset des colonnes article */
body.single-product .entry-content,
body.single-product .post-content {
width: 100% !important;
max-width: 100% !important;
}
/* ===========================================
COLONNE GAUCHE - GALERIE D'IMAGES
=========================================== */
.gentologie-product-gallery {
position: sticky;
top: 120px;
height: fit-content;
}
.gentologie-product-gallery .woocommerce-product-gallery {
margin: 0;
}
.gentologie-product-gallery img {
width: 100%;
height: auto;
border: 2px solid var(--color-gentologie-green);
display: block;
}
/* Miniatures (si plusieurs images) */
.gentologie-product-gallery .flex-control-thumbs {
display: flex;
gap: 12px;
margin-top: 12px;
padding: 0;
list-style: none;
}
.gentologie-product-gallery .flex-control-thumbs li {
flex: 1;
margin: 0;
}
.gentologie-product-gallery .flex-control-thumbs li img {
cursor: pointer;
opacity: 0.6;
transition: opacity 0.3s;
border: 2px solid var(--color-gentologie-border);
}
.gentologie-product-gallery .flex-control-thumbs li img:hover,
.gentologie-product-gallery .flex-control-thumbs li.flex-active img {
opacity: 1;
border-color: var(--color-gentologie-green);
}
/* FORCER les images produits à être visibles */
.woocommerce-product-gallery img[data-src],
.woocommerce-product-gallery__image img,
.gentologie-product-gallery img {
opacity: 1 !important;
filter: none !important;
}
/* Cacher l'icône de loupe/zoom */
.woocommerce-product-gallery__trigger,
.woocommerce-product-gallery__trigger img,
.zoomImg,
.zoom-icon,
body.single-product .woocommerce-product-gallery__trigger {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
/* ===========================================
COLONNE DROITE - INFOS PRODUIT
=========================================== */
.gentologie-product-info {
display: flex;
flex-direction: column;
gap: 24px;
}
/* Titre */
.gentologie-product-title {
font-family: var(--font-family-primary);
font-size: 2rem;
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title);
margin: 0;
line-height: 1.2;
}
/* Description courte */
.gentologie-product-excerpt {
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-gentologie-text);
}
.gentologie-product-excerpt p {
margin: 0 0 16px 0;
}
.gentologie-product-excerpt p:last-child {
margin-bottom: 0;
}
/* Prix (produits normaux) */
.gentologie-product-price {
font-size: 2rem;
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-green);
}
.gentologie-product-price del {
opacity: 0.5;
font-size: 1.5rem;
margin-right: 12px;
}
/* ===========================================
BOUTON AFFILIÉ
=========================================== */
.gentologie-affiliate-button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 12px;
padding: 18px 48px;
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
text-decoration: none;
border: 2px solid var(--color-gentologie-green);
transition: all 0.3s ease;
max-width: fit-content;
}
.gentologie-affiliate-button:hover {
background: transparent;
color: var(--color-gentologie-green);
transform: translateY(-3px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
/* ===========================================
FORMULAIRE PANIER (produits normaux)
=========================================== */
.gentologie-product-info .cart {
display: flex;
flex-wrap: wrap;
gap: 16px;
align-items: center;
}
.gentologie-product-info .quantity {
display: flex;
align-items: center;
gap: 8px;
}
.gentologie-product-info .quantity label {
font-weight: var(--font-weight-semibold);
color: var(--color-gentologie-text);
}
.gentologie-product-info .quantity input {
width: 80px;
padding: 12px;
border: 2px solid var(--color-gentologie-border);
text-align: center;
font-size: 1rem;
font-weight: var(--font-weight-semibold);
}
.gentologie-product-info .quantity input:focus {
outline: none;
border-color: var(--color-gentologie-green);
}
.gentologie-product-info .single_add_to_cart_button {
padding: 18px 48px;
background: var(--color-gentologie-green);
color: var(--color-gentologie-text-alt);
border: 2px solid var(--color-gentologie-green);
font-size: 1.125rem;
font-weight: var(--font-weight-bold);
cursor: pointer;
transition: all 0.3s ease;
}
.gentologie-product-info .single_add_to_cart_button:hover {
background: transparent;
color: var(--color-gentologie-green);
transform: translateY(-3px);
}
/* ===========================================
DESCRIPTION COMPLÈTE
=========================================== */
.gentologie-product-description {
max-width: 1400px;
margin: 0 auto 80px;
padding: 60px 40px;
background: var(--color-gentologie-background);
}
.gentologie-product-description h2 {
font-family: var(--font-family-primary);
font-size: 2rem;
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title);
margin: 0 0 32px 0;
padding-bottom: 16px;
border-bottom: 3px solid var(--color-gentologie-green);
}
.gentologie-product-description p {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gentologie-text);
margin: 0 0 20px 0;
}
.gentologie-product-description ul,
.gentologie-product-description ol {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-gentologie-text);
margin: 0 0 20px 0;
padding-left: 24px;
}
.gentologie-product-description li {
margin-bottom: 12px;
}
.gentologie-product-description strong {
color: var(--color-gentologie-title);
font-weight: var(--font-weight-bold);
}
/* ===========================================
DESCRIPTION (dans la colonne droite)
=========================================== */
.gentologie-product-description-inline {
margin-top: 40px;
padding-top: 40px;
border-top: 2px solid var(--color-gentologie-border);
}
.gentologie-product-description-inline h2 {
font-family: var(--font-family-primary);
font-size: 1.75rem;
font-weight: var(--font-weight-bold);
color: var(--color-gentologie-title);
margin: 0 0 24px 0;
}
.gentologie-product-description-inline p {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gentologie-text);
margin: 0 0 16px 0;
}
.gentologie-product-description-inline ul,
.gentologie-product-description-inline ol {
font-size: 1rem;
line-height: 1.7;
color: var(--color-gentologie-text);
margin: 0 0 16px 0;
padding-left: 24px;
}
.gentologie-product-description-inline li {
margin-bottom: 8px;
}
.gentologie-product-description-inline strong {
color: var(--color-gentologie-title);
font-weight: var(--font-weight-bold);
}
/* Supprimer l'ancienne description en bas */
.gentologie-product-description {
display: none !important;
}
/* ===========================================
CACHER ÉLÉMENTS WOOCOMMERCE PAR DÉFAUT
=========================================== */
/* Cacher les tabs WooCommerce */
.woocommerce-tabs {
display: none !important;
}
/* Cacher "Produits similaires" */
.related.products {
display: none !important;
}
/* Cacher breadcrumbs WooCommerce */
.woocommerce-breadcrumb {
display: none !important;
}
/* Cacher étoiles de notation */
.woocommerce-product-rating {
display: none !important;
}
/* ===========================================
RESPONSIVE
=========================================== */
@media (max-width: 1200px) {
.gentologie-product-wrapper {
gap: 60px;
padding: 40px 30px;
}
.gentologie-product-description {
padding: 40px 30px;
}
}
@media (max-width: 968px) {
.gentologie-product-wrapper {
grid-template-columns: 1fr;
gap: 40px;
padding: 40px 20px;
}
.gentologie-product-gallery {
position: static;
}
.gentologie-affiliate-button,
.gentologie-product-info .single_add_to_cart_button {
width: 100%;
}
.gentologie-product-description {
margin-bottom: 40px;
padding: 40px 20px;
}
}
@media (max-width: 640px) {
.gentologie-product-title {
font-size: 1.75rem;
}
.gentologie-product-excerpt {
font-size: 1rem;
}
.gentologie-product-price {
font-size: 1.5rem;
}
.gentologie-affiliate-button,
.gentologie-product-info .single_add_to_cart_button {
padding: 14px 32px;
font-size: 1rem;
}
.gentologie-product-description h2 {
font-size: 1.5rem;
}
.gentologie-product-description p,
.gentologie-product-description ul,
.gentologie-product-description ol {
font-size: 1rem;
}
}
/* ===========================================
FORCER SUPPRESSION ÉLÉMENTS ARTICLE
=========================================== */
.article-header,
.article-thumbnail{
display: none !important;
}
.gentologie-club-ad-box .full-width-ad,
.div-gpt-ad-1758131807800-0 {
display: none !important;
}
.related-posts-widget {
display: none !important;
}
/* Cacher toutes les pubs sur les pages produits */
body.single-product ins.adsbygoogle,
body.single-product [id*="google_ads"],
body.single-product [id*="div-gpt-ad"] {
display: none !important;
}
/* Auteur */
.single-product .author,
.single-product .posted_in,
.single-product .byline,
.single-product .entry-meta,
.single-product .vcard,
body.single-product .author,
body.single-product .byline,
.author-box{
display: none !important;
}
/* Date de publication */
.single-product .posted-on,
.single-product .entry-date,
.single-product time,
body.single-product .posted-on,
body.single-product .entry-date {
display: none !important;
}
/* Breadcrumbs */
.woocommerce-breadcrumb,
.breadcrumb,
body.single-product .breadcrumb {
display: none !important;
}
/* ========================================
NOTES IMPORTANTES
========================================
⚠️ NE PAS ajouter de CSS directement dans ce fichier
⚠️ Tout le CSS doit être dans les fichiers importés
⚠️ L'ordre des imports est important pour la cascade CSS
⚠️ WooCommerce doit toujours être en dernier
Pour ajouter du nouveau CSS :
1. Créer un nouveau fichier dans /src/css/
2. Ajouter l'import ici dans la bonne catégorie
3. Utiliser les variables définies dans variables.css
======================================== */
/* Mis à jour le 13 novembre 2025 */ /* components.css ← boîte auteur, barre de lecture, etc. - VERSION CORRIGÉE */
/* ========================================
AUTHOR BOX
======================================== */
.author-box {
padding: 1rem;
margin: 20px 0;
display: flex;
align-items: center;
color: var(--color-title);
width: 100%;
box-sizing: border-box;
}
.author-link {
display: flex;
align-items: center;
text-decoration: none;
color: inherit;
width: 100%; /* AJOUTÉ */
}
.author-photo {
width: 55px;
height: 55px;
object-fit: cover;
margin-right: 15px;
flex-shrink: 0; /* AJOUTÉ pour empêcher la compression */
}
.author-name {
font-weight: bold;
font-size: 1.1rem;
margin-bottom: 0.25rem; /* AJOUTÉ pour l'espacement */
}
.author-position {
font-style: italic;
font-size: 0.95rem;
margin-top: 3px;
color: var(--color-text-secondary); /* AJOUTÉ pour différencier */
}
.author-box img {
margin-bottom: 0;
}
.author-info {
display: flex;
flex-direction: column;
flex: 1; /* AJOUTÉ pour prendre l'espace restant */
}
/* ========================================
AUTHOR BOX RESPONSIVE
======================================== */
@media (max-width: 768px) {
.author-box {
padding: 0.75rem;
margin: 15px 0;
}
.author-photo {
width: 45px;
height: 45px;
margin-right: 12px;
}
.author-name {
font-size: 1rem;
}
.author-position {
font-size: 0.85rem;
}
}
@media (max-width: 480px) {
.author-box {
padding: 0.5rem;
flex-direction: column;
text-align: center;
}
.author-link {
flex-direction: column;
text-align: center;
}
.author-photo {
margin-right: 0;
margin-bottom: 0.5rem;
width: 50px;
height: 50px;
}
.author-info {
align-items: center;
}
}
/* ========================================
CORRECTION NOTE
======================================== */
.correction-note,
.correction-note p {
font-size: 0.8rem;
margin-top: 2rem;
padding-top: 1rem;
border-top: none;
color: var(--color-text-secondary); /* AJOUTÉ */
}
.correction-note .correction-line {
width: 16.6667%;
height: 2px;
background-color: var(--color-gentologie-green);
margin-bottom: 1rem;
}
/* ========================================
READING PROGRESS BAR
======================================== */
#reading-progress-container {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 6px;
background: transparent;
z-index: 9999;
pointer-events: none; /* AJOUTÉ pour éviter les interactions */
}
#reading-progress-bar {
height: 6px;
background-color: var(--color-gentologie-green);
width: 0%;
transition: width 0.25s ease-out;
}
/* ========================================
READING PROGRESS BAR RESPONSIVE
======================================== */
@media (max-width: 768px) {
#reading-progress-container {
height: 4px; /* Plus fin sur mobile */
}
#reading-progress-bar {
height: 4px;
}
}
/* ========================================
COMPOSANTS SUPPLÉMENTAIRES
======================================== */
/* Navigation breadcrumb si utilisée */
.breadcrumb {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin-bottom: 1rem;
}
.breadcrumb a {
color: var(--color-gentologie-green);
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb-separator {
margin: 0 0.5rem;
color: var(--color-text-secondary);
}
/* Boutons de partage social si utilisés */
.social-share {
display: flex;
gap: 0.5rem;
margin: 1rem 0;
flex-wrap: wrap;
}
.social-share-button {
padding: 0.5rem 1rem;
border: 1px solid var(--color-border);
background: var(--color-background);
color: var(--color-text);
text-decoration: none;
font-size: 0.875rem;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.social-share-button:hover {
background: var(--color-gentologie-green);
color: var(--color-background);
border-color: var(--color-gentologie-green);
}
@media (max-width: 480px) {
.social-share {
justify-content: center;
}
.social-share-button {
flex: 1;
justify-content: center;
min-width: 0;
padding: 0.75rem 0.5rem;
}
}
/* Boîte d'information/alerte */
.info-box {
padding: 1rem;
margin: 1.5rem 0;
border-left: 4px solid var(--color-gentologie-green);
background: color-mix(in srgb, var(--color-gentologie-green) 5%, transparent);
}
.info-box.warning {
border-left-color: #ff9800;
background: rgba(255, 152, 0, 0.05);
}
.info-box.error {
border-left-color: #f44336;
background: rgba(244, 67, 54, 0.05);
}
.info-box p:first-child {
margin-top: 0;
}
.info-box p:last-child {
margin-bottom: 0;
}
/* Correction pour empêcher les débordements */
@media (max-width: 768px) {
.author-box,
.correction-note,
.social-share,
.info-box {
max-width: 100%;
overflow-x: hidden;
}
}