/*
Theme Name: Lucie Phan
Theme URI: https://luciephan.com
Description: Thème personnalisé Lucie Phan - Design V81
Author: Lucie Phan
Author URI: https://luciephan.com
Template: twentytwentyfive
Version: 1.0.2
Text Domain: luciephan
*/
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;600&display=swap');
:root {
  --creme: #f5f0e8;
  --creme-fonce: #ede8de;
  --noir: #1a1a1a;
  --vert-croc: #3db832;
  --orange-choubi: #e8922a;
  --gris-texte: #555;
  --blanc: #ffffff;
  --font-titre: 'Barlow Condensed', 'Arial Black', sans-serif;
  --font-corps: 'DM Sans', 'Helvetica Neue', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background-color: var(--creme); color: var(--noir); font-family: var(--font-corps); font-size: 16px; line-height: 1.5; overflow-x: hidden; }html { overflow-x: hidden !important; width: 100% !important; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-titre); font-weight: 800; }
a,img { max-width: 100%; height: auto; display: block; -webkit-user-drag: none; user-drag: none; -webkit-user-select: none; user-select: none; }
a { color: inherit; text-decoration: none; }
/* NAV */
.site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; padding: 18px 40px; background: transparent; transition: background 0.3s ease; }
.site-header.scrolled { background: rgba(245,240,232,0.95); backdrop-filter: blur(8px); }
.site-logo a { font-family: var(--font-titre); font-weight: 900; font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--noir); }
.site-nav { display: flex; align-items: center; gap: 32px; list-style: none; }
.site-nav li { position: relative; }
.site-nav a { font-family: var(--font-corps); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--noir); transition: opacity 0.2s; }
.site-nav a:hover { opacity: 0.5; }
.site-nav .has-submenu:hover .submenu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.submenu { position: absolute; top: 100%; left: 0; background: var(--creme); border: 1px solid rgba(0,0,0,0.08); border-radius: 4px; padding: 8px 0; min-width: 160px; list-style: none; opacity: 0; pointer-events: none; transform: translateY(-6px); transition: opacity 0.2s, transform 0.2s; margin-top: 12px; }
.submenu li a { display: block; padding: 8px 20px; font-size: 0.75rem; letter-spacing: 0.08em; white-space: nowrap; }
.submenu li a:hover { background: var(--creme-fonce); opacity: 1; }
.nav-indicator { width: 6px; height: 6px; background: var(--noir); border-radius: 50%; }
/* HERO CROC */
.hero-croc { min-height: 100vh; background-color: var(--creme); display: grid; grid-template-columns: 1fr 1fr; align-items: center; padding: 100px 80px 60px 80px; position: relative; overflow: visible; }
.hero-croc-texte { padding-right: 40px; z-index: 2; }
.hero-label { font-family: var(--font-corps); font-size: 0.7rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gris-texte); margin-bottom: 20px; }
.hero-titre { font-family: var(--font-titre); font-weight: 900; font-size: clamp(3.5rem, 7vw, 6rem); line-height: 1; color: var(--noir); }
.hero-titre .accent-vert { color: var(--vert-croc); }
.hero-titre .accent-orange { color: var(--orange-choubi); }
.hero-description { font-size: 0.95rem; color: var(--gris-texte); line-height: 1.6; margin-top: 20px; max-width: 280px; }
.hero-croc-image { display: flex; justify-content: center; align-items: flex-end; height: 90vh; position: relative; }
.hero-image-wrapper { position: relative; height: 90vh; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.hero-image-wrapper img { position: absolute; bottom: 0; height: 88vh; width: auto; max-width: none; object-fit: contain; transition: opacity 0.3s ease; }
.hero-image-wrapper .img-hover { opacity: 0; }
.hero-image-wrapper:hover .img-default { opacity: 0; }
.hero-image-wrapper:hover .img-hover { opacity: 1; }
.section-number { position: absolute; bottom: 30px; left: 80px; font-size: 0.75rem; color: var(--gris-texte); letter-spacing: 0.1em; }
/* CARROUSELS */
.livres-section { background-color: var(--creme-fonce); padding: 50px 80px 60px; }
.livres-label { font-family: var(--font-corps); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gris-texte); margin-bottom: 24px; }
.carrousel-wrapper { position: relative; }
.carrousel-track { overflow: hidden; }
.carrousel-inner { display: flex; gap: 16px; transition: transform 0.4s ease; }
.livre-item { flex: 0 0 auto; width: 140px; cursor: pointer; transition: transform 0.2s ease; }
.livre-item:hover { transform: translateY(-4px); }
.livre-item img { width: 140px; height: 140px; object-fit: cover; border-radius: 4px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.carrousel-nav { display: flex; gap: 12px; margin-top: 28px; }
.carrousel-btn { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--noir); background: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1rem; transition: background 0.2s, color 0.2s; color: var(--noir); }
.carrousel-btn:hover { background: var(--noir); color: var(--blanc); }
/* HERO CHOUBIDOUWHA */
.hero-choubi { min-height: 100vh; background-color: var(--blanc); display: grid; grid-template-columns: 1fr 1fr; align-items: center; overflow: hidden; position: relative; }
.hero-choubi-image { height: 100vh; overflow: hidden; position: relative; }
@keyframes sautChoubi {
  0%   { transform: translateY(350px) scale(0.5) rotate(-12deg); opacity: 0; }
  40%  { transform: translateY(-40px) scale(1.08) rotate(3deg); opacity: 1; }
  60%  { transform: translateY(15px) scale(0.97) rotate(-1deg); opacity: 1; }
  75%  { transform: translateY(-12px) scale(1.03) rotate(1deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
.hero-choubi-image img {
  position: absolute;
  bottom: -200px;
  left: -40px;
  height: 110%;
  width: auto;
  object-fit: contain;
  opacity: 0;
  transform: translateY(350px) scale(0.5) rotate(-12deg);
}
.hero-choubi-image.animate img {
  animation: sautChoubi 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-choubi-texte { padding: 60px 80px 60px 40px; text-align: right; }
.hero-choubi-texte .hero-titre { font-size: clamp(2.5rem, 5vw, 5rem); line-height: 1.05; }
.hero-choubi-texte .hero-description { margin-left: auto; margin-right: 0; }
.hero-lien { display: inline-flex; align-items: center; gap: 12px; margin-top: 32px; font-family: var(--font-corps); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--orange-choubi); }
.hero-lien::before { content: ''; display: block; width: 32px; height: 1.5px; background: var(--orange-choubi); }
/* PERSONNAGES */
.personnages-section {
  background-color: var(--creme);
  padding: 80px 640px 60px 80px;
  position: relative;
  overflow: hidden;
}
.personnages-titre { font-family: var(--font-titre); font-weight: 900; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1; margin-bottom: 40px; max-width: 500px; }
.perso-decoratif {
  position: absolute;
  right: -20px;
  top: -20px;
  width: 600px;
  pointer-events: none;
  z-index: 0;
}
.perso-decoratif .riquiqui {
  width: 100%;
  animation: floatMiroir 4s ease-in-out infinite;
}
@keyframes floatMiroir {
  0%,100% { transform: scaleX(-1) translateY(0); }
  50% { transform: scaleX(-1) translateY(-16px); }
}
@keyframes noteZoom {
  0%   { opacity: 0; transform: scale(0.1) translate(0,0); }
  40%  { opacity: 1; transform: scale(1.4) translate(-10px,-10px); }
  100% { opacity: 0; transform: scale(2) translate(-20px,-30px); }
}
.perso-decoratif .notes {
  position: absolute;
  top: 220px;
  left: 20px;
  width: 160px;
  animation: noteZoom 2.5s ease-in-out infinite;
  animation-delay: 1s;
}
.personnages-grille {
  display: grid;
  grid-template-columns: repeat(4, 120px);
  gap: 8px;
  position: relative;
  z-index: 2;
}
.perso-item { display: flex; flex-direction: column; align-items: center; cursor: pointer; transition: transform 0.2s; }
.perso-item:hover { transform: translateY(-6px); }
.perso-item img { width: 130px; height: 130px; object-fit: contain; margin-bottom: 8px; }
.perso-nom { font-family: var(--font-titre); font-weight: 700; font-size: 1rem; }
.perso-nb { font-size: 0.75rem; color: var(--gris-texte); margin-top: 2px; }
.img-miroir { transform: scaleX(-1); }
/* ACTIVITÉS */
.activites-section { background-color: var(--creme); padding: 80px 80px 60px; border-top: 1px solid rgba(0,0,0,0.08); }
.activites-titre { font-family: var(--font-titre); font-weight: 900; font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; margin-bottom: 60px; max-width: 420px; }
.activites-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid rgba(0,0,0,0.1); padding-top: 40px; }
.activite-item { display: flex; flex-direction: column; }
.activite-icone { width: 48px; height: 48px; border-radius: 8px; margin-bottom: 16px; }
.activite-nom { font-family: var(--font-titre); font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.activite-desc { font-size: 0.85rem; color: var(--gris-texte); line-height: 1.55; }
/* FOOTER */
.site-footer { background-color: var(--creme); padding: 40px 80px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(0,0,0,0.08); }
.footer-logo { font-family: var(--font-titre); font-weight: 900; font-size: 1.8rem; }
.footer-info { text-align: right; font-size: 0.8rem; color: var(--gris-texte); line-height: 1.8; }
.footer-info a { color: var(--gris-texte); text-decoration: underline; text-underline-offset: 3px; }
/* RESPONSIVE */
@media (max-width: 900px) {
  .site-header { padding: 16px 24px; }
  .site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .hero-croc, .hero-choubi { grid-template-columns: 1fr; padding: 80px 24px 40px; min-height: auto; }
  .hero-croc-image, .hero-image-wrapper { height: 100vw; }
.hero-image-wrapper img { height: 100vw; }
  .hero-choubi-image { height: 75vw; }
.hero-choubi-image img {
  bottom: -5vw !important;
  left: 2vw !important;
}
@keyframes sautChoubiMobile {
  0%   { transform: translateY(400px) scale(0.4) rotate(-14deg); opacity: 0; }
  40%  { transform: translateY(-60px) scale(1.14) rotate(4deg); opacity: 1; }
  60%  { transform: translateY(20px) scale(0.95) rotate(-2deg); opacity: 1; }
  75%  { transform: translateY(-18px) scale(1.05) rotate(2deg); opacity: 1; }
  100% { transform: translateY(0) scale(1) rotate(0deg); opacity: 1; }
}
.hero-choubi-image.animate img {
  animation: sautChoubiMobile 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
}

  .hero-choubi-texte { padding: 40px 24px; text-align: left; }
  .livres-section, .personnages-section, .activites-section { padding: 40px 24px; }
  .personnages-grille { grid-template-columns: repeat(2, 1fr); }
  .activites-grille { grid-template-columns: 1fr; }
  .site-footer { flex-direction: column; gap: 16px; padding: 32px 24px; }
  .footer-info { text-align: center; }
  .section-number { left: 24px; }
  .perso-decoratif {
  display: block !important;
  position: relative !important;
  width: 140px !important;
  margin: 0 auto 20px !important;
  right: auto !important;
  top: auto !important;
}
.perso-decoratif .notes {
  width: 60px !important;
}

}
/* BADGE NOUVEAU */
.badge-nouveau-wrap {
  margin-top: 24px;
  overflow: visible;
}
.badge-nouveau {
  width: 270px;
  height: 270px;
  display: inline-block;
  overflow: visible;
  filter: drop-shadow(2px 4px 8px rgba(0,0,0,0.18));
  animation: badge-spin 8s linear infinite;
  will-change: transform;
}
@keyframes badge-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* ===== AUTRES ALBUMS ===== */
section.autres-albums-section,
.autres-albums-section {
  background-color: #3a6bc9 !important;
  padding: 80px 60px !important;
  display: block !important;
}
.autres-albums-inner {
  max-width: 1100px;
  margin: 0 auto;
}
.autres-albums-titre {
  font-family: var(--font-titre);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 900;
  color: #ffffff;
  margin-bottom: 60px;
  letter-spacing: 0.05em;
}
.etagere-wrap {
  margin-bottom: 0px;
}
.etagere-livres {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 20px !important;
  padding-bottom: 0 !important;
}
.etagere-planche {
  width: 100%;
  height: 6px;
  background: rgba(0,0,0,0.25);
  border-radius: 2px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  margin-bottom: 40px;
}
.livre-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  transition: transform 0.2s ease;
}
.livre-item:hover { transform: translateY(-6px); }
.livre-item img {
  height: 150px;
  width: auto;
  object-fit: contain;
  border-radius: 3px;
  box-shadow: 3px 4px 12px rgba(0,0,0,0.35);
  display: block;
}
.livre-titre, .livre-date { display: none !important; }
.livre-item.epuise img {
  opacity: 0.55;
  filter: grayscale(30%);
}
.epuise-tag { display: none; }
.nouveaux-serie {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
}
.typo-nouveaux { display: none !important; }
.nouveaux-livres {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: flex-end !important;
  justify-content: center !important;
}
.nouveaux-livres img {
  height: 80px !important;
  width: auto !important;
  opacity: 0.55;
  filter: grayscale(30%);
}/* Titre page À propos */
.page-template-default .entry-title {
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    color: #7a7a72 !important;
}
h1.wp-block-post-title {
    display: none !important;
} 
}/* Supprime l'espace en haut des pages intérieures */
.wp-block-post-content {
    padding-top: 0 !important;
    margin-top: 0 !important;
}
.wp-block-group {
    padding-top: 0 !important;
    margin-top: 0 !important;
}.wp-block-post-content > * {
    background: #ffffff !important;
}
.wp-site-blocks {
    background: #ffffff !important;
}.wp-site-blocks > * {
  max-width: none !important;
  width: 100% !important;
}.autres-albums-section {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}img {
  pointer-events: none !important;
  -webkit-user-drag: none !important;
  user-select: none !important;
}
@media (max-width: 600px) {
.badge-nouveau-wrap {
  width: 70px !important;
  height: 70px !important;
  margin-top: 20px !important;
  margin-bottom: -50px !important;
  animation: none !important;
}
.badge-nouveau-wrap svg.badge-nouveau {
  width: 70px !important;
  height: 70px !important;
  animation: none !important;
}
}
@media (max-width: 600px) {
  .site-nav {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 12px !important;
  }
}html {
  -webkit-text-size-adjust: 100% !important;
  text-size-adjust: 100% !important;
}.wp-block-navigation a,
.wp-block-navigation-item__content {
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 0.75rem !important;
  color: #1a1a1a !important;
}footer p {
  font-size: 12px !important;
  line-height: 1.4 !important;
}.wp-block-site-title a, .wp-block-site-title {
  font-family: var(--font-titre) !important;
  font-weight: 900 !important;
  font-size: 1.1rem !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--noir) !important;}
