/* vars.css — Tokens du design (couleurs, tailles, URLs SVG) en variables :root.
   Convention CSS : voir CLAUDE.md, section "## CSS". Foyer des tokens uniquement. */

/******COLOR*******
*******************/
:root {
  --color1: #00709f;
  --color1Darker: #12566E;
  --color1-text: #FFFFFF;
  --color1-rgb: 99, 119, 84;
  --color2: #12566E;
  --color2-text: #FFFFFF;
  --color2-rgb: 76, 86, 69;
  --color3: #00709f;
  --color3-text: #FFFFFF;
  --color3-rgb: 154, 115, 88;
  --color4: #FFFFFF;
  --color4-text: #FFFFFF;
  --color5: #C9D300;
  --color5-text: #142850;
  --color5-rgb: 233, 223, 196;
  --bg-btn: #142850;
  --color-bg-light: #edf6fc;
  --text-color: #333333;
  --headerHeight: 70px;
  --buttonRadius: 0;
  /* Arrondi des filtres de la fiche (pickers département / catégorie), repris par tous
     les blocs de la fiche pour qu'ils se lisent comme un même ensemble. */
  --radius-bloc: 5px;
  /* RESPONSIVE FICHE — largeur du panneau filtres + carte de la fiche, en part de la
     largeur de la page (valeur d'origine). Le contenu de la fiche prend le reste. */
  --fiche-panneau-largeur: 32%;
  /* RESPONSIVE FICHE — hauteur réservée au-dessus de la carte de la fiche (titre du
     panneau + deux sélecteurs + espacements, mesure approximative). Sert à plafonner la
     carte pour que tout le panneau collant tienne dans un écran peu haut (768px). À
     ajuster si des filtres sont ajoutés au panneau. */
  --fiche-hauteur-filtres: 230px;
  --headerLogoWidth: 551px;
  --borderColorInput: #4c5645;
  --svg-cynegetique: url('../icon/cynegetique.svg');
  --svg-agricole: url('../icon/agricole.svg');
  --svg-alerte: url('../icon/alerte.svg');
  --svg-climat: url('../icon/climat.svg');
  --svg-diagnostic: url('../icon/diagnostic.svg');
  --svg-ice: url('../icon/ice.svg');
  --svg-sylvicole: url('../icon/sylvicole.svg');
  --svg-etat: url('../icon/etat1.svg');
  --svg-pression: url('../icon/pression.svg');
  --svg-risque: url('../icon/risque.svg');
  --svg-eaux_superficielles: url('../icon/eaux_superficielles.svg');
  --svg-eaux_souterraines: url('../icon/eaux_souterraines.svg');
  --svg-bv: url('../icon/bv_aelb.svg');
  --svg-riviere: url('../icon/riviere.svg');
  --svg-etang: url('../icon/etang.svg');
  --cartoBottomPanelHeight: 510px;
}

.icon-svg-antea {
  background-color: var(--color1)
}

.icon-svg-antea.bv_aelb {
  -webkit-mask: var(--svg-bv);
  mask: var(--svg-bv);
}

.icon-svg-antea.etat {
  -webkit-mask: var(--svg-etat);
  mask: var(--svg-etat);
}

.icon-svg-antea.pression {
  -webkit-mask: var(--svg-pression);
  mask: var(--svg-pression);
}

.icon-svg-antea.risque {
  -webkit-mask: var(--svg-risque);
  mask: var(--svg-risque);
}

.icon-svg-antea.eaux_superficielles {
  -webkit-mask: var(--svg-eaux_superficielles);
  mask: var(--svg-eaux_superficielles);
}

.icon-svg-antea.eaux_souterraines {
  -webkit-mask: var(--svg-eaux_souterraines);
  mask: var(--svg-eaux_souterraines);
}

.icon-svg-antea.cynegetique {
  -webkit-mask: var(--svg-cynegetique);
  mask: var(--svg-cynegetique);
}



.icon-svg-antea.agricole {
  -webkit-mask: var(--svg-agricole);
  mask: var(--svg-agricole);
}

.icon-svg-antea.alerte {
  -webkit-mask: var(--svg-alerte);
  mask: var(--svg-alerte);
}

.icon-svg-antea.climat {
  -webkit-mask: var(--svg-climat);
  mask: var(--svg-climat);
}

.icon-svg-antea.diagnostic {
  -webkit-mask: var(--svg-diagnostic);
  mask: var(--svg-diagnostic);
}

.icon-svg-antea.ice {
  -webkit-mask: var(--svg-ice);
  mask: var(--svg-ice);
}

.icon-svg-antea.sylvicole {
  -webkit-mask: var(--svg-sylvicole);
  mask: var(--svg-sylvicole);
}

/* Pictos de la fiche masse d'eau : riviere (pression morphologie, code_picto
   « svg:riviere » du referentiel) et etang (titre d'une masse d'eau plan d'eau, voir
   picto_massedeau()). Dessins plus larges que hauts : contain les garde entiers et
   centres dans leur boite, quelle que soit sa taille. */
.icon-svg-antea.riviere {
  -webkit-mask: var(--svg-riviere) center / contain no-repeat;
  mask: var(--svg-riviere) center / contain no-repeat;
}

.icon-svg-antea.etang {
  -webkit-mask: var(--svg-etang) center / contain no-repeat;
  mask: var(--svg-etang) center / contain no-repeat;
}