/* ================================
   FUTURISTIC CARD 2026 — LASLA PRO
   Cible ton HTML existant (Strong Testimonials)
   ================================ */

   :root{
    --bg0: rgba(10, 12, 18, .72);
    --bg1: rgba(255, 255, 255, .06);
    --line: rgba(255, 255, 255, .10);
    --txt: rgba(255, 255, 255, .90);
    --muted: rgba(255, 255, 255, .58);
    --cream0: #FFF7D3;
  --cream1: #F6EFC6;
  --txtDark: #0B0B0B;
  --r1: 18px;
  --shadowCard: 0 4px 4px rgba(0,0,0,.10);
  --font: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  
    /* néons */
    --n1: #7CFFEF; /* cyan */
    --n2: #9B7CFF; /* violet */
    --n3: #FF5FD7; /* rose */
  
    /* shadow/glow */
    --shadow: 0 18px 50px rgba(0,0,0,.45);
    --glow: 0 0 0 1px rgba(255,255,255,.10), 0 0 40px rgba(124,255,239,.10);
  
    --r: 22px; /* radius */
  }
  
  /* ---------- CARD CONTAINER ---------- */
  section.card{
    position: relative;
    border-radius: var(--r);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(10, 12, 18, 0), rgba(10, 12, 18, 0));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0px 4px 4px #f0f8ff00;
  }
  
  /* Bordure gradient “2026” */
  section.card::before{
    content:"";
    position:absolute;
    inset:0;
    padding: 1px;                 /* épaisseur bordure */
    pointer-events:none;
  }
  
  /* texture “scanlines” subtile */
  section.card::after{
    content:"";
    position:absolute;
    inset:-2px;
    background:
      radial-gradient(900px 280px at 10% -10%, rgba(124,255,239,.20), transparent 60%),
      radial-gradient(700px 260px at 90% 0%, rgba(255,95,215,.14), transparent 60%),
      repeating-linear-gradient(180deg, rgba(255,255,255,.05) 0px, rgba(255,255,255,.05) 1px, transparent 2px, transparent 6px);
    opacity:.25;
    mix-blend-mode: overlay;
    pointer-events:none;
  }
  
  /* ---------- HEADER ---------- */
  .card-h{
    position: relative;
    padding: 8px 14px;
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
  
  .card-title{
    display:flex;
    flex-direction:column;
    gap: 4px;
  }
  
  .card-title > span{
    color: #000;
    font-weight: 800;
    letter-spacing: .3px;
    font-size: 18px;
    line-height: 1.1;
    display:flex;
    align-items:center;
    gap:10px;
  }
  
  /* petit “badge” icône sans modifier le HTML */
  .card-title > span::before{
    content:"";
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: radial-gradient(circle at 30% 30%, #fff, var(--n1));
    box-shadow: 0 0 18px rgba(124,255,239,.55), 0 0 42px rgba(155,124,255,.25);
    display:inline-block;
  }
  
  .card-title small{
    color: rgb(0, 0, 0);
    font-size: 12px;
    letter-spacing: .35px;
    text-transform: uppercase;
  }
  
  /* ---------- BODY ---------- */
  .card-b{
    position: relative;
    padding: 18px;
  }
  
  /* ---------- TESTIMONIAL GRID (masonry plugin) ---------- */
  .strong-view.strong-masonry.columns-3{
    /* on laisse masonry gérer la position, mais on donne du “rythme” */
  }
  
  .wpmtst-testimonial{
    /* les bricks masonry sont positionnés en absolute => on ne touche pas à la position */
  }
  
  .wpmtst-testimonial-inner{
    position: relative;
    border-radius: 18px;
    padding: 18px 16px 14px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.91), rgba(0, 0, 0, 0.87));
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 10px 30px rgba(0,0,0,.35);
    transform: translateZ(0);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  background: rgba(255, 255, 255, 0.39) !important;
  }
  
  /* bordure “holo” */
  .wpmtst-testimonial-inner::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(135deg, rgba(124,255,239,.55), rgba(155,124,255,.40), rgba(255,95,215,.30));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events:none;
    opacity:.65;
  }
  
  .wpmtst-testimonial-inner:hover{
    transform: translateY(-4px);
    box-shadow: 0 18px 55px rgba(0,0,0,.55), 0 0 45px rgba(124,255,239,.10);
    border-color: rgba(124,255,239,.22);
  }
  
  /* Titre */
  .wpmtst-testimonial-heading{
    color: rgb(0, 0, 0);
    font-weight: 850;
    letter-spacing: .2px;
    text-transform: uppercase;
    font-size: 16px;
    margin: 0 0 10px;
  }
  
  /* “quote mark” stylé, sans changer le HTML */
  .wpmtst-testimonial-heading::after{
    content:"“";
    float:right;
    font-size: 28px;
    line-height: 1;
    margin-left: 10px;
    color: rgba(124,255,239,.55);
    text-shadow: 0 0 22px rgba(124,255,239,.20);
  }
  
  .wpmtst-testimonial-content p{
    color: rgba(0,0,0);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 14px;
    font-family: var(--font);
    letter-spacing: 0.3px;
    font-weight: 350;
  }
  
  /* meta (Nom + Date) en “pills” */
  .wpmtst-testimonial-field{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.68);
    border: 1px solid rgba(211, 159, 0, 0.33);
    color: rgb(0, 0, 0);
    font-size: 12px;
    margin-right: 8px;
    margin-top: 6px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.48), rgba(255, 255, 255, 0.66)) !important;
  }
  
  /* petit point néon */
  .wpmtst-testimonial-field::before{
    content:"";
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--n2);
    box-shadow: 0 0 12px rgba(155,124,255,.55);
  }
  
  .wpmtst-testimonial-field.testimonial-name::before{
    background: var(--n1);
    box-shadow: 0 0 12px rgba(124,255,239,.55);
  }
  
  .wpmtst-testimonial-field.datecss::before{
    background: var(--n3);
    box-shadow: 0 0 12px rgba(255,95,215,.45);
  }
  
  /* ---------- FORM (Strong Testimonials) ---------- */
  .strong-form.default-form.dark{
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid rgba(255,255,255,.10);
    width: 70%;
}
  }
  
  .required-notice{
    color: rgba(255,255,255,.65);
    font-size: 12px;
    margin: 0 0 14px;
  }
  
  .wpmtst-submission-form{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
  }
  
  .form-field.field-post_content{
    grid-column: 1 / -1;
  }
  
  /* label + input */
  .wpmtst-submission-form label{
    color: rgba(255,255,255,.72);
    font-size: 12px;
    letter-spacing: .3px;
    text-transform: uppercase;
  }
  
  .wpmtst-submission-form input.text,
  .wpmtst-submission-form textarea{
    width: 100%;
    border-radius: 14px;
    padding: 12px 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: var(--txt);
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }
  
  .wpmtst-submission-form textarea{
    min-height: 140px;
    resize: vertical;
  }
  
  .wpmtst-submission-form .after{
    display:block;
    margin-top: 7px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
  }
  
  /* Focus “smart” */
  .form-field:focus-within input,
  .form-field:focus-within textarea{
    border-color: rgba(124,255,239,.45);
    box-shadow: 0 0 0 4px rgba(124,255,239,.10), 0 0 40px rgba(155,124,255,.10);
    transform: translateY(-1px);
  }
  
  /* ---------- SUBMIT BUTTON ---------- */
  .form-field.wpmtst-submit{
    grid-column: 1 / -1;
    margin-top: 4px;
  }
  
  .wpmtst_submit_testimonial{
    width: 100%;
    cursor: pointer;
    padding: 13px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
    font-weight: 800;
    letter-spacing: .3px;
    text-transform: uppercase;
    background:
      radial-gradient(700px 120px at 10% 0%, rgba(124,255,239,.35), transparent 60%),
      linear-gradient(135deg, rgba(124,255,239,.22), rgba(155,124,255,.18), rgba(255,95,215,.12)),
      rgba(0,0,0,.25);
    box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 55px rgba(124,255,239,.10);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  }
  
  .wpmtst_submit_testimonial:hover{
    transform: translateY(-2px);
    border-color: rgba(124,255,239,.35);
    box-shadow: 0 22px 60px rgba(0,0,0,.55), 0 0 75px rgba(124,255,239,.14);
  }
  
  .wpmtst_submit_testimonial:active{
    transform: translateY(0px) scale(.99);
  }
  
  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 980px){
    .card-b{ padding: 14px; }
    .wpmtst-submission-form{ grid-template-columns: 1fr; }
  }
  
  @media (max-width: 700px){
    .wpmtst-testimonial-inner{ padding: 16px 14px 12px; }
    .wpmtst-testimonial-heading{ font-size: 15px; }
  }
  
  /* ---------- ACCESSIBILITY / PERF ---------- */
  @media (prefers-reduced-motion: reduce){
    .wpmtst-testimonial-inner,
    .wpmtst_submit_testimonial,
    .wpmtst-submission-form input,
    .wpmtst-submission-form textarea{
      transition: none !important;
    }
  }
  
  .wpmtst-testimonial-content.testimonial-content {
    text-transform: none;
  }

  /* =========================================
   SUPPRIMER LES "QUOTES" (image + pseudo)
   Strong Testimonials
   ========================================= */

