/* ==========================================================================
   site.css — voyage-affaire.com (PLAYBOOK PÉPITE v4)
   Tokens 9 variables format canaux (PROP-11) + composants (PROP-12)
   + app-feel (PROP-01) + sheet (PROP-01). Pile typo SYSTÈME (univers outil).
   Aucune couleur en dur dans les composants : tout passe par les tokens.
   ========================================================================== */

/* ----- 1. TOKENS (9 variables, canaux RGB) -------------------------------- */
:root {
    --fond-1:   255 255 255;
    --fond-2:   247 249 252;
    --fond-3:   236 241 247;
    --texte-1:  15 23 42;
    --texte-2:  71 85 105;
    --texte-3:  148 163 184;
    --bordure:  226 232 240;
    --brand:    16 58 110;    /* bleu nuit institutionnel */
    --brand-2:  217 119 6;    /* ambre */
}
.dark {
    /* OLED : noir pur + élévations, jamais un gris bleuté */
    --fond-1:   0 0 0;
    --fond-2:   15 15 15;
    --fond-3:   25 25 25;
    --texte-1:  243 246 250;
    --texte-2:  166 176 190;
    --texte-3:  108 118 132;
    --bordure:  38 38 38;
    --brand:    96 148 214;
    --brand-2:  245 158 11;
}

/* ----- 2. BASE (pile système, hiérarchie par la graisse) ------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: rgb(var(--texte-1));
    background: rgb(var(--fond-1));
}
h1, h2, h3 { line-height: 1.25; color: rgb(var(--texte-1)); }
h1 { font-size: clamp(1.7rem, 4.5vw, 2.5rem); font-weight: 800; margin: 0 0 .5em; }
h2 { font-size: clamp(1.3rem, 3vw, 1.7rem);  font-weight: 700; margin: 1.6em 0 .5em; }
h3 { font-size: 1.1rem; font-weight: 700; margin: 1.2em 0 .4em; }
p  { margin: 0 0 1em; color: rgb(var(--texte-2)); }
a  { color: rgb(var(--brand)); }
img { max-width: 100%; height: auto; display: block; border-radius: 12px; }
small { color: rgb(var(--texte-3)); }

/* ----- 3. SIGNATURE MAISON : le « soulignement barème » (PROP-12) ---------
   Double filet dégradé bleu → ambre. 3 emplacements MAX :
   CTA calculateur, carte vedette, badge « Barème vérifié le [date] ». */
.filet-bareme {
    position: relative;
    padding-bottom: 7px;
}
.filet-bareme::after {
    content: "";
    position: absolute;
    left: 0; bottom: 0;
    width: 100%; height: 5px;
    background:
        linear-gradient(90deg, rgb(var(--brand)), rgb(var(--brand-2))) 0 0 / 100% 2px no-repeat,
        linear-gradient(90deg, rgb(var(--brand) / .35), rgb(var(--brand-2) / .35)) 0 100% / 100% 2px no-repeat;
}

/* ----- 4. PRIMITIVES : .btn / .card / .badge (PROP-12) -------------------- */
/* Boutons : arrondi 8 px, 4 variantes, 3 tailles */
.btn {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: 8px;
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    background: rgb(var(--brand));
    color: rgb(var(--fond-1));
}
.btn--secondaire {
    background: rgb(var(--fond-3));
    color: rgb(var(--texte-1));
}
.btn--fantome {
    background: transparent;
    color: rgb(var(--texte-1));
    border-color: rgb(var(--bordure));
}
.btn--ambre {
    background: rgb(var(--brand-2));
    color: rgb(var(--fond-1));
}
.btn--petit { padding: 6px 12px; font-size: .875rem; }
.btn--grand { padding: 14px 28px; font-size: 1.06rem; }
.btn--bloc  { display: block; width: 100%; }

/* Cartes : arrondi 12 px, variante hover */
.card {
    background: rgb(var(--fond-2));
    border: 1px solid rgb(var(--bordure));
    border-radius: 12px;
    padding: 20px;
}
.card--hover { transition: transform .25s ease, box-shadow .25s ease; }
.card--hover:hover {
    transform: scale(1.02);
    box-shadow: 0 10px 30px rgb(var(--texte-1) / .12);
}
.card h3 { margin-top: 0; }
a.card { text-decoration: none; color: inherit; display: block; }

/* Badges : recette alpha — fond 20 %, texte plein, bordure 30 % */
.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 600;
    background: rgb(var(--brand) / .2);
    color: rgb(var(--brand));
    border: 1px solid rgb(var(--brand) / .3);
}
.badge--ambre {
    background: rgb(var(--brand-2) / .2);
    color: rgb(var(--brand-2));
    border-color: rgb(var(--brand-2) / .3);
}

