/*
 * Magello : styles des variations de blocs et des composants du design system.
 * Les couleurs, tailles et espacements viennent des préréglages de theme.json.
 */

/* ---------- Texte ---------- */

mark.has-inline-color {
	background: transparent;
}

:where(.wp-site-blocks) :focus-visible {
	outline: 2px solid var(--wp--preset--color--violet-600);
	outline-offset: 2px;
}

/* Surtitre : petites capitales violettes au-dessus d'un titre */
.is-style-surtitre {
	color: var(--wp--preset--color--violet-600);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	line-height: 1.3;
}

/* Pastille : source ou format, en grille */
.is-style-pastille {
	background: var(--wp--preset--color--violet-100);
	color: var(--wp--preset--color--violet-800);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	border-radius: var(--wp--custom--radius--chip);
	padding: 10px 12px;
	margin: 0;
}

/* Badge : promesse, en pilule */
.is-style-badge {
	background: var(--wp--preset--color--violet-100);
	color: var(--wp--preset--color--violet-800);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: 1.3;
	border-radius: var(--wp--custom--radius--pill);
	padding: 8px 14px;
	margin: 0;
}

/* ---------- Groupes ---------- */

.is-style-carte {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(28px, 4vw, 40px);
}

.is-style-carte-violette {
	background: var(--wp--preset--color--violet-100);
	border: 1px solid var(--wp--preset--color--violet-border);
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(28px, 4vw, 40px);
}

.is-style-encadre {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--chip);
	padding: 20px 24px;
}

.is-style-bande-degrade {
	background: var(--wp--preset--color--violet-600);
	color: var(--wp--preset--color--violet-150);
	border-radius: var(--wp--custom--radius--card);
	padding: clamp(48px, 7vw, 72px) clamp(24px, 4vw, 40px);
}

.is-style-bande-degrade h1,
.is-style-bande-degrade h2,
.is-style-bande-degrade h3,
.is-style-bande-degrade h4,
.is-style-bande-degrade h5,
.is-style-bande-degrade h6 {
	color: var(--wp--preset--color--card);
}

.is-style-bande-degrade .is-style-surtitre,
.is-style-bande-degrade .magello-infos {
	color: var(--wp--preset--color--violet-200);
}

.is-style-bande-degrade a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--card);
}

body .is-style-bande-degrade .wp-block-button__link {
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--violet-800);
	box-shadow: none;
}

/* ---------- Boutons ---------- */

/* Bouton secondaire (style « Contour » de WordPress) */
body .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: var(--wp--preset--color--card);
}

body .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--violet-600);
	border: 1px solid var(--wp--preset--color--violet-border);
	box-shadow: none;
	font-weight: 700;
	padding: 15px 27px;
}

.magello-bouton-compact .wp-block-button__link {
	padding: 12px 20px;
	font-size: 15px;
	font-weight: 700;
	box-shadow: none;
}

/* ---------- En-tête et pied de page ---------- */

.magello-entete {
	background: var(--wp--preset--color--card);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 16px;
	padding-bottom: 16px;
}

/* Liens du menu principal : gris 700, violet au survol.
   WordPress force la couleur héritée sur ces liens, d'où le sélecteur renforcé. */
.magello-entete .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
	color: var(--wp--preset--color--ink-soft);
}

.magello-entete .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:hover,
.magello-entete .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--violet-600);
}

.magello-entete .wp-block-image img {
	display: block;
}

.magello-lien-connexion a {
	color: var(--wp--preset--color--ink);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
}

.magello-pied {
	background: var(--wp--preset--color--card);
	border-top: 1px solid var(--wp--preset--color--line);
}

