/* =========================================================
   INFO PRO 13 — CONFIGURATEUR FRONT
   MISE EN PAGE UNIQUEMENT
   ========================================================= */

.ip13-configurator-groups {
    display:flex;
    flex-direction:column;
    gap:16px;
    width:100%;
    min-width:0;
}

.ip13-config-group {
    position:relative;
    overflow:hidden;
    width:100%;
    min-width:0;
    box-sizing:border-box;
    border:1px solid rgba(0, 0, 0,.10);
    border-radius:16px;
    background:rgba(255,255,255,.025);
}

.ip13-config-group__header {
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    min-width:0;
    padding:16px 18px;
    box-sizing:border-box;
    cursor:pointer;
    user-select:none;
}

.ip13-config-group__number {
    flex:0 0 42px;
    display:flex;
    align-items:center;
    justify-content:center;
    width:42px;
    height:42px;
    border-radius:10px;
    font-size:13px;
    font-weight:800;
    line-height:1;
    box-sizing:border-box;
}

.ip13-config-group__current-image {
    flex:0 0 52px;
    width:52px;
    height:52px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
    border:1px solid rgba(0, 0, 0,.10);
    border-radius:9px;
    background:rgba(255, 255, 255,.20);
    box-sizing:border-box;
}

.ip13-config-group__current-image.is-empty {
    display:none;
}

.ip13-config-group__current-image img {
    display:block;
    width:100%;
    height:100%;
    padding:4px;
    object-fit:contain;
    box-sizing:border-box;
}

.ip13-config-group__heading {
    flex:1 1 auto;
    min-width:0;
}

.ip13-config-group__heading strong {
    display:block;
    margin:0;
    font-size:16px;
    line-height:1.35;
    overflow-wrap:anywhere;
    word-break:normal;
}

.ip13-config-group__current {
    display:block;
    margin-top:4px;
    min-width:0;
    font-size:13px;
    line-height:1.45;
    opacity:.70;
    overflow-wrap:anywhere;
    word-break:normal;
}

.ip13-config-group__action {
    flex:0 0 auto;
    padding:8px 12px;
    border:1px solid rgba(0, 0, 0,.12);
    border-radius:8px;
    font-size:12px;
    font-weight:800;
    line-height:1.2;
    white-space:nowrap;
}

.ip13-config-group__action::after {
    content:" ↓";
}

.ip13-config-group.is-open .ip13-config-group__action::after {
    content:" ↑";
}

.ip13-config-choices {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
    width:100%;
    min-width:0;
    padding:0 18px 18px;
    box-sizing:border-box;
}

.ip13-config-group:not(.is-open) .ip13-config-choices {
    display:none;
}

.ip13-config-choice {
    min-width:0;
    width:100%;
    box-sizing:border-box;
}

.ip13-config-choice__inner {
    display:grid;
    grid-template-columns:auto minmax(0, 1fr) auto;
    align-items:center;
    gap:12px;
    min-width:0;
    width:100%;
    box-sizing:border-box;
}

.ip13-config-choice__content {
    min-width:0;
}

.ip13-config-choice__content strong {
    display:block;
    margin:0;
    line-height:1.4;
    overflow-wrap:anywhere;
    word-break:normal;
}

.ip13-config-choice__content small {
    display:block;
    margin-top:5px;
    line-height:1.45;
    overflow-wrap:anywhere;
    word-break:normal;
}

.ip13-config-choice__price {
    flex:0 0 auto;
    max-width:140px;
    white-space:normal;
    text-align:right;
    font-weight:800;
    overflow-wrap:anywhere;
}

.ip13-config-choice__image {
    flex:0 0 auto;
}

.ip13-config-choice__image img {
    display:block;
    width:70px;
    height:62px;
    object-fit:contain;
}

.ip13-config-choice__check {
    flex:0 0 auto;
}

.ip13-config-choice--incompatible {
    opacity:.48;
}

.ip13-config-choice--local-incompatible {
    opacity:.5;
    cursor:not-allowed;
    pointer-events:none;
    filter:grayscale(.6);
}

.ip13-config-choice__local-compat {
    display:block;
    margin-top:7px;
    line-height:1.4;
    overflow-wrap:anywhere;
    color:#f97316;
}

.ip13-config-choice__compat {
    display:block;
    margin-top:7px;
    line-height:1.4;
    overflow-wrap:anywhere;
}

.ip13-config-error {
    border-color:rgba(255,80,80,.75);
}

/* =========================================================
   LARGEUR MOYENNE
   Évite les cartes écrasées dans la colonne principale
   ========================================================= */

@media (max-width: 1100px) {

    .ip13-config-choices {
        grid-template-columns:1fr;
    }

    .ip13-config-choice__price {
        max-width:180px;
    }
}

/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 767px) {

    .ip13-configurator-groups {
        gap:10px;
    }

    .ip13-config-group {
        border-radius:13px;
    }

    .ip13-config-group__header {
        gap:9px;
        padding:13px 12px;
        align-items:center;
    }

    .ip13-config-group__number {
        flex-basis:34px;
        width:34px;
        height:34px;
        border-radius:8px;
        font-size:11px;
    }

    .ip13-config-group__current-image {
        flex-basis:46px;
        width:46px;
        height:46px;
        border-radius:8px;
    }

    .ip13-config-group__heading strong {
        font-size:14px;
        line-height:1.3;
    }

    .ip13-config-group__current {
        margin-top:3px;
        font-size:12px;
        line-height:1.4;
    }

    .ip13-config-group__action {
        max-width:86px;
        padding:7px 8px;
        font-size:10px;
        white-space:normal;
        text-align:center;
        line-height:1.25;
    }

    .ip13-config-choices {
        grid-template-columns:1fr;
        gap:9px;
        padding:0 10px 10px;
    }

    .ip13-config-choice__inner {
        grid-template-columns:auto minmax(0, 1fr);
        gap:9px;
    }

    .ip13-config-choice__price {
        grid-column:2;
        justify-self:start;
        max-width:none;
        margin-top:-3px;
        text-align:left;
    }

    .ip13-config-choice__image img {
        width:58px;
        height:52px;
    }

    .ip13-config-choice__content strong {
        font-size:13px;
    }

    .ip13-config-choice__content small {
        font-size:11px;
    }
}

