/*
Theme Name: Blocksy Child
Template: blocksy
Version: 1.0
Description: Thème enfant DevSoLab
Author: Soane Gassir
*/

/* ========================================
   DEVSoLab — PALETTE
   Bleu nuit : #17172A
   Violet    : #7D4B92
   Jaune     : #FACE89
   Rose      : #FC6189
   Corail    : #F7B085
======================================== */

/* ========================================
   1. HERO — COMPARATEUR CODE / SITE
======================================== */

h1,
h2,
.devso-demo-title{
    font-family:"Cooper Black","Cooper Std Black",serif;
    font-weight:400;
    letter-spacing:-.02em;
}

.devso-showcase{
    width:min(1200px,90%);
    margin:80px auto;
    margin-bottom:120px;
}

.devso-browser{
    overflow:hidden;
    border:1px solid rgba(255,255,255,.08);
    border-radius:18px;
    background:#17172A;
    box-shadow:
        0 55px 70px rgba(23,23,42,.22),
        0 28px 38px rgba(23,23,42,.18),
        0 10px 18px rgba(23,23,42,.12),
        0 0 28px rgba(125,75,146,.12),
        0 0 42px rgba(252,97,137,.08);   
}

@keyframes devso-browser-float{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-7px);}
}

.devso-browser-bar{
    height:42px;
    display:flex;
    align-items:center;
    padding:0 18px;
    background:#111722;
}

.devso-browser-dots{
    width:13px;
    height:13px;
    margin:0!important;
    border-radius:50%;
    background:#ff605c;
    box-shadow:22px 0 #ffbd44,44px 0 #00ca4e;
}

.devso-screen{
    --split:50%;
    position:relative!important;
    height:550px;
    min-height:0!important;
    overflow:hidden;
}

.devso-site-preview{
    position:absolute!important;
    inset:0!important;
    z-index:1;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
}

.devso-site-preview img{
    display:block;
    width:100%!important;
    height:100%!important;
    object-fit:cover;
    object-position:center top;
}

.devso-code{
    position:absolute!important;
    inset:0!important;
    z-index:2;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:32px 38px 32px 72px;
    box-sizing:border-box;
    overflow:hidden;
    background:#111722;
    color:#C9CED8;
    font-family:"Courier New",monospace;
    font-size:16px;
    line-height:1.55;
    counter-reset:code-line;
    clip-path:inset(0 100% 0 0);
    transition:clip-path 1.1s cubic-bezier(.77,0,.18,1);
}

.devso-code p{
    position:relative;
    margin:0 0 8px;
    white-space:nowrap;
    counter-increment:code-line;
}

.devso-code p::before{
    content:counter(code-line,decimal-leading-zero);
    position:absolute;
    left:-48px;
    width:28px;
    text-align:right;
    color:#667080;
    font-size:14px;
}

.code-yellow{
    color:#FACE89;
    font-weight:600;
}

.code-pink{
    color:#FC6189;
    font-weight:600;
}

.code-purple{
    color:#B98AD3;
    font-weight:600;
}

.devso-code .code-comment{
    color:#667080;
}

.devso-code .code-indent{
    padding-left:20px;
}

.devso-code .code-values-start{
    margin-top:22px;
}

.devso-code .code-end-comment{
    margin-top:22px;
}

.devso-screen.is-ready .devso-code{
    clip-path:inset(0 50% 0 0);
}

.devso-screen.is-interactive .devso-code{
    clip-path:inset(0 calc(100% - var(--split)) 0 0);
    transition:none;
}

.devso-slider-handle{
    position:absolute!important;
    z-index:5;
    top:50%;
    left:100%;
    width:46px!important;
    height:46px!important;
    min-height:46px!important;
    margin:0!important;
    padding:0!important;
    border-radius:50%;
    background:#fff;
    box-shadow:0 4px 20px rgba(0,0,0,.18);
    transform:translate(-50%,-50%);
    cursor:ew-resize;
    touch-action:none;
    transition:left 1.1s cubic-bezier(.77,0,.18,1);
}

.devso-screen.is-ready .devso-slider-handle{
    left:50%;
}

.devso-screen.is-interactive .devso-slider-handle{
    left:var(--split);
    transition:none;
}

.devso-slider-handle::before{
    content:"‹ ›";
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#17172A;
    font-size:23px;
    font-weight:700;
}

.devso-slider-handle::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    z-index:-1;
    width:2px;
    height:550px;

    background:linear-gradient(
        to bottom,
        #FC6189 0,
        #FC6189 calc(50% - 27px),
        transparent calc(50% - 27px),
        transparent calc(50% + 27px),
        #FC6189 calc(50% + 27px),
        #FC6189 100%
    );

    transform:translate(-50%,-50%);
}

.devso-hero-intro{
    width:min(800px,90%);
    margin:90px auto 45px;
    text-align:center;
}

.devso-hero-title{
    margin:0;
    color:#17172A;
    font-size:clamp(2.7rem,3.5vw,4.8rem);
    line-height:1.2;
    font-weight:800;
}

.devso-hero-text{
    margin:20px auto 0;
    color:#555568;
    font-size:1.15rem;
}

/* ========================================
   NAVBAR - BOUTONS 
======================================== */
#header .menu{
    display:flex;
    align-items:center;
    gap:18px;
    overflow:visible!important;
}
#header .menu > li{
    padding:6px 0;
    overflow:visible!important;
}
#header .menu > li > a{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:40px;
    margin:0!important;
    padding:10px 20px!important;
    border:1px solid rgba(255,255,255,.14);
    border-radius:14px;
    background:rgba(10,10,22,.18);
    color:#F7F3ED!important;
    box-shadow:none;
    font-weight:700;
    transition:background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease;
}
@media(hover:hover) and (pointer:fine){
    #header .menu > li > a:hover{
        background:rgba(255,255,255,.05);
        border-color:rgba(250,206,137,.45);
        color:#FACE89!important;
    }
}
#header .menu > li.current-menu-item > a{
    background:linear-gradient(135deg,#FFE3A2,#FACE89);
    border-color:#FACE89;
    color:#17172A!important;
    box-shadow:0 0 22px rgba(250,206,137,.18);
}
#header .menu > li > a:focus-visible{
    outline:2px solid #FACE89;
    outline-offset:4px;
}
#header .menu > li > a::before,
#header .menu > li > a::after{
    display:none!important;
}

/* ========================================
   2. PARCOURS PROJET
======================================== */

.devso-journey{
    --process-width:1280px;

    position:relative;

    width:100vw;
    max-width:none;

    margin:100px 0 0;
    margin-left:calc(50% - 50vw);

    padding:80px 0 70px;

    background:#17172A;
    color:#FFF8ED;
}

.devso-journey-eyebrow{
    margin:0 0 12px;
    color:#FACE89;
    font-size:.95rem;
    font-weight:700;
    letter-spacing:.18em;
    text-align:center;
}

.devso-journey h2{
    margin:0;
    color:#FFF8ED;
    text-align:center;
    font-size:clamp(2rem,4vw,3rem);
}

.devso-journey-intro{
    max-width:760px;
    margin:18px auto 50px;
   color:#C9CED8;
    text-align:center;
    font-size:1.15rem;
    line-height:1.6;
}

/* ========================================
   CONTENEUR DES 4 ÉTAPES
======================================== */

.devso-process{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    align-items:stretch;
    gap:18px;

    width:min(1450px,98vw)!important;
    max-width:none!important;

    position:relative;
    left:50%;

    margin-left:0!important;
    margin-right:0!important;

    transform:translateX(-50%);

    transition:
        grid-template-columns .65s cubic-bezier(.22,.61,.36,1),
        gap .35s ease;
}

/* Répartition des colonnes selon la carte réellement ouverte */
.devso-process:has(.devso-process-card:nth-child(1).is-expanded){
    grid-template-columns:minmax(0,1fr) 64px 64px 64px;
}

.devso-process:has(.devso-process-card:nth-child(2).is-expanded){
    grid-template-columns:64px minmax(0,1fr) 64px 64px;
}

.devso-process:has(.devso-process-card:nth-child(3).is-expanded){
    grid-template-columns:64px 64px minmax(0,1fr) 64px;
}

.devso-process:has(.devso-process-card:nth-child(4).is-expanded){
    grid-template-columns:64px 64px 64px minmax(0,1fr);
}

/* ========================================
   CARTE
======================================== */

