/* =============================
   STICKY FOOTER (PUBLIC)
   Objectif : sur desktop/tablette/laptop, le footer reste en bas
   même quand la page a peu de contenu.
   (sur mobile ça ne gêne pas)
============================= */
html,
body {
    height: 100%;
    /* évite tout scroll horizontal accidentel (éléments trop larges) */
    overflow-x: hidden;
}

body {
    /*
      Sur mobile, 100vh peut créer un “scroll fantôme” (barre d’adresse).
      On privilégie les unités dynamiques quand dispo.
    */
    min-height: 100vh;
    min-height: 100svh;
    min-height: 100dvh;

    display: flex;
    flex-direction: column;

    overflow-x: hidden;
}

main {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    /* garde les sections en haut et permet de pousser la pagination en bas si peu de contenu */
    min-height: 0;
    margin-bottom: 0 !important;
}

.site-footer {
    margin-top: auto;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --header-h: 98px;
    /* ajuste si besoin (logo + padding header) */
    --footer-h: 110px;
    /* ta hauteur footer */
    --actualites-hero-h: 156px;
    /* hauteur de la barre "Actualités" */
    --pagination-h: 64px;
    /* hauteur barre pagination */
}

/* Ajuste les variables quand le header devient plus compact (mobile) */
@media (max-width: 900px) {
    :root {
        --header-h: 76px;
        --actualites-hero-h: 148px;
    }
}

/* ✅ Correction intermédiaire : écrans entre 640px et 900px */
@media (min-width: 641px) and (max-width: 900px) {
    :root {
        --header-h: 54px;
        /* hauteur réelle observée sur ces formats */
        --actualites-hero-h: 144px;
        /* ajuste selon ton rendu visuel */
    }
}

@media (max-width: 640px) {
    :root {
        --header-h: 70px;
        --actualites-hero-h: 140px;
    }
}

/* Ajuste la hauteur "référence" du header (sert aux barres fixed) selon l'écran */
@media (max-width: 900px) {
    :root {
        --header-h: 82px;
    }
}

@media (min-width: 641px) and (max-width: 900px) {
    :root {
        --header-h: 54px;
    }
}

@media (max-width: 640px) {
    :root {
        --header-h: 52.5px;
    }
}

/* Base responsive scaling (proportionnel) */
html {
    font-size: 16px;
}

@media (max-width: 1200px) {
    html {
        font-size: 15px;
    }
}

/* laptop */
@media (max-width: 900px) {
    html {
        font-size: 14px;
    }
}

/* tablette */
@media (max-width: 640px) {
    html {
        font-size: 13px;
    }
}

/* mobile */

body {
    margin: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: #1f2933;
    background: #f5f5f7;
}

