:root {
    --white: var(--wp--preset--color--base);
}
html {
	scroll-behavior: smooth;
    font-family: 'Lexend', sans-serif;
    /* These are technically the same, but use both */
    overflow-wrap: break-word;
    word-wrap: break-word;

    -ms-word-break: break-all;
    /* This is the dangerous one in WebKit, as it breaks things wherever */
    word-break: break-all;
    /* Instead use this non-standard one: */
    word-break: break-word;

    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

html, body {
    max-width: 100vw;
    overflow-x: hidden;
}

@media screen and (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto;
	}
}

body {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
}

strong {
    font-weight: bold;
}

/**
* 
* CARTE
*
**/

.geoAse--map-filter-label {
    height: fit-content;
    font-size: var(--wp--preset--font-size--small);
}

.geoAse--map-filter-label input {
    display: inline-block;
    margin-left: .5rem;
}

#carte-departements path {
    cursor: pointer;
}

#carte-departements {
    position: relative;
}

#carte-infos {
    display: inline-block;
    position: absolute;
    top: -2rem;

    padding: var(--wp--preset--spacing--30);
    border-radius: 1rem;
    background: var(--wp--preset--color--grey-500);
}

#carte-infos p + p {
    margin-top: .25rem;
    font-size: 1rem;
}

#carte-departements path {
    stroke: var(--wp--preset--color--base-text);
}

#carte-departements path[data-dpt] {
    fill: lightgrey;
    fill-opacity: .7;

    transition: fill-opacity var(--transition-time);
}

#carte-departements path[data-dpt]:hover {
    fill-opacity: 1;
}

/**
* 
* TABLEAU
*
**/

#geoASE-table {
    border-spacing: 0;
}

#geoASE-table thead tr {
    background-color: hsla(221.41, 81.61%, 82.94%, .15);
}

#geoASE-table th,
#geoASE-table td {
    min-width: 10rem;
    font-size: .85rem;
}

#geoASE-table th:has( + th),
#geoASE-table td:has( + td) {
    min-width: 10.5rem;
    border-right: 1px solid hsla(0, 0%, 50%, .2);
}

#geoASE-table th {
	position: relative;
	padding: .25rem 2rem .125rem .25rem;
    border-bottom: 2px solid hsla(0, 0%, 50%, .2);
}

#geoASE-table td {
	padding: .25rem .5rem;
    border-bottom: 1px solid hsla(0, 0%, 50%, .2);
}

#geoASE-table th span {
	display: block;
	width: 1rem;
	height: 1rem;
	position: absolute;
	top: 50%;
	right: .5rem;
	transform: translateY(-100%);
	background-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m11.998 21.995c5.517 0 9.997-4.48 9.997-9.997 0-5.518-4.48-9.998-9.997-9.998-5.518 0-9.998 4.48-9.998 9.998 0 5.517 4.48 9.997 9.998 9.997zm4.843-8.211c.108.141.157.3.157.456 0 .389-.306.755-.749.755h-8.501c-.445 0-.75-.367-.75-.755 0-.157.05-.316.159-.457 1.203-1.554 3.252-4.199 4.258-5.498.142-.184.36-.29.592-.29.23 0 .449.107.591.291z' fill-rule='nonzero'/%3E%3C/svg%3E");
	background-size: cover;
	background-repeat: no-repeat;
	cursor: pointer;
}

#geoASE-table th span.desc {
	transform: rotate(180deg) translateY(0%);
}

#geoASE-table th span.asc,
#geoASE-table th.is--sorted-desc span.desc {
	opacity: .5;
	pointer-events: none;
}

#geoASE-table th span.desc,
#geoASE-table th.is--sorted-desc span.asc {
	opacity: 1;
	pointer-events: all;
}

.table-wrapper:has(#geoASE-table) {
    max-width: var(--wp--style--global--wide-size);
    overflow: auto;
    box-shadow: inset rgba(0, 0, 0, 0.16) 0px 1px 4px;
    border-radius: 3px;
}

