/* Les vingt propositions de design (src/designs.php), toutes tirées des couleurs du logo :
   bleu de l'arche #8ea1bf, pêche #f0cab2, crème #f0d7c3, rose du maillot #bd7d7a, terre cuite #9f5833,
   brun #5c3621, sauge #a8aea1, gris perle #d7d8d4, charbon #3f3f41.
   Un design = un bloc body[data-design] qui pose les variables d'app.css. La mise en page du haut de l'accueil
   est une des cinq « formes » (body[data-forme]) : centre, cote, affiche, arche, rayures. */

/* ============ Formes ============ */

/* centre : tout au milieu, des galets et une dune au pied, comme dans le dessin */
body[data-forme="centre"] .v-hero { max-width: none; overflow: hidden; }
body[data-forme="centre"] .v-decor i { display: block; bottom: 0; }
body[data-forme="centre"] .v-decor i:nth-child(1) { left: -4rem; width: 21rem; height: 13rem; background: var(--forme2); border-radius: 55% 45% 0 0 / 100% 100% 0 0; }
body[data-forme="centre"] .v-decor i:nth-child(2) { right: -3rem; width: 17rem; height: 9rem; background: var(--forme3); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
body[data-forme="centre"] .v-decor i:nth-child(3) { right: 11rem; bottom: -2.5rem; width: 7rem; height: 7rem; background: var(--bouee); border-radius: 50%; }

/* cote : les baigneurs dans une niche à gauche, le texte à droite */
body[data-forme="cote"] .v-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 3.5rem; align-items: center; justify-items: start; text-align: left; padding-top: 2rem; }
body[data-forme="cote"] .v-embleme { justify-self: center; padding: 3rem 2rem 0; background: var(--forme2); border-radius: 62rem 62rem 0 0; }
body[data-forme="cote"] .v-embleme img { width: min(22rem, 60vw); }
body[data-forme="cote"] .v-mot { justify-items: start; }
body[data-forme="cote"] .v-hero .v-boutons { justify-content: flex-start; }

/* affiche : un titre géant dans un double filet, les baigneurs au coin */
body[data-forme="affiche"] .v-hero { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2rem; align-items: end; justify-items: start; text-align: left; margin: 0.5rem auto 0; padding: 3rem clamp(1.6rem, 5vw, 4rem) 3.5rem; }
body[data-forme="affiche"] .v-hero::before { content: ""; position: absolute; inset: 0 clamp(0.6rem, 2vw, 1.6rem) 1.4rem; border: 1px solid var(--lettre); outline: 1px solid var(--lettre); outline-offset: -0.45rem; pointer-events: none; }
body[data-forme="affiche"] .v-embleme { order: 2; justify-self: end; }
body[data-forme="affiche"] .v-embleme img { width: min(20rem, 55vw); }
body[data-forme="affiche"] .v-mot { justify-items: start; }
body[data-forme="affiche"] .v-nom { width: min(21rem, 100%); }
body[data-forme="affiche"] .v-hero h1 { font-size: clamp(2.8rem, 8.2vw, 6.6rem); line-height: 0.95; max-width: 11ch; margin-top: 1.6rem; }
body[data-forme="affiche"] .v-hero .v-boutons { justify-content: flex-start; }

/* arche : le texte dans une grande arche, comme celle du logo, les baigneurs posés dessus */
body[data-forme="arche"] .v-hero { gap: 0; }
body[data-forme="arche"] .v-embleme { z-index: 2; }
body[data-forme="arche"] .v-embleme img { width: min(15rem, 50vw); }
body[data-forme="arche"] .v-mot { width: min(44rem, 100%); margin-top: -4.5rem; padding: 7rem clamp(1.4rem, 5vw, 4rem) 3.5rem; background: var(--forme1); color: var(--sur-forme1); border-radius: 22rem 22rem 0.8rem 0.8rem; }
body[data-forme="arche"] .v-mot .nom-logo { background: var(--sur-forme1); }
body[data-forme="arche"] .v-mot .v-accroche { color: inherit; opacity: 0.86; }
body[data-forme="arche"] .v-mot .bouton:not(.plein) { color: inherit; }

