/* ═══ CSS TRACKING — Ne pas supprimer ═══ */
/* ════════════════════════════════════════ */

@layer ui {
/* #region 4. COMPONENTS */
/* --- SECTION 5 : UI COMPONENTS --- */

/* ─── BUTTONS ─── */

/* ================================================================
   4.3 BUTTONS
   ================================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-lg);
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
}

.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-100);
}

.btn svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    stroke-width: 2;
    fill: none;
}

.btn--ghost {
    color: var(--gray-600);
}

.btn--ghost:hover {
    background: var(--gray-100);
    color: var(--gray-800);
}

.btn--ghost.btn--danger {
    color: var(--toast-error);
}

.btn--ghost.btn--danger:hover {
    background: var(--danger-50);
    color: var(--danger-700);
}

.btn--primary {
    background: linear-gradient(135deg, var(--brand-500) 0%, var(--brand-600) 100%);
    color: var(--gray-900);
    box-shadow: 0 2px 4px rgba(229, 166, 59, 0.25);
}

.btn--secondary {
    background: var(--white);
    color: var(--gray-700);
    border: 1.5px solid var(--gray-300);
}

.btn--secondary:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
}

.btn-summary {
    background: transparent;
    border: 1.5px solid var(--gray-300);
    border-radius: var(--radius-md);
    padding: 0.35rem 0.75rem;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--gray-600);
    box-shadow: none;
    gap: 0.5rem;
}

.btn-summary:hover {
    background: var(--gray-50);
    border-color: var(--gray-400);
    color: var(--gray-800);
    box-shadow: none;
    transform: none;
}

/* Bouton Ma sélection actif (avec étoile) - liseré vert */
.btn-summary:has(.btn__star--active),
.btn-summary.has-star-active {
    border-color: var(--emerald-500);
    color: var(--emerald-700);
    background: rgba(16, 185, 129, 0.08);
}

.btn-summary:has(.btn__star--active):hover,
.btn-summary.has-star-active:hover {
    border-color: var(--emerald-600);
    background: rgba(16, 185, 129, 0.12);
    color: var(--emerald-800);
}

/* Bouton Ma sélection sur la vue summary - style actif renforcé */
.btn-summary.is-active {
    border-color: var(--emerald-600);
    background: rgba(16, 185, 129, 0.15);
    color: var(--emerald-800);
    font-weight: 600;
}

.btn-summary.is-active:hover {
    border-color: var(--emerald-700);
    background: rgba(16, 185, 129, 0.2);
    color: var(--emerald-800);
}

.btn-summary svg {
    display: none;
}

/* Bouton Vider la sélection */
.btn--clear-selection {
    background: transparent;
    border: 1.5px solid #dc2626;
    border-radius: var(--radius-md);
    padding: 0.25rem;
    box-shadow: none;
    min-width: auto;
    cursor: pointer;
    transition: opacity var(--duration) ease, background var(--duration) ease, border-color var(--duration) ease;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: stretch;
    aspect-ratio: 1;
}

.btn--clear-selection.is-inactive {
    opacity: 0;
    pointer-events: none;
}

.btn--clear-selection:not(.is-inactive) {
    opacity: 1;
    pointer-events: auto;
}

.btn--clear-selection:hover:not(.is-inactive) {
    background: #fef2f2;
    border-color: #b91c1c;
}

.btn--clear-selection .btn__icon-img {
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    filter: brightness(0.4) contrast(1.6) saturate(1.5);
}

.btn--clear-selection:hover:not(.is-inactive) .btn__icon-img {
    filter: brightness(0.25) contrast(1.7) saturate(1.7);
}

.btn--primary:hover {
    box-shadow: 0 4px 12px rgba(229, 166, 59, 0.35);
    transform: translateY(-1px);
}

.btn--primary:active { transform: translateY(0); }

.btn--validate {
    width: 100%;
    max-width: 300px;
    justify-content: center;
}

.btn--cta {
    padding: 0.875rem 2rem;
    font-size: 1rem;
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 14px rgba(229, 166, 59, 0.4);
}

.btn--cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(229, 166, 59, 0.5);
}

/* Bouton CTA actif (avec étoile) - style vert validé */
.btn--cta:has(.btn__star--active),
.btn--cta.has-star-active {
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-600) 100%);
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
}

.btn--cta:has(.btn__star--active):hover,
.btn--cta.has-star-active:hover {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
}