/* Réserve toujours de la place pour le footer (évite que la pagination passe dessous)
   -> si le footer n'est pas fixed, ça ne gêne pas (juste un peu plus d'air)
   -> si le footer est fixed/overlapping, ça sauve la mise
*/
main {
    /*padding-bottom: calc(var(--footer-h) + 0+ env(safe-area-inset-bottom));*/
    padding-bottom: env(safe-area-inset-bottom);
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* HEADER */

.site-header {
    background: #0f172a;
    color: #fff;
    padding: 0.75rem 0;
    border-bottom: 1px solid rgb(255, 255, 255);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.logo a {
    display: flex;
    align-items: center;
}

.logo span {
    color: #60a5fa;
}

/* LOGO IMAGE */
.logo-img {
    max-height: 83px;
    /* m ajuste 32–42 si besoin */
    /* width: auto;
    height: auto;*/
    max-width: 220px;
    display: block;
    object-fit: contain;
}

@media (max-width: 900px) {
    .logo-img {
        max-height: 64px;
        max-width: 180px;
    }
}

@media (max-width: 640px) {
    .logo-img {
        max-height: 56px;
        max-width: 160px;
    }
}

.main-nav {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-shrink: 0;
}

.main-nav a {
    font-size: 0.95rem;
    opacity: 0.9;
    white-space: nowrap;
}

.main-nav a:hover {
    opacity: 1;
}

/* ===== NAV responsive ===== */
.nav-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

@media (max-width: 900px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .main-nav {
        position: absolute;
        top: 100%;
        right: 1.5rem;
        left: 1.5rem;
        background: #0f172a;
        border: 1px solid rgba(255, 255, 255, .10);
        border-radius: .75rem;
        padding: .75rem;
        display: none;
        /* fermé par défaut */
        flex-direction: column;
        /* liens en colonne */
        gap: .65rem;
    }

    .main-nav.is-open {
        display: flex;
    }

    .main-nav a {
        padding: .6rem .75rem;
        border-radius: .55rem;
        opacity: 1;
    }

    .main-nav a:hover {
        background: rgba(255, 255, 255, .08);
    }
}

/* =============================
   HERO PAGES (actualites / guide / simulation / mentions, etc.)
   Objectif : hero collé au header, hauteur flexible (pas fixe),
   typo responsive via clamp(), et moins d’espace sous le hero.
============================= */

/* HERO SECTIONS STICKY SOUS LE HEADER (pour toutes les pages principales) */
.actualites-hero,
.guide-hero,
.dispositifs-hero,
.simulation-hero {
    position: fixed;
    /* ✅ reste visible sous le header */
    top: var(--header-h);
    /* ✅ juste en dessous du header */
    left: 0;
    right: 0;
    width: 100%;
    z-index: 900;
    /* ✅ au-dessus du contenu, sous le header */

    background: #0f172a;
    color: #fff;
    padding: 1.5rem 0 1rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* ✅ petit relief */
}

/* ✅ espace sous le hero pour éviter que le contenu ne soit caché */
.actualites-hero+section,
.guide-hero+section,
.dispositifs-hero+section,
.simulation-hero+section {
    margin-top: var(--actualites-hero-h);
}

/* ✅ hauteur de référence du hero, ajustée selon la taille d’écran */
:root {
    --actualites-hero-h: 160px;
}

@media (max-width: 900px) {
    :root {
        --actualites-hero-h: 140px;
    }
}

@media (max-width: 640px) {
    :root {
        --actualites-hero-h: 128px;
    }
}

.actualites-hero-inner {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

/* === HERO ACTUALITES/SECTIONS: nouveau style responsive et micro-ajustements === */
.actualites-hero-text h1 {
    margin: 0 0 .5rem;
    line-height: 1.12;
    /* plus petit sur mobile, reste lisible sur desktop */
    font-size: clamp(1.05rem, 3.8vw, 1.7rem) !important;
    letter-spacing: -0.02em;
}

.actualites-hero-text p {
    margin: 0;
    opacity: .95;
    max-width: 46rem;
    /* texte plus compact sur mobile */
    font-size: clamp(.8rem, 2.1vw, .95rem) !important;
}

/* Micro-ajustements très petits écrans */
@media (max-width: 420px) {
    .actualites-hero-text h1 {
        font-size: 1.1rem !important;
    }

    .actualites-hero-text p {
        font-size: .8rem !important;
    }
}

/* Hero + section suivante : éviter les “trous” */
.actualites-hero+section,
.guide-hero+section,
.dispositifs-hero+section {
    margin-top: 0;
}

@media (max-width: 900px) {

    .actualites-hero,
    .guide-hero,
    .dispositifs-hero {
        padding: 1.6rem 0 1rem;
    }

    .actualites-hero-inner {
        flex-direction: column;
        align-items: stretch;
    }
}

@media (max-width: 640px) {

    .actualites-hero,
    .guide-hero,
    .dispositifs-hero {
        padding: 1.2rem 0 .9rem;
    }
}

/* Filtres (page actualités) : responsive */
.actualites-filters {
    margin-top: 1rem;
}

.filter-row {
    display: flex;
    gap: .6rem;
    align-items: center;
    flex-wrap: wrap;
}

.filter-input {
    flex: 1 1 220px;
    min-width: 180px;
}

.filter-select {
    flex: 0 0 auto;
    min-width: 170px;
}

@media (max-width: 640px) {

    .filter-input,
    .filter-select {
        width: 100%;
        min-width: 0;
        flex: 1 1 100%;
    }
}

/* ==== FIX HERO MOBILE (collé au header, sans espace) ==== */
@media (max-width: 640px) {
    /*.site-header {
        position: sticky;
        top: 0;
        z-index: 1000;
    }*/

    .actualites-hero,
    .guide-hero,
    .dispositifs-hero,
    .simulation-hero {
        position: sticky !important;
        /* ✅ reste collé sous le header */
        top: var(--header-h);
        /* ✅ colle juste sous le header */
        z-index: 900;
    }

}

/* =============================
   PAGINATION (PUBLIC)
   Objectifs:
   - pagination compacte (moins haute)
   - NE JAMAIS se comporter comme une barre sticky/fixed
   - éviter tout chevauchement avec le footer
============================= */

.pagination-wrap {
    margin: 0.75rem 0 0;
    /* si la page est courte, on pousse la pagination en bas du main */
    margin-top: auto;
    padding-bottom: 1.25rem;
}

.pagination-wrap .pagination {
    display: flex;
    align-items: center;
    /*justify-content: space-between;*/
    gap: 0.5rem;
    flex-wrap: wrap;

    /* compact */
    padding: 0.35rem 0;
    font-size: 0.9rem;
    line-height: 1.2;

    /* IMPORTANT: neutralise toute règle sticky/fixed venant d’ailleurs */
    position: static !important;
    bottom: auto !important;
    top: auto !important;
}

.pagination-wrap .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.65rem;
    border-radius: 0.55rem;
    line-height: 1.2;
    white-space: nowrap;
}

.pagination-wrap .page-info {
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .pagination-wrap {
        margin-top: auto;
        padding-bottom: 0.9rem;
    }

    .pagination-wrap .pagination {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.25rem 0;
        gap: 0.4rem;
        font-size: 0.85rem;
        flex-wrap: nowrap;
        /* ⬅️ clé : interdit le retour à la ligne */
    }

    .pagination-wrap .page-link {
        padding: 0.4rem 0.7rem;
        justify-content: center;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .pagination-wrap .page-info {
        flex: 0 0 auto;
        /* ne s’étire jamais */
        text-align: center;
        white-space: nowrap;
    }
}

/* Sécurité anti-chevauchement : on force le footer à ne pas recouvrir le contenu */
.site-footer {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    z-index: 0;
}

/* La pagination doit rester au-dessus si un z-index traîne ailleurs */
.pagination-wrap {
    position: relative;
    z-index: 1;
}

/* HERO */

.hero {
    margin: 0;
    padding: 3.5rem 0 2.5rem;
    background: linear-gradient(135deg, #0f172a 0%, #0f172a 52%, #f5f5f7 52%);
    color: #fff;
}

.hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
    gap: 2rem;
    align-items: center;
}

.hero-text {
    max-width: 420px;
}

.hero-text h1 {
    font-size: clamp(1.35rem, 4.6vw, 2rem);
    margin-bottom: 1rem;
    text-shadow: 0 2px 6px rgba(15, 23, 42, 0.7);
}

.hero-text p {
    font-size: clamp(.9rem, 2.4vw, 1rem);
    max-width: 32rem;
    text-shadow: 0 1px 4px rgba(15, 23, 42, 0.7);
}

.hero-ctas {
    margin-top: 1.5rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.hero-highlight {
    background: rgba(15, 23, 42, 0.92);
    padding: 1.5rem;
    border-radius: 0.75rem;
    backdrop-filter: blur(8px);
    border: 1px solid rgba(148, 163, 184, 0.6);
    color: #e5e7eb;
}

.hero-highlight-title {
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.hero-highlight ul {
    padding-left: 1.1rem;
    margin: 0;
}

.hero-highlight li {
    margin-bottom: .35rem;
}

/* ===== HERO responsive ===== */
@media (max-width: 900px) {
    .hero {
        padding: 2.25rem 0 2rem;
        background: #0f172a;
        /* on évite le gradient coupé bizarre sur mobile */
    }

    .hero-inner {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .hero-text {
        max-width: none;
    }

    .hero-highlight {
        padding: 1.15rem;
    }
}

@media (max-width: 640px) {
    .hero {
        padding: 1.75rem 0 1.5rem;
    }

    .hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-ctas .btn {
        width: 100%;
    }
}

/* Quand une section suit directement un hero : on réduit l'espace */
.actualites-hero+.actualites-list,
.actualites-hero+.legal-page,
.actualites-hero+.guide-section,
.dispositifs-hero+.dispositifs-list,
.guide-hero+.guide-section {
    padding-top: 1rem;
}

@media (max-width: 640px) {

    .actualites-hero+.actualites-list,
    .actualites-hero+.legal-page,
    .actualites-hero+.guide-section,
    .dispositifs-hero+.dispositifs-list,
    .guide-hero+.guide-section {
        padding-top: .6rem;
    }
}

/* DISPOSITIFS PREVIEW */

.dispositifs-preview {
    padding: 2.5rem 0;
}

/* Espacements sections : plus compact sur mobile */
.guide-section,
.legal-page,
.actualites-list,
.dispositifs-list {
    padding: 2rem 0;
}

@media (max-width: 900px) {

    .guide-section,
    .legal-page,
    .actualites-list,
    .dispositifs-list {
        padding: 1.5rem 0;
    }
}

@media (max-width: 640px) {

    .guide-section,
    .legal-page,
    .actualites-list,
    .dispositifs-list {
        padding: 1.1rem 0;
    }
}

.dispositifs-preview h2 {
    margin-bottom: 1.5rem;
}

.cards-grid {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 1024px) {
    .cards-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cards-grid {
        grid-template-columns: 1fr;
    }
}

.card-dispositif {
    background: #fff;
    border-radius: 0.9rem;
    padding: 1.3rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    border: 1px solid #e5e7eb;
}

.card-dispositif h3 {
    margin: 0 0 .4rem;
    font-size: 1.05rem;
}

.card-dispositif p {
    font-size: 0.9rem;
    color: #4b5563;
    min-height: 2.2rem;
}

.link-arrow {
    display: inline-flex;
    margin-top: .75rem;
    font-size: 0.9rem;
    color: #2563eb;
}

/* HOME: carousel dispositifs (défilement par “pas” + fondu) */
.home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1rem;
}

.home-head-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.home-head-arrow:hover {
    transform: translateX(1px);
}

.home-carousel {
    position: relative;
}

.home-carousel-viewport {
    overflow: hidden;
    /* évite que le bord droit de la 3e carte soit “coupé” à cause des arrondis/sub-pixels */
    padding-right: 2px;
    margin-right: -2px;
}

.home-carousel-track {
    display: flex;
    gap: 16px;
    transform: translateX(0);
    will-change: transform;
}

.home-carousel-track.is-animating {
    /* Transition plus douce (moins brutale) */
    transition: transform 2s cubic-bezier(0.22, 1, 0.36, 1);
}

.home-carousel-card {
    /* 3 cartes EXACTEMENT visibles (on évite de voir un bout de la 4e) */
    flex: 0 0 calc((100% - (16px * 2)) / 3);
    background: #fff;
    border-radius: 0.9rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
}

.home-carousel-link {
    display: block;
    padding: 1.1rem 1.1rem;
    height: 100%;
}

.home-carousel-card h3 {
    margin: 0 0 0.45rem;
    font-size: 1.05rem;
}

.home-carousel-card p {
    margin: 0;
    font-size: 0.9rem;
    color: #4b5563;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.home-carousel-card.is-fade-out {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.home-carousel-card.is-fade-in {
    animation: homeFadeIn 0.35s ease;
}

@keyframes homeFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@media (max-width: 900px) {
    .home-carousel-card {
        /* 2 cartes visibles sur tablettes */
        flex-basis: calc((100% - 16px) / 2);
    }
}

@media (max-width: 640px) {
    .home-carousel-card {
        flex-basis: 85vw;
    }
}

/* LEAD SECTION */

.lead-section {
    padding: 2.5rem 0;
    background: #0b1120;
    color: #e5e7eb;
}

.lead-inner {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.7fr);
}

.lead-form-wrapper {
    background: #020617;
    padding: 1.5rem;
    border-radius: 0.9rem;
    border: 1px solid #1e293b;
}

.lead-form .form-row {
    display: flex;
    gap: 1rem;
}

.form-field {
    margin-bottom: 1rem;
    flex: 1;
}

.form-field label {
    display: block;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
    color: #e5e7eb;
}

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border-radius: 0.5rem;
    border: 1px solid #cbd5e1;
    font-size: 0.95rem;
}

.form-field textarea {
    resize: vertical;
}

.full-width {
    width: 100%;
}

/* GUIDE FISCAL */

.guide-hero {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 950;
    height: var(--actualites-hero-h);
    display: flex;
    align-items: center;
    background: #0f172a;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    margin-top: 0;
}

.guide-hero h1 {
    margin: 0 0 0.75rem;
    font-size: 2rem;
}

.guide-hero p {
    max-width: 42rem;
    font-size: 1rem;
    color: #cbd5f5;
    margin: 0;
}

.guide-section {
    min-height: calc(100vh - var(--header-h) - var(--actualites-hero-h));
    padding-top: calc(var(--actualites-hero-h) + 24px);
    padding-bottom: 3rem;

    display: flex;
    align-items: center;
    /* centrage vertical */
}

.guide-card {
    max-width: 800px;
    margin: 0 auto;
    background: #020617;
    border-radius: 0.9rem;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.5);
    border: 1px solid #1e293b;
}

.guide-card h2 {
    margin-top: 0;
    margin-bottom: 0.4rem;
    font-size: 1.1rem;
    color: #e5e7eb;
}

.guide-card p {
    margin: 0.2rem 0;
    font-size: 0.9rem;
    color: #cbd5f5;
}

.guide-meta {
    font-size: 0.8rem;
    color: #9ca3af;
    margin-bottom: 0.75rem;
}

.guide-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    align-items: center;
}

.link-muted {
    font-size: 0.85rem;
    color: #9ca3af;
}

/* BOUTONS & ALERTES */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-size: 0.9rem;
    border: none;
    cursor: pointer;
    font-weight: 500;
}

