.intro{padding:20px 0;color:#fff;background:linear-gradient(90deg,var(--purple-l) 0%,var(--zahri-pink) 100%)}
.intro h1{margin:0;color:var(--brasso)}
.data-stories .copy{padding:40px 20px;background:linear-gradient(180deg,var(--neon-carrot) 0%,var(--brasso) 100%)}
.demographic-stories .container >h2{margin-top:0;text-align:center;margin-bottom:1em}
.stories-container{display:grid;gap:60px}
.story h3{color:var(--lilac)}
.results-section{padding:40px 20px;background-color:var(--gray-l)}
.results-section .copy{text-align:center;max-width:750px;margin:0 auto}
.results-section h2{margin-top:0;color: var(--purple-l);}
.results-section p{text-align: left;font-weight: 500;}
.ressources-section h2{margin:0;text-align:center}
.ressources-section header{margin-bottom:1.5em}
.ressources-section .container{display:grid;grid-template-columns:repeat(auto-fill,minmax(327px,1fr));grid-gap:30px}
.card{box-shadow:0 10px 15px -3px #0000001A;padding:24px;display:grid;gap:1em;color:var(--zahri-pink);border-radius:10px}
.card>*{margin:0}
.card .cat{gap:5px;justify-content:space-between}
.card h3{font-weight:500;letter-spacing:normal;font-size:clamp(1.25rem,1.0278rem + 1.1111vw,1.5rem)}
.card .btn{margin-right:auto}
.card img{width:100%}
.card.email-tpl :where(p.cat, h3){color: var(--carrot);}
.btn.purple.disabled, .btn.purple.disabled:hover{cursor: default;color: #aaa !important;position: relative;background-color: #fff;border-color: #aaa !important;}
.btn.purple.disabled span{min-width: 200px;text-align: center;}
.btn.purple.disabled .cs{position: absolute;opacity: 0;transition: opacity 0.2s ease-in-out 0.1s}
.btn.purple.disabled span:not(.cs){opacity: 1;transition: opacity 0.2s ease-in-out 0.1s}
.btn.purple.disabled:hover span:not(.cs){opacity: 0;}
.btn.purple.disabled:hover .cs{opacity: 1;}
@media screen and (max-width: 767px) {
.story{flex-direction:column-reverse}
.story figure{margin-bottom:1em}
}
@media screen and (min-width: 768px) {
.story:nth-child(even){flex-direction:row-reverse}
.story{gap:40px;align-items:center}
.story >*{flex:1 0 50%}
}
@media screen and (max-width: 1023px) {
.intro p{margin:10px 0 0}
.data-stories .mob-only{width:100%;height:100%;object-fit:cover}
.data-stories img:not(.mob-only){display:none}
.ressources-section .container{padding:0 1em}
}
@media screen and (min-width: 1024px) {
.mob-only{display:none}
.intro .container>*{flex:1 0 48%}
.intro .container{gap:40px;align-items:center}
.intro h1{text-align:right}
.intro p{margin:0;padding-right:8vw}
.data-stories{position:relative}
.data-stories figure{flex: 1 0 48%;}
.data-stories :where(.w,.chart){position:absolute;bottom:0;right:0}
.data-stories .w{z-index:3;height: 100%;}
.data-stories .chart{width:70%}
.data-stories .copy{padding:40px;display:grid;place-content:center}
.data-stories .copy .btn{margin-right:auto}
.story .copy{flex:1 1 auto}
.story figure{flex:0 0 505px}
.card{box-shadow:0 4px 4px 0 #00000040}
}
@media screen and (min-width: 1280px) {
.intro .container{gap:70px;height:246px}
.data-stories .copy{padding:40px 100px;flex:1 1 auto;display:flex;flex-direction:column;justify-content:center}
.data-stories .copy p{max-width:500px}
/*.data-stories .w{width:664px}*/
.data-stories figure{flex:0 0 585px}
.data-stories .chart{width:auto}
.stories-container,.story{gap:100px}
}