:root{--night:#061b16;--pine:#10382e;--pine-deep:#09251f;--wine:#4a172d;--wine-deep:#2a101b;--gold:#d4b76c;--ivory:#f7edd2;--muted:#c6c2ae;--line:rgba(214,184,107,.36);--sans:"Montserrat",sans-serif;--serif:"Italiana",serif;--view:100dvh}*{box-sizing:border-box}html{min-height:100%;background:var(--night)}body{min-width:0;margin:0;min-height:var(--view);overflow-x:hidden;color:var(--ivory);font-family:var(--sans);background:radial-gradient(circle at 48% 28%,#315f4d 0,transparent 35%),linear-gradient(140deg,#103a30 0%,#08221c 54%,#1f1120 100%)}button{font:inherit}button:focus-visible{outline:2px solid #ffe8a0;outline-offset:3px}.app-shell{min-height:var(--view);display:grid;grid-template-columns:minmax(0,1fr) clamp(78px,7vw,118px);position:relative;overflow:hidden}.scene{min-width:0;min-height:var(--view);position:relative}.scene:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 0 48%,rgba(242,222,164,.07) 48% 48.1%,transparent 48.1%),repeating-linear-gradient(90deg,rgba(245,225,166,.045) 0 1px,transparent 1px 12.5%)}.title-lockup{position:absolute;z-index:2;top:clamp(24px,5vh,58px);left:clamp(24px,5vw,80px);display:grid;gap:8px}.title-lockup span{font-size:clamp(8px,.8vw,11px);letter-spacing:.28em;color:var(--gold)}.title-lockup h1{margin:0;font:400 clamp(44px,5vw,78px)/.9 var(--serif);letter-spacing:-.03em}.hero{min-height:var(--view);display:grid;place-items:center;padding:110px clamp(30px,10vw,150px) 48px}.hero-card{width:min(900px,100%);min-height:min(72dvh,760px);position:relative;display:grid;align-content:center;justify-items:start;padding:clamp(34px,6vw,80px);overflow:hidden;border:1px solid var(--line);border-radius:26px;background:linear-gradient(145deg,rgba(19,56,46,.92),rgba(9,25,21,.93));box-shadow:inset 0 1px rgba(255,247,205,.11),0 40px 90px rgba(0,0,0,.32)}.hero-card:before{content:"";position:absolute;inset:20px;border:1px solid rgba(215,184,105,.19);border-radius:18px}.hero-copy{position:relative;z-index:2;max-width:490px}.eyebrow{margin:0 0 18px;font-size:10px;font-weight:600;letter-spacing:.25em;color:var(--gold)}.hero-copy h2{margin:0;font:400 clamp(44px,6vw,88px)/.92 var(--serif);letter-spacing:-.04em}.hero-copy p{max-width:360px;margin:22px 0 0;color:var(--muted);font-size:clamp(12px,1.1vw,15px);line-height:1.7}.hero-portrait{position:absolute;z-index:1;right:6%;bottom:0;width:min(44%,410px);max-height:88%;object-fit:contain;object-position:bottom;filter:drop-shadow(0 24px 28px rgba(0,0,0,.45))}.hero-halo{position:absolute;right:10%;top:18%;width:min(36vw,400px);aspect-ratio:1;border:1px solid rgba(212,183,108,.32);border-radius:50%;background:radial-gradient(circle,rgba(130,46,75,.34),rgba(19,55,46,.13) 58%,transparent 69%)}.course-rail{position:relative;z-index:5;min-height:var(--view);display:grid;place-items:center;border-left:1px solid var(--line);background:linear-gradient(180deg,rgba(70,46,59,.88),rgba(54,39,50,.94));backdrop-filter:blur(10px)}.course-button{width:clamp(52px,4.8vw,70px);height:clamp(52px,4.8vw,70px);display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;background:radial-gradient(circle at 33% 28%,#735e37,#17342c 58%,#081814);box-shadow:inset 0 0 0 4px #0a1c17,0 10px 25px rgba(0,0,0,.3);color:#ffdf83;cursor:pointer}.course-button svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}.course-button span{position:absolute;top:calc(50% + 47px);font-size:8px;font-weight:600;letter-spacing:.16em;white-space:nowrap;color:#f0d88a}.course-picker{position:fixed;z-index:20;inset:0;display:grid;place-items:center;padding:clamp(20px,4vw,58px);background:rgba(8,16,17,.83);backdrop-filter:blur(18px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .2s ease}.course-picker.open{opacity:1;visibility:visible;pointer-events:auto}.picker-panel{width:min(1120px,100%);max-height:calc(var(--view) - 40px);overflow:auto;padding:34px;border:1px solid rgba(230,199,113,.55);border-radius:26px;background:linear-gradient(145deg,rgba(52,35,48,.94),rgba(20,32,29,.96));box-shadow:0 35px 100px rgba(0,0,0,.55)}.picker-title{margin:0 0 28px;text-align:center;color:#e6c66b;font-size:11px;letter-spacing:.3em}.collection-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.collection-tile{min-height:144px;padding:18px 12px;border:1px solid rgba(212,183,108,.64);border-radius:50%;background:radial-gradient(circle at 30% 22%,rgba(255,245,190,.34),transparent 18%),linear-gradient(145deg,#25483b,#071b16 68%);box-shadow:inset 0 0 0 5px #071b16,0 0 22px rgba(212,183,108,.17);color:var(--ivory);cursor:pointer;display:grid;place-content:center;gap:6px;text-align:center}.collection-tile b{font:400 clamp(24px,3vw,42px) var(--serif);color:#f0cf73}.collection-tile small{font-size:8px;line-height:1.2;color:#f6ecd0}.course-shell{min-height:var(--view);display:grid;place-items:center;padding:clamp(86px,10vh,110px) clamp(18px,5vw,70px) clamp(24px,4vh,48px)}.course-frame{width:min(1120px,100%);height:min(78dvh,830px);min-height:520px;display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,24%,270px);position:relative;overflow:hidden;border:1px solid rgba(229,194,103,.66);border-radius:24px;background:linear-gradient(145deg,rgba(88,28,54,.96),rgba(36,18,29,.98));box-shadow:inset 0 1px rgba(255,248,202,.17),inset 0 0 90px rgba(0,0,0,.25),0 35px 90px rgba(0,0,0,.45)}.course-frame:before{content:"";position:absolute;inset:20px;border:1px solid rgba(233,198,108,.19);border-radius:16px;pointer-events:none}.course-content{position:relative;z-index:2;min-width:0;min-height:0;padding:clamp(30px,4vw,56px);display:flex;flex-direction:column}.course-head{flex:none;display:flex;align-items:end;justify-content:space-between;gap:20px;padding:0 0 22px;border-bottom:1px solid rgba(229,194,103,.28)}.course-head p{margin:0 0 8px;font-size:9px;font-weight:600;letter-spacing:.22em;color:#d8b968}.course-head h2{margin:0;font:400 clamp(34px,4vw,58px)/.92 var(--serif)}.topic-count{font-size:10px;letter-spacing:.12em;color:#d7ceb3;white-space:nowrap}.topic-list{min-height:0;overflow:auto;margin-top:20px;padding-right:9px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;gap:12px}.topic-card{min-height:104px;padding:16px 18px;border:1px solid rgba(230,196,107,.35);border-radius:12px;background:linear-gradient(145deg,rgba(20,58,47,.68),rgba(18,23,26,.68));color:var(--ivory);text-align:left;cursor:pointer}.topic-card:hover{border-color:#f4d77d;background:linear-gradient(145deg,rgba(35,84,67,.84),rgba(45,24,35,.82))}.topic-card b{display:block;max-width:78%;font:400 clamp(22px,2.6vw,34px)/.95 var(--serif);overflow-wrap:anywhere}.topic-card span{display:block;margin-top:9px;color:#dfc87c;font:400 13px/1.25 var(--serif)}.topic-card small{display:block;margin-top:7px;color:#c7c0a9;font-size:9px;line-height:1.45}.guide-panel{position:relative;z-index:2;border-left:1px solid rgba(229,194,103,.28);background:radial-gradient(circle at 50% 20%,rgba(228,194,112,.14),transparent 28%),linear-gradient(180deg,rgba(18,61,49,.45),rgba(17,13,20,.32));overflow:hidden}.guide-panel img{position:absolute;right:50%;top:42px;width:min(105%,290px);max-height:calc(100% - 42px);transform:translateX(50%);object-fit:contain;object-position:top;filter:drop-shadow(0 20px 25px rgba(0,0,0,.42));pointer-events:none}.guide-panel:after{content:"ÉCOUTEZ · RÉPÉTEZ";position:absolute;left:50%;bottom:30px;transform:translateX(-50%);font-size:7px;letter-spacing:.19em;color:#e8cc79;white-space:nowrap}.topic-list::-webkit-scrollbar,.picker-panel::-webkit-scrollbar{width:8px}.topic-list::-webkit-scrollbar-thumb,.picker-panel::-webkit-scrollbar-thumb{border-radius:99px;background:rgba(218,187,105,.42)}
@media(max-width:780px){:root{--view:100svh}.app-shell{display:block;min-height:var(--view);overflow:visible}.scene{min-height:var(--view)}.hero{min-height:var(--view);padding:70px 18px 20px}.title-lockup{top:20px;left:23px}.title-lockup h1{font-size:42px}.hero-card{min-height:calc(var(--view) - 90px);padding:34px 26px;align-content:start}.hero-copy{max-width:60%;padding-top:70px}.hero-copy h2{font-size:47px}.hero-copy p{font-size:11px}.hero-portrait{right:-3%;width:64%;max-height:72%}.hero-halo{right:-8%;top:32%;width:68vw}.course-rail{position:fixed;z-index:15;right:max(8px,env(safe-area-inset-right));bottom:calc(18px + env(safe-area-inset-bottom));min-height:0;width:54px;height:54px;border:0;border-radius:50%;background:transparent}.course-button{width:54px;height:54px}.course-button span{display:none}.course-picker{align-items:start;padding:70px 15px 22px}.picker-panel{max-height:calc(var(--view) - 92px);padding:22px 15px;border-radius:20px}.picker-title{margin-bottom:18px;font-size:9px}.collection-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.collection-tile{min-height:auto;aspect-ratio:1;padding:13px}.collection-tile b{font-size:36px}.collection-tile small{font-size:9px}.course-shell{min-height:var(--view);padding:67px 12px 14px}.course-frame{width:100%;height:calc(var(--view) - 81px);min-height:0;display:block;border-radius:18px}.course-content{height:100%;padding:27px 18px 18px}.course-head{padding-right:105px;padding-bottom:17px}.course-head h2{font-size:39px}.topic-count{display:none}.topic-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:14px;padding-right:5px;padding-bottom:8px}.topic-card{min-height:110px;padding:14px 12px}.topic-card b{max-width:100%;font-size:25px}.topic-card span{margin-top:7px;font-size:12px}.topic-card small{font-size:8px}.guide-panel{position:absolute;top:19px;right:9px;width:100px;height:128px;border:0;background:none;pointer-events:none}.guide-panel img{top:0;width:112px;max-height:128px}.guide-panel:after{display:none}}
@media(max-width:360px){.topic-list{grid-template-columns:1fr}.topic-card{min-height:92px}.hero-copy h2{font-size:40px}.hero-copy{max-width:64%}}
@media(min-width:781px) and (max-height:760px){.course-frame{height:calc(var(--view) - 70px);min-height:470px}.course-shell{padding-top:45px;padding-bottom:25px}.course-content{padding-top:28px}.topic-card{min-height:90px}.topic-card small{font-size:8px}}

/* Numbers keep the requested Arabic numeral, French word, and IPA on one card. */
.number-card b em{color:#e8c86f;font:400 14px/1 var(--sans);font-style:normal;letter-spacing:.04em;margin-right:12px}.number-card b strong{font:inherit;font-weight:400}

/* Keep the desktop title clear of the course frame at every supported width. */
.collection-tile{width:100%;height:auto;min-height:0;aspect-ratio:1 / 1;align-self:start}
.home-view .title-lockup h1{font:400 clamp(32px,3vw,48px)/1.1 var(--serif);color:var(--ivory);letter-spacing:0}
.home-view .hero-copy h2{font-size:clamp(16px,1.8vw,24px);line-height:1.4;letter-spacing:.015em;white-space:nowrap;color:var(--ivory)}
.home-view .hero-copy .eyebrow{font:500 9px/1.6 var(--sans);letter-spacing:.22em;color:var(--gold)}
@media(min-width:781px){
  .collection-tile{width:55%;justify-self:center;padding:12px 8px}
  .title-lockup{top:clamp(24px,3.2vh,48px)}
  .title-lockup h1{font-size:clamp(44px,4vw,76px);line-height:.94}
  .course-shell{padding-top:clamp(154px,15vh,182px)}
}