/**
 * Consultant SEO — CSS dédié
 * Chargé uniquement sur la page Consultant SEO
 */


/* ============================================
   Hero 100vh — image + fondu + contenu
   (même structure que création de site)
   ============================================ */
.cseo-hero {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    background: var(--color-bg);
}

.cseo-hero__image-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    border: none;
    outline: none;
}

.cseo-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cseo-hero__fade {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%);
    pointer-events: none;
}

.cseo-hero__content {
    flex-shrink: 0;
    background: var(--color-bg);
}

.cseo-hero__title {
    font-weight: 500;
    color: var(--color-heading);
    margin-bottom: 0;
    padding-top: var(--space-10);
    padding-bottom: var(--space-4);
}

.cseo-hero__info {
    position: relative;
    padding-top: var(--space-8);
    padding-bottom: var(--space-10);
}

.cseo-hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: start;
}

.cseo-hero__text {
    grid-column: span 5;
}

.cseo-hero__text p {
    font-size: var(--16px-size);
    color: var(--color-body-light);
    line-height: 1.7;
}

.cseo-hero__btn-col {
    grid-column: 10 / -1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}


/* ============================================
   Section noire — Pattern identique à cds-round-wrap
   Le wrapper a overflow:hidden, PAS de fond.
   L'inner (.cseo-dark) a le fond noir et le contenu.
   L'overlay (.cseo-round-overlay) fade de 0.5→0.
   ============================================ */
.cseo-round-wrap {
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.cseo-round-overlay {
    opacity: 0;
    pointer-events: none;
    background-color: var(--color-bg);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.cseo-dark {
    background-color: var(--color-heading);
    color: var(--color-bg);
}

.cseo-dark--parallax {
    min-height: 100vh;
    min-height: 100svh;
    position: relative;
}

.cseo-dark--content {
    margin-top: -100vh;
}


/* ============================================
   Z-index layering — content sections scroll over
   the pinned circle text viewport (z-index: 3).
   Section ::before = dark bg at z:2 (goes UNDER).
   Section .container = content at z:4 (goes OVER).
   ============================================ */
.cseo-advantages,
.cseo-tools,
.cseo-algo,
.cseo-auto {
    position: relative;
}

.cseo-advantages::before,
.cseo-tools::before,
.cseo-algo::before,
.cseo-auto::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: var(--color-heading);
    z-index: 2;
}

.cseo-advantages > .container,
.cseo-tools > .container,
.cseo-algo > .container,
.cseo-auto > .container {
    position: relative;
    z-index: 4;
    padding-inline: var(--space-6);
}

.cseo-advantages {
    padding-top: calc(var(--col) * 1.5);
    padding-bottom: calc(var(--col) * 1);
}

.cseo-algo,
.cseo-auto {
    padding-top: var(--col);
}

.cseo-auto {
    padding-bottom: calc(var(--col) * 1.5);
}


/* ============================================
   H2 — "Ce que je fais mieux que les concurrents"
   ============================================ */
.cseo-advantages__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
}

.cseo-advantages__title {
    grid-column: 2 / span 10;
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--white);
    text-align: center;
}


/* ============================================
   Outils SEO — code editor + description (inside dark bg)
   ============================================ */

.cseo-tools__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: center;
}

.cseo-tools__editor-col {
    grid-column: 2 / span 5;
}

.cseo-tools__content-col {
    grid-column: 8 / span 4;
}

.cseo-tools__title {
    font-size: var(--34px-size);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: calc(var(--col) * 0.5);
}

.cseo-tools__desc {
    font-size: var(--16px-size);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}


/* ============================================
   Algorithme — PageRank graph animation + texte
   ============================================ */
.cseo-algo__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: center;
}

.cseo-algo__visual-col {
    grid-column: 2 / span 5;
}

.cseo-algo__content-col {
    grid-column: 8 / span 4;
}

.cseo-algo__title {
    font-size: var(--34px-size);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: calc(var(--col) * 0.5);
}

