#cartogramme {
max-width: 1030px;
margin: 0 auto;
}

section.dec_contenu.dec_miseajour {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
opacity: .6;
font-size: 1.3rem;
}

#cartogramme .d_theantiqua {
font-family: “The Antiqua B”, “The Antiqua”, Georgia, “Droid-serif”, serif;
}

#cartogramme .d_marrsans {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
}

#cartogramme .d_marrsanscondensed {
font-family: “Marr Sans Condensed”, “Fette”, “Helvetica Neue”, Helvetica, arial, sans_serif;
}

#cartogramme .grasdecodeurs {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
font-size: 105%;
font-weight: 600;
}

#cartogramme .d_titre {
color: #2a303b;
margin-top: 10px;
padding: .4em 0;
display: block;
}

#cartogramme .d_texte {
margin: 1em 0;
padding: 0;
}

#cartogramme .d_explications {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
margin: 2em auto;
padding: 1em 1.5em;
border-radius: 2px;
font-size: 80%;
color: #3f4142;
background-color: #f3f3f4;
}

.tooltipusa {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
border-radius: 0;
padding: 0;
position: absolute;
max-width: 400px;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #E2E4E9 !important;
background: #fff !important;
color: #131e2b;
font-size: 1.4rem;
z-index: 5;
line-height: 1.9rem;
pointer-events: none;
}

.tooltipusa .contenant {
padding: 1rem 1.5rem;
}

.tooltipusa .contenant.desop {
margin-top: 0;
border-top: 1px solid #E2E4E9;
background-color: #f3f4f6;
color: rgba(0, 0, 0, .6);
}

.tooltipusa .titre_med {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
font-weight: 600;
font-size: 100%;
margin: .25em 0;
}

.tooltipusa .titre_tt {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
font-weight: 600;
font-size: 110%;
margin: .5em 0;
}

.tooltipusa .gris {
color: #a2a9ae;
}

.tooltipusa .bulle {
width: 1rem;
height: 1rem;
border: 0;
display: inline-block;
margin: -.3rem .5rem 0 0;
vertical-align: middle;
cursor: default;
}

.tooltipusa div {
display: block !important;
}

.tooltipusa .hr {
margin-top: 1rem;
border-top: 1px solid #e8eaee;
padding-bottom: 1rem;
}

.tooltipusa,
.arrow:after {
border: 1px solid #E2E4E9 !important;
}

.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}

.arrow:after {
background-color: #f3f4f6;
content: “”;
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

#cartogramme .source {
border-top: 1px solid #E2E4E9;
border-bottom: 1px solid #E2E4E9;
padding: 15px 0;
color: #717B8E;
font-size: 90%;
}

#cartogramme .passelect,
#graphe_grdelecteurs .passelect,
.contenanttouteslesbarres .portrait img {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#cartogramme span.desktop {
display: inline;
}

#cartogramme span.mobile {
display: none;
}

/* CSS du cartogramme */

.uscarto .st0 {
fill: #E7ECF0;
}

.uscarto .etat_fond {
fill: #E7ECF0;
stroke: #FFFFFF;
stroke-width: 0.5;
stroke-miterlimit: 10;
}

.uscarto .carre {
stroke-width: 0;
cursor: pointer;
}

.uscarto .carre.clair {
fill: #C4C9CC;
stroke-width: 0;
stroke: #9ca0a3;
}

.uscarto .st3 {
fill: none;
stroke: #131E2B;
stroke-width: 0.75;
stroke-miterlimit: 10;
}

.uscarto .st4 {
fill: #131E2B;
}

.uscarto .annotations {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
pointer-events: none;
font-size: 13px;
}

.uscarto .fin {
text-anchor: end;
}

.uscarto .milieu {
text-anchor: middle;
}

/* le graphique */

.graphelarge {
position: relative;
width: calc(100% – 200px);
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
padding-bottom: .6rem;
}

.graphelarge .candidats {
margin-bottom: .5rem;
margin-top: 2rem;
}

.graphelarge .candidats .nomcandidat {
display: inline-block;
width: 50%;
position: relative;
padding: 0 1rem;
}

.graphelarge .candidats .nomcandidat svg {
margin: 0 .25rem -.3rem .25rem;
height: 2rem;
width: 2rem;
}

.graphelarge .candidats .nomcandidat svg.rep path {
fill: rgba(178, 24, 43, 1);
}

.graphelarge .candidats .nomcandidat svg.dem path {
fill: rgba(33, 102, 172, 1);
}

.graphelarge .candidats .nomcandidat span {
font-size: 1.6rem;
font-weight: 400;
}

.graphelarge .candidats .nomcandidat.gras {
font-weight: 600;
}

