:root{
    /*DIMENSIONS*/

    --full-width: 100%;
    --full-height: 100%;

    /*COLOR SET*/

    --accent-color-orange: #D66F27;
    --accent-color-purple: #865AA3;
    --dark-color: #4B442E;
    --medium-color: #736746;
    --bright-color: #D8CFB6;
    --brightest-color: #FDF9F5;

    /*ÉCHELLES (recalculées par update_layout dans main.js)*/

    /*Unité du bureau central : 1dvh, réduite quand la largeur manque*/
    --u: 1dvh;
    /*Échelle des panels de plantes (1 = 305px de large)*/
    --pk: 1;
    /*Progression de la largeur d'écran (0 = 1280px, 1 = 1920px)*/
    --wk: 1;
}

/*GENERIC CLASSES*/

h1, h2, h3, h4, h5, h6{
    font-family: Literata;
    font-style:italic;
    font-weight: normal;
}

.text-bright{
    color: var(--brightest-color);
}

.text-dark{
    color: var(--dark-color);
}

.full{
    width: 100%;
    height:100%;
}

.full-width{
    width:100%;
}

.full-height{
    height:100%;
}

.flex-col{
    display:flex;
    flex-direction: column;
}

.flex-row{
    display: flex;
    flex-direction: row;
}

.flex-1{
    flex:1;
}

.flex-4{
    flex:4;
}

.flex-5{
    flex:5;
}

.align-end{
    align-items: end;
}

.align-center{
    align-items: center;
}

.no-margin{
    margin:0;
}

.grid-1fr1fr{
    /*minmax(0, 1fr) : une image ne peut pas élargir sa colonne au-delà du panel*/
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    display:grid;
    gap:calc(40px * var(--pk));
    max-height:calc(140px * var(--pk));
}

/*TYPOGRAPHY
----------------------------*/

/*Libre Baskerville*/

@font-face {
    font-family: 'Libre Baskerville';
    src: url('../assets/fonts/LibreBaskerville-Regular.woff2') format('woff2'),
        url('../assets/fonts/LibreBaskerville-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('../assets/fonts/LibreBaskerville-Italic.woff2') format('woff2'),
        url('../assets/fonts/LibreBaskerville-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Libre Baskerville';
    src: url('../assets/fonts/LibreBaskerville-Bold.woff2') format('woff2'),
        url('../assets/fonts/LibreBaskerville-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

/*Literata*/

@font-face {
    font-family: 'Literata';
    src: url('../assets/fonts/Literata-Italic.woff2') format('woff2'),
        url('../assets/fonts/Literata-Italic.woff') format('woff');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

/*Belmonte*/

@font-face {
    font-family: 'Belmonte';
    src: url('../assets/fonts/belmonte-ballpoint-print.woff2') format('woff2'),
        url('../assets/fonts/belmonte-ballpoint-print.woff') format('woff')
}

.labor{
    font-size: 14px;
    line-height: 1.5;
    font-family: Libre Baskerville;
}

/*INTRODUCTION*/

/*Maquette PAGE_INTRO_1.png (1920 × 1080) : tailles de la maquette à 1920px, réduites jusqu'à 1280px*/
#intro{
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    box-sizing: border-box;
    background-color: white;
    color: var(--dark-color);
    text-align: center;
    user-select: none;
}

#logo-bar{
    width:70%;
    margin-top: 40px;
}

#intro.closed{
    display: none;
}

#intro-logo{
    width: clamp(260px, calc(260px + 20 * (100vw - 1280px) / 640), 280px);
    margin-bottom: clamp(80px, calc(80px + 50 * (100vw - 1280px) / 640), 130px);
}

#intro-text{
    max-width: clamp(560px, calc(560px + 230 * (100vw - 1280px) / 640), 790px);
    font-family: Libre Baskerville;
    /*16px à 360px, 18px à partir de 1280px*/
    font-size: clamp(16px, calc(16px + 2 * (100vw - 360px) / 920), 18px);
    line-height: 1.6;
    /*Lignes de longueurs proches : pas de mot seul en fin de paragraphe*/
    text-wrap: balance;
}

#intro-text p{
    margin: 0 0 1em;
}

#intro-start{
    margin-top: clamp(50px, calc(50px + 20 * (100vw - 1280px) / 640), 70px);
    cursor: pointer;
}

#intro-book{
    display: block;
    width: clamp(100px, calc(100px + 10 * (100vw - 1280px) / 640), 110px);
    margin: 0 auto 20px;
}

#intro-start p{
    margin: 0;
    font-family: Literata;
    font-style: italic;
    font-size: 20px;
    line-height: 1.2;
}

