/* ==========================================================================
		   MES DEMANDES — Cartes de liste
		   ========================================================================== */
		#tab-demandes .cc-req-cols{ display:grid; gap:14px; }
		@media (min-width:720px){
		  #tab-demandes .cc-req-cols{ grid-template-columns:1fr 1fr; }
		}
		/* Bloc récap "coachings / bénéfice" sous le titre.
   -> juste du texte, pas de carte, 2 lignes empilées */
		/* --------- STATS SOUS LE TITRE --------- */
		#tab-demandes .cc-req-stats{
		  margin:12px 0 20px;
		  color:#374151;
		  font-size:1rem;
		  line-height:1.4;
		  font-weight:400;
		  display:flex;
		  flex-direction:column;
		  gap:10px;
		  padding:0;
		  border:0;
		  background:none;
		  border-radius:0;
		}
		#tab-demandes .cc-req-line{
		  display:block;
		  font-weight:400;
		  color:#374151;
		}
		#tab-demandes .cc-req-line .label{
		  font-weight:400;
		  color:#374151;
		}
		#tab-demandes .cc-req-line .value{
		  font-weight:700;
		  color:#111827;
		  margin-left:4px;
		}

		/* --------- BREAKDOWN "dont :" ALIGNÉ --------- */
		#tab-demandes #cc-stats-breakdown{
		  display:flex;
		  flex-wrap:nowrap;
		  align-items:flex-start;
		  gap:6px;
		  font-size:.9rem;
		  line-height:1.35;
		  color:#6b7280;
		  font-weight:400;
		}
		#tab-demandes #cc-stats-breakdown .cc-breakdown-label{
		  flex:0 0 auto;
		  color:#6b7280;
		  font-weight:400;
		}
		#tab-demandes #cc-stats-breakdown .cc-breakdown-items{
		  flex:1 1 auto;
		  display:block;
		  color:#6b7280;
		  font-weight:400;
		}
		#tab-demandes #cc-stats-breakdown .cc-empty{
		  color:#9ca3af;
		}

		#tab-demandes #cc-stats-breakdown .cc-breakdown-line{
		  display:block;
		}

		/* ---------- SECTION PLAFONDS AUTOMATIQUES (le bloc global) ---------- */
		#tab-demandes .cc-cap-block{
		  border:1px solid #e5e7eb;
		  border-radius:8px;
		  background:#ffffff;
		  padding:12px 14px 14px;
		  font-size:.95rem;
		  color:#374151;
		  line-height:1.45;
		  width:100%;
		  max-width:100%;
		  box-shadow:0 1px 3px rgba(0,0,0,0.05);
		}
		#tab-demandes .cc-cap-head-left{
		  display:flex;
		  flex-direction:column;
		  gap:2px;
		  font-weight:400;
		  color:#111827;
		  font-size:1rem;
		  line-height:1.4;
		  max-width:calc(100% - 120px);
		}
		#tab-demandes .cc-cap-head-title{
		  font-weight:500;
		  color:#111827;
		  font-size:1rem;
		  line-height:1.4;
		}
		#tab-demandes .cc-cap-head-light{
		  font-weight:300;
		  color:#6b7280;
		}
		#tab-demandes .cc-cap-add{
		  background:none;
		  border:none;
		  color:#1c4876;
		  border-radius:8px;
		  font-size:1rem;
		  font-weight:600;
		  line-height:1.2;
		  padding:8px 10px;
		  cursor:pointer;
		}
		#tab-demandes .cc-cap-add:hover{
		  text-decoration:underline;
		  background:none !important;
		  box-shadow:none !important;
		}
		/* HEADER DU BLOC PLAFONDS */
		#tab-demandes .cc-cap-headline{
		  display:flex;
		  align-items:flex-start;
		  justify-content:space-between;
		  flex-wrap:wrap;
		  row-gap:8px;
		  margin-bottom:10px;
		}

		/* Sous-titre (explicatif, gris) -- supprimé car texte retiré */
		#tab-demandes .cc-cap-head-sub{ display:none; }

		/* On SUPPRIME complètement .cc-cap-icon visuellement */
		#tab-demandes .cc-cap-icon{
		  display:none;
		}

		/* ---------- LISTE DE RÈGLES ---------- */
		#tab-demandes .cc-cap-list{
		  display:flex;
		  flex-direction:column;
		  gap:8px;
		}

		/* Le header ne contient plus les boutons, donc plus besoin de la 2e colonne */
		#tab-demandes .cc-cap-item-head{
		  width:100%;
		  display:block;                 /* AVANT: grid */
		  text-align:left;
		  cursor:pointer;
		  background:none;
		  border:0;
		  padding:10px 12px 12px;
		  position:relative;             /* sécurité, au cas où */
		}

		#tab-demandes .cc-cap-chev{
		  font-size:.8rem;
		  line-height:1.4;
		  color:rgba(221,230,255,0.5);
		  flex:0 0 auto;
		  min-width:1em;
		}

		#tab-demandes .cc-cap-item-activebadge{
		  flex:0 0 auto;
		  font-size:.7rem;
		  line-height:1.2;
		  border-radius:4px;
		  padding:2px 4px;
		  font-weight:600;
		}
		#tab-demandes .cc-cap-item-activebadge.is-on{
		  background:#d1fae5;
		  color:#065f46;
		  border:1px solid #6ee7b7;
		}
		#tab-demandes .cc-cap-item-activebadge.is-off{
		  background:#fee2e2;
		  color:#991b1b;
		  border:1px solid #fca5a5;
		}

		/* On repositionne le bloc actions EN BAS DE LA CARTE, hors du header.
		   → flex ligne, en bas à droite
		*/
		#tab-demandes .cc-cap-item-actions{
		  display:flex;
		  flex-wrap:wrap;
		  flex-direction:row;
		  justify-content:flex-end;
		  gap:6px;
		  border-top:0;
		  background:transparent;
		  padding:4px 12px 10px 12px;
		}
		
		#tab-demandes .cc-cap-action-btn .cc-cap-icon-mini{
		  font-size:.8rem;
		  line-height:1;
		  color:#fff;
		}

		#tab-demandes .cc-cap-action-btn .cc-cap-icon-mini{
		  font-size:.8rem;
		  line-height:1;
		  color:#475569;
		}

		#tab-demandes .cc-cap-item{
		  border:1px solid #e5e7eb;
		  border-radius:8px;
		  background:#f9fafb;
		  overflow:hidden;
		}
		#tab-demandes .cc-cap-item-left{
		  display:flex;
		  align-items:flex-start;
		  flex-wrap:wrap;
		  row-gap:4px;
		  column-gap:8px;
		  font-size:.9rem;
		  line-height:1.4;
		  font-weight:600;
		  color:#374151;
		  min-width:0;
		}
		#tab-demandes .cc-cap-item-title{
		  flex:0 0 auto;
		  color:#374151;
		  font-weight:600;
		}
		#tab-demandes .cc-cap-item-summary{
		  grid-column:1 / span 1;
		  font-size:.8rem;
		  line-height:1.3;
		  color:#6b7280;
		  font-weight:400;
		  margin-left:calc(1em + 8px);
		  white-space:normal;
		  word-break:break-word;
		}
		#tab-demandes .cc-cap-action-btn{
		  background:#ffffff;
		  border:1px solid #d1d5db;
		  border-radius:6px;
		  font-size:.8rem;
		  line-height:1.2;
		  padding:4px 6px;
		  cursor:pointer;
		  color:#374151;
		  display:inline-flex;
		  align-items:center;
		  gap:4px;
		  transition:background .15s, border-color .15s;
		}
		#tab-demandes .cc-cap-action-btn:hover{
		  background:#f3f4f6;
		  border-color:#9ca3af;
		}
		#tab-demandes .cc-cap-item-body{
		  display:none;
		  border-top:1px solid #e5e7eb;
		  background:#f9fafb;
		  padding:12px;
		  font-size:.9rem;
		  line-height:1.4;
		  color:#374151;
		}

		/* ---------- BUILDER INTERNE (réutilise ton layout existant) ---------- */
		/* Chaque ligne du builder = 2 colonnes A/B en desktop, 1 colonne en mobile */
		#tab-demandes .cc-cap-card-inner .cc-cap-row{
		  display:grid;
		  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
		  column-gap:28px;        /* AVANT: 24px -> APRÈS: 28px, plus d'air latéral */
		  row-gap:12px;
		  font-size:.95rem;
		  line-height:1.45;
		  color:#0f172a;
		  margin-bottom:20px;
		  padding-top:8px;        /* on garde: donne de la hauteur à la ligne */
		  padding-bottom:8px;     /* on garde: donne de la hauteur à la ligne */
		}
			
		
		@media (max-width:480px){
		  #tab-demandes .cc-cap-card-inner .cc-cap-row{
			grid-template-columns: 1fr;
		  }
		}

		/* Colonnes internes */
		#tab-demandes .cc-cap-col{
		  display:flex;
		  flex-direction:column;
		  min-width:0;
		}

		/* Texte au-dessus des selects */
		#tab-demandes .cc-cap-text{
		  display:block;
		  margin-bottom:4px;
		  font-weight:400;
		  color:#0f172a;
		}

		/* La dernière ligne ("Alors : ...") ne doit pas coller trop près des boutons */
		#tab-demandes .cc-cap-card-inner .cc-cap-row:last-child{
		  margin-top:12px;              /* NOUVEAU : espace AVANT la ligne "Alors :" */
		  margin-bottom:20px;
		  border-top:1px solid #e2e8f0;
		  padding-top:16px;             /* AVANT: 12px -> APRÈS: 16px, plus d'air interne */
		}
		
		/* Les selects prennent toute la largeur possible en mobile */
		#tab-demandes .cc-cap-card-inner select.cc-cap-metric,
		#tab-demandes .cc-cap-card-inner select.cc-cap-action,
		#tab-demandes .cc-cap-card-inner select.cc-cap-action-category,
		#tab-demandes .cc-cap-card-inner select.cc-cap-action-offer{
		  min-width:260px;
		  flex:1 1 260px;
		}

		/* Le bloc seuil ("atteint [n]") à droite de la 1ère ligne */
		#tab-demandes .cc-cap-thresh-wrap{
		  display:flex;
		  flex-wrap:wrap;
		  align-items:flex-start;
		  column-gap:10px;      /* un peu plus large qu'avant */
		  row-gap:8px;
		}

		/* le select du seuil reste compact */
		#tab-demandes .cc-cap-card-inner .cc-cap-row select.cc-cap-threshold{
		  flex:0 0 auto;
		  min-width:64px;
		  width:auto;
		  max-width:90px;
		  text-align:center;
		  margin-left:0;
		}

		#tab-demandes .cc-cap-card-inner .cc-cap-row select.cc-cap-metric{
		  flex:1 1 480px;
		  min-width:260px;
		  margin-right:10px; /* évite l'effet collé */
		}

		#cc-cap-modal #cc-cap-new-verb,
		#tab-demandes #cc-cap-verb{
		  display:inline-block;
		  font-weight:400;
		  color:#0f172a;
		  line-height:1.2;       /* AVANT 1.4 -> 1.2, réduit la hauteur du texte */
		  margin:0;
		  padding:0;
		  white-space:nowrap;    /* évite un retour à la ligne débile genre 'atteint' seul */
		}

		#tab-demandes .cc-cap-card-inner .cc-cap-row select.cc-cap-threshold{
		  flex:0 0 auto;
		  min-width:64px;
		  width:auto;
		  max-width:90px;
		  text-align:center;
		}

		/* Style des selects + input du seuil : plus de padding pour respirer */
		#tab-demandes select.cc-cap-metric,
		#tab-demandes select.cc-cap-threshold,
		#tab-demandes select.cc-cap-action,
		#tab-demandes select.cc-cap-action-target,
		#tab-demandes .cc-cap-threshold-input{
		  font-size:.9rem;
		  line-height:1.4;
		  color:#111827;
		  border:1px solid #d1d5db;
		  background:#ffffff;
		  border-radius:6px;
		  padding:6px 8px;
		  max-width:100%;
		}

		/* Limite la largeur du champ seuil pour pas qu'il prenne toute la colonne B */
		#tab-demandes select.cc-cap-threshold,
		#tab-demandes .cc-cap-threshold-input{
		  width:auto;
		  min-width:80px;       /* AVANT 64px -> un peu plus large */
		  max-width:110px;
		  text-align:center;
		}

		/* Wrapper pour la partie "➜ [select catégorie/offre]" dans la colonne B de la 2e ligne */
		#tab-demandes .cc-cap-target-wrap{
		  display:flex;
		  flex-wrap:nowrap;
		  align-items:flex-start;
		  column-gap:10px;
		}

		#tab-demandes .cc-cap-card-inner .cc-cap-text{
		  font-weight:400;
		  color:#374151;
		}
		#tab-demandes .cc-cap-unit{
		  color:#6b7280;
		  font-weight:400;
		  font-size:.9rem;
		  line-height:1.4;
		}
		#tab-demandes .cc-cap-target-arrow{
		  flex:0 0 auto;
		  font-size:.9rem;
		  line-height:1.4;
		  color:#6b7280;
		  padding-top:6px;
		}

		/* Le <select> "cible" (catégorie/offre) doit prendre la place dispo
   mais accepter de rétrécir sans faire déborder la modale */
		#tab-demandes .cc-cap-action-target,
		#cc-cap-modal .cc-cap-action-target{
		  flex:1 1 auto;
		  min-width:0;        /* AVANT: 200px -> maintenant il PEUT shrinquer */
		  max-width:100%;
		  box-sizing:border-box;
		}
			
		/* (déjà présent chez toi) */
		#tab-demandes .cc-req-head{
		  display:grid !important; grid-template-columns:1fr auto; column-gap:.75rem; align-items:stretch !important;
		}
		#tab-demandes .cc-req-left{ display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; }
		
		#tab-demandes .cc-req-head .cc-req-meta{ margin:0; }
		#tab-demandes .cc-req-msg{ white-space:pre-wrap; line-height:1.35; }
		#tab-demandes .cc-req-actions{ display:flex; gap:.5rem; justify-self:end; align-self:center !important; flex-wrap:wrap; }
		#tab-demandes .cc-req-actions .button{ display:inline-flex; align-items:center; margin-left:0; }
		#tab-demandes .cc-req-card{
		  background:#ffffff; border:1px solid #e5e7eb; border-radius:8px; padding:10px 12px;
		  box-shadow:0 1px 3px rgba(0,0,0,0.05);
		  transition: box-shadow 0.2s ease;
		}
		#tab-demandes .cc-req-card:hover{
		  box-shadow:0 4px 6px rgba(0,0,0,0.07);
		}
		#tab-demandes .cc-req-name{ font-weight:700; color:#111827; }
		#tab-demandes .cc-req-meta{ color:#6b7280; font-size:.9rem; margin:.25rem 0 .5rem; }
		#tab-demandes .cc-req-actions .button.button-primary{
		  background:rgb(43,108,176); border:none; color:#fff; border-radius:6px; padding:10px 16px; font-weight:600;
		}
		@media (max-width:480px){
		  #tab-demandes .cc-req-actions .button.button-primary{
		    max-width:150px;
		    text-align:center;
		    white-space:normal;
		    line-height:1.3;
		  }
		}
		#tab-demandes .cc-req-actions .button.button-primary:hover{ background:#135e96; }

		/* ==========================================================================
		   ACCORDÉON (En attente / Acceptées / Refusées)
		   ========================================================================== */
		#tab-demandes button.cc-acc-head .chev{ transition:transform .15s ease; }
		#tab-demandes button.cc-acc-head.is-open .chev{ transform:rotate(90deg); }

		#tab-demandes button.cc-acc-head{
		  appearance:none; width:100%; cursor:pointer; text-align:left;
		  background:#ffffff !important; color:#374151 !important;
		  border:1px solid #e5e7eb !important; border-radius:8px; padding:10px 12px; font-weight:600;
		  display:flex; align-items:center; justify-content:space-between;
		  text-shadow:none !important; box-shadow:0 1px 3px rgba(0,0,0,0.05) !important; background-image:none !important;
		  margin:10px 0;
		  transition: all 0.2s ease;
		}
		#tab-demandes button.cc-acc-head .meta{ color:#6b7280 !important; font-weight:500; }
		#tab-demandes button.cc-acc-head:not(.is-open):not(:hover) .chev{ color:#9ca3af !important; }
		#tab-demandes button.cc-acc-head:hover,
		#tab-demandes button.cc-acc-head.is-open,
		#tab-demandes button.cc-acc-head:focus-visible{
		  background:#f3f4f6 !important; border-color:#d1d5db !important; color:#111827 !important;
		}
		#tab-demandes button.cc-acc-head:hover *,
		#tab-demandes button.cc-acc-head.is-open *,
		#tab-demandes button.cc-acc-head:focus-visible *{ color:#111827 !important; }
			
		#tab-demandes button.cc-acc-head:focus-visible{ outline:2px solid #7aa2ff; outline-offset:2px; }
		#tab-demandes button.cc-acc-head:focus:not(:focus-visible){ outline:none; }
		#tab-demandes .cc-acc-panel{ display:none; margin:8px 0 14px; }
		#tab-demandes .cc-acc-panel.is-open{ display:block; }

		/* ==========================================================================
		   MODALE — Shell (overlay + placement). AUCUN scroll ici.
		   ========================================================================== */
		.cc-modal-overlay{ position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.55); }
		.cc-modal{ position:fixed; inset:0; z-index:9999; display:flex; align-items:center !important; justify-content:center; padding:24px; }
		.cc-modal .cc-modal-box{
		  position:relative;
		  width:100%;
		  max-width:700px;                /* <-- on garde large pour la fiche client */
		  max-height:calc(100vh - 96px);
		  background:transparent;
		  box-shadow:none;
		  border-radius:0;
		  overflow:visible;
		}
		/* Boîte blanche interne spécifique au plafond automatique */
		.cc-cap-modal-box #cc-cap-form-wrap{
		  max-width:560px;
		  width:100%;
		  border-radius:8px;
		  padding:20px 20px 16px !important;
		  background: #ffffff !important;
		  border: 1px solid #e5e7eb !important;
		  box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
		}
		/* Empêche la barre de scroll horizontale dans la modale Plafond */
		#cc-cap-form-wrap{
		  max-height:calc(100vh - 96px);
		  overflow-y:auto;     /* on garde le scroll vertical */
		  overflow-x:hidden;   /* plus JAMAIS de scroll horizontal */
		}
		body.cc-modal-open{ overflow:hidden; }        /* empêche le scroll de fond */
		#cc-req-modal-content{ display:flex; justify-content:center; padding:0; overflow:visible; }

		/* Bouton Fermer (croix) posé sur la fiche */
		#cc-req-modal .cc-req-close{
		  position:absolute;
		  top:8px;
		  right:8px;
		  width:30px;
		  height:30px;
		  border-radius:50%;
		  border:1px solid #e5e7eb;
		  background:#fff;
		  color:#6b7280;
		  display:flex;
		  align-items:center;
		  justify-content:center;
		  z-index:10;
		  pointer-events:auto;
		  cursor:pointer;
		  transition:background .15s,color .15s,border-color .15s;
		}
		#cc-req-modal .cc-req-close:hover{
		  background:#f3f4f6;
		  color:#374151;
		  border-color:#d1d5db;
		}

		/* ==========================================================================
		   FICHE CLIENT — Un conteneur, un seul scroller (le corps)
		   Structure (créée en JS) :
		   .cc-req-card-wrap
			 .cc-card-viewport   (container, ne scrolle PAS)
			   .cc-card-head     (header collé, table)
			   .cc-card-scroll   (corps, scrolle)
			   .cc-card-actions  (boutons, dans la fiche)
			   .cc-fade-top/.cc-fade-bottom  (indices de scroll)
		   ========================================================================== */
		.cc-req-card-wrap{ position:relative; width:100%; max-width:700px; }

		.cc-card-viewport{
		  background:#ffffff; border:1px solid #e5e7eb; border-radius:16px;
		  box-shadow:0 8px 40px rgba(0,0,0,0.12);
		  display:flex; flex-direction:column; overflow:hidden;
		  max-height:calc(100vh - 96px);
		}

		/* Header : table native (pas de display:block) + trait unique en bas, sans espace */
		.cc-card-head{ position:sticky; top:0; z-index:2; background:#fff; }
		.cc-card-head table{
		  display:table !important; border-collapse:collapse !important; border-spacing:0 !important; width:100% !important;
		}
		.cc-card-head, .cc-card-actions{ margin:0 !important; padding:0 !important; background:transparent !important; }
		.cc-card-head{ border-bottom:1px solid #e5e7eb; }
		.cc-card-head::after{ content:none !important; }       /* pas de second trait */

		/* Corps : c’est L’UNIQUE zone scrollable */
		.cc-card-scroll{
		  flex:1 1 auto; overflow:auto; margin:0 !important; padding:0 !important; border:0 !important;
		  scrollbar-width:thin; scrollbar-color:rgba(0,0,0,.35) transparent;
		}
		.cc-card-scroll::-webkit-scrollbar{ width:8px; }
		.cc-card-scroll::-webkit-scrollbar-thumb{ background-color:rgba(0,0,0,.3); border-radius:8px; }
		.cc-card-scroll::-webkit-scrollbar-track{ background:transparent; }

		/* Normalisation des tables internes pour éviter tout “air” parasite */
		.cc-card-scroll table, .cc-card-viewport table{ width:100%; border-collapse:collapse; border-spacing:0; margin:0; }
		.cc-card-head td, .cc-card-scroll td{ padding-top:0; }
		.cc-card-scroll tr:first-child td{ padding-top:12px; }
		.cc-card-scroll tr:last-child  td{ padding-bottom:16px; }

		/* Actions : zone boutons collée en bas */
		.cc-card-actions{
		  position:sticky; bottom:0; z-index:4;
		  background:#ffffff; border-top:1px solid #e5e7eb;
		  padding:12px 16px;
		  display:flex;
		  flex-direction:column;
		  align-items:center;
		  gap:8px;
		}

		/* Variante rangée HORIZONTALE (cas "pending") */
		.cc-card-actions.is-row{
		  flex-direction:row;
		  flex-wrap:wrap;
		  justify-content:center;
		  align-items:flex-start;           /* évite l'effet centré verticalement chelou */
		  gap:12px;
		}

		.cc-card-actions .button.button-primary{
		  background:rgb(43,108,176); border-color:rgb(43,108,176); color:#fff;
		  border-radius:8px; padding:10px 16px; font-weight:700;
		}
		.cc-card-actions .button.button-primary:hover{
		  background:#135e96; border-color:#135e96;
		}

		/* Petit texte d'aide au-dessus du bouton "Mettre fin au coaching" */
		.cc-end-hint{
		  font-size:.9rem;
		  line-height:1.4;
		  color:#6b7280;
		  text-align:center;
		  max-width:none;
		  width:100%;
		  padding:0 16px;
		}
		.cc-end-hint .arrow{
		  font-weight:700;
		  display:block;
		  margin-top:8px;
		  color:#374151;
		}

		/* Air autour des boutons = symétrique haut/bas */
		.cc-card-actions{
		  padding:20px 20px 20px !important;  /* top right/left bottom */
		  /* (tu peux passer à 18–20px si tu veux un peu plus d'espace) */
		}
			
		/* Le wrap sert de référentiel au positionnement absolu de la croix */
		.cc-req-card-wrap{ position:relative; width:100%; max-width:700px; }

		/* Croix bien au-dessus de la fiche et cliquable */
		#cc-req-modal .cc-modal-close,
		#cc-req-modal .cc-req-close{
		  position:absolute;
		  top:14px; right:10px;
		  width:30px; height:30px;
		  border-radius:0 !important;
		  border:none !important;
		  background:transparent !important; color:#9ca3af !important;
		  box-shadow:none !important;
		  display:flex; align-items:center; justify-content:center;
		  z-index:10;
		  pointer-events:auto;
		  font-size:25px;
		  cursor:pointer;
		  transition:color .15s;
		}
		#cc-req-modal .cc-modal-close:hover,
		#cc-req-modal .cc-req-close:hover{
		  background:transparent !important; color:#374151 !important;
		}
		/* Croix pour la modale Plafond automatique */
		#cc-cap-modal .cc-cap-close{
		  position:absolute;
		  top:8px;
		  right:8px;
		  width:30px;
		  height:30px;
		  border-radius:50%;
		  border:1px solid #e5e7eb;
		  background:#ffffff;
		  color:#6b7280;
		  display:flex;
		  align-items:center;
		  justify-content:center;
		  z-index:10;
		  pointer-events:auto;
		  font-size:25px;
		  line-height:1;
		  padding:0;
		  cursor:pointer;
		  transition:all .15s;
		}
		#cc-cap-modal .cc-cap-close:hover{
		  background:#f3f4f6;
		  color:#374151;
		  border-color:#d1d5db;
		}
			
		/* Ajoute un peu d'air SOUS les champs de chaque colonne du builder */
		#tab-demandes .cc-cap-col > select,
		#tab-demandes .cc-cap-col > .cc-cap-thresh-wrap,
		#tab-demandes .cc-cap-col > .cc-cap-target-wrap{
		  margin-bottom:8px;  /* NOUVEAU : évite que les selects / blocs soient collés verticalement */
		}

		#cc-cap-modal select.cc-cap-metric,
		#cc-cap-modal select.cc-cap-threshold,
		#cc-cap-modal select.cc-cap-action,
		#cc-cap-modal select.cc-cap-action-target,
		#cc-cap-modal .cc-cap-threshold-input{
		  font-size:.9rem;
		  line-height:1.4;
		  color:#111827;
		  border:1px solid #d1d5db;
		  background:#ffffff;
		  border-radius:6px;
		  padding:6px 8px;
		  max-width:100%;
		}
		#cc-cap-modal .cc-cap-text,
		#cc-cap-modal #cc-cap-new-verb{
		  color:#374151 !important;
		  font-weight:400;
		}
		#cc-cap-modal .cc-cap-col{
		  display:flex;
		  flex-direction:column;
		  min-width:0;
		  margin-bottom:8px;
		  color:#374151;
		}
			
		/* ===== PATCH ESPACEMENT BUILDER PLAFONDS AUTOMATIQUES ===== */
		/* MODALE : toujours en mode "form vertical", une seule colonne */
		#cc-cap-modal .cc-cap-card-inner .cc-cap-row{
		  display:block;
		  font-size:.95rem;
		  line-height:1.35;
		  color:#fff;
		  margin-bottom:6px;
		  padding-top:0;
		  padding-bottom:0;
		  border:0;
		}
		/* ajoute un espace sous chaque bloc dans la modale */
		#cc-cap-modal .cc-cap-col > select,
		#cc-cap-modal .cc-cap-col > .cc-cap-thresh-wrap,
		#cc-cap-modal .cc-cap-col > .cc-cap-target-wrap{
		  margin-bottom:8px;
		}
		/* sépare visuellement la 2e ligne ("Alors :") dans la modale */
		#cc-cap-modal .cc-cap-card-inner .cc-cap-row:last-child{
		  margin-top:14px;
		  margin-bottom:12px;
		  border-top:1px solid #e5e7eb;
		  padding-top:12px;
		}
		/* Dans chaque .cc-cap-row de la modale :
   		On empile A PUIS B (colA puis colB), et on remet un petit espace entre les deux blocs */
		#cc-cap-modal .cc-cap-col:last-child{
		  margin-bottom:0;
		}

		/* la zone "atteint [ seuil ]" doit revenir SOUS le select de la métrique,
		   donc on l'affiche en bloc vertical, pas en ligne serrée */
		#cc-cap-modal .cc-cap-thresh-wrap{
		  display:flex;
		  flex-wrap:nowrap;
		  align-items:center;
		  column-gap:6px;   /* AVANT 8px -> 6px */
		  row-gap:0;
		  margin-top:2px;   /* AVANT 4px -> 2px */
		}

		/* Bloc "↳ [select]" dans la modale : une seule ligne, mais ne déborde jamais */
		#cc-cap-modal .cc-cap-target-wrap{
		  display:flex;
		  flex-wrap:nowrap;
		  align-items:center;
		  column-gap:6px;
		  margin-top:2px;
		  max-width:100%;
		  overflow:hidden;
		}
		#cc-cap-modal .cc-cap-target-arrow{
		  padding-top:6px;
		}
			
		#cc-cap-modal .cc-cap-col .cc-cap-text{
		  margin-bottom:6px;
		}
			
		#cc-cap-modal .cc-cap-target-arrow{
		  flex:0 0 auto;
		  display:flex;
		  align-items:center;
		  justify-content:center;
		  font-size:20px;
		  line-height:1;
		  color:#6b7280;
		  min-width:20px;
		  height:20px;
		}
			
		#cc-cap-modal .cc-cap-save{
		  background:rgb(43,108,176);
		  border:none;
		  color:#fff;
		  border-radius:6px;
		  padding:10px 16px;
		  font-weight:600;
		  font-size:15px;
		  line-height:24px;
		  cursor:pointer;
		  transition:background .2s ease;
		}
		#cc-cap-modal .cc-cap-save:hover{
		  background:#135e96;
		}
		#cc-cap-modal .cc-cap-cancel{
		  background:#ffffff;
		  border:1px solid #d1d5db;
		  color:#374151;
		  border-radius:6px;
		  padding:10px 16px;
		  font-weight:600;
		  font-size:15px;
		  line-height:24px;
		  cursor:pointer;
		  transition:all .2s ease;
		}
		#cc-cap-modal .cc-cap-cancel:hover{
		  background:#f9fafb;
		  border-color:#9ca3af;
		}

		/* On enlève complètement les pseudo-éléments */
		#cc-cap-modal .cc-cap-target-arrow::before,
		#cc-cap-modal .cc-cap-target-arrow::after{
		  content:none !important;
		}
			
		/* --- Reco coach (modale Refus) --- */
		/* petit espace entre raisons et recommandation */
		#cc-refuse-reco-wrap{ margin-top:8px; }

		/* ligne URL + select alignés; autorise le wrap si nécessaire */
		#cc-refuse-card .cc-reco-row{
		  display:flex;
		  align-items:baseline;   /* <- baseline, plus propre avec du texte */
		  gap:8px;
		  flex-wrap:wrap; /* si ça ne tient pas, on passe à la ligne naturellement */
		}
			
		#cc-refuse-card .cc-reco-row .cc-reco-select{
		  flex:0 0 auto; /* pas de grow */
		}

		/* base URL (…/coach/) non cassée si possible */
		#cc-refuse-card .cc-reco-baseurl{
		  white-space:nowrap;
		}

		/* petit select aligné, compact, même style que le reste */
		#cc-refuse-card .cc-reco-select{
		  width:auto;             /* auto, on laisse le JS poser la largeur exacte */
		  min-width:120px;        /* base */
		  max-width:320px;        /* cap visuel un peu plus large */
		  border:1px solid #cbd5e1;
		  background:#fff;
		  border-radius:6px;
		  padding:6px 8px;
		  font-size:.9rem;
		  line-height:1.4;
		  color:#0f172a;
		}
			
		#cc-reco-sizer{
		  position:fixed;
		  left:-9999px;
		  top:-9999px;
		  visibility:hidden;
		  white-space:nowrap;
		  padding:6px 8px;  /* même padding que le select */
		  font-size:.9rem;  /* même typo */
		  line-height:1.4;
		}

		/* boutons de la modale Refus = même style bleu que Accepter/Refuser */
		#cc-refuse-modal .button.button-primary{
		  background:#0044cc; border-color:#0044cc; color:#fff;
		  border-radius:12px; padding:10px 16px; font-weight:600;
		}
		#cc-refuse-modal .button.button-primary:hover{
		  background:#003bb3; border-color:#003bb3;
		}

		/* léger resserrement vertical entre les "raisons" et le bloc reco */
		#cc-refuse-reasons{ margin-bottom:6px; }

		/* ✅ Skeleton loader (effet shimmer comme Stripe) */
		.cc-skeleton {
		  display: inline-block;
		  height: 20px;
		  width: 80px;
		  background: linear-gradient(
		    90deg,
		    #f3f4f6 0%,
		    #f3f4f6 40%,
		    #e5e7eb 50%,
		    #f3f4f6 60%,
		    #f3f4f6 100%
		  );
		  background-size: 200% 100%;
		  animation: cc-shimmer 1.5s ease-in-out infinite;
		  border-radius: 4px;
		  vertical-align: middle;
		}
		@keyframes cc-shimmer {
		  0% { background-position: 200% 0; }
		  100% { background-position: -200% 0; }
		}
		.cc-skeleton--sm { width: 60px; height: 18px; }
		.cc-skeleton--md { width: 80px; height: 20px; }
		.cc-skeleton--lg { width: 120px; height: 22px; }
			
		/* PATCH: Kadence / plugins may force .cc-modal display:none */

		/* fermé par défaut */
		body .cc-modal,
		body .cc-modal-overlay{
		  display:none !important;
		}

		/* ouvert */
		body .cc-modal.is-open{
		  display:flex !important;
		  align-items: center !important;
		}
		body .cc-modal-overlay.is-open{
		  display:block !important;
		}
			
		/* Fiche client — table générée côté serveur */
		.cc-card-viewport table{
		  background:transparent !important;
		  border:none !important;
		  color:#374151 !important;
		}
		.cc-card-viewport table td,
		.cc-card-viewport table th{
		  color:#374151 !important;
		  border-color:#e5e7eb !important;
		}
		
		/* Badges tags (objectifs, spécialités…) */
		.cc-card-viewport span[style*="border-radius:999px"]{
		  background:#f3f4f6 !important;
		  border:1px solid #d1d5db !important;
		  color:#374151 !important;
		}
		  
		.cc-card-viewport,
		.cc-card-viewport td,
		.cc-card-viewport th,
		.cc-card-viewport p,
		.cc-card-viewport div,
		.cc-card-viewport span:not([style*="border-radius:999px"]),
		.cc-card-viewport strong,
		.cc-card-viewport em,
		.cc-card-viewport label{
		  color:#374151 !important;
		}
		  
		/* Première colonne = labels, on garde le font-weight fort */
		.cc-card-scroll td:first-child{
		  font-weight:600 !important;
		  color:#111827 !important;
		}
		
		/* Deuxième colonne = réponses, on allège */
		.cc-card-scroll td:last-child{
		  font-weight:400 !important;
		  color:#6b7280 !important;
		}

		#cc-cap-modal.is-open {
		    align-items: center !important;
		}