@font-face {
font-family:'Montserrat';
src: url('/font/Montserrat-Black.woff2') format('woff2'),
url('/font/Montserrat-Black.woff') format('woff');
font-weight:900;
font-style:normal;
font-display:swap;
}
@font-face {
font-family:'Montserrat';
src: url('/font/Montserrat-BlackItalic.woff2') format('woff2'),
url('/font/Montserrat-BlackItalic.woff') format('woff');
font-weight:900;
font-style:italic;
font-display:swap;
}
@font-face {
font-family:'Montserrat';
src: url('/font/Montserrat-Bold.woff2') format('woff2'),
url('/font/Montserrat-Bold.woff') format('woff');
font-weight:700;
font-style:normal;
font-display:swap;
}
@font-face {
font-family:'Montserrat';
src: url('/font/Montserrat-Regular.woff2') format('woff2'),
url('/font/Montserrat-Regular.woff') format('woff');
font-weight:400;
font-style:normal;
font-display:swap;
}
@font-face {
font-family:'Montserrat';
src: url('/font/Montserrat-BoldItalic.woff2') format('woff2'),
url('/font/Montserrat-BoldItalic.woff') format('woff');
font-weight:700;
font-style:italic;
font-display:swap;
}
@font-face {
font-family:'Montserrat';
src: url('/font/Montserrat-Italic.woff2') format('woff2'),
url('/font/Montserrat-Italic.woff') format('woff');
font-weight:400;
font-style:italic;
font-display:swap;
}
@font-face {
font-family:'Montserrat';
src: url('/font/Montserrat-Light.woff2') format('woff2'),
url('/font/Montserrat-Light.woff') format('woff');
font-weight:300;
font-style:normal;
font-display:swap;
}
@font-face {
font-family:'Montserrat';
src: url('/font/Montserrat-LightItalic.woff2') format('woff2'),
url('/font/Montserrat-LightItalic.woff') format('woff');
font-weight:300;
font-style:italic;
font-display:swap;
}

html {
box-sizing:border-box;
margin:0;
font-size:106%;
}

*,
*::before,
*::after {
box-sizing:inherit;
}

body {
font-family:"Montserrat", Calibri, Arial, sans-serif;
text-align:left;
margin:0;
padding:0;
}

:root {
--main-color:#28006d;
--green-color:#20B678;
--link-hover-color:#331aa1;
--dark-color:#333;
--light-color:#F5f5f5;
}

/***HEADER***/
.header {
display:flex;
background-color:#28006d;
background-color:var(--main-color);
color:#fff;
height:20vw;
min-height:5rem;
width:100%;
padding:0;
margin:0 auto;
align-items:center;
text-align:left;
overflow:hidden;
}
.a-header {
text-decoration:none;
color:#fff;
display:flex;
width:100%;
text-align:left;
}
.a-header p {
position:relative;
text-align:left;
margin-left:17.5%;
margin-right:auto;
font-weight:700;
font-size:clamp(0.9rem, 5vw, 4rem);
}
.img-header {
bottom:0;
float:right;
width:30vw;
height:auto;
}

/***MENU***/
.main-nav{
display:block;
margin-top:0.75rem;
margin-bottom:0.5rem;
justify-items:center; 
align-items:center;
text-align:center;
}

.main-nav ul{
list-style:none;
padding:0;
margin:0 auto;
width:65%;
display:grid;
grid-template-columns:1fr 2vw 1fr 2vw 1fr 2vw 1fr 2vw 1fr;
align-items:center;
}

.main-nav li{
list-style:none;
padding:0;
margin:0;
width:100%;
}
.main-nav li::before{
content:none;
}

.main-nav a{
text-decoration:none;
text-transform:uppercase;
color:var(--main-color);
font-weight:700;
background-color:transparent;
font-size:clamp(0.9rem,2vw,1.25rem);
display:block;
text-align:center;
margin-left:clamp(0.9rem,2vw,1.25rem);
margin-right:clamp(0.9rem,2vw,1.25rem);
}
.nav-active{
text-transform:uppercase;
color:var(--green-color);
font-weight:700;
background-color:transparent;
font-size:clamp(0.9rem,2vw,1.25rem);
display:block;
text-align:center;
margin-left:clamp(0.9rem,2vw,1.25rem);
margin-right:clamp(0.9rem,2vw,1.25rem);
}

.main-nav a:hover{
color:var(--green-color);
}

