/* ============================================================
   nom-de-domaine.css — guide « Brancher votre nom de domaine »
   ============================================================ */

.domaine-hero {
    min-height: 46vh;

    .hero-actions {
        display: flex;
        gap: 14px;
        flex-wrap: wrap;
        justify-content: center;
        margin-top: clamp(24px, 3vw, 44px);
    }
}

/* ---------- mise en page : sommaire + contenu ---------- */
.guide {
    --ok: #5B6B2E;
    --warn: #A7772E;
    --ko: var(--color-red);
    --mono-tracking: 0.02em;
    display: grid;
    grid-template-columns: 220px minmax(0, 820px);
    gap: clamp(40px, 5vw, 90px);
    justify-content: center;
    padding: min(90px, 7vw) clamp(20px, 5vw, 80px);
    background-color: #FFF;
}

.sommaire {
    position: sticky;
    top: 100px;
    align-self: start;

    p {
        color: var(--color-red);
        font-size: 12px;
        letter-spacing: 0.14em;
        margin-bottom: 16px;
        font-variation-settings: 'wdth' 100, 'wght' 400;
    }

    ol {
        counter-reset: som;
        border-left: 1px solid var(--color-border-header);
    }

    li {
        counter-increment: som;
    }

    a {
        display: flex;
        gap: 10px;
        padding: 7px 0 7px 16px;
        margin-left: -1px;
        border-left: 2px solid transparent;
        font-size: 14px;
        line-height: 1.35;
        color: var(--color-muted);
        text-decoration: none;
        font-variation-settings: 'wdth' 100, 'wght' 300;
        transition: color 400ms var(--ease-out-expo), border-color 400ms var(--ease-out-expo);

        &::before {
            content: counter(som, decimal-leading-zero);
            font-size: 11px;
            padding-top: 2px;
            color: var(--color-gold);
            font-variant-numeric: tabular-nums;
        }

        &:hover,
        &.actif {
            color: var(--text-color-dark);
            border-left-color: var(--color-red);
        }
    }
}

/* ---------- sections du guide ---------- */
.guide-content {
    min-width: 0;
    counter-reset: etape-section;
}

.guide-section {
    padding: 0 0 min(80px, 7vw);
    margin-bottom: min(80px, 7vw);
    border-bottom: 1px solid var(--color-border-header);
    scroll-margin-top: 90px;
    counter-increment: etape-section;

    &:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }

    > h2 {
        font-size: clamp(24px, 2.4vw, 38px);
        line-height: 1.15;
        font-variation-settings: 'wdth' 85, 'wght' 350;
        margin-bottom: 22px;

        &::before {
            content: counter(etape-section, decimal-leading-zero);
            display: block;
            font-size: 13px;
            letter-spacing: 0.14em;
            color: var(--color-red);
            margin-bottom: 12px;
            font-variation-settings: 'wdth' 100, 'wght' 400;
        }
    }

    h3 {
        font-size: clamp(17px, 1.3vw, 20px);
        font-variation-settings: 'wdth' 95, 'wght' 450;
        margin: 36px 0 12px;
    }

    p,
    li {
        font-size: 16px;
        line-height: 1.7;
        font-variation-settings: 'wdth' 100, 'wght' 300;
    }

    p {
        margin-bottom: 14px;
    }

    .lead {
        font-size: clamp(17px, 1.3vw, 20px);
        color: var(--color-muted);
        margin-bottom: 26px;
    }

    strong {
        font-variation-settings: 'wdth' 100, 'wght' 500;
    }

    a:not(.btn-bar) {
        color: var(--color-red);
        text-underline-offset: 3px;
    }

    ul.puces {
        margin: 0 0 18px;

        li {
            position: relative;
            padding-left: 22px;
            margin-bottom: 8px;

            &::before {
                content: "";
                position: absolute;
                left: 2px;
                top: 0.72em;
                width: 8px;
                height: 1px;
                background-color: var(--color-red);
            }
        }
    }
}

