/* Storvatt Content — styles front (liste, article, blocs). */

/* Jetons calqués sur les variables du thème (abstracts/_variables.scss) :
   le module vit à côté du thème et ne peut pas consommer son SCSS. */
:root {
  --sc-text: #000;       /* $text-color */
  --sc-text-muted: #777; /* $secondary-text-color */
  --sc-gold: #a58a42;    /* $gold / $yellow */
  --sc-line: #d8d8d8;    /* $grey */
  --sc-surface: #f4f4f4; /* $light-grey / $light-background */

  /* Gris de texte suivi : 7,0:1 sur blanc, contre 4,5:1 pour --sc-text-muted. */
  --sc-text-soft: #595959;
}

/* Réservé aux lecteurs d'écran (indépendant du .sr-only du thème). */
.storvatt-content-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.storvatt-content {
  max-width: 1200px;
  margin: 0 auto;
}

.storvatt-content__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

/* Bouton « charger plus d'articles ». */
.storvatt-content-loadmore {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  margin: 4rem 0 0;
}

.storvatt-content-loadmore__button {
  padding: 1.8rem 3.2rem;
  font-size: 1.4rem;
}

.storvatt-content-loadmore__button[aria-busy='true'] {
  opacity: 0.6;
  cursor: progress;
}

.storvatt-content-loadmore__count {
  margin: 0;
  color: var(--sc-text-muted);
  font-size: 1.3rem;
}

/* Cartes de type de la racine ; auto-fit pour ne pas laisser de colonne vide. */
.storvatt-content-types {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.storvatt-content__empty {
  padding: 3rem 0;
  text-align: center;
  color: var(--sc-text-muted);
}

/* Mise en avant : bento de trois tuiles au maximum, la première en grande tuile. */
.storvatt-content-featured {
  margin: 0 0 4rem;
}

.storvatt-content-featured__heading {
  margin: 0 0 1.6rem;
  color: var(--sc-gold);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
}

.storvatt-content-featured__bento {
  display: grid;
  gap: 2rem;
}

/* Découpage du bento selon le nombre d'articles. */
.storvatt-content-featured__bento--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.storvatt-content-featured__bento--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.storvatt-content-featured__bento--3 .storvatt-content-featured__item--lead {
  grid-column: span 2;
  grid-row: span 2;
}

.storvatt-content-featured__item {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}

/* Ombre de survol du thème ($shadow-hover-spread). */
.storvatt-content-featured__item:hover {
  box-shadow: 0 10px 25px rgba(83, 83, 83, 0.15);
}

/* Article seul : image et texte côte à côte. */
.storvatt-content-featured__bento--1 .storvatt-content-featured__item--lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.storvatt-content-featured__media {
  position: relative;
  overflow: hidden;
  background: var(--sc-surface);
}

.storvatt-content-featured__item--lead .storvatt-content-featured__media,
.storvatt-content-featured__item--tile .storvatt-content-featured__media {
  flex: 1 1 auto;
  min-height: 16rem;
}

.storvatt-content-featured__bento--1 .storvatt-content-featured__media {
  min-height: 28rem;
}

.storvatt-content-featured__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Zoom au survol. L'overflow doit être porté par le cadre de l'image : sur
   l'article seul, celui de la tuile laisserait l'image déborder sur le texte. */
.storvatt-content-featured__item:hover .storvatt-content-featured__media > img,
.storvatt-content-featured__item:focus-within .storvatt-content-featured__media > img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .storvatt-content-featured__media > img {
    transition: none;
  }

  .storvatt-content-featured__item:hover .storvatt-content-featured__media > img,
  .storvatt-content-featured__item:focus-within .storvatt-content-featured__media > img {
    transform: none;
  }
}

.storvatt-content-badge {
  padding: 0.8rem 1.6rem;
  border-radius: 8px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  line-height: 1;
}

.storvatt-content-badge--category {
  color: #fff;
  background: #000;
}

/* Type : rectangle arrondi (rayon du .button du thème) ; catégorie : gélule. */
.storvatt-content-badge--type {
  flex: none;
  border-radius: 6px;
  color: #000;
  background: rgba(255, 255, 255, 0.92);
}

/* Catégorie mise en avant d'un tutoriel, posée sur l'image. */
.storvatt-content-badge--highlight {
  position: absolute;
  top: 1.6rem;
  left: 1.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  max-width: calc(100% - 3.2rem);
  color: #fff;
  background: var(--sc-gold);
  line-height: 1.2;
}

/* brightness(0) + invert(1) : recolore en blanc un pictogramme <img> servi tel
   quel par le CMS, sans inliner le SVG. */
.storvatt-content-badge__picto,
.storvatt-content__tag-picto {
  display: block;
  flex: none;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.storvatt-content-badge__picto {
  width: 2rem;
  height: 2rem;
}

.storvatt-content-badge__sep {
  margin: 0 0.5rem;
}

.storvatt-content-featured__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.4rem;
}

.storvatt-content-featured__item--lead .storvatt-content-featured__body {
  padding: 3.2rem;
}

.storvatt-content-featured__title {
  margin: 0 0 1.2rem;
  color: #000;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.8rem;
  line-height: 1.15;
}

.storvatt-content-featured__item--lead .storvatt-content-featured__title {
  margin-bottom: 1.6rem;
  font-size: clamp(2.2rem, 2.4vw, 3.2rem);
  line-height: 1.1;
}

.storvatt-content-featured__link {
  color: inherit;
  text-decoration: none!important;
}

.storvatt-content-featured__link:hover {
  text-decoration: none!important;
}

/* Le lien du titre couvre la tuile entière (calque transparent). */
.storvatt-content-featured__link::after {
  content: '';
  position: absolute;
  inset: 0;
}

.storvatt-content-featured__excerpt {
  margin: 0 0 2rem;
  color: var(--sc-text-soft);
  font-size: 1.5rem;
  line-height: 1.6;
}

/* Repères à gauche, date à droite. */
.storvatt-content-featured__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  margin: 0;
  color: var(--sc-text-muted);
  font-size: 1.3rem;
}

.storvatt-content-featured__item--lead .storvatt-content-featured__meta {
  margin-bottom: 2.4rem;
}

.storvatt-content-featured__sep {
  margin: 0 0.8rem;
}

/* Bouton plein, balayé d'or au survol. z-index:0 ouvre le contexte
   d'empilement du remplissage (::before, z-index négatif). */
.storvatt-content-button {
  position: relative;
  z-index: 0;
  display: inline-block;
  overflow: hidden;
  padding: 1.4rem 2.4rem;
  border-radius: 6px;
  color: #fff;
  background: #000;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  line-height: 1;
  text-decoration: none;
  transition: border-color 0.25s ease;
}