.separator{
display:block;
align-self: center;
}
@media screen and (max-width:768px) {
.main-nav ul{
grid-template-columns:1fr;
width:100%;
height:auto;
box-shadow:none;
transform:none;
padding:10px 0; 
gap:0;
}
.separator{
display:none;
}
}
/***GENERAL****/
.main {
margin:0 auto;
padding:0;
background:#fff;
overflow:hidden;
}
.contentblock {
display:block;
width:100%;
margin:0 auto;
min-height:100vh;
}
.blocktext {
width:65%;
margin:0 auto;
padding-bottom:10vh;
}
.purpleblock, .greenblock, .purpleblock ul li::before, .purpleblock a:hover, .grid-accueil-text {
color:#fff;
}
.sales-banner .purpleblock {
    height:auto;
    padding:3vh;
}

.purpleblock {
background-color:var(--main-color);
padding-bottom: 10vh;
}

.purpleblock a {
color:var(--green-color);
}

.purpleblock .a-purple {
color:var(--main-color);
}
.purpleblock .a-purple:hover {
color:var(--main-color);
}

.no-text-decoration {
    text-decoration:none;
}
.no-text-decoration:hover {
    text-decoration:none;
}
.greenblock {
background-color:var(--green-color);
}

.dark-greenblock {
color:black;
background-color:#fff;
border-radius:1rem;
padding:clamp(1.5rem,3vw,2rem);
}

.dark-greenblock ul{
margin-top:0;
}
.dark-greenblock li{
padding-top:0;
}

.greenblock ul b{
line-height: 1em;
}

.end-padding-bottom {
padding-bottom:10vh;
}

.no-b-padding {
padding-bottom:0;
}
.padding-top {
padding-top:1.5em;
}
.padding-top-large {
    padding-top:15vh;
}
h1 {
text-align:center;
font-size:clamp(2rem, 5vw, 5rem);
width:60%;
margin:2vw auto;
font-weight:700;
}
.blocktext h1 {
    margin:0 auto;
    width:100%;
}

h2 {
text-align:center;
font-weight:700;
font-size:clamp(1.2rem, 2.5vw, 3rem);
padding:1em 0 0.25em 0;
}

h3, .h3-like {
text-align:left;
font-weight:700;
font-size:clamp(1.20rem, 1.7vw, 1.5rem);
padding:1em 0 0.5em 0;
}

h4 {
text-align:center;
font-weight:700;
font-size:clamp(1.25rem, 1.75vw, 1.5rem);
line-height:1.25em;
}
h5 {
font-weight:700;
font-size:1rem;
margin:3em 0 0.5em 0;
}
.subtitle {
text-align:center;
font-weight:700;
font-size:clamp(1.5rem, 5vw, 4rem);
padding:1em 0 0.25em 0;
margin:0 auto;
}
.smaller-title {
font-size:clamp(1.1rem, 2vw, 2rem);
}

p {
line-height:1.5em;
}

a {color:var(--green-color);}

a:hover {color:var(--link-hover-color);}

.align-l {text-align:left;}

.align-r {text-align:right;}

.align-c {text-align:center;}

.green-font {color:var(--green-color);}

.citation-auteur {
text-align: right;
}

ul {
list-style-type:none;
padding:0;
line-height:1.5em;
}
ul li {padding:1rem 0 0 0;}
ul b {line-height:3em;}
ul li::before {
content:"\27A8";
color:var(--green-color);
font-size:1.25rem;
padding-right:0.7em;
font-weight:100;
}
.space-unit {
    margin:7vh 0 7vh 0;
}
/**BLOCK HOME***/
.home {
position:relative;
background:linear-gradient(145deg, var(--main-color) 60%, var(--green-color));
margin:0 auto;
width:100vw;
height:100vh;
overflow:hidden;
z-index:9999;
}
.grid-accueil {
display:grid;
grid-template-columns:2fr 1fr;
grid-template-areas: 'txt img';
width:100vw;
height:100vh;
align-items:center;
overflow:hidden;
box-sizing:border-box;
}
.grid-accueil-text {
grid-area:txt;
}
.grid-accueil-img {
overflow:hidden;
position:relative;
left:5px;
bottom:-5px;
grid-area:img;
justify-self:end;
align-self:end;
}
.mainredacteur {
max-width:40vw;
height:auto;
}
/***BLOC ABOUT ***/
.about {
display:grid;
margin:0 auto;
grid-template-columns:17.5% 45% 20% 17.5%;
grid-template-areas: 'marge titre picture picture'
'marge text text marge2';
}
.column1 {
grid-area:titre;
text-align:center;
}
.column2 {
grid-area:picture;
align-self:center;
justify-self:end;
}
.column3 {
grid-area:text;
grid-column: 2 / span 2;
}
.picture {
max-width:100%;
height:auto;
padding-left:2vh;
transition: transform 0.3s ease-in-out; 
}
.picture:hover {
transform: scale(0.975); 
}
/*IMAGE*/
.icon {
width:64px;
height:64px;
}

