/*
Theme Name: Agence ho5
Theme URI: https://labaleinebasque.fr
Author: the WordPress team
Author URI: https://wordpress.org
Description: Agence ho5 emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/* === Global === */
/* Par défaut : logo blanc */
.site-logo img {
  content: url("/wp-content/themes/agenceho5/assets/images/logos/logoho5horizontal_blanc.svg");
}

body.single-projet .site-logo img {
  content: url("/wp-content/themes/agenceho5/assets/images/logos/logoho5-rose.svg");
}

.big-bold strong {
  font-size: 24px;
  font-weight: 700;
  line-height: 1;
}

.vertical-title {
  writing-mode: sideways-lr;
}

.entry-content {
  margin-block-start: 0px;
}

.fit-content {
  width: fit-content;
}

main {
  margin-top: 0 !important;
}

.flex-end {
  justify-content: flex-end;
}

/* Images alignées en hauteur dans un bloc colonnes */
.equal-images .wp-block-column {
  display: flex;
  align-items: stretch;
}

.equal-images figure {
  width: 100%;
  height: 100%;
}

.equal-images .wp-block-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.picto-arrow-down {
  height: auto !important;
}

/* Sur mobile on remet le comportement normal */
@media (max-width: 767px) {
  .equal-images .wp-block-column {
    display: block;
  }
  .equal-images .wp-block-image img {
    height: auto;
  }
}

@media screen and (max-width: 960px) {
  .site-logo img {
    max-width: 125px;
  }

  .vertical-title {
    writing-mode: horizontal-tb;
  }
}

.reveal-title {
  max-width: 800px !important;
}

/* === HEADER STRUCTURE === */
.header-container {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
}

/* === CONTENEUR === */
.burger-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #c3d5fb;
}

/* === LABEL === */
.burger-label {
  text-transform: lowercase;
  letter-spacing: 0.05em;
}

/* === BOUTON === */
.burger-button {
  background: #c3d5fb;
  border: none;
  cursor: pointer;
  width: 48px;
  height: 48px;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s ease, transform 0.2s ease;
}

.burger-button:hover {
  background: #b3c7f9;
  transform: scale(1.05);
}

/* === BARRES === */
.burger-button span {
  display: block;
  width: 25px;
  height: 2px;
  background: #f74e7b;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all 0.3s ease;
}

/* Espacement vertical recalibré pour 48px */
.burger-button span:nth-child(1) {
  top: 14px;
}
.burger-button span:nth-child(2) {
  top: 22.5px;
}
.burger-button span:nth-child(3) {
  bottom: 14px;
}

/* === ÉTAT ACTIF (croix) === */
.burger-button.active span:nth-child(1) {
  transform: translateX(-50%) rotate(45deg);
  top: 22.5px;
}
.burger-button.active span:nth-child(2) {
  opacity: 0;
}
.burger-button.active span:nth-child(3) {
  transform: translateX(-50%) rotate(-45deg);
  bottom: 22.5px;
}

/* === OVERLAY MENU (slide depuis le haut) === */

.menu-overlay.open {
  top: 0; /* <-- fait glisser le menu depuis le haut */
}

/* === CONTENU INTERNE === */

.menu-overlay.open .menu-overlay-inner {
  transform: translateY(0);
  opacity: 1;
}

/* === NAVIGATION === */
.overlay-nav {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: left;
}

.overlay-nav a {
  color: white;
  font-size: 2rem;
  text-decoration: none;
  transition: opacity 0.3s;
}

.overlay-nav a:hover {
  opacity: 0.6;
}

/* === FOOTER === */
.footer-cta {
  z-index: 2;
}

/* Cacher le CTA du footer sur les pages Trophées et Contact */
.page-id-204 footer .footer-cta,
.page-id-200 footer .footer-cta {
  display: none;
}

.footer-list {
  padding-left: 0px;
}

.footer-list li {
  list-style: none;
}

.footer-list a {
  color: white;
  text-decoration: none;
}

.footer-list a:hover {
  text-decoration: underline;
}

/* HERO  */

/* === HERO SECTION === */
.hero-section {
  /* display: flex;
  align-items: center; */
  background-color: #f74e7b;
  position: relative;
  min-height: 100vh;
  overflow: visible; /* plus de clipping */
}
.hero-bg {
  position: absolute;
  right: 0;
  bottom: -4.5rem;
  width: 80%;
  height: calc(100vh - 0.5rem);
}

/* === IMAGE BACKGROUND === */

.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* === CONTENU === */
.hero-content {
  position: relative;
  z-index: 2;
  /* max-width: 800px; */
  color: white;
}

.hero-title {
  font-family: "BioRhyme", serif;
  font-size: clamp(3rem, 8vw, 6rem);
  line-height: 1.1;
  font-weight: 800;
}

