/*
 * theme_overrides.css — CFA Interpro28
 * Chargé APRÈS app.css — priorité garantie.
 * Toutes les règles préfixées .page-index pour ne pas affecter les autres pages.
 */

/* ============================================================
   1. RECHERCHE : suppression du bandeau bleu
   La couleur vient de --search__bg sur .help-search (dans app.css).
   On écrase uniquement sur la page index.
   ============================================================ */
.page-index .help-search {
    background-color: transparent !important;
    padding: 32px 0 20px !important;
}
.page-index .search__form {
    /*max-width: 560px;*/
    margin: 0 auto;
    background: var(--surface);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    border: 1px solid var(--white-8);
}
.page-index .search__form .form-group {
    min-width:100%;
}
.page-index .search__title {
    color: var(--font__pri-clr);
    text-align: center;
    margin-bottom: 16px;
}
.form-submit-ticket .form-group {
    max-width: 1070px;
    margin-bottom: 32px
}

/* ============================================================
   2. RESTRUCTURATION .nav
   Natif : flex wrap centré, chaque .navlink max-width:344px margin:16px
   Objectif : CTA pleine largeur, puis 2 cartes côte à côte
   ============================================================ */
.page-index .nav {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 14px;
    margin: 24px 0 20px;
}

/* Tous les navlinks : reset du max-width et margin natifs */
.page-index .nav .navlink {
    margin: 0;
    box-sizing: border-box;
}

/* --- CTA principal : pleine largeur --- */
.page-index .nav .navlink:first-child {
    width: 100%;
    max-width: 100%;
    background-color: var(--primary);
    box-shadow: 0 4px 16px rgba(4, 122, 153, 0.28);
    padding: 24px 28px;
    justify-content: space-between; /* pousse le bouton à droite */
    align-items: center;
    border-radius: 8px;
    transition: box-shadow 0.2s, transform 0.15s;
}
.page-index .nav .navlink:first-child .cta-btn {
    display: inline-block;
    flex-shrink: 0;
    margin-left: auto;
    background: #fff;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 6px;
    line-height: 1.4;
    white-space: nowrap;
}
.page-index .nav .navlink:first-child:hover {
    box-shadow: 0 6px 22px rgba(4, 122, 153, 0.4);
    transform: translateY(-2px);
    background-color: var(--primary);
}

/* Icône blanche */
.page-index .nav .navlink:first-child > .icon-in-circle {
    background-color: rgba(255,255,255,0.22);
    flex-shrink: 0;
    margin-top: 4px;
}
.page-index .nav .navlink:first-child > .icon-in-circle .icon {
    fill: #fff;
}

/* Conteneur texte en colonne */
.page-index .nav .navlink:first-child > div {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Titre et description */
.page-index .nav .navlink:first-child .navlink__title {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 700;
}
.page-index .nav .navlink:first-child .navlink__descr {
    color: rgba(255,255,255,0.85);
    font-size: 0.88rem;
}

/*.page-index .nav .navlink:first-child > div::after {
    content: "Déposer ma réclamation →";
    display: inline-block;
    margin-top: 10px;
    background: #fff;
    color: var(--primary);
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 20px;
    border-radius: 6px;
    width: fit-content;
    line-height: 1.4;
    align-self: flex-end;
}*/

/* --- Cartes secondaires : côte à côte, 50% chacune --- */
.page-index .nav .navlink:not(:first-child) {
    /*width: calc(50% - 7px);
    max-width: calc(50% - 7px);*/
    min-width:100%;
    background-color: var(--surface);
    box-shadow: 0 2px 6px rgba(38,40,42,0.12);
    border: 1.5px solid var(--white-8);
    border-radius: 8px;
    padding: 16px 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.page-index .nav .navlink:not(:first-child):hover {
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgba(4,122,153,0.15);
    background-color: var(--white-6);
}
.page-index .nav .navlink:not(:first-child) .navlink__title {
    color: var(--secondary);
    font-size: 0.92rem;
}
.page-index .nav .navlink:not(:first-child) .navlink__descr {
    color: var(--gray-4);
    font-size: 0.82rem;
}
.page-index .nav .navlink:not(:first-child):hover > .icon-in-circle {
    background-color: var(--primary);
}


/* ============================================================
   3. LIEN ADMIN : cadenas aligné à droite
   ============================================================ */
.page-index .article__footer:last-child {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end;
    margin-top: 20px;
}
.page-index .article__footer:last-child .link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    color: var(--gray-3);
    text-decoration: none;
    padding: 4px 12px;
    border: 1px solid var(--white-8);
    border-radius: 10px;
    background: beige;
    transition: color 0.2s, border-color 0.2s;
}
.page-index .article__footer:last-child .link::before {
    content: "";
    display: inline-block;
    width: 11px;
    height: 13px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239c9c9c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
.page-index .article__footer:last-child .link:hover {
    color: var(--primary);
    border-color: var(--primary);
}
.page-index .article__footer:last-child .link:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23047a99' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");
}


/* ============================================================
   4. RESPONSIVE mobile
   ============================================================ */
@media (max-width: 600px) {
    .page-index .nav .navlink:first-child {
        transform: none !important;
    }
    .page-index .nav .navlink:not(:first-child) {
        width: 100%;
        max-width: 100%;
    }
    .page-index .nav .navlink:first-child > div::after {
        width: 100%;
        text-align: center;
        box-sizing: border-box;
    }
}