/*
 * VIP RH — feuille des pages publiques (rh.vipgpi.ca).
 * Écrite à la main, SANS build : rien à compiler au déploiement.
 * Charte : marine #0E1030, or #c9a227. Aucune police téléchargée (Loi 25) :
 * pile système, avec un empattement pour les titres.
 */

:root {
    --rh-marine: #0E1030;
    --rh-marine-2: #1a1d4a;
    --rh-or: #c9a227;
    --rh-or-fonce: #9a7a14;  /* texte or sur fond clair : contraste ≥ 4,5:1 */
    --rh-ivoire: #faf8f3;
    --rh-encre: #1a1a1a;
    --rh-encre-2: #555;
    --rh-filet: #e4dfd2;
    --rh-blanc: #fff;
    --rh-erreur: #a4262c;
    --rh-rayon: 6px;
    --rh-titre: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --rh-texte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body.rh {
    margin: 0;
    background: var(--rh-ivoire);
    color: var(--rh-encre);
    font: 16px/1.6 var(--rh-texte);
    -webkit-font-smoothing: antialiased;
}

.rh a { color: var(--rh-or-fonce); }
.rh a:hover { color: var(--rh-marine); }

.rh-cadre { max-width: 880px; margin: 0 auto; padding: 0 16px; }

/* ── En-tête ─────────────────────────────────────────── */
.rh-entete {
    background: var(--rh-marine);
    border-bottom: 3px solid var(--rh-or);
}
.rh-entete__rang {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; min-height: 64px; flex-wrap: wrap;
}
.rh-marque { text-decoration: none; display: inline-flex; align-items: baseline; gap: 2px; }
.rh-marque__vip { color: var(--rh-or); font: 700 22px/1 var(--rh-titre); letter-spacing: .04em; }
.rh-marque__gpi { color: var(--rh-blanc); font: 700 22px/1 var(--rh-titre); letter-spacing: .04em; }
.rh-marque__sous {
    color: #c3c7e0; font-size: 13px; margin-left: 10px; padding-left: 10px;
    border-left: 1px solid rgba(255, 255, 255, .25); text-transform: uppercase; letter-spacing: .08em;
}
.rh .rh-lien-retour { color: #c3c7e0; font-size: 14px; text-decoration: none; }
.rh .rh-lien-retour:hover { color: var(--rh-or); }

/* ── Contenu ─────────────────────────────────────────── */
.rh-contenu { padding-top: 32px; padding-bottom: 56px; }

.rh h1, .rh h2 { font-family: var(--rh-titre); color: var(--rh-marine); letter-spacing: -.01em; }
.rh h1 { font-size: clamp(28px, 5vw, 38px); line-height: 1.15; margin: 4px 0 12px; }
.rh h2 { font-size: 22px; line-height: 1.25; margin: 0 0 8px; }

.rh-surtitre {
    margin: 0; color: var(--rh-or-fonce); font-size: 13px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .1em;
}
.rh-chapeau { font-size: 18px; color: var(--rh-encre-2); margin: 0 0 24px; }
.rh-meta { color: var(--rh-encre-2); font-size: 14px; }
.rh-fil { font-size: 14px; color: var(--rh-encre-2); margin: 0 0 16px; }
.rh-tete { margin-bottom: 28px; }

.rh-pastille {
    display: inline-block; background: var(--rh-marine); color: var(--rh-or);
    font-size: 12px; font-weight: 600; letter-spacing: .04em;
    padding: 3px 10px; border-radius: 999px;
}

/* ── Cartes de poste ─────────────────────────────────── */
.rh-carte {
    background: var(--rh-blanc); border: 1px solid var(--rh-filet);
    border-left: 4px solid var(--rh-or); border-radius: var(--rh-rayon);
    padding: 20px 22px; margin-bottom: 16px;
}
.rh-carte__haut { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; }
.rh-carte__titre { margin: 4px 0 6px; }
.rh .rh-carte__titre a { color: var(--rh-marine); text-decoration: none; }
.rh .rh-carte__titre a:hover { text-decoration: underline; }
.rh-carte p { margin: 0 0 14px; }

.rh-vide {
    background: var(--rh-blanc); border: 1px dashed var(--rh-filet);
    border-radius: var(--rh-rayon); padding: 28px; text-align: center;
}

/* ── Fiche de poste ──────────────────────────────────── */
.rh-poste, .rh-formulaire, .rh-merci {
    background: var(--rh-blanc); border: 1px solid var(--rh-filet);
    border-radius: var(--rh-rayon); padding: clamp(20px, 4vw, 36px);
}
.rh-texte p { margin: 0 0 14px; }
.rh-texte ul { margin: 0 0 14px; padding-left: 22px; }
.rh-texte li { margin-bottom: 4px; }

/* ── Boutons — cibles de 44 px au moins ──────────────── */
.rh-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.rh .rh-bouton {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; padding: 10px 22px; border: 0; border-radius: var(--rh-rayon);
    background: var(--rh-or); color: var(--rh-marine);
    font: 600 16px/1.2 var(--rh-texte); text-decoration: none; cursor: pointer;
    transition: background .15s ease;
}
.rh .rh-bouton:hover, .rh .rh-bouton:focus-visible { background: #d9b437; color: var(--rh-marine); }
.rh .rh-bouton--sobre { background: transparent; color: var(--rh-marine); box-shadow: inset 0 0 0 1px var(--rh-marine); }
.rh .rh-bouton--sobre:hover { background: var(--rh-marine); color: var(--rh-blanc); }
.rh-bouton--large { width: 100%; margin-top: 8px; }
.rh :focus-visible { outline: 3px solid var(--rh-or); outline-offset: 2px; }

/* ── Formulaire ──────────────────────────────────────── */
.rh-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.rh-champ { margin-bottom: 16px; }
.rh-champ label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--rh-marine); }
.rh-facultatif { font-weight: 400; color: var(--rh-encre-2); font-size: 14px; }
.rh-champ input[type=text], .rh-champ input[type=email], .rh-champ input[type=tel], .rh-champ textarea {
    width: 100%; padding: 10px 12px; border: 1px solid #cfc8b6; border-radius: var(--rh-rayon);
    font: 16px/1.4 var(--rh-texte); background: var(--rh-blanc); color: var(--rh-encre);
}   /* 16 px : sous ce seuil, iOS zoome sur le champ */
.rh-champ input:focus, .rh-champ textarea:focus { border-color: var(--rh-or); outline: none; box-shadow: 0 0 0 3px rgba(201, 162, 39, .25); }
.rh-champ input[type=file] { font-size: 15px; max-width: 100%; }

.rh-consentement { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0 16px; font-size: 14px; }
.rh-consentement input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--rh-or); }