/* =========================================================
   TRES PETIT ECRAN
   ========================================================= */

@media (max-width: 420px) {

    .ip13-config-group__header {
        gap:7px;
        padding:12px 9px;
    }

    .ip13-config-group__number {
        flex-basis:31px;
        width:31px;
        height:31px;
        font-size:10px;
    }

    .ip13-config-group__current-image {
        flex-basis:40px;
        width:40px;
        height:40px;
    }

    .ip13-config-group__heading strong {
        font-size:13px;
    }

    .ip13-config-group__current {
        font-size:11px;
    }

    .ip13-config-group__action {
        max-width:72px;
        padding:6px;
        font-size:9px;
    }

    .ip13-config-choice__inner {
        gap:7px;
    }

    .ip13-config-choice__image img {
        width:52px;
        height:48px;
    }
}

/* =========================================================
   INFO PRO 13 — RESPONSIVE VERTICAL
   Présentation uniquement
   ========================================================= */

@media (max-width: 1100px) {

    .ip13-config-group__header {
        display:grid;
        grid-template-columns:auto auto minmax(0, 1fr);
        align-items:center;
    }

    .ip13-config-group__heading {
        min-width:0;
    }

    .ip13-config-group__action {
        grid-column:1 / -1;
        width:100%;
        box-sizing:border-box;
        margin-top:4px;
        text-align:center;
    }

    .ip13-config-choice__inner {
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:9px;
    }

    .ip13-config-choice__image {
        align-self:center;
    }

    .ip13-config-choice__content {
        width:100%;
    }

    .ip13-config-choice__price {
        width:100%;
        max-width:none;
        text-align:left;
    }
}

@media (max-width: 767px) {

    .ip13-config-group__header {
        display:grid;
        grid-template-columns:auto minmax(0, 1fr);
        gap:8px;
    }

    .ip13-config-group__number {
        grid-row:1;
        grid-column:1;
    }

    .ip13-config-group__current-image {
        grid-row:2;
        grid-column:1;
        align-self:start;
    }

    .ip13-config-group__heading {
        grid-row:1 / 3;
        grid-column:2;
        align-self:center;
    }

    .ip13-config-group__action {
        grid-row:3;
        grid-column:1 / -1;
        margin-top:5px;
    }

    .ip13-config-choice__inner {
        flex-direction:column;
        align-items:stretch;
        gap:8px;
    }

    .ip13-config-choice__image {
        align-self:center;
    }

    .ip13-config-choice__check {
        align-self:flex-start;
    }

    .ip13-config-choice__content {
        width:100%;
    }

    .ip13-config-choice__content strong,
    .ip13-config-choice__content small {
        width:100%;
        overflow-wrap:anywhere;
        word-break:normal;
    }

    .ip13-config-choice__price {
        width:100%;
        text-align:left;
        white-space:normal;
    }
}

@media (max-width: 420px) {

    .ip13-config-group__header {
        gap:7px;
    }

    .ip13-config-group__action {
        width:100%;
    }

    .ip13-config-choice__content strong {
        font-size:13px;
        line-height:1.4;
    }

    .ip13-config-choice__content small {
        font-size:11px;
        line-height:1.45;
    }
}


/* =========================================================
   INFO PRO 13 — GROUPES CONFIGURATEUR
   STYLE VIOLET NEON
   Mise en page uniquement
   ========================================================= */

.ip13-config-group {
    border-color:rgba(102, 137, 255, .32);
    transition:border-color .2s ease,
        box-shadow .2s ease,
        background-color .2s ease;
}

.ip13-config-group:hover {
    border-color:rgba(102, 137, 255, .55);
    background:rgba(102, 137, 255, .03);
}

.ip13-config-group.is-open {
    border-color:rgba(102, 137, 255, .70);
    box-shadow:0 0 0 1px rgba(102, 137, 255, .10),
        0 0 20px rgba(102, 137, 255, .12);
}

.ip13-config-group__number {
    border:1px solid rgba(102, 137, 255, .75);
    background:rgba(102, 137, 255, .10);
    color:#2f5fff;
    box-shadow:inset 0 0 12px rgba(102, 137, 255, .08),
        0 0 12px rgba(102, 137, 255, .10);
}

.ip13-config-group__current-image {
    border-color:rgba(102, 137, 255, .35);
    box-shadow:0 0 12px rgba(102, 137, 255, .08);
}

.ip13-config-group__action {
    border-color:rgba(102, 137, 255, .50);
    color:#2f5fff;
    background:rgba(102, 137, 255, .07);
}

.ip13-config-group.is-open .ip13-config-group__action {
    border-color:rgba(102, 137, 255, .85);
    background:rgba(102, 137, 255, .13);
    box-shadow:0 0 14px rgba(102, 137, 255, .12);
}


/* =========================================================
   INFO PRO 13 — MOBILE COMPACT
   Objectif : configurer rapidement sans défilement interminable
   Mise en page uniquement
   ========================================================= */

