/* chanson-cadeau-fr · plain CSS, no build step, no web fonts (framework rule).
   Token names follow wiki/components/component-library; values swapped for a
   warm "premium gift card" palette (03-structure §0 Design direction). */
:root{
  --brand:#D9533F;        /* coral */
  --brand-dark:#B8402E;
  --navy:#2B1A33;         /* deep plum ink (keeps library token name) */
  --navy-dark:#1C1022;
  --gold:#E3A63A;
  --gold-dark:#C98D24;
  --teal:#6F8F7A;         /* sage accent */
  --ink:#2B1A33;
  --ink-soft:#6A5A6E;
  --line:#EBDFD5;
  --bg:#FFFAF4;
  --bg-alt:#F7ECE3;
  --card:#FFFFFF;
  --max:1120px;
  --radius:14px;
  --shadow:0 1px 2px rgba(43,26,51,.06),0 8px 24px rgba(43,26,51,.08);
  --font-head:Georgia,"Times New Roman",serif;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:1.0625rem;line-height:1.7}
img{max-width:100%;height:auto;display:block}
a{color:var(--brand-dark)}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--gold);outline-offset:2px;border-radius:4px}
::selection{background:#F6D9C9}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
h1,h2,h3{font-family:var(--font-head);color:var(--navy);line-height:1.2;font-weight:700}
h1{font-size:clamp(2rem,5vw,3.1rem);margin:.2em 0 .4em;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem);margin:0 0 .6em}
h3{font-size:1.2rem;margin:1.4em 0 .4em}
p{margin:0 0 1em}
blockquote{margin:1.2em 0;padding:1em 1.4em;background:var(--card);border-left:4px solid var(--gold);border-radius:0 var(--radius) var(--radius) 0;font-family:var(--font-head);font-size:1.1rem;color:var(--navy)}
blockquote p{margin:.2em 0}
table{width:100%;border-collapse:collapse;background:var(--card);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:.95rem;margin:1em 0}
th,td{padding:.75em .9em;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--navy);color:#fff;font-weight:600}
.table-scroll{overflow-x:auto}