.hero-subtext {
  display: inline-block;
  background-color: #c3d5fb;
  color: #1f173e;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0.5rem 1rem;
  max-width: 80%;
  margin-top: 1rem;
}

/* === RESPONSIVE === */
@media (max-width: 900px) {
  .hero-section {
    flex-direction: column-reverse;
    justify-content: center;
    min-height: 700px;
    display: flex;
    gap: 16px;
    padding: 20px !important;
  }
  .hero-section > div {
    min-height: auto !important;
  }
  .hero-bg {
    position: relative;
    bottom: 0;
    right: 0;
    width: 100%;
    height: auto;
  }

  .hero-subtext {
    max-width: 100%;
  }
}

/* === HOME PAGE === */

.success-stories .wp-block-columns {
  min-height: 539px;
}

/* === Trophés === */
@media screen and (max-width: 768px) {
  div.trophes-intro {
    margin-top: -160px !important;
  }
}

/* === Archive SERVICE === */

.archive-description h3 {
  color: var(--wp--preset--color--primary);
  font-family: var(--wp--preset--font-family--plus-jakarta-sans);
  font-size: var(--wp--preset--font-size--l);
}

/* === SINGLE SERVICE === */
.arrow-down-scroll {
  position: absolute;
  animation: arrowBounce 1.4s infinite ease-in-out;
}

@keyframes arrowBounce {
  0% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 0.6;
  }
}

@media screen and (max-width: 1024px) {
  .arrow-down-scroll {
    display: none;
  }
}

body.single-service main > div {
  padding-top: 0px !important;
}
body.single-service div.header-container {
  background-color: transparent !important;
}

body.blog div.header-container,
body.search-results .header-container {
  background-color: var(--wp--preset--color--primary) !important;
}
body.single-service .burger-label {
  color: var(--wp--preset--color--secondary);
}

body.single-service .burger-button {
  background: var(--wp--preset--color--secondary);
}

body.single-service .burger-button span {
  background-color: var(--wp--preset--color--primary);
}

/* === Archive Projets === */
body.post-type-archive-projet div.header-container {
  background-color: transparent !important;
}

/* === SINGLE PROJECT === */
body.single-projet main > div {
  padding-top: 0px !important;
}

body.single-projet div.header-container {
  background-color: var(--wp--preset--color--secondary) !important;
}

body.single-projet .burger-label {
  color: var(--wp--preset--color--primary);
}

body.single-projet .burger-button {
  background: var(--wp--preset--color--primary);
}

body.single-projet .burger-button span {
  background-color: var(--wp--preset--color--secondary);
}

.grid-img-fw img {
  width: 100% !important;
  height: 100%;
}

/* === CONTACT=== */
.form-wrapper {
  z-index: 9;
}