.graphelarge .candidats .nomcandidat span.decal {
position: absolute;
margin-left: .5rem;
bottom: -1rem;
}

.graphelarge .candidats .nomcandidat.droite {
text-align: right
}

.graphelarge .candidats .nomcandidat .dedans {
position: relative;
display: inline-block;
}

.graphelarge .contenantbarres {
width: 100%;
padding: 0;
position: relative;
flex-wrap: nowrap;
justify-content: center;
display: flex;
}

.graphelarge .limite {
text-align: right;
font-size: 60%;
padding-right: .5rem;
width: 50%;
position: absolute;
bottom: 0.7rem;
left: 0;
pointer-events: none;
border-right: 1px solid #383f4e;
}

.graphelarge .limite span {
position: absolute;
top: -12px;
transform: translate(-50%, -50%);
}

.graphelarge .barre {
height: 2rem;
padding: .5rem 0;
font-size: 1.4rem;
color: #FFF;
font-weight: 500;
text-align: center;
display: inline-block;
}

.graphelarge .barre.disponibles {
color: rgba(0, 0, 0, .3);
}

.contenanttouteslesbarres {
max-width: 1030px;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
justify-content: center;
margin: 0 auto;
}

.contenanttouteslesbarres img {
width: 70px!important;
position: absolute!important;
top: 15px;
left: calc(50% – 35px);
height: 70px!important;
}

.contenanttouteslesbarres .dem,
.contenanttouteslesbarres .rep {
width: 100px;
}

.contenanttouteslesbarres .dem .portrait,
.contenanttouteslesbarres .rep .portrait {
padding-left: calc(45% – 35px);
padding-top: 0px;
margin-top: 0px;
z-index: 4 !important;
position: relative;
}

/* en mobile */

@media screen and (max-width:800px) {
.graphelarge {
padding-top: 2.5rem;
padding-bottom: .7rem;
}
.graphelarge .nomcandidat {
font-size: 85%;
}
.graphelarge .candidats .nomcandidat span {
font-size: 90%;
}
.graphelarge .limite {
bottom: .7rem;
}
.graphelarge .limite span {
position: absolute;
top: -12px;
transform: translate(-50%, -50%);
}
#cartogramme span.desktop {
display: none;
}
#cartogramme span.mobile {
display: inline;
}
.contenanttouteslesbarres div.dem,
.contenanttouteslesbarres div.rep,
#cartogramme .annotations,
#cartogramme .cacher {
display: none;
}
.graphelarge {
width: 100%!important;
}
.contenantbarres {
text-align: center;
}
.tooltipusa {
position: fixed;
width: 100%!important;
border-left-width: 0!important;
border-bottom-width: 0!important;
border-right-width: 0!important;
}
.tooltipusa:after {
content: ‘×’;
position: absolute;
top: .5rem;
right: .5rem;
color: #ccd0d3;
font-size: 3rem;
}
[data-color-mode=”dark”] .tooltipusa:after {
color: rgba(255, 255, 255, .5);
}
.graphelarge .candidats .nomcandidat svg {
margin: 0 .25rem -.2rem .25rem;
height: 1.5rem;
width: 1.5rem;
}
}

/* mode AEC */

.graphelarge.aec .limite {
bottom: 1.4rem;
}

/* mode nuit */

[data-color-mode=”dark”] .graphelarge .limite {
border-right: 1px solid rgba(255, 255, 255, .4);
}

[data-color-mode=”dark”] .uscarto .etat_fond,
[data-color-mode=”dark”] .uscarto .st0 {
fill: rgba(196, 201, 204, .25);
stroke: #171A1F;
}

[data-color-mode=”dark”] .uscarto .st3 {
stroke: #FFF;
}

[data-color-mode=”dark”] .uscarto .annotations,
[data-color-mode=”dark”] .uscarto .st4 {
fill: #FFF;
}

[data-color-mode=”dark”] .tooltipusa {
border-color: rgba(255, 255, 255, .2) !important;
border-width: 1px 0 0 0;
background: #333 !important;
color: rgba(255, 255, 255, .85) !important;
}

[data-color-mode=”dark”] .arrow:after {
border-color: rgba(255, 255, 255, .2) !important;
background: #1e1e1e !important;
}

[data-color-mode=”dark”] .tooltipusa .contenant.desop {
background-color: #1e1e1e;
border-color: rgba(255, 255, 255, .2)!important;
color: rgba(255, 255, 255, .65) !important;
}

[data-color-mode=”dark”] .uscarto .carre.clair {
fill: #7a868c;
stroke: #555e63;
}

<!– –>

#multiples,
.premiereligne {
max-width: 1000px;
margin: 0 auto;
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
}