/*APP*/

#app{
    width:100%;
    height:100%;
    flex-direction: column;
    /*clip et non hidden : hidden reste défilable par programme (focus d'un texte qui dépasse)*/
    overflow:clip;
    user-select:none;
}

#content{
    flex: 17;
    min-width: 0;
    min-height: 0;
    position:relative;
}

/*NAVIGATION*/

#nav{
    flex: 2.8;
    background-color:var(--brightest-color); 
}

#nav-left{
    gap:62px;
}

#nav-right{
    justify-content: end;
    gap:62px;
}

#nav-padding{
    align-items: end;
    padding: 0px 31px 24px 31px;
    box-sizing: border-box;
}

#logo{
    width:226px;
}

.menu-page-button p:after{
    content:"";
    border: 1.8px solid var(--accent-color-orange);
    width:100%;
    display:block;
    margin-top:7px;
}

.menu-page-button{
    color:var(--accent-color-orange);
    font-size: clamp(20px, calc(20px + 6 * (100vw - 1280px) / 640), 26px);
}

.menu-download-button p:after, .menu-load-button p:after{
    content:"";
    border: 1.8px solid var(--accent-color-purple);
    width:100%;
    display:block;
    margin-top:7px;
}

.menu-download-button, .menu-load-button{
    color:var(--accent-color-purple);
    /*Le bouton de téléchargement est un lien vers le PDF*/
    text-decoration: none;
    font-size: 20px;
}

.menu-element{
    font-family: Literata;
    font-style: italic;
    cursor:pointer;
}

/*HERBIER*/

#left, #right{
    flex:1.2;
    background-color:var(--medium-color);
}

.items-wrapper-padding{
    padding-left: 31px;
    padding-right:31px;
    padding-bottom:77px;
    padding-top: 38px;
    box-sizing: border-box;
}

.items-wrapper-padding h2{
    margin: 0;
}

 #left-help-text p{
    margin-bottom:0;
 }

#right-help-text p{
    margin-top:0;
}

.items-help-text{
    height: 149px;
}

.items-content-wrapper{
    height: calc(100% - 149px);
    gap:33px;
}

#right-content-wrapper{
    justify-content: end;
}

.items-container{
    position:relative;
    flex:1;
    width:auto;
    z-index:1;
}

.items-overflow{
    position:absolute;
    width: calc(305px * var(--pk));
    height:100%;
    overflow-y: auto;
    flex-direction: column;
    /*Moitié de l'écart entre items (--item-gap, calculé par size_items dans main.js) :
    le bas tourné de l'item précédent reste hors champ*/
    padding-top:calc(var(--item-gap, 33px) / 2);
    padding-bottom:33px;
    box-sizing:border-box;
    scroll-snap-type: y mandatory;
    /*Même valeur que padding-top : la position de repos est déjà un point de snap,
    sinon le panel se recale (saute) dès qu'un item déplié le rend scrollable*/
    scroll-padding-top: calc(var(--item-gap, 33px) / 2);
    /*Barre native masquée (le défilement reste actif)*/
    scrollbar-width: none;
}

.items-overflow::-webkit-scrollbar{
    display: none;
}

#right-content-overflow{
    right:0;
}

#left-content-overflow{
    left:0;
}

.item-wrapper{
    /*Hauteur du titre : suit l'échelle mais garde de quoi loger ses tailles de texte minimales*/
    --title-height: max(72px, calc(80px * var(--pk)));
    width:calc(300px * var(--pk));
    padding-left:2px;
    /*188px de contenu à l'échelle + le titre*/
    --collapsed-height: calc(188px * var(--pk) + var(--title-height));
    max-height: var(--collapsed-height);
    height:var(--collapsed-height);
    /*Écart calculé pour que deux items exactement tiennent dans la hauteur visible de la colonne*/
    margin-bottom:var(--item-gap, 33px);
    /*Sur l'item et non sur son titre incliné : les deux colonnes se calent à la même hauteur*/
    scroll-snap-align: start;
    transition : max-height .8s cubic-bezier(0.67, 0, 0, 1.05), height .8s cubic-bezier(0.67, 0, 0, 1.05);
}

editor-block{
    position:absolute;
    top:0;
    left:0;
    padding:10px;
    box-sizing: border-box;
    transform-origin: center;
    z-index:90;
    cursor: url("../assets/images/herbier/ui/MAIN_cursor.png") 14 17, grab;
}

.content-block{
    height: 155px;
}

.text-block{
    width: 240px;
    font-family: Libre Baskerville;
    font-weight:bold;
    padding:20px;
    box-sizing: border-box;
    font-size:12px;
    color: var(--medium-color);
}