/***BLOCK SERVICES***/
.container-wrapper{
width:100%;
max-width:40rem;
margin:0 auto;
}
.grid-container{
display:grid;
grid-template-columns:1fr;
gap:1.5rem;
}
.grid-container a, .grid-container a:hover{
text-decoration:none;
color:#fff;
}
@media (min-width: 768px){
.grid-container{
grid-template-columns:repeat(2, minmax(0, 1fr));
}
}

.grid-container > div {
    display: flex;
    flex-direction: column;
    height: 100%; 
}

.card-link{
    display:block;
    padding:1.5rem;
    border-radius:0.75rem;
    background-color:var(--main-color);
    color:white;
    text-decoration:none;
    box-shadow:0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition:all 500ms ease-in-out;
    flex-grow: 1;
    margin-bottom: 0.75rem;
}
.card-link::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:url(/images/mainredacteur.avif);
    background-size:contain;
    background-position:bottom right;
    background-repeat: no-repeat;
    opacity:0.10;
    z-index:1;
}
.card-link:hover{
    box-shadow:0 15px 20px -5px rgba(0, 0, 0, 0.3), 0 8px 10px -5px rgba(0, 0, 0, 0.08);
    transform:scale(0.975);
}

.flex-col{
    display:flex;
    flex-direction:column;
    height:100%; 
}
.card-subtitle{
    margin-bottom: auto;
}

.card-body {
    text-align:center;
    font-weight:700; 
    line-height:1.5em;
    margin-top: 0.75rem;
    margin-bottom: 0;
}

.card-link h2{
    font-size:clamp(1rem, 1.2vw,1.5rem);
    font-weight:700;
    text-transform:uppercase;
    margin-top:0;
    margin-bottom:1rem;
    line-height:1.2em;}

.card-subtitle{
    font-size:0.9rem;
    text-align:center;
    font-weight:600;
    letter-spacing:0.05em;
    margin-top:0.5rem;
    color:#d5cee2;
    margin-bottom: auto;
}

/***BLOCK FAQ***/
.faq-section h4 {
text-align:left;
font-size:1rem;
margin:0 auto;
padding:1.5rem 0 0 0;
}

/***BLOCK CONTACT***/
.grid-contact {
display:grid;
grid-template-areas:'imgcontact textcontact';
grid-template-columns:1fr 1fr;
}
.grid-contact-c2 {grid-area:imgcontact;}
.grid-contact-c2 img {width:50vw;}
.grid-contact-c1 {grid-area:textcontact;}
.contact {
filter:grayscale(100%);
transition: 0.5s;
width:95%;
height:auto;
}
.contact:hover{
filter:grayscale(0%);
}
.contact:active{
filter:grayscale(0%);
}
.blocktext-contact {
width:80%;
padding:0 0 0 3vw;
margin:0 auto;
margin-right:17.5vw;
}
.blocktext-contact a{
text-decoration:none;
}
.blocktext-contact a:hover {
color:var(--main-color);
}
.blocktext-contact h2 {
font-size:clamp(2rem, 5vw, 4rem);
}
/***BUTTON***/
.primary-button {
color:#fff;
text-align:center;
font-weight:700;
padding:0.75rem 1.25rem;
border-style:none;
border-radius:8px;
cursor:pointer;
background-color:var(--main-color);
transition:all 0.3s ease;
text-align:center;
}
.primary-button:hover {
background-color:#fff;
color:var(--main-color);
transform:scale(0.975); 
}
.primary-button:active {
transform:scale(0.95); 
}
.flex-box {
display:flex;
justify-content:center;
align-items:center; 
width:100%;
}

