/**
Theme Name: Spot Plongée Child
Author: Web Pilot
Author URI: http://wpastra.com/about/
Description: Spot Plongée Child est un thème enfant rapide, ultra personnalisable et visuellement attrayant, parfait pour les blogs, portfolios personnels ou sites professionnels. Léger comme une plume, il garantit des performances fulgurantes et un chargement ultra rapide.

Pensé pour le référencement (SEO), ce thème intègre les balises schema.org pour optimiser votre visibilité sur les moteurs de recherche. Il vous offre un large éventail d’options de mise en page, de zones de widgets et de barres latérales pour une personnalisation complète, sans toucher au code.

Envie de construire vos pages à votre façon ? Ce thème enfant est 100 % compatible avec vos constructeurs de pages préférés (Elementor, Beaver Builder, etc.). Il intègre également des modèles prédéfinis pour vous faire gagner du temps et de l’inspiration.

Parmi ses nombreux atouts :
✅ Prêt pour WooCommerce
✅ Entièrement responsive (adapté mobile/tablette)
✅ Compatible avec les extensions majeures
✅ Prêt pour la traduction et multilingue
✅ Extensible avec des modules premium
✅ Mis à jour régulièrement
✅ Conçu, développé et soutenu par Web Pilot - Loran

Vous cherchez un thème de base solide pour démarrer votre site WordPress ? Ne cherchez plus : Spot Plongée child est rapide, flexible et terriblement efficace.
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: spot-plongee-child
Template: astra
*/

@import url('https://fonts.googleapis.com/css2?family=Concert+One&family=League+Spartan:wght@100..900&display=swap');

/* ==== IMPORT CSS CONTACTFORM7 === */
@import url("contactform7.css");

/* ==== VARIABLE COLOR === */
:root {
  --Bleu: #40798C;
  --Rouge: #C3423F;
  --Blanc: #ffffff;
  --Sable:#E8AE68;
  --turquoise: #b7E3CC;
  --londrina: "Londrina Solid", sans-serif;
  --beige: #fffbf2;
  --noir: #14110F;
  --monserrat: "Monserrat", sans-serif;
  --radiusBtn: 5px;
  --HoverBtn: #302325;
  --Concert: "Concert One",sans-serif;
}

/* lINKS COLOR */
a {
  color: var(--Bleu);
}
a:hover{
  color: #E8AE68;
}


/* ----- HEADER ---- */

#ast-desktop-header {
 /* background-color: #c3733d; */
 opacity: 0.8;
}
.ast-above-header-wrap {
  background-color: var(--Rouge);
}

/* ------- MAIN CONTAINER --------- */
.ast-row {
  margin-top: 200px;
}
.hero-container {
  margin-top: 100px;
}


/* --------- RETURN BUTTON TOP OFF --------------- */
#ast-scroll-top {
  background-color: var(--Rouge);
}
.wp-block-button .wp-block-button__link {
  background-color: var(--Rouge);
  padding: 10px 20px 10px 20px;
}



/* ------- NAVBAR ------- */

.main-header-menu .sub-menu {
  background: var(--noir);
  opacity: 0.8;
}
.ast-header-button-1 .ast-custom-button {
background: var(--Rouge);
}
.ast-header-button-1 .ast-custom-button:hover {
background: var(--Rouge);
}
/* pré-header au-dessus */
.ast-above-header { z-index: 10000; } 
/* Navbar fixe, sous le pré-header au départ */
.main-header-bar {
  position: fixed;
  top: 40px; 
  left: 0; 
  right: 0;
  z-index: 9999;
  /*transition: background 0.3s ease;
  background: transparent;
  min-height: 100px;*/
  background: transparent;
  transition: background 0.3s ease, padding 0.3s ease;
  padding: 22px 0; /* texte bien centré dans 100px de haut */
}
/* Quand on scroll -> colle en haut */
#ast-desktop-header > div.ast-main-header-wrap.main-header-bar-wrap > div.scrolled {
  background: #14110F !important;
  /*opacity: 1 !important;*/
  top: 0;
  padding: 15px 0; /* navbar plus compact texte reste centré */
  /*height: 130px;*/
}
/* ↓↓↓ AJOUTS MINIMAUX POUR QUE LE TEXTE RESTE CENTRÉ ↓↓↓ */
/* air aux liens du menu au départ */
.main-header-bar .main-header-menu > li > a {
  padding-top: 14px !important;
  padding-bottom: 14px !important;
}
/* En mode scrolled moins d'air mais toujours centré */
.main-header-bar.scrolled .main-header-menu > li > a {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}
#ast-desktop-header .scrolled,
#ast-desktop-header .main-header-bar.scrolled,
#ast-desktop-header > div.ast-main-header-wrap.main-header-bar-wrap > div.scrolled {
  background: #14110F !important;
  background-color: #14110F !important;
}
.elementor-kit-52 {
  background: none !important;
  background-color: transparent !important;
}
/* Logo quand on scroll */
.main-header-bar.scrolled .site-logo-img img {
  content: url("/wp-content/uploads/2025/09/Logo-V-Finale_redGorgone_inversion-300x60.png");
}




