/*
Theme Name: ces2025
Theme URI: https://www.ces.gouv.qc.ca/themes/ces2025/
Author: the WordPress team
Author URI: https://www.ces.gouv.qc.ca
Description: Theme pour le site web du CES
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: Gouvernement du Québec
Text Domain: ces2025
Tags: site CES
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
 
 /*  variables des couleurs */

:root{ 
 --ces-couleur-gris-fonce: #1d1d1b;
 --ces-couleur-bleu-fonce: #4054A1;
 --ces-couleur-bleu-poudre: #99B1D9;
 --ces-couleur-bleu-pale: #EAEFF4;
 --ces-couleur-bleu-aqua: #88B3C6;
 --ces-couleur-beige: #F4F1EC;
 --ces-couleur-orange: #EA5436;
 --ces-couleur-rose: #F7BCB3;
 --ces-couleur-vert-fonce: #2C605B;
 --ces-couleur-vert-printemps: #73B129;
 --ces-couleur-vert-pale: #A9C59F;
 --ces-couleur-jaune: #FDC400;
 --ces-couleur-blanc: #FFFFFF; 
 --ces-accueil-actu-radius: 18px;
 --ces-accueil-actu-text-padding: 10px;
}

body {
	color:var(--ces-couleur-gris-fonce);	
}

a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

.lienloi {
	
}

.italique  {
	font-style: italic;
}

.couleur  {
	color : var(--ces-couleur-bleu-fonce);	
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}




/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

a {
	text-decoration: none;
	font-family: inherit;
}

a:hover {
    text-decoration: underline;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}


.footer-relative{
	position: relative;
}

.bande-bas-de-page {
	position: relative;
	z-index: 1000;
	top: -1vw;
}



/* conteneur de chevauchement */

.gauche {
  position: relative;
  background: #f88;
  padding: 20px;
  width: 50%;
  z-index: 10; /* visuellement au-dessus */
}

/* Le chevauchement visuel */
.gauche::after {
  content: "";
  position: absolute;
  top: 0;
  right: -60px; /* chevauche la div droite */
  width: 60px;
  height: 100%; /* suit automatiquement la hauteur */
  background: inherit; /* même couleur que la div */
  pointer-events: none; /* ne bloque pas les clics */
}

.droite {
  background: #8cf;
  padding: 20px;
  position: relative;
  z-index: 1; /* en-dessous visuellement */
}

/* on définit un z-index  pour le menu afin qu'il passe par dessus l'ovelap du design de la page d'accueil */
.zindexover {
	z-index: 20;
}


.conteneur-chevauchement {
/*     display: flex; Permet aux enfants d'être sur la même ligne */
/*     align-items: flex-start; Aligner en haut si les hauteurs sont différentes */
    /* ou justify-content: center; si vous voulez les centrer */
    position: relative; 
}

.accueil-section1-premier-bloc {
    position: relative; /* Permet le z-index */
    z-index: -1; /* Le premier bloc est en dessous par défaut, ou au même niveau */
/*     left : -300px; */
}

.accueil-section1-deuxieme-bloc {
    z-index: -2;
    margin-left: -70px !important;
    flex-basis : 70%;
    min-height: 800px;
}

.accueil-section3 {
	align-items : normal;
}

.accueil-section3-premier-bloc {
    position: relative;
    z-index: -11; 
    left : -300px;
    width:720px;
}

.accueil-section3-deuxieme-bloc {
    z-index: -12;
}

/* Optionnel : Rendre responsive */
@media (max-width: 768px) {
    .conteneur-chevauchement {
        flex-direction: column; /* Revenir à l'empilement vertical sur les petits écrans */
        align-items: center; /* Centrer les blocs */
    }
    .deuxieme-bloc-chevauche {
        margin-left: 0; /* Annuler le chevauchement horizontal */
        margin-top: -30px; /* Ou créer un petit chevauchement vertical si désiré */
    }
}

#accueil-blocs {
	background-color: yellow;
	display : flex;
}

#accueil-actualites {
	font-family: inherit;
	display: flex;
 	flex-direction: column;
	gap: 15px;
}

