/* ==========================================================================
   Page d'accueil du site public (acc-)
   Chargee par WebsiteController::index() uniquement.
   Les pictogrammes viennent de la police Font Awesome chargee par le site.
   Seuls les filets et aplats decoratifs sont dessines ici.
   Couleurs et surfaces : jetons de homepage.css (--app-*, --pf-*), valeurs
   de repli si ce fichier n'est pas charge.
   ========================================================================== */

.acc {
    color: var(--pf-text, #1f2742);
    background: var(--pf-surface-alt, #f4f6fc);
}

.acc-masque {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ─── Sections ─────────────────────────────────────────────────────────────── */
.acc-section {
    position: relative;
    overflow: hidden;
    padding: 112px 0;
    background: var(--pf-surface, #ffffff);
}

.acc-section--alt {
    background: var(--pf-surface-alt, #f4f6fc);
}

/* Blanc legerement casse : le blanc pur sur ce bleu profond vibre a la lecture.
   Les boutons et pastilles gardent leur blanc franc, qu'ils posent eux-memes. */
.acc-section--sombre {
    background: var(--app-primary-dark, #051c66);
    color: #eef1fa;
}

.acc-section--services {
    padding-top: 72px;
    padding-bottom: 88px;
}

.acc-entete-section {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.acc-entete-ligne {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 24px 40px;
}

/* Le bloc de titre ne prend que la place qu'il lui faut, pour que les filtres
   ou le bouton de section restent sur la meme ligne */
.acc-entete-ligne > .acc-entete-section {
    flex: 1 1 520px;
    max-width: 640px;
}

/* Respiration entre l'entete d'une section et la rangee de cartes qui suit :
   sans elle l'intro touche la premiere carte */
.acc-entete-section + .acc-grille-services,
.acc-entete-section + .acc-grille-3,
.acc-entete-section + .acc-logos,
.acc-entete-ligne + .acc-grille-services,
.acc-entete-ligne + .acc-grille-3,
.acc-entete-ligne + .acc-logos {
    margin-top: 40px;
}

.acc-surtitre {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--app-second-them, #e30613);
}

.acc-surtitre::before {
    content: '';
    width: 30px;
    height: 2px;
    background: var(--app-second-them, #e30613);
}

.acc-surtitre--centre {
    justify-content: center;
}

.acc-surtitre--centre::after {
    content: '';
    width: 30px;
    height: 2px;
    background: var(--app-second-them, #e30613);
}

/* Sur le bleu profond, seul le FILET porte le rouge de la charte : le rouge
   en texte n'y tient que 3,15:1, sous le seuil de lisibilite. */
.acc-section--sombre .acc-surtitre {
    color: rgba(255, 255, 255, .78);
}

.acc-section--sombre .acc-surtitre::before,
.acc-section--sombre .acc-surtitre--centre::after {
    background: var(--app-second-them, #e30613);
}

.acc-titre-section {
    margin: 0;
    font-size: clamp(24px, 2.7vw, 38px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--pf-text, #1f2742);
}

.acc-section--sombre .acc-titre-section {
    color: #f5f7fd;
}

.acc-intro {
    margin: 0;
    max-width: 560px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--pf-text-secondary, #565e7d);
}

.acc-section--sombre .acc-intro {
    color: rgba(255, 255, 255, .78);
}

.acc-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--app-them, #072890);
    text-decoration: none;
}

.acc-lien i,
.acc-article-lien i {
    font-size: 13px;
}

.acc-lien:hover,
.acc-lien:focus {
    color: var(--app-primary-dark, #051c66);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.acc-message {
    grid-column: 1 / -1;
    margin: 0;
    padding: 32px 16px;
    text-align: center;
    color: var(--pf-text-muted, #8b93b0);
}

/* ─── Boutons ──────────────────────────────────────────────────────────────── */
/* Cet habillage sert aussi a des balises `button` : contrairement a un lien,
   un bouton n'herite pas de la police du document et retomberait sur celle du
   navigateur. */
.acc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 56px;
    padding: 0 28px;
    border: 0;
    font-family: inherit;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, box-shadow .2s, color .2s;
}

.acc-btn:hover,
.acc-btn:focus {
    text-decoration: none;
}

.acc-btn--plein {
    background: var(--app-them, #072890);
    color: #ffffff;
}

.acc-btn--plein:hover,
.acc-btn--plein:focus {
    background: var(--app-primary-dark, #051c66);
    color: #ffffff;
}

.acc-btn--blanc {
    background: #ffffff;
    color: var(--app-them, #072890);
}

.acc-btn--blanc:hover,
.acc-btn--blanc:focus {
    background: #eef1f9;
    color: var(--app-them, #072890);
}

.acc-btn--contour {
    background: var(--pf-surface-card, #ffffff);
    color: var(--app-them, #072890);
    box-shadow: inset 0 0 0 1.5px var(--pf-border, #dde3f0);
}

.acc-btn--contour:hover,
.acc-btn--contour:focus {
    color: var(--app-them, #072890);
    box-shadow: inset 0 0 0 1.5px var(--app-them, #072890);
}

.acc-btn--rouge {
    align-self: flex-start;
    margin-top: 8px;
    min-height: 46px;
    padding: 0 22px;
    background: var(--app-second-them, #e30613);
    color: #ffffff;
    font-size: 14px;
    gap: 8px;
}

.acc-btn--rouge:hover,
.acc-btn--rouge:focus {
    background: #b8050f;
    color: #ffffff;
}

.acc-btn--contour-clair {
    background: transparent;
    color: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .45);
}

.acc-btn--contour-clair:hover,
.acc-btn--contour-clair:focus {
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .8);
}

/* `structure.css` pose un `outline: none !important` global au site, qui
   supprimait l'anneau de focus sur TOUS les controles de cette page. Seul un
   `!important` peut le battre. Le retirer de structure.css serait le vrai
   correctif, mais il concerne tout le site : a arbitrer separement. */
/* La piste des offres est focalisable au clavier : sans cette ligne elle
   heritait de l'anneau noir 1px du navigateur, incoherent avec les fleches. */
.acc button:focus-visible,
.acc a:focus-visible,
.acc-grille-services:focus-visible {
    outline: 2px solid var(--app-them, #072890) !important;
    outline-offset: 2px;
}

.acc-section--sombre a:focus-visible,
.acc-section--sombre button:focus-visible,
.acc-hero a:focus-visible,
.acc-hero button:focus-visible {
    outline-color: #ffffff !important;
}

/* ─── Bandeau d'accueil ────────────────────────────────────────────────────── */
/* Le fond est une image : le bleu profond reste pose dessous, pour que le
   bandeau soit deja lisible avant que l'image n'arrive. */
.acc-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 0 108px;
    background-color: var(--app-primary-dark, #051c66);
    color: #eef1fa;
}

/* L'image vit sur sa propre couche : elle peut ainsi se dezoomer a l'arrivee
   sans deplacer quoi que ce soit d'autre. */
.acc-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background-image: url('../images/hero-fond.jpg');
    background-image: image-set(
        url('../images/hero-fond.webp') type('image/webp'),
        url('../images/hero-fond.jpg') type('image/jpeg'));
    background-size: cover;
    background-position: center right;
    background-repeat: no-repeat;
    pointer-events: none;
}

/* Voile bleu sur TOUTE l'image, pas seulement a gauche : il soutient le titre
   du cote texte et unifie la scene du cote gratte-ciels, qui sortait en clair.
   Il ne retombe jamais a zero. */
.acc-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(100deg,
        rgba(5, 28, 102, .96) 0%,
        rgba(7, 40, 144, .88) 38%,
        rgba(7, 40, 144, .64) 64%,
        rgba(10, 58, 184, .48) 100%);
    pointer-events: none;
}

.acc-hero > .container {
    position: relative;
    z-index: 2;
}

/* ─── Animations d'entree ──────────────────────────────────────────────────
   Jouees UNE SEULE FOIS a l'arrivee, jamais en boucle. Uniquement opacity et
   transform : aucune propriete qui recalculerait la mise en page. Le titre
   demarre sans delai, pour ne pas retarder la mesure d'affichage du contenu
   principal par les moteurs de recherche.
   ────────────────────────────────────────────────────────────────────────── */
@keyframes acc-monte {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
}

@keyframes acc-monte-ample {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

@keyframes acc-dezoome {
    from { transform: scale(1.06); }
    to   { transform: scale(1); }
}

.acc-hero::before {
    animation: acc-dezoome 1.4s cubic-bezier(.2, .7, .3, 1) both;
}

.acc-hero h1 {
    animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) both;
}

.acc-hero-texte {
    animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .09s both;
}

.acc-hero-actions {
    animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .16s both;
}

/* La rangee de reperes se remplit de gauche a droite */
.acc-preuves li {
    animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) both;
}

.acc-preuves li:nth-child(1) { animation-delay: .23s; }
.acc-preuves li:nth-child(2) { animation-delay: .29s; }
.acc-preuves li:nth-child(3) { animation-delay: .35s; }
.acc-preuves li:nth-child(4) { animation-delay: .41s; }

.acc-hero-visuel {
    animation: acc-monte-ample .7s cubic-bezier(.2, .7, .3, 1) .3s both;
}

.acc-carte-compte {
    animation: acc-monte-ample .6s cubic-bezier(.2, .7, .3, 1) .38s both;
}

/* ─── Micro-interactions ─────────────────────────────────────────────────── */
.acc-btn i {
    transition: transform .15s ease;
}

.acc-btn:hover i,
.acc-btn:focus i {
    transform: translateX(4px);
}

.acc-preuve-icone {
    transition: transform .15s ease;
}

.acc-preuves li:hover .acc-preuve-icone {
    transform: translateY(-2px);
}

/* Quelqu'un qui a demande moins d'animations dans son systeme n'en voit
   aucune : c'est une obligation d'accessibilite, pas une option. */
@media (prefers-reduced-motion: reduce) {
    .acc-hero::before,
    .acc-hero h1,
    .acc-hero-texte,
    .acc-hero-actions,
    .acc-preuves li,
    .acc-hero-visuel,
    .acc-carte-compte {
        animation: none;
    }

    .acc-btn i,
    .acc-preuve-icone,
    .acc-onglets-compte::before {
        transition: none;
    }
}

.acc-hero-grille {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 48px;
    align-items: start;
}

/* Borne le texte ET la rangee de reperes. Sans cette limite, les deux
   s'etalaient sur toute la colonne et passaient SOUS le portrait ancre a
   droite : le titre finissait ecrit en travers du visage. 520px est la valeur
   qui garde le titre sur deux lignes ; sous 500px il repasse a trois. */
.acc-hero-contenu {
    max-width: 520px;
    padding-top: 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Le bandeau porte le texte a gauche et un visuel a droite, la rangee
   d'atouts passant sous les deux */
/* Le texte occupe toute la colonne : le portrait ne partage plus cette piste,
   il est ancre en bas du bandeau (voir .acc-hero-visuel). En grille il tombait
   a 295px de large a 1440 et a 167px vers 1000px, soit une vignette. */
.acc-hero-haut {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
}

.acc-hero-texte-bloc {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Portrait detoure, pose sur le bord bas du bandeau.
   La boite s'etire du bord du texte (552 = 520 de texte + 32 de garde) au bord
   droit de la grille : elle ne PEUT donc structurellement plus revenir sur le
   texte, quelle que soit la largeur. Un `right` fixe, lui, faisait glisser le
   portrait vers la gauche a mesure que la fenetre retrecissait.
   `bottom: -108px` compense le padding bas du bandeau, car l'ancetre positionne
   est la grille et non `.acc-hero` : si ce padding change, changer les deux. */
.acc-hero-visuel {
    position: absolute;
    left: 552px;
    right: 0;
    bottom: -108px;
    width: auto;
    margin: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

.acc-hero-visuel picture {
    display: block;
    width: 430px;
    max-width: 100%;
}

.acc-hero-visuel img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

/* Le bas du portrait s'efface progressivement : un masque, pas un degrade de
   couleur, pour qu'elle se fonde dans la scene quelle que soit l'image de fond
   au lieu d'y etre posee comme un decoupage. */
.acc-hero-visuel img {
    -webkit-mask-image: linear-gradient(to top, transparent 0, #000 10%);
            mask-image: linear-gradient(to top, transparent 0, #000 10%);
}

/* Carte d'ouverture de compte : les quatre etapes du parcours */
.acc-compte-etapes {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
}

.acc-compte-etapes li {
    display: flex;
    align-items: flex-start;
    gap: 11px;
}

.acc-compte-etapes strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pf-text, #1f2742);
}

/* 11,5px en #8b93b0 ne donnait que 3,04:1, sous le seuil de lisibilite, et la
   taille passait sous le plancher mobile. 12,5px en #5a6285 monte a ~5,9:1. */
.acc-compte-etapes li > span:last-child > span {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #5a6285;
}

.acc-compte-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--pf-surface-deep, #eef1f9);
    color: var(--app-them, #072890);
    font-size: 12px;
}

.acc-hero h1 {
    margin: 0;
    font-size: clamp(28px, 2.9vw, 42px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #f5f7fd;
}

.acc-hero-texte {
    margin: 16px 0 0;
    max-width: 480px;
    font-size: clamp(15px, 1.2vw, 17px);
    line-height: 1.5;
    color: rgba(255, 255, 255, .84);
}

.acc-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 24px;
}

.acc-preuves {
    width: 100%;
    margin: 28px 0 0;
    padding: 20px 0 0;
    border-top: 1px solid rgba(255, 255, 255, .16);
    list-style: none;
    display: grid;
    /* Deux colonnes : dans les 520px de la colonne de texte, quatre colonnes
       casseraient les libelles longs sur trois lignes. */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 20px;
}

.acc-preuves li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acc-preuve-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .14);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
    font-size: 14px;
    color: #ffffff;
}

.acc-preuves strong {
    display: block;
    font-size: 15px;
    line-height: 1.3;
}

/* .68 tombait a 4,00:1 sur le 4e repere, la ou le voile est le plus faible */
.acc-preuve-texte {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .82);
}

/* Carte « Ouvrir un compte » */
.acc-carte-compte {
    position: relative;
    margin-bottom: -80px;
    padding: 22px;
    border-radius: 20px;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: 0 2px 6px rgba(5, 28, 102, .06), 0 24px 60px rgba(5, 28, 102, .22);
    color: var(--pf-text, #1f2742);
}

.acc-carte-entete {
    margin-bottom: 12px;
}

.acc-carte-compte h2 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.acc-carte-intro {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pf-text-secondary, #565e7d);
}

.acc-onglets-compte {
    position: relative;
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    border-radius: 12px;
    background: var(--pf-surface-deep, #eef1f9);
}

/* La pastille active COULISSE d'un onglet a l'autre au lieu de sauter.
   Largeur calculee sur la piste : 100% moins les 8px de marge interne et les
   4px d'ecart, divise par deux. */
.acc-onglets-compte::before {
    content: '';
    position: absolute;
    z-index: 0;
    top: 4px;
    bottom: 4px;
    left: 4px;
    width: calc((100% - 12px) / 2);
    border-radius: 8px;
    background: var(--app-them, #072890);
    transition: transform .28s cubic-bezier(.4, 0, .2, 1);
    pointer-events: none;
}

.acc-onglets-compte[data-actif="1"]::before {
    transform: translateX(calc(100% + 4px));
}

/* Ce sont de vrais boutons d'onglet : ils changent le contenu de la carte,
   ils ne naviguent pas. Seul le bouton du bas ouvre le formulaire. */
.acc-onglet {
    /* Sans ce positionnement, la pastille coulissante, qui est positionnee,
       peint PAR-DESSUS le libelle et le rend invisible. */
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 38px etait sous le minimum de 44px exige pour une cible tactile */
    min-height: 44px;
    padding: 0 10px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--pf-text-secondary, #565e7d);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.acc-onglet:hover,
.acc-onglet:focus {
    color: var(--app-them, #072890);
    text-decoration: none;
}

/* Le fond de l'onglet actif est porte par la pastille coulissante, pas par le
   bouton : le bouton reste transparent et se contente de passer en blanc. */
.acc-onglet[aria-selected="true"],
.acc-onglet[aria-selected="true"]:hover,
.acc-onglet[aria-selected="true"]:focus {
    background: transparent;
    color: #ffffff;
    font-weight: 700;
}

.acc-carte-compte .acc-btn {
    width: 100%;
}

/* ─── Services ─────────────────────────────────────────────────────────────── */
/* Les filtres se posent sur la ligne du titre de section */
/* La section est sur fond blanc : un cartouche blanc avec une ombre portee
   flotterait sans se poser. Fond gris clair et filet fin a la place. */
.acc-filtres {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 6px;
    max-width: 100%;
    /* Sans cela, la barre garde la largeur de ses boutons (636px), deborde de
       l'ecran sous 576px et son overflow-x n'a rien a faire defiler : les deux
       dernieres categories devenaient inatteignables au doigt. */
    min-width: 0;
    border-radius: 9999px;
    background: var(--pf-surface-alt, #f4f6fc);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

/* Sur une section deja grise, le cartouche reprend le blanc pour ressortir */
/* display: flex ci-dessus l'emporterait sur [hidden] */
.acc-filtres[hidden] {
    display: none;
}

.acc-filtres button {
    flex: none;
    min-height: 38px;
    padding: 0 16px;
    border: 0;
    border-radius: 9999px;
    background: transparent;
    color: var(--pf-text-secondary, #565e7d);
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.acc-filtres button:hover {
    color: var(--app-them, #072890);
}

.acc-filtres button[aria-pressed="true"] {
    background: var(--app-them, #072890);
    color: #ffffff;
    font-weight: 700;
}

.acc-filtres button[aria-pressed="true"]:hover {
    background: var(--app-primary-light, #0a3ab8);
    color: #ffffff;
}

/* Services : quatre colonnes egales. La carte tombe a environ 312px, la rangee
   reste alignee bord a bord avec les filtres et le titre de section, et les
   ecarts restent constants. */
/* Piste horizontale plutot qu'une grille : quel que soit le nombre d'offres,
   la section tient sur UNE ligne. Avec 5 offres dans une grille de 4 colonnes,
   la cinquieme se retrouvait seule sur sa rangee.
   --visibles pilote le nombre de cartes montrees a la fois. */
.acc-grille-services {
    --visibles: 4;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* La piste deborde de la gouttiere pour que la carte suivante affleure */
    padding-bottom: 4px;
}

.acc-grille-services::-webkit-scrollbar {
    display: none;
}

.acc-grille-services > .acc-service {
    flex: 0 0 calc((100% - (var(--visibles) - 1) * 24px) / var(--visibles));
    scroll-snap-align: start;
}

/* Le message de chargement ou d'absence occupe toute la piste */
.acc-grille-services > .acc-message {
    flex: 1 1 100%;
}

/* Les filtres et les fleches partagent la droite de la ligne de titre */
.acc-entete-outils {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Meme raison que sur .acc-filtres : ce bloc est lui-meme un element flex */
    min-width: 0;
}

.acc-fleches {
    display: flex;
    gap: 8px;
}

.acc-fleches[hidden] {
    display: none;
}

.acc-fleche {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: inset 0 0 0 1px var(--pf-border, #dde3f0);
    color: var(--app-them, #072890);
    font-size: 13px;
    cursor: pointer;
    transition: background-color .15s ease, box-shadow .15s ease, color .15s ease;
}

.acc-fleche:hover:not(:disabled) {
    background: var(--app-them, #072890);
    box-shadow: inset 0 0 0 1px var(--app-them, #072890);
    color: #ffffff;
}

.acc-fleche:disabled {
    opacity: .35;
    cursor: default;
}

/* Temoignages et actualites : trois par rangee */
.acc-grille-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.acc-service {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: 0 1px 2px rgba(7, 40, 144, .06), 0 16px 40px rgba(7, 40, 144, .08);
}

.acc-service-image,
.acc-article-image {
    position: relative;
    height: 158px;
    background: var(--pf-surface-deep, #eef1f9);
}

.acc-service-image img,
.acc-article-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Les etiquettes restent dans le corps de la carte : jamais de texte pose sur une image */
.acc-etiquettes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.acc-etiquette {
    padding: 4px 10px;
    border-radius: 9999px;
    background: var(--pf-surface-deep, #eef1f9);
    color: var(--app-them, #072890);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .01em;
    line-height: 1.4;
}

.acc-etiquette--neutre {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--pf-border, #dde3f0);
    color: var(--pf-text-secondary, #565e7d);
    font-weight: 500;
}

.acc-service-corps,
.acc-article-corps {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    gap: 10px;
    padding: 18px 20px 20px;
}

.acc-service h3 {
    margin: 0;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--pf-text, #1f2742);
}

.acc-service p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    font-weight: 400;
    color: var(--pf-text-secondary, #565e7d);
}

.acc-tarifs {
    margin: 0;
    padding: 2px 16px;
    list-style: none;
    border-radius: 14px;
    background: var(--pf-surface-alt, #f4f6fc);
}

.acc-tarifs li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 9px 0;
    border-bottom: 1px solid #e3e8f4;
}

.acc-tarifs li:last-child {
    border-bottom: 0;
}

.acc-tarif-nom {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--pf-text, #1f2742);
}

.acc-tarif-detail {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--pf-text-muted, #8b93b0);
}

.acc-tarif-valeur {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

.acc-tarif-prefixe {
    font-size: 11px;
    color: var(--pf-text-muted, #8b93b0);
}

.acc-tarif-valeur strong {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--app-them, #072890);
}

.acc-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-tags li {
    padding: 6px 11px;
    border-radius: 9999px;
    background: var(--pf-surface-alt, #f4f6fc);
    font-size: 12.5px;
    font-weight: 400;
    color: var(--pf-text-secondary, #565e7d);
}

.acc-service .acc-lien {
    margin-top: auto;
}

/* Carte des offres SGC */
/* ─── Financements institutionnels ─────────────────────────────────────────
   Section a part du catalogue de microfinance : ces offres ne s'adressent pas
   au meme public. Les compteurs sont poses par accueil.js.
   ────────────────────────────────────────────────────────────────────────── */
.acc-sgc-section {
    padding: 74px 0;
    background: var(--pf-surface, #ffffff);
}

/* La section rogne ce qui depasse. A 760px de haut pose a -60px, le cercle
   debordait par le haut et se voyait coupe net sur le blanc. Il est desormais
   centre et plus petit que la section ; max-height le retient en ellipse
   propre si le contenu venait a raccourcir la section. */
.acc-sgc-tache {
    position: absolute;
    right: -90px;
    top: 50%;
    transform: translateY(-50%);
    width: 640px;
    height: 640px;
    max-height: 100%;
    border-radius: 50%;
    background: #e8f0fc;
    pointer-events: none;
}

.acc-sgc-grille {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
    gap: 56px;
    align-items: center;
}

.acc-sgc-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

/* Variante bleue du surtitre : le rouge est reserve au grand public, cette
   section s'adresse aux entreprises et aux institutions. */
.acc-surtitre--bleu {
    color: var(--app-them, #072890);
}

.acc-surtitre--bleu::before {
    background: var(--app-them, #072890);
}

/* Le titre se lit sur deux tons : la mention du partenariat passe en bleu */
.acc-sgc-titre {
    margin: 0;
    font-size: clamp(26px, 3vw, 42px);
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--pf-text, #1f2742);
}

.acc-sgc-titre span {
    display: block;
    margin-top: 6px;
    color: #0a3ab8;
}

.acc-sgc-cats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px 22px;
    width: 100%;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.acc-sgc-cats li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.acc-sgc-cat-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    background: #eaf0fb;
    color: var(--app-them, #072890);
    font-size: 17px;
}

.acc-sgc-cats strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--pf-text, #1f2742);
}

/* #8b93b0 ne donnait que 3,04:1, sous le seuil, et c'est justement le chiffre
   qui porte l'argument de la section. */
.acc-sgc-cat-n {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    color: var(--pf-text-secondary, #565e7d);
}

.acc-sgc-visuel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.acc-sgc-traits {
    position: absolute;
    right: 6px;
    top: -22px;
    pointer-events: none;
}

.acc-sgc-visuel picture,
.acc-sgc-visuel img {
    display: block;
    width: 100%;
    max-width: 560px;
    height: auto;
}

/* Mesure : 96 % des pixels sous l'etiquette etaient du sujet opaque, et sur
   telephone elle remontait sur les visages. Elle passe donc SOUS la photo. */
.acc-sgc-badge {
    align-self: flex-end;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-radius: 14px;
    background: var(--pf-surface-card, #ffffff);
    /* Legere inclinaison : l'etiquette se decolle du plan de la photo. L'ombre
       est portee plus loin que l'inclinaison ne le suggere, c'est elle qui
       porte le relief ; les angles restent faibles pour ne pas flouter le
       texte. Toute image-cle appliquee ici doit REPRENDRE ce transform,
       sinon l'etiquette se remet a plat en fin d'animation. */
    transform: perspective(900px) rotateX(3deg) rotateY(-6deg) rotate(-1deg);
    box-shadow: inset 0 0 0 1px var(--pf-border-light, #edf0f7), 0 22px 44px rgba(7, 40, 144, .20);
    transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .45s cubic-bezier(.2, .7, .3, 1);
}

/* Au survol du visuel, l'etiquette se redresse et monte : le relief se lit */
.acc-sgc-visuel:hover .acc-sgc-badge {
    transform: perspective(900px) rotateX(0) rotateY(0) rotate(0) translateY(-3px);
    box-shadow: inset 0 0 0 1px var(--pf-border-light, #edf0f7), 0 28px 54px rgba(7, 40, 144, .24);
}

/* ─── Entree de la section institutionnelle au defilement ──────────────────
   Meme mecanique que plus bas : `.acc-anim-prete` n'est posee que par le JS,
   donc sans JS rien n'est masque. Le disque s'ouvre en premier, la photo
   arrive dessus, les categories se posent une par une, l'etiquette finit.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    /* Le disque est centre par translateY(-50%) : une image-cle finissant sur
       `transform: none` le ferait retomber d'une demi-hauteur. */
    @keyframes acc-gonfle-centre {
        from { opacity: 0; transform: translateY(-50%) scale(.9); }
        to   { opacity: 1; transform: translateY(-50%) scale(1); }
    }

    /* Se termine sur l'inclinaison au repos de l'etiquette, pas sur `none` */
    @keyframes acc-pose-etiquette {
        from {
            opacity: 0;
            transform: perspective(900px) translateY(22px) rotateX(12deg) rotateY(-16deg) rotate(-3deg) scale(.96);
        }
        to {
            opacity: 1;
            transform: perspective(900px) translateY(0) rotateX(3deg) rotateY(-6deg) rotate(-1deg) scale(1);
        }
    }

    .acc-sgc-section.acc-anim-prete .acc-surtitre,
    .acc-sgc-section.acc-anim-prete .acc-sgc-titre,
    .acc-sgc-section.acc-anim-prete .acc-intro,
    .acc-sgc-section.acc-anim-prete .acc-sgc-cats li,
    .acc-sgc-section.acc-anim-prete .acc-btn--pilule,
    .acc-sgc-section.acc-anim-prete .acc-sgc-tache,
    .acc-sgc-section.acc-anim-prete .acc-sgc-visuel picture,
    .acc-sgc-section.acc-anim-prete .acc-sgc-traits,
    .acc-sgc-section.acc-anim-prete .acc-sgc-badge {
        opacity: 0;
    }

    .acc-sgc-section.acc-vu .acc-surtitre {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) both;
    }

    .acc-sgc-section.acc-vu .acc-sgc-titre {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .08s both;
    }

    .acc-sgc-section.acc-vu .acc-intro {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .14s both;
    }

    .acc-sgc-section.acc-vu .acc-sgc-cats li {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) both;
    }

    .acc-sgc-section.acc-vu .acc-sgc-cats li:nth-child(1) { animation-delay: .20s; }
    .acc-sgc-section.acc-vu .acc-sgc-cats li:nth-child(2) { animation-delay: .26s; }
    .acc-sgc-section.acc-vu .acc-sgc-cats li:nth-child(3) { animation-delay: .32s; }
    .acc-sgc-section.acc-vu .acc-sgc-cats li:nth-child(4) { animation-delay: .38s; }
    .acc-sgc-section.acc-vu .acc-sgc-cats li:nth-child(5) { animation-delay: .44s; }

    .acc-sgc-section.acc-vu .acc-btn--pilule {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .50s both;
    }

    /* Le disque s'ouvre en premier, la photo se pose dessus ensuite */
    .acc-sgc-section.acc-vu .acc-sgc-tache {
        animation: acc-gonfle-centre .9s cubic-bezier(.2, .7, .3, 1) .06s both;
    }

    .acc-sgc-section.acc-vu .acc-sgc-visuel picture {
        animation: acc-monte-ample .7s cubic-bezier(.2, .7, .3, 1) .22s both;
    }

    .acc-sgc-section.acc-vu .acc-sgc-traits {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .46s both;
    }

    /* `both` laisserait l'animation tenir `transform` une fois terminee, et une
       animation l'emporte sur une declaration normale : le survol ne pouvait
       plus redresser l'etiquette. On ne retient donc que l'etat de depart, et
       l'opacite d'arrivee est posee ici. L'image-cle finit sur l'inclinaison de
       repos, la reprise en main est donc invisible. */
    .acc-sgc-section.acc-vu .acc-sgc-badge {
        opacity: 1;
        animation: acc-pose-etiquette .65s cubic-bezier(.2, .7, .3, 1) .56s backwards;
    }
}

.acc-sgc-badge-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #eaf0fb;
    color: var(--app-them, #072890);
    font-size: 18px;
}

.acc-sgc-badge strong {
    display: block;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.25;
    color: var(--pf-text, #1f2742);
}

.acc-sgc-badge > span:last-child > span {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    color: var(--pf-text-secondary, #565e7d);
}

/* ─── Atouts ───────────────────────────────────────────────────────────────── */
/* ─── Atouts : texte a gauche, portrait a droite ────────────────────────── */
.acc-atouts-section {
    padding: 88px 0;
}

/* ─── Entree de la section au defilement ───────────────────────────────────
   Cette section est sous la ligne de flottaison : une animation jouee au
   chargement serait terminee avant que le visiteur n'y arrive. Elle se
   declenche donc a l'entree dans l'ecran, une seule fois.
   `.acc-anim-prete` n'est posee QUE par le JS : sans JS, ou si le navigateur
   ne sait pas observer, rien n'est masque et tout reste visible.
   Le tout est enferme dans `no-preference` : quelqu'un qui a demande moins
   d'animations ne voit jamais un seul element masque.
   ────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    @keyframes acc-gonfle {
        from { opacity: 0; transform: scale(.9); }
        to   { opacity: 1; transform: none; }
    }

    .acc-atouts-section.acc-anim-prete .acc-surtitre,
    .acc-atouts-section.acc-anim-prete .acc-titre-atouts,
    .acc-atouts-section.acc-anim-prete .acc-intro,
    .acc-atouts-section.acc-anim-prete .acc-atouts li,
    .acc-atouts-section.acc-anim-prete .acc-btn--pilule,
    .acc-atouts-section.acc-anim-prete .acc-atouts-tache,
    .acc-atouts-section.acc-anim-prete .acc-atouts-visuel picture,
    .acc-atouts-section.acc-anim-prete .acc-atouts-traits,
    .acc-atouts-section.acc-anim-prete .acc-atouts-badge {
        opacity: 0;
    }

    .acc-atouts-section.acc-vu .acc-surtitre {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) both;
    }

    .acc-atouts-section.acc-vu .acc-titre-atouts {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .08s both;
    }

    .acc-atouts-section.acc-vu .acc-intro {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .14s both;
    }

    .acc-atouts-section.acc-vu .acc-atouts li {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) both;
    }

    .acc-atouts-section.acc-vu .acc-atouts li:nth-child(1) { animation-delay: .20s; }
    .acc-atouts-section.acc-vu .acc-atouts li:nth-child(2) { animation-delay: .26s; }
    .acc-atouts-section.acc-vu .acc-atouts li:nth-child(3) { animation-delay: .32s; }

    .acc-atouts-section.acc-vu .acc-btn--pilule {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .38s both;
    }

    /* La forme rose s'ouvre derriere le portrait, qui arrive ensuite */
    .acc-atouts-section.acc-vu .acc-atouts-tache {
        animation: acc-gonfle .8s cubic-bezier(.2, .7, .3, 1) .10s both;
    }

    .acc-atouts-section.acc-vu .acc-atouts-visuel picture {
        animation: acc-monte-ample .7s cubic-bezier(.2, .7, .3, 1) .22s both;
    }

    .acc-atouts-section.acc-vu .acc-atouts-traits {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .42s both;
    }

    .acc-atouts-section.acc-vu .acc-atouts-badge {
        animation: acc-monte .5s cubic-bezier(.2, .7, .3, 1) .50s both;
    }
}

.acc-atouts-grille {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 56px;
    align-items: center;
}

.acc-atouts-texte {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

/* Le titre se lit sur deux tons : la seconde moitie porte le rouge */
.acc-titre-atouts {
    margin: 0;
    font-size: clamp(30px, 3.6vw, 52px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--pf-text, #1f2742);
}

.acc-titre-atouts span {
    color: var(--app-second-them, #e30613);
}

.acc-atouts-texte .acc-intro {
    max-width: 480px;
}

/* Trois reperes en ligne, pictogramme rouge sur fond rose pale */
.acc-atouts {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 30px;
    margin: 6px 0 0;
    padding: 0;
    list-style: none;
}

.acc-atouts li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.acc-atout-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #fdecee;
    color: var(--app-second-them, #e30613);
    font-size: 17px;
}

.acc-atouts strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pf-text, #1f2742);
}

.acc-atouts li > span:last-child > span {
    display: block;
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--pf-text-secondary, #565e7d);
}

.acc-btn--pilule {
    margin-top: 10px;
    border-radius: 9999px;
    padding: 0 30px;
    min-height: 54px;
    font-size: 15px;
}

/* ─── Atouts : le visuel ──────────────────────────────────────────────────── */
.acc-atouts-visuel {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 420px;
}

/* Forme rose derriere le portrait */
.acc-atouts-tache {
    position: absolute;
    right: 4%;
    top: 0;
    width: 78%;
    height: 88%;
    background: #fbe3e6;
    border-radius: 56% 44% 48% 52% / 54% 50% 50% 46%;
    pointer-events: none;
}

.acc-atouts-traits {
    position: absolute;
    right: 0;
    top: 12%;
    pointer-events: none;
}

.acc-atouts-visuel picture,
.acc-atouts-visuel img {
    position: relative;
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
}

/* Etiquette posee sur le fond, jamais sur le visage */
/* Posee SOUS le portrait, jamais dessus : en absolu elle chevauchait la photo
   a tous les paliers. Filet visible car blanche sur une section blanche. */
.acc-atouts-badge {
    align-self: flex-end;
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 16px;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: inset 0 0 0 1px var(--pf-border, #dde3f0), 0 16px 40px rgba(7, 40, 144, .14);
}

.acc-atouts-badge-icone {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    color: var(--app-second-them, #e30613);
    font-size: 20px;
}

.acc-atouts-badge strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--pf-text, #1f2742);
}

.acc-atouts-badge > span:last-child > span {
    display: block;
    font-size: 14px;
    line-height: 1.3;
    color: var(--pf-text-secondary, #565e7d);
}

/* ─── Étapes ───────────────────────────────────────────────────────────────── */
.acc-etapes {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    margin: 56px 0 48px;
    padding: 0;
    list-style: none;
}

/* Decor du bandeau des etapes : deux diagonales claires, en arriere-plan */
.acc-etapes-decor {
    position: absolute;
    right: -220px;
    top: -140px;
    pointer-events: none;
}

/* Cartes posees sur le bleu : un voile blanc tres leger cercle d'un filet.
   Elles ne sont pas blanches, sinon le bandeau perd son unite. */
.acc-etapes li {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 30px 28px;
    border-radius: 20px;
    background: rgba(255, 255, 255, .06);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12);
}

.acc-etape-numero {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--app-primary-dark, #051c66);
    font-size: 20px;
    font-weight: 900;
}

.acc-etapes li:first-child .acc-etape-numero {
    background: var(--app-second-them, #e30613);
    color: #ffffff;
}

.acc-etapes h3 {
    margin: 6px 0 0;
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
}

.acc-etapes p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .74);
}

.acc-etapes-actions {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.acc-etapes-question {
    margin: 0;
    font-size: 15px;
    color: rgba(255, 255, 255, .75);
}

.acc-etapes-question a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Témoignages ──────────────────────────────────────────────────────────── */
/* Cartes posees sur le fond clair de la section, sans ombre portee */
.acc-temoignage {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 0;
    padding: 20px;
    border-radius: 12px;
    background: var(--pf-surface-alt, #f4f6fc);
}

.acc-temoignage-entete {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

/* Repere discret : le guillemet ponctue la citation, il ne la domine pas */
.acc-guillemet {
    font-size: 18px;
    line-height: 1;
    color: var(--app-second-them, #e30613);
    opacity: .5;
}

.acc-note {
    display: flex;
    gap: 3px;
    font-size: 10px;
    color: #d8a12a;
}

.acc-temoignage blockquote {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    font-weight: 400;
    color: var(--pf-text-secondary, #565e7d);
}

.acc-auteur {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid var(--pf-border-light, #edf0f7);
}

.acc-initiales {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    overflow: hidden;
    border-radius: 50%;
    /* La carte de temoignage est grise : le cercle doit s'en detacher */
    background: var(--pf-surface-card, #ffffff);
    color: var(--app-them, #072890);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .02em;
}

.acc-initiales img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.acc-auteur strong {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pf-text, #1f2742);
}

.acc-auteur span span {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    color: var(--pf-text-muted, #8b93b0);
}

/* ─── Actualités ───────────────────────────────────────────────────────────── */
.acc-article {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 20px;
    background: var(--pf-surface-card, #ffffff);
    box-shadow: 0 1px 2px rgba(7, 40, 144, .06), 0 16px 40px rgba(7, 40, 144, .08);
    color: inherit;
    text-decoration: none;
    transition: box-shadow .2s;
}

.acc-article-image {
    height: 230px;
}

.acc-article:hover,
.acc-article:focus {
    box-shadow: 0 2px 4px rgba(7, 40, 144, .08), 0 22px 50px rgba(7, 40, 144, .14);
    color: inherit;
    text-decoration: none;
}

/* Titre d'article : un pave presque noir en 21px gras faisait bloc dans la
   carte. Le bleu-gris secondaire pose le titre sans le durcir. */
.acc-article h3 {
    margin: 0;
    font-size: 19px;
    line-height: 1.45;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--pf-text-secondary, #565e7d);
}

.acc-article-date {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--pf-text-muted, #8b93b0);
}

/* Signature de l'article, discrete : elle situe le texte sans concurrencer
   le titre ni le lien de lecture. */
.acc-article-auteur {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--pf-text-muted, #8b93b0);
}

.acc-article-auteur i {
    font-size: 12px;
}

.acc-article-lien {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: auto;
    font-size: 15px;
    font-weight: 700;
    color: var(--app-them, #072890);
}

.acc-article:hover .acc-article-lien {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ─── Questions fréquentes ─────────────────────────────────────────────────── */
.acc-faq-grille {
    display: grid;
    grid-template-columns: 420px minmax(0, 1fr);
    gap: 80px;
    align-items: start;
}

.acc-faq-aide {
    position: relative;
    overflow: hidden;
    margin-top: 22px;
    padding: 30px;
    border-radius: 20px;
    background: var(--app-them, #072890);
    color: #ffffff;
}

.acc-faq-aide-anneau {
    position: absolute;
    right: -50px;
    top: -50px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 26px rgba(255, 255, 255, .07);
    pointer-events: none;
}

.acc-faq-aide h3 {
    position: relative;
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
    color: #ffffff;
}

.acc-faq-aide p {
    position: relative;
    margin: 0 0 18px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, .8);
}

.acc-faq-aide .acc-btn {
    position: relative;
    min-height: 50px;
}

.acc-liste-faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* La section est blanche : une question fermee en blanc n'aurait aucun contour.
   Elle repose sur le gris clair et passe au blanc une fois ouverte. */
.acc-faq-item {
    border-radius: 16px;
    background: var(--pf-surface-alt, #f4f6fc);
}

.acc-faq-item--ouvert {
    background: var(--pf-surface-card, #ffffff);
    box-shadow: 0 8px 24px rgba(7, 40, 144, .06);
}

.acc-faq-titre {
    margin: 0;
    font-size: inherit;
}

.acc-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    min-height: 60px;
    padding: 22px 26px;
    border: 0;
    background: none;
    text-align: left;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--pf-text, #1f2742);
    cursor: pointer;
}

.acc-faq-marque {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    /* La question fermee est deja grise : une pastille grise s'y fondrait */
    background: var(--pf-surface-card, #ffffff);
    color: var(--app-them, #072890);
    font-size: 14px;
}

.acc-faq-question[aria-expanded="true"] .acc-faq-marque {
    background: var(--app-them, #072890);
    color: #ffffff;
}

.acc-faq-reponse {
    padding: 0 76px 22px 26px;
    font-size: 15px;
    line-height: 1.65;
    color: var(--pf-text-secondary, #565e7d);
}

.acc-centre {
    margin-top: 10px;
}

/* ─── Partenaires ──────────────────────────────────────────────────────────── */
.acc-partenaires {
    padding: 88px 0;
}

.acc-partenaires .acc-titre-section {
    font-size: clamp(21px, 2vw, 26px);
}

.acc-partenaires .acc-entete-section {
    align-items: center;
    text-align: center;
    margin: 0 auto 40px;
}

.acc-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.acc-logos a,
.acc-logos div {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 260px;
    height: 130px;
    padding: 20px;
    border-radius: 18px;
    /* La section partenaires est grise : une pastille grise y serait invisible */
    background: var(--pf-surface-card, #ffffff);
    box-shadow: 0 1px 0 var(--pf-border, #dde3f0);
}

.acc-logos img {
    max-width: 100%;
    max-height: 64px;
    object-fit: contain;
}

.acc-logo-texte {
    font-weight: 700;
    color: var(--pf-text-secondary, #565e7d);
}

/* Le bandeau d'appel du pied de page repete les boutons des étapes sur cette page */
.site-footer .footer-cta {
    display: none;
}

/* ─── Grands ecrans etroits ────────────────────────────────────────────────
   Le budget du bandeau est arithmetique : 520 de texte + 32 de garde + 430 de
   portrait + 48 de gouttiere + 440 de carte = 1470px de contenu. En dessous
   d'environ 1400px de fenetre, les trois ne tiennent plus et la carte recouvre
   le portrait : il n'en resterait qu'un liseré de 124px, qui ne se lit pas
   comme une personne. Mieux vaut ne plus le montrer du tout.
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1399px) {
    .acc-hero-visuel {
        display: none;
    }

    /* Le plafond de 520px n'existait que pour tenir le texte hors du portrait.
       Celui-ci n'etant plus affiche, le plafond ne protege plus rien et ne fait
       que laisser du vide a droite du texte. */
    .acc-hero-contenu {
        max-width: none;
    }
}

/* ─── Largeurs moyennes ────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
    .acc-hero-grille {
        grid-template-columns: minmax(0, 1fr) 420px;
        gap: 44px;
    }

    .acc-faq-grille {
        grid-template-columns: 340px minmax(0, 1fr);
        gap: 48px;
    }

    /* Les deux colonnes des atouts restent fluides : une colonne de texte
       figee a 340px etranglait le titre a ce palier */
    .acc-atouts-grille {
        gap: 40px;
    }

    /* Quatre colonnes deviennent trop serrees sous 1200px */
    .acc-grille-services {
        --visibles: 3;
    }

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

@media (max-width: 991px) {
    /* La section n'avait AUCUNE regle responsive : a 390px la colonne de texte
       tombait a 158px et les libelles de categories se chevauchaient. */
    .acc-sgc-grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    .acc-sgc-cats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Meme raison qu'au-dessus : plus de decalage negatif, le cercle reste
       entier. Il herite du centrage vertical. */
    .acc-sgc-tache {
        right: -160px;
        width: 440px;
        height: 440px;
    }

    /* Sur telephone, l'outil de conversion doit venir AVANT les preuves :
       la carte etait rejetee a 1,26 ecran, son bouton jamais vu sans defiler. */
    .acc-hero-contenu {
        display: contents;
    }

    .acc-hero-haut {
        order: 1;
    }

    .acc-carte-compte {
        order: 2;
    }

    .acc-preuves {
        order: 3;
        margin-top: 0;
        padding-top: 14px;
    }

    .acc-section {
        padding: 72px 0;
    }

    .acc-section--services {
        padding-bottom: 72px;
    }

    /* La barre de filtres deborde : un fondu au bord dit qu'il y a une suite */
    .acc-filtres {
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
                mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
    }

    /* Le fondu est fixe au bord droit : sans cette reserve, le dernier libelle
       restait a demi efface meme une fois la barre defilee jusqu'au bout.
       Une marge sur le dernier bouton plutot qu'un padding sur le conteneur :
       le padding de fin d'une piste flex n'entre pas dans scrollWidth partout. */
    .acc-filtres button:last-child {
        margin-right: 22px;
    }

    /* Au doigt, la cible reprend sa hauteur pleine */
    .acc-filtres button {
        min-height: 44px;
    }

    .acc-hero {
        padding: 56px 0 72px;
    }

    .acc-hero-grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }

    .acc-hero-contenu {
        padding-top: 0;
    }

    .acc-carte-compte {
        max-width: 560px;
        margin-bottom: 0;
    }

    /* Quatre colonnes d'atouts deviennent trop etroites : les titres debordent */
    .acc-preuves {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .acc-atouts-grille,
    .acc-faq-grille {
        grid-template-columns: minmax(0, 1fr);
        gap: 36px;
    }

    /* Empilees : le portrait ne doit pas manger l'ecran et l'etiquette
       doit rester dans le cadre */
    .acc-atouts-visuel {
        min-height: 0;
    }

    .acc-atouts-visuel picture,
    .acc-atouts-visuel img {
        max-width: 420px;
    }

    .acc-atouts-badge {
        right: 8px;
        bottom: 6%;
        padding: 12px 16px;
    }

    .acc-grille-services {
        --visibles: 2;
    }

    .acc-etapes {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 40px 0 36px;
    }

    .acc-faq-aide {
        margin-top: 4px;
    }
}

/* ─── Téléphone ────────────────────────────────────────────────────────────── */
@media (max-width: 575px) {
    .acc-sgc-section {
        padding: 52px 0;
    }

    .acc-sgc-cats {
        grid-template-columns: minmax(0, 1fr);
    }

    .acc-sgc-traits {
        display: none;
    }

    .acc-sgc-badge {
        align-self: stretch;
    }

    /* 1,15 : la carte suivante affleure, ce qui annonce le defilement sans
       avoir besoin d'une fleche ni d'un texte. */
    .acc-grille-services {
        --visibles: 1.15;
    }

    .acc-fleches {
        display: none;
    }

    /* Trois blocs empiles : 40px de gouttiere repoussaient le bouton d'action
       sous la ligne de flottaison. */
    .acc-hero-grille {
        gap: 24px;
    }

    .acc-section {
        padding: 56px 0;
    }

    .acc-section--services {
        padding-bottom: 56px;
    }

    .acc-hero {
        padding: 36px 0 56px;
    }

    .acc-preuves {
        /* Une seule colonne empilait 4 rangees et repoussait la carte
           « Ouvrir un compte » hors de l'ecran : le bandeau faisait 1,24 ecran. */
        grid-template-columns: minmax(0, 1fr);
        /* 36px ici annulaient le resserrement pose au palier 991 : le bouton
           d'action restait sous la ligne de flottaison. */
        margin-top: 0;
    }

    .acc-hero-actions .acc-btn,
    .acc-etapes-actions .acc-btn {
        width: 100%;
    }

    .acc-carte-compte {
        padding: 22px;
    }

    .acc-atouts,
    .acc-etapes {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Témoignages et actualités : défilement horizontal plutot qu'une longue pile */
    .acc-grille-3 {
        display: flex;
        gap: 14px;
        margin: 0 -16px;
        padding: 4px 16px 12px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .acc-grille-3 > * {
        flex: none;
        width: 310px;
        box-sizing: border-box;
    }

    .acc-service-image {
        height: 170px;
    }

    .acc-article-image {
        height: 180px;
    }

    .acc-temoignage,
    .acc-service-corps,
    .acc-article-corps,
    .acc-atouts li,
    .acc-etapes li,
    .acc-faq-aide {
        padding: 22px;
    }

    .acc-faq-question {
        padding: 18px 20px;
        font-size: 16px;
    }

    .acc-faq-reponse {
        padding: 0 20px 18px;
    }

    .acc-etapes-question {
        margin-left: 0;
    }

    .acc-logos a,
    .acc-logos div {
        width: 150px;
        height: 90px;
        padding: 12px;
    }

    .acc-logos img {
        max-height: 44px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .acc-btn,
    .acc-article,
    .acc-sgc-badge {
        transition: none;
    }
}