/* Nouveau design (essai, branche recette) : styles communs à toutes les pages v2. */
.hp { --corail:#ff6248; --corail-clair:#ffece8; --nuit:#0e0e10; --texte:#3f4a52; --gris:#7a848b; --fond:#f7f4ef; --bord:#efe9e4;
  font-family: Barlow, Arial, sans-serif; font-weight: 400; color: var(--texte); background: #fff; overflow-x: clip; }
.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp a { color: inherit; text-decoration: none; }
.hp img { max-width: 100%; }
.hp p { margin: 0; }
.hp-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-conteneur { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.hp em { font-style: normal; color: var(--corail); }
.hp-h2 { letter-spacing: -.03em;  margin: 0; font: 800 clamp(28px, 3.4vw, 40px)/1.08 Barlow, Arial, sans-serif; color: #111;  }
.hp-intro { max-width: 420px; font-size: 15px; line-height: 1.6; color: var(--gris); }
.hp-intro p { margin: 0 0 16px; }
.hp-section { padding-top: 72px; }
.hp-titre-ligne { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.hp-lien { display: inline-flex; align-items: center; gap: 6px; font: 700 14px Barlow, Arial, sans-serif; color: var(--corail) !important; }
.hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 15px 28px; border-radius: 999px; font: 700 15px Barlow, Arial, sans-serif; transition: transform .15s, box-shadow .15s; }
.hp-btn:hover { transform: translateY(-2px); }
.hp-btn-plein { background: var(--corail); color: #fff !important; box-shadow: 0 10px 22px rgba(255,90,67,.3); }
.hp-btn-ligne { border: 2px solid #111; color: #111 !important; background: #fff; }
.hp-btn-petit { padding: 11px 20px; font-size: 14px; }

.hp-entete { position: absolute; z-index: 20; left: 50%; transform: translateX(-50%); top: 16px; width: calc(100% - 32px); max-width: 1200px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 14px 10px 22px; background: #fff; border-radius: 16px; box-shadow: 0 10px 30px rgba(21,36,45,.08); }
.hp-logo { display: inline-flex; align-items: center; gap: 10px; font: 800 26px/1 Barlow, Arial, sans-serif; letter-spacing: -.04em; color: #0e0e10 !important; white-space: nowrap; }
.hp-logo img { height: 34px; width: auto; display: block; }
.hp-logo b { font-weight: 800; color: var(--corail); }
.hp-logo-blanc { color: #fff !important; margin-bottom: 16px; }
.hp-nav { display: flex; align-items: center; gap: 24px; }
.hp-nav ul { display: flex; align-items: center; gap: 26px; list-style: none; margin: 0; padding: 0; font: 700 14px Barlow, Arial, sans-serif; color: #111; }
.hp-menu-cat { position: relative; }
.hp-menu-cat > a { display: inline-flex; gap: 4px; align-items: center; padding: 10px 0; }
.hp-sous-menu { position: absolute; top: 100%; left: -16px; min-width: 200px; padding: 8px; background: #fff; border-radius: 12px; box-shadow: 0 14px 34px rgba(21,36,45,.14);
  display: grid; opacity: 0; visibility: hidden; transform: translateY(6px); transition: .15s; }
.hp-sous-menu a { padding: 8px 12px; border-radius: 8px; font-weight: 400; }
.hp-sous-menu a:hover { background: var(--corail-clair); color: var(--corail); }
.hp-menu-cat:hover .hp-sous-menu, .hp-menu-cat:focus-within .hp-sous-menu { opacity: 1; visibility: visible; transform: none; }
.hp-separateur { width: 1px; height: 22px; background: var(--bord); }
.hp-burger { display: none; }

.hp-btn-contour { border: 2px solid var(--corail); color: var(--corail) !important; background: #fff; }
.hp-mobile { display: none !important; }
.hp-hero { position: relative; min-height: 700px; display: flex; flex-direction: column; justify-content: center; padding: 130px 0 120px; background: #efe6dd; overflow: hidden; }
.hp-hero-visuel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 35%; }
@media (min-width: 992px) { .hp-hero-texte { padding-right: 38%; } .hp-hero-chapo { font-size: 18px; max-width: 560px; } }
.hp-hero-texte { position: relative; z-index: 1; width: 100%; }
.hp-hero-titre {  max-width: 11.2em; font: 800 clamp(40px, 6.2vw, 88px)/.94 Barlow, Arial, sans-serif; color: #111; letter-spacing: -.04em; margin: 0 0 22px !important; }
.hp-hero-titre em { display: block; }
.hp-hero-chapo { max-width: 470px; font-size: 17px; font-weight: 500; line-height: 1.6; color: #333; margin-bottom: 22px !important; }
.hp-preuve { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.hp-preuve strong { display: block; font: 800 16px Barlow, Arial, sans-serif; color: #111; }
.hp-preuve small { font-size: 12px; color: var(--gris); }
.hp-avatars { display: block; height: 46px; width: auto; }
.hp-av { width: 38px; height: 38px; border-radius: 50%; display: inline-grid; place-items: center; font: 800 12px Barlow, Arial, sans-serif; flex: none; }
.hp-av-0 { background: #ffd9d1; color: #b33a26; } .hp-av-1 { background: #d6ecf6; color: #1e6b8c; } .hp-av-2 { background: #fde7b0; color: #8a5a00; }
.hp-boutons { display: flex; gap: 12px; flex-wrap: wrap; }

.hp-marques { position: relative; z-index: 2; margin-top: -64px; padding-top: 34px; background: var(--fond); border-radius: 55% 45% 0 0 / 64px 28px 0 0; }
.hp-marques .hp-conteneur { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding-top: 22px; padding-bottom: 22px; overflow-x: auto; scrollbar-width: none; }
.hp-marques img { height: 26px; width: auto; max-width: 120px; object-fit: contain; filter: grayscale(1) brightness(.55); opacity: .8; transition: .2s; flex: none; }
.hp-marques img:hover { filter: none; opacity: 1; }

.hp-avantages { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hp-avantage { display: flex; gap: 14px; align-items: flex-start; padding: 22px 20px; border: 1px solid var(--bord); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(21,36,45,.04); }
.hp-avantage strong { letter-spacing: -.03em;  display: block; font: 800 16px Barlow, Arial, sans-serif; color: #111; margin-bottom: 4px; }
.hp-avantage p { font-size: 13px; line-height: 1.5; color: var(--gris); }
.hp-icone { color: var(--corail); flex: none; display: inline-flex; }

.hp-grille-offres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hp-grille-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-offre { position: relative; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--bord); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(21,36,45,.05); transition: transform .15s, box-shadow .15s; }
.hp-offre:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(21,36,45,.1); }
.hp-tag { position: absolute; top: 14px; right: 14px; font: 700 11px Barlow, Arial, sans-serif; padding: 4px 10px; border-radius: 999px; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.hp-offre-logo { height: 40px; display: flex; align-items: center; margin-bottom: 10px; }
.hp-offre-logo img { max-height: 36px; max-width: 110px; object-fit: contain; }
.hp-offre-nom { letter-spacing: -.03em;  font: 800 17px Barlow, Arial, sans-serif; color: #111; }
.hp-offre-jusqua { font-size: 12px; color: var(--gris); margin-top: 4px; }
.hp-offre-gain { letter-spacing: -.03em;  font: 800 20px Barlow, Arial, sans-serif; color: var(--corail); margin-bottom: 14px; }
.hp-offre-accroche { font-size: 13px; line-height: 1.5; color: var(--gris); margin: -6px 0 14px; }
.hp-offre-bas { margin-top: auto; display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 14px; border-radius: 999px; background: var(--fond); font: 700 12px Barlow, Arial, sans-serif; color: #111; }
.hp-offre-bas code { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15px "Courier New", monospace; letter-spacing: .06em; color: #111; }
.hp-rond { width: 26px; height: 26px; border-radius: 50%; background: var(--corail); color: #fff; display: grid; place-items: center; }
.hp-rond svg { width: 13px; height: 13px; }
.hp-mention { margin-top: 14px !important; font-size: 12px; color: var(--gris); }
.hp-mention a { text-decoration: underline; }

.hp-avis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-avis-carte { position: relative; margin: 0; padding: 26px 24px 22px; border: 1px solid var(--bord); border-radius: 16px; background: #fff; box-shadow: 0 6px 18px rgba(21,36,45,.04); display: flex; flex-direction: column; }
.hp-guillemets { position: absolute; top: 10px; left: 18px; font: 800 42px/1 Georgia, serif; color: #d8d2cc; }
.hp-avis-carte blockquote { margin: 18px 0 14px; font-size: 14px; line-height: 1.6; color: #333; border: 0; padding: 0; }
.hp-etoiles { color: #ffb020; letter-spacing: 3px; font-size: 15px; margin-bottom: 14px; }
.hp-avis-carte figcaption { margin-top: auto; display: flex; align-items: center; gap: 10px; }
.hp-avis-carte strong { display: block; font: 800 14px Barlow, Arial, sans-serif; color: #111; }
.hp-avis-carte small { font-size: 12px; color: var(--gris); }

.hp-explication { display: grid; grid-template-columns: 1fr 1.6fr; gap: 64px; align-items: center; }
.hp-explication .hp-intro { max-width: 400px; margin-bottom: 26px; font-size: 16px; }
.hp-explication .hp-h2 { margin-bottom: 16px; }
.hp-etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; align-items: start; }
.hp-etapes li { position: relative; }
.hp-num { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--corail); color: #fff; font: 800 13px Barlow, Arial, sans-serif; }
.hp-etapes .hp-num { position: absolute; z-index: 1; left: 0; top: 6px; border: 3px solid #fff; box-sizing: content-box; }
.hp-etapes .hp-icone { display: grid; place-items: center; width: 78px; height: 78px; margin-left: 28px; border-radius: 50%; background: var(--corail-clair); }
.hp-etapes .hp-icone svg { width: 32px; height: 32px; }
.hp-etapes strong { letter-spacing: -.03em; display: block; margin: 20px 0 10px; font: 800 21px/1.12 Barlow, Arial, sans-serif; color: #111; }
.hp-etapes p { max-width: 16em; font-size: 15px; line-height: 1.55; color: var(--gris); }

.hp-sombre { margin-top: 80px; padding: 64px 0; background: linear-gradient(90deg, rgba(14,14,16,.92) 0%, rgba(14,14,16,.55) 60%, rgba(14,14,16,.2) 100%), url(/images/test-hp/fond-sombre.webp) center/cover, #0e0e10; color: #fff; }
.hp-sombre .hp-h2 { color: #fff; }
.hp-sombre .hp-offre { border-color: transparent; }

.hp-article { display: flex; flex-direction: column; border: 1px solid var(--bord); border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(21,36,45,.04); transition: transform .15s; }
.hp-article:hover { transform: translateY(-3px); }
.hp-article img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.hp-article-texte { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; }
.hp-article-texte small { font-size: 12px; color: var(--gris); }
.hp-article-texte strong { letter-spacing: -.03em;  font: 800 17px/1.3 Barlow, Arial, sans-serif; color: #111; }
.hp-article-texte > span:not(.hp-lien) { font-size: 13px; line-height: 1.55; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.hp-faq { display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; padding-bottom: 80px; }
.hp-faq .hp-h2 { margin-bottom: 16px; }
.hp-faq .hp-intro { margin-bottom: 22px; }
.hp-questions details { border: 1px solid var(--bord); border-radius: 12px; margin-bottom: 10px; background: #fff; }
.hp-questions summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 16px; padding: 16px 20px; font: 700 15px Barlow, Arial, sans-serif; color: #111; }
.hp-questions summary::-webkit-details-marker { display: none; }
.hp-questions summary span { color: var(--corail); font-size: 22px; line-height: 1; transition: transform .2s; }
.hp-questions details[open] summary span { transform: rotate(45deg); }
.hp-questions details > div { padding: 0 20px 16px; font-size: 14px; line-height: 1.6; color: var(--texte); }
.hp-questions details > div a { color: var(--corail); text-decoration: underline; }

.hp-pied { background: #0e0e10; color: #b9c2c8; padding: 56px 0 24px; }
.hp-pied-haut { display: grid; grid-template-columns: 1.6fr 1fr; gap: 48px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,.08); }
.hp-pied-marque p { max-width: 460px; }
.hp-pied-contact { display: flex; flex-direction: column; gap: 2px; margin-top: 14px !important; }
.hp-pied-contact span { font: 800 13px Barlow, Arial, sans-serif; color: #fff; }
.hp-pied-contact a { color: var(--corail) !important; text-decoration: underline; }
.hp-pied-reseaux { display: flex; gap: 8px; margin-top: 14px; }
.hp-pied-reseaux a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.07); color: #fff !important; }
.hp-pied-reseaux a:hover { background: var(--corail); }
.hp-pied-infos ul { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.hp-pied-offres { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; padding-top: 32px; }
.hp-pied-cat h3 a { color: #fff !important; }
.hp-pied-cat h3 a:hover { color: var(--corail) !important; }
.hp-pied p { font-size: 13px; line-height: 1.6; color: #b9c2c8; }
.hp-pied h3 { letter-spacing: -.03em;  margin: 0 0 14px; font: 800 14px Barlow, Arial, sans-serif; color: #fff; }
.hp-pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
.hp-pied ul a { color: #c4ccd1 !important; }
.hp-pied ul a:hover { color: #fff !important; }

.hp-pied-bas { display: flex; flex-direction: column; gap: 6px; color: #7d8790; margin-top: 36px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11px; color: #7d8790; }

@media (max-width: 991px) {
  .hp-entete { padding: 10px 14px; }
  .hp-burger { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: var(--fond); cursor: pointer; }
  .hp-burger span, .hp-burger span::before, .hp-burger span::after { content: ""; display: block; width: 18px; height: 2px; background: #111; position: relative; }
  .hp-burger span::before { position: absolute; top: -6px; } .hp-burger span::after { position: absolute; top: 6px; }
  .hp-nav { display: none; }
  .hp-avantages, .hp-grille-offres { grid-template-columns: repeat(2, 1fr); }
  .hp-grille-3, .hp-avis { grid-template-columns: 1fr; }
  .hp-explication, .hp-faq { grid-template-columns: 1fr; gap: 32px; }
  .hp-pied-haut { grid-template-columns: 1fr; gap: 28px; }
  .hp-pied-offres { grid-template-columns: 1fr 1fr; }
  .hp-hero { padding: 110px 0 32px; min-height: 0; }
  .hp-hero-visuel { position: relative; inset: auto; width: 100%; height: 340px; margin: 20px 0; object-position: 92% 70%; }
  .hp-hero-chapo { margin-bottom: 0 !important; }
  .hp-mobile { display: flex !important; width: fit-content; margin: 24px auto 0; }
  :has(> .hp-mobile) > .hp-titre-ligne > .hp-lien, :has(> .hp-mobile) > .hp-titre-ligne > .hp-btn { display: none; }
  .hp-marques { margin-top: 0; padding-top: 8px; border-radius: 0; }
  .hp-marques .hp-conteneur { gap: 0; }
  .hp-defile { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 0 -24px; padding: 4px 24px 12px; scrollbar-width: none; }
  .hp-defile::-webkit-scrollbar { display: none; }
  .hp-defile > * { flex: 0 0 82%; scroll-snap-align: center; }
  .hp-etapes { grid-template-columns: 1fr; gap: 0; position: relative; }
  .hp-etapes li { padding: 0 0 28px 56px; }
  .hp-etapes li::before { content: ""; position: absolute; left: 17px; top: 56px; bottom: 0; border-left: 2px dashed #ffc7bd; }
  .hp-etapes li:last-child::before { display: none; }
  .hp-etapes .hp-num { left: -3px; top: 14px; }
  .hp-etapes .hp-icone { margin-left: 0; width: 64px; height: 64px; }
  .hp-etapes strong { max-width: none; margin-top: 12px; }
  .hp-etapes li { position: relative; }
}
@media (max-width: 560px) {
  .hp-section { padding-top: 56px; }
  .hp-avantages, .hp-etapes { grid-template-columns: 1fr; }
  .hp-grille-offres { grid-template-columns: 1fr; gap: 12px; }
  .hp-hero-texte .hp-btn { width: 100%; }
  .hp-logo { font-size: 21px; gap: 8px; } .hp-logo img { height: 28px; }
}
@media (prefers-reduced-motion: reduce) { .hp * { transition: none !important; } }

/* ---------------------------------------------------------------- Fiche offre */
.fo-hero { background: var(--fond); padding: 118px 0 56px; }
.fo-hero-grille { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.fo-ariane { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--gris); margin-bottom: 22px; }
.fo-ariane a:hover { color: var(--corail); }
.fo-ariane [aria-current] { color: #111; font-weight: 500; }
.fo-marque { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.fo-logo { width: 84px; height: 84px; border-radius: 20px; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 24px rgba(14,14,16,.08); flex: none; }
.fo-logo img { max-width: 64px; max-height: 44px; object-fit: contain; }
.fo-marque-infos { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.fo-tag { position: static; }
.fo-maj { font-size: 13px; font-weight: 500; color: #15803d; }
.fo-expiree { margin-bottom: 14px !important; padding: 10px 14px; border-radius: 10px; background: #fff4e5; color: #8a4b00; font-weight: 500; }
.fo-h1 { margin: 0 0 12px; font: 800 clamp(34px, 4.4vw, 54px)/1.02 Barlow, Arial, sans-serif; letter-spacing: -.04em; color: #111; }
.fo-chapo { font-size: 17px; line-height: 1.55; color: #333; margin-bottom: 24px !important; max-width: 560px; }
.fo-ticket { display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; max-width: 600px; border: 2px dashed var(--corail); border-radius: 16px; background: #fff; overflow: hidden; }
.fo-gain, .fo-code { display: flex; flex-direction: column; justify-content: center; padding: 14px 18px; min-width: 0; }
.fo-gain { background: var(--corail-clair); }
.fo-ticket small { font-size: 12px; color: var(--gris); }
.fo-gain strong { font: 800 26px/1.1 Barlow, Arial, sans-serif; letter-spacing: -.03em; color: var(--corail); white-space: nowrap; }
.fo-code code { font: 700 22px "Courier New", monospace; letter-spacing: .06em; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-copier { border: 0; cursor: pointer; background: var(--corail); color: #fff; font: 700 15px Barlow, Arial, sans-serif; padding: 0 22px; transition: background .15s; }
.fo-copier:hover { background: #e84f37; }
.fo-copier.fo-copie { background: #15803d; }
.fo-copier.fo-copie::after { content: " ✓"; }
.fo-cta { width: 100%; max-width: 600px; margin-top: 14px; font-size: 17px; padding: 17px 28px; }
.fo-mention { max-width: 600px; margin-top: 12px !important; font-size: 12px; color: var(--gris); }
.fo-mention a { text-decoration: underline; }
.fo-visuel { display: block; border-radius: 24px; overflow: hidden; box-shadow: 0 24px 50px rgba(14,14,16,.14); transform: rotate(1.5deg); transition: transform .2s; }
.fo-visuel:hover { transform: rotate(0); }
.fo-visuel img { width: 100%; display: block; }
.fo-section { padding-top: 64px; }
.fo-etapes { margin-top: 28px; }
.fo-corps { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }
.fo-h3 { margin: 0 0 14px; font: 800 20px Barlow, Arial, sans-serif; letter-spacing: -.03em; color: #111; }
.fo-details { padding: 22px 24px; border: 1px solid var(--bord); border-radius: 16px; background: #fff; margin-bottom: 36px; }
.fo-details dl { margin: 0; }
.fo-details dl > div { display: grid; grid-template-columns: 200px 1fr; gap: 16px; padding: 11px 0; border-top: 1px solid var(--bord); font-size: 15px; }
.fo-details dt { color: var(--gris); }
.fo-details dd { margin: 0; color: #111; font-weight: 500; overflow-wrap: anywhere; }
.fo-details dd a { color: var(--corail); }
.fo-prose { font-size: 16px; line-height: 1.7; color: #333; }
.fo-prose h2 { margin: 40px 0 14px; font: 800 28px/1.15 Barlow, Arial, sans-serif; letter-spacing: -.03em; color: #111; scroll-margin-top: 100px; }
.fo-prose h3 { margin: 28px 0 10px; font: 800 21px/1.2 Barlow, Arial, sans-serif; letter-spacing: -.03em; color: #111; }
.fo-prose h4 { margin: 22px 0 8px; font: 700 18px Barlow, Arial, sans-serif; color: #111; }
.fo-prose p, .fo-prose ul, .fo-prose ol { margin: 0 0 14px; }
.fo-prose a { color: var(--corail); text-decoration: underline; }
.fo-prose img { border-radius: 14px; height: auto; }
.fo-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 15px; display: block; overflow-x: auto; }
.fo-prose th, .fo-prose td { border: 1px solid var(--bord); padding: 10px 12px; text-align: left; }
.fo-prose th { background: var(--fond); }
.fo-aside { position: sticky; top: 100px; display: grid; gap: 18px; }
.fo-sommaire { border: 1px solid var(--bord); border-radius: 16px; background: #fff; }
.fo-sommaire summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; }
.fo-sommaire summary::-webkit-details-marker { display: none; }
.fo-sommaire summary .fo-h3 { margin: 0; }
.fo-plus { color: var(--corail); font: 400 26px/1 Barlow, Arial, sans-serif; transition: transform .2s; }
.fo-sommaire[open] .fo-plus { transform: rotate(45deg); }
.fo-sommaire nav { padding: 0 22px 18px; }
.fo-sommaire ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.fo-sommaire li::marker { color: var(--corail); font-weight: 700; }
.fo-sommaire a:hover { color: var(--corail); }
.fo-encart { display: grid; gap: 12px; justify-items: center; text-align: center; padding: 22px; border-radius: 16px; background: var(--fond); }
.fo-encart img { max-height: 40px; max-width: 140px; }
.fo-encart strong { font: 800 26px Barlow, Arial, sans-serif; letter-spacing: -.03em; color: var(--corail); }
.fo-encart .hp-btn { width: 100%; }
.fo-copier-petit { display: flex; justify-content: space-between; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border: 2px dashed var(--corail); border-radius: 12px; background: #fff; color: var(--corail); }
.fo-copier-petit:hover { background: #fff; }
.fo-copier-petit code { font: 700 16px "Courier New", monospace; color: #111; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fo-copier-petit.fo-copie { background: #ecfdf3; }
.fo-apps { font-size: 13px; color: var(--gris); }
.fo-apps a { color: var(--corail); text-decoration: underline; }
.fo-similaires { padding-bottom: 80px; }
.fo-barre-mobile { display: none; }
@media (max-width: 991px) {
  .fo-hero { padding-top: 104px; }
  .fo-hero-grille, .fo-corps { grid-template-columns: 1fr; gap: 28px; }
  .fo-visuel { transform: none; }
  .fo-aside { position: static; order: -1; }
  .fo-encart { display: none; }
  .fo-barre-mobile { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 24px rgba(14,14,16,.12); }
  .fo-barre-mobile .fo-copier { border-radius: 999px; background: #fff; color: var(--corail); border: 2px solid var(--corail); padding: 12px; }
  .fo-barre-mobile .fo-copier.fo-copie { background: #ecfdf3; color: #15803d; border-color: #15803d; }
  .fo-barre-mobile .hp-btn { padding: 13px 16px; }
  .hp:has(.fo-barre-mobile) .hp-pied { padding-bottom: 96px; }
}
@media (max-width: 560px) {
  .fo-ticket { grid-template-columns: 1fr 1fr; }
  .fo-ticket .fo-copier { grid-column: 1 / -1; padding: 13px; }
  .fo-gain strong { font-size: 22px; }
  .fo-code code { font-size: 18px; }
  .fo-details dl > div { grid-template-columns: 1fr; gap: 2px; }
  .fo-prose h2 { font-size: 24px; }
  .fo-logo { width: 68px; height: 68px; }
}

/* ---------------------------------------------------------------- Menu mobile (tiroir et panneaux de catégorie) */
.tm[hidden], .tm-panneau[hidden] { display: none !important; }
.tm { position: fixed; inset: 0; z-index: 100; font-family: Barlow, Arial, sans-serif; }
.tm-fond { position: absolute; inset: 0; background: rgba(14,14,16,.55); opacity: 0; transition: opacity .25s; }
.tm-tiroir { position: absolute; top: 0; bottom: 0; left: 0; width: min(88vw, 380px); background: #fff; overflow: hidden; transform: translateX(-100%); transition: transform .25s ease; box-shadow: 12px 0 40px rgba(14,14,16,.2); }
.tm-ouvert .tm-fond { opacity: 1; }
.tm-ouvert .tm-tiroir { transform: none; }
.tm-panneau { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 14px 18px 24px; background: #fff; overflow-y: auto; }
.tm-sous { transform: translateX(100%); transition: transform .25s ease; }
.tm-sous.tm-visible { transform: none; }
.tm-haut { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; margin-bottom: 14px; }
.tm-haut .hp-logo { font-size: 20px; gap: 8px; }
.tm-haut .hp-logo img { height: 26px; }
.tm-fermer, .tm-retour { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #111; cursor: pointer; }
.tm-fermer:hover, .tm-retour:hover { background: var(--fond); }
.tm-liste, .tm-offres, .tm-secondaire { list-style: none; margin: 0; padding: 0; }
.tm-liste a, .tm-liste button { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 54px; padding: 8px 12px; border: 0; border-radius: 12px; background: transparent; font: 500 17px Barlow, Arial, sans-serif; color: #111; text-align: left; cursor: pointer; }
.tm-liste a:hover, .tm-liste button:hover { background: var(--fond); }
.tm-liste a.tm-actif { background: var(--corail-clair); color: var(--corail); }
.tm-liste svg:last-child, .tm-offres svg:last-child { margin-left: auto; color: #9aa1a6; flex: none; }
.tm-icone { display: inline-grid; place-items: center; width: 28px; color: var(--corail); flex: none; }
.tm-icone svg { width: 24px; height: 24px; }
.tm-secondaire { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--bord); display: grid; gap: 2px; }
.tm-secondaire a { display: block; padding: 9px 12px; font-size: 15px; color: #333; }
.tm-reseaux { display: flex; gap: 6px; margin-top: auto; padding-top: 18px; }
.tm-reseaux a { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #111; }
.tm-reseaux a:hover { background: var(--fond); color: var(--corail); }
.tm-titre { display: flex; align-items: center; gap: 12px; margin: 0 0 12px !important; padding: 0 12px; font: 800 24px Barlow, Arial, sans-serif; letter-spacing: -.03em; color: #111; }
.tm-titre .tm-icone svg { width: 28px; height: 28px; color: #111; }
.tm-offres a { display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 6px 12px; border-radius: 12px; font: 500 16px Barlow, Arial, sans-serif; color: #111; }
.tm-offres a:hover { background: var(--fond); }
.tm-logo { display: grid; place-items: center; width: 34px; height: 28px; flex: none; }
.tm-logo img { max-width: 34px; max-height: 26px; object-fit: contain; }
.tm-voir { display: inline-flex; align-items: center; gap: 6px; margin: 10px 12px 18px; font: 700 15px Barlow, Arial, sans-serif; color: var(--corail) !important; }
.tm-carte { position: relative; display: block; margin-top: auto; border-radius: 16px; overflow: hidden; background: var(--fond); }
.tm-carte img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.tm-carte > span:not(.hp-rond) { display: block; padding: 14px 64px 16px 16px; font: 800 16px/1.25 Barlow, Arial, sans-serif; letter-spacing: -.02em; color: #111; }
.tm-carte .hp-rond { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; }
html.tm-bloque, html.tm-bloque body { overflow: hidden; }
@media (min-width: 992px) { .tm { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .tm-tiroir, .tm-sous, .tm-fond { transition: none; } }

/* ---------------------------------------------------------------- Blog : accueil, rubriques, articles */
.bl-hero { position: relative; padding: 130px 0 70px; background-color: #f7f4ef; background-image: linear-gradient(90deg, #f7f4ef 0%, rgba(247,244,239,.92) 38%, rgba(247,244,239,0) 70%), var(--image); background-size: cover; background-position: right center; min-height: 440px; display: flex; align-items: center; }
.bl-hero-texte { position: relative; width: 100%; }
.bl-surtitre { margin-bottom: 10px !important; font: 700 13px Barlow, Arial, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--corail); }
.bl-h1 { max-width: 13em; margin: 0 0 16px; font: 800 clamp(36px, 5vw, 64px)/1 Barlow, Arial, sans-serif; letter-spacing: -.04em; color: #111; }
.bl-h1 em, .bl-h1-article em { display: block; }
.bl-intro { max-width: 560px; font-size: 17px; line-height: 1.6; color: #333; }
.bl-section { padding-top: 56px; }
.bl-section-haut { padding-top: 32px; }
.bl-espace { height: 80px; }
.bl-puces { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.bl-puces a { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--bord); background: #fff; font: 700 14px Barlow, Arial, sans-serif; color: #111; }
.bl-puces a:hover { border-color: var(--corail); color: var(--corail); }
.bl-puces a[aria-current] { background: var(--corail); border-color: var(--corail); color: #fff; }
.bl-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font: 700 12px Barlow, Arial, sans-serif; color: var(--c); background: color-mix(in srgb, var(--c) 14%, #fff); }
.bl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--gris); }
.bl-carte { display: flex; flex-direction: column; border: 1px solid var(--bord); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(14,14,16,.04); transition: transform .15s, box-shadow .15s; }
.bl-carte:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(14,14,16,.1); }
.bl-carte-image { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--fond); }
.bl-carte-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.bl-carte:hover .bl-carte-image img { transform: scale(1.03); }
.bl-carte-texte { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 22px; flex: 1; }
.bl-carte-texte strong { font: 800 19px/1.25 Barlow, Arial, sans-serif; letter-spacing: -.02em; color: #111; }
.bl-chapo { font-size: 14px; line-height: 1.55; color: var(--gris); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bl-carte-texte .hp-lien { margin-top: auto; }
.bl-carte-grande { display: grid; grid-template-columns: 1.15fr 1fr; }
.bl-carte-grande .bl-carte-image { aspect-ratio: auto; min-height: 320px; }
.bl-carte-grande .bl-carte-texte { justify-content: center; padding: 36px 40px; gap: 14px; }
.bl-carte-grande .bl-carte-texte strong { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -.03em; }
.bl-carte-grande .bl-chapo { font-size: 16px; -webkit-line-clamp: 4; }
.bl-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.bl-grille-suite { margin-top: 24px; }
.bl-rubriques { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bl-rubrique { display: flex; flex-direction: column; gap: 4px; padding: 10px 10px 14px; border: 1px solid var(--bord); border-radius: 16px; background: #fff; transition: transform .15s; }
.bl-rubrique:hover { transform: translateY(-3px); }
.bl-rubrique-image { display: block; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; margin-bottom: 6px; }
.bl-rubrique-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bl-rubrique strong { font: 800 16px Barlow, Arial, sans-serif; letter-spacing: -.02em; color: #111; padding: 0 4px; }
.bl-rubrique span:last-child { font-size: 13px; color: var(--gris); padding: 0 4px; }
.bl-tous { padding-bottom: 80px; }
.bl-tous .hp-h2 { margin-bottom: 24px; }
.bl-tous-grille { columns: 3 280px; column-gap: 40px; }
.bl-tous-grille > div { break-inside: avoid; margin-bottom: 28px; }
.bl-tous-grille h3 { margin: 0 0 10px; font: 800 18px Barlow, Arial, sans-serif; color: #111; }
.bl-tous-grille ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; line-height: 1.4; }
.bl-tous-grille a:hover { color: var(--corail); }
.bl-tous-grille time { display: block; font-size: 12px; color: var(--gris); }
.bl-article-entete { padding-top: 118px; }
.bl-article-entete > * { max-width: 880px; }
.bl-article-entete .bl-meta { margin: 6px 0 16px !important; }
.bl-h1-article { max-width: none; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.04; }
.bl-auteur { display: flex; align-items: center; gap: 12px; margin-top: 20px !important; font-size: 13px; color: var(--gris); }
.bl-auteur img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.bl-auteur .hp-av { width: 42px; height: 42px; }
.bl-auteur strong { display: block; font: 700 15px Barlow, Arial, sans-serif; color: #111; }
.bl-couverture { display: block; width: 100%; max-height: 520px; object-fit: cover; border-radius: 22px; margin-top: 32px; }
.bl-corps { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 56px; align-items: start; padding-top: 44px; }
.bl-prose { font-size: 17px; line-height: 1.75; }
.bl-prose > p:first-child { font-size: 18px; color: #222; }
.bl-prose blockquote { margin: 0 0 18px; padding: 18px 22px; border-radius: 14px; background: var(--fond); border-left: 0; font-style: normal; }
.bl-prose ul li::marker { color: var(--corail); }
.bl-aside { gap: 20px; }
.bl-encart-offres, .bl-encart-recents { padding: 20px 22px; border: 1px solid var(--bord); border-radius: 16px; background: #fff; display: grid; gap: 12px; }
.bl-encart-offres { background: var(--fond); border-color: transparent; }
.bl-encart-offres .fo-h3, .bl-encart-recents .fo-h3 { margin: 0; }
.bl-mini-offre { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: #fff; color: #111; }
.bl-mini-offre img { width: 46px; height: 30px; object-fit: contain; }
.bl-mini-offre span { flex: 1; display: flex; flex-direction: column; font-size: 13px; color: var(--corail); font-weight: 700; }
.bl-mini-offre strong { font: 800 15px Barlow, Arial, sans-serif; color: #111; }
.bl-mini-offre svg { color: var(--corail); }
.bl-mini { display: flex; gap: 12px; align-items: center; }
.bl-mini img { width: 72px; height: 54px; border-radius: 10px; object-fit: cover; flex: none; }
.bl-mini strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font: 700 14px/1.3 Barlow, Arial, sans-serif; color: #111; }
.bl-mini time { font-size: 12px; color: var(--gris); }
.bl-mini:hover strong { color: var(--corail); }
@media (max-width: 991px) {
  .bl-hero { padding: 108px 0 40px; min-height: 0; background-image: linear-gradient(180deg, rgba(247,244,239,.95) 0%, rgba(247,244,239,.85) 100%), var(--image); }
  .bl-carte-grande { grid-template-columns: 1fr; }
  .bl-carte-grande .bl-carte-image { min-height: 0; aspect-ratio: 16 / 9; }
  .bl-carte-grande .bl-carte-texte { padding: 22px; }
  .bl-grille { grid-template-columns: 1fr 1fr; }
  .bl-rubriques { grid-template-columns: repeat(3, 1fr); }
  .bl-corps { grid-template-columns: 1fr; gap: 32px; }
  .bl-aside { order: -1; position: static; }
  .bl-encart-recents { display: none !important; }
  .bl-article-entete { padding-top: 104px; }
}
@media (max-width: 560px) {
  .bl-grille { grid-template-columns: 1fr; }
  .bl-grille.hp-defile { display: flex !important; }
  .bl-rubriques { grid-template-columns: 1fr 1fr; }
  .bl-puces { flex-wrap: nowrap; overflow-x: auto; margin: 0 -24px 24px; padding: 0 24px; scrollbar-width: none; }
  .bl-puces a { flex: none; }
  .bl-prose { font-size: 16px; }
  .bl-couverture { border-radius: 16px; margin-top: 24px; }
}
.bl-intro-complete { max-width: 860px; margin-bottom: 32px; font-size: 16px; }

/* ---------------------------------------------------------------- Pages d'offres (toutes les offres, catégories) */
.ls-hero-zone { padding-top: 96px; }
.ls-hero { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 380px; padding: 40px 48px; border-radius: 26px; overflow: hidden; background-color: #f7f4ef; background-image: linear-gradient(90deg, #f7f4ef 0%, rgba(247,244,239,.95) 34%, rgba(247,244,239,0) 62%), var(--image); background-size: cover; background-position: right center; }
.ls-hero .fo-ariane { margin-bottom: 14px; }
.ls-hero-sombre { background-color: #0e0e10; background-image: linear-gradient(90deg, #0e0e10 0%, rgba(14,14,16,.92) 34%, rgba(14,14,16,0) 62%), var(--image); color: #fff; }
.ls-hero-sombre .ls-h1, .ls-hero-sombre .fo-ariane [aria-current], .ls-hero-sombre .hp-preuve strong { color: #fff; }
.ls-hero-sombre .ls-sous-titre, .ls-hero-sombre .fo-ariane { color: #d4d4d4; }
.ls-h1 { max-width: 11.5em; margin: 0 0 12px; font: 800 clamp(34px, 4.6vw, 58px)/1 Barlow, Arial, sans-serif; letter-spacing: -.04em; color: #111; }
.ls-sous-titre { max-width: 520px; margin-bottom: 24px !important; font: 500 18px/1.45 Barlow, Arial, sans-serif; color: #222; }
.ls-hero-actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.ls-preuve { margin: 0; }
.ls-preuve .hp-avatars { height: 40px; }
.ls-preuve strong { display: block; font: 800 15px Barlow, Arial, sans-serif; color: #111; }
.ls-preuve .hp-etoiles { margin: 0; font-size: 13px; letter-spacing: 2px; }
.ls-section { padding-top: 48px; }
.ls-section-fin { padding-bottom: 80px; }
.ls-titre-liste { margin-bottom: 24px; }
.ls-offres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.ls-offre { display: flex; flex-direction: column; gap: 8px; padding: 22px; border: 1px solid var(--bord); border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(14,14,16,.05); transition: transform .15s, box-shadow .15s; }
.ls-offre:hover { transform: translateY(-3px); box-shadow: 0 16px 34px rgba(14,14,16,.1); }
.ls-offre-haut { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 6px; }
.ls-offre-logo { display: grid; place-items: center; height: 56px; min-width: 56px; max-width: 150px; }
.ls-offre-logo img { max-height: 54px; max-width: 150px; object-fit: contain; }
.ls-offre time { padding: 4px 10px; border-radius: 999px; background: #eef4ff; color: #3b6fd8; font: 700 12px Barlow, Arial, sans-serif; }
.ls-offre strong { font: 800 21px/1.15 Barlow, Arial, sans-serif; letter-spacing: -.03em; color: #111; }
.ls-offre-accroche { font-size: 15px; line-height: 1.45; color: #333; margin-bottom: 10px; }
.ls-offre .hp-offre-bas { margin-top: auto; background: var(--corail-clair); font-size: 14px; }
.ls-offre .hp-offre-bas > svg { display: none; }
.ls-carte { padding: 36px 40px; border-radius: 24px; background: #fdfaf8; border: 1px solid var(--bord); }
.ls-explication { display: grid; grid-template-columns: .9fr 1.6fr; gap: 40px; align-items: center; }
.ls-explication .hp-h2 { margin-bottom: 16px; }
.ls-explication-texte { font-size: 16px; line-height: 1.6; color: #333; }
.ls-etapes { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.ls-etape { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.ls-etape-num { display: grid; place-items: center; width: 26px; height: 26px; margin-bottom: 8px; border-radius: 50%; background: var(--corail); color: #fff; font: 800 13px Barlow, Arial, sans-serif; }
.ls-etape-icone { display: grid; place-items: center; width: 70px; height: 70px; border-radius: 50%; background: var(--corail-clair); color: var(--corail); }
.ls-etape-icone svg { width: 30px; height: 30px; }
.ls-etape strong { margin: 12px 0 6px; font: 800 16px/1.2 Barlow, Arial, sans-serif; letter-spacing: -.02em; color: #111; }
.ls-etape p { font-size: 13px; line-height: 1.45; color: var(--gris); }
.ls-etape-fleche { flex: none; padding-top: 56px; color: #b7b0aa; }
.ls-savoir .hp-h2 { margin-bottom: 18px; }
.ls-savoir-intro { max-width: 900px; margin-bottom: 22px; font-size: 16px; line-height: 1.6; color: #222; }
.ls-savoir-intro p { margin: 0 0 10px; }
.ls-savoir-colonnes { display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; }
.ls-savoir-bloc { padding: 16px 0; border-top: 1px solid var(--bord); }
.ls-savoir-bloc h3 { margin: 0 0 8px; font: 800 18px/1.25 Barlow, Arial, sans-serif; letter-spacing: -.02em; color: #111; }
.ls-savoir-bloc .fo-prose { font-size: 14px; line-height: 1.6; color: #444; }
.ls-actus { display: grid; grid-template-columns: 1fr; gap: 56px; }
.ls-actus-titre { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.ls-actus-titre h2 { margin: 0; font: 800 24px/1.15 Barlow, Arial, sans-serif; letter-spacing: -.03em; color: #111; }
.ls-pastille-lien { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 1.5px solid var(--corail); border-radius: 999px; color: var(--corail) !important; font: 700 12px Barlow, Arial, sans-serif; }
.ls-actus-grille { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ls-actu { position: relative; display: flex; flex-direction: column; gap: 6px; padding-bottom: 44px; border: 1px solid var(--bord); border-radius: 14px; overflow: hidden; background: #fff; }
.ls-actu-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.ls-actu-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ls-actu time { padding: 4px 12px 0; font-size: 11px; color: var(--gris); }
.ls-actu strong { padding: 0 12px; font: 700 14px/1.3 Barlow, Arial, sans-serif; color: #111; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ls-actu .hp-rond { position: absolute; right: 10px; bottom: 10px; }
.ls-actu:hover strong { color: var(--corail); }
.ls-faq .hp-h2 { margin-bottom: 10px; }
.ls-faq-intro { max-width: 760px; margin-bottom: 18px !important; font-size: 15px; color: var(--gris); }
.ls-faq-liste { display: grid; gap: 8px; }
.ls-faq-liste details { border: 1px solid var(--bord); border-radius: 12px; background: #fff; }
.ls-faq-liste summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 13px 16px; font: 500 15px Barlow, Arial, sans-serif; color: #111; }
.ls-faq-liste summary::-webkit-details-marker { display: none; }
.ls-faq-icone { color: #6b6f73; display: inline-flex; }
.ls-faq-chevron { margin-left: auto; display: inline-flex; color: #111; transition: transform .2s; }
.ls-faq-liste details[open] .ls-faq-chevron { transform: rotate(180deg); }
.ls-faq-liste details > div { padding: 0 16px 14px 46px; font-size: 14px; }
@media (max-width: 991px) {
  .ls-hero-zone { padding-top: 88px; }
  .ls-hero { min-height: 0; padding: 28px 22px; background-image: linear-gradient(180deg, rgba(247,244,239,.94) 0%, rgba(247,244,239,.86) 100%), var(--image); }
  .ls-hero-sombre { background-image: linear-gradient(180deg, rgba(14,14,16,.9) 0%, rgba(14,14,16,.82) 100%), var(--image); }
  .ls-offres { grid-template-columns: 1fr 1fr; }
  .ls-explication, .ls-savoir-colonnes, .ls-actus { grid-template-columns: 1fr; }
  .ls-carte { padding: 26px 22px; }
}
@media (max-width: 560px) {
  .ls-offres { grid-template-columns: 1fr; }
  .ls-etapes { flex-direction: column; align-items: stretch; gap: 14px; }
  .ls-etape { flex-direction: row; flex-wrap: wrap; align-items: center; text-align: left; gap: 0 12px; }
  .ls-etape-num { margin: 0; }
  .ls-etape-icone { width: 54px; height: 54px; }
  .ls-etape strong { margin: 0; flex: 1; }
  .ls-etape p { flex-basis: 100%; padding-left: 104px; }
  .ls-etape-fleche { display: none; }
  .ls-actus-grille { grid-template-columns: 1fr 1fr; }
  .ls-actus-titre { flex-direction: column; align-items: flex-start; }
}
/* Pages éditoriales */
.ed-hero { padding: 130px 0 40px; background: var(--fond); }
.ed-hero .bl-h1 { max-width: 16em; font-size: clamp(32px, 4.4vw, 54px); }
.ed-corps { padding-top: 40px; }
.ed-corps > * { max-width: 860px; }
@media (max-width: 991px) {
  .ed-hero { padding-top: 104px; }
}
.hp .e404 { padding-top: 130px; }

/* ---------------------------------------------------------------- Notre méthode */
.me-hero { min-height: 340px; }
.me-hero .ls-sous-titre { max-width: 560px; }
.me-maj { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 7px 14px; border-radius: 999px; background: #fff; box-shadow: 0 4px 14px rgba(14,14,16,.06); font: 700 13px Barlow, Arial, sans-serif; color: #15803d; }
.me-maj svg { width: 16px; height: 16px; }
.me-titre { margin-bottom: 22px; }
.me-bref { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.me-bref-carte { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--bord); border-radius: 18px; background: #fff; box-shadow: 0 8px 22px rgba(14,14,16,.05); transition: transform .15s; }
.me-bref-carte:hover { transform: translateY(-3px); }
.me-bref-carte strong { font: 800 18px/1.2 Barlow, Arial, sans-serif; letter-spacing: -.02em; color: #111; }
.me-bref-carte > span:last-child { font-size: 14px; line-height: 1.5; color: var(--gris); }
.me-icone { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--corail-clair); color: var(--corail); flex: none; }
.me-corps { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 48px; align-items: start; padding-bottom: 72px; }
.me-sommaire { position: sticky; top: 100px; padding: 20px 22px; border-radius: 18px; background: var(--fond); }
.me-sommaire p { margin: 0 0 10px !important; font: 800 16px Barlow, Arial, sans-serif; color: #111; }
.me-sommaire ol { margin: 0; padding-left: 18px; display: grid; gap: 8px; font-size: 14px; line-height: 1.35; }
.me-sommaire li::marker { color: var(--corail); font-weight: 700; }
.me-sommaire a:hover { color: var(--corail); }
.me-sections { display: grid; gap: 18px; }
.me-section { padding: 28px 32px; border: 1px solid var(--bord); border-radius: 20px; background: #fff; scroll-margin-top: 100px; }
.me-section-tete { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.me-num { font: 800 34px Barlow, Arial, sans-serif; letter-spacing: -.04em; color: #efe6df; }
.me-section h2 { margin: 0 0 10px; font: 800 26px/1.15 Barlow, Arial, sans-serif; letter-spacing: -.03em; color: #111; }
.me-section .fo-prose { font-size: 16px; }
.me-coches { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.me-coches li { position: relative; padding: 12px 14px 12px 46px; border-radius: 12px; background: var(--fond); font-size: 15px; line-height: 1.5; color: #222; }
.me-coches li::before { content: "✓"; position: absolute; left: 14px; top: 11px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--corail); color: #fff; font: 800 12px Barlow, Arial, sans-serif; }
.me-vigilance { background: #fff8eb; border-color: #f7d9a6; }
.me-vigilance .me-icone { background: #fdebc8; color: #b45309; }
.me-signaler { margin-top: 0; }
.me-signaler-grille { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.me-signaler-texte { max-width: 640px; margin-top: 12px; font-size: 17px; line-height: 1.6; color: #e5e5e5; }
.me-signaler-texte p { margin: 0; color: #e8e8e8 !important; }
.me-signaler-texte a { color: #fff; text-decoration: underline; }
@media (max-width: 991px) {
  .me-bref { grid-template-columns: 1fr 1fr; }
  .me-corps { grid-template-columns: 1fr; gap: 20px; }
  .me-sommaire { position: static; }
}
@media (max-width: 560px) {
  .me-bref { grid-template-columns: 1fr; }
  .me-section { padding: 22px 20px; }
  .me-section h2 { font-size: 22px; }
}

/* ---------------------------------------------------------------- Animations légères */
/* Apparition au défilement (classes posées par le script : sans JavaScript, rien n'est masqué). */
.ap-actif .ap { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--ap-i, 0) * 70ms); }
.ap-actif .ap.ap-vu { opacity: 1; transform: none; }
.ap-actif .hp-marques img.ap { transform: translateY(8px); }
.ap-actif .hp-marques img.ap-vu { opacity: .8; transform: none; }
/* Entrée des en-têtes de page au chargement. */
@keyframes ap-entree { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ap-zoom { from { transform: scale(1.06); } to { transform: none; } }
.hp-hero-texte > *, .ls-hero > *, .bl-hero-texte > *, .fo-hero-texte > *, .bl-article-entete > *, .ed-hero .hp-conteneur > * { animation: ap-entree .7s cubic-bezier(.2,.7,.2,1) both; }
.hp-hero-texte > :nth-child(2), .ls-hero > :nth-child(2), .bl-hero-texte > :nth-child(2), .fo-hero-texte > :nth-child(2), .bl-article-entete > :nth-child(2) { animation-delay: .08s; }
.hp-hero-texte > :nth-child(3), .ls-hero > :nth-child(3), .bl-hero-texte > :nth-child(3), .fo-hero-texte > :nth-child(3), .bl-article-entete > :nth-child(3) { animation-delay: .16s; }
.hp-hero-texte > :nth-child(n+4), .ls-hero > :nth-child(n+4), .bl-hero-texte > :nth-child(n+4), .fo-hero-texte > :nth-child(n+4), .bl-article-entete > :nth-child(n+4) { animation-delay: .24s; }
.hp-hero-visuel { animation: ap-zoom 1.6s cubic-bezier(.2,.7,.2,1) both; }
.fo-visuel { animation: ap-entree .8s .2s cubic-bezier(.2,.7,.2,1) both; }
/* En-tête : ombre plus marquée après défilement. */
.hp-entete { transition: box-shadow .25s, padding .25s; }
.hp-entete.hp-entete-defile { box-shadow: 0 12px 34px rgba(14,14,16,.14); }
/* Micro-interactions au survol. */
.hp-btn svg, .hp-lien svg, .hp-rond svg, .ls-pastille-lien svg, .tm-voir svg { transition: transform .2s ease; }
.hp-btn:hover svg, .hp-lien:hover svg, .ls-pastille-lien:hover svg, .tm-voir:hover svg { transform: translateX(3px); }
.hp-offre:hover .hp-rond svg, .ls-offre:hover .hp-rond svg, .ls-actu:hover .hp-rond svg, .tm-carte:hover .hp-rond svg { transform: translateX(2px); }
.hp-rond { transition: background .2s, transform .2s; }
.hp-offre:hover .hp-rond, .ls-offre:hover .hp-rond, .ls-actu:hover .hp-rond { transform: scale(1.08); }
.hp-offre-logo img, .ls-offre-logo img { transition: transform .25s ease; }
.hp-offre:hover .hp-offre-logo img, .ls-offre:hover .ls-offre-logo img { transform: scale(1.05); }
.hp-btn-plein { position: relative; overflow: hidden; }
.hp-btn-plein::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s ease; pointer-events: none; }
.hp-btn-plein:hover::after { transform: translateX(120%); }
.fo-copier { transition: background .2s, transform .15s; }
.fo-copier:active { transform: scale(.97); }
.hp-avatars { transition: transform .25s ease; }
.hp-preuve:hover .hp-avatars { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
  .hp-hero-texte > *, .ls-hero > *, .bl-hero-texte > *, .fo-hero-texte > *, .bl-article-entete > *, .ed-hero .hp-conteneur > *, .hp-hero-visuel, .fo-visuel { animation: none !important; }
  .hp-btn-plein::after { display: none; }
  .hp *, .hp *::after { transition-duration: .01ms !important; }
}

/* Base de page (remplace normalize.css et webflow.css de l'ancien site). */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; -webkit-font-smoothing: antialiased; }
img { border: 0; vertical-align: middle; }
h1, h2, h3, h4 { margin-top: 0; }
button { font-family: inherit; }

/* Notre méthode : bloc « Ce qu'il faut retenir » */
.me-retenir { display: grid; grid-template-columns: .8fr 1.4fr; gap: 40px; align-items: center; padding: 40px 44px; border-radius: 26px; color: #fff; background: radial-gradient(circle at 100% 0%, rgba(255,98,72,.35) 0%, transparent 45%), #0e0e10; }
.me-retenir-tete h2 { margin: 16px 0 10px; font: 800 clamp(28px, 3.2vw, 38px)/1.08 Barlow, Arial, sans-serif; letter-spacing: -.03em; color: #fff; }
.me-retenir-tete h2 em { color: var(--corail); }
.me-retenir-intro { font-size: 15px; line-height: 1.6; color: #cfcfcf; }
.me-icone-clair { background: rgba(255,98,72,.16); }
.me-retenir-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.me-retenir-liste li { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); font: 500 16px/1.4 Barlow, Arial, sans-serif; color: #f2f2f2; }
.me-retenir-liste li p { margin: 0; color: inherit; }
.me-retenir-num { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--corail); color: #fff; font: 800 14px Barlow, Arial, sans-serif; }
@media (max-width: 991px) { .me-retenir { grid-template-columns: 1fr; gap: 20px; padding: 28px 22px; } }
.me-retenir-zone { padding-bottom: 72px; }
.me-corps { padding-bottom: 48px; }

.hp-pied-bas a { color: #9aa3aa !important; }

/* Mobile : les boutons d'action (hors en-tête de page et menu) prennent toute la largeur. */
@media (max-width: 560px) {
  .hp .hp-btn, .hp .hp-mobile, .hp .ls-pastille-lien, .hp .hp-btn-petit { display: flex !important; width: 100%; justify-content: center; }
  .hp .hp-entete .hp-btn, .hp .fo-barre-mobile .hp-btn { width: auto; }
  .hp .hp-titre-ligne { align-items: stretch; }
  .ls-actus-titre .ls-pastille-lien { margin-top: 4px; }
  .me-signaler-grille .hp-btn { width: 100%; }
  .hp :has(> .hp-mobile) > .hp-titre-ligne > .hp-btn, .hp :has(> .hp-mobile) > .hp-titre-ligne > .hp-lien { display: none !important; }
  .hp .hp-titre-ligne > .hp-lien { justify-content: center; width: 100%; padding: 13px 20px; border: 2px solid var(--corail); border-radius: 999px; }
}

/* ---------------------------------------------------------------- Bouton de thème (en-tête) */
.hp-entete-droite { display: flex; align-items: center; gap: 12px; }
.hp-theme { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 1px solid var(--bord); border-radius: 12px; background: transparent; color: #111; cursor: pointer; transition: background .2s, color .2s; }
.hp-theme:hover { background: var(--fond); color: var(--corail); }
.hp-theme:focus-visible { outline: 3px solid var(--corail); outline-offset: 2px; }
.hp-theme-soleil { display: none; }
html[data-theme="sombre"] .hp-theme-lune { display: none; }
html[data-theme="sombre"] .hp-theme-soleil { display: block; }

/* ---------------------------------------------------------------- Mode sombre */
/* Contrastes visés : texte courant au moins 7:1 sur le fond (WCAG AAA), texte secondaire au moins 4,5:1 (AA). */
html[data-theme="sombre"] { color-scheme: dark; }
html[data-theme="sombre"] body { background: #0f1113; }
html[data-theme="sombre"] .hp { --fond: #1b1e22; --bord: #2c3036; --texte: #d4d8dc; --gris: #a6adb4; --corail-clair: rgba(255,98,72,.16); background: #0f1113; color: var(--texte); }
html[data-theme="sombre"] .hp :is(h1, h2, h3, h4, strong, summary, dt, dd, blockquote, figcaption strong) { color: #f3f4f6; }
html[data-theme="sombre"] .hp :is(p, li, td, th, .fo-prose, .bl-chapo, .hp-intro, .ls-offre-accroche, .hp-offre-accroche, .ls-sous-titre, .bl-intro, .hp-hero-chapo, .ls-explication-texte, .ls-savoir-intro, .ls-seo-intro) { color: var(--texte); }
html[data-theme="sombre"] .hp :is(small, time, .hp-offre-jusqua, .bl-meta, .hp-mention, .fo-mention, .fo-ariane, .ls-etape p, .hp-etapes p, .bl-mini time) { color: var(--gris); }
html[data-theme="sombre"] .hp .fo-ariane [aria-current] { color: #f3f4f6; }
html[data-theme="sombre"] .hp em { color: #ff7a63; }
html[data-theme="sombre"] .hp a.hp-lien, html[data-theme="sombre"] .hp .fo-prose a, html[data-theme="sombre"] .hp .hp-mention a { color: #ff8a75 !important; }
/* Surfaces (cartes, encarts, accordéons) */
html[data-theme="sombre"] .hp :is(.hp-entete, .hp-offre, .ls-offre, .hp-avantage, .hp-avis-carte, .bl-carte, .bl-rubrique, .ls-actu, .hp-article, .fo-details, .fo-sommaire, .bl-encart-recents, .me-section, .me-bref-carte, .hp-questions details, .ls-faq-liste details, .ls-bloc, .bl-puces a, .fo-ticket, .fo-copier-petit, .bl-mini-offre, .hp-marques, .me-maj, .tm-tiroir, .tm-panneau) { background-color: #17191c; border-color: var(--bord); color: var(--texte); }
html[data-theme="sombre"] .hp :is(.ls-carte, .fo-encart, .bl-encart-offres, .me-sommaire, .ls-bloc:nth-child(3n+1), .hp-offre-bas, .me-coches li, .bl-prose blockquote) { background-color: #1b1e22; border-color: var(--bord); }
html[data-theme="sombre"] .hp .ls-offre .hp-offre-bas, html[data-theme="sombre"] .hp .fo-gain { background: rgba(255,98,72,.14); }
html[data-theme="sombre"] .hp .hp-offre-bas, html[data-theme="sombre"] .hp .hp-offre-bas code, html[data-theme="sombre"] .hp .fo-code code, html[data-theme="sombre"] .hp .fo-copier-petit code { color: #f3f4f6; }
html[data-theme="sombre"] .hp :is(.hp-offre, .ls-offre, .bl-carte, .hp-avantage, .hp-avis-carte, .me-bref-carte, .ls-actu, .hp-article) { box-shadow: 0 8px 22px rgba(0,0,0,.35); }
html[data-theme="sombre"] .hp .bl-puces a[aria-current] { background: var(--corail); border-color: var(--corail); color: #fff; }
html[data-theme="sombre"] .hp .ls-offre time { background: rgba(96,140,230,.18); color: #a9c4ff; }
html[data-theme="sombre"] .hp .hp-tag, html[data-theme="sombre"] .hp .bl-tag { background: color-mix(in srgb, var(--c) 22%, #17191c); color: color-mix(in srgb, var(--c) 55%, #fff); }
/* Logos de marque : passés en blanc pour rester lisibles sur fond sombre. */
html[data-theme="sombre"] .hp :is(.hp-offre-logo, .ls-offre-logo, .tm-logo, .fo-logo, .bl-mini-offre, .fo-encart) img { filter: brightness(0) invert(1); }
html[data-theme="sombre"] .hp .fo-logo { background: #1b1e22; box-shadow: none; border: 1px solid var(--bord); }
html[data-theme="sombre"] .hp .hp-marques img { filter: brightness(0) invert(1); opacity: .7; }
/* Logo du site, boutons */
html[data-theme="sombre"] .hp .hp-logo { color: #f3f4f6 !important; }
html[data-theme="sombre"] .hp .hp-logo img { content: url(/images/logo/icone-blanc.svg); }
html[data-theme="sombre"] .hp .hp-nav ul { color: #f3f4f6; }
html[data-theme="sombre"] .hp .hp-sous-menu { background: #17191c; box-shadow: 0 14px 34px rgba(0,0,0,.5); }
html[data-theme="sombre"] .hp .hp-btn-ligne { background: transparent; border-color: #f3f4f6; color: #f3f4f6 !important; }
html[data-theme="sombre"] .hp .hp-btn-contour { background: transparent; }
html[data-theme="sombre"] .hp .hp-theme, html[data-theme="sombre"] .hp .hp-burger { color: #f3f4f6; background: #1b1e22; }
html[data-theme="sombre"] .hp .hp-burger span, html[data-theme="sombre"] .hp .hp-burger span::before, html[data-theme="sombre"] .hp .hp-burger span::after { background: #f3f4f6; }
html[data-theme="sombre"] .hp :is(.tm-liste a, .tm-liste button, .tm-offres a, .tm-fermer, .tm-retour, .tm-reseaux a, .tm-secondaire a) { color: #f3f4f6; }
html[data-theme="sombre"] .hp .tm-liste a.tm-actif { color: #ff8a75; }
/* En-têtes de page : fond sombre à la place du crème, l'image reste visible à droite. */
html[data-theme="sombre"] .hp .hp-hero { background: #0f1113; }
html[data-theme="sombre"] .hp .hp-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(15,17,19,.94) 0%, rgba(15,17,19,.82) 38%, rgba(15,17,19,.1) 70%); pointer-events: none; }
html[data-theme="sombre"] .hp .hp-hero-texte { z-index: 2; }
html[data-theme="sombre"] .hp :is(.ls-hero, .bl-hero) { background-color: #15171a; background-image: linear-gradient(90deg, #15171a 0%, rgba(21,23,26,.94) 36%, rgba(21,23,26,.15) 66%), var(--image); }
html[data-theme="sombre"] .hp :is(.fo-hero, .ed-hero) { background: #15171a; }
html[data-theme="sombre"] .hp .me-vigilance { background: #2a2216; border-color: #5c4a26; }
html[data-theme="sombre"] .hp .fo-expiree { background: #2a2216; color: #f5c77a; }
html[data-theme="sombre"] .hp .fo-maj, html[data-theme="sombre"] .hp .me-maj { color: #6ee7a0; }
html[data-theme="sombre"] .hp .me-num { color: #2c3036; }
/* 404 */
html[data-theme="sombre"] .e404 { color: var(--texte); }
html[data-theme="sombre"] .e404 :is(.e404-chiffres, .e404-titre, h2) { color: #f3f4f6; }
html[data-theme="sombre"] .e404 :is(.e404-coupon, .e404-offre) { background: #17191c; }
html[data-theme="sombre"] .e404 .e404-coupon::before, html[data-theme="sombre"] .e404 .e404-coupon::after { background: #0f1113; }
html[data-theme="sombre"] .e404 .e404-coupon-code, html[data-theme="sombre"] .e404 .e404-offre-texte strong, html[data-theme="sombre"] .e404 .e404-coupon-reponse { color: #f3f4f6; }
html[data-theme="sombre"] .e404 .e404-offre-logo { background: #1b1e22; }
html[data-theme="sombre"] .e404 .e404-offre-logo img { filter: brightness(0) invert(1); }
html[data-theme="sombre"] .e404 .e404-bouton:not(.e404-bouton-plein) { border-color: #f3f4f6; color: #f3f4f6; }
@media (max-width: 991px) {
  html[data-theme="sombre"] .hp .hp-hero::before { background: linear-gradient(180deg, rgba(15,17,19,.92) 0%, rgba(15,17,19,.85) 100%); }
  html[data-theme="sombre"] .hp .hp-hero::before { display: none; }
  html[data-theme="sombre"] .hp :is(.ls-hero, .bl-hero) { background-image: linear-gradient(180deg, rgba(21,23,26,.94) 0%, rgba(21,23,26,.86) 100%), var(--image); }
  .hp-entete-droite { gap: 8px; }
  .hp-theme { width: 44px; height: 44px; }
}
@media (max-width: 420px) { .hp-entete .hp-logo { font-size: 18px; gap: 6px; } .hp-entete .hp-logo img { height: 24px; } .hp-entete { padding-left: 14px; } .hp-entete-droite { gap: 6px; } .hp-theme, .hp-burger { width: 40px !important; height: 40px !important; } }
html[data-theme="sombre"] .hp :is(.fo-h3, .ls-actus-titre h2, .me-sommaire p, .bl-carte-texte strong, .hp-offre-nom, .tm-titre) { color: #f3f4f6; }

/* En-tête fixé en haut de l'écran après défilement, avec une arrivée douce. */
@keyframes entete-arrive { from { transform: translate(-50%, -140%); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.hp-entete.hp-entete-fixe { position: fixed; top: 10px; animation: entete-arrive .45s cubic-bezier(.2,.7,.2,1); }
@media (prefers-reduced-motion: reduce) { .hp-entete.hp-entete-fixe { animation: none; } }

/* Bande de logos : alignée sur ordinateur, défilement continu sur mobile (le second groupe sert à boucler). */
.hp-marques-piste { width: 100%; }
.hp-marques-groupe { display: flex; align-items: center; justify-content: space-between; gap: 28px; width: 100%; }
.hp-marques-double { display: none; }
@keyframes marques-defile { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 991px) {
  .hp-marques .hp-conteneur { display: block; overflow: hidden; padding-left: 0; padding-right: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); }
  .hp-marques-piste { display: flex; width: max-content; animation: marques-defile 24s linear infinite; }
  .hp-marques-groupe { flex: none; width: auto; justify-content: flex-start; gap: 36px; padding-right: 36px; }
  .hp-marques-double { display: flex; }
}
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  .hp-marques .hp-conteneur { overflow-x: auto; -webkit-mask-image: none; mask-image: none; padding: 18px 24px; }
  .hp-marques-piste { animation: none; }
  .hp-marques-double { display: none; }
}

/* Texte courant en Lato Regular (les titres, boutons et libellés gardent Barlow, déclaré sur chaque élément). */
.hp { font-family: Lato, Arial, sans-serif; }
:where(.hp) p, :where(.hp) li, :where(.hp) blockquote, :where(.hp) dd, :where(.hp) td { font-family: Lato, Arial, sans-serif; font-weight: 400; }
:where(.hp) p { font-size: 14px; }
/* Paragraphes de contenu : 14 px. */
.hp :is(.hp-intro, .fo-prose, .ls-explication-texte, .ls-savoir-intro, .ls-faq-intro, .hp-avantage p, .hp-etapes p, .ls-etape p, .hp-avis-carte blockquote, .hp-questions details > div, .ls-faq-liste details > div, .ls-savoir-bloc .fo-prose, .ls-bloc .fo-prose, .me-section .fo-prose, .bl-intro-complete, .me-signaler-texte, .me-retenir-intro, .bl-carte-grande .bl-chapo) { font-family: Lato, Arial, sans-serif; font-size: 14px; font-weight: 400; }
.hp :is(.fo-prose, .bl-prose) p, .hp :is(.fo-prose, .bl-prose) li { font-size: 14px; line-height: 1.7; }
.hp :is(.hp-offre-accroche, .ls-offre-accroche, .bl-chapo, .hp-pied p, .hp-pied ul, .hp-mention, .fo-mention, .bl-meta, .fo-ariane) { font-family: Lato, Arial, sans-serif; }
.hp :is(.ls-sous-titre, .hp-hero-chapo, .fo-chapo, .bl-intro, .me-retenir-liste li, .ls-hero .ls-sous-titre) { font-family: Lato, Arial, sans-serif; font-weight: 400; }
.hp .me-retenir-liste li { font-size: 14px; }

/* Échelle de texte unifiée (hors titres et boutons) : 14 px pour la lecture comme pour le texte secondaire. */
.hp :is(.hp-offre-accroche, .ls-offre-accroche, .bl-chapo, .bl-carte-grande .bl-chapo, .hp-avantage p, .hp-etapes p, .ls-etape p, .hp-avis-carte blockquote, .hp-intro, .ls-faq-intro, .ls-explication-texte, .ls-savoir-intro, .fo-prose, .bl-prose, .hp-questions details > div, .ls-faq-liste details > div, .ls-savoir-bloc .fo-prose, .ls-bloc .fo-prose, .me-section .fo-prose, .me-coches li, .me-retenir-liste li, .me-retenir-intro, .me-signaler-texte, .fo-details dl > div, .fo-details dd, .fo-details dt, .bl-intro-complete, .tm-carte > span:not(.hp-rond), .e404-texte) { font-family: Lato, Arial, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; }
.hp :is(.fo-ariane, .bl-meta, .bl-meta time, .hp-offre-jusqua, .hp-mention, .fo-mention, .hp-pied p, .hp-pied ul, .hp-pied-bas, .hp-preuve small, .ls-actu time, .bl-mini time, .bl-tous-grille ul, .bl-tous-grille time, .hp-avis-carte small, .hp-article-texte small, .bl-carte-texte time, .fo-ticket small, .fo-apps, .me-maj, .bl-rubrique span:last-child, .me-sommaire ol, .fo-sommaire ol) { font-family: Lato, Arial, sans-serif; font-size: 14px; }

/* ---------------------------------------------------------------- Pictos « Pourquoi utiliser… » : animation au survol */
/* Le picto se redessine trait par trait, puis un petit mouvement propre à chacun. */
@keyframes ic-trace { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ic-saut { 0%, 100% { transform: translateY(0) rotate(0); } 35% { transform: translateY(-5px) rotate(-6deg); } 65% { transform: translateY(0) rotate(3deg); } }
@keyframes ic-pulse { 0%, 100% { transform: scale(1); } 45% { transform: scale(1.14); } }
@keyframes ic-balance { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 55% { transform: rotate(6deg); } 80% { transform: rotate(-2deg); } }
@keyframes ic-eclat { 0%, 100% { opacity: 1; transform: scale(1); } 20% { opacity: .35; } 40% { opacity: 1; transform: scale(1.12); } 60% { opacity: .55; } 75% { opacity: 1; } }
.hp-avantage .hp-icone { transition: transform .25s ease; }
.hp-avantage .ic { transform-origin: 50% 60%; }
.hp-avantage:is(:hover, :focus-within) .ic :is(path, circle, rect) { stroke-dasharray: 1; animation: ic-trace .8s cubic-bezier(.6,0,.2,1) both; }
.hp-avantage:is(:hover, :focus-within) .ic :is(path, circle, rect):nth-child(2) { animation-delay: .12s; }
.hp-avantage:is(:hover, :focus-within) .ic :is(path, circle, rect):nth-child(3) { animation-delay: .24s; }
.hp-avantage:is(:hover, :focus-within) .ic-cadeau { animation: ic-saut .7s .5s ease both; }
.hp-avantage:is(:hover, :focus-within) .ic-bouclier { animation: ic-pulse .6s .55s ease both; }
.hp-avantage:is(:hover, :focus-within) .ic-portefeuille { animation: ic-balance .8s .45s ease both; }
.hp-avantage:is(:hover, :focus-within) .ic-eclair { animation: ic-eclat .7s .5s ease both; }
@media (prefers-reduced-motion: reduce) {
  .hp-avantage .ic, .hp-avantage .ic :is(path, circle, rect) { animation: none !important; stroke-dasharray: none !important; }
}

/* Blocs HTML collés dans le back office (styles en ligne en Roboto/sans-serif) : texte ramené en Lato, titres intacts. */
.hp :is(.fo-prose, .bl-prose) :not(h1, h2, h3, h4, h5, h6, code, pre, kbd, svg, svg *, .bo-titre, .bo-copier, .bo-copier *, .hp-btn, .hp-btn *) { font-family: Lato, Arial, sans-serif !important; }

/* ---------------------------------------------------------------- Bloc « Je profite du parrainage » (bloc_offre) */
.bo { position: relative; margin: 36px 0; padding: 30px 30px 24px; border: 1px solid var(--bord); border-radius: 24px; background: #fff; box-shadow: 0 18px 40px rgba(14,14,16,.06); overflow: hidden; }
.bo::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: var(--corail); }
.bo-tete { display: flex; align-items: center; gap: 18px; margin-bottom: 20px; }
.bo-logo { display: grid; place-items: center; width: 68px; height: 68px; flex: none; border-radius: 18px; background: var(--fond); }
.bo-logo img { max-width: 50px; max-height: 34px; object-fit: contain; }
.hp .fo-prose .bo-titre { margin: 0 0 4px; font: 800 22px/1.15 Barlow, Arial, sans-serif; letter-spacing: -.03em; color: #111; }
.hp .fo-prose .bo-accroche { margin: 0; color: var(--texte); }
.hp .fo-prose .bo-points { display: grid; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.hp .fo-prose .bo-points li { position: relative; margin: 0; padding-left: 34px; }
.bo-points li::before { content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; background: var(--corail-clair) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4 8-9' fill='none' stroke='%23ff6248' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; }
.hp .fo-prose .bo-astuce { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 22px; padding: 14px 16px; border-radius: 14px; background: var(--fond); }
.bo-astuce svg, .bo-note svg { flex: none; margin-top: 2px; color: var(--corail); }
.bo-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 12px; margin-bottom: 20px; }
.bo-copier { display: inline-flex; align-items: center; gap: 12px; padding: 8px 10px 8px 20px; border: 2px dashed var(--corail); border-radius: 999px; background: #fff; color: var(--corail); font: 700 15px Barlow, Arial, sans-serif; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.bo-copier:hover { background: var(--corail-clair); }
.bo-copier code { padding: 6px 12px; border-radius: 999px; background: var(--corail-clair); color: #111; font: 700 16px "Courier New", monospace; }
.bo-copier.fo-copie { border-color: #15803d; background: #ecfdf3; color: #15803d; }
.bo-copier.fo-copie span::after { content: " ✓"; }
.hp .fo-prose a.bo-cta { text-decoration: none; }
.hp .fo-prose .bo-note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding-top: 18px; border-top: 1px solid var(--bord); font-size: 14px; line-height: 1.6; color: var(--gris); }
.bo-note strong { color: #111; }
@media (max-width: 767px) {
  .bo { margin: 28px 0; padding: 26px 18px 20px; border-radius: 20px; }
  .bo-tete { align-items: flex-start; gap: 14px; }
  .bo-logo { width: 54px; height: 54px; border-radius: 14px; }
  .bo-logo img { max-width: 40px; max-height: 28px; }
  .hp .fo-prose .bo-titre { font-size: 20px; }
  .bo-actions { flex-direction: column; }
  .bo-copier { justify-content: space-between; }
  .bo-actions .hp-btn { width: 100%; }
}
html[data-theme="sombre"] .hp .bo { background: #17191c; border-color: var(--bord); box-shadow: 0 8px 22px rgba(0,0,0,.35); }
html[data-theme="sombre"] .hp .bo-logo, html[data-theme="sombre"] .hp .bo-astuce { background: #1b1e22; }
html[data-theme="sombre"] .hp .bo-logo img { filter: brightness(0) invert(1); }
html[data-theme="sombre"] .hp .bo-titre, html[data-theme="sombre"] .hp .bo-note strong { color: #f3f4f6; }
html[data-theme="sombre"] .hp .bo-note { color: var(--gris); border-color: var(--bord); }
html[data-theme="sombre"] .hp .bo-copier { background: transparent; color: #ff8a75; }
html[data-theme="sombre"] .hp .bo-copier code { background: rgba(255,98,72,.16); color: #f3f4f6; }
html[data-theme="sombre"] .hp .bo-copier.fo-copie { background: rgba(21,128,61,.18); color: #6ee7a0; border-color: #6ee7a0; }
html[data-theme="sombre"] .hp .fo-prose a.bo-cta { color: #fff !important; }

/* ---------------------------------------------------------------- Encadré de fin (citation Markdown dont le 1er paragraphe est un titre en gras) */
/* Dans le back office : une citation « > » commençant par **Titre**, une liste, et un lien seul en dernière ligne (le bouton). */
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) { position: relative; margin: 36px 0; padding: 32px 32px 30px; border: 0; border-radius: 24px; background: var(--nuit); color: #c9ced3; overflow: hidden; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child)::after { content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,98,72,.14); pointer-events: none; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:first-child { margin: 0 0 6px; font: 800 24px/1.15 Barlow, Arial, sans-serif !important; letter-spacing: -.03em; color: #fff; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:first-child strong { color: inherit; font: inherit; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) :is(p, li) { position: relative; z-index: 1; color: #c9ced3; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) strong { color: #fff; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) a { color: #ff8a75; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) ul { display: grid; gap: 10px; margin: 18px 0; padding: 0; list-style: none; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) li { margin: 0; padding-left: 30px; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,98,72,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h13M13 7l5 5-5 5' fill='none' stroke='%23ff6248' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:last-child:not(:first-child) { margin: 22px 0 0; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:last-child > a:only-child { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: 999px; background: var(--corail); color: #fff !important; font: 700 15px Barlow, Arial, sans-serif !important; text-decoration: none; box-shadow: 0 10px 22px rgba(255,90,67,.3); transition: transform .15s; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:last-child > a:only-child::after { content: "→"; }
.hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:last-child > a:only-child:hover { transform: translateY(-2px); }
@media (max-width: 767px) {
  .hp .fo-prose blockquote:has(> p:first-child > strong:only-child) { padding: 26px 20px 24px; border-radius: 20px; }
  .hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:first-child { font-size: 21px !important; }
  .hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:last-child > a:only-child { width: 100%; justify-content: center; }
}
html[data-theme="sombre"] .hp .fo-prose blockquote:has(> p:first-child > strong:only-child) { background: #1b1e22; border: 1px solid var(--bord); }
html[data-theme="sombre"] .hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:last-child > a:only-child { color: #fff !important; }

/* ---------------------------------------------------------------- Tableaux du contenu (```embed <div class="tableau"> ou tableaux Markdown) */
.hp .fo-prose .tableau { margin: 24px 0; border: 1px solid var(--bord); border-radius: 18px; background: #fff; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.hp .fo-prose .tableau table { display: table; width: 100%; margin: 0; border-collapse: collapse; font-size: 14px; }
.hp .fo-prose .tableau caption { padding: 16px 18px 0; caption-side: top; text-align: left; font: 700 15px Barlow, Arial, sans-serif; color: #111; }
.hp .fo-prose .tableau :is(th, td) { padding: 13px 16px; border: 0; border-bottom: 1px solid var(--bord); text-align: left; vertical-align: top; line-height: 1.5; }
.hp .fo-prose .tableau thead th { background: var(--fond); font: 700 13px Barlow, Arial, sans-serif !important; letter-spacing: .02em; text-transform: uppercase; color: #111; white-space: nowrap; }
.hp .fo-prose .tableau tbody th { font-weight: 700; color: #111; background: transparent; }
.hp .fo-prose .tableau tbody tr:last-child > * { border-bottom: 0; }
.hp .fo-prose .tableau tbody tr:hover > * { background: #fcfaf7; }
.hp .fo-prose .tableau strong { color: #111; }
.hp .fo-prose .tableau tbody th strong:first-child, .hp .fo-prose .tableau td:last-child > strong:only-child { color: var(--corail); }
.pastille { display: inline-block; padding: 3px 10px; border-radius: 999px; background: #e8f7ee; color: #15803d; font: 700 12px Barlow, Arial, sans-serif; white-space: nowrap; }
.etoiles { color: #f5a623; letter-spacing: 1px; white-space: nowrap; }
.hp .fo-prose .tableau + p > em:only-child { font-size: 13px; color: var(--gris); }
html[data-theme="sombre"] .hp .fo-prose .tableau { background: #17191c; border-color: var(--bord); }
html[data-theme="sombre"] .hp .fo-prose .tableau thead th { background: #1b1e22; color: #f3f4f6; }
html[data-theme="sombre"] .hp .fo-prose .tableau :is(caption, tbody th, strong) { color: #f3f4f6; }
html[data-theme="sombre"] .hp .fo-prose .tableau tbody tr:hover > * { background: #1b1e22; }
html[data-theme="sombre"] .pastille { background: rgba(110,231,160,.14); color: #6ee7a0; }

/* ---------------------------------------------------------------- Vidéos (figure vidéo du texte riche) */
.hp .fo-prose figure.w-richtext-figure-type-video { position: relative; height: 0; margin: 24px 0; overflow: hidden; border-radius: 18px; background: #000; }
.hp .fo-prose figure.w-richtext-figure-type-video > div, .hp .fo-prose figure.w-richtext-figure-type-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hp .fo-prose .tableau table:has(tr > :nth-child(4)) { min-width: 560px; }
@media (max-width: 767px) { .hp .fo-prose .tableau :is(th, td) { padding: 11px 12px; } .hp .fo-prose .tableau thead th { white-space: normal; } }

/* ---------------------------------------------------------------- Boutons : libellé sur une seule ligne */
.hp .hp-btn, .hp .ls-pastille-lien, .hp .bo-copier { white-space: nowrap; }
@media (max-width: 767px) {
  /* Sur mobile, la flèche des boutons pleine largeur est retirée : plus de place pour le texte. */
  .hp .hp-btn svg, .hp .fo-prose blockquote:has(> p:first-child > strong:only-child) > p:last-child > a:only-child::after { display: none; }
  .hp .hp-btn { padding-left: 18px; padding-right: 18px; }
}
/* Les tableaux larges défilent dans leur cadre au lieu d'élargir la colonne de texte. */
.fo-principal, .fo-aside, .bl-corps > *, .fo-prose { min-width: 0; }
@media (max-width: 991px) { .hp .fo-barre-mobile > * { width: 100%; min-width: 0; justify-content: center; } }

/* ---------------------------------------------------------------- Boutons secondaires sur photo ou aplat de couleur */
/* Le contour est réservé aux fonds blancs ; sur une photo ou un aplat : bouton blanc, texte noir, ombre très légère. */
.hp :is(.hp-hero, .hp-sombre, .ls-hero, .bl-hero, .fo-hero, .me-signaler) :is(.hp-btn-ligne, .hp-btn-contour),
html[data-theme="sombre"] .hp :is(.hp-hero, .hp-sombre, .ls-hero, .bl-hero, .fo-hero, .me-signaler) :is(.hp-btn-ligne, .hp-btn-contour) {
  border: 0; background: #fff; color: #111 !important;
  box-shadow: 0 1px 2px rgba(14,14,16,.06), 0 8px 24px rgba(14,14,16,.10);
}
.hp :is(.hp-hero, .hp-sombre, .ls-hero, .bl-hero, .fo-hero, .me-signaler) :is(.hp-btn-ligne, .hp-btn-contour):hover {
  transform: translateY(-2px); box-shadow: 0 2px 4px rgba(14,14,16,.08), 0 14px 30px rgba(14,14,16,.14);
}