/* Balayage animé sur transform plutôt que background-color : reste sur le
   compositeur et donne une direction au survol. */
.storvatt-content-button::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  background: var(--sc-gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

/* Filet doré au survol, comme le .button du thème. */
.storvatt-content-button:hover,
.storvatt-content-button:focus,
.storvatt-content-featured__item:hover .storvatt-content-button,
.storvatt-content-featured__item:focus-within .storvatt-content-button {
  color: #fff;
  border-color: var(--sc-gold);
  text-decoration: none;
}

/* Dans la mise en avant, le bouton n'est qu'un dessin : c'est la tuile qui
   porte le lien, donc le survol. */
.storvatt-content-button:hover::before,
.storvatt-content-button:focus::before,
.storvatt-content-featured__item:hover .storvatt-content-button::before,
.storvatt-content-featured__item:focus-within .storvatt-content-button::before {
  transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
  .storvatt-content-button,
  .storvatt-content-button::before {
    transition: none;
  }
}

.storvatt-content-featured__cta {
  margin-top: auto;
}

/* Sous 992px le bento devient un carrousel scroll-snap natif, sans JS. La
   tuile suivante déborde (85%) pour annoncer la suite ; l'article seul en est
   exempté. */
@media (max-width: 991px) {
  .storvatt-content-featured__bento--2,
  .storvatt-content-featured__bento--3 {
    grid-auto-flow: column;
    grid-auto-columns: 85%;
    grid-template-columns: none;
    grid-template-rows: none;
    overflow-x: auto;
    /* Sans elle, l'ombre de focus serait rognée par le conteneur défilant. */
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .storvatt-content-featured__bento--2::-webkit-scrollbar,
  .storvatt-content-featured__bento--3::-webkit-scrollbar {
    display: none;
  }

  .storvatt-content-featured__bento--2 .storvatt-content-featured__item,
  .storvatt-content-featured__bento--3 .storvatt-content-featured__item {
    scroll-snap-align: start;
  }

  .storvatt-content-featured__bento--3 .storvatt-content-featured__item--lead {
    grid-column: auto;
    grid-row: auto;
  }

  .storvatt-content-featured__bento--1 .storvatt-content-featured__item--lead {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Cadrage uniforme des médias : hors bento, plus rien ne fixe leur hauteur.
     Sélecteurs aussi spécifiques, sinon `flex: 1 1 auto` l'emporte. */
  .storvatt-content-featured__item--lead .storvatt-content-featured__media,
  .storvatt-content-featured__item--tile .storvatt-content-featured__media,
  .storvatt-content-featured__bento--1 .storvatt-content-featured__media {
    flex: none;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .storvatt-content-featured__item--lead .storvatt-content-featured__body {
    padding: 2.4rem;
  }
}

/* Une seule catégorie sur mobile : trois étiquettes mangent le haut de l'image. */
@media (max-width: 767px) {

  .storvatt-content-badge {
    padding: 0.6rem 1.2rem;
    font-size: 1.1rem;
  }
}

.storvatt-content-card {
  height: 100%;
  overflow: hidden;
  border-radius: 8px;
  background: #fff;
  transition: box-shadow 0.15s;
}

.storvatt-content-card:hover {
  box-shadow: 0 10px 25px rgba(83, 83, 83, 0.15);
}

.storvatt-content-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  color: inherit;
  text-decoration: none!important;
}

.storvatt-content-card__link:hover {
  text-decoration: none!important;
}

.storvatt-content-card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--sc-surface);
}

.storvatt-content-card__media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* Survol capté sur la carte entière ; focus-within pour le clavier. */
.storvatt-content-card:hover .storvatt-content-card__media > img,
.storvatt-content-card:focus-within .storvatt-content-card__media > img {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .storvatt-content-card__media > img {
    transition: none;
  }

  .storvatt-content-card:hover .storvatt-content-card__media > img,
  .storvatt-content-card:focus-within .storvatt-content-card__media > img {
    transform: none;
  }
}

.storvatt-content-card__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 1.8rem 2rem 2rem;
  background-color: #F4F4F4;
}

/* Catégorie en or au-dessus du titre. */
.storvatt-content-card__category {
  margin: 0 0 0.8rem;
  color: var(--sc-gold);
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
}

/* Séparateur porté par le CSS : {strip} avalerait les espaces du template. */
.storvatt-content-card__sep {
  margin: 0 0.5rem;
}

.storvatt-content-card__title {
  margin: 0 0 0.8rem;
  color: #000;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.6rem;
  line-height: 1.3;
}

.storvatt-content-card__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
  margin: 0;
  color: #000;
  font-size: 1.4rem;
  line-height: 1.5;
}

/* Pied de carte : repères à gauche, date à droite (flex: none, ne se replie pas). */
.storvatt-content-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin: auto 0 0;
  padding-top: 2rem;
  color: var(--sc-text-muted);
  font-size: 1.3rem;
  line-height: 1.4;
}

/* Difficulté et durée priment sur la date. */
.storvatt-content-card__facts,
.storvatt-content-featured__facts {
  color: #000;
  font-weight: 700;
}

.storvatt-content-card__facts:empty,
.storvatt-content-featured__facts:empty {
  display: none;
}

.storvatt-content-card__date,
.storvatt-content-featured__date {
  flex: none;
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: #000;
}

/* Article */
.storvatt-content-post__layout {
  max-width: 1200px;
  margin: 0 auto;
}

/* Mesure de lecture pour les cas sans grille : sous 1024px, et les articles
   sans sommaire. */
.storvatt-content--post {
  max-width: 880px;
  margin: 0 auto;
}

/* Blocs sortis de la colonne de prose (FAQ) : cadrés par le conteneur de la
   grille, pas par la mesure de lecture. */
.storvatt-content-post__wide {
  max-width: 1200px;
  margin: 0 auto;
}

/* Avec sommaire : rail à gauche, prose à droite. Sans sommaire, prose centrée. */
@media (min-width: 1024px) {
  .storvatt-content-post__layout--with-toc {
    display: grid;
    grid-template-columns: 250px minmax(0, 880px);
    gap: 5.6rem;
    justify-content: space-between;
    align-items: start;
  }

  .storvatt-content-post__layout--with-toc .storvatt-content--post {
    margin: 0;
  }
}

.storvatt-content__header {
  max-width: 1200px;
  margin: 0 auto;
}

/* Le thème pose font-size:62.5% sur la racine (1rem = 10px). */

.storvatt-content__eyebrow {
  margin: 0;
  padding: 2.2rem 0 0;
  font-size: 1.3rem;
}

/* Compense le bandeau fixe du mega-menu (ets_megamenu, 130px), que le
   padding-top du thème (78px) ne couvre pas. */
