/* Les 5 rubriques sous la partie haute de l'accueil (maquette : Exemple 24 ; images : Exemples 25 à 29).
   Chargée après accueil.css. Bandes pleine largeur, image et texte qui changent de côté,
   titres dorés, traits dorés lumineux, animations discrètes (coupées si l'appareil le demande). */

.rubriques { position: relative; z-index: 2; }

/* ---------- Bande ---------- */
.bande {
  --lueur: 72%;
  position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); align-items: stretch;
  min-height: clamp(360px, 31vw, 500px); overflow: hidden;
  background:
    radial-gradient(ellipse 45% 75% at var(--lueur) 50%, rgba(47, 134, 255, .16), transparent 70%),
    radial-gradient(ellipse 30% 60% at calc(100% - var(--lueur)) 100%, rgba(255, 170, 40, .1), transparent 70%),
    linear-gradient(180deg, #060c2a, #040818);
}
.bande.inverse { --lueur: 28%; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); }

/* Trait doré lumineux entre les bandes, avec un reflet qui le parcourt */
.bande::before, .bande::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; z-index: 3; pointer-events: none; }
.bande::before {
  background: linear-gradient(90deg, rgba(247, 201, 72, 0), #f7c948 18%, #fff1a6 50%, #f7c948 82%, rgba(247, 201, 72, 0));
  box-shadow: 0 0 10px rgba(247, 201, 72, .85), 0 0 22px rgba(247, 201, 72, .35);
}
.bande::after {
  top: -3px; height: 8px; width: 160px; left: -200px; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255, 250, 220, .95), rgba(255, 220, 120, .35) 45%, transparent 70%);
  animation: reflet 9s linear infinite;
}
.bande:nth-child(2)::after { animation-delay: -2s; }
.bande:nth-child(3)::after { animation-delay: -4s; }
.bande:nth-child(4)::after { animation-delay: -6s; }
.bande:nth-child(5)::after { animation-delay: -8s; }
@keyframes reflet { from { left: -200px; } to { left: calc(100% + 40px); } }

