/*
Theme Name: Association Sourires de Femmes
*/

/*  General Rules   */

:root {
    --light : #C98EBE;
    --dark : #714A98;
    --mid : #E471A9;
    --accent : #F2AD56;
    --white : #FFFFFF;
    --black : #1e1e1e;
    --lightgrey : #eee;
    --darkgrey : #666;
}

*, *:after, *:before {
    box-sizing: border-box;
    width: auto;
    height: auto;
    position: relative;
    transition: .3s ease-in-out;
    color: inherit;
    font-family: inherit;
    z-index: 9;
}

.mob-on {
    display: none !important;
}

.fg {
    z-index: 90;
}

.bg {
    z-index: 5;
}

.smooth-shadow {
    box-shadow: .5vmax 1vmax 2vmax rgba(0 0 0 / 25%);
}

img[class^="fi"] {
    height: 100%;
    width: 100%;
    position: absolute;
}

img.fill {
    object-fit: cover;
}
img.fit {
    object-fit: contain;
}

a {
    text-decoration: none;
}
ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
ul.list {
    list-style: disc;
    gap: 1vmin;
    display: flex;
    flex-direction: column;
    font-size: x-large;
}

.link-butt, 
button {
    font-weight: 800;
    background: transparent;
    display: inline-block;
    width: fit-content;
    padding: .8vmax 1.75vmax;
    border-radius: 1vmin;
    cursor: pointer;
    font-size: 1em;
    line-height: 1.2;
    color: var(--dark);
    border: none;
}

.bord {
    border: solid 2pt;
    border-color: inherit;
}

p.med-txt {
    width: clamp(300px, 50%, 2000px);
    margin: 7.5vh auto;
    text-align: center;
}

html body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "outfit", sans-serif;
}


/*  Background - Combinations  */

.bg-grey {
    background: var(--lightgrey);
    color: var(--darkgrey);
}

.bg-dk {
    background: var(--dark);
    color: var(--white);
}

.bg-lgt {
    background: var(--light);
    color: var(--dark);
}

.bg-md {
    background: var(--mid);
    color: var(--dark);
}

.bg-acc {
    background: var(--accent);
    color: var(--dark);
}

.bg-bk {
    background: var(--black);
    color: var(--white);
}

.bg-wh {
    background: var(--white);
    color: var(--dark);
}

.acc-sec {
    background: var(--lightgrey);
    padding: 7.5vmax 10%;
    margin: 0 0 10vmax;
}


/*  Colors  */

.cl-lgt {
    color: var(--light);
}
.cl-dk {
    color: var(--dark);
}
.cl-mid {
    color: var(--mid);
}
.cl-wh {
    color: var(--white);
}
.cl-bk {
    color: var(--black);
}
.cl-acc {
    color: var(--accent);
}

.bg-lgt.bord {
    border-color: var(--light);
}
.bg-dk.bord {
    border-color: var(--dark);
}
.bg-md.bord {
    border-color: var(--mid);
}

/*  Background - Hover - Combinations  */

a.bord:hover, 
button.bord:hover {
    color: var(--mid);
}

a.bg-dk:hover, 
button.bg-dk:hover {
    background: var(--accent);
    color: var(--dark);
    border-color: transparent;
}

a.bg-lgt:hover, 
button.bg-lgt:hover {
    background: var(--dark);
    color: var(--mid);
    border-color: transparent;
}

a.bg-md:hover, 
button.bg-md:hover {
    background: var(--white);
    color: var(--mid);
    border-color: transparent;
}

a.bg-acc:hover, 
button.bg-acc:hover {
    background: var(--black);
    color: var(--accent);
    border-color: transparent;
}

a.bg-bk:hover, 
button.bg-bk:hover {
    background: var(--white);
    color: var(--black);
    border-color: transparent;
}

a.bg-wh:hover, 
button.bg-wh:hover {
    background: var(--black);
    color: var(--white);
    border-color: transparent;
}


/*  Displays    */

*[class*="flex"] {
    display: flex;
}
*[class*="-wrap"] {
    flex-wrap: wrap;
}
*[class*="-col"] {
    flex-direction: column;
}

.fx-gr {
    flex-grow: 1;
}

.a-cen {
    align-items: center;
}
.a-end {
    align-items: end;
}

.jst-sb {
    justify-content: space-between;
}
.jst-cen {
    justify-content: center;
}
.jst-end {
    justify-content: end;
}

.all-cen {
    justify-content: center;
    align-items: center;
}

*[class*="grid"] {
    display: grid;
}

.four-col {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
}

.three-col {
    grid-template-columns: repeat(3, 1fr);
    width: 100%;
}

.two-col {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}


.cl-two {
    grid-column: span 2;
}
.cl-three {
    grid-column: span 3;
}
.cl-four {
    grid-column: span 4;
}
.cl-five {
    grid-column: span 5;
}
.col-full {
    grid-column: -1/1;
}
.rw-two {
    grid-row: span 2;
}
.gpone {
    gap: 1vmax;
}
.gptwo {
    gap: 3vmax;
}
.gpthree {
    gap: 5vmax;
}



/*  Headings    */

h1, h2, h3, h4 {
    margin: 0;
    font-weight: unset;
    line-height: 1.05;
    width: fit-content;
    font-family: "newake", outfit, sans-serif;
}

h2 {
    font-size: 4em;
}
h3 {
    font-size: 3em;
}
h6 {
    margin: 0;
    font-size: 1.25em;
    font-weight: 500;
}

.big-h {
    font-size: 5em;
}


/*  header#header   */

header#header {
    padding: .65vmax 5%;
    position: fixed;
    z-index: 999;
    width: 100%;
    backdrop-filter: blur(64px);
    background: #ffffffbb;
    top: 0;
}