.devso-process-card{
    position:relative;

    min-width:0;
    min-height:300px;

    margin:0!important;
    padding:0;

    overflow:hidden;

    background:#FFFDF9;

    border:3px solid #17172A;
    border-radius:20px;

    box-shadow:8px 8px 0 #17172A;

    cursor:pointer;

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

/* Indice visuel : la carte peut s'ouvrir */
.devso-process-card::after{
    content:"+";

    position:absolute;
    z-index:3;
    top:22px;
    right:22px;

    display:flex;
    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    border:2px solid #17172A;
    border-radius:50%;

    background:#FACE89;
    color:#17172A;

    font-size:1.45rem;
    font-weight:900;
    line-height:1;

    box-shadow:3px 3px 0 #17172A;

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

.devso-process-card.is-expanded::after{
    content:"−";
    background:#FC6189;
    color:#17172A;
    border-color:#FC6189;
    box-shadow:3px 3px 0 #FACE89;
    transform:rotate(180deg);
}

@media(hover:hover) and (pointer:fine){

    .devso-process-card:hover{
        border-color:#FC6189;
        box-shadow:10px 10px 0 #17172A;
        transform:translateY(-5px);
    }

    .devso-process-card:hover::after{
        background:#FC6189;
        transform:scale(1.08);
    }

    .devso-process-card.is-expanded:hover{
        transform:none;
    }

    .devso-process-card.is-expanded:hover::after{
        transform:rotate(180deg) scale(1.08);
    }
}

/* Bande rétro */
.devso-process-card::before{
    content:"";

    position:absolute;
    top:0;
    left:0;

    width:100%;
    height:9px;

    background:linear-gradient(
        90deg,
        #FACE89 0 25%,
        #F7B085 25% 50%,
        #FC6189 50% 75%,
        #7D4B92 75% 100%
    );
}

/* ========================================
   RÉSUMÉ TOUJOURS VISIBLE
======================================== */

.devso-process-summary{
    position:relative;
    margin:0!important;
    padding:34px 24px 30px;
}

.devso-step-number{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:54px;
    height:54px;

    margin:0 0 24px!important;

    border-radius:50%;

    background:#17172A;
    color:#FACE89;

    font-size:1.5rem;
    font-weight:800;
}

.devso-process-summary h3{
    margin:0;

    color:#17172A;

    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:1.72rem;
    font-weight:400;
    line-height:1.15;
}

.devso-step-subtitle{
    margin:8px 0 18px!important;

    color:#FC6189;

    font-size:1.1rem;
    font-weight:700;
}

.devso-process-summary>p:last-child{
    margin-bottom:0;

    color:#444455;

    font-size:1.05rem;
    line-height:1.65;
}

/* ========================================
   CONTENU DÉTAILLÉ
======================================== */

.devso-process-detail{
    max-height:0;

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

    opacity:0;
    overflow:hidden;

    transform:translateY(20px);

    transition:
        max-height .55s ease,
        opacity .35s ease,
        transform .45s ease,
        padding .45s ease;
}

.devso-process-label{
    margin:0 0 12px!important;

    color:#FACE89;

    font-size:.75rem;
    font-weight:800;
    letter-spacing:.16em;
}

.devso-process-detail h4{
    margin:0 0 12px;

    color:#FFFDF9;

    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:clamp(1.5rem,2.5vw,2.2rem);
    font-weight:400;
    line-height:1.2;
}

.devso-process-detail>p:not(.devso-process-label):not(.devso-process-note){
    color:#C9CED8;
    line-height:1.6;
}

/* ========================================
   VISUEL INTERNE
======================================== */

.devso-process-visual{
    position:relative;

    margin:26px 0 0!important;
    padding:30px;

    background:#FFF8ED;

    border-radius:14px;

    color:#17172A;

    box-shadow:10px 10px 0 rgba(252,97,137,.15);
}

.devso-process-visual h5{
    margin:0;

    color:#17172A;

    font-size:1.25rem;
}

.devso-process-visual p{
    color:#555568;
}

/* ========================================
   VISUELS DES ÉTAPES
======================================== */

/* Étape 01 : dialogue / découverte */
.devso-process-chat{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.devso-chat-bubble{
    width:fit-content;
    max-width:78%;
    margin:0!important;
    padding:11px 15px;
    border:2px solid #17172A;
    border-radius:16px;
    background:#FFFDF9;
    color:#17172A!important;
    font-size:.95rem;
    line-height:1.4;
    box-shadow:4px 4px 0 rgba(23,23,42,.12);
}

.devso-chat-bubble.is-right{
    align-self:flex-end;
    background:#FACE89;
}

.devso-chat-bubble.is-pink{
    background:#FDE3EA;
}

.devso-chat-bubble.is-client{
    align-self:flex-end;
    max-width:86%;
    background:#FDE3EA;
    border-color:#FC6189;
    font-style:italic;
}

.devso-chat-bubble.is-client::before{
    content:"Client";
    display:block;
    margin-bottom:5px;
    color:#7D4B92;
    font-size:.7rem;
    font-style:normal;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

/* Étape 02 : mini-maquette graphique */
.devso-design-board{
    position:relative;
    padding:24px;
}

.devso-design-sheet{
    position:relative;
    margin:0!important;
    padding:22px;
    background:#FFFDF9;
    border:2px solid #17172A;
    border-radius:10px;
    box-shadow:8px 8px 0 rgba(125,75,146,.22);
    transform:rotate(-1deg);
}

.devso-design-kicker{
    margin:0 0 5px!important;
    color:#7D4B92!important;
    font-size:.7rem;
    font-weight:800;
    letter-spacing:.12em;
}

.devso-design-sheet h5{
    margin:0 0 14px;
    color:#17172A;
    font-family:Georgia,serif;
    font-size:1.2rem;
    font-weight:400;
}

.devso-design-palette{
    display:flex!important;
    gap:8px;
    margin:0 0 18px!important;
}

.devso-swatch{
    width:22px!important;
    height:22px!important;
    min-height:22px!important;
    margin:0!important;
    padding:0!important;
    border-radius:50%;
}

.devso-swatch-night{
    background:#17172A;
}

.devso-swatch-purple{
    background:#7D4B92;
}

.devso-swatch-pink{
    background:#FC6189;
}

.devso-swatch-yellow{
    background:#FACE89;
}

.devso-wireframe{
    display:grid;
    grid-template-columns:1.45fr .8fr;
    gap:18px;
    align-items:center;
    margin:0!important;
    padding:18px;
    background:#fff;
    border:1px solid #D9D2CC;
}

.devso-wireframe-copy{
    margin:0!important;
}

.devso-wire-line{
    height:7px;
    min-height:7px!important;
    margin:0 0 9px!important;
    border-radius:999px;
    background:#DED7D8;
}

.devso-wire-line-long{
    width:90%;
}

.devso-wire-line-medium{
    width:68%;
    background:#D7CBD6;
}

.devso-wire-line-short{
    width:52%;
}

.devso-wire-button{
    width:72px!important;
    height:20px!important;
    min-height:20px!important;
    margin:14px 0 0!important;
    border-radius:4px;
    background:#F4C6D2;
}

.devso-wireframe-image{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:105px;
    margin:0!important;
    background:#E8D9D5;
}

.devso-wire-symbol{
    margin:0!important;
    color:#7D4B92!important;
    font-size:2.6rem;
    line-height:1;
}

.devso-design-note{
    position:absolute;
    z-index:2;
    top:14px;
    right:-8px;
    margin:0!important;
    padding:10px 16px;
    background:#FACE89;
    color:#17172A!important;
    border:1px solid rgba(23,23,42,.1);
    box-shadow:4px 5px 0 rgba(23,23,42,.1);
    font-family:Georgia,serif;
    font-size:.9rem;
    font-style:italic;
    transform:rotate(4deg);
}

/* Étape 03 : site + autonomie */
.devso-process-site{
    display:grid;
    grid-template-columns:1.35fr .9fr;
    gap:16px;
    align-items:stretch;
}

.devso-site-window,
.devso-client-space{
    margin:0!important;
    border:2px solid #17172A;
    border-radius:12px;
    background:#FFFDF9;
    overflow:hidden;
}

.devso-site-window{
    position:relative;
    min-height:150px;
    padding:40px 18px 18px;
}

.devso-site-window::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:28px;
    background:#17172A;
}

.devso-site-window::after{
    content:"●  ●  ●";
    position:absolute;
    top:6px;
    left:12px;
    color:#FACE89;
    font-size:.7rem;
    letter-spacing:.22em;
}

.devso-site-window p{
    margin:0 0 8px!important;
    color:#17172A!important;
}

.devso-site-window p:first-child{
    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:1.15rem;
}

.devso-client-space{
    padding:18px;
    background:#17172A;
    color:#FFFDF9;
}

.devso-client-space h5{
    margin:0 0 12px;
    color:#FACE89;
    font-size:1rem;
}

.devso-client-space p{
    margin:0 0 8px!important;
    color:#FFFDF9!important;
    font-size:.86rem;
    line-height:1.4;
}

.devso-client-progress{
    height:8px;
    margin:14px 0 0!important;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            #FC6189 0 70%,
            rgba(255,255,255,.18) 70% 100%
        );
}

@media(max-width:700px){

    .devso-wireframe{
        grid-template-columns:1fr;
    }

    .devso-design-note{
        position:static;
        display:inline-block;
        margin:14px 0 0!important;
        transform:rotate(2deg);
    }

    .devso-process-site{
        grid-template-columns:1fr;
    }
}

/* ========================================
   ÉTAPE 04 — MINI DASHBOARD MAINTENANCE
======================================== */

.devso-maintenance-dashboard{
    padding:22px;
    background:#FFF8ED;
    color:#17172A;
}

.devso-maintenance-head{
    display:flex!important;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin:0 0 20px!important;
}

.devso-maintenance-head h5{
    margin:0;

    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:1.25rem;
}

.devso-maintenance-status{
    margin:0!important;

    color:#7D4B92!important;

    font-size:.72rem;
    font-weight:800;
    letter-spacing:.08em;
}

/* Deux petits panneaux */
.devso-maintenance-grid{
    display:grid;
    grid-template-columns:.8fr 1.2fr;
    gap:14px;

    margin:0!important;
}

.devso-maintenance-gauge-card,
.devso-maintenance-chart-card{
    margin:0!important;
    padding:16px;

    background:#17172A;
    color:#FFFDF9;

    border-radius:12px;
}

.devso-maintenance-label{
    margin:0 0 14px!important;

    color:#FACE89!important;

    font-size:.68rem;
    font-weight:800;
    letter-spacing:.1em;
}

/* ========================================
   JAUGE 30 JOURS
======================================== */

.devso-maintenance-gauge{
    position:relative;

    width:105px;
    height:105px;

    margin:5px auto 14px!important;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            #17172A 57%,
            transparent 58%
        ),
        conic-gradient(
            #FC6189 0 72%,
            #FACE89 72% 86%,
            rgba(255,255,255,.12) 86% 100%
        );
}

.devso-maintenance-gauge p{
    position:absolute;
    left:50%;

    width:100%;

    margin:0!important;

    color:#FFFDF9!important;
    text-align:center;

    transform:translateX(-50%);
}

.devso-maintenance-gauge p:first-child{
    top:34%;

    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:1.8rem;
    line-height:1;
}

.devso-maintenance-gauge p:last-child{
    top:56%;

    color:#C9CED8!important;

    font-size:.7rem;
    line-height:1;
    text-transform:uppercase;
    letter-spacing:.08em;
}

/* ========================================
   MINI GRAPHIQUE
======================================== */

.devso-maintenance-bars{
    display:flex!important;
    align-items:flex-end;
    gap:8px;

    height:105px;

    margin:0 0 14px!important;
    padding:0 5px 5px;

    border-bottom:1px solid rgba(255,255,255,.18);
}

.devso-maintenance-bar{
    flex:1;

    min-width:0!important;
    margin:0!important;

    border-radius:5px 5px 0 0;

    background:linear-gradient(
        to top,
        #FC6189,
        #FACE89
    );
}

.devso-maintenance-bar.bar-1{
    height:42%;
}

.devso-maintenance-bar.bar-2{
    height:67%;
}

.devso-maintenance-bar.bar-3{
    height:52%;
}

.devso-maintenance-bar.bar-4{
    height:82%;
}

.devso-maintenance-bar.bar-5{
    height:70%;
}

.devso-maintenance-small{
    margin:0!important;

    color:#C9CED8!important;

    font-size:.72rem;
    line-height:1.4;
}

/* ========================================
   KPI BAS DE CARTE
======================================== */

.devso-maintenance-kpis{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;

    margin:14px 0 0!important;
}

.devso-maintenance-kpis p{
    margin:0!important;
    padding:10px 8px;

    border:1px solid rgba(23,23,42,.15);
    border-radius:8px;

    background:#FFFDF9;

    color:#17172A!important;

    font-size:.75rem;
    font-weight:700;
    text-align:center;
}

/* ========================================
   CARTE OUVERTE
   La carte reste claire sur le fond bleu nuit.
======================================== */

.devso-process-card.is-expanded{
    background:#FFF8ED;
    color:#17172A;
    box-shadow:10px 10px 0 #7D4B92;
}

.devso-process-card.is-expanded .devso-process-summary,
.devso-process-card.is-expanded .devso-process-detail{
    width:100%;
    max-width:none!important;
    box-sizing:border-box;
}

.devso-process-card.is-expanded .devso-process-summary > *,
.devso-process-card.is-expanded .devso-process-detail > *{
    max-width:none!important;
}

.devso-process-card.is-expanded .devso-step-number{
    background:#FC6189;
    color:#17172A;
}

.devso-process-card.is-expanded .devso-process-summary h3{
    color:#17172A;
}

.devso-process-card.is-expanded .devso-step-subtitle{
    color:#FC6189;
}

.devso-process-card.is-expanded .devso-process-summary>p:last-child{
    color:#444455;
}

.devso-process-card.is-expanded .devso-process-detail{
    max-height:900px;
    padding:0 30px 32px;
    opacity:1;
    transform:translateY(0);
}

.devso-process-card.is-expanded .devso-process-label{
    color:#7D4B92;
}

.devso-process-card.is-expanded .devso-process-detail h4{
    color:#17172A;
}

.devso-process-card.is-expanded .devso-process-detail>p:not(.devso-process-label):not(.devso-process-note){
    color:#444455;
}

/* ========================================
   CARTES RÉDUITES — DOS DE LIVRE
   Le titre est positionné au centre géométrique de la tranche.
======================================== */

.devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-step-subtitle,
.devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-process-summary>p:last-child{
    display:none;
}

.devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-process-summary{
    position:relative;
    width:100%;
    height:100%;
    min-height:620px;
    margin:0!important;
    padding:0!important;
}

/* Numéro en haut de la tranche */
.devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-step-number{
    position:absolute;
    top:18px;
    left:50%;
    width:44px;
    height:44px;
    margin:0!important;
    transform:translateX(-50%);
}

/* Titre : au milieu du "livre" */
.devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-process-summary h3{
    position:absolute;
    top:76px;
    bottom:76px;
    left:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0!important;
    color:#17172A;
    font-size:1.28rem;
    line-height:1;
    writing-mode:vertical-rl;
    text-orientation:mixed;
    white-space:nowrap;
    transform:translateX(-50%) rotate(180deg);
    transform-origin:center;
}

/* Bouton + en bas de la tranche */
.devso-process.has-expanded .devso-process-card:not(.is-expanded)::after{
    top:auto;
    right:auto;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
}

/* ========================================
   ACCESSIBILITÉ
======================================== */

.devso-process-card:focus-visible{
    outline:4px solid #FC6189;
    outline-offset:5px;
}

/* ========================================
   RESPONSIVE DU PARCOURS
======================================== */

@media(max-width:980px){

    /* Sur tablette/mobile, on abandonne l'effet "dos de livre". */
    .devso-process,
    .devso-process[data-active-step="1"],
    .devso-process[data-active-step="2"],
    .devso-process[data-active-step="3"],
    .devso-process[data-active-step="4"]{
        width:min(720px,92vw)!important;
        grid-template-columns:1fr;
        gap:18px;
    }
    
    .devso-process{
    display:grid!important;
    grid-template-columns:1fr!important;
}

    .devso-process-card{
        width:100%;
        min-height:0;
    }

    .devso-process-card::after{
        top:20px;
        right:20px;
    }

    .devso-process-card.is-expanded .devso-process-detail{
        max-height:1200px;
    }

    .devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-process-summary{
        position:relative;
        height:auto;
        min-height:0;
        padding:34px 30px 30px!important;
    }

    .devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-step-number{
        position:static;
        width:54px;
        height:54px;
        margin:0 0 24px!important;
        transform:none;
    }

    .devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-process-summary h3{
        position:static;
        margin:0;
        font-size:2rem;
        line-height:1.15;
        writing-mode:horizontal-tb;
        white-space:normal;
        transform:none;
    }

    .devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-step-subtitle,
    .devso-process.has-expanded .devso-process-card:not(.is-expanded) .devso-process-summary>p:last-child{
        display:block;
    }

    .devso-process.has-expanded .devso-process-card:not(.is-expanded)::after{
        top:22px;
        right:22px;
        bottom:auto;
        left:auto;
        transform:none;
    }
}

/* ========================================
   3. CASSE-BRIQUE
======================================== */

/*
 * Le casse-brique est ancré au bas du parcours.
 * Il ne dépend donc plus de sa position exacte dans Gutenberg.
 */
.devso-pinball{
    position:relative!important;

    width:min(var(--process-width),94vw)!important;
    max-width:none!important;
    height:75px;

    margin:30px auto 0!important;

    left:auto!important;
    right:auto!important;
    bottom:auto!important;

    transform:none!important;
}

.devso-pinball-line{
    position:absolute!important;
    top:38px;
    left:0;
    right:0;

    height:2px!important;
    min-height:2px!important;

    margin:0!important;

    background:linear-gradient(
        90deg,
        rgba(250,206,137,.12),
        rgba(252,97,137,.55),
        rgba(125,75,146,.6),
        rgba(250,206,137,.12)
    );
}

.devso-pinball-ball{
    position:absolute!important;
    z-index:4;

    left:var(--ball-x);
    top:38px;

    width:22px!important;
    height:22px!important;
    min-height:22px!important;

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

    border-radius:50%;

    background:linear-gradient(
        135deg,
        #FACE89,
        #FC6189 55%,
        #7D4B92
    );

    box-shadow:
        0 0 0 4px #FFFDF9,
        0 6px 18px rgba(23,23,42,.25);

    transform:translate(
        -50%,
        calc(-50% + var(--ball-y))
    );

    pointer-events:none;
}

.devso-pinball::after{
    content:"";

    position:absolute;
    z-index:3;

    left:var(--ball-x);
    top:62px;

    width:90px;
    height:14px;

    border:3px solid #17172A;
    border-radius:100px;

    background:linear-gradient(
        90deg,
        #FACE89,
        #F7B085,
        #FC6189
    );

    box-shadow:0 6px 14px rgba(23,23,42,.18);

    transform:translateX(-50%);

    transition:left .05s linear;
}

/* ========================================
   4. MASCOTTE MÉDUSE
======================================== */

.devso-jellyfish{
    position:fixed!important;
    z-index:10;
    top:5%!important;
    left:150px!important;
    right:auto!important;
    width:60px!important;
    margin:0!important;
    opacity:1;
    pointer-events:none;
    transform:translateY(var(--jelly-y,0px));
    transition:
        opacity .35s ease,
        transform .1s linear,
        filter .35s ease;
}

.devso-jellyfish.is-hidden{
    opacity:0;
}

.devso-jellyfish img{
    animation:
        devso-jelly-float 4.5s ease-in-out infinite;

    transform-origin:center;
}

@keyframes devso-jelly-float{

    0%,
    100%{
        transform:
            translateY(0)
            rotate(-2deg);
    }

    50%{
        transform:
            translateY(-12px)
            rotate(2deg);
    }
}

/* ========================================
   5. APPARITION AU SCROLL
======================================== */

/*
 * Sans JavaScript :
 * tout reste visible normalement.
 *
 * Le masquage n'est activé que lorsque
 * le JS ajoute .devso-reveal-ready au body.
 */
.devso-reveal-ready .devso-showcase,
.devso-reveal-ready .devso-journey-eyebrow,
.devso-reveal-ready .devso-journey h2,
.devso-reveal-ready .devso-journey-intro,
.devso-reveal-ready .devso-process-card,
.devso-reveal-ready .devso-pinball,
.devso-reveal-ready .devso-demo,
.devso-reveal-ready .devso-contact{
    opacity:0;

    transform:translateY(32px);

    transition:
        opacity .7s ease,
        transform .7s cubic-bezier(.22,.61,.36,1);
}

/* Les cartes apparaissent légèrement en cascade */
.devso-reveal-ready .devso-process-card{
    transition-delay:var(--reveal-delay,0ms);
}

/* État visible */
.devso-reveal-ready .devso-showcase.is-visible,
.devso-reveal-ready .devso-journey-eyebrow.is-visible,
.devso-reveal-ready .devso-journey h2.is-visible,
.devso-reveal-ready .devso-journey-intro.is-visible,
.devso-reveal-ready .devso-process-card.is-visible,
.devso-reveal-ready .devso-pinball.is-visible,
.devso-reveal-ready .devso-demo.is-visible,
.devso-reveal-ready .devso-contact.is-visible{
    opacity:1;
    transform:translateY(0);
}

/* ========================================
   6. DÉMO / CASSETTE
======================================== */

.devso-demo{
    width:min(760px,84%);
    margin:80px auto 50px;
    text-align:center;
}

.devso-demo-title::before{
    content:"";

    position:absolute;

    top:-8px;
    left:50%;

    width:58px;
    height:15px;

    background:rgba(255,255,255,.72);

    transform:
        translateX(-50%)
        rotate(1deg);
}

.devso-demo-title::after{
    content:"";

    position:absolute;

    right:-2px;
    bottom:-2px;

    width:22px;
    height:22px;

    background:
        linear-gradient(
            135deg,
            transparent 0 48%,
            rgba(23,23,42,.08) 49% 100%
        );

    pointer-events:none;
}

.devso-demo-title{
    position:relative;

    width:fit-content;

    margin:0 auto 26px!important;
    padding:18px 26px;

    background:#FACE89;
    color:#17172A;

    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:clamp(1.7rem,2.6vw,2.4rem);
    font-weight:400;
    line-height:1.1;

    box-shadow:
        6px 7px 0 rgba(23,23,42,.12);

    transform:rotate(-2deg);
}

.devso-demo-trust{
    max-width:520px;

    margin:-14px auto 28px!important;

    color:#7D4B92;

    font-size:.9rem;
    font-weight:800;
    line-height:1.45;

    text-align:center;
}

.devso-cassette{
    position:relative;
    padding:24px 28px 22px;
    overflow:hidden;
    background:#17172A;
    border:3px solid #17172A;
    border-radius:22px;
    box-shadow:8px 8px 0 #7D4B92;
}

.devso-cassette::before,
.devso-cassette::after{
    content:"";
    position:absolute;
    width:18px;
    height:18px;
    border:3px solid #17172A;
    border-radius:50%;
    background:#FFFDF9;
}

.devso-cassette::before{
    top:18px;
    left:22px;
}

.devso-cassette::after{
    top:18px;
    right:22px;
}

.devso-cassette-label{
    position:relative;
    padding:24px 28px 22px;
    background:#FACE89;
    border:3px solid #17172A;
    border-radius:18px;
    text-align:center;
    transition:transform .2s ease;
}

.devso-cassette-label::before{
    content:"";
    position:absolute;
    top:12px;
    left:5%;
    width:90%;
    height:6px;
    border-radius:100px;
    background:linear-gradient(
        90deg,
        #FC6189 0 30%,
        #F7B085 30% 55%,
        #7D4B92 55% 80%,
        #17172A 80% 100%
    );
}

.devso-cassette-small{
    margin:0 0 12px!important;
    color:#7D4B92;
    font-size:.9rem;
    font-weight:800;
    letter-spacing:.14em;
}

.devso-cassette-label h3{
    margin:0;
    color:#17172A;
    font-size:1.8rem;
    font-weight:800;
    line-height:1.2;
}

.devso-cassette-reels{
    display:flex!important;
    justify-content:center;
    align-items:center;
    gap:90px;
    width:100%;
    margin:14px auto 6px!important;
}

.devso-reel{
    position:relative;

    flex:0 0 68px;

    width:68px!important;
    min-width:68px!important;
    max-width:68px!important;

    height:68px!important;
    min-height:68px!important;
    max-height:68px!important;

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

    border:6px solid #17172A;
    border-radius:50%;

    background:#FFFDF9;

    box-sizing:border-box;

    box-shadow:
        inset 0 0 0 7px #FC6189;

    animation:
        devso-reel-spin 12s linear infinite;
}

.devso-reel::before{
    content:"";
    position:absolute;
    inset:15px;
    border-radius:50%;
    background:conic-gradient(
        #17172A 0 12%,
        transparent 12% 25%,
        #17172A 25% 37%,
        transparent 37% 50%,
        #17172A 50% 62%,
        transparent 62% 75%,
        #17172A 75% 87%,
        transparent 87% 100%
    );
}

.devso-reel::after{
    content:"";
    position:absolute;
    top:50%;
    left:50%;
    width:20px;
    height:20px;
    border-radius:50%;
    background:#17172A;
    transform:translate(-50%,-50%);
}

.devso-reel-right{
    animation-direction:reverse;
}

@keyframes devso-reel-spin{
    to{
        transform:rotate(360deg);
    }
}

.devso-demo-buttons{
    margin:18px 0 0!important;
}

.devso-demo-start .wp-block-button__link{
    min-width:145px;
    padding:12px 22px;
    background:#FC6189;
    color:#17172A;
    border:3px solid #17172A;
    border-radius:12px;
    box-shadow:6px 6px 0 #FACE89;
    font-size:1rem;
    font-weight:900;
    letter-spacing:.08em;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.devso-demo-start .wp-block-button__link:hover{
    background:#F7B085;
    transform:translate(2px,2px);
    box-shadow:4px 4px 0 #FACE89;
}

.devso-demo-start .wp-block-button__link:active{
    transform:translate(6px,6px);
    box-shadow:0 0 0 #FACE89;
}

/* Mode lecture : les bobines accélèrent */
.devso-cassette.is-playing .devso-reel{
    animation-duration:.8s;
}

.devso-cassette.is-playing .devso-cassette-label{
    transform:scale(.995);
}

/* ========================================
   7. CONTACT
======================================== */

.devso-contact{
    width:100vw;
    max-width:none;
    margin:110px 0 0;
    margin-left:calc(50% - 50vw);
    padding:90px 0;
    background:#FFF8ED;
    color:#17172A;
}

.devso-contact-inner{
    display:grid;
    align-items:start;
    margin:0 auto!important;
}

.devso-contact-copy,
.devso-contact-panel,
.devso-contact-points,
.devso-contact-templates,
.devso-contact-actions{
    margin:0!important;
}

/* ----------------------------------------
   COLONNE GAUCHE
---------------------------------------- */

.devso-contact-eyebrow{
    margin:0 0 12px!important;
    color:#7D4B92;
    font-size:.85rem;
    font-weight:800;
    letter-spacing:.16em;
}

.devso-contact h2{
    margin:0;
    color:#17172A;
    font-size:clamp(2.2rem,4vw,3.6rem);
    line-height:1.05;
}

.devso-contact-intro{
    color:#555568;
    font-size:1.08rem;
    line-height:1.65;
}

.devso-contact-points{
    display:grid;
    gap:10px;
}

.devso-contact-point{
    position:relative;
    margin:0!important;
    padding-left:24px;
    color:#17172A;
    font-weight:700;
}

.devso-contact-point::before{
    content:"✦";
    position:absolute;
    left:0;
    color:#FC6189;
}

.devso-contact-discover{
    margin:30px 0 14px!important;
    color:#555568;
    font-size:.95rem;
    line-height:1.55;
}

.devso-contact-back-demo{
    margin:0!important;
}

.devso-contact-back-demo .wp-block-button__link{
    padding:10px 16px;
    border:2px solid #17172A;
    border-radius:10px;
    background:#FACE89;
    color:#17172A;
    box-shadow:4px 4px 0 #FC6189;
    font-weight:900;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.devso-contact-back-demo .wp-block-button__link:hover{
    background:#F7B085;
    transform:translate(2px,2px);
    box-shadow:2px 2px 0 #FC6189;
}

/* ----------------------------------------
   MACHINE RÉTRO — COQUE
---------------------------------------- */

.devso-contact-panel{
    position:relative;
    padding:40px 34px 36px;
    overflow:hidden;
    border:3px solid #0C0C18;
    border-radius:28px;
    background:
        linear-gradient(
            145deg,
            #20203A 0%,
            #17172A 55%,
            #11111F 100%
        );
    color:#FFFDF9;
    box-shadow:
        12px 14px 0 #7D4B92,
        0 24px 45px rgba(23,23,42,.18),
        inset 0 2px 0 rgba(255,255,255,.05),
        inset 0 -12px 24px rgba(0,0,0,.25);
}

.devso-contact-panel::before{
    content:"";
    position:absolute;
    top:18px;
    left:30px;
    right:30px;
    height:6px;
    border-radius:999px;
    background:
        linear-gradient(
            90deg,
            #FACE89,
            #F7B085,
            #FC6189,
            #7D4B92
        );
    box-shadow:0 0 14px rgba(252,97,137,.18);
}

.devso-contact-panel::after{
    content:"";
    position:absolute;
    right:22px;
    bottom:18px;
    width:7px;
    height:7px;
    border-radius:50%;
    background:#080810;
    box-shadow:
        -18px 0 0 #080810,
        -36px 0 0 #080810;
}

.devso-contact-status{
    margin:4px 0 8px!important;
    color:#FACE89!important;
    font-family:"Courier New",monospace;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.05em;
}

.devso-contact-help{
    margin:0 0 22px!important;
    color:#C9CED8!important;
    font-size:.92rem;
    line-height:1.55;
}

/* ----------------------------------------
   ÉCRAN CRT
---------------------------------------- */

.devso-terminal{
    margin:0;
}

.devso-terminal-screen{
    position:relative;
    margin:0 0 26px;
    padding:22px;
    overflow:hidden;
    border:5px solid #090A12;
    border-radius:18px;
    background:
        radial-gradient(
            circle at 50% 38%,
            #252A45 0%,
            #121523 58%,
            #090B12 100%
        );
    box-shadow:
        inset 0 0 30px rgba(125,75,146,.24),
        inset 0 0 70px rgba(0,0,0,.48),
        0 6px 0 rgba(0,0,0,.32);
}

.devso-terminal-screen::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    opacity:.14;
    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 3px,
            rgba(255,255,255,.08) 4px
        );
}

.devso-terminal-screen::after{
    content:"";
    position:absolute;
    top:-20%;
    left:-10%;
    width:70%;
    height:65%;
    border-radius:50%;
    pointer-events:none;
    background:
        radial-gradient(
            ellipse,
            rgba(255,255,255,.06),
            transparent 70%
        );
    transform:rotate(-12deg);
}

.devso-terminal-line,
.devso-contact-templates{
    position:relative;
    z-index:1;
}

.devso-terminal-line{
    display:flex;
    align-items:center;
    gap:8px;
    margin:0 0 18px;
    color:#FACE89;
    font-family:"Courier New",monospace;
    font-size:.84rem;
    font-weight:700;
}

.devso-terminal-prompt{
    color:#FC6189;
}

.devso-terminal-cursor{
    width:8px;
    height:16px;
    background:#FACE89;
    animation:devso-terminal-blink .9s steps(1) infinite;
}

@keyframes devso-terminal-blink{
    0%,45%{opacity:1;}
    46%,100%{opacity:0;}
}

/* ----------------------------------------
   TOUCHES CLAVIER
---------------------------------------- */

.devso-contact-templates{
    display:flex!important;
    flex-wrap:wrap;
    gap:12px;
    margin:0!important;
}

.devso-template-button{
    position:relative;
    min-height:44px;
    padding:9px 15px;
    appearance:none;
    border:2px solid #090A12;
    border-radius:7px;
    background:
        linear-gradient(
            #FFFDF9,
            #DDD4C5
        );
    color:#17172A;
    box-shadow:
        0 6px 0 #090A12,
        inset 0 2px 0 rgba(255,255,255,.9);
    font-family:"Courier New",monospace;
    font-size:.8rem;
    font-weight:900;
    line-height:1.2;
    cursor:pointer;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        background .12s ease;
}

.devso-template-button::after{
    content:"";
    position:absolute;
    inset:3px;
    border:1px solid rgba(23,23,42,.12);
    border-radius:4px;
    pointer-events:none;
}

@media(hover:hover) and (pointer:fine){
    .devso-template-button:hover{
        background:
            linear-gradient(
                #FFE8A7,
                #FACE89
            );
        transform:translateY(2px);

        box-shadow:
            0 3px 0 #090A12,
            inset 0 2px 4px rgba(0,0,0,.16);
    }
}

.devso-template-button:active,
.devso-template-button.is-selected{
    transform:translateY(5px);
    box-shadow:
        0 1px 0 #090A12,
        inset 0 2px 5px rgba(23,23,42,.22);
}

.devso-template-button.is-selected{
    background:
        linear-gradient(
            #FC7B9C,
            #FC6189
        );
}

.devso-template-button:focus-visible{
    outline:3px solid #FACE89;
    outline-offset:3px;
}

.devso-template-button[data-template="libre"]{
    letter-spacing:.04em;
    text-align:center;
}

/* ----------------------------------------
   CHAMPS
---------------------------------------- */

.devso-contact-field label{
    display:block;
    margin:0 0 7px;
    color:#FFFDF9!important;
    font-size:.84rem;
    font-weight:800;
}

.devso-contact-panel .devso-contact-field input,
.devso-contact-panel textarea.devso-contact-message{
    width:100%;
    box-sizing:border-box;
    border:2px solid #090A12!important;
    border-radius:10px;
    background:#FFFDF9!important;
    color:#17172A!important;
    -webkit-text-fill-color:#17172A!important;
    box-shadow:
        inset 0 2px 4px rgba(23,23,42,.08),
        0 5px 0 #090A12;
}

.devso-contact-panel .devso-contact-field input{
    min-height:48px;
    padding:11px 14px;
    font:inherit;
}

.devso-contact-panel textarea.devso-contact-message{
    margin:0!important;
    padding:20px;
    resize:vertical;
    caret-color:#FC6189;
    font-family:"Courier New",monospace;
    font-size:.95rem;
    line-height:1.65;
}

.devso-contact-panel textarea.devso-contact-message::placeholder{
    color:#77778A!important;
    -webkit-text-fill-color:#77778A!important;
    opacity:1;
}

.devso-contact-panel .devso-contact-field input:focus,
.devso-contact-panel textarea.devso-contact-message:focus{
    outline:none!important;
    border-color:#FACE89!important;
    background:#FFFDF9!important;
    color:#17172A!important;
    -webkit-text-fill-color:#17172A!important;
    box-shadow:
        inset 0 2px 4px rgba(23,23,42,.08),
        0 5px 0 #090A12,
        0 0 0 3px rgba(250,206,137,.18);
}

/* ----------------------------------------
   ACTIONS
---------------------------------------- */

.devso-contact-actions{
    display:flex!important;
    justify-content:space-between;
    align-items:center;
    gap:16px;
}

.devso-contact-clear,
.devso-contact-submit{
    position:relative;
    min-height:46px;
    padding:10px 18px;
    appearance:none;
    border:2px solid #090A12;
    border-radius:7px;
    font-family:"Courier New",monospace;
    font-weight:900;
    cursor:pointer;
    transition:
        transform .12s ease,
        box-shadow .12s ease,
        background .12s ease;
}

.devso-contact-clear{
    background:
        linear-gradient(
            #FFFDF9,
            #DDD4C5
        );
    color:#17172A;
    box-shadow:0 6px 0 #090A12;
}

.devso-contact-submit{
    background:
        linear-gradient(
            #FC7B9C,
            #FC6189
        );
    color:#17172A;
    box-shadow:0 6px 0 #FACE89;
}

@media(hover:hover) and (pointer:fine){
    .devso-contact-clear:hover{
        background:
            linear-gradient(
                #FFE8A7,
                #FACE89
            );
    }

    .devso-contact-submit:hover{
        background:
            linear-gradient(
                #F7C09B,
                #F7B085
            );
    }
}

.devso-contact-clear:active,
.devso-contact-submit:active{
    transform:translateY(5px);
    box-shadow:0 1px 0 #090A12;
}

.devso-contact-clear:focus-visible,
.devso-contact-submit:focus-visible{
    outline:3px solid #FACE89;
    outline-offset:3px;
}

/* ----------------------------------------
   NOTE
---------------------------------------- */

.devso-contact-note{
    margin:0 0 24px!important;
    padding:14px 18px;
    border:2px solid #FACE89;
    border-radius:10px;
    background:#17172A;
    color:#FFF8ED!important;
    box-shadow:4px 4px 0 #FC6189;
    font-size:.9rem;
    font-weight:800;
    line-height:1.5;
}

.devso-contact-note::before{
    content:"✓";
    display:inline-block;
    margin-right:8px;
    color:#FACE89;
    font-weight:900;
}

/* ========================================
   CONTACT — ÉTAT APRÈS ENVOI
======================================== */

.devso-contact-panel:has(.devso-contact-success) .devso-contact-status,
.devso-contact-panel:has(.devso-contact-success) .devso-contact-help{
    display:none!important;
}

.devso-contact-success{
    max-width:720px;
    margin:35px auto!important;
    padding:42px 34px;
    box-sizing:border-box;
    border:2px solid #FACE89;
    border-radius:18px;
    background:#17172A;
    color:#FFF8ED;
    box-shadow:8px 8px 0 #FC6189;
    text-align:center;
}

.devso-contact-success-title{
    margin:0 0 14px!important;
    color:#FACE89!important;
    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:1.8rem;
}

.devso-contact-success p:last-child{
    margin:0!important;
    color:#C9CED8;
    line-height:1.6;
}

/* ========================================
   CONTACT — CORRECTIONS FINALES
======================================== */

/* 1. Le texte passe AU-DESSUS du formulaire */

.devso-contact-inner{
    grid-template-columns:1fr!important;
    gap:42px!important;
    width:min(1000px,90%)!important;
}

.devso-contact-points{
    max-width:650px;
    margin:26px auto 0!important;
    text-align:left;
}

.devso-contact-back-demo{
    justify-content:center!important;
    margin-top:20px!important;
}

/* 2. Machine plus large et moins haute */

.devso-contact-panel{
    width:100%;
    max-width:920px;
    box-sizing:border-box;
    margin:0 auto!important;
}

/* 3. Le formulaire passe sur 2 colonnes */

.devso-contact-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px 22px;
}