/* header */
.site-header{background:var(--bg);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.header-top__inner{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px}
.nav__logo{font-family:var(--font-head);font-weight:700;font-size:1.35rem;color:var(--navy);text-decoration:none;white-space:nowrap}
.nav__logo span{color:var(--brand)}
.site-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px}
.site-nav a,.site-nav summary{display:block;padding:.5em .75em;color:var(--navy);text-decoration:none;font-weight:500;font-size:.98rem;border-radius:8px;cursor:pointer}
.site-nav a:hover,.site-nav summary:hover{background:var(--bg-alt)}
.site-nav summary{list-style:none}
.site-nav summary::-webkit-details-marker{display:none}
.site-nav summary::after{content:" ▾";font-size:.8em}
.nav-drop{position:relative}
.nav-drop ul{position:absolute;top:100%;left:0;display:block;background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:6px;min-width:280px;z-index:30}
.nav__cta{white-space:nowrap}
@media (max-width:900px){
  .site-nav{order:3;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .header-top__inner{flex-wrap:wrap;padding:8px 16px}
  .site-nav ul{gap:0}
  .nav-drop ul{position:fixed;left:16px;right:16px;top:auto}
  .site-nav .nav__cta-li{display:none}
}
@media (min-width:901px){.header-cta{display:none!important}}

/* buttons */
.btn{display:inline-block;font-weight:600;text-decoration:none;border-radius:999px;padding:.8em 1.4em;line-height:1.2;border:2px solid transparent;text-align:center;transition:transform .15s ease,background .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn--lg{padding:1em 1.7em;font-size:1.05rem}
.btn--gold{background:var(--gold);color:var(--navy-dark)}
.btn--gold:hover{background:var(--gold-dark);color:var(--navy-dark)}
.btn--red{background:var(--brand);color:#fff}
.btn--red:hover{background:var(--brand-dark);color:#fff}
.btn--outline{border-color:var(--navy);color:var(--navy);background:transparent}
.btn--outline:hover{background:var(--navy);color:#fff}
.btn--sm{padding:.55em 1em;font-size:.95rem}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;margin:1.2em 0}
@media (prefers-reduced-motion:reduce){.btn{transition:none}.btn:hover{transform:none}}

/* breadcrumb */
.breadcrumb{font-size:.88rem;color:var(--ink-soft);padding-top:18px}
.breadcrumb ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4em}
.breadcrumb li+li::before{content:"›";margin-right:.4em;color:var(--ink-soft)}
.breadcrumb a{color:var(--ink-soft)}

/* hero */
.hero{padding:28px 0 48px;background:radial-gradient(1200px 400px at 85% -10%,#F9DCCB 0,transparent 60%),radial-gradient(800px 300px at -10% 110%,#F3E3C6 0,transparent 60%)}
.hero__split{display:grid;grid-template-columns:1.15fr .85fr;gap:40px;align-items:center}
@media (max-width:900px){.hero__split{grid-template-columns:1fr;gap:24px}}
.hero__eyebrow{display:inline-block;background:var(--card);border:1px solid var(--line);color:var(--brand-dark);font-weight:600;font-size:.85rem;padding:.35em .9em;border-radius:999px;margin:12px 0 0}
.hero__lead{font-size:1.15rem;color:var(--ink-soft);max-width:60ch}
.hero__checklist{list-style:none;padding:0;margin:0 0 1em}
.hero__checklist li{padding-left:1.8em;position:relative;margin:.35em 0;font-weight:500}
.hero__checklist li::before{content:"♪";position:absolute;left:0;top:0;color:var(--brand);font-weight:700}

/* sections */
.section{padding:56px 0}
.section--alt{background:var(--bg-alt)}
.section__lead{max-width:68ch}
.section .wrap>ul,.section .wrap>ol{max-width:68ch;padding-left:1.2em}
.section .wrap>p{max-width:68ch}
.section li{margin:.3em 0}

/* audio card */
.audio-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 18px 14px;margin:1em 0;max-width:560px}
.audio-card figcaption{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-head);font-weight:700;color:var(--navy);margin-bottom:10px}
.badge{font-family:var(--font-body);font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;background:var(--bg-alt);color:var(--brand-dark);padding:.25em .6em;border-radius:999px}
.audio-card audio{width:100%}
.audio-card__note{font-size:.9rem;color:var(--ink-soft);margin:.6em 0 0}
.audio-card .dl{font-size:.92rem;font-weight:600}

/* cards / grids */
.grid{display:grid;gap:18px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.grid--3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.grid--2,.grid--3{grid-template-columns:1fr}}
.card{display:block;background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px;text-decoration:none;color:var(--ink);border-top:4px solid var(--brand)}
.card h3{margin:.1em 0 .3em}
.card p{margin:0;color:var(--ink-soft);font-size:.96rem}
a.card:hover{transform:translateY(-2px)}
a.card .more{display:inline-block;margin-top:.6em;font-weight:600;color:var(--brand-dark)}

/* name grid */
.az{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.az a{display:inline-block;min-width:2.2em;text-align:center;padding:.3em .5em;border-radius:8px;background:var(--card);border:1px solid var(--line);text-decoration:none;font-weight:600;color:var(--navy)}
.name-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.name-grid h3{grid-column:1/-1;margin:.8em 0 0;font-size:1.05rem;color:var(--brand-dark)}
.name-link{display:block;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:.6em .8em;text-decoration:none;color:var(--navy);font-weight:600}
.name-link:hover{border-color:var(--brand);color:var(--brand-dark)}
.name-search{display:flex;gap:10px;flex-wrap:wrap;max-width:520px;margin:1em 0}
.name-search input{flex:1 1 220px;font:inherit;padding:.75em 1em;border:2px solid var(--line);border-radius:999px;background:var(--card)}

/* price */
.price-card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;max-width:520px;border-top:4px solid var(--gold)}
.price-strip{background:var(--card);border:1px dashed var(--gold);border-radius:var(--radius);padding:14px 18px;font-weight:600}

/* faq */
.faq h3{margin-top:1.2em}

/* cta strip */
.cta-strip{background:var(--navy);color:#F6EDF3;padding:56px 0;text-align:center}
.cta-strip h2{color:#fff}
.cta-strip p{margin-left:auto;margin-right:auto;max-width:56ch}
.cta-strip .btn-row{justify-content:center}
.cta-strip .btn--outline{border-color:#F6EDF3;color:#F6EDF3}
.cta-strip .btn--outline:hover{background:#F6EDF3;color:var(--navy)}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 14px;max-width:520px}
.field label{font-weight:600}
.field input,.field textarea{font:inherit;padding:.7em .9em;border:2px solid var(--line);border-radius:10px;background:var(--card)}
.field textarea{min-height:140px}

/* legal */
.legal .wrap{max-width:820px}
.notice{background:#FFF3D6;border:1px solid #F0D79A;border-radius:10px;padding:12px 16px;font-size:.92rem}

/* footer */
.site-footer{background:var(--navy-dark);color:#E9DDE6;padding:48px 0 20px;font-size:.95rem}
.site-footer a{color:#F6EDF3;text-decoration:none}
.site-footer a:hover{text-decoration:underline}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.footer-grid{grid-template-columns:1fr}}
.site-footer h2{color:#fff;font-size:1.05rem;font-family:var(--font-body);margin:0 0 .7em}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin:.35em 0}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:32px;padding-top:16px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;font-size:.85rem;color:#BFAEBB}
.cobrand{font-size:.85rem;color:#BFAEBB}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cta-strip h3{color:#fff}

/* app (/creer, /commande) */
.app-shell{max-width:640px;margin-top:8px}
.song-form,.song-wait,.song-result{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
.song-form .field{max-width:none}
.field select,.field input{font:inherit;padding:.7em .9em;border:2px solid var(--line);border-radius:10px;background:var(--card);width:100%}
fieldset.field{border:0;padding:0;margin:0 0 14px}
fieldset.field legend{font-weight:600;margin-bottom:6px}
fieldset.field input{margin-bottom:8px}
.field small{color:var(--ink-soft);font-size:.85rem}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.form-row{grid-template-columns:1fr}}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.92rem;margin:4px 0 16px}
.check input{margin-top:.3em;width:18px;height:18px;flex:0 0 auto}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{color:var(--brand-dark);font-weight:600;margin:.8em 0 0;min-height:1em}
.song-wait{text-align:center}
.song-wait__title,.song-result__title{font-family:var(--font-head);font-size:1.35rem;color:var(--navy);font-weight:700;margin:.2em 0 .4em}
.pulse{font-size:2.4rem;color:var(--brand);animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.18);opacity:1}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.lyrics{margin:14px 0;background:var(--bg-alt);border-radius:10px;padding:10px 14px}
.lyrics summary{cursor:pointer;font-weight:600}
.lyrics pre{white-space:pre-wrap;font-family:var(--font-body);font-size:.95rem;line-height:1.6;margin:.6em 0 0}
.buy-box{border-top:1px solid var(--line);margin-top:16px;padding-top:16px}
.buy-box .btn{width:100%}