@media (max-width: 1024px) {
  .storvatt-content__header {
    margin-top: 60px;
  }
}

.storvatt-content__eyebrow a {
  color: var(--sc-text-muted);
  text-decoration: none;
}

.storvatt-content__eyebrow a:hover {
  color: #000;
  text-decoration: underline;
}

/* Catégories en étiquettes cliquables. */
.storvatt-content__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.storvatt-content__tag {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  border: 1px solid var(--sc-text);
  border-radius: 8px;
  background: var(--sc-text);
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  line-height: 1.2;
  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

/* Noir au repos, or au survol, comme .button ; soulignement du thème coupé. */
.storvatt-content__tag:hover,
.storvatt-content__tag:focus {
  border-color: var(--sc-gold);
  background: var(--sc-gold);
  color: #fff;
  text-decoration: none;
}

/* Tutoriel : états inversés (or au repos, noir au survol). Pictogramme forcé
   en blanc, cf. .storvatt-content-badge__picto. */
.storvatt-content__tag--highlighted {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border-color: var(--sc-gold);
  background: var(--sc-gold);
}

.storvatt-content__tag--highlighted:hover,
.storvatt-content__tag--highlighted:focus {
  border-color: var(--sc-text);
  background: var(--sc-text);
}

.storvatt-content__tag-picto {
  width: 1.4rem;
  height: 1.4rem;
}

.storvatt-content__title-block {
  padding: 1.8rem 0 2.8rem;
}

.storvatt-content__title {
  margin: 0 0 1.6rem;
  color: #000;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: -0.005em;
  line-height: 1.1;
  font-size: clamp(3rem, 4.2vw, 4.3rem);
}

.storvatt-content__lead {
  margin: 0 0 1.8rem;
  font-size: 1.6rem;
  color: var(--sc-text-muted);
}

.storvatt-content__meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0;
  font-size: 1.3rem;
  color: var(--sc-text-muted);
}

.storvatt-content__meta-icon {
  flex: none;
}

.storvatt-content__meta time {
  text-transform: capitalize;
}

.storvatt-content__meta-sep {
  opacity: 0.6;
}

.storvatt-content__hero {
  position: relative;
  aspect-ratio: 16 / 8;
  border-radius: 8px;
  overflow: hidden;
  background: var(--sc-surface);
}

.storvatt-content__hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storvatt-content__meta--tuto {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.storvatt-content__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  color: var(--sc-text-soft);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}

.storvatt-content__pill-icon {
  color: var(--sc-text);
}

.storvatt-content__pill--easy .storvatt-content__pill-bar2,
.storvatt-content__pill--easy .storvatt-content__pill-bar3,
.storvatt-content__pill--medium .storvatt-content__pill-bar3 {
  opacity: 0.22;
}

.storvatt-content__pill--hard .storvatt-content__pill-icon {
  color: var(--sc-gold);
}

.storvatt-content-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(24rem, 100%), 1fr));
  gap: 1.6rem;
  margin: 0 0 3.2rem;
}

.storvatt-content-facts__item {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.6rem 1.8rem;
  border: 1px solid var(--sc-line);
  border-radius: 8px;
}

.storvatt-content-facts__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--sc-surface);
  color: var(--sc-gold);
}

.storvatt-content-facts__text {
  display: flex;
  flex-direction: column-reverse;
  min-width: 0;
}

.storvatt-content-facts__value {
  margin: 0;
  color: var(--sc-text);
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.25;
}

.storvatt-content-facts__label {
  margin-top: 0.3rem;
  color: var(--sc-text-soft);
  font-size: 1.3rem;
  font-weight: 400;
  line-height: 1.4;
}

.storvatt-content-video--16-9 {
  aspect-ratio: 16 / 9;
}

.storvatt-content-video--4-3 {
  aspect-ratio: 4 / 3;
}

.storvatt-content-video--1-1 {
  aspect-ratio: 1 / 1;
}

.storvatt-content-video--9-16 {
  aspect-ratio: 9 / 16;
  max-height: 80vh;
  margin: 0 auto;
}

.storvatt-content-video__poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.storvatt-content-video:hover .storvatt-content-video__poster,
.storvatt-content-video:has(.storvatt-content-video__play:focus-visible) .storvatt-content-video__poster {
  transform: scale(1.05);
}

@media (prefers-reduced-motion: reduce) {
  .storvatt-content-video__poster {
    transition: none;
  }

  .storvatt-content-video:hover .storvatt-content-video__poster,
  .storvatt-content-video:has(.storvatt-content-video__play:focus-visible) .storvatt-content-video__poster {
    transform: none;
  }
}

.storvatt-content-video__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  object-fit: contain;
}

.storvatt-content-video__badge,
.storvatt-content-video__caption {
  pointer-events: none;
}

.storvatt-content-video__badge {
  position: absolute;
  top: 14px;
  left: 16px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.storvatt-content-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.storvatt-content-video__play-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding-left: 2px; 
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  color: var(--sc-text);
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.storvatt-content-video__play:hover .storvatt-content-video__play-icon,
.storvatt-content-video__play:focus-visible .storvatt-content-video__play-icon {
  background: var(--sc-gold);
  color: #fff;
  transform: scale(1.06);
}

.storvatt-content-video__play:focus {
  outline: 0;
}

.storvatt-content-video__play:focus-visible .storvatt-content-video__play-icon {
  outline: 3px solid var(--sc-gold);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .storvatt-content-video__play-icon {
    transition: none;
  }

  .storvatt-content-video__play:hover .storvatt-content-video__play-icon,
  .storvatt-content-video__play:focus-visible .storvatt-content-video__play-icon {
    transform: none;
  }
}

.storvatt-content-video__caption {
  position: absolute;
  left: 16px;
  bottom: 14px;
  max-width: calc(100% - 32px);
  margin: 0;
  padding: 5px 10px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.storvatt-content-video__fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 5rem;
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

@media (max-width: 767px) {
  .storvatt-content-video__play-icon {
    width: 56px;
    height: 56px;
  }
}

.storvatt-content__share {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 2rem 0 0.6rem;
  margin: 2.4rem 0 3.6rem;
  border-bottom: 1px solid var(--sc-line);
  font-size: 1.3rem;
  color: var(--sc-text-muted);
}

.storvatt-content__share-icons {
  display: flex;
  gap: 0.8rem;
  margin-left: 0.6rem;
}

.storvatt-content__share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--sc-line);
  border-radius: 50%;
  background: #fff;
  color: #000;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.storvatt-content__share-btn:hover {
  border-color: #000;
  background: #000;
  color: #fff;
}

.storvatt-content__share-btn svg {
  width: 14px;
  height: 14px;
}

.storvatt-content__blocks {
  margin-top: 2rem;
}