.btn-primary {
    background: #2563eb;
    color: #ffffff;
}

.btn-secondary {
    background: #e5e7eb;
    color: #111827;
}

.wysiwyg .btn,
.wysiwyg .btn-primary,
.wysiwyg .btn-secondary {
    color: #ffffff;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-secondary:hover {
    background: #d1d5db;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}

.alert-success {
    background: #ecfdf3;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.alert-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
}

/* FOOTER */

.site-footer {
    background: #020617;
    color: #9ca3af;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    padding-top: 0.65rem;
    border-top: 1px solid rgb(255, 255, 255);
}

.footer-inner {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: minmax(0, 1.5fr) repeat(2, minmax(0, 1fr));
    padding-bottom: .75rem;
}

.footer-logo {
    font-weight: 600;
    margin-bottom: 0.4rem;
    color: #e5e7eb;
}

.footer-col h4 {
    margin: 0 0 .4rem;
    font-size: 0.9rem;
    color: #e5e7eb;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.75rem;
}

.footer-col li {
    margin-bottom: 0.3rem;
}

.footer-baseline {
    margin: 0;
    font-size: 0.75rem;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    align-items: center;

    /* même typo que footer-legal */
    font-size: 0.75rem;
    line-height: 1.35;

    color: #cbd5f5;
}

.footer-links a {
    color: #cbd5f5;
    opacity: 0.95;
}

.footer-links a:hover {
    text-decoration: underline;
    opacity: 1;
}

.footer-sep {
    opacity: 0.55;
}

.footer-legal {
    margin: 0;
    /* enlève la marge par défaut du <p> */
    font-size: 0.75rem;
    /* un poil plus petit */
    line-height: 1.35;
    text-align: justify;
}

/* Colonne légale + liens */
.footer-col-legal {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.footer-bottom {
    border-top: 1px solid #111827;
    padding: 0.35rem 0;
    font-size: 0.75rem;
}

/* Variante compacte : 2 colonnes au lieu de 3 */
.footer-inner.footer-inner-compact {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
    gap: 1rem;
    padding-bottom: 0.4rem;
    /* au lieu de .75rem */
}

.two-cols {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr);
}

.col-text ul {
    padding-left: 1.2rem;
}

.col-text li {
    margin-bottom: .3rem;
}

.card-form {
    background: #fff;
    padding: 1.5rem;
    border-radius: 0.9rem;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    border: 1px solid #e5e7eb;
}

.small-muted {
    font-size: 0.8rem;
    color: #6b7280;
}

/* ===========================
   PAGE DISPOSITIFS FISCAUX
=========================== */

/* ===========================
   PAGE DISPOSITIFS – même HERO que la page ACTUALITÉS
=========================== */
.dispositifs-hero {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 950;
    height: var(--actualites-hero-h);
    display: flex;
    align-items: center;
    background: #0f172a;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.dispositifs-hero h1 {
    margin: 0 0 0.75rem;
    font-size: 2rem;
}

.dispositifs-hero p {
    max-width: 42rem;
    font-size: 1rem;
    color: #cbd5f5;
}

/* ===========================
   PAGE DISPOSITIFS – même LISTE/GRILLE que la page ACTUALITÉS
=========================== */
.dispositifs-list {
    background: #f3f4f6;
    padding-top: calc(var(--actualites-hero-h) + 24px);
    padding-bottom: calc(var(--pagination-h) + 24px);
}

.dispositifs-list .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (max-width: 1024px) {
    .dispositifs-list .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .dispositifs-list .cards-grid {
        grid-template-columns: 1fr;
    }
}

/* ===========================
   PAGE ACTUALITÉS
=========================== */

/* Simulation – alias du hero (même style que Actualités/Dispositifs/Guide) */
.simulation-hero {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 950;
    height: var(--actualites-hero-h);
    display: flex;
    align-items: center;
    background: #0f172a;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.simulation-hero h1 {
    margin: 0 0 0.75rem;
    font-size: 2rem;
}

.simulation-hero p {
    max-width: 42rem;
    font-size: 1rem;
    color: #cbd5f5;
    margin: 0;
}

.actualites-hero {
    position: fixed;
    left: 0;
    right: 0;
    top: var(--header-h);
    z-index: 950;
    height: var(--actualites-hero-h);
    display: flex;
    align-items: center;
    background: #0f172a;
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255, 255, 255, .06);
}