.devso-terminal,
.devso-contact-field:has(textarea),
.devso-contact-consent,
.devso-contact-actions{
    grid-column:1 / -1;
}

/* Nom + e-mail côte à côte */

.devso-contact-field{
    margin:0!important;
}

/* 4. Message moins haut */

.devso-contact-panel textarea.devso-contact-message{
    min-height:260px!important;
}

/* 5. HONEYPOT ANTIBOT — DOIT ÊTRE INVISIBLE */

.devso-honeypot{
    position:absolute!important;
    left:-9999px!important;
    top:auto!important;

    width:1px!important;
    height:1px!important;

    overflow:hidden!important;

    opacity:0!important;
    pointer-events:none!important;
}

/* 6. Texte libre beaucoup plus visible */

.devso-template-button[data-template="libre"]{
    flex:1 1 100%;

    min-height:48px;

    background:#FACE89!important;
    color:#17172A!important;

    border:2px solid #090A12!important;

    box-shadow:
        0 6px 0 #090A12,
        inset 0 2px 0 rgba(255,255,255,.8)!important;

    font-size:.88rem;
    font-weight:900;
}

.devso-template-button[data-template="libre"]:hover{
    background:#F7B085!important;
}

.devso-template-button[data-template="libre"].is-selected{
    background:#FC6189!important;
    color:#17172A!important;
}

