/* ===== Page Tarifs & Inscriptions — styles specifiques (repris de la maquette V4) ===== */

/* HERO (construit en blocs natifs Elementor : habillage du texte sur image sombre) */
.tarifs-hero-native { min-height: 380px; }
/* Centrage VERTICAL via le conteneur (hauteur + align-items), contenu en flux normal aligné à gauche. */
.tarifs-hero-native > .elementor-container { min-height: 380px; align-items: center; }
.tarifs-hero-native .elementor-heading-title { color: var(--blanc) !important; text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4); }
.tarifs-hero-native .tarifs-hero-text { font-size: 18px; max-width: 600px; color: rgba(255, 255, 255, 0.95); }
.tarifs-hero-native .tarifs-hero-text p { color: rgba(255, 255, 255, 0.95); }
/* La classe DS .btn (posée sur le widget) le rend flex+justify-center -> bouton centré.
   On force l'alignement à gauche du bouton dans le hero. */
.tarifs-hero-native .elementor-widget-button { justify-content: flex-start !important; text-align: left; }

/* Ancre #process : compense la hauteur du header sticky au scroll. */
#process { scroll-margin-top: 120px; }

/* PROCESS — 4 etapes */
.process-section { padding: var(--space-4xl) var(--space-xl); max-width: 1400px; margin: 0 auto; }
.process-section .section-header h2 { margin-bottom: var(--space-md); }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2xl); position: relative; }
.process-grid::before {
    content: ""; position: absolute; top: 50px; left: 12%; right: 12%; height: 3px;
    background: repeating-linear-gradient(90deg, var(--gris-doux) 0, var(--gris-doux) 8px, transparent 8px, transparent 16px);
    z-index: 0;
}
.process-step { position: relative; z-index: 1; text-align: center; }
.step-icon {
    width: 100px; height: 100px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto var(--space-md); background: var(--blanc); box-shadow: var(--shadow-medium);
    position: relative; transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.process-step:hover .step-icon { transform: scale(1.1) rotate(-5deg); }
.step-icon::after {
    content: attr(data-step); position: absolute; top: -8px; right: -8px;
    width: 32px; height: 32px; background: var(--orange); color: var(--blanc);
    font-family: var(--font-display); font-weight: 700; font-size: 16px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-soft);
}
.step-icon svg { width: 44px; height: 44px; }
.step-icon.rose { color: var(--rose); }
.step-icon.bleu { color: var(--bleu); }
.step-icon.vert { color: var(--vert); }
.step-icon.teal { color: var(--teal); }
.step-icon.jaune { color: var(--jaune); }
.step-icon.orange { color: var(--orange); }
.process-step h4 { margin-bottom: var(--space-sm); text-transform: uppercase; font-size: 16px; letter-spacing: 1px; }
.process-step p { font-size: 14px; color: var(--gris-fonce); margin-bottom: var(--space-md); }

/* TABLEAU TARIFS */
.pricing-section { background: var(--papier); padding: var(--space-4xl) var(--space-xl); }
.pricing-inner {
    max-width: 1400px; margin: 0 auto; display: grid;
    grid-template-columns: 1fr 1.4fr; gap: var(--space-3xl); align-items: start;
}
.pricing-side h2 { margin-bottom: var(--space-lg); }
.pricing-side ul { margin: var(--space-lg) 0; }
.pricing-side ul li { position: relative; padding-left: 32px; margin-bottom: var(--space-md); font-size: 16px; color: var(--gris-fonce); }
.pricing-side ul li::before {
    content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 18px;
    background: var(--vert); border-radius: 50%; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.1);
}
.pricing-side ul li::after { content: "\2713"; position: absolute; left: 4px; top: 6px; color: var(--blanc); font-weight: 700; font-size: 12px; }
.pricing-table { background: var(--blanc); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-medium); position: relative; }
.pricing-row {
    display: grid; grid-template-columns: 1fr 1.5fr; padding: 0;
    border-bottom: 1px solid var(--gris-doux); align-items: stretch; gap: 0;
}
.pricing-row:last-child { border-bottom: none; }
.pricing-row strong { font-family: var(--font-display); color: var(--noir-doux); font-weight: 700; }
.pricing-row.highlight strong, .pricing-row.highlight .pr-label { color: var(--orange); }
.pricing-table .table-title {
    background: var(--bleu); color: var(--blanc); padding: var(--space-lg);
    font-family: var(--font-display); font-weight: 700; font-size: 18px; text-align: center;
}
/* .pricing-table = <table> sémantique. Le fond des lignes est porté par les CELLULES (et non le
   <tr>, qui ne peint pas l'espace de la grille -> stries coupées). Espacement via padding cellules. */
.pricing-table { display: block; }
.pricing-table tbody { display: block; }
.pricing-table caption.table-title { display: block; caption-side: top; }
.pricing-row th, .pricing-row td { padding: var(--space-md) var(--space-sm); border: 0; background: transparent; }
.pricing-row th.pr-label { padding-left: var(--space-lg); }
.pricing-row td.pr-value { padding-right: var(--space-lg); }
.pricing-row:nth-child(odd) th, .pricing-row:nth-child(odd) td { background: var(--craie); }
.pricing-row.highlight th, .pricing-row.highlight td { background: var(--orange-light); }
.pr-label { font-family: var(--font-display); color: var(--noir-doux); font-weight: 700; text-align: left; }

/* Responsive */
@media (max-width: 1024px) {
    .process-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid::before { display: none; }
    .pricing-inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .tarifs-hero-native, .tarifs-hero-native > .elementor-container { min-height: 280px; }
    .process-grid { grid-template-columns: 1fr; }
    .pricing-row { grid-template-columns: 1fr; }
    .pricing-row th, .pricing-row td { padding-left: var(--space-lg); padding-right: var(--space-lg); }
    .pricing-row th.pr-label { padding-bottom: 2px; }
    .pricing-row td.pr-value { padding-top: 2px; }
}