.btn--cta svg {
    width: 18px;
    height: 18px;
}

.btn--outline-fill {
    color: #f27a1a;
    background: transparent;
    border: 2px solid #f27a1a;
    text-decoration: none;
    box-shadow: none;
    transition: color 0.16s ease, background-color 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.btn--outline-fill:hover {
    color: #ffffff;
    background: #f27a1a;
    border-color: #f27a1a;
    box-shadow: 0 4px 20px rgba(242, 122, 26, 0.35);
    transform: none;
    filter: none;
}

.btn--outline-fill:active {
    transform: none;
}

.btn--outline-fill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(242, 122, 26, 0.28), 0 4px 20px rgba(242, 122, 26, 0.2);
}

.btn__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 0.25rem;
    font-size: 0.625rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    background: var(--white);
    color: var(--brand-700);
}

/* Étoile de sélection */
.btn__star {
    font-size: 1rem;
    line-height: 1;
    transition: opacity 0.3s ease;
    color: var(--gray-400);
    opacity: 0.7;
}

.btn__star--active {
    opacity: 1;
    animation: buttonStarPulse 0.9s ease-in-out infinite alternate;
}

.modal__footer .btn {
    flex: 1;
}

.modal--compact .modal__footer .btn {
    padding: 0.5rem 0.875rem;
    font-size: 0.85rem;
}

/* CTA Buttons variants */
.btn--cta-full {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 1.5rem;
}

.btn--cta-secondary {
    background: var(--brand-100);
    color: var(--brand-900);
}

.btn--cta-outline {
    background: var(--white);
    border: 1px solid var(--brand-500);
    color: var(--brand-700);
}

.btn__label {
    font-weight: 600;
}

.btn__sublabel {
    font-size: 0.8em;
    opacity: 0.9;
    font-weight: 400;
}

.btn--b2b {
    font-size: 0.85rem;
    color: var(--brand-700);
}

/* Summary Buttons */
.btn--email {
    background: var(--gray-900);
    color: var(--white);
    margin-left: 0.5rem;
}

.btn--email svg {
    stroke: white;
}

/* Danger Button */
.btn--danger {
    color: var(--danger-600);
}

/* Bouton retour avec margin */
.btn--margin-top {
    margin-top: 1.5rem;
}
/* ─── CARDS ─── */

/* ================================================================
   4.4 CARDS (Services)
   ================================================================ */
/* CSS_CARDS_START */

.card {
    background: var(--white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    cursor: pointer;
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
    position: relative;
    border: 1px solid var(--gray-200);
}

/* Hexagonal pattern overlay */
.card::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23000' fill-opacity='1'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 24px auto;
    pointer-events: none;
    z-index: 1; /* local: fond décoratif */
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.card:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--brand-200);
}

.card--selected {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 2px var(--brand-500);
}

.card--selected:hover {
    box-shadow: 0 0 0 2px var(--brand-500), var(--shadow-lg);
}

.card__inner {
    position: relative;
    padding: 1.25rem;
    min-height: 180px;
    z-index: 2; /* local: contenu au-dessus du pattern */
    display: flex;
    flex-direction: column;
    height: 100%;
}

.card__inner--has-list { min-height: auto; }

/* Card Category Colors - Variables locales
   Contrat: .card--cat-* fournit --cat-color/--bg-start/--bg-end,
   puis [class*="card--cat-"] et .card__cat/.card__number les consomment. */