header#header a.link-butt {
    font-size: smaller;
}

a#header-logo img {
    height: 7vh;
}

div#menu-burger {
    width: 3.5vmax;
    cursor: pointer;
    aspect-ratio: 1.75;
}

div#menu-burger hr {
    width: 100%;
    margin: 0;
    border: none;
    height: 8%;
    background: var(--dark);
    position: absolute;
}

div#menu-burger hr:first-child {
    top: 25%;
}

div#menu-burger hr:last-child {
    bottom: 25%;
}

section#intro-pitch h1 {
    font-size: 25vmin;
    line-height: .67;
}

section#intro-pitch {
    width: clamp(300px, 55%, 1400px);
    margin: 0vmax auto;
    padding: 12.5vmax 0 5vmax;
}

div#intro-bg-img:after {
    height: 100%;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background: rgb(0, 0, 0);
    opacity: .75;
    content: '';
    z-index: 10;
}
div#intro-bg-img {
    width: 100%;
    height: 90vh;
    position: absolute;
    overflow: hidden;
}



nav#menu-bloc {
    z-index: 995;
    position: fixed;
    background: #000000bb;
    height: 100vh;
    right: 0;
    justify-content: center;
    backdrop-filter: blur(1vmax);
    padding: 0 5vmax;
    font-size: x-large;
    transform: translateX(100%);
    top: 0;
}

nav#menu-bloc.on {
    transform: translateX(0);
    padding: 7.5vh 5vmax 0;
}

nav#h-m-pages a {
    font-family: "newake", outfit, sans-serif;
    font-size: 2em;
}
nav#h-m-pages a:hover {
    color: var(--mid);
}
nav#menu-bloc nav {
    align-items: end;
    gap: 1vmin;
}


nav#menu-bloc footer a:hover img {
    opacity: .5;
}
nav#menu-bloc footer a img {
    height: 1.2em;
}
nav#menu-bloc footer a {
    width: min-content;
}
nav#menu-bloc footer {
    text-align: right;
    width: fit-content;
    gap: 1vmax 4vmax;
}


div#menu-burger.open hr {
    height: 20%;
}
div#menu-burger.open hr:last-child {
    bottom: 40%;
    transform: rotate(-45deg) scale(.5);
}
div#menu-burger.open hr:first-child {
    transform: rotate(45deg) scale(.5);
    top: 40%;
}



/*  Footer      */

footer#footer header img {
    width: 25%;
}
footer#footer > * {
    padding: 5vmax 5%;
}
footer#footer footer div h4 {
    font-size: 2em;
}
footer#footer footer hr {
    width: 50%;
    margin: 1vmax 0;
}
footer#footer footer div div main img {
    height: 1vmax;
}
footer#footer footer div div aside img {
    height: 1.5vmax;
}
footer#footer header a.link-butt {
    padding: 2vmax 4vmax;
    font-size: x-large;
}
footer#footer header nav {
    grid-template-rows: auto auto;
    gap: 1.25vmax 5vmax;
    font-weight: 600;
    font-size: large;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
}


section#intro-pitch footer article main h4 {
    font-size: 3vmin;
    text-align: center;
    width: 100%;
}
section#intro-pitch footer article main {
    border-radius: 2vmax;
    background: white;
    width: 80%;
    margin: 1vmax auto;
    height: fit-content;
    text-align: center;
    font-size: smaller;
    padding: 1vmax;
}
section#intro-pitch footer article {
    aspect-ratio: 6 / 7;
    overflow: hidden;
    border-radius: 2vmax;
    flex-direction: column;
}

section#intro-pitch footer {
    width: 125%;
}



.mi-wi {
    margin: 5vmax auto;
    width: clamp(300px, 85%, 1800px);
}

section#smile main, 
section#homeCTA main {
    width: calc(50% - 3vmax);
}

section#smile aside.grid > div[class*="bg"] h4 {
    font-size: xx-large;
    padding: 0;
    font-weight: 900;
}
section#smile aside.grid > div[class*="bg"] p {
    margin: 0;
    font-weight: 600;
    line-height: 1;
}
section#smile aside.grid > div[class*="bg"] {
    text-align: center;
    padding: 0 2vmax;
    gap: 1vmin;
}
section#smile aside.grid > div {
    overflow: hidden;
    border-radius: 1vmax;
}
section#smile aside.grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 1vmin;
    grid-template-rows: repeat(4, 15vh);
    width: 50%;
}

aside.grid .bg-dk {
    grid-column-start: 1;
    grid-row-start: 2;
}

section#activ-main main.grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1vmax;
}


/*  Activité Main   */

section#activ-main {
    padding: 5vmax 0;
}

section#activ-main main > a:after {
    z-index: 7;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 75%;
    background: linear-gradient(0deg, black, transparent);
}

section#activ-main main > a img {
    z-index: 5;
}
section#activ-main main > a {
    overflow: hidden;
    border-radius: 2vmax;
}
section#activ-main main > a:not(first-child) {
    aspect-ratio: 1.375;
}


section#activ-main main.grid > a i {
    font-style: normal;
    padding: .75vmax 1.25vmax;
    border-radius: 1vmin;
    font-size: smaller;
    line-height: 1;
    display: inline-block;
    text-transform: capitalize;
}
section#activ-main main.grid > a footer {
    padding: 0 1.5vmax 2vmax;
}
section#activ-main main.grid > a:not(.cl-two) h5 {
    font-size: x-large;
    margin: 1vmin 0;
    font-weight: 100;
    font-family: "newake", outfit, sans-serif;
    letter-spacing: .1vmin;
}
section#activ-main main.grid > a p {
    font-size: smaller;
    margin: 0;
}