/* ===== DESKTOP : noir 100% au scroll, aucun voile par-dessus ===== */
@media (min-width: 922px) {

  /* 1) Force le noir plein sur la barre scrolled */
  #ast-desktop-header .main-header-bar.scrolled,
  #ast-desktop-header .ast-primary-header-bar.scrolled {
    background: #14110F !important;
    background-color: #14110F !important;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
  }

  /* 2) Tue TOUT overlay/pseudo-élément qui pourrait voiler le header */
  #ast-desktop-header .ast-main-header-wrap::before,
  #ast-desktop-header .ast-main-header-wrap::after,
  #ast-desktop-header .main-header-bar-wrap::before,
  #ast-desktop-header .main-header-bar-wrap::after,
  #ast-desktop-header .ast-primary-header-bar::before,
  #ast-desktop-header .ast-primary-header-bar::after,
  #ast-desktop-header .main-header-bar::before,
  #ast-desktop-header .main-header-bar::after,
  .ast-transparent-header #ast-desktop-header .ast-primary-header-bar::before,
  .ast-transparent-header #ast-desktop-header .main-header-bar::before {
    content: none !important;
    background: none !important;
    opacity: 1 !important;
  }

  /* 3) S’il reste une opacité sur un wrapper, on la neutralise */
  #ast-desktop-header,
  #ast-desktop-header .ast-main-header-wrap,
  #ast-desktop-header .main-header-bar-wrap {
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
  }
}


/* ===== MOBILE (<= 921px) : header fixe, logo plus petit, fond noir au scroll ===== */
@media (max-width: 921px) {

  /* Header mobile : fixé tout en haut, transparent au départ */
  #ast-mobile-header .main-header-bar {
    position: fixed;
    top: 0;                /* en mobile, pas de pré-header → on colle au top */
    left: 0; right: 0;
    z-index: 9999;
    background: transparent;
    transition: background 0.3s ease, padding 0.3s ease;
    padding: 12px 0;       /* respiration de base */
  }

  /* Réduire le logo en mobile */
  #ast-mobile-header .site-logo-img img {
    max-height: 28px;      /* ajuste 24–32 si besoin */
    height: auto; width: auto;
  }

  /* Fond noir + barre un peu plus compacte au scroll */
  #ast-mobile-header .main-header-bar.scrolled {
    background: #14110F !important;
    opacity: 1 !important;
    padding: 8px 0;        /* bandeau plus fin au scroll */
  }

  /* Logo encore un poil plus petit au scroll (optionnel) */
  #ast-mobile-header .main-header-bar.scrolled .site-logo-img img {
    max-height: 24px;
  }

  /* Burger : zone cliquable confortable, sans toucher l’alignement */
  #ast-mobile-header .menu-toggle {
    padding: 6px 10px;
  }

  /* Pas d’espace parasite en haut (si tu avais ajouté un padding-top global) */
  body { padding-top: 0 !important; }
}

/* Offset uniquement si tu es connecté (barre d’admin WP) */
@media (max-width: 782px) {
  html.admin-bar #ast-mobile-header .main-header-bar { top: 46px; }
}




/* ----------------- FOOTER ------------------- */ 

#block-11 {
font-size: 14px;
}

.ast-builder-html-element p {
  font-size: 14px;
}

.site-primary-footer-wrap  {
  padding-top: 10px;
  padding-bottom: 10px;
}
.site-below-footer-wrap {
  padding-top: 0px;
  padding-bottom: 0px;
}
.site-below-footer-wrap .ast-builder-grid-row {
  align-items: center;
}
#block-11 {
  padding-bottom: 0px;
}

