/* =========================================================
   LOVUTOO — PAGE ABOUT
   Ce fichier ne sert plus qu'à about.php.
   Le style des conditions est désormais dans
   style_terms_conditions.css.
   ========================================================= */

body {
    background-color: #18171a;
}

* {
    font-family: Caladea, Merriweather, serif;
}

/* Palette : fond #18171a | cartes #242527 | bordures #343438
             rose #EC2C8E | rose survol #ff3ba0
   Textes en blanc, sur-titres et "Welcome" en rose.
   Aucune animation : la page est entièrement statique.

   Le cadrage des photos (horizontal, vertical, zoom) se règle
   tout en bas du fichier, bloc "RÉGLAGE DES PHOTOS". */

/* --- Structure : page longue et centrée, sans barre latérale --- */

.global_page {
    display: block;
    width: 100%;
    overflow-x: hidden;
    background-color: #18171a;
}

.global_page .box {
    display: block;
    height: auto;
    background-color: #18171a;
}

.global_page .box_text {
    position: relative;
    z-index: 1;
    display: block;
    flex: none;
    margin-top: 7rem;      /* espace sous l'en-tête du site */
    margin-left: 0;        /* plus de barre latérale */
    margin-bottom: 0;
    padding: 0 2.5rem 1.5rem 2.5rem;
    overflow: visible;
    background-color: #18171a;
}

.about_content {
    max-width: 66rem;
    margin: 0 auto;
}

/* Largeur de la colonne identique à la version qui avait la barre
   latérale : les photos conservent exactement les mêmes proportions
   à toutes les tailles d'écran.
   Sur les grands écrans cela ne change rien (66rem dans les deux cas).
   Pour occuper toute la largeur disponible, supprime ce bloc. */

@media only screen and (min-width: 1001px) {

    .about_content {
        max-width: min(66rem, 100vw - 19rem);
    }

}

@media only screen and (min-width: 801px) and (max-width: 1000px) {

    .about_content {
        max-width: min(66rem, 100vw - 18rem);
    }

}


/* =========================================================
   MOTEUR DE CADRAGE DES PHOTOS
   Chaque photo est pilotée par 3 variables :
       --x    : position horizontale (0% gauche -> 100% droite)
       --y    : position verticale   (0% haut   -> 100% bas)
       --zoom : agrandissement       (100% = normal, 130% = zoom)
   Les valeurs se règlent tout en bas du fichier.
   ========================================================= */

.about_hero_image,
.about_final_image,
.about_photo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--zoom, 100%);
    height: var(--zoom, 100%);
    object-fit: cover;
    object-position: var(--x, 50%) var(--y, 50%);
}


/* --- Bannière --- */

.about_hero {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 32rem;
    margin-top: 1.5rem;
    padding: 3.2rem 2.5rem;
    border: .2rem solid #343438;
    border-radius: 2.8rem;
    overflow: hidden;
}

.about_hero_media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.about_hero_veil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(to bottom, rgba(24, 23, 26, .5) 0%, rgba(24, 23, 26, .8) 60%, rgba(24, 23, 26, .95) 100%),
        radial-gradient(circle at 50% 45%, rgba(236, 44, 142, .18) 0%, rgba(24, 23, 26, 0) 62%);
}

.about_hero_content {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    text-align: center;
}

.about_hero_title {
    margin: 1rem 0 0 0;
    font-size: 2.7rem;
    line-height: 1.15;
    font-weight: bold;
    color: white;
    text-shadow: 0 .4rem 1.4rem rgba(0, 0, 0, .55);
}

.about_hero_subtitle {
    margin: .9rem auto 0 auto;
    max-width: 30rem;
    font-size: 1.3rem;
    line-height: 1.6;
    color: white;
    text-shadow: 0 .2rem 1rem rgba(0, 0, 0, .5);
}


/* --- Sur-titres roses --- */

.about_eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    font-size: 1.45rem;
    font-weight: bold;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #EC2C8E;
}

.about_eyebrow::before {
    content: "";
    width: 3rem;
    height: .18rem;
    background-color: #EC2C8E;
}

.about_hero_content .about_eyebrow::after,
.about_header .about_eyebrow::after {
    content: "";
    width: 3rem;
    height: .18rem;
    background-color: #EC2C8E;
}


