/* /!\ SITE ITUBE EMELINE GUFFROY /!\*/
.body_site_itube {
    margin: 0;
    font-family: "Verdana", "Tahoma", sans-serif;
    background: #FFD1F5;
    min-height: 100vh; /* prend toute la hauteur de l’écran */
    display: flex;
    flex-direction: column;
}
/* ── conteneur principal ── */
.crt {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* ça empêche de bloquer les clics */
  z-index: 999; /* ça met l'effet VHS au-dessus */
  background: repeating-linear-gradient( /* lignes horizontales simples */
    rgba(0, 0, 0, 0.15) 0px,
    rgba(0, 0, 0, 0.15) 1px,
    transparent 1px,
    transparent 3px
  );
}
.banniere{
    width: 100%;
    height: auto;
}
.zone-retour-home {
    position: absolute;
    top: 5px;
    right: 5px;
    width: 30px;
    height: 30px;
    cursor: pointer;
}
.top-banner {
    width: 80%;
    margin: 20px auto;
    background: #dbe6f2;
    border: 1px solid #7fa6c9;
    color: #2b5d8a;
    text-align: center;
    padding: 2px 0;
    font-size: 14px;
    font-weight: bold;
}
.container {
    width: 1920px;
    height: 800px;
    margin: auto; /* marge */
    display: flex;
    gap: 25px;
    flex: 1; /* prend tout l’espace disponible */
}

/* ── COLONNES ── */
.gaucheITUNE, .centreITUNE, .droiteITUNE {
    padding: 20px;
    height: 1050px;
}

.gaucheITUNE {
    width: 20%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    box-shadow: 8px 3px 13px 4px rgba(152,152,152,0.74);
}

.centreITUNE {
    width: 55%;
    background: #FFCA44;
    border-radius: 15px;
    box-shadow: 8px 3px 13px 4px rgba(152,152,152,0.74);
}

.droiteITUNE {
    width: 25%;
    background: #FFFFFF;
    border-radius: 15px;
    box-shadow: 8px 3px 13px 4px rgba(152,152,152,0.74);
}

/* ── TITRES ── */

.h2ITUNE {
    color: #ffffff;
}
.title-itunes {
    font-size: 50px;
}
.h3ITUNE {
    font-style: italic;
    text-decoration: underline;
     color: #0030ff;
}
.box {
    background: #fff;
    margin-bottom: 20px;
    padding: 10px;
    border-radius: 10px;
}

/* ── IPOD ── */
.img-1 {
    width: 60%;
    margin-bottom: 20px;
    border-radius: 10px;
}
.side-image {
    width: 100%;
    border-radius: 10px;
    margin-bottom: 20px;
}
/* ── BUTON ── */
button {
    background: #007aff;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer; /* Change le curseur quand on passe dessus */
}

/* ── LISTE MUSIQUE ── */
.song-list li {
    margin-bottom: 10px; /*espace en dessous*/
}

/* ── ARTISTE IMAGE ── */
.artist1 {
    background-image: url('outkast.png');
    height: 200px;
    margin-bottom: 10px;
    border-radius: 10px;
}
.artist2 {
    background-image: url('kelis.png');
    height: 230px;
    margin-bottom: 10px;
    border-radius: 10px;
}
.artist3 {
    background-image: url(/img/cookingmama/NoDoubt.png);
    height: 230px;
    margin-bottom: 10px;
    border-radius: 10px;
}





