/* Hazel Child - correctifs UX phase 3 (voir rapport-ux-implementation.md) */

/* ==========================================================================
   P1 - Bloc Charts (section.parallax_section_holder de l'accueil)
   iOS/Safari ne supporte pas background-attachment: fixed -> fond blanc + texte blanc.
   Correction : fond de repli sombre, overlay constant, attachement non fixe sous 1025 px et sur tactile,
   hauteur qui suit le contenu.
   ========================================================================== */
section.parallax_section_holder:not(.parallax_section_holder .parallax_section_holder) {
	position: relative;
	background-color: #1a1a1a;           /* repli : le texte blanc reste lisible si l'image ne charge pas */
	height: auto !important;             /* remplace le height:600px inline */
	min-height: 600px;
	box-sizing: border-box;
	padding: 80px 0;                     /* P13 : >= 80 px desktop, 48 px mobile (voir plus bas) */
	background-size: cover;
}

/* Overlay assombrissant constant (le contenu est au-dessus : .parallax_content a deja z-index:100) */
section.parallax_section_holder:not(.parallax_section_holder .parallax_section_holder)::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .55);
	pointer-events: none;
	z-index: 0;
}

@media (max-width: 1024px), (hover: none) {
	section.parallax_section_holder {
		background-attachment: scroll !important;
		background-size: cover !important;
		background-position: center center !important; /* ecrase le background-position pose en JS (parallax) */
	}
}

/* Mobile : une colonne, 32 px entre blocs, legendes lisibles */
@media (max-width: 767px) {
	section.parallax_section_holder .q_counter_holder {
		margin-bottom: 32px;
	}
	section.parallax_section_holder .q_counter_holder .counter_text {
		font-size: 16px !important;
		line-height: 1.5;
		font-weight: 400 !important;
	}
}

/* ==========================================================================
   P2 - Hero mobile (<= 600 px) : texte non clippe, centre, hero qui tient dans l'ecran
   Cause : .slider_content_outer en display:table + largeurs figees (414 px) + hauteur 1080 px posee en JS.
   Les !important ecrasent les styles inline poses par le theme/skrollr.
   ========================================================================== */
@media (max-width: 600px) {
	.q_slider .carousel,
	.q_slider .carousel-inner .item,
	.q_slider .qode_slider_preloader {
		height: calc(100vh - 100px) !important;      /* repli navigateurs sans svh */
		height: calc(100svh - 100px) !important;     /* header mobile = 100 px */
		min-height: 480px;
		max-height: 720px;
	}
	.q_slider .carousel-inner .item .image {
		background-position: 40% center !important;  /* garde le visage */
	}
	.q_slider .carousel-inner .slider_content_outer {
		display: block !important;
		width: 100% !important;
		max-width: 100%;
		height: 100%;
	}
	.q_slider .carousel-inner .slider_content {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		position: absolute !important;
		inset: 0 !important;
		width: 100% !important;
		height: 100% !important;
		max-width: 100%;
		padding: 0 24px !important;
		box-sizing: border-box;
		left: 0 !important;
		top: 0 !important;
		text-align: center;
	}
	.q_slider .carousel-inner .slider_content .text {
		width: 100%;
		max-width: 100%;
		margin: 0;
		box-sizing: border-box;
	}
	.q_slider .carousel-inner .slider_content .text h2 {
		font-size: 1.7em !important;
		max-width: 100%;
		box-sizing: border-box;
		overflow-wrap: anywhere;
	}
	.q_slider .carousel-inner .slider_content .text p,
	.q_slider .carousel-inner .slider_content .text p span {
		font-size: 18px !important;
		line-height: 1.5 !important;
		white-space: normal;
	}
	.q_slider .carousel-inner .slider_content .slide_buttons_holder {
		display: block;
		max-width: 100%;
	}
	.q_slider .carousel-inner .slider_content .qbutton {
		display: block;
		max-width: calc(100% - 48px);
		height: auto;
		min-height: 48px;
		line-height: 1.4;
		margin: 24px auto 0 !important;
		padding: 14px 16px;
		white-space: normal;
		font-size: 14px;
		letter-spacing: .1em;
		text-align: center;
		box-sizing: border-box;
	}
}

