/*
Theme Name: Yi Worldwide
Theme URI: https://yi-worldwide.com
Author: Pablo Demailly Cortes & Romain Curdel
Description: Thème WordPress block theme (FSE) vitrine pour Yi Worldwide — Transport International. Design mobile-first moderne avec dark mode, animations JS, basé sur la charte graphique 2025. Édition WYSIWYG complète via l'éditeur de thème WordPress.
Version: 2.0.0
Requires at least: 6.0
Tested up to: 6.9.1
Requires PHP: 7.4
Tested up to PHP: 8.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: yi-worldwide
Tags: custom-menu, featured-images, translation-ready, editor-style, custom-colors, custom-header, custom-background, portfolio, business, one-column, full-width-template, block-theme, full-site-editing

Yi Worldwide est un thème WordPress moderne et élégant conçu selon la charte graphique 2025.
Il offre une expérience utilisateur exceptionnelle avec un design responsive et des fonctionnalités complètes d'édition via WordPress.
*/

/* ============================================
   YI WORLDWIDE - CHARTE GRAPHIQUE 2025
   ============================================
   POLICES : Bodoni 72 (titres), Tisa Pro (corps de texte).
   Web : Bodoni Moda et Lora en équivalent.
   COULEURS : Orange Gris Pastel #8C3C21 | Orange #CC9A89 | Orange Clair #F5F1E8
   | C9B9A5 (nuance) | Gris Foncé #212121
   ============================================ */

:root {
    /* Palette charte 2025 */
    --orange-gris-pastel: #8C3C21;
    --orange: #CC9A89;
    --orange-clair: #F5F1E8;
    --orange-gris-pastel-light: #C9B9A5;
    --gris-fonce: #212121;
    --white: #FFFFFF;
    --text-dark: #212121;
    --text-light: #5C5C5C;
    --bg-primary: #FFFFFF;
    --bg-secondary: #F5F1E8;
    --bg-tertiary: #FFFFFF;
    
    /* Typographie charte : Bodoni 72 (titres), Tisa Pro (corps) */
    --font-heading: 'Bodoni Moda', 'Bodoni 72', Bodoni, serif;
    --font-body: 'Lora', 'Tisa Pro', Georgia, serif;
    
    /* Tailles de base — lecture confortable (Tisa Pro) */
    --font-size-body: 1rem;
    --line-height-body: 1.7;
    --line-height-heading: 1.3;
    
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 6rem;
    --transition: all 0.3s ease;
}

/* Reset & Base — Charte graphique Yi Worldwide */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Images responsives (mobile first) */
img,
picture,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

/* Corps de texte : Tisa Pro (Lora web) — charte 2025 */
body {
    font-family: var(--font-body);
    font-size: var(--font-size-body);
    line-height: var(--line-height-body);
    color: var(--gris-fonce);
    background-color: var(--bg-primary);
    overflow-x: hidden;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: 400;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--spacing-md);
    width: 100%;
}

/* ============================================
   TYPOGRAPHIE
   ============================================ */

/* Titres : Bodoni 72 (Bodoni Moda web) — charte 2025 */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-heading h1,
.wp-block-heading h2,
.wp-block-heading h3,
.wp-block-heading h4,
.wp-block-heading h5,
.wp-block-heading h6 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: var(--line-height-heading);
    color: var(--gris-fonce);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.01em;
    text-transform: none;
}

/* Navigation links : pas d'uppercase */
.wp-block-navigation a,
.wp-block-navigation-item__content,
.wp-block-navigation .wp-block-navigation-item a {
    text-transform: none;
}

h1 {
    font-size: clamp(2.5rem, 5.5vw, 5rem);
    font-weight: 400;
}

h2 {
    font-size: clamp(2.25rem, 4.5vw, 4rem);
    font-weight: 400;
}

h3 {
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
}

h4 {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 400;
}

h5 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 400;
}

