/* ============================================================================ AM — Page « Présentation » (Entreprise) · am-presentation.css Feuille DÉDIÉE, chargée uniquement sur la page /entreprise/presentation. Source de vérité : ~/Desktop/AM Lab/Site-presentation/maquette-presentation.html (maquette VALIDÉE, version épurée). Reproduite fidèlement. TOUT est scopé sous .am-pres -> zéro fuite vers le thème Divi / la méga-nav / le footer. Réversible : retirer le mu-plugin am-presentation.php = page inchangée. ============================================================================ */ /* ---------- Tokens + base (portés par le conteneur, pas :root -> zéro fuite) ---------- */ .am-pres{ --ink:#1a1a1a; --ink-body:#3a3f45; --muted:#6b7075; --faint:#8a9099; --hairline:#ececec; --surface-alt:#f4f5f6; --white:#fff; --anthracite:#0e0f11; --wide-max:1368px; --gutter:24px; --radius:14px; font-family:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; color:var(--ink-body);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:clip; text-align:left; } html{scroll-behavior:smooth} .am-pres *{box-sizing:border-box} .am-pres img{max-width:100%;display:block} .am-pres h1,.am-pres h2,.am-pres h3,.am-pres h4{color:var(--ink);margin:0} .am-pres a{color:inherit} /* full-bleed : la page occupe toute la largeur (pas de .container Divi) */ body.am-pres-pg #main-content{padding:0;width:100%;max-width:none} body.am-pres-pg #main-content > .am-pres{width:100%} /* footer maquette (.mfooter) fourni par la page -> on masque le footer Divi du site (évite le double footer). Divi 5 (theme builder) rend le footer via .et-l--footer ; les thèmes classiques via #main-footer. */ body.am-pres-pg .et-l--footer, body.am-pres-pg #main-footer,body.am-pres-pg #footer-bottom{display:none!important} .am-pres{display:block;width:100%} /* ---------- CONTENEUR CANONIQUE 1368/1320 ---------- */ .am-pres .wrap{max-width:var(--wide-max);margin:0 auto;padding:0 var(--gutter)} .am-pres .sec{padding:96px 0} .am-pres .sec--alt{background:var(--surface-alt)} .am-pres .sec--dark{background:var(--anthracite)} .am-pres .c-eyebrow{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.14em; color:var(--faint);margin:0 0 14px;display:flex;align-items:center;gap:12px;line-height:1.2} .am-pres .c-eyebrow::before{content:"";width:34px;height:1px;background:var(--faint);flex:0 0 34px} .am-pres .c-eyebrow.center{justify-content:center} .am-pres .c-eyebrow.center::before{display:none} .am-pres h2.c-h2{font-size:31px;font-weight:700;letter-spacing:-.015em;line-height:1.15;color:var(--ink);margin:0 0 16px} .am-pres .c-lead{font-size:20px;line-height:1.55;color:var(--ink-body);max-width:60ch;margin:0} .am-pres .c-body{font-size:18px;line-height:1.72;color:var(--ink-body);max-width:66ch} .am-pres .c-body p{margin:0 0 18px} .am-pres .c-body p:last-child{margin-bottom:0} .am-pres .c-body strong{color:var(--ink);font-weight:600} .am-pres .sec-head{max-width:720px;margin:0 0 44px} .am-pres .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} /* ============ HERO am-hero2 (halftone — POOL D'IMAGES ROTATIF PARTAGÉ) ============ Cette page est rendue par un TEMPLATE CUSTOM (non-Divi) : am-hero2.css (scopé aux sections Divi) ne peut PAS peindre ce hero. On réutilise donc le MOTEUR partagé d'am-hero2 : son script pose la variable globale --am-hero-img sur (image tirée au hasard dans le pool des 24 halftone HEROX001..024, préchargée LCP), et le .mhero ci-dessous la CONSOMME -> même fond aléatoire tournant que /depannage/, /gerances-ppe/, /vente-electromenager/, /modeles-remplacement/. Recette visuelle IDENTIQUE à am-hero2 : image cover pré-tramée + Ken Burns 26s + scrim (PAS de trame CSS ajoutée, les images sont déjà pré-tramées). Repli no-JS = HEROX021 (image serveur par défaut = pick am-hero2 de cette page). Réversible : retirer la page de la map am-hero2 -> --am-hero-img absente -> le hero retombe sur l'image par défaut ci-dessous. */ .am-pres .mhero{position:relative;overflow:hidden;background:#0a0a0a;isolation:isolate} .am-pres .mhero::before{content:"";position:absolute;inset:0;z-index:0; background-image:var(--am-hero-img,url("https://www.arts-menagers.ch/wp-content/uploads/2026/06/HEROX021-ht.webp")); background-position:center;background-size:cover;background-repeat:no-repeat; transform-origin:62% 48%;will-change:transform; animation:am_pres_kb 26s ease-in-out infinite alternate} .am-pres .mhero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background: linear-gradient(90deg,rgba(10,10,10,.94) 0%,rgba(10,10,10,.78) 28%,rgba(10,10,10,.40) 50%,rgba(10,10,10,.08) 74%,rgba(10,10,10,0) 92%), linear-gradient(0deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,0) 38%); box-shadow:inset 0 0 220px 40px rgba(0,0,0,.55)} @keyframes am_pres_kb{0%{transform:scale(1) translate3d(0,0,0)} 100%{transform:scale(1.065) translate3d(-1.4%,-.8%,0)}} .am-pres .mhero__row{position:relative;z-index:2;max-width:1180px;width:90%;margin:0 auto; padding:70px 0;min-height:600px;display:flex;align-items:center} .am-pres .mhero__col{max-width:600px} .am-pres .mh-eyebrow{color:#d8d8dc;font-size:12.5px;font-weight:600;letter-spacing:2.6px;text-transform:uppercase; margin:0 0 18px;display:flex;align-items:center;gap:12px;line-height:1.2} .am-pres .mh-eyebrow::before{content:"";width:34px;height:1px;background:#8a8a90;flex:0 0 34px} .am-pres .mh-title{color:#fff;font-weight:800;font-size:54px;line-height:1.04;letter-spacing:-1.1px;margin:0} .am-pres .mh-title .thin{font-weight:300;color:#eaeaec} .am-pres .mh-sub{color:#b6b6bd;font-size:17px;line-height:1.55;margin:20px 0 0;max-width:520px;font-weight:400} .am-pres .mh-btns{display:flex;gap:16px;margin-top:32px;flex-wrap:wrap} /* HERO buttons (dark) */ .am-pres .hbtn{border-radius:10px;padding:14px 26px;border:1.5px solid transparent;font-size:14.5px;font-weight:700; line-height:1.1;display:inline-flex;align-items:center;justify-content:center;text-decoration:none; white-space:nowrap;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,box-shadow .2s} .am-pres .hbtn--primary{background:#fff;color:#1a1a1a;border-color:#fff} .am-pres .hbtn--primary::after{content:"→";margin-left:9px;font-size:15px} .am-pres .hbtn--primary:hover{box-shadow:0 6px 18px rgba(0,0,0,.28)} .am-pres .hbtn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.85)} .am-pres .hbtn--ghost:hover{background:rgba(255,255,255,.12);border-color:#fff} /* CONTENT buttons */ .am-pres .am-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:16px; line-height:1;min-height:44px;padding:14px 26px;border-radius:10px;text-decoration:none; border:1.5px solid transparent;cursor:pointer;white-space:nowrap;transition:transform .15s,background .15s,color .15s} .am-pres .am-btn--primary{background:var(--ink);color:#fff;border-color:var(--ink)} .am-pres .am-btn--primary:hover{transform:translateY(-1px);background:#000} .am-pres .am-btn--primary::after{content:"→"} .am-pres .am-btn--ghost{background:transparent;color:var(--ink);border-color:var(--ink)} .am-pres .am-btn--ghost:hover{background:var(--ink);color:#fff} /* ============ ZIG-ZAG (histoire / évolution / humain) ============ */ .am-pres .split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center} .am-pres .split-media{position:relative;isolation:isolate} .am-pres .split.rev .split-media{order:-1} /* A · Cadre éditorial décalé (filet anthracite fin ancré) — ÉPURÉ, aucun bloc noir */ .am-pres .pA{position:relative;isolation:isolate;margin:0 20px 20px 0} .am-pres .pA__img{position:relative;z-index:2;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:8px; box-shadow:0 26px 60px -28px rgba(0,0,0,.4)} .am-pres .pA__frame{position:absolute;inset:0;z-index:1;border:1.5px solid var(--ink);border-radius:8px; transform:translate(20px,20px);pointer-events:none} /* B · Cartes flottantes superposées — ÉPURÉ */ .am-pres .pB{position:relative;isolation:isolate;aspect-ratio:4/3} .am-pres .pB__main{position:absolute;left:0;top:2%;z-index:1;width:74%;aspect-ratio:3/2;object-fit:cover; border-radius:10px;border:6px solid #fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.4)} .am-pres .pB__card{position:absolute;right:0;bottom:0;z-index:3;width:42%;aspect-ratio:4/5;object-fit:cover; border-radius:10px;border:6px solid #fff;box-shadow:0 26px 52px -24px rgba(0,0,0,.42)} .am-pres .pB__cap{position:absolute;left:0;bottom:6%;z-index:4;background:var(--ink);color:#fff; font-size:12px;font-weight:600;letter-spacing:.03em;padding:9px 15px;border-radius:8px; box-shadow:0 10px 24px -12px rgba(0,0,0,.4)} /* C · Duotone anthracite (traitement de la photo) — ÉPURÉ */ .am-pres .pC{position:relative;border-radius:8px;overflow:hidden;background:#1a1c20} .am-pres .pC__img{position:relative;z-index:2;width:100%;aspect-ratio:3/2;object-fit:cover;display:block; filter:grayscale(1) contrast(1.05) brightness(1.03);mix-blend-mode:luminosity;opacity:.95} .am-pres .pC__frame{position:absolute;inset:12px;z-index:4;border:1px solid rgba(255,255,255,.28);border-radius:4px;pointer-events:none} .am-pres .pC__eye{position:absolute;left:24px;top:22px;z-index:5;color:#e6e6e8;font-size:11.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;display:flex;align-items:center;gap:11px} .am-pres .pC__eye::before{content:"";width:26px;height:1px;background:#9aa0a6} /* Timeline continuité */ .am-pres .tl{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:40px 0 0;position:relative} .am-pres .tl::before{content:"";position:absolute;left:6%;right:6%;top:15px;height:2px; background:linear-gradient(90deg,var(--hairline),#cfd3d7 50%,var(--hairline))} .am-pres .tl__node{position:relative;padding:0 16px;text-align:center} .am-pres .tl__dot{width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;margin:0 auto 16px; display:grid;place-items:center;position:relative;z-index:1;box-shadow:0 0 0 6px #fff} .am-pres .tl__dot svg{width:15px;height:15px;stroke:#fff;stroke-width:1.7;fill:none} .am-pres .tl__year{font-size:22px;font-weight:800;color:var(--ink);letter-spacing:-.01em} .am-pres .tl__lab{font-size:14.5px;color:var(--muted);margin-top:6px;max-width:26ch;margin-left:auto;margin-right:auto} .am-pres .figure-50{margin-top:52px;padding:34px 40px;border:1px solid var(--hairline);border-radius:var(--radius); background:var(--surface-alt);display:flex;align-items:center;gap:32px;flex-wrap:wrap} .am-pres .figure-50 .big{font-size:58px;font-weight:800;letter-spacing:-2px;color:var(--ink);line-height:1;white-space:nowrap} .am-pres .figure-50 .big span{font-weight:300;color:var(--muted)} .am-pres .figure-50 p{margin:0;font-size:17px;color:var(--ink-body);max-width:52ch} /* ============ STEPS technique ============ */ .am-pres .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .am-pres .step{border:1px solid var(--hairline);border-radius:14px;padding:28px 24px;background:#fff} .am-pres .step .num{width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff; display:grid;place-items:center;font-weight:700;font-size:15px;margin-bottom:18px} .am-pres .step h3{font-size:18px;font-weight:600;margin:0 0 8px;color:var(--ink)} .am-pres .step p{font-size:15px;color:var(--muted);margin:0;line-height:1.6} /* ============ OUTILS AVANCÉS (cartes cliquables) ============ */ .am-pres .tools{display:grid;grid-template-columns:repeat(4,1fr);gap:24px} .am-pres .tool{border:1px solid var(--hairline);border-radius:14px;padding:30px 26px 26px;background:#fff; display:flex;flex-direction:column;text-decoration:none;position:relative; transition:box-shadow .18s,transform .18s,border-color .18s} .am-pres .tool:hover{box-shadow:0 6px 22px rgba(0,0,0,.08);transform:translateY(-3px);border-color:#dcdfe2} .am-pres .tool__ic{width:48px;height:48px;border-radius:12px;background:var(--surface-alt);border:1px solid var(--hairline); display:grid;place-items:center;margin-bottom:20px;transition:background .18s,color .18s} .am-pres .tool__ic svg{width:23px;height:23px;stroke:var(--ink);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round} .am-pres .tool:hover .tool__ic{background:var(--ink)} .am-pres .tool:hover .tool__ic svg{stroke:#fff} .am-pres .tool h3{font-size:18px;font-weight:600;color:var(--ink);margin:0 0 8px} .am-pres .tool p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0 0 20px} .am-pres .tool__go{margin-top:auto;font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:6px} .am-pres .tool__go::after{content:"→";transition:transform .18s} .am-pres .tool:hover .tool__go::after{transform:translateX(4px)} .am-pres .tools-note{margin:32px auto 0;text-align:center;max-width:70ch;font-size:16.5px;color:var(--ink-body); font-style:italic;line-height:1.6} .am-pres .tools-note strong{font-style:normal;font-weight:600;color:var(--ink)} /* ============ BANDEAU CHIFFRES ============ */ .am-pres .stats{display:grid;grid-template-columns:repeat(5,1fr);gap:0} .am-pres .stat{text-align:center;padding:14px 18px;position:relative} .am-pres .stat + .stat::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:1px;background:rgba(255,255,255,.10)} .am-pres .stat__n{font-size:44px;font-weight:800;letter-spacing:-1.5px;color:#fff;line-height:1;white-space:nowrap} .am-pres .stat__n .pre{font-size:22px;font-weight:600;color:#9aa0a6;letter-spacing:0;vertical-align:.06em;margin-right:4px} .am-pres .stat__l{margin-top:12px;font-size:13.5px;font-weight:500;color:#b6b6bd;letter-spacing:.02em;line-height:1.4} /* ============ MARQUES (vrais logos officiels) ============ */ .am-pres .brands{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:8px} .am-pres .brand{border:1px solid var(--hairline);border-radius:12px;background:#fff;height:96px; display:grid;place-items:center;padding:0 18px; transition:border-color .16s,box-shadow .16s,transform .16s;text-decoration:none} .am-pres .brand img{max-height:32px;max-width:72%;width:auto;object-fit:contain; opacity:.86;transition:opacity .16s,transform .16s} .am-pres .brand.brand--shield img{max-height:44px} .am-pres .brand:hover{border-color:#d3d7db;box-shadow:0 4px 14px rgba(0,0,0,.06);transform:translateY(-2px)} .am-pres .brand:hover img{opacity:1} /* ============ FAQ ============ */ .am-pres .faq{width:100%;max-width:none} .am-pres .faq details{border-bottom:1px solid var(--hairline)} .am-pres .faq details:first-child{border-top:1px solid var(--hairline)} .am-pres .faq summary{list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative; font-weight:600;font-size:18px;color:var(--ink)} .am-pres .faq summary::-webkit-details-marker{display:none} .am-pres .faq summary::after{content:"";position:absolute;right:8px;top:28px;width:11px;height:11px; border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .2s} .am-pres .faq details[open] summary::after{transform:rotate(-135deg);top:32px} .am-pres .faq .a{padding:0 0 26px;font-size:16px;line-height:1.65;color:var(--ink-body);max-width:82ch} /* ============ CTA ============ */ .am-pres .cta-split{background:var(--ink);border-radius:14px;padding:56px 60px;display:grid; grid-template-columns:minmax(0,1fr) auto;gap:40px 64px;align-items:center;color:#fff} .am-pres .cta-split h2{color:#fff;font-size:28px;font-weight:700;letter-spacing:-.02em;max-width:22ch;margin:0 0 14px} .am-pres .cta-split p{color:#c7cbcf;max-width:56ch;margin:0;font-size:16px;line-height:1.6} .am-pres .cta-split .grp{display:flex;flex-direction:column;gap:12px;align-items:stretch} .am-pres .cta-split .am-btn--primary{background:#fff;color:var(--ink);border-color:#fff} .am-pres .cta-split .am-btn--primary:hover{background:#eceded;transform:none} .am-pres .cta-split .am-btn--ghost{color:#fff;border-color:rgba(255,255,255,.55)} .am-pres .cta-split .am-btn--ghost:hover{background:#fff;color:var(--ink)} /* ============ FOOTER (maquette minimal) ============ */ .am-pres .mfooter{background:#0a0a0a;color:#8a9099;font-size:13.5px} .am-pres .mfooter__in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px 0} .am-pres .mfooter a{color:#c4c4cb;text-decoration:none} .am-pres .mfooter a:hover{color:#fff} /* ============ REVEAL ============ */ .am-pres .rv{opacity:0;transform:translateY(22px);transition:opacity .62s ease,transform .62s ease} .am-pres .rv.in{opacity:1;transform:none} /* ============ RESPONSIVE ============ */ @media(max-width:980px){ .am-pres .mhero__row{min-height:480px;padding:54px 0} .am-pres .mh-title{font-size:38px;letter-spacing:-.6px} .am-pres .mh-btns{width:100%} .am-pres .mh-btns .hbtn{flex:1 1 100%;width:100%} .am-pres .tools,.am-pres .steps{grid-template-columns:repeat(2,1fr)} .am-pres .brands{grid-template-columns:repeat(4,1fr)} .am-pres .stats{grid-template-columns:repeat(3,1fr);gap:28px 8px} .am-pres .stat + .stat::before{display:none} .am-pres .stat__n{font-size:38px} } @media(max-width:860px){ .am-pres .sec{padding:72px 0} .am-pres .split{grid-template-columns:1fr;gap:34px} .am-pres .split.rev .split-media{order:0} .am-pres .pA{margin:0 16px 16px 0} .am-pres .pA__frame{transform:translate(16px,16px)} .am-pres .tl{gap:8px} .am-pres .tl::before{display:none} } @media(max-width:720px){ .am-pres .sec{padding:56px 0} .am-pres .wrap{padding:0 20px} .am-pres .mh-title{font-size:30px} .am-pres .mh-btns{flex-direction:column} .am-pres h2.c-h2{font-size:26px} .am-pres .c-lead{font-size:18px} .am-pres .c-body{font-size:16.5px} .am-pres .tools,.am-pres .steps{grid-template-columns:1fr} .am-pres .pA__frame{transform:translate(14px,14px)} .am-pres .pB__cap{font-size:11px;padding:7px 12px} .am-pres .pC__eye{left:18px;top:16px} .am-pres .tl{grid-template-columns:1fr;gap:26px} .am-pres .figure-50{flex-direction:column;align-items:flex-start;gap:14px;padding:26px 24px} .am-pres .figure-50 .big{font-size:46px} .am-pres .brands{grid-template-columns:repeat(2,1fr)} .am-pres .stats{grid-template-columns:repeat(2,1fr)} .am-pres .stat__n{font-size:34px} .am-pres .cta-split{grid-template-columns:1fr;gap:26px;padding:36px 28px} .am-pres .faq summary{font-size:16px} .am-pres .faq .a{font-size:15px} .am-pres .mfooter__in{flex-direction:column;gap:10px} } @media(prefers-reduced-motion:reduce){ .am-pres .mhero::before{animation:none} .am-pres .rv{opacity:1;transform:none;transition:none} html{scroll-behavior:auto} }