.actualites-hero h1 {
    margin: 0 0 0.75rem;
    font-size: 2rem;
}

.actualites-hero p {
    max-width: 42rem;
    font-size: 1rem;
    color: #cbd5f5;
}

/* ===========================
   PAGE ACTUALITÉS – GRILLE STABLE 3x3
=========================== */

.actualites-list {
    background: #f3f4f6;
    padding-top: calc(var(--actualites-hero-h) + 24px);
    padding-bottom: calc(var(--pagination-h) + 24px);
}

.actualites-list .cards-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .actualites-list .cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ================================
   HERO – titre sur une seule ligne
================================ */

.actualite-hero h1 {
    white-space: nowrap;
    /* interdit le retour à la ligne */
    overflow: hidden;
    /* cache le surplus */
    text-overflow: ellipsis;
    /* … si trop long */
    max-width: 100%;

    /* Typo responsive intelligente */
    font-size: clamp(1.4rem, 3.5vw, 2.1rem);
    line-height: 1.2;
}

/* ================================
   HERO – sécurité anti-débordement
================================= */
.actualite-hero .actualite-intro {
    display: block;
    /* 👈 indispensable */
    white-space: nowrap;
    /* force une seule ligne */
    overflow: hidden;
    /* cache le surplus */
    text-overflow: ellipsis;
    /* … */
    max-width: 100%;
}

