/*
 * Coaching SEO — surcouche de consultant-seo-paris.css.
 *
 * DEPEND DE : consultant-seo-paris.css charge AVANT (tokens --cp-* + composants
 * .hero-section, .stats-*, .info-box, .checklist, .profile-*, .services-*,
 * .keywords-*, .faq-*, .final-cta, .cta-button, et les 3 breakpoints).
 *
 * INVARIANTS — toute regle qui les casse touche /consultant-seo-paris et
 * /consultant-seo-yvelines, les deux seuls autres consommateurs de
 * .consultant-paris-page :
 *   1. Tout selecteur contient .coaching-seo-page. Sans exception.
 *   2. Toute SURCHARGE d'une regle de base utilise le compose SANS espace
 *      .consultant-paris-page.coaching-seo-page, ce qui ajoute une classe de
 *      specificite et gagne independamment de l'ordre de chargement.
 *   3. Jamais de .consultant-paris-page X nu dans ce fichier.
 *   4. Toute surcharge de grille ou d'alignement est repetee dans les media
 *      queries : une media query n'ajoute aucune specificite, donc une
 *      surcharge ecrite hors media ecrase le collapse mobile du fichier de base.
 *
 * Verification de l'invariant 1 :
 *   grep -nE '^[^@/ ].*\{' app/static/css/coaching-seo.css | grep -v coaching-seo-page
 *   doit ne rien retourner.
 */

/* ------------------------------------------------------------------
   HERO — l'image source coaching-seo.jpg est en 1536x1024 (3:2 paysage)
   alors que .hero-image impose aspect-ratio 4/5 (portrait) + object-fit
   cover, ce qui amputerait environ 40 % de la largeur. On respecte le
   cadrage du visuel et l'image ne s'etire plus sur les 6 rangees.
   ------------------------------------------------------------------ */

html.consultant-paris-theme .consultant-paris-page.coaching-seo-page .hero-image-container {
    align-self: start;
    grid-row: 1 / 5;
}

html.consultant-paris-theme .consultant-paris-page.coaching-seo-page .hero-image {
    aspect-ratio: 3 / 2;
    height: auto;
}

/* ------------------------------------------------------------------
   STATS — .stats-section porte un border-bottom et le premier > h2 du
   flux porte un border-top + margin-top 78px : deux filets a 78px
   d'ecart. On retire celui du bas.
   ------------------------------------------------------------------ */

