.sbr-batiref {
--sbr-fond: var(--sg-surface, #f6f6f8);
--sbr-bord: var(--sg-border, #e2e2e8);
--sbr-texte: var(--sg-text, #333);
--sbr-doux: var(--sg-muted, #6b7280);
--sbr-fort: var(--sg-primary, #202951);
--sbr-sur-fort: var(--sg-primary-contrast, #fff);
--sbr-etoile: var(--sg-accent, var(--sg-primary, #e8c40c));
--sbr-badge-texte: var(--sg-accent-contrast, #222);
--sbr-med: 138px;
--sbr-med-marge: 30px;
--sbr-med-fond: var(--sg-accent, #e8c40c);
--sbr-med-trait: var(--sg-primary, #202951);
display: flex;
flex-direction: column;
gap: 26px;
padding-block: var(--sbr-marge, 56px);
color: var(--sbr-texte);
font-size: 14px;
} .sbr-sans-marge .sbr-batiref,
.sbr-batiref.sbr-sans-marge {
padding-block: 0;
}
.sbr-head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 24px;
flex-wrap: wrap;
}
.sbr-head h2 {
margin: 0;
max-width: 780px;
}
.sbr-lien {
font-size: 13px;
font-weight: 700;
letter-spacing: .06em;
text-transform: uppercase;
color: var(--sbr-fort);
text-decoration: none;
border: 0;
white-space: nowrap;
transition: opacity .15s ease;
}
.sbr-lien:hover,
.sbr-lien:focus {
color: var(--sbr-fort);
text-decoration: none;
opacity: .65;
} .sbr-stars {
position: relative;
display: inline-block;
white-space: nowrap;
line-height: 1;
letter-spacing: .06em;
color: var(--sbr-etoile);
font-size: 11px;
}
.sbr-stars-bg {
opacity: .24;
}
.sbr-stars-fg {
position: absolute;
inset: 0;
overflow: hidden;
}  .sbr-bandeau {
position: relative;
} .sbr-avec-pastille .sbr-head {
position: relative;
z-index: 3;
padding-right: calc(var(--sbr-med) + var(--sbr-med-marge) * 2);
margin-bottom: -16px;
} .sbr-a-pastille {
padding-top: calc(var(--sbr-med) * .42);
margin-top: calc(var(--sbr-med) * -.42);
}
.sbr-medaille {
position: absolute;
top: 0;
right: var(--sbr-med-marge);
width: var(--sbr-med);
height: var(--sbr-med);
z-index: 2;
pointer-events: none;
}
.sbr-medaille text {
font-family: inherit;
}
.sbr-band {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 18px 24px;
padding: 22px 28px;
background: var(--sbr-fort);
color: var(--sbr-sur-fort);
}
.sbr-a-pastille .sbr-band {
padding-right: calc(var(--sbr-med) + var(--sbr-med-marge) * 2);
}
.sbr-band .sbr-stars {
font-size: 14px;
}
.sbr-band-meta {
display: flex;
flex-direction: column;
gap: 3px;
font-size: 12px;
line-height: 1.45;
opacity: .78;
}
.sbr-band-crit {
margin: 0;
display: flex;
align-items: stretch;
flex-wrap: wrap;
}
.sbr-band-cell {
display: flex;
flex-direction: column;
gap: 5px;
padding: 0 14px;
min-width: 76px;
} .sbr-band-cell:first-child {
padding-left: 0;
}
.sbr-band-cell + .sbr-band-cell {
border-left: 1px solid currentColor;
border-left-color: rgba(255, 255, 255, .2);
}
.sbr-band-cell dt {
font-size: 10px;
letter-spacing: .09em;
text-transform: uppercase;
opacity: .7;
}
.sbr-band-cell dd {
margin: 0;
display: flex;
align-items: center;
gap: 7px;
font-size: 15px;
font-weight: 700;
font-variant-numeric: tabular-nums;
} .sbr-carousel {
display: flex;
align-items: stretch;
gap: 18px;
}
.sbr-batiref .sbr-arrow,
.sbr-batiref button.sbr-arrow {
width: 44px;
height: 44px;
flex: none;
align-self: center;
padding: 0;
border: 0;
border-radius: 0;
background: none;
box-shadow: none;
color: var(--sbr-fort);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: opacity .2s ease;
}
.sbr-batiref .sbr-arrow:hover {
background: none;
opacity: .6;
} .sbr-batiref .sbr-arrow[hidden],
.sbr-batiref button.sbr-arrow[hidden] {
display: none;
}
.sbr-batiref .sbr-arrow svg {
width: 26px;
height: 26px;
}
.sbr-viewport {
flex-grow: 1;
min-width: 0;
position: relative;
overflow: hidden;
} .sbr-track {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 18px;
}
.sbr-ready .sbr-track {
display: grid;
grid-template-columns: none;
}
.sbr-slide {
grid-area: 1 / 1;
display: grid;
grid-template-columns: repeat(var(--sbr-per, 4), minmax(0, 1fr));
gap: 18px;
opacity: 0;
visibility: hidden;
transition: opacity var(--sbr-dur, .5s) ease, transform var(--sbr-dur, .5s) ease;
}
.sbr-slide.is-leaving {
visibility: visible;
opacity: 0;
} .sbr-batiref[data-effect="slide-left"]  { --sbr-ax: 1;  --sbr-ay: 0; }
.sbr-batiref[data-effect="slide-right"] { --sbr-ax: -1; --sbr-ay: 0; }
.sbr-batiref[data-effect="slide-up"]    { --sbr-ax: 0;  --sbr-ay: 1; }
.sbr-batiref[data-effect="slide-down"]  { --sbr-ax: 0;  --sbr-ay: -1; }
.sbr-batiref[data-effect^="slide-"] .sbr-slide {
transform: translate(
calc(var(--sbr-ax, 1) * var(--sbr-sign, 1) * 100%),
calc(var(--sbr-ay, 0) * var(--sbr-sign, 1) * 100%)
);
}
.sbr-batiref[data-effect^="slide-"] .sbr-slide.is-leaving {
transform: translate(
calc(var(--sbr-ax, 1) * var(--sbr-sign, 1) * -100%),
calc(var(--sbr-ay, 0) * var(--sbr-sign, 1) * -100%)
);
}
.sbr-batiref[data-effect="fade"] .sbr-slide {
transform: none;
}
.sbr-batiref[data-effect="fade-zoom"] .sbr-slide {
transform: scale(calc(1 - .06 * var(--sbr-sign, 1)));
}
.sbr-batiref[data-effect="fade-zoom"] .sbr-slide.is-leaving {
transform: scale(calc(1 + .06 * var(--sbr-sign, 1)));
}
.sbr-batiref[data-effect="none"] .sbr-slide {
transform: none;
transition: none;
} .sbr-batiref[data-effect] .sbr-slide.is-active {
opacity: 1;
visibility: visible;
transform: none;
z-index: 1;
} .sbr-card {
margin: 0;
box-sizing: border-box;
padding: 22px 20px 18px;
background: var(--sbr-fond);
border: 1px solid var(--sbr-bord);
display: flex;
flex-direction: column;
gap: 11px;
scroll-snap-align: start;
min-width: 0;
}
.sbr-date {
font-size: 11px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sbr-doux);
}
.sbr-who {
display: flex;
align-items: center;
gap: 10px;
}
.sbr-ini {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
flex: none;
border-radius: 50%;
background: var(--sbr-fort);
color: var(--sbr-sur-fort);
font-size: 11px;
font-weight: 700;
letter-spacing: .06em;
}
.sbr-badge {
display: inline-flex;
align-items: center;
height: 20px;
padding: 0 8px;
background: var(--sbr-etoile);
color: var(--sbr-badge-texte);
font-size: 10px;
font-weight: 700;
letter-spacing: .1em;
text-transform: uppercase;
}
.sbr-badge-part {
background: transparent;
border: 1px solid currentColor;
color: var(--sbr-doux);
}
.sbr-reponse {
border-left: 3px solid var(--sbr-etoile);
padding: 8px 0 8px 12px;
font-size: 12.5px;
line-height: 1.55;
}
.sbr-reponse span {
display: block;
font-weight: 700;
font-size: 10px;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--sbr-doux);
margin-bottom: 3px;
}
.sbr-reponse p {
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sbr-score {
display: flex;
align-items: baseline;
gap: 9px;
}
.sbr-score .sbr-stars {
font-size: 15px;
}
.sbr-score b {
font-size: 30px;
font-weight: 800;
line-height: 1;
font-variant-numeric: tabular-nums;
}
.sbr-score > span:last-child {
font-size: 14px;
opacity: .6;
}
.sbr-card blockquote {
margin: 0;
padding: 0;
border: 0;
flex-grow: 1;
}
.sbr-card blockquote p {
margin: 0;
font-size: 14px;
line-height: 1.6;
color: var(--sbr-texte);
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sbr-crit {
display: flex;
flex-direction: column;
}
.sbr-crit-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 5px 0;
border-top: 1px solid var(--sbr-bord);
}
.sbr-crit-row:first-child {
border-top: 0;
}
.sbr-crit-label {
font-size: 10px;
letter-spacing: .05em;
text-transform: uppercase;
color: var(--sbr-doux);
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sbr-crit-note {
display: flex;
align-items: center;
gap: 6px;
flex: none;
font-size: 11px;
font-weight: 700;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.sbr-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
margin: 0;
font-size: 12px;
color: var(--sbr-doux);
}
.sbr-foot strong {
color: var(--sbr-fort);
} @media (max-width: 1100px) {
.sbr-batiref {
--sbr-marge: 40px;
}
.sbr-batiref {
--sbr-med: 116px;
--sbr-med-marge: 22px;
}
}
@media (max-width: 782px) {
.sbr-batiref {
--sbr-marge: 32px;
}
.sbr-carousel {
gap: 8px;
}
.sbr-band {
padding: 18px 20px;
} .sbr-batiref {
--sbr-med: 104px;
}
.sbr-avec-pastille .sbr-head {
padding-right: 0;
margin-bottom: 0;
}
.sbr-a-pastille {
padding-top: 0;
margin-top: 0;
display: flex;
flex-direction: column;
align-items: center;
} .sbr-medaille {
position: static;
margin-bottom: calc(var(--sbr-med) * -.14);
}
.sbr-a-pastille .sbr-band {
width: 100%;
padding-top: calc(18px + var(--sbr-med) * .16);
padding-right: 20px;
}
}
@media (prefers-reduced-motion: reduce) {
.sbr-slide {
transition: none;
}
} .sbr-medaille[data-anim]:not([data-anim="aucune"]).sbr-attente {
opacity: 0;
}
.sbr-medaille.sbr-anime {
animation-duration: var(--sbr-anim-duree, .9s);
animation-timing-function: cubic-bezier(.22, .9, .3, 1.2);
animation-fill-mode: both;
}
.sbr-medaille[data-anim="zoom-rebond"].sbr-anime {
animation-name: sbr-zoom-rebond;
}
.sbr-medaille[data-anim="tampon"].sbr-anime {
animation-name: sbr-tampon;
animation-duration: var(--sbr-anim-duree, .5s);
animation-timing-function: cubic-bezier(.2, .8, .3, 1);
}
.sbr-medaille[data-anim="sautillement"].sbr-anime {
animation-name: sbr-sautillement;
animation-duration: var(--sbr-anim-duree, 1s);
animation-timing-function: ease-out;
}
.sbr-medaille[data-anim="fondu-haut"].sbr-anime {
animation-name: sbr-fondu-haut;
animation-timing-function: cubic-bezier(.22, .9, .3, 1);
}
.sbr-medaille[data-anim="fondu-droite"].sbr-anime {
animation-name: sbr-fondu-droite;
animation-timing-function: cubic-bezier(.22, .9, .3, 1);
}
.sbr-medaille[data-anim="fondu"].sbr-anime {
animation-name: sbr-fondu;
animation-timing-function: ease-out;
}
.sbr-medaille[data-anim="rotation"].sbr-anime {
animation-name: sbr-rotation;
}
.sbr-medaille[data-anim="balancier"].sbr-anime {
animation-name: sbr-balancier;
animation-duration: var(--sbr-anim-duree, 1.1s);
animation-timing-function: ease-in-out;
}
@keyframes sbr-zoom-rebond {
0%   { opacity: 0; transform: scale(.4); }
60%  { opacity: 1; transform: scale(1.12); }
80%  { transform: scale(.96); }
100% { opacity: 1; transform: scale(1); }
}
@keyframes sbr-tampon {
0%   { opacity: 0; transform: scale(1.9) rotate(-14deg); }
70%  { opacity: 1; transform: scale(.94) rotate(2deg); }
100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes sbr-sautillement {
0%   { opacity: 0; transform: translateY(-40px); }
40%  { opacity: 1; transform: translateY(0); }
58%  { transform: translateY(-14px); }
74%  { transform: translateY(0); }
86%  { transform: translateY(-5px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes sbr-fondu-haut {
0%   { opacity: 0; transform: translateY(26px); }
100% { opacity: 1; transform: translateY(0); }
}
@keyframes sbr-fondu-droite {
0%   { opacity: 0; transform: translateX(36px); }
100% { opacity: 1; transform: translateX(0); }
}
@keyframes sbr-fondu {
0%   { opacity: 0; }
100% { opacity: 1; }
}
@keyframes sbr-rotation {
0%   { opacity: 0; transform: rotate(-180deg) scale(.6); }
100% { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes sbr-balancier {
0%   { opacity: 0; transform: rotate(-12deg); }
30%  { opacity: 1; transform: rotate(9deg); }
50%  { transform: rotate(-6deg); }
70%  { transform: rotate(3deg); }
85%  { transform: rotate(-1.5deg); }
100% { opacity: 1; transform: rotate(0); }
} @media (prefers-reduced-motion: reduce) {
.sbr-medaille.sbr-attente,
.sbr-medaille.sbr-anime {
opacity: 1;
animation: none;
}
}