section#activ-main main > a.cl-two h5 {
    margin: 1vmax 0 1vmin;
    font-size: xxx-large;
    line-height: 1;
}
section#activ-main main.grid a.cl-two i.link-butt {
    position: absolute;
    left: 1.5vmax;
    top: 2.5vmax;
}
section#activ-main main.grid > a.cl-two i {
    font-size: medium;
}



/*  Home Blog       */

section#home-blog {
    padding: 5vmax 0;
}
section#home-blog h3 {
    width: 35%;
    margin: 0 auto;
    text-align: center;
}

section#home-blog > main {
    grid-template-columns: repeat(3, 1fr);
    gap: 1vmax;
    padding: 2vmax;
}
section#home-blog main article a.blog-thumb {
    aspect-ratio: 4 / 3;
    width: 100%;
    display: block;
    border-radius: 2vmax;
    overflow: hidden;
}
section#home-blog > main article main {
    padding: 2vmax;
}   
section#home-blog > main article main p {
    font-size: small;
    color: #666;
}
section#home-blog > main article main h5 {
    margin: 1vmax 0 0;
    font-size: xx-large;
    font-family: "newake";
    font-weight: unset;
}


/*  Home CTA    */

section#homeCTA aside {
    width: 50%;
    aspect-ratio: 1.5;
}

section#homeCTA {
}
section#homeCTA aside div {
    position: absolute;
    border-radius: 2vmax;
    overflow: hidden;
}
section#homeCTA aside div:first-child {
    aspect-ratio: .5;
    width: 25%;
    left: 20%;
}
section#homeCTA aside div:nth-child(2) {
    aspect-ratio: 1.75;
    width: 45%;
    top: 45%;
}
section#homeCTA aside div:nth-child(3) {
    aspect-ratio: 1.5;
    width: 55%;
    left: 35%;
    top: 25%;
}
section#homeCTA aside div:nth-child(4) {
    aspect-ratio: 1;
    width: 30%;
    left: 30%;
    top: 55%;
}



/*  Blog articles */

form.content-src {
    align-items: normal;
}
form.content-src input {
    border: none;
    border-radius: 1vmax;
    padding: 2vmax;
    width: 35vw;
    box-shadow: .25vmax .5vmax 1.5vmax rgba(0 0 0 / 25%);
}

section#blog-articles header nav a {
    font-family: outfit, sans-serif;
    font-weight: 600;
    font-size: small;
    border-radius: 3vmax;
}
section#blog-articles header nav {
    width: 75%;
    justify-content: center;
}
section#blog-articles main.grid a > div {
    aspect-ratio: 1.25;
    overflow: hidden;
    border-radius: 2vmax;
}
section#blog-articles main.grid a > footer {
    padding: 1vmax 2vmax;
}
section#blog-articles main.grid i {
    color: gray;
    font-size: small;
}
section#blog-articles main.grid em {
    font-style: normal;
    letter-spacing: .05vmin;
    font-size: small;
    padding: 1.5vmin 2.25vmin;
    border-radius: 3vmax;
}
section#blog-articles main.grid p {
    margin: 0;
    font-size: small;
    color: gray;
}
section#blog-articles main.grid h5 {
    margin: 1vmax 0 0.5vmin;
    font-size: 1.8em;
    line-height: 1;
    font-family: "newake", outfit, sans-serif;
    font-weight: 100;
}

footer#pagination a.link-butt {
    padding: 2vmin !important;
}
footer#pagination p {
    color: var(--dark);
    line-height: .05;
    font-size: 3vmax;
    margin: 0;
}




/*  Nesletter Bar   */

section#newsletter-bar {
    height: 60vh;
    margin: 10vmax 0;
}
main#newsletter-form {
    background: rgba(0 0 0 / 25%);
    backdrop-filter: blur(12px);
    padding: 4vmax;
    border-radius: 2vmax;
    overflow: hidden;
    box-shadow: .5vmax 1vmax 2vmax rgba(0 0 0 / 50%);
    width: 50%;
}
main#newsletter-form aside {
    width: 40%;
}
main#newsletter-form aside p {
    margin: 0;
}
main#newsletter-form form {
    width: 55%;
}
main#newsletter-form form input {
    border-radius: .5vmax;
    border: none;
    padding: 1.25vmax;
}
main#newsletter-form form button {
    padding: 1vmax 3vmax;
    font-size: large;
}



/*  Blog CTA  */

section#blog-cta a:hover img {
    scale: 1.15;
    opacity: .85;
}
section#blog-cta a:after, .bot-shd:after {
    content: '';
    position: absolute;
    z-index: 7;
    width: 100%;
    height: 75%;
    bottom: 0;
    left: 0;
    background: linear-gradient(0deg, black, transparent);
}
section#blog-cta a {
    color: var(--white);
    overflow: hidden;
    aspect-ratio: .775;
    border-radius: 2vmax;
}
section#blog-cta a footer {
    padding: 3vmax;
    text-align: center;
}
section#blog-cta a footer h5 {
    font-size: 3em;
    margin: 0 0 1vmin;
    font-family: "newake", outfit, sans-serif;
    font-weight: 100;
}
section#blog-cta a footer p {
    margin: 0;
}
section#blog-cta a:hover footer {
    scale: .9;
}


section#activ-main.blog {
    padding: 2vmax 0;
}


/*  Blog Temoignage     */


section#blog-tem aside {
    width: 40%;
}
section#blog-tem aside div {
    overflow: hidden;
    width: 80%;
    border-radius: 2vmax;
    aspect-ratio: .85;
    margin: 0 auto;
}
section#blog-tem main {
    width: calc(60% - 5vmax);
    gap: 2vmax;
}
section#blog-tem main header img {
}
section#blog-tem main header h4 {
    font-size: 3em;
}



