/* ===========================
Variables globales
=========================== */
html {
scroll-behavior: smooth;
}
:root {
--color-primary: #16495B;
--color-background: #FAF7F2;
--color-accent: #C47B59;
--color-anis: #DEE6D2;
--color-text-light: #FAF7F2;
}
/* Variables */
:root{
/* Début des couleurs définies dans functions.php */
--couleur-blanc:#fff;
--color-primary: #16495B;
--color-background: #FAF7F2;
--color-accent: #C47B59;
--color-anis: #DEE6D2;
--color-text-light: #FAF7F2;
/* Fin des couleurs définies dans functions.php */
--couleurTexte:var(--color-primary: #16495B;); /* Couleurs utilisées par défaut sur certaines déclarations, modifier la valeur pour éviter des rechercher/remplacer */
--couleurDefaut:var(--couleur-couleur-principale); /* Couleurs utilisées par défaut sur certaines déclarations, modifier la valeur pour éviter des rechercher/remplacer */
--margesDefaut:3rem; /* Espacement par défaut */
--margesBigCotes:90px;
--largeur:1200px; /* Largeur de contenu maximale, adaptable sur différents supports */
--largScrollBar:0px;
/* Formulaires : */
--form-contours:var(--color-accent); /* Couleur des contours de champs */
--form-input-border:1px; /* Épaisseur des contours de champs */
--form-fonds:transparent; /* Couleur de fond des champs */
--form-boutons:var(--color-accent); /* Couleur des boutons et autres éléments interactifs */
--form-boutons-textes:var(--color-background); /* Couleur du texte des boutons */
--form-check-taille:3rem; /* Taille des pastilles de checkboxes (entre autres) */
--form-input-height:4rem; /* Hauteur des champs */
--form-input-lineheight:1.4em; /* Hauteur de ligne des champs */
}
/* ===========================
Reset de base
=========================== */
/* Global */
*, *::before, *::after{
box-sizing:inherit;
min-width:0;
min-height:0;
}
html{
box-sizing:border-box;
font-size:62.5%;
overflow-wrap:break-word;
-webkit-text-size-adjust:100%;
-moz-text-size-adjust:100%;
-ms-text-size-adjust:100%;
text-size-adjust:100%;
-webkit-tap-highlight-color:transparent;
scroll-behavior: smooth;
}
body {
font-family: "Reddit Sans", sans-serif;
background-color: var(--color-background);
color: var(--color-primary);
font-size:1.6rem;
line-height:1.5;
margin:0;
}
@media(min-width:1500px){
:root{ --largeur:1280px;
overflow-x: hidden;
}
}
@media(max-width:1260px){
:root{ --largeur:960px; }
}
@media(max-width:980px){
:root{ --largeur:540px; }
}
@media(max-width:600px){
:root{ --largeur:300px; }
}
.container,
.alignfull > .wp-block-group__inner-container{
width:var(--largeur);
max-width:100%;
margin-left:auto;
margin-right:auto;
}
.alignfull{
width:100vw;
max-width:100vw;
margin-left:calc(-50vw + 50%);
margin-right:calc(-50vw + 50%);
}
@supports(margin:var(--largScrollBar)) {
.alignfull{
width: calc(100vw - var(--largScrollBar));
margin-left:calc(-50vw + 50% + (var(--largScrollBar) * 0.5));
margin-right:calc(-50vw + 50% + (var(--largScrollBar) * 0.5));
}
}
.container.container-smaller{
padding: 0 calc(var(--largeur) - var(--largeur) *.9167);
}
.lmtWIHO_gkbTeeyuvoJC.mOUYF5ZmuNL6I7t0mSFg{
background:transparent;
}
.lmtWIHO_gkbTeeyuvoJC, .lmtWIHO_gkbTeeyuvoJC.mOUYF5ZmuNL6I7t0mSFg{
background:transparent !important;
}
.back-anis{
background-color: var(--color-anis);
}
/* ===========================
ANIMATIONS MOTS
=========================== */
/* Animation de base pour les mots */
.text-reveal .word {
opacity: 0;
transform: translateY(20px);
display: inline-block;
margin-right: 0;
}
.text-reveal.is-visible .word {
opacity: 1;
transform: translateY(0);
transition: opacity .5s ease-out, transform .5s ease-out;
transition-delay: calc(var(--word-index) * 0.2s);
}
.reveal{
opacity: 0;
transition: opacity 1s ease-out, transform 1.2s ease-out;
transform: translateY(50%);
}
.reveal.is-visible{
opacity: 1;
transform: translateY(0);
}
/* ===========================
Header
=========================== */
.header {
background-color: var(--color-background);
position: sticky;
top: 0;
z-index: 100;
}
.header .container {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
color: var(--color-primary);
}
/* ===========================
HEADER
=========================== */
@keyframes rotateRosace {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.site-title{
height:70px;
margin-block:10px;
}
.rosette {
transform-box: fill-box;
transform-origin: center;
animation: rotateRosace 20s linear infinite;
}
/* ===========================
Navigation Desktop
=========================== */
.nav ul {
list-style: none;
display: flex;
gap: 2rem;
}
.nav a {
text-decoration: none;
color: var(--color-primary);
font-size: 14px;
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
}
.nav a:hover {
color: var(--color-accent);
}
@media (min-width:1280px){
.nav li {
border-top:1px solid var(--color-primary);
}
.nav li.last-li{
border-top:none;
}
.nav a {
padding: 8px auto;
}
.nav a.last-button{
border-top:none;
display: inline-flex;
height: 28px;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
border-radius: 8px;
background: #C47B59;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
color:var(--color-background);
}
}
.secondary-menu-container{
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
}
.phone-header{
text-decoration:none;
font-size: 14px;
color:var(--color-primary);
font-style: normal;
font-weight: 700;
line-height: normal;
text-transform: uppercase;
padding-right:12px;
}
.linkedin-link{
display: inline-flex;
height: 26px;
padding: 8px;
justify-content: center;
align-items: center;
gap: 10px;
flex-shrink: 0;
background:var(--color-primary);
margin-right:0;
}
/* ===========================
Burger Menu
=========================== */
.burger {
display: none;
flex-direction: column;
justify-content: space-between;
width: 25px;
height: 18px;
cursor: pointer;
}
.burger span {
display: block;
height: 3px;
background-color: var(--color-primary);
border-radius: 3px;
transition: all 0.3s;
}
/* Animation du burger */
.burger.toggle span:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.burger.toggle span:nth-child(2) {
opacity: 0;
}
.burger.toggle span:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* ===========================
Navigation Mobile
=========================== */
.menu-container{
display:flex;
flex-direction:column;
}
@media (max-width: 1280px) {
.menu-container{
flex-direction:row;
align-items: center;
}
.secondary-menu-container{
padding-bottom:0;
}
.linkedin-link{
margin-right:30px;
}
.nav {
position: absolute;
right: 0;
top: 70px;
width: 100%;
background-color: var(--color-background);
text-align: center;
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.nav ul {
flex-direction: column;
padding: 1rem 0;
gap: 1rem;
}
.nav.nav-active {
max-height: 300px; /* hauteur du menu déroulant */
}
.burger {
display: flex;
}
.phone-header{
display:none;
}
}
@media (max-width:599px){
.linkedin-link{
margin:0;
display:none;
}
}
/* ===========================
Sections principales
=========================== */
section {
padding: 4rem 0;
}
.chapo {
font-size: 3.2rem;
color:var(--color-primary);
font-style: normal;
font-weight: 400;
line-height: normal;
}
.chapo strong{
font-weight:700;
}
h2 {
margin-top:30px;
padding-top:8px;
display:inline-block;
font-size: 2rem;
color: var(--color-accent);
margin-bottom: 1rem;
font-weight: 800;
line-height: normal;
text-transform: uppercase;
border-top:1px solid var(--color-accent);
}
@media (max-width:980px){
.chapo {
font-size:2.2rem;
}
h2 {
font-size:1.5rem;
margin-top:0;
}
}
.container-header{
width:var(--largeur);
margin:auto;
border-bottom:1px solid var(--color-primary);
}
/* ===========================
Boutons
=========================== */
.button {
background-color: var(--color-accent);
color: var(--color-background);
display: inline-flex;
padding: 8px 16px;
justify-content: center;
align-items: center;
gap: 10px;
border-radius: 12px;
font-size: 2rem;
font-weight:600;
cursor: pointer;
text-decoration: none;
transition: background-color 0.3s;
}
.button:hover {
background-color: var(--color-primary);
}
/* ===========================
FOOTER
=========================== */
.footer-site{
background:var(--color-accent);
color:var(--color-background);
padding-block:30px;
}
.nav-footer ul {
display:flex;
flex-direction: column;
}
.nav-footer ul li {
border-top:1px solid var(--color-background);
display:block;
padding:0;
}
.nav-footer ul li a {
font-size: 14px;
color:var(--color-background);
font-style: normal;
font-weight: 600;
line-height: normal;
text-transform: uppercase;
text-decoration: none;
padding-inline: 0;;
}
.container-footer1{
display:block;
text-align:center;
}
.container-footer1 .col-footer{
width:100%;
}
.contact-adresse-zone{
padding-top:8px;
border-top:1px solid var(--color-background);
color:var(--color-background);
text-align:left;
margin-top:16px;
}
.text-name-surname-footer{
font-size: 2.4rem;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.phone-footer a{
color:var(--color-background);
text-decoration: none;
font-size: 2.4rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.mail-footer a{
color:var(--color-background);
text-decoration: none;
font-size: 2.2rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.container-footer2{
text-align:center;
}
.container-footer2 a {
color:var(--color-background);
text-decoration: none;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding-inline:1em;
}
@media (min-width:1024px){
.container-footer1{
display:grid;
grid-template-columns: repeat(12, 1fr);
}
.col-footer-footer1{
grid-column: 1/4;
}
.col-footer-footer1 svg{
max-width:90%;
}
.col-footer-footer2{
grid-column: 5/8;
}
.col-footer-footer3{
grid-column: 9/11;
}
.nav-footer ul li, .nav-footer ul li a {
text-align:left;
font-size:1.4rem;
padding-block:5px;
}
}
@media (max-width:980px){
.nav-footer ul{
padding-left:0;
}
.container-footer2{
display:flex;
flex-direction:column;
align-items:center;
}
.contact-adresse-zone{
text-align:center;
}
.footer-site{
margin-bottom:60px;
}
.container-footer1 .col-footer svg{
max-width:60%;
}
}
/* ===========================
HEADER LANDING
=========================== */
.section-header-top{
padding:0;
}
.container-section-header{
height: 433px;
position:relative;
/*overflow:hidden;*/
flex-shrink: 0;
background-color: var(--color-accent);
display:grid;
grid-template-columns: repeat(12, 1fr);
}
.text-section-header{
grid-column:5/12;
}
h1{
color:var(--color-background);
font-size: 5rem;
font-style: normal;
font-weight: 700;
line-height:1;
margin-top:2em;
}
h1.red{
color:var(--color-accent);
}
.baseline-header-landing {
color:var(--color-background);
font-size: 2.4rem;
font-style: normal;
font-weight: 500;
padding-bottom:10px;
display:inline-block;
border-bottom:1px solid var(--color-background);
padding-top:30px;
}
.rosace-header {
position:absolute;
/*background-image: url('data:image/svg+xml,');*/
content:"";
display:block;
bottom:-30px;
right:-30px;
width:500px;
height:480.62px;
}
.rosace-in-red {
position:absolute;
background-image: url('data:image/svg+xml,');
content:"";
display:block;
bottom:-30px;
right:-30px;
width:500px;
height:480.62px;
}
@media (max-width:980px){
.rosace-header{
display: none;
}
}
/* ===========================
SECTION SLIDER LOGO
=========================== */
.logo-slider {
position: relative;
overflow: hidden;
background: #DEE6D2;
padding: 50px 0 80px;
width: 100%;
margin: 0 auto;
}
/* Bande des logos */
.slider-track {
display: flex;
align-items: center;
gap: 40px;
width: max-content; /* largeur automatique selon le contenu */
animation: scroll 25s linear infinite;
}
/* Logos */
.slider-track img {
width: 120px; /* taille fixe pour garder la proportion sur mobile */
height: auto;
object-fit: contain;
transition: transform 0.3s ease;
}
.slider-track img:hover {
transform: scale(1.05);
}
/* Dégradés sur les bords */
.logo-slider::before,
.logo-slider::after {
content: "";
position: absolute;
top: 0;
width: 100px;
height: 100%;
z-index: 2;
pointer-events: none;
}
.logo-slider::before {
left: 0;
background: linear-gradient(to right, #DEE6D2 0%, transparent 100%);
}
.logo-slider::after {
right: 0;
background: linear-gradient(to left, #DEE6D2 0%, transparent 100%);
}
/* Animation */
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-50%); } /* on défile jusqu’à la moitié (car duplication des logos) */
}
/* Pause au survol */
.logo-slider:hover .slider-track {
/*animation-play-state: paused;*/
}
/* ===========================
Responsive breakpoints
=========================== */
/* <=1024px */
@media (max-width: 1024px) {
.slider-track img {
width: 100px;
}
.slider-track {
animation: scroll 18s linear infinite;
}
}
/* <=768px */
@media (max-width: 768px) {
.slider-track img {
width: 90px;
}
.slider-track {
animation: scroll 15s linear infinite;
}
}
/* <=600px */
@media (max-width: 600px) {
.slider-track img {
width: 80px;
}
.slider-track {
animation: scroll 20s linear infinite; /* plus rapide sur mobile */
}
}
/* <=400px */
@media (max-width: 400px) {
.slider-track img {
width: 70px;
}
.slider-track {
animation: scroll 18s linear infinite;
}
}
.section-slider-confiance{
position:relative;
z-index:2;
padding-bottom:60px;
}
.section-slider-confiance.section-formulaire-container-zone{
padding-bottom:4rem;
}
.liste-avis-under-anis{
position:relative;
z-index:4;
display:flex;
flex-direction:row;
justify-content: space-between;
align-items: flex-start;
margin-top:-63px;
padding-top:0;
margin-bottom:90px;
}
.avis-item {
width:32.5%;
background:var(--couleur-blanc);
border-radius:12px;
margin-bottom:30px;
}
.container-avis-item{
padding:24px;
padding-bottom:50px;
}
.flex-container-photo-name{
display:flex;
flex-direction:row;
justify-content: flex-start;
align-items: center;
padding-bottom:20px;
}
.visual-avis-item{
width:48px;
}
.text-nom-photo{
display:block;
padding-left:20px;
}
.name-avis-item{
color: #000;
font-size: 2rem;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.date-avis-item{
color: #878787;
font-size: 1.4rem;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.content-avis{
color: #000;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: normal;
overflow-y: hidden;
text-overflow: ellipsis;
}
@media (max-width:1024px){
.liste-avis-under-anis{
display:block;
}
.avis-item {
width:100%;
}
.content-avis{
height:auto;
overflow: visible;
}
}
.container-form-and-devis{
display:flex;
flex-direction:row;
align-items:flex-start;
justify-content:space-between
}
.col1-container-form-and-devis{
width:45%
}
.container-form-and-devis .chapo, .container-form-and-devis .paragraphe1-formzone{
width:90%;
padding-bottom:30px;
}
.container-form-and-devis .paragraphe2-formzone{
width:80%;
padding-bottom:30px;
}
.form-container{
width:45%;
}
@media (min-width:1024px){
.container-form-and-devis .paragraphe2-formzone{
width:45%;
}
}
@media(max-width:1024px){
.container-form-and-devis{
flex-direction:column;
}
.col1-container-form-and-devis, .form-container{
width:100%;
}
}
.zone-formulaire-in-col{
background-color:var(--color-background);
padding:3em;
border-radius: 0 50px;
}/* Tous les champs en pleine largeur avec border-bottom */
.sentence-bottom-item{
display:inline-block;
}
@media (max-width:600px){
.zone-formulaire-in-col{
margin-top:30px;
}
.sentence-bottom-item{
display:block;
}
}
.zone-formulaire-in-col .chapo{
margin:auto;
}
form input,
form textarea {
width: 100%;
padding: 10px 5px;
margin-bottom: 10px;
border: none;
border-bottom: 1px solid var(--color-accent);
background: transparent;
font-size: 20px;
font-family: "Reddit Sans", Arial, sans-serif;
box-sizing: border-box;
outline: none;
}
/* Styles des placeholders */
form input::placeholder,
form textarea::placeholder {
color: rgba(22, 73, 91, 0.40);
font-family: "Reddit Sans";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
/* Bouton centré en bas */
button[type="submit"] {
display: block;
margin: 0 auto;
background: var(--color-accent);
color: white;
border: none;
padding: 12px 40px;
border-radius: 8px;
cursor: pointer;
font-size: 18px;
font-family: "Reddit Sans", Arial, sans-serif;
}
button[type="submit"]:hover {
opacity: 0.9;
}
/* Message de confirmation */
#form-message {
margin-top: 15px;
font-weight: bold;
color: green;
text-align: center;
}
.container-items-manifeste{
padding-top:80px;
display:flex;
flex-direction: row;
align-items:flex-start;
justify-content: space-around;
padding-bottom:50px;
}
.item-manifeste{
width:15%;
margin-bottom:30px;
}
.item-manifeste .visual-iem-manifeste{
display:flex;
align-items: flex-end;
height:80px;
padding-bottom:30px;
}
@media (max-width:980px){
.container-items-manifeste{
flex-direction: column;
padding-top:30px;
}
.item-manifeste{
width: 100%;
display: flex;
align-items: flex-start;
}
.item-manifeste .visual-iem-manifeste {
display: flex;
align-items: flex-start;
height: auto;
padding-bottom: 0;
padding-right: 15px;
}
.item-manifeste .visual-iem-manifeste svg{
height:40px;
}
}
.container-text-center-phrase-manifeste{
text-align:center;
}
.sentence-manifest-bottom{
font-size: 3.2rem;
font-style: normal;
font-weight: 400;
line-height: normal;
color:var(--color-accent);
}
.sentence-manifest-bottom strong{
font-weight:600;
}
.big-strong{
font-weight:800;
font-size: 3.2rem;
font-style: normal;
line-height: normal;
color:var(--color-accent);
}
.section-manifeste {
padding-bottom:6em;
}
.section-rendez-vous{
position:relative;
overflow:hidden;
}
.flower-rendez-vous{
position:absolute;
right:-80px;
top:-80px;
display:block;
}
.flower-rendez-vous-svg{
width:756px;
height:759.26px;
}
.container-flex-profil-zone{
display: block;
}
.col1-flex-profil-zone, .col2-flex-profil-zone, .col3-flex-profil-zone{
width:100%;
}
.section-profil{
position: relative;
overflow-x: hidden;
}
@media (min-width:1024px){
.container-flex-profil-zone{
display:grid;
grid-template-columns: repeat(12, 1fr);
}
.col1-flex-profil-zone{
grid-column: 1/5;
padding-top:30px;
}
.col2-flex-profil-zone{
grid-column: 6/9;
position:relative;
}
.col3-flex-profil-zone{
grid-column: 10/12;
position:relative;
padding-top:30px;
}
.col3-flex-profil-zone::before{
position:absolute;
content:"";
top:0;
left:0;
height:1px;
display:block;
width:2500px;
background:var(--color-primary);
}
}
.counter-item .counter{
font-size: 4rem;
font-style: normal;
font-weight: 700;
line-height: normal;
height:40px;
display:inline-block;
}
.preambule-counter{
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.photo-section-profil{
width:100%;
object-fit:contain;
}
ul.liste-custom , ul.liste-custom2{
list-style: none; /* on enlève les puces natives */
padding-left: 0;
}
ul.liste-custom li , ul.liste-custom2 li{
position: relative;
padding-left: 24px; /* espace pour la puce */
margin-bottom: 8px;
}
ul.liste-custom li::before {
content: '';
position: absolute;
left: 0;
top: 6px; /* ajuste verticalement */
width: 14px;
height: 14px;
background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C5.52285 0 10 4.47715 10 10C4.47715 10 0 5.52285 0 0Z' fill='%2316495B'/%3E%3C/svg%3E") no-repeat center center;
background-size: contain;
}
ul.liste-custom2 li::before {
content: '';
position: absolute;
left: 0;
top: 6px; /* ajuste verticalement */
width: 10px;
height: 10px;
background: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 10 10' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0C5.52285 0 10 4.47715 10 10C4.47715 10 0 5.52285 0 0Z' fill='%2316495B'/%3E%3C/svg%3E") no-repeat center center;
background-size: contain;
}
ul.liste-custom2 li, ul.liste-custom3 li{
font-weight:400;
}
ul.liste-custom2 li strong, ul.liste-custom3 li strong{
font-weight:600;
}
.liste-custom3 {
list-style: none; /* supprime les puces par défaut */
padding-left: 0;
}
.liste-custom3 li {
position: relative;
padding-left: 28px; /* espace pour la puce */
margin-bottom: 10px;
}
.liste-custom3 li::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%); /* centre verticalement la puce */
width: 20px;
height: 20px;
background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.4792 10.8334H3.33333V9.16671H13.4792L8.8125 4.50004L10 3.33337L16.6667 10L10 16.6667L8.8125 15.5L13.4792 10.8334Z' fill='%23C47B59'/%3E%3C/svg%3E") no-repeat center center;
background-size: contain;
}
/* ===========================
BOITE ONGLET
=========================== */
.tabs-container{
display: flex;
align-items:flex-start
}
/* Colonne gauche : onglets */
.tabs-list {
flex: 0 0 40%; /* équivaut à 4/12 */
display: flex;
flex-direction: column;
border: 1px solid #DEE6D2;
border-radius: 0 50px 50px 0;
}
.tab {
padding: 20px;
text-align: left;
border: none;
background: transparent;
color: var(--color-primary);
font-size: 30px;
cursor: pointer;
transition: all 0.3s, color 0.3s;
padding-left: calc((100vw - var(--largeur)) / 2);
border-radius: 0 50px 50px 0;
}
.container-onglet{
display:flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
}
.container-onglet .svg-container{
width:15%;
text-align:left;
}
.container-onglet .intitule-onglet {
width:70%;
}
.intitule-onglet, h3.intitule-onglet{
font-size: 30px;
font-style: normal;
font-weight: 600;
line-height: normal;
}
.container-onglet .plus{
width:10%;
text-align:center;
}
.container-onglet .svg-container svg .leave{
fill:#DEE6D2;
}
.tab:hover {
background: var(--color-anis);
}
.plus{
font-size: 40px;
font-style: normal;
font-weight: 800;
line-height: normal;
}
.tab.active {
background: var(--color-anis);
color: #16495B;
font-weight: 600;
}
.tab:hover .plus, .tab.active .plus{
color:transparent;
}
.tab:hover .container-onglet .svg-container svg .leave, .tab.active .container-onglet .svg-container svg .leave{
fill:var(--color-background);
}
/* Colonne droite : contenu */
.tabs-content {
flex: 0 0 60%; /* équivaut à 8/12 */
padding-block: 40px;
padding-left:60px;
padding-right: calc((100vw - var(--largeur)) / 2);
padding-top:20px;
}
.tab-content {
display: none;
animation: fadeIn 0.5s ease;
}
.tab-content.active {
display: block;
}
@media(min-width:1870px){
.tabs-container{
width: var(--largeur);
margin: auto;
}
.container-onglet .svg-container{
width:10%;
}
.tab{
padding-left:10px;
}
}
/* Animation douce */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.container-before-tabs{
padding-bottom:3em;
}
@media (min-width:981px) and (max-width:1260px){
.tabs-list {
flex: 0 0 30%;
}
.tab{
font-size:20px;
}
.tabs-content {
flex: 0 0 70%;
}
}
/* ===========================
MOBILE / ACCORDÉON
=========================== */
@media (max-width: 980px) {
.tabs-container {
flex-direction: column;
width: var(--largeur, 100%);
margin: auto;
}
.tabs-list {
flex-direction: column;
width: 100%;
}
.tab {
width: 100%;
margin-bottom: 8px;
cursor: pointer;
border-radius: 8px;
overflow: hidden;
background: #f0f0f0;
padding-left:20px;
font-size:18px;
}
.container-onglet {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px;
text-align: left;
}
.plus {
transition: transform 0.3s ease;
}
.plus.active {
transform: rotate(45deg);
}
.container-mobile-contenu {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
padding: 0 16px;
background: #ffffff;
line-height: 1.5;
}
.container-mobile-contenu.active {
padding: 16px;
max-height: 4500px; /* Ajuster selon le contenu */
}
.tabs-content{
display:none;
}
.intro-content-onglet{
font-size:12px;
}
}
@media (max-width:600px){
.container-onglet .intitule-onglet{
font-size:18px;
}
}
.intro-content-onglet{
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: normal;
padding-bottom:10px;
padding-top:10px;
}
.intro-content-onglet strong{
font-weight:600;
}
.container-table-green-leaves{
padding-block:20px;
}
.double-list-container {
display: flex;
flex-wrap: wrap;
gap: 50px;
padding: 0;
margin: 0;
list-style: none;
}
.double-list-item {
display: flex;
width: calc(50% - 25px); /* 50% avec gap de 50px = 25px de chaque côté */
align-items: flex-start; /* aligne les SVG et texte en haut */
}
.item-svg {
flex: 0 0 70px; /* largeur fixe pour le SVG */
margin-right: 15px; /* espace entre SVG et texte */
}
.item-text {
flex: 1;
padding-top: 15px;
border-top: 1px solid var(--color-anis);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.item-text p {
margin: 0;
}
/* Responsive */
@media (max-width: 900px) {
.double-list-item {
width: 100%;
gap: 20px;
}
}
.col2-flex-profil-zone .petales{
position:absolute;
background-image: url('data:image/svg+xml,');
content:"";
display:block;
width:256px;
height:276px;
left:-50px;
top:172px;
z-index:2;
}
@media (max-width:980px){
.col2-flex-profil-zone .petales{
display:none;
}
}
/* ===========================
ROSACE HEADER
=========================== */
.section-header-top{
position:relative;
padding-bottom:8em;
overflow:visible
}
@media (max-width:750px){
.section-header-top{
padding-bottom:0em;
}
.section-header-top{
overflow-x:hidden;
}
}
.rosace-header{
position:absolute;
top:0;
left:-40px;
}
.svg-fade {
display: block;
}
.svg-fade g {
opacity: 0;
transform: scale(0.9);
transform-origin: center;
transition: opacity 1.2s ease, transform 1s ease;
}
/* Quand la classe "animate" est ajoutée, chaque pétale apparaît successivement */
.svg-fade.animate g:nth-of-type(1) {
opacity: 1;
transform: scale(1);
transition-delay: 0s;
}
.svg-fade.animate g:nth-of-type(2) {
opacity: 1;
transform: scale(1);
transition-delay: 0.8s;
}
.svg-fade.animate g:nth-of-type(3) {
opacity: 1;
transform: scale(1);
transition-delay: 1.6s;
}
@media (max-width:980px){
.svg-fade{
max-width:200px;
}
h1{
font-size:4rem
}
}
@media (max-width:600px){
.svg-fade{
display:none;
}
.text-section-header{
grid-column:2/11;
}
h1{
font-size:3rem
}
}
.counter-item p{
margin-top:0.5em;
}
.container-standard-page p a{
color:var(--color-accent);
}
/* ===========================
BARRE FIXE MOBILE
=========================== */
/* Style général barre */
.mobile-fixed-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #fff; /* fond blanc */
display: flex;
justify-content: flex-start;
padding: 10px 0;
box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
z-index: 1000;
}
.button-rdv-mobile-fixed-bar{
margin-left:10px;
}
.linkedin-link-footer{
height: 40px;
width: 40px;
background: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
margin-top: 3px;
margin-left: 8px;
}
/* Masquer la barre sur desktop */
@media (min-width: 768px) {
.mobile-fixed-bar {
display: none;
}
}
.back-to-top {
position: fixed;
right: 1rem;
bottom: 70px;
padding: calc(1rem * 1.25);
z-index: 2000;
border-radius: 2rem;
background-color: var(--color-accent);
transition: 0.3s;
.icon {
display: block;
color: var(--couleur-blanc);
width: 20px;
height: 20px;
}
&:hover {
background-color: var(--color-accent);
.icon {
color: var(--couleur-blanc);
}
}
}
.js .back-to-top {
/* if JS is enabled, hide back to top*/
visibility: hidden;
opacity: 0;
}
.js .back-to-top--is-visible {
/* show button */
visibility: visible;
opacity: 1;
}
#tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronAllow, #tarteaucitron #tarteaucitronServices .tarteaucitronLine .tarteaucitronAsk .tarteaucitronDeny, .tac_activate .tarteaucitronAllow, #tarteaucitronRoot .tarteaucitronAllow{
background: var(--color-accent) !important;
color:white !important;
}
.container.container-smaller.container-rendez-vous-bottom{
text-align:center;
padding-block:4rem;
}
.button-rendez-vous{
font-size:3rem;
position: relative;
z-index: 200;
}
/* Message de confirmation */
#confirmation-message {
display: none;
background-color: #d4edda;
color: #155724;
padding: 20px;
border-radius: 8px;
border: 1px solid #c3e6cb;
text-align: center;
margin-top: 20px;
animation: slideIn 0.5s ease-out;
}
#confirmation-message h3 {
margin-top: 0;
font-size: 24px;
}
#confirmation-message p {
margin: 10px 0;
line-height: 1.6;
}
#confirmation-message.show {
display: block;
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Loader pendant l'envoi */
.spinner {
display: inline-block;
width: 16px;
height: 16px;
border: 2px solid #ffffff;
border-top: 2px solid transparent;
border-radius: 50%;
animation: spin 0.8s linear infinite;
margin-right: 8px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}