/* Les yeux de Rom’ — styles propres à la page d’accueil (index.html).
   Le système commun (boutons, billets, sections, pied…) est dans style.css. */

/* ---------- Bandeau principal ---------- */
.hero{padding:72px 0 96px}
.hero__grille{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.9fr);gap:64px;align-items:center}
.hero h1{font-size:clamp(44px,6.3vw,92px);line-height:.98;margin-bottom:28px}
.hero h1 span{display:block}
.hero__texte{font-size:21px;max-width:33em;margin-bottom:34px}
.hero__boutons{display:flex;flex-wrap:wrap;gap:16px}
/* Le billet « 73 », posé sur un billet vierge */
.pile{position:relative;padding:26px 0 30px}
.pile__arriere{position:absolute;inset:26px 0 30px}
.pile__arriere .ombre{height:100%;transform:rotate(6deg) translate(16px,8px)}
.pile__arriere .billet{height:100%;--perf:calc(100% - 96px)}
.pile .billet--or{--perf:calc(100% - 96px)}
.billet__corps{position:relative;flex:1;padding:28px 30px 30px}
.billet__sur{margin:0 0 4px;font:700 15px/1.3 var(--texte);letter-spacing:.1em;text-transform:uppercase}
.billet__grand{margin:0;font:800 clamp(110px,11vw,168px)/.86 var(--titre);letter-spacing:-.04em}
.billet__txt{margin:14px 0 0;font-size:20px;line-height:1.45;font-weight:700;max-width:17em}
.billet__talon{flex:none;width:96px;background:var(--blanc);border-left:var(--pointilles);padding:22px 20px;display:flex;flex-direction:column;gap:16px;align-items:center}
.billet__talon .bande{flex:1;width:100%}
.billet__talon img{width:60px;height:auto}
/* Le sceau : un œil dont l’iris porte les six couleurs, une étoile dans la pupille */
.sceau{position:absolute;top:50px;right:24px;width:clamp(92px,8.4vw,124px);height:auto;aspect-ratio:1;transform:rotate(-9deg)}

