:root { --acc:#ff4458; --acc-fonce:#86101f; --acc-rgb:255,68,88; }

@font-face { font-family:"Titre"; src:url("fonts/Michroma-Regular.ttf") format("truetype"); font-weight:100 900; font-display:swap; }

:root { --bg:#0d0607; --carte:rgba(16,22,28,.66); --ligne:rgba(255,255,255,.09); --texte:#e9eef1; --gris:#9fabb3; --code:rgba(0,0,0,.45); }
* { box-sizing:border-box; }
html[data-lang="en"] .fr, html[data-lang="fr"] .en { display:none !important; }
html { scroll-behavior:smooth; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; color:var(--texte); font:16px/1.65 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  background:radial-gradient(ellipse at 85% 0%, rgba(var(--acc-rgb),.12), transparent 50%), var(--bg); background-attachment:fixed; }
a { color:var(--acc); text-decoration-color:rgba(var(--acc-rgb),.4); text-underline-offset:3px; }
a:hover { text-decoration-color:var(--acc); }
::selection { background:rgba(var(--acc-rgb),.35); }

.mot { display:inline-block; transform:skewX(-12deg); font-family:"Titre","Eurostile Extended","Arial Black",sans-serif; text-transform:uppercase; letter-spacing:.06em;
  -webkit-text-stroke:.07em #eef4f8; paint-order:stroke fill; color:transparent;
  background:linear-gradient(180deg,#c3d3dc 0%,#4f6b7a 30%,#0b1820 50%,#1f3a48 70%,#7c9cad 100%); -webkit-background-clip:text; background-clip:text;
  filter:drop-shadow(0 0 1px #5d6d78) drop-shadow(0 4px 12px rgba(0,0,0,.75)); }
.mot .o { display:inline-block; transform:scaleY(.96); background:inherit; -webkit-background-clip:text; background-clip:text; }
.mot .acc { background:linear-gradient(180deg,#ffecee 0%,var(--acc) 30%,#2e0409 50%,var(--acc-fonce) 70%,#ffb4bd 100%); -webkit-background-clip:text; background-clip:text; }

nav { position:sticky; top:0; z-index:10; display:flex; align-items:center; gap:1.3rem; padding:.6rem 1.5rem;
  background:rgba(13,6,7,.7); backdrop-filter:blur(10px); border-bottom:1px solid var(--ligne); }
nav a { position:relative; color:var(--gris); text-decoration:none; font-size:.95rem; transition:color .2s; }
nav a:not(.marque):not(.retour)::after { content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--acc); transform:scaleX(0); transition:transform .25s; }
nav a:hover, nav a.actif { color:var(--texte); }
nav a:hover::after, nav a.actif::after { transform:scaleX(1); }
.retour { display:flex; align-items:center; opacity:.75; transition:opacity .2s; }
.retour img { transition:transform .6s cubic-bezier(.3,1.6,.5,1); }
.retour:hover { opacity:1; }
.retour:hover img { transform:rotate(216deg) scale(1.1); }
.marque { margin-right:auto; }
.marque .mot { font-size:1.1rem; }
nav .telecharger { color:#1e0306; background:var(--acc); padding:.3rem .95rem; border-radius:999px; font-weight:600; }
nav .telecharger:hover { color:#1e0306; filter:brightness(1.1); }
#langue { background:none; border:1px solid var(--ligne); color:var(--texte); border-radius:20px; padding:.2rem .7rem; cursor:pointer; font:inherit; font-size:.85rem; }
#langue:hover { border-color:var(--acc); }

.hero { position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
  min-height:min(72vh,640px); padding:3rem max(1.5rem,6vw); }
.hero::before { content:""; position:absolute; inset:0; z-index:-3;
  background:radial-gradient(ellipse at 78% 45%, rgba(var(--acc-rgb),.16), transparent 60%), var(--bg); }
.hero::after { content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg, var(--bg) 0%, rgba(13,6,7,.7) 30%, transparent 60%), linear-gradient(to bottom, transparent 60%, var(--bg)); }
.hero h1 { font-size:clamp(2.2rem,7vw,4.6rem); line-height:1.1; margin:0 0 .5rem; }
.hero p { color:#cdd6db; font-size:1.15rem; max-width:520px; margin:0 0 1.8rem; text-shadow:0 1px 10px rgba(0,0,0,.8); }
.hero .note { margin:.8rem 0 0; font-size:.9rem; }

.btn { position:relative; overflow:hidden; display:inline-block; color:#1e0306; text-decoration:none; font-weight:700; padding:.8rem 1.7rem; border-radius:999px; margin:.25rem .4rem .25rem 0;
  background:linear-gradient(135deg,#ffb4bd,var(--acc) 45%,var(--acc-fonce)); transition:transform .2s, filter .2s; }
.btn::after { content:""; position:absolute; inset:0; background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%); transform:translateX(-120%); transition:transform .7s; }
.btn:hover { transform:translateY(-2px); filter:brightness(1.08); }
.btn:hover::after { transform:translateX(120%); }
.btn.alt { color:var(--texte); background:rgba(255,255,255,.04); border:1px solid rgba(var(--acc-rgb),.45); backdrop-filter:blur(6px); }
.btn.alt:hover { background:rgba(var(--acc-rgb),.1); filter:none; }

.tuiles { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:1rem; width:100%; max-width:1080px; margin:0 auto; padding:0 1.25rem 4rem; }
.tuile, section { position:relative; background:var(--carte); border:1px solid var(--ligne); border-radius:14px; backdrop-filter:blur(10px);
  transition:transform .25s, border-color .25s; }
.tuile { padding:1.25rem 1.2rem; border-top:2px solid rgba(var(--acc-rgb),.5); }
.tuile:hover { transform:translateY(-3px); border-color:rgba(var(--acc-rgb),.4); }
.tuile b { display:block; font-family:"Titre",sans-serif; font-size:.95rem; letter-spacing:.04em; margin-bottom:.45rem; color:var(--texte); }
.tuile p { margin:0; color:var(--gris); font-size:.93rem; }

.bandeau { position:relative; overflow:hidden; isolation:isolate; padding:3.2rem 1.25rem 2.6rem; text-align:center; }
.bandeau::before { content:""; position:absolute; inset:0; z-index:-2;
  background:radial-gradient(ellipse at 50% 0%, rgba(var(--acc-rgb),.22), transparent 65%); }
.bandeau::after { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(to bottom, transparent 40%, var(--bg)); }
.bandeau h1 { font-family:"Titre",sans-serif; font-weight:400; font-size:clamp(1.8rem,5vw,2.8rem); letter-spacing:.08em; text-transform:uppercase; margin:0; }
.bandeau p { color:#cdd6db; margin:.5rem auto 0; max-width:620px; }
main { flex:1; width:100%; max-width:880px; margin:0 auto; padding:1rem 1.25rem 6rem; }
section { padding:1.4rem 1.6rem; margin:1.25rem 0; }
h2 { margin-top:0; font-family:"Titre",sans-serif; font-weight:400; font-size:1.2rem; letter-spacing:.05em; color:var(--acc); }
h3 { margin:1.2rem 0 .25rem; font-size:1.05rem; }
code { background:var(--code); border:1px solid var(--ligne); padding:.05rem .35rem; border-radius:5px; font-size:.9em; }
pre { background:var(--code); border:1px solid var(--ligne); border-left:3px solid var(--acc); padding:.8rem 1rem; border-radius:8px; overflow-x:auto; }
pre code { border:0; padding:0; background:none; }
ul, ol { padding-left:1.3rem; }
li { margin:.25rem 0; }
li::marker { color:var(--acc); }
.note { color:var(--gris); font-size:.93rem; }
.etat { display:inline-block; font-family:system-ui,sans-serif; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:.12rem .6rem; border-radius:20px; margin-left:.5rem; vertical-align:middle; }
.etat.etude { background:rgba(var(--acc-rgb),.15); color:var(--acc); }
.etat.idee { background:rgba(255,255,255,.08); color:var(--gris); }

footer { text-align:center; color:var(--gris); font-size:.85rem; padding:2rem 1rem; border-top:1px solid var(--ligne); background:rgba(13,6,7,.8); }

@media (max-width:700px) {
  nav { gap:.8rem; padding:.6rem 1rem; }
  .marque .mot { font-size:.95rem; }
  .hero { align-items:center; text-align:center; }
  .hero::after { background:linear-gradient(rgba(13,6,7,.55), rgba(13,6,7,.8)), linear-gradient(to bottom, transparent 60%, var(--bg)); }
}
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { transition:none !important; } }

.decor { position:absolute; inset:0; z-index:-2; overflow:hidden; transform:translate(var(--px,0),var(--py,0)); transition:transform .4s ease-out;
  -webkit-mask:linear-gradient(90deg, transparent 22%, #000 62%); mask:linear-gradient(90deg, transparent 22%, #000 62%); }
.decor svg { position:absolute; right:2%; top:50%; width:min(58vw,640px); transform:translateY(-50%); overflow:visible; }
.decor .coeur { fill:url(#lueur); animation:coeur 3.2s ease-in-out infinite; transform-origin:200px 200px; }
.decor .onde { fill:none; stroke:rgba(var(--acc-rgb),.55); stroke-width:1.2; transform-origin:200px 200px; animation:onde 3.2s ease-out infinite; }
.decor .onde.b { animation-delay:-1.6s; }
.decor .eclat polygon { transform-box:fill-box; transform-origin:left center; fill:rgba(var(--acc-rgb),.75); filter:drop-shadow(0 0 6px rgba(var(--acc-rgb),.8));
  animation:eclat var(--d) cubic-bezier(.2,.7,.3,1) var(--r) infinite; }
@keyframes coeur { 50% { transform:scale(1.15); opacity:.8; } }
@keyframes onde { 0% { transform:scale(.25); opacity:0; } 15% { opacity:.8; } 100% { transform:scale(1.6); opacity:0; } }
@keyframes eclat { 0% { transform:translateX(18px) scaleX(.4); opacity:0; } 12% { opacity:1; } 100% { transform:translateX(150px) scaleX(1); opacity:0; } }
.btn.off { color:var(--gris); background:rgba(255,255,255,.05); border:1px solid var(--ligne); cursor:default; }
.btn.off::after { display:none; }
.btn.off:hover { transform:none; filter:none; }
.hero > .etat { margin:-.2rem 0 1.2rem; }
@media (max-width:700px) { .decor { opacity:.45; } }
@media (prefers-reduced-motion:reduce) { .decor * { animation:none !important; } }