/* 7. Confidentialité */

.devso-contact-consent{
    margin:10px 0 4px!important;
}

.devso-contact-consent label{
    display:flex;
    align-items:flex-start;
    gap:10px;

    color:#FFFDF9!important;

    font-size:.8rem;
    line-height:1.55;
}

.devso-contact-consent input{
    flex:0 0 auto;

    width:18px!important;
    height:18px!important;

    margin:2px 0 0!important;

    accent-color:#FC6189;
}

/* Lien politique en JAUNE */

.devso-contact-consent a{
    color:#FACE89!important;

    font-weight:800;
    text-decoration:underline;
    text-underline-offset:3px;
}

.devso-contact-consent a:hover{
    color:#F7B085!important;
}

/* 8. Effacer / Envoyer */

.devso-contact-actions{
    margin-top:10px!important;
}


/* 10. Responsive */

@media(max-width:700px){

    .devso-contact-form{
        grid-template-columns:1fr;
    }

    .devso-terminal,
    .devso-contact-field,
    .devso-contact-field:has(textarea),
    .devso-contact-consent,
    .devso-contact-actions,
    .devso-contact-privacy{
        grid-column:1;
    }

    .devso-contact-copy{
        text-align:left;
    }

    .devso-contact-back-demo{
        justify-content:flex-start!important;
    }

    .devso-contact-panel textarea.devso-contact-message{
        min-height:300px!important;
    }
}

