.elementor-27574 .elementor-element.elementor-element-e0f4550{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:-80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;}/* Start custom CSS *//* ============================================
         CHARTE GRAPHIQUE DÉMARCHES FRANCE - STRICTE
         Application complète selon spécifications
      ============================================ */
      
      /* Reset */
      * {
        box-sizing: border-box !important;
        margin: 0;
        padding: 0;
      }
      
      html {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      
      body {
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
        font-size: 16px !important;
        line-height: 1.6 !important;
        color: #112B55 !important;
        background-color: #F8F9FA !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      
      main {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
      }
      
      /* Typographie - Charte stricte */
 
      
      h2 {
        font-size: 30px !important;
        font-weight: 600 !important;
        color: #112B55 !important;
        border-left: 5px solid #ed4141 !important;
        padding-left: 20px !important;
        margin-bottom: 1.5rem !important;
        line-height: 1.3 !important;
        margin-top: 0 !important;
        text-align:  !important;
      }
      
      h3 {
        font-size: 22px !important;
        font-weight: 600 !important;
        color: #112B55 !important;
        margin-bottom: 1rem !important;
        line-height: 1.4 !important;
        margin-top: 0 !important;
        text-align: center !important;
      }
      
      h4 {
        font-size: 20px !important;
        font-weight: 500 !important;
        color: #112B55 !important;
        margin-bottom: 0.75rem !important;
        line-height: 1.4 !important;
        margin-top: 0 !important;
        text-align: center !important;
      }
      
      p {
        font-size: 16px !important;
        font-weight: 400 !important;
        color: #676767 !important;
        line-height: 1.7 !important;
        margin-bottom: 1rem !important;
        text-align: center !important;
        text-justify: inter-word !important;
      }
      
      strong {
        font-weight: 600 !important;
        color: #112B55 !important;
      }
      
      
      
      /* ============================================
         STRUCTURE DES SECTIONS - FULL WIDTH
      ============================================ */
      
      section {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        margin-left: calc(50% - 50vw) !important;
        margin-right: calc(50% - 50vw) !important;
        display: block !important;
        box-sizing: border-box !important;
        position: relative !important;
        padding: 4rem 2rem !important;
        overflow-x: hidden !important;
      }
      
      /* Section Catégories - Centrage spécifique */
      #categories {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
      }
      
      /* Fonds alternés selon charte graphique */
      /* Hero section : Blanc */
      .hero-section {
        background: #FFFFFF !important;
      }
      
      /* Première section après hero : Gris */
      .hero-section + .section {
        background: #F8F9FA !important;
      }
      
      /* Sections normales : Gris par défaut */
      .section {
        background: #F8F9FA !important;
      }
      
      /* Sections alternées (section-alt) : Blanc */
      .section-alt {
        background: #FFFFFF !important;
      }
      
      /* Section après section-alt : Gris */
      .section-alt + .section {
        background: #F8F9FA !important;
      }
      
      /* Section après section normale : Blanc (si c'est section-alt) */
      .section:not(.section-alt) + .section-alt {
        background: #FFFFFF !important;
      }
      
      /* Section newsletter garde son fond spécial */
      .newsletter-section {
        background-image: url('https://demarches-en-france.fr/wp-content/uploads/2025/06/div.relative-1.png') !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        position: relative !important;
      }
      
      .newsletter-section::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(135deg, rgba(17, 43, 85, 0.85) 0%, rgba(17, 43, 85, 0.75) 100%) !important;
        z-index: 0 !important;
        pointer-events: none !important;
      }
      
      /* ============================================
         CONTENEURS INTERNES
      ============================================ */
      
      .container-custom,
      .container {
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        position: relative !important;
      }
      
      /* Section Catégories - Container centré */
      #categories .container-custom {
        max-width: 1400px !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
      }
      
      /* Paragraphes centrés dans sections (par défaut) */
      section p {
        font-size: 18px !important;
        line-height: 1.7 !important;
        padding: 0px 40px !important;
        text-align: center !important;
        color: #676767 !important;
      }
      
      /* Paragraphes dans hero section - contenu large */
      .hero-section p {
        font-size: 16px !important;
        padding: 0px 120px !important;
        text-align: left !important;
        color: #676767 !important;
      }
      
      /* Paragraphes dans cartes - justifiés */
      .card-text,
      .category-card p {
        font-size: 16px !important;
        padding: 0 !important;
        text-align: justify !important;
        text-justify: inter-word !important;
      }
      
      /* ============================================
         HERO SECTION
      ============================================ */
      
      .hero-section .container-custom {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 3rem !important;
        align-items: center !important;
        padding: 0 !important;
      }
      
      .hero-content {
        grid-column: 1;
      }
      
      .hero-image {
        grid-column: 2;
        grid-row: 1;
        width: 100%;
        height: 100%;
        min-height: 400px;
        background-image: url('https://demarches-en-france.fr/wp-content/uploads/2025/06/div.relative-1.png');
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
        border-radius: 8px;
      }
      
      .hero-section h1 {
        padding: 0 !important;
      }
      
      .hero-section .subtitle {
        font-size: 18px !important;
        color: #676767 !important;
        line-height: 1.7 !important;
        padding: 0 !important;
        text-align: left !important;
        font-style: italic !important;
        margin-bottom: 1.5rem !important;
      }
      
      .hero-section .intro-text {
        font-size: 16px !important;
        color: #676767 !important;
        line-height: 1.7 !important;
        padding: 0 !important;
        text-align: left !important;
        margin: 0 !important;
      }
      
      /* ============================================
         SECTIONS DE CONTENU
      ============================================ */
      
      .section-title {
        text-align: center !important;
        margin-bottom: 3rem !important;
      }
      
      .section-title h2 {
        display: inline-block !important;
        padding: 0 40px !important;
        border-left: 5px solid #ed4141 !important;
        padding-left: 20px !important;
        margin: 0 auto !important;
      }
      
      /* Section Catégories - titre sans bordure */
      #categories .section-title h2 {
        border-left: none !important;
        padding-left: 0 !important;
        font-size: 36px !important;
      }
      
      /* ============================================
         GRID DE CARTES
      ============================================ */
      
      .cards-grid,
      .grid {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
        gap: 2rem !important;
        max-width: 1200px !important;
        margin: 0 auto !important;
        padding: 0 40px !important;
        width: 100% !important;
        box-sizing: border-box !important;
        justify-items: center !important;
        justify-content: center !important;
      }
      
      .grid-2 {
        grid-template-columns: repeat(2, 1fr) !important;
      }
      
      .grid-3 {
        grid-template-columns: repeat(3, 1fr) !important;
      }
      
      .grid-4 {
        grid-template-columns: repeat(4, 1fr) !important;
      }
      
      /* Section Catégories - Centrage complet */
      #categories .container-custom {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
      }
      
      #categories .section-title {
        width: 100% !important;
        text-align: center !important;
      }
      
      /* Section Catégories - Grille centrée */
      #categories .grid.grid-4 {
        max-width: 1200px !important;
        gap: 2rem !important;
        padding: 0px !important;
        margin: 0 auto !important;
        width: 100% !important;
        box-sizing: border-box !important;
        justify-items: stretch !important;
        justify-content: center !important;
      }
      
      #categories .category-card {
        min-width: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      
      /* Card avec padding amélioré */
      .card {
        background: #FFFFFF !important;
        padding: 3rem 2.5rem !important;
        border-radius: 8px !important;
        border-left: 4px solid #ed4141 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
        height: 100%;
        margin-bottom: 1rem !important;
      }
      
      .card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
      }
      
      .card-icon {
        width: 64px;
        height: 64px;
        background: rgba(237, 65, 65, 0.1);
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto 2rem auto;
        font-size: 2rem;
      }
      
      .card-title {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        color: #112B55 !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
      }
      
      .card-text {
        font-size: 16px !important;
        color: #676767 !important;
        line-height: 1.7 !important;
        text-align: justify !important;
        text-justify: inter-word !important;
      }
      
      .card-list {
        list-style: none;
        padding: 0;
        margin: 0;
      }
      
      .card-list li {
        padding: 0.5rem 0;
        color: #676767;
        position: relative;
        padding-left: 1.5rem;
        font-size: 16px;
        line-height: 1.7;
      }
      
      .card-list li::before {
        content: '●';
        position: absolute;
        left: 0;
        color: #ed4141;
        font-weight: bold;
      }
      
      /* Category Cards */
      .category-card {
        background: #FFFFFF !important;
        padding: 2rem !important;
        border-radius: 8px !important;
        border-left: 4px solid #ed4141 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        transition: all 0.3s ease !important;
        display: flex !important;
        flex-direction: column !important;
        height: 100% !important;
      }
      
      .category-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
      }
      
      .category-icon {
        font-size: 2rem;
        margin: 0 auto 1.5rem auto;
        display: block;
        text-align: center;
      }
      
      .category-title {
        font-size: 1.25rem !important;
        font-weight: 600 !important;
        color: #112B55 !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
      }
      
      .category-card p {
        font-size: 16px !important;
        color: #676767 !important;
        line-height: 1.7 !important;
        text-align: justify !important;
        text-justify: inter-word !important;
        margin-bottom: 1.5rem !important;
      }
      
      /* CTA Button dans les cartes - Small */
      .category-card .cta-button,
      .card .cta-button {
        display: inline-block !important;
        background: #ed4141 !important;
        border: 2px solid #ed4141 !important;
        color: #FFFFFF !important;
        padding: 0.6rem 1.2rem !important;
        border-radius: 6px !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        text-decoration: none !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        text-align: center !important;
        width: auto !important;
        margin-top: auto !important;
        align-self: center !important;
      }
      
      .category-card .cta-button:hover,
      .card .cta-button:hover {
        background: #112B55 !important;
        border-color: #112B55 !important;
        transform: translateY(-2px) !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
      }
      
      .category-card {
        display: flex !important;
        flex-direction: column !important;
      }
      
      /* ============================================
         ALERTES / BOÎTES D'INFORMATION
      ============================================ */
      
      /* Section Veille Juridique - Design carte moderne centré */
      #veille .container-custom {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
      }
      
      #veille .highlight-box {
        background: #FFFFFF !important;
        border-left: 4px solid #ed4141 !important;
        padding: 3rem 2.5rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
        color: #676767 !important;
        text-align: center !important;
        display: block !important;
        margin: 0 auto !important;
        max-width: 1000px !important;
        width: 100% !important;
        transition: all 0.3s ease !important;
      }
      
      #veille .highlight-box:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1) !important;
      }
      
      #veille .highlight-box h3 {
        color: #112B55 !important;
        font-weight: 600 !important;
        font-size: 24px !important;
        margin-bottom: 1.5rem !important;
        text-align: center !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      
      #veille .highlight-box p {
        font-size: 16px !important;
        line-height: 1.7 !important;
        color: #676767 !important;
        text-align: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        max-width: 100% !important;
      }
      
      /* Autres alert-box gardent leur style */
      .alert-box {
        background: #F8F9FA !important;
        border-left: 4px solid #ed4141 !important;
        padding: 1.25rem 1.5rem !important;
        border-radius: 4px !important;
        color: #676767 !important;
        text-align: left !important;
        display: flex !important;
        align-items: flex-start !important;
        gap: 0.75rem !important;
        margin: 1.5rem auto !important;
        max-width: 800px !important;
      }
      
      .alert-box strong {
        color: #112B55 !important;
        font-weight: 600 !important;
        margin-bottom: 0.5rem !important;
      }
      
      .alert-box p {
        margin: 0 !important;
        text-align: left !important;
      }
      
      /* ============================================
         NEWSLETTER SECTION
      ============================================ */
      
      .newsletter-section .container-custom {
        position: relative !important;
        z-index: 1 !important;
        padding: 0 40px !important;
        text-align: center !important;
      }
      
      .newsletter-section h2 {
        color: #FFFFFF !important;
        border-left: none !important;
        padding-left: 0 !important;
        border-bottom: 4px solid #ed4141 !important;
        padding-bottom: 15px !important;
        display: inline-block !important;
        margin: 0 auto !important;
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
      }
      
      .newsletter-section p {
        color: rgba(255, 255, 255, 0.9) !important;
        max-width: 700px !important;
        margin: 0 auto 1.5rem !important;
        font-size: 18px !important;
        text-align: center !important;
      }
      
      .newsletter-form {
        display: flex !important;
        gap: 1rem !important;
        max-width: 500px !important;
        margin: 0 auto !important;
      }
      
      .newsletter-form input {
        flex: 1 !important;
        padding: 0.75rem 1rem !important;
        border: 1px solid #ddd !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        color: #112B55 !important;
      }
      
      .newsletter-form input:focus {
        border: 2px solid #ed4141 !important;
        outline: none !important;
        box-shadow: 0 0 0 3px rgba(237, 65, 65, 0.1) !important;
      }
      
      .newsletter-form button {
        display: inline-block !important;
        background: #ed4141 !important;
        border: 2px solid #ed4141 !important;
        color: #FFFFFF !important;
        padding: 1rem 2rem !important;
        border-radius: 6px !important;
        font-size: 16px !important;
        font-weight: 500 !important;
        transition: all 0.3s ease !important;
        cursor: pointer !important;
        white-space: nowrap !important;
      }
      
      .newsletter-form button:hover {
        background: #112B55 !important;
        border-color: #112B55 !important;
      }
      
      
      /* ============================================
         RESPONSIVE - TABLET (≤768px)
      ============================================ */
      
      @media (max-width: 768px) {
        h1 {
          font-size: 32px !important;
        }
        
        h2 {
          font-size: 24px !important;
          padding: 0 20px !important;
        }
        
        h3 {
          font-size: 20px !important;
        }
        
        p {
          font-size: 15px !important;
        }
        
        section {
          padding: 3rem 10px !important;
        }
        
        section p {
          padding: 0px 20px !important;
        }
        
        .hero-section p {
          padding: 0px 40px !important;
        }
        
        .hero-section .container-custom {
          grid-template-columns: 1fr !important;
          gap: 2rem !important;
        }
        
        .hero-image {
          grid-column: 1 !important;
          grid-row: 2 !important;
          min-height: 300px !important;
        }
        
        .section-title h2 {
          padding: 0 20px !important;
        }
        
        .cards-grid,
        .grid {
          grid-template-columns: 1fr !important;
          padding: 0 10px !important;
          gap: 1rem !important;
        }
        
        .grid-2,
        .grid-3,
        .grid-4 {
          grid-template-columns: 1fr !important;
        }
        
        .card,
        .category-card {
          padding: 1.5rem !important;
        }
        
        .newsletter-section .container-custom {
          padding: 0 20px !important;
        }
        
        .newsletter-form {
          flex-direction: column !important;
        }
        
        .newsletter-form button {
          width: 100% !important;
        }
      }
      
      /* ============================================
         RESPONSIVE - MOBILE (≤480px)
      ============================================ */
      
      @media (max-width: 480px) {
        h1 {
          font-size: 24px !important;
        }
        
        h2 {
          font-size: 20px !important;
          padding: 0 10px !important;
        }
        
        h3 {
          font-size: 18px !important;
        }
        
        p {
          font-size: 14px !important;
        }
        
        section {
          padding: 2rem 10px !important;
        }
        
        section p {
          padding: 0px 10px !important;
        }
        
        .hero-section p {
          padding: 0px 10px !important;
        }
        
        .section-title h2 {
          padding: 0 10px !important;
        }
        
        #categories .section-title h2 {
          font-size: 24px !important;
        }
        
        .cards-grid,
        .grid {
          padding: 0 10px !important;
          gap: 1rem !important;
        }
        
        .card,
        .category-card {
          padding: 1rem !important;
        }
        
        .newsletter-section .container-custom {
          padding: 0 15px !important;
        }
        
        .newsletter-section h2 {
          font-size: 20px !important;
        }
      }/* End custom CSS */