/*
Theme Name: Piment Elementor
Theme URI: https://piment.ch
Description: Thème enfant de Hello Elementor pour piment. by chrystelle (polices, couleurs, rond rotatif, scroll to top).
Author: Piment by Chrystelle
Template: hello-elementor
Version: 1.0.0
Text Domain: piment-elementor
*/

/* ==========================================================================
   1. RÉGLAGES FACILES À MODIFIER
   ========================================================================== */
:root {
	--piment-dark:  #26282b;
	--piment-cream: #e5e2d7;
	--piment-lime:  #d3d62c;
	--piment-olive: #726e51;

	/* Boutons « Références » : none = masqués / block = affichés */
	--piment-show-references: none;

	/* Rond rotatif « Creative Energy » (fixe, en bas à gauche) */
	--badge-size: clamp(4.5rem, 6.5vw, 6.5rem);
	--badge-left: clamp(0.75rem, 1.8vw, 2.25rem);
	--badge-bottom: clamp(0.75rem, 1.8vw, 2.25rem);
	--badge-speed: 26s;

	--piment-gutter: 5.2vw;
	--piment-line: color-mix(in srgb, var(--piment-cream) 55%, transparent);
	--piment-muted: color-mix(in srgb, var(--piment-cream) 68%, transparent);
	--piment-font-title: "lust", Georgia, serif;                 /* Adobe Fonts */
	--piment-font-text: "Darker Grotesque", system-ui, sans-serif;
	--scroll-progress: 0%;
}

@font-face { font-family: "Darker Grotesque"; font-weight: 400; font-display: swap;
	src: url("assets/fonts/darker-grotesque-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Darker Grotesque"; font-weight: 900; font-display: swap;
	src: url("assets/fonts/darker-grotesque-latin-900-normal.woff2") format("woff2"); }

/* ==========================================================================
   2. BASE
   ========================================================================== */
html { scroll-behavior: smooth; }
body { overflow-x: hidden; background: var(--piment-dark); color: var(--piment-cream);
	font-family: var(--piment-font-text); font-size: 1.25rem; line-height: 1.3; }
body.home .site-header, body.home .site-footer,
body.home #site-header, body.home #site-footer { display: none; }   /* en-tête/pied Hello masqués sur l'accueil */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.piment-badge__ring { animation: none !important; }
}

/* Tous les blocs de la one-page */
.e-con.hero, .e-con.service, .e-con.quote, .e-con.cta, .e-con.piment-sep {
	--gap: 0px; --row-gap: 0px; --column-gap: 0px; gap: 0; max-width: 1800px; margin-inline: auto;
}
.piment-page p { margin: 0; }

/* ==========================================================================
   3. LOGO (haut droite) + HERO
   ========================================================================== */
.e-con.hero {
	position: relative; isolation: isolate; overflow: hidden;
	min-height: min(100svh, 58rem);
	padding: clamp(8rem, 13vw, 12rem) var(--piment-gutter) clamp(4rem, 8vw, 8rem) 13vw;
	justify-content: center;
	/* Valeurs de secours : Elementor (Style > Arrière-plan) les remplace si tu les règles là */
	background-color: var(--piment-dark);
	background-image: url("assets/images/portrait-hero.png");
	background-repeat: no-repeat; background-position: center right; background-size: contain;
}
.hero .piment-logo { position: absolute; top: clamp(1.25rem, 2.6vw, 2.5rem); right: var(--piment-gutter);
	width: clamp(7.5rem, 13vw, 14rem); margin: 0; z-index: 3; }
.hero .piment-logo img { display: block; width: 100%; height: auto; }

.hero .hero__title .elementor-heading-title {
	font-family: var(--piment-font-title); font-weight: 400; color: var(--piment-cream);
	font-size: clamp(3.4rem, 7.4vw, 8.5rem); line-height: 0.98; letter-spacing: -0.01em;
}
.hero .hero__title .piment-lime { color: var(--piment-lime); }
.hero .hero__text { max-width: 36rem; margin-top: clamp(1.25rem, 2.4vw, 2.25rem); }
.hero .hero__text, .hero .hero__text p {
	font-size: clamp(1.25rem, 1.65vw, 1.7rem); line-height: 1.22; color: var(--piment-muted);
}

/* ==========================================================================
   4. SÉPARATEURS (conteneur vide = simple ligne)
   ========================================================================== */
.e-con.piment-sep {
	width: auto; min-height: 0; --min-height: 0px; padding: 0;
	margin-inline: var(--piment-gutter); border-top: 1px solid var(--piment-line); border-radius: 0;
}

