/* ==========================================================================
   AGRICSERVICE — Systeme de design (site vitrine)
   --------------------------------------------------------------------------
   Charge EN DERNIER dans base.html.twig : ce fichier redefinit l'identite
   du theme d'origine (HiBootstrap) sans le supprimer.

   Deux roles :
     1. Les tokens + composants "ag-*" utilises par le markup refondu
        (header, accueil, footer, pages d'authentification).
     2. Des surcharges des classes du theme d'origine, pour que les pages
        non refondues (a propos, credit, assurance, confidentialite, contact)
        heritent automatiquement de la nouvelle charte.

   Palette "Foret & Moisson" : vert foret = solidite bancaire,
   or/ble = accent agricole, ardoise = neutres de lecture.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Verts : du plus profond (fonds d'autorite) au plus clair (aplats) */
    --ag-forest-950: #07231A;
    --ag-forest-900: #0E3B2E;
    --ag-forest-800: #13503C;
    --ag-forest-700: #17805C;
    --ag-forest-600: #1E9A70;
    --ag-forest-500: #2FB185;
    --ag-forest-100: #DCF0E7;
    --ag-forest-050: #F1F9F5;

    /* Or / ble : accent, jamais pour du texte courant */
    --ag-gold-700: #A17A1E;
    --ag-gold-600: #C0912C;
    --ag-gold-500: #D4A537;
    --ag-gold-200: #F4E4BC;
    --ag-gold-050: #FDF8EC;

    /* Neutres */
    --ag-ink: #0B1512;
    --ag-slate-800: #1F2A27;
    --ag-slate-700: #36453F;
    --ag-slate-600: #5A6B64;
    --ag-slate-500: #7C8C85;
    --ag-slate-400: #A6B2AC;
    --ag-slate-300: #CBD4CF;
    --ag-slate-200: #E3E9E6;
    --ag-slate-100: #F1F5F3;
    --ag-white: #FFFFFF;

    /* Semantique bancaire */
    --ag-credit: #0F7B52;
    --ag-debit: #B3261E;
    --ag-warn: #B7791F;
    --ag-info: #1C6E8C;

    /* Typographie */
    --ag-font-display: "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;
    --ag-font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

    /* Rayons */
    --ag-radius-sm: 8px;
    --ag-radius: 14px;
    --ag-radius-lg: 20px;
    --ag-radius-xl: 28px;
    --ag-radius-pill: 999px;

    /* Ombres : douces et superposees, jamais dures */
    --ag-shadow-xs: 0 1px 2px rgba(11, 21, 18, .06);
    --ag-shadow-sm: 0 2px 8px rgba(11, 21, 18, .06), 0 1px 2px rgba(11, 21, 18, .04);
    --ag-shadow: 0 8px 24px rgba(11, 21, 18, .08), 0 2px 6px rgba(11, 21, 18, .04);
    --ag-shadow-lg: 0 20px 48px rgba(11, 21, 18, .12), 0 4px 12px rgba(11, 21, 18, .06);

    /* Rythme vertical */
    --ag-section-y: 96px;
    --ag-container: 1200px;
}

/* --------------------------------------------------------------------------
   2. Bases
   -------------------------------------------------------------------------- */

body {
    font-family: var(--ag-font-body);
    color: var(--ag-slate-700);
    background-color: var(--ag-white);
    font-size: 16px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3 {
    font-family: var(--ag-font-display);
    color: var(--ag-forest-900);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

a {
    color: var(--ag-forest-700);
    text-decoration: none;
    transition: color .2s ease;
}

a:hover {
    color: var(--ag-forest-900);
}

/* Les montants doivent s'aligner en colonne : chiffres a largeur fixe. */
.ag-num,
.ag-amount,
.ag-balance__value {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

::selection {
    background: var(--ag-forest-100);
    color: var(--ag-forest-900);
}

:focus-visible {
    outline: 3px solid var(--ag-forest-500);
    outline-offset: 2px;
    border-radius: 4px;
}

/* --------------------------------------------------------------------------
   3. Mise en page
   -------------------------------------------------------------------------- */

.ag-container {
    width: 100%;
    max-width: var(--ag-container);
    margin-inline: auto;
    padding-inline: 20px;
}

.ag-section {
    padding-block: var(--ag-section-y);
}

.ag-section--tight {
    padding-block: 64px;
}

.ag-section--paper {
    background: var(--ag-slate-100);
}

.ag-section--mint {
    background: var(--ag-forest-050);
}

.ag-grid {
    display: grid;
    gap: 24px;
}

.ag-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ag-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ag-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --------------------------------------------------------------------------
   4. Titres de section
   -------------------------------------------------------------------------- */

.ag-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ag-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ag-forest-700);
    margin-bottom: 16px;
}

.ag-eyebrow::before {
    content: "";
    width: 24px;
    height: 2px;
    background: var(--ag-gold-500);
}

.ag-section-head {
    max-width: 720px;
    margin-bottom: 56px;
}

.ag-section-head--center {
    margin-inline: auto;
    text-align: center;
}

.ag-section-head--center .ag-eyebrow::before { display: none; }

.ag-section-head h2 {
    font-size: clamp(28px, 3.4vw, 44px);
    margin-bottom: 16px;
}

.ag-section-head p {
    font-size: 17px;
    color: var(--ag-slate-600);
    margin: 0;
}

/* --------------------------------------------------------------------------
   5. Boutons
   -------------------------------------------------------------------------- */

.ag-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--ag-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 15px 26px;
    border: 1.5px solid transparent;
    border-radius: var(--ag-radius-pill);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease,
                background-color .18s ease, color .18s ease, border-color .18s ease;
    white-space: nowrap;
}

