/* =================================================== */
/* ========== 10/2015, 11/2021, 01/2026 ============== */
/* =================================================== */

/*
	code couleur: "Harmonie des couleurs sur le web"
	61/3 = 62/6: vert: #006600 - rouge #CC6600 (selon livre)
	en pratique rouge = #993333 (fonce) ou #CC3300
	
	image en-tête: 960 px * 120 px

    17 & 18/01/2021: adapation mesg de Google -> plus d'espacement entre zones cliquables
    caractères plus grands -> usage de rem au lieu de medium / large / x-large

    06/05/2021: espaces cliquables de 48px mini, espaces de 32px mini
    + clarification de la taille des caractères en en-tête des media queries

	16-22/01/2026: revue avec ChatGpt et surtout Gemini
*/
/* ==========================================================================
   GEMINI - DÉCLARATION DES POLICES AUTO-HÉBERGÉES : QUATTROCENTO SANS
   Migration depuis Adobe Edge Fonts - Implémentation WOFF2/WOFF 22/01/2026
   ========================================================================== */

/* 1. Style Regular (Normal) */
@font-face {
    font-family: 'quattrocento-sans'; /* Correspondance exacte avec l'existant */
    src: url('fonts/quattrocento-sans-regular.woff2') format('woff2'),
         url('fonts/quattrocento-sans-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Performance : évite le texte invisible */
}

/* 2. Style Italic (CRITIQUE pour éviter les faux italiques) */
@font-face {
    font-family: 'quattrocento-sans';
    src: url('fonts/quattrocento-sans-italic.woff2') format('woff2'),
         url('fonts/quattrocento-sans-italic.woff') format('woff');
    font-weight: 400;
    font-style: italic; /* Mappe ce fichier aux demandes 'font-style: italic' */
    font-display: swap;
}

/* 3. Style Bold (Gras) */
@font-face {
    font-family: 'quattrocento-sans';
    src: url('fonts/quattrocento-sans-bold.woff2') format('woff2'),
         url('fonts/quattrocento-sans-bold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* 4. Style Bold Italic (Gras Italique) */
@font-face {
    font-family: 'quattrocento-sans';
    src: url('fonts/quattrocento-sans-bold-italic.woff2') format('woff2'),
         url('fonts/quattrocento-sans-bold-italic.woff') format('woff');
    font-weight: 700;
    font-style: italic;
    font-display: swap;
}
/* ===========  Reset CSS ========================== */
html, body, h1, h2, h3, h4, h5, h6, p, ol, ul, li, blockquote, div, nav, aside, footer, header, section, article, figure, figcaption {
	padding: 0px 0px 0px 0px;
	margin: 0px 0px 0px 0px;
	font-size: 16px;
	font-weight: normal;
	font-family: quattrocento-sans, sans-serif;
}
img {
	border: 0px;
}
ul {
	margin-left: 1.4em;
	list-style: disc;
}
/* ======== Corps =================================== */
body {
	/* fond en dégradé de gris fongris.png */
	background-color: #565656;
	font-family: quattrocento-sans, sans-serif;		
	/* background-image: url(images/fongris.png);  0612 */
	margin: 0px auto 0px auto;
}
main#conteneur {
	max-width: 650px; /* max-width au lieu de width pour largeur adaptable aux écrans mobiles */;
	margin: 0px auto 15px auto;
	background-color: transparent;
	display:flex;				/* Flexbox */
	flex-flow:row wrap;			/* Flexbox */
}
/* ========  zone de titre et en-tête =============== */
header#logo {
	background-color: transparent;
	flex: 100%;				/* Flexbox toute la largeur */
	order: 1;				/* Flexbox */
	display: flex;			/* Flexbox */
	flex-flow: row wrap;	/* Flexbox */
	align-items: center;	/* Flexbox alignement 
	vertical */
	justify-content: space-between;
}
figure#titre1 {
	flex: 0 1 70px;	/* alignement avec colonne gauche */
	text-align: center;
	display:none;  /* 0612 */
}
p#titre2 {
	font-weight: normal;
	font-size: 2rem;
	color: #CCE0CC;	/* 19/01/2026 autres options (dégradés du Vert Pakistan #006600 : #99C299 (Vert sauge clair), #CCE0CC (Vert menthe très pâle) et terre cuite #A64420: #DBB4A6 (Pêche poudrée), #EDDAD2 (Beige rosé très pâle) */
	flex: 1 1 60%;
	margin-left: 30px;	/* 0612 alignement */
	margin-top: 15px;
	margin-bottom: 15px;
	text-wrap: balance;		/* 19/01/2026 */
}
a#logoy {
	text-decoration: none;
	color: #006600;
}
a#logoy:hover {
	text-decoration: none;
	color: #006600;
}
img#logoimage {
	/* width: 100%; */
	max-width: 100%; height: auto; /* Gemini 17/01/2026 */
	/* taille adpatable pour les mobiles */
}
img#psi {
	width: 70%; /* taille adpatable pour les mobiles */;
	height:70%;
}
figure#entete {
	background-color: transparent;	/* 0612 */
	margin: 0px auto 0px auto; /* espace avec contenu */
	flex: 100%;				/* Flexbox toute la largeur */
}