.write-block{
    height: auto;
}

.write-edit-button{
    position:absolute;
    /*16px affichés quelle que soit l'échelle de la page (la page est réduite de --page-scale) ;
    hauteur et décalage en em pour suivre le texte*/
    font-size: calc(14px / var(--page-scale, 1));
    bottom: calc(-1.5em - 14px);
    left:0;
    width:max-content;
    height:1.5em;
    display:flex;
    padding:6px;
    gap:9px;
    align-items: center;
    cursor:pointer;
}

.write-edit-button p{
    font-family: Libre Baskerville;
    color: var(--brightest-color);
    font-size: inherit;
    margin:0;
}

.write-edit-button img{
    width:auto;
    height: 100%;
    rotate: -30deg;
}

.write-edit-button[data-selected='true']{
    background-color: var(--accent-color-purple);
}

.write-edit-button[data-selected='false']{
    background-color: var(--accent-color-orange);
}

.editor-block-image, editor-block img{
    width:100%;
    height:100%;
    object-fit: contain;
}

.editor-block-ui{
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    border : 2px solid var(--accent-color-purple);
}

.resize-knob{
    width:12.5px;
    rotate: 135deg;
    position:absolute;
    bottom: -24px;
    right: -13px;
}

.rotate-knob{
    width:40px;
    left: calc(50% - 20px);
    position:absolute;
    top: -55px;
}

/*Déplié : la place de deux items repliés et de leur écart, l'item suivant reste hors champ*/
.collection-expanded{
    max-height: calc(2 * var(--collapsed-height) + var(--item-gap, 33px));
    height:calc(2 * var(--collapsed-height) + var(--item-gap, 33px));
}

/*Le contenu déplié tient dans le panel (lignes de .item-dropdown en fr) : pas de défilement*/
.collection-expanded .item-children-wrapper{
    overflow: hidden;
}

.item{
    width:100%;
    height:100%;
}

.picked-item{
    position:absolute;
    top:0;
    left:0;
    z-index: 3;
}

.picked-item img{
    height: 100%;
  object-fit: contain;
  width: 100%;
}

herbier-item{
    display:block;
}

.item-title{
    height:var(--title-height);
    flex-shrink: 0;
    width:99%;
    background-color: var(--dark-color);
    box-sizing: border-box;
    color:var(--brightest-color);
    display:flex;
    align-items: center;
    padding-left:max(12px, calc(15px * var(--pk)));
    box-sizing: border-box;
}

.item-title-plant{
    font-size: max(18px, calc(20px * var(--pk)));
    margin:0;
    font-family: Literata;
}

.item-title-country{
    margin:0;
    font-size:16px;
    font-family: Libre Baskerville;
}

.item-wrapper:nth-of-type(2n+1) .item .item-title{
    rotate: -4deg;
}

.item-wrapper:nth-of-type(2n) .item .item-title{
    rotate: 4deg;
}

.item-wrapper:nth-of-type(2n) .item .item-children-wrapper{
    rotate: -1deg;
}

.item-wrapper:nth-of-type(2n+1) .item .item-children-wrapper{
    rotate: 1deg;
}

.item-children-wrapper{
    width:100%;
    flex:1;
    min-height:0;
    background-color: var(--brightest-color);
    z-index:2;
    padding:calc(23px * var(--pk));
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: calc(20px * var(--pk));
}

/*Glisser en cours (classe posée sur <html> par main.js) : la main partout*/
.dragging-block,
.dragging-block *{
    cursor: url("../assets/images/herbier/ui/MAIN_cursor.png") 14 17, grab !important;
}

.item-children{
    /*Main : copie réduite de MAIN.png (28px), point actif au centre de la paume*/
    cursor: url("../assets/images/herbier/ui/MAIN_cursor.png") 14 17, grab;
}

.item-collapsed{
    display:none !important;
}

.item-dropdown{
    display:grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /*Occupe la hauteur restante du panel, partagée à parts égales entre les lignes :
    blocs d'images et extrait de texte ont la même hauteur, sans dépasser du panel*/
    flex:1;
    min-height:0;
    grid-auto-rows: minmax(0, 1fr);
    /*Écart vertical réduit : laisse aux blocs de quoi loger 3 lignes de texte à 1920px*/
    gap:calc(20px * var(--pk)) calc(40px * var(--pk));
}

/*Images du panel déplié : dimensionnées par la largeur de la colonne, hauteur au ratio*/
.item-dropdown > panel-block{
    min-width:0;
}