body .gform_wrapper .wp-block-button__link {
  background: none !important;
  color: var(--wp--preset--color--rose-principale, #f74e7b) !important;
  border: 1px solid currentColor !important;
  border-radius: 50px !important;
  padding: 0.8em 1.6em !important;
  font-family: var(--wp--preset--font-family--biorhyme) !important;
  font-weight: 400;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

body .gform_wrapper .wp-block-button__link:hover {
  background: var(--wp--preset--color--rose-principale, #f74e7b) !important;
  color: white !important;
}

.gform-footer {
  justify-content: center !important;
}

/* BLOG  */

/* === Catégories style badges modernes === */
.wp-block-categories-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0;
  list-style: none;
}

.wp-block-categories-list li {
  margin: 0;
}

.wp-block-categories-list li a {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  background: var(--wp--preset--color--dark-blue);
  color: white;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.25s ease;
}

/* Nombre d'articles */
.wp-block-categories-list li a::after {
  content: attr(data-count);
  font-size: 0.8rem;
  opacity: 0.75;
}

/* Hover */
.wp-block-categories-list li a:hover {
  background: var(--wp--preset--color--primary);
  transform: translateY(-2px);
  /* color: var(--wp--preset--color--dark-blue); */
}

/* Services template  */

.entete-inner-wrapper {
  min-height: 50vh;
}

@media screen and (max-width: 768px) {
  .entete-wrapper {
  }

  div.entete-inner-wrapper {
    min-height: 250px;
  }
}

/* Single post  */
/* ============================================
   STYLES — Articles populaires ho5
   ============================================ */

.ho5-popular-posts {
  margin-top: 2rem;
}

.ho5-popular-title {
  font-size: 1.6rem;
  margin-bottom: 1.5rem;
}

/* --- Liste & items --- */
.ho5-popular-list {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ho5-popular-item {
  display: flex;
  gap: 1.2rem;
  padding: 1rem;
  background: var(--wp--preset--color--secondary); /* applat gris clair */
  overflow: hidden;
  transition: background 0.25s ease, transform 0.25s ease;
}

.ho5-popular-item:hover {
  background: var(--wp--preset--color--primary); /* applat bleu très léger */
  transform: translateY(-3px);
}

/* --- Image --- */
.ho5-popular-thumb {
  flex-shrink: 0;
  width: 120px;
  object-fit: cover;
  display: block;
  overflow: hidden;
}

.ho5-popular-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Contenu --- */
.ho5-popular-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.ho5-popular-cat {
  display: inline-block;
  background: var(--wp--preset--color--dark-blue); /* applat couleur primaire */
  color: white;
  padding: 4px 8px;
  font-size: 0.785rem;
  margin-bottom: 0.3rem;
  width: fit-content;
}

.ho5-popular-date {
  font-size: 0.8rem;
  color: var(--wp--preset--color--dark-blue);
  margin-bottom: 0.4rem;
}

/* --- Titre --- */
.ho5-popular-post-title {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
}

.ho5-popular-post-title a {
  color: #222;
  text-decoration: none;
}

.ho5-popular-post-title a:hover {
  text-decoration: underline;
}

/* --- Bouton Lire la suite --- */
.ho5-popular-readmore {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--wp--preset--color--primary);
  text-decoration: none;
  margin-top: 0.5rem;
  display: inline-block;
  text-decoration: underline;
}
.ho5-popular-item:hover .ho5-popular-readmore {
  color: white;
}

.ho5-popular-readmore:hover {
  text-decoration: none;
  color: white;
}

/* ============================================
     RESPONSIVE
     ============================================ */

/* Grand écrans → 2 colonnes */
@media (min-width: 760px) {
  .ho5-popular-list {
    grid-template-columns: 1fr 1fr;
  }
}

/* Très grands écrans → 3 colonnes */
@media (min-width: 1100px) {
  .ho5-popular-list {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* PAGINATION */
/* ============================================
   PAGINATION GUTENBERG — Style ho5
   ============================================ */

.wp-block-query-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin: 3rem 0;
  font-size: 1rem;
}

/* --- Container des numéros --- */
.wp-block-query-pagination-numbers {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}

/* --- Boutons numérotés --- */
.page-numbers {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 14px;
  background: var(--wp--preset--color--secondary); /* applat gris clair */
  color: var(--wp--preset--color--dark-blue);
  text-decoration: none;
  font-weight: 600;
  transition: background 0.25s ease, color 0.25s ease, transform 0.2s ease;
  box-sizing: border-box;
}

/* --- Page active --- */
.page-numbers.current {
  background: var(--wp--preset--color--primary); /* bleu ho5 */
  color: white;
  cursor: default;
  transform: none;
}

/* --- Hover numéros --- */
.page-numbers:not(.current):hover {
  background: #e1ecff; /* bleu très léger */
  color: var(--wp--preset--color--primary);
  transform: translateY(-2px);
}

/* --- "..." séparateurs --- */
.page-numbers.dots {
  background: transparent;
  color: #888;
  pointer-events: none;
  transform: none !important;
}

/* --- Lien "Suivante" et "Précédente" --- */
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--wp--preset--color--secondary);
  color: Var(--wp--preset--color--dark-blue);
  padding: 0.6rem 1.2rem;
  text-decoration: none;
  font-weight: 600;
  transition: background 0.25s ease, transform 0.2s ease;
}

.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
  background: var(--wp--preset--color--primary); /* bleu un peu plus foncé */
  transform: translateY(-2px);
}

/* --- Icône flèche --- */
.wp-block-query-pagination-next-arrow,
.wp-block-query-pagination-previous-arrow {
  font-size: 1rem;
}

/* ============================================
     RESPONSIVE
     ============================================ */
@media (max-width: 480px) {
  .page-numbers {
    min-width: 34px;
    height: 34px;
    font-size: 0.9rem;
  }

  .wp-block-query-pagination-next,
  .wp-block-query-pagination-previous {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* Animation des éléments de grilles HO5 Card

/* Transition uniquement sur ton picto */
.ho5-card .ho5-card-icon img,
.ho5-card .ho5-card-icon {
  transition: transform 0.25s ease;
}

/* Hover d'une carte → scale uniquement l'icône dans la carte */
.ho5-card:hover .ho5-card-icon img,
.ho5-card:hover .ho5-card-icon {
  transform: scale(1.2);
}

.ho5-card .wp-block-post-featured-image,
.ho5-card .wp-block-image {
  overflow: hidden;
}

.ho5-card .wp-block-post-featured-image img,
.ho5-card .wp-block-image img {
  transition: transform 1.8s cubic-bezier(0.19, 1, 0.22, 1); /* slow-out premium */
  transform-origin: center;
}

.ho5-card:hover .wp-block-post-featured-image img,
.ho5-card:hover .wp-block-image img {
  transform: scale(1.2) translateY(-3%);
}

/* ============================================
     CTA
     ============================================ */
@media screen and (max-width: 1024px) {
  div.cta-agence {
    margin: 0 !important;
  }
}