/*
* FERRO — style-smartphone.css
* Adaptations pour écrans mobiles (≤ 768px)
*
* ATTENTION : pour que ce fichier fonctionne, ajouter dans le du HTML :
*
*
*/
@media (max-width: 768px) {
html{
overflow-x: hidden;
}
body{
overflow-x: hidden;
}
*{
/* outline: 1px solid blue; */
}
/* Accueil */
.corps-nano{font-size:.33rem;} /* FAIT FAIT */
.corps-mini{font-size:.16rem;} /* FAIT */
.corps-petit{font-size:.1rem;}
.corps-normal{font-size:.35rem;} /* FAIT */
.corps-moyen{font-size:.22rem;} /* FAIT */
.corps-moyen-grand{font-size:.3rem;}
.corps-moyen-baleze{font-size:.5rem;} /* FAIT */
.corps-baleze{font-size:.84rem;} /* FAIT */
.corps-baleze-grand{font-size:1.7rem;}
.corps-grand{font-size:1.3rem;} /* FAIT */
.corps-petit-geant{font-size:1.6rem;}/* FAIT */
.corps-moyen-geant{font-size:3rem;}/* FAIT */
.corps-geant{font-size:2.1rem;}/* FAIT */
.break-phone{
display: block;
}
.break-phone-inline {
display: block;
}
.log {
width: auto;
}
.switch-flex{
flex-direction: column;
}
section{
width: 88vw;
margin-left: 12vw;
}
menu .insidemenu{
padding: 0em .4em;
}
menu{
width:2.1em;
}
.char-loading-appear{
font-size:.25rem;
}
#boot .backindex {
z-index: 666 !important;
font-size:.3rem;
position:relative;
top:-17em;
}
#boot .vive, #boot2 .vive{
margin-bottom:2.5em;
}
#boot .backindex:nth-of-type(2){
top:-15em;
}
#boot .backindex:nth-of-type(3){
top:-11em;
}
#boot .backindex:nth-of-type(4){
top:-13em;
}
#boot2 .backindex:nth-of-type(1){
top:-15em;
position:relative;
}
#boot2 .backindex:nth-of-type(2){
top:-14em;
position:relative;
}
#boot2 .backindex:nth-of-type(3){
top:-8em;
position:relative;
}
.bottom-right:has(.log), .bottom-left:has(.log){
position: static;
}
.bottom-left.reveal{
margin-bottom:-4em;
}
.bottom-right.reveal{
margin-bottom:-4em;
margin-left: 1em;
}
.modules-tel{
font-size:1.5em;
}
.modules-tel .flicker-quick:not(.corps-geant){
font-size:1.2em;
}
.corps-baleze.lineheight1 div{
line-height: 1.2;
text-align: center;
width: 95%;
margin: auto;
margin-top: .5em;
font-size: 1rem;
}
.list-fonts sup{
display:block;
}
.liste-mots div div{
margin-left:0;
margin-right:0;
}
.explication p, .colored.lighten{
width:100%;
}
.explication{
margin-bottom: -2em;
}
.explicationopening{
margin-top:8em;
}
.explication em{
font-size: .7em;
text-align: center;
width: 80%;
}
.list-fonts .trans-left-1, .list-fonts .trans-left-2, .list-fonts .trans-left-3, .list-fonts .trans-left-4{
left:0;
}
#log1.vh, #log2.vh, #log3.vh, #log4.vh{
height:auto;
}
.sticky{
display: none;
}
.cadrillage{
width: 100%;
justify-content: center;
}
.cadrillage .cellule{
margin-top: .05em;
width: 50% !important;
}
.cadrillage .button-graisse{
width:30%;
outline:2px solid var(--principale);
padding: .4em 0 .35em 0;
margin:.25em;
border-radius:.3em;
font-variant: small-caps;
text-transform: lowercase;
}
.cadrillage .button-mono{
width:60%;
outline:2px solid var(--principale);
padding: .4em 0 .35em 0;
border-radius:.3em;
margin-top:-.3em;
font-variant: small-caps;
text-transform: lowercase;
}
.cadrillage .barre{
width:100%;
text-align: center;
}
.cadrillage .cellule:last-child{
}
.cadrillage .plus{
width:100%;
text-align: center;
line-height: 1;
margin-bottom: .1em;
}
.port-sticky{
position:sticky;
top:0;
}
@keyframes opensection{
0%{width:100vw; margin:0 0 2rem 0;}
100%{width:88vw; margin:0 0 2rem 2.1em;}
}
.flicker-quick:not(.corps-geant){
font-size: .3rem;
}
.sectionhome .bottom-right{
bottom:unset;
right: unset;
top:.5rem;
left:.35rem;
display: flex;
flex-direction: column-reverse;
}
.sectionhome .loading-appear{
height:1.7em;
width:90%;
overflow: hidden;
}
.sectionhome .flicker-appear{
line-height: 1.1;
}
.startingpage .flex-row div:nth-child(2){
border-top:1px solid var(--vive);
border-bottom:1px solid var(--vive);
padding: 1em 0;
margin: 1em 0;
}
.startingpage .bloc90{
width:100%;
}
.startingpage .corps-geant{
font-size: 1.8rem;
}
.startingpage .flicker-quick span{
position:relative;
}
.startingpage .loading-appear.mono{
margin-bottom: .5em;
}
.startingpage .flicker-quick:nth-child(1) span:nth-child(1){bottom:.2em;}
.startingpage .flicker-quick:nth-child(1) span:nth-child(2){bottom:.4em;}
.startingpage .flicker-quick:nth-child(1) span:nth-child(3){bottom:.6em;}
.startingpage .flicker-quick:nth-child(1) span:nth-child(4){bottom:.4em;}
.startingpage .flicker-quick:nth-child(1) span:nth-child(5){bottom:.2em;}
.startingpage .flicker-quick:nth-child(3) span:nth-child(1){bottom:-.2em;}
.startingpage .flicker-quick:nth-child(3) span:nth-child(2){bottom:-.4em;}
.startingpage .flicker-quick:nth-child(3) span:nth-child(3){bottom:-.6em;}
.startingpage .flicker-quick:nth-child(3) span:nth-child(4){bottom:-.4em;}
.startingpage .flicker-quick:nth-child(3) span:nth-child(5){bottom:-.2em;}
.bottom-left .corps-petit-geant{
line-height: .8;
}
.hide-tel{
display:none;
}
.hide-desk{
display:block;
}
.colone-anim{
column-gap: .4rem;
}
.colone-anim .hcent{
margin-right:0.1rem;
height: 83%;
}
.hcent2{
height: 80% !important;
}
.small-margin-top{
margin: 0 0 0 12vw;
}
.tentacule3{
margin-left:-2.5em;
}
.tentacule2{
margin-left:3.75em;
}
.tentacule1{
width: 6em;
}
.medium-margin-top{
margin-left:12vw;
}
.angel-cont {
height: 7.5rem;
}
.first-angel .diagdroite {
transform: rotate(-270deg);
margin-left: 0;
margin-top: 10rem;
}
.first-angel .diaggauche {
transform: rotate(90deg);
margin-left: 0;
color: var(--vive);
margin-top: -10rem;
text-align: right;
}
.hcent{
height: 89%;
}
.endpage .texte-vertical.loading-appear{
height: 3rem;
width: 1em;
overflow: hidden;
}
.endpage .boutons-buy a{
font-size:2em;
margin-bottom: .5em;
}
.colone-anim .texte-vertical.loading-appear{
letter-spacing: -1em;
height: 3em;
overflow: hidden;
width: 1.1em;
}
.all-famillies .corps-moyen{
font-size:.4rem;
}
.footer{
font-size:.34rem;
margin-top:0em;
margin-bottom:2em;
gap:1em;
}
.liste-finale-fonte{
font-size: .45rem;
}
.switch-flex:has(.liste-finale-fonte){
flex-direction: column-reverse;
}
div:has(.rom4.corps-moyen-baleze){
margin-top:1em;
}
.rom4.corps-moyen-baleze{
font-size: 1.2rem;
}
.bloc90 .loading-appear{
height:1em;
overflow:hidden;
}
.bloc90 .loading-appear.texte-vertical{
height:3rem;
}
.boutons-buy{
text-align: center;
align-items: center;
}
.boutons-buy div .flicker-quick:not(.corps-geant){
font-size: .8rem;
}
.boutons-buy div{
margin: 1em 0 1em 0;
}
.flex-col.cc.small-margin-bottom.remove-margin-p.small-margin-top .rot180{
transform: rotate(0deg);
}
.panic-tag {
font-size: .255rem;
}
}