/**
* ============================================================
* ASSUROMIEUX — PAGE ADHÉRENTS / NOS COURTIERS
* Fichier : adherants.css
* Intégration : Laravel + Blade
* ============================================================
*
* DÉPENDANCES EXTERNES (à charger dans le avant ce fichier) :
*
*
*
*
*
* CHARGEMENT LARAVEL (dans app.blade.php ou via Vite/Mix) :
*
* Via Vite (recommandé) :
* @vite(['resources/css/adherants.css'])
*
* Via lien direct :
*
*
* STRUCTURE DES FICHIERS BLADE ATTENDUE :
*
* resources/views/
* ├── layouts/app.blade.php ← layout principal
* └── pages/
* └── adherants.blade.php ← vue principale
* ├── @include('partials.adherants.hero')
* ├── @include('partials.adherants.bandeau')
* └── @include('partials.adherants.grille')
*
* JS REQUIS :
* La fonction filterCards() est incluse en bas du fichier HTML
* de référence. En Laravel, la déplacer dans un fichier
* resources/js/adherants.js et l'importer via Vite.
*
* RESPONSIVE : breakpoints à 900px (2 colonnes) et 580px (1 colonne)
* ============================================================
*/
/* ============================================================
1. VARIABLES CSS GLOBALES
Scope : toute la page adherants
Note : si le thème global définit déjà ces variables,
supprimer ce bloc et aligner les noms avec ceux du thème.
============================================================ */
.page-adherants {
--adh-blue: #1B3A6B;
--adh-blue-mid: #2A5298;
--adh-blue-dark: #0D2240;
--adh-orange: #E86828;
--adh-orange-light: #FFF0E6;
--adh-grey-bg: #F5F6FA;
--adh-grey-border: #E2E4EE;
--adh-text: #1A1A2E;
--adh-text-muted: #6B7280;
--adh-white: #ffffff;
--adh-radius: 12px;
--adh-shadow: 0 2px 16px rgba(27, 58, 107, 0.08);
--adh-shadow-hover: 0 8px 32px rgba(27, 58, 107, 0.15);
--adh-font-body: 'DM Sans', sans-serif;
--adh-font-display: 'DM Serif Display', serif;
font-family: var(--adh-font-body);
color: var(--adh-text);
background: var(--adh-grey-bg);
line-height: 1.6;
}
/* ============================================================
2. HERO
Blade partial : partials/adherants/hero.blade.php
Note : remplacer l'attribut src de .adh-hero-img
par {{ asset('images/adherants-hero.jpg') }} dans Blade
============================================================ */
.adh-hero {
position: relative;
width: 100%;
height: 340px;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.adh-hero-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 30%;
filter: brightness(0.62);
}
.adh-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(
to bottom,
rgba(13, 34, 64, 0.25) 0%,
rgba(13, 34, 64, 0.55) 100%
);
}
.adh-hero-content {
position: relative;
z-index: 2;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
}
.adh-hero-pin {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.15);
border: 2px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.adh-hero-pin svg {
width: 22px;
height: 22px;
fill: #fff;
}
.adh-hero h1 {
font-family: var(--adh-font-body);
font-size: 2.5rem;
font-weight: 800;
color: #fff;
letter-spacing: 3px;
text-transform: uppercase;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}
/* ============================================================
3. BANDEAU BLEU
Blade partial : partials/adherants/bandeau.blade.php
============================================================ */
.adh-bandeau {
background: linear-gradient(135deg, var(--adh-blue) 0%, var(--adh-blue-mid) 100%);
padding: 52px 24px 56px;
position: relative;
}
/* Triangle raccord hero → bandeau */
.adh-bandeau::before {
content: '';
position: absolute;
top: -1px;
left: 50%;
transform: translateX(-50%);
border-left: 28px solid transparent;
border-right: 28px solid transparent;
/*
* ATTENTION : remplacer la couleur par la couleur de fond
* du bloc situé juste au-dessus (header nav ou hero).
* Si hero pleine largeur sans séparateur : supprimer ce pseudo-élément.
*/
border-top: 20px solid var(--adh-grey-bg);
}
.adh-bandeau-inner {
max-width: 1060px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr auto;
gap: 48px;
align-items: center;
}
/* Texte gauche */
.adh-bandeau-text h2 {
font-family: var(--adh-font-display);
font-size: 1.7rem;
color: #fff;
margin-bottom: 12px;
line-height: 1.25;
}
.adh-bandeau-text p {
font-size: 0.93rem;
color: rgba(255, 255, 255, 0.78);
line-height: 1.65;
max-width: 460px;
}
/* Icônes droite */
.adh-bandeau-stats {
display: flex;
gap: 36px;
align-items: flex-start;
flex-shrink: 0;
}
.adh-bandeau-stat {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
text-align: center;
}
.adh-bandeau-stat-icon {
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.12);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.adh-bandeau-stat:hover .adh-bandeau-stat-icon {
background: rgba(255, 255, 255, 0.22);
}
.adh-bandeau-stat-icon svg {
width: 22px;
height: 22px;
stroke: #fff;
fill: none;
stroke-width: 1.8;
stroke-linecap: round;
stroke-linejoin: round;
}
.adh-bandeau-stat-label {
font-size: 0.78rem;
color: rgba(255, 255, 255, 0.82);
font-weight: 600;
line-height: 1.3;
max-width: 80px;
}
/* Flèche bas du bandeau */
.adh-bandeau-arrow {
text-align: center;
margin-top: 40px;
}
.adh-bandeau-arrow svg {
width: 24px;
height: 14px;
fill: rgba(255, 255, 255, 0.35);
}
/* ============================================================
4. SECTION GRILLE
Blade partial : partials/adherants/grille.blade.php
============================================================ */
.adh-section-grid {
max-width: 1060px;
margin: 0 auto;
padding: 56px 24px 80px;
}
/* --- 4.1 Filtres --- */
.adh-filters {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 36px;
}
.adh-filter-btn {
font-family: var(--adh-font-body);
font-size: 0.82rem;
font-weight: 600;
padding: 7px 18px;
border-radius: 20px;
border: 1.5px solid var(--adh-grey-border);
background: #fff;
color: var(--adh-text-muted);
cursor: pointer;
transition: background 0.18s, border-color 0.18s, color 0.18s;
white-space: nowrap;
}
.adh-filter-btn:hover,
.adh-filter-btn.active {
background: var(--adh-blue);
border-color: var(--adh-blue);
color: #fff;
}
/* --- 4.2 Compteur --- */
.adh-grid-count {
font-size: 0.82rem;
color: var(--adh-text-muted);
margin-bottom: 28px;
}
.adh-grid-count strong {
color: var(--adh-blue);
font-weight: 700;
}
/* --- 4.3 Grille --- */
.adh-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 22px;
}
/* ============================================================
5. CARTES COURTIERS
============================================================ */
.adh-card {
background: #fff;
border-radius: var(--adh-radius);
box-shadow: var(--adh-shadow);
border: 1px solid var(--adh-grey-border);
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 0.22s, transform 0.22s, border-color 0.22s;
}
.adh-card:hover {
box-shadow: var(--adh-shadow-hover);
transform: translateY(-3px);
border-color: rgba(27, 58, 107, 0.18);
}
/* --- 5.1 Barre couleur région (haut de carte) ---
*
* Classes disponibles :
* .adh-accent-occ Occitanie bleu → bleu moyen
* .adh-accent-naq Nouvelle-Aquitaine orange → orange foncé
* .adh-accent-idf Île-de-France bleu ciel
* .adh-accent-cvl Centre-Val de Loire vert
* .adh-accent-ara Auvergne-Rhône-Alpes violet
* .adh-accent-rec Recrutement hachuré gris
*
* Pour ajouter une région : créer une nouvelle classe
* .adh-accent-XXX avec le gradient souhaité.
*/
.adh-card-accent {
height: 4px;
width: 100%;
display: block;
}
.adh-accent-occ { background: linear-gradient(90deg, #1B3A6B, #2A5298); }
.adh-accent-naq { background: linear-gradient(90deg, #E86828, #D4501A); }
.adh-accent-idf { background: linear-gradient(90deg, #1565C0, #1E88E5); }
.adh-accent-cvl { background: linear-gradient(90deg, #2E7D32, #43A047); }
.adh-accent-ara { background: linear-gradient(90deg, #6A1B9A, #8E24AA); }
.adh-accent-rec {
background: repeating-linear-gradient(
45deg,
#ddd 0, #ddd 4px,
#f0f0f5 4px, #f0f0f5 12px
);
}
/* --- 5.2 Corps de carte --- */
.adh-card-body {
padding: 22px 22px 16px;
flex: 1;
display: flex;
flex-direction: column;
gap: 12px;
}
.adh-card-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.adh-card-ville {
font-family: var(--adh-font-display);
font-size: 1.3rem;
color: var(--adh-blue-dark);
line-height: 1.15;
}
.adh-card-badge {
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.8px;
text-transform: uppercase;
color: var(--adh-orange);
background: var(--adh-orange-light);
padding: 3px 9px;
border-radius: 20px;
white-space: nowrap;
flex-shrink: 0;
margin-top: 4px;
}
.adh-card-specialites {
font-size: 0.84rem;
color: var(--adh-text-muted);
line-height: 1.55;
padding-left: 10px;
border-left: 2px solid var(--adh-orange);
}
.adh-card-contact {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 4px;
border-top: 1px solid var(--adh-grey-border);
}
.adh-card-tel {
display: flex;
align-items: center;
gap: 7px;
font-size: 0.9rem;
font-weight: 700;
color: var(--adh-blue);
letter-spacing: 0.3px;
text-decoration: none;
}
.adh-card-tel:hover {
color: var(--adh-orange);
}
.adh-card-tel svg {
width: 14px;
height: 14px;
stroke: var(--adh-orange);
fill: none;
stroke-width: 2.5;
flex-shrink: 0;
}
/* Pastille verte "Répond sous 24h" */
.adh-card-dispo {
display: flex;
align-items: center;
gap: 6px;
font-size: 0.76rem;
color: var(--adh-text-muted);
}
.adh-card-dispo::before {
content: '';
width: 7px;
height: 7px;
border-radius: 50%;
background: #22C55E;
flex-shrink: 0;
display: inline-block;
}
/* --- 5.3 Pied de carte --- */
.adh-card-footer {
padding: 0 22px 20px;
}
.adh-btn-devis {
display: block;
width: 100%;
text-align: center;
background: var(--adh-blue);
color: #fff;
font-family: var(--adh-font-body);
font-size: 0.86rem;
font-weight: 700;
padding: 11px 16px;
border-radius: 8px;
letter-spacing: 0.2px;
text-decoration: none;
transition: background 0.18s, transform 0.1s;
border: none;
cursor: pointer;
}
.adh-btn-devis:hover {
background: var(--adh-blue-dark);
transform: translateY(-1px);
}
/* ============================================================
6. CARTES RECRUTEMENT
Variante visuelle pour les postes ouverts
============================================================ */
.adh-card-rec {
background: #FAFAFA;
}
.adh-rec-label {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.7rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--adh-text-muted);
background: #EDEDF2;
padding: 3px 10px;
border-radius: 20px;
width: fit-content;
}
.adh-rec-label::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--adh-orange);
display: inline-block;
}
.adh-rec-ville {
font-family: var(--adh-font-display);
font-size: 1.2rem;
color: var(--adh-text-muted);
}
.adh-rec-desc {
font-size: 0.83rem;
color: var(--adh-text-muted);
line-height: 1.6;
}
.adh-rec-avantages {
list-style: none;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
margin: 0;
}
.adh-rec-avantages li {
font-size: 0.8rem;
color: var(--adh-text-muted);
display: flex;
align-items: flex-start;
gap: 8px;
line-height: 1.4;
}
.adh-rec-avantages li::before {
content: '';
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--adh-orange);
flex-shrink: 0;
margin-top: 6px;
display: inline-block;
}
.adh-rec-contact {
font-size: 0.8rem;
color: var(--adh-text-muted);
padding-top: 4px;
border-top: 1px solid var(--adh-grey-border);
}
.adh-rec-contact a {
color: var(--adh-orange);
font-weight: 600;
text-decoration: none;
}
.adh-rec-contact a:hover {
text-decoration: underline;
}
.adh-btn-candidater {
display: block;
width: 100%;
text-align: center;
background: transparent;
color: var(--adh-blue);
font-family: var(--adh-font-body);
font-size: 0.86rem;
font-weight: 700;
padding: 10px 16px;
border-radius: 8px;
border: 1.5px solid var(--adh-blue);
text-decoration: none;
transition: background 0.18s, color 0.18s;
cursor: pointer;
}
.adh-btn-candidater:hover {
background: var(--adh-blue);
color: #fff;
}
/* ============================================================
7. CTA BAS DE PAGE
============================================================ */
.adh-cta-bottom {
background: var(--adh-blue-dark);
padding: 56px 24px;
text-align: center;
}
.adh-cta-bottom h3 {
font-family: var(--adh-font-display);
font-size: 1.6rem;
color: #fff;
margin-bottom: 10px;
}
.adh-cta-bottom p {
font-size: 0.93rem;
color: rgba(255, 255, 255, 0.72);
margin-bottom: 28px;
max-width: 480px;
margin-left: auto;
margin-right: auto;
line-height: 1.65;
}
.adh-btn-cta {
display: inline-block;
background: var(--adh-orange);
color: #fff;
font-family: var(--adh-font-body);
font-size: 0.95rem;
font-weight: 700;
padding: 14px 36px;
border-radius: 8px;
text-decoration: none;
box-shadow: 0 4px 20px rgba(232, 104, 40, 0.4);
transition: background 0.18s, transform 0.1s;
}
.adh-btn-cta:hover {
background: #c9551e;
transform: translateY(-1px);
}
/* ============================================================
8. RESPONSIVE
============================================================ */
/* Tablette : 2 colonnes */
@media (max-width: 900px) {
.adh-grid {
grid-template-columns: repeat(2, 1fr);
}
.adh-bandeau-inner {
grid-template-columns: 1fr;
gap: 32px;
}
.adh-bandeau-stats {
justify-content: flex-start;
flex-wrap: wrap;
gap: 20px;
}
}
/* Mobile : 1 colonne */
@media (max-width: 580px) {
.adh-hero {
height: 260px;
}
.adh-hero h1 {
font-size: 1.75rem;
letter-spacing: 2px;
}
.adh-grid {
grid-template-columns: 1fr;
}
.adh-bandeau-stats {
gap: 16px;
}
.adh-filters {
gap: 8px;
}
.adh-bandeau {
padding: 40px 20px 44px;
}
.adh-section-grid {
padding: 40px 20px 60px;
}
}