/*
  Personalisation ATela Conseil
 */ 
 body{	
	--gold:#FCCC44;
	--goldclair:#ffe6a1;
	--golddark:#ffbc00;
	--golddarker:#f1b200;	
	--indigo:#065078;
    --indigoclair: #185f85;	
	--pink:#ffa6bd;
	--pinkclair:#ffdbe5;
	--turquoise:#34b4f4;
    --turquoisedark:#0678b5;
	--bleuclair:#d4f1ff;
	--bleugrisclair:#cfe7f2;	
	--fondtresclair:#fbf5ed;
}

.hidden {
	display:none;
}
a {
	color:var(--turquoisedark);
	font-weight :bold;
	text-decoration:underline
}

.calltoaction a, .help a, .coaching a {
	color:var(--indigoclair);	
}
.atelatext {
	text-align:justify; 
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-size: 14px;    
	font-size: 0.875rem;    
	line-height: 1.7;}


body {
	color:black
}

.wp-block-button__link, .wp-block-button__link:hover, .btn-theme-primary{
	color:white;
	background-color:var(--turquoisedark);
	box-shadow: 5px 5px 10px 0 rgb(50 50 50 / 50%);
}

.home h2{
	border:none;
	background-color:transparent;		
}

/* ******************************** IA */
.accordion {background-color: var(--bleugrisclair); border: 1px solid var(--indigo); border-radius: 8px;}
.promptsformation { border: 1px solid var(--indigo); border-radius: 8px; background-color:white}
.right-area {border : 2px dashed var(--indigo); background-color: var(--fondtresclair); margin-right:5px;}
.sidebar {border : 2px dashed var(--indigo); background-color: var(--fondtresclair);}
	
button{
	box-shadow: 0 3px 6px rgba(0 0 0 / 0.5);
	color: white;
    background-color: var(--turquoisedark);
	padding: 8px 12px; border-radius: 8px; border: var(--border);  cursor: pointer;
}
	
h1 {
	color:var(--indigo);
	margin-top: 50px;  
    font-size: 50px;
    letter-spacing: 2.5px;
	text-transform: uppercase;
}

h2 {	
	color:var(--indigo);
	margin-top: 10px;  
  border: 15px solid transparent; 
  border-image: url(./cadre_ombre.png) 35% stretch;  
	font-size:20px;
}

h3 {
	font-size: 17px;	
	color:var(--indigo);
	border:0px;
	border-left: 20px solid transparent; 
	border-bottom: 15px solid transparent; 
  border-image: url(./cadre.png) 35% stretch;  
}
h3{	
	padding-left:10px;
	margin-top: 10px;
	color:var(--indigo);
}

.formation, .idee, .pme, .comment {
	position: relative;  
	padding: 1rem 1.25rem;
  border: 2px dashed #222;
	border-color: var(--indigo);
  background: var(--bleuclair);     
	box-shadow: 0 3px 6px rgba(0 0 0 / 0.5);
	}

.formation {	
  background: var(--goldclair);    
}

.comment {
	background:var(--fondtresclair)
}

/* si le navigateur gère border‑image, on remplace le bord */
@supports (border-image: repeating-linear-gradient(white, blue) 10 stretch) {
  .formation, .idee, .pme, .comment {
    border: 2px solid transparent;  
    
		border-color: var(--indigo);
    border-image: repeating-linear-gradient(
        -35deg, /*inclinaison */
        var(--indigo)  0 20px,         
        transparent 20px 25px,
        var(--indigo)  25px 100px,
        transparent 100px 105px, 
        var(--indigo)  105px 115px,
        transparent 115px 120px, 
        var(--indigo)  120px 130px,
        transparent 130px 135px  
 
    ) 2 round;                  /* « 2 » = slice = épaisseur, « round » recale le motif */		
  }

/* icône épinglée dans le coin */
	@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css');
.formation::before , .idee::before, .pme::before,.comment::before, .CTA::before{
  /*content: "\f19d";                  /* code unicode de l’icône ― ici fa‑star */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;                  /* version « solid » ; adapte au besoin */

  /* placement */
  position: absolute;
  top: -0.75em;                      /* sort un peu du cadre pour l’effet badge */
  left: -0.65em;

  /* style */
  font-size: 1.5rem;                 /* taille de l’icône */
  line-height: 1;                    /* pas d’espace vertical parasite */
  background: #fff;                  /* cercle blanc pour masquer le bord */
  padding: 0.15em 0.2em;             /* crée le cercle autour de l’icône */
  border-radius: 50%;                /* cercle parfait */
  box-shadow: 0 0 2px rgba(0 0 0 / 0.15);
  color: var(--indigo);                       /* couleur de l’icône */
  pointer-events: none;              /* l’icône n’intercepte pas les clics */
}

.formation::before {
  content: "\f19d";
	}

.idee::before{
  content: "\f0eb";
	}

	.pme::before     {
  content: "\e533";
	}
	
	.comment::before{
		content: "\f075";
	}


/*** FIN STYLE ENCART FORMATION */
	
	
/*** STYLE DU CTA */	
.CTA {
	position: relative;  
	padding: 1rem 1.25rem;
  border: 2px dashed #222;
	border-color: var(--indigo);
  background: var(--bleuclair);     
	box-shadow: 0 3px 6px rgba(0 0 0 / 0.5);
	}
	.CTA::before{
		content:"\f601";		     
	}
	.CTA{
		background-color: var(--fondtresclair)
	}
}