/* Texte riche : sélecteurs par balise, le sanitizer retire class/id/data-*. */
.rte h2 {
  margin: 4.6rem 0 1.4rem;
  color: #000;
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(1.9rem, 2vw, 2.4rem);
  letter-spacing: 0;
}

.rte h2:first-child {
  margin-top: 0;
}

/* Dégage le header sticky du thème pour les ancres du sommaire. */
.rte h2[id],
.rte h3[id] {
  scroll-margin-top: 6rem;
}

.rte h3 {
  margin: 3.2rem 0 1rem;
  color: #000;
  font-weight: 700;
  font-size: 1.7rem;
}

.rte p,
.rte li {
  /* Restitue les retours à la ligne littéraux du contenu collé. */
  white-space: pre-line;
}

.rte p {
  margin: 0 0 1.8rem;
  color: var(--sc-text);
  line-height: 1.6;
}

/* Lignes vides du CMS (<p></p>, <p><br></p>) : le padding empêche le collapse
   de leurs marges. */
.rte p:empty,
.rte p:has(> br:only-child) {
  margin: 0;
  padding-top: 1.6em;
}

.rte p strong,
.rte strong {
  color: #000;
  font-weight: 700;
}

/* Le CMS enveloppe le texte des titres dans <strong>. */
.rte h2 strong,
.rte h3 strong {
  font-weight: inherit;
}

.rte a {
  color: #000;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--sc-gold);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

/* Le contenu collé enveloppe parfois le texte d'un lien dans <u>. */
.rte a u {
  text-decoration: inherit;
}

.rte blockquote {
  margin: 3.2rem 0;
  padding: 1.5rem 2.2rem;
  border-left: 2px solid #000;
  font-style: italic;
  font-weight: 400;
  font-size: 2.2rem;
  line-height: 1.45;
  color: #000;
  background: #00000008;
}

.rte blockquote p {
  margin: 0;
  color: inherit;
}

.rte blockquote strong {
  font-style: normal;
}

.rte blockquote a {
  color: inherit;
}

/* Listes : marqueur natif abandonné, ::marker n'acceptant pas de forme. */
.rte ul,
.rte ol {
  margin: 0 0 1.8rem;
  /* Retrait porté par la liste, pour que le marqueur reste dans sa gouttière. */
  padding-left: 1.5em;
  color: var(--sc-text);
  font-size: 1.6rem;
  line-height: 1.6;
  list-style: none;
}

.rte li {
  position: relative;
  margin-bottom: 0.6rem;
  /* Gouttière du marqueur ; tient un numéro à deux chiffres. */
  padding-left: 2.6rem;
}

/* Puce carrée ; 0.8em = demi-hauteur de ligne moins demi-hauteur du carré. */
.rte ul > li::before {
  content: '';
  position: absolute;
  left: 0.6rem;
  top: calc(0.8em - 3px);
  width: 6px;
  height: 6px;
  background: var(--sc-gold);
}

/* Second niveau : carré évidé. */
.rte ul ul > li::before {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--sc-gold);
}

/* Compteur natif list-item : respecte start="n", posé par l'éditeur quand
   un paragraphe coupe la liste. Chrome 115+, Safari 17+. */
.rte ol > li::before {
  content: counter(list-item) '.';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sc-gold);
  font-weight: 700;
  /* Chiffres à chasse fixe. */
  font-variant-numeric: tabular-nums;
}

/* Liste imbriquée : pas de marge basse de fin de liste. */
.rte li > ul,
.rte li > ol {
  margin: 0.6rem 0 0;
}

/* Le CMS enveloppe le texte des <li> dans un <p>. */
.rte li > p {
  margin: 0;
}

/* <li> réellement composé de plusieurs paragraphes. */
.rte li > p + p {
  margin-top: 0.8rem;
}

.rte img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.rte iframe {
  max-width: 100%;
}

/* Tableaux : le HTML collé arrive en <tbody> seul, sa 1re ligne sert d'en-tête.
   Les styles inline par cellule sont conservés par le sanitizer. Un tableau avec
   un vrai <thead> demanderait de reprendre les sélecteurs ci-dessous. */

/* Conteneur défilant posé au rendu par TableScroller : overflow n'agit pas sur
   une boîte display:table. */
.storvatt-table-scroll {
  overflow-x: auto;
  margin: 0 0 2.4rem;
}

/* Le conteneur est focusable (tabindex posé au rendu). */
.storvatt-table-scroll:focus-visible {
  outline: 2px solid var(--sc-gold);
  outline-offset: 3px;
}

/* min-width : seuil de défilement, valable dans tout contexte (notice,
   accordéon). border-collapse:separate préserve le rayon des cellules d'angle. */
.rte table {
  width: 100%;
  min-width: 70rem!important;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 1.5rem;
}

/* Un seul filet, horizontal : la lecture se fait par ligne. */
.rte table td,
.rte table th {
  padding: 1.5rem 1.8rem;
  border: 0;
  border-bottom: 1px solid var(--sc-line);
  text-align: left;
  vertical-align: top;
  color: var(--sc-text);
  /* Restitue les retours à la ligne littéraux du contenu collé. */
  white-space: pre-line;
  /* Pas de césure : un tableau se lit en balayage. */
  -webkit-hyphens: manual;
  hyphens: manual;
}

.rte table tr:first-child td,
.rte table tr:first-child th {
  padding-top: 1.7rem;
  padding-bottom: 1.7rem;
  border-bottom: 0;
  background: #000;
  font-weight: 700;
}

/* Rayon sur les cellules d'angle : en separate le <table> ne rogne pas son
   contenu, et arrondir le conteneur le masquerait au défilement. */
.rte table tr:first-child td:first-child,
.rte table tr:first-child th:first-child {
  border-top-left-radius: 8px;
}

.rte table tr:first-child td:last-child,
.rte table tr:first-child th:last-child {
  border-top-right-radius: 8px;
}

/* Pas de filet de clôture. */
.rte table tr:last-child td,
.rte table tr:last-child th {
  border-bottom: 0;
}

.rte table tr:last-child td:first-child,
.rte table tr:last-child th:first-child {
  border-bottom-left-radius: 8px;
}

.rte table tr:last-child td:last-child,
.rte table tr:last-child th:last-child {
  border-bottom-right-radius: 8px;
}

.rte table tr:first-child td,
.rte table tr:first-child th,
.rte table tr:first-child td *,
.rte table tr:first-child th * {
  /* !important : les cellules collées imposent souvent color inline. */
  color: #fff !important;
}

/* Zébrage à partir de la 2e ligne de corps ; :not(:first-child) écarte l'en-tête. */
.rte table tr:nth-child(odd):not(:first-child) td,
.rte table tr:nth-child(odd):not(:first-child) th {
  background: var(--sc-surface);
}