@media (max-width: 767px) {

    /* Groupe fermé = véritable petite ligne */
    .ip13-config-group {
        border-radius:11px;
        box-shadow:0 0 0 1px rgba(102,137,255,.05),
            0 0 12px rgba(102,137,255,.06);
    }

    .ip13-config-group__header {
        display:grid;
        grid-template-columns:28px 48px minmax(0,1fr) auto;
        grid-template-rows:auto auto;
        column-gap:9px;
        row-gap:2px;
        align-items:center;
        min-height:70px;
        padding:9px 10px;
    }

    /* Numéro */
    .ip13-config-group__number {
        grid-column:1;
        grid-row:1 / 3;
        width:28px;
        height:28px;
        flex:none;
        border-radius:7px;
        font-size:10px;
    }

    /* Petite image du composant choisi */
    .ip13-config-group__current-image {
        grid-column:2;
        grid-row:1 / 3;
        width:48px;
        height:48px;
        flex:none;
        border-radius:7px;
    }

    .ip13-config-group__current-image img {
        padding:2px;
    }

    /* Nom du groupe */
    .ip13-config-group__heading {
        grid-column:3;
        grid-row:1;
        min-width:0;
        align-self:end;
    }

    .ip13-config-group__heading strong {
        font-size:12px;
        line-height:1.25;
        white-space:normal;
        overflow-wrap:anywhere;
    }

    /* Composant actuellement sélectionné */
    .ip13-config-group__current {
        grid-column:3;
        grid-row:2;
        min-width:0;
        margin-top:1px;
        font-size:10px;
        line-height:1.25;
        opacity:.65;
        white-space:normal;
        overflow-wrap:anywhere;
        display:-webkit-box;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;
        overflow:hidden;
    }

    /* Bouton */
    .ip13-config-group__action {
        grid-column:4;
        grid-row:1 / 3;
        align-self:center;
        width:auto;
        max-width:76px;
        padding:6px 7px;
        border-radius:7px;
        font-size:9px;
        line-height:1.15;
        white-space:nowrap;
    }

    /* Options ouvertes */
    .ip13-config-choices {
        display:grid;
        grid-template-columns:1fr;
        gap:5px;
        padding:0 7px 7px;
    }

    /* Une option = ligne compacte */
    .ip13-config-choice {
        min-width:0;
    }

    .ip13-config-choice__inner {
        display:grid;
        grid-template-columns:22px minmax(0,1fr) auto;
        grid-template-rows:auto auto;
        column-gap:7px;
        row-gap:1px;
        align-items:center;
        min-height:46px;
        padding:7px 8px;
        border-radius:7px;
    }

    /* Image option */
    .ip13-config-choice__image {
        grid-column:1;
        grid-row:1 / 3;
        width:22px;
        height:30px;
        flex:none;
    }

    .ip13-config-choice__image img {
        width:22px;
        height:30px;
        padding:0;
        object-fit:contain;
    }

    /* Check */
    .ip13-config-choice__check {
        grid-column:1;
        grid-row:1 / 3;
        width:18px;
        height:18px;
        flex:none;
        font-size:9px;
    }

    /* Texte */
    .ip13-config-choice__content {
        grid-column:2;
        grid-row:1 / 3;
        min-width:0;
        width:100%;
    }

    .ip13-config-choice__content strong {
        font-size:11px;
        line-height:1.3;
        overflow-wrap:anywhere;
    }

    .ip13-config-choice__content small {
        margin-top:2px;
        font-size:9px;
        line-height:1.25;
        overflow-wrap:anywhere;
    }

    /* Prix */
    .ip13-config-choice__price {
        grid-column:3;
        grid-row:1 / 3;
        width:auto;
        max-width:70px;
        margin:0;
        padding-left:4px;
        font-size:9px;
        line-height:1.2;
        text-align:right;
        white-space:normal;
    }

    /* Compatibilité */
    .ip13-config-choice__compat {
        margin-top:3px;
        font-size:9px;
        line-height:1.25;
    }

    /* Groupe ouvert : contour plus visible */
    .ip13-config-group.is-open {
        border-color:rgba(102,137,255,.85);
        box-shadow:0 0 0 1px rgba(102,137,255,.10),
            0 0 18px rgba(102,137,255,.13);
    }
}


/* =========================================================
   TRES PETITS TELEPHONES
   ========================================================= */

@media (max-width: 420px) {

    .ip13-config-group__header {
        grid-template-columns:25px 42px minmax(0,1fr) auto;
        column-gap:7px;
        min-height:62px;
        padding:7px 8px;
    }

    .ip13-config-group__number {
        width:25px;
        height:25px;
        border-radius:6px;
        font-size:9px;
    }

    .ip13-config-group__current-image {
        width:42px;
        height:42px;
    }

    .ip13-config-group__heading strong {
        font-size:11px;
    }

    .ip13-config-group__current {
        font-size:9px;
        -webkit-line-clamp:2;
    }

    .ip13-config-group__action {
        max-width:65px;
        padding:5px 6px;
        font-size:8px;
    }

    .ip13-config-choice__inner {
        grid-template-columns:19px minmax(0,1fr) auto;
        min-height:42px;
        padding:6px;
        column-gap:6px;
    }

    .ip13-config-choice__image {
        width:19px;
        height:26px;
    }

    .ip13-config-choice__image img {
        width:19px;
        height:26px;
    }

    .ip13-config-choice__check {
        width:17px;
        height:17px;
    }

    .ip13-config-choice__content strong {
        font-size:10px;
    }

    .ip13-config-choice__content small {
        font-size:8px;
    }

    .ip13-config-choice__price {
        max-width:62px;
        font-size:8px;
    }
}


