/* ========================================================================= */
/* ========== RÉVISIONS : 10/2015, 11/2021, 01/2026 ======================== */
/* ========================================================================= */

/* ========================================================================= */
/*	10/2015 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

	11/2021: mise en place du Flexbox layout

	16-22/01/2026: revue avec ChatGpt et surtout Gemini. Mise à niveau et mise en place du GRID layout.
*/
/* ========= CODE GRAPHIQUE 01-02/2026 ====================================== */
/* 																		      */
/* 	#CCE0CC	Vert pastel			Pale Green / Light Sage			Vert très clair, fond doux - dégradé du vert foncé #006600
	#006600	Vert foncé			Dark Green						Vert pur et profond (souvent “institutionnel”)
	#A64420	Terre cuite			Burnt Sienna / Brick Brown		Couleur chaude, organique


	#000000	Noir				Black							Nom CSS officiel
	#333333	Gris anthracite		Dark Gray / Anthracite			Alternative douce au noir
	#565656	Gris moyen foncé	Dark Gray / Charcoal Gray		Gris neutre, fréquent pour texte secondaire
	#E4E4E4	Gris clair			Light Gray						Très courant pour fonds
	#FFFFFF	Blanc				White							Nom CSS officiel

	/* 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. */
/*                                                                            */
:root {
	--c-vert-pastel: #CCE0CC;
    --c-vert-fonce: #006600;
    --c-terre-cuite: #A64420;

	--c-noir: #000000;
    --c-gris-fonce: #333333; 
	--c-gris-moyen: #565656;
	--c-gris-clair: #E4E4E4;
	--c-blanc: #FFFFFF;

    --f-corps: 'quattrocento-sans', sans-serif;
}
/* ==========================================================================
   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: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: normal;
	font-family: var(--f-corps);
}
img {
	border: 0px;
}
ul {
	margin-left: 1.4em;
	list-style: disc;
}
/* ======== Corps =================================== */
body {
	/* fond en dégradé de gris fongris.png */
	background-color: var(--c-gris-moyen);
	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; /* 15px à gauche */
	background-color: transparent;
	display:grid;				/* GRID */
	grid-template-areas: "en-tete" "menus" "texte" "pied";
}
header {
	grid-area: en-tete;
}
nav {
	grid-area: menus;
}
section {
	grid-area: texte;
}
footer {
	grid-area: pied;
}

/* ========  zone de titre et en-tête =============== */
header#logo {
	background-color: transparent;

}

p#titre2 {
	font-size: 2rem;
	color: var(--c-vert-pastel);	
	text-align: center;
	margin: 15px 30px 15px 30px;
	text-wrap: balance;		/* 19/01/2026 */
}

img#logoimage {
	/* width: 100%; */
	max-width: 100%; height: auto; /* Gemini 17/01/2026 */
	/* taille adpatable pour les mobiles */
}

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;
	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) */

	color: var(--c-blanc);			/* 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 var(--c-gris-clair); 	/* utile ?? */
	border-right:1px var(--c-gris-clair); 	/* utile ?? */
}
#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;
}
#contenu a {
	color: var(--c-noir);
	text-decoration: none;
	font-style: italic;
	border-bottom: 1px var(--c-vert-fonce) dotted;
}
#contenu h1,h2 {				/* h2 suggéré par ChatGpt et Gemini 17/01/2026 */
	margin: 30px 30px 10px 30px;
	color: var(--c-terre-cuite); 
	font-style:italic;
	text-decoration: none;
	text-decoration-style: dashed;
	text-wrap: balance;			/* 19/01/2026 */
}

#contenu strong {
	text-decoration: none;
	font-weight: bold;
	color:var(--c-gris-fonce);
}
#contenu span.orange {
	color: var(--c-terre-cuite);		/* Terre cuite profonde 19/01/2026 */
}

 
/* ========= zone pied de page ======================= */
footer#pied {
	background-color: var(--c-blanc);
	padding-bottom: 10px;
	padding-top: 10px;
	margin-top: 0px;	/* pas d'espace avec contenu */
	min-height: 120px;
}
#pied a {
	color: var(--c-gris-fonce);				/* Texte et liens – contraste WCAG 16/01/2026 */
	font-style:normal;
	text-decoration: none;
}
#pied p {
	margin: 10px 30px 10px 30px;
	color:  var(--c-vert-fonce);	
	text-align: center;
	hyphens: auto;   /* Coupure autorisée de l'adresse mail */
}
#pied p.gris {                      
	color: var(--c-gris-fonce);		/* Texte et liens – contraste WCAG 16/01/2026 */
}
#pied p.nom {                       
	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: var(--c-gris-fonce);				/* contraste WCAG 16/01/2026 gris foncé sur fond blanc */ 
	}
	p#titre2 {
		color: var(--c-vert-fonce);
	}
	#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)  {
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 var(--c-vert-fonce);
  outline-offset: 3px;
}
nav a:focus-visible {
  background-color: var(--c-vert-pastel);
  border-radius: 4px;
}
a:focus-visible img {
  outline: 3px solid var(--c-vert-fonce);
  outline-offset: 4px;
}
a:hover,
a:focus-visible {
  text-decoration: underline;
}