/*
    MAQUETTE A -- « CREPUSCULE » : la page prend le ciel de l'accueil de
    l'application (lavande en haut, peche en bas), ses cartes crème cerclees
    d'orange, son logo violet, ses toiles et sa citrouille. Reste CLAIRE.
*/

:root {
  --paper: #efe3fb;
  --paper-2: #fff8ee;
  --ink: #2b1748;
  --ink-soft: #5a4478;
  --ink-faint: #85709f;
  --line: #efbd92;
  --brand: #7a28d4;
  --brand-deep: #581c9e;
  --warm: #f2781a;
  --cool: #8a5be0;
  --night: #1b0f36;
  --night-2: #2a1650;
  --shadow-sm: 0 2px 4px rgba(90, 40, 120, .10), 0 8px 20px rgba(160, 80, 60, .12);
  --shadow-md: 0 10px 30px rgba(90, 40, 120, .16), 0 2px 8px rgba(160, 80, 60, .10);
  --shadow-phone: 0 30px 60px rgba(50, 15, 90, .38), 0 6px 16px rgba(50, 15, 90, .24);
}

html { background: #c9a9f0; color-scheme: light; }
body.hw-a { background: linear-gradient(180deg, #c9a9f0 0%, #e4bcdb 42%, #f9c9a2 100%) fixed; }

.hw-a .nav { background: rgba(239, 227, 251, .74); border-bottom: 2px solid rgba(240, 160, 75, .55); }
.hw-a .nav-links a:hover, .hw-a a:hover { color: var(--warm); }

/* le fil de soie : la portee du hero devient des fils clairs sur le ciel */
.hw-a .hero .staff { --staff-line: rgba(255, 255, 255, .7); opacity: 1; }

.hw-a .btn-primary { background: linear-gradient(135deg, #8d38ea, #5a1fa8); box-shadow: 0 10px 24px rgba(122, 40, 212, .42); }
.hw-a .btn-primary:hover { background: linear-gradient(135deg, #f78d2c, #e0640e); color: #fff; }
.hw-a .btn-ghost { background: var(--paper-2); border-color: #f0a04b; }

/* cartes : creme, cercle orange, toile dans le coin */
.hw-a .card, .hw-a details, .hw-a .midi-art, .hw-a .table-wrap, .hw-a .toc {
  background: rgba(255, 248, 238, .93); border: 2px solid #f0a04b;
}
.hw-a .card::before, .hw-a details::before, .hw-a .midi-art::before {
  content: ""; position: absolute; top: 0; right: 0; width: 92px; height: 100px; pointer-events: none;
  background: url("hal/toile-coin-b.png") no-repeat top right / contain; opacity: .55;
}
.hw-a .callout { background: rgba(255, 248, 238, .93); border-left-color: var(--brand); }

/* sections « nuit » : le violet nuit de l'application, avec une toile ronde */
.hw-a .night { background: linear-gradient(180deg, #1b0f36, #2d1652); }
.hw-a .night::after {
  content: ""; position: absolute; top: -26px; right: -30px; width: 250px; height: 250px; pointer-events: none;
  background: url("hal/toile-ronde-1.png") no-repeat center / contain; opacity: .28;
}
.hw-a .night .marker svg, .hw-a .night .facts svg { color: #ff9a3c; }

.hw-a .cta { background: linear-gradient(155deg, #fff0dc, #f4ddf6 72%); border: 2px solid #f0a04b; }

.hw-a footer { background: rgba(255, 248, 238, .7); border-top: 2px solid #f0a04b; position: relative; overflow: hidden; }

/* decor du hero A */
.hw-a .hw-p1 { left: -86px; bottom: -34px; width: 150px; z-index: 3; }
.hw-a .hw-p2 { right: -52px; bottom: -26px; width: 104px; z-index: 3; }
.hw-a .hw-c1 { right: -78px; bottom: 8px; width: 46px; z-index: 2; --wx: 56%; --wy: 4%; }
.hw-a .hw-c2 { left: -30px; bottom: -16px; width: 40px; z-index: 4; --wx: 50%; --wy: 3%; }
.hw-a .hero { padding-bottom: clamp(70px, 9vw, 120px); }

/* pied de page : deux bougies */
.hw-a .hw-f1 { right: 7%; bottom: 8px; width: 42px; --wx: 56%; --wy: 4%; }
.hw-a .hw-f2 { right: calc(7% + 54px); bottom: 8px; width: 36px; --wx: 50%; --wy: 3%; }