/**********
 * Global *
 *********/
 
html{
  margin: 0px;
  padding: 0px;
  color: #1d1e3a;
  font-size: 12px;
  border: 0px solid transparent;
  background:#FFFFFF;
  font-family: OpenSansRegular,Arial,sans-serif;
}
body{
  margin: 0px;
  padding: 0px;
  width: 100%; 
}
a { 
  outline: none;
  text-decoration: none;
  cursor: pointer;
  color: inherit;
}

img { border: none; }
:focus {outline:none;}
::-moz-focus-inner {border:0;}
::-moz-selection { color: #FFF; background: #626262; }
::selection  { color: #FFF; background: #626262; }

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #47b8c6;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #47b8c6;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #47b8c6;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #47b8c6;
}
:placeholder-shown { /* Standard */
  color:    #47b8c6;
}
.padding50{ padding: 50px 0; }
.flol{ float: left; }
.flor { float: right; }
.alc{ text-align: center; }
.alr{ text-align: right; }
.prel { position: relative; }
.width25{width: 25%;}
.width30{width: 30%!important;}
.width50{width: 50%;}
.padSpec{ padding: 20px 15px 30px 15px; }
.pad15{ padding: 15px!important; }
.diib{ display: inline-block!important; }
.fin{
  clear:both;
  line-height:0;
  height:0;
  font-size:1px;
}
.marR10{ margin: 0 10px 0 0!important; }
.marL10{ margin: 0 0 0 10px!important; }
.marT8 { margin-top: 8px!important; }
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.flex.sb {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.flex.sa {
  -ms-flex-pack: distribute;
  justify-content: space-around;
}
.flex.jcc , .jcc{
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
.flex.ais {
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;  
  align-items: stretch;
}
.flex.ac {
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
.flex.ae {
  -webkit-box-align: flex-end;
  -ms-flex-align: flex-end;
  align-items: flex-end;
}
.flex.ase {
  align-self: end;
}
.flex.ass {
  align-self: start;
}
.flex.col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.flex.end {
  -webkit-box-pack: flex-end;
  -ms-flex-pack: flex-end;
  justify-content: flex-end;
}
.flex.wrap {
  -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.flex.fb30{
  flex-basis: 30%;
}
.flex.fb100{
  flex-basis: 100%;
}

#strErreur, #strInfo, #strValide{ display: none; }
.nowrap{ white-space: nowrap; }

/**********/

h1,h2,h3,h4,h5,p,a,strong,b{margin-top:0;  margin: 0px; padding:0px; font-weight:normal; text-decoration:none; }

/******** 
 * FONT *
 *******/

/* Open Sans variable — remplace les 5 fichiers séparés */
@font-face {
  font-family: OpenSans;
  src: url('/scm/font/Open_Sans/OpenSans.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* Alias pour compatibilité avec le CSS existant */
@font-face { font-family: OpenSansRegular;   src: url('/scm/font/Open_Sans/OpenSans.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: OpenSansLight;     src: url('/scm/font/Open_Sans/OpenSans.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: OpenSansBold;      src: url('/scm/font/Open_Sans/OpenSans.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: OpenSansExtraBold; src: url('/scm/font/Open_Sans/OpenSans.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: OpenSansItalic;    src: url('/scm/font/Open_Sans/OpenSans.woff2') format('woff2'); font-weight: 400; font-style: italic;  font-display: swap; }

/* 26/09/2026 — HumblleRoughtCaps retirée (police commerciale Dirtyline Studio, sans licence d'usage web ni PDF). */

@font-face {
  font-family: Oswald;
  src: url('/scm/font/Oswald/Oswald.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
} 


/***** LANGUES ******/

/* FRANCAIS */
.langues option.fr.select,.langues option.fr:hover  { 
  background: url('/scm/imgs/picto/picto.langues.png') 0 0 no-repeat; 
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;     
}
.langues option.fr { 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -13px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;     
}

/* ANGLAIS */
.langues option.en.select,.langues option.en:hover  {
  background: url('/scm/imgs/picto/picto.langues.png') 0 -26px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;   
}
.langues option.en{ 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -39px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;     
}

/* ESPAGNOL */
.langues option.es.select, .langues option.es:hover  {
    background: rgba(0, 0, 0, 0) url("/scm/imgs/picto/picto.langues.png") no-repeat scroll 0 -52px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.langues option.es{ 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -65px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;     
}

/* PORTUGAIS */
.langues option.po.select, .langues option.po:hover  {
    background: rgba(0, 0, 0, 0) url("/scm/imgs/picto/picto.langues.png") no-repeat scroll 0 -78px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.langues option.po{ 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -91px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}

/* CHINOIS */
.langues option.cn.select, .langues option.cn:hover  {
    background: rgba(0, 0, 0, 0) url("/scm/imgs/picto/picto.langues.png") no-repeat scroll 0 -183px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.langues option.cn{ 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -195px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;     
}

/* JAPONAIS */
.langues option.jp.select, .langues option.jp:hover  {
    background: rgba(0, 0, 0, 0) url("/scm/imgs/picto/picto.langues.png") no-repeat scroll 0 -208px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.langues option.jp{ 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -221px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;     
}

/* RUSSE */
.langues option.ru.select, .langues option.ru:hover {
    background: rgba(0, 0, 0, 0) url("/scm/imgs/picto/picto.langues.png") no-repeat scroll 0 -104px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.langues option.ru{ 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -118px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;     
}

/* COREEN */
.langues option.kp.select, .langues option.kp:hover  {
    background: rgba(0, 0, 0, 0) url("/scm/imgs/picto/picto.langues.png") no-repeat scroll 0 -234px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.langues option.kp{ 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -247px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;     
}

/* ALLEMAND */
.langues option.de.select, .langues option.de:hover  {
    background: rgba(0, 0, 0, 0) url("/scm/imgs/picto/picto.langues.png") no-repeat scroll 0 -156px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.langues option.de{ 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -169px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;     
}

/* ARABE */
.langues option.ar.select, .langues option.ar:hover  {
    background: rgba(0, 0, 0, 0) url("/scm/imgs/picto/picto.langues.png") no-repeat scroll 0 -130px;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}
.langues option.ar{ 
  background: url('/scm/imgs/picto/picto.langues.png') 0 -143px no-repeat;
    -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
}


/* =====================================================================
 * LOADING SPINNER — Refonte « 3 points pulsants » (2026-05-15 v4)
 * ---------------------------------------------------------------------
 * Remplace l'ancien spinner cercle (animation 3,45s + 5 jeux de préfixes
 * vendor obsolètes). 3 dots qui pulsent en séquence, bleu nuit SCM
 * (#1d1e3a). HTML attendu : <div class="spinner"><span></span><span>
 * </span><span></span></div>. Pour rétrocompat, si .spinner est vide
 * (ancien HTML pas encore mis à jour) on garde un fallback minimal.
 * ===================================================================== */
#preloader {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #fafafa;
	z-index: 9999999;
}

#status {
	width: 80px;
	height: 20px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin: -10px 0 0 -40px;
}

.spinner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
}

.spinner span {
	width: 14px;
	height: 14px;
	background-color: #1d1e3a;
	border-radius: 50%;
	animation: scmDotPulse 1.2s ease-in-out infinite;
}

.spinner span:nth-child(2) { animation-delay: 0.15s; }
.spinner span:nth-child(3) { animation-delay: 0.3s; }

/* Fallback pour les pages qui auraient encore l'ancien <div class="spinner"></div> vide :
 * on rend la div elle-même comme 1 dot pulsant centré, le temps que index.php soit re-uploadé. */
.spinner:empty {
	width: 14px;
	height: 14px;
	background-color: #1d1e3a;
	border-radius: 50%;
	margin: 3px auto;
	animation: scmDotPulse 1.2s ease-in-out infinite;
}

@keyframes scmDotPulse {
	0%, 80%, 100% { transform: scale(0.4); opacity: 0.4; }
	40%           { transform: scale(1);   opacity: 1;   }
}


/***************
*** JS ALERT ***
***************/

#popup_container {
  font-size: 14px;
  min-width: 300px; /* Dialog will be no smaller than this */
  max-width: 600px; /* Dialog will wrap after this width */
  border: solid 2px #626262;
  color: #282627;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  text-align:center;
  font-family: OpenSansRegular,Arial,sans-serif;
}

#popup_title{
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  line-height: 1.75em;
  color: #FFF;
  background:#626262;
  background-color : #626262\9; /* IE8 */  
  *background-color : #626262; /* IE7 */
  border-bottom: solid 1px #626262;
  cursor: default;
  padding: 0em;
  margin: 0em;
  padding: 5px 0;
}

#popup_content{
  background: #282627 0 0 repeat;
  padding: 1em 1.75em;
  margin: 0em;
  color: #FFF;
}
#popup_content input{
  display: table;
  font-size: 14px;
  border: solid 1px #626262;
  font-family: OpenSansBold,Arial,sans-serif; 
  padding: 5px;
  text-transform: uppercase;
  background:#626262; 
  color:#FFFFFF;
  cursor: pointer;
  margin: 0 auto;
  display : block\9; /* IE8 */  
  *display : block; /* IE7 */
  width : 10%\9; /* IE8 */  
  *width : 10%; /* IE7 */
}

#popup_content input:hover{ background:#626262; color:#FFFFFF;}

#popup_content.alert #popup_message {
  background: url('/scm/imgs/picto/picto-info.png') center 0 no-repeat;
}

#popup_content.confirm #popup_message{
  background: url('/scm/imgs/picto/picto-important.png') center 0 no-repeat;
}

#popup_content.prompt #popup_message{
  background: url('/scm/imgs/picto/picto-help.png') center 0 no-repeat;
}

#popup_message {
  padding: 38px 10px 10px 10px ;
}

#popup_panel {
  text-align: center;
  margin: 1em 0em 0em 1em;
}

#popup_prompt {
  margin: .5em 0em;
}


/*************
**** BODY ****
**************/

.ghost{
  filter: alpha(opacity = 0);
  opacity: 0;
}
.badge {
    border-radius: 0.25rem;
    color: #fff;
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 0.25em 0.4em;
    text-align: center;
    vertical-align: baseline;
    white-space: nowrap;
}
.badge-primary {
    background-color: #626262;
}
.badge-default {
    background-color: #EEE;
    color: #1d1e3a;
}

.contenerMid {
  width:85%; 
  float:left;
  background-color:#f9f9f9; 
}
.contenerMid.spec {
  width:100%;
}
.contenerCxn {
  width:100%; 
  background-color:#f9f9f9; 
}
.contenerMidPad  {padding:15px;}
.contenerCxnPad  {padding:60px 0;}
.contenerMidContent{
  margin: 15px 0;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 20px; 
  background-color:#FFF;
  
  border-radius: 10px;
  
  box-shadow: 2px 2px #d3d3d3;
}
.contenerCxnContent{
  margin: 0 auto;
  width: 50%;
  border: 1px solid rgba(0, 0, 0, 0.05);
  padding: 30px; 
  background-color:#FFFFFF;
}

/*********
*  TOP  *
*********/

.contentTop { 
  background-color: #f0f1f4;   
  padding: 20px;
  border-radius: 10px;
    box-shadow: 2px 2px #d3d3d3;
}

/* Titre */
.contentTop h1 {
  text-align:left;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  font-weight:normal;
  font-family: OpenSansBold,Arial,sans-serif;
  float:left;
  line-height:1.15;
  margin:0;
  gap:6px 12px;
  /* Limite le H1 pour ne pas empiéter sur le sélecteur de saison centré.
     Si saison + titre très longs, le titre tronque proprement avec ellipsis. */
  max-width:340px;
}
.contentTop h1 .scm-h1-icon { font-size:24px; line-height:1; flex:0 0 auto; }
.contentTop h1 .scm-h1-icon i { color:#1d1e3a; }
.contentTop h1 .scm-h1-section {
  font-size:24px;
  text-transform:uppercase;
  color:#1d1e3a;
  letter-spacing:0.5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
  min-width:0;
}
.contentTop h1 .scm-h1-sub {
  flex-basis:100%;
  width:100%;
  font-size:13px;
  font-weight:400;
  color:#666;
  text-transform:none;
  letter-spacing:0;
  /* aligné sous le texte de section, en sautant l'icône */
  padding-left:34px;
  margin-top:2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Session */
.contentTop .sessionAlert {
  text-align:left;
  display:block;
  font-weight:normal;
  font-family: OpenSansBold,Arial,sans-serif;     
  font-size:18px;
  float:right;
  width:50%;
}
.contentTop .sessionAlert .userSessionInfo {padding: 0 0 0 5px; float:right;}
.contentTop .sessionAlert .userSessionInfo img{
  display: block;
  height: 45px;
  margin: 0 auto;
  width:45px;
  float:left;
}
.contentTop .sessionAlert .userSessionInfo .userSessionContenu{float:left;padding:0 0 0 10px;}
.contentTop .sessionAlert .userSessionInfo strong.nomUser{
  display:block;
  font-weight:normal;
  font-family: OpenSansBold,Arial,sans-serif;     
  font-size:12px;
  padding: 4px 0 2px 0; 
}
.contentTop .sessionAlert .userSessionInfo a.deco{
  text-align:center;
  display:block;
  font-weight:normal;
  font-family: OpenSansRegular,Arial,sans-serif;  
  font-size:12px;
  padding: 2px 0 4px 0;
}
.contentTop .sessionAlert .userSessionInfo a.deco:hover{ color: #626262;}
/* Alert */
.userAlert {
  position:relative;
  padding:8px;
  cursor:pointer;
  float:right;
}

.userAlert img{display:block;margin:0 auto;}
.userAlert i{
  background: #4ac18e;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  color: #ffffff;
  display: inline-block;
  float: right;
  font-family: OpenSansBold,Arial,sans-serif;   
  font-size: 11px;
  font-style: normal;
  padding:2px 6px;
  position:absolute;
  top:0%;
  right:0%;
}
/*********
*  MENU  *
*********/
/* Contener */
.menuGauche{
  width: 15%;
  float:left;
  background-color:#f0f1f4;
  height:100%;
}
.menuGaucheContener{padding: 30px 5px;}
.menuGaucheContener strong.nomSite,
.accueilCxn strong.nomSite{
  text-align:center;
  text-transform:uppercase;
  display:block;
  font-weight:normal;
  font-family: Oswald,Arial,sans-serif;  /* ex-HumblleRoughtCaps (26/09/2026) */
  font-size:35px;
}
.accueilCxn strong.nomSite{ font-size:60px;}
.accueilCxn h1{ 
  text-align:center;
  text-transform:uppercase;
  display:block;
  font-weight:normal;
  font-family: OpenSansLight,Arial,sans-serif;  
  font-size:20px;
  color: #626262; 
}
.contenerCxnContent h2{ 
  text-align:center;
  text-transform:uppercase;
  display:block;
  padding: 10px 0 20px 0;
  font-weight:normal;
  font-family: OpenSansBold,Arial,sans-serif;   
  font-size:18px;
}
h3{
  font-size: 14px;
  font-weight: none;
  font-family: OpenSansBold,Arial,sans-serif;
  padding: 0 0 10px 0;
}
h3.error{
  color: #f27474;
  font-size: 18px;
  padding: 0 0 0 20px;
}
div.error{
  color: #f27474;
  font-size: 14px;
  padding: 0 0 0 20px;
}
/* User */
.userSession{padding: 0 0 30px 0; display: block; }
.userSession img{
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  box-shadow:rgba(204,204,204,1) 2px 2px;
}
.userSession img.user{
  display:block; 
  margin:0 auto;
  height:170px;
  width:170px;
}
.userSession strong.nomUser{
  text-align:center;
  display:block;
  font-weight:normal;
  font-family: OpenSansBold,Arial,sans-serif;     
  font-size:15px;
  padding:10px 0;
}
/* ============================================================
   Menu de gauche — Polish 2026 (harmonisation couleurs + hover + actif)
   ----------------------------------------------------------
   On conserve le code couleur historique par famille (Paramètres
   rouge, Membres vert, Planning bleu, Comptabilité violet,
   Administratif orange) mais on harmonise les saturations,
   ajoute des états hover/actif, des transitions et plus d'air.

   Variables couleurs par famille — chacune décline 3 stops :
     --col-X-soft  : sous-rubrique (fond pastel léger)
     --col-X-mid   : section principale (un peu plus saturé)
     --col-X-hover : hover (entre soft et mid)
     --col-X-bar   : couleur "barre active" + icône section
     --col-X-text  : couleur du texte sur fond saturé
   ============================================================ */
:root {
  /* Stops par famille — soft (sous-rub repos) / hover / mid (section repos) /
     active (page courante .sel) / bar (barre verticale + accent icône) /
     text (couleur du libellé sur fond saturé). Saturations volontairement
     douces pour rester pastel ; la barre verticale gauche fait l'accent
     fort sur la page active. */
  /* Stops par famille — soft (sous-rub repos) / hover / mid (section
     principale au repos) / active (page courante .sel) / bar (barre
     verticale + accent icône) / text (libellé sur fond saturé).
     Saturations calibrées pour : (a) garder l'identité couleur
     forte de chaque section, (b) éviter l'aspect "criard" de l'origine,
     (c) bien différencier hover et active. */
  /* Couleurs de base proches des originales (rouge/vert/bleu/magenta/
     orange "purs" et saturés), avec opacités calibrées pour donner du
     peps tout en restant cohérentes entre familles. */
  /* Famille rouge / Paramètres */
  --col-set-soft:   rgba(255,80,90,0.24);
  --col-set-mid:    rgba(255,80,90,0.42);
  --col-set-hover:  rgba(255,80,90,0.58);
  --col-set-active: rgba(255,80,90,0.66);
  --col-set-bar:    #d63b46;
  --col-set-text:   #5e1d24;
  /* Famille vert / Membres */
  --col-mbr-soft:   rgba(80,210,130,0.26);
  --col-mbr-mid:    rgba(80,210,130,0.46);
  --col-mbr-hover:  rgba(80,210,130,0.62);
  --col-mbr-active: rgba(80,210,130,0.70);
  --col-mbr-bar:    #2c8c4a;
  --col-mbr-text:   #1a3f25;
  /* Famille bleu / Planning */
  --col-pln-soft:   rgba(85,145,240,0.26);
  --col-pln-mid:    rgba(85,145,240,0.44);
  --col-pln-hover:  rgba(85,145,240,0.60);
  --col-pln-active: rgba(85,145,240,0.68);
  --col-pln-bar:    #2c5fb8;
  --col-pln-text:   #1a345e;
  /* Famille magenta / Comptabilité */
  --col-cpt-soft:   rgba(220,70,170,0.24);
  --col-cpt-mid:    rgba(220,70,170,0.40);
  --col-cpt-hover:  rgba(220,70,170,0.56);
  --col-cpt-active: rgba(220,70,170,0.64);
  --col-cpt-bar:    #a73d83;
  --col-cpt-text:   #4a1e3c;
  /* Famille orange / Administratif */
  --col-adm-soft:   rgba(240,150,50,0.28);
  --col-adm-mid:    rgba(240,150,50,0.48);
  --col-adm-hover:  rgba(240,150,50,0.64);
  --col-adm-active: rgba(240,150,50,0.72);
  --col-adm-bar:    #b86a18;
  --col-adm-text:   #5a3315;
  /* Famille cyan / Stages (Lot 20.7.6 V2) */
  --col-stg-soft:   rgba(40,180,180,0.26);
  --col-stg-mid:    rgba(40,180,180,0.44);
  --col-stg-hover:  rgba(40,180,180,0.60);
  --col-stg-active: rgba(40,180,180,0.68);
  --col-stg-bar:    #1f8090;
  --col-stg-text:   #0e3a44;

  /* Famille EXAMENS (violet — Lot D2 2026-05-05) */
  --col-exm-soft:   rgba(124, 58, 237, 0.26);
  --col-exm-mid:    rgba(124, 58, 237, 0.44);
  --col-exm-hover:  rgba(124, 58, 237, 0.60);
  --col-exm-active: rgba(124, 58, 237, 0.68);
  --col-exm-bar:    #7c3aed;
  --col-exm-text:   #3b0764;

  /* Famille COMMUNICATIONS (corail — Lot Comm 2026-05-16) */
  --col-com-soft:   rgba(232, 128, 105, 0.26);
  --col-com-mid:    rgba(232, 128, 105, 0.44);
  --col-com-hover:  rgba(232, 128, 105, 0.60);
  --col-com-active: rgba(232, 128, 105, 0.68);
  --col-com-bar:    #c4583e;
  --col-com-text:   #5a2418;

  /* Famille jaune / Tableau de bord (Lot V2-I) */
  --col-dsh-soft:   rgba(255, 255, 50, 0.16);
  --col-dsh-mid:    rgba(255, 255, 50, 0.30);
  --col-dsh-hover:  rgba(255, 230, 30, 0.50);
  --col-dsh-active: rgba(255, 215, 20, 0.62);
  --col-dsh-bar:    #d49612;
  --col-dsh-text:   #5d4019;

  /* Famille CARTES DE COURS (bleu ardoise — 1.5.0) */
  --col-crt-soft:   rgba(100, 120, 155, 0.24);
  --col-crt-mid:    rgba(100, 120, 155, 0.40);
  --col-crt-hover:  rgba(100, 120, 155, 0.56);
  --col-crt-active: rgba(100, 120, 155, 0.66);
  --col-crt-bar:    #4a5f82;
  --col-crt-text:   #222d40;
}

/* Conteneur menu : un peu plus aéré côté logo */
.menuGaucheContener { padding: 24px 0; }

/* Liens du menu — base */
.menuGontent a {
  text-align: left;
  display: block;
  color: #5a5a5a;
  font-weight: 600;
  font-family: OpenSansRegular, Arial, sans-serif;
  font-size: 12px;
  padding: 12px 14px;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  border-left: 3px solid transparent;
  /* Effet survol : translation douce vers la droite + barre gauche qui
     apparaît dans la couleur de la famille. Transition courte ease-out
     (pas de rebond) pour rester snappy et éviter les saccades. */
  transition:
    background-color .15s ease-out,
    color .15s ease-out,
    border-left-color .15s ease-out,
    transform .18s ease-out;
}
.menuGontent a:hover {
  color: #1d1e3a;
  text-shadow: none;
  transform: translateX(4px);
}
/* Page active : fond saturé + barre gauche + texte gras foncé */
.menuGontent a.sel {
  color: #1d1e3a;
  font-weight: 700;
  text-shadow: none;
}

/* Tableau de bord (rubrique racine, pas dans une famille) */
.menuGontent a.dashboard {
  background: url('/scm/imgs/picto/rectangles-symbol-with-intersection-area.png') 12px center / 16px no-repeat var(--col-dsh-mid);
  border-bottom: 1px solid rgba(0,0,0,0.08);
  padding-left: 38px;
}
/* État actif (sur la page Tableau de bord) : on garde la couleur normale,
   on change juste l'icône et la barre latérale pour indiquer la sélection. */
.menuGontent a.dashboard.sel {
  background: url('/scm/imgs/picto/rectangles-symbol-with-intersection-area-2.png') 12px center / 16px no-repeat var(--col-dsh-mid);
  border-left-color: var(--col-dsh-bar);
}
/* Hover (survol) : couleur plus saturée pour feedback visuel. */
.menuGontent a.dashboard:hover {
  background: url('/scm/imgs/picto/rectangles-symbol-with-intersection-area-2.png') 12px center / 16px no-repeat var(--col-dsh-hover);
  color: var(--col-dsh-text);
  border-left-color: var(--col-dsh-bar);
}

/* Lot V2-I — Sélecteur de langue (ddslick) : espace entre drapeau et label.
   ddslick ignore le innerHTML personnalisé des <option> (il prend juste le
   textContent), donc le seul moyen fiable est de styler ses classes natives
   .dd-option-text et .dd-selected-text. Marche sur Chrome / Firefox / Safari. */
.dd-option-text,
.dd-selected-text { margin-left: 6px !important; }

/* === Famille PARAMÈTRES (rouge/rose) === */
.menuGontent a.parametres { background-color: var(--col-set-mid); }
.menuGontent a.parametres:hover {
  background-color: var(--col-set-hover);
  border-left-color: var(--col-set-bar);
  color: var(--col-set-text);
}
.menuGontent a.saison-params,
.menuGontent a.club,
.menuGontent a.grades,
.menuGontent a.techniques,
.menuGontent a.cours,
.menuGontent a.profs,
.menuGontent a.membres-params,
.menuGontent a.tarifs,
.menuGontent a.compta-params,
.menuGontent a.paiement {
  background-color: var(--col-set-soft);
  padding-left: 32px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: #6c6c70;
}
.menuGontent a.saison-params:hover,
.menuGontent a.club:hover,
.menuGontent a.grades:hover,
.menuGontent a.techniques:hover,
.menuGontent a.cours:hover,
.menuGontent a.profs:hover,
.menuGontent a.membres-params:hover,
.menuGontent a.tarifs:hover,
.menuGontent a.compta-params:hover,
.menuGontent a.paiement:hover {
  background-color: var(--col-set-hover);
  border-left-color: var(--col-set-bar);
  color: var(--col-set-text);
}
.menuGontent a.parametres.sel,
.menuGontent a.saison-params.sel,
.menuGontent a.club.sel,
.menuGontent a.grades.sel,
.menuGontent a.techniques.sel,
.menuGontent a.cours.sel,
.menuGontent a.profs.sel,
.menuGontent a.membres-params.sel,
.menuGontent a.tarifs.sel,
.menuGontent a.compta-params.sel,
.menuGontent a.paiement.sel {
  background-color: var(--col-set-active);
  border-left-color: var(--col-set-bar);
  color: var(--col-set-text);
}

/* === Famille MEMBRES (vert) === */
.menuGontent a.membres {
  background-color: var(--col-mbr-mid);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.menuGontent a.membres:hover {
  background-color: var(--col-mbr-hover);
  border-left-color: var(--col-mbr-bar);
  color: var(--col-mbr-text);
}
.menuGontent a.membres.sel {
  background-color: var(--col-mbr-active);
  border-left-color: var(--col-mbr-bar);
  color: var(--col-mbr-text);
}

/* === Famille PLANNING (bleu) === */
.menuGontent a.planning {
  background-color: var(--col-pln-mid);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.menuGontent a.planning:hover {
  background-color: var(--col-pln-hover);
  border-left-color: var(--col-pln-bar);
  color: var(--col-pln-text);
}
.menuGontent a.planning.sel {
  background-color: var(--col-pln-active);
  border-left-color: var(--col-pln-bar);
  color: var(--col-pln-text);
}

/* === Famille COMPTABILITÉ (violet) === */
.menuGontent a.comptabilite {
  background-color: var(--col-cpt-mid);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.menuGontent a.comptabilite:hover {
  background-color: var(--col-cpt-hover);
  border-left-color: var(--col-cpt-bar);
  color: var(--col-cpt-text);
}
.menuGontent a.comptabilite.sel {
  background-color: var(--col-cpt-active);
  border-left-color: var(--col-cpt-bar);
  color: var(--col-cpt-text);
}

/* === Famille ADMINISTRATIF (orange) === */
.menuGontent a.administratif { background-color: var(--col-adm-mid); }
.menuGontent a.administratif:hover {
  background-color: var(--col-adm-hover);
  border-left-color: var(--col-adm-bar);
  color: var(--col-adm-text);
}
.menuGontent a.import,
.menuGontent a.export {
  background-color: var(--col-adm-soft);
  padding-left: 32px;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: #6c6c70;
}
.menuGontent a.export { border-bottom: 1px solid rgba(0,0,0,0.06); }
.menuGontent a.import:hover,
.menuGontent a.export:hover {
  background-color: var(--col-adm-hover);
  border-left-color: var(--col-adm-bar);
  color: var(--col-adm-text);
}
.menuGontent a.administratif.sel,
.menuGontent a.import.sel,
.menuGontent a.export.sel {
  background-color: var(--col-adm-active);
  border-left-color: var(--col-adm-bar);
  color: var(--col-adm-text);
}

/* === Famille STAGES (cyan / turquoise — Lot 20.7.6 V2) === */
.menuGontent a.stages {
  background-color: var(--col-stg-mid);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.menuGontent a.stages:hover {
  background-color: var(--col-stg-hover);
  border-left-color: var(--col-stg-bar);
  color: var(--col-stg-text);
}
.menuGontent a.stages.sel,
.menuGontent a.stages-details.sel {
  background-color: var(--col-stg-active);
  border-left-color: var(--col-stg-bar);
  color: var(--col-stg-text);
}

/* === Famille EXAMENS (violet — Lot D2 2026-05-05) === */
.menuGontent a.examens {
  background-color: var(--col-exm-mid);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.menuGontent a.examens:hover {
  background-color: var(--col-exm-hover);
  border-left-color: var(--col-exm-bar);
  color: var(--col-exm-text);
}
.menuGontent a.examens.sel,
.menuGontent a.examens-details.sel {
  background-color: var(--col-exm-active);
  border-left-color: var(--col-exm-bar);
  color: var(--col-exm-text);
}

/* === Famille CARTES DE COURS (bleu ardoise — 1.5.0) === */
.menuGontent a.cartes {
  background-color: var(--col-crt-mid);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.menuGontent a.cartes:hover {
  background-color: var(--col-crt-hover);
  border-left-color: var(--col-crt-bar);
  color: var(--col-crt-text);
}
.menuGontent a.cartes.sel,
.menuGontent a.cartes-details.sel {
  background-color: var(--col-crt-active);
  border-left-color: var(--col-crt-bar);
  color: var(--col-crt-text);
}

/* === Famille COMMUNICATIONS (corail — Lot Comm 2026-05-16) === */
.menuGontent a.communications {
  background-color: var(--col-com-mid);
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.menuGontent a.communications:hover {
  background-color: var(--col-com-hover);
  border-left-color: var(--col-com-bar);
  color: var(--col-com-text);
}
.menuGontent a.communications.sel,
.menuGontent a.communications-details.sel {
  background-color: var(--col-com-active);
  border-left-color: var(--col-com-bar);
  color: var(--col-com-text);
}

.menuGontent a cite{
  display:inline-block; 
  font-size:10px; 
  background:#626262; 
  padding:2px 6px;
  color:#FFFFFF;
  font-style:normal;
  font-family: OpenSansBold,Arial,sans-serif;   
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px; 
  position: absolute;
  right: 0px;
  top: 11px;
}
.menuGontent a i {
    display: inline-block;
    margin-left: 3px;
    margin-right: 5px;
    text-align: center;
    vertical-align: middle;
    width: 20px;
}
.menuGontent a.srub{
  padding: 5px 0px 5px 47px;
  font-weight:normal;
  font-size: 10px;
}
.menuGontent a:hover.srub,
.menuGontent a.sel.srub{ color: #626262; }
/************
 * PAIEMENT *
 */
#payment-form{
  width: 60%;
  margin: 0 auto; 
}
/**
 * The CSS shown here will not be introduced in the Quickstart guide, but shows
 * how you can use CSS to style your Element's container.
 */
.StripeElement {
  background-color: white;
  height: 40px;
  padding: 10px 12px;
  border-radius: 4px;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px 0 #e6ebf1;
  -webkit-transition: box-shadow 150ms ease;
  transition: box-shadow 150ms ease;
}
.StripeElement--focus {
  box-shadow: 0 1px 3px 0 #cfd7df;
}
.StripeElement--invalid {
  border-color: #fa755a;
}
.StripeElement--webkit-autofill {
  background-color: #fefde5 !important;
}
.form-row {
    width: 70%;
    float: left;
}
#card-errors {
    height: 20px;
    padding: 4px 0;
    color: #fa755a;
}
#payment-form label {
    font-weight: 500;
    font-size: 14px;
    display: block;
    margin-bottom: 8px;
  color: #6b7c93;
}
#payment-form button,
.buttonStripe {
    border: none;
    border-radius: 4px;
    outline: none;
    text-decoration: none;
    color: #fff;
    background: #32325d;
    white-space: nowrap;
    display: inline-block;
    height: 40px;
    line-height: 40px;
    padding: 0 14px;
    box-shadow: 0 4px 6px rgba(50, 50, 93, .11), 0 1px 3px rgba(0, 0, 0, .08);
    border-radius: 4px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.025em;
    text-decoration: none;
    -webkit-transition: all 150ms ease;
    transition: all 150ms ease;
    float: left;
    margin-left: 12px;
    margin-top: 28px;
}
.overflowTab{
  width: 100%;
  overflow-x: auto;
}
.overflowTabHeight{
  width: 100%;
  height: 500px;
  overflow: auto;
}
.outcome {
  width: 100%;
  padding: 15px 0;
  text-align: center;
}

.success,
.error {
  display: none;
  font-size: 2em;
  font-weight: 600;
}

.success.visible,
.error.visible {
  display: inline-block;
  font-size: 2em;
  padding: 7vh 0;
  font-weight: 600;
}

.error {
  color: #E4584C;
}

.success {
  color: #666EE8;
}

.success .token {
  font-weight: 500;
  font-size: 13px;
}

/*************
*** BOTTOM ***
**************/

.contentBot {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  padding: 30px 0 0 0;
  color: #1d1e3a;
  display: block;
  font-family: OpenSansRegular,Arial,sans-serif;  
  font-size: 12px;
  font-weight: normal; 
  text-align: center;
}

.contenerCxn  .contentBot {
  border-top: none;
  padding: 70px 0 0 0;
}

.contentBot a{ font-family: OpenSansBold,Arial,sans-serif;  }
.contentBot a:hover{ color:#fecc0d;}

/********************
**** BACK TO TOP ****
********************/

#returnOnTop {
    background:#626262 url('/scm/imgs/picto/picto-arrowtotop.png') center center no-repeat;
    bottom:1%;
    cursor: pointer;
    display: none;
    filter: alpha(opacity = 50); /* IE < 8 */
    height: 38px;
    width: 38px;
  z-index:3;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px; 
    opacity: 1;
    position: fixed;
    right: 1%;
   -webkit-transition: all 0.2s ease-out;
    -moz-transition: all 0.2s ease-out;
    -o-transition: all 0.2s ease-out; 
}
#returnOnTop:hover {
    filter: alpha(opacity = 100); /* IE < 8 */
    background:#dddddd url('/scm/imgs/picto/picto-backtotop.png') center center no-repeat;  
   -webkit-transition: all 0.2s ease-in;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;  
}


/*************
*** BOUTON ***
**************/


.btnStd,
input.btnStd,
button.btnStd{
  display: table;
  margin: 0 auto;
  padding: 10px 25px;
  font-weight: normal;
  font-size: 12px;
  text-align: center;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;   
    font-family: OpenSansBold,Arial,sans-serif; 
  cursor:pointer;
  text-transform:uppercase;
  background:#626262;
  color: #fff;  
  border:none;
}
/* Animation pulse — effet de zoom au survol des boutons.
   Définie ici car dropzone.css (qui la définissait historiquement) est désormais
   chargé conditionnellement depuis le Lot perf 2026-05-14. */
@keyframes pulse {
	0%   { transform: scale(1); }
	10%  { transform: scale(1.1); }
	20%  { transform: scale(1); }
}
.btnStd:hover,
input.btnStd:hover{
  animation-delay: 0s;
    animation-duration: 0.5s;
    animation-name: pulse;

}
.btnStd.dark{ background: #1d1e3a; }
.btnStd.grey{ background: #666666; }
.btnStd.green{ background: #00BB00; }
.btnStd.red{ background: #FF0000; }
.w33{ width: 33.33333333333333333%; }
.w50{ width: 50%; }
.w80{ width: 80%; }
.mar0auto{ margin: 0 auto; }
.btnStd.min{ 
  font-size: 11px;
  text-transform: none;
  padding: 5px 15px;
  display: block;
}

/**************
*** GENERAL ***
**************/

.contentFormStd h2,
.contentTabStd h2{
    display: block;
    font-family: OpenSansBold,Arial,sans-serif;
    font-size: 16px;
    font-weight: normal;
    text-align: left;
  text-transform:uppercase;
  margin:0;
  padding: 15px 0 5px 0;
}
.contentFormStd h2.stripe{ 
  background: url('/scm/imgs/logo-stripe.jpg') 0 center no-repeat; 
  padding: 0 0 0 180px; 
  line-height: 63px; 
  vertical-align: middle;
}
.contentFormStd h2.pad{ padding: 15px 0 0 0; }

.contentTabStd{
  padding: 0 0 30px 0;
}


/***********
*** FORM ***
***********/

.formStd {
  width:100%; 
}

.formStd fieldset{
  border:none;
  padding: 15px 0;
  margin: 0;
}
label.labelStd{
  display:block;
  width:20%;
    margin: 0;
  font-size: 14px;
  line-height:38px;
  color: #1d1e3a;
  font-family: OpenSansRegular, Arial,sans-serif;   
}
label.labelSpe{
  display:block;
    margin: 0;
  font-size: 14px;
  line-height:38px;
  color: #1d1e3a;
  font-family: OpenSansRegular, Arial,sans-serif;   
}
input.inputStd{
  border: 1px solid rgba(0, 0, 0, 0.15);
  height: 35px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius: 2px;   
  width:79%;
  text-indent: 10px;
    margin: 0;
    display: block;
    cursor:pointer;
  font-size: 12px;
  color: #373b3e;
  font-family: 'OpenSansRegular', Arial,sans-serif;   
}
#tabCours input.inputStd{ width: 230px; }
input.inputStd:focus{border: 1px solid #626262;}
input.inputStd.min{ width: 30%; }
input.inputStd.mac{ width: 15%; }
input.inputStd.mar{ margin-right: 5px; }
.padB{ padding: 0 0 15px 0; }

.flatpickr-wrapper input.inputStd.min{ width: 100%; }
.flatpickr-wrapper{ float: left; width: 30%; }
.bigw .flatpickr-wrapper{ width: 100%; }
textarea.inputStd{
  height: 134px;  
    background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.15);
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius:2px;  
  width:79%;
  text-indent: 10px;
  padding: 10px 0; 
    margin: 0;
    display: block;
    cursor:pointer;
  font-size: 12px;
  color: #373b3e;
  font-family: 'OpenSansRegular', Arial,sans-serif; 
}
textarea.inputStd:focus{border: 1px solid #626262;}

span.calendar{
  width: 40px;
  float: left;
  background: #ECEEEF;
  height: 40px;
  display: block;
  line-height: 40px;
  text-align: center;
}

/*Select styles*/

.select-style {
    padding: 0;
    overflow: hidden;
    background: url('/scm/imgs/picto/chevron-up.png') no-repeat right center;
  border: 1px solid rgba(0, 0, 0, 0.15);
  height: 35px;
  -moz-border-radius: 2px;
  -webkit-border-radius: 2px;
  border-radius:2px;  
  width:85%;
  text-indent: 10px;
    margin: 0;
    display: block;
    cursor:pointer;
  font-size: 12px;
  color: #373b3e;
  font-family: OpenSansRegular, Arial,sans-serif;
}
.select-style.min{ width: 30%; }
.select-style.mac{ width: 15%; }
.select-style.mar{ margin: 0 5px 0 0; }
.select-style select:focus {border: 1px solid #626262;}
.select-style select {
    width: 100%;
    border: none;
    box-shadow: none;
    background-color: transparent;
    background-image: none;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
  color: #1d1e3a;
  display: block;
  font-family: OpenSansRegular,Arial,sans-serif;
  font-size: 14px;
  padding:5px 0;
  margin: 0;
  text-indent:5px;  
}
.select-style select:focus {
    outline: none;
}
select.selectStd option,
select.asmSelect option{
  color: #1d1e3a;
  display: block;
  font-family: OpenSansRegular,Arial,sans-serif;
  font-size: 14px;
  line-height: 38px;
  padding:2px 0;
  margin: 0;
  text-indent:5px;  
}


/*Checkboxes styles*/
input[type="checkbox"]:not(.grade-diplome-toggle):not(.grade-diplome-form):not(.scm-comm-cb):not(.scm-mb-grade-disc-cb):not(.scm-discipline-fede-chk) { display: none; }
input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding: 0 0 0 35px;
  margin: 15px 0; 
  color: #aaa;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  font-size: 14px;
  line-height:20px;
  color: #1d1e3a;
  font-family: OpenSansRegular, Arial,sans-serif;     
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 18px;
  height: 18px;
  border: 1px solid #626262;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}


/*Radio styles*/
[type="radio"]:checked,
[type="radio"]:not(:checked) {
    position: absolute;
    left: -9999px;
}
[type="radio"]:checked + label,
[type="radio"]:not(:checked) + label
{
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  line-height: 20px;
  display: inline-block;
  color: #1d1e3a;
  font-family: OpenSansRegular, Arial,sans-serif;   
  margin: 8px 0;  
  font-size: 14px;  
}
[type="radio"]:checked + label:before,
[type="radio"]:not(:checked) + label:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 18px;
    height: 18px;
    border: 1px solid #626262;
    border-radius: 100%;
    background: #fff;
}
[type="radio"]:checked + label:after,
[type="radio"]:not(:checked) + label:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #626262;
    position: absolute;
    top: 4px;
    left: 4px;
    border-radius: 100%;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
[type="radio"]:not(:checked) + label:after {
    opacity: 0;
    -webkit-transform: scale(0);
    transform: scale(0);
}
[type="radio"]:checked + label:after {
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
}


/* Editable */
html .editable-container.editable-inline{ width: 100%; }
html .editable-input{ width: 45%; }
.editable-input input,
.editable-input select{
  height: 24px; 
  width: 80%;
}

html #addMembreTab .editable-input,
html #addMembreTab .editable-select{ width: 100%; }
html #addMembreTab th i { cursor: pointer; } 

/* Radio tri */
.control {
  font-size: 18px;
  position: relative;
  display: block;
  margin-bottom: 30px;
  padding-left: 30px;
  cursor: pointer;
}

.control input {
  position: absolute;
  z-index: -1;
  opacity: 0;
}

.control__indicator {
  position: absolute;
  top: 2px;
  left: 0;
  width: 20px;
  height: 20px;
  background: #e6e6e6;
}

.control--radio .control__indicator {
  border-radius: 50%;
}

/* Hover and focus states */
.control:hover input ~ .control__indicator,
.control input:focus ~ .control__indicator {
  background: #ccc;
}

/* Checked state */
.control input:checked ~ .control__indicator {
  background: #626262;
}

/* Hover state whilst checked */
.control:hover input:not([disabled]):checked ~ .control__indicator,
.control input:checked:focus ~ .control__indicator {
  background: #626262;
}

/* Disabled state */
.control input:disabled ~ .control__indicator {
  pointer-events: none;
  opacity: .6;
  background: #e6e6e6;
}

/* Check mark */
.control__indicator:after {
  position: absolute;
  display: none;
  content: '';
}

/* Show check mark */
.control input:checked ~ .control__indicator:after {
  display: block;
}

/* Checkbox tick */
.control--checkbox .control__indicator:after {
  top: 4px;
  left: 8px;
  width: 3px;
  height: 8px;
  transform: rotate(45deg);
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

/* Disabled tick colour */
.control--checkbox input:disabled ~ .control__indicator:after {
  border-color: #7b7b7b;
}

/* Radio button inner circle */
.control--radio .control__indicator:after {
  top: 7px;
  left: 7px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* Disabled circle colour */
.control--radio input:disabled ~ .control__indicator:after {
  background: #7b7b7b;
}

/************
*** TABLE ***
************/

.tableStd{
  width: 100%;
  text-align: left;
  border-collapse: collapse;
}
.tableStd.padBot{margin: 0 0 70px 0; }
.tableStd tr th{  
  background: #626262;
  padding: 10px 15px;
  color:#FFF;
    font-family: OpenSansBold,Arial,sans-serif;
    font-size: 14px;
  text-transform:uppercase;
    font-weight: normal;
    text-align: left;
  white-space: nowrap;
}
.tableStd.scrollable-columns-table tr th{
  padding: 10px 10px 10px 0;
  font-size: 14px;
}
.tableStd tr td{  
  padding: 10px 5px;
  font-size: 12px;
  background-color: rgba(0, 0, 0, 0.05);  
    font-family: OpenSansRegular,Arial,sans-serif;
    font-weight: normal;
    text-align: left    
}
.tableStd tr th.first,
.tableStd tr td.first{ white-space: nowrap; }
.tableStd tr:hover td,
.tableStd tr.odd:hover td{ background:rgba(103, 168, 228, 0.3);}
.tableStd tr.odd td { background: #FFF; }
.tableStd tr.add td { background: #4ac18e; color: #FFF; }
.tableStd tr td.mess{ 
  text-align: center; 
  font-size: 14px; 
  padding: 20px 0;
  font-family: OpenSansBold,Arial,sans-serif
}
/* Highlight nouvelle ligne : jaune pâle pour garder un contraste lisible
   avec les liens éditables bleus standards. */
.tableStd tr.new td{ background: #fffbe6; border-top: solid 1px #f0c419; color: #2c3e50; }
.tableStd tr td.prog{ text-decoration: line-through; }
.tableStd.listeCours tr td div{ text-align: center; }
.item-color{
  width: 25px;
  height: 25px;
  border-radius: 25px;
}
.item-color.min{
  width: 15px;
  height: 15px;
  border-radius: 15px 
}
input.item-color{
  border: none;
  cursor: pointer;  
}
.btnBloc{
  margin: 0 auto;
    width: 80%; 
}

.saisonEc{
  padding: 25px 50px;
  background: #626262;
  color: #FFF;
  font-size: 18px;
  font-family: OpenSansBold,Arial,sans-serif;
  margin: 0 0 30px 0;
  text-align: center;
}

code{
    background-color: #f7f7f9;
    border-radius: 0.25rem;
    color: #bd4147;
    font-size: 13px;
    padding: 0.2rem 0.4rem;
  font-family: Inconsolata,Arial,sans-serif;
}
code.key{
  display:block;
  margin:10px auto;
  padding:30px;
  text-align:left;
    -ms-word-break: break-all;
    word-break: break-all;
  /* Non standard for webkit */
     word-break: break-word;
    -webkit-hyphens: auto;
       -moz-hyphens: auto;
        -ms-hyphens: auto;
            hyphens: auto;  
}
a.inputVal{ margin: 0 0 0 5px; }
.drag{
  width: 100%;
  height: 100%;
  z-index: 99999;
}
.drag:hover{ background: #1D1E3A; color: #FFF; text-align: center; cursor: move; }
.onDrag{ width: 150px; height: 30px; }
.drop{width: 100%; height: 100%; background: #F9F9F9;}
.survole{ border: solid 1px #626262; }
.swal2-modal .swal2-input.swal2Input,
.swal2-modal .swal2-input.swal2Date{width: 60%; margin: 7px auto 0; text-align: center;}
.swal2-modal .swal2-select.swal2Select{
  width: 60%;
  margin: 7px auto 0;
  height: 43px;
  font-size: 15px;
}
.totP{display: block; padding: 0 0 5px 0; font-size: 12px;}
.dd-selected label, .dd-option label{font-size: 12px; font-family: OpenSansRegular,Arial,sans-serif;}
.langues.flor {padding: 6px 50px;}
/*********************
 * LES MEMBRES
 */

.boxDiplome{
  width: 100%;
  overflow: auto;
  height: 1100px;
}

/* ============================================================
   COMPOSANTS PARTAGÉS — Onglets (scm-gd-tab)
   Utilisés dans : Grades & Diplômes, Paramètres
   ============================================================ */
.scm-gd-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid #e0e0e0;
  margin-bottom: 0;
}
.scm-gd-tab-btn {
  padding: 8px 24px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-bottom: none;
  border-radius: 4px 4px 0 0;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #777;
  transition: background .15s, color .15s;
  position: relative;
  bottom: -2px;
}
.scm-gd-tab-btn:hover { background: #eee; color: #444; }
.scm-gd-tab-btn.active {
  background: #fff;
  border-color: #e0e0e0;
  border-bottom-color: #fff;
  color: #2c3e50;
}
.scm-gd-tab-btn.scm-gd-tab-danger { margin-left: auto; }
.scm-gd-tab-btn.scm-gd-tab-danger:hover,
.scm-gd-tab-btn.scm-gd-tab-danger.active {
  color: #e74c3c;
  border-bottom-color: #e74c3c;
}
.scm-gd-tab-content {
  padding: 20px 0;
  display: none;
}
.scm-gd-tab-content.active {
  display: block;
}

/* Lot Cosmétique Paramètres (2026-05-17) — Utilitaires onglet Général */
.scm-pg-tabs-end { margin-left: auto; }
label.scm-pg-form-label--35,
.scm-pg-form-label--35 {
	width: 42%;
	min-width: 380px;
}

/* Lot Cosmétique Paramètres (2026-05-17) — Rows fieldset à plat (option 1
 * "épuré") : on retire le double encart bordure/fond hérité du <fieldset>
 * navigateur, et on sépare juste les lignes par un fin trait gris. */
.scm-pg-section fieldset {
	border: none;
	padding: 12px 0;
	margin: 0;
	background: transparent;
}
.scm-pg-section fieldset + fieldset {
	border-top: 1px solid #ececec;
}
.scm-pg-inline-spacer { margin-left: 8px; }

/* Alignement à droite des boutons d'action sur les rows fieldset URL :
 * largeur min commune pour que "Copier" et "Enregistrer" soient à la même abscisse. */
.scm-pg-section fieldset .btnStd,
.scm-pg-section fieldset .scm-pg-copy-btn {
	min-width: 110px;
	text-align: center;
}

/* ============================================================
   CUSTOMISATION DES ZONES DE DIPLÔME
   ============================================================ */
.scm-zone-custom-section { margin-top: 30px; border: 1px solid #e0e0e0; border-radius: 6px; overflow: hidden; }
.scm-zone-custom-title { font-size: 14px; font-weight: 700; color: #555; padding: 14px 18px; margin: 0; background: #f7f7f7; border-bottom: 1px solid #e0e0e0; }
.scm-zone-custom-item { border-bottom: 1px solid #f0f0f0; }
.scm-zone-custom-item:last-child { border-bottom: none; }
.scm-zone-custom-disabled { opacity: 0.5; }
.scm-zone-custom-header { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; transition: background .15s; }
.scm-zone-custom-header:hover { background: #fafafa; }
.scm-zone-custom-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.scm-zone-custom-nom { flex: 1; font-weight: 600; font-size: 13px; color: #444; }
.scm-zone-custom-badge { font-size: 10px; color: #aaa; border: 1px solid #ddd; border-radius: 3px; padding: 1px 6px; }
.scm-zone-custom-arrow { color: #bbb; font-size: 11px; transition: transform .2s; }
.scm-zone-custom-arrow.open { transform: rotate(180deg); }
.scm-zone-custom-body { padding: 16px 18px; background: #fefefe; border-top: 1px solid #f0f0f0; }
.scm-zone-custom-hint { color: #888; font-size: 13px; margin: 0; }
.scm-zone-custom-footer { margin-top: 14px; text-align: right; }
.scm-zone-builder-row { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.scm-zone-segment { flex: 1; }
.scm-seg-label { display: block; font-size: 11px; font-weight: 700; color: #888; text-transform: uppercase; letter-spacing: .5px; margin-bottom: 4px; }
.scm-seg-text { width: 100%; min-height: 50px; padding: 6px 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 12px; resize: vertical; box-sizing: border-box; }
.scm-seg-text:focus { border-color: #3498db; outline: none; }
.scm-zone-token-wrap { flex-shrink: 0; text-align: center; }
.scm-zone-token-chip { display: inline-flex; align-items: center; justify-content: center; padding: 6px 12px; border: 2px solid #3498db; border-radius: 4px; font-size: 11px; font-weight: 700; color: #444; background: #fff; white-space: nowrap; min-width: 80px; }
.scm-style-row { display: flex; align-items: center; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.scm-style-font { flex: 1; min-width: 120px; padding: 3px 6px; border: 1px solid #ddd; border-radius: 3px; font-size: 11px; }
.scm-style-size { width: 52px; padding: 3px 5px; border: 1px solid #ddd; border-radius: 3px; font-size: 11px; text-align: center; }
.scm-style-btn { width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 3px; background: #fff; cursor: pointer; font-size: 12px; color: #555; padding: 0; transition: background .1s; }
.scm-style-btn:hover { border-color: #aaa; background: #f5f5f5; }
.scm-style-btn.active { background: #2c3e50; color: #fff; border-color: #2c3e50; }
.scm-zone-align { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 12px; color: #888; }
.scm-align-btn { width: 28px; height: 28px; border: 1px solid #ddd; border-radius: 3px; background: #fff; cursor: pointer; color: #555; padding: 0; transition: background .1s; }
.scm-align-btn:hover { background: #f5f5f5; }
.scm-align-btn.active { background: #2c3e50; color: #fff; border-color: #2c3e50; }
.scm-zone-image-grid { display: flex; flex-direction: column; gap: 8px; }
.scm-zone-image-middle { display: flex; gap: 12px; align-items: center; }
.scm-zone-image-middle > div { flex: 1; }

/* N° de diplôme builder */
.scm-num-tokens { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.scm-num-token { padding: 4px 10px; border: 1px solid #3498db; border-radius: 4px; background: #eaf4fd; color: #2980b9; cursor: pointer; font-size: 12px; font-weight: 600; transition: background .15s; }
.scm-num-token:hover { background: #3498db; color: #fff; }
.scm-num-token small { font-weight: 400; font-size: 10px; display: block; color: inherit; opacity: .8; }
.scm-num-builder { margin-bottom: 12px; }
.scm-num-format-row { display: flex; gap: 6px; align-items: center; }
.scm-num-format-row .scm-seg-text { min-height: auto; padding: 5px 8px; font-family: monospace; }
.scm-num-clear { width: 26px; height: 26px; border: 1px solid #ddd; border-radius: 3px; background: #fff; cursor: pointer; color: #e74c3c; font-size: 13px; flex-shrink: 0; }
.scm-num-preview { font-size: 12px; color: #888; margin: 6px 0 0; }
.scm-num-options { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; }
.scm-num-option { display: flex; flex-direction: column; gap: 4px; }

/* ---- EDITOR INTERACT.JS ---- */
#diplome-container { position: relative; display: block; width: 100%; user-select: none; overflow: hidden; }
.diplome-zone { position: absolute; background: rgba(231,76,60,0.3); border: 2px solid #e74c3c; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: move; min-width: 50px; min-height: 30px; z-index: 10; touch-action: none; }
.zone-label { color: #fff; font-weight: 700; font-size: 11px; text-shadow: 1px 1px 3px rgba(0,0,0,0.9); text-align: center; pointer-events: none; padding: 2px 20px 2px 4px; }
.zone-del-btn { position: absolute; top: 2px; right: 2px; background: #c0392b; color: #fff; border: none; border-radius: 3px; width: 18px; height: 18px; font-size: 11px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.zone-del-btn:hover { background: #922b21; }

/* ---- LE CLUB ET DISCIPLINES (1.4.0 lot 3 — 26/09/2026) ----
 * Deux onglets (.scm-gd-tabs) : « Le club » (coordonnées + logo) et
 * « Disciplines » (une carte par discipline → fiche discipline, rubrique 41). */
.scm-club-tabs { margin-top:6px; }
.scm-club-tab-count { display:inline-block; min-width:18px; margin-left:6px; padding:1px 6px; border-radius:9px; background:#e8ecf2; color:#556; font-size:11px; font-weight:700; text-align:center; }
.scm-gd-tab-btn.active .scm-club-tab-count { background:#2c3e50; color:#fff; }
.scm-club-info { display:grid; grid-template-columns:minmax(0, 1fr) 220px; gap:32px; align-items:start; }
.scm-club-optional { color:#aaa; font-weight:normal; }
/* 1.5.0 — langue des documents et des e-mails : libellé sur deux lignes, explication sous la liste */
label.labelStd.scm-club-langue-label { line-height:19px; padding-top:0; }
.scm-club-langue-hint { margin:6px 0 0 20%; font-size:12px; line-height:1.5; color:#888; }
@media (max-width: 900px) {
	.scm-club-langue-hint { margin-left:0; }
}
.scm-club-logo-drop { width:220px; box-sizing:border-box; border:2px dashed #ccc; border-radius:8px; background:#fafafa; cursor:pointer; position:relative; overflow:hidden; }
.scm-club-logo-drop--filled { min-height:140px; }
.scm-club-logo-drop--empty { min-height:160px; display:flex; align-items:center; justify-content:center; }
.scm-club-logo-img { display:block; width:100%; max-height:180px; object-fit:contain; padding:8px; box-sizing:border-box; }
.scm-club-logo-replace { text-align:center; font-size:10px; color:#bbb; padding:4px 0 8px; }
.scm-club-logo-msg { text-align:center; color:#aaa; margin:0; padding:20px 10px; }
.scm-club-logo-msg-icon { display:block; font-size:28px; margin-bottom:8px; color:#ccc; }
.scm-club-logo-msg-title { font-size:12px; font-weight:600; }
.scm-club-logo-msg-formats { display:block; font-size:10px; margin-top:4px; color:#bbb; }
.scm-club-intro { font-size:13px; color:#888; margin:0 0 20px; }
@media (max-width: 900px) {
	.scm-club-info { grid-template-columns:1fr; }
}

/* Cartes des disciplines */
.scm-disc-cards { display:grid; grid-template-columns:repeat(auto-fill, minmax(250px, 1fr)); gap:16px; }
.scm-disc-card { display:flex; flex-direction:column; gap:8px; padding:16px 18px; background:#fff; border:1px solid #e3e6ea; border-radius:8px; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.scm-disc-card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.scm-disc-card-name { font-size:16px; font-weight:700; color:#2c3e50; line-height:1.3; word-break:break-word; }
.scm-disc-card-del { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; width:26px; height:26px; padding:0; border:1px solid #ddd; border-radius:3px; background:#fff; color:#e74c3c; font-size:13px; line-height:1; cursor:pointer; }
.scm-disc-card-del:hover { background:#e74c3c; color:#fff; }
.scm-disc-card-fede,
.scm-disc-card-stats,
.scm-disc-card-pp { font-size:12.5px; color:#555; }
.scm-disc-card-fede i,
.scm-disc-card-pp i { width:16px; color:#8a94a6; }
.scm-disc-card-fede--none { color:#999; }
.scm-disc-card-stats { color:#888; }
.scm-disc-card-pp--custom { color:#1f7a4a; }
.scm-disc-card-pp--custom i { color:#1f7a4a; }
.scm-disc-card-open { align-self:flex-start; margin-top:6px; float:none; }
.scm-disc-card--add { align-items:center; justify-content:center; min-height:150px; border:2px dashed #cfd5dd; background:#fafbfc; box-shadow:none; color:#7a8699; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; }
.scm-disc-card--add i { font-size:20px; }
.scm-disc-card--add:hover { border-color:#2c3e50; color:#2c3e50; background:#f3f5f8; }

/* Fiche d'une discipline (rubrique 41) */
.scm-disc-fiche-head { margin:4px 0 14px; }
.scm-disc-fiche-back { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; color:#7a8699; text-decoration:none; }
.scm-disc-fiche-back:hover { color:#2c3e50; }
.scm-disc-fiche-title { margin:8px 0 0; }
.scm-disc-hint { clear:both; margin:6px 0 0 20%; font-size:12px; color:#999; }  /* 20 % = largeur de label.labelStd : aligné sous le champ */
.scm-disc-fede { display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.scm-disc-fede .scm-discipline-fede-input { width:320px; max-width:100%; margin:0; float:none; }
/* Fiche discipline — onglet Passeport : éditeur du modèle (1.4.0 lot 3b)
 * Réglages à gauche (sections <details>), aperçu en double page à droite
 * (iframe : le document d'aperçu porte ses propres styles, cf. scmPasseportPreviewHead). */
.scm-pp-warn { margin:0 0 14px; padding:10px 14px; border-left:3px solid #e67e22; background:#fdf2e6; color:#8a4b0f; font-size:13px; }
.scm-pp-intro { margin:0 0 16px; font-size:13px; color:#777; }
.scm-pp-editor { display:grid; grid-template-columns:minmax(300px, 400px) minmax(0, 1fr); gap:24px; align-items:start; }
.scm-pp-settings { display:flex; flex-direction:column; gap:10px; }
.scm-pp-sec { border:1px solid #e3e6ea; border-radius:8px; background:#fff; padding:0 14px; }
.scm-pp-sec > summary { cursor:pointer; padding:11px 0; font-size:13.5px; font-weight:700; color:#2c3e50; list-style-position:inside; }
.scm-pp-sec[open] > summary { border-bottom:1px solid #eef0f3; margin-bottom:12px; }
.scm-pp-sec[open] { padding-bottom:14px; }
.scm-pp-themes { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
.scm-pp-theme { display:flex; align-items:center; gap:8px; padding:7px 9px; border:2px solid #e3e6ea; border-radius:6px; background:#fff; cursor:pointer; font-family:inherit; font-size:12.5px; color:#444; text-align:left; }
.scm-pp-theme:hover { border-color:#b8c2cf; }
.scm-pp-theme--on { border-color:#2c3e50; color:#2c3e50; font-weight:700; }
.scm-pp-theme-swatch { flex-shrink:0; width:30px; height:22px; border-radius:3px; border:1px solid rgba(0,0,0,.12);
	background:linear-gradient(90deg, var(--pp-a, #1f2a44) 0 50%, var(--pp-b, #c9a227) 50% 65%, var(--pp-c, #fbf8f1) 65% 100%); }
.scm-pp-hint { margin:6px 0 0; font-size:11.5px; color:#999; line-height:1.4; }
.scm-pp-link { display:inline-flex; align-items:center; gap:5px; margin-top:8px; padding:0; border:0; background:none; color:#2980b9; font-size:12px; font-family:inherit; cursor:pointer; }
.scm-pp-link:hover { text-decoration:underline; }
.scm-pp-colors { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 12px; margin-bottom:12px; }
.scm-pp-color { display:flex; align-items:center; gap:8px; font-size:12px; color:#555; cursor:pointer; line-height:1.25; }
.scm-pp-color input[type="color"] { flex-shrink:0; width:34px; height:26px; padding:0 2px; border:1px solid #d5dae1; border-radius:4px; background:#fff; cursor:pointer; }
.scm-pp-label { margin:0 0 5px; font-size:11px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.4px; }
.scm-pp-field { margin-bottom:12px; }
.scm-pp-label--sub { margin-top:4px; padding-top:12px; border-top:1px solid #eef0f3; color:#2c3e50; }
/* Textes mis en forme du passeport (27/09) : éditeur Trix, alignement et taille par paragraphe (balises pp-*) */
.scm-pp-trix trix-toolbar { background:#fafafa; border:1px solid #ddd; border-bottom:none; border-radius:4px 4px 0 0; }
.scm-pp-trix trix-toolbar .trix-button-row { flex-wrap:wrap; }
.scm-pp-trix trix-toolbar .trix-button-group { margin-bottom:0; }
.scm-pp-trix trix-toolbar [data-trix-attribute="strike"],
.scm-pp-trix trix-toolbar [data-trix-attribute="href"],
.scm-pp-trix trix-toolbar [data-trix-attribute="heading1"],
.scm-pp-trix trix-toolbar [data-trix-attribute="quote"],
.scm-pp-trix trix-toolbar [data-trix-attribute="code"],
.scm-pp-trix trix-toolbar [data-trix-action="decreaseNestingLevel"],
.scm-pp-trix trix-toolbar [data-trix-action="increaseNestingLevel"],
.scm-pp-trix trix-toolbar .trix-button-group--file-tools { display:none; }
.scm-pp-trix .scm-pp-trix-extra { display:inline-flex; align-items:center; }
.scm-pp-trix .trix-button.scm-pp-trix-btn { width:2.2em; font-size:12px; color:#444; }
.scm-pp-trix .scm-pp-trix-size { height:1.9em; margin:0 4px; font-size:11px; border:1px solid #bbb; border-radius:3px; background:#fff; }
.scm-pp-trix-editor { display:block; min-height:80px; max-height:320px; overflow-y:auto; padding:8px 10px; border:1px solid #ddd; border-radius:0 0 4px 4px; background:#fff; font-size:13px; line-height:1.45; outline:none; }
.scm-pp-trix-editor pp-center,
.scm-pp-trix-editor pp-right,
.scm-pp-trix-editor pp-xs,
.scm-pp-trix-editor pp-s,
.scm-pp-trix-editor pp-l,
.scm-pp-trix-editor pp-xl { display:block; }
.scm-pp-trix-editor pp-center { text-align:center; }
.scm-pp-trix-editor pp-right { text-align:right; }
.scm-pp-trix-editor pp-xs { font-size:.75em; }
.scm-pp-trix-editor pp-s { font-size:.87em; }
.scm-pp-trix-editor pp-l { font-size:1.25em; }
.scm-pp-trix-editor pp-xl { font-size:1.6em; }
.scm-pp-row { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.scm-pp-select { width:100%; margin:0; float:none; box-sizing:border-box; }
.scm-pp-input,
.scm-pp-textarea { width:100%; margin:0; float:none; box-sizing:border-box; }
.scm-pp-textarea { min-height:70px; resize:vertical; font-family:inherit; line-height:1.4; }
.scm-pp-range { width:100%; margin:2px 0 0; }
.scm-pp-range-val { margin-left:6px; font-weight:700; color:#2c3e50; text-transform:none; letter-spacing:0; }
.scm-pp-image { margin-bottom:12px; }
.scm-pp-image-thumb { width:90px; margin-bottom:8px; padding:4px; border:1px solid #e3e6ea; border-radius:4px; background:repeating-conic-gradient(#f1f3f5 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.scm-pp-image-img { display:block; max-width:100%; max-height:125px; margin:0 auto; }
.scm-pp-image-actions { display:flex; align-items:center; gap:12px; }
.scm-pp-image-add { float:none; margin:0; cursor:pointer; }
.scm-pp-image-actions .scm-pp-link { margin-top:0; color:#e74c3c; }
.scm-pp-actions { position:sticky; bottom:0; display:flex; align-items:center; justify-content:flex-end; gap:12px; padding:10px 0; background:linear-gradient(rgba(255,255,255,0), #fff 30%); }
.scm-pp-actions .btnStd { float:none; margin:0; }
.scm-pp-status { font-size:12px; color:#e67e22; }
.scm-pp-preview { position:sticky; top:12px; display:flex; flex-direction:column; gap:10px; }
.scm-pp-preview-bar { display:flex; align-items:center; justify-content:center; gap:12px; }
.scm-pp-nav { width:32px; height:32px; border:1px solid #d5dae1; border-radius:50%; background:#fff; color:#2c3e50; cursor:pointer; }
.scm-pp-nav:disabled { opacity:.35; cursor:default; }
.scm-pp-nav-label { min-width:170px; text-align:center; font-size:12.5px; font-weight:600; color:#555; }
.scm-pp-frame-wrap { position:relative; border-radius:8px; background:#e9ecf1; }
.scm-pp-frame-wrap--busy { opacity:.65; }
.scm-pp-frame { display:block; width:100%; aspect-ratio:188 / 133; border:0; }
.scm-pp-frame-msg { padding:60px 20px; text-align:center; font-size:13px; color:#c0392b; }
.scm-pp-preview-tools { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.scm-pp-preview-tools .scm-pp-field { flex:1 1 180px; margin:0; }
.scm-pp-preview-tools .btnStd { float:none; margin:0; }
@media (max-width: 1100px) {
	.scm-pp-editor { grid-template-columns:1fr; }
	.scm-pp-preview { position:static; order:-1; }
}
/* v1.2.0 — fédération par discipline */
.scm-discipline-fede-toggle { display:inline-flex; align-items:center; gap:5px; font-size:12px; color:#555; white-space:nowrap; flex-shrink:0; cursor:pointer; }
.scm-discipline-fede-toggle input { margin:0; }
/* Fiche membre — grade + n° de licence de la saison, côte à côte (26/09/2026) :
 * intitulés sur la même ligne, contrôles à la même hauteur. */
#membre-grades-form { flex:1 1 auto; min-width:0; }  /* prend la largeur de la ligne (fieldset flex) : grade + licence côte à côte */
.scm-md-grade-cols { display:flex; flex-wrap:wrap; align-items:flex-end; gap:6px 14px; margin:0 0 8px; }
.scm-md-grade-col { display:flex; flex-direction:column; }
.scm-md-grade-col--grade { flex:1 1 240px; min-width:240px; max-width:300px; }  /* 240 = min-width du menu (#membre-grades-form .select-style) */
.scm-md-grade-col--licence { flex:1 1 170px; min-width:150px; max-width:230px; }
.scm-md-mini-label { display:flex; align-items:center; gap:4px; min-height:16px; margin:0 0 4px; font-size:11px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.4px; }
.scm-md-grade-cols .select-style { width:100%; height:37px; box-sizing:border-box; margin:0; float:none; }
.scm-md-grade-cols .scm-md-licence-input { width:100%; height:37px; box-sizing:border-box; margin:0; float:none; }

/* ---- TEMPLATES DE DIPLOMES ---- */
.scm-tpl-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:24px; padding-bottom:16px; border-bottom:1px solid #e8e8e8; }
.scm-tpl-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:20px; }
.scm-tpl-card { border:1px solid #e0e0e0; border-radius:8px; overflow:hidden; background:#fff; transition:box-shadow .2s; }
.scm-tpl-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.1); }
.scm-tpl-card-preview { position:relative; aspect-ratio:4/3; background:#f5f5f5; overflow:hidden; }
.scm-tpl-card-preview.portrait { aspect-ratio:3/4; }
.scm-tpl-card-preview img { width:100%; height:100%; object-fit:cover; }
.scm-tpl-card-nopreview { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#ccc; font-size:40px; }
.scm-tpl-card-badge { position:absolute; top:8px; right:8px; background:rgba(0,0,0,.5); color:#fff; font-size:10px; font-weight:700; padding:2px 7px; border-radius:3px; }
.scm-tpl-card-body { padding:10px 12px 6px; }
.scm-tpl-card-body strong { display:block; font-size:13px; color:#333; margin-bottom:3px; }
.scm-tpl-card-disc { font-size:11px; color:#3498db; font-weight:600; }
.scm-tpl-card-actions { display:flex; align-items:center; gap:6px; padding:8px 12px 12px; }
.scm-tpl-card-actions .btnStd { flex:1; text-align:center; font-size:11px; padding:5px 8px; }
.btn-xs { padding:4px 10px; font-size:11px; border:1px solid #ddd; border-radius:3px; background:#f8f8f8; cursor:pointer; color:#555; transition:all .15s; white-space:nowrap; }
.btn-xs:hover { background:#eee; color:#333; border-color:#bbb; }
.scm-tpl-del { /* alias de button.del */ }
a.del, button.del { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; color:#e74c3c; font-size:13px; text-decoration:none; transition:all .15s; line-height:1; padding:0; }
a.del:hover, button.del:hover { background:#e74c3c; color:#fff; border-color:#e74c3c; }
/* Force l'icône FA à être strictement centrée (sans descender de baseline).
   On reste en inline-block pour que la flexbox du parent centre l'icône
   horizontalement et verticalement. line-height:1 supprime l'espace parasite
   au-dessus/en-dessous du glyphe. */
a.del > i, button.del > i { line-height:1; display:inline-block; vertical-align:middle; }
.editable-empty { color:#e74c3c !important; }

/* ---- FILTRES TECHNIQUES ---- */
.scm-filter-bar { background:#f5f5f5; border:1px solid #e0e0e0; border-radius:6px; padding:10px 14px; margin-bottom:16px; }
.scm-filter-row { display:flex; align-items:center; gap:8px; }
.scm-filter-row + .scm-filter-row { border-top:1px solid #e0e0e0; padding-top:8px; margin-top:8px; }
.scm-filter-label { color:#888; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.5px; white-space:nowrap; min-width:80px; flex-shrink:0; }
.scm-filter-tag { color:#999; font-size:12px; background:#e8e8e8; padding:3px 10px; border-radius:3px; }
.scm-filter-btns { display:flex; flex-wrap:wrap; gap:6px; }
/* Séparateur logique : force le retour à la ligne entre groupes (ex: par discipline) */
.scm-filter-btns .scm-filter-break { flex-basis:100%; height:0; margin:0; padding:0; }
.scm-filter-btns .tech-filter-btn { display:inline-flex; align-items:center; cursor:pointer; font-size:11px; padding:6px 10px; float:none; flex-shrink:0; }

/* ---- PLANNING — filtre par mois (libérateur + grille 6×2 responsive) ---- */
.scm-plan-monthbar { margin-bottom:16px; }
.scm-plan-monthbar-head { margin-bottom:10px; }
.scm-plan-month-grid { display:grid; grid-template-columns:repeat(6, 1fr); gap:7px; }
/* Chips légers : fond clair + contour, texte foncé au repos.
   Spécificité 0,2,0 (sélecteur descendant) + déclaré après .btnStd.grey → l'emporte. */
.scm-plan-month-grid .scm-plan-month-btn,
.scm-plan-monthbar-head .scm-plan-month-reset {
  float:none; text-align:center; font-size:11px; font-weight:600;
  padding:7px 10px; margin:0;
  background:#fff; color:#3a4250;
  border:1px solid #d4dce8; border-radius:6px; box-shadow:none;
  transition: background .12s, border-color .12s, color .12s;
}
.scm-plan-month-grid .scm-plan-month-btn:hover,
.scm-plan-monthbar-head .scm-plan-month-reset:hover {
  background:#eef3fc; border-color:#9bb8ee; color:#1f2d44;
}
/* Mois actif : bleu plein (accent rubrique Planning, version opaque).
   Spécificité 0,3,0 + déclaré après le hover → l'emporte aussi au survol. */
.scm-plan-month-grid .scm-plan-month-btn.scm-plan-month-btn--active,
.scm-plan-monthbar-head .scm-plan-month-reset.scm-plan-month-btn--active {
  background:#2f6fe0; border-color:#2f6fe0; color:#fff; font-weight:700;
  box-shadow:0 1px 3px rgba(47,111,224,0.35);
}
@media (max-width:1200px) { .scm-plan-month-grid { grid-template-columns:repeat(4, 1fr); } }
@media (max-width:768px)  { .scm-plan-month-grid { grid-template-columns:repeat(3, 1fr); } }
@media (max-width:480px)  { .scm-plan-month-grid { grid-template-columns:repeat(2, 1fr); } }

/* ---- FILTRES LISTE MEMBRES (Chantier 4) ----
 * Boutons de la barre .scm-filter-bar de la liste membres.
 * Layout identique à .tech-filter-btn. État sélectionné = data-sel="true",
 * matérialisé par un anneau navy via box-shadow + ic\u00f4ne ✓ devant le libellé. */
.scm-filter-btns .scm-mb-filter-btn { display:inline-flex; align-items:center; cursor:pointer; font-size:11px; padding:6px 10px; float:none; flex-shrink:0; transition: box-shadow .15s; }
.scm-filter-btns .scm-mb-filter-btn[data-sel="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #1d1e3a; }
.scm-filter-btns .scm-mb-filter-btn[data-sel="true"]::before { content: "\2713"; font-weight: 700; margin-right: 4px; font-size: 12px; line-height: 1; }

/* ---- TRI TABLEAUX ---- */
.scm-sortable { user-select:none; cursor:pointer; }
.scm-sortable:hover { opacity:.85; }
.scm-sort-active { opacity:1; }
.scm-sort-arrow { margin-left:4px; font-size:10px; opacity:.7; }
.scm-sort-hint { color:#aaa; font-size:12px; margin:0 0 8px; }
.scm-sort-hint i { margin-right:4px; }

/* ---- NIVEAUX COURS ---- */
.cours-niveaux { display:flex; flex-wrap:wrap; gap:4px; align-items:center; justify-content:center; }
.cours-niveau-disc { display:block; width:100%; font-size:10px; color:#aaa; text-transform:uppercase; letter-spacing:.4px; margin-top:4px; }
.cours-niveau-tag { display:inline-flex; align-items:center; gap:5px; background-color:#999; border-radius:5px; padding:3px 6px; font-size:12px; font-weight:bold; color:#fff; }
.cours-niveau-dot { display:inline-block; width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.cours-niveau-tag .cours-del-niveau { color:#fff; text-decoration:none; font-size:14px; line-height:1; cursor:pointer; }
.cours-niveau-tag .cours-del-niveau:hover { color:#e74c3c; }
.cours-add-niveau { display:inline-flex; align-items:center; justify-content:center; width:22px; height:22px; border:1px dashed #bbb; border-radius:3px; color:#aaa; text-decoration:none; font-size:11px; cursor:pointer; }
.cours-add-niveau:hover { border-color:#555; color:#555; }

/* Formulaire ajout cours — discipline et niveau côte à côte */
.cours-form-row { display:flex; gap:0; align-items:flex-start; }
.cours-form-row > div:first-child { width:411px; flex-shrink:0; }
.cours-form-row > div:last-child { flex:1; }

/* Centrage colonnes tableau cours */
.listeCours td:nth-child(2),
.listeCours td:nth-child(3),
.listeCours td:nth-child(4),
.listeCours td:nth-child(5) { text-align:center; }


/* ---- INSTRUCTEURS ---- */
.prof-avatar { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; color:#fff; font-size:13px; font-weight:600; letter-spacing:.5px; flex-shrink:0; }
.prof-discs { display:flex; flex-wrap:wrap; gap:4px; align-items:center; }
.prof-disc-badge { display:inline-flex; align-items:center; gap:5px; background-color: var(--disc-bg, #666); border-radius:5px; padding:3px 6px; font-size:12px; font-weight:bold; color:#fff; }
.prof-disc-badge .prof-del-disc { color:#fff; text-decoration:none; font-size:14px; line-height:1; cursor:pointer; }
.prof-disc-badge .prof-del-disc:hover { color:#e74c3c; }
.prof-add-disc { display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border:1px dashed #bbb; border-radius:3px; color:#aaa; text-decoration:none; font-size:10px; cursor:pointer; }
.prof-add-disc:hover { border-color:#555; color:#555; }
.prof-grade-row { display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.prof-grade-disc { font-size:10px; color:#aaa; text-transform:uppercase; letter-spacing:.4px; min-width:70px; }
.prof-grade-val { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:#555; }
.prof-edit-grade { text-decoration:none; cursor:pointer; border-bottom:1px dashed #ccc; }
.prof-edit-grade:hover .prof-grade-val { color:#3498db; }
.prof-grades { display:flex; flex-direction:column; }
.prof-grade-form-group { margin-bottom:8px; }

/* ---- ACTIONS GROUPÉES ---- */
.scm-bulk-bar { display:flex; align-items:center; gap:12px; background:#f0f4ff; border:1px solid #c8d8f8; border-radius:6px; padding:10px 14px; margin-top:12px; flex-wrap:wrap; }
.scm-bulk-count { font-size:13px; font-weight:600; color:#3a5fc8; white-space:nowrap; }
.scm-bulk-actions { display:flex; gap:8px; flex-wrap:wrap; }
.scm-bulk-actions .btnStd { font-size:12px; padding:5px 10px; cursor:pointer; }
.scm-bulk-actions .btnStd.dark { background:#555; color:#fff; border-color:#555; }
.scm-bulk-actions .btnStd.dark:hover { background:#333; border-color:#333; }
.scm-tpl-empty { text-align:center; padding:60px 20px; color:#aaa; font-size:13px; line-height:1.8; }

.scm-mode-section { background:#f9f9f9; border:1px solid #e8e8e8; border-radius:8px; padding:24px; margin-bottom:32px; }

/* Layout profil membre */
.scm-profil-layout { display:flex; gap:32px; align-items:flex-start; }
.scm-profil-photo { flex-shrink:0; width:160px; display:flex; flex-direction:column; align-items:center; gap:10px; }
.scm-profil-photo img { width:110px; height:141px; object-fit:cover; border-radius:8px; border:2px solid #e0e0e0; }
.scm-profil-photo-placeholder { width:110px; height:141px; border-radius:8px; border:2px dashed #ccc; background:#f5f5f5; display:flex; align-items:center; justify-content:center; flex-direction:column; color:#bbb; font-size:12px; gap:6px; }
.scm-profil-photo-placeholder i { font-size:28px; }
.scm-profil-fields { flex:1; min-width:0; }
.scm-profil-fields .formStd { width:100%; }
.scm-profil-fields fieldset { display:flex; align-items:center; gap:0; padding:10px 0; }
.scm-profil-fields label.labelStd { white-space:nowrap; width:auto; min-width:180px; flex-shrink:0; line-height:35px; font-size:13px; float:none; display:block; margin-right:12px; }
/* Mon compte — champ non « éditable par les membres » : lecture seule (09/09/2026) */
.formStd fieldset.scm-mc-readonly .inputStd,
.formStd fieldset.scm-mc-readonly .selectStd,
.formStd fieldset.scm-mc-readonly textarea.inputStd { background:#f0f0f0; color:#888; cursor:not-allowed; }
.formStd fieldset.scm-mc-readonly .custom-control-input:disabled ~ .custom-control-label { color:#888; cursor:not-allowed; }
.scm-mc-lock { margin-left:8px; color:#aaa; font-size:12px; }
.scm-profil-fields input.inputStd { width:auto; max-width:400px; flex:1; float:none; }
.scm-profil-fields input.inputStd.min { width:180px; max-width:180px; flex:none; }
.scm-profil-fields .select-style.min { flex:none; min-width:180px; }
.scm-profil-fields textarea.inputStd { width:auto; max-width:400px; flex:1; float:none; }
.scm-profil-fields .flatpickr-wrapper { width:180px; flex:none; float:none; }
.scm-profil-fields .fin { display:none; }

/* ===== MODAL PHOTO MEMBRE ===== */
.scm-photo-overlay { position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:9999; display:flex; align-items:center; justify-content:center; }
.scm-photo-box { background:#fff; border-radius:12px; width:520px; max-width:95vw; box-shadow:0 8px 40px rgba(0,0,0,.3); overflow:hidden; }
.scm-photo-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eee; }
.scm-photo-header h3 { margin:0; font-size:16px; font-weight:600; }
.scm-photo-close { background:none; border:none; font-size:20px; cursor:pointer; color:#aaa; line-height:1; padding:0; }
.scm-photo-close:hover { color:#333; }
.scm-photo-tabs { display:flex; border-bottom:1px solid #eee; }
.scm-photo-tab-btn { flex:1; padding:12px; border:none; background:none; font-size:13px; cursor:pointer; color:#888; border-bottom:2px solid transparent; transition:.15s; }
.scm-photo-tab-btn.active { color:#2c3e50; border-bottom-color:#2c3e50; font-weight:600; }
.scm-photo-body { padding:20px; min-height:200px; }
.scm-photo-drop { border:2px dashed #ddd; border-radius:8px; padding:40px 20px; text-align:center; cursor:pointer; transition:.15s; background:#fafafa; }
.scm-photo-drop:hover, .scm-photo-drop.drag-over { border-color:#3498db; background:#f0f8ff; }
.scm-photo-drop i { font-size:36px; color:#ccc; display:block; margin-bottom:10px; }
.scm-photo-drop p { margin:0; color:#aaa; font-size:13px; }
.scm-photo-drop input[type=file] { display:none; }
.scm-photo-video-wrap { text-align:center; }
.scm-photo-video-wrap video { width:100%; max-height:280px; border-radius:6px; background:#000; display:block; }
.scm-photo-capture-btn { margin-top:12px; }
.scm-photo-cropper-wrap { max-height:320px; overflow:hidden; }
.scm-photo-cropper-wrap img { max-width:100%; display:block; }
.scm-photo-footer { display:flex; justify-content:flex-end; gap:10px; padding:14px 20px; border-top:1px solid #eee; }
.scm-mp-edit-label-btn:hover i, .scm-mp-edit-btn:hover i { opacity:.7; transform:scale(1.5); }
.scm-mp-edit-label-btn i, .scm-mp-edit-btn i, .scm-mp-del-btn i { transition:opacity .15s, transform .15s; }
.scm-mp-del-btn:hover i { opacity:.7; transform:scale(1.2); }
.scm-photo-edit-btn { position:absolute; bottom:4px; right:4px; background:rgba(0,0,0,.55); color:#fff; border:none; border-radius:50%; width:28px; height:28px; cursor:pointer; font-size:13px; display:flex; align-items:center; justify-content:center; transition:.15s; }
.scm-profil-photo { position:relative; }
.scm-mode-header { display:flex; align-items:flex-start; gap:16px; margin-bottom:24px; padding-bottom:20px; border-bottom:1px solid #e8e8e8; }
.scm-mode-icon { width:44px; height:44px; background:#2c3e50; border-radius:8px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:20px; flex-shrink:0; }
.scm-mode-step { margin-bottom:24px; padding-bottom:24px; border-bottom:1px solid #efefef; }
.scm-mode-step:last-child { margin-bottom:0; padding-bottom:0; border-bottom:none; }
.scm-mode-step-title { font-size:14px; font-weight:700; color:#333; margin-bottom:16px; display:flex; align-items:center; gap:10px; }
.scm-step-num { width:26px; height:26px; background:#2c3e50; color:#fff; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; flex-shrink:0; }

/* Grille de trames */
.scm-trame-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.scm-trame-card { cursor:pointer; border-radius:6px; overflow:hidden; border:2px solid transparent; transition:border-color .15s, box-shadow .15s; }
.scm-trame-card:hover { border-color:#bbb; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.scm-trame-card.selected { border-color:#2c3e50; box-shadow:0 0 0 3px rgba(44,62,80,.15); }
.scm-trame-preview { position:relative; aspect-ratio:4/3; background:#eee; overflow:hidden; }
.scm-trame-preview.portrait { aspect-ratio:3/4; }
.scm-trame-preview img { width:100%; height:100%; object-fit:cover; display:block; }
.scm-trame-check { position:absolute; inset:0; background:rgba(44,62,80,.5); display:flex; align-items:center; justify-content:center; color:#fff; font-size:28px; opacity:0; transition:opacity .15s; }
.scm-trame-card.selected .scm-trame-check { opacity:1; }
.scm-trame-nom { text-align:center; font-size:11px; font-weight:600; color:#555; padding:6px 4px; background:#fff; }

/* Uploads optionnels */
.scm-mode-uploads { display:flex; gap:16px; flex-wrap:wrap; }
.scm-upload-zone { flex:1; min-width:200px; max-width:280px; }
.scm-upload-preview { position:relative; border-radius:8px; overflow:hidden; border:1px solid #ddd; }
.scm-upload-preview img { width:100%; height:120px; object-fit:contain; background:#fafafa; display:block; }
.scm-upload-clear { position:absolute; top:6px; right:6px; width:24px; height:24px; border-radius:50%; background:rgba(0,0,0,.5); color:#fff; border:none; cursor:pointer; font-size:11px; display:flex; align-items:center; justify-content:center; }
.scm-upload-clear:hover { background:rgba(231,76,60,.8); }

/* Options étape 3 */
.scm-mode-options { display:flex; gap:20px; flex-wrap:wrap; align-items:flex-end; }
.scm-mode-option-row { display:flex; flex-direction:column; gap:6px; }
.scm-tpl-saved-section { margin-top:8px; }

/* ---- ORIENTATION ---- */
.scm-orientation-switch { display:flex; gap:6px; }
.scm-orientation-btn { padding:6px 14px; border:1px solid #ddd; border-radius:4px; background:#fff; cursor:pointer; font-size:12px; color:#666; transition:all .15s; }
.scm-orientation-btn:hover { border-color:#999; color:#333; }
.scm-orientation-btn.active { background:#2c3e50; color:#fff; border-color:#2c3e50; }

/* ---- SÉLECTEUR MODE DIPLÔMES ---- */
.scm-diplome-mode-switch { display:flex; gap:8px; margin-bottom:24px; border-bottom:2px solid #e8e8e8; padding-bottom:0; }
.scm-diplome-mode-btn { padding:10px 20px; border:none; border-bottom:3px solid transparent; background:none; cursor:pointer; font-size:13px; font-weight:600; color:#888; margin-bottom:-2px; transition:color .15s, border-color .15s; }
.scm-diplome-mode-btn:hover { color:#444; }
.scm-diplome-mode-btn.active { color:#2c3e50; border-bottom-color:#2c3e50; }

/* =====================================================================
   TARIFS — layout général
   ===================================================================== */

/* Section 1 : liste + ajout côte à côte */
.scm-tarif-top-row {
  display: flex;
  gap: 48px;
  align-items: flex-start;
  flex-wrap: wrap;
}
.scm-tarif-top-row > div { flex: 1; min-width: 220px; }
/* Reset fieldset natif dans la section ajout */
.scm-tarif-top-row fieldset {
  border: 2px solid #eee;
  padding: 25px 20px;
  border-radius: 10px;
  margin: 0;
}

/* Section 2 : blocs */
.scm-tarif-disc-group {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 2px solid #e8e8e8;
}
.scm-tarif-disc-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.scm-tarif-disc-group-label {
  display: inline-block;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 14px;
  border-radius: 5px;
  margin-bottom: 12px;
  letter-spacing: .3px;
}
.scm-tarif-blocs {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.scm-tarif-bloc-outer {
  display: flex;
  flex-direction: column;
  width: 220px;
}

.scm-tarif-bloc-name {
  font-size: 13px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 6px;
  padding-left: 2px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 220px;
}
.scm-tarif-bloc-num {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
}

/* Badge discipline — réutilise .prof-disc-badge avec background inline */
/* Centrage dans la colonne tarifs */
#tabAdhesion td .prof-discs { justify-content: center; }

.scm-tarif-bloc {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  flex: 1;
}

.scm-tarif-bloc-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 10px;
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .3px;
}

.scm-tarif-mois-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 10px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 12px;
}
.scm-tarif-mois-row:last-child { border-bottom: none; }
.scm-tarif-mois-row.odd { background: #fafafa; }

.scm-mois-name {
  color: #666;
  flex: 1;
  font-size: 11px;
}
.scm-mois-amount {
  font-weight: 600;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline dotted;
  flex-shrink: 0;
}
.scm-mois-amount:hover { color: #2c3e50; }

/* Footer du bloc */
.scm-tarif-bloc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 4px 0;
}
.scm-tarif-action-label {
  font-size: 10px;
  color: #aaa;
  font-style: italic;
}

.scm-tarif-fill-btn {
  background: none;
  border: 1px solid #e0e0e0;
  color: #aaa;
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 12px;
  transition: all .15s;
}
.scm-tarif-fill-btn:hover {
  border-color: #e67e22;
  color: #e67e22;
  background: #fff8f3;
}

/* Toggle switch générique (utilisé pages Mode de paiement + Paramètres membres) */
.scm-pay-toggle {
	position: relative;
	display: inline-block;
	width: 42px;
	height: 24px;
	cursor: pointer;
}
.scm-pay-toggle input {
	opacity: 0;
	width: 0;
	height: 0;
}
.scm-pay-toggle-slider {
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	background: #ccc;
	border-radius: 24px;
	transition: background .25s;
}
.scm-pay-toggle-slider:before {
	content: '';
	position: absolute;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	top: 3px;
	left: 3px;
	transition: transform .25s;
}
.scm-pay-toggle input:checked + .scm-pay-toggle-slider {
	background: #27ae60;
}
.scm-pay-toggle input:checked + .scm-pay-toggle-slider:before {
	transform: translateX(18px);
}
/* État désactivé (ex. réseau social sans URL renseignée) */
.scm-pay-toggle input:disabled + .scm-pay-toggle-slider {
	opacity: .4;
	cursor: not-allowed;
}
.scm-pay-toggle:has(input:disabled) { cursor: not-allowed; }

.scm-pay-badge {
	font-size: 11px;
	padding: 2px 10px;
	border-radius: 99px;
	font-weight: 600;
	letter-spacing: .3px;
}
.scm-pay-badge.on  { background: #DEF7EC; color: #03543F; }
.scm-pay-badge.off { background: #f0f0f0; color: #999; }

/* Ligne "Paiement mensuel" — style cohérent avec les rows mois */
/* 1.3 — Ligne « Paiement en plusieurs fois » : même gabarit que la ligne
   « Paiement mensuel » en dessous, code couleur VIOLET (le mensuel est vert)
   pour différencier les deux systèmes au premier coup d'œil. */
.scm-tarif-nfois-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-top: 2px dashed #e1e5ea;
  margin-top: 2px;
  font-size: 12px;
  background: #fafcff;
}
.scm-nfois-name {
  color: #666;
  flex: 1;
  font-size: 11px;
  font-weight: 600;
}
.scm-nfois-name i { color: #3498db; }
.scm-tarif-nfois-btn {
  font-weight: 600;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline dotted;
  flex-shrink: 0;
  font-size: 12px;
}
.scm-tarif-nfois-btn:hover { color: #2c3e50; }
.scm-tarif-nfois-row.configured {
  background: #f7f4fe;
  border-top-color: #7c3aed;
}
.scm-tarif-nfois-row.configured .scm-nfois-name i { color: #7c3aed; }
.scm-tarif-nfois-row.configured .scm-tarif-nfois-btn { color: #7c3aed; }
.scm-tarif-nfois-row.configured .scm-tarif-nfois-btn:hover { color: #6d28d9; }

.scm-tarif-mensualite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border-top: 2px dashed #e1e5ea;
  margin-top: 2px;
  font-size: 12px;
  background: #fafcff;
}
.scm-mensualite-name {
  color: #666;
  flex: 1;
  font-size: 11px;
  font-weight: 600;
}
.scm-mensualite-name i { color: #3498db; }

.scm-mensualite-btn {
  font-weight: 600;
  color: #3498db;
  cursor: pointer;
  text-decoration: underline dotted;
  flex-shrink: 0;
  font-size: 12px;
}
.scm-mensualite-btn:hover { color: #2c3e50; }

.scm-tarif-mensualite-row.configured {
  background: #f0fdf4;
  border-top-color: #27ae60;
}
.scm-tarif-mensualite-row.configured .scm-mensualite-name i { color: #27ae60; }
.scm-tarif-mensualite-row.configured .scm-mensualite-btn { color: #27ae60; }
.scm-tarif-mensualite-row.configured .scm-mensualite-btn:hover { color: #16a34a; }

/* Editable montants : input custom en place */
.scm-amount-input {
width: 55px;
text-align: right;
font-size: 12px;
font-weight: 600;
color: #3498db;
border: 1px solid #3498db;
border-radius: 3px;
padding: 1px 3px;
background: #fff;
outline: none;
box-sizing: border-box;
}
.scm-mois-devise {
  font-size: 10px;
  color: #aaa;
  margin-left: 2px;
  flex-shrink: 0;
}
/* Masquer les flèches sur les inputs number (Swal fill) */
.swal2-input[type=number]::-webkit-outer-spin-button,
.swal2-input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* =====================================================================
   ===================================================================== */

/* Bouton de confirmation → bleu SCM */
.swal2-confirm {
  background-color: #3498db !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
  letter-spacing: .3px;
}
.swal2-confirm:focus {
  box-shadow: 0 0 0 3px rgba(52,152,219,.35) !important;
}
.swal2-confirm:hover {
  background-color: #2980b9 !important;
}

/* Bouton annuler → gris neutre */
.swal2-cancel {
  background-color: #b2bec3 !important;
  border: none !important;
  box-shadow: none !important;
  font-weight: 600 !important;
}
.swal2-cancel:hover {
  background-color: #95a5a6 !important;
}

/* Input dans les popups → focus bleu SCM */
.swal2-input:focus,
.swal2-select:focus,
.swal2-textarea:focus {
  border-color: #3498db !important;
  box-shadow: 0 0 0 3px rgba(52,152,219,.2) !important;
}

/* Label au-dessus de l'input */
.swal2-input-label {
  color: #555 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  margin-bottom: 6px !important;
}

/* Titre de la popup */
.swal2-title {
  color: #2c3e50 !important;
  font-size: 18px !important;
  font-weight: 700 !important;
}

/* Arrondis cohérents */
.swal2-popup {
  border-radius: 8px !important;
}
.swal2-confirm, .swal2-cancel, .swal2-deny {
  border-radius: 4px !important;
}

/* =====================================================================
   TOAST — style SCM
   ===================================================================== */

.swal2-popup.swal2-toast {
  border-radius: 6px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,.14) !important;
  padding: 10px 18px 10px 14px !important;
  border-left: 4px solid transparent !important;
  min-width: 220px !important;
  max-width: 340px !important;
}

/* Titre du toast */
.swal2-popup.swal2-toast .swal2-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #2c3e50 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Icône compacte */
.swal2-popup.swal2-toast .swal2-icon {
  width: 26px !important;
  height: 26px !important;
  min-width: 26px !important;
  margin: 0 10px 0 0 !important;
  border-width: 2px !important;
}
.swal2-popup.swal2-toast .swal2-icon .swal2-icon-content {
  font-size: 15px !important;
}

/* Barre de progression */
.swal2-popup.swal2-toast .swal2-timer-progress-bar {
  height: 3px !important;
  border-radius: 0 0 6px 6px !important;
}

/* SUCCESS → vert */
.swal2-popup.swal2-toast.swal2-icon-success {
  background: #f0faf4 !important;
  border-left-color: #27ae60 !important;
}
.swal2-popup.swal2-toast.swal2-icon-success .swal2-timer-progress-bar {
  background: #27ae60 !important;
}

/* ERROR → rouge */
.swal2-popup.swal2-toast.swal2-icon-error {
  background: #fef6f5 !important;
  border-left-color: #e74c3c !important;
}
.swal2-popup.swal2-toast.swal2-icon-error .swal2-timer-progress-bar {
  background: #e74c3c !important;
}

/* WARNING → orange SCM */
.swal2-popup.swal2-toast.swal2-icon-warning {
  background: #fef9f0 !important;
  border-left-color: #e67e22 !important;
}
.swal2-popup.swal2-toast.swal2-icon-warning .swal2-timer-progress-bar {
  background: #e67e22 !important;
}

/* INFO → bleu SCM */
.swal2-popup.swal2-toast.swal2-icon-info {
  background: #f0f7fd !important;
  border-left-color: #3498db !important;
}
.swal2-popup.swal2-toast.swal2-icon-info .swal2-timer-progress-bar {
  background: #3498db !important;
}
/* =====================================================================
   COMPTABILITÉ PARAMS — panneaux moyens de paiement
   ===================================================================== */

.scm-pm-panels {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.scm-pm-panel {
  flex: 1;
  min-width: 260px;
  background: var(--color-bg, #fff);
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 16px;
}
.scm-pm-panel-title {
  font-size: 14px;
  font-weight: 600;
  color: #2c3e50;
  margin-bottom: 4px;
}
.scm-pm-list {
  list-style: none;
  padding: 0;
  margin: 0 0 12px;
}

/* Header de colonnes style "Les Membres" */
.scm-pm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  border-bottom: 2px solid #e0e0e0;
  background: #f5f5f5;
  border-radius: 4px 4px 0 0;
  margin-bottom: 2px;
}
.scm-pm-head-drag    { min-width: 24px; flex-shrink: 0; padding: 0 6px 0 2px; }
.scm-pm-head-toggle  { width: 32px; flex-shrink: 0; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .4px; text-align: center; }
.scm-pm-head-name    { flex: 1; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: .4px; padding-left: 4px; }
.scm-pm-head-actions { width: 20px; flex-shrink: 0; }

.scm-pm-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 4px;
  border-bottom: 1px solid #f0f0f0;
  cursor: default;
  transition: background .15s;
}
.scm-pm-item:hover { background: #fafafa; }
.scm-pm-item:last-child { border-bottom: none; }
.scm-pm-drag {
  color: #ccc;
  cursor: grab;
  font-size: 14px;
  flex-shrink: 0;
  padding: 0 6px 0 2px;
  min-width: 24px;
  text-align: center;
}
.scm-pm-drag:active { cursor: grabbing; }
.scm-pm-item.scm-dragging {
  opacity: 0.4;
}
.scm-pm-item.scm-drag-over {
  border-top: 2px solid #27ae60;
}

/* Placeholder affiché pendant le drag (jQuery UI Sortable) */
.scm-pm-placeholder {
  list-style: none;
  background: #eafaf1;
  border: 2px dashed #27ae60;
  border-radius: 4px;
  height: 36px;
  margin: 2px 0;
  visibility: visible !important;
}
.scm-pm-toggle {
  width: 32px;
  height: 18px;
  border-radius: 9px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  padding: 2px;
  cursor: pointer;
  transition: background .2s;
}
.scm-pm-toggle.on  { background: #27ae60; justify-content: flex-end; }
.scm-pm-toggle.off { background: #ddd;    justify-content: flex-start; }
.scm-pm-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
}
.scm-pm-name {
  flex: 1;
  font-size: 13px;
  color: #2c3e50;
  transition: color .15s;
}
.pm-disabled .scm-pm-name {
  color: #bbb;
  text-decoration: line-through;
}
.scm-pm-lock {
  font-size: 11px;
  color: #ddd;
  flex-shrink: 0;
}
.scm-pm-del {
  font-size: 12px;
  color: #ddd;
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s;
}
.scm-pm-del:hover { color: #e74c3c; }
.scm-pm-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-top: 10px;
  border-top: 1px solid #f0f0f0;
}

/* jqueryui-editable : masquer les boutons ok/cancel (régression jQuery UI 1.14) */
.editable-buttons { display: none !important; }

/* =====================================================================
 * PHASE 2 — Inscription / Paiement / Membres-details / Membres
 * Classes utilisées par les pages publiques + admin autour du paiement.
 * ===================================================================== */

/* ---- Onglet Paramètres › Paiement (include/paiement.config.inc.php) ---- */
#modeToggle {
	display: inline-flex;
	border-radius: 6px;
	border: 1px solid #ddd;
	overflow: hidden;
	cursor: pointer;
}
#modeToggle .mode-btn {
	background: transparent;
	color: #999;
	user-select: none;
	padding: 7px 18px;
	font-size: 13px;
	font-weight: 600;
	transition: all .2s;
}
#modeToggle .mode-btn.active[data-mode="test"] { background: #FEF3C7; color: #92400E; }
#modeToggle .mode-btn.active[data-mode="live"] { background: #DEF7EC; color: #03543F; }

/* Ligne mode test/production */
.scm-pay-mode-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 24px;
	flex-wrap: wrap;
	gap: 12px;
}
.scm-pay-mode-label {
	font-size: 12px;
	color: #888;
	margin: 0 0 6px;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600;
}

/* Bandeaux mode (avertissement test / confirmation live) */
.scm-pay-mode-banner {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 6px;
	font-size: 12px;
	font-weight: 500;
}
.scm-pay-mode-banner--warn { background: #FEF3C7; color: #92400E; }
.scm-pay-mode-banner--mb   { margin-bottom: 12px; } /* alerte webhook (24/09/2026) */
.scm-pay-mode-banner--live { background: #DEF7EC; color: #03543F; }

/* Section provider (Stripe / PayPal) */
.scm-pay-section {
	background: #f9f9f9;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 16px;
}
.scm-pay-section-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.scm-pay-provider-head {
	display: flex;
	align-items: center;
	gap: 10px;
}
.scm-pay-logo--stripe {
	font-size: 22px;
	font-weight: 700;
	color: #635BFF;
	letter-spacing: -.5px;
	font-style: italic;
}
.scm-pay-logo--paypal {
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -.3px;
}
.scm-pay-pp-a { color: #003087; }
.scm-pay-pp-b { color: #009CDE; }

/* Zone champs d'un provider — atténuée + inerte quand le provider est off */
.scm-pay-fields--off {
	opacity: .4;
	pointer-events: none;
}

/* Ligne bouton « Tester » + résultat du test */
.scm-pay-test-row { margin-bottom: 10px; }
/* .btnStd.xxx : surclasse button.btnStd (padding 10px 25px) sans !important */
.btnStd.scm-pay-test-btn { padding: 6px 14px; font-size: 12px; }
.scm-pay-test-result {
	margin-left: 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 28px;
}
.scm-pay-test-result--testing { color: #666; }
.scm-pay-test-result--ok  { color: #1e8449; }
.scm-pay-test-result--err { color: #c0392b; }
/* Contrôles du webhook Stripe sous le résultat du test (liste créée par scm.parametres.js) */
.scm-pay-test-checks { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; font-weight: 600; line-height: 1.6; }
.scm-pay-test-check { overflow-wrap: anywhere; }
.scm-pay-test-check--ok   { color: #1e8449; }
.scm-pay-test-check--warn { color: #b9770e; }
.scm-pay-test-check--err  { color: #c0392b; }
.scm-pay-test-check--info { color: #666; font-weight: 400; }
/* Champ identifiant pour Safari (écran Paiement) : présent pour le navigateur, invisible à l'écran */
input.scm-pay-username { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; border: 0; overflow: hidden; clip: rect(0 0 0 0); opacity: 0; }

/* Grilles de clés API (test vs live) */
.scm-pay-keys {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}
.scm-pay-keys--mb { margin-bottom: 14px; }
.scm-pay-field-label {
	font-size: 12px;
	color: #888;
	display: block;
	margin-bottom: 4px;
}
/* input.xxx : surclasse input.inputStd (width 79%, font OpenSans) sans !important */
input.scm-pay-key-input {
	width: 100%;
	font-family: monospace;
	font-size: 13px;
}

/* Moyens de paiement Stripe */
.scm-pay-methods {
	border-top: 1px solid #e0e0e0;
	padding-top: 14px;
}
.scm-pay-methods-label {
	font-size: 12px;
	color: #888;
	margin: 0 0 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
	font-weight: 600;
}
.scm-pay-methods-row {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
}
.scm-pay-method-card {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	cursor: default;
	color: #aaa;
}
.scm-pay-method-checkbox { width: 15px; height: 15px; }
.scm-pay-method-included { font-size: 11px; color: #bbb; }
.scm-pay-method-control {
	display: inline-flex;
	align-items: center;
}
/* + .xxx : surclasse la règle générique « input[type=checkbox] + label »
   (font-size 14px) qui s'applique aux labels Apple Pay / Google Pay */
input[type="checkbox"] + .scm-pay-method-control-label {
	font-size: 13px;
	cursor: pointer;
}

/* ---- Blocs info génériques (bandeaux messages) ---- */
.scm-info-box { border-radius: 6px; padding: 10px 16px; margin-bottom: 16px; font-size: 13px; }
.scm-info-box--preview { background: #fff3cd; border: 1px solid #ffc107; color: #856404; font-size: 12px; }
.scm-info-box--error   { background: #fdecea; border: 1px solid #e74c3c; color: #c0392b; }
.scm-info-box--warn    { background: #fff3cd; border: 1px solid #ffc107; color: #856404; }

/* ---- Messages full-page succès / annulé / vide ---- */
.scm-page-state { text-align: center; padding: 40px 20px; }
.scm-page-state--empty { color: #aaa; }
.scm-page-state .scm-page-state-icon { font-size: 48px; display: block; margin-bottom: 16px; }
.scm-page-state--success .scm-page-state-icon { color: #27ae60; }
.scm-page-state--cancel  .scm-page-state-icon { color: #e67e22; }
.scm-page-state--success h2 { color: #27ae60; margin: 0 0 8px; }
.scm-page-state--cancel  h2 { color: #e67e22; margin: 0 0 8px; }
.scm-page-state p { color: #666; max-width: 520px; margin: 0 auto 20px; }

/* ---- Step Paiement (scm.inscription.tpl) ---- */
.scm-paiement-recap {
	background: #f6f8fa; border: 1px solid #e1e5ea; border-radius: 8px;
	padding: 18px 20px; margin-bottom: 24px;
}
.scm-paiement-recap-header { font-size: 13px; color: #666; margin-bottom: 6px; }
.scm-paiement-recap-body { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.scm-paiement-recap-body strong { font-size: 15px; }
.scm-paiement-recap-body .email { font-size: 13px; color: #666; }
.scm-paiement-recap-body .adhesion { font-size: 13px; color: #666; margin-top: 4px; }
.scm-paiement-recap-montant { font-size: 24px; font-weight: 600; color: #2c3e50; }

/* 1.3 — Choix du mode de paiement : des CARTES cliquables, pas du texte plat.
   Le radio reste visible (état lisible même sans :has) ; :has(input:checked)
   accentue la carte sélectionnée sur les navigateurs modernes. */
.scm-paiement-mode-choice {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 18px;
}
.scm-paiement-mode-choice label {
	flex: 1 1 200px;
	display: block;
	padding: 12px 14px;
	border: 2px solid #d8d8d8;
	border-radius: 8px;
	background: #fff;
	cursor: pointer;
	font-weight: 600;
	font-size: 14px;
	transition: border-color .15s, background .15s, box-shadow .15s;
}
.scm-paiement-mode-choice label:hover { border-color: #9bb8ee; }
.scm-paiement-mode-choice label:has(input:checked) {
	border-color: #2f6fe0;
	background: #eef4ff;
	box-shadow: inset 0 0 0 1px #2f6fe0;
}
.scm-paiement-mode-choice input { margin-right: 8px; }
.scm-nfois-selector { margin: -6px 0 18px; display: flex; flex-direction: column; gap: 6px; max-width: 420px; }
.scm-nfois-selector label { font-weight: 600; }
.scm-nfois-selector select { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 14px; }

.scm-paiement-btns { display: flex; flex-direction: column; gap: 12px; max-width: 420px; }

.scm-pay-provider-btn {
	padding: 14px 20px; font-size: 15px;
	display: flex; align-items: center; justify-content: center; gap: 10px;
	border: none; cursor: pointer;
}
.scm-pay-provider-btn--stripe { background: #635bff; color: #fff; }
.scm-pay-provider-btn--paypal { background: #ffc439; color: #111; }
.scm-pay-provider-btn--later  { background: #6c7a89; color: #fff; }

.scm-pay-hint-msg { font-size: 12px; color: #c0392b; display: none; }
.scm-paiement-footer { margin-top: 24px; font-size: 12px; color: #999; }

/* ---- Bouton lien réinscription ---- */
.scm-reinsc-link-wrap {
	text-align: center; margin-top: 20px; padding-top: 16px;
	border-top: 1px solid #eee; font-size: 13px; color: #666;
}
.scm-reinsc-link-wrap a { color: #3498db; font-weight: 600; text-decoration: none; }

/* ---- Sélecteur adhésion (sous-bloc montant live) ---- */
.scm-insc-montant-live {
	width: 100%; padding: 10px 0 0; border-top: 1px dashed #e1e5ea;
	margin-top: 12px;
}
.scm-insc-montant-live-label { font-size: 12px; color: #888; }
.scm-insc-montant-live-value { font-size: 16px; color: #2c3e50; font-weight: 600; }
.scm-insc-tarif-hint { font-size: 12px; color: #888; margin-top: 4px; }

/* ---- Section "Cotisations du membre" (fiche admin) ---- */
.scm-subsection-title {
	margin: 20px 0 8px;
	font-size: 14px;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.scm-subsection-title--spaced { margin-top: 24px; }

/* ============================================================
   CARDS DE SOUS-SECTIONS DE LA FICHE DÉTAIL MEMBRE
   Pattern repris de .scm-creds-block (Identifiants de connexion).
   3 variantes de couleur d'accent pour différencier visuellement :
     --statut → violet (rôle/grade/état)
     --cotis  → ambre  (tarif/cotisations)
     --paie   → vert   (paiements effectués)
   La card "Identifiants" garde son style bleu existant (scm-creds-block).
   ============================================================ */
.scm-section-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 16px 20px;
	margin-bottom: 18px;
}
.scm-section-card__title {
	font-size: 14px;
	font-weight: 700;
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f1f1f4;
}
/* Boutons d'action (« + Ajouter… ») dans l'en-tête d'une section card —
   poussés à droite via margin-left:auto (le parent est en display:flex donc
   float:right de la classe .flor n'aurait aucun effet ici). */
.scm-section-card__title .btnStd { margin: 0 0 0 auto; }
.scm-section-card--statut { border-color: #ddd6fe; }
.scm-section-card--statut .scm-section-card__title { color: #5b21b6; }
.scm-section-card--cotis  { border-color: #fde68a; }
.scm-section-card--cotis  .scm-section-card__title { color: #92400e; }
.scm-section-card--paie   { border-color: #a7f3d0; }
.scm-section-card--paie   .scm-section-card__title { color: #065f46; }

/* Fieldsets dans une card : padding compact, pas de bordure résiduelle */
.scm-section-card fieldset {
	padding: 6px 0 !important;
	border: 0 !important;
	background: transparent !important;
}

.scm-cotis-field { display: inline-flex; align-items: center; gap: 8px; }
.scm-cotis-field input { float: none !important; }
.scm-cotis-field input[disabled] { background: #f0f0f0; color: #888; cursor: not-allowed; }
.scm-cotis-devise { color: #1d1e3a; font-size: 13px; font-family: OpenSansBold, Arial, sans-serif; }
.scm-cotis-hint   { font-size: 12px; color: #e67e22; margin-left: 14px; }

/* ---- Table Paiements effectués (fiche admin) ---- */
.scm-paiements-list { width: 100%; border-collapse: collapse; font-size: 13px; }
.scm-paiements-list thead tr { background: #f6f8fa; text-align: left; }
.scm-paiements-list th { padding: 8px 10px; }
.scm-paiements-list td { padding: 8px 10px; }
.scm-paiements-list tbody tr { border-bottom: 1px solid #eee; }
.scm-paiements-list .col-ref { color: #888; font-family: monospace; font-size: 12px; }
.scm-paiements-list .col-montant { text-align: right; font-weight: 600; }
.scm-paiements-list .col-statut { text-align: center; }
.scm-paiements-list .col-actions { text-align: center; white-space: nowrap; }
.scm-paiements-list tfoot tr.totals { background: #f6f8fa; font-weight: 600; }
.scm-paiements-list tfoot tr.reste  { background: #fff8e1; color: #e67e22; font-weight: 600; }

.scm-paiement-badge {
	color: #fff; padding: 2px 8px; border-radius: 10px; font-size: 11px;
}
.scm-paiement-badge--ok      { background: #27ae60; }
.scm-paiement-badge--pending { background: #e67e22; }
.scm-paiement-badge--fail    { background: #e74c3c; }

.scm-paiement-icon-btn {
	background: none; border: 0; cursor: pointer; padding: 4px 6px;
}
.scm-paiement-icon-btn--info { color: #3498db; }
.scm-paiement-icon-btn--edit { color: #3498db; }
.scm-paiement-icon-btn--del  { color: #e74c3c; }

.scm-paiement-actions-row { margin-top: 14px; }
.scm-paiement-actions-row .btnStd { float: none !important; display: inline-block; margin-right: 8px; }

.scm-paiement-empty { color: #aaa; font-style: italic; padding: 8px 0; }

/* ---- Lot 11 : colonne Reçus dans la liste paiements (fiche membre) ----
 *
 * Position : entre "Référence" et "Montant" (cf scm.membres-details.tpl).
 * 2 icônes par ligne : télécharger PDF + envoyer par email.
 * État grisé pour les paiements non validés (statut ≠ ok).
 * Le numéro de reçu (R-AAAA-XXXX) est affiché en monospace au-dessus des
 * icônes en survol (tooltip) ou en complément discret. */
.scm-paiements-list .col-recus {
	text-align: center;
	white-space: nowrap;
	min-width: 76px;
}
.scm-recu-actions {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	justify-content: center;
}
.scm-recu-icon-btn {
	background: none;
	border: 0;
	cursor: pointer;
	padding: 4px 6px;
	font-size: 14px;
	transition: color .12s;
}
.scm-recu-icon-btn--download { color: #1d1e3a; }
.scm-recu-icon-btn--download:hover { color: #3498db; }
.scm-recu-icon-btn--email    { color: #1d1e3a; }
.scm-recu-icon-btn--email:hover    { color: #27ae60; }
/* Lot 18a/b */
.scm-recu-icon-btn--acces    { color: #1d1e3a; }
.scm-recu-icon-btn--acces:hover    { color: #8e44ad; }
.scm-recu-icon-btn--regen    { color: #1d1e3a; }
.scm-recu-icon-btn--regen:hover    { color: #e67e22; }

/* État grisé non-cliquable (statut ≠ ok). On garde la place visuelle mais
   on désactive l'interaction et on signale par le curseur + l'opacité. */
.scm-recu-icon-btn--disabled {
	color: #c8c8c8 !important;
	cursor: not-allowed !important;
	pointer-events: none;
	opacity: .6;
}

/* Pastille indiquant qu'un envoi a déjà eu lieu (count badge discret). */
.scm-recu-envoi-badge {
	display: inline-block;
	min-width: 14px;
	height: 14px;
	line-height: 14px;
	padding: 0 4px;
	margin-left: 2px;
	border-radius: 7px;
	background: #27ae60;
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
}

/* Lot 13 : pastille cliquable qui ouvre la popup historique au clic. */
.scm-recu-envoi-badge--clickable {
	cursor: pointer;
	transition: background .12s, transform .12s;
}
.scm-recu-envoi-badge--clickable:hover {
	background: #1f8a4a;
	transform: scale(1.1);
}

/* Lot 18b : pastille de comptage des accès publics (couleur violet
   pour la distinguer du vert envois). Cliquable via le bouton parent. */
.scm-recu-envoi-badge--acces {
	background: #8e44ad;
}

/* Colonne user-agent dans la popup historique des accès — la limiter
   en largeur car le UA peut être très long. */
.scm-recu-history-ua {
	max-width: 300px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	color: #666;
}

/* Tableau historique des envois (dans le Swal) */
.scm-recu-history-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
	margin-top: 8px;
}
.scm-recu-history-table th {
	background: #f6f8fa;
	padding: 6px 10px;
	text-align: left;
	font-weight: 600;
	color: #1d1e3a;
	border-bottom: 2px solid #ddd;
}
.scm-recu-history-table td {
	padding: 6px 10px;
	border-bottom: 1px solid #eee;
}
.scm-recu-history-table tr:last-child td {
	border-bottom: 0;
}
.scm-recu-history-empty {
	color: #888;
	font-style: italic;
	padding: 12px;
	text-align: center;
}
.scm-recu-history-by-auto {
	color: #888;
	font-style: italic;
}

/* ---- Bouton delete membre (fiche admin) ---- */
.scm-membre-delete-btn { background: #e74c3c !important; color: #fff !important; }

/* ---- Page Membres : bouton Nettoyage ---- */
.scm-nettoyage-btn { background: #e67e22 !important; }

/* =====================================================================
 * SÉLECTEUR DE SAISON (header)
 * ===================================================================== */

.scm-saison-selector {
	position: absolute;
	top: 14px;
	left: 55%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	z-index: 10;
}
/* Ligne du haut : icône + label + select + badge + retour saison active.
   Reste sur 1 seule ligne (inline-flex). */
.scm-saison-row {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
.scm-sel-label {
	display: inline-flex;       /* icône + texte sur la même ligne */
	align-items: center;
	gap: 6px;
	white-space: nowrap;        /* anti-wrap si l'espace devient juste */
	font-size: 14px;
	font-weight: 700;
	color: #444;
	letter-spacing: .3px;
	text-transform: uppercase;
}
.scm-sel-label i { color: #3498db; font-size: 16px; }

.scm-saison-selector .select-style {
	min-width: 320px;
}
.scm-saison-selector select {
	font-size: 15px;
	font-weight: 700;
}

.scm-sel-badge {
	font-size: 13px;
	padding: 5px 14px;
	border-radius: 99px;
	font-weight: 700;
	letter-spacing: .3px;
}

/* Période de la saison, centrée en petit gris sous le sélecteur. */
.scm-saison-selector .scm-saison-period {
	font-size: 12px;
	font-weight: 400;
	color: #888;
	letter-spacing: 0;
	text-transform: none;
	text-align: center;
}
.scm-saison-selector .scm-saison-period i { margin-right: 2px; opacity: .7; }
.scm-sel-badge--active { background: #DEF7EC; color: #03543F; }
.scm-sel-badge--past   { background: #FEE2E2; color: #991B1B; }
.scm-sel-badge--future { background: #E0E7FF; color: #3730A3; }
.scm-sel-badge--closed { background: #374151; color: #fff; }

.scm-sel-back {
	font-size: 12px;
	color: #991B1B;
	text-decoration: none;
	font-weight: 600;
	padding: 4px 10px;
	border: 1px solid #991B1B;
	border-radius: 6px;
	transition: all .15s;
}
.scm-sel-back:hover {
	background: #991B1B;
	color: #fff;
}

/* =====================================================================
 * ÉTATS VISUELS du body selon la saison sélectionnée
 * ===================================================================== */

/* Saison historique ou future → teinte rouge clair sur tout le site */
body.scm-saison-historique {
	background: #fef2f2;
}
body.scm-saison-historique .contenerMid,
body.scm-saison-historique .menuGauche {
	background: transparent;
}

/* Saison clôturée → teinte gris-rouge + bandeau d'avertissement */
body.scm-saison-cloturee {
	background: #f3f4f6;
}
body.scm-saison-cloturee .contenerMidContent::before {
	content: '🔒 Cette saison est clôturée — lecture seule';
	display: block;
	background: #374151;
	color: #fff;
	padding: 10px 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 16px;
	text-align: center;
}

/* Lecture seule effective : désactive champs éditables + masque boutons d'action.
 * Restent fonctionnels (non ciblés ici) :
 *   - dropdown de sélection de saison (#scm-saison-select)
 *   - section Comptabilité (boutons addRecette / addDepense / éditables compta)
 *   - section Administratif (Import / Export — formulaires POST classiques)
 *   - modules de config globale (club, champerso, Stripe, etc.)
 */
body.scm-saison-cloturee .editable-item-select,
body.scm-saison-cloturee .editable-item-selectType,
body.scm-saison-cloturee .editable-item-color,
body.scm-saison-cloturee .contenerMidContent .editable-item-text {
	pointer-events: none !important;
	opacity: .55;
	cursor: default !important;
}
/* Libère les éditables de la section Compta (lignes/libellés recettes/dépenses) */
body.scm-saison-cloturee #addRecetteTab .editable-item-text,
body.scm-saison-cloturee #addDepenseTab .editable-item-text,
body.scm-saison-cloturee .comptabilite .editable-item-text {
	pointer-events: auto !important;
	opacity: 1 !important;
	cursor: pointer !important;
}
/* Masque les boutons d'ajout/action qui écrivent en base sur la saison — sauf
 * ceux explicitement autorisés (compta). */
body.scm-saison-cloturee #addMembre,
body.scm-saison-cloturee #addGrade,
body.scm-saison-cloturee #addTechnique,
body.scm-saison-cloturee #addProf,
body.scm-saison-cloturee #addCours,
body.scm-saison-cloturee #addTarif,
body.scm-saison-cloturee #addPlanning,
body.scm-saison-cloturee #addPaiement,
body.scm-saison-cloturee #btnClotureSaison,
body.scm-saison-cloturee .btnDelete,
body.scm-saison-cloturee .btn-delete {
	display: none !important;
}

/* Verrou Import sur saison clôturée */
.scm-import-locked {
	background: #fee2e2;
	border: 1px solid #dc2626;
	color: #7f1d1d;
	padding: 14px 18px;
	margin: 16px 0;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.5;
}
.scm-import-locked .fa-lock { color: #dc2626; }
.contentFormStd.scm-locked {
	opacity: .5;
	pointer-events: none;
	position: relative;
}
.contentFormStd.scm-locked::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255,255,255,0.3);
	cursor: not-allowed;
}

/* Bandeau d'alerte — saison suivante à créer (Phase C) */
.scm-next-season-banner {
	background: #fef3c7;
	border: 1px solid #f59e0b;
	color: #92400e;
	padding: 12px 18px;
	margin: 12px 16px 0 16px;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.scm-next-season-banner__txt { flex: 1; line-height: 1.4; }
.scm-next-season-banner__btn { flex-shrink: 0; white-space: nowrap; }

/* ---- Utilitaires inscription form ---- */
.scm-required { color: #e74c3c; }
.scm-btn-disabled { opacity: .5; cursor: default; }
.scm-insc-empty-msg { color: #aaa; font-style: italic; text-align: center; padding: 20px; }
.scm-reinsc-intro { color: #666; margin: 0 0 16px; font-size: 14px; }
.scm-settings-section--spaced { margin-top: 24px; }

/* Intro (phrase explicative sous un titre de section) */
.scm-settings-intro {
	color: #555;
	font-size: 13px;
	margin: 0 0 16px;
	padding: 10px 14px;
	background: #f3f4f6;
	border-left: 3px solid #3498db;
	border-radius: 3px;
	line-height: 1.5;
}

/* Séparateur visuel fort entre blocs de sujets différents */
.scm-settings-divider {
	border: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, #d0d0d0, transparent);
	margin: 48px 0 32px;
}

/* Section "Réinscriptions" : encadré pour bien marquer le sujet différent */
.scm-settings-section--reinsc {
	background: #fefefe;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	padding: 24px;
}
.scm-settings-section--reinsc .scm-settings-section-title {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
	color: #1e40af;
}
.scm-settings-section-header { margin-bottom: 20px; }


/****************************************************
 *** LISTE MEMBRES — TABLEAU STICKY               ***
 *                                                  *
 * Freeze scroll :                                   *
 *  - header fixé en haut (scroll vertical)          *
 *  - colonne "Code membre" fixée à gauche           *
 *  - 5 colonnes fixées à droite :                   *
 *    Grade (180px) | Tarif (180px) | État+Cotis     *
 *    (120px) | Paiements (130px) | Corbeille (40px) *
 *  - Total figé à droite : 650px                    *
 ****************************************************/

/* Wrapper : scroll horizontal + vertical.
   max-height nécessaire pour que le header sticky fonctionne.
   width: 100% indispensable pour que le wrap soit contraint à la largeur
   de son parent (.contentTabStd) — sans ça, il s'étalerait à la largeur
   du tableau (2088px) au lieu d'activer le scroll horizontal. */
.scm-table-sticky-wrap {
	overflow: auto;
	max-height: calc(100vh - 320px);
	position: relative;
	width: 100%;
	max-width: 100%;
}

/* table-layout: fixed est indispensable pour que les `width` fixes des
   cellules sticky soient RÉELLEMENT respectées. Sans ça, une cellule
   avec un contenu long dans la colonne tire la colonne entière au-delà
   de sa width demandée (mode "auto" par défaut).
   min-width garantit que les colonnes avec une width explicite ET les
   colonnes customs (sans width, auto-distribuées) aient toutes de la
   place. Au-delà de cette largeur, le scroll horizontal prend le relais. */
.scm-table-sticky-wrap > table.tableStd {
	table-layout: fixed;
	min-width: 1980px;
}

/* box-sizing: border-box pour que les `width` des cellules sticky
   incluent le padding (sans ça, width:180px devient 210px réels
   à cause du padding de 15px×2 des .tableStd td). */
.scm-table-sticky-wrap > table.tableStd > tbody > tr > th,
.scm-table-sticky-wrap > table.tableStd > tbody > tr > td {
	box-sizing: border-box;
}

/* Largeurs indicatives pour les colonnes fixes non-sticky
   (sinon en table-layout:fixed elles prendraient une largeur auto-distribuée
   qui gonflerait les colonnes "n°" et "Date" inutilement). */
.scm-table-sticky-wrap > table.tableStd > tbody > tr:first-child > th:nth-child(1) { width: 35px;  } /* n° */
.scm-table-sticky-wrap > table.tableStd > tbody > tr:first-child > th:nth-child(3) { width: 85px;  } /* Date */

/* ============================================================
   HEADER (sticky top) — la 1re ligne (<tr> avec des <th>)
   reste visible au scroll vertical.
   ============================================================ */
.scm-table-sticky-wrap table.tableStd > tbody > tr:first-child > th {
	position: sticky;
	top: 0;
	z-index: 3; /* au-dessus des <td> sticky horizontaux (z:2) */

	/* Compactage des en-têtes : police plus petite, wrap autorisé sur 2 lignes,
	   padding réduit, line-height serrée. Libère ~30% de hauteur sur la barre
	   d'en-tête et permet des labels sur 2 lignes (ex: E-mail / Téléphone). */
	font-size: 12px !important;
	padding: 8px 6px !important;
	line-height: 1.25 !important;
	white-space: normal !important;
	vertical-align: middle;
	text-align: center !important;
}

/* ============================================================
   STICKY COLONNE GAUCHE (Code membre)
   ============================================================ */
.scm-sticky-col-code {
	position: sticky;
	left: 0;
	z-index: 2;
	width: 80px;
	min-width: 80px;
	max-width: 80px;
}
/* Fonds opaques requis pour position:sticky (hérite de la couleur de la ligne) */
.tableStd tr    td.scm-sticky-col-code { background: #f5f5f5; }
.tableStd tr.odd td.scm-sticky-col-code { background: #fff;    }
.tableStd tr:hover    td.scm-sticky-col-code,
.tableStd tr.odd:hover td.scm-sticky-col-code { background: #cfe0f6; }

/* Header (coin haut-gauche) : z-index élevé pour rester au-dessus */
.scm-table-sticky-wrap table.tableStd th.scm-sticky-col-code {
	z-index: 5;
	background: #626262;
	left: 0;
}

/* ============================================================
   STICKY COLONNES DROITE (Grade / Tarif+État+Cotis fusionnée / Paiem. / Corbeille)
   Refonte 2026-05-05 : Tarif et État+Cotis fusionnés en une seule
   colonne (gain de largeur par rapport aux 300px d'origine).
   Offsets cumulés depuis le bord droit :
     Corbeille  : right:0   (40px)
     Paiements  : right:40  (100px)
     Tarif/Etat : right:140 (180px)   ← classe .scm-sticky-col-etat
     Grade      : right:320 (120px)
   ============================================================ */
.scm-sticky-col-corb   { position: sticky; right:   0; z-index: 2; width:  40px; min-width:  40px; max-width:  40px; }
/* Override de .tableStd tr td (text-align:left) pour centrer la corbeille */
.tableStd tr td.scm-sticky-col-corb { text-align: center; vertical-align: middle; }
.scm-sticky-col-paie   { position: sticky; right:  40px; z-index: 2; width: 100px; min-width: 100px; max-width: 100px; }
/* Cellule fusionnée Tarif (haut) + État/Cotis (bas) */
.scm-sticky-col-etat   { position: sticky; right: 140px; z-index: 2; width: 180px; min-width: 180px; max-width: 180px; }
.scm-sticky-col-grade  { position: sticky; right: 320px; z-index: 2; width: 120px; min-width: 120px; max-width: 120px; }
/* Grade centré horizontalement (au lieu du text-align:left global) */
.tableStd tr td.scm-sticky-col-grade,
.tableStd tr th.scm-sticky-col-grade { text-align: center; }
/* Ombre portée à gauche de la 1re col sticky (Grade) pour signaler la frontière
   du panneau sticky droit (Yvan 2026-05-05). Pattern Excel/Google Sheets/Airtable.
   Visible en permanence — l'ombre marque la séparation et devient particulièrement
   parlante quand on scrolle horizontalement. */
.tableStd tr td.scm-sticky-col-grade,
.tableStd tr th.scm-sticky-col-grade {
	box-shadow: -6px 0 8px -4px rgba(0, 0, 0, 0.18);
}

/* Fonds opaques pour les lignes alternées (cellules de données) */
.tableStd tr td.scm-sticky-col-corb,
.tableStd tr td.scm-sticky-col-paie,
.tableStd tr td.scm-sticky-col-etat,
.tableStd tr td.scm-sticky-col-grade {
	background: #f5f5f5;
}
.tableStd tr.odd td.scm-sticky-col-corb,
.tableStd tr.odd td.scm-sticky-col-paie,
.tableStd tr.odd td.scm-sticky-col-etat,
.tableStd tr.odd td.scm-sticky-col-grade {
	background: #fff;
}
.tableStd tr:hover td.scm-sticky-col-corb,
.tableStd tr:hover td.scm-sticky-col-paie,
.tableStd tr:hover td.scm-sticky-col-etat,
.tableStd tr:hover td.scm-sticky-col-grade,
.tableStd tr.odd:hover td.scm-sticky-col-corb,
.tableStd tr.odd:hover td.scm-sticky-col-paie,
.tableStd tr.odd:hover td.scm-sticky-col-etat,
.tableStd tr.odd:hover td.scm-sticky-col-grade {
	background: #cfe0f6;
}

/* Header : coin haut-droit (headers sticky dans les 2 directions) */
.scm-table-sticky-wrap table.tableStd th.scm-sticky-col-corb,
.scm-table-sticky-wrap table.tableStd th.scm-sticky-col-paie,
.scm-table-sticky-wrap table.tableStd th.scm-sticky-col-etat,
.scm-table-sticky-wrap table.tableStd th.scm-sticky-col-grade {
	z-index: 5;
	background: #626262;
}

/* ============================================================
   LAYOUT CELLULE FUSIONNÉE Tarif + État + Cotis (180px)
   Tarif centré ligne 1 (triable), État (gauche) + Cotis (droite)
   en flex sur ligne 2.
   ============================================================ */
.scm-tec              { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 100%; min-width: 0; }
/* Wrap autorisé sur le libellé du type d'adhésion pour ne pas faire
   déborder la colonne sticky 100px (ex: "Adhérent standard KM").
   word-break + overflow:hidden empêchent un mot très long de pousser
   la colonne au-delà de son max-width. */
.scm-tec-tarif        { text-align: center; font-size: 13px; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; word-break: break-word; max-width: 100%; overflow: hidden; }
.scm-tec-tarif a      { display: inline; white-space: normal; overflow-wrap: anywhere; word-break: break-word; }
.scm-tec-bottom       { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.scm-tec-bottom .scm-cotis-line { white-space: nowrap; }
/* Header : zones triables internes (Tarif et État) cliquables séparément */
.scm-tec .scm-sortable { cursor: pointer; user-select: none; }
.scm-tec .scm-sortable:hover { opacity: .85; }
/* Body : badge État reste calé à gauche, montant Cotis à droite */
.tableStd tr td.scm-sticky-col-etat .scm-tec-bottom > a:first-child { align-self: center; }
.tableStd tr td.scm-sticky-col-etat .scm-tec-bottom .scm-cotis-line { text-align: right; }
/* Cellule fusionnée : on neutralise le text-align:left global posé par .tableStd td */
.tableStd tr td.scm-sticky-col-etat { text-align: inherit; padding: 6px 8px; vertical-align: middle; }
.tableStd tr th.scm-sticky-col-etat { padding: 6px 8px; vertical-align: middle; }

/* Troncature "ellipsis" par défaut pour TOUTES les cellules du tableau
   sticky. Évite que des contenus longs (email, adresse, libellé de grade)
   débordent visuellement sur les colonnes voisines — ce qui casse le
   layout en table-layout:fixed. */
.scm-table-sticky-wrap > table.tableStd > tbody > tr > td {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Le <a> à l'intérieur de la cellule doit aussi se plier à la contrainte. */
.scm-table-sticky-wrap > table.tableStd > tbody > tr > td > a {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	vertical-align: middle;
}
/* Exception : les mini-boutons .del doivent garder leur inline-flex pour
   que align-items:center centre le glyphe dans la box. */
.scm-table-sticky-wrap > table.tableStd > tbody > tr > td > a.del {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

/* Exceptions : cellules avec contenu structuré multi-lignes (flex vertical
   ou boutons empilés). Pas d'ellipsis, on laisse le contenu s'afficher. */
.scm-sticky-col-etat,
.scm-sticky-col-paie,
.scm-grouped-cell {
	white-space: normal !important;
	text-overflow: clip !important;
}
.scm-sticky-col-etat > *,
.scm-sticky-col-paie > * {
	overflow: visible;
}

/* ============================================================
   CELLULE PAIEMENTS — Total + boutons [+] et [CB]
   Layout : 3 lignes empilées, centrées horizontalement.
     Ligne 1 : <span class="totP">    (texte du total)
     Ligne 2 : <a class="addPaie">    (bouton "+"   — toujours affiché)
     Ligne 3 : <a class="makePaie">   (bouton "CB"  — si $onlineEnabled)
   Les boutons .btnStd.min sont en display:block par défaut (définis plus haut
   dans scm.css), ce qui les étirait à toute la largeur de la cellule (130px).
   Ici on les contraint à 30×22px, centrés via margin:auto + flex-center
   pour que l'icône reste pile au milieu du bouton.
   ============================================================ */
.scm-sticky-col-paie {
	padding: 6px 4px !important;          /* override du 10px 5px global des td */
	vertical-align: middle;
	text-align: center;
}
.scm-sticky-col-paie .totP {
	display: block;
	padding: 0 0 5px 0;
	font-size: 12px;
	line-height: 1.2;
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.scm-sticky-col-paie .btnStd.min.addPaie,
.scm-sticky-col-paie .btnStd.min.makePaie {
	display: flex;             /* block-level → chaque bouton sur sa propre ligne */
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 24px;
	padding: 0;
	margin: 3px auto 0;        /* centre horizontalement (largeur fixe) + gap vertical */
	font-size: 12px;
	line-height: 1;
}

/* ============================================================
   CHANTIER 3 — Cellule file (raccourci upload depuis la liste)
   Markup : <span class="scm-file-cell"><a class="scm-file-add">
            <input file><span class="scm-file-list">…chips…</span></span>
   ============================================================ */
.scm-file-cell {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	max-width: 100%;
}
.scm-file-cell .scm-file-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;                   /* ic\u00f4ne seule reste compacte (liste admin) */
	height: 22px;
	padding: 0 6px;                    /* marge int\u00e9rieure quand il y a un libell\u00e9 ("Choisir un fichier") */
	border-radius: 4px;
	color: #888;                       /* trombone gris discret au repos */
	background: transparent;
	text-decoration: none;
	font-size: 13px;
	line-height: 1;
	white-space: nowrap;               /* emp\u00eache "Choisir un fichier" d'\u00e9clater sur plusieurs lignes */
	transition: background .15s, color .15s;
}
.scm-file-cell .scm-file-add:hover {
	background: #e3f2fd;
	color: #1976d2;
}
.scm-file-cell.scm-file-uploading .scm-file-add {
	opacity: 0.5;
	pointer-events: none;
}
.scm-file-cell.scm-file-uploading .scm-file-add::after {
	/* petit indicateur d'activité visuel pendant l'upload */
	content: '…';
	margin-left: 2px;
	font-size: 14px;
}
.scm-file-cell .scm-file-list {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 3px;
	max-width: 100%;
}
.scm-file-cell .scm-file-chip {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	max-width: 130px;
	padding: 1px 4px 1px 6px;
	border-radius: 10px;
	background: #eaf3fb;               /* bleu très pâle = "fichier présent" */
	border: 1px solid #cfe0f6;
	font-size: 11px;
	line-height: 1.4;
}
.scm-file-cell .scm-file-chip > a:first-child {
	flex: 1 1 auto;
	min-width: 0;
	color: #1976d2;
	text-decoration: none;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.scm-file-cell .scm-file-chip > a:first-child:hover {
	text-decoration: underline;
}
.scm-file-cell .scm-file-chip .scm-file-del {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	color: #888;
	font-size: 10px;
	text-decoration: none;
	transition: background .15s, color .15s;
}
.scm-file-cell .scm-file-chip .scm-file-del:hover {
	background: #e74c3c;
	color: #fff;
}

/* ============================================================
   CELLULE GROUPÉE (Coordonnées, Adresse, …)
   Empile plusieurs champs éditables verticalement dans une même
   colonne. Chaque champ reste individuellement cliquable / Tab-ble.
   Certains groupes peuvent aussi aligner plusieurs champs sur la
   même sous-ligne (ex: CP + Ville) via .scm-subline-row.
   ============================================================ */
.scm-grouped-cell {
	vertical-align: middle;  /* Centrage vertical (Yvan 2026-05-05 : "plus beau visuellement") */
}
/* Centrage vertical pour toutes les autres cellules de la liste membres
   (single-field cells comme Date, Naissance, NOM, etc.) — cohérence
   d'alignement avec les groupes compacts (email/tel, adresse/cp/ville). */
#addMembreTab > tbody > tr > td,
#addMembreTab > tr > td {
	vertical-align: middle;
}

/* Centrage horizontal global pour la liste membres
   (Yvan 2026-05-05 : "centre tout c'est plus simple").
   Couvre toutes les cellules dynamiques (date, civ, nom, prénom,
   naissance, email/tel, adresse/cp/ville, etc.) et leurs <th>. */
#addMembreTab > tbody > tr > th,
#addMembreTab > tr > th,
#addMembreTab > tbody > tr > td,
#addMembreTab > tr > td {
	text-align: center;
}
/* Pour les cellules groupées (email/tel, adresse/cp/ville) : centrer aussi
   les champs empilés à l'intérieur du flex column. */
#addMembreTab .scm-grouped-fields {
	align-items: center;
}
/* Une sous-ligne (CP + Ville côte à côte) reste centrée par flex. */
#addMembreTab .scm-subline-row {
	justify-content: center;
}
.scm-grouped-fields {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0; /* pour que l'ellipsis marche sur les enfants */
}
.scm-grouped-fields > a,
.scm-grouped-fields > .scm-subline-row {
	display: block;
	max-width: 100%;
	line-height: 1.3;
}
.scm-grouped-fields > a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Nuance visuelle : la première ligne d'un groupe un peu plus forte */
.scm-grouped-fields > a:first-child,
.scm-grouped-fields > .scm-subline-row:first-child > a {
	font-weight: 600;
}

/* Sous-ligne : plusieurs champs côte à côte (ex: CP + Ville) */
.scm-subline-row {
	display: flex;
	flex-direction: row;
	gap: 6px;
	align-items: baseline;
	min-width: 0;
}
.scm-subline-row > a {
	display: inline-block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Premier champ de la sous-ligne (CP) = largeur compacte */
.scm-subline-row > a:first-child {
	flex: 0 0 auto;
	max-width: 60px;
}
/* Champ suivant (Ville) = prend l'espace restant */
.scm-subline-row > a:nth-child(n+2) {
	flex: 1 1 auto;
	min-width: 0;
}

/* ============================================================
   LARGEURS DES COLONNES DYNAMIQUES
   Grâce à table-layout: fixed, on peut contrôler les largeurs
   via les TH. Valeurs optimisées pour éviter le scroll horizontal
   sur écran standard (~1400px+).
   ============================================================ */
.scm-table-sticky-wrap > table.tableStd > tbody > tr:first-child > th[data-id="civ"]        { width:  60px; }
.scm-table-sticky-wrap > table.tableStd > tbody > tr:first-child > th[data-id="nom"]        { width: 120px; }
.scm-table-sticky-wrap > table.tableStd > tbody > tr:first-child > th[data-id="prenom"]     { width: 110px; }
.scm-table-sticky-wrap > table.tableStd > tbody > tr:first-child > th[data-id="naissance"]  { width:  95px; }
.scm-table-sticky-wrap > table.tableStd > tbody > tr:first-child > th[data-group="coordonnees"] { width: 170px; }
.scm-table-sticky-wrap > table.tableStd > tbody > tr:first-child > th[data-group="adresse"]     { width: 180px; }

/* ============================================================
   CELLULE LISTE MEMBRES — ligne basse (badge État + Cotisation)
   Refonte 2026-05-05 : .scm-etat-cotis → .scm-tec-bottom (cellule
   fusionnée Tarif + État + Cotis, cf bloc « LAYOUT CELLULE FUSIONNÉE »
   plus haut).
   ============================================================ */
.scm-tec-bottom .scm-cotis-montant {
	font-family: OpenSansBold, Arial, sans-serif;
	font-size: 13px;
	color: #1d1e3a;
}
/* Wrap inline montant + symbole devise (ex: "60,00 €")
   Le <span class="scm-cotis-line"> garde montant et symbole sur la même
   ligne. */
.scm-tec-bottom .scm-cotis-line {
	display: inline-flex;
	align-items: baseline;
	gap: 0;
}
.scm-tec-bottom .scm-cotis-devise {
	font-family: OpenSansBold, Arial, sans-serif;
	font-size: 12px;
	color: #1d1e3a;
	margin-left: 2px;
}

/* ============================================================
   STICKY COLONNE CORBEILLE — uniformité avec le reste du projet
   Le rendu de l'icône .del lui-même est défini globalement (~ligne 1844)
   et identique partout dans l'app. Ici on se contente de centrer le bouton
   dans la cellule sticky de 40px (text-align: center sur le td suffit, car
   le bouton est en inline-flex donc centrable par alignement de texte).
   ============================================================ */
.scm-sticky-col-corb {
	text-align: center;
	vertical-align: middle;
}

/* ============================================================
   BARRE DE RECHERCHE (sortie du tableau dans le template)
   Design léger pour s'intégrer au-dessus du tableau sticky.
   ============================================================ */
.scm-membres-search-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin: 10px 0 12px;
}
.scm-membres-search {
	flex: 1;
	min-width: 220px;
	max-width: 400px;
	margin: 0;
}
.scm-membres-search .inputStd.search {
	width: 100%;
	height: 34px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 3px;
	text-indent: 10px;
	font-size: 12px;
	color: #373b3e;
	font-family: 'OpenSansRegular', Arial, sans-serif;
}

/* Compteurs Total / Inscrits / Préinscrits — droite de la barre de recherche */
.scm-membres-totals {
	display: flex;
	align-items: stretch;
	gap: 8px;
	font-size: 12px;
}
.scm-membres-total-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px 14px;
	min-width: 70px;
	border: 1px solid #e1e4ea;
	border-radius: 4px;
	background: #f8f9fb;
}
.scm-membres-total-item strong {
	font-size: 18px;
	font-weight: 600;
	color: #2c5f9e;
	line-height: 1.1;
}
.scm-membres-total-label {
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	font-size: 10px;
	margin-top: 2px;
}
.scm-membres-total-item--inscrits strong    { color: #1e8449; }
.scm-membres-total-item--preinscrits strong { color: #b45309; }

/* Colonne numéro (1, 2, 3… selon position visible) */
.scm-row-num {
	text-align: center;
	color: #999;
	font-size: 11px;
	font-variant-numeric: tabular-nums;
	width: 28px;
}


/* ============================================================
 * SCM — Styles modèles de documents (Paramètres → Modèles)
 *
 * Couvre :
 *   - L'éditeur visuel en overlay (#scm-modele-editor)
 *   - Les cards Fiche/Facture (.scm-modele-card)
 *   - Le toggle switch CSS custom (.scm-toggle)
 *   - Le z-index des popups SweetAlert lancées depuis l'éditeur
 *
 * Chargé depuis index.php avec cache-busting filemtime, comme scm.css.
 * ============================================================ */


/* ----------------------------------------------------------
 * 1. OVERLAY ÉDITEUR
 * ---------------------------------------------------------- */

#scm-modele-editor {
	display:none;
	position:fixed; top:0; left:0; right:0; bottom:0;
	background:rgba(15,18,30,0.55);
	z-index:9000;
}
#scm-modele-editor.scm-open { display:flex; flex-direction:column; }

/* Les popups SweetAlert2 lancées depuis l'éditeur (confirmation
 * fermeture, restauration, suppression d'un bloc) doivent passer
 * AU-DESSUS de l'overlay 9000 — sinon elles s'ouvrent derrière et
 * l'utilisateur croit que le bouton ne marche pas. */
.swal2-container { z-index:9100 !important; }

#scm-modele-editor .scm-mod-frame {
	background:#f7f8fb; margin:24px; flex:1;
	border-radius:8px; overflow:hidden;
	display:flex; flex-direction:column;
	box-shadow:0 8px 32px rgba(0,0,0,0.25);
}

/* Bandeau supérieur */
#scm-modele-editor .scm-mod-header {
	display:flex; align-items:center; justify-content:space-between;
	padding:12px 20px; background:#1d1e3a; color:#fff;
}
#scm-modele-editor .scm-mod-title { font-size:16px; font-weight:bold; }
#scm-modele-editor .scm-mod-title .scm-mod-type-pill {
	display:inline-block; padding:2px 10px; margin-left:8px;
	background:rgba(255,255,255,0.18); border-radius:12px;
	font-size:12px; font-weight:normal; text-transform:uppercase;
	letter-spacing:0.5px;
}
#scm-modele-editor .scm-mod-actions { display:flex; gap:8px; align-items:center; }
#scm-modele-editor .scm-mod-actions .btnStd { margin:0; }
#scm-modele-editor .scm-mod-status {
	font-size:12px; color:#a5b3d6; margin-right:12px;
}

/* Corps en 3 colonnes */
#scm-modele-editor .scm-mod-body {
	flex:1; display:flex; min-height:0; overflow:hidden;
}
#scm-modele-editor .scm-mod-pane {
	display:flex; flex-direction:column;
	background:#fff; border-right:1px solid #e5e7eb;
	overflow:hidden;
}
#scm-modele-editor .scm-mod-pane:last-child { border-right:0; }
#scm-modele-editor .scm-mod-pane-header {
	padding:10px 14px; background:#f1f3f8; border-bottom:1px solid #e5e7eb;
	font-size:12px; font-weight:bold; color:#555; text-transform:uppercase; letter-spacing:0.5px;
}
#scm-modele-editor .scm-mod-pane-body {
	flex:1; overflow-y:auto; padding:12px;
}

#scm-modele-editor .scm-mod-palette  { width:230px; }
#scm-modele-editor .scm-mod-canvas   { flex:1; min-width:300px; background:#f7f8fb; }
#scm-modele-editor .scm-mod-config   { width:340px; }
/* Éditeur de modèles — briques A/B/C (09/09/2026) : volet aperçu, aide interne, référence des variables */
#scm-modele-editor .scm-mod-preview  { width:420px; }
#scm-modele-editor.scm-preview-hidden .scm-mod-preview { display:none; }
#scm-modele-editor .scm-mod-preview-body { display:flex; flex-direction:column; padding:0; }
#scm-modele-editor .scm-mod-preview-hint { font-size:11px; color:#888; padding:8px 12px; border-bottom:1px solid #e5e7eb; }
#scm-modele-editor .scm-mod-preview-frame { flex:1; width:100%; border:0; background:#fff; min-height:400px; }
#scm-modele-editor .scm-mod-preview-membre { font-weight:400; text-transform:none; color:#888; margin-left:6px; }
#scm-modele-editor .scm-mod-aide { font-size:11px; color:#1e40af; background:#eff6ff; border-bottom:1px solid #bfdbfe; padding:8px 12px; line-height:1.4; }
#scm-modele-editor .scm-mod-token-ref { font-size:11px; color:#555; }
#scm-modele-editor .scm-mod-token-ref h5 { margin:10px 0 4px; font-size:11px; text-transform:uppercase; color:#888; }
#scm-modele-editor .scm-mod-token-ref code { display:inline-block; background:#f1f5f9; border:1px solid #e2e8f0; border-radius:3px; padding:1px 5px; margin:2px 4px 2px 0; font-size:11px; }
@media (max-width:1400px) { #scm-modele-editor .scm-mod-preview { width:340px; } }


/* ----------------------------------------------------------
 * 2. PALETTE (colonne gauche)
 * ---------------------------------------------------------- */

#scm-modele-editor .scm-mod-bloc-tile {
	display:flex; align-items:center; gap:8px;
	padding:8px 10px; margin-bottom:6px;
	background:#fff; border:1px solid #e5e7eb; border-radius:5px;
	cursor:grab; font-size:12px; color:#333;
}
#scm-modele-editor .scm-mod-bloc-tile:hover { border-color:#1d1e3a; background:#fafbff; }
#scm-modele-editor .scm-mod-bloc-tile i { color:#1d1e3a; font-size:14px; width:16px; text-align:center; }
#scm-modele-editor .scm-mod-cat-title {
	font-size:10px; font-weight:bold; color:#888; text-transform:uppercase;
	letter-spacing:0.5px; margin:10px 0 4px;
}
#scm-modele-editor .scm-mod-cat-title:first-child { margin-top:0; }


/* ----------------------------------------------------------
 * 3. CANVAS (colonne centre)
 * ---------------------------------------------------------- */

#scm-modele-editor .scm-mod-bloc-card {
	background:#fff; border:1px solid #e5e7eb; border-radius:5px;
	margin-bottom:8px; padding:10px 12px;
	display:flex; align-items:center; gap:10px;
	cursor:pointer; transition:border-color 0.1s;
}
#scm-modele-editor .scm-mod-bloc-card.scm-mod-selected {
	border-color:#1d1e3a; box-shadow:0 0 0 2px rgba(29,30,58,0.15);
}
#scm-modele-editor .scm-mod-bloc-card.scm-mod-disabled {
	opacity:0.45; background:#f5f5f5;
}
#scm-modele-editor .scm-mod-bloc-card .scm-mod-handle {
	cursor:grab; color:#aaa; font-size:14px;
}
#scm-modele-editor .scm-mod-bloc-card .scm-mod-bloc-icon { color:#1d1e3a; font-size:16px; width:18px; text-align:center; }
#scm-modele-editor .scm-mod-bloc-card .scm-mod-bloc-meta { flex:1; }
#scm-modele-editor .scm-mod-bloc-card .scm-mod-bloc-meta .lbl { font-size:13px; color:#1d1e3a; font-weight:bold; }
#scm-modele-editor .scm-mod-bloc-card .scm-mod-bloc-meta .typ { font-size:11px; color:#888; }
#scm-modele-editor .scm-mod-bloc-card .scm-mod-bloc-actions { display:flex; gap:4px; }
#scm-modele-editor .scm-mod-bloc-card .scm-mod-bloc-actions a {
	padding:4px 7px; color:#666; cursor:pointer; font-size:13px;
	border-radius:3px;
}
#scm-modele-editor .scm-mod-bloc-card .scm-mod-bloc-actions a:hover { background:#f1f3f8; color:#1d1e3a; }
#scm-modele-editor .scm-mod-bloc-card .scm-mod-bloc-actions a.danger:hover { color:#c0392b; background:#fee; }

#scm-modele-editor .scm-mod-bloc-card.scm-drag-over { border-top:3px solid #2563eb; }

#scm-modele-editor .scm-mod-canvas-section {
	background:#fff; border:1px dashed #c0c4d0; border-radius:5px;
	padding:10px 12px; margin-bottom:14px;
}
#scm-modele-editor .scm-mod-canvas-section h4 {
	margin:0 0 8px; font-size:12px; color:#888; text-transform:uppercase; letter-spacing:0.5px;
}

#scm-modele-editor .scm-mod-empty {
	text-align:center; color:#888; padding:30px 14px; font-style:italic; font-size:13px;
	border:2px dashed #d0d4dc; border-radius:6px;
}


/* ----------------------------------------------------------
 * 4. PANNEAU CONFIG (colonne droite)
 * ---------------------------------------------------------- */

#scm-modele-editor .scm-mod-config-panel { font-size:13px; }
#scm-modele-editor .scm-mod-config-panel .scm-mod-cfg-title {
	font-size:14px; font-weight:bold; color:#1d1e3a; margin-bottom:4px;
}
#scm-modele-editor .scm-mod-config-panel .scm-mod-cfg-desc {
	font-size:11px; color:#888; margin-bottom:14px;
}
#scm-modele-editor .scm-mod-config-panel .scm-mod-field {
	margin-bottom:12px;
}
#scm-modele-editor .scm-mod-config-panel .scm-mod-field label {
	display:block; font-size:11px; color:#666; margin-bottom:3px;
	text-transform:uppercase; letter-spacing:0.5px; font-weight:bold;
}
#scm-modele-editor .scm-mod-config-panel input[type=text],
#scm-modele-editor .scm-mod-config-panel input[type=number],
#scm-modele-editor .scm-mod-config-panel select,
#scm-modele-editor .scm-mod-config-panel textarea {
	width:100%; box-sizing:border-box;
	padding:6px 8px; border:1px solid #d0d4dc; border-radius:4px;
	font-size:12px; font-family:inherit;
}
#scm-modele-editor .scm-mod-config-panel textarea { min-height:60px; resize:vertical; }
#scm-modele-editor .scm-mod-config-panel input[type=color] {
	width:50px; height:30px; padding:0; border:1px solid #d0d4dc; cursor:pointer;
}
#scm-modele-editor .scm-mod-token-picker {
	margin-bottom:12px;
}
#scm-modele-editor .scm-mod-token-picker select { font-size:11px; }
#scm-modele-editor .scm-mod-list-item {
	display:flex; gap:6px; margin-bottom:5px; align-items:center;
	background:#f7f8fb; padding:6px 8px; border-radius:4px;
}
#scm-modele-editor .scm-mod-list-item input { flex:1; }
#scm-modele-editor .scm-mod-list-item a { color:#c0392b; cursor:pointer; padding:2px 6px; }
#scm-modele-editor .scm-mod-add-row {
	display:inline-block; padding:4px 10px; background:#f1f3f8;
	border:1px dashed #c0c4d0; border-radius:4px; cursor:pointer;
	color:#666; font-size:11px;
}

/* Repère "bloc actif" */
#scm-modele-editor .scm-mod-toggle {
	display:flex; align-items:center; gap:6px; margin-bottom:12px;
	background:#fff8e1; padding:8px 10px; border-radius:4px; font-size:11px; color:#92400e;
}
#scm-modele-editor .scm-mod-toggle input { margin:0; }


/* ----------------------------------------------------------
 * 5. CARDS MODÈLES (page Paramètres → onglet Modèles)
 * ---------------------------------------------------------- */

/* Modèles de documents — remise en ordre (09/09/2026) : cartes étirées, sélecteur de repères par carte, interrupteur de reset */
.scm-modele-grid { display:grid; grid-template-columns:1fr 1fr 1fr; gap:18px; align-items:stretch; }
.scm-modele-num-insert { margin:8px 0 10px; }
.scm-modele-num-insert .scm-modele-num-token { font-size:12px; max-width:280px; }
.scm-modele-num-reset-label { font-size:12px; color:#333; margin-right:auto; }

.scm-modele-card {
	background:#fff; border:1px solid #e5e7eb; border-radius:6px;
	padding:18px 20px; display:flex; flex-direction:column; gap:14px;
}
.scm-modele-row {
	display:flex; align-items:center; gap:10px; font-size:12px; color:#333;
}
.scm-modele-row .scm-modele-row-label { flex:1; }
.scm-modele-card .scm-card-foot {
	display:flex; align-items:center; gap:12px; margin-top:auto;
	padding-top:6px; border-top:1px solid #f0f1f5;
}
.scm-modele-card .scm-card-foot .status {
	flex:1; font-size:11px; color:#888; font-style:italic;
}


/* ----------------------------------------------------------
 * 6. TOGGLE SWITCH CSS CUSTOM
 *    (contourne le display:none global SCM sur les checkboxes)
 * ---------------------------------------------------------- */

.scm-toggle {
	position:relative; display:inline-block;
	width:42px; height:22px; vertical-align:middle; flex-shrink:0;
}
.scm-toggle input { opacity:0; width:0; height:0; position:absolute; }
.scm-toggle .scm-slider {
	position:absolute; cursor:pointer; inset:0;
	background:#ccc; border-radius:22px; transition:.18s;
}
.scm-toggle .scm-slider:before {
	content:""; position:absolute; height:18px; width:18px;
	left:2px; bottom:2px; background:#fff; border-radius:50%;
	transition:.18s; box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.scm-toggle input:checked + .scm-slider { background:#0e7490; }
.scm-toggle input:checked + .scm-slider:before { transform:translateX(20px); }


/* ----------------------------------------------------------
 * 7. SOUS-SECTION NUMÉROTATION DANS LA CARD FACTURATION
 *    (intégrée Lot 5i, anciennement section autonome)
 * ---------------------------------------------------------- */

.scm-modele-subsection {
	border-top:1px solid #f0f1f5;
	padding-top:14px;
	margin-top:6px;
}
.scm-modele-subsection-head {
	display:flex; align-items:center; gap:8px;
	font-size:13px; color:#1d1e3a; margin-bottom:4px;
}
.scm-modele-subsection-intro {
	font-size:11px; color:#888; margin:0 0 12px;
}
.scm-modele-num-grid {
	display:grid; grid-template-columns:1fr 70px 70px;
	gap:8px 10px; margin-bottom:10px;
}
.scm-modele-num-grid label {
	display:block; font-size:10px; color:#666; margin-bottom:3px;
	text-transform:uppercase; letter-spacing:0.5px; font-weight:bold;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.scm-modele-num-grid input { width:100%; box-sizing:border-box; }
/* Bandeau partagé sous les 3 cards (Reset + Token + Sauvegarder) */
.scm-modele-num-controls-shared {
	margin-top:18px; padding:14px 18px; background:#fafbfd;
	border:1px solid #e5e7eb; border-radius:6px;
}
.scm-modele-num-controls-shared .scm-modele-num-controls-intro {
	font-size:12px; color:#666; margin:0 0 10px;
}
.scm-modele-num-controls-shared .scm-modele-num-controls-row {
	display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.scm-modele-num-format { font-family:monospace; }
.scm-modele-num-controls {
	display:flex; align-items:center; gap:10px;
	flex-wrap:wrap; margin-bottom:10px;
}
.scm-modele-num-reset {
	display:flex; align-items:center; gap:6px;
	font-size:12px; color:#333;
}
.scm-modele-num-token {
	font-size:11px; padding:4px; flex:1; min-width:120px;
}
.scm-modele-num-controls .btnStd { margin:0; }
.scm-modele-num-apercu {
	background:#f7f8fb; border-radius:4px; padding:8px 12px;
	font-size:12px; color:#555;
}
.scm-modele-num-apercu #scm-fnumero-apercu {
	font-family:monospace; font-weight:bold; color:#1d1e3a;
}
.scm-modele-num-apercu #scm-fnumero-status {
	margin-left:12px; font-style:italic; color:#888;
}


/* ----------------------------------------------------------
 * 8. SOUS-SECTION NUMÉROTATION : 2 blocs (Facture + Reçu)
 *    Ajout Lot 7f — un encart par type de document
 * ---------------------------------------------------------- */

.scm-modele-num-block {
	background:#f7f8fb; border-radius:5px;
	padding:10px 12px; margin-bottom:10px;
}
.scm-modele-num-block-title {
	font-size:11px; font-weight:bold; color:#0e7490;
	text-transform:uppercase; letter-spacing:0.5px;
	margin-bottom:8px;
}
.scm-modele-num-block .scm-modele-num-grid {
	margin-bottom:6px;
}
.scm-modele-num-block .scm-modele-num-apercu {
	background:#fff; padding:6px 10px; font-size:11px;
}


/* ----------------------------------------------------------
 * 9. MODAL APERÇU PDF (bouton "Voir la facture") — Lot 9b
 *    Ouvre une iframe plein écran au-dessus de la fiche membre.
 *    z-index 9000 (cohérent avec l'overlay éditeur de modèles).
 * ---------------------------------------------------------- */

.scm-pdf-modal {
	display:none;
	position:fixed; inset:0;
	background:rgba(15,18,30,0.55);
	z-index:9000;
}
.scm-pdf-modal.scm-open { display:flex; flex-direction:column; }

.scm-pdf-modal-frame {
	background:#fff; margin:24px; flex:1;
	border-radius:8px; overflow:hidden;
	display:flex; flex-direction:column;
	box-shadow:0 8px 32px rgba(0,0,0,0.25);
}

.scm-pdf-modal-header {
	display:flex; align-items:center; justify-content:space-between;
	padding:10px 16px; background:#1d1e3a; color:#fff;
}
.scm-pdf-modal-title {
	font-weight:bold; font-size:14px;
}
.scm-pdf-modal-actions {
	display:flex; align-items:center; gap:10px;
}
.scm-pdf-modal-actions .btnStd { margin:0; }
.scm-pdf-modal-close {
	cursor:pointer; font-size:28px; line-height:1;
	color:#fff; padding:0 6px; text-decoration:none;
}
.scm-pdf-modal-close:hover { color:#ffcdcd; }

#scm-pdf-modal-iframe {
	flex:1; border:0; width:100%; background:#525659;
}

/* Style ligne facture dans la card Cotisations */
.scm-facture-actions .scm-facture-num {
	display:inline-block; padding:6px 10px; margin-right:10px;
	background:#f5f5f5; border-radius:4px;
	font-family:monospace; font-size:13px; color:#1d1e3a;
}
.scm-facture-actions .btnStd { margin-right:6px; }


/* ----------------------------------------------------------
 * Fix : aligner les boutons facture sur 1 ligne (Lot 9b)
 *    Sans cette règle, .flol w80 agit comme un block et
 *    chaque <a class="btnStd"> prend toute la largeur.
 * ---------------------------------------------------------- */

.scm-facture-actions .flol.w80,
.scm-diplome-actions .flol.w80 {
	display:flex; align-items:center; gap:6px; flex-wrap:wrap;
}
.scm-facture-actions .flol.w80 .btnStd,
.scm-diplome-actions .flol.w80 .btnStd {
	margin:0; flex:0 0 auto;  /* ne s'étirent pas */
}
.scm-facture-actions .flol.w80 .scm-facture-num,
.scm-diplome-actions .flol.w80 .scm-diplome-grade {
	margin-right:4px; /* léger espace après le label */
	color:#666;
	font-size:13px;
}

/* (Lot 20.7.2 — Pas de CSS dédié pour les tabs de la fiche membre.
   On réutilise le composant partagé .scm-gd-tabs / .scm-gd-tab-btn /
   .scm-gd-tab-content défini plus haut, pour cohérence avec
   Paramètres / Grades & Diplômes / Comptabilité.) */

/* ==========================================================
 * Lot DB — Dashboard refonte 2026-05-02
 * ----------------------------------------------------------
 * Layout grille : 4 KPI cards / 2 charts / 2 listes.
 * Cards minimalistes (white bg, border-left coloré, padding 14px).
 * ========================================================== */
.scm-dashboard {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Header (titre + subtitle) */
.scm-db-header {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 2px 4px;
}
.scm-db-header__title {
	font-size: 18px;
	font-weight: 700;
	color: #1d1e3a;
	display: flex;
	align-items: center;
	gap: 8px;
}
.scm-db-header__title i { color: #2c5fb8; font-size: 16px; }
.scm-db-header__subtitle {
	font-size: 12px;
	color: #888;
	font-style: italic;
}

/* Phase 2 — Bannière config incomplète (dashboard) */
.scm-db-setup-banner {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	margin: 0 0 20px 0;
	background: linear-gradient(90deg, #eaf2ff 0%, #f6f9ff 100%);
	border: 1px solid #c8dbf5;
	border-left: 4px solid #2c5fb8;
	border-radius: 6px;
}
.scm-db-setup-banner__icon {
	font-size: 26px;
	color: #2c5fb8;
	flex-shrink: 0;
}
.scm-db-setup-banner__body {
	flex: 1;
	min-width: 0;
}
.scm-db-setup-banner__title {
	font-weight: 600;
	color: #1d1e3a;
	font-size: 14px;
	margin-bottom: 2px;
}
.scm-db-setup-banner__text {
	font-size: 12px;
	color: #444;
	line-height: 1.4;
}
.scm-db-setup-banner__cta {
	flex-shrink: 0;
	display: inline-block;
	padding: 10px 18px;
	background: #2c5fb8;
	color: #fff;
	text-decoration: none;
	border-radius: 4px;
	font-size: 13px;
	font-weight: 600;
	transition: background .15s ease;
}
.scm-db-setup-banner__cta:hover {
	background: #1d4a99;
	color: #fff;
}

.scm-db-kpi-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
}
.scm-db-kpi {
	position: relative;
	overflow: hidden;
	background: #fff;
	border-radius: 8px;
	padding: 18px 20px;
	border-left: 4px solid transparent;
	box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.scm-db-kpi__bg-icon {
	position: absolute;
	right: -8px;
	bottom: -12px;
	font-size: 72px;
	color: #f4f4f6;
	z-index: 0;
	pointer-events: none;
}
.scm-db-kpi > * { position: relative; z-index: 1; }
.scm-db-kpi--membres   { border-left-color: #3a8c5b; }
.scm-db-kpi--membres .scm-db-kpi__bg-icon  { color: rgba(58, 140, 91, 0.10); }
.scm-db-kpi--nouveaux  { border-left-color: #2c5fb8; }
.scm-db-kpi--nouveaux .scm-db-kpi__bg-icon { color: rgba(44, 95, 184, 0.10); }
.scm-db-kpi--impayes   { border-left-color: #d65b66; }
.scm-db-kpi--impayes .scm-db-kpi__bg-icon  { color: rgba(214, 91, 102, 0.10); }
.scm-db-kpi--cotis     { border-left-color: #c47a3a; }
.scm-db-kpi--cotis .scm-db-kpi__bg-icon    { color: rgba(196, 122, 58, 0.10); }
.scm-db-kpi__label {
	font-size: 11px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	font-weight: 600;
}
.scm-db-kpi__value {
	font-size: 30px;
	font-weight: 700;
	color: #1d1e3a;
	margin-top: 6px;
	line-height: 1.1;
}
.scm-db-kpi__sub {
	font-size: 11px;
	color: #888;
	margin-top: 6px;
	display: flex;
	align-items: center;
	gap: 4px;
}
.scm-db-kpi__sub i { font-size: 10px; }
.scm-db-kpi__sub--positive { color: #3a8c5b; }
.scm-db-kpi__sub--negative { color: #d65b66; }

/* Cards génériques (charts + listes) */
.scm-db-card {
	background: #fff;
	border-radius: 6px;
	padding: 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.scm-db-card__title {
	font-size: 13px;
	font-weight: 700;
	color: #1d1e3a;
	margin: 0 0 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.scm-db-card__title i { color: #888; }

.scm-db-charts-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.scm-db-charts-grid > .scm-db-card:first-child {
	grid-column: 1 / -1;   /* graphique inscriptions pleine largeur, donuts dessous */
}
.scm-db-chart {
	position: relative;   /* requis par Chart.js pour le canvas responsive */
	height: 240px;
	width: 100%;
}
.scm-db-chart--donut {
	display: flex;
	align-items: center;
	justify-content: center;
}
.scm-db-donut-overlay {
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 70%;            /* exclut la zone légende du donut Chart.js */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	gap: 2px;
}
.scm-db-donut-overlay__value {
	font-size: 28px;
	font-weight: 700;
	color: #1d1e3a;
	line-height: 1;
}
.scm-db-donut-overlay__label {
	font-size: 11px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}

.scm-db-lists-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.scm-db-empty {
	color: #aaa;
	font-size: 12px;
	text-align: center;
	padding: 16px 0;
	margin: 0;
}

/* Liste "Derniers inscrits" */
.scm-db-list-table {
	width: 100%;
	font-size: 12px;
	border-collapse: collapse;
}
.scm-db-list-table tr td {
	padding: 7px 0;
	border-bottom: 0.5px solid #eee;
}
.scm-db-list-table tr:last-child td { border-bottom: none; }
.scm-db-list-table tr td a {
	color: #1d1e3a;
	font-weight: 500;
	text-decoration: none;
}
.scm-db-list-table tr td a:hover { text-decoration: underline; }
.scm-db-list-meta { color: #888; }
.scm-db-list-right { text-align: right; }

/* Cellule pastille dans la liste "Derniers inscrits" */
.scm-db-list-pill-cell { width: 64px; }

/* Liste alertes */
.scm-db-alertes { display: flex; flex-direction: column; gap: 6px; }
.scm-db-alerte {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 6px;
	font-size: 12px;
	color: #1d1e3a;
	text-decoration: none;
	transition: background-color .15s ease;
	border-left: 3px solid transparent;
	background: #fafafb;
}
.scm-db-alerte:hover { background: #f0f0f3; }
.scm-db-alerte i:first-child { font-size: 14px; flex-shrink: 0; }
.scm-db-alerte__text { flex: 1; }
.scm-db-alerte__cta {
	font-size: 11px;
	color: #fff;
	background: #2c5fb8;
	padding: 4px 10px;
	border-radius: 12px;
	font-weight: 600;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	transition: background-color .15s ease;
}
.scm-db-alerte:hover .scm-db-alerte__cta { background: #1d4488; }
.scm-db-alerte--danger  { border-left-color: #d65b66; }
.scm-db-alerte--danger  i:first-child { color: #d65b66; }
.scm-db-alerte--danger  .scm-db-alerte__cta { background: #d65b66; }
.scm-db-alerte--danger:hover .scm-db-alerte__cta { background: #a8404a; }
.scm-db-alerte--warning { border-left-color: #c47a3a; }
.scm-db-alerte--warning i:first-child { color: #c47a3a; }
.scm-db-alerte--warning .scm-db-alerte__cta { background: #c47a3a; }
.scm-db-alerte--warning:hover .scm-db-alerte__cta { background: #94591f; }
.scm-db-alerte--info    { border-left-color: #3b6daf; }
.scm-db-alerte--info    i:first-child { color: #3b6daf; }
.scm-db-alerte--success { border-left-color: #3a8c5b; }
.scm-db-alerte--success i:first-child { color: #3a8c5b; }

/* Responsive : sur écrans étroits, on passe en colonnes empilées */
@media (max-width: 1100px) {
	.scm-db-kpi-grid    { grid-template-columns: repeat(2, 1fr); }
	.scm-db-charts-grid { grid-template-columns: 1fr; }
	.scm-db-lists-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.scm-db-kpi-grid { grid-template-columns: 1fr; }
}

/* ==========================================================
 * Lot 20.6.2 — Barre d'actions sticky en bas de la fiche membre
 * ----------------------------------------------------------
 * Le bouton "Enregistrer" et "Supprimer ce membre" restent
 * toujours visibles pendant le scroll. Plus besoin d'aller
 * chercher le bouton tout en bas après les cards Cotisations
 * / Diplômes / Paiements.
 * ========================================================== */
.scm-fiche-bottom-bar {
	position: sticky;
	bottom: 0;
	z-index: 90;
	background: #fff;
	border: 1px solid #e0e0e0;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
	padding: 12px 16px;
	margin-top: 16px;
}
.scm-fiche-bottom-bar > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.scm-fiche-bottom-bar #scm-admin-save {
	float: none;       /* surcharge le .flor du legacy : on gère par flexbox */
	margin-left: auto; /* à droite */
}
.scm-fiche-bottom-bar #scm-membre-delete {
	float: none;       /* idem .flol */
}
.scm-fiche-bottom-bar .fin { display: none; } /* clear flotté inutile en flex */


/* (section Lot 10a "Champ Discipline" supprimée :
   remplacée par un select stylé via .select-style.min.flol /
   .selectStd, donc plus besoin de surcharge dédiée.) */


/* ============================================================
 * Lot 10c — Popup de cascade "Réaffecter / Archiver"
 * Affiché quand l'admin retire une discipline qui a des grades
 * actifs. 1 popup Swal2 par discipline retirée (chaînés).
 * ============================================================ */

.scm-cascade-intro {
	font-size:13px; color:#555; line-height:1.5;
	background:#fff8e1; border-left:3px solid #f39c12;
	padding:10px 12px; margin:0 0 16px;
	border-radius:0 4px 4px 0; text-align:left;
}

.scm-cascade-grades {
	display:flex; flex-direction:column; gap:10px;
	max-height:50vh; overflow-y:auto;
	padding:2px;
}

.scm-cascade-grade-row {
	border:1px solid #e0e6ed; border-radius:6px;
	padding:10px 12px; background:#fafbfc;
	text-align:left;
}

.scm-cascade-grade-head {
	display:flex; align-items:center; gap:10px;
	margin-bottom:8px; font-size:14px; color:#2c3e50;
}
.scm-cascade-color {
	width:14px; height:14px; border-radius:50%;
	border:1px solid #d0d8e0; flex:0 0 14px;
}
.scm-cascade-niv {
	font-size:11px; color:#7f8c8d; background:#ecf0f1;
	padding:1px 6px; border-radius:10px;
}
.scm-cascade-count {
	margin-left:auto; font-size:12px; color:#7f8c8d;
	font-style:italic;
}

.scm-cascade-auto {
	font-size:12px; color:#27ae60; font-style:italic;
	padding:4px 0 0 24px;
}

.scm-cascade-choice {
	display:flex; flex-direction:column; gap:6px;
	padding:0 0 0 24px;
}
.scm-cascade-radio {
	display:flex; align-items:center; gap:8px; flex-wrap:wrap;
	cursor:pointer; font-size:13px; color:#34495e;
	padding:4px 6px; border-radius:4px;
	transition:background .15s ease;
}
.scm-cascade-radio:hover { background:#eef4f8; }
.scm-cascade-radio input[type="radio"] {
	width:14px; height:14px; cursor:pointer; flex:0 0 14px; margin:0;
}
.scm-cascade-radio small {
	color:#95a5a6; font-size:11px; margin-left:4px;
}
.scm-cascade-target {
	padding:4px 8px; border:1px solid #bdc3c7; border-radius:3px;
	font-size:12px; min-width:200px;
	background:#fff; cursor:pointer;
}


/* ============================================================
 * Lot 10d/10e — Section "Grades archivés"
 *   - Toggle "Afficher les N grades archivés" sous le tableau
 *   - Bloc dédié avec table en lecture seule
 *   - Badge "Archivé" + style ligne grisée
 *   - Groupe spécial "Disciplines retirées" pour les grades orphelins
 * ============================================================ */

.scm-archived-toggle-wrap {
	margin:14px 0 22px;
	text-align:left;
}
#btn-toggle-archived {
	background:#f5f5f5; color:#7f8c8d;
	border:1px solid #ddd; padding:6px 14px;
	font-size:12px; cursor:pointer;
	transition:all .15s ease;
	border-radius:4px;
}
#btn-toggle-archived:hover {
	background:#ebeef0; color:#34495e; border-color:#bdc3c7;
}
#btn-toggle-archived.active {
	background:#e8f4f8; color:#2c3e50; border-color:#a4c8da;
}
#btn-toggle-archived i { margin-right:6px; opacity:.8; }

#scm-archived-section {
	margin:0 0 28px;
	padding:14px 16px;
	background:#fafbfc;
	border:1px dashed #d0d8e0;
	border-radius:6px;
}
.scm-archived-title {
	font-size:14px; color:#7f8c8d;
	margin:0 0 6px; padding:0;
	font-weight:600;
}
.scm-archived-title i { margin-right:6px; opacity:.6; }
.scm-archived-help {
	font-size:11.5px; color:#95a5a6;
	margin:0 0 12px; line-height:1.5;
	font-style:italic;
}

/* Table archivés (style discret) */
.scm-archived-table { opacity:.78; }
.scm-archived-table th {
	background:#ecf0f1; color:#7f8c8d;
	font-size:11px;
}

/* Page Grades — centrage des colonnes Discipline / Code / Niveau */
.listeGrade th:nth-child(2),
.listeGrade th:nth-child(3),
.listeGrade th:nth-child(4),
.listeGrade td:nth-child(2),
.listeGrade td:nth-child(3),
.listeGrade td:nth-child(4) {
	text-align: center;
}

/* Ligne d'un grade archivé : grise et inactive d'apparence */
.scm-grade-archived-row td {
	color:#95a5a6;
}
.scm-grade-archived-row .muted {
	color:#95a5a6;
	font-style:italic;
}
.scm-grade-archived-color {
	width:18px; height:18px; border-radius:50%;
	border:2px solid #d0d8e0;
	opacity:.5; filter:grayscale(40%);
}

/* Badge "Archivé" inline à côté du nom du grade */
.scm-grade-archived-badge {
	display:inline-block;
	margin-left:8px;
	padding:1px 8px;
	font-size:10px; font-weight:600;
	color:#fff;
	background:#95a5a6;
	border-radius:10px;
	vertical-align:middle;
	letter-spacing:.3px;
	text-transform:uppercase;
}

/* En-tête de groupe (discipline) dans la table archivés */
.scm-archived-table .scm-grade-group {
	background:#eaeef2; padding:6px 12px;
	font-weight:600; font-size:11px;
	color:#7f8c8d; letter-spacing:.4px;
	border-top:1px solid #d0dce8;
}
.scm-archived-table .scm-grade-group i {
	margin-right:5px; opacity:.6;
}

/* Groupe spécial "Disciplines retirées" : couleur d'alerte douce */
.scm-archived-table .scm-grade-group-removed {
	background:#fdf3e7;
	color:#c0792b;
	border-top:2px solid #f0c184;
}
.scm-archived-table .scm-grade-group-removed i {
	color:#c0792b; opacity:.8;
}

/* Bouton "Désarchiver" (icône restore) */
.scm-grade-unarchive {
	background:transparent; border:none; cursor:pointer;
	color:#27ae60; font-size:14px;
	padding:4px 8px; border-radius:3px;
	transition:background .15s ease;
}
.scm-grade-unarchive:hover {
	background:#e8f6ee; color:#1e8449;
}


/* =====================================================================
 * PAGE PARAMÈTRES (Lot 15 — déplacé depuis l'inline <style> de
 * scm.parametres.tpl pour respecter la convention « tout dans scm.css »).
 * Tous les sélecteurs sont préfixés .scm-pg-* (sauf les 2 IDs SMTP test).
 * ===================================================================== */

/* Header paramètres généraux */
.scm-pg-header {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	padding: 20px 24px;
	margin-bottom: 20px;
	box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.scm-pg-header-title {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: #999;
	margin-bottom: 16px;
}
.scm-pg-header-fields {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
}
.scm-pg-field {
	flex: 1;
	min-width: 280px;
}
.scm-pg-field > label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #555;
	margin-bottom: 6px;
}
.scm-pg-field-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.scm-pg-field-row .inputStd {
	flex: 1;
	margin: 0;
	float: none;
}
.scm-pg-field-row .btnStd {
	margin: 0;
	float: none;
	white-space: nowrap;
}
.scm-pg-badge {
	font-size: 10px;
	font-weight: 500;
	background: #f0f0f0;
	color: #aaa;
	border-radius: 3px;
	padding: 1px 6px;
	margin-left: 6px;
	vertical-align: middle;
	text-transform: uppercase;
	letter-spacing: .5px;
}

/* ---- TABS — défini ailleurs dans ce fichier (cf. styles globaux) ---- */

/* Footer bouton */
.scm-pg-tab-footer {
	margin-top: 20px;
	padding-top: 16px;
	border-top: 1px solid #f0f0f0;
	text-align: right;
}

/* Hint */
.scm-pg-hint {
	color: #888;
	font-size: 13px;
	margin: 0 0 20px;
	line-height: 1.6;
}

/* Snippets embed */
.scm-pg-snippet-block {
	margin-top: 20px;
	border-top: 1px solid #f0f0f0;
	padding-top: 20px;
}
.scm-pg-snippet {
	margin-bottom: 20px;
}
.scm-pg-snippet-label {
	font-weight: 700;
	font-size: 13px;
	margin-bottom: 6px;
	color: #444;
}
.scm-pg-snippet p {
	color: #888;
	font-size: 12px;
	margin: 0 0 6px;
}
.scm-pg-snippet pre {
	background: #f5f5f5;
	border: 1px solid #e0e0e0;
	border-radius: 4px 4px 0 0;
	padding: 12px 14px;
	overflow: auto;
	margin: 0;
}
.scm-pg-snippet-code {
	position: relative;
}
.scm-pg-copy-btn {
	display: flex;
	align-items: center;
	gap: 5px;
	width: 100%;
	background: #eee;
	border: 1px solid #e0e0e0;
	border-top: none;
	border-radius: 0 0 4px 4px;
	padding: 5px 12px;
	font-size: 11px;
	font-weight: 600;
	color: #777;
	cursor: pointer;
	transition: background .15s, color .15s;
}
.scm-pg-copy-btn:hover {
	background: #2c3e50;
	color: #fff;
	border-color: #2c3e50;
}
.scm-pg-copy-btn.copied {
	background: #27ae60;
	color: #fff;
	border-color: #27ae60;
}
/* Lot Cosmétique Paramètres (2026-05-17) — Variante inline (à droite d'un input)
 * Pas de width:100%, pas de border-top:none, conserve le coin haut. */
.scm-pg-copy-btn--inline {
	width: auto;
	border-top: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 0 14px;
	font-size: 12px;
	height: 38px;
	line-height: 1;
	justify-content: center;
}
.scm-pg-snippet pre code {
	font-size: 12px;
	color: #333;
}
.scm-pg-snippet-info {
	background: #f9f9f9;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	padding: 12px 14px;
	font-size: 12px;
	color: #777;
	line-height: 1.8;
}
.scm-pg-snippet-info code {
	background: #eee;
	padding: 1px 5px;
	border-radius: 3px;
}

/* Checkboxes profs */
.scm-pg-checkboxes {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 32px;
	margin-bottom: 20px;
}
.scm-pg-checkbox-group {
	min-width: 200px;
}
.scm-pg-checkbox-sub {
	margin-left: 20px;
}

/* SMTP test */
.scm-pg-smtp-test {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 16px 0 8px;
	padding: 14px;
	background: #f9f9f9;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
}
.scm-pg-smtp-test .inputStd {
	flex: 1;
	margin: 0;
	float: none;
}
.scm-pg-smtp-test .btnStd {
	margin: 0;
	float: none;
	white-space: nowrap;
}
#smtp_test_result {
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}
#smtp_log {
	display: none;
	background: #1a1a2e;
	color: #00ff88;
	font-family: monospace;
	font-size: 11px;
	padding: 10px;
	border-radius: 4px;
	margin: 8px 0;
	max-height: 200px;
	overflow: auto;
}

/* Lot 16b/16c — Override des fieldsets natifs ("groove" navigateur) dans
 * l'onglet "Configuration e-mail" : bordures retirées + padding uniforme.
 * Aligne sur le pattern visuel utilisé ailleurs dans le projet
 * (cf .scm-profil-fields fieldset sur la fiche membre). */
#tab-smtp fieldset,
.scm-provider-panel fieldset {
	border: 0;
	margin: 0;
	padding: 10px 0;
	background: transparent;
}
#tab-smtp fieldset + fieldset,
.scm-provider-panel fieldset + fieldset {
	border-top: 1px solid #f0f0f0;
}

/* Lot 16b — Onglets multi-providers (1 par service d'envoi) */
.scm-provider-tabs {
	display: flex;
	gap: 0;
	border-bottom: 2px solid #e8e8e8;
	margin: 20px 0 0;
	padding: 0;
}
.scm-provider-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	margin-bottom: -2px;
	border: 2px solid transparent;
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
	background: transparent;
	color: #666;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background .12s, color .12s;
}
.scm-provider-tab:hover {
	color: #1d1e3a;
	background: #f6f8fa;
}
.scm-provider-tab.is-current {
	color: #1d1e3a;
	background: #fff;
	border-color: #e8e8e8;
	border-bottom-color: #fff;
}
/* Onglet du provider ACTIF (celui utilisé pour les vrais envois) :
   surbrillance verte + badge "Actif". Indépendant de l'onglet ouvert. */
.scm-provider-tab.is-active {
	color: #1f8a4a;
	border-color: #27ae60;
}
.scm-provider-tab.is-active.is-current {
	background: #fff;
	border-bottom-color: #fff;
	box-shadow: inset 0 -3px 0 #27ae60;
}
.scm-provider-tab__badge {
	display: none;
	background: #27ae60;
	color: #fff;
	padding: 2px 8px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.scm-provider-tab.is-active .scm-provider-tab__badge {
	display: inline-block;
}
/* Panneau (contenu d'un onglet) */
.scm-provider-panel {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-top: 0;
	border-radius: 0 0 6px 6px;
	padding: 18px 20px;
	margin-bottom: 16px;
}
.scm-provider-card__test-row {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px dashed #ececec;
}
.scm-provider-card__test-row .btnStd {
	float: none !important;
	margin: 0;
}
.scm-provider-card__test-result {
	font-size: 13px;
	font-weight: 600;
}
.scm-provider-card__test-result--ok    { color: #27ae60; }
.scm-provider-card__test-result--ko    { color: #e74c3c; }
.scm-provider-card__test-result--info  { color: #888; }
.scm-provider-card__log {
	display: none;
	background: #1a1a2e;
	color: #00ff88;
	font-family: monospace;
	font-size: 11px;
	padding: 10px;
	border-radius: 4px;
	margin: 8px 0 0;
	max-height: 180px;
	overflow: auto;
	white-space: pre-wrap;
}

/* Zone danger */
.scm-pg-danger-zone {
	border: 1px solid #fadbd8;
	border-radius: 6px;
	overflow: hidden;
}
.scm-pg-danger-header {
	background: #fadbd8;
	color: #c0392b;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	padding: 10px 16px;
}
.scm-pg-danger-body {
	padding: 16px;
}
.scm-pg-danger-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}
.scm-pg-danger-item strong {
	display: block;
	font-size: 14px;
	margin-bottom: 4px;
	color: #333;
}
.scm-pg-danger-item p {
	font-size: 12px;
	color: #888;
	margin: 0;
}

/* =====================================================================
   ESPACE MEMBRE — bloc "Mes documents" (Lot 17)
   ---------------------------------------------------------------------
   Affiché dans templates/scm.membres-compte.tpl, liste la facture
   annuelle + les reçus avec liens publics tokenisés.
===================================================================== */
.scm-mes-docs {
	margin-bottom: 12px;
}
.scm-mes-docs-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
	width: calc(100% - 200px); /* aligne avec .labelStd flol */
}
/* Espace membre — n° de licence de la saison, en lecture seule (26/09/2026) */
.scm-mes-licences-hint { font-size:12px; color:#888; margin:4px 0 0; }

.scm-mes-docs-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	background: #f8f9fa;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	font-size: 13px;
	gap: 10px;
	flex-wrap: wrap;
}
.scm-mes-docs-num {
	flex: 1 1 auto;
	color: #333;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.scm-mes-docs-num i {
	color: #2980b9;
	width: 16px;
	text-align: center;
}
.scm-mes-docs-num strong {
	color: #111;
	font-weight: 600;
}
.scm-mes-docs-date {
	color: #888;
	font-size: 12px;
	margin-left: 4px;
}
.scm-mes-docs-actions {
	display: inline-flex;
	gap: 6px;
	flex: 0 0 auto;
}
.scm-mes-docs-actions .btnStd {
	margin: 0;
}
@media (max-width: 768px) {
	.scm-mes-docs-list {
		width: 100%;
	}
	.scm-mes-docs-item {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ==========================================================
 * 1.4.0 — Section Passeport sportif dans le tab Parcours
 * ----------------------------------------------------------
 * Une ligne par discipline (Voir / Envoyer par e-mail), même
 * allure que les lignes « Mes documents » de l'espace membre.
 * ========================================================== */
.scm-passeport-note {
	color: #888;
	font-size: 13px;
	margin: 8px 0 10px;
	line-height: 1.5;
}
.scm-passeport-note i {
	color: #999;
}
.scm-passeport-list {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.scm-passeport-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	padding: 8px 12px;
	background: #f8f9fa;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	font-size: 13px;
}
.scm-passeport-disc {
	flex: 1 1 auto;
	font-weight: 600;
	color: #1f2a44;
}
.scm-passeport-disc i {
	color: #c9a227;
}
.scm-passeport-actions {
	display: inline-flex;
	gap: 6px;
	flex-shrink: 0;
}
.scm-passeport-actions .btnStd {
	float: none;
	margin: 0;
}
.scm-passeport-actions { flex-wrap: wrap; justify-content: flex-end; }
/* Lien public du passeport (27/09/2026) : texte de la fenêtre, copie de secours hors écran */
.scm-passeport-link-text { margin: 0 0 4px; font-size: 13.5px; line-height: 1.5; color: #555; }
.scm-offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }

/* ==========================================================
 * Lot 20.7.6 — Section Stages dans le tab Parcours sportif
 * ----------------------------------------------------------
 * Tableau historique des stages auxquels le membre a participé
 * + bouton "Ajouter un stage" (modale Swal). Style cohérent
 * avec la table des grades du Lot 20.7.3.
 * ========================================================== */
.scm-section-card--parcours-stages .scm-section-card__title {
	display: flex;
	align-items: center;
	gap: 8px;
}
.scm-section-card--parcours-stages .scm-section-card__title button {
	margin-left: auto;
	float: none;
}

.scm-stages-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.scm-stages-table thead th {
	background: #f6f6f8;
	color: #555;
	font-weight: 600;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	text-align: left;
	padding: 8px 10px;
	border-bottom: 1px solid #e0e0e0;
}
.scm-stages-table tbody td {
	padding: 10px;
	border-bottom: 1px solid #f0f0f2;
	vertical-align: middle;
}
.scm-stages-table tbody tr:last-child td {
	border-bottom: none;
}
.scm-stages-table .col-actions {
	width: 60px;
	text-align: right;
}

/* Pill discipline (multiple disciplines par stage = N pills inline) */
.scm-stage-pill {
	display: inline-block;
	background: #eef2f7;
	color: #2c3e50;
	border-radius: 11px;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 600;
	margin: 1px 3px 1px 0;
	white-space: nowrap;
}

/* Bouton trash de retrait participation */
.scm-stage-unenroll-btn {
	background: transparent;
	border: none;
	color: #999;
	font-size: 14px;
	cursor: pointer;
	padding: 4px 8px;
	border-radius: 4px;
	transition: background .15s, color .15s;
}
.scm-stage-unenroll-btn:hover {
	color: #d65b66;
	background: #fdf3f4;
}

/* Modale Swal d'ajout : grille disciplines */
.scm-stage-disc-grid label {
	background: #f5f5f7;
	border-radius: 4px;
	padding: 4px 10px;
	border: 1px solid transparent;
	transition: border-color .15s;
}
.scm-stage-disc-grid label:has(input:checked) {
	background: #eaf3eb;
	border-color: #3a8c5b;
}


/* ============================================================
 * STAGES — Back-office (Lot 20.7.6 V2 sous-lot A)
 * ------------------------------------------------------------
 * Page liste (rubrique 31) + page détail (rubrique 32)
 * ============================================================ */

/* ---- Page liste ---- */

.scm-stages-list-table {
	width: 100%;
}
.scm-stages-list-table th {
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: #666;
	background: #f5f5f7;
	padding: 8px 10px;
	border-bottom: 1px solid #e0e0e0;
	text-align: left;
}
.scm-stages-list-table td {
	padding: 10px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
	vertical-align: middle;
}
/* Lignes du tableau stages : on laisse le pattern .tableStd standard prendre
   la main (odd grise + hover bleu transparent), pour cohérence visuelle avec
   les autres tableaux du projet (membres, examens, etc.).
   Les règles spécifiques précédentes ont été retirées. */

.scm-stage-link {
	color: #0e3a44;
	text-decoration: none;
	font-weight: 600;
}
.scm-stage-link:hover {
	color: #1f8090;
	text-decoration: underline;
}

.scm-stages-empty {
	text-align: center;
	padding: 40px 20px;
	color: #888;
	font-size: 14px;
	background: #fafafa;
	border: 1px dashed #ddd;
	border-radius: 8px;
}

/* ---- Badges statut ---- */

.scm-stage-statut-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	white-space: nowrap;
}
.scm-stage-statut-ouvertes {
	background: #d8f0e0;
	color: #1f6e3a;
}
.scm-stage-statut-complet {
	background: #fde6c8;
	color: #b35900;
}
.scm-stage-statut-fermees {
	background: #e8e8e8;
	color: #555;
}
.scm-stage-statut-en_cours {
	background: #d6ebf6;
	color: #1f5677;
}
.scm-stage-statut-passe {
	background: #f0d8d8;
	color: #8a3535;
}

/* ---- Actions ligne ---- */

.scm-stage-action {
	display: inline-block;
	width: 28px;
	height: 28px;
	line-height: 28px;
	text-align: center;
	color: #888;
	font-size: 13px;
	cursor: pointer;
	border-radius: 4px;
	margin: 0 1px;
	transition: background .15s, color .15s;
	text-decoration: none;
}
.scm-stage-action:hover {
	background: #eaf2f3;
	color: #1f8090;
}
.scm-stage-action-delete:hover {
	background: #fdf3f4;
	color: #d65b66;
}
.scm-stage-action-toggle:hover {
	background: #fff7e0;
	color: #b08b1c;
}

/* ---- Page détail ---- */

.scm-stages-detail-header {
	margin-bottom: 18px;
}
.scm-stages-detail-back {
	display: inline-block;
	color: #888;
	font-size: 12px;
	text-decoration: none;
	margin-bottom: 4px;
}
.scm-stages-detail-back:hover {
	color: #1f8090;
}

/* Tabs */
.scm-stages-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid #e0e0e0;
	margin-bottom: 18px;
}
.scm-stages-tab {
	display: inline-block;
	padding: 10px 16px;
	color: #888;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
	text-decoration: none;
	transition: color .15s, border-color .15s;
}
.scm-stages-tab:hover {
	color: #1f8090;
}
.scm-stages-tab.active {
	color: #1f8090;
	border-bottom-color: #1f8090;
}
.scm-stages-tab-count {
	display: inline-block;
	background: #e0e8ea;
	color: #555;
	border-radius: 10px;
	padding: 1px 8px;
	font-size: 11px;
	margin-left: 4px;
}
.scm-stages-tab.active .scm-stages-tab-count {
	background: #1f8090;
	color: #fff;
}
.scm-stages-tab-content {
	display: none;
}
.scm-stages-tab-content.active {
	display: block;
}

/* Tab Infos — fieldsets */
.scm-stage-infos-block {
	border: 1px solid #e0e0e0;
	border-radius: 6px;
	padding: 14px 18px;
	margin-bottom: 14px;
	background: #fafbfb;
}
.scm-stage-infos-block legend {
	font-size: 12px;
	font-weight: 600;
	color: #1f8090;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 0 8px;
	background: #fff;
	border-radius: 3px;
}
.scm-stage-infos-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
}
.scm-stage-infos-row .form-field {
	min-width: 0;
}
.scm-stage-infos-row:has(.form-field:nth-child(2):last-child) {
	grid-template-columns: 1fr 1fr;
}
/* Inputs dans la grille d'infos (stages/examens) — width:79% du .inputStd
   global produisait des champs démesurés et un layout cassé. On force 100%
   de la colonne grid + un padding propre, sans toucher au style global. */
.scm-stage-infos-block .form-field .inputStd,
.scm-stage-infos-block .form-field input[type="text"],
.scm-stage-infos-block .form-field input[type="number"] {
	width: 100%;
	text-indent: 0;
	padding: 0 10px;
	box-sizing: border-box;
}
/* Champs date — depuis 2026-05-14 on utilise un input type="text" + flatpickr
   (classe .scm-datepicker), pattern identique à scm.membres-details pour la
   date de naissance. Rendu uniforme Chrome/Safari/Firefox.
   Largeur fixée à 200px + icône calendrier en background SVG (purement
   décorative — flatpickr s'ouvre au clic n'importe où dans l'input). */
.scm-stage-infos-block .form-field input.scm-datepicker {
	width: 200px;
	max-width: 100%;
	text-indent: 0;
	padding: 0 32px 0 10px;
	box-sizing: border-box;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>");
	background-repeat: no-repeat;
	background-position: right 10px center;
	background-size: 14px 14px;
}
.scm-stage-help {
	font-size: 11px;
	color: #888;
	margin: 6px 0 0;
	font-style: italic;
}

/* Lot V2-H L3 — Intégration Trix dans les fiches stage/examen.
   Le custom element <trix-editor> reçoit ses styles de base via trix.css
   (auto-chargé). Ici on adapte au look projet : hauteur 200px, fond input. */
.scm-trix-field trix-toolbar {
	background: #fafafa;
	border: 1px solid #ddd;
	border-bottom: none;
	border-radius: 4px 4px 0 0;
}
.scm-trix-editor {
	display: block;
	min-height: 180px;
	padding: 10px;
	border: 1px solid #ddd;
	border-radius: 0 0 4px 4px;
	background: #fff;
	font-size: 13px;
	line-height: 1.5;
	outline: none;
}
.scm-trix-editor:empty:not(:focus)::before {
	color: #aaa;
}
.scm-stage-toggle-label {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	cursor: pointer;
	font-size: 13px;
}
/* Override du reset CSS global qui cache toutes les checkboxes natives :
   ici la checkbox sert de toggle métier (Inscriptions ouvertes) sur les
   fiches stage-details et examen-details, elle doit rester visible. */
.scm-stage-toggle-label input[type="checkbox"] {
	display: inline-block !important;
	width: 16px;
	height: 16px;
	margin: 0;
	cursor: pointer;
	accent-color: #1d1e3a;
}
.scm-stage-disc-label {
	background: #f5f5f7;
	border-radius: 4px;
	padding: 4px 10px;
	border: 1px solid transparent;
	transition: border-color .15s;
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}
.scm-stage-disc-label:has(input:checked) {
	background: #d8f0eb;
	border-color: #1f8090;
}

/* Tab Participants — table */
.scm-stage-participants-table {
	width: 100%;
}
.scm-stage-participants-table th,
.scm-stage-participants-table td {
	padding: 8px 10px;
	font-size: 13px;
	border-bottom: 1px solid #f0f0f0;
}
.scm-stage-etat-pill {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 8px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
}
.scm-stage-etat-inscrit {
	background: #d8f0e0;
	color: #1f6e3a;
}
.scm-stage-etat-preinscrit {
	background: #fde6c8;
	color: #b35900;
}
.scm-stage-etat-externe {
	background: #ece1f5;
	color: #5d3b8a;
}

/* Mini-badge "externe" remplaçant le code membre dans la 1ère colonne */
.scm-stage-externe-mini-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 22px;
	background: #ece1f5;
	color: #5d3b8a;
	border-radius: 4px;
	font-size: 11px;
}
.scm-stage-externe-unenroll-btn:hover {
	color: #5d3b8a !important;
	background: #f3eafa !important;
}

/* ============================================================
 * Statut paiement — dropdown coloré
 * ============================================================ */
.scm-stage-paiement-select {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 6px;
	border: 1px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.scm-stage-paiement-select:focus {
	outline: 2px solid rgba(31,128,144,0.3);
}
.scm-stage-paiement-statut-impaye {
	background: #f0d8d8;
	color: #8a3535;
}
.scm-stage-paiement-statut-en_cours {
	background: #fde6c8;
	color: #b35900;
}
.scm-stage-paiement-statut-paye {
	background: #d8f0e0;
	color: #1f6e3a;
}
.scm-stage-paiement-statut-annule {
	background: #e8e8e8;
	color: #555;
}
.scm-stage-paiement-statut-rembourse {
	background: #d6ebf6;
	color: #1f5677;
}

/* Lot E4-B — Pill statut paiement (read-only) — réutilise les couleurs ci-dessus */
.scm-stage-paiement-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: .3px;
	line-height: 1;
}

/* Cellule actions : aligne les 2 icônes côte à côte */
.scm-stage-cell-actions {
	white-space: nowrap;
}
.scm-stage-cell-actions .scm-stage-action {
	margin: 0 3px;
}

/* Centre en-têtes ET cellules du tableau participants (surcharge .tableStd tr th/td) */
.tableStd.scm-stage-participants-table tr th,
.tableStd.scm-stage-participants-table tr td {
	text-align: center;
}

/* Lot E4-B — Pastille MEMBRE (Club / Club préinscrit / Externe) */
.scm-stage-membre-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 12px;
	border-radius: 12px;
	text-transform: uppercase;
	letter-spacing: .3px;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}
.scm-stage-membre-pill--club {
	background: #d8f0e0;
	color: #1f6e3a;
}
.scm-stage-membre-pill--club-preinscrit {
	background: #fde6c8;
	color: #b35900;
}
.scm-stage-membre-pill--externe {
	background: #ece1f5;
	color: #5d3b8a;
	cursor: default;
}
a.scm-stage-membre-pill:hover {
	filter: brightness(0.95);
}

/* Lot E4-B — Dot de couleur pour le statut paiement (colonne Montant payé) */
.scm-stage-paye-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: middle;
	background: #ccc;
}
.scm-stage-paye-dot--paye       { background: #2e8540; }
.scm-stage-paye-dot--en_cours   { background: #e07b00; }
.scm-stage-paye-dot--impaye     { background: #c44; }
.scm-stage-paye-dot--annule     { background: #888; }
.scm-stage-paye-dot--rembourse  { background: #1f5677; }

/* Lot E4-B — Cellule Tarif cliquable (inline edit), stages + examens */
.scm-stage-cell-montantdu,
.scm-exd-cell-montantdu {
	cursor: pointer;
}
.scm-stage-cell-montantdu:hover .scm-stage-cell-montantdu-display,
.scm-exd-cell-montantdu:hover .scm-exd-cell-montantdu-display {
	text-decoration: underline dotted;
	text-underline-offset: 3px;
}
.scm-stage-inline-input {
	width: 90px;
	padding: 4px 6px;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid #1f8090;
	border-radius: 4px;
	background: #fff;
	text-align: right;
}
.scm-stage-inline-input:focus {
	outline: 2px solid rgba(31, 128, 144, .3);
}

/* Modal Edit — variante "wide" pour champ email/club étendu */
.scm-pay-modal-formcell--wide {
	flex: 1 1 240px;
}

/* ============================================================
 * Lot E4-B — Modal paiement participation (stages + examens)
 * ============================================================ */
.scm-pay-modal-popup .swal2-html-container {
	margin: 0;
	padding: 0 8px;
	text-align: left;
}
.scm-pay-modal {
	display: flex;
	flex-direction: column;
	gap: 18px;
	font-size: 13px;
	color: #2a2a2a;
}
.scm-pay-modal-section {
	border: 1px solid #e3e3e3;
	border-radius: 6px;
	padding: 12px 14px;
	background: #fafafa;
}
.scm-pay-modal-label {
	display: block;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #1f8090;
	margin-bottom: 8px;
}
.scm-pay-modal-row {
	display: flex;
	gap: 8px;
	align-items: center;
}
.scm-pay-modal-row--montantdu .scm-pay-modal-input {
	max-width: 140px;
}
.scm-pay-modal-input {
	padding: 6px 10px;
	border: 1px solid #cfcfcf;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
}
.scm-pay-modal-input:focus {
	outline: 2px solid rgba(31, 128, 144, .3);
	border-color: #1f8090;
}
.scm-pay-modal-empty {
	color: #888;
	font-style: italic;
	padding: 8px 0;
}
.scm-pay-modal-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 12px;
}
.scm-pay-modal-table th {
	text-align: left;
	font-weight: 600;
	color: #555;
	padding: 6px 8px;
	border-bottom: 1px solid #ddd;
	background: #f0f0f0;
}
.scm-pay-modal-table td {
	padding: 6px 8px;
	border-bottom: 1px solid #ececec;
}
.scm-pay-modal-cell-num {
	text-align: right;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.scm-pay-modal-cell-actions {
	text-align: center;
	width: 28px;
}
.scm-pay-modal-delete {
	cursor: pointer;
	color: #c44;
	display: inline-block;
	padding: 4px;
}
.scm-pay-modal-delete:hover {
	color: #8a2222;
}
.scm-pay-modal-form {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: flex-end;
}
.scm-pay-modal-formcell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: 1 1 110px;
}
.scm-pay-modal-formcell--ref { flex: 1 1 160px; }
.scm-pay-modal-formcell--btn { flex: 0 0 auto; }
.scm-pay-modal-formlabel {
	font-size: 11px;
	color: #666;
	font-weight: 600;
}
.scm-pay-modal-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	align-items: center;
	background: #eef6f7;
	border: 1px solid #cfe3e6;
	border-radius: 6px;
	padding: 10px 14px;
}
.scm-pay-modal-summary-cell {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 80px;
}
.scm-pay-modal-summary-label {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: .4px;
	color: #1f5677;
	font-weight: 600;
}
.scm-pay-modal-summary-value {
	font-size: 14px;
	font-weight: 700;
	color: #0e3a44;
	font-variant-numeric: tabular-nums;
}
.scm-pay-modal-summary-cell--statut {
	justify-content: center;
	align-items: flex-end;
}

/* ============================================================
 * Lot V2-H L4 prep — Nettoyage style="..." inline du tpl scm.stages-details
 * ============================================================ */

/* Empty states */
.scm-stage-empty-icon {
	font-size: 32px;
	color: #cc6f6f;
	display: block;
	margin-bottom: 10px;
}
.scm-stage-empty-icon--participants {
	font-size: 28px;
	color: #bbb;
	display: block;
	margin-bottom: 8px;
}
.scm-stage-empty-back {
	margin-top: 14px;
}

/* Header titre + meta */
.scm-stage-detail-title {
	margin: 6px 0 3px;
}
.scm-stage-detail-title-icon {
	color: #1f8090;
}
.scm-stage-statut-badge--inline {
	margin-left: 8px;
	font-size: 11px;
	vertical-align: middle;
}
.scm-stage-detail-meta {
	color: #888;
	font-size: 12px;
	margin: 0;
}

/* Form rows / champs espacés */
.scm-stage-form-field--mt10,
.scm-stage-infos-row--mt10 {
	margin-top: 10px;
}

/* Barre d'actions sous le formulaire infos */
.scm-stage-infos-actions {
	text-align: right;
	margin-top: 14px;
}

/* Cellules centrées du tableau participants */
.scm-stage-cell-center {
	text-align: center;
}

/* Cellule "montant dû" du tableau participants */
.scm-stage-cell-montant {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: #0e3a44;
}

/* Marqueur "Gratuit" dans la colonne montant */
.scm-stage-payment-free-mark {
	color: #999;
	font-weight: 400;
	font-style: italic;
}

/* Tiret "—" affiché à la place du select de paiement quand montant = 0 */
.scm-stage-payment-dash {
	color: #999;
	font-size: 11px;
}

/* Cellule "date d'inscription" du tableau participants */
.scm-stage-cell-date {
	text-align: center;
	font-size: 12px;
	color: #666;
}


/* ============================================================
 * Lot I — Lien instructeur ↔ membre du club
 * ============================================================ */

.scm-prof-link-membre {
	background: #f5fbfb;
	border: 1px solid #d8eef0;
	border-left: 4px solid #1f8090;
	border-radius: 6px;
	padding: 12px 16px !important;
	margin-bottom: 14px;
}
.scm-prof-link-membre .custom-control-label {
	font-weight: 600;
	color: #0e3a44;
	cursor: pointer;
}
.scm-prof-input-locked {
	background: #f5fbfb !important;
	color: #1f8090 !important;
	font-weight: 600;
}
.scm-prof-member-results {
	margin-top: 6px;
	border: 1px solid #d8eef0;
	border-radius: 4px;
	background: #fff;
	max-height: 280px;
	overflow-y: auto;
	display: none;
}
.scm-prof-member-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.scm-prof-member-item {
	padding: 8px 12px;
	border-bottom: 1px solid #f0f5f6;
	font-size: 13px;
	cursor: pointer;
	transition: background .12s;
}
.scm-prof-member-item:last-child { border-bottom: none; }
.scm-prof-member-item:hover {
	background: #eaf6f6;
}
.scm-prof-member-code {
	display: inline-block;
	background: #1f8090;
	color: #fff;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
	font-family: 'Inconsolata', monospace;
	margin: 0 4px;
}
.scm-prof-member-email {
	color: #888;
	font-size: 11px;
	font-style: italic;
}
.scm-prof-member-loading,
.scm-prof-member-empty {
	padding: 10px 12px;
	color: #888;
	font-size: 12px;
	font-style: italic;
}
.scm-prof-member-selected {
	margin-top: 8px;
	padding: 8px 12px;
	background: #d8f0e0;
	color: #1f6e3a;
	border-radius: 4px;
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.scm-prof-member-selected .scm-prof-member-unlink {
	margin-left: auto;
	cursor: pointer;
	color: #888;
	transition: color .15s;
}
.scm-prof-member-selected .scm-prof-member-unlink:hover {
	color: #d65b66;
}

/* Modale d'ajout participants en lot */
.scm-stage-enroll-list {
	max-height: 320px;
	overflow-y: auto;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
}
.scm-stage-enroll-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 12px;
	border-bottom: 1px solid #f5f5f5;
	cursor: pointer;
	font-size: 13px;
	transition: background .12s;
}
.scm-stage-enroll-row:last-child {
	border-bottom: none;
}
.scm-stage-enroll-row:hover {
	background: #f5fbfb;
}
.scm-stage-enroll-row:has(input:checked) {
	background: #eaf6f6;
}
.scm-stage-enroll-code {
	display: inline-block;
	background: #1f8090;
	color: #fff;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 11px;
	font-weight: 600;
	font-family: 'Inconsolata', monospace;
}
.scm-stage-enroll-name {
	font-weight: 600;
	color: #333;
}
.scm-stage-enroll-email {
	margin-left: auto;
	color: #888;
	font-size: 12px;
}

/* ============================================================
 * Lot I — Section « Comptes admin / gestionnaire »
 * (page Paramètres → Gestion des accès)
 * ============================================================ */

.scm-accounts-section {
	margin-top: 30px;
	padding-top: 24px;
	border-top: 2px dashed #d8eef0;
}
.scm-accounts-block {
	margin-bottom: 28px;
	background: #fafdfd;
	border: 1px solid #e6f0f1;
	border-radius: 8px;
	padding: 18px 20px;
}
.scm-accounts-block-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 14px;
}
.scm-accounts-block-title {
	margin: 0 0 4px 0;
	font-size: 15px;
	color: #0e3a44;
}
.scm-accounts-block-sub {
	margin: 0;
	color: #888;
	font-size: 12px;
}
.scm-accounts-block-head .btnStd {
	flex-shrink: 0;
}
.scm-accounts-block-footer {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid #e6f0f1;
	text-align: left;
}
.scm-accounts-table {
	width: 100%;
	margin-top: 4px;
}
.scm-accounts-table th {
	background: #f5fbfb;
	color: #0e3a44;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 10px 12px;
}
.scm-accounts-table td {
	padding: 10px 12px;
	vertical-align: middle;
	font-size: 13px;
}
.scm-accounts-table tr.odd td {
	background: #fbfdfd;
}
.scm-accounts-table .scm-col-actions {
	text-align: right;
	white-space: nowrap;
	width: 90px;
}
.scm-accounts-table .scm-col-actions a {
	display: inline-block;
	color: #888;
	margin-left: 12px;
	font-size: 14px;
	cursor: pointer;
	transition: color .15s;
}
.scm-accounts-table .scm-col-actions a:hover {
	color: #1f8090;
}
.scm-accounts-table .scm-col-actions a.scm-del-account:hover {
	color: #d65b66;
}
.scm-accounts-table .scm-col-actions a.disabled {
	color: #ccc !important;
	cursor: not-allowed;
}
.scm-accounts-table .scm-col-actions a.disabled:hover {
	color: #ccc !important;
}

.scm-account-status {
	display: inline-block;
	padding: 2px 9px;
	border-radius: 11px;
	font-size: 11px;
	font-weight: 600;
}
.scm-account-status.active {
	background: #d8f0e0;
	color: #1f6e3a;
}
.scm-account-status.inactive {
	background: #f5e0e0;
	color: #8a3030;
}

.scm-account-linked {
	color: #1f8090;
	font-size: 12px;
	text-decoration: none;
}
.scm-account-linked:hover {
	text-decoration: underline;
}
.scm-account-linked .scm-account-code {
	display: inline-block;
	background: #1f8090;
	color: #fff;
	padding: 1px 5px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
	font-family: 'Inconsolata', monospace;
	margin-left: 2px;
}
.scm-account-no-link {
	color: #bbb;
	font-style: italic;
}

/* Modale création/édition compte admin */
.swal2-popup .scm-account-form {
	text-align: left;
	font-size: 13px;
}
.swal2-popup .scm-account-form .scm-account-row {
	margin-bottom: 12px;
}
.swal2-popup .scm-account-form .scm-account-row.two-cols {
	display: flex;
	gap: 12px;
}
.swal2-popup .scm-account-form .scm-account-row.two-cols > div {
	flex: 1;
}
.swal2-popup .scm-account-form label {
	display: block;
	margin-bottom: 4px;
	font-weight: 600;
	color: #0e3a44;
	font-size: 12px;
}
.swal2-popup .scm-account-form .help {
	font-size: 11px;
	color: #888;
	margin-top: 3px;
	display: block;
}
.swal2-popup .scm-account-form input[type="text"],
.swal2-popup .scm-account-form input[type="password"],
.swal2-popup .scm-account-form input[type="email"],
.swal2-popup .scm-account-form select {
	width: 100%;
	padding: 7px 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
	font-size: 13px;
	box-sizing: border-box;
}
.swal2-popup .scm-account-form .checkbox-row {
	display: flex;
	align-items: center;
	gap: 8px;
}
.swal2-popup .scm-account-form .scm-account-link-block {
	background: #f5fbfb;
	border: 1px solid #d8eef0;
	border-radius: 5px;
	padding: 10px 12px;
	margin-top: 6px;
	display: none;
}
.swal2-popup .scm-account-form .scm-account-link-block.visible {
	display: block;
}
.swal2-popup .scm-account-form .scm-account-link-results {
	margin-top: 6px;
	border: 1px solid #d8eef0;
	border-radius: 4px;
	background: #fff;
	max-height: 220px;
	overflow-y: auto;
	display: none;
}
.swal2-popup .scm-account-form .scm-account-link-results.visible {
	display: block;
}
.swal2-popup .scm-account-form .scm-account-link-selected {
	margin-top: 8px;
	padding: 8px 12px;
	background: #d8f0e0;
	color: #1f6e3a;
	border-radius: 4px;
	font-size: 12px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.swal2-popup .scm-account-form .scm-account-link-selected .unlink {
	margin-left: auto;
	cursor: pointer;
	color: #888;
}
.swal2-popup .scm-account-form .scm-account-link-selected .unlink:hover {
	color: #d65b66;
}


/* ============================================================
 * Lot J (2026-05-05) — Refonte Planning des cours
 * Tableau avec chips dynamiques + réservoir avec barré + compteur
 * ============================================================ */

/* ---- Tableau planning (haut) ---- */
.scm-plan-table {
	width: 100%;
	table-layout: fixed;
}
.scm-plan-table th {
	background: #f5fbfb;
	color: #0e3a44;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .4px;
	padding: 10px 8px;
	text-align: left;
}
.scm-plan-table td {
	padding: 8px;
	vertical-align: top;
	font-size: 13px;
	border-bottom: 1px solid #f0f5f6;
}
.scm-plan-table tr.odd td {
	background: #fbfdfd;
}
.scm-plan-table td.first {
	font-weight: 600;
	color: #0e3a44;
}

/* Cellule générique qui contient des chips */
.scm-plan-cell {
	min-height: 32px;
}
.scm-plan-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 4px;
}
/* Cellules techniques (cours / révision) : une puce par ligne (15/09/2026) */
.scm-plan-cell-tech .scm-plan-chips {
	flex-direction: column;
	align-items: flex-start;
}

/* Chip de base */
.scm-plan-chip {
	display: inline-flex;
	align-items: center;
	background: #fff;
	border: 1px solid #d8eef0;
	border-radius: 12px;
	padding: 3px 4px 3px 8px;
	font-size: 12px;
	color: #0e3a44;
	line-height: 1.4;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.scm-plan-chip-prof {
	background: #f5fbfb;
	border-color: #d8eef0;
}
.scm-plan-chip-tech {
	background: #fff;
}
.scm-plan-chip-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-right: 5px;
	flex-shrink: 0;
}
/* Libellé de puce : rétrécit avec ellipse pour que la croix reste toujours visible (15/09/2026) */
.scm-plan-chip-label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.scm-plan-chip-x {
	margin-left: 5px;
	width: 16px;
	height: 16px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 13px;
	color: #aaa;
	cursor: pointer;
	transition: background .12s, color .12s;
	flex-shrink: 0;
}
.scm-plan-chip-x:hover {
	background: #f5e0e0;
	color: #d65b66;
}

/* Bouton "+ Ajouter" */
.scm-plan-add-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 9px;
	border: 1px dashed #c8d8db;
	border-radius: 12px;
	font-size: 12px;
	color: #1f8090;
	cursor: pointer;
	background: transparent;
	transition: background .12s, border-color .12s;
}
.scm-plan-add-btn:hover {
	background: #eaf6f6;
	border-color: #1f8090;
}
.scm-plan-add-btn i {
	font-size: 10px;
}

/* Input qui apparaît au clic sur "+ Ajouter" */
.scm-plan-add-input-wrap {
	position: relative;
	display: block;
	margin-top: 4px;
}
.scm-plan-add-input {
	width: 100%;
	padding: 5px 8px;
	border: 1px solid #1f8090;
	border-radius: 4px;
	font-size: 12px;
	box-sizing: border-box;
	outline: none;
}
.scm-plan-add-results {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	border: 1px solid #d8eef0;
	border-radius: 4px;
	max-height: 220px;
	overflow-y: auto;
	z-index: 100;
	margin-top: 2px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.08);
}
.scm-plan-add-results.open { display: block; }
.scm-plan-add-result {
	padding: 7px 10px;
	font-size: 12px;
	cursor: pointer;
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f0f5f6;
	transition: background .1s;
}
.scm-plan-add-result:last-child { border-bottom: none; }
.scm-plan-add-result:hover { background: #eaf6f6; }
.scm-plan-add-result-grade {
	margin-left: auto;
	color: #888;
	font-size: 11px;
	font-style: italic;
}
.scm-plan-add-empty {
	padding: 10px;
	color: #888;
	font-size: 12px;
	font-style: italic;
	text-align: center;
}

/* Cellule commentaire */
.scm-plan-cell-comm a {
	display: block;
	padding: 4px 6px;
	min-height: 24px;
	cursor: pointer;
	border-radius: 4px;
	color: #444;
	font-size: 12px;
	line-height: 1.4;
	white-space: pre-wrap;
	word-break: break-word;
}
.scm-plan-cell-comm a:hover {
	background: #f5fbfb;
}
.scm-plan-comm-empty {
	color: #ccc;
	font-style: italic;
}

/* Pastilles niveaux du cours (existante mais tweaks) */
.scm-plan-table .item-color.min {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	margin: 0 2px;
	border: 1px solid rgba(0,0,0,0.1);
}

/* ---- Réservoir refondu (Lot J 2026-05-06)
 * Layout vertical Discipline > Grade > Techniques (chips wrappés).
 * Plus de tableau colonnes — scale en multi-disciplines / multi-grades. */

.scm-plan-reservoir-2 {
	margin-top: 30px;
}

/* Bloc Discipline */
.scm-plan-reservoir-disc {
	margin-bottom: 32px;
	padding: 18px 20px;
	background: #fafdfd;
	border: 1px solid #e6f0f1;
	border-radius: 8px;
}
.scm-plan-reservoir-disc-head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 16px;
	padding-bottom: 10px;
	border-bottom: 2px solid #d8eef0;
}
.scm-plan-reservoir-disc-name {
	margin: 0;
	font-size: 17px;
	color: #0e3a44;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 700;
	flex: 1;
}
.scm-plan-reservoir-disc-count {
	font-size: 14px;
	color: #1f8090;
	font-weight: 600;
	font-family: 'Inconsolata', monospace;
}
.scm-plan-reservoir-disc-count .pct {
	color: #888;
	font-size: 12px;
	font-weight: 400;
	margin-left: 4px;
}

/* Bloc Grade */
.scm-plan-reservoir-grade {
	margin-bottom: 14px;
}
.scm-plan-reservoir-grade-head {
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	padding: 6px 4px;
	border-radius: 4px;
	user-select: none;
	transition: background .12s;
}
.scm-plan-reservoir-grade-head:hover {
	background: #f5fbfb;
}
.scm-plan-reservoir-toggle {
	font-size: 11px;
	color: #888;
	transition: transform .15s;
	width: 14px;
	display: inline-flex;
	justify-content: center;
}
.scm-plan-reservoir-grade.collapsed .scm-plan-reservoir-toggle {
	transform: rotate(-90deg);
}
.scm-plan-reservoir-grade-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	border: 1px solid rgba(0,0,0,0.1);
	flex-shrink: 0;
}
.scm-plan-reservoir-grade-name {
	font-size: 13px;
	font-weight: 600;
	color: #333;
	min-width: 130px;
}
.scm-plan-reservoir-grade-bar {
	flex: 1;
	height: 8px;
	background: #eef4f5;
	border-radius: 4px;
	overflow: hidden;
	max-width: 250px;
}
.scm-plan-reservoir-grade-bar-fill {
	display: block;
	height: 100%;
	border-radius: 4px;
	transition: width .25s ease-out;
}
.scm-plan-reservoir-grade-count {
	font-size: 12px;
	color: #1f8090;
	font-weight: 600;
	font-family: 'Inconsolata', monospace;
	white-space: nowrap;
}
.scm-plan-reservoir-grade-count .pct {
	color: #888;
	font-weight: 400;
	margin-left: 3px;
}
.scm-plan-reservoir-grade-warn {
	color: #d65b66;
	font-size: 16px;
	cursor: help;
}

/* Liste des chips techniques */
.scm-plan-reservoir-grade-techs {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px 4px 4px 28px; /* indentation alignée sur le toggle */
	max-height: 1000px;
	overflow: hidden;
	transition: max-height .25s ease-out, opacity .15s, padding .15s;
}
.scm-plan-reservoir-grade.collapsed .scm-plan-reservoir-grade-techs {
	max-height: 0;
	padding-top: 0;
	padding-bottom: 0;
	opacity: 0;
}

/* Chip technique du réservoir */
.scm-plan-reservoir-tech {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 7px;
	border: 1px solid #e0e8e9;
	border-radius: 11px;
	background: #fff;
	font-size: 12px;
	color: #333;
	transition: opacity .15s, text-decoration-color .15s;
	white-space: nowrap;
}
.scm-plan-reservoir-tech-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	flex-shrink: 0;
}
.scm-plan-reservoir-tech-name {
	font-weight: 500;
}
.scm-plan-reservoir-tech.enseignee {
	opacity: 0.4;
}
.scm-plan-reservoir-tech.enseignee .scm-plan-reservoir-tech-name {
	text-decoration: line-through;
	text-decoration-color: rgba(214, 91, 102, 0.7);
	text-decoration-thickness: 1.5px;
}


/* ============================================================
 * Lot L (2026-05-06) — Section Import
 * ============================================================ */

.scm-import-duplicate {
	border-top: 2px dashed #d8eef0;
	margin-top: 30px;
	padding-top: 20px;
}
.scm-import-duplicate h2 {
	margin: 0 0 6px;
}
.scm-import-entities {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 18px;
	width: 60%;
	max-width: 600px;
}
.scm-import-entities .custom-control {
	flex: 0 0 auto;
}
.scm-dup-toggle-all {
	width: 100%;
}
.scm-link {
	color: #1f8090;
	font-size: 12px;
	cursor: pointer;
	text-decoration: none;
}
.scm-link:hover {
	text-decoration: underline;
}

/* Boutons d'action compacts table Saisons (Lot P 2026-05-06) */
.scm-saison-action {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 5px 10px;
	margin-left: 4px;
	font-size: 12px;
	color: #444;
	background: #fff;
	border: 1px solid #d8eef0;
	border-radius: 4px;
	cursor: pointer;
	transition: background .12s, border-color .12s, color .12s;
	text-decoration: none;
}
.scm-saison-action:first-child {
	margin-left: 0;
}
.scm-saison-action:hover {
	background: #eaf6f6;
	border-color: #1f8090;
	color: #1f8090;
	text-decoration: none;
}
.scm-saison-action i {
	font-size: 11px;
}
.scm-saison-action-del {
	color: #888;
}
.scm-saison-action-del:hover {
	background: #fdf2f3;
	border-color: #d65b66;
	color: #d65b66;
}
/* Action indisponible (ex. suppression d'une saison en cours ou passée).
   Le curseur et l'opacité signalent l'indisponibilité ; le title porte
   l'explication. La règle :hover annule l'effet de survol hérité. */
.scm-saison-action--off,
.scm-saison-action--off:hover {
	opacity: .4;
	cursor: not-allowed;
	background: #fff;
	border-color: #d8eef0;
	color: #888;
}

/* Wizard import (Phase 2) */
.scm-import-wizard {
	margin-bottom: 30px;
}
.scm-import-hint {
	background: #f5fbfb;
	border: 1px solid #d8eef0;
	border-left: 4px solid #1f8090;
	border-radius: 6px;
	padding: 10px 14px;
	margin: 0 0 14px;
	font-size: 12px;
}
.scm-import-hint ol {
	margin: 4px 0 6px 0;
	padding-left: 22px;
}
.scm-import-hint ol li {
	margin: 2px 0;
}
.scm-import-hint-desc {
	margin: 4px 0 0;
	color: #555;
	font-style: italic;
}

.scm-import-mode textarea,
.scm-import-mode input[type="file"] {
	box-sizing: border-box;
}
.scm-import-wizard textarea#scm-import-paste {
	width: 100%;
	min-height: 90px;
	font-family: 'Inconsolata', monospace;
	font-size: 12px;
	box-sizing: border-box;
}

.scm-import-preview-summary {
	font-size: 14px;
	margin-bottom: 12px;
	padding: 10px 14px;
	background: #f5fbfb;
	border-radius: 4px;
}
.scm-import-preview-wrap {
	max-height: 480px;
	overflow: auto;
	border: 1px solid #d8eef0;
	border-radius: 4px;
}
.scm-import-preview {
	width: 100%;
	font-size: 12px;
}
.scm-import-preview th {
	background: #f5fbfb;
	padding: 8px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	font-size: 11px;
	color: #0e3a44;
	position: sticky;
	top: 0;
	z-index: 1;
}
.scm-import-preview td {
	padding: 6px 8px;
	border-bottom: 1px solid #f0f5f6;
	vertical-align: top;
}
.scm-import-row-ok {
	background: #f4faf5;
}
.scm-import-row-ok .scm-import-col-status {
	color: #1f6e3a;
	font-weight: 700;
}
.scm-import-row-ko {
	background: #fdf2f3;
}
.scm-import-row-ko .scm-import-col-status {
	color: #d65b66;
	font-weight: 700;
}
.scm-import-col-status {
	width: 28px;
	text-align: center;
}
.scm-import-col-errors {
	color: #d65b66;
	font-size: 11px;
	font-style: italic;
	max-width: 280px;
}

/* Étape Mappage (Lot L Phase 3) */
.scm-import-mapping {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 14px;
}
.scm-import-mapping-row {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 12px;
	align-items: center;
	padding: 8px 10px;
	background: #fafdfd;
	border: 1px solid #e6f0f1;
	border-radius: 5px;
}
.scm-import-mapping-label {
	font-weight: 600;
	color: #0e3a44;
	font-size: 13px;
}
.scm-import-mapping-source select.scm-source-select {
	width: 100%;
}
.scm-import-mapping-fixed input.scm-fixed-input,
.scm-import-mapping-fixed select.scm-fixed-input {
	width: 100%;
	font-size: 12px;
}


/* ============================================================
   PARAMÈTRES GÉNÉRAUX (rubrique 33 — Lot 20.7.7 V2.D)
   ============================================================ */
.scm-pg-section {
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}
.scm-pg-section-title {
	margin: 0 0 6px;
	font-size: 15px;
	color: #1d1e3a;
}
.scm-pg-section-hint {
	margin: 0 0 16px;
	color: #777;
	font-size: 12px;
	line-height: 1.4;
}
/* Modale fuzzy match adhérent (création membre) — propose à l'admin
   de réutiliser un adhérent existant proche au lieu d'en créer un doublon. */
.scm-fuzzy-modal-intro     { text-align: left; margin: 0 0 12px; }
.scm-fuzzy-modal-list      { text-align: left; max-height: 300px; overflow-y: auto; }
.scm-fuzzy-modal-row       { display: block; margin: 6px 0; padding: 8px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; }
.scm-fuzzy-modal-row--new  { margin-top: 12px; border-color: #3498db; background: #f0f9ff; }
.scm-fuzzy-modal-meta      { color: #888; margin-left: 8px; }
.scm-fuzzy-modal-email     { color: #888; font-size: 12px; margin-left: 24px; }

/* Bloc toggle "Autoriser les inscriptions sans paiement"
   (sous-section Général → Inscription en ligne, sauvegarde AJAX directe). */
.scm-pg-allow-later-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 20px;
	padding: 16px;
	background: #f9fafb;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
}
.scm-pg-allow-later-text { flex: 1; }
.scm-pg-allow-later-title {
	font-size: 14px;
	font-weight: 600;
	color: #2c3e50;
}
.scm-pg-allow-later-hint {
	margin: 4px 0 0;
	font-size: 12px;
	color: #888;
}
/* Toggle (switch) */
.scm-pg-feature-row {
	padding: 10px 0;
	border-top: 1px solid #eee;
}
.scm-pg-feature-row:first-of-type {
	border-top: 0;
}
.scm-pg-toggle-label {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	user-select: none;
}
.scm-pg-toggle-label input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}
.scm-pg-toggle-slider {
	position: relative;
	display: inline-block;
	width: 44px;
	height: 24px;
	background: #ccc;
	border-radius: 12px;
	transition: background .2s;
	flex-shrink: 0;
}
.scm-pg-toggle-slider::before {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	background: #fff;
	border-radius: 50%;
	transition: transform .2s;
}
.scm-pg-toggle-label input:checked + .scm-pg-toggle-slider {
	background: #22c55e;
}
.scm-pg-toggle-label input:checked + .scm-pg-toggle-slider::before {
	transform: translateX(20px);
}
.scm-pg-toggle-text strong {
	display: block;
	font-size: 14px;
	color: #1d1e3a;
}
.scm-pg-toggle-text small {
	display: block;
	font-size: 12px;
	color: #888;
	margin-top: 2px;
}
/* Champs prix par défaut */
.scm-pg-price-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px 0;
}
.scm-pg-price-label {
	flex: 1;
	font-size: 13px;
	color: #1d1e3a;
}
.scm-pg-price-input {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.scm-pg-price-input input,
.scm-pg-price-input input.inputStd.min {
	max-width: 60px;
	width: 60px;
	float: none !important;
	text-align: right;
	padding-right: 4px;
}
.scm-pg-price-devise {
	font-size: 13px;
	font-weight: 600;
	color: #1d1e3a;
}
.scm-pg-actions {
	margin-top: 12px;
	text-align: right;
}
/* Bouton "Enregistrer" flottant en bas-droit pendant qu'on scrolle l'onglet
   Général. Se cache automatiquement quand on change d'onglet (le parent
   tab-general passe en display:none). */
.scm-pg-actions--floating {
	position: fixed;
	bottom: 24px;
	right: 24px;
	z-index: 100;
	margin: 0;
}
.scm-pg-actions--floating .btnStd {
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
	padding: 10px 22px;
	font-weight: 600;
}
/* Card "Module" (Stages, Examens) — entête avec titre + toggle compact à droite */
.scm-pg-module-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 4px;
}
.scm-pg-module-head .scm-pg-section-title {
	margin: 0;
}
.scm-pg-toggle-compact {
	gap: 8px;
}
/* Libellé inline du toggle (ex: "Gestion des stages") affiché à
   gauche du slider dans l'en-tête de card module. */
.scm-pg-toggle-text-inline {
	font-size: 12px;
	color: #1d1e3a;
	font-weight: 500;
	user-select: none;
}


/* ============================================================
   UTILITAIRE : .scm-hidden (Lot JS-clean 2026-05-05)
   Remplace les style="display:none" inline. Plus propre que
   l'attribut hidden HTML (qui peut être surchargé par d'autres
   règles avec une spécificité plus élevée).
   ============================================================ */
.scm-hidden { display: none !important; }

/* ============================================================
   PRÉVISUALISATION FICHIERS dans Swal (scm.global.js)
   Img : centrée, max 75vh. Iframe (PDF) : full width, 75vh.
   ============================================================ */
.scm-file-preview-img {
	max-width: 100%;
	max-height: 75vh;
	display: block;
	margin: 0 auto;
	border-radius: 6px;
}
.scm-file-preview-iframe {
	width: 100%;
	height: 75vh;
	border: 0;
	border-radius: 6px;
}

/* ============================================================
   MODALES Swal page MEMBRES (scm.membres.js)
   Lot JS-clean 2026-05-05 — sortie des styles inline du JS.
   ============================================================ */
/* Conteneur générique : zones de texte alignées à gauche */
.scm-swal-text-left { text-align: left; }
.scm-swal-help { font-size: 13px; color: #666; margin-bottom: 8px; }
.scm-swal-input-wide { width: 100%; margin: 0; }

/* Modale "Ajouter des paiements" */
.scm-paie-modal-sep {
	width: 50%;
	margin: 15px auto 10px auto;
	border: none;
	background: #e8e8e8;
	height: 1px;
}
.scm-paie-modal-count-label {
	margin: 0 0 10px;
	text-align: center;
	font-size: 12px;
	color: #666;
}
.scm-paie-modal-count-row {
	text-align: center;
	margin-bottom: 8px;
}
.scm-paie-count-btn,
.scm-paie-count-plus {
	display: inline-block;
	min-width: 32px;
	padding: 4px 10px;
	margin: 0 3px;
	background: #f0f0f0;
	color: #333;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
	line-height: 1.4;
	text-align: center;
	user-select: none;
}
.scm-paie-count-plus { background: #fff; }
.scm-paie-count-btn--active {
	background: #595959 !important;
	color: #fff !important;
}

/* Modale "Générer un lien de paiement" — labels + help text */
.scm-paie-modal-label {
	display: block;
	margin: 8px 0 4px;
	font-weight: 600;
	font-size: 13px;
}
.scm-paie-modal-amount-help {
	font-size: 11px;
	color: #888;
	margin-top: 4px;
}

/* Modale "Lien de paiement" */
.scm-link-modal-input {
	width: 100%;
	font-size: 11px;
	font-family: monospace;
}
.scm-link-modal-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}
.scm-link-modal-btn-copy  { background: #3498db; }
.scm-link-modal-btn-email { background: #27ae60; }
.scm-link-modal-btn-open  {
	background: #888;
	text-decoration: none;
	display: inline-block;
}
.swal2-styled.scm-link-modal-btn-copy,
.swal2-styled.scm-link-modal-btn-email,
.swal2-styled.scm-link-modal-btn-open { color: #fff; }

/* Modale "Nettoyage des préinscrits" */
.scm-cleanup-row {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 14px;
}
.scm-cleanup-days-input { width: 90px; margin: 0; }
.scm-cleanup-btn-search {
	background: #3498db;
	font-size: 13px;
	padding: 6px 14px;
	margin-left: 8px;
}
.scm-cleanup-results {
	max-height: 280px;
	overflow: auto;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 6px;
	display: none;
	font-size: 12px;
}
.scm-cleanup-loading { padding: 10px; color: #888; }
.scm-cleanup-error   { padding: 10px; color: #c0392b; }
.scm-cleanup-empty   { padding: 10px; color: #27ae60; }
.scm-cleanup-table {
	width: 100%;
	border-collapse: collapse;
}
.scm-cleanup-table thead tr { background: #f6f8fa; }
.scm-cleanup-table th,
.scm-cleanup-table td { padding: 4px 8px; text-align: left; }
.scm-cleanup-table th.col-num,
.scm-cleanup-table td.col-num { text-align: right; }
.scm-cleanup-table th.col-mono,
.scm-cleanup-table td.col-mono { font-family: monospace; }
.scm-cleanup-table tbody tr { border-bottom: 1px solid #f0f0f0; }
.scm-cleanup-footer {
	padding: 10px 0 4px;
	border-top: 1px solid #eee;
	margin-top: 8px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.scm-cleanup-btn-delete-all {
	background: #e74c3c;
	font-size: 13px;
	padding: 6px 14px;
}

/* "Fiche →" lien dans liste membres */
.scm-fiche-arrow {
	color: #aaa;
	font-style: italic;
	font-size: 12px;
}

/* ============================================================
   MODALE Création/édition STAGE (scm.stages.js)
   Lot JS-clean 2026-05-05 — sortie des styles inline.
   ============================================================ */
.scm-stage-modal-empty {
	color: #888;
	font-size: 12px;
	font-style: italic;
}
.scm-stage-modal-disc-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 12px;
}
.scm-stage-modal-disc-item {
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}
.scm-stage-modal-label {
	display: block;
	margin-bottom: 4px;
	color: #555;
}
.scm-stage-modal-label--top {
	display: block;
	margin: 12px 0 4px;
	color: #555;
}
.scm-stage-modal-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.scm-stage-modal-grid-2--with-margin {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-top: 10px;
}
.scm-stage-modal-grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 10px;
	margin-top: 12px;
}
.scm-stage-modal-help {
	font-size: 11px;
	color: #888;
	margin: 6px 0 10px;
}
.scm-stage-modal-help--tight {
	font-size: 11px;
	color: #888;
	margin: 4px 0 0;
}
.scm-stage-modal-toggle-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	cursor: pointer;
	margin-top: 8px;
}

/* ============================================================
   PAGE GRADES & DIPLÔMES (scm.grades.js)
   Lot JS-clean 2026-05-05 — sortie des styles inline.
   ============================================================ */
.scm-grades-empty-dash {
	color: #e74c3c;
}
/* Cellule image grade (mode "image présente") */
.scm-grade-img-cell {
	display: flex;
	align-items: center;
	gap: 6px;
}
.scm-grade-img-thumb {
	height: 32px;
	width: auto;
	object-fit: contain;
}
.scm-grade-img-action-edit {
	cursor: pointer;
	color: #3498db;
	font-size: 11px;
}
.scm-grade-img-action-upload {
	cursor: pointer;
	color: #aaa;
	font-size: 11px;
}
.scm-grade-img-action-del {
	cursor: pointer;
	color: #e74c3c;
	font-size: 11px;
}
/* Input file caché (upload de l'image grade) */
.scm-grade-img-input { display: none; }

/* Modale création modèle de diplôme */
.scm-tpl-modal-disc-readonly {
	width: 100%;
	margin-bottom: 12px;
	background: #f5f5f5;
	color: #999;
}
.scm-tpl-modal-select,
.scm-tpl-modal-input {
	width: 100%;
	margin-bottom: 12px;
}
.scm-tpl-modal-label {
	font-size: 12px;
	font-weight: 600;
	color: #555;
	display: block;
	margin-bottom: 4px;
}

/* Aperçu modèle de diplôme — image de fond + overlays */
.scm-tpl-preview-container {
	position: relative;
	width: 100%;
	max-width: 700px;
	margin: 0 auto;
}
.scm-tpl-preview-bg {
	width: 100%;
	display: block;
}
/* Texte d'aperçu d'une zone (font-size/weight gérés par modifier --main) */
.scm-tpl-preview-zone-text {
	color: #222;
	font-size: 0.75em;
	font-weight: 400;
	text-shadow: 0 1px 2px rgba(255, 255, 255, .8);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 100%;
	display: block;
	line-height: 1.2;
}
.scm-tpl-preview-zone-text--main {
	font-size: 1.1em;
	font-weight: 700;
}
/* Zone d'aperçu positionnée dynamiquement via variables CSS
   (--zx/--zy/--zw/--zh injectées en style="..." par le JS, c'est légitime). */
.scm-tpl-preview-zone {
	position: absolute;
	left: var(--zx);
	top: var(--zy);
	width: var(--zw);
	height: var(--zh);
	background: transparent;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2px 4px;
	overflow: hidden;
}

/* Modale "Ajouter une zone" */
.scm-tpl-zone-disabled-option { color: #bbb; }
.scm-tpl-zone-custom-wrap {
	display: none;
	margin-top: 10px;
}
.scm-tpl-zone-custom-input { width: 100%; }

/* ============================================================
   MODALE Comptes admin / gestionnaire (page Paramètres)
   Labels d'inputs checkbox alignés à plat (pas de marge top
   héritée des autres labels). Lot JS-clean 2026-05-05.
   ============================================================ */
.scm-account-row.checkbox-row > label { margin: 0; }


/* ============================================================
   PAGE EXAMENS (rubrique 34) — Lot 20.7.8 E2
   ============================================================ */
/* Empty state quand aucun examen */
.scm-exam-empty-state {
	text-align: center;
	padding: 40px 20px;
	color: #888;
}
.scm-exam-empty-state i {
	font-size: 32px;
	color: #bbb;
}
.scm-exam-empty-state p {
	margin-top: 12px;
}
/* Tableau liste examens */
#scm-examens-table {
	margin-top: 18px;
}
#scm-examens-table td.col-actions {
	white-space: nowrap;
}

/* ============================================================
   MODALE Création / édition d'un examen (Sweet Alert)
   Toutes les classes ci-dessous remplacent les styles inline
   présents dans scm.examens.js (Yvan : pas de CSS dans le JS).
   ============================================================ */
.scm-exam-modal {
	text-align: left;
	font-size: 13px;
}
.scm-exam-modal-row {
	margin-bottom: 10px;
}
.scm-exam-modal-label {
	display: block;
	font-weight: 600;
	color: #333;
	margin-bottom: 4px;
}
.scm-exam-modal-help {
	display: block;
	color: #888;
	margin: -4px 0 10px;
}
.scm-exam-modal-help--inline {
	color: #888;
	display: block;
	margin-bottom: 4px;
}
.scm-exam-modal input.swal2-input {
	margin: 0;
	width: 100%;
}
/* Force l'affichage des checkboxes (le CSS global SCM les masque) */
.scm-exam-modal input[type="checkbox"] {
	display: inline-block !important;
	width: 14px;
	height: 14px;
	margin: 0;
	flex-shrink: 0;
}
/* Groupe disciplines (chips inline) */
.scm-exam-modal-disc-group {
	padding: 6px 0;
}
.scm-exam-modal-disc-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 14px 6px 0;
	cursor: pointer;
}
/* Liste grades (1 ligne par grade, séparateur léger) */
.scm-exam-modal-grades-list {
	max-height: 200px;
	overflow: auto;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	padding: 6px;
}
.scm-exam-modal-grade-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-bottom: 1px solid #f0f1f5;
	cursor: pointer;
}
.scm-exam-modal-grade-row:last-child {
	border-bottom: 0;
}
.scm-exam-modal-grade-name {
	flex: 1;
}
.scm-exam-modal-grade-disc {
	color: #888;
	font-size: 11px;
	background: #f0f1f5;
	padding: 2px 6px;
	border-radius: 3px;
}
.scm-exam-modal-empty {
	color: #888;
	font-style: italic;
}
/* Message d'invite affiché quand aucune discipline n'est cochée */
.scm-exam-modal-grade-hint {
	margin: 0;
	padding: 14px 12px;
	color: #888;
	font-style: italic;
	font-size: 13px;
	text-align: center;
}
/* Section de grades regroupés par discipline (≥2 disciplines cochées) */
.scm-exam-modal-grade-section {
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 4px;
	margin-bottom: 4px;
}
.scm-exam-modal-grade-section:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.scm-exam-modal-grade-section-title {
	margin: 6px 0 4px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 600;
	color: #4b5563;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	background: #f9fafb;
	border-radius: 3px;
}
.scm-exam-modal-grade-section-empty {
	margin: 0;
	padding: 4px 12px 8px;
	color: #999;
	font-style: italic;
	font-size: 12px;
}
/* =====================================================================
 * Lot 20.7.8 — Cellule Grade en multi-discipline (liste membres)
 *   .scm-membre-grade-cards     : container cliquable (1 par membre)
 *   .scm-membre-grade-card      : mini-card par discipline pratiquée
 *   .scm-membre-grade-disc      : nom de la discipline (court)
 *   .scm-membre-grade-dot       : pastille colorée (--dot-color en inline)
 *   .scm-membre-grade-define-btn: placeholder cliquable si aucune disc
 * ===================================================================== */
.scm-membre-grade-cards {
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	padding: 2px 4px;
	border-radius: 4px;
	transition: background-color 0.12s ease;
}
.scm-membre-grade-cards:hover {
	background-color: #f1f3f7;
}
.scm-membre-grade-card {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 1.2;
	white-space: nowrap;
}
.scm-membre-grade-disc {
	color: #4b5563;
	font-weight: 500;
}
.scm-membre-grade-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--dot-color, #ccc);
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}
.scm-membre-grade-define-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 8px;
	font-size: 11px;
	color: #6b7280;
	background: #f9fafb;
	border: 1px dashed #d1d5db;
	border-radius: 4px;
}
.scm-membre-grade-define-btn:hover {
	background: #f3f4f6;
	border-color: #9ca3af;
	color: #374151;
}

/* Modale "Disciplines et grades" (Swal2) */
.scm-mb-grade-modal {
	text-align: left;
}
.scm-mb-grade-modal-help {
	margin: 0 0 12px;
	font-size: 13px;
	color: #6b7280;
}
.scm-mb-grade-modal-disc-block {
	padding: 8px 0;
	border-bottom: 1px solid #f0f1f5;
}
.scm-mb-grade-modal-disc-block:last-child {
	border-bottom: 0;
}
.scm-mb-grade-modal-check {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	margin-bottom: 6px;
}
.scm-mb-grade-modal-check input[type="checkbox"] {
	cursor: pointer;
}
/* Override du reset global "input[type=checkbox] { display:none }" du projet
   (les checkboxes natives sont masquées partout car remplacées par des
   custom-control bootstrap, sauf exceptions). On force l'affichage ici. */
.scm-mb-grade-modal-check input[type="checkbox"].scm-mb-grade-disc-cb {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0;
}

/* =====================================================================
 * Lot 20.7.8 — Fiche membre : élargissement des selects Grade
 *   Le wrapper .select-style.min contraint à ~52px et tronque le nom
 *   du grade (ex: "Ceintur" au lieu de "Ceinture blanche"). On force
 *   une largeur min adaptative dans le bloc grade de la fiche.
 * ===================================================================== */
#membre-grades-form .select-style {
	min-width: 240px;
	width: auto;
	max-width: 100%;
}
#membre-grades-form .selectStd {
	width: 100%;
}
/* Sous-titre discipline au-dessus du select (mode multi-disc).
   Le tpl utilise du style inline — on garde mais on s'assure que
   le bloc est bien alignable à 100% de sa colonne. */
#membre-grades-form .membre-grade-form-group {
	margin-bottom: 10px;
	max-width: 100%;
}
/* Alignement du select État sur la largeur des selects Grade (240px)
   pour cohérence visuelle. :has() est supporté par tous les navigateurs
   modernes (Chrome 105+, Firefox 121+, Safari 15.4+). */
.select-style:has(> #scm-etat) {
	width: 240px;
	max-width: 100%;
}
#scm-etat {
	width: 100%;
}
.scm-mb-grade-modal-select-wrap {
	padding-left: 24px;
}
.scm-mb-grade-modal-select-wrap select {
	width: 100%;
}

/* Grille 2 colonnes pour Tarif membre/externe */
.scm-exam-modal-prix-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 10px;
}
/* Toggle inscription_active */
.scm-exam-modal-toggle-row {
	margin-top: 8px;
}
.scm-exam-modal-toggle-row label {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
}
/* Grille pour les cards Modules (Stages + Examens) côte à côte.
   Sur petits écrans, on retombe en colonne via flex-wrap. */
.scm-pg-modules-grid {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.scm-pg-modules-grid > .scm-pg-section--module {
	flex: 1 1 320px;
	margin-bottom: 0;
}
/* Ligne licence (input large + bouton à droite) */
.scm-pg-licence-row {
	display: flex;
	gap: 10px;
	align-items: center;
}
.scm-pg-licence-row input {
	flex: 1;
	min-width: 0;
	float: none !important;
}
/* Lien "Créer un compte" affiché à côté du badge dans les cards Stripe / PayPal.
   Discret par défaut, plus visible au hover. */
.scm-pay-signup-link {
	font-size: 11px;
	color: #6b7280;
	text-decoration: none;
	margin-left: 8px;
	padding: 3px 8px;
	border-radius: 4px;
	border: 1px dashed #d1d5db;
	transition: all .15s;
	white-space: nowrap;
}
.scm-pay-signup-link:hover {
	color: #2563eb;
	border-color: #2563eb;
	background: #eff6ff;
}
.scm-pay-signup-link strong {
	font-weight: 600;
}

/* ============================================================
   MODALES PAGE INSTRUCTEURS (scm.profs.js)
   Lot JS-clean 2026-05-05 — sortie des styles inline.
   ============================================================ */
/* Conteneur de la liste de checkboxes (modale "Ajouter une discipline") */
.scm-profs-disc-list {
	text-align: left;
	padding: 0 4px;
}
/* Ligne d'un choix discipline (checkbox + label) */
.scm-profs-disc-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
}
.scm-profs-disc-row:last-child { border-bottom: none; }
.scm-profs-disc-cb {
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.scm-profs-disc-cb-label {
	cursor: pointer;
	font-size: 14px;
	margin: 0;
}
/* Hint sous le formulaire grade par discipline */
.scm-profs-grades-hint {
	color: #bbb;
	font-style: italic;
	font-size: 12px;
	margin: 4px 0 0;
}
/* Pastille de niveau — couleur dynamique via variable CSS.
   Le JS écrit style="--dot-color:#xxxxxx" sur l'élément, le CSS
   consomme la variable (legitimate dynamic value, pas du CSS inline). */
.cours-niveau-dot { background: var(--dot-color, #ccc); }

/* ============================================================
   MODALES PAGE TARIFS (scm.tarifs.js)
   Lot JS-clean 2026-05-05 — sortie des styles inline et FR.
   ============================================================ */
/* Modale "Ajouter une discipline" — réutilise le même layout que
   la modale profs (mêmes classes, dupliquées avec préfixe -tarifs). */
.scm-tarifs-disc-list {
	text-align: left;
	padding: 0 4px;
}
.scm-tarifs-disc-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
}
.scm-tarifs-disc-row:last-child { border-bottom: none; }
.scm-tarifs-disc-cb {
	width: 16px;
	height: 16px;
	cursor: pointer;
}
.scm-tarifs-disc-cb-label {
	cursor: pointer;
	font-size: 14px;
	margin: 0;
}

/* ============================================================
   MODALE Abonnement mensuel (Stripe / PayPal) — scm.tarifs.js
   ============================================================ */
.scm-tarifs-sub {
	text-align: left;
	font-size: 13px;
}
.scm-tarifs-sub-label {
	display: block;
	margin: 8px 0 4px;
	font-weight: 600;
}
.scm-tarifs-sub-amount-row {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.scm-tarifs-sub-amount-input {
	width: 120px;
	margin: 0;
}
.scm-tarifs-sub-amount-suffix { color: #888; }
.scm-tarifs-sub-section {
	border-top: 1px solid #eee;
	margin-top: 14px;
	padding-top: 10px;
}
.scm-tarifs-sub-provider {
	font-weight: 600;
	margin-bottom: 6px;
}
.scm-tarifs-sub-provider--stripe { color: #635bff; }
.scm-tarifs-sub-provider--paypal { color: #0070ba; }
.scm-tarifs-sub-help {
	display: block;
	margin: 4px 0;
	font-size: 12px;
	color: #666;
}
.scm-tarifs-sub-help--mt6 {
	display: block;
	margin: 6px 0 4px;
	font-size: 12px;
	color: #666;
}
.scm-tarifs-sub-input-mono {
	width: 100%;
	margin: 0;
	font-family: monospace;
	font-size: 12px;
}
.scm-tarifs-sub-create-btn {
	margin-top: 6px;
	font-size: 12px;
	padding: 6px 12px;
	color: #fff;
}
.scm-tarifs-sub-create-btn--stripe { background: #635bff; }
.scm-tarifs-sub-create-btn--paypal { background: #0070ba; }

/* 1.3 — Statut inline de la modale « Abonnement mensuel » (créations
   Stripe/PayPal). Un toast Swal fermerait la modale (une seule boîte
   SweetAlert2 à la fois) et « Enregistrer » deviendrait inatteignable :
   les identifiants créés n'étaient jamais persistés. */
.scm-tarifs-sub-status {
	display: none;
	margin-top: 10px;
	padding: 8px 10px;
	border-radius: 4px;
	font-size: 13px;
	text-align: left;
}
.scm-tarifs-sub-status--ok {
	display: block;
	background: #eafaf1;
	border: 1px solid #a9dfbf;
	color: #1e8449;
}
.scm-tarifs-sub-status--err {
	display: block;
	background: #fdecea;
	border: 1px solid #f5c6c6;
	color: #c0392b;
}

/* 1.3 — Modale « Abonnement mensuel » : choix du type (borné / sans limite)
   + select du dernier mois prélevé. */
/* Cartes de type : l'active est encadrée/teintée, l'inactive reste visible
   mais atténuée — cliquer n'importe où sur une carte la sélectionne. */
.scm-tarifs-sub-typecard {
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	padding: 10px 12px;
	margin-top: 8px;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s, background .15s, opacity .15s;
	opacity: .55;
}
.scm-tarifs-sub-typecard--active {
	border-color: #2f6fe0;
	background: #f7faff;
	opacity: 1;
}
.scm-tarifs-sub-typecard-head {
	display: block;
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}
.scm-tarifs-sub-typecard-head input {
	margin-right: 7px;
}
.scm-tarifs-sub-typecard-desc {
	margin: 4px 0 6px 23px;
	font-size: 12px;
	color: #666;
	line-height: 1.35;
}
.scm-tarifs-sub-borne-row {
	margin: 4px 0 4px 23px;
	text-align: left;
}
.scm-tarifs-sub-mois-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 4px;
	margin-top: 6px;
}
.scm-tarifs-sub-mois-btn {
	padding: 6px 4px;
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background: #fff;
	color: #444;
	font-size: 12px;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.scm-tarifs-sub-mois-btn:hover {
	border-color: #3085d6;
}
.scm-tarifs-sub-mois-btn--eos {
	grid-column: 1 / -1;
	font-weight: 600;
}
.scm-tarifs-sub-mois-btn--active {
	background: #3085d6;
	border-color: #3085d6;
	color: #fff;
	font-weight: 600;
}

/* 1.3 — Page publique d'inscription : détail du mode « abonnement mensuel
   borné » (n mensualités × montant) sous le libellé du radio. */
.scm-mensuel-detail {
	display: block;
	margin: 2px 0 0 22px;
	font-size: 12px;
	color: #666;
}

/* ============================================================
   PAGE PARAMÈTRES MEMBRES (scm.membres-params.js)
   Lot JS-clean 2026-05-05 — sortie des styles inline générés
   par le JS et harmonisation des layouts.
   ============================================================ */
/* Cellule "poignée vide" pour les champs fixes (sans drag handle) */
.scm-mp-handle-spacer {
	display: inline-block;
	width: 20px;
}
/* Cellules de la ligne champ (carte sortable horizontale) */
.scm-mp-row-handle {
	width: 20px;
	flex-shrink: 0;
}
.scm-mp-row-type {
	width: 70px;
	flex-shrink: 0;
}
.scm-mp-row-label {
	flex: 1;
	font-weight: 600;
	font-size: 13px;
}
.scm-mp-row-toggle {
	text-align: center;
	flex-shrink: 0;
}
.scm-mp-row-toggle--online   { width: 80px; }
.scm-mp-row-toggle--required { width: 90px; }
.scm-mp-row-toggle--editable { width: 130px; }
.scm-mp-row-actions {
	width: 80px;
	text-align: center;
	flex-shrink: 0;
	white-space: nowrap;
}
/* Bouton icône sans bordure ni background (édition libellé, choix, suppr.) */
.scm-mp-icon-btn {
	width: 24px;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.scm-mp-icon-btn--pen  i { color: #3498db; }
.scm-mp-icon-btn--list i { color: #e67e22; }
.scm-mp-icon-btn--del  i { color: #e74c3c; }
.scm-mp-icon-btn-spacer {
	display: inline-block;
	width: 24px;
}
/* Cellule contenant le cadenas pour les champs fixes */
.scm-mp-lock-cell {
	display: inline-block;
	width: 24px;
	text-align: center;
}
/* Indicateurs d'état dans la liste online (onglet formulaire) */
.scm-mp-flag-required { color: #e74c3c; font-weight: 600; }
.scm-mp-flag-optional { color: #aaa; }
.scm-mp-flag-editable { color: #27ae60; }
.scm-mp-flag-readonly { color: #aaa; }

/* Texte d'introduction de la modale overrides (text-align gauche) */
.scm-mp-overrides-text {
	text-align: left;
	line-height: 1.5;
}

/* Icône bleue dans le titre de la modale d'aperçu */
.scm-mp-preview-icon { color: #3498db; }

/* Affichage flex pour la modale d'aperçu (toggle via classes) */
.scm-mp-modal-open { display: flex !important; }

/* Modale "Éditer les choix" — lignes input + bouton supprimer */
.scm-mp-choice-row {
	display: flex;
	gap: 6px;
	margin-bottom: 5px;
}
.scm-mp-choice-input {
	margin: 0;
	flex: 1;
}
.scm-mp-choice-del-btn {
	background: #e74c3c;
	border: none;
	color: #fff;
	border-radius: 4px;
	padding: 0 8px;
	cursor: pointer;
}
.scm-mp-choice-add-btn {
	background: #3498db;
	border: none;
	color: #fff;
	border-radius: 4px;
	padding: 5px 12px;
	cursor: pointer;
	font-size: 12px;
}

/* Couleur danger pour les warnings dans les confirmations */
.scm-mp-danger { color: #c0392b; }

/* ============================================================
   PAGE TECHNIQUES (scm.techniques.js)
   Lot JS-clean 2026-05-05 — sortie des styles inline et FR.
   ============================================================ */
/* Barre d'actions groupées (sélection multiple) — toggle via classe */
.scm-tec-bulk-bar-open { display: flex !important; }
/* Pastille couleur de la technique (mode "swatch") — couleur dynamique
   via variable CSS --tech-color (le JS écrit style="--tech-color:#xxx"). */
.scm-tec-color-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--tech-color, #ccc);
	flex-shrink: 0;
}
/* En-tête modale grade/discipline : icône couleur + nom technique tronqué */
.scm-tec-modal-header {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: 0 0 12px;
}
.scm-tec-modal-techname {
	font-size: 14px;
	font-weight: 600;
	color: #2c3e50;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 280px;
}
.scm-tec-modal-hint {
	font-size: 13px;
	color: #888;
	margin: 0 0 10px;
}
.scm-tec-modal-grade-select { margin-top: 10px; }
/* Style cliquable pour les selects popup (.editable-item-select, etc.) */
.scm-tec-editable-cursor {
	cursor: pointer;
	border-bottom: 1px dashed #27ae60;
}
.scm-tec-editable-cursor:hover { background: #eafaf1; }
/* Coloration du pastille .item-color (legacy) via variable CSS */
.item-color { background: var(--item-color, #ccc); }

/* ============================================================
   MODALES PAGE DÉTAIL STAGE (scm.stages-details.js)
   Lot JS-clean 2026-05-05 — sortie des styles inline.
   ============================================================ */
.scm-sd-modal {
	text-align: left;
	font-size: 13px;
}
.scm-sd-modal-intro {
	color: #666;
	margin: 0 0 8px;
}
.scm-sd-modal-intro--lg { margin: 0 0 12px; }
.scm-sd-list-empty {
	color: #888;
	font-style: italic;
	text-align: center;
	padding: 14px;
}
.scm-sd-search-input {
	width: 100%;
	margin: 0 0 8px;
}
.scm-sd-link-row {
	margin-bottom: 6px;
	font-size: 11px;
}
.scm-sd-link-action {
	cursor: pointer;
	text-decoration: underline;
}
.scm-sd-link-action--select { color: #1f8090; }
.scm-sd-link-action--clear  { color: #888; }
.scm-sd-input-full {
	width: 100%;
	margin: 0;
}

/* ============================================================
   MODALES PAGE DÉTAILS MEMBRE (scm.membres-details.js)
   Lot JS-clean 2026-05-05 — sortie des styles inline.
   ============================================================ */
/* Wrapper texte de la modale (text-align gauche standard) */
.scm-md-modal       { text-align: left; }
.scm-md-modal-sm    { text-align: left; font-size: 13px; }
.scm-md-modal-grey  { text-align: left; font-size: 13px; color: #555; margin-bottom: 10px; }
.scm-md-modal-margin-top { text-align: left; margin-top: 8px; }
/* Inputs SweetAlert dans la modale */
.scm-md-input-full  { width: 100%; margin: 0; }
.scm-md-input-full-bb { margin: 0; width: 100%; box-sizing: border-box; }
.scm-md-input-95    { width: 95%; }
.scm-md-input-90    { width: 90%; }
.scm-md-textarea-90 { width: 90%; height: 60px; }
.scm-md-input-mono  { width: 100%; font-size: 11px; font-family: monospace; }
/* Labels (3 variantes selon contexte) */
.scm-md-label              { display: block; margin: 12px 0 4px; font-weight: 600; font-size: 13px; }
.scm-md-label--first       { display: block; margin: 8px 0 4px; font-weight: 600; font-size: 13px; }
.scm-md-label-bold         { display: block; font-weight: 600; margin-top: 8px; }
.scm-md-label-light        { display: block; margin-bottom: 4px; color: #555; }
.scm-md-label-light--top   { display: block; margin: 10px 0 4px; color: #555; }
.scm-md-label-italic       { display: block; margin: 14px 0 4px; color: #555; font-style: italic; }
/* Suffixe "(optionnel)" à droite d'un label */
.scm-md-optional-label { color: #888; font-weight: 400; font-size: 12px; }
/* Hint discret sous un champ */
.scm-md-help-hint { font-size: 11px; color: #888; margin-top: 4px; }
.scm-md-help-grey { font-size: 13px; color: #666; margin-bottom: 8px; }
/* Toggle row (radio + label en flex) */
.scm-md-toggle-row {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	cursor: pointer;
}
.scm-md-toggle-label-only {
	font-weight: 600;
	margin-bottom: 8px;
}
/* Grilles 1fr 1fr / 140px 1fr */
.scm-md-grid-2  { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.scm-md-grid-2-fixed { display: grid; grid-template-columns: 140px 1fr; gap: 6px 12px; }
/* Empty discipline state */
.scm-md-disc-empty { color: #888; font-size: 12px; }
/* Discipline grid (modale création stage) */
.scm-md-disc-grid { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.scm-md-disc-row {
	font-size: 13px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	cursor: pointer;
}
/* Section "mode" radio choices : wrap radio + content */
.scm-md-radio-section { margin-bottom: 12px; }
.scm-md-radio-content { margin-top: 6px; padding-left: 22px; }
.scm-md-radio-content--collapsed { margin-top: 6px; padding-left: 22px; display: none; }
.scm-md-radio-content--first     { margin-top: 6px; }
/* Référence monospace pour ID */
.scm-md-ref-mono { font-family: monospace; font-size: 11px; word-break: break-all; }
/* Modale "Lien de paiement prêt" — actions row */
.scm-md-link-actions {
	display: flex;
	gap: 8px;
	margin-top: 10px;
}
.scm-md-link-btn--copy   { background: #3498db; }
.scm-md-link-btn--email  { background: #27ae60; }
.scm-md-link-btn--open   { background: #888; text-decoration: none; display: inline-block; }
.scm-md-link-btn--sent   { background: #27ae60; }
/* Photo membre — fallback img insérée par JS */
.scm-md-profil-img {
	width: 110px;
	height: 141px;
	object-fit: cover;
	border-radius: 8px;
	border: 2px solid #e0e0e0;
}

/* ============================================================
   PETITS FICHIERS JS (dashboard / import / cours / club / modèles
   editor / comptabilité) — Lot JS-clean 2026-05-05.
   ============================================================ */
/* dashboard — empty state */
.scm-db-empty {
	text-align: center;
	padding: 40px 0;
	color: #aaa;
}
/* import — couleurs valid/invalid */
.scm-imp-valid   { color: #1f6e3a; }
.scm-imp-invalid { color: #d65b66; }
.scm-imp-recap-list {
	text-align: left;
	display: inline-block;
	margin: 10px 0;
}
/* compta-params — pastille placeholder */
.scm-cp-placeholder { color: #ccc; }
/* cours — modale grades par discipline */
.scm-cours-grade-disc-header {
	font-size: 11px;
	color: #888;
	text-transform: uppercase;
	letter-spacing: .5px;
	padding: 8px 0 4px;
	font-weight: 600;
}
.scm-cours-grade-row {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 5px 0;
	border-bottom: 1px solid #f5f5f5;
}
.scm-cours-grade-cb {
	width: 15px;
	height: 15px;
	cursor: pointer;
}
.scm-cours-grade-cb-label {
	cursor: pointer;
	font-size: 13px;
	margin: 0;
	display: flex;
	align-items: center;
}
.scm-cours-grade-list {
	text-align: left;
	padding: 0 4px;
	max-height: 300px;
	overflow-y: auto;
}
.scm-cours-name-title {
	font-size: 14px;
	font-weight: 600;
	color: #2c3e50;
	margin: 0 0 12px;
}
/* club — input désactivé (mono-discipline) */
.scm-club-disabled-input {
	background: #f5f5f5;
	color: #999;
}
/* modeles-editor — champs et popover */
.scm-mod-field--inline {
	display: flex;
	align-items: center;
	gap: 10px;
}
.scm-mod-field--compact {
	display: flex;
	align-items: center;
	gap: 8px;
}
.scm-mod-field--inline > label {
	flex: 1;
	margin: 0;
}
.scm-mod-field-label-cb {
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	font-weight: normal;
	font-size: 12px;
	color: #333;
}
.scm-mod-row-input { width: 35%; }
.scm-mod-popover-label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	color: #666;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	font-weight: bold;
}
/* planning — pastille couleur grade via variable CSS */
.scm-plan-chip-dot { background: var(--chip-color, #ccc); }
/* import — couleur cellule recap (legacy spans) */
.scm-imp-recap-error { color: #d65b66; }

/* ============================================================
 * Sidebar gauche — bloc info sous le logo SCM
 * (Sidebar CLAIR donc texte SOMBRE pour contraste)
 * Ligne 1 : SCM vX.Y.Z + état MAJ (compacte)
 * Ligne 2 : ADHÉRENTS x/y + jauge + état licence
 * Rendu par modules/scm.top.mod.php
 * ============================================================ */

.scm-sidebar-info {
	margin: 0 8px 6px 8px;
	padding: 2px 4px 4px 4px;
	font-size: 12px;
	text-align: center;
	border-bottom: 1px solid rgba(0,0,0,0.08);
}

/* ---- Ligne 1 : version + état MAJ ---- */
.scm-sidebar-info-l1 {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 6px;
	line-height: 1.3;
}
.scm-sidebar-info-app {
	color: #222;
	font-weight: 700;
	letter-spacing: 0.2px;
	font-size: 12px;
}
.scm-sidebar-info-ok {
	color: #1f7a32;
	font-size: 11px;
	font-weight: 600;
	white-space: nowrap;
}
.scm-sidebar-info-btn {
	display: inline-block;
	padding: 1px 8px;
	border-radius: 10px;
	background: #ff9500;
	color: #fff !important;
	text-decoration: none !important;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.2px;
	white-space: nowrap;
}
.scm-sidebar-info-btn:hover { background: #e88600; }
.scm-sidebar-info-btn--critical {
	background: #d32f2f;
	animation: scm-version-pulse 2s ease-in-out infinite;
}
.scm-sidebar-info-btn--critical:hover { background: #b71c1c; }
.scm-sidebar-info-btn--db {
	background: #fbc02d;
	color: #333 !important;
}
.scm-sidebar-info-btn--db:hover { background: #f9a825; color: #333 !important; }

@keyframes scm-version-pulse {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.7; }
}

/* ---- Ligne 2+ : encart licence ---- */
.scm-sidebar-info-licence {
	display: block;
	margin-top: 4px;
	padding: 4px 4px 2px 4px;
	text-decoration: none !important;
	color: inherit !important;
	border-radius: 4px;
	transition: background 0.15s ease;
}
.scm-sidebar-info-licence:hover {
	background: rgba(0,0,0,0.04);
}

.scm-sidebar-info-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 0 4px;
}
.scm-sidebar-info-lbl {
	font-size: 10px;
	color: #555;
	text-transform: uppercase;
	letter-spacing: 0.6px;
	font-weight: 700;
}
.scm-sidebar-info-count {
	color: #444;
	font-size: 13px;
	font-weight: 600;
}
.scm-sidebar-info-count strong {
	color: #111;
	font-size: 15px;
	font-weight: 800;
}
.scm-sidebar-info-sep {
	color: #999;
	margin: 0 2px;
}

/* Jauge */
.scm-sidebar-info-gauge {
	height: 5px;
	background: rgba(0,0,0,0.08);
	border-radius: 3px;
	overflow: hidden;
	margin: 4px 4px;
}
.scm-sidebar-info-gauge-bar {
	height: 100%;
	width: var(--gauge-pct, 0%);
	border-radius: 3px;
	transition: width 0.4s ease;
}
.scm-sidebar-info-gauge-bar--ok    { background: #2a8a3e; }
.scm-sidebar-info-gauge-bar--warn  { background: #d9920c; }
.scm-sidebar-info-gauge-bar--over  { background: #b71c1c; }

/* =====================================================================
 * Barre de progression — réinitialisation par lots des mots de passe
 * (page membres-params). La largeur est une valeur DYNAMIQUE : elle passe
 * par la variable CSS --scm-mp-rp-pct écrite depuis scm.membres-params.js
 * (conforme à la règle « pas de style inline » : on écrit la variable,
 * la classe consomme la variable).
 * ===================================================================== */
.scm-mp-rp-bar {
	height: 10px;
	background: rgba(0,0,0,0.08);
	border-radius: 5px;
	overflow: hidden;
	margin: 6px 0 12px;
}
.scm-mp-rp-fill {
	height: 100%;
	width: var(--scm-mp-rp-pct, 0%);
	background: var(--col-set-bar, #d63b46);
	border-radius: 5px;
	transition: width 0.35s ease;
}
.scm-mp-rp-label {
	font-size: 13px;
	color: #555;
	text-align: center;
}

/* Sub-ligne (état lisible client) */
.scm-sidebar-info-sub {
	font-size: 11px;
	color: #555;
	margin-top: 1px;
	padding: 0 4px;
	line-height: 1.35;
}
.scm-sidebar-info-sub--licenced { color: #444; }
.scm-sidebar-info-sub--free,
.scm-sidebar-info-sub--no_key  { color: #777; font-style: italic; }
.scm-sidebar-info-sub--grace   { color: #b56a00; font-weight: 600; }
.scm-sidebar-info-sub--expired { color: #b71c1c; font-weight: 600; }
/* v1.2.0 — hub injoignable (dès le 1er ping raté, prime sur licenced/grace) */
.scm-sidebar-info-sub--huberr  { color: #b56a00; font-weight: 600; }
.scm-sidebar-info-sub--grace.scm-sidebar-info-sub--huberr { color: #b71c1c; }

/* ============================================================
 * Lot 22 — Card "Mises à jour" (onglet Paramètres → Général)
 * Fusionnée avec la card "Clé d'activation" en layout 2 colonnes.
 * ============================================================ */

/* Layout 2 colonnes (clé activation | mises à jour) */
.scm-pg-row-2col {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 24px;
}
.scm-pg-section--col {
	flex: 1 1 320px;
	min-width: 0;
	margin-bottom: 0 !important;   /* annule la marge bottom du .scm-pg-section parent */
}

/* Lot Cosmétique Paramètres (2026-05-17) — Cards "equal" : alignement
 * vertical du bouton du bas entre les 2 cards de la rangée. */
.scm-pg-section--equal {
	display: flex;
	flex-direction: column;
}
.scm-pg-section--equal .scm-pg-section-body {
	flex: 1 1 auto;
}

/* Header card Mises à jour : titre à gauche, version+date à droite */
.scm-upd-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}
.scm-upd-head-title {
	margin: 0;
	flex: 0 0 auto;
}
.scm-upd-head-status {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	text-align: right;
}
.scm-upd-head-status .scm-upd-compact-meta {
	margin: 0;
}

/* Card compacte */
.scm-upd-compact {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.scm-upd-compact-status {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}
.scm-upd-compact-ver {
	font-weight: 600;
	color: #555;
}
.scm-upd-compact-tag {
	font-size: 12px;
	font-weight: 600;
	padding: 2px 8px;
	border-radius: 12px;
}
.scm-upd-compact-tag--ok   { background: #c8e6c9; color: #1b5e20; }
.scm-upd-compact-tag--upd  { background: #ffe0b2; color: #bf6000; }
.scm-upd-compact-tag--crit { background: #ffcdd2; color: #b71c1c; animation: scm-version-pulse 2s ease-in-out infinite; }
.scm-upd-compact-tag--db   { background: #fff9c4; color: #856404; }

.scm-upd-compact-meta {
	font-size: 12px;
	color: #888;
}

.scm-upd-compact-alert {
	padding: 8px 12px;
	border-radius: 4px;
	font-size: 13px;
	border-left: 3px solid #ccc;
}
.scm-upd-compact-alert--db {
	background: #fffde7;
	border-left-color: #fbc02d;
	color: #5d4e00;
}
.scm-upd-compact-alert--available {
	background: #fff5e6;
	border-left-color: #ff9500;
	color: #7a4500;
}
.scm-upd-compact-alert--critical {
	background: #ffebee;
	border-left-color: #d32f2f;
	color: #7a1f1f;
}

.scm-upd-compact-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 4px;
}
.scm-upd-compact-actions .btnStd { margin: 0; }

.scm-upd-history-link {
	color: #888;
	text-decoration: none;
	font-size: 12px;
	margin-left: auto;
	cursor: pointer;
}
.scm-upd-history-link:hover { color: #444; }
.scm-upd-history-link i { margin-right: 3px; }

/* Modal HISTORIQUE */
.scm-upd-history-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.scm-upd-history-modal-inner {
	background: #fff;
	border-radius: 8px;
	padding: 24px 32px;
	width: 90%;
	max-width: 800px;
	max-height: 80vh;
	overflow-y: auto;
	position: relative;
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.scm-upd-history-modal-inner h2 {
	margin: 0 0 16px 0;
	font-size: 20px;
}
.scm-upd-history-modal-close {
	position: absolute;
	top: 12px; right: 14px;
	background: transparent;
	border: 0;
	font-size: 26px;
	color: #999;
	cursor: pointer;
	line-height: 1;
}
.scm-upd-history-modal-close:hover { color: #333; }

/* Pré-flight code badge (utilisé dans Swal HTML) */
.scm-upd-pf-code {
	display: inline-block;
	min-width: 50px;
	font-weight: 600;
	margin-right: 4px;
	color: #b71c1c;
}
.scm-upd-pf-issues ul {
	margin: 0;
	padding-left: 18px;
	text-align: left;
}

/* Historique */
.scm-upd-history {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
.scm-upd-history th,
.scm-upd-history td {
	padding: 8px 10px;
	text-align: left;
	border-bottom: 1px solid #f0f0f0;
}
.scm-upd-history th {
	background: #fafafa;
	font-weight: 600;
	color: #666;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.5px;
}
.scm-upd-history-row:hover { background: #fafafa; }
.scm-upd-history-row--echec { background: #fff8f8; }
.scm-upd-history-row--rollback { background: #fffbf0; }

.scm-upd-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.scm-upd-badge--succes   { background: #c8e6c9; color: #1b5e20; }
.scm-upd-badge--en_cours { background: #fff3cd; color: #856404; }
.scm-upd-badge--echec    { background: #ffcdd2; color: #b71c1c; }
.scm-upd-badge--rollback { background: #ffe0b2; color: #bf6000; }

/* Modal de progression.
   z-index SOUS .swal2-container (9100 !important) : les dialogues SweetAlert
   (confirmation « Stopper », succès de fin de MAJ) doivent passer DEVANT —
   à 9999 ils étaient masqués derrière la modal (vécu akmd, 09/07/2026). */
.scm-upd-progress-modal {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.6);
	z-index: 9000;
	display: flex;
	align-items: center;
	justify-content: center;
}
.scm-upd-progress-modal-inner {
	background: #fff;
	border-radius: 8px;
	padding: 24px 32px;
	width: 90%;
	max-width: 600px;
	box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
.scm-upd-progress-modal-inner h2 {
	margin: 0 0 8px 0;
	font-size: 20px;
}
.scm-upd-progress-warn {
	color: #888;
	font-size: 13px;
	margin: 0 0 16px 0;
}

/* =====================================================================
 * LOT COMPTA UX — KPI Résumé trésorerie (2026-05-15)
 * ---------------------------------------------------------------------
 * 3 KPI cards (Recettes / Dépenses / Solde net) en haut de la page
 * Comptabilité, alimentées par $comptaSummary précalculé dans le module.
 * + Barre de répartition Recettes vs Dépenses sous les cards.
 *
 * Codes couleur :
 *   - Recettes : vert (#16a34a)
 *   - Dépenses : rouge (#dc2626)
 *   - Solde positif : bleu (#2563eb) sur fond bleu clair (#eff6ff)
 *   - Solde négatif : rouge (#dc2626) sur fond rouge clair (#fef2f2)
 *   - Solde neutre  : gris (#6b7280) sur fond gris clair (#f9fafb)
 * ===================================================================== */

.scm-cpt-kpi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	margin: 14px 0 18px;
}

.scm-cpt-kpi-card {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 10px;
	padding: 16px 18px 14px 18px;
	position: relative;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
	transition: transform .15s, box-shadow .15s;
	min-height: 110px;
}
.scm-cpt-kpi-card:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}
.scm-cpt-kpi-card--recettes        { border-left: 4px solid #16a34a; }
.scm-cpt-kpi-card--depenses        { border-left: 4px solid #dc2626; }
.scm-cpt-kpi-card--solde-positif   { border-left: 4px solid #2563eb; background: #eff6ff; }
.scm-cpt-kpi-card--solde-negatif   { border-left: 4px solid #dc2626; background: #fef2f2; }
.scm-cpt-kpi-card--solde-neutre    { border-left: 4px solid #6b7280; background: #f9fafb; }

.scm-cpt-kpi-icon {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	color: #fff;
}
.scm-cpt-kpi-card--recettes      .scm-cpt-kpi-icon { background: #16a34a; }
.scm-cpt-kpi-card--depenses      .scm-cpt-kpi-icon { background: #dc2626; }
.scm-cpt-kpi-card--solde-positif .scm-cpt-kpi-icon { background: #2563eb; }
.scm-cpt-kpi-card--solde-negatif .scm-cpt-kpi-icon { background: #dc2626; }
.scm-cpt-kpi-card--solde-neutre  .scm-cpt-kpi-icon { background: #6b7280; }

.scm-cpt-kpi-label {
	font-size: 11px;
	font-weight: 700;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: .5px;
	margin: 0 0 8px 0;
	padding-right: 44px; /* laisse de la place pour l'icône en absolute */
}
.scm-cpt-kpi-value {
	font-size: 26px;
	font-weight: 700;
	color: #1f2937;
	line-height: 1.1;
	margin-bottom: 8px;
}
.scm-cpt-kpi-card--solde-positif .scm-cpt-kpi-value { color: #1d4ed8; }
.scm-cpt-kpi-card--solde-negatif .scm-cpt-kpi-value { color: #b91c1c; }

.scm-cpt-kpi-sub {
	font-size: 12px;
	color: #6b7280;
	line-height: 1.5;
}
.scm-cpt-kpi-sub-line { display: block; }

/* ---- Barre de répartition Recettes / Dépenses ---- */
.scm-cpt-ratio-bar { margin: 0 0 18px 0; }
.scm-cpt-ratio-bar__track {
	height: 12px;
	border-radius: 6px;
	background: #dc2626;
	overflow: hidden;
	position: relative;
}
.scm-cpt-ratio-bar__fill {
	height: 100%;
	width: var(--ratio, 50%);
	background: #16a34a;
	transition: width .35s ease;
}
.scm-cpt-ratio-bar__legend {
	display: flex;
	justify-content: space-between;
	margin-top: 6px;
	font-size: 11px;
	color: #6b7280;
	font-weight: 600;
}
.scm-cpt-ratio-bar__lbl--rec::before {
	content: '●';
	color: #16a34a;
	margin-right: 5px;
	font-size: 13px;
	vertical-align: middle;
}
.scm-cpt-ratio-bar__lbl--dep::before {
	content: '●';
	color: #dc2626;
	margin-right: 5px;
	font-size: 13px;
	vertical-align: middle;
}

/* Responsive KPI : 3 cols desktop → 1 col mobile */
@media (max-width: 1024px) {
	.scm-cpt-kpi-grid       { gap: 10px; }
	.scm-cpt-kpi-card       { padding: 12px 14px; min-height: 100px; }
	.scm-cpt-kpi-value      { font-size: 22px; }
	.scm-cpt-kpi-icon       { width: 32px; height: 32px; font-size: 14px; }
}
@media (max-width: 768px) {
	.scm-cpt-kpi-grid       { grid-template-columns: 1fr; }
	.scm-cpt-kpi-card       { min-height: auto; }
}


/* ---------------------------------------------------------------------
 * LOT COMPTA UX — Params : montant mensuel + checkbox variable (2026-05-15)
 * ---------------------------------------------------------------------
 * Composants utilisés dans la page Paramètres → Comptabilité, table des
 * recettes/dépenses récurrentes.
 * --------------------------------------------------------------------- */

/* Cellule couleur : refacto sans style="..." inline (variable CSS) */
.scm-cpt-color-cell {
	display: flex;
	align-items: center;
	gap: 8px;
}
.scm-cpt-color-swatch {
	width: 24px;
	height: 24px;
	border-radius: 4px;
	cursor: pointer;
	flex-shrink: 0;
	background: var(--swatch-color, #ccc);
}

/* Input montant mensuel : largeur compacte.
   ⚠️ On cible avec input.scm-cpt-amount-input pour gagner sur la spécificité
   de input.inputStd (qui a width:79%). */
input.scm-cpt-amount-input {
	width: 110px;
	height: 32px;
	padding: 4px 8px;
	font-size: 13px;
	text-align: right;
	text-indent: 0;          /* écrase le text-indent:10px de .inputStd */
	border: 1px solid #d0d0d0;
	border-radius: 4px;
	background: #fff;
	display: inline-block;   /* écrase display:block de .inputStd */
	transition: background .15s, color .15s, border-color .15s;
}
input.scm-cpt-amount-input:focus {
	outline: none;
	border-color: #3498db;
	box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.15);
}
input.scm-cpt-amount-input--off,
input.scm-cpt-amount-input[disabled] {
	background: #f3f3f3;
	color: #999;
	border-color: #e0e0e0;
	cursor: not-allowed;
}
input.scm-cpt-amount-input::placeholder { color: #c0c0c0; }

/* Checkbox "Variable" : label cliquable, centré dans la cellule */
.scm-cpt-variable-label {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
}
.scm-cpt-variable-cb {
	width: 18px;
	height: 18px;
	cursor: pointer;
	accent-color: #1d1e3a;
}

/* Cellule "suggestion" dans la matrice Comptabilité :
   montant pré-rempli depuis le récurrent fixe, non encore validé.
   Affiché en italique gris pour signaler que c'est une proposition. */
.scm-cpt-cell-suggested {
	color: #aaa;
	font-style: italic;
	opacity: 0.85;
}
.scm-cpt-cell-suggested:hover {
	color: #1d1e3a;
	opacity: 1;
}


/* ---------------------------------------------------------------------
 * LOT COMPTA UX — Vue mois par mois (grille 6×2) (2026-05-15)
 * ---------------------------------------------------------------------
 * 12 cards de mois affichées en grille. Card = aperçu read-only (header,
 * solde, top 2 recettes, top 2 dépenses, bouton +). Clic → modale détail.
 *
 * Responsive : 6×2 desktop → 4×3 ≤1280 → 3×4 ≤900 → 2×6 ≤600 → 1×12 ≤380.
 * --------------------------------------------------------------------- */
.scm-cpt-month-grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	margin: 14px 0 20px 0;
}

.scm-cpt-month-card {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 10px;
	cursor: pointer;
	transition: border-color .15s, box-shadow .15s;
	position: relative;
	display: flex;
	flex-direction: column;
}
.scm-cpt-month-card:hover {
	border-color: #3498db;
	box-shadow: 0 2px 8px rgba(52, 152, 219, 0.12);
}
.scm-cpt-month-card:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18);
}

/* Mois courant : bordure bleue plus visible + fond bleu pâle */
.scm-cpt-month-card--current {
	border: 2px solid #2563eb;
	background: #eff6ff;
	padding: 9px;        /* compense le 1px de bordure supplémentaire */
}

/* Mois sans aucune transaction : fond gris pâle, contenu sobre */
.scm-cpt-month-card--empty {
	background: #fafafa;
}
.scm-cpt-month-card--current.scm-cpt-month-card--empty {
	background: #eff6ff;  /* le mois courant garde sa teinte */
}

.scm-cpt-month-card__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 6px;
	margin-bottom: 8px;
	border-bottom: 1px solid #e8e8e8;
	gap: 6px;
}
.scm-cpt-month-card__name {
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.scm-cpt-month-card--current .scm-cpt-month-card__name {
	color: #1d4ed8;
}
.scm-cpt-month-card__solde {
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}
.scm-cpt-month-card__solde--pos     { color: #16a34a; }
.scm-cpt-month-card__solde--neg     { color: #dc2626; }
.scm-cpt-month-card__solde--neutral { color: #9ca3af; }

.scm-cpt-month-card__body {
	flex: 1;
	min-height: 50px;
}
.scm-cpt-month-card__line {
	display: flex;
	justify-content: space-between;
	font-size: 11px;
	line-height: 1.7;
	gap: 4px;
}
.scm-cpt-month-card__lbl {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #6b7280;
	flex: 1 1 auto;
	min-width: 0;
}
.scm-cpt-month-card__val {
	font-weight: 600;
	flex: 0 0 auto;
}
.scm-cpt-month-card__line--rec .scm-cpt-month-card__val { color: #16a34a; }
.scm-cpt-month-card__line--dep .scm-cpt-month-card__val { color: #dc2626; }
.scm-cpt-month-card__empty-msg {
	color: #c0c0c0;
	font-size: 12px;
	text-align: center;
	padding: 14px 0;
	font-style: italic;
}

.scm-cpt-month-card__btn-add {
	margin-top: 8px;
	width: 100%;
	padding: 4px;
	border: 1px solid #e0e0e0;
	background: transparent;
	border-radius: 4px;
	cursor: pointer;
	font-size: 11px;
	color: #6b7280;
	transition: background .15s, color .15s, border-color .15s;
}
.scm-cpt-month-card__btn-add:hover {
	background: #2563eb;
	color: #fff;
	border-color: #2563eb;
}

/* ---- Responsive grille ---- */
@media (max-width: 1280px) {
	.scm-cpt-month-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
	.scm-cpt-month-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
	.scm-cpt-month-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
	.scm-cpt-month-grid { grid-template-columns: 1fr; }
}


/* ---------------------------------------------------------------------
 * LOT COMPTA UX — Modale détail mois (Lot 2) (2026-05-15)
 * ---------------------------------------------------------------------
 * Conteneur .scm-cpt-mdt-wrap injecté dans une Swal large (900px desktop).
 * Sections recettes + dépenses séparées, lignes avec édition inline,
 * footer avec solde + boutons d'ajout ligne exceptionnelle.
 * --------------------------------------------------------------------- */
.scm-cpt-mdt-wrap {
	text-align: left;
	font-size: 13px;
	color: #1f2937;
}
.scm-cpt-mdt-loading {
	text-align: center;
	padding: 20px;
	color: #6b7280;
	font-size: 14px;
}
.scm-cpt-mdt-error {
	color: #dc2626;
	text-align: center;
}

.scm-cpt-mdt-section {
	margin-bottom: 18px;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	overflow: hidden;
}
.scm-cpt-mdt-section--rec { border-left: 4px solid #16a34a; }
.scm-cpt-mdt-section--dep { border-left: 4px solid #dc2626; }

.scm-cpt-mdt-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 14px;
	background: #f9fafb;
	border-bottom: 1px solid #e8e8e8;
	font-size: 13px;
	font-weight: 700;
	color: #374151;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.scm-cpt-mdt-section--rec .scm-cpt-mdt-section-total { color: #16a34a; }
.scm-cpt-mdt-section--dep .scm-cpt-mdt-section-total { color: #dc2626; }

.scm-cpt-mdt-row {
	display: grid;
	grid-template-columns: 1fr 110px 60px 110px 32px;
	gap: 8px;
	align-items: center;
	padding: 8px 14px;
	border-bottom: 1px solid #f3f4f6;
	font-size: 13px;
}
.scm-cpt-mdt-row:last-child { border-bottom: none; }
.scm-cpt-mdt-row--system    { background: #f9fafb; }
/* 2026-09-24 — mention « dont … encaissés avant le début / après la fin de la
   saison » sous une ligne auto (1er / dernier mois de la saison). */
.scm-cpt-mdt-note {
	padding: 0 14px 8px 38px;
	background: #f9fafb;
	border-bottom: 1px solid #f3f4f6;
	font-size: 12px;
	font-style: italic;
	color: #6b7280;
}
/* Lot Compta UX 2026-05-15 — les lignes exceptionnelles n'ont plus de fond
   distinct (suppression du fond jaune). Elles restent identifiables par
   l'icône poubelle (suppression rapide). */

.scm-cpt-mdt-libelle {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.scm-cpt-mdt-color {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 3px;
	background: var(--swatch-color, #ccc);
	flex-shrink: 0;
}
.scm-cpt-mdt-tag-system,
.scm-cpt-mdt-tag-recur,
.scm-cpt-mdt-tag-var {
	display: inline-block;
	padding: 1px 6px;
	border-radius: 3px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .3px;
	margin-left: 4px;
}
.scm-cpt-mdt-tag-system { background: #dbeafe; color: #1d4ed8; }
.scm-cpt-mdt-tag-recur  { background: #d1fae5; color: #065f46; }
.scm-cpt-mdt-tag-var    { background: #fef3c7; color: #92400e; }

.scm-cpt-mdt-montant,
.scm-cpt-mdt-jour,
.scm-cpt-mdt-mode {
	font-size: 13px;
	color: #374151;
}
.scm-cpt-mdt-montant {
	text-align: right;
	font-weight: 600;
}
.scm-cpt-mdt-jour,
.scm-cpt-mdt-mode {
	text-align: center;
}
.scm-cpt-mdt-suggested a { color: #aaa; font-style: italic; }

.scm-cpt-mdt-actions { text-align: right; }
.scm-cpt-mdt-del {
	color: #dc2626;
	cursor: pointer;
	font-size: 13px;
	opacity: 0.7;
	transition: opacity .15s;
}
.scm-cpt-mdt-del:hover { opacity: 1; }

.scm-cpt-mdt-empty {
	padding: 14px;
	text-align: center;
	color: #9ca3af;
	font-style: italic;
	font-size: 12px;
}

.scm-cpt-mdt-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 14px;
	background: #f9fafb;
	border-radius: 8px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.scm-cpt-mdt-solde {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	font-weight: 600;
}
.scm-cpt-mdt-solde-value {
	font-size: 18px;
	padding: 4px 12px;
	border-radius: 6px;
}
.scm-cpt-mdt-solde-value--pos     { color: #1d4ed8; background: #dbeafe; }
.scm-cpt-mdt-solde-value--neg     { color: #b91c1c; background: #fecaca; }
.scm-cpt-mdt-solde-value--neutral { color: #6b7280; background: #e5e7eb; }

.scm-cpt-mdt-actions-bar {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.scm-cpt-mdt-actions-bar .btnStd {
	margin: 0;
	font-size: 12px;
	padding: 8px 12px;
}

/* Input jour Flatpickr (remplace l'ancien dropdown 1-31).
   Look discret type lien cliquable, le calendrier s'ouvre au clic. */
input.scm-cpt-flatpickr-day {
	width: 50px;
	padding: 4px 6px;
	border: 1px solid transparent;
	background: transparent;
	font-size: 13px;
	text-align: center;
	color: #374151;
	cursor: pointer;
	border-radius: 4px;
	transition: border-color .15s, background .15s;
}
input.scm-cpt-flatpickr-day:hover,
input.scm-cpt-flatpickr-day:focus {
	border-color: #3498db;
	background: #fff;
	outline: none;
}
input.scm-cpt-flatpickr-day::placeholder { color: #c0c0c0; }

/* Boutons globaux "Ajouter recette/dépense" au-dessus de la grille mois */
.scm-cpt-global-actions {
	display: inline-flex;
	gap: 8px;
}
.scm-cpt-global-actions .btnStd {
	margin: 0;
	font-size: 12px;
	padding: 8px 14px;
}

/* Calendrier inline (Flatpickr) dans la sous-modale d'ajout ligne ponctuelle.
   Le mois est imposé (fond du mois courant), seul le jour est sélectionnable. */
.scm-cpt-mdt-cal-inline {
	display: flex;
	justify-content: center;
	margin: 6px 0 12px 0;
}
.scm-cpt-mdt-cal-inline .flatpickr-calendar {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	border: 1px solid #e5e7eb;
}
/* Mois et année grisés (non navigables — le mois est imposé par la card) */
.scm-cpt-mdt-cal-inline .flatpickr-current-month {
	pointer-events: none;
	color: #6b7280;
}
.scm-cpt-mdt-cal-inline .flatpickr-prev-month,
.scm-cpt-mdt-cal-inline .flatpickr-next-month {
	display: none !important;
}

/* Mini-form dans la sous-modale (ajout ligne exceptionnelle) */
.scm-cpt-mdt-form {
	text-align: left;
	padding: 6px 4px;
}
.scm-cpt-mdt-form label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	margin: 10px 0 4px;
	text-transform: uppercase;
	letter-spacing: .3px;
}
.scm-cpt-mdt-form .swal2-input,
.scm-cpt-mdt-form .swal2-select {
	width: 100% !important;
	margin: 0 !important;
}

/* Responsive : sur ≤768px, simplifie la grille des rows */
@media (max-width: 768px) {
	.scm-cpt-mdt-row {
		grid-template-columns: 1fr 90px 50px 80px 28px;
		gap: 6px;
		padding: 6px 10px;
		font-size: 12px;
	}
	.scm-cpt-mdt-section-header { padding: 8px 10px; font-size: 12px; }
	.scm-cpt-mdt-actions-bar { width: 100%; }
}
@media (max-width: 480px) {
	.scm-cpt-mdt-row {
		grid-template-columns: 1fr 80px 28px;
		row-gap: 4px;
	}
	.scm-cpt-mdt-jour,
	.scm-cpt-mdt-mode { display: none; }
}


/* ---------------------------------------------------------------------
 * LOT COMPTA UX — Matrice annuelle compacte en bas (Lot 3) (2026-05-15)
 * ---------------------------------------------------------------------
 * Wrapper de la matrice horizontale historique (recettes/dépenses/totaux
 * sur 12 mois). Maintenant en mode LECTURE SEULE et compact :
 *  - Pointer-events désactivé sur les éditables → plus de saisie ici
 *  - Masque jour + mode dans les cellules (garde juste le montant)
 *  - Masque les boutons "Ajouter une recette/dépense" (passé en haut via modale)
 *  - Fonts plus petites + padding réduit pour gagner de la place
 *  - Fond gris pâle pour distinguer visuellement du contenu actif
 *
 * La saisie/édition passe via la grille 6×2 + modale détail (Lot 1/2).
 * --------------------------------------------------------------------- */
.scm-cpt-matrix-readonly {
	margin-top: 28px;
	padding: 14px 18px 8px 18px;
	background: #f9fafb;
	border: 1px dashed #d1d5db;
	border-radius: 8px;
	opacity: .9;
	transition: opacity .2s;
}
.scm-cpt-matrix-readonly:hover { opacity: 1; }

.scm-cpt-matrix-readonly-header {
	padding: 0 0 8px 0 !important;
	margin-bottom: 8px;
	border-bottom: 1px dashed #d1d5db;
}
.scm-cpt-matrix-title {
	font-size: 13px !important;
	color: #6b7280 !important;
	text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600 !important;
}
.scm-cpt-matrix-title i {
	color: #9ca3af;
	margin-right: 4px;
}

/* Compaction interne */
.scm-cpt-matrix-readonly .contentTabStd { padding: 8px 0 4px 0; }
.scm-cpt-matrix-readonly .contentTabStd > div > h2,
.scm-cpt-matrix-readonly .contentTabStd > h2 {
	font-size: 12px !important;
	color: #6b7280;
	padding: 6px 0 4px 0 !important;
}
.scm-cpt-matrix-readonly .saisonEc { display: none; }  /* déjà affiché en haut */

/* Boutons d'ajout en haut de chaque section : masqués (la saisie passe par la grille 6×2) */
.scm-cpt-matrix-readonly .contentTabStd > div > a.btnStd { display: none; }

/* Table compactée */
.scm-cpt-matrix-readonly table.tableStd { font-size: 11px; }
.scm-cpt-matrix-readonly table.tableStd th,
.scm-cpt-matrix-readonly table.tableStd td {
	padding: 4px 5px;
	line-height: 1.3;
}
.scm-cpt-matrix-readonly table.tableStd th { font-size: 10px; }

/* Lecture seule : désactive les éditables (clic sans effet) */
.scm-cpt-matrix-readonly .editable-item-text,
.scm-cpt-matrix-readonly .editable-item-select,
.scm-cpt-matrix-readonly .editable-item-selectType {
	pointer-events: none !important;
	cursor: default !important;
	color: #374151;
	text-decoration: none !important;
	border-bottom: none !important;
}

/* Cellules cellule mois : masquer jour + mode → ne garder QUE le montant pour gagner de la place.
   La sélection est sensible : on cible les .editable-item-select et .editable-item-selectType
   ainsi que les <br /> qui les séparent. */
.scm-cpt-matrix-readonly table.tableStd td .editable-item-select,
.scm-cpt-matrix-readonly table.tableStd td .editable-item-selectType {
	display: none;
}
.scm-cpt-matrix-readonly table.tableStd td br { display: none; }

/* La cellule "Totaux" garde son `<br />` (montant sur 2 lignes) → autoriser le br pour cette colonne uniquement */
.scm-cpt-matrix-readonly table.tableStd tr:last-child td:first-child br { display: inline; }

/* Suggestion (récurrent fixe non validé) en gris plus pâle dans cette vue */
.scm-cpt-matrix-readonly .scm-cpt-cell-suggested {
	color: #c0c0c0;
}

/* Responsive : la matrice annuelle reste accessible en mobile mais via scroll-x */
@media (max-width: 1024px) {
	.scm-cpt-matrix-readonly { padding: 10px 12px; margin-top: 20px; }
	.scm-cpt-matrix-title { font-size: 11px !important; }
}


/* =====================================================================
 * Lot Compta-Params Refonte (2026-05-15 v4) — Grille 2 colonnes
 * ---------------------------------------------------------------------
 * Page Paramètres → Comptabilité, onglet « Recettes & Dépenses ».
 * Recettes à gauche (accent vert teal 800/600), dépenses à droite
 * (accent rouge 800/600). Chaque ligne = mini-card grise compacte.
 * Responsive : 1 colonne empilée ≤1024px (cf. LOT RESPONSIVE V1).
 * ===================================================================== */

.scm-cp-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin: 8px 0 20px;
}

.scm-cp-col {
	background: #ffffff;
	border: 1px solid #e6e6e6;
	border-radius: 12px;
	padding: 18px 20px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	display: flex;
	flex-direction: column;
}

/* En-tête de colonne : badge + titre + sous-titre */
.scm-cp-col-header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
}

.scm-cp-col-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 15px;
}

.scm-cp-col-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	line-height: 1.2;
}

.scm-cp-col-sub {
	font-size: 12px;
	color: #888;
	margin: 2px 0 0;
}

/* Variantes Recettes (vert teal) / Dépenses (rouge) */
.scm-cp-col--recette .scm-cp-col-icon { background: #e1f5ee; color: #085041; }
.scm-cp-col--recette .scm-cp-col-title { color: #085041; }

.scm-cp-col--depense .scm-cp-col-icon { background: #fcebeb; color: #791f1f; }
.scm-cp-col--depense .scm-cp-col-title { color: #791f1f; }

/* Liste des cards (lignes) */
.scm-cp-list {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	min-height: 30px;
}

.scm-cp-list-empty {
	color: #aaa;
	font-style: italic;
	font-size: 13px;
	margin: 0;
	padding: 12px 0;
	text-align: center;
}

.scm-cp-import-btn {
	align-self: center;
	margin: 4px 0 8px;
}

/* Sous-card (1 ligne = 1 recette ou 1 dépense) */
.scm-cp-card {
	background: #f7f7f5;
	border: 1px solid transparent;
	border-radius: 10px;
	padding: 10px 12px;
	transition: background 0.15s, border-color 0.15s;
}

.scm-cp-card:hover {
	background: #f1f1ee;
	border-color: #e0e0dc;
}

.scm-cp-card-top {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 6px;
}

/* Swatch couleur — réduction de taille pour le format card */
.scm-cp-card-swatch-wrap {
	margin: 0;
	flex-shrink: 0;
}

.scm-cp-card-swatch {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0, 0, 0, 0.08);
}

/* Libellé éditable : prend tout l'espace, gras */
.scm-cp-card-libelle {
	flex: 1;
	font-weight: 500;
	font-size: 14px;
	color: #2a2a2a;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Trash icon : DISCRET par défaut (override fort de la classe legacy
 * a.del — sinon on hérite d'un gros bouton 28×28px à fond blanc, bordure
 * grise et icône rouge, qui dépare dans la card). Visible au hover. */
a.scm-cp-card-trash,
a.del.scm-cp-card-trash,
button.scm-cp-card-trash {
	width: auto;
	height: auto;
	border: 0;
	background: transparent;
	color: #c8c8c8;
	font-size: 13px;
	padding: 4px;
	cursor: pointer;
	transition: color 0.15s, transform 0.15s;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.scm-cp-card:hover .scm-cp-card-trash { color: #888; }
a.scm-cp-card-trash:hover,
a.del.scm-cp-card-trash:hover,
button.scm-cp-card-trash:hover {
	color: #c0392b;
	background: transparent;
	border: 0;
	transform: scale(1.1);
}

/* Ligne du bas : montant + checkbox variable */
.scm-cp-card-bottom {
	display: flex;
	align-items: center;
	gap: 14px;
	padding-left: 26px; /* aligne avec le libellé (swatch 16 + gap 10) */
}

.scm-cp-card-amount-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
}

.scm-cp-card-amount {
	width: 90px;
	padding: 4px 8px !important;
	font-size: 13px;
	text-align: right;
	border: 1px solid #ddd;
	border-radius: 6px;
}

.scm-cp-card-currency {
	font-size: 11px;
	color: #888;
}

.scm-cp-card-var {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	color: #888;
	margin: 0;
	margin-left: auto;
	cursor: pointer;
}

.scm-cp-card-var input[type="checkbox"] {
	/* Override de la règle globale ligne 1483 qui cache toutes les checkboxes
	 * sauf grade-diplome-*. Sans ça, on ne voit pas la case → impossible de
	 * cocher Variable depuis cette card. */
	display: inline-block !important;
	margin: 0;
	width: 15px;
	height: 15px;
	cursor: pointer;
	accent-color: #1d1e3a;
	vertical-align: middle;
}

/* Bouton « + Ajouter » full width, dashed, accent par variante */
.scm-cp-add-btn {
	display: block;
	margin-top: 10px;
	padding: 9px 12px;
	border: 1px dashed #c5c5c5;
	border-radius: 8px;
	background: transparent;
	color: #777;
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.scm-cp-add-btn:hover {
	background: #fafafa;
}

.scm-cp-col--recette .scm-cp-add-btn:hover { border-color: #1d9e75; color: #085041; }
.scm-cp-col--depense .scm-cp-add-btn:hover { border-color: #e24b4a; color: #791f1f; }

/* Modale d'ajout (Swal HTML custom) — Lot Compta-Params v4.2.
 * 3 champs empilés : libellé (obligatoire) + montant + checkbox Variable. */
.scm-cp-add-modal {
	text-align: left;
	padding: 4px 4px 8px;
}
.scm-cp-add-row {
	margin-bottom: 14px;
}
.scm-cp-add-row label {
	display: block;
	font-size: 13px;
	font-weight: 500;
	color: #444;
	margin-bottom: 5px;
}
.scm-cp-add-req { color: #c0392b; font-weight: 700; }
.scm-cp-add-opt { color: #999; font-weight: 400; font-size: 11px; }

.scm-cp-add-input {
	width: 100%;
	padding: 9px 12px;
	font-size: 14px;
	border: 1px solid #ddd;
	border-radius: 6px;
	box-sizing: border-box;
	transition: border-color 0.15s;
}
.scm-cp-add-input:focus {
	outline: none;
	border-color: #1d1e3a;
}

.scm-cp-add-row--check { margin-bottom: 4px; }
.scm-cp-add-checklabel {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	cursor: pointer;
	font-weight: 400 !important;
	font-size: 13px;
	color: #444;
}
.scm-cp-add-checklabel input[type="checkbox"] {
	/* Override de la règle globale ligne 1483 qui cache toutes les checkboxes. */
	display: inline-block !important;
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: #1d1e3a;
	cursor: pointer;
}

/* Responsive — passage en 1 colonne empilée ≤1024px,
 * card-bottom passe en stack ≤480 pour ne pas écraser le montant. */
@media (max-width: 1024px) {
	.scm-cp-grid { grid-template-columns: 1fr; gap: 14px; }
}
@media (max-width: 480px) {
	.scm-cp-col { padding: 14px 14px; }
	.scm-cp-card-bottom {
		flex-wrap: wrap;
		padding-left: 0;
	}
	.scm-cp-card-amount { width: 80px; }
	.scm-cp-card-var { margin-left: 0; }
}


/* =====================================================================
 * Lot Import étapes 3+4 (2026-05-15 v3) — Bloc résolution catégories
 * ---------------------------------------------------------------------
 * Apparaît dans l'étape Aperçu du wizard d'import quand cat=comptabilite
 * et qu'il y a des catégories non trouvées en saison cible. L'admin
 * choisit Rejeter / Créer en ponctuelle / Mapper sur une cat existante.
 * Variante --info pour les stages/examens (juste un message d'info).
 * ===================================================================== */
.scm-import-resol {
	background: #fff7e6;
	border: 1px solid #f0d090;
	border-radius: 6px;
	padding: 14px 18px;
	margin: 0 0 18px;
}
.scm-import-resol--info {
	background: #eef6fb;
	border-color: #c5dfee;
}
.scm-import-resol h3 {
	margin: 0 0 6px;
	font-size: 15px;
	color: #8a5a00;
}
.scm-import-resol-intro {
	font-size: 12px;
	color: #666;
	margin: 0 0 12px;
}
.scm-import-resol-bulk {
	margin: 0 0 10px;
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}
.scm-import-resol-bulk .scm-import-resol-bulk-action {
	flex: 0 1 280px;
}
.scm-import-resol-table {
	width: 100%;
	font-size: 12px;
}
.scm-import-resol-table th {
	background: #f4e6c8;
	font-weight: bold;
	color: #6a4500;
}
.scm-import-resol-table td {
	vertical-align: middle;
}
.scm-import-resol-target-cell .scm-import-resol-target {
	max-width: 240px;
}


/* =====================================================================
 * LOT RESPONSIVE V1 — Adaptation mobile & tablette (2026-05-15)
 * ---------------------------------------------------------------------
 * Approche : « patches media queries ciblés » (cf SESSION-HANDOFF-20260515).
 * Toutes les règles responsive sont concentrées ICI, en bas du fichier,
 * scopées par @media (max-width: ...). HORS de ces blocs, AUCUNE règle
 * desktop n'est modifiée → le rendu desktop reste identique au pixel.
 *
 * Breakpoints retenus (alignés Bootstrap / Tailwind, faciles à retenir) :
 *
 *   sm  ≤ 480px   → smartphone portrait
 *   md  ≤ 768px   → smartphone landscape + tablette portrait
 *   lg  ≤ 1024px  → tablette landscape (iPad classique)
 *   xl  ≥ 1025px  → desktop (défaut, pas de @media)
 *
 * Convention helpers : `.scm-resp-<action>-<bp>` (ex .scm-resp-hide-md,
 * .scm-resp-stack-lg). Les helpers sont consommables depuis n'importe
 * quel .tpl en ajoutant simplement la classe — pas besoin d'éditer
 * cette section.
 *
 * Organisation des sous-sections :
 *   §0  Helpers utilitaires
 *   §1  Tronc commun (header, menu burger, container, footer)
 *   §2  Motifs récurrents (datatables, modales, formulaires)
 *   §3  Pages spécifiques (planning, comptabilité, inscription, etc.)
 *
 * Audit rapide : `grep -nE '^@media' css/scm.css`
 * ===================================================================== */


/* ---------------------------------------------------------------------
 * §0 — HELPERS UTILITAIRES RESPONSIVE
 * Classes consommables depuis n'importe quel .tpl pour adapter
 * comportement / visibilité sans avoir à éditer scm.css.
 * --------------------------------------------------------------------- */

/* --- Visibilité conditionnelle (masquer) --- */
@media (max-width: 1024px) {
	.scm-resp-hide-lg { display: none !important; }
}
@media (max-width: 768px) {
	.scm-resp-hide-md { display: none !important; }
}
@media (max-width: 480px) {
	.scm-resp-hide-sm { display: none !important; }
}

/* --- Visibilité conditionnelle (afficher seulement) --- */
/* Par défaut masqué (desktop), révélé sous le breakpoint. */
.scm-resp-show-lg,
.scm-resp-show-md,
.scm-resp-show-sm { display: none; }
@media (max-width: 1024px) {
	.scm-resp-show-lg { display: initial; }
	.scm-resp-show-lg.scm-resp-flex { display: flex; }
	.scm-resp-show-lg.scm-resp-block { display: block; }
	.scm-resp-show-lg.scm-resp-inline-block { display: inline-block; }
}
@media (max-width: 768px) {
	.scm-resp-show-md { display: initial; }
	.scm-resp-show-md.scm-resp-flex { display: flex; }
	.scm-resp-show-md.scm-resp-block { display: block; }
	.scm-resp-show-md.scm-resp-inline-block { display: inline-block; }
}
@media (max-width: 480px) {
	.scm-resp-show-sm { display: initial; }
	.scm-resp-show-sm.scm-resp-flex { display: flex; }
	.scm-resp-show-sm.scm-resp-block { display: block; }
	.scm-resp-show-sm.scm-resp-inline-block { display: inline-block; }
}

/* --- Stack (flex → column) --- */
@media (max-width: 1024px) {
	.scm-resp-stack-lg { flex-direction: column !important; align-items: stretch !important; }
}
@media (max-width: 768px) {
	.scm-resp-stack-md { flex-direction: column !important; align-items: stretch !important; }
}
@media (max-width: 480px) {
	.scm-resp-stack-sm { flex-direction: column !important; align-items: stretch !important; }
}

/* --- Largeur 100% sous breakpoint --- */
@media (max-width: 1024px) {
	.scm-resp-full-lg { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 768px) {
	.scm-resp-full-md { width: 100% !important; max-width: 100% !important; }
}
@media (max-width: 480px) {
	.scm-resp-full-sm { width: 100% !important; max-width: 100% !important; }
}

/* --- Centrage texte / contenu sous breakpoint --- */
@media (max-width: 768px) {
	.scm-resp-center-md { text-align: center !important; }
}
@media (max-width: 480px) {
	.scm-resp-center-sm { text-align: center !important; }
}

/* --- Wrapper scroll horizontal (utile pour datatables, code, etc.) --- */
.scm-resp-scroll-x {
	max-width: 100%;
}
@media (max-width: 1024px) {
	.scm-resp-scroll-x {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/* ---------------------------------------------------------------------
 * §1 — TRONC COMMUN
 * Layout commun à toutes les pages admin : header, menu de gauche,
 * container principal, footer, boutons d'action.
 * --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * §1.A — HEADER (.contentTop)
 * ---------------------------------------------------------------------
 * Desktop (rappel) :
 *   <div class="contentTop">
 *     <div class="width50 flol"><h1>…titre…</h1></div>          ← float:left max-w 340
 *     <div class="scm-saison-selector">…</div>                  ← position:absolute left:55%
 *     <div class="sessionAlert">…userInfo + logo + langues…</div> ← float:right 50%
 *   </div>
 *
 * Sur ≤1024px les 2 floats + l'absolute se chevauchent → on neutralise
 * tout ça et on bascule .contentTop en flex column. Le sélecteur saison
 * revient dans le flow normal, centré sous le titre. La zone droite
 * (logo + nom user + langues) se rassemble en flex-wrap à droite.
 * ---------------------------------------------------------------------*/

@media (max-width: 1024px) {

	/* Le conteneur pilote le stack vertical des 3 zones */
	.contentTop {
		display: flex;
		flex-direction: column;
		gap: 12px;
		padding: 14px 16px;
	}
	/* Les .fin (clearfix) ne servent plus rien en flex */
	.contentTop > .fin { display: none; }

	/* Zone TITRE : on retire le float + l'ellipsis serrée */
	.contentTop > .width50.flol { float: none; width: 100%; }
	.contentTop h1 {
		float: none;
		max-width: 100%;
		width: 100%;
		gap: 4px 10px;
	}
	.contentTop h1 .scm-h1-section {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
	.contentTop h1 .scm-h1-sub {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}

	/* Sélecteur saison : sort de position:absolute, revient dans le flow */
	.scm-saison-selector {
		position: static;
		transform: none;
		left: auto;
		top: auto;
		align-self: center;
		max-width: 100%;
	}
	.scm-saison-row {
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px 12px;
	}
	.scm-saison-selector .select-style { min-width: 0; }

	/* Zone DROITE (sessionAlert) : annule float + width:50%, on laisse
	   le flex parent gérer le placement. flex-wrap pour les 3 sous-blocs
	   (userSessionInfo, logo, langues) si trop serré. */
	.contentTop .sessionAlert {
		float: none;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-end;
		gap: 10px;
	}
	.contentTop .sessionAlert .userSessionInfo {
		float: none;
		padding: 0;
		display: flex;
		align-items: center;
		gap: 8px;
	}
	.contentTop .sessionAlert .userSessionInfo .userSessionContenu {
		float: none;
		padding: 0;
	}
	.contentTop .sessionAlert .userSessionInfo img {
		float: none;
		margin: 0;
	}
	/* Logo (wrapper .flor sur lequel l'admin.top.inc.php a un margin inline
	   de 10px — on annule pour cohérence) */
	.contentTop .sessionAlert > .flor {
		float: none;
		margin: 0;
	}
	.contentTop .sessionAlert .langues.flor {
		float: none;
		padding: 0;
	}
	.contentTop .sessionAlert > .fin { display: none; }
}

/* ≤768px (tablette portrait, mobile landscape) : compaction des tailles */
@media (max-width: 768px) {
	.contentTop {
		padding: 12px 12px;
		gap: 10px;
	}
	.contentTop h1 .scm-h1-section { font-size: 20px; }
	.contentTop h1 .scm-h1-icon    { font-size: 22px; }
	.contentTop h1 .scm-h1-sub     { font-size: 12px; padding-left: 32px; }

	.scm-sel-label              { font-size: 12px; gap: 4px; }
	.scm-saison-selector select { font-size: 13px; padding: 4px 8px; }
	.scm-sel-badge              { font-size: 11px; padding: 3px 10px; }
	.scm-sel-back               { font-size: 11px; padding: 3px 8px; }

	.contentTop .sessionAlert                              { gap: 6px; justify-content: space-between; }
	.contentTop .sessionAlert .userSessionInfo strong.nomUser { font-size: 11px; }
	.contentTop .sessionAlert .userSessionInfo a.deco         { font-size: 11px; }
	.contentTop .sessionAlert .userSessionInfo img            { height: 36px; width: 36px; }

	/* Bandeau "créer saison suivante" — passe en stack vertical */
	.scm-next-season-banner {
		flex-direction: column;
		align-items: stretch;
		gap: 10px;
		text-align: center;
		font-size: 12px;
		padding: 10px 14px;
	}
	.scm-next-season-banner__btn { white-space: normal; }
}

/* ≤480px (mobile portrait) : ultra-compact, on cache la période de saison */
@media (max-width: 480px) {
	.contentTop {
		padding: 10px;
		gap: 8px;
		border-radius: 6px;
	}
	.contentTop h1 .scm-h1-section { font-size: 18px; }
	.contentTop h1 .scm-h1-icon    { font-size: 20px; }
	.contentTop h1 .scm-h1-sub     { font-size: 11px; padding-left: 28px; }

	/* Date "Du XX/XX au YY/YY" cachée — gain de place */
	.scm-saison-selector .scm-saison-period { display: none; }
	.scm-saison-row             { gap: 6px 8px; }
	.scm-saison-selector select { font-size: 12px; }

	/* Logo club encore plus compact, déconnexion sur 1 ligne */
	.contentTop .sessionAlert .userSessionInfo img { height: 32px; width: 32px; }
	.contentTop .sessionAlert .userSessionInfo strong.nomUser { font-size: 10px; }
	.contentTop .sessionAlert .userSessionInfo a.deco         { font-size: 10px; }
}


/* ---------------------------------------------------------------------
 * §1.B — MENU DE GAUCHE → DRAWER BURGER ≤1024px
 * ---------------------------------------------------------------------
 * Desktop (rappel) :
 *   .menuGauche  → width:15% float:left  (rail vertical permanent)
 *   .contenerMid → width:85% float:left  (contient header + tpl)
 *
 * Stratégie ≤1024px :
 *   - .menuGauche passe en position:fixed, left:-100% (hors écran)
 *     avec transition. Une classe body.scm-menu-open le ramène à left:0.
 *   - .scm-menu-overlay (HTML déjà présent, display:none par défaut)
 *     apparaît quand body.scm-menu-open → cliquable pour fermer.
 *   - .contenerMid passe en width:100% float:none (récupère la largeur).
 *   - Le bouton .scm-burger (caché en desktop) apparaît dans .contentTop.
 *
 * Z-index ordering :
 *   .menuGauche (1000) > .scm-menu-overlay (999) > tout le reste.
 *
 * HTML ajouté (1 ligne dans admin.top.inc.php + 1 div dans index.php) :
 *   <button class="scm-burger"><span class="scm-burger-bar"/>×3</button>
 *   <div class="scm-menu-overlay" aria-hidden="true"></div>
 * --------------------------------------------------------------------- */

/* Bouton burger : caché en desktop (visible uniquement ≤1024px) */
.scm-burger {
	display: none;          /* override en @media ci-dessous */
	background: transparent;
	border: none;
	padding: 8px;
	cursor: pointer;
	margin: 0 8px 0 0;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 5px;
	border-radius: 6px;
	transition: background .15s;
}
.scm-burger:hover  { background: rgba(0, 0, 0, 0.06); }
.scm-burger:focus  { outline: 2px solid #3498db; outline-offset: 2px; }
.scm-burger-bar {
	display: block;
	width: 22px;
	height: 3px;
	background: #1d1e3a;
	border-radius: 2px;
	transition: transform .25s, opacity .25s;
}
/* État "menu ouvert" → animation transformation en croix */
body.scm-menu-open .scm-burger-bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
body.scm-menu-open .scm-burger-bar:nth-child(2) { opacity: 0; }
body.scm-menu-open .scm-burger-bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Overlay (HTML always present, masqué par défaut) */
.scm-menu-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	opacity: 0;
	transition: opacity .25s;
}
body.scm-menu-open .scm-menu-overlay {
	display: block;
	opacity: 1;
}

/* ===== Bascule effective ≤1024px ===== */
@media (max-width: 1024px) {

	/* Burger visible (flex pour aligner les 3 barres verticalement) */
	.scm-burger { display: inline-flex; }

	/* Menu de gauche → drawer coulissant depuis la gauche */
	.menuGauche {
		position: fixed;
		top: 0;
		left: -100%;            /* hors écran par défaut */
		width: 280px;
		max-width: 85vw;        /* sécurité petits écrans : laisse l'overlay visible à droite */
		height: 100vh;
		overflow-y: auto;       /* menu scrollable si trop long */
		float: none;
		z-index: 1000;
		transition: left .25s ease;
		box-shadow: 2px 0 14px rgba(0, 0, 0, 0.18);
	}
	body.scm-menu-open .menuGauche {
		left: 0;
	}

	/* Container principal : récupère toute la largeur (le menu n'occupe
	   plus de place dans le flow, il est en position:fixed) */
	.contenerMid {
		width: 100%;
		float: none;
	}

	/* Quand le menu est ouvert, bloque le scroll de fond pour éviter
	   le double-scroll (page + drawer). */
	body.scm-menu-open {
		overflow: hidden;
	}

	/* Le contentTop est en flex column (cf §1.A) — le burger devient
	   le premier item. On le repositionne en haut à gauche du header :
	   on absolute-positionne juste le burger, et on garde le titre/saison/
	   sessionAlert dans leur flow normal (avec un padding-left pour
	   laisser la place au burger). */
	.contentTop {
		position: relative;     /* ancrage du burger absolute */
	}
	.contentTop > .scm-burger {
		position: absolute;
		top: 8px;
		left: 8px;
	}
	/* Padding-left sur la première ligne (h1) pour ne pas que le titre
	   passe SOUS le burger en haut. */
	.contentTop > .width50.flol { padding-left: 48px; }
}

/* Petit ajustement burger en mobile : un poil plus compact */
@media (max-width: 480px) {
	.scm-burger { width: 36px; height: 36px; padding: 6px; }
	.scm-burger-bar { width: 20px; }
	.menuGauche { width: 260px; }
	.contentTop > .width50.flol { padding-left: 44px; }
}


/* ---------------------------------------------------------------------
 * §1.C — CONTAINER + BOUTONS D'ACTION + FOOTER
 * ---------------------------------------------------------------------
 * Desktop (rappel) :
 *   .contenerMidPad     → padding 15px (wrapper interne)
 *   .contenerMidContent → padding 20px + box-shadow (carte blanche)
 *   .contentBot         → footer centré, padding-top 30px
 *   .btnStd.flor        → bouton d'action flotté à droite (très utilisé
 *                         pour "Ajouter un membre", "Exporter", etc.)
 *   #returnOnTop        → bouton "back to top" fixed bottom-right
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Padding interne réduit pour récupérer un peu de surface utile */
	.contenerMidPad     { padding: 12px; }
	.contenerMidContent { padding: 16px; margin: 12px 0; }

	/* Boutons d'action flottés (.btnStd.flor en haut à droite) :
	   on neutralise le float pour qu'ils ne chevauchent pas le titre.
	   Ils passent en flex auto-wrap, alignés à droite. */
	.contenerMidContent > .btnStd.flor,
	.contenerMidContent > .btnStd.flol {
		float: none;
		margin-left: auto;
	}
}

@media (max-width: 768px) {
	.contenerMidPad     { padding: 10px; }
	.contenerMidContent { padding: 12px; margin: 10px 0; border-radius: 8px; }

	/* Footer en mobile : un poil plus tassé */
	.contentBot { padding: 20px 0 0 0; font-size: 11px; }

	/* Touch-friendly : les .btnStd ont un padding plus généreux côté
	   tactile (≥ 36px de hauteur pour respecter la cible touch min).
	   Le padding desktop 10px 25px → mobile 12px 18px. */
	.btnStd,
	input.btnStd,
	button.btnStd {
		padding: 12px 18px;
		font-size: 13px;
	}
	.btnStd.min {
		padding: 7px 14px;
		font-size: 12px;
	}

	/* Bouton back-to-top : un peu plus haut pour éviter de gêner les
	   pouces qui scrollent près du bas, et plus à droite pour éviter
	   un chevauchement avec une éventuelle sticky bottom bar. */
	#returnOnTop {
		bottom: 70px;
		right: 10px;
		width: 34px;
		height: 34px;
	}
}

@media (max-width: 480px) {
	.contenerMidPad     { padding: 8px; }
	.contenerMidContent { padding: 10px; margin: 8px 0; border-radius: 6px; }

	/* Sur mobile portrait, les boutons d'action flottés deviennent
	   pleine largeur pour être facilement tappables. */
	.contenerMidContent > .btnStd.flor,
	.contenerMidContent > .btnStd.flol {
		display: block;
		width: 100%;
		margin: 8px 0 0 0;
	}
}


/* ---------------------------------------------------------------------
 * §2 — MOTIFS RÉCURRENTS
 * Patterns CSS qui apparaissent sur plusieurs pages : datatables,
 * modales Swal, formulaires avec colonnes .widthXX, sticky bottom bar.
 * --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * §2.A — DATATABLES (.tableStd) → scroll horizontal sous breakpoint
 * ---------------------------------------------------------------------
 * .tableStd est utilisée dans 17 templates (membres, profs, cours,
 * tarifs, comptabilité, examens, stages, etc.). En mobile/tablette
 * ces tables débordent largement.
 *
 * Technique CSS pure (sans wrapper HTML à ajouter) :
 *   - .tableStd passe en display:block + overflow-x:auto.
 *   - Ses enfants directs (thead/tbody/tfoot) gardent display:table
 *     avec min-width:100% → les colonnes conservent leur largeur
 *     naturelle, débordement = scroll horizontal dans la carte.
 *
 * Pour les NOUVELLES tables, préférer wrapper avec .scm-resp-scroll-x
 * (helper défini en §0). Ce patch est rétrocompat pour l'existant.
 *
 * ⚠️ Exception : .scm-table-sticky-wrap (sticky header) a déjà sa propre
 * logique de scroll, on ne la touche pas.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.tableStd {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.tableStd > thead,
	.tableStd > tbody,
	.tableStd > tfoot {
		display: table;
		min-width: 100%;
	}
	/* Cellules un peu plus compactes en mobile pour limiter le besoin de
	   scroll quand c'est possible. */
	.tableStd tr th,
	.tableStd tr td {
		font-size: 12px;
		padding: 6px 8px;
	}
	/* ⚠️ Exception RÉELLE (le §2.A ci-dessus la mentionnait sans la coder — Yvan 2026-06) :
	   la Liste Membres (.scm-table-sticky-wrap) garde sa structure de TABLE et laisse le
	   scroll au wrapper. Sinon le display:block générique casse le position:sticky de
	   l'en-tête → l'en-tête défile au lieu de rester collé en responsive. */
	.scm-table-sticky-wrap > table.tableStd {
		display: table;
		overflow-x: visible;
	}
	.scm-table-sticky-wrap > table.tableStd > tbody {
		display: table-row-group;
		min-width: 0;
	}
}

@media (max-width: 480px) {
	.tableStd tr th,
	.tableStd tr td {
		font-size: 11px;
		padding: 5px 6px;
	}
}


/* ---------------------------------------------------------------------
 * §2.B — MODALES SWAL + FORMULAIRES .widthXX + STICKY BAR
 * ---------------------------------------------------------------------
 * - .width25 / .width30 / .width50 sont utilisées massivement comme
 *   colonnes de formulaire. En mobile, elles doivent passer en 100%
 *   pour empiler verticalement. NB : .width50 dans .contentTop a déjà
 *   son override spécifique en §1.A — le sélecteur générique ici est
 *   sans effet là-bas (le spécifique gagne en cascade @media identique).
 *
 * - SweetAlert2 (.swal2-popup) sur mobile : le padding par défaut est
 *   trop important, on agrandit la largeur et on rétrécit les marges.
 *
 * - .scm-fiche-bottom-bar (sticky bar fiche membre) : passe les 2 boutons
 *   en stack vertical sur ≤480px.
 * --------------------------------------------------------------------- */

/* ===== Formulaires : colonnes .widthXX en 100% mobile ===== */
@media (max-width: 768px) {
	.width25,
	.width30,
	.width50 {
		width: 100% !important;
		float: none !important;
		display: block !important;
	}
	/* w33 / w50 / w80 (variantes utilitaires sur les boutons) → mobile = pleine largeur */
	.w33,
	.w50,
	.w80 {
		width: 100% !important;
	}
}

/* ===== SweetAlert2 ===== */
@media (max-width: 768px) {
	.swal2-popup {
		width: 94vw !important;
		max-width: 94vw !important;
		padding: 16px !important;
		font-size: 14px !important;
	}
	.swal2-popup .swal2-title           { font-size: 18px !important; padding: 8px 0 !important; }
	.swal2-popup .swal2-html-container  { font-size: 14px !important; margin: 8px 0 !important; }
	.swal2-popup .swal2-actions         { gap: 8px !important; flex-wrap: wrap !important; }
	.swal2-popup .swal2-confirm,
	.swal2-popup .swal2-cancel,
	.swal2-popup .swal2-deny            { padding: 8px 16px !important; font-size: 13px !important; }
	/* Inputs internes Swal : pleine largeur (le 60% par défaut est trop étroit) */
	.swal2-modal .swal2-input.swal2Input,
	.swal2-modal .swal2-input.swal2Date,
	.swal2-modal .swal2-select.swal2Select {
		width: 100% !important;
	}
}

@media (max-width: 480px) {
	.swal2-popup {
		width: 100vw !important;
		max-width: 100vw !important;
		border-radius: 0 !important;
		padding: 12px !important;
	}
	.swal2-popup .swal2-title { font-size: 16px !important; }
}

/* ===== Sticky bottom bar fiche membre ===== */
@media (max-width: 768px) {
	.scm-fiche-bottom-bar { padding: 10px 12px; }
}
@media (max-width: 480px) {
	.scm-fiche-bottom-bar > div {
		flex-direction: column;
		gap: 8px;
		align-items: stretch;
	}
	.scm-fiche-bottom-bar #scm-admin-save,
	.scm-fiche-bottom-bar #scm-membre-delete {
		width: 100%;
	}
}


/* ---------------------------------------------------------------------
 * §3 — PAGES SPÉCIFIQUES
 * Patches ciblés pour des layouts uniques qui ne sont pas couverts par
 * le tronc commun (§1) ou les motifs récurrents (§2).
 * --------------------------------------------------------------------- */

/* ---------------------------------------------------------------------
 * §3.1 — PLANNING (.scm-plan-table)
 * ---------------------------------------------------------------------
 * Structure :
 *   .padSpec
 *     h2.flol (titre)
 *     .select-style.flor.width30 > select#choixMois (mois)
 *     h2.flor (label "Choisir un mois")
 *   .overflowTabHeight (height:500px overflow:auto)
 *     table.tableStd.scm-plan-table (6 colonnes, table-layout:fixed)
 *
 * Stratégie :
 *   - Header : flol/flor neutralisés sur ≤768px → stack vertical.
 *   - Table : table-layout:fixed casserait le scroll horizontal, on
 *     force min-width:720px pour préserver la lisibilité, ce qui
 *     déclenche le scroll-x du patch §2.A.
 *   - Conteneur scrollable (overflowTabHeight) : 500px fixe → 70vh.
 *   - Chips trop étroites : déjà flex-wrap, rien à faire.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Conteneur scrollable : hauteur fixe trop importante sur tablette */
	.overflowTabHeight {
		height: auto;
		max-height: 70vh;
	}
	/* Table planning : largeur min pour éviter rétrécissement excessif */
	.scm-plan-table {
		min-width: 720px;
	}
}

@media (max-width: 768px) {
	/* Header planning : titre + sélecteur mois en stack vertical */
	#part1 .padSpec { padding: 12px 8px; }
	#part1 .padSpec h2.flol,
	#part1 .padSpec h2.flor {
		float: none;
		text-align: center;
		margin: 4px 0;
		width: 100%;
	}
	#part1 .padSpec .select-style.width30 {
		float: none;
		margin: 6px auto;
	}
	/* Chips encore plus compactes pour grappiller */
	.scm-plan-chip { font-size: 11px; padding: 2px 4px 2px 6px; }
	.scm-plan-add-btn { font-size: 11px; }
}


/* ---------------------------------------------------------------------
 * §3.2 — INSCRIPTION PUBLIQUE (.contenerCxn)
 * ---------------------------------------------------------------------
 * Page d'inscription standalone (vue par les adhérents quand ils
 * remplissent le formulaire public). Structure :
 *
 *   .contenerCxn (width:100%)
 *     .contenerCxnPad (padding 60px 0)
 *       .accueilCxn > strong.nomSite (60px) + h1
 *     .contenerCxnContent (width:50% margin:0 auto, carte centrale)
 *       .scm-info-box / .scm-page-state / .scm-paiement-recap / form
 *
 * En desktop la carte est centrée à 50% de largeur (~600-700px sur HD).
 * Sur tablette/mobile c'est inutilisable → on élargit progressivement
 * et on réduit les paddings + titre.
 *
 * NB : le récapitulatif paiement (.scm-paiement-recap-body) est en
 * flex space-between avec un montant à droite — sur mobile portrait,
 * on le passe en stack pour que le montant aille en dessous bien lisible.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	.contenerCxnContent      { width: 80%; }
	.accueilCxn strong.nomSite { font-size: 44px; }
}

@media (max-width: 768px) {
	.contenerCxnPad          { padding: 30px 12px; }
	.contenerCxnContent      {
		width: 95%;
		padding: 20px 14px;
	}
	.accueilCxn strong.nomSite { font-size: 32px; }
	.accueilCxn h1             { font-size: 18px; padding: 4px 0; }

	.scm-info-box              { padding: 8px 12px; font-size: 12px; }

	.scm-paiement-recap        { padding: 12px; }
	.scm-paiement-recap-montant { font-size: 20px; }

	.scm-page-state            { padding: 28px 14px; }
	.scm-page-state .scm-page-state-icon { font-size: 40px; }
	.scm-page-state h2         { font-size: 18px; }
}

@media (max-width: 480px) {
	.contenerCxnPad     { padding: 20px 8px; }
	.contenerCxnContent {
		width: 100%;
		padding: 14px 10px;
		border-radius: 8px;
	}
	.accueilCxn strong.nomSite { font-size: 26px; }
	.accueilCxn h1             { font-size: 16px; }

	/* Récap paiement : passe en stack (montant sous l'identité) */
	.scm-paiement-recap-body {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.scm-paiement-recap-montant {
		align-self: flex-end;
		font-size: 22px;
	}

	.scm-page-state            { padding: 20px 10px; }
	.scm-page-state .scm-page-state-icon { font-size: 32px; }
	.scm-page-state h2         { font-size: 16px; }
	.scm-page-state p          { font-size: 13px; }
}


/* ---------------------------------------------------------------------
 * §3.3 — FICHE MEMBRE (.scm-profil-layout + tabs scm-gd-*)
 * ---------------------------------------------------------------------
 * Structure :
 *   .scm-gd-tabs (système tabs partagé : utilisé aussi dans Grades,
 *                 Paramètres, Compta-params, etc.)
 *     .scm-gd-tab-btn × N
 *   .scm-gd-tab-content
 *     .scm-mode-section
 *       .scm-tpl-header (titre + bouton retour, flex space-between)
 *       .scm-profil-layout (flex gap:32px)
 *         .scm-profil-fields > fieldset (flex label+input horizontal)
 *
 * Stratégie :
 *   - Tabs : flex-wrap → permettre le wrap OU scroll-x si trop nombreux.
 *     Comme c'est partagé, ce patch profite à toutes les pages tabs.
 *   - .scm-tpl-header : stack vertical en mobile.
 *   - .scm-profil-layout : flex column (la colonne droite passe sous).
 *   - .scm-profil-fields fieldset : label au-dessus de l'input.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Tabs partagées : scroll-x si trop nombreuses, sinon wrap propre */
	.scm-gd-tabs {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.scm-gd-tab-btn {
		flex: 0 0 auto;
		padding: 8px 16px;
		font-size: 12px;
	}

	/* Layout profil : stack vertical (la fiche d'identité prend toute la largeur) */
	.scm-profil-layout {
		flex-direction: column;
		gap: 16px;
	}

	/* tpl-header : titre + bouton retour en stack */
	.scm-tpl-header {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	/* Section interne plus compacte */
	.scm-mode-section { padding: 16px; margin-bottom: 20px; }
}

@media (max-width: 768px) {
	/* Champs profil : label au-dessus de l'input (au lieu de à côté) */
	.scm-profil-fields fieldset {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
		padding: 8px 0;
	}
	.scm-profil-fields label.labelStd {
		min-width: 0;
		width: 100%;
		line-height: 1.4;
		margin-right: 0;
	}
	.scm-profil-fields input.inputStd,
	.scm-profil-fields textarea.inputStd {
		max-width: 100%;
		width: 100%;
	}
	.scm-profil-fields input.inputStd.min,
	.scm-profil-fields .select-style.min {
		max-width: 100%;
		width: 100%;
	}
	.scm-profil-fields .flatpickr-wrapper {
		width: 100%;
	}

	/* Tabs encore plus compactes */
	.scm-gd-tab-btn {
		padding: 8px 12px;
		font-size: 11px;
	}

	/* Cards section (statut/cotis/paie) un peu plus compactes */
	.scm-section-card { padding: 12px; margin-bottom: 14px; }
}

@media (max-width: 480px) {
	.scm-mode-section { padding: 12px; }
	.scm-tpl-header h2 { font-size: 16px; }
}


/* ---------------------------------------------------------------------
 * §3.4 — COMPTABILITÉ (.scm-comptabilite + .saisonEc)
 * ---------------------------------------------------------------------
 * Structure :
 *   .contentTabStd × N sections
 *     .saisonEc (bandeau exercice comptable, padding 25 50)
 *     h2.flol (titre de section)
 *     a.btnStd.dark.flor (bouton "Ajouter une recette", "Clôturer saison")
 *     .overflowTab (déjà overflow-x:auto en desktop)
 *       table.tableStd avec 12+ colonnes (1 par mois)
 *
 * Le motif h2.flol + btnStd.flor est partagé avec d'autres pages
 * (Profs, Cours, Tarifs, Grades...) — le patch ci-dessous profite
 * à toutes ces pages également.
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Bandeau saison comptable : padding plus raisonnable */
	.saisonEc {
		padding: 14px 16px;
		font-size: 15px;
		margin: 0 0 16px 0;
	}
}

@media (max-width: 768px) {
	/* Pattern « h2.flol + btnStd.flor » : stack vertical, le bouton sous le titre */
	.contentTabStd > h2.flol,
	.contentTabStd > div > h2.flol {
		float: none;
		width: 100%;
	}
	.contentTabStd > a.btnStd.flor,
	.contentTabStd > div > a.btnStd.flor {
		float: none;
		margin: 8px 0 0 0;
		display: block;
		width: 100%;
	}
	/* Annule la marge droite du marR10 inline qui n'a plus de sens en stack */
	.contentTabStd > div > a.btnStd.flor.marR10 { margin: 6px 0 0 0 !important; }

	.contentTabStd { padding: 0 0 20px 0; }
	.contentTabStd h2 { font-size: 14px; }

	.saisonEc {
		padding: 10px 12px;
		font-size: 13px;
		margin: 0 0 12px 0;
	}
}


/* ---------------------------------------------------------------------
 * §3.5 — LISTE MEMBRES (.scm-filter-bar + .scm-table-sticky-wrap)
 * ---------------------------------------------------------------------
 * Structure :
 *   .contentTabStd
 *     > div (header)
 *         h2.flol "LISTE DES MEMBRES"
 *         a.btnStd.dark.flor × 2-3 (Ajout rapide, Ajouter, Nettoyage)
 *     > .scm-filter-bar
 *         .scm-filter-row × N (DISCIPLINE, ÉTAT, etc.)
 *           .scm-filter-label + .scm-filter-btns > .scm-mb-filter-btn × N
 *     > .scm-membres-search
 *         input.inputStd.search (max-width 400 desktop)
 *     > .scm-table-sticky-wrap
 *         table.tableStd#addMembreTab (min-width:1900 fixed)
 *
 * Le header (3 boutons flottés) est déjà couvert par §3.4 (pattern
 * h2.flol + btnStd.flor partagé). Reste à patcher :
 *   - .scm-filter-bar / .scm-filter-row : passer le label au-dessus
 *     des boutons sur ≤768px (sinon labels écrasés contre la marge).
 *   - .scm-membres-search : retirer le max-width:400 sur ≤768px.
 *   - .scm-table-sticky-wrap : adapter la max-height (qui dépend de
 *     100vh - 320px desktop, mais le header est plus haut en mobile).
 * --------------------------------------------------------------------- */

@media (max-width: 1024px) {
	/* Sticky wrap : recalcule la max-height car le header mobile est
	   plus haut (titre + boutons stackés + filtres + recherche) */
	.scm-table-sticky-wrap { max-height: calc(100vh - 240px); }

	/* Filtres : labels et boutons un poil compactés */
	.scm-filter-row   { gap: 6px; }
	.scm-filter-label { min-width: 70px; font-size: 10px; }
	.scm-filter-btns .scm-mb-filter-btn,
	.scm-filter-btns .tech-filter-btn {
		font-size: 10px;
		padding: 4px 8px;
	}
}

@media (max-width: 768px) {
	/* Filtres : label AU-DESSUS des boutons (au lieu de à côté) */
	.scm-filter-bar { padding: 8px 10px; margin-bottom: 12px; }
	.scm-filter-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	.scm-filter-row + .scm-filter-row {
		border-top: 1px solid #e0e0e0;
		padding-top: 8px;
		margin-top: 8px;
	}
	.scm-filter-label {
		min-width: 0;
		width: 100%;
	}
	.scm-filter-btns {
		width: 100%;
	}

	/* Champ recherche : pleine largeur (le max-width:400 desktop bridé) */
	.scm-membres-search .inputStd.search { max-width: 100%; }

	/* La table reste avec min-width:1900px → scroll horizontal natif via
	   le .scm-table-sticky-wrap qui a déjà overflow:auto. C'est volontaire :
	   la fiche membre est riche en colonnes, mieux vaut scroll que tasser. */
	.scm-table-sticky-wrap { max-height: calc(100vh - 280px); }
}

@media (max-width: 480px) {
	.scm-filter-bar { padding: 6px 8px; margin-bottom: 10px; }
	.scm-filter-btns .scm-mb-filter-btn,
	.scm-filter-btns .tech-filter-btn {
		font-size: 10px;
		padding: 3px 7px;
	}
	/* Recherche un peu plus petite en hauteur pour libérer de l'espace */
	.scm-membres-search .inputStd.search { height: 32px; }
}
.scm-upd-progress-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.scm-upd-progress-list li {
	padding: 8px 4px;
	font-size: 14px;
	border-bottom: 1px solid #f5f5f5;
}
.scm-upd-progress-list li:last-child { border-bottom: none; }
.scm-upd-phase-ok    { color: #1b5e20; }
.scm-upd-phase-doing { color: #1565c0; font-weight: 500; }
.scm-upd-phase-err   { color: #b71c1c; }
.scm-upd-phase-todo  { color: #bbb; }
.scm-upd-phase-progress { color: #888; font-size: 12px; margin-left: 4px; }
.scm-upd-phase-err-msg  { color: #b71c1c; font-style: italic; margin-left: 6px; }
.scm-upd-progress-actions {
	margin-top: 16px;
	text-align: right;
}

/* Disabled state pour .btnStd */
.btnStd[disabled],
button.btnStd[disabled],
input.btnStd[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}


/* =====================================================================
 * Lot 20.7.8 E3/E4 — Fiche examen (rubrique 35)
 *   Header card + section participants + modales
 * ===================================================================== */

/* Header */
.scm-exd-tpl-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	margin-bottom: 16px;
}
.scm-exd-back-link {
	display: inline-block;
	margin-bottom: 6px;
	color: #6b7280;
	font-size: 12px;
	text-decoration: none;
}
.scm-exd-back-link:hover { color: #2c3e50; text-decoration: underline; }
.scm-exd-title {
	margin: 0;
	font-size: 18px;
	color: #2c3e50;
}
.scm-exd-title-sep { color: #ccc; margin: 0 6px; }
.scm-exd-subtitle {
	margin: 4px 0 0;
	color: #888;
	font-size: 13px;
}
.scm-exd-statut-wrap { flex-shrink: 0; }

/* Card infos */
.scm-exd-header-card {
	background: #f9fafb;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	padding: 14px 18px;
	margin-bottom: 20px;
}
.scm-exd-info-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 10px 24px;
}
.scm-exd-info-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.scm-exd-info-label {
	color: #6b7280;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.scm-exd-info-value { color: #2c3e50; font-size: 14px; }
.scm-exd-info-empty { color: #999; font-style: italic; }

/* Section participants */
.scm-exd-participants-section { margin-top: 12px; }
.scm-exd-participants-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
.scm-exd-section-title {
	margin: 0;
	font-size: 16px;
	color: #2c3e50;
}
.scm-exd-count { color: #888; font-weight: normal; font-size: 14px; margin-left: 4px; }
/* Définition consolidée plus bas (.scm-exd-participants-actions) — alignement horizontal. */
.scm-exd-empty { margin: 20px 0; }

/* Tableau participants */
.scm-exd-participants-tbl select.selectStd { min-width: 130px; }
.scm-exd-type-badge {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.4px;
}
.scm-exd-type-badge--membre  { background: #dbeafe; color: #1e40af; }
.scm-exd-type-badge--externe { background: #fef3c7; color: #92400e; }
.scm-exd-code  { color: #888; font-size: 12px; }
.scm-exd-email { color: #6b7280; font-size: 11px; }

/* Pastille couleur + nom du grade (chip) */
.scm-exd-grade-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
}
.scm-exd-grade-dot {
	display: inline-block;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--dot-color, #ccc);
	border: 1px solid rgba(0, 0, 0, 0.12);
	flex-shrink: 0;
}
.scm-exd-grade-name { color: #2c3e50; }
.scm-exd-grade-empty { color: #999; font-style: italic; font-size: 13px; }

.scm-exd-montant {
	display: block;
	margin-top: 2px;
	color: #6b7280;
	font-size: 11px;
}

/* Badge promotion */
.scm-exd-promo-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 600;
}
.scm-exd-promo-badge--yes { background: #d1fae5; color: #065f46; }
.scm-exd-promo-badge--no  { background: #f3f4f6; color: #6b7280; }

/* Modale fiche examen (générique pour ajout membre / externe) */
.scm-exd-modal { text-align: left; }
.scm-exd-modal-row {
	margin-bottom: 12px;
}
.scm-exd-modal-row label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	color: #4b5563;
	font-weight: 600;
}
.scm-exd-modal-label {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	color: #4b5563;
	font-weight: 600;
}
.scm-exd-modal-help {
	display: block;
	margin-top: 3px;
	color: #6b7280;
	font-size: 11px;
	font-style: italic;
}
.scm-exd-modal-subtitle {
	margin: 0 0 12px;
	color: #6b7280;
	font-size: 13px;
}

/* Autocomplete (modale ajout membre) */
.scm-exd-autocomplete-list {
	max-height: 180px;
	overflow-y: auto;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	background: #fff;
	margin-top: 4px;
}
.scm-exd-autocomplete-list:empty { border: 0; }
.scm-exd-autocomplete-item {
	display: block;
	padding: 6px 10px;
	color: #2c3e50;
	text-decoration: none;
	border-bottom: 1px solid #f3f4f6;
	font-size: 13px;
}
.scm-exd-autocomplete-item:last-child { border-bottom: 0; }
.scm-exd-autocomplete-item:hover { background: #f9fafb; }
.scm-exd-autocomplete-item small { color: #888; margin-left: 6px; }
.scm-exd-autocomplete-empty {
	padding: 8px 10px;
	color: #999;
	font-style: italic;
	font-size: 12px;
}

/* Examen introuvable */
.scm-exd-not-found {
	padding: 30px;
	text-align: center;
	color: #6b7280;
}
.scm-exd-not-found i { font-size: 32px; color: #b91c1c; margin-bottom: 10px; }
.scm-exd-not-found p { margin: 6px 0 14px; }

/* =====================================================================
 * Lot 20.7.8 E5 — Refonte fiche examen (calque stages-details)
 * ---------------------------------------------------------------------
 * Réutilise au maximum les classes .scm-stages-* / .scm-stage-* déjà
 * définies plus haut. N'introduit que les classes .scm-exd-* spécifiques
 * à l'examen : titre composé, grades visés (form), résultats, promotion.
 * ===================================================================== */

/* ---- État vide / page introuvable ---- */
.scm-exd-empty-icon {
	font-size: 32px;
	color: #cc6f6f;
	display: block;
	margin-bottom: 10px;
}
.scm-exd-empty-icon--small {
	font-size: 28px;
	color: #bbb;
	margin-bottom: 8px;
}
.scm-exd-empty-back-wrap { margin-top: 14px; }

/* ---- Header (titre + sous-ligne) ---- */
.scm-exd-title {
	margin: 6px 0 3px;
	font-size: 18px;
	color: #2c3e50;
	font-weight: 600;
}
.scm-exd-title-icon { color: #1f8090; }
.scm-exd-title-sep  { color: #ccc; margin: 0 6px; font-weight: normal; }
.scm-exd-statut-inline {
	margin-left: 8px;
	font-size: 11px;
	vertical-align: middle;
}
.scm-exd-subtitle {
	color: #888;
	font-size: 12px;
	margin: 0;
}
.scm-exd-subtitle-icon { color: #b8860b; }

/* ---- Form Infos : ajustements (réutilise .scm-stage-infos-block) ---- */
.scm-exd-infos-row--two {
	grid-template-columns: 1fr 1fr;
}
.scm-exd-form-field--mt { margin-top: 10px; }
.scm-exd-form-help {
	display: block;
	margin-top: 2px;
	margin-bottom: 6px;
	color: #6b7280;
	font-size: 11px;
	font-style: italic;
}
.scm-exd-form-actions {
	text-align: right;
	margin-top: 14px;
}

/* ---- Liste des grades visés (form Infos) ---- */
.scm-exd-grades-list {
	max-height: 220px;
	overflow: auto;
	border: 1px solid #e5e7eb;
	border-radius: 4px;
	padding: 6px;
	background: #fff;
	margin-top: 4px;
}
.scm-exd-grade-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 8px;
	border-bottom: 1px solid #f0f1f5;
	cursor: pointer;
	font-size: 13px;
}
.scm-exd-grade-row:last-child { border-bottom: 0; }
.scm-exd-grade-row-name { flex: 1; color: #2c3e50; }
/* Override du reset global "input[type=checkbox] { display:none }" — la
   liste des grades visés a besoin de checkboxes visibles. Spécificité
   supérieure au reset (0,0,3,1) sans !important. */
.scm-exd-grade-row input[type="checkbox"].scm-exd-grade-cb {
	display: inline-block;
	width: 14px;
	height: 14px;
	margin: 0;
	cursor: pointer;
}
.scm-exd-grade-row:has(input:checked) {
	background: #f0f9ff;
}
.scm-exd-grade-hint {
	margin: 0;
	padding: 14px 12px;
	color: #888;
	font-style: italic;
	font-size: 13px;
	text-align: center;
}
.scm-exd-grade-section {
	border-bottom: 1px solid #e5e7eb;
	padding-bottom: 4px;
	margin-bottom: 4px;
}
.scm-exd-grade-section:last-child {
	border-bottom: 0;
	padding-bottom: 0;
	margin-bottom: 0;
}
.scm-exd-grade-section-title {
	margin: 6px 0 4px;
	padding: 4px 8px;
	font-size: 12px;
	font-weight: 600;
	color: #4b5563;
	text-transform: uppercase;
	letter-spacing: 0.4px;
	background: #f9fafb;
	border-radius: 3px;
}
.scm-exd-grade-section-empty {
	margin: 0;
	padding: 4px 12px 8px;
	color: #999;
	font-style: italic;
	font-size: 12px;
}

/* ---- Toolbar onglet Participants ---- */
/* Toolbar header utilisée par stages-details ET examens-details (Lot E3-D — uniformisation). */
.scm-exd-participants-toolbar,
.scm-stage-participants-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.scm-exd-participants-count-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #2c3e50;
}
/* Conteneur des boutons d'action (Ajouter externe / Ajouter membres / Promouvoir) — alignement horizontal. */
.scm-exd-participants-actions,
.scm-stage-participants-actions {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.scm-exd-promo-inline {
	color: #1f6e3a;
	font-weight: 600;
	font-size: 12px;
}
.scm-exd-promo-inline i { margin-right: 2px; }

/* ---- Tableau participants : helpers d'alignement ---- */
.scm-exd-th-center,
.scm-exd-td-center { text-align: center; }
.scm-exd-td-montant {
	font-size: 12px;
	font-weight: 600;
	color: #0e3a44;
}
.scm-exd-montant-zero {
	color: #999;
	font-weight: 400;
	font-style: italic;
}
.scm-exd-td-date {
	font-size: 12px;
	color: #666;
}
.scm-exd-pay-dash {
	color: #999;
	font-size: 11px;
}
.scm-exd-cell-email {
	color: #6b7280;
	font-size: 12px;
}

/* ---- Sélecteur résultat (calque visuel paiement) ---- */
.scm-exd-resultat-select {
	font-size: 11px;
	font-weight: 600;
	padding: 3px 6px;
	border: 1px solid transparent;
	border-radius: 12px;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: 0.3px;
}
.scm-exd-resultat-select:focus {
	outline: 2px solid rgba(31, 128, 144, 0.3);
}
.scm-exd-resultat-statut-inscrit {
	background: #e8e8e8;
	color: #555;
}
.scm-exd-resultat-statut-reussi {
	background: #d8f0e0;
	color: #1f6e3a;
}
.scm-exd-resultat-statut-echoue {
	background: #f0d8d8;
	color: #8a3535;
}
.scm-exd-resultat-statut-absent {
	background: #fde6c8;
	color: #b35900;
}

/* ---- Pastille "Promu" inline dans la cellule Grade visé ---- */
.scm-exd-promo-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	margin-left: 4px;
	background: #d1fae5;
	color: #065f46;
	border-radius: 50%;
	font-size: 10px;
	vertical-align: middle;
}

/* ---- Boutons actions (variantes de .scm-stage-action) ---- */
.scm-exd-action-promote:hover {
	background: #e6f6ec;
	color: #1f6e3a;
}
.scm-exd-action-demote:hover {
	background: #fdf3e8;
	color: #b08b1c;
}

/* ============================================================
 * Lot Comm — Communications (mailing + rappels auto, 2026-05-16)
 * ============================================================ */

/* --- Liste --- */
.scm-comm-empty {
	text-align: center;
	padding: 60px 20px;
	color: #888;
}
.scm-comm-empty i { font-size: 48px; color: var(--col-com-bar); opacity: .5; display: block; margin-bottom: 16px; }
.scm-comm-empty p { font-size: 14px; margin: 0 0 20px; }

.scm-comm-list-table { width: 100%; }
.scm-comm-list-table td  { vertical-align: middle; }
.scm-comm-list-table tr:hover { background: rgba(232,128,105,0.06); }
.scm-comm-actions { text-align: center; }

.scm-comm-stats-inline { font-size: 12px; white-space: nowrap; }
.scm-comm-stat-ok { color: #1e8449; font-weight: 600; }
.scm-comm-stat-ko { color: #c0392b; font-weight: 600; }

/* --- Badges statut --- */
.scm-comm-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .03em;
}
.scm-comm-status--draft       { background: #e8e8e8; color: #555; }
.scm-comm-status--scheduled   { background: #fff3cd; color: #8a6d3b; }
.scm-comm-status--sending     { background: #d1ecf1; color: #0c5460; }
.scm-comm-status--sent        { background: #d8f0e0; color: #1e8449; }
.scm-comm-status--failed      { background: #fadbd8; color: #c0392b; }
.scm-comm-status--cancelled   { background: #e8e8e8; color: #888; }
.scm-comm-status--pending     { background: #e8e8e8; color: #555; }
.scm-comm-status--bounced     { background: #fadbd8; color: #c0392b; }
.scm-comm-status--unsubscribed{ background: #fdf3e8; color: #b08b1c; }

/* --- Composer : étapes --- */
.scm-comm-step {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 20px 24px;
	margin-bottom: 16px;
}
.scm-comm-step legend {
	font-size: 14px;
	font-weight: 600;
	color: var(--col-com-text);
	padding: 0 8px;
}
.scm-comm-step-num {
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	text-align: center;
	border-radius: 50%;
	background: var(--col-com-bar);
	color: #fff;
	font-size: 11px;
	margin-right: 6px;
}

/* --- Audience radios --- */
.scm-comm-audience-options { display: flex; flex-direction: column; gap: 8px; }
.scm-comm-radio-row {
	display: block;
	padding: 10px 14px;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}
.scm-comm-radio-row:hover { background: rgba(232,128,105,0.06); border-color: var(--col-com-hover); }
.scm-comm-radio-row input[type="radio"] { margin-right: 8px; }
.scm-comm-radio-row span strong { font-size: 13px; }

/* Sous-bloc révélé quand le radio est coché */
.scm-comm-audience-sub {
	display: none;
	margin-top: 10px;
	padding-left: 24px;
	font-size: 13px;
}
.scm-comm-audience-sub--open { display: block; }

.scm-comm-chk {
	display: inline-block;
	margin: 4px 12px 4px 0;
	font-size: 12px;
	cursor: pointer;
}
.scm-comm-chk input[type="checkbox"] { margin-right: 4px; }

.scm-comm-audience-count {
	margin-top: 16px;
	padding: 10px 14px;
	background: var(--col-com-soft);
	border-radius: 6px;
	font-size: 13px;
	color: var(--col-com-text);
}
.scm-comm-audience-count i { color: var(--col-com-bar); }
#scm-comm-recipients-count { font-weight: 700; font-size: 16px; }

/* --- Trix custom pour comm --- */
.scm-comm-vars-row {
	display: flex;
	gap: 8px;
	margin: 4px 0 6px;
}
.scm-comm-trix { min-height: 200px; }

/* Menu variables (modale) */
.scm-comm-vars-menu {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 6px;
	max-height: 360px;
	overflow-y: auto;
	text-align: left;
}
.scm-comm-vars-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 10px;
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 4px;
	cursor: pointer;
	transition: background .15s, border-color .15s;
	text-align: left;
}
.scm-comm-vars-item:hover { background: var(--col-com-soft); border-color: var(--col-com-bar); }
.scm-comm-vars-item code {
	background: #1d1e3a;
	color: #fff;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 11px;
	white-space: nowrap;
}
.scm-comm-vars-item span { font-size: 12px; color: #555; }

/* Aperçu (modale) */
.scm-comm-preview-meta {
	background: #f7f7f9;
	padding: 12px 16px;
	border-radius: 6px;
	margin-bottom: 16px;
	font-size: 13px;
	text-align: left;
}
.scm-comm-preview-meta > div { padding: 2px 0; }
.scm-comm-preview-body {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	padding: 20px;
	text-align: left;
	max-height: 460px;
	overflow-y: auto;
}

/* Mode envoi */
.scm-comm-send-mode { display: flex; flex-direction: column; gap: 8px; }
.scm-comm-send-actions {
	margin-top: 20px;
	display: flex;
	justify-content: flex-end;
	gap: 8px;
}

/* --- Vue détails : stats + corps --- */
.scm-comm-stats {
	display: flex;
	gap: 16px;
	margin: 16px 0;
}
.scm-comm-stat {
	flex: 1;
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 16px;
	text-align: center;
}
.scm-comm-stat-num {
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
}
.scm-comm-stat-num--ok    { color: #1e8449; }
.scm-comm-stat-num--ko    { color: #c0392b; }
.scm-comm-stat-num--unsub { color: #b08b1c; }
.scm-comm-stat-label {
	font-size: 11px;
	text-transform: uppercase;
	color: #888;
	margin-top: 4px;
	letter-spacing: .03em;
}

.scm-comm-body-box,
.scm-comm-recipients-box {
	background: #fff;
	border: 1px solid #e8e8e8;
	border-radius: 8px;
	padding: 20px 24px;
	margin-top: 16px;
}
.scm-comm-body-box h3,
.scm-comm-recipients-box h3 {
	margin: 0 0 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--col-com-text);
}
.scm-comm-body-rendered {
	padding: 16px;
	background: #fafafa;
	border-radius: 6px;
	font-size: 13px;
	line-height: 1.6;
}

/* ============================================================
 * Lot Comm — Onglet Paramètres « Rappels auto » (2026-05-16)
 * ============================================================ */
.scm-comm-defaults-block {
	background: #fafafa;
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	padding: 16px 20px;
	margin-bottom: 16px;
}
.scm-comm-defaults-block h4 {
	margin: 0 0 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--col-com-text);
}
.scm-comm-defaults-block h4 i { color: var(--col-com-bar); margin-right: 4px; }
.scm-comm-defaults-row {
	display: flex;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.scm-comm-defaults-actions {
	display: flex;
	justify-content: flex-end;
	margin-top: 16px;
}
.scm-comm-help {
	font-size: 11px;
	color: #888;
	margin: 4px 0 0;
}
.scm-comm-help code {
	background: #1d1e3a;
	color: #fff;
	padding: 2px 5px;
	border-radius: 3px;
	font-size: 10px;
}

/* ============================================================
 * Lot Comm — Style des checkboxes (whitelistées via .scm-comm-cb
 * dans la règle globale ligne 1508 ; pas de !important nécessaire).
 * ============================================================ */
input[type="checkbox"].scm-comm-cb {
	width: 14px;
	height: 14px;
	margin: 0 4px 0 0;
	vertical-align: middle;
	cursor: pointer;
}

/* ============================================================
 * Lot Comm S5 — Sous-onglets Paramètres > Communications +
 * liste des templates + page d'édition (2026-05-16)
 * ============================================================ */

/* --- Barre des sous-onglets dans Paramètres > Communications --- */
.scm-pg-subtabs {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid #e8e8e8;
	margin-bottom: 16px;
	padding: 0 4px;
}
.scm-pg-subtab-btn {
	background: none;
	border: 1px solid transparent;
	border-bottom: none;
	padding: 10px 16px;
	font-size: 13px;
	color: #666;
	cursor: pointer;
	border-radius: 6px 6px 0 0;
	transition: background .15s, color .15s;
}
.scm-pg-subtab-btn:hover { background: rgba(232,128,105,0.06); color: var(--col-com-text); }
.scm-pg-subtab-btn.active {
	background: #fff;
	border-color: #e8e8e8;
	color: var(--col-com-text);
	font-weight: 600;
	margin-bottom: -1px;
}
.scm-pg-subtab-btn i { margin-right: 4px; }

.scm-pg-subtab-content { padding: 8px 0; }

/* --- Liste des templates (sous-onglet Modèles) --- */
.scm-comm-tpl-list { width: 100%; }
.scm-comm-tpl-list td  { vertical-align: middle; }
.scm-comm-tpl-list tr:hover { background: rgba(232,128,105,0.06); }
.scm-comm-tpl-list code { font-size: 11px; color: #555; }

.scm-comm-tpl-actions {
	display: flex;
	gap: 8px;
	align-items: center;
}
.scm-comm-tpl-lang {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	color: #555;
}
.scm-tpl-langs {
	font-size: 11px;
	letter-spacing: .04em;
	color: #888;
}
.scm-tpl-actions { white-space: nowrap; }
.scm-tpl-actions .scm-stage-action { margin: 0 2px; }
.scm-tpl-systeme { color: var(--col-com-bar); font-size: 11px; }

/* Sélecteurs de langue dans le module Comm : largeur minimale lisible */
#f_tpl_lang,
#scm-comm-tpl-lang-select { min-width: 160px; }

/* Row Identification de la page d'édition template : deux colonnes équilibrées
   pour éviter que les labels longs ("Autres versions linguistiques") se cassent. */
.scm-comm-defaults-row--meta > .form-field { flex: 1 1 240px; min-width: 220px; }
.scm-comm-defaults-row--meta .labelStd     { white-space: nowrap; }

/* Header de la vue détail comm : aligne les boutons d'action côte à côte */
.scm-tpl-header-actions {
	display: inline-flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
}

/* --- Page d'édition (rubrique 39) : pills de langues --- */
.scm-tpl-lang-pills {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 4px;
}
.scm-tpl-lang-pill {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	border: 1px solid #ddd;
	background: #f5f5f5;
	color: #888;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, border-color .15s;
}
.scm-tpl-lang-pill:hover { background: var(--col-com-soft); border-color: var(--col-com-bar); color: var(--col-com-text); }
.scm-tpl-lang-pill--ok      { background: var(--col-com-soft); color: var(--col-com-text); border-color: var(--col-com-hover); }
.scm-tpl-lang-pill--current { background: var(--col-com-bar);  color: #fff; border-color: var(--col-com-bar); cursor: default; }
.scm-tpl-lang-pill--current:hover { background: var(--col-com-bar); color: #fff; }
.scm-tpl-lang-pill--missing { font-style: italic; color: #aaa; }

/* --- Badge "Modèle système" dans le header d'édition --- */
.scm-tpl-badge-systeme {
	display: inline-block;
	margin-left: 12px;
	padding: 2px 8px;
	font-size: 11px;
	font-weight: 600;
	background: var(--col-com-soft);
	color: var(--col-com-text);
	border-radius: 10px;
	vertical-align: middle;
}
.scm-tpl-badge-systeme i { font-size: 10px; margin-right: 2px; }

/* ============================================================
 * Compta — Cards Salaires des instructeurs (2026-05-16)
 * Calque sur .scm-cp-card avec en plus : avatar, pill, état
 * Salarié/Bénévole bascule via classes du card parent.
 * ============================================================ */

.scm-cp-col--salaire {
	margin-top: 16px;
}
/* Variante de .scm-cp-col--salaire placée en haut de l'onglet Recettes &
   Dépenses (annule le margin-top hérité). */
.scm-cp-col--salaire-top {
	margin-top: 0;
	margin-bottom: 20px;
}

.scm-cp-list--salaire {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 12px;
}


.scm-cp-card--instructeur {
	transition: border-color .15s, background .15s;
}
.scm-cp-card--instructeur.scm-cp-card--salarie {
	border-color: #c5d2e0;
	background: linear-gradient(180deg, #f7faff 0%, #fff 60%);
}
.scm-cp-card--instructeur.scm-cp-card--benevole {
	background: #fff;
}

/* Avatar initiales */
.scm-cp-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #5b6d8a;
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .03em;
	flex-shrink: 0;
}
.scm-cp-card--benevole .scm-cp-avatar { background: #aaa; }

.scm-cp-instr-name {
	flex: 1;
	font-size: 14px;
	font-weight: 600;
	color: #1d1e3a;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	margin: 0 10px;
}

/* Pill Salarié / Bénévole — un seul des 2 enfants visible selon classe parente */
.scm-salaire-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	flex-shrink: 0;
}
.scm-cp-card--salarie  .scm-salaire-pill { background: #d8e2ef; color: #2c4768; }
.scm-cp-card--benevole .scm-salaire-pill { background: #ececec; color: #888; }
.scm-cp-card--salarie  .scm-salaire-pill__benevole { display: none; }
.scm-cp-card--benevole .scm-salaire-pill__salarie  { display: none; }

/* Input montant : harmonisé avec les autres cards */
.scm-salaire-amount { text-align: right; }

/* ============================================================
 * Compta UX 2026-05-16 — Validation mensuelle (badge + encart)
 * ============================================================ */

/* Badge en haut à droite de chaque card mois */
.scm-cpt-month-card { position: relative; }
.scm-cpt-month-card__validation {
	position: absolute;
	top: 6px;
	right: 6px;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	z-index: 2;
}
.scm-cpt-month-card__validation--ok {
	background: #d8f0e0;
	color: #1e8449;
}
.scm-cpt-month-card__validation--pending {
	background: #fdf3e8;
	color: #b08b1c;
}
.scm-cpt-month-card--validated {
	border-color: #b6dec3;
}
.scm-cpt-month-card--pending {
	border-color: #f0d9a8;
}

/* Encart "Saison complète" */
.scm-cpt-saison-complete {
	display: flex;
	align-items: center;
	gap: 16px;
	background: linear-gradient(135deg, #d8f0e0 0%, #f0fbf3 100%);
	border: 1px solid #b6dec3;
	border-radius: 10px;
	padding: 16px 20px;
	margin: 16px 0 24px;
}
.scm-cpt-saison-complete__icon {
	font-size: 28px;
	color: #1e8449;
	flex-shrink: 0;
}
.scm-cpt-saison-complete__text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.scm-cpt-saison-complete__text strong { color: #1e8449; font-size: 14px; }
.scm-cpt-saison-complete__text span   { color: #2c5f3f; font-size: 12px; }

/* Bouton validation dans la modale détail mois */
.scm-cpt-mdt-validation {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
	padding: 12px 16px;
	border-top: 1px dashed #e8e8e8;
}
.scm-cpt-mdt-validation__info {
	flex: 1;
	font-size: 13px;
	color: #555;
	display: flex;
	align-items: center;
	gap: 8px;
}
.scm-cpt-mdt-validation__info--pending { color: #888; }
.scm-cpt-mdt-validation__icon--ok      { color: #1e8449; }
.scm-cpt-mdt-validation__icon--pending { color: #b08b1c; }
.scm-cpt-mdt-validation__meta {
	font-size: 11px;
	color: #888;
	margin-left: 6px;
}

/* ============================================================
 * Lot Comm S6 — Bandeau langue + template dans le composer
 * ============================================================ */
.scm-comm-compose-meta {
	display: grid;
	grid-template-columns: minmax(160px, 1fr) 2fr;
	gap: 16px;
	margin-bottom: 16px;
	padding: 12px 14px;
	background: var(--col-com-soft);
	border-radius: 6px;
}
/* 10/09/2026 : libellé + sélecteur sur UNE ligne (le labelStd de base est en bloc à 20 % → « Langue d'envoi » se coupait) */
.scm-comm-compose-meta .form-field { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
.scm-comm-compose-meta .labelStd { font-size: 12px; color: var(--col-com-text); display: inline-block; width: auto; min-width: 0; flex: 0 0 auto; white-space: nowrap; line-height: 1.4; margin: 0; }
.scm-comm-compose-meta select { width: 100%; flex: 1 1 auto; min-width: 0; }

/* ============================================================
 * Wizard Réinscriptions (Administratif > Réinscriptions)
 * 2-col layout, sélecteur saison, recherche live, tri clic.
 * ============================================================ */
.scm-reinsc-section-head {
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e6e8ee;
}
.scm-reinsc-section-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.scm-reinsc-section-title i {
	color: #2c5f9e;
	font-size: 18px;
}
.scm-reinsc-section-intro {
	margin: 0 0 4px;
	font-size: 13px;
	color: #666;
	line-height: 1.5;
	max-width: 880px;
}
.scm-reinsc-section-intro:last-child { margin-bottom: 0; }

.scm-reinsc-empty-msg {
	color: #888;
	font-size: 13px;
}

.scm-reinsc-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	padding: 12px 14px;
	background: #f8f9fb;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
}

.scm-reinsc-saison-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.scm-reinsc-saison-label {
	font-size: 12px;
	color: #555;
	margin-right: 4px;
	font-weight: 500;
}
.scm-reinsc-saison-btn {
	padding: 5px 12px;
	border: 1px solid #ccd0d8;
	background: #fff;
	color: #444;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.scm-reinsc-saison-btn:hover {
	border-color: #888;
	background: #f0f2f5;
}
.scm-reinsc-saison-btn.is-active {
	background: #2c5f9e;
	border-color: #2c5f9e;
	color: #fff;
	font-weight: 500;
}

.scm-reinsc-search-wrap {
	position: relative;
	max-width: 360px;
	margin-bottom: 16px;
}
.scm-reinsc-search-icon {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	color: #888;
	font-size: 13px;
	pointer-events: none;
}
.scm-reinsc-search-input {
	width: 100%;
	padding: 7px 10px 7px 30px;
	border: 1px solid #ccd0d8;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
}
.scm-reinsc-search-input:focus {
	outline: none;
	border-color: #2c5f9e;
}

.scm-reinsc-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
@media (max-width: 1100px) {
	.scm-reinsc-layout { grid-template-columns: 1fr; }
}

.scm-reinsc-col {
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	min-height: 320px;
}

.scm-reinsc-col-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 14px;
	border-bottom: 1px solid #e6e8ee;
	background: #fafbfd;
	border-radius: 6px 6px 0 0;
}
.scm-reinsc-col-title {
	margin: 0;
	font-size: 14px;
	color: #333;
	display: flex;
	align-items: center;
	gap: 8px;
}
.scm-reinsc-col-title i { color: #2c5f9e; }
.scm-reinsc-col-saison {
	color: #666;
	font-weight: 400;
	font-size: 12px;
	margin-left: 4px;
}
.scm-reinsc-col-count {
	font-size: 12px;
	color: #666;
	display: flex;
	align-items: baseline;
	gap: 4px;
}
.scm-reinsc-col-count > span:first-child {
	font-size: 16px;
	color: #2c5f9e;
	font-weight: 600;
}
.scm-reinsc-col-count-label { color: #888; }

.scm-reinsc-table-wrap {
	flex: 1;
	overflow-y: auto;
	max-height: 520px;
}
.scm-reinsc-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}
.scm-reinsc-table thead th {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 2px solid #e6e8ee;
	font-size: 12px;
	color: #555;
	padding: 8px 10px;
	text-align: left;
	user-select: none;
	z-index: 1;
}
.scm-reinsc-table thead th[data-sort] {
	cursor: pointer;
}
.scm-reinsc-table thead th[data-sort]:hover { color: #2c5f9e; }
.scm-reinsc-table thead th.is-sort-asc::after  { content: ' ▲'; font-size: 10px; color: #2c5f9e; }
.scm-reinsc-table thead th.is-sort-desc::after { content: ' ▼'; font-size: 10px; color: #2c5f9e; }
.scm-reinsc-th-photo { width: 52px; text-align: center !important; }
/* Convention alignement : Nom/Prénom à gauche (hérité), Grade centré.
   Colonnes Nom et Prénom légèrement élargies pour respirer.
   !important : override de .tableStd tr th/td (spécificité supérieure). */
.scm-reinsc-th-nom,    .scm-reinsc-td-nom    { min-width: 140px; }
.scm-reinsc-th-prenom, .scm-reinsc-td-prenom { min-width: 130px; }
.scm-reinsc-th-grade,  .scm-reinsc-td-grade  { text-align: center !important; }

.scm-reinsc-table tbody tr {
	border-bottom: 1px solid #f0f2f5;
	transition: background 0.1s;
}
.scm-reinsc-row--source { cursor: pointer; }
.scm-reinsc-row--source:hover    { background: #f5f7fa; }
.scm-reinsc-row.is-selected      { background: #e8f0f9 !important; }
.scm-reinsc-row.is-selected td   { color: #1e3d6b; }

.scm-reinsc-table tbody td {
	padding: 6px 10px;
	font-size: 13px;
	color: #333;
	vertical-align: middle;
}
.scm-reinsc-td-photo { width: 52px; text-align: center; }
.scm-reinsc-td-nom    { font-weight: 500; }

.scm-reinsc-photo {
	display: inline-block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	background: #eef0f4;
	border: 1px solid #d8dce4;
	vertical-align: middle;
}
.scm-reinsc-photo--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 14px;
}

.scm-reinsc-empty-row td {
	text-align: center !important;
	color: #888;
	font-style: italic;
	padding: 24px 10px !important;
}

.scm-reinsc-selection-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 14px;
	border-top: 1px solid #e6e8ee;
	background: #fafbfd;
	border-radius: 0 0 6px 6px;
}

/* Bouton "Tout sélectionner les visibles" (commun aux 3 onglets Administratif) */
.scm-reinsc-select-all-btn,
.scm-dipl-select-all-btn,
.scm-fact-select-all-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	margin-left: 12px;
	background: #fff;
	border: 1px solid #ccd0d8;
	color: #2c5f9e;
	font-size: 12px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.scm-reinsc-select-all-btn:hover,
.scm-dipl-select-all-btn:hover,
.scm-fact-select-all-btn:hover {
	background: #eef4fa;
	border-color: #2c5f9e;
}
.scm-reinsc-select-all-btn.is-active,
.scm-dipl-select-all-btn.is-active,
.scm-fact-select-all-btn.is-active {
	background: #2c5f9e;
	border-color: #2c5f9e;
	color: #fff;
}
.scm-reinsc-select-all-btn i,
.scm-dipl-select-all-btn i,
.scm-fact-select-all-btn i { font-size: 11px; }
/* Dans la barre Réinscriptions, on garde le bouton à gauche de la phrase de compteur */
.scm-reinsc-selection-bar .scm-reinsc-select-all-btn { margin-left: 0; margin-right: 12px; }
.scm-reinsc-selection-label {
	font-size: 13px;
	color: #555;
}
.scm-reinsc-selection-label > span:first-child {
	font-weight: 600;
	color: #2c5f9e;
}
.scm-reinsc-submit-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Modales SweetAlert (récap + report) */
.scm-reinsc-confirm-list {
	margin: 8px auto;
	padding: 8px 16px;
	max-height: 220px;
	overflow-y: auto;
	background: #f8f9fb;
	border: 1px solid #e6e8ee;
	border-radius: 4px;
	text-align: left;
	font-size: 13px;
}
.scm-reinsc-confirm-list li { padding: 2px 0; }
.scm-reinsc-confirm-note {
	margin-top: 10px;
	font-size: 12px;
	color: #888;
	font-style: italic;
}
.scm-reinsc-report-list {
	margin: 8px 0;
	padding-left: 18px;
	text-align: left;
	font-size: 13px;
	color: #333;
}
.scm-reinsc-report-list li { padding: 2px 0; }
.scm-reinsc-report-warn-title {
	margin-top: 12px;
	font-size: 13px;
	color: #b08b1c;
	font-weight: 500;
	text-align: left;
}
.scm-reinsc-report-warn {
	margin: 4px 0 0;
	padding-left: 18px;
	text-align: left;
	font-size: 12px;
	color: #8a6a14;
}

/* ============================================================
 * Onglet Administratif > Diplômes (génération + envoi batch)
 * ============================================================ */
.scm-dipl-section-head {
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e6e8ee;
}
.scm-dipl-section-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.scm-dipl-section-title i { color: #2c5f9e; font-size: 18px; }
.scm-dipl-section-intro {
	margin: 0 0 4px;
	font-size: 13px;
	color: #666;
	line-height: 1.5;
	max-width: 880px;
}
.scm-dipl-section-intro:last-child { margin-bottom: 0; }
.scm-dipl-empty-msg { color: #888; font-size: 13px; }

.scm-dipl-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
	padding: 12px 14px;
	background: #f8f9fb;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
}
.scm-dipl-saison-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.scm-dipl-saison-label {
	font-size: 12px;
	color: #555;
	margin-right: 4px;
	font-weight: 500;
}
.scm-dipl-saison-btn {
	padding: 5px 12px;
	border: 1px solid #ccd0d8;
	background: #fff;
	color: #444;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.scm-dipl-saison-btn:hover { border-color: #888; background: #f0f2f5; }
.scm-dipl-saison-btn.is-active {
	background: #2c5f9e;
	border-color: #2c5f9e;
	color: #fff;
	font-weight: 500;
}
.scm-dipl-filters {
	display: flex;
	gap: 8px;
}
.scm-dipl-filter {
	padding: 5px 10px;
	border: 1px solid #ccd0d8;
	border-radius: 4px;
	font-size: 12px;
	background: #fff;
}

.scm-dipl-search-wrap {
	position: relative;
	max-width: 360px;
	margin-bottom: 12px;
}
.scm-dipl-search-icon {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	color: #888;
	font-size: 13px;
	pointer-events: none;
}
.scm-dipl-search-input {
	width: 100%;
	padding: 7px 10px 7px 30px;
	border: 1px solid #ccd0d8;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
}
.scm-dipl-search-input:focus {
	outline: none;
	border-color: #2c5f9e;
}

.scm-dipl-table-wrap {
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	max-height: 540px;
	overflow-y: auto;
}
.scm-dipl-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}
.scm-dipl-table thead th {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 2px solid #e6e8ee;
	font-size: 12px;
	color: #555;
	padding: 8px 10px;
	text-align: left;
	user-select: none;
	z-index: 1;
}
.scm-dipl-table thead th[data-sort] { cursor: pointer; }
.scm-dipl-table thead th[data-sort]:hover { color: #2c5f9e; }
.scm-dipl-table thead th.is-sort-asc::after  { content: ' ▲'; font-size: 10px; color: #2c5f9e; }
.scm-dipl-table thead th.is-sort-desc::after { content: ' ▼'; font-size: 10px; color: #2c5f9e; }
.scm-dipl-th-photo { width: 48px; text-align: center !important; }
.scm-dipl-th-pdf, .scm-dipl-th-email { width: 60px; text-align: center !important; }
.scm-dipl-th-date { width: 100px; }
/* Convention alignement : Nom/Prénom à gauche (hérité), tout le reste centré.
   !important : override de .tableStd tr th/td (spécificité supérieure). */
.scm-dipl-th-discipline, .scm-dipl-td-discipline,
.scm-dipl-th-grade,      .scm-dipl-td-grade,
.scm-dipl-th-date,       .scm-dipl-td-date { text-align: center !important; }

.scm-dipl-table tbody tr {
	border-bottom: 1px solid #f0f2f5;
	cursor: pointer;
	transition: background 0.1s;
}
.scm-dipl-table tbody tr:hover { background: #f5f7fa; }
.scm-dipl-row.is-selected      { background: #e8f0f9 !important; }
.scm-dipl-row.is-selected td   { color: #1e3d6b; }
.scm-dipl-table tbody td {
	padding: 6px 10px;
	font-size: 13px;
	color: #333;
	vertical-align: middle;
}
.scm-dipl-td-photo { text-align: center !important; width: 48px; }
.scm-dipl-td-nom   { font-weight: 500; }
.scm-dipl-td-pdf, .scm-dipl-td-email { text-align: center !important; }

.scm-dipl-photo {
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	background: #eef0f4;
	border: 1px solid #d8dce4;
	vertical-align: middle;
}
.scm-dipl-photo--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 13px;
}

.scm-dipl-status {
	display: inline-block;
	min-width: 22px;
	font-size: 14px;
	font-weight: 600;
}
.scm-dipl-status--ok   { color: #1e8449; }
.scm-dipl-status--todo { color: #999; }
.scm-dipl-status--err  { color: #c0392b; }

.scm-dipl-empty-row td {
	text-align: center !important;
	color: #888;
	font-style: italic;
	padding: 24px 10px !important;
}

.scm-dipl-actions-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding: 10px 14px;
	background: #fafbfd;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
}
.scm-dipl-selection-label {
	font-size: 13px;
	color: #555;
}
.scm-dipl-selection-label strong,
.scm-dipl-selection-label > span { font-weight: 600; color: #2c5f9e; }
.scm-dipl-sep { color: #bbb; margin: 0 4px; }
.scm-dipl-actions {
	display: flex;
	gap: 8px;
}
.scm-dipl-act-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* SweetAlert content */
.scm-dipl-confirm-list,
.scm-dipl-report-list {
	margin: 8px 0;
	padding-left: 18px;
	text-align: left;
	font-size: 13px;
	color: #333;
}
.scm-dipl-confirm-list li,
.scm-dipl-report-list li { padding: 2px 0; }
.scm-dipl-force-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 13px;
	color: #555;
	cursor: pointer;
}

/* ============================================================
 * Onglet Administratif > Factures membres (batch émission + envoi)
 * ============================================================ */
.scm-fact-section-head {
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e6e8ee;
}
.scm-fact-section-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.scm-fact-section-title i { color: #2c5f9e; font-size: 18px; }
.scm-fact-section-intro {
	margin: 0 0 4px;
	font-size: 13px;
	color: #666;
	line-height: 1.5;
	max-width: 880px;
}
.scm-fact-section-intro:last-child { margin-bottom: 0; }
.scm-fact-empty-msg { color: #888; font-size: 13px; }

.scm-fact-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
	padding: 12px 14px;
	background: #f8f9fb;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
}
.scm-fact-saison-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.scm-fact-saison-label {
	font-size: 12px;
	color: #555;
	margin-right: 4px;
	font-weight: 500;
}
.scm-fact-saison-btn {
	padding: 5px 12px;
	border: 1px solid #ccd0d8;
	background: #fff;
	color: #444;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.scm-fact-saison-btn:hover { border-color: #888; background: #f0f2f5; }
.scm-fact-saison-btn.is-active {
	background: #2c5f9e;
	border-color: #2c5f9e;
	color: #fff;
	font-weight: 500;
}
.scm-fact-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.scm-fact-filter {
	padding: 5px 10px;
	border: 1px solid #ccd0d8;
	border-radius: 4px;
	font-size: 12px;
	background: #fff;
}
.scm-fact-incl-zero {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	color: #555;
	cursor: pointer;
}

.scm-fact-search-wrap {
	position: relative;
	max-width: 360px;
	margin-bottom: 12px;
}
.scm-fact-search-icon {
	position: absolute;
	top: 50%;
	left: 10px;
	transform: translateY(-50%);
	color: #888;
	font-size: 13px;
	pointer-events: none;
}
.scm-fact-search-input {
	width: 100%;
	padding: 7px 10px 7px 30px;
	border: 1px solid #ccd0d8;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
}
.scm-fact-search-input:focus { outline: none; border-color: #2c5f9e; }

.scm-fact-table-wrap {
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	max-height: 540px;
	overflow-y: auto;
}
.scm-fact-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}
.scm-fact-table thead th {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 2px solid #e6e8ee;
	font-size: 12px;
	color: #555;
	padding: 8px 10px;
	text-align: left;
	user-select: none;
	z-index: 1;
}
.scm-fact-table thead th[data-sort] { cursor: pointer; }
.scm-fact-table thead th[data-sort]:hover { color: #2c5f9e; }
.scm-fact-table thead th.is-sort-asc::after  { content: ' ▲'; font-size: 10px; color: #2c5f9e; }
.scm-fact-table thead th.is-sort-desc::after { content: ' ▼'; font-size: 10px; color: #2c5f9e; }
.scm-fact-th-photo { width: 48px; text-align: center !important; }
.scm-fact-th-numero { width: 110px; }
.scm-fact-th-montant { width: 100px; }
.scm-fact-th-pdf, .scm-fact-th-email { width: 60px; text-align: center !important; }
/* Convention alignement : Nom/Prénom à gauche (hérité), tout le reste centré.
   !important : override de .tableStd tr th/td (spécificité supérieure). */
.scm-fact-th-discipline, .scm-fact-td-discipline,
.scm-fact-th-numero,     .scm-fact-td-numero,
.scm-fact-th-montant,    .scm-fact-td-montant { text-align: center !important; }

.scm-fact-table tbody tr {
	border-bottom: 1px solid #f0f2f5;
	cursor: pointer;
	transition: background 0.1s;
}
.scm-fact-table tbody tr:hover { background: #f5f7fa; }
.scm-fact-row.is-selected      { background: #e8f0f9 !important; }
.scm-fact-row.is-selected td   { color: #1e3d6b; }
.scm-fact-table tbody td {
	padding: 6px 10px;
	font-size: 13px;
	color: #333;
	vertical-align: middle;
}
.scm-fact-td-photo { text-align: center !important; width: 48px; }
.scm-fact-td-nom   { font-weight: 500; }
.scm-fact-td-montant { font-variant-numeric: tabular-nums; }
.scm-fact-td-pdf, .scm-fact-td-email { text-align: center !important; }
.scm-fact-td-numero { font-family: monospace; font-size: 12px; color: #555; }

.scm-fact-photo {
	display: inline-block;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
	background: #eef0f4;
	border: 1px solid #d8dce4;
	vertical-align: middle;
}
.scm-fact-photo--placeholder {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: #aaa;
	font-size: 13px;
}
.scm-fact-status {
	display: inline-block;
	min-width: 22px;
	font-size: 14px;
	font-weight: 600;
}
.scm-fact-status--ok   { color: #1e8449; }
.scm-fact-status--todo { color: #999; }
.scm-fact-status--err  { color: #c0392b; }
.scm-fact-empty-row td {
	text-align: center !important;
	color: #888;
	font-style: italic;
	padding: 24px 10px !important;
}

.scm-fact-actions-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 12px;
	padding: 10px 14px;
	background: #fafbfd;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
}
.scm-fact-selection-label {
	font-size: 13px;
	color: #555;
}
.scm-fact-selection-label > span { font-weight: 600; color: #2c5f9e; }
.scm-fact-sep { color: #bbb; margin: 0 4px; }
.scm-fact-actions { display: flex; gap: 8px; }
.scm-fact-act-btn:disabled { opacity: 0.5; cursor: not-allowed; }

.scm-fact-confirm-list,
.scm-fact-report-list {
	margin: 8px 0;
	padding-left: 18px;
	text-align: left;
	font-size: 13px;
	color: #333;
}
.scm-fact-confirm-list li,
.scm-fact-report-list li { padding: 2px 0; }
.scm-fact-force-label {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 13px;
	color: #555;
	cursor: pointer;
}

/* ============================================================
 * Onglet Administratif > Bilan comptable
 * ============================================================ */
.scm-bilan-section-head {
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e6e8ee;
}
.scm-bilan-section-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.scm-bilan-section-title i { color: #2c5f9e; font-size: 18px; }
.scm-bilan-section-intro {
	margin: 0;
	font-size: 13px;
	color: #666;
	line-height: 1.5;
	max-width: 880px;
}
.scm-bilan-empty-msg { color: #888; font-size: 13px; }

.scm-bilan-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
	padding: 12px 14px;
	background: #f8f9fb;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
}
.scm-bilan-saison-picker {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
}
.scm-bilan-saison-label {
	font-size: 12px;
	color: #555;
	margin-right: 4px;
	font-weight: 500;
}
.scm-bilan-saison-btn {
	padding: 5px 12px;
	border: 1px solid #ccd0d8;
	background: #fff;
	color: #444;
	border-radius: 4px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.scm-bilan-saison-btn:hover { border-color: #888; background: #f0f2f5; }
.scm-bilan-saison-btn.is-active {
	background: #2c5f9e;
	border-color: #2c5f9e;
	color: #fff;
	font-weight: 500;
}
/* Gros bouton "Valider et télécharger le bilan" */
.scm-bilan-validate-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 24px 0 8px;
}
.scm-bilan-validate-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 32px;
	background: #2c5f9e;
	border: none;
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(44, 95, 158, 0.25);
	transition: background 0.15s, box-shadow 0.15s;
}
.scm-bilan-validate-btn:hover:not(:disabled) {
	background: #234e85;
	box-shadow: 0 4px 14px rgba(44, 95, 158, 0.35);
}
.scm-bilan-validate-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.scm-bilan-validate-btn i { font-size: 18px; }
.scm-bilan-validate-msg {
	margin: 10px 0 0;
	text-align: center;
	font-size: 13px;
	color: #b08b1c;
}

/* Sous-section "Bilans archivés" — hauteur bornée + scroll */
.scm-bilan-archives-wrap {
	max-height: 340px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
}
.scm-bilan-archives-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
}
.scm-bilan-archives-table thead th {
	position: sticky;
	top: 0;
	background: #fff;
	border-bottom: 2px solid #e6e8ee;
	font-size: 12px;
	color: #555;
	padding: 8px 12px;
	text-align: center;
	z-index: 1;
}
/* Convention alignement : Saison à gauche, Actions à droite, milieu centré */
.scm-bilan-arc-th-saison  { text-align: left  !important; }
.scm-bilan-arc-th-actions { text-align: right !important; }
.scm-bilan-archives-table tbody tr { border-bottom: 1px solid #f0f2f5; }
.scm-bilan-archives-table tbody td {
	padding: 8px 12px;
	font-size: 13px;
	color: #333;
	text-align: center;
	vertical-align: middle;
}
.scm-bilan-arc-saison { text-align: left !important; font-weight: 500; }
.scm-bilan-arc-actions { text-align: right !important; white-space: nowrap; }
.scm-bilan-arc-na {
	color: #999;
	font-style: italic;
}
.scm-bilan-arc-empty td {
	text-align: center !important;
	color: #888;
	font-style: italic;
	padding: 24px 12px !important;
}
.scm-bilan-arc-btn {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 4px 10px;
	border: 1px solid #ccd0d8;
	background: #fff;
	color: #2c5f9e;
	font-size: 12px;
	font-weight: 500;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.12s, border-color 0.12s;
}
.scm-bilan-arc-btn:hover { background: #eef4fa; border-color: #2c5f9e; }
.scm-bilan-arc-btn i { font-size: 11px; }

/* KPI cards */
.scm-bilan-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px;
	margin-bottom: 18px;
}
@media (max-width: 900px) {
	.scm-bilan-kpis { grid-template-columns: repeat(2, 1fr); }
}
.scm-bilan-kpi {
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	padding: 14px 16px;
}
.scm-bilan-kpi-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
}
.scm-bilan-kpi-value {
	font-size: 22px;
	font-weight: 600;
	color: #2c5f9e;
	margin: 4px 0 2px;
	font-variant-numeric: tabular-nums;
}
.scm-bilan-kpi-delta { font-size: 12px; }
.scm-bilan-delta { display: inline-block; font-weight: 500; }
.scm-bilan-delta--up   { color: #1e8449; }
.scm-bilan-delta--down { color: #c0392b; }
.scm-bilan-delta--flat { color: #888; }
.scm-bilan-delta--na   { color: #ccc; }

/* Charts row */
.scm-bilan-charts-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 16px;
}
@media (max-width: 900px) {
	.scm-bilan-charts-row { grid-template-columns: 1fr; }
}
.scm-bilan-chart-card {
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	padding: 14px 16px;
}
.scm-bilan-chart-title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.scm-bilan-chart-card canvas {
	display: block;
	max-width: 100%;
	height: auto;
}
.scm-bilan-monthly-card {
	margin-bottom: 16px;
}
.scm-bilan-monthly-card canvas {
	width: 100% !important;
}

/* Détails */
.scm-bilan-detail-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 900px) {
	.scm-bilan-detail-row { grid-template-columns: 1fr; }
}
.scm-bilan-detail-card {
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	padding: 14px 16px;
}
.scm-bilan-detail-table { width: 100%; margin-top: 4px; border-collapse: collapse; }
.scm-bilan-detail-table th,
.scm-bilan-detail-table td {
	border-bottom: 1px solid #f0f2f5;
	padding: 6px 10px;
	font-size: 13px;
}
.scm-bilan-detail-table th {
	background: #f8f9fb;
	font-size: 12px;
	color: #555;
	text-align: left;
	font-weight: 500;
}
.scm-bilan-detail-table .scm-bilan-num { text-align: right; font-variant-numeric: tabular-nums; }
.scm-bilan-detail-table .scm-bilan-row-tot td {
	font-weight: 600;
	background: #f8f9fb;
	color: #2c5f9e;
}

/* Titres de section (Chiffres clés / Trésorerie / Indicateurs / Répartition) */
.scm-bilan-block-title {
	margin: 22px 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-bottom: 1px solid #e6e8ee;
	padding-bottom: 6px;
}

/* Trésorerie : deux cards solde initial / solde final */
.scm-bilan-treso {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 4px;
}
@media (max-width: 900px) {
	.scm-bilan-treso { grid-template-columns: 1fr; }
}
.scm-bilan-treso-card {
	position: relative;
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	padding: 14px 16px;
}
.scm-bilan-treso-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
}
.scm-bilan-treso-value {
	font-size: 22px;
	font-weight: 600;
	color: #2c5f9e;
	margin: 4px 0 2px;
	font-variant-numeric: tabular-nums;
}
.scm-bilan-treso-hint { font-size: 11px; color: #888; }
.scm-bilan-badge-auto {
	display: inline-block;
	background: #eef4fa;
	color: #2c5f9e;
	font-size: 10px;
	padding: 1px 6px;
	border-radius: 8px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-weight: 600;
}
.scm-bilan-edit-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px;
	background: #fff;
	border: 1px solid #ccd0d8;
	color: #2c5f9e;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	cursor: pointer;
}
.scm-bilan-edit-btn:hover { background: #eef4fa; border-color: #2c5f9e; }
.scm-bilan-edit-btn i { font-size: 10px; }

/* Indicateurs adhérents */
.scm-bilan-indicators {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
	margin-bottom: 4px;
}
@media (max-width: 900px) {
	.scm-bilan-indicators { grid-template-columns: 1fr; }
}
.scm-bilan-indicator {
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	padding: 14px 16px;
}
.scm-bilan-indicator-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
}
.scm-bilan-indicator-value {
	font-size: 20px;
	font-weight: 600;
	color: #2c5f9e;
	margin-top: 4px;
	font-variant-numeric: tabular-nums;
}

/* Meilleurs / pires mois */
.scm-bilan-bw {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin: 12px 0 4px;
}
@media (max-width: 900px) {
	.scm-bilan-bw { grid-template-columns: 1fr; }
}
.scm-bilan-bw-card {
	background: #fff;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	padding: 12px 14px;
}
.scm-bilan-bw-card--best  { border-left: 4px solid #1e8449; }
.scm-bilan-bw-card--worst { border-left: 4px solid #c0392b; }
.scm-bilan-bw-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #888;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.scm-bilan-bw-card--best  .scm-bilan-bw-label i { color: #1e8449; }
.scm-bilan-bw-card--worst .scm-bilan-bw-label i { color: #c0392b; }
.scm-bilan-bw-value {
	font-size: 15px;
	font-weight: 600;
	color: #2c3e50;
	margin-top: 4px;
}
.scm-bilan-bw-amount { color: #666; font-weight: 500; }

/* ============================================================
 * Communication — onglets Réseaux sociaux & Agenda
 * ============================================================ */
.scm-comm-sub-head {
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e6e8ee;
}
.scm-comm-sub-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.scm-comm-sub-title i { color: #2c5f9e; font-size: 18px; }
.scm-comm-sub-intro {
	margin: 0;
	font-size: 13px;
	color: #666;
	line-height: 1.5;
	max-width: 880px;
}

/* --- Réseaux sociaux : formulaire de liens --- */
.scm-comm-reseaux-form {
	max-width: 780px;
}
.scm-comm-reseau-row {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 10px;
}
.scm-comm-reseau-label {
	flex: 0 0 150px;
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #444;
}
.scm-comm-reseau-icon { color: #2c5f9e; font-size: 15px; width: 18px; text-align: center; }
.scm-comm-reseau-input { flex: 1; min-width: 0; }
.scm-comm-reseau-email {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: #666;
	cursor: pointer;
	white-space: nowrap;
}
.scm-comm-reseau-email-txt { user-select: none; }
@media (max-width: 720px) {
	.scm-comm-reseau-row { flex-wrap: wrap; }
	.scm-comm-reseau-input { flex: 1 1 100%; order: 3; }
	.scm-comm-reseau-email { order: 2; }
}
.scm-comm-reseaux-actions { margin-top: 16px; }

/* --- Agenda : config + flux + événements --- */
.scm-comm-agenda-cfg,
.scm-comm-agenda-feed,
.scm-comm-agenda-events {
	margin-bottom: 22px;
}
.scm-comm-agenda-cfg-title {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.scm-comm-agenda-toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 6px;
	font-size: 13px;
	color: #444;
	cursor: pointer;
}
.scm-comm-agenda-cfg-actions { margin-top: 12px; }

.scm-comm-agenda-feed-row {
	display: flex;
	gap: 8px;
	max-width: 620px;
}
.scm-comm-agenda-feed-row input { flex: 1; background: #f8f9fb; }
.scm-comm-agenda-feed-empty {
	font-size: 13px;
	color: #888;
	font-style: italic;
	margin: 0;
}

.scm-comm-agenda-empty {
	font-size: 13px;
	color: #888;
	font-style: italic;
}
.scm-comm-agenda-table { width: 100%; }
.scm-comm-ag-th-date,  .scm-comm-ag-td-date  { width: 110px; }
.scm-comm-ag-th-action { width: 130px; text-align: right !important; }
.scm-comm-ag-td-action { text-align: right; }
.scm-comm-ag-td-lieu   { color: #666; }
.scm-comm-ag-gcal {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border: 1px solid #ccd0d8;
	border-radius: 4px;
	color: #2c5f9e;
	font-size: 12px;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
}
.scm-comm-ag-gcal:hover { background: #eef4fa; border-color: #2c5f9e; }
.scm-comm-ag-gcal i { font-size: 12px; }

/* ============================================================
 * Gabarit e-mail — section "En-tête & pied de page"
 * ============================================================ */
.scm-elay-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 24px;
	margin-top: 14px;
}
@media (max-width: 1000px) {
	.scm-elay-grid { grid-template-columns: 1fr; }
}
.scm-elay-block-title {
	margin: 16px 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.scm-elay-edit .scm-elay-block-title:first-child { margin-top: 0; }
.scm-elay-label {
	display: block;
	margin: 8px 0 3px;
	font-size: 12px;
	color: #666;
}
.scm-elay-image-row {
	display: flex;
	gap: 8px;
	align-items: center;
}
.scm-elay-image-input { flex: 1; }
.scm-elay-textarea {
	width: 100%;
	resize: vertical;
	font-family: inherit;
}
.scm-elay-reseaux-note {
	margin: 12px 0 0;
	font-size: 12px;
	color: #888;
	font-style: italic;
}
.scm-elay-reseaux-note i { color: #2c5f9e; }
.scm-elay-actions { margin-top: 16px; }

.scm-elay-preview-col { min-width: 0; }
.scm-elay-preview {
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	overflow: auto;
	max-height: 540px;
	background: #f4f5f7;
}

/* ============================================================
 * Onglet « Clôture de saison » (rubrique Administratif)
 * ============================================================ */
.scm-cloture-head {
	margin-bottom: 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid #e6e8ee;
}
.scm-cloture-title {
	margin: 0 0 6px;
	font-size: 16px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	display: flex;
	align-items: center;
	gap: 10px;
}
.scm-cloture-title i { color: #e74c3c; font-size: 18px; }
.scm-cloture-intro {
	margin: 0;
	font-size: 13px;
	color: #666;
	line-height: 1.5;
	max-width: 880px;
}
.scm-cloture-block-title {
	margin: 24px 0 10px;
	font-size: 13px;
	font-weight: 600;
	color: #2c3e50;
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

/* État : saison déjà clôturée */
.scm-cloture-closed {
	text-align: center;
	padding: 28px 20px;
	background: #f6f7f9;
	border: 1px solid #e6e8ee;
	border-radius: 8px;
}
.scm-cloture-closed-icon { font-size: 38px; color: #7f8c9b; }
.scm-cloture-closed-title {
	margin: 12px 0 6px;
	font-size: 18px;
	color: #2c3e50;
}
.scm-cloture-closed-lead {
	margin: 0 auto;
	max-width: 560px;
	font-size: 13px;
	color: #666;
	line-height: 1.5;
}

/* Récapitulatif */
.scm-cloture-recap-table {
	max-width: 460px;
}
.scm-cloture-recap-table td { vertical-align: middle; }
.scm-cloture-recap-num {
	text-align: right !important;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
.scm-cloture-recap-total td {
	font-weight: 700;
	color: #2c3e50;
	border-top: 2px solid #d6d9e0;
}

/* Check-list de pré-clôture */
.scm-cloture-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 680px;
}
.scm-cloture-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid #e6e8ee;
	border-radius: 6px;
	margin-bottom: 8px;
	background: #fff;
}
.scm-cloture-check-icon { font-size: 16px; margin-top: 1px; }
.scm-cloture-check.is-ok   .scm-cloture-check-icon { color: #27ae60; }
.scm-cloture-check.is-warn .scm-cloture-check-icon { color: #e67e22; }
.scm-cloture-check.is-warn { background: #fef9f3; border-color: #f0d9bf; }
.scm-cloture-check-body { flex: 1; min-width: 0; }
.scm-cloture-check-label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	color: #2c3e50;
}
.scm-cloture-check-hint {
	display: block;
	font-size: 12px;
	color: #777;
	margin-top: 2px;
}
.scm-cloture-check-detail {
	flex: 0 0 auto;
	font-size: 13px;
	font-weight: 600;
	color: #555;
	font-variant-numeric: tabular-nums;
}

/* Zone danger */
.scm-cloture-danger {
	margin-top: 24px;
	padding: 18px 20px;
	background: #fdf3f2;
	border: 1px solid #f1c8c3;
	border-radius: 8px;
}
.scm-cloture-danger-text {
	margin: 0 0 14px;
	font-size: 13px;
	color: #a3392f;
	line-height: 1.5;
}
.scm-cloture-danger-text i { margin-right: 6px; }
.scm-cloture-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 13px 28px;
	background: #c0392b;
	border: none;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	border-radius: 6px;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(192, 57, 43, 0.25);
	transition: background 0.15s, box-shadow 0.15s;
}
.scm-cloture-btn:hover:not(:disabled) {
	background: #a3392f;
	box-shadow: 0 4px 14px rgba(192, 57, 43, 0.35);
}
.scm-cloture-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.scm-cloture-btn i { font-size: 16px; }

/* ============================================================
   PAGE CONNEXION — sélecteur de langue (drapeaux)
   ============================================================ */
.scm-cxn-help {
	margin: 0 0 18px 0;
	padding: 10px 14px;
	background: #f6f9ff;
	border-left: 3px solid #2c5fb8;
	font-size: 12px;
	color: #444;
	line-height: 1.5;
}

.scm-cxn-langues {
	text-align: center;
	margin: 22px 0 6px;
}
.scm-cxn-langue {
	display: inline-block;
	margin: 0 5px;
	line-height: 0;
	opacity: 0.4;
	transition: opacity 0.15s ease;
}
.scm-cxn-langue:hover { opacity: 0.85; }
.scm-cxn-langue--active { opacity: 1; }
.scm-cxn-langue img {
	width: 26px;
	height: auto;
	border-radius: 2px;
	vertical-align: middle;
}

/* ============================================================
   WIZARD D'INSTALLATION (install.php)
   ============================================================ */
.scm-wiz-steps {
	display: flex; justify-content: center; gap: 6px; flex-wrap: wrap;
	list-style: none; margin: 4px auto 20px; padding: 0; max-width: 760px;
}
.scm-wiz-step {
	display: flex; align-items: center; gap: 6px;
	font-size: 12px; color: #999; padding: 4px 10px;
}
.scm-wiz-step-num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 22px; height: 22px; border-radius: 50%;
	background: #ddd; color: #fff; font-weight: bold; font-size: 12px;
}
.scm-wiz-step--current { color: #333; font-weight: bold; }
.scm-wiz-step--current .scm-wiz-step-num { background: #3085d6; }
.scm-wiz-step--done .scm-wiz-step-num { background: #5cb85c; }
.scm-wiz-error {
	max-width: 600px; margin: 0 auto 18px; padding: 12px 18px;
	background: #fdecea; border: 1px solid #f5c6c2; border-radius: 6px;
	color: #a3392f; text-align: center;
}
.scm-wiz-error p { margin: 3px 0; }
.scm-wiz-intro { color: #666; line-height: 1.5; margin: 0 0 18px; }
.scm-wiz-hint { color: #888; font-size: 12px; line-height: 1.45; margin: 6px 0 0; }
.scm-wiz-h2-sub { margin-top: 26px; }
.scm-wiz-checks { list-style: none; margin: 0 0 10px; padding: 0; }
.scm-wiz-check {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	padding: 9px 12px; border-radius: 6px; margin-bottom: 6px; background: #f5f5f5;
}
.scm-wiz-check-icon { font-weight: bold; width: 18px; text-align: center; }
.scm-wiz-check-lbl { flex: 1; }
.scm-wiz-check-state { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.scm-wiz-check-help { flex-basis: 100%; font-size: 12px; color: #777; line-height: 1.45; }
.scm-wiz-check--ok { background: #eef7ee; }
.scm-wiz-check--ok .scm-wiz-check-icon, .scm-wiz-check--ok .scm-wiz-check-state { color: #4a9d4a; }
.scm-wiz-check--ko { background: #fdecea; }
.scm-wiz-check--ko .scm-wiz-check-icon, .scm-wiz-check--ko .scm-wiz-check-state { color: #c0392b; }
.scm-wiz-check--warn { background: #fff6e5; }
.scm-wiz-check--warn .scm-wiz-check-icon, .scm-wiz-check--warn .scm-wiz-check-state { color: #d08b14; }
.scm-wiz-actions {
	display: flex; justify-content: space-between; align-items: center;
	gap: 12px; margin-top: 24px;
}
.scm-wiz-actions form { margin: 0; }
.scm-wiz-primary { background: #3085d6; }
.scm-wiz-done-title { color: #4a9d4a; text-align: center; }
.scm-wiz-apikey {
	text-align: center; font-family: monospace; font-size: 11px; word-break: break-all;
	background: #f5f5f5; border-radius: 4px; padding: 8px 12px; margin: 6px 0 20px;
}
.scm-wiz-modes { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; }
.scm-wiz-mode {
	flex: 1; min-width: 200px; display: block;
	border: 1px solid #e0e0e0; border-radius: 8px; padding: 18px;
	text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.scm-wiz-mode:hover { border-color: #3085d6; box-shadow: 0 3px 12px rgba(48, 133, 214, 0.15); }
.scm-wiz-mode-title { display: block; font-weight: bold; color: #333; margin-bottom: 6px; }
.scm-wiz-mode-desc { display: block; font-size: 12px; color: #777; line-height: 1.45; }
.scm-wiz-textarea { width: 100%; min-height: 120px; resize: vertical; }
.scm-wiz-disabled { opacity: 0.55; }
.scm-wiz-toggle-row { padding: 12px 0; border-bottom: 1px solid #eee; }
.scm-wiz-toggle-row:last-of-type { border-bottom: none; }
.scm-wiz-toggle-row label { font-weight: 600; cursor: pointer; }
.scm-wiz-toggle-row input[type="checkbox"] { margin-right: 8px; vertical-align: middle; }
.scm-wiz-toggle-hint { margin: 4px 0 0 26px; font-size: 12px; color: #666; }

/* ============================================================
   Date d'inscription (fiche membre admin) — separateur visuel
   Demarque le champ date d'inscription des champs perso au-dessus.
   ============================================================ */
.scm-md-regdate { border-top: 1px solid #ececec; margin-top: 14px; padding-top: 14px; }

/* ============================================================
   MODE APERCU FICHE MEMBRE (?preview=1) — ex-<style> inline (membres-details.tpl)
   Active par la classe .scm-preview-fiche posee sur .contenerMid.
   ============================================================ */
.contenerMid.scm-preview-fiche { margin-left: 0; width: 100%; }
.scm-preview-fiche .contenerMidPad { padding: 10px; }
.scm-preview-fiche .scm-tpl-header a.btnStd { display: none; }
.scm-preview-fiche #scm-admin-section { display: none; }
body:has(.scm-preview-fiche) #preloader,
body:has(.scm-preview-fiche) .contenerLeft,
body:has(.scm-preview-fiche) .topRight { display: none; }

/* ============================================================
   PAGE MEMBRES-PARAMS — ex-<style> inline (membres-params.tpl)
   Selecteurs prefixes .scm-mp-* / .scm-settings-* / .scm-ol-*.
   ============================================================ */
.scm-mp-table { width:100%; border-collapse:collapse; }
.scm-mp-table th { background:#f5f5f5; font-size:11px; font-weight:600; color:#888; text-transform:uppercase; letter-spacing:.4px; padding:8px 10px; text-align:left; border-bottom:2px solid #e0e0e0; }
.scm-mp-table td { padding:9px 10px; border-bottom:1px solid #f0f0f0; vertical-align:middle; font-size:13px; }
.scm-mp-table tr:last-child td { border-bottom:none; }
.scm-mp-table tr:hover td { background:#fafafa; }
.scm-mp-table tr.scm-mp-fixed td { background:#f9f9f9; color:#999; }

.scm-mp-handle { cursor:grab; color:#ccc; font-size:14px; padding:0 4px; }
.scm-mp-handle:hover { color:#888; }

.scm-mp-badge { display:inline-block; font-size:10px; font-weight:bold; padding:2px 6px; border-radius:10px; color:#fff; white-space:nowrap; }
.scm-mp-badge--text, .scm-mp-badge--email, .scm-mp-badge--tel { background:#3498db; }
.scm-mp-badge--date     { background:#1abc9c; }
.scm-mp-badge--textarea { background:#9b59b6; }
.scm-mp-badge--select   { background:#e67e22; }
.scm-mp-badge--radio    { background:#e74c3c; }
.scm-mp-badge--checkbox { background:#16a085; }
.scm-mp-badge--file     { background:#8e44ad; }
.scm-mp-badge--photo    { background:#2c3e50; }

.scm-mp-fixed { background:#f9f9f9 !important; opacity:.7; }
.scm-mp-del-btn { background:none; border:none; color:#e74c3c; cursor:pointer; font-size:13px; opacity:.5; padding:2px 4px; }
.scm-mp-del-btn:hover { opacity:1; }
.scm-mp-edit-btn { background:none; border:none; color:#3498db; cursor:pointer; font-size:13px; opacity:.6; padding:2px 4px; margin-right:2px; }
.scm-mp-edit-btn:hover { opacity:1; }

/* Toggle switch */
.scm-mp-toggle { position:relative; display:inline-block; width:34px; height:18px; }
.scm-mp-toggle input { opacity:0; width:0; height:0; }
.scm-mp-slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#ddd; border-radius:18px; transition:.2s; }
.scm-mp-slider:before { position:absolute; content:""; height:12px; width:12px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s; }
input:checked + .scm-mp-slider { background:#3498db; }
input:disabled + .scm-mp-slider { opacity:.5; cursor:not-allowed; }
input:checked + .scm-mp-slider:before { transform:translateX(16px); }

/* Section preset */
.scm-mp-section-row { list-style:none; background:none; border:none; box-shadow:none; padding:8px 10px 4px !important; border-top:2px solid #f0f0f0 !important; margin-top:4px; }
.scm-mp-section-row:first-child { border-top:none !important; margin-top:0; }

/* Ajout champ custom */
.scm-mp-add-bar { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-top:16px; padding:14px; background:#f7f9fa; border:1px solid #e0e0e0; border-radius:6px; }
.scm-mp-add-bar input[type="text"] { padding:6px 10px; border:1px solid #dce0e4; border-radius:4px; font-size:13px; box-sizing:border-box; }
.scm-mp-type-picker { display:flex; flex-wrap:wrap; gap:5px; }
.scm-mp-type-btn { background:#fff; border:1px solid #dce0e4; border-radius:20px; padding:4px 10px; font-size:11px; color:#666; cursor:pointer; transition:all .15s; white-space:nowrap; }
.scm-mp-type-btn:hover { border-color:#3498db; color:#3498db; }
.scm-mp-type-btn.active { background:#3498db; border-color:#3498db; color:#fff; font-weight:600; }

/* ---- Onglet settings ---- */
.scm-settings-section { margin-top:20px; }
.scm-settings-title { font-size:13px; font-weight:700; color:#444; margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid #eee; }
.scm-settings-row { display:flex; gap:20px; align-items:flex-start; margin-bottom:20px; }
.scm-settings-label { width:160px; flex-shrink:0; font-size:13px; font-weight:600; color:#555; padding-top:7px; }
.scm-settings-control { flex:1; }
.scm-settings-hint { font-size:11px; color:#aaa; margin:5px 0 0; }
.scm-settings-radio-group { display:flex; flex-direction:column; gap:10px; }
.scm-settings-radio { display:flex; align-items:center; gap:6px; font-size:13px; color:#555; cursor:pointer; }
.scm-settings-radio input[type="radio"] { cursor:pointer; }
.scm-ol-list { list-style:none; margin:0; padding:0; }
.scm-ol-card { display:flex; align-items:center; gap:10px; background:#fff; border:1px solid #dce0e4; border-left:4px solid #3498db; border-radius:4px; padding:10px 12px; margin-bottom:8px; transition:box-shadow .15s; }
.scm-ol-card.ui-sortable-helper { box-shadow:0 4px 16px rgba(0,0,0,.15); opacity:.95; }
.scm-ol-card-label { flex:1; font-size:13px; font-weight:600; }
.scm-ol-card-type { font-size:11px; color:#aaa; }
.scm-ol-flags { display:flex; gap:16px; align-items:center; }
.scm-ol-flag { display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; color:#888; text-transform:uppercase; }
.scm-ol-placeholder { background:#eaf4fb; border:2px dashed #3498db; border-radius:4px; height:48px; margin-bottom:8px; }

/* 1.5.0 — Formulaire en ligne → Affichage des tarifs (ordre + séparations, js : scmTaRender) */
.scm-ta-title { margin:0 0 4px; }
.scm-ta-desc { color:#888; font-size:13px; margin:0; }
.scm-ta-list { margin-top:14px; }
.scm-ta-item { border-left-color:#27ae60; }
.scm-ta-disc { font-size:11px; color:#666; background:#f1f2f4; border-radius:10px; padding:2px 8px; white-space:nowrap; }
.scm-ta-sep { display:flex; align-items:center; gap:10px; background:#f7f8fa; border:1px dashed #b8c0c8; border-radius:4px; padding:6px 12px; margin-bottom:8px; }
.scm-ta-sep.ui-sortable-helper { box-shadow:0 4px 16px rgba(0,0,0,.15); opacity:.95; }
.scm-ta-sep-label { font-size:10px; color:#888; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; }
.scm-ta-sep-titre { flex:1; min-width:0; background:#fff; border:1px solid #dce0e4; border-radius:4px; padding:5px 8px; font-size:13px; font-weight:600; color:#333; }
.scm-ta-sep-titre::placeholder { color:#aaa; font-weight:400; font-style:italic; }
.scm-ta-sep-del { color:#bbb; cursor:pointer; font-size:15px; padding:0 4px; }
.scm-ta-sep-del:hover { color:#e74c3c; }
.scm-ta-actions { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-top:12px; }
.scm-ta-link { font-size:13px; }
.scm-ta-empty { color:#888; font-size:13px; font-style:italic; margin:12px 0 0; }
.scm-ta-preview { margin-top:16px; text-align:right; }
.scm-tarifs-ordre-link { display:inline-block; margin-top:6px; font-size:12px; }

/* ============================================================
   LISTE MEMBRES responsive — bandeau d'actions compact (<=1024px)
   Les 3 boutons (.btnStd.flor) de .scm-mb-actionbar passent EN LIGNE au lieu
   d'etre empiles pleine largeur -> le tableau remonte (~100px). La hauteur du
   conteneur sticky est ensuite ajustee dynamiquement par scmFitMembresTable()
   (js/scm.membres.js). Le !important sur 3 props est un override assume de la
   regle responsive generique qui met les .btnStd.flor en pleine largeur.
   ============================================================ */
@media (max-width: 1024px) {
	.scm-mb-actionbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
	.scm-mb-actionbar > h2.flol { width: 100%; float: none; margin: 0; }
	.scm-mb-actionbar > .btnStd.flor {
		float: none !important;
		width: auto !important;
		display: inline-flex !important;
		align-items: center;
		margin: 0;
	}
	.scm-mb-actionbar > .fin { display: none; }
}

/* ===== Login — anti-brute-force (honeypot hors-écran + CAPTCHA) ===== */
.scm-hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }
.scm-mc-captcha-img { display: block; margin: 6px 0; border: 1px solid #ccc; border-radius: 4px; }

/* ===== Lot JS-clean (CSS-in-JS retiré) ===== */
.listeCours .editable-item-jours { cursor:pointer; border-bottom:1px dashed #27ae60; }
.listeCours .editable-item-jours:hover { background:#eafaf1; }
.listeGrade .editable-item-disc, .listeGrade .editable-item-select { cursor:pointer; border-bottom:1px dashed #27ae60; }
.listeGrade .editable-item-disc:hover, .listeGrade .editable-item-select:hover { background:#eafaf1; }
.dz-error-message.scm-dz-show { display:block !important; opacity:1 !important; z-index:9000; }
.scm-cours-disc-open { margin-bottom:12px; }

/* ── Aide contextuelle (mode d'emploi interactif) ───────────────── */
/* Icône cachée par défaut ; le toggle du header ajoute
   body.scm-help-on qui la révèle + l'anime (ambre). */
.scm-help {
	display: none;
	position: relative;
	margin-left: 6px;
	vertical-align: middle;
	cursor: help;
	color: #BA7517;
	outline: none;
	transition: transform .18s ease, color .15s ease;
}
body.scm-help-on .scm-help {
	display: inline-flex;
	animation: scm-help-pulse 1.4s ease-in-out infinite;
}
body.scm-help-on .scm-help:hover,
body.scm-help-on .scm-help:focus,
body.scm-help-on .scm-help.is-open {
	animation: none;
	color: #854F0B;
}
.scm-help__icon { font-size: 15px; }
/* En mode Aide, une (i) peut vivre dans une entête de colonne triable
   (.scm-sortable) : on neutralise son survol « tri » (opacity) pour ne pas
   parasiter le survol de l'icône d'aide. */
body.scm-help-on .scm-sortable:hover,
body.scm-help-on .scm-tec .scm-sortable:hover { opacity: 1; }
@keyframes scm-help-pulse {
	0%, 100% { transform: scale(1);    opacity: 0.85; }
	50%      { transform: scale(1.22); opacity: 1; }
}
/* Encart d'aide : rattaché à <body>, positionné en position:fixed par le JS
   (scmHelpPlacePop) → il flotte par-dessus tout et n'est jamais rogné par
   l'overflow d'un tableau/cellule. Position (top/left/largeur) injectée en
   variables CSS, consommées ici (convention SCM : pas de style statique JS). */
.scm-help__pop {
	display: block;
	position: fixed;
	top: var(--scm-pop-top, 0);
	left: var(--scm-pop-left, 0);
	z-index: 100000;
	width: var(--scm-pop-w, 320px);
	max-width: 86vw;
	max-height: 50vh;
	overflow-y: auto;
	padding: 13px 15px;
	background: #1d1e3a;
	color: #fff;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
	border-radius: 8px;
	white-space: normal;
	cursor: default;
}
.scm-help__pop strong { font-weight: 700; color: #FAC775; }
/* Flèche : pointe vers l'icône (position horizontale dynamique). */
.scm-help__pop::before {
	content: "";
	position: absolute;
	bottom: 100%;
	left: var(--scm-arrow-left, 50%);
	transform: translateX(-50%);
	border: 7px solid transparent;
	border-bottom-color: #1d1e3a;
}
/* Variante : encart basculé au-dessus de l'icône → flèche en bas. */
.scm-help__pop--above::before {
	bottom: auto;
	top: 100%;
	border-bottom-color: transparent;
	border-top-color: #1d1e3a;
}

/* Toggle « Aide » dans le header */
.scm-help-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 8px;
	padding: 6px 12px;
	border: 1px solid #d9d9d9;
	border-radius: 6px;
	background: #fff;
	color: #5f5e5a;
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	cursor: pointer;
}
.scm-help-toggle:hover { background: #f6f6f6; }
.scm-help-toggle__icon { font-size: 15px; }
body.scm-help-on .scm-help-toggle {
	border-color: #BA7517;
	background: #FAEEDA;
	color: #854F0B;
}

/* Bandeau « explication de page » — caché par défaut, révélé en tête
   de page (au-dessus du contenu) quand le mode Aide est ON. Rempli à
   la demande par scm.global.js (classe .is-filled une fois le texte posé). */
.scm-help-page { display: none; }
body.scm-help-on .scm-help-page.is-filled {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	margin: 0 0 18px;
	padding: 13px 16px;
	background: #FAEEDA;
	border: 1px solid #E8C58E;
	border-left: 4px solid #BA7517;
	border-radius: 8px;
	color: #5a4a2e;
	font-size: 13.5px;
	line-height: 1.6;
}
.scm-help-page__icon {
	flex-shrink: 0;
	margin-top: 2px;
	color: #BA7517;
	font-size: 19px;
}
.scm-help-page__txt strong { color: #854F0B; font-weight: 700; }

/* Aide du wizard d'installation (install.php) — encadré ambre TOUJOURS
   visible sous un champ. install.php ne charge ni session, ni le JS d'aide,
   ni FontAwesome : le picto « i » est donc dessiné en CSS (pas de <i fa>). */
.scm-wiz-help {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	margin: 7px 0 4px;
	padding: 9px 12px;
	background: #FAEEDA;
	border: 1px solid #E8C58E;
	border-left: 3px solid #BA7517;
	border-radius: 6px;
	font-size: 12.5px;
	line-height: 1.5;
	color: #5a4a2e;
}
.scm-wiz-help::before {
	content: "i";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	margin-top: 1px;
	border-radius: 50%;
	background: #BA7517;
	color: #fff;
	font-family: Georgia, 'Times New Roman', serif;
	font-style: italic;
	font-weight: 700;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
}


/* ============================================================
 * §A7 — PAGES DE CONNEXION (admin + espace membre) — recharte 2026-07
 * Fond doux, carte centrée, orange SCM #C78500 (charte tunnel signup),
 * logo club, libellés au-dessus des champs (fin du libellé captcha coupé),
 * captcha lisible. PORTÉE : .scm-cxn-page UNIQUEMENT — ne touche pas
 * l'inscription publique qui partage .contenerCxn.
 * ============================================================ */
.scm-cxn-page { background: #F6F7F8; min-height: 100vh; }
.scm-cxn-page .contenerCxnPad { padding: 44px 0 0; }
.scm-cxn-page .accueilCxn strong.nomSite { font-size: 26px; color: #2B2D33; letter-spacing: 0.5px; }
.scm-cxn-page .accueilCxn strong.nomSite img { max-height: 84px; width: auto; }
.scm-cxn-page .accueilCxn h1 { font-size: 15px; font-weight: 400; color: #6b7280; padding: 4px 0 0; }
.scm-cxn-club-logo {
	display: block;
	margin: 0 auto 10px;
	max-width: 96px;
	max-height: 96px;
	border-radius: 12px;
}
.scm-cxn-club-nom {
	display: block;
	text-align: center;
	font-size: 17px;
	font-weight: 600;
	color: #2B2D33;
	padding-top: 8px;
}

/* --- Carte centrale --- */
.scm-cxn-page .contenerCxnContent {
	width: 100%;
	max-width: 430px;
	margin: 26px auto 0;
	background: #ffffff;
	border: 1px solid #e3e5e9;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(43, 45, 51, 0.06);
	padding: 34px 38px 30px;
	box-sizing: border-box;
}
.scm-cxn-page .contenerCxnContent h2 {
	text-align: center;
	font-size: 20px;
	color: #2B2D33;
	padding: 0 0 18px;
	margin: 0;
}
.scm-cxn-page .scm-cxn-help {
	text-align: center;
	color: #6b7280;
	font-size: 13px;
	line-height: 19px;
	padding: 0 0 16px;
}

/* --- Champs : libellé AU-DESSUS du champ --- */
.scm-cxn-page .formStd fieldset { margin: 0 0 14px; padding: 0; border: none; }
.scm-cxn-page .labelStd {
	float: none;
	display: block;
	width: auto;
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: #6b7280;
	padding: 0 0 6px;
	margin: 0;
	line-height: 17px;
}
.scm-cxn-page .inputStd {
	float: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
	height: 44px;
	padding: 0 14px;
	font-size: 15px;
	color: #2B2D33;
	background: #ffffff;
	border: 1px solid #cfd3da;
	border-radius: 8px;
	margin: 0;
}
.scm-cxn-page .inputStd:focus {
	outline: none;
	border-color: #C78500;
	box-shadow: 0 0 0 3px rgba(199, 133, 0, 0.15);
}
.scm-cxn-page .inputStd[readonly] { background: #f6f7f8; color: #6b7280; }

/* --- Boutons : primaire orange pleine largeur, retour = secondaire --- */
.scm-cxn-page input.btnStd {
	float: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
	padding: 13px 0;
	background: #C78500;
	color: #ffffff;
	border: none;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	margin: 6px 0 0;
}
.scm-cxn-page input.btnStd:hover { background: #a96e00; animation: none; }
.scm-cxn-page a.btnStd {
	float: none;
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	padding: 12px 0;
	background: transparent;
	color: #6b7280;
	border: 1px solid #cfd3da;
	border-radius: 8px;
	font-size: 14px;
	text-decoration: none;
	margin: 10px 0 0;
}
.scm-cxn-page a.btnStd:hover {
	color: #2B2D33;
	border-color: #8a8f98;
	background: transparent;
	animation: none;
}

/* --- Lien « mot de passe oublié » --- */
.scm-cxn-page a.mdp,
.scm-cxn-page a#mdp {
	display: block;
	text-align: center;
	font-size: 13px;
	color: #a96e00;
	text-decoration: none;
	padding-top: 4px;
}
.scm-cxn-page a.mdp:hover,
.scm-cxn-page a#mdp:hover { text-decoration: underline; }

/* --- Captcha : image lisible + champ sur la même ligne --- */
.scm-cxn-captcha-row { display: flex; align-items: stretch; gap: 10px; }
.scm-cxn-captcha-row .scm-mc-captcha-img {
	height: 44px;
	width: auto;
	border: 1px solid #cfd3da;
	border-radius: 8px;
}
.scm-cxn-captcha-row .inputStd { flex: 1 1 auto; width: auto; }

/* --- Sélecteur de langues sous la carte --- */
.scm-cxn-page .scm-cxn-langues { padding: 18px 0 26px; }

/* --- Responsive --- */
@media (max-width: 520px) {
	.scm-cxn-page .contenerCxnContent {
		max-width: none;
		margin: 18px 10px 0;
		padding: 26px 20px 24px;
	}
	.scm-cxn-page .contenerCxnPad { padding: 28px 0 0; }
}

/* ---------------------------------------------------------------------
 * Instructeurs — modèle unifié (03/09/2026)
 * ------------------------------------------------------------------- */
/* Liste des instructeurs : personne rattachée */
.prof-membre-badge { display:inline-flex; align-items:center; gap:6px; background:#d8f0e0; color:#1f6e3a; border-radius:5px; padding:3px 8px; font-size:12px; font-weight:bold; white-space:nowrap; }
.prof-membre-badge a { color:inherit; text-decoration:none; }
.prof-membre-badge a:hover { text-decoration:underline; }
.prof-membre-badge .prof-membre-unlink { color:#888; text-decoration:none; font-size:14px; line-height:1; cursor:pointer; }
.prof-membre-badge .prof-membre-unlink:hover { color:#d65b66; text-decoration:none; }
.prof-membre-badge--ext { background:#eee; color:#777; font-weight:normal; }
.prof-membre-badge--noinsc { background:#fdf1d6; color:#8a6d1f; }
.prof-membre-relier { display:inline-block; margin-left:6px; font-size:12px; color:#2980b9; text-decoration:underline; cursor:pointer; white-space:nowrap; }   /* 30/09/2026 — externe avec fiche membre */
/* Fiche membre : état instructeur (lecture seule) + indice sous la case */
.scm-md-prof-state { display:inline-flex; align-items:center; gap:4px; color:#1f6e3a; font-weight:bold; font-size:13px; line-height:28px; }
.scm-md-prof-state .scm-md-prof-link { color:#3498db; font-weight:normal; text-decoration:underline; margin-left:8px; }
/* Fiche membre — lignes des cartes (Statut, Cotisations) : libellé + contrôle
   alignés verticalement quelle que soit la hauteur du contrôle (03/09/2026).
   Scopé aux fieldsets qui portent un libellé : la carte Paiements (table) est
   exclue. Le libellé des cases à cocher perd la marge haute de 15 px du style
   global, qui décalait la case sous le libellé de ligne. */
.scm-section-card fieldset:has(> .labelStd) { display:flex; align-items:center; gap:0 12px; min-height:46px; margin:0; padding:4px 0 !important; }
.scm-section-card fieldset:has(> .labelStd) > .labelStd { flex:0 0 235px; float:none; line-height:1.3; margin:0; padding:0; }
.scm-section-card fieldset:has(> .labelStd) > .flol,
.scm-section-card fieldset:has(> .labelStd) > .select-style { float:none; }
.scm-section-card fieldset:has(> .labelStd) > .fin { display:none; }
.scm-section-card fieldset:has(> .labelStd) .custom-control { display:flex; align-items:center; min-height:0; margin:0; }
.scm-section-card fieldset:has(> .labelStd) .custom-control + .custom-control { margin-top:6px; }
.scm-section-card fieldset:has(> .labelStd) .custom-control-label { margin-top:0; }
/* Ligne Grade : le groupe par discipline contient ses flottants sans .fin ni
   marge basse (sinon le select reste collé en haut d'un bloc plus haut). */
#membre-grades-form .membre-grade-form-group { display:flow-root; margin-bottom:0; }
#membre-grades-form .membre-grade-form-group > .fin { display:none; }
#membre-grades-form .membre-grade-form-group > .select-style { margin-bottom:0 !important; }
#membre-grades-form .membre-grade-form-group + .membre-grade-form-group { margin-top:8px; }
/* Ligne « Membre instructeur » : case + indice sur une seule ligne */
.scm-md-prof-wrap { display:flex; align-items:center; gap:10px; flex-wrap:nowrap; }
.scm-md-prof-wrap .custom-control { width:auto; flex:0 0 auto; }
.scm-md-prof-hint { display:inline-block; color:#888; font-size:12px; font-style:italic; line-height:28px; white-space:nowrap; }


/* ============================================================
 * Lot Sondage v2 — Questionnaire (module Communications, 2026-09-08 / v2 2026-09-10)
 *   - composer : audience « Anciens adhérents », bloc « Interaction » (questionnaire
 *     à questions typées : choix / oui-non / note / texte)
 *   - vue : résultats par question (barres, notes, croisements, textes, nominatif)
 * ============================================================ */

/* --- Audience « Anciens adhérents » --- */
.scm-comm-anciens-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 6px 0; }
.scm-comm-anciens-label { font-size: 12px; font-weight: 600; color: #555; margin-right: 4px; }
.scm-comm-anciens-hint  { font-size: 12px; color: #888; margin: 6px 0 0; line-height: 1.5; }
.scm-comm-anciens-empty { font-size: 12px; color: #b08b1c; margin: 4px 0; }

/* --- Bloc « Interaction » (composer) --- */
.scm-sondage-block {
	margin-top: 18px;
	padding: 14px 16px;
	border: 1px dashed var(--col-com-bar);
	border-radius: 8px;
	background: rgba(232, 128, 105, 0.05);
}
.scm-sondage-head      { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.scm-sondage-head .labelStd { width: auto; min-width: 0; float: none; display: inline-block; line-height: 1.4; font-weight: 600; }
.scm-sondage-head select { min-width: 220px; }
.scm-sondage-hint      { font-size: 12px; color: #777; margin: 6px 0 0; line-height: 1.5; }
.scm-sondage-panel     { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(196, 88, 62, 0.25); }
.scm-sondage-panel .labelStd { width: auto; min-width: 0; float: none; display: block; white-space: nowrap; }
.scm-sondage-anonyme   { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.scm-sondage-anonyme .scm-sondage-hint { margin: 0 0 0 26px; }

/* Cartes des questions */
.scm-sondage-questions { display: flex; flex-direction: column; gap: 10px; margin: 8px 0 10px; }
.scm-sondage-q {
	border: 1px solid #e3e3ea;
	border-radius: 8px;
	background: #fff;
	padding: 10px 12px;
}
.scm-sondage-q-head    { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.scm-sondage-q-num {
	flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
	background: var(--col-com-bar); color: #fff; font-size: 12px; font-weight: 700;
	display: inline-flex; align-items: center; justify-content: center;
}
.scm-sondage-q-type    { flex: 0 0 170px; }
.scm-sondage-q-libelle { flex: 1 1 260px; min-width: 0; }
.scm-sondage-q-actions { flex: 0 0 auto; margin-left: auto; white-space: nowrap; }
.scm-sondage-q-body    { margin-top: 8px; padding-left: 32px; }
.scm-sondage-q-email   { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.scm-sondage-q-note    { font-size: 12px; color: #888; margin: 2px 0 0; }
.scm-sondage-q-locked .scm-sondage-opt-code { background: #f4f4f6; color: #777; }

.scm-sondage-options-table { width: 100%; border-collapse: collapse; }
.scm-sondage-options-table th {
	font-size: 11px; font-weight: 600; color: #777; text-transform: uppercase; letter-spacing: .03em;
	text-align: left; padding: 4px 6px;
}
.scm-sondage-options-table td { padding: 3px 6px; vertical-align: middle; }
.scm-sondage-options-table td:nth-child(2) { width: 200px; }
.scm-sondage-options-table td:nth-child(3) { width: 96px; white-space: nowrap; }
.scm-sondage-opt-code { font-family: "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12px; }
.scm-sondage-opt-actions { text-align: right; }
.scm-sondage-opt-btn {
	background: none; border: 1px solid #d5d5dc; border-radius: 4px; color: #666;
	width: 26px; height: 26px; margin-left: 3px; cursor: pointer; font-size: 11px;
}
.scm-sondage-opt-btn:hover { background: #f1f1f4; color: #222; }
.scm-sondage-opt-btn--del:hover { background: #fadbd8; color: #c0392b; border-color: #e6b0aa; }
.scm-sondage-opt-btn:disabled { opacity: .35; cursor: default; }
.scm-sondage-options-actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.scm-sondage-code-hint { font-size: 12px; color: #888; }
.scm-sondage-q-add-row { display: flex; align-items: center; gap: 12px; margin: 4px 0 12px; }

.scm-sondage-merci  { min-height: 56px; resize: vertical; }
.scm-sondage-insert-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.scm-sondage-insert-hint { font-size: 12px; color: #888; line-height: 1.5; }

/* --- Résultats (mode vue) --- */
.scm-sondage-res-box {
	margin: 20px 0;
	padding: 16px 18px;
	border: 1px solid rgba(196, 88, 62, 0.35);
	border-radius: 8px;
	background: #fff;
}
.scm-sondage-res-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.scm-sondage-res-head h3 { margin: 0; }
.scm-sondage-res-actions { display: flex; align-items: center; gap: 8px; }
.scm-sondage-export-form { display: inline; margin: 0; }
.scm-sondage-res-q { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee; }
.scm-sondage-res-q-title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 15px; color: #333; }
.scm-sondage-res-q-title .scm-sondage-q-num { width: 22px; height: 22px; font-size: 11px; }
.scm-sondage-res-badge {
	display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500;
	background: #eef0f3; color: #555;
}
.scm-sondage-res-badge--email { background: var(--col-com-soft); color: var(--col-com-text); }
.scm-sondage-res-q-n { font-size: 12px; color: #888; margin-left: auto; }
.scm-sondage-res-box h4 { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--col-com-text); }
.scm-sondage-res-box h5 { margin: 0 0 6px; font-size: 13px; color: #444; }

.scm-sondage-res-table td:nth-child(n+2) { width: 120px; white-space: nowrap; text-align: right; }
.scm-sondage-res-table th:nth-child(n+2) { text-align: right; }
.scm-sondage-res-opt span { display: block; margin-bottom: 4px; }
.scm-sondage-res-opt em   { color: #999; font-size: 12px; }
.scm-sondage-bar { height: 8px; background: #eef0f3; border-radius: 4px; overflow: hidden; }
.scm-sondage-bar-fill { height: 100%; width: var(--pct, 0%); background: var(--col-com-bar); border-radius: 4px; transition: width .3s ease; }

.scm-sondage-notes { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 0 4px; }
.scm-sondage-note-col { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.scm-sondage-note-bar { width: 100%; height: var(--h, 0%); min-height: 2px; background: var(--col-com-mid); border-radius: 3px 3px 0 0; }
.scm-sondage-note-col:nth-child(n+10) .scm-sondage-note-bar { background: var(--col-com-bar); }
.scm-sondage-note-val { font-size: 11px; font-weight: 600; color: #444; margin-top: 4px; }
.scm-sondage-note-n   { font-size: 10px; color: #888; }
.scm-sondage-nps { font-size: 12px; color: #666; margin: 8px 0 0; }

.scm-sondage-crois-details { margin-top: 8px; }
.scm-sondage-crois-details summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--col-com-text); }
.scm-sondage-crois { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.scm-sondage-crois-block { min-width: 0; }
.scm-sondage-crois-scroll { overflow-x: auto; }
.scm-sondage-crois-table { font-size: 12px; }
.scm-sondage-crois-table th, .scm-sondage-crois-table td { white-space: nowrap; text-align: right; }
.scm-sondage-crois-table th:first-child, .scm-sondage-crois-table td:first-child { text-align: left; }

.scm-sondage-textes { list-style: none; margin: 0; padding: 0; }
.scm-sondage-textes li { padding: 8px 0; border-bottom: 1px solid #eee; }
.scm-sondage-textes li:last-child { border-bottom: 0; }
.scm-sondage-texte-meta { font-size: 11px; color: #888; margin-bottom: 3px; }
.scm-sondage-texte-qui  { color: var(--col-com-text); font-weight: 600; }
.scm-sondage-texte-body { font-size: 13px; color: #333; line-height: 1.5; }

.scm-sondage-nominatif-scroll { overflow-x: auto; }
.scm-sondage-nominatif-table { font-size: 12px; }
.scm-sondage-nominatif-table th, .scm-sondage-nominatif-table td { white-space: nowrap; vertical-align: top; }
.scm-sondage-nominatif-table td.scm-sondage-nominatif-texte { white-space: normal; min-width: 180px; }
.scm-sondage-res-anon { font-size: 11px; color: #999; margin: 14px 0 0; }

/* --- Charte du questionnaire (Paramètres → Communications → gabarit e-mail) --- */
.scm-elay-sondage-hint { font-size: 12px; color: #777; margin: 0 0 8px; line-height: 1.5; }
.scm-elay-sondage { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; margin-bottom: 14px; }
.scm-elay-sondage-fields { display: flex; flex-direction: column; gap: 8px; flex: 1 1 260px; }
.scm-elay-sondage-row { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.scm-elay-color { width: 44px; height: 30px; padding: 0 2px; border: 1px solid #d5d5dc; border-radius: 6px; background: #fff; cursor: pointer; }
.scm-elay-sondage-logo { font-size: 13px; }
.scm-elay-sondage-preview {
	flex: 0 0 220px; display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 16px 12px; border-radius: 8px; border: 1px solid #e3e3ea;
	background: var(--sdg-bg, #f7f7f9);
}
.scm-elay-sondage-preview-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: .03em; }
.scm-elay-sondage-btn {
	display: inline-block; padding: 9px 18px; border-radius: var(--sdg-radius, 8px); font-weight: 600; font-size: 14px;
	background: var(--sdg-accent, #1f1f1f); color: var(--sdg-text, #ffffff); border: 2px solid var(--sdg-accent, #1f1f1f);
	cursor: default; transition: background .12s, border-color .12s, color .12s;
}
/* Charte enrichie (11/09/2026) : mini carte de réponse avec survol simulé, style contour */
.scm-elay-sondage-row--select { justify-content: space-between; }
.scm-elay-sondage-row--select select { max-width: 150px; }
.scm-elay-sondage-hover-auto { font-size: 12px; margin-left: 4px; }
.scm-elay-sondage-card {
	display: flex; flex-direction: column; align-items: stretch; gap: 8px; width: 100%; box-sizing: border-box;
	padding: 14px 12px; border-radius: 12px; background: var(--sdg-card, #ffffff); color: var(--sdg-card-text, #1d1e3a);
	box-shadow: var(--sdg-shadow, 0 4px 14px rgba(0,0,0,.10)); text-align: center;
}
.scm-elay-sondage-q { font-size: 13px; font-weight: 600; }
.scm-elay-sondage-btn:hover { background: var(--sdg-hover, #000); border-color: var(--sdg-hover, #000); }
.scm-elay-sondage-btn--alt { background: #fafafa; color: #222; border-color: #d5d5dc; }
.scm-elay-sondage-btn--alt:hover { border-color: var(--sdg-hover, #000); background: color-mix(in srgb, var(--sdg-hover, #000) 12%, #ffffff); }
.scm-elay-sondage-preview--outline .scm-elay-sondage-btn { background: var(--sdg-card, #fff); color: var(--sdg-accent, #1f1f1f); }
.scm-elay-sondage-preview--outline .scm-elay-sondage-btn:hover { background: color-mix(in srgb, var(--sdg-hover, #000) 12%, var(--sdg-card, #fff)); color: var(--sdg-hover, #000); }
.scm-elay-sondage-hint2 { font-size: 11px; color: #888; }

/* ============================================================
 * Aperçu final de l'e-mail (gabarit) — liste (œil), composer, fiche — 11/09/2026
 * ============================================================ */
.scm-comm-preview-frame {
	display: block;
	width: 100%;
	height: var(--frame-h, 70vh);
	border: 1px solid #e8e8e8;
	border-radius: 6px;
	background: #f4f5f7;
}
.scm-comm-preview-frame--auto { height: var(--frame-h, 640px); }
.scm-comm-preview-sample {
	margin: 0 0 10px;
	padding: 6px 10px;
	font-size: 12px;
	color: #8a6d3b;
	background: #fcf8e3;
	border: 1px solid #f5e79e;
	border-radius: 6px;
	text-align: left;
}
.scm-comm-preview-meta-line { margin: 0 0 10px; font-size: 13px; color: #555; }
.scm-comm-actions .scm-comm-preview-btn { cursor: pointer; }

/* ============================================================
 * Éditeur d'e-mail : souligné, taille, couleur du texte, centrage — chantier D 11/09/2026
 * (boutons ajoutés à la barre Trix par scm.communications-details.js)
 * ============================================================ */
.scm-trix-field .trix-button.scm-trix-btn { font-weight: bold; min-width: 1.8em; }
.scm-trix-field .scm-trix-btn--u { text-decoration: underline; }
.scm-trix-field .scm-trix-btn--center { font-size: 1.1em; }
.scm-trix-field .scm-trix-extra { display: inline-flex; align-items: center; gap: 4px; margin-left: 1.5vw; padding: 0 6px; }
.scm-trix-field .scm-trix-size { height: 1.9em; font-size: 0.75em; border: 1px solid #bbb; border-radius: 3px; background: #fff; margin-right: 6px; }
.scm-trix-field .trix-button.scm-trix-btn--color {
	width: 1.3em; min-width: 0; height: 1.3em; padding: 0; margin: 0;
	border: 2px solid #fff; border-radius: 50%;
	background: var(--c, #000);
	box-shadow: 0 0 0 1px #bbb;
}
.scm-trix-field .trix-button.scm-trix-btn--color.scm-active { box-shadow: 0 0 0 2px #1f1f1f; }
.scm-trix-field .trix-button.scm-trix-btn--color-none { min-width: 1.4em; padding: 0 0.3em; }
.scm-comm-trix center { display: block; text-align: center; }
/* Global (pas seulement dans l'éditeur) : Trix analyse le HTML rechargé dans un conteneur hors de l'éditeur et se fie au display calculé
   pour reconnaître un bloc — sans cette règle, <scm-right> est vu en ligne et les paragraphes fusionnent à la réouverture d'un brouillon */
scm-right { display: block; text-align: right; }
.scm-trix-field .trix-button.scm-trix-btn--align { min-width: 1.6em; font-weight: normal; }
.scm-trix-field .trix-button.scm-trix-btn--align i { font-size: 0.95em; }
.scm-comm-trix u { text-decoration: underline; }
/* Le reset global (h1…p,a,strong,b { font-weight:normal }) neutralisait le gras dans l'éditeur : on le rétablit ici */
.scm-comm-trix strong, .scm-comm-trix b { font-weight: 700; }
.scm-comm-trix em, .scm-comm-trix i { font-style: italic; }

/* Bouton de choix « avec précision » (12/09/2026) : colonne du composer + précisions dans les résultats */
.scm-sondage-opt-texte-cell { text-align: center; width: 72px; font-weight: normal; }
.scm-sondage-precisions { margin-top: 6px; font-size: 12px; }
.scm-sondage-precisions summary { cursor: pointer; color: #555; }
.scm-sondage-precisions .scm-sondage-textes li { padding: 5px 0; }


/* =====================================================================
 * CARTES DE COURS (1.5.0) — rubriques 42 (liste) et 43 (fiche),
 * section « Cartes de cours » de Tarifs, module de Paramètres → Général.
 * La page publique a sa propre feuille : css/scm-carte.css.
 * ===================================================================== */

/* ---- Paramètres → Général : module réservé aux licences payantes ---- */
.scm-pg-section--locked { opacity: .75; }
.scm-pg-module-locked { margin: 6px 0 0; font-size: 12px; font-weight: 600; color: #8a5a00; }

/* ---- En-têtes ---- */
.scm-cartes-title,
.scm-cartes-prod-title { margin: 0 0 3px; }
.scm-cartes-subtitle,
.scm-cartes-prod-sub { color: #888; font-size: 12px; margin: 0; }
.scm-cartes-prod-header { margin-bottom: 10px; }

.scm-cartes-alert {
	background: #fff4e5;
	border: 1px solid #f1d2a0;
	color: #7a4a00;
	border-radius: 8px;
	padding: 10px 14px;
	margin: 0 0 14px;
	font-size: 13px;
}
.scm-cartes-alert--info { background: #eef5fb; border-color: #c9dff0; color: #1f4f72; }

/* ---- Filtres + recherche ---- */
.scm-cartes-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 14px;
}
.scm-cartes-filter-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.scm-cartes-filter-pill {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 16px;
	background: #f0f0f3;
	color: #555;
	font-size: 12px;
	font-weight: 600;
	text-decoration: none;
}
.scm-cartes-filter-pill:hover { background: #e4e4ea; }
.scm-cartes-filter-pill.active { background: #1d1e3a; color: #fff; }
.scm-cartes-search { display: flex; gap: 6px; align-items: center; }
.scm-cartes-search .inputStd { width: 240px; margin: 0; }

.scm-cartes-empty {
	text-align: center;
	color: #888;
	padding: 34px 10px;
}
.scm-cartes-empty > i { display: block; font-size: 30px; color: #bbb; margin-bottom: 10px; }
.scm-cartes-empty p { margin-top: 14px; }

/* ---- Tableaux ---- */
.scm-cartes-table td { vertical-align: middle; }
.scm-cartes-table--compact td, .scm-cartes-table--compact th { font-size: 12px; }
.scm-cartes-table tr[data-annule="1"] td { color: #aaa; text-decoration: line-through; }
.scm-cartes-table tr[data-annule="1"] td.scm-cartes-cell-actions { text-decoration: none; }
.scm-cartes-prod-table tr[data-inactif="1"] td { color: #999; }
.tableStd .scm-cartes-cell-center { text-align: center; }
.tableStd .scm-cartes-cell-right { text-align: right; white-space: nowrap; }
.tableStd .scm-cartes-cell-actions { text-align: right; white-space: nowrap; }
.scm-cartes-cell-actions a { display: inline-block; width: 26px; text-align: center; color: #888; cursor: pointer; }
.scm-cartes-cell-actions a:hover { color: #1d1e3a; }
.scm-cartes-code { font-family: Menlo, Consolas, monospace; font-weight: 700; letter-spacing: .5px; white-space: nowrap; }
.scm-cartes-muted { color: #999; }
.scm-cartes-sub { font-size: 11px; color: #888; }
.scm-cartes-due { font-size: 11px; color: #b35900; font-weight: 600; }
.scm-cartes-neg { color: #b23b3b; }

.scm-cartes-pill {
	display: inline-block;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: 10px;
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .4px;
	vertical-align: middle;
}
.scm-cartes-pill--gift { background: #fbe3ef; color: #9b2c62; }
.scm-cartes-pill--on   { background: #d8f0e0; color: #1f6e3a; margin-left: 0; }
.scm-cartes-pill--off  { background: #e8e8e8; color: #666; margin-left: 0; }

.scm-cartes-etat {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 12px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .5px;
	white-space: nowrap;
	vertical-align: middle;
}
.scm-cartes-etat--active    { background: #d8f0e0; color: #1f6e3a; }
.scm-cartes-etat--epuisee   { background: #fde6c8; color: #b35900; }
.scm-cartes-etat--expiree   { background: #f0d8d8; color: #8a3535; }
.scm-cartes-etat--annulee,
.scm-cartes-etat--convertie { background: #e8e8e8; color: #555; }
.scm-cartes-etat--attente   { background: #e6eefa; color: #2d5a9b; }   /* achat en ligne non payé (lot 2) */

/* ---- Formulaires (modales + fiche) ---- */
.scm-cartes-form-label { display: block; margin: 10px 0 4px; color: #555; font-size: 13px; }
.scm-cartes-form-section {
	margin: 16px 0 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid #ececf0;
	font-weight: 700;
	font-size: 13px;
	color: #1d1e3a;
}
.scm-cartes-form-help { font-size: 11px; color: #888; margin: 6px 0 8px; }
.scm-cartes-form-check { display: block; margin: 10px 0 0; font-size: 13px; cursor: pointer; }
/* Le reset global masque les cases à cocher natives : on les affiche ici */
.scm-cartes-form-check input[type="checkbox"] {
	display: inline-block !important;
	width: 15px;
	height: 15px;
	margin: 0 4px 0 0;
	vertical-align: -2px;
	cursor: pointer;
	accent-color: #1d1e3a;
}
.scm-cartes-form-inline { display: flex; gap: 8px; }
/* Champ obligatoire resté vide (validation des formulaires des cartes) */
.scm-cartes-input--missing,
.swal2-input.scm-cartes-input--missing {
	border-color: #d9534f !important;
	box-shadow: 0 0 0 2px rgba(217, 83, 79, .18) !important;
}
.scm-cartes-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.scm-cartes-grid-3 { display: grid; grid-template-columns: 2fr 1.4fr 1fr; gap: 0 12px; }
.scm-cartes-input-short { width: 120px; margin: 0; }
.scm-cartes-select { width: 100%; margin: 0; font-size: 14px; }
.scm-cartes-select--short { width: 80px; }
.scm-cartes-textarea { width: 100%; min-height: 70px; margin: 0; font-size: 14px; }
.scm-cartes-form-prix { display: flex; flex-direction: column; gap: 6px; }
.scm-cartes-form-prix-row { display: flex; align-items: center; gap: 10px; }
.scm-cartes-form-prix-disc { min-width: 140px; font-size: 13px; }

/* ---- Fiche d'une carte ---- */
.scm-cartes-fiche-head { margin-bottom: 16px; }
.scm-cartes-back { display: inline-block; margin-bottom: 8px; color: #888; font-size: 12px; text-decoration: none; }
.scm-cartes-back:hover { color: #1d1e3a; }
.scm-cartes-fiche-title { margin: 0 0 4px; }
.scm-cartes-fiche-title .scm-cartes-etat { margin-left: 8px; }
.scm-cartes-fiche-disc { color: #888; font-weight: 400; }
.scm-cartes-fiche-meta { margin: 0; color: #777; font-size: 12px; }

.scm-cartes-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.scm-cartes-kpi { background: #f7f7f9; border: 1px solid #ececf0; border-radius: 10px; padding: 12px 14px; }
.scm-cartes-kpi-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: #888; }
.scm-cartes-kpi-value { font-size: 30px; font-weight: 800; color: #1d1e3a; line-height: 1.2; margin-top: 4px; }
.scm-cartes-kpi-value--date { font-size: 18px; margin-top: 8px; }
.scm-cartes-kpi-sub { font-size: 15px; font-weight: 600; color: #888; }
.scm-cartes-kpi-note { font-size: 12px; color: #777; margin-top: 2px; }
.scm-cartes-kpi-link { display: inline-block; margin-top: 4px; font-size: 12px; cursor: pointer; color: #2c5fb8; text-decoration: underline; }

.scm-cartes-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.btnStd.scm-cartes-btn-danger { background: #fff; color: #b23b3b; border: 1px solid #e5b5b5; }
.btnStd.scm-cartes-btn-danger:hover { background: #fbeaea; color: #8a2a2a; }

.scm-cartes-cols { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; }
.scm-cartes-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.scm-cartes-sec-head--spaced { margin-top: 22px; }
.scm-cartes-sec-title { margin: 0; font-size: 15px; }
.scm-cartes-sec-btns { display: flex; gap: 6px; }
.scm-cartes-mvt {
	display: inline-block;
	min-width: 28px;
	text-align: center;
	font-weight: 800;
	margin-right: 4px;
}
.scm-cartes-mvt--plus  { color: #1f6e3a; }
.scm-cartes-mvt--moins { color: #b23b3b; }
.scm-cartes-infos .inputStd { width: 100%; box-sizing: border-box; float: none; margin: 0; }
.scm-cartes-infos .scm-cartes-form-label { margin: 8px 0 3px; }
.scm-cartes-infos-save { margin-top: 12px; text-align: right; }

@media (max-width: 900px) {
	.scm-cartes-cols, .scm-cartes-kpis { grid-template-columns: minmax(0, 1fr); }
	.scm-cartes-grid-3 { grid-template-columns: 1fr; }
	.scm-cartes-search .inputStd { width: 100%; }
}

/* ============================================================
   1.5.0 lot 3 — POINTAGE DES COURS (étape 1 : réglages)
   Paramètres → onglet Pointage (.scm-pt-*), colonne PIN des
   instructeurs (.prof-pin), colonne Cartes des cours.
   ============================================================ */
.scm-pt-choix { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; }
.scm-pt-radio { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid #e3e6ea; border-radius: 6px; cursor: pointer; background: #fff; }
.scm-pt-radio:hover { background: #f6f9fb; }
/* Le reset global « [type=radio] { position:absolute; left:-9999px } » cache les radios : ici on garde le natif */
.scm-pt-radio input[type="radio"]:checked, .scm-pt-radio input[type="radio"]:not(:checked) { position: static; left: auto; width: 16px; height: 16px; margin: 2px 0 0; flex: 0 0 16px; cursor: pointer; }
.scm-pt-radio strong { display: block; font-size: 14px; color: #1d1e3a; }
.scm-pt-radio small { display: block; font-size: 12px; color: #888; margin-top: 2px; }
.scm-pt-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.scm-pt-ligne label { font-size: 13px; font-weight: 600; color: #555; min-width: 220px; }
.scm-pt-ligne input.scm-pt-pin { width: 140px; letter-spacing: 3px; }
.scm-pt-ligne input.scm-pt-pin::placeholder { letter-spacing: normal; }
.scm-pt-ligne select.scm-pt-select { width: auto; min-width: 220px; height: 35px; padding: 0 8px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 2px; background: #fff; }
.scm-pt-etat { font-size: 12px; color: #c0392b; }
.scm-pt-etat--ok { color: #27ae60; }
.scm-pt-info { font-size: 13px; color: #555; background: #f6f9fb; border-left: 3px solid #3498db; padding: 8px 12px; margin: 12px 0 0; }
.scm-pt-info a { margin-left: 6px; font-weight: 600; }
#tab-pointage .scm-pt-info a, #tab-pointage .scm-pg-section-hint a { color: #2980b9; text-decoration: underline; }
.scm-pt-actions { margin-top: 18px; text-align: right; }
.prof-pin { font-size: 12px; white-space: nowrap; color: #c0392b; cursor: pointer; }
.prof-pin--ok { color: #27ae60; }
.prof-pin--off { color: #bbb; cursor: help; }
.scm-cours-carte-th, .scm-cours-carte-td { text-align: center; }
@media (max-width: 640px) {
	.scm-pt-ligne label { min-width: 0; width: 100%; }
}

/* 1.5.0 — Le club → Règlement du club (lien ou PDF), js : scm.club.js */
.scm-club-reglement-title { margin-top: 28px; }
.scm-club-reglement { background: #fff; border: 1px solid #e3e6ea; border-radius: 6px; padding: 14px 16px; }
.scm-club-reglement-hint { font-size: 13px; color: #777; margin: 0 0 10px; }
.scm-club-reglement-choix { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 10px; }
.scm-club-reglement-radio { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
/* Le reset global « [type=radio] { position:absolute; left:-9999px } » cache les radios : ici on garde le natif */
.scm-club-reglement-radio input[type="radio"]:checked, .scm-club-reglement-radio input[type="radio"]:not(:checked) { position: static; left: auto; width: 15px; height: 15px; margin: 0; cursor: pointer; }
.scm-club-reglement-bloc { margin: 6px 0 4px; }
.scm-club-reglement-bloc input.scm-club-reglement-lien { width: 100%; }
.scm-club-reglement-actuel { font-size: 13px; margin: 0 0 8px; }
.scm-club-reglement-actuel a { color: #2980b9; text-decoration: underline; margin-left: 4px; }
.scm-club-reglement-envoi { display: inline-flex; align-items: center; cursor: pointer; }
.scm-club-reglement-actions { margin-top: 12px; text-align: right; }
.scm-cartes-form-reglement { color: #2980b9; text-decoration: underline; margin-left: 4px; white-space: nowrap; }   /* 30/09/2026 — lien vers le règlement du club */

/* 1.5.0 lot 3, étape 3 — affiche du pointage (boutons admin) */
.scm-cartes-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.scm-pt-affiche-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.scm-pt-lien-danger { background: none; border: 0; padding: 0; color: #c0392b; font-size: 13px; text-decoration: underline; cursor: pointer; }

/* 1.5.0 lot 3, étape 4 — Paramètres → Pointage : adresse de l'espace instructeur */
.scm-pt-espace { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.scm-pt-espace input.inputStd.scm-pt-espace-url { flex: 1 1 320px; width: auto; min-width: 0; float: none; margin: 0; color: #555; background: #f7f8fa; }
/* Fiche instructeur recto-verso (01/10/2026) */
.scm-pt-espace-fiche { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.scm-pt-espace-fiche-hint { flex: 1 1 260px; font-size: 13px; color: #777; }

/* 1.5.0 lot 3, étape 6 — Cartes de cours : onglets « Cartes » / « Aujourd'hui » + vue d'une journée */
.scm-cartes-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 2px solid #ececf0; }
.scm-cartes-tab { padding: 8px 16px; margin-bottom: -2px; border-bottom: 2px solid transparent; color: #666; font-weight: 600; text-decoration: none; }
.scm-cartes-tab:hover { color: #1d1e3a; text-decoration: none; }
.scm-cartes-tab.active { color: #1d1e3a; border-bottom-color: #1d1e3a; }
.scm-cartes-jour-nav { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin: 0 0 14px; }
.scm-cartes-jour-date { font-size: 17px; min-width: 220px; text-align: center; }
.scm-cartes-jour-form { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 0 8px; }
.scm-cartes-jour-form input.inputStd.scm-cartes-jour-input { width: 150px; float: none; display: inline-block; }
.scm-cartes-jour-auj { font-size: 13px; color: #2c5fb8; text-decoration: underline; }
.scm-cartes-jour-h3 { font-size: 15px; margin: 18px 0 8px; }
.scm-cartes-jour-bloc { border: 1px solid #ececf0; border-radius: 8px; padding: 10px 12px; margin: 0 0 10px; background: #fff; }
.scm-cartes-jour-bloc-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 8px; font-size: 14px; }
.scm-cartes-jour-heure { color: #666; font-variant-numeric: tabular-nums; }
.scm-cartes-jour-nb { margin-left: auto; font-weight: 700; }
.scm-cartes-jour-vide { margin: 2px 0 0; }
.scm-cartes-jour-table { margin: 0; width: 100%; table-layout: fixed; }   /* mêmes colonnes d'un tableau à l'autre */
.scm-cartes-jour-table th:first-child, .scm-cartes-jour-table td:first-child { width: 80px; }
.scm-cartes-jour-totaux { margin: 6px 0 0; font-size: 13px; text-align: right; color: #444; }
.scm-cartes-jour-general { margin: 4px 0 0; font-size: 15px; font-weight: 700; text-align: right; }

/* ============================================================
 * Communications — onglets (1.5.1) et onglet Agenda
 * (templates/scm.communications-agenda.tpl, js/scm.communications.js)
 * ============================================================ */
.scm-comm-tabs { display: flex; gap: 4px; margin: 0 0 16px; border-bottom: 2px solid #ececf0; }
.scm-comm-tab { padding: 8px 16px; margin-bottom: -2px; border-bottom: 2px solid transparent; color: #666; font-weight: 600; text-decoration: none; }
.scm-comm-tab:hover { color: #1d1e3a; text-decoration: none; }
.scm-comm-tab.active { color: #1d1e3a; border-bottom-color: #1d1e3a; }

.scm-agenda-alerte { margin: 0; padding: 10px 14px; border: 1px solid #f0c36d; border-radius: 6px; background: #fff8e5; color: #7a5300; }

/* Abonnement au flux */
.scm-agenda-abo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 20px; padding: 12px 14px; border: 1px solid #e3e6ee; border-radius: 8px; background: #f8f9fb; }
.scm-agenda-abo-txt { flex: 1 1 260px; display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #444; }
.scm-agenda-abo-txt strong { font-size: 14px; color: #1d1e3a; }
.scm-agenda-abo-titre { display: flex; align-items: center; gap: 4px; }
.scm-agenda-abo-row { flex: 1 1 380px; display: flex; gap: 8px; }
.scm-agenda-abo-row input.inputStd { flex: 1; float: none; min-width: 0; background: #fff; }
.scm-agenda-abo-reglages { font-size: 12px; color: #2c5fb8; white-space: nowrap; }

/* Tableau des évènements */
.scm-agenda-table { width: 100%; }
.scm-agenda-th-date, .scm-agenda-td-date { width: 190px; }
.scm-agenda-td-date { font-variant-numeric: tabular-nums; }
.scm-agenda-th-site, .scm-agenda-td-site { width: 60px; text-align: center; }
.scm-agenda-th-actions { width: 120px; }
.scm-agenda-actions { white-space: nowrap; }
.scm-agenda-td-titre strong { color: #1d1e3a; }
.scm-agenda-sous { display: block; margin-top: 2px; font-size: 12px; color: #666; }
.scm-agenda-ligne--auto td { background: #fafafa; color: #888; }
.scm-agenda-ligne--auto .scm-agenda-td-titre strong { color: #666; }
.scm-agenda-neutre { font-size: 12px; color: #aaa; }

/* Étiquette du type : couleur par variable */
.scm-agenda-type { display: inline-block; padding: 2px 9px; border-radius: 10px; background: var(--scm-agenda-couleur, #6b7280); color: #fff; font-size: 11px; font-weight: 700; white-space: nowrap; }
.scm-agenda-type--club      { --scm-agenda-couleur: #c4583e; }
.scm-agenda-type--vacances  { --scm-agenda-couleur: #2f7d5b; }
.scm-agenda-type--ferie     { --scm-agenda-couleur: #8a5cc2; }
.scm-agenda-type--fermeture { --scm-agenda-couleur: #6b7280; }
.scm-agenda-type--stage     { --scm-agenda-couleur: #2c5fb8; }
.scm-agenda-type--examen    { --scm-agenda-couleur: #b8862c; }
.scm-agenda-type--saison    { --scm-agenda-couleur: #1d1e3a; }

/* Cours : pas de cours / cours maintenus ; visible sur le site */
.scm-agenda-cours { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.scm-agenda-cours--non { background: #fdecea; color: #a12a1f; }
.scm-agenda-cours--oui { background: #e7f5ee; color: #1f6b47; }
.scm-agenda-site--oui { color: #1f6b47; }
.scm-agenda-site--non { color: #aaa; }

.scm-agenda-vide { margin: 0; padding: 18px; border: 1px dashed #d8dbe3; border-radius: 8px; color: #888; font-style: italic; text-align: center; }
.scm-agenda-passes { margin-top: 22px; }
.scm-agenda-passes summary { margin-bottom: 8px; color: #444; font-weight: 600; cursor: pointer; }

/* Modale de saisie */
.scm-agenda-modal-cours { margin-top: 12px; }
#scm-ag-description { font-family: inherit; font-size: 15px; line-height: 1.4; }   /* texte court : police de la fenêtre (pas celle, à chasse fixe, du navigateur) */
/* Le reset global « [type=radio] { position:absolute; left:-9999px } » cache les radios : ici on garde le natif */
.scm-agenda-modal-cours input[type="radio"]:checked, .scm-agenda-modal-cours input[type="radio"]:not(:checked) { position: static; left: auto; width: 15px; height: 15px; margin: 0; cursor: pointer; }

/* Paramètres → Communications → Agenda : renvoi vers l'onglet Agenda */
.scm-comm-agenda-renvoi { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; font-size: 13px; color: #444; }

@media (max-width: 760px) {
	.scm-agenda-th-date, .scm-agenda-td-date { width: auto; }
	.scm-agenda-abo-row { flex-basis: 100%; }
}