@media (max-width: 640px) {
    .actualites-list .cards-grid {
        grid-template-columns: 1fr;
    }
}

.actualites-hero-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.actualites-hero-text h1 {
    margin: 0 0 .35rem;
}

.actualites-hero-text p {
    margin: 0;
}

.actualites-filters {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

.actualites-filters .filter-row {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(150px, 220px) auto auto;
    gap: 10px;
    align-items: center;
    width: 100%;
    max-width: 680px;
}

/* Boutons plus compacts dans le header (évite le wrap quand Réinitialiser apparaît) */
.actualites-filters .btn {
    padding: .45rem 1.05rem;
    font-size: .85rem;
}

/* Reset présent mais invisible => pas de shift de layout */
.btn-reset.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

.filter-input,
.filter-select {
    width: 100%;
    min-width: 0;
    padding: .55rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .45);
    background: rgba(2, 6, 23, .25);
    color: #e5e7eb;
    outline: none;
}

.filter-input::placeholder {
    color: rgba(203, 213, 245, .8);
}

.filter-select {
    appearance: none;
}

@media (max-width: 900px) {
    .actualites-hero-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .actualites-filters {
        justify-content: stretch;
    }

    .actualites-filters .filter-row {
        grid-template-columns: 1fr;
        max-width: none;
    }
}

/* ===========================
   PAGE ACTUALITÉS – Cartes strictement identiques en hauteur
=========================== */
.news-card {
    position: relative;
    background: #ffffff;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
    display: flex;
    flex-direction: column;
    cursor: pointer;
}

.news-card-image {
    position: relative;
    width: 100%;
    height: 160px;
    overflow: hidden;
    background: #e5e7eb;
}

.news-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.news-card-body {
    padding: 1.2rem 1.3rem;
    display: flex;
    flex-direction: column;
    gap: .6rem;
    flex: 1;
}

/* Supprime la marge par défaut sur les h3 dans les cards pour éviter un trop grand espace vertical */
.news-card-body h3 {
    margin: 0;
}

/* Only keep basic styles: margin, font-size, color, line-height, max-height, overflow.
   Remove any clamp or justification here (handled below). */
.actualites-list .news-card .news-card-body p {
    position: relative;
    margin: 0;
    font-size: 0.9rem;
    color: #4b5563;
    line-height: 1.45;
    /* justification propre */
    text-align: justify;
    text-align-last: left;
    /* 3 lignes max */
    max-height: calc(1.45em * 3);
    overflow: hidden;
    /* réserve de la place pour l’ellipsis */
    padding-right: 1.2em;
    /* assure un rendu stable sur Safari */
    display: block;
}

.news-card-body .news-meta {
    font-size: 0.75rem;
    color: #6b7280;
}

/* Overlay clickable for news cards and hover effect */
.news-card-overlay {
    position: absolute;
    inset: 0;
    z-index: 5;
    text-indent: -9999px;
}

.news-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.12);
}


/* ===========================
    ACTUALITÉS : Extrait (chapo) — 3 lignes, justifié, dernière ligne non justifiée
    Objectif: éviter le comportement Safari/Firefox avec -webkit-line-clamp
 =========================== */

/* Titre sur 2 lignes (on garde le clamp, il ne pose pas le même souci) */
.news-card h3 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    /* fallback Firefox/others */
    line-height: 1.3;
    max-height: calc(1.3em * 2);
    min-height: calc(1.3em * 2);
}

/* Chapo/extrait: on NE clamp PAS avec -webkit-line-clamp (problème de justification).
   On limite par hauteur + overflow, et on force une ellipsis stable. */
/* Ellipsis pour l’extrait sur actualités */
.actualites-list .news-card .news-card-body p::after {
    content: "…";
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fff;
    padding-left: .25em;
}

/* Titre dispositif : 2 lignes max + espace contrôlé */
.dispositifs-list .news-card.dispositif-card .news-card-body h3 {
    margin: 0;
    margin-bottom: .25rem;
    /* réduit l’espace titre -> chapo */

    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    /* fallback */
    line-height: 1.3;
    max-height: calc(1.3em * 2);
    min-height: calc(1em * 2);
}

/* Chapo dispositif : 2 lignes, typo identique à actualités */
.dispositifs-list .news-card.dispositif-card .news-card-body p {
    position: relative;
    margin: 0;
    font-size: .9rem;
    /* même taille que actualités */
    color: #4b5563;
    line-height: 1.45;

    text-align: justify;
    text-align-last: left;

    max-height: calc(1.45em * 2);
    /* 2 lignes */
    overflow: hidden;

    padding-right: 1.2em;
    /* place pour l’ellipsis */
    display: block;
}

/* Ellipsis stable en bas à droite */
.dispositifs-list .news-card.dispositif-card .news-card-body p::after {
    content: "…";
    position: absolute;
    right: 0;
    bottom: 0;
    background: #fff;
    padding-left: .25em;
}

/* Body un poil plus compact sur dispositifs */
.dispositifs-list .news-card.dispositif-card .news-card-body {
    gap: .45rem;
}

/* ===========================
   DISPOSITIFS – resserrer espace titre / chapo
=========================== */

/* Réduit l’espace vertical interne uniquement pour dispositifs */
.dispositifs-list .news-card.dispositif-card .news-card-body {
    gap: .1rem;
    /* au lieu de .6rem */
}

/* Sécurité : aucun margin parasite */
.dispositifs-list .news-card.dispositif-card .news-card-body h3 {
    margin: 0;
}

.dispositifs-list .news-card.dispositif-card .news-card-body p {
    margin: 0;
}

/* DISPOSITIFS : léger espace entre chapo et source */
.dispositifs-list .news-card.dispositif-card .news-meta {
    margin-top: .35rem;
}