/* ==========================================================================
   5. SECTIONS DE SERVICES
   ========================================================================== */
.e-con.service { padding: clamp(3rem, 5.5vw, 5.5rem) var(--piment-gutter); }

.service .service__title { margin-left: 2.4%; }
.service .service__title .elementor-heading-title {
	display: inline; padding: 0.05em 0.3em;
	background: var(--piment-lime); color: var(--piment-dark);
	font-family: var(--piment-font-text); font-weight: 900;
	font-size: clamp(1.8rem, 2.9vw, 3rem); line-height: 1.42;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
}

.e-con.service__body {
	flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between;
	gap: 2rem; width: 100%; padding: 0; margin: clamp(1.25rem, 2.6vw, 2.5rem) 0 0 4.5%;
}
.service__text { max-width: 40rem; }
.service__text, .service__text p {
	font-size: clamp(1.2rem, 1.5vw, 1.55rem); line-height: 1.22; color: var(--piment-muted);
}

.e-con.service__needs {
	flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: auto; padding: 0;
	gap: clamp(1rem, 2.4vw, 3rem); margin: clamp(1.75rem, 3.5vw, 3.25rem) 0 0 25%;
}
.e-con.service__needs > .e-con.service__need {
	flex: 1 1 0; min-width: 0; width: auto; padding: 0 0 0 1.1rem; position: relative;
	border-left: 1px solid var(--piment-lime);
}
.service__need::before {
	content: ""; position: absolute; top: 0.3rem; left: -4px; width: 7px; height: 7px;
	background: var(--piment-lime); transform: rotate(45deg);
}
.service__need, .service__need p {
	font-size: clamp(1.05rem, 1.15vw, 1.25rem); font-weight: 900; line-height: 1.12;
	text-wrap: balance; color: var(--piment-cream);
}

/* ==========================================================================
   6. BOUTONS « RÉFÉRENCES » (masqués par défaut, visibles dans l'éditeur)
   ========================================================================== */