h6 {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    font-weight: 400;
}

p {
    margin-bottom: var(--spacing-sm);
    color: var(--gris-fonce);
    font-size: var(--font-size-body);
    font-family: var(--font-body);
}

.hero-description,
.construction-description {
    color: var(--text-light);
}

.lead {
    font-size: 1.25rem;
    line-height: var(--line-height-body);
    font-weight: 400;
    color: var(--gris-fonce);
    font-family: var(--font-body);
}

/* ============================================
   NAVIGATION
   ============================================ */

/* Header : fond uni comme la page under construction (pas de dégradé, pas de carré) */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #FFFFFF;
    background-image: none !important;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 20px rgba(33, 33, 33, 0.1);
    z-index: 1000;
    transition: var(--transition);
}

[data-theme="dark"] .navbar {
    background-color: #212121;
    background-image: none !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

/* Forcer fond uni sur le header (éditeur ou bloc) — même rendu que under construction */
.site-header.navbar,
.navbar.wp-block-group,
.wp-block-group.navbar {
    background-image: none !important;
    background-size: auto !important;
    background-repeat: repeat !important;
}

.navbar.scrolled {
    box-shadow: 0 4px 30px rgba(33, 33, 33, 0.15);
}

.nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-sm) 0;
}

/* Wrapper pour centrer le logo sur mobile (burger à gauche, logo au centre) */
.logo-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-width: 0;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    color: var(--gris-fonce);
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    transition: var(--transition);
}

.logo:hover {
    color: var(--orange-gris-pastel);
}

/* Logo images */
.logo-image {
    height: auto;
    max-height: 60px;
    width: auto;
    display: block;
    transition: var(--transition);
}

.logo-light {
    display: block;
}

.logo-dark {
    display: none;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

.logo-symbol {
    width: 50px;
    height: 50px;
    color: var(--orange-gris-pastel);
}

.logo-symbol .curve {
    color: var(--orange);
}

/* Menu : base mobile-first (overlay caché par défaut) */
.nav-menu,
#navMenu,
.nav-content .wp-block-navigation {
    display: flex;
    list-style: none;
    gap: var(--spacing-md);
    align-items: center;
    margin: 0;
    padding: 0;
    flex-wrap: nowrap;
}

.nav-menu li,
#navMenu li,
.wp-block-navigation .wp-block-navigation-item {
    margin: 0;
}

.nav-menu a,
#navMenu a,
.wp-block-navigation a {
    font-family: var(--font-body); /* Tisa Pro pour navigation */
    font-size: 1rem;
    font-weight: 400;
    text-decoration: none;
    color: var(--text-dark);
    transition: var(--transition);
    position: relative;
    padding: var(--spacing-xs) 0;
    white-space: nowrap;
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--orange-gris-pastel);
    transition: var(--transition);
}

.nav-menu a:hover {
    color: var(--orange-gris-pastel);
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Bouton hamburger — visible par défaut (mobile first), zone tactile ≥ 44px (charte a11y) */
.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    z-index: 1001;
    transition: var(--transition);
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: var(--gris-fonce);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

[data-theme="dark"] .menu-toggle span {
    background-color: var(--orange);
}

/* Hamburger → X quand ouvert */
.menu-toggle.active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}
.menu-toggle.active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ============================================
   THEME TOGGLE — Bouton rond soleil / lune (charte graphique Yi Worldwide)
   Cercle autour, hover : zoom, ombre, légère rotation
   ============================================ */

.theme-toggle {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 5px; /* zone tactile ≥ 44px sur mobile */
    margin-left: var(--spacing-sm);
    margin-right: var(--spacing-sm);
    border: 2px solid var(--orange-gris-pastel);
    border-radius: 50%;
    background: transparent;
    color: var(--orange-gris-pastel);
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease,
                box-shadow 0.3s ease, transform 0.3s ease;
}