.rte table p {
  margin: 0;
  color: inherit;
  font-size: inherit;
}

.rte table p + p {
  margin-top: 0.4rem;
}

/* Encart d'instruction (block_instruction) : hors sommaire et hors temps de
   lecture. Classes au nom historique (ex-posts.notice). */
.storvatt-content__notice {
  display: flex;
  gap: 1.4rem;
  margin: 0 0 3.2rem;
  padding: 1.8rem 2rem;
  /* Teintes en dur : le thème n'a pas d'or désaturé. */
  border: 1px solid #e8ddc4;
  border-left: 3px solid var(--sc-gold);
  border-radius: 4px;
  background: #faf7f0;
}

/* min-width:0 : laisse l'item flex se réduire sous un contenu large. */
.storvatt-content__notice-body {
  min-width: 0;
}

.storvatt-content__notice-body p,
.storvatt-content__notice-body ul,
.storvatt-content__notice-body ol {
  margin: 0 0 1.2rem;
  color: var(--sc-text-muted);
  font-size: 1.5rem;
  line-height: 1.55;
}

/* Titres de la notice réduits à un label ; jamais d'ancre. */
.storvatt-content__notice-body h2,
.storvatt-content__notice-body h3 {
  margin: 0 0 0.8rem;
  color: #000;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.5rem;
  letter-spacing: 0.08em;
}

.storvatt-content__notice-body > *:last-child {
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .storvatt-content__notice {
    gap: 1.1rem;
    padding: 1.4rem 1.6rem;
  }
}

/* Blocs */
.storvatt-content-block {
  margin: 3rem 0;
}

.storvatt-content-block__headline {
  color: #000;
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(1.9rem, 2vw, 2.4rem);
}

.storvatt-content-block__tagline {
  color: var(--sc-text-muted);
  margin-bottom: 1.5rem;
}

/* Galerie : grille repliable ; requêtes de conteneur car le bloc vit tantôt
   dans la colonne de prose, tantôt en pleine largeur. */
.storvatt-content-block--gallery {
  margin: 5rem 0;
  container-type: inline-size;
  container-name: storvatt-gallery;
}

.storvatt-content-gallery__viewport {
  position: relative;
}

.storvatt-content-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  gap: 1.2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Une seule colonne possible (sous 2 × 28rem + gouttière) : piste défilante
   (scroll-snap natif, comme les suggestions), vignette à 85 % pour annoncer
   la suivante. */
@container storvatt-gallery (max-width: 571px) {
  .storvatt-content-gallery {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .storvatt-content-gallery::-webkit-scrollbar {
    display: none;
  }

  .storvatt-content-gallery__item {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }

  /* Souris : la piste se tire ; pendant le geste le snap est coupé, sinon il
     ramène la piste sous le curseur. */
  @media (hover: hover) {
    .storvatt-content-gallery {
      cursor: grab;
    }
  }

  .storvatt-content-gallery--dragging {
    scroll-snap-type: none;
    cursor: grabbing;
    user-select: none;
  }
}

/* Image seule : pas de piste, elle garde son rapport. */
.storvatt-content-gallery--single {
  display: block;
}

.storvatt-content-gallery__link {
  display: block;
  border-radius: 6px;
  background: var(--sc-surface);
  overflow: hidden;
}

.storvatt-content-gallery__link:focus-visible {
  outline: 2px solid #000;
  outline-offset: 3px;
}

/* aspect-ratio passe devant celui des attributs width/height. */
.storvatt-content-gallery__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.storvatt-content-gallery--single .storvatt-content-gallery__image {
  aspect-ratio: auto;
}

.storvatt-content-gallery__link:hover .storvatt-content-gallery__image,
.storvatt-content-gallery__link:focus-visible .storvatt-content-gallery__image {
  transform: scale(1.03);
}

/* Flèches : masquées tant que gallery.js ne les a pas jugées utiles
   ([hidden] doit battre le display:flex). */
.storvatt-content-gallery__arrow {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  transform: translateY(-50%);
  background: #fff;
  color: #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
}

.storvatt-content-gallery__arrow[hidden] {
  display: none;
}

.storvatt-content-gallery__arrow svg {
  width: 2rem;
  height: 2rem;
}

.storvatt-content-gallery__arrow:hover,
.storvatt-content-gallery__arrow:focus-visible {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.storvatt-content-gallery__arrow:focus-visible {
  outline: 2px solid #000;
  outline-offset: 2px;
}

.storvatt-content-gallery__arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.storvatt-content-gallery__arrow--prev {
  left: 1rem;
}

.storvatt-content-gallery__arrow--next {
  right: 1rem;
}

/* Tactile sans souris : le doigt suffit, pas de flèches. */
@media (hover: none) and (pointer: coarse) {
  .storvatt-content-gallery__arrow {
    display: none;
  }
}

/* Bento : mosaïque dès que trois vignettes tiennent, première image en grande
   tuile sur deux colonnes et deux rangées ; en dessous, la grille ordinaire. */
@container storvatt-gallery (min-width: 660px) {
  .storvatt-content-gallery--bento {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: dense;
  }

  .storvatt-content-gallery--bento .storvatt-content-gallery__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
  }

  /* Image en absolu : la grande tuile ne pèse pas sur la hauteur des rangées,
     fixées par les petites vignettes en 4:3. */
  .storvatt-content-gallery--bento .storvatt-content-gallery__item:first-child .storvatt-content-gallery__link {
    position: relative;
    height: 100%;
  }

  .storvatt-content-gallery--bento .storvatt-content-gallery__item:first-child .storvatt-content-gallery__image {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* Visionneuse : le <dialog> couvre la fenêtre sans fond propre, le fond est
   son ::backdrop — un clic hors de l'image ferme (gallery.js). */
.storvatt-content-lightbox {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #fff;
}

.storvatt-content-lightbox[open] {
  display: grid;
  place-items: center;
}

.storvatt-content-lightbox::backdrop {
  background: rgba(0, 0, 0, 0.88);
}

/* Page figée derrière la visionneuse (:has — Safari 15.4+, Firefox 121+). */
body:has(.storvatt-content-lightbox[open]) {
  overflow: hidden;
}

.storvatt-content-lightbox__figure {
  max-width: min(92vw, 140rem);
  margin: 0;
  text-align: center;
}

/* 14rem réservés aux commandes, au compteur et à la légende. */
.storvatt-content-lightbox__image {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 14rem);
  max-height: calc(100dvh - 14rem);
  margin: 0 auto;
  object-fit: contain;
  transition: opacity 0.2s;
}

.storvatt-content-lightbox__figure[aria-busy='true'] .storvatt-content-lightbox__image {
  opacity: 0.4;
}

.storvatt-content-lightbox__caption {
  max-width: 64ch;
  margin: 1.2rem auto 0;
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.4rem;
  line-height: 1.5;
}

/* Commandes : disques translucides, 4.4rem pour la cible tactile. */
.storvatt-content-lightbox__close,
.storvatt-content-lightbox__nav {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.4rem;
  height: 4.4rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}

.storvatt-content-lightbox__close:hover,
.storvatt-content-lightbox__nav:hover,
.storvatt-content-lightbox__close:focus-visible,
.storvatt-content-lightbox__nav:focus-visible {
  background: rgba(255, 255, 255, 0.28);
}

.storvatt-content-lightbox__close:focus-visible,
.storvatt-content-lightbox__nav:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.storvatt-content-lightbox__close svg,
.storvatt-content-lightbox__nav svg {
  width: 2.2rem;
  height: 2.2rem;
}

.storvatt-content-lightbox__close {
  top: 1.6rem;
  right: 1.6rem;
}

.storvatt-content-lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
}

.storvatt-content-lightbox__nav--prev {
  left: 1.6rem;
}

.storvatt-content-lightbox__nav--next {
  right: 1.6rem;
}

.storvatt-content-lightbox__counter {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.3rem;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .storvatt-content-gallery__image,
  .storvatt-content-lightbox__image {
    transition: none;
  }

  .storvatt-content-gallery__link:hover .storvatt-content-gallery__image,
  .storvatt-content-gallery__link:focus-visible .storvatt-content-gallery__image {
    transform: none;
  }
}

/* Accordéon : rendu d'origine. La FAQ a depuis son propre traitement. */
.storvatt-content-accordion__item {
  border-bottom: 1px solid var(--sc-line);
}

.storvatt-content-accordion__summary {
  cursor: pointer;
  padding: 1rem 0;
  font-weight: 700;
}

.storvatt-content-accordion__body {
  padding: 0 0 1rem;
}

/* FAQ : liste à filets, une question par ligne, marqueur +/− à droite. */
.storvatt-content-block--faq {
  margin: 6rem 0;
}

/* Bride l'en-tête seul, pas les questions. */
.storvatt-content-faq__head {
  margin-bottom: 2.4rem;
}

/* Casse normale : la FAQ ouvre une section de page, pas un bloc de prose. */
.storvatt-content-faq__head .storvatt-content-block__headline {
  text-transform: none;
}

.storvatt-content-faq__description {
  margin: 0;
  font-size: 1.5rem;
}

/* Contenu WYSIWYG : marges entre éléments seulement. */
.storvatt-content-faq__description p,
.storvatt-content-faq__description ul,
.storvatt-content-faq__description ol {
  margin: 0 0 1em;
}

.storvatt-content-faq__description ul,
.storvatt-content-faq__description ol {
  padding-left: 1.4em;
}

.storvatt-content-faq__description > :last-child {
  margin-bottom: 0;
}

.storvatt-content-faq__description a {
  color: inherit;
  text-decoration: underline;
}

.storvatt-content-faq__item {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--sc-line);
}

