/*
 * Sarah Boostacom : header, footer et page d'accueil
 * Maquette « Accueil Sarah Boostacom » (titre A).
 */

/* ---------- Polices ---------- */
@font-face {
	font-family: "Fuzzy Bubbles";
	src: url("../fonts/fuzzy-bubbles/fuzzy-bubbles-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Phosphor";
	src: url("../fonts/phosphor/Phosphor.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}
@font-face {
	font-family: "Phosphor-Bold";
	src: url("../fonts/phosphor/Phosphor-Bold.woff2") format("woff2");
	font-weight: normal;
	font-style: normal;
	font-display: block;
}

/* ---------- Jetons ---------- */
:root {
	--sh-rose: #e44f8e;
	--sh-prune: #8f3059;
	--sh-creme: #fff1ea;
	--sh-jaune: #fdc17a;
	--sh-saumon: #fd98a0;
	--sh-orange: #f48c4b;
	--sh-mauve: #b97f98;
	--sh-encre: #333033;
	--sh-vert: #5ba8a2;
	/* More Sugar (déclarée dans theme.json) n'existe qu'en graisse 400 */
	--sh-titre: "More Sugar", "Fuzzy Bubbles", cursive;
	--sh-titre-graisse: 400;
	--sh-texte: "Quicksand", sans-serif;
	--sh-gutter: clamp(20px, 5vw, 80px);
	--sh-section-y: clamp(56px, 7vw, 104px);
	--sh-max: 1280px;
}

/* ---------- Icônes (Phosphor, auto-hébergé) ----------
 * Ajouter la classe « sh-ico-NOM » à un bloc : l'icône s'affiche
 * avant son contenu (groupe, bouton, élément de confiance…).
 */
.sh-ico-magnifying-glass { --sh-ico: "\e30c"; }
.sh-ico-seal-check { --sh-ico: "\e606"; }
.sh-ico-graduation-cap { --sh-ico: "\e62c"; }
.sh-ico-cat { --sh-ico: "\e748"; }
.sh-ico-instagram-logo { --sh-ico: "\e2d0"; }
.sh-ico-storefront { --sh-ico: "\e470"; }
.sh-ico-hourglass-medium { --sh-ico: "\e2b8"; }
.sh-ico-paw-print { --sh-ico: "\e648"; }
.sh-ico-sun-horizon { --sh-ico: "\e5b6"; }
.sh-ico-browser { --sh-ico: "\e0f4"; }
.sh-ico-pen-nib { --sh-ico: "\e3ac"; }
.sh-ico-share-network { --sh-ico: "\e408"; }
.sh-ico-wrench { --sh-ico: "\e5d4"; }
.sh-ico-phone-call { --sh-ico: "\e3ba"; }
.sh-ico-map-pin { --sh-ico: "\e316"; }
.sh-ico-envelope-simple { --sh-ico: "\e218"; }
.sh-ico-code { --sh-ico: "\e1bc"; }
.sh-ico-chart-line-up { --sh-ico: "\e156"; }
.sh-ico-megaphone { --sh-ico: "\e324"; }
.sh-ico-hand-heart { --sh-ico: "\e810"; }
.sh-ico-dog { --sh-ico: "\e74a"; }
.sh-ico-prohibit { --sh-ico: "\e3de"; }
.sh-ico-newspaper { --sh-ico: "\e344"; }
.sh-ico-chat-circle-dots { --sh-ico: "\e16c"; }
.sh-ico-baby-carriage { --sh-ico: "\e818"; }
.sh-ico-house-line { --sh-ico: "\e2c4"; }
.sh-ico-crown-simple { --sh-ico: "\e616"; }
.sh-ico-handshake { --sh-ico: "\e582"; }
.sh-ico-list-checks { --sh-ico: "\eadc"; }
.sh-ico-book-open-text { --sh-ico: "\e8f2"; }
.sh-ico-scales { --sh-ico: "\e750"; }
.sh-ico-chats-circle { --sh-ico: "\e17e"; }
.sh-ico-heart { --sh-ico: "\e2a8"; }
.sh-ico-file-text { --sh-ico: "\e23a"; }
.sh-ico-download-simple { --sh-ico: "\e20c"; }
.sh-ico-camera { --sh-ico: "\e10e"; }
.sh-ico-rocket-launch { --sh-ico: "\e3fe"; }
.sh-ico-info { --sh-ico: "\e2ce"; }
.sh-ico-browsers { --sh-ico: "\e0f6"; }
.sh-ico-student { --sh-ico: "\e73e"; }
.sh-ico-chef-hat { --sh-ico: "\ed8e"; }
.sh-ico-layout { --sh-ico: "\e6d6"; }
.sh-ico-bird { --sh-ico: "\e72c"; }
.sh-ico-sparkle { --sh-ico: "\e6a2"; }
.sh-ico-quotes { --sh-ico: "\e660"; }
.sh-ico-arrows-left-right { --sh-ico: "\e0a0"; }
.sh-ico-shield-check { --sh-ico: "\e40c"; }
.sh-ico-certificate { --sh-ico: "\e766"; }
.sh-ico-book-open { --sh-ico: "\e0e6"; }

[class*="sh-ico-"]::before,
.sh-arrow .wp-block-button__link::after,
.sh-arrow > a::after,
.sh-checks li::before,
.sh-faq summary::after {
	font-family: "Phosphor" !important;
	font-style: normal;
	font-weight: normal;
	line-height: 1;
	speak: never;
	-webkit-font-smoothing: antialiased;
}
[class*="sh-ico-"]::before {
	content: var(--sh-ico);
}
/* Sur les boutons, l'icône va dans le lien, pas autour */
.wp-block-button[class*="sh-ico-"]::before {
	content: none;
}
.wp-block-button[class*="sh-ico-"] .wp-block-button__link::before {
	content: var(--sh-ico);
	font-family: "Phosphor" !important;
	font-size: 20px;
	line-height: 1;
}
.sh-arrow .wp-block-button__link::after,
.sh-arrow > a::after {
	content: "\e06c";
	font-family: "Phosphor-Bold" !important;
}

/* ---------- Base de la page ---------- */
:root body {
	background: var(--sh-creme);
}
/* Pas d'espace entre header, contenu et footer, ni entre les sections */
:root .wp-site-blocks > *,
.sh-page.sh-page > *,
.sh-page .wp-block-post-content > *,
.sh-header :is(.wp-block-group, .wp-block-buttons) > *,
.sh-footer :is(.wp-block-group, .wp-block-buttons) > * {
	margin-block: 0;
}
.sh-page {
	background: var(--sh-creme);
	color: var(--sh-encre);
	font-family: var(--sh-texte);
	font-size: 16px;
	line-height: 1.6;
}
.sh-page :is(h1, h2, h3, p, ul, ol, li, figure) {
	margin: 0;
}
.sh-page :is(.wp-block-group, .wp-block-column, .wp-block-columns, .wp-block-details, .wp-block-buttons) > * {
	margin-block: 0;
}
.sh-page a:not(.wp-block-button__link) {
	color: var(--sh-rose);
	text-decoration: none;
}
.sh-page a:not(.wp-block-button__link):hover {
	color: var(--sh-prune);
}

/* Sections : fond pleine largeur + contenu centré */
.sh-section {
	width: 100%;
}
.sh-inner {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--sh-max);
	margin-inline: auto !important;
	padding: var(--sh-section-y) var(--sh-gutter);
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.sh-bg-prune { background: var(--sh-prune); color: #fff; }
.sh-bg-blanc { background: #fff; }
.sh-bg-jaune { background: var(--sh-jaune); }
.sh-bg-mauve { background: var(--sh-mauve); }

/* Titres */
.sh-page .sh-h1,
.sh-page .sh-h2,
.sh-page .sh-h3-deco {
	font-family: var(--sh-titre);
	font-weight: var(--sh-titre-graisse);
	text-wrap: balance;
}
.sh-page .sh-h1 {
	color: var(--sh-rose);
	font-size: clamp(32px, 4.2vw, 54px);
	line-height: 1.12;
}
.sh-page .sh-h2 {
	color: var(--sh-rose);
	font-size: clamp(26px, 3vw, 38px);
	line-height: 1.15;
}
/* Mots mis en avant dans le h1 : outil « Surligner » de l'éditeur (<mark>).
   Surlignage jaune sur la moitié basse du texte, qui déborde un peu dessous. */
/* Sans .sh-page devant : doit aussi marcher dans l'éditeur de page */
.sh-h1 mark {
	/* Le texte garde la couleur du titre, même si une couleur de texte
	   a été choisie dans l'outil « Surligner » */
	color: inherit !important;
	background-color: transparent !important;
	background-image: linear-gradient(var(--sh-jaune), var(--sh-jaune));
	background-repeat: no-repeat;
	background-size: 100% .5em;
	background-position: 0 88%;
	padding: 0 .08em;
	margin: 0 -.08em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.sh-bg-prune .sh-h2,
.sh-bg-mauve .sh-h2 {
	color: #fff;
}
.sh-page .sh-h3-deco {
	color: var(--sh-prune);
	font-size: clamp(26px, 2.4vw, 32px);
	line-height: 1.15;
}
.sh-page .sh-h3 {
	font-family: var(--sh-texte);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}
.sh-center {
	text-align: center;
	align-items: center;
}
.sh-intro {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sh-intro p {
	max-width: 36em;
}

/* ---------- Boutons ---------- */
.sh-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.sh-page .sh-btn .wp-block-button__link,
.sh-header .sh-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 26px;
	border: 2px solid transparent;
	border-radius: 999px;
	font-family: var(--sh-texte);
	font-size: 16px;
	font-weight: 600;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	transition: transform .15s ease, filter .15s ease, background-color .15s ease;
}
body .sh-btn .wp-block-button__link:hover,
body .sh-btn .wp-block-button__link:focus-visible {
	transform: translateY(-2px);
	filter: brightness(1.05);
	border-color: transparent !important;
}
.sh-page .sh-btn--rose .wp-block-button__link { background: var(--sh-rose); color: #fff; box-shadow: 0 6px 16px rgba(228, 79, 142, .3); }
.sh-page .sh-btn--prune .wp-block-button__link { background: var(--sh-prune); color: #fff; }
.sh-page .sh-btn--blanc .wp-block-button__link { background: #fff; color: var(--sh-prune); font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, .12); }
.sh-page .sh-btn--contour .wp-block-button__link { background: transparent; border-color: var(--sh-prune); color: var(--sh-prune); padding: 12px 24px; }
.sh-page .sh-btn--contour-rose .wp-block-button__link { background: transparent; border-color: var(--sh-rose); color: var(--sh-rose); padding: 10px 22px; }
.sh-page .sh-btn--petit .wp-block-button__link { padding: 12px 24px; }

body .sh-btn--rose .wp-block-button__link:hover { background: var(--sh-rose) !important; color: #fff !important; }
body .sh-btn--prune .wp-block-button__link:hover { background: var(--sh-prune) !important; color: #fff !important; }
body .sh-btn--blanc .wp-block-button__link:hover { background: #fff !important; color: var(--sh-prune) !important; }
body .sh-btn--jaune .wp-block-button__link:hover { background: var(--sh-jaune) !important; color: var(--sh-encre) !important; }
body .sh-btn--contour .wp-block-button__link:hover { background: var(--sh-prune) !important; color: #fff !important; border-color: var(--sh-prune) !important; }
body .sh-btn--contour-rose .wp-block-button__link:hover { background: var(--sh-rose) !important; color: #fff !important; border-color: var(--sh-rose) !important; }

/* ---------- Hero ---------- */
.sh-hero {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	padding-top: clamp(24px, 5vw, 72px);
	padding-bottom: clamp(48px, 7vw, 104px);
}
.sh-hero__texte {
	flex: 1 1 440px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sh-hero__texte .sh-btns {
	margin-top: 8px;
}
.sh-surtitre {
	font-weight: 600;
	color: var(--sh-prune);
	font-size: 14px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.sh-hero__accroche {
	font-size: clamp(17px, 1.5vw, 20px);
	max-width: 34em;
	text-wrap: pretty;
}
.sh-hero__photo {
	flex: 1 1 320px;
	max-width: 480px;
	position: relative;
}
.sh-hero__photo::before {
	content: "";
	position: absolute;
	inset: 24px -16px -16px 24px;
	background: var(--sh-saumon);
	border-radius: 32px;
}
.sh-hero__photo img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top;
	border-radius: 28px;
}

/* ---------- Bandeau confiance ---------- */
.sh-confiance {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 20px 32px;
	padding-top: 28px;
	padding-bottom: 28px;
}
.sh-confiance__item {
	display: flex;
	align-items: center;
	gap: 14px;
	font-weight: 600;
	line-height: 1.3;
}
.sh-confiance__item::before {
	font-size: 30px;
	color: var(--sh-prune);
	flex: none;
}
.sh-confiance__item span {
	font-weight: 500;
}
/* Badge image à la place de l'icône (ex. Opquast) */
.sh-page .sh-badge {
	flex: none;
}
.sh-page .sh-badge img {
	display: block;
	height: 52px;
	width: auto;
	border-radius: 6px;
}
.sh-page .sh-badge a {
	display: block;
	transition: transform .15s ease;
}
.sh-page .sh-badge a:hover {
	transform: translateY(-2px);
}
/* Mobile : les éléments sont empilés, on aligne les textes en colonne */
@media (max-width: 599px) {
	.sh-confiance__item::before,
	.sh-page .sh-confiance__item .sh-badge {
		width: 72px;
		display: flex;
		justify-content: center;
	}
}

/* ---------- Grilles de cartes ---------- */
.sh-grid {
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--sh-col, 260px)), 1fr));
}
.sh-grid--240 { --sh-col: 240px; }
.sh-grid--300 { --sh-col: 300px; gap: 24px; }
.sh-grid--420 { --sh-col: 420px; gap: 24px; }
/* Cartes univers : 3 colonnes sur grand écran, empilées en dessous */
.sh-grid--univers { --sh-col: 300px; gap: 24px; }

.sh-card {
	border-radius: 24px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sh-card::before {
	align-self: flex-start;
	font-size: 36px;
	color: var(--sh-rose);
}
.sh-card--verre {
	background: rgba(255, 241, 234, .1);
	border: 1px solid rgba(255, 241, 234, .25);
}
.sh-card--verre::before {
	color: var(--sh-jaune);
}
.sh-card--verre .sh-h3 {
	font-size: 20px;
}
.sh-card--creme {
	background: var(--sh-creme);
}
.sh-conclusion {
	text-align: center;
	font-size: 18px;
	font-weight: 600;
	color: var(--sh-jaune);
}

/* ---------- Univers ---------- */
.sh-univers {
	border-radius: 32px;
	padding: clamp(24px, 2.4vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 20px;
	scroll-margin-top: 24px;
}
.sh-univers--jaune { background: var(--sh-jaune); }
.sh-univers--saumon { background: var(--sh-saumon); }
.sh-univers--orange { background: var(--sh-orange); }
.sh-univers::before {
	align-self: flex-start;
	width: 64px;
	height: 64px;
	border-radius: 999px;
	background: var(--sh-creme);
	color: var(--sh-rose);
	font-size: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sh-univers > .wp-block-buttons {
	margin-top: auto !important;
}
.sh-page .sh-univers .sh-btn .wp-block-button__link {
	padding: 12px 20px;
	font-size: 15px;
	line-height: 1.3;
	text-align: left;
}
.sh-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.sh-page .sh-tags p,
.sh-tag {
	background: var(--sh-creme);
	border-radius: 999px;
	padding: 4px 14px;
	font-weight: 600;
	font-size: 14px;
	line-height: 1.6;
}
.sh-checks {
	list-style: none;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sh-checks li {
	display: flex;
	gap: 10px;
}
.sh-checks li::before {
	content: "\e182";
	font-family: "Phosphor-Bold" !important;
	color: var(--sh-prune);
	margin-top: 5px;
}

/* ---------- Méthode ---------- */
.sh-etapes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 28px;
}
.sh-etape {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sh-etape .sh-h3 {
	color: var(--sh-prune);
}
.sh-page .sh-etape__num {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	font-family: var(--sh-titre);
	font-weight: var(--sh-titre-graisse);
	font-size: 26px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sh-etape:nth-child(1) .sh-etape__num { background: var(--sh-rose); color: #fff; }
.sh-etape:nth-child(2) .sh-etape__num { background: var(--sh-orange); color: #fff; }
.sh-etape:nth-child(3) .sh-etape__num { background: var(--sh-saumon); color: var(--sh-prune); }
.sh-etape:nth-child(4) .sh-etape__num { background: var(--sh-jaune); color: var(--sh-prune); }

/* ---------- Réalisations ---------- */
.sh-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}
.sh-page .sh-lien-jaune a,
.sh-page .sh-lien-jaune a:hover {
	color: var(--sh-jaune);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.sh-projet {
	background: #fff;
	color: var(--sh-encre);
	border-radius: 24px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: transform .15s ease;
}
.sh-projet:hover {
	transform: translateY(-4px);
}
.sh-projet img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	object-position: top center;
	border-radius: 14px;
}
.sh-projet > :not(.wp-block-image):not(.sh-tag) {
	margin-inline: 4px !important;
}
.sh-projet > p:last-child {
	margin-bottom: 8px !important;
}
.sh-page .sh-projet .sh-h3 a {
	color: var(--sh-encre);
}
.sh-page .sh-projet .sh-h3 a:hover {
	color: var(--sh-rose);
}
.sh-page .sh-tag {
	align-self: flex-start;
	background: var(--sh-jaune);
	padding: 2px 12px;
	font-weight: 700;
	font-size: 13px;
}
.sh-page .sh-tag--saumon {
	background: var(--sh-saumon);
	color: var(--sh-prune);
}

/* ---------- Qui suis-je ---------- */
.sh-apropos {
	flex-direction: row;
	flex-wrap: wrap-reverse;
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
	scroll-margin-top: 24px;
}
.sh-apropos__photo {
	flex: 1 1 280px;
	max-width: 420px;
}
.sh-apropos__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center 20%;
	border-radius: 999px;
}
.sh-apropos__texte {
	flex: 1 1 400px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sh-apropos__texte > p {
	font-size: 18px;
	max-width: 34em;
}

/* ---------- FAQ ---------- */
.sh-inner--etroit {
	max-width: 880px;
	gap: 32px;
}
.sh-faq-liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sh-page .sh-faq {
	background: var(--sh-creme);
	border-radius: 20px;
	padding: 18px 24px;
}
.sh-faq summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	font-weight: 700;
	font-size: 17px;
}
.sh-faq summary::-webkit-details-marker {
	display: none;
}
.sh-faq summary::after {
	content: "\e3d4";
	font-family: "Phosphor-Bold" !important;
	color: var(--sh-rose);
	margin-top: 5px;
}
.sh-faq[open] summary::after {
	content: "\e32a";
}
.sh-page .sh-faq > p {
	margin-top: 12px !important;
}

/* ---------- Contact ---------- */
#contact {
	scroll-margin-top: 0;
}
.sh-contact {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: clamp(32px, 5vw, 72px);
}
.sh-contact__texte {
	flex: 1 1 340px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: #fff;
}
.sh-contact__texte > p {
	font-size: 18px;
	max-width: 28em;
}
.sh-page .sh-contact__lieu {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	margin-top: 8px !important;
}
.sh-contact__form {
	flex: 1 1 440px;
	min-width: 0;
	background: var(--sh-jaune);
	border-radius: 28px;
	padding: clamp(24px, 3vw, 40px);
	box-shadow: 0 12px 32px rgba(143, 48, 89, .2);
}
/* Contact Form 7 aux couleurs de la maquette */
.sh-contact__form .wpcf7-form > p,
.sh-contact__form .contact-form .row,
.sh-contact__form .contact-form .col p {
	margin: 0 0 16px;
}
.sh-contact__form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-weight: 600;
}
.sh-contact__form .wpcf7-form-control-wrap {
	display: block;
}
.sh-contact__form input:not([type="submit"]):not([type="file"]),
.sh-contact__form select,
.sh-contact__form textarea {
	box-sizing: border-box;
	width: 100%;
	border-radius: 12px;
	border: 1px solid var(--sh-vert);
	padding: 0 14px;
	font: inherit;
	font-weight: 400;
	background: #fff;
	color: var(--sh-encre);
}
.sh-contact__form input:not([type="submit"]):not([type="file"]),
.sh-contact__form select {
	height: 46px;
}
.sh-contact__form textarea {
	padding: 12px 14px;
	resize: vertical;
	min-height: 140px;
}
.sh-contact__form :is(input, select, textarea):focus-visible {
	outline: 2px solid var(--sh-prune);
	outline-offset: 1px;
}
.sh-contact__form .wpcf7-submit {
	background: var(--sh-rose);
	color: #fff;
	border: 0;
	padding: 14px 32px;
	border-radius: 999px;
	font: inherit;
	font-weight: 700;
	text-transform: none;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(228, 79, 142, .3);
}
body .sh-contact__form .wpcf7-submit:hover {
	background: var(--sh-prune) !important;
	color: #fff !important;
	border: 0 !important;
}

/* ---------- Page Éleveurs ---------- */
/* Lien texte souligné (hero) */
.sh-page .sh-lien-souligne a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sh-prune);
	font-weight: 600;
	border-bottom: 2px solid var(--sh-saumon);
	padding-bottom: 2px;
}
.sh-page .sh-lien-souligne a::after {
	content: "\e03e";
	font-family: "Phosphor-Bold" !important;
	font-weight: normal;
}
.sh-hero__texte .sh-btns {
	align-items: center;
	column-gap: 24px;
}

/* Mon histoire : texte + chiffre clé, captures qui se chevauchent */
.sh-histoire {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: clamp(32px, 5vw, 72px);
}
.sh-histoire__texte {
	flex: 1 1 420px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sh-histoire__texte > p {
	font-size: 18px;
	max-width: 34em;
}
.sh-stat {
	align-self: flex-start;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 20px;
	background: #fff;
	border-radius: 28px;
	padding: 24px 28px;
	box-shadow: 0 12px 32px rgba(143, 48, 89, .12);
	animation: sh-flotte 5s ease-in-out infinite;
}
/* Flottement doux de l'encart chiffré */
@keyframes sh-flotte {
	0%, 100% { transform: translateY(0) rotate(0deg); box-shadow: 0 12px 32px rgba(143, 48, 89, .12); }
	50% { transform: translateY(-10px) rotate(-.6deg); box-shadow: 0 22px 40px rgba(143, 48, 89, .16); }
}
.sh-page .sh-stat__chiffre {
	font-family: var(--sh-titre);
	font-weight: var(--sh-titre-graisse);
	color: var(--sh-rose);
	font-size: clamp(64px, 7vw, 96px);
	line-height: 1;
}
.sh-page .sh-stat__texte {
	font-weight: 700;
	font-size: 20px;
	line-height: 1.3;
	color: var(--sh-prune);
	max-width: 10em;
}
.sh-captures {
	flex: 1 1 380px;
	min-width: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.sh-captures img {
	display: block;
	width: 100%;
	object-fit: cover;
	object-position: top center;
	border-radius: 20px;
}
.sh-captures > :first-child {
	grid-column: 1 / -1;
}
.sh-captures > :first-child img {
	aspect-ratio: 16 / 10;
}
.sh-page .sh-captures > :nth-child(2) {
	grid-column: 2;
	margin-top: -64px !important;
}
.sh-captures > :nth-child(2) img {
	aspect-ratio: 4 / 3;
	box-shadow: 0 12px 32px rgba(143, 48, 89, .2);
}

/* Petites cartes icône + texte (pages du site) */
.sh-grid--16 {
	gap: 16px;
}
.sh-mini {
	background: var(--sh-creme);
	border-radius: 20px;
	padding: 22px;
	display: flex;
	gap: 14px;
	align-items: flex-start;
}
.sh-mini::before {
	font-size: 30px;
	color: var(--sh-rose);
	flex: none;
}
.sh-mini__texte {
	min-width: 0;
}
.sh-page .sh-mini .sh-h3 {
	font-size: 17px;
}
.sh-page .sh-mini p {
	margin-top: 4px;
	font-size: 15px;
}

/* Formules */
.sh-page .sh-formules__hebergement {
	margin-top: 0;
	font-size: 14px;
	font-style: italic;
	opacity: .8;
}
.sh-formules {
	--sh-col: 320px;
	gap: 24px;
	align-items: stretch;
}
.sh-formule {
	position: relative;
	background: #fff;
	border-radius: 28px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.sh-page .sh-formule > * {
	margin: 0;
}
.sh-formule .sh-h3 {
	font-size: 24px;
	color: var(--sh-prune);
}
.sh-page .sh-prix {
	font-size: 14px;
}
.sh-page .sh-prix strong {
	font-family: var(--sh-titre);
	font-weight: var(--sh-titre-graisse);
	font-size: 40px;
	line-height: 1;
	color: var(--sh-rose);
}
.sh-page .sh-formule__delai {
	align-self: flex-start;
	background: var(--sh-jaune);
	color: var(--sh-encre);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
}
.sh-formule__delai::before {
	font-size: 18px;
	color: var(--sh-prune);
	vertical-align: -3px;
	margin-right: 8px;
}
.sh-page .sh-formule__ideal {
	font-weight: 500;
}
.sh-page .sh-formule__inclus {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--sh-prune);
}
.sh-formule .sh-checks {
	gap: 8px;
}
.sh-page .sh-formule .sh-checks li,
.sh-page .sh-reseaux .sh-checks li {
	margin: 0;
	padding: 0;
}
.sh-formule .sh-checks li::before {
	color: var(--sh-rose);
}
.sh-formule__note {
	background: var(--sh-creme);
	border-radius: 16px;
	padding: 12px 16px;
	display: flex;
	gap: 10px;
	align-items: flex-start;
}
.sh-formule__note::before {
	font-size: 20px;
	color: var(--sh-prune);
	margin-top: 2px;
}
.sh-page .sh-formule__note p {
	margin: 0;
	color: var(--sh-encre);
}
.sh-page .sh-formule > .wp-block-buttons {
	margin-top: auto;
}.sh-formule--vedette {
	background: var(--sh-rose);
	color: #fff;
	border-radius: 32px;
	box-shadow: 0 20px 48px rgba(228, 79, 142, .35);
}
.sh-formule--vedette .sh-h3 {
	color: #fff;
}
.sh-page .sh-formule--vedette .sh-prix strong {
	color: #fff;
}
.sh-page .sh-formule--vedette .sh-formule__inclus {
	color: var(--sh-jaune);
}
.sh-formule--vedette .sh-checks li::before {
	color: var(--sh-jaune);
}
.sh-page .sh-formule__badge {
	position: absolute;
	top: -14px;
	left: 32px;
	background: var(--sh-jaune);
	color: var(--sh-encre);
	border-radius: 999px;
	padding: 4px 14px;
	font-weight: 700;
	font-size: 13px;
	line-height: 1.5;
}

/* Intertitres qui séparent les cas (pas de site / déjà un site / réseaux) */
.sh-page .sh-intertitre {
	margin: 0;
	font-family: var(--sh-titre);
	font-weight: var(--sh-titre-graisse);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.15;
	color: var(--sh-prune);
	text-wrap: balance;
}
.sh-formules-cas {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.sh-page .sh-formules-cas > * {
	margin: 0;
}

/* Offre Visibilité (déjà un site) */
.sh-visibilite {
	display: flex;
	flex-direction: column;
	gap: 14px;
	scroll-margin-top: 24px;
}
.sh-page .sh-visibilite > * {
	margin: 0;
}
.sh-visibilite__carte {
	background: var(--sh-prune);
	color: #fff;
	border-radius: 32px;
	padding: clamp(28px, 4vw, 56px);
	display: flex;
	flex-direction: column;
	gap: 28px;
	box-shadow: 0 20px 48px rgba(143, 48, 89, .3);
}
.sh-page .sh-visibilite__carte > * {
	margin: 0;
}
.sh-visibilite__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 32px;
}
.sh-page .sh-visibilite__entete > * {
	margin: 0;
}
.sh-visibilite__texte {
	flex: 1 1 320px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sh-page .sh-visibilite__texte > * {
	margin: 0;
}
.sh-page .sh-visibilite .sh-intertitre {
	color: var(--sh-jaune);
}
.sh-page .sh-visibilite__nom {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--sh-jaune);
}
.sh-page .sh-visibilite__ideal {
	font-weight: 500;
	max-width: 34em;
}
.sh-page .sh-visibilite__entete .sh-prix {
	flex: none;
}
.sh-page .sh-visibilite .sh-prix strong {
	color: #fff;
	font-size: 44px;
}
.sh-visibilite__etapes {
	--sh-col: 320px;
	gap: 20px;
}
.sh-visibilite__etape {
	background: rgba(255, 241, 234, .1);
	border: 1px solid rgba(255, 241, 234, .25);
	border-radius: 24px;
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.sh-page .sh-visibilite__etape > * {
	margin: 0;
}
.sh-visibilite__etape-titre {
	display: flex;
	align-items: center;
	gap: 12px;
}
.sh-page .sh-visibilite__etape-titre > * {
	margin: 0;
}
.sh-page .sh-visibilite__num {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: var(--sh-jaune);
	color: var(--sh-prune);
	font-family: var(--sh-titre);
	font-weight: var(--sh-titre-graisse);
	font-size: 22px;
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sh-page .sh-visibilite__etape .sh-h3 {
	font-size: 20px;
	color: #fff;
}
.sh-visibilite .sh-checks {
	gap: 8px;
}
.sh-page .sh-visibilite .sh-checks li {
	margin: 0;
	padding: 0;
}
.sh-visibilite .sh-checks li::before {
	color: var(--sh-jaune);
}
.sh-page .sh-visibilite__info {
	margin: 0 8px;
	font-size: 14px;
	color: var(--sh-prune);
	display: flex;
	gap: 8px;
	align-items: flex-start;
}
.sh-visibilite__info::before {
	margin-top: 3px;
}

/* Encart community management */
.sh-reseaux {
	background: var(--sh-jaune);
	border-radius: 28px;
	padding: clamp(24px, 3.5vw, 40px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px 40px;
}
.sh-page .sh-reseaux > * {
	margin: 0;
}
.sh-reseaux__texte {
	flex: 1 1 260px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sh-page .sh-reseaux__texte > * {
	margin: 0;
}
.sh-reseaux__titre {
	display: flex;
	align-items: center;
	gap: 12px;
}
.sh-reseaux__titre::before {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 999px;
	background: var(--sh-creme);
	color: var(--sh-rose);
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sh-page .sh-reseaux .sh-h3 {
	margin: 0;
	font-family: var(--sh-titre);
	font-weight: var(--sh-titre-graisse);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.15;
	color: var(--sh-prune);
}
.sh-page .sh-reseaux__service {
	font-weight: 700;
	color: var(--sh-prune);
}
.sh-page .sh-reseaux .sh-prix strong {
	font-size: 34px;
	color: var(--sh-prune);
}
.sh-page .sh-reseaux__note {
	font-size: 15px;
	font-weight: 500;
	line-height: 1.7;
	color: var(--sh-encre);
	max-width: 30em;
}
/* Surlignement façon marqueur */
.sh-page mark.sh-surligne {
	/* Trait décalé : couvre la moitié basse du texte et déborde d'autant dessous */
	background: linear-gradient(var(--sh-creme), var(--sh-creme)) 0 100% / 100% .55em no-repeat;
	color: inherit;
	padding: 0 4px .06em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}
.sh-page mark.sh-surligne strong {
	color: var(--sh-prune);
}
.sh-prix__unite {
	font-weight: 700;
	color: var(--sh-prune);
}
.sh-page .sh-checks--grille {
	flex: 2 1 360px;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
	gap: 10px 24px;
}
.sh-reseaux > .wp-block-buttons {
	flex: none;
}

/* Atouts sur fond prune : icône + texte, sans carte */
.sh-grid--atouts {
	--sh-col: 240px;
	gap: 28px;
}
.sh-atout {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sh-atout::before {
	align-self: flex-start;
	font-size: 36px;
	color: var(--sh-jaune);
}

/* Ressource gratuite */
.sh-ressource {
	background: var(--sh-jaune);
	border-radius: 32px;
	padding: clamp(28px, 4vw, 56px);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 32px;
}
.sh-ressource__doc {
	flex: none;
	width: 120px;
	height: 150px;
	background: #fff;
	border-radius: 16px;
	transform: rotate(-4deg);
	box-shadow: 0 12px 28px rgba(143, 48, 89, .2);
	display: flex;
	align-items: center;
	justify-content: center;
}
.sh-ressource__doc::before {
	font-size: 56px;
	color: var(--sh-rose);
}
.sh-ressource__texte {
	flex: 1 1 300px;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sh-page .sh-ressource .sh-h2 {
	color: var(--sh-prune);
}
.sh-ressource .sh-surtitre {
	font-weight: 700;
}

/* ---------- Header ---------- */
.sh-header {
	background: var(--sh-creme);
	font-family: var(--sh-texte);
}
.sh-header__inner {
	box-sizing: border-box;
	max-width: var(--sh-max);
	margin-inline: auto !important;
	padding: 16px var(--sh-gutter);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.sh-header .sh-logo img {
	display: block;
	height: clamp(64px, 8.5vw, 110px);
	width: auto;
	mix-blend-mode: multiply;
}
.sh-header__nav {
	display: flex;
	align-items: center;
	gap: 32px;
}
.sh-header .wp-block-navigation {
	gap: 32px;
}
.sh-header .wp-block-navigation-item__content,
.sh-header .wp-block-navigation-item__content:hover {
	color: var(--sh-encre) !important;
	font-weight: 500;
}
.sh-header .wp-block-navigation-item__content:hover {
	color: var(--sh-rose) !important;
}
.sh-header .current-menu-item > .wp-block-navigation-item__content,
.sh-header .wp-block-navigation-item__content[aria-current="page"] {
	color: var(--sh-rose) !important;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 2px solid var(--sh-rose);
}
.sh-header .sh-btn--jaune .wp-block-button__link {
	background: var(--sh-jaune);
	color: var(--sh-encre);
	padding: 12px 28px;
	box-shadow: 0 4px 12px rgba(143, 48, 89, .15);
}
.sh-header .wp-block-navigation__responsive-container-open {
	width: 44px;
	height: 44px;
	border-radius: 999px;
	background: #fff;
	color: var(--sh-prune);
	align-items: center;
	justify-content: center;
	padding: 0;
}
/* Menu burger jusqu'à 1023px (WordPress ne le fait que sous 600px) :
   le menu à 5 liens ne tient pas sur une ligne en dessous */
@media (max-width: 1023px) {
	.sh-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.sh-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}
.sh-header .sh-btn .wp-block-button__link {
	white-space: nowrap;
}
.sh-header .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--sh-creme);
	color: var(--sh-encre);
	padding: 24px var(--sh-gutter);
}
.sh-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 22px;
	padding: 8px 0;
}

/* ---------- Footer ---------- */
.sh-footer {
	background: var(--sh-prune);
	color: var(--sh-creme);
	font-family: var(--sh-texte);
}
.sh-footer__inner {
	box-sizing: border-box;
	max-width: var(--sh-max);
	margin-inline: auto !important;
	padding: 48px var(--sh-gutter) 24px;
	display: flex;
	flex-direction: column;
	gap: 32px;
}
.sh-footer :is(p, h2, h3, ul, figure) {
	margin: 0;
}
.sh-footer__cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 32px;
}
.sh-footer__col {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.sh-footer__col:first-child {
	gap: 12px;
}
.sh-footer .sh-footer__logo {
	align-self: flex-start;
	background: var(--sh-creme);
	border-radius: 20px;
	padding: 10px 16px;
}
.sh-footer .sh-footer__logo img {
	display: block;
	height: 56px;
	width: auto;
	mix-blend-mode: multiply;
}
.sh-footer .sh-footer__titre {
	font-family: var(--sh-texte);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--sh-jaune);
}
.sh-footer a,
.sh-footer a:visited {
	color: var(--sh-creme);
	text-decoration: none;
}
.sh-footer a:hover {
	color: var(--sh-jaune);
}
.sh-footer .wp-block-social-links {
	gap: 12px;
	margin-top: 4px;
}
.sh-footer .wp-block-social-links .wp-social-link {
	color: var(--sh-creme);
	font-size: 24px;
}
.sh-footer__bas {
	border-top: 1px solid rgba(255, 241, 234, .25);
	padding-top: 16px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	font-size: 14px;
}
.sh-footer__liens {
	display: flex;
	gap: 20px;
}

/* ---------- Mobile ---------- */
/* 1023px : seuil du menu burger (voir plus haut) */
@media (max-width: 1023px) {
	.sh-header__inner {
		gap: 12px;
	}
	.sh-header__nav {
		gap: 12px;
		flex-direction: row-reverse;
	}
	.sh-header .sh-btn--jaune .wp-block-button__link {
		padding: 10px 18px;
		font-size: 14px;
	}
}
@media (max-width: 781px) {
	.sh-hero__texte .sh-btns .wp-block-button {
		width: 100%;
	}
	.sh-hero__texte .sh-btns .wp-block-button__link {
		width: 100%;
		justify-content: center;
		box-sizing: border-box;
	}
	.sh-contact__form .contact-form .row {
		flex-direction: column;
		gap: 0;
	}
	.sh-contact__form .contact-form .col {
		width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sh-btn .wp-block-button__link,
	.sh-projet {
		transition: none;
	}
	body .sh-btn .wp-block-button__link:hover,
	.sh-projet:hover {
		transform: none;
	}
	.sh-stat {
		animation: none;
	}
}

/* Section « Vous avez déjà un site ? » */
.sh-deja-site__carte {
	padding: clamp(24px, 3cqw, 40px);
	gap: 16px;
}
.sh-deja-site__carte .sh-h3 {
	font-size: 22px;
	text-wrap: balance;
}
.sh-page .sh-deja-site__prix {
	font-size: 15px;
	font-weight: 600;
	color: var(--sh-jaune);
}
.sh-deja-site__carte .wp-block-buttons {
	margin-top: auto;
}
.sh-page .sh-deja-site__note {
	max-width: 40em;
	margin-inline: auto;
	font-weight: 600;
	color: var(--sh-jaune);
}
.sh-deja-site__carte .sh-checks li::before {
	color: var(--sh-jaune);
}
.sh-deja-site__note::before {
	margin-right: 8px;
	vertical-align: -3px;
}
#deja-un-site, #formules {
	scroll-margin-top: 24px;
}

/* ---------- Page À propos ---------- */
.sh-page .sh-btn--jaune .wp-block-button__link { background: var(--sh-jaune); color: var(--sh-encre); font-weight: 700; box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
#appel { scroll-margin-top: 24px; }

/* Qui suis-je : titre + texte côte à côte */
.sh-qui {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
	gap: clamp(20px, 4vw, 64px);
	align-items: center;
}
.sh-qui > p {
	font-size: clamp(17px, 1.5vw, 20px);
	max-width: 36em;
	text-wrap: pretty;
}

/* Frise du parcours : pastille icône + carte, reliées par un trait */
.sh-frise {
	position: relative;
	max-width: 820px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.sh-frise::before {
	content: "";
	position: absolute;
	left: 27px;
	top: 28px;
	bottom: 80px;
	width: 3px;
	border-radius: 3px;
	background: var(--sh-saumon);
}
.sh-jalon {
	position: relative;
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: clamp(14px, 2.5vw, 28px);
	align-items: start;
}
.sh-jalon::before {
	width: 56px;
	height: 56px;
	border-radius: 999px;
	font-size: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 0 6px var(--sh-creme);
}
.sh-jalon--prune::before { background: var(--sh-prune); color: #fff; }
.sh-jalon--jaune::before { background: var(--sh-jaune); color: var(--sh-prune); }
.sh-jalon--saumon::before { background: var(--sh-saumon); color: var(--sh-prune); }
.sh-jalon--orange::before { background: var(--sh-orange); color: #fff; }
.sh-jalon--rose::before,
.sh-jalon--final::before { background: var(--sh-rose); color: #fff; }
.sh-jalon__carte {
	background: #fff;
	border-radius: 20px;
	padding: 18px 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.sh-page .sh-jalon__date {
	font-weight: 700;
	color: var(--sh-prune);
	font-size: 15px;
}
.sh-jalon__carte > p:not(.sh-jalon__date) {
	text-wrap: pretty;
}
/* Dernière étape mise en avant */
.sh-jalon--final {
	margin-top: 16px !important;
}
.sh-jalon--final::before {
	font-size: 30px;
	transform: translateY(-8px);
	box-shadow: 0 0 0 6px var(--sh-creme), 0 8px 20px rgba(228, 79, 142, .45);
}
.sh-jalon--final .sh-jalon__carte {
	position: relative;
	background: var(--sh-rose);
	color: #fff;
	border-radius: 28px;
	padding: clamp(24px, 3vw, 36px);
	gap: 8px;
	box-shadow: 0 16px 36px rgba(228, 79, 142, .35);
	transform: translateY(-8px) rotate(-1deg);
}
.sh-jalon--final .sh-jalon__carte::before {
	position: absolute;
	top: 18px;
	right: 22px;
	font-size: 28px;
	color: var(--sh-jaune);
}
.sh-page .sh-jalon--final .sh-jalon__date {
	align-self: flex-start;
	background: var(--sh-creme);
	color: var(--sh-prune);
	border-radius: 999px;
	padding: 2px 14px;
}
.sh-page .sh-jalon--final .sh-h3-deco {
	color: #fff;
	font-size: clamp(26px, 3vw, 36px);
	line-height: 1.2;
}
.sh-jalon--final .sh-jalon__carte > p:last-child {
	font-size: 18px;
	max-width: 30em;
}

/* Pourquoi je me lance : encart jaune + citation */
.sh-inner--colle {
	padding-top: 0;
}
.sh-pourquoi {
	background: var(--sh-jaune);
	border-radius: 36px;
	padding: clamp(28px, 5vw, 72px);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: clamp(28px, 4vw, 64px);
	align-items: center;
}
.sh-pourquoi__texte {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.sh-page .sh-pourquoi .sh-h2 {
	color: var(--sh-prune);
}
.sh-pourquoi__texte > p {
	text-wrap: pretty;
}
.sh-citation {
	background: var(--sh-creme);
	border-radius: 28px;
	padding: clamp(24px, 3.5vw, 44px);
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sh-citation::before {
	font-size: 40px;
	color: var(--sh-rose);
}
.sh-page .sh-citation p {
	font-family: var(--sh-titre);
	font-weight: var(--sh-titre-graisse);
	font-size: clamp(24px, 2.6vw, 34px);
	line-height: 1.3;
	color: var(--sh-prune);
	text-wrap: balance;
}

/* Diplômes : pastille « tampon » + intitulé */
.sh-diplome {
	background: #fff;
	border-radius: 28px;
	padding: 28px 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
}
.sh-diplome::before {
	width: 84px;
	height: 84px;
	box-sizing: border-box;
	border-radius: 999px;
	border: 4px dashed var(--sh-creme);
	outline: 3px solid var(--sh-diplome, var(--sh-saumon));
	background: var(--sh-diplome, var(--sh-saumon));
	color: var(--sh-prune);
	font-size: 38px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sh-diplome--saumon { --sh-diplome: var(--sh-saumon); }
.sh-diplome--jaune { --sh-diplome: var(--sh-jaune); }
.sh-diplome--prune { --sh-diplome: var(--sh-prune); }
.sh-diplome--rose { --sh-diplome: var(--sh-rose); border: 2px solid var(--sh-rose); }
.sh-diplome--prune::before,
.sh-diplome--rose::before { color: #fff; }
.sh-page .sh-diplome .sh-h3 {
	font-size: 17px;
}
.sh-page .sh-diplome__lieu {
	font-size: 15px;
	line-height: 1.4;
}
.sh-page .sh-diplome__lieu a {
	color: var(--sh-prune);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.sh-page .sh-diplome__lieu a::after {
	content: "\e092";
	font-family: "Phosphor-Bold" !important;
	font-weight: normal;
}

/* En dehors du web : photo carrée + légende.
   Tant qu'aucune image n'est choisie, un carré de couleur la remplace. */
.sh-grid--200 { --sh-col: 200px; }
.sh-loisir {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sh-loisir__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 24px;
}
/* Pas dans l'éditeur, qui affiche déjà son propre emplacement d'image */
body:not(.editor-styles-wrapper) .sh-loisir:not(:has(img[src]))::before {
	content: "";
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	background: var(--sh-loisir, var(--sh-saumon));
}
.sh-loisir--saumon { --sh-loisir: var(--sh-saumon); }
.sh-loisir--jaune { --sh-loisir: var(--sh-jaune); }
.sh-loisir--orange { --sh-loisir: var(--sh-orange); }
.sh-loisir--prune { --sh-loisir: var(--sh-prune); }
.sh-page .sh-loisir__titre {
	font-weight: 600;
	color: var(--sh-prune);
}

/* Section sur fond jaune (appel à l'action) : titre en prune, lisible sur le jaune */
.sh-page .sh-bg-jaune .sh-h2 {
	color: var(--sh-prune);
}

/* Bannière photo (bloc Couverture) : photo + voile aux couleurs de la charte */
.sh-page .sh-banniere {
	padding: 0;
	min-height: 0;
	color: #fff;
}
.sh-page .sh-banniere .wp-block-cover__inner-container {
	width: 100%;
	color: #fff;
}
.sh-page .sh-banniere .sh-h2 {
	color: #fff;
	font-size: clamp(30px, 4vw, 52px);
}

/* Témoignage client dans une carte réalisation */
.sh-page .sh-projet .sh-temoignage {
	margin: 0 4px !important;
	background: var(--sh-creme);
	border: 0;
	border-radius: 16px;
	padding: 18px 20px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	quotes: none;
}
.sh-temoignage::before {
	font-size: 28px;
	line-height: 1;
	color: var(--sh-rose);
}
.sh-page .sh-temoignage p {
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.55;
	font-style: normal;
	text-wrap: pretty;
}
.sh-page .sh-temoignage .sh-temoignage__auteur {
	font-weight: 700;
	font-size: 14px;
	color: var(--sh-prune);
}

/* Slider de réalisations : défilement horizontal + flèches (assets/js/slider.js)
   Pleine largeur d'écran : les cartes dépassent du conteneur à droite (et à gauche
   au défilement), la première reste alignée sur le titre grâce à --sh-bord. */
.sh-section:has(.sh-slider) {
	overflow-x: clip;
}
.sh-slider {
	--sh-bord: calc((100vw - min(100vw, var(--sh-max))) / 2 + var(--sh-gutter));
	box-sizing: border-box;
	width: 100vw;
	max-width: none;
	margin-left: calc(-1 * var(--sh-bord)) !important;
	margin-right: 0 !important;
	padding-inline: var(--sh-bord);
	scroll-padding-inline: var(--sh-bord);
	display: flex;
	gap: 24px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	padding-block: 6px 8px;
	margin-top: 32px;
	/* Les cartes qui dépassent du conteneur s'estompent vers les bords de l'écran */
	--sh-fondu: linear-gradient(to right,
		rgb(0 0 0 / .2) 0,
		#000 var(--sh-bord),
		#000 calc(100% - var(--sh-bord)),
		rgb(0 0 0 / .2) 100%);
	-webkit-mask-image: var(--sh-fondu);
	mask-image: var(--sh-fondu);
}
/* Dans l'éditeur, le slider reste dans le conteneur */
.editor-styles-wrapper .sh-slider {
	-webkit-mask-image: none;
	mask-image: none;
	width: auto;
	margin-left: 0 !important;
	padding-inline: 0;
	scroll-padding-inline: 0;
}
@media (pointer: fine) {
	.sh-slider { cursor: grab; }
}
.sh-slider.is-glisse {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}
.sh-slider::-webkit-scrollbar {
	display: none;
}
.sh-slider:focus-visible {
	outline: 3px solid var(--sh-jaune);
	outline-offset: 4px;
	border-radius: 24px;
}
.sh-slider > * {
	flex: 0 0 min(88%, 460px);
	margin: 0 !important;
	scroll-snap-align: start;
}
@media (min-width: 900px) {
	.sh-slider > * { flex-basis: calc((100% - 24px) / 2); }
}
.sh-slider__nav {
	display: flex;
	gap: 12px;
}
.sh-slider__nav[hidden] {
	display: none;
}
.sh-slider__btn {
	width: 48px;
	height: 48px;
	border: 0;
	border-radius: 50%;
	background: var(--sh-jaune);
	color: var(--sh-prune);
	font-family: "Phosphor-Bold" !important;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: transform .15s ease, opacity .15s ease;
}
.sh-slider__btn--prec::before { content: "\e058"; }
.sh-slider__btn--suiv::before { content: "\e06c"; }
.sh-slider__btn:hover:not(:disabled) {
	transform: scale(1.08);
}
.sh-slider__btn:focus-visible {
	outline: 3px solid #fff;
	outline-offset: 3px;
}
.sh-slider__btn:disabled {
	opacity: .4;
	cursor: default;
}
@media (prefers-reduced-motion: reduce) {
	.sh-slider__btn { transition: none; }
}
/* Bouton « Visiter le site » toujours en bas de la carte */
.sh-page .sh-projet > .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 4px;
}

/* Offre de lancement (fin automatique : THEME_SH_FIN_LANCEMENT dans functions.php) */
.sh-page .sh-prix s {
	font-weight: 600;
	font-size: 18px;
	opacity: .6;
	text-decoration-thickness: 2px;
	margin-right: 4px;
}
.sh-page .sh-offre-lancement {
	align-self: center;
	margin: 8px auto 0 !important;
	max-width: 44em;
	background: var(--sh-jaune);
	color: var(--sh-encre);
	border-radius: 20px;
	padding: 12px 20px;
	font-size: 15px;
	line-height: 1.5;
	text-wrap: balance;
}
.sh-offre-lancement::before {
	color: var(--sh-prune);
	font-size: 18px;
	vertical-align: -3px;
	margin-right: 8px;
}
.sh-page .sh-prix__suite {
	margin-top: -8px !important;
	font-size: 14px;
	font-weight: 500;
	color: var(--sh-encre);
}
/* Dans l'éditeur, on repère ce qui n'apparaît que pendant / après l'offre */
.editor-styles-wrapper .sh-lancement,
.editor-styles-wrapper .sh-apres-lancement {
	outline: 2px dashed var(--sh-orange);
	outline-offset: 4px;
}
.editor-styles-wrapper .sh-lancement::after,
.editor-styles-wrapper .sh-apres-lancement::after {
	display: block;
	font: 600 11px/1.4 var(--sh-texte);
	color: var(--sh-orange);
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-top: 4px;
}
.editor-styles-wrapper .sh-lancement::after { content: "Visible jusqu'au 30 novembre 2026"; }
.editor-styles-wrapper .sh-apres-lancement::after { content: "Visible à partir du 1er décembre 2026"; }

/* Bandeau d'offre de la section Formules : flotte doucement */
@keyframes sh-flotte {
	0%, 100% { transform: translateY(0) rotate(-.4deg); }
	50% { transform: translateY(-6px) rotate(.4deg); }
}
.sh-page .sh-offre-lancement {
	box-shadow: 0 10px 24px rgba(244, 140, 75, .25);
	animation: sh-flotte 4s ease-in-out infinite;
}

/* Barre d'offre au-dessus du header : fond pleine largeur, texte dans le conteneur */
.sh-bandeau-promo {
	background: var(--sh-jaune);
	color: var(--sh-encre);
	font-family: var(--sh-texte);
	margin: 0 !important;
}
.sh-bandeau-promo__texte {
	box-sizing: border-box;
	max-width: var(--sh-max);
	margin: 0 auto !important;
	padding: 8px var(--sh-gutter);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}
.sh-bandeau-promo__texte::before {
	color: var(--sh-prune);
	font-size: 16px;
	vertical-align: -2px;
	margin-right: 8px;
}
.sh-bandeau-promo__texte a {
	color: var(--sh-prune);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	margin-left: 4px;
	white-space: nowrap;
}
.sh-bandeau-promo__texte a:hover {
	color: var(--sh-rose);
}

@media (prefers-reduced-motion: reduce) {
	.sh-page .sh-offre-lancement { animation: none; }
}