/*
 * Briques réutilisables, nommées en BEM (bloc__element--modificateur).
 */

/* ---------- Carte (surface) ---------- */

.carte {
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
    padding: var(--espace-6);
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    box-shadow: var(--ombre);
}

/* ---------- En-tête de page ---------- */

.entete-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-4);
}

/* ---------- Boutons ---------- */

.bouton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--espace-2);
    min-height: 2.75rem; /* cible tactile confortable */
    padding: var(--espace-2) var(--espace-4);
    border: 1px solid transparent;
    border-radius: var(--rayon);
    font: inherit;
    font-weight: 600;
    text-decoration: none; /* un lien peut porter la classe .bouton */
    cursor: pointer;
}

.bouton--principal {
    background: var(--couleur-primaire);
    color: var(--creme);
}

.bouton--principal:hover {
    background: var(--couleur-primaire-survol);
}

.bouton-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--rayon);
    background: none;
    color: inherit;
    font-size: 1.375rem;
    cursor: pointer;
}

/* ---------- Champs de formulaire ---------- */

.champ {
    display: flex;
    flex-direction: column;
    gap: var(--espace-1);
}

.champ__libelle {
    font-size: var(--taille-petit);
    font-weight: 600;
    color: var(--couleur-texte-doux);
}

.champ__saisie {
    min-height: 2.75rem;
    padding: var(--espace-2) var(--espace-3);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background: #fff;
    color: var(--couleur-texte);
    font: inherit;
}

.champ__saisie:focus-visible {
    border-color: var(--couleur-focus);
}

.case {
    display: flex;
    align-items: center;
    gap: var(--espace-2);
    font-size: var(--taille-petit);
}

.case input {
    width: 1.125rem;
    height: 1.125rem;
    accent-color: var(--couleur-primaire);
}

/* ---------- Alertes ---------- */

.alerte {
    padding: var(--espace-3) var(--espace-4);
    border-radius: var(--rayon);
    font-size: var(--taille-petit);
}

.alerte--erreur {
    background: var(--rouge-100);
    color: var(--rouge-700);
}

/* ---------- Recherche ---------- */

.recherche {
    display: flex;
    gap: var(--espace-2);
}

.recherche__saisie {
    flex: 1;
    min-width: 0;
}

/* ---------- Liste ---------- */

/* S'emploie avec .carte (ul.liste.carte) : .carte fournit le rembourrage. */
.liste {
    gap: 0;
    margin: 0;
    list-style: none;
}

.liste > li + li {
    border-top: 1px solid var(--couleur-bordure);
}

/* ---------- Espèce (ligne de liste) ---------- */

.liste > li {
    padding-block: var(--espace-3);
}

.liste > li:first-child {
    padding-top: 0;
}

.liste > li:last-child {
    padding-bottom: 0;
}

.espece {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: var(--espace-2);
}

.espece__nom {
    font-weight: 600;
}

.espece__latin {
    color: var(--couleur-texte-doux);
}

.espece__detail {
    flex-basis: 100%;
    font-size: var(--taille-petit);
    color: var(--couleur-texte-doux);
}

/* ---------- État vide ---------- */

.vide {
    padding: var(--espace-6);
    border: 1px dashed var(--brun-200);
    border-radius: var(--rayon);
    color: var(--couleur-texte-doux);
    text-align: center;
}

/* ---------- Formulaire ---------- */

.formulaire {
    max-width: 40rem;
}

.champ__aide {
    margin: 0;
    font-size: var(--taille-petit);
    color: var(--couleur-texte-doux);
}

.champ__erreur {
    margin: 0;
    font-size: var(--taille-petit);
    color: var(--rouge-700);
}

.champ--erreur .champ__saisie {
    border-color: var(--rouge-700);
}

textarea.champ__saisie {
    resize: vertical;
}

.bouton--secondaire {
    background: var(--vert-100);
    color: var(--vert-800);
}

