/*
Theme Name: astra child
Description: Thème enfant de Astra pour Pictelle Shop — protège les personnalisations de fichiers (templates EDD, etc.) contre les mises à jour du thème parent.
Author: Pictelle
Template: astra
Version: 1.0
*/

html, body {
  overflow-x: clip;
}

/* ==========================================================================
   POLICES PERSONNALISÉES - GENERAL SANS
   ========================================================================== */

/* Variante Regular (400) */
@font-face {
    font-family: 'General Sans';
    src: url('fonts/GeneralSans-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Variante Bold (700) */
@font-face {
    font-family: 'General Sans';
    src: url('fonts/GeneralSans-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
    MENU
    ========================================================================= */


/** Sticky **/
/* Prérequis : aucun ancêtre ne doit avoir overflow hidden */

#page, #masthead { overflow: visible !important; }

#masthead {
  position: sticky;
  top: 0;
  z-index: 999;
  background-color: rgba(250, 246, 239, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Barre d'admin quand tu es connectée */
.admin-bar #masthead { top: 32px; }
@media (max-width: 782px) {
  .admin-bar #masthead { top: 46px; }
}

/* Une fois scrollé : ligne + ombre légère */
#masthead.est-colle {
  border-bottom-color: #E3D9C7;
  box-shadow: 0 8px 30px -18px rgba(28, 26, 23, 0.3);
}


/* ==========================================================================
    SUB-MENU
    ========================================================================= */
    
.main-header-menu .sub-menu {
    background: #3e3e3b;
}
    
/* ==========================================================================
   DESACTIVER SECTION
   ========================================================================== */
.section-off {
  display: none;
}

/* div#primary.{
    margin-top: 0 !important;
} */

/* ========================================================
   SECTION HÉROS : 3 IMAGES FLOTTANTES (OPTION B)
   ======================================================== */
/* ---- Parent ---- */
.heros-images {
  position: relative !important;
  min-height: 560px !important;
  max-width: 540px !important;
  margin: 0 auto !important;
}

/* ---- Base des 3 cartes ---- */
.heros-images .carte-gauche,
.heros-images .carte-centre,
.heros-images .carte-droite {
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.heros-images .carte-gauche img,
.heros-images .carte-centre img,
.heros-images .carte-droite img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 4 / 5 !important;
  object-fit: cover !important;
  border-radius: 20px !important;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease !important;
}

/* ---- Positions ---- */
.heros-images .carte-gauche {
  width: 46% !important;
  left: 0 !important;
  top: 45px !important;
  z-index: 10 !important;
  animation: flotte-g 7s ease-in-out infinite !important;
}
.heros-images .carte-gauche img {
  box-shadow: 0 30px 55px -20px rgba(28,26,23,.45) !important;
}

.heros-images .carte-centre {
  width: 54% !important;
  left: 23% !important;
  top: 50px !important;
  z-index: 20 !important;
  animation: flotte-c 9s ease-in-out infinite !important;
}
.heros-images .carte-centre img {
  box-shadow: 0 45px 70px -25px rgba(28,26,23,.55) !important;
}

.heros-images .carte-droite {
  width: 44% !important;
  right: 0 !important;
  top: 75px !important;
  z-index: 12 !important;
  animation: flotte-d 8s ease-in-out infinite !important;
}
.heros-images .carte-droite img {
  box-shadow: 0 30px 55px -20px rgba(28,26,23,.45) !important;
}

/* ---- Survol ---- */
.heros-images .carte-gauche:hover,
.heros-images .carte-centre:hover,
.heros-images .carte-droite:hover {
  z-index: 9999 !important;
  animation-play-state: paused !important;
  cursor: pointer;
}
.heros-images .carte-gauche:hover img,
.heros-images .carte-centre:hover img,
.heros-images .carte-droite:hover img {
  transform: scale(1.06) !important;
  box-shadow: 0 45px 80px -20px rgba(28,26,23,.65) !important;
}

/* ---- Animations ---- */
@keyframes flotte-g {
  0%,100% { transform: translateY(0) rotate(-5deg); }
  50%     { transform: translateY(-14px) rotate(-4deg); }
}
@keyframes flotte-c {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%     { transform: translateY(-18px) rotate(0deg); }
}
@keyframes flotte-d {
  0%,100% { transform: translateY(0) rotate(4deg); }
  50%     { transform: translateY(-12px) rotate(5deg); }
}

@media (max-width: 768px) {
  .heros-images {
    min-height: 420px !important;
    margin-top: 30px !important;
  }
}

/* ========================================================
   MARQUEE
   ======================================================== */
/* 2. Bandeau défilant (Marquee) */
@keyframes pictelle-defilement {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.bande-defilante {
  display: flex;
  width: max-content;
  animation: pictelle-defilement 35s linear infinite;
}
.bande-defilante:hover {
  animation-play-state: paused;
}

/* 3. Effet de zoom doux sur les miniatures au survol */
.wp-block-kadence-column .wp-block-image img,
.edd_download_image img {
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) !important;
  border-radius: 18px !important;
}
.wp-block-kadence-column:hover .wp-block-image img,
.edd_download:hover .edd_download_image img {
  transform: scale(1.04) !important;
}

/* ========================================================
   CARTES COLLECTION
   ======================================================== */
/* Cartes collection */
.carte-collection.wp-block-cover {
  border-radius: 24px;
  overflow: hidden;
}

.carte-collection .wp-block-cover__image-background {
  transition: transform 1.1s ease !important;
}

.carte-collection:hover .wp-block-cover__image-background {
  transform: scale(1.06);
}

/* ========================================================
   GRILLE DES 4 CATÉGORIES (AVEC INTERSTICE DE 1PX)
   ======================================================== */

/* 1. Le grand cadre extérieur arrondi */
.grille-categories {
  border: 1px solid #E3D9C7 !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background-color: #E3D9C7 !important; /* La couleur de la ligne de séparation */
  padding: 0 !important;
}

/* 2. La grille avec interstice de 1px */
.grille-categories .kt-row-column-wrap,
.grille-categories.wp-block-columns {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 1px !important; /* L'interstice qui crée le trait fin */
  padding: 0 !important;
  margin: 0 !important;
}

/* 3. Chaque case individuelle */
.grille-categories .wp-block-kadence-column,
.grille-categories .wp-block-column {
  width: 100% !important;
  margin: 0 !important;
  background-color: #FAF6EF !important; /* Fond ivoire / papier */
  transition: background-color 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  cursor: pointer;
}

.grille-categories .kt-inside-inner-col {
  padding: 32px 28px !important;
  height: 100% !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 4. LE SURVOL (Hover débloqué pour la version gratuite) */
.grille-categories .wp-block-kadence-column:hover,
.grille-categories .wp-block-column:hover {
  background-color: #F3ECE0 !important; /* Fond crème doux au survol */
}

/* 5. Petit glissement de la flèche du lien vers la droite au survol */
.grille-categories .wp-block-kadence-column a,
.grille-categories .wp-block-column a {
  display: inline-flex !important;
  align-items: center !important;
  transition: transform 0.3s ease !important;
}

.grille-categories .wp-block-kadence-column:hover a,
.grille-categories .wp-block-column:hover a {
  transform: translateX(4px) !important;
}

/* 6. Responsive : 2 colonnes sur tablette, 1 colonne sur mobile */
@media (max-width: 1024px) {
  .grille-categories .kt-row-column-wrap,
  .grille-categories.wp-block-columns {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 640px) {
  .grille-categories .kt-row-column-wrap,
  .grille-categories.wp-block-columns {
    grid-template-columns: 1fr !important;
  }
}

/* ========================================================
   COUVERTURES DE CARNETS - FLOTTEMENT DOUX ASYNCHRONE
   ======================================================== */

/* ===== Carnets : les 4 vignettes qui flottent ===== */
.mini-carnet {
  will-change: transform;
}

.mini-carnet img {
  box-shadow: 0 30px 50px -28px rgba(28, 26, 23, 0.55);
  transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.mini-carnet.mc-01 { animation: mc-flotte-1 7s ease-in-out infinite; }
.mini-carnet.mc-02 { animation: mc-flotte-2 8s ease-in-out -2s infinite; }
.mini-carnet.mc-03 { animation: mc-flotte-3 9s ease-in-out -4s infinite; }
.mini-carnet.mc-04 { animation: mc-flotte-4 7.5s ease-in-out -1s infinite; }

/* Survol : la vignette s'arrête et s'avance */
.wp-block-column:hover .mini-carnet,
.mini-carnet:hover {
  animation-play-state: paused;
}

.wp-block-column:hover .mini-carnet img,
.mini-carnet:hover img {
  transform: scale(1.04);
  box-shadow: 0 44px 60px -26px rgba(28, 26, 23, 0.6);
}

@keyframes mc-flotte-1 {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-14px) rotate(-1deg); }
}
@keyframes mc-flotte-2 {
  0%, 100% { transform: translateY(0) rotate(1.5deg); }
  50% { transform: translateY(-12px) rotate(2.5deg); }
}
@keyframes mc-flotte-3 {
  0%, 100% { transform: translateY(0) rotate(-1.5deg); }
  50% { transform: translateY(-16px) rotate(-0.5deg); }
}
@keyframes mc-flotte-4 {
  0%, 100% { transform: translateY(0) rotate(2deg); }
  50% { transform: translateY(-12px) rotate(1deg); }
}

/* ========================================================
   CARNETS PHP - Supprimer le fond blanc parasite
   ======================================================== */

/* Supprime le fond blanc de la figure elle-même */
figure.mini-carnet {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 auto !important;
}

/* Supprime le fond blanc de la colonne qui contient l'image */
.wp-block-column:has(figure.mini-carnet) {
  background: transparent !important;
  background-color: transparent !important;
  padding: 0 !important;
  box-shadow: none !important;
}

/* Retire aussi la bordure inline appliquée par Gutenberg si tu veux vraiment un rendu épuré */
figure.mini-carnet img {
  border: none !important;
  box-shadow: none !important;
}

/* Petit rappel : on garde une belle ombre douce au survol uniquement */
figure.mini-carnet:hover img {
  box-shadow: 0 20px 40px -15px rgba(28, 26, 23, 0.35) !important;
  transition: box-shadow 0.4s ease !important;
}


/* ========================================================
   BADGE "GRATUIT" - Collé à la figure (bouge avec le carnet)
   ======================================================== */

/* On s'assure que la figure peut porter le badge */
figure.mini-carnet {
  position: relative !important;
  overflow: visible !important; /* Important : permet au badge de dépasser */
}

/* On force la figure à hériter du bon comportement */
figure.mini-carnet img {
  position: relative;
  z-index: 1;
  border-radius: 25px;
  overflow: hidden;
}

/* Le badge en pseudo-élément (généré par CSS pur) */
figure.mini-carnet::after {
  content: "Gratuit";
  position: absolute;
  top: 20px;
  right: -8px;
  transform: rotate(8deg);
  background: #B4472A;
  color: #FFFFFF;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 8px 16px;

  z-index: 30;
  box-shadow: 0 6px 14px -3px rgba(180, 71, 42, 0.5);
  pointer-events: none;
  white-space: nowrap;
}

/* Au survol, le badge se met aussi en avant */
figure.mini-carnet:hover::after {
  transform: rotate(8deg) scale(1.05);
  transition: transform 0.3s ease;
}

/* ==========================================
   CARTE PROFIL
   ========================================== */
   
.carte-profil {
  transition: transform .4s cubic-bezier(.2,.8,.2,1),
              background-color .4s ease,
              border-color .4s ease,
              box-shadow .4s ease !important;
  cursor: pointer;
}

.carte-profil:hover {
  transform: translateY(-4px) !important;
  background-color: #F3ECE0 !important;
  border-color: rgba(28, 26, 23, 0.25) !important;
  box-shadow: 0 24px 40px -20px rgba(28, 26, 23, 0.4) !important;
}

/* La flèche */
.carte-profil .fleche-cercle {
  transition: background-color .4s ease,
              border-color .4s ease,
              transform .4s cubic-bezier(.2,.8,.2,1),
              box-shadow .4s ease;
}

.carte-profil:hover .fleche-cercle {
  background-color: transparent !important;
  border: 1px solid #B4472A !important;
  transform: translateX(4px);
  /* box-shadow: 0 8px 20px -6px rgba(180, 71, 42, 0.5); */
  border-radius: 50%;
  padding: 1.3rem 0;
}

.carte-profil:hover .fleche-cercle svg,
.carte-profil:hover .fleche-cercle svg * {
  stroke: #B4472A !important;
}

/* =============================================================
    FAQ
   ============================================================= */
    
/* Permet d'animer height: auto (Chrome, Edge, Safari) */
:root {
  interpolate-size: allow-keywords;
}

/* ---- Structure ---- */
.faq-item {
  border-bottom: 1px solid #E3D9C7;
}

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

.faq-item summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 22px 48px 22px 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 20px;
  font-weight: 500;
  color: #1C1A17;
  transition: color .2s ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: #B4472A; }

/* Le + dans un cercle */
.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  translate: 0 -50%;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 1px solid #E3D9C7;
  border-radius: 50%;
  font-family: "Inter", system-ui, sans-serif;
  font-size: 18px;
  color: #1C1A17;
  transition: rotate .35s cubic-bezier(.2,.8,.2,1),
              background-color .3s ease,
              border-color .3s ease,
              color .3s ease;
}

/* ---- Le contenu : fermé par défaut, mais animable ---- */
.faq-item::details-content {
  content-visibility: visible;
  height: 0;
  opacity: 0;
  overflow: hidden;
  transition: height .4s cubic-bezier(.2,.8,.2,1),
              opacity .3s ease;
}

/* ---- Ouverture au CLIC (tous appareils) ---- */
.faq-item[open]::details-content {
  height: auto;
  opacity: 1;
}
.faq-item[open] summary::after {
  rotate: 45deg;
  background-color: #B4472A;
  border-color: #B4472A;
  color: #fff;
}

/* ---- Ouverture au SURVOL (souris uniquement) ---- */
@media (hover: hover) and (pointer: fine) {
  .faq-item:hover::details-content {
    height: auto;
    opacity: 1;
  }
  .faq-item:hover summary::after {
    rotate: 45deg;
    background-color: #B4472A;
    border-color: #B4472A;
    color: #fff;
  }
}

/* ---- La réponse ---- */
.faq-item::details-content > * {
  padding: 0 48px 24px 0;
  color: #6B645A;
  font-size: 15px;
  line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after,
  .faq-item::details-content { transition: none; }
}

/* ---- Footer ---- */
h2.widget-title {
    color: #f3ece0;
}

/* ---- Supprimer le box shadow des cards produit ---- */
.ast-article-single figure, .ast-article-single img:not(figure img) {
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}