/*
Theme Name:   Blogod'eau
Theme URI:    https://blogodeau.com
Author:       Blogod'eau
Description:  Thème sur-mesure de la plateforme Blogod'eau, plateforme de
              vulgarisation scientifique sur l'eau et les milieux aquatiques
              des Antilles françaises.
Version:      0.1.0
Requires PHP: 8.1
Text Domain:  blogodeau
*/

/*
 * Ce commentaire d'en-tête est OBLIGATOIRE dans un thème WordPress : c'est
 * ce qui permet à WordPress de reconnaître ce dossier comme un thème
 * activable, et d'afficher son nom/sa description dans l'admin. Sans lui,
 * WordPress ignore complètement le dossier.
 *
 * Le reste de ce fichier ne sera QUE les jetons de design (variables de
 * couleurs et typographies) — jamais la mise en page elle-même, qui sera
 * répartie dans des fichiers .css plus spécifiques au fur et à mesure
 * (header, footer, carte...). Garder ce fichier focalisé sur les jetons
 * le rend facile à maintenir : toute la charte graphique tient en un
 * coup d'œil, tout en haut du fichier.
 */

/* ==========================================================================
   Jetons de design — directement repris de la charte graphique fournie
   ========================================================================== */

:root {
	/* Couleurs */
	--bdo-abysse:      #0B2E3D;
	--bdo-abysse-deep: #071E29;
	--bdo-lagon:       #12A9A6;
	--bdo-lagon-soft:  #5FCFC9;
	--bdo-sable:       #F3E6C4;
	--bdo-ecume:       #FBF8F2;
	--bdo-mangrove:    #3F6B4F;
	--bdo-curcuma:     #E0A23A;

	/* Typographies (auto-hébergées via assets/fonts/ + assets/css/polices.css,
	   avec repli automatique sur Google Fonts tant que les fichiers ne
	   sont pas encore fournis — voir functions.php) */
	--bdo-police-titre:  'Fraunces', serif;
	--bdo-police-texte:  'Work Sans', sans-serif;
	--bdo-police-donnee: 'IBM Plex Mono', monospace;
}

/* ==========================================================================
   Réinitialisation minimale
   ========================================================================== */

/*
 * box-sizing: border-box appliqué à tout : rend les calculs de largeur
 * bien plus prévisibles (les marges/bordures internes ne s'ajoutent plus
 * à la largeur déclarée d'un élément). C'est un standard quasi universel
 * dans le développement web moderne.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var( --bdo-ecume );
	color: var( --bdo-abysse );
	font-family: var( --bdo-police-texte );
	line-height: 1.6;
}

h1, h2, h3, h4 {
	font-family: var( --bdo-police-titre );
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 0.4em;
}

a {
	color: var( --bdo-lagon );
}

img {
	max-width: 100%;
	height: auto;
}

/* ==========================================================================
   Navigation principale — comportement responsive
   ========================================================================== */

/*
 * Le bouton "hamburger" est caché par défaut : il n'apparaît qu'en
 * dessous du seuil mobile défini plus bas. display:none ici, jamais
 * "visibility:hidden", pour qu'il n'occupe aucun espace sur desktop.
 */
.bdo-bouton-menu {
	display: none;
	background: none;
	border: none;
	color: var( --bdo-ecume );
	font-size: 28px;
	cursor: pointer;
	padding: 4px 8px;
}

.bdo-nav-principale ul {
	list-style: none;
	display: flex;
	gap: 20px;
	margin: 0;
	padding: 0;
}

.bdo-icone-accueil {
	height: 30px;
	width: auto;
	vertical-align: middle;
	display: inline-block;
}

/*
 * Seuil mobile : en dessous de 768px de large (une tablette en
 * orientation portrait, ou un téléphone), on bascule vers le menu
 * hamburger.
 */
@media ( max-width: 768px ) {

	.bdo-bouton-menu {
		display: block;
	}

	.bdo-nav-principale {
		/* Le menu quitte le flux normal de la page pour se superposer
		   en dessous de l'en-tête, plutôt que de pousser le contenu. */
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var( --bdo-abysse );
	}

	/* Masqué par défaut sur mobile... */
	.bdo-nav-principale ul {
		display: none;
		flex-direction: column;
		gap: 0;
		padding: 10px 24px 20px;
	}

	/* ...et affiché uniquement quand JavaScript ajoute cette classe
	   (voir assets/js/navigation.js), au clic sur le bouton hamburger. */
	.bdo-nav-principale.bdo-menu-ouvert ul {
		display: flex;
	}

	.bdo-nav-principale ul li a {
		display: block;
		padding: 10px 0;
		color: var( --bdo-ecume );
		border-bottom: 1px solid rgba( 255, 255, 255, 0.1 );
	}
}

/* ==========================================================================
   Bandeau d'accueil — désactivation du parallaxe sur mobile
   ========================================================================== */

@media ( max-width: 768px ) {
	.bdo-hero-accueil {
		background-attachment: scroll !important;
	}

	.bdo-filigrane-parallaxe {
		background-attachment: scroll !important;
	}
}

/* ==========================================================================
   Recherche — bouton loupe + formulaire dépliable
   ========================================================================== */

.bdo-bouton-recherche {
	background: none;
	border: none;
	color: var( --bdo-ecume );
	font-size: 20px;
	cursor: pointer;
	padding: 4px 8px;
	margin-left: 12px;
}

.bdo-recherche-form {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width 0.25s ease, opacity 0.2s ease;
}

.bdo-recherche-form.bdo-recherche-ouverte {
	max-width: 240px;
	opacity: 1;
	margin-left: 8px;
}

.bdo-recherche-form input[type="search"] {
	width: 100%;
	padding: 6px 10px;
	border: none;
	border-radius: 4px;
}

.bdo-recherche-form button[type="submit"] {
	background: none;
	border: none;
	color: var( --bdo-ecume );
	cursor: pointer;
	font-size: 16px;
	flex: 0 0 auto;
}

/* ==========================================================================
   Accessibilité — navigation clavier
   ========================================================================== */

/*
 * Lien d'évitement : positionné hors de l'écran par défaut (technique
 * standard, plus fiable que display:none qui empêcherait aussi le focus
 * clavier de l'atteindre). Il ne redevient visible que lorsqu'il reçoit
 * le focus — donc invisible à la souris, mais accessible au clavier dès
 * la première touche Tab.
 */
.bdo-lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	background: var( --bdo-curcuma );
	color: var( --bdo-abysse );
	padding: 12px 20px;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 6px 0;
}

.bdo-lien-evitement:focus {
	left: 0;
}

/*
 * Indicateur de focus renforcé : le contour par défaut du navigateur est
 * souvent trop fin ou peu contrasté sur nos fonds de couleur. On le
 * remplace par un contour net dans la couleur d'accent, uniquement
 * visible pour la navigation clavier (:focus-visible, pas :focus tout
 * court, pour ne pas l'afficher gênamment à chaque clic de souris).
 */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var( --bdo-curcuma );
	outline-offset: 2px;
}