.cseo-algo__desc {
    font-size: var(--16px-size);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

.cseo-algo__visual {
    display: flex;
    justify-content: center;
    align-items: stretch;
    width: 100%;
}

.cseo-algo__svg {
    width: 100%;
    max-width: 100%;
}

.cseo-algo__edge {
    fill: none;
    stroke: rgba(255, 255, 255, 0.1);
    stroke-width: 1.5;
}

.cseo-algo__edge--strong {
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 2.5;
}

.cseo-algo__edge--weak {
    stroke: rgba(255, 255, 255, 0.05);
    stroke-width: 1;
}

.cseo-algo__particle {
    fill: var(--color-primary);
    opacity: 0.9;
}

.cseo-algo__particle--dim {
    fill: rgba(255, 255, 255, 0.3);
    opacity: 0.5;
}

.cseo-algo__node {
    fill: rgba(255, 255, 255, 0.03);
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1.5;
}

.cseo-algo__node--target {
    fill: var(--color-primary);
    stroke: none;
}

.cseo-algo__node--weak {
    stroke: rgba(255, 255, 255, 0.1);
}


.cseo-algo__label {
    fill: rgba(255, 255, 255, 0.6);
    font-size: 10px;
    font-weight: 500;
    text-anchor: middle;
    dominant-baseline: middle;
}

.cseo-algo__label--target {
    fill: var(--white);
    font-size: 12px;
    font-weight: 700;
}

.cseo-algo__label--sm {
    font-size: 9px;
}

.cseo-algo__label--val {
    fill: var(--color-primary);
    font-size: 9px;
    font-weight: 700;
}

.cseo-algo__force-label {
    fill: var(--color-primary);
    font-size: 10px;
    font-weight: 500;
    opacity: 0.8;
}


/* ============================================
   IA & Automation — terminal animation
   ============================================ */
.cseo-auto__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: center;
}

.cseo-auto__content-col {
    grid-column: 2 / span 4;
}

.cseo-auto__visual-col {
    grid-column: 7 / span 5;
}

.cseo-auto__title {
    font-size: var(--34px-size);
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: calc(var(--col) * 0.5);
}

.cseo-auto__desc {
    font-size: var(--16px-size);
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.7;
}

.cseo-terminal {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 1em;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cseo-terminal__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cseo-terminal__body {
    padding: var(--space-6) var(--space-8);
    font-family: monospace;
    font-size: var(--12px-size);
    line-height: 2;
}

.cseo-terminal__line {
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
}

.cseo-terminal__line--output {
    color: rgba(255, 255, 255, 0.5);
}

.cseo-terminal__prompt {
    color: var(--color-primary);
    margin-right: 0.5em;
    font-weight: 700;
}

.cseo-terminal__check {
    color: #28c840;
    margin-right: 0.5em;
}

@keyframes cseo-term-line {
    from { opacity: 0; transform: translateY(0.5em); }
    to   { opacity: 1; transform: translateY(0); }
}


/* --- Code editor --- */

.cseo-editor {
    background-color: rgba(0, 0, 0, 0.3);
    border-radius: 1em;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.cseo-editor__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.cseo-editor__dots {
    display: flex;
    gap: var(--space-2);
}

.cseo-editor__dot {
    width: 0.75em;
    height: 0.75em;
    border-radius: 50%;
}

.cseo-editor__dot--red    { background-color: #ff5f57; }
.cseo-editor__dot--yellow { background-color: #febc2e; }
.cseo-editor__dot--green  { background-color: #28c840; }

.cseo-editor__filename {
    font-size: var(--12px-size);
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    font-family: monospace;
}

.cseo-editor__body {
    position: relative;
    padding: var(--space-6) var(--space-8);
}

.cseo-editor__pre {
    margin: 0;
    white-space: pre;
    overflow-x: auto;
}

.cseo-editor__code {
    font-family: monospace;
    font-size: var(--14px-size);
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.85);
}

.cseo-editor__cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background-color: var(--white);
    position: absolute;
    bottom: var(--space-6);
    opacity: 0;
    animation: cseo-blink 1s step-end infinite;
}

@keyframes cseo-blink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* Syntax highlighting tokens */
.tok-keyword  { color: #c792ea; }
.tok-string   { color: #c3e88d; }
.tok-comment  { color: rgba(255, 255, 255, 0.35); font-style: italic; }
.tok-fn       { color: #82aaff; }
.tok-var      { color: #f78c6c; }
.tok-param    { color: #ffcb6b; }


/* ============================================
   Our Approach + Services SEO — accordion
   (même pattern que création-de-site)
   ============================================ */
.cseo-approach,
.cseo-services {
    background-color: var(--color-bg);
    color: var(--color-heading);
}

.cseo-services {
    padding-top: 0;
    padding-bottom: calc(var(--col) * 2.75);
}

.cds-approach__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 1.5em;
    align-items: start;
}

.cds-approach__title {
    grid-column: 1 / span 4;
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-heading);
}

.cds-accordion {
    grid-column: 6 / -1;
    position: relative;
    display: flex;
    flex-direction: column;
}

.cds-accordion__item {
    position: relative;
    overflow: hidden;
    clip-path: inset(0);
    margin-top: -1px;
}

.cds-accordion__tile {
    background-color: var(--color-primary);
    position: absolute;
    inset: -1px;
    z-index: 0;
}

[data-directional-hover-tile].cds-accordion__tile {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(-100%);
}

.cds-accordion__border {
    background-color: var(--color-border);
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
}

.cds-accordion__border-last {
    background-color: var(--color-border);
    width: 100%;
    height: 1px;
    position: relative;
    z-index: 2;
}

.cds-accordion__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 2.25em 0;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    text-align: left;
    gap: var(--space-4);
    position: relative;
    z-index: 1;
}

.cds-accordion__h3 {
    font-size: var(--20px-size);
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
}

.cds-accordion__icon {
    position: relative;
    flex-shrink: 0;
    width: 0.9em;
    height: 0.9em;
}

.cds-accordion__icon span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 1.5px;
    background-color: currentColor;
    transform: translate(-50%, -50%);
    transition: transform var(--duration-base) var(--ease-out-expo);
}

.cds-accordion__icon span:last-child {
    transform: translate(-50%, -50%) rotate(90deg);
}

.cds-accordion__item.is-open .cds-accordion__icon span:last-child {
    transform: translate(-50%, -50%) rotate(180deg);
}

.cds-accordion__item.is-open .cds-accordion__header {
    padding-bottom: var(--space-3);
}

.cds-accordion__body {
    overflow: hidden;
    max-height: 0;
    transition: max-height var(--duration-slow) var(--ease-out-expo);
    position: relative;
    z-index: 1;
}

.cds-accordion__body p {
    padding: 0 0 2.25em;
    margin: 0;
    font-size: var(--16px-size);
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-body-light);
    max-width: 40em;
}


/* ============================================
   Services SEO — cards 2×3 staggered
   ============================================ */

.cds-services__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto;
    column-gap: 1.5em;
    row-gap: 0;
    align-items: start;
}

.cds-services__title {
    grid-column: 1 / span 3;
    grid-row: 1;
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-heading);
    padding-bottom: var(--space-10);
}

/* Colonnes indépendantes (chacune flow flex) — ouvrir une card d'un côté
   n'impacte plus l'autre colonne */
.cds-services__col {
    display: flex;
    flex-direction: column;
    grid-row: 2;
    position: relative;
    z-index: 1;
}

.cds-services__col--left {
    grid-column: 2 / span 3;
}

.cds-services__col--right {
    grid-column: 5 / span 3;
    transform: translateY(-4.5em);
}

.cds-services__card {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg);
}