.ag-btn:hover {
    transform: translateY(-2px);
}

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

.ag-btn--primary {
    background: var(--ag-forest-700);
    color: var(--ag-white);
    box-shadow: 0 6px 18px rgba(23, 128, 92, .28);
}

.ag-btn--primary:hover {
    background: var(--ag-forest-800);
    color: var(--ag-white);
    box-shadow: 0 12px 26px rgba(23, 128, 92, .34);
}

.ag-btn--gold {
    background: var(--ag-gold-500);
    color: var(--ag-forest-950);
    box-shadow: 0 6px 18px rgba(212, 165, 55, .32);
}

.ag-btn--gold:hover {
    background: var(--ag-gold-600);
    color: var(--ag-forest-950);
}

.ag-btn--outline {
    background: transparent;
    color: var(--ag-forest-800);
    border-color: var(--ag-slate-300);
}

.ag-btn--outline:hover {
    background: var(--ag-forest-050);
    border-color: var(--ag-forest-700);
    color: var(--ag-forest-900);
}

.ag-btn--on-dark {
    background: rgba(255, 255, 255, .1);
    color: var(--ag-white);
    border-color: rgba(255, 255, 255, .3);
    backdrop-filter: blur(6px);
}

.ag-btn--on-dark:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(255, 255, 255, .55);
    color: var(--ag-white);
}

.ag-btn--block {
    width: 100%;
}

.ag-btn--sm {
    padding: 11px 18px;
    font-size: 14px;
}

.ag-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

/* Lien flechee, pour les fins de carte */
.ag-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    font-size: 15px;
    color: var(--ag-forest-700);
}

.ag-link-arrow i,
.ag-link-arrow svg {
    transition: transform .2s ease;
}

.ag-link-arrow:hover i,
.ag-link-arrow:hover svg {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   6. Identite : marque + logo
   -------------------------------------------------------------------------- */

.ag-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    font-family: var(--ag-font-display);
    font-weight: 800;
    font-size: 21px;
    letter-spacing: -.02em;
    color: var(--ag-forest-900);
    line-height: 1;
}

.ag-brand__mark {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: linear-gradient(150deg, var(--ag-forest-700), var(--ag-forest-900));
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.ag-brand__mark svg {
    width: 22px;
    height: 22px;
}

.ag-brand__text small {
    display: block;
    font-family: var(--ag-font-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ag-slate-500);
    margin-top: 3px;
    /* La baseline ne doit jamais se couper en deux lignes : selon la police
       reellement chargee (Inter ou la police de repli), elle est plus large. */
    white-space: nowrap;
}

.ag-brand--light,
.ag-brand--light .ag-brand__text {
    color: var(--ag-white);
}

.ag-brand--light .ag-brand__mark {
    background: rgba(255, 255, 255, .12);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22);
}

.ag-brand--light .ag-brand__text small {
    color: rgba(255, 255, 255, .6);
}

/* --------------------------------------------------------------------------
   7. En-tete
   -------------------------------------------------------------------------- */

.ag-topbar {
    background: var(--ag-forest-950);
    color: rgba(255, 255, 255, .78);
    font-size: 13px;
}

.ag-topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 40px;
}

.ag-topbar__notes {
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ag-topbar__notes li {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.ag-topbar i {
    color: var(--ag-gold-500);
    font-size: 15px;
}

.ag-topbar a {
    color: rgba(255, 255, 255, .78);
}

.ag-topbar a:hover {
    color: var(--ag-white);
}

.ag-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--ag-slate-200);
}

.ag-header__inner {
    display: flex;
    align-items: center;
    gap: 32px;
    min-height: 76px;
}

.ag-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto 0 0;
    padding: 0;
    list-style: none;
}

.ag-nav > li {
    position: relative;
}

.ag-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 10px 14px;
    border-radius: var(--ag-radius-sm);
    font-size: 15px;
    font-weight: 600;
    color: var(--ag-slate-700);
    white-space: nowrap; /* sinon "La banque" se coupe en deux lignes */
}

.ag-nav__link:hover,
.ag-nav > li:hover > .ag-nav__link {
    color: var(--ag-forest-900);
    background: var(--ag-forest-050);
}

.ag-nav__link.is-active {
    color: var(--ag-forest-800);
}