html body a,
html body a:link,
html body a:visited,
html body nav a,
html body .wp-block-navigation-item a {
  text-decoration: none !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
  transition: color 0.15s ease !important;
}
html body a:hover,
html body a:active,
html body a:focus,
html body nav a:hover,
html body nav a:focus,
html body .wp-block-navigation-item a:hover,
html body .wp-block-navigation-item a:focus {
  color: #DFFF00 !important;
  text-decoration: none !important;
  outline: none !important;}
html body a:hover .accent-orange,
html body a:hover .accent-vert {
  color: #DFFF00 !important;
}html body .wp-block-navigation-item.current-menu-item a,
html body .current-menu-item a {
  color: #DFFF00 !important;
}
html body * {
  -webkit-tap-highlight-color: transparent !important;
}
/* Menu mobile en bandeau compact au lieu du plein écran */
.wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-dialog {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: auto !important;
  max-height: 60vh !important;
  background: var(--creme) !important;
  padding: 70px 24px 24px !important;
  overflow-y: auto !important;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
.wp-block-navigation__responsive-dialog .wp-block-navigation-item {
  margin-bottom: 14px !important;
}
.wp-block-group.alignwide.is-layout-flow.wp-block-group-is-layout-flow > .wp-block-group.alignfull.is-content-justification-space-between:last-child {
  display: none !important;
}
footer .wp-block-spacer {
  display: none !important;
}
footer.wp-block-template-part > .wp-block-group {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}header.wp-block-template-part {
  background-color: var(--creme) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06) !important;
}
.page-id-255 body, .page-id-255 html {
  margin: 0 !important;
  padding: 0 !important;
}
@keyframes respire {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.02); }
}
.cliquable {
  animation: respire 3.5s ease-in-out infinite;
}
@media (min-width: 768px) and (max-width: 1024px) {
  .hero-image-wrapper { height: 65vh; }
  .hero-croc-image { height: auto; }
  .hero-image-wrapper img { height: 60vh; max-width: 55vw; }
  .hero-choubi { min-height: auto; padding: 60px 0; }
  .hero-choubi-image { height: 60vh; }
  .personnages-section { padding-right: 80px; }
  .perso-decoratif { width: 280px; }
  .perso-decoratif .notes { top: 120px; width: 90px; }
}