/**
* 
* ACTUS
*
**/

.og-external-posts,
.og-archive-grid {
    --nbColumns: 1;
    display: grid;
    grid-template-columns: repeat(var(--nbColumns), 1fr);
    gap: 2rem;
    text-align: center;
}

.og-external-item-img-wrapper {
    padding-bottom: 67%;
    height: 0;
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 8px;
}

.og-external-item-img {
    position: absolute;
    object-fit: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.og-external-item-date {
    display: block;
    margin-top: 0.5rem;
    text-align: left;
    font-size: var(--wp--preset--font-size--x-small);
}

@media screen and (max-width: 48rem) {

    .home h1 {
        padding-right: 0 !important;
    }

    #carte-infos {
        display: none;
    }
}

@media screen and (min-width: 48rem) {
    
    .og-external-posts,
    .og-archive-grid {
        --nbColumns: 2;
    }

}

@media screen and (min-width: 64rem) {
    
    .og-external-posts,
    .og-archive-grid {
        --nbColumns: 3;
    }
    
}

@media screen and (min-width: 80rem) {
    
    .og-external-posts,
    .og-archive-grid {
        --nbColumns: 4;
    }
    
}
.og-archive-categories {
    display: flex;
    gap: 1.5rem;
}
.og-archive-categories a {
    display: inline-block;
    margin-top: .5rem;
    padding: .25rem .5rem;
    font-size: var(--wp--preset--font-size--small);
    margin-right: 6px;
    border: .125rem solid var(--wp--preset--color--secondary);
    background-color: var(--wp--preset--color--secondary);
    color: var(--white, #fff);
    text-decoration: none;
    font-weight: 600;
    transition: color var(--transition-time), background-color var(--transition-time);
}
.og-archive-categories a:hover {
    color: var(--wp--preset--color--secondary);
    background-color: transparent;
}
.og-archive-item-title {
    margin-top: 0.5rem;
    text-align: left;
}

.og-archive-pagination {
  margin-top: 30px;
  text-align: center;
}
.og-archive-pagination ul {
  display: inline-flex;
  list-style: none;
  padding: 0;
}
.og-archive-pagination li {
  margin: 0 5px;
}
.og-archive-pagination a {
  padding: .375rem .75rem;
  border: 1px solid #ddd;
  border-radius: .25rem;
  text-decoration: none;
}
.og-archive-pagination a:hover {
  background: #f3f3f3;
}
.og-archive-pagination .current {
  padding: .375rem .75rem;
  border: 1px solid var(--wp--preset--color--secondary);
  background: var(--wp--preset--color--secondary);
  color: #fff;
  border-radius: .25rem;
}

/** RANKINGS **/
.rankings-wrapper {
    --nbColumns: 2;
    grid-template-columns: repeat(var(--nbColumns), 1fr);
}

h3:has( + .top-five),
h3:has( + .global-ranking) {
    align-self: flex-start;
    text-align: center;
}

.top-five,
.global-ranking {
text-align: center;
    background-color: var(--white);
    border-radius: 1.5rem;
    padding: .75rem 1rem;
    align-self: stretch;
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.top-five > div {
    display: none;
}

.top-five p,
.global-ranking p {
    line-height: 1.5;
}

.entry-content:has(input#completude:checked) .top-five .completude,
.entry-content:has(input#crb_data_ase_releve_cjm_0_3:checked) .top-five .crb_data_ase_releve_cjm_0_3,
.entry-content:has(input#crb_data_ase_releve_cjm_3_6:checked) .top-five .crb_data_ase_releve_cjm_3_6,
.entry-content:has(input#crb_data_ase_releve_cjm_6_12:checked) .top-five .crb_data_ase_releve_cjm_6_12,
.entry-content:has(input#crb_data_ase_releve_cjm_12_24:checked) .top-five .crb_data_ase_releve_cjm_12_24,
.entry-content:has(input#crb_data_ase_releve_cjm_24_plus:checked) .top-five .crb_data_ase_releve_cjm_24_plus,
.entry-content:has(input#crb_data_ase_releve_cjm_duree_moyenne:checked) .top-five .crb_data_ase_releve_cjm_duree_moyenne,
.entry-content:has(input#crb_data_ase_releve_total_mineurs_ase:checked) .top-five .crb_data_ase_releve_total_mineurs_ase,
.entry-content:has(input#crb_data_ase_releve_total_cjm:checked) .top-five .crb_data_ase_releve_total_cjm,
.entry-content:has(input#crb_data_ase_releve_ratio_cjm_mineurs:checked) .top-five .crb_data_ase_releve_ratio_cjm_mineurs {
    display: block;
}

/* DEPARTEMENTS */

@media screen and (min-width: 64rem) {
    .dpts-banner h1,
    .dpts-banner p {
        padding-right: 50%;
    }
}

.wp-site-blocks .dpts-stats-3-col {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex: 1;
}

.wp-site-blocks .dpts-stats-3-col > div {
    background-color: var(--wp--preset--color--secondary);
}

.wp-site-blocks .dpts-stats-3-col > div:nth-child(2) {
    background-color: var(--wp--preset--color--primary);
}

.wp-site-blocks .dpts-stats-3-col > div:nth-child(3) {
    background-color: var(--wp--preset--color--primary-400);
}

.dpts-stats-3-col > * {
    flex: 0 0 356px;
}

.dpts-stats-3-col img {
    width: 60px;
    height: 60px;
    padding: 5px;
    border-radius: 50%;
    background-color: var(--wp--preset--color--base);
}

.dpts-stats-3-col-subtitle {
    font-variant: small-caps;
    text-transform: lowercase;
    font-weight: 900;
    font-size: 24px;
    line-height: 20px;
}

.wp-site-blocks .dpts-stats-3-col .is-vertical,
.entry-content .dpts-graph .is-vertical {
    flex-direction: column;
    align-items: stretch;
}

.wp-site-blocks .dpts-stats-3-col .is-vertical {
    gap: 0;

    max-width: 100%;
    margin-bottom: 10px;
}

.wp-site-blocks .dpts-stats-3-col .is-vertical p:has(strong) {
    line-height: 50px;
}

.dpts-graph,
.dpts-infos-2-col > .is-layout-grid > .wp-block-group {
    box-shadow: 0 4px 80px hsla(0, 0%, 0%, .08);
}

div:has(#duree-cjm-graph) {
    flex-wrap: wrap;
}

div:has( > #duree-cjm-graph) {
    flex-direction: column;
}

#duree-cjm-graph {
    flex: 0 0 308px;
}

#duree-cjm-graph + div {
    flex: 1;
}

.dpts-graph-title {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 24px;
    line-height: 1.2;
}

.dpts-infos-2-col h2 {
    flex: 1;
    text-transform: uppercase;
    text-align: center;
}

.dpts-infos-2-col > .is-layout-grid {
    grid-template-columns: 1fr;
}

@media screen and (min-width: 64rem) {

    .dpts-infos-2-col > .is-layout-grid {
        grid-template-columns: 1fr 1fr;
    }

    div:has( > #duree-cjm-graph) {
        flex-direction: row;
    }

}

.dpts-infos-2-col > .is-layout-grid > .wp-block-group {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
}

.dpts-infos-2-col > .is-layout-grid > .wp-block-group h3 {
    text-align: center;
    margin-bottom: 1rem;
}

.dpts-infos-2-col .actualite-item + .actualite-item {
    margin-top: 0.5rem;
}

/* TRANSITIONS */
.wp-element-button {
    transition:
        color var(--transition-time),
        background-color var(--transition-time);
}