.cds-services__card.is-open {
    z-index: 2;
}

/* Border-bottom sur la dernière card de chaque colonne */
.cds-services__col > .cds-services__card:last-child {
    border-bottom: 1px solid var(--color-border);
}


/* ============================================
   Peel wrap (approach + services → grisé/dézoom avant testimonials)
   ============================================ */
.cds-peel-wrap {
    position: relative;
    z-index: 1;
    background-color: var(--color-bg);
    will-change: transform;
}

.cds-peel-wrap__overlay {
    position: absolute;
    inset: 0;
    background-color: var(--color-heading);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}


/* ============================================
   Testimonials — Overlapping Slider
   ============================================ */
.cds-testimonials {
    background-color: var(--color-bg);
    color: var(--color-heading);
    position: relative;
    z-index: 2;
}

.cds-testimonials > .container:first-child + .container {
    padding-top: calc(var(--col) * 0.5);
}

.cds-testimonials__title {
    font-size: var(--72px-size);
    font-weight: 500;
    line-height: 1.1;
    color: var(--color-heading);
    text-align: center;
}

.cds-testimonials .overlapping-slider__wrap {
    overflow: visible;
}

.cds-testimonials .overlapping-slider__collection {
    padding-left: calc(var(--col) + 1.5em);
}

.cds-testimonials .demo-card {
    width: calc(3 * var(--col) + 2 * 1.5em);
}


/* ============================================
   Responsive
   ============================================ */
