/* Charte graphique 1ContratFacile — surcouche d'écran.
   Rien ici ne s'applique à l'impression ni au contrat (.a4-page) ni aux champs du formulaire. */
@media screen {
    :root {
        --cf-papier: #F6F2EA;
        --cf-encre: #17395B;
        --cf-nuit: #0E2740;
        --cf-orange: #E07B2C;
        --cf-filet: linear-gradient(90deg, #17395B 0 70%, #E07B2C 70% 100%);
        --cf-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    }

    /* Papier : fond chaud à la place du gris */
    body.bg-gray-100 { background-color: var(--cf-papier); }

    /* En-tête et pied de page identiques sur toutes les pages */
    header.bg-cf-navy, header.bg-slate-800 { background-color: var(--cf-encre); border-bottom: 3px solid var(--cf-orange); box-shadow: 0 2px 10px rgba(14, 39, 64, .18); }
    footer.bg-slate-900, footer.bg-cf-dark { background-color: var(--cf-nuit); border-top: 3px solid var(--cf-orange); }

    /* Titres : empattements sobres, comme un vrai contrat */
    h1:not(.a4-page *), main h2:not(.a4-page *):not(.cf-form *), main h3:not(.a4-page *):not(.cf-form *) {
        font-family: var(--cf-serif);
        letter-spacing: -.005em;
    }
    h1:not(.a4-page *) { color: var(--cf-encre); }
    /* Filet bleu et orange sous le titre principal */
    h1:not(.a4-page *)::after {
        content: ""; display: block; width: 3.5rem; height: 4px; margin-top: .65rem;
        background: var(--cf-filet); border-radius: 2px;
    }

    /* Cartes : des feuilles, liseré marine à gauche, coins peu arrondis */
    main .bg-white.rounded-xl, .cf-form {
        border-radius: .5rem;
        border: 1px solid #E4DED2;
        border-left: 4px solid var(--cf-encre);
        box-shadow: 0 1px 2px rgba(14, 39, 64, .06), 0 6px 18px rgba(14, 39, 64, .06);
    }

    /* Tuiles de choix du générateur */
    .cf-tile { border-radius: .4rem; border-color: #D9D2C4; border-bottom-width: 3px; }
    .cf-tile i { color: var(--cf-encre); }
    .cf-tile:hover { border-color: var(--cf-encre); border-bottom-color: var(--cf-orange); background: #FDF4EB; }
    .cf-tile.is-active { border-bottom-color: var(--cf-orange); }
    .cf-tile b { font-family: var(--cf-serif); font-size: .85rem; }
    /* Grille des 8 tuiles : sur téléphone 3 par ligne, les 2 dernières en demi-largeur ; sur ordinateur 8 en ligne */
    .cf-tiles { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .cf-tiles > .cf-tile { grid-column: span 2; }
    .cf-tiles > .cf-tile:nth-last-child(-n+2) { grid-column: span 3; }
    @media (min-width: 1024px) {
        .cf-tiles { grid-template-columns: repeat(8, minmax(0, 1fr)); }
        .cf-tiles > .cf-tile, .cf-tiles > .cf-tile:nth-last-child(-n+2) { grid-column: span 1; }
    }

    /* Bandeau de confiance : uniquement des faits vérifiés */
    .cf-trust { list-style: none; margin: 1rem 0 0; padding: .7rem 0 0; display: flex; flex-wrap: wrap; gap: .35rem 1.4rem; border-top: 1px solid #E4DED2; font-size: .8rem; color: #4B5563; }
    .cf-trust li { display: flex; align-items: center; gap: .4rem; }
    .cf-trust li::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--cf-orange); flex: none; }
}

/* Le nouveau logo porte déjà le nom du site : on masque le texte qui le doublait dans l'en-tête */
@media screen {
    header a[href="/"] > :not(img) { display: none; }
    header a[href="/"] > img { background: #fff; border-radius: .4rem; padding: .2rem .45rem; height: 2.6rem; }
    @media (min-width: 1024px) { header a[href="/"] > img { height: 3.1rem; } }
}