/* Générateur de calendrier MyArk (B122, 30/10/2026) — atelier de calendrier-2027.html et des pages par race.
   S'appuie sur calculateurs.css (calc-card, calc-field, calc-choice). Les couleurs --cal-* sont celles du
   calendrier imprimé, lues par js/calendrier.js : fixes, identiques en clair et en sombre (le papier ne change pas). */
:root {
  /* Thème « Naturaliste » (crème des planches) */
  --cal-n-papier: #F4EFE6;  --cal-n-carte: #FFF9F0;  --cal-n-titre: #0F4A42;  --cal-n-accent: #A84B24;
  --cal-n-texte: #2B241D;   --cal-n-texte-2: #675C50; --cal-n-weekend: #EFE2CC; --cal-n-filet: #E6D5BB;
  /* Thème « Épuré » */
  --cal-e-papier: #FFFFFF;  --cal-e-carte: #F7F5F1;  --cal-e-titre: #0A2E29;  --cal-e-accent: #0E7466;
  --cal-e-texte: #1D1C19;   --cal-e-texte-2: #6B6862; --cal-e-weekend: #EFECE6; --cal-e-filet: #E5E1D8;
  /* Pastilles des dates */
  --cal-anniv: #E9A13B;  --cal-adoption: #0E7466;  --cal-soin: #A84B24;  --cal-ferie: #8A867E;
  --cal-ombre: rgba(43, 36, 29, .16);
}

.cal-accroche { margin: 0; color: var(--miel); font-family: 'Caveat', cursive; font-weight: 700; font-size: var(--t-heading); }
.cal-app { display: flex; flex-direction: column; gap: var(--s-4); scroll-margin-top: var(--s-8); }
.cal-layout { display: grid; gap: var(--s-5); align-items: start; }
@media (min-width: 960px) { .cal-layout { grid-template-columns: minmax(0, 26rem) minmax(0, 1fr); } }
.cal-form .calc-field input[type="text"], .cal-form .calc-field input[type="date"], .cal-edition input[type="text"], .cal-edition select, .cal-edition textarea {
  width: 100%; min-width: 0; min-height: var(--cible); padding: var(--s-2) var(--s-3); box-sizing: border-box;
  font: inherit; font-size: var(--t-body); color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon-m);
}
.cal-edition textarea { resize: vertical; }
.cal-form input:focus-visible, .cal-edition :is(input, select, textarea):focus-visible { outline: var(--focus); outline-offset: 2px; }
.cal-hint { margin: 0; font-size: var(--t-caption); line-height: var(--lh-caption); color: var(--texte-2); }
.cal-confiance { color: var(--lagune-fort); font-weight: 600; }
.cal-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.cal-cases { display: flex; flex-direction: column; gap: var(--s-2); }
.cal-case { display: inline-flex; align-items: center; gap: var(--s-2); min-height: var(--cible); font-size: var(--t-small); cursor: pointer; }
.cal-case input { width: 18px; height: 18px; accent-color: var(--lagune); flex: none; }
.cal-app [hidden] { display: none; }

/* Photos ajoutées */
.cal-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.cal-photos:empty { display: none; }
.cal-photos li { position: relative; }
.cal-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--rayon-s); border: 1px solid var(--bord); }
.cal-photos span { position: absolute; left: var(--s-1); top: var(--s-1); padding: 0 var(--s-1); border-radius: var(--rayon-xs); background: var(--carte); font-size: var(--t-caption); font-weight: 700; }
.cal-retirer { position: absolute; right: var(--s-1); top: var(--s-1); width: 28px; height: 28px; padding: 0; border: 1px solid var(--bord); border-radius: 50%; background: var(--carte); color: var(--texte); font: inherit; font-size: var(--t-small); line-height: 1; cursor: pointer; }
.cal-retirer:focus-visible, .cal-pages button:focus-visible, .cal-dates button:focus-visible { outline: var(--focus); outline-offset: 2px; }

/* Dates personnelles */
.cal-dates { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.cal-dates:empty { display: none; }
.cal-dates li { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto; gap: var(--s-2); align-items: center; }
.cal-dates input { width: 100%; min-width: 0; min-height: var(--cible); padding: var(--s-2); box-sizing: border-box; font: inherit; font-size: var(--t-small); color: var(--texte); background: var(--fond); border: 1px solid var(--bord); border-radius: var(--rayon-m); }
.cal-dates button { min-width: var(--cible); min-height: var(--cible); border: 1px solid var(--bord); border-radius: var(--rayon-m); background: var(--carte); color: var(--texte); font: inherit; cursor: pointer; }

/* Aperçu */
.cal-apercu { display: flex; flex-direction: column; gap: var(--s-4); min-width: 0; }
@media (min-width: 960px) { .cal-apercu { position: sticky; top: calc(var(--s-7) + env(safe-area-inset-top, 0px)); } }
.cal-scene { display: flex; justify-content: center; padding: var(--s-4); background: var(--subtil); border-radius: var(--rayon-l); }
.cal-scene canvas { display: block; width: 100%; max-width: 30rem; height: auto; aspect-ratio: 210 / 297; border-radius: var(--rayon-xs); box-shadow: 0 6px 22px var(--cal-ombre); cursor: crosshair; }
.cal-edition { display: grid; gap: var(--s-3); }
.cal-edition[hidden] { display: none; }
.cal-pages { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.cal-pages button { display: flex; flex-direction: column; align-items: center; gap: var(--s-1); width: 100%; padding: var(--s-1); border: 2px solid transparent; border-radius: var(--rayon-s); background: none; color: var(--texte-2); font: inherit; font-size: var(--t-caption); cursor: pointer; }
.cal-pages button[aria-current="true"] { border-color: var(--lagune); color: var(--texte); font-weight: 700; }
.cal-pages canvas { display: block; width: 100%; height: auto; aspect-ratio: 210 / 297; border-radius: var(--rayon-xs); box-shadow: 0 1px 4px var(--cal-ombre); }
.cal-actions { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3); }
.cal-statut { margin: 0; min-height: 1.5em; font-size: var(--t-small); color: var(--lagune-fort); font-weight: 600; }
.cal-actions button[disabled] { opacity: .6; cursor: progress; }

/* Contenus éditoriaux */
.cal-etapes { padding-left: var(--s-5); }
.cal-etapes li { margin-bottom: var(--s-2); }
.cal-races h3 { margin: var(--s-5) 0 var(--s-3); }
.cal-planche img { display: block; width: 100%; height: auto; border-radius: var(--rayon-l); background: var(--fond-illustration); }
.cal-planche { margin: 0; }
.cal-programme dd { font-family: 'Caveat', cursive; font-weight: 700; font-size: var(--t-lead); }

/* Bloc « association » de l'étape 1 : même rythme vertical que les autres champs du fieldset (31/10/2026). */
.cal-form div[data-si="asso"]:not([hidden]) { display: flex; flex-direction: column; gap: var(--s-3); }