/* rayures : les baigneurs sur les rayures du maillot */
body[data-forme="rayures"] .v-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 3rem; align-items: stretch; justify-items: start; text-align: left; padding-top: 1.5rem; }
body[data-forme="rayures"] .v-embleme { order: 2; justify-self: stretch; display: grid; place-items: center; padding: 2.5rem 1rem; background: repeating-linear-gradient(90deg, var(--forme1) 0 2.4rem, var(--forme3) 2.4rem 4.8rem); border-radius: var(--rayon); }
body[data-forme="rayures"] .v-embleme img { width: min(18rem, 58vw); padding: 1.2rem; background: var(--fond); border-radius: 50%; }
body[data-forme="rayures"] .v-mot { justify-items: start; align-content: center; }
body[data-forme="rayures"] .v-hero .v-boutons { justify-content: flex-start; }

@media (max-width: 52em) {
	body[data-forme] .v-hero { grid-template-columns: 1fr; gap: 1.6rem; }
	body[data-forme="cote"] .v-embleme, body[data-forme="affiche"] .v-embleme { justify-self: center; order: 0; }
	body[data-forme="rayures"] .v-embleme { order: 0; }
	body[data-forme="arche"] .v-hero { gap: 0; }
	body[data-forme="arche"] .v-mot { border-radius: 12rem 12rem 0.8rem 0.8rem; }
	body[data-forme="centre"] .v-decor i { transform: scale(0.6); transform-origin: bottom; }
}

/* ============ Designs ============ */

/* 1. Cabine de plage : crème, brun, terre cuite. C'est le design d'office (valeurs de :root dans app.css). */
body[data-design="cabine"] .v-lettrine::first-letter, body[data-design="journal"] .v-lettrine::first-letter, body[data-design="nouveau"] .v-lettrine::first-letter {
	float: left; padding: 0.08em 0.12em 0 0; font: var(--t-graisse) 3.7em/0.78 var(--titre); color: var(--bouee);
}

/* 2. Bleu de l'arche */
body[data-design="arche"] {
	--fond: #8ea1bf; --fond2: #7f90a8; --lettre: #17202f; --lettre-doux: #24304a; --nom: #f8efe6;
	--forme1: #f0d7c3; --sur-forme1: #2c3a52; --forme2: #7f90a8; --forme3: #f0cab2;
	--bouee: #9f5833; --sur-accent: #fff; --nuit: #2c3a52; --sarcelle: #4a5f82; --sable: #f4f1ec; --ecume: #e3e8f0; --encre: #1b2434; --gris: #55647d;
	--barre-fond: #2c3a52; --sur-barre: #f0d7c3;
	--titre: "Marcellus", Georgia, serif; --t-graisse: 400; --t-espace: 0; --rayon-b: 0.4rem; --rayon: 0.6rem;
}

/* 3. Nuit d'été */
body[data-design="nuit"] {
	--fond: #1f1d1e; --fond2: #2b2829; --lettre: #f0d7c3; --lettre-doux: #c2ae9e; --nom: #f0cab2;
	--forme1: #3f3f41; --forme2: #2e2b2c; --forme3: #3f3f41;
	--bouee: #bd7d7a; --sur-accent: #1f1d1e; --nuit: #1f1d1e; --sarcelle: #8a4f4c; --sable: #f6efe9; --ecume: #efe1d6; --encre: #1f1d1e; --gris: #625e5d;
	--barre-fond: #1f1d1e; --sur-barre: #f0cab2; --carton: #f0d7c3;
	--titre: "Playfair", Georgia, serif; --t-graisse: 700; --t-espace: -0.015em;
}

