* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin-top : 10px;
    margin-bottom: 50px;
}

/* ------------------------
   HEADER
------------------------- */
.div-header {
    margin-top: 20px;
}

/* ------------------------
   CONTENEUR PRINCIPAL
   => 2 colonnes inversées (image à droite, texte à gauche)
------------------------- */
.container {
    max-width: 1000px;
    margin: 0 auto;

    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding: 20px;

    /*
       Clé : on inverse l'ordre.
       => left-col s'affiche à droite, right-col à gauche
    */
    flex-direction: row-reverse;
}

.container p {
    margin-bottom: 1rem;
}


@media screen and (max-width: 768px) {
    .container {
        margin: 30px;
    }
}

/* ------------------------
   COLONNES
------------------------- */
/* Colonne "gauche" dans le code,
   mais s'affiche à droite à l'écran,
   car row-reverse => c'est la 1ère en HTML = .left-col
*/
.left-col {
    flex: 0 0 300px;
}

/* Image fixée à 600px de haut sur grand écran */
.left-col img {
    display: block;
    height: 600px;
    object-fit: cover;
}

/* Colonne "droite" (texte), occupe le reste */
.right-col {
    flex: 1;
}

/* ------------------------
   MEDIA QUERY < 768px
   => On empile dans l'ordre HTML
------------------------- */
@media screen and (max-width: 768px) {

    .container {
        flex-direction: column;
        /* => l'image passera après le texte dans le flux HTML */
    }

    .left-col {
        display: flex;
        justify-content: center;
    }

    .left-col img {
        height: auto;
        max-width: 100%;
    }
}

/* ------------------------
   PHRASE VERTICALE (CÔTÉ DROIT)
------------------------- */
.vertical-phrase {
    position: fixed;
    bottom: 20px;
    right: 30px;
    transform: rotate(-90deg);
    transform-origin: bottom right;
    font-family: "Playfair Display", serif;
    font-size: 13px;
}

/*
   Sur grand écran (≥1000px),
   on positionne la phrase plus précisément
   => la phrase sera alignée comme sur l’autre page,
      mais à droite
*/
@media screen and (min-width: 1000px) {
    .vertical-phrase {
        right: calc(50% - 500px + -10px);
        /*
           -50% = on part du centre
           -500px = la moitié de 1000
           + -10px = ajustement horizontal
           (tu peux ajuster la valeur
            si tu veux la phrase plus ou moins éloignée)
        */
    }
}

/* ------------------------
   FAUSSE PLIURE, FOOTER, etc.
   => Tu gardes le même code
   (si tu veux) que bureau-particulier,
   ou un code commun
------------------------- */
.fausse-pliure {
    /* ... */
}

/* FOOTER...
   Tu peux reprendre le même style
   que dans bureau-particulier.css
*/
.site-footer {
    width: 100%;
    background: #f7f5f0;
    border-top: 2px solid #ccc;
    padding: 2rem 1rem;
    font-family: "Playfair Display", serif;
    /* etc. */
}
.footer-container {
    max-width: 1300px;
    margin: 0 auto;
    /* etc. */
}
/* ...
   reste du code footer ...
*/






/* PHRASE VERTICAL EN BAS A GAUCHE */
.vertical-phrase {
    position: fixed;
    bottom: 20px;
    left: 30px;

    transform: rotate(-90deg);
    transform-origin: bottom left; /* pivot en bas à gauche pour aligner le texte */
    font-family: "Playfair Display", serif;
    font-size: 13px;

}


@media screen and (min-width: 1000px) {
    .vertical-phrase {
        left: calc(50% - 500px + -10px);
    }
}


/* CONTENEUR MAGAZINE => 2 colonnes en grand écran */
.mag-container {
    max-width: 1000px;

    text-align: justify;

    margin: 0 auto;
    /* 2 colonnes + espace entre elles */
    column-count: 2;
    column-gap: 40px;
    /* Justification façon "magazine" */
    text-align: justify;
    padding-left: 15px;
    margin-bottom: 100px;
}

@media screen and (max-width: 800px) {
    .mag-container {
        margin: 30px;
    }
}



* {
    background-color: transparent;
}