/* =========================================================
   INFO PRO 13 — CONFIGURATEUR SUR DEMANDE
   PC / TABLETTE / MOBILE
   ========================================================= */

/*
 * Par défaut :
 * le configurateur est fermé.
 * Le résumé de configuration reste visible.
 */

.ip13-configurator {
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) !important;
    gap:24px !important;
    width:100%;
}

.ip13-configurator__main {
    width:100%;
    min-width:0;
    order:2;
}

/*
 * Titre, navigation d'étapes et bouton restent toujours visibles ;
 * seul ce bloc (groupes, options, overclocking) se replie.
 */
.ip13-configurator-collapsible {
    display:none !important;
}

.ip13-config-summary {
    order:1;
    width:100%;
    min-width:0;
}

/*
 * Le bouton Personnaliser est visible
 * sur tous les écrans.
 */

.ip13-mobile-config-toggle {
    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:9px;

    width:100%;
    min-height:48px;

    margin-top:12px;
    padding:12px 18px;
    box-sizing:border-box;

    border:1px solid rgba(102,137,255,.72);
    border-radius:10px;

    background:rgba(102,137,255,.08);
    color:#2f5fff;

    font-size:12px;
    font-weight:900;
    letter-spacing:.04em;
    line-height:1.2;

    cursor:pointer;

    box-shadow:0 0 0 1px rgba(102,137,255,.05),
        0 0 18px rgba(102,137,255,.08);

    transition:border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.ip13-mobile-config-toggle:hover,
.ip13-mobile-config-toggle:focus-visible {
    border-color:rgba(102,137,255,1);
    background:rgba(102,137,255,.14);
    box-shadow:0 0 0 1px rgba(102,137,255,.10),
        0 0 24px rgba(102,137,255,.15);
}

.ip13-mobile-config-toggle:active {
    transform:translateY(1px);
}

/*
 * Quand le client demande la personnalisation,
 * on révèle le configurateur.
 */

.ip13-configurator.ip13-mobile-config-open
.ip13-configurator-collapsible {
    display:block !important;
}

/*
 * Le bouton devient le bouton de fermeture.
 */

.ip13-configurator.ip13-mobile-config-open
.ip13-mobile-config-toggle {
    background:rgba(102,137,255,.14);
    border-color:rgba(102,137,255,.9);
}

/*
 * Desktop : largeur propre et confortable.
 */

@media (min-width: 1101px) {

    .ip13-configurator {
        gap:28px !important;
    }

    .ip13-mobile-config-toggle {
        min-height:50px;
        font-size:13px;
    }
}


/*
 * Tablette.
 */

@media (min-width: 768px) and (max-width: 1100px) {

    .ip13-configurator {
        gap:20px !important;
    }

    .ip13-mobile-config-toggle {
        min-height:48px;
    }
}


/*
 * Mobile.
 */

@media (max-width: 767px) {

    .ip13-configurator {
        gap:14px !important;
    }

    .ip13-config-summary {
        padding:0;
    }

    .ip13-mobile-config-toggle {
        min-height:46px;
        margin-top:10px;
        padding:11px 14px;
        font-size:11px;
        border-radius:9px;
    }
}


/*
 * Très petit téléphone.
 */

@media (max-width: 420px) {

    .ip13-mobile-config-toggle {
        min-height:44px;
        margin-top:8px;
        padding:10px 12px;
        font-size:10px;
    }
}



/* =========================================================
   IP13 FLOW FINAL — 01 / 02 / 03
   UNIQUE BLOC CSS
   ========================================================= */


/* =========================================================
   PROGRESSION
   ========================================================= */

nav.ip13-flow-progress {
    display:block !important;

    /*
     * PAS de sticky (retiré à la demande explicite) : la barre reste
     * dans le flux normal de la page. Un seul élément DOM, déplacé
     * physiquement par pc-progress-scrollspy.js pour se replacer
     * juste au-dessus de chaque étape au fil du scroll — pas 3
     * copies redondantes, mais visuellement équivalent à ça.
     */
    position:relative !important;

    width:100% !important;

    margin:22px 0 30px !important;
    padding:8px 0 0 !important;
    padding-bottom:10px;

    box-sizing:border-box !important;

    background:var(--bg, #ffffff) !important;
    border-bottom:1px solid var(--border, rgba(0, 0, 0,.08));
}


nav.ip13-flow-progress
.ip13-flow-progress__track {
    position:relative !important;

    display:grid !important;

    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;

    width:100% !important;

    min-height:70px !important;

    box-sizing:border-box !important;
}


/* Ligne complète */

nav.ip13-flow-progress
.ip13-flow-progress__track::before {
    content:"" !important;

    position:absolute !important;

    z-index:0 !important;

    top:21px !important;

    left:16.666% !important;
    right:16.666% !important;

    height:4px !important;

    border-radius:999px !important;

    background:rgba(102, 137, 255, .22) !important;
}


/* Ligne active */

nav.ip13-flow-progress
.ip13-flow-progress__fill {
    display:block !important;

    position:absolute !important;

    z-index:1 !important;

    top:21px !important;
    left:16.666% !important;

    height:4px !important;

    border-radius:999px !important;

    background:linear-gradient(
            90deg,
            #2547d6,
            #2f5fff
        ) !important;

    box-shadow:0 0 16px
        rgba(102, 137, 255, .50) !important;
}


nav.ip13-flow-progress
.ip13-flow-progress__fill--1 {
    width:0 !important;
}


nav.ip13-flow-progress
.ip13-flow-progress__fill--2 {
    width:33.333% !important;
}


nav.ip13-flow-progress
.ip13-flow-progress__fill--3 {
    width:66.666% !important;
}


/* Chaque étape */

nav.ip13-flow-progress
a.ip13-flow-progress__step {
    position:relative !important;

    z-index:3 !important;

    display:flex !important;

    flex-direction:column !important;

    align-items:center !important;
    justify-content:flex-start !important;

    width:100% !important;

    margin:0 !important;
    padding:0 !important;

    text-align:center !important;
    text-decoration:none !important;

    background:transparent !important;

    border:0 !important;

    box-shadow:none !important;
}


/* Cercle */

nav.ip13-flow-progress
.ip13-flow-progress__number {
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    width:44px !important;
    height:44px !important;

    margin:0 0 10px !important;
    padding:0 !important;

    border:2px solid
        rgba(102,137,255,.45) !important;

    border-radius:50% !important;

    background:#ffffff !important;

    color:rgba(255,255,255,.58) !important;

    font-size:12px !important;
    font-weight:900 !important;
    line-height:1 !important;

    box-sizing:border-box !important;
}


/* Étape terminée */

nav.ip13-flow-progress
a.is-complete
.ip13-flow-progress__number {
    border-color:#6689ff !important;

    background:#5b21b6 !important;

    color:#fff !important;
}


/* Étape actuelle */

nav.ip13-flow-progress
a.is-current
.ip13-flow-progress__number {
    border-color:#dbe4ff !important;

    background:linear-gradient(
            135deg,
            #2547d6,
            #6689ff
        ) !important;

    color:#fff !important;

    box-shadow:0 0 0 5px
        rgba(102,137,255,.12),
        0 0 25px
        rgba(102,137,255,.42) !important;
}


/* Libellés */

nav.ip13-flow-progress
a.ip13-flow-progress__step strong {
    display:block !important;

    width:100% !important;
    max-width:150px !important;

    margin:0 auto !important;

    color:rgba(255,255,255,.48) !important;

    font-size:10px !important;
    font-weight:900 !important;
    line-height:1.2 !important;

    letter-spacing:.05em !important;

    text-transform:uppercase !important;
}


nav.ip13-flow-progress
a.is-current strong,

nav.ip13-flow-progress
a.is-complete strong {
    color:#151515 !important;
}


/* =========================================================
   CONFIGURATION DE BASE
   ========================================================= */

.ip13-flow-base
.pc-builder-section-title.ip13-flow-subtitle {
    margin-bottom:14px !important;
}


.ip13-flow-subtitle h3 {
    margin:0 !important;

    color:#151515 !important;

    font-size:clamp(20px, 4vw, 27px) !important;

    font-weight:850 !important;

    line-height:1.15 !important;
}


details.ip13-flow-base-details {
    display:block !important;

    width:100% !important;

    margin:0 !important;
}


details.ip13-flow-base-details
> summary {
    display:flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:9px !important;

    width:100% !important;
    min-height:48px !important;

    margin-top:12px !important;
    padding:12px 18px !important;

    border:1px solid rgba(102,137,255,.72) !important;
    border-radius:10px !important;

    background:rgba(102,137,255,.08) !important;

    color:#2f5fff !important;

    font-size:12px !important;
    font-weight:900 !important;

    letter-spacing:.04em !important;

    text-transform:uppercase !important;

    cursor:pointer !important;

    list-style:none !important;

    box-sizing:border-box !important;

    box-shadow:0 0 0 1px rgba(102,137,255,.05),
        0 0 18px rgba(102,137,255,.08) !important;

    transition:border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease,
        transform .2s ease !important;
}

details.ip13-flow-base-details
> summary:hover,
details.ip13-flow-base-details
> summary:focus-visible {
    border-color:rgba(102,137,255,1) !important;
    background:rgba(102,137,255,.14) !important;
    box-shadow:0 0 0 1px rgba(102,137,255,.10),
        0 0 24px rgba(102,137,255,.15) !important;
}


details.ip13-flow-base-details
> summary::-webkit-details-marker {
    display:none !important;
}


details.ip13-flow-base-details[open]
.ip13-flow-base-details__arrow {
    transform:rotate(180deg) !important;
}


details.ip13-flow-base-details
.pc-base-config {
    margin-top:14px !important;
}


/* =========================================================
   ACTIONS FIN ETAPE
   ========================================================= */

div.ip13-flow-actions {
    display:grid !important;

    grid-template-columns:minmax(125px, auto)
        minmax(0, 1fr) !important;

    align-items:center !important;

    gap:18px !important;

    width:100% !important;

    margin:22px 0 0 !important;

    padding:16px !important;

    border:1px solid
        rgba(102,137,255,.38) !important;

    border-radius:12px !important;

    background:linear-gradient(
            135deg,
            rgba(255, 255, 255,.98),
            rgba(255, 255, 255,.98)
        ) !important;

    box-shadow:0 12px 28px
        rgba(0,0,0,.22),
        inset 0 0 30px
        rgba(102,137,255,.035) !important;

    box-sizing:border-box !important;
}


/* Total */

.ip13-flow-actions
.ip13-flow-actions__price {
    display:flex !important;

    flex-direction:column !important;

    gap:5px !important;
}


.ip13-flow-actions
.ip13-flow-actions__price > span {
    display:block !important;

    color:rgba(255,255,255,.50) !important;

    font-size:8px !important;
    font-weight:900 !important;

    letter-spacing:.09em !important;

    text-transform:uppercase !important;
}


.ip13-flow-actions
strong.ip13-flow-actions__amount {
    display:block !important;

    color:#151515 !important;

    font-size:22px !important;
    font-weight:900 !important;
    line-height:1 !important;
}


/* Zone boutons */

.ip13-flow-actions
.ip13-flow-actions__buttons {
    display:flex !important;

    align-items:center !important;
    justify-content:flex-end !important;

    gap:10px !important;
}


/* Boutons communs */

.ip13-flow-actions
a.ip13-flow-actions__back,

.ip13-flow-actions
button.ip13-flow-actions__cart {
    display:inline-flex !important;

    align-items:center !important;
    justify-content:center !important;

    gap:6px !important;

    min-height:44px !important;

    margin:0 !important;

    padding:11px 16px !important;

    border-radius:9px !important;

    font-family:inherit !important;

    font-size:9px !important;
    font-weight:900 !important;
    line-height:1 !important;

    letter-spacing:.04em !important;

    text-transform:uppercase !important;

    text-decoration:none !important;

    box-sizing:border-box !important;
}


/* Retour résumé */

.ip13-flow-actions
a.ip13-flow-actions__back {
    border:1px solid
        rgba(0, 0, 0,.18) !important;

    background:rgba(255,255,255,.045) !important;

    color:rgba(255,255,255,.88) !important;
}


/* Ajouter au panier */

.ip13-flow-actions
button.ip13-flow-actions__cart {
    border:1px solid
        #2f5fff !important;

    background:linear-gradient(
            135deg,
            #2547d6,
            #2b52e0
        ) !important;

    color:#fff !important;

    cursor:pointer !important;

    box-shadow:0 0 18px
        rgba(102,137,255,.24) !important;
}


.ip13-flow-actions
button.ip13-flow-actions__cart:hover,

.ip13-flow-actions
button.ip13-flow-actions__cart:focus-visible {
    background:linear-gradient(
            135deg,
            #6689ff,
            #6689ff
        ) !important;

    box-shadow:0 0 25px
        rgba(102,137,255,.34) !important;
}


/* =========================================================
   ANCRES
   ========================================================= */

#etape-configuration,
#configuration-personnalisation,
#etape-overclocking,
#configuration-rapide {
    scroll-margin-top:95px !important;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    nav.ip13-flow-progress {
        margin:17px 0 26px !important;

        padding-top:5px !important;
    }


    nav.ip13-flow-progress
    .ip13-flow-progress__track {
        min-height:62px !important;
    }


    nav.ip13-flow-progress
    .ip13-flow-progress__track::before,

    nav.ip13-flow-progress
    .ip13-flow-progress__fill {
        top:17px !important;
    }


    nav.ip13-flow-progress
    .ip13-flow-progress__number {
        width:36px !important;

        height:36px !important;

        margin-bottom:8px !important;

        font-size:10px !important;
    }


    nav.ip13-flow-progress
    a.ip13-flow-progress__step strong {
        max-width:100px !important;

        font-size:8px !important;

        letter-spacing:.02em !important;
    }


    div.ip13-flow-actions {
        display:block !important;

        margin-top:18px !important;

        padding:13px !important;
    }


    .ip13-flow-actions
    .ip13-flow-actions__price {
        flex-direction:row !important;

        align-items:baseline !important;

        justify-content:space-between !important;

        width:100% !important;

        margin-bottom:12px !important;
    }


    .ip13-flow-actions
    strong.ip13-flow-actions__amount {
        font-size:21px !important;
    }


    .ip13-flow-actions
    .ip13-flow-actions__buttons {
        display:grid !important;

        grid-template-columns:minmax(0, 1fr)
            minmax(0, 1.18fr) !important;

        width:100% !important;

        gap:8px !important;
    }


    .ip13-flow-actions
    a.ip13-flow-actions__back,

    .ip13-flow-actions
    button.ip13-flow-actions__cart {
        width:100% !important;

        min-width:0 !important;

        min-height:43px !important;

        padding:10px 7px !important;

        font-size:8px !important;
    }


    details.ip13-flow-base-details
    > summary {
        padding:12px 13px !important;

        font-size:9px !important;
    }
}


/* =========================================================
   FIN IP13 FLOW FINAL
   ========================================================= */

/* =========================================================
   INFO PRO 13 — POPUP CONFIGURATEUR
   Thème noir/violet néon — modal sur TOUS les écrans.
   ========================================================= */

.ip13-popup {
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:99999;
    overflow-y:auto;
}

.ip13-popup.is-open {
    display:block;
}

.ip13-popup__overlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(255, 255, 255, 0.75);
    backdrop-filter:blur(4px);
}