.card--cat-1 {
    --cat-color: var(--cat-1);
    --bg-start: var(--cat-1-bg);
    --bg-end: var(--cat-1-gradient);
    /* Règles spécifiques cat-1 */
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card--cat-2 {
    --cat-color: var(--cat-2);
    --bg-start: var(--cat-2-bg);
    --bg-end: var(--cat-2-gradient);
}

.card--cat-3 {
    --cat-color: var(--cat-3);
    --bg-start: var(--cat-3-bg);
    --bg-end: var(--cat-3-gradient);
}

.card--cat-4 {
    --cat-color: var(--cat-4);
    --bg-start: var(--cat-4-bg);
    --bg-end: var(--cat-4-gradient);
}

.card--cat-5 {
    --cat-color: var(--cat-5);
    --bg-start: var(--cat-5-bg);
    --bg-end: var(--cat-5-gradient);
}

.card--cat-6 {
    --cat-color: var(--cat-6);
    --bg-start: var(--cat-6-bg);
    --bg-end: var(--cat-6-gradient);
}

.card--cat-7 {
    --cat-color: var(--cat-7);
    --bg-start: var(--cat-7-bg);
    --bg-end: var(--cat-7-gradient);
}

/* Card Category Colors - Styles partagés */
[class*="card--cat-"] {
    background: linear-gradient(135deg, var(--bg-start) 0%, var(--bg-end) 100%);
}

.card__cat, .card__number { color: var(--cat-color); }

/* Pack cards (block 1) special styling */
.card--cat-1 .card__title {
    color: var(--brand-600);
    font-size: 1.25rem;
    font-weight: 700;
}

.card--cat-1 .card__inner { min-height: 320px; height: 100%; }

.card--cat-1 .card__subtitle {
    color: var(--gray-900);
    font-weight: 700;
}

.card--cat-1 .card__content {
    padding-right: 1.5rem;
}

/*
   PACK CARDS - PREMIUM STYLING
   Distinction visuelle forte pour Service à la carte (Bloc 1)
    */

.card--pack {
    border: 2px solid var(--premium-gold);
    box-shadow: 0 4px 20px var(--premium-shadow), 0 2px 8px rgba(0, 0, 0, 0.08);
    position: relative;
}

.card--pack:hover {
    box-shadow: 0 8px 30px var(--premium-shadow), 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
    border-color: var(--premium-gold-light);
}

.card--pack.card--selected {
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-500), 0 4px 20px var(--premium-shadow);
}

.card--pack.card--selected:hover {
    box-shadow: 0 0 0 3px var(--brand-500), 0 8px 30px var(--premium-shadow);
}

/* Card Star Button */
.card__star {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    width: 38px;
    height: 38px;
    background: var(--white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3; /* local: étoile au-dessus du contenu */
    box-shadow: var(--shadow-sm);
    transition: transform var(--duration) var(--ease);
}

.card__star:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

.card__star:active { transform: scale(0.95); }

.card__star-empty {
    width: 20px;
    height: 20px;
    stroke: var(--gray-400);
    stroke-width: 1.5;
    fill: none;
    transition: all var(--duration) var(--ease);
}

.card:hover .card__star-empty { stroke: var(--brand-500); }

.card__star-filled {
    position: absolute;
    width: 22px;
    height: 22px;
    fill: var(--star-yellow);
    stroke: none;
    opacity: 0;
    transform: scale(0.5);
    transition: all var(--duration) var(--ease);
}

.card--selected .card__star-empty {
    opacity: 0;
    transform: scale(0.5);
}

.card--selected .card__star-filled {
    opacity: 1;
    transform: scale(1.1);
}

/* Card Service Number */
.card__number {
    position: absolute;
    bottom: 0.75rem;
    right: 0.75rem;
    width: 32px;
    height: 32px;
    background: var(--white);
    border: 2px solid currentColor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3; /* local: numéro au-dessus du contenu */
    box-shadow: var(--shadow-sm);
    font-size: 0.75rem;
    font-weight: 700;
    pointer-events: none;
}

/* Card Content */
.card__content {
    position: relative;
    z-index: 1; /* local: contenu au-dessus du pattern */
    padding-right: 2.5rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.card__cat {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 0.5rem;
    display: inline-block;
}

.card__title {
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 0.625rem;
    line-height: 1.3;
}

.card__subtitle {
    display: block;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-500);
    margin-top: -0.375rem;
    margin-bottom: 0.625rem;
}

/* Subtitle des packs : plus d'espace au-dessus */
.card--pack .card__subtitle {
    margin-top: 0.25rem;
    margin-bottom: 0.875rem;
}

.card__desc {
    font-size: 0.8125rem;
    color: var(--gray-600);
    line-height: 1.6;
}

/* Style pour les descriptions structurées des packs */
.card--pack .card__desc {
    font-size: 0.75rem;
    line-height: 1.5;
}

.card--pack .card__desc strong {
    color: var(--gray-800);
    font-weight: 600;
    display: inline;
    margin-top: 0.75rem;
}

.card--pack .card__desc strong:first-child {
    margin-top: 0;
}

.card__desc-intro {
    margin-bottom: 0.625rem;
    font-weight: 500;
    color: var(--gray-700);
    font-size: 0.8125rem;
    line-height: 1.5;
}

.card__desc-list {
    list-style: none;
    margin: 0 0 0.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.card__desc-list li {
    position: relative;
    padding-left: 1.625rem;
    line-height: 1.45;
    font-size: 0.8rem;
    color: var(--gray-600);
}

.card__desc-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gray-600);
}