#multiples .d_theantiqua {
font-family: “The Antiqua B”, “The Antiqua”, Georgia, “Droid-serif”, serif;
}

#multiples .d_marrsans {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
}

#multiples .d_marrsanscondensed {
font-family: “Marr Sans Condensed”, “Fette”, “Helvetica Neue”, Helvetica, arial, sans_serif;
}

#multiples .grasdecodeurs {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
font-size: 105%;
font-weight: 600;
}

#multiples .d_titre {
color: #2a303b;
margin-top: 10px;
padding: .4em 0;
display: block;
}

.article–longform .article__content> .d_texte {
margin: 1em 0;
padding: 0;
font-size: 1.9rem;
line-height: 3rem;
}

.article__content .d_explications {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
margin: 2em auto;
padding: 1em 1.5em;
border-radius: 2px;
line-height: 2rem;
font-size: 70%;
color: #3f4142;
background-color: #f3f3f4;
}

#multiples .source {
border-top: 1px solid #E2E4E9;
border-bottom: 1px solid #E2E4E9;
padding: 15px 0;
color: #717B8E;
font-size: 90%;
}

#multiples .passelect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

#multiples span.desktop {
display: inline;
}

#multiples span.mobile {
display: none;
}

.premiereligne {
margin-top: 3rem;
display: flex;
justify-content: space-between;
}

.premiereligne .dem,
.premiereligne .rep {
width: 40%;
font-size: 90%;
font-family: “Marr Sans Condensed”, “Fette”, “Helvetica Neue”, Helvetica, arial, sans_serif;
font-weight: 500;
text-transform: uppercase;
text-align: center;
border-bottom: 1px solid rgba(0, 0, 0, .1);
padding-bottom: 1rem;
}

.premiereligne .dem {
margin: 0 1rem 0 1rem;
}

.premiereligne .rep {
margin: 0 1rem 0 2rem;
}

.premiereligne .rien {
width: 20%;
}

#multiples.tableau {
margin-top: 2rem;
font-size: 80%;
display: flex;
justify-content: space-between;
}

#multiples.tableau .titrecol {
text-align: left;
padding-bottom: 0;
padding-bottom: .2rem;
padding-left: 1rem;
font-size: 90%;
font-family: “Marr Sans Condensed”, “Fette”, “Helvetica Neue”, Helvetica, arial, sans_serif;
text-transform: uppercase;
letter-spacing: 0.05rem;
color: #3B3B3B;
}

#multiples.tableau .hr {
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, .1);
margin-bottom: .75rem;
}

/*.tableau .indecis.colonne {
margin-top: 0;
background-color: rgba(0, 0, 0, .04);
border: 1px solid rgba(0, 0, 0, .15);
align-self: flex-start;
border-radius: 2px;
padding: 1rem 1rem 1.5rem 1rem;
}
*/

.tableau .colonne {
padding: 1rem;
width: 32%;
}

.tableau .colonne > .contenant_graphe:last-child .contenant_barretab {
border-bottom: 0px solid transparent;
}

/* petit bricolage de CSS pour les colonnes avec peu de délégués */

/*.tableau .colonne.rplusplus .contenant_graphe .nometat,
.tableau .colonne.dplus .contenant_graphe .nometat {
width: 45%;
}

.tableau .colonne.rplusplus .contenant_graphe .chiffre {
margin-left: -30%;
}

.tableau .colonne.dplus .contenant_graphe .chiffre {
margin-left: -20%;
}*/

.contenant_graphe {
font-size: 80%;
margin-bottom: .2rem;
}

.contenant_graphe .contenant_barretab {
display: flex;
justify-content: flex-start;
align-items: center;
border-bottom: 1px solid #D6DDE2;
padding-bottom: .2rem;
}

.nometat {
padding-right: .4rem;
text-align: left;
width: 35%;
}

.nometat.english {
width:15%;
}

.nometat svg {
height: 1.3rem;
width: 1.3rem;
margin-bottom: -.3rem;
margin-left: .5rem;
}

span.check svg {
height: 1.5rem;
width: 1.5rem;
margin: 0 .2rem;
margin-bottom: -.1rem;
}

.nometat path,
span.check path {
fill: #5a6272;
fill-opacity: .5;
}

.contenant_central {
width: 55%;
align-self: stretch;
}

.contenant_central.english {
width:70%;
}

.contenant_graphe .contenant_barretab .chiffre {
text-align: center;
width: 10%;
align-self: center;
padding-left: 5px;
font-size: 90%;
margin-top: -.15rem;
}

.contenant_graphe .contenant_barretab .chiffre.s_ca.ok {
color: #FFF;
}

.contenant_graphe .barretab {
height: 80%;
margin-top: 1%;
}