.theme-toggle:hover {
    background: rgba(140, 60, 33, 0.08);
    color: var(--orange-gris-pastel);
    transform: scale(1.08) rotate(4deg);
    box-shadow: 0 6px 16px rgba(140, 60, 33, 0.2);
}

.theme-toggle:active {
    transform: scale(0.98) rotate(0deg);
}

.theme-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(140, 60, 33, 0.35);
}

.theme-icon-light,
.theme-icon-dark {
    position: absolute;
    width: 14px;
    height: 14px;
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.theme-icon-light {
    color: var(--orange-gris-pastel);
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

.theme-icon-dark {
    color: var(--gris-fonce);
    opacity: 0;
    transform: scale(0.6) rotate(-15deg);
}

.theme-toggle:hover .theme-icon-light {
    transform: scale(1.05) rotate(0deg);
}

.theme-toggle:hover .theme-icon-dark {
    transform: scale(0.6) rotate(-15deg);
}

[data-theme="dark"] .theme-toggle {
    border-color: var(--orange);
    background: var(--orange-clair);
    color: var(--orange);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .theme-toggle:hover {
    background: rgba(204, 154, 137, 0.25);
    color: var(--orange);
    transform: scale(1.08) rotate(-4deg);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .theme-icon-light {
    opacity: 0;
    transform: scale(0.6) rotate(15deg);
}

[data-theme="dark"] .theme-icon-dark {
    color: var(--orange);
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

[data-theme="dark"] .theme-toggle:hover .theme-icon-dark {
    transform: scale(1.05) rotate(0deg);
}

/* ============================================
   HERO SECTION
   ============================================ */

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: linear-gradient(135deg, var(--orange-clair) 0%, var(--white) 100%);
    padding: var(--spacing-xl) var(--spacing-md);
    margin-top: 80px;
    overflow: hidden;
}

.hero-content {
    text-align: center;
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.hero-logo {
    margin-bottom: var(--spacing-md);
    display: flex;
    justify-content: center;
    align-items: center;
}

.hero-logo-image {
    max-width: 100%;
    height: auto;
    max-height: 200px;
    width: auto;
    display: block;
    transition: var(--transition);
    animation: fadeInUp 1s ease;
}

.hero-logo .logo-light {
    display: block;
}

.hero-logo .logo-dark {
    display: none;
}

[data-theme="dark"] .hero-logo .logo-light {
    display: none;
}

[data-theme="dark"] .hero-logo .logo-dark {
    display: block;
}

.hero-title {
    font-family: var(--font-heading); /* Bodoni 72 */
    font-size: clamp(3rem, 6vw, 5.5rem);
    font-weight: 400; /* Book weight selon charte */
    color: var(--gris-fonce);
    margin-bottom: var(--spacing-sm);
    animation: fadeInUp 1s ease 0.2s both;
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: clamp(1.25rem, 2.5vw, 2rem);
    color: var(--orange-gris-pastel);
    font-family: var(--font-heading); /* Bodoni 72 — charte titres */
    font-weight: 400;
    margin-bottom: var(--spacing-md);
    animation: fadeInUp 1s ease 0.4s both;
}

.hero-description {
    font-family: var(--font-body); /* Tisa Pro — charte corps */
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--text-light);
    margin-bottom: var(--spacing-lg);
    max-width: 600px;
    line-height: 1.7;
    margin-left: auto;
    margin-right: auto;
    animation: fadeInUp 1s ease 0.6s both;
}

/* ============================================
   BUTTONS
   ============================================ */

/* Styles communs — classe .btn ET bloc wp:button natif */
.btn,
.wp-block-button__link,
.wp-element-button {
    font-family: var(--font-body);
    font-size: 1rem !important;
    font-weight: 400;
    display: inline-block;
    padding: 0.875rem 2.25rem !important;
    text-decoration: none !important;
    border-radius: 50px !important;
    transition: var(--transition);
    border: 2px solid transparent !important;
    cursor: pointer;
    line-height: 1.4 !important;
}

/* Wrapper du bloc wp:button — ne pas étirer en pleine largeur */
.wp-block-button {
    display: inline-block;
}

.wp-block-buttons {
    gap: 1rem;
}

/* Bouton primaire — classe .btn-primary ET bloc wp:button par défaut */
.btn-primary,
.wp-block-button__link,
.wp-element-button {
    background-color: var(--orange-gris-pastel) !important;
    color: var(--white) !important;
}

.btn-primary {
    animation: fadeInUp 1s ease 0.8s both;
}

/* Hover */
.btn-primary:hover,
.wp-block-button__link:hover,
.wp-element-button:hover {
    background-color: var(--gris-fonce) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(140, 60, 33, 0.3);
}

/* ============================================
   SECTIONS
   ============================================ */

section {
    padding: var(--spacing-xl) 0;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.section-title {
    font-family: var(--font-heading); /* Bodoni 72 */
    font-size: clamp(2.25rem, 4.5vw, 4rem); /* Taille H2 */
    font-weight: 400; /* Book weight */
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.01em;
}

.title-underline {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--orange-gris-pastel), var(--orange));
    margin: var(--spacing-sm) auto;
    border-radius: 2px;
}

/* ============================================
   WORDPRESS PAGES & POSTS STYLING
   Style identique à la homepage
   ============================================ */

.site-main {
    padding: var(--spacing-xl) 0;
    background-color: var(--bg-primary);
}

.site-main .container {
    max-width: 90%;
}

/* Entry Header - Style identique à section-header */
.entry-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
}

.entry-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    color: var(--gris-fonce);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.entry-title a {
    color: var(--gris-fonce);
    text-decoration: none;
    transition: var(--transition);
}

.entry-title a:hover {
    color: var(--orange-gris-pastel);
}

/* Entry Content - Style identique aux sections */
.entry-content {
    max-width: 90%;
    margin: 0 auto;
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--text-light);
}

.entry-content p {
    margin-bottom: var(--spacing-md);
    color: var(--text-light);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-family: var(--font-heading);
    color: var(--gris-fonce);
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.entry-content h2 {
    font-size: clamp(2rem, 4vw, 3.5rem);
}

.entry-content h3 {
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.entry-content a {
    color: var(--orange-gris-pastel);
    text-decoration: none;
    transition: var(--transition);
}

.entry-content a:hover {
    color: var(--orange);
    text-decoration: underline;
}

.entry-content ul,
.entry-content ol {
    margin-bottom: var(--spacing-md);
    padding-left: var(--spacing-lg);
}

.entry-content li {
    margin-bottom: var(--spacing-xs);
    color: var(--text-light);
}

/* Post Thumbnail */
.post-thumbnail {
    margin: var(--spacing-lg) auto;
    text-align: center;
    max-width: 90%;
}

.post-thumbnail img {
    width: 100%;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 40px rgba(33, 33, 33, 0.1);
    transition: var(--transition);
}

.post-thumbnail img:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(33, 33, 33, 0.15);
}

.post-thumbnail a {
    display: block;
}

/* Entry Meta */
.entry-meta {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-top: var(--spacing-sm);
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    flex-wrap: wrap;
}

.entry-meta span {
    display: inline-block;
}

.entry-meta a {
    color: var(--orange-gris-pastel);
    text-decoration: none;
    transition: var(--transition);
}

.entry-meta a:hover {
    color: var(--orange);
}

/* Entry Footer */
.entry-footer {
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--orange-gris-pastel-light);
    text-align: center;
}

.entry-footer .entry-meta {
    margin-top: 0;
}

/* Page Links */
.page-links {
    margin-top: var(--spacing-lg);
    text-align: center;
}

.page-links a {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-sm);
    margin: 0 var(--spacing-xs);
    background-color: var(--orange-gris-pastel);
    color: var(--white);
    text-decoration: none;
    border-radius: 5px;
    transition: var(--transition);
}

