/* SEO IA (page pilier) — surcouche de consultant-seo-paris.css.
 *
 * DEPEND DE : consultant-seo-paris.css charge AVANT (tokens --cp-* + composants
 * .hero-section, .stats-*, .info-box, .checklist, .faq-*, .final-cta,
 * .cta-button, et les 3 breakpoints).
 *
 * INVARIANTS (identiques a coaching-seo.css) :
 *   1. Tout selecteur contient .seo-ia-page. Sans exception.
 *   2. Toute SURCHARGE d'une regle de base utilise le compose SANS espace
 *      .consultant-paris-page.seo-ia-page.
 *   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.
 */

/* ------------------------------------------------------------------
   HERO — pas d'image : le conteneur de droite accueille une carte
   "reponse de moteur IA" qui illustre le sujet. On garde le cadre
   clay-soft + coin decoratif du composant de base.
   ------------------------------------------------------------------ */

html.consultant-paris-theme .consultant-paris-page.seo-ia-page .hero-image-container {
    align-self: start;
    display: flex;
    grid-row: 1 / 5;
    padding: 14px;
}

html.consultant-paris-theme .seo-ia-page .ai-answer-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}

html.consultant-paris-theme .seo-ia-page .ai-answer-head {
    align-items: center;
    border-bottom: 1px solid var(--cp-border);
    display: flex;
    gap: 8px;
    padding: 12px 16px;
}

html.consultant-paris-theme .seo-ia-page .ai-answer-dot {
    background: var(--cp-clay);
    border-radius: 50%;
    height: 7px;
    width: 7px;
}

html.consultant-paris-theme .seo-ia-page .ai-answer-head span:last-child {
    color: var(--cp-muted);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

html.consultant-paris-theme .seo-ia-page .ai-answer-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    padding: 18px 16px;
}

html.consultant-paris-theme .seo-ia-page .ai-answer-bubble {
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
    padding: 12px 14px;
}

html.consultant-paris-theme .seo-ia-page .ai-answer-bubble.is-question {
    align-self: flex-end;
    background: var(--cp-clay-soft);
    border: 1px solid var(--cp-border);
    border-radius: 8px 8px 2px 8px;
    color: var(--cp-muted);
    font-family: var(--font-serif-stack);
    font-style: italic;
    max-width: 88%;
}

html.consultant-paris-theme .seo-ia-page .ai-answer-bubble.is-answer {
    align-self: flex-start;
    background: var(--cp-accent-soft);
    border-left: 2px solid var(--cp-accent);
    border-radius: 2px 8px 8px 2px;
    color: var(--cp-text);
    max-width: 94%;
}

html.consultant-paris-theme .seo-ia-page .ai-answer-bubble.is-answer strong {
    color: var(--cp-accent);
}

html.consultant-paris-theme .seo-ia-page .ai-answer-note {
    border-top: 1px solid var(--cp-border);
    color: var(--cp-muted);
    font-size: 0.72rem;
    margin: 0;
    padding: 10px 16px;
}

/* ------------------------------------------------------------------
   INTRO — le chapo quitte la colonne de gauche : pleine largeur sous
   le hero, scinde en deux colonnes pour rester bas en hauteur.
   ------------------------------------------------------------------ */

html.consultant-paris-theme .seo-ia-page .hero-intro {
    border-top: 1px solid var(--cp-border);
    display: grid;
    gap: 16px clamp(28px, 4vw, 56px);
    grid-column: 1 / -1;
    grid-row: 6;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: clamp(28px, 4vw, 44px);
    padding-top: clamp(22px, 3vw, 32px);
}

html.consultant-paris-theme .seo-ia-page .hero-intro p {
    color: var(--cp-muted);
    font-size: 1.03rem;
    margin: 0;
}

/* ------------------------------------------------------------------
   ICONES DES INFO-BOX — recopie de coaching-seo.css (regles scopees
   .coaching-seo-page). Sans elles, les SVG inline s'affichent a leur
   taille naturelle et remplissent l'ecran.
   ------------------------------------------------------------------ */

