/**
 * Theme Name:     OnePress Child
 * Template:       onepress
 * Author:         JohnnyCola
 * Description:    Portfolio theme for creative professionals
 */

:root {
  /* =========================
     COULEURS PRINCIPALES
     ========================= */
  --color-primary: #000000;              /* Noir principal */
  --color-secondary: #ffffff;            /* Blanc principal */
  --color-accent: #dc3545;               /* Rouge accent (hover icons) */
  --color-text-primary: #241c18;         /* Texte principal (brun foncé) */
  --color-text-secondary: #333333;       /* Texte secondaire */
  --color-text-light: #ffffff;           /* Texte clair */
  --color-text-muted: #b5b5b5;           /* Texte atténué */
  
  /* Couleurs de fond */
  --color-bg-primary: #ffffff;           /* Fond principal */
  --color-bg-secondary: #3d3c44;         /* Fond footer */
  --color-bg-overlay: rgba(62, 62, 67, 0.65); /* Overlay menu */
  
  /* Couleurs de bordure */
  --color-border-light: #ebebeb;         /* Bordures claires */
  --color-border-medium: #80808040;      /* Bordures moyennes */
  --color-border-dark: #333333;          /* Bordures foncées */

  /* =========================
     TYPOGRAPHIE
     ========================= */
  /* Familles de polices */
  --font-primary: 'Novecento WideBold', sans-serif;  /* Titres */
  --font-secondary: 'Pitch-Light', serif;             /* Sous-titres */
  --font-tertiary: 'Georgia', serif;                  /* Menu */
  --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Tailles de police - Titres */
  --font-size-hero-desktop: 200px;       /* Hero titre desktop */
  --font-size-hero-mobile: 54px;         /* Hero titre mobile */
  --font-size-hero-subtitle: 20px;       /* Hero sous-titre desktop */
  --font-size-hero-subtitle-mobile: 10px; /* Hero sous-titre mobile */
  
  --font-size-project-title: 96px;       /* Titres projets desktop */
  --font-size-project-title-tablet: 72px; /* Titres projets tablette */
  --font-size-project-title-mobile: 48px; /* Titres projets mobile */
  
  --font-size-page-title: 65px;          /* Titres de page desktop */
  --font-size-page-title-mobile: 40px;   /* Titres de page mobile */
  
  /* Tailles de police - Navigation */
  --font-size-menu-desktop: 3rem;        /* Menu desktop */
  --font-size-menu-mobile: 2.5rem;       /* Menu mobile */
  
  /* Tailles de police - Contenu */
  --font-size-body-large: 32px;          /* Texte large */
  --font-size-body-large-mobile: 20px;   /* Texte large mobile */
  --font-size-body-medium: 16px;         /* Texte moyen */
  --font-size-body-small: 13px;          /* Texte petit */
  --font-size-body-tiny: 12px;           /* Texte très petit */
  
  /* Hauteurs de ligne */
  --line-height-tight: 0.9;              /* Très serré (titres) */
  --line-height-normal: 1.2;             /* Normal */
  --line-height-relaxed: 1.5;            /* Détendu (paragraphes) */

  /* =========================
     ESPACEMENTS
     ========================= */
  /* Espacements de base */
  --spacing-xs: 5px;
  --spacing-sm: 10px;
  --spacing-md: 20px;
  --spacing-lg: 40px;
  --spacing-xl: 80px;
  --spacing-xxl: 120px;
  
  /* Espacements spécifiques */
  --header-offset: 20px;                 /* Décalage header */
  --section-padding-desktop: 100px;      /* Padding sections desktop */
  --section-padding-mobile: 40px;        /* Padding sections mobile */
  --container-padding: 20px;             /* Padding containers */
  
  /* Hauteurs */
  --hero-height: 100vh;                  /* Hauteur hero */
  --menu-item-height: 38px;              /* Hauteur items menu */
  --button-height: 40px;                 /* Hauteur boutons */
  --navigation-height: 42px;             /* Hauteur navigation */

  /* =========================
     BORDURES ET RAYONS
     ========================= */
  --border-radius-small: 8px;            /* Rayon petit */
  --border-radius-medium: 20px;          /* Rayon moyen */
  --border-radius-large: 40px;           /* Rayon large */
  --border-radius-full: 9999px;          /* Rayon complet (pilules) */
  --border-radius-circle: 50%;           /* Cercle parfait */
  
  /* Épaisseurs de bordure */
  --border-width-thin: 1px;
  --border-width-medium: 2px;

  /* =========================
     OMBRES
     ========================= */
  --shadow-light: 0 2px 15px rgba(0,0,0,0.1);
  --shadow-medium: 0 4px 20px rgba(0,0,0,0.1);
  --shadow-heavy: 1px 9px 20px 3px rgba(0,0,0,0.07);
  --shadow-menu: -2px 0 15px rgba(0,0,0,0.2);

  /* =========================
     TRANSITIONS ET ANIMATIONS
     ========================= */
  /* Durées */
  --transition-fast: 0.15s;
  --transition-normal: 0.3s;
  --transition-slow: 0.5s;
  --transition-very-slow: 1.5s;
  
  /* Easings */
  --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --ease-decelerate: cubic-bezier(0.0, 0.0, 0.2, 1);
  --ease-accelerate: cubic-bezier(0.4, 0.0, 1, 1);
  --ease-sharp: cubic-bezier(0.4, 0.0, 0.6, 1);
  --ease-bounce: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-custom: cubic-bezier(0.165, 0.84, 0.44, 1);

  /* =========================
     DIMENSIONS RESPONSIVES
     ========================= */
  /* Breakpoints */
  --breakpoint-mobile: 768px;
  --breakpoint-tablet: 1024px;
  --breakpoint-desktop: 1200px;
  --breakpoint-large: 1400px;
  
  /* Largeurs containers */
  --container-max-width: 1400px;
  --container-medium-width: 1200px;
  --container-small-width: 800px;
  --container-tiny-width: 600px;
  
  /* Menu responsive */
  --menu-width-desktop: 40vw;
  --menu-width-mobile: 95vw;
  --menu-max-width: 600px;
  --menu-min-width: 400px;

  /* =========================
     Z-INDEX LAYERS
     ========================= */
  --z-background: -1;
  --z-base: 0;
  --z-content: 1;
  --z-elevated: 2;
  --z-overlay: 10;
  --z-navigation: 999;
  --z-header: 9999999;
  --z-modal: 99999;

  /* =========================
     EFFETS VISUELS
     ========================= */
  /* Backdrop filter */
  --backdrop-blur: blur(50px);
  
  /* Scale pour hover effects */
  --scale-hover-small: 1.02;
  --scale-hover-medium: 1.025;
  --scale-hover-large: 1.05;
  
  /* Opacités */
  --opacity-disabled: 0.5;
  --opacity-muted: 0.3;
  --opacity-visible: 1;
  --opacity-hidden: 0;
}