/* /!\ SITE COOKING MAMA EMELINE GUFFROY /!\*/
/* ── PAGE ── */
body {
    margin: 0;
    background-image: url(/img/cookingmama/fond-cooking.png);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.body_site_cooking_mama {
    font-family: "Verdana", sans-serif;
    display: flex;
    flex-direction: column;
    padding: 40px 10px 0 10px;
    flex: 1; /* pousse la bannière du bas vers le bas */
     align-items: center;
    justify-content: space-between;
}
/* ── BOITE PRINCIPALE ── */
.LE_TOUT {
    width: 1200px;
    position: relative;  /* point de repère pour les éléments enfants en position: absolute */
    display: grid; /* placer les 3 colonnes côte à côte */
    grid-template-columns: 150px 1fr 150px; /* Définit les 3 colonnes (gauche et droite 150px et le centre c'est le reste) */
    background: linear-gradient(to bottom, #ffd1dc, #ff9eb5); /* fond dégradé */
    border: 4px solid #ff6f91; /* bordure tout autour */
    border-radius: 30px;
    padding: 10px 10px 0 10px;
    margin-top: 80px; /* espace pour mama qui dépasse */
    align-items: start;
}

/* ── IMAGES QUI DEPASSENT EN HAUT ── */
.imgenhaut {
    position: absolute; /* se place dans : LE_TOUT */
/* placement de l'image */
    top: -1px;
    left: 10px;
    width: 60px;
    z-index: 10; /* met l'image au dessus des autres element */
}

.imgebannierecooking {
    /* placement de l'image */
    position: absolute; /* se place dans : LE_TOUT */
    top: -78px;
    left: 80px;
    width: 220px;
    z-index: 10; /* met l'image au dessus des autres element */
}

/* ── 3 COLONNES ── */
.gaucheCOOKINGMAMA, .centreCOOKINGMAMA, .droiteCOOKINGMAMA {
    min-height: 750px; /* hauteur minimale */
    padding: 8px;
    margin-top: 80px; /* espace pour les images du haut */
}
/* ── GAUCHE ── */
.gaucheCOOKINGMAMA {
    background: #ffb6c1;
    border-right: 3px solid #ff6f91;
    border-radius: 20px 0 0 20px;
}
.img-gauche {
    width: 100%;
    margin-bottom: 10px;
    border-radius: 10px;
}
/* ── CENTRE ── */
.centreCOOKINGMAMA {
    background: #ffe4ec;
}
/* ── DROITE ── */
.droiteCOOKINGMAMA {
    background: #ffb6c1;
    border-left: 3px solid #ff6f91;
    border-radius: 0 20px 20px 0;
}

/*  ──MINI CASES GAUCHE ET DROITE── */
.bloc {
    background: #fff5f8;
    border: 2px solid #ff6f91;
    border-radius: 8px;
    margin-bottom: 8px; /* marge d'en bas */
    overflow: hidden; /* arrondis aussi les conteneur a l'intérieur */
}

.bloc-titre {
    background: #ff6f91;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 3px 6px;
}

.bloc-contenu {
    padding: 6px 8px;
    font-size: 12px;
    color: #802050;
    line-height: 1.6;
}

.bloc-contenu a { /* prend seulement les <a> */
    color: #c03060;
    text-decoration: none;
    padding: 1px 0;
    border-bottom: 1px dotted #ffb6c1; /* dotted= pointillés */
}

/* ── BLOCS DU CENTRE ── */
.centre-banniere {
    width: 100%;
    height: 120px;
    border-bottom: 2px solid #ff6f91; /* solid= trait plein */
    margin-bottom: 8px; /* marge d'en bas */
}

.centre-bloc {
    border: 2px solid #ff6f91;
    border-radius: 8px;
    margin-bottom: 8px; /* marge d'en bas */
    overflow: hidden; /* arrondis aussi les conteneur a l'intérieur */
}

.centre-titre {
    background: #ff6f91;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    text-align: center;
    padding: 4px 8px;
}

.centre-contenu {
    background-image: url('fond_point.jpg');
    padding: 8px 12px;
    font-size: 12px;
    color: #5a1030;
    line-height: 1.6;
}
.gif-bienvenue {
    float: left; /* permet au gift de se coller au texte */
    height: 40px;
    margin-right: 6px;
}

.date_bleu {
    color: #0030ff;
}

.scroll {
    max-height: 300px;
    overflow-y: scroll; /* pouvoir scroll dans le dernier bloc du centre */
}