.magello-titre-pied {
	color: var(--wp--preset--color--muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.magello-liens-pied a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.magello-liens-pied a:hover {
	color: var(--wp--preset--color--violet-600);
}

.magello-bas-pied {
	border-top: 1px solid var(--wp--preset--color--line);
}

/* ---------- Sections ---------- */

.magello-bande-blanche {
	background: var(--wp--preset--color--card);
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.magello-infos {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
}

/* Ligne de chiffres : chiffre et libellé à la même taille, séparateurs fins */
.magello-chiffres > p {
	margin: 0;
	padding: 4px 24px;
	border-left: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink-soft);
	font-size: 18px;
	line-height: 1.4;
}

.magello-chiffres > p:first-child {
	border-left: 0;
}

.magello-chiffres strong {
	color: var(--wp--preset--color--ink);
}

/* Flux CODA : sources, tuile CODA, logiciel comptable */
.magello-tuile-coda {
	width: 136px;
	height: 136px;
	border-radius: var(--wp--custom--radius--tile);
	background: var(--wp--preset--gradient--marque);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.magello-tuile-coda p {
	margin: 0;
	color: var(--wp--preset--color--card);
	font-size: 32px;
	font-weight: 800;
	letter-spacing: -1px;
}

.magello-tuile-logiciel {
	border: 2px solid var(--wp--preset--color--violet-600);
	border-radius: var(--wp--custom--radius--tile);
	padding: 22px 24px;
	text-align: center;
	width: 100%;
	max-width: 320px;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

.magello-source {
	background: var(--wp--preset--color--violet-100);
	border-radius: var(--wp--custom--radius--chip);
	padding: 16px 18px;
	flex: 1 1 160px;
}

/* Tuiles de logiciels comptables (à remplacer par les logos) */
.magello-tuile-logo {
	min-height: 88px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
}

.magello-tuile-logo p {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--wp--preset--color--ink-soft);
}

/* Étapes numérotées */
.magello-numero {
	width: 48px;
	height: 48px;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--violet-100);
	color: var(--wp--preset--color--violet-600);
	font-size: 20px;
	font-weight: 800;
	line-height: 48px;
	text-align: center;
	margin: 0;
}

/* Fiche (En bref, fiche banque) : libellé à gauche, valeur à droite */
.magello-fiche > .wp-block-group {
	border-top: 1px solid var(--wp--preset--color--violet-border);
	padding-top: 14px;
	padding-bottom: 14px;
}

.is-style-carte .magello-fiche > .wp-block-group {
	border-top-color: var(--wp--preset--color--line);
}

.magello-fiche p {
	margin: 0;
	font-size: 15px;
}

.magello-fiche p:last-child {
	font-weight: 700;
	text-align: right;
}

/* ---------- Questions fréquentes ---------- */

.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 20px;
	padding-bottom: 20px;
}

.wp-block-details summary {
	cursor: pointer;
	font-size: 18px;
	font-weight: 700;
}

.wp-block-details > :not(summary) {
	color: var(--wp--preset--color--ink-soft);
}

/* ---------- Aide ---------- */

.wp-block-post-terms.magello-categories a {
	display: inline-block;
	background: var(--wp--preset--color--violet-100);
	color: var(--wp--preset--color--violet-800);
	border-radius: var(--wp--custom--radius--pill);
	padding: 6px 12px;
	margin: 0 4px 6px 0;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
}

.wp-block-post-terms.magello-categories .wp-block-post-terms__separator,
.wp-block-post-terms.magello-etiquettes .wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms.magello-etiquettes a {
	display: inline-block;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--pill);
	padding: 5px 12px;
	margin: 0 4px 6px 0;
	font-size: 13px;
	color: var(--wp--preset--color--muted);
	text-decoration: none;
}

.magello-lien-carte {
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	padding: 18px 22px;
}

.magello-lien-carte .wp-block-post-title {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
}

/* Champs de recherche : fond blanc et bordure gris 300, visibles sur le fond gris comme dans les cartes. */
.wp-block-search__input {
	border: 1px solid #D1D5DB;
	border-radius: var(--wp--custom--radius--chip);
	padding: 12px 14px;
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-family: inherit;
	font-size: 15px;
}

.wp-block-search__input::placeholder {
	color: #6B7280;
	opacity: 1;
}

