/* =====================================================================
   c-cards-nested-cta.css
   =====================================================================

   Composant : "Cards" + panel interne + bouton CTA "à cheval"

   PHILOSOPHIE LAYOUT
   ---------------------------------------------------------------------
   - Un seul groupe .ws-cards par série de cartes
   - Les variantes .ws-cards--2 / --3 / --4 pilotent le nombre de colonnes
   - Mobile : toujours 1 colonne
   - Chaque carte peut recevoir ses propres couleurs via variables CSS
   ===================================================================== */


/* =====================================================================
   0) TOKENS (global site)
   ===================================================================== */

:root{
  --ws-radius-card: 28px;
  --ws-radius-panel: 22px;
  --ws-radius-pill: 999px;

  --ws-space-section-y: 80px;
  --ws-space-section-x: 20px;
  --ws-space-card-pad-y: 36px;
  --ws-space-card-pad-x: 28px;

  --ws-font-title-size: 2.2rem;
  --ws-font-card-title-size: 1.6rem;
  --ws-font-sub-size: 0.95rem;

  --ws-color-title: var(--wp--preset--color--contrast, #1b1b1b);
  --ws-color-accent: var(--wp--preset--color--accent, #b04a4a);
  --ws-color-white: #ffffff;

  --ws-card-bg: rgba(255, 20, 20, 0.10);
  --ws-card-border: rgba(255,255,255,0.20);
  --ws-panel-bg: rgba(255,255,255,0.35);
  --ws-panel-border: rgba(255,255,255,0.65);

  --ws-shadow-card:
    0 25px 60px rgba(0, 0, 0, 0.14),
    0 8px 20px rgba(0, 0, 0, 0.08),
    0 1px 0 rgba(255,255,255,0.4) inset;

  --ws-shadow-card-hover:
    0 35px 80px rgba(0, 0, 0, 0.18),
    0 15px 35px rgba(0, 0, 0, 0.12),
    0 1px 0 rgba(255,255,255,0.4) inset;

  --ws-cta-bg: linear-gradient(135deg, #f28c28, #e36b2c);
  --ws-cta-bg-hover: linear-gradient(135deg, #f6b34d, #e07a2c);
  --ws-cta-color: #ffffff;

  --ws-card-decor-url: url("/wp-content/uploads/2026/03/Amandine-Background-Sun-150x150.webp");
  --ws-card-decor-opacity: 0.9;
  --ws-card-decor-size: 120px;
  --ws-card-decor-offset: 30px;

  --ws-ease: ease;
  --ws-t: 0.3s;

  --ws-cards-max-width: 980px;
  --ws-cards-gap: 40px;
  --ws-cards-gap-mobile: 24px;

  --ws-card-max-width: 420px;
}


/* =====================================================================
   1) MANUEL D’UTILISATION (GUTENBERG)
   =====================================================================

   STRUCTURE RECOMMANDÉE
   ---------------------------------------------------------------------
   1) Groupe section
      Classe :
      - ws-path

   2) Dans la section :
      - un seul groupe container de cartes
      Classes :
      - ws-cards
      - ws-cards--2   OU
      - ws-cards--3   OU
      - ws-cards--4   OU
      - ws-cards--auto

   3) Chaque carte :
      Classe :
      - ws-card

      Optionnel :
      - ws-card--no-decor
      - ws-card--coral
      - ws-card--sage
      - ws-card--sand
      - ws-card--mist

   IMPORTANT
   ---------------------------------------------------------------------
   - Ne pas multiplier plusieurs groupes .ws-cards côte à côte si l'on veut
     une seule grille cohérente
   - Le parent peut garder le rôle de wrapper Gutenberg
   - Le groupe .ws-cards doit rester un container de layout WS

   EXEMPLE
   ---------------------------------------------------------------------
   <div class="ws-cards ws-cards--2">
     <div class="ws-card ws-card--coral">...</div>
     <div class="ws-card ws-card--sage">...</div>
     <div class="ws-card ws-card--sand">...</div>
     <div class="ws-card ws-card--mist">...</div>
   </div>
   ===================================================================== */


/* =====================================================================
   2) SECTION WRAPPER
   ===================================================================== */

.ws-path{
  padding: var(--ws-space-section-y) var(--ws-space-section-x);
  text-align: center;
}

.ws-section-title{
  font-size: var(--ws-font-title-size);
  padding-top: 50px;
  margin-bottom: 20px;
  color: var(--ws-color-accent);
}


/* =====================================================================
   3) CONTAINER DES CARDS
   ---------------------------------------------------------------------
   - Base générique pilotée par --ws-cards-cols
   - Mobile : 1 colonne
   - Tablet / desktop : on applique la variante
   ===================================================================== */

.ws-path .ws-cards{
  --ws-cards-cols: 1;

  display: grid !important;
  grid-template-columns: 1fr;
  gap: var(--ws-cards-gap);

  width: 100%;
  max-width: var(--ws-cards-max-width) !important;
  margin: 0 auto !important;

  justify-items: center;
  align-items: stretch;

  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

/* Variante auto */
.ws-path .ws-cards--auto{
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, 280px), 1fr)
  );
}

/* Variantes colonnes */
.ws-path .ws-cards--2{ --ws-cards-cols: 2; }
.ws-path .ws-cards--3{ --ws-cards-cols: 3; }
.ws-path .ws-cards--4{ --ws-cards-cols: 4; }

/* À partir de la tablette */
@media (min-width: 768px){
  .ws-path .ws-cards:not(.ws-cards--auto){
    grid-template-columns: repeat(var(--ws-cards-cols), minmax(0, 1fr));
  }
}


/* =====================================================================
   3bis) FIX GUTENBERG
   ===================================================================== */

.ws-cards.has-global-padding{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.is-layout-constrained > .ws-cards{
  max-width: var(--ws-cards-max-width) !important;
}

.wp-block-group.ws-cards.is-layout-constrained{
  max-width: var(--ws-cards-max-width) !important;
}

/* =====================================================================
   FIX GUTENBERG — annuler les marges automatiques sur les cartes
   ---------------------------------------------------------------------
   Gutenberg ajoute une marge verticale aux enfants directs des blocs
   "is-layout-constrained". Dans une grille, cela décale les cartes.
   ===================================================================== */

.ws-cards > .ws-card{
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}


/* =====================================================================
   4) CARD
   ===================================================================== */

.ws-card{
  --ws-card-local-bg: var(--ws-card-bg);
  --ws-card-local-border: var(--ws-card-border);
  --ws-panel-local-bg: var(--ws-panel-bg);
  --ws-panel-local-border: var(--ws-panel-border);

  --ws-card-pad-bottom: 120px;

  width: min(100%, var(--ws-card-max-width));
  min-width: 0;
  box-sizing: border-box;

  text-align: center;

  padding: var(--ws-space-card-pad-y) var(--ws-space-card-pad-x);
  padding-bottom: var(--ws-card-pad-bottom);

  border: 1px solid var(--ws-card-local-border);
  border-radius: var(--ws-radius-card);
  background: var(--ws-card-local-bg);
  box-shadow: var(--ws-shadow-card);

  transition:
    transform var(--ws-t) var(--ws-ease),
    box-shadow var(--ws-t) var(--ws-ease);

  position: relative;
  overflow: visible;
}

.ws-card:hover{
  transform: translateY(-8px);
  box-shadow: var(--ws-shadow-card-hover);
}


/* =====================================================================
   5) TITRES & SOUS-TEXTE
   ===================================================================== */

.ws-card__title,
.ws-card h2,
.ws-card h3{
  font-size: var(--ws-font-card-title-size);
  margin: 0 0 12px 0;
}

.ws-card__sub,
.ws-card-sub{
  font-size: var(--ws-font-sub-size);
  opacity: 0.85;
  margin: 0 0 22px 0;
}


/* =====================================================================
   6) PANEL INTERNE
   ===================================================================== */

.ws-card__panel{
  position: relative;
  box-sizing: border-box;

  margin-top: 18px;

  border: 1px solid var(--ws-panel-local-border);
  background: var(--ws-panel-local-bg);
  border-radius: var(--ws-radius-panel);

  padding: 22px 20px 44px 20px;

  backdrop-filter: blur(4px);
}


/* =====================================================================
   7) LISTE
   ===================================================================== */

.ws-card ul{
  list-style: disc;
  list-style-position: inside;
  padding: 0;
  margin: 0;

  text-align: left;
  display: inline-block;
}

.ws-card li{
  margin: 0 0 8px 0;
}


/* =====================================================================
   8) BOUTON
   ===================================================================== */

.ws-btn{
  display: inline-block;

  background: var(--ws-cta-bg);
  color: var(--ws-cta-color);

  padding: 12px 24px;
  border-radius: var(--ws-radius-pill);

  text-decoration: none;
  font-weight: 500;
  border: 0;

  transition:
    transform var(--ws-t) var(--ws-ease),
    opacity var(--ws-t) var(--ws-ease),
    background var(--ws-t) var(--ws-ease);
}

.ws-btn:hover{
  background: var(--ws-cta-bg-hover);
  opacity: 0.95;
}

.ws-btn:active{
  transform: translateY(1px);
}


/* =====================================================================
   9) BOUTON À CHEVAL
   ===================================================================== */

.ws-card__btn{
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);

  white-space: nowrap;
  max-width: calc(100% - 30px);
}

/* =====================================================================
   10) DISCLAIMER
   ===================================================================== */
.ws-card__disclaimer{
  margin-top: 12px;
  font-size: 0.85rem;
  font-style: italic;
  line-height: 1.5;
  opacity: 0.75;
}


/* =====================================================================
   11) RESPONSIVE
   ===================================================================== */

@media (max-width: 767px){
  .ws-path .ws-cards{
    gap: var(--ws-cards-gap-mobile);
  }

  .ws-card{
    width: 100%;
  }

  .ws-card__panel{
    padding-left: 16px;
    padding-right: 16px;
  }

  .ws-card__btn{
    max-width: calc(100% - 20px);
  }
}


/* =====================================================================
   12) DÉCOR OPTIONNEL
   ===================================================================== */

.ws-card::after{
  content: "";
  position: absolute;

  bottom: calc(var(--ws-card-decor-offset) * -1);
  right: calc(var(--ws-card-decor-offset) * -1);

  width: var(--ws-card-decor-size);
  height: var(--ws-card-decor-size);

  background-image: var(--ws-card-decor-url);
  background-size: contain;
  background-repeat: no-repeat;

  opacity: var(--ws-card-decor-opacity);
  pointer-events: none;
  z-index: 0;
}

.ws-card > *{
  position: relative;
  z-index: 1;
}

@media (min-width: 1024px){
  .ws-card{
    --ws-card-decor-size: 150px;
    --ws-card-decor-offset: 40px;
  }
}

.ws-card--no-decor::after{
  display: none;
}


/* ===================================================================== 
   13) THÈMES COULEUR PRÊTS À L’EMPLOI
   ---------------------------------------------------------------------
   Alignés avec ws-btn-orb (warm = jaune/orangé / cool = bleu)
   ===================================================================== */

/* ---------------------------------------------------------------------
   JAUNE / WARM (inspiré de --ws-btn-c1: 224,118,61)
   --------------------------------------------------------------------- */
.ws-card--warm{
  --ws-card-local-bg: rgba(224, 118, 61, 0.6);
  --ws-card-local-border: rgba(224, 118, 61, 0.6);

  --ws-panel-local-bg: rgba(255, 245, 238, 0.65);
  --ws-panel-local-border: rgba(255, 210, 180, 0.75);
}


/* ---------------------------------------------------------------------
   BLEU / COOL (inspiré de --ws-btn-c1: 90,140,165)
   --------------------------------------------------------------------- */
.ws-card--cool{
  --ws-card-local-bg: rgba(90, 140, 165, 0.6);
  --ws-card-local-border: rgba(90, 140, 165, 0.6);

  --ws-panel-local-bg: rgba(243, 249, 252, 0.65);
  --ws-panel-local-border: rgba(200, 222, 232, 0.75);
}

/* ---------------------------------------------------------------------
   JAUNE / SUN (nouvelle variante)
   --------------------------------------------------------------------- */
.ws-card--sun{
  --ws-card-local-bg: rgba(230, 190, 70, 0.14);
  --ws-card-local-border: rgba(230, 190, 70, 0.30);

  --ws-panel-local-bg: rgba(255, 252, 242, 0.72);
  --ws-panel-local-border: rgba(245, 225, 150, 0.85);
}


/* =====================================================================
   14) PERSONNALISATION PAR INSTANCE
   ---------------------------------------------------------------------
   Exemple Gutenberg inline sur une carte :

   style="
     --ws-card-local-bg: rgba(242,106,33,.14);
     --ws-card-local-border: rgba(242,106,33,.24);
     --ws-panel-local-bg: rgba(255,248,243,.62);
     --ws-panel-local-border: rgba(255,214,191,.75);
   "
   ===================================================================== */