/* ======= menus =================================== */
nav#espace_menus {
	background-color: transparent;
	/* min-height: 410px; */
	flex: 100%;		/* Flexbox */
	order: 2;				/* Flexbox */
	margin: 0px 0px 10px 0px;
	padding: 0px 30px 0px 30px;
}
ul.menu {
	font-style: italic;
	margin-left: 0px;
}
ul.menu:first-child {
    margin-top: 0px; 
	float:left;
	text-align: left;
	max-width: 30%;
}
ul.menu:last-child {
    margin-top: 0px; 
	float:right;
	text-align: right;
	max-width: 70%;  /* pour éviter un retour à la ligne de l'ul - retour à la ligne du texte */
}
ul.menu li {
	list-style-type: none;
}
ul.menu a {
    display: block;               /* 5/5/21 padding dans balise a (espace cliquable de 48px minimum) */
    /* min-height: 24px;
    line-height: 24px;            /* centrage */
	color: #ffffff;			/* contraste WCAG 16/01/2026 blanc sur fond gris foncé */
	text-decoration: none;
    font-size:1.1rem;
	margin: 10px 0px 10px 0px;
}
ul.menu a:hover {
	text-decoration: underline;
}

/* ========= zone centrale des pages normales ======== */
section#contenu {
	background-color: white;
	border-left:1px #E4E4E4;
	border-right:1px #E4E4E4;
	flex: 100%;			/* Flexbox */
	order: 3;				/* Flexbox */
}
#contenu p {
	/* Texte standard */
	margin: 10px 30px 10px 30px;
	text-align: left;
	line-height: 1.5;			/* Lisibilité texte & interlignage (WCAG 1.4.12)  16/01/2026 1.6 ramené à 1.5 */
	word-spacing: normal;
	/* text-wrap: pretty;			/* 19/01/2026 */
}
#contenu a {
	color: #000000;
	text-decoration: none;
	font-style: italic;
	border-bottom: 1px #336633 dotted;
}
#contenu h1,h2 {				/* h2 suggéré par ChatGpt et Gemini 17/01/2026 */
	margin: 30px 30px 10px 30px;
	color: #A64420; 			/* Terre cuite profonde 19/01/2026 maintient la chaleur et l'accessibilité tout en améliorant le contraste et en réduisant l'agressivité visuelle, s'alignant mieux avec un cadre thérapeutique apaisant. */
	font-weight: normal;
	font-size: 1rem;
	font-style:italic;
	text-decoration: none;
	text-decoration-style: dashed;
	text-wrap: balance;			/* 19/01/2026 */
}
/*
#contenu h1:first-child, h2:first-child {
	margin: 10px 30px 10px 30px;
}
*/

#contenu strong {
	text-decoration: none;
	font-weight: bold;
	color:#333333;
}
#contenu span.orange {
	color: #A64420;		/* Terre cuite profonde 19/01/2026 */
}

 
/* ========= zone pied de page ======================= */
footer#pied {
	background-color: #FFFFFF;
	padding-bottom: 10px;
	padding-top: 10px;
	margin-top: 0px;	/* pas d'espace avec contenu */
	min-height: 120px;
	flex: 100%;				/* Flexbox */
	order: 4;				/* Flexbox */
}
#pied a {
	color: #333333;				/* Texte et liens – contraste WCAG 16/01/2026 */
	font-style:normal;
	text-decoration: none;
}
#pied p {
	margin: 10px 30px 10px 30px;
	font-size:1rem;
	color:  #006600;		/* Vert Pakistan, idem titre en responsive mobile 23/01/2026 */
	text-align: center;
	hyphens: auto;   /* Coupure autorisée de l'adresse mail */
}
#pied p.gris {                        /* CRM  */
	color: #333333;				/* Texte et liens – contraste WCAG 16/01/2026 */
}
#pied p.nom {                        /* CRM  */
	color: #006600;				/* Texte et liens – contraste WCAG 16/01/2026 */
	font-weight: bold;
}
#pied a:hover {
	text-decoration: underline;
}
/* ======== Responsive pour mobiles ================= */
@media only screen and (max-width: 650px)  {
	body {
		background-color: white;
	}
	ul.menu a {
		color: #333333;				/* contraste WCAG 16/01/2026 gris foncé sur fond blanc */ 
	}
	p#titre2 {
		color: #006600;
	}
	#contenu h1:first-child {			/* 19/01/2026 éviter trop d'espace blanc entre menu et h1 */
	margin: 10px 30px 10px 30px;
}
}
@media only screen and (max-width: 500px)  {
img#psi {
		width: 10vw; /* taille adpatable pour les mobiles */;
		height:10vw;
	}
p#titre2 {
	font-size: 1.2rem;
}
#contenu p, #pied p {
	margin: 10px 15px 10px 15px;  /* moins de marges */
	/* marges titre et h1 inchangées */
}
} 


/* =============================================== */
/* Accessibilité – Focus clavier global            */
/* WCAG 2.1 – 2.4.7      ChatGpt 16/01/2026        */
/* =============================================== */

a:focus-visible,
button:focus-visible {
  outline: 3px solid #006600;
  outline-offset: 3px;
}
nav a:focus-visible {
  background-color: #E8F3E8;
  border-radius: 4px;
}
a:focus-visible img {
  outline: 3px solid #006600;
  outline-offset: 4px;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
}
/*
#contenu {					/* largeur de texte (confort cognitif) 16/01/2026 mais nécessite de revoir les dimensions
  max-width: 65ch;
}
*/