/* valeurs techniques : même police, chasse fixe des chiffres */
.guide code,
.zone td.val,
.zone td.nom {
    font-family: inherit;
    font-variant-numeric: tabular-nums;
    font-variation-settings: 'wdth' 90, 'wght' 450;
    letter-spacing: var(--mono-tracking);
}

.guide code {
    background-color: var(--color-grey);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.94em;
    overflow-wrap: anywhere;
}

/* ---------- encarts ---------- */
.encart {
    background-color: var(--color-grey);
    border-left: 3px solid var(--color-red);
    padding: 18px 22px;
    margin: 24px 0;

    p:last-child,
    ul:last-child {
        margin-bottom: 0;
    }

    .titre {
        display: block;
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-red);
        margin-bottom: 6px;
        font-variation-settings: 'wdth' 100, 'wght' 450;
    }

    &.or {
        border-left-color: var(--color-gold);

        .titre {
            color: #8A6A36;
        }
    }

    &.sombre {
        background-color: var(--text-color-dark);
        border-left-color: var(--color-gold);
        color: #FFF;

        .titre {
            color: var(--color-gold);
        }

        code {
            background-color: rgba(255, 255, 255, 0.1);
            color: #FFF;
        }

        a {
            color: var(--color-gold);
        }
    }
}

/* ---------- en bref : trois cartes ---------- */
.bref-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin: 30px 0 10px;
}

.bref-card {
    background-color: var(--color-grey);
    padding: 26px 22px;
    border-top: 3px solid var(--text-color-dark);

    &.touche-pas {
        border-top-color: var(--color-gold);
    }

    &.nous {
        border-top-color: var(--color-red);
    }

    .qui {
        display: block;
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 10px;
        color: var(--color-muted);
    }

    h3 {
        margin: 0 0 10px;
    }

    p {
        font-size: 15px;
        margin-bottom: 0;
    }
}

/* ---------- tableau de zone DNS ---------- */
.zone-wrap {
    /* position : garde les .visually-hidden (absolus) dans la zone défilante */
    position: relative;
    overflow-x: auto;
    margin: 18px 0 22px;
    -webkit-overflow-scrolling: touch;
}

.zone {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 15px;

    caption {
        text-align: left;
        font-size: 13px;
        color: var(--color-muted);
        padding-bottom: 8px;
    }

    th,
    td {
        text-align: left;
        padding: 11px 12px;
        border-bottom: 1px solid var(--color-border-header);
        vertical-align: middle;
    }

    th {
        font-size: 12px;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        font-variation-settings: 'wdth' 90, 'wght' 450;
        background-color: var(--color-grey);
        white-space: nowrap;
    }

    td.type {
        font-variation-settings: 'wdth' 90, 'wght' 550;
        width: 70px;
    }

    td.val {
        overflow-wrap: anywhere;
    }

    td.action {
        white-space: nowrap;
        width: 1%;
        text-align: right;
    }

    &.souple {
        min-width: 0;
    }

    tr.suppr td:not(.action) {
        color: rgba(50, 40, 29, 0.45);
        text-decoration: line-through;
        text-decoration-color: var(--color-red);
    }

    tr.ajout td {
        background-color: #FBF5EA;
    }

    tr.ajout td.type {
        box-shadow: inset 3px 0 0 var(--color-gold);
    }
}

.pastille {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-variation-settings: 'wdth' 90, 'wght' 500;
    background-color: var(--color-grey);
    color: var(--color-muted);
    text-decoration: none;

    &.p-ajout {
        background-color: var(--text-color-dark);
        color: #FFF;
    }

    &.p-modif {
        background-color: var(--color-gold);
        color: var(--text-color-dark);
    }

    &.p-suppr {
        background-color: #F3E4E4;
        color: var(--color-red);
    }
}