html.consultant-paris-theme .consultant-paris-page.coaching-seo-page .stats-section {
    border-bottom: 0;
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   PROCESS — recopie de consultant-seo-paris.css:632-662, dont les regles
   sont scopees .consultant-yvelines-page et ne sont donc pas heritees.
   ------------------------------------------------------------------ */

html.consultant-paris-theme .coaching-seo-page .process-list {
    border-bottom: 1px solid var(--cp-border);
    margin: 34px 0 0;
}

html.consultant-paris-theme .coaching-seo-page .process-step {
    border-top: 1px solid var(--cp-border);
    display: grid;
    gap: 20px;
    grid-template-columns: 72px minmax(0, 1fr);
    padding: 28px 0;
}

html.consultant-paris-theme .coaching-seo-page .process-index {
    color: var(--cp-clay-dark);
    font-family: var(--font-serif-stack);
    font-size: 1.55rem;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

html.consultant-paris-theme .coaching-seo-page .process-step h3 {
    font-size: clamp(1.28rem, 2vw, 1.55rem);
    margin-bottom: 8px;
}

html.consultant-paris-theme .coaching-seo-page .process-step p {
    color: var(--cp-muted);
    margin: 0;
    max-width: 72ch;
}

html.consultant-paris-theme .coaching-seo-page .process-step p:last-child {
    margin-bottom: 0;
}

/* ------------------------------------------------------------------
   COMPARAISON — tableau coaching / mentorat / formation / agence.
   Le guide de style n'autorise le tableau que pour une comparaison
   reelle, ce qui est le cas ici.
   ------------------------------------------------------------------ */

html.consultant-paris-theme .coaching-seo-page .compare-wrap {
    margin: 32px 0 0;
    overflow-x: auto;
}

html.consultant-paris-theme .coaching-seo-page .compare-table {
    border-collapse: collapse;
    min-width: 640px;
    width: 100%;
}

html.consultant-paris-theme .coaching-seo-page .compare-table th,
html.consultant-paris-theme .coaching-seo-page .compare-table td {
    border-bottom: 1px solid var(--cp-border);
    padding: 16px 18px 16px 0;
    text-align: left;
    vertical-align: top;
}

html.consultant-paris-theme .coaching-seo-page .compare-table thead th {
    border-bottom: 2px solid var(--cp-clay);
    color: var(--cp-heading);
    font-family: var(--font-serif-stack);
    font-size: 1.05rem;
    font-weight: 600;
    padding-bottom: 12px;
}

html.consultant-paris-theme .coaching-seo-page .compare-table tbody th {
    color: var(--cp-heading);
    font-family: var(--font-serif-stack);
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
}

html.consultant-paris-theme .coaching-seo-page .compare-table td {
    color: var(--cp-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

html.consultant-paris-theme .coaching-seo-page .compare-table tbody tr:last-child th,
html.consultant-paris-theme .coaching-seo-page .compare-table tbody tr:last-child td {
    border-bottom: 0;
}

/* ------------------------------------------------------------------
   ESCALIER DE PRIX
   ------------------------------------------------------------------ */

html.consultant-paris-theme .coaching-seo-page .pricing-ladder {
    display: grid;
    gap: 0 28px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
}

html.consultant-paris-theme .coaching-seo-page .pricing-ladder > li {
    border-top: 2px solid var(--cp-clay);
    display: grid;
    gap: 8px;
    padding: 20px 4px 24px 0;
}

html.consultant-paris-theme .coaching-seo-page .pricing-amount {
    color: var(--cp-clay-dark);
    font-family: var(--font-serif-stack);
    font-size: clamp(1.7rem, 3vw, 2.3rem);
    font-variant-numeric: lining-nums tabular-nums;
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1;
}

html.consultant-paris-theme .coaching-seo-page .pricing-tier {
    color: var(--cp-heading);
    font-family: var(--font-serif-stack);
    font-size: 1.12rem;
    line-height: 1.25;
}

html.consultant-paris-theme .coaching-seo-page .pricing-detail {
    color: var(--cp-muted);
    font-size: 0.92rem;
    line-height: 1.55;
    margin: 0;
}

html.consultant-paris-theme .coaching-seo-page .pricing-note {
    color: var(--cp-muted);
    font-size: 0.88rem;
    margin: 26px 0 0;
    max-width: 74ch;
}

/* ------------------------------------------------------------------
   AJUSTEMENTS DE COMPOSANTS HERITES
   ------------------------------------------------------------------ */

/* .keyword-category h3 heriterait de clamp(1.4rem, 2.5vw, 1.8rem),
   trop gros pour une etiquette de categorie. Passer en h4 sauterait un
   niveau de titre (h2 -> h4), on garde h3 et on reduit. */
html.consultant-paris-theme .consultant-paris-page.coaching-seo-page .keyword-category h3 {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

/* .profile-content h3 est bumpe a clamp(1.6rem, 3vw, 2.2rem), dimensionne
   pour un seul bloc narratif. Trois h3 de cette taille dans un meme
   panneau ecrasent la hierarchie. */
html.consultant-paris-theme .consultant-paris-page.coaching-seo-page .profile-content h3 {
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
}

/* Font Awesome n'est volontairement pas charge sur cette page : les icones
   du design sont purement ornementales et toutes aria-hidden. Les SVG
   inline heritent color: var(--cp-clay-dark) ou la couleur de la variante
   via currentColor, mais .icon ne definit ni taille ni fill. */
html.consultant-paris-theme .consultant-paris-page.coaching-seo-page .info-box .icon {
    display: inline-block;
    fill: currentColor;
    height: 1.15em;
    margin-right: 10px;
    vertical-align: -0.2em;
    width: 1.15em;
}

/* Mention sous le CTA final : recopie de consultant-seo-paris.css:720-724,
   scope .consultant-yvelines-page dans le fichier de base. */
html.consultant-paris-theme .coaching-seo-page .final-cta .cta-meta {
    color: color-mix(in oklch, var(--cp-surface) 62%, transparent);
    font-size: 0.82rem;
    margin: 20px 0 0;
}

/* ------------------------------------------------------------------
   RESPONSIVE — invariant 4 : chaque surcharge de grille ou d'alignement
   ecrite plus haut doit avoir son pendant ici, sinon elle ecrase le
   collapse mobile du fichier de base.
   ------------------------------------------------------------------ */

@media (max-width: 960px) {
    html.consultant-paris-theme .coaching-seo-page .pricing-ladder {
        gap: 0 22px;
    }
}

@media (max-width: 720px) {
    /* Le collapse mobile du fichier de base repasse le hero en flexbox et
       remet align-self: stretch. grid-row devient inerte, mais align-self
       doit etre rendu a la regle de base. */
    html.consultant-paris-theme .consultant-paris-page.coaching-seo-page .hero-image-container {
        align-self: stretch;
    }

    html.consultant-paris-theme .consultant-paris-page.coaching-seo-page .hero-image {
        aspect-ratio: 3 / 2;
    }

    html.consultant-paris-theme .coaching-seo-page .process-step {
        gap: 14px;
        grid-template-columns: 48px minmax(0, 1fr);
        padding: 24px 0;
    }

    html.consultant-paris-theme .coaching-seo-page .pricing-ladder {
        grid-template-columns: 1fr;
    }

    html.consultant-paris-theme .coaching-seo-page .compare-table {
        min-width: 560px;
    }
}