/* ----- 5. STRUCTURE : entête, héros, sections, pied ----------------------- */
.entete {
    position: sticky;
    top: 0;
    z-index: 800;
    background: rgb(var(--fond-1) / .88);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgb(var(--bordure));
}
.entete__int {
    max-width: 1080px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 16px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.logo__texte {
    font-weight: 800;
    font-size: 1.05rem;
    color: rgb(var(--texte-1));
    line-height: 1.15;
}
.logo__texte small { display: block; font-size: .68rem; font-weight: 500; }
/* Nav haute : flex, JAMAIS de puces */
.nav-haute { margin-left: auto; }
.nav-haute ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 4px;
}
.nav-haute a {
    display: block;
    padding: 8px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: .95rem;
    color: rgb(var(--texte-2));
}
.nav-haute a:hover { background: rgb(var(--fond-3)); color: rgb(var(--texte-1)); }
.nav-haute a[aria-current="page"] { color: rgb(var(--brand)); background: rgb(var(--brand) / .1); }
.entete__menu { margin-left: auto; display: none; }
@media (max-width: 768px) {
    .nav-haute { display: none; }
    .entete__menu { display: inline-block; }
    .logo__texte small { display: none; }
}

/* Héros : photo sous voile dégradé, surtitre = seul élément coloré */
.heros {
    position: relative;
    overflow: hidden;
    background: rgb(var(--brand));
    color: #fff;
}
.heros__img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .32;
    border-radius: 0;
}
.heros__voile {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.30));
}
.heros__int {
    position: relative;
    max-width: 1080px;
    margin: 0 auto;
    padding: 64px 16px 56px;
}
.heros__surtitre {
    color: rgb(245 158 11);
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin: 0 0 10px;
}
.heros h1 { color: #fff; max-width: 22ch; }
.heros__sous { color: rgba(255,255,255,.88); max-width: 58ch; font-size: 1.08rem; }
.heros__sous--mobile { display: none; }
@media (max-width: 600px) {
    .heros__sous--desktop { display: none; }
    .heros__sous--mobile  { display: block; }
    .heros__int { padding: 44px 16px 40px; }
}
.heros__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

/* Sections */
.section { max-width: 1080px; margin: 0 auto; padding: 40px 16px; }
.section--etroite { max-width: 760px; }
/* La section « rupture » : fond inverse, UNE par page */
.section-rupture { background: rgb(var(--texte-1)); }
.dark .section-rupture { background: rgb(var(--fond-2)); }
.section-rupture .section { padding: 48px 16px; }
.section-rupture h2, .section-rupture p { color: rgb(var(--fond-1)); }
.dark .section-rupture h2, .dark .section-rupture p { color: rgb(var(--texte-1)); }
.grille { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Fil d'Ariane */
.fil { font-size: .85rem; margin: 18px 0 0; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.fil li + li::before { content: "›"; margin: 0 6px 0 2px; color: rgb(var(--texte-3)); }
.fil a { color: rgb(var(--texte-2)); text-decoration: none; }
.fil [aria-current="page"] { color: rgb(var(--texte-3)); }

/* ----- 6. TABLEAUX DE BARÈMES (tabular-nums) ------------------------------ */
.tableau-enveloppe { overflow-x: auto; }
table.bareme {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
    font-size: .95rem;
    background: rgb(var(--fond-2));
    border: 1px solid rgb(var(--bordure));
    border-radius: 12px;
    overflow: hidden;
}
table.bareme caption {
    text-align: left;
    font-weight: 700;
    padding: 10px 4px;
    color: rgb(var(--texte-1));
}
table.bareme th, table.bareme td {
    padding: 10px 14px;
    border-bottom: 1px solid rgb(var(--bordure));
    text-align: left;
}
table.bareme th {
    background: rgb(var(--brand) / .08);
    color: rgb(var(--texte-1));
    font-weight: 700;
}
table.bareme tr:last-child td { border-bottom: none; }
table.bareme td:not(:first-child) { white-space: nowrap; }

/* Résultat du simulateur */
.resultat {
    background: rgb(var(--brand) / .07);
    border: 1px solid rgb(var(--brand) / .25);
    border-radius: 12px;
    padding: 22px;
    margin: 20px 0;
}
.resultat__montant {
    font-size: clamp(2rem, 6vw, 2.8rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: rgb(var(--brand));
    margin: 4px 0 8px;
}

/* Formulaires */
.champ { margin-bottom: 16px; }
.champ label { display: block; font-weight: 600; margin-bottom: 5px; font-size: .95rem; }
.champ input, .champ select, .champ textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgb(var(--bordure));
    border-radius: 8px;
    font: inherit;
    background: rgb(var(--fond-1));
    color: rgb(var(--texte-1));
}
.champ--ligne { display: flex; align-items: center; gap: 8px; }
.champ--ligne input { width: auto; }
.champ--ligne label { margin: 0; }

/* ----- 7. PIED DE PAGE ---------------------------------------------------- */
.pied {
    margin-top: 48px;
    border-top: 1px solid rgb(var(--bordure));
    background: rgb(var(--fond-2));
    font-size: .93rem;
}
.pied__int {
    max-width: 1080px;
    margin: 0 auto;
    padding: 36px 16px 12px;
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.pied__titre { font-weight: 700; color: rgb(var(--texte-1)); margin-bottom: 8px; }
.pied__liens { list-style: none; margin: 0; padding: 0; }
.pied__liens li { margin-bottom: 6px; }
.pied__liens a { color: rgb(var(--texte-2)); text-decoration: none; }
.pied__liens a:hover { color: rgb(var(--brand)); }
.pied__legal {
    max-width: 1080px;
    margin: 0 auto;
    padding: 14px 16px 22px;
    color: rgb(var(--texte-3));
}
.pied__legal a { color: rgb(var(--texte-3)); }

/* Bottom sheet : liens du menu */
.sheet-titre { margin: 0 0 12px; font-size: 1.15rem; }
.sheet-liens { list-style: none; margin: 0 0 16px; padding: 0; }
.sheet-liens a {
    display: block;
    padding: 12px 4px;
    border-bottom: 1px solid rgb(var(--bordure));
    text-decoration: none;
    font-weight: 600;
    color: rgb(var(--texte-1));
}

/* ==========================================================================
   8. APP-FEEL — reset tactile (sb-kit, PROP-01)
   ========================================================================== */
* { -webkit-tap-highlight-color: transparent; }
a, button, input, select, textarea, label, summary, [role="button"] {
    touch-action: manipulation;
}
a:active, button:active, [role="button"]:active, summary:active {
    transform: scale(.98);
}
:focus:not(:focus-visible) { outline: none; }
:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
    border-radius: 4px;
}
@media (max-width: 768px) {
    body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
.sb-scroll { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }

/* ==========================================================================
   9. SHEET — panneau qui glisse du bas (sb-kit, PROP-01), thèmé tokens
   ========================================================================== */
.sb-sheet {
    position: fixed;
    inset: 0;
    z-index: 1000;
    visibility: hidden;
    transition: visibility 0s .35s;
}
.sb-sheet.est-ouvert { visibility: visible; transition-delay: 0s; }
.sb-sheet__fond {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    transition: opacity .3s ease;
}
.sb-sheet.est-ouvert .sb-sheet__fond { opacity: 1; }
.sb-sheet__panneau {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    max-height: 85vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: rgb(var(--fond-1));
    color: rgb(var(--texte-1));
    border-radius: 24px 24px 0 0;
    padding: 8px 20px calc(20px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .2);
    transform: translateY(100%);
    transition: transform .3s cubic-bezier(.32, .72, 0, 1);
}
.sb-sheet.est-ouvert .sb-sheet__panneau { transform: translateY(0); }
.sb-sheet__poignee {
    width: 40px;
    height: 4px;
    margin: 6px auto 14px;
    border-radius: 999px;
    background: rgb(var(--texte-3) / .5);
}
@media (min-width: 769px) {
    .sb-sheet__panneau {
        left: 50%;
        right: auto;
        width: 480px;
        transform: translate(-50%, 100%);
    }
    .sb-sheet.est-ouvert .sb-sheet__panneau { transform: translate(-50%, 0); }
}
body.sb-sheet-ouverte { overflow: hidden; }

/* ==========================================================================
   10. HOME v2 — sommaire, carte premium (padding 1 px, PROP-12), signature
   ========================================================================== */
.sommaire__titre {
    margin: 0 0 8px;
    font-weight: 700;
    color: rgb(var(--texte-2));
}
.sommaire ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.sommaire a {
    text-decoration: none;
    border-bottom: 2px solid rgb(var(--brand-2) / .45);
}
.sommaire a:hover { border-bottom-color: rgb(var(--brand-2)); }

/* Carte premium « padding 1 px » : bordure dégradée, réservée au monétisé */
.card--premium {
    padding: 1px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgb(var(--brand)), rgb(var(--brand-2)));
}
.card--premium__int {
    background: rgb(var(--fond-1));
    color: rgb(var(--texte-1));
    border-radius: 11px;
    padding: 20px;
}

/* Signature éditoriale : monogramme (jamais de photo réaliste, PROP-15/16) */
.signature {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px 0;
    border-top: 1px solid rgb(var(--bordure));
    border-bottom: 1px solid rgb(var(--bordure));
    margin-bottom: 20px;
}
.signature__mono {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgb(var(--brand));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.signature__nom { margin: 0 0 4px; font-weight: 700; }
.signature__bio { margin: 0 0 6px; color: rgb(var(--texte-2)); }
.signature__maj { margin: 0; font-size: .85rem; color: rgb(var(--texte-3)); }