/* =========================================================
   LIFESTYLE — la rubrique légère.

   Elle ne suit pas la charte du site : ici c'est le magazine,
   pas la maison d'édition. Fuchsia, jaune, océan ; Playfair et
   Bebas ; des fiches, des encadrés, une colonne de service.

   Tout est enfermé sous .rubrique-lifestyle : aucune de ces
   règles ne peut atteindre le reste du site.
   ========================================================= */

.rubrique-lifestyle {
  --lf-fuchsia: #ff1f8e;
  --lf-fuchsia-fonce: #d4006e;
  --lf-jaune: #f5e642;
  --lf-ocean: #1b6ca8;
  --lf-ocean-fonce: #0d4a7a;
  --lf-noir: #1a1a1a;
  --lf-anthracite: #2d2d2d;
  --lf-beige: #e8ddd0;
  --lf-ivoire: #faf6f0;
  --lf-taupe: #b5a99a;
  --lf-rose: #ffd6ec;

  --lf-titre: 'Playfair Display', Georgia, serif;
  --lf-enseigne: 'Bebas Neue', 'Poppins', sans-serif;
  --lf-texte: 'Lora', Georgia, serif;
  --lf-plume: 'Dancing Script', 'Playfair Display', cursive;

  background: var(--lf-ivoire);
}

/* ---------- Le bandeau défilant ---------- */
.lf-ticker {
  background: linear-gradient(90deg, var(--lf-ocean), var(--lf-ocean-fonce));
  overflow: hidden; white-space: nowrap; padding: 7px 0;
}
.lf-ticker span {
  display: inline-block;
  font-family: var(--lf-enseigne); font-size: .9rem; letter-spacing: 4px; color: #fff;
  animation: lf-defile 40s linear infinite;
}
@keyframes lf-defile {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}
@media (prefers-reduced-motion: reduce) {
  .lf-ticker span { animation: none; transform: none; padding-left: 24px; }
}

/* Le galon à trois couleurs, sous le bandeau */
.lf-galon {
  height: 5px;
  background: repeating-linear-gradient(90deg,
    var(--lf-ocean) 0, var(--lf-ocean) 40px,
    var(--lf-jaune) 40px, var(--lf-jaune) 80px,
    var(--lf-fuchsia) 80px, var(--lf-fuchsia) 120px);
}

