/*
Theme Name: Ollie Child 
Theme URI: 
Author: David
Template: ollie
Author URI: https://webistor.fr
Description: Thème enfant de Ollie
Requires at least: 6.8
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ollie-child
*/


/* ===== ANIMATION BURGER MENU MOBILE WP ===== */

/* on retire le menu WP du flux en mobile */
@media (max-width: 851px) {

    #nav-4 {
        position: absolute;
        width: 0;
        height: 0;
        overflow: hidden;
    }
}

/* on cache la croix WP native (mais on garde sa fonction) */
#nav-4 .wp-block-navigation__responsive-container-close {
    display: none;
}

/* construction du burger-custom - lignes */
.burger-custom span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    border-radius: 3px;
    background: #D7383A;
    transition: 
        transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.2s ease;
}

/* positions */
.burger-custom span:nth-child(1) { top: 3px; }
.burger-custom span:nth-child(2) { top: 50%; transform: translateY(-50%); }
.burger-custom span:nth-child(3) { bottom: 3px; }

/* ligne du bas plus courte */
.burger-custom span:nth-child(3) {
    width: 70%;
    right: 30%;
}

/* animation → croix */
.burger-custom.is-active span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
}

.burger-custom.is-active span:nth-child(2) {
    opacity: 0;
}

.burger-custom.is-active span:nth-child(3) {
    width: 100%; /* rétablit la largeur pendant l’animation */
    transform: translateY(-10px) rotate(-45deg);
}

/* effet "TAP" mobile */
.burger-custom:active {
    transform: scale(0.92);
}

@media (hover: hover) {
    .burger-custom:hover span:nth-child(1) {
        transform: translateY(-2px);
    }

    .burger-custom:hover span:nth-child(3) {
        transform: translateY(2px);
    }
}

/* base, état normal */
.burger-custom {
    z-index: 10001; /* garder le burger au dessus de l'overlay */
    width: 36px;
    height: 26px;
    display: none;
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}

/* en mobile uniquement */
@media (max-width: 851px) {
    .burger-custom {
        display: block;
    }
}

/* position et état de la croix dans l'overlay */
.burger-custom.is-overlay {
    position: fixed;
    top: 10px;
    right: 5px;
    z-index: 10001;
    background: rgba(0,0,0,0.06);
    border-radius: 50%;
    padding: 10px;
}

/* Animation overlay (menu) s'ouvre derrière le burger */

#nav-4 .wp-block-navigation__responsive-container {
    z-index: 10000; /* s'ouvre derrière le burger */
    padding-top: 0px;
}

.wp-block-button__link:active {
    transform: scale(0.97);
}

.mobile-menu a {
    transition: color 0.2s ease;
}


/* ===== comportements BOUTONS PAR DÉFAUT WP + Bouton alt.json crée ===== */

/* ===== bouton WP ===== */
.wp-element-button,
.wp-block-button__link {
    transition: 
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    box-shadow: 0 0 0 rgba(0,0,0,0); /* micro profondeur */
}

/* ===== HOVER bouton WP ===== */
.wp-element-button:hover,
.wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* ===== ACTIVE (clic) bouton WP ===== */
.wp-element-button:active,
.wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ===== bouton ALT ===== */
.wp-block-button.is-style-alt .wp-block-button__link {
    transition: 
        background-color 0.25s ease,
        color 0.25s ease,
        border-color 0.25s ease,
        transform 0.15s ease,
        box-shadow 0.15s ease;
    border: 1px solid var(--wp--preset--color--red-background);
}

/* HOVER spécifique ALT */
.wp-block-button.is-style-alt .wp-block-button__link:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
    background-color: #b32223;
    color: var(--wp--preset--color--white-primary);
}

/* ACTIVE ALT */
.wp-block-button.is-style-alt .wp-block-button__link:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

/* ===== FIN comportements Bouton WP et Alt ===== */


/* ===== FAQ CONTAINER ===== */

.faq {
  width: 100%;
}

/* ===== ITEM ===== */

.faq-item {
  border-bottom: 1px solid rgb(234,210,210);
  padding: 16px 20px;
  transition: all 0.25s ease;
  display: block;
}

.faq-item:hover {
  background: #fef2f2;
}

.faq-item.active {
  background: #fef2f2;
  border-radius: 8px;
}

.faq-item:not(:last-child) {
  margin-bottom: 10px;
}

/* ===== QUESTION ===== */

.faq-question {
  width: 100%;
  text-align: left;
  padding: 22px 48px 0 0;
  font-size: 20px;
  line-height: 1.4;
  font-weight: 500;
  background: none;
  border: none;
  cursor: pointer;
  position: relative;
}

/* ===== ICÔNE CROIX ===== */

.faq-question::after,
.faq-question::before {
  content: "";
  position: absolute;
  right: 0px;
  top: 50%;
  width: 16px;
  height: 2px;
  background: #000;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
  opacity: 0.7;
  transform-origin: center;
}

/* trait horizontal */
.faq-question::after {
  transform: translateY(-50%) rotate(0deg);
}

/* trait vertical */
.faq-question::before {
  transform: translateY(-50%) rotate(90deg);
  transition-delay: 0.05s;
}

/* ✔️ NOUVEAU : rotation 180° au hover */

.faq-item:hover .faq-question::after {
  transform: translateY(-50%) rotate(180deg);
}

.faq-item:hover .faq-question::before {
  transform: translateY(-50%) rotate(270deg);
}

/* accentuation */
.faq-item:hover .faq-question::after,
.faq-item:hover .faq-question::before {
  opacity: 0.9;
}

/* ===== ANSWER ===== */

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* contenu interne */
.faq-answer > * {
  padding: 0 0 20px 0;
}

/* animation texte */
.faq-answer p,
.faq-answer ul {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;;
}

.faq-item.active .faq-answer p,
.faq-item.active .faq-answer ul {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

/* ===== TYPO ===== */

.faq-answer ul {
  padding-left: 20px;
  margin: 10px 0;
}

.faq-answer li {
  margin-bottom: 8px;
}

.faq-answer p {
  margin: 10px 0;
}

/* ===== FIN FAQ ===== */


/* ===== List-style marque ===== */

.is-style-list-brand {
  list-style: none;
  padding-left: 0;
}

.is-style-list-brand li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 0.6em;
}

.is-style-list-brand li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: 1.5px solid #D7383A;
}

/* ===== FIN List-style marque ===== */