.active {
    font-weight: bold;
}

/* Layout principal en grille (desktop) */
.layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 2rem;
  align-items: start;
}

/* Navigation : disposition verticale */
nav#side-nav {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
nav#side-nav nav {
  display: flex;
  flex-direction: column;
  margin: 1em 0;
}

.img-entete {
  height: 2em;
}

@media (min-width: 900px) {
  nav#side-nav {
    position: sticky;
    top: 1em;
    align-self: start;
  }
}

nav h2 {
    font-size: 120%;
    font-weight: normal;
    margin-bottom: unset;
}
nav h2.active {
  font-weight: bold;
}

/* Sections de navigation empilées */
nav#side-nav section {
  display: flex;
  flex-direction: column;
}

nav#side-nav ul {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0;
  margin: 0;
  align-items: flex-start;
  text-align: left;
  margin-top: 0.5em;
}

nav#side-nav ul li {
  padding: 0.2em .5em;
}


/* breadcrumb uniquement visible en mobile */
.breadcrumb {
  display: none;
}
.hamburger {
  display: none;
  padding: 0.18em .55em;
  margin-right: 0.2em;
  margin-top: 0.1em;
  z-index: 10;
}

.arborescence article {
  padding-right: 0;
}
.arborescence article header {
  margin-right: 0;
}

/* Mobile : stack layout et panneau latéral glissant */
@media (max-width: 900px) {
  body {
    --pico-block-spacing-horizontal: 0.35em;
  }
  .arborescence {
    --pico-block-spacing-horizontal: 1em;
  }
  ol, ul {
    padding-left: 1.2em;
  }

  .container-fluid {
    margin: 0;
    padding: 0.3em;
  }


  .layout {
    display: block;
  }

  .breadcrumb {
    display: inline-block;
    margin-bottom: 0.3em;
  }

  .hamburger {
    display: inline-block;
  }

  nav#side-nav {
    position: fixed;
    top: 0;
    left: 0;
    transform: translateX(-100%);
    bottom: 0;
    width: 350px;
    height: 100%;
    overflow-y: auto;
    transition: transform 0.3s ease;
    z-index: 1000;
  }
  nav#side-nav article {
    box-shadow: var(--pico-box-shadow);
  }

  nav#side-nav.open {
    transform: translateX(0);
  }
}

.close-nav {
  display: none;
  position: absolute;
  top: -.4rem;
  right: .2rem;
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--pico-contrast);
}

@media (max-width: 900px) {
  .close-nav {
    display: block;
  }
}

nav#side-nav a,
.breadcrumb a,
body>footer a {
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease, text-decoration 0.2s ease;
}

/* Couleur basée sur le thème courant (Pico gère `color-scheme`) */
nav#side-nav a:hover,
.breadcrumb a:hover,
body>footer a:hover {
  text-decoration: underline;
  opacity: 1;
}

/* Active = un peu plus visible */
nav#side-nav a.active,
.breadcrumb a.active,
body>footer a.active {
  opacity: 1;
  font-weight: bold;
}
nav#side-nav li a {
  border-radius: 0;
  border-left: 1px solid color-mix(in srgb, var(--pico-primary-border) 20%, transparent);
}
nav#side-nav li a.active {
  border-left: 1px solid var(--pico-primary-border);
}


