/*
 * Klarity — ce que theme.json ne sait pas exprimer.
 *
 * Tout ce qui est couleur, typographie, espacement et style de bloc est déclaré
 * dans theme.json et n'a rien à faire ici. Cette feuille couvre uniquement ce
 * qu'un theme.json ne sait pas décrire : les grilles auto-ajustables, l'aperçu
 * du produit, les transitions, les sections épinglées et les onglets.
 *
 * ADAPTATION AUX ÉCRANS
 * ---------------------
 * Deux points de rupture seulement, et pour des raisons distinctes :
 *   640px — au-dessous, une grille de quatre indicateurs devient illisible ;
 *   901px — au-dessous, on cesse d'épingler les sections (voir klarity-pin.js).
 * Partout ailleurs on préfère `auto-fit`, `min()` et `clamp()`, qui s'ajustent
 * en continu au lieu de sauter d'un palier à l'autre.
 */

/* ── Grille de cartes ───────────────────────────────────────────────────────
   Les colonnes de Gutenberg passent en pleine largeur sous 782px, ce qui casse
   les grilles à 3 ou 4 éléments. Une grille auto-fit se réorganise en continu
   sans point de rupture arbitraire. */
.klarity-grid {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.klarity-card {
	transition: transform 200ms ease, box-shadow 200ms ease;
}

.klarity-card:hover,
.klarity-card:focus-within {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(26, 18, 8, 0.1);
}

/* Pastille d'icône. Le SVG hérite de la couleur du conteneur via
   currentColor, ce qui évite de dupliquer la teinte dans chaque motif. */
.klarity-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	margin-bottom: 1rem;
}

.klarity-icon svg {
	width: 22px;
	height: 22px;
	stroke: currentColor;
	stroke-width: 1.7;
	fill: none;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* ── Aperçu du produit ──────────────────────────────────────────────────────
   Reproduit le tableau de bord de app.klarity.me. Construit en CSS plutôt
   qu'en capture d'écran : reste net sur tout écran, se traduit, et ne se périme
   pas au prochain changement d'interface. */
.klarity-shot {
	max-width: 880px;
	margin-inline: auto;
	overflow: hidden;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
	text-align: start;
}

.klarity-shot__bar {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 0.9rem;
	background: #ede6d8;
	border-bottom: 1px solid #dfd4c2;
}

.klarity-shot__dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #c9bda8;
}

.klarity-shot__url {
	margin-inline-start: 0.6rem;
	font-size: 0.72rem;
	color: #7a6552;
}

.klarity-kpis {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: #eee6d8;
}

.klarity-kpi {
	padding: 1.1rem 0.9rem;
	background: #fff;
}

.klarity-kpi__label {
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #7a6552;
}

.klarity-kpi__value {
	margin-top: 0.3rem;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1;
	color: #1a1208;
}

