/**
 * Affichage public des avis clients — 6SB.
 *
 * Quatre traitements possibles, tous construits sur les mêmes briques :
 *   .sixsb-v-editorial  une citation qui porte, deux satellites
 *   .sixsb-v-sombre     bandeau marine, rupture de rythme dans la page
 *   .sixsb-v-synthese   bandeau marine chiffré : note, pôles, une phrase
 *   .sixsb-v-mosaique   trois cartes décalées, sans bordure
 *
 * Les deux bandeaux marine partagent leurs couleurs via « .sixsb-marine » ;
 * seule leur composition diffère.
 *
 * Les couleurs héritent des variables globales Astra quand elles existent ;
 * les valeurs de repli sont celles du thème 6SB en production.
 */

.sixsb-bloc {
	--sixsb-bleu: var( --ast-global-color-0, #0078ff );
	--sixsb-marine: var( --ast-global-color-1, #1a2b5a );
	--sixsb-texte: var( --ast-global-color-3, #2c2c2c );
	--sixsb-bleu-pale: var( --ast-global-color-4, #f9f6fe );
	--sixsb-gris-fond: var( --ast-global-color-6, #f2f5f7 );
	--sixsb-jaune: var( --ast-global-color-7, #ffcd57 );
	--sixsb-gris-txt: #6b7280;
	--sixsb-trait: #e3e8ef;

	box-sizing: border-box;
	color: var( --sixsb-texte );
	padding: 96px 0;
	position: relative;
}

.sixsb-bloc *,
.sixsb-bloc *::before,
.sixsb-bloc *::after {
	box-sizing: border-box;
}

.sixsb-wrap {
	margin: 0 auto;
	max-width: 1180px;
	padding: 0 24px;
	position: relative;
	z-index: 1;
}

/* ---------- En-tête ---------- */

.sixsb-tete {
	align-items: flex-end;
	display: flex;
	gap: 48px;
	justify-content: space-between;
	margin: 0 0 56px;
}

.sixsb-tete-txt {
	max-width: 680px;
}

.sixsb-kicker {
	color: var( --sixsb-bleu );
	display: block;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
	margin: 0 0 14px;
	text-transform: uppercase;
}

.sixsb-bloc h2 {
	color: var( --sixsb-marine );
	font-size: clamp( 30px, 3.4vw, 46px );
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.12;
	margin: 0;
}

.sixsb-chapo {
	color: var( --sixsb-gris-txt );
	font-size: 17px;
	line-height: 1.6;
	margin: 16px 0 0;
	max-width: 560px;
}

/* ---------- Score ---------- */

.sixsb-score {
	align-items: center;
	display: flex;
	flex: 0 0 auto;
	gap: 16px;
	padding-bottom: 4px;
}

.sixsb-score-n {
	color: var( --sixsb-marine );
	font-family: inherit;
	font-size: 54px;
	font-weight: 700;
	letter-spacing: -.02em;
	line-height: 1;
}

.sixsb-score-n span {
	color: var( --sixsb-gris-txt );
	font-size: 20px;
	font-weight: 600;
}

.sixsb-score-meta {
	color: var( --sixsb-gris-txt );
	font-size: 13px;
	line-height: 1.45;
	margin-top: 6px;
}

.sixsb-score-meta b {
	color: var( --sixsb-texte );
	display: block;
	font-weight: 700;
}

/* ---------- Étoiles ---------- */

.sixsb-stars {
	display: inline-flex;
	gap: 2px;
	line-height: 1;
	white-space: nowrap;
}

.sixsb-stars .sixsb-star {
	color: #d7dce3;
}

.sixsb-stars .sixsb-star.is-on {
	color: var( --sixsb-jaune );
}

.sixsb-stars.is-sm {
	font-size: 15px;
}

.sixsb-stars.is-md {
	font-size: 21px;
}

.sixsb-stars.is-lg {
	font-size: 24px;
}

/* ---------- Citations ---------- */

.sixsb-bloc blockquote {
	background: none;
	border: 0;
	margin: 0;
	padding: 0;
	quotes: none;
}

.sixsb-bloc q {
	font-style: normal;
	quotes: none;
}

.sixsb-bloc q::before,
.sixsb-bloc q::after {
	content: "";
}

.sixsb-resultat {
	color: var( --sixsb-texte );
	font-size: 15px;
	line-height: 1.6;
	margin: 22px 0 0;
	padding-left: 16px;
	position: relative;
}

.sixsb-resultat::before {
	background: var( --sixsb-bleu );
	border-radius: 2px;
	bottom: 2px;
	content: "";
	left: 0;
	position: absolute;
	top: 2px;
	width: 3px;
}

.sixsb-resultat b {
	color: var( --sixsb-marine );
}

.sixsb-preuve {
	color: var( --sixsb-gris-txt );
	font-size: 13px;
	letter-spacing: .02em;
	margin: 18px 0 0;
}

/* ---------- Signature ---------- */

.sixsb-sign {
	align-items: center;
	display: flex;
	gap: 14px;
}

.sixsb-av {
	align-items: center;
	background: var( --sixsb-marine );
	border-radius: 50%;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	font-size: 15px;
	font-weight: 700;
	height: 46px;
	justify-content: center;
	letter-spacing: .02em;
	overflow: hidden;
	width: 46px;
}

.sixsb-av.is-lg {
	font-size: 20px;
	height: 62px;
	width: 62px;
}

.sixsb-av img {
	border-radius: 50%;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.sixsb-who {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sixsb-who b {
	color: var( --sixsb-marine );
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}

.sixsb-who > span {
	color: var( --sixsb-gris-txt );
	font-size: 13px;
	line-height: 1.4;
}

.sixsb-site {
	color: var( --sixsb-bleu );
	font-size: 12px;
	text-decoration: none;
	word-break: break-all;
}

.sixsb-site:hover {
	text-decoration: underline;
}

/* ---------- Pied de bloc ---------- */

.sixsb-pied {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	justify-content: space-between;
	margin: 56px 0 0;
}

.sixsb-lien-tout {
	border-bottom: 1px solid currentColor;
	color: var( --sixsb-bleu );
	display: inline-block;
	font-size: 15px;
	font-weight: 600;
	padding-bottom: 2px;
	text-decoration: none;
	transition: transform .25s ease, opacity .25s ease;
}

.sixsb-lien-tout:hover {
	opacity: .78;
	transform: translateX( 4px );
}

.sixsb-bloc a:focus-visible {
	border-radius: 3px;
	outline: 2px solid var( --sixsb-bleu );
	outline-offset: 3px;
}

.sixsb-marine a:focus-visible {
	outline-color: #7fb6ff;
}

/* La mention doit tenir sur une seule ligne : coupée en deux, elle prend
   l'importance d'un paragraphe alors que c'est une note de bas de bloc. Le
   pied est déjà un flex qui la pousse à droite, il suffit de ne pas la brider.
   Sous 1024 px la largeur manque de toute façon, et elle se replie. */
.sixsb-mention {
	color: var( --sixsb-gris-txt );
	font-size: 13px;
	line-height: 1.5;
	text-align: right;
}

@media ( min-width: 1025px ) {
	.sixsb-mention {
		white-space: nowrap;
	}
}

.sixsb-mention b {
	color: var( --sixsb-texte );
	font-weight: 600;
}

/* =========================================================
   A · Éditorial — une citation qui porte
   ========================================================= */

.sixsb-v-editorial .sixsb-grille {
	border-top: 1px solid var( --sixsb-trait );
	display: grid;
	gap: 0;
	grid-template-columns: 1.35fr 1fr;
	padding-top: 52px;
}

/* Deux avis : ni principal ni satellite, deux colonnes de même largeur. */
.sixsb-v-editorial .sixsb-grille.is-duo {
	grid-template-columns: 1fr 1fr;
}

.sixsb-v-editorial .sixsb-pair {
	display: flex;
	flex-direction: column;
	position: relative;
}

.sixsb-v-editorial .sixsb-pair:first-child {
	border-right: 1px solid var( --sixsb-trait );
	padding: 0 48px 0 0;
}

.sixsb-v-editorial .sixsb-pair:last-child {
	padding: 0 0 0 48px;
}

.sixsb-v-editorial .sixsb-pair::before {
	color: var( --sixsb-bleu );
	content: "\201C";
	font-size: 110px;
	font-weight: 700;
	left: -12px;
	line-height: 1;
	opacity: .08;
	position: absolute;
	top: -34px;
}

.sixsb-v-editorial .sixsb-pair:last-child::before {
	left: 36px;
}

.sixsb-v-editorial .sixsb-pair q {
	color: var( --sixsb-marine );
	display: block;
	font-size: clamp( 19px, 1.7vw, 24px );
	font-weight: 500;
	letter-spacing: -.005em;
	line-height: 1.5;
	position: relative;
}

/* La signature descend en bas de colonne : les deux se retrouvent alignées,
   quelle que soit la longueur des deux citations. */
.sixsb-v-editorial .sixsb-pair .sixsb-principal-bas {
	margin: auto 0 0;
	padding-top: 34px;
}

/* Un seul avis : plus de colonne satellite, la citation occupe la largeur. */
.sixsb-v-editorial .sixsb-grille.is-solo {
	grid-template-columns: 1fr;
}

.sixsb-v-editorial .sixsb-principal {
	border-right: 1px solid var( --sixsb-trait );
	padding: 0 56px 0 0;
	position: relative;
}

.sixsb-v-editorial .is-solo .sixsb-principal {
	border-right: 0;
	margin: 0 auto;
	max-width: 880px;
	padding: 0;
}

.sixsb-v-editorial .is-solo .sixsb-principal q {
	font-size: clamp( 23px, 2.5vw, 32px );
}

.sixsb-v-editorial .is-solo .sixsb-principal::before {
	left: -46px;
}

.sixsb-v-editorial .sixsb-principal::before {
	color: var( --sixsb-bleu );
	content: "\201C";
	font-size: 150px;
	font-weight: 700;
	left: -14px;
	line-height: 1;
	opacity: .09;
	position: absolute;
	top: -46px;
}

.sixsb-v-editorial .sixsb-principal q {
	color: var( --sixsb-marine );
	display: block;
	font-size: clamp( 21px, 2.1vw, 28px );
	font-weight: 500;
	letter-spacing: -.005em;
	line-height: 1.45;
	position: relative;
}

.sixsb-v-editorial .sixsb-principal-bas {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	justify-content: space-between;
	margin: 34px 0 0;
}

.sixsb-v-editorial .sixsb-satellite {
	display: flex;
	flex-direction: column;
	gap: 26px;
	padding: 4px 0 0 56px;
}

.sixsb-v-editorial .sixsb-satellite q {
	color: var( --sixsb-texte );
	display: block;
	font-size: 16px;
	line-height: 1.65;
	margin: 0 0 16px;
}

.sixsb-v-editorial .sixsb-filet {
	background: var( --sixsb-trait );
	height: 1px;
	margin: 0;
	width: 100%;
}

/* =========================================================
   B · Bandeau sombre — rupture de rythme
   ========================================================= */

.sixsb-marine {
	background: var( --sixsb-marine );
	color: rgba( 255, 255, 255, .82 );
	overflow: hidden;
}

/* Hors pleine largeur, le bandeau reste une « carte » posée dans la page. */
.sixsb-marine:not( .alignfull ) {
	border-radius: 22px;
}

.sixsb-marine::after {
	background: radial-gradient( circle, rgba( 0, 120, 255, .38 ) 0%, rgba( 0, 120, 255, 0 ) 68% );
	content: "";
	height: 760px;
	pointer-events: none;
	position: absolute;
	right: -180px;
	top: -280px;
	width: 760px;
	z-index: 0;
}

.sixsb-marine h2,
.sixsb-marine .sixsb-score-n,
.sixsb-marine .sixsb-who b,
.sixsb-marine .sixsb-resultat b {
	color: #fff;
}

.sixsb-marine .sixsb-kicker {
	color: #7fb6ff;
}

.sixsb-marine .sixsb-chapo,
.sixsb-marine .sixsb-score-n span,
.sixsb-marine .sixsb-score-meta,
.sixsb-marine .sixsb-who > span,
.sixsb-marine .sixsb-mention {
	color: rgba( 255, 255, 255, .62 );
}

.sixsb-marine .sixsb-score-meta b,
.sixsb-marine .sixsb-mention b {
	color: rgba( 255, 255, 255, .92 );
}

.sixsb-marine .sixsb-star {
	color: rgba( 255, 255, 255, .22 );
}

.sixsb-marine .sixsb-av {
	background: rgba( 255, 255, 255, .12 );
}

.sixsb-marine .sixsb-lien-tout {
	color: #7fb6ff;
}

.sixsb-v-sombre .sixsb-trio {
	border-top: 1px solid rgba( 255, 255, 255, .14 );
	display: grid;
	gap: 0;
	padding-top: 48px;
}

.sixsb-v-sombre .sixsb-trio.is-c1 {
	grid-template-columns: 1fr;
}

.sixsb-v-sombre .sixsb-trio.is-c2 {
	grid-template-columns: repeat( 2, 1fr );
}

.sixsb-v-sombre .sixsb-trio.is-c3 {
	grid-template-columns: repeat( 3, 1fr );
}

.sixsb-v-sombre .sixsb-carte {
	border-left: 1px solid rgba( 255, 255, 255, .14 );
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 0 40px;
}

/* Premier de chaque rangée : pas de filet à gauche. */
.sixsb-v-sombre .is-c2 .sixsb-carte:nth-child( 2n + 1 ),
.sixsb-v-sombre .is-c3 .sixsb-carte:nth-child( 3n + 1 ) {
	border-left: 0;
	padding-left: 0;
}

/* Dernier de chaque rangée : pas de marge perdue à droite. */
.sixsb-v-sombre .is-c2 .sixsb-carte:nth-child( 2n ),
.sixsb-v-sombre .is-c3 .sixsb-carte:nth-child( 3n ) {
	padding-right: 0;
}

/* Rangées suivantes (4 ou 5 avis) : filet horizontal de séparation. */
.sixsb-v-sombre .is-c2 .sixsb-carte:nth-child( n + 3 ),
.sixsb-v-sombre .is-c3 .sixsb-carte:nth-child( n + 4 ) {
	border-top: 1px solid rgba( 255, 255, 255, .14 );
	margin-top: 44px;
	padding-top: 44px;
}

/* Avis unique : la parole prend toute la largeur du bandeau. */
.sixsb-v-sombre .is-c1 .sixsb-carte {
	border-left: 0;
	margin: 0 auto;
	max-width: 840px;
	padding: 0;
}

.sixsb-v-sombre .is-c1 .sixsb-carte q {
	font-size: clamp( 20px, 2.2vw, 26px );
	line-height: 1.5;
}

.sixsb-v-sombre .sixsb-carte q {
	color: #fff;
	display: block;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.6;
}

.sixsb-v-sombre .sixsb-carte-haut {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.sixsb-v-sombre .sixsb-tag {
	background: rgba( 255, 255, 255, .1 );
	color: rgba( 255, 255, 255, .78 );
}

.sixsb-v-sombre .sixsb-second q {
	color: rgba( 255, 255, 255, .7 );
	font-size: 15px;
}

.sixsb-v-sombre .sixsb-resultat {
	color: rgba( 255, 255, 255, .8 );
}

.sixsb-v-sombre .sixsb-sign {
	margin-top: auto;
	padding-top: 4px;
}

/* =========================================================
   B bis · Synthèse — la note d'abord, une phrase ensuite
   =========================================================

   Pensé pour la page d'accueil : le visiteur la parcourt, il ne la lit pas.
   Trois colonnes de gauche à droite — la note globale en très grand, le détail
   par pôle sous forme de jauges, puis une seule phrase signée. Les chiffres
   donnent l'ordre de grandeur en une seconde ; la phrase empêche le bloc de
   n'être qu'un tableau de bord, parce qu'une moyenne que personne ne peut
   recouper ne convainc pas toute seule.
   ========================================================= */

.sixsb-v-synthese .sixsb-synth {
	align-items: center;
	border-top: 1px solid rgba( 255, 255, 255, .14 );
	display: grid;
	gap: 0;
	grid-template-columns: minmax( 210px, 0.9fr ) minmax( 260px, 1.1fr ) minmax( 280px, 1.5fr );
	padding-top: 52px;
}

.sixsb-v-synthese .sixsb-synth > * {
	border-left: 1px solid rgba( 255, 255, 255, .14 );
	padding: 0 44px;
}

.sixsb-v-synthese .sixsb-synth > *:first-child {
	border-left: 0;
	padding-left: 0;
}

.sixsb-v-synthese .sixsb-synth > *:last-child {
	padding-right: 0;
}

/* ---------- La note globale ---------- */

.sixsb-v-synthese .sixsb-synth-note {
	text-align: left;
}

.sixsb-v-synthese .sixsb-grand-n {
	color: #fff;
	font-family: "Plus Jakarta Sans", var( --ast-body-font-family, inherit ), sans-serif;
	font-size: clamp( 58px, 6.4vw, 84px );
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: .92;
}

.sixsb-v-synthese .sixsb-grand-n span {
	color: rgba( 255, 255, 255, .42 );
	font-size: .34em;
	font-weight: 700;
	letter-spacing: -.01em;
	margin-left: 2px;
}

.sixsb-v-synthese .sixsb-synth-note .sixsb-stars {
	margin-top: 10px;
}

.sixsb-v-synthese .sixsb-synth-count {
	color: rgba( 255, 255, 255, .62 );
	font-size: 13px;
	line-height: 1.5;
	margin: 10px 0 0;
}

.sixsb-v-synthese .sixsb-synth-count b {
	color: rgba( 255, 255, 255, .92 );
	display: block;
	font-size: 14px;
}

/* ---------- Le détail par pôle ---------- */

.sixsb-v-synthese .sixsb-poles {
	display: flex;
	flex-direction: column;
	gap: 18px;
	list-style: none;
	margin: 0;
	padding: 0 44px;
}

.sixsb-v-synthese .sixsb-pole {
	margin: 0;
}

.sixsb-v-synthese .sixsb-pole-haut {
	align-items: baseline;
	display: flex;
	gap: 12px;
	justify-content: space-between;
	margin-bottom: 7px;
}

.sixsb-v-synthese .sixsb-pole-lib {
	color: rgba( 255, 255, 255, .72 );
	font-size: 14px;
	line-height: 1.35;
}

.sixsb-v-synthese .sixsb-pole-n {
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	white-space: nowrap;
}

.sixsb-v-synthese .sixsb-pole-n span {
	color: rgba( 255, 255, 255, .42 );
	font-weight: 400;
}

/* La jauge est décorative : la note chiffrée est déjà lue à côté, et le
   libellé porte l'information pour les lecteurs d'écran. */
.sixsb-v-synthese .sixsb-jauge {
	background: rgba( 255, 255, 255, .13 );
	border-radius: 2px;
	display: block;
	height: 4px;
	overflow: hidden;
}

.sixsb-v-synthese .sixsb-jauge i {
	background: var( --sixsb-jaune );
	border-radius: 2px;
	display: block;
	height: 100%;
}

/* ---------- La phrase ---------- */

.sixsb-v-synthese .sixsb-synth-mot {
	margin: 0;
}

/* Tous les témoignages occupent la même case de la grille : la colonne prend
   la hauteur du plus long et ne saute donc pas d'un témoignage à l'autre.
   Sans JavaScript, seul le premier porte « is-actif » et reste affiché. */
.sixsb-v-synthese .sixsb-mot-scene {
	display: grid;
	position: relative;
}

.sixsb-v-synthese .sixsb-mot {
	grid-area: 1 / 1;
	margin: 0;
}

.sixsb-v-synthese .is-rotatif .sixsb-mot {
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
}

.sixsb-v-synthese .is-rotatif .sixsb-mot.is-actif {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.sixsb-v-synthese .sixsb-synth-mot blockquote {
	position: relative;
}

.sixsb-v-synthese .sixsb-synth-mot q {
	color: #fff;
	display: block;
	font-family: "Plus Jakarta Sans", var( --ast-body-font-family, inherit ), sans-serif;
	font-size: clamp( 19px, 1.9vw, 24px );
	font-weight: 500;
	letter-spacing: -.01em;
	line-height: 1.45;
}

.sixsb-v-synthese .sixsb-synth-mot .sixsb-sign {
	margin-top: 20px;
}

/* ---------- La rotation des témoignages ---------- */

/* Le témoignage entrant est dévoilé à travers une étoile qui grandit depuis le
   centre. Elle démarre exactement à la taille des cinq étoiles de notation de
   la colonne de gauche — environ vingt pixels — et c'est voulu : le mouvement
   part du signe que le visiteur vient de regarder, et il le reconnaît avant de
   comprendre que c'est une transition.

   L'étoile s'arrête au rayon exact qui inscrit le cadre entier dans sa figure,
   six cent cinquante pixels : à cet instant précis le témoignage tient tout
   entier en son centre, dernière lettre comprise. Elle déborde donc largement
   du bloc — c'est la condition pour que le texte y soit contenu, les branches
   d'une étoile laissant quatre creux là où un disque n'en laisserait aucun —
   mais elle ne va pas un pixel plus loin : au-delà, l'animation continuerait
   sans plus rien dévoiler, et ce temps mort se paierait par une fin précipitée.

   C'est un pur agrandissement : la figure garde exactement la même orientation
   et les mêmes proportions du début à la fin, seule sa taille change. D'où les
   sommets exprimés en pixels à partir du centre plutôt qu'en pourcentages —
   un pourcentage se mesure sur la largeur pour l'axe X et sur la hauteur pour
   l'axe Y, si bien que dans un cadre plus large que haut l'étoile serait
   étirée en largeur, et cet étirement, en évoluant avec la taille, se lirait
   comme une rotation. En pixels elle reste régulière quelle que soit la
   colonne.

   Le rayon progresse par paliers géométriques réguliers — un facteur constant
   de 1,66 toutes les huitièmes de l'animation. À l'œil, l'agrandissement paraît
   alors de vitesse constante du début à la fin, alors qu'un rayon qui croîtrait
   régulièrement donnerait un départ mou puis un éclair. Le rythme reste
   « linear » : la courbe est déjà dans les étapes.

   Aucune opacité ici : le dévoilement est affaire de découpe seule. */
@keyframes sixsb-etoile-ouvre {
	from {
		clip-path: polygon( calc( 50% + 0px ) calc( 50% - 11px ), calc( 50% + 2.47px ) calc( 50% - 3.4px ), calc( 50% + 10.46px ) calc( 50% - 3.4px ), calc( 50% + 4px ) calc( 50% + 1.3px ), calc( 50% + 6.47px ) calc( 50% + 8.9px ), calc( 50% + 0px ) calc( 50% + 4.2px ), calc( 50% - 6.47px ) calc( 50% + 8.9px ), calc( 50% - 4px ) calc( 50% + 1.3px ), calc( 50% - 10.46px ) calc( 50% - 3.4px ), calc( 50% - 2.47px ) calc( 50% - 3.4px ) );
	}
	12.5% {
		clip-path: polygon( calc( 50% + 0px ) calc( 50% - 18px ), calc( 50% + 4.04px ) calc( 50% - 5.56px ), calc( 50% + 17.12px ) calc( 50% - 5.56px ), calc( 50% + 6.54px ) calc( 50% + 2.12px ), calc( 50% + 10.58px ) calc( 50% + 14.56px ), calc( 50% + 0px ) calc( 50% + 6.88px ), calc( 50% - 10.58px ) calc( 50% + 14.56px ), calc( 50% - 6.54px ) calc( 50% + 2.12px ), calc( 50% - 17.12px ) calc( 50% - 5.56px ), calc( 50% - 4.04px ) calc( 50% - 5.56px ) );
	}
	25% {
		clip-path: polygon( calc( 50% + 0px ) calc( 50% - 30px ), calc( 50% + 6.74px ) calc( 50% - 9.27px ), calc( 50% + 28.53px ) calc( 50% - 9.27px ), calc( 50% + 10.9px ) calc( 50% + 3.54px ), calc( 50% + 17.63px ) calc( 50% + 24.27px ), calc( 50% + 0px ) calc( 50% + 11.46px ), calc( 50% - 17.63px ) calc( 50% + 24.27px ), calc( 50% - 10.9px ) calc( 50% + 3.54px ), calc( 50% - 28.53px ) calc( 50% - 9.27px ), calc( 50% - 6.74px ) calc( 50% - 9.27px ) );
	}
	37.5% {
		clip-path: polygon( calc( 50% + 0px ) calc( 50% - 51px ), calc( 50% + 11.45px ) calc( 50% - 15.76px ), calc( 50% + 48.5px ) calc( 50% - 15.76px ), calc( 50% + 18.53px ) calc( 50% + 6.02px ), calc( 50% + 29.98px ) calc( 50% + 41.26px ), calc( 50% + 0px ) calc( 50% + 19.48px ), calc( 50% - 29.98px ) calc( 50% + 41.26px ), calc( 50% - 18.53px ) calc( 50% + 6.02px ), calc( 50% - 48.5px ) calc( 50% - 15.76px ), calc( 50% - 11.45px ) calc( 50% - 15.76px ) );
	}
	50% {
		clip-path: polygon( calc( 50% + 0px ) calc( 50% - 85px ), calc( 50% + 19.08px ) calc( 50% - 26.27px ), calc( 50% + 80.84px ) calc( 50% - 26.27px ), calc( 50% + 30.88px ) calc( 50% + 10.03px ), calc( 50% + 49.96px ) calc( 50% + 68.77px ), calc( 50% + 0px ) calc( 50% + 32.47px ), calc( 50% - 49.96px ) calc( 50% + 68.77px ), calc( 50% - 30.88px ) calc( 50% + 10.03px ), calc( 50% - 80.84px ) calc( 50% - 26.27px ), calc( 50% - 19.08px ) calc( 50% - 26.27px ) );
	}
	62.5% {
		clip-path: polygon( calc( 50% + 0px ) calc( 50% - 141px ), calc( 50% + 31.66px ) calc( 50% - 43.57px ), calc( 50% + 134.1px ) calc( 50% - 43.57px ), calc( 50% + 51.22px ) calc( 50% + 16.64px ), calc( 50% + 82.88px ) calc( 50% + 114.07px ), calc( 50% + 0px ) calc( 50% + 53.86px ), calc( 50% - 82.88px ) calc( 50% + 114.07px ), calc( 50% - 51.22px ) calc( 50% + 16.64px ), calc( 50% - 134.1px ) calc( 50% - 43.57px ), calc( 50% - 31.66px ) calc( 50% - 43.57px ) );
	}
	75% {
		clip-path: polygon( calc( 50% + 0px ) calc( 50% - 234px ), calc( 50% + 52.54px ) calc( 50% - 72.31px ), calc( 50% + 222.55px ) calc( 50% - 72.31px ), calc( 50% + 85.01px ) calc( 50% + 27.62px ), calc( 50% + 137.54px ) calc( 50% + 189.31px ), calc( 50% + 0px ) calc( 50% + 89.38px ), calc( 50% - 137.54px ) calc( 50% + 189.31px ), calc( 50% - 85.01px ) calc( 50% + 27.62px ), calc( 50% - 222.55px ) calc( 50% - 72.31px ), calc( 50% - 52.54px ) calc( 50% - 72.31px ) );
	}
	87.5% {
		clip-path: polygon( calc( 50% + 0px ) calc( 50% - 390px ), calc( 50% + 87.56px ) calc( 50% - 120.52px ), calc( 50% + 370.91px ) calc( 50% - 120.52px ), calc( 50% + 141.68px ) calc( 50% + 46.03px ), calc( 50% + 229.24px ) calc( 50% + 315.52px ), calc( 50% + 0px ) calc( 50% + 148.97px ), calc( 50% - 229.24px ) calc( 50% + 315.52px ), calc( 50% - 141.68px ) calc( 50% + 46.03px ), calc( 50% - 370.91px ) calc( 50% - 120.52px ), calc( 50% - 87.56px ) calc( 50% - 120.52px ) );
	}
	to {
		clip-path: polygon( calc( 50% + 0px ) calc( 50% - 650px ), calc( 50% + 145.94px ) calc( 50% - 200.86px ), calc( 50% + 618.19px ) calc( 50% - 200.86px ), calc( 50% + 236.13px ) calc( 50% + 76.72px ), calc( 50% + 382.06px ) calc( 50% + 525.86px ), calc( 50% + 0px ) calc( 50% + 248.28px ), calc( 50% - 382.06px ) calc( 50% + 525.86px ), calc( 50% - 236.13px ) calc( 50% + 76.72px ), calc( 50% - 618.19px ) calc( 50% - 200.86px ), calc( 50% - 145.94px ) calc( 50% - 200.86px ) );
	}
}

.sixsb-v-synthese .sixsb-mot.is-entre {
	animation: sixsb-etoile-ouvre 2.5s linear both;
}

/* L'étoile dorée n'est pas une seconde étoile : c'est la même découpe, remplie
   de jaune, posée par-dessus le texte. Elle suit donc exactement les mêmes
   étapes — deux animations sur le même élément, la découpe et le fondu — pour
   qu'il n'y ait jamais deux formes à l'écran. Au départ elle couvre entièrement
   le peu de texte dévoilé : on ne voit qu'une étoile dorée de la taille de
   celles de la notation. Puis elle grandit et perd sa couleur, jusqu'à être
   parfaitement transparente quand l'étoile atteint sa taille maximale et que
   le témoignage est entièrement lisible. Le fondu suit la surface dévoilée
   plutôt que le temps : il reste franc tant que l'étoile est petite et ne
   masque presque rien, et s'efface vite sur la fin, quand elle recouvre le
   texte. Purement décorative, d'où le retrait de l'arbre d'accessibilité.

   Sa boîte déborde de sept cents pixels de chaque côté du cadre. Une découpe
   ne fait que retrancher : elle n'invente aucun pixel là où l'élément n'en a
   pas. Tant que ce voile avait la taille exacte du témoignage, les branches de
   l'étoile continuaient bien de grandir au-delà, mais dans le vide, et on n'en
   voyait jamais que l'intersection avec le cadre. En lui donnant une boîte
   nettement plus grande que le rayon final, les branches ont de la surface à
   peindre et s'étalent pour de bon dans le bandeau. Le débordement est
   symétrique, donc le centre de la boîte reste celui du témoignage et les
   sommets exprimés en « 50 % ± n pixels » ne bougent pas d'un poil. C'est
   ensuite le bandeau lui-même, en overflow masqué, qui borne la figure — on
   n'a donc pas à s'inquiéter de ce qui dépasserait de la section. */
.sixsb-v-synthese .sixsb-etincelle {
	background: var( --sixsb-jaune );
	inset: -700px;
	opacity: 0;
	pointer-events: none;
	position: absolute;
}

@keyframes sixsb-etincelle {
	from   { opacity: .6; }
	25%    { opacity: .58; }
	37.5%  { opacity: .55; }
	50%    { opacity: .5; }
	62.5%  { opacity: .42; }
	75%    { opacity: .3; }
	87.5%  { opacity: .16; }
	to     { opacity: 0; }
}

.sixsb-v-synthese .sixsb-mot-scene.is-entre .sixsb-etincelle {
	animation: sixsb-etoile-ouvre 2.5s linear both, sixsb-etincelle 2.5s linear both;
}

/* Sans aucune accroche saisie, le bloc se rabat sur deux colonnes plutôt que
   de laisser un tiers de bandeau vide. */
.sixsb-v-synthese .sixsb-synth.is-sans-mot {
	grid-template-columns: minmax( 210px, 0.8fr ) minmax( 300px, 1.2fr );
}

/* =========================================================
   C · Mosaïque — trois cartes décalées
   ========================================================= */

.sixsb-v-mosaique .sixsb-rangee {
	display: grid;
	gap: 26px;
}

.sixsb-v-mosaique .sixsb-rangee.is-c1 {
	grid-template-columns: 1fr;
	margin: 0 auto;
	max-width: 720px;
}

.sixsb-v-mosaique .sixsb-rangee.is-c2 {
	grid-template-columns: repeat( 2, 1fr );
}

.sixsb-v-mosaique .sixsb-rangee.is-c3 {
	grid-template-columns: repeat( 3, 1fr );
}

.sixsb-v-mosaique .sixsb-carte {
	background: #fff;
	border: 0;
	border-radius: 18px;
	box-shadow: 0 2px 6px rgba( 26, 43, 90, .04 ), 0 18px 44px rgba( 26, 43, 90, .07 );
	display: flex;
	flex-direction: column;
	gap: 18px;
	padding: 34px 30px;
	transition: box-shadow .25s ease, transform .25s ease;
}

/* Le décalage vertical ne vaut que sur trois colonnes : sur deux il
   déséquilibrerait la rangée, sur une il n'aurait aucun sens. */
.sixsb-v-mosaique .is-c3 .sixsb-carte:nth-child( 3n + 2 ) {
	margin-top: 38px;
}

.sixsb-v-mosaique .is-c3 .sixsb-carte:nth-child( 3n ) {
	margin-top: 14px;
}

.sixsb-v-mosaique .is-c2 .sixsb-carte:nth-child( 2n ) {
	margin-top: 30px;
}

/* Sélecteur volontairement plus précis que les règles d'apparition, pour que
   le soulèvement au survol reprenne la main une fois la carte apparue. */
.sixsb-v-mosaique .sixsb-rangee .sixsb-carte:hover,
.sixsb-v-mosaique .sixsb-rangee .sixsb-carte:focus-within {
	box-shadow: 0 4px 10px rgba( 26, 43, 90, .06 ), 0 26px 60px rgba( 26, 43, 90, .11 );
	transform: translateY( -4px );
}

.sixsb-v-mosaique .sixsb-carte-haut {
	align-items: center;
	display: flex;
	gap: 12px;
	justify-content: space-between;
}

.sixsb-v-mosaique .sixsb-accroche {
	color: var( --sixsb-marine );
	font-size: 20px;
	font-weight: 700;
	letter-spacing: -.005em;
	line-height: 1.3;
	margin: 0;
}

.sixsb-v-mosaique .sixsb-carte q {
	color: var( --sixsb-texte );
	display: block;
	font-size: 15px;
	line-height: 1.65;
}

.sixsb-v-mosaique .sixsb-second q {
	color: var( --sixsb-gris-txt );
}

.sixsb-v-mosaique .sixsb-sign {
	border-top: 1px solid var( --sixsb-trait );
	margin-top: auto;
	padding-top: 20px;
}

/* ---------- Étiquette prestation ---------- */

.sixsb-tag {
	background: var( --sixsb-bleu-pale );
	border-radius: 999px;
	color: var( --sixsb-marine );
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 5px 12px;
	white-space: nowrap;
}

/* =========================================================
   Mouvement
   ---------------------------------------------------------
   Rien n'est masqué tant que le script n'a pas posé la classe
   « sixsb-anim » : sans JavaScript, le bloc s'affiche normalement.
   Le mouvement est court, discret, et ne se produit qu'une fois.
   ========================================================= */

.sixsb-anim .sixsb-tete,
.sixsb-anim .sixsb-principal,
.sixsb-anim .sixsb-pair,
.sixsb-anim .sixsb-satellite,
.sixsb-anim .sixsb-carte,
.sixsb-anim .sixsb-synth-note,
.sixsb-anim .sixsb-poles,
.sixsb-anim .sixsb-synth-mot,
.sixsb-anim .sixsb-pied {
	opacity: 0;
	transform: translateY( 16px );
}

.sixsb-anim.is-vu .sixsb-tete,
.sixsb-anim.is-vu .sixsb-principal,
.sixsb-anim.is-vu .sixsb-pair,
.sixsb-anim.is-vu .sixsb-satellite,
.sixsb-anim.is-vu .sixsb-carte,
.sixsb-anim.is-vu .sixsb-synth-note,
.sixsb-anim.is-vu .sixsb-poles,
.sixsb-anim.is-vu .sixsb-synth-mot,
.sixsb-anim.is-vu .sixsb-pied {
	opacity: 1;
	transform: translateY( 0 );
	transition:
		opacity .65s cubic-bezier( .22, .68, .3, 1 ) var( --sixsb-delai, 0ms ),
		transform .65s cubic-bezier( .22, .68, .3, 1 ) var( --sixsb-delai, 0ms );
}

/* Les jauges se remplissent une fois le bandeau à l'écran. La largeur finale
   est portée par l'attribut « style » en ligne, calculé côté serveur : c'est
   la transition qui part de zéro, pas la valeur. */
.sixsb-anim .sixsb-jauge i {
	transform: scaleX( 0 );
	transform-origin: left center;
}

.sixsb-anim.is-vu .sixsb-jauge i {
	transform: scaleX( 1 );
	transition: transform .9s cubic-bezier( .22, .68, .3, 1 ) calc( var( --sixsb-delai, 0ms ) + 180ms );
}

/* Le décalage vertical de la mosaïque passe par « margin-top » : il survit
   donc intact à l'animation, qui n'agit que sur « transform ». */

/* ---------- Survol ---------- */

@media ( hover: hover ) and ( pointer: fine ) {

	/* Bandeau sombre : la colonne survolée reste nette, les autres reculent
	   légèrement. L'effet ne se déclenche que s'il y a plusieurs colonnes. */
	.sixsb-v-sombre .is-c2:hover .sixsb-carte,
	.sixsb-v-sombre .is-c3:hover .sixsb-carte {
		opacity: .5;
		transition: opacity .3s ease;
	}

	.sixsb-v-sombre .is-c2 .sixsb-carte:hover,
	.sixsb-v-sombre .is-c2 .sixsb-carte:focus-within,
	.sixsb-v-sombre .is-c3 .sixsb-carte:hover,
	.sixsb-v-sombre .is-c3 .sixsb-carte:focus-within {
		opacity: 1;
	}

	/* Éditorial : la citation satellite survolée s'affirme. */
	.sixsb-v-editorial .sixsb-satellite blockquote {
		transition: transform .3s ease;
	}

	.sixsb-v-editorial .sixsb-satellite blockquote:hover {
		transform: translateX( 4px );
	}
}

/* ---------- Message éditeur (sous le seuil) ---------- */

.sixsb-placeholder {
	background: #fff8e5;
	border: 1px dashed #e0b73a;
	border-radius: 10px;
	color: #6b5312;
	font-size: 14px;
	margin: 0 auto;
	max-width: 760px;
	padding: 16px 18px;
	text-align: center;
}

/* ---------- Tablette / mobile ---------- */

@media ( max-width: 980px ) {

	.sixsb-bloc {
		padding: 60px 0;
	}

	.sixsb-tete {
		align-items: flex-start;
		flex-direction: column;
		gap: 28px;
		margin-bottom: 40px;
	}

	/* Les variantes « .is-duo » et « .is-solo » doivent être reprises nommément :
	   une media query n'ajoute rien à la spécificité, et sans cela les deux
	   colonnes de la composition à deux avis restaient côte à côte sur
	   téléphone, réduites à 200 et 150 pixels de large. */
	.sixsb-v-editorial .sixsb-grille,
	.sixsb-v-editorial .sixsb-grille.is-duo,
	.sixsb-v-editorial .sixsb-grille.is-solo {
		grid-template-columns: 1fr;
		padding-top: 36px;
	}

	.sixsb-v-editorial .sixsb-principal,
	.sixsb-v-editorial .is-solo .sixsb-principal {
		border-right: 0;
		padding: 0 0 36px;
	}

	.sixsb-v-editorial .sixsb-pair:first-child {
		border-right: 0;
		padding: 0 0 36px;
	}

	.sixsb-v-editorial .sixsb-pair:last-child {
		border-top: 1px solid var( --sixsb-trait );
		padding: 36px 0 0;
	}

	/* Empilées, les deux colonnes n'ont plus besoin de deux guillemets
	   ouvrants : le second tomberait sur le filet de séparation. */
	.sixsb-v-editorial .sixsb-pair:last-child::before {
		display: none;
	}

	.sixsb-v-editorial .sixsb-pair .sixsb-principal-bas {
		margin-top: 0;
	}

	.sixsb-v-editorial .sixsb-satellite {
		border-top: 1px solid var( --sixsb-trait );
		padding: 36px 0 0;
	}

	/* Une seule colonne sur petit écran, quel que soit le nombre d'avis. */
	.sixsb-v-sombre .sixsb-trio.is-c1,
	.sixsb-v-sombre .sixsb-trio.is-c2,
	.sixsb-v-sombre .sixsb-trio.is-c3,
	.sixsb-v-mosaique .sixsb-rangee.is-c1,
	.sixsb-v-mosaique .sixsb-rangee.is-c2,
	.sixsb-v-mosaique .sixsb-rangee.is-c3 {
		grid-template-columns: 1fr;
		margin: 0;
		max-width: none;
	}

	.sixsb-v-sombre .sixsb-trio {
		padding-top: 36px;
	}

	.sixsb-v-sombre .is-c1 .sixsb-carte:nth-child( n ),
	.sixsb-v-sombre .is-c2 .sixsb-carte:nth-child( n ),
	.sixsb-v-sombre .is-c3 .sixsb-carte:nth-child( n ) {
		border-left: 0;
		border-top: 0;
		margin: 0;
		max-width: none;
		padding: 0;
	}

	.sixsb-v-sombre .is-c1 .sixsb-carte:nth-child( n + 2 ),
	.sixsb-v-sombre .is-c2 .sixsb-carte:nth-child( n + 2 ),
	.sixsb-v-sombre .is-c3 .sixsb-carte:nth-child( n + 2 ) {
		border-top: 1px solid rgba( 255, 255, 255, .14 );
		margin-top: 36px;
		padding-top: 36px;
	}

	.sixsb-v-mosaique .is-c2 .sixsb-carte:nth-child( n ),
	.sixsb-v-mosaique .is-c3 .sixsb-carte:nth-child( n ) {
		margin-top: 0;
	}

	/* Synthèse : les trois colonnes s'empilent, les filets verticaux devenant
	   horizontaux pour garder la séparation lisible. */
	.sixsb-v-synthese .sixsb-synth,
	.sixsb-v-synthese .sixsb-synth.is-sans-mot {
		grid-template-columns: 1fr;
		padding-top: 36px;
	}

	.sixsb-v-synthese .sixsb-synth > *,
	.sixsb-v-synthese .sixsb-poles {
		border-left: 0;
		padding: 0;
	}

	.sixsb-v-synthese .sixsb-synth > *:nth-child( n + 2 ) {
		border-top: 1px solid rgba( 255, 255, 255, .14 );
		margin-top: 32px;
		padding-top: 32px;
	}

	.sixsb-pied {
		margin-top: 40px;
	}

	.sixsb-mention {
		text-align: left;
	}
}

@media ( max-width: 600px ) {

	.sixsb-wrap {
		padding: 0 18px;
	}

	.sixsb-score-n {
		font-size: 42px;
	}

	.sixsb-v-editorial .sixsb-principal::before {
		font-size: 110px;
		top: -32px;
	}

	.sixsb-v-mosaique .sixsb-carte {
		padding: 28px 22px;
	}

	.sixsb-v-synthese .sixsb-grand-n {
		font-size: 54px;
	}
}

/* ---------- Mouvement réduit ----------
   Le script s'abstient déjà dans ce cas ; la feuille de style neutralise en
   plus tout ce qui bouge, y compris si la classe a été posée avant que le
   visiteur ne change son réglage système. */

@media ( prefers-reduced-motion: reduce ) {

	.sixsb-bloc *,
	.sixsb-bloc *::before,
	.sixsb-bloc *::after {
		animation: none !important;
		transition: none !important;
	}

	.sixsb-anim .sixsb-tete,
	.sixsb-anim .sixsb-principal,
	.sixsb-anim .sixsb-pair,
	.sixsb-anim .sixsb-satellite,
	.sixsb-anim .sixsb-carte,
	.sixsb-anim .sixsb-synth-note,
	.sixsb-anim .sixsb-poles,
	.sixsb-anim .sixsb-synth-mot,
	.sixsb-anim .sixsb-pied {
		opacity: 1;
		transform: none;
	}

	/* Les jauges restent à leur largeur réelle : sans cette ligne, un
	   « scaleX( 0 ) » privé de transition les effacerait purement et
	   simplement. Un réglage d'accessibilité ne doit pas supprimer une donnée. */
	.sixsb-anim .sixsb-jauge i {
		transform: none;
	}

	.sixsb-v-mosaique .sixsb-rangee .sixsb-carte:hover,
	.sixsb-v-mosaique .sixsb-rangee .sixsb-carte:focus-within,
	.sixsb-lien-tout:hover,
	.sixsb-v-editorial .sixsb-satellite blockquote:hover {
		transform: none;
	}
}