/* ---------- Le grand titre, sur la photo ---------- */
.lf-une {
  position: relative; min-height: 62vh;
  display: flex; align-items: flex-end; overflow: hidden;
  /* Sans photo, la une reste une image : un dégradé de mer qui descend
     vers la nuit, strié comme une houle. La photo, quand il y en a une,
     se pose par-dessus. */
  background:
    repeating-linear-gradient(115deg,
      rgba(255, 255, 255, .035) 0 2px, transparent 2px 22px),
    radial-gradient(120% 80% at 78% 12%, rgba(245, 230, 66, .22), transparent 58%),
    linear-gradient(to bottom, var(--lf-ocean) 0%, var(--lf-ocean-fonce) 38%, var(--lf-noir) 100%);
}
.lf-une-fond {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}
/* Le voile ne s'applique que s'il y a une photo dessous */
.lf-une-fond:not([style]) { display: none; }
.lf-une-fond::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(27, 108, 168, .10) 0%, rgba(26, 26, 26, .58) 50%, rgba(26, 26, 26, 1) 100%);
}
.lf-une-texte {
  position: relative; z-index: 2;
  max-width: 880px; width: 100%; margin: 0 auto;
  padding: 3rem 2rem 4rem;
}
.lf-rubrique {
  font-family: var(--lf-enseigne); background: var(--lf-ocean); color: #fff;
  padding: 5px 16px; font-size: .9rem; letter-spacing: 4px;
  display: inline-block; margin-bottom: 1.2rem; text-decoration: none;
}
.lf-rubrique:hover { background: var(--lf-fuchsia); color: #fff; }
.lf-titre {
  font-family: var(--lf-titre); font-weight: 900;
  font-size: clamp(2rem, 4.5vw, 3.8rem); line-height: 1.05;
  color: #fff; margin: 0 0 1.2rem; text-wrap: balance;
}
.lf-titre em { color: var(--lf-jaune); font-style: italic; }
.lf-chapeau {
  color: rgba(255, 255, 255, .78); font-family: var(--lf-texte);
  font-size: 1.05rem; line-height: 1.72; max-width: 620px; margin: 0 0 1.8rem;
}
.lf-signature { display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.lf-plume { font-family: var(--lf-plume); font-size: 1.15rem; color: var(--lf-jaune); }
.lf-date, .lf-duree { font-family: var(--lf-enseigne); font-size: .75rem; letter-spacing: 3px; }
.lf-date { color: rgba(255, 255, 255, .45); }
.lf-duree { color: var(--lf-fuchsia); }

/* La dentelure qui referme la photo */
.lf-dentelure {
  height: 16px;
  background:
    linear-gradient(135deg, var(--lf-ivoire) 25%, transparent 25%) -10px 0,
    linear-gradient(225deg, var(--lf-ivoire) 25%, transparent 25%) -10px 0,
    linear-gradient(315deg, var(--lf-ivoire) 25%, transparent 25%),
    linear-gradient(45deg,  var(--lf-ivoire) 25%, transparent 25%);
  background-size: 20px 16px;
  background-color: var(--lf-ocean);
}

/* ---------- La colonne de lecture ---------- */
.lf-page { max-width: 1180px; margin: 0 auto; padding: 3rem 24px 5rem; }
.lf-corps { font-family: var(--lf-texte); }
.lf-corps::after { content: ''; display: block; clear: both; }

.lf-corps p { font-size: 1.03rem; line-height: 1.92; color: #3a3a3a; margin: 0 0 1.5rem; }
.lf-corps h2 {
  font-family: var(--lf-titre); font-weight: 900; font-size: 1.45rem;
  color: var(--lf-noir); margin: 2.8rem 0 1rem;
  padding-left: 14px; border-left: 4px solid var(--lf-fuchsia);
}
.lf-corps h3 {
  font-family: var(--lf-enseigne); font-size: .88rem; letter-spacing: 3px;
  color: var(--lf-fuchsia); margin: 2rem 0 .6rem;
}
.lf-corps a { color: var(--lf-ocean); text-decoration: underline; text-underline-offset: 2px; }
.lf-corps a:hover { color: var(--lf-fuchsia); }
.lf-corps ul, .lf-corps ol { margin: 0 0 1.5rem 1.2rem; line-height: 1.9; }
.lf-corps img { max-width: 100%; height: auto; }

.lf-corps blockquote {
  display: flow-root;
  font-family: var(--lf-titre); font-style: italic; font-size: 1.18rem;
  color: var(--lf-fuchsia);
  border-top: 2px solid var(--lf-fuchsia); border-bottom: 2px solid var(--lf-fuchsia);
  padding: 1.4rem 0; margin: 2.2rem 0; text-align: center; line-height: 1.6;
}

/* ---------- Les encadrés ---------- */
.fuchsia-box, .dark-box, .jaune-box, .ocean-box {
  display: flow-root;
  padding: 1.4rem 1.6rem; margin: 2rem 0; font-size: .96rem; line-height: 1.82;
}
.fuchsia-box { background: rgba(255, 31, 142, .06); border-left: 4px solid var(--lf-fuchsia); }
.fuchsia-box strong {
  font-family: var(--lf-enseigne); letter-spacing: 1.5px; font-size: .88rem;
  display: block; margin-bottom: .5rem; color: var(--lf-fuchsia);
}
.ocean-box { background: rgba(27, 108, 168, .07); border-left: 4px solid var(--lf-ocean); }
.ocean-box strong {
  font-family: var(--lf-enseigne); letter-spacing: 1.5px; font-size: .88rem;
  display: block; margin-bottom: .5rem; color: var(--lf-ocean);
}
.dark-box { background: var(--lf-noir); color: #fff; border-left: 4px solid var(--lf-jaune); }
.dark-box strong { color: var(--lf-jaune); font-family: var(--lf-enseigne); letter-spacing: 1.5px; }
.jaune-box { background: var(--lf-jaune); color: var(--lf-noir); }
.jaune-box strong {
  font-family: var(--lf-enseigne); letter-spacing: 1.5px; font-size: .88rem;
  display: block; margin-bottom: .5rem;
}

/* ---------- Les fiches (hôtels, adresses, lieux) ---------- */
.hotel-card {
  /* Une fiche est un bloc plein : sans contexte propre elle glisserait
     sous la colonne de service au lieu de se ranger a cote. */
  display: flow-root;
  background: #fff; border: 1px solid var(--lf-beige);
  border-top: 4px solid var(--lf-fuchsia);
  padding: 1.5rem 1.6rem; margin: 2.2rem 0;
}
.hotel-card-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: .8rem; flex-wrap: wrap;
}
.hotel-card h3 {
  font-family: var(--lf-enseigne); font-size: 1.1rem; letter-spacing: 2px;
  color: var(--lf-noir); margin: 0;
}
.stars { color: var(--lf-jaune); font-size: .9rem; margin-left: .3rem;
         -webkit-text-stroke: .6px var(--lf-taupe); }
.hotel-badge {
  font-family: var(--lf-enseigne); font-size: .65rem; letter-spacing: 2px;
  padding: 4px 10px; color: #fff; white-space: nowrap;
}
.badge-5 { background: var(--lf-noir); }
.badge-4 { background: var(--lf-ocean); }
.badge-3 { background: var(--lf-taupe); }
.hotel-accroche {
  font-family: var(--lf-titre); font-style: italic; font-size: .9rem;
  color: var(--lf-taupe); margin-bottom: 1rem;
}
.hotel-infos { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .8rem; margin-bottom: 1rem; }
.hotel-info { font-size: .86rem; display: flex; gap: .4rem; align-items: flex-start; line-height: 1.45; }
.hotel-info-emoji { flex-shrink: 0; }
.hotel-info-label {
  font-family: var(--lf-enseigne); font-size: .66rem; letter-spacing: 1.5px;
  color: var(--lf-fuchsia); display: block;
}
.hotel-verdict {
  font-size: .88rem; color: #444; line-height: 1.7;
  border-top: 1px solid var(--lf-beige); padding-top: .9rem; margin-top: .5rem;
}
.hotel-verdict strong { color: var(--lf-fuchsia); font-style: normal; }

/* ---------- Les produits conseillés ---------- */
.produits-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
  gap: .8rem; margin: 1.4rem 0 .6rem;
  border-left: 4px solid var(--lf-fuchsia); padding-left: 1rem;
}
.produit {
  background: #fff; border: 1px solid var(--lf-beige);
  padding: .9rem 1rem; display: flex; flex-direction: column; gap: .4rem;
}
.produit-emoji { font-size: 1.4rem; }
.produit-name { font-family: var(--lf-titre); font-weight: 700; font-size: .85rem;
                color: var(--lf-noir); line-height: 1.3; }
.produit-desc { font-size: .78rem; line-height: 1.55; color: #666; flex: 1; }
.produit-prix { font-family: var(--lf-enseigne); font-size: .82rem; color: var(--lf-fuchsia); }
.produit-prix small { font-family: var(--lf-texte); font-size: .65rem;
                      color: var(--lf-taupe); font-style: italic; letter-spacing: 0; }
.produit-btn {
  display: flex; align-items: center; justify-content: center; min-height: 44px;
  background: var(--lf-fuchsia); color: #fff;
  font-family: var(--lf-enseigne); font-size: .68rem; letter-spacing: 2px;
  text-decoration: none; margin-top: auto; transition: background .2s;
}
.produit-btn:hover { background: var(--lf-fuchsia-fonce); color: #fff; }
.produits-legal {
  font-size: .68rem !important; color: var(--lf-taupe); font-style: italic;
  margin: 0 0 1.8rem !important; padding-left: 1rem; line-height: 1.6 !important;
}
.produits-legal a { color: inherit; }

/* ---------- Les photographies ---------- */
/* L'éditeur pose ses images en <figure class="art-figure">. Sans style
   propre à la rubrique, elles arrivaient nues au milieu du texte. */
.lf-corps .art-figure {
  display: flow-root;
  margin: 2.4rem 0;
  background: #fff;
  border: 1px solid var(--lf-beige);
  padding: 10px 10px 0;
  max-width: 100%;
}
.lf-corps .art-figure img {
  width: 100%; height: auto; display: block;
}
.lf-corps .art-figure figcaption {
  font-family: var(--lf-enseigne); font-size: .78rem; letter-spacing: 1.4px;
  line-height: 1.5; color: var(--lf-taupe);
  padding: 11px 4px 12px;
}
.lf-corps .art-figure .fig-credit {
  display: block; font-family: var(--lf-texte); font-style: italic;
  font-size: .7rem; letter-spacing: 0; color: var(--lf-taupe); margin-top: 3px;
}

/* Placée à gauche ou à droite, elle laisse le texte couler autour */
.lf-corps .art-figure.pos-gauche { float: left; margin: .4rem 2.2rem 1.8rem 0; max-width: 46%; }
.lf-corps .art-figure.pos-droite { float: right; margin: .4rem 0 1.8rem 2.2rem; max-width: 46%; }
.lf-corps .art-figure.pos-centre { margin-left: auto; margin-right: auto; }

/* Dans une fiche d'adresse, la photo se range à droite du texte */
.hotel-card .art-figure {
  float: right; width: 40%; margin: 0 0 1rem 1.4rem;
  border: 0; padding: 0; background: none;
}
.hotel-card .art-figure img { border-radius: 4px; }

@media (max-width: 760px) {
  .lf-corps .art-figure.pos-gauche,
  .lf-corps .art-figure.pos-droite,
  .hotel-card .art-figure {
    float: none; width: 100%; max-width: 100%; margin: 1.8rem 0;
  }
}

/* ---------- La colonne de service ---------- */
.lf-cote {
  float: right; width: 300px; margin: .3rem 0 2rem 2.6rem;
  font-family: var(--lf-texte);
}
.lf-cote-bloc { margin-bottom: 2rem; }
.lf-cote-titre {
  font-family: var(--lf-enseigne); font-size: 1rem; letter-spacing: 4px;
  color: var(--lf-noir); margin-bottom: 1rem;
  padding-bottom: 6px; border-bottom: 2px solid var(--lf-fuchsia);
}
.lf-sommaire, .lf-recap { background: #fff; border: 1px solid var(--lf-beige); padding: 1rem 1.2rem; }
.lf-sommaire li, .lf-recap-item {
  list-style: none; padding: .5rem 0; border-bottom: 1px solid var(--lf-beige);
}
.lf-sommaire { margin: 0; }
.lf-sommaire li:last-child, .lf-recap-item:last-child { border-bottom: none; }
.lf-sommaire a {
  /* Un sommaire se touche au pouce : 44 px, comme partout sur le site */
  display: flex; align-items: flex-start; gap: .6rem; min-height: 44px;
  font-size: .82rem; color: var(--lf-anthracite); text-decoration: none; line-height: 1.4;
}
.lf-sommaire a::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--lf-fuchsia); flex-shrink: 0; margin-top: 15px;
}
.lf-sommaire a:hover { color: var(--lf-fuchsia); }
.lf-recap-item { font-size: .83rem; }
.lf-recap-nom { font-family: var(--lf-enseigne); font-size: .8rem; letter-spacing: 1.5px;
                color: var(--lf-noir); display: block; }
.lf-recap-detail { color: var(--lf-taupe); font-size: .78rem; }
.lf-aretenir { background: var(--lf-rose); padding: 1.2rem 1.3rem; }
.lf-aretenir p { font-family: var(--lf-titre); font-style: italic; font-size: .88rem;
                 color: var(--lf-anthracite); line-height: 1.65; margin: 0; }
.lf-aretenir cite { font-family: var(--lf-enseigne); font-size: .65rem; letter-spacing: 2px;
                    color: var(--lf-fuchsia); display: block; margin-top: .4rem; font-style: normal; }

/* ---------- Les étiquettes de fin ---------- */
.lf-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 2rem 0 0; padding: 0; }
.lf-tags li { list-style: none; }
.lf-tags a, .lf-tags span {
  display: inline-flex; align-items: center; min-height: 32px;
  font-family: var(--lf-enseigne); font-size: .72rem; letter-spacing: 2.5px;
  padding: 4px 12px; border: 1.5px solid var(--lf-taupe); color: var(--lf-taupe);
  text-decoration: none;
}
.lf-tags a:hover { border-color: var(--lf-fuchsia); color: var(--lf-fuchsia); }

/* ---------- Le pied de l'article ---------- */
.lf-pied { max-width: 1180px; margin: 0 auto; padding: 0 24px 4rem; }
.lf-pied .partage-titre, .lf-pied .section-head h2 {
  font-family: var(--lf-enseigne); letter-spacing: 3px; color: var(--lf-noir);
}

/* ---------- Les cartes « à lire aussi » ---------- */
.lf-suite { background: var(--lf-noir); padding: 3rem 0 3.4rem; }
.lf-suite-titre {
  font-family: var(--lf-enseigne); font-size: 1.15rem; letter-spacing: 5px;
  color: #fff; margin: 0 0 1.4rem;
  padding-bottom: 8px; border-bottom: 2px solid var(--lf-fuchsia);
  display: flex; align-items: center; gap: .6rem;
}
.lf-suite-titre::before { content: '✦'; color: var(--lf-fuchsia); }
.lf-suite-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.lf-carte {
  background: #fff; border: 1px solid rgba(255, 255, 255, .12);
  text-decoration: none; display: flex; flex-direction: column;
  transition: transform .2s, box-shadow .2s;
}
.lf-carte:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(255, 31, 142, .22); }
.lf-carte-img { width: 100%; height: 150px; object-fit: cover; display: block; background: var(--lf-beige); }
.lf-carte-vide {
  width: 100%; height: 150px; display: flex; align-items: center; justify-content: center;
  font-size: 2.6rem; background: rgba(27, 108, 168, .12);
}
.lf-carte-corps { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; flex: 1; }
.lf-carte-rub {
  font-family: var(--lf-enseigne); font-size: .62rem; letter-spacing: 3px;
  color: #fff; background: var(--lf-ocean); padding: 3px 9px;
  display: inline-block; margin-bottom: .5rem; align-self: flex-start;
}
.lf-carte-titre {
  font-family: var(--lf-titre); font-weight: 700; font-size: .95rem;
  color: var(--lf-noir); line-height: 1.35; margin: 0 0 .4rem; flex: 1;
}
.lf-carte-meta { font-family: var(--lf-enseigne); font-size: .62rem; letter-spacing: 2px;
                 color: var(--lf-taupe); margin-top: auto; }

/* ---------- Les grilles de la page de rubrique ---------- */
.lf-index { background: var(--lf-ivoire); padding: 2.6rem 0 4rem; }
.lf-index-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.lf-index .lf-carte { border-color: var(--lf-beige); }
.lf-index .lf-carte:hover { box-shadow: 0 8px 24px rgba(255, 31, 142, .14); }
.lf-index-tete { padding: 2.6rem 0 0; }
.lf-index-tete h1 {
  font-family: var(--lf-titre); font-weight: 900; font-size: clamp(2rem, 5vw, 3.4rem);
  color: var(--lf-noir); margin: .6rem 0 .8rem; line-height: 1.05;
}
.lf-index-tete p { font-family: var(--lf-texte); color: #55504a; font-size: 1.02rem;
                   line-height: 1.8; max-width: 620px; margin: 0; }
.lf-vide { font-family: var(--lf-texte); color: var(--lf-taupe); font-style: italic; }

/* ---------- Écrans étroits ---------- */
@media (max-width: 960px) {
  .lf-cote { float: none; width: 100%; margin: 2rem 0; }
  .hotel-infos { grid-template-columns: 1fr; }
  .lf-suite-grille, .lf-index-grille { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .lf-une { min-height: 52vh; }
  .lf-une-texte { padding: 2rem 1.2rem 2.5rem; }
  .lf-page { padding: 2rem 1.2rem 3rem; }
  .lf-pied { padding: 0 1.2rem 3rem; }
  .produits-grid { grid-template-columns: 1fr 1fr; }
  .hotel-card-header { flex-direction: column; }
}
@media (max-width: 460px) {
  .lf-suite-grille, .lf-index-grille, .produits-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   LE QUIZ, ET LES ÉTIQUETTES

   Repris tel quel de l'article d'origine, aux couleurs de la
   rubrique : ses `--fuchsia`, `--jaune`, `--noir` valaient déjà
   exactement les `--lf-…` d'ici. On ne redéclare donc rien —
   on emploie celles de la maison, et le jour où le fuchsia de
   Lifestyle changera, le quiz changera avec lui.
   ========================================================= */

.quiz-wrap {
  background: #fff;
  border: 2px solid var(--lf-fuchsia);
  margin: 2.5rem 0;
  overflow: hidden;
}

.quiz-header { background: var(--lf-fuchsia); padding: 1.2rem 1.6rem; }
.quiz-header h3 {
  font-family: var(--lf-enseigne);
  font-size: 1.1rem; letter-spacing: 3px; color: #fff; margin: 0;
}
.quiz-header p {
  font-family: var(--lf-texte);
  font-style: italic; font-size: .85rem;
  color: rgba(255, 255, 255, .8); margin-top: .3rem;
}

.quiz-progress {
  background: rgba(255, 255, 255, .2);
  height: 4px; margin-top: .8rem; border-radius: 2px;
}
.quiz-progress-bar {
  background: var(--lf-jaune);
  height: 4px; border-radius: 2px; transition: width .4s ease;
}
@media (prefers-reduced-motion: reduce) {
  .quiz-progress-bar { transition: none; }
}

/* Une question à la fois : les six autres ne sont pas cachées par
   pudeur, elles le sont parce qu'un quiz qui montre ses sept
   questions d'un coup n'est plus un quiz, c'est un formulaire. */
.quiz-question { padding: 1.4rem 1.6rem; display: none; }
.quiz-question.active { display: block; }

.quiz-q-num {
  font-family: var(--lf-enseigne);
  font-size: .65rem; letter-spacing: 3px;
  color: var(--lf-taupe); margin-bottom: .5rem;
}
.quiz-q-text {
  font-family: var(--lf-titre);
  font-weight: 700; font-size: 1.1rem;
  color: var(--lf-noir); line-height: 1.4; margin-bottom: 1.2rem;
}

.quiz-options { display: flex; flex-direction: column; gap: .6rem; }

.quiz-option {
  background: var(--lf-ivoire);
  border: 1.5px solid var(--lf-beige);
  padding: .9rem 1.1rem;
  font-family: var(--lf-texte);
  font-size: .92rem;
  color: var(--lf-anthracite);
  cursor: pointer;
  transition: border-color .2s, background .2s;
  text-align: left;
  border-radius: 0;
}
.quiz-option:hover { border-color: var(--lf-fuchsia); background: var(--lf-rose); }
.quiz-option:focus-visible { outline: 2px solid var(--lf-fuchsia); outline-offset: 2px; }
.quiz-option.selected {
  border-color: var(--lf-fuchsia);
  background: rgba(255, 31, 142, .08);
  color: var(--lf-noir);
}

/* ---------- Le résultat ---------- */

.quiz-result { padding: 1.6rem; display: none; }
.quiz-result.active { display: block; }

.result-label {
  font-family: var(--lf-enseigne);
  font-size: .7rem; letter-spacing: 4px;
  color: var(--lf-fuchsia); margin-bottom: .5rem;
}
.result-title {
  font-family: var(--lf-titre);
  font-weight: 900; font-size: 1.6rem;
  color: var(--lf-noir); margin-bottom: .8rem; line-height: 1.2;
}
.result-desc {
  font-family: var(--lf-texte);
  font-size: .96rem; line-height: 1.82;
  color: #3a3a3a; margin-bottom: 1.2rem;
}
.result-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1.2rem; }
.result-tag {
  font-family: var(--lf-enseigne);
  font-size: .65rem; letter-spacing: 2px;
  padding: 4px 12px; background: var(--lf-fuchsia); color: #fff;
}
.result-restart {
  font-family: var(--lf-enseigne);
  font-size: .72rem; letter-spacing: 2px;
  background: transparent;
  border: 1.5px solid var(--lf-fuchsia);
  color: var(--lf-fuchsia);
  padding: 8px 20px; cursor: pointer;
  transition: background .2s, color .2s;
}
.result-restart:hover { background: var(--lf-fuchsia); color: #fff; }

/* ---------- Les étiquettes, au bas de l'article ---------- */

.tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; }
.tag {
  font-family: var(--lf-enseigne);
  font-size: .7rem; letter-spacing: 2.5px;
  padding: 4px 12px;
  border: 1.5px solid var(--lf-taupe);
  color: var(--lf-taupe);
}

@media (max-width: 600px) {
  .quiz-header, .quiz-question, .quiz-result { padding-left: 1.1rem; padding-right: 1.1rem; }
  .result-title { font-size: 1.35rem; }
}