.nometat span.bulle {
border: 1px solid rgba(0, 0, 0, .2);
border-radius: 50%;
width: 1rem;
height: 1rem;
display: inline-block;
margin: -.3rem .5rem 0 0;
vertical-align: middle;
cursor: default;
}

/* le tooltip */

.tooltipdecodeurs {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
border-radius: 0;
padding: 2rem 1.5rem;
position: absolute;
z-index: 9999;
max-width: 450px;
-webkit-box-shadow: none !important;
box-shadow: none !important;
border: 1px solid #E2E4E9 !important;
background: #fff !important;
color: #131e2b;
font-size: 1.4rem;
z-index: 5;
}

.tooltipdecodeurs .titre_tt {
font-family: “Marr Sans”, “Helvetica Neue”, Helvetica, Arial;
font-weight: 600;
font-size: 110%;
margin: .5em 0;
}

.tooltipdecodeurs .gris {
color: #a2a9ae;
}

.tooltipdecodeurs .bulle {
border-radius: 50%;
width: 1rem;
height: 1rem;
border: 0;
display: inline-block;
margin: -.3rem .5rem 0 0;
vertical-align: middle;
cursor: default;
}

.tooltipdecodeurs div {
display: block !important;
}

.tooltipdecodeurs .hr {
margin-top: 1rem;
border-top: 1px solid #e8eaee;
padding-bottom: 1rem;
}

.tooltipdecodeurs,
.arrow:after {
background: #FFF;
border: 1px solid #E2E4E9 !important;
}

.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}

.arrow:after {
content: “”;
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

@media screen and (max-width:800px) {
.article–longform .article__content> .d_texte {
font-size: 1.8rem;
font-weight: 500;
line-height: 2.8rem;
}
.contenant_graphe {
display: inline-block;
margin: .2rem;
}
.contenant_graphe .contenant_barretab {
border-bottom: 0px solid transparent!important;
}
.contenant_barretab .nometat,
.contenant_barretab .chiffre {
display: none;
}
.premiereligne {
display: none;
}
.tableau .colonne {
width: 100%;
align-self: flex-start;
padding: .5rem 2rem;
}
.tableau .indecis.colonne {
margin-top: 1rem;
border-bottom: 1px solid rgba(0, 0, 0, .1);
border-top: 1px solid rgba(0, 0, 0, .1);
padding: .5rem 2rem 2rem 2rem;
}
.contenant_barretab span.blanc {
align-self: center;
color: white;
}
.contenant_central .barretab {
display: flex;
justify-content: space-around;
width: 3.2rem!important;
height: 3.2rem;
font-size: 1.4rem;
cursor: default;
}
.contenant_central .barretab:hover {
border: 3px solid rgba(0, 0, 0, .25);
}
#multiples span.desktop {
display: none;
}
#multiples span.mobile {
display: inline;
}
#multiples.tableau {
display: initial;
}
#multiples.tableau .titrecol {
padding-left: initial;
border-bottom: 0 solid rgba(0, 0, 0, 0);
text-align: left;
padding-left: 1rem;
margin: 1rem 0 0 0;
}
}

[data-color-mode=”dark”] #multiples.tableau .titrecol {
color:rgba(255, 255, 255, .85);
}
[data-color-mode=”dark”] #multiples.tableau .hr {
border-bottom: 1px solid rgba(255, 255, 255, .3);
}
[data-color-mode=”dark”] .article__content .d_explications {
background-color: #3f4142;
color: rgba(255, 255, 255, .85);
}

[data-color-mode=”dark”] .tooltipdecodeurs {
border-color: rgba(255, 255, 255, .2) !important;
border-width: 1px 0 0 0;
background: #1e1e1e !important;
color: rgba(255, 255, 255, .85) !important;
}

[data-color-mode=”dark”] .arrow:after {
border-color: rgba(255, 255, 255, .2) !important;
background: #1e1e1e !important;
}

Les Etats américains sont classés ci-dessous selon le nombre de grands électeurs qu’ils comptent mais aussi selon leur tendance à voter davantage pour un des deux camp, ou s’ils sont indécis, selon le Cook political report, publication qui fait référence en matière de suivi non-partisan des élections aux Etats-Unis.

States are ranked according to the number of electors they have, and classified according to their tendency to vote more for one of the two camps, or if they are undecided (source: Cook Political Report).

* Les Etats du Maine (quatre grands électeurs) et du Nebraska (cinq grands électeurs) apparaissent plusieurs fois du fait qu’ils attribuent leurs grands électeurs en fonction des circonscriptions législatives, et non pas simplement au candidat arrivé en tête.

* The states of Maine (four electoral votes) and Nebraska (five electoral votes) appear multiple times because they award their electors based on congressional districts, and not to the overall winner statewide.