/* Réduire la hauteur du copyright Astra */
.site-below-footer-wrap {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
  background-color: #303030 !important;

}
.ast-footer-copyright {
  padding: 0 !important;
  margin: 0 auto !important;
  font-size: 12px; /* tu peux ajuster */
  line-height: 1.2;
  text-align: center; /* si tu veux le centrer */
}
.site-below-footer-wrap .site-footer-section p {
  margin: 0 !important;
}

.footer-widget-area[data-section="sidebar-widgets-footer-widget-2"] {
  margin-top: 0px;
}



/* -------------- COLOR FOR HEADER - ACTUALITES'PAGE (ID=266) --------------- */
.page-id-266 .main-header-bar,
.page-id-266 .ast-primary-header-bar,
.page-id-266.ast-transparent-header .main-header-bar,
.page-id-266.ast-header-break-point .main-header-bar,
.page-id-266 .site-header {
  background-color: var(--Bleu) !important;
}

/* Garder le filtre au dessus des articles visible sous 1550px */
@media (max-width: 1550px){
  .elementor-266 .elementor-element.elementor-element-8275af5 .wpr-grid-filters{
    display: block !important; 
}
}
/* 2) Et on choisit nous-mêmes où le masquer (ex. < 480px) */
@media (max-width: 480px){
  .elementor-266 .elementor-element.elementor-element-8275af5 .wpr-grid-filters{
    display: none !important;
  }
}


/* -------------- STYLE FOR SINGLE.PHP --------------- */

.ast-container {
    display: flex;
    flex-direction: column;
}
.container__category__title {
  margin-top: 130px;
  font-size: 34px;
}
.container__category__title h1 {
  font-size: 40px;
  text-align: center;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: var(--noir);
}
/* Fond + "full-bleed" du wrapper #single uniquement sur les single posts */
body.single-post #single {
  background-color: var(--Blanc);
  /* fait déborder #single sur toute la largeur de la fenêtre,
     même si le thème met un container centré et limité */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Contenu lisible et large à l'intérieur */
body.single-post #single > article {
  max-width: 1200px;    /* ajuste la largeur "contenu" souhaitée */
  width: 100%;
  margin: 0 auto;
  padding: 32px 24px;   /* un peu d’air sur les côtés */
}

/* Thumbnail en pleine largeur du contenu, sans débord */
body.single-post #single .post__thumbnail img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
}

/* largeur de colonne texte confortable */
body.single-post #single .post__content {
  max-width: 90ch;      /* lisibilité optimale */
  margin: 0 auto;
  border-radius: 5px;
  background-color: #b5cbd2;
  padding-left: 50px;
  padding-right: 50px;
  padding-top: 40px;
  padding-bottom: 20px;
  margin-top: 10px;
  margin-bottom: 30px;
}

.post__thumbnail img {
  border-radius: 5px;
}
.post__content {
  padding-top: 40px;
}
.post__content p {
  font-size: 16px;
}
.post__content h2 {
  font-size: 22px;
  text-transform: uppercase;
  padding: 5px;
}

@media screen and (max-width: 800px) {
.container__category__title h1 {
  font-size: 28px;
  text-align: center;
  margin-bottom: 10px;
  text-transform: uppercase;
  color: var(--noir);
}
.post__content p {
  font-size: 14px;
}
.post__content h2 {
  font-size: 18px;
  text-transform: uppercase;
  padding: 5px;
}
 .post__content {
  padding-top: 20px !important;
  padding-right: 10px !important;
  padding-left: 10px !important;
}

}


/* Couleur de fond du header UNIQUEMENT sur les single posts */
body.single-post header,
body.single-post .site-header,
body.single-post #masthead,
body.single-post .main-header-bar,
body.single-post .site-header-main,
body.single-post .elementor-location-header { /* si ton header vient d'Elementor */
background-color: var(--Bleu); /* <-- mets ta couleur */
}

 /*header chevauche le contenu (header en overlay), ajoute un padding en haut du contenu*/
body.single-post .site-content,
body.single-post .content-area {
padding-top: clamp(60px, 8vh, 100px);
}



#single article .post__meta {
    display: flex;
    padding: 2%;
    width: 50%;
    flex-direction: column;
    justify-content: center;
}
#single article .post__meta p {
   color: var(--HoverBtn);
}
#single .post__meta ul {
    display: flex;
    align-items: center;
    padding: 0;
    margin: 0;
}