/* ---------- Image ---------- */
.bande-visuel { position: relative; overflow: hidden; min-height: 280px; }
.bande-visuel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: derive 26s ease-in-out infinite alternate; }
.bande:not(.inverse) > .bande-visuel { -webkit-mask-image: linear-gradient(90deg, #000 58%, transparent); mask-image: linear-gradient(90deg, #000 58%, transparent); }
.bande.inverse > .bande-visuel:not(.duo):not(.detoure) { -webkit-mask-image: linear-gradient(270deg, #000 58%, transparent); mask-image: linear-gradient(270deg, #000 58%, transparent); }
.bande-roulette .bande-visuel img { object-position: 40% 60%; }
.bande-monde .bande-visuel img { object-position: 45% 55%; }
@keyframes derive { from { transform: scale(1.02); } to { transform: scale(1.09) translate(-1.2%, -1%); } }

/* Pièces et ordinateur : image détourée posée sur la bande, qui flotte doucement */
.bande-visuel.detoure { display: grid; place-items: center; padding: 20px 3vw 20px 0; }
.bande-visuel.detoure::before {
  content: ""; position: absolute; left: 12%; right: 8%; bottom: 10%; height: 30%; border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(47, 134, 255, .45), rgba(247, 201, 72, .15) 45%, transparent 70%);
  filter: blur(8px);
}
.bande-visuel.detoure img {
  position: relative; inset: auto; width: min(100%, 680px); height: auto; object-fit: contain;
  animation: flotte 7s ease-in-out infinite; filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .55));
}
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* Paquebot + salle de casino du bateau en médaillon */
.bande-visuel.duo .paquebot {
  object-position: 35% 50%;
  -webkit-mask-image: linear-gradient(270deg, #000 62%, transparent); mask-image: linear-gradient(270deg, #000 62%, transparent);
}
.bande-visuel.duo .salle {
  inset: auto 4% 9% auto; width: 40%; height: auto; aspect-ratio: 760 / 633; border-radius: 16px; z-index: 1;
  border: 2px solid #f2c14e; box-shadow: 0 0 18px rgba(247, 201, 72, .55), 0 14px 30px rgba(0, 0, 0, .6);
  animation: derive-salle 14s ease-in-out infinite alternate;
}
@keyframes derive-salle { from { transform: translateY(0) rotate(-1deg); } to { transform: translateY(-8px) rotate(.5deg); } }

/* ---------- Texte ---------- */
.bande-texte { position: relative; z-index: 2; align-self: center; padding: clamp(28px, 3.6vw, 60px) clamp(20px, 4vw, 70px); max-width: 680px; }
.bande.inverse .bande-texte { justify-self: end; }
.titre-rubrique {
  margin: 0 0 .45em; font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-weight: 700;
  font-size: clamp(1.9rem, 3vw, 3rem); line-height: 1.1; letter-spacing: .005em;
  background: linear-gradient(180deg, #fff7c8 0%, #ffd94f 38%, #e09a10 58%, #ffcf45 78%, #fff1a6 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #2a1600) drop-shadow(0 0 14px rgba(255, 190, 60, .35));
}
.titre-rubrique svg.i { color: #f7c948; width: 1em; height: 1em; margin-right: .35em; vertical-align: -.12em; stroke-width: 1.8; }
.bande p { margin: 0 0 .8em; color: rgba(255, 255, 255, .93); font-size: clamp(1rem, 1.12vw, 1.15rem); line-height: 1.6; }
.bande .precision {
  color: var(--or-clair); font-size: clamp(.92rem, 1vw, 1.02rem); padding-left: .8em;
  border-left: 3px solid rgba(247, 201, 72, .75);
}

/* Variantes de roulette */
.pastilles { display: flex; flex-wrap: wrap; gap: 14px 30px; margin: 16px 0 24px; }
.pastilles li { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 6.5em; line-height: 1.25; }
.drapeau-rond {
  display: block; width: 52px; height: 52px; margin-bottom: 7px; border-radius: 50%; overflow: hidden;
  box-shadow: 0 0 0 2px #f7c948, 0 0 16px rgba(247, 201, 72, .6);
}
.drapeau-rond svg { display: block; width: 100%; height: 100%; }
.pastilles strong { font-weight: 800; }
.pastilles small { color: rgba(255, 255, 255, .75); font-size: .85rem; }

/* Bouton « … — À venir → » */
.btn-avenir {
  display: inline-flex; align-items: center; gap: .8em; padding: .6em 1.5em; border-radius: 14px; color: #fff;
  border: 2px solid #f2c14e; background: linear-gradient(180deg, rgba(36, 28, 8, .85), rgba(8, 8, 22, .92));
  box-shadow: 0 0 14px rgba(247, 201, 72, .45), inset 0 0 10px rgba(247, 201, 72, .15);
  transition: box-shadow .25s, transform .25s;
}
a.btn-avenir { text-decoration: none; }
.btn-avenir > svg.i { width: 1.7em; height: 1.7em; color: var(--or); stroke-width: 1.7; }
.btn-avenir span { display: flex; flex-direction: column; align-items: center; line-height: 1.2; }
.btn-avenir strong { font-size: 1.05rem; font-weight: 800; }
.btn-avenir small { display: inline-flex; align-items: center; gap: .3em; color: var(--or); font-weight: 700; font-size: .92rem; }
.btn-avenir small svg.i { width: 1.05em; height: 1.05em; stroke-width: 2.6; transition: transform .25s; }
.btn-avenir:hover { box-shadow: 0 0 24px rgba(247, 201, 72, .75), inset 0 0 12px rgba(247, 201, 72, .25); transform: translateY(-1px); }
.btn-avenir:hover small svg.i { transform: translateX(3px); }

/* ---------- L'actualité du projet ---------- */
.bande-actu {
  --lueur: 85%;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 48px); align-items: center;
  padding: clamp(30px, 3.6vw, 56px) clamp(20px, 4vw, 70px); min-height: 0;
}
.actu-texte, .actu-liens { position: relative; z-index: 2; }
.prochainement { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; }
.prochainement li { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 8px; line-height: 1.25; }
.prochainement li + li { border-left: 1px solid rgba(247, 201, 72, .3); }
.prochainement .rond {
  display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 10px; border-radius: 50%;
  border: 2px solid rgba(247, 201, 72, .85); background: radial-gradient(circle, rgba(247, 201, 72, .14), rgba(4, 8, 24, .6) 70%);
  box-shadow: 0 0 14px rgba(247, 201, 72, .4);
}
.prochainement .rond svg.i { width: 32px; height: 32px; color: var(--or); stroke-width: 1.6; }
.prochainement strong { font-weight: 800; font-size: .98rem; }
.prochainement small { color: var(--or-clair); font-size: .85rem; }
.actu-liens { display: flex; flex-direction: column; gap: 22px; }
.btn-x-or {
  align-self: flex-start; display: inline-flex; align-items: center; gap: .9em; padding: .7em 1.4em; border-radius: 14px;
  color: #fff; text-decoration: none; border: 2px solid #f2c14e; background: rgba(4, 8, 24, .85);
  box-shadow: 0 0 14px rgba(247, 201, 72, .45); transition: box-shadow .25s;
}
.btn-x-or:hover { box-shadow: 0 0 24px rgba(247, 201, 72, .75); }
.btn-x-or svg.i { width: 2em; height: 2em; }
.btn-x-or span { display: flex; flex-direction: column; line-height: 1.25; }
.btn-x-or strong { font-size: 1.08rem; }
.btn-x-or small { color: rgba(255, 255, 255, .8); }
.actu-lettre h3 {
  display: flex; align-items: center; gap: .45em; margin: 0 0 .3em;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif; font-size: clamp(1.4rem, 1.8vw, 1.8rem); color: var(--or);
  text-shadow: 0 0 12px rgba(247, 201, 72, .4);
}
.actu-lettre h3 svg.i { width: 1.15em; height: 1.15em; }
.actu-lettre > p:not(.lettre-msg):not(.lettre-info) { margin: 0 0 12px; font-size: .98rem; }
.actu-lettre .lettre-form { display: flex; flex-direction: row; gap: 0; min-width: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 0 14px rgba(247, 201, 72, .35); }
.actu-lettre .lettre-form input[type="email"] {
  flex: 1; min-width: 0; padding: .75em 1em; border: 0; border-radius: 0; background: #fff; color: #10142a; font: inherit; font-size: 1rem;
}
.actu-lettre .lettre-form input[type="email"]::placeholder { color: #5a6077; }
.actu-lettre .lettre-form input[type="email"]:focus { outline: 3px solid var(--or); outline-offset: -3px; box-shadow: none; }
.btn-fleche {
  flex: none; display: grid; place-items: center; width: 58px; border: 0; color: #1b1100; font-weight: 800;
  background: linear-gradient(180deg, #ffe27a, #f2b52e 55%, #c98a00);
}
.btn-fleche svg.i { width: 24px; height: 24px; stroke-width: 2.6; }
.btn-fleche:hover { filter: brightness(1.08); }
.btn-fleche[disabled] { opacity: .75; cursor: wait; font-size: .78rem; width: auto; padding: 0 .8em; }
.actu-lettre .lettre-msg { margin: 10px 0 0; }
.actu-lettre .lettre-info { margin: 10px 0 0; font-size: .78rem; color: rgba(255, 255, 255, .62); line-height: 1.45; }
.actu-lettre .lettre-info a { color: #9fd0ff; }

/* ---------- Apparition au défilement (seulement si le script tourne) ---------- */
html.anim .apparait { opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
html.anim .apparait.vu { opacity: 1; transform: none; }

/* ---------- Bas de page sous les rubriques ---------- */
.rubriques + .pied { padding-top: 18px; border-top: 1px solid rgba(247, 201, 72, .25); }

/* =========================================================
   Téléphone et tablette : l'image au-dessus, le texte dessous
   ========================================================= */
@media (max-width: 999px) {
  .bande, .bande.inverse { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .bande-visuel { order: -1; height: 56vw; max-height: 440px; min-height: 0; }
  .bande:not(.inverse) > .bande-visuel, .bande.inverse > .bande-visuel:not(.duo):not(.detoure) {
    -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent); mask-image: linear-gradient(180deg, #000 72%, transparent);
  }
  .bande-visuel.duo .paquebot { -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent); mask-image: linear-gradient(180deg, #000 75%, transparent); }
  .bande-visuel.duo .salle { width: 44%; inset: auto 4% 12% auto; }
  .bande-visuel.detoure { height: auto; max-height: none; padding: 26px var(--marge) 4px; }
  .bande-texte, .bande.inverse .bande-texte { justify-self: stretch; max-width: none; padding: 6px var(--marge) 34px; }
  .bande-actu { grid-template-columns: minmax(0, 1fr); padding: 34px var(--marge) 30px; gap: 26px; }
  .prochainement { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
  .prochainement li:nth-child(3) { border-left: 0; }
  .btn-avenir { width: 100%; justify-content: center; }
  .btn-x-or { align-self: stretch; justify-content: center; }
}
@media (max-width: 400px) {
  .pastilles { gap: 12px 14px; justify-content: space-between; }
  .pastilles li { min-width: 0; flex: 1; }
  .drapeau-rond { width: 46px; height: 46px; }
}

@media (prefers-reduced-motion: reduce) {
  .bande::after, .bande-visuel img, .bande-visuel.detoure img, .bande-visuel.duo .salle { animation: none; }
  html.anim .apparait { opacity: 1; transform: none; transition: none; }
}