/* =========================
   RESPONSIVE DESIGN
   ========================= */
@media (max-width: 768px) {
  :root {
    --section-padding-desktop: var(--section-padding-mobile);
    --font-size-menu-desktop: var(--font-size-menu-mobile);
    --menu-width-desktop: var(--menu-width-mobile);
    --menu-min-width: 300px;
  }
}

/* =========================
   BASE STYLES
   ========================= */
body {
  overflow-x: hidden;
  font-family: var(--font-system);
}

path#type {
  color: var(--color-text-light);
}

/* =========================
   CLASSES PRINCIPALES
   ========================= */
.c-hero_title, .next-page-title h1 {
    font-family: var(--font-primary);
    font-size: var(--font-size-page-title);
    margin: 0;
    color: var(--color-text-primary);
    line-height: var(--line-height-tight);
}

/* =========================
   HEADER LAYOUT
   ========================= */
.header-main.container-fluid {
  background: transparent;
  position: absolute;
}

.header-logo {
  position: fixed;
  z-index: var(--z-header);
  gap: var(--spacing-sm);
  top: var(--header-offset);
  left: var(--header-offset);
  padding: 0px var(--spacing-sm);
  display: flex;
  align-items: center;
}

.header-menu-toggle {
  position: fixed;
  z-index: var(--z-header);
  top: var(--header-offset);
  right: var(--header-offset);
  padding: 0px var(--spacing-sm);
  display: flex;
  align-items: center;
}