/*  About  Intro    */

section#about-intro {
    padding: 5vmax 0 0;
}
section#about-intro h1 {
    text-align: center;
    line-height: .85;
    font-family: "newake", outfit, sans-serif;
    font-size: 8vmax;
    margin: 0;
}
section#about-intro > div {
    width: 85%;
    height: 45vh;
    overflow: hidden;
    border-radius: 3vmax;
    touch-action: pan-y;
}

.carousel-track {
    display: flex;
    height: 100%;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.carousel-slide {
    flex: 0 0 100%;
    position: relative;
    height: 100%;
}

.carousel-bullets {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
    z-index: 10;
}

.bullet {
    width: 10px;
    height: 10px;
    background-color: #fff5;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}
.bullet.active {
    background-color: #fff;
}




section#about-intro h5 {
    margin: 0 0 2vmax;
    font-size: 2.25vmax;
    font-family: "newake", outfit, sans-serif;
    font-weight: 100;
}
section#about-intro p {
    margin: 0 0 1vmax;
}
section#about-intro footer > * {
    width: 50%;
}
p.txt-commu {
    margin: 0 auto;
    padding: 1vmax 2vmax;
    border-radius: 1vmin;
    width: fit-content;
}
p.txt-commu a {
    font-weight: 800;
}


/*  About - History   */

section#his-mis {
    padding: 10vmax 10% 5vmax;
}
section#his-mis h3, section#abt-obj h3 {
    line-height: .8;
    font-size: 5em;
}
section#his-mis div.bg-wh {
    padding: 2vmax;
    display: flex;
    align-items: center;
    flex-direction: column;
    text-align: center;
    border-radius: 2vmax;
    width: 100%;
}
section#his-mis div h4 {
    font-size: 3em;
}
section#his-mis div.bg-wh p {
    font-size: smaller;
}
section#his-mis div.his-img {
    width: 100%;
}
section#his-mis div.his-img div {
    overflow: hidden;
    border-radius: 2vmax;
    width: 100%;
    height: 30vh;
}


/*  Objectives  */

section#abt-obj p {
    margin: 0 0 1vmax;
}
section#abt-obj > main div {
    aspect-ratio: 1.15;
    width: 100%;
    overflow: hidden;
    border-radius: 3vmax;
}
section#abt-obj > main {
    width: 100%;
    gap: 2vmax;
}
section#abt-obj > main div h5 {
    margin: 0 auto 3vmax;
    font-size: 1.5vmax;
    width: 80%;
    line-height: 1;
}



/*    Visions Values      */

section#val-vis {
    align-items: start;
    padding: 5vmax 0 2vmax;
}
section#val-vis > section {
    padding: 3vmax;
    border-radius: 3vmax;
}
section#val-vis > section h5 {
    margin: 1vmax 0 0;
    font-size: 2em;
    line-height: 1;
}



/*     Collaborations    */

section#abt-col h2 {
    margin: 0 0 5vmax;
    padding: 2vmax 0 0;
}

section#abt-col main article ul {
    width: calc(67.5% - 3vmax);
}
section#abt-col main article aside {
    width: 32.5%;
}

section#abt-col main article ul li {
    width: min-content;
}
section#abt-col main article ul li img {
    height: 5.5vmax;
}
section#abt-col main article ul li p {
    font-size: smaller;
    color: var(--darkgrey);
    text-align: center;
}



article.abt-gst ul {
    gap: 1vmax 3vmax;
  flex-wrap: wrap;
}
article.abt-gst li img {
    scale: 1.85;
    transform: translateY(15%);
  height: auto !important;
}
article.abt-gst li div {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    width: 20vmin;
    border-radius: 2vmax;
}
article.abt-gst li p {
    text-align: left !important;
}
article.abt-gst li h5 {
    font-size: 2vmin;
    font-weight: 800;
    margin: 1vmax 0;
}


/*     Form    */

.anon {
    display: inline-flex;
    align-items: center;
    gap: 1vmax;
}
.anon > div {
    border-radius: 10em;
    aspect-ratio: 5 / 2;
    border: solid 2pt var(--black);
    display: inline-block;
    width: 4vw;
    padding: .75vmin;
}


.anon div div {
    aspect-ratio: 1;
    background: var(--black);
    border-radius: 10em;
    width: 40%;
    transform: translateX(150%);
}

.anon > div.open {
    border: solid 2pt var(--light);
}
.anon div.open div {
    transform: translateX(0%);
    background: var(--light);
}



/*     Story CTA     */

section#write-CTA .bg-img {
    width: 100%;
    height: 65vh;
    position: absolute;
    transform: translateY(-5vmax)
}

section#write-CTA form {
    padding: 3vmax;
    backdrop-filter: blur(16px);
    background: rgba(185 185 185 / 30%);
    border-radius: 3vmax;
    width: 65%;
    margin: 7.5vmax auto 2.5vmax;
}
section#write-CTA form main {
    grid-template-columns: repeat(7, 1fr);
    width: 100%;
}
section#write-CTA form main label {
    display: block;
    margin: 0 0 1vmin 1vmin;
}
section#write-CTA form main input, section#write-CTA form main textarea {
    width: 100%;
    padding: 1.5vmax;
    border-radius: 1vmin;
    border: none;
}
section#write-CTA form main input {
}
section#write-CTA form main textarea {
    height: 30vh;
    resize: none;
}
section#write-CTA form main button {
    padding: 2vmax 4vmax;
    margin: 0 2vmax 0 0;
    font-size: x-large;
}
section#write-CTA li:not(:last-child) {
    padding-right: 1vmax;
    border-right: solid 3pt;
}
section#write-CTA li {
    font-family: "newake";
    font-size: 1.75em;
    font-weight: 100;
}
section#write-CTA ul {
    gap: 1vmax;
}
section#write-CTA li {
    font-family: "newake";
    font-size: 1.75em;
    font-weight: 100;
}