html.consultant-paris-theme .consultant-paris-page.seo-ia-page .info-box .icon {
    display: inline-block;
    fill: currentColor;
    height: 1.15em;
    margin-right: 10px;
    vertical-align: -0.2em;
    width: 1.15em;
}

/* ------------------------------------------------------------------
   PROCESS — recopie de coaching-seo.css, dont les regles sont scopees
   .coaching-seo-page et ne sont donc pas heritees ici.
   ------------------------------------------------------------------ */

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

html.consultant-paris-theme .seo-ia-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 .seo-ia-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 .seo-ia-page .process-step h3 {
    font-size: clamp(1.28rem, 2vw, 1.55rem);
    margin-bottom: 8px;
}

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

/* ------------------------------------------------------------------
   COMPARAISON — tableau des deux definitions du SEO IA. Recopie de
   coaching-seo.css (regles scopees .coaching-seo-page dans ce fichier).
   ------------------------------------------------------------------ */

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

html.consultant-paris-theme .seo-ia-page .visually-hidden {
    clip: rect(0 0 0 0);
    border: 0;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

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

html.consultant-paris-theme .seo-ia-page .compare-table th,
html.consultant-paris-theme .seo-ia-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 .seo-ia-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 .seo-ia-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 .seo-ia-page .compare-table td {
    color: var(--cp-muted);
    font-size: 0.94rem;
    line-height: 1.55;
}

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

/* ------------------------------------------------------------------
   CATALOGUE D'ARTICLES — cards de maillage interne vers les contenus
   proches. Composant propre a la page, dans l'esprit .service-card
   (surface, filet, hover leve) et .arrondissement-card (toute la card
   est cliquable).
   ------------------------------------------------------------------ */

html.consultant-paris-theme .seo-ia-page .articles-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 32px 0 0;
}

html.consultant-paris-theme .consultant-paris-page.seo-ia-page a.article-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: 10px;
    color: var(--cp-text);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: clamp(22px, 3vw, 30px);
    text-decoration: none;
    transition: border-color 180ms ease, transform 180ms ease;
}

html.consultant-paris-theme .consultant-paris-page.seo-ia-page a.article-card:hover {
    border-color: color-mix(in oklch, var(--cp-clay) 55%, var(--cp-border));
    color: var(--cp-text);
    transform: translateY(-2px);
}

html.consultant-paris-theme .seo-ia-page .article-card-kicker {
    color: var(--cp-clay-dark);
    font-size: 0.7rem;
    font-weight: 750;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

html.consultant-paris-theme .seo-ia-page .article-card h3 {
    font-size: 1.18rem;
    line-height: 1.3;
    margin: 0;
}

html.consultant-paris-theme .seo-ia-page .article-card p {
    color: var(--cp-muted);
    flex: 1;
    font-size: 0.92rem;
    line-height: 1.6;
    margin: 0;
}

html.consultant-paris-theme .seo-ia-page .article-card-more {
    color: var(--cp-accent);
    font-size: 0.88rem;
    font-weight: 750;
}

html.consultant-paris-theme .consultant-paris-page.seo-ia-page a.article-card:hover .article-card-more {
    color: var(--cp-accent-dark);
}

/* Mention sous le CTA final : recopie de consultant-seo-paris.css,
   scope .consultant-yvelines-page dans le fichier de base. */
html.consultant-paris-theme .seo-ia-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 a son pendant ici.
   ------------------------------------------------------------------ */

@media (max-width: 960px) {
    html.consultant-paris-theme .seo-ia-page .articles-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    html.consultant-paris-theme .seo-ia-page .hero-intro {
        grid-template-columns: 1fr;
    }
}

@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.seo-ia-page .hero-image-container {
        align-self: stretch;
    }

    /* La base ordonne les enfants du hero en flex (::before 0, h1 1,
       image 2, subtitle 3, description 4, cta 5) : l'intro passe apres. */
    html.consultant-paris-theme .seo-ia-page .hero-intro {
        grid-template-columns: 1fr;
        order: 6;
    }

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

    html.consultant-paris-theme .seo-ia-page .articles-grid {
        grid-template-columns: 1fr;
    }

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