/* ==========================================================================
   Générateur de checklist chantier — feuille dédiée.
   Conçue mobile d'abord : l'outil est utilisé sur un téléphone, une main sur
   l'écran, souvent en plein soleil. D'où des cibles tactiles de 44 px minimum,
   des libellés courts et un contraste élevé sur les trois boutons de réponse.
   ========================================================================== */

:root {
    --ck-red: #dc2626;
    --ck-dark: #1e293b;
    --ck-sticky-top: 70px; /* hauteur du header collant du site */
}

@media (min-width: 992px) {
    :root { --ck-sticky-top: 90px; }
}

/* ==========================================================================
   1. ÉTAPE 1 — CONFIGURATION
   ========================================================================== */

/* --- Préréglages : premier geste attendu sur mobile, avant la liste longue --- */
.ck-presets {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

@media (min-width: 768px) {
    .ck-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ck-preset {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 64px;
    padding: 10px 12px;
    text-align: left;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}

.ck-preset:hover { border-color: #fca5a5; background: #fef2f2; }
.ck-preset:focus-visible { outline: 3px solid rgba(220, 38, 38, .35); outline-offset: 1px; }

.ck-preset.is-active {
    border-color: var(--ck-red);
    background: #fef2f2;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}

.ck-preset__icon {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #64748b;
}

.ck-preset.is-active .ck-preset__icon { background: var(--ck-red); color: #fff; }

.ck-preset__label { display: block; font-weight: 800; font-size: .82rem; line-height: 1.2; color: #1e293b; }
.ck-preset__sub { display: block; font-size: .68rem; color: #94a3b8; line-height: 1.25; margin-top: 2px; }
.ck-preset__count { display: block; font-size: .68rem; color: var(--ck-red); font-weight: 700; margin-top: 2px; }

/* --- Cartes de catégorie --- */
.ck-card {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-height: 56px;
    padding: 12px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.ck-card:hover { border-color: #93c5fd; background: #f8fafc; }

/* `display:none` retirait les cases du parcours de tabulation : on les masque
   visuellement tout en les laissant focusables et actionnables au clavier. */
.ck-card input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    pointer-events: none;
}

.ck-card:focus-within { border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .28); }
.ck-card:has(input:checked) { border-color: #3b82f6; background: #eff6ff; box-shadow: 0 0 0 3px rgba(59, 130, 246, .1); }
.ck-card:has(input:checked) .ck-card__icon { background: #dbeafe; color: #1d4ed8; }
.ck-card:has(input:checked) .ck-card__check { display: flex; }

.ck-card__body { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }

.ck-card__icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    color: #94a3b8;
    flex-shrink: 0;
    transition: all .2s;
}

.ck-card__check {
    display: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #3b82f6;
    color: #fff;
    font-size: .7rem;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ck-card--locked { border-color: #93c5fd; background: #eff6ff; cursor: default; }
.ck-card--locked:hover { border-color: #93c5fd; background: #eff6ff; }

/* --- Filtre des catégories --- */
.ck-filter { position: relative; width: 100%; }

@media (min-width: 768px) {
    .ck-filter { min-width: 230px; width: auto; }
}

.ck-filter i {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-size: .8rem;
}

.ck-filter input {
    width: 100%;
    padding: 9px 12px 9px 32px;
    font-size: 16px; /* < 16px déclenche un zoom automatique sur iOS au focus */
    border: 1.5px solid #e2e8f0;
    border-radius: 9px;
}

.ck-filter input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }

/* --- Barre d'action collante (mobile) : le bouton « Générer » était hors écran --- */
.ck-actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .97);
    border-top: 1px solid #e2e8f0;
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .08);
}

.ck-actionbar__count { flex: 1; min-width: 0; font-size: .74rem; line-height: 1.25; color: #64748b; }
.ck-actionbar__count strong { color: #1e293b; }

.ck-actionbar .btn { flex-shrink: 0; min-height: 46px; }

@media (min-width: 992px) {
    .ck-actionbar { display: none; }
}

/* Le contenu ne doit pas passer sous la barre collante. */
.ck-has-actionbar { padding-bottom: 88px; }

@media (min-width: 992px) {
    .ck-has-actionbar { padding-bottom: 0; }
}

/* ==========================================================================
   2. ÉTAPE 2 — MODE TERRAIN (grille remplissable)
   ========================================================================== */

.ck-progress {
    position: sticky;
    top: var(--ck-sticky-top);
    z-index: 500;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 4px 14px rgba(15, 23, 42, .06);
    margin-bottom: 16px;
}

.ck-progress__row { display: flex; align-items: center; gap: 10px; }
.ck-progress__stat { font-size: .78rem; font-weight: 800; color: #1e293b; white-space: nowrap; }
.ck-progress__nc { font-size: .72rem; font-weight: 800; color: var(--ck-red); white-space: nowrap; }

.ck-progress__bar {
    flex: 1;
    height: 8px;
    border-radius: 99px;
    background: #e2e8f0;
    overflow: hidden;
}

.ck-progress__fill {
    height: 100%;
    width: 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #059669, #10b981);
    transition: width .25s ease;
}

/* --- Sections repliables --- */
.ck-section { border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; margin-bottom: 12px; background: #fff; }

.ck-section__head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 12px 14px;
    background: var(--ck-dark);
    color: #fff;
    border: 0;
    text-align: left;
    cursor: pointer;
}

.ck-section__head:focus-visible { outline: 3px solid #fbbf24; outline-offset: -3px; }
.ck-section__icon { flex-shrink: 0; color: #fbbf24; }
.ck-section__title { flex: 1; min-width: 0; font-weight: 800; font-size: .86rem; line-height: 1.25; }

.ck-section__badge {
    flex-shrink: 0;
    font-size: .68rem;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 99px;
    background: rgba(255, 255, 255, .16);
}

.ck-section__badge.is-done { background: #059669; }
.ck-section__chevron { flex-shrink: 0; transition: transform .2s ease; }
.ck-section.is-open .ck-section__chevron { transform: rotate(180deg); }
.ck-section__body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

/* --- Un point de contrôle = une carte --- */
.ck-pt { border: 1.5px solid #e2e8f0; border-radius: 10px; padding: 10px 12px; background: #fff; }
.ck-pt.is-c { border-color: #a7f3d0; background: #f0fdf4; }
.ck-pt.is-nc { border-color: #fca5a5; background: #fef2f2; }
.ck-pt.is-na { border-color: #e2e8f0; background: #f8fafc; opacity: .75; }

.ck-pt__label { font-size: .9rem; font-weight: 600; color: #1e293b; line-height: 1.35; }

.ck-pt__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: 4px;
    border-radius: 50%;
    border: 0;
    background: #e0e7ff;
    color: #4338ca;
    font-size: .68rem;
    vertical-align: middle;
    cursor: pointer;
}

.ck-pt__info:hover { background: #c7d2fe; }
.ck-pt__info:focus-visible { outline: 3px solid rgba(67, 56, 202, .35); outline-offset: 1px; }

.ck-pt__ref {
    margin-top: 8px;
    padding: 8px 10px;
    border-left: 3px solid #4338ca;
    border-radius: 0 6px 6px 0;
    background: #eef2ff;
    font-size: .78rem;
    line-height: 1.45;
    color: #3730a3;
}

/* --- Les trois réponses : cibles tactiles pleine largeur --- */
.ck-pt__choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; }

.ck-choice {
    min-height: 44px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    font-size: .78rem;
    font-weight: 800;
    color: #64748b;
    cursor: pointer;
    transition: all .12s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.ck-choice:focus-visible { outline: 3px solid rgba(59, 130, 246, .4); outline-offset: 1px; }
.ck-choice[data-v="c"].is-on { background: #059669; border-color: #059669; color: #fff; }
.ck-choice[data-v="nc"].is-on { background: var(--ck-red); border-color: var(--ck-red); color: #fff; }
.ck-choice[data-v="na"].is-on { background: #64748b; border-color: #64748b; color: #fff; }

/* --- Justification : disponible sur les trois réponses ---
   Ouverte d'office sur NC et N/A, où l'absence de motif vide l'audit de sa
   valeur de preuve ; repliée derrière un bouton sur Conforme, pour qu'une
   ronde sans écart s'enchaîne d'un tap par point. */
.ck-pt__just { margin-top: 10px; display: none; }
.ck-pt.is-c .ck-pt__just,
.ck-pt.is-nc .ck-pt__just,
.ck-pt.is-na .ck-pt__just { display: block; }

.ck-just-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    min-height: 36px;
    padding: 4px 10px;
    border: 1.5px dashed #cbd5e1;
    border-radius: 8px;
    background: transparent;
    color: #64748b;
    font-size: .76rem;
    font-weight: 700;
    cursor: pointer;
}

.ck-pt.is-c .ck-just-toggle { display: inline-flex; }
.ck-just-toggle:hover { border-color: #94a3b8; color: #334155; }
.ck-just-toggle:focus-visible { outline: 3px solid rgba(59, 130, 246, .35); outline-offset: 1px; }

.ck-just-fields { display: none; }
.ck-pt.is-just-open .ck-just-fields { display: block; margin-top: 8px; }

.ck-just-fields textarea,
.ck-just-fields input {
    width: 100%;
    font-size: 16px; /* évite le zoom iOS */
    padding: 8px 10px;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
}

.ck-pt.is-nc .ck-just-fields textarea,
.ck-pt.is-nc .ck-just-fields input { border-color: #fecaca; }

.ck-just-fields textarea:focus,
.ck-just-fields input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59, 130, 246, .12); }

.ck-pt.is-nc .ck-just-fields textarea:focus,
.ck-pt.is-nc .ck-just-fields input:focus { border-color: var(--ck-red); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

/* Responsable et délai ne concernent qu'une action corrective. */
.ck-just-row { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.ck-just-row--nc { display: none; }
.ck-pt.is-nc .ck-just-row--nc { display: grid; }

.ck-pt__nc-label { display: block; font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-bottom: 3px; }
.ck-pt.is-nc .ck-pt__nc-label { color: #b91c1c; }
.ck-pt.is-na .ck-pt__nc-label { color: #475569; }

/* Miroir d'impression : un textarea se rend mal en PDF (html2canvas) et tronque
   le texte à l'impression. On imprime un bloc de texte tenu à jour en parallèle. */
.ck-print-only { display: none; }

/* --- Synthèse des non-conformités --- */
.ck-synthese { border: 2px solid #e2e8f0; border-radius: 12px; padding: 14px; margin-bottom: 16px; background: #fff; }
.ck-synthese.has-nc { border-color: #fca5a5; background: #fef2f2; }
.ck-synthese__item { padding: 8px 0; border-bottom: 1px dashed #fecaca; font-size: .84rem; }
.ck-synthese__item:last-child { border-bottom: 0; }
.ck-synthese__sec { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #94a3b8; font-weight: 800; }
.ck-synthese__meta { display: block; font-size: .74rem; color: #b91c1c; margin-top: 2px; }

/* --- Compteurs de fin de grille --- */
.ck-tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ck-tally__box { text-align: center; padding: 10px 6px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.ck-tally__n { display: block; font-size: 1.4rem; font-weight: 800; line-height: 1; }
.ck-tally__l { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin-top: 4px; }

/* --- Barre d'actions du mode terrain --- */
.ck-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
.ck-toolbar .btn { flex: 1 1 auto; min-height: 46px; }

@media (min-width: 768px) {
    .ck-toolbar .btn { flex: 0 0 auto; }
}

/* ==========================================================================
   3. IMPRESSION / PDF
   ========================================================================== */

@media print {
    @page { size: A4 portrait; margin: 10mm; }

    body * { visibility: hidden; }
    #printableArea, #printableArea * { visibility: visible; }

    #printableArea {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        box-shadow: none !important;
        border: 0 !important;
    }

    body { background: #fff !important; }
    .no-print { display: none !important; }
    .page-break-inside-avoid { page-break-inside: avoid; }

    /* Une section repliée à l'écran doit quand même s'imprimer. */
    .ck-section__body[hidden] { display: flex !important; }
    .ck-section { break-inside: auto; border-color: #cbd5e1; }
    .ck-section__head { background: #1e293b !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ck-section__chevron { display: none !important; }

    .ck-pt { break-inside: avoid; page-break-inside: avoid; padding: 6px 8px; }
    .ck-pt__label { font-size: .82rem; }
    .ck-pt__ref { display: block !important; font-size: .68rem; padding: 3px 6px; margin-top: 3px; background: #f1f5f9 !important; color: #475569 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .ck-pt__info { display: none !important; }

    .ck-pt__choices { grid-template-columns: repeat(3, 58px); justify-content: end; margin-top: 4px; gap: 4px; }
    .ck-choice { min-height: 22px; font-size: .64rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Les champs de saisie sont remplacés par leur miroir texte. */
    .ck-just-fields, .ck-just-toggle, .ck-date-input, .ck-zone-input { display: none !important; }
    .ck-print-only { display: block !important; }
    .ck-pt__just { display: block !important; }

    .ck-progress, .ck-toolbar, .ck-actionbar { display: none !important; }
}

/* Impression d'une grille vierge : on neutralise les réponses saisies sans
   toucher à l'état enregistré (le rapport rempli reste exportable juste après). */
@media print {
    .ck-print-blank .ck-choice.is-on { background: #fff !important; border-color: #cbd5e1 !important; color: #64748b !important; }
    .ck-print-blank .ck-pt { background: #fff !important; border-color: #e2e8f0 !important; opacity: 1 !important; }
    .ck-print-blank .ck-pt__nc, .ck-print-blank .ck-synthese, .ck-print-blank .ck-tally { display: none !important; }
}

/* Export PDF (html2canvas peint le DOM à l'écran, pas la feuille d'impression) :
   on reproduit à l'écran, le temps de la capture, ce que fait @media print. */
.ck-pdf-export .ck-just-fields,
.ck-pdf-export .ck-just-toggle,
.ck-pdf-export .ck-date-input,
.ck-pdf-export .ck-zone-input,
.ck-pdf-export .ck-pt__info,
.ck-pdf-export .ck-progress,
.ck-pdf-export .ck-toolbar,
.ck-pdf-export .ck-actionbar,
.ck-pdf-export .no-print { display: none !important; }

.ck-pdf-export .ck-print-only { display: block !important; }
.ck-pdf-export .ck-pt__just { display: block !important; }
.ck-pdf-export .ck-pt__ref { display: block !important; }
.ck-pdf-export .ck-section__chevron { display: none !important; }

/* Bootstrap 5.1 n'expose pas d'utilitaire min-width:0 ; sans lui, un titre long
   déborde de sa carte flex au lieu de passer à la ligne. */
.min-w-0 { min-width: 0; }

/* ==========================================================================
   4. TRAÇABILITÉ & PARTAGE
   ========================================================================== */

/* Indicateur de justifications manquantes, sous la barre de progression. */
.ck-progress__trace {
    margin-top: 6px;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.3;
    color: #b45309;
}

.ck-trace-report { font-size: .8rem; font-weight: 700; color: #475569; margin: 0; }
.ck-trace-report.is-warn { color: #b45309; }

/* Regroupement de la synthèse par zone : on traite un secteur, pas une liste
   à plat de constats dispersés dans tout le site. */
.ck-synthese__zone {
    margin: 10px 0 4px;
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #b91c1c;
}

.ck-synthese__zone-n {
    display: inline-block;
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 99px;
    background: #fee2e2;
    text-align: center;
}

/* --- Panneau de partage --- */
.ck-share {
    border: 2px solid #a7f3d0;
    border-radius: 12px;
    background: #f0fdf4;
    padding: 14px;
    margin-bottom: 16px;
}

.ck-share__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ck-share__head h2 { flex: 1; min-width: 0; }

.ck-share__close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: rgba(5, 150, 105, .12);
    color: #047857;
    cursor: pointer;
}

.ck-share__grid { display: grid; grid-template-columns: 1fr; gap: 8px; }

@media (min-width: 576px) {
    .ck-share__grid { grid-template-columns: 1fr 1fr; }
}

.ck-share__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 56px;
    padding: 10px 12px;
    text-align: left;
    background: #fff;
    border: 1.5px solid #d1fae5;
    border-radius: 10px;
    cursor: pointer;
}

.ck-share__btn:hover { border-color: #059669; background: #ecfdf5; }
.ck-share__btn:focus-visible { outline: 3px solid rgba(5, 150, 105, .35); outline-offset: 1px; }
.ck-share__btn i { flex-shrink: 0; width: 22px; text-align: center; color: #059669; }
.ck-share__btn span { display: flex; flex-direction: column; min-width: 0; }
.ck-share__btn strong { font-size: .82rem; color: #1e293b; }
.ck-share__btn em { font-size: .7rem; font-style: normal; color: #64748b; line-height: 1.25; }

.ck-share__warn { margin-top: 12px; font-size: .72rem; line-height: 1.4; color: #b45309; }
.ck-share__status { margin-top: 8px; font-size: .76rem; font-weight: 700; }