.bouton--secondaire:hover {
    background: var(--vert-200);
}

.bouton--danger {
    background: var(--rouge-700);
    color: var(--creme);
}

.bouton--danger:hover {
    filter: brightness(0.9);
}

.alerte--avertissement {
    background: var(--brun-200);
    color: var(--brun-900);
}

.alerte--succes {
    background: var(--vert-100);
    color: var(--vert-800);
}

/* ---------- Choix dans une liste (espèce à choisir…) ---------- */

.choix {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espace-3);
}

/* ---------- Plants d'une espèce du jardin ---------- */

.plants {
    display: flex;
    flex-direction: column;
    gap: var(--espace-2);
    margin: var(--espace-2) 0 0;
    padding: 0;
    list-style: none;
}

.plant {
    padding-left: var(--espace-3);
    border-left: 3px solid var(--vert-200);
}

.plant__vignette {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: var(--rayon);
    object-fit: cover;
}

.plant__detail {
    font-size: var(--taille-petit);
    color: var(--couleur-texte-doux);
}

/* ---------- Saisie par l'IA en tête de formulaire ---------- */

.formulaire__ia {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--espace-3);
    padding-bottom: var(--espace-4);
    border-bottom: 1px solid var(--couleur-bordure);
}

.formulaire__ia .champ {
    align-self: stretch;
}

.bouton[aria-busy="true"] {
    opacity: 0.7;
    cursor: progress;
}

/* ---------- Proposition de l'IA (identification) ---------- */

.proposition__photos {
    display: flex;
    gap: var(--espace-2);
    overflow-x: auto;
}

.proposition__photo {
    width: 8rem;
    height: 8rem;
    border-radius: var(--rayon);
    object-fit: cover;
    flex-shrink: 0;
}

.proposition__explication {
    padding: var(--espace-3) var(--espace-4);
    border-left: 3px solid var(--brun-500);
    background: var(--brun-100);
    border-radius: 0 var(--rayon) var(--rayon) 0;
}

.proposition__candidats {
    font-size: var(--taille-petit);
    color: var(--couleur-texte-doux);
}

.proposition__candidats summary {
    cursor: pointer;
}

/* ---------- Point d'un plant sur la carte (L.divIcon) ---------- */

/* Symbole d'un plant vu de dessus (carte/symboles.js), à la taille de son envergure. */
.marqueur-plant {
    background: none;
    border: none;
    cursor: pointer;
}

/* ---------- Bulle d'un plant (popup Leaflet) ---------- */

.bulle {
    display: flex;
    flex-direction: column;
    gap: var(--espace-1);
    min-width: 10rem;
    font-family: var(--police);
}

.bulle__photo {
    width: 100%;
    max-height: 8rem;
    border-radius: var(--rayon);
    object-fit: cover;
}

/* Leaflet colore tous les liens de la carte (.leaflet-container a) : le bouton garde ses couleurs. */
.leaflet-container .bulle__ajout {
    color: var(--creme);
}

.bulle__espece {
    font-size: var(--taille-petit);
    color: var(--couleur-texte-doux);
}

/* ---------- Bouton à l'allure de lien ---------- */

.bouton-lien {
    padding: 0;
    border: 0;
    background: none;
    color: var(--couleur-primaire);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Page d'un plant ---------- */

.galerie {
    display: flex;
    gap: var(--espace-2);
    overflow-x: auto;
}

.galerie__photo {
    width: 10rem;
    height: 10rem;
    border-radius: var(--rayon);
    object-fit: cover;
}

.fiche {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--espace-2) var(--espace-4);
    margin: 0;
}

.fiche dt {
    font-weight: 600;
    color: var(--couleur-texte-doux);
}

.fiche dd {
    margin: 0;
}

.plant__lien {
    display: flex;
    align-items: center;
    gap: var(--espace-3);
    color: inherit;
    text-decoration: none;
}