.item-dropdown .item-children img{
    /*Calée sur la largeur, sauf si elle est trop haute : elle est alors calée sur la hauteur du bloc.
    width auto : la boîte de l'image garde son ratio (c'est aussi la taille du bloc déposé)*/
    width:auto;
    max-width:100%;
    height:auto;
    max-height:100%;
}

.item-dropdown > panel-block:has(> .editor-block-text){
    grid-column: span 2;
}

/*Texte du panel : "..." quand il dépasse (nombre de lignes fixé par clamp_panel_texts)*/
.item-dropdown .editor-block-text{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.editor-block-text{
    max-width:340px;
    font-family: Libre Baskerville;
    font-weight: normal;
    color: var(--medium-color);
    font-size: 12px;
    line-height: 1.48;
}

.item-dropdown p{
    width:100%;
    margin:0;
    font-family: Libre Baskerville;
    font-weight:bold;
    /*12px à 1280px, 13px à 1920px*/
    font-size:clamp(12px, calc(12px + 1 * (100vw - 1280px) / 640), 13px);
    color: var(--medium-color);
    user-select:none;
}

.item-children img{
    object-fit:contain;
    width:100%;
    height:100%;
    pointer-events: none;
}

.cross{
    width:230px;
    left:50%;
    top:50%;
    translate:-50% -50%;
    position:absolute;
    height:auto;
    visibility:hidden;
    pointer-events: none;
}

.current-page{
    visibility: visible !important;
}

.editor-user-text{
    position:relative;
    z-index: 2;
    height:auto;
    resize:none;
    /*La hauteur suit le texte (voir main.js) : pas de barre de défilement*/
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    border: none;
    font-family: Belmonte;
    font-size:20px;
    color: var(--medium-color);
    background-color: transparent;
    /*Dimensions fixées (largeur par défaut d'un textarea de 20 colonnes dans Firefox) : sinon chaque navigateur
    calcule sa propre largeur, son padding et son interligne, et le texte se coule différemment*/
    box-sizing: border-box;
    /*block : un textarea en ligne laisse sous lui un espace (descendante) différent selon le navigateur*/
    display: block;
    width: 205px;
    padding: 2px;
    margin: 0;
    line-height: 1.25;
    /*Le textarea n'hérite pas de text-rendering (feuille de style du navigateur) : voir editor-page*/
    text-rendering: geometricPrecision;
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/*Contenu des planches (éditeur et export) : largeur des lettres sans arrondi au pixel.
Chrome arrondit par défaut et fait tenir plus de mots par ligne que Firefox et Safari : un herbier
créé dans un navigateur et relu dans un autre ne passerait pas à la ligne aux mêmes endroits*/
editor-page, #pdf{
    text-rendering: geometricPrecision;
}

/*Export : le textarea est remplacé par ce bloc (html2canvas dessine un textarea sur une seule ligne, coupé).
Mêmes réglages de coulée que .editor-user-text ; taille, police et padding recopiés au ratio par render_printable*/
.printable-write-text{
    box-sizing: border-box;
    font-family: Belmonte;
    color: var(--medium-color);
    white-space: pre-wrap;
    overflow-wrap: break-word;
}

/*20px affichés quelle que soit l'échelle de la page (la page est réduite de --page-scale)*/
.editor-user-text::placeholder{
    font-size: calc(20px / var(--page-scale, 1));
    color: var(--medium-color);
    opacity: 1;
}

#center{
    flex: 5;
    min-width: 0;
    min-height: 0;
    background-color: var(--bright-color);
    position: relative;
}

#write{
    width:43px;
    position:absolute;
    top:-10px;
    left: 3dvw;
    cursor:pointer;
    z-index:98;
}

#write > img:nth-child(2) {
  position: relative;
  top: -40px;
  left: 10px;
}

#end-button{
    max-width:calc(12 * var(--u));
    position:relative;
    cursor:pointer;
}

#end-button:hover > #herbier-closed{
    visibility: visible;
}

#end-button:hover > #herbier-open{
    visibility: hidden;
}

#herbier-closed{
    position:absolute;
    left:0;
    top:0;
    height:100%;
    visibility:hidden;
}

#herbier-open{
    visibility: visible;
}

.arrow{
    width:calc(27 * var(--u));
    position:relative;
    display: flex;
    cursor:pointer;
}

.site-page{
    background-color: var(--brightest-color);
    width:100%;
    height:100%;
    z-index:99;
    padding:30px;
    box-sizing: border-box;
    color: var(--dark-color);
    display:none;
    flex-direction: column;
    /*Par-dessus l'herbier, qui reste en place (et garde son état) derrière*/
    position:absolute;
    top:0;
    left:0;
}

.site-page.open{
    display:flex;
}