.rh-erreurs {
    border: 1px solid var(--rh-erreur); background: #fcf0f0; color: var(--rh-erreur);
    border-radius: var(--rh-rayon); padding: 12px 16px; margin-bottom: 20px;
}
.rh-erreurs p { margin: 0 0 6px; font-weight: 600; }
.rh-erreurs ul { margin: 0; padding-left: 20px; }

/* Le champ piège : hors de l'écran, pas `display:none` (certains robots le lisent). */
.rh-piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Remerciement ────────────────────────────────────── */
.rh-etape-suivante {
    margin-top: 20px; padding: 20px; border-radius: var(--rh-rayon);
    background: var(--rh-marine); color: #e6e8f5;
}
.rh-etape-suivante h2 { color: var(--rh-or); }

/* ── Pied ────────────────────────────────────────────── */
.rh-pied { border-top: 1px solid var(--rh-filet); color: var(--rh-encre-2); font-size: 13px; padding: 20px 0 32px; }
.rh-pied p { margin: 0 0 4px; }

/* ── Téléphone ───────────────────────────────────────── */
@media (max-width: 640px) {
    .rh-grille { grid-template-columns: 1fr; }
    .rh-marque__sous { display: none; }
    .rh-actions .rh-bouton { flex: 1 1 100%; }
}

@media print {
    .rh-entete, .rh-pied, .rh-actions { display: none; }
    body.rh { background: #fff; }
}