.cta-button {
display:block;
color:var(--main-color);
font-size:clamp(0.9rem,1rem,1.1rem);
text-align:center;
font-weight:700;
padding:1.5em;
max-width:20em;
margin:1em auto;
border-style:none;
border-radius:5px;
cursor:pointer;
background-color:#fff;
transition:all 0.3s ease;
animation:cta-blink-fff 1.5s infinite linear;
text-align:center;
}
.cta-button:hover {
transform:scale(0.975);
 animation:none;
}
.cta-button:active {
transform:scale(0.95); 
 animation:none;
}
.purpleblock .cta-button a, a:hover {
    text-decoration:none;
    color:var(--main-color);
}

/***ANIMATION***/
@keyframes balancement {
0% {
transform:rotate(0deg);
}
50% {
transform:rotate(-5deg);
}
100% {
transform:rotate(0deg);
}
}
.img-move {
display:inline-block;
animation-name:balancement;
animation-duration:5s;
animation-iteration-count:infinite;
animation-timing-function:ease-in-out;
transform-origin:100% 100%;
}

@keyframes cta-blink-green {
  0% {
    background-color: var(--green-color); /* Couleur de départ */
  }
  50% {
    background-color:#31d28f; /* Couleur intermédiaire (clignotement) */
  }
  100% {
    background-color: var(--green-color); /* Retour à la couleur de départ */
  }
}

@keyframes cta-blink-fff {
  0% {
    background-color:#fff; /* Couleur de départ */
  }
  50% {
    background-color:#faf4ff; /* Couleur intermédiaire (clignotement) */
  }
  100% {
    background-color:#fff; /* Retour à la couleur de départ */
  }
}
/***BLOCK BLOG***/
.blog-divider {
background-image:url('images/patterns/pattern.svg');
background-repeat:repeat-x;
background-size:5vh;
height:5.5vh;
margin:2vh auto;
}
.blog a {
text-decoration:none;
color:black;
}
.blog a:hover {
color:black;
}
.a-blog a{
text-decoration:none;
}
.bg-blog {
background-color:var(--light-color);
}
.blog-divider-purple {
background-image:url('images/patterns/pattern-purple.svg');
background-repeat:repeat-x;
background-size:5vh;
height:5.5vh;
margin:2vh auto;
}
.blog-divider-fff {
background-image:url('images/patterns/pattern-fff.svg');
background-repeat:repeat-x;
background-size:5vh;
height:5.5vh;
margin:2vh auto;
}
.img-blog {
width:20vw;
height:auto;
position:relative;
top:0;
}
/* SECTION 1 : La Grille*/
.blog-grid {
display:grid;
grid-template-columns:repeat(3, 1fr);
gap:5vh;
perspective:1000px;
margin:0 auto;
max-width:80vw;
}
.blog-card-container {
height:450px;
text-decoration:none;
text-align:center;
}
/*SECTION 2 : La Carte (L'élément qui pivote)*/
.blog-card-flip {
position:relative;
width:100%;
height:100%;
transform-style:preserve-3d; 
transition:transform 0.8s;
border-radius:8px;
box-shadow:0 4px 6px rgba(0, 0, 0, 0.1);
}
.blog-card-container:hover .blog-card-flip {
transform: rotateY(180deg);
}
/*SECTION 3 : Les deux Faces de la Carte*/
.blog-card-front,
.blog-card-back {
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
border-radius:8px;
overflow:hidden;
}
.blog-card-front {
background-color:#fff;
z-index:2;
}
.card-image {
width:100%;
height:auto;
object-fit:cover;
display:block;
}
.card-content-front {
padding:15px;
text-align:center;
}
.blog-card-back {
background-color:var(--light-color);
transform:rotateY(180deg);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
padding:20px;
box-sizing:border-box;
}
.card-blog .blog-card-back {background-color:#fff;}
.card-content-back {text-align: left;}
.card-title {
font-size:1.25rem;
margin-top:0;
margin-bottom:10px;
}
.card-description {
font-size:1rem;
line-height:1.5;
color:var(--dark-color);
}
/***PAGES SERVICE***/
.menu-services {
    display:grid;
    grid-template-columns:1fr;
    width:17em;
    max-width:60vw;
    cursor:pointer;
    padding-top:7vh;
    margin:0 auto;
}
.menu-services a {
    color:var(--main-color);
    text-decoration:none;
    border-top:2px dashed var(--main-color);
    padding:0.6em;
}
.menu-services a:hover{
    color:var(--green-color);
    text-decoration:none;
    border-color:var(--green-color);
}
.dashed-bottom {
    border-bottom:2px dashed var(--main-color);
}
.menu-label{
    display:block;
    text-align:center;
    font-weight:700;
}
.green-h4 h4{
    font-size:clamp(1.1rem,1.2rem,1.25rem);
    text-align:left;
    color:var(--green-color);
}
.phases {
    padding-left:2vw;
}

.phases ul {
    padding:0;
    margin:0;
    line-height:1.5em;
}
.phases ul b{
    line-height:1.5em;
}
/***GLOSSAIRE***/
.alphabet-nav {
list-style:none;
padding:0;
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:10px;
margin-bottom:20px;
padding-bottom:10px;
}
.alphabet-nav li::before {content:none;}
.ul-glossaire {
list-style:none;
padding:0;
}
.ul-glossaire li {
margin-bottom:1.5rem;
font-weight:400;
position:relative;
}
.ul-glossaire li::before {content:none;}
#compteur-termes {
text-align:center;
font-weight:bold;
margin-top:10px;
}
.uppercase {
font-size:clamp(1.25rem, 5vw,4rem);
font-weight:700;
color:var(--green-color);
line-height:2em;
}
/***FLECHE SCROLL***/
#bouton-scroll {
position:fixed;
bottom:13vh;
right:1vw;
width:40px;
height:40px;
cursor:pointer;
background-image:url('/images/patterns/uparrow.svg');
background-size:contain;
background-repeat:no-repeat;
background-position:center;
opacity:0.4;
transition:opacity 0.3s ease-in-out;
}
#bouton-scroll:hover {
opacity:1;
}
/**FOOTER**/
.footer {
display:inline-block;
font-size:clamp(0.8rem, 1vw, 0.9rem);
width:100%;
min-height:12vh;
background-color:var(--dark-color);
color:#fff;
text-align:center;
align-content:center;
justify-content:center;
}
.footer a {
color:#fff;
text-decoration:none;
}