/* ===========================
   PAGE DÉTAIL ACTUALITÉ
=========================== */

.actualite-hero {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    z-index: 950;
    height: 220px;
    padding: 2rem 0;
    background: linear-gradient(135deg, #0f172a 0%, #020617 100%);
    color: #e5e7eb;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    align-items: flex-start;
}

.actualite-meta {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    align-items: center;
    font-size: .85rem;
    color: #cbd5f5;
}

.chip {
    display: inline-flex;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .4);
    background: rgba(2, 6, 23, .35);
    color: #e5e7eb;
    font-weight: 600;
    font-size: .75rem;
}

.sep {
    opacity: .7;
}

.actualite-back {
    margin: 0 0 .6rem;
}

.actualite-back a {
    color: #cbd5f5;
    opacity: .9;
    font-size: .85rem;
}

.actualite-back a:hover {
    opacity: 1;
    text-decoration: underline;
}

.actualite-intro {
    /*max-width: 46rem;*/
    color: #cbd5f5;
    line-height: 1.6;

    /* garde un hero visuellement cohérent même si le chapo est long */
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.actualite-ctas {
    margin-top: 1.25rem;
    display: flex;
    gap: .75rem;
    flex-wrap: wrap;
}

.actualite-ctas-with-context {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.actualite-ctas-with-context .cta-context {
    font-size: 0.85rem;
    opacity: 0.75;
    margin: auto;
}

.actualite-ctas-with-context .cta-context a {
    text-decoration: none;
}

.actualite-ctas-with-context .cta-context a:hover {
    text-decoration: underline;
    opacity: 1;
}

.actualite-content {
    padding-top: 24px;
    padding-bottom: 3rem;
    background: #f5f5f7;
}

.actualite-layout {
    display: grid;
    gap: 2rem;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: start;
}

/* Pages piliers : aside aligné en haut */
.actualite-layout--pilier .actualite-aside {
    top: calc(var(--header-h) + 16px);
}

.actualite-article {
    background: #fff;
    border-radius: .9rem;
    padding: 1.6rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.actualite-article p,
.actualite-article li {
    color: #374151;
    line-height: 1.7;
}

.actualite-inline-cta {
    margin-top: 1.25rem;
    background: #0b1120;
    color: #e5e7eb;
    border-radius: .9rem;
    padding: 1.25rem 1.3rem;
}

.actualite-inline-cta p {
    color: #cbd5f5;
}

.actualite-aside {
    display: grid;
    gap: 1rem;
    align-content: start;

    /* colonne droite fixe pendant le scroll */
    position: sticky;
    top: calc(var(--header-h) + 220px + 16px);
    /* header + hero actualite (220px) + marge */
    align-self: start;

    /* évite que ça passe sous le footer fixed */
    max-height: calc(100vh - (var(--header-h) + 220px + var(--footer-h) + 32px));
    overflow: auto;
}

.actualite-title-row {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.actualite-back-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .4);
    background: rgba(2, 6, 23, .35);
    color: #cbd5f5;
    font-size: 1rem;
    flex-shrink: 0;
}

.actualite-back-inline:hover {
    background: rgba(2, 6, 23, .55);
    color: #fff;
}

/* ACTUALITÉ DETAIL */
.actualite-cover {
    margin: 0 0 1rem;
    border-radius: 0.9rem;
    overflow: hidden;
    border: 1px solid #e5e7eb;
    background: #fff;
    max-height: 320px;
}

.actualite-cover img {
    display: block;
    width: 100%;
    height: 320px;
    object-fit: cover;
}

.aside-card {
    background: #fff;
    border-radius: .9rem;
    padding: 1.2rem;
    border: 1px solid #e5e7eb;
    box-shadow: 0 8px 20px rgba(15, 23, 42, .06);
}

.aside-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.aside-links li {
    margin-bottom: .4rem;
}

.aside-links a {
    color: #2563eb;
    font-size: .9rem;
}

/* WYSIWYG (contenu TinyMCE) */
.wysiwyg p {
    margin: 0.75rem 0;
}

.wysiwyg h2 {
    margin-top: 1.4rem;
}

.wysiwyg h3 {
    margin-top: 1.1rem;
}

.wysiwyg ul,
.wysiwyg ol {
    padding-left: 1.2rem;
}

.wysiwyg li {
    margin: .35rem 0;
}

.wysiwyg a {
    color: #2563eb;
}

.wysiwyg img {
    max-width: 100%;
    height: auto;
    border-radius: .6rem;
}

.wysiwyg blockquote {
    margin: 1rem 0;
    padding: .75rem 1rem;
    border-left: 4px solid #e5e7eb;
    background: #f9fafb;
    border-radius: .6rem;
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    /*margin-top: 1.25rem;*/
}

.pagination-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--footer-h);
    z-index: 960;
    height: var(--pagination-h);
    display: flex;
    align-items: center;
    background: rgba(243, 244, 246, .96);
    backdrop-filter: blur(6px);
    border-top: 1px solid rgba(229, 231, 235, .9);
}

.page-link {
    padding: .45rem .9rem;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    background: #fff;
}

.page-info {
    color: #6b7280;
    font-size: .9rem;
}

/* RESPONSIVE */

@media (max-width:900px) {
    .actualite-layout {
        grid-template-columns: 1fr;
    }

    .actualite-aside {
        position: static;
        max-height: none;
        overflow: visible;
    }
}

@media (max-width: 900px) {

    .hero-inner,
    .lead-inner,
    .two-cols,
    .footer-inner {
        grid-template-columns: 1fr;
    }

    .hero {
        background: #0f172a;
    }

    .header-inner {
        flex-wrap: wrap;
    }

    .main-nav {
        width: 100%;
        justify-content: flex-end;
    }

    .logo-img {
        height: 32px;
        max-width: 180px;
    }
}