a.logo svg {
  width: 41px;
}

/* =========================
   LOGO ANIMATIONS
   ========================= */
.johnnycola-logo {
    width: 41px;
    height: 41px;
    cursor: pointer;
}

.johnnycola-logo #mon-logo {
    fill: var(--color-text-light);
    stroke: var(--color-text-light);
    transition: fill var(--transition-fast) linear, stroke var(--transition-fast) linear;
}

.johnnycola-logo #background-idle {
    fill: var(--color-text-primary);
    transition: clip-path var(--transition-slow) var(--ease-custom);
    clip-path: polygon(0% 0%, 0px 100%, 50% 100%, 50% 50%, 50% 50%, 50% 50%, 50% 50%, 50% 100%, 100% 100%, 100% 0%);
}

.johnnycola-logo #background-hover {
    fill: var(--color-secondary);
}

.johnnycola-logo:hover #background-idle {
    clip-path: polygon(0% 0%, 0% 100%, 1px 100%, 1px 1px, calc(100% - 1px) 1px, calc(100% - 1px) calc(100% - 1px), 0% calc(100% - 1px), 1px 100%, 100% 100%, 100% 0%);
}

.johnnycola-logo:hover #mon-logo {
    fill: var(--color-text-primary);
    stroke: var(--color-text-primary);
}

/* =========================
   NAVIGATION STYLES
   ========================= */
.nav-link {
  color: var(--color-text-light);
  font-size: var(--font-size-menu-desktop);
  line-height: var(--line-height-normal);
  margin: 0;
  padding: 0 !important;
  transition: color var(--transition-normal) var(--ease-standard);
  text-decoration: none;
}

li.nav-item {
  margin: 0;
}

/* =========================
   SIDEBAR MENU
   ========================= */
#sidemenu {
  background: var(--color-bg-overlay) !important;
  color: var(--color-text-light);
  padding: var(--spacing-md);
  border: none;
  height: calc(100vh - var(--spacing-md));
  width: var(--menu-width-desktop) !important; 
  max-width: var(--menu-max-width) !important;
  min-width: var(--menu-min-width) !important;
  display: flex;
  position: fixed;
  z-index: var(--z-navigation);
  right: var(--header-offset);
  top: var(--header-offset);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--transition-very-slow) var(--ease-custom), visibility 0s var(--transition-very-slow);
  border-radius: var(--border-radius-medium);
  backdrop-filter: var(--backdrop-blur);
  background-color: rgba(255, 255, 255, 0.3);
}

.menu-list {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.menu-list ul {
  list-style: none;
  padding-left: 0;
}

.menu-list .nav-link {
  font-size: var(--font-size-menu-desktop);
  font-family: var(--font-tertiary);
  font-weight: 300;
  line-height: var(--line-height-normal);
  color: var(--color-text-light);
  padding: 0;
  transition: color var(--transition-normal) var(--ease-standard);
  text-align: left;
}

.menu-list .nav-link:hover {
  color: var(--color-text-muted);
}

.footer-contact {
  margin-top: 6rem;
  font-size: var(--font-size-body-small);
  font-family: var(--font-tertiary);
}

.footer-contact > div > div {
  margin-bottom: 0.4rem;
}

.footer-contact .d-flex {
  flex-direction: row;
}

#sidemenu.show {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--transition-very-slow) var(--ease-custom), visibility 0s 0s;
}

#sidemenu .d-flex {
  flex-direction: row;
}

/* =========================
   HERO SECTION
   ========================= */