/* Le plugin colle une image quote en background */
.wpmtst-testimonial-content,
.testimonial-content{
  background-image: none !important;
}

/* Si le plugin ajoute des guillemets via ::before/::after */
.wpmtst-testimonial-content::before,
.wpmtst-testimonial-content::after,
.testimonial-content::before,
.testimonial-content::after{
  content: none !important;
  display: none !important;
}

/* Si ton thème/ton CSS ajoute aussi des quotes sur le heading */
.wpmtst-testimonial-heading::before,
.wpmtst-testimonial-heading::after{
  content: none !important;
}

/* Au cas où il restait un padding prévu pour l'image quote */
.wpmtst-testimonial-content,
.testimonial-content{
  padding-top: 0 !important;
}

/* =========================================
   ESPACE VERTICAL ENTRE BRICKS (Masonry)
   ========================================= */

/* =========================================
   Masonry: ESPACE VERTICAL entre bricks
   (quand les items sont en position:absolute)
   ========================================= */

/* 1) Augmente le gutter utilisé par Masonry (ça aide selon config) */
.strong-content.strong-masonry .gutter-sizer{
  width: 18px !important; 
}

.strong-content.strong-masonry .wpmtst-testimonial::after{
  content: "";
  display: block;
  height: 22px;
}

/* 3) Optionnel: si certaines cartes semblent encore coller */
.strong-content.strong-masonry .wpmtst-testimonial{
  padding-bottom: 0 !important;
}