.ag-nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--ag-gold-500);
}

/* Sous-menu : ouvert au survol sur grand ecran */
.ag-submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 250px;
    margin: 0;
    padding: 10px;
    list-style: none;
    background: var(--ag-white);
    border: 1px solid var(--ag-slate-200);
    border-radius: var(--ag-radius);
    box-shadow: var(--ag-shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.ag-nav > li:hover > .ag-submenu,
.ag-nav > li:focus-within > .ag-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.ag-submenu a {
    display: block;
    padding: 10px 12px;
    border-radius: var(--ag-radius-sm);
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ag-slate-700);
}

.ag-submenu a:hover {
    background: var(--ag-forest-050);
    color: var(--ag-forest-900);
}

.ag-submenu strong {
    display: block;
    font-family: var(--ag-font-display);
    font-size: 14.5px;
    color: var(--ag-forest-900);
    font-weight: 700;
}

.ag-submenu span {
    display: block;
    font-size: 12.5px;
    color: var(--ag-slate-500);
    line-height: 1.45;
}

.ag-submenu--lang {
    min-width: 190px;
    max-height: 320px;
    overflow-y: auto;
}

.ag-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

/* Bouton hamburger (mobile) */
.ag-burger {
    display: none;
    width: 44px;
    height: 44px;
    border: 1px solid var(--ag-slate-300);
    border-radius: var(--ag-radius-sm);
    background: var(--ag-white);
    color: var(--ag-forest-900);
    font-size: 22px;
    align-items: center;
    justify-content: center;
}

/* --------------------------------------------------------------------------
   8. Hero
   -------------------------------------------------------------------------- */

.ag-hero {
    position: relative;
    overflow: hidden;
    background: radial-gradient(1100px 600px at 12% -10%, var(--ag-forest-800) 0%, transparent 60%),
                linear-gradient(160deg, var(--ag-forest-900) 0%, var(--ag-forest-950) 100%);
    color: var(--ag-white);
    padding-block: 96px 104px;
}

/* Rangees de champ labourees, en filigrane */
.ag-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        118deg,
        rgba(255, 255, 255, .05) 0px,
        rgba(255, 255, 255, .05) 1px,
        transparent 1px,
        transparent 26px
    );
    pointer-events: none;
}

.ag-hero::after {
    content: "";
    position: absolute;
    width: 620px;
    height: 620px;
    right: -180px;
    top: -220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 165, 55, .16) 0%, transparent 70%);
    pointer-events: none;
}

.ag-hero__inner {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 64px;
    align-items: center;
}

.ag-hero h1 {
    font-size: clamp(34px, 4.6vw, 60px);
    color: var(--ag-white);
    margin-bottom: 22px;
    letter-spacing: -.03em;
}

.ag-hero h1 em {
    font-style: normal;
    color: var(--ag-gold-500);
}

.ag-hero__lead {
    font-size: 18.5px;
    color: rgba(255, 255, 255, .82);
    max-width: 560px;
    margin-bottom: 34px;
}

.ag-hero .ag-eyebrow {
    color: var(--ag-gold-200);
}

.ag-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 32px;
    margin: 38px 0 0;
    padding: 26px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .14);
}

.ag-hero__proof li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ag-hero__proof b {
    font-family: var(--ag-font-display);
    font-size: 26px;
    font-weight: 800;
    color: var(--ag-white);
    font-variant-numeric: tabular-nums;
}

.ag-hero__proof span {
    font-size: 13px;
    color: rgba(255, 255, 255, .62);
    letter-spacing: .01em;
}

/* Fausse carte de solde : donne a voir le produit */
.ag-hero__panel {
    position: relative;
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--ag-radius-xl);
    padding: 26px;
    backdrop-filter: blur(14px);
    box-shadow: var(--ag-shadow-lg);
}

.ag-hero__panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

.ag-hero__panel-head span {
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .6);
}

.ag-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--ag-radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: rgba(47, 177, 133, .18);
    color: #8FE3C0;
    border: 1px solid rgba(47, 177, 133, .3);
}

.ag-balance__value {
    font-family: var(--ag-font-display);
    font-size: 42px;
    font-weight: 800;
    color: var(--ag-white);
    letter-spacing: -.02em;
    line-height: 1;
}

.ag-balance__meta {
    font-size: 13.5px;
    color: rgba(255, 255, 255, .6);
    margin-top: 8px;
}

.ag-mini-rows {
    margin: 24px 0 0;
    padding: 20px 0 0;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, .12);
    display: grid;
    gap: 14px;
}

.ag-mini-rows li {
    display: flex;
    align-items: center;
    gap: 13px;
}

.ag-mini-rows .ag-mini-rows__icon {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    color: var(--ag-gold-500);
    font-size: 17px;
}

.ag-mini-rows .ag-mini-rows__body {
    flex: 1 1 auto;
    min-width: 0;
}