/* ===========================
   ACTUALITÉS – Boutons icônes filtres
=========================== */

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(148, 163, 184, .45);
    background: rgba(2, 6, 23, .25);
    color: #e5e7eb;
    font-size: 16px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
}

.icon-btn:hover {
    background: rgba(2, 6, 23, .45);
    border-color: rgba(148, 163, 184, .75);
    transform: translateY(-1px);
}

.icon-btn:active {
    transform: translateY(0);
}

/* bouton reset invisible mais présent → aucun décalage */
.icon-btn.is-hidden {
    visibility: hidden;
    pointer-events: none;
}

/* grille des filtres stable */
.actualites-filters .filter-row {
    grid-template-columns:
        minmax(180px, 1fr) minmax(150px, 220px) 38px 38px;
}

.dispositif-card-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #e5e7eb 0%, #f3f4f6 100%);
}

/* ===== Accueil: titre de section + flèche ===== */
.home-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.25rem;
}

.home-head-arrow {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
    color: #fff;
    border: 1px solid rgba(15, 23, 42, .2);
    box-shadow: 0 6px 14px rgba(15, 23, 42, .08);
    flex: 0 0 auto;
    transition: transform .15s ease;
}

.home-head-arrow:hover {
    transform: translateX(1px);
}

/* ===== Accueil: carousel dispositifs (défilement droite -> gauche) ===== */
.home-carousel {
    position: relative;
    overflow: hidden;
    padding: 2px 0;
}

/*
  On désactive le « marquee » (défilement continu).
  Le déplacement se fera par pas via JS + transition.
*/
.home-carousel-track {
    display: flex;
    /*gap: 1.25rem;*/
    will-change: transform;
    animation: none !important;
    transform: translateX(0);
}

/* transition uniquement pendant le "pas" */
.home-carousel-track.is-animating {
    transition: transform 650ms ease;
}

/* effets doux sur les cartes (fondu sortie/entrée) */
.home-carousel-item.is-fade-out {
    opacity: 0;
    transition: opacity 380ms ease;
}

.home-carousel-item.is-fade-in {
    opacity: 0;
}

/* on enlève la logique de pause au survol (plus d'animation CSS) */
.home-carousel:hover .home-carousel-track {
    animation: none !important;
}

.home-carousel-item {
    flex: 0 0 calc((100% - (1.25rem * 2)) / 3);
}

@media (max-width:1024px) {
    .home-carousel-item {
        flex-basis: calc((100% - 1.25rem) / 2);
    }
}

@media (max-width:640px) {
    .home-carousel-item {
        flex-basis: 100%;
    }
}


/* ===== Accueil : bloc présentation (remplace "Être rappelé") ===== */
.home-intro {
    background: #ffffff;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    padding: 2.75rem 0 3rem;
}

.home-intro h2 {
    margin: 0 0 0.75rem;
    color: #0f172a;
}

.home-intro p {
    margin: 0.75rem 0 0;
    color: #374151;
    line-height: 1.75;
    max-width: 100%;
    text-align: justify;
}

.home-intro-lead {
    font-size: 1.02rem;
    color: #111827;
}

.home-intro-links {
    margin-top: 1.25rem;
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.home-intro-link {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .45rem .9rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    color: #0f172a;
    font-size: .9rem;
}

.home-intro-link:hover {
    background: #ffffff;
    border-color: #cbd5e1;
    transform: translateY(-1px);
}

/* Quand une section est la dernière avant le footer : réduire l'espace */
.actualites-list+.site-footer,
.dispositifs-list+.site-footer,
.guide-section+.site-footer,
.legal-page+.site-footer {
    margin-top: 0;
}

.actualites-list {
    padding-bottom: 1rem;
}

.dispositifs-list {
    padding-bottom: 1rem;
}

.guide-section {
    padding-bottom: 1rem;
}

.legal-page {
    padding-bottom: 1rem;
}

@media (max-width: 640px) {

    .actualites-list,
    .dispositifs-list,
    .guide-section,
    .legal-page {
        padding-bottom: .6rem;
    }
}

/* =====================================================
   Callback drawer (tab téléphone + panneau coulissant)
===================================================== */
.callback-drawer {
    /* Sert juste de "state holder" via la classe is-open */
    position: static;
}

/* Le bouton téléphone : TOUJOURS collé au bord droit */
.callback-tab {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate3d(0, -50%, 0);
    z-index: 1401;

    width: 46px;
    height: 46px;
    border-radius: 14px 0 0 14px;
    border: 1px solid #e5e7eb;
    border-right: none;
    background: #ffffff;
    box-shadow: 0 14px 40px rgba(15, 23, 42, .16);
    cursor: pointer;
    font-size: 20px;

    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* Le panneau : fixé à droite, sort/entre proprement */
.callback-panel {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translate3d(100%, -50%, 0);
    opacity: 0;
    z-index: 1400;

    width: 320px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(10px);
    border: 1px solid #e5e7eb;
    border-right: none;
    border-radius: 16px 0 0 16px;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .18);
    padding: 14px;

    transition: transform .35s cubic-bezier(.22, 1, .36, 1), opacity .25s ease;
}

/* OUVERT */
.callback-drawer.is-open .callback-panel {
    transform: translate3d(0, -50%, 0);
    opacity: 1;
}

/* Le bouton se décale pour rester collé au panneau */
.callback-drawer.is-open .callback-tab {
    transform: translate3d(-320px, -50%, 0);
}

/* Desktop only */
@media (max-width: 1024px) {

    .callback-tab,
    .callback-panel {
        display: none;
    }
}

/* ===== Callback panel : style premium (réinjecté) ===== */
.callback-panel {
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(229, 231, 235, .9);
    border-right: none;
    border-radius: 18px 0 0 18px;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .22);
    padding: 16px;
}

/* header */
.callback-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.callback-title {
    font-weight: 800;
    font-size: 1rem;
    color: #0f172a;
}

.callback-sub {
    font-size: .82rem;
    color: #6b7280;
    margin-top: 2px;
}