/* 4. Maillot rayé */
body[data-design="maillot"] {
	--fond: #f8efe6; --fond2: #f0cab2; --lettre: #4a2c2a; --lettre-doux: #7a5a55; --nom: #bd7d7a;
	--forme1: #bd7d7a; --forme3: #f0cab2;
	--bouee: #bd7d7a; --sur-accent: #2a1614; --nuit: #4a2c2a; --sarcelle: #8a4f4c; --ecume: #f6e1d8; --encre: #2a1614; --gris: #7a5a55;
	--barre-fond: #bd7d7a; --sur-barre: #2a1614;
	--titre: "DM Serif", Georgia, serif; --t-graisse: 400; --t-espace: 0; --rayon-b: 0.5rem; --rayon: 0.7rem;
}

/* 5. Affiche de 1925 */
body[data-design="affiche"] {
	--fond: #f0cab2; --fond2: #f0d7c3; --lettre: #3b2a22; --lettre-doux: #5c3621; --nom: #3b2a22;
	--forme1: #8ea1bf;
	--bouee: #4a5f82; --sur-accent: #fff; --nuit: #3b2a22; --sarcelle: #4a5f82; --encre: #2a1f1a;
	--barre-fond: #3b2a22; --sur-barre: #f0cab2; --carton: #f8efe6;
	--titre: "Poiret", "Josefin", system-ui, sans-serif; --t-graisse: 400; --t-casse: uppercase; --t-espace: 0.05em; --rayon-b: 0; --rayon: 0;
}
body[data-design="affiche"] .vitrine .bouton, body[data-design="affiche"] .barre .bouton { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.88rem; }

/* 6. Galet */
body[data-design="galet"] {
	--fond: #e6e6e2; --fond2: #d7d8d4; --lettre: #3f3f41; --lettre-doux: #625e5d; --nom: #3f3f41;
	--forme1: #8ea1bf; --forme2: #a8aea1; --forme3: #c2ae9e;
	--bouee: #9f5833; --sur-accent: #fff; --nuit: #3f3f41; --sarcelle: #55644f; --sable: #f3f3f0; --ecume: #e3e5df; --encre: #252526; --gris: #625e5d;
	--barre-fond: #d7d8d4; --sur-barre: #3f3f41;
	--titre: "Josefin", system-ui, sans-serif; --t-graisse: 600; --t-casse: uppercase; --t-espace: 0.03em;
}

/* 7. Ombrelle */
body[data-design="ombrelle"] {
	--fond: #fbe9dc; --fond2: #f0cab2; --lettre: #5c3621; --lettre-doux: #84563b; --nom: #9f5833;
	--forme2: #f0cab2;
	--bouee: #bd7d7a; --sur-accent: #2a1614; --nuit: #5c3621; --sarcelle: #9f5833; --sable: #fdf4ec; --ecume: #f8e2d3; --encre: #3b2a22; --gris: #84563b;
	--barre-fond: #f0cab2; --sur-barre: #5c3621;
	--titre: "Yeseva", Georgia, serif; --t-graisse: 400; --t-espace: 0;
}