/* --- Éléments communs --- */

.about_section {
    padding: 3.2rem 0;
}

.about_header {
    max-width: 48rem;
    margin: 0 auto 2rem auto;
    text-align: center;
}

.about_title {
    margin: .7rem 0 1rem 0;
    font-size: 2.1rem;
    line-height: 1.25;
    font-weight: bold;
    color: white;
}

.about_text {
    margin: 0 0 .8rem 0;
    font-size: 1.15rem;
    line-height: 1.85;
    color: white;
}

.about_text_center {
    text-align: center;
}

.about_text_highlight {
    margin: 1.8rem 0 0 0;
    font-size: 1.3rem;
    color: white;
}

.about_prose {
    max-width: 42rem;
    margin: 0 auto;
    text-align: center;
}

/* Phrase mise en avant, sans encadré :
   simple trait rose au-dessus, comme les sur-titres. */
.about_lead {
    position: relative;
    max-width: 38rem;
    margin: 1.8rem auto 0 auto;
    padding-top: 1.7rem;
    font-size: 1.5rem;
    line-height: 1.6;
    font-weight: bold;
    color: white;
    text-align: center;
}

.about_lead::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 4rem;
    height: .18rem;
    margin-left: -2rem;
    background-color: #EC2C8E;
}


/* --- Retours a la ligne (fonction text_sentences) ---
   La fonction rend insécable le DÉBUT de chaque phrase :
   une phrase ne peut plus commencer par un mot isolé en
   fin de ligne, mais elle démarre quand même sur la ligne
   en cours dès que ses premiers mots y tiennent. --- */

.sentence {
    display: inline-block;
    max-width: 100%;
}

/* Évite un mot seul sur la dernière ligne d'un paragraphe. */
.about_hero_subtitle,
.about_text,
.about_lead,
.about_card_text,
.about_final_text {
    text-wrap: pretty;
}

/* Titres : équilibre les lignes. */
.about_hero_title,
.about_title,
.about_card_title,
.about_final_title {
    text-wrap: balance;
}


/* --- Sections image + texte --- */

.about_split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3.5rem;
    padding: 3rem 0;
}

.about_split_media {
    position: relative;
    height: 28rem;
    border: .2rem solid #343438;
    border-radius: 2.4rem;
    overflow: hidden;
}

.about_split_media::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(24, 23, 26, .55), rgba(24, 23, 26, 0) 50%);
    pointer-events: none;
}

.about_split_reverse .about_split_media {
    order: 2;
}


/* --- Cartes compatibilité --- */

.about_cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}

.about_card {
    padding: 1.7rem;
    background-color: #242527;
    border: .2rem solid #343438;
    border-radius: 1.8rem;
}

.about_card_title {
    margin: 0 0 .6rem 0;
    font-size: 1.45rem;
    font-weight: bold;
    color: white;
}

.about_card_text {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.75;
    color: white;
}


/* --- Centres d'intérêt --- */

