/*
Theme Name: child 2025
Theme URI: 
Author: Co
Author URI: 
Description: The child
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 5.7
Version: 
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: twentytwentyfive
Text Domain: child-2025
Tags: 
*/

/* Permet à la dernière section de remonter jusqu'au menu */
#contact {
  /* min-height: 80vh !important;  Force la section à occuper au moins 80% de l'écran */
  padding-top: 100px !important; /* Donnes de l'espace en bas */
}

.footer-simple {
    margin-top: 0;
    background-color: #E6E6E6;
}

/* 1. Bloque la fuite des marges des titres/textes à l'intérieur du footer */
footer, 
.wp-block-template-part-footer {
  display: flow-root !important;
  margin-top: 0 !important;
}

/* 2. Annule l'écart automatique injecté par WordPress entre la page et le footer */
.wp-site-blocks > * + footer,
main + footer {
  margin-top: 0 !important;
}

/* 3. Annule la marge basse automatique de la grille d'articles */
.wp-block-query,
.wp-block-post-template {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

html {
  /* Active le défilement fluide lors du clic sur un lien d'ancre */
  scroll-behavior: smooth;

  /* Décale le point d'arrêt de l'ancre sous ton menu fixe */
  scroll-padding-top: 80px; /* Remplace 80px par la hauteur exacte de ton menu */
}

.wp-block-column {
  overflow-wrap: break-word;
  word-break: break-word;
  text-align: center !important;
}



/* ---- CONTENUS CACHÉS ---- */

/* État fermé par défaut */
.contenu-cache {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s ease-in-out, opacity 0.3s ease;
}

/* 1. ÉTAT OUVERT */
.contenu-cache.visible {
    max-height: 1000px;
    opacity: 1;
}

/* Image à l'ouverture (monte) */
.contenu-cache.visible img,
.contenu-cache.visible a {
    display: inline-block;
    animation: glisseEntree 0.5s ease-out forwards;
}

/* 2. ÉTAT FERMETURE (pendant les 300ms de setTimeout) */
.contenu-cache.is-closing img,
.contenu-cache.is-closing a {
    display: inline-block;
    animation: glisseSortie 0.3s ease-in forwards;
}

/* ---- ANIMATIONS ---- */

@keyframes glisseEntree {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes glisseSortie {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(30px);
    }
}

/* ---- ANIMATION BOUNCE ET INFOBULLE (Toutes les flèches) ---- */

/* 1. Rebond appliqué à la flèche quand le JS ajoute .anim-bounce */
.toggle-arrow.anim-bounce {
    animation: francBounce 0.8s cubic-bezier(0.36, 0.07, 0.19, 0.97) 6;
}



/* Flèche ouverte */
.toggle-arrow.active {
    transform: rotate(180deg);
}

/* ---- KEYFRAMES ---- */

@keyframes francBounce {
    0%, 100% { transform: translateY(0); }
    30% { transform: translateY(-8px); }
    60% { transform: translateY(3px); }
}


/* ---- REALISATIONS ----- */

img.apercu {
    max-width: 500px;
    height: auto;
}

.realisations {
    position: relative;
    padding-right: 55px; /* Empêche le texte de passer sous la flèche */
}

.toggle-arrow {
    position: absolute;
    left: 85%;
    bottom: 50px;
    cursor: pointer;
    width: 45px;
    transition: transform 0.4s ease;
}

.toggle-arrow.active {
    transform: rotate(180deg);
}

/*bordure*/

.wp-block-navigation-item {
border-right: 1px solid white !important;
padding-right: 20px !important;
}

.wp-block-navigation-item:last-child {
border-right: none !important;
}

@media (max-width: 768px) { /* Taille pour tablettes et mobiles */
  .accroche {
    opacity: none !important;
  }
}

/* Positionnement pour le menu One-Page */
.wp-block-navigation-item {
  position: relative !important;
}

/* Texte de l'onglet actif en vert */
.wp-block-navigation a.active {
  color: #04D98B !important;
}

/* Rond vert sous l'onglet actif */
.wp-block-navigation a.active::after {
  content: '' !important; 
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  background-color: #04D98B !important;
  border-radius: 50% !important;
  position: absolute !important;
  bottom: -10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}