/*  */

section#CTA-prefoot {
    padding: 5vmax 0 0;
}
section#CTA-prefoot section {
    width: 100%;
    overflow: hidden;
    border-radius: 3vmax;
    aspect-ratio: 1;
}
section#CTA-prefoot section > *:not(img) {
    width: 70%;
    background: rgba(200 200 200 / 15%);
    backdrop-filter: blur(16px);
    padding: 3vmax;
    border-radius: 3vmax;
    overflow: hidden;
}
section#CTA-prefoot section > * button, section#CTA-prefoot section > * input, section#CTA-prefoot section > * a {
    width: 100%;
    text-align: center;
    padding: 1.5vmax .5vmax;
    border-radius: 1vmin;
    font-weight: 400;
    letter-spacing: 0.075vmin;
    font-size: 1.2em;
}
section#CTA-prefoot section > * input {
    color: var(--white);
    border: solid;
    background: rgba(255 255 255 / 0.25);
    font-size: 1em !important;
}
section#CTA-prefoot p {
    font-size: small;
}



/*   Rapports   */

section#reports > main footer h5 {
    margin: 1vmin 0 0;
    font-size: 1.75em;
    line-height: 1;
    font-family: "newake", outfit, sans-serif;
    font-weight: 100;
    letter-spacing: .05vmin;
}
section#reports > main footer {
    padding: 1vmax 2vmax 2vmax;
}
section#reports > main div {
    aspect-ratio: 1.25;
    overflow: hidden;
    border-radius: 2vmax;
}




/*  Rapports intro*/

section#report-intro {
    padding: .15vmax 0 5vmax;
}
section#report-intro header {
    aspect-ratio: 3;
    overflow: hidden;
    width: 80%;
    margin: 5vmax auto;
    border-radius: 3vmax;
}

section#report-intro h2 {
    font-size: 6rem;
    line-height: .875;
    margin: 0 0 2vmax;
}


section#report-intro ul.grid li p {
    margin: 0;
    font-size: small;
}
section#report-intro ul.grid li h5 {
    font-size: 2.5em;
    font-weight: 900;
    margin: 0 0 .5vmax;
}
section#report-intro ul.grid li {
    display: flex
;
    flex-direction: column;
    align-items: center;
    padding: 1vmax 1.5vmax;
    text-align: center;
    border-radius: 3vmax;
    aspect-ratio: 1.25;
    justify-content: center;
}
section#report-intro ul.grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1vmax;
}







/*    Activités       */

section#activite {
    padding: 5vmax 0;
}
section#activite h2 {
    font-size: 5em;
    text-align: center;
    margin: 0 0 2vmax;
}
section#activite header a.link-butt {
    font-family: outfit;
    font-weight: 800;
    border-width: 2.5pt;
}


section#activite > main a i {
    font-style: normal;
    font-weight: 800;
    font-family: outfit, sans-serif;
    color: var(--white);
    background: var(--black);
    padding: .75vmax 1.25vmax;
    border-radius: 1vmin;
    width: fit-content;
    font-size: smaller;
}
section#activite > main a > div {
    aspect-ratio: .8;
    overflow: hidden;
    border-radius: 2vmax;
}
section#activite > main a > footer {
    padding: 1vmax 2vmax;
}
section#activite > main a h5 {
    margin: 0 0 1vmin;
    font-family: outfit, sans-serif;
    line-height: 1;
    font-size: 1.5em;
    font-weight: 800;
}
section#activite > main a footer p img {
    height: 2vh;
}
section#activite > main a footer p {
    font-size: small;
    color: var(--darkgrey);
    margin: 0;
    display: flex;
    align-items: center;
    gap: .5vmax;
}
section#activite > main a header {
    margin: 0 0 1.0vmax;
}


/*  Action   */

section#act-intro {
    padding: 5vmax 0 2.5vmax;
}
section#act-intro main {
    width: calc(45% - 5vmax);
}
section#act-intro aside {
    aspect-ratio: 1.25;
    width: 55%;
    overflow: hidden;
    border-radius: 3vmax;
}



/*   Action Form       */

section#form-two.top {
    margin-top: 12.5vh;
}

section#form-two > * {
    width: 50%;
    padding: 5vmax 10%;
}
section#form-two > div {
    padding: 0 !important;
}
section#form-two form {
}
section#form-two form label {
    margin: 0 0 1vmin 1vmin;
    font-size: smaller;
    color: var(--darkgrey);
}
section#form-two form input, 
section#form-two form select {
    border: solid 1pt var(--darkgrey);
    padding: 1vmax;
    border-radius: 1vmin;
}
section#form-two form button {
    width: 100%;
    padding: 1.5vmax;
    font-size: 1.25em;
}
section#form-two form p {
    font-size: small;
    color: var(--darkgrey);
}
section#form-two h2 {
    margin: 0 0 2vmax;
}

section#form-two > aside {
    background: linear-gradient(135deg, var(--dark), transparent);
}

section#form-two ul {
    list-style: unset;
    gap: 1vmax;
    display: flex;
    flex-direction: column;
    margin: 0 3vmax;
}
section#form-two aside main {
    border-radius: 2vmax;
    padding: 3vmax 1vmax;
    margin: 2vmax 0 0;
}
section#form-two aside h3 {
    text-align: center;
}



