/* ========================================
   Le Mandat — Styles spécifiques /methode
   Palier 2 : entièrement migré sur les tokens.
   ======================================== */

.methode-hero {
    max-width: 800px;
    margin: 4rem auto 2rem;
    padding: 0 1.5rem;
    text-align: center;
}
.methode-hero__pretitre {
    font-family: var(--found-font-sans);
    text-transform: uppercase;
    letter-spacing: var(--found-tracking-label);
    color: var(--found-ink-faint);
    font-size: var(--found-text-micro);
    font-weight: var(--found-weight-semibold);
    margin: 0 0 0.5rem;
}
.methode-hero__title {
    font-size: var(--found-text-h1);
    letter-spacing: var(--found-tracking-tight);
    font-weight: var(--found-weight-semibold);
    line-height: var(--found-leading-tight);
    color: var(--found-ink);
    margin: 0 0 1rem;
}
.methode-hero__subtitle {
    font-size: var(--found-text-lead);
    color: var(--found-ink-soft);
    line-height: var(--found-leading-snug);
    margin: 0 0 1.5rem;
}
.methode-hero__cta {
    display: inline-block;
    padding: 0.6rem 1.25rem;
    font-family: var(--found-font-sans);
    font-size: var(--found-text-small);
    font-weight: var(--found-weight-medium);
    border: 1px solid var(--found-ink-soft);
    color: var(--found-ink);
    text-decoration: none;
    border-radius: var(--found-radius-control);
    transition: background var(--transition), color var(--transition);
}
.methode-hero__cta:hover {
    background: var(--found-surface-sunken);
    color: var(--found-ink);
}

.methode__phase {
    max-width: 880px;
    margin: 4rem auto 0;
    padding: 0 1.5rem;
}
.methode__phase-header {
    border-bottom: 1px solid var(--found-line);
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
}
.methode__phase-numero {
    font-family: var(--found-font-sans);
    text-transform: uppercase;
    letter-spacing: var(--found-tracking-label);
    font-size: var(--found-text-micro);
    font-weight: var(--found-weight-semibold);
    color: var(--found-ink-faint);
    margin: 0;
}
.methode__phase-title {
    font-size: var(--found-text-h2);
    letter-spacing: var(--found-tracking-tight);
    font-weight: var(--found-weight-semibold);
    color: var(--found-ink);
    margin: 0.25rem 0 0;
}
/* Sections imbriquées dans une phase : retirer leur grand margin-top */
.methode__phase .methode__section { margin-top: 2rem; }

.methode__section {
    max-width: 880px;
    margin: 4rem auto;
    padding: 0 1.5rem;
    border-left: 4px solid var(--etape-color, var(--mandat-accent));
    padding-left: 2rem;
}
.methode__section-header { margin-bottom: 1.5rem; }
.methode__section-numero {
    font-family: var(--found-font-sans);
    text-transform: uppercase;
    letter-spacing: var(--found-tracking-label);
    font-size: var(--found-text-micro);
    color: var(--etape-color, var(--mandat-accent));
    font-weight: var(--found-weight-semibold);
    margin: 0;
}
.methode__section-title {
    font-size: var(--found-text-h2);
    letter-spacing: var(--found-tracking-tight);
    font-weight: var(--found-weight-semibold);
    color: var(--found-ink);
    margin: 0.25rem 0 0.5rem;
}
.methode__section-question {
    font-size: var(--found-text-lead);
    color: var(--found-ink-soft);
    line-height: var(--found-leading-snug);
    margin: 0;
}
.methode__section-corps {
    display: grid;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
}
.methode__comprendre p {
    color: var(--found-ink-soft);
    line-height: var(--found-leading-body);
    font-size: var(--found-text-body);
}
.methode__comprendre-title,
.methode__exemple-titre,
.methode__champs-title {
    font-family: var(--found-font-sans);
    font-size: var(--found-text-micro);
    text-transform: uppercase;
    letter-spacing: var(--found-tracking-label);
    font-weight: var(--found-weight-semibold);
    margin: 0 0 0.5rem;
    color: var(--found-ink-faint);
}
.methode__exemple {
    background: var(--found-surface-sunken);
    border-left: 4px solid var(--etape-color, var(--mandat-accent));
    padding: 1rem 1.5rem;
    border-radius: 0 var(--found-radius-card) var(--found-radius-card) 0;
}
.methode__exemple dl { margin: 0; }
.methode__exemple dt { font-weight: var(--found-weight-semibold); color: var(--found-ink); margin-top: 0.5rem; }
.methode__exemple dd { margin: 0 0 0.5rem; color: var(--found-ink-soft); line-height: var(--found-leading-snug); }