/*Le bouton écrire dépasse au-dessus de l'herbier : on le masque sous les pages du site*/
#content:has(.site-page.open) #write{
    visibility:hidden;
}

.site-page-content-image{
    width:100%;
}

.site-page-content-right{
    display:flex;
    flex-direction: column;
    /*Marge et non padding : WebKit (Safari) calculait la hauteur de l'image avec le padding, d'où une image déformée*/
    margin-left:50px;
    flex:1;
}

.site-page-return-wrapper{
    display:flex;
    justify-content:center;
    align-items: center;
    flex: 1;
}

.site-return{
    width:134px;
    cursor:pointer;
}

.site-return p{
    text-align: center;
    font-size:22px;
    font-family: Literata;
    margin-top:0;
}

.site-return img{
    width:100%;
    flex:1;
}

.site-page-text{
    margin:0;
}

/*Labeur des pages du site (présentation, crédits et leurs listes) : sans cette police,
chaque navigateur prend sa police par défaut (Times, Noto Serif…). Les titres restent en Literata.*/
.text-col p, .text-col ul{
    font-family: Libre Baskerville;
    font-size:clamp(16px, calc(16px + 1 * (100vw - 1280px) / 640), 17px);
}

.site-page-title{
    margin-top: 0;
    width:70%;
}

.site-page-content{
    display:flex;
    flex-direction: row;
    flex:1;
    min-height:0;
    /*Seul le texte défile : l'image et le bouton retour restent fixes sur le côté*/
    overflow:hidden;
}

.text-col{
    min-height:0;
    line-height:1.6;
    flex:2;
    overflow-y:auto;
    scrollbar-color: var(--dark-color) transparent;
}

/*Le texte fait 70% du bloc, sur une seule colonne*/
.text-col .site-page-text{
    width:70%;
}

/*Sous 1280px, pas de bouton retour à l'herbier dans les pages du site*/
/*Message affiché à la place de l'herbier sur petit écran*/
#small-screen{
    display:none;
}

@media (max-width: 1279px){
    .site-page-return-wrapper{
        display:none;
    }

    /*L'herbier (bureau et panels) n'est utilisable que sur ordinateur : message à sa place, sous la nav.
    Les pages du site s'ouvrent toujours par-dessus*/
    #herbier{
        display:none;
    }

    #small-screen{
        display:flex;
        align-items:center;
        justify-content:center;
        width:100%;
        height:100%;
        padding:16px;
        box-sizing:border-box;
        background-color: var(--brightest-color);
    }

    #small-screen p{
        max-width:560px;
        margin:0;
        text-align:center;
        font-family: Literata;
        font-style: italic;
        font-size:22px;
        line-height:1.4;
        color: var(--dark-color);
    }
}

/*MOBILE (sous 1280px, comme le message à la place de l'herbier) : menu empilé (logo en premier), pages du site sur une seule colonne*/
@media (max-width: 1279px){
    /*.full impose height:100% : la nav prend la hauteur de son contenu*/
    #nav, #nav-padding{
        flex:none;
        height:auto;
    }

    /*Espace de 40px entre la nav et la page (padding et non margin : il garde le fond de la nav)*/
    #nav{
        padding-bottom:40px;
    }

    #logo-bar{
        width:100%;
    }

    #nav-padding{
        flex-direction: column;
        align-items: center;
        gap:16px;
        padding:16px;
    }

    #nav-left, #nav-center, #nav-right{
        flex:none;
        height:auto;
    }

    #nav-center{
        order:-1;
        justify-content: center;
    }

    #logo{
        width:160px;
    }

    #nav-left, #nav-right{
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap:12px;
        text-align: center;
    }

    .site-page{
        padding:0 16px 16px 16px;
    }

    /*Toute la page défile*/
    .site-page-content{
        flex-direction: column;
        overflow-y:auto;
    }

    .site-page-content-right{
        display:contents;
    }

    .site-page-title{
        font-size:26px;
        width:100%;
    }

    .text-col{
        flex:none;
        overflow:visible;
    }

    .text-col .site-page-text{
        width:100%;
    }

    .site-page-content-image{
        margin-top:24px;
    }
}

/*TABLETTE (768 à 1279px) : nav, titre, texte, barre de logos et photo des pages sur 70% de la largeur, centrés*/
@media (min-width: 768px) and (max-width: 1279px){
    #nav-padding{
        width:70%;
        margin:0 auto;
    }

    .site-page-title,
    .text-col .site-page-text,
    #logo-bar,
    .site-page-content-image{
        width:70%;
        margin-left:auto;
        margin-right:auto;
    }

    #logo-bar,
    .site-page-content-image{
        display:block;
    }
}