/* bouton « copier » */
.copier {
    appearance: none;
    border: 1px solid var(--color-border-header);
    background: #FFF;
    color: var(--text-color-dark);
    font: inherit;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color 400ms var(--ease-out-expo), background-color 400ms var(--ease-out-expo);

    &:hover {
        border-color: var(--text-color-dark);
    }

    &.copie {
        background-color: var(--text-color-dark);
        border-color: var(--text-color-dark);
        color: #FFF;
    }
}

/* ---------- outil : analyse du domaine ---------- */
.outil {
    background-color: var(--text-color-dark);
    color: #FFF;
    padding: clamp(24px, 3vw, 40px);
    margin: 28px 0;
    border-radius: 3px;

    label {
        display: block;
        font-size: 12px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-gold);
        margin-bottom: 12px;
    }

    .outil-form {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }

    input {
        flex: 1 1 260px;
        min-width: 0;
        appearance: none;
        border: 1px solid rgba(255, 255, 255, 0.35);
        background: rgba(255, 255, 255, 0.06);
        color: #FFF;
        font: inherit;
        font-size: 18px;
        font-variation-settings: 'wdth' 90, 'wght' 400;
        padding: 12px 16px;
        border-radius: 3px;

        &::placeholder {
            color: rgba(255, 255, 255, 0.4);
        }

        &:focus-visible {
            outline: 2px solid var(--color-gold);
            outline-offset: 2px;
        }
    }

    .btn-bar {
        padding: 12px 26px;
    }

    .outil-note {
        font-size: 13px;
        color: rgba(255, 255, 255, 0.6);
        margin: 14px 0 0;
    }

    code {
        background-color: rgba(255, 255, 255, 0.12);
        color: #FFF;
    }

    .outil-erreur {
        color: #F2B8B8;
        font-size: 14px;
        margin: 12px 0 0;
    }
}

