/**
 * FICHE-PAIE.FR — Styles spécifiques : Page « Informations vérifiables »
 *
 * Page autonome : toutes les règles sont préfixées « .iv- » et ne peuvent
 * atteindre aucune autre page du site. Aucune classe du site n'est réutilisée,
 * aucune déclaration forcée, aucune dépendance externe.
 *
 * Reprise des règles « .iv- » de la source de rédaction
 * (fiche-paie-fr_page-informations-verifiables_v5_2026-07-27.html).
 * Les règles d'aperçu à sélecteur global (:root, *, body, p, a) n'ont PAS été
 * reportées : elles atteindraient tout le site. Leurs équivalents existent déjà
 * dans la charte — --gp-bleu-marine (#1e3760), --gp-turquoise (#5ec5c8) et
 * --gp-gris (#6b7280) sont déclarées à l'identique dans design-system/tokens.css,
 * et « * { box-sizing: border-box } » est posé par style.css.
 *
 * @copyright 2025-2026 Purple Telecom EURL
 * @license   Proprietary - All Rights Reserved
 * @author    Fabien HIRIART <contact@polygonlab.ai>
 * @link      https://fiche-paie.fr/informations-verifiables
 */

/* ====================================
   STRUCTURE COMMUNE
   ====================================
   .iv-container et .iv-section sont indispensables ici : le layout du site
   place le contenu de la page dans un <main> sans conteneur, et aucune autre
   feuille ne définit ces deux classes. Sans elles, la page s'afficherait bord
   à bord, sans marge latérale, y compris à 375 px. */
.iv-container {
    max-width: 860px;
    margin: 0 auto;
    padding: 0 24px;
}

.iv-section {
    padding: 48px 0;
}

/* Espacement des paragraphes.
   La source de rédaction le posait par une règle globale « p { margin: 0 0 14px } »,
   non reportable telle quelle. Le reset du site (« * { margin: 0; padding: 0 } »)
   annule toute marge et aucune règle « p » ne la rétablit : sans cette ligne, les
   paragraphes du chapeau, du point d'information et des blocs se toucheraient.
   :where() maintient la spécificité à celle du sélecteur « p » seul (0,0,1),
   exactement comme la règle d'origine : les règles à classe ci-dessous
   (.iv-section-chapo, .iv-maj, .iv-chapeau p:last-child…) continuent de primer. */
:where(.iv-section) p {
    margin: 0 0 14px;
}

.iv-section-entete h2 {
    font-size: 1.55rem;
    line-height: 1.25;
    font-weight: 700;
    color: var(--gp-bleu-marine);
    margin: 0 0 8px;
    letter-spacing: -.02em;
}

.iv-surtitre {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gp-gris);
    margin: 0 0 10px;
}

.iv-section-chapo {
    color: #5b6779;
    margin: 0 0 26px;
}

/* ====================================
   EN-TÊTE DE PAGE
   ==================================== */
.iv-entete {
    text-align: center;
    margin-bottom: 30px;
}

.iv-entete .iv-surtitre {
    font-size: .82rem;
    letter-spacing: .22em;
    color: var(--gp-bleu-marine);
    margin-bottom: 14px;
}

.iv-entete h1 {
    font-size: 1.9rem;
    line-height: 1.22;
    font-weight: 700;
    color: var(--gp-bleu-marine);
    letter-spacing: -.02em;
    margin: 0 auto 10px;
    max-width: 700px;
}

