/* ========================================================================== Accueil · section 02 « Produits », version ordinateur et tablette (≥ 760 px) — 31 octobre 2026 Mise en forme du dossier « livraison-produits-ordinateur » : 5 cartes famille (3 + 2 de 760 à 1079 px) et une bande « Conseil gratuit à domicile ». Gabarit : parts/accueil/produits-ordinateur.php. Chargé sur l'accueil seulement (inc/accueil/produits.php). Sous 760 px, rien ne change : tuiles et carte [pm_conseil] mobile (section 23 de pm-global.css). ========================================================================== */ #pm-page .pm-produits-o{display:none} @media (min-width:760px){ /* Section #produits (conteneur Elementor « 02 · Produits ») : plus serrée pour tenir dans un écran sous le héros */ #pm-page #produits{--pm-pad-y:72px;--pm-pad-x:32px;--pm-h2:clamp(32px,2.8vw,42px)} #pm-page #produits .pm-entete-section h2{line-height:1.06} #pm-page #produits .pm-chapo, #pm-page #produits .pm-chapo p{font-size:17px} #pm-page #produits .pm-produits{margin-top:32px} /* Bloc mobile (question + tuiles) et carte [pm_conseil] de l'accueil : remplacés ici par les cartes et la bande */ #pm-page .pm-produits--mobile{display:none} #pm-page #produits .elementor-widget-shortcode:has(.pm-conseil){display:none} #pm-page .pm-produits-o{display:block;font-family:var(--police-texte)} #pm-page .pm-produits-o svg{display:block;flex:none} /* Grille : 6 colonnes, cartes sur 2 (première ligne : 3) puis sur 3 (deuxième ligne : 2) */ #pm-page .pm-produits-o__grille{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px} #pm-page .pm-produits-o__item{grid-column:span 2;min-width:0;display:flex;margin:0;padding:0} #pm-page .pm-produits-o__item:nth-child(n+4){grid-column:span 3} /* Carte : toute la carte est le lien (une seule tabulation) */ #pm-page .pm-produits-o__carte{flex:1;min-width:0;display:flex;flex-direction:column;border-radius:var(--r-tuile);overflow:hidden;background:#fff;box-shadow:inset 0 0 0 1px var(--pierre-200);color:var(--encre);text-decoration:none;transition:box-shadow 200ms var(--ease)} #pm-page .pm-produits-o__carte:hover{box-shadow:inset 0 0 0 2px var(--pic-800),0 22px 48px -24px rgba(8,21,48,.32)} #pm-page .pm-produits-o__carte:focus-visible{outline:none;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--ciel-500)} #pm-page .pm-produits-o__photo{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--pierre-100)} #pm-page .pm-produits-o__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform 500ms var(--ease)} #pm-page .pm-produits-o__carte:hover .pm-produits-o__img{transform:scale(1.03)} /* Famille sans photo : aplat neutre, grand picto en filigrane (jamais d'image cassée) */ #pm-page .pm-produits-o__motif{position:absolute;inset:0;display:grid;place-items:center;color:var(--pierre-300)} #pm-page .pm-produits-o__motif svg{width:56px;height:56px;stroke-width:1} #pm-page .pm-produits-o__picto{position:absolute;top:12px;left:12px;width:42px;height:42px;background:#fff;color:var(--pic-800);display:grid;place-items:center;transition:background-color 200ms,color 200ms} #pm-page .pm-produits-o__picto svg{width:23px;height:23px} #pm-page .pm-produits-o__carte:hover .pm-produits-o__picto{background:var(--pic-800);color:#fff} /* Étiquette facultative (champ « Étiquette sur la photo » de la famille) */ #pm-page .pm-produits-o__badge{position:absolute;top:18px;right:12px;height:30px;padding:0 12px;display:inline-flex;align-items:center;gap:7px;border-radius:var(--r-disque);background:#fff;color:var(--pic-900);font:700 13px/1 var(--police-titre);white-space:nowrap} #pm-page .pm-produits-o__badge::before{content:"";width:7px;height:7px;border-radius:var(--r-disque);background:var(--ciel-500);flex:none} #pm-page .pm-produits-o__corps{flex:1;display:flex;flex-direction:column;gap:6px;padding:16px 20px} #pm-page .pm-produits-o__nom{margin:0;font:700 22px/1.15 var(--police-titre);letter-spacing:-.01em;color:var(--pic-900);text-wrap:balance} #pm-page .pm-produits-o__ligne{display:block;margin:0 0 12px;font-size:16px;line-height:1.45;color:var(--pierre-700);text-wrap:pretty} #pm-page .pm-produits-o__lien{margin-top:auto;padding-top:12px;border-top:1px solid var(--pierre-100);display:flex;align-items:center;justify-content:space-between;gap:10px;font:700 16px/1.2 var(--police-titre);color:var(--pic-800)} #pm-page .pm-produits-o__fleche{width:40px;height:40px;border-radius:var(--r-disque);background:var(--pic-100);color:var(--pic-800);display:grid;place-items:center;flex:none;transition:transform 240ms var(--ease),background-color 200ms,color 200ms} #pm-page .pm-produits-o__fleche svg{width:18px;height:18px} #pm-page .pm-produits-o__carte:hover .pm-produits-o__fleche{background:var(--pic-800);color:#fff;transform:translateX(3px)} /* Bande conseil : photo des conseillers (médiathèque, même image que [pm_conseil]) qui dépasse en haut */ #pm-page .pm-produits-o__conseil{position:relative;margin-top:20px;min-height:96px;background:var(--pic-50);border-radius:var(--r-tuile);padding:16px 20px 16px 263px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px} #pm-page .pm-produits-o__conseil--sans-photo{padding-left:28px} #pm-page .pm-produits-o__halo{position:absolute;left:0;top:0;bottom:0;width:263px;border-radius:var(--r-tuile) 0 0 var(--r-tuile);overflow:hidden;pointer-events:none} #pm-page .pm-produits-o__halo::before{content:"";position:absolute;left:6%;bottom:-90%;width:88%;aspect-ratio:1;border-radius:var(--r-disque);background:radial-gradient(circle,rgba(81,207,244,.38) 0%,rgba(38,145,208,.14) 45%,rgba(241,245,251,0) 70%)} #pm-page .pm-produits-o__conseillers{position:absolute;left:20px;bottom:0;height:100px;width:auto;max-width:none;pointer-events:none;transform-origin:50% 100%;transition:transform 400ms var(--ease);filter:drop-shadow(0 -2px 12px rgba(8,21,48,.10))} #pm-page .pm-produits-o__conseil:hover .pm-produits-o__conseillers{transform:translateY(-5px) scale(1.02)} #pm-page .pm-produits-o__conseil-textes{flex:1 1 280px;display:grid;gap:4px;min-width:0} #pm-page .pm-produits-o__conseil-surtitre{margin:0;font:700 12px/1.3 var(--police-titre);letter-spacing:.14em;text-transform:uppercase;color:var(--ciel-700)} #pm-page .pm-produits-o__conseil-titre{margin:0;font:700 20px/1.25 var(--police-titre);color:var(--pic-900);text-wrap:balance} #pm-page .pm-produits-o__conseil-actions{flex:1 1 auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px} #pm-page .pm-produits-o__visite{height:52px;padding:0 6px 0 20px;display:inline-flex;align-items:center;justify-content:space-between;gap:14px;border-radius:var(--r-disque);background:var(--pic-800);color:#fff;font:700 16px/1 var(--police-titre);text-decoration:none;white-space:nowrap;transition:background-color 160ms} #pm-page .pm-produits-o__visite:hover{background:var(--pic-900);color:#fff} #pm-page .pm-produits-o__visite:focus-visible, #pm-page .pm-produits-o__tel:focus-visible{outline:none;box-shadow:0 0 0 2px var(--pic-50),0 0 0 5px var(--ciel-500)} #pm-page .pm-produits-o__disque{width:40px;height:40px;border-radius:var(--r-disque);background:#fff;color:var(--pic-800);display:grid;place-items:center} #pm-page .pm-produits-o__disque svg{width:19px;height:19px} #pm-page .pm-produits-o__tel{height:52px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:var(--r-disque);border:1.5px solid var(--pic-800);background:#fff;color:var(--pic-900);font:700 16px/1 var(--police-titre);text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;transition:background-color 160ms} #pm-page .pm-produits-o__tel:hover{background:var(--pic-100);color:var(--pic-900)} #pm-page .pm-produits-o__tel svg{width:18px;height:18px;color:var(--pic-800)} /* Point de statut : pm-site.js pose data-etat="ouvert" ou "ferme" */ #pm-page .pm-produits-o__point{width:8px;height:8px;border-radius:var(--r-disque);background:var(--pierre-400);flex:none} #pm-page .pm-produits-o__point[data-etat="ouvert"]{background:var(--succes-700)} } /* Ordinateur (≥ 1080 px) : 5 cartes sur une ligne, section qui tient dans un écran (≈ 720 px à 1440 px) */ @media (min-width:1080px){ #pm-page #produits{--pm-pad-y:64px;--pm-pad-x:60px} #pm-page .pm-produits-o__grille{grid-template-columns:repeat(5,minmax(0,1fr))} #pm-page .pm-produits-o__item, #pm-page .pm-produits-o__item:nth-child(n+4){grid-column:auto} #pm-page .pm-produits-o__photo{aspect-ratio:16/10} #pm-page .pm-produits-o__nom{font-size:21px} #pm-page .pm-produits-o__conseil{padding-left:290px} #pm-page .pm-produits-o__conseil--sans-photo{padding-left:28px} #pm-page .pm-produits-o__halo{width:290px} #pm-page .pm-produits-o__conseillers{height:112px} #pm-page .pm-produits-o__conseil-actions{flex:0 0 auto} } @media (min-width:760px) and (prefers-reduced-motion:reduce){ #pm-page .pm-produits-o *{transition:none!important} #pm-page .pm-produits-o__carte:hover .pm-produits-o__img, #pm-page .pm-produits-o__carte:hover .pm-produits-o__fleche, #pm-page .pm-produits-o__conseil:hover .pm-produits-o__conseillers{transform:none} }