/* ==========================================================================
   P3 - Lisibilite du texte blanc sur la photo du hero (accueil + titre Biography)
   Pas d'option d'overlay dans Hazel pour ce slider -> overlay degrade en CSS (opacite effective ~0,5),
   sous le texte (.slider_content_outer a z-index:12), au-dessus de l'image.
   ========================================================================== */
.q_slider .carousel-inner .item {
	position: relative;
}
.q_slider .carousel-inner .item::after,
.title .image.responsive::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, .50) 100%);
	pointer-events: none;
	z-index: 1;
}
.title .image.responsive { position: relative; }

.q_slider .carousel-inner .slider_content h2,
.q_slider .carousel-inner .slider_content p,
.q_slider .carousel-inner .slider_content .qbutton {
	text-shadow: 0 1px 2px rgba(0, 0, 0, .6), 0 0 16px rgba(0, 0, 0, .45);
}
.q_slider .carousel-inner .slider_content p {
	font-weight: 500;
}
.q_slider .carousel-inner .slider_content .qbutton {
	font-weight: 500;
	font-size: 14px;
	background: rgba(0, 0, 0, .35);
	border: 2px solid #fff;
}
@media (max-width: 600px) {
	.q_slider .carousel-inner .slider_content .qbutton { font-size: 14px; } /* >= 14 px mobile (P9) */
}

/* ==========================================================================
   P6 - Contraste du texte courant : page Biographie (EN 14479, FR 20241) et footer
   ========================================================================== */
body.page-id-14479 .wpb_text_column .wpb_wrapper,
body.page-id-14479 .wpb_text_column p,
body.page-id-20241 .wpb_text_column .wpb_wrapper,
body.page-id-20241 .wpb_text_column p {
	color: #4a4a4a;            /* >= 8,5:1 sur blanc */
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
}
body.page-id-14479 .wpb_text_column .wpb_wrapper,
body.page-id-20241 .wpb_text_column .wpb_wrapper {
	max-width: 68ch;           /* <= 75 caracteres par ligne */
	margin-inline: auto;
}
/* Les paragraphes &nbsp; du contenu font deja office d'espaceur (~29 px) : pas de marge supplementaire. */
body.page-id-14479 .wpb_text_column p,
body.page-id-20241 .wpb_text_column p { margin-bottom: 0; }
@media (min-width: 1025px) {
	body.page-id-14479 .wpb_text_column p,
	body.page-id-20241 .wpb_text_column p { font-size: 17px; }
}
body.page-id-14479 blockquote .blockquote_text,
body.page-id-14479 blockquote .blockquote_text span,
body.page-id-20241 blockquote .blockquote_text,
body.page-id-20241 blockquote .blockquote_text span {
	font-size: 15px;
	color: #333;
	font-weight: 500;
}

/* Footer : fond conserve, texte clair a fort contraste (selecteurs plus specifiques que .footer_top a/p/span/li du parent) */
footer .footer_top a,
footer .footer_top p,
footer .footer_top span,
footer .footer_top li,
footer .footer_top .textwidget,
footer .footer_top .widget,
footer .footer_bottom_holder,
footer .footer_bottom,
footer .footer_bottom a,
footer .footer_bottom span,
footer .footer_bottom p {
	color: #fff;
	font-weight: 400;
}
footer .footer_top a:hover,
footer .footer_top a:focus-visible,
footer .footer_bottom a:hover,
footer .footer_bottom a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

/* ==========================================================================
   P8 - Cibles tactiles >= 44 px (burger, liens du menu mobile, icones sociales) + focus visible
   ========================================================================== */
