/**
 * Page « Offre Digitaleo » — valeurs reprises de la maquette Figma (jAFrnEmJVhgnp0pE8cTR8R, 212:678).
 * Préfixe dgt__ : rien n'est partagé avec la page Facturation électronique (fac-elec__).
 */

.page-template-page-digitaleo #fulltitle { display: none; }
html.dgt-modal-open { overflow: hidden; }
/* Bandeau global (aside-message.php) aux couleurs de la page ; feuille chargée sur cette page seulement. */
.page-template-page-digitaleo #legalnotice { background: #10A19A; }
.page-template-page-digitaleo #legalnotice .fac-elec__btn--outline,
.page-template-page-digitaleo #legalnotice .fac-elec__btn--outline:hover { color: #10A19A; }
/* L'en-tête mobile du thème laisse des flottants : sans clear, le hero (overflow: hidden) se tasse à côté. */
main.dgt { clear: both; }

.dgt,
.dgt__modal {
    --dgt-teal: #10A19A;
    --dgt-teal-soft: #ECFDF5;
    --dgt-teal-pill: #CAE8E8;
    --dgt-check-bg: #E8F7F6;
    --dgt-coral: #FF6150;
    --dgt-coral-form: #F26E5F;
    --dgt-yellow: #F5A623;
    --dgt-navy: #1A3C5C;
    --dgt-blue: #003189;
    --dgt-ink-900: #101828;
    --dgt-ink-700: #1E2939;
    --dgt-text: #6A7282;
    --dgt-text-2: #6B7280;
    --dgt-text-3: #4A5565;
    --dgt-text-4: #374151;
    --dgt-gray-50: #F9FAFB;
    --dgt-gray-100: #F3F4F6;
    --dgt-gray-200: #E5E7EB;
    /* Les widgets fixes du thème (réseaux sociaux à gauche, raccourcis à droite, ~60 px) recouvriraient le contenu :
       on le garde à 64 px du bord de l'écran ; au-delà de 1 344 px, la marge auto suffit et on retombe sur 24 px. */
    --dgt-gutter: clamp(24px, calc(64px - (100% - 1264px) / 2), 64px);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--dgt-ink-900);
    line-height: 1.5;
}
.dgt *, .dgt *::before, .dgt *::after,
.dgt__modal *, .dgt__modal *::before, .dgt__modal *::after { box-sizing: border-box; }
/* Spécificité d'une seule classe : bat les styles p/h2 du thème sans écraser les classes dgt__* déclarées plus bas. */
.dgt :where(p, ul, ol, h1, h2, h3),
.dgt__modal :where(p, ul, ol, h2) { margin: 0; padding: 0; }
.dgt :where(ul, ol),
.dgt__modal :where(ul) { list-style: none; }
.dgt :where(h1, h2, h3),
.dgt__modal :where(h2) { font-family: inherit; letter-spacing: normal; text-transform: none; }
.dgt img, .dgt__modal img { max-width: 100%; }
.dgt .accent, .dgt__modal .accent { color: var(--dgt-teal); }

/* ---------- Socle ---------- */
.dgt__container {
    width: 100%;
    max-width: calc(1216px + 48px);
    margin: 0 auto;
    padding: 0 var(--dgt-gutter);
}
.dgt__section { padding: 42px 0; }
.dgt__section-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    text-align: center;
    margin-bottom: 40px;
}
.dgt__eyebrow {
    display: inline-block;
    align-self: flex-start;
    padding: 3px 12px;
    border-radius: 999px;
    background: var(--dgt-teal-soft);
    color: var(--dgt-teal);
    font-size: 12.48px;
    font-weight: 700;
    line-height: 18.72px;
    letter-spacing: 0.624px;
    text-transform: uppercase;
}
.dgt__section-header .dgt__eyebrow { align-self: center; }
.dgt__eyebrow--strong { background: var(--dgt-teal-pill); }
.dgt__h2 {
    font-size: 32px;
    font-weight: 800;
    line-height: 48px;
    color: var(--dgt-ink-900);
}
.dgt__intro {
    max-width: 736px;
    padding: 0 32px;
    font-size: 16.8px;
    line-height: 25.2px;
    color: var(--dgt-text);
}

/* ---------- Boutons ---------- */
.dgt__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease;
}
.dgt__btn img { flex-shrink: 0; width: 20px; height: auto; }
.dgt__btn--primary {
    padding: 15px 30px;
    border-radius: 11px;
    background: var(--dgt-teal);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    filter: drop-shadow(0 10px 7.5px rgba(16, 161, 154, 0.2));
}
.dgt__btn--primary:hover { color: #fff; transform: translateY(-1px); background: #0E8F89; }
.dgt__btn--outline {
    height: 54px;
    gap: 7px;
    padding: 15px 19px;
    border: 1.739px solid var(--dgt-gray-200);
    border-radius: 14px;
    color: var(--dgt-navy);
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}
.dgt__btn--outline:hover { color: var(--dgt-navy); border-color: var(--dgt-teal); }
.dgt__btn--outline img { width: 18px; }

/* Liste à coches (options du tarif, arguments de la modale) */
.dgt__checklist { display: flex; flex-direction: column; gap: 5px; }
.dgt__checklist li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding-top: 10px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: var(--dgt-text-3);
}
.dgt__check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    margin-top: 2px;
    border-radius: 50%;
    background: var(--dgt-check-bg);
}
.dgt__check img { width: 10px; height: 10px; }

