/* MODULAIRE — v1 "structure" : titre + question a gauche, le rond bleu
   occupe l'espace a droite (au meme niveau, a la place du texte retire),
   puis petit comparatif Hier / Avec Swifto.
   Contenu volontairement minimal pour le moment (a etoffer plus tard). */

/* Remonte toute la section (fond identique a #pos, aucune couture
   visible) pour resorber l'ecart laisse par la hauteur de la tablette
   du POS avant le titre. */
#modulaire {
    position: relative;
    isolation: isolate;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 96px;
}

/* Plus de place qu'un .wrap standard (1140px) pour laisser le texte et
   le comparatif respirer en largeur. */
#modulaire .wrap {
    max-width: 1400px;
}

/* Decale a gauche pour occuper l'espace laisse libre par la colonne
   gauche de .modulaire-intro (titre+question passes a droite), au
   meme niveau que le titre plutot que centre en haut de la section. Pas
   d'overflow:hidden sur #modulaire : le halo doit pouvoir deborder de
   la section (au-dessus comme en dessous) au lieu d'etre tronque net
   des que le contenu est plus court que lui — la page clippe deja le
   debordement horizontal via .intro-page { overflow-x: hidden }. */
.modulaire-glow {
    position: absolute;
    z-index: -1;
    top: -52%;
    left: 22%;
    transform: translateX(-30%);
    width: 720px;
    height: 720px;
    max-width: 90vw;
    border-radius: 50%;
    filter: blur(110px);
    background: var(--brand-blue);
    opacity: .16;
    pointer-events: none;
}

/* --- Ligne du haut : titre+question a droite (en quinconce avec les
   autres titres de la page), la colonne de gauche reste vide, c'est
   l'espace occupe par le rond bleu en fond. --- */
.modulaire-intro {
    display: grid;
    grid-template-columns: 1fr 1.1fr;
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
}