#desk-lower{
    min-height: 0;
    min-width: 0;
    align-items: center;
    position:relative;
    width:calc(74 * var(--u));
    display:inline-block;
}

#desk-center-wrapper{
    height:100%;
    padding-bottom:calc(2.3 * var(--u));
    box-sizing: border-box;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}

#upper-decoration{
    width:calc(9.9 * var(--u));
    height:calc(2.4 * var(--u));
    margin-bottom:calc(1.85 * var(--u));
    margin-top:-1px;
}

#toolbar{
    width: calc(8 * var(--u));
    display: inline-block;
    height:100%;
    position:absolute;
    right:calc(-11 * var(--u));
    top:0;
}

/*Action impossible (page précédente sur la page 1, suppression de la dernière page) :
grisée et inactive (pas de survol : ni infobulle, ni croix de suppression)*/
.arrow.disabled,
.tool.disabled{
    filter: grayscale(1);
    opacity: 0.4;
    pointer-events: none;
}

#dropzone-delete-cross{
    position:absolute;
    height:100%;
    top:50%;
    left:50%;
    display:none;
    transform: translate(-50%, -50%);
    z-index: 1;
    pointer-events: none;
}

.tool{
    position:relative;
    width:100%;
    cursor:pointer;
}

[data-tooltip]::after{
    content: attr(data-tooltip);
    position:absolute;
    top:50%;
    left:calc(100% + 10px);
    translate: 0 -50%;
    padding: 10px 12px;
    white-space: nowrap;
    font-family: Libre Baskerville;
    font-size: 14px;
    color: var(--brightest-color);
    background-color: var(--dark-color);
    pointer-events: none;
    opacity: 0;
    transition: opacity .15s;
    z-index: 100;
}

[data-tooltip]:hover::after{
    opacity: 1;
}

/*La barre d'outils est au bord droit : label à gauche des boutons*/
.tool[data-tooltip]::after{
    left:auto;
    right:calc(100% + 10px);
}

.tool img{
    object-fit: cover;
    width:100%;
}

#dropzone-help-text{
    width:100%;
    height:100%;
    position:absolute;
    pointer-events: none;
    display:flex;
    justify-content: center;
    align-items: center;
}

/*Masqué dès que la page affichée contient un bloc*/
#desk-lower:has(.current-page editor-block) #dropzone-help-text{
    display:none;
}

#dropzone-help-text p{
    font-family: Literata;
    text-align: center;
    font-size: 20px;
    color: var(--medium-color);
}

.arrow-text-helper{
    display:flex;
    width:86%;
    height:100%;
    justify-content: center;
    align-items: center;
    position: absolute;
    font-family: Literata;
    color: var(--accent-color-orange);
    font-size:clamp(16px, calc(16px + 4 * (100vw - 1280px) / 640), 20px);
    margin:0;
}

#arrow-left-text-helper{
    right:0;
}

/*Centré sur la hauteur des minuscules (et non des capitales) : le texte paraît au milieu de la flèche*/
.arrow-text-helper p{
    margin: 0;
    transform: translateY(-0.15em);
}

#page-number{
    position:absolute;
    display:flex;
    justify-content: center;
    align-items: center;
    width:100%;
    height:100%;
}

#page-number p{
    font-family: Literata;
    color: var(--dark-color);
    margin:0;
    font-size:calc(1.76 * var(--u));
    padding-bottom:calc(0.74 * var(--u));
}

#page-count{
    position: relative;
}

/*Taille de référence (PAGE_SIZE dans main.js), mise à l'échelle du bureau : tout le contenu
de la page (blocs, étiquettes) reste homothétique quelle que soit la taille de l'écran*/
.dropzone{
    width: 800px;
    height:564px;
    transform: scale(var(--page-scale, 1));
    transform-origin: 0 0;
    display:inline-block;
    position:absolute;
    top:0;
    left:0;
    visibility: hidden;
}

.dropzone-labels{
    position:absolute;
    bottom:0;
    right:0;
    width: 220px;
    margin-bottom: 19px;
    margin-right:19px;
    pointer-events: none;
}

.label{
    position: relative;
    width:100%;
    height: auto;
    margin-top: 19px;
    pointer-events: auto;
    /*Loupe : 48px (LOUPE.png dépasse les 128px acceptés pour un curseur), point actif au centre du verre*/
    cursor: url("../assets/images/herbier/ui/LOUPE_cursor.png") 29 17, zoom-in;
    /*Agrandie et placée par place_open_label (main.js)*/
    transform-origin: 0 0;
    /*Texte des champs proportionnel à la largeur de l'étiquette (cqw)*/
    container-type: inline-size;
}