.wp-block-search__input:focus {
	border-color: var(--wp--preset--color--violet-600);
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
	outline: 2px solid transparent;
}

.wp-block-search .wp-block-search__button {
	box-shadow: none;
	padding: 12px 18px;
	font-size: 15px;
	margin-left: 8px;
}

/* Variation « Grande » du bloc Recherche : barre centrée, plus haute, avec loupe et ombre légère. */
.wp-block-search.is-style-grande {
	max-width: 640px;
	margin-inline: auto;
}

.wp-block-search.is-style-grande .wp-block-search__input {
	padding: 16px 20px 16px 52px;
	font-size: var(--wp--preset--font-size--medium);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 18px center;
	background-size: 20px 20px;
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 10px 30px rgba(17, 24, 39, 0.08);
}

.wp-block-search.is-style-grande .wp-block-search__input:focus {
	box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15), 0 10px 30px rgba(17, 24, 39, 0.08);
}

.wp-block-search.is-style-grande .wp-block-search__button {
	padding: 16px 24px;
	font-size: var(--wp--preset--font-size--medium);
	margin-left: 10px;
}

/* Sur mobile, le bouton passe sous le champ pour laisser toute la largeur au texte. */
@media (max-width: 600px) {
	.wp-block-search.is-style-grande .wp-block-search__inside-wrapper {
		flex-wrap: wrap;
		gap: 10px;
	}

	.wp-block-search.is-style-grande .wp-block-search__input {
		flex-basis: 100%;
	}

	.wp-block-search.is-style-grande .wp-block-search__button {
		flex-basis: 100%;
		margin-left: 0;
	}
}

.wp-block-categories {
	list-style: none;
	padding-left: 0;
}

.wp-block-categories li {
	margin-bottom: 10px;
}

.wp-block-categories a {
	color: var(--wp--preset--color--ink-soft);
	text-decoration: none;
}

.wp-block-categories a:hover {
	color: var(--wp--preset--color--violet-600);
}

