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

* {
margin:0;
padding:0;
}

html, body {
font-family: 'Times New Roman', Times, serif;
font-size: max(1.25vw, 15px);                                       /* Corps à 1,25% de la largeur du viewport avec limite minimale à 15px */
line-height: 1.1;                                                   /* Rapport de l'interligne avec la taille de corps : 1.1 */
text-underline-offset: 2px;                                         /* Décalage pour le texte souligné */
padding: 0.5rem;                                                    /* Marge intérieure */
-webkit-font-smoothing: antialiased;                                /* Contrôle sur l'anti-aliasing sur OsX */
text-rendering: optimizeLegibility;                                 /* Réglage entre précision de dessin et de vitesse d'affichage */
}

::-webkit-scrollbar { width: 0px; height: 0px; }                    /* Cacher les scrollbars */
::selection { background-color: magenta; color: white; }        /* Couleur de texte sélectionné */

a:link { color: blue; text-decoration: underline; }
a:visited { color: blue; text-decoration: underline; }
a:hover { color: magenta; text-decoration: none; }

/* ------------------- */
/* 1. Partie Catalogue */
/* ------------------- */

.catalogue {
display: grid;
grid-template-columns: 0.5fr 1.5fr 4fr 3fr 1.5fr 1.5fr ;            /* Répartition des 12 colonnes de la grille */
grid-column-gap: 0.5rem;                                            /* Demi-marge entre les colonnes */
grid-row-gap: 0.1rem;                                               /* Correction de l'interlignage entre les rangs de la grille (0.1) */
z-index: 2;                                                         /* Couche 2 par dessus les images */
opacity: 0;                                                         /* Opacité (0) initiale des lignes de catalogue */
transition: opacity 0.3s ease-out;                                  /* Animation fluide de l'opacité */
}
.catalogue div {
white-space: nowrap;                                                /* Empêche le contenu de se renvoyer à la ligne, pour forcer un débordement horizontal */
overflow-x: auto;                                                   /* Permet de conserver les dimensions de la grille fluides */
color: magenta;                                                   /* Couleur de texte */
}
.catalogue div.line1 {
font-family: 'Comic Sans MS', 'Comic Sans', 'Monaco', 'Courier New', Courier, monospace;
/* -webkit-font-smoothing: auto;                                    /* Aujustement de l'anti-aliasing sur OsX pour les polices fines */
font-size: max(0.75vw, 12px);                                       /* Corps à 0,75% de la largeur du viewport avec limite minimale à 12px */
padding-left: 0.5rem;                                               /* Padding interne gauche */
margin-bottom: 0.15rem;                                             /* Espace pour repousser la liste */
color:#fff;                                                       /* Couleur de texte */
background-color: magenta;
}
#plus {
font-family: Arial, Helvetica, sans-serif;                          /* Pour un glyphe '+' plus net */
background-color:transparent;                                       /* Fond transparent */
}

.soldout {
color: blue;
text-decoration: line-through;
}
.txt {
display: grid;
grid-template-columns: 1fr 1fr ;                                    /* Répartition en 2 colonnes égales */
grid-column-gap: 0.5rem;                                            /* Demi-marge entre les colonnes */
}

/* Lignes du Catalogue (Positionnement) */
#st0 { position: -webkit-sticky; position: sticky; top: 1rem; }
#st1 { position: -webkit-sticky; position: sticky; top: 1.75rem; }  /* 1.5rem + 0.1rem (grid-row-gap) + 0.15rem (margin-bottom line1) */
/* #st2 { position: -webkit-sticky; position: sticky; top: 2.75rem; } */
/* #st3 { position: -webkit-sticky; position: sticky; top: 3.75rem; } */
#st4 { position: -webkit-sticky; position: sticky; top: 2.75rem; }  /* Changement */
#st5 { position: -webkit-sticky; position: sticky; top: 3.75rem; }  /* Changement */
#st6 { position: -webkit-sticky; position: sticky; top: 4.75rem; }  /* Changement */