/*Étiquette cliquée : agrandie, au-dessus des blocs (z-index 90/91), champs modifiables*/
.dropzone-labels:has(.label.open){
    z-index: 95;
}

.label.open{
    /*Au-dessus de l'autre étiquette de la page*/
    z-index: 1;
    cursor: default;
}

/*Champs posés sur les pointillés de l'image (1123 × 768)*/
.label-field{
    position: absolute;
    box-sizing: border-box;
    height: 7%;
    right: 8.5%;
    padding: 0 4px;
    border: 1px solid transparent;
    background: transparent;
    font-family: Belmonte;
    /*14px pour une étiquette de 330px*/
    font-size: 4.25cqw;
    line-height: 1;
    color: var(--medium-color);
    outline: none;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
}

.label-field[data-field='by']{
    top: 57%;
    left: 29%;
}

.label-field[data-field='at']{
    top: 69.5%;
    left: 26.5%;
}

.label-field[data-field='date']{
    top: 81.5%;
    left: 18.5%;
}

.label-field::placeholder{
    color: var(--medium-color);
    opacity: 0;
}

/*span à l'impression : même position que le champ*/
span.label-field{
    display: flex;
    align-items: center;
}

.label.open .label-field{
    pointer-events: auto;
    cursor: text;
    border-color: var(--accent-color-purple);
    background-color: rgba(255, 255, 255, .6);
}

.label.open .label-field::placeholder{
    opacity: .6;
}

/*Date du jour posée automatiquement : pas un champ à remplir*/
.label.open .label-field[readonly]{
    pointer-events: none;
    border-color: transparent;
    background-color: transparent;
}

/*Croix de suppression de l'étiquette, centrée : sa hauteur dépasse légèrement celle de l'étiquette
(115 % ; croix 936 × 900, étiquette 1123 × 768)*/
.label .label-cross{
    display: block;
    width: 82%;
    z-index: 1;
}

/*Étiquette : image assets/images/herbier/plantes/<itemid>/label.webp*/
.label img{
    display:block;
    width:100%;
    height:auto;
}

#desk-center-padding{
    width:auto;
    height:100%;
    display: inline-block;
}

/*Bordure qui suit la forme de la zone de dépôt ; overflow visible pour ne pas rogner la moitié extérieure du trait*/
#dropzone-bg svg{
    overflow: visible;
}

#dropzone-bg path{
    stroke: transparent;
    stroke-width: 6px;
    vector-effect: non-scaling-stroke;
}

#desk-lower:has(#page-add:hover) #dropzone-bg path{
    stroke: var(--accent-color-purple);
}

#desk-lower:has(#page-add:hover) .current-page{
    opacity: 0.5;
}

#desk-lower:has(#page-delete:hover):has(.dropzone ~ .dropzone) .current-page{
    opacity: 0.5;
}

#desk-lower:has(#page-delete:hover):has(.dropzone ~ .dropzone) #dropzone-delete-cross{
    display: block;
}

#dropzone svg{
    width:auto;
}

#desk-upper-center p{
    margin:0;
    line-height:calc(2.4 * var(--u));
    font-family: Literata;
    font-style:italic;
    font-size:clamp(16px, calc(16px + 4 * (100vw - 1280px) / 640), 20px);
    text-align: center;
}

#desk-upper{
    margin-bottom:calc(1.85 * var(--u));
    width:auto;
}

#desk-center{
    min-width: 0;
    min-height: 0;
}

.scrollbar{
    width: 16px;
    height:100%;
    position:relative;
    display:flex;
    justify-content: center;
}

.scrollbar-bar{
    position:absolute;
    top:0;
    border-radius: 16px;
    background-color: var(--brightest-color);
    width:16px;
    height:16px;
}

.scrollbar-thumb{
    border-left: 2px solid var(--brightest-color);
    height:100%;
    width:0px;
}

/*CONTENT PAGE*/

html{
    width:100dvw;
    height:100dvh;
}

body{
    margin:0;
    width:var(--full-width);
    height:var(--full-height);
}

/*PRINT*/

.printable{
    height : 595.5pt;
    width: 842.25pt; 
    position:relative;
}

#pdf{
    display:inline-block;
}

/*LOADER DE GÉNÉRATION DU PDF : recouvre le document composé le temps de l'export*/

#pdf-loader{
    display:none;
    position:fixed;
    inset:0;
    z-index:1000;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:24px;
    background-color:var(--brightest-color);
    color:var(--dark-color);
    font-family:Literata;
    font-style:italic;
    font-size:clamp(20px, calc(20px + 6 * (100vw - 1280px) / 640), 26px);
}

