/*************************************/
/* TEST CLOUD 2*/
/*COULEURS*/
:root{
--pnv-color-txt:#333333;
--pnv-color-cf:#ffffff;
--pnv-color-c1:#0c4790;
--pnv-color-c2:#06c7ff;
--pnv-color-c4:#048eb6;
--pnv-color-c5:#007deb;
--pnv-color-c8:#00632e;
--pnv-color-c9:#89ce2e;
--pnv-color-c11:#41af1b;
--pnv-color-c19:#c50a11;
--pnv-color-c22:#a713de;
--pnv-color-c1l6:#dbe3ee;
--pnv-color-c2l6:#daf7ff;
--pnv-color-c9l6:#edf8e0;
--pnv-color-c22l6:#f8f4eb;
--pnv-color-c43:#4b5763;
--pnv-color-c43l3:#939aa1;
--pnv-color-c43l5:#c9cdd0;
--pnv-gap-h:1rem; /* gouttieres horizontales */
--pnv-gap-v:2rem; /* gouttieres verticales */
--brand:var(--pnv-color-c1);
--line:#E3E7EC;
--signal:#c50a11;
--surface:#FFFFFF;
}
main{
padding-left:15px;
padding-right:15px;
/*background-color: aquamarine;*/
}
/* surcharge Bootstrap alignement vertical */
/* On cible la row qui contient nos éléments à aligner */
.row-vertical-align {
display: table;
table-layout: fixed;
width: 100%;
}
/* On transforme les colonnes medium en cellules de tableau alignées au centre */
@media (min-width: 992px) { /* 992px correspond au déclenchement du 'md' en v3 */
.row-vertical-align > .col-md-6 {
display: table-cell;
float: none;
vertical-align: middle;
}
.col-md-5thsxxxx {
width: 20% !important;
float: left !important;
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
/* Sécurité pour que le padding soit inclus dans les 20% */
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
/* Pour les tablettes (sm) */
@media (min-width: 768px) {
.col-sm-5ths { width: 20%; float: left; }
}
/* Pour les ordinateurs (md) */
@media (min-width: 992px) {
.col-md-5ths { width: 20%; float: left; }
}
/* Pour les grands écrans (lg) */
@media (min-width: 1200px) {
.col-lg-5ths { width: 20%; float: left; }
}
.grid_5_Card{
display: flex;
align-items: stretch;
}
.pCard{
padding:5px;
align-content: center;
}
.pCard p{
display:table-cell;
height:120px;
/*
border:1px solid #0c4790;
border-radius:18px 0;
*/
padding:10px;
}
.pCard .numero{
display: inline-block;
border-radius:50%;
background-color: var(--pnv-color-c9l6);
color: var(--pnv-color-c9);
font-weight:bold;
font-size:1.5rem;
line-height:35px;
width:35px;
text-align:center;
margin-bottom:12px;
}
.pCard h3{
color:#fff;
}
.bloc_card{
border:1px solid #ccc;
background-color:#fff;
padding:15px;
}
.picto_data{
font-size:2rem;
font-weight:normal;
font-family:'ColfaxMedium', sans-serif;
color:#fff;
display: inline-block!important;
text-align:center;
width:100%;
height:auto!important;
border:1px solid var(--pnv-color-c9);
border-radius:3rem;
}
.picto_txt{
font-size:1.25rem;
font-weight:normal;
color:#fff;
display:block!important;
text-align:center;
width:100%;
height:auto!important;
}
.picto_data sup{
font-size:0.55rem;
}
/************************/
/* SURCHARGES pages cloud 2*/
html,body{
/* classe appliquée aux nouvelles pages cloud*/
font-size:14px;
}
h2{
font-size:2.5rem;
color:var(--pnv-color-c1);
font-family:'ColfaxMedium', sans-serif;
letter-spacing:-0.05rem;
}
h3{
font-size:1.75rem;
/*color:var(--pnv-color-c1);*/
color:var(--pnv-color-txt);
font-family:'ColfaxMedium', sans-serif;
letter-spacing:-0.05rem;
}
.container-n2{
padding-right:0px;
padding-left:0px;
}
.yt{
padding:20px;
background-color:#fff;
}
.tit_3{
font-family:'ColfaxMedium', sans-serif;
font-weight:normal;
font-size:1.75rem;
/*color:var(--pnv-color-c4);*/
padding-top:10px;
}
.h2_contenu,
.h1_contenu {
letter-spacing: -.025em;
color: var(--pnv-color-c1);
padding-left: 0px;
}
.h1_contenu {
font-family: 'colfaxBold', Arial, Helvetica, sans-serif;
position:relative;
/*left:-15px;*/
}
.h2_contenu {
font-family: 'colfaxMedium', Arial, Helvetica, sans-serif;
}
.bloc_interieur h2 {
padding-top: 0;
margin-top: 20px;
font-family: 'colfaxRegular', Arial, Helvetica, sans-serif;
font-weight: normal;
color: #00632e;
text-transform: normal;
}
.cont_page_metiers .bloc_interieur{
/*min-height:560px; */
}
.cont_page_metiers .bloc_button{
height:220px;
min-height:220px;
max-height:220px;
background-color:#daf7ff;
border:none;
border-radius:30px;
padding:15px;
}
.cont_page_marges{
padding-top:25px;
padding-bottom:25px;
margin-top:25px;
margin-bottom:25px;
}
.cont_page_traits{
background-color: #fff;
padding-top:25px;
padding-bottom:25px;
margin-top:25px;
margin-bottom:25px;
border-top:1px solid var(--pnv-color-c43l5);
border-bottom:1px solid var(--pnv-color-c43l5);
}
.txt_resume{
color:var(--pnv-color-c1);
/*font-size:1.35em;*/
font-size:1.75em;
text-align:left;
font-family: 'colfaxMedium', Arial, Helvetica, sans-serif;
letter-spacing: -0.045em;
}
.txt_resume span{
color:var(--pnv-color-txt);
font-size:1.25rem;
font-family: 'colfaxRegular', Arial, Helvetica, sans-serif;
padding-top:15px;
}
.intro_3offres{
font-size:1.75rem;
font-weight:bold;
/*color:var(--pnv-color-c8);*/
}
.bloc_grid .bloc_interieur_infos, .bloc_interieur_infos{
background-color:rgb(255,255,255,50%);
padding:25px;
}
.cont_page_metiers .bloc_interieur_infos_haut{
height:640px;
min-height:640px;
}
.num_h3{
font-size:1.5rem;
color:#89ce2e;
font-weight:bold;
padding-left:10px;
}
abbr[title] {
text-decoration: none;
background-color: rgba(0, 0, 0, 0.05);
padding: 0.15em 0.4em;
border-radius: 4px;
font-size: 0.95em;
font-weight: 500;
letter-spacing: 0.02em;
cursor: help;
transition: background-color 0.2s ease;
}
abbr[title]:hover {
background-color: rgba(0, 0, 0, 0.1);
}
abbr[data-title] {
position: relative;
text-decoration: none;
background-color: rgba(0, 0, 0, 0.05);
padding: 0.15em 0.4em;
cursor: help;
}
abbr[data-title]::after {
content: attr(data-title);
position: absolute;
bottom: 125%;
left: 50%;
transform: translateX(-50%) translateY(4px);
padding: 6px 10px;
background-color: #a713de;
color: #e3dfed;
font-size: 0.75rem;
font-weight: 400;
white-space: nowrap;
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
abbr[data-title]:hover::after {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
/*
h1.lisere-triple span{
/* Permet de caler le liseré par rapport au texte */
/*
display: inline-block;
position: relative;
padding-bottom: 8px; /* Espace entre le texte et le liseré */
/* Création du liseré à 3 couleurs */
/*
background-image: linear-gradient(to right,
var(--pnv-color-c1) 0% 33.33%, /* Couleur 1 : Rouge */
/* var(--pnv-color-cf) 33.33% 66.66%,/* Couleur 2 : Vert */
/* var(--pnv-color-c19) 66.66% 100% /* Couleur 3 : Bleu */
/*);
/* Gestion de la taille et de la position du liseré */
/*
background-size: 100% 3px; /* Largeur 100%, Hauteur 5px */
/*background-position: bottom left;
background-repeat: no-repeat;
}
h1.lisere-triple:hover span {
background-size: 100% 13px; /* Largeur 100%, Hauteur 5px */
/*}
*/
/*********************/
/* LISTE à puces */
/*********************/
.titre-liste{
font-size:1.35rem;
color:var(--pnv-color-c11);
font-weight:bold;
margin-bottom:0px;
}
ul.checkbox-list {
list-style: none;
padding-left: 0;
}
ul.checkbox-list li {
display: flex;
align-items: center;
gap: 0.6rem;
margin-bottom: 0.5rem;
}
ul.checkbox-list li::before {
content: "";
display: inline-block;
width: 1.2rem;
height: 1.2rem;
flex-shrink: 0;
/* SVG d'une case cochée avec fond */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
}
/**********/
ul.mask-list {
list-style: none;
padding-left: 0;
}
ul.mask-list li {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
}
ul.mask-list li::before {
content: "";
display: inline-block;
width: 1rem;
height: 1rem;
background-color: #EF4444; /* Couleur personnalisable facilement */
-webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
mask: url('data:image/svg+xml;utf8,') no-repeat center / contain;
}
/**********/
ul.custom-bullets {
list-style: none;
padding-left: 0;
}
ul.custom-bullets li {
list-style: none;
position: relative;
padding-left: 1.8rem;
margin-bottom: 0.5rem;
/* SVG d'une coche verte encodé en Data URI */
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: 0 0.2rem;
background-size: 1.2rem;
}
/**********/
ul.arrow-list {
list-style: none;
padding-left: 0;
}
ul.arrow-list li {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.4rem;
}
ul.arrow-list li::before {
content: "";
display: inline-block;
width: 0.8rem;
height: 0.8rem;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-size: contain;
}
/**********/
.degContFluid1{
background: #B4EEFF;
background: linear-gradient(90deg,var(--pnv-color-c1l6) 0%, var(--pnv-color-c9l6) 50%);
}
.degContFluid2{
background: #B4EEFF;
background: linear-gradient(90deg,var(--pnv-color-c2l6) 0%, var(--pnv-color-c22l6) 50%);
}
.imgEntete{
width:100%;
background-color:var(--pnv-color-cf);
margin-bottom:var(--pnv-gap-v);
}
.imgEntete img{
width:100%;
height:auto;
}
.bloc_diagnostic{
background-color:var(--pnv-color-c8);
border-radius:20px;
padding:20px;
color:var(--pnv-color-c9l6);
}
.bloc_diagnostic h2{
color:var(--pnv-color-c9);
font-size:2rem;
}
.bloc_diagnostic a{
color:#fff;
}
a.lien-fleche::after {
content: "↗"; /* Flèche vers le haut à droite */
font-size: 0.85em; /* Légèrement plus petite que le texte */
line-height: 1;
transition: transform 0.2s ease;
}
.bloc_diagnostic a:hover{
color:var(--pnv-color-c9);
text-decoration:none;
}
/************************/
/* code grille flex*/
/************************/
/* vérifier si utilsé ou pas */
.fcontainer {
display: flex;
flex-direction: column; /* Aligne les blocs verticalement */
gap: 20px; /* Espace entre les blocs empilés */
}
.f1, .f2, .f3, .f4,.f5,.f6, .f7,.f8, .f9, .f10, .f11, .f12
{
flex: 1; /* Sur mobile, ils prennent toute la largeur disponible */
}
.cards-container {
width:1170px;/*largeur centrale*/
margin:auto;
display: grid;
grid-template-columns: 1fr 1fr; /* 2 colonnes */
grid-template-rows: auto auto; /* 2 lignes qui s'adaptent au contenu */
gap: 2rem;
}
@media (min-width: 768px) {
.fcontainer {
flex-direction: row; /* Remet les blocs côte à côte */
}
.f1{ flex: 1; }
.f2{ flex: 2; }
.f3{ flex: 3; }
.f4{ flex: 4; }
.f5{ flex: 5; }
.f6{ flex: 6; }
.f7{ flex: 7; }
.f8{ flex: 8; }
.f9{ flex: 9; }
.f10{ flex: 10; }
.f10{ flex: 11; }
.f12{ flex: 12; }
}
.centrageV{
display:grid;
align-items: center;
}
.centrageH{
justify-content: center;
}
section{
/*border:1px solid #fafafa;*/
margin-bottom:30px;
}
.sectionGap{
margin-top:20px;
margin-bottom:20px;
}
button.bt2{
background-color:#0c4790;
color:#fff;
border:none;
padding:10px;
font-weight:bold;
/* Premier dégradé (État initial) */
background: linear-gradient(45deg, var(--pnv-color-c1), var(--pnv-color-c2) );
border-radius:25px;
/* Transition pour le scale */
transition: transform 0.3s ease;
width:100%;
}
/* Le deuxième dégradé (État survolé) */
.bt2::before {
border-radius:25px;
border:none;
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1; /* Se place derrière le texte du bouton */
background: linear-gradient(45deg, var(--pnv-color-c9), var(--pnv-color-c8) );
opacity: 0; /* Invisible au départ */
/* Transition pour l'opacité du dégradé */
transition: opacity 0.4s ease;
}
/* Effets au survol */
.bt2:hover {
transform: scale(1.05);
}
.bt2:hover::before {
opacity: 1; /* Le deuxième dégradé apparaît en douceur */
}
/************/
/************/
a.abt2{
/* 1. Rendu bloc pour activer les animations transform (scale, translate) et le padding */
display: inline-block; /* ou inline-flex */
box-sizing: border-box;
/* 2. Suppression des styles par défaut des liens */
text-decoration: none;
cursor: pointer;
/* 3. Centrage du texte et alignement */
text-align: center;
vertical-align: middle;
background-color:#0c4790;
color:#fff;
border:none;
padding:10px;
font-weight:bold;
/* Premier dégradé (État initial) */
background: linear-gradient(45deg, var(--pnv-color-c1), var(--pnv-color-c2) );
border-radius:25px;
/* Transition pour le scale */
transition: transform 0.3s ease;
width:auto;
padding-left:25px;
padding-right:25px;
}
/* Le deuxième dégradé (État survolé) */
.abt2::before {
border-radius:25px;
border:none;
content: "";
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1; /* Se place derrière le texte du bouton */
background: linear-gradient(45deg, var(--pnv-color-c9), var(--pnv-color-c8) );
opacity: 0; /* Invisible au départ */
/* Transition pour l'opacité du dégradé */
transition: opacity 0.4s ease;
}
/* Effets au survol */
.abt2:hover {
transform: scale(1.05);
}
.abt2:hover::before {
opacity: 1; /* Le deuxième dégradé apparaît en douceur */
}
/*******************************************************************/
.btn-secondary{
background: linear-gradient(45deg, var(--pnv-color-c1), var(--pnv-color-c2) );
}
.btn_fleche_tp{
background-color:transparent;
box-shadow:none;
}
.ico_fleche_avant {
width: 32px;
height: 32px;
background-color: #8062dc; /* C'est cette couleur qui va colorer le SVG */
/* On applique le SVG comme un masque */
-webkit-mask-image: url('../images/icones/fleche_avant.svg');
mask-image: url('../images/icones/fleche_avant.svg');
-webkit-mask-size: contain;
mask-size: contain;
mask-repeat: no-repeat;
}
.ico_fleche_avant:hover {
background-color: #a713de; /* Changement de couleur au survol ultra simple */
}
.btn_icon{
background-color: transparent;
border:none;
display: inline-flex; /* Idéal pour aligner l'icône au centre */
align-items: center;
justify-content: center;
text-decoration: none; /* Supprime le soulignement par défaut des liens */
cursor: pointer;
}
/************************/
/* code vidéo*/
/* Style du conteneur de la miniature */
.video-preview-container {
position: relative;
width: 100%;
max-width: 800px;
margin: 0 auto;
cursor: pointer;
/* 1. Ratio 16/9 au conteneur */
aspect-ratio: 16 / 9;
/* 2. On coupe tout ce qui dépasse (adieu les bordures/bandes noires) */
overflow: hidden;
box-sizing: border-box;
border:1px solid #fff;
border-radius: 8px; /* coins arrondis */
}
.video-thumbnail {
width: 100%;
height: 100%;
/* 3. Agit comme un "background-size: cover" : l'image zoome légèrement
pour remplir tout l'espace sans se déformer */
object-fit: cover;
display: block;
}
.video-thumbnail {
width: 100%;
display: block;
transition: transform 0.3s ease;
}
.video-preview-container:hover .video-thumbnail {
transform: scale(0.99);
border:1px solid #ccc;
}
/* Faux bouton Play centré */
.play-button {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 0, 0, 0.9); /* Rouge YouTube */
color: white;
font-size: 24px;
padding: 15px 25px;
border-radius: 50px;
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
transition: background-color 0.2s, transform 0.2s;
}
.video-preview-container:hover .play-button {
background-color: #ff0000;
transform: translate(-50%, -50%) scale(1.1);
}
/* Fenêtre Plein Écran (Overlay Lightbox) */
.video-overlay {
display: none; /* Caché par défaut */
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.9);
z-index: 9999999;
justify-content: center;
align-items: center;
}
/* Container pour garder le ratio 16:9 de la vidéo */
.video-wrapper {
position: relative;
width: 90%;
max-width: 1200px;
aspect-ratio: 16 / 9;
}
.video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* Bouton Fermer */
.close-button {
position: absolute;
top: 20px;
right: 30px;
background: none;
border: none;
color: white;
font-size: 45px;
cursor: pointer;
opacity: 0.7;
transition: opacity 0.2s;
}
.close-button:hover {
opacity: 1;
}
/***************************************************************/
/* Buttons & Badges */
.btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: var(--radius-sm);
font-weight: 600;
font-size: 0.95rem;
transition: all var(--transition-fast);
cursor: pointer;
border: none;
}
.btn-primary { background: var(--accent); color: #FFF; }
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-outline { border: 1.5px solid var(--primary); color: var(--primary); background: transparent; }
.btn-outline:hover { background: var(--primary); color: #FFF; }
.badge {
display: inline-block;
padding: 0.25rem 0.75rem;
background: rgba(0, 163, 224, 0.1);
color: var(--primary);
font-weight: 600;
font-size: 0.85rem;
border-radius: 50px;
margin-bottom: 1rem;
}
.quote-text { font-size: 1.1rem; font-style: italic; color: var(--text-main); margin-bottom: 1.5rem; }
.quote-author { font-weight: 700; color: var(--primary); }
/* ==========================================================================
FAQS
========================================================================== */
/* FAQ (GEO) */
.faq{ /*max-width:820px;*/}
.faq-item{ border-bottom:1px solid var(--line); padding-left:20px;padding-right:10px;
}
.faq-item summary{
cursor:pointer; list-style:none; padding-block:18px; font-family:var(--font-display);
font-weight:600; font-size:16.5px; display:flex; justify-content:space-between; gap:16px; align-items:center;
}
.faq-item:hover , .faq-item[open]{ background-color:#fafafa; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item svg{ flex:none; transition:transform .2s ease; }
.faq-item[open] svg{ transform:rotate(45deg); }
.faq-item p{ color:var(--mist); padding-bottom:18px; padding-right:32px; font-size:15px; }
.eyebrow{
padding-left:0px;
padding-right:0px;
padding-top:10px;
padding-bottom:10px;
background-color:#fff;
color:var(--pnv-color-c43);
border-bottom:1px solid var(--pnv-color-c43l5);
/*border-radius: 1.5rem;*/
line-height: 2rem;
}
div.faq h3{color:var(--pnv-color-c22); margin-top:25px;margin-bottom:0;font-size:1.7rem;}
.faq-bg{
background-color: var(--pnv-color-cf);
}
.faq-contenu{
}
.faq-vide{
min-height:100%;
}
.faq-item h4{
font-weight:bold;
font-size:1.25rem;
}
/* ==========================================================================
Bloc capacités (3 colonnes)
========================================================================== */
.icon-arrow{ width:16px; height:16px; flex:none; }
.capabilities{ background:var(--surface); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.cap-card{ background:var(--surface); padding:28px; display:flex; flex-direction:column; gap:16px; }
.cap-card h3{ /*font-size:18px;*/ }
.cap-card p{ color:var(--mist); font-size:14.5px; }
.cap-list{ display:flex; flex-direction:column; gap:9px; margin-top:4px; }
.cap-list li{ display:flex; gap:10px; font-size:14px; align-items:flex-start; }
.cap-list li::before{
content:""; width:6px; height:6px; margin-top:7px; border-radius:50%; background:var(--signal); flex:none;
}
/* ==========================================================================
LOOS AFAQ HOME
========================================================================== */
.row-home-afaq{
background-color: #daf7ff;
border-radius:25px;
border-radius:25px;
padding:25px;
margin-top:25px;
margin-bottom:25px;
}
/* ==========================================================================
OFFRES
========================================================================== */
/* Cartes offres */
.offer-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; }
.offer-card{
background:var(--surface);
/*border:1px solid var(--line);*/
border-radius:0px;
overflow:hidden; display:flex; flex-direction:column;
box-shadow:var(--shadow-sm); transition:box-shadow .2s ease, transform .2s ease;
}
.offer-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-3px);background-color: #edf8e0; }
.offer-media{ aspect-ratio:16/10; overflow:hidden; }
.offer-media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.offer-card:hover .offer-media img{ transform:scale(1.05); }
.offer-body{ padding:22px; display:flex; flex-direction:column; gap:12px; flex:1; }
.offer-body h3{ /*font-size:19px;*/ }
.offer-body p{ color:var(--mist); font-size:14.5px; flex:1; }
.btn-link{ color:var(--brand); font-weight:600; display:inline-flex; align-items:center; gap:6px; }
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width: 980px){
.main-nav{ display:none; }
.nav-toggle{ display:block; }
.tel-link{ display:none; }
.hero-grid{ grid-template-columns:1fr; gap:36px; }
.offer-grid{ grid-template-columns:1fr; }
.cap-grid{ grid-template-columns:1fr; }
.testimonial-grid{ grid-template-columns:1fr; }
.partner{ grid-template-columns:1fr; padding:34px; text-align:left; }
.partner-cta{ text-align:left; }
.footer-grid{ grid-template-columns:1fr 1fr; }
/* Nav mobile en panneau plein écran, RÉUTILISE le même DOM (pas de duplication) */
.main-nav.is-open{
display:block; position:fixed; inset:0; top:65px; background:var(--paper);
padding:20px; overflow-y:auto; z-index:99;
}
.main-nav.is-open > ul{ flex-direction:column; gap:4px; }
.main-nav.is-open .nav-link{ padding:14px; font-size:16px; }
.main-nav.is-open .mega{
position:static; width:auto; border:none; box-shadow:none;
opacity:1; visibility:visible; transform:none; pointer-events:auto;
display:none; margin-top:4px; background:var(--surface); border-radius:10px;
}
.main-nav.is-open .nav-item.is-open .mega{ display:block; }
.main-nav.is-open .mega-inner{ grid-template-columns:1fr; gap:20px; padding:18px 14px; }
.main-nav.is-open .mega-intro{ border-right:none; padding-right:0; border-bottom:1px solid var(--line); padding-bottom:16px; }
.main-nav.is-open .mega-columns{ gap:22px; }
.nav-toggle.is-active span{ opacity:0; }
.nav-toggle.is-active::before{ transform:translateY(7px) rotate(45deg); }
.nav-toggle.is-active::after{ transform:translateY(-7px) rotate(-45deg); }
}
/* ==========================================================================
DEVENIR PARTENAIRE
========================================================================== */
.partner-avantages{
}
.partner-avantages div{
margin:auto;
width:64px;
height:64px;
color:var(--pnv-color-c43l3);
}
.partner-avantages h4{
text-align:center;
font-size:1.65rem;
font-weight:bold;
color:#41af1b;
letter-spacing:-0.05rem;
}
.partner-avantages p{
text-align:center;
font-size:1.2rem;
padding-right:20px;
padding-left:20px;
}