/* ============================================================
   HERO
   ============================================================ */
/* Pas de marge basse : le visuel descend jusqu'au bord de la section, comme le cadre Figma. */
.dgt__hero { position: relative; padding-bottom: 0; background: var(--dgt-gray-50); overflow: hidden; }
/* Quart de disque (centre du dégradé dans son coin) retourné pour viser l'angle haut-droit. */
.dgt__hero-corner-glow {
    position: absolute;
    top: 0;
    right: 0;
    width: 204px;
    height: 204px;
    transform: scaleX(-1);
    pointer-events: none;
}
.dgt__hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: 576px minmax(0, 1fr);
    gap: 64px;
}
.dgt__hero-content { display: flex; flex-direction: column; padding-bottom: 30px; }
.dgt__hero-badge {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 8px;
    margin-bottom: 9px;
    padding: 6px 16px 6px 10px;
    border-radius: 999px;
    background: var(--dgt-teal-soft);
    color: var(--dgt-teal);
    font-size: 12.48px;
    font-weight: 700;
    line-height: 18.72px;
    letter-spacing: 0.4992px;
}
.dgt__hero-badge-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--dgt-teal); flex-shrink: 0; }
.dgt__hero-title {
    font-size: 41.6px;
    font-weight: 800;
    line-height: 47.84px;
    color: var(--dgt-ink-900);
}
.dgt__hero-intro {
    padding-top: 56px;
    font-size: 16.5px;
    line-height: 29.92px;
    color: var(--dgt-text);
}
.dgt__hero-intro p { margin: 0; }
.dgt__hero-intro strong { color: var(--dgt-navy); }
.dgt__hero-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.dgt__hero-guarantees { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.dgt__hero-guarantees li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 21px;
    color: var(--dgt-text);
}
.dgt__hero-notes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: auto;
    padding-top: 40px;
    font-size: 12px;
    line-height: 18.72px;
    letter-spacing: 0.4992px;
    color: var(--dgt-text);
}

/* Composition à droite : positions en % du cadre Figma 690 × 660, textes en cqw pour suivre la taille. */
.dgt__hero-visual {
    position: relative;
    align-self: end;
    /* Le cadre peut déborder à droite, mais ses bulles (90 % de sa largeur) restent hors des raccourcis fixes du thème :
       elles s'arrêtent au bord du contenu, plus la marge libre au-delà des 64 px de --dgt-gutter. */
    width: min(690px, calc((100% + 63px + max(0px, (100vw - 1344px) / 2)) / 0.9));
    aspect-ratio: 690 / 660;
    /* Position du cadre Figma : 51 px au-dessus du contenu, 63 px sur la gouttière de la grille. */
    margin: -51px 0 0 -63px;
    border-radius: 30px;
    background: var(--dgt-gray-50);
    overflow: hidden;
    container-type: inline-size;
}
.dgt__hero-visual > * { position: absolute; }
.dgt__hero-glow--coral { left: 0.29%; top: 82.72%; width: 46.23%; height: 36.21%; }
.dgt__hero-glow--coral > span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 74.92%;
    height: 133.47%;
    transform: translate(-50%, -50%) rotate(-90deg);
}
.dgt__hero-glow--coral img { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; }
.dgt__hero-logos { left: 13.33%; top: 5.13%; width: 47.39%; height: 8.33%; }
.dgt__hero-logos img { position: absolute; }
.dgt__hero-logo-cerfrance { left: 0; top: 0; width: 48.32%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.dgt__hero-logo-cross { left: 50.15%; top: 32.7%; width: 5.81%; }
.dgt__hero-logo-digitaleo { left: 60.55%; top: 36.36%; width: 37.61%; }
.dgt__hero-shot { object-fit: cover; }
.dgt__hero-shot--mockup { left: 8.26%; top: 16.19%; width: 72.61%; height: 47.42%; }
.dgt__hero-shot--avis { left: 52.03%; top: 13.46%; width: 18.26%; height: 16.06%; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25)); }
.dgt__hero-shot--reseaux { left: 49.71%; top: 56.34%; width: 22.61%; height: 14.09%; filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.25)); }
.dgt__hero-shot--fiche { left: -1.88%; top: 45.13%; width: 26.67%; height: 41.52%; filter: drop-shadow(0 4px 17px rgba(0, 0, 0, 0.25)); }
.dgt__hero-shot--fiche img { position: absolute; left: 8.82%; top: 5.94%; width: 83.92%; height: 88.51%; }
.dgt__hero-bubble {
    display: flex;
    flex-direction: column;
    padding: 2.17cqw 2.17cqw 1.45cqw;
    border-radius: 0 2.32cqw 2.32cqw 2.32cqw;
    background: #fff;
    font-size: max(10px, 1.739cqw);
    line-height: 1.42;
    color: var(--dgt-ink-900);
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.15));
}
.dgt__hero-bubble strong { font-size: max(12px, 2.319cqw); line-height: 1.25; color: var(--dgt-teal); }
.dgt__hero-bubble--avis { left: 66.81%; top: 24.52%; width: 22.03%; filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25)); }
.dgt__hero-bubble--visibilite { left: 18.99%; top: 61.34%; width: 24.93%; color: var(--dgt-navy); }
.dgt__hero-bubble--reseaux { left: 64.64%; top: 63.46%; width: 24.78%; }

