/* poppins-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../polices/poppins-v24-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../polices/poppins-v24-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* poppins-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url('../polices/poppins-v24-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}


/* LES VARIABLES CSS */
:root { 
    --coul-fond: #f8f6f0;
    --coul-texte: #31282d;
    --coul-gris: #717981;
    --coul-emphase: var(--coul-reseau);
    /* Couleurs des 3 missions */
    --coul-reseau: #cf3b2e;
    --coul-mediation: #7bcaa3;
    --coul-zoom: #0377b6; /* autres ref : #467283 /  */

    --largeur-xs: 600px ;
    --largeur-s: 1000px ;
    --largeur: 1200px ;
    --border-radius-s: .25rem;
    --border-radius: .5rem;
    --duree-transition: 0.2s ;
    --marge: 1.25rem;
    --marge-s: calc( var(--marge) / 2) ;
    --marge-l: calc( var(--marge) * 3) ;
    --marge-xl: calc( var(--marge) * 5) ;
}

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-weight: 700; 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: 500; }
svg { fill: currentColor;}

.page { font-size: 1.125rem; color: var(--coul-texte); font-family: 'Poppins', sans-serif; font-weight: 300; }
.container, .container-s, .container-xs { margin:auto; padding:0.5rem; width: var(--largeur); max-width: 100%; }
.container-s { width: var(--largeur-s);}
.container-xs { width: var(--largeur-xs);}
.chapo { font-size: 1.25rem; font-weight: 700; }
.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) ; }
.surtitre { margin: 0; font-size: 1rem;}
.documents_portfolio, .documents_joints { margin-top: var(--marge-l); }

/* ACCUEIL */
#focus { border-top: 1px solid var(--coul-fond); }
#focus .visuel { border-radius: var(--border-radius); overflow: hidden;}
#focus .container { padding: 0;}
#focus header { padding: var(--marge); background: var(--coul-fond);  border-radius: var(--border-radius); }
#focus h2, #focus p { margin: 0;}

#actus .cartouche, #actus .liste-items li { margin-left: auto; margin-right: auto; max-width: 560px ;}
.introduction p { margin: 0; }
a:hover .introduction, a:active .introduction, a:focus .introduction { text-decoration: underline; }

#missions li { background: var(--coul-reseau) ; color: var(--coul-fond); }
#missions li:nth-of-type(2) { background: var(--coul-mediation) ; color: var(--coul-texte); }
#missions li:nth-of-type(3) { background: var(--coul-zoom) ; }
#missions a { padding: var(--marge-l) var(--marge-s); text-align: center; }
#missions svg { width: auto; height: 90px; }
#missions h3 { margin: var(--marge) auto; padding-top: var(--marge);  max-width: 250px;  border-top: 1px solid; }
#missions div.introduction { margin: var(--marge) auto; max-width: 350px; }

/* *** LES ACTUS *** */
.rubrique_actualites h1 { margin: var(--marge-l) 0; font-size: 3.5rem ;}
.liste.actualites li.item { margin-bottom: var(--marge-l); padding-bottom: var(--marge-l); border-bottom: 1px solid; }
.resume_article h3 { margin-bottom:.5em;}
.articles.actualites h2 {margin-bottom: var(--marge-s);}
.vignette_article { position: relative; }
.vignette_article picture { border-radius: var(--border-radius); overflow: hidden;}
.motclef { display: inline-block; padding: .15rem .5rem; font-size: 1rem; border-radius: var(--border-radius-s); background: var(--coul-texte); color: var(--coul-fond); }
.vignette_article .motclef { position: absolute; z-index: 10; top: .25rem; right: .25rem;  font-size: .75rem; }
.motclef.m1 { background-color: var(--coul-reseau); }
.motclef.m2 { background-color: var(--coul-mediation); color: var(--coul-texte); }
.motclef.m3 { background-color: var(--coul-zoom); }
 #connexe { margin: var(--marge-l) 0; padding: var(--marge-l) 0; background: var(--coul-texte); color: var(--coul-fond);}

 /* *** PRESENTATION / ONE PAGE *** */
 .onepage > li { margin: var(--marge-l) 0 ; }

 /* *** LE PIED DE PAGE *** */
 #footer { padding: var(--marge-l) 0; text-align: center;  font-size: 1rem; }
 #footer .container { border-top: 1px solid var(--coul-gris); padding-top: var(--marge-l);  }
 #footer .identite_extra {margin-bottom: var(--marge); }