/* list-style:none retire le triangle natif ; ::-webkit-details-marker couvre
   Safari et les Chrome plus anciens. */
.storvatt-content-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.5rem 0.2rem;
  color: #000;
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

.storvatt-content-faq__question::-webkit-details-marker {
  display: none;
}

/* Marqueur +/− : deux barres, la verticale s'efface à l'ouverture. En px, c'est
   une icône. */
.storvatt-content-faq__toggle {
  position: relative;
  flex: none;
  width: 16px;
  height: 16px;
}

.storvatt-content-faq__toggle::before,
.storvatt-content-faq__toggle::after {
  content: '';
  position: absolute;
  background: #000;
}

.storvatt-content-faq__toggle::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 1.6px;
  transform: translateY(-50%);
}

.storvatt-content-faq__toggle::after {
  top: 0;
  left: 50%;
  width: 1.6px;
  height: 100%;
  transform: translateX(-50%);
  transition: transform 0.2s, opacity 0.2s;
}

.storvatt-content-faq__item[open] .storvatt-content-faq__toggle::after {
  transform: translateX(-50%) rotate(90deg);
  opacity: 0;
}

/* Mesure resserrée : la réponse est un aparté court. */
.storvatt-content-faq__answer {
  max-width: 64ch;
  padding: 0 0.2rem 1.8rem;
}

/* Évite que la marge du dernier paragraphe s'ajoute au padding. */
.storvatt-content-faq__answer > *:last-child {
  margin-bottom: 0;
}

/* Ouverture animée ; la fermeture reste instantanée sans script. */
.storvatt-content-faq__item[open] .storvatt-content-faq__answer {
  animation: storvatt-content-faq-reveal 0.2s ease-out;
}

@keyframes storvatt-content-faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Chrome 131+ : interpolation vers height:auto, fermeture comprise. */
@supports (interpolate-size: allow-keywords) {
  .storvatt-content-faq__item {
    interpolate-size: allow-keywords;
  }

  .storvatt-content-faq__item::details-content {
    height: 0;
    overflow: clip;
    transition: height 0.2s ease, content-visibility 0.2s allow-discrete;
  }

  .storvatt-content-faq__item[open]::details-content {
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .storvatt-content-faq__item[open] .storvatt-content-faq__answer {
    animation: none;
  }

  .storvatt-content-faq__item::details-content {
    transition: none;
  }
}

/* Appel à l'action : panneau clair, titre en capitales, boutons du thème. */
.storvatt-content-block--cta {
  margin: 5rem 0;
}

.storvatt-content-cta {
  padding: 4rem;
  border-radius: 10px;
  background: var(--sc-surface);
}

.storvatt-content-cta__headline {
  margin: 0 0 1.6rem;
  color: var(--sc-text);
  text-transform: uppercase;
  font-weight: 900;
  font-size: clamp(1.9rem, 2.2vw, 2.4rem);
  line-height: 1.25;
}

.storvatt-content-cta__description {
  margin: 0 0 2.8rem;
  font-size: 1.5rem;
  line-height: 1.6;
}

/* Contenu WYSIWYG : marges entre éléments seulement. */
.storvatt-content-cta__description p,
.storvatt-content-cta__description ul,
.storvatt-content-cta__description ol {
  margin: 0 0 1em;
}

.storvatt-content-cta__description ul,
.storvatt-content-cta__description ol {
  padding-left: 1.4em;
}

.storvatt-content-cta__description > :last-child {
  margin-bottom: 0;
}

.storvatt-content-cta__description a {
  color: inherit;
  text-decoration: underline;
}

.storvatt-content-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.2rem;
}

/* Deux retouches aux boutons du thème, limitées à ce panneau : graisse 700
   (.button vaut $regular) et centrage du libellé (.button est inline-block). */