.card__desc-objective {
    margin-top: 0.75rem;
    padding-top: 0.625rem;
    border-top: 1px dashed var(--gray-200);
    font-size: 0.8rem;
    color: var(--gray-500);
    line-height: 1.5;
}

.card__desc-objective strong { color: var(--gray-700); }

.card__badges {
    margin-top: 0.75rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.card__price {
    display: inline-block;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--gray-500);
    font-style: italic;
}

/* Service References (for packs) */
.card__refs {
    margin-top: auto;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--gray-200);
}

.card__refs-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--gray-700);
    margin-bottom: 0.5rem;
}

.card__refs-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.card__ref {
    width: 24px;
    height: 24px;
    border-radius: var(--radius-full);
    font-size: 0.65rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Utilise custom properties définies par catégorie */
    background: var(--ref-bg, var(--gray-100));
    color: var(--ref-color, var(--gray-600));
}

/* Références visuelles des services inclus dans les packs - couleur selon catégorie parente pour identification rapide */
.card__ref--cat-2 { --ref-bg: var(--cat-2-bg); --ref-color: var(--cat-2); }

.card__ref--cat-3 { --ref-bg: var(--cat-3-bg); --ref-color: var(--cat-3); }

.card__ref--cat-4 { --ref-bg: var(--cat-4-bg); --ref-color: var(--cat-4); }

.card__ref--cat-5 { --ref-bg: var(--cat-5-bg); --ref-color: var(--cat-5); }

.card__ref--cat-6 { --ref-bg: var(--cat-6-bg); --ref-color: var(--cat-6); }

.card__ref--cat-7 { --ref-bg: var(--cat-7-bg); --ref-color: var(--cat-7); }

.card--highlight .card__star {
    animation: starPulse 0.4s ease-in-out 8;
    z-index: var(--z-dropdown);
}

.card--highlight .card__star-filled {
    fill: var(--glow-yellow);
    opacity: 1;
    filter: drop-shadow(0 0 8px var(--glow-yellow)) drop-shadow(0 0 16px var(--glow-yellow));
}

.card--highlight .card__star-empty {
    stroke: var(--glow-yellow);
    stroke-width: 2;
    filter: drop-shadow(0 0 8px var(--glow-yellow));
}

.card { animation: fadeUp 0.35s var(--ease) backwards; }

.card--selected .card__star-filled { animation: starPop 0.3s var(--ease); }

/* Objectif au début de description */
.card__desc-objective--first {
    margin-top: 0;
    margin-bottom: 0.75rem;
    padding-top: 0;
    border-top: none;
}
/* ─── MODALS ─── */

/* ================================================================
   4.14 MODAL
   ================================================================ */

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration) var(--ease), visibility var(--duration);
    padding: 1rem;
}

.modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.modal {
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    max-width: 480px;
    width: 100%;
    max-height: 80vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(10px);
    transition: transform var(--duration) var(--ease);
}

.modal-overlay.is-visible .modal {
    transform: scale(1) translateY(0);
}

.modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--gray-200);
    background: var(--gray-50);
}

.modal__title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.modal__close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--gray-500);
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: color 0.15s, background 0.15s;
}

.modal__close:hover {
    color: var(--gray-700);
    background: var(--gray-200);
}

.modal__body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1;
}

.modal__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.modal__list-item {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--gray-100);
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--gray-700);
    font-size: 0.95rem;
}

.modal__list-item:last-child {
    border-bottom: none;
}

.modal__list-icon {
    color: var(--brand-500);
    flex-shrink: 0;
}

.modal__footer {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--gray-200);
    background: var(--gray-50);
}

/* Variante modale compacte (style summary) */
.modal--compact {
    max-width: 360px;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    box-shadow: var(--shadow-lg);
}

.modal--compact .modal__header {
    padding: 0.75rem 1.25rem;
    background: linear-gradient(180deg, var(--brand-50) 0%, var(--white) 100%);
    border-bottom: 1px solid var(--gray-100);
    justify-content: center;
    position: relative;
}