.iv-entete .iv-section-chapo {
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

hr.iv-filet {
    width: 64px;
    height: 2px;
    background: var(--gp-turquoise);
    border: 0;
    margin: 0 auto 18px;
}

/* ====================================
   CHAPEAU ET POINT D'INFORMATION
   ==================================== */
.iv-chapeau {
    background: #f6f8fb;
    border: 1px solid #dfe5ee;
    border-left: 4px solid var(--gp-turquoise);
    border-radius: 6px;
    padding: 26px 28px;
    margin: 0 0 30px;
}

.iv-chapeau p:last-child {
    margin-bottom: 0;
}

.iv-chapeau strong {
    color: var(--gp-bleu-marine);
}

.iv-note {
    border: 1px solid #dfe5ee;
    border-left: 4px solid var(--gp-bleu-marine);
    border-radius: 6px;
    padding: 22px 26px;
    margin: 0 0 30px;
    background: #fff;
}

.iv-note .iv-surtitre {
    margin-bottom: 10px;
}

.iv-note p:last-child {
    margin-bottom: 0;
}

/* ====================================
   BLOCS DE CONTENU
   ==================================== */
.iv-bloc {
    margin: 0 0 34px;
}

.iv-bloc h2 {
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--gp-bleu-marine);
    margin: 0 0 10px;
}

/* ====================================
   LISTES DE FAITS
   ==================================== */
.iv-faits {
    margin: 0;
    display: grid;
    grid-template-columns: 230px 1fr;
}

.iv-faits dt {
    font-weight: 600;
    color: #5b6779;
    padding: 9px 0;
    border-bottom: 1px solid #dfe5ee;
}

.iv-faits dd {
    margin: 0;
    padding: 9px 0;
    border-bottom: 1px solid #dfe5ee;
}

/* ====================================
   TABLEAU DES VÉRIFICATIONS
   ==================================== */
.iv-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
    margin: 6px 0;
}

.iv-tableau caption {
    text-align: left;
    color: #5b6779;
    font-size: .9rem;
    padding-bottom: 10px;
}

.iv-tableau th,
.iv-tableau td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid #dfe5ee;
    vertical-align: top;
}

.iv-tableau th {
    font-weight: 700;
    color: var(--gp-bleu-marine);
    background: #f6f8fb;
    font-size: .88rem;
}

.iv-tableau td.iv-ok {
    color: #12735f;
    font-weight: 600;
    white-space: nowrap;
}

/* ====================================
   QUESTIONS FRÉQUENTES
   ==================================== */
.iv-faq details {
    border: 1px solid #dfe5ee;
    border-radius: 6px;
    padding: 14px 18px;
    margin-bottom: 10px;
    background: #fff;
}

.iv-faq summary {
    font-weight: 700;
    color: var(--gp-bleu-marine);
    cursor: pointer;
}

.iv-faq summary:focus-visible {
    outline: 2px solid var(--gp-turquoise);
    outline-offset: 3px;
}

.iv-faq details p {
    margin: 12px 0 0;
}

/* ====================================
   MENTIONS DE VÉRIFICATION ET DE MISE À JOUR
   ==================================== */
.iv-verif {
    border-left: 3px solid var(--gp-turquoise);
    padding-left: 14px;
    color: #5b6779;
}

.iv-maj {
    margin-top: 34px;
    color: #5b6779;
    font-size: .9rem;
}

/* ====================================
   MOBILE
   ==================================== */
@media (max-width: 620px) {
    .iv-section {
        padding: 34px 0;
    }

    .iv-section-entete h2 {
        font-size: 1.32rem;
    }

    .iv-faits {
        grid-template-columns: 1fr;
    }

    .iv-faits dt {
        border-bottom: 0;
        padding-bottom: 0;
    }

    /* Tableau des vérifications sur petit écran.
       Ses quatre colonnes ne peuvent pas tenir dans la largeur utile d'un
       mobile : à 375 px, la largeur minimale du contenu (dates non sécables,
       intitulés des services) dépasse d'une quarantaine de pixels. Deux
       mesures, aucune sur le contenu :
       - « white-space: normal » sur la colonne des résultats, qui est en
         « nowrap » sur grand écran et débordait à elle seule ;
       - le tableau devient sa propre zone de défilement horizontal, si bien
         que la page, elle, ne défile jamais latéralement. */
    .iv-tableau {
        font-size: .9rem;
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .iv-tableau th,
    .iv-tableau td {
        padding: 8px;
    }

    .iv-tableau td.iv-ok {
        white-space: normal;
    }

    .iv-chapeau,
    .iv-note {
        padding: 20px;
    }
}