/* Thème « Classique » : la présentation de l'ancien site (bandeau bleu, logo à gauche des offres, coups de cœur violets), en version moderne */
:root {
  --bleu: #2E5671;
  --bleu-fonce: #1F3D52;
  --jaune: #F2C200;
  --fond: #EEF1F4;
  --carte: #FFFFFF;
  --encre: #17242D;
  --gris: #66727B;
  --trait: #DDE3E8;
  --violet: #6A3FB5;
  --rouge: #D83C3C;
  --vert: #23804A;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fond); color: var(--encre); font: 15px/1.55 "Manrope", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; line-height: 1.2; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 20px; }
/* Teintes douces tirées des couleurs réglables */
.ticket, .fiche, .cote .bloc, .faq, .evts, table.top { --doux: color-mix(in srgb, var(--bleu) 9%, #fff); }

.annonce { background: var(--bleu-fonce); color: #fff; text-align: center; font-size: 14px; font-weight: 600; padding: 7px 16px; }
header { background: linear-gradient(135deg, var(--bleu), var(--bleu-fonce)); color: #fff; }
.entete { display: flex; align-items: center; gap: 30px; padding: 16px 20px; }
.entete img { height: 96px; }
.recherche { flex: 1; display: flex; background: #fff; border-radius: 14px; padding: 5px; box-shadow: 0 10px 28px -14px rgba(0, 0, 0, .55); }
.recherche input { flex: 1; border: 0; background: none; padding: 9px 14px; font: 600 15px "Manrope"; color: var(--encre); outline: none; }
.recherche button { border: 0; border-radius: 10px; background: var(--rouge); color: #fff; font: 800 14px "Manrope"; padding: 0 22px; cursor: pointer; transition: filter .15s; }
.recherche button:hover { filter: brightness(1.08); }
nav.menu { display: flex; justify-content: center; gap: 4px; background: #fff; color: var(--bleu-fonce); font-weight: 700; padding: 8px 20px; max-width: none; border-bottom: 1px solid var(--trait); overflow-x: auto; white-space: nowrap; }
nav.menu a { padding: 6px 12px; border-radius: 999px; transition: background .15s; }
nav.menu a:hover { background: color-mix(in srgb, var(--bleu) 9%, #fff); }
/* Éclair Lucide (zap) devant chaque lien, dessiné en jaune */
nav.menu a::before { content: ""; display: inline-block; width: 13px; height: 13px; margin-right: 5px; vertical-align: -1px; background: #E0A800;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Titres de section : texte bleu foncé, petit trait jaune du logo dessous */
.sec { margin: 34px 0 14px; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; }
.sec h2 { font-size: 21px; font-weight: 800; color: var(--bleu-fonce); letter-spacing: -.01em; }
.sec h2::after { content: ""; display: block; width: 38px; height: 4px; margin-top: 7px; border-radius: 4px; background: var(--jaune); }
.sec h2 mark { background: none; color: var(--rouge); padding: 0; }
.sec a { font-size: 14px; font-weight: 700; color: var(--bleu); }
.sec a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Carte d'offre : colonne de gauche logo + montant, contenu à droite, bouton en bas */
.ticket { display: grid; grid-template-columns: 150px 1fr; grid-template-rows: 1fr auto; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; position: relative; box-shadow: 0 1px 2px rgba(23, 36, 45, .04), 0 10px 26px -20px rgba(23, 36, 45, .35); transition: box-shadow .2s, transform .2s; }
.ticket:hover { box-shadow: 0 2px 4px rgba(23, 36, 45, .05), 0 16px 34px -20px rgba(23, 36, 45, .45); }
.ticket + .ticket { margin-top: 12px; }
.ticket .talon { display: contents; }
.ticket .logo { grid-column: 1; grid-row: 1; display: grid; place-items: center; padding: 16px 14px 8px; }
.ticket .logo img { width: 96px; height: 96px; object-fit: contain; background: #fff; border: 1px solid var(--trait); border-radius: 14px; padding: 8px; }
.ticket .talon .valeur { grid-column: 1; grid-row: 2; align-self: end; margin: 0 14px 16px; }
.ticket .corps { grid-column: 2; grid-row: 1; padding: 16px 20px 6px; }
.ticket .talon .btn, .ticket .talon .code-visible, .ticket .talon .case-code { grid-column: 2; grid-row: 2; align-self: end; margin: 6px 20px 16px; justify-self: end; min-width: 270px; width: auto; }
/* La case du code : au moins la largeur du bouton qu'elle remplace, plus large pour un long code, jusqu'à la place disponible (puis le code passe à la ligne) */
.ticket .talon .case-code { max-width: calc(100% - 40px); }
.valeur { font-weight: 800; font-size: 24px; color: var(--bleu-fonce); text-align: center; padding: 8px 6px; line-height: 1.1; background: var(--doux); border-radius: 12px; letter-spacing: -.02em; }
.valeur small { display: block; font-size: 12px; color: var(--gris); font-weight: 700; letter-spacing: 0; }
/* Offre sans montant : pas de pastille vide */
.valeur:empty { display: none; }
.etiquettes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.etq { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: var(--doux); color: var(--bleu); }
.etq.top { background: var(--violet); color: #fff; }
.etq.excl { background: color-mix(in srgb, var(--rouge) 11%, #fff); color: var(--rouge); }
.etq.fin { background: #FFF1D9; color: #8F5500; }
.etq.ech { background: color-mix(in srgb, var(--vert) 11%, #fff); color: var(--vert); }
.ticket h3 { font-size: 17px; font-weight: 800; margin: 2px 0 4px; letter-spacing: -.01em; }
.ticket .bout { font-size: 13px; color: var(--gris); font-weight: 700; }
.meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--gris); margin-top: 6px; }
.meta .ok { color: var(--vert); font-weight: 700; }
.pouces { display: inline-flex; gap: 8px; }

/* Boutons : le code dépasse à droite, flouté, comme un ticket qu'on décolle (le vrai code n'est jamais dans la page) */
.btn { display: block; text-align: center; font-weight: 800; font-size: 15px; padding: 12px 20px; border-radius: 12px; transition: transform .15s, box-shadow .15s, background .15s; }
.btn:hover { transform: translateY(-1px); }
/* La coupe du coin se mesure sur la diagonale : côté du coin × 0,7071 */
/* Bouton du code : le coin de la feuille bleue se corne. Le rabat est le dos de la feuille (bleu, éclairé sur le pli),
   le coin découvert montre le papier argenté qui est dessous. Au survol, le coin se soulève et retombe.
   --pli (taille du coin) est déclaré pour pouvoir s'animer. Navigateur trop ancien : le coin change de taille sans animation. */
@property --pli { syntax: "<length>"; inherits: true; initial-value: 22px; }
.btn.code { --pli: 22px; --dos: var(--bleu); background: linear-gradient(225deg, transparent calc(var(--pli) * .7071), var(--bleu) calc(var(--pli) * .7071)); color: #fff; position: relative; padding-right: 34px; filter: drop-shadow(0 6px 8px color-mix(in srgb, var(--bleu) 35%, transparent)); transition: --pli .45s cubic-bezier(.34, 1.56, .64, 1), transform .15s; }
/* Papier argenté découvert sous le coin */
.btn.code::after { content: ""; position: absolute; top: 0; right: 0; width: var(--pli); height: var(--pli); border-top-right-radius: 12px; pointer-events: none;
  background: linear-gradient(225deg, #E4E8EC 0%, #AFB9C3 50%, transparent 50%); clip-path: polygon(0 0, 100% 0, 100% 100%); }
/* Rabat : le dos de la feuille, plus clair le long du pli, avec son ombre sur le bouton */
.btn.code::before { content: ""; position: absolute; top: 0; right: 0; width: var(--pli); height: var(--pli); border-bottom-left-radius: 5px; pointer-events: none; z-index: 1;
  background: linear-gradient(45deg, color-mix(in srgb, var(--dos) 80%, #000) 0%, var(--dos) 35%, color-mix(in srgb, var(--dos) 45%, #fff) 50%, transparent 50%);
  filter: drop-shadow(-2px 3px 2px rgba(0, 0, 0, .35)); }
.btn.code:hover, .btn.code:focus-visible { --pli: 34px; --dos: var(--bleu-fonce); background: linear-gradient(225deg, transparent calc(var(--pli) * .7071), var(--bleu-fonce) calc(var(--pli) * .7071)); animation: pli-souleve .7s ease-out; }
/* Le coin se soulève franchement, retombe un peu, puis se pose */
@keyframes pli-souleve { 0% { --pli: 22px; } 45% { --pli: 42px; } 70% { --pli: 31px; } 100% { --pli: 34px; } }
.btn.code:active { --pli: 46px; }
@media (prefers-reduced-motion: reduce) { .btn.code:hover, .btn.code:focus-visible { animation: none; } }
.btn.offre { background: var(--bleu); color: #fff; }
.btn.offre:hover { background: var(--bleu-fonce); }
/* Offre déjà ouverte pendant la visite : bouton blanc, le visiteur voit où il en est */
.btn.offre.vu { background: #fff; color: var(--bleu); box-shadow: inset 0 0 0 2px var(--bleu); }
.btn.offre.vu:hover { background: color-mix(in srgb, var(--bleu) 8%, #fff); }
/* Bouton simple (formulaire, installation) : sans le coin corné, réservé aux codes promo */
.btn.plein { background: var(--bleu); color: #fff; }
.btn.plein:hover { background: var(--bleu-fonce); }
.code-visible { font-family: "Manrope", system-ui, sans-serif; font-weight: 800; font-size: 16px; letter-spacing: .08em; color: var(--bleu-fonce); background: var(--doux); border: 2px dashed var(--bleu); border-radius: 12px; padding: 8px 14px; text-align: center; }
.code-visible small { display: block; font: 600 11px "Manrope"; color: var(--gris); }
/* Coup de cœur : liseré violet à gauche, la pastille « Coup de cœur » fait le reste */
.ticket.vedette { border-color: color-mix(in srgb, var(--violet) 35%, #fff); box-shadow: 0 10px 26px -18px color-mix(in srgb, var(--violet) 70%, transparent); }
/* Barre droite, coupée net par les coins arrondis de la carte */
.ticket.vedette::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--violet); pointer-events: none; }
.ticket.perime { background: #FBF7EE; }
.ticket.perime .valeur { color: var(--gris); background: #F1ECE0; }

.grille { display: grid; grid-template-columns: 1fr 300px; gap: 26px; align-items: start; }
.cote .bloc { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 16px; }
/* Description de la boutique, posée dans une boîte comme les autres blocs */
.texte.description { max-width: none; background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 18px 22px; }
.cote .bloc + .bloc { margin-top: 14px; }
.cote h3 { font-size: 16px; margin-bottom: 10px; color: var(--bleu-fonce); }
.evts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.evt-c { border-radius: 14px; padding: 16px; color: #fff; min-height: 100px; display: flex; flex-direction: column; justify-content: space-between; transition: transform .15s; }
.evt-c:hover { transform: translateY(-2px); }
.evt-c b { font-size: 18px; }
.evt-c span { font-size: 13px; }
.cats { display: flex; flex-wrap: wrap; gap: 6px; }
.cats a { font-size: 13px; font-weight: 700; color: var(--bleu); background: color-mix(in srgb, var(--bleu) 9%, #fff); padding: 5px 12px; border-radius: 999px; }
.cats a:hover, .cats a[aria-current] { background: var(--bleu); color: #fff; }
/* Sur le fond gris d'une page (échantillons), les pastilles deviennent de vrais boutons blancs */
main > .cats { gap: 8px; margin: 4px 0 18px; }
main > .cats a { background: #fff; border: 1px solid var(--trait); padding: 8px 16px; font-size: 14px; box-shadow: 0 1px 3px rgba(23,36,45,.08); transition: background .15s, color .15s, border-color .15s; }
main > .cats a:hover, main > .cats a[aria-current] { background: var(--bleu); border-color: var(--bleu); color: #fff; }

.ariane { font-size: 13px; color: var(--gris); margin: 20px 0 0; }
.ariane a { color: var(--bleu); font-weight: 600; }
.fiche { margin-top: 14px; display: grid; grid-template-columns: 140px 1fr; gap: 24px; background: var(--carte); border: 1px solid var(--trait); border-radius: 20px; padding: 24px; box-shadow: 0 10px 30px -22px rgba(23, 36, 45, .45); }
.fiche img { width: 140px; height: 140px; object-fit: contain; background: #fff; border-radius: 20px; border: 1px solid var(--trait); padding: 10px; }
.fiche h1 { font-size: 26px; color: var(--bleu-fonce); margin-bottom: 6px; letter-spacing: -.01em; }
.fiche h1 em { font-style: normal; color: var(--rouge); }
.etoiles { color: #F0A500; font-size: 18px; }
.note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--gris); }
.note b { color: var(--encre); }
.intro { grid-column: 2; margin: 8px 0 0; }
.compte { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--bleu); }
.fiche .compte > * { background: var(--doux); padding: 3px 10px; border-radius: 999px; }
.message-perime { background: #FFF1D9; color: #6B4300; text-align: center; padding: 10px 14px; margin-bottom: 12px; border-radius: 12px; font-size: 14px; }
.faq { background: var(--carte); border: 1px solid var(--trait); border-radius: 16px; padding: 6px 18px; }
.faq details { padding: 12px 0; border-bottom: 1px solid var(--trait); }
.faq details:last-child { border-bottom: 0; }
.faq summary { font-weight: 800; color: var(--bleu-fonce); cursor: pointer; }
table.top { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--carte); font-size: 14px; border: 1px solid var(--trait); border-radius: 16px; overflow: hidden; }
table.top th { text-align: left; padding: 10px 14px; background: var(--doux); color: var(--bleu-fonce); }
table.top td { padding: 10px 14px; border-top: 1px solid var(--trait); }
table.top td:first-child { font-weight: 800; }
.avis-mention { font-size: 11.5px; color: var(--gris); }

footer { margin-top: 56px; background: var(--bleu-fonce); color: #DCE6EE; padding: 34px 0; font-size: 13px; }
footer .cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
footer b { color: #fff; display: block; margin-bottom: 8px; font-size: 14px; }
footer a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 760px) {
  .entete { flex-wrap: wrap; gap: 10px; padding: 10px 16px 14px; }
  .entete img { height: 58px; }
  .recherche { flex-basis: 100%; }
  nav.menu { justify-content: flex-start; gap: 2px; font-size: 14px; padding: 6px 10px; }
  .wrap { padding-left: 12px; padding-right: 12px; }
  .sec { margin: 26px 0 12px; }
  .sec h2 { font-size: 19px; }
  .grille { grid-template-columns: 1fr; }
  .ticket { grid-template-columns: 96px 1fr; border-radius: 14px; }
  .ticket .logo { padding: 14px 8px 6px; place-items: start center; }
  .ticket .logo img { width: 64px; height: 64px; border-radius: 12px; padding: 5px; }
  .ticket .talon .valeur { margin: 0 5px 14px; }
  .ticket .corps { padding: 12px 12px 4px; }
  .ticket .talon .btn, .ticket .talon .code-visible, .ticket .talon .case-code { min-width: 0; max-width: none; width: auto; justify-self: stretch; margin: 4px 12px 14px; }
  .btn { font-size: 14px; padding: 11px 14px; }
  .btn.code { padding-right: 30px; }
  .valeur { font-size: 18px; padding: 6px 4px; }
  /* Montant en mots (« Collecte sur demande ») : plus petit, coupé proprement */
  .valeur.long { font-size: 11.5px !important; letter-spacing: 0; padding: 6px 2px; overflow-wrap: normal; hyphens: auto; }
  .evts { grid-template-columns: repeat(2, 1fr); }
  .fiche { grid-template-columns: 72px 1fr; padding: 16px; gap: 14px; border-radius: 16px; }
  .fiche img { width: 72px; height: 72px; border-radius: 14px; padding: 6px; }
  .fiche h1 { font-size: 20px; }
  .intro { grid-column: 1 / -1; }
  footer .cols { grid-template-columns: 1fr 1fr; }
}