/* ==========================================================================
   LeadR — styles du thème
   Les tokens (couleurs, polices, espacements) vivent dans theme.json ;
   ce fichier ne contient que les composants et la mise en page.
   ========================================================================== */

:root {
	--leadr-gutter: clamp(1.25rem, 4vw, 3rem);
	--leadr-wide: 1240px;
	--leadr-r-s: var(--wp--custom--radius--s, 12px);
	--leadr-r-m: var(--wp--custom--radius--m, 20px);
	--leadr-r-l: var(--wp--custom--radius--l, 32px);
	--leadr-r-xl: var(--wp--custom--radius--xl, 48px);
	--leadr-ease: var(--wp--custom--motion--ease, cubic-bezier(.22, .8, .24, 1));
	--leadr-header-h: 4.5rem;
}

html { scroll-padding-top: calc(var(--leadr-header-h) + 1rem); }

/* Barre admin : décalage du header collant */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
.admin-bar header.wp-block-template-part { top: 32px; }
@media (max-width: 782px) { .admin-bar header.wp-block-template-part { top: 46px; } }

/* --------------------------------------------------------------------------
   Sections : gouttières et rythme vertical
   -------------------------------------------------------------------------- */
.leadr-header,
.leadr-hero,
.leadr-section,
.leadr-footer { padding-inline: var(--leadr-gutter); }

.leadr-section { padding-block: var(--wp--preset--spacing--80); }
.leadr-section--white { background: var(--wp--preset--color--white); }

.leadr-section__inner { max-width: var(--leadr-wide); margin-inline: auto; display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); }
.leadr-section__inner > * { margin: 0 !important; }

.leadr-section__head { max-width: 46rem; display: flex; flex-direction: column; gap: 1.1rem; }
.leadr-section__head > * { margin: 0 !important; }
.leadr-section__head h2 { text-wrap: balance; }

.leadr-lead { margin: 0; line-height: 1.5; text-wrap: pretty; }
.leadr-hero .leadr-lead { color: rgba(255, 255, 255, .92); }
.leadr-section--peach .leadr-lead,
.leadr-section--white .leadr-lead { color: rgba(16, 15, 29, .74); }

/* --------------------------------------------------------------------------
   Eyebrow (étiquette au-dessus des titres)
   -------------------------------------------------------------------------- */