.resultats {
    margin-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 24px;

    .verdict {
        font-size: clamp(18px, 1.5vw, 22px);
        font-variation-settings: 'wdth' 90, 'wght' 400;
        margin-bottom: 18px;
    }

    .hebergeur-detecte {
        background-color: rgba(255, 255, 255, 0.06);
        padding: 14px 18px;
        margin-bottom: 18px;
        font-size: 15px;
        line-height: 1.6;

        a {
            color: var(--color-gold);
        }
    }

    ul {
        display: grid;
        gap: 2px;
    }

    li {
        display: grid;
        grid-template-columns: 26px 1fr;
        gap: 12px;
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 15px;
        line-height: 1.55;

        &:last-child {
            border-bottom: none;
        }

        strong {
            display: block;
            font-variation-settings: 'wdth' 100, 'wght' 450;
        }

        span.detail {
            color: rgba(255, 255, 255, 0.7);
            font-size: 14px;
            overflow-wrap: anywhere;
        }

        code {
            background-color: rgba(255, 255, 255, 0.1);
            color: #FFF;
        }

        a {
            color: var(--color-gold);
        }
    }

    .etat {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 12px;
        font-variation-settings: 'wdth' 100, 'wght' 600;
        margin-top: 1px;
        color: var(--text-color-dark);
        background-color: rgba(255, 255, 255, 0.25);

        &.ok { background-color: #B9C98A; }
        &.warn { background-color: var(--color-gold); }
        &.ko { background-color: #E59A9A; }
        &.info { background-color: rgba(255, 255, 255, 0.25); color: #FFF; }
    }

    .resultats-actions {
        display: flex;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 22px;
    }
}

.outil .chargement {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: var(--color-gold);
    border-radius: 50%;
    animation: tourne 800ms linear infinite;
    vertical-align: -2px;
    margin-right: 8px;
}

@keyframes tourne {
    to { rotate: 360deg; }
}

/* ---------- schéma « comment ça marche » ---------- */
.schema {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: stretch;
    gap: 10px;
    margin: 28px 0 30px;

    .etape-schema {
        background-color: var(--color-grey);
        padding: 22px 18px;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;

        svg {
            width: 38px;
            height: 38px;
            color: var(--color-red);
        }

        .t {
            font-variation-settings: 'wdth' 90, 'wght' 450;
            font-size: 15px;
            line-height: 1.3;
        }

        .d {
            font-size: 13px;
            color: var(--color-muted);
            line-height: 1.45;
            margin: 0;
        }

        code {
            background-color: #FFF;
        }
    }

    .fleche {
        display: grid;
        place-items: center;
        color: var(--color-gold);
        font-size: 22px;
    }
}

/* ---------- glossaire ---------- */
.glossaire {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0 24px;
    margin: 18px 0;

    dt,
    dd {
        padding: 12px 0;
        border-bottom: 1px solid var(--color-border-header);
        font-size: 15px;
        line-height: 1.6;
    }

    dt {
        font-variation-settings: 'wdth' 90, 'wght' 500;
    }

    dd {
        font-variation-settings: 'wdth' 100, 'wght' 300;
        color: var(--color-muted);
    }
}

/* ---------- tutoriels par hébergeur ---------- */
.onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 24px 0 26px;

    button {
        appearance: none;
        font: inherit;
        font-size: 14px;
        font-variation-settings: 'wdth' 90, 'wght' 400;
        padding: 9px 16px;
        border: 1px solid var(--color-border-header);
        background: #FFF;
        color: var(--text-color-dark);
        border-radius: 999px;
        cursor: pointer;
        transition: border-color 400ms var(--ease-out-expo), background-color 400ms var(--ease-out-expo), color 400ms var(--ease-out-expo);

        &:hover {
            border-color: var(--text-color-dark);
        }

        &[aria-selected="true"] {
            background-color: var(--text-color-dark);
            border-color: var(--text-color-dark);
            color: #FFF;
        }
    }
}

.tuto {
    border: 1px solid var(--color-border-header);

    /* le reset déclare article { display: block }, qui l'emporte sur [hidden] */
    &[hidden] {
        display: none;
    }

    padding: clamp(22px, 3vw, 40px);
    margin-bottom: 20px;
    scroll-margin-top: 90px;

    &:focus-visible {
        outline: 2px solid var(--color-red);
        outline-offset: 3px;
    }

    .tuto-tete {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px 20px;
        flex-wrap: wrap;
        margin-bottom: 18px;

        h3 {
            margin: 0;
            font-size: clamp(20px, 1.8vw, 26px);
            font-variation-settings: 'wdth' 85, 'wght' 400;
        }

        .reperes {
            font-size: 13px;
            color: var(--color-muted);
        }
    }

    h4 {
        font-size: 13px;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-red);
        margin: 26px 0 10px;
        font-variation-settings: 'wdth' 100, 'wght' 450;
    }

    .aide-officielle {
        font-size: 14px;
        margin: 20px 0 0;
        color: var(--color-muted);
    }
}

ol.etapes {
    counter-reset: etape;
    margin: 0 0 10px;

    > li {
        counter-increment: etape;
        position: relative;
        padding: 0 0 16px 46px;
        margin: 0;

        &::before {
            content: counter(etape);
            position: absolute;
            left: 0;
            top: 1px;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: 1px solid var(--text-color-dark);
            display: grid;
            place-items: center;
            font-size: 13px;
            font-variation-settings: 'wdth' 90, 'wght' 450;
        }

        &:not(:last-child)::after {
            content: "";
            position: absolute;
            left: 14px;
            top: 33px;
            bottom: 4px;
            width: 1px;
            background-color: var(--color-border-header);
        }
    }

}

.guide .chemin {
    font-variation-settings: 'wdth' 90, 'wght' 450;
}

/* ---------- exemples avant / après ---------- */
.exemple {
    border-top: 1px solid var(--color-border-header);
    padding-top: 30px;
    margin-top: 34px;

    &:first-of-type {
        border-top: none;
        margin-top: 10px;
        padding-top: 0;
    }

    .exemple-tete {
        display: flex;
        gap: 14px;
        align-items: baseline;
        flex-wrap: wrap;
        margin-bottom: 8px;

        h3 {
            margin: 0;
        }

        .contexte {
            font-size: 13px;
            color: var(--color-muted);
        }
    }
}

/* ---------- questions fréquentes (details natif) ---------- */
.questions {
    margin-top: 20px;

    details {
        background-color: var(--color-grey);
        margin-bottom: 8px;
        border-left: 3px solid transparent;
        transition: border-color 400ms var(--ease-out-expo);

        &[open] {
            border-left-color: var(--color-red);
        }
    }

    summary {
        list-style: none;
        cursor: pointer;
        padding: 18px 22px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        font-size: 16px;
        font-variation-settings: 'wdth' 100, 'wght' 400;

        &::-webkit-details-marker {
            display: none;
        }

        &::after {
            content: "+";
            color: var(--color-red);
            font-size: 22px;
            line-height: 1;
            transition: rotate 500ms var(--ease-out-expo);
        }
    }

    details[open] summary::after {
        rotate: 45deg;
    }

    .reponse {
        padding: 0 22px 20px;

        p,
        li {
            font-size: 15px;
            color: var(--color-muted);
        }
    }
}

/* ---------- ce que vous nous envoyez ---------- */
.a-envoyer {
    counter-reset: envoi;
    display: grid;
    gap: 12px;
    margin: 22px 0 28px;

    li {
        counter-increment: envoi;
        display: grid;
        grid-template-columns: 40px 1fr;
        gap: 14px;
        padding: 18px 20px;
        background-color: var(--color-grey);

        &::before {
            content: counter(envoi, decimal-leading-zero);
            color: var(--color-red);
            font-size: 20px;
            font-variation-settings: 'wdth' 80, 'wght' 350;
        }

        strong {
            display: block;
        }
    }
}

.message-type {
    position: relative;
    background-color: var(--color-grey);
    border: 1px dashed var(--color-gold);
    padding: 22px 24px;
    margin: 18px 0 24px;

    pre {
        font-family: inherit;
        white-space: pre-wrap;
        font-size: 15px;
        line-height: 1.65;
        font-variation-settings: 'wdth' 100, 'wght' 300;
        margin: 0;
    }

    .copier {
        position: absolute;
        top: 14px;
        right: 14px;
    }
}

.actions-fin {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1200px) {
    .guide {
        grid-template-columns: minmax(0, 820px);
    }

    .sommaire {
        position: static;
        background-color: var(--color-grey);
        padding: 22px 24px;

        ol {
            columns: 2;
            column-gap: 30px;
            border-left: none;
        }

        a {
            padding-left: 0;
            border-left: none;
            break-inside: avoid;
        }
    }
}

@media (max-width: 900px) {
    .bref-grid {
        grid-template-columns: 1fr;
    }

    .schema {
        grid-template-columns: 1fr;

        .fleche {
            rotate: 90deg;
            height: 24px;
        }
    }
}

@media (max-width: 600px) {
    .guide {
        padding: 40px 16px;
    }

    .sommaire ol {
        columns: 1;
    }

    .guide-section {
        p,
        li {
            font-size: 15px;
        }
    }

    .glossaire {
        grid-template-columns: 1fr;

        dt {
            border-bottom: none;
            padding-bottom: 0;
        }

        dd {
            padding-top: 4px;
        }
    }

    .onglets button {
        font-size: 13px;
        padding: 8px 13px;
    }

    .tuto {
        padding: 20px 16px;
    }

    ol.etapes > li {
        padding-left: 40px;
    }

    .message-type {
        padding: 50px 16px 18px;
    }

    .domaine-hero .hero-actions .btn-bar {
        width: 100%;
        max-width: 320px;
    }
}