.ag-mini-rows strong {
    display: block;
    font-family: var(--ag-font-body);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--ag-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ag-mini-rows span {
    font-size: 12.5px;
    color: rgba(255, 255, 255, .55);
}

.ag-mini-rows .ag-mini-rows__amount {
    font-family: var(--ag-font-display);
    font-weight: 700;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ag-mini-rows .is-credit { color: #6EDCAE; }
.ag-mini-rows .is-debit { color: #FFB4AE; }

/* --------------------------------------------------------------------------
   9. Bandeau de confiance
   -------------------------------------------------------------------------- */

.ag-trustbar {
    background: var(--ag-forest-950);
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding-block: 22px;
}

/* Grille reguliere : les 4 garanties gardent la meme largeur, sans orpheline. */
.ag-trustbar__inner {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    gap: 18px 28px;
}

.ag-trustbar__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: rgba(255, 255, 255, .72);
}

.ag-trustbar__item i {
    color: var(--ag-gold-500);
    font-size: 19px;
}

/* --------------------------------------------------------------------------
   10. Cartes
   -------------------------------------------------------------------------- */

.ag-card {
    background: var(--ag-white);
    border: 1px solid var(--ag-slate-200);
    border-radius: var(--ag-radius-lg);
    padding: 30px;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ag-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ag-shadow);
    border-color: var(--ag-forest-100);
}

.ag-card__icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    display: grid;
    place-items: center;
    font-size: 24px;
    margin-bottom: 20px;
    background: var(--ag-forest-050);
    color: var(--ag-forest-700);
}

.ag-card__icon--gold {
    background: var(--ag-gold-050);
    color: var(--ag-gold-700);
}

.ag-card h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

.ag-card p {
    font-size: 15px;
    color: var(--ag-slate-600);
    margin-bottom: 18px;
}

.ag-card > :last-child {
    margin-top: auto;
    margin-bottom: 0;
}

/* Carte mise en avant */
.ag-card--feature {
    background: linear-gradient(165deg, var(--ag-forest-900), var(--ag-forest-950));
    border-color: transparent;
    color: rgba(255, 255, 255, .8);
}

.ag-card--feature h3 { color: var(--ag-white); }
.ag-card--feature p { color: rgba(255, 255, 255, .74); }

.ag-card--feature .ag-card__icon {
    background: rgba(255, 255, 255, .1);
    color: var(--ag-gold-500);
}

.ag-card--feature .ag-link-arrow { color: var(--ag-gold-500); }

/* Liste a puces vertes */
.ag-checklist {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 13px;
}

.ag-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    font-size: 15.5px;
    color: var(--ag-slate-700);
}

.ag-checklist i {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    background: var(--ag-forest-100);
    color: var(--ag-forest-700);
}

/* --------------------------------------------------------------------------
   11. Duo texte / visuel
   -------------------------------------------------------------------------- */

.ag-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 64px;
    align-items: center;
}

.ag-split--reverse .ag-split__media { order: -1; }

.ag-split__media {
    position: relative;
    border-radius: var(--ag-radius-xl);
    overflow: hidden;
    background: var(--ag-forest-050);
}

.ag-split__media img {
    display: block;
    width: 100%;
    height: auto;
}

.ag-split h2 {
    font-size: clamp(26px, 3vw, 38px);
    margin-bottom: 16px;
}

.ag-split p {
    color: var(--ag-slate-600);
    margin-bottom: 24px;
}

/* Vignette chiffree posee sur le visuel */
.ag-stat-badge {
    position: absolute;
    bottom: 22px;
    left: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--ag-radius);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(8px);
    box-shadow: var(--ag-shadow);
}

.ag-stat-badge__icon {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: var(--ag-forest-900);
    color: var(--ag-gold-500);
    font-size: 20px;
}

.ag-stat-badge b {
    display: block;
    font-family: var(--ag-font-display);
    font-size: 20px;
    color: var(--ag-forest-900);
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
}

.ag-stat-badge span {
    font-size: 13px;
    color: var(--ag-slate-600);
}

/* --------------------------------------------------------------------------
   12. Etapes numerotees
   -------------------------------------------------------------------------- */

.ag-steps {
    counter-reset: agstep;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 30px;
}

.ag-step {
    position: relative;
    padding-top: 26px;
    border-top: 2px solid var(--ag-slate-200);
}

.ag-step::before {
    counter-increment: agstep;
    content: "0" counter(agstep);
    position: absolute;
    top: -2px;
    left: 0;
    padding-top: 26px;
    font-family: var(--ag-font-display);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--ag-gold-600);
}

.ag-step h3 {
    font-size: 18px;
    margin: 34px 0 8px;
}

.ag-step p {
    font-size: 15px;
    color: var(--ag-slate-600);
    margin: 0;
}

/* --------------------------------------------------------------------------
   13. Temoignages
   -------------------------------------------------------------------------- */