/* =========================================
   MODE "COLUMNS" (strong-columns columns-2)
   => espace vertical entre bricks
   ========================================= */

/* Espacement entre colonnes (horizontal) */
.strong-content.strong-columns{
  column-gap: 18px !important;
}

/* Chaque brique : séparation verticale */
.strong-content.strong-columns .wpmtst-testimonial{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;

  margin: 0 0 22px 0 !important;  /* ✅ espace VERTICAL */
}

/* Si jamais le plugin force un padding bizarre */
.strong-content.strong-columns .wpmtst-testimonial-inner{
  margin: 0 !important;
}


.strong-form-inner {
  border-radius: 18px;
  padding: 18px 16px 14px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.91), rgba(0, 0, 0, 0.87));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
  transform: translateZ(0);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

/* =========================================================
   FORM FUTURISTE 2026 : compact -40% + accordéon
   Cible Strong Testimonials form
   ========================================================= */

   :root{
    --react-form-gap: 12px;
    --react-form-radius: 18px;
    --react-form-bg: rgba(10,12,18,.55);
    --react-form-line: rgba(255,255,255,.10);
    --react-n1: #7CFFEF;
    --react-n2: #9B7CFF;
    --react-n3: #FF5FD7;
  }
  
  /* Conteneur du form (zone plugin) */
  .strong-form.default-form .strong-form-inner{
    margin-top: 18px;
  }
  
  /* ---------- HEADER ACCORDEON (injecté en JS) ---------- */
  .lasla-react-form-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 14px;
    padding: 14px 16px;
    border-radius: var(--react-form-radius);
    background:
      radial-gradient(700px 180px at 10% 0%, rgba(124,255,239,.18), transparent 60%),
      linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
      var(--react-form-bg);
    border: 1px solid var(--react-form-line);
    box-shadow: 0 14px 40px rgba(0,0,0,.45);
    cursor:pointer;
    user-select:none;
    position:relative;
    overflow:hidden;
  }
  
  .lasla-react-form-toggle::before{
    content:"";
    position:absolute;
    inset:0;
    padding:1px;
    border-radius: var(--react-form-radius);
    background: linear-gradient(135deg, rgba(124,255,239,.55), rgba(155,124,255,.40), rgba(255,95,215,.30));
    -webkit-mask:
      linear-gradient(#000 0 0) content-box,
      linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events:none;
    opacity:.75;
  }
  
  .lasla-react-form-toggle .title{
    display:flex;
    flex-direction:column;
    gap:4px;
  }
  
  .lasla-react-form-toggle .title strong{
    color: rgba(255,255,255,.92);
    font-weight: 850;
    letter-spacing:.2px;
    text-transform: uppercase;
    font-size: 13px;
  }
  
  .lasla-react-form-toggle .title small{
    color: rgba(255,255,255,.60);
    font-size: 12px;
  }
  
  .lasla-react-form-toggle .plus{
    width: 42px;
    height: 42px;
    border-radius: 14px;
    display:grid;
    place-items:center;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 0 40px rgba(124,255,239,.08);
    position:relative;
    flex: 0 0 auto;
  }
  
  .lasla-react-form-toggle .plus::before,
  .lasla-react-form-toggle .plus::after{
    content:"";
    position:absolute;
    width: 18px;
    height: 2px;
    background: rgba(255,255,255,.86);
    border-radius: 4px;
    box-shadow: 0 0 18px rgba(124,255,239,.16);
    transition: transform .22s ease, opacity .22s ease;
  }
  
  .lasla-react-form-toggle .plus::after{
    transform: rotate(90deg);
  }
  
  /* Etat OUVERT : le + devient un X doux */
  .lasla-react-form-open .lasla-react-form-toggle .plus::after{
    transform: rotate(0deg);
    opacity: 0;
  }
  .lasla-react-form-open .lasla-react-form-toggle .plus::before{
    transform: rotate(45deg);
  }
  .lasla-react-form-open .lasla-react-form-toggle .plus{
    border-color: rgba(124,255,239,.28);
  }
  
  /* ---------- CONTENU FORM (accordéon) ---------- */
  .lasla-react-form-wrap{
    margin-top: 10px;
    border-radius: var(--react-form-radius);
    overflow:hidden;
    border: 1px solid rgba(255,255,255,.10);
    background: rgba(0,0,0,.18);
  }
  
  /* Fermé par défaut */
  .lasla-react-form-wrap[hidden]{
    display:none !important;
  }
  
  /* ---------- RÉDUCTION -40% (scaling propre) ----------
     On scale le contenu mais on garde la largeur “réelle”
  */

  
  /* Layout form */
  .lasla-react-form-wrap .wpmtst-submission-form{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--react-form-gap);
    padding: 14px;
  }
  
  /* Champs */
  .lasla-react-form-wrap .form-field.field-post_content{
    grid-column: 1 / -1;
  }
  
  /* Inputs */
  .lasla-react-form-wrap input.text,
  .lasla-react-form-wrap input.email,
  .lasla-react-form-wrap textarea{
    width:100%;
    border-radius: 14px;
    padding: 12px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.90);
    outline:none;
  }
  
  /* Labels + help */
  .lasla-react-form-wrap label{
    color: rgba(255,255,255,.72);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing:.3px;
  }
  .lasla-react-form-wrap .after{
    display:block;
    margin-top: 7px;
    color: rgba(255,255,255,.55);
    font-size: 12px;
  }
  
  /* Focus smart */
  .lasla-react-form-wrap .form-field:focus-within input,
  .lasla-react-form-wrap .form-field:focus-within textarea{
    border-color: rgba(124,255,239,.45);
    box-shadow: 0 0 0 4px rgba(124,255,239,.10), 0 0 35px rgba(155,124,255,.10);
  }
  
  /* Submit */
  .lasla-react-form-wrap .form-field.wpmtst-submit{
    grid-column: 1 / -1;
  }
  .lasla-react-form-wrap .wpmtst_submit_testimonial{
    width:100%;
    padding: 14px 14px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.92);
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing:.3px;
    background:
      radial-gradient(700px 120px at 10% 0%, rgba(124,255,239,.28), transparent 60%),
      linear-gradient(135deg, rgba(124,255,239,.18), rgba(155,124,255,.14), rgba(255,95,215,.10)),
      rgba(0,0,0,.25);
    box-shadow: 0 16px 44px rgba(0,0,0,.50), 0 0 65px rgba(124,255,239,.10);
    cursor:pointer;
  }
  
  /* Notice obligatoire : plus discret */
  .lasla-react-form-wrap .required-notice{
    margin: 0;
    padding: 10px 14px 0;
    color: rgba(255,255,255,.55);
    font-size: 12px;
  }
  
  /* ---------- RESPONSIVE ---------- */
  @media (max-width: 860px){
    
    .lasla-react-form-wrap .wpmtst-submission-form{
      grid-template-columns: 1fr;
    }
  }
  
  @media (max-width: 520px){

    .lasla-react-form-toggle{
      padding: 12px 14px;
    }
    .lasla-react-form-toggle .plus{
      width: 38px; height: 38px; border-radius: 13px;
    }
  }
  

  /* =========================================
   FORM : AUGMENTER POLICES (labels + champs)
   ========================================= */

