/* ==========================================================================
   Page de marque Mary Cohr - Flash Cosmetiques
   Tout est porte par .cms-marycohr ou .mc-* : aucune autre page n'est touchee.
   ========================================================================== */

/* --- 1. La page CMS passe en pleine largeur, sans colonne de gauche ------- */
.cms-marycohr #left_column{display:none !important}
.cms-marycohr #columns{width:100% !important;max-width:none !important;padding-left:0 !important;padding-right:0 !important}
.cms-marycohr #columns > .row{margin-left:0 !important;margin-right:0 !important}
.cms-marycohr #center_column{width:100% !important;float:none !important;padding:0 !important}
.cms-marycohr #center_column .rte{padding:0 !important;border:0 !important;background:none !important}
.cms-marycohr .breadcrumb{display:none !important}
.cms-marycohr .columns-container{padding-bottom:0 !important}

/* --- 2. Socle ------------------------------------------------------------- */
.mc-page{
 --vert:#008147; --vert-f:#00693a; --pousse:#5DA935;
 --encre:#2D3B45; --gris:#7F7F7F; --creme:#F7F5F0; --trait:#E4E1DA;
 font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
 color:var(--encre);font-size:15px;line-height:1.6;text-align:left}
.mc-page *{box-sizing:border-box}
.mc-page img{max-width:100%;height:auto}
.mc-page p{margin:0 0 14px}
.mc-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.mc-centre{text-align:center}
.mc-h2{font-size:28px;line-height:1.25;font-weight:300;letter-spacing:.01em;
 color:var(--encre);margin:0 0 10px;text-transform:none}
.mc-sous{color:var(--gris);font-size:15px;margin:0 0 26px}
.mc-h1{font-size:33px;line-height:1.2;font-weight:300;letter-spacing:.01em;
 color:var(--encre);margin:0 0 6px}
.mc-h1-sous{font-size:19px;line-height:1.35;font-weight:400;color:var(--vert);margin:0 0 16px}
.mc-page .mc-btn{display:inline-block;padding:13px 30px;border-radius:2px;font-size:12.5px;
 font-weight:700;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;transition:.18s}