/* ========================================
   CONTACT — TEXTE D'INTRODUCTION
======================================== */

.devso-contact-copy{
    max-width:760px;
    margin:0 auto!important;
    text-align:center;
}

.devso-contact-intro{
    max-width:650px;
    margin:20px auto 0!important;
}

.devso-contact-reassurance{
    max-width:620px;
    margin:24px auto 0!important;

    color:#17172A;

    font-size:.95rem;
    font-weight:700;
    line-height:1.65;
}

/* ========================================
   APRÈS LE FORMULAIRE — HÉSITATION
======================================== */

.devso-contact-hesitation{
    width:min(760px,90%);
    margin:69px auto 20px!important;
    text-align:center;
}

.devso-contact-hesitation-text{
    margin:0 0 24px!important;

    color:#17172A;

    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:1.5rem;
    line-height:1.2;
}

.devso-contact-hesitation-subtext{
    margin:10px 0 20px!important;

    color:#555568;

    font-size:.95rem;
    line-height:1.55;
}

.devso-contact-hesitation .devso-contact-back-demo{
    justify-content:center!important;
    margin:0!important;
}

/* ========================================
   PAGES LÉGALES
======================================== */

.devso-legal-page{
    width:min(900px,88vw);
    margin:0 auto!important;
    padding:80px 0 100px;
    color:#17172A;
}

.devso-legal-page h1{
    margin:0 0 28px!important;
    color:#17172A;
    font-size:clamp(2.4rem,5vw,3.8rem);
}

.devso-legal-page .devso-legal-intro{
    max-width:760px;
    margin:0 0 55px!important;
    color:#555568;
    font-size:1.08rem;
    line-height:1.75;
}

.devso-legal-page h2{
    margin:48px 0 16px!important;
    color:#7D4B92;
    font-size:1.65rem;
}

.devso-legal-page p,
.devso-legal-page li{
    color:#444455;
    font-size:1rem;
    line-height:1.75;
}

.devso-legal-page p{
    margin:0 0 16px!important;
}

.devso-legal-page ul{
    margin:10px 0 24px!important;
    padding-left:24px;
}

.devso-legal-page a{
    color:#7D4B92;
    font-weight:700;
    text-decoration:underline;
    text-underline-offset:3px;
}

.devso-legal-page a:hover{
    color:#FC6189;
}

@media(max-width:600px){
    .devso-legal-page{
        width:88vw;
        padding:60px 0 75px;
    }

    .devso-legal-page h2{
        margin-top:38px!important;
        font-size:1.45rem;
    }
}


/* ----------------------------------------
   RESPONSIVE CONTACT
---------------------------------------- */

@media(max-width:850px){
    .devso-contact-inner{
        grid-template-columns:1fr;
        gap:38px;
    }
}

@media(max-width:600px){
    .devso-contact{
        padding:70px 0;
    }

    .devso-contact-inner{
        width:88%;
    }

    .devso-contact-panel{
        padding:36px 20px 28px;
    }

    .devso-terminal-screen{
        padding:18px;
    }

    .devso-contact-templates{
        gap:10px;
    }

    .devso-template-button{
        flex:1 1 calc(50% - 10px);
    }

    .devso-template-button[data-template="libre"]{
        flex-basis:100%;
    }

    .devso-contact-actions{
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .devso-contact-clear,
    .devso-contact-submit{
        width:100%;
        box-sizing:border-box;
        text-align:center;
    }

    .devso-contact-panel textarea.devso-contact-message{
        min-height:330px;
    }
}
/* ========================================
   FAQ
======================================== */

.devso-faq{
    width:min(900px,90%);
    margin:100px auto;
}

.devso-faq-eyebrow{
    margin:0 0 10px!important;
    color:#7D4B92;
    font-size:.85rem;
    font-weight:800;
    letter-spacing:.16em;
    text-align:center;
}

.devso-faq-title{
    margin:0 0 36px;
    color:#17172A;
    font-size:clamp(2rem,4vw,3rem);
    text-align:center;
}

.devso-faq .wp-block-details{
    margin:0 0 14px;
    padding:0;
    border:2px solid #17172A;
    border-radius:14px;
    background:#FFFDF9;
    box-shadow:5px 5px 0 #7D4B92;
    overflow:hidden;
}

.devso-faq summary{
    position:relative;
    padding:18px 54px 18px 20px;
    color:#17172A;
    font-weight:800;
    cursor:pointer;
    list-style:none;
}

.devso-faq summary::-webkit-details-marker{
    display:none;
}

.devso-faq summary::after{
    content:"+";
    position:absolute;
    top:50%;
    right:20px;
    color:#FC6189;
    font-size:1.5rem;
    font-weight:900;
    transform:translateY(-50%);
}

.devso-faq details[open] summary::after{
    content:"−";
}

.devso-faq .wp-block-details p{
    margin:0!important;
    padding:0 20px 20px;
    color:#555568;
    line-height:1.65;
}

.devso-faq details[open]{
    background:#FFF8ED;
}

/* ========================================
   CONTACT — CTA ACCUEIL / MACHINE À ÉCRIRE
======================================== */

.devso-typewriter{
    width:100vw;
    max-width:none;

    margin:90px 0 70px!important;
    margin-left:calc(50% - 50vw)!important;

    padding:80px 0 90px;

    background:#FFFDF9;

    text-align:center;
}

/* ========================================
   INTRO
======================================== */

.devso-typewriter-eyebrow{
    width:min(760px,90%);

    margin:0 auto 12px!important;

    color:#7D4B92;

    font-size:.85rem;
    font-weight:800;
    letter-spacing:.16em;

    text-align:center;
}

.devso-typewriter-title{
    position:relative;

    width:fit-content;
    max-width:90%;

    margin:0 auto 48px!important;
    padding:18px 26px;

    background:#F7B085;
    color:#17172A;

    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:clamp(1.7rem,2.6vw,2.4rem);
    font-weight:400;
    line-height:1.1;

    box-shadow:none;

    transform:rotate(2deg);

    text-align:center;
}

.devso-typewriter-title::before{
    content:"";

    position:absolute;

    top:-8px;
    left:50%;

    width:58px;
    height:15px;

    background:rgba(255,255,255,.72);

    transform:
        translateX(-50%)
        rotate(-1deg);
}

.devso-typewriter-title::after{
    content:"";

    position:absolute;

    left:-2px;
    bottom:-2px;

    width:22px;
    height:22px;

    background:
        linear-gradient(
            225deg,
            transparent 0 48%,
            rgba(23,23,42,.08) 49% 100%
        );

    pointer-events:none;
}

/* ========================================
   MACHINE
======================================== */

.devso-typewriter-machine{
    position:relative;

    width:min(760px,90%);

    margin:0 auto!important;
    padding:0 0 120px;
}

/* ========================================
   BARRE SUPÉRIEURE
======================================== */

.devso-typewriter-carriage{
    position:relative;

    width:72%;
    height:24px;

    margin:0 auto;

    border-radius:10px 10px 4px 4px;

    background:#17172A;

    box-shadow:0 5px 0 #FACE89;
}

.devso-typewriter-carriage span{
    position:absolute;

    top:-7px;
    left:50%;

    width:76px;
    height:8px;

    border:2px solid #17172A;
    border-radius:999px;

    background:#FACE89;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.65);

    transform:translateX(-50%);
}

/* ========================================
   FEUILLE
======================================== */

.devso-typewriter-paper{
    position:relative;
    z-index:2;
    width:min(560px,82%);
    margin:-4px auto -10px!important;
    padding:34px 38px 42px;

    border:2px solid #17172A;

    background:#FFFDF9;

    box-shadow:
        7px 7px 0 #FACE89,
        0 16px 30px rgba(23,23,42,.08);

    transform:rotate(-1deg);

    text-align:left;
}

/* Ligne rouge façon marge de feuille */

.devso-typewriter-paper::before{
    content:"";

    position:absolute;

    top:0;
    bottom:0;
    left:26px;

    width:2px;

    background:rgba(252,97,137,.35);
}

/* Lignes papier */

.devso-typewriter-paper::after{
    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    pointer-events:none;

    opacity:.12;

    background:
        repeating-linear-gradient(
            to bottom,
            transparent 0,
            transparent 28px,
            #17172A 29px,
            transparent 30px
        );
}

.devso-typewriter-paper-line{
    margin:0 0 14px!important;

    color:#17172A!important;

    font-family:"Courier New",monospace;
    font-size:1rem;
    line-height:1.65;
}

.devso-typewriter-paper-signature{
    margin:24px 0 0!important;

    color:#7D4B92!important;

    font-family:"Courier New",monospace;
    font-size:.9rem;
    font-weight:800;
}

.devso-typewriter-word,
.devso-typewriter-actions{
    width:min(620px,88%)!important;
    box-sizing:border-box;
}

/* ========================================
   CONTACTER
======================================== */

.devso-typewriter-word{
    position:relative;
    z-index:3;
    box-sizing:border-box;
    display:flex;
    justify-content:center;
    align-items:center;

    gap:8px;

    width:min(620px,88%);

    margin:0 auto!important;
    padding:26px 34px 32px;

    border:3px solid #17172A;
    border-bottom:none;
    border-radius:24px 24px 0 0;

    background:
        linear-gradient(
            145deg,
            #D8B27E,
            #C69B63
        );

    box-shadow:
        10px 10px 0 #FACE89,
        inset 0 3px 0 rgba(255,255,255,.35);
}

.devso-typewriter-word span{
    display:flex;
    align-items:center;
    justify-content:center;

    width:46px;
    height:46px;

    border:3px solid #090A12;
    border-radius:50%;

    background:#FFFDF9;
    color:#17172A;

    box-shadow:
        0 5px 0 #090A12,
        inset 0 2px 0 rgba(255,255,255,.9);

    font-family:"Courier New",monospace;
    font-size:1rem;
    font-weight:900;
}

/* ========================================
   TOUCHES BASSES
======================================== */

.devso-typewriter-actions{
    position:relative;
    z-index:3;

    display:block!important;

    width:min(620px,88%);

    margin:0 auto!important;
    padding:0 34px 34px;

    box-sizing:border-box;

    border:3px solid #17172A;
    border-top:none;
    border-radius:0 0 26px 26px;

    background:
        linear-gradient(
            145deg,
            #C69B63,
            #B8874D
        );

    box-shadow:
        10px 10px 0 #FACE89,
        inset 0 -10px 18px rgba(23,23,42,.12);
}

/* ========================================
   BARRE ESPACE
======================================== */

.devso-typewriter-space{
    width:100%;
    margin:0!important;
}

.devso-typewriter-space .wp-block-button{
    width:100%;
}

.devso-typewriter-space .wp-block-button__link{
    display:flex;
    align-items:center;
    justify-content:center;

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

    box-sizing:border-box;

    padding:12px 24px;

    border:3px solid #090A12;
    border-radius:7px;

    background:#FACE89;
    color:#17172A;

    box-shadow:
        0 7px 0 #090A12,
        inset 0 2px 0 rgba(255,255,255,.55);

    font-family:"Courier New",monospace;
    font-size:.92rem;
    font-weight:900;

    text-align:center;

    transition:
        transform .12s ease,
        box-shadow .12s ease,
        background .12s ease;
}

/* ========================================
   HOVER / APPUI
======================================== */

@media(hover:hover) and (pointer:fine){

    .devso-typewriter-space .wp-block-button__link:hover,
    .devso-typewriter-enter .wp-block-button__link:hover{
        background:#F7B085;

        transform:translateY(3px);

    box-shadow:
        0 4px 0 #090A12,
        inset 0 2px 4px rgba(23,23,42,.16);
    }
}

.devso-typewriter-space .wp-block-button__link:active,
.devso-typewriter-enter .wp-block-button__link:active{
    transform:translateY(6px);

    box-shadow:0 1px 0 #090A12;
}

/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:700px){

    .devso-typewriter{
        padding:65px 0 75px;
    }

    .devso-typewriter-title{
        margin-bottom:45px!important;
    }

    .devso-typewriter-paper{
        width:84%;
        padding:28px 28px 34px 42px;
    }

    .devso-typewriter-word{
        flex-wrap:wrap;
        gap:8px;
    }

    .devso-typewriter-word span{
        width:38px;
        height:38px;
    }

    .devso-typewriter-actions{
        grid-template-columns:1fr;
    }

    .devso-typewriter-enter{
        max-width:240px;
        margin:0 auto!important;
    }
}

