/* =========================================================
   LES PETITS ZOUNOUS EVEILLES - Couche design
   Profondeur, mouvement et details de finition.
   Chargee apres style.css.
   ========================================================= */

/* ---------- 1. BANDE DE REASSURANCE ---------- */
.z-strip{position:relative;z-index:2;}
.z-strip .elementor-icon-box-wrapper{padding:10px 16px;}
.z-strip .elementor-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1);box-shadow:0 4px 14px rgba(51,48,46,.08);}
.z-strip .elementor-widget-icon-box:hover .elementor-icon{transform:translateY(-5px) rotate(-7deg);}
@media (min-width:1025px){
  .z-strip .e-con:not(:last-child) .elementor-icon-box-wrapper::after{
    content:'';position:absolute;right:-12px;top:24%;height:52%;width:1px;
    background:linear-gradient(180deg,transparent,#EFE3DA,transparent);}
}

/* ---------- 2. FONDS ORGANIQUES ---------- */
.z-univers,.z-offert,.z-etapes,.z-video,.z-faq{position:relative;overflow:hidden;}
.z-univers::before,.z-offert::after,.z-video::before,.z-etapes::after{
  content:'';position:absolute;border-radius:50%;pointer-events:none;z-index:0;}
.z-univers::before{width:520px;height:520px;top:-230px;right:-180px;
  background:radial-gradient(circle,rgba(255,212,60,.26),transparent 68%);}
.z-offert::after{width:460px;height:460px;bottom:-200px;left:-160px;
  background:radial-gradient(circle,rgba(60,180,132,.22),transparent 68%);}
.z-video::before{width:420px;height:420px;top:-160px;left:-140px;
  background:radial-gradient(circle,rgba(12,84,180,.16),transparent 68%);}
.z-etapes::after{width:380px;height:380px;bottom:-170px;right:-120px;
  background:radial-gradient(circle,rgba(217,45,32,.10),transparent 68%);}
.z-univers > .e-con-inner,.z-offert > .e-con-inner,.z-video > .e-con-inner,
.z-etapes > .e-con-inner,.z-univers > .elementor-element,.z-offert > .elementor-element,
.z-video > .elementor-element,.z-etapes > .elementor-element{position:relative;z-index:1;}

/* ---------- 3. CARTES ---------- */
.z-carte{position:relative;overflow:hidden;border-top:5px solid transparent;
  transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;}
.z-carte--1{border-top-color:var(--z-rouge);}
.z-carte--2{border-top-color:var(--z-jaune);}
.z-carte--3{border-top-color:var(--z-menthe);}
.z-carte:hover{transform:translateY(-8px);}
.z-carte .elementor-widget-image{overflow:hidden;border-radius:12px;}
.z-carte .elementor-widget-image img{transition:transform .5s cubic-bezier(.22,1,.36,1);}
.z-carte:hover .elementor-widget-image img{transform:scale(1.07);}
/* La fleche du bouton glisse au survol */
.z-carte .elementor-button::after{content:' \2192';display:inline-block;
  transition:transform .25s ease;margin-left:2px;}
.z-carte:hover .elementor-button::after{transform:translateX(5px);}

/* ---------- 4. ETAPES NUMEROTEES ---------- */
.z-etapes .z-carte{border-top-color:transparent;background:#FFFFFF;}
.z-etapes .z-carte::before{content:'';position:absolute;inset:0;border-radius:18px;
  border:2px dashed #F3DFD6;pointer-events:none;}
.z-etape__num{box-shadow:0 6px 16px rgba(255,212,60,.45);}

/* ---------- 5. FAQ ---------- */
.elementor-accordion .elementor-accordion-item{border:none !important;
  background:#FFF6F0;border-radius:14px;margin-bottom:12px;overflow:hidden;
  transition:box-shadow .25s ease,background-color .25s ease;}
.elementor-accordion .elementor-accordion-item:hover{background:#FDEFE8;
  box-shadow:0 6px 18px rgba(51,48,46,.08);}
.elementor-accordion .elementor-tab-title.elementor-active{background:#FFFFFF;}
.elementor-accordion .elementor-tab-content{border:none !important;background:#FFFFFF;}

/* ---------- 6. SECTION FINALE ---------- */
.z-cta-final{position:relative;overflow:hidden;
  background-image:radial-gradient(circle at 12% 18%,rgba(255,255,255,.14) 0 2px,transparent 3px),
                   radial-gradient(circle at 78% 72%,rgba(255,255,255,.12) 0 3px,transparent 4px),
                   radial-gradient(circle at 46% 88%,rgba(255,255,255,.10) 0 2px,transparent 3px);
  background-size:220px 220px,300px 300px,180px 180px;}

/* ---------- 7. MICRO-INTERACTIONS ---------- */
.elementor-button{position:relative;overflow:hidden;}
.z-hero__texte{animation:zMonte .6s cubic-bezier(.22,1,.36,1) both;}
@keyframes zMonte{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
.site-footer a,.elementor-widget-text-editor a{
  text-decoration:none;background-image:linear-gradient(var(--z-bleu),var(--z-bleu));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .25s ease;}
.site-footer a:hover,.elementor-widget-text-editor a:hover{background-size:100% 2px;}

/* ---------- 8. SEPARATEURS DE FORME ---------- */
.elementor-shape svg{display:block;}

/* ---------- 9. RESPECT DES PREFERENCES DE MOUVEMENT ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;}
}

/* ---------- 10. AJUSTEMENTS MOBILE ---------- */
@media (max-width:767px){
  .z-univers::before,.z-offert::after,.z-video::before,.z-etapes::after{width:300px;height:300px;}
  .z-carte:hover{transform:none;}
}

/* ---------- 11. APPARITION AU DEFILEMENT, SANS JAVASCRIPT ----------
   Le contenu est TOUJOURS visible par defaut. L animation ne s ajoute
   que sur les navigateurs qui savent la piloter au defilement, donc une
   panne de script ne peut jamais masquer la page.
   ------------------------------------------------------------------ */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .z-carte,
    .z-strip .elementor-widget-icon-box,
    .z-offert .elementor-widget,
    .z-video .elementor-widget,
    .z-faq .elementor-widget-accordion {
      animation: zReveal linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 26%;
    }
  }
}
@keyframes zReveal{
  from{opacity:0;transform:translateY(26px) scale(.985);}
  to{opacity:1;transform:none;}
}

/* ---------- 12. FINITIONS ---------- */
/* La pastille d age doit epouser son texte, pas traverser la carte */
.z-carte__age{align-self:flex-start;width:auto !important;}
.z-carte__age .elementor-heading-title{display:inline-block;}
.z-carte > .elementor-widget.z-carte__age{width:auto !important;flex:0 0 auto;}

/* Surtitre : meme regle */
.z-surtitre{align-self:flex-start;width:auto !important;}
.z-hero__texte > .elementor-widget.z-surtitre{flex:0 0 auto;}

/* Visuel produit : cadrage plus genereux et fond neutre */
.z-carte .elementor-widget-image{background:#FBF4EF;}
.z-carte .elementor-widget-image img{height:210px;object-fit:cover;object-position:center;}

/* Le titre de section respire */
.z-univers .elementor-widget-heading h2,
.z-etapes .elementor-widget-heading h2{margin-bottom:6px;}

/* ---------- 13. CORRECTIFS DE FINITION ---------- */
/* La pastille d age et le surtitre epousent leur texte (selecteur descendant,
   le widget n est pas toujours enfant direct du conteneur) */
.z-carte .z-carte__age,
.z-hero__texte .z-surtitre,
.z-offert .z-surtitre{align-self:flex-start !important;width:auto !important;flex:0 0 auto !important;}

/* La fleche reste sur la meme ligne que le libelle */
.z-carte .elementor-button{flex-wrap:nowrap;gap:8px;white-space:nowrap;}
.z-carte .elementor-button::after{margin-left:0;}
.z-carte .elementor-button-content-wrapper{flex-wrap:nowrap;}

/* Les boutons de carte ne prennent pas toute la largeur au-dela du mobile */
@media (min-width:768px){.z-carte .elementor-button{width:auto;}}

/* ---------- 14. FLECHE DES BOUTONS DE CARTE ----------
   Attachee au texte lui-meme : en pseudo-element du bouton,
   elle devenait un element flex et passait a la ligne.
   ---------------------------------------------------- */
.z-carte .elementor-button::after{content:none;}
.z-carte .elementor-button .elementor-button-text::after{
  content:'\00a0\2192';display:inline-block;transition:transform .25s ease;}
.z-carte:hover .elementor-button .elementor-button-text::after{transform:translateX(5px);}
.z-carte .elementor-button .elementor-button-text{white-space:nowrap;}

/* ---------- 15. BLOC 2 : ARGUMENTS EN CARTES BORDEES ---------- */
.z-strip .elementor-widget-icon-box{
  background:#FFFFFF;border:2px solid #F3E2DA;border-radius:16px;
  padding:26px 18px;height:100%;
  transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;}
.z-strip .elementor-widget-icon-box:hover{
  border-color:var(--z-rouge);box-shadow:0 10px 26px rgba(51,48,46,.10);transform:translateY(-4px);}
.z-strip .e-con{align-self:stretch;}
.z-strip .elementor-icon-box-wrapper{padding:0;height:100%;
  display:flex;flex-direction:column;align-items:center;}
/* Le trait de separation ne sert plus a rien avec des cartes */
@media (min-width:1025px){
  .z-strip .e-con:not(:last-child) .elementor-icon-box-wrapper::after{content:none;}
}

/* ---------- 16. BLOC 3 : BOUTONS ALIGNES ---------- */
/* Les cartes prennent la meme hauteur, le bouton est colle en bas de chacune */
.z-univers .e-con-inner > .e-con,
.z-etapes .e-con-inner > .e-con{align-items:stretch;}
.z-carte{height:100%;}
.z-carte > .e-con-inner{display:flex;flex-direction:column;height:100%;}
.z-carte .elementor-widget-text-editor{flex:1 1 auto;}
.z-carte .elementor-widget-button{margin-top:auto;padding-top:14px;}

/* ---------- 17. BLOC 4 : PANNEAU D OFFRE ---------- */
.z-offre{overflow:hidden;}
.z-offre__visuel{position:relative;min-height:320px;}
.z-offre__visuel .elementor-widget-image,
.z-offre__visuel .elementor-widget-container,
.z-offre__visuel figure,
.z-offre__visuel .elementor-image{height:100%;}
.z-offre__visuel img{width:100%;height:100%;min-height:320px;object-fit:cover;border-radius:0;}
.z-badge{display:inline-block;align-self:flex-start;width:auto !important;flex:0 0 auto;
  background:var(--z-vert);color:#FFFFFF;font-family:'Nunito',sans-serif;font-weight:700;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;
  padding:6px 15px;border-radius:var(--z-pilule);}
.z-badge .elementor-heading-title{font:inherit;color:inherit;}
.z-offre__points .elementor-icon-list-item{align-items:flex-start;}
.z-offre__mention{font-size:14px;color:var(--z-texte-clair);}
.z-offre__mention p{margin-bottom:0;}
@media (max-width:1024px){
  .z-offre__visuel{min-height:0;}
  .z-offre__visuel img{min-height:0;height:250px;}
}

/* ---------- 18. ETIQUETTES : le fond epouse le texte ----------
   La classe est posee sur le widget, qui occupe toute la largeur.
   On deplace donc le fond sur le titre lui-meme, qui est inline.
   ------------------------------------------------------------- */
.z-badge{background:none !important;padding:0 !important;border-radius:0 !important;}
.z-badge .elementor-heading-title{
  display:inline-block;background:var(--z-vert);color:#FFFFFF;
  font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;
  letter-spacing:.08em;text-transform:uppercase;
  padding:6px 15px;border-radius:var(--z-pilule);}

.z-surtitre{background:none !important;border:none !important;padding:0 !important;}
.z-surtitre .elementor-heading-title{
  display:inline-block;background:var(--z-blanc);color:var(--z-rouge);
  border:2px solid var(--z-rose);border-radius:var(--z-pilule);
  font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;
  letter-spacing:.09em;text-transform:uppercase;padding:6px 16px;}

.z-carte__age{background:none !important;padding:0 !important;border-radius:0 !important;}
.z-carte__age .elementor-heading-title{
  display:inline-block;background:var(--z-jaune);color:var(--z-texte);
  font-family:'Nunito',sans-serif;font-weight:700;font-size:14px;
  padding:4px 13px;border-radius:var(--z-pilule);}

/* ---------- 19. ETAPES : le chiffre dans la bulle ---------- */
.z-etape__num{background:none !important;width:auto !important;height:auto !important;
  display:block !important;box-shadow:none !important;margin-bottom:4px;}
.z-etape__num .elementor-heading-title{
  display:flex;align-items:center;justify-content:center;
  width:58px;height:58px;border-radius:50%;
  background:var(--z-jaune);color:var(--z-texte);
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:26px;line-height:1;
  box-shadow:0 8px 18px rgba(255,212,60,.5);}

/* Cartes d etapes : plus de pointilles, un cadre net et un liseré jaune */
.z-etapes .z-carte::before{content:none;}
.z-etapes .z-carte{border:2px solid #F5E6DC;border-top:5px solid var(--z-jaune);
  background:#FFFFFF;}
.z-etapes .z-carte:hover{border-color:var(--z-jaune);}
/* Trait de liaison entre les trois etapes */
@media (min-width:1025px){
  .z-etapes .e-con-inner > .e-con > .e-con:not(:last-child)::after{
    content:'';position:absolute;top:56px;right:-22px;width:28px;height:2px;
    background:repeating-linear-gradient(90deg,#F0D9A8 0 6px,transparent 6px 12px);}
  .z-etapes .e-con-inner > .e-con > .e-con{position:relative;overflow:visible;}
}

/* ---------- 20. CARTE DE CHAINE ---------- */
.z-chaine{background:linear-gradient(140deg,#D92D20 0%,#B8241A 58%,#8E1B13 100%);
  border-radius:22px;box-shadow:0 16px 40px rgba(217,45,32,.28);
  position:relative;overflow:hidden;text-align:center;}
.z-chaine::before{content:'';position:absolute;width:260px;height:260px;border-radius:50%;
  top:-120px;right:-90px;background:rgba(255,255,255,.10);}
.z-chaine::after{content:'';position:absolute;width:180px;height:180px;border-radius:50%;
  bottom:-90px;left:-60px;background:rgba(255,255,255,.08);}
.z-chaine > *{position:relative;z-index:1;}
.z-chaine__play .elementor-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:76px;height:76px;border-radius:50%;
  background:rgba(255,255,255,.18);border:3px solid rgba(255,255,255,.55);
  color:#FFFFFF;transition:transform .3s cubic-bezier(.34,1.56,.64,1),background-color .3s;}
.z-chaine:hover .z-chaine__play .elementor-icon{transform:scale(1.08);background:rgba(255,255,255,.28);}
.z-chaine__play svg{margin-left:4px;}
.z-chaine__nom .elementor-heading-title{
  font-family:'Fredoka',sans-serif;font-weight:600;font-size:24px;color:#FFFFFF;}
.z-chaine__note{color:rgba(255,255,255,.88);font-size:15px;}
.z-chaine__note p{margin-bottom:0;}

/* ---------- 21. FAQ ---------- */
.z-faq .elementor-accordion{max-width:840px;margin:0 auto;}
.z-faq .elementor-tab-title{cursor:pointer;}
.z-faq .elementor-accordion-icon{color:var(--z-rouge);}
.z-faq__sortie{text-align:center;margin-top:22px;color:var(--z-texte-clair);}
.z-faq__sortie a{color:var(--z-rouge);font-weight:700;}
.z-faq__sortie p{margin-bottom:0;}

/* ---------- 22. APPEL FINAL ---------- */
.z-cta-final .elementor-widget-heading h2{font-size:38px;}
@media (max-width:767px){.z-cta-final .elementor-widget-heading h2{font-size:28px;}}

/* ---------- 23. PIED DE PAGE ----------
   Le rose saturé d origine écrasait les liens bleus par défaut.
   On passe sur la crème de la charte, avec un liseré rouge en haut.
   ------------------------------------- */
.site-footer,
.site-footer .ast-builder-grid-row-container,
.site-primary-footer-wrap,
.footer-widget-area,
.site-above-footer-wrap,
.site-below-footer-wrap{background-color:#FFF6F0 !important;background-image:none !important;}
.site-primary-footer-wrap{border-top:5px solid var(--z-rouge);}
.site-footer{color:var(--z-texte);}

.site-footer .footer-widget-area{padding-top:52px;padding-bottom:20px;}
.site-footer .widget{margin-bottom:0;}

.site-footer h4,
.site-footer .wp-block-heading{
  font-family:'Fredoka',sans-serif !important;font-weight:600 !important;
  font-size:19px !important;color:var(--z-texte) !important;
  margin-bottom:16px !important;}

.site-footer p{color:var(--z-texte-clair);font-size:15px;line-height:1.7;max-width:330px;}

.site-footer ul.wp-block-list{list-style:none;margin:0;padding:0;}
.site-footer ul.wp-block-list li{margin-bottom:10px;}
.site-footer ul.wp-block-list li a{
  color:var(--z-texte) !important;font-size:15px;text-decoration:none;
  background-image:linear-gradient(var(--z-rouge),var(--z-rouge));
  background-size:0% 2px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .25s ease,color .2s ease;}
.site-footer ul.wp-block-list li a:hover{color:var(--z-rouge) !important;background-size:100% 2px;}

.site-footer figure.wp-block-image{margin-bottom:16px;}
.site-footer figure.wp-block-image img{width:140px;height:auto;}

/* Barre du bas : copyright et reseaux */
.site-below-footer-wrap{border-top:1px solid #F0DDD2;}
.site-below-footer-wrap .ast-builder-grid-row{padding-top:18px;padding-bottom:18px;}
.site-footer .ast-footer-copyright p{color:var(--z-texte-clair);font-size:14px;max-width:none;margin-bottom:0;}
.site-footer .ast-builder-social-element{
  border-radius:50%;transition:transform .25s ease;}
.site-footer .ast-builder-social-element:hover{transform:translateY(-3px);}

@media (max-width:921px){
  .site-footer p{max-width:none;}
  .site-footer .footer-widget-area{padding-top:36px;}
}

/* ---------- 24. FAQ : les questions ne sont pas des liens ---------- */
.z-faq .elementor-tab-title,
.z-faq .elementor-tab-title a,
.elementor-accordion .elementor-tab-title a{
  text-decoration:none !important;background-image:none !important;
  color:var(--z-texte) !important;}
.elementor-accordion .elementor-tab-title.elementor-active a{color:var(--z-rouge) !important;}
.elementor-accordion .elementor-accordion-item{border:2px solid #F5E6DC !important;}
.elementor-accordion .elementor-tab-content{padding:4px 22px 22px !important;color:var(--z-texte-clair);}
.elementor-accordion .elementor-tab-content a{color:var(--z-rouge);font-weight:700;}