#single .post__meta li {
    list-style: none;
    margin: 2px 2px;
    border: 1px solid var(--noir);
    padding: 4px 20px;
    border-radius: 5px;
      font-size: 13px;


}
.post__title {
  margin-bottom: 2px;
  font-style: italic;
  font-size: 14px;
}
.post__author {
  margin-bottom: 2px;
  margin-top: 5px;
  font-style: italic;
  font-size: 14px;
}
.post_nav {
  margin-bottom: 2px;
  margin-top: 5px;
  font-style: italic;
  font-size: 14px;
}
.post-nav__prev {
  font-style: italic;
  font-size: 14px;
  color: var(--HoverBtn);
}
.post-nav__next {
  font-style: italic;
  font-size: 14px;
  color: var(--HoverBtn);
}

@media screen and (max-width: 800px) {

.post__section {
  background-color:#cbf4f6;
  opacity: 0.6;
  border-radius: 5px;
  }
.post_nav {
  margin-bottom: 2px;
  margin-top: 5px;
  font-style: italic;
  font-size: 12px;
}
.post__title {
  margin-bottom: 2px;
  font-style: italic;
  font-size: 12px;
}
.post__author {
  margin-bottom: 2px;
  margin-top: 5px;
  font-style: italic;
  font-size: 12px;
}
#single .post__meta li {
  font-size: 13px;
}
.post-nav__prev {
  font-style: italic;
  font-size: 13px;
  color: var(--HoverBtn);
}
.post-nav__next {
  font-style: italic;
  font-size: 13px;
  color: var(--HoverBtn);
}

}



/* ---- CSS PAGE 404 MAISON  ---- */

/* Cache header + footer */
body.error404 .site-header,
body.error404 .main-header-bar,
body.error404 .site-footer {
  display: none !important;
}

/* Transparence sans toucher .site-content cette fois ! */
body.error404 #page,
body.error404 .site {
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
}


body.error404 .site .site-content {
  min-height: 100vh;
  background: url("/wp-content/themes/spot-plongee-child/assets/img/Plongeur-Apnée-remonte-des-pronfondeurs.jpg")
              no-repeat center center / cover !important;
  display: grid;
  place-items: center;
  padding: clamp(24px, 5vw, 80px);
}

body.error404 .btn-home {
  display: inline-block;
  margin-top: 20px;
  padding: 14px 24px;
  background: var(--Rouge);
  color: var(--beige);
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 6px 14px rgba(0,0,0,.2);
  transition: all .2s ease;
  font-family: var(--Concert);
}
body.error404 .btn-home:hover {
  background: var(--Rouge);
  transform: translateY(-2px);
  color: var(--noir);
  transform: translateY(-2px) scale(1.05);
}

.page-title {
  color: var(--beige);
}
.page-title p {
  color: #c5c2c2;
}

/* ===== Effet bulles – couche décorative ===== */
body.error404 .bubble-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0; /* derrière le texte */
  overflow: hidden;
}

body.error404 .bubble-layer span {
  position: absolute;
  bottom: -60px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.9), rgba(200,240,255,.2) 60%, transparent 70%);
  animation: bubble-rise linear infinite;
}

/* Variations */
body.error404 .bubble-layer span:nth-child(1) { left: 15%; animation-duration: 12s; }
body.error404 .bubble-layer span:nth-child(2) { left: 35%; animation-duration: 14s; animation-delay: 2s; transform: scale(.8); }
body.error404 .bubble-layer span:nth-child(3) { left: 55%; animation-duration: 11s; animation-delay: 1s; transform: scale(1.2); }
body.error404 .bubble-layer span:nth-child(4) { left: 75%; animation-duration: 16s; animation-delay: 3s; }
body.error404 .bubble-layer span:nth-child(5) { left: 90%; animation-duration: 13s; animation-delay: 1.5s; transform: scale(.9); }

@keyframes bubble-rise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  10%  { opacity: .8; }
  100% { transform: translateY(-110vh) translateX(20px); opacity: 0; }
}

/* --- */

@media (min-width:1551px){

  /* Fond déjà validé */
  body.error404 {
    background: url("/wp-content/themes/spot-plongee-child/assets/img/Plongeur-Apnée-remonte-des-pronfondeurs.jpg")
                no-repeat center center / cover !important;
  }
}






/* --- CSS COOKIES BANNER ---*/
.cky-consent-container {
  width: 550px !important;
}


/* CHANGEMLENT DE COULEUR DES PREMIERS MOTS DE LA SECTION AVEC LISTE SUR LA HOME PAGE */
.highlight-term {
  color: var(--Rouge);
  font-weight: 700;
}