.page-links a:hover {
    background-color: var(--orange);
    transform: translateY(-2px);
}

/* Post Navigation */
.post-navigation {
    margin-top: var(--spacing-xl);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--orange-gris-pastel-light);
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1;
}

.post-navigation a {
    display: block;
    padding: var(--spacing-md);
    background-color: var(--bg-secondary);
    border-radius: 10px;
    color: var(--gris-fonce);
    text-decoration: none;
    transition: var(--transition);
}

.post-navigation a:hover {
    background-color: var(--orange-gris-pastel);
    color: var(--white);
    transform: translateY(-2px);
}

.post-navigation .nav-subtitle {
    display: block;
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: var(--spacing-xs);
}

.post-navigation .nav-title {
    display: block;
    font-family: var(--font-heading);
    font-weight: 600;
}

/* Posts Navigation */
.posts-navigation {
    margin-top: var(--spacing-xl);
    text-align: center;
}

.posts-navigation .nav-links {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
}

.posts-navigation a {
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--orange-gris-pastel);
    color: var(--white);
    text-decoration: none;
    border-radius: 25px;
    transition: var(--transition);
}

.posts-navigation a:hover {
    background-color: var(--orange);
    transform: translateY(-2px);
}

/* Article styling */
article {
    background-color: var(--white);
    padding: var(--spacing-xl);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(33, 33, 33, 0.1);
    margin-bottom: var(--spacing-lg);
    transition: var(--transition);
}

article:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 60px rgba(33, 33, 33, 0.15);
}

/* Page Header (Archive, Search) */
.page-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
    padding: var(--spacing-lg) 0;
}

.page-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 400;
    color: var(--gris-fonce);
    margin-bottom: var(--spacing-sm);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.page-header .title-underline {
    width: 80px;
    height: 3px;
    background: linear-gradient(90deg, var(--orange-gris-pastel), var(--orange));
    margin: var(--spacing-sm) auto;
    border-radius: 2px;
}

.archive-description {
    max-width: 90%;
    margin: var(--spacing-md) auto 0;
    font-family: var(--font-body); /* Tisa Pro */
    font-size: 1.125rem;
    font-weight: 400;
    color: var(--text-light);
    line-height: 1.7;
}

/* No Results */
.no-results {
    text-align: center;
    padding: var(--spacing-xl) 0;
}

.no-results .page-title {
    font-family: var(--font-heading);
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    color: var(--gris-fonce);
    margin-bottom: var(--spacing-md);
}

.no-results .page-content {
    max-width: 90%;
    margin: 0 auto;
    color: var(--text-light);
}

/* Desktop adjustments for pages */
@media (min-width: 1024px) {
    .entry-content {
        max-width: 70%;
    }
    
    .post-thumbnail {
        max-width: 70%;
    }
}

@media (min-width: 1440px) {
    .entry-content {
        max-width: 60%;
    }
    
    .post-thumbnail {
        max-width: 60%;
    }
}

.section-description {
    max-width: 700px;
    margin: var(--spacing-md) auto 0;
    font-family: var(--font-body); /* Tisa Pro */
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.7;
}

/* ============================================
   ABOUT SECTION
   ============================================ */

.about {
    background-color: var(--white);
}

/* ============================================
   ABOUT US PAGE SECTIONS
   ============================================ */

.about-us-hero {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--white) 100%);
}

.about-us-story {
    background-color: var(--white);
}

.about-us-values {
    background: linear-gradient(135deg, var(--bg-secondary) 0%, var(--white) 100%);
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.about-text p {
    font-family: var(--font-body); /* Tisa Pro */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    margin-bottom: var(--spacing-md);
}

.symbol-explanation {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.symbol-item {
    text-align: center;
    padding: var(--spacing-md);
}

.symbol-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--orange-gris-pastel), var(--orange));
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 auto var(--spacing-sm);
    font-family: var(--font-heading);
}