.btn-references { display: var(--piment-show-references); margin: 0 calc(-1 * var(--piment-gutter)) 0 0; flex: 0 0 auto; width: auto; }
.elementor-editor-active .btn-references { display: block; }
.btn-references .elementor-button {
	display: inline-flex; align-items: center; gap: 1.1rem; border-radius: 0;
	padding: 0.65rem 2.4rem 0.65rem 1.5rem;
	background: var(--piment-lime); color: var(--piment-dark); fill: var(--piment-dark);
	font-family: var(--piment-font-text); font-size: 0.95rem; font-weight: 900;
	letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
}
.btn-references .elementor-button::before {
	content: ""; flex: 0 0 5.5rem; height: 0.7rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 88 10'%3E%3Cpath d='M0 5h86M82 1l4 4-4 4' fill='none' stroke='%2326282b' stroke-width='1'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.btn-references .elementor-button:hover { background: var(--piment-cream); color: var(--piment-dark); }

/* ==========================================================================
   7. CITATION
   ========================================================================== */
.e-con.quote { padding: clamp(4rem, 8.5vw, 8.5rem) var(--piment-gutter); align-items: center; text-align: center; }
.quote .quote__title .elementor-heading-title {
	max-width: 62rem; margin: 0 auto; font-family: var(--piment-font-title); font-weight: 400;
	font-size: clamp(1.9rem, 3.5vw, 3.6rem); line-height: 1.12; color: var(--piment-cream); text-align: center;
}
.quote .quote__text { max-width: 50rem; margin: clamp(1.5rem, 3vw, 2.75rem) auto 0; }
.quote .quote__text + .quote__text { margin-top: 1.4rem; }
.quote .quote__text, .quote .quote__text p { color: var(--piment-muted); text-align: center; }
.quote .quote__name, .quote .quote__name p { margin-top: clamp(1.5rem, 3vw, 2.75rem); color: var(--piment-lime); font-weight: 900; text-align: center; }
.quote .quote__role, .quote .quote__role p { color: var(--piment-muted); text-align: center; }

/* ==========================================================================
   8. PIED DE PAGE (bloc olive)
   ========================================================================== */
.e-con.cta {
	padding: clamp(3.5rem, 7vw, 7rem) var(--piment-gutter) clamp(1.75rem, 3.5vw, 3rem) 13.8vw;
	background-color: var(--piment-olive); max-width: none;
}
.cta .cta__title .elementor-heading-title {
	font-family: var(--piment-font-text); font-weight: 900; color: var(--piment-lime);
	font-size: clamp(2rem, 3.6vw, 3.7rem); line-height: 1.08;
}
.e-con.cta__foot {
	flex-direction: row; flex-wrap: nowrap; align-items: flex-end; justify-content: flex-end;
	gap: 1.25rem; width: 100%; padding: 0; margin-top: clamp(3rem, 7vw, 7rem);
}
.cta__contact, .cta__contact p { text-align: right; line-height: 1.2; color: var(--piment-cream); font-size: clamp(0.95rem, 1.05vw, 1.1rem); }
.cta__contact a { color: var(--piment-lime); text-decoration: none; }
.cta__contact a:hover { color: var(--piment-cream); }
.cta .cta__sigle { flex: 0 0 auto; width: clamp(3.5rem, 5.6vw, 5.5rem); }
.cta .cta__sigle img { display: block; width: 100%; height: auto; }

/* ==========================================================================
   9. ÉLÉMENTS FIXES : ROND (le texte tourne, le « p. » reste fixe) + « SCROLL TO TOP »
   ========================================================================== */
.piment-badge {
	position: fixed; left: var(--badge-left); bottom: var(--badge-bottom); z-index: 50;
	width: var(--badge-size); height: var(--badge-size); pointer-events: none;
}
.piment-badge img { position: absolute; inset: 0; width: 100%; height: 100%; }
.piment-badge__ring { animation: piment-spin var(--badge-speed) linear infinite; }
@keyframes piment-spin { to { transform: rotate(360deg); } }

.scroll-top {
	position: fixed; right: clamp(0.4rem, 1.1vw, 1.4rem); top: 50%; z-index: 50;
	display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
	opacity: 0; visibility: hidden; transform: translateY(-50%);
	transition: opacity 0.35s ease, visibility 0.35s;
}
.scroll-top.is-visible { opacity: 1; visibility: visible; }
.scroll-top__label {
	color: var(--piment-cream); text-decoration: none;
	font-size: 0.72rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
	writing-mode: vertical-rl; transform: rotate(180deg);
}
.scroll-top__label:hover { color: var(--piment-lime); }

/* Ligne + poignée : on peut cliquer sur la ligne ou faire glisser la boule */
.scroll-top__track {
	position: relative; width: 2px; height: clamp(8rem, 30vh, 16rem);   /* longueur de la ligne */
	background: color-mix(in srgb, var(--piment-lime) 25%, transparent);
	cursor: pointer; touch-action: none; user-select: none;
}
.scroll-top__track::before { content: ""; position: absolute; inset: 0 -14px; }  /* zone de clic élargie */
.scroll-top__bar { position: absolute; inset: 0 0 auto 0; height: var(--scroll-progress); background: var(--piment-lime); }
.scroll-top__thumb {
	position: absolute; left: 50%; top: var(--scroll-progress);
	width: 14px; height: 14px; border-radius: 50%; background: var(--piment-lime);
	transform: translate(-50%, -50%); cursor: grab; outline: none;
	transition: transform 0.15s ease;
}
.scroll-top__thumb::after { content: ""; position: absolute; inset: -12px; border-radius: 50%; }  /* zone de saisie élargie */
.scroll-top__thumb:hover, .scroll-top__thumb:focus-visible { transform: translate(-50%, -50%) scale(1.3); }
.scroll-top__thumb:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--piment-lime) 45%, transparent); }
.scroll-top.is-dragging .scroll-top__thumb { cursor: grabbing; transform: translate(-50%, -50%) scale(1.45); transition: none; }

/* ==========================================================================
   10. TABLETTE / MOBILE
   ========================================================================== */
@media (max-width: 781px) {
	:root { --piment-gutter: 1.5rem; }
	.e-con.hero { min-height: 36rem; padding: 7rem var(--piment-gutter) 3rem; background-size: cover; background-position: center bottom; }
	.e-con.hero::after { content: ""; position: absolute; inset: 0; background: rgba(38,40,43,.62); pointer-events: none; z-index: 0; }
	.e-con.hero > * { position: relative; z-index: 1; }
	.service .service__title, .e-con.service__body { margin-left: 0; }
	.e-con.service__body { flex-direction: column; align-items: flex-start; }
	.e-con.service__needs { flex-direction: column; margin-left: 0; gap: 1.5rem; }
	.btn-references { margin-right: 0; }
	.e-con.cta { padding-left: var(--piment-gutter); }
	.scroll-top__label { display: none; }
	.scroll-top__track { height: 7rem; }
}