@font-face {
font-family: "Outfit";
src: url(//urba.cc-valdeaisne.fr/wp-content/themes/ccva-v2/fonts/Outfit-VariableFont_wght.ttf) format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Coyote";
src: url(//urba.cc-valdeaisne.fr/wp-content/themes/ccva-v2/fonts/Coyote-SemiBoldDEMO.ttf) format("truetype");
font-weight: 600;
font-style: normal;
font-display: swap;
}:root {
--bs-primary: var(--ccva-dark, #212529);
--bs-secondary: var(--ccva-teal, #0d6efd);
--bs-success: var(--ccva-success, #198754);
--bs-danger: var(--ccva-danger, #dc3545);
--bs-warning: var(--ccva-mustard, #ffc107);
--bs-light: var(--ccva-light, #f8f9fa);
--bs-dark: var(--ccva-dark, #212529);
--bs-white: var(--ccva-white, #ffffff);
--bs-body-bg: var(--ccva-white, #ffffff);
--bs-body-color: var(--ccva-dark, #212529);
--bs-border-color: var(--ccva-border, #dee2e6);
--bs-border-radius: .6rem;
--bs-border-radius-sm: .25rem;
--bs-gutter-x: 1.5rem;
--bs-gutter-y: 0;
--bs-spacer-0: 0;
--bs-spacer-1: .25rem;
--bs-spacer-2: .5rem;
--bs-spacer-3: 1rem;
--bs-spacer-4: 1.5rem;
--bs-spacer-5: 3rem;
--bs-btn-padding-y: .375rem;
--bs-btn-padding-x: .75rem;
--bs-btn-border-radius: var(--ccva-btn-radius, 999px);
}
.ccva-icon {
width: 1em;
height: 1em;
display: inline-block;
vertical-align: -0.125em;
fill: currentColor;
} .container,
.container-fluid {
width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-right: auto;
margin-left: auto;
}
@media (min-width: 576px) { .container { max-width: 540px; } }
@media (min-width: 768px) { .container { max-width: 720px; } }
@media (min-width: 992px) { .container { max-width: 960px; } }
@media (min-width: 1200px) { .container { max-width: 1140px; } }
.row {
display: flex;
flex-wrap: wrap;
margin-right: calc(var(--bs-gutter-x) * -.5);
margin-left: calc(var(--bs-gutter-x) * -.5);
margin-top: calc(var(--bs-gutter-y) * -1);
}
.row > * {
box-sizing: border-box;
flex-shrink: 0;
width: 100%;
max-width: 100%;
padding-right: calc(var(--bs-gutter-x) * .5);
padding-left: calc(var(--bs-gutter-x) * .5);
margin-top: var(--bs-gutter-y);
}
.col { flex: 1 0 0%; }
.col-1 { flex: 0 0 auto; width: 8.333333%; }
.col-2 { flex: 0 0 auto; width: 16.666667%; }
.col-3 { flex: 0 0 auto; width: 25%; }
.col-4 { flex: 0 0 auto; width: 33.333333%; }
.col-5 { flex: 0 0 auto; width: 41.666667%; }
.col-6 { flex: 0 0 auto; width: 50%; }
.col-7 { flex: 0 0 auto; width: 58.333333%; }
.col-8 { flex: 0 0 auto; width: 66.666667%; }
.col-9 { flex: 0 0 auto; width: 75%; }
.col-10 { flex: 0 0 auto; width: 83.333333%; }
.col-11 { flex: 0 0 auto; width: 91.666667%; }
.col-12 { flex: 0 0 auto; width: 100%; }
@media (min-width: 576px) {
.col-sm-1 { flex: 0 0 auto; width: 8.333333%; }
.col-sm-2 { flex: 0 0 auto; width: 16.666667%; }
.col-sm-3 { flex: 0 0 auto; width: 25%; }
.col-sm-4 { flex: 0 0 auto; width: 33.333333%; }
.col-sm-5 { flex: 0 0 auto; width: 41.666667%; }
.col-sm-6 { flex: 0 0 auto; width: 50%; }
.col-sm-7 { flex: 0 0 auto; width: 58.333333%; }
.col-sm-8 { flex: 0 0 auto; width: 66.666667%; }
.col-sm-9 { flex: 0 0 auto; width: 75%; }
.col-sm-10 { flex: 0 0 auto; width: 83.333333%; }
.col-sm-11 { flex: 0 0 auto; width: 91.666667%; }
.col-sm-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 768px) {
.col-md-1 { flex: 0 0 auto; width: 8.333333%; }
.col-md-2 { flex: 0 0 auto; width: 16.666667%; }
.col-md-3 { flex: 0 0 auto; width: 25%; }
.col-md-4 { flex: 0 0 auto; width: 33.333333%; }
.col-md-5 { flex: 0 0 auto; width: 41.666667%; }
.col-md-6 { flex: 0 0 auto; width: 50%; }
.col-md-7 { flex: 0 0 auto; width: 58.333333%; }
.col-md-8 { flex: 0 0 auto; width: 66.666667%; }
.col-md-9 { flex: 0 0 auto; width: 75%; }
.col-md-10 { flex: 0 0 auto; width: 83.333333%; }
.col-md-11 { flex: 0 0 auto; width: 91.666667%; }
.col-md-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 992px) {
.col-lg-1 { flex: 0 0 auto; width: 8.333333%; }
.col-lg-2 { flex: 0 0 auto; width: 16.666667%; }
.col-lg-3 { flex: 0 0 auto; width: 25%; }
.col-lg-4 { flex: 0 0 auto; width: 33.333333%; }
.col-lg-5 { flex: 0 0 auto; width: 41.666667%; }
.col-lg-6 { flex: 0 0 auto; width: 50%; }
.col-lg-7 { flex: 0 0 auto; width: 58.333333%; }
.col-lg-8 { flex: 0 0 auto; width: 66.666667%; }
.col-lg-9 { flex: 0 0 auto; width: 75%; }
.col-lg-10 { flex: 0 0 auto; width: 83.333333%; }
.col-lg-11 { flex: 0 0 auto; width: 91.666667%; }
.col-lg-12 { flex: 0 0 auto; width: 100%; }
}
@media (min-width: 1200px) {
.col-xl-1 { flex: 0 0 auto; width: 8.333333%; }
.col-xl-2 { flex: 0 0 auto; width: 16.666667%; }
.col-xl-3 { flex: 0 0 auto; width: 25%; }
.col-xl-4 { flex: 0 0 auto; width: 33.333333%; }
.col-xl-5 { flex: 0 0 auto; width: 41.666667%; }
.col-xl-6 { flex: 0 0 auto; width: 50%; }
.col-xl-7 { flex: 0 0 auto; width: 58.333333%; }
.col-xl-8 { flex: 0 0 auto; width: 66.666667%; }
.col-xl-9 { flex: 0 0 auto; width: 75%; }
.col-xl-10 { flex: 0 0 auto; width: 83.333333%; }
.col-xl-11 { flex: 0 0 auto; width: 91.666667%; }
.col-xl-12 { flex: 0 0 auto; width: 100%; }
}
.g-0, .gx-0 { --bs-gutter-x: 0; }
.g-0, .gy-0 { --bs-gutter-y: 0; }
.g-1, .gx-1 { --bs-gutter-x: .25rem; }
.g-1, .gy-1 { --bs-gutter-y: .25rem; }
.g-2, .gx-2 { --bs-gutter-x: .5rem; }
.g-2, .gy-2 { --bs-gutter-y: .5rem; }
.g-3, .gx-3 { --bs-gutter-x: 1rem; }
.g-3, .gy-3 { --bs-gutter-y: 1rem; }
.g-4, .gx-4 { --bs-gutter-x: 1.5rem; }
.g-4, .gy-4 { --bs-gutter-y: 1.5rem; }
.g-5, .gx-5 { --bs-gutter-x: 3rem; }
.g-5, .gy-5 { --bs-gutter-y: 3rem; } .m-0 { margin: var(--bs-spacer-0) !important; }
.m-1 { margin: var(--bs-spacer-1) !important; }
.mt-1 { margin-top: var(--bs-spacer-1) !important; }
.mt-2 { margin-top: var(--bs-spacer-2) !important; }
.mt-3 { margin-top: var(--bs-spacer-3) !important; }
.mt-4 { margin-top: var(--bs-spacer-4) !important; }
.mt-5 { margin-top: var(--bs-spacer-5) !important; }
.mb-0 { margin-bottom: var(--bs-spacer-0) !important; }
.mb-1 { margin-bottom: var(--bs-spacer-1) !important; }
.mb-2 { margin-bottom: var(--bs-spacer-2) !important; }
.mb-3 { margin-bottom: var(--bs-spacer-3) !important; }
.mb-4 { margin-bottom: var(--bs-spacer-4) !important; }
.mb-5 { margin-bottom: var(--bs-spacer-5) !important; }
.me-1 { margin-right: var(--bs-spacer-1) !important; }
.me-2 { margin-right: var(--bs-spacer-2) !important; }
.me-3 { margin-right: var(--bs-spacer-3) !important; }
.me-4 { margin-right: var(--bs-spacer-4) !important; }
.ms-2 { margin-left: var(--bs-spacer-2) !important; }
.ms-3 { margin-left: var(--bs-spacer-3) !important; }
.ms-auto { margin-left: auto !important; }
.mx-2 { margin-left: var(--bs-spacer-2) !important; margin-right: var(--bs-spacer-2) !important; }
.my-3 { margin-top: var(--bs-spacer-3) !important; margin-bottom: var(--bs-spacer-3) !important; }
.my-5 { margin-top: var(--bs-spacer-5) !important; margin-bottom: var(--bs-spacer-5) !important; }
.p-0 { padding: var(--bs-spacer-0) !important; }
.p-2 { padding: var(--bs-spacer-2) !important; }
.p-3 { padding: var(--bs-spacer-3) !important; }
.p-4 { padding: var(--bs-spacer-4) !important; }
.p-5 { padding: var(--bs-spacer-5) !important; }
.pb-3 { padding-bottom: var(--bs-spacer-3) !important; }
.pb-4 { padding-bottom: var(--bs-spacer-4) !important; }
.ps-3 { padding-left: var(--bs-spacer-3) !important; }
.pt-3 { padding-top: var(--bs-spacer-3) !important; }
.px-5 { padding-left: var(--bs-spacer-5) !important; padding-right: var(--bs-spacer-5) !important; }
.py-3 { padding-top: var(--bs-spacer-3) !important; padding-bottom: var(--bs-spacer-3) !important; }
.py-4 { padding-top: var(--bs-spacer-4) !important; padding-bottom: var(--bs-spacer-4) !important; } .d-none { display: none !important; }
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-grow-1 { flex-grow: 1 !important; }
@media (min-width: 768px) { .flex-md-row { flex-direction: row !important; } }
.justify-content-start,
.justify-content-left { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.align-items-start,
.align-items-left { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-stretch { align-items: stretch !important; }
.gap-2 { gap: var(--bs-spacer-2) !important; }
.gap-3 { gap: var(--bs-spacer-3) !important; } .text-center { text-align: center !important; }
.text-end { text-align: right !important; }
@media (min-width: 768px) { .text-md-end { text-align: right !important; } }
.text-muted { color: var(--ccva-muted) !important; }
.text-danger { color: var(--bs-danger) !important; }
.text-dark { color: var(--bs-dark) !important; }
.text-light { color: var(--bs-light) !important; }
.text-secondary { color: var(--bs-secondary) !important; }
.text-success { color: var(--bs-success) !important; }
.text-primary { color: var(--bs-primary) !important; }
.text-warning { color: var(--bs-warning) !important; }
.text-white { color: var(--bs-white) !important; }
.text-decoration-underline { text-decoration: underline !important; } main[aria-label="Preparation du fichier pour telechargement"] .spinner-grow{
display:inline-block;
width:1.2rem;
height:1.2rem;
vertical-align:-.125em;
background-color:currentColor;
border-radius:50%;
opacity:0;
animation:ccvaSpinnerGrow .9s linear infinite;
}
main[aria-label="Preparation du fichier pour telechargement"] .spinner-grow + .spinner-grow{
margin-left:.62rem;
animation-delay:.15s;
}
main[aria-label="Preparation du fichier pour telechargement"] .spinner-grow + .spinner-grow + .spinner-grow{
animation-delay:.3s;
}
@keyframes ccvaSpinnerGrow{
0%{ transform:scale(0); opacity:0; }
50%{ opacity:1; }
100%{ transform:scale(1); opacity:0; }
}
.bg-light { background-color: var(--bs-light) !important; }
.bg-white { background-color: var(--bs-white) !important; }
.bg-danger { background-color: var(--bs-danger) !important; }
.bg-warning { background-color: var(--bs-warning) !important; }
.bg-secondary { background-color: var(--bs-secondary) !important; }
.bg-success { background-color: var(--bs-success) !important; }
.bg-teal-soft { background-color: var(--ccva-teal-soft) !important; }
.fw-bold { font-weight: 700 !important; }
.fw-bolder { font-weight: 800 !important; }
.fw-semibold { font-weight: 600 !important; } .border { border: 1px solid var(--bs-border-color) !important; }
.border-teal { border-color: rgba(var(--ccva-teal-rgb), .45) !important; }
.border-top { border-top: 1px solid var(--bs-border-color) !important; }
.border-bottom { border-bottom: 1px solid var(--bs-border-color) !important; }
.border-danger { border-color: var(--bs-danger) !important; }
.shadow-sm { box-shadow: 0 .125rem .25rem rgba(0,0,0,.075) !important; }
.rounded { border-radius: var(--bs-border-radius) !important; }
.rounded-2 { border-radius: var(--bs-border-radius-sm) !important; } .btn {
display: inline-block;
font-family: inherit;
font-weight: 600;
line-height: 1.5;
color: var(--bs-body-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
background-color: transparent;
border: 1px solid transparent;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
border-radius: var(--bs-btn-border-radius);
box-shadow: var(--shadow-sm, 0 .125rem .25rem rgba(0,0,0,.075));
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn:disabled { opacity: .65; pointer-events: none; }
.btn-primary { color: var(--ccva-white); background-color: var(--bs-primary); border-color: var(--bs-primary); }
.btn-outline-primary { color: var(--bs-primary); border-color: var(--bs-primary); background-color: transparent; font-weight: 700; font-size: 0.82rem; letter-spacing: 1px; text-transform: uppercase; opacity: .95; }
.btn-outline-primary:hover { color: var(--ccva-white); background-color: var(--bs-primary); }
.btn-secondary { color: var(--ccva-white); background-color: var(--bs-secondary); border-color: var(--bs-secondary); }
.btn-success { color: var(--ccva-white); background-color: var(--bs-success); border-color: var(--bs-success); }
.btn-danger { color: var(--ccva-white); background-color: var(--bs-danger); border-color: var(--bs-danger); }
.btn-warning { color: var(--bs-dark); background-color: var(--bs-warning); border-color: var(--bs-warning); }
.btn-info { color: var(--ccva-dark); background-color: var(--ccva-teal-soft); border-color: rgba(var(--ccva-teal-rgb), .45); }
.btn-light { color: var(--bs-dark); background-color: var(--bs-light); border-color: var(--bs-light); }
.btn-link { font-weight: 400; color: var(--bs-primary); text-decoration: underline; background-color: transparent; border-color: transparent; }
.btn-outline-secondary { color: var(--bs-secondary); border-color: var(--bs-secondary); background-color: transparent; }
.btn-outline-secondary:hover { color: var(--ccva-white); background-color: var(--bs-secondary); }
.btn-outline-info { color: var(--ccva-teal); border-color: rgba(var(--ccva-teal-rgb), .55); background-color: transparent; }
.btn-outline-info:hover { color: var(--ccva-dark); background-color: var(--ccva-teal-soft); border-color: rgba(var(--ccva-teal-rgb), .55); }
.btn-outline-light { color: var(--bs-white); border-color: rgba(255,255,255,0.45); background-color: transparent; }
.btn-outline-light:hover { color: var(--bs-white); background-color: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.60); }
.btn-sm { padding: .25rem .5rem; font-size: .875rem; border-radius: var(--bs-btn-border-radius); }
.btn-lg { padding: .5rem 1rem; font-size: 1.25rem; border-radius: var(--bs-btn-border-radius); }
.btn:not(.btn-link):hover {
background-color: var(--bs-warning);
border-color: var(--bs-warning);
color: var(--bs-dark);
transform: translateY(-1px);
box-shadow: 0 .35rem .75rem rgba(0,0,0,.15);
}
.btn-close {
box-sizing: content-box;
width: 1em;
height: 1em;
padding: .25em;
color: var(--ccva-black);
background: transparent;
border: 0;
opacity: .5;
position: relative;
cursor: pointer;
}
.btn-close::before,
.btn-close::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 1em;
height: 2px;
background: currentColor;
transform-origin: center;
}
.btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close-white { color: var(--ccva-white); } .form-label { display: inline-block; margin-bottom: .5rem; }
.form-control,
.form-select {
display: block;
width: 100%;
padding: .375rem .75rem;
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
min-height: 46px;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
.form-text { display: block; margin-top: .25rem; font-size: .875em; color: var(--ccva-muted); }
.form-control::placeholder,
.form-select::placeholder,
textarea::placeholder{
color: rgba(var(--ccva-dark-rgb), .60);
letter-spacing: .02em;
font-weight: 600;
} form.ccva-validated :is(input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]), select, textarea):required:invalid {
border-color: rgba(var(--ccva-danger-rgb), .62) !important;
box-shadow: inset 3px 0 0 var(--ccva-danger), 0 0 0 .08rem rgba(var(--ccva-danger-rgb), .12) !important;
}
.input-group {
position: relative;
display: flex;
flex-wrap: wrap;
align-items: stretch;
width: 100%;
}
.input-group > .form-control,
.input-group > .form-select {
position: relative;
flex: 1 1 auto;
width: 1%;
min-width: 0;
}
.input-group-text {
display: flex;
align-items: center;
padding: .375rem .75rem;
font-size: 1rem;
color: var(--bs-body-color);
background-color: var(--bs-light);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
.form-check { display: block; min-height: 1.5rem; padding-left: 1.5rem; margin-bottom: .125rem; }
.form-check-inline { display: inline-block; margin-right: 1rem; }
.form-check-input {
float: left;
margin-left: -1.5rem;
width: 1.15rem;
height: 1.15rem;
margin-top: .15rem;
border: 2px solid rgba(0,72,74,.35);
background: #fff;
box-shadow: 0 0 0 0 rgba(0,149,146,0);
accent-color: var(--ccva-teal);
}
.form-check-input:checked {
background-color: var(--ccva-teal);
border-color: var(--ccva-teal);
box-shadow: 0 0 0 4px rgba(0,149,146,0.16);
}
.form-check-label { margin-bottom: 0; }
.col-form-label { padding-top: calc(.375rem + 1px); padding-bottom: calc(.375rem + 1px); margin-bottom: 0; line-height: 1.5; } table tbody tr > :is(th, td){
transition: filter .16s ease, box-shadow .16s ease;
}
table tbody tr:hover > :is(th, td){
box-shadow: inset 0 0 0 9999px rgba(var(--ccva-dark-rgb), .08);
} .modal {
position: fixed;
top: 0;
left: 0;
z-index: 2050;
display: none;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
background-color: rgba(0,0,0,.5);
}
.modal.show { display: block; }
.modal-backdrop{
position:fixed;
inset:0;
z-index:2040;
background-color:rgba(0,0,0,.5);
}
.modal-backdrop.fade{ opacity:0; transition:opacity .24s ease; }
.modal-backdrop.show{ opacity:1; }
.modal.fade .modal-dialog{
transform:translateY(16px) scale(.98);
opacity:0;
transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
}
.modal.show .modal-dialog{
transform:translateY(0) scale(1);
opacity:1;
}
.modal-dialog {
position: relative;
width: auto;
margin: .5rem;
pointer-events: none;
}
@media (min-width: 576px) {
.modal-dialog { max-width: 500px; margin: 1.75rem auto; }
}
.modal-dialog-centered { display: flex; align-items: center; min-height: calc(100% - 1rem); }
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
.modal-header,
.modal-footer { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--bs-border-color); }
.modal-footer { border-top: 1px solid var(--bs-border-color); border-bottom: 0; }
.modal-title {
margin: 0;
line-height: 1.5;
color: var(--ccva-darker);
font-weight: 900;
font-size:1.3rem;
letter-spacing: -0.01em;
}
.modal-body {
position: relative;
flex: 1 1 auto;
padding: 1rem;
color: var(--ccva-dark);
}
.modal .modal-body :is(h1, h2, h3, h4, h5, h6){
color: var(--ccva-darker);
font-weight: 800;
letter-spacing: -0.01em;
}
.modal .modal-body p{
color: rgba(15,47,48,.76);
}
@media (min-width: 992px) { .modal-lg { max-width: 800px; } }
@media (min-width: 1200px) { .modal-xl { max-width: 1140px; } }
.modal-fullscreen { width: 100vw; height: 100vh; max-width: none; margin: 0; }
.modal-fullscreen .modal-content { height: 100%; border-radius: 0; overflow: hidden; }
.modal-fullscreen .modal-body { overflow-y: auto; }
.modal.fade .modal-dialog.modal-fullscreen .modal-content{
opacity:0;
transform:translateY(14px) scale(.992);
transition:transform .32s var(--ease-out), opacity .32s var(--ease-out);
}
.modal.show .modal-dialog.modal-fullscreen .modal-content{
opacity:1;
transform:translateY(0) scale(1);
}
.modal-dialog.modal-fullscreen.modal-dialog-centered{
display:block;
min-height:100vh;
} .tooltip {
position: absolute;
z-index: 1080;
display: block;
margin: 0;
font-family: inherit;
font-style: normal;
font-weight: 600;
line-height: 1.35;
text-align: left;
text-decoration: none;
letter-spacing: .01em;
word-wrap: break-word;
opacity: 1;
pointer-events: none;
}
.tooltip.show { opacity: 1; }
.tooltip .tooltip-inner {
max-width: 360px;
padding: .55rem .75rem;
color: var(--ccva-white, #fff);
background: linear-gradient(
135deg,
rgba(var(--ccva-dark-rgb, 19,73,63), .98),
rgba(var(--ccva-darker-rgb, 0,50,51), .96)
);
border: 1px solid rgba(var(--ccva-mustard-rgb, 235,193,55), .55);
border-radius: 12px;
box-shadow: 0 14px 28px rgba(0,50,51,.26);
font-size: .78rem;
}
.tooltip .tooltip-arrow {
position: absolute;
display: block;
width: 1rem;
height: .5rem;
opacity: 1;
z-index: 1;
}
.tooltip .tooltip-arrow::before {
position: absolute;
content: "";
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
}
.bs-tooltip-top .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow {
bottom: 0;
}
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
top: -1px;
border-width: .4rem .4rem 0;
border-top-color: rgba(var(--ccva-dark-rgb, 19,73,63), .98);
}
.bs-tooltip-bottom .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow {
top: 0;
}
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
bottom: -1px;
border-width: 0 .4rem .4rem;
border-bottom-color: rgba(var(--ccva-dark-rgb, 19,73,63), .98);
}
.bs-tooltip-start .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow {
right: 0;
width: .5rem;
height: 1rem;
}
.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
left: -1px;
border-width: .4rem 0 .4rem .4rem;
border-left-color: rgba(var(--ccva-dark-rgb, 19,73,63), .98);
}
.bs-tooltip-end .tooltip-arrow,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow {
left: 0;
width: .5rem;
height: 1rem;
}
.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
right: -1px;
border-width: .4rem .4rem .4rem 0;
border-right-color: rgba(var(--ccva-dark-rgb, 19,73,63), .98);
} .accordion { width: 100%; }
.accordion-item {
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow-sm);
background: var(--ccva-white);
}
.accordion-item + .accordion-item{
margin-top: .85rem;
}
.accordion-header { margin: 0; }
.accordion-button {
display: flex;
align-items: center;
width: 100%;
padding: 1rem 1.1rem;
font-size: .85rem;
font-weight: 800;
text-align: left;
color: rgba(var(--ccva-dark-rgb), .92);
background: var(--ccva-teal-soft);
font-family: inherit;
letter-spacing: 0;
border: 0;
box-shadow: none; 
cursor: pointer;
text-transform: none;
}
.accordion-button:not(.collapsed){
background: var(--ccva-teal-soft);
}
.accordion-button:hover{
background: rgba(var(--ccva-mustard-rgb), .10);
}
.accordion-button::after{
margin-left: auto;
width: 1rem;
height: 1rem;
content: "";
background-size: 1rem;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2313493F'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
transition: transform .25s var(--ease-out);
transform: rotate(0deg);
}
.accordion-button:not(.collapsed)::after{ transform: rotate(-180deg); }
.accordion-collapse { border-top: 1px solid var(--border-soft); transition: height .35s var(--ease-out); }
.accordion-body {
padding: 1rem 1.1rem 1.2rem;
color: rgba(var(--ccva-dark-rgb), .85);
font-weight: 500;
line-height: 1.7;
background: var(--ccva-white);
border-top: 1px solid var(--border-soft);
animation: ccvaAccordionFade .25s ease;
}
.page-card-inner .accordion{
box-shadow:none;
}
.page-card-inner .accordion-header{
margin:0;
}
.page-card-inner .accordion-header::after{
content:none;
display:none;
}
.accordion-flush .accordion-item { border-radius: 0; border-left: 0; border-right: 0; }
@keyframes ccvaAccordionFade{
from{ opacity:0; transform:translateY(4px); }
to{ opacity:1; transform:translateY(0); }
}
.collapse { display: none; }
.collapse.show { display: block; }
.collapsing { height: 0; overflow: hidden; transition: height .35s ease; } .nav { display: flex; flex-wrap: wrap; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav-item { display: block; }
.nav-link {
display: block;
padding: .5rem 1rem;
color: var(--bs-primary);
text-decoration: none;
}
.nav-tabs { border-bottom: 1px solid var(--bs-border-color); }
.nav-tabs .nav-link { margin-bottom: -1px; border: 1px solid transparent; border-top-left-radius: var(--bs-border-radius); border-top-right-radius: var(--bs-border-radius); }
.nav-tabs .nav-link.active { color: var(--bs-body-color); background-color: var(--bs-body-bg); border-color: var(--bs-border-color) var(--bs-border-color) var(--bs-body-bg); }
.nav-tabs .nav-link,
.nav-link[data-bs-toggle="tab"],
.nav-link[data-toggle="tab"],
[data-bs-toggle="tab"],
[data-toggle="tab"]{
cursor:pointer;
}
.tab-content > .tab-pane { display: none; }
.tab-content > .active { display: block; }
.fade { transition: opacity .15s linear; }
.fade:not(.show) { opacity: 0; }
.show { display: block; }
.active { } .dropdown { position: relative; }
.dropdown-toggle::after {
display: inline-block;
margin-left: .255em;
vertical-align: .255em;
content: "";
border-top: .3em solid;
border-right: .3em solid transparent;
border-left: .3em solid transparent;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
min-width: 10rem;
padding: .5rem 0;
margin: .125rem 0 0;
font-size: 1rem;
color: var(--bs-body-color);
background-color: var(--bs-body-bg);
border: 1px solid var(--bs-border-color);
border-radius: var(--bs-border-radius);
}
.dropdown-menu-end { right: 0; left: auto; }
.dropdown.show .dropdown-menu,
.dropdown-menu.show { display: block; }
.dropdown-item {
display: block;
width: 100%;
padding: .25rem 1rem;
clear: both;
color: var(--bs-body-color);
text-decoration: none;
white-space: nowrap;
background-color: transparent;
border: 0;
}
.dropdown-item:hover { background-color: var(--bs-light); } .carousel { position: relative; }
.carousel-inner { position: relative; width: 100%; overflow: hidden; }
.carousel-item { position: relative; display: none; float: left; width: 100%; margin-right: -100%; backface-visibility: hidden; transition: transform .6s ease-in-out; }
.carousel-item.active { display: block; } .visually-hidden {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0,0,0,0) !important;
white-space: nowrap !important;
border: 0 !important;
} hr{
margin:1rem 0;
color:inherit;
background-color:currentColor;
border:0;
opacity:.25;
height:1px;
}  :root {
--ccva-teal: #009592;
--ccva-teal-soft: #ebf7f6;
--ccva-dark: #003233;
--ccva-darker: #003233;
--ccva-darker-rgb: 0, 50, 51;
--ccva-mustard: #EBC137;
--ccva-teal-rgb: 0, 149, 146;
--ccva-dark-rgb: 0, 50, 51;
--ccva-mustard-rgb: 235, 193, 55;
--ccva-danger: #b23a3a;
--ccva-danger-rgb: 178, 58, 58;
--ccva-success: #4E7F17;
--ccva-success-rgb: 78, 127, 23;
--ccva-success-text: #2E4F10;
--ccva-muted: #6c757d;
--ccva-border: #dee2e6;
--ccva-black: #000000;
--ccva-btn-radius: 999px;
--ccva-btn-padding: .82rem 1.15rem;
--ccva-btn-font-size: .82rem;
--ccva-btn-letter-spacing: .8px;
--ccva-btn-weight: 900;
--ccva-btn-gap: .55rem;
--ccva-light: #f4f7f6;
--ccva-white: #ffffff;
--shadow-sm: 0 6px 18px rgba(var(--ccva-dark-rgb), 0.08);
--shadow-md: 0 14px 40px rgba(var(--ccva-dark-rgb), 0.12);
--shadow-lg: 0 22px 60px rgba(var(--ccva-dark-rgb), 0.16);
--radius-xl: 18px;
--radius-lg: 12px;
--radius-md: 10px;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--border-soft: rgba(0, 0, 0, 0.06);
--border-soft-strong: rgba(0, 0, 0, 0.10);
--border-hover: rgba(var(--ccva-teal-rgb), 0.35);
--border-hover-mustard: rgba(var(--ccva-mustard-rgb), 0.45);
--border-on-dark: rgba(255, 255, 255, 0.14);
} .alert{
margin:1.35rem 0 1.55rem;
padding:1.15rem 1.25rem;
border-radius:var(--radius-lg);
border:1px solid rgba(var(--alert-accent-rgb), .22);
border-left:4px solid var(--ccva-teal);
background:rgba(var(--ccva-teal-rgb), .08);
color:rgba(var(--ccva-dark-rgb), .92);
font-weight:400;
display:block;
box-shadow:var(--shadow-sm);
position:relative;
overflow:hidden;
--alert-accent-rgb: var(--ccva-teal-rgb);
}
.alert strong{
color:inherit;
font-weight:800;
}
.alert a:not(.btn){
color:inherit;
text-decoration:underline;
text-underline-offset:2px;
}
.alert .alert-body > :first-child{
margin-top:0;
}
.alert .alert-body > :last-child{
margin-bottom:0;
}
.alert-primary{
border-left-color:var(--ccva-dark);
background:rgba(var(--ccva-dark-rgb), .08);
color:var(--ccva-dark);
--alert-accent-rgb: var(--ccva-dark-rgb);
}
.alert-secondary{
border-left-color:var(--ccva-teal);
background:rgba(var(--ccva-teal-rgb), .12);
color:rgba(var(--ccva-dark-rgb), .92);
--alert-accent-rgb: var(--ccva-teal-rgb);
}
.alert::after{
content:"";
position:absolute;
inset:auto -70px -80px auto;
width:190px;
height:190px;
border-radius:50%;
background:rgba(var(--alert-accent-rgb), .10);
pointer-events:none;
}
.alert-info{
border-left-color:var(--ccva-teal);
background:rgba(var(--ccva-teal-rgb), .08);
color:var(--ccva-dark);
--alert-accent-rgb: var(--ccva-teal-rgb);
}
.alert-success{
border-left-color:var(--ccva-success);
background:rgba(var(--ccva-success-rgb), .12);
color:var(--ccva-success-text);
--alert-accent-rgb: var(--ccva-success-rgb);
}
.alert-warning{
border-left-color:var(--ccva-mustard);
background:rgba(var(--ccva-mustard-rgb), .12);
color:rgba(var(--ccva-dark-rgb), .94);
--alert-accent-rgb: var(--ccva-mustard-rgb);
}
.alert-danger{
border-left-color:var(--ccva-danger);
background:rgba(var(--ccva-danger-rgb), .10);
color:var(--ccva-danger);
--alert-accent-rgb: var(--ccva-danger-rgb);
}
.alert-light{
background:rgba(255,255,255,0.92);
color:rgba(var(--ccva-dark-rgb), .88);
--alert-accent-rgb: var(--ccva-teal-rgb);
}
.alert-dark{
border-left-color:rgba(var(--ccva-mustard-rgb), .85);
background:rgba(var(--ccva-dark-rgb), .88);
color:var(--ccva-white);
--alert-accent-rgb: var(--ccva-mustard-rgb);
} .alert:has(.btn) .alert-body{
display:flex;
flex-direction:column;
gap:.9rem;
}
.alert:has(.btn) .alert-body > .btn{
align-self:flex-start;
margin-top:.15rem;
}
.alert:has(.btn) .alert-body > .text-center{
width:100%;
}
* { box-sizing: border-box; }
body {
font-family: 'Outfit', sans-serif;
color: #2c3e50;
background-color: var(--ccva-light);
font-weight: 300;
overflow-x: hidden;
line-height: 1.65;
margin: 0;
}
h1, h2, h3, h4, h5 { letter-spacing: -0.02em; }
strong { font-weight: 700; }
.fw-black { font-weight: 900; }
.font-coyote{
font-family: 'Coyote', 'Outfit', sans-serif;
font-weight: 600;
letter-spacing: 0;
}
.hero-title .font-coyote{
font-size:.84em;
letter-spacing:0;
}
.text-mustard { color: var(--ccva-mustard) !important; }
.text-teal { color: var(--ccva-teal) !important; }
.container { max-width: 1180px; }
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 3px solid rgba(var(--ccva-mustard-rgb), 0.55);
outline-offset: 3px;
border-radius: 10px;
}
.skip-link{
position:absolute;
left:-9999px;
top:auto;
width:1px;
height:1px;
overflow:hidden;
} .navbar {
padding: 0.85rem 0;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.navbar-brand {
font-weight: 800;
color: var(--ccva-dark);
font-size: 1.35rem;
letter-spacing: -0.5px;
display:flex;
align-items:center;
gap:.55rem;
}
.navbar-brand i{ font-size: 1.05rem; }
.nav-link {
color: var(--ccva-dark);
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 1px;
margin: 0 12px;
position: relative;
opacity: .95;
}
.nav-link::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
width: 0;
height: 2px;
background: var(--ccva-teal);
transition: 0.3s;
transform: translateX(-50%);
border-radius: 2px;
}
.nav-link:hover::after { width: 100%; } .page-hero{
position:relative;
padding:7.5rem 0 4.8rem;
color:var(--ccva-white);
background-color: rgba(var(--ccva-dark-rgb), .92);
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
overflow:hidden;
}
.page-hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(135deg, rgba(var(--ccva-dark-rgb), .92), rgba(var(--ccva-dark-rgb), .72));
z-index:1;
}
.page-hero::after{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 15% 15%, rgba(var(--ccva-mustard-rgb), .16), transparent 45%),
radial-gradient(circle at 85% 25%, rgba(var(--ccva-teal-rgb), .22), transparent 48%);
pointer-events:none;
mix-blend-mode:soft-light;
z-index:1;
}
.page-hero-inner{position:relative; z-index:2}
.page-title{
font-size:clamp(2rem, 3.5vw, 3.5rem);
font-weight:900;
margin:0 0 .55rem;
line-height:1.1;
text-shadow:0 14px 34px rgba(0,0,0,.30);
letter-spacing:-.04em;
}
.page-desc{
margin:0;
max-width:980px;
opacity:.92;
font-weight:400;
font-size:1.1rem;
}
.crumb-bar{
margin-top:-1.8rem;
position:relative;
z-index:6;
margin-bottom:-1.35rem;
padding-bottom:0;
}
.crumb-card{
background:rgba(255,255,255,.96);
border:1px solid var(--border-soft);
border-radius:var(--radius-xl);
box-shadow:var(--shadow-md);
padding:.62rem .95rem;
display:inline-flex;
align-items:center;
justify-content:flex-start;
gap:1rem;
flex-wrap:wrap;
}
.crumb{
display:flex;
align-items:center;
gap:.55rem;
flex-wrap:wrap;
font-weight:800;
font-size:.92rem;
color:var(--ccva-dark);
}
.crumb a{
color:var(--ccva-dark);
font-weight:900;
transition:.2s;
}
.crumb a:hover{color:var(--ccva-mustard)}
.crumb i{color:var(--ccva-mustard)}
.crumb .sep{opacity:.4; font-weight:900}
.crumb .active{
color:var(--ccva-dark);
font-weight:900;
background:rgba(var(--ccva-mustard-rgb), .28);
border:1px solid rgba(var(--ccva-mustard-rgb), .55);
padding:.2rem .55rem;
border-radius:999px;
box-shadow:0 8px 18px rgba(var(--ccva-mustard-rgb), .18);
}
.page-section{
position:relative;
padding:3.7rem 0 5.2rem;
overflow-x:clip;
}
.page-section::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 10%, rgba(var(--ccva-teal-rgb), .06), transparent 42%),
radial-gradient(circle at 85% 12%, rgba(var(--ccva-mustard-rgb), .06), transparent 44%);
pointer-events:none;
z-index:0;
}
.page-section::after{
content:"";
position:absolute;
right:-140px;
top:120px;
width:680px;
height:680px;
border-radius:50%;
background:radial-gradient(circle, rgba(var(--ccva-mustard-rgb), .10) 0%, transparent 70%);
pointer-events:none;
z-index:0;
} .page-hero + .crumb-bar{
margin-top:-2.25rem;
margin-bottom:-1.8rem;
}
.page-section .container{position:relative; z-index:1}
.page-card{
width:100%;
background:rgba(255,255,255,.95);
border:1px solid var(--border-soft);
border-radius:var(--radius-xl);
box-shadow:var(--shadow-lg);
overflow:hidden;
}
.page-card--toc{
overflow:visible;
}
.page-card-top{
padding:2.1rem 2.6rem 1.35rem;
border-bottom:1px solid var(--border-soft);
background:
linear-gradient(180deg, rgba(var(--ccva-teal-rgb), .06), rgba(255,255,255,0));
}
.section-title{
font-size:clamp(1.5rem, 2.2vw, 2rem);
font-weight:900;
color:var(--ccva-darker);
letter-spacing:-.03em;
line-height:1.2;
display:flex;
align-items:center;
gap:.75rem;
margin:0 0 .35rem;
flex-wrap:wrap;
}
.page-card-inner .sve-title{
display:block;
text-align:center;
justify-content:center;
font-size:clamp(1.7rem, 2.6vw, 2.35rem);
}
.page-card-inner .sve-title::after{
display:none;
content:none;
}
.section-lead{
margin:0;
color:rgba(15,47,48,.74);
font-weight:500;
font-size:1.02rem;
max-width:980px;
}
.page-card-inner{
padding:2.2rem 2.6rem 2.5rem;
} .error404 .ccva-404-section{
padding-top:2.6rem;
}
.error404 .ccva-404-card .page-card-inner{
display:grid;
gap:1.4rem;
justify-items:center;
text-align:center;
}
.error404 .ccva-404-visual{
position:relative;
width:min(320px, 74vw);
aspect-ratio:1/1;
display:grid;
place-items:center;
margin:.2rem 0 .55rem;
}
.error404 .ccva-404-code{
position:relative;
z-index:2;
font-size:clamp(3rem, 10vw, 5.2rem);
font-weight:900;
color:var(--ccva-darker);
letter-spacing:-.04em;
text-shadow:0 14px 32px rgba(var(--ccva-dark-rgb), .16);
}
.error404 .ccva-404-ring{
position:absolute;
inset:10%;
border-radius:999px;
border:10px solid rgba(var(--ccva-teal-rgb), .12);
box-shadow:inset 0 0 0 1px rgba(var(--ccva-dark-rgb), .06);
animation:ccva404spin 10s linear infinite;
}
.error404 .ccva-404-ring--a{
inset:8%;
border-top-color:rgba(var(--ccva-teal-rgb), .8);
border-right-color:rgba(var(--ccva-mustard-rgb), .5);
}
.error404 .ccva-404-ring--b{
inset:20%;
border-width:8px;
border-left-color:rgba(var(--ccva-dark-rgb), .7);
border-bottom-color:rgba(var(--ccva-teal-rgb), .65);
animation-direction:reverse;
animation-duration:8s;
}
.error404 .ccva-404-ring--c{
inset:34%;
border-width:6px;
border-color:rgba(var(--ccva-mustard-rgb), .38);
border-top-color:rgba(var(--ccva-dark-rgb), .66);
animation-duration:6.2s;
}
.error404 .ccva-404-actions{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:.8rem;
}
.error404 .ccva-404-actions .btn{
min-width:230px;
}
@keyframes ccva404spin{
from{ transform:rotate(0deg); }
to{ transform:rotate(360deg); }
}
@media (max-width: 768px){
.crumb-bar .container{
overflow-x:hidden;
}
.crumb-card{
padding:.95rem;
display:flex;
flex-direction:column;
align-items:flex-start;
width:100%;
max-width:100%;
min-width:0;
gap:.75rem;
}
.crumb{
width:100%;
min-width:0;
}
.crumb a,
.crumb .active,
.crumb .crumb-ellipsis{
max-width:100%;
overflow-wrap:anywhere;
word-break:break-word;
}
.crumb .active{
white-space:normal;
}
.crumb{
row-gap:.5rem;
}
.crumb .active{
margin-top:.1rem;
padding:.55rem .8rem;
border-radius:1.1rem;
white-space:normal;
overflow-wrap:anywhere;
word-break:break-word;
box-sizing:border-box;
}
} .ccva-nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1200;
padding: 0.85rem 0;
background: rgba(255,255,255,0.92);
backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(0,0,0,0.05);
transition: background-color .2s ease, border-color .2s ease;
}
.ccva-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.ccva-nav__brand {
font-weight: 800;
color: var(--ccva-dark);
font-size: 1.35rem;
letter-spacing: -0.5px;
display: flex;
align-items: center;
gap: .55rem;
}
.ccva-nav__brand .brand-logo{
display:block;
height:52px;
width:auto;
transition: filter .2s ease, transform .2s ease;
will-change: filter;
}
.ccva-nav__brand:hover .brand-logo,
.ccva-nav__brand:focus-visible .brand-logo{
filter: brightness(1.08) saturate(1.03);
transform: translateY(-1px);
}
.ccva-nav__brand i { font-size: 1.05rem; }
.ccva-nav__menu { margin-left: auto; }
.ccva-nav__list {
list-style: none;
display: flex;
align-items: center;
gap: 1.1rem;
margin: 0;
padding: 0;
}
.ccva-nav__item {
display: flex;
align-items: center;
gap: 0.35rem;
position: relative;
}
.ccva-nav__item--cta { margin-left: 0.5rem; }
.ccva-nav__item--cta{
transition: none;
}
.ccva-nav__item--cta .btn{
--ccva-btn-hover-transform: translateY(0);
text-transform: uppercase;
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 1px;
opacity: .95;
}
.ccva-nav__item--cta:active{
transform: translateY(.25px);
}
.ccva-nav__item--cta .ccva-nav__link::after{ display:none; }
.ccva-nav__link,
.ccva-nav__sublink {
color: var(--ccva-dark);
font-weight: 700;
font-size: 0.82rem;
text-transform: uppercase;
letter-spacing: 1px;
position: relative;
opacity: .95;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.ccva-nav__link::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
width: 0;
height: 2px;
background: var(--ccva-teal);
transition: width .3s ease, opacity .3s ease;
transform: translateX(-50%);
border-radius: 2px;
opacity:0;
}
.ccva-nav__item:hover > .ccva-nav__link::after,
.ccva-nav__link:hover::after {
width: 100%;
opacity:1;
}
.ccva-nav__link.is-current { color: var(--ccva-teal); }
.ccva-nav__item--has-children > .ccva-nav__link {
padding-right: 16px;
}
.ccva-nav__item--has-children::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 100%;
height: 14px;
}
.ccva-nav__item--has-children > .ccva-nav__link::before {
content: '';
position: absolute;
right: 0;
top: 50%;
width: 6px;
height: 6px;
border-right: 2px solid var(--ccva-dark);
border-bottom: 2px solid var(--ccva-dark);
transform: translateY(-50%) rotate(45deg);
}
.ccva-nav__submenu {
list-style: none;
position: absolute;
top: calc(100% + 12px);
left: 0;
min-width: 220px;
margin: 0;
padding: 0.6rem;
background: #fff;
border: 1px solid var(--border-soft-strong);
border-radius: 14px;
box-shadow: var(--shadow-md);
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: all 0.25s var(--ease-out);
z-index: 5;
}
@media (min-width: 992px) {
.ccva-nav__item--has-children:hover > .ccva-nav__submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.ccva-nav__item--has-children:focus-within > .ccva-nav__submenu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
}
.ccva-nav__sublink {
display: block;
padding: 0.55rem 0.75rem;
text-transform: none;
letter-spacing: 0;
font-weight: 600;
font-size: 0.9rem;
border-radius: 10px;
}
.ccva-nav__sublink:hover {
color: var(--ccva-dark);
background: rgba(var(--ccva-teal-rgb), .10);
}
.ccva-nav__sublink:active,
.ccva-nav__sublink.is-current {
color: var(--ccva-darker);
background: rgba(var(--ccva-mustard-rgb), .18);
}
.ccva-nav__sublink--parent{
font-weight:800;
border:1px solid rgba(var(--ccva-teal-rgb), .2);
background:rgba(var(--ccva-teal-rgb), .06);
}
.ccva-nav__submenu-toggle {
display: none;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 999px;
border: 1px solid var(--border-soft-strong);
background: #fff;
color: var(--ccva-dark);
cursor: pointer;
transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
}
.ccva-nav__submenu-toggle:hover { border-color: var(--border-hover); }
.ccva-nav__submenu-toggle > i,
.ccva-nav__submenu-toggle > .ccva-icon {
transition: transform 0.2s var(--ease-out);
transform: rotate(0deg);
transform-origin: center;
}
.ccva-nav__item.is-open > .ccva-nav__submenu-toggle > i,
.ccva-nav__item.is-open > .ccva-nav__submenu-toggle > .ccva-icon {
transform: rotate(180deg);
}
.ccva-nav__toggle {
display: none;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border: 0;
background: transparent;
color: var(--ccva-dark);
padding: 0;
border-radius: 0;
cursor: pointer;
position: relative;
transition: color 0.2s var(--ease-out), transform 0.2s var(--ease-out), opacity 0.2s var(--ease-out);
}
.ccva-nav__toggle-bars {
width: 18px;
height: 2px;
background: var(--ccva-dark);
position: relative;
border-radius: 999px;
transition: background 0.2s var(--ease-out);
}
.ccva-nav__toggle-bars::before,
.ccva-nav__toggle-bars::after {
content: '';
position: absolute;
left: 0;
width: 18px;
height: 2px;
background: var(--ccva-dark);
border-radius: 999px;
transition: transform 0.2s var(--ease-out);
}
.ccva-nav__toggle-bars::before { top: -6px; }
.ccva-nav__toggle-bars::after { top: 6px; }
.ccva-nav.is-open .ccva-nav__toggle-bars { background: transparent; }
.ccva-nav.is-open .ccva-nav__toggle-bars::before {
transform: translateY(6px) rotate(45deg);
}
.ccva-nav.is-open .ccva-nav__toggle-bars::after {
transform: translateY(-6px) rotate(-45deg);
}
.ccva-nav__item--search{ margin-left:.25rem; }
.ccva-nav__item--search-inline{ display:none; }
.ccva-nav__item--search-trigger{ display:block; }
.nav-search-trigger{
display:inline-flex;
align-items:center;
justify-content:center;
width:42px;
height:42px;
border-radius:999px;
border:1px solid var(--border-soft);
background:#fff;
color:var(--ccva-dark);
box-shadow:var(--shadow-sm);
cursor:pointer;
transition:transform .2s var(--ease-out), border-color .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.nav-search-trigger:hover{
transform:translateY(-1px);
border-color:var(--border-hover);
box-shadow:var(--shadow-md);
}
.nav-search-inline{
display:flex;
align-items:center;
gap:0;
background:rgba(255,255,255,0.92);
border:1px solid var(--border-soft);
border-radius:999px;
padding:.35rem;
box-shadow:var(--shadow-sm);
}
.nav-search-inline:focus-within{
border-color: rgba(var(--ccva-mustard-rgb), 0.45);
box-shadow: 0 0 0 3px rgba(var(--ccva-mustard-rgb), 0.22);
}
.nav-search-inline__input{
flex:1 1 auto;
background:transparent;
border:none;
color:var(--ccva-dark);
padding:.5rem .85rem;
font-weight:600;
outline:none;
min-width:140px;
}
.nav-search-inline__submit{
border:none;
background:rgba(0,0,0,0.08);
color:rgba(var(--ccva-dark-rgb), 0.92);
border-radius:999px;
padding:.55rem .85rem;
font-weight:900;
letter-spacing:.6px;
text-transform:uppercase;
font-size:.72rem;
display:inline-flex;
align-items:center;
gap:0;
transition:transform .2s var(--ease-out), background .2s var(--ease-out);
white-space:nowrap;
}
.nav-search-inline__submit:hover{
transform:translateY(-1px);
background:rgba(0,0,0,0.14);
}
.ccva-search-modal{
border-radius:18px;
border:1px solid var(--border-soft);
box-shadow:var(--shadow-lg);
background:rgba(255,255,255,0.98);
}
#ccvaSearchModal.modal.fade .modal-dialog{
transform:translateY(16px) scale(.98);
transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
opacity:0;
}
#ccvaSearchModal.modal.show .modal-dialog{
transform:translateY(0) scale(1);
opacity:1;
}
#servicesModal.modal.fade .modal-dialog{
transform:translateY(16px) scale(.98);
transition:transform .35s var(--ease-out), opacity .35s var(--ease-out);
opacity:0;
}
#servicesModal.modal.show .modal-dialog{
transform:translateY(0) scale(1);
opacity:1;
}
.modal-dialog.ccva-search-dialog{
max-width:720px;
}
.modal-header{
border-bottom:1px solid rgba(0,0,0,0.06);
}
.modal-body{
padding:1.35rem 1.5rem 1.5rem;
}
.nav-search-modal{
display:flex;
align-items:center;
gap:.55rem;
background:rgba(255,255,255,0.92);
border:1px solid var(--border-soft);
border-radius:999px;
padding:.45rem;
}
.nav-search-modal:focus-within{
border-color: rgba(var(--ccva-mustard-rgb), 0.45);
box-shadow: 0 0 0 3px rgba(var(--ccva-mustard-rgb), 0.22);
}
.nav-search-modal__input{
flex:1 1 auto;
background:transparent;
border:none;
color:var(--ccva-dark);
padding:.6rem .9rem;
font-weight:600;
outline:none;
min-width:180px;
}
.nav-search-modal__submit{
white-space:nowrap;
cursor:pointer;
}
.nav-search-suggestions{
margin-top:.85rem;
display:flex;
flex-wrap:wrap;
gap:.5rem;
} .ccva-pill{
display:inline-flex;
align-items:center;
border-radius:999px;
padding:.35rem .65rem;
background-color: transparent;
border:1px solid transparent;
color: var(--ccva-darker, #003233);
box-shadow: none;
gap:.4rem;
font-weight:800;
font-size:.82rem;
line-height:1;
transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.ccva-pill--nav,
.ccva-pill--access,
.ccva-pill--meta,
.ccva-pill--private,
.ccva-pill--meta-chip,
.ccva-pill--quick,   
.ccva-pill--page,
.ccva-pill--step,
.ccva-pill--message{
white-space:nowrap;
}
.ccva-pill--nav{
padding:.4rem .7rem;
font-size:.8rem;
font-weight:900;
opacity:0;
transform:translateY(6px);
animation:nav-pill-in .45s var(--ease-out) forwards;
}
.ccva-pill--nav:hover{
transform:translateY(-1px);
border-color:var(--border-hover);
box-shadow:var(--shadow-sm);
}
.ccva-pill--nav:nth-child(1){animation-delay:.02s}
.ccva-pill--nav:nth-child(2){animation-delay:.06s}
.ccva-pill--nav:nth-child(3){animation-delay:.10s}
.ccva-pill--nav:nth-child(4){animation-delay:.14s}
.ccva-pill--nav:nth-child(5){animation-delay:.18s}
@keyframes nav-pill-in{
from{opacity:0; transform:translateY(6px)}
to{opacity:1; transform:translateY(0)}
}
.ccva-pill-cloud{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:.6rem .75rem;
}
.ccva-pill-cloud > .ccva-pill{
margin:0 !important;
}
@media (max-width: 767.98px){
.ccva-pill-cloud{
display:flex !important;
flex-direction:row;
align-items:center;
justify-content:center;
flex-wrap:wrap !important;
gap:.55rem .65rem;
}
.ccva-pill-cloud > .ccva-pill{
flex:0 1 calc(50% - .65rem);
min-width:0;
max-width:100%;
margin:0 !important;
white-space:normal;
text-align:center;
justify-content:center;
font-size:.79rem;
line-height:1.25;
padding:.42rem .62rem;
}
}
@media (max-width: 991px) {
.ccva-nav__inner { flex-wrap: wrap; min-width: 0; }
.ccva-nav__brand{
flex: 1 1 auto;
min-width: 0;
}
.ccva-nav__brand .brand-logo{
display:block;
max-width:100%;
width:auto;
height:auto;
max-height:52px;
}
.ccva-nav__toggle{
flex: 0 0 auto;
}
.ccva-nav__menu { width: 100%; }
.ccva-nav__toggle { display: inline-flex; }
.ccva-nav__menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: rgba(255,255,255,0.98);
border-bottom: 1px solid var(--border-soft);
max-height: 0;
overflow: hidden;
transition: max-height 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}
.ccva-nav.is-open .ccva-nav__menu {
max-height: 80vh;
box-shadow: var(--shadow-md);
}
.ccva-nav__list {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
padding: 1rem 1.5rem 1.5rem;
width: 100%;
}
.ccva-nav__item {
width: 100%;
flex-wrap: wrap;
justify-content: space-between;
padding: .2rem 0;
}
.ccva-nav__item--has-children{
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
column-gap: .5rem;
}
.ccva-nav__item--has-children > .ccva-nav__link::before { display: none; }
.ccva-nav__item--search{ width:100%; }
.ccva-nav__item--search-trigger{ display:none; }
.ccva-nav__item--search-inline{ display:block; }
.nav-search-inline{ width:100%; }
.nav-search-inline__input{ min-width:0; }
.ccva-nav__submenu {
position: static;
box-shadow: none;
border: none;
padding: 0.3rem 0 0.6rem 0.8rem;
opacity: 1;
visibility: visible;
transform: none;
display: none;
width: 100%;
}
.ccva-nav__item.is-open > .ccva-nav__submenu { display: block; }
.ccva-nav__submenu-toggle { display: inline-flex; }
.ccva-nav__link,
.ccva-nav__sublink {
width: 100%;
padding-top: .5rem;
padding-bottom: .5rem;
}
.ccva-nav__sublink{
padding-top: .6rem;
padding-bottom: .6rem;
}
.ccva-nav__item--has-children > .ccva-nav__link{ width: auto; }
.ccva-nav__item--has-children > .ccva-nav__submenu{ grid-column: 1 / -1; }
.ccva-nav__submenu-toggle{ margin-left: .25rem; }
.ccva-nav__item--cta { width: auto; }} footer {
background-color: var(--ccva-darker);
color: rgba(255,255,255,0.7);
padding: 5.2rem 0 2rem 0;
font-size: 0.95rem;
}
.footer-logo { font-size: 1.5rem; font-weight: 900; color: white; margin-bottom: 1rem; display: inline-flex; align-items:center; gap:.55rem; }
.footer-logo img { max-width: 180px; max-height: 60px; height: auto; width: auto; object-fit: contain; vertical-align: middle; }
.footer-brand { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; margin-bottom: .85rem; text-align: left; }
.footer-brand-logo { max-width: 72px; max-height: 72px; height: auto; width: auto; object-fit: contain; }
.footer-brand-title { font-size: 1.05rem; font-weight: 800; color: white; line-height: 1.2; margin: 0; letter-spacing: -0.01em; }
.footer-heading { color: white; font-weight: 900; margin-bottom: 1.2rem; font-size: 1.1rem; letter-spacing: -0.02em; }
.footer-links { padding: 0; list-style: none; margin:0; }
.footer-links li { margin-bottom: 0.85rem; }
.footer-links a { color: rgba(255,255,255,0.7); text-decoration: none; transition: 0.2s; font-weight: 500; }
.footer-links a:hover { color: var(--ccva-mustard); }
.footer-bottom {
margin-top: 3.8rem;
padding-top: 2rem;
border-top: 1px solid rgba(255,255,255,0.06);
text-align: center;
font-size: 0.85rem;
} .fab-wrap{
position: fixed;
right: 16px;
bottom: 16px;
display:flex;
flex-direction: column;
gap: .7rem;
z-index: 999;
}
.fab{
width: 48px;
height: 48px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
border: 1px solid rgba(0,0,0,0.08);
box-shadow: 0 16px 40px rgba(0,0,0,0.14);
transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out), opacity .25s var(--ease-out);
cursor: pointer;
}
.fab.top{
position: fixed;
right: 16px;
bottom: 16px;
z-index: 1000;
background: rgba(255,255,255,0.94);
color: rgba(var(--ccva-dark-rgb), 0.92);
border-color: rgba(var(--ccva-teal-rgb), 0.22);
}
.fab:hover{ transform: translateY(-2px); }
.fab.top:hover{ background: var(--ccva-white); border-color: rgba(var(--ccva-teal-rgb), 0.22); }
.fab[hidden]{ opacity: 0; pointer-events:none; } .site-footer{
position:relative;
background: linear-gradient(180deg, var(--ccva-dark) 0%, var(--ccva-darker) 58%, #002d29 100%);
color: rgba(255,255,255,.78);
padding: 3.15rem 0 1.4rem;
}
.site-footer .footer-wave{
position:absolute;
top:-18px;
left:0;
width:100%;
height:20px;
fill: var(--ccva-dark);
}
@media (max-width: 767.98px){
.site-footer .footer-wave{
top:-9px;
height:10px;
transform:scaleY(.55);
transform-origin:bottom center;
}
}
.site-footer .footer-grid{
display:grid;
grid-template-columns: 1.2fr .85fr .85fr 1.2fr;
gap: 1.8rem;
align-items:center;
}
.site-footer .footer-heading{
color: var(--ccva-mustard);
font-weight: 700;
margin-bottom: 1.1rem;
font-size: .85rem;
letter-spacing: .12em;
text-transform: uppercase;
}
.site-footer .footer-brand{
display:flex;
flex-direction:row;
align-items:center;
gap:.85rem;
margin-bottom:.85rem;
text-align:left;
}
.site-footer .footer-branding{
display:flex;
flex-direction:column;
gap:.75rem;
}
.site-footer .footer-heading--ghost{
visibility:hidden;
pointer-events:none;
user-select:none;
margin-bottom:1.1rem;
}
.site-footer .footer-brand-logo{
max-width: 72px;
max-height: 72px;
width:auto;
height:auto;
object-fit:contain;
}
.site-footer .footer-brand-logo-wrap{
margin-top:0;
flex:0 0 auto;
display:flex;
align-items:center;
}
.site-footer .footer-brand-title{
display:flex;
flex-direction:column;
gap:.1rem;
line-height:1.1;
margin:0;
text-align:left;
max-width: 260px;
}
.site-footer .footer-brand-note{
margin:0;
max-width:320px;
font-size:.88rem;
line-height:1.55;
color:rgba(255,255,255,.66);
}
.site-footer .footer-brand-link{
display:inline-flex;
align-items:center;
width:fit-content;
font-size:.8rem;
font-weight:800;
letter-spacing:.08em;
text-transform:uppercase;
color:var(--ccva-mustard);
border-bottom:1px solid rgba(var(--ccva-mustard-rgb), .45);
text-decoration:none;
padding-bottom:.12rem;
}
.site-footer .footer-brand-link:hover{
color:#fff;
border-bottom-color:rgba(255,255,255,.45);
}
.site-footer .footer-title-primary{
font-size: 1.05rem;
font-weight: 800;
color: var(--ccva-mustard);
}
.site-footer .footer-title-primary .footer-title-prefix{
color:#fff;
}
.site-footer .footer-title-secondary{
font-size: .95rem;
font-weight: 600;
color:#fff;
letter-spacing: .02em;
}
.site-footer .footer-address{
color: rgba(255,255,255,.7);
font-size: .9rem;
line-height: 1.55;
}
.site-footer .footer-links{
padding:0;
list-style:none;
margin:0;
}
.site-footer .footer-links li{ margin-bottom:.7rem; }
.site-footer .footer-links a{
color: rgba(255,255,255,.72);
text-decoration:none;
font-weight:500;
transition: color .2s ease;
}
.site-footer .footer-links a:hover{
color: var(--ccva-mustard);
}
.site-footer .footer-grid > .footer-column:nth-child(3){
border-left:1px solid rgba(255,255,255,.09);
padding-left:1.3rem;
}
.site-footer .contact-card{
background: rgba(0, 61, 56, 0.55);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 18px;
padding: 1.4rem 1.35rem;
box-shadow: 0 18px 38px rgba(0,0,0,.22);
}
.site-footer .contact-title{
color: #fff;
font-weight: 700;
font-size: .9rem;
letter-spacing: .08em;
text-transform: uppercase;
margin-bottom: .95rem;
}
.site-footer .contact-item{
display:flex;
gap:.75rem;
align-items:flex-start;
font-size: .85rem;
line-height: 1.4;
color: rgba(255,255,255,.75);
margin-bottom: .8rem;
}
.site-footer .contact-item i{
color: var(--ccva-mustard);
margin-top:.1rem;
}
.site-footer .contact-highlight{
color:#fff;
font-weight:600;
}
.site-footer .contact-actions{
margin-top: 1rem;
}
.site-footer .footer-bottom{
margin-top:1.7rem;
padding-top:.9rem;
border-top:1px solid rgba(255,255,255,.08);
text-align:center;
font-size:.8rem;
color: rgba(255,255,255,.6);
}
@media (max-width: 1100px){
.site-footer .footer-grid{ grid-template-columns: 1fr 1fr; }
.site-footer .footer-grid > .footer-column:nth-child(3){
border-left:0;
padding-left:0;
}
}
@media (max-width: 720px){
.site-footer{ padding-top: 2.45rem; }
.site-footer .footer-grid{ grid-template-columns: 1fr; }
} @media (max-width: 767px){
.ccva-files-table-wrap{
overflow-x:visible !important;
}
.ccva-files-table-wrap .ccva-files-table{
width:100%;
min-width:0 !important;
border:0;
border-spacing:0;
table-layout:fixed;
}
.ccva-files-table-wrap .ccva-files-table thead{
position:absolute;
width:1px;
height:1px;
margin:-1px;
padding:0;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.ccva-files-table-wrap .ccva-files-table tbody{
display:grid;
gap:.85rem;
}
.ccva-files-table-wrap .ccva-files-table tr{
display:block;
border:1px solid var(--border-soft);
border-radius:var(--radius-md);
background:#fff;
box-shadow:var(--shadow-sm);
padding:.2rem 0;
}
.ccva-files-table-wrap .ccva-files-table td{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:.85rem;
width:100%;
border:0 !important;
padding:.68rem .8rem;
}
.ccva-files-table-wrap .ccva-files-table td + td{
border-top:1px solid rgba(0,0,0,.05) !important;
}
.ccva-files-table-wrap .ccva-files-table td::before{
content:attr(data-label);
flex:0 0 42%;
color:rgba(15,47,48,.72);
font-weight:800;
font-size:.78rem;
letter-spacing:.02em;
text-transform:uppercase;
}
.ccva-files-table-wrap .ccva-files-table td > *{
flex:1 1 auto;
min-width:0;
}
.ccva-files-table-wrap .ccva-files-table td:first-child{
overflow-wrap:anywhere;
word-break:break-word;
}
.ccva-files-table-wrap .ccva-files-table td[data-label="Lien de telechargement"] a{
width:100%;
justify-content:center;
}
}.hero-section {
position: relative;
background:
linear-gradient(
180deg,
rgba(var(--ccva-darker-rgb), 0.92) 0%,
rgba(var(--ccva-dark-rgb), 0.86) 100%
),
url(//urba.cc-valdeaisne.fr/wp-content/themes/ccva-v2/img/bg-section-hero.webp);
background-size: cover;
background-repeat: no-repeat;
background-position: center 20%;
background-attachment: fixed;
padding: 8rem 0 12.8rem 0;
color: white;
text-align: center;
}
@media (max-width: 991.98px){
.hero-section{
background-size: cover;
background-position: center;
}
}
.hero-section::before{
content:"";
position:absolute;
inset:0;
z-index:1;
box-shadow:
inset 0 280px 380px rgba(0,0,0,.18),
inset 0 -280px 380px rgba(0,0,0,.16),
inset 260px 0 360px rgba(0,0,0,.10),
inset -260px 0 360px rgba(0,0,0,.10);
pointer-events:none;
}
.hero-section::after{
content:"";
position:absolute;
inset:0;
z-index:1;
background:
radial-gradient(circle at 50% 20%, rgba(0, 0, 0, 0.14), transparent 58%);
pointer-events:none;
mix-blend-mode: normal;
}
.hero-inner{ position: relative; z-index: 2; }
.hero-title {
font-size: clamp(2.3rem, 4.0vw, 4.0rem);
font-weight: 760;
margin-bottom: 1.1rem;
line-height: 1.03;
text-shadow: 0 14px 34px rgba(0,0,0,0.30);
letter-spacing: 0.01em;
}
.hero-title .hero-title-mustard{
color: var(--ccva-mustard);
}
.hero-title .hero-title-line2{
display:block;
margin-top:.30em;
opacity:.96;
}
.hero-title .hero-title-du{
font-size:.62em;
font-weight:600;
letter-spacing:0;
}
.hero-title .font-coyote{
font-size:.73em;
letter-spacing:-0.005em;
font-weight:560;
}
.hero-subtitle {
font-size: clamp(1.05rem, 1.4vw, 1.35rem);
font-weight: 300;
max-width: 820px;
margin: 0.2rem auto 1.55rem;
opacity: 0.92;
}
.hero-logo{
display:block;
width: min(180px, 60%);
margin: 0 auto 1.35rem;
opacity: 0.95;
}
.hero-cta{
display:flex;
justify-content:center;
gap:.75rem;
flex-wrap: wrap;
margin-top: 1.35rem;
} .micro-search{
margin-top: 1.65rem;
display:flex;
justify-content:center;
}
.micro-search .searchbox{
width: min(860px, 100%);
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 999px;
padding: .45rem;
display:flex;
gap:0;
align-items:center;
backdrop-filter: blur(10px);
}
.micro-search .searchbox:focus-within{
border-color: rgba(var(--ccva-mustard-rgb), 0.55);
box-shadow: 0 0 0 3px rgba(var(--ccva-mustard-rgb), 0.2);
}
.micro-search input{
flex: 1 1 auto;
background: transparent;
border: none;
color: rgba(255,255,255,0.95);
padding: .55rem .85rem;
font-weight: 500;
outline: none;
min-width: 220px;
}
.micro-search button{
flex: 0 0 auto;
border: none;
background: rgba(0,0,0,0.20);
color: rgba(255,255,255,0.95);
cursor: pointer;
border-radius: 999px;
padding: .62rem 1rem;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
font-size: .78rem;
display:inline-flex;
align-items:center;
gap:.55rem;
transition: transform .25s var(--ease-out), background .25s var(--ease-out);
white-space: nowrap;
}
.micro-search button:hover{
transform: translateY(-1px);
background: rgba(0,0,0,0.28);
}
.micro-chips{
display:flex;
justify-content:center;
gap:.55rem;
flex-wrap: wrap;
margin-top: .75rem;
opacity: .98;
}
.ccva-pill--micro{
padding:.35rem .7rem;
gap:.5rem;
font-weight:800;
font-size:.78rem;
letter-spacing:.3px;
background-color: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.90);
transition: transform .22s var(--ease-out), background-color .22s var(--ease-out), border-color .22s var(--ease-out);
}
.ccva-pill--micro i{ color: rgba(216,171,20,0.95); }
.ccva-pill--micro:hover{
transform: translateY(-1px);
background: rgba(255,255,255,0.14);
border-color: rgba(255,255,255,0.22);
} .tracking-module-wrapper {
margin-top: -6.6rem;
position: relative;
z-index: 10;
padding-bottom: 4.6rem;
}
.orientation-card {
background: transparent;
border: 0;
box-shadow: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.25rem;
}
.orientation-item {
flex: 1;
padding: 3.35rem 2.15rem;
text-align: center;
text-decoration: none;
transition: background 0.3s ease, transform 0.32s var(--ease-out);
position: relative;
min-width: 280px;
background: #fff;
border-radius: var(--radius-xl);
border: 1px solid var(--border-soft);
box-shadow: var(--shadow-lg);
}
.orientation-item:hover {
background-color: #fcfcfc;
transform: translateY(-7px);
}
.orientation-icon {
font-size: 2.9rem;
color: var(--ccva-teal);
margin-bottom: 1.15rem;
transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), color 0.25s ease;
}
.orientation-item:hover .orientation-icon {
transform: translateY(-8px) scale(1.08);
color: var(--ccva-mustard);
}
.orientation-title { color: var(--ccva-dark); font-size: 1.34rem; font-weight: 800; margin-bottom: 0.55rem; letter-spacing: -0.02em; }
.orientation-text { color: #64748b; font-size: 0.96rem; margin: 0; }
@media (min-width: 768px) and (max-width: 991.98px){
.orientation-card{
grid-template-columns: repeat(2, minmax(260px, 1fr));
}
.orientation-card .orientation-item:nth-child(3){
grid-column: 1 / -1;
justify-self: center;
width: min(100%, 520px);
}
}
@media(min-width: 992px){
.orientation-card{
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0;
background: #fff;
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-lg);
overflow: hidden;
}
.orientation-item{
min-width: 0;
border: 0;
border-radius: 0;
box-shadow: none;
background: transparent;
padding: 3.05rem 1.95rem;
}
.orientation-item .orientation-icon{
font-size: 2.95rem;
}
.orientation-item:hover{
transform: none;
background: rgba(0,149,146,0.04);
}
.orientation-item + .orientation-item::before{
content:"";
position:absolute;
left:0;
top:18%;
bottom:18%;
width:1px;
background: linear-gradient(180deg, rgba(2,56,58,0), rgba(2,56,58,0.16) 20%, rgba(2,56,58,0.16) 80%, rgba(2,56,58,0));
}
} .info-strip{
margin-top: 1.35rem;
display:flex;
gap: .9rem;
flex-wrap: wrap;
justify-content: center;
}
.ccva-pill--info{
padding:.65rem 1rem;
gap:.55rem;
font-weight:800;
font-size:.88rem;
}
.ccva-pill--info i{ color: var(--ccva-mustard); }
.ccva-pill--info:hover{
transform: translateY(-2px);
border-color: var(--border-hover);
box-shadow: var(--shadow-md);
} .quick-access-section{
padding: 4.6rem 0 4.9rem;
position: relative;
background-color: #f4f7f6;
}
.quick-access-section::before{
content:"";
position:absolute;
inset: 0;
background:
radial-gradient(circle at 20% 15%, rgba(0,149,146,0.10), transparent 45%),
radial-gradient(circle at 85% 10%, rgba(216,171,20,0.10), transparent 45%);
pointer-events:none;
z-index: 0;
}
.quick-access-section::after{
content:"";
position:absolute;
left:0;
right:0;
top:0;
height: 160px;
background: linear-gradient(180deg, #f4f7f6 0%, rgba(244,247,246,0) 100%);
pointer-events:none;
z-index: 0;
}
.quick-access-section .container{ position:relative; z-index:1; }
.quick-header{ margin-bottom: 2.25rem; }
.quick-kicker{
display: inline-flex;
align-items: center;
gap: .6rem;
color: var(--ccva-mustard);
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 0.8rem;
margin-bottom: .45rem;
}
.quick-title{
font-size: clamp(2.05rem, 2.8vw, 2.85rem);
font-weight: 900;
color: var(--ccva-dark);
margin: 0 0 .7rem 0;
line-height: 1.05;
letter-spacing: -0.04em;
}
.quick-sub{
margin: 0;
color: rgba(15,47,48,.72);
font-size: 1.06rem;
max-width: 900px;
font-weight: 300;
}
.access-card {
background: white;
border-radius: var(--radius-lg);
padding: 2.05rem;
text-align: left;
transition: transform 0.32s var(--ease-out), box-shadow 0.32s var(--ease-out), border-color 0.32s var(--ease-out);
text-decoration: none;
display: block;
height: 100%;
border: 1px solid var(--border-soft);
box-shadow: 0 10px 26px rgba(0,0,0,0.05);
position: relative;
overflow: hidden;
}
.access-card::after{
content:"";
position:absolute;
inset:auto -60px -70px auto;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(0,149,146,0.08);
filter: blur(0px);
transform: rotate(0deg);
pointer-events:none;
}
.access-card:hover {
transform: translateY(-7px);
box-shadow: 0 22px 50px rgba(0,0,0,0.10);
border-color: var(--border-hover);
}
.access-top{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap: 1rem;
margin-bottom: 1.25rem;
}
.access-icobox{
width: 58px;
height: 58px;
border-radius: var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,149,146,.10);
border: 1px solid var(--border-soft);
color: var(--ccva-teal);
transition: 0.3s ease;
flex: 0 0 auto;
}
.access-icobox,
.pluih-iconbox{
--ccva-front-icobox-icon-size: 1.95rem;
font-size: var(--ccva-front-icobox-icon-size);
}
.access-icobox i,
.access-icobox .ccva-icon,
.pluih-iconbox i,
.pluih-iconbox .ccva-icon{
font-size: var(--ccva-front-icobox-icon-size);
width: 1em;
height: 1em;
}
.access-card:hover .access-icobox{
background: rgba(216,171,20,.14);
border-color: var(--border-hover-mustard);
color: var(--ccva-mustard);
transform: translateY(-2px);
}
.ccva-pill--access{
padding:.4rem .75rem;
font-size:.82rem;
}
.ccva-pill--access i,
.ccva-pill--access .ccva-icon{ color: var(--ccva-mustard); }
.access-card h4 { font-size: 1.22rem; color: var(--ccva-dark); margin: 0; font-weight: 900; letter-spacing: -0.02em; }
.access-card p { font-size: 0.98rem; color: #6b7a7a; margin-top: 0.5rem; margin-bottom: 0; font-weight: 400; }
.access-cta{
margin-top: 1.35rem;
padding-top: 1.05rem;
display:flex;
align-items:center;
justify-content:space-between;
gap: 1rem;
}
.access-cta span{
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
font-size: .78rem;
color: rgba(0,72,74,.75);
}
.access-cta .go{
width: 40px;
height: 40px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,72,74,.06);
border: 1px solid var(--border-soft);
color: rgba(0,72,74,.85);
transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
flex: 0 0 auto;
}
.access-card:hover .access-cta .go{
transform: translateX(2px);
background: rgba(0,72,74,.10);
border-color: var(--border-hover);
} .guides-strip{
margin-top: 2.2rem;
background: rgba(255,255,255,0.72);
border: 1px solid var(--border-soft);
border-radius: var(--radius-xl);
padding: 1.25rem 1.25rem;
box-shadow: var(--shadow-sm);
}
.guides-head{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap: 1rem;
margin-bottom: .95rem;
flex-wrap: wrap;
}
.guides-head h3{
margin:0;
font-weight: 900;
color: var(--ccva-dark);
letter-spacing: -0.03em;
font-size: 1.35rem;
}
.guides-head .mini-link{
display:inline-flex;
align-items:center;
gap:.5rem;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
font-size: .78rem;
color: rgba(0,72,74,0.78);
padding:.5rem .8rem;
border-radius: 999px;
background: rgba(0,149,146,0.08);
border: 1px solid rgba(0,149,146,0.18);
transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
white-space: nowrap;
}
.guides-head .mini-link i{ color: var(--ccva-teal); }
.guides-head .mini-link:hover{
transform: translateY(-2px);
background: rgba(216,171,20,0.12);
border-color: rgba(216,171,20,0.24);
}
.guide-chip{
display:flex;
align-items:center;
justify-content:space-between;
gap: .9rem;
padding: .95rem 1rem;
background: rgba(255,255,255,0.92);
border: 1px solid var(--border-soft);
border-radius: 14px;
transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s var(--ease-out);
height: 100%;
}
.guide-chip:hover{
transform: translateY(-3px);
box-shadow: var(--shadow-md);
border-color: var(--border-hover);
}
.guide-left{
display:flex;
align-items:center;
gap:.9rem;
min-width: 0;
}
.guide-ico{
width: 44px;
height: 44px;
border-radius: 12px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,149,146,0.10);
border: 1px solid var(--border-soft);
color: var(--ccva-teal);
flex: 0 0 auto;
}
.guide-ico i{ font-size: 1.25rem; }
.guide-text{
min-width: 0;
}
.guide-text .t{
margin:0;
font-weight: 900;
color: rgba(0,72,74,0.92);
letter-spacing: -0.02em;
font-size: 1rem;
}
.guide-text .s{
margin: .15rem 0 0;
color: rgba(15,47,48,0.68);
font-weight: 400;
font-size: .92rem;
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
.guide-go{
width: 38px;
height: 38px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,72,74,0.06);
border: 1px solid var(--border-soft);
color: rgba(0,72,74,0.88);
flex: 0 0 auto;
transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.guide-chip:hover .guide-go{
transform: translateX(2px);
background: rgba(0,72,74,0.10);
border-color: var(--border-hover);
}   .pluih-section{
position: relative;
overflow: hidden;
color: rgba(255,255,255,0.92);
padding: 6.8rem 0 6.0rem;
background-image:
linear-gradient(135deg, rgba(0,149,146,0.92), rgba(0,50,51,0.92)),
url(//urba.cc-valdeaisne.fr/wp-content/themes/ccva-v2/img/bg-section-pluih.webp),
radial-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
radial-gradient(rgba(216,171,20,0.10) 1px, transparent 1px);
background-size: 260% 260%, cover, 36px 36px, 22px 22px;
background-position: 0% 0%, center, 0 0, 12px 12px;
background-repeat: no-repeat, no-repeat, repeat, repeat;
background-attachment: scroll, fixed, scroll, scroll;
animation: pluih-bg-shift 9s ease-in-out infinite;
}
.pluih-section::before{
content:"";
position:absolute;
inset: 0;
background:
linear-gradient(120deg, rgba(0,149,146,0.28) 0%, rgba(0,50,51,0.34) 45%, rgba(216,171,20,0.28) 100%);
background-size: 240% 240%;
pointer-events:none;
transform-origin:center;
animation: pluih-overlay 8s ease-in-out infinite;
mix-blend-mode: soft-light;
}
.pluih-section::after{
content:"";
position:absolute;
top:-280px;
left:-280px;
width:680px;
height:680px;
background: rgba(216,171,20,0.22);
filter: blur(76px);
border-radius: 50%;
pointer-events:none;
opacity: .95;
animation: pluih-glow 12s ease-in-out infinite;
} .pluih-divider{
position:absolute;
left:0;
right:0;
bottom:-1px;
height: 62px;
##background: linear-gradient(180deg, rgba(244,247,246,0) 0%, rgba(244,247,246,1) 100%);
pointer-events:none;
}
.pluih-wrap{ position: relative; z-index: 2; }
.pluih-head{
margin: 0 auto 6rem;
max-width: 980px;
text-align:center;
}
.pluih-kicker{
display:inline-flex;
align-items:center;
gap:.55rem;
padding: 0;
border-radius: 0;
background: none;
border: 0;
color: var(--ccva-mustard);
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
font-size: 2rem;
}
.pluih-title{
margin: 1rem auto .7rem;
font-size: clamp(2.7rem, 4.6vw, 3.8rem);
font-weight: 900;
line-height: 1.05;
color: #ffffff;
letter-spacing: -0.04em;
text-shadow: 0 16px 36px rgba(0,0,0,0.25);
display:flex;
align-items:center;
justify-content:center;
gap:1rem;
text-align:center;
flex-wrap:wrap;
}
.pluih-title::before,
.pluih-title::after{
content:"";
flex:1 1 120px;
height:3px;
border-radius:999px;
background:linear-gradient(90deg, rgba(216,171,20,0.8), rgba(255,255,255,0.25));
}
.pluih-title::after{
background:linear-gradient(90deg, rgba(255,255,255,0.25), rgba(216,171,20,0.8));
}
.pluih-subtitle{
margin: 0;
font-size: 1.08rem;
color: rgba(255,255,255,0.86);
font-weight: 400;
}
.pluih-punch{
font-weight: 900;
letter-spacing: -0.01em;
color: rgba(0,50,51,0.98);
display: inline-block;
padding: 0 .4rem;
border-radius: 10px;
background: rgba(216,171,20,0.95);
border: 1px solid rgba(216,171,20,0.55);
box-shadow: 0 14px 34px rgba(0,0,0,0.18);
}
.pluih-subtitle em{
font-style: normal;
font-weight: 900;
color: rgba(255,255,255,0.96);
}
.pluih-actions{
margin-top: 1.25rem;
display:flex;
gap:.7rem;
flex-wrap: wrap;
justify-content:center;
}
.pluih-btn{
display:inline-flex;
align-items:center;
gap:.55rem;
padding: .75rem 1.05rem;
border-radius: 999px;
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.18);
color: rgba(255,255,255,0.92);
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
font-size: .78rem;
transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
white-space: nowrap;
}
@keyframes pluih-bg-shift{
0%{
background-position:0% 0%, center, 0 0, 12px 12px;
background-size:260% 260%, cover, 36px 36px, 22px 22px;
}
50%{
background-position:100% 100%, center, 18px 18px, 0 0;
background-size:300% 300%, cover, 36px 36px, 22px 22px;
}
100%{
background-position:0% 0%, center, 0 0, 12px 12px;
background-size:260% 260%, cover, 36px 36px, 22px 22px;
}
}
@keyframes pluih-glow{
0%{transform:translate(0,0); opacity:.75}
50%{transform:translate(80px, 40px); opacity:1}
100%{transform:translate(0,0); opacity:.75}
}
@keyframes pluih-overlay{
0%{background-position:0% 50%; transform:scale(1); opacity:.8}
50%{background-position:100% 50%; transform:scale(1.16); opacity:1}
100%{background-position:0% 50%; transform:scale(1); opacity:.8}
}
@media(max-width: 768px){
.pluih-title::before,
.pluih-title::after{
flex:1 1 40px;
}}
.pluih-btn i{ color: var(--ccva-mustard); }
.pluih-btn.primary{
background: rgba(216,171,20,0.95);
color: rgba(0,50,51,0.96);
border-color: rgba(216,171,20,0.55);
box-shadow: 0 12px 28px rgba(0,0,0,0.20);
}
.pluih-btn.primary i{ color: rgba(0,50,51,0.92); }
.pluih-btn:hover{
transform: translateY(-2px);
background: rgba(255,255,255,0.16);
border-color: rgba(255,255,255,0.26);
}
.pluih-btn.primary:hover{
background: rgba(241,196,15,1);
border-color: rgba(241,196,15,0.60);
}
.pluih-grid{
display: grid;
grid-template-columns: 1fr;
gap: 1.75rem;
align-items: start;
margin-top: 1.15rem;
}
@media(min-width: 992px){
.pluih-grid{
grid-template-columns: 1fr 2fr;
gap: 2.4rem;
align-items: stretch;
}
.pluih-content{
min-height: auto;
align-content: start;
align-self: center;
}
}
.pluih-sideblock{
position:relative;
padding: 1.1rem 1.25rem 1.35rem;
border-radius: var(--radius-xl);
border: 1px solid rgba(255,255,255,0.16);
background: linear-gradient(180deg, rgba(0,0,0,0.14), rgba(0,0,0,0.06));
box-shadow: 0 18px 44px rgba(0,0,0,0.20);
overflow:hidden;
}
.pluih-sideblock::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(circle at 18% 14%, rgba(216,171,20,0.16), transparent 48%),
linear-gradient(90deg, rgba(216,171,20,0.22), rgba(216,171,20,0));
opacity:.55;
}
.pluih-sideblock > *{
position:relative;
z-index:1;
}
.pluih-tags{
display:flex;
gap:.55rem;
flex-wrap: wrap;
margin-bottom: .95rem;
}
.pluih-tag{
display:inline-flex;
align-items:center;
gap:.5rem;
padding: 0;
border-radius: 0;
background: none;
border: 0;
color: var(--ccva-mustard);
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
font-size: .82rem;
white-space: nowrap;
}
.pluih-intro-title{
margin: 0 0 .55rem;
font-size: 2.0rem;
line-height: 1.05;
font-weight: 900;
color: rgba(255,255,255,0.96);
letter-spacing: -0.03em;
}
.pluih-intro-text{
margin: 0 0 1.05rem;
color: rgba(255,255,255,0.84);
font-weight: 400;
font-size: 1.02rem;
}
.pluih-callout{
margin: 1rem 0 1.15rem;
padding: .95rem 1rem;
border-radius: 14px;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(0,0,0,0.12);
color: rgba(255,255,255,0.88);
font-weight: 400;
}
.pluih-callout strong{ font-weight: 900; color: rgba(255,255,255,0.96); }
.pluih-callout i{ color: rgba(216,171,20,0.95); margin-right: .5rem; } .timeline{
list-style: none;
padding: 0;
margin: .2rem 0 0;
position: relative;
}
.timeline::before{
content:"";
position:absolute;
top: 6px;
left: 14px;
width: 2px;
height: calc(100% - 6px);
background: rgba(255,255,255,0.18);
}
.timeline li{
position: relative;
padding-left: 44px;
padding-bottom: 1.05rem;
}
.timeline li:last-child{ padding-bottom: 0; }
.timeline li::before{
content:"";
position:absolute;
top: 4px;
left: 6px;
width: 16px;
height: 16px;
border-radius: 50%;
background: rgba(0,50,51,0.95);
border: 3px solid rgba(255,255,255,0.45);
box-shadow: 0 0 0 4px rgba(0,0,0,0.12);
}
.timeline li.done::before{
background: var(--ccva-teal);
border-color: rgba(255,255,255,0.55);
box-shadow: 0 0 0 4px rgba(0,149,146,0.22);
}
.timeline li.active:not(.final)::before{
background: var(--ccva-mustard);
border-color: rgba(255,255,255,0.60);
box-shadow: 0 0 0 4px rgba(216,171,20,0.22);
animation: timeline-pulse 2.6s ease-in-out infinite;
}
.timeline li.final::before{
background: var(--ccva-danger);
border-color: rgba(255,255,255,0.60);
box-shadow: 0 0 0 4px rgba(178,58,58,0.22);
animation:none;
}
.timeline-title{
font-weight: 900;
color: rgba(255,255,255,0.95);
font-size: 1.02rem;
line-height: 1.25;
margin: 0;
}
.timeline-date{
display:block;
font-size: .82rem;
font-weight: 800;
color: rgba(255,255,255,0.78);
letter-spacing: .02em;
margin-top: .12rem;
}
.timeline li.done .timeline-title,
.timeline li.done .timeline-date{
opacity:.72;
}
.timeline li.upcoming .timeline-title,
.timeline li.upcoming .timeline-date{
opacity:.6;
}
@keyframes timeline-pulse{
0%{box-shadow: 0 0 0 4px rgba(216,171,20,0.22)}
50%{box-shadow: 0 0 0 10px rgba(216,171,20,0.12)}
100%{box-shadow: 0 0 0 4px rgba(216,171,20,0.22)}
}
.pluih-content{
display:grid;
grid-template-columns: 1fr;
gap: 1.35rem;
}
@media(min-width: 768px){
.pluih-content{
grid-template-columns: repeat(2, 1fr);
gap: 1.45rem;
}
.pluih-card.large{ grid-column: span 2; }}
@media(max-width: 991.98px){
.pluih-sideblock{
padding: 0 1.15rem 1.25rem;
border: 0;
background: transparent;
box-shadow: none;
}
.pluih-sideblock::before{
display:none;
}
}
.pluih-card{
background: rgba(255,255,255,0.96);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-xl);
box-shadow: 0 20px 52px rgba(0,0,0,0.22);
padding: 2rem;
color: var(--ccva-darker);
display:flex;
flex-direction: column;
justify-content: space-between;
position: relative;
overflow: hidden;
transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s var(--ease-out);
min-height: 225px;
}
.pluih-content .pluih-card{
min-height: 225px;
padding: 2rem;
background: rgba(255,255,255,0.96);
border-color: rgba(255,255,255,0.18);
box-shadow: 0 20px 52px rgba(0,0,0,0.22);
color: var(--ccva-darker);
}
.pluih-content .pluih-card::before{
content:none;
}
.pluih-content .pluih-card > *{
position:relative;
z-index:1;
}
.pluih-content .pluih-card:nth-child(2){
background: rgba(255,255,255,0.96);
}
.pluih-content .pluih-card:nth-child(3){
background: rgba(255,255,255,0.96);
}
.pluih-card::after{
content:"";
position:absolute;
right:-70px;
bottom:-70px;
width: 180px;
height: 180px;
border-radius: 50%;
background: rgba(0,149,146,0.08);
pointer-events:none;
}
.pluih-card:hover{
transform: translateY(-7px);
box-shadow: 0 30px 80px rgba(0,0,0,0.32);
border-color: rgba(0,149,146,0.35);
}
.pluih-card.large{
border-left: 6px solid var(--ccva-mustard);
padding: 2.2rem 2.35rem;
box-shadow: 0 22px 60px rgba(0,0,0,0.26);
}
.pluih-content .pluih-card.large{
min-height: 225px;
padding: 2.2rem 2.35rem;
border-left: 6px solid var(--ccva-mustard);
background: rgba(255,255,255,0.96);
box-shadow: 0 22px 60px rgba(0,0,0,0.26);
}
.pluih-content .pluih-card.large::before{
content:none;
}
.pluih-card.large .pluih-cta{
border-top: 0;
padding-top: 0;
margin-top: 1.4rem;
justify-content: space-between;
}
.pluih-card.large .pluih-cta span{
background: var(--ccva-darker);
color: var(--ccva-white);
padding: .55rem 1.1rem;
border-radius: .6rem;
letter-spacing: .5px;
}
.pluih-card.large .pluih-cta .go{
background: rgba(var(--ccva-darker-rgb), .08);
border-color: rgba(var(--ccva-darker-rgb), .18);
}
.pluih-iconbox{
width: 52px;
height: 52px;
border-radius: var(--radius-md);
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,149,146,0.10);
border: 1px solid var(--border-soft);
color: var(--ccva-teal);
transition: .25s var(--ease-out);
margin-bottom: 1.1rem;
flex: 0 0 auto;
}
.pluih-content .pluih-card .pluih-iconbox{
background: rgba(0,149,146,0.10);
border-color: var(--border-soft);
color: var(--ccva-teal);
}
.pluih-card:hover .pluih-iconbox{
transform: translateY(-2px);
background: rgba(216,171,20,0.14);
border-color: var(--border-hover-mustard);
color: var(--ccva-mustard);
}
.pluih-card h3{
margin: 0 0 .55rem;
font-weight: 900;
color: rgba(0,72,74,0.98);
letter-spacing: -0.02em;
}
.pluih-content .pluih-card h3{
color: rgba(0,72,74,0.98);
text-shadow: none;
}
.pluih-card p{
margin: 0;
font-size: 1.02rem;
font-weight: 500;
color: rgba(15,47,48,0.86);
line-height: 1.5;
}
.pluih-content .pluih-card p{
color: rgba(15,47,48,0.86);
}
.pluih-cta{
margin-top: 1.2rem;
padding-top: 1.05rem;
display:flex;
align-items:center;
justify-content: space-between;
gap: 1rem;
}
.pluih-cta span{
font-weight: 900;
letter-spacing: 2px;
text-transform: uppercase;
font-size: .82rem;
color: rgba(0,72,74,.82);
}
.pluih-content .pluih-card .pluih-cta span{
color: rgba(0,72,74,.82);
}
.pluih-content .pluih-card.large .pluih-cta span{
background: var(--ccva-darker);
color: var(--ccva-white);
padding: .55rem 1.1rem;
border-radius: .6rem;
letter-spacing: .5px;
}
.pluih-cta .go{
width: 42px;
height: 42px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(0,72,74,0.06);
border: 1px solid rgba(0,0,0,0.06);
color: rgba(0,72,74,0.88);
transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
flex: 0 0 auto;
}
.pluih-content .pluih-card .pluih-cta .go{
background: rgba(0,72,74,0.06);
border-color: rgba(0,0,0,0.06);
color: rgba(0,72,74,0.88);
}
.pluih-card:hover .pluih-cta .go{
transform: translateX(2px);
background: rgba(0,72,74,0.10);
border-color: rgba(0,149,146,0.22);
}
.pluih-content .pluih-card:hover{
border-color: rgba(0,149,146,0.35);
}
.pluih-content .pluih-card:hover .pluih-cta .go{
background: rgba(0,72,74,0.10);
border-color: rgba(0,149,146,0.22);
color: rgba(0,72,74,0.88);
} .pluih-faq{
margin-top: 2.65rem;
border-top: 1px solid rgba(255,255,255,0.14);
padding-top: 2.2rem;
}
.pluih-faq-head{
display:flex;
align-items:end;
justify-content:space-between;
gap: 1rem;
margin-bottom: 1.25rem;
flex-wrap: wrap;
}
.pluih-faq-head h3{
margin:0;
font-weight: 900;
color: rgba(255,255,255,0.96);
letter-spacing: -0.02em;
font-size: 1.55rem;
}
.faq-pill{
display:inline-flex;
align-items:center;
gap:.55rem;
padding: 0;
border-radius: 0;
background: none;
border: 0;
color: var(--ccva-mustard);
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
font-size: .78rem;
white-space: nowrap;
}
.faq-grid{
display:grid;
grid-template-columns: 1fr;
gap: 1rem;
align-items: start;
}
@media(min-width: 992px){
.faq-grid{ grid-template-columns: 1fr 1fr 1fr; gap: 1.15rem; }}
details.faq-item{
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.16);
border-radius: var(--radius-xl);
padding: 1rem 1.1rem;
align-self: start;
backdrop-filter: blur(10px);
box-shadow: 0 18px 44px rgba(0,0,0,0.18);
transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
}
details.faq-item:hover{
transform: translateY(-2px);
background: rgba(255,255,255,0.10);
border-color: rgba(255,255,255,0.22);
}
details.faq-item summary{
cursor: pointer;
list-style: none;
display:flex;
align-items:center;
justify-content:space-between;
gap: .9rem;
font-weight: 900;
color: rgba(255,255,255,0.94);
letter-spacing: -0.02em;
font-size: 1rem;
}
details.faq-item summary::-webkit-details-marker { display:none; }
.faq-ico{
width: 42px;
height: 42px;
border-radius: 12px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(216,171,20,0.16);
border: 1px solid rgba(216,171,20,0.22);
color: rgba(216,171,20,0.95);
flex: 0 0 auto;
}
.faq-arrow{
width: 36px;
height: 36px;
border-radius: 999px;
display:flex;
align-items:center;
justify-content:center;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.14);
color: rgba(255,255,255,0.92);
flex: 0 0 auto;
transition: transform .22s var(--ease-out);
}
details[open] .faq-arrow{ transform: rotate(180deg); }
.faq-body{
margin-top: .8rem;
color: rgba(255,255,255,0.84);
font-weight: 400;
font-size: .98rem;
line-height: 1.55;
}
details.faq-item .faq-body{
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height .35s var(--ease-out), opacity .2s var(--ease-out);
}
details.faq-item[open] .faq-body{
max-height: 400px;
opacity: 1;
} .pluih-news{
position: relative;
z-index: 2;
margin-top: 2.9rem;
padding-top: 2.35rem;
border-top: 1px solid rgba(255,255,255,0.14);
}
.pluih-news .post-meta{
position:absolute;
top:18px;
right:12px;
left:auto;
z-index:2;
}
.pluih-news-head{
display:flex;
align-items: end;
justify-content: space-between;
gap: 1rem;
margin-bottom: 1.45rem;
flex-wrap: wrap;
}
.pluih-news-head h3{
margin: 0;
font-weight: 900;
color: rgba(255,255,255,0.96);
letter-spacing: -0.02em;
font-size: 1.55rem;
}
.pluih-news-btn{
display:inline-flex;
align-items:center;
gap:.55rem;
padding: .65rem 1.05rem;
border-radius: 999px;
background: rgba(255,255,255,0.10);
border: 1px solid rgba(255,255,255,0.16);
color: rgba(255,255,255,0.92);
font-weight: 900;
text-decoration: none;
transition: transform .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
white-space: nowrap;
}
.pluih-news-btn i{ color: var(--ccva-mustard); }
.pluih-news-btn:hover{
transform: translateY(-2px);
background: rgba(216,171,20,0.18);
border-color: rgba(216,171,20,0.30);
color: rgba(255,255,255,0.96);
}
.news-grid{
display:grid;
grid-template-columns: 1fr;
gap: 1.35rem;
}
@media(min-width: 992px){
.news-grid{
grid-template-columns: repeat(3, 1fr);
}}
.news-card{
background: rgba(255,255,255,0.96);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-xl);
overflow:hidden;
box-shadow: 0 20px 52px rgba(0,0,0,0.22);
display:block;
transition: transform .32s var(--ease-out), box-shadow .32s var(--ease-out), border-color .32s var(--ease-out);
}
.news-card:hover{
transform: translateY(-7px);
box-shadow: 0 30px 80px rgba(0,0,0,0.32);
border-color: rgba(0,149,146,0.32);
}
.news-image{
height: 170px;
background-size: cover;
background-position: center;
position: relative;
}
.news-image::after{
content:"";
position:absolute;
inset:0;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.10) 100%);
pointer-events:none;
}
.news-body{
padding: 1.35rem 1.35rem 1.45rem;
}
.news-body h4{
margin: 0 0 .5rem;
font-size: 1.15rem;
font-weight: 900;
color: rgba(0,72,74,0.96);
letter-spacing: -0.02em;
}
.news-body p{
margin: 0;
color: rgba(15,47,48,0.78);
font-weight: 500;
font-size: 0.98rem;
line-height: 1.5;
}
.news-link{
margin-top: .95rem;
display:inline-flex;
align-items:center;
gap:.5rem;
font-weight: 900;
letter-spacing: 1px;
text-transform: uppercase;
font-size: .78rem;
color: rgba(0,72,74,0.86);
}
.news-card:hover .news-link{ color: var(--ccva-teal); } .map-section {
background:
linear-gradient(180deg, #f7fbfb 0%, #f3f7f7 100%);
padding: 6.2rem 0 6.1rem;
position: relative;
overflow: hidden;
}
.map-section::before{
content:"";
position:absolute;
inset:0;
background:
radial-gradient(560px 380px at 10% 16%, rgba(63,127,134,.14), transparent 62%),
radial-gradient(480px 320px at 88% 18%, rgba(216,171,20,.12), transparent 64%),
radial-gradient(520px 360px at 54% 88%, rgba(0,149,146,.08), transparent 66%);
pointer-events:none;
}
.map-section::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
repeating-linear-gradient(
-35deg,
rgba(255,255,255,.14) 0 12px,
rgba(255,255,255,0) 12px 24px
);
opacity:.26;
mix-blend-mode:soft-light;
}
.map-section .container{
position:relative;
z-index:2;
max-width:1240px;
}
.section-header { text-align: center; margin-bottom: 2.45rem; }
.section-overline { color: var(--ccva-teal); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 0.8rem; display: inline-flex; align-items:center; gap:.5rem; margin-bottom: 1rem; }
.section-overline i{ color: var(--ccva-mustard); }
.section-title { color: var(--ccva-dark); font-size: clamp(2.05rem, 2.7vw, 2.7rem); font-weight: 900; letter-spacing: -0.04em; }
.section-subtitle{
margin:1rem 0 0;
max-width:860px;
color:rgba(15,47,48,.68);
font-size:1.08rem;
line-height:1.65;
font-weight:500;
text-align:left;
}
.map-layout{
display:grid;
grid-template-columns:minmax(0, 1.12fr) minmax(360px, 1fr);
gap:0;
align-items:stretch;
padding:1.4rem;
border:0;
border-radius:0;
background:transparent;
box-shadow:none;
overflow:hidden;
}
.map-wrapper {
border-radius:0;
overflow: hidden;
position: relative;
height:100%;
min-height:500px;
background: transparent;
border:0;
}
.map-wrapper::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(420px 260px at 22% 14%, rgba(255,255,255,.42), rgba(255,255,255,0) 70%);
mix-blend-mode:screen;
opacity:.6;
}
.map-wrapper img{ filter: saturate(1.05) contrast(1.02); }
.map-wrapper .ccva-map-svg{
display:block;
width:92%;
height:84%;
margin:0 auto;
max-width:none;
background:transparent;
filter:drop-shadow(0 1px 2px rgba(7,38,39,.18));
}
.map-wrapper .ccva-map-svg text{
font-family:'Outfit', sans-serif !important;
font-weight:700;
}
.map-wrapper .ccva-map-svg #qgisviewbox{
display:none;
}
.map-wrapper .ccva-map-svg .ccva-map-commune{
cursor:pointer;
transition:transform .15s ease;
transform-origin:center;
transform-box:fill-box;
}
.map-legend{
position:absolute;
left:14px;
bottom:22px;
z-index:5;
max-width:min(86%, 360px);
padding:.52rem .66rem .48rem;
border-radius:12px;
border:1px solid rgba(255,255,255,.45);
background:linear-gradient(180deg, rgba(10,48,49,.88), rgba(8,38,39,.88));
color:#fff;
backdrop-filter:blur(3px);
}
.map-legend__title{
margin:0 0 .32rem;
font-size:.76rem;
font-weight:900;
text-transform:uppercase;
letter-spacing:.08em;
color:rgba(255,255,255,.94);
}
.map-legend__line{
display:flex;
align-items:center;
gap:.5rem;
}
.map-legend__swatch{
width:12px;
height:12px;
border-radius:2px;
background:#3f7f86;
border:1px solid rgba(255,255,255,.65);
box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);
flex:0 0 auto;
}
.map-legend__text{
margin:0;
font-size:.77rem;
font-weight:700;
line-height:1.2;
color:rgba(255,255,255,.94);
}
.map-legend__hint{
margin:.4rem 0 0;
font-size:.71rem;
font-weight:600;
line-height:1.2;
color:rgba(255,255,255,.78);
}
.map-side{
border-left:1px solid rgba(0,72,74,.10);
background:transparent;
min-height:100%;
padding:.95rem .9rem;
display:flex;
flex-direction:column;
gap:1rem;
}
.map-side__head{
padding:.1rem .2rem 0;
}
.map-side__title{
margin:0;
color:var(--ccva-dark);
font-size:clamp(1.15rem, 1.2vw, 1.45rem);
font-weight:900;
letter-spacing:-.02em;
line-height:1.15;
}
.map-side__intro{
margin:.45rem 0 0;
color:rgba(15,47,48,.66);
font-size:.9rem;
line-height:1.42;
}
.city-signs-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:.72rem;
align-content:start;
}
.city-sign{
display:flex;
align-items:center;
justify-content:center;
min-height:38px;
padding:.2rem .34rem;
border:2px solid #b81616;
border-radius:6px;
background:#fff;
background-clip:padding-box;
color:#111;
text-align:center;
text-transform:uppercase;
letter-spacing:.055em;
font-weight:700;
font-size:.78rem;
line-height:1.04;
cursor:pointer;
box-shadow:0 4px 10px rgba(5,27,28,.08);
transition:box-shadow .2s ease, transform .2s ease;
}
.city-sign:hover,
.city-sign.is-active{
box-shadow:
inset 0 0 0 2px rgba(255,255,255,.55),
inset 0 -12px 18px rgba(0,0,0,.22),
inset 0 10px 12px rgba(255,255,255,.26);
transform:translateY(-1px) scale(1.08);
}
.map-wrapper .ccva-map-svg .ccva-map-commune path{
transition:fill .15s ease, stroke .15s ease, stroke-width .15s ease, opacity .15s ease;
}
.map-wrapper .ccva-map-svg .ccva-map-commune.is-active{
transform:scale(1.09);
}
.map-wrapper .ccva-map-svg .ccva-map-commune.is-active path{
stroke:var(--ccva-mustard);
stroke-width:2.5;
opacity:.96;
}
.ccva-map-tooltip{
position:absolute;
left:0;
top:0;
transform:translate(-50%, calc(-100% - 10px));
pointer-events:none;
z-index:6;
background:rgba(6,39,40,.94);
color:#fff;
border:1px solid rgba(255,255,255,.15);
border-radius:12px;
padding:.42rem .76rem;
font-weight:800;
font-size:.8rem;
line-height:1.2;
box-shadow:0 14px 28px rgba(3,25,26,.28);
white-space:nowrap;
backdrop-filter:blur(3px);
}
.ccva-map-tooltip::after{
content:"";
position:absolute;
left:50%;
bottom:-6px;
width:10px;
height:10px;
background:rgba(6,39,40,.94);
border-right:1px solid rgba(255,255,255,.12);
border-bottom:1px solid rgba(255,255,255,.12);
transform:translateX(-50%) rotate(45deg);
} @media(max-width: 992px){
.hero-section{ background-attachment: scroll; }
.pluih-section{ background-attachment: scroll, scroll, scroll, scroll; }
.map-layout{ grid-template-columns:1fr; }
.map-side{
min-height:170px;
border-left:0;
border-top:1px solid rgba(0,0,0,.08);
}
.city-signs-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 767.98px) {
.tracking-module-wrapper{ margin-top: -6.2rem; padding-bottom: 4.2rem; }
.orientation-card{ grid-template-columns: 1fr; }
.orientation-item{
min-width: 0;
width: min(100%, 560px);
margin-inline: auto;
padding: 2.6rem 1.6rem;
}
.map-wrapper{ height: 480px; min-height:0; }
.map-legend{ max-width:92%; }
.map-side{ min-height:120px; padding:.95rem .85rem; }
.city-signs-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 420px){
.micro-search .searchbox{ border-radius: 18px; padding: .55rem; flex-wrap: wrap; }
.micro-search input{ width: 100%; padding: .65rem .85rem; }
.micro-search button{ width: 100%; justify-content:center; }}