.site-header {
  padding-block: 0.2rem;
  border-bottom: 1px solid color-mix(in srgb, var(--pico-secondary-border) 20%, transparent);
  margin-bottom: 0.4em;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.header-content a {
  color: unset;
  text-decoration: none;
}
.header-content a:hover {
  text-decoration: underline;
}

.badge, .badge-moyen {
  padding: 0.4em .6em;
  font-size: 35%;
  vertical-align: middle;
}

.badge-moyen {
  font-size: 50%;
}

.droite {
  float: right;
}

.gauche {
  float: left;
  margin-right: 0.5em;
}
header > .droite,
header > .gauche {
  margin-top: -0.35em;
  line-height: 1.2em;
}

[role="group"].droite {
  width: auto;
}


html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.layout {
  flex: 1;
}

body>footer {
  opacity: 0.8;
  font-size: 70%;
}

.past {
  opacity: 0.6;
}

.maintenant {
  font-weight: bold;
}

.decade .annee {
  font-weight: bold;
}

.centre {
  text-align: center;
  padding-top: 0.8em;
}

.smallcaps {
  font-variant: small-caps;
}

.fondateurs {
  column-gap: 2em;
}
.fondateurs article {
  position: relative;
}
.fondateurs article:not(:first-child)::before {
  content: "et";
  position: absolute;
  left: -1.5rem; /* adapte en fonction du gap */
  top: 50%;
  transform: translateY(-50%);
}

@media (max-width: 767px) {
  .fondateurs article:not(:first-child)::before {
    content: "et";
    position: absolute;
    margin-top: 0.5em;
    top: -1.5rem; /* adapte en fonction du gap */
    left: 50%;
  }
}

.helptext {
  font-size: 80%;
  font-style: italic;
  opacity: 80%;
  margin-top: -1em;
}

.buttons [role="button"] {
    margin: 0 0 var(--spacing) 0;
    height: calc(1rem * var(--pico-line-height) + var(--pico-form-element-spacing-vertical) * 2 + var(--pico-border-width) * 2);
}

.remove {
  margin-top: -1em;
}

.center-vertical {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center; /* si tu veux centrer aussi horizontalement */
}

@media (max-width: 900px) {
  article>ul {
    padding-left: 1em;
  }
}

@media (max-width: 1400px) {
  .verbeux {
    display: none;
  }
}


  .search-form {
    position: relative;
    display: inline-block;
    margin-bottom: 0;
    padding: 0;
  }
  .search-form input[type="search"] {
    width: 50px;
    transition: width 0.3s ease;
    line-height: 1.2em;
    height: 1.8em;
    margin-top: 0;
    vertical-align: middle;
    border-top-right-radius: 5rem !important;
    border-bottom-right-radius: 5rem !important;
    padding-right: 0.5em;
  }

  .search-form input[type="search"]:focus,
  .search-form input[type="search"]:not(:placeholder-shown)  {
    width: 300px;
    padding-right: 0;
  }
  .search-form input[type="search"]:not(:placeholder-shown)  {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }

  .search-form button[type="submit"] {
    padding: 0;
    line-height: 1.2em;
    height: 1.8em;
    vertical-align: middle;
    visibility: hidden;
    width: 0px;
    margin: 0;
    padding: 0;
  }

  .search-form input[type="search"]:not(:placeholder-shown) + button {
    visibility: visible;
    padding-left: 0.5em;
    padding-right: 0.5em;
    width: auto;
  }

  #button-search {
    display: none;
    border-radius: 1em;
    padding: 0.2em 1em;
    line-height: 1.4em;
  }

  @media (max-width: 900px) {
    #button-search {
      display: block;
    }
    #inline-search {
      display: none;
    }
  }

  .badge-famille {
    border-radius: 2em;
  }

  .arrondi {
    border-radius: .6em;
    padding: 0.1em .5em;
    font-size: 70%;
  }
  
svg {
  vertical-align: -0.125em;
}

.choices[data-type=select-one]
.choices__inner
.choices__item {
            line-height: var(--line-height);
        }
.choices[data-type=select-one]
.choices__inner
.choices__item::after {
            display: block;
            width: 1rem;
            height: 1rem;
            margin-inline-start: calc(var(--spacing, 1rem) * 0.5);
            float: right;
            transform: rotate(-90deg);
            background-image: var(--icon-chevron);
            background-position: right center;
            background-size: 1rem auto;
            background-repeat: no-repeat;
            content: "";
            transition: transform var(--transition);
            box-sizing: border-box;
            margin-top: calc(var(--spacing, 1rem) * 0.8);
        }

.choices[data-type=select-one]
    .choices__list--dropdown {
        display: none;
        z-index: 1;
        position: absolute;
        width: 100%;
        top: 100%;
        margin-top: -1px;
        overflow: hidden;
        word-break: break-all;
        will-change: display;
        position: relative;
        max-height: 300px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
    }

.choices[data-type=select-one]
    .choices__list--dropdown
        .choices__item {
            line-height: 2.5em;
            padding-left: 0.5em;
        }
.choices[data-type=select-one]
    .choices__list--dropdown
        .choices__item.is-selected {
            background: var(--pico-primary);
            color: var(--pico-primary-inverse);
        }
.choices[data-type=select-one]
    .choices__list--dropdown
  .choices__item:hover,
  .choices[data-type=select-one]
    .choices__list--dropdown
     .choices__item.is-highlighted {
            background: var(--pico-primary-focus);
        }

.choices[data-type=select-one]
.is-active {
        display: block;
    }




.choices[data-type=select-one].is-open {
    .choices__inner {
        .choices__item::after {
                transform: rotate(0);
        }
        margin-bottom: 0.5em;
    }


    .choices__input-wrapper {
        position: relative;
        .choices__input {
            padding-right: 2.2em;
        }
    }

    .clear-btn {
        position: absolute;
        width: 3em;
        right: 0.5em;
        top: 1.3em;
        transform: translateY(-50%);
        background: transparent;
        border: none;
        font-size: 16px;
        cursor: pointer;
        z-index: 10;
    }
}