@media screen and (max-width: 991px) {
    /* Hero H1 : on utilise la variable globale `--display-hero`
       (clamp 55→72px, cf global.css §1 :root) — c'est UN H1, il doit
       dominer visuellement les H2 de la page (Approach, Services qui
       sont à --display-lg = 3.5em ≈ 45px). Avant on était à --display-md
       qui rendait le H1 PLUS PETIT que les H2 → hiérarchie cassée.
       --display-hero garantit 55px planché sur smartphone et reste
       cohérent avec le hero de la page d'accueil. */
    .cseo-hero__title {
        font-size: var(--display-hero);
    }

    .cseo-hero__info {
        padding-top: var(--space-6);
        padding-bottom: var(--space-8);
    }

    .cseo-hero__text {
        grid-column: span 8;
    }

    .cseo-hero__btn-col {
        grid-column: span 4;
    }

    /* `minmax(0, 1fr)` au lieu de `1fr` : sans ça, la grid track peut
       prendre la min-content width (= largeur de la ligne de code la
       plus longue du <pre white-space:pre>), ce qui fait DÉBORDER les
       editors et terminals hors viewport mobile. `minmax(0, *)` force
       la track à pouvoir shrinker à 0, le scroll interne du <pre>
       (overflow-x:auto) reprend alors son rôle normal. */
    .cseo-tools__grid,
    .cseo-algo__grid,
    .cseo-auto__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-12);
    }

    .cseo-tools__editor-col,
    .cseo-tools__content-col,
    .cseo-algo__visual-col,
    .cseo-algo__content-col,
    .cseo-auto__content-col,
    .cseo-auto__visual-col {
        grid-column: span 1;
        /* Double sécurité : empêche l'enfant <pre> de pousser la largeur
           du col au-delà du parent (cas où le contenu min-content >
           track size, peut arriver sur certains UA mobiles). */
        min-width: 0;
    }

    /* Le widget editor / terminal lui-même : on le contraint au 100%
       du col qui le contient. Le <pre> interne gère son propre scroll
       horizontal via `overflow-x: auto` (.cseo-editor__pre). */
    .cseo-editor,
    .cseo-terminal {
        max-width: 100%;
        min-width: 0;
    }

    .cseo-algo__visual-col {
        order: -1;
    }

    .cds-approach__grid {
        grid-template-columns: 1fr;
    }

    .cds-approach__title {
        grid-column: span 1;
    }

    .cds-accordion {
        grid-column: span 1;
    }

    .cds-services__grid {
        grid-template-columns: 1fr;
    }

    .cds-services__title {
        grid-column: span 1;
    }

    .cds-services__col,
    .cds-services__col--left,
    .cds-services__col--right {
        grid-column: span 1;
        grid-row: auto;
        transform: none;
    }

    /* Testimonials : title 72px desktop → display-md scale fluide.
       Le slider overlapping garde la structure flex/grid native, on ajuste
       juste le padding-left (col mobile = trop étroit) et la largeur des
       cards (var(--col) shrinké donne 30vw → cards trop petites). */
    .cds-testimonials__title {
        font-size: var(--display-md);
        line-height: 1.05;
    }

    .cds-testimonials .overlapping-slider__collection {
        padding-left: var(--space-4);
    }

    .cds-testimonials .demo-card {
        width: 78vw;
    }

    /* Section "Approche" / accordéon : title qui était en var(--72px-size)
       côté CDS desktop. Sur tablette/mobile on tape dans display-lg. */
    .cds-approach__title,
    .cds-services__title {
        font-size: var(--display-lg);
        line-height: 1.05;
    }

    .cds-accordion__h3 {
        font-size: var(--18px-size);
    }

    /* H2 "Ce que je fais mieux que les concurrents" (section noire) :
       - desktop : `var(--72px-size)` + `grid-column: 2 / span 10` (centré
         sur la grille 12-cols)
       - mobile : 72px tape trop fort sur 390px viewport, et le décalage
         2/span 10 fait apparaître le titre comme "tassé" à droite parce
         que la 1ʳᵉ col est vide. On bascule pleine largeur + display-md. */
    .cseo-advantages__title {
        grid-column: 1 / -1;
        font-size: var(--display-md);
        line-height: 1.05;
    }
}

@media screen and (max-width: 767px) {
    .cseo-hero__grid {
        grid-template-columns: 1fr;
    }

    .cseo-hero__text {
        grid-column: span 1;
    }

    .cseo-hero__btn-col {
        grid-column: span 1;
        justify-content: flex-start;
    }

    .cds-testimonials__title,
    .cds-approach__title,
    .cds-services__title {
        font-size: var(--display-md);
    }
}


/* ============================================
   Mobile portrait (≤ 479px) — overrides très petits écrans
   Aligné sur creation-de-site.css §"Mobile portrait" pour garder une
   cohérence visuelle entre les deux pages (mêmes templates hero).
   ============================================ */
@media screen and (max-width: 479px) {

    /* `.cseo-hero__title` reste sur `--display-hero` (clamp 55-72px) :
       le min du clamp (55px) garantit que le H1 reste imposant même
       sur smartphone très étroit. Pas besoin d'override ici. */

    .cds-testimonials__title {
        font-size: var(--display-sm);
    }
}