/* Fin IA */


h4 {	
	padding-left:10px;
	border-left: solid 7px var(--gold);
	border-radius: 10px;
	margin-top: 40px;
	color:var(--indigo);
}



.entry-content ul {
  list-style: none; /* Remove default bullets */
}

.entry-content ul > li::before {
  content: "\2714";    
	color: var(--turquoise);  
  display: inline-block;
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}

.pensee {
	  border: 10px solid transparent;      
  border-image: url(./cadre_pensee_ombre.png) 10% round; 
	padding:20px;

}
.calltoaction {
	background-color:var(--goldclair);
	padding:15px;
	box-shadow: 5px 5px 10px 0 rgb(50 50 50 / 50%);
	text-align:justify;
	border-radius: 10px;
	transition:all 1s ease-out; 	
}
.calltoaction:hover, .help:hover,.coaching:hover {
		background-color:whitesmoke;
	box-shadow: 5px 5px 20px 0 rgb(00 00 00 / 50%);
}

.help{
	background-color:var(--bleuclair);
	padding:15px;
	box-shadow: 5px 5px 10px 0 rgb(50 50 50 / 50%);
	border-radius: 10px;
	transition:all 1s ease-out; 	
}
.coaching{
	background-color:var(--pinkclair);
	padding:15px;
	box-shadow: 5px 5px 10px 0 rgb(50 50 50 / 50%);
	border-radius: 10px;
	transition:all 1s ease-out; 	
}

.sectionenavant {
	background-color:var(--fondtresclair);
		border-radius: 10px;
		background-image: url("./logo_bullet_40.png");
	background-position:right bottom;
	background-repeat: no-repeat;
	 transition:all 1s ease-out; 	
	
}
.sectionenavant:hover {
	background-color:whitesmoke;
		box-shadow: 5px 5px 10px 0 rgb(50 50 50 / 50%);
}
.sectionenavant h2{
	background-color:var(--indigo);
	color:white;
	padding-left:10px;
	margin-top:20px;
	border:0px;
}
.sectionenavant h3{
	margin-left:10px;		
	border:0px;
}

@font-face {
  font-display: swap;
}

/* Animation Contact */
	 @-webkit-keyframes my_focus_hover {
		0%  {-webkit-transform: scale(1); transform: scale(1); }
		14% {-webkit-transform: scale(1.3); transform: scale(1.1); }
		28% {-webkit-transform: scale(1); transform: scale(1); }
		42% {-webkit-transform: scale(1.1); transform: scale(1.1);}
		70% {-webkit-transform: scale(1);transform: scale(1);}
	}
	@keyframes my_focus_hover {
		0% {-webkit-transform: scale(1);transform: scale(1);}
		14% {-webkit-transform: scale(1.3);transform: scale(1.1);}
		28% {-webkit-transform: scale(1);transform: scale(1);}
		42% {-webkit-transform: scale(1.1);transform: scale(1.1);}
		70% {-webkit-transform: scale(1);transform: scale(1);}
	}
img.wp-image-7326{
		position: fixed;
		bottom:10px;
		right:10px;	
	  z-index: 1000;
}
	img.wp-image-7326:hover {
		 		  -webkit-animation-name: my_focus_hover;
		  animation-name: my_focus_hover;
		  -webkit-animation-duration: 1s;
		  animation-duration: 1s;
		  -webkit-animation-timing-function: ease-in-out;
		  animation-timing-function: ease-in-out;
		cursor: pointer;
	}

