/*
  Theme Name: hortorium
  Theme URI: https://hortorium.be
  Version: 1.1.0
  Template: Divi
  Author: designer@arpeggio.be
  Author URI: https://www.arpeggio.be/fr
  Description: designed with flow by Arpeggio
  Text Domain: hortorium
  License: GNU General Public License v2 or later
  License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Nettoyage 2026-10-08 : animations, zooms et transitions au survol retirés,
   doublons supprimés, URLs du serveur de dev remplacées, rayons réduits (≤ 4px). */

/* Card Stack (Divi Pixel) : paragraphe du Call to action décalé, titre aéré en dessous */
.dipi_card_stack .et_pb_promo_content { padding-left: 30px; }
.dipi_card_stack .et_pb_promo_description .et_pb_module_header { padding-bottom: 30px; }

/* ==============================================================
   0. ACCESSIBILITÉ
   ============================================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid #514345;
	outline-offset: 2px;
}
.screen-reader-text:focus {
	clip: auto !important;
	clip-path: none;
	width: auto; height: auto;
	padding: 12px 16px;
	background: #fff; color: #514345;
	z-index: 100000;
}

/* ==============================================================
   MENU
   ============================================================== */
#top-menu.nav li ul li.current-menu-item a:hover,
#top-menu.nav li ul a:hover,
.et-menu-nav ul.et-menu ul.sub-menu li a:hover {
	border-radius: 2px !important;
}

/* Menu à logo centré : Divi insère l'emplacement du logo au milieu des liens
   en JavaScript, ce qui écartait le menu sur les côtés à chaque chargement.
   On le garde invisible tant que cet emplacement n'existe pas : il apparaît
   directement à sa place définitive. Filet : s'il n'arrive jamais (JS en
   erreur), le menu s'affiche quand même au bout de 2 s. */
.et_pb_menu--style-inline_centered_logo:not(:has(.et_pb_menu__logo-slot)) .et_pb_menu_inner_container {
	visibility: hidden;
	animation: hort-menu-filet 0s 2s forwards;
}
@keyframes hort-menu-filet { to { visibility: visible; } }

/* Divi anime TOUTES les propriétés des liens du menu (0,4 s) : au chargement, la
   taille de police passe de 14 à 21 px en glissant et le menu s'écarte sur les
   côtés. On ne garde la transition que pour les couleurs (survol). */
.et-l--header .et_pb_menu .et-menu-nav > ul > li > a,
.et-l--header .et_pb_menu .et-menu-nav > ul ul a {
	transition-property: color, background-color, border-color, opacity !important;
}

/* ==============================================================
   CITATIONS · apparition mot à mot (js/site.js §5)
   Module Texte → Avancé → « Classe CSS » : hort-reveal-title
   ============================================================== */
.hort-reveal-title .hrt-ready .hrt-word {
	display: inline-block;
	opacity: 0;
	transform: translateY(.4em);
	filter: blur(6px);
}
.hort-reveal-title .hrt-in .hrt-word {
	animation: hrt-in .9s cubic-bezier(.22, .61, .36, 1) forwards;
	animation-delay: calc(var(--hrt-i, 0) * 120ms);
}
@keyframes hrt-in {
	to { opacity: 1; transform: none; filter: blur(0); }
}

/* Parents de sous-menu (A propos, Nos projets) : non cliquables (js/site.js §4) */
.et-l--header .et-menu > .menu-item-has-children > a,
.et-l--header .et_mobile_menu > .menu-item-has-children > a { cursor: default; }

/* ==============================================================
   IMAGE MASQUÉE
   Module Image → onglet Avancé → « Classe CSS » : hort-mask
   ============================================================== */
.hort-mask .et_pb_image_wrap {
	display: block;
	overflow: hidden;
}
.hort-mask .et_pb_image_wrap img {
	display: block;
	-webkit-mask: url("/wp-content/uploads/2026/09/mask-lobes.svg") center / contain no-repeat;
	        mask: url("/wp-content/uploads/2026/09/mask-lobes.svg") center / contain no-repeat;
}

/* ==============================================================
   1. SLIDER PROJETS
   Divi Pixel « Blog Slider » · classe .hort-projects
   ============================================================== */
.hort-projects .dipi-blog-post {
	position: relative;
	overflow: hidden;
}
.hort-projects .dipi-blog-post .dipi-entry-featured-image-url {
	position: relative;
	z-index: 1;
	margin: 0;
	border-radius: inherit;
	overflow: hidden;
}
.hort-projects .dipi-blog-post .wp-post-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* dégradé de lisibilité (part du bas) */
.hort-projects .dipi-blog-post .dipi-entry-featured-image-url::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(to top,
		rgba(81, 67, 69, .82) 0%,
		rgba(81, 67, 69, .45) 32%,
		rgba(81, 67, 69, .12) 62%,
		transparent 75%);
}

/* contenu par-dessus l'image */
.hort-projects .dipi-blog-post .dipi-post-content,
.hort-projects .dipi-blog-post .dipi-bottom-content {
	position: absolute;
	z-index: 3;
	right: auto;
	margin: 0;
	padding: 10px 20px;
	text-align: left;
}
.hort-projects .dipi-blog-post .dipi-post-content  { bottom: 4rem; }
.hort-projects .dipi-blog-post .dipi-bottom-content { bottom: 1.5rem; }
.hort-projects .dipi-entry-title { margin: 0; padding: 0; }

