: on cible leur classe de style V4. */
body.elementor-page-770 .elementor-element-ec5d5ef .e-3e7e204-933ae8e{ order: 1; }
body.elementor-page-770 .elementor-element-ec5d5ef .e-a3a131f-763c6b4{ order: 2; }
}
/* ── Tablette et téléphone paysage (600–1199px) : le flacon passe au-dessus,
Huile et Lotion
à côté à parts égales. En trois colonnes, le flacon tombait à 83px de
large (167px sur bureau), les colonnes de texte à 227px — boutons
empilés et décalés de 27px — et la rangée laissait 176px inutilisés. */
@media (min-width: 600px) and (max-width: 1199px){
body.elementor-page-770 .elementor-element-a5719ab{
flex-wrap: wrap;
align-items: stretch;
row-gap: 32px;
column-gap: 24px;
/* même verrou V4 que sur mobile : .elementor .e-3a205cf fige
height:550px et justify-content:center. */
height: auto;
}
/* Le flacon occupe toute la ligne, en premier. */
body.elementor-page-770 .elementor-element-430752a{
order: 1;
width: 100%;
max-width: 100%;
}
body.elementor-page-770 .elementor-element-430752a .elementor-element-88e8363.elementor-widget{
max-width: 167px;
margin-left: auto;
margin-right: auto;
}
body.elementor-page-770 .elementor-element-430752a .elementor-element-88e8363 img{
width: 100%;
height: auto;
}
/* Deux colonnes produits à parts égales. */
body.elementor-page-770 .elementor-element-71b68a0{ order: 2; }
body.elementor-page-770 .elementor-element-7e0a42a{ order: 3; }
body.elementor-page-770 .elementor-element-71b68a0,
body.elementor-page-770 .elementor-element-7e0a42a{
width: calc(50% - 12px);
max-width: calc(50% - 12px);
padding-top: 0;
}
/* Les colonnes s’étirent à la même hauteur : margin-top:auto colle les
boutons en bas, donc alignés même si un texte prend une ligne de plus. */
body.elementor-page-770 .elementor-element-595f69e,
body.elementor-page-770 .elementor-element-ec5d5ef{
margin-top: auto;
/* Sans ça les deux boutons (146 + 159 + 12 d’écart = 317px) manquent
de 2px dans les 315px restants à 768px et s’empilent, alors qu’ils
tiennent côte à côte à 1024px. */
padding-left: 0;
padding-right: 0;
}
/* « Commander » en premier dans les deux, comme sur mobile. */
body.elementor-page-770 .elementor-element-ec5d5ef .e-3e7e204-933ae8e{ order: 1; }
body.elementor-page-770 .elementor-element-ec5d5ef .e-a3a131f-763c6b4{ order: 2; }
}
/* ── Bureau (≥1200px) : aligner les deux groupes de boutons ──
Les deux descriptions ne font pas toujours le même nombre de lignes
(à 1366px : Huile 2 lignes, Lotion 3), ce qui décalait les boutons de
27px — soit exactement une ligne. margin-top:auto ne convient pas ici :
les colonnes font 540px de haut avec 150px de padding, les boutons
tomberaient très bas sous le texte. On réserve donc 3 lignes dans les
deux colonnes : 3 × 1.7em (interligne) + 0.9em (marge du ) = 6em. */
@media (min-width: 1200px){
body.elementor-page-770 .elementor-element-3d96db7,
body.elementor-page-770 .elementor-element-ce775f0{
min-height: 6em;
}
}
/* ── Encadré rouge et carte verte : marges latérales sous 768px ──
Les deux ont max-width:700px ; en dessous de ~700px de viewport ils
occupent toute la largeur et leur fond touche les bords de l’écran,
alors que le texte autour est retraité. 16px = même gouttière que le
paragraphe « Pour qui ? ». Au-delà de 768px le max-width recrée
naturellement des marges, donc la règle s’arrête là. */
@media (max-width: 767px){
body.elementor-page-770 .elementor-element-507f48b{
padding-left: 16px;
padding-right: 16px;
}
body.elementor-page-770 .elementor-element-3dbf2dd{
/* La carte a width:100% : des marges la décalent sans la rétrécir et
elle débordait de 16px. On plafonne la largeur, marges auto. */
max-width: calc(100% - 32px);
margin-left: auto;
margin-right: auto;
}
/* Le retrait de 32px réduisait le texte de la carte à 217px à 360px
(moins qu’avant), et le titre passait sur deux lignes. On ramène le
padding interne de 48px à 24px : texte à 265px, soit plus large
qu’avant la modification. */
body.elementor-page-770 .elementor-element-3dbf2dd{
padding-left: 24px;
padding-right: 24px;
}
}/* End custom CSS */