/* ============================================================
   app-peps.css  -  couche design "peps" (surcharge CSS)
   Appliquee a TOUT le site (choix client sur la variante peps1).
   Debrayage global : constante PEPS_ENABLED (config front) ;
   surcharge ponctuelle par page via ?peps=1 / ?peps=0.
   Chargee apres app.css depuis layout.php.
   Objectif : plus de couleur, de rythme et de profondeur.
   - 1re partie : composants de la fiche de cours (casse le "monobloc").
   - 2e partie (PEPS GLOBAL, en bas) : composants partages du site
     (pastilles, eyebrows, badges d'icones, boutons, bandeaux, cartes).
   ============================================================ */

:root{
  --peps-g:  linear-gradient(120deg,#1890D8 0%,#5B8DEF 45%,#7C5CFC 100%);
  --peps-g2: linear-gradient(135deg,#1890D8,#7C5CFC);
  --peps-warm:#FF8A3D;         /* etincelle chaude, usage tres ponctuel */
  --peps-tint:#F4F8FE;         /* fond froid tres clair pour l'alternance */
  --peps-tint2:#FBF7FF;        /* fond violet tres clair */
  --peps-sh: 0 14px 34px rgba(20,60,120,.10);
  --peps-sh2:0 8px 20px rgba(24,144,216,.14);
}

/* ---- Fond general de la zone fiche : leger degrade pour faire
   ressortir les cartes blanches ---- */
.chero{
  background:
    radial-gradient(680px 340px at 88% -8%, rgba(124,92,252,.16), transparent 60%),
    radial-gradient(560px 320px at 6% 4%, rgba(24,144,216,.16), transparent 62%),
    linear-gradient(180deg,#F3F9FE,#fff) !important;
  position:relative;
}

/* ---- Hero : pastille + titre plus vivants ---- */
.chero .pill{
  background:var(--peps-g2) !important;
  color:#fff !important;
  box-shadow:var(--peps-sh2);
}
.chero h1{
  background:linear-gradient(120deg,#0f1b2d 0%,#1276b3 60%,#7C5CFC 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---- Chips du hero : badge d'icone colore + carte avec relief ---- */
.chero .chips .chip{
  background:#fff !important;
  border:1px solid #e5eefb !important;
  border-radius:14px !important;
  padding:9px 14px 9px 9px !important;
  box-shadow:0 6px 16px rgba(24,144,216,.10);
  transition:transform .18s ease, box-shadow .18s ease;
}
.chero .chips .chip:hover{ transform:translateY(-2px); box-shadow:var(--peps-sh2); }
.chero .chips .chip span.ic{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:10px;
  background:var(--peps-g2); color:#fff !important; font-size:15px;
}

/* ---- Sous-nav : soulignement du lien actif en degrade ---- */
.subnav a.active{
  color:#1276b3 !important;
  border-bottom:2px solid transparent !important;
  background-image:var(--peps-g);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:100% 3px;
}

/* ============================================================
   Coeur : chaque .cblock devient une carte -> casse le monobloc
   ============================================================ */
.clayout .cblock{
  background:#fff;
  border:1px solid #eaf1fa;
  border-radius:18px;
  padding:28px 30px;
  margin-bottom:22px;
  box-shadow:var(--peps-sh);
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease;
}
.clayout .cblock:hover{ box-shadow:0 18px 40px rgba(20,60,120,.13); }

/* alternance de teintes pour le rythme visuel */
.clayout > div > .cblock:nth-child(even){ background:var(--peps-tint); }
.clayout > div > .cblock:nth-child(3n){ background:var(--peps-tint2); }

/* barre d'accent en degrade a gauche des titres */
.clayout .cblock h2{
  position:relative;
  padding-left:18px;
}
.clayout .cblock h2::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px;
  width:5px; border-radius:4px; background:var(--peps-g);
}
/* eyebrow en texte degrade */
.clayout .cblock .eyebrow{
  background:var(--peps-g2);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---- Details : la table plate devient des mini-cartes colorees ---- */
.clayout .details{
  border:0 !important;
  border-radius:0 !important;
  overflow:visible !important;
  gap:12px;
}
.clayout .details > div{
  background:#fff;
  border:1px solid #e6eef9 !important;
  border-left:4px solid #1890D8 !important;
  border-radius:12px;
  padding:14px 16px !important;
  flex-direction:column;
  gap:3px;
  box-shadow:0 4px 12px rgba(20,60,120,.05);
}
.clayout .details > div:nth-child(3n-1){ border-left-color:#7C5CFC !important; }
.clayout .details > div:nth-child(3n){ border-left-color:#22B8A6 !important; }
.clayout .details .k{ color:#1276b3 !important; font-weight:700; }
.clayout .details .v{ font-size:16px !important; }

/* ---- Avis : liseré haut en degrade, etoiles ambre ---- */
.clayout .creviews .tcard{
  border:1px solid #eaf1fa !important;
  border-top:4px solid transparent !important;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(20,60,120,.06);
  background:#fff;
  position:relative;
  overflow:hidden;
}
.clayout .creviews .tcard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:var(--peps-g);
}
.clayout .creviews .tcard .stars{ color:#FFB020; }

/* ---- FAQ : accent degrade quand ouvert ---- */
.clayout .faq-item{ border:1px solid #eaf1fa; border-radius:14px; transition:box-shadow .18s ease; }
.clayout .faq-item.is-open{
  border-color:transparent;
  box-shadow:0 10px 26px rgba(24,144,216,.12);
  border-left:4px solid #1890D8;
}
.clayout .faq-item.is-open .faq-sign{
  background:var(--peps-g2);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---- Panneau lateral devis : entete en degrade ---- */
.quote .quote__card{
  border:1px solid #e7eefb;
  border-radius:18px;
  box-shadow:var(--peps-sh);
  overflow:hidden;
}
.quote .quote__card .quote__head{
  background:var(--peps-g2);
}
.quote .quote__card .quote__head b,
.quote .quote__card .quote__head span{ color:#fff !important; }

/* ---- Bandeau bas : degrade plus riche + halo ---- */
.cband{
  background:linear-gradient(120deg,#1890D8 0%,#3D7BE0 50%,#7C5CFC 100%) !important;
  box-shadow:0 20px 44px rgba(70,60,180,.24);
  position:relative; overflow:hidden;
}
.cband::after{
  content:""; position:absolute; right:-40px; top:-60px;
  width:240px; height:240px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  pointer-events:none;
}
.cband .btn-white-x:hover{ transform:translateY(-2px); }

/* ---- Galerie photos : coin arrondi + zoom deja present, on renforce l'ombre ---- */
.clayout .acc-gallery__item{ box-shadow:0 6px 16px rgba(20,60,120,.10); }

/* ---- Mobile : cartes un peu plus compactes ---- */
@media (max-width:860px){
  .clayout .cblock{ padding:22px 20px; }
}

/* ============================================================
   PEPS GLOBAL  -  composants partages (tout le site)
   N.B. : on preserve les designs deja valides :
   - .band--photo (bande photo #14328) reste en bleu ;
   - la fiche garde ses regles specifiques ci-dessus.
   ============================================================ */

/* ---- Pastilles ---- */
.pill{ background:var(--peps-g2) !important; color:#fff !important; }

/* ---- Eyebrows (sur-titres) en texte degrade ---- */
.eyebrow{
  background:var(--peps-g2);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* ---- Badges d'icones -> degrade blanc ---- */
.pillar .ic,
.fcard .badge,
.why .why-ic,
.nhero__badge .ic,
.brochure .ic{
  background:var(--peps-g2) !important;
  color:#fff !important;
}
.why .why-line{ background:var(--peps-g); }

/* ---- Boutons principaux -> degrade ---- */
.btn-primary-x{ background:var(--peps-g2); box-shadow:0 8px 18px rgba(124,92,252,.28); }
.btn-primary-x:hover{ background:linear-gradient(135deg,#1276b3,#6a4ff0); color:#fff; }
.btn-trial{ background:var(--peps-g2); box-shadow:0 6px 14px rgba(124,92,252,.30); }
.btn-trial:hover{ background:linear-gradient(135deg,#1276b3,#6a4ff0); color:#fff; }

/* ---- Bandeaux CTA -> degrade plus riche (sauf bande photo #14328).
   .ncta est laisse volontairement sombre : il peut contenir un
   formulaire (home), un fond clair nuirait a la lisibilite des champs. ---- */
.band:not(.band--photo){ background:linear-gradient(120deg,#1890D8 0%,#3D7BE0 50%,#7C5CFC 100%) !important; }

/* ---- Cartes : survol a ombre teintee ---- */
.fcard:hover,
.mcard:hover{ border-color:#c9b8ff !important; box-shadow:0 18px 40px rgba(124,92,252,.16) !important; }

/* ---- Temoignages (hors fiche) : liseré haut en degrade ---- */
.sec .tcard, .sec--soft-wrap .tcard{ position:relative; overflow:hidden; }
.sec .tcard::before, .sec--soft-wrap .tcard::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px; background:var(--peps-g);
}

/* ---- Etoiles / notes : etincelle chaude ---- */
.stars, .rating .stars{ color:var(--peps-warm); }

/* ---- Categorie d'article : teinte peps ---- */
.bcard .cat{ color:#7C5CFC; }