/* ==========================================================================
   Chartes supplémentaires (sélecteur de charte) :
   « Hulotte », « Nuit », « Pop » et les quatre saisons.
   Chacune s'applique via <html data-charte="…"> et force sa propre palette.
   ========================================================================== */

@font-face {
  font-family: "Lora"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/lora.woff2") format("woff2");
}
@font-face {
  font-family: "Fredoka"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/fredoka.woff2") format("woff2");
}

/* ======================= HULOTTE : carnet naturaliste à l'encre ======================= */
:root[data-charte="hulotte"] {
  --fond: #F4EEDC; --fond-2: #EAE1C8; --surface: #FBF8EF; --sauge: #E6DFC7;
  --texte: #1E1B16; --texte-2: #4A4436;
  --primaire: #1E1B16; --primaire-hover: #000000; --plumage: #1E1B16;
  --accent: #D9B45A; --cta: #A63A24; --cta-hover: #832A18;
  --nuit: #1E1B16; --sur-nuit: #F4EEDC; --sur-nuit-2: #CFC6AE; --bordure: #CFC4A6;
  --sur-primaire: #FBF8EF; --bandeau-fond: #1E1B16; --bandeau-texte: #F4EEDC; --surlignage: .5;
  --bleu-fond: #DCE3E0;  --bleu-texte: #24404A;
  --vert-fond: #DDE5CC;  --vert-texte: #2F4A21;
  --peche-fond: #F0D9C4; --peche-texte: #7A3518;
  --jaune-fond: #F1E2B4; --jaune-texte: #5A4300;
  --printemps: #E7E6CC; --ete: #F1E2B4; --automne: #EED6BF; --hiver: #DDE3E3; --sur-saison: #1E1B16;
  --police-titre: "Fraunces", Georgia, serif;
  --police-texte: "Lora", Georgia, serif;
  --r-sm: 0px; --r-md: 2px; --r-lg: 2px;
  --ombre: 4px 4px 0 rgb(30 27 22 / .85);
  color-scheme: light;

  body { font-size: 1.05rem; }
  .surtitre {
    display: inline-block; font-family: var(--police-main); font-size: 1.45rem; font-weight: 600;
    text-transform: none; letter-spacing: 0; color: var(--cta); transform: rotate(-2deg);
  }
  .entete { background: var(--fond); border-bottom: 2px solid var(--texte); }
  .menu a { border-radius: 0; }
  .carte, .sortie, .actu, .etapes > li, .faq details, .archives details, .charte li, .telechargement {
    border: 2px solid var(--texte); border-radius: 0; box-shadow: var(--ombre);
  }
  .bouton { border-radius: 0; border: 2px solid var(--texte); box-shadow: 3px 3px 0 var(--texte); }
  .bouton--contour { background: var(--surface); }
  /* Photos collées dans le carnet */
  .galet { border-radius: 0; aspect-ratio: 4 / 3.3; border: 10px solid #FFFFFF; box-shadow: var(--ombre); transform: rotate(-2deg); }
  .photo-arrondie { border-radius: 0; border: 8px solid #FFFFFF; box-shadow: var(--ombre); transform: rotate(1deg); }
  .galerie figure { border-radius: 0; border: 6px solid #FFFFFF; box-shadow: 3px 3px 0 rgb(30 27 22 / .6); }
  .galet img, .photo-arrondie img, .galerie img { filter: sepia(.25) contrast(1.03); }
  .galerie figcaption { font-family: var(--police-main); font-size: 1.2rem; background: #FBF8EF; color: var(--texte); border-radius: 0; }
  .sortie__date { background: var(--surface); border: 2px solid var(--texte); border-radius: 0; }
  .badge, .infos-cles li { border-radius: 0; }
  .infos-cles li { border: 1.5px solid var(--texte); }
  .fiche { background: var(--surface); border: 2px solid var(--texte); border-radius: 0; box-shadow: var(--ombre); }
  .saison, .carte__icone, .etapes > li::before { border: 2px solid var(--texte); border-radius: 0; }
  .bandeau { border-radius: 0; box-shadow: var(--ombre); }
  .bandeau .bouton { background: var(--surface); color: var(--texte); box-shadow: none; }
  .hero::before { opacity: .1; }
}

/* ======================= NUIT : le crépuscule de la chevêche ======================= */
:root[data-charte="nuit"] {
  --fond: #0F1A2B; --fond-2: #13223A; --surface: #1A2C47; --sauge: #22385A;
  --texte: #EAF0F7; --texte-2: #B4C2D6;
  --primaire: #F2C14E; --primaire-hover: #FFD978; --plumage: #F6E7C1;
  --accent: #F2C14E; --cta: #F2C14E; --cta-hover: #FFD978;
  --nuit: #0A1220; --sur-nuit: #EAF0F7; --sur-nuit-2: #B4C2D6; --bordure: #2A3F60;
  --sur-primaire: #0F1A2B; --bandeau-fond: #22385A; --bandeau-texte: #EAF0F7; --surlignage: .3;
  --bleu-fond: #1E3550;  --bleu-texte: #BFE0F0;
  --vert-fond: #1F3A33;  --vert-texte: #C4E3C0;
  --peche-fond: #43291C; --peche-texte: #F4CBB0;
  --jaune-fond: #4A3C18; --jaune-texte: #F6DFA0;
  --printemps: #1F3A33; --ete: #3B3418; --automne: #43291C; --hiver: #1E3550; --sur-saison: #EAF0F7;
  --police-titre: "Nunito", system-ui, sans-serif;
  --r-sm: 10px; --r-md: 18px; --r-lg: 24px;
  --ombre: 0 14px 30px -14px rgb(0 0 0 / .7);
  color-scheme: dark;

  h1, h2, h3 { font-weight: 800; letter-spacing: -.01em; }
  .surtitre { color: var(--accent); }
  /* Ciel étoilé derrière le hero */
  .hero::before {
    opacity: 1;
    background-image:
      radial-gradient(circle, rgb(255 255 255 / .75) 1px, transparent 1.6px),
      radial-gradient(circle, rgb(242 193 78 / .6) 1px, transparent 1.8px);
    background-size: 90px 90px, 140px 140px;
    background-position: 0 0, 45px 30px;
  }
  .prochaine { background: var(--nuit); }
  .bandeau .bouton { box-shadow: none; }
  .a-confirmer { background: #4A3C18; color: #F6DFA0; }
}

/* ======================= POP : jeune, vif et graphique ======================= */
:root[data-charte="pop"] {
  --fond: #FFF8E7; --fond-2: #FFE9A8; --surface: #FFFFFF; --sauge: #D7F2E3;
  --texte: #1B1B1B; --texte-2: #3D3D3D;
  --primaire: #0E7C66; --primaire-hover: #0A5E4D; --plumage: #1B1B1B;
  --accent: #FFD23F; --cta: #D63B1F; --cta-hover: #B12E15;
  --nuit: #1B1B1B; --sur-nuit: #FFF8E7; --sur-nuit-2: #E6DCC2; --bordure: #1B1B1B;
  --sur-primaire: #FFFFFF; --bandeau-fond: #0E7C66; --bandeau-texte: #FFFFFF; --surlignage: .9;
  --bleu-fond: #BDE6FF;  --bleu-texte: #0B3A55;
  --vert-fond: #C7F0B8;  --vert-texte: #1D4D13;
  --peche-fond: #FFC9B8; --peche-texte: #6B1F0A;
  --jaune-fond: #FFE98A; --jaune-texte: #4D3B00;
  --printemps: #C7F0B8; --ete: #FFE98A; --automne: #FFC9B8; --hiver: #BDE6FF; --sur-saison: #1B1B1B;
  --police-titre: "Fredoka", "Nunito", system-ui, sans-serif;
  --r-sm: 12px; --r-md: 18px; --r-lg: 24px;
  --ombre: 4px 4px 0 #1B1B1B;
  color-scheme: light;

  h1, h2, h3 { font-weight: 600; letter-spacing: 0; }
  .surtitre {
    display: inline-block; background: var(--accent); color: var(--texte); border: 2px solid var(--texte);
    padding: .2em .7em; border-radius: 999px; transform: rotate(-2deg);
  }
  .entete { border-bottom: 3px solid var(--texte); }
  .carte, .sortie, .actu, .etapes > li, .faq details, .archives details, .charte li, .telechargement, .fiche, .saison, .bandeau {
    border: 3px solid var(--texte); box-shadow: var(--ombre);
  }
  .bouton { border: 3px solid var(--texte); border-radius: 999px; box-shadow: 3px 3px 0 var(--texte); }
  .bouton:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--texte); }
  .galet { border: 4px solid var(--texte); box-shadow: 6px 6px 0 var(--texte); }
  .photo-arrondie, .galerie figure, .sortie__date, .carte__icone { border: 3px solid var(--texte); }
  .badge, .infos-cles li { border: 2px solid var(--texte); }
  .prochaine, .prochaine:hover { background: var(--accent); color: var(--texte); }
  .prochaine__label { color: var(--texte); }
  .prochaine__delai { background: var(--texte); color: var(--accent); }
  .pastille, .pastille--proche::after { background: var(--cta); }
  .bandeau .bouton { background: var(--accent); color: var(--texte); box-shadow: 3px 3px 0 var(--texte); }
  .liste-coches li::before { background: var(--accent); }
  .hero::before { opacity: .15; }
}

/* ======================= SAISONS : la base « Nature », recolorée ======================= */
:root:is([data-charte="printemps"], [data-charte="ete"], [data-charte="automne"], [data-charte="hiver"]) {
  --surface: #FFFFFF;
  --texte: #2B2A26; --texte-2: #5C574C;
  --sur-nuit: #F7F3EA; --sur-nuit-2: #D5CFC0;
  --sur-primaire: #FFFFFF; --bandeau-texte: #FFFFFF; --surlignage: .55;
  --bleu-fond: #D6E9F2;  --bleu-texte: #1F4E66;
  --vert-fond: #CFE3C4;  --vert-texte: #234D2B;
  --peche-fond: #F7DCC9; --peche-texte: #7A3518;
  --jaune-fond: #FBE7B5; --jaune-texte: #5A4300;
  --printemps: #DCEBC8; --ete: #FBE3A6; --automne: #F4CDB0; --hiver: #D9E4EC; --sur-saison: #2B2A26;
  --ombre: 0 2px 0 rgb(43 42 38 / .06), 0 12px 28px -12px rgb(43 42 38 / .3);
  color-scheme: light;

  .hero::before { opacity: .22; background-size: 110px 110px; }
}

/* Printemps : vert tendre et fleurs de cerisier */
:root[data-charte="printemps"] {
  --fond: #F8FBF1; --fond-2: #ECF5DE; --sauge: #E2F0D2; --bordure: #DCE8C9;
  --primaire: #3B7A37; --primaire-hover: #2C5E29; --plumage: #3D5A2A;
  --accent: #F4A6C0; --cta: #B83C70; --cta-hover: #962E5A;
  --nuit: #2C4A28; --bandeau-fond: #3B7A37;

  .hero::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg fill='%23E58FB0'%3E%3Cellipse cx='22' cy='22' rx='5' ry='10' transform='rotate(30 22 22)'/%3E%3Cellipse cx='78' cy='70' rx='4' ry='8' transform='rotate(-40 78 70)'/%3E%3Ccircle cx='86' cy='20' r='3'/%3E%3Ccircle cx='30' cy='86' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* Été : bleu lagon et soleil */
:root[data-charte="ete"] {
  --fond: #FFFAEE; --fond-2: #FFF0C9; --sauge: #DDF0EC; --bordure: #F0E2BC;
  --primaire: #1F6F70; --primaire-hover: #165556; --plumage: #7A4A1E;
  --accent: #FFC93C; --cta: #C24E10; --cta-hover: #9E3E0B;
  --nuit: #1B4B57; --bandeau-fond: #1F6F70;

  .hero::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg fill='%23F2B630'%3E%3Ccircle cx='28' cy='28' r='7'/%3E%3Ccircle cx='82' cy='76' r='3.5'/%3E%3C/g%3E%3Cg stroke='%23F2B630' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M28 12v-5M28 44v5M12 28h-5M44 28h5M17 17l-3-3M39 39l3 3M39 17l3-3M17 39l-3 3'/%3E%3C/g%3E%3C/svg%3E");
  }
}

/* Automne : roux, ocre et feuilles mortes */
:root[data-charte="automne"] {
  --fond: #FBF4EA; --fond-2: #F5E2CC; --sauge: #F0E2CF; --bordure: #EAD6BD;
  --primaire: #8A4B14; --primaire-hover: #6B3A0F; --plumage: #6B3410;
  --accent: #E9A23B; --cta: #A23B1B; --cta-hover: #822E14;
  --nuit: #4A2410; --bandeau-fond: #8A4B14;

  .hero::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cpath d='M20 44 Q36 16 58 27 Q42 49 20 44Z' fill='%23D9762B'/%3E%3Cpath d='M64 96 Q74 68 94 74 Q84 98 64 96Z' fill='%23A63A24'/%3E%3Ccircle cx='88' cy='22' r='3' fill='%23B7791F'/%3E%3C/svg%3E");
  }
}

/* Hiver : bleu givre et flocons */
:root[data-charte="hiver"] {
  --fond: #F5F8FB; --fond-2: #E6EEF6; --sauge: #E1EAF3; --bordure: #D3DEEA;
  --primaire: #2D5B83; --primaire-hover: #214566; --plumage: #2B3F55;
  --accent: #A9D1EE; --cta: #8A2E3B; --cta-hover: #6E232F;
  --nuit: #1F3347; --bandeau-fond: #2D5B83;

  .hero::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='110' height='110'%3E%3Cg stroke='%232D5B83' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M28 14v28M14 28h28M18 18l20 20M38 18L18 38'/%3E%3Cpath d='M80 66v16M72 74h16M74 68l12 12M86 68L74 80'/%3E%3C/g%3E%3C/svg%3E");
  }
}