.plant__lien:hover .plant__nom {
    text-decoration: underline;
}

/* ---------- Dialogue de confirmation ---------- */

.dialogue {
    max-width: min(28rem, calc(100vw - 2 * var(--espace-4)));
    padding: var(--espace-6);
    border: none;
    border-radius: var(--rayon);
    background: var(--couleur-surface);
    color: var(--couleur-texte);
}

.dialogue::backdrop {
    background: rgb(0 0 0 / 0.4);
}

.dialogue__titre {
    margin-top: 0;
    font-size: 1.25rem;
}

.dialogue__actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: var(--espace-2);
}

/* ---------- Plan du jardin (formes dessinées sur la carte) ---------- */

/*
 * Style plan de paysagiste : chaque type a sa texture (motifs SVG de carte/index.html.twig).
 * --opacite-plan suit le curseur de la photo : plus la photo est visible, plus le plan s'efface.
 */
:root {
    --plan-contour: var(--brun-900);
    --plan-pelouse: #a8c98a;
    --plan-allee: #d8c6a4;
    --plan-terrasse: #c4b195;
    --plan-potager: #9b7652;
    --plan-massif: #6f9a55;
    --plan-eau: #7fb2d6;
    --plan-batiment: #b8a18a;
}

.carte-jardin .plan {
    stroke: var(--brun-700);
    stroke-width: 1.5;
    fill-opacity: var(--opacite-plan, 1);
}

/*
 * Hors du mode plan, toucher une forme revient à toucher la carte (ajouter une plante dans un
 * massif). Sélecteurs calqués sur ceux de Leaflet (.leaflet-pane > svg path.leaflet-interactive)
 * pour l'emporter.
 */
.carte-jardin .leaflet-pane > svg path.plan {
    pointer-events: none;
}

.carte-jardin--plan:not(.carte-jardin--trace) .leaflet-pane > svg path.plan {
    pointer-events: auto;
    cursor: pointer;
}

.carte-jardin .plan--contour {
    fill: none;
    stroke: var(--plan-contour);
    stroke-width: 3;
}