.modal--compact .modal__close {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

.modal--compact .modal__title {
    font-size: 1rem;
}

.modal--compact .modal__body {
    padding: 0.75rem 1rem;
}

.modal--compact .modal__footer {
    padding: 0.6rem 1rem;
    background: var(--gray-50);
}

.modal--compact .modal__warning {
    padding: 0.75rem;
}

.modal--compact .modal__warning-icon {
    font-size: 1.5rem;
}

.modal--compact .modal__warning-title {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.modal--compact .modal__warning-text {
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.modal--compact .modal__warning-detail {
    font-size: 0.8rem;
}

/* Modale de confirmation de réinitialisation */
.modal-dialog {
    background: var(--white);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
    max-width: 400px;
    width: 100%;
    padding: 2rem;
    text-align: center;
    transform: scale(0.95) translateY(10px);
    transition: transform var(--duration) var(--ease);
}

.modal-overlay.is-visible .modal-dialog {
    transform: scale(1) translateY(0);
}

.modal-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.modal-title {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gray-900);
    margin: 0 0 0.75rem 0;
}

.modal-text {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.95rem;
    color: var(--gray-600);
    margin: 0 0 1.5rem 0;
    line-height: 1.5;
}

.modal-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
}

.modal-btn {
    padding: 0.75rem 1.5rem;
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--duration) ease;
    min-width: 120px;
}

.modal-btn--cancel {
    background: var(--white);
    color: var(--gray-600);
    border: 1px solid var(--gray-300);
}

.modal-btn--cancel:hover {
    background: var(--gray-100);
    border-color: var(--gray-400);
}

.modal-btn--confirm {
    background: var(--white);
    color: #dc2626;
    border: 2px solid #dc2626;
}

.modal-btn--confirm:hover {
    background: #fef2f2;
    border-color: #b91c1c;
    color: #b91c1c;
}

/* Avertissement changement de parcours */
.modal__warning {
    display: flex;
    gap: 1rem;
    background: linear-gradient(135deg, var(--amber-50) 0%, #FFF8E7 100%);
    border: 1px solid var(--amber-200);
    border-radius: var(--radius-lg);
    padding: 1.25rem;
}

/* Variante centrée */
.modal__warning--centered {
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.modal__warning--centered .modal__warning-icon {
    margin-bottom: 0.5rem;
}

.modal__warning--centered .modal__warning-title {
    margin-bottom: 1rem;
}

.modal__warning--centered .modal__warning-detail {
    border-top: none;
    padding-top: 0;
}

/* Variante compacte avec icône inline */
.modal__warning--compact {
    flex-direction: column;
    text-align: center;
    padding: 0.75rem 1rem;
}

.modal__warning--compact .modal__warning-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.modal__warning--compact .modal__warning-icon {
    font-size: 1.25rem;
}

.modal__warning--compact .modal__warning-title {
    margin: 0;
    font-size: 1rem;
}

.modal__warning--compact .modal__warning-text {
    margin-bottom: 0.25rem;
    font-size: 0.9rem;
}

.modal__warning--compact .modal__warning-detail {
    border-top: none;
    padding-top: 0;
    font-size: 0.8rem;
}

.modal__warning-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.modal__warning-content {
    flex: 1;
}

.modal__warning-title {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--amber-700);
    margin: 0 0 0.5rem;
}

.modal__warning-text {
    font-size: 0.95rem;
    color: var(--gray-800);
    margin: 0 0 0.75rem;
    line-height: 1.5;
}

.modal__warning-text strong {
    color: var(--danger-600);
    font-weight: 600;
}

.modal__warning-detail {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin: 0;
    line-height: 1.5;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--amber-200);
}

/* ─── MODAL RESPONSIVE ─── */

/* Paysage compact : réduire la hauteur max pour éviter overflow */
@media (max-height: 500px) and (orientation: landscape) {
    .modal {
        max-height: calc(100vh - 1rem);
        max-height: calc(100dvh - 1rem);
    }
    
    .modal-dialog {
        padding: 1.25rem;
    }
    
    .modal__header {
        padding: 0.875rem 1.25rem;
    }
    
    .modal__body {
        padding: 1rem 1.25rem;
    }
    
    .modal__footer {
        padding: 0.875rem 1.25rem;
    }
}

/* ─── TOAST ─── */

/* Notification éphémère */
.toast-notification {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    background: linear-gradient(135deg, var(--emerald-500) 0%, var(--emerald-600) 100%);
    color: var(--white);
    padding: 1rem 2rem;
    border-radius: var(--radius-lg);
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: 0 4px 20px rgba(16, 185, 129, 0.4);
    z-index: var(--z-toast);
    opacity: 0;
    transition: all 0.4s var(--ease);
}

