/* Site de Feather : feuille de style commune à toutes les pages.
   Direction « Mouvement » : fond nuit, halos qui dérivent, verre dépoli,
   apparitions en fondu. Toutes les animations s'arrêtent si le système
   demande de réduire les animations. */

@font-face { font-family: "Bricolage Grotesque"; src: url(polices/bricolage.woff2) format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(polices/figtree.woff2) format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  /* Palette : trois couleurs du dégradé et le fond. Les autres teintes en
     découlent. Les palettes possibles sont plus bas ([data-palette]). */
  --c1: #ff7a59;
  --c2: #ff4d8d;
  --c3: #a77bff;
  --nuit: #0e0b16;
  --nuit-2: #17121f;
  --texte: #f5f3f8;
  --doux: color-mix(in srgb, var(--c3) 14%, #cdc8d6);
  --doux-2: color-mix(in srgb, var(--c3) 14%, #b6b1c0);
  --sourdine: color-mix(in srgb, var(--c3) 16%, #98949f);
  --trait: rgba(255, 255, 255, .1);
  --verre: rgba(255, 255, 255, .05);
  --corail: var(--c1);
  --rose: var(--c2);
  --violet: var(--c3);
  --menthe: #7fe3bb;
  --degrade: linear-gradient(100deg, var(--c1), var(--c2) 45%, var(--c3));
  --titre: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --corps: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --large: 1200px;
  color-scheme: dark;
}

:root[data-palette="rubis"]   { --c1: #ff9f43; --c2: #ff4757; --c3: #e8263f; --nuit: #120809; --nuit-2: #1e0f11; }
:root[data-palette="ocean"]   { --c1: #5ec8ff; --c2: #3b82f6; --c3: #6d6bff; --nuit: #080c18; --nuit-2: #10172a; }
:root[data-palette="foret"]   { --c1: #a3e635; --c2: #22c55e; --c3: #14b8a6; --nuit: #07110c; --nuit-2: #0e1b15; --menthe: #ffffff; }
:root[data-palette="boreale"] { --menthe: #ffffff; --c1: #5fd3a6; --c2: #38bdf8; --c3: #a78bfa; --nuit: #070d14; --nuit-2: #0e1621; }
:root[data-palette="soleil"]  { --c1: #ffd166; --c2: #ff9f1c; --c3: #ff5e5b; --nuit: #120c06; --nuit-2: #1e160d; }
:root[data-palette="glacier"] { --c1: #ffffff; --c2: #c7d2fe; --c3: #8b9bbd; --nuit: #0b0c10; --nuit-2: #15171e; }
:root[data-palette="sauge"]   { --c1: #e3eedb; --c2: #a9c9a4; --c3: #6f9a83; --nuit: #0b100e; --nuit-2: #141c18; --menthe: #ffffff; }
:root[data-palette="mousse"]  { --c1: #ece6c8; --c2: #93c47d; --c3: #3f8a57; --nuit: #09110c; --nuit-2: #111c15; --menthe: #ffffff; }
:root[data-palette="jade"]    { --c1: #8af0cb; --c2: #2bb88a; --c3: #1b8f86; --nuit: #06110f; --nuit-2: #0d1b18; --menthe: #ffffff; }
:root[data-palette="lichen"]  { --c1: #eef59a; --c2: #a6d86e; --c3: #4fae7a; --nuit: #0a1209; --nuit-2: #121c11; --menthe: #ffffff; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--nuit); color: var(--texte); font-family: var(--corps); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: color-mix(in srgb, var(--c1) 65%, #fff); }
a:hover { color: color-mix(in srgb, var(--c1) 35%, #fff); }
h1, h2, h3 { font-family: var(--titre); text-wrap: balance; line-height: 1.05; margin: 0; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--corail); outline-offset: 3px; border-radius: 6px; }
.cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.cadre { max-width: var(--large); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }

/* Fond : halos */
.fond { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.aurore { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; }
.au1 { width: 620px; height: 620px; left: -180px; top: -140px; background: var(--corail); animation: derive1 18s ease-in-out infinite alternate; }
.au2 { width: 560px; height: 560px; right: -160px; top: 60px; background: var(--c3); animation: derive2 22s ease-in-out infinite alternate; }
.au3 { width: 480px; height: 480px; left: 35%; top: 55vh; background: var(--rose); opacity: .28; animation: derive1 26s ease-in-out infinite alternate-reverse; }
.page-simple .au1, .page-simple .au2 { opacity: .32; }
.page-simple .au3 { display: none; }
@keyframes derive1 { to { transform: translate(120px, 80px) scale(1.15); } }
@keyframes derive2 { to { transform: translate(-140px, 60px) scale(.9); } }

/* En-tête */
.entete { position: sticky; top: 0; z-index: 10; padding-top: env(safe-area-inset-top, 0px); background: color-mix(in srgb, var(--nuit) 60%, transparent); backdrop-filter: blur(18px) saturate(1.3); -webkit-backdrop-filter: blur(18px) saturate(1.3); border-bottom: 1px solid rgba(255, 255, 255, .06); }
.entete .cadre { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 66px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texte); font: 800 21px var(--titre); }
.logo:hover { color: var(--texte); }
.menu { display: flex; gap: 6px; }
.menu a { color: var(--doux); text-decoration: none; font-weight: 500; padding: 8px 12px; border-radius: 10px; transition: background .2s, color .2s; }
.menu a:hover, .menu a[aria-current="page"] { color: var(--texte); background: rgba(255, 255, 255, .07); }
.entete-actions { display: flex; align-items: center; gap: 8px; }
.bouton-menu { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--trait); background: rgba(255, 255, 255, .05); color: var(--texte); cursor: pointer; }

@media (max-width: 860px) {
  .bouton-menu { display: inline-flex; }
  .menu { display: none; position: absolute; left: 12px; right: 12px; top: calc(100% + 8px); flex-direction: column; padding: 10px; border-radius: 18px; background: var(--nuit-2); border: 1px solid var(--trait); box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
  .menu.ouvert { display: flex; animation: monte .35s cubic-bezier(.2, .8, .2, 1) both; }
  .menu a { padding: 14px 16px; font-size: 18px; }
  .entete .btn-petit { padding: 0 16px; }
}

/* Boutons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, background .25s; cursor: pointer; border: 0; font-family: inherit; }
.btn:hover { transform: translateY(-2px); }
.btn-principal { background: linear-gradient(100deg, var(--c1), var(--c2)); color: var(--nuit); box-shadow: 0 10px 40px color-mix(in srgb, var(--c2) 35%, transparent); }
.btn-principal:hover { color: var(--nuit); box-shadow: 0 14px 50px color-mix(in srgb, var(--c2) 50%, transparent); }
.btn-second { background: rgba(255, 255, 255, .06); color: var(--texte); border: 1px solid rgba(255, 255, 255, .18); }
.btn-second:hover { color: var(--texte); background: rgba(255, 255, 255, .1); }
.btn-clair { background: var(--texte); color: var(--nuit); }
.btn-clair:hover { color: var(--nuit); }
.btn-petit { min-height: 42px; padding: 0 20px; }
.btn small { font-weight: 500; opacity: .75; }
.anneau { display: inline-flex; padding: 2px; border-radius: 999px; background: conic-gradient(from var(--angle), var(--c1), var(--c2), var(--c3), var(--c1)); animation: tourne 4s linear infinite; }
.anneau .btn { background: var(--nuit); color: var(--texte); }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes tourne { to { --angle: 360deg; } }

/* Animations communes */
.monte { animation: monte 1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes monte { from { opacity: 0; transform: translateY(28px); filter: blur(10px); } to { opacity: 1; transform: none; filter: none; } }
.d1 { animation-delay: .1s; } .d2 { animation-delay: .25s; } .d3 { animation-delay: .4s; } .d4 { animation-delay: .55s; } .d5 { animation-delay: .75s; } .d6 { animation-delay: 1s; }
@supports (animation-timeline: view()) {
  .vue { animation: apparait linear both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
}
@keyframes apparait { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* Accueil : en-tête de page */
.hero { padding-block: 72px 32px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.trace { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: trace 2.4s .2s ease-out forwards; }
@keyframes trace { to { stroke-dashoffset: 0; } }
.flotte { animation: flotte 7s ease-in-out infinite; }
@keyframes flotte { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(3deg); } }
.etiquette { padding: 7px 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); font-size: 14px; color: var(--doux); text-decoration: none; }
.etiquette:hover { color: var(--texte); }
.hero h1 { font-size: clamp(48px, 9vw, 112px); line-height: .95; letter-spacing: -.045em; font-weight: 800; }
.hero h1 span { display: block; }
.degrade { background: var(--degrade); -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .08em; }
.chapeau { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.55; color: var(--doux); max-width: 34em; }
.boutons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.note { font-size: 14px; color: var(--sourdine); }

/* La fenêtre de Feather dessinée */
.scene { perspective: 1600px; padding-block: 24px 56px; }
.fenetre { animation: redresse 1.6s .5s cubic-bezier(.2, .8, .2, 1) both; max-width: 1060px; margin: 0 auto; }
@keyframes redresse { from { opacity: 0; transform: rotateX(24deg) translateY(80px) scale(.94); } to { opacity: 1; transform: none; } }
.fenetre-corps { animation: flotte2 9s 2.2s ease-in-out infinite; border-radius: 24px; padding: 12px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); box-shadow: 0 40px 120px rgba(0, 0, 0, .55); }
@keyframes flotte2 { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.fen-haut { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.feux { display: flex; gap: 7px; padding: 0 6px; }
.feux span { width: 12px; height: 12px; border-radius: 50%; }
.adresse { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, .1); font-size: 14px; color: #e8e2f3; }
.adresse span:first-child { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.protege { padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--menthe) 16%, transparent); color: var(--menthe); font-size: 13px; font-weight: 600; white-space: nowrap; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--menthe) 45%, transparent); } 50% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--menthe) 0%, transparent); } }
.fen-bas { display: flex; gap: 10px; height: clamp(240px, 40vw, 400px); }
.fen-cote { flex: 0 0 170px; border-radius: 14px; background: rgba(255, 255, 255, .05); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.onglet { padding: 8px 10px; border-radius: 10px; font-size: 13px; color: var(--doux-2); animation: actif 8s infinite; }
.o2 { animation-delay: 2s; } .o3 { animation-delay: 4s; } .o4 { animation-delay: 6s; }
@keyframes actif { 0%, 22% { background: rgba(255, 255, 255, .14); color: #fff; } 26%, 100% { background: transparent; color: var(--doux-2); } }
.fen-page { flex: 1; min-width: 0; border-radius: 14px; background: #f7f5fb; padding: clamp(18px, 3vw, 32px); display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
.fen-page span { display: block; border-radius: 6px; }
@media (max-width: 720px) { .fen-cote, .feux { display: none; } }

/* Bandeaux qui défilent */
.bandeaux { padding-block: 16px 64px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.defile { display: flex; gap: 12px; width: max-content; animation: defile 40s linear infinite; }
.defile.inverse { animation-direction: reverse; animation-duration: 48s; }
.bandeaux:hover .defile { animation-play-state: paused; }
@keyframes defile { to { transform: translateX(-50%); } }
.puce { padding: 12px 20px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid var(--trait); white-space: nowrap; font-weight: 500; }

/* Sections */
.section { padding-block: 72px; }
.surtitre { font-size: 14px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.grand-titre { font-size: clamp(36px, 5vw, 60px); letter-spacing: -.03em; max-width: 14em; }
.titre-section { font-size: clamp(32px, 4.5vw, 54px); letter-spacing: -.03em; }
.texte-section { font-size: 18px; color: var(--doux); max-width: 36em; }
.duo { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.duo > * { flex: 1 1 380px; min-width: 0; }
.duo.inverse { flex-wrap: wrap-reverse; }
.pile { display: flex; flex-direction: column; gap: 16px; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.carte { padding: 30px; border-radius: 26px; background: var(--verre); border: 1px solid var(--trait); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transition: transform .35s ease, border-color .35s ease; }
.carte:hover { transform: translateY(-6px); border-color: rgba(255, 255, 255, .25); }
.carte h3 { font-size: 23px; }
.carte p { color: var(--doux-2); }
.chiffre { font: 800 54px/1 var(--titre); letter-spacing: -.02em; }
.icone { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; background: rgba(255, 255, 255, .07); }

/* Bouclier */
.ligne { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); animation: allume 6s infinite; }
.l2 { animation-delay: .8s; } .l3 { animation-delay: 1.6s; } .l4 { animation-delay: 2.4s; }
.ligne strong { color: var(--menthe); font-weight: 600; }
@keyframes allume { 0%, 8% { background: color-mix(in srgb, var(--menthe) 18%, transparent); } 30%, 100% { background: rgba(255, 255, 255, .05); } }
@property --n { syntax: "<integer>"; initial-value: 0; inherits: false; }
.compteur { --n: 58; counter-reset: n var(--n); animation: compte 3s 1s ease-out both; }
@supports (animation-timeline: view()) {
  .compteur { animation: compte linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
}
.compteur::after { content: counter(n); }
@keyframes compte { from { --n: 0; } to { --n: 58; } }

/* Barre qui bascule */
.bascule { position: relative; height: 280px; border-radius: 16px; background: linear-gradient(135deg, color-mix(in srgb, var(--c3) 18%, var(--nuit-2)), var(--nuit-2)); }
.mini-barre, .mini-page { position: absolute; border-radius: 9px; }
.mini-barre { background: rgba(255, 255, 255, .18); animation: barre 6s ease-in-out infinite; }
.mini-page { background: #fff; animation: page 6s ease-in-out infinite; }
@keyframes barre { 0%, 40%, 100% { left: 10px; top: 10px; width: calc(100% - 20px); height: 22px; } 50%, 90% { left: 10px; top: 10px; width: 28%; height: calc(100% - 20px); } }
@keyframes page { 0%, 40%, 100% { left: 10px; top: 42px; width: calc(100% - 20px); height: calc(100% - 52px); } 50%, 90% { left: calc(28% + 20px); top: 10px; width: calc(72% - 30px); height: calc(100% - 20px); } }

/* Appel final */
.final { padding-block: 110px 120px; text-align: center; }
.final .pile { align-items: center; max-width: 820px; margin: 0 auto; gap: 24px; }
.final h2 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -.04em; line-height: 1; }

/* Pages de texte (installation, aide, légal…) */
.tete-page { padding-block: 64px 24px; display: flex; flex-direction: column; gap: 16px; }
.tete-page h1 { font-size: clamp(40px, 7vw, 76px); letter-spacing: -.04em; }
.colonne > * { max-width: 780px; }
.prose { display: flex; flex-direction: column; gap: 18px; padding-block: 16px 80px; }
.prose h2 { font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.02em; margin-top: 28px; }
.prose h3 { font-size: 21px; margin-top: 8px; }
.prose p, .prose li { color: var(--doux); }
.prose strong { color: var(--texte); }
.prose ul, .prose ol { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 8px; }
.prose code, kbd { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: .9em; padding: 2px 7px; border-radius: 7px; background: rgba(255, 255, 255, .08); color: var(--texte); }
.encadre { padding: 22px 24px; border-radius: 20px; background: var(--verre); border: 1px solid var(--trait); }
.encadre.attention { border-color: color-mix(in srgb, var(--c1) 35%, transparent); background: color-mix(in srgb, var(--c1) 7%, transparent); }
.a-remplir { color: #ffd38a; background: rgba(255, 211, 138, .1); border: 1px dashed rgba(255, 211, 138, .5); border-radius: 6px; padding: 1px 6px; font-style: normal; }
.etapes { counter-reset: e; list-style: none; padding: 0 !important; }
.etapes li { counter-increment: e; position: relative; padding-left: 52px; min-height: 36px; }
.etapes li::before { content: counter(e); position: absolute; left: 0; top: -2px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .08); color: var(--texte); font-weight: 700; }
.choix-os { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.choix-os .carte { display: flex; flex-direction: column; gap: 14px; }
.tableau { overflow-x: auto; }
.tableau table { width: 100%; border-collapse: collapse; font-size: 16px; }
.tableau th, .tableau td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--trait); vertical-align: top; }
.tableau th { color: var(--texte); font-weight: 600; }
.tableau td { color: var(--doux); }
details.question { padding: 20px 22px; border-radius: 18px; background: var(--verre); border: 1px solid var(--trait); }
details.question summary { cursor: pointer; font-weight: 700; font-size: 18px; color: var(--texte); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
details.question summary::-webkit-details-marker { display: none; }
details.question summary::after { content: "+"; font-size: 24px; line-height: 1; color: var(--sourdine); transition: transform .25s; }
details.question[open] summary::after { transform: rotate(45deg); }
details.question p { margin-top: 12px; }

/* Nouveautés */
.version { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 24px; padding-block: 28px; border-top: 1px solid var(--trait); }
.version h2 { font-size: 30px; margin: 0; }
.version time { color: var(--sourdine); font-size: 15px; }
.version .resume { color: var(--texte); font-size: 18px; }
.version h3 { font-size: 15px; text-transform: uppercase; letter-spacing: .08em; color: var(--sourdine); margin-top: 18px; font-family: var(--corps); }
@media (max-width: 640px) { .version { grid-template-columns: 1fr; gap: 8px; } }

/* Pied de page */
.pied { border-top: 1px solid rgba(255, 255, 255, .08); padding-block: 48px calc(40px + env(safe-area-inset-bottom, 0px)); color: var(--sourdine); font-size: 15px; }
.pied-grille { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }
.pied h2 { font: 700 14px var(--corps); text-transform: uppercase; letter-spacing: .08em; color: var(--doux); margin-bottom: 12px; }
.pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pied a { color: var(--sourdine); text-decoration: none; }
.pied a:hover { color: var(--texte); }
.pied-bas { margin-top: 40px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 13px; }
@media (max-width: 760px) { .pied-grille { grid-template-columns: 1fr 1fr; } .pied-grille > :first-child { grid-column: 1 / -1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .trace { stroke-dashoffset: 0; }
  .compteur { --n: 58; }
}