.focusanimation:hover {
		  -webkit-animation-name: my_focus_hover;
		  animation-name: my_focus_hover;
		  -webkit-animation-duration: 1s;
		  animation-duration: 1s;
		  -webkit-animation-timing-function: ease-in-out;
		  animation-timing-function: ease-in-out;
}
/* Ajout d'un hover et transition sur le header (ombrage) */
.site-header {
   transition:box-shadow 2s ease-out; 	 
}

.site-header:hover {	
	box-shadow: 0 5px 20px 0 rgb(00 00 00 / 50%);
}

/* gestion des a:hover dans les pages et articles */
.entry-content p a {
	   transition:all 1s ease-out; 	 
}

.entry-content p a:hover {
	text-decoration:none;
	box-shadow: 0 8px 10px 0 rgb(25 25 25 / 50%);
}

/* page de blog */
ul.liste_blog > li::before {
  content: "\2714";    
	color: var(--turquoise);  
  display: none;
  width: 1em; /* Also needed for space (tweak if needed) */
  margin-left: -1em; /* Also needed for space (tweak if needed) */
}
ul.liste_blog > li {
	border-top : 1px solid grey;
	padding-top:20px;
}
table, .tableau_blog td {
	border: none;
	vertical-align: bottom;
}

.bouton_formulaire_cta , .wpforms-submit{
	background-color:var(--turquoisedark) !important;
	color: white !important;
}

.wpforms-field-checkbox{
	font-weight: bold;
	color: var(--turquoise);  
	
}



/* ****************************** */
/* Style pour les encarts formation */

 
 /*
   css minimal : grille 2 colonnes, styles discrets, accessibilité de base 
   CSS généré par ChatGPT
 */
    :root { --gap: 12px; --border: 1px solid #ddd; --radius: 10px; }
    html, body { height: 100%; }
    body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; }
    header { padding: 16px; border-bottom: var(--border); }
    header h1 { margin: 0 0 6px; font-size: 1.25rem; }
    header p { margin: 0; color: #444; font-size: .95rem; }

    .layout { display: grid; grid-template-columns: 32% 68%; gap: var(--gap); padding: var(--gap); }
    @media (max-width: 900px) { .layout { grid-template-columns: 1fr; } }

    .panel {  border-radius: var(--radius); padding: 12px;  }
    /*.panel h2 { margin: 0 0 8px; font-size: 1rem; }*/

    /* colonne gauche */
    .sidebar { display: flex; flex-direction: column; gap: var(--gap); }
    .row { display: grid; gap: 8px; }

    label { font-weight: 600; font-size: .95rem; }
    select, input[type="text"], textarea, button { font: inherit; }
    select, input[type="text"], textarea { width: 90%; padding: 8px; border: var(--border); border-radius: 8px; background: #fff; }

    .prompt-list { display: grid; gap: 6px; max-height: 45vh; overflow: auto; padding-right: 2px; }
    .prompt-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; border: var(--border); border-radius: 8px; margin:2px; padding:2px; box-shadow: 0 3px 6px rgba(0 0 0 / 0.5);}
    .prompt-item[aria-current="true"] { outline: 3px solid var(--indigo);  background-color:white }
    .prompt-item-title { margin: 0; font-size: .95rem; }
    
    /* accordéon */
    .accordion { /*border: var(--border); border-radius: 8px; */overflow: hidden; } 
    .accordion summary { list-style: none; cursor: pointer;  font-weight: 600; user-select: none; }
    .accordion summary::-webkit-details-marker { display: none; }
    .accordion .content { border-top: var(--border); }
	#personalcontent { display: flex;}
	#createPersonal {margin-left: auto; margin-right:8px}

    /* éditeur */
    .editor { display: grid; gap: 10px; }
    .editor .title-input { font-weight: 700; font-size: 1.05rem; }
    .editor .textarea { min-height: 220px; resize: vertical; }
    .buttons { display: flex; flex-wrap: wrap; gap: 8px; }
    
    .hint { font-size: .9rem; color: #444; }

    .loading { font-size: .95rem; color: #555; }
    .error { color: #a40000; font-weight: 600; }