/* ---------- Bande défilante ---------- */
.defilant{background:var(--encre);color:var(--blanc);overflow:hidden;padding:18px 0}
.defilant__piste{display:flex;width:max-content;animation:defile 38s linear infinite}
.defilant:hover .defilant__piste{animation-play-state:paused}
.defilant span{display:inline-flex;align-items:center;gap:34px;padding-right:34px;font:800 30px/1 var(--titre);white-space:nowrap}
.defilant span::after{content:"";width:16px;height:16px;border-radius:50%;background:var(--pt,var(--or))}
.defilant span:nth-child(6n+1){--pt:var(--c1)}.defilant span:nth-child(6n+2){--pt:var(--c2)}.defilant span:nth-child(6n+3){--pt:var(--c3)}
.defilant span:nth-child(6n+4){--pt:var(--c4)}.defilant span:nth-child(6n+5){--pt:var(--c5)}.defilant span:nth-child(6n){--pt:var(--c6)}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- Chiffres ---------- */
.chiffres{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.chiffre{padding:30px 30px 28px}
.chiffre:nth-child(1){--ct:var(--c1)}.chiffre:nth-child(2){--ct:var(--c3)}.chiffre:nth-child(3){--ct:var(--c5)}
.chiffre__valeur{margin:0 0 10px;font:800 clamp(64px,6.4vw,96px)/1 var(--titre);letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.chiffre__valeur small{font-size:.46em;letter-spacing:-.01em}

/* ---------- Rêves réalisés ---------- */
.reves{padding-top:0}
.reve{margin-bottom:34px}
.reve .billet{--perf:40%;min-height:340px}
.reve__visuel{position:relative;flex:none;width:40%;overflow:hidden;border-right:var(--pointilles)}
.reve__visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.reve__visuel .etiquette{position:absolute;left:16px;bottom:16px}
.reve__corps{flex:1;padding:40px 44px 38px;display:flex;flex-direction:column;align-items:flex-start}
.reve__type{display:flex;align-items:center;gap:12px;margin:0 0 14px;font:700 17px/1.3 var(--texte);letter-spacing:.09em;text-transform:uppercase;color:var(--accent-texte)}
.reve__type b{display:inline-grid;place-items:center;min-width:44px;height:32px;border-radius:6px;background:var(--encre);color:var(--blanc);font:800 17px/1 var(--titre);letter-spacing:0}
.reve h3{margin-bottom:16px}
.reve p:last-child{margin-bottom:0}
.reve .lien{margin-top:auto}

/* ---------- Prochaine soirée ---------- */
.soiree{position:relative;padding:104px 0 112px}
.soiree h2{margin-bottom:48px}
.guirlande{position:absolute;top:0;left:0;width:100%;height:34px;overflow:hidden;display:flex;justify-content:center;gap:42px}
.guirlande i{flex:none;width:18px;height:18px;border-radius:50%;margin-top:8px}
.guirlande i:nth-child(6n+1){background:var(--c1)}.guirlande i:nth-child(6n+2){background:var(--c2)}.guirlande i:nth-child(6n+3){background:var(--c3)}
.guirlande i:nth-child(6n+4){background:var(--c4)}.guirlande i:nth-child(6n+5){background:var(--c5)}.guirlande i:nth-child(6n){background:var(--c6)}
.soiree .billet{--perf:calc(100% - 330px)}
.soiree__date{flex:none;margin:0;max-width:none;padding:34px 40px;display:flex;flex-direction:column;justify-content:center;background:var(--or)}
.soiree__jour{font:800 clamp(88px,8vw,128px)/.86 var(--titre);letter-spacing:-.04em}
.soiree__mois{font:800 34px/1.1 var(--titre)}
.soiree__info{flex:1;padding:34px 36px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:10px}
.soiree__info h3{font-size:clamp(26px,2.5vw,34px)}
.soiree__info p{margin:0;font-size:21px;font-weight:700}
.soiree__talon{flex:none;width:330px;border-left:var(--pointilles);display:grid;place-items:center;padding:28px}

/* ---------- Aperçu de la boutique ---------- */
.produits{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.produit{position:relative;display:flex;flex-direction:column;background:var(--blanc);border-radius:var(--rayon);overflow:hidden;text-decoration:none;box-shadow:var(--ombre);transition:transform .3s var(--courbe),box-shadow .3s var(--courbe)}
.produit:hover{transform:translateY(-6px);box-shadow:var(--ombre-haute)}
.produit__image{aspect-ratio:4/3;display:grid;place-items:center;background:var(--teinte)}
.produit:nth-child(1){--teinte:var(--teinte-or)}.produit:nth-child(2){--teinte:var(--teinte-bleu)}.produit:nth-child(3){--teinte:var(--teinte-rouge)}
.produit__image img{width:62%;height:auto;transition:transform .45s var(--courbe)}
.produit:hover .produit__image img{transform:scale(1.07) rotate(-3deg)}
.produit__prix{position:absolute;top:18px;right:18px;transform:rotate(4deg);background:var(--encre);color:var(--blanc);font:800 26px/1 var(--titre);padding:10px 16px 10px 30px;border-radius:8px}
.produit__prix::before{content:"";position:absolute;left:11px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--teinte)}
.produit__texte{flex:1;padding:22px 26px 26px;border-top:var(--pointilles)}
.produit h3{font-size:25px;margin-bottom:6px}
.produit p{margin:0;color:var(--encre-2)}
.boutique__bas{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 28px;margin:30px 0 0;max-width:none}
.boutique__bas .note{margin:0}

/* ---------- Nous soutenir : quatre coupons ---------- */
.aides{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.aide{display:block;text-decoration:none;transition:transform .3s var(--courbe)}
.aide .ombre{height:100%}
.aide .billet{--perf:104px;height:100%;min-height:168px}
.aide__num{flex:none;width:104px;display:grid;place-items:center;background:var(--blanc);box-shadow:inset 12px 0 0 var(--cn);padding-left:12px;border-right:var(--pointilles);font:800 40px/1 var(--titre);color:var(--encre)}
.aide:nth-child(1){--cn:var(--c1)}.aide:nth-child(2){--cn:var(--c2)}.aide:nth-child(3){--cn:var(--c4)}.aide:nth-child(4){--cn:var(--c5)}
.aide__corps{flex:1;padding:26px 24px 26px 30px}
.aide h3{margin-bottom:8px}
.aide p{margin:0}
.aide__fleche{flex:none;align-self:center;margin-right:26px;width:52px;height:52px;border-radius:50%;border:var(--trait);display:grid;place-items:center;transition:background .25s,color .25s,transform .3s var(--courbe)}
.aide__fleche svg{width:24px;height:24px}
.aide:hover{transform:translateY(-4px)}
.aide:hover .aide__fleche,.aide:focus-visible .aide__fleche{background:var(--encre);color:var(--or);transform:translateX(6px)}

/* ---------- Écrans étroits ---------- */
@media (max-width:1080px){
  .hero__grille{grid-template-columns:1fr;gap:40px}
  .pile{max-width:520px}
  .soiree .billet{--perf:calc(100% - 250px)}
  .soiree__talon{width:250px}
}
@media (max-width:860px){
  .chiffres,.produits,.aides{grid-template-columns:1fr}
  .produit__image{aspect-ratio:auto;height:250px}
  .produit__image img{width:auto;height:200px}
  /* billets à la verticale : les encoches passent sur les côtés */
  .reve .billet{flex-direction:column;--perf:230px;--n1:0 var(--perf);--n2:100% var(--perf)}
  .reve__visuel{width:auto;height:230px;border-right:0;border-bottom:var(--pointilles)}
  .reve__corps{padding:30px 24px 28px}
  .soiree .billet{flex-direction:column;--perf:calc(100% - 110px);--n1:0 var(--perf);--n2:100% var(--perf)}
  .soiree__talon{width:auto;height:110px;border-left:0;border-top:var(--pointilles);padding:0 20px}
  .soiree__date{flex-direction:row;align-items:baseline;gap:14px;padding:24px 24px 22px}
  .soiree__info{padding:24px}
}
@media (max-width:640px){
  .hero{padding:40px 0 64px}
  .hero h1{font-size:clamp(40px,12.6vw,60px);margin-bottom:22px}
  .hero__texte{font-size:19px;margin-bottom:28px}
  .hero__boutons .bouton{width:100%}
  .reves{padding-top:0}
  .pile .billet--or,.pile__arriere .billet{--perf:calc(100% - 74px)}
  .billet__corps{padding:22px 20px 24px 22px}
  .billet__talon{width:74px;padding:18px 13px}
  .billet__talon img{width:50px}
  .billet__talon .bande{gap:3px}
  .billet__talon .bande i{min-width:4px}
  .sceau{top:52px;right:14px;width:88px}
  .billet__txt{font-size:18px}
  .defilant span{font-size:24px;gap:24px;padding-right:24px}
  .soiree{padding:80px 0}
  .soiree h2{margin-bottom:34px}
  .guirlande{gap:30px}
  /* coupons à la verticale : le texte prend toute la largeur */
  .aide .billet{flex-direction:column;--perf:68px;--n1:0 var(--perf);--n2:100% var(--perf);min-height:0}
  .aide__num{width:auto;height:68px;place-items:center start;padding:10px 0 0 24px;font-size:32px;box-shadow:inset 0 10px 0 var(--cn);border-right:0;border-bottom:var(--pointilles)}
  .aide__corps{padding:20px 24px 24px}
  .aide__fleche{position:absolute;top:17px;right:22px;width:44px;height:44px;margin:0}
}