.ip13-popup__wrap {
    position:relative;
    display:flex;
    justify-content:center;
    align-items:flex-start;
    min-height:100%;
    padding:40px 20px;
    box-sizing:border-box;
}

.ip13-popup__content {
    position:relative;
    background:#ffffff;
    border:1px solid rgba(102, 137, 255, 0.4);
    border-radius:20px;
    max-width:900px;
    width:100%;
    max-height:85vh;
    overflow-y:auto;
    box-shadow:0 0 30px rgba(102, 137, 255, 0.25),
        0 20px 60px rgba(0, 0, 0, 0.6);
    margin-bottom:40px;
}

.ip13-popup__close {
    position:absolute;
    top:16px;
    right:16px;
    width:40px;
    height:40px;
    min-width:40px;
    border:none;
    border-radius:8px;
    background:rgba(102, 137, 255, 0.12);
    color:#2f5fff;
    font-size:24px;
    line-height:1;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:background 0.2s ease, box-shadow 0.2s ease;
}

.ip13-popup__close:hover {
    background:rgba(102, 137, 255, 0.25);
    box-shadow:0 0 12px rgba(102, 137, 255, 0.4);
}

.ip13-popup__body {
    padding:24px;
}

/* Les choix dans la popup : grille de cartes,
   toujours visibles (contrairement au media query mobile
   qui cache .ip13-config-choices dans le groupe fermé). */