/* ============================================================
   TARIF
   ============================================================ */
.dgt__pricing { background: #fff; }
.dgt__pricing .dgt__section-header { gap: 0; margin-bottom: 51px; }
.dgt__pricing .dgt__eyebrow { margin-bottom: 16px; }
.dgt__pricing-subtitle { font-size: 13.6px; line-height: 20.4px; color: var(--dgt-text-2); }
.dgt__pricing-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    max-width: 846px;
    margin: 0 auto;
    padding: 24.87px;
    border: 0.87px solid #A3ADB8;
    border-radius: 16px;
    background: #fff;
}
.dgt__pricing-cols { display: flex; justify-content: center; gap: 32px; width: 100%; }
.dgt__pricing-offer,
.dgt__pricing-details { width: 342px; }
.dgt__pricing-offer {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 20px 0 6px;
    text-align: center;
}
.dgt__pricing-name { font-size: 36px; font-weight: 900; line-height: 31.2px; color: var(--dgt-teal); }
.dgt__pricing-name-sub { font-size: 18px; font-weight: 700; line-height: 31.2px; color: var(--dgt-text); }
.dgt__pricing-desc { margin-top: 21px; padding: 8px 0; font-size: 16px; font-weight: 500; line-height: 28px; color: var(--dgt-text); }
.dgt__pricing-price-box {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-height: 220px;
    margin-top: 29px;
    padding: 8px 16px;
    border-radius: 16px;
    background: var(--dgt-gray-50);
}
.dgt__pricing-old { display: flex; align-items: flex-start; gap: 4px; }
.dgt__pricing-old s {
    position: relative;
    font-size: 36px;
    font-weight: 700;
    line-height: 31.2px;
    color: var(--dgt-text);
    text-decoration: none;
}
.dgt__pricing-old s::after {
    content: "";
    position: absolute;
    left: -7.87px;
    top: -6.16px;
    width: 43px;
    height: 43px;
    background: url("../images/page-digitaleo/pricing-strike.svg") no-repeat center / contain;
}
.dgt__pricing-discount {
    padding: 0 8px;
    border-radius: 250px;
    background: var(--dgt-teal);
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    line-height: 31.2px;
}
.dgt__pricing-discount small { font-size: 15.48px; }
.dgt__pricing-price { display: flex; align-items: flex-end; }
.dgt__pricing-price strong { font-size: 64px; font-weight: 800; line-height: 44px; color: var(--dgt-teal); }
.dgt__pricing-price span { padding: 0 0 4px 4px; align-self: flex-start; font-size: 16px; line-height: 20.4px; color: #99A1AF; }
.dgt__pricing-details { padding: 33px 0 20px; }
.dgt__pricing-group-title {
    font-size: 15px;
    font-weight: 900;
    line-height: 15.6px;
    letter-spacing: 1.04px;
    text-transform: uppercase;
    color: var(--dgt-teal);
}
.dgt__pricing-group-title + .dgt__pricing-services { padding-top: 16px; }
.dgt__pricing-services { display: flex; flex-direction: column; gap: 2px; margin-bottom: 16px; }
.dgt__pricing-services li {
    display: grid;
    grid-template-columns: 22px 1fr;
    column-gap: 8px;
    align-items: center;
    font-size: 14px;
    line-height: 20px;
    color: #4B5563;
}
.dgt__pricing-services li:last-child { padding-top: 10px; }
.dgt__pricing-services img { width: 22px; height: 22px; object-fit: contain; }
.dgt__pricing-services strong { font-weight: 700; }
.dgt__pricing-services span { grid-column: 2; }
.dgt__pricing-options-intro { padding-top: 10px; font-size: 14px; font-weight: 700; line-height: 20px; color: var(--dgt-text-3); }
.dgt__pricing-cta {
    width: 324px;
    max-width: 100%;
    padding: 12px;
    border-radius: 14px;
    background: var(--dgt-teal);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
    text-decoration: none;
    transition: background-color 150ms ease;
}
.dgt__pricing-cta:hover { color: #fff; background: #0E8F89; }
.dgt__pricing-footnote {
    max-width: 742px;
    margin: 0 auto;
    padding-top: 24px;
    font-size: 12px;
    line-height: 17.28px;
    color: var(--dgt-text);
    text-align: center;
}

/* ============================================================
   RÉASSURANCE
   ============================================================ */
.dgt__reassurance {
    margin-bottom: 42px;
    padding: 20px 0;
    border-top: 0.87px solid var(--dgt-gray-100);
    border-bottom: 0.87px solid var(--dgt-gray-100);
    background: var(--dgt-gray-50);
}
.dgt__reassurance-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 88px;
}
.dgt__reassurance-list li { display: flex; align-items: center; gap: 8px; }
.dgt__reassurance-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 7px;
    border-radius: 10px;
    color: #fff;
    font-size: 9.6px;
    font-weight: 800;
    line-height: 14.4px;
    white-space: nowrap;
}
.dgt__reassurance-badge--blue { background: var(--dgt-blue); }
.dgt__reassurance-badge--coral { background: var(--dgt-coral); }
.dgt__reassurance-badge--navy { background: var(--dgt-navy); }
.dgt__reassurance-badge--yellow { background: var(--dgt-yellow); }
.dgt__reassurance-text { display: flex; flex-direction: column; }
.dgt__reassurance-text strong { font-size: 12.48px; line-height: 14.976px; color: #111; }
.dgt__reassurance-text span { font-size: 10.88px; line-height: 16.32px; color: var(--dgt-text-2); }

/* ============================================================
   LE CONSTAT
   ============================================================ */
.dgt__constat { background: var(--dgt-gray-50); }
.dgt__constat-grid {
    display: grid;
    grid-template-columns: minmax(0, 576px) minmax(0, 551px);
    gap: 48px 52px;
    align-items: end;
}
.dgt__constat-left { display: flex; flex-direction: column; gap: 12px; }
.dgt__constat-left .dgt__h2 { line-height: 38.4px; }
.dgt__constat-intro { font-size: 16px; line-height: 27.2px; color: var(--dgt-text-2); margin-bottom: 14px; }
.dgt__timeline { position: relative; display: flex; flex-direction: column; gap: 14px; }
.dgt__timeline::before {
    content: "";
    position: absolute;
    left: 20px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #D1D5DC;
}
.dgt__timeline-step { position: relative; display: flex; align-items: flex-start; gap: 20px; }
.dgt__timeline-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border: 1.739px solid;
    border-radius: 50%;
}
.dgt__timeline-dot--teal { background: var(--dgt-teal); border-color: #059669; }
.dgt__timeline-dot--coral { background: var(--dgt-coral); border-color: var(--dgt-coral); }
.dgt__timeline-dot--yellow { background: var(--dgt-yellow); border-color: var(--dgt-yellow); }
.dgt__timeline-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16.86px;
    border: 0.87px solid var(--dgt-gray-200);
    border-radius: 14px;
    background: #fff;
}
.dgt__timeline-step.is-highlight .dgt__timeline-card { background: #F4E3E2; border-color: rgba(255, 75, 43, 0.3); }
.dgt__timeline-label { font-size: 12px; font-weight: 700; line-height: 18px; text-transform: uppercase; color: var(--dgt-text-2); }
.dgt__timeline-step.is-highlight .dgt__timeline-label { color: var(--dgt-coral); }
.dgt__timeline-title { font-size: 15.2px; font-weight: 700; line-height: 22.8px; color: var(--dgt-ink-700); }
.dgt__timeline-desc { font-size: 13.6px; line-height: 20.4px; color: var(--dgt-text-2); }
.dgt__constat-right { display: flex; flex-direction: column; gap: 16px; }
.dgt__constat-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 25px 24.86px;
    border: 0.87px solid var(--dgt-gray-200);
    border-radius: 16px;
    background: #fff;
    filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}
