/*
Theme Name:   Doc Essyo (enfant)
Theme URI:    https://docessyo.com
Description:  Thème enfant de GeneratePress pour docessyo.com. Tout le design du site vit dans ce thème.
Author:       Doc Essyo
Author URI:   https://docessyo.com
Template:     generatepress
Version:      0.4.0
Requires PHP: 7.4
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  docessyo-enfant
*/

/* ==========================================================================
   Polices hébergées sur le site (licence SIL OFL 1.1, voir le dossier fonts/)
   font-display: swap affiche le texte tout de suite, même pendant le chargement.
   ========================================================================== */

@font-face {
	font-family: "Nunito";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/nunito-700.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-400.woff2") format("woff2");
}

@font-face {
	font-family: "Atkinson Hyperlegible";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("fonts/atkinson-hyperlegible-700.woff2") format("woff2");
}

/* ==========================================================================
   Variables de design
   Contrastes mesurés (WCAG) : texte #111111 sur bleu 12,01:1, sur gris 17,59:1,
   sur blanc 18,88:1. Le vert est trop clair pour du texte : décoration seulement.
   ========================================================================== */

:root {
	/* Couleurs */
	--de-bleu: #a3d5f2;         /* en-tête, pied de page, boutons */
	--de-bleu-survol: #8ecae6;  /* survol des boutons */
	--de-gris: #f5f7fa;         /* fond du site */
	--de-blanc: #ffffff;        /* cartes */
	--de-texte: #111111;        /* texte */
	--de-bordure: #dde3ea;      /* contour discret des cartes */
	--de-vert: #7cb342;         /* petits détails décoratifs uniquement */

	/* Polices */
	--de-police-texte: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	--de-police-titres: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* ==========================================================================
   Base : fond, texte, titres, liens
   ========================================================================== */

body {
	background-color: var(--de-gris);
	color: var(--de-texte);
	font-family: var(--de-police-texte);
	line-height: 1.6;
}

h1,
h2,
h3,
h4,
h5,
h6,
.main-title,
.site-title {
	font-family: var(--de-police-titres);
	font-weight: 700;
	color: var(--de-texte);
}

/* Les liens restent noirs mais toujours soulignés, pour être repérables. */
a,
a:visited {
	color: var(--de-texte);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--de-texte);
	text-decoration-thickness: 0.15em;
}

/* Le titre du site et le menu n'ont pas besoin d'être soulignés. */
.main-title a,
.site-title a,
.main-navigation a {
	text-decoration: none;
}

/* Contour bien visible pour la navigation au clavier. */
:focus-visible {
	outline: 3px solid var(--de-texte);
	outline-offset: 2px;
}

/* ==========================================================================
   En-tête et menu
   ========================================================================== */

.site-header,
.main-navigation,
.main-navigation .inside-navigation {
	background-color: var(--de-bleu);
}

.main-title a,
.site-description,
.main-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
	color: var(--de-texte);
}

.main-navigation .main-nav ul li:not([class*="current-menu-"]):hover > a,
.main-navigation .main-nav ul li[class*="current-menu-"] > a {
	color: var(--de-texte);
	text-decoration: underline;
	text-underline-offset: 0.3em;
}

.main-navigation ul ul {
	background-color: var(--de-blanc);
	border: 1px solid var(--de-bordure);
}

/* Sous-menus (Services, Anatomie, Blog) : restent ouverts pendant la navigation
   au clavier, même si le JavaScript de GeneratePress ne s'est pas chargé. */
.main-navigation:not(.toggled) ul li:focus-within > ul {
	left: auto;
	opacity: 1;
	pointer-events: auto;
	height: auto;
	overflow: visible;
}

/* ==========================================================================
   Cartes blanches sur fond gris
   ========================================================================== */

.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content,
.inside-page-header,
.sidebar .widget {
	background-color: var(--de-blanc);
	border: 1px solid var(--de-bordure);
	border-radius: 8px;
}

/* ==========================================================================
   Boutons
   La bordure noire distingue le bouton bleu clair du fond gris.
   ========================================================================== */

button,
html input[type="button"],
input[type="reset"],
input[type="submit"],
a.button,
a.button:visited,
.wp-block-button .wp-block-button__link {
	background-color: var(--de-bleu);
	color: var(--de-texte);
	border: 2px solid var(--de-texte);
	border-radius: 6px;
	font-family: var(--de-police-texte);
	font-weight: 700;
	text-decoration: none;
}

button:hover,
button:focus,
html input[type="button"]:hover,
html input[type="button"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
a.button:hover,
a.button:focus,
.wp-block-button .wp-block-button__link:hover,
.wp-block-button .wp-block-button__link:focus {
	background-color: var(--de-bleu-survol);
	color: var(--de-texte);
}

/* ==========================================================================
   Pied de page
   ========================================================================== */

.site-footer,
.site-info,
.footer-widgets {
	background-color: var(--de-bleu);
	color: var(--de-texte);
}

.site-info a,
.footer-widgets a {
	color: var(--de-texte);
}

/* Petit liseré vert décoratif en haut du pied de page. */
.site-info {
	border-top: 4px solid var(--de-vert);
}

/* Menu, copyright et mention les uns sous les autres, centrés. */
.inside-site-info {
	flex-direction: column;
	gap: 0.75rem;
}

/* ==========================================================================
   Pied de page : menu et mention
   ========================================================================== */

.de-menu-pied ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Zone cliquable d'au moins 44 px de haut, confortable au doigt. */
.de-menu-pied a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* La mention s'affiche sur sa propre ligne, sous le copyright. */
.de-mention-pied {
	display: block;
	margin-top: 0.25rem;
}

/* ==========================================================================
   Détails décoratifs en vert (jamais pour du texte)
   ========================================================================== */

hr,
.wp-block-separator {
	border: 0;
	border-top: 3px solid var(--de-vert);
	opacity: 1;
}

blockquote {
	border-left: 4px solid var(--de-vert);
}