.ag-quote {
    background: var(--ag-white);
    border: 1px solid var(--ag-slate-200);
    border-radius: var(--ag-radius-lg);
    padding: 30px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.ag-quote__stars {
    display: flex;
    gap: 3px;
    margin-bottom: 16px;
    color: var(--ag-gold-500);
    font-size: 16px;
}

.ag-quote blockquote {
    font-size: 16.5px;
    color: var(--ag-slate-700);
    margin: 0 0 22px;
    line-height: 1.6;
}

.ag-quote__author {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--ag-slate-200);
}

.ag-quote__avatar {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--ag-forest-900);
    color: var(--ag-gold-500);
    font-family: var(--ag-font-display);
    font-weight: 800;
    font-size: 15px;
}

.ag-quote__author strong {
    display: block;
    font-size: 15px;
    color: var(--ag-forest-900);
    font-weight: 700;
}

.ag-quote__author span {
    font-size: 13px;
    color: var(--ag-slate-500);
}

/* --------------------------------------------------------------------------
   14. Appel a l'action
   -------------------------------------------------------------------------- */

.ag-cta {
    position: relative;
    overflow: hidden;
    border-radius: var(--ag-radius-xl);
    padding: 64px 56px;
    background: radial-gradient(700px 340px at 85% 0%, var(--ag-forest-800) 0%, transparent 62%),
                linear-gradient(150deg, var(--ag-forest-900), var(--ag-forest-950));
    color: rgba(255, 255, 255, .82);
    text-align: center;
}

.ag-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        118deg,
        rgba(255, 255, 255, .045) 0px,
        rgba(255, 255, 255, .045) 1px,
        transparent 1px,
        transparent 24px
    );
}

.ag-cta > * { position: relative; z-index: 2; }

.ag-cta h2 {
    color: var(--ag-white);
    font-size: clamp(26px, 3.2vw, 40px);
    margin-bottom: 14px;
}

.ag-cta p {
    max-width: 620px;
    margin: 0 auto 30px;
    font-size: 17px;
}

.ag-cta .ag-btn-row { justify-content: center; }

.ag-cta__note {
    margin-top: 22px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .55);
}

/* --------------------------------------------------------------------------
   15. Pied de page
   -------------------------------------------------------------------------- */

.ag-footer {
    background: var(--ag-forest-950);
    color: rgba(255, 255, 255, .68);
    padding-block: 72px 0;
}

.ag-footer__grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: 48px;
    padding-bottom: 56px;
}

.ag-footer h4 {
    font-family: var(--ag-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ag-white);
    margin-bottom: 20px;
}

.ag-footer p {
    font-size: 14.5px;
    line-height: 1.7;
}

.ag-footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.ag-footer a {
    color: rgba(255, 255, 255, .68);
    font-size: 14.5px;
}

.ag-footer a:hover {
    color: var(--ag-white);
}

.ag-footer__contact li {
    display: flex;
    gap: 11px;
    font-size: 14.5px;
    line-height: 1.6;
}

.ag-footer__contact i {
    flex: 0 0 auto;
    color: var(--ag-gold-500);
    font-size: 17px;
    margin-top: 1px;
}

.ag-footer__legal {
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding-block: 26px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 13.5px;
    color: rgba(255, 255, 255, .5);
}

.ag-footer__legal ul {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.ag-footer__disclaimer {
    padding-bottom: 34px;
    font-size: 12.5px;
    line-height: 1.7;
    color: rgba(255, 255, 255, .38);
}

/* --------------------------------------------------------------------------
   16. Banniere de page interieure
   -------------------------------------------------------------------------- */

.ag-pagehead {
    position: relative;
    overflow: hidden;
    background: linear-gradient(150deg, var(--ag-forest-900), var(--ag-forest-950));
    color: var(--ag-white);
    padding-block: 68px;
}

.ag-pagehead::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        118deg,
        rgba(255, 255, 255, .05) 0px,
        rgba(255, 255, 255, .05) 1px,
        transparent 1px,
        transparent 26px
    );
}

.ag-pagehead__inner { position: relative; z-index: 2; }

.ag-pagehead h1 {
    color: var(--ag-white);
    font-size: clamp(28px, 3.6vw, 42px);
    margin: 0 0 12px;
}

.ag-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    color: rgba(255, 255, 255, .62);
}

.ag-breadcrumb a { color: var(--ag-gold-200); }
.ag-breadcrumb a:hover { color: var(--ag-white); }

.ag-breadcrumb li + li::before {
    content: "/";
    margin-right: 10px;
    color: rgba(255, 255, 255, .3);
}

/* --------------------------------------------------------------------------
   17. Formulaires et authentification
   -------------------------------------------------------------------------- */

.ag-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    align-items: stretch;
}

/* Le volet de gauche reste fixe pendant que le formulaire defile. */
.ag-auth__aside {
    position: sticky;
    top: 0;
    height: 100vh;
    align-self: start;
    overflow: hidden;
    padding: 56px 52px;
    background: radial-gradient(600px 340px at 20% 0%, var(--ag-forest-800) 0%, transparent 60%),
                linear-gradient(160deg, var(--ag-forest-900), var(--ag-forest-950));
    color: rgba(255, 255, 255, .8);
    display: flex;
    flex-direction: column;
}