.hero {
  background-size: cover;
  height: var(--hero-height);
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.hero-title {
  font-size: var(--font-size-hero-desktop);
  text-transform: uppercase;
  color: var(--color-text-light);
  display: flex;
}

/* =========================
   PROJECT LIST STYLES
   ========================= */
.project-list {
  margin: 0;
  background-color: var(--color-bg-primary);
  position: relative;
  z-index: var(--spacing-sm);
}

.custom-post-list {
  padding: var(--section-padding-desktop) 0px;
  list-style: none;
  position: relative;
  z-index: 11;
}

.post-list-item {
  position: relative;
  border-bottom: var(--border-width-thin) solid var(--color-border-light);
  transition: border-color var(--transition-normal) var(--ease-standard);
  z-index: 12;
}

.post-list-item:hover {
  border-color: var(--color-border-dark);
}

.post-item {
  display: flex;
  padding: var(--spacing-md) 0;
  align-items: center;
  justify-content: space-between;
  position: relative;
  min-height: var(--spacing-xxl);
}

.main-title a {
    font-weight: 250;
    margin: 0 auto;
    text-align: center;
    color: var(--color-primary);
    line-height: var(--line-height-tight);
	font-family: var(--font-primary);
    text-decoration: none;
    /* Solution finale et fiable pour la taille et le saut de ligne */
    font-size: clamp(16px, 6vw, 96px);
    white-space: nowrap !important;
}

/* =========================
   STYLES POUR BLOCS DE TEXTE
   ========================= */

/* Styles de base pour tous les blocs de texte */
.text-block {
    margin: var(--spacing-lg) 0;
}

.text-block .text-content {
    font-family: var(--font-secondary);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
}

.text-block .text-content h1,
.text-block .text-content h2,
.text-block .text-content h3,
.text-block .text-content h4,
.text-block .text-content h5,
.text-block .text-content h6 {
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-md);
    line-height: var(--line-height-normal);
}

.text-block .text-content h1 { font-size: var(--font-size-project-title-mobile); }
.text-block .text-content h2 { font-size: 32px; }
.text-block .text-content h3 { font-size: 24px; }
.text-block .text-content h4 { font-size: 20px; }

.text-block .text-content p {
    font-size: var(--font-size-body-medium);
    margin-bottom: var(--spacing-md);
}

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

.text-block .text-content blockquote {
    border-left: 4px solid var(--color-accent);
    padding-left: var(--spacing-lg);
    margin: var(--spacing-lg) 0;
    font-style: italic;
    color: var(--color-text-secondary);
}

/* Text Center */
.text-block.text-center .text-content {
    text-align: center;
}

/* Text Left */
.text-block.text-left .text-content {
    text-align: left;
}

/* Text Right */
.text-block.text-right .text-content {
    text-align: right;
}

/* Text Quote - Style spécial pour citations */
.text-block.text-quote {
    padding: var(--spacing-xl) var(--spacing-md);
    background: rgba(0, 0, 0, 0.02);
    border-radius: var(--border-radius-medium);
}

.text-block.text-quote .quote-content {
    position: relative;
    font-size: 24px;
    font-style: italic;
    color: var(--color-text-secondary);
    border: none;
    padding: 0;
    margin: 0;
    text-align: center;
}

.text-block.text-quote .quote-content::before {
    content: '"';
    font-size: 4em;
    color: var(--color-accent);
    position: absolute;
    left: -40px;
    top: -20px;
    font-family: Georgia, serif;
    opacity: 0.3;
}

.text-block.text-quote .quote-content::after {
    content: '"';
    font-size: 4em;
    color: var(--color-accent);
    position: absolute;
    right: -40px;
    bottom: -60px;
    font-family: Georgia, serif;
    opacity: 0.3;
}

/* Text Highlight - Boîte mise en évidence */
.text-block.text-highlight .highlight-box {
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    border-radius: var(--border-radius-medium);
    padding: var(--spacing-xl);
    border-left: 6px solid var(--color-accent);
    position: relative;
    overflow: hidden;
}

.text-block.text-highlight .highlight-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--color-accent), transparent);
}

/* Text Full Width - Fond spécial */
.text-block.text-full {
    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
}

/* Text Wide */
.text-block.text-wide .text-content {
    font-size: var(--font-size-body-large);
    text-align: center;
}