.mc-page .mc-btn-plein{background:var(--vert);color:#fff;border:1px solid var(--vert)}
.mc-page .mc-btn-plein:hover{background:var(--vert-f);border-color:var(--vert-f);color:#fff;text-decoration:none}
.mc-page .mc-btn-vide{background:transparent;color:var(--vert);border:1px solid var(--vert)}
.mc-page .mc-btn-vide:hover{background:var(--vert);color:#fff;text-decoration:none}

/* --- 3. Hero ------------------------------------------------------------- */
.mc-hero{position:relative;overflow:hidden;background:#111}
.mc-slides{display:flex;width:300%;animation:mcdefile 21s infinite}
.mc-page a.mc-slide{position:relative;width:33.3333%;display:block;text-decoration:none}
.mc-slide img{width:100%;display:block}
.mc-slide:after{content:"";position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(0,0,0,.62) 0%,rgba(0,0,0,.34) 45%,rgba(0,0,0,0) 72%)}
.mc-slide-txt{position:absolute;z-index:2;left:7%;top:50%;transform:translateY(-50%);
 max-width:460px;color:#fff;text-align:left}
.mc-slide-t{display:block;font-size:40px;line-height:1.15;font-weight:300;letter-spacing:.01em;margin-bottom:12px;
 text-shadow:0 2px 14px rgba(0,0,0,.45)}
.mc-slide-s{display:block;font-size:16px;line-height:1.5;margin-bottom:22px;color:#f1efe9;
 text-shadow:0 1px 10px rgba(0,0,0,.4)}
.mc-page .mc-slide .mc-btn{background:#fff;color:var(--encre);border:1px solid #fff}
.mc-page .mc-slide:hover .mc-btn{background:var(--vert);border-color:var(--vert);color:#fff}
@keyframes mcdefile{
 0%,28%{transform:translateX(0)}
 33.3%,61.3%{transform:translateX(-33.3333%)}
 66.6%,94.6%{transform:translateX(-66.6666%)}
 100%{transform:translateX(0)}}

/* --- 4. Bande de reassurance -------------------------------------------- */
.mc-bande{background:var(--creme);border-bottom:1px solid var(--trait)}
.mc-reass{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:30px;padding-bottom:30px}
.mc-reas{border-left:2px solid var(--vert);padding-left:14px}
.mc-reas-t{display:block;font-size:13px;font-weight:700;letter-spacing:.08em;
 text-transform:uppercase;color:var(--vert);margin-bottom:5px}
.mc-reas-s{display:block;font-size:13.5px;line-height:1.5;color:var(--gris)}

/* --- 5. La marque -------------------------------------------------------- */
.mc-marque{display:grid;grid-template-columns:0.9fr 1.1fr;gap:50px;align-items:center;
 padding:62px 0 56px}
.mc-marque-img img{width:100%;display:block;border-radius:3px}
.mc-logo{width:190px;height:auto;display:block;margin:0 0 18px}
.mc-chiffres{display:flex;gap:34px;margin:26px 0 28px;flex-wrap:wrap}
.mc-chiffres div{display:flex;flex-direction:column}
.mc-chiffres strong{font-size:30px;font-weight:300;color:var(--vert);line-height:1.1}
.mc-chiffres span{font-size:12.5px;color:var(--gris);letter-spacing:.04em;margin-top:3px}

/* --- 6. Rayons ----------------------------------------------------------- */
.mc-rgrille{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;padding-bottom:62px}
.mc-page a.mc-rcarte{display:block;text-align:center;text-decoration:none;color:var(--encre);
 border:1px solid var(--trait);border-radius:3px;padding:18px 10px 16px;background:#fff;
 transition:box-shadow .2s,transform .2s,border-color .2s}
.mc-page a.mc-rcarte:hover{box-shadow:0 10px 26px rgba(0,129,71,.13);transform:translateY(-3px);
 border-color:var(--vert);color:var(--encre);text-decoration:none}
.mc-rvis{display:flex;align-items:center;justify-content:center;height:88px;margin-bottom:10px}
.mc-rvis img{max-height:88px;width:auto}
.mc-rnom{display:block;font-size:13px;font-weight:600;line-height:1.3;min-height:34px}
.mc-rnb{display:block;font-size:11.5px;color:var(--gris);margin-top:4px}

/* --- 7. Produits + onglets ---------------------------------------------- */
.mc-fond{background:var(--creme);border-top:1px solid var(--trait);
 border-bottom:1px solid var(--trait);padding:58px 0 62px}
.mc-ancre{display:block;height:0;overflow:hidden;scroll-margin-top:90px}
.mc-onglets{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:26px}
.mc-page .mc-onglets a{padding:10px 24px;border:1px solid var(--trait);border-radius:30px;
 font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
 color:var(--gris);background:#fff;text-decoration:none;transition:.15s}
.mc-page .mc-onglets a:hover{border-color:var(--vert);color:var(--vert);text-decoration:none}
.mc-page .mc-onglets .mc-o1{background:var(--vert);border-color:var(--vert);color:#fff}
.mc-page #mc-nouv:target ~ .mc-onglets .mc-o1,
.mc-page #mc-vent:target ~ .mc-onglets .mc-o1{background:#fff;border-color:var(--trait);color:var(--gris)}
.mc-page #mc-nouv:target ~ .mc-onglets .mc-o2,
.mc-page #mc-vent:target ~ .mc-onglets .mc-o3{background:var(--vert);border-color:var(--vert);color:#fff}

.mc-lots .mc-l1{display:grid}
.mc-lots .mc-l2,.mc-lots .mc-l3{display:none}
#mc-nouv:target ~ .mc-lots .mc-l1,#mc-vent:target ~ .mc-lots .mc-l1{display:none}
#mc-nouv:target ~ .mc-lots .mc-l2{display:grid}
#mc-vent:target ~ .mc-lots .mc-l3{display:grid}

.mc-grille{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:34px}
.mc-page a.mc-carte{display:block;text-decoration:none;color:var(--encre);border:1px solid var(--trait);
 border-radius:3px;padding:18px 16px 18px;background:#fff;transition:box-shadow .2s,transform .2s,border-color .2s}
.mc-page a.mc-carte:hover{box-shadow:0 12px 30px rgba(0,129,71,.14);transform:translateY(-3px);
 border-color:var(--vert);color:var(--encre);text-decoration:none}
.mc-vis{position:relative;display:flex;align-items:center;justify-content:center;height:180px;margin-bottom:12px}
.mc-vis img{max-height:180px;width:auto}
.mc-rupture{position:absolute;top:0;left:0;background:var(--encre);color:#fff;font-size:10px;
 letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border-radius:2px}
.mc-ray{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
 color:var(--vert);font-weight:700}
.mc-nom{display:block;font-size:14px;font-weight:600;line-height:1.35;margin:6px 0 8px;min-height:38px}
.mc-prix{display:block;font-size:19px;font-weight:300;color:var(--encre)}
.mc-voir{display:block;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
 color:var(--gris);margin-top:9px;border-top:1px solid var(--trait);padding-top:9px}
.mc-page a.mc-carte:hover .mc-voir{color:var(--vert)}

/* --- 8. Soins signature -------------------------------------------------- */
.mc-soins{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding:0 0 60px}
.mc-page a.mc-soin{display:block;text-decoration:none;color:var(--encre);background:#fff;
 border:1px solid var(--trait);border-radius:3px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.mc-page a.mc-soin:hover{box-shadow:0 12px 30px rgba(0,129,71,.14);transform:translateY(-3px);
 color:var(--encre);text-decoration:none}
.mc-soin-vis{display:block;overflow:hidden}
.mc-soin-vis img{width:100%;display:block;transition:transform .4s}
.mc-page a.mc-soin:hover .mc-soin-vis img{transform:scale(1.05)}
.mc-soin-n{display:block;font-size:16px;font-weight:600;padding:16px 16px 0}
.mc-soin-s{display:block;font-size:13.5px;line-height:1.5;color:var(--gris);padding:6px 16px 0;min-height:62px}
.mc-soin-l{display:block;font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
 color:var(--vert);font-weight:700;padding:0 16px 18px}

/* --- 9. Citation --------------------------------------------------------- */
.mc-citation{position:relative;background:var(--vert);padding:66px 0;text-align:center;overflow:hidden}
.mc-citation:before{content:"";position:absolute;inset:0;opacity:.17;
 background:url(/img/cms/marycohr/institut.jpg) center/cover no-repeat}
.mc-citation .mc-wrap{position:relative;z-index:2}
.mc-logo-blanc{width:180px;height:auto;margin:0 auto 24px;display:block}
.mc-cit{max-width:760px;margin:0 auto;color:#fff;font-size:24px;line-height:1.5;font-weight:300}

/* --- 10. Type de peau ---------------------------------------------------- */
.mc-peaux-bloc{display:grid;grid-template-columns:0.8fr 1.2fr;gap:50px;align-items:center;padding:62px 0}
.mc-peaux-img img{width:100%;display:block;border-radius:3px}
.mc-peaux{display:flex;flex-wrap:wrap;gap:10px}
.mc-page a.mc-peau{display:inline-block;padding:11px 20px;border:1px solid var(--trait);border-radius:30px;
 font-size:13.5px;color:var(--encre);background:#fff;text-decoration:none;transition:.15s}
.mc-page a.mc-peau:hover{background:var(--vert);border-color:var(--vert);color:#fff;text-decoration:none}

/* --- 11. Bloc final ------------------------------------------------------ */
.mc-final{background:var(--creme);border-top:1px solid var(--trait);padding:58px 0 62px;text-align:center}
.mc-final p{max-width:620px;margin:0 auto 26px;color:var(--gris)}
.mc-final .mc-h2{margin-bottom:14px}
.mc-final-b{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* --- 12. Tablette et mobile --------------------------------------------- */
@media (max-width:1100px){
 .mc-rgrille{grid-template-columns:repeat(4,1fr)}
 .mc-grille{grid-template-columns:repeat(3,1fr)}
 .mc-soins{grid-template-columns:repeat(2,1fr)}
 .mc-slide-t{font-size:32px}
}
@media (max-width:860px){
 .mc-reass{grid-template-columns:repeat(2,1fr);gap:20px}
 .mc-marque,.mc-peaux-bloc{grid-template-columns:1fr;gap:28px;padding:44px 0}
 .mc-marque-img{order:2}
 .mc-rgrille{grid-template-columns:repeat(3,1fr)}
 .mc-slide-txt{left:5%;max-width:62%}
 .mc-slide-t{font-size:25px;margin-bottom:8px}
 .mc-slide-s{font-size:14px;margin-bottom:16px}
 .mc-slide img{height:380px;object-fit:cover;object-position:72% center}
 .mc-cit{font-size:20px}
 .mc-h2{font-size:24px}
}
@media (max-width:620px){
 .mc-reass{grid-template-columns:1fr}
 .mc-rgrille{grid-template-columns:repeat(2,1fr)}
 .mc-grille{grid-template-columns:repeat(2,1fr)}
 .mc-soins{grid-template-columns:1fr}
 .mc-vis{height:140px}.mc-vis img{max-height:140px}
 .mc-slide:after{background:linear-gradient(90deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.66) 55%,rgba(0,0,0,.42) 100%)}
 .mc-slide img{height:330px;object-fit:cover;object-position:78% center}
 .mc-slide-txt{max-width:80%;left:6%}
 .mc-slide-t{font-size:22px}
 .mc-slide-s{font-size:12.5px;margin-bottom:12px}
 .mc-page .mc-slide .mc-btn{padding:9px 16px;font-size:10.5px}
 .mc-chiffres{gap:22px}
 .mc-page .mc-onglets a{padding:9px 15px;font-size:11px}
 .mc-h1{font-size:26px}
 .mc-h1-sous{font-size:16px}
 .mc-cit{font-size:17px}
 .mc-logo-blanc,.mc-logo{width:150px}
}