.choices[data-type=select-multiple]
.choices__input {
    width: 100% !important;
}
.choices[data-type=select-multiple]
    .choices__item {
        text-align: left !important;
        background: transparent;
        color: var(--primary);
        font-size: 90%;
        padding: 0.15em 0.4em 0.3em 0.4em;
        display: inline-block;
        margin: 0.2em !important;
        height: 2.6em;
        line-height: 2.2em;
    }

  .choices[data-type=select-multiple]
    .choices__item
        button {
            display: inline-block;
            border: 0;
            background: transparent;
            text-indent: -9999px;
            padding: 0;
            appearance: none;
            width: 1.3em;
            height: 0.87em;
            margin-top: 0.25em;
            margin-bottom: 0.5em;
            vertical-align: bottom;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
            background-position: right;
            background-repeat: no-repeat;
        }

@media only screen and (prefers-color-scheme: light) {
    [data-theme="light"],
    :root:not([data-theme="dark"]) {
        .choices[data-type=select-multiple]
    .choices__item
        button {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='15' y1='9' x2='9' y2='15'%3E%3C/line%3E%3Cline x1='9' y1='9' x2='15' y2='15'%3E%3C/line%3E%3C/svg%3E");
        }
    }
}


.choices[data-type=select-multiple]
    .choices__list--dropdown {
        font-size: 80%;
        display: block;
        will-change: display;
        background: var(--background-color);
        padding: 0.4em;
        border-radius: 0.2em;
        box-shadow: 0 -1px 0 rgba(115, 130, 140, 0.2);
        position: relative;
        max-height: 300px;
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        will-change: scroll-position;
    }
.choices[data-type=select-multiple]
.choices__list--dropdown .choices__group,
.choices[data-type=select-multiple]
.choices__list--dropdown .choices__item {
        display: none;
    }

    .choices[data-type=select-multiple]
    .choices__list--dropdown .choices__item.visible,
    .choices[data-type=select-multiple]
    .choices__list--dropdown.is-active .choices__item {
        display: inline-block;
    }

    .choices[data-type=select-multiple]
    .choices__list--dropdown .choices__group.visible,
    .choices[data-type=select-multiple]
    .choices__list--dropdown.is-active .choices__group {
        display: block;
    }

.choices[data-type=select-multiple]
    .choices__list--dropdown
    .choices__item {
      cursor: pointer;
      border: 1px solid color-mix(in srgb, var(--pico-secondary-border) 40%, transparent);
      border-radius: var(--pico-border-radius);
    }

.choices[data-type=select-multiple]
    .choices__list--dropdown
    .choices__item:hover {
      border-color: var(--pico-secondary-border);
    }

.message {
  margin-bottom: var(--pico-spacing);
  padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
  border-radius: var(--pico-border-radius);
  color: var(--color);
  background-color: var(--background-color);
  border: 1px solid var(--background-color);

  background-image: var(--icon);
  background-position: center left var(--pico-form-element-spacing-vertical);
  background-size: calc(1.2em *  1.5) auto;
  padding-left: calc(var(--pico-form-element-spacing-vertical) * 2 + 1.2em *  1.5);

  p:last-child {
    margin-bottom: 0;
  }
}

.message.danger,
.message.error {
  --background-color: #ffebee;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23b71c1c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
  --color: #b71c1c;
}

.message.warning {
  --background-color: #fff8e1;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23ff6f00' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --color: #ff6f00;
}

.message.success {
  --background-color: #e8f5e9;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%231b5e20' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
  --color: #1b5e20;
}

.message.info {
  --background-color: #ecf4a4;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23616918' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --color: #616918;
}

.message.grid {
    grid-template-columns: 1fr auto;
}

label.required::after {
    content: ' *';
    color: red;
}


.photos, .albums {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 0.5em;
}
.photos article,
.albums article {
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.photos article .content,
.albums article .content {
  flex-grow: 1;
}


.photos .image,
.albums .image {
    aspect-ratio: 1 / 1; /* force un carré */
    border-radius: 0.2em;
    overflow: hidden;
    position: relative;
}
.albums img,
.photos img {
  display: block;
  width: 100%;
  height: auto;
  width: 100%;
  height: 100%;
  object-fit: cover; /* coupe pour remplir */
  object-position: center; /* centre le crop */
  display: block;
}

.img-preview {
  grid-template-columns: 10em auto;
  margin: .5em 0;
  align-items: center;
}

.grid.navigation {
  margin-bottom: 0.5em;
  vertical-align: middle;
  grid-template-columns: repeat(3, 1fr);
}
.grid.navigation .centre {
  text-align: center;
}
.grid.navigation .droite {
  text-align: right;
}
.center {
  margin: auto;
  text-align: center;
}