/* ========================================
   DÉMO + CONTACT — DUO FINAL
======================================== */

.devso-final-duo{
    position:relative;
    display:grid!important;
    grid-template-columns:1fr 1.15fr;
    gap:150px;
    align-items:stretch;

    /* SECTION PLEINE LARGEUR */
    width:100vw;
    max-width:none;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;

   padding:
    100px
    max(5vw,calc((100vw - 1250px) / 2))
    90px;

    box-sizing:border-box;
       background: #fff6df;

    /* PLUS AUCUN EFFET DE CARTE */
    border:none;
    border-radius:28px;
    box-shadow:none;

    overflow:hidden;
}

/* ========================================
   LES DEUX COLONNES ONT LA MÊME HAUTEUR
======================================== */

.devso-final-duo .devso-demo,
.devso-final-duo .devso-typewriter{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;

    width:100%;
    height:100%;

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

    background:transparent;
}

/* ========================================
   TITRES POST-IT
======================================== */

.devso-final-duo .devso-demo-title,
.devso-final-duo .devso-typewriter-title{
    flex:0 0 auto;
}

/* ========================================
   SOUS-TITRE DÉMO
======================================== */

.devso-final-duo .devso-demo-intro{
    flex:0 0 auto;
}

/* ========================================
   LES OBJETS DESCENDENT SUR LA MÊME LIGNE
======================================== */

.devso-final-duo .devso-cassette{
    margin-top:50px!important;
    width:100%;
    box-sizing:border-box;
    transform:
        rotate(-1.5deg)
        translateY(-18px);
    transform-origin:center bottom;
    transition:transform .2s ease;
}

.devso-final-duo .devso-cassette:hover{
    transform:
        rotate(-.5deg)
        translateY(-20px);
}

@media(hover:hover) and (pointer:fine){
    .devso-final-duo .devso-cassette:hover{
        transform:
            rotate(-.5deg)
            translateY(0);
    }
}

/* ========================================
   MACHINE À ÉCRIRE
======================================== */

.devso-final-duo .devso-typewriter-machine{
    width:100%;
    padding-bottom:0;
}

.devso-final-duo .devso-typewriter-paper{
    width:min(560px,92%);
}

/* ========================================
   PAGE CRÉATION — SUPPRESSION ESPACE HAUT
   Neutralise l'espacement vertical ajouté
   par le conteneur de page Blocksy.
======================================== */

body:has(.devso-web-process){
    --content-vertical-spacing:0px;
}

body:has(.devso-web-process) .site-main,
body:has(.devso-web-process) .ct-container-full,
body:has(.devso-web-process) article.page,
body:has(.devso-web-process) .entry-content{
    margin-top:0!important;
    padding-top:0!important;
}

body:has(.devso-web-process) .devso-web-process{
    margin-top:0!important;
}

/* ========================================
   CRÉATION DE SITE — PARCOURS ARCADE
   Gutenberg gère le contenu.
   CSS gère uniquement l'apparence du parcours.
======================================== */

.devso-web-process{
    position:relative;
    width:100vw;
    max-width:none;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;
    padding:90px 0 60px;
    overflow:hidden;
    background:#17172A;
    color:#FFF8ED;
}

/* ========================================
   INTRO
======================================== */

.devso-web-process .devso-process-intro{
    position:relative;
    z-index:4;
    width:min(1000px,88%);
    margin:0 auto 80px!important;
    text-align:center;
}

.devso-web-process .devso-process-eyebrow{
    margin:0 0 14px!important;
    color:#FACE89;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.devso-web-process .devso-process-title{
    margin:0 0 18px!important;
    color:#FFF8ED;
    font-size:clamp(2.2rem,4vw,3.6rem);
}

.devso-web-process .devso-process-text{
    max-width:760px;
    margin:0 auto!important;
    color:#C9CED8;
    font-size:1.05rem;
    line-height:1.8;
}

/* ========================================
   ZONE DU PARCOURS
======================================== */

.devso-web-process .devso-process-timeline{
    position:relative;
    width:min(1250px,92vw);
    margin:0 auto!important;
    padding:30px 0 0;
}

/* Le SVG est généré par JavaScript. */
.devso-arcade-path{
    position:absolute;
    inset:0;
    z-index:0;
    width:100%;
    height:100%;
    overflow:visible;
    pointer-events:none;
}