.ip13-popup .ip13-config-choices {
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
    gap:16px;
}

.ip13-popup .ip13-config-choice {
    position:relative;
    display:block;
    padding:16px 16px 60px;
    border:2px solid rgba(102, 137, 255, 0.18);
    border-radius:16px;
    background:rgba(102, 137, 255, 0.04);
    min-height:220px;
    cursor:pointer;
    transition:border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
    box-sizing:border-box;
}

.ip13-popup .ip13-config-choice:hover {
    border-color:rgba(102, 137, 255, 0.55);
    background:rgba(102, 137, 255, 0.08);
    transform:translateY(-2px);
}

.ip13-popup .ip13-config-choice:has(input:checked) {
    border-color:#6689ff;
    background:rgba(102, 137, 255, 0.14);
    box-shadow:0 0 0 1px #6689ff inset, 0 0 20px rgba(102, 137, 255, 0.35);
}

.ip13-popup .ip13-config-choice--incompatible {
    opacity:0.5;
    cursor:not-allowed;
}

.ip13-popup .ip13-config-choice--incompatible:hover {
    transform:none;
    border-color:rgba(102, 137, 255, 0.18);
    background:rgba(102, 137, 255, 0.04);
}

.ip13-popup .ip13-config-choice input {
    position:absolute;
    top:14px;
    left:14px;
    z-index:2;
    margin:0;
    width:20px;
    height:20px;
    accent-color:#6689ff;
    cursor:pointer;
}

