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

/* LES VARIABLES CSS */
:root { 
    --font-titre: 'NomFont', Arial, Helvetica, sans-serif; 
    --font-contenu: 'NomFont', Arial, Helvetica, sans-serif; 
    --font-contenu-bold: 'NomFont-bold', Arial, Helvetica, sans-serif;
    --coul-fond: #003;
    --coul-texte: #f8f6f0;
    --coul-emphase: #21b2a6;
    --largeur-s: 900px ;
    --largeur: 1200px ;
    --duree-transition: .3s ;
    --marge: 1.5rem;
    --marge-s: calc( var(--marge) / 2) ;
    --marge-l: calc( var(--marge) * 2) ;
    --marge-xl: calc( var(--marge) * 3) ;
    --border-radius: .25rem;
}

html { font-size: clamp(80%, calc(-.8em + 3.8vw), 100%); }
body { background: var(--coul-fond); font-family: sans-serif; }

h1, .h1, h2, .h2, h3, .h3 { font-family: var(--font-titre); line-height: 1em; text-wrap: balance; }
h1, .h1 { font-size: 2.75rem; }
h2, .h2 { font-size: 2.25rem; }
h3, .h3 { font-size: 1.5rem; }
h4, .h4 { font-size: 1.0625rem; }

strong { font-weight: normal; font-family: var(--font-contenu-bold); }
svg { fill: currentColor;}

.page { position: relative; z-index: 10; font-size: 1.125rem; color: var(--coul-texte); font-family: var(--font-contenu); }
.container, .container-s { margin:auto; padding:0.5rem; width: var(--largeur); max-width: 100%; }
.container-s { width: var(--largeur-s) }
#fildariane { margin-top: var(--marge-xl)}

/* *** ACCUEIL **** */
.page_sommaire #header .accueil { opacity: 0; transition: opacity var(--duree-transition); }
.page_sommaire #header.defile .accueil { opacity: 1; }
.accueil svg { width: 150px; }
#introaccueil { position: relative; width: 100vw; height: 50vh; overflow: hidden; }
#videoaccueil { position: absolute; top: 50%; left: 50%; min-width: 100%; min-height: 100%; aspect-ratio: 16/9;
    background: url(../images/fondvideoaccueil.webp) no-repeat; background-size: cover; 
    transform: translate3d(-50%,-50%,0); }
#introaccueil header { position: sticky; z-index: 5; top: 2rem; left: 2rem; width: 550px; max-width: 85%; }
#introaccueil .logo.fond { padding-bottom: .1em ; }
#introaccueil svg { width: 250px; }
#introaccueil p { margin: 0 ; }
#introaccueil a.fond { margin-top: var(--marge); padding-top: var(--marge-s); padding-bottom: var(--marge-s);}

#presentation { margin-bottom: var(--marge-xl); font-size: 1.5rem;  background: var(--coul-emphase); color: var(--coul-fond); } 
#presentation .container-s { padding: var(--marge-l);} 
#presentation p:last-of-type { margin: 0; } 

#prestas { padding: 0; }
.page_sommaire #prestas { margin-bottom: var(--marge-xl); }
#prestas header { margin-bottom: var(--marge-l); }
#prestas a {padding: 0 var(--marge); }

#imageaccueil { display: block; position: relative; z-index: 0; }
#imageaccueil picture { margin: 0; }
#imageaccueil figcaption { position: absolute; z-index: 10; left: 0; bottom: 0; width: 100%; text-align: right; }
#imageaccueil .container { position: relative; padding-bottom: 0; height: 100%;}
#imageaccueil .legende { padding: .5rem 1.25rem; font-size: .825rem; }

#cta { z-index: 20; position: absolute; top: 0; left: 50%; height: 100%; max-width: 100%;
    transform: translate3d(-50%,0,0); }
#cta .boutons { background: var(--coul-emphase); color: var(--coul-fond);}
#cta .boutons { position: sticky; z-index: 20; margin-top: 8rem; top: 5rem; padding: var(--marge); 
    width: 450px; max-width: 80%;}

/* *** RUBRIQUE *** */
.page_rubrique .contenu { margin-bottom: var(--marge); }

/* *** RUBRIQUE ONE PAGE *** */
.rubrique_onepage h1 { text-align: center; }
.onepage article { margin-bottom: var(--marge-l); }

/* *** ARTICLE *** */
.chapo { margin-bottom: var(--marge); padding: var(--marge); color: var(--coul-fond); background: var(--coul-emphase); font-size: 1.25rem; }
.chapo p:last-of-type { margin: 0 }
.chapo a, .texte a {color: ; text-decoration: underline;}
.chapo a:hover, .chapo a:active, .chapo a:focus,
.texte a:hover, .texte a:active, .texte a:focus { color: var(--coul-emphase) ; }

#connexe { padding: var(--marge-l) 0; color: var(--coul-fond); background: var(--coul-emphase); }
#connexe .bordure-basse::after { background: var(--coul-fond); }

/* *** ARTICLE CONTACT *** */
#contact { padding: var(--marge) 0; background: var(--coul-emphase); color: var(--coul-fond); }
#identite_extra { margin-bottom: var(--marge); padding: var(--marge);}

/* *** FOOTER *** */
.id svg { width: 200px; }
#sociaux { margin: var(--marge-xl) 0; text-align: center; }
#sociaux h2 { max-width: 200px; }
#sociaux a { padding: 0 var(--marge-s); text-align: center; }
#footer { margin-top: var(--marge-l); padding: var(--marge-l) 0; font-size: 1rem; text-align: center; border-top: 1px solid var(--coul-emphase); }
.organization__nom { text-transform: uppercase; }
#footer nav a { padding: 0 .5em; font-size: .875rem; }
#footer .logo { display: block; margin-bottom: var(--marge-s); }