/* ==========================================================
   Ellohost — correctifs globaux (chargé en dernier sur toutes les pages)
   Icônes SVG, lecteur vidéo unifié, cartes et affichage mobile.
   ========================================================== */
:root{
 --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 20'%3E%3Cpath d='M10 .9l2.7 5.6 6.1.8-4.5 4.2 1.1 6.1L10 14.7l-5.4 2.9 1.1-6.1L1.2 7.3l6.1-.8z'/%3E%3C/svg%3E");
}

/* ---------- Icônes SVG génériques ---------- */
.ic{display:inline-block;width:1.05em;height:1.05em;vertical-align:-.16em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ic.fill{fill:currentColor;stroke:none}
.ticks li i svg,.trust i svg,.ck-box svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round;display:block}
.plan .trial svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;flex:none}
.btn .ic,.more .ic{width:1em;height:1em}
.ello-stat .ello-stat-icon svg{width:46%;height:46%;fill:currentColor}
[data-ellocms-promo] svg{width:15px;height:15px;margin-right:6px;fill:currentColor;flex:none}

/* Menu « Services » : illustrations SVG pour toutes les entrées */
nav.main .mi svg.art{width:100%;height:100%}

/* ---------- Apparitions au défilement : pas de coins carrés ---------- */
.ello-stats-visible .ello-stat{filter:none}
.ello-stat.in{clip-path:none!important}

/* ---------- Grille des services (accueil) ---------- */
@media(min-width:981px){
 #services .grid3{grid-template-columns:repeat(6,minmax(0,1fr))!important}
 #services .grid3>.svc{grid-column:span 2}
 #services .grid3>.svc:nth-last-child(2):nth-child(3n+1),
 #services .grid3>.svc:nth-last-child(1):nth-child(3n+2){grid-column:span 3}
}
@media(min-width:641px) and (max-width:980px){
 #services .grid3{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
#services .svc{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
#services .svc>*{max-width:100%}
#services .svc .ticks{width:100%}
#services .svc .price-from{margin-top:14px}
#services .svc .more{margin-top:auto;padding-top:18px}
@media(max-width:640px){
 #services .grid3{grid-template-columns:minmax(0,1fr)!important;gap:18px!important}
 #services .svc{padding:24px}
 #services .svc .mascot{width:72px;right:14px;top:14px}
 #services .svc h3{font-size:24px;max-width:calc(100% - 78px)}
}

/* ---------- Mobile / écrans tactiles : pas d'effet 3D sur les cartes ---------- */
@media(hover:none),(max-width:780px){
 .card,.tilt{transform-style:flat!important}
 .tilt{transform:none!important}
 .svc .mascot,.svc:hover .mascot{transform:none!important}
 .card .glow{display:none}
}
@media(max-width:780px){
 .grid,.grid2,.grid3,.grid4{gap:16px}
 .card{padding:22px;border-radius:20px}
 .plan{min-width:0}
 .plan .trial{width:auto;max-width:100%;white-space:normal}
 .btn{min-width:0}
}

/* ---------- Lecteur vidéo unifié ---------- */
.ehp{position:relative;overflow:hidden;isolation:isolate}
.ehp video{cursor:pointer}
.ehp-big{position:absolute;left:50%;top:50%;z-index:6;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:11px;padding:7px 18px 7px 7px;border:0;border-radius:999px;background:#fff;color:#1b1c3d;font:800 15px/1 Inter,system-ui,sans-serif;cursor:pointer;box-shadow:0 14px 40px #080a2450;transition:transform .2s ease,opacity .25s ease,visibility .25s;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.ehp-big svg{width:40px;height:40px;padding:11px 10px 11px 12px;border-radius:50%;background:linear-gradient(135deg,#7857ff,#2f8cff);color:#fff;box-sizing:border-box;flex:none}
.ehp-big:hover{transform:translate(-50%,-50%) scale(1.05)}
.ehp-big:focus-visible,.ehp-btn:focus-visible{outline:3px solid #8a74ff;outline-offset:3px}
.ehp-bar{position:absolute;right:12px;bottom:12px;z-index:6;display:flex;gap:8px;opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s}
.ehp-btn{width:42px;height:42px;display:grid;place-items:center;padding:0;border:1px solid #ffffff40;border-radius:50%;background:#14152ecc;color:#fff;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);-webkit-tap-highlight-color:transparent;transition:transform .2s,background .2s}
.ehp-btn svg{width:20px;height:20px}
.ehp-btn:hover{background:#6a4dff;transform:scale(1.06)}
.ehp[data-ehp-state=playing] .ehp-big{opacity:0;visibility:hidden;pointer-events:none}
.ehp[data-ehp-state=playing] .ehp-bar,.ehp[data-ehp-state=paused] .ehp-bar{opacity:1;visibility:visible}
.ehp[data-ehp-state=paused] .ehp-bar .ehp-toggle{display:none}
.ehp[data-ehp-state=preview] .ehp-big-label,.ehp[data-ehp-state=paused] .ehp-big-label,.ehp[data-ehp-state=ended] .ehp-big-label{display:inline}
.ehp.ehp-error .ehp-big,.ehp.ehp-error .ehp-bar{display:none}
.ehp-compact .ehp-big{padding:0;background:transparent;box-shadow:none}
.ehp-compact .ehp-big svg{width:58px;height:58px;padding:17px 15px 17px 19px;box-shadow:0 12px 30px #080a2466;background:#ffffffee;color:#4b3cf0}
.ehp-compact .ehp-big-label{display:none!important}
.ehp-compact .ehp-btn{width:36px;height:36px}.ehp-compact .ehp-btn svg{width:17px;height:17px}
@media(max-width:650px){
 .ehp-big{font-size:13px;gap:8px;padding:5px 14px 5px 5px}
 .ehp-big svg{width:34px;height:34px;padding:9px 8px 9px 10px}
 .ehp-btn{width:38px;height:38px}.ehp-btn svg{width:18px;height:18px}
}
/* ancien bouton de la vidéo d'accueil : remplacé par le lecteur unifié */
#video .hero-video-overlay{display:none!important}

/* ---------- Pied de page, éléments flottants ---------- */
@media(max-width:780px){
 .fab{z-index:40}
}

#video .ehp-bar{right:auto;left:12px}
footer .ello-logo-img{filter:brightness(0) invert(1)}
#services .svc h3{max-width:calc(100% - 96px)}
@media(min-width:981px){#services .svc .mascot{width:84px}}
@media(max-width:780px){table.cmp{display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}}