.toast-notification.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

/* ================================================================
   4.11 TOAST NOTIFICATIONS
   ================================================================ */

.toast-container {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    z-index: var(--z-toast);
    pointer-events: none;
}

.toast {
    min-width: 280px;
    max-width: 400px;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-shadow: 0 10px 40px rgba(0,0,0,0.25);
    background: var(--toast-bg);
    color: var(--white);
    opacity: 0;
    transform: scale(0.9);
    pointer-events: auto;
    animation: toast-in var(--duration) var(--ease) forwards;
}

.toast--success { background: var(--toast-success); }

.toast--info { background: var(--toast-info); }

.toast--error { background: var(--toast-error); }

.toast__icon { font-size: 1rem; }

.toast__text { flex: 1; }

.toast__close {
    border-radius: var(--radius-full);
    /* 44px = WCAG 2.5.5 minimum touch target */
    min-width: 44px;
    min-height: 44px;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: transparent;
    color: inherit;
    cursor: pointer;
}

.toast--hide { animation: toast-out var(--duration) var(--ease) forwards; }

/* ─── FORMS ─── */

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
}

.form-grid--compact {
    gap: 0.75rem 1rem;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}

.form-group--full { grid-column: 1 / -1; }

.form-group label {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--gray-600);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.form-group input,
.form-group select {
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
    background: var(--white);
    transition: border-color var(--duration), box-shadow var(--duration);
}

.form-group input:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--brand-500);
    box-shadow: 0 0 0 3px var(--brand-100);
}

.is-error {
    border-color: var(--danger-600);
}

.form-group select {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    padding-right: 2.5rem;
}

.form-group input::placeholder {
    color: var(--gray-400);
}
/* --- SECTION 6 : UTILITIES & ANIMATIONS --- */

/* ─── UTILITIES ─── */

/* États dynamiques (convention .is-*)
   Utilisés via classList.toggle() pour états génériques.
   Les modificateurs BEM (--open, --active, --highlight) restent valides
   quand ils sont spécifiques à un composant.

   Classes .is-* disponibles :
   - .is-visible    Élément affiché
   - .is-hidden     Élément masqué
   - .is-active     État actif générique
   - .is-loading    Chargement en cours
   - .is-error      État d'erreur
   - .is-selected   Élément sélectionné
*/
/* ─── TRANSITIONS DE SECTIONS ─── */
/* Classes pour transitions animées entre vues */

.section-fade-out {
    animation: sectionFadeOut 0.25s var(--ease) forwards;
    pointer-events: none;
}

.section-fade-in {
    animation: sectionFadeIn 0.35s var(--ease) forwards;
}

.section-hidden {
    display: none;
    opacity: 0;
}

@keyframes sectionFadeOut {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-10px);
    }
}

@keyframes sectionFadeIn {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ─── PERFORMANCE OPTIMIZATIONS (web.dev) ─── */

/**
 * CONTENT-VISIBILITY: Lazy Rendering
 *
 * Optimisation web.dev Baseline 2024 : Le navigateur skip le rendu des éléments
 * hors viewport jusqu'à ce qu'ils approchent de la zone visible.
 *
 * GAINS ATTENDUS :
 * - Rendu initial : +50% à +700% plus rapide (selon complexité DOM)
 * - INP (Interaction to Next Paint) : amélioration 20-40%
 * - Parsing CSS/Layout : réduit de ~60% au load
 *
 * COMPATIBILITÉ :
 * - Chrome/Edge 85+, Safari 17.4+, Firefox 125+
 * - Fallback gracieux : ignoré par anciens navigateurs (0% régression)
 *
 * SOURCES :
 * - https://web.dev/content-visibility/
 * - https://web.dev/css-content-visibility-baseline/
 */

/* Section FAQ : Cible de navigation directe
   ⚠️ content-visibility désactivé pour éviter décalage scroll
   (la position calculée par JS peut différer si le contenu n'est pas rendu)
   Voir: Solution 4 - Bible Viewport 7.0.0
*/
.faq-section {
    /* content-visibility: auto; — désactivé (cible navigation) */
    /* contain-intrinsic-size: auto 800px; */
}

/* Grille catalogue services : Nombreuses cards */
.catalog__grid {
    content-visibility: auto;
    contain-intrinsic-size: auto 1200px;
}

/* Section Summary : Récapitulatif devis */
.summary {
    content-visibility: auto;
    contain-intrinsic-size: auto 700px;
}

/**
 * NOTES TECHNIQUES :
 *
 * 1. contain-intrinsic-size : Réserve hauteur estimée AVANT rendu réel
 *    → Évite jump de scrollbar quand élément devient visible
 *    → Valeur "auto" + estimation = meilleur compromis
 *
 * 2. Sections NON optimisées volontairement :
 *    - .header : Toujours visible (above fold)
 *    - .home__hero : LCP element, doit rester prioritaire
 *    - .cta-section : Petite, gains négligeables
 *
 * 3. Mesurer impact :
 *    - Chrome DevTools > Performance > Rendering
 *    - Lighthouse : "Reduce rendering work" audit
 *    - Real User Monitoring : INP metric
 *
 * 4. Valeurs contain-intrinsic-size calibrées sur :
 *    - Desktop 1920x1080 viewport
 *    - Mobile 375x667 viewport
 *    - Ajuster si layout change significativement
 */

/* ─── ANIMATIONS ─── */

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

@keyframes highlightPulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(229, 166, 59, 0.3), 0 4px 16px rgba(229, 166, 59, 0.25); }
    50% { box-shadow: 0 0 0 8px rgba(229, 166, 59, 0.2), 0 4px 20px rgba(229, 166, 59, 0.35); }
}