/* close btn */
.callback-close {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: 1px solid rgba(229, 231, 235, .9);
    background: rgba(255, 255, 255, .9);
    cursor: pointer;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.callback-close:hover {
    background: rgba(255, 255, 255, 1);
}

/* form */
.callback-form {
    display: grid;
    gap: 10px;
    margin-top: 8px;
}

/* Inputs texte dans le drawer (ne pas impacter les checkbox) */
.callback-form input:not([type="checkbox"]):not([type="radio"]) {
    width: 100%;
    padding: 10px 12px;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: rgba(255, 255, 255, .96);
    font-size: .92rem;
    outline: none;
}

/* Checkbox du drawer : taille normale */
.callback-form input[type="checkbox"],
.callback-form input[type="radio"] {
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.callback-form input:focus {
    border-color: rgba(37, 99, 235, .55);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

.callback-form .btn {
    width: 100%;
}

/* alerts */
.callback-alert {
    margin: 8px 0 12px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: .85rem;
}

.callback-success {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    color: #065f46;
}

.callback-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #991b1b;
}

.callback-alert.is-fading {
    transition: opacity .6s ease, transform .6s ease;
    opacity: 0;
    transform: translateY(-6px);
}

/* foot */
.callback-foot {
    margin-top: 10px;
    font-size: .75rem;
    color: #9ca3af;

}

/* Consentement RGPD (checkbox + texte) */
.consent {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    margin-top: .75rem;
    font-size: .75rem;
    line-height: 1.45;
    color: inherit;
    /* la couleur se règle par contexte (fond clair/foncé) */
}

.consent input[type="checkbox"] {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: .25rem;
}

.consent span {
    flex: 1 1 auto;
    min-width: 0;
    /* important: évite le décalage à droite sur Safari */
    text-align: justify;
    text-align-last: left;
}

.consent a {
    color: #2563eb;
    text-decoration: underline;
}

/* Fond foncé (cards du site public) : texte plus lisible */
.guide-card .consent,
.lead-form-wrapper .consent {
    color: #cbd5f5;
}

.guide-card .consent a,
.lead-form-wrapper .consent a {
    color: #60a5fa;
}

@media (max-width: 640px) {
    .consent span {
        text-align: left;
    }
}

/* Overlay discret quand le drawer est ouvert */
.drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.28);
    backdrop-filter: blur(1px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
    z-index: 1390;
    /* sous panel(1400) et tab(1401) */
}

.drawer-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.legal-page {
    padding-top: calc(var(--actualites-hero-h) + 1px);
    background: #f5f5f7;
    padding-bottom: 3rem;
}

.legal-page p {
    text-align: justify;
}

.legal-page h2 {
    margin-top: 2rem;
}

.legal-page h3 {
    margin-top: 1.5rem;
}

.hp-field {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* ===== FORMS responsive ===== */
@media (max-width: 640px) {
    .lead-form .form-row {
        flex-direction: column;
        gap: 0;
    }

    .form-field input,
    .form-field select,
    .form-field textarea {
        font-size: 1rem;
        /* lisible sur mobile */
    }
}

/* ===== FOOTER mobile ===== */
@media (max-width: 640px) {
    .site-footer {
        position: static;
    }

    main {
        padding-bottom: 0px;
        /* plus besoin de compenser un footer fixed */
    }

}

/* ================================
   FIX: HERO collé au header (mobile)
   ================================ */
/* Sur certaines pages, le hero est en "fixed" avec un top basé sur --header-h.
   Si --header-h ne matche pas exactement la hauteur réelle du header, ça crée un trou.
   On force le hero à rester dans le flux (normal) : pas de gap. */
.actualites-hero,
.dispositifs-hero,
.actualite-hero,
.guide-hero {
    position: sticky !important;
    /*top: 0 !important;*/
    left: auto !important;
    right: auto !important;
    height: auto !important;
}

/* Si certains blocs ajoutent un margin-top/padding-top automatique, on neutralise */
.actualites-hero {
    margin-top: 0 !important;
}

/* ================================
   FIX: Pagination qui recouvre le contenu
   ================================ */
.pagination-wrap,
.pagination {
    position: static !important;
    bottom: auto !important;
}

.dispositifs-hero .actualites-hero-text p {
    max-width: 1100px;
    text-align: justify;
}

.actualite-inline-cta p {
    text-align: justify;
}

.guide-hero .actualites-hero-text p {
    max-width: 1100px;
    text-align: justify;
}

.actualites-hero .actualites-hero-text p {
    max-width: 1100px;
    text-align: justify;
}

/* ==========================================================
   📰 CONTENU RICHE – NEWS/DISPOSITIFS (wrap texte autour images)
   ========================================================== */

/* Image alignée à gauche */
img.img-left {
    float: left;
    margin: 0 15px 10px 0;
    max-width: 45%;
    height: auto;
}

/* Image alignée à droite */
img.img-right {
    float: right;
    margin: 0 0 10px 15px;
    max-width: 45%;
    height: auto;
}

/* Image centrée */
img.img-center {
    display: block;
    margin: 15px auto;
    float: none;
    max-width: 70%;
    height: auto;
}

/* Évite que TinyMCE / HTML enferme l’image dans un bloc bloquant */
figure.image {
    display: inline;
    margin: 0;
}

/* Le texte doit pouvoir s’écouler autour des images */
.news-content p {
    overflow: visible;
}

/* Sécurité : nettoyage des floats */
.article-content::after,
.news-content::after {
    content: "";
    display: block;
    clear: both;
}

/* ===========================
   STOPPER LE WRAP TEXTE / IMAGE
   (news + dispositifs)
=========================== */
.clear-float {
    clear: both;
}

.hero-subcontext {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: #9ca3af;
    /* même ton que small-muted */
    text-align: center;
}

.hero-subcontext a {
    color: #64748b;
    text-decoration: underline;
}

.actualite-article .wysiwyg p,
.actualite-article .wysiwyg li {
    text-align: justify;
    hyphens: auto;
}