/* Contenu d'article : liens soulignés pour rester repérables */
.entry-content a:where(:not(.wp-element-button)) {
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Grilles ----------
 * Les grilles s'adaptent au nombre d'éléments (pas de colonne vide en fin de ligne). */

body .wp-block-group.magello-chiffres,
body .wp-block-group.magello-grille-etapes,
body .wp-block-group.magello-grille-logos,
body .wp-block-group.magello-pastilles {
	container-type: normal;
}

body .wp-block-group.magello-chiffres {
	grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

body .wp-block-group.magello-grille-etapes {
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

body .wp-block-group.magello-grille-logos {
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
}

body .wp-block-group.magello-pastilles {
	grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
}

/* Cartes de même hauteur côte à côte */
.magello-cartes-egales > .wp-block-column > .wp-block-group {
	height: 100%;
	box-sizing: border-box;
}

.magello-tuile-coda,
.magello-tuile-logiciel {
	align-self: center;
}

/* Le rembourrage des cartes reste dans leur largeur (pas de débordement sur mobile) */
.is-style-carte,
.is-style-carte-violette,
.is-style-encadre,
.is-style-bande-degrade,
.magello-lien-carte,
.magello-source,
.magello-tuile-logo {
	box-sizing: border-box;
}

.wp-block-search__input {
	min-width: 0;
	width: 100%;
}

aside.wp-block-group > * {
	min-width: 0;
}

/* Alignement du texte (au cas où les styles communs de WordPress ne sont pas chargés) */
.has-text-align-center { text-align: center; }
.has-text-align-left { text-align: left; }
.has-text-align-right { text-align: right; }

/* Images : pas de marge latérale héritée du navigateur */
figure.wp-block-image:not(.aligncenter) {
	margin-left: 0;
	margin-right: 0;
}

/* Articles d'aide : intertitres plus sobres que sur les pages commerciales */
.single .wp-block-post-content h2 {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.5px;
	margin-top: 1.6em;
}

.single .wp-block-post-content h3 {
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0;
}

.magello-source {
	align-self: stretch;
}

/* ---------- Images du contenu ----------
 * Rectangles aux coins arrondis, comme les cartes : jamais d'ovale ni de pilule.
 * Style « Sans cadre » pour les logos ou les images détourées. */

.wp-block-post-content .wp-block-image:not(.is-style-sans-cadre) img,
.wp-block-post-content .wp-block-media-text__media img,
.wp-block-post-content .wp-block-cover {
	border-radius: var(--wp--custom--radius--card);
}

.wp-block-post-content .wp-block-image:not(.is-style-sans-cadre) img {
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--card);
	box-sizing: border-box;
}

/* Le style « Arrondi » de WordPress devient lui aussi un rectangle arrondi */
body .wp-block-image.is-style-rounded img,
body .wp-block-image .is-style-rounded img {
	border-radius: var(--wp--custom--radius--card);
}

body .wp-block-image.is-style-sans-cadre img {
	border: 0;
	border-radius: 0;
	background: none;
}

/* Encadrés placés dans un article d'aide (déjà dans une carte) : arrondi des éléments internes */
.single .wp-block-post-content .is-style-carte-violette,
.single .wp-block-post-content .is-style-carte {
	border-radius: var(--wp--custom--radius--chip);
}

/* Flèches du flux CODA : jamais de cadre, même sur une ancienne copie de la section */
.wp-block-post-content .wp-block-image img[src$="fleche-bas.svg"] {
	border: 0;
	border-radius: 0;
	background: none;
}

.magello-bas-pied a {
	color: var(--wp--preset--color--muted);
}

/* Pas d'espace entre l'en-tête, le contenu et le pied de page
 * (WordPress y applique sinon l'écart entre blocs de 24 px). */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* Fenêtre de réservation Google Agenda : la page de Google n'a pas de fond,
   on lui donne un fond blanc pour qu'elle ne laisse pas voir la page derrière. */
iframe[src*="calendar.google.com/calendar/appointments"] {
	background-color: #fff;
}

/* ---------- Page Tarifs ---------- */

/* Liste à coches : coche violette, ou violet clair sur fond violet */
.magello-liste-coches {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.magello-liste-coches li {
	position: relative;
	padding-left: 28px;
	line-height: 1.4;
}

.magello-liste-coches li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	width: 18px;
	height: 18px;
	background-color: var(--wp--preset--color--violet-600);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.has-violet-600-background-color .magello-liste-coches li::before {
	background-color: var(--wp--preset--color--violet-300);
}

/* Liste sur plusieurs colonnes */
.magello-liste-coches.magello-liste-colonnes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 12px 32px;
}

/* Quatre paliers : deux par ligne sur tablette */
@media (min-width: 782px) and (max-width: 1100px) {
	.wp-block-columns.magello-paliers {
		flex-wrap: wrap !important;
	}

	.wp-block-columns.magello-paliers > .wp-block-column {
		flex-basis: calc(50% - 10px) !important;
		flex-grow: 0;
	}
}

.magello-paliers .is-style-carte {
	padding: 24px;
}

.magello-paliers .is-style-carte > :last-child {
	margin-top: auto;
}

/* Tableau des packs de crédits */
.wp-block-table.magello-tableau-prix {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}

.magello-tableau-prix table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wp--preset--color--card);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--card);
	overflow: hidden;
	font-size: var(--wp--preset--font-size--medium);
}

.magello-tableau-prix thead {
	border: 0;
}

.magello-tableau-prix th,
.magello-tableau-prix td {
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 14px 24px;
}

.magello-tableau-prix th:not(.has-text-align-right) {
	text-align: left;
}

.magello-tableau-prix th {
	background: #F9FAFB;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
}

.magello-tableau-prix tbody tr:last-child td {
	border-bottom: 0;
	background: var(--wp--preset--color--violet-600);
	color: var(--wp--preset--color--card);
	font-weight: 700;
}