/* Bord clair du couloir. */
.devso-arcade-path-outline{
    fill:none;
    stroke:#B98AD3;
    stroke-width:15;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Intérieur bleu nuit. */
.devso-arcade-path-inner{
    fill:none;
    stroke:#17172A;
    stroke-width:10;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/* Petites pastilles jaunes façon arcade. */
.devso-arcade-path-dots{
    fill:none;
    stroke:#FACE89;
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
    stroke-dasharray:1 18;
}

/* Portion parcourue par la méduse. */
.devso-arcade-path-progress{
    fill:none;
    stroke:#FC6189;
    stroke-width:3;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 5px rgba(252,97,137,.45));
}

/* ========================================
   CHECKPOINTS DU PARCOURS
   Le centre masque le tuyau derrière.
======================================== */

.devso-arcade-checkpoint{
    fill:#FC6189;
    stroke:#FACE89;
    stroke-width:4;
    paint-order:stroke fill;
    filter:
        drop-shadow(0 0 0 #17172A)
        drop-shadow(0 0 6px rgba(250,206,137,.5));
}

/* ========================================
   ÉTAPES
   Desktop :
   carte | chemin | démonstration
======================================== */

.devso-web-process .devso-step{
    position:relative;
    z-index:2;
    display:grid;
    grid-template-columns:minmax(0,1fr) 110px minmax(0,1fr);
    align-items:center;
    width:100%;
    min-height:420px;
    margin:0 0 105px;
}

.devso-web-process .devso-step:last-child{
    margin-bottom:0;
}

/* Étapes impaires : carte à gauche. */
.devso-web-process .devso-step.is-left .devso-step-card{
    grid-column:1;
}

.devso-web-process .devso-step.is-left .devso-step-visual{
    grid-column:3;
}

/* Étapes paires : carte à droite. */
.devso-web-process .devso-step.is-right .devso-step-visual{
    grid-column:1;
}

.devso-web-process .devso-step.is-right .devso-step-card{
    grid-column:3;
}

/* ========================================
   CARTES TEXTE
======================================== */

.devso-web-process .devso-step-card{
    position:relative;
    z-index:3;
    width:100%;
    min-height:280px;
    box-sizing:border-box;
    padding:34px 32px 30px;
    border:2px solid #17172A;
    border-radius:22px;
    background:#FFF8ED;
    color:#17172A;
    box-shadow:
        9px 9px 0 rgba(125,75,146,.42),
        0 18px 35px rgba(0,0,0,.12);
}

.devso-web-process .devso-step-number{
    display:flex;
    align-items:center;
    justify-content:center;
    width:52px;
    height:52px;
    margin:0 0 20px!important;
    border-radius:50%;
    background:#17172A;
    color:#FC6189;
    font-size:.9rem;
    font-weight:900;
}

.devso-web-process .devso-step-title{
    margin:0 0 14px;
    color:#17172A;
    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:1.55rem;
    line-height:1.2;
}

.devso-web-process .devso-step-summary{
    margin:0 0 24px;
    color:#555568;
    font-size:1rem;
    line-height:1.65;
}

/* ========================================
   BOUTON "VOIR LA DÉMO"
======================================== */

.devso-web-process .devso-step-demo .wp-block-button__link{
    padding:11px 18px;
    border:0;
    border-radius:2px;
    background:#7D4B92;
    color:#FFFDF9;
    font-weight:700;
    text-decoration:none;
    transition:
        background .15s ease,
        transform .15s ease;
}

@media(hover:hover) and (pointer:fine){
    .devso-web-process .devso-step-demo .wp-block-button__link:hover{
        background:#FC6189;
        color:#17172A;
        transform:translateY(-2px);
    }
}

/* ========================================
   MINI-DÉMONSTRATIONS
======================================== */

.devso-web-process .devso-step-visual{
    position:relative;
    z-index:2;
    width:100%;
    min-height:250px;
    box-sizing:border-box;
    padding:28px;
    border:2px solid #B98AD3;
    border-radius:22px;
    background:#111126;
    color:#FFF8ED;
    box-shadow:
        0 0 0 1px rgba(250,206,137,.12),
        0 16px 35px rgba(0,0,0,.18);
}

.devso-web-process .devso-step-visual p{
    color:#FFF8ED;
}

/* ----------------------------------------
   01 — Questions / découverte
---------------------------------------- */

.devso-step-visual-discovery{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:14px;
}

.devso-step-visual-discovery .devso-web-question{
    width:fit-content;
    margin:0!important;
    padding:12px 18px;
    border:2px solid #B98AD3;
    border-radius:12px;
    background:#FFF8ED;
    color:#17172A!important;
    font-weight:800;
}

.devso-step-visual-discovery .devso-web-question:nth-child(2){
    align-self:flex-end;
    background:#E9DDF2;
}

.devso-step-visual-discovery .devso-web-question:nth-child(3){
    margin-left:12%!important;
    background:#FACE89;
}

/* ----------------------------------------
   02 — Arborescence
---------------------------------------- */

.devso-step-visual-tree{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.devso-step-visual-tree .devso-web-tree-root{
    width:fit-content;
    margin:0 auto 30px!important;
    padding:10px 28px;
    border:2px solid #17172A;
    border-radius:8px;
    background:#FACE89;
    color:#17172A!important;
    font-weight:900;
}

.devso-step-visual-tree .devso-web-tree-children{
    display:grid!important;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}

.devso-step-visual-tree .devso-web-tree-children p{
    margin:0!important;
    padding:10px 6px;
    border:2px solid #B98AD3;
    border-radius:8px;
    background:#17172A;
    color:#FFF8ED!important;
    text-align:center;
    font-size:.85rem;
}

/* ----------------------------------------
   03 — Identité visuelle
---------------------------------------- */

.devso-step-visual-identity{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    align-items:center;
    gap:24px;
}

.devso-step-visual-identity .devso-web-palette::before{
    content:"";
    display:block;
    width:28px;
    height:28px;
    border-radius:50%;
    background:#17172A;
    box-shadow:
        36px 0 #7D4B92,
        72px 0 #FC6189,
        108px 0 #F7B085,
        144px 0 #FACE89;
}

.devso-step-visual-identity .devso-web-type-title{
    margin:0!important;
    color:#FFF8ED!important;
    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:2.5rem;
}

.devso-step-visual-identity .devso-web-type-text{
    grid-column:1/-1;
    margin:12px 0 0!important;
    color:#C9CED8!important;
}

/* ----------------------------------------
   04 — Wireframe → maquette
---------------------------------------- */

.devso-step-visual-mockup{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
}

.devso-step-visual-mockup p{
    margin:0!important;
    padding:14px 18px;
    border:2px solid #B98AD3;
    border-radius:10px;
    background:#FFF8ED;
    color:#17172A!important;
    font-weight:800;
}

/* ----------------------------------------
   05 — Développement
---------------------------------------- */

.devso-step-visual-code{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:12px;
    font-family:"Courier New",monospace;
}

.devso-step-visual-code p:first-child{
    margin:0!important;
    color:#FACE89!important;
    font-size:3.5rem;
    font-weight:900;
}

.devso-step-visual-code p:last-child{
    margin:0!important;
    color:#C9CED8!important;
}

/* ----------------------------------------
   06 — Mise en ligne
---------------------------------------- */

.devso-step-visual-launch{
    display:grid;
    align-content:center;
    gap:12px;
}

.devso-step-visual-launch p{
    margin:0!important;
}

.devso-online-status{
    width:fit-content;
    margin-top:12px!important;
    padding:10px 16px;
    border-radius:8px;
    background:#FACE89;
    color:#17172A!important;
    font-weight:900;
}

/* ========================================
   MÉDUSE
   Elle passe derrière les cartes et visuels.
======================================== */

.devso-web-jellyfish{
    position:absolute!important;
    z-index:1;
    top:0;
    left:0;
    width:66px!important;
    max-width:none!important;
    margin:0!important;
    pointer-events:none;
    will-change:transform;
    transform:
        translate3d(var(--jelly-x,0),var(--jelly-y,0),0)
        translate(-50%,-50%);
}

.devso-web-jellyfish img{
    display:block;
    width:100%!important;
    height:auto!important;
    filter:drop-shadow(0 7px 8px rgba(0,0,0,.3));
    animation:devso-web-jelly-float 2.8s ease-in-out infinite;
}

@keyframes devso-web-jelly-float{
    0%,100%{
        transform:translateY(0) rotate(-2deg);
    }
    50%{
        transform:translateY(-7px) rotate(2deg);
    }
}

/* ========================================
   CTA FINAL
======================================== */

.devso-web-process .devso-process-cta-wrap{
    position:relative;
    z-index:3;
    margin-top:28px!important;
}

.devso-web-process .devso-process-cta .wp-block-button__link{
    padding:14px 24px;
    border:2px solid #FACE89;
    border-radius:10px;
    background:#FACE89;
    color:#17172A;
    box-shadow:0 6px 0 #FC6189;
    font-weight:900;
    text-decoration:none;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.devso-web-process .devso-process-cta .wp-block-button__link:hover{
    background:#F7B085;
    transform:translateY(2px);
    box-shadow:0 4px 0 #FC6189;
}



/* ========================================
   RESPONSIVE
   Sur mobile :
   chemin à gauche, contenu empilé à droite.
======================================== */

@media(max-width:900px){

    .devso-web-process{
        padding:70px 0 55px;
    }

    .devso-web-process .devso-process-intro{
        margin-bottom:60px!important;
    }

    .devso-web-process .devso-process-timeline{
        width:min(720px,90vw);
    }

    .devso-web-process .devso-step{
        grid-template-columns:56px minmax(0,1fr);
        gap:22px 0;
        min-height:0;
        margin-bottom:75px;
    }

    .devso-web-process .devso-step.is-left .devso-step-card,
    .devso-web-process .devso-step.is-right .devso-step-card,
    .devso-web-process .devso-step.is-left .devso-step-visual,
    .devso-web-process .devso-step.is-right .devso-step-visual{
        grid-column:2;
    }

    .devso-web-process .devso-step-card{
        grid-row:1;
    }

    .devso-web-process .devso-step-visual{
        grid-row:2;
        min-height:190px;
    }

    .devso-web-jellyfish{
        width:48px!important;
    }
}

@media(max-width:600px){

    .devso-step-visual-tree .devso-web-tree-children{
        grid-template-columns:1fr;
    }

    .devso-step-visual-identity{
        grid-template-columns:1fr;
    }

    .devso-step-visual-mockup{
        flex-direction:column;
    }
}

/* ========================================
   ACCESSIBILITÉ — MOUVEMENTS RÉDUITS
======================================== */

@media(prefers-reduced-motion:reduce){
    .devso-web-jellyfish img{
        animation:none!important;
    }
}


/* ========================================
   RESPONSIVE
======================================== */

@media(max-width:1000px){

    .devso-final-duo{
        grid-template-columns:1fr;
        gap:90px;
        width:min(760px,90%);
        padding:65px 40px;
    }

    .devso-final-duo .devso-demo,
    .devso-final-duo .devso-typewriter{
        height:auto;
    }

    .devso-final-duo .devso-cassette,
    .devso-final-duo .devso-typewriter-machine{
        margin-top:0!important;
    }

    .devso-final-duo::before{
    display:none;
    }
}

/* ========================================
   PAGE À PROPOS
======================================== */

/*
 * Le contenu reste entièrement administrable dans Gutenberg.
 * Cette partie gère uniquement la mise en page et l'identité visuelle.
 */


/* ========================================
   PAGE — ESPACEMENTS GÉNÉRAUX
======================================== */

body:has(.devso-about-hero){
    --content-vertical-spacing:0px;
}

body:has(.devso-about-hero) .site-main,
body:has(.devso-about-hero) .ct-container-full,
body:has(.devso-about-hero) article.page,
body:has(.devso-about-hero) .entry-content{
    margin-top:0!important;
    padding-top:0!important;
}

body:has(.devso-about-hero) .entry-content{
    margin-bottom:0!important;
}


/* ========================================
   01 — HERO
======================================== */

.devso-about-hero{
    width:100vw;
    max-width:none;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;
    padding:110px 0 105px;
    background:#17172A;
    color:#FFF8ED;
}

.devso-about-hero-inner{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
    align-items:center;
    gap:80px;
    width:min(1180px,88vw);
    margin:0 auto!important;
}

.devso-about-hero-copy{
    margin:0!important;
}

.devso-about-eyebrow{
    margin:0 0 18px!important;
    color:#FACE89;
    font-size:.82rem;
    font-weight:800;
    letter-spacing:.18em;
    text-transform:uppercase;
}

.devso-about-title{
    max-width:720px;
    margin:0!important;
    color:#FFF8ED;
    font-size:clamp(2.7rem,5vw,4.6rem);
    line-height:1.05;
}

.devso-about-intro{
    max-width:670px;
    margin:28px 0 0!important;
    color:#C9CED8;
    font-size:1.08rem;
    line-height:1.8;
}


/* ----------------------------------------
   VISUEL DU HERO

   Le placeholder sera ensuite remplacé
   directement dans Gutenberg par une image.
---------------------------------------- */

.devso-about-hero-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:440px;
    margin:0!important;
    overflow:hidden;
    border:2px solid rgba(250,206,137,.45);
    border-radius:26px;
    background:
        radial-gradient(
            circle at 30% 20%,
            rgba(125,75,146,.35),
            transparent 45%
        ),
        #111126;
}

.devso-about-placeholder{
    margin:0!important;
    color:#FACE89;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.12em;
    text-align:center;
}

/*
 * Quand le placeholder sera remplacé
 * par un vrai bloc Image Gutenberg.
 */
.devso-about-hero-visual figure{
    width:100%;
    height:100%;
    margin:0!important;
}

.devso-about-hero-visual img{
    display:block;
    width:100%!important;
    height:100%!important;
    min-height:440px;
    object-fit:cover;
}


/* ========================================
   02 — POURQUOI DEVSOLAB ?
======================================== */

.devso-about-why{
    width:100vw;
    max-width:none;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;
    padding:115px max(6vw,calc((100vw - 900px) / 2));
    box-sizing:border-box;
    background:#FFF8ED;
    color:#17172A;
    text-align:center;
}

.devso-about-section-eyebrow{
    margin:0 0 14px!important;
    color:#7D4B92;
    font-size:.8rem;
    font-weight:800;
    letter-spacing:.16em;
    text-transform:uppercase;
}

.devso-about-section-title{
    max-width:780px;
    margin:0 auto!important;
    color:#17172A;
    font-size:clamp(2.2rem,4vw,3.5rem);
    line-height:1.1;
}

.devso-about-why-text{
    max-width:760px;
    margin:28px auto 0!important;
    color:#555568;
    font-size:1.05rem;
    line-height:1.85;
}

.devso-about-why-text + .devso-about-why-text{
    margin-top:20px!important;
}


/* ========================================
   03 — MA FAÇON DE TRAVAILLER
======================================== */

.devso-about-method{
    width:100vw;
    max-width:none;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;
    padding:105px max(6vw,calc((100vw - 1180px) / 2));
    box-sizing:border-box;
    background:#17172A;
    color:#FFF8ED;
}

.devso-about-method .devso-about-section-eyebrow{
    color:#FACE89;
    text-align:center;
}

.devso-about-method .devso-about-section-title{
    max-width:850px;
    color:#FFF8ED;
    text-align:center;
}

.devso-about-principles{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:54px;
    max-width:1180px;
    margin:70px auto 0!important;
}

.devso-about-principle{
    margin:0!important;
    padding-top:26px;
    border-top:2px solid rgba(250,206,137,.35);
}

.devso-about-principle-number{
    margin:0 0 28px!important;
    color:#FC6189;
    font-size:.82rem;
    font-weight:900;
    letter-spacing:.12em;
}

.devso-about-principle h3{
    margin:0 0 16px!important;
    color:#FFF8ED;
    font-size:1.7rem;
}

.devso-about-principle>p:last-child{
    margin:0!important;
    color:#C9CED8;
    line-height:1.7;
}


/* ========================================
   04 — CE QUE J'APPORTE
======================================== */

.devso-about-skills{
    width:100vw;
    max-width:none;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;
    padding:110px max(6vw,calc((100vw - 1100px) / 2));
    box-sizing:border-box;
    background:#FFF8ED;
    color:#17172A;
}

.devso-about-skills .devso-about-section-eyebrow{
    text-align:center;
}

.devso-about-skills .devso-about-section-title{
    text-align:center;
}

.devso-about-skills-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:0 70px;
    max-width:1000px;
    margin:70px auto 0!important;
}

.devso-about-skill{
    margin:0!important;
    padding:30px 0;
    border-top:1px solid rgba(23,23,42,.16);
}

.devso-about-skill h3{
    margin:0 0 10px!important;
    color:#7D4B92;
    font-size:1.45rem;
}

.devso-about-skill p{
    margin:0!important;
    color:#555568;
    line-height:1.7;
}

.devso-about-technologies{
    max-width:900px;
    margin:45px auto 0!important;
    color:#7D4B92;
    font-size:.85rem;
    font-weight:800;
    letter-spacing:.05em;
    text-align:center;
}


/* ========================================
   05 — UN PEU PLUS PERSONNEL
======================================== */

.devso-about-personal{
    width:100vw;
    max-width:none;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;
    padding:105px max(6vw,calc((100vw - 1180px) / 2));
    box-sizing:border-box;
    background:#17172A;
    color:#FFF8ED;
}

.devso-about-personal .devso-about-section-eyebrow{
    color:#FACE89;
    text-align:center;
}

.devso-about-personal .devso-about-section-title{
    color:#FFF8ED;
    text-align:center;
}

.devso-about-personal-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:38px;
    max-width:1050px;
    margin:65px auto 0!important;
}

.devso-about-personal-item{
    margin:0!important;
    text-align:center;
}

/* ========================================
   VISUELS PERSONNELS
   Les mots Gutenberg servent de repères.
   Les illustrations sont dessinées en CSS.
======================================== */

.devso-about-personal-visual{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:170px;
    margin:0 0 25px!important;
    border:1px solid rgba(185,138,211,.55);
    border-radius:18px;
    background:#111126;

    /* Masque PHOTO / POKER / CRÉER */
    color:transparent!important;
    font-size:0;
}

/* ========================================
   01 — PHOTOGRAPHIE
   Appareil photo minimaliste.
======================================== */

.devso-about-personal-item:nth-child(1)
.devso-about-personal-visual::before{
    content:"";
    width:76px;
    height:48px;

    border:3px solid #FACE89;
    border-radius:12px;

    background:#17172A;

    box-shadow:
        inset 0 0 0 2px rgba(255,255,255,.03);
}

.devso-about-personal-item:nth-child(1)
.devso-about-personal-visual::after{
    content:"";

    position:absolute;

    width:28px;
    height:28px;

    border:4px solid #FC6189;
    border-radius:50%;

    background:#17172A;

    box-shadow:
        0 -30px 0 -9px #7D4B92;
}


/* ========================================
   02 — JEUX DE STRATÉGIE
   Pièce d'échecs + carte de poker.
======================================== */

.devso-about-personal-item:nth-child(2)
.devso-about-personal-visual::before{
    content:"♟";

    position:absolute;
    left:28%;

    color:#FACE89;

    font-family:Georgia,serif;
    font-size:72px;
    line-height:1;

    transform:rotate(-4deg);
}

.devso-about-personal-item:nth-child(2)
.devso-about-personal-visual::after{
    content:"A  ♠";

    position:absolute;
    right:25%;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:space-between;

    width:48px;
    height:68px;

    box-sizing:border-box;
    padding:7px;

    border:2px solid #FC6189;
    border-radius:8px;

    background:#FFF8ED;
    color:#17172A;

    font-family:Georgia,serif;
    font-size:17px;
    font-weight:800;
    line-height:1;

    box-shadow:5px 5px 0 rgba(125,75,146,.45);

    transform:rotate(9deg);
}


/* ========================================
   03 — CRÉER ET APPRENDRE
   Livre ouvert minimaliste.
======================================== */

.devso-about-personal-item:nth-child(3)
.devso-about-personal-visual::before{
    content:"";

    width:82px;
    height:58px;

    border:3px solid #FACE89;
    border-radius:6px 14px 14px 6px;

    background:
        linear-gradient(
            90deg,
            #FFF8ED 0 48%,
            #17172A 48% 52%,
            #FFF8ED 52% 100%
        );

    box-shadow:
        7px 7px 0 rgba(252,97,137,.25);

    transform:perspective(200px) rotateX(3deg);
}

.devso-about-personal-item:nth-child(3)
.devso-about-personal-visual::after{
    content:"";

    position:absolute;

    width:58px;
    height:2px;

    background:#B98AD3;

    box-shadow:
        0 -10px #B98AD3,
        0 10px #B98AD3;

    opacity:.65;
}

/* ========================================
   VISUELS PERSONNELS — FLOTTEMENT
   Mouvement léger uniquement sur les pictos.
======================================== */

.devso-about-personal-item:nth-child(1)
.devso-about-personal-visual::before,
.devso-about-personal-item:nth-child(1)
.devso-about-personal-visual::after{
    animation:devso-about-float-photo 4s ease-in-out infinite;
}

.devso-about-personal-item:nth-child(2)
.devso-about-personal-visual::before{
    animation:devso-about-float-chess 4.6s ease-in-out infinite;
}

.devso-about-personal-item:nth-child(2)
.devso-about-personal-visual::after{
    animation:devso-about-float-card 4.1s ease-in-out infinite;
}

.devso-about-personal-item:nth-child(3)
.devso-about-personal-visual::before,
.devso-about-personal-item:nth-child(3)
.devso-about-personal-visual::after{
    animation:devso-about-float-book 4.4s ease-in-out infinite;
}


/* Appareil photo : petit mouvement vertical. */
@keyframes devso-about-float-photo{
    0%,100%{
        transform:translateY(0);
    }
    50%{
        transform:translateY(-7px);
    }
}


/* Pièce d'échecs :
   conserve sa légère rotation actuelle. */
@keyframes devso-about-float-chess{
    0%,100%{
        transform:translateY(0) rotate(-4deg);
    }
    50%{
        transform:translateY(-8px) rotate(-2deg);
    }
}


/* Carte :
   petit flottement indépendant
   sans perdre son inclinaison. */
@keyframes devso-about-float-card{
    0%,100%{
        transform:translateY(0) rotate(9deg);
    }
    50%{
        transform:translateY(-10px) rotate(6deg);
    }
}


/* Livre : très discret. */
@keyframes devso-about-float-book{
    0%,100%{
        transform:
            translateY(0)
            perspective(200px)
            rotateX(3deg);
    }
    50%{
        transform:
            translateY(-7px)
            perspective(200px)
            rotateX(1deg);
    }
}


/* ========================================
   ACCESSIBILITÉ
   Aucun mouvement si l'utilisateur
   demande une interface plus calme.
======================================== */

@media(prefers-reduced-motion:reduce){

    .devso-about-personal-visual::before,
    .devso-about-personal-visual::after{
        animation:none!important;
    }
}

.devso-about-personal-item h3{
    margin:0 0 12px!important;
    color:#FFF8ED;
    font-size:1.45rem;
}

.devso-about-personal-item>p:last-child{
    margin:0!important;
    color:#C9CED8;
    line-height:1.7;
}


/* ========================================
   06 — CTA FINAL
======================================== */

.devso-about-cta{
    width:100vw;
    max-width:none;
    margin:0!important;
    margin-left:calc(50% - 50vw)!important;
    padding:95px max(6vw,calc((100vw - 850px) / 2));
    box-sizing:border-box;
    background:#FACE89;
    color:#17172A;
    text-align:center;
}

.devso-about-cta-title{
    margin:0!important;
    color:#17172A;
    font-size:clamp(2.3rem,4vw,3.5rem);
}

.devso-about-cta-text{
    max-width:720px;
    margin:24px auto 0!important;
    color:#444455;
    font-size:1.05rem;
    line-height:1.75;
}

.devso-about-cta-buttons{
    justify-content:center!important;
    margin:32px 0 0!important;
}

.devso-about-cta-button .wp-block-button__link{
    padding:13px 22px;
    border:2px solid #17172A;
    border-radius:10px;
    background:#17172A;
    color:#FFF8ED;
    box-shadow:0 5px 0 #FC6189;
    font-weight:900;
    text-decoration:none;
    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease;
}

.devso-about-cta-button .wp-block-button__link:hover{
    background:#7D4B92;
    transform:translateY(2px);
    box-shadow:0 3px 0 #FC6189;
}

.devso-about-cta-note{
    margin:20px 0 0!important;
    color:#555568;
    font-size:.85rem;
}


/* ========================================
   RESPONSIVE — RESTE DE LA PAGE À PROPOS
======================================== */

@media(max-width:900px){

    .devso-about-principles,
    .devso-about-personal-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .devso-about-skills-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .devso-about-principle{
        max-width:620px;
        width:100%;
        margin:0 auto!important;
    }

    .devso-about-personal-item{
        max-width:520px;
        width:100%;
        margin:0 auto!important;
    }
}

@media(max-width:600px){

    .devso-about-method,
    .devso-about-skills,
    .devso-about-personal,
    .devso-about-cta{
        padding:75px 7vw;
    }

    .devso-about-principles,
    .devso-about-skills-grid,
    .devso-about-personal-grid{
        margin-top:50px!important;
    }

    .devso-about-personal-visual{
        min-height:140px;
    }
}



/* ========================================
   RESPONSIVE — HERO + INTRO
======================================== */

@media(max-width:900px){

    .devso-about-hero{
        padding:80px 0;
    }

    .devso-about-hero-inner{
        grid-template-columns:1fr;
        gap:55px;
        width:min(720px,88vw);
    }

    .devso-about-title{
        max-width:none;
    }

    .devso-about-hero-visual{
        min-height:380px;
    }

    .devso-about-hero-visual img{
        min-height:380px;
    }

    .devso-about-why{
        padding-top:85px;
        padding-bottom:85px;
    }
}


@media(max-width:600px){

    .devso-about-hero{
        padding:65px 0;
    }

    .devso-about-hero-inner{
        width:88vw;
        gap:42px;
    }

    .devso-about-title{
        font-size:clamp(2.35rem,11vw,3.4rem);
    }

    .devso-about-intro{
        font-size:1rem;
        line-height:1.7;
    }

    .devso-about-hero-visual{
        min-height:320px;
        border-radius:20px;
    }

    .devso-about-hero-visual img{
        min-height:320px;
    }

    .devso-about-why{
        padding:
            75px
            7vw;
    }

    .devso-about-why-text{
        font-size:1rem;
        line-height:1.75;
    }
}


/* ========================================
   RÉSULTATS DE RECHERCHE
======================================== */

body.search-results .entries{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:18px;
    width:min(900px,90%);
    margin:0 auto;
}

body.search-results article{
    padding:28px 32px;
    background:#FFFDF9;
    border:1px solid rgba(23,23,42,.08);
    border-radius:16px;
    box-shadow:none;
}

body.search-results .entry-meta{
    display:none!important;
}

body.search-results .entry-title a{
    color:#17172A!important;
    text-decoration:none;
}

body.search-results .entry-title a:hover{
    color:#F7B085!important;
}

body.search-results .entry-excerpt{
    margin-bottom:0;
    color:#4B4B5A;
    line-height:1.6;
}

body.search-results .devso-search-link{
    display:inline-block;
    margin-top:16px;
    color:#7D4B92;
    font-weight:800;
    text-decoration:none;
}

body.search-results .devso-search-link:hover{
    color:#FC6189;
}


/* ========================================
   8. FOOTER
======================================== */

/* Grille principale */
.devso-footer-main{
    position:relative;
    display:grid;
    grid-template-columns:1.3fr .8fr .8fr 1fr;
    align-items:start;
    gap:55px;
    width:min(1150px,90%);
    margin:0 auto;
    padding:50px 0 35px;
    background:#17172A;
    color:#F7F3ED;
}

/* Ligne rétro supérieure */
.devso-footer-main::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(
        90deg,
        #FACE89,
        #F7B085,
        #FC6189,
        #7D4B92
    );
}