.mobile_menu_button {
	min-width: 48px;
	min-height: 48px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mobile_menu_button span { display: flex; align-items: center; justify-content: center; min-width: 48px; }
nav.mobile_menu ul li a,
nav.mobile_menu ul li h3 {
	display: block;
	padding: 0;
	min-height: 48px;
	line-height: 48px;
	font-size: 16px;
	font-weight: 500;
	color: #333;               /* >= 4,5:1 sur le fond du menu mobile */
}
nav.mobile_menu ul li a:hover,
nav.mobile_menu ul li.active > a { color: #ad3030; }
footer .q_social_icon_holder a,
.q_social_icon_holder a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}
a:focus-visible,
button:focus-visible,
.mobile_menu_button:focus-visible,
.qbutton:focus-visible {
	outline: 2px solid #ad3030;
	outline-offset: 2px;
}

/* ==========================================================================
   P9 - Labels et petits textes : aucun texte courant < 14 px, titres de section plus epais
   ========================================================================== */
.custom_font_holder h2,
.custom_font_holder h2 span { font-weight: 300; }          /* HIGHLIGHTS, SKILLS, CHARTS : 200 -> 300 */
section.parallax_section_holder .q_counter_holder .counter_text {
	font-size: 16px !important;                            /* legendes Charts : 15/300 -> 16/400 */
	font-weight: 400 !important;
}
.q_icon_with_title .icon_title { font-size: 14px; }       /* legendes Skills 13 -> 14 */
.projects_holder article .portfolio_title a,
.projects_holder.hover_text h5,
.projects_holder.hover_text h5 a { font-size: 14px; }     /* titres des pochettes Highlights */
.call_to_action .qbutton { font-weight: 500; }
.call_to_action .call_to_action_text span { font-weight: 400; }
/* Navigation laterale desktop : 13 -> 14 px, espacement des lettres .1em */
nav.vertical_menu ul li a,
.vertical_menu_area nav ul li a {
	font-size: 14px;
	letter-spacing: .1em;
}

/* ==========================================================================
   P11 - Compteurs Charts : chiffres a chasse fixe (plus de "roulement" qui saute) et largeur minimale.
   Le doublon vide (second parallax_section_holder imbrique) est retire dans le contenu de la page 18525
   (vc_row_inner row_type="parallax" -> "row"), voir changements-base-ux.md.
   ========================================================================== */
.q_counter_holder span.counter {
	font-variant-numeric: tabular-nums;
	min-width: 9ch;
	display: inline-block;
}

/* ==========================================================================
   P13 - Aucun texte a cheval entre une photo et le fond blanc
   (a) Le hero (.carousel-inner) est en position:fixed avec parallax (translateY) : son bas reste visible
       derriere le debut du contenu, qui n'a pas de fond. On donne au contenu un fond blanc et un empilement
       au-dessus du hero : la photo ne porte que le titre/la citation du hero, le corps commence dessous.
   ========================================================================== */
.q_slider ~ .full_width,
.q_slider ~ .container,
.q_slider ~ .content_bottom {
	position: relative;
	z-index: 20;
	background-color: #fff;
}

/*
   (b) Toute rangee/section a image de fond s'adapte a son contenu (jamais de hauteur fixe qui laisse deborder le texte).
   Sur l'accueil, Charts est la seule section a fond photo (cf. P1) ; ce garde-fou couvre les rangees WPBakery
   a background_image ajoutees plus tard. Texte sur photo = clair sur overlay (P1/P3), texte hors photo = sombre (P6).
*/
.vc_row[style*="background-image"],
.vc_row .full_section_inner[style*="background-image"] {
	height: auto !important;
	min-height: 0;
	overflow: visible;
}
@media (max-width: 767px) {
	section.parallax_section_holder:not(.parallax_section_holder .parallax_section_holder) {
		padding: 48px 0;
		min-height: 0;
	}
}

/* ==========================================================================
   P10 + P12 - Hero : hauteur = viewport, fleche "scroll" centree sur la photo, marge basse constante
   Cause du decalage : le span .arrow_carrot-down (CSS du theme, position:fixed; width:100%) etait positionne
   par rapport a .text (qui a un transform) -> sa boite de 950 px partait du centre et la fleche finissait a droite.
   Correction : on retire le transform de .text (inutile hors animation d'entree) pour que le bloc de reference
   devienne .slider_content_outer (position:relative, centre dans la photo, hauteur = celle du hero), puis la
   fleche est un petit carre de 64 px centre (left:50%) a 32 px du bas. Le rebond (keyframes "bounce" du theme)
   est conserve, desactive sous prefers-reduced-motion.
   ========================================================================== */
.q_slider .carousel-inner .slider_content .text { transform: none; position: static; }
.q_slider .carousel-inner .slider_content_outer { width: 100%; max-width: none; }

.q_slider .carousel-inner .slider_content .slide_anchor_holder { margin-top: 0; }
.q_slider .carousel-inner .slide_anchor_button span.arrow_carrot-down {
	position: absolute;
	left: 50%;
	right: auto;
	top: auto;
	bottom: 32px;                       /* marge basse identique sur tous les viewports */
	width: 64px;
	height: 64px;
	margin: 0 0 0 -32px;                /* centre sans toucher au transform (utilise par le rebond) */
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 64px;
	line-height: 1;
	transform: none;
	z-index: 13;
	cursor: pointer;
}
@media (prefers-reduced-motion: reduce) {
	.q_slider .carousel-inner .slide_anchor_button span.arrow_carrot-down { animation: none !important; }
}

/* Desktop : .slider_content (position:absolute selon la largeur) serait le bloc de reference de la fleche.
   On le remet dans le flux et on centre verticalement le texte dans .slider_content_outer (flex),
   en gardant 112 px libres en bas pour la fleche. */
@media (min-width: 801px) {
	.q_slider .carousel-inner .slider_content_outer {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding-bottom: 112px;
		box-sizing: border-box;
	}
	.q_slider .carousel-inner .slider_content {
		position: static !important;
		width: 80% !important;
		max-width: 950px;
		height: auto !important;
		left: auto !important;
		top: auto !important;
	}
}

/* Hauteur du hero = viewport (tablette : sous le header de 100 px) */
@media (min-width: 1001px) {
	.q_slider .carousel,
	.q_slider .carousel-inner .item,
	.q_slider .qode_slider_preloader {
		height: 100vh !important;
		height: 100svh !important;
	}
}
@media (min-width: 601px) and (max-width: 1000px) {
	.q_slider .carousel,
	.q_slider .carousel-inner .item,
	.q_slider .qode_slider_preloader {
		height: calc(100vh - 100px) !important;
		height: calc(100svh - 100px) !important;
		min-height: 480px;
	}
}
/* Le texte du hero ne doit jamais toucher la zone de la fleche */
@media (max-width: 1000px) {
	.q_slider .carousel-inner .slider_content { padding-bottom: 112px !important; box-sizing: border-box; }
}
/* Cible de la fleche d'ancre : scroll-margin pour ne jamais passer sous un header */
[data-q_id] { scroll-margin-top: 24px; }
@media (max-width: 1000px) { [data-q_id] { scroll-margin-top: 124px; } }


/* ==========================================================================
   Corrections apres verification independante
   ========================================================================== */

/* fix-arrow (D1/D2) : tous les types d'en-tete Hazel (all_at_once, one_by_one...).
   - one_by_one : .slide_anchor_holder est position:relative + animation sur `top` -> il devenait le bloc de
     reference de la fleche (collee sous le titre). On le remet static, sans animation.
   - all_at_once : l'animation d'entree (transform) etait portee par .text, bloc de reference de la fleche
     pendant ~1,6 s (saut). L'animation est deplacee sur les enfants (h2, p, boutons, separateurs) :
     .text n'a plus jamais de transform, la fleche est en bas des le premier rendu. */
.q_slider .carousel-inner .slider_content .text .slide_anchor_holder {
	position: static !important;
	top: auto !important;
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}
.q_slider .carousel-inner .slider_content .text,
.q_slider .carousel-inner .active .slider_content .text {
	animation: none !important;
	opacity: 1 !important;
	transform: none !important;
}
@keyframes hc-text-in {            /* meme courbe/duree que text-from-bottom du theme (1,5 s) */
	0%, 50% { transform: translate(0, 15%); opacity: 0; }
	100%    { transform: translate(0, 0);   opacity: 1; }
}
.q_slider .carousel-inner .active .slider_content .text:not(.one_by_one) > h2,
.q_slider .carousel-inner .active .slider_content .text:not(.one_by_one) > p,
.q_slider .carousel-inner .active .slider_content .text:not(.one_by_one) > .separator,
.q_slider .carousel-inner .active .slider_content .text:not(.one_by_one) > .slide_buttons_holder {
	animation: hc-text-in 1.5s 1 cubic-bezier(0.165, 0.840, 0.440, 1.000) both;
}
@media (prefers-reduced-motion: reduce) {
	.q_slider .carousel-inner .active .slider_content .text > * { animation: none !important; }
}
/* La fleche n'est pas animee a l'entree : visible d'emblee, rebond seul. */
/* fix-arrow (D3) : paysage tres bas (ex. 812x375) : le hero (min 480 px) depasse le viewport -> fleche masquee */
@media (max-height: 520px) and (orientation: landscape) {
	.q_slider .carousel-inner .slide_anchor_button span.arrow_carrot-down { display: none; }
}

/* fix-hero-button (D4) : cible >= 44 px a tous les viewports, 14 px minimum */
.q_slider .carousel-inner .slider_content .qbutton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: auto;
	min-height: 48px;
	line-height: 1.4;
	padding: 12px 24px;
	font-size: 14px;
	box-sizing: border-box !important;   /* le theme impose content-box */
}