.dgt__constat-card--risks { gap: 20px; padding-top: 30px; padding-bottom: 30px; }
.dgt__constat-card-head { display: flex; align-items: center; gap: 10px; }
.dgt__constat-card-head h3 { font-size: 16px; font-weight: 700; line-height: 24px; color: var(--dgt-ink-700); }
.dgt__constat-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 14px;
}
.dgt__constat-card-icon--yellow { background: rgba(245, 166, 35, 0.1); }
.dgt__constat-card-icon--coral { background: rgba(255, 75, 43, 0.1); }
.dgt__concerned-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px 7px; }
.dgt__concerned-list li { display: flex; align-items: center; gap: 8px; font-size: 13.12px; line-height: 19.68px; color: var(--dgt-text-4); }
.dgt__risk-list { display: flex; flex-direction: column; gap: 12px; }
.dgt__risk-list li { display: flex; align-items: flex-start; gap: 12px; }
.dgt__risk-list p { font-size: 14px; line-height: 21px; color: var(--dgt-text-4); }
.dgt__risk-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 75, 43, 0.1);
    color: var(--dgt-coral);
    font-size: 11.2px;
    font-weight: 800;
}
.dgt__constat-source { font-size: 12px; line-height: 21px; color: var(--dgt-text); }
.dgt__constat-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 72px;
    padding: 0 24px;
    border-top: 0.87px solid var(--dgt-gray-100);
    text-align: center;
}
.dgt__constat-tagline { font-size: 14.4px; font-weight: 700; line-height: 21.6px; color: var(--dgt-ink-700); }

/* ============================================================
   TROIS MODULES
   ============================================================ */
.dgt__modules { background: var(--dgt-gray-100); }
.dgt__modules .dgt__section-header { margin-bottom: 10px; }
.dgt__modules .dgt__intro { padding-top: 12.5px; padding-bottom: 12.5px; }
/* Figma : modules 1 et 3 sur toute la hauteur de la grille, le 2 plus court et calé en bas. */
.dgt__modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.dgt__module--image-bottom { align-self: end; }
.dgt__module {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 24px 25px;
    border: 0.87px solid var(--dgt-gray-200);
    border-radius: 16px;
    background: #fff;
}
/* Cadres des visuels repris de Figma (254×179, 303×255, 338×232). */
.dgt__module-image { display: block; align-self: center; width: 254px; aspect-ratio: 254 / 179; object-fit: cover; }
.dgt__module:last-child .dgt__module-image { width: 338px; aspect-ratio: 338 / 232; object-fit: contain; }
.dgt__module--image-bottom .dgt__module-image {
    order: 10;
    width: 303px;
    aspect-ratio: 303 / 255;
    margin-top: 12px;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}