.symbol-item p {
    font-size: 0.9rem;
    color: var(--text-light);
}

/* ============================================
   PILLARS SECTION
   ============================================ */

.pillars {
    background: linear-gradient(135deg, var(--orange-clair) 0%, var(--white) 100%);
}

.pillars-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.pillar-card {
    background-color: var(--white);
    padding: var(--spacing-lg);
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(33, 33, 33, 0.1);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.pillar-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, var(--orange-gris-pastel), var(--orange));
    transform: scaleX(0);
    transition: var(--transition);
}

.pillar-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(33, 33, 33, 0.15);
}

.pillar-card:hover::before {
    transform: scaleX(1);
}

.pillar-number {
    font-size: 4rem;
    font-family: var(--font-heading);
    color: var(--orange-gris-pastel-light);
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--spacing-sm);
}

.pillar-title {
    font-family: var(--font-heading); /* Bodoni 72 */
    font-weight: 400; /* Book weight */
    color: var(--gris-fonce);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1.5rem, 3vw, 2rem); /* Taille H4 */
    letter-spacing: -0.01em;
}

.pillar-description {
    font-family: var(--font-body); /* Tisa Pro */
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-light);
    line-height: 1.7; /* Ligne de lecture confortable */
}

/* ============================================
   SERVICES SECTION
   ============================================ */

.services {
    background-color: var(--white);
}

.services-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

.service-item {
    padding: var(--spacing-md);
    border-left: 4px solid var(--orange-gris-pastel);
    transition: var(--transition);
}

.service-item:hover {
    border-left-color: var(--orange);
    padding-left: var(--spacing-lg);
}

.service-item h3 {
    font-family: var(--font-heading); /* Bodoni 72 */
    font-weight: 400; /* Book weight */
    color: var(--gris-fonce);
    margin-bottom: var(--spacing-sm);
    font-size: clamp(1.5rem, 3vw, 2rem); /* Taille H4 */
    letter-spacing: -0.01em;
}

.service-item p {
    font-family: var(--font-body); /* Tisa Pro */
    font-size: 1rem;
    font-weight: 400;
    color: var(--text-light);
    line-height: 1.7;
}

/* ============================================
   VALUES SECTION
   ============================================ */

.values {
    background: linear-gradient(135deg, var(--white) 0%, var(--orange-clair) 100%);
}

.values-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    align-items: center;
}

.values-text {
    font-family: var(--font-body); /* Tisa Pro */
}

.values-text p {
    font-family: var(--font-body); /* Tisa Pro */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.7;
    color: var(--text-light);
}

.color-palette {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
}

.color-item {
    aspect-ratio: 1;
    border-radius: 15px;
    display: flex;
    align-items: flex-end;
    padding: var(--spacing-sm);
    color: var(--white);
    font-family: var(--font-body); /* Tisa Pro */
    font-size: 0.875rem;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transition: var(--transition);
    cursor: pointer;
}

.color-item:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.color-item:nth-child(5) {
    grid-column: 1 / -1;
}

/* ============================================
   CONTACT SECTION
   ============================================ */

.contact {
    background-color: var(--white);
}

.contact-form {
    max-width: 600px;
    margin: var(--spacing-lg) auto 0;
}

.form-group {
    margin-bottom: var(--spacing-md);
}

.form-group label {
    font-family: var(--font-body); /* Tisa Pro pour labels */
    font-size: 1rem;
    font-weight: 400;
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--gris-fonce);
}

.form-group input,
.form-group textarea {
    font-family: var(--font-body); /* Tisa Pro */
    font-size: 1rem;
    font-weight: 400;
    width: 100%;
    padding: 1rem;
    border: 2px solid var(--orange-gris-pastel-light);
    border-radius: 10px;
    transition: var(--transition);
    background-color: var(--white);
    line-height: 1.7;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--orange-gris-pastel);
    box-shadow: 0 0 0 3px rgba(140, 60, 33, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 150px;
}

