:root {
    --bg: #f5f6f8; --card: #fff; --text: #1d2330; --muted: #6a7280; --line: #dfe3ea;
    --accent: #0f3d91; --male: #0f3d91; --female: #c2255c; --radius: 10px;
    --c0: #0f3d91; --c1: #d9480f; --c2: #2b8a3e; --c3: #9c36b5;
    --c4: #c2255c; --c5: #0c8599; --c6: #e67700; --c7: #5c5f66;
}
* { box-sizing: border-box; }
/* L'attribut hidden doit toujours masquer l'élément (même s'il a une classe avec un display) */
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; background: var(--bg); color: var(--text); }
.site-header { background: var(--accent); color: #fff; padding: 1rem clamp(1rem, 4vw, 2rem); }
.site-header h1 { margin: 0; font-size: clamp(1.2rem, 3.5vw, 1.8rem); font-weight: 600; }
/* Contenu sur toute la largeur de la page */
main { width: 100%; padding: 1rem clamp(.75rem, 2vw, 1.5rem) 3rem; }

/* Texte d'introduction en haut de page */
.intro { margin: 0 0 1rem; padding: .75rem 1rem; background: var(--card); border: 1px solid var(--line);
         border-left: 4px solid var(--accent); border-radius: 8px; }

/* Flèche flottante pour remonter en haut de la page (sous les fenêtres d'image, qui démarrent à z-index 1000) */
.to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 900; width: 3rem; height: 3rem; padding: 0;
          border: 0; border-radius: 50%; background: var(--accent); color: #fff; font: inherit; font-size: 1.6rem; line-height: 1;
          cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.to-top:hover { background: #0b2d6b; }
.to-top:focus-visible { outline: 3px solid rgba(15,61,145,.45); outline-offset: 3px; }

/* Pastilles de couleur (zone « Sélection par couleur ») : dégradé de la teinte claire (--pl) à la teinte foncée (--pd),
   en passant par la couleur (--pb). Un peu plus hautes (1.5rem) que les cases à cocher (1.1rem).
   Chaque couleur de COLOR_KEYS (lib.php) a sa classe. */
.pill { display: inline-block; flex: none; width: 2.2rem; height: 1.5rem; border-radius: 999px;
        border: 1px solid rgba(0,0,0,.4);
        background: linear-gradient(90deg, var(--pl, #d0d3d8), var(--pb, #9aa0aa) 50%, var(--pd, #5b606a)); }
.pill-blanc     { --pl: #ffffff; --pb: #f0f0f0; --pd: #cfd2d6; }
.pill-noir      { --pl: #6f7378; --pb: #2a2d31; --pd: #000000; }
.pill-gris      { --pl: #d3d6db; --pb: #8a8f98; --pd: #4a4e55; }
.pill-rouge     { --pl: #f4a3a3; --pb: #d62828; --pd: #7f1212; }
.pill-orange    { --pl: #fcc88a; --pb: #f77f00; --pd: #a14d00; }
.pill-jaune     { --pl: #fbe9a0; --pb: #f2c200; --pd: #a07f00; }
.pill-vert      { --pl: #a9dcb7; --pb: #2b9348; --pd: #155224; }
.pill-bleu      { --pl: #b3c8f2; --pb: #1e56c8; --pd: #0c2b73; }
.pill-violet    { --pl: #d7b8ef; --pb: #7b2cbf; --pd: #3d1260; }
.pill-rose      { --pl: #f9cde0; --pb: #f06595; --pd: #a8305e; }
.pill-marron    { --pl: #c9a27a; --pb: #7f4f24; --pd: #432811; }
.pill-brun      { --pl: #c9a27a; --pb: #7f4f24; --pd: #432811; }
.pill-beige     { --pl: #efe4cf; --pb: #d9c4a0; --pd: #a58f68; }
.pill-turquoise { --pl: #9fe3da; --pb: #17b3a3; --pd: #0a5f57; }
.pill-bordeaux  { --pl: #c77a92; --pb: #7b1e3a; --pd: #3f0d1d; }
.sp-label { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.sp-name { font-style: italic; }
.muted { color: var(--muted); }

/* Filtres */
.filters { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; }
fieldset { border: 1px solid var(--line); border-radius: 8px; margin: 0 0 1rem; padding: .75rem 1rem 1rem; }
legend { font-weight: 600; padding: 0 .4rem; }
.sel-count { font-weight: 400; color: var(--muted); font-size: .9em; }
.sel-count.over { color: var(--c1); font-weight: 600; }

/* Barre « Affichage dynamique » en haut du formulaire : à gauche la case, sa légende et le bouton « Aller au résultat »,
   au centre de la page le bouton « Réinitialiser » */
.dynamic-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .4rem 1rem;
               margin: -1rem -1rem 1rem; padding: .6rem 1rem; background: var(--card);
               border-bottom: 1px solid var(--line); border-radius: var(--radius) var(--radius) 0 0; }
.dynamic-main { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; }
.dynamic-reset { grid-column: 2; }
/* Sur grand écran, la barre reste en haut de l'écran tant qu'on est dans le formulaire
   (le bouton « Aller au résultat » et son clignotement restent visibles quand on coche des cases) */
@media (min-width: 901px) {
    .dynamic-row { position: sticky; top: 0; z-index: 5; }
}

/* Bouton « Aller au résultat » : clignote une fois à chaque case cochée ou décochée */
.btn-goto { padding: .35rem .9rem; min-height: 2.2rem; }
@keyframes blink-once {
    0%   { background: var(--accent); box-shadow: 0 0 0 0 rgba(217,72,15,0); transform: none; }
    35%  { background: var(--c1); box-shadow: 0 0 0 .4rem rgba(217,72,15,.35); transform: scale(1.07); }
    100% { background: var(--accent); box-shadow: 0 0 0 0 rgba(217,72,15,0); transform: none; }
}
.btn-goto.blink { animation: blink-once .7s ease-in-out 1; }
@media (prefers-reduced-motion: reduce) {
    .btn-goto.blink { animation: none; outline: 3px solid var(--c1); outline-offset: 2px; }
}

/* Mise à jour dynamique du résultat en cours */
#results-zone { transition: opacity .15s; }
#results-zone.is-loading { opacity: .55; }

/* Sélection par couleur */
.hint { margin: 0 0 .6rem; font-size: .9rem; }
.hint-nb { margin: .7rem 0 0; color: var(--muted); }
.color-list { display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }

/* Espèces regroupées par famille, puis par premier terme (genre) : zone affichée entièrement */
.family { margin-bottom: .8rem; }
.family-name { margin: .4rem 0 .2rem; padding-bottom: .15rem; font-size: .95rem; font-weight: 600;
               color: var(--accent); border-bottom: 2px solid var(--accent); }
.family-label { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.family-label input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; margin: 0; }
.genus { display: grid; grid-template-columns: 11rem 1fr; gap: .25rem .75rem; align-items: start;
         padding: .3rem 0; border-top: 1px dashed var(--line); }
.family-name + .genus { border-top: 0; }
/* Case + premier terme : coche / décoche toutes les espèces du regroupement */
.genus-label { display: flex; align-items: flex-start; gap: .5rem; padding-top: .3rem; cursor: pointer; }
.genus-label input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; margin: .1rem 0 0; }
.genus-name { font-style: italic; font-weight: 600; color: var(--muted); overflow-wrap: anywhere; }
.genus-species { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: .25rem .75rem; }
.chk { display: flex; align-items: center; gap: .5rem; padding: .25rem .3rem; border-radius: 6px; cursor: pointer; }
.chk:hover { background: rgba(127,127,127,.12); }
.chk input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); flex: none; }

/* Sexe, puis les boutons juste à côté, sur la même ligne */
.filter-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: .75rem 1rem; }
.sex-filter { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; align-items: center; margin: 0; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.btn { font: inherit; display: inline-block; text-decoration: none; cursor: pointer; padding: .55rem 1.1rem; border-radius: 8px;
       border: 1px solid var(--line); background: var(--card); color: var(--text); min-height: 2.6rem; }
.btn:hover { border-color: var(--accent); }
.btn:focus-visible, input:focus-visible, .tab:focus-visible, .view:focus-visible, .float-close:focus-visible { outline: 3px solid rgba(15,61,145,.45); outline-offset: 2px; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-pdf { background: #b42318; border-color: #b42318; color: #fff; }

.sx { font-weight: 700; font-style: normal; }
.sx-m { color: var(--male); }
.sx-f { color: var(--female); }

.alert { padding: .8rem 1rem; border-radius: 8px; margin: 1rem 0; }
.alert-info { background: rgba(15,61,145,.1); border: 1px solid rgba(15,61,145,.35); }
.alert-error { background: rgba(180,35,24,.12); border: 1px solid rgba(180,35,24,.4); }

/* Onglets (une couleur par onglet) */
.results { margin-top: 1.5rem; scroll-margin-top: .5rem; }
#resultats { scroll-margin-top: .5rem; }
.results > .alert { margin-top: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: .35rem; }
.tab { font: inherit; cursor: pointer; border: 2px solid var(--tc); background: var(--card); color: var(--tc);
       padding: .5rem 1rem; border-radius: 8px 8px 0 0; font-weight: 600; }
.tab small { font-weight: 400; opacity: .85; }
.tab[aria-selected="true"] { background: var(--tc); color: #fff; }
.panel { border: 2px solid var(--tc); border-radius: 0 var(--radius) var(--radius) var(--radius); background: var(--card); padding: .5rem; }
.tab-c0 { --tc: var(--c0); } .tab-c1 { --tc: var(--c1); } .tab-c2 { --tc: var(--c2); } .tab-c3 { --tc: var(--c3); }
.tab-c4 { --tc: var(--c4); } .tab-c5 { --tc: var(--c5); } .tab-c6 { --tc: var(--c6); } .tab-c7 { --tc: var(--c7); }

/* Tableau de comparaison : 1 colonne = 1 espèce */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp { border-collapse: collapse; table-layout: fixed; width: 100%; }
.cmp th, .cmp td { border-bottom: 1px solid var(--line); padding: .5rem; vertical-align: top; text-align: center; }
.cmp thead th { background: var(--tc); color: #fff; font-size: .95rem; font-style: italic; }
.cmp .corner, .cmp .rowhead { width: 6.5rem; }
.cmp .rowhead { position: sticky; left: 0; z-index: 2; background: var(--card); text-align: left; font-size: .85rem; border-right: 2px solid var(--tc); }
.cmp .rowhead .sx { font-size: 1.3rem; display: block; line-height: 1; }
.cmp .rh-sex { display: block; font-weight: 700; }
.cmp .rh-pos { display: block; color: var(--muted); font-weight: 400; }
/* largeur minimale d'une colonne : défilement horizontal sur petits écrans */
.cmp { min-width: calc(6.5rem + var(--n, 1) * 9.5rem); }
.cols-1 { --n: 1; } .cols-2 { --n: 2; } .cols-3 { --n: 3; } .cols-4 { --n: 4; }
.cols-5 { --n: 5; } .cols-6 { --n: 6; } .cols-7 { --n: 7; } .cols-8 { --n: 8; }
.shot { margin: 0 0 .75rem; }
/* L'image est dans un bouton (pas de lien vers le fichier) */
.shot .view { display: block; width: 100%; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: zoom-in; }
.shot img { display: block; max-width: 100%; height: auto; margin: 0 auto; border-radius: 6px; background: rgba(127,127,127,.12); }
.shot figcaption { margin-top: .3rem; font-size: .85rem; }
/* Nom d'espèce sous l'image : italique, pas de gras */
.shot figcaption strong { font-weight: 400; font-style: italic; }
.note { display: block; margin-top: .2rem; color: var(--muted); font-size: .8rem; text-align: left; overflow-wrap: anywhere; }
.empty { color: var(--muted); }

/* Protection des images : ni sélection, ni glisser-déposer, ni menu « Enregistrer l'image sous… »
   (pointer-events: none : un clic droit tombe sur le bouton ou la fenêtre, pas sur l'image) */
.shot img, .float-stage img { pointer-events: none; user-select: none; -webkit-user-select: none;
                              -webkit-user-drag: none; -webkit-touch-callout: none; }
@media print {
    .shot img, .float-stage img { visibility: hidden; }
}

/* Fenêtres flottantes d'image : toujours au-dessus de la page, déplaçables et redimensionnables.
   Quand on les redimensionne, seule l'image change de taille : bordures, barre de titre, marges et légende
   gardent une taille constante et restent visibles. */
.float-win { position: fixed; display: flex; flex-direction: column;
             width: min(42rem, 94vw); height: min(32rem, 80vh);
             min-width: 16rem; min-height: 12rem; max-width: 98vw; max-height: 96vh;
             background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
             box-shadow: 0 12px 40px rgba(0,0,0,.4); overflow: hidden; resize: both; }
.float-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: .75rem;
             padding: .4rem .6rem; background: var(--accent); color: #fff; cursor: move; touch-action: none; user-select: none; }
.float-title { min-width: 0; font-size: .95rem; overflow-wrap: anywhere; }
.float-title .sp { font-style: italic; }
.float-close { flex: none; font: inherit; cursor: pointer; padding: .05rem .6rem; border-radius: 6px;
               background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); }
.float-close:hover { background: rgba(255,255,255,.2); }
/* Zone de l'image : elle prend toute la place restante, l'image s'y ajuste en gardant ses proportions */
.float-stage { position: relative; flex: 1 1 0; min-height: 3rem; }
.float-stage img { position: absolute; top: .6rem; left: .6rem; width: calc(100% - 1.2rem); height: calc(100% - .85rem);
                   object-fit: contain; border-radius: 6px; }
/* Légende (sexe, espèce, texte) : toujours visible sous l'image ; un texte très long défile dans son propre cadre */
.float-cap { flex: none; max-height: 45%; overflow: auto; padding: .5rem .6rem .6rem; text-align: left; }
.float-cap em { font-style: italic; }
.float-cap .note { white-space: pre-line; font-size: .9rem; margin-top: .3rem; }

/* Petits écrans : la barre du haut s'empile, « Réinitialiser » reste centré */
@media (max-width: 900px) {
    .dynamic-row { grid-template-columns: 1fr; }
    .dynamic-main, .dynamic-reset { grid-column: 1; }
    .dynamic-reset { justify-self: center; }
}
@media (max-width: 600px) {
    .genus { grid-template-columns: 1fr; }
    .genus-label { padding-top: .1rem; }
    .cmp .corner, .cmp .rowhead { width: 5rem; }
    .cmp { min-width: calc(5rem + var(--n, 1) * 9rem); }
    .actions { width: 100%; }
    .actions .btn { flex: 1 1 100%; text-align: center; }
}