.ip13-popup .ip13-config-choice__inner {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    width:100%;
    height:100%;
    text-align:center;
}

.ip13-popup .ip13-config-choice__image {
    order:1;
    margin-top:4px;
    width:90px;
    height:90px;
    flex:none;
}

.ip13-popup .ip13-config-choice__image img {
    width:90px;
    height:90px;
    object-fit:contain;
    border-radius:12px;
    background:#ffffff;
    border:1px solid rgba(102, 137, 255, 0.2);
    padding:8px;
    box-sizing:border-box;
}

.ip13-popup .ip13-config-choice__check {
    display:none;
}

.ip13-popup .ip13-config-choice__content {
    order:2;
}

.ip13-popup .ip13-config-choice__content strong {
    display:block;
    color:#e5e5e5;
    font-size:15px;
}

.ip13-popup .ip13-config-choice__content small {
    display:block;
    margin-top:4px;
    color:rgba(216, 180, 254, 0.85);
    font-size:12.5px;
    line-height:1.4;
}

.ip13-popup .ip13-config-choice__compat,
.ip13-popup .ip13-config-choice__local-compat {
    display:block;
    margin-top:8px;
    font-size:12px;
    color:#f97316;
}

.ip13-popup .ip13-config-choice__price {
    order:3;
    flex:none;
    margin-top:auto;
    width:100%;
    max-width:none;
    padding-left:0;
    color:#2f5fff;
    font-weight:800;
    font-size:15px;
    line-height:1.35;
    white-space:normal;
    overflow-wrap:anywhere;
    text-align:center;
}

/* CTA bas de carte, piloté en CSS pur par l'état de l'input */
.ip13-popup .ip13-config-choice::after {
    content:"Choisir";
    position:absolute;
    left:16px;
    right:16px;
    bottom:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    height:40px;
    border-radius:10px;
    background:rgba(102, 137, 255, 0.12);
    border:1px solid rgba(102, 137, 255, 0.3);
    color:#dbe4ff;
    font-weight:700;
    font-size:13px;
    letter-spacing:0.02em;
}

.ip13-popup .ip13-config-choice:hover::after {
    background:rgba(102, 137, 255, 0.22);
}

.ip13-popup .ip13-config-choice:has(input:checked)::after {
    content:"✓ Sélectionné";
    background:#6689ff;
    border-color:#6689ff;
    color:#ffffff;
}

.ip13-popup .ip13-config-choice--incompatible::after {
    content:"Indisponible";
    background:rgba(255, 255, 255, 0.05);
    border-color:rgba(0, 0, 0, 0.1);
    color:rgba(255, 255, 255, 0.4);
}

.ip13-popup .ip13-config-choice--incompatible:hover::after {
    background:rgba(255, 255, 255, 0.05);
}

/* Mobile : plein écran, scroll interne */
@media (max-width: 1023px) {
    .ip13-popup__wrap {
        padding:0;
    }

    .ip13-popup__content {
        max-width:100%;
        max-height:100dvh;
        height:100dvh;
        margin:0;
        border-radius:0;
        border:none;
        box-shadow:none;
    }

    .ip13-popup__body {
        padding:16px;
    }

    .ip13-popup .ip13-config-choices {
        grid-template-columns:1fr;
    }
}


/* =========================================================
   HERO — pages configurateur 100% sur mesure / overclocking
   (jusqu'ici sans aucun style dédié : dimensionné uniquement
   par les marges par défaut du navigateur, d'où un bloc trop
   massif et collé au résumé qui suit)
   ========================================================= */