.modulaire-intro__left {
    grid-column: 2;
    text-align: right;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.modulaire-intro__left.is-visible { opacity: 1; transform: none; }

.modulaire-title {
    margin: 0;
    font: var(--weight-bold) clamp(24px, 7vw, 52px)/1.25 var(--font-ui);
    letter-spacing: var(--track-tight);
    color: var(--ink);
}
.modulaire-title .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.modulaire-intro__question {
    margin: 18px 0 0;
    font: var(--weight-semibold) clamp(18px, 2vw, 22px)/1.4 var(--font-ui);
    color: var(--ink);
}

/* --- Petit comparatif Sans Swifto / Avec Swifto / Le vrai plus --- */
.modulaire-compare {
    margin-top: clamp(40px, 6vw, 64px);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .6s var(--ease-out), transform .6s var(--ease-out);
}
.modulaire-compare.is-visible { opacity: 1; transform: none; }

.modulaire-compare__col {
    padding: clamp(20px, 2.6vw, 28px);
    border-radius: var(--radius-lg);
}

/* "Sans Swifto" accentue en negatif (fond/bordure rouge discrets, croix
   devant chaque ligne) pour bien marquer que ce n'est pas terrible. */
.modulaire-compare__col--before {
    background: var(--danger-bg);
    border: 1px solid rgba(220, 38, 38, .18);
}

/* "Avec Swifto" accentue en positif (fond/bordure bleu marque, coches
   devant chaque ligne) pour un cote nettement plus sympa. */
.modulaire-compare__col--after {
    background: rgba(11, 61, 145, .08);
    border: 1px solid rgba(11, 61, 145, .22);
}

.modulaire-compare__label {
    margin: 0 0 4px;
    font: var(--weight-semibold) 13px/1.4 var(--font-ui);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--muted);
}
.modulaire-compare__col--before .modulaire-compare__label { color: var(--danger); }
.modulaire-compare__col--after .modulaire-compare__label { color: var(--brand-blue); }
.modulaire-compare__col--plus .modulaire-compare__label {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.modulaire-compare__lead {
    margin: 0 0 14px;
    font: var(--weight-bold) clamp(18px, 2.2vw, 22px)/1.3 var(--font-ui);
    color: var(--ink);
}

.modulaire-compare__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.modulaire-compare__col li {
    font: var(--type-lead);
    color: var(--muted);
    padding-left: 26px;
    position: relative;
}
.modulaire-compare__col li::before {
    position: absolute;
    left: 0;
    top: .05em;
    font: var(--weight-bold) 15px/1.4 var(--font-ui);
}
.modulaire-compare__col--before li::before { content: '✕'; color: var(--danger); }
.modulaire-compare__col--after li::before { content: '✓'; color: var(--brand-blue); }
.modulaire-compare__col--before li { color: var(--body); }
.modulaire-compare__col--after li { color: var(--ink); }

/* "Le vrai plus" : mis en avant par rapport aux deux autres colonnes
   (fond degrade tres leger + bordure pleine couleur marque). Titre
   colle a gauche comme les deux autres colonnes ; le message occupe
   l'espace restant et est centre verticalement dedans ; la bascule
   (barre + phrase) reste plaquee en bas de la colonne. */
.modulaire-compare__col--plus {
    display: flex;
    flex-direction: column;
    background: linear-gradient(160deg, rgba(11, 61, 145, .08), rgba(122, 60, 219, .08));
    border: 1px solid rgba(11, 61, 145, .28);
}

.modulaire-compare__plus-text {
    flex: 1;
    display: flex;
    align-items: center;
    margin: 0;
    font: var(--weight-semibold) clamp(16px, 1.8vw, 18px)/1.5 var(--font-ui);
    color: var(--ink);
}

.modulaire-compare__shift {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid rgba(11, 61, 145, .18);
    font: var(--weight-semibold) 15px/1.5 var(--font-ui);
}
.modulaire-compare__shift-old {
    color: var(--muted);
    text-decoration: line-through;
    text-decoration-color: var(--danger);
    text-decoration-thickness: 2px;
}
.modulaire-compare__shift-arrow {
    margin: 0 .35em;
    color: var(--brand-blue);
    font-weight: var(--weight-bold);
}
.modulaire-compare__shift-new {
    color: var(--ink);
}

/* --- Ligne suivante, collee a droite : meme gabarit de gros titre que
   les autres titres de la page (hero, chaos, sweep, Modulaire). --- */
.modulaire-evolve {
    margin: clamp(48px, 7vw, 80px) 0 0;
    text-align: left;
    font: var(--weight-bold) clamp(24px, 7vw, 52px)/1.25 var(--font-ui);
    letter-spacing: var(--track-tight);
    color: var(--ink);
}
.modulaire-evolve .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.modulaire-steps {
    margin-top: clamp(32px, 5vw, 48px);
}

/* --- Cadre final : ancienne phrase barree/grisee, nouvelle phrase en
   titre milieu, puis les 2 actions. --- */
.modulaire-cta {
    margin-top: clamp(40px, 6vw, 64px);
    padding: clamp(28px, 4vw, 48px);
    border-radius: var(--radius-lg);
    background: rgba(11, 61, 145, .06);
    border: 1px solid rgba(11, 61, 145, .18);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.modulaire-cta__old {
    margin: 0;
    font: var(--weight-semibold) clamp(18px, 2.1vw, 22px)/1.5 var(--font-ui);
    color: var(--muted);
}

.modulaire-cta__new {
    margin: 14px 0 0;
    max-width: 32ch;
    font: var(--weight-bold) clamp(24px, 3.2vw, 36px)/1.35 var(--font-ui);
    letter-spacing: var(--track-tight);
    color: var(--ink);
}
.modulaire-cta__new .accent-grad {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.modulaire-cta__actions {
    margin-top: clamp(20px, 3vw, 28px);
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 900px) {
    .modulaire-compare { grid-template-columns: 1fr 1fr; }
    .modulaire-compare__col--plus { grid-column: 1 / -1; }
}

@media (max-width: 759px) {
    .modulaire-intro,
    .modulaire-compare {
        grid-template-columns: 1fr;
    }
    .modulaire-compare__col--plus { grid-column: auto; }
    .modulaire-intro__left {
        grid-column: auto;
        text-align: left;
    }
}

@media (prefers-reduced-motion: reduce) {
    .modulaire-intro__left,
    .modulaire-compare {
        transition: none;
        opacity: 1;
        transform: none;
    }
}