*,*::before,*::after{box-sizing:border-box;}
:root {
--color-turquoise: #1aa6a6;
        --color-turquoise-dark: #0f6f74;
        --color-coral: #f27d72;
}
html {
        scroll-behavior: smooth;
}

body{
    margin:0;
    padding:0;
    background:#f7f7f7;
    color:#333;
    font-family: 'Simonetta', Arial,sans-serif;}

h1,h2{
    width:100%;
    margin:40px 0 32px;
    text-align:center;}

h1{
        margin:0 0 1.5rem;
        font-family:"Fraunces",serif;
        font-size:clamp(2rem,4vw,3.6rem);
        font-weight:500;
        line-height:1.1;
        letter-spacing:-0.02em;
        text-align:center;
}

h2{
        font-family:"Fraunces",serif;
        font-size:clamp(1.5rem,3vw,2.3rem);
        font-weight:500;
        line-height:1.2;
        letter-spacing:-0.01em;
}

.grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    gap:24px;
    width:100%;
    max-width:1060px;
    margin:0 auto;}

.card{
    flex:0 1 calc((100% - 24px) / 2);
    width:calc((100% - 24px) / 2);
    max-width:calc((100% - 24px) / 2);
    min-width:280px;
    display:flex;
    flex-direction:column;
    background:#fff;
    border-radius:16px;
    padding:24px;
    box-shadow:0 5px 18px rgba(0,0,0,.08);}

    .card-full{
    flex-basis:100%;
    width:75%;
    max-width:900px;
}

.card-full .demo,
.card-full .text{
    max-width:660px;
    margin-inline:auto;
    text-align:justify;
}

.name{
    font-size:.9rem;
    color:#de6b06;
    margin-bottom:10px;
    font-family:Arial,sans-serif;}

.demo{font-size:clamp(1.3rem,2vw,1.5rem);line-height:1.22;
    margin-bottom:12px;}

.titre{

    font-size:clamp(1.2rem,1.8vw,1.4rem); text-transform: uppercase;
    line-height:1.32;
    margin-bottom:10px;
    word-spacing: .2em;
}

.sous-titre{
    font-size:clamp(1rem,2vw,1.2rem); font-variant: small-caps;  line-height:1.05; margin-bottom:10px;}

.text{font-size:1rem;line-height:1.6;margin-top:auto;}

.text-script{font-size:1.2rem;line-height:1.6;margin-top:auto;}

.card-blue .name,
.card-blue .demo,
.card-blue .text  {
        color: #3e62e2;
}

.card-black {
        background: #263238;
        color: #fff;
}

.card-black .name {
        color: #8ce0dc;
}

.card-black .demo {
        margin-inline: auto;
        font-size: clamp(1.2rem, 1.8vw, 1.5rem);
}



.card-black .text {
        margin-inline: auto;
}

.card-pink {
        background: pink;
        color: #fff;
}

.card-pink .name {
        color: #8ce0dc;
}

.card-pink .demo,
.card-pink .text {
        margin-inline: auto;
}

.card-cream{
        background: linear-gradient(180deg,#fdfcf8 0%,#f6f0e5 100%);
        color:#3c322b;
        border:1px solid rgba(120,95,65,.18);
        box-shadow:
                0 10px 30px rgba(40,30,20,.08),
                inset 0 1px 0 rgba(255,255,255,.8);

}

.card-cream .name{
        color:#8b6b43;
        letter-spacing:.12em;
        text-transform:uppercase;
        font-size:.85rem;
        font-weight:700;
}

.card-cream .demo{
        font-family:"Gideon Roman", serif;
        font-size:clamp(1.5rem, 2vw, 2rem);
        line-height:1.15;
        letter-spacing:.04em;

        margin:1rem auto 1.5rem;
        color:#2d241d;
}

.card-cream .text{
        font-family:"Newsreader", serif;
        font-size:1.12rem;
        line-height:1.8;

        margin-inline:auto;
        color:#5b4c41;
        font-style:italic;
}

.chapter-heading{
        width:100%;
        max-width:1060px;
        margin:2rem auto 2rem;
        text-align:center;
}

.chapter-heading h2{
        margin:3rem 0 1rem;
}

.separator2{
        margin:.25rem auto 0;
}


h2 + .separator2{
        margin-top:0;
}

.separator2{

        position: relative;
        margin: 1rem auto;
        width: min(380px, 70%);
        height: 1px;
        background: #f7f7f7;
}

.separator2::after{
        content:"✦";
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-55%);
        padding:0 .6rem;
        background:#f7f7f7; /* couleur du fond */
        color: var(--color-turquoise);
        font-size:.8rem;
}

.separator1{
        position: relative;
        margin: 2rem auto;
        width: min(380px, 70%);
        height: 1px;
        background: var(--color-turquoise);
}

.separator1::after{
        content:"✦";
        position:absolute;
        left:50%;
        top:50%;
        transform:translate(-50%,-55%);
        padding:0 .6rem;
        background:#f7f7f7; /* couleur du fond */
        color: var(--color-turquoise);
        font-size:.8rem;
}



@media(max-width:700px){
    .card{
        flex-basis:100%;min-width:0
    }

        .grid {
        flex-direction: column;
        gap: 16px;
        padding-inline: 16px;
    }

    .grid > * {
        width: 100%;
        max-width: 100%;
    }
}