/* /pc-sur-mesure/ : le rendu différé WP Rocket coupe les sous-menus
   au bord du header, même avec un z-index élevé. */
body.page-id-25759 .site-header {
    content-visibility:visible;
}

/* Le résumé reste dans le flux de cette page, sans recouvrir les étapes. */
body.page-id-25759 .ip13-config-summary {
    position:static;
    top:auto;
}

.ip13-builder-hero {
    padding:26px 26px 24px;
    margin-bottom:22px;
    box-sizing:border-box;
}

.ip13-builder-hero .eyebrow {
    margin:0 0 10px;
    font-size:12px;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:#2f5fff;
}

.ip13-builder-hero h1 {
    margin:0 0 14px;
    font-size:clamp(1.6rem, 5vw, 2.4rem);
    line-height:1.15;
}

.ip13-builder-hero__lead {
    margin:0;
    max-width:640px;
    font-size:14px;
    line-height:1.55;
    opacity:.78;
}

.ip13-configurator {
    margin-top:4px;
}

@media (max-width: 767px) {

    .ip13-builder-hero {
        padding:20px 18px;
        margin-bottom:16px;
        border-radius:14px;
    }

    .ip13-builder-hero h1 {
        font-size:1.5rem;
    }

    .ip13-builder-hero__lead {
        font-size:13px;
    }
}


/* =========================================================
   GROUPES — contraste au repos
   Les cartes fermées doivent rester lisibles/distinctes du
   fond, pas juste des rectangles noirs plats.
   ========================================================= */

.ip13-config-group {
    background:rgba(255, 255, 255, .035);
}

.ip13-config-group__header {
    border-radius:16px;
}


/* =========================================================
   ÉTAPE OVERCLOCKING — repliage indépendant de la
   personnalisation (attribut [hidden] natif, pas la classe
   .ip13-configurator-collapsible).
   ========================================================= */

.ip13-oc-collapsible[hidden] {
    display:none !important;
}


/* =========================================================
   VÉRIFICATION DE DISPONIBILITÉ DE DOMAINE
   ========================================================= */

.ip13-domain-check {
    margin-top:16px;
    padding:16px;
    border:1px solid rgba(102, 137, 255, .25);
    border-radius:12px;
    background:rgba(102, 137, 255, .06);
}

.ip13-domain-check[hidden] {
    display:none !important;
}

.ip13-domain-check label {
    display:block;
    margin-bottom:8px;
    color:#cbc5d3;
    font-size:.78rem;
    font-weight:700;
}

.ip13-domain-check__row {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}

.ip13-domain-check__input {
    flex:1 1 220px;
    min-width:0;
    padding:11px 14px;
    border:1px solid rgba(0, 0, 0, .12);
    border-radius:8px;
    background:rgba(255, 255, 255, .3);
    color:#151515;
    font-size:.85rem;
}

.ip13-domain-check__input:focus {
    outline:none;
    border-color:#6689ff;
}

.ip13-domain-check__btn {
    flex:0 0 auto;
    padding:11px 20px;
    border:1px solid rgba(102, 137, 255, .5);
    border-radius:8px;
    background:rgba(102, 137, 255, .15);
    color:#fff;
    font-size:.8rem;
    font-weight:700;
    cursor:pointer;
    transition:background .2s ease;
}

.ip13-domain-check__btn:hover {
    background:rgba(102, 137, 255, .3);
}

.ip13-domain-check__btn:disabled {
    opacity:.6;
    cursor:not-allowed;
}

.ip13-domain-check__status {
    margin:10px 0 0;
    font-size:.78rem;
    min-height:1em;
}

.ip13-domain-check__status.is-loading {
    color:#6b7280;
}

.ip13-domain-check__status.is-available {
    color:#34d399;
}

.ip13-domain-check__status.is-taken,
.ip13-domain-check__status.is-error {
    color:#f87171;
}


/* =========================================================
   NOTE LIBRE (E-mail professionnel, Identité visuelle)
   ========================================================= */

.ip13-config-note {
    margin:0 0 18px;
    padding:16px;
    border:1px solid rgba(102, 137, 255, .25);
    border-radius:12px;
    background:rgba(102, 137, 255, .06);
}

.ip13-config-note label {
    display:block;
    margin-bottom:8px;
    color:#cbc5d3;
    font-size:.78rem;
    font-weight:700;
}

.ip13-config-note label small {
    color:#8b8794;
    font-weight:500;
    text-transform:none;
    letter-spacing:normal;
}

.ip13-config-note__field {
    width:100%;
    padding:11px 14px;
    border:1px solid rgba(0, 0, 0, .12);
    border-radius:8px;
    background:rgba(255, 255, 255, .3);
    color:#151515;
    font-family:inherit;
    font-size:.85rem;
    line-height:1.5;
    resize:vertical;
    box-sizing:border-box;
}

.ip13-config-note__field:focus {
    outline:none;
    border-color:#6689ff;
}

.ip13-config-note__field::placeholder {
    color:#6b6775;
}


/* =========================================================
   BOUTON "VALIDER MON CHOIX" (domaine disponible confirmé)
   ========================================================= */

.ip13-domain-check__confirm {
    display:block;
    width:100%;
    margin-top:12px;
    padding:12px 20px;
    border:none;
    border-radius:8px;
    background:linear-gradient(135deg, #6689ff, #6689ff);
    color:#fff;
    font-size:.82rem;
    font-weight:800;
    cursor:pointer;
    transition:opacity .2s ease;
}

.ip13-domain-check__confirm[hidden] {
    display:none !important;
}

.ip13-domain-check__confirm:hover {
    opacity:.9;
}