.carte-jardin .plan--pelouse { fill: url(#motif-pelouse); stroke: none; }
.carte-jardin .plan--allee { fill: url(#motif-allee); stroke: #8a7155; }
.carte-jardin .plan--terrasse { fill: url(#motif-terrasse); stroke: #8a7155; }
.carte-jardin .plan--potager { fill: url(#motif-potager); }
.carte-jardin .plan--massif { fill: url(#motif-massif); }
.carte-jardin .plan--eau { fill: url(#motif-eau); stroke: #4f7f9f; }
.carte-jardin .plan--batiment { fill: url(#motif-batiment); stroke: var(--brun-900); stroke-width: 2; filter: url(#ombre-batiment); }

.carte-jardin .plan--apercu {
    stroke-dasharray: 6 4;
    fill-opacity: 0.5;
}

.plan__sommet {
    fill: var(--creme);
    fill-opacity: 1;
    stroke: var(--brun-900);
    stroke-width: 2;
}

.plan__poignee {
    border: 2px solid var(--brun-900);
    border-radius: 3px;
    background: var(--creme);
}

.leaflet-tooltip.plan__etiquette {
    padding: 0 var(--espace-1);
    border: none;
    background: rgb(246 240 228 / 0.8);
    box-shadow: none;
    color: var(--brun-900);
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
}

.bouton-palette {
    display: inline-flex;
    align-items: center;
    gap: var(--espace-1);
    min-height: 2.25rem;
    padding: var(--espace-1) var(--espace-2);
    border: 1px solid var(--couleur-bordure);
    border-radius: var(--rayon);
    background: var(--creme);
    color: var(--couleur-texte);
    font: inherit;
    font-size: var(--taille-petit);
    cursor: pointer;
}

.bouton-palette::before {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    border-radius: 3px;
    background: var(--teinte);
}

.bouton-palette--contour::before { background: none; border: 2px solid var(--plan-contour); }
.bouton-palette--pelouse { --teinte: var(--plan-pelouse); }
.bouton-palette--allee { --teinte: var(--plan-allee); }
.bouton-palette--terrasse { --teinte: var(--plan-terrasse); }
.bouton-palette--potager { --teinte: var(--plan-potager); }
.bouton-palette--massif { --teinte: var(--plan-massif); }
.bouton-palette--eau { --teinte: var(--plan-eau); }
.bouton-palette--batiment { --teinte: var(--plan-batiment); }

.bulle-plan {
    min-width: 14rem;
}

.bulle-plan__nom {
    display: flex;
    gap: var(--espace-1);
}

.bulle-plan__nom .champ__saisie {
    flex: 1;
    min-width: 0;
}

/* ---------- Liens d'en-tête de page ---------- */

.entete-page__liens {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-4);
}

/* ---------- Fiches d'entretien ---------- */

.etat-fiche {
    flex-shrink: 0;
    padding: var(--espace-1) var(--espace-3);
    border-radius: 999px;
    font-size: var(--taille-petit);
    font-weight: 600;
    background: var(--brun-200);
    color: var(--brun-900);
}

.etat-fiche--validee {
    background: var(--vert-100);
    color: var(--vert-800);
}

.etat-fiche--echec {
    background: var(--rouge-100);
    color: var(--rouge-700);
}

.fiche-entretien__taches {
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fiche-entretien__manques {
    margin: 0;
    padding-left: var(--espace-6);
}

.fiche-entretien__actions,
.tache__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-3);
}

.fiche-entretien__trace,
.tache__confiance {
    margin: 0;
    font-size: var(--taille-petit);
    color: var(--couleur-texte-doux);
}

.fiche-entretien__precisions > summary {
    font-weight: 600;
    cursor: pointer;
}

.tache {
    gap: var(--espace-2);
}

.tache__entete {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--espace-2);
    font-size: var(--taille-petit);
}

.tache__nature {
    font-weight: 600;
    color: var(--couleur-primaire);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.tache__periode {
    color: var(--couleur-texte-doux);
}

.tache__titre,
.tache__methode,
.tache__conditions {
    margin: 0;
}

.formulaire__ligne {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: var(--espace-3);
}

/* ---------- Assistant ---------- */

.conversation-lien {
    display: flex;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

.conversation-lien:hover .conversation-lien__titre {
    text-decoration: underline;
}

.conversation-lien__titre {
    font-weight: 600;
}

.conversation-lien__detail {
    font-size: var(--taille-petit);
    color: var(--couleur-texte-doux);
}

.discussion {
    display: flex;
    flex-direction: column;
    gap: var(--espace-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.message {
    display: flex;
    flex-direction: column;
    gap: var(--espace-3);
    max-width: 46rem;
    padding: var(--espace-4);
    border-radius: var(--rayon);
}

.message--jardinier {
    align-self: flex-end;
    background: var(--vert-100);
}

.message--ia {
    align-self: flex-start;
    background: var(--couleur-surface);
    border: 1px solid var(--couleur-bordure);
}

.message__texte {
    margin: 0;
}

.message__photos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espace-2);
}

.message__photo {
    width: 6rem;
    height: 6rem;
    border-radius: var(--rayon);
    object-fit: cover;
}

.proposition-tache {
    display: flex;
    flex-direction: column;
    gap: var(--espace-2);
    padding: var(--espace-3);
    border-left: 3px solid var(--couleur-primaire);
    background: var(--creme);
}

.proposition-tache p {
    margin: 0;
}

.proposition-tache__titre {
    font-weight: 600;
    color: var(--couleur-primaire);
}

.proposition-tache__etat {
    font-size: var(--taille-petit);
    color: var(--couleur-texte-doux);
}