/* =====================================================================================================================
   Page d'accueil publique ROPPER. Mêmes jetons que le panel (app.css) ; titres en Barlow Condensed, la police des
   interfaces en jeu, pour que le site ressemble à la base. Pas de halo, de dégradé, de pastille ni de photo :
   des filets, une grille et du texte.
   ===================================================================================================================== */
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/polices/barlow-condensed-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 600; font-display: swap; src: url(/polices/barlow-condensed-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/polices/barlow-condensed-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Barlow Condensed'; font-style: normal; font-weight: 700; font-display: swap; src: url(/polices/barlow-condensed-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF; }

/* or de la planète du logo : traits et chiffres ; --or-texte reste lisible sur fond clair */
:root { --or: #d6c08a; --or-vif: #e6d29c; --or-texte: #85661f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { --or-texte: #d6c08a; } }
:root[data-theme="sombre"] { --or-texte: #d6c08a; }
.vitrine { --titre: 'Barlow Condensed', 'Arial Narrow', var(--police); }
.vitrine .marque-logo { height: 24px; }
html { scroll-behavior: smooth; }
body.vitrine { background: var(--fond); color: var(--texte); font-size: 16px; line-height: 1.6; }
.vitrine main:focus { outline: 0; }
.vitrine [id] { scroll-margin-top: 80px; }
.v-conteneur { width: min(1180px, calc(100% - 32px)); margin-inline: auto; }
.vitrine h1, .vitrine h2, .vitrine h3 { text-wrap: balance; }
.vitrine p { text-wrap: pretty; }
.v-titre { font-family: var(--titre); font-weight: 700; text-transform: uppercase; letter-spacing: .005em; line-height: .98; }
.v-etiquette { margin: 0 0 14px; color: var(--texte-3); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.v-etiquette::before { content: ""; display: block; width: 28px; height: 2px; margin-bottom: 12px; background: var(--or); }
.v-sombre .v-etiquette { color: var(--cadre-texte-3); }

/* ---------- Boutons ---------- */
.v-bouton-grand { min-height: 48px; padding: 0 20px; border-radius: var(--rayon); font-size: 15px; font-weight: 600; }
.v-bouton-or { background: var(--or); border-color: var(--or); color: #111113; box-shadow: none; }
.v-bouton-or:hover:not(:disabled) { background: var(--or-vif); border-color: var(--or-vif); color: #111113; }
.v-bouton-or:focus-visible { outline: 2px solid var(--or-vif); outline-offset: 3px; }
.v-bouton-sombre { background: var(--cadre-2); border-color: var(--cadre-bordure); color: var(--cadre-texte); box-shadow: none; }
.v-bouton-sombre:hover:not(:disabled) { background: var(--cadre-bordure); color: var(--cadre-texte); }
.v-bouton-contour { background: transparent; border-color: var(--cadre-bordure); color: var(--cadre-texte); box-shadow: none; }
.v-bouton-contour:hover:not(:disabled) { background: var(--cadre-2); color: var(--cadre-texte); }
.bouton[aria-disabled="true"] { opacity: .55; cursor: not-allowed; filter: none; }
.v-court { display: none; }
.v-lien { color: var(--texte); font-weight: 600; text-decoration: underline; text-decoration-color: var(--bordure-forte); text-underline-offset: 4px; }
.v-lien:hover { text-decoration-color: currentColor; }

/* ---------- En-tête ---------- */
.v-entete { position: sticky; top: 0; z-index: 50; background: var(--cadre); border-bottom: 1px solid var(--cadre-bordure); }
.v-entete-ligne { display: flex; align-items: center; gap: 24px; min-height: 64px; }
.v-entete .marque { padding: 0; }
.v-nav { display: flex; gap: 2px; margin-left: 8px; }
.v-nav a { padding: 8px 12px; border-radius: var(--rayon); color: var(--cadre-texte-2); font-size: 14.5px; font-weight: 500; text-decoration: none; transition: color .15s, background .15s; }
.v-nav a:hover { color: var(--cadre-texte); background: var(--cadre-2); }
.v-actions { display: flex; gap: 8px; margin-left: auto; }

/* ---------- Accroche ---------- */
.v-sombre { background: var(--cadre); color: var(--cadre-texte); }
.v-hero { padding: 88px 0 96px; background: var(--cadre); }
.v-hero-texte { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px 64px; align-items: end; }
.v-hero h1 { font-size: clamp(46px, 7.4vw, 96px); }
.v-hero h1 span { color: var(--or); }
.v-chapo { margin: 0; color: var(--cadre-texte-2); font-size: clamp(16px, 1.5vw, 18px); }
.v-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.v-bonjour { margin: 18px 0 0; color: var(--cadre-texte-3); font-size: 14px; }
.v-bonjour strong { color: var(--cadre-texte-2); font-weight: 600; }
.v-bonjour a { color: var(--cadre-texte); }

/* fiche technique sous l'accroche */
.v-fiche { margin-top: 8px; border-bottom: 1px solid var(--bordure); background: var(--fond); }.v-fiche dl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin: 0; }
.v-fiche div { padding: 22px 20px 22px 0; }
.v-fiche div + div { padding-left: 20px; border-left: 1px solid var(--bordure); }
.v-fiche dt { color: var(--texte-3); font-size: 12.5px; }
.v-fiche dd { margin: 2px 0 0; font-family: var(--titre); font-size: 24px; font-weight: 600; line-height: 1.15; text-transform: uppercase; }

/* ---------- Sections ---------- */
.v-section { padding: 96px 0; }
.v-section + .v-section { border-top: 1px solid var(--bordure); }
.v-section-grise { background: var(--surface-2); }
.v-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 64px; align-items: end; margin-bottom: 56px; }
.v-tete h2, .v-final h2 { font-size: clamp(36px, 5vw, 60px); }
.v-tete > p { margin: 0; color: var(--texte-3); font-size: 17px; }

/* La base : rubriques en lignes, avec filets */
.v-rubriques { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--texte); counter-reset: rubrique; }
.v-rubrique { counter-increment: rubrique; }
.v-rubrique h3::before { content: counter(rubrique, decimal-leading-zero); display: block; margin-bottom: 6px; color: var(--or-texte); font-size: 15px; letter-spacing: .06em; }
.v-rubrique { display: grid; grid-template-columns: 220px minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px 40px; padding: 28px 0; border-bottom: 1px solid var(--bordure); }
.v-rubrique h3 { font-family: var(--titre); font-size: 26px; font-weight: 700; line-height: 1.05; text-transform: uppercase; }
.v-rubrique > p { margin: 0; color: var(--texte-2); }
.v-puces { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; align-content: start; }
.v-puces li { padding: 3px 10px; border: 1px solid var(--bordure-forte); border-radius: 6px; color: var(--texte-2); font-size: 13.5px; white-space: nowrap; }

.v-touches { margin: 0; border-top: 1px solid var(--texte); }
.v-touches div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid var(--bordure); }
.v-touches dt { display: flex; }
.v-touches kbd { min-width: 34px; padding: 2px 8px; border: 1px solid var(--bordure-forte); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); color: var(--texte); font-family: var(--police-mono); font-size: 12.5px; font-weight: 600; text-align: center; }
.v-touches dd { margin: 0; color: var(--texte-2); font-size: 15px; }
.v-touches dd strong { color: var(--texte); font-weight: 600; }

/* En jeu : les touches en deux colonnes */
.v-touches { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
/* Le panel en quatre chiffres */
.v-cles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; border-block: 1px solid var(--texte); }
.v-cles div { padding: 28px 24px 30px 0; }
.v-cles div + div { padding-left: 24px; border-left: 1px solid var(--bordure); }
.v-cles dt { color: var(--or-texte); font-family: var(--titre); font-size: clamp(44px, 5vw, 64px); font-weight: 700; line-height: 1; }
.v-cles dd { margin: 10px 0 0; color: var(--texte-2); font-size: 15px; }

/* Chaque page du panel : un groupe par ligne, ses pages en deux colonnes */
.v-pages { margin-top: 88px; }
.v-pages-tete { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; margin-bottom: 28px; }
.v-pages-tete h3 { font-size: clamp(30px, 3.6vw, 44px); }
.v-pages-tete p { margin: 0; color: var(--texte-3); }
.v-groupe { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 12px 40px; padding: 26px 0; border-top: 1px solid var(--bordure); }
.v-groupe:first-of-type { border-top-color: var(--texte); }
.v-groupe h4 { align-self: start; margin: 0; font-family: var(--titre); font-size: 22px; font-weight: 700; text-transform: uppercase; }
.v-groupe h4::before { content: ""; display: inline-block; width: 14px; height: 2px; margin: 0 10px 0 0; vertical-align: middle; background: var(--or); }
.v-groupe dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 40px; margin: 0; }
.v-groupe dt { font-weight: 600; }
.v-groupe dd { margin: 3px 0 0; color: var(--texte-3); font-size: 15px; }