/* Identité */
.devso-footer-brand{
    max-width:340px;
}

.devso-footer-brand img{
    width:155px;
    height:auto;
    margin-bottom:22px;
}

.devso-footer-tagline{
    margin:0 0 16px;
    color:#F7F3ED;
    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:1.45rem;
    font-weight:400;
    line-height:1.25;
}

.devso-footer-line{
    width:42px;
    height:2px;
    margin:0 0 18px;
    background:#FACE89;
}

.devso-footer-brand p:last-child{
    margin:0;
    color:#C9CED8;
    font-size:.95rem;
    line-height:1.6;
}

/* Navigation / contact */
.devso-footer-nav,
.devso-footer-contact{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:13px;
    min-width:180px;
}

.devso-footer-main h3{
    margin:0 0 10px;
    color:#FACE89;
    font-size:.9rem;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.1em;
}

.devso-footer-main a{
    color:#F7F3ED;
    text-decoration:none;
    transition:
        color .2s ease,
        transform .2s ease;
}

.devso-footer-main a:hover{
    color:#FC6189;
    transform:translateX(3px);
}

/* CTA du footer */
.devso-footer-cta{
    max-width:220px;
}

.devso-footer-cta p{
    margin:0 0 18px;
    color:#F7F3ED;
    font-family:"Cooper Black","Cooper Std Black",serif;
    font-size:1.25rem;
    line-height:1.25;
}

.devso-footer-cta a{
    display:inline-flex;
    padding:10px 16px;
    border:2px solid #FACE89;
    border-radius:999px;
    color:#FACE89;
    font-weight:700;
}

.devso-footer-cta a:hover{
    background:#FACE89;
    color:#17172A;
    transform:none;
}

/* Bas du footer */
.devso-footer-bottom{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    width:min(1150px,90%);
    margin:0 auto;
    padding:16px 0 20px;
    background:#17172A;
    color:#C9CED8;
    border-top:1px solid rgba(255,255,255,.1);
    font-size:.85rem;
}

.devso-footer-bottom a{
    color:inherit;
    text-decoration:none;
}

.devso-footer-bottom a:hover{
    color:#FC6189;
}

.devso-footer-legal{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

/* ========================================
   9. RESPONSIVE
======================================== */

@media(max-width:900px){

    .devso-footer-main{
        grid-template-columns:1fr 1fr;
        gap:45px;
    }

    .devso-footer-brand{
        grid-column:1 / -1;
    }

    .devso-footer-cta{
        max-width:none;
    }
}

@media(max-width:781px){

    .devso-pinball{
        display:none;
    }
}

@media(max-width:700px){

    .devso-demo{
        width:min(92%,760px);
    }

    .devso-cassette{
        padding:20px;
    }

    .devso-cassette-label{
        padding:30px 18px 22px;
    }

    .devso-cassette-reels{
        gap:45px;
    }

    .devso-reel{
        width:60px!important;
        height:60px!important;
        min-height:60px!important;
    }

    .devso-reel::before{
        inset:13px;
    }
}

@media(max-width:600px){

    .devso-footer-main{
        grid-template-columns:1fr;
        gap:35px;
        width:88%;
        padding:45px 0 35px;
    }

    .devso-footer-brand{
        grid-column:auto;
    }

    .devso-footer-nav,
    .devso-footer-contact{
        min-width:0;
    }

    .devso-footer-bottom{
        width:88%;
        flex-direction:column;
        align-items:flex-start;
    }

    .devso-footer-legal{
        gap:12px 20px;
    }
}

@media(prefers-reduced-motion:reduce){

    .devso-browser,
    .devso-reel,
    .devso-slider-handle,
    .devso-code,
    .devso-process-card,
    .devso-demo,
    .devso-jellyfish{
        animation:none!important;
        transition:none!important;
    }

    .devso-reveal-ready .devso-showcase,
    .devso-reveal-ready .devso-journey-eyebrow,
    .devso-reveal-ready .devso-journey h2,
    .devso-reveal-ready .devso-journey-intro,
    .devso-reveal-ready .devso-process-card,
    .devso-reveal-ready .devso-pinball,
    .devso-reveal-ready .devso-demo,
    .devso-reveal-ready .devso-contact{
        opacity:1!important;
        transform:none!important;
    }
}