.methode__champs {
    background: var(--found-surface-raised);
    border: 1px solid var(--found-line-strong);
    border-radius: var(--found-radius-card);
    padding: 1rem 1.5rem;
    box-shadow: var(--found-shadow-card);
}
.methode__champs ul { list-style: none; padding: 0; margin: 0; }
.methode__champ {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--found-line);
    display: grid;
    grid-template-columns: 12px auto auto;
    gap: 0.5rem;
    align-items: baseline;
}
.methode__champ:last-child { border-bottom: none; }
.methode__champ-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}
.methode__champ-dot--obligatoire { background: var(--etape-color, var(--mandat-accent)); }
.methode__champ-dot--optionnel { background: var(--found-line-strong); }
.methode__champ-name { font-weight: var(--found-weight-semibold); color: var(--found-ink); }
.methode__champ-badge {
    font-family: var(--found-font-sans);
    font-size: var(--found-text-micro);
    text-transform: uppercase;
    letter-spacing: var(--found-tracking-label);
    font-weight: var(--found-weight-semibold);
    color: var(--etape-color, var(--mandat-accent));
    background: var(--found-surface-sunken);
    padding: 0.1rem 0.4rem;
    border-radius: var(--found-radius-control);
}
.methode__champ-placeholder {
    grid-column: 1 / -1;
    color: var(--found-ink-faint);
    font-size: var(--found-text-small);
    font-style: italic;
    margin: 0.25rem 0 0;
}

.methode-error {
    text-align: center;
    color: var(--step-02-ink);
    padding: 2rem;
}

@media (min-width: 920px) {
    .methode__section-corps {
        grid-template-columns: 2fr 1fr;
    }
}

/* ========================================
   Autre cas appliqué — section de bas de page
   ======================================== */
.methode-autrecas {
    max-width: 880px;
    margin: 6rem auto 4rem;
    padding: 0 1.5rem;
}
.methode-autrecas__header {
    border-top: 1px solid var(--found-line);
    padding-top: 2rem;
    margin-bottom: 2rem;
}
.methode-autrecas__pretitre {
    font-family: var(--found-font-sans);
    text-transform: uppercase;
    letter-spacing: var(--found-tracking-label);
    font-size: var(--found-text-micro);
    font-weight: var(--found-weight-semibold);
    color: var(--found-ink-faint);
    margin: 0 0 0.5rem;
}
.methode-autrecas__title {
    font-size: var(--found-text-h2);
    letter-spacing: var(--found-tracking-tight);
    font-weight: var(--found-weight-semibold);
    line-height: var(--found-leading-tight);
    color: var(--found-ink);
    margin: 0 0 0.75rem;
}
.methode-autrecas__intro {
    font-size: var(--found-text-lead);
    color: var(--found-ink-soft);
    line-height: var(--found-leading-snug);
    margin: 0;
}
.methode-autrecas__grille {
    display: grid;
    gap: 1.25rem;
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .methode-autrecas__grille { grid-template-columns: repeat(2, 1fr); }
}
.methode-autrecas__bloc {
    background: var(--found-surface-sunken);
    border-left: 4px solid var(--etape-color, var(--mandat-accent));
    border-radius: 0 var(--found-radius-card) var(--found-radius-card) 0;
    padding: 1rem 1.25rem;
}
.methode-autrecas__bloc-header { margin-bottom: 0.5rem; }
.methode-autrecas__bloc-numero {
    font-family: var(--found-font-sans);
    text-transform: uppercase;
    letter-spacing: var(--found-tracking-label);
    font-size: var(--found-text-micro);
    color: var(--etape-color, var(--mandat-accent));
    font-weight: var(--found-weight-semibold);
    margin: 0;
}
.methode-autrecas__bloc-titre {
    font-size: var(--found-text-body);
    font-weight: var(--found-weight-semibold);
    color: var(--found-ink);
    margin: 0.15rem 0 0;
    letter-spacing: var(--found-tracking-tight);
}
.methode-autrecas__dl { margin: 0; }
.methode-autrecas__dl dt {
    font-weight: var(--found-weight-semibold);
    color: var(--found-ink);
    margin-top: 0.5rem;
    font-size: var(--found-text-small);
}
.methode-autrecas__dl dt:first-child { margin-top: 0; }
.methode-autrecas__dl dd {
    margin: 0 0 0.25rem;
    color: var(--found-ink-soft);
    line-height: var(--found-leading-snug);
    font-size: var(--found-text-small);
}