.magello-tableau-prix mark {
	display: inline-block;
	background: var(--wp--preset--color--violet-100) !important;
	color: var(--wp--preset--color--violet-600);
	border-radius: var(--wp--custom--radius--chip);
	padding: 3px 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.magello-tableau-prix th,
	.magello-tableau-prix td {
		padding: 12px 12px;
	}

	.magello-tableau-prix table {
		font-size: 15px;
	}
}

.magello-tableau-prix tbody tr:last-child mark {
	background: var(--wp--preset--color--card) !important;
}

/* Exemple de calcul (ticket) */
.magello-ticket {
	box-shadow: 0 16px 40px rgba(17, 24, 39, 0.08);
}

.wp-block-table.magello-tableau-ticket {
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0;
}

.magello-tableau-ticket table {
	width: 100%;
	border-collapse: collapse;
	border-top: 1px dashed var(--wp--preset--color--violet-200);
}

.magello-tableau-ticket td {
	border: 0;
	padding: 6px 0;
}

.magello-tableau-ticket tr:first-child td {
	padding-top: 14px;
}

.magello-tableau-ticket tr:nth-last-child(2) td {
	padding-bottom: 14px;
}

.magello-tableau-ticket tr:last-child td {
	border-top: 1px dashed var(--wp--preset--color--violet-200);
	padding-top: 14px;
	font-size: var(--wp--preset--font-size--large);
}

/* Bouton « Contour » dans une bande violette : transparent, texte blanc */
body .is-style-bande-degrade .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: transparent;
	color: var(--wp--preset--color--card);
	border-color: var(--wp--preset--color--violet-300);
}

/* ---------- Pages commerciales : sections pleine largeur ---------- */

/* Les sections pleine largeur se suivent sans laisser voir le fond gris entre elles */
.page-template-page-commerciale .wp-block-post-content > .alignfull {
	margin-block-start: 0;
}

/* ---------- Page d'accueil ---------- */

/* Hero violet : bouton « Contour » transparent, capture avec ombre */
body .magello-hero-violet .wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
	background: transparent;
	color: var(--wp--preset--color--card);
	border-color: var(--wp--preset--color--violet-300);
}

.magello-hero-violet .wp-block-image img {
	box-shadow: 0 24px 60px rgba(17, 24, 39, 0.25);
}

/* Note Google */
.is-style-carte.magello-note {
	padding: 16px 24px;
}

.magello-note p {
	margin: 0;
	line-height: 1.2;
}

/* Témoignages : auteur en bas de la carte, initiales dans une pastille ronde */
.magello-temoignage {
	padding: 28px;
}