/* fix-contact (D5) : libelles du formulaire Contact (CF7) : #9d9d9d/300 (2,71:1) -> #4a4a4a/400 */
.wpcf7 p,
.wpcf7 label,
.wpcf7 .wpcf7-list-item-label,
.wpcf7 .wpcf7-form-control-wrap + br {
	color: #4a4a4a;
	font-weight: 400;
}
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder { color: #6b6b6b; opacity: 1; }

/* fix-counters (D6) : nombre centre sous sa legende ; largeur fixe suffisante pour 1.000.000 (pas de troncature) */
.q_counter_holder { text-align: center; }
.q_counter_holder span.counter {
	display: flex !important;      /* flex : centre aussi les colonnes .onedigit flottantes de l'animation ; le theme impose inline-block !important + height:1em (rognait le haut des chiffres) */
	height: 1.25em !important;     /* fenetre fixe : le defilement des chiffres (.onedigit) en depend, ne pas passer en auto */
	line-height: 1.25;
	overflow: hidden;
	justify-content: center;
	text-align: center;
	min-width: 0;
	width: 100%;
	white-space: nowrap;
}

/* fix-gap (D7) : vide residuel de l'accueil. Charts : le titre a deja 85 px de padding haut (rangee interne),
   on retire le padding haut de la section et le min-height ; Skills : padding bas 70 -> 40 px. */
@media (min-width: 768px) {
	section.parallax_section_holder:not(.parallax_section_holder .parallax_section_holder) {
		padding-top: 0;
		min-height: 0;
	}
}
.vc_row[style*="padding-bottom:70px"] { padding-bottom: 40px !important; }

/* fix-focus : indicateur de focus des champs du formulaire Contact (contour 2 px #ad3030 sur blanc = 6,5:1),
   rien ne change au repos. */
.wpcf7 input:focus-visible,
.wpcf7 textarea:focus-visible,
.wpcf7 select:focus-visible,
.wpcf7 input[type="submit"]:focus-visible,
.wpcf7 input:focus,
.wpcf7 textarea:focus {
	outline: 2px solid #ad3030;
	outline-offset: 2px;
}
.wpcf7 input.wpcf7-submit:focus,
.wpcf7 input.wpcf7-submit:focus-visible {
	outline: 2px solid #ad3030 !important;   /* le theme impose un contour blanc 3 px (invisible sur fond blanc) */
	outline-offset: 2px;
}

/* ==========================================================================
   P14 - La photo d'en-tete (hero fixe + parallax) ne doit jamais etre visible hors du hero.
   Sur les pages courtes, le hero fixe depassait derriere/sur le pied de page et l'espace vide apres le contenu.
   Le pied de page passe au-dessus du hero (z-index 20, fond opaque) ; la zone de contenu a deja un fond blanc
   (P13). Si la page est plus courte que l'ecran, .content garde un min-height pour que le blanc aille jusqu'au pied.
   ========================================================================== */
footer {
	position: relative;
	z-index: 100;                        /* = .content (z-index:100) mais plus tard dans le DOM donc au-dessus ; < barre laterale verticale (z-index:101), qui doit rester visible */
	/* pas de fond sur <footer> : ses blocs internes (.footer_top_holder, .footer_bottom_holder, a x>=260) ont deja le leur ;
	   un fond pleine largeur passerait sous la barre laterale (x 0-260) comme en prod */
}
.content,
.content_inner {
	background-color: #fff;
}

/* fix-portfolio-text : texte courant des pages portfolio (P6 etendu) : #9d9d9d/300 (2,71:1) -> #4a4a4a/400 ;
   liens d'info (Listen, Buy) #4a4a4a/400 soulignes pour rester identifiables ; titre 200 -> 300 */
.portfolio_detail .info p,
.portfolio_detail .info span,
.portfolio_detail .info .portfolio_single_content,
.portfolio_detail .info a {
	color: #4a4a4a;
	font-weight: 400;
}
.portfolio_detail .info a { text-decoration: underline; }
.portfolio_detail h3.info_section_title { font-weight: 300; }