/* desponds.ch – feuille de style commune (accueil, album, outils). */

:root {
  --encre: #000066;
  --fond: #cee0ff;
  --carte: #ffffff;
  --doux: #5a5a8a;
  --accent: #000066;
  --accent-fond: #cee0ff;
  --ombre: 0 1px 3px rgba(0, 0, 40, .12), 0 4px 14px rgba(0, 0, 40, .08);
  --rayon: 12px;
  --police: Garamond, "EB Garamond", "Palatino Linotype", Palatino, Georgia, serif;
}

/* Un univers par personne : voir « Univers » en fin de fichier. */
.p-nolan  { --accent: #740001; --accent-fond: #f3e6c8; }
.p-zelia  { --accent: #c8102e; --accent-fond: #1c3f94; }
.p-soren  { --accent: #ffd60a; --accent-fond: #05060f; }
.p-helene { --accent: #3d3d3d; --accent-fond: #fafafa; }
.p-fabien { --accent: #e4007c; --accent-fond: #fff6d6; }

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--police);
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--encre);
  background: var(--fond);
}

body[class*="p-"] { background: var(--accent-fond); }

a { color: var(--accent); }
a:hover { text-decoration-thickness: 2px; }

img { max-width: 100%; height: auto; }

.page { max-width: 1100px; margin: 0 auto; padding: 0 16px 48px; }

/* En-tête : fil d'Ariane, titre, liens. */
.entete { padding: 20px 0 8px; }
.fil { margin: 0; font-size: .95rem; color: var(--doux); }
.fil a { color: inherit; }
.entete h1 { margin: .2em 0 .1em; font-size: clamp(1.8rem, 5vw, 2.6rem); color: var(--accent); line-height: 1.15; }
.sous-titre { margin: 0; color: var(--doux); }
.barre { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin: 12px 0 0; padding: 0; list-style: none; }
.barre a, .bouton {
  display: inline-block; padding: 6px 14px; border-radius: 999px;
  background: var(--carte); color: var(--accent); text-decoration: none; box-shadow: var(--ombre);
}
.barre a:hover, .bouton:hover { background: var(--accent); color: #fff; }
.barre .discret { margin-left: auto; }

/* Accueil du site : les deux sections. */
.accueil { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; text-align: center; }
.accueil h1 { font-size: clamp(2rem, 6vw, 3.2rem); margin: 0 0 .2em; }
.accueil .credit { margin: 0 0 32px; color: var(--doux); }
.sections { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; max-width: 760px; margin: 0 auto; width: 100%; }
.section {
  display: block; padding: 32px 20px; border-radius: 18px; background: var(--carte);
  color: var(--encre); text-decoration: none; box-shadow: var(--ombre); transition: transform .15s;
}
.section:hover { transform: translateY(-3px); }
.section .icone { font-size: 3rem; line-height: 1; }
.section strong { display: block; margin: .3em 0 .1em; font-size: 1.6rem; }
.section span { color: var(--doux); }

/* Grilles de cartes (personnes, albums, outils). */
.cartes { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 16px; margin: 16px 0 32px; padding: 0; list-style: none; }
.cartes.grandes { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.carte a { display: block; height: 100%; border-radius: var(--rayon); overflow: hidden; background: var(--carte); color: var(--encre); text-decoration: none; box-shadow: var(--ombre); }
.carte a:hover { outline: 3px solid var(--accent); }
.carte .vignette { display: block; aspect-ratio: 4 / 3; width: 100%; object-fit: cover; background: #e8e8f0; }
.carte .texte { display: block; padding: 8px 12px 10px; }
.carte .titre { display: block; font-weight: bold; color: var(--accent); }
.carte .nombre { font-size: .9rem; color: var(--doux); }

h2.groupe { margin: 28px 0 0; font-size: 1.5rem; color: var(--accent); border-bottom: 2px solid var(--accent); }

/* Galerie d'un album. */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin: 16px 0; padding: 0; list-style: none; }
.galerie a { display: block; border-radius: 8px; overflow: hidden; background: #e8e8f0; aspect-ratio: 1; }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s; }
.galerie a:hover img { transform: scale(1.04); }
.navigation { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 24px; }

/* Visionneuse plein écran. */
.visionneuse { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(10, 10, 20, .95); color: #fff; }
.visionneuse::backdrop { background: rgba(10, 10, 20, .95); }
.visionneuse img { position: absolute; inset: 48px 56px 64px; margin: auto; max-width: calc(100% - 112px); max-height: calc(100% - 112px); object-fit: contain; }
.visionneuse button { position: absolute; border: 0; background: rgba(255, 255, 255, .12); color: #fff; font-size: 2rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; }
.visionneuse button:hover, .visionneuse button:focus-visible { background: rgba(255, 255, 255, .3); }
.visionneuse .fermer { top: 8px; right: 8px; }
.visionneuse .prec { left: 4px; top: 50%; transform: translateY(-50%); }
.visionneuse .suiv { right: 4px; top: 50%; transform: translateY(-50%); }
.visionneuse .legende { position: absolute; left: 0; right: 0; bottom: 8px; margin: 0; text-align: center; padding: 0 64px; }
.visionneuse .compteur { position: absolute; top: 18px; left: 16px; font-size: .95rem; opacity: .8; }
@media (max-width: 600px) {
  .visionneuse img { inset: 48px 0 56px; max-width: 100%; max-height: calc(100% - 104px); }
  .visionneuse .prec, .visionneuse .suiv { top: auto; bottom: 4px; transform: none; }
}

/* Pages de texte (anecdotes, recettes…). */
.texte-long { max-width: 46em; background: var(--carte); padding: 8px 24px 24px; border-radius: var(--rayon); box-shadow: var(--ombre); }
.texte-long h2 { color: var(--accent); margin: 1.4em 0 .3em; font-size: 1.35rem; }
.texte-long img { display: block; margin: 12px auto; }

/* Nouveautés (historique de l'ancien site). */
details.historique { margin: 24px 0; background: var(--carte); border-radius: var(--rayon); padding: 12px 20px; box-shadow: var(--ombre); }
details.historique summary { cursor: pointer; font-weight: bold; color: var(--accent); }
details.historique ul { padding-left: 1.2em; }

/* Connexion. */
.connexion { display: grid; place-items: center; min-height: 100vh; padding: 16px; }
.carte-connexion { width: 100%; max-width: 420px; background: var(--carte); border-radius: 18px; padding: 24px 28px 28px; box-shadow: var(--ombre); }
.carte-connexion h1 { margin: .2em 0 .4em; }
.carte-connexion label { display: block; margin: 14px 0; }
.carte-connexion input:not([type="checkbox"]) { display: block; width: 100%; margin-top: 4px; padding: 10px 12px; font: inherit; border: 1px solid #b8b8d0; border-radius: 8px; }
.carte-connexion .case { display: flex; gap: 8px; align-items: center; }
.carte-connexion button { width: 100%; margin-top: 8px; padding: 12px; font: inherit; font-weight: bold; border: 0; border-radius: 999px; background: var(--encre); color: #fff; cursor: pointer; }
.erreur { padding: 8px 12px; border-radius: 8px; background: #ffe3e3; color: #8a0000; }

/* Barre du haut : retour au menu principal. */
.menu {
  position: sticky; top: 0; z-index: 10; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center;
  padding: 8px max(16px, calc((100% - 1100px) / 2 + 16px)); background: var(--menu-fond, rgba(255, 255, 255, .92));
  box-shadow: 0 1px 6px rgba(0, 0, 40, .12); font-size: 1rem; backdrop-filter: blur(6px);
}
.menu a { padding: 4px 12px; border-radius: 999px; color: var(--menu-texte, var(--accent)); text-decoration: none; }
.menu a + a::before { content: "›"; margin: 0 8px 0 -8px; opacity: .5; }
.menu a:hover { background: var(--accent); color: var(--sur-accent, #fff); }
.menu .maison { font-weight: bold; }

/* Pages à lire (anecdotes, croissance, recettes) en tête de la page d'une personne. */
.a-lire { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 8px; padding: 0; list-style: none; }
.a-lire a {
  display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-radius: var(--rayon);
  background: var(--carte); color: var(--accent); font-weight: bold; font-size: 1.15rem; text-decoration: none;
  box-shadow: var(--ombre); border: 2px solid var(--accent);
}
.a-lire a:hover { background: var(--accent); color: var(--sur-accent, #fff); }
.a-lire .icone { font-size: 1.6rem; line-height: 1; }
.navigation .tous { order: 0; }

/* ---------------------------------------------------------------- Univers */

/* Nolan : école de sorcellerie. Parchemin, bordeaux et or, lettres anciennes. */
.p-nolan {
  --encre: #2b1b0e; --doux: #6b4f2f; --carte: #fbf4e2; --or: #b8892b;
  --police: "Palatino Linotype", Palatino, "Book Antiqua", Garamond, Georgia, serif;
  --menu-fond: #740001; --menu-texte: #f3d27a; --sur-accent: #f3d27a;
  --ombre: 0 1px 2px rgba(60, 30, 0, .25), 0 6px 18px rgba(60, 30, 0, .15);
}
body.p-nolan {
  background:
    radial-gradient(ellipse at top, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(140, 90, 30, .18), transparent 70%),
    #f3e6c8;
  background-attachment: fixed;
}
.p-nolan .entete h1 { font-variant: small-caps; letter-spacing: .04em; text-shadow: 0 1px 0 #f3d27a; }
.p-nolan .entete h1::before, .p-nolan .entete h1::after { content: " ✦ "; color: var(--or); font-size: .6em; vertical-align: middle; }
.p-nolan h2.groupe { border-bottom: 3px double var(--or); font-variant: small-caps; }
.p-nolan .carte a, .p-nolan .texte-long, .p-nolan .a-lire a { border: 1px solid var(--or); box-shadow: var(--ombre), inset 0 0 0 3px #fbf4e2, inset 0 0 0 4px rgba(184, 137, 43, .5); }
.p-nolan .carte a:hover { outline-color: var(--or); }
.p-nolan .texte-long h2::before { content: "✦ "; color: var(--or); }

/* Zélia : héroïne araignée. Rouge et bleu, toiles, lettres de bande dessinée. */
.p-zelia {
  --encre: #101828; --doux: #dbe4ff; --carte: #ffffff; --bleu: #1c3f94;
  --police: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --menu-fond: #c8102e; --menu-texte: #fff; --sur-accent: #fff;
  --ombre: 4px 4px 0 #0b1a45;
}
body.p-zelia {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cpath d='M120 120L290 120M120 120L240 240M120 120L120 290M120 120L-0 240M120 120L-50 120M120 120L-0 -0M120 120L120 -50M120 120L240 -0M144 120Q139 128 137 137Q128 139 120 144Q112 139 103 137Q101 128 96 120Q101 112 103 103Q112 101 120 96Q128 101 137 103Q139 112 144 120M170 120Q160 136 155 155Q136 160 120 170Q104 160 85 155Q80 136 70 120Q80 104 85 85Q104 80 120 70Q136 80 155 85Q160 104 170 120M198 120Q182 146 175 175Q146 182 120 198Q94 182 65 175Q58 146 42 120Q58 94 65 65Q94 58 120 42Q146 58 175 65Q182 94 198 120M228 120Q206 156 196 196Q156 206 120 228Q84 206 44 196Q34 156 12 120Q34 84 44 44Q84 34 120 12Q156 34 196 44Q206 84 228 120M260 120Q231 166 219 219Q166 231 120 260Q74 231 21 219Q9 166 -20 120Q9 74 21 21Q74 9 120 -20Q166 9 219 21Q231 74 260 120' fill='none' stroke='%23ffffff' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E") 0 0 / 240px 240px,
    linear-gradient(160deg, #1c3f94 0%, #142d6e 55%, #0b1a45 100%);
  background-attachment: fixed;
}
.p-zelia .fil, .p-zelia .sous-titre { color: #dbe4ff; }
.p-zelia .entete h1 {
  display: inline-block; padding: 4px 18px; background: #c8102e; color: #fff; border: 3px solid #0b1a45;
  box-shadow: 5px 5px 0 #0b1a45; transform: rotate(-1.5deg); text-transform: uppercase; font-weight: 900;
  font-family: Impact, "Arial Black", var(--police); letter-spacing: .03em;
}
.p-zelia h2.groupe { color: #fff; border-bottom: 4px solid #c8102e; text-transform: uppercase; font-family: Impact, "Arial Black", var(--police); letter-spacing: .04em; }
.p-zelia .carte a, .p-zelia .texte-long, .p-zelia .a-lire a { border: 3px solid #0b1a45; border-radius: 6px; }
.p-zelia .carte a:hover { outline: 3px solid #c8102e; transform: translateY(-2px); }
.p-zelia .carte .titre { color: #c8102e; text-transform: uppercase; }
.p-zelia .carte .nombre { color: #4a5578; }
.p-zelia .texte-long h2 { color: #fff; background: #c8102e; display: inline-block; padding: 2px 12px; border-radius: 4px; }
.p-zelia .bouton { border: 2px solid #0b1a45; }

/* Soren : saga des étoiles. Espace noir, étoiles, jaune doré et sabres lumineux. */
.p-soren {
  --encre: #e8ecff; --doux: #9aa4d6; --carte: rgba(18, 22, 48, .88); --sabre: #4cc9ff;
  --police: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --menu-fond: rgba(5, 6, 15, .9); --menu-texte: #ffd60a; --sur-accent: #05060f;
  --ombre: 0 0 0 1px rgba(76, 201, 255, .25), 0 8px 24px rgba(0, 0, 0, .6);
}
body.p-soren {
  background:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 120px 80px, #cfe3ff, transparent),
    radial-gradient(1.5px 1.5px at 200px 160px, #fff, transparent),
    radial-gradient(1px 1px at 60px 190px, #ffe9a8, transparent),
    radial-gradient(1px 1px at 250px 40px, #fff, transparent),
    radial-gradient(2px 2px at 170px 240px, #fff, transparent),
    radial-gradient(ellipse at 80% -10%, rgba(76, 90, 200, .35), transparent 55%),
    radial-gradient(ellipse at 0% 110%, rgba(150, 40, 120, .25), transparent 55%),
    #05060f;
  background-size: 280px 280px, 280px 280px, 280px 280px, 280px 280px, 280px 280px, 280px 280px, 100% 100%, 100% 100%, auto;
  background-attachment: fixed;
}
.p-soren a { color: #ffd60a; }
.p-soren .fil a { color: inherit; }
.p-soren .entete h1 {
  color: #ffd60a; text-transform: uppercase; letter-spacing: .14em; font-weight: 800;
  text-shadow: 0 0 12px rgba(255, 214, 10, .45);
}
.p-soren h2.groupe { color: #ffd60a; text-transform: uppercase; letter-spacing: .1em; border: 0; padding-bottom: 6px; position: relative; }
.p-soren h2.groupe::after { content: ""; position: absolute; left: 0; bottom: 0; width: min(320px, 60%); height: 4px; border-radius: 4px; background: #fff; box-shadow: 0 0 6px 2px var(--sabre), 0 0 14px 4px var(--sabre); }
.p-soren .carte a, .p-soren .texte-long, .p-soren .a-lire a { color: var(--encre); border: 1px solid rgba(76, 201, 255, .35); }
.p-soren .carte .titre { color: #ffd60a; }
.p-soren .carte a:hover { outline: 2px solid var(--sabre); box-shadow: 0 0 18px rgba(76, 201, 255, .6); }
.p-soren .carte .vignette, .p-soren .galerie a { background: #11142c; }
.p-soren .barre a, .p-soren .bouton { background: rgba(18, 22, 48, .9); color: #ffd60a; border: 1px solid rgba(255, 214, 10, .4); }
.p-soren .texte-long h2 { color: #ffd60a; letter-spacing: .06em; }
.p-soren .menu { box-shadow: 0 1px 0 rgba(76, 201, 255, .3); }

/* Hélène : très sobre. Blanc, gris anthracite, filets fins, pas d'ombre. */
.p-helene {
  --encre: #2a2a2a; --doux: #777; --carte: #fff; --rayon: 2px;
  --police: Georgia, "Times New Roman", serif;
  --menu-fond: #fff; --menu-texte: #3d3d3d;
  --ombre: none;
}
body.p-helene { background: #fafafa; }
.p-helene .entete h1 { font-weight: normal; letter-spacing: .02em; }
.p-helene h2.groupe { font-weight: normal; border-bottom: 1px solid #ccc; }
.p-helene .carte a, .p-helene .texte-long, .p-helene .a-lire a, .p-helene .barre a, .p-helene .bouton { border: 1px solid #ddd; }
.p-helene .carte a:hover { outline: 1px solid #3d3d3d; }
.p-helene .carte .titre { font-weight: normal; }
.p-helene .a-lire a { font-weight: normal; }
.p-helene .menu { box-shadow: none; border-bottom: 1px solid #e5e5e5; }

/* Fabien : très coloré. Dégradés arc-en-ciel, cartes de toutes les couleurs. */
.p-fabien {
  --encre: #1d1d3a; --doux: #4a3d6e; --carte: #fff;
  --police: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --menu-fond: linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #3fa7ff, #b86bff); --menu-texte: #1d1d3a;
}
body.p-fabien {
  background:
    radial-gradient(circle at 10% 10%, rgba(255, 95, 109, .35), transparent 35%),
    radial-gradient(circle at 90% 20%, rgba(63, 167, 255, .35), transparent 35%),
    radial-gradient(circle at 30% 90%, rgba(71, 232, 145, .35), transparent 40%),
    radial-gradient(circle at 85% 85%, rgba(184, 107, 255, .35), transparent 40%),
    #fff6d6;
  background-attachment: fixed;
}
.p-fabien .menu { background: linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #3fa7ff, #b86bff); }
.p-fabien .menu a { color: #1d1d3a; font-weight: bold; }
.p-fabien .entete h1 {
  background: linear-gradient(90deg, #ff3d6e, #ff9f1c, #2ec27e, #1c7ed6, #9c36b5); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 900;
}
.p-fabien h2.groupe { border-image: linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #3fa7ff, #b86bff) 1; border-bottom-width: 4px; border-bottom-style: solid; }
.p-fabien .cartes .carte:nth-child(5n+1) a { border-top: 6px solid #ff5f6d; }
.p-fabien .cartes .carte:nth-child(5n+2) a { border-top: 6px solid #ffb020; }
.p-fabien .cartes .carte:nth-child(5n+3) a { border-top: 6px solid #2ec27e; }
.p-fabien .cartes .carte:nth-child(5n+4) a { border-top: 6px solid #3fa7ff; }
.p-fabien .cartes .carte:nth-child(5n+5) a { border-top: 6px solid #b86bff; }
.p-fabien .carte a:hover { transform: rotate(-1deg) scale(1.02); }
.p-fabien .texte-long { border-top: 6px solid; border-image: linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #3fa7ff, #b86bff) 1; }

/* Sur l'accueil de l'album, chaque carte de personne donne un avant-goût de son univers. */
.cartes .carte.p-soren a { background: #121630; color: #e8ecff; }
.cartes .carte.p-soren .titre { color: #ffd60a; text-transform: uppercase; letter-spacing: .1em; }
.cartes .carte.p-soren .nombre { color: #9aa4d6; }
.cartes .carte.p-zelia a { background: #c8102e; }
.cartes .carte.p-zelia .titre, .cartes .carte.p-zelia .nombre { color: #fff; }
.cartes .carte.p-zelia .titre { text-transform: uppercase; font-family: Impact, "Arial Black", sans-serif; letter-spacing: .04em; font-weight: normal; }
.cartes .carte.p-nolan a { background: #fbf4e2; border: 1px solid #b8892b; }
.cartes .carte.p-nolan .titre { color: #740001; font-variant: small-caps; font-size: 1.15em; }
.cartes .carte.p-helene a { border: 1px solid #ddd; box-shadow: none; }
.cartes .carte.p-helene .titre { color: #3d3d3d; font-weight: normal; }
.cartes .carte.p-fabien a { border-top: 6px solid; border-image: linear-gradient(90deg, #ff5f6d, #ffc371, #47e891, #3fa7ff, #b86bff) 1; }
.cartes .carte.p-fabien .titre { color: #e4007c; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}