.magello-temoignage > .magello-auteur {
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.magello-initiales {
	flex: none;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0 !important;
	border-radius: var(--wp--custom--radius--pill);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

/* Cartes des deux services : illustration à gauche, sur fond violet clair */
.magello-carte-service {
	overflow: hidden;
	box-sizing: border-box;
}

.magello-carte-service > .wp-block-columns {
	margin: 0;
	height: 100%;
}

.magello-carte-service .wp-block-image img {
	display: block;
	width: 100%;
	max-width: min(280px, 100%);
	height: auto;
	margin: 0 auto;
}

/* Icônes carrées des avantages et pastille « Compatible » */
.magello-icone,
.magello-pastille-coche {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--violet-600);
}

.magello-icone {
	width: 44px;
	height: 44px;
	border-radius: var(--wp--custom--radius--chip);
}

.magello-pastille-coche {
	width: 60px;
	height: 60px;
	border-radius: var(--wp--custom--radius--pill);
}

/* Logos des logiciels comptables */
.magello-logos .wp-block-image {
	margin: 0;
}

.magello-carte-service > .wp-block-columns > .wp-block-column:first-child {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.magello-carte-service .is-style-pastille {
	width: fit-content;
}

/* ---------- Bouton de rendez-vous Google Agenda ---------- */

/* Le script de Google crée son propre bouton : on lui donne le style des boutons du site.
   Entourer le code de Google d'un <div class="magello-rdv-google">. */
.magello-rdv-google button {
	background-color: var(--wp--preset--color--violet-600) !important;
	color: var(--wp--preset--color--card) !important;
	border: 0 !important;
	border-radius: var(--wp--custom--radius--button) !important;
	box-shadow: var(--wp--preset--shadow--cta) !important;
	padding: 16px 28px !important;
	height: auto !important;
	font-family: var(--wp--preset--font-family--inter) !important;
	font-size: var(--wp--preset--font-size--medium) !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	cursor: pointer;
}

.magello-rdv-google button:focus-visible {
	outline: 2px solid var(--wp--preset--color--violet-600) !important;
	outline-offset: 2px;
}

/* ---------- Centre d'aide (page /aide/) ---------- */

/* Carte entièrement cliquable : le lien du titre couvre toute la carte. */
.magello-carte-lien {
	position: relative;
	padding: 24px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.magello-carte-lien a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.magello-carte-lien:hover,
.magello-carte-lien:focus-within {
	border-color: var(--wp--preset--color--violet-border);
	box-shadow: 0 6px 20px rgba(79, 70, 229, 0.08);
}

.magello-carte-lien a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

.magello-carte-lien:hover a {
	color: var(--wp--preset--color--violet-600);
}

.magello-carte-lien a:focus-visible {
	outline: none;
}

.magello-carte-lien:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--violet-600);
	outline-offset: 2px;
}

/* Icône claire des sujets */
.magello-icone-claire {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	background: var(--wp--preset--color--violet-100);
	border-radius: var(--wp--custom--radius--chip);
}

/* Tuiles des logiciels comptables */
.magello-tuile-sujet {
	padding: 20px 12px;
	text-align: center;
}

.magello-tuile-sujet .wp-block-image {
	margin: 0;
}

/* Grille des articles */
.magello-grille-articles > li > .is-style-carte {
	height: 100%;
	box-sizing: border-box;
	padding: 24px;
}

.magello-grille-articles .wp-block-post-title {
	margin: 0;
	line-height: 1.35;
}

.magello-grille-articles .wp-block-post-terms.magello-categories {
	margin: 0;
}

.magello-pied-article {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid var(--wp--preset--color--line);
}

.magello-pied-article .wp-block-post-date {
	margin: 0;
}

.wp-block-read-more {
	color: var(--wp--preset--color--violet-600);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	text-decoration: none;
}

.wp-block-read-more:hover {
	color: var(--wp--preset--color--violet-800);
}

/* Pagination des articles */
.magello-pagination {
	gap: 8px;
}

.magello-pagination .page-numbers,
.magello-pagination .wp-block-query-pagination-previous,
.magello-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius--chip);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-weight: 600;
	text-decoration: none;
}

.magello-pagination .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.magello-pagination .page-numbers.dots {
	border: 0;
	background: none;
	min-width: auto;
	padding: 0 4px;
}

.magello-pagination a.page-numbers:hover,
.magello-pagination .wp-block-query-pagination-previous:hover,
.magello-pagination .wp-block-query-pagination-next:hover {
	border-color: var(--wp--preset--color--violet-border);
	color: var(--wp--preset--color--violet-600);
}

.magello-pagination .page-numbers.current {
	background: var(--wp--preset--color--violet-600);
	border-color: var(--wp--preset--color--violet-600);
	color: var(--wp--preset--color--card);
}

/* Liens des cartes d'articles et de sujets : pas de soulignement (ce ne sont pas des liens dans un texte) */
.entry-content .magello-articles a:where(:not(.wp-element-button)),
.entry-content .magello-carte-lien a:where(:not(.wp-element-button)) {
	text-decoration: none;
}

/* ---------- Page Contact ---------- */

/* Lien violet dans une carte cliquable (ex. « Consultez nos articles et tutoriels → ») */
.magello-carte-lien .has-violet-600-color a {
	color: inherit;
}

