qui porte les deux fleches : cote a cote, centre sous les cartes */
.carousel>div:last-child {
display: flex;
justify-content: center;
gap: 10px;
}
.avis-nav {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
padding: 0;
width: 30px;
height: 30px;
border: white;
border-radius: 50%;
background: none;
color: var(--couleur-5);
font-size: 20px;
line-height: 1;
cursor: pointer;
box-shadow: 0 0 10px gray;
transition: background 0.3s ease-in-out;
margin: 0;
}
.avis-nav:hover {
background: var(--couleur-2);
color: white;
}
.commentaire {
font-size: 16px;
text-align: left;
}
.auteur-fonction p {
font-weight: bold;
text-align: left;
font-size: 16px;
}
.auteur {
color: var(--couleur-5);
padding-top : 30px;
}
.fonction {
color: var(--couleur-2);
}
}
.contact {
h2 {
padding-bottom: 0px;
}
}
}
/* ______________________________________________________________ BSI ______________________________________________________________ */
#bsi {
background-image: url("./images/fond_bsi.png");
background-image: image-set(url("./images/fond_bsi.webp?v=2") type("image/webp"), url("./images/fond_bsi.png") type("image/png"));
header {
font-size: 20px;
font-weight: 800;
color: var(--couleur-2);
div {
margin-top: 40px;
}
h1 {
color: white
}
p {
margin-bottom: 20px;
font-size: 20px;
}
li {
list-style-type: none;
img {
width: 15px;
margin-right: 10px;
}
}
button {
background: white;
color: var(--couleur-5);
margin-left: 0;
}
button:hover {
background: var(--degrade-1);
color: white;
}
}
.avantages {
margin-top: 100px;
.content {
margin: 0;
margin: auto;
background-image: url(images/fond_avantages.svg);
background-size: 100% auto;
background-position: top 60px center;
background-attachment: scroll;
background-repeat: no-repeat;
}
.mini-card {
border: none;
box-shadow: none;
justify-content: flex-start;
gap: 10px;
background: none;
padding-inline: 0px;
img {
max-height: 150px;
}
h3 {
color: var(--couleur-2);
font-weight: bold;
}
p {
font-size: 16px;
}
p:nth-of-type(2) {
font-size: 18px;
font-weight: bold;
color: var(--couleur-5);
img {
width: 15px;
}
}
}
}
.diffusion {
background: linear-gradient(white, #A899FF);
position: relative;
overflow: hidden;
padding-inline: var(--marge-content);
/* ancre #diffusion (liens depuis les articles) : la section s'arrete sous le menu sticky */
scroll-margin-top: 90px;
&::before {
content: "";
position: absolute;
top: -70%;
left: -50%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 15%;
right: -60%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-after 10s ease-in-out infinite;
}
h2 {
position: relative;
z-index: 1;
}
p {
position: relative;
z-index: 1;
text-align: center;
max-width: 1000px;
margin: auto;
}
h3 {
font-weight: bold;
}
.cards {
margin: 44px 0px;
}
.mini-card {
gap: 0px;
img {
margin: 30px 0;
max-height: 110px;
}
&:hover img {
scale: 1.05;
transform: rotate(10deg);
transition: 0.5s;
}
p {
margin-top: 0px;
margin-bottom: 20px;
font-size: 18px;
}
&:nth-of-type(1) {
&::before {
content: "";
position: absolute;
top: -200px;
left: -80px;
width: 256px;
height: 293px;
background-image: url("./images/dessin_fleche_bas.png");
background-size: 100% auto;
background-position: tom left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
animation: fleche-diffusion 6s ease-in-out infinite;
}
}
}
button {
margin: 0;
font-size: 16px;
}
}
#etapes {
background-color: var(--couleur-2);
color: white;
padding: 50px var(--marge-content);
h2 {
color: white;
text-align: left;
padding: 22px 0px;
}
h3 {
color: var(--couleur-5);
text-align: left;
}
.content {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 20px;
margin: auto;
>* {
flex: 1;
min-width: 0;
}
img {
max-width: 100%;
}
h2>img {
max-width: 60px;
}
p {
color: white;
}
td {
font-size: 18px;
font-weight: 700;
}
}
table h3 img {
margin-right: 20px;
}
table {
margin-top: 15px;
margin-bottom: 25px;
}
tr>td>img {
margin-right: 20px;
width: 30px;
}
button {
background: white;
color: var(--couleur-5);
margin: 30px 0px;
}
button:hover {
background: var(--degrade-1);
color: white;
}
}
.oxil-share-calculette {
position: relative;
color: var(--couleur-2);
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 15%;
left: -60%;
width: 120%;
height: 120%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -5deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 10%;
right: -50%;
width: 120%;
height: 120%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -20deg;
animation: flotte-after 10s ease-in-out infinite;
}
}
.oxil-share {
background-color: var(--couleur-2);
background: linear-gradient(var(--couleur-2), var(--couleur-2) 50%, hsl(249, 100%, 86%) 50%, hsl(249, 100%, 93%) 100%);
padding-inline: var(--marge-content);
.content {
background: white;
z-index: 1;
position: relative;
border-radius: 10px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 40px;
margin: auto;
padding: 44px;
text-align: left;
font-size: 16px;
background:
linear-gradient(90deg, white, white) padding-box,
conic-gradient(#3CDCD7 0deg, white 45deg, white 89deg, #8C78FF 90deg, #8C78FF 135deg, #3CDCD7 180deg, white 225deg, white 270deg, #8C78FF 271deg, #8C78FF 315deg, #3CDCD7 360deg) border-box;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
box-shadow: 0 0 10px rgb(59, 76, 81);
>* {
flex: 1;
min-width: 0;
}
img {
max-width: 100%;
}
h2 {
text-align: left;
font-weight: 800;
font-size: 28px;
padding-left: 0;
padding-bottom: 20px;
padding-right: 30px;
}
p {
padding-right: 30px;
}
h3 {
font-weight: 800;
margin-top: 40px;
margin-bottom: 20px;
padding-right: 30px;
}
li {
list-style: none;
img {
margin-right: 10px;
width: 16px;
}
}
button {
margin-left: 0;
background: var(--degrade-1);
}
button:hover {
background: var(--couleur-2);
}
}
}
.calculette {
background: linear-gradient(hsl(249, 100%, 93%), white 50%);
.content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
max-width: 900px;
h2 {
padding-bottom: 0px;
}
img {
width: 80px;
}
p {
text-align: center;
margin-bottom: 10px;
}
form {
font-size: 28px;
text-align: center;
input[type=text] {
font-size: 28px;
color: #b8c8cc;
text-align: right;
padding-bottom: 10px;
border-width: 0px 0px 3px 0px;
border-image-slice: 1;
border-image-source: var(--degrade-1);
width: 100px;
}
}
}
#rdvCalculette {
box-shadow: 0 0 10px gray;
padding: 44px;
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(90deg, #3CDCD7, #8C78FF) border-box;
border-top: 15px solid transparent;
border-radius: 10px;
text-align: center;
h3 {
text-align: center;
}
}
}
.oxil-en-chiffres {
text-align: center;
padding: 50px 100px;
img {
width: 100px;
}
.content {
margin-top: 50px;
margin-bottom: 50px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
img {
width: auto;
}
div {
border-left: 1px solid var(--couleur-2);
padding-inline: 40px;
&:nth-of-type(1) {
border: none;
}
p {
font-size: 28px;
font-weight: bold;
}
}
}
button {
margin: 10px;
}
}
.question-bsi {
background-color: var(--couleur-3);
padding: 50px 90px;
h2 {
color: white;
padding-bottom: 10px;
}
p {
text-align: center;
color: white;
font-weight: bold;
}
.cards {
margin-top: 44px;
gap: 30px;
}
.mini-card {
align-items: start;
border: none;
border-left: 15px solid transparent;
padding: 25px;
gap: 22px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-shadow: 0 0 10px var(--couleur-2);
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(180deg, #3CDCD7, #8C78FF) border-box;
h3 {
text-align: left;
color: var(--couleur-2);
font-size: 20px;
}
p {
color: var(--couleur-5);
font-size: 12px;
text-decoration: underline;
}
a {
font-size: 14px;
}
}
}
}
/* ______________________________________________________________ BDESE ______________________________________________________________ */
#bdese {
background-image: url("./images/fond_bdese_2.png");
background-image: image-set(url("./images/fond_bdese_2.webp?v=2") type("image/webp"), url("./images/fond_bdese_2.png") type("image/png"));
header {
font-size: 20px;
div {
margin-top: 40px;
img {
max-width: 600px;
}
}
h1 {
font-size: 35px;
margin-left: 45px;
}
h3 {
margin-left: 45px;
color: #284256;
}
p {
margin-top: 20px;
color: white;
margin-left: 45px;
color: #284256;
}
li {
list-style-type: none;
img {
width: 20px;
margin-right: 10px;
}
}
button {
background: white;
color: var(--couleur-5);
margin-left: 0;
}
button:hover {
background: var(--degrade-1);
color: white;
}
}
.avantages {
padding-top: 200px;
padding-bottom: 0px;
.content {
margin: 0;
margin: auto;
background-image: url(images/fond_avantages.svg);
background-size: 100% auto;
background-position: top 60px center;
background-attachment: scroll;
background-repeat: no-repeat;
}
.mini-card {
border: none;
box-shadow: none;
justify-content: flex-start;
gap: 10px;
background: none;
padding-inline: 0px;
img {
max-height: 150px;
}
h3 {
color: var(--couleur-2);
font-weight: bold;
}
p {
font-size: 16px;
}
p:nth-of-type(2) {
font-size: 18px;
font-weight: bold;
color: var(--couleur-5);
img {
width: 15px;
}
}
}
}
.accompagnement {
background-color: var(--couleur-2);
background: linear-gradient(white, white 40%, var(--couleur-2) 40%, var(--couleur-2) 100%);
position: relative;
overflow: visible;
padding-bottom: 200px;
padding-inline: var(--marge-content);
&::before {
content: "";
position: absolute;
top: 10%;
left: -50%;
width: 100%;
height: 100%;
background-image: url("./images/cerceau3.svg");
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: 10deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 30%;
right: -60%;
width: 100%;
height: 100%;
background-image: url("./images/cerceau3.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: 20deg;
animation: flotte-after 10s ease-in-out infinite;
}
.content {
background: white;
z-index: 1;
position: relative;
border-radius: 10px;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-template-areas:
'titre titre'
'illu texte';
justify-content: space-between;
align-items: center;
gap: 40px;
margin: auto;
padding: 44px;
text-align: left;
font-size: 16px;
background:
linear-gradient(90deg, white, white) padding-box,
conic-gradient(#3CDCD7 0deg, white 45deg, white 89deg, #8C78FF 90deg, #8C78FF 135deg, #3CDCD7 180deg, white 225deg, white 270deg, #8C78FF 271deg, #8C78FF 315deg, #3CDCD7 360deg) border-box;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
box-shadow: 0 0 10px rgb(59, 76, 81);
h2 {
grid-area: titre;
padding: 0;
}
h3 {
font-weight: 800;
margin-top: 20px;
color: var(--couleur-5);
font-size: 24px;
img {
width: 18px;
}
}
.illu {
grid-area: illu;
max-width: 90%;
text-align: center;
margin: auto;
}
}
&>div {
grid-area: texte;
font-size: 20px;
}
}
.etapes {
background-color: var(--couleur-2);
overflow: visible;
padding-top: 0px;
padding-bottom: 100px;
padding-inline: var(--marge-content);
h2 {
color: white;
position: relative;
&::before {
content: "";
position: absolute;
top: -10px;
left: calc(50% - 140px);
width: 60px;
height: 60px;
background-image: url("images/puzzel_blanc.svg");
background-size: 100% auto;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 1;
/* animation: flotte-before 10s ease-in-out infinite; */
}
}
.content {
display: flex;
flex-direction: row;
gap: 70px;
justify-content: space-between;
padding-top: 40px;
p {
color: white;
position: relative;
margin-left: 50px;
margin-bottom: 15px;
margin-top: 15px;
font-size: 18px;
font-weight: 700;
}
p::before {
content: "";
position: absolute;
top: 5px;
left: -30px;
width: 20px;
height: 25px;
background-image: url("images/1_vert.png");
background-size: 100% auto;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 1;
/* animation: flotte-before 10s ease-in-out infinite; */
}
p:nth-of-type(2) {
&::before {
background-image: url("images/2_degrade.png");
}
}
p:nth-of-type(3) {
&::before {
background-image: url("images/3_violet.png");
}
}
img {
max-width: 45%;
}
}
}
.calculette {
background: linear-gradient(hsl(250, 84%, 80%), white 80%);
position: relative;
overflow: hidden;
padding-top: 100px;
&::before {
content: "";
position: absolute;
top: -100%;
left: -35%;
width: 160%;
height: 160%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -15deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 0%;
right: -80%;
width: 160%;
height: 160%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-after 10s ease-in-out infinite;
}
.content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
max-width: 900px;
>img {
width: 80px;
}
form {
font-size: 28px;
text-align: center;
input[type=text] {
background-color: none;
font-size: 28px;
color: #b8c8cc;
text-align: right;
padding-bottom: 10px;
border-width: 0px 0px 5px 0px;
border-image-slice: 1;
border-image-source: var(--degrade-1);
width: 100px;
}
}
}
#rdvCalculette {
box-shadow: 0 0 10px gray;
padding: 44px;
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(90deg, #3CDCD7, #8C78FF) border-box;
border-top: 15px solid transparent;
border-radius: 10px;
text-align: center;
h3 {
text-align: center;
}
}
}
.rsu {
padding-inline: var(--marge-content);
.content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 44px;
.illu {
border: none;
border-left: 15px solid transparent;
border-radius: 10px;
padding: 44px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(180deg, #3CDCD7, #8C78FF) border-box;
box-shadow: 0 0 10px silver;
img {
max-width: 75%;
}
}
.texte {
padding: 20px;
img {
max-width: 80px;
}
h2 {
color: var(--couleur-2);
margin-top: 20px;
margin-bottom: 20px;
text-align: left;
padding: 0;
}
}
}
}
.contact {
padding: 100px 0;
h2 {
padding-bottom: 0;
}
}
}
/* ______________________________________________________________ CONSEIL ______________________________________________________________ */
#conseil {
background-image: url("./images/fond_conseil.png");
background-image: image-set(url("./images/fond_conseil.webp?v=2") type("image/webp"), url("./images/fond_conseil.png") type("image/png"));
header {
font-size: 20px;
div {
img {
max-width: 600px;
}
}
h1 {
font-size: 35px;
margin-left: 45px;
}
p {
margin-top: 20px;
color: white;
margin-left: 45px;
}
h3 {
margin-left: 45px;
}
li {
list-style-type: none;
img {
width: 20px;
margin-right: 10px;
}
}
button {
background: white;
color: var(--couleur-5);
margin-left: 0;
}
button:hover {
background: var(--degrade-1);
color: white;
}
}
.pourquoi {
padding: 100px;
padding-bottom: 3px;
.content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 60px;
.illu {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
img {
max-width: 50vw;
}
}
.texte {
padding: 20px;
img {
max-width: 70px;
}
h2 {
color: var(--couleur-2);
text-align: left;
margin-top: 20px;
margin-bottom: 20px;
padding: 0;
}
p {
margin-top: 20px;
}
ul {
color: var(--couleur-2);
list-style: none;
font-weight: bold;
img {
margin-right: 10px;
height: 15px;
}
}
}
}
}
.accompagnement {
background-color: var(--couleur-2);
background: linear-gradient(white, white 50%, var(--couleur-2) 50%, var(--couleur-2) 100%);
margin-top: 0;
margin-bottom: 0;
padding-top: 0;
padding-bottom: 0;
padding-inline: var(--marge-content);
.content {
background: white;
z-index: 1;
position: relative;
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0px;
margin: auto;
padding: 40px;
text-align: left;
background:
linear-gradient(90deg, white, white) padding-box,
conic-gradient(#3CDCD7 0deg, white 45deg, white 89deg, #8C78FF 90deg, #8C78FF 135deg, #3CDCD7 180deg, white 225deg, white 270deg, #8C78FF 271deg, #8C78FF 315deg, #3CDCD7 360deg) border-box;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
box-shadow: 0 0 10px rgb(59, 76, 81);
img {
width: 120px;
}
h2 {
padding-bottom: 0;
}
p {
text-align: center;
}
}
}
.accompagnement_details {
background-color: var(--couleur-2);
padding-top: 50px;
.cards {
.mini-card {
background: none;
box-shadow: none;
padding: 0;
gap: 0;
img {
width: 50px;
margin-bottom: 20px;
}
p {
color: white;
}
}
}
}
.interventions {
background-color: var(--couleur-3);
background-size: contain;
background-repeat: no-repeat;
margin-inline: 0;
padding-inline: 0;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
bottom: 10%;
left: -50%;
width: 130%;
height: 130%;
background-image: url("./images/cerceau4.svg");
background-size: contain;
background-position: bottom left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -15deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 5%;
right: -60%;
width: 130%;
height: 130%;
background-image: url("./images/cerceau4.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -15deg;
animation: flotte-after 10s ease-in-out infinite;
}
h2 {
color: white;
margin: auto;
position: relative;
z-index: 1;
img {
width: 35px;
margin-bottom: 20px;
}
}
>p {
color: white;
margin: auto;
text-align: center;
position: relative;
z-index: 1;
}
.carousel {
max-width: 100%;
width: 100%;
}
.cards {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
width: 100%;
margin: 40px 0;
padding: 20px 0;
}
.cards::-webkit-scrollbar {
display: none;
}
.mini-card {
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
max-height: 400px;
min-width: 380px;
/* contenu complet affiche dans la modale "En savoir plus" (scripts/modale-detail.js) */
.texte_complet {
display: none;
}
h3 {
text-align: left;
line-height: 100%;
font-size: 24px;
}
p {
text-align: left;
font-size: 16px;
}
}
}
.approche {
background: linear-gradient(hsl(249, 100%, 85%), white 80%);
padding: 100px var(--marge-content);
h2 {
img {
width: 60px;
}
}
.content {
margin: auto;
display: grid;
justify-content: center;
align-items: start;
grid-template-areas:
'illu1 fleche1 illu2 fleche2 illu3'
'text1 . text2 . text3';
grid-template-columns: 250px 200px 250px 200px 250px;
.illu {
width: 150px;
margin: auto;
}
.fleche {
width: 80px;
margin: auto;
}
h3 {
text-align: center;
margin-top: 20px;
margin-bottom: 10px;
color: #284256;
}
p {
text-align: center;
color: var(--couleur-5);
font-weight: bold;
}
#illu1 {
grid-area: illu1;
}
#illu2 {
grid-area: illu2;
}
#illu3 {
grid-area: illu3;
}
#text1 {
grid-area: text1;
}
#text2 {
grid-area: text2;
}
#text3 {
grid-area: text3;
}
#fleche1 {
grid-area: fleche1;
}
#fleche2 {
grid-area: fleche2;
}
}
}
.separateur {
padding: 0;
text-align: center;
margin: 0;
img {
width: 120%;
}
}
.contact {
img {
width: 100px;
}
&::before {
display: none;
}
}
}
/* ____________________________________________________________ Developpement ____________________________________________________________ */
#developpement {
background-image: url("./images/fond_outils.png");
background-image: image-set(url("./images/fond_outils.webp?v=2") type("image/webp"), url("./images/fond_outils.png") type("image/png"));
header {
font-size: 22px;
h1 {
font-size: 35px;
}
p {
margin-top: 20px;
color: white;
}
li {
list-style-type: none;
font-size: 20px;
font-weight: 700;
img {
width: 15px;
margin-right: 10px;
}
}
}
.accompagnement_details {
h2 {
padding-bottom: 0;
}
p {
text-align: center;
}
.cards {
.mini-card {
margin-top: 40px;
background: none;
box-shadow: none;
padding: 0;
gap: 0px;
img {
width: 50px;
}
h3 {
color: #284256;
margin-top: 20px;
margin-bottom: 10px;
}
p.highlight {
color: var(--couleur-5);
font-weight: bold;
font-size: 18px;
margin-top: 10px;
}
.fleche {
width: 15px;
}
}
}
}
.separateur {
margin: 0;
padding: 0;
width: 100%;
text-align: center;
img {
max-width: 100%;
}
;
}
.interventions {
background: linear-gradient(white, hsl(249, 100%, 84%) 60%, var(--couleur-2) 60%);
background-size: contain;
background-repeat: no-repeat;
margin-inline: 0;
padding-inline: 0;
position: relative;
overflow: hidden;
padding-bottom: 0;
h2 {
color: var(--couleur-2);
margin: auto;
position: relative;
z-index: 1;
img {
width: 25px;
margin-bottom: 20px;
}
}
>p {
color: var(--couleur-2);
margin: auto;
text-align: center;
text-wrap: balance;
position: relative;
z-index: 1;
}
.carousel {
width: 100%;
max-width: 100%;
}
.cards {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
-ms-overflow-style: none;
width: 100%;
margin: 40px 0;
padding: 20px 0;
}
.cards::-webkit-scrollbar {
display: none;
}
.mini-card {
justify-content: flex-start;
align-items: flex-start;
gap: 10px;
max-height: 400px;
min-width: 380px;
/* contenu complet affiche dans la modale "En savoir plus" (scripts/modale-detail.js) */
.texte_complet {
display: none;
}
.lien {
margin-top: auto;
padding-top: 20px;
}
h3 {
text-align: left;
line-height: 100%;
font-size: 24px;
}
p {
text-align: left;
font-size: 16px;
}
}
}
.points-forts {
background: var(--couleur-2);
color: white;
padding-top: 0;
padding-inline: var(--marge-content);
padding-top: 50px;
padding-bottom: 100px;
.content {
display: flex;
flex-direction: row;
>* {
flex: 1;
}
.text {
>img {
width: 90px;
margin-left: -20px;
}
h2 {
color: white;
text-align: left;
padding-top: 0px;
padding-left: 0;
}
h3 {
color: var(--couleur-5);
img {
width: 18px;
margin-right: 10px;
}
}
p {
color: white;
}
}
.illu {
img {
max-width: 100%;
}
}
}
}
.outils_existants {
background: linear-gradient(hsl(203, 33%, 85%), white);
color: hsl(203, 33%, 80%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: -70%;
left: -45%;
width: 150%;
height: 150%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -10deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 15%;
right: -65%;
width: 150%;
height: 150%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-after 10s ease-in-out infinite;
}
h2 {
display: flex;
justify-content: center;
align-items: center;
img {
max-width: 40px;
margin-right: 10px;
}
}
.cards {
gap: 40px;
.mini-card {
border: none;
box-shadow: none;
justify-content: flex-start;
gap: 10px;
background: none;
padding-inline: 0px;
h3 {
color: #284256;
}
button,
.button {
font-size: 16px;
}
img {
width: 120px;
}
}
}
}
.client-satisfait {
padding-inline: var(--marge-content);
.content {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 50px;
>* {
flex: 1;
}
.text {
>img {
width: 80px;
}
h2 {
text-align: left;
color: var(--couleur-2);
padding-left: 0;
}
p {
color: var(--couleur-2);
}
button {
margin-left: 0;
}
}
.illu {
>div {
margin-bottom: 20px;
display: flex;
flex-direction: column;
justify-content: start;
align-items: start;
gap: 15px;
background: white;
box-shadow: 0 0 10px gray;
width: 100%;
padding: 50px 30px;
border-radius: 15px;
color: var(--couleur-2);
transition: all 0.5s ease-in-out;
border-left: 15px solid transparent;
background:
linear-gradient(0deg, white, white) padding-box,
linear-gradient(0deg, #3CDCD7, #8C78FF) border-box;
}
img {
width: 100px;
}
p {
text-align: left;
color: var(--couleur-2);
font-weight: bold;
font-size: 20px;
}
}
}
}
}
/* ______________________________________________________________ Equipe ______________________________________________________________ */
#equipe-experts-rh {
background-image: url("./images/fond_equipe.png");
background-image: image-set(url("./images/fond_equipe.webp?v=2") type("image/webp"), url("./images/fond_equipe.png") type("image/png"));
background-position: center -200px;
main {
position: relative;
overflow: hidden;
&::before {
content: "";
position: absolute;
top: 10%;
left: -60%;
width: 80%;
height: 80%;
background-image: url("./images/crayon_gauche.png");
background-image: image-set(url("./images/crayon_gauche.webp?v=2") type("image/webp"), url("./images/crayon_gauche.png") type("image/png"));
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
/* animation: flotte-before 10s ease-in-out infinite; */
}
&::after {
content: "";
position: absolute;
top: 10%;
right: 0%;
width: 18%;
height: 18%;
background-image: url("./images/crayon_droite.png");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
/* animation: flotte-before 10s ease-in-out infinite; */
}
}
header {
position: relative;
flex-direction: column;
justify-content: center;
height: 400px;
overflow: visible;
h1 {
margin: 20px;
color: white;
background-color: var(--couleur-2);
padding: 5px 18px;
border-radius: 5px;
flex: 0;
img {
margin-right: 20px;
}
}
p {
text-align: center;
}
}
#notre-equipe {
text-align: center;
margin-top: 100px;
padding-bottom: 0px;
p {
padding: 0px 200px;
}
h2 {
padding-bottom: 10px;
}
}
#nos-experts {
background-image: linear-gradient(transparent, transparent 85%, var(--couleur-5));
position: relative;
z-index: 100;
overflow: hidden;
&::before {
content: "";
position: absolute;
bottom: -70px;
left: -300px;
width: 50%;
height: 50%;
background-image: url("./images/crayon_bas_gauche.png");
background-size: 100% auto;
background-position: bottom left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
/* animation: flotte-before 10s ease-in-out infinite; */
}
&::after {
content: "";
position: absolute;
bottom: -300px;
right: -60%;
width: 80%;
height: 80%;
background-image: url("./images/crayon_bas_droite.png");
background-image: image-set(url("./images/crayon_bas_droite.webp?v=2") type("image/webp"), url("./images/crayon_bas_droite.png") type("image/png"));
background-size: 100% auto;
background-position: bottom right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
/* animation: flotte-before 10s ease-in-out infinite; */
}
.content {
display: grid;
grid-template-columns: 500px 500px;
align-items: center;
justify-items: center;
justify-content: center;
margin: auto;
overflow: hidden;
position: relative;
z-index: 2;
.portrait {
text-align: center;
padding: 40px 40px;
img {
max-width: 400px;
}
}
.expertise {
display: flex;
flex-direction: column;
justify-content: start;
align-items: flex-start;
padding: 40px 0px;
img {
max-width: 100px;
}
h2 {
padding-inline: 0;
padding-bottom: 22px;
color: var(--couleur-5);
}
h3 {
color: var(--couleur-2);
padding-top: 0;
}
}
#portrait-amandine {
grid-column-start: 1;
grid-row-start: 1;
}
#expertise-amandine {
grid-column-start: 2;
grid-row-start: 1;
}
#portrait-benjamin {
grid-column-start: 2;
grid-row-start: 2;
text-align: left;
}
#expertise-benjamin {
grid-column-start: 1;
grid-row-start: 2;
align-items: flex-end;
text-align: right;
}
#portrait-sebastien {
grid-column-start: 1;
grid-row-start: 3;
}
#expertise-sebastien {
grid-column-start: 2;
grid-row-start: 3;
}
#portrait-matthieu {
grid-column-start: 2;
grid-row-start: 4;
text-align: left;
}
#expertise-matthieu {
grid-column-start: 1;
grid-row-start: 4;
align-items: flex-end;
text-align: right;
}
}
}
#ce-qui-nous-anime {
background: linear-gradient(var(--couleur-2), var(--couleur-2) 60%, white 60%);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
z-index: 1;
&::before {
content: "";
position: absolute;
top: 0;
center: 0;
width: 1974px;
height: 60%;
background-image: url("./images/arcs_degrades.png");
background-image: image-set(url("./images/arcs_degrades.webp?v=2") type("image/webp"), url("./images/arcs_degrades.png") type("image/png"));
background-size: 100% auto;
background-position: top center;
background-repeat: no-repeat;
pointer-events: none;
z-index: -1;
/* animation: flotte-before 10s ease-in-out infinite; */
}
>div {
text-align: center;
h2 {
color: white;
padding-bottom: 22px;
}
p {
color: white;
text-align: center;
}
}
.cards {
margin: 50px 0px;
gap: 15px;
}
.mini-card {
align-items: flex-start;
text-align: left;
gap: 22px;
font-size: 16px;
width: 300px;
padding: 30px;
img {
max-width: 100px;
}
h3 {
text-align: left;
color: var(--couleur-2);
}
p {
text-align: left;
font-size: 16px;
color: var(--couleur-2);
}
.concretement {
color: var(--couleur-5);
text-align: left;
margin-bottom: 0;
}
ul {
list-style: none;
color: var(--couleur-5);
font-weight: bold;
img {
width: 15px;
margin-right: 8px;
}
}
}
}
}
/* ______________________________________________________________ Footer ______________________________________________________________ */
footer {
background: var(--couleur-2);
color: white;
a {
color: inherit;
}
>* {
width: var(--largeur-content);
max-width: var(--largeur-content-max);
}
section {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-start gap: 20px;
margin: auto;
padding: 20px;
>div {
margin: 0px;
}
img {
max-width: 200px;
}
/* le svg n'a qu'un viewBox : sans largeur explicite il s'etire a la largeur du bloc */
.logo-linkedin {
width: 40px;
height: auto;
}
h4 {
font-size: 15px;
}
}
ul {
list-style: none;
font-size: 12px;
}
.legal {
color: var(--couleur-5);
text-align: center;
font-weight: bold;
font-size: 12px;
}
hr {
margin: auto;
}
a:hover {
color: var(--couleur-4);
}
}
/* ______________________________________________________________ ANIMATIONS ______________________________________________________________ */
@keyframes avion {
0%,
100% {
transform: rotate(0deg) translate(0, 0);
scale: 0.9;
}
50% {
transform: rotate(6deg) translate(15px, 0px);
scale: 1;
}
}
@keyframes flotte-before {
0%,
100% {
transform: translate(0, 0);
}
50% {
transform: translate(25px, 0px);
}
}
@keyframes flotte-after {
0%,
100% {
transform: rotate(180deg) translate(0, 0);
}
50% {
transform: rotate(180deg) translate(25px, 0px);
}
}
@keyframes fleche-diffusion {
0%,
10%,
20%,
100% {
transform: rotate(0deg) translate(0, 0);
}
5%,
15% {
transform: rotate(6deg) translate(-10px, -10px);
}
}
/* ______________________________________________________________ fiche produit oxil share______________________________________________________________ */
#fiche_produit_oxil_share {
background-image: url("./images/fond_ressources.png");
background-image: image-set(url("./images/fond_ressources.webp?v=2") type("image/webp"), url("./images/fond_ressources.png") type("image/png"));
background-position: center -300px;
header {
display: flex;
flex-direction: column;
align-items: center;
height: 365px;
margin-top: 100px;
margin-bottom: 0px;
gap: 0px;
h1 {
flex: 0;
color: white;
background-color: var(--couleur-2);
padding: 5px 18px;
border-radius: 5px;
flex: 0;
img {
margin-right: 20px;
}
}
h3 {
text-align: center;
flex: 0;
padding: 0;
max-width: 600px;
}
button {
flex: 0;
background: white;
color: var(--couleur-5);
padding: 15px 20px;
box-shadow: 0 0 10px rgb(152, 155, 156);
margin-top: 50px;
margin-bottom: 0px;
}
button:hover {
background: var(--degrade-1);
color: white;
}
p {
flex: 0;
max-width: 800px;
color: white;
text-align: center;
padding: 0px;
}
}
.interface_utilisateur {
padding: 100px;
padding-bottom: 3px;
.content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 70px;
.illu {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
min-width: 0;
img {
width: 100%;
max-width: 600px;
}
}
.texte {
padding: 20px;
font-size: 22px;
img {
max-width: 35px;
rotate:20deg;
}
h2 {
color: var(--couleur-2);
text-align: left;
margin-bottom: 20px;
padding: 0;
}
p {
margin-top: 0px;
font-weight: 400;
}
ul {
color: var(--couleur-2);
list-style: none;
font-weight: bold;
padding: 10px 0px;
img {
margin-right: 10px;
height: 15px;
rotate:0deg;
}
}
}
}
}
.Solution_complete {
background: linear-gradient(white, #A899FF);
position: relative;
overflow: hidden;
padding-inline: var(--marge-content);
&::before {
content: "";
position: absolute;
top: -70%;
left: -50%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 15%;
right: -60%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-after 10s ease-in-out infinite;
}
img{
max-width: 60px;
}
h2 {
position: relative;
z-index: 1;
padding-bottom: 0px;
}
p {
position: relative;
z-index: 1;
text-align: center;
max-width: 1000px;
margin: auto;
}
h3 {
font-weight: bold;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 44px 0px;
}
.mini-card {
width: auto;
align-items:start;
gap: 0px;
padding:30px;
border: none;
border-radius: 10px;
border-left: 10px solid transparent;
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(180deg, #3CDCD7, #8C78FF) border-box;
img {
margin: 10px;
max-height: 60px;
}
&:hover img {
scale: 1.05;
transform: rotate(10deg);
transition: 0.5s;
}
p {
margin-top: 0px;
margin-bottom: 20px;
font-size: 18px;
text-align: left;
}
H3 {
text-align: left;
padding-bottom: 10px;
}
}
}
.gestion_acces {
background-color: var(--couleur-2);
padding-top: 70px;
padding-bottom: 70px;
h2{
color:white;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-bottom : 40px;
img{
max-height: 60px;
}
}
.cards {
.mini-card {
background: none;
box-shadow: none;
padding: 0;
gap: 0;
img {
width: 40px;
margin-bottom: 20px;
}
p {
color: white;
}
}
}
}
.contact {
max-width: none;
width: 100%;
background: linear-gradient(hsl(249, 100%, 85%), white 80%);
padding: 100px var(--marge-content);
img {
width: 80px;
}
&::before {
display: none;
}
}
}
/* ______________________________________________________________ fiche produit oei______________________________________________________________ */
/* fond et entete partages avec la liste des articles (articles/gabarits/liste.php) */
:is(#fiche_produit_oei, #articles) {
background-image: url("./images/fond_ressources.png");
background-image: image-set(url("./images/fond_ressources.webp?v=2") type("image/webp"), url("./images/fond_ressources.png") type("image/png"));
background-position: center -300px;
header {
display: flex;
flex-direction: column;
align-items: center;
height: 365px;
margin-top: 100px;
margin-bottom: 0px;
gap: 0px;
h1 {
flex: 0;
color: white;
background-color: var(--couleur-2);
padding: 5px 18px;
border-radius: 5px;
flex: 0;
img {
margin-right: 20px;
}
}
h3 {
text-align: center;
flex: 0;
padding: 0;
max-width: 600px;
}
button {
flex: 0;
background: white;
color: var(--couleur-5);
padding: 15px 20px;
box-shadow: 0 0 10px rgb(152, 155, 156);
margin-top: 50px;
margin-bottom: 0px;
}
button:hover {
background: var(--degrade-1);
color: white;
}
p {
flex: 0;
max-width: 600px;
color: white;
text-align: center;
padding: 0px;
}
}
}
#fiche_produit_oei {
.benefices {
padding: 100px;
padding-bottom: 3px;
.content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 70px;
.illu {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
min-width: 0;
img {
width: 100%;
max-width: 600px;
}
}
.texte {
padding: 20px;
font-size: 18px;
img {
max-width: 35px;
rotate:20deg;
}
h2 {
color: var(--couleur-2);
text-align: left;
margin-bottom: 20px;
padding: 0;
}
p {
margin-top: 0px;
font-weight: 400;
}
ul {
color: var(--couleur-2);
list-style: none;
font-weight: bold;
padding: 30px 0px;
img {
margin-right: 10px;
height: 15px;
rotate:0deg;
}
}
}
}
}
.fonctionnalites {
background: linear-gradient(white, #A899FF);
position: relative;
overflow: hidden;
padding-inline: var(--marge-content);
&::before {
content: "";
position: absolute;
top: -70%;
left: -50%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 15%;
right: -60%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-after 10s ease-in-out infinite;
}
img{
max-width: 60px;
}
h2 {
position: relative;
z-index: 1;
}
p {
position: relative;
z-index: 1;
text-align: center;
max-width: 1000px;
margin: auto;
}
h3 {
font-weight: bold;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 44px 0px;
}
.mini-card {
width: auto;
align-items:start;
gap: 0px;
padding:30px;
border: none;
border-radius: 10px;
border-left: 10px solid transparent;
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(180deg, #3CDCD7, #8C78FF) border-box;
img {
margin: 10px;
max-height: 60px;
}
&:hover img {
scale: 1.05;
transform: rotate(10deg);
transition: 0.5s;
}
p {
margin-top: 0px;
margin-bottom: 20px;
font-size: 18px;
text-align: left;
}
H3 {
text-align: left;
padding-bottom: 10px;
}
}
}
.pour_qui {
background-color: var(--couleur-2);
padding-top: 100px;
padding-bottom: 100px;
h2{
color:white;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-bottom : 40px;
img{
max-height: 70px;
}
}
.cards {
.mini-card {
background: none;
box-shadow: none;
padding: 0;
gap: 0;
img {
width: 40px;
margin-bottom: 20px;
}
p {
color: white;
}
}
}
}
.contact {
max-width: none;
width: 100%;
background: linear-gradient(hsl(249, 100%, 85%), white 80%);
padding: 100px var(--marge-content);
img {
width: 80px;
}
&::before {
display: none;
}
}
}
/* ______________________________________________________________ fiche produit myplanning______________________________________________________________ */
#fiche_produit_myplanning {
background-image: url("./images/fond_ressources.png");
background-image: image-set(url("./images/fond_ressources.webp?v=2") type("image/webp"), url("./images/fond_ressources.png") type("image/png"));
background-position: center -300px;
header {
display: flex;
flex-direction: column;
align-items: center;
height: 365px;
margin-top: 100px;
margin-bottom: 0px;
gap: 0px;
h1 {
flex: 0;
color: white;
background-color: var(--couleur-2);
padding: 5px 18px;
border-radius: 5px;
flex: 0;
img {
margin-right: 20px;
}
}
h3 {
text-align: center;
flex: 0;
padding: 0;
max-width: 600px;
}
button {
flex: 0;
background: white;
color: var(--couleur-5);
padding: 15px 20px;
box-shadow: 0 0 10px rgb(152, 155, 156);
margin-top: 50px;
margin-bottom: 0px;
}
button:hover {
background: var(--degrade-1);
color: white;
}
p {
flex: 0;
max-width: 600px;
color: white;
text-align: center;
padding: 0px;
}
}
.benefices {
padding: 100px;
padding-bottom: 3px;
.content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 70px;
.illu {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
min-width: 0;
img {
width: 100%;
max-width: 550px;
}
}
.texte {
padding: 70px 20px;
font-size: 18px;
img {
max-width: 35px;
rotate:20deg;
}
h2 {
color: var(--couleur-2);
text-align: left;
margin-bottom: 20px;
padding: 0;
}
p {
margin-top: 0px;
font-weight: 400;
}
ul {
color: var(--couleur-2);
list-style: none;
font-weight: bold;
padding: 30px 0px;
img {
margin-right: 10px;
height: 15px;
rotate:0deg;
}
}
}
}
}
.fonctionnalites {
background: linear-gradient(white, #A899FF);
position: relative;
overflow: hidden;
padding-inline: var(--marge-content);
&::before {
content: "";
position: absolute;
top: -70%;
left: -50%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 15%;
right: -60%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-after 10s ease-in-out infinite;
}
h2 {
position: relative;
z-index: 1;
img{max-height: 60px;}
}
p {
position: relative;
z-index: 1;
text-align: center;
max-width: 1000px;
margin: auto;
}
h3 {
font-weight: bold;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 44px 0px;
}
.mini-card {
width: auto;
align-items:start;
gap: 0px;
padding:30px;
border: none;
border-radius: 10px;
border-left: 10px solid transparent;
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(180deg, #3CDCD7, #8C78FF) border-box;
img {
margin: 10px;
max-height: 60px;
}
&:hover img {
scale: 1.05;
transform: rotate(10deg);
transition: 0.5s;
}
p {
margin-top: 0px;
margin-bottom: 20px;
font-size: 18px;
text-align: left;
}
H3 {
text-align: left;
padding-bottom: 10px;
}
}
}
.pour_qui {
background: #416982;
position: relative;
overflow: hidden;
padding-inline: var(--marge-content);
h2{
color:white;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-bottom : 40px;
img{
max-height: 70px;
}
}
.cards {
.mini-card {
background: none;
box-shadow: none;
padding: 0;
gap: 0;
img {
width: 40px;
margin-bottom: 20px;
}
p {
color: white;
}
}
}
}
.contact {
max-width: none;
width: 100%;
/*background: linear-gradient(hsl(249, 100%, 85%), white 80%);*/
background:white;
padding: 100px var(--marge-content);
img {
width: 80px;
}
&::before {
display: none;
}
}
}
/* ______________________________________________________________ fiche produit entretiens______________________________________________________________ */
#fiche_produit_entretiens {
background-image: url("./images/fond_ressources.png");
background-image: image-set(url("./images/fond_ressources.webp?v=2") type("image/webp"), url("./images/fond_ressources.png") type("image/png"));
background-position: center -300px;
header {
display: flex;
flex-direction: column;
align-items: center;
height: 365px;
margin-top: 100px;
margin-bottom: 0px;
gap: 0px;
h1 {
flex: 0;
color: white;
background-color: var(--couleur-2);
padding: 5px 18px;
border-radius: 5px;
flex: 0;
img {
margin-right: 20px;
}
}
h3 {
text-align: center;
flex: 0;
padding: 0;
max-width: 600px;
}
button {
flex: 0;
background: white;
color: var(--couleur-5);
padding: 15px 20px;
box-shadow: 0 0 10px rgb(152, 155, 156);
margin-top: 50px;
margin-bottom: 0px;
}
button:hover {
background: var(--degrade-1);
color: white;
}
p {
flex: 0;
max-width: 600px;
color: white;
text-align: center;
padding: 0px;
}
}
.benefices {
padding: 100px;
padding-bottom: 3px;
.content {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 70px;
.illu {
display: flex;
flex-direction: column;
justify-content: start;
align-items: center;
min-width: 0;
img {
width: 100%;
max-width: 600px;
}
}
.texte {
padding: 20px;
font-size: 18px;
img {
max-width: 35px;
rotate:20deg;
}
h2 {
color: var(--couleur-2);
text-align: left;
margin-bottom: 20px;
padding: 0;
}
p {
margin-top: 0px;
font-weight: 400;
}
ul {
color: var(--couleur-2);
list-style: none;
font-weight: bold;
padding: 30px 0px;
img {
margin-right: 10px;
height: 15px;
rotate:0deg;
}
}
}
}
}
.reforme {
H2{
padding-bottom: 0px;
}
p {
position: relative;
z-index: 1;
text-align: center;
max-width: 1000px;
margin: auto;
}
.cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin: 44px 0px;
}
.mini-card {
width: auto;
align-items:center;
gap: 0px;
padding:30px;
border: none;
border-radius: 10px;
background:#A899FF;
h3{color:white}
p{color:white}
}
}
.fonctionnalites {
background: linear-gradient(white, #A899FF);
position: relative;
overflow: hidden;
padding-inline: var(--marge-content);
&::before {
content: "";
position: absolute;
top: -70%;
left: -50%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top left;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-before 10s ease-in-out infinite;
}
&::after {
content: "";
position: absolute;
top: 15%;
right: -60%;
width: 140%;
height: 140%;
background-image: url("./images/cerceau_blanc.svg");
background-size: contain;
background-position: top right;
background-repeat: no-repeat;
pointer-events: none;
z-index: 0;
rotate: -35deg;
animation: flotte-after 10s ease-in-out infinite;
}
img{
max-width: 60px;
}
h2 {
position: relative;
z-index: 1;
}
p {
position: relative;
z-index: 1;
text-align: center;
max-width: 1000px;
margin: auto;
}
h3 {
font-weight: bold;
}
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
margin: 44px 0px;
}
.mini-card {
width: auto;
align-items:start;
gap: 0px;
padding:30px;
border: none;
border-radius: 10px;
border-left: 10px solid transparent;
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(180deg, #3CDCD7, #8C78FF) border-box;
img {
margin: 10px;
max-height: 60px;
}
&:hover img {
scale: 1.05;
transform: rotate(10deg);
transition: 0.5s;
}
p {
margin-top: 0px;
margin-bottom: 20px;
font-size: 18px;
text-align: left;
}
H3 {
text-align: left;
padding-bottom: 10px;
}
}
}
.pour_qui {
background: #416982;
position: relative;
overflow: hidden;
padding-inline: var(--marge-content);
h3{
color:white;
}
h2{
color:white;
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
margin-bottom : 40px;
img{
max-height: 40px;
}
}
.cards {
.mini-card {
background: none;
box-shadow: none;
padding: 0;
gap: 0;
img {
width: 40px;
margin-bottom: 20px;
}
p {
color: white;
}
}
}
}
.contact {
max-width: none;
width: 100%;
/*background: linear-gradient(hsl(249, 100%, 85%), white 80%);*/
background:white;
padding: 100px var(--marge-content);
img {
width: 80px;
}
&::before {
display: none;
}
}
}
/* ______________________________________________________________ BLOG (articles/) ______________________________________________________________ */
#article {
background-image: url("./images/fond_conseil.png");
background-image: image-set(url("./images/fond_conseil.webp?v=2") type("image/webp"), url("./images/fond_conseil.png") type("image/png"));
header {
height: auto;
min-height: 520px;
padding-block: 60px;
font-size: 18px;
/* sans couverture : le texte ne s'etire pas sur toute la largeur */
&.sans-image>div {
max-width: 900px;
}
h1 {
font-size: 35px;
line-height: 1.4;
span {
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
}
p {
color: white;
}
}
}
:is(#article, #articles) .contact>img {
width: 90px;
}
/* page Ressources et bloc contact des articles : pas d'avion en papier
(deux classes / un id : l'emporte aussi sur la regle mobile ".contact::before", chargee apres) */
#articles .contact::before,
.contact.article-cta::before {
content: none;
}
.article-controle {
width: var(--largeur-content);
max-width: var(--largeur-content-max);
margin: 20px auto 0;
padding: 14px 20px;
border-radius: 10px;
background: #fff4e5;
color: #8a4b00;
ul {
margin: 6px 0 0 20px;
}
}
.article-fil {
font-size: 15px;
a {
color: white;
text-decoration: underline;
text-underline-offset: 3px;
}
}
.article-chapo {
margin-top: 10px;
font-size: 20px;
line-height: 1.5;
text-wrap: pretty;
}
.article-auteur {
display: flex;
align-items: center;
gap: 14px;
margin-top: 24px;
img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
background: white;
flex: none;
}
div {
display: flex;
flex-direction: column;
gap: 2px;
padding: 0;
}
a,
strong {
color: white;
}
span {
font-size: 15px;
}
.article-date {
font-size: 14px;
opacity: 0.9;
}
}
.article-couverture img {
border-radius: 15px;
box-shadow: 0 20px 50px rgba(40, 66, 86, 0.3);
}
/* corps de l'article + colonne des articles de la meme categorie */
.article-colonnes {
display: grid;
grid-template-columns: minmax(0, 880px) 300px;
justify-content: center;
align-items: start;
gap: 30px;
width: min(1240px, 92%);
margin: 0 auto 50px;
/* article seul dans sa categorie : la carte de lecture reste centree */
&:not(:has(.article-meme-categorie)) {
grid-template-columns: minmax(0, 880px);
}
}
.article-meme-categorie {
position: sticky;
top: 100px;
padding: 28px 26px;
border-radius: 15px;
border-left: 15px solid transparent;
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(180deg, #3CDCD7, #8C78FF) border-box;
box-shadow: 0 10px 40px rgba(40, 66, 86, 0.15);
color: var(--couleur-2);
h2 {
margin: 0 0 10px;
padding: 0;
font-size: 20px;
line-height: 1.3;
text-align: left;
color: var(--couleur-2);
}
.article-categorie {
display: inline-block;
margin-bottom: 18px;
padding: 4px 14px;
border-radius: 999px;
background: var(--couleur-5);
color: white;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li + li {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid #e3e6f0;
}
li a {
font-size: 16px;
font-weight: 700;
line-height: 1.4;
color: inherit;
&:hover {
color: var(--couleur-5);
}
}
.lien {
display: inline-block;
margin-top: 22px;
font-size: 15px;
font-weight: 800;
color: var(--couleur-5);
}
}
/* corps de l'article : HTML sans mise en forme dans articles/contenus/, tout le rendu est ici */
.article-corps {
/* carte de lecture posee sur le fond de page */
position: relative;
width: auto;
margin: 0;
padding: 50px 60px 40px;
border-radius: 15px;
background: white;
box-shadow: 0 10px 40px rgba(40, 66, 86, 0.15);
color: var(--couleur-2);
font-size: 18px;
line-height: 1.7;
&::after {
content: "";
display: block;
clear: both;
}
h2 {
display: block;
margin: 44px 0 16px;
padding: 0;
font-size: 28px;
line-height: 1.3;
text-align: left;
color: var(--couleur-2);
}
>h2:first-child {
margin-top: 0;
}
h3 {
margin: 30px 0 12px;
font-size: 22px;
text-align: left;
}
p {
margin: 0 0 18px;
font-size: inherit;
text-wrap: pretty;
}
a {
text-decoration: underline;
text-underline-offset: 3px;
}
ul,
ol {
margin: 0 0 18px 24px;
li {
margin-bottom: 6px;
}
}
img {
display: block;
max-width: 100%;
height: auto;
margin: 28px auto;
border-radius: 12px;
}
figure {
margin: 28px auto;
text-align: center;
img {
margin: 0 auto;
}
}
figcaption {
margin-top: 8px;
font-size: 14px;
color: var(--couleur-3);
}
/* positions d'image : class="droite|gauche|pleine-largeur" sur
![]()
ou
*/
.droite {
float: right;
max-width: 45%;
margin: 6px 0 18px 30px;
}
.gauche {
float: left;
max-width: 45%;
margin: 6px 30px 18px 0;
}
.pleine-largeur {
clear: both;
width: 100%;
max-width: 100%;
}
blockquote {
clear: both;
margin: 34px 0;
padding: 6px 0 6px 26px;
border-left: 5px solid var(--couleur-5);
font-size: 22px;
font-weight: 700;
line-height: 1.45;
cite {
display: block;
margin-top: 8px;
font-size: 15px;
font-style: normal;
font-weight: 400;
color: var(--couleur-3);
}
}
table {
width: 100%;
margin: 0 0 18px;
border-collapse: collapse;
font-size: 16px;
th,
td {
padding: 10px 12px;
border-bottom: 1px solid #dfe3ea;
text-align: left;
}
th {
background: #f1efff;
}
}
aside {
clear: both;
margin: 44px 0;
padding: 26px 30px 12px;
border-radius: 12px;
h2 {
margin-top: 0;
font-size: 24px;
}
}
.avis-oxil {
background: #f1efff;
border-left: 8px solid var(--couleur-5);
}
.synthese {
background: #e9fbfa;
border-left: 8px solid var(--couleur-4);
}
}
/* cartes d'article : liste et bandeau "A lire aussi" */
.mini-card.carte-article {
align-items: flex-start;
gap: 10px;
padding: 24px;
text-decoration: none;
color: var(--couleur-2);
/* meme liseré degrade a gauche que .question-bsi .mini-card (la regle globale alterne haut / bas) */
border: none;
border-left: 15px solid transparent;
box-shadow: 0 0 10px var(--couleur-2);
background:
linear-gradient(90deg, white, white) padding-box,
linear-gradient(180deg, #3CDCD7, #8C78FF) border-box;
&:hover {
transform: translateY(-4px);
box-shadow: 0 12px 30px rgba(40, 66, 86, 0.25);
}
.carte-categorie {
padding: 4px 14px;
border-radius: 999px;
background: var(--couleur-2);
color: white;
font-size: 13px;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
}
h3 {
margin: 0;
padding: 0;
font-size: 20px;
line-height: 1.3;
text-align: left;
}
p {
font-size: 15px;
text-align: left;
}
.carte-infos {
font-size: 13px;
color: var(--couleur-3);
}
.lien {
margin-top: auto;
font-weight: 800;
color: var(--couleur-5);
}
}
/* recherche dans l'entete : meme habillage que le bouton "Demander une demo" des fiches produit */
#articles .articles-recherche {
/* pas "flex: 0" comme les autres enfants du header : base 0 % + overflow hidden = hauteur ecrasee a 0 */
flex: none;
display: flex;
width: min(560px, 100%);
margin-top: 50px;
padding: 0;
border-radius: 5px;
background: white;
box-shadow: 0 0 10px rgb(152, 155, 156);
overflow: hidden;
&:focus-within {
outline: 2px solid var(--couleur-5);
outline-offset: 2px;
}
input {
flex: 1;
min-width: 0;
padding: 15px 20px;
border: none;
background: none;
color: var(--couleur-2);
font-size: 18px;
outline: none;
}
button {
margin: 0;
padding: 15px 20px;
border-radius: 0;
box-shadow: none;
background: white;
color: var(--couleur-5);
&:hover {
background: var(--degrade-1);
color: white;
}
}
}
.articles-resultats {
margin-bottom: 30px;
text-align: center;
a {
font-weight: 700;
text-decoration: underline;
}
}
.articles-liste {
padding: 60px 0;
/* ancre #resultats apres une recherche : la section s'arrete sous le menu sticky */
scroll-margin-top: 90px;
h2 {
margin-bottom: 30px;
}
}
.articles-filtres {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-bottom: 40px !important;
a {
padding: 8px 16px;
border: 2px solid #e3e6f0;
border-radius: 999px;
background: white;
color: var(--couleur-2);
font-weight: 700;
span {
margin-left: 4px;
font-size: 13px;
color: var(--couleur-3);
}
&:hover {
border-color: var(--couleur-5);
}
&[aria-current="page"] {
border-color: var(--couleur-2);
background: var(--couleur-2);
color: white;
span {
color: white;
}
}
}
}
.articles-grille {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 30px;
.mini-card {
width: auto;
margin: 0;
}
}
.articles-vide {
text-align: center;
}
.articles-lies {
background: linear-gradient(white, hsl(249, 100%, 84%));
padding-bottom: 40px;
h2 {
margin-bottom: 10px;
}
.carousel {
width: 100%;
max-width: 100%;
}
.cards {
flex-wrap: nowrap;
justify-content: flex-start;
overflow-x: auto;
scrollbar-width: none;
padding: 20px 0;
&::-webkit-scrollbar {
display: none;
}
}
.mini-card {
flex: 0 0 340px;
width: 340px;
}
.carousel>div:last-child {
display: flex;
justify-content: center;
gap: 12px;
margin-top: 10px;
}
.avis-nav {
width: 50px;
height: 50px;
margin: 0;
padding: 0;
border-radius: 50%;
background: var(--couleur-5);
color: white;
font-size: 30px;
line-height: 1;
&:hover {
background: white;
color: var(--couleur-5);
}
}
}
/* Bandeau de consentement (includes/consentement.php) : "Refuser" et "Accepter" de meme poids */
.consentement {
position: fixed;
right: 24px;
bottom: 24px;
z-index: 2000;
box-sizing: border-box;
width: min(460px, calc(100% - 32px));
padding: 22px 24px;
border-radius: 10px;
background: white;
box-shadow: 0 10px 40px rgba(40, 66, 86, 0.25);
&[hidden] {
display: none;
}
p {
margin: 0 0 12px;
font-size: 14px;
text-wrap: pretty;
}
.consentement-titre {
font-size: 17px;
font-weight: 800;
}
a {
text-decoration: underline;
}
.consentement-boutons {
display: flex;
gap: 12px;
margin-top: 16px;
}
button {
flex: 1;
margin: 0;
font-size: 16px;
}
}
@media (max-width: 600px) {
.consentement {
right: 16px;
bottom: 16px;
}
}