.ag-auth__aside::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        118deg,
        rgba(255, 255, 255, .05) 0px,
        rgba(255, 255, 255, .05) 1px,
        transparent 1px,
        transparent 26px
    );
}

.ag-auth__aside > * { position: relative; z-index: 2; }

.ag-auth__aside h2 {
    color: var(--ag-white);
    font-size: clamp(26px, 2.6vw, 34px);
    margin: 40px 0 16px;
}

.ag-auth__aside p {
    font-size: 16px;
    color: rgba(255, 255, 255, .74);
}

.ag-auth__panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    background: var(--ag-slate-100);
}

/* Formulaires longs (ouverture de compte) : on ancre en haut. */
.ag-auth__panel--top { align-items: flex-start; }

/* Arguments de reassurance dans le volet sombre */
.ag-auth__points {
    margin: auto 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 20px;
}

.ag-auth__points li {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

.ag-auth__points i {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, .1);
    color: var(--ag-gold-500);
    font-size: 18px;
}

.ag-auth__points strong {
    display: block;
    font-family: var(--ag-font-display);
    font-size: 15.5px;
    color: var(--ag-white);
    margin-bottom: 2px;
}

.ag-auth__points span {
    font-size: 14px;
    color: rgba(255, 255, 255, .62);
    line-height: 1.55;
}

.ag-auth__back {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 26px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ag-slate-600);
}

.ag-auth__back:hover { color: var(--ag-forest-800); }

.ag-auth__box {
    width: 100%;
    max-width: 480px;
    background: var(--ag-white);
    border: 1px solid var(--ag-slate-200);
    border-radius: var(--ag-radius-lg);
    box-shadow: var(--ag-shadow);
    padding: 40px;
}

.ag-auth__box--wide { max-width: 780px; }

.ag-auth__box h1 {
    font-size: 27px;
    margin-bottom: 8px;
}

.ag-auth__box > p {
    color: var(--ag-slate-600);
    font-size: 15px;
    margin-bottom: 28px;
}

.ag-auth__footer {
    margin-top: 26px;
    padding-top: 22px;
    border-top: 1px solid var(--ag-slate-200);
    text-align: center;
    font-size: 14.5px;
    color: var(--ag-slate-600);
}

.ag-auth__footer a { font-weight: 600; }

/* Champs */
.ag-field {
    margin-bottom: 20px;
}

.ag-field > label,
.ag-form label {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ag-slate-700);
    margin-bottom: 7px;
}

.ag-form .form-control,
.ag-form .form-select,
.ag-form input[type="text"],
.ag-form input[type="email"],
.ag-form input[type="password"],
.ag-form input[type="number"],
.ag-form input[type="tel"],
.ag-form input[type="date"],
.ag-form input[type="file"],
.ag-form select,
.ag-form textarea {
    width: 100%;
    font-family: var(--ag-font-body);
    font-size: 15px;
    color: var(--ag-ink);
    background: var(--ag-white);
    border: 1.5px solid var(--ag-slate-300);
    border-radius: var(--ag-radius-sm);
    padding: 13px 15px;
    height: auto;
    box-shadow: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.ag-form .form-control:focus,
.ag-form .form-select:focus,
.ag-form input:focus,
.ag-form select:focus,
.ag-form textarea:focus {
    border-color: var(--ag-forest-700);
    box-shadow: 0 0 0 4px var(--ag-forest-100);
    outline: none;
}

.ag-form .form-control::placeholder { color: var(--ag-slate-400); }

.ag-form textarea { min-height: 130px; resize: vertical; }

.ag-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 18px;
}

.ag-form .form-check input {
    width: 18px;
    height: 18px;
    margin-top: 3px;
    accent-color: var(--ag-forest-700);
}

.ag-form .form-check label {
    margin: 0;
    font-weight: 500;
    font-size: 14px;
    color: var(--ag-slate-600);
}

.ag-field-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 18px;
}

.ag-form-note {
    font-size: 13px;
    color: var(--ag-slate-500);
    margin-top: -10px;
    margin-bottom: 18px;
}

.ag-forgot {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 22px;
    font-size: 14px;
}

/* Messages d'erreur de Symfony/Twig */
.ag-form .form-error-message,
.ag-form .invalid-feedback,
.ag-form ul li {
    color: var(--ag-debit);
    font-size: 13px;
}

.ag-form ul {
    margin: 6px 0 0;
    padding-left: 16px;
}

/* Alertes */
.ag-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 17px;
    border-radius: var(--ag-radius-sm);
    font-size: 14.5px;
    margin-bottom: 22px;
    border: 1px solid transparent;
}

.ag-alert i { font-size: 19px; flex: 0 0 auto; margin-top: 1px; }

.ag-alert--success {
    background: var(--ag-forest-050);
    border-color: var(--ag-forest-100);
    color: #0C5F41;
}