.hort-projects .et_pb_button.dipi-more-link::after { margin-top: 1px; }

/* pagination : puces alignées à gauche, sous le slider */
.hort-projects .swiper-pagination.swiper-pagination-horizontal {
	left: 0 !important;
	right: auto !important;
	transform: none !important;
	width: 100% !important;
	text-align: left !important;
	white-space: nowrap;
	padding-left: 20px;
}
.hort-projects .swiper-pagination-bullets-dynamic .swiper-pagination-bullet { left: 0 !important; }

@media (max-width: 600px) {
	.hort-projects .dipi-blog-post .dipi-post-content { bottom: 3.6rem; }
}
@media (min-width: 981px) {
	.hort-slider-peek .dipi-blog-post { width: 15% !important; }
	.hort-slider-peek .dipi-blog-post.swiper-slide-active { width: 65% !important; }
}

/* ==============================================================
   2. BLURB · classe .hort-blurb
   ============================================================== */
@media (min-width: 981px) {
	.hort-blurb .et_pb_blurb_content {
		flex-flow: row wrap;
		align-items: flex-start;
		column-gap: 30px;
	}
	.hort-blurb .et_pb_main_blurb_image { flex: 0 0 100%; }
	.hort-blurb .et_pb_blurb_container { flex: 1 1 0; min-width: 0; }
	.hort-blurb .et_pb_button_module_wrapper {
		flex: 0 0 auto;
		margin: 0 0 0 auto;
		align-self: center;
	}
}
@media (max-width: 980px) {
	.hort-blurb .et_pb_button_module_wrapper { text-align: left; margin-top: 24px; }
}
.hort-blurb .et_pb_main_blurb_image .et_pb_image_wrap img { display: block; }

/* état survol du bouton déclenché par le survol du blurb (changement de couleur seul) */
body #page-container .et_pb_section .hort-blurb:hover .et_pb_button.btn-primary {
	background-color: var(--gcid-link-color) !important;
	color: #fff !important;
}

/* ==============================================================
   3. GRILLE PROJETS · classe .hort-grid
   ============================================================== */
.hort-grid .dipi-grid-item-content {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: nowrap;
}
.hort-grid .dipi-grid-item-content > *:empty { display: none; }
.hort-grid .dipi-grid-item-title { flex: 1 1 auto; min-width: 0; margin: 0; }
.hort-grid .dipi-fg-readmore-button-wrapper { flex: 0 0 auto; margin: 0; align-self: flex-start; }
.hort-grid .dipi-fg-readmore-button.et_pb_button { white-space: nowrap; }
@media (max-width: 420px) {
	.hort-grid .dipi-grid-item-content { flex-direction: column; align-items: stretch; }
}
body #page-container .hort-grid .grid-item:hover .dipi-fg-readmore-button.et_pb_button {
	background-color: var(--gcid-link-color) !important;
	color: #fff !important;
}

/* Apparition en cascade (js/site.js §3) : la classe hort-cascade n'existe que si le script tourne */
@keyframes hort-grid-in {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}
html.hort-cascade .dipi_filterable_grid .grid-item:not(.hort-done),
html.hort-cascade .dipi_masonry_gallery .grid-item:not(.hort-done) { opacity: 0; }
html.hort-cascade .dipi_filterable_grid .grid-item.hort-in,
html.hort-cascade .dipi_masonry_gallery .grid-item.hort-in {
	animation: hort-grid-in 1.5s cubic-bezier(.33, 0, .2, 1) both;
}

.dipi_masonry_gallery .grid-item img {
	display: block;
	width: 100%;
	border-radius: 2px !important;
}

/* ==============================================================
   4. LIGHTBOX (Magnific Popup)
   ============================================================== */
.mfp-counter {
	top: 6px !important;
	right: 50% !important;
	color: #ccc;
	font-size: 17px !important;
	line-height: 18px;
}
.mfp-arrow-right { right: 0 !important; }
.mfp-arrow-left .mfp-a, .mfp-arrow-left::after,
.mfp-arrow-right .mfp-a, .mfp-arrow-right::after {
	border: none !important;
	display: inline-block !important;
	line-height: 48px !important;
	text-align: center !important;
	font-size: 42px !important;
	color: #514345 !important;
	background-color: #f2edea !important;
}
.mfp-iframe-holder .mfp-close, .mfp-image-holder .mfp-close {
	font-size: 64px;
	font-family: "Open Sans", Arial, sans-serif;
	font-weight: 200;
	top: -10px;
	opacity: 1 !important;
}
.mfp-bg {
	background: #211d1a !important;
	opacity: .95 !important;
}

/* ==============================================================
   5. SANS ANIMATION — neutralise les effets résiduels (Divi / Divi Pixel)
   Les timelines et chemins (.pjt, parcours/) ne sont pas concernés.
   ============================================================== */
.hort-projects .wp-post-image,
.hort-grid .img-container img,
.dipi_masonry_gallery .grid-item img,
.et_pb_image_wrap img {
	transition: none !important;
}
.hort-projects .dipi-blog-post:hover .wp-post-image,
.hort-grid .grid-item:hover .img-container img {
	transform: none !important;
}