/* Carte du formulaire */
.magello-formulaire.is-style-carte {
	box-shadow: 0 1px 2px rgba(17, 24, 39, 0.05), 0 10px 30px rgba(17, 24, 39, 0.06);
}

/* Formulaire WPForms aux couleurs du site, uniquement dans un groupe .magello-formulaire.
   Les variables sont posées sur le <form> : WPForms redéfinit les tailles sur le conteneur #wpforms-ID. */
.magello-formulaire .wpforms-container {
	margin: 12px 0 0;
}

.magello-formulaire .wpforms-container .wpforms-form {
	--wpforms-field-border-radius: var(--wp--custom--radius--chip);
	--wpforms-field-border-color: #D1D5DB;
	--wpforms-field-text-color: var(--wp--preset--color--ink);
	--wpforms-field-size-input-height: 48px;
	--wpforms-field-size-font-size: 16px;
	--wpforms-label-color: var(--wp--preset--color--ink);
	--wpforms-label-sublabel-color: var(--wp--preset--color--muted);
	--wpforms-label-size-font-size: 15px;
	--wpforms-button-background-color: var(--wp--preset--color--violet-600);
	--wpforms-button-border-color: var(--wp--preset--color--violet-600);
	--wpforms-button-text-color: #FFFFFF;
	--wpforms-button-border-radius: var(--wp--custom--radius--button);
	--wpforms-button-size-height: 54px;
	--wpforms-button-size-padding-h: 28px;
	--wpforms-button-size-font-size: 17px;
	--wpforms-button-size-margin-top: 8px;
	--wpforms-page-break-color: var(--wp--preset--color--violet-600);
	font-family: inherit;
}

.magello-formulaire .wpforms-container input.wpforms-field-medium,
.magello-formulaire .wpforms-container select.wpforms-field-medium,
.magello-formulaire .wpforms-container .wpforms-field-row.wpforms-field-medium {
	max-width: 100%;
}

.magello-formulaire .wpforms-container textarea {
	height: 160px;
}

.magello-formulaire .wpforms-container .wpforms-field-label {
	font-weight: 600;
}

.magello-formulaire .wpforms-container .wpforms-required-label {
	color: var(--wp--preset--color--violet-600);
}

.magello-formulaire div.wpforms-container-full .wpforms-form button[type="submit"] {
	font-family: inherit;
	font-weight: 800;
	box-shadow: var(--wp--preset--shadow--cta);
	height: auto;
	min-height: var(--wpforms-button-size-height);
	padding-top: 12px;
	padding-bottom: 12px;
	line-height: 1.25;
}

/* Sur mobile, le bouton d'envoi prend toute la largeur (un texte long reste sur une ligne) */
@media (max-width: 600px) {
	.magello-formulaire div.wpforms-container-full .wpforms-form button[type="submit"] {
		width: 100%;
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* Bouton de rendez-vous Google dans une bande violette : bouton blanc pleine largeur */
.is-style-bande-degrade .magello-rdv-google button {
	background-color: var(--wp--preset--color--card) !important;
	color: var(--wp--preset--color--violet-800) !important;
	box-shadow: none !important;
	width: 100%;
}

.is-style-bande-degrade .magello-rdv-google button:focus-visible {
	outline-color: var(--wp--preset--color--card) !important;
}

/* Boutons empilés en mode « étirer » : chaque bouton prend toute la largeur */
.wp-block-buttons.is-vertical.is-content-justification-stretch > .wp-block-button > .wp-block-button__link {
	width: 100%;
	box-sizing: border-box;
}

/* Liens dans un badge ou une pastille (ex. sommaire de la page Fonctionnalités) : pas de soulignement */
.entry-content .is-style-badge a,
.entry-content .is-style-pastille a {
	color: inherit;
	text-decoration: none;
}

.entry-content .is-style-badge a:hover,
.entry-content .is-style-pastille a:hover {
	color: var(--wp--preset--color--violet-600);
}