/* ~~~~~~~ Page « Créer un site internet » : éditeur de site LeVillage ~~~~~~~
   Complète levillage.css (sections first, introduction, presentation,
   key-figures, apps-supp) ; tout est préfixé par .page-editeur. */

.page-editeur section.first .container .editeur-badge {
    align-self: flex-start;
    max-width: none;
    font-family: 'Montserrat Semibold';
    background: var(--color-main);
    color: var(--color-white);
    font-size: .8rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 3px 10px;
    margin-bottom: 12px;
}
.page-editeur .editeur-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 20px;
}
.page-editeur .editeur-actions .btn-1 { margin: 0; }
.page-editeur .editeur-btn-clair {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}
.page-editeur .editeur-btn-clair:hover { background: var(--color-white); color: var(--color-main); }
.page-editeur .editeur-btn-blanc { background: var(--color-white); color: var(--color-main); border-color: var(--color-white); }
.page-editeur .editeur-btn-blanc:hover { background: transparent; color: var(--color-white); }

/* Introduction : texte + grande capture de l'éditeur (levillage.css limite les images à 120 px) */
.page-editeur .editeur-intro { align-items: center; gap: 4vw; }
.page-editeur .editeur-intro .editeur-intro-texte { flex: 1 1 40%; }
.page-editeur .editeur-intro .editeur-intro-texte p { width: auto; }
.page-editeur .editeur-intro .editeur-intro-texte .btn-1 { display: inline-block; margin-top: 12px; }
.page-editeur .editeur-intro > img {
    flex: 1 1 55%;
    width: 55%;
    height: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
}
.page-editeur .presentation .element img { box-shadow: 0 8px 28px rgba(0, 0, 0, .12); }

/* Trois étapes */
.page-editeur .editeur-etapes { padding: 6vh 0; }
.page-editeur .editeur-etapes h2,
.page-editeur .editeur-inclus h2,
.page-editeur .editeur-faq h2 { text-align: center; color: var(--color-main); margin-bottom: 4vh; }
.page-editeur .editeur-etapes ol {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3vw;
}
.page-editeur .editeur-etapes ol { align-items: start; }
.page-editeur .editeur-etapes li { display: block; text-align: center; margin: 0; padding: 0; }
.page-editeur .editeur-etape-num {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--color-main);
    color: var(--color-white);
    font-family: 'Montserrat Bold';
    font-size: 1.5rem;
    margin-bottom: 12px;
}
.page-editeur .editeur-etapes h3 { margin: 0 0 8px; }

/* Inclus */
.page-editeur .editeur-inclus { background: var(--color-grey-background); padding: 6vh 0; }
.page-editeur .editeur-inclus ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 1100px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px 3vw;
}
.page-editeur .editeur-inclus li { display: flex; gap: 14px; align-items: flex-start; margin: 0; padding: 0; }
.page-editeur .editeur-inclus li i { color: var(--color-main); font-size: 1.6rem; width: 32px; flex-shrink: 0; text-align: center; margin-top: 2px; }
.page-editeur .editeur-inclus li strong { display: block; font-family: 'Raleway Bold'; margin-bottom: 4px; }

/* Questions fréquentes */
.page-editeur .editeur-faq { padding: 6vh 0; }
.page-editeur .editeur-faq .container { max-width: 860px; margin: 0 auto; }
.page-editeur .editeur-faq details { border-bottom: 1px solid #dcdcdc; }
.page-editeur .editeur-faq summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 40px 18px 0;
    font-family: 'Raleway Semibold';
    font-size: 1.1rem;
    position: relative;
}
.page-editeur .editeur-faq summary::-webkit-details-marker { display: none; }
.page-editeur .editeur-faq summary::after {
    content: "+";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-main);
    font-size: 1.6rem;
    transition: transform .2s;
}
.page-editeur .editeur-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.page-editeur .editeur-faq details p { margin: 0 0 18px; }
.page-editeur .editeur-faq a { color: var(--color-main); }

/* WordPress */
.page-editeur .editeur-wordpress { align-items: center; gap: 4vw; background: var(--color-grey-background); }
.page-editeur .editeur-wordpress .editeur-intro-texte { flex: 1; }
.page-editeur .editeur-wordpress .editeur-intro-texte p { width: auto; }
.page-editeur .editeur-wordpress .btn-1 { display: inline-block; margin-top: 12px; }
.page-editeur .editeur-logo-wp { width: 120px; }

/* Appel final */
.page-editeur .editeur-cta { background: var(--color-main); color: var(--color-white); text-align: center; padding: 7vh 0; }
.page-editeur .editeur-cta h2 { color: var(--color-white); margin: 0 0 10px; }
.page-editeur .editeur-cta .editeur-actions { justify-content: center; }

@media screen and (max-width: 1100px) {
    .page-editeur .editeur-intro { flex-direction: column; }
    .page-editeur .editeur-intro > img { width: 100%; }
    .page-editeur .editeur-inclus ul { grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width: 769px) {
    .page-editeur .editeur-etapes .container,
    .page-editeur .editeur-inclus .container,
    .page-editeur .editeur-faq .container,
    .page-editeur .editeur-cta .container { padding-left: 20px; padding-right: 20px; }
    .page-editeur .editeur-inclus ul { gap: 20px; }
    .page-editeur .editeur-etapes ol,
    .page-editeur .editeur-inclus ul { grid-template-columns: 1fr; }
    .page-editeur .editeur-wordpress { flex-direction: column; text-align: center; }
}