/* Text Small */
.text-block.text-small .text-content {
    font-size: var(--font-size-body-small);
    color: var(--color-text-secondary);
}

/* =========================
   STYLES POUR GROUPES MIXTES
   ========================= */

/* Conteneur principal pour groupes mixtes */
.mixed-group {
    margin: var(--spacing-lg) 0;
    align-items: stretch; /* Égalise la hauteur des colonnes */
}

.mixed-group-item {
    padding: 0 var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Images dans les groupes mixtes */
.mixed-group-image {
    height: 100%;
    display: flex;
    align-items: center;
}

.mixed-group-image img {
    border-radius: var(--border-radius-small);
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Texte dans les groupes mixtes */
.mixed-group-text {
    background: var(--color-bg-primary);
    padding: var(--spacing-lg);
    height: 100%;
    display: flex;
    align-items: center;
}

.mixed-group-text .text-content {
    font-family: var(--font-secondary);
    line-height: var(--line-height-relaxed);
    color: var(--color-text-primary);
    font-size: var(--font-size-body-small);
    width: 100%;
}

.mixed-group-text .text-content h1,
.mixed-group-text .text-content h2,
.mixed-group-text .text-content h3,
.mixed-group-text .text-content h4 {
    font-family: var(--font-primary);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
    line-height: var(--line-height-normal);
}

.mixed-group-text .text-content h1 { font-size: 24px; }
.mixed-group-text .text-content h2 { font-size: 20px; }
.mixed-group-text .text-content h3 { font-size: 18px; }
.mixed-group-text .text-content h4 { font-size: 16px; }

.mixed-group-text .text-content p {
    margin-bottom: var(--spacing-sm);
}

.mixed-group-text .text-content p:last-child {
    margin-bottom: 0;
}

/* Groupes de 2 - Hauteurs équilibrées */
.gallery-group-two.mixed-group {
    display: flex;
    align-items: stretch;
}

.gallery-group-two.mixed-group .col-6 {
    display: flex;
    flex-direction: column;
}

/* Groupes de 3 - Hauteurs équilibrées */
.gallery-group-three.mixed-group {
    display: flex;
    align-items: stretch;
}

.gallery-group-three.mixed-group .col-4 {
    display: flex;
    flex-direction: column;
}

/* =========================
   RESPONSIVE
   ========================= */
@media (max-width: 768px) {
    .c-hero_title, .next-page-title h1 {
        font-size: var(--font-size-page-title-mobile);
    }
    
    .text-block .text-content h1 { font-size: 28px; }
    .text-block .text-content h2 { font-size: 24px; }
    .text-block .text-content h3 { font-size: 20px; }
    
    .text-block.text-quote .quote-content {
        font-size: 18px;
    }
    
    .text-block.text-quote .quote-content::before,
    .text-block.text-quote .quote-content::after {
        font-size: 2.5em;
    }
    
    .text-block.text-quote .quote-content::before {
        left: -20px;
        top: -10px;
    }
    
    .text-block.text-quote .quote-content::after {
        right: -20px;
        bottom: -40px;
    }
    
    .text-block.text-wide .text-content {
        font-size: var(--font-size-body-medium);
    }
    
    .text-block.text-highlight .highlight-box {
        padding: var(--spacing-lg);
    }
    
    .mixed-group-text {
        padding: var(--spacing-md);
    }
    
    .mixed-group-text .text-content {
        font-size: 14px;
    }
    
    .mixed-group-text .text-content h1 { font-size: 20px; }
    .mixed-group-text .text-content h2 { font-size: 18px; }
    .mixed-group-text .text-content h3 { font-size: 16px; }
    .mixed-group-text .text-content h4 { font-size: 14px; }
    
    /* Sur mobile, stack les éléments verticalement */
    .gallery-group-two.mixed-group .col-6,
    .gallery-group-three.mixed-group .col-4 {
        width: 100%;
        margin-bottom: var(--spacing-md);
    }
    
    .gallery-group-two.mixed-group,
    .gallery-group-three.mixed-group {
        flex-direction: column;
    }
}