/* ==========================================================
RESPONSIVE.CSS - Fils & Poils d'Animaux
Adaptations smartphones et tablettes uniquement.
Ce fichier ne modifie pas filerpoils.css : il vient le
COMPLETER en surchargeant certaines r?gles via l'ordre
de chargement (voir note d'installation fournie ? part).
IMPORTANT : ? charger APRES filerpoils.css dans le
de chaque page :
========================================================== */
/* ==========================================================
0. RENDU MOBILE DE BASE
(rien ici ne change l'affichage desktop)
========================================================== */
@media screen and (max-width: 1024px) {
html, body {
max-width: 100%;
overflow-x: hidden; /* filet de s?curit? anti-d?bordement horizontal */
}
/* Aucune image du site n'avait de contrainte de largeur :
c'est la cause principale des d?bordements horizontaux
(banni?re titre, image du rouet, menu graphique, logos...) */
img {
max-width: 100%;
height: auto;
}
/* Evite le zoom automatique du texte sur certains navigateurs
Android/iOS quand on bascule d'orientation */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
}
/* ==========================================================
1. MENU LATERAL "BURGER" (pages int?rieures : boutique,
guide, qui, tarifs, contact, cgv...)
PROBLEME CORRIGE (structure) :
.menu est un enfant flex de , sans position d?finie.
La r?gle mobile ".menu{width:100%}" de filerpoils.css veut
dire "100% de la largeur de " ? mais n'a
pas de largeur propre : la sienne d?pend justement de celle
de .menu. Cette boucle ne peut pas se r?soudre proprement,
et les navigateurs retombent sur la largeur du CONTENU de
.menu au lieu de 100% de l'?cran.
CORRECTIF : on sort .menu du flux flex (position:fixed) pour
qu'il devienne un tiroir superpos? ? l'?cran, ind?pendant de
. retrouve alors naturellement 100% de la
largeur.
CONTENU DU TIROIR SUR MOBILE :
Le menu graphique (pelote / fil / ic?nes positionn?es au
pixel pr?s) est remplac? sur mobile/tablette par une liste
de liens texte simple (identique au menu du bas de page),
ajout?e dans menu.html sous la classe .menu-simple.
Le menu graphique original reste intact et inchang? sur
ordinateur (>1024px).
========================================================== */
/* Le menu texte simple est masqu? par d?faut : il ne s'affiche
que sur mobile/tablette (r?gle plus bas). Aucun impact desktop. */
.menu-simple {
display: none;
}
/* Sur la page d'accueil, le burger ne doit appara?tre que sur
mobile/tablette : sur ordinateur, le menu graphique cliquable
(rouet + corde) suffit d?j?, pas besoin d'un burger en plus. */
.header-accueil {
display: none;
}
@media screen and (max-width: 1024px) {
header {
flex: 0 0 auto;
}
.header-accueil {
display: block;
}
.burger {
top: 15px;
left: 15px;
padding: 10px;
font-size: 26px;
z-index: 20;
}
/* Pages avec burger (boutique, guide, qui, tarifs, contact, cgv...) :
on laisse un peu d'air sous le bouton burger fixe */
.entete {
margin-top: 100px;
}
.menu {
position: fixed;
top: 0;
left: 0;
width: 65%;
max-width: 220px;
height: 100vh;
transform: translateX(-100%);
z-index: 15;
box-shadow: 4px 0 15px rgba(0, 0, 0, 0.25);
}
.menu.open {
width: 65%;
max-width: 220px;
transform: translateX(0%);
}
/* On masque le menu graphique (pelote/fil/ic?nes), remplac?
ci-dessous par la liste de liens texte simple */
.pelote,
.fil,
.menu-items {
display: none;
}
.menu-simple {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 14px;
padding: 70px 20px 30px;
overflow-y: auto;
}
.menu-simple a {
font-size: 22px;
font-weight: bold;
color: #9D0000;
text-decoration: none;
}
.menu-simple a.menu-simple-sub {
font-size: 17px;
font-weight: bold;
margin-top: -6px;
margin-left: 10px;
color: #7a5b3a;
}
.menu-simple a:hover {
color: #DD3D00;
}
}
/* ==========================================================
2. MENU GRAPHIQUE DE LA PAGE D'ACCUEIL
(.main-menu-index / .img-rouet / .img-menu / .child-menu)
PROBLEME CORRIGE :
Ce menu combine une image (menu_seul2.png) et des zones
cliquables invisibles (.child-menu) positionn?es au pixel
pr?s par des margin-top/margin-left, calibr?es pour la
taille desktop de l'image. Une fois l'image rendue fluide
(max-width:100%, cf section 0), elle se r?duit correctement,
mais les zones cliquables (tailles et marges en pixels fixes)
ne suivent pas : selon la largeur d'?cran exacte, l'ensemble
pouvait d?border horizontalement (barre de d?filement,
texte "Contact"/"CGV" coup?s).
CORRECTIF (Plan B) : sur mobile/tablette, on masque les
zones cliquables invisibles et on garde uniquement l'image,
simplement responsive. La navigation reste possible via le
menu texte en bas de la page d'accueil (Accueil/Guide/Qui
suis-je/Tarifs/Boutique/Contact/CGV), d?j? pr?sent et fiable.
Sur ordinateur (>1024px), rien ne change : le menu graphique
cliquable reste intact.
Les valeurs de margin-top ci-dessous (chevauchement entre
l'image du rouet et celle de la corde) restent des
ESTIMATIONS ? ajuster visuellement si besoin.
========================================================== */
@media screen and (max-width: 1024px) {
.main-menu-index {
width: 100%;
padding: 0 10px;
box-sizing: border-box; /* le padding ne doit pas s'ajouter aux 100% */
overflow-x: hidden; /* filet de s?curit? suppl?mentaire */
}
/* On masque uniquement les zones cliquables invisibles,
pas l'image : le rouet + la corde restent visibles */
.child-menu {
display: none;
}
.img-menu {
margin-top: -90px; /* estimation, ? ajuster si besoin */
}
}
@media screen and (max-width: 600px) {
.img-menu {
margin-top: -60px; /* estimation, ? ajuster si besoin */
}
}
@media screen and (max-width: 380px) {
.img-menu {
margin-top: -45px; /* estimation, ? ajuster si besoin */
}
}
/* ==========================================================
3. TITRES ET TEXTES
========================================================== */
@media screen and (max-width: 768px) {
.entete_acc {
margin: 25px 15px 0;
}
h1 {
font-size: 22px;
}
h2 {
font-size: 22px;
}
p {
margin-left: 15px;
margin-right: 15px;
}
.div1,
.qui,
.tarifs,
.guide,
.cgv {
margin-left: 15px;
margin-right: 15px;
}
.explications {
margin-left: 5%;
margin-right: 5%;
}
}
@media screen and (max-width: 480px) {
h1 { font-size: 19px; }
h2 { font-size: 19px; }
}
/* ==========================================================
4. BLOC CONTACT
(margin-left:375px fixe = d?bordement garanti sur mobile)
========================================================== */
@media screen and (max-width: 768px) {
.contact {
margin-left: 0;
margin-top: 10px;
text-align: center;
font-size: 22px;
}
}
/* ==========================================================
5. FORMULAIRES
========================================================== */
@media screen and (max-width: 768px) {
form {
margin-left: 15px;
margin-right: 15px;
}
.form-ligne,
form .form-ligne {
flex-direction: column;
align-items: flex-start;
}
}
/* ==========================================================
6. BOUTIQUE - cartes (figurine / stage)
(min-width:350px pouvait d?passer la largeur des petits
t?l?phones, ex. 320-360px de large)
========================================================== */
@media screen and (max-width: 820px) {
.cartes_boutique {
flex-direction: column;
align-items: center;
gap: 25px;
margin: 25px auto;
}
.carte_boutique {
min-width: 0;
width: 100%;
max-width: 480px;
padding: 20px;
}
.demande_creation {
max-width: 100%;
padding: 0 10px;
}
}
@media screen and (max-width: 480px) {
.bouton_demande {
padding: 12px 22px;
font-size: 1em;
}
}
/* ==========================================================
6bis. GALERIE - colonnes poils longs / poils courts
(même principe que les cartes boutique : on empile en
colonne unique sous 820px)
========================================================== */
@media screen and (max-width: 820px) {
.galerie-colonnes {
flex-direction: column;
align-items: center;
gap: 10px;
}
.longs,
.courts {
min-width: 0;
width: 100%;
max-width: 480px;
}
}
/* ==========================================================
7. PAIEMENT / STAGES - ajustements mineurs
========================================================== */
@media screen and (max-width: 480px) {
.logos-paiement img {
height: 55px;
}
.paiement-securise {
padding: 15px;
margin: 15px auto 25px;
}
.dates-stages h2 {
font-size: 1.2em;
}
}
/* ==========================================================
8. MENU DU BAS (liens texte)
========================================================== */
@media screen and (max-width: 1024px) {
/* Le sous-menu (Guide/Boutique) ne s'ouvre qu'au survol (:hover),
qui n'existe pas au tactile. Sur iPhone notamment, un tap
d?clenche ce "survol" et l'encart se superpose au texte,
g?nant le clic. On le d?sactive : le burger (d?j? en place
partout) donne acc?s aux m?mes liens en liste simple. */
.sous-menu {
display: none !important;
}
}
@media screen and (max-width: 600px) {
.menu_bas {
padding: 0 10px;
text-align: center;
font-size: 15px;
line-height: 1.6;
}
}
/* ==========================================================
9. FOOTER
========================================================== */
@media screen and (max-width: 480px) {
footer {
height: auto;
padding: 10px 15px;
margin-left: 0;
margin-right: 0;
font-size: 14px;
}
}