/* ============================================
   FOOTER
   ============================================ */

.footer {
    background-color: var(--gris-fonce);
    color: var(--white);
    padding: var(--spacing-lg) 0 var(--spacing-md);
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.footer-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--white);
}

.footer-logo .logo-image,
.footer-logo .footer-logo-image {
    max-height: 50px;
    width: auto;
    display: block;
}

/* Footer utilise toujours le logo dark selon la charte graphique */
.footer-logo .logo-light {
    display: none;
}

.footer-logo .logo-dark,
.footer-logo .footer-logo-image {
    display: block;
}

.footer-links {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    transition: var(--transition);
    opacity: 0.8;
}

.footer-links a:hover {
    opacity: 1;
    color: var(--orange);
}

.footer-bottom {
    text-align: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    opacity: 0.7;
    font-size: 0.9rem;
}

/* ============================================
   WORDPRESS SPECIFIC
   ============================================ */

.alignleft {
    float: left;
    margin-right: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.alignright {
    float: right;
    margin-left: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.aligncenter {
    display: block;
    margin: var(--spacing-md) auto;
}

.wp-caption {
    max-width: 100%;
    margin-bottom: var(--spacing-md);
}

.wp-caption-text {
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    margin-top: var(--spacing-xs);
}

/* ============================================
   ANIMATIONS
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Accessibilité : réduire les animations si demandé (moderne, a11y) */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ============================================
   RESPONSIVE — Mobile first
   Base = mobile, puis min-width 769px (tablette/desktop), 480px (petit mobile)
   Charte : espacements et couleurs via variables CSS
   ============================================ */

/* Empêcher le scroll du body quand le menu mobile est ouvert */
body.menu-open {
    overflow: hidden;
}

/* Menu ouvert : navbar et panneau au premier plan (au-dessus des sections/hero) */
body.menu-open .navbar {
    z-index: 99999;
}

/* Desktop : menu inline, masquer le hamburger, logo sans centrage forcé */
@media (min-width: 769px) {
    .menu-toggle {
        display: none;
    }

    .logo-wrapper {
        flex: 0 1 auto;
        justify-content: flex-start;
    }

    .nav-menu,
    #navMenu,
    .nav-content .wp-block-navigation {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        bottom: auto;
        transform: none;
        visibility: visible;
        background: none;
        padding: 0;
        box-shadow: none;
        overflow: visible;
        z-index: auto;
        flex-wrap: nowrap;
    }

    /* Conteneur des liens du bloc Navigation : une seule ligne */
    .nav-content .wp-block-navigation .wp-block-navigation__container {
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 768px) {
    /* Barre : burger à gauche, logo centré, thème à droite — le bloc nav ne prend pas de place */
    .nav-content .wp-block-navigation {
        width: 0 !important;
        min-width: 0 !important;
        overflow: visible !important;
    }

    .logo-wrapper {
        flex: 1;
        justify-content: center;
    }

    /* Marge à droite du bouton dark mode pour ne pas coller au bord */
    .nav-content .theme-toggle {
        margin-right: var(--spacing-md);
    }

    /* Masquer le bouton « ouvrir » du bloc Navigation (on utilise notre hamburger) */
    .wp-block-navigation__responsive-container-open {
        display: none !important;
    }

    /* Une seule croix de fermeture : on garde le hamburger → X, on masque celle du bloc */
    .wp-block-navigation__responsive-container-close {
        display: none !important;
    }

    /* Panneau latéral à gauche — couleurs charte (orange-clair / gris-fonce) */
    .wp-block-navigation__responsive-container {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: auto !important;
        width: min(320px, 85vw) !important;
        max-width: 100%;
        min-height: 100vh !important;
        height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        background: var(--orange-clair) !important;
        background-color: var(--orange-clair) !important;
        background-image: none !important;
        opacity: 1 !important;
        box-shadow: 4px 0 24px rgba(33, 33, 33, 0.15);
        transform: translateX(-100%);
        transition: transform 0.3s ease, visibility 0.3s ease;
        visibility: hidden;
        z-index: 1;
        display: block !important;
        overflow: visible !important;
        isolation: isolate;
    }

    .wp-block-navigation__responsive-container.nav-panel-open {
        transform: translateX(0);
        visibility: visible;
    }

    [data-theme="dark"] .wp-block-navigation__responsive-container {
        background-image: none !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.4);
    }

    /* Texte du panneau en dark mode : blanc pour contraste sur gris-foncé (éviter gris sur gris) */
    [data-theme="dark"] .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content,
    [data-theme="dark"] .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content * {
        color: #FFFFFF !important;
    }

    /* Dialog et zone contenu — fond charte */
    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
        display: block !important;
        visibility: visible !important;
        min-height: 100vh !important;
        height: 100% !important;
        background: var(--orange-clair) !important;
        background-color: var(--orange-clair) !important;
        background-image: none !important;
    }


    .wp-block-navigation__responsive-container .wp-block-navigation__responsive-container-content {
        display: block !important;
        visibility: visible !important;
        min-height: 100% !important;
        height: auto !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch;
        background: var(--orange-clair) !important;
        background-color: var(--orange-clair) !important;
        background-image: none !important;
    }

    .wp-block-navigation__responsive-container-content {
        padding: 72px var(--spacing-md) var(--spacing-lg) !important;
        box-sizing: border-box !important;
    }

    /* Liste et liens dans le panneau */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        margin: 0;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item a,
    .wp-block-navigation__responsive-container a {
        display: block;
        padding: var(--spacing-sm) 0;
        font-size: 1rem;
        color: var(--text-dark);
        text-decoration: none;
        border-bottom: 1px solid rgba(33, 33, 33, 0.08);
        white-space: nowrap;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item a:hover,
    .wp-block-navigation__responsive-container a:hover {
        color: var(--orange-gris-pastel);
    }

    [data-theme="dark"] .wp-block-navigation__responsive-container a,
    [data-theme="dark"] .wp-block-navigation__responsive-container .wp-block-navigation-item__content,
    [data-theme="dark"] .wp-block-navigation__responsive-container .wp-block-navigation-item a {
        color: #FFFFFF !important;
        border-bottom-color: rgba(255, 255, 255, 0.15);
    }

    [data-theme="dark"] .wp-block-navigation__responsive-container a:hover,
    [data-theme="dark"] .wp-block-navigation__responsive-container .wp-block-navigation-item__content:hover {
        color: var(--orange) !important;
    }

    /* Bouton fermer du bloc : position en haut à droite du panneau */
    .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        left: auto;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        color: var(--gris-fonce);
    }

    [data-theme="dark"] .wp-block-navigation__responsive-container-close {
        color: var(--white);
    }

    .about-content,
    .values-content {
        grid-template-columns: 1fr;
    }
    
    .pillars-grid {
        grid-template-columns: 1fr;
    }
    
    .services-content {
        grid-template-columns: 1fr;
    }
    
    .color-palette {
        grid-template-columns: 1fr;
    }
    
    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .footer-links {
        justify-content: center;
    }
    
    section {
        padding: var(--spacing-lg) 0;
    }
    
    .hero {
        min-height: 90vh;
        padding: var(--spacing-lg) var(--spacing-md);
    }
}

/* Petit mobile : espacements charte réduits, conteneur plus serré */
@media (max-width: 480px) {
    :root {
        --spacing-lg: 3rem;
        --spacing-xl: 4rem;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }

    .pillar-card,
    .service-item {
        padding: var(--spacing-md);
    }
}