/**ERROR PAGE**/
.img404 {
width:100%;
height:auto;
display:block;
}
.div404 p{
text-align:center;
padding:0.5rem 0 1.5rem 0;
margin:0 auto;
}
.div404 a{text-decoration:none;}
.div404 a:hover{color:var(--main-color);}
.div404 {
margin:0 auto;
width:60%;
padding-bottom:5vh;
}

/***RESPONSIVE***/
@media screen and (min-width:2200px) {
.grid-accueil-img {
left:15px;
bottom:-5px;
}
.contentblock {min-height:70vh;}
.picture {max-width:30vw;height:auto;}
}
@media screen and (min-width:1500px) {
.blog-card-container {
height:120%;
 width:100%;
}
}
@media screen and (max-width:1200px) {
.grid-accueil-img {
left:20px;
bottom:-5px;
}
.baseline {
width:90%;
}
}
@media screen and (max-width:1000px) {
.grid-accueil {
grid-template-columns:1fr;
grid-template-areas: 'txt' 
'img';
}
.grid-accueil-text {padding-top:20vh;}
.grid-contact {
grid-template-areas: 'imgcontact'
'textcontact';
grid-template-columns:1fr;
}
.grid-contact-c2 img {width:100vw;}
.blocktext-contact {
width:65%;
margin:0 auto;
}
.about {
grid-template-columns:1fr;
grid-template-areas:"titre"
"picture"
"text";
width:65%;
}
.column1 {
grid-area:titre;
text-align:center;
}
.column2 {
align-self:center;
justify-self:center;
grid-area:picture;
}

.column3 {
grid-area:text;
grid-column:1 / span 1;
}

.picture {padding:0;}
}

@media (max-width: 992px) {
.blog-grid {grid-template-columns: repeat(2, 1fr);}
}

@media screen and (max-width:768px) {
.grid-accueil {
grid-template-columns:1fr;
grid-template-areas:'txt' 
'img';
}
.grid-accueil-text {padding-top:20vh;}
.mainredacteur {max-width:60vw;height:auto;}
.grid-steps {
grid-template-columns:1fr;
grid-template-areas:"c1"
"c2"
"c3";
}
.blocktext-contact {
margin-right:auto;
}
}

@media (max-width: 600px) {
.blog-grid {
grid-template-columns:1fr;
max-width:65%;
}
}
@media (max-width: 375px) {
.blog-card-container {height:300px;}
}