.elementor-1054 .elementor-element.elementor-element-38d4e5d{--display:flex;}.elementor-1054 .elementor-element.elementor-element-f197cfe{--display:flex;}/* Start custom CSS */.df-page .hero-content p {
text-align: justify !important;}
h2.section-title.centered {
font-weight: 400 !important;
font-size: 30px !important;
padding-top: 50px !important;
}
/* ------- Variables globales (peuvent servir à d'autres blocs Elementor) ------- */
:root {
/* Palette officielle */
--color-red-primary: #ed4141;
--color-red-dark: #d32f2f;
--color-red-light: #ff6b6b;
--color-red-very-light: #ffebee;
--color-blue-dark: #112B55;
--color-text-gray: #676767;
--color-bg-page: #F8F9FA;
--color-bg-white: #FFFFFF;
--color-bg-accent: #fff5f5;
/* Neutres / bordures */
--color-border-light: #dddddd;
--color-border-subtle: #e5e5e5;
/* Échelle typographique (ratio 1.25 - Major Third) */
--font-size-xs: 0.8125rem; /* 13px */
--font-size-sm: 0.875rem; /* 14px */
--font-size-base: 1rem; /* 16px */
--font-size-md: 1.125rem; /* 18px */
--font-size-lg: 1.25rem; /* 20px */
--font-size-xl: 1.5rem; /* 24px */
--font-size-2xl: 1.75rem; /* 28px */
--font-size-3xl: 2rem; /* 32px */
--font-size-4xl: 2.5rem; /* 40px */
/* Line-heights - Réduits */
--line-height-tight: 1.1;
--line-height-normal: 1.25;
--line-height-relaxed: 1.35;
--line-height-loose: 1.4;
--line-height-very-loose: 1.45;
/* Font-weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
.section-title.centered {
font-weight: 500 !important;
}
/* =========================
SYSTÈME TYPOGRAPHIQUE RESTRUCTURÉ
Conforme aux spécifications professionnelles
========================= */
/* H1 - Un seul par page, titre principal */
--font-size-h1: clamp(1.75rem, 3vw + 1rem, 3rem); /* 28px mobile -> 48px desktop */
/* H2 - Titres de sections principales */
--font-size-h2: clamp(1.375rem, 2vw + 0.75rem, 2rem); /* 22px mobile -> 32px desktop */
/* H3 - Titres de sous-sections / cartes */
--font-size-h3: clamp(1.25rem, 1.5vw + 0.5rem, 1.375rem); /* 20px -> 22px */
/* H4-H6 - Usage ponctuel */
--font-size-h4: clamp(1.125rem, 1.25vw + 0.5rem, 1.25rem); /* 18px -> 20px */
/* Texte principal (p, li) */
--font-size-text-desktop: 1.125rem; /* 18px desktop */
--font-size-text-mobile: 0.9375rem; /* 15px mobile */
--font-size-text: clamp(0.9375rem, 1.5vw + 0.5rem, 1.125rem); /* Responsive 15-18px */
/* Line-heights optimisés */
--line-height-headings: 1.2;
--line-height-text: 1.7; /* Entre 1.6 et 1.8 comme demandé */
/* =========================
SYSTÈME D'ESPACEMENT COHÉRENT
========================= */
/* Espacement entre sections */
--spacing-section-desktop: clamp(5rem, 8vw, 7.5rem); /* 80-120px desktop */
--spacing-section-mobile: clamp(3rem, 6vw, 4rem); /* 48-64px mobile */
--spacing-section: clamp(3rem, 6vw, 7.5rem); /* Responsive */
/* Espacement entre titre et texte */
--spacing-title-text: clamp(1rem, 1.5vw, 1.5rem); /* 16-24px */
/* Espacement entre paragraphes */
--spacing-paragraph: clamp(0.75rem, 1vw, 1rem); /* 12-16px */
/* Espacement avant titre de section */
--spacing-title-top: clamp(2rem, 4vw, 3rem);
/* Espacement après titre */
--spacing-title-bottom: clamp(1rem, 1.5vw, 1.5rem);
}
/* Tout est encapsulé dans .df-page pour éviter les conflits avec Elementor */
.df-page {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
color: var(--color-text-gray) !important;
line-height: var(--line-height-very-loose) !important;
background-color: var(--color-bg-page) !important;
}
.df-page * {
box-sizing: border-box !important;
}
/* =========================
SECTION HÉRO
========================= */
.df-page .hero-section {
background-color: var(--color-blue-dark) !important;
background-image: url('https://demarches-en-france.fr/wp-content/uploads/2023/02/news-17-1.jpg');
background-size: cover;
background-position: center;
width: 100% !important;
margin: 0 !important;
padding: clamp(2rem, 4vw, 3rem) 0 !important; /* Espacement vertical réduit */
position: relative !important;
min-height: clamp(250px, 30vh, 400px) !important; /* Hauteur réduite pour un hero plus compact */
display: flex !important;
align-items: center !important;
}
.df-page .hero-section::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(17, 43, 85, 0.85);
backdrop-filter: blur(1px);
pointer-events: none;
}
.df-page .hero-container {
max-width: 1200px !important;
margin: 0 auto !important;
width: 100% !important;
padding: 0 40px !important;
display: grid !important;
grid-template-columns: 1.6fr 1fr !important;
gap: 20px !important;
position: relative !important;
z-index: 1 !important;
align-items: center !important;
}
.df-page .hero-content {
padding-right: 20px;
position: relative;
z-index: 2;
}
/* =========================
H1 - TITRE PRINCIPAL (Un seul par page)
========================= */
.df-page h1 {
font-size: var(--font-size-h1) !important; /* 28px mobile -> 48px desktop */
font-weight: 600 !important;
line-height: var(--line-height-headings) !important;
margin-top: 0 !important;
margin-bottom: var(--spacing-title-text) !important;
color: var(--color-blue-dark) !important;
}
.df-page .hero-content h1 {
color: var(--color-bg-white) !important;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2) !important;
letter-spacing: -0.5px;
}
/* =========================
H2 - TITRES DE SECTIONS PRINCIPALES
========================= */
.df-page h2 {
font-size: var(--font-size-h2) !important; /* 22px mobile -> 32px desktop */
font-weight: 500 !important;
line-height: var(--line-height-headings) !important;
margin-top: var(--spacing-title-top) !important;
margin-bottom: var(--spacing-title-text) !important;
color: var(--color-blue-dark) !important;
}
.df-page h2.section-title {
margin-top: 0 !important; /* Première section n'a pas besoin d'espacement top */
}
.df-page h2.centered {
text-align: center !important;
}
/* =========================
H3 - TITRES DE SOUS-SECTIONS / CARTES
========================= */
.df-page h3 {
font-size: var(--font-size-h3) !important; /* 20-22px */
font-weight: 400 !important;
line-height: var(--line-height-headings) !important;
margin-top: 0 !important;
margin-bottom: var(--spacing-title-text) !important;
color: var(--color-blue-dark) !important;
}
/* =========================
H4-H6 - USAGE PONCTUEL
========================= */
.df-page h4 {
font-size: var(--font-size-h4) !important;
font-weight: 400 !important;
line-height: var(--line-height-headings) !important;
margin-top: clamp(1.25rem, 2.5vw, 2rem) !important;
margin-bottom: clamp(0.625rem, 1.25vw, 1rem) !important;
color: var(--color-blue-dark) !important;
}
/* =========================
TEXTE PRINCIPAL (p, li)
========================= */
.df-page p {
font-size: var(--font-size-text) !important; /* 15px mobile -> 18px desktop */
line-height: var(--line-height-text) !important; /* 1.7 */
color: var(--color-text-gray) !important;
margin-bottom: var(--spacing-paragraph) !important; /* 12-16px */
max-width: 75ch; /* Limite de largeur pour la lisibilité */
text-align: justify !important;
}
.df-page .hero-content p {
color: var(--color-bg-white) !important;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
max-width: 90%;
margin-bottom: clamp(1.5rem, 2vw, 2rem) !important;
text-align: left !important; /* Aligné à gauche pour meilleure lisibilité sur fond sombre */
}
.df-page li {
font-size: var(--font-size-text) !important;
line-height: var(--line-height-text) !important;
color: var(--color-text-gray) !important;
margin-bottom: 0.5rem !important;
}
.df-page .cta-button {
background-color: var(--color-red-primary) !important;
color: var(--color-bg-white) !important;
padding: 0.75rem 1.5rem !important;
border-radius: 4px !important;
border: 1px solid var(--color-red-primary) !important;
text-decoration: none;
font-weight: 400 !important;
font-size: 0.9375rem !important; /* 15px */
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: inline-flex;
align-items: center;
gap: 6px;
}
.df-page .cta-button:hover {
background-color: var(--color-red-dark) !important;
border-color: var(--color-red-dark) !important;
color: var(--color-bg-white) !important;
transform: translateY(-2px) !important;
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}
.df-page .hero-content .cta-button {
font-size: clamp(1rem, 1.25vw + 0.5rem, 1.125rem) !important; /* 16px mobile -> 18px desktop - Augmenté */
padding: clamp(0.875rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2rem) !important; /* Padding augmenté */
font-weight: 400 !important;
box-shadow: 0 4px 12px rgba(237, 65, 65, 0.3) !important;
background-color: var(--color-red-primary) !important;
color: var(--color-bg-white) !important;
border-color: var(--color-red-primary) !important;
}
.df-page .hero-content .cta-button:hover {
background-color: var(--color-red-dark) !important;
border-color: var(--color-red-dark) !important;
color: var(--color-bg-white) !important;
}
.df-page .consultation-form {
background-color: var(--color-bg-white) !important;
border-radius: 8px !important;
padding: 1rem 1rem !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
}
/* Titre du formulaire - Utilise h3 car c'est une sous-section du hero */
.df-page .consultation-form .form-title,
.df-page .consultation-form h3 {
font-size: var(--font-size-h3) !important; /* 20-22px */
color: var(--color-blue-dark) !important;
font-weight: 400 !important;
line-height: var(--line-height-headings) !important;
margin-top: 0 !important;
margin-bottom: 0.75rem !important; /* Réduit pour diminuer la hauteur */
text-align: center !important;
}
/* Champs formulaire */
.df-page .form-group {
margin-bottom: 0.75rem !important; /* Réduit de 12px à 0.75rem */
}
.df-page .form-row {
display: flex !important;
gap: 12px !important;
margin-bottom: 0.75rem !important; /* Réduit de 12px à 0.75rem */
}
.df-page .form-row .form-group {
flex: 1 !important;
margin-bottom: 0 !important;
}
/* Labels formulaire - Système typographique appliqué */
.df-page .form-label {
color: var(--color-blue-dark) !important;
font-weight: 400 !important;
font-size: var(--font-size-sm) !important; /* 14px */
display: block !important;
margin-bottom: 0.25rem !important; /* Marge réduite */
line-height: var(--line-height-relaxed) !important;
}
/* Inputs/Selects - Système typographique appliqué */
.df-page .form-control,
.df-page .form-select,
.df-page .form-textarea {
width: 100% !important;
padding: 0.5rem 0.65rem !important; /* Padding réduit */
border: 1px solid var(--color-border-light) !important;
border-radius: 6px !important;
font-size: 0.9375rem !important; /* 15px */
font-family: inherit !important;
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-relaxed) !important;
background-color: var(--color-bg-white) !important;
color: #333333 !important;
transition: border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.df-page .form-control::placeholder,
.df-page .form-textarea::placeholder {
color: var(--color-text-gray) !important;
opacity: 0.7;
}
.df-page .form-control:focus,
.df-page .form-select:focus,
.df-page .form-textarea:focus {
outline: none !important;
border: 2px solid var(--color-red-primary) !important;
box-shadow: 0 0 0 3px rgba(237, 65, 65, 0.1) !important;
}
/* Bouton submit - Système typographique appliqué */
.df-page .btn-submit {
background-color: var(--color-red-primary) !important;
color: var(--color-bg-white) !important;
padding: 0.75rem 1.5rem !important;
border: 2px solid var(--color-red-primary) !important;
border-radius: 6px !important;
font-weight: var(--font-weight-medium) !important;
font-size: 0.9375rem !important; /* 15px */
line-height: var(--line-height-relaxed) !important;
cursor: pointer !important;
width: 100% !important;
margin-top: 0.5rem !important; /* Réduit pour diminuer la hauteur */
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
display: inline-block !important;
}
.df-page .btn-submit:hover {
background-color: var(--color-red-dark) !important;
border-color: var(--color-red-dark) !important;
transform: translateY(-2px) !important;
box-shadow: 0 4px 12px rgba(17, 43, 85, 0.25) !important;
}
/* =========================
SECTIONS GÉNÉRIQUES
========================= */
.df-page .content-section {
width: 100% !important;
margin: 0 !important;
padding: var(--spacing-section) clamp(1rem, 3vw, 2rem) !important;
}
.df-page .content-section.white-bg {
background-color: var(--color-bg-white) !important;
}
.df-page .content-section.light-bg {
background-color: var(--color-bg-page) !important;
}
.df-page .content-section > *:not(.two-columns):not(.cards-grid):not(.slider-container-custom):not(.faq-container) {
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 !important;
margin-bottom: 30px !important;
}
/* Section title - Utilise h2, conforme au système typographique */
.df-page .section-title {
font-size: var(--font-size-h2) !important; /* 22px mobile -> 32px desktop */
color: var(--color-blue-dark) !important;
font-weight: 500 !important;
line-height: var(--line-height-headings) !important;
margin-top: 0 !important; /* Première section n'a pas besoin d'espacement top */
margin-bottom: var(--spacing-title-text) !important;
padding: 0 !important;
text-align: center !important;
position: relative;
}
/* Accent rouge subtil sous les titres centrés */
.df-page .section-title.centered::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: linear-gradient(to right, transparent, var(--color-red-primary), transparent);
margin: 1rem auto 0;
border-radius: 2px;
opacity: 0.6;
}
.df-page .section-title.centered {
text-align: center !important;
font-size: var(--font-size-h2) !important; /* Utilise la même taille que h2 */
}
.df-page .two-columns .section-title {
text-align: left !important;
padding: 0 !important;
margin-top: var(--spacing-title-top) !important;
margin-bottom: var(--spacing-title-bottom) !important;
font-size: var(--font-size-h2) !important; /* Utilise la même taille que h2 */
border-left: 5px solid var(--color-red-primary) !important;
padding-left: clamp(1rem, 2vw, 1.25rem) !important;
line-height: var(--line-height-headings) !important; /* Utilise le même line-height que h2 */
position: relative;
}
/* Accent rouge subtil sur les titres deux colonnes */
.df-page .two-columns .section-title::after {
content: '';
position: absolute;
left: -5px;
top: 0;
bottom: 0;
width: 5px;
background: linear-gradient(to bottom, var(--color-red-primary), rgba(237, 65, 65, 0.6));
border-radius: 0 2px 2px 0;
}
/* Sous-titres - Système typographique appliqué avec espacements uniformisés */
.df-page .section-subtitle {
color: var(--color-text-gray) !important;
font-size: var(--font-size-text) !important; /* Utilise la même taille que p */
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-text) !important; /* Utilise le même line-height que p */
margin-top: 0 !important;
margin-bottom: var(--spacing-title-bottom) !important;
text-align: center !important;
padding: clamp(0.5rem, 1vw, 0.75rem) 0 !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.df-page .section-comment-marche .section-subtitle {
padding: clamp(1rem, 2vw, 1.5rem) clamp(1rem, 8vw, 7.5rem) clamp(1.25rem, 2.5vw, 2rem) !important;
max-width: 900px !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
/* Paragraphes - Système typographique appliqué avec espacements uniformisés */
.df-page p {
color: var(--color-text-gray) !important;
font-size: var(--font-size-text) !important; /* Utilise la même taille que p */
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-text) !important; /* Utilise le même line-height que p */
margin-top: clamp(0.5rem, 1vw, 0.75rem) !important; /* Marge ajoutée en haut */
margin-bottom: var(--spacing-paragraph) !important;
}
.df-page .section-content {
color: var(--color-text-gray) !important;
font-size: var(--font-size-text) !important; /* Utilise la même taille que p */
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-text) !important; /* Utilise le même line-height que p */
margin-top: clamp(0.5rem, 1vw, 0.75rem) !important; /* Marge ajoutée en haut */
margin-bottom: var(--spacing-paragraph) !important;
text-align: justify !important;
}
.df-page .info-list {
list-style: none !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
.df-page .info-list li {
position: relative !important;
padding-left: clamp(1.25rem, 2vw, 1.5625rem) !important;
margin-bottom: clamp(0.375rem, 0.75vw, 0.5rem) !important;
font-size: var(--font-size-text) !important; /* Utilise la même taille que li */
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-text) !important; /* Utilise le même line-height que li */
color: var(--color-text-gray) !important;
text-align: justify !important;
}
.df-page .info-list li::before {
content: "•";
color: var(--color-red-primary);
font-weight: bold;
position: absolute;
left: 0;
}
/* Deux colonnes */
.df-page .two-columns {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 2rem !important;
max-width: 1200px !important;
margin: 0 auto !important;
align-items: stretch !important;
}
.df-page .two-columns > div {
display: flex;
flex-direction: column;
}
.df-page .two-columns img {
width: 100%;
height: 100%;
max-height: none;
object-fit: cover;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.df-page .two-columns .cta-button {
display: block !important;
width: 100% !important;
margin-top: 0.75rem !important;
text-align: center !important;
background-color: var(--color-red-primary) !important;
color: var(--color-bg-white) !important;
border-color: var(--color-red-primary) !important;
}
/* =========================
CARTES & BLOCS DE CONTENU
Structure uniformisée et content-proof
========================= */
.df-page .cards-grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
gap: clamp(1.5rem, 3vw, 2rem) !important;
max-width: 1200px !important;
margin: 0 auto !important;
padding: 0 clamp(1.25rem, 3vw, 2.5rem) !important;
}
.df-page .info-card {
background-color: var(--color-bg-white) !important;
border-radius: 8px !important;
padding: clamp(1.5rem, 2vw, 2rem) !important; /* 24-32px comme spécifié */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
border-left: 4px solid var(--color-red-primary) !important;
text-align: left !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
overflow: hidden;
display: flex !important;
flex-direction: column !important;
min-height: 200px !important; /* Hauteur minimale pour stabilité */
}
/* Accent rouge subtil au hover */
.df-page .info-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, var(--color-red-primary), rgba(237, 65, 65, 0.7));
transition: width 0.3s ease;
}
.df-page .info-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(237, 65, 65, 0.2) !important;
}
.df-page .info-card:hover::before {
width: 6px;
}
@media (max-width: 768px) {
.df-page .pourquoi-nous-cards .info-card:hover {
transform: none !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.df-page .pourquoi-nous-cards .info-card {
opacity: 1 !important;
visibility: visible !important;
background-color: var(--color-bg-white) !important;
}
}
.df-page .info-card-icon {
width: 64px;
height: 64px;
margin: 0 0 clamp(0.5rem, 1vw, 0.75rem) 0 !important; /* Aligné à gauche */
background-color: var(--color-blue-dark) !important;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer;
}
.df-page .info-card-icon:hover {
background-color: var(--color-red-primary) !important;
transform: translateY(-2px) scale(1.05) !important;
box-shadow: 0 4px 12px rgba(237, 65, 65, 0.3) !important;
}
.df-page .info-card-icon svg {
width: 32px;
height: 32px;
stroke: #FFFFFF !important;
stroke-width: 2.5 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
fill: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.df-page .info-card-icon svg * {
stroke: inherit !important;
stroke-width: inherit !important;
fill: none !important;
}
.df-page .info-card-icon svg rect,
.df-page .info-card-icon svg circle,
.df-page .info-card-icon svg path {
stroke: #FFFFFF !important;
stroke-width: 2.5 !important;
fill: none !important;
}
.df-page .info-card-icon:hover svg {
transform: scale(1.1) !important;
}
/* Titre des cartes - Utilise h3 */
.df-page .info-card-title {
font-size: var(--font-size-h3) !important; /* 20-22px */
color: var(--color-blue-dark) !important;
font-weight: 400 !important;
line-height: var(--line-height-headings) !important;
margin-top: 0 !important;
margin-bottom: var(--spacing-title-text) !important;
text-align: left !important;
}
/* Texte des cartes */
.df-page .info-card-text {
flex: 1 !important; /* Permet à la carte de s'étendre uniformément */
}
.df-page .info-card-text p {
font-size: var(--font-size-text) !important; /* 15-18px */
line-height: var(--line-height-text) !important; /* 1.7 */
color: var(--color-text-gray) !important;
font-weight: var(--font-weight-normal) !important;
margin: 0 !important;
text-align: justify !important;
}
.df-page .section-comment-marche .cards-grid {
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0.5rem !important;
padding: 0 10px !important;
}
/* =========================
SLIDER COMMENT ÇA MARCHE (MOBILE/TABLETTE)
Desktop : grille normale conservée
Mobile/Tablette : slider horizontal avec scroll-snap
========================= */
/* Container wrapper pour le slider sur mobile/tablette */
.df-page .section-comment-marche .cards-grid-wrapper {
position: relative;
width: 100%;
}
/* Dots de pagination - masqués sur desktop */
.df-page .section-comment-marche .comment-marche-dots {
display: none;
justify-content: center;
gap: 10px;
margin-top: clamp(1rem, 2vw, 1.5rem);
padding: 0 20px;
}
.df-page .section-comment-marche .comment-marche-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #ddd;
border: none;
cursor: pointer;
transition: background-color 0.3s ease;
padding: 0;
}
.df-page .section-comment-marche .comment-marche-dot.active {
background-color: #ed4141;
}
/* Desktop (≥ 1024px) : Grille normale conservée */
@media (min-width: 1024px) {
.df-page .section-comment-marche .cards-grid {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
overflow-x: visible !important;
scroll-snap-type: none !important;
gap: 0.5rem !important;
padding: 0 10px !important;
}
.df-page .section-comment-marche .cards-grid .info-card {
flex: none !important;
min-width: auto !important;
max-width: none !important;
scroll-snap-align: none !important;
}
.df-page .section-comment-marche .comment-marche-dots {
display: none !important;
}
}
/* =========================
SLIDER POURQUOI NOUS (CSS PUR - SANS JS)
Slider natif avec CSS Scroll Snap
========================= */
.df-page .pourquoi-nous-slider-wrapper {
position: relative !important;
max-width: 1200px !important;
margin: 2rem auto !important;
padding: 0 20px !important;
}
/* Desktop : Grille normale (3 colonnes) */
.df-page .pourquoi-nous-cards-slider {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: clamp(1.5rem, 3vw, 2rem) !important;
max-width: 1200px !important;
margin: 0 auto !important;
}
/* Mobile/Tablette : Slider horizontal avec scroll-snap */
@media (max-width: 1024px) {
.df-page .pourquoi-nous-cards-slider {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: thin !important;
scrollbar-color: var(--color-red-primary) transparent !important;
gap: 1.5rem !important;
padding: 0 10px 20px 10px !important;
margin: 0 !important;
}
.df-page .pourquoi-nous-cards-slider::-webkit-scrollbar {
height: 6px !important;
}
.df-page .pourquoi-nous-cards-slider::-webkit-scrollbar-track {
background: transparent !important;
}
.df-page .pourquoi-nous-cards-slider::-webkit-scrollbar-thumb {
background-color: var(--color-red-primary) !important;
border-radius: 3px !important;
}
.df-page .pourquoi-nous-cards-slider .info-card {
flex: 0 0 calc(100% - 20px) !important;
min-width: calc(100% - 20px) !important;
max-width: calc(100% - 20px) !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
}
}
@media (min-width: 769px) and (max-width: 1024px) {
.df-page .pourquoi-nous-cards-slider .info-card {
flex: 0 0 calc(50% - 15px) !important;
min-width: calc(50% - 15px) !important;
max-width: calc(50% - 15px) !important;
}
}
/* =========================
SLIDER TITRE DE SÉJOUR
========================= */
.df-page .df-custom-slider-section {
padding: 0 !important; /* Espace blanc supprimé */
background-color: #FFFFFF !important;
padding-bottom: 40px !important;
}
.df-page .df-custom-container {
max-width: 100% !important; /* Largeur maximale supprimée */
margin: 0 !important; /* Marges supprimées */
padding: 0 !important; /* Padding supprimé */
}
.df-page .slider-title-section {
text-align: center !important;
margin: 0 !important; /* Toutes les marges supprimées */
padding: clamp(0.5rem, 1vw, 0.75rem) 0 !important; /* Padding vertical minimal uniquement */
}
/* Titre dans slider-title-section - Réduit de 2px */
.df-page .slider-title-section .section-title {
font-size: var(--font-size-h2) !important; /* Utilise la même taille que h2 */
margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important; /* Marge réduite */
}
/* Sous-titre dans slider-title-section - Taille réduite */
.df-page .slider-title-section .section-subtitle {
font-size: var(--font-size-text) !important; /* Utilise la même taille que p */
}
.df-page .slider-section {
position: relative !important;
max-width: 100% !important; /* Largeur maximale supprimée */
margin: 0 !important; /* Marges supprimées */
padding: 0 !important; /* Padding supprimé */
}
.df-page .slider-container-custom {
overflow: hidden !important;
position: relative !important;
margin: 0 !important; /* Marges supprimées */
}
.df-page .slider-wrapper-custom {
display: flex !important;
gap: 30px !important;
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.df-page .slider-card {
flex-shrink: 0 !important;
width: 445px !important;
min-width: 445px !important;
max-width: 445px !important;
min-height: 400px !important; /* Hauteur minimale pour stabilité */
background-color: var(--color-bg-white) !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
border-left: 4px solid var(--color-red-primary) !important;
padding: clamp(1.5rem, 2vw, 2rem) !important; /* 24-32px uniformisé */
display: flex !important;
flex-direction: column !important;
text-align: left !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative;
overflow: hidden;
}
.df-page .slider-card h3 {
font-size: var(--font-size-h3) !important;
font-weight: 400 !important;
margin-bottom: var(--spacing-title-text) !important;
}
.df-page .slider-card p {
font-size: var(--font-size-text) !important;
line-height: var(--line-height-text) !important;
margin-bottom: var(--spacing-paragraph) !important;
}
/* Accent rouge subtil au hover comme info-card */
.df-page .slider-card::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
background: linear-gradient(to bottom, var(--color-red-primary), rgba(237, 65, 65, 0.7));
transition: width 0.3s ease;
}
.df-page .slider-card:hover::before {
width: 6px;
}
.df-page .slider-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
}
.df-page .slider-card-content {
flex: 1 !important;
overflow: hidden !important;
}
.df-page .slider-card-text {
transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
overflow: hidden !important;
position: relative !important;
}
.df-page .slider-card-content.collapsed .slider-card-text {
max-height: 300px !important; /* Hauteur augmentée */
}
.df-page .slider-card-content.collapsed .slider-card-text::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 60px !important;
background: linear-gradient(to bottom, transparent, var(--color-bg-white)) !important;
}
.df-page .slider-card-actions {
margin-top: 1.5rem !important;
padding-top: 1.5rem !important;
border-top: 1px solid var(--color-border-subtle) !important;
}
/* Bouton Voir plus - Système typographique appliqué */
.df-page .btn-voir-plus {
background-color: transparent !important;
color: var(--color-blue-dark) !important;
border: 1px solid rgba(17, 43, 85, 0.3) !important;
padding: 0.5rem 1rem !important;
border-radius: 4px !important;
font-size: var(--font-size-sm) !important; /* 14px */
font-weight: var(--font-weight-medium) !important;
line-height: var(--line-height-relaxed) !important;
cursor: pointer !important;
width: 100% !important;
transition: background-color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
color 0.3s cubic-bezier(0.4, 0, 0.2, 1),
border-color 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.df-page .btn-voir-plus:hover {
background-color: var(--color-red-very-light) !important;
border-color: var(--color-red-primary) !important;
color: var(--color-red-dark) !important;
}
.df-page .slider-btn {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
background-color: transparent !important;
color: #112B55 !important;
border: 1px solid rgba(17, 43, 85, 0.2) !important;
width: 36px !important;
height: 36px !important;
border-radius: 50% !important;
cursor: pointer !important;
}
.df-page .slider-btn-left {
left: 0 !important;
}
.df-page .slider-btn-right {
right: 0 !important;
}
.df-page .slider-dots-custom {
display: flex !important;
gap: 10px !important;
justify-content: center !important;
margin-top: clamp(2.5rem, 4vw, 3.5rem) !important; /* Espace ajouté entre section grise et bullets */
margin-bottom: clamp(1rem, 2vw, 1.5rem) !important; /* Espace en bas */
}
.df-page .slider-dot-custom {
width: 12px !important;
height: 12px !important;
border-radius: 50% !important;
background-color: #ddd !important;
border: none !important;
cursor: pointer !important;
}
.df-page .slider-dot-custom.active {
background-color: #ed4141 !important;
}
.df-page .highlight-box {
background-color: #fff5f5 !important;
border-left: 4px solid #ed4141 !important;
padding: 1.25rem 1.5rem !important;
margin: 1.5rem 0 !important;
border-radius: 4px !important;
}
/* Icône pour les cartes slider - Style comme info-card avec hover */
.df-page .slider-card-icon {
width: 64px;
height: 64px;
margin: 0 0 clamp(0.5rem, 1vw, 0.75rem) 0 !important; /* Aligné à gauche */
background-color: var(--color-blue-dark) !important;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
cursor: pointer;
}
.df-page .slider-card-icon:hover {
background-color: var(--color-red-primary) !important;
transform: translateY(-2px) scale(1.05) !important;
box-shadow: 0 4px 12px rgba(237, 65, 65, 0.3) !important;
}
.df-page .slider-card-icon svg {
width: 32px;
height: 32px;
stroke: #FFFFFF !important;
stroke-width: 2.5 !important;
stroke-linecap: round !important;
stroke-linejoin: round !important;
fill: none !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.df-page .slider-card-icon svg * {
stroke: inherit !important;
stroke-width: inherit !important;
fill: none !important;
}
.df-page .slider-card-icon svg rect,
.df-page .slider-card-icon svg circle,
.df-page .slider-card-icon svg path {
stroke: #FFFFFF !important;
stroke-width: 2.5 !important;
fill: none !important;
}
.df-page .slider-card-icon:hover svg {
transform: scale(1.1) !important;
}
/* H3 Slider Card - Augmenté de 3px */
.df-page .slider-card h3 {
color: var(--color-blue-dark) !important;
font-size: var(--font-size-h3) !important; /* Utilise la même taille que h3 */
font-weight: 400 !important;
line-height: var(--line-height-headings) !important; /* Utilise le même line-height que h3 */
margin-bottom: var(--spacing-title-text) !important; /* Utilise le même espacement que h3 */
margin-top: 0 !important;
text-align: left !important; /* Aligné à gauche */
}
/* Texte des cartes slider - Augmenté de 1px */
.df-page .slider-card-text p {
text-align: justify !important; /* Justifié comme info-card */
font-size: var(--font-size-text) !important; /* Utilise la même taille que p */
color: var(--color-text-gray) !important;
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-text) !important; /* Utilise le même line-height que p */
margin-bottom: 1rem !important;
margin-top: 0 !important;
}
.df-page .slider-card-text .info-list li {
font-size: var(--font-size-text) !important; /* Utilise la même taille que li */
text-align: justify !important;
}
/* =========================
FAQ - Design minimaliste avec variations de couleurs
========================= */
.df-page .faq-container {
max-width: 800px !important;
margin: clamp(1.5rem, 3vw, 2rem) auto !important;
padding: 0 !important;
}
.df-page .faq-item {
background-color: var(--color-bg-white) !important;
border-radius: 6px !important;
margin-bottom: clamp(0.5rem, 1vw, 0.75rem) !important;
overflow: hidden !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
border: 1px solid var(--color-border-subtle) !important;
border-left: 3px solid var(--color-blue-dark) !important;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
position: relative !important;
}
/* Variations de couleurs : alternance rouge/bleu */
.df-page .faq-item:nth-child(odd) {
border-left-color: var(--color-blue-dark) !important;
}
.df-page .faq-item:nth-child(even) {
border-left-color: var(--color-red-primary) !important;
}
/* Item actif avec fond subtil */
.df-page .faq-item.active {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
border-color: var(--color-border-light) !important;
}
.df-page .faq-item.active:nth-child(odd) {
background: linear-gradient(to right, rgba(17, 43, 85, 0.02), var(--color-bg-white)) !important;
border-left-color: var(--color-blue-dark) !important;
}
.df-page .faq-item.active:nth-child(even) {
background: linear-gradient(to right, rgba(237, 65, 65, 0.02), var(--color-bg-white)) !important;
border-left-color: var(--color-red-primary) !important;
}
.df-page .faq-question {
background-color: transparent;
border: none;
width: 100%;
padding: clamp(0.875rem, 1.5vw, 1.125rem) clamp(1rem, 2vw, 1.25rem) !important;
text-align: left;
cursor: pointer;
position: relative;
transition: all 0.25s ease !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 1rem !important;
}
.df-page .faq-question:hover {
background-color: rgba(0, 0, 0, 0.01) !important;
}
/* H3 FAQ - Taille réduite un peu */
.df-page .faq-question h3 {
margin: 0 !important;
color: var(--color-blue-dark) !important;
font-size: var(--font-size-h3) !important; /* Utilise la même taille que h3 */
font-weight: 400 !important;
line-height: var(--line-height-headings) !important;
flex: 1 !important;
}
/* Icône indicateur minimaliste */
.df-page .faq-question::after {
content: '+';
color: var(--color-text-gray) !important;
font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
font-weight: 300 !important;
line-height: 1 !important;
transition: transform 0.25s ease, color 0.25s ease !important;
flex-shrink: 0 !important;
}
.df-page .faq-item.active .faq-question::after {
content: '−';
transform: rotate(0deg) !important;
color: var(--color-blue-dark) !important;
}
.df-page .faq-item.active:nth-child(even) .faq-question::after {
color: var(--color-red-primary) !important;
}
.df-page .faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.df-page .faq-item.active .faq-answer {
max-height: 500px;
}
.df-page .faq-answer-content {
padding: 0 clamp(1rem, 2vw, 1.25rem) clamp(0.875rem, 1.5vw, 1.125rem) !important;
background-color: transparent !important;
border-top: 1px solid var(--color-border-subtle) !important;
margin: 0 !important;
}
.df-page .faq-answer-content p {
color: var(--color-text-gray) !important;
font-size: var(--font-size-text) !important; /* 15-18px conforme */
line-height: var(--line-height-text) !important; /* 1.7 */
margin: 0 0 var(--spacing-paragraph) 0 !important;
padding-top: var(--spacing-title-text) !important;
text-align: justify !important;
}
.df-page .faq-answer-content p:last-child {
margin-bottom: 0 !important;
}
/* =========================
CTA FINALE
========================= */
.df-page .cta-section {
background-color: var(--color-blue-dark) !important;
background-image: url('https://demarches-en-france.fr/wp-content/uploads/2025/06/accompagnement-naturalisation-francaise.jpg');
background-size: cover;
background-position: center;
width: 100% !important;
padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) !important; /* Hauteur réduite */
text-align: center !important;
color: white !important;
position: relative !important;
}
.df-page .cta-section::before {
content: '';
position: absolute;
inset: 0;
background-color: rgba(17, 43, 85, 0.8);
pointer-events: none;
}
.df-page .cta-section .container {
position: relative !important;
z-index: 1 !important;
max-width: 1200px !important;
margin: 0 auto !important;
}
/* H2 CTA Finale - Conforme au système typographique */
.df-page .cta-section h2 {
font-size: var(--font-size-h2) !important; /* 22px mobile -> 32px desktop */
font-weight: 600 !important;
line-height: var(--line-height-headings) !important;
color: var(--color-bg-white) !important;
margin: 0 0 var(--spacing-title-text) 0 !important;
}
.df-page .alert-box.white {
background-color: transparent !important;
border-radius: 8px !important;
padding: 2rem !important;
max-width: 900px !important;
margin: 2rem auto !important;
}
/* Texte CTA finale - Conforme au système typographique */
.df-page .alert-box.white p {
color: var(--color-bg-white) !important;
font-size: var(--font-size-text) !important; /* 15-18px */
font-weight: var(--font-weight-normal) !important;
line-height: var(--line-height-text) !important; /* 1.7 */
margin: 0 0 var(--spacing-paragraph) 0 !important;
}
/* =========================
RESPONSIVE - Système typographique appliqué
========================= */
/* =========================
TABLETTE (≤ 1024px) : Slider pour Comment ça marche
========================= */
@media (max-width: 1024px) {
/* TABLETTE : slider horizontal natif pour "Comment ça marche" (avec swipe) */
.df-page .section-comment-marche .cards-grid {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
gap: 1rem !important;
padding: 0 20px !important;
margin: 0 !important;
}
.df-page .section-comment-marche .cards-grid::-webkit-scrollbar {
display: none !important;
}
.df-page .section-comment-marche .cards-grid .info-card {
flex: 0 0 calc(50% - 30px) !important;
min-width: calc(50% - 30px) !important;
max-width: calc(50% - 30px) !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
height: auto !important;
min-height: 200px !important;
}
.df-page .section-comment-marche .comment-marche-dots {
display: flex !important;
margin-top: clamp(1rem, 2vw, 1.5rem) !important;
}
}
@media (max-width: 768px) {
.df-page .hero-section {
padding: clamp(2rem, 5vw, 3rem) 0 !important;
min-height: auto;
}
/* Les tailles h1-h4 utilisent déjà clamp(), pas besoin de redéfinir */
.df-page .content-section {
width: 100% !important;
margin: 0 !important;
padding: var(--spacing-section) clamp(0.75rem, 2vw, 1rem) !important; /* Espacement mobile 48-64px */
}
.df-page .hero-container {
grid-template-columns: 1fr !important;
gap: 30px !important;
padding: 0 20px !important;
}
.df-page .two-columns {
grid-template-columns: 1fr !important;
gap: clamp(2rem, 4vw, 3rem) !important; /* Espacement vertical cohérent */
padding: 0 clamp(1rem, 3vw, 1.5rem) !important;
}
.df-page .cards-grid {
padding: 20px !important;
grid-template-columns: 1fr !important;
}
/* Le slider CSS pour "Pourquoi nous" est déjà géré par les media queries ci-dessus */
/* =========================
SLIDER COMMENT ÇA MARCHE - MOBILE (≤ 768px)
Ajustements spécifiques au mobile : carte pleine largeur
(Les styles de base du slider sont hérités de la media query tablette)
========================= */
/* Sur mobile, chaque carte prend 100% de la largeur visible (slider 1 carte) */
.df-page .section-comment-marche .cards-grid .info-card {
flex: 0 0 calc(100% - 40px) !important;
min-width: calc(100% - 40px) !important;
max-width: calc(100% - 40px) !important;
min-height: 220px !important;
}
/* Espace réduit entre les cartes et les dots sur mobile pour qu'ils se collent */
.df-page .section-comment-marche .comment-marche-dots {
margin-top: clamp(1rem, 2vw, 1.5rem) !important;
}
.df-page .slider-section {
padding: 0 clamp(0.5rem, 1.5vw, 0.75rem) !important; /* Padding réduit */
}
.df-page .slider-container-custom {
margin: 0 !important;
}
.df-page .slider-card {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
}
/* Les tailles de titres utilisent clamp() et s'adaptent automatiquement */
.df-page .section-subtitle {
font-size: var(--font-size-text) !important; /* 15-18px conforme */
max-width: 100% !important;
}
.df-page .alert-box.white p {
font-size: var(--font-size-base) !important; /* 16px */
}
.df-page .faq-container {
padding: 0 clamp(0.75rem, 2vw, 1rem) !important;
}
}
@media (max-width: 480px) {
.df-page .hero-container {
padding: 0 clamp(1rem, 4vw, 1.25rem) !important;
}
/* Les tailles h1-h4 utilisent déjà clamp(), pas besoin de redéfinir */
.df-page .cards-grid {
padding: 20px !important;
grid-template-columns: 1fr !important;
}
/* =========================
SLIDER COMMENT ÇA MARCHE - MOBILE (≤ 480px)
Slider horizontal avec scroll-snap natif
========================= */
.df-page .section-comment-marche .cards-grid {
display: flex !important;
grid-template-columns: none !important;
overflow-x: auto !important;
overflow-y: hidden !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
-ms-overflow-style: none !important;
gap: 1rem !important;
padding: 0 20px !important;
margin: 0 !important;
}
.df-page .section-comment-marche .cards-grid::-webkit-scrollbar {
display: none !important;
}
/* Chaque carte prend la largeur complète du conteneur visible */
.df-page .section-comment-marche .cards-grid .info-card {
flex: 0 0 calc(100% - 40px) !important;
min-width: calc(100% - 40px) !important;
max-width: calc(100% - 40px) !important;
scroll-snap-align: start !important;
scroll-snap-stop: always !important;
height: auto !important;
min-height: 220px !important;
}
/* Afficher les dots sur mobile pour "Comment ça marche" uniquement */
.df-page .section-comment-marche .comment-marche-dots {
display: flex !important;
}
/* Le slider CSS pour "Pourquoi nous" est déjà géré par les media queries ci-dessus */
.df-page .slider-section {
padding: 0 8px !important;
}
.df-page .slider-container-custom {
margin: 0 !important;
}
.df-page .slider-card {
width: 100% !important;
min-width: 100% !important;
max-width: 100% !important;
padding: 1.5rem !important;
}
/* Les tailles de titres et paragraphes utilisent clamp() et s'adaptent automatiquement */
.df-page .section-title {
padding: 0 clamp(0.625rem, 2vw, 0.75rem) !important;
}
/* Les tailles de texte utilisent clamp() et s'adaptent automatiquement */
.df-page .cta-button {
font-size: var(--font-size-sm) !important; /* 14px */
}
.df-page .btn-submit {
font-size: var(--font-size-sm) !important; /* 14px */
}
.df-page .form-label {
font-size: var(--font-size-xs) !important; /* 13px */
}
.df-page .form-control,
.df-page .form-select,
.df-page .form-textarea {
font-size: var(--font-size-sm) !important; /* 14px */
}
.df-page .btn-voir-plus {
font-size: var(--font-size-xs) !important; /* 13px */
}
}
/* Styles pour les erreurs de formulaire */
.df-page .form-error {
display: none;
color: var(--color-red-primary);
font-size: var(--font-size-xs);
margin-top: 0.25rem;
font-weight: var(--font-weight-medium);
}
.df-page .form-control.error,
.df-page .form-select.error {
border-color: var(--color-red-primary) !important;
box-shadow: 0 0 0 3px rgba(237, 65, 65, 0.1) !important;
}
.df-page .required-asterisk {
color: var(--color-red-primary);
font-weight: var(--font-weight-bold);
}
.df-page .form-help {
display: block;
font-size: var(--font-size-xs);
color: var(--color-text-gray);
margin-top: 0.25rem;
}
.df-page .checkbox-group {
margin-bottom: 0.75rem !important; /* Réduit pour diminuer la hauteur */
}
.df-page .checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.5rem;
cursor: pointer;
font-size: var(--font-size-sm);
line-height: var(--line-height-relaxed);
}
.df-page .checkbox-label input[type="checkbox"] {
margin-top: 0.2rem;
cursor: pointer;
width: 18px;
height: 18px;
flex-shrink: 0;
}
.df-page .btn-submit:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.df-page .btn-loader {
display: inline-block;
}
/* =========================
CLASSES UTILITAIRES TYPOGRAPHIQUES
Système typographique réutilisable
========================= */
/* Tailles de texte utilitaires */
.df-page .text-large {
font-size: 1.2rem !important; /* 19.2px */
line-height: var(--line-height-text) !important;
}
.df-page .text-medium {
font-size: 1.1rem !important; /* 17.6px */
line-height: var(--line-height-text) !important;
}
.df-page .text-small {
font-size: 0.9rem !important; /* 14.4px */
line-height: var(--line-height-relaxed) !important;
}
.df-page .text-xs {
font-size: var(--font-size-xs) !important; /* 13px */
line-height: var(--line-height-relaxed) !important;
}
/* Couleurs de texte */
.df-page .text-primary {
color: var(--color-blue-dark) !important;
}
.df-page .text-secondary {
color: var(--color-text-gray) !important;
}
.df-page .text-accent {
color: var(--color-red-primary) !important;
}
.df-page .text-dark {
color: var(--color-text-gray) !important;
}
.df-page .text-white {
color: var(--color-bg-white) !important;
}
/* Font weights */
.df-page .font-normal {
font-weight: var(--font-weight-normal) !important;
}
.df-page .font-medium {
font-weight: var(--font-weight-medium) !important;
}
.df-page .font-semibold {
font-weight: 400 !important;
}
.df-page .font-bold {
font-weight: 600 !important;
}
/* Alignements */
.df-page .text-center {
text-align: center !important;
}
.df-page .text-left {
text-align: left !important;
}
.df-page .text-right {
text-align: right !important;
}
/* Line heights */
.df-page .leading-normal {
line-height: var(--line-height-text) !important;
}
.df-page .leading-relaxed {
line-height: 1.8 !important;
}
.df-page .leading-tight {
line-height: var(--line-height-headings) !important;
}
/* Lien de contact */
.df-page .link-contact {
font-size: 0.9rem !important; /* 14.4px */
font-weight: var(--font-weight-medium) !important;
}
/* Message d'erreur (complémentaire à .form-error existant) */
.df-page .error-message {
font-size: var(--font-size-xs) !important;
color: var(--color-red-primary) !important;
margin-top: 0.5rem !important;
display: block !important;
}
/* Responsive pour les classes utilitaires */
@media (max-width: 768px) {
.df-page .text-large {
font-size: 1rem !important; /* 16px */
}
}
@media (max-width: 480px) {
.df-page .text-large {
font-size: 1rem !important; /* 16px */
}
}