.klarity-kpi__value--ok { color: #2d7a3a; }
.klarity-kpi__value--warn { color: #c0392b; }

.klarity-row {
	display: flex;
	gap: 0.8rem;
	align-items: center;
	padding: 0.75rem 1rem;
	border-top: 1px solid #f2ebdd;
}

.klarity-row__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	font-size: 0.72rem;
	font-weight: 700;
	color: #fff;
	background: linear-gradient(135deg, #8b4513, #c9922a);
}

.klarity-row__main { flex: 1; min-width: 0; }
.klarity-row__title { font-size: 0.86rem; font-weight: 600; color: #1a1208; }
.klarity-row__meta { font-size: 0.74rem; color: #7a6552; }

.klarity-row__amount {
	white-space: nowrap;
	font-size: 0.86rem;
	font-weight: 700;
	color: #2d7a3a;
}

.klarity-row__amount--late { color: #c0392b; }

/* ── Pastilles pays ── */
.klarity-flags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	justify-content: center;
}

.klarity-flag {
	padding: 0.3rem 0.6rem;
	border: 1px solid rgba(245, 240, 232, 0.14);
	border-radius: 999px;
	background: rgba(245, 240, 232, 0.1);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	color: #cfe0d4;
}

/* ── FAQ ──
   Le marqueur natif de <summary> n'est pas stylable de façon fiable entre
   navigateurs : on le retire et on dessine un « + » qui pivote. */
.klarity-faq details {
	border-bottom: 1px solid #ede6d8;
}

.klarity-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px; /* cible tactile */
	cursor: pointer;
	list-style: none;
}

.klarity-faq summary::-webkit-details-marker { display: none; }

.klarity-faq summary::after {
	content: "+";
	flex: none;
	font-size: 1.3rem;
	color: #8b4513;
	transition: transform 200ms ease;
}

.klarity-faq details[open] summary::after { transform: rotate(45deg); }

/* ── Étapes numérotées ── */
.klarity-step__num {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 0.9rem;
	border-radius: 50%;
	background: #1e3a2a;
	color: #f5f0e8;
	font-family: Outfit, system-ui, sans-serif;
	font-weight: 600;
}

/* ── Sur-titre de section ── */
.klarity-eyebrow {
	margin: 0 0 0.6rem;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #8b4513;
}

/* ── Bandeau de preuves du héros ──
   Trois mentions vérifiables, alignées sous les boutons. Enroulables plutôt que
   réduites : sur un téléphone elles passent l'une sous l'autre, chacune restant
   lisible, là où une grille à trois colonnes les aurait écrasées. */
.klarity-badges {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.klarity-badge {
	display: grid;
	gap: 0.1rem;
	padding: 0.6rem 0.9rem;
	border: 1px solid rgba(245, 240, 232, 0.16);
	border-radius: 10px;
	background: rgba(22, 41, 30, 0.5);
	text-align: start;
}

.klarity-badge__value {
	font-family: Outfit, system-ui, sans-serif;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.25;
	color: #f5f0e8;
}

.klarity-badge__note {
	font-size: 0.74rem;
	line-height: 1.3;
	/* Éclairci par rapport au vert d'origine : sur le fond sombre du héros, la
	   teinte d'accompagnement tombait sous le seuil de contraste AA. */
	color: #b6cbbc;
}

/* ── Sections épinglées ─────────────────────────────────────────────────────
   La section réserve une hauteur d'écran pour le panneau visible, plus une
   marge de défilement par panneau supplémentaire : c'est cette marge que
   klarity-pin.js convertit en index.

   Sans la classe `--js` (JavaScript absent, petit écran, animations réduites)
   rien de tout cela ne s'applique : les panneaux restent une pile ordinaire. */
.klarity-pin__panel {
	padding-block: 1.75rem;
	border-top: 1px solid #e6dcc8;
}

.klarity-pin__nav { display: none; }

.klarity-pin--js {
	/* Réglé par le motif via --klarity-steps. 55vh par panneau donne le même
	   rythme que les sections épinglées auxquelles on se compare : assez long
	   pour qu'on lise, assez court pour qu'on ne se croie pas bloqué. */
	min-height: calc(100vh + (var(--klarity-steps, 6) - 1) * 55vh);
}

.klarity-pin--js .klarity-pin__stage {
	position: sticky;
	top: 0;
	display: grid;
	align-content: center;
	min-height: 100vh;
	padding-block: 3rem;
}

.klarity-pin--js .klarity-pin__body {
	display: grid;
	grid-template-columns: minmax(210px, 280px) 1fr;
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;
}

.klarity-pin--js .klarity-pin__nav {
	display: grid;
	gap: 0.15rem;
	margin: 0;
	padding: 0;
	list-style: none;
	border-inline-start: 1px solid #e6dcc8;
}

.klarity-pin--js .klarity-pin__tab {
	display: flex;
	align-items: baseline;
	gap: 0.8rem;
	width: 100%;
	padding: 0.7rem 0 0.7rem 1.1rem;
	margin-inline-start: -1px;
	border: 0;
	border-inline-start: 2px solid transparent;
	background: none;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 0.98rem;
	text-align: start;
	color: #7a6552;
	cursor: pointer;
	transition: color 200ms ease, border-color 200ms ease;
}

/* Le numéro se distingue du libellé par la taille et non par une teinte plus
   claire : un gris assez pâle pour se démarquer tomberait sous le seuil de
   contraste, et un numéro d'étape porte du sens. */
.klarity-pin--js .klarity-pin__tab-num {
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: #7a6552;
}

.klarity-pin--js .klarity-pin__tab[aria-current] {
	border-inline-start-color: #8b4513;
	font-weight: 600;
	color: #1e3a2a;
}

.klarity-pin--js .klarity-pin__tab[aria-current] .klarity-pin__tab-num {
	color: #8b4513;
}

/* Les panneaux se superposent dans une seule cellule de grille : la section
   prend la hauteur du plus grand, sans positionnement absolu ni saut de mise en
   page au changement de panneau. */
.klarity-pin--js .klarity-pin__panels {
	display: grid;
}

.klarity-pin--js .klarity-pin__panel {
	grid-area: 1 / 1;
	padding-block: 0;
	border-top: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 320ms ease, transform 320ms ease, visibility 320ms;
}

.klarity-pin--js .klarity-pin__panel[data-active] {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.klarity-pin--js .klarity-pin__panel-num { display: none; }

.klarity-pin__panel-num {
	font-family: Outfit, system-ui, sans-serif;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: #7a6552;
}

.klarity-pin__panel-body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
}

/* ── Carte de preuve ────────────────────────────────────────────────────────
   Chaque panneau montre l'interface plutôt que de la décrire. Construite en
   CSS, donc nette sur tout écran, traduite avec le reste, et jamais périmée. */
.klarity-proof {
	overflow: hidden;
	border: 1px solid #e6dcc8;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(26, 18, 8, 0.07);
}

.klarity-proof__head {
	padding: 0.7rem 1rem;
	border-bottom: 1px solid #f2ebdd;
	background: #faf6ee;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #7a6552;
}

.klarity-proof__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.7rem 1rem;
	border-top: 1px solid #f6f1e6;
	font-size: 0.88rem;
}

.klarity-proof__row:first-of-type { border-top: 0; }
.klarity-proof__label { flex: 1; min-width: 0; color: #4a3728; }
.klarity-proof__label strong { display: block; font-weight: 600; color: #1a1208; }

.klarity-proof__chip {
	flex: none;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: #e8f0ea;
	font-size: 0.74rem;
	font-weight: 600;
	white-space: nowrap;
	color: #1e3a2a;
}

.klarity-proof__chip--warn { background: #fbeae7; color: #a5301f; }
.klarity-proof__chip--mute { background: #f1ece1; color: #7a6552; }

/* ── Onglets cliquables ─────────────────────────────────────────────────────
   Même vocabulaire visuel que les sections épinglées, mais pilotés au clic :
   ces contenus sont consultés à la demande, pas parcourus dans l'ordre. */
.klarity-tabs {
	display: grid;
	gap: clamp(1.25rem, 3vw, 2.5rem);
	align-items: start;
}

/* La liste des onglets ne prend que la largeur de ses libellés : à parts égales
   avec le panneau, elle laissait des boutons démesurés et du vide sous la
   liste. Sous ce palier, liste et panneau s'empilent. */
@media (min-width: 720px) {
	.klarity-tabs {
		grid-template-columns: minmax(190px, 250px) 1fr;
	}
}

.klarity-tabs__list {
	display: grid;
	gap: 0.3rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.klarity-tabs__tab {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid #e6dcc8;
	border-radius: 10px;
	background: #fff;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 0.96rem;
	text-align: start;
	color: #4a3728;
	cursor: pointer;
	transition: background 180ms ease, border-color 180ms ease, color 180ms ease;
}

.klarity-tabs__tab[aria-selected="true"] {
	border-color: #1e3a2a;
	background: #1e3a2a;
	font-weight: 600;
	color: #f5f0e8;
}

.klarity-tabs__panel { display: none; }
.klarity-tabs__panel[data-active] { display: block; }

/* Sans JavaScript, aucun onglet n'est sélectionné : on montre tout plutôt que
   rien, quitte à perdre la mise en onglets. */
.klarity-tabs:not(.klarity-tabs--js) .klarity-tabs__panel { display: block; }
.klarity-tabs:not(.klarity-tabs--js) .klarity-tabs__list { display: none; }

/* ── Contenu à remplacer ───────────────────────────────────────────────────
   Les sections « preuve sociale » et « tarifs » attendent des chiffres et des
   citations qui n'existent pas encore. Plutôt qu'un texte plausible qu'on
   oublierait de remplacer — et qui tromperait le visiteur en attendant — le
   contenu provisoire se signale : trait discontinu, fond neutre, étiquette.
   Le jour où les vraies données arrivent, on retire l'attribut et la marque
   disparaît avec. */
.klarity-todo {
	position: relative;
	border-style: dashed !important;
	background: #fbf8f2 !important;
}

.klarity-todo::before {
	content: attr(data-todo);
	position: absolute;
	top: 0;
	inset-inline-end: 0;
	padding: 0.2rem 0.55rem;
	border-end-start-radius: 8px;
	background: #f1ece1;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: #7a6552;
}

/* ── Compteur de preuve sociale ── */
.klarity-counter {
	text-align: center;
}

.klarity-counter__value {
	display: block;
	font-family: Outfit, system-ui, sans-serif;
	font-size: clamp(2.2rem, 6vw, 3.4rem);
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #1e3a2a;
}

.klarity-counter__label {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.95rem;
	line-height: 1.6;
	color: #4a3728;
}

/* ── Citations ── */
.klarity-quote {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.6rem;
	border: 1px solid #e6dcc8;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(26, 18, 8, 0.06);
}

.klarity-quote blockquote {
	margin: 0;
	font-size: 0.98rem;
	line-height: 1.75;
	color: #4a3728;
}

.klarity-quote figcaption {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	margin-top: auto;
	font-size: 0.86rem;
	color: #7a6552;
}

.klarity-quote__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #ede6d8;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 0.78rem;
	font-weight: 700;
	/* Assombri par rapport au « texte discret » de la palette : sur ce fond
	   ivoire, cette teinte plafonnait à 4.44:1, juste sous le seuil AA. */
	color: #6e5a48;
}

.klarity-quote__who strong {
	display: block;
	font-weight: 600;
	color: #1a1208;
}

/* ── Formules tarifaires ────────────────────────────────────────────────────
   Les colonnes se rangent d'elles-mêmes : trois formules côte à côte sur un
   écran large, une seule colonne dès que 260px par formule ne suffisent plus.
   La formule mise en avant se distingue par sa bordure, pas par une hauteur
   différente — un décalage vertical casserait l'alignement des prix. */
.klarity-plans {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	align-items: stretch;
}

.klarity-plan {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 1.75rem;
	border: 1px solid #e6dcc8;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 4px 16px rgba(26, 18, 8, 0.06);
}

.klarity-plan--featured {
	border-color: #1e3a2a;
	border-width: 2px;
}

.klarity-plan__name {
	font-family: Outfit, system-ui, sans-serif;
	font-size: 1.1rem;
	font-weight: 600;
	color: #1e3a2a;
}

.klarity-plan__price {
	font-family: Outfit, system-ui, sans-serif;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: -0.02em;
	color: #1a1208;
}

.klarity-plan__price span {
	font-size: 0.86rem;
	font-weight: 400;
	letter-spacing: 0;
	color: #7a6552;
}

.klarity-plan__note {
	font-size: 0.9rem;
	line-height: 1.6;
	color: #4a3728;
}

.klarity-plan ul {
	display: grid;
	gap: 0.45rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	color: #4a3728;
}

.klarity-plan li {
	display: flex;
	gap: 0.6rem;
	align-items: flex-start;
}

.klarity-plan__cta {
	margin-top: auto;
	padding-top: 0.5rem;
}

/* ── Profils ── */
.klarity-profile {
	border: 1px solid #e6dcc8;
	border-radius: 12px;
	background: #fff;
	margin-bottom: 0.75rem;
}

.klarity-profile summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding: 1.1rem 1.35rem;
	cursor: pointer;
	list-style: none;
	font-family: Outfit, system-ui, sans-serif;
	font-size: 1.02rem;
	font-weight: 600;
	color: #1e3a2a;
}

.klarity-profile summary::-webkit-details-marker { display: none; }

.klarity-profile summary::after {
	content: "+";
	flex: none;
	font-size: 1.3rem;
	font-weight: 400;
	color: #8b4513;
	transition: transform 200ms ease;
}

.klarity-profile[open] summary::after { transform: rotate(45deg); }

.klarity-profile__body {
	padding: 0 1.35rem 1.35rem;
	font-size: 0.95rem;
	line-height: 1.7;
	color: #4a3728;
}

/* ── Accessibilité ──
   Les transitions ci-dessus sont décoratives : on les coupe pour qui demande à
   réduire les animations. L'épinglage lui-même est déjà désactivé côté
   JavaScript dans ce cas, la pile de panneaux reprend sa place. */
@media (prefers-reduced-motion: reduce) {
	.klarity-card,
	.klarity-faq summary::after,
	.klarity-profile summary::after,
	.klarity-tabs__tab,
	.klarity-pin__tab,
	.klarity-pin__panel {
		transition: none;
	}

	.klarity-card:hover,
	.klarity-card:focus-within {
		transform: none;
	}
}

/* Un seul palier vertical : au-dessous, quatre indicateurs côte à côte
   deviennent illisibles. */
@media (max-width: 640px) {
	.klarity-kpis { grid-template-columns: repeat(2, 1fr); }
	.klarity-kpi { padding: 0.9rem 0.75rem; }
	.klarity-kpi__value { font-size: 1.3rem; }
	.klarity-proof__row { flex-wrap: wrap; }
}