/*  Documentation     */

section#documentation {
    padding: 0vmax 0;
    margin: 0 0 7vmax;
}
section#documentation h3 {
    margin: 0 auto 3vmax;
    text-align: center;
    width: 50%;
    font-size: xxx-large;
}
section#documentation img.fill {
    opacity: .2;
}
section#documentation a.link-butt {
    font-size: 1vmax;
    white-space: break-spaces;
    width: calc(33% - 3.33vmax);
    align-items: center;
    text-align: center;
    padding: 3vmax;
    border-radius: 3vmax;
}
section#documentation main {
    width: 70%;
    margin: 0 auto;
    padding: 10vmax 5%;
}
section#documentation a img {
    height: 11vh;
    width: auto;
}
section#documentation a.link-butt:nth-child(2) {
    padding: 5vmax 3vmax;
}
section#documentation a p {
    font-size: x-large;
    line-height: 1;
    font-family: outfit;
    font-weight: 800;
}



/*    To do  */

section#to-do div nav {
    white-space: nowrap;
    width: 80%;
}
section#to-do div nav a {
    width: 30vw;
    display: inline-flex;
    margin-right: 2vmax;
    flex-direction: column;
    gap: 1vmax;
}
section#to-do div nav a div {
    aspect-ratio: 1.25;
    border-radius: 2vmax;
    overflow: hidden;
}
section#to-do div nav a main header {
}
section#to-do div nav a header * {
    font-style: normal;
    letter-spacing: .05vmin;
}
section#to-do div nav a h5 {
    margin: 2vmin 0 1vmin;
    font-size: 2em;
    white-space: break-spaces;
    line-height: 1;
    font-family: "newake", outfit, sans-serif;
    font-weight: 100;
}
section#to-do div nav a main p {
    white-space: break-spaces;
    opacity: .5;
}

section#to-do h2 {
    margin: 0 0 3vmax;
}
section#to-do {
    margin: 15vmax auto;
}


section#to-do div aside {
    width: 20%;
}

section#to-do div aside button {
    border: solid;
    aspect-ratio: 1;
    border-radius: 50%;
    background: transparent;
    line-height: 1;
    font-size: xx-large;
}
section#to-do div aside button:hover {
    background: var(--mid);
    color: var(--white);
    border-color: var(--mid);
}
section#to-do div aside i {
    font-weight: 900;
    font-size: large;
}



/*   Donation Causes   */

section#donation-causes h2 {
    margin: 0 0 5vmax;
    text-align: center;
    PADDING: 0 15%;
}

section#donation-causes {
    width: clamp(300px, 75%, 1600px);
    grid-template-columns: repeat(2, 1fr);
    margin: 12.5vmax auto;
}
section#donation-causes article h5 {
    font-size: x-large;
    margin: 0;
}
section#donation-causes article main footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section#donation-causes p, 
section#donation-causes a {
    line-height: 1;
    margin: .5vmin;
    font-size: smaller;
}
section#donation-causes article main div.progress {
    background: var(--lightgrey);
    border-radius: 10em;
    width: 100%;
    height: .81vh;
    margin: 2vmin 0;
}
section#donation-causes article main div.progress div {
    background: var(--mid);
    height: 100%;
    border-radius: 10em;
}
section#donation-causes article aside {
    background: var(--lightgrey);
    aspect-ratio: 1;
    width: 30%;
    border-radius: 1.25em;
    overflow: hidden;
}
section#donation-causes p {
    font-size: large !important;
    font-weight: 700;
}
section#donation-causes > article {
    align-items: flex-start;
}

header#art-head-img {
    width: 70%;
    margin: 10vh auto 5vmax;
    aspect-ratio: 3.15;
    border-radius: 2vmax;
    overflow: hidden;
}

header.entry-header div.mi-wi {
    width: 100%;
    aspect-ratio: 3;
}

h2.entry-title {
    font-size: 5em;
}

header.entry-header div p,
.nav-links {
    font-size: 1.5em;
}


