/* ============================================================
   NOVOID PLUS — CHARTE GRAPHIQUE COMMUNE
   ------------------------------------------------------------
   Source unique des tokens et composants partages du site.
   Charge dans template_top.php AVANT novoid.css.

   Doctrine :
   - Police : systeme sans-serif partout (imposee par la regle
     globale !important de template_top). Aucun serif.
   - Couleurs : noir/blanc, un seul rouge, un seul vert.
   - Radius : 0 partout, SAUF pilules signature (--nv-pilule) :
     bouton FILTRES, selects fiche produit, badges ronds.
   - Breakpoints de reference : 480 / 767-768 / 991-992 / 1200
     (mobile ≤767, tablette 768-991, desktop ≥992).
   ============================================================ */

:root {
    /* Couleurs de base */
    --nv-noir: #000;
    --nv-blanc: #fff;
    --nv-texte: #111;          /* texte courant */
    --nv-texte-2: #666;        /* texte secondaire */
    /* 2026-07-26 : #999 donnait un contraste de 2,85:1 sur blanc, sous le
       minimum WCAG de 4,5:1. Comme cette variable porte du TEXTE (notes,
       placeholders, references produit, mentions atténuées), chaque element
       qui l'utilisait echouait a l'audit de contraste. #6e6e6e monte a 5,0:1
       en restant un gris nettement attenue. Corrige la famille entiere d'un
       coup plutot qu'element par element. */
    --nv-muted: #6e6e6e;       /* texte attenue, placeholders, notes */
    --nv-bordure: #e0e0e0;     /* bordures de blocs, separateurs */
    --nv-bordure-input: #ddd;  /* bordures des champs de formulaire */
    --nv-fond: #fff;
    --nv-fond-2: #f7f7f7;      /* fonds de zones (encarts, formulaires) */

    /* Etats */
    --nv-erreur: #ef4444;
    --nv-erreur-fond: #fef2f2;
    --nv-succes: #2e7d32;
    --nv-succes-fond: #e6f4ea;

    /* Geometrie & mouvement */
    --nv-radius: 0;
    --nv-pilule: 50px;
    --nv-transition: .25s ease;
}

/* ================== TITRES ================== */

/* .nv-h1 : reproduit le rendu du h1 des pages categories/marques
   (.page-header h1) — LA reference typographique du site.
   Sans-serif systeme herite, 700, uppercase, centre,
   letter-spacing 1.5px (comme l'heritage du body bootstrap). */
.nv-h1 {
    font-size: 24px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    text-align: center;
    color: var(--nv-noir);
    margin: 0 0 10px;
    line-height: 1.2;
}
@media (max-width: 556px) {
    .nv-h1 { font-size: 20px; }
}

/* Titre de section (blocs internes d'une page) */
.nv-h2-section {
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--nv-noir);
    margin: 0 0 20px;
}

/* Eyebrow : petit surtitre en majuscules espacees */
.nv-eyebrow {
    display: block;
    font-size: 12px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--nv-texte-2);
}

/* ================== BOUTONS ================== */

/* Recette de reference (issue du checkout cs26-submit). */
.nv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: var(--nv-noir);
    color: var(--nv-blanc);
    border: 1px solid var(--nv-noir);
    border-radius: var(--nv-radius);
    cursor: pointer;
    text-decoration: none;
    transition: background-color var(--nv-transition), color var(--nv-transition), border-color var(--nv-transition);
}
.nv-btn:hover,
.nv-btn:focus {
    background: #222;
    border-color: #222;
    color: var(--nv-blanc);
    text-decoration: none;
}
.nv-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.nv-btn--outline {
    background: transparent;
    color: var(--nv-noir);
    border: 1px solid var(--nv-noir);
}
.nv-btn--outline:hover,
.nv-btn--outline:focus {
    background: var(--nv-noir);
    color: var(--nv-blanc);
}

.nv-btn--ghost {
    background: transparent;
    color: var(--nv-noir);
    border: none;
    text-decoration: underline;
    padding: 8px 12px;
}
.nv-btn--ghost:hover { color: var(--nv-texte-2); background: transparent; }

.nv-btn--full { width: 100%; }

/* ================== FORMULAIRES ================== */

.nv-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--nv-texte);
    margin-bottom: 6px;
}

.nv-input,
.nv-select,
.nv-textarea {
    width: 100%;
    box-sizing: border-box;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--nv-bordure-input);
    border-radius: var(--nv-radius);
    font-size: 16px; /* ≥16px : evite le zoom automatique iOS */
    color: var(--nv-texte);
    background: var(--nv-fond);
    -webkit-appearance: none;
    appearance: none;
}
.nv-textarea {
    height: auto;
    min-height: 100px;
    padding: 10px 14px;
    resize: vertical;
}
.nv-input::placeholder,
.nv-textarea::placeholder { color: var(--nv-muted); }
/* Focus : bordure noire — deja assure globalement par template_top,
   redeclare ici pour l'autonomie du composant */
.nv-input:focus,
.nv-select:focus,
.nv-textarea:focus {
    outline: none;
    border-color: var(--nv-noir);
}

.nv-select {
    cursor: pointer;
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4L10 1' stroke='%23666' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.nv-help {
    display: block;
    font-size: 11px;
    color: var(--nv-muted);
    margin-top: 3px;
}

/* ================== MESSAGES ================== */

.nv-msg--erreur {
    background: var(--nv-erreur-fond);
    border-left: 3px solid var(--nv-erreur);
    color: var(--nv-erreur);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}
.nv-msg--succes {
    background: var(--nv-succes-fond);
    border-left: 3px solid var(--nv-succes);
    color: var(--nv-succes);
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    line-height: 1.5;
}