/* Labels : Nom / E-mail / Témoignage */
.lasla-react-form-wrap .wpmtst-submission-form label{
  font-size: 17px !important;
  font-weight: 500;
  letter-spacing: .4px;
}

/* Texte d'aide sous les champs (after) */
.lasla-react-form-wrap .wpmtst-submission-form .after{
  font-size: 14px !important;     /* avant 12px */
  line-height: 1.35;
}

/* Texte saisi (inputs + textarea) */
.lasla-react-form-wrap .wpmtst-submission-form textarea{
  font-size: 16px !important;
  line-height: 1.4;
  font-weight: 400;
  font-family: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.lasla-react-form-wrap .wpmtst-submission-form input{
  font-size: 16px !important;
  line-height: 1.4;
  font-weight: 400;
  font-family: "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Titre accordéon "Cliquez pour ajouter..." */
.lasla-react-form-toggle .title strong{
  font-size: 15px !important;     /* avant 13px */
}

.lasla-react-form-toggle .title small{
  font-size: 13px !important;
}

/* Bouton */
.lasla-react-form-wrap .wpmtst_submit_testimonial{
  font-size: 15px !important;
}

/* ===== Responsive (mobile) ===== */
@media (max-width: 520px){
  .lasla-react-form-wrap .wpmtst-submission-form label{
    font-size: 15px !important;
  }
  .lasla-react-form-wrap .wpmtst-submission-form input,
  .lasla-react-form-wrap .wpmtst-submission-form textarea{
    font-size: 16px !important;  /* garde lisible sur tel */
  }
  .lasla-react-form-wrap .wpmtst-submission-form .after{
    font-size: 13px !important;
  }
}

/* =========================================
   FIX reCAPTCHA v2 + transform: scale
   (Google ne supporte pas le scale)
   ========================================= */

/* On annule le scale UNIQUEMENT pour reCAPTCHA */
.lasla-react-form-wrap .g-recaptcha{
  transform: none !important;
  transform-origin: initial !important;
  width: 304px !important;        /* taille standard Google */
  height: auto !important;
  margin: 18px 0 10px !important;
}

/* Sécurité : forcer visibilité */
.lasla-react-form-wrap iframe[src*="recaptcha"]{
  max-width: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
}

/* Centre légèrement si besoin */
@media (max-width: 520px){
  .lasla-react-form-wrap .g-recaptcha{
    transform: scale(0.92) !important; /* OK sur mobile */
    transform-origin: left top;
  }
}


/* reCAPTCHA jamais scalé */
.g-recaptcha{
  transform: none !important;
  margin-top: 16px;
}