@media (max-width : 600px) and (orientation : portrait) {

    .mob-on {
    display: block !important;
}
    .mob-on.flex {
    display: flex !important;
}

    .mob-off {
    display: none !important;
}

    .flex-mc {
    flex-direction: column;
}

    .flex-mw {
    flex-wrap: wrap;
}
 
    p {
    font-size: smaller;
}

    .link-butt, button {
    padding: 1.5vmax 2.5vmax;
    border-radius: 1vmin;
    font-size: .85em;
}



    /*  Footer  */

    footer#footer header img {
    width: 65%;
}
    footer#footer header a.link-butt {
    padding: 2vmax 4vmax;
    font-size: large;
}
    footer#footer header {
    gap: 5vmax;
}
    footer#footer header nav {
    grid-template-rows: auto auto auto;
    gap: 2.25vmax 5vmax;
}
    footer#footer footer div div main {
    gap: 0vmax;
    margin-bottom: 3vmax;
}
    footer#footer footer div div aside img {
    height: 2.75vmax;
}
    footer#footer footer div div aside {
    gap: 6vmax;
}
    footer#footer footer hr {
    width: 50%;
    margin: 5vmax 0;
}


    /*  Header  */

    nav#h-m-pages a {
    font-size: 1.5em;
}
    nav#menu-bloc.on {
    gap: 5vmax;
}


    /*  Headings  */

    h2 {
    font-size: 2.35em;
}
    h3 {
    font-size: 1.8em;
}



    /*  Front-Page  */

    section#intro-pitch footer {
    width: 95%;
    gap: 4vmax;
}
    div#intro-header {
    align-items: start;
    margin: 5vmax 0 0;
}
    section#intro-pitch footer article main h4 {
    font-size: 1.75em;
}
    section#intro-pitch footer article main p {
    font-size: x-small;
    line-height: 1.2;
}
    section#intro-pitch footer article main {
    padding: 2vmax 5%;
}


    /*  Home - Smile   */

    section#smile aside.grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1vmax;
    grid-template-rows: repeat(8, 15vh);
    width: 100%;
}

    section#smile aside.grid > div.wi {
    grid-column: span 2;
    grid-row: span 1;
}


    /*  Activity Resume */

    section#activ-main main > a {
    aspect-ratio: unset !important;
}
    section#activ-main main.grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 30vmax);
}
    section#activ-main main.grid > a p {
    font-size: x-small;
}
    section#activ-main main > a.cl-two h5 {
    margin: 1vmax 0 3vmin;
    font-size: xx-large;
}
    section#activ-main main.grid > a i {
    font-size: small;
    white-space: nowrap;
}
    section#activ-main main > a:not(.cl-two) {
    grid-column: span 2;
}
    section#activ-main main.grid > a:not(.cl-two) h5 {
    font-size: large;
}


    /*  Home - CTA      */

    section#homeCTA aside {
    width: 110%;
}
    div#menu-burger {
    width: 4.5vmax;
    aspect-ratio: 1.15;
}
    section#smile main, 
    section#homeCTA main {
    width: 100%;
}

    /*  Home - Blog     */

    section#home-blog h3 {
    width: 100%;
}
    section#home-blog > main {
    grid-template-columns: repeat(1, 1fr);
}
    section#home-blog > main article main h5 {
    font-size: x-large;
}
    section#home-blog > main article main p {
    font-size: x-small;
}

    /*  Activité -   */

    section#activite > main a > div {
    aspect-ratio: 1.25;
}
    section#activite > main a i {
    font-size: small;
}
    section#activite h2 {
    font-size: 2.35em;
    margin: 0 0 2vmax;
}
    p.txt-commu {
    font-size: x-small;
}



/*  Pre-Footer  */

    section#CTA-prefoot section > * button, 
    section#CTA-prefoot section > * input, 
    section#CTA-prefoot section > * a {
    padding: 2.5vmax 1.5vmax;
    border-radius: 2.5vmin;
    font-weight: 600;
    letter-spacing: 0;
    font-size: 0.75em;
}
    section#CTA-prefoot section {
    border-radius: 3vmax;
    aspect-ratio: unset;
}
    section#CTA-prefoot section > *:not(img) {
    width: 90%;
    margin: 7vmax auto;
}
    section#CTA-prefoot p {
    font-size: x-small;
}


    /*  Activités   */

    .four-col {
    grid-template-columns: repeat(1, 1fr);
}


    /*  About   */

    section#about-intro > div {
    width: 100%;
}
    section#about-intro h1 {
    font-size: 6vmax;
}
    section#about-intro footer > * {
    width: 100%;
}
    section#about-intro h5 {
    font-size: 2.25em;
}
    section#his-mis h3, section#abt-obj h3 {
    line-height: .8;
    font-size: 3em;
}
    section#his-mis div.his-img {
    width: 110%;
    gap: 1vmax;
}
    section#his-mis div h4 {
    font-size: 2em;
}
    section#abt-obj > main div h5 {
    font-size: 1.5em;
}
    section#abt-col main article aside {
    width: 100%;
}
    section#abt-col main article ul {
    width: 100%;
}
    section#abt-col main article ul li img {
    height: 10vmax;
}
    section#val-vis > section h5 {
    margin: 2vmax 0 0;
    font-size: 1.5em;
}


    /*  Actualités  */

    section#blog-tem main header img {
    height: 5vmax;
}
    section#blog-tem main header h4 {
    font-size: 2.5em;
}
    section#blog-tem aside {
    width: 70%;
}

    form.content-src input {
    width: 100%;
}



    main#newsletter-form {
    width: 75%;
    gap: 3vmax;
}
    main#newsletter-form aside {
    width: 100%;
}
    main#newsletter-form form {
    width: 100%;
}
    section#blog-cta a footer h5 {
    font-size: 2.25em;
}


    /*  Rapport  */

    section#report-intro header {
    aspect-ratio: 1;
    width: 100%;
}
    section#report-intro h2 {
    font-size: 4rem;
}
    section#report-intro ul.grid {
    grid-template-columns: repeat(2, 1fr);
}
    form.content-src {
    width: 100%;
}
    section#write-CTA form main {
    display: flex !important;
    flex-direction: column !important;
}
    section#write-CTA form {
    width: 85%;
}
    section#write-CTA form main label {
    font-size: small;
}
    section#write-CTA form main input, 
    section#write-CTA form main textarea {
    padding: 2.0vmax 1.5vmax;
}
    p.col-full {
    font-size: x-small;
}
    section#write-CTA form main button {
    padding: 3vmax 0vmax;
    font-size: smaller;
    border-radius: 1vmax;
    width: 100%;
    text-align: center;
}
    .anon > div {
    width: 17vw;
    padding: .75vmin;
}
    .anon {
    margin: 2vmax 0 0;
}



    /*  Devenir Membre  */

    
    section#act-intro aside {
    width: 100%;
}
    section#act-intro main {
    width: 100%;
}
    section#form-two form main {
    display: flex;
    flex-direction: column;
}
    section#form-two > * {
    width: 100%;
}

    section#documentation a p {
    font-size: large;
}
    section#documentation a.link-butt {
    font-size: 1vmax;
    width: 100%;
}
    section#to-do div nav {
    display: flex;
    flex-direction: column;
    width: 100%;
}
    section#to-do div nav a {
    width: 100%;
    margin-bottom: 5vmax;
    gap: 2vmax;
}
    section#to-do div nav a h5 {
    font-size: 1.5em;
}
    section#to-do div nav a header p {
    opacity: .35;
}
    section#to-do div nav a header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
    section#to-do div nav a main > p {
    font-size: small;
    opacity: .5;
    white-space: break-spaces;
}
    section#documentation h3 {
    width: 100%;
    font-size: xx-large;
}


    /*  Donations   */

    section#donation-causes {
    width: 90%;
    grid-template-columns: repeat(1, 1fr);
}
    section#donation-causes p {
    display: none;
}
    section#donation-causes button {
    font-size: .65em;
}
    section#form-two form input, 
    section#form-two form select {
    padding: 2vmax;
}