#pdf-loader.open{
    display:flex;
}

#pdf-loader p{
    margin:0;
}

.pdf-loader-spinner{
    width:56px;
    height:56px;
    border:3px solid var(--bright-color);
    border-top-color:var(--accent-color-orange);
    border-radius:50%;
    animation:pdf-loader-spin 1s linear infinite;
}

@keyframes pdf-loader-spin{
    to{ transform:rotate(360deg); }
}

@media (prefers-reduced-motion: reduce){
    .pdf-loader-spinner{
        animation-duration:3s;
    }
}

.printable-child{
    position:absolute;
    /*Tailles recopiées en border-box depuis l'éditeur : le padding ne s'ajoute pas par-dessus*/
    box-sizing: border-box;
}

.printable-labels{
    bottom:0;
    right:0;
}

.book-page{
    height : 595.5pt;
    width: 842.25pt; 
    position:relative;
    display:flex;
    flex-direction: row;
}

/*Page par page : une demi-feuille, même largeur que .page-half pour que les planches se coupent pareil*/
.single-page{
    height : 595.5pt;
    width: 421.125pt;
    position:relative;
    display:flex;
}

.page-half{
    flex:1;
    height:100%;
    position:relative;
    overflow:hidden;
}

/*Pages liminaires et articles uniquement, pas les images des planches*/
.page-half > img{
    width: 100%;
}

/*Une planche A4 occupe deux demi-pages : on en montre la moitié gauche puis la moitié droite*/
.herbier-half-right{
    margin-left: -100%;
}
/*POPUP CONSERVER MON HERBIER*/

#save-popup, #load-popup{
    display:none;
    flex-direction: column;
    position:absolute;
    top:calc(3.8 * var(--u));
    left:50%;
    transform:translateX(-50%);
    width:calc((69.9 - 13 * var(--wk)) * var(--u));
    min-height:calc(65.3 * var(--u));
    padding:calc(5.4 * var(--u)) calc(5.9 * var(--u)) calc(7 * var(--u));
    box-sizing: border-box;
    background-color: var(--dark-color);
    color: var(--bright-color);
    font-family: Libre Baskerville;
    font-size:16px;
    line-height:1.6;
    z-index:97;
}

#save-popup.open, #load-popup.open{
    display:flex;
}

#save-popup p, #load-popup p{
    margin:0 0 calc(2.3 * var(--u));
}

#save-popup-title, #load-popup-title{
    text-align: center;
    font-size:clamp(24px, calc(24px + 4 * (100vw - 1280px) / 640), 28px);
    margin:0 0 calc(3.2 * var(--u));
}

.save-popup-options{
    display:flex;
    flex-direction: column;
    gap:calc(0.3 * var(--u));
    margin-bottom:calc(4.1 * var(--u));
}

.save-popup-option{
    display:block;
    cursor:pointer;
    margin-bottom:calc(3.3 * var(--u));
}

.save-popup-options .save-popup-option{
    margin-bottom:0;
}

.save-popup-option input{
    width:calc(1.3 * var(--u));
    height:calc(1.3 * var(--u));
    margin:0 calc(1.5 * var(--u)) 0 0;
    vertical-align: baseline;
    cursor:pointer;
}

#save-popup-buttons, #load-popup-buttons{
    display:flex;
    flex-direction: column;
    align-items: center;
    gap:calc(2.6 * var(--u));
    margin-top:calc(2.6 * var(--u));
}

#save-popup-buttons button, #load-popup-buttons button{
    border:none;
    cursor:pointer;
    font-family: Literata;
    font-style: italic;
    color: var(--dark-color);
}

#save-popup-download{
    background-color: var(--bright-color);
    font-size:20px;
    padding:calc(0.6 * var(--u)) calc(2.3 * var(--u));
}

#save-popup-download:disabled{
    cursor:not-allowed;
}

#save-popup-close, #load-popup-close{
    background-color: var(--brightest-color);
    font-size:16px;
    padding:calc(1.2 * var(--u)) calc(1.1 * var(--u));
}

#load-popup-list{
    list-style:none;
    margin:0;
    padding:0;
    max-height:calc(40 * var(--u));
    overflow-y:auto;
}

#load-popup-list button{
    display:block;
    width:100%;
    padding:calc(0.8 * var(--u)) 0;
    border:none;
    border-bottom:1px solid var(--bright-color);
    background:none;
    color:inherit;
    font:inherit;
    text-align:left;
    cursor:pointer;
}

#load-popup-list button:hover{
    font-style:italic;
}