.ag-alert--error {
    background: #FDF2F1;
    border-color: #F6D7D4;
    color: #8E1D17;
}

.ag-alert--info {
    background: #EFF7FA;
    border-color: #D3E8F0;
    color: #14556C;
}

/* --------------------------------------------------------------------------
   18. Utilitaires
   -------------------------------------------------------------------------- */

.ag-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: var(--ag-radius-pill);
    font-size: 12px;
    font-weight: 600;
    background: var(--ag-forest-100);
    color: var(--ag-forest-800);
}

.ag-badge--gold {
    background: var(--ag-gold-050);
    color: var(--ag-gold-700);
}

.ag-hide-mobile { display: initial; }
.ag-show-mobile { display: none !important; }

/* --------------------------------------------------------------------------
   19. Surcharges du theme d'origine
   --------------------------------------------------------------------------
   Pour les pages encore sur le markup HiBootstrap (a propos, credit,
   assurance, confidentialite, contact, demande) : on repeint sans toucher
   au HTML.
   -------------------------------------------------------------------------- */

/* Le theme pilote toutes ses couleurs par ces variables. Les redefinir ici
   suffit a repeindre les pages non refondues : le turquoise #009286 et le
   magenta #90006F disparaissent partout d'un coup. */
:root {
    --main-color: #17805C;      /* etait #009286 (turquoise) */
    --black-color: #0E3B2E;     /* etait #2A3F65 (bleu ardoise) */
    --optional-color: #A17A1E;  /* etait #90006F (magenta) */
    --paragraph-color: #5A6B64;
    --main-font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
}

.default-btn,
.optional-btn,
.global-btn,
.blog-btn,
.contact-form button[type="submit"],
button.default-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--ag-font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    padding: 15px 26px;
    border: 1.5px solid transparent;
    border-radius: var(--ag-radius-pill);
    background: var(--ag-forest-700);
    color: var(--ag-white);
    box-shadow: 0 6px 18px rgba(23, 128, 92, .26);
    transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.default-btn:hover,
.global-btn:hover,
.blog-btn:hover,
.contact-form button[type="submit"]:hover {
    background: var(--ag-forest-800);
    color: var(--ag-white);
    transform: translateY(-2px);
}

.optional-btn {
    background: transparent;
    color: var(--ag-forest-800);
    border-color: var(--ag-slate-300);
    box-shadow: none;
}

.optional-btn:hover {
    background: var(--ag-forest-050);
    border-color: var(--ag-forest-700);
    color: var(--ag-forest-900);
}

/* Titres de section du theme */
.section-title span,
.reliable-content span,
.paiement-content span,
.features-content-wrap span,
.overview-content span,
.main-banner-wrap-content span {
    font-family: var(--ag-font-body);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ag-forest-700);
}

.section-title h2,
.reliable-content h3,
.paiement-content h3,
.features-content-wrap h3,
.overview-content h3 {
    font-family: var(--ag-font-display);
    color: var(--ag-forest-900);
    letter-spacing: -.02em;
}

/* Cartes du theme */
.single-global-transfers-card,
.single-benefits-card,
.single-features-box,
.single-review-card,
.single-blog-card,
.single-pricing-card,
.single-services-card {
    background: var(--ag-white);
    border: 1px solid var(--ag-slate-200);
    border-radius: var(--ag-radius-lg);
    box-shadow: none;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.single-global-transfers-card:hover,
.single-benefits-card:hover,
.single-features-box:hover,
.single-blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ag-shadow);
    border-color: var(--ag-forest-100);
}

.single-global-transfers-card .icon,
.single-features-box .icon {
    background: var(--ag-forest-050) !important;
    color: var(--ag-forest-700) !important;
    border-radius: 15px;
}

.single-global-transfers-card .icon i,
.single-features-box .icon i {
    color: var(--ag-forest-700) !important;
}

/* Listes a coches du theme */
.reliable-list li i,
.paiement-list li i,
.single-features-box .list li i {
    color: var(--ag-forest-700) !important;
}

/* Etoiles d'avis */
.review-rating li i { color: var(--ag-gold-500) !important; }

/* Banniere de page du theme.
   Le fond passe en vert profond : tous les textes qu'elle contient doivent
   donc etre forces en clair, sinon ils restent sombres sur sombre. */
.page-banner-area {
    background: linear-gradient(150deg, var(--ag-forest-900), var(--ag-forest-950)) !important;
    padding-block: 68px;
}

/* Selon les pages le titre est un h1, un h2 ou un h3 : on les couvre tous. */
.page-banner-area .page-banner-content h1,
.page-banner-area .page-banner-content h2,
.page-banner-area .page-banner-content h3,
.page-banner-content h1,
.page-banner-content h2 {
    color: var(--ag-white) !important;
    font-family: var(--ag-font-display);
    letter-spacing: -.02em;
}

.page-banner-area .page-banner-content span,
.page-banner-area .page-banner-content p {
    color: rgba(255, 255, 255, .74) !important;
}

