/* CODES PROMO pages (/codes-promo/, univers, marque). Charte tokens of main.css, no green. */
.cp { padding-block: 1.25rem 4rem; }
.cp-h2 { font-family: var(--serif); font-size: var(--t-2xl, 1.6rem); line-height: 1.15; margin: 0 0 .9rem; color: var(--anthracite); }
.cp-intro { color: var(--feutre); max-width: var(--lecture, 40rem); margin: -.35rem 0 1.1rem; }
.cp > section, .cp > nav { margin-top: 3rem; }

/* Header: compact (Romain 04/11 evening): breadcrumb and live count on one line, H1 44px max, intro on one line */
.cp-masque { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cp-haut { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem; }
.cp-haut .ariane { margin: 0; }
.cp-tete__sur { margin: 0; font-family: var(--sans); font-size: var(--t-xs, .8rem); }
.cp-tete__pastille { display: inline-block; padding: .25rem .7rem; border-radius: var(--r-ctl, 999px); background: var(--moutarde-voile); color: var(--anthracite); font-weight: 600; }
.cp-tete__maj { font-weight: 400; color: var(--feutre); }
.cp-tete { display: flex; align-items: center; gap: 1.1rem; margin: .7rem 0 0; }
.cp-tete__txt { min-width: 0; }
.cp-tete h1 { font-family: var(--serif); font-size: clamp(1.55rem, 1.15rem + 1.35vw, 2.75rem); line-height: 1.1; margin: 0 0 .35rem; letter-spacing: -.01em; max-width: 48rem; text-wrap: balance; }
.cp-tete__chapeau { font-size: var(--t-md, 1rem); color: var(--feutre); margin: 0; }
.cp-tete__logo { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 6.5rem; height: 6.5rem; padding: .7rem; border-radius: var(--r-img, 10px); background: var(--cp-fond, var(--moutarde-voile)); font-weight: 700; text-align: center; }
.cp-tete__logo img { max-width: 100%; max-height: 2.4rem; width: auto; height: auto; display: block; }
.cp-tete__logo--sombre { background: var(--anthracite); color: var(--blanc); }
.cp-vide { margin-top: 1rem; padding: 1rem 1.2rem; border: 1px dashed var(--trait); border-radius: var(--r-img, 10px); color: var(--feutre); max-width: var(--lecture, 40rem); }

/* Filter bar: univers chips (links) then the filter groups, one compact wrapping row */
.cp .cp-tete + section { margin-top: 1.1rem; }
.cpf { font-family: var(--sans); display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.4rem; margin: 0 0 .9rem; padding: .55rem 0; border-block: 1px solid var(--trait); }
.cpf__univers, .cpf__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.cpf__univers { padding-right: 1.4rem; border-right: 1px solid var(--trait); }
.cpf__lib { font-size: var(--t-xs, .72rem); text-transform: uppercase; letter-spacing: .08em; color: var(--feutre); margin-right: .2rem; }
.cpf__btn, .cpf__lien { font: inherit; font-size: var(--t-sm, .84rem); line-height: 1.2; padding: .32rem .7rem; border-radius: var(--r-ctl, 999px); border: 1px solid var(--trait); background: var(--blanc); color: var(--anthracite); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s, color .15s; }
.cpf__btn:hover, .cpf__lien:hover { border-color: var(--anthracite); }
.cpf__btn[aria-pressed="true"], .cpf__lien[aria-current="page"] { background: var(--anthracite); border-color: var(--anthracite); color: var(--blanc); }
.cpf__lien { font-weight: 600; }
/* Déco chip pressed in place: it becomes the current choice, « Tous » goes back to light. */
.cpf__univers:has(.cpf__btn[aria-pressed="true"]) .cpf__lien[aria-current="page"] { background: var(--blanc); border-color: var(--trait); color: var(--anthracite); }
.cpf__n { font-weight: 400; opacity: .7; margin-left: .15rem; }
.cpf__n::before { content: "("; } .cpf__n::after { content: ")"; }
.cpf__lien.is-vide:not([aria-current]) { color: var(--feutre); border-style: dashed; background: transparent; }
.cpf__btn:focus-visible, .cpf__lien:focus-visible { outline: 2px solid var(--bleu); outline-offset: 2px; }
.cpf__vide { color: var(--feutre); }

/* Coupon cards (04/11 evening: a dense list, not a gallery). Reusable: .cpc works in any grid or alone.
   Square picture on the left (our catalogue photo, else a scene of our library, else the brand panel),
   then brand, the value once, our title; condition, end date and the button on the bottom row. */
.cp-grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: stretch; }
.cpc { --cpc-sable: #efe7d6; --cpc-vis: 8.75rem; position: relative; display: grid; grid-template-columns: var(--cpc-vis) minmax(0, 1fr); min-width: 0; min-height: 9.5rem; border-radius: var(--r-img, 10px); background: var(--blanc); border: 1px solid var(--trait); overflow: hidden; transition: border-color .18s, box-shadow .18s; }
.cpc[hidden] { display: none; }
.cpc:not(.cpc--passe):hover { border-color: var(--anthracite); box-shadow: 0 4px 16px rgba(37,39,43,.07); }

.cpc__visuel { position: relative; min-height: 100%; background: var(--cpc-sable); overflow: hidden; }
.cpc__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cpc__logo { position: absolute; display: flex; align-items: center; justify-content: center; color: var(--anthracite); }
.cpc__logo img { display: block; width: auto; height: auto; max-width: 100%; object-fit: contain; }
.cpc__nom { font-family: var(--serif); font-weight: 600; line-height: 1.1; text-align: center; text-wrap: balance; overflow-wrap: anywhere; }
.cpc--photo .cpc__logo { left: .45rem; right: .45rem; bottom: .45rem; min-height: 1.75rem; padding: .25rem .5rem; border-radius: 6px; background: var(--blanc); box-shadow: 0 1px 3px rgba(37,39,43,.14); }
.cpc--photo .cpc__logo img { max-height: 1.05rem; }
.cpc--photo .cpc__nom { font-size: .74rem; line-height: 1.15; }
.cpc--photo.cpc--clair .cpc__logo { background: var(--anthracite); color: var(--blanc); }
.cpc--panneau .cpc__visuel::before { content: ""; position: absolute; inset: .45rem; border: 1px solid rgba(37,39,43,.1); border-radius: 6px; pointer-events: none; }
.cpc--panneau .cpc__logo { inset: 0; padding: 1rem; }
.cpc--panneau .cpc__logo img { max-height: 2.1rem; }
.cpc--panneau .cpc__nom { font-size: 1.15rem; }
.cpc--panneau.cpc--clair .cpc__visuel { background: var(--anthracite); }
.cpc--panneau.cpc--clair .cpc__visuel::before { border-color: rgba(255,255,255,.14); }
.cpc--panneau.cpc--clair .cpc__logo { color: var(--blanc); }

.cpc__corps { display: flex; flex-direction: column; min-width: 0; font-family: var(--sans); padding: .8rem 1rem .85rem 1.1rem; }
.cpc__marque { margin: 0; font-size: var(--t-xs, .72rem); font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--feutre); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cpc__valeur { margin: .2rem 0 .3rem; font-family: var(--serif); font-weight: 700; font-size: 1.85rem; line-height: 1; letter-spacing: -.015em; color: var(--anthracite); }
.cpc__valeur--mots { font-size: 1.3rem; line-height: 1.1; letter-spacing: -.005em; }
.cpc__titre { margin: 0; font-family: var(--sans); font-size: var(--t-sm, .92rem); line-height: 1.35; font-weight: 600; color: var(--anthracite); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.cpc__pied { display: flex; align-items: flex-end; justify-content: space-between; gap: .4rem .9rem; margin-top: auto; padding-top: .6rem; }
.cpc__meta { margin: 0; min-width: 0; font-size: var(--t-xs, .78rem); line-height: 1.4; color: var(--feutre); }
.cpc__cond, .cpc__fin { display: block; }
.cpc__fin { color: var(--anthracite); }
.cpc__fin::before { content: ""; display: inline-block; width: .4rem; height: .4rem; margin: 0 .4rem .1rem 0; border-radius: 50%; background: var(--moutarde); vertical-align: middle; }
.cpc--passe .cpc__fin::before { background: var(--trait); }

/* Button: bottom right; a code shows its last two characters in a dashed tab */
.cpc__cta { position: static; flex: none; display: flex; align-items: stretch; min-height: 2.5rem; border-radius: 8px; background: var(--anthracite); color: var(--blanc); text-decoration: none; font-weight: 700; font-size: var(--t-sm, .86rem); overflow: hidden; white-space: nowrap; }
.cpc__cta::before { content: ""; position: absolute; inset: 0; z-index: 2; } /* whole card clickable */
.cpc__cta-txt { display: flex; align-items: center; justify-content: center; flex: 1; padding: 0 .85rem; }
.cpc__cta-bout { display: flex; align-items: center; justify-content: center; min-width: 2.7rem; margin: .3rem .3rem .3rem 0; padding: 0 .5rem; border: 1.5px dashed var(--moutarde); border-radius: 5px; background: rgba(255,255,255,.06); color: var(--moutarde); font-weight: 700; letter-spacing: .12em; }
.cpc:hover .cpc__cta, .cpc__cta:hover { background: #000; color: var(--blanc); }
.cpc__cta:visited { color: var(--blanc); }
.cpc__cta:focus-visible { outline: 2px solid var(--moutarde); outline-offset: 3px; }
.cpc.is-copie .cpc__cta { background: var(--blanc); color: var(--anthracite); box-shadow: inset 0 0 0 2px var(--anthracite); }
.cpc.is-copie .cpc__cta-txt { letter-spacing: .08em; }
.cpc.is-copie .cpc__cta-bout { border-style: solid; border-color: var(--moutarde); background: var(--moutarde); color: var(--anthracite); letter-spacing: 0; }
.cpc__copie { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cpc--passe { opacity: .6; filter: grayscale(1); min-height: 7rem; }

/* Best code of a brand: the same coupon, alone, framed */
.cp-meilleur__carte { max-width: 44rem; }
.cp-meilleur .cpc { --cpc-vis: 10rem; min-height: 10.5rem; border-color: var(--anthracite); }
.cp-meilleur .cpc__valeur { font-size: 2.3rem; }
.cp-meilleur .cpc__valeur--mots { font-size: 1.55rem; }

/* How to */
.cp-etapes { list-style: none; counter-reset: cp; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.cp-etapes li { counter-increment: cp; position: relative; padding: 2.9rem 1.1rem 1.1rem; background: var(--blanc); border: 1px solid var(--trait); border-radius: var(--r-img, 10px); color: var(--feutre); line-height: 1.5; }
.cp-etapes li::before { content: counter(cp); position: absolute; top: .9rem; left: 1.1rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--anthracite); color: var(--blanc); display: grid; place-items: center; font-weight: 700; font-size: var(--t-sm, .9rem); }
.cp-etapes strong { color: var(--anthracite); }

/* Year calendar */
.cp-mois { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; }
.cp-mois__m { position: relative; min-height: 5.2rem; padding: .55rem .5rem; border-radius: 8px; background: var(--blanc); border: 1px solid var(--trait); display: flex; flex-direction: column; gap: .25rem; }
.cp-mois__nom { font-weight: 700; text-transform: capitalize; font-size: var(--t-sm, .9rem); }
.cp-mois__ev { font-size: var(--t-xs, .75rem); color: var(--feutre); line-height: 1.25; }
.cp-mois__point { position: absolute; top: .6rem; right: .55rem; width: .55rem; height: .55rem; border-radius: 50%; background: var(--moutarde); }
.cp-mois__m.is-courant { border-color: var(--anthracite); box-shadow: inset 0 0 0 1px var(--anthracite); }

/* Models, FAQ, mention */
.cp-modeles__grille { margin-top: .4rem; }
.cp-faq__q { border-bottom: 1px solid var(--trait); max-width: 52rem; }
.cp-faq__q summary { cursor: pointer; padding: 1rem 2rem 1rem 0; font-weight: 700; list-style: none; position: relative; }
.cp-faq__q summary::-webkit-details-marker { display: none; }
.cp-faq__q summary::after { content: "+"; position: absolute; right: .3rem; top: .85rem; font-size: 1.3rem; color: var(--bleu); }
.cp-faq__q[open] summary::after { content: "\2212"; }
.cp-faq__q p { margin: 0 0 1.1rem; color: var(--feutre); max-width: var(--lecture, 40rem); line-height: 1.55; }
.cp-mention { margin-top: 2.5rem; font-size: var(--t-sm, .88rem); color: var(--feutre); }

@media (max-width: 1000px) {
  .cp-grille { grid-template-columns: 1fr; }
  .cp-mois { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .cp > section, .cp > nav { margin-top: 2.2rem; }
  .cp .cp-tete + section { margin-top: .9rem; }
  .cp-tete { align-items: flex-start; gap: .8rem; }
  .cp-tete__logo { width: 4.5rem; height: 4.5rem; padding: .45rem; }
  .cp-tete__chapeau { font-size: var(--t-sm, .9rem); }
  .cpf { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: .45rem; padding: .5rem 0; }
  .cpf__univers, .cpf__groupe { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(var(--gutter, 1rem) * -1); padding-inline: var(--gutter, 1rem); }
  .cpf__univers { border-right: 0; }
  .cpf__univers::-webkit-scrollbar, .cpf__groupe::-webkit-scrollbar { display: none; }
  .cpc, .cp-meilleur .cpc { --cpc-vis: 4.75rem; min-height: 0; }
  .cpc__visuel { min-height: 0; height: var(--cpc-vis); margin: .85rem 0 0 .85rem; border-radius: 8px; }
  .cpc--photo .cpc__logo { display: none; }
  .cpc--panneau .cpc__logo { padding: .45rem; }
  .cpc--panneau .cpc__logo img { max-height: 1.4rem; }
  .cpc--panneau .cpc__nom { font-size: .85rem; }
  .cpc__corps { padding: .75rem .85rem .85rem .85rem; }
  .cpc__valeur, .cp-meilleur .cpc__valeur { font-size: 1.6rem; }
  .cpc__valeur--mots, .cp-meilleur .cpc__valeur--mots { font-size: 1.15rem; }
  .cpc__pied { flex-direction: column; align-items: stretch; gap: .5rem; padding-top: .5rem; }
  .cpc__meta { display: flex; flex-wrap: wrap; gap: 0 .7rem; }
  .cpc__cta { min-height: 2.6rem; }
  .cp-mois { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .cpc, .cpc__cta { transition: none; } }