header#art-head-img {
    width: 90%;
    margin: 7vh auto 3.5vmax;
    aspect-ratio: 1.5;
}

    h2.entry-title {
    font-size: 2.5em;
}
    header.entry-header div.mi-wi {
    width: 100%;
    aspect-ratio: 1;
}
    header.entry-header div.flex-mc p {
    margin: 0;
}
header.entry-header div.flex-mc {
    align-items: start;
    gap: 1.5vmin;
    margin: 2vmax 0 0;
}
    header.entry-header div p, .nav-links {
    font-size: 1em;
}
}

@media (max-width : 900px) and (orientation : landscape) {
    h2.entry-title {
    font-size: 3em;
}
    header.entry-header div p, .nav-links {
    font-size: 1.15em;
}
    nav#h-m-pages a {
    font-size: 1.25em;
}
    nav#menu-bloc.on {
    flex-direction: row;
    gap: 2vmax;
    align-items: center;
}
    nav#menu-bloc.on {
    gap: 7vmax;
    padding: 2vmax 7vmax 0;
}
    p {
    font-size: smaller;
}
    div#intro-header {
    text-align: center;
}
    .mi-wi {
    width: 95%;
}
    div#intro-bg-img {
    height: 80%;
}

    section#intro-pitch footer {
    width: 175%;
}
    section#intro-pitch footer article main h4 {
    font-size: 6vmin;
}
    section#smile aside.grid {
    grid-template-rows: repeat(4, 35vh);
}
    h2 {
    font-size: 2.75em;
}
    h3 {
    font-size: 2.3em;
}
    section#activ-main main.grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1vmax;
}
    section#home-blog h3 {
    width: 75%;
}
    section#home-blog > main {
    grid-template-columns: repeat(2, 1fr);
}
    footer#footer header nav {
    grid-template-rows: auto auto auto;
}
    footer#footer header a.link-butt {
    padding: 2vmax 4vmax;
}
    footer#footer footer div div a img {
    height: 3vmax;
    margin-right: 3vmax;
}
    footer#footer footer div div {
    flex-direction: column;
    gap: 3vmax;
}
    section#his-mis h3, section#abt-obj h3 {
    font-size: 3em;
}
    section#his-mis div.his-img {
    width: 120%;
}
    section#his-mis div h4 {
    font-size: 2em;
}
    section#abt-obj > main div h5 {
    font-size: 2.15vmax;
}
    section#about-intro h5 {
    font-size: 3.75vmax;
}
    section#blog-tem main header img {
    height: 6vmax;
}
    section#blog-tem main header h4 {
    font-size: 2em;
}
    .four-col {
    grid-template-columns: repeat(2, 1fr);
    width: 100%;
}
    main#newsletter-form > * {
    width: 100% !important;
}
    main#newsletter-form {
    flex-direction: column;
    gap: 5vmax;
}
    section#blog-cta a footer h5 {
    font-size: 2em;
}
    section#activite h2 {
    font-size: 3em;
}
    section#CTA-prefoot {
    flex-direction: column;
}
    section#CTA-prefoot section {
    aspect-ratio: unset;
}
    section#CTA-prefoot section > *:not(img) {
    margin: 5vmax auto;
}
    section#CTA-prefoot section > main a {
    padding: 2vmax;
    align-items: center;
    display: flex;
    justify-content: center;
}
    section#CTA-prefoot section > main {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}
    section#report-intro > main {
    flex-direction: column;
}
    section#write-CTA form main {
    flex-direction: column;
    display: flex;
}
    section#form-two > * {
    padding: 5vmax 3.5%;
}
    section#to-do div nav a h5 {
    font-size: 1.5em;
}
    section#documentation main {
    width: 100%;
    padding: 10vmax 5%;
}
    section#documentation a p {
    font-size: large;
}
    section#documentation h3 {
    width: 75%;
    font-size: xx-large;
}
    section#donation-causes article h5 {
    font-size: medium;
}
    section#donation-causes p {
    display: none;
}
    section#donation-causes {
    width: 95%;
    grid-template-columns: repeat(2, 1fr);
}
    section#donation-causes button {
    font-size: .75em;
}
    header#art-head-img {
    width: 85%;
}

}

.off {
    display: none !important;
}

a:hover img.fill {
    scale: 1.15;
    opacity: .75;
}

a:hover h5 {
    color: var(--mid);
}

a:hover i.date-ho {
    background: var(--black);
    padding: .7vmax 1.63vmax;
    color: var(--white);
    font-weight: 700;
    border-radius: 1vmin;
}


footer#footer > header > a {width: min-content;}

footer#footer > header > a p {
    font-weight: 600;
    color: var(--black);
    font-size: 1em;
    position: absolute;
    width: 50%;
    right: 0;
    line-height: 1;
}

footer#footer > header > a img {
    height: 12.5vh;
    width: auto;
    display: block;
    margin: 0 0 -4vmin;
}