/* Équipe et sécurité */
.v-securite { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 64px; border: 1px solid var(--bordure); border-radius: var(--rayon-carte); background: var(--surface); }
.v-securite div { padding: 26px 26px 28px; }
.v-securite div + div { border-left: 1px solid var(--bordure); }
.v-securite h3 { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.v-securite h3 .icone { color: var(--accent-texte); }
.v-securite p { margin: 8px 0 0; color: var(--texte-3); font-size: 15px; }
.v-roles { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; list-style: none; }
.v-roles li { padding: 2px 9px; border-radius: 5px; background: var(--survol); color: var(--texte-2); font-size: 13px; }

/* ---------- Commander ---------- */
.v-commande { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.v-commande h2 { font-size: clamp(36px, 5vw, 60px); }
.v-commande-texte > p { margin: 18px 0 0; color: var(--texte-2); font-size: 17px; }
.v-parcours { margin: 28px 0 0; padding: 0; list-style: none; counter-reset: etape; }
.v-parcours li { position: relative; padding: 12px 0 12px 44px; border-top: 1px solid var(--bordure); color: var(--texte-2); counter-increment: etape; }
.v-parcours li::before { content: "0" counter(etape); position: absolute; left: 0; top: 11px; color: var(--texte-3); font-family: var(--titre); font-size: 20px; font-weight: 700; }
.v-parcours strong { color: var(--texte); font-weight: 600; }
.v-faq { border-top: 1px solid var(--texte); }
.v-faq details { border-bottom: 1px solid var(--bordure); }
.v-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 14px 0; font-size: 16.5px; font-weight: 600; cursor: pointer; list-style: none; }
.v-faq summary::-webkit-details-marker { display: none; }
.v-faq summary::after { content: "+"; flex: none; width: 28px; color: var(--texte-3); font-size: 22px; font-weight: 400; text-align: center; transition: transform .2s ease-out; }
.v-faq details[open] summary::after { transform: rotate(45deg); }
.v-faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.v-faq details p { margin: 0 0 18px; max-width: 62ch; color: var(--texte-2); }

/* Appel final */
.v-final { padding: 80px 0; }
.v-final-ligne { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 24px 48px; }
.v-final p { margin: 14px 0 0; color: var(--cadre-texte-2); font-size: 17px; }
.v-final .v-cta { margin-top: 0; }

/* ---------- Pied de page ---------- */
.v-pied { padding: 32px 0 40px; background: var(--cadre); border-top: 1px solid var(--cadre-bordure); color: var(--cadre-texte-3); font-size: 14px; }
.v-pied-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.v-pied-ligne p { margin: 0; }
.v-pied-marque { display: inline-flex; align-items: center; gap: 14px; }
.vitrine .v-pied-marque .marque-logo { height: 18px; }
.v-pied-securite { display: inline-flex; align-items: center; gap: 8px; }
.v-pied-liens { display: flex; gap: 20px; margin-left: auto; }
.v-pied-liens a { color: var(--cadre-texte-2); text-decoration: none; }
.v-pied-liens a:hover { color: var(--cadre-texte); text-decoration: underline; }
.v-mention { margin-top: 18px; margin-bottom: 0; font-size: 12.5px; }

/* ---------- Adaptation ---------- */
@media (max-width: 1080px) {
    .v-fiche dl { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .v-fiche div:nth-child(4) { padding-left: 0; border-left: 0; }
    .v-fiche div:nth-child(n+4) { border-top: 1px solid var(--bordure); }
    .v-rubrique { grid-template-columns: 180px minmax(0, 1fr); }
    .v-rubrique .v-puces { grid-column: 2; }
    .v-groupe { grid-template-columns: 160px minmax(0, 1fr); }
}
@media (max-width: 860px) {
    .v-touches { grid-template-columns: minmax(0, 1fr); }
    .v-cles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v-cles div:nth-child(3) { padding-left: 0; border-left: 0; }
    .v-cles div:nth-child(n+3) { border-top: 1px solid var(--bordure); }
    .v-nav { display: none; }
    .v-hero { padding: 56px 0 64px; }
    .v-hero-texte, .v-tete, .v-commande, .v-pages-tete { grid-template-columns: minmax(0, 1fr); }
    .v-section { padding: 72px 0; }
    .v-tete { margin-bottom: 40px; }
    .v-securite { grid-template-columns: minmax(0, 1fr); }
    .v-securite div + div { border-left: 0; border-top: 1px solid var(--bordure); }
    .v-commande { gap: 40px; }
}
@media (max-width: 600px) {
    .v-fiche dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .v-fiche div, .v-fiche div + div { padding: 16px 12px 16px 0; border-left: 0; }
    .v-fiche div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--bordure); }
    .v-fiche div:nth-child(n+3) { border-top: 1px solid var(--bordure); }
    .v-fiche dd { font-size: 21px; }
    .v-rubrique { grid-template-columns: minmax(0, 1fr); padding: 22px 0; }
    .v-rubrique .v-puces { grid-column: 1; }
    .v-pages { margin-top: 64px; }
    .v-groupe { grid-template-columns: minmax(0, 1fr); }
    .v-groupe dl { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .vitrine .marque-logo { height: 20px; }
    .v-pied-liens { margin-left: 0; }
}
@media (max-width: 480px) {
    .v-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .v-court { display: inline; }
    .v-cta .bouton { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .vitrine *, .vitrine *::before, .vitrine *::after { transition: none !important; animation: none !important; }
}