.leadr-eyebrow {
	display: inline-flex; align-items: center; gap: .55rem; width: fit-content;
	margin: 0; padding: .4rem .95rem .4rem .8rem;
	border-radius: 999px; font-size: var(--wp--preset--font-size--small); font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
}
.leadr-eyebrow::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; flex: none; }
.leadr-eyebrow--light { background: rgba(255, 255, 255, .14); color: #fff; }
.leadr-eyebrow--light::before { background: var(--wp--preset--color--green); }
.leadr-eyebrow--blue { background: rgba(62, 81, 255, .1); color: var(--wp--preset--color--blue); }

/* --------------------------------------------------------------------------
   Boutons (variantes)
   -------------------------------------------------------------------------- */
.wp-block-button__link { transition: background-color .18s var(--leadr-ease), color .18s var(--leadr-ease), transform .18s var(--leadr-ease), box-shadow .18s var(--leadr-ease); }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button__link:focus-visible { outline: 3px solid var(--wp--preset--color--cyan); outline-offset: 3px; }

.is-style-leadr-light .wp-block-button__link { background: #fff; color: var(--wp--preset--color--navy); }
.is-style-leadr-light .wp-block-button__link:hover { background: var(--wp--preset--color--lime); color: var(--wp--preset--color--navy); }
.is-style-leadr-green .wp-block-button__link { background: var(--wp--preset--color--green); color: var(--wp--preset--color--navy); }
.is-style-leadr-green .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--navy); }
.is-style-leadr-ghost .wp-block-button__link { background: transparent; color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .55); }
.is-style-leadr-ghost .wp-block-button__link:hover { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 2px #fff; }

/* --------------------------------------------------------------------------
   En-tête
   -------------------------------------------------------------------------- */
.leadr-header { padding-block: .85rem; transition: box-shadow .3s var(--leadr-ease); }
.leadr-scrolled .leadr-header { box-shadow: 0 10px 30px -14px rgba(16, 15, 29, .6); }
.leadr-header__bar { max-width: var(--leadr-wide); margin-inline: auto; min-height: 2.75rem; }
.leadr-header__bar > * { margin: 0 !important; }
.leadr-header__right { gap: 1.75rem; }
.leadr-header__right > * { margin: 0 !important; }
.leadr-nav { gap: 1.75rem; }
.leadr-nav p { margin: 0; }
.leadr-nav a { color: #fff; text-decoration: none; font-weight: 500; font-size: var(--wp--preset--font-size--small); padding-block: .4rem; background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size .3s var(--leadr-ease); }
.leadr-nav a:hover, .leadr-nav a:focus-visible { background-size: 100% 2px; }
.leadr-header .wp-block-button__link { padding: .65rem 1.25rem; font-size: var(--wp--preset--font-size--small); white-space: nowrap; }
.leadr-header .wp-block-buttons { flex: none; }
@media (max-width: 720px) { .leadr-header .leadr-nav { display: none !important; } .leadr-header__right { gap: 0; } }

.leadr-logo { margin: 0; line-height: 0; flex: none; }
.leadr-logo a { display: inline-block; line-height: 0; }
.leadr-logo img { width: clamp(108px, 11vw, 144px); height: auto; display: block; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.leadr-hero {
	position: relative; isolation: isolate; overflow: hidden;
	padding-block: clamp(3.5rem, 9vw, 8rem) clamp(4rem, 10vw, 9rem);
	min-height: min(82vh, 780px); display: flex; align-items: center;
}
.leadr-hero > * { width: 100%; }
.leadr-hero::before {
	content: ""; position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(60rem 40rem at 88% -10%, rgba(79, 226, 237, .38), transparent 60%),
		radial-gradient(48rem 36rem at -5% 105%, rgba(221, 58, 218, .30), transparent 60%);
}
/* Trame de pastilles, en écho à la charte */
.leadr-hero::after {
	content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
	background:
		url("../img/arrow.svg") right -4% bottom -14% / min(58vw, 700px) auto no-repeat,
		radial-gradient(circle, rgba(16, 15, 29, .13) 0 20px, transparent 21px) 0 0 / 96px 96px;
	opacity: .42;
	-webkit-mask-image: linear-gradient(115deg, transparent 20%, #000 75%);
	mask-image: linear-gradient(115deg, transparent 20%, #000 75%);
}
.leadr-hero__inner { max-width: var(--leadr-wide); margin-inline: auto; display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.leadr-hero__inner > * { margin: 0 !important; }
.leadr-hero h1 { max-width: 11.5ch; text-wrap: balance; }
.leadr-hero .leadr-lead { max-width: 30rem; }
.leadr-hero__actions { margin-top: .5rem !important; }
.leadr-hero__pills { margin-top: clamp(1.5rem, 4vw, 3rem) !important; max-width: 40rem; }

/* --------------------------------------------------------------------------
   Pastilles (sous-expertises)
   -------------------------------------------------------------------------- */
.leadr-pills { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.leadr-pills li { margin: 0; padding: .35rem .85rem; border-radius: 999px; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; line-height: 1.3; background: rgba(16, 15, 29, .08); }
.leadr-pills--light li { background: rgba(255, 255, 255, .15); color: #fff; font-size: var(--wp--preset--font-size--small); padding: .45rem 1rem; }

/* --------------------------------------------------------------------------
   Grilles & cartes
   -------------------------------------------------------------------------- */
.leadr-grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); grid-template-columns: 1fr; }
.leadr-grid > * { margin: 0 !important; }
@media (min-width: 640px) { .leadr-grid--exp { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .leadr-grid--3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .leadr-grid--exp { grid-template-columns: repeat(3, 1fr); } }

.leadr-card {
	display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
	padding: clamp(1.5rem, 2.4vw, 2.25rem); border-radius: var(--leadr-r-l);
	background: var(--wp--preset--color--lavender); color: var(--wp--preset--color--navy);
	transition: transform .42s var(--leadr-ease), box-shadow .42s var(--leadr-ease);
}
.leadr-card > * { margin: 0 !important; }
.leadr-card h3 { text-wrap: balance; }
.leadr-card p { line-height: 1.5; }
.leadr-card .leadr-pills { margin-top: auto !important; padding-top: .5rem; }

.leadr-card--blue     { background: var(--wp--preset--color--blue);     color: #fff; }
.leadr-card--lavender { background: var(--wp--preset--color--lavender); }
.leadr-card--lime     { background: var(--wp--preset--color--lime); }
.leadr-card--ice      { background: var(--wp--preset--color--ice); }
.leadr-card--navy     { background: var(--wp--preset--color--navy);     color: #fff; }
.leadr-card--green    { background: var(--wp--preset--color--green); }
.leadr-card--blue .leadr-pills li,
.leadr-card--navy .leadr-pills li { background: rgba(255, 255, 255, .16); color: #fff; }
.leadr-card--green .leadr-pills li { background: rgba(16, 15, 29, .12); }

@media (hover: hover) {
	.leadr-card:hover { transform: translateY(-6px); box-shadow: var(--wp--preset--shadow--lift); }
}

/* --------------------------------------------------------------------------
   Icônes (masques SVG : prennent la couleur du texte)
   -------------------------------------------------------------------------- */
.leadr-icon { position: relative; flex: none; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--wp--preset--color--navy); color: #fff; }
.leadr-icon::before { content: ""; position: absolute; inset: 0; margin: auto; width: 1.65rem; height: 1.65rem; background: currentColor; -webkit-mask: var(--leadr-mask) center / contain no-repeat; mask: var(--leadr-mask) center / contain no-repeat; }
.leadr-icon--mail     { --leadr-mask: url("../icons/mail.svg"); }
.leadr-icon--mobile   { --leadr-mask: url("../icons/mobile.svg"); }
.leadr-icon--cashback { --leadr-mask: url("../icons/cashback.svg"); }
.leadr-icon--commerce { --leadr-mask: url("../icons/commerce.svg"); }
.leadr-icon--llm      { --leadr-mask: url("../icons/llm.svg"); }
.leadr-icon--bell     { --leadr-mask: url("../icons/bell.svg"); }
.leadr-icon--data     { --leadr-mask: url("../icons/data.svg"); }
.leadr-icon--chip     { --leadr-mask: url("../icons/chip.svg"); }
.leadr-icon--compass  { --leadr-mask: url("../icons/compass.svg"); }
.leadr-icon--check    { --leadr-mask: url("../icons/check.svg"); }

.leadr-card--blue .leadr-icon     { background: rgba(255, 255, 255, .18); }
.leadr-card--lavender .leadr-icon { background: var(--wp--preset--color--magenta); }
.leadr-card--lime .leadr-icon     { background: var(--wp--preset--color--green); color: var(--wp--preset--color--navy); }
.leadr-card--ice .leadr-icon      { background: var(--wp--preset--color--cyan);  color: var(--wp--preset--color--navy); }
.leadr-card--navy .leadr-icon     { background: var(--wp--preset--color--blue); }
.leadr-card--green .leadr-icon    { background: var(--wp--preset--color--navy);  color: var(--wp--preset--color--green); }

/* --------------------------------------------------------------------------
   Bloc « pont » Publicis Connected Media
   -------------------------------------------------------------------------- */
.leadr-bridge {
	position: relative; isolation: isolate; overflow: hidden;
	display: grid; gap: clamp(2rem, 4vw, 3.5rem); grid-template-columns: 1fr;
	padding: clamp(2rem, 5vw, 4.25rem); border-radius: var(--leadr-r-xl);
	background: var(--wp--preset--color--navy); color: #fff;
}
.leadr-bridge::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(40rem 26rem at 100% 0%, rgba(62, 81, 255, .65), transparent 65%); }
@media (min-width: 900px) { .leadr-bridge { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.leadr-bridge > * { margin: 0 !important; }
.leadr-bridge__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.leadr-bridge__intro > * { margin: 0 !important; }
.leadr-bridge__text { color: rgba(255, 255, 255, .78); line-height: 1.55; max-width: 30rem; }
.leadr-bridge__points { display: flex; flex-direction: column; gap: 1.5rem; }
.leadr-bridge__points > * { margin: 0 !important; }
.leadr-point { display: grid; grid-template-columns: auto 1fr; column-gap: 1.1rem; row-gap: .2rem; align-items: start; }
.leadr-point > * { margin: 0 !important; }
.leadr-point .leadr-icon { grid-row: span 2; background: var(--wp--preset--color--green); color: var(--wp--preset--color--navy); width: 2.75rem; height: 2.75rem; border-radius: .9rem; }
.leadr-point .leadr-icon::before { width: 1.4rem; height: 1.4rem; }
.leadr-point h4 { align-self: end; }
.leadr-point p { color: rgba(255, 255, 255, .72); line-height: 1.5; font-size: var(--wp--preset--font-size--small); }

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.leadr-contact { position: relative; isolation: isolate; overflow: hidden; }
.leadr-contact::before { content: ""; position: absolute; inset: 0; z-index: -2; background: radial-gradient(50rem 34rem at 0% 0%, rgba(79, 226, 237, .30), transparent 60%), radial-gradient(44rem 30rem at 100% 100%, rgba(221, 58, 218, .30), transparent 60%); }
.leadr-contact__grid { max-width: var(--leadr-wide); margin-inline: auto; display: grid; gap: clamp(2rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
.leadr-contact__grid > * { margin: 0 !important; }
@media (min-width: 960px) { .leadr-contact__grid { grid-template-columns: .9fr 1.1fr; } }
.leadr-contact__intro { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
.leadr-contact__intro > * { margin: 0 !important; }
.leadr-contact__intro h2 { text-wrap: balance; }
.leadr-contact .leadr-lead { color: rgba(255, 255, 255, .92); max-width: 28rem; }

.leadr-contact-card { width: 100%; max-width: 28rem; display: flex; flex-direction: column; gap: .35rem; margin-top: .75rem !important; padding: 1.5rem 1.75rem; border-radius: var(--leadr-r-m); background: rgba(255, 255, 255, .12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.leadr-contact-card > * { margin: 0 !important; }
.leadr-contact-card__label { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--wp--preset--color--green); }
.leadr-contact-card__role { color: rgba(255, 255, 255, .8); font-size: var(--wp--preset--font-size--small); margin-bottom: .6rem !important; }
.leadr-contact-card__line, .leadr-contact-card__line a { font-size: var(--wp--preset--font-size--small); color: #fff; }
.leadr-contact-card a { text-underline-offset: 3px; }

/* Formulaire */
.leadr-form-card { padding: clamp(1.5rem, 3.4vw, 2.75rem); border-radius: var(--leadr-r-xl); background: #fff; color: var(--wp--preset--color--navy); box-shadow: var(--wp--preset--shadow--lift); }
.leadr-form { display: flex; flex-direction: column; gap: 1.1rem; width: 100%; min-width: 0; }
.leadr-form__row { display: grid; gap: 1.1rem; grid-template-columns: minmax(0, 1fr); width: 100%; }
@media (min-width: 560px) { .leadr-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.leadr-form__field { display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.leadr-form label { font-size: var(--wp--preset--font-size--small); font-weight: 600; }
.leadr-form input[type="text"], .leadr-form input[type="email"], .leadr-form textarea {
	box-sizing: border-box; width: 100%; padding: .9rem 1rem; font: inherit; font-size: 1rem; color: inherit;
	background: var(--wp--preset--color--peach); border: 2px solid transparent; border-radius: var(--leadr-r-s);
	transition: border-color .18s var(--leadr-ease), background-color .18s var(--leadr-ease), box-shadow .18s var(--leadr-ease);
}
.leadr-form textarea { resize: vertical; min-height: 8rem; }
.leadr-form input:hover, .leadr-form textarea:hover { border-color: rgba(62, 81, 255, .35); }
.leadr-form input:focus, .leadr-form textarea:focus { outline: none; background: #fff; border-color: var(--wp--preset--color--blue); box-shadow: 0 0 0 4px rgba(62, 81, 255, .18); }
.leadr-form__consent { display: grid; grid-template-columns: auto 1fr; gap: .75rem; align-items: start; }
.leadr-form__consent input { width: 1.25rem; height: 1.25rem; margin-top: .2rem; accent-color: var(--wp--preset--color--blue); }
.leadr-form__consent label { font-weight: 400; line-height: 1.45; color: rgba(16, 15, 29, .75); }
.leadr-form__submit { align-self: flex-start; cursor: pointer; border: 0; margin-top: .25rem; }
.leadr-form__submit:hover { transform: translateY(-2px); }
.leadr-form__trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.leadr-form__notice { margin: 0; padding: .9rem 1.1rem; border-radius: var(--leadr-r-s); font-size: var(--wp--preset--font-size--small); font-weight: 500; }
.leadr-form__notice--success { background: var(--wp--preset--color--lime); }
.leadr-form__notice--error { background: #ffe3f3; color: #7a0f5c; }

/* --------------------------------------------------------------------------
   Pied de page
   -------------------------------------------------------------------------- */
.leadr-footer { padding-block: clamp(2.5rem, 5vw, 4rem) 2rem; }
.leadr-footer__top { max-width: var(--leadr-wide); margin-inline: auto; gap: 1.5rem 3rem; }
.leadr-footer__top > * { margin: 0 !important; }
.leadr-footer .leadr-logo img { width: clamp(120px, 12vw, 160px); }
.leadr-footer__links { gap: .5rem 2rem; }
.leadr-footer__links p { margin: 0; }
.leadr-footer a { color: #fff; text-decoration: none; font-size: var(--wp--preset--font-size--small); }
.leadr-footer__links a { opacity: .85; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .18s, opacity .18s; }
.leadr-footer__links a:hover { opacity: 1; text-decoration-color: currentColor; }
.leadr-footer__legal { max-width: var(--leadr-wide); margin: clamp(2rem, 4vw, 3rem) auto 0 !important; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, .14); font-size: var(--wp--preset--font-size--x-small); color: rgba(255, 255, 255, .6); }

/* --------------------------------------------------------------------------
   Pages standard (mentions légales, etc.)
   -------------------------------------------------------------------------- */
.leadr-page { padding: clamp(3rem, 7vw, 6rem) var(--leadr-gutter); min-height: 50vh; }

/* --------------------------------------------------------------------------
   Apparition au scroll (activée seulement si le JS est chargé)
   -------------------------------------------------------------------------- */
.leadr-js .leadr-reveal { opacity: 0; translate: 0 28px; transition: opacity .7s var(--leadr-ease), translate .7s var(--leadr-ease), transform .42s var(--leadr-ease), box-shadow .42s var(--leadr-ease); }
.leadr-js .leadr-reveal.is-visible,
.leadr-js.leadr-reveal-all .leadr-reveal { opacity: 1; translate: 0 0; }

@media (prefers-reduced-motion: reduce) {
	.leadr-js .leadr-reveal { opacity: 1; translate: none; transition: none; }
	.leadr-card, .wp-block-button__link { transition: none; }
	.wp-block-button__link:hover, .leadr-card:hover { transform: none; }
}