/* 8. Eau froide */
body[data-design="froide"] {
	--fond: #2c3a52; --fond2: #24304a; --lettre: #e9eef6; --lettre-doux: #b9c5d8; --nom: #f0cab2;
	--forme1: #8ea1bf; --sur-forme1: #131b29; --forme3: #f0cab2;
	--bouee: #f0cab2; --sur-accent: #2c3a52; --nuit: #2c3a52; --sarcelle: #4a5f82; --sable: #f1f4f8; --ecume: #dfe6f0; --encre: #17202f; --gris: #55647d;
	--barre-fond: #24304a; --sur-barre: #e9eef6;
	--titre: "Cormorant", Georgia, serif; --t-graisse: 500; --t-espace: 0; --rayon-b: 0.3rem; --rayon: 0.5rem;
}
body[data-design="froide"] .vitrine h1, body[data-design="froide"] .vitrine h2 { font-style: italic; }
body[data-design="froide"] .bouton.plein { background: #9f5833; border-color: #9f5833; color: #fff; }
body[data-design="froide"] .vitrine .bouton.plein, body[data-design="froide"] .barre .bouton.plein { background: #f0cab2; border-color: #f0cab2; color: #2c3a52; }

/* 9. Terre cuite */
body[data-design="terre"] {
	--fond: #9f5833; --fond2: #884c2e; --lettre: #fbe9dc; --lettre-doux: #f0cab2; --nom: #f0d7c3;
	--forme1: #c89c7f;
	--bouee: #9f5833; --sur-accent: #fff; --nuit: #5c3621; --sarcelle: #9f5833; --encre: #3b2a22;
	--barre-fond: #5c3621; --sur-barre: #f0d7c3; --carton: #fbe9dc;
	--titre: "Federo", Georgia, serif; --t-graisse: 400; --t-espace: 0; --rayon-b: 0.3rem; --rayon: 0.4rem;
}
body[data-design="terre"] .vitrine .bouton.plein, body[data-design="terre"].p-vitrine .barre .bouton.plein { background: #f0cab2; border-color: #f0cab2; color: #5c3621; }
body[data-design="terre"] .v-etapes b { color: #9f5833; }

/* 10. Carte postale : un filet tout autour, comme un timbre */
body[data-design="postale"] {
	--fond: #f8efe6; --fond2: #e3e8f0; --lettre: #2c3a52; --lettre-doux: #55647d; --nom: #4a5f82;
	--forme2: #d7d8d4; --forme3: #f0cab2;
	--bouee: #4a5f82; --sur-accent: #fff; --nuit: #2c3a52; --sarcelle: #4a5f82; --ecume: #e3e8f0; --encre: #1b2434; --gris: #55647d;
	--barre-fond: #4a5f82; --sur-barre: #f8efe6;
	--titre: "Young Serif", Georgia, serif; --t-graisse: 400; --t-espace: -0.01em; --rayon-b: 0.5rem; --rayon: 0.5rem;
}
body[data-design="postale"].p-vitrine { border: 0.7rem solid #f8efe6; outline: 0.25rem dashed #bd7d7a; outline-offset: -0.5rem; }
body[data-design="postale"] .v-decor i:nth-child(3) { background: #bd7d7a; }

/* 11. Sauge */
body[data-design="sauge"] {
	--fond: #dfe2da; --fond2: #cdd2c6; --lettre: #2f352c; --lettre-doux: #57604f; --nom: #5c3621;
	--forme2: #a8aea1;
	--bouee: #5c3621; --sur-accent: #f0d7c3; --nuit: #2f352c; --sarcelle: #4f5c47; --sable: #f3f4ef; --ecume: #e2e6dc; --encre: #22271f; --gris: #57604f;
	--barre-fond: #6f7a66; --sur-barre: #f6f7f2;
	--titre: "Marcellus", Georgia, serif; --t-graisse: 400; --t-espace: 0;
}

/* 12. Moustache : noir et pêche, gros caractères */
body[data-design="moustache"] {
	--fond: #f0cab2; --fond2: #1f1d1e; --sur-fond2: #f0d7c3; --lettre: #1f1d1e; --lettre-doux: #3f3f41; --nom: #1f1d1e;
	--forme1: #1f1d1e; --forme3: #f0cab2;
	--bouee: #9f5833; --sur-accent: #fff; --nuit: #1f1d1e; --sarcelle: #9f5833; --encre: #1f1d1e; --gris: #625e5d;
	--barre-fond: #1f1d1e; --sur-barre: #f0cab2;
	--titre: "Bricolage", system-ui, sans-serif; --t-graisse: 800; --t-espace: -0.035em; --rayon-b: 0.2rem; --rayon: 0.3rem;
}
body[data-design="moustache"] .v-embleme img { background: #f8efe6; }
body[data-design="moustache"] .v-hero h1 { font-size: clamp(2.6rem, 6.5vw, 5rem); line-height: 0.95; max-width: 11ch; }

/* 13. Bain de minuit : la lune dans le coin */
body[data-design="minuit"] {
	--fond: #1d2533; --fond2: #263044; --lettre: #dfe6f2; --lettre-doux: #a9b6cc; --nom: #f0cab2;
	--forme2: #263044; --forme3: #2f3b54;
	--bouee: #f0cab2; --sur-accent: #1d2533; --nuit: #1d2533; --sarcelle: #4a5f82; --sable: #f1f4f8; --ecume: #dfe6f0; --encre: #17202f; --gris: #55647d;
	--barre-fond: #1d2533; --sur-barre: #dfe6f2;
	--titre: "Poiret", "Josefin", system-ui, sans-serif; --t-graisse: 400; --t-espace: 0.03em;
}
/* La lune est à gauche (demande de Mathieu, 2026-10-08) : à droite, elle se confondait avec le bouton « Entrer », de la même couleur. */
body[data-design="minuit"] .v-decor i:nth-child(3) { top: 1rem; bottom: auto; left: 9%; right: auto; width: 5.5rem; height: 5.5rem; background: #f0cab2; box-shadow: 0 0 4rem #f0cab255; }
body[data-design="minuit"] .bouton.plein { background: #4a5f82; border-color: #4a5f82; color: #fff; }
body[data-design="minuit"] .vitrine .bouton.plein, body[data-design="minuit"] .barre .bouton.plein { background: #f0cab2; border-color: #f0cab2; color: #1d2533; }
body[data-design="minuit"] .v-etapes b { color: #4a5f82; }

/* 14. Sable mouillé */
body[data-design="sable"] {
	--fond: #c2ae9e; --fond2: #b39d8c; --lettre: #33241c; --lettre-doux: #4f3a2e; --nom: #5c3621;
	--forme1: #f8efe6; --sur-forme1: #33241c;
	--bouee: #5c3621; --sur-accent: #f8efe6; --nuit: #33241c; --sarcelle: #7a4628; --encre: #2a1f1a; --gris: #6e5f55;
	--barre-fond: #5c3621; --sur-barre: #f0d7c3;
	--titre: "DM Serif", Georgia, serif; --t-graisse: 400; --t-espace: 0;
}

/* 15. Journal du dimanche : papier, encre, filets */
body[data-design="journal"] {
	--fond: #fbf8f3; --fond2: #f1ebe2; --lettre: #1f1d1e; --lettre-doux: #55504d; --nom: #1f1d1e;
	--forme1: #bd7d7a;
	--bouee: #1f1d1e; --sur-accent: #fbf8f3; --nuit: #1f1d1e; --sarcelle: #8a4f4c; --sable: #fbf8f3; --ecume: #f1ebe2; --encre: #1f1d1e; --gris: #625e5d;
	--barre-fond: #fbf8f3; --sur-barre: #1f1d1e;
	--titre: "Playfair", Georgia, serif; --texte: "Newsreader", Georgia, serif; --t-graisse: 900; --t-espace: -0.02em; --rayon-b: 0; --rayon: 0;
}
body[data-design="journal"] .barre { border-bottom: 1px solid #1f1d1e; }
body[data-design="journal"] .v-recit { border-top: 0.3rem double #1f1d1e; margin-top: 1rem; }
body[data-design="journal"] .v-etapes article { border: 0; border-top: 1px solid #1f1d1e; background: none; padding-left: 0; }
body[data-design="journal"] .v-etapes b { color: #bd7d7a; }

/* 16. Vieux rose */
body[data-design="rose"] {
	--fond: #bd7d7a; --fond2: #8a4f4c; --sur-fond2: #fbe9dc; --lettre: #2a1614; --lettre-doux: #46282a; --nom: #fbe9dc;
	--forme2: #f0cab2;
	--bouee: #1f1d1e; --sur-accent: #f0cab2; --nuit: #3d2221; --sarcelle: #8a4f4c; --sable: #fbf1ea; --ecume: #f6e1d8; --encre: #2a1614; --gris: #7a5a55;
	--barre-fond: #8a4f4c; --sur-barre: #fbe9dc;
	--titre: "Cormorant", Georgia, serif; --t-graisse: 600; --t-espace: 0;
}
body[data-design="rose"] .vitrine h1, body[data-design="rose"] .vitrine h2 { font-style: italic; }

/* 17. Grand large */
body[data-design="large"] {
	--fond: #e7ecf4; --fond2: #cfd8e6; --lettre: #24304a; --lettre-doux: #4a5f82; --nom: #4a5f82;
	--forme1: #8ea1bf; --forme3: #f8efe6;
	--bouee: #9f5833; --sur-accent: #fff; --nuit: #24304a; --sarcelle: #4a5f82; --sable: #f4f6fa; --ecume: #e1e7f0; --encre: #17202f; --gris: #55647d;
	--barre-fond: #8ea1bf; --sur-barre: #131b29;
	--titre: "Josefin", system-ui, sans-serif; --t-graisse: 300; --t-casse: uppercase; --t-espace: 0.07em;
}

/* 18. Art nouveau : boutons en feuille */
body[data-design="nouveau"] {
	--fond: #f4ead9; --fond2: #e6dcc6; --lettre: #3a4234; --lettre-doux: #5f6a57; --nom: #6f7a66;
	--forme1: #6f7a66; --sur-forme1: #f4ead9;
	--bouee: #9f5833; --sur-accent: #fff; --nuit: #3a4234; --sarcelle: #55644f; --sable: #f8f1e4; --ecume: #ebe3d0; --encre: #2a3026; --gris: #5f6a57;
	--barre-fond: #3a4234; --sur-barre: #f4ead9;
	--titre: "Federo", Georgia, serif; --t-graisse: 400; --t-espace: 0.01em; --rayon-b: 1.2rem 0.2rem; --rayon: 2rem 0.3rem;
}

/* 19. Les baigneurs : le dessin en grand, sur une bande de ciel */
body[data-design="baigneurs"] {
	--fond2: #8ea1bf; --sur-fond2: #131b29; --nom: #9f5833;
	--forme2: #a8aea1; --forme3: #f0cab2;
	--titre: "Yeseva", Georgia, serif; --t-graisse: 400; --t-espace: 0;
}
body[data-design="baigneurs"].p-vitrine { background: linear-gradient(#8ea1bf 0 20rem, var(--fond) 20rem); }
body[data-design="baigneurs"] .v-embleme img { width: min(27rem, 78vw); }
body[data-design="baigneurs"] .v-niveaux { box-shadow: none; }

/* 20. Sobre : blanc, charbon, un seul bleu */
body[data-design="sobre"] {
	--fond: #fff; --fond2: #f4f4f2; --lettre: #1f1d1e; --lettre-doux: #625e5d; --nom: #1f1d1e;
	--forme2: #f4f4f2;
	--bouee: #4a5f82; --sur-accent: #fff; --nuit: #1f1d1e; --sarcelle: #4a5f82; --sable: #fafaf8; --ecume: #eef0f4; --encre: #1f1d1e; --gris: #625e5d;
	--barre-fond: #fff; --sur-barre: #1f1d1e;
	--titre: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --t-graisse: 700; --t-espace: -0.025em; --rayon-b: 0.4rem; --rayon: 0.5rem;
}
body[data-design="sobre"] .barre { border-bottom: 1px solid #1f1d1e22; }
body[data-design="sobre"] .v-etapes article { border-color: #1f1d1e22; }