.dgt__module-head { display: flex; align-items: flex-end; gap: 10px; }
.dgt__module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
}
.dgt__module-icon--coral { background: #FFF1EE; }
.dgt__module-icon--lavender { background: #EEEEFF; }
.dgt__module-icon--green { background: var(--dgt-teal-soft); }
.dgt__module-name { font-size: 18px; font-weight: 700; line-height: 23.1px; color: #000; }
.dgt__module-title { font-size: 15.2px; font-weight: 700; line-height: 22.8px; color: var(--dgt-ink-900); }
.dgt__module-content { max-width: 325px; font-size: 14px; line-height: 23.1px; color: var(--dgt-text); }
.dgt__module-content p + p,
.dgt__module-content p + ul { margin-top: 0; }
.dgt__module-content p + p { margin-top: 23.1px; }
.dgt__module-content ul { list-style: disc; padding-left: 21px; }
.dgt__module-content strong { color: var(--dgt-navy); }

/* ============================================================
   COMMENT ÇA MARCHE
   ============================================================ */
.dgt__steps { background: var(--dgt-gray-50); }
.dgt__steps .dgt__section-header { margin-bottom: 38px; }
.dgt__steps .dgt__h2 { margin-top: 9px; }
.dgt__steps .dgt__intro { margin-top: 9px; }
.dgt__steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dgt__step { position: relative; display: flex; flex-direction: column; gap: 8px; }
/* Trait reliant chaque numéro au suivant, absent après le dernier. */
.dgt__step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(28.5% + 52px);
    top: 29px;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg, #FF4B2B, var(--dgt-yellow));
}
.dgt__step-number {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 0 12px 28.5%;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--dgt-coral) 25%, var(--dgt-yellow) 100%);
    color: #fff;
    font-size: 17.6px;
    font-weight: 800;
    line-height: 26.4px;
    filter: drop-shadow(0 10px 7.5px rgba(0, 0, 0, 0.1)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
}
.dgt__step-title { font-size: 15.2px; font-weight: 700; line-height: 22.8px; color: var(--dgt-ink-900); }
.dgt__step-desc { max-width: 280px; font-size: 14px; line-height: 22.4px; color: var(--dgt-text); }

/* ============================================================
   FAQ
   ============================================================ */
.dgt__faq { background: #fff; }
.dgt__faq-grid {
    display: grid;
    grid-template-columns: 485px minmax(0, 648px);
    justify-content: end;
    gap: 30px;
    align-items: start;
    padding-right: calc(var(--dgt-gutter) + 9px); /* Figma : accordéon à 9 px du bord droit du conteneur */
}
.dgt__faq-intro {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 30px 0;
}
.dgt__faq-title { margin-top: 11px; line-height: 34px; }
.dgt__faq-subtitle { padding-top: 24px; font-size: 20px; font-weight: 700; line-height: 25.2px; color: var(--dgt-ink-900); }
.dgt__faq-text { margin: 16px 0; font-size: 16.8px; line-height: 25.2px; color: var(--dgt-text); }
.dgt__faq-text p { margin: 0; }
.dgt__faq-text strong { color: var(--dgt-navy); }
.dgt__faq-list { padding: 0 10px; }
.dgt__faq-item { border-bottom: 1px solid #EDEDED; }
.dgt__faq-question {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
    padding: 28px 0;
    border: 0;
    background: none;
    color: var(--dgt-ink-900);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 22px;
    text-align: left;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.dgt__faq-question:hover,
.dgt__faq-question:focus { background: none; color: var(--dgt-ink-900); }
/* Interligne sur le span : le thème force line-height: 1 !important sur les <button>. */
.dgt__faq-question-text { flex: 1; line-height: 22px; }
.dgt__faq-question { transition: padding-bottom 300ms ease; }
.dgt__faq-item.is-open .dgt__faq-question { padding-bottom: 16px; }
.dgt__faq-icon { position: relative; flex-shrink: 0; width: 34px; height: 34px; }
.dgt__faq-icon img { position: absolute; inset: 0; transition: opacity 300ms ease, transform 300ms ease; }
.dgt__faq-icon-minus { opacity: 0; transform: rotate(-90deg); }
.dgt__faq-item.is-open .dgt__faq-icon-plus { opacity: 0; transform: rotate(90deg); }
.dgt__faq-item.is-open .dgt__faq-icon-minus { opacity: 1; transform: none; }
/* Dépliage animé sans connaître la hauteur du texte : la ligne de grille passe de 0fr à 1fr. */
.dgt__faq-answer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms ease; }
.dgt__faq-item.is-open .dgt__faq-answer { grid-template-rows: 1fr; }
.dgt__faq-answer-inner { min-height: 0; overflow: hidden; padding-right: 60px; font-family: 'Barlow', 'Inter', sans-serif; font-size: 16px; line-height: 26px; color: var(--dgt-text); }
/* Espace bas porté par un pseudo-élément : un padding resterait visible une fois replié. */
.dgt__faq-answer-inner::after { content: ""; display: block; height: 28px; }
.dgt__faq-answer-inner p { margin: 0; }
.dgt__faq-answer-inner p + p { margin-top: 12px; }
@media (prefers-reduced-motion: reduce) {
    .dgt__faq-question, .dgt__faq-icon img, .dgt__faq-answer { transition: none; }
}

/* ============================================================
   MODALE DE CONTACT
   ============================================================ */
.dgt__admin-warning { margin: 0; padding: 20px; background: #FEE; border: 1px solid #F99; }
.dgt__modal {
    position: fixed;
    inset: 0;
    z-index: 100001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 200ms ease, visibility 200ms ease;
}
.dgt__modal[hidden] { display: none; }
.dgt__modal.is-open { opacity: 1; visibility: visible; }
.dgt__modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(16, 24, 40, 0.55);
    backdrop-filter: blur(2px);
    cursor: pointer;
}
.dgt__modal-dialog {
    position: relative;
    display: flex;
    gap: 30px;
    width: min(1136px, 100%);
    max-height: calc(100vh - 48px);
    overflow: auto;
    transform: translateY(12px) scale(0.985);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}
.dgt__modal.is-open .dgt__modal-dialog { transform: none; }

.dgt__modal-side {
    order: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 0 0 546px;
    padding: 96px 25px 30px;
    border: 0.87px solid var(--dgt-gray-50);
    border-radius: 24px;
    background: linear-gradient(126.6deg, var(--dgt-gray-100) 0%, #E9EAEC 100%);
    overflow: hidden;
    text-align: center;
}
.dgt__modal-glow { position: absolute; pointer-events: none; }
.dgt__modal-glow--teal { left: 341px; top: -204px; width: 407px; height: 407px; transform: scaleX(-1); }
.dgt__modal-glow--teal img { position: absolute; left: 50%; top: 50%; width: 50%; height: 50%; }
.dgt__modal-glow--coral { left: -49px; top: 350px; width: 145.5px; height: 313px; transform: scaleY(-1); }
.dgt__modal-side > :not(.dgt__modal-glow) { position: relative; }
.dgt__modal-side-title { font-size: 32px; font-weight: 800; line-height: 38.4px; color: var(--dgt-ink-900); }
.dgt__modal-side-lead { padding-top: 80px; font-size: 16.8px; line-height: 28.56px; color: var(--dgt-text-2); }
.dgt__modal-side-bullets { gap: 11px; margin-top: 28px; text-align: left; }
.dgt__modal-side-bullets li { padding-top: 0; }
.dgt__modal-side-phone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 87px; /* Figma : 8 px d'écart + 79 px de marge interne sous les arguments */
}
.dgt__modal-side-phone p { font-size: 16.8px; font-weight: 700; line-height: 28.56px; color: var(--dgt-navy); }
.dgt__btn--phone {
    justify-content: center;
    gap: 11px;
    height: 48px;
    padding: 15px 26px;
    border: 0.87px solid #D1D5DC;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 600;
    filter: none;
}

.dgt__modal-form {
    order: 2;
    position: relative;
    flex: 0 0 560px;
    min-width: 0; /* sans lui, le bouton d'envoi (un input, qui ne passe pas à la ligne) élargit la modale en mobile */
    padding: 32px 40px 28px;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 25px rgba(15, 23, 41, 0.12);
}
.dgt__modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--dgt-gray-100);
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 200ms ease;
}
.dgt__modal-close:hover { background: #fff; transform: scale(1.1); }
.dgt__stepper { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; padding-right: 40px; }
.dgt__stepper-step { display: inline-flex; align-items: center; gap: 12px; }
.dgt__stepper-bullet {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: var(--dgt-gray-100);
    color: var(--dgt-text-2);
    font-size: 14px;
    font-weight: 700;
}
.dgt__stepper-label { font-size: 14px; font-weight: 500; color: #9CA3AF; white-space: nowrap; }
.dgt__stepper-step.is-active .dgt__stepper-bullet { background: var(--dgt-coral-form); color: #fff; }
.dgt__stepper-step.is-active .dgt__stepper-label { color: var(--dgt-coral-form); font-weight: 600; }
.dgt__stepper-step.is-done .dgt__stepper-bullet { background: var(--dgt-check-bg); color: var(--dgt-teal); }
.dgt__stepper-step.is-done .dgt__stepper-label { color: var(--dgt-teal); }
.dgt__stepper-line { flex: 0 1 110px; height: 1px; background: var(--dgt-gray-200); }
.dgt__modal-title { font-size: 26px; font-weight: 800; line-height: 1.2; letter-spacing: -0.42px; color: var(--dgt-ink-900); }
.dgt__modal-stepdesc { margin: 6px 0 22px; font-size: 14px; color: var(--dgt-text-2); }
.dgt__modal-note { margin-top: 16px; font-size: 12px; line-height: 18px; color: #9CA3AF; text-align: left; }

/* Formulaire CF7 — balisage facelec-form__* repris du formulaire Facturation électronique */
/* Le thème parent impose « .wpcf7 form.wpcf7-form p { margin: 0 0 20px !important } » : même sélecteur, préfixé, pour passer devant. */
.dgt__modal-cf7 .wpcf7 form.wpcf7-form p { margin: 0 !important; }
.dgt__modal-cf7 .wpcf7-form br { display: none; }
.dgt__modal-cf7 .facelec-form__step[hidden] { display: none !important; }
.dgt__modal-cf7 .facelec-form__row { display: flex; gap: 16px; margin-bottom: 14px; }
/* Marge portée par la ligne : dans un flex, celle des champs ne fusionne pas et s'ajouterait. */
.dgt__modal-cf7 .facelec-form__row .facelec-field { flex: 1; min-width: 0; margin-bottom: 0; }
.dgt__modal-cf7 .facelec-field { margin-bottom: 14px; }
.dgt__modal-cf7 .facelec-field p { display: flex; flex-direction: column; gap: 6px; }
.dgt__modal-cf7 .facelec-field__label { font-size: 13px; font-weight: 600; line-height: 16px; color: var(--dgt-text-4); }
.dgt__modal-cf7 .facelec-field__req { color: var(--dgt-coral-form); }
.dgt__modal-cf7 .wpcf7-form-control-wrap { position: relative; display: block; }
/* .wpcf7-form dans le sélecteur : le thème parent impose un fond blanc avec la même spécificité. */
.dgt__modal-cf7 .wpcf7-form input[type="text"],
.dgt__modal-cf7 .wpcf7-form input[type="email"],
.dgt__modal-cf7 .wpcf7-form input[type="tel"],
.dgt__modal-cf7 .wpcf7-form select {
    width: 100%;
    height: 44px;
    margin: 0; /* le thème parent ajoute 5 px de marge haute aux champs CF7 */
    padding: 0 14px 0 42px;
    border: 1px solid var(--dgt-gray-200);
    border-radius: 12px;
    background-color: var(--dgt-gray-50);
    color: var(--dgt-ink-900);
    font-family: inherit;
    font-size: 14px;
    box-shadow: none;
    transition: border-color 150ms ease, background-color 150ms ease;
}
.dgt__modal-cf7 input::placeholder { color: #9CA3AF; }
.dgt__modal-cf7 .wpcf7-form input:focus,
.dgt__modal-cf7 .wpcf7-form select:focus { outline: none; border-color: var(--dgt-teal); background-color: #fff; }
.dgt__modal-cf7 .wpcf7-form select {
    appearance: none;
    padding-right: 36px;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2399A1AF' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
}
.dgt__modal-cf7 .wpcf7-form-control-wrap::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 13px;
    z-index: 1;
    width: 18px;
    height: 18px;
    background: no-repeat center / contain;
    pointer-events: none;
}
.dgt__modal-cf7 [data-name="prenom"]::before,
.dgt__modal-cf7 [data-name="nom"]::before,
.dgt__modal-cf7 [data-name="effectif"]::before { background-image: url("../images/page-digitaleo/form-icon-user.svg"); }
.dgt__modal-cf7 [data-name="email"]::before { background-image: url("../images/page-digitaleo/form-icon-mail.svg"); }
.dgt__modal-cf7 [data-name="telephone"]::before { background-image: url("../images/page-digitaleo/form-icon-phone.svg"); }
.dgt__modal-cf7 [data-name="societe"]::before,
.dgt__modal-cf7 [data-name="secteur"]::before { background-image: url("../images/page-digitaleo/form-icon-company.svg"); }
.dgt__modal-cf7 [data-name="cgu"]::before { display: none; }
.dgt__modal-cf7 .facelec-form__btn,
.dgt__modal-cf7 .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    margin: 0 !important; /* un <style> en ligne du site décale le bouton d'envoi de 50 px, avec un sélecteur plus fort */
    padding: 0 20px;
    border: 0;
    border-radius: 12px;
    background: var(--dgt-teal);
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
    transition: background-color 150ms ease, opacity 150ms ease;
}
.dgt__modal-cf7 .facelec-form__btn:hover,
.dgt__modal-cf7 .wpcf7-submit:hover { background: #0E8F89; color: #fff; }
.dgt__modal-cf7 .wpcf7-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.dgt__modal-cf7 .facelec-form__next-wrap { margin-top: 6px; }
.dgt__modal-cf7 .facelec-form__btn--back {
    width: auto;
    flex-shrink: 0;
    padding: 0 16px;
    border: 1px solid var(--dgt-gray-200);
    background: #fff;
    color: var(--dgt-text-3);
    font-size: 14px;
    font-weight: 600;
}
.dgt__modal-cf7 .facelec-form__btn--back:hover { background: var(--dgt-gray-50); color: var(--dgt-text-3); }
.dgt__modal-cf7 .facelec-form__actions { margin-top: 20px; }
.dgt__modal-cf7 .facelec-form__actions p { display: flex; align-items: center; gap: 8px; }
.dgt__modal-cf7 .facelec-form__actions .wpcf7-submit { flex: 1; }
.dgt__modal-cf7 .wpcf7-spinner { position: absolute; margin: 0; }
.dgt__modal-cf7 .wpcf7-acceptance { display: block; margin-top: 4px; }
.dgt__modal-cf7 .wpcf7-list-item { margin: 0; }
.dgt__modal-cf7 .wpcf7-list-item label { display: flex; align-items: flex-start; gap: 8px; }
.dgt__modal-cf7 .wpcf7-list-item-label { font-size: 13px; font-weight: 500; line-height: 1.4; color: var(--dgt-text); }
.dgt__modal-cf7 .wpcf7-acceptance input[type="checkbox"] { width: 16px; height: 16px; margin-top: 1px; accent-color: var(--dgt-teal); }
.dgt__modal-cf7 .wpcf7-acceptance a { color: var(--dgt-text-2); }
.dgt__modal-cf7 .wpcf7 form.wpcf7-form .facelec-form__legal {
    max-width: 45ch;
    margin: 18px auto 0 !important;
    font-size: 12px;
    line-height: 18px;
    color: #9CA3AF;
    text-align: center;
}
.dgt__modal-cf7 .facelec-form__legal a { color: #4B5563; text-decoration: underline; }
.dgt__modal-cf7 .wpcf7 form.wpcf7-form .facelec-form__login { margin: 16px 0 0 !important; font-size: 13px; color: var(--dgt-text-2); text-align: center; }
.dgt__modal-cf7 .facelec-form__login a { color: var(--dgt-coral-form); }
.dgt__modal-cf7 .wpcf7-not-valid-tip,
.dgt__modal-cf7 .facelec-field__tip { display: block; margin-top: 4px; font-size: 12px; line-height: 18px; color: #DC2626; }
/* Le thème parent masque les messages de CF7 (« .wpcf7 span.wpcf7-not-valid-tip { display: none !important } »). */
.dgt__modal-cf7 .wpcf7 span.wpcf7-not-valid-tip { display: block !important; }
.dgt__modal-cf7 .wpcf7-form input[aria-invalid="true"],
.dgt__modal-cf7 .wpcf7-form select[aria-invalid="true"] { border-color: #DC2626; background-color: #FEF2F2; }
.dgt__modal-cf7 .wpcf7-response-output { margin: 16px 0 0; padding: 12px 16px; border-radius: 12px; font-size: 14px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1180px) {
    .dgt__hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .dgt__hero-content { max-width: 640px; padding-bottom: 0; }
    .dgt__hero-visual { width: min(690px, 100%); margin: 0 auto; }
    .dgt__constat-grid { grid-template-columns: minmax(0, 1fr); }
    .dgt__constat-right { max-width: 640px; }
    .dgt__faq-grid { grid-template-columns: minmax(0, 1fr); padding-right: var(--dgt-gutter); }
    .dgt__faq-intro { position: static; padding-bottom: 0; }
    .dgt__modal-side { display: none; }
    .dgt__modal-dialog { width: min(560px, 100%); }
    .dgt__modal-form { flex: 1 1 auto; }
}
@media (max-width: 960px) {
    .dgt__modules-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin: 0 auto; }
    .dgt__module-image { max-width: 100%; }
    .dgt__module-content { max-width: none; }
    .dgt__steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
    .dgt__step:nth-child(2n)::before { display: none; }
    .dgt__pricing-cols { flex-direction: column; align-items: center; gap: 0; }
    .dgt__pricing-offer, .dgt__pricing-details { width: 100%; max-width: 420px; }
    .dgt__reassurance-list { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: 16px 48px; }
}
@media (max-width: 640px) {
    .dgt__container { padding: 0 16px; }
    .dgt__h2 { font-size: 26px; line-height: 1.25; }
    .dgt__intro { padding: 0; }
    .dgt__hero-title { font-size: 32px; line-height: 1.15; }
    .dgt__hero-intro { padding-top: 24px; }
    .dgt__hero-badge { font-size: 11px; }
    .dgt__hero-bubble span { display: none; }
    .dgt__hero-ctas .dgt__btn { flex: 1 1 100%; justify-content: center; }
    .dgt__pricing-card { padding: 20px 16px; }
    .dgt__pricing-name { font-size: 30px; }
    .dgt__pricing-price strong { font-size: 52px; }
    .dgt__reassurance-list { grid-template-columns: max-content; }
    .dgt__concerned-list { grid-template-columns: minmax(0, 1fr); }
    .dgt__steps-grid { grid-template-columns: minmax(0, 1fr); }
    .dgt__step::before { display: none; }
    .dgt__step-number { margin-left: 0; }
    .dgt__faq-list { padding: 0; }
    .dgt__faq-answer-inner { padding-right: 0; }
    .dgt__modal { padding: 12px; }
    .dgt__modal-dialog { max-height: calc(100vh - 24px); }
    .dgt__modal-form { padding: 28px 20px; }
    .dgt__modal-title { font-size: 22px; }
    .dgt__stepper-step:not(.is-active), .dgt__stepper-line { display: none; }
    .dgt__modal-cf7 .facelec-form__row { flex-direction: column; gap: 0; }
    /* « Envoyer le formulaire… » ne tient pas à côté de « Retour » : envoi pleine largeur, retour en dessous. */
    .dgt__modal-cf7 .facelec-form__actions p { flex-wrap: wrap; }
    /* Police réduite sous 370 px environ : un input ne passe pas à la ligne, le libellé serait coupé. */
    .dgt__modal-cf7 .facelec-form__actions .wpcf7-submit { flex: 1 1 100%; order: -1; padding: 0 12px; font-size: min(16px, 4.3vw); }
    .dgt__modal-cf7 .facelec-form__btn--back { flex: 1 1 100%; }
}