.storvatt-content-cta__actions .button,
.storvatt-content-cta__actions .link-arrow {
  text-align: center;
  font-weight: 700;
}

/* Outline rempli de noir au survol. .button en plus de .button--outline pour
   passer devant la règle du thème, de même poids à une classe près. */
.storvatt-content-cta .button.button--outline:hover,
.storvatt-content-cta .button.button--outline:focus,
.storvatt-content-cta .button.button--outline:active {
  border-color: #000;
  background: #000;
  color: #fff;
}

@media (max-width: 767px) {
  .storvatt-content-cta {
    padding: 2.8rem 2rem;
  }
}

@media (max-width: 479px) {
  .storvatt-content-cta__actions .button {
    width: 100%;
  }
}

.storvatt-content-block--cta-media {
  container-type: inline-size;
  container-name: storvatt-cta;
}

.storvatt-content-cta__media {
  display: none;
}

@container storvatt-cta (min-width: 730px) {
  .storvatt-content-block--cta-media .storvatt-content-cta {
    display: grid;
    grid-template-columns: minmax(34rem, 1.3fr) minmax(30rem, 1fr);
    gap: clamp(2rem, 3cqi, 3.2rem);
    align-items: center;
    padding: clamp(2.8rem, 4.5cqi, 4rem);
  }

  .storvatt-content-block--cta-media .storvatt-content-cta__body {
    min-width: 0;
  }

  .storvatt-content-block--cta-media .storvatt-content-cta__description {
    max-width: 46ch;
  }

  .storvatt-content-block--cta-media .storvatt-content-cta__media {
    display: block;
    border-radius: 6px;
    overflow: hidden;
  }

  .storvatt-content-block--cta-media .storvatt-content-cta__media img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 36rem;
    object-fit: contain;
  }
}

/* Étapes : marche à suivre numérotée, une étape par ligne. */
.storvatt-content-block--steps {
  margin: 5rem 0;
}

/* Marqueur natif remplacé par la pastille ; la sémantique du <ol> reste. */
.storvatt-content-steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Deux colonnes : la pastille garde sa gouttière, même à deux chiffres. */
.storvatt-content-steps__item {
  display: grid;
  grid-template-columns: 3.2rem 1fr;
  gap: 0 1.6rem;
  padding: 2.8rem 0;
  border-top: 1px solid var(--sc-line);
}

/* Le filet sépare, il n'encadre pas. */
.storvatt-content-steps__item:first-child {
  padding-top: 0;
  border-top: 0;
}

.storvatt-content-steps__item:last-child {
  padding-bottom: 0;
}

/* Pastille calée sur la première ligne du titre. line-height:1 annule le 1.8
   que le thème pose sur <ol> et qui pousse le chiffre vers le bas ; le centrage
   de l'encre est traité par __number. box-sizing explicite, sinon le padding de
   repli ovalise le cercle. */
.storvatt-content-steps__marker {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: var(--sc-text);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* text-box rogne la boîte du chiffre à son encre, des capitales à la ligne de
   base (Chrome 133+, Safari 18.2+). */
.storvatt-content-steps__number {
  display: block;
  text-box: trim-both cap alphabetic;
}

/* Repli sans text-box : un pixel retiré sous le contenu. */
@supports not (text-box: trim-both cap alphabetic) {
  .storvatt-content-steps__marker {
    padding-bottom: 0.1rem;
  }
}

/* min-width:0 : laisse la colonne de grille se réduire. */
.storvatt-content-steps__content {
  min-width: 0;
}

.storvatt-content-steps__headline {
  margin: 0.3rem 0 0.8rem;
  color: var(--sc-text);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.8vw, 2rem);
  line-height: 1.3;
}

/* .rte dans le sélecteur pour passer devant les règles de texte riche, de même
   poids sinon. */
.storvatt-content-steps__body.rte p {
  margin: 0 0 1.2rem;
  color: var(--sc-text-soft);
  line-height: 1.7;
}

.storvatt-content-steps__body.rte > *:last-child {
  margin-bottom: 0;
}

/* Illustration : overflow masqué pour que le rayon rogne image et légende. */
.storvatt-content-steps__figure {
  position: relative;
  max-width: 30rem;
  margin: 1.6rem 0 0;
  border-radius: 6px;
  overflow: hidden;
}

.storvatt-content-steps__figure img {
  display: block;
  width: 100%;
  height: auto;
}

/* Légende posée sur l'image ; fond translucide pour rester lisible. */
.storvatt-content-steps__caption {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  max-width: calc(100% - 2rem);
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.72);
  color: #fff;
  font-size: 1.2rem;
  line-height: 1.35;
}

/* Conseil : aparté de l'auteur. --sc-text-soft et 1.4rem pour tenir le
   contraste AA sur l'aplat. */
.storvatt-content-steps__tip {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin: 1.6rem 0 0;
  padding: 1.2rem 1.5rem;
  border-radius: 6px;
  background: var(--sc-surface);
  color: var(--sc-text);
  font-size: 1.4rem;
  line-height: 1.6;
}

.storvatt-content-steps__tip-text {
  margin: auto 10px;
}

/* Pictogramme non compressible, aligné sur la première ligne du texte. */
.storvatt-content-steps__tip svg {
  flex: 0 0 auto;
  margin-top: 0.3rem;
  color: var(--sc-gold);
}

@media (max-width: 767px) {
  .storvatt-content-steps__item {
    grid-template-columns: 2.8rem 1fr;
    gap: 0 1.2rem;
    padding: 2.2rem 0;
  }

  .storvatt-content-steps__marker {
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.2rem;
  }

  .storvatt-content-steps__figure {
    max-width: none;
  }
}

/* Suggestions de fin d'article : en-tête et piste défilante. */
.storvatt-content-suggestions {
  margin: 6rem 0;
}

.storvatt-content-suggestions__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.6rem;
  margin-bottom: 2rem;
}

.storvatt-content-suggestions__title {
  margin: 0;
  color: #000;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 1.9rem;
}

.storvatt-content-suggestions__all {
  color: #000;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.4rem;
}

.storvatt-content-suggestions__all:hover {
  color: var(--sc-gold);
  text-decoration: none;
}

/* Au-dessus de 1024px les trois cartes tiennent dans la rangée ; en dessous la
   piste redevient défilante. */