.accueil-actualite {
	font-family: inherit;
	background-color: var(--ces-couleur-bleu-fonce);
	border-radius : var(--ces-accueil-actu-radius);
	height: 230px;
/* 	padding: 15px; */
}

.accueil-actualite a {
	display: flex;
	flex-direction: row;
	height: 100%;  /* dans le cas d'un flex item, le 'a' se comporte comme un display:block */
	color : var(--ces-couleur-blanc) !important;	
}

.accueil-actualite h3 {
	font-family: inherit;
	font-size: 11pt !important;  /*override le h3*/
	font-weight: bold;
}

/* DIV 1 */

.accueil-actualite  a>div:nth-child(1) {
	align-content: top;
	flex: 0 0 50%;
	min-width: 0;
}

.accueil-actualite a>div:nth-child(1) img {
	width: 100%;
	height: 100%;
	object-fit: fill;
	border-top-left-radius : var(--ces-accueil-actu-radius);
	border-bottom-left-radius : var(--ces-accueil-actu-radius);
	display: block;	
}


/* DIV 2 */

.accueil-actualite  a>div:nth-child(2) {
	flex: 1 1 50%;
	margin: var(--ces-accueil-actu-text-padding);
	overflow: hidden;
	font-size: 11pt; /* temporaire */
	
	display: flex;
	flex-direction: column;
}

.accueil-actualite  a>div:nth-child(2)>div:nth-child(1) {
	flex: 1 1 90%;
	max-height: 80%;
	overflow : hidden;
}

.accueil-actualite  a>div:nth-child(2)>div:nth-child(2) {
	flex: 1 1 20%;
	text-align: right;
	align-content: flex-end;
	margin-top: 0.5em;
}

.accueil-actualite  a>div:nth-child(2)>div:nth-child(2)>img{
	width: 3.5rem;
}

.accueil-actualite > div:nth-child(3) img {
	width: 100px;
}


.accueil-publication h3 {
	font-family: inherit;
	font-size: inherit;  /*override le default size de h3*/
	font-weight: bold;
}



.actualite-encart {
	float: right;
}

#encartbleu {
  position: relative;
  /* On retire le background-image d'ici car il est limité par le cadre */
}

#encartbleu::after {
  content: "";
  position: absolute;
  
  /* On utilise les valeurs négatives pour faire sortir l'élément du cadre */
  bottom: -14em; 
  right: -7.65em; 
  
  /* Taille du SVG */
  width: 15.5em;
  height: 18em;

  background-image: url('/wp-content/themes/ces2025/assets/images/sigle-90.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  
  transform: scaleY(1);

  /* Empêche l'image de masquer le texte ou de bloquer les clics */
  pointer-events: none;
  z-index: 1; 
}



.presidence-encart {
	float: left;

}

.presidence-encart>figure {
	margin-right: 20px !important;
	margin-bottom: 20px;
}

.image-100 img {
	width: 100%;
}

summary{
	list-style: none;
	cursor: pointer;
	padding-right: 20px;
	outline: none;
	border-bottom: 1px solid var(--ces-couleur-gris-neutre-fonce);
}

summary::-webkit-details-marker {
  display: none;
}

summary::after{
	content:  "\2304";
	font-size: 2rem;
/* 	position: relative; */
/* 	top: 0.6 rem; */
	color: var(--ces-couleur-bleu-fonce);
	margin-left: 1rem;
}

details[open] summary::after{
	content: "\2303";
/* 	vertical-align: middle;	 */
}

.petit-cercle{
	position: absolute;
	width: 20px;
	height: 20px;
}

.grand-cercle{
	position: relative;
	width: 210px;
	height: 210px;
}

.dix-h{
	top: 17%;
	left: 5%;
}

.huit-h{
	top: 72%;
	left: 5%;
}
.quatre-h{
	top: 72%;
	left: 85%;
}
.deux-h{
	top: 17%;
	left: 85%;
}
.une-h{
	top: 3%;
	left: 70%;
}
.cinq-h{
	top: 78%;
	left: 70%;
}
.sept-h{
	top: 83%;
	left: 15%;
}
.onze-h{
	top: 7%;
	left: 15%;
}
.trois-h{
	top: 40%;
	left: 94%;
}
.neuf-h{
	top: 40%;
	left: -4%;
}