/* Hauteur de chaque conteneur d'images (pour conserver 1rem de marge basse) */
#img_c1 { height: calc(100vh - 3.75rem); }                          /* Hauteur visible - (position de st1 (1.75rem) + 1rem (interligne de st1) + marge basse (1rem)) */
/* #img_c2 { height: calc(100vh - 4.75rem); }                       /* Hauteur visible - (position de st2 (2.75rem) + 1rem (interligne de st1) + marge basse (1rem)) */
/* #img_c3 { height: calc(100vh - 5.75rem); }                       /* Hauteur visible - (position de st3 (3.75rem) + 1rem (interligne de st1) + marge basse (1rem)) */
#img_c4 { height: calc(100vh - 4.75rem); }                          /* Changement */
#img_c5 { height: calc(100vh - 5.75rem); }                          /* Changement */
#img_c6 { height: calc(100vh - 6.75rem); }                          /* Changement */

.img_container {
position: relative;
width: 100%;                                                        /* Largeur disponible */
overflow: hidden;                                                   /* Évite les paddings imprévus selon les navigateurs */
background-color: #ccc;                                           /* Fond léger */
}
.img {
width: 100%;                                                        /* Assure que l'image occupe tout l'espace disponible dans le conteneur */
height: 100%;                                                       /* Permet d'utiliser 'object-fit' correctement */
object-fit: contain;                                                /* Conserve les proportions de l'image et s'adapte au conteneur */
object-position: top left;                                          /* Aligne l'image en haut à gauche du conteneur */
}

.flgauche {
position:absolute;
top: 0.5rem; right: 0.5rem;
z-index: 1;
}
.fldroite {
position:absolute;
top: calc(0.5rem + 150px); right: 0.5rem;
z-index: 1;
}
.pagination {
font-family: Arial, Helvetica, sans-serif;
color: blue;
position:absolute;
bottom: 0.5rem; right: 0.5rem;
z-index: 1;
}

/* Flèches pour le mobile désactivées
.flmob { display: none; }
*/

/* ---------------- */
/* 2. Partie Footer */
/* ---------------- */

#footer1 {
width: 100%; height: auto;
margin-top: 1rem;
color: magenta;
}
#footer1 p { text-indent: 2rem; }
#footer1 a:hover { color: blue; text-decoration: none; }

/* Header mobile haut désactivé */
#cache   { display: none; }
/* #headlft { display: none; } */
/* #headrgt { display: none; } */

/* ---------------- */
/* 3. Partie Mobile */
/* ---------------- */

/* Smartphones en orientation portrait */
@media (max-width: 576px) {

html, body { font-size: 5vw; }

#cache {
position: fixed;
top: 0; left: 0;
height: 1rem; width: 100%;
display: block;
z-index: 2;
background-color: #fff;
}
/*
#headlft {
position: fixed;
top: 1rem; left: 0;
height: 1rem; width: calc(50% - 1rem);
padding-left: 1rem;
color: magenta;
display: inline-block;
z-index: 2;
background-color: #fff;
}
#headrgt {
position: fixed;
top: 1rem; left: 50%;
height: 1rem; width: calc(50% - 1rem); padding-right: 1rem;
color: magenta; text-align: right;
display: inline-block;
z-index: 2;
background-color: #fff;
}
*/

.catalogue {
display: block; /* Permet d'occuper la largeur et de repousser l'élément suivant à la ligne */
background-color: #fff;
}
.catalogue div.line1 { background-color: transparent; color: transparent; } /* Effacement de la ligne 1 */
.col1 { /* display: none; */ color: blue; } /* Ancre conservée en header du mobile */
.col2 { display: none; }
.col3 { padding-left: 2rem; }
.col4 { display: none; }
.col5 { display: none; }
.col6 { display: none; }

.img_container {
margin-top: 0.25rem; /* Ajout d'une demi-marge entre le bloc et le titre qui précède */
background-color: blue;
aspect-ratio: 4/3; /* Ratio des conteneurs */
}
#img_c1 { height: auto; }
#img_c4 { height: auto; }
#img_c5 { height: auto; }
#img_c6 { height: auto; }
.img    { object-fit: cover; object-position: 50% 50%; }

.fldroite { display: none; }
.flgauche { display: none; }

/* Flèches pour le mobile */
.flmob {
display: block;
font-family: Arial, Helvetica, sans-serif;
color: blue;
position:absolute;
left: 0.5rem; bottom: 0.5rem;
z-index: 1;
}

.txt {
display:block; /* Permet d'occuper la largeur et de repousser l'élément suivant à la ligne */
padding-top: 0.5rem;
}
.txt p {
text-align:left;
text-indent: 2rem;
padding-top: 0;
padding-bottom: 0.5rem;
padding-left: 0;
padding-right: 0;
}
#footer1 p { text-indent: 2rem; text-align: left; }

} /* Fermeture des styles pour mobile */