@keyframes buttonStarPulse {
    0% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1.5);
    }
}


@keyframes faqFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes starPop {
    0% { transform: scale(0.5); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

@keyframes starPulse {
    0%, 100% { transform: scale(1.8); opacity: 1; }
    50% { transform: scale(2.5); opacity: 0.5; }
}

@keyframes toast-in {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes toast-out {
    from { opacity: 1; transform: scale(1); }
    to { opacity: 0; transform: scale(0.9); }
}

/* ─── BASE ─── */
/* ─── OTHER ─── */

/* Desktop only - contraintes de largeur header */
/* CSS_CARDS_END */

/* ================================================================
   4.5 BADGES
   ================================================================ */

.badge {
    display: inline-block;
    font-size: 0.625rem;
    font-weight: 600;
    padding: 0.15rem 0.4rem;
    border-radius: var(--radius-full);
    margin-right: 0.25rem;
    margin-top: 0.25rem;
    /* Utilise custom properties définies par les modificateurs */
    background: var(--badge-bg, var(--gray-100));
    color: var(--badge-color, var(--gray-700));
}

.badge--plateformes {
    --badge-bg: var(--badge-blue-bg);
    --badge-color: var(--badge-blue-text);
}

.badge--direct {
    --badge-bg: var(--badge-purple-bg);
    --badge-color: var(--badge-purple-text);
}

.badge--traditionnel {
    --badge-bg: var(--badge-amber-bg);
    --badge-color: var(--badge-amber-text);
}

.badge--tous {
    --badge-bg: var(--badge-green-bg);
    --badge-color: var(--badge-green-text);
}

/* #endregion 4. COMPONENTS */
/* #region 5. ANIMATIONS */
/* ================================================================
   5. ANIMATIONS
   ================================================================ */

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* #endregion 5. ANIMATIONS */

/* #region 6. UTILITY CLASSES */
/* ================================================================
   6. UTILITY CLASSES
   ================================================================ */

/* Couleurs dynamiques par catégorie (utilisées via data-block)
   Contrat: .is-cat-* fournit --block-color/--block-bg,
   consommées dans Kaptivia-components.css (.summary__item-number--dynamic, .summary__section-icon--dynamic). */
.is-cat-1 { --block-color: var(--cat-1); --block-bg: var(--cat-1-bg); }

.is-cat-2 { --block-color: var(--cat-2); --block-bg: var(--cat-2-bg); }

.is-cat-3 { --block-color: var(--cat-3); --block-bg: var(--cat-3-bg); }

.is-cat-4 { --block-color: var(--cat-4); --block-bg: var(--cat-4-bg); }

.is-cat-5 { --block-color: var(--cat-5); --block-bg: var(--cat-5-bg); }

.is-cat-6 { --block-color: var(--cat-6); --block-bg: var(--cat-6-bg); }

.is-cat-7 { --block-color: var(--cat-7); --block-bg: var(--cat-7-bg); }

/* Note: Utiliser .is-hidden pour masquer les éléments (défini dans Kaptivia-critical.css) */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* #endregion 6. UTILITY CLASSES */

}