/* ========================================
   PATTERNS — patrons de mise en page partagés par les pages publiques
   .page-hero, .section-head, .feature-grid, .steps, .error-page
   ======================================== */

/* ---------- Patron : en-tête de page ----------
   <section class="page-hero">
     <div class="container">
       <p class="page-hero__eyebrow">Surtitre</p>
       <h1 class="page-hero__title">Titre</h1>
       <p class="page-hero__lead">Chapeau</p>
     </div>
   </section> */
.page-hero {
    padding: clamp(40px, 6vw, 80px) 0 clamp(24px, 4vw, 48px);
}

.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    background: var(--color-primary-light);
    font-size: 13px;
    font-weight: 700;
    color: var(--color-text);
}

.page-hero__title {
    max-width: 20ch;
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.08;
}

.page-hero__lead {
    max-width: 640px;
    margin-top: 16px;
    font-size: clamp(16px, 1.6vw, 18px);
    line-height: 1.6;
    color: var(--color-text-light);
}

/* ---------- Patron : titre de section + action à droite ----------
   <div class="section-head">
     <h2 class="section-head__title">…</h2>
     <a class="btn btn--outline" href="…">Tout voir</a>
   </div> */
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.section-head__title {
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
}

/* « Tout voir » souligné, à droite du titre */
.section-head__lien {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    font-size: var(--font-size-base);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 4px;
}

.section-head__lien:hover {
    color: var(--color-primary-text);
}

/* ---------- Patron : carrousel horizontal (rail) ----------
   <ul class="rail [rail--large]"><li class="rail__item">carte</li>…</ul>
   Défilement horizontal, aimanté carte par carte, sans barre ni JS. Sur grand écran, 5
   cartes visibles (3 en --large) ; sur mobile, la suivante dépasse pour inviter à glisser.
   Les cartes débordent jusqu'au bord de l'écran sans casser l'alignement du contenu. */
.rail {
    --rail-visibles: 5;
    --rail-ecart: 16px;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - (var(--rail-visibles) - 1) * var(--rail-ecart)) / var(--rail-visibles));
    gap: var(--rail-ecart);
    margin: 0 calc(-1 * var(--page-gutter));
    padding: 8px var(--page-gutter) 20px;
    scroll-padding: 0 var(--page-gutter);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    list-style: none;
}

.rail::-webkit-scrollbar {
    display: none;
}

.rail--large {
    --rail-visibles: 3;
    --rail-ecart: 20px;
}

.rail__item {
    display: flex;
    min-width: 0;
    scroll-snap-align: start;
}

.rail__item > * {
    flex: 1 1 auto;
}

@media (max-width: 1023px) {
    .rail {
        --rail-visibles: 3.3;
    }

    .rail--large {
        --rail-visibles: 2.2;
    }
}

@media (max-width: 767px) {
    .rail {
        --rail-visibles: 2.3;
        --rail-ecart: 12px;
    }

    .rail--large {
        --rail-visibles: 1.25;
    }
}

/* ---------- Patron : grille d'avantages avec pictos ----------
   <div class="feature-grid">
     <div class="feature"><span class="feature__icon">svg</span>
       <h3 class="feature__title">…</h3><p class="feature__text">…</p></div>
   </div> */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
    gap: 32px 24px;
}

.feature__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: var(--color-primary-light);
    color: var(--color-text);
    font-size: var(--font-size-title);
}

.feature__title {
    margin-top: 16px;
    font-size: 17px;
    font-weight: 700;
}

.feature__text {
    margin-top: 6px;
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--color-text-light);
}

/* ---------- Patron : étapes numérotées (numéro automatique) ----------
   <ol class="steps">
     <li class="steps__item"><h3 class="steps__title">…</h3><p class="steps__text">…</p></li>
   </ol> */
.steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px;
    counter-reset: etape;
}

.steps__item {
    padding: 28px 24px;
    border: 1px solid var(--color-surface-2);
    border-radius: var(--radius-2xl);
    background: var(--color-bg);
    counter-increment: etape;
}

.steps__item::before {
    content: counter(etape);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: 16px;
    border-radius: 50%;
    background: var(--color-dark);
    color: var(--color-on-dark);
    font-size: var(--font-size-base);
    font-weight: 800;
}

.steps__title {
    font-size: 17px;
    font-weight: 700;
}

.steps__text {
    margin-top: 6px;
    font-size: var(--font-size-md);
    line-height: 1.6;
    color: var(--color-text-light);
}

/* ---------- Pages d'erreur (404 / 500) ---------- */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: clamp(64px, 12vw, 140px) 0;
}

.error-page__code {
    font-size: clamp(96px, 18vw, 180px);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 0.9;
    color: var(--color-text);
    text-shadow: 6px 6px 0 var(--color-primary);
}

.error-page__title {
    margin-top: 28px;
    font-size: clamp(24px, 3.2vw, 32px);
}

.error-page__text {
    max-width: 460px;
    margin-top: 12px;
    color: var(--color-text-light);
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
}

@media (max-width: 767px) {
    .section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}