html { scroll-behavior: smooth; }   
@media (prefers-reduced-motion: reduce) {
	html {scroll-behavior: auto; }
}

@font-face { 
    font-family:'Paysage-Black'; 
    src: url('../polices/Paysage-Black.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: normal;
    font-display: swap;
}

@font-face { 
    font-family:'Paysage-Regular'; 
    src: url('../polices/Paysage-Regular.woff2') format('woff2'); 
    font-weight: normal; 
    font-style: normal;
    font-display: swap;
}

/* LES VARIABLES CSS */
:root { 
    --police-titre: 'Paysage-Black', Arial, Helvetica, sans-serif; 
    --police-contenu: 'Paysage-Regular', Arial, Helvetica, sans-serif; 
    --police-contenu-bold: var(--police-titre);
    --couleur1: #ed4731;
    --couleur2: #505495;
    --couleur3: #534A99;
    --couleur4: #52B5A7;
    --couleur-sombre: #24242b;
    --couleur-claire: #fffbfa;
    --largeur: 1200px ;
    --largeur-s: 900px ;
    --duree-transition: .2s ;
    --marge: 1rem;
    --marge-s: calc( var(--marge) / 2) ;
    --marge-l: calc( var(--marge) * 3) ;
}

html { font-size: clamp( 1rem, calc( 0.875rem + 0.5vw ), 1.25rem ); }
body { font-family: sans-serif; 
    background: var(--couleur2);
    background: linear-gradient(135deg, var(--couleur1) 0%, var(--couleur2) 100%);
    background-attachment: fixed;
}

h1, .h1, h2, .h2, h3, .h3 { font-family: var(--police-titre); line-height: 1em; text-wrap: balance; line-height: .8em; }
h1 small, .h1 small, h2 small, .h2 small, h3 small, .h3 small { display: block; line-height: 1.2em; font-family: var(--police-contenu); font-size: .5em; }
h1, .h1 { font-size: 3.5rem; }
h2, .h2 { font-size: 2rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.0625rem; }

strong { font-weight: normal; font-family: var(--police-contenu-bold); }
picture { vertical-align: top;}
.spip_logo { margin: 0; float: none; }

.page { font-size: 1.125rem; color: var(--couleur-claire); font-family: var(--police-contenu); }
.container, .container-s { margin:auto; padding:0.5rem; width: var(--largeur); max-width: 100%; }
.container-s { width: var(--largeur-s); }

.chapo a, .texte a { text-decoration: underline;}
.chapo a:hover, .chapo a:active, .chapo a:focus,
.texte a:hover, .texte a:active, .texte a:focus { color: var(--couleur-claire) ; }

/* *** Accueil *** */
.page_sommaire header.cartouche { padding: var(--marge) 0;}
.page_sommaire h1 { font-size: 4.5rem; text-align: center; }
.page_sommaire h1 small { font-size: 1.5rem; }
#descriptif_site_spip { text-align: center; }
#descriptif_site_spip p { margin: 0; }
#visuel-accueil { margin-bottom: var(--marge); }
.page_sommaire h2 { text-align: center;}
.section-accueil { padding: var(--marge-l) 0; }

.section-accueil:nth-of-type(odd) {
    background: var(--couleur4);
    background: linear-gradient(315deg, var(--couleur3) 0%, var(--couleur4) 100%);
}

/* Rubrique focus */
#rubrique-focus ul { margin-bottom: var(--marge); }
#rubrique-focus article { z-index: 0; margin: auto; max-width: 364px; background: var(--couleur2); height: 100%; }
#rubrique-focus figure {position: relative; overflow: hidden;margin: 0;  }
#rubrique-focus img { transition: transform var(--duree-transition); }

#rubrique-focus a:hover img, #rubrique-focus a:active img, #rubrique-focus a:focus img { transform: scale3d(1.05,1.05,1) }
#rubrique-focus .texte_article {  padding: .5rem; }
#rubrique-focus h3 { margin: 0; }

/* Rubrique one page */
.onepage { margin-bottom: var(--marge); }
.onepage li { --angle: -3deg; padding: var(--marge-l) 0; }
.onepage li:nth-of-type(odd) { position: relative; z-index: -1; border-image: conic-gradient( var(--couleur3) 0 0) fill 0//9999px;
  clip-path: polygon(
      -9999px calc(tan(var(--angle))*9999px),
      9999px calc(tan(var(--angle))*-9999px),
      calc(100% + 9999px) calc(100% - tan(var(--angle))*9999px),
      calc(100% - 9999px) calc(100% + tan(var(--angle))*9999px)
    );
}
.onepage li.alt { --angle: 3deg; }


/* *** PIED DE PAGE *** */
#footer { margin-top: var(--marge); padding: var(--marge-l) 0; font-size: .875rem; text-align: center; background: var(--couleur-sombre);}
.sociaux { margin-bottom: var(--marge-l); font-size: 1.25rem; }
#footer .item { margin: 0 .5rem; }

@media screen and (max-width: 900px) { 
    #navprincipale { display: flex;}
	#navprincipale button.burger[aria-expanded="true"] + #menuburger { visibility:visible; opacity: 1; }
	#menuburger { z-index: 1100; visibility: hidden; opacity: 0; position: fixed; top: 0; right: 0; color: var(--couleur-claire);
		padding-top: 5rem; overflow-y: scroll; width: 100%; height: 100%; text-align: center; background: var(--couleur2);
		overscroll-behavior-y: contain; overflow-y: auto;
		transition: opacity 0.35s; }
	#menuprincipal { padding-top: var(--marge-l); font-size: 1.25rem;}
	#menuprincipal a { padding: var(--marge-s); }

    #article-focus { text-align: center; }

}

@media (min-width: 900px) {

    :root { 
        --marge: 2rem;
    }

	#header { position: fixed; z-index: 100; bottom: 1rem; left: 1rem; }
	#navprincipale button.burger { display: none ; }
    #rubrique-focus { padding-left: var(--marge-s); padding-right: var(--marge-s);}

    #article-focus .container { display: flex; gap: var(--marge); align-items: center; }
    #article-focus h2 { text-align: left; }
    #article-focus .contenu { flex: 1; }

    #footer nav { text-align: right; }
}