/* =============================================================================
DECIM — Couche responsive + rafraîchissement visuel (SITE COMPLET)
Chargée APRÈS style.css : surcharge sans toucher au build SCSS.
Rollback : retirer le de decim-ui.css dans parts/header.php.
N'est PAS chargée sur le board (admin) → le back-office reste inchangé.
---------------------------------------------------------------------------
Système :
• BLEU = structure (nav, liens, bordures, titres)
• VERT→BLEU (dégradé du logo) = accent répété (CTA, bandeaux, accents)
• INDIGO #18174f = encre profonde des titres
• ÉTINCELLE #f8ed39 = signal ponctuel
Breakpoints : mobile < 600 | tablette 600–1023 | desktop ≥ 1024
============================================================================= */
:root{
--decim-blue: #1363aa;
--decim-blue-strong: #0f4f88;
--decim-indigo: #18174f;
--decim-spark: #f8ed39;
--decim-line: #e6edf5;
--decim-tint: #f3f8fd;
--decim-surface-2: #f5f7fa;
/* Dégradés issus des couleurs réelles du logo (compatibles tous navigateurs) */
--grad-primary: linear-gradient(120deg, #239947 0%, #2c8177 42%, #34679a 100%);
--grad-secondary: linear-gradient(120deg, #34679a 0%, #2b376f 58%, #18174f 100%);
--decim-ease: cubic-bezier(.22,1,.36,1);
}
/* =============================================================================
BASE
============================================================================= */
body{
background:radial-gradient(120% 50% at 50% -8%, rgba(47,119,132,.10), transparent 60%) no-repeat;
font-size:clamp(14px,.9rem + .2vw,16px); line-height:1.55;
}
a:focus-visible,
button:focus-visible,
.form-control:focus-visible,
[tabindex]:focus-visible{ outline:2px solid var(--decim-blue); outline-offset:2px; border-radius:4px; }
.title-h2::before{ background:var(--grad-primary); height:3px; border-radius:3px; }
.title-h2-o{ color:var(--decim-indigo); }
/* =============================================================================
BOUTONS
============================================================================= */
.btn-primary,.btn-secondary{
padding:14px 20px; border-radius:8px; line-height:1.1; min-height:44px; gap:.6em;
}
.btn-primary i,.btn-secondary i{ line-height:1; }
.userNavigation .btn-primary,.userNavigation .btn-secondary{ padding:10px 16px; font-size:.92rem; min-height:40px; }
.btn-primary{
background:var(--grad-primary);
background-size:170% 100%; background-position:0 0;
transition:background-position .5s var(--decim-ease), box-shadow .2s var(--decim-ease), transform .2s var(--decim-ease);
}
.btn-primary:hover,.btn-primary:focus{
background-position:100% 0; transform:translateY(-1px); box-shadow:0 6px 18px rgba(19,99,170,.28);
}
.btn-secondary{
border:1px solid transparent; color:var(--decim-indigo);
background:linear-gradient(#fff,#fff) padding-box, var(--grad-secondary) border-box;
}
.btn-secondary:hover,.btn-secondary:focus{
color:var(--decim-indigo);
background:linear-gradient(var(--decim-tint),var(--decim-tint)) padding-box, var(--grad-secondary) border-box;
}
/* =============================================================================
BANDEAU DE PAGE (page-header) — sur toutes les pages internes
============================================================================= */
.page-header{
position:relative; overflow:hidden;
background:var(--grad-primary);
padding:clamp(1.75rem,1rem + 3vw,2.75rem) 0;
}
.page-header::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:radial-gradient(120% 130% at 88% -30%, rgba(255,255,255,.18), transparent 55%);
}
.page-header > .container{ position:relative; z-index:1; }
.page-header .page-title{
font-size:clamp(1.6rem,1.1rem + 2.4vw,2.5rem); font-weight:800; letter-spacing:-.01em;
}
.page-header .breadcrumblist{ font-size:.92rem; opacity:.95; }
/* =============================================================================
HEADER + NAVIGATION
============================================================================= */
.header{ position:sticky; top:0; z-index:1002; background:#fff; }
.header-menuBox{ box-shadow:none; }
.header__actions{ display:flex; align-items:center; gap:12px; }
.header-menuBox .header-menu>li>a{ position:relative; }
.header-menuBox .header-menu>li>a.active,
.header-menuBox .header-menu>li:hover>a{ color:var(--decim-blue-strong); border-bottom-color:transparent; background:transparent; }
.header-menuBox .header-menu>li>a::after{
content:""; position:absolute; left:15px; right:15px; bottom:0; height:3px;
border-radius:3px 3px 0 0; background:var(--grad-primary);
transform:scaleX(0); transform-origin:left; transition:transform .25s var(--decim-ease);
}
.header-menuBox .header-menu>li>a.active::after,
.header-menuBox .header-menu>li:hover>a::after{ transform:scaleX(1); }
.banner__avertissement{ background:#fff8e6; border-bottom-color:#f3e2b0; }
/* Hamburger (CSS pur) + overlay — cachés en desktop */
.nav-toggle{
display:none; align-items:center; justify-content:center;
width:46px; height:46px; padding:0; border:none; cursor:pointer;
background:var(--decim-blue); color:#fff; border-radius:9px;
}
.nav-toggle .bars{ position:relative; width:20px; height:14px; }
.nav-toggle .bars span{ position:absolute; left:0; height:2px; width:100%; background:#fff; border-radius:2px; transition:.25s var(--decim-ease); }
.nav-toggle .bars span:nth-child(1){ top:0; }
.nav-toggle .bars span:nth-child(2){ top:6px; }
.nav-toggle .bars span:nth-child(3){ top:12px; }
.nav-open .nav-toggle .bars span:nth-child(1){ top:6px; transform:rotate(45deg); }
.nav-open .nav-toggle .bars span:nth-child(2){ opacity:0; }
.nav-open .nav-toggle .bars span:nth-child(3){ top:6px; transform:rotate(-45deg); }
.menu-backdrop{ display:none; }
/* =============================================================================
HERO (accueil)
============================================================================= */
.homeSwipper{ border-radius:18px; overflow:hidden; box-shadow:0 10px 30px rgba(19,99,170,.14); }
.homeSwipper-img{ padding-top:0; }
.homeSwipper-img img{ position:static; width:100%; height:auto; aspect-ratio:21/9; border-radius:0; }
.homeSwipper-img::after{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(to top, rgba(24,23,79,.55) 0%, rgba(24,23,79,0) 45%);
}
.homeSwipper-img .composante{
left:clamp(1rem,4vw,2.25rem); right:clamp(1rem,4vw,2.25rem);
bottom:clamp(1.25rem,4vw,2.25rem); z-index:2;
}
/* badge en pastille (sélecteur complet pour battre la spécificité du base) */
.homeSwipper-img .composante .composant-number{
display:inline-flex; align-items:center; gap:.5em;
background:var(--grad-primary); color:#fff; border-radius:999px;
padding:.5em .9em; letter-spacing:.06em; text-transform:uppercase;
font-size:clamp(.7rem,.65rem + .3vw,.85rem);
}
/* titre : texte blanc sur l'image (suppression de la boîte blanche du base) */
.homeSwipper-img .composante .composant-title{
background:transparent; color:#fff; display:block; max-width:min(90%,680px);
padding:0; margin-top:.7rem; font-weight:800; line-height:1.18;
font-size:clamp(1.05rem,.8rem + 2.4vw,2.1rem);
text-shadow:0 2px 16px rgba(24,23,79,.5);
}
.homeSwipper .swiper-pagination-bullet{ background:#fff; opacity:.6; }
.homeSwipper .swiper-pagination-bullet-active{ background:#239947; opacity:1; width:22px; border-radius:5px; }
/* eyebrow (accueil) */
.home-eyebrow{
display:inline-flex; align-items:center; gap:.6em;
font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
color:var(--decim-indigo); margin-bottom:.5rem;
}
.home-eyebrow::before{ content:""; width:1.8em; height:3px; border-radius:3px; background:var(--grad-primary); }
.home-eyebrow--live::after{
content:""; width:.5em; height:.5em; border-radius:50%; background:var(--decim-spark);
animation:decim-pulse 2.2s var(--decim-ease) infinite;
}
/* le titre qui suit l'eyebrow : gros titre indigo, pas de soulignement (l'eyebrow porte l'accent) */
.home-eyebrow + .title-h2{
color:var(--decim-indigo); font-weight:800; padding-bottom:0; margin:.2rem 0 1.8rem;
font-size:clamp(1.4rem,1rem + 2vw,2.1rem);
}
.home-eyebrow + .title-h2::before{ display:none; }
@keyframes decim-pulse{
0% { box-shadow:0 0 0 0 rgba(248,237,57,.6); }
70% { box-shadow:0 0 0 7px rgba(248,237,57,0); }
100%{ box-shadow:0 0 0 0 rgba(248,237,57,0); }
}
/* =============================================================================
NOTE D'INFORMATION (accueil)
============================================================================= */
.home-notice{
border:1px solid var(--decim-line); border-radius:14px;
background:var(--decim-tint); padding:clamp(18px,4vw,28px); margin-bottom:35px;
box-shadow:0 1px 4px rgba(19,99,170,.08);
}
.home-notice__head{ display:flex; align-items:center; gap:.8em; margin-bottom:.4rem; }
.home-notice__badge{
flex:none; display:inline-flex; align-items:center; justify-content:center;
width:42px; height:42px; border-radius:10px; background:var(--grad-primary); color:#fff; font-size:1.1rem;
}
.home-notice .title-h2{ margin:0; font-size:clamp(1.1rem,.95rem + .7vw,1.4rem); color:var(--decim-blue-strong); }
.home-notice .title-h2::before{ display:none; }
.home-notice p{ max-width:72ch; }
/* =============================================================================
APPELS EN COURS / cartes passation (accueil + listings)
============================================================================= */
.passation-grid{ grid-template-columns:1fr; gap:clamp(16px,2.5vw,22px); }
.passation-item{
border:1px solid var(--decim-line); border-radius:14px;
box-shadow:0 1px 4px rgba(19,99,170,.08); overflow:hidden;
display:flex; flex-direction:column;
}
.passation-item__tag{
align-self:flex-start; display:inline-flex; align-items:center; gap:.4em;
margin:16px 0 0 18px; padding:5px 12px; border-radius:999px;
background:#fff; border:1px solid var(--decim-line);
color:var(--decim-blue-strong); font-size:.76rem; font-weight:700; letter-spacing:.02em;
}
.passation-item__content{ flex:1; }
.passation-item__link{ color:var(--decim-blue-strong); }
.passation-item__link:hover{ color:var(--decim-blue); }
.passation-item__meta{ gap:8px 10px; flex-wrap:wrap; }
.passation-item__meta li{
display:inline-flex; align-items:center; gap:8px;
background:var(--decim-surface-2); border:1px solid var(--decim-line); border-radius:999px;
padding:5px 12px 5px 6px; font-size:.82rem;
}
.passation-item__meta .ico{ width:16px; height:16px; }
/* chips colorées par type (comme la maquette) — :has bat la spécificité du base */
.passation-item__meta li:has(.date-parution){ background:#e7f6ea; border-color:transparent; color:#1f7a3d; }
.passation-item__meta li:has(.date-expire){ background:#fdeceb; border-color:transparent; color:#9b3a3a; }
.passation-item__menu a:hover{ color:var(--decim-blue-strong); }
/* =============================================================================
PAGE PASSATION (single) : onglets + contenu
============================================================================= */
.passationSingle--navigation ul{ overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
.passationSingle--navigation .navigationItem{
white-space:nowrap; border-radius:8px 8px 0 0;
}
.passationSingle--navigation .navigationItem.current-item{
color:var(--decim-blue-strong); border-top:2px solid var(--decim-blue);
}
/* =============================================================================
TABLEAUX (publics : ex. passations-single)
============================================================================= */
.table-primary{ border-radius:12px; box-shadow:0 1px 4px rgba(19,99,170,.08); }
.table-primary thead tr{ background:var(--grad-primary); }
.table-primary tbody tr.active-row{ color:var(--decim-blue-strong); }
/* =============================================================================
FORMULAIRES (connexion, inscription, contact, plaintes…)
============================================================================= */
.form-box{ border:1px solid var(--decim-line); box-shadow:0 6px 24px rgba(19,99,170,.10); }
.form-navigation a:hover,
.form-navigation a.active{
color:var(--decim-blue-strong); border-bottom:3px solid transparent; border-image:var(--grad-primary) 1;
}
.form-navigation a.active{ background:var(--decim-tint); }
.form-navigation-o a{ border-color:var(--decim-line); color:var(--decim-blue-strong); border-radius:8px; transition:.2s var(--decim-ease); }
.form-navigation-o a.active,
.form-navigation-o a:hover{ background:var(--grad-primary); border-color:transparent; color:#fff; }
.form-control{ transition:border-color .2s var(--decim-ease), box-shadow .2s var(--decim-ease); }
.form-control:focus{ outline:none; border-color:var(--decim-blue); box-shadow:0 0 0 3px rgba(19,99,170,.15); }
.form-group.form-group-radio label{ transition:.2s var(--decim-ease); }
.form-group.form-group-radio input[type=radio]:checked+label{
background:var(--decim-blue); border-color:var(--decim-blue); color:#fff;
}
/* =============================================================================
ACTUALITÉS
============================================================================= */
.post-listing{ gap:20px; }
.post-listing .post-item{
overflow:hidden;
transition:transform .2s var(--decim-ease), box-shadow .2s var(--decim-ease);
}
.post-listing .post-item:hover{ transform:translateY(-3px); box-shadow:0 10px 26px rgba(19,99,170,.16); }
/* =============================================================================
MDGP (gestion des plaintes) + blocs de contenu
============================================================================= */
.mdgpNavigation a.active{ border-bottom-color:var(--decim-blue); color:var(--decim-blue-strong); }
.mdgpNavigation a.active span{ background:var(--grad-primary); border-color:transparent; }
.mdgpDonwloadList a{ border-color:var(--decim-line); transition:.2s var(--decim-ease); }
.mdgpDonwloadList a:hover{ background:var(--grad-primary); border-color:transparent; color:#fff; }
/* bloc de contenu : suppression de la barre latérale (anti-pattern) → bordure pleine */
.decim-block{ border-left:none; border:1px solid var(--decim-line); border-radius:14px; background:#f9fbfe; }
.decim-block h2,.decim-block h3{ color:var(--decim-blue-strong); }
/* =============================================================================
FOOTER
============================================================================= */
.footer{ border-top:3px solid transparent; border-image:var(--grad-primary) 1; }
/* =============================================================================
=== RESPONSIVE ===
============================================================================= */
/* ---- TABLETTE & MOBILE : ≤ 1023px → menu en tiroir ---- */
@media (max-width:1023px){
.nav-toggle{ display:inline-flex; }
.header__top{ flex-direction:row; align-items:center; }
.header-menuBox{
display:block; position:fixed; inset:0 0 0 auto;
width:min(86vw,360px); background:#fff;
transform:translateX(100%); transition:transform .3s var(--decim-ease);
overflow-y:auto; z-index:1001; padding:74px 0 24px; border-top:none;
}
.nav-open .header-menuBox{ transform:none; }
.menu-backdrop{
display:block; position:fixed; inset:0; background:rgba(24,23,79,.45);
opacity:0; visibility:hidden; transition:.3s var(--decim-ease); z-index:1000;
}
.nav-open .menu-backdrop{ opacity:1; visibility:visible; }
.nav-open{ overflow:hidden; }
.header-menuBox .container{ width:100%; max-width:100%; padding:0; }
.header-menuBox .header-menu{ flex-direction:column; gap:0; }
.header-menuBox .header-menu>li{ border-bottom:1px solid var(--decim-line); }
.header-menuBox .header-menu>li>a{ justify-content:flex-start; padding:16px 20px; font-size:1.02rem; }
.header-menuBox .header-menu>li>a::after{ display:none; }
.header-menuBox .header-menu>li>a.active{ background:var(--decim-tint); }
.header-menuBox .header-menu li>.sub-menu{
display:block; position:static; width:100%; box-shadow:none; order:0;
max-height:0; overflow:hidden; transition:max-height .3s var(--decim-ease); background:#f4f7fb;
}
.header-menuBox .header-menu li.menu-item-has-children.open>.sub-menu{ max-height:800px; }
.header-menuBox .header-menu li>.sub-menu li>.sub-menu{ transform:none; background:#eef3f9; }
.header-menuBox .header-menu li>.sub-menu li>a{ padding-left:28px; }
.header-menuBox .header-menu .with-angle .ico{ margin-left:auto; transition:transform .25s var(--decim-ease); }
.header-menuBox .header-menu .menu-item-has-children.open>.with-angle .ico{ transform:rotate(180deg); }
}
/* ---- TABLETTE : 600–1023px ---- */
@media (min-width:600px) and (max-width:1023px){
.post-listing{ grid-template-columns:repeat(2,1fr); }
}
/* ---- Hero : plus haut sur petits écrans ---- */
@media (max-width:900px){ .homeSwipper-img img{ aspect-ratio:16/9; } }
/* ---- MOBILE : ≤ 599px ---- */
@media (max-width:599px){
.homeSwipper-img img{ aspect-ratio:4/5; }
.header__top .userNavigation .btn-secondary{ display:none; }
.passation-item__menu{ flex-direction:column; gap:6px; }
.passation-item__menu a{ width:100%; }
/* tableaux : défilement horizontal au lieu de déborder */
.table-primary{ display:block; overflow-x:auto; white-space:nowrap; }
/* étapes MDGP : défilement horizontal */
.mdgpNavigation ul{ gap:8px; overflow-x:auto; justify-content:flex-start; }
.mdgpNavigation a{ padding:12px 8px; }
/* onglets projet/passation : pleine lisibilité */
.passationSingle--navigation ul{ gap:6px; }
}
@media (prefers-reduced-motion:reduce){ *{ transition:none!important; animation:none!important; } }
/* =============================================================================
ICÔNES SVG inline (.ico) — remplace la police icon-lead
Les