.storvatt-content-suggestions__track {
  display: flex;
  gap: 2.2rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.storvatt-content-suggestions__track::-webkit-scrollbar {
  display: none;
}

/* Sous 640px la carte déborde (85%) pour annoncer la suivante. */
.storvatt-content-suggestions__slide {
  flex: 0 0 85%;
  scroll-snap-align: start;
}

@media (min-width: 640px) {
  .storvatt-content-suggestions__slide {
    flex-basis: calc((100% - 2.2rem) / 2);
  }
}

@media (min-width: 1024px) {
  .storvatt-content-suggestions__slide {
    flex-basis: calc((100% - 4.4rem) / 3);
  }
}

/* Sommaire : une seule structure <details> — rail sticky au-dessus de 1024px
   (ouverture forcée par toc.js), barre dépliable en dessous. */
.storvatt-content-toc {
  margin: 0 0 3rem;
  font-size: 1.4rem;
}

.storvatt-content-toc__disclosure {
  margin: 0;
}

.storvatt-content-toc__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  list-style: none;
}

.storvatt-content-toc__summary::-webkit-details-marker {
  display: none;
}

.storvatt-content-toc__list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.4rem;
}

.storvatt-content-toc__link {
  display: block;
  color: var(--sc-text-muted);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
}

.storvatt-content-toc__link:hover,
.storvatt-content-toc__link:focus-visible {
  color: #000;
  text-decoration: none;
}

/* Repli mobile : barre encadrée cliquable, liste dans un encadré séparé. */
@media (max-width: 1023px) {
  .storvatt-content-toc__summary {
    padding: 1.2rem 1.6rem;
    border: 1px solid var(--sc-line);
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.4rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .storvatt-content-toc__chevron {
    flex: none;
    transition: transform 0.2s;
  }

  .storvatt-content-toc__disclosure[open] .storvatt-content-toc__chevron {
    transform: rotate(90deg);
  }

  .storvatt-content-toc__list {
    margin-top: 0.8rem;
    padding: 0.4rem;
    border: 1px solid var(--sc-line);
    border-radius: 4px;
  }

  .storvatt-content-toc__link {
    padding: 0.9rem 1.4rem;
  }

  .storvatt-content-toc__item--h3 .storvatt-content-toc__link {
    padding-left: 2.8rem;
  }
}

/* Rail desktop ; `top` dégage le .header-top fixe du thème (85px). */
@media (min-width: 1024px) {
  .storvatt-content-toc {
    position: sticky;
    top: 100px;
    align-self: start;
    margin: 0;
  }

  .storvatt-content-toc__summary {
    margin-bottom: 1.2rem;
    cursor: default;
    font-size: 1.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sc-text-muted);
  }

  .storvatt-content-toc__chevron {
    display: none;
  }

  .storvatt-content-toc__list {
    border-left: 1px solid var(--sc-line);
  }

  .storvatt-content-toc__link {
    margin-left: -1px;
    padding: 0.7rem 0 0.7rem 1.4rem;
    border-left: 2px solid transparent;
  }

  .storvatt-content-toc__item--h3 .storvatt-content-toc__link {
    padding-left: 2.8rem;
    font-size: 1.3rem;
  }

  .storvatt-content-toc__link--active {
    color: #000;
    border-left-color: #000;
    font-weight: 700;
  }
}

.storvatt-content-block--align-center {
  text-align: center;
}

.storvatt-content-block--align-right {
  text-align: right;
}

/* Césure indispensable en justifié (mots longs du français), via le lang du <html>. */
.storvatt-content-block--align-justify {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* En-tête des pages de liste : titre et accroche à gauche, filtres centrés. */
.storvatt-content-listhead {
  max-width: 1200px;
  margin: 3rem auto;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--sc-line);
}

/* Texte suivi : --sc-text-soft, pas --sc-text-muted. */
.storvatt-content-listhead__intro {
  margin: 1.6rem 0 0;
  color: var(--sc-text-soft);
  font-size: 1.6rem;
  line-height: 1.6;
}

.storvatt-content-listhead__filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: 3.5rem;
}

.storvatt-content-listhead__nav {
  max-width: 100%;
}

.storvatt-content-search {
  display: flex;
  gap: 0.8rem;
  width: 100%;
  max-width: 560px;
  margin: 0;
}

.storvatt-content-search__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 1.1rem 1.6rem;
  border: 1px solid var(--sc-line);
  border-radius: 6px;
  color: var(--sc-text);
  background: #fff;
  font-size: 1.5rem;
  line-height: 1.2;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.15s;
}

.storvatt-content-search__input:focus {
  border-color: #000;
  outline: none;
}

.storvatt-content-search__input::placeholder {
  color: var(--sc-text-muted);
}

.storvatt-content-search__submit {
  flex: 0 0 auto;
  padding: 1.1rem 2rem;
  border: 1px solid #000;
  cursor: pointer;
}

/* Nombre de résultats ; le lien d'effacement reste un lien, pas une pastille. */
.storvatt-content-search__status {
  margin: 0.4rem 0 0;
  color: var(--sc-text-soft);
  font-size: 1.4rem;
  line-height: 1.5;
  text-align: center;
}

.storvatt-content-search__query {
  color: var(--sc-text);
}

.storvatt-content-search__reset {
  margin-left: 0.6rem;
  color: var(--sc-text-soft);
  text-decoration: underline;
}

.storvatt-content-search__reset:hover,
.storvatt-content-search__reset:focus {
  color: #000;
}

@media (max-width: 767px) {
  .storvatt-content-search {
    flex-direction: column;
  }

  .storvatt-content-search__submit {
    width: 100%;
    text-align: center;
  }
}

.storvatt-content-listhead__pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.storvatt-content-listhead__pill {
  display: inline-block;
  padding: 1rem 2rem;
  border: 1px solid var(--sc-line);
  border-radius: 8px;
  color: var(--sc-text-soft);
  background: #fff;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.storvatt-content-listhead__pill:hover,
.storvatt-content-listhead__pill:focus {
  color: #000;
  border-color: #000;
  text-decoration: none;
}

/* État courant porté par l'aplat, pas par la graisse seule. */
.storvatt-content-listhead__pill--current,
.storvatt-content-listhead__pill--current:hover,
.storvatt-content-listhead__pill--current:focus {
  color: #fff;
  border-color: #000;
  background: #000;
}

/* Rangée des types : capitales et rayon du .button du thème (6px), pour ne pas
   la confondre avec les catégories. */
.storvatt-content-listhead__pill--type {
  border-radius: 6px;
  text-transform: uppercase;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: 0.04em;
}

.storvatt-content-listhead__pill--category {
  padding: 0.7rem 1.6rem;
  font-size: 1.3rem;
  font-weight: 700;
}

@media (max-width: 767px) {
  .storvatt-content-listhead {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
  }

  .storvatt-content-listhead__filters {
    margin-top: 2.5rem;
  }

  .storvatt-content-listhead__pill--type {
    padding: 0.8rem 1.6rem;
    font-size: 1.3rem;
  }
}

.storvatt-content__categories {
  margin: 0 0 1rem;
}