@charset "UTF-8";
/* CSS Document */



/* -------------------------------------------------- */
/* REND TON SITE RESPONSIVE SANS CHANGER LE DESIGN */
/* -------------------------------------------------- */

/* Images fluides */
img {
    max-width: 100%;
    height: auto;
}

/* Conteneur principal : devient flexible */
#frame,
#header,
#cours-annonce,
#cours,
#cours-suite,
#cours-suite1,
#cours-suite2,
#myname,
#mail,
#instagram,
#copyright,
#footer,
#amene-brol,
#cree,
#libere-casserole,
#diaporama-photo,
#titre,
#titre-precision,
#photo,
#photo2,
#photobio {
    width: 100% !important;
    max-width: 910px;
    margin: 0 auto;
    float: none;
}



#infos-comment,
#infos-qui,
#infos2,
#titre2,
#ateliers,
#lescours, 
#stages, 
#accompagnements,
#infoateliers,
#infocours,
#infostages,
#info-accompagnement,
#titres,
#titre-comment,
#titres-pour-qui,
#titres-pratique,
#titres-contact,
#mail,





/* Blocs texte (680px) deviennent centrés et fluides */
#titre-cours-intro,
#titre-cours-initiation,
#titre-cours-peinture-meditative,
#titre-cours-fresque,
#titre-cours-intro,
#titre-cours-photo,
#titre-balade-photo,
#titre-pascale,
#titre-secondaire-initiation,
#titre-secondaire-peinture-meditative,
#titre-secondaire-fresque,
#titre-secondaire-photo,
#titre-secondaire-balade-photo,
#text-intro,
#text-presentation-titre,
#text-presentation,
#text-presentation-cours-titre,
#text-presentation-format-titre,
#text-pour-qui-titre,
#text-initiation,
#text-format,
#text-peinture-meditative,
#text-fresque,
#text-photo,
#text-balade-photo,
#text-presentation-2,
#text-pour-qui,
#text-infos-pratiques,
#text-contact,
#text-contact-titre,
#text-photographie,
#text-about-formation,
#bio,
#contact,
#insta,
#mail,
#faq {
    width: 98% !important;
    max-width: 700px;
    margin: 0 auto;
    float: none;
    padding-left: 15px;
    padding-right: 15px;
}






#infos-comment,
#infos-qui,
#infos2,
#titre2,
#ateliers,
#lescours, 
#stages, 
#accompagnements,
#infoateliers,
#infocours,
#infostages,
#info-accompagnement,
#titres,
#titre-comment,
#titres-pour-qui,
#titres-pratique,
#titres-contact,
#titre-cours-photo,
#mail,






/* Correction bio */
#bio {
    text-align: justify;
    padding-right: 15px !important;
}

/* Grilles photos modernisées */
#photo, #photo2 {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

#photo img,
#photo2 img {
    flex: 1 1 calc(33.33% - 10px);
}


/* -------------------------------------------------- */
/* TABLETTES */
/* -------------------------------------------------- */

@media (max-width: 768px) {
	


    #photo img,
    #photo2 img {
        flex: 1 1 calc(50% - 10px);
    }

    #header {
        height: auto;
        padding: 20px 0;
    }
}

/* -------------------------------------------------- */
/* SMARTPHONES */
/* -------------------------------------------------- */

@media (max-width: 480px) {

    /* Conteneur fluide */
    #frame {
        width: 98% !important;
        padding: 0 10px;
    }


 #header {
        height: auto !important;
        padding-top: 5px !important;      /* réduit l'espace au-dessus */
        padding-bottom: 5px !important;   /* réduit l'espace en dessous */
        display: flex !important;          /* active le flex pour centrer */
        flex-direction: column;            /* empile les éléments verticalement */
        justify-content: center;           /* centre verticalement le texte */
        align-items: center;               /* centre horizontalement le texte */
    }
	

    /* H1 principal bien visible */
    h1#photographie {
        font-size: 2.2rem !important; /* ~40px */
        line-height: 1.2;
        text-align: center;
        width: 100% !important;
        padding-top: 0 !important;        /* supprime padding inutile */
    }
	
	    /* Titres */
    h2#myname { 
		font-size: 1.6rem;
	    padding-top: 0 !important;  }   

	
	   /* Titres */
   h1, h2, h3, #titre {
        text-align: center;
    }
	
	
	

    /* Images en 1 colonne */
    #photo img,
    #photo2 img {
        flex: 1 1 100%;
    }


	
	
	

	
	
	

    /* Textes légèrement plus petits */
	#text-intro,

	#text-presentation,
    #text-initiation,
    #text-peinture-meditative,
    #text-fresque,
    #text-photo,
	#text-balade-photo,
	#text-pour-qui,
	#text-presentation-2,
	#text-infos-pratiques,
	#text-contact,
    #text-photographie,
	#mail,
    #bio {
        font-size: 0.95rem;
        line-height: 1.6em;
    }

    #instagram img {
        width: 100px;
    }

    /* Pied de page simplifié */
    #footer {
        height: auto;
        padding: 20px;
        font-size: 18px;
		background-image: url("images/footer-matiere-structure-incarnation-terre-socle-monde-corps.jpg");
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;	
    }
}