.page-banner-area .page-banner-content ul li {
    color: rgba(255, 255, 255, .62) !important;
}

.page-banner-area .page-banner-content ul li a {
    color: var(--ag-gold-200) !important;
}

.page-banner-area .page-banner-content ul li a:hover {
    color: var(--ag-white) !important;
}

.page-banner-area .page-banner-content ul li::before {
    background: var(--ag-gold-500) !important;
}

/* Sections pleine largeur du theme peintes avec --main-color : le texte doit
   rester lisible sur le vert. */
.benefits-area,
.overview-area {
    color: rgba(255, 255, 255, .82);
}

.benefits-area .section-title h2,
.overview-area .overview-content h3,
.benefits-area h3,
.overview-area h3 {
    color: var(--ag-white);
}

.benefits-area .section-title span,
.overview-area .overview-content span {
    color: var(--ag-gold-200);
}

/* Aplat vert acide du formulaire de contact */
.bg-color-9edd05 { background-color: var(--ag-forest-050) !important; }

/* Aplats de couleur du theme remplaces */
.bg-F4F5F5 { background-color: var(--ag-slate-100) !important; }
.bg-color-fffaeb { background-color: var(--ag-white) !important; }

/* Formulaires du theme */
.contact-form .form-control,
.user-form .form-control {
    font-family: var(--ag-font-body);
    font-size: 15px;
    border: 1.5px solid var(--ag-slate-300);
    border-radius: var(--ag-radius-sm);
    padding: 13px 15px;
    height: auto;
}

.contact-form .form-control:focus,
.user-form .form-control:focus {
    border-color: var(--ag-forest-700);
    box-shadow: 0 0 0 4px var(--ag-forest-100);
}

/* Alertes Bootstrap */
.alert-success {
    background: var(--ag-forest-050);
    border-color: var(--ag-forest-100);
    color: #0C5F41;
    border-radius: var(--ag-radius-sm);
}

.alert-danger {
    background: #FDF2F1;
    border-color: #F6D7D4;
    color: #8E1D17;
    border-radius: var(--ag-radius-sm);
}

/* On neutralise le vieux pied de page du theme s'il reste affiche */
.footer-area .widget-logo img { max-width: 150px; }

/* --------------------------------------------------------------------------
   20. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1199px) {
    :root { --ag-section-y: 80px; }

    .ag-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .ag-footer__grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 991px) {
    .ag-hero__inner,
    .ag-split {
        grid-template-columns: 1fr;
        gap: 44px;
    }

    .ag-split--reverse .ag-split__media { order: 0; }

    .ag-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ag-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ag-steps { grid-template-columns: 1fr; gap: 24px; }

    .ag-auth { grid-template-columns: 1fr; }
    .ag-auth__aside { display: none; }

    /* Navigation : bascule en panneau deroulant */
    .ag-burger { display: inline-flex; }

    .ag-header__inner { min-height: 68px; gap: 16px; }

    .ag-nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        margin: 0;
        padding: 14px;
        background: var(--ag-white);
        border-bottom: 1px solid var(--ag-slate-200);
        box-shadow: var(--ag-shadow-lg);
        max-height: calc(100vh - 68px);
        overflow-y: auto;
        display: none;
    }

    .ag-header.is-open .ag-nav { display: flex; }

    .ag-nav__link { padding: 13px 12px; font-size: 16px; }
    .ag-nav__link.is-active::after { display: none; }

    .ag-submenu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        border-left: 2px solid var(--ag-slate-200);
        border-radius: 0;
        margin: 2px 0 8px 12px;
        padding: 0 0 0 8px;
        min-width: 0;
        display: none;
    }

    .ag-nav > li.is-open > .ag-submenu { display: block; }

    .ag-header__actions .ag-btn--outline { display: none; }

    .ag-topbar__notes li:not(:first-child) { display: none; }

    .ag-trustbar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .ag-cta { padding: 44px 26px; }
    .ag-auth__box { padding: 30px 24px; }

    .ag-hide-mobile { display: none !important; }
    .ag-show-mobile { display: initial !important; }
}

@media (max-width: 575px) {
    :root { --ag-section-y: 60px; }

    .ag-grid--4,
    .ag-grid--3,
    .ag-grid--2 { grid-template-columns: 1fr; }

    .ag-hero { padding-block: 56px 64px; }
    .ag-hero__proof { gap: 18px 24px; }
    .ag-hero__proof b { font-size: 22px; }

    .ag-trustbar__inner { grid-template-columns: 1fr; }

    .ag-footer__grid { grid-template-columns: 1fr; gap: 34px; }
    .ag-footer__legal { flex-direction: column; align-items: flex-start; }

    .ag-field-row { grid-template-columns: 1fr; }

    .ag-btn { width: 100%; }
    .ag-btn-row { flex-direction: column; align-items: stretch; }
    .ag-header__actions .ag-btn { width: auto; }
}