.about_interests {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.about_interest {
    display: flex;
    flex-direction: column;
    background-color: #242527;
    border: .2rem solid #343438;
    border-radius: 1.8rem;
    overflow: hidden;
}

/* La photo est séparée du texte par une bordure */
.about_interest_media {
    position: relative;
    height: 17rem;
    overflow: hidden;
    border-bottom: .2rem solid #343438;
}

.about_interest_content {
    padding: 1.6rem;
}

.about_interest:first-child {
    grid-column: span 2;
}

.about_interest:first-child .about_interest_media {
    height: 21rem;
}


/* --- Liste --- */

.about_list {
    margin: 1.1rem 0 0 0;
    padding: 0;
    list-style: none;
}

.about_list_item {
    position: relative;
    margin-bottom: .6rem;
    padding-left: 1.8rem;
    font-size: 1.15rem;
    line-height: 1.7;
    color: white;
}

.about_list_item::before {
    content: "";
    position: absolute;
    top: .85rem;
    left: 0;
    width: .9rem;
    height: .14rem;
    background-color: #EC2C8E;
}


/* --- Appel à l'action final --- */

.about_final {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 30rem;
    margin-top: 1.2rem;
    padding: 3.2rem 2.5rem;
    border: .2rem solid #343438;
    border-radius: 2.8rem;
    overflow: hidden;
}

.about_final_media {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.about_final_veil {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(to bottom, rgba(24, 23, 26, .86) 0%, rgba(24, 23, 26, .78) 45%, rgba(24, 23, 26, .9) 100%),
        radial-gradient(circle at 50% 55%, rgba(236, 44, 142, .2) 0%, rgba(24, 23, 26, 0) 65%);
}

.about_final_content {
    position: relative;
    z-index: 1;
    max-width: 40rem;
    text-align: center;
}

.about_final_title {
    margin: 0 0 1rem 0;
    font-size: 2.4rem;
    line-height: 1.2;
    font-weight: bold;
    color: white;
    text-shadow: 0 .3rem 1.4rem rgba(0, 0, 0, .5);
}

.about_final_text {
    margin: 0 auto 1.2rem auto;
    max-width: 34rem;
    font-size: 1.2rem;
    line-height: 1.8;
    color: white;
}

.about_final_welcome {
    margin: 0;
    font-size: 1.5rem;
    font-weight: bold;
    color: #EC2C8E;
}


/* --- Bouton (identique à celui du formulaire) --- */

.about_button_location {
    margin-top: 1.4rem;
    text-align: center;
}

.about_button {
    all: unset;
    display: inline-block;
    padding: .6rem;
    cursor: pointer;
}

.about_button span {
    display: block;
    padding: .8rem 1.8rem;
    font-size: 1.25rem;
    font-weight: bold;
    white-space: nowrap;
    color: white;
    background-color: #EC2C8E;
    border: none;
    border-radius: 4rem;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.about_button span:hover {
    background-color: #ff3ba0;
    transition: all .2s ease-in-out;
}

.about_button:focus-visible span {
    outline: .18rem solid white;
    outline-offset: .25rem;
}


/* --- Petit footer de fin de page --- */

.about_footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: .6rem;
    max-width: 66rem;
    margin: 0 auto;
    padding: 1.1rem 2.5rem 1.2rem 2.5rem;
    border-top: .2rem solid #343438;
}

.about_footer_text {
    font-size: 1rem;
    color: white;
}

.about_footer_separator {
    font-size: 1rem;
    color: #4a4a52;
}

.about_footer_link {
    font-size: 1rem;
    color: white;
    text-decoration: none;
}

.about_footer_link:hover {
    color: #EC2C8E;
}


/*Desktop*/
@media only screen and (max-width: 1300px) {

    .about_hero_title {
        font-size: 2.3rem;
    }

    .about_split {
        gap: 2.5rem;
    }

    .about_split_media {
        height: 25rem;
    }

    .about_interests {
        grid-template-columns: repeat(2, 1fr);
    }

    .about_interest:first-child {
        grid-column: span 2;
    }

    .about_interest:first-child .about_interest_media {
        height: 17rem;
    }

}


/*Tablette*/
@media only screen and (max-width: 1000px) {

    .global_page .box_text {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .about_hero {
        min-height: 28rem;
        padding: 2.8rem 2rem;
    }

    .about_hero_title {
        font-size: 2rem;
    }

    .about_split {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding: 2.4rem 0;
    }

    .about_split_media {
        height: 22rem;
        border-radius: 2rem;
    }

    .about_split_reverse .about_split_media {
        order: 0;
    }

    .about_final_title {
        font-size: 2rem;
    }

}


/*Mobile*/
@media only screen and (max-width: 800px) {

    .global_page .box_text {
        margin-top: 6rem;
        margin-left: 0;
        margin-bottom: 0;
        padding: 0 1.5rem 1rem 1.5rem;
    }

    .about_hero {
        margin-top: 1rem;
    }

    .about_section {
        padding: 2.4rem 0;
    }

    .about_footer {
        padding: 1rem 1.5rem 1.2rem 1.5rem;
    }

}


/* =========================================================
   ÉCRANS INTERMÉDIAIRES : 601px -> 800px
   Présentation différente, pour que les photos
   restent entièrement lisibles :
   - photos de section en cadre carré centré
   - cartes centres d'intérêt en LIGNES horizontales
   ========================================================= */

@media only screen and (min-width: 601px) and (max-width: 800px) {

    .about_hero {
        min-height: 34rem;
    }

    .about_split_media {
        width: 100%;
        max-width: 30rem;
        height: 27rem;
        margin: 0 auto;
    }

    .about_split_content {
        max-width: 34rem;
        margin: 0 auto;
    }

    .about_cards {
        grid-template-columns: 1fr;
        max-width: 36rem;
        margin: 0 auto;
    }

    .about_interests {
        grid-template-columns: 1fr;
        gap: 1.2rem;
    }

    .about_interest {
        flex-direction: row;
        align-items: stretch;
    }

    .about_interest:first-child {
        grid-column: span 1;
    }

    /* Le texte est à DROITE : la bordure passe sur le côté */
    .about_interest_media,
    .about_interest:first-child .about_interest_media {
        flex: 0 0 42%;
        height: auto;
        min-height: 17rem;
        border-bottom: none;
        border-right: .2rem solid #343438;
    }

    .about_interest_content {
        display: flex;
        flex: 1;
        flex-direction: column;
        justify-content: center;
        padding: 1.4rem 1.6rem;
    }

    .about_final {
        min-height: 32rem;
    }

}


/*Mobile*/
@media only screen and (max-width: 600px) {

    .about_hero {
        min-height: 26rem;
        padding: 2.4rem 1.2rem;
        border-radius: 2rem;
    }

    .about_hero_title {
        font-size: 1.5rem;
    }

    .about_hero_subtitle {
        font-size: 1.08rem;
    }

    .about_eyebrow {
        font-size: 1.2rem;
        letter-spacing: .12em;
        gap: .7rem;
    }

    .about_eyebrow::before,
    .about_hero_content .about_eyebrow::after,
    .about_header .about_eyebrow::after {
        width: 2rem;
    }

    .about_title {
        font-size: 1.6rem;
    }

    .about_text {
        font-size: 1.05rem;
    }

    .about_text_highlight {
        font-size: 1.12rem;
    }

    .about_lead {
        margin-top: 1.6rem;
        padding-top: 1.5rem;
        font-size: 1.22rem;
    }

    .about_cards {
        grid-template-columns: 1fr;
    }

    .about_card {
        padding: 1.4rem;
        border-radius: 1.5rem;
    }

    .about_card_title {
        font-size: 1.25rem;
    }

    .about_card_text {
        font-size: 1rem;
    }

    .about_interests {
        grid-template-columns: 1fr;
    }

    .about_interest {
        border-radius: 1.5rem;
    }

    .about_interest:first-child {
        grid-column: span 1;
    }

    .about_interest_media,
    .about_interest:first-child .about_interest_media {
        height: 20rem;
    }

    .about_split_media {
        height: 24rem;
        border-radius: 1.5rem;
    }

    .about_list_item {
        font-size: 1.05rem;
    }

    .about_footer_text,
    .about_footer_separator,
    .about_footer_link {
        font-size: .92rem;
    }

    .about_final {
        min-height: 26rem;
        padding: 2.4rem 1.2rem;
        border-radius: 2rem;
    }

    .about_final_title {
        font-size: 1.5rem;
    }

    .about_final_text {
        font-size: 1.05rem;
    }

    .about_final_welcome {
        font-size: 1.25rem;
    }

    .about_button span {
        padding: .7rem 1.5rem;
        font-size: 1.05rem;
    }

}


/*Mobile*/
@media only screen and (max-width: 500px) {

    .global_page .box_text {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .about_hero_title {
        font-size: 1.2rem;
    }

    .about_title {
        font-size: 1.4rem;
    }

    .about_eyebrow {
        font-size: 1.1rem;
    }

    .about_lead {
        font-size: 1.12rem;
    }

    .about_section {
        padding: 2rem 0;
    }

    .about_footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .about_interest_media,
    .about_interest:first-child .about_interest_media {
        height: 18rem;
    }

    .about_split_media {
        height: 21rem;
    }

    .about_final_title {
        font-size: 1.2rem;
    }

    .about_button span {
        font-size: 1rem;
    }

}



/* #########################################################
   RÉGLAGE DES PHOTOS
   Ce bloc est VOLONTAIREMENT tout en bas du fichier :
   étant écrit en dernier, il gagne toujours sur le reste.
   C'est le seul endroit à modifier pour recadrer une photo.

   Chaque photo se règle avec 3 valeurs en pourcentage :

     --x     HORIZONTAL
             0%   = on garde la gauche de la photo
             50%  = centré
             100% = on garde la droite de la photo

     --y     VERTICAL
             0%   = on garde le haut de la photo
             50%  = centré
             100% = on garde le bas de la photo

     --zoom  AGRANDISSEMENT
             100% = taille normale
             130% = zoom avant de 30%
             (en dessous de 100% la photo ne remplirait plus
              le cadre, reste donc >= 100%)

   Exemple : --x: 50%; --y: 30%; --zoom: 120%;
             centré horizontalement, un peu vers le haut,
             zoomé de 20%.

   TROIS NIVEAUX, du plus général au plus précis :

   1) about_photo_<emplacement>
      valeur par défaut de l'emplacement.

   2) about_photo_big_<variation>
      grands cadres : bannière, bloc final,
      "More than a dating site", "Built for real people".

   3) about_photo_card_<variation>
      cartes centres d'intérêt.

   Les niveaux 2 et 3 sont écrits après le niveau 1, ils sont
   donc prioritaires. Tu peux ne redéfinir qu'une seule valeur
   (par exemple juste --zoom), les autres restent héritées.
   ######################################################### */


/* =============== PC / GRAND ÉCRAN =============== */

/* --- 1) Par emplacement --- */

.about_photo_hero            { --x: 50%;  --y: 30%;  --zoom: 100%; }   /* Bannière du haut */
.about_photo_final           { --x: 50%;  --y: 35%;  --zoom: 100%; }   /* Your next chapter starts here */
.about_photo_search          { --x: 50%;  --y: 30%;  --zoom: 100%; }   /* More than a dating site */
.about_photo_real_people     { --x: 50%;  --y: 25%;  --zoom: 100%; }   /* Built for real people */
.about_photo_music           { --x: 50%;  --y: 50%;  --zoom: 100%; }   /* Music and Soundtracks */
.about_photo_creative        { --x: 50%;  --y: 45%;  --zoom: 100%; }   /* Creative Arts and Lifestyle */
.about_photo_sports          { --x: 50%;  --y: 40%;  --zoom: 100%; }   /* Sports and Outdoors */
.about_photo_motors          { --x: 50%;  --y: 50%;  --zoom: 100%; }   /* Motors and Mechanics */
.about_photo_living          { --x: 50%;  --y: 60%;  --zoom: 100%; }   /* Living and Leisure */

/* --- 2) Par variation, grands cadres --- */

.about_photo_big_general_1   { --x: 50%;  --y: 30%;  --zoom: 100%; }
.about_photo_big_general_2   { --x: 50%;  --y: 30%;  --zoom: 100%; }
.about_photo_big_general_3   { --x: 50%;  --y: 60%;  --zoom: 100%; }
.about_photo_big_general_4   { --x: 50%;  --y: 35%;  --zoom: 100%; }
.about_photo_big_general_5   { --x: 50%;  --y: 52%;  --zoom: 100%; }
.about_photo_big_woman_1     { --x: 50%;  --y: 30%;  --zoom: 100%; }
.about_photo_big_woman_2     { --x: 50%;  --y: 30%;  --zoom: 100%; }
.about_photo_big_woman_3     { --x: 50%;  --y: 25%;  --zoom: 100%; }
.about_photo_big_woman_4     { --x: 50%;  --y: 30%;  --zoom: 100%; }
.about_photo_big_woman_5     { --x: 50%;  --y: 37%;  --zoom: 100%; }
.about_photo_big_woman_6     { --x: 50%;  --y: 30%;  --zoom: 100%; }
.about_photo_big_woman_7     { --x: 50%;  --y: 20%;  --zoom: 100%; }
.about_photo_big_woman_8     { --x: 50%;  --y: 35%;  --zoom: 100%; }
.about_photo_big_woman_9     { --x: 50%;  --y: 33%;  --zoom: 100%; }
.about_photo_big_woman_10    { --x: 50%;  --y: 60%;  --zoom: 100%; }
.about_photo_big_woman_11    { --x: 50%;  --y: 60%;  --zoom: 100%; }
.about_photo_big_woman_12    { --x: 50%;  --y: 65%;  --zoom: 100%; }
.about_photo_big_woman_13    { --x: 50%;  --y: 30%;  --zoom: 100%; }
.about_photo_big_woman_14    { --x: 50%;  --y: 35%;  --zoom: 100%; }
.about_photo_big_lesbian_1   { --x: 50%;  --y: 27%;  --zoom: 100%; }
.about_photo_big_gay_1       { --x: 50%;  --y: 37%;  --zoom: 100%; }
.about_photo_big_non_binary_1{ --x: 50%;  --y: 27%;  --zoom: 100%; }
.about_photo_big_senior_1    { --x: 50%;  --y: 30%;  --zoom: 100%; }
.about_photo_big_senior_2    { --x: 50%;  --y: 30%;  --zoom: 100%; }
.about_photo_big_senior_3    { --x: 50%;  --y: 52%;  --zoom: 100%; }
.about_photo_big_biker_1     { --x: 50%;  --y: 72%;  --zoom: 100%; }
.about_photo_big_biker_2     { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_big_biker_3     { --x: 50%;  --y: 55%;  --zoom: 100%; }
.about_photo_big_gamer_1     { --x: 50%;  --y: 57%;  --zoom: 100%; }
.about_photo_big_gamer_2     { --x: 50%;  --y: 32%;  --zoom: 100%; }
.about_photo_big_sport_1     { --x: 50%;  --y: 57%;  --zoom: 100%; }
.about_photo_big_sport_2     { --x: 50%;  --y: 31%;  --zoom: 100%; }
.about_photo_big_dogs_1      { --x: 50%;  --y: 70%;  --zoom: 100%; }
.about_photo_big_dogs_2      { --x: 50%;  --y: 75%;  --zoom: 100%; }
.about_photo_big_christian_1 { --x: 50%;  --y: 57%;  --zoom: 100%; }

/* --- 3) Par variation, cartes centres d'intérêt --- */

.about_photo_card_general_1  { --x: 50%;  --y: 20%;  --zoom: 100%; }
.about_photo_card_general_2  { --x: 50%;  --y: 15%;  --zoom: 100%; }
.about_photo_card_general_3  { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_general_4  { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_general_5  { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_gamer_1    { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_gamer_2    { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_sport_1    { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_sport_2    { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_biker_1    { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_biker_2    { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_biker_3    { --x: 50%;  --y: 40%;  --zoom: 100%; }
.about_photo_card_dogs_1     { --x: 50%;  --y: 60%;  --zoom: 100%; }
.about_photo_card_dogs_2     { --x: 50%;  --y: 60%;  --zoom: 100%; }


/* =============== MOBILE (sous 800px) =============== */

@media only screen and (max-width: 800px) {

    /* --- 1) Par emplacement --- */

    .about_photo_hero            { --x: 50%;  --y: 30%;  --zoom: 100%; }   /* Bannière du haut */
    .about_photo_final           { --x: 50%;  --y: 35%;  --zoom: 100%; }   /* Your next chapter starts here */
    .about_photo_search          { --x: 50%;  --y: 30%;  --zoom: 100%; }   /* More than a dating site */
    .about_photo_real_people     { --x: 50%;  --y: 25%;  --zoom: 100%; }   /* Built for real people */
    .about_photo_music           { --x: 50%;  --y: 50%;  --zoom: 100%; }   /* Music and Soundtracks */
    .about_photo_creative        { --x: 50%;  --y: 45%;  --zoom: 100%; }   /* Creative Arts and Lifestyle */
    .about_photo_sports          { --x: 50%;  --y: 40%;  --zoom: 100%; }   /* Sports and Outdoors */
    .about_photo_motors          { --x: 50%;  --y: 50%;  --zoom: 100%; }   /* Motors and Mechanics */
    .about_photo_living          { --x: 50%;  --y: 60%;  --zoom: 100%; }   /* Living and Leisure */
    
    /* --- 2) Par variation, grands cadres --- */

    .about_photo_big_general_1   { --x: 50%;  --y: 30%;  --zoom: 100%; }
    .about_photo_big_general_2   { --x: 50%;  --y: 30%;  --zoom: 100%; }
    .about_photo_big_general_3   { --x: 50%;  --y: 60%;  --zoom: 100%; }
    .about_photo_big_general_4   { --x: 50%;  --y: 35%;  --zoom: 100%; }
    .about_photo_big_general_5   { --x: 50%;  --y: 52%;  --zoom: 100%; }
    .about_photo_big_woman_1     { --x: 50%;  --y: 30%;  --zoom: 100%; }
    .about_photo_big_woman_2     { --x: 50%;  --y: 30%;  --zoom: 100%; }
    .about_photo_big_woman_3     { --x: 50%;  --y: 25%;  --zoom: 100%; }
    .about_photo_big_woman_4     { --x: 50%;  --y: 30%;  --zoom: 100%; }
    .about_photo_big_woman_5     { --x: 50%;  --y: 37%;  --zoom: 100%; }
    .about_photo_big_woman_6     { --x: 50%;  --y: 30%;  --zoom: 100%; }
    .about_photo_big_woman_7     { --x: 50%;  --y: 20%;  --zoom: 100%; }
    .about_photo_big_woman_8     { --x: 50%;  --y: 35%;  --zoom: 100%; }
    .about_photo_big_woman_9     { --x: 50%;  --y: 33%;  --zoom: 100%; }
    .about_photo_big_woman_10    { --x: 50%;  --y: 60%;  --zoom: 100%; }
    .about_photo_big_woman_11    { --x: 50%;  --y: 60%;  --zoom: 100%; }
    .about_photo_big_woman_12    { --x: 50%;  --y: 65%;  --zoom: 100%; }
    .about_photo_big_woman_13    { --x: 50%;  --y: 30%;  --zoom: 100%; }
    .about_photo_big_woman_14    { --x: 50%;  --y: 35%;  --zoom: 100%; }
    .about_photo_big_lesbian_1   { --x: 50%;  --y: 27%;  --zoom: 100%; }
    .about_photo_big_gay_1       { --x: 50%;  --y: 37%;  --zoom: 100%; }
    .about_photo_big_non_binary_1{ --x: 50%;  --y: 27%;  --zoom: 100%; }
    .about_photo_big_senior_1    { --x: 50%;  --y: 30%;  --zoom: 100%; }
    .about_photo_big_senior_2    { --x: 50%;  --y: 50%;  --zoom: 100%; }
    .about_photo_big_senior_3    { --x: 50%;  --y: 52%;  --zoom: 100%; }
    .about_photo_big_biker_1     { --x: 50%;  --y: 72%;  --zoom: 100%; }
    .about_photo_big_biker_2     { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_big_biker_3     { --x: 50%;  --y: 55%;  --zoom: 100%; }
    .about_photo_big_gamer_1     { --x: 50%;  --y: 57%;  --zoom: 100%; }
    .about_photo_big_gamer_2     { --x: 50%;  --y: 32%;  --zoom: 100%; }
    .about_photo_big_sport_1     { --x: 50%;  --y: 57%;  --zoom: 100%; }
    .about_photo_big_sport_2     { --x: 50%;  --y: 31%;  --zoom: 100%; }
    .about_photo_big_dogs_1      { --x: 50%;  --y: 70%;  --zoom: 100%; }
    .about_photo_big_dogs_2      { --x: 50%;  --y: 75%;  --zoom: 100%; }
    .about_photo_big_christian_1 { --x: 50%;  --y: 57%;  --zoom: 100%; }

    /* --- 3) Par variation, cartes centres d'intérêt --- */

    .about_photo_card_general_1  { --x: 50%;  --y: 20%;  --zoom: 100%; }
    .about_photo_card_general_2  { --x: 50%;  --y: 15%;  --zoom: 100%; }
    .about_photo_card_general_3  { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_general_4  { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_general_5  { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_gamer_1    { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_gamer_2    { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_sport_1    { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_sport_2    { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_biker_1    { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_biker_2    { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_biker_3    { --x: 50%;  --y: 40%;  --zoom: 100%; }
    .about_photo_card_dogs_1     { --x: 50%;  --y: 60%;  --zoom: 100%; }
    .about_photo_card_dogs_2     { --x: 50%;  --y: 60%;  --zoom: 100%; }

}