/*
 Theme Name:     Divi Halloween
 Theme URI:      https://www.scope-athlete.com
 Description:    Thème enfant de Divi pour Halloween : nuit de citrouille, sorcière ou os, toiles d'araignée, brume, chauves-souris, citrouilles lumineuses et photos d'ambiance de l'équipe (zombies à l'entraînement). Reprend toutes les fonctions du thème enfant « Divi Child Theme » (PDF, shortcodes, recherche d'athlètes) et sa couche de confort smartphone / ordinateur : il peut le remplacer tel quel. Le style se trouve dans assets/halloween.css, les réglages dans Personnaliser > Ambiance d'Halloween. Lisible sur le site comme dans l'application (contrastes, mouvement réduit respecté, aucun décor ne bloque un clic).
 Author:         Matthieu Montes
 Author URI:     https://www.scope-athlete.com
 Template:       Divi
 Version:        1.1.0
 Text Domain:    divi-halloween
 License:        Usage privé SCOPE
 Tags:           dark, light, holiday, custom-colors
*/

/* ============================================================================================================================
   SCOPE - couche « confort » (identique à celle de Divi-child) : lecture et utilisation sur smartphone et sur ordinateur.
   ----------------------------------------------------------------------------------------------------------------------------
   Ordre de chargement sur le site : Divi > CE FICHIER > Bootstrap (HEAD from Divi theme.html) > CSS personnalisé de Divi
   (CSS from Divi theme.css). Les règles préfixées par « html body » passent donc devant celles de Bootstrap ; le CSS personnalisé
   de Divi, chargé en dernier, garde le dernier mot.
   Mesures faites sur le site réel à 375 px et 1440 px (débordement, contrastes, tailles de texte, zones tactiles).
   Chaque bloc est indépendant : supprimer un bloc suffit à revenir au comportement précédent.
   ============================================================================================================================ */

/* A. Variables ---------------------------------------------------------------------------------------------------------- */
:root {
	--ux-brand: #4b163f;   /* aubergine SCOPE */
	--ux-brand-2: #6a245a; /* survol */
	--ux-focus: #7a2f63;   /* anneau de focus au clavier */
}

/* B. Base : smartphone ------------------------------------------------------------------------------------------------- */
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;          /* le navigateur ne regonfle plus le texte en paysage */
	accent-color: var(--ux-brand);   /* cases, boutons radio et barres de progression aux couleurs du site */
	scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 90px); /* une ancre (#...) ne passe plus sous l'en-tête fixe */
}

/* B1. Débordement horizontal : le .container de Bootstrap (padding de 12 px) écrase celui de Divi, et le logo (position:absolute,
   largeur 100 %) dépassait de 12 px à droite : toutes les pages se décalaient latéralement sur smartphone. */
body.et_header_style_left .logo_container {
	width: calc(100% - var(--bs-gutter-x, 1.5rem));
}

/* B2. Texte de 16 px sur smartphone (14 px sur Divi par défaut) */
@media (max-width: 767px) {
	html body {
		font-size: 16px;
	}
	/* un peu d'air entre l'en-tête et le titre de la page */
	html body #main-content .entry-title.main_title {
		margin-top: 18px;
	}
}

/* C. Toucher et clavier ------------------------------------------------------------------------------------------------ */
/* Pas de zoom involontaire quand on tape deux fois de suite sur un bouton ou un lien (le zoom par pincement reste possible) */
a, button, input, select, textarea, label, summary, [role="button"] {
	touch-action: manipulation;
}
/* Anneau de focus visible quand on navigue au clavier (Bootstrap garde le sien sur ses boutons) */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--ux-focus);
	outline-offset: 2px;
}
:where(#main-footer, #footer-bottom, .et_pb_bg_layout_dark) :focus-visible {
	outline-color: #fff;
}

/* D. Formulaires ------------------------------------------------------------------------------------------------------- */
/* iPhone zoome sur tout champ dont le texte fait moins de 16 px : on les passe à 16 px sur smartphone */
@media (max-width: 767px) {
	html body #page-container :is(input, select, textarea):not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="image"], [type="hidden"], [type="color"]) {
		font-size: 16px !important;
	}
}
/* Champs faciles à toucher (44 px de haut) sur écran tactile */
@media (pointer: coarse) {
	html body #page-container :is(input, select):not([type="checkbox"], [type="radio"], [type="range"], [type="submit"], [type="button"], [type="reset"], [type="file"], [type="image"], [type="hidden"], [type="color"]) {
		min-height: 44px;
	}
}

/* E. MemberPress : connexion, inscription, compte ---------------------------------------------------------------------- */
/* Cases à cocher et boutons radio : cible plus grande */
html body .mp_wrapper input[type="checkbox"],
html body .mp_wrapper input[type="radio"] {
	width: 1.3rem;
	height: 1.3rem;
	margin-right: .45rem;
	vertical-align: -.25em;
	cursor: pointer;
}
/* Bouton principal aux couleurs du site (il était gris, donc semblait désactivé : « Se connecter » en blanc sur #949494 = 3:1) */
html body .mp_wrapper input[type="submit"],
html body .mp_wrapper .mepr-submit,
html body .mp_wrapper .mepr-share-button {
	background: var(--ux-brand);
	border: 1px solid var(--ux-brand);
	color: #fff;
	font-weight: 600;
	min-height: 48px;
	padding: .65rem 1.5rem;
	border-radius: 8px;
	cursor: pointer;
}
html body .mp_wrapper input[type="submit"]:hover,
html body .mp_wrapper .mepr-submit:hover,
html body .mp_wrapper .mepr-share-button:hover {
	background: var(--ux-brand-2);
	border-color: var(--ux-brand-2);
	color: #fff;
}
/* Smartphone : « S'inscrire » sur toute la largeur */
@media (max-width: 575.98px) {
	html body .mp-form-submit .mepr-submit {
		display: block;
		width: 100%;
	}
}
/* Grand écran : formulaires limités en largeur (les champs faisaient 1 225 px) */
html body #mepr_loginform,
html body #mepr_forgot_password_form {
	max-width: 480px;
}
html body #mepr_signup_form {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

/* F. Pied de page ------------------------------------------------------------------------------------------------------ */
/* Contraste du texte : #666 sur #171717 = 3,1:1 (4,5:1 exigé) */
html body #footer-info {
	color: #b3b3b3;
}
/* Page courte (connexion, merci, 404) : le pied de page reste en bas de l'écran au lieu de flotter au milieu.
   (Pas dans le constructeur visuel de Divi : body.et-fb.) */
html body:not(.et-fb) #page-container {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
html body:not(.et-fb) #et-main-area {
	flex: 1 0 auto;
	display: flex;
	flex-direction: column;
}
html body:not(.et-fb) #et-main-area > #main-content {
	flex: 1 0 auto;
}

/* G. Zones tactiles trop petites --------------------------------------------------------------------------------------- */
@media (pointer: coarse) {
	html body .more-link,
	html body .sa-read-more-btn {
		display: inline-block;
		padding: .7rem .5rem .7rem 0;
	}
	/* points du carrousel d'avis : la pastille reste petite, la zone tactile s'agrandit */
	html body .sa-page-dot {
		position: relative;
	}
	html body .sa-page-dot::after {
		content: "";
		position: absolute;
		top: -15px;
		right: -8px;
		bottom: -15px;
		left: -8px;
	}
}