/* ===== Tarifs – design V2 (scope .tuition) ===== */
:root{
    --tu-ink:#2b1e17;
    --tu-muted:#5b4942;
    --tu-border:#e6d6c8;
    --tu-paper:#fffaf3;
    --tu-header:#2f363d;
    --tu-brand:#6d0f22;
    --tu-accent:#f1c35a;
    --tu-shadow:0 12px 26px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.04);
}

.tuition{ color:var(--tu-ink); }
.tu-section{ margin-bottom: 3.2rem; }
.tu-title{
    font-weight: 900;
    font-size: clamp(1.45rem, 1rem + 1.6vw, 2.05rem);
    letter-spacing:.2px; margin: .1rem 0 .25rem;
}
.tu-underline{ width:82px;height:5px;border-radius:8px;
    background:linear-gradient(90deg,var(--tu-brand),#8b2a3a); margin:.35rem 0 1.15rem;
}

/* card / table */
.tu-card{
    background:var(--tu-paper);
    border:1px solid var(--tu-border);
    border-radius:18px;
    overflow:hidden;
    box-shadow:var(--tu-shadow);
}

/* Desktop table */
.tu-table{ width:100%; border-collapse:separate; border-spacing:0; }
.tu-table thead th{
    background:var(--tu-header);
    color:#fff; text-align:left; font-weight:800;
    padding:1rem 1rem;
}
.tu-table thead th:first-child{ border-top-left-radius:14px; }
.tu-table thead th:last-child{ border-top-right-radius:14px; text-align:right; }
.tu-table td{ padding:1rem 1rem; vertical-align:middle; }
.tu-table tbody tr + tr td{ border-top:1px solid var(--tu-border); }
.tu-table td:last-child{ text-align:right; font-variant-numeric: tabular-nums; }

/* Hover doux sur desktop */
@media (hover:hover){
    .tu-table tbody tr:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 10px rgba(0,0,0,.08);
        transition: all 0.25s ease;
    }
    .tu-table tr.tu-promo:hover td {
        background: linear-gradient(180deg, #f6d57b, #f1b94f);
    }
}

/* Promo line — plus premium */
.tu-table .tu-promo td{
    background: linear-gradient(180deg, #f6d57b, #f1b94f);
    border-color: transparent !important;
    color:#3b2600;
    font-weight:700;
}
.tu-table .tu-promo td:first-child{ position:relative; }
.tu-table .tu-promo td:first-child::before{
    content:"OFFRE";
    position:absolute; left:10px; top:-10px;
    font-size:.7rem; letter-spacing:.12em;
    background: rgba(150, 100, 0, 0.2); color: #3b2600; padding:.18rem .45rem;
    border-radius:999px;
}
.tu-note{ display:block; font-size:.9rem; color:#3b2a00; margin-top:.15rem; }

/* Légendes et notes */
.tu-lead{ color:var(--tu-muted); font-size:1.05rem; }
.tu-foot{ color:var(--tu-muted); font-size:.95rem; margin:.65rem .25rem 0; }

/* ===== Mobile — chaque TR devient une carte cliquable ===== */
@media (max-width: 768px){

    /* on “démonte” la table classique */
    .tu-table, .tu-table thead, .tu-table tbody, .tu-table tr, .tu-table th, .tu-table td{ display:block; }
    .tu-table thead{ display:none; }

    .tu-table tbody{ padding: .6rem; }
    .tu-table tr{
        position:relative;
        background:#fff;
        border:1px solid var(--tu-border);
        border-radius:16px;
        box-shadow: 0 6px 16px rgba(0,0,0,.06);
        margin: .65rem 0;
        padding: 14px 14px 12px;
    }
    .tu-table tr.tu-promo{
        background: linear-gradient(0deg, rgba(0,0,0,.03), rgba(0,0,0,0)), var(--tu-accent);
        border-color: transparent;
    }

    /* on cache les séparateurs ligne-à-ligne */
    .tu-table tbody tr + tr td{ border-top:0; }

    .tu-table td{
        border:0; padding:0;
    }

    /* 1) Service (première cellule) — gros titre multi-ligne */
    .tu-table td:first-child{
        font-weight:800; line-height:1.4;
        padding-right: 96px; /* laisse la place au badge prix */
        min-height: 40px;
    }

    /* 2) Prix (dernière cellule) — badge flottant en haut à droite */
    .tu-table td:last-child{
        position:absolute; right:12px; top:12px;
        background:#fff; color:var(--tu-ink);
        border:2px solid var(--tu-brand);
        border-radius:999px; padding:.28rem .65rem;
        font-weight:800; box-shadow:0 3px 10px rgba(109,15,34,.12);
    }

    /* petite ligne de séparation décorative (entre titre et note) */
    .tu-table td:first-child .tu-note{ margin-top:.35rem; }
}

/* un peu plus d’air sur très grands écrans */
@media (min-width:1200px){
    .tu-card{ border-radius:20px; }
    .tu-table thead th{ padding:1.05rem 1.15rem; }
    .tu-table td{ padding:1.05rem 1.15rem; }
}

/* --- Ajustement du badge OFFRE sur mobile --- */
@media (max-width: 768px){
    .tu-table tr.tu-promo {
        position: relative;
        overflow: hidden;
    }

    .tu-table tr.tu-promo td:first-child::before {
        content: "OFFRE LIMITÉE";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        background: linear-gradient(90deg, #d4a33d, #b8842a);
        color: #fffaf3;
        font-weight: 800;
        font-size: 0.75rem;
        letter-spacing: 0.08em;
        text-align: center;
        padding: 4px 0 3px;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-shadow: inset 0 -1px 0 rgba(255,255,255,0.2);
    }

    /* On décale le texte principal un peu vers le bas pour ne pas chevaucher le ruban */
    .tu-table tr.tu-promo td:first-child {
        padding-top: 1.8rem;
    }
}

/* ===== Ajustement des textes principaux ===== */

.tuition p {
    color: #3a2a1e; /* plus chaud, plus lisible sur fond beige */
    line-height: 1.65;
    font-size: 1.05rem;
}

.tuition p strong,
.tuition p b {
    color: #6d0f22; /* ton bordeaux de la charte */
    font-weight: 700;
}

p strong {
    color: black !important;
}

.tuition .tu-lead {
    color: #442f22; /* texte principal des paragraphes sous-titres */
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.tuition .tu-foot {
    color: #5a463a;
    font-style: italic;
    font-size: 0.95rem;
}

/* === Mise en valeur douce des titres === */
.tu-title {
    color: #2b1e17;
    text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}

.tu-underline {
    background: linear-gradient(90deg, #6d0f22, #a23a4b);
}

/* === Sur mobile : meilleur contraste général === */
@media (max-width: 768px) {
    .tuition p {
        font-size: 1rem;
        color: #332319;
    }
}

/* ========= HERO – 3 variantes esthétiques ========= */
:root{
    --hero-ink:#2b1e17;
    --hero-muted:#46372c;
    --hero-paper:#fffaf3;
    --hero-border:#ead8c7;
    --hero-brand:#6d0f22;       /* bordeaux actuel */
    --hero-brand2:#8b2a3a;
}

/* base */
.tu-hero{
    max-width: 920px;
    margin: 0 auto 1.5rem;
    line-height: 1.7;
    color: var(--hero-ink);
    font-size: clamp(1rem, .95rem + .3vw, 1.08rem);
}
.tu-hero p{ margin: .55rem 0; }

/* ---------- Variante A : Encadré papier élégant ---------- */
.tu-hero--frame{
    background: var(--hero-paper);
    border: 1px solid var(--hero-border);
    border-radius: 18px;
    box-shadow: 0 12px 26px rgba(0,0,0,.08), 0 3px 8px rgba(0,0,0,.04);
    padding: 18px 18px 16px 22px;
    position: relative;
}
.tu-hero--frame::before{
    /* liseré bordeaux à gauche */
    content:"";
    position:absolute; left:0; top:0; bottom:0; width:6px;
    border-top-left-radius:18px; border-bottom-left-radius:18px;
    background: linear-gradient(180deg, var(--hero-brand), var(--hero-brand2));
}
.tu-hero--frame p{ color: var(--hero-muted); }

/* ---------- Variante B : Bandeau couleur (inversé) ---------- */
.tu-hero--band{
    background: linear-gradient(135deg, #6d0f22, #3d0a18 75%);
    color:#fff; text-align:center;
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 10px 24px rgba(109,15,34,.25);
}
.tu-hero--band p{ color: #fff; opacity:.95; }
.tu-hero--band p:first-child{
    font-weight:700; letter-spacing:.2px;
}

/* ---------- Variante C : Panel “info” souligné ---------- */
.tu-hero--panel{
    background: #f6eee5;
    border: 1px dashed var(--hero-border);
    border-radius: 14px;
    padding: 16px 16px 12px;
    position:relative;
}
.tu-hero--panel::after{
    /* soulignement décalé */
    content:"";
    display:block;
    height:4px; width:80px; margin:.6rem auto 0;
    border-radius:8px;
    background: linear-gradient(90deg, var(--hero-brand), var(--hero-brand2));
}
.tu-hero--panel p{ color:#3a2a1e; }

/* ---------- Petites options de couleur (facultatif) ---------- */
/* Olive */
.tu-hero.is-olive{ --hero-brand:#355b3c; --hero-brand2:#1f3e27; }
.tu-hero.is-olive.tu-hero--band{ background: linear-gradient(135deg,#355b3c,#1f3e27 75%); }
/* Indigo */
.tu-hero.is-indigo{ --hero-brand:#394a8a; --hero-brand2:#222f63; }
.tu-hero.is-indigo.tu-hero--band{ background: linear-gradient(135deg,#394a8a,#222f63 75%); }

/* ---------- Responsive ---------- */
@media (max-width: 576px){
    .tu-hero--frame{ padding: 16px 14px 14px 18px; }
    .tu-hero--band{ border-radius:14px; padding:16px 12px; }
    .tu-hero--panel{ padding:14px 12px; }
}