/* ========================================================================== Pyrénées Menuiseries — styles globaux Les couleurs et typographies principales sont réglées dans le Kit Elementor (Réglages du site). Ce fichier contient : 1. les jetons du design system (variables CSS, identiques au Kit) ; 2. les quelques classes « pm- » qu'Elementor ne sait pas produire seul. Règle : jamais de CSS propre à une page. Toute nouvelle classe est documentée ici. Les sélecteurs .elementor-* sont à vérifier dans l'inspecteur après chaque mise à jour d'Elementor. ========================================================================== */ /* 1. Jetons ------------------------------------------------------------- */ :root{ /* Bleu Pic — marque (logo #0F3982) */ --pic-950:#081530; --pic-900:#0B2154; --pic-800:#0F3982; --pic-700:#1A4C9E; --pic-100:#E3EAF5; --pic-50:#F1F5FB; /* Ciel — verre, lumière (dégradé du logo) */ --ciel-300:#51CFF4; --ciel-500:#2691D0; --ciel-700:#16679D; --ciel-100:#E1F3FB; --filet-lumiere:linear-gradient(90deg,#51CFF4,#2691D0); /* Pierre — neutres chauds */ --blanc:#FFFFFF; --pierre-50:#F7F5F1; --pierre-100:#EEEAE3; --pierre-200:#E0DBD2; --pierre-300:#C9C3B8; --pierre-400:#A8A296; --pierre-500:#8A8479; --pierre-600:#6B665D; --pierre-700:#4A463F; --encre:#1F1D1A; --inverse-2:#AEB9CC; /* Braise — l'unique accent, réservé aux actions de conversion */ --braise-600:#C84B11; --braise-700:#A63D0C; --braise-800:#8A3209; /* États */ --succes-700:#1E7044; --succes-100:#E5F2EA; --alerte-700:#8F5E00; --alerte-100:#FFF3D6; --erreur-700:#B0213F; --erreur-100:#FBE7EB; /* Typographie */ --police-titre:'Red Hat Display',system-ui,sans-serif; --police-texte:'Red Hat Text',system-ui,sans-serif; /* Rayons */ --r-0:0; --r-case:6px; --r-tuile:16px; --r-zone:20px; --r-disque:999px; /* Ombres */ --om-1:0 1px 2px rgba(8,21,48,.06); --om-2:0 16px 40px -16px rgba(8,21,48,.22); --om-3:0 32px 72px -24px rgba(8,21,48,.32); /* Mouvement */ --ease:cubic-bezier(.2,.7,.2,1); --d-rapide:160ms; --d-base:240ms; --d-lente:600ms; /* Mise en page */ --marge:clamp(20px,4.2vw,60px); --section-y:clamp(64px,3.5rem + 4vw,128px); /* Étoiles des notes et des avis : jaune Google, une seule couleur pour tout le site */ --etoile:#FBBC04; } /* 2. Base ---------------------------------------------------------------- */ html{scroll-behavior:smooth} body{font-family:var(--police-texte);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} h1,h2,h3,h4,h5,h6{font-family:var(--police-titre)} [id]{scroll-margin-top:24px} :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ciel-500);outline-offset:2px} .pm-fond-nuit :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--ciel-300)} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* 3. Surtitre (kicker) : Red Hat Display 700, 13 px, capitales espacées, filet devant Usage : classe CSS « pm-surtitre » sur un widget Titre (balise p ou span). */ .pm-surtitre,.pm-surtitre .elementor-heading-title{ display:flex;align-items:center;gap:12px;margin:0; font:700 13px/1.3 var(--police-titre);letter-spacing:.14em;text-transform:uppercase;color:var(--pic-800); } .pm-surtitre .elementor-heading-title::before,.pm-surtitre:not(.elementor-widget)::before{content:"";width:28px;height:1px;background:currentColor;flex:none} .pm-surtitre--inverse .elementor-heading-title,.pm-surtitre--inverse:not(.elementor-widget){color:var(--ciel-300)} .pm-surtitre--centre .elementor-heading-title{justify-content:center} /* 4. Boutons — pilule + disque blanc contenant la flèche (signature du site) Usage : widget Bouton, classe « pm-btn » + variante. Icône : flèche, position « après ». */ .pm-btn .elementor-button{ display:inline-flex;align-items:center;min-height:56px;padding:8px 8px 8px 24px;border-radius:var(--r-disque); font:700 16px/1.2 var(--police-titre);letter-spacing:.005em;text-decoration:none; transition:background-color var(--d-rapide) var(--ease),color var(--d-rapide) var(--ease),box-shadow var(--d-rapide) var(--ease); } .pm-btn .elementor-button-content-wrapper{align-items:center;gap:12px} .pm-btn .elementor-button-icon{ width:40px;height:40px;border-radius:var(--r-disque);display:grid;place-items:center;flex:none; transition:transform var(--d-rapide) var(--ease); } .pm-btn .elementor-button-icon svg{width:20px;height:20px} .pm-btn .elementor-button-icon .e-font-icon-svg{fill:currentColor} .pm-btn .elementor-button:hover .elementor-button-icon{transform:translateX(3px)} /* Action (Braise) : devis, appel, rendez-vous. Une seule par écran. */ .pm-btn--action .elementor-button{background:var(--braise-600);color:#fff} .pm-btn--action .elementor-button:hover{background:var(--braise-700);color:#fff} .pm-btn--action .elementor-button:active{background:var(--braise-800)} .pm-btn--action .elementor-button-icon{background:#fff;color:var(--braise-600)} /* Secondaire : contour Pic, disque Pic */ .pm-btn--secondaire .elementor-button{background:#fff;color:var(--pic-800);box-shadow:inset 0 0 0 1.5px var(--pic-800)} .pm-btn--secondaire .elementor-button:hover{background:var(--pic-50);color:var(--pic-900);box-shadow:inset 0 0 0 2px var(--pic-900)} .pm-btn--secondaire .elementor-button-icon{background:var(--pic-800);color:#fff} /* Plein bleu (deuxième action quand une Braise est déjà visible) */ .pm-btn--bleu .elementor-button{background:var(--pic-800);color:#fff} .pm-btn--bleu .elementor-button:hover{background:var(--pic-900);color:#fff} .pm-btn--bleu .elementor-button-icon{background:#fff;color:var(--pic-800)} /* Sur fond Nuit : contour blanc */ .pm-btn--inverse .elementor-button{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff} .pm-btn--inverse .elementor-button:hover{background:rgba(255,255,255,.1);color:#fff} .pm-btn--inverse .elementor-button-icon{background:#fff;color:var(--pic-900)} /* Tailles */ .pm-btn--m .elementor-button{min-height:48px;padding:7px 7px 7px 20px;font-size:15px} .pm-btn--m .elementor-button-icon{width:34px;height:34px} .pm-btn--m .elementor-button-icon svg{width:18px;height:18px} .pm-btn--plein .elementor-button{width:100%;justify-content:space-between} @media (max-width:767px){.pm-btn--plein-mobile .elementor-button{width:100%;justify-content:space-between}} /* 5. Téléphone mis en avant */ .pm-tel{font:700 18px/1.2 var(--police-titre);color:inherit;text-decoration:none;font-variant-numeric:tabular-nums;white-space:nowrap} .pm-tel:hover{text-decoration:underline;text-underline-offset:4px} a.pm-tel,a.pm-tel:hover{color:inherit} /* garde la couleur du texte environnant, devant la couleur des liens du Kit (fond Nuit) */ /* 6. Statut d'ouverture ([pm_statut]) — rempli par pm-site.js */ .pm-statut{display:inline-flex;align-items:center;gap:8px} .pm-statut__point{width:8px;height:8px;border-radius:var(--r-disque);background:var(--pierre-500);flex:none} .pm-statut[data-etat="ouvert"] .pm-statut__point{background:var(--succes-700)} .pm-fond-nuit .pm-statut[data-etat="ouvert"] .pm-statut__point{background:#3DBE7A} /* 7. Horaires ([pm_horaires]) — le jour courant est marqué */ .pm-horaires{margin:0;display:grid} .pm-horaires__ligne{display:flex;justify-content:space-between;gap:12px;padding:8px 0 8px 10px;border-top:1px solid var(--pierre-200)} .pm-horaires__ligne dt,.pm-horaires__ligne dd{margin:0;font-size:15px} .pm-horaires__ligne dd{font-variant-numeric:tabular-nums;text-align:right} .pm-horaires__ligne.is-aujourdhui{box-shadow:inset 2px 0 0 var(--ciel-500)} .pm-horaires__ligne.is-aujourdhui dt,.pm-horaires__ligne.is-aujourdhui dd{font-weight:700;color:var(--pic-900)} .pm-fond-nuit .pm-horaires__ligne{border-color:#1C2B4D} .pm-fond-nuit .pm-horaires__ligne.is-aujourdhui dt,.pm-fond-nuit .pm-horaires__ligne.is-aujourdhui dd{color:#fff} /* 8. Photo « dormant » : filet blanc intérieur, comme le cadre d'une fenêtre (une fois par écran) */ .pm-dormant{position:relative} .pm-dormant::after{content:"";position:absolute;inset:14px;border:1px solid rgba(255,255,255,.42);pointer-events:none;z-index:2} /* 9. Filet lumière (onglet actif, progression, haut de carte au survol) */ .pm-filet-lumiere{height:3px;background:var(--filet-lumiere)} /* 10. Carte cliquable : survol = bordure Pic + ombre 2 + filet lumière + zoom photo */ .pm-carte{position:relative;background:#fff;border:1px solid var(--pierre-200);transition:border-color var(--d-rapide) var(--ease),box-shadow var(--d-base) var(--ease)} .pm-carte::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--filet-lumiere);opacity:0;transition:opacity var(--d-rapide) var(--ease);z-index:2} .pm-carte:hover{border-color:var(--pic-800);box-shadow:var(--om-2)} .pm-carte:hover::before{opacity:1} .pm-carte img{transition:transform var(--d-lente) var(--ease)} .pm-carte:hover img{transform:scale(1.03)} .pm-carte .pm-carte__lien::after{content:"";position:absolute;inset:0;z-index:3} /* rend toute la carte cliquable */ /* 11. Picto de famille dans son cadre carré (seul usage « encadré » d'une icône) */ .pm-picto{width:48px;height:48px;border:1px solid var(--pic-800);display:grid;place-items:center;color:var(--pic-800)} .pm-picto svg{width:26px;height:26px} /* 12. Badges */ .pm-badge{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 12px;border-radius:var(--r-disque);font:700 11px/1 var(--police-titre);letter-spacing:.12em;text-transform:uppercase} .pm-badge--ouvert{background:var(--succes-100);color:var(--succes-700)} .pm-badge--info{background:var(--ciel-100);color:var(--ciel-700)} .pm-badge--nuit{background:var(--pic-900);color:#fff} /* 13. Formulaires du thème enfant : champs pilule 56 px, libellé visible Les formulaires sont générés par le thème (codes courts) ; les sélecteurs .elementor-* couvrent aussi les champs stylés par le Kit. Structure attendue : .pm-form > .pm-champ > label + input/select/textarea + .pm-aide / .pm-erreur */ .pm-form .pm-champ{display:grid;gap:8px} .pm-form .pm-champ>label{font:600 15px/1.3 var(--police-texte);color:var(--encre)} .pm-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),select){min-height:56px;padding:0 20px;border:1px solid var(--pierre-500);border-radius:var(--r-disque);background:#fff;font:400 17px var(--police-texte);color:var(--encre);width:100%} .pm-form textarea{min-height:112px;padding:14px 20px;border:1px solid var(--pierre-500);border-radius:var(--r-zone);font:400 17px/1.5 var(--police-texte);width:100%} .pm-form :is(input,select,textarea):hover{border-color:var(--encre)} .pm-form :is(input,select,textarea):focus{border:2px solid var(--pic-800);box-shadow:0 0 0 3px #B9E4F6;outline:none} .pm-form :is(input,select,textarea)[aria-invalid="true"]{border:2px solid var(--erreur-700)} .pm-form .pm-aide{font-size:14px;color:var(--pierre-600)} .pm-form .pm-erreur{display:flex;gap:8px;font-size:14px;color:var(--erreur-700)} .pm-form input[type="checkbox"]{width:24px;height:24px;border-radius:var(--r-case);accent-color:var(--pic-800)} .pm-form input[type="radio"]{width:24px;height:24px;accent-color:var(--pic-800)} .pm-form .pm-piege{position:absolute!important;left:-9999px} /* Tuiles de projet : */ .pm-tuiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(46%,180px),1fr));gap:10px} .pm-tuile{position:relative;display:block;cursor:pointer} .pm-tuile input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .pm-tuile__corps{display:flex;align-items:center;gap:12px;min-height:64px;padding:0 14px;border:1px solid var(--pierre-200);border-radius:var(--r-tuile);background:#fff;font:700 15px/1.25 var(--police-titre);color:var(--pic-900);transition:border-color var(--d-rapide),background-color var(--d-rapide)} .pm-tuile input:hover+.pm-tuile__corps{border-color:var(--pic-800)} .pm-tuile input:checked+.pm-tuile__corps{border:2px solid var(--pic-800);background:var(--pic-50);padding:0 13px} .pm-tuile input:focus-visible+.pm-tuile__corps{outline:3px solid var(--ciel-500);outline-offset:2px} /* Ancien balisage Elementor (champs stylés par le Kit), conservé par compatibilité */ .pm-form .elementor-field-group>label{font:600 15px/1.3 var(--police-texte);color:var(--encre);margin-bottom:8px} .pm-form .elementor-field-textual{min-height:56px;padding:0 20px;border:1px solid var(--pierre-500);border-radius:var(--r-disque);background:#fff;font:400 17px var(--police-texte);color:var(--encre)} .pm-form textarea.elementor-field-textual{min-height:112px;padding:14px 20px;border-radius:var(--r-zone)} .pm-form .elementor-field-textual:hover{border-color:var(--encre)} .pm-form .elementor-field-textual:focus{border:2px solid var(--pic-800);box-shadow:0 0 0 3px #B9E4F6;outline:none} .pm-form .elementor-field-textual[aria-invalid="true"]{border:2px solid var(--erreur-700)} .pm-form .elementor-message-danger,.pm-form .elementor-error .elementor-message{color:var(--erreur-700)} .pm-form .elementor-field-option input[type="checkbox"]{width:24px;height:24px;border-radius:var(--r-case);accent-color:var(--pic-800)} .pm-form .elementor-field-option input[type="radio"]{width:24px;height:24px;accent-color:var(--pic-800)} /* 14. En-tête : voir la section 20 (les règles « .pm-entete-js » de la première version ont été remplacées). */ /* 15. Barre d'action mobile : Appeler / Devis / Itinéraire (pm-site.js gère l'affichage) Usage : conteneur avec la classe « pm-barre-mobile » dans le modèle de pied de page. */ .pm-barre-mobile{position:fixed;left:0;right:0;bottom:0;z-index:45;padding:8px 8px calc(8px + env(safe-area-inset-bottom));background:#fff;border-top:1px solid var(--pierre-200);box-shadow:0 -12px 32px -16px rgba(8,21,48,.28);transform:translateY(110%);transition:transform var(--d-base) var(--ease)} .pm-barre-mobile.is-visible{transform:none} @media (min-width:768px){.pm-barre-mobile{display:none!important}} /* La place de la barre est réservée par le pied de page (section 19) : le bleu nuit continue dessous, sans bande blanche. */ /* 16. Menu mobile ouvert : la page derrière ne défile plus */ body.pm-menu-ouvert{overflow:hidden} /* 17. Utilitaires */ .pm-fond-nuit{background:var(--pic-950);color:#fff} .pm-fond-pierre{background:var(--pierre-50)} .pm-texte-equilibre .elementor-heading-title{text-wrap:balance} .pm-texte-lisible{text-wrap:pretty;max-width:720px} .pm-chiffres{font-variant-numeric:tabular-nums} .pm-visuellement-cache{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* 18. Conteneurs Elementor : marges de page et respiration verticale Le Kit (Réglages du site > Mise en page) donne à chaque conteneur de premier niveau les marges latérales (60 / 32 / 20 px) et la respiration verticale (128 / 96 / 64 px). Les conteneurs imbriqués repartent de zéro : leur marge interne se règle au cas par cas dans Elementor. */ .e-con .e-con{--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px} /* ========================================================================== 19. Pied de page — parts/pied-de-page.php Toutes les règles sont préfixées par #pm-pied : elles passent ainsi devant les styles du Kit Elementor (titres, liens, boutons, champs), qui s'appliquent à toute la page. Points de rupture : mobile ≤ 767 px · tablette 768–1119 px · ordinateur ≥ 1120 px. Aucun texte sous 12 px. Toutes les couleurs viennent des jetons de la section 1, sauf 6 teintes locales déclarées ci-dessous. ========================================================================== */ #pm-pied{ --pied-ligne:#1C2B4D; --pied-texte-2:#C9D3E3; --pied-texte-3:var(--inverse-2); --pied-verre:rgba(255,255,255,.04); --pied-anneau:inset 0 0 0 1px rgba(255,255,255,.1); --pied-ouvert:#3DBE7A; --pied-erreur:#FFA3B5; --pied-or:var(--etoile,#FBBC04); position:relative;isolation:isolate;overflow:hidden; background:var(--pic-950);color:#fff;font-family:var(--police-texte); } #pm-pied a{color:#fff} #pm-pied svg{display:block;flex:none} #pm-pied :is(a,button,input):focus-visible{outline:3px solid var(--ciel-300);outline-offset:3px} /* Fond photo très atténué */ #pm-pied .pm-pied__fond{position:absolute;inset:0;z-index:-1;pointer-events:none} #pm-pied .pm-pied__fond-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 45%;opacity:.24;mix-blend-mode:luminosity} #pm-pied .pm-pied__fond::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,21,48,.55) 0%,rgba(8,21,48,.15) 35%,rgba(8,21,48,.35) 70%,#081530 100%)} #pm-pied .pm-pied__conteneur{max-width:1440px;margin:0 auto;padding:88px 60px 0} /* Surtitres */ #pm-pied .pm-pied__surtitre{display:flex;align-items:center;gap:12px;margin:0;font:700 12px/1.2 var(--police-titre);letter-spacing:.14em;text-transform:uppercase;color:var(--ciel-300)} #pm-pied .pm-pied__surtitre::before{content:"";width:28px;height:1px;background:currentColor} #pm-pied .pm-pied__surtitre--simple::before{display:none} #pm-pied .pm-pied__mini-titre{margin:0;font:700 12px/1.2 var(--police-titre);letter-spacing:.14em;text-transform:uppercase;color:var(--pied-texte-3)} /* Disques (flèche dans un rond blanc, signature des boutons) */ #pm-pied .pm-pied__disque{width:40px;height:40px;border-radius:var(--r-disque);background:#fff;display:grid;place-items:center;flex:none;color:var(--braise-600)} #pm-pied .pm-pied__disque svg{width:20px;height:20px} #pm-pied .pm-pied__disque-contour{width:40px;height:40px;border-radius:var(--r-disque);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);display:grid;place-items:center;flex:none} #pm-pied .pm-pied__disque-contour svg{width:18px;height:18px} /* ---------- Ligne 1 : contact + showroom ---------- */ #pm-pied .pm-pied__haut{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px} #pm-pied .pm-pied__carte{position:relative;border-radius:24px;background:var(--pied-verre);box-shadow:var(--pied-anneau)} #pm-pied .pm-pied__contact{padding:36px;display:flex;flex-direction:column;gap:20px} #pm-pied .pm-pied__titre{margin:-4px 0 0;font:700 32px/1.12 var(--police-titre);letter-spacing:-.015em;color:#fff;text-wrap:balance} #pm-pied .pm-pied__tel{display:flex;align-items:center;gap:16px;width:fit-content;border-radius:var(--r-disque);text-decoration:none;transition:background var(--d-rapide) var(--ease)} #pm-pied .pm-pied__tel:hover{background:rgba(255,255,255,.06);color:#fff} #pm-pied .pm-pied__tel-disque{width:56px;height:56px;border-radius:var(--r-disque);background:#fff;display:grid;place-items:center;flex:none;color:var(--pic-800)} #pm-pied .pm-pied__tel-disque svg{width:22px;height:22px} #pm-pied .pm-pied__tel-corps{display:grid;gap:6px;min-width:0} #pm-pied .pm-pied__tel-numero{font:700 36px/1 var(--police-titre);letter-spacing:-.015em;font-variant-numeric:tabular-nums;white-space:nowrap} #pm-pied .pm-pied__tel .pm-statut{font-size:14px;color:var(--pied-texte-2)} #pm-pied .pm-statut[data-etat="ouvert"] .pm-statut__point{background:var(--pied-ouvert)} #pm-pied .pm-pied__ou{display:flex;align-items:center;gap:14px;font:700 12px/1 var(--police-titre);letter-spacing:.14em;text-transform:uppercase;color:var(--pied-texte-3)} #pm-pied .pm-pied__ou::before,#pm-pied .pm-pied__ou::after{content:"";flex:1;height:1px;background:var(--pied-ligne)} /* Formulaire de rappel (affiché seulement avec JavaScript) */ .pm-js-requis{display:none} .pm-js #pm-pied .pm-js-requis{display:grid} #pm-pied .pm-pied__rappel{gap:12px;margin:0} #pm-pied .pm-pied__rappel-label{font:700 17px/1.3 var(--police-titre);color:#fff} #pm-pied .pm-pied__rappel-ligne{display:flex;gap:10px} #pm-pied .pm-pied__rappel-champ{flex:1 1 0%;min-width:0;height:56px;margin:0;padding:0 22px;border:0;border-radius:var(--r-disque);background:#fff;color:var(--encre);font:400 17px var(--police-texte);box-shadow:none} #pm-pied .pm-pied__rappel-champ::placeholder{color:var(--pierre-600)} #pm-pied .pm-pied__rappel-champ:focus{outline:none;box-shadow:0 0 0 3px var(--ciel-300)} #pm-pied .pm-pied__rappel-champ[aria-invalid="true"]{box-shadow:0 0 0 3px var(--pied-erreur)} #pm-pied .pm-pied__rappel-bouton{flex:none;height:56px;padding:0 8px 0 24px;border:0;border-radius:var(--r-disque);background:var(--braise-600);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:14px;font:700 16px/1 var(--police-titre);letter-spacing:.005em;white-space:nowrap;cursor:pointer;transition:background var(--d-rapide) var(--ease)} #pm-pied .pm-pied__rappel-bouton:hover{background:var(--braise-700)} #pm-pied .pm-pied__rappel-bouton:active{background:var(--braise-800)} #pm-pied .pm-pied__rappel-bouton[aria-disabled="true"]{background:var(--pied-ligne);color:#8E9BB5;cursor:not-allowed} #pm-pied .pm-pied__rappel-bouton[aria-disabled="true"] .pm-pied__disque{background:#2A3A5C;color:#8E9BB5} #pm-pied .pm-pied__rappel-bouton[aria-busy="true"]{opacity:.8;cursor:progress} #pm-pied .pm-pied__rappel-aide{margin:0;font-size:13px;line-height:1.5;color:var(--pied-texte-3)} #pm-pied .pm-pied__rappel-aide a{color:var(--pied-texte-2);text-decoration:underline;text-underline-offset:3px} #pm-pied .pm-pied__rappel-erreur{margin:0;display:flex;gap:8px;align-items:flex-start;font-size:14px;line-height:1.45;color:var(--pied-erreur)} #pm-pied .pm-pied__rappel-ok{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start;padding:16px;border-radius:16px;background:rgba(61,190,122,.12);box-shadow:inset 0 0 0 1px rgba(61,190,122,.35)} #pm-pied .pm-pied__rappel-ok[hidden]{display:none} #pm-pied .pm-pied__rappel-ok-disque{width:44px;height:44px;border-radius:var(--r-disque);background:#fff;display:grid;place-items:center;color:var(--succes-700)} #pm-pied .pm-pied__rappel-ok strong{display:block;font:700 18px/1.3 var(--police-titre)} #pm-pied .pm-pied__rappel-ok p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--pied-texte-2)} #pm-pied .pm-pied__ecrire{margin-top:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;width:fit-content;font:600 15px var(--police-texte);text-decoration:none} #pm-pied .pm-pied__ecrire svg{width:18px;height:18px} #pm-pied .pm-pied__ecrire:hover{color:var(--ciel-300);text-decoration:underline} /* Showroom */ #pm-pied .pm-pied__showroom{overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)} #pm-pied .pm-pied__plan{position:relative;display:block;min-height:100%;overflow:hidden;background:#0D1C3B;text-decoration:none} #pm-pied .pm-pied__plan:focus-visible{outline:none;box-shadow:inset 0 0 0 3px var(--ciel-300)} #pm-pied .pm-pied__plan-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%} #pm-pied .pm-pied__plan-halo{position:absolute;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:var(--r-disque);background:radial-gradient(closest-side,rgba(81,207,244,.34),rgba(81,207,244,.12) 60%,rgba(81,207,244,0))} #pm-pied .pm-pied__plan-repere{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:var(--r-disque);background:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px rgba(81,207,244,.35),0 12px 28px -8px rgba(0,0,0,.55)} #pm-pied .pm-pied__plan-repere img{width:34px;height:34px} #pm-pied .pm-pied__plan-nom{position:absolute;left:50%;top:calc(50% + 40px);transform:translateX(-50%);height:28px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--r-disque);background:#fff;color:var(--pic-900);font:700 13px/1 var(--police-titre);white-space:nowrap;box-shadow:0 8px 20px -8px rgba(0,0,0,.5)} #pm-pied .pm-pied__plan-itineraire{position:absolute;left:14px;bottom:14px;height:40px;padding:0 16px 0 12px;display:inline-flex;align-items:center;gap:8px;border-radius:var(--r-disque);background:#fff;color:var(--pic-900);font:700 14px/1 var(--police-titre);box-shadow:0 8px 20px -8px rgba(0,0,0,.5)} #pm-pied .pm-pied__plan-itineraire svg{width:16px;height:16px;color:var(--pic-800)} #pm-pied .pm-pied__plan:hover .pm-pied__plan-itineraire{background:var(--pic-50)} #pm-pied .pm-pied__plan-source{position:absolute;right:10px;bottom:10px;padding:3px 7px;border-radius:6px;background:rgba(8,21,48,.72);font-size:12px;line-height:1.3;color:var(--pied-texte-2)} #pm-pied .pm-pied__showroom-infos{padding:32px;display:flex;flex-direction:column;gap:16px} #pm-pied .pm-pied__adresse{margin:-6px 0 0;font:700 24px/1.2 var(--police-titre);font-style:normal} #pm-pied .pm-pied__pastille-statut{width:fit-content;height:30px;padding:0 12px;display:inline-flex;align-items:center;border-radius:var(--r-disque);background:rgba(255,255,255,.08);font-size:14px;font-weight:600} #pm-pied .pm-horaires__ligne{padding:8px 0 8px 10px;border-top:1px solid var(--pied-ligne);font-size:15px} #pm-pied .pm-horaires__ligne dt,#pm-pied .pm-horaires__ligne dd{color:var(--pied-texte-3);font-weight:400} #pm-pied .pm-horaires__ligne dd{margin:0;font-variant-numeric:tabular-nums;white-space:nowrap} #pm-pied .pm-horaires__ligne.is-aujourdhui{box-shadow:inset 2px 0 0 var(--ciel-300)} #pm-pied .pm-horaires__ligne.is-aujourdhui dt,#pm-pied .pm-horaires__ligne.is-aujourdhui dd{color:#fff;font-weight:700} #pm-pied .pm-pied__services{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} #pm-pied .pm-pied__services li{height:32px;padding:0 12px 0 8px;display:inline-flex;align-items:center;gap:6px;border-radius:var(--r-disque);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);font-size:13px;font-weight:600} #pm-pied .pm-pied__services svg{width:16px;height:16px} #pm-pied .pm-pied__rdv{margin-top:auto;height:48px;padding:0 6px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:var(--r-disque);box-shadow:inset 0 0 0 1.5px #fff;font:700 15px/1 var(--police-titre);text-decoration:none;white-space:nowrap} #pm-pied .pm-pied__rdv:hover{background:rgba(255,255,255,.1);color:#fff} #pm-pied .pm-pied__rdv .pm-pied__disque{width:36px;height:36px;color:var(--pic-800)} #pm-pied .pm-pied__rdv .pm-pied__disque svg{width:18px;height:18px} /* ---------- Ligne 2 : marque + navigation ---------- */ #pm-pied .pm-pied__milieu{margin-top:72px;display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px 48px} #pm-pied .pm-pied__navs{display:contents} #pm-pied .pm-pied__marque{display:flex;flex-direction:column;gap:20px} #pm-pied .pm-pied__logo{display:block;width:fit-content} #pm-pied .pm-pied__logo img{width:220px;height:auto;display:block} #pm-pied .pm-pied__accroche{margin:0;max-width:360px;font-size:15px;line-height:1.6;color:var(--pied-texte-2);text-wrap:pretty} #pm-pied .pm-pied__note{width:fit-content;max-width:100%;display:flex;align-items:center;gap:14px;padding:12px 16px 12px 12px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);text-decoration:none} #pm-pied .pm-pied__note:hover{background:rgba(255,255,255,.1);color:#fff} #pm-pied .pm-pied__note img{width:44px;height:44px;border-radius:var(--r-disque);flex:none} #pm-pied .pm-pied__note-valeur{font:700 30px/1 var(--police-titre);letter-spacing:-.02em;font-variant-numeric:tabular-nums} #pm-pied .pm-pied__note-detail{display:grid;gap:5px;font-size:13px;color:var(--pied-texte-2);white-space:nowrap} #pm-pied .pm-pied__etoiles{display:flex;gap:2px;color:var(--pied-or)} #pm-pied .pm-pied__etoiles svg{width:14px;height:14px} #pm-pied .pm-pied__note > svg{width:18px;height:18px;margin-left:4px} #pm-pied .pm-pied__labels{display:grid;gap:10px} #pm-pied .pm-pied__labels ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} #pm-pied .pm-pied__labels a,#pm-pied .pm-pied__label{display:block;width:88px;height:54px;padding:6px;border-radius:12px;background:#fff} #pm-pied .pm-pied__labels img{width:100%;height:100%;object-fit:contain} #pm-pied .pm-pied__facebook{width:fit-content;display:inline-flex;align-items:center;gap:12px;min-height:44px;font-size:15px;font-weight:600;text-decoration:none} #pm-pied .pm-pied__facebook:hover{color:var(--ciel-300)} #pm-pied .pm-pied__nav{display:flex;flex-direction:column;gap:14px;min-width:0} #pm-pied .pm-pied__nav-titre{margin:0} #pm-pied .pm-pied__nav-bouton{display:block;width:100%;padding:0;border:0;background:none;color:var(--ciel-300);font:700 12px/1.2 var(--police-titre);letter-spacing:.14em;text-transform:uppercase;text-align:left;cursor:default;pointer-events:none} #pm-pied .pm-pied__nav-disque{display:none} #pm-pied .pm-pied__liens{list-style:none;margin:0;padding:0;display:grid;gap:2px} #pm-pied .pm-pied__liens a{min-height:34px;display:inline-flex;align-items:center;gap:6px;font-size:15px;line-height:1.35;text-decoration:none} #pm-pied .pm-pied__liens a:hover{color:var(--ciel-300);text-decoration:underline} #pm-pied .pm-pied__liens svg{width:14px;height:14px;opacity:.75} /* ---------- Ligne 3 : zone ---------- */ #pm-pied .pm-pied__zone{margin-top:56px;padding:28px 0;border-top:1px solid var(--pied-ligne);display:flex;align-items:center;justify-content:space-between;gap:14px 40px} #pm-pied .pm-pied__zone-texte{margin:0;max-width:880px;font-size:17px;line-height:1.65;color:var(--pied-texte-2);text-wrap:pretty} #pm-pied .pm-pied__zone-texte a{color:#fff;font-weight:600;text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:4px} #pm-pied .pm-pied__zone-texte a:hover{color:var(--ciel-300);text-decoration-color:var(--ciel-300)} #pm-pied .pm-pied__zone-lien{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;font:700 15px var(--police-titre);color:var(--ciel-300)!important;text-decoration:none;white-space:nowrap} #pm-pied .pm-pied__zone-lien svg{width:18px;height:18px} #pm-pied .pm-pied__zone-lien:hover{text-decoration:underline} /* ---------- Ligne 4 : groupe ---------- */ #pm-pied .pm-pied__groupe{margin-top:12px} #pm-pied .pm-pied__groupe-tete{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap} #pm-pied .pm-pied__groupe-tete p:last-child{margin:0;font-size:14px;color:var(--pied-texte-3)} #pm-pied .pm-pied__groupe-liste{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} #pm-pied .pm-pied__societe{height:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 20px 20px 22px;border-radius:18px;background:var(--pied-verre);box-shadow:var(--pied-anneau);text-decoration:none;transition:background var(--d-rapide) var(--ease)} #pm-pied .pm-pied__societe:hover{background:rgba(255,255,255,.09);color:#fff} #pm-pied .pm-pied__societe.is-ici{background:rgba(81,207,244,.08);box-shadow:inset 0 0 0 1px rgba(81,207,244,.45)} #pm-pied .pm-pied__societe-tuile{width:52px;height:52px;border-radius:14px;background:#fff;display:grid;place-items:center;flex:none} #pm-pied .pm-pied__societe-tuile img{width:40px;height:40px} #pm-pied .pm-pied__societe.is-ici .pm-pied__societe-tuile img{width:36px;height:36px} #pm-pied .pm-pied__societe-corps{display:grid;gap:4px;min-width:0;flex:1} #pm-pied .pm-pied__societe-cle{display:flex;align-items:center;gap:8px;font:700 12px/1.2 var(--police-titre);letter-spacing:.12em;text-transform:uppercase;color:var(--pied-texte-3)} #pm-pied .pm-pied__societe.is-ici .pm-pied__societe-cle{color:var(--ciel-300)} #pm-pied .pm-pied__societe.is-ici .pm-pied__societe-cle::before{content:"";width:7px;height:7px;border-radius:var(--r-disque);background:var(--ciel-300);flex:none} #pm-pied .pm-pied__societe-nom{font:700 19px/1.25 var(--police-titre);letter-spacing:-.005em} #pm-pied .pm-pied__societe-accroche{font-size:14px;color:var(--pied-texte-3)} #pm-pied .pm-pied__societe-fleche{width:40px;height:40px;border-radius:var(--r-disque);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);display:grid;place-items:center;flex:none} #pm-pied .pm-pied__societe-fleche svg{width:18px;height:18px} /* ---------- Ligne 5 : bas de page ---------- */ #pm-pied .pm-pied__bas{margin-top:48px;padding:20px 0 28px;border-top:1px solid var(--pied-ligne);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 24px;font-size:13px;color:var(--pied-texte-3)} #pm-pied .pm-pied__bas p{margin:0} #pm-pied .pm-pied__legal{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0 20px} #pm-pied .pm-pied__legal a{min-height:32px;display:inline-flex;align-items:center;color:var(--pied-texte-3);text-decoration:none} #pm-pied .pm-pied__legal a:hover{color:#fff;text-decoration:underline} #pm-pied .pm-pied__remonter{min-height:44px;display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none} #pm-pied .pm-pied__remonter .pm-pied__disque-contour{width:32px;height:32px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)} #pm-pied .pm-pied__remonter .pm-pied__disque-contour svg{width:16px;height:16px} #pm-pied .pm-pied__remonter:hover{color:var(--ciel-300)} /* ---------- Tablette ---------- */ @media (max-width:1119px){ #pm-pied .pm-pied__conteneur{padding:72px 32px 0} #pm-pied .pm-pied__haut{grid-template-columns:1fr} #pm-pied .pm-pied__milieu{grid-template-columns:repeat(3,minmax(0,1fr))} #pm-pied .pm-pied__marque{grid-column:1/-1} #pm-pied .pm-pied__societe-fleche{display:none} } /* ---------- Mobile ---------- */ @media (max-width:767px){ #pm-pied .pm-pied__fond-img{object-position:52% 40%;opacity:.2} #pm-pied .pm-pied__conteneur{padding:56px 20px 0} #pm-pied .pm-pied__haut{gap:16px} #pm-pied .pm-pied__contact{padding:24px 20px;gap:18px} #pm-pied .pm-pied__titre{font-size:26px} #pm-pied .pm-pied__tel{width:100%;padding:10px 20px 10px 10px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4)} #pm-pied .pm-pied__tel-disque{width:48px;height:48px} #pm-pied .pm-pied__tel-numero{font-size:26px} #pm-pied .pm-pied__rappel-ligne{flex-direction:column} #pm-pied .pm-pied__rappel-champ{flex:0 0 auto} #pm-pied .pm-pied__showroom{grid-template-columns:1fr} #pm-pied .pm-pied__plan{min-height:240px} #pm-pied .pm-pied__showroom-infos{padding:22px 20px 24px} #pm-pied .pm-pied__adresse{font-size:22px} #pm-pied .pm-pied__milieu{margin-top:48px;grid-template-columns:1fr;gap:32px} #pm-pied .pm-pied__logo img{width:190px} /* Accordéons */ #pm-pied .pm-pied__navs{display:block;border-top:1px solid var(--pied-ligne)} #pm-pied .pm-pied__nav{gap:0;border-bottom:1px solid var(--pied-ligne)} .pm-js #pm-pied .pm-pied__nav-bouton{min-height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;color:#fff;font-size:17px;letter-spacing:0;text-transform:none;cursor:pointer;pointer-events:auto} .pm-js #pm-pied .pm-pied__nav-disque{display:block;width:32px;height:32px;border-radius:var(--r-disque);flex:none;background:rgba(255,255,255,.1) url("../icones/plus-blanc.svg") center/16px no-repeat} .pm-js #pm-pied .pm-pied__nav-bouton[aria-expanded="true"] .pm-pied__nav-disque{background:#fff url("../icones/minus-nuit.svg") center/16px no-repeat} #pm-pied .pm-pied__liens{margin:0 0 14px} #pm-pied .pm-pied__liens a{min-height:44px;font-size:16px} #pm-pied .pm-pied__zone{margin-top:32px;padding:24px 0;flex-direction:column;align-items:flex-start} #pm-pied .pm-pied__zone-texte{font-size:16px} #pm-pied .pm-pied__groupe{margin-top:8px} #pm-pied .pm-pied__groupe-liste{grid-template-columns:1fr} #pm-pied .pm-pied__societe{padding:16px 16px 16px 18px} #pm-pied .pm-pied__societe-tuile{width:40px;height:40px;border-radius:11px} #pm-pied .pm-pied__societe-tuile img{width:31px;height:31px} #pm-pied .pm-pied__societe.is-ici .pm-pied__societe-tuile img{width:28px;height:28px} #pm-pied .pm-pied__societe-nom{font-size:17px;white-space:nowrap} #pm-pied .pm-pied__bas{margin-top:32px} #pm-pied .pm-pied__legal a{min-height:44px} body.pm-a-barre #pm-pied .pm-pied__bas{padding-bottom:calc(96px + env(safe-area-inset-bottom))} } @media (prefers-reduced-motion:reduce){#pm-pied *{transition:none!important}} /* Compléments d'intégration (absents de la maquette) */ #pm-pied [hidden]{display:none!important} #pm-pied .pm-piege{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0} #pm-pied .pm-pied__rappel-erreur svg{width:18px;height:18px;margin-top:1px} #pm-pied .pm-pied__commune{color:#fff;font-weight:600} #pm-pied .pm-pied__nav-titre{font-size:12px;line-height:1.2} /* 20. En-tête « clair » — parts/en-tete.php · inc/entete.php · assets/js/pm-entete.js (18 octobre 2026, plan 2-plans/plan-entete-simplifie.md) et barre d'action mobile — parts/barre-mobile.php. Ordinateur ≥ 1100 px (paliers 1240 · 1320 · 1400), mobile et tablette < 1100 px (devis dans la ligne de 760 à 1099 px). Tous les sélecteurs de l'en-tête sont préfixés « #pm-entete » : le Kit Elementor stylise a, button, p et h2. L'en-tête ne se cache jamais : il passe en « is-compact » (pm-entete.js). Statut : pm-site.js (data-pm-statut). */ /* --- Défilement vers une ancre, barre d'action mobile, retour du rappel --- */ html{scroll-padding-top:100px} @media (max-width:1099px){html{scroll-padding-top:80px}} body.pm-menu-ouvert .pm-barre-mobile{z-index:55;transform:none} @media (max-width:600px){body.admin-bar.pm-menu-ouvert #wpadminbar,body.admin-bar.pm-et-menu-ouvert #wpadminbar{position:fixed}} #pm-barre{display:grid;grid-template-columns:1fr 2fr 1fr;gap:8px} #pm-barre a{text-decoration:none} #pm-barre a:focus-visible{outline:3px solid var(--ciel-500);outline-offset:2px} #pm-barre svg{display:block;flex:none} #pm-barre .pm-barre-mobile__lien{height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:1px solid var(--pierre-300);border-radius:var(--r-disque);background:#fff;color:var(--pic-900);font:600 13px/1 var(--police-texte)} #pm-barre .pm-barre-mobile__lien svg{width:22px;height:22px;color:var(--pic-800)} #pm-barre .pm-barre-mobile__devis{height:56px;padding:0 9px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:8px;border-radius:var(--r-disque);background:var(--braise-600);color:#fff;font:700 15px/1.1 var(--police-titre);letter-spacing:.005em} #pm-barre .pm-barre-mobile__devis:active{background:var(--braise-800)} #pm-barre .pm-barre-mobile__texte{min-width:0;text-wrap:balance} #pm-barre .pm-barre-mobile__disque{width:38px;height:38px;border-radius:var(--r-disque);background:#fff;color:var(--braise-600);display:grid;place-items:center} #pm-barre .pm-barre-mobile__disque svg{width:20px;height:20px} @media (max-width:339px){#pm-barre .pm-barre-mobile__lien{font-size:12px}} #pm-rappel-ok:focus,#pm-rappel-ok:focus-visible{outline:none} /* --- Remise à zéro face au Kit Elementor --- */ #pm-entete a{color:inherit;text-decoration:none} #pm-entete button{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:inherit;font:inherit;letter-spacing:normal;text-transform:none;min-height:0;-webkit-appearance:none;appearance:none;cursor:pointer} #pm-entete p,#pm-entete h2,#pm-entete dl,#pm-entete dd{margin:0} #pm-entete .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* --- En-tête --- */ #pm-entete{--pm-et-pad: 20px; --pm-et-gap: 16px; --pm-et-item: 9px; --pm-et-fs: 16px; --pm-et-logo: 40px; --pm-et-barre: 88px; position: sticky; top: calc(var(--wp-admin--admin-bar--height, 0px) - 45px); z-index: 50; background: #FFFFFF; font-family: var(--police-texte); color: #1F1D1A; -webkit-font-smoothing: antialiased;} #pm-entete *,#pm-entete *::before,#pm-entete *::after{box-sizing: border-box;} #pm-entete svg{display: block; flex: none;} #pm-entete a{text-decoration: none;} #pm-entete :where(a, button):focus-visible{outline: 3px solid #2691D0; outline-offset: 2px;} #pm-entete ul{list-style: none; margin: 0; padding: 0;} #pm-entete .pm-et-in{max-width: 1440px; margin: 0 auto; padding: 0 var(--pm-et-pad);} #pm-entete .pm-et-serre{display: none;} #pm-entete .pm-et-xl{display: none;} #pm-page .pm-et-evitement{position: absolute; left: 12px; top: -100px; z-index: 100; height: 48px; padding: 0 20px; display: inline-flex; align-items: center; border-radius: 999px; background: #0B2154; color: #FFFFFF !important; font: 700 16px var(--police-titre); text-decoration: none;} #pm-page .pm-et-evitement:focus{top: 12px; outline: 3px solid #2691D0; outline-offset: 2px;} #pm-contenu{display: block; height: 0; outline: none;} #pm-entete .pm-et-point{width: 10px; height: 10px; border-radius: 999px; background: #A8A296;} #pm-entete .pm-et-point[data-etat="ouvert"]{background: #1E7044;} #pm-entete [data-pm-statut][data-etat="ouvert"]{color: #1E7044 !important;} #pm-entete .pm-et-disque{width: 42px; height: 42px; border-radius: 999px; background: #E3EAF5; color: #0F3982; display: grid; place-items: center; flex: none;} #pm-entete .pm-et-disque--36{width: 36px; height: 36px;} #pm-entete .pm-et-picto{width: 36px; height: 36px; border: 1px solid #0F3982; color: #0F3982; display: grid; place-items: center; flex: none;} #pm-entete .pm-et-pastille{width: 14px; height: 14px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgba(31,29,26,.35); flex: none;} #pm-entete .pm-et-pastille--grand{width: 20px; height: 20px;} #pm-entete .pm-et-pastille--pvc{background: #F4F4F1;} #pm-entete .pm-et-pastille--alu{background: #A7ADB3;} #pm-entete .pm-et-pastille--bois{background: #B07A4A;} #pm-entete .pm-et-pastille--vide{box-shadow: none;} #pm-entete .pm-et-mob{display: none;} #pm-entete .pm-et-haut{background: #F7F5F1; border-bottom: 1px solid #E0DBD2;} #pm-entete .pm-et-haut__in{height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; font-size: 15px; color: #4A463F; white-space: nowrap;} #pm-entete .pm-et-haut__g,#pm-entete .pm-et-haut__d{display: flex; align-items: center; gap: 18px; min-width: 0;} #pm-entete .pm-et-haut a{display: inline-flex; align-items: center; gap: 7px; color: #4A463F;} #pm-entete .pm-et-haut a:hover{color: #0F3982;} #pm-entete .pm-et-haut svg{color: #0F3982;} #pm-entete .pm-et-haut__adresse{color: #1F1D1A !important; font-weight: 600;} #pm-entete .pm-et-haut__adresse .pm-et-xl{font-weight: 400; color: #4A463F;} #pm-entete .pm-et-haut__bleu{color: #0F3982 !important; font-weight: 600;} #pm-entete .pm-et-haut__bleu:hover{text-decoration: underline; text-underline-offset: 3px;} #pm-entete .pm-et-haut strong{color: #0B2154; font-weight: 700;} #pm-entete .pm-et-etoile svg{color: #F5B301;} #pm-entete .pm-et-barre{position: relative; background: #FFFFFF; border-bottom: 1px solid #E0DBD2; transition: box-shadow 240ms cubic-bezier(.2,.7,.2,1);} #pm-entete .pm-et-barre__in{height: var(--pm-et-barre); display: flex; align-items: center; gap: var(--pm-et-gap); transition: height 240ms cubic-bezier(.2,.7,.2,1);} #pm-entete .pm-et-logo{display: block; flex: none; border-radius: 4px;} #pm-entete .pm-et-logo img{display: block; height: var(--pm-et-logo); width: auto; transition: height 240ms cubic-bezier(.2,.7,.2,1);} #pm-entete .pm-et-nav{height: 100%;} #pm-entete .pm-et-nav > ul{display: flex; align-items: stretch; height: 100%; white-space: nowrap;} #pm-entete .pm-et-nav > ul > li{display: flex;} /* Entrées du menu en Red Hat Display, comme les boutons et le logotype (charte, 19 octobre 2026) */ #pm-entete .pm-et-nav a,#pm-entete .pm-et-nav__bouton{height: 100%; padding: 0 var(--pm-et-item); display: flex; align-items: center; gap: 8px; border: 0; background: none; font: 700 var(--pm-et-fs) var(--police-titre); letter-spacing: .005em; color: #0B2154; cursor: pointer; transition: background 160ms cubic-bezier(.2,.7,.2,1);} #pm-entete .pm-et-nav a:hover,#pm-entete .pm-et-nav__bouton:hover{background: #F1F5FB; color: #0F3982;} #pm-entete .pm-et-nav a:focus-visible,#pm-entete .pm-et-nav__bouton:focus-visible{outline-offset: -3px;} #pm-entete .pm-et-nav__bouton svg{width: 18px; height: 18px; transition: transform 240ms cubic-bezier(.2,.7,.2,1);} #pm-entete .pm-et-nav__bouton[aria-expanded="true"]{background: #F1F5FB;} #pm-entete .pm-et-nav__bouton[aria-expanded="true"] svg{transform: rotate(180deg);} #pm-entete .pm-et-nav li.is-actif,#pm-entete .pm-et-nav__produits:has([aria-expanded="true"]){box-shadow: inset 0 -3px 0 #2691D0;} #pm-entete .pm-et-tel{margin-left: auto; display: flex; align-items: center; gap: 12px; flex: none; color: #0B2154; border-radius: 12px;} #pm-entete .pm-et-tel:hover{color: #0F3982;} #pm-entete .pm-et-tel__disque{position: relative; width: 48px; height: 48px; border-radius: 999px; background: #E3EAF5; color: #0F3982; display: none; place-items: center; flex: none;} #pm-entete .pm-et-tel__disque .pm-et-point{position: absolute; top: 3px; right: 3px; width: 12px; height: 12px; box-shadow: 0 0 0 2px #FFFFFF;} #pm-entete .pm-et-tel__t{display: grid; gap: 2px;} #pm-entete .pm-et-tel__t strong{font: 700 21px/1 var(--police-titre); font-variant-numeric: tabular-nums; white-space: nowrap;} #pm-entete .pm-et-tel__st{font-size: 13px; font-weight: 600; color: #4A463F; white-space: nowrap;} #pm-entete .pm-et-devis{flex: none; height: 56px; padding: 0 6px 0 24px; display: inline-flex; align-items: center; gap: 14px; border-radius: 999px; background: #C84B11; color: #FFFFFF !important; font: 700 17px var(--police-titre); white-space: nowrap; transition: background 160ms cubic-bezier(.2,.7,.2,1);} #pm-entete .pm-et-devis:hover{background: #A63D0C;} #pm-entete .pm-et-devis:active{background: #8A3209;} #pm-entete .pm-et-devis:focus-visible,#pm-entete .pm-et-menu:focus-visible,#pm-entete .pm-et-appeler:focus-visible,#pm-entete .pm-et-fermer:focus-visible,#pm-entete .pm-et-showroom__btns a:focus-visible,#pm-entete .pm-et-tout:focus-visible,#pm-entete .pm-et-devis-contour:focus-visible{outline: none; box-shadow: 0 0 0 2px #FFFFFF, 0 0 0 5px #2691D0;} #pm-entete .pm-et-devis__disque{width: 44px; height: 44px; border-radius: 999px; background: #FFFFFF; color: #C84B11; display: grid; place-items: center;} #pm-entete.is-compact{--pm-et-barre: 72px; --pm-et-logo: 40px;} #pm-entete.is-compact .pm-et-barre{box-shadow: 0 10px 28px -14px rgba(8,21,48,.28);} #pm-entete .pm-et-mega{position: absolute; left: 0; right: 0; top: 100%; z-index: 5; background: #FFFFFF; border-top: 1px solid #E0DBD2; box-shadow: 0 32px 72px -24px rgba(8,21,48,.32); max-height: calc(100vh - var(--pm-et-barre) - 20px); overflow-y: auto; overscroll-behavior: contain;} #pm-entete .pm-et-mega[hidden]{display: none;} #pm-entete .pm-et-mega__in{padding-top: 24px; padding-bottom: 28px; display: grid; gap: 22px;} #pm-entete .pm-et-mega__tete{display: flex; align-items: center; justify-content: space-between; gap: 16px;} #pm-entete .pm-et-mega__q{margin: 0; font: 700 22px/1.2 var(--police-titre); color: #0B2154;} #pm-entete .pm-et-fermer{height: 44px; padding: 0 6px 0 18px; border: 0; border-radius: 999px; background: #F7F5F1; display: inline-flex; align-items: center; gap: 10px; font: 700 15px var(--police-titre); color: #0B2154; cursor: pointer;} #pm-entete .pm-et-fermer:hover{background: #EEEAE3;} #pm-entete .pm-et-fermer > span{width: 32px; height: 32px; border-radius: 999px; background: #FFFFFF; display: grid; place-items: center;} #pm-entete .pm-et-mega__familles{display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px;} #pm-entete .pm-et-fam{display: flex; flex-direction: column; gap: 12px; min-width: 0;} #pm-entete .pm-et-fam__tete{display: grid; gap: 12px; color: #0B2154; border-radius: 12px;} #pm-entete .pm-et-fam__tete:hover{color: #0F3982;} #pm-entete .pm-et-fam__tete:hover .pm-et-fam__photo img{transform: scale(1.03);} #pm-entete .pm-et-fam__photo{position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; background: #EEEAE3;} #pm-entete .pm-et-fam__photo img{width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 600ms cubic-bezier(.2,.7,.2,1);} #pm-entete .pm-et-fam__nom{display: flex; align-items: center; gap: 10px; font: 700 19px/1.2 var(--police-titre); text-wrap: balance;} #pm-entete .pm-et-fam__types{border-top: 1px solid #E0DBD2;} #pm-entete .pm-et-fam__types li{border-bottom: 1px solid #EEEAE3;} #pm-entete .pm-et-fam__types a{min-height: 42px; padding: 6px 2px; display: flex; align-items: center; gap: 10px; color: #1F1D1A; font-size: 16px; line-height: 1.3;} #pm-entete .pm-et-fam__types a:hover{color: #0F3982;} #pm-entete .pm-et-fam__tout{margin-top: auto; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--police-titre); color: #0F3982;} #pm-entete .pm-et-fam__tout:hover{color: #0B2154; text-decoration: underline; text-underline-offset: 4px;} #pm-entete .pm-et-fam.is-actif .pm-et-fam__nom{color: #0F3982;} #pm-entete .pm-et-bandeau{padding: 6px; border-radius: 16px; background: #F7F5F1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px;} #pm-entete .pm-et-bandeau li{display: flex;} #pm-entete .pm-et-bandeau a{flex: 1; min-height: 72px; padding: 12px 16px; display: flex; align-items: center; gap: 14px; border-radius: 12px; color: #0B2154;} #pm-entete .pm-et-bandeau a:hover{background: #FFFFFF;} #pm-entete .pm-et-bandeau .pm-et-disque{width: 44px; height: 44px;} #pm-entete .pm-et-bandeau a > span:last-child{display: grid; gap: 2px; min-width: 0;} #pm-entete .pm-et-bandeau strong{font: 700 16px/1.25 var(--police-titre);} #pm-entete .pm-et-bandeau a > span:last-child span{font-size: 14px; line-height: 1.35; color: #4A463F;} @media (min-width: 1240px){#pm-entete{--pm-et-pad: 32px; --pm-et-gap: 24px; --pm-et-item: 12px; --pm-et-fs: 16px; --pm-et-logo: 46px;} #pm-entete.is-compact{--pm-et-logo: 40px;} #pm-entete .pm-et-tel__disque{display: grid;} #pm-entete .pm-et-mega__familles{gap: 24px;}} @media (max-width: 1239.98px){#pm-entete .pm-et-large{display: none !important;} #pm-entete .pm-et-barre .pm-et-devis{height: 52px; padding: 0 5px 0 20px; gap: 12px; font-size: 16px;} #pm-entete .pm-et-barre .pm-et-devis__disque{width: 42px; height: 42px;} #pm-entete .pm-et-serre{display: inline;} #pm-entete .pm-et-haut__g,#pm-entete .pm-et-haut__d{gap: 16px;}} @media (min-width: 1320px){#pm-entete{--pm-et-gap: 28px; --pm-et-item: 14px; --pm-et-fs: 17px;}} @media (min-width: 1400px){#pm-entete{--pm-et-pad: 48px; --pm-et-gap: 40px; --pm-et-item: 16px;} #pm-entete .pm-et-xl{display: inline;} #pm-entete .pm-et-haut__g,#pm-entete .pm-et-haut__d{gap: 22px;}} @media (max-width: 1099.98px){#pm-entete .pm-et-ordi{display: none;} #pm-entete .pm-et-mob{display: block;} #pm-entete .pm-et-bandeau-tel{height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #F7F5F1; border-bottom: 1px solid #E0DBD2; color: #0B2154; white-space: nowrap;} #pm-entete .pm-et-bandeau-tel:focus-visible{outline: none; box-shadow: inset 0 0 0 3px #2691D0;} #pm-entete .pm-et-bandeau-tel__disque{position: relative; width: 28px; height: 28px; border-radius: 999px; background: #E3EAF5; color: #0F3982; display: grid; place-items: center; flex: none;} #pm-entete .pm-et-bandeau-tel__disque .pm-et-point{position: absolute; top: -1px; right: -1px; box-shadow: 0 0 0 2px #F7F5F1;} #pm-entete .pm-et-bandeau-tel strong{font: 700 17px var(--police-titre); font-variant-numeric: tabular-nums;} #pm-entete .pm-et-bandeau-tel__st{font-size: 14px; font-weight: 600; color: #4A463F; overflow: hidden; text-overflow: ellipsis;} #pm-entete .pm-et-ligne{position: relative; z-index: 3; height: 68px; padding: 0 10px 0 14px; display: flex; align-items: center; gap: 8px; background: #FFFFFF; border-bottom: 1px solid #E0DBD2;} #pm-entete .pm-et-ligne .pm-et-logo{margin-right: auto;} #pm-entete .pm-et-ligne .pm-et-logo img{height: 32px;} #pm-entete .pm-et-devis--tab{display: none; height: 48px; padding: 0 5px 0 18px; gap: 10px; font-size: 15px;} #pm-entete .pm-et-devis--tab .pm-et-devis__disque{width: 38px; height: 38px;} #pm-entete .pm-et-appeler{position: relative; flex: none; height: 48px; padding: 0 14px 0 12px; display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; background: #E3EAF5; color: #0F3982 !important; font: 700 15px var(--police-titre); white-space: nowrap;} #pm-entete .pm-et-appeler:hover{background: #D6E1F1;} #pm-entete .pm-et-appeler .pm-et-point{position: absolute; top: 5px; left: 26px; box-shadow: 0 0 0 2px #E3EAF5;} #pm-entete .pm-et-menu{flex: none; height: 48px; padding: 0 5px 0 16px; border: 0; border-radius: 999px; background: #0B2154; color: #FFFFFF !important; display: inline-flex; align-items: center; gap: 8px; font: 700 15px var(--police-titre); cursor: pointer;} #pm-entete .pm-et-menu[aria-expanded="true"]{background: #0F3982;} #pm-entete .pm-et-menu__disque{width: 38px; height: 38px; border-radius: 999px; background: #FFFFFF; color: #0B2154; display: grid; place-items: center;} #pm-entete .pm-et-ico-x,#pm-entete .pm-et-menu[aria-expanded="true"] .pm-et-ico-menu{display: none;} #pm-entete .pm-et-menu[aria-expanded="true"] .pm-et-ico-x{display: block;} html:not(.pm-js) #pm-entete .pm-et-menu:not(.pm-et-menu--sansjs),html.pm-js #pm-entete .pm-et-menu--sansjs{display: none;} #pm-entete .pm-et-tiroir{position: fixed; left: 0; right: 0; top: var(--pm-et-tiroir-top, 112px); bottom: 0; z-index: 49; background: #FFFFFF; overflow-y: auto; overscroll-behavior: contain;} #pm-entete .pm-et-tiroir[hidden],#pm-entete .pm-et-ecran[hidden]{display: none;} #pm-entete .pm-et-tiroir__in{max-width: 640px; margin: 0 auto; padding: 16px 16px calc(120px + env(safe-area-inset-bottom));} #pm-entete .pm-et-ecran{display: grid; gap: 26px;} #pm-entete .pm-et-groupe{display: grid; gap: 8px;} #pm-entete .pm-et-mini{margin: 0; padding: 4px 4px 0; font: 700 13px var(--police-titre); letter-spacing: .14em; text-transform: uppercase; color: #6B665D;} #pm-entete .pm-et-vignettes{display: grid; gap: 8px;} #pm-entete .pm-et-tiroir button{white-space: normal;} #pm-entete .pm-et-vignette{width: 100%; min-height: 80px; padding: 10px; display: flex; align-items: center; gap: 14px; border: 0; border-radius: 14px; background: #F7F5F1; text-align: left; cursor: pointer; color: #0B2154; font: inherit;} #pm-entete .pm-et-vignette:hover{background: #F1F5FB;} #pm-entete .pm-et-vignette:focus-visible{outline: none; box-shadow: 0 0 0 3px #2691D0;} #pm-entete .pm-et-vignette__photo{position: relative; width: 76px; height: 57px; border-radius: 10px; overflow: hidden; flex: none; background: #EEEAE3;} #pm-entete .pm-et-vignette__photo img{width: 100%; height: 100%; object-fit: cover; display: block;} #pm-entete .pm-et-vignette__t{flex: 1; min-width: 0; display: grid; gap: 3px;} #pm-entete .pm-et-vignette__t strong{font: 700 18px/1.2 var(--police-titre);} #pm-entete .pm-et-vignette__t span{font-size: 14px; line-height: 1.35; color: #4A463F;} #pm-entete .pm-et-vignette__fl{width: 36px; height: 36px; border-radius: 999px; background: #FFFFFF; color: #0F3982; display: grid; place-items: center; flex: none;} #pm-entete .pm-et-lignes{border-top: 1px solid #E0DBD2;} #pm-entete .pm-et-lignes li{border-bottom: 1px solid #E0DBD2;} #pm-entete .pm-et-lignes a{min-height: 66px; padding: 8px 4px; display: flex; align-items: center; gap: 14px; color: #0B2154;} #pm-entete .pm-et-lignes a:hover{background: #F7F5F1;} #pm-entete .pm-et-lignes a:focus-visible{outline: none; box-shadow: inset 0 0 0 3px #2691D0;} #pm-entete .pm-et-lignes a > svg{color: #8A8479;} #pm-entete .pm-et-lignes__t{flex: 1; min-width: 0; display: grid; gap: 2px;} #pm-entete .pm-et-lignes__t strong{font: 700 17px/1.25 var(--police-titre);} #pm-entete .pm-et-lignes__t span{font-size: 14px; line-height: 1.35; color: #4A463F;} #pm-entete .pm-et-showroom{padding: 18px 16px; border-radius: 16px; background: #F1F5FB; display: grid; gap: 14px;} #pm-entete .pm-et-showroom__tete{display: flex; justify-content: space-between; align-items: flex-start; gap: 12px;} #pm-entete .pm-et-showroom__tete > div{display: grid; gap: 3px;} #pm-entete .pm-et-showroom__tete strong{font: 700 18px/1.25 var(--police-titre); color: #0B2154;} #pm-entete .pm-et-showroom__tete > div span{font-size: 15px; color: #4A463F;} #pm-entete .pm-et-badge{flex: none; padding: 5px 11px; border-radius: 999px; background: #EEEAE3; color: #4A463F; font: 700 13px var(--police-titre);} #pm-entete .pm-et-badge[data-etat="ouvert"]{background: #E5F2EA;} #pm-entete .pm-et-horaires{margin: 0; display: grid;} #pm-entete .pm-et-horaires > div{display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-top: 1px solid #D9E2F0; font-size: 15px; color: #4A463F;} #pm-entete .pm-et-horaires dd{margin: 0; font-variant-numeric: tabular-nums;} #pm-entete .pm-et-horaires .is-jour{color: #0B2154; font-weight: 700;} #pm-entete .pm-et-showroom__btns{display: grid; grid-template-columns: 1fr 1fr; gap: 8px;} #pm-entete .pm-et-showroom__btns a{height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #0F3982; color: #0F3982; font: 700 15px var(--police-titre);} #pm-entete .pm-et-retour{width: 100%; height: 56px; padding: 0 4px; display: flex; align-items: center; gap: 12px; border: 0; border-bottom: 1px solid #E0DBD2; background: none; text-align: left; font: 700 16px var(--police-titre); color: #0F3982; cursor: pointer;} #pm-entete .pm-et-retour:focus-visible{outline: none; box-shadow: inset 0 0 0 3px #2691D0;} #pm-entete .pm-et-famille{display: grid; gap: 12px;} #pm-entete .pm-et-famille__photo{position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #EEEAE3;} #pm-entete .pm-et-famille__photo img{width: 100%; height: 100%; object-fit: cover; display: block;} #pm-entete .pm-et-famille h2{margin: 0; font: 700 28px/1.15 var(--police-titre); letter-spacing: -0.015em; color: #0B2154; outline: none;} #pm-entete .pm-et-famille p{margin: 0; font-size: 16px; line-height: 1.5; color: #4A463F;} #pm-entete .pm-et-tout{min-height: 64px; padding: 0 8px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 14px; background: #0F3982; color: #FFFFFF !important; font: 700 17px var(--police-titre);} #pm-entete .pm-et-tout:hover{background: #0B2154;} #pm-entete .pm-et-tout > span{width: 44px; height: 44px; border-radius: 999px; background: #FFFFFF; color: #0F3982; display: grid; place-items: center; flex: none;} #pm-entete .pm-et-devis-contour{height: 56px; padding: 0 6px 0 20px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-radius: 999px; background: #FFFFFF; box-shadow: inset 0 0 0 1.5px #0F3982; color: #0F3982 !important; font: 700 16px var(--police-titre);} #pm-entete .pm-et-devis-contour:hover{background: #F1F5FB;} #pm-entete .pm-et-devis-contour > span{width: 44px; height: 44px; border-radius: 999px; background: #0F3982; color: #FFFFFF; display: grid; place-items: center;} #pm-entete .pm-et-plus{display: grid; gap: 4px;} #pm-entete .pm-et-plus a{min-height: 52px; padding: 4px; display: flex; align-items: center; gap: 12px; color: #0F3982; font: 700 16px var(--police-titre);} #pm-entete .pm-et-plus a:hover{color: #0B2154; text-decoration: underline; text-underline-offset: 4px;} body.pm-et-menu-ouvert{overflow: hidden;} body.pm-et-menu-ouvert .pm-barre-mobile{z-index: 55; transform: none !important;}} @media (min-width: 760px) and (max-width: 1099.98px){#pm-entete .pm-et-devis--tab{display: inline-flex;}} @media (max-width: 369.98px){#pm-entete .pm-et-ligne .pm-et-logo img{height: 28px;} #pm-entete .pm-et-appeler{padding: 0 12px 0 10px;}} @media (prefers-reduced-motion: reduce){#pm-entete *,#pm-entete *::before,#pm-entete *::after{transition: none !important;}} /* --- Adaptations au site (plan validé le 18 octobre 2026) --- */ /* Pastille « mixte » (fenêtres aluminium-PVC, D3) */ #pm-entete .pm-et-pastille--mixte{background:linear-gradient(90deg,#A7ADB3 50%,#F4F4F1 50%)} /* Bandeau téléphone mobile : séparateur devant le statut (format « bandeau » de pm-site.js) */ #pm-entete .pm-et-bandeau-tel__st::before{content:"· "} /* Horaires de la carte showroom : code court [pm_horaires] (Réglages PM), jour du jour mis en avant par pm-site.js */ #pm-entete .pm-et-horaires .pm-horaires{margin:0;display:grid} #pm-entete .pm-et-horaires .pm-horaires__ligne{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-top:1px solid #D9E2F0;font-size:15px;line-height:1.4;color:#4A463F} #pm-entete .pm-et-horaires dt{font-weight:inherit} #pm-entete .pm-et-horaires dd{font-variant-numeric:tabular-nums} #pm-entete .pm-et-horaires .is-aujourdhui{color:#0B2154;font-weight:700} /* D1 : sous 768 px, la barre d'action du bas porte déjà « Appeler » ; la ligne garde le logo et « Menu » */ @media (max-width:767.98px){#pm-entete .pm-et-appeler{display:none}} /* ===== ACCUEIL · sections 21 et suivantes (assemblées depuis les fichiers de section, voir docs/journal-integration.md) ===== */ /* ========================================================================== 21. Page d'accueil · socle commun aux sections (inc/accueil/socle.php) Tout est préfixé par « #pm-page » (identifiant du ) : le Kit Elementor stylise a, button, h1–h6, label et input (.elementor-kit-8 …) et Hello Elementor donne une bordure aux boutons ; l'identifiant fait passer nos règles devant, sans !important. Points de rupture des sections : mobile < 760 px · tablette 760–1119 px · ordinateur ≥ 1120 px. ========================================================================== */ #pm-page{ /* Unité des tailles fluides. Les maquettes validées ont été capturées à 1440 px dans une fenêtre d'environ 1063 px : leurs titres « clamp(…vw…) » y valent 73,8 % de la formule (H1 du héros 44,6 px, H2 34 px). On reproduit ce rendu. Pour appliquer les formules des fiches telles quelles : --pm-vw:1vw. */ --pm-vw:.738vw; --pm-h2:clamp(34px,calc(var(--pm-vw)*3.2),48px); --pm-pad-y:112px; --pm-pad-x:60px; --pm-secondaire-nuit:#C9D2E1; } @media (max-width:1119.98px){#pm-page{--pm-pad-y:88px;--pm-pad-x:32px}} @media (max-width:759.98px){#pm-page{--pm-h2:30px;--pm-pad-y:64px;--pm-pad-x:20px}} #pm-page [hidden]{display:none!important} /* --- Remise à zéro dans les blocs du thème (classe « pm-bloc » sur la racine de chaque code court). :where() garde une spécificité minimale : une seule classe de composant suffit ensuite. --- */ #pm-page :where(.pm-bloc){font:400 16px/1.5 var(--police-texte);color:var(--encre);letter-spacing:normal;text-align:left} #pm-page :where(.pm-bloc) :where(h1,h2,h3,h4,h5,h6){margin:0;font-family:var(--police-titre);font-weight:700;font-size:inherit;line-height:1.2;letter-spacing:normal;color:var(--pic-900)} #pm-page :where(.pm-bloc) :where(p,figure,blockquote,dl,dd,address){margin:0;font-style:normal} #pm-page :where(.pm-bloc) :where(ul,ol){margin:0;padding:0;list-style:none} #pm-page :where(.pm-bloc) :where(a){color:inherit;text-decoration:none} #pm-page :where(.pm-bloc) :where(img,svg,picture){display:block;max-width:100%} #pm-page :where(.pm-bloc) :where(img){height:auto;border-radius:0} #pm-page :where(.pm-bloc) :where(svg){flex:none} #pm-page :where(.pm-bloc) :where(button,[type="button"],[type="submit"]){margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-align:inherit;text-transform:none;white-space:normal;cursor:pointer;transition:none;-webkit-appearance:none;appearance:none;user-select:auto} #pm-page :where(.pm-bloc) :where(button):disabled{cursor:not-allowed} #pm-page :where(.pm-bloc) :where(input,textarea,select){margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:normal;width:auto;box-shadow:none;transition:none} #pm-page :where(.pm-bloc) :where(label){display:block;margin:0;font:inherit;color:inherit;line-height:inherit;vertical-align:baseline} #pm-page :where(.pm-bloc) :where(fieldset){margin:0;padding:0;border:0;min-width:0} #pm-page :where(.pm-bloc) :where(legend){padding:0;display:block;width:100%} #pm-page :where(.pm-bloc) :where(figcaption){font:inherit;color:inherit;font-style:normal} #pm-page :where(.pm-bloc) :where(strong,b){font-weight:700} #pm-page :where(.pm-bloc) :where(a,button,input,select,textarea,summary,[tabindex]):focus{outline:none} #pm-page :where(.pm-bloc) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid var(--ciel-500);outline-offset:2px;box-shadow:none} #pm-page :where(.pm-bloc--nuit,.pm-fond-nuit) :where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline-color:var(--ciel-300)} /* --- Sections --- Conteneurs Elementor de l'accueil : pleine largeur, marges internes à 0 dans Elementor. « pm-section--widgets » (sections 02, 03, 08) : en-tête en widgets + codes courts ; la marge vient d'ici. Les sections entièrement en code court posent leur propre marge sur leur racine. */ #pm-page .pm-section{scroll-margin-top:12px} #pm-page .pm-section--widgets{display:block;padding:var(--pm-pad-y) var(--pm-pad-x)} #pm-page .pm-section--widgets>*{max-width:1320px;margin-inline:auto;width:100%} #pm-page .pm-section--widgets>.elementor-widget:not(:last-child){margin-block-end:0} #pm-page .pm-conteneur{max-width:1320px;margin-inline:auto;width:100%} /* Section sans contenu (ex. aucune actualité publiée) : le code court ajoute « pm-vide ». */ #pm-page .pm-section:has(.pm-vide){display:none} /* --- En-tête de section : pm_entete_section() et widgets Elementor (classe « pm-entete-section ») --- */ #pm-page .pm-entete-section{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px 56px;align-items:end;padding:0} #pm-page .pm-entete-section>*{display:grid;gap:14px;align-content:end;justify-items:start;min-width:0;padding:0} #pm-page .pm-entete-section>:first-child{max-width:720px} #pm-page .pm-entete-section>:nth-child(2){justify-self:end;max-width:440px;gap:16px} #pm-page .pm-entete-section>:only-child{grid-column:1/-1} #pm-page .pm-entete-section .elementor-widget{margin:0;width:auto;max-width:100%} #pm-page .pm-titre-section, #pm-page .pm-entete-section h2{margin:0;font:700 var(--pm-h2)/1.08 var(--police-titre);letter-spacing:-.02em;color:var(--pic-900);text-wrap:balance} #pm-page .pm-entete-section--inverse .pm-titre-section, #pm-page .pm-fond-nuit .pm-titre-section{color:#fff} #pm-page .pm-chapo, #pm-page .pm-chapo p{margin:0;font:400 18px/1.55 var(--police-texte);color:var(--pierre-700);max-width:60ch;text-wrap:pretty} #pm-page .pm-entete-section--inverse .pm-chapo, #pm-page .pm-fond-nuit .pm-chapo{color:var(--pm-secondaire-nuit)} #pm-page .pm-chapo a{color:var(--pic-800);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} #pm-page .pm-chapo a:hover{color:var(--pic-900)} @media (max-width:1119.98px){ #pm-page .pm-entete-section{grid-template-columns:minmax(0,1fr);gap:16px} #pm-page .pm-entete-section>:first-child, #pm-page .pm-entete-section>:nth-child(2){justify-self:start;max-width:720px} } @media (max-width:759.98px){ #pm-page .pm-chapo,#pm-page .pm-chapo p{font-size:17px} } /* --- Mini-titre (« Choisir par type », « Ce qui vous protège ») --- */ #pm-page .pm-mini-titre{margin:0;font:700 12px/1.3 var(--police-titre);letter-spacing:.14em;text-transform:uppercase;color:var(--pierre-600)} /* --- Lien fléché : pm_lien_fleche() et widget Bouton (classe « pm-lien-fleche ») --- */ #pm-page a.pm-lien-fleche, #pm-page .pm-lien-fleche .elementor-button{display:inline-flex;align-items:center;gap:10px;min-height:36px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;font:600 15px/1.3 var(--police-texte);letter-spacing:0;color:var(--pic-800);text-decoration:none} #pm-page a.pm-lien-fleche>span, #pm-page .pm-lien-fleche .elementor-button-text{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px} #pm-page a.pm-lien-fleche>svg{width:16px;height:16px;transition:transform var(--d-rapide) var(--ease)} #pm-page .pm-lien-fleche .elementor-button-content-wrapper{align-items:center;gap:10px} #pm-page .pm-lien-fleche .elementor-button-content-wrapper::after{content:"";width:16px;height:16px;flex:none;background:currentColor;transition:transform var(--d-rapide) var(--ease); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center/contain no-repeat} #pm-page a.pm-lien-fleche:hover, #pm-page .pm-lien-fleche .elementor-button:hover{color:var(--pic-900);background:none} #pm-page a.pm-lien-fleche:hover>svg, #pm-page .pm-lien-fleche .elementor-button:hover .elementor-button-content-wrapper::after{transform:translateX(3px)} #pm-page .pm-fond-nuit a.pm-lien-fleche, #pm-page a.pm-lien-fleche--inverse{color:#fff} #pm-page .pm-fond-nuit a.pm-lien-fleche:hover, #pm-page a.pm-lien-fleche--inverse:hover{color:var(--ciel-300)} /* --- Bouton pilule : pm_bouton() --- … Variantes : --action (Braise, réservé au devis) · --bleu · --contour · --inverse (sur fond Nuit). Options : --m (48 px) · --plein (pleine largeur) · --sans-disque · .pm-bouton__avant (icône devant le texte). */ #pm-page .pm-bouton{display:inline-flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 8px 8px 24px;border:0;border-radius:var(--r-disque);font:700 16px/1.2 var(--police-titre);letter-spacing:.005em;text-align:left;text-decoration:none;white-space:normal;cursor:pointer; transition:background-color var(--d-rapide) var(--ease),color var(--d-rapide) var(--ease),box-shadow var(--d-rapide) var(--ease)} #pm-page .pm-bouton__disque{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-disque);flex:none;transition:transform var(--d-rapide) var(--ease)} #pm-page .pm-bouton__disque svg{width:20px;height:20px} #pm-page .pm-bouton__avant{display:grid;place-items:center;flex:none} #pm-page .pm-bouton__avant svg{width:20px;height:20px} #pm-page .pm-bouton:hover .pm-bouton__disque{transform:translateX(3px)} #pm-page .pm-bouton--sans-disque{justify-content:center;padding:8px 24px} #pm-page .pm-bouton--plein{display:flex;width:100%} #pm-page .pm-bouton--m{min-height:48px;padding:7px 7px 7px 20px;font-size:15px} #pm-page .pm-bouton--m .pm-bouton__disque{width:34px;height:34px} #pm-page .pm-bouton--m .pm-bouton__disque svg{width:18px;height:18px} #pm-page .pm-bouton--m.pm-bouton--sans-disque{padding:7px 20px} #pm-page .pm-bouton--action{background:var(--braise-600);color:#fff} #pm-page .pm-bouton--action:hover{background:var(--braise-700);color:#fff} #pm-page .pm-bouton--action:active{background:var(--braise-800)} #pm-page .pm-bouton--action .pm-bouton__disque{background:#fff;color:var(--braise-600)} #pm-page .pm-bouton--bleu{background:var(--pic-800);color:#fff} #pm-page .pm-bouton--bleu:hover{background:var(--pic-900);color:#fff} #pm-page .pm-bouton--bleu .pm-bouton__disque{background:#fff;color:var(--pic-800)} #pm-page .pm-bouton--contour{background:#fff;color:var(--pic-800);box-shadow:inset 0 0 0 1.5px var(--pic-800)} #pm-page .pm-bouton--contour:hover{background:var(--pic-50);color:var(--pic-900);box-shadow:inset 0 0 0 2px var(--pic-900)} #pm-page .pm-bouton--contour .pm-bouton__disque{background:var(--pic-800);color:#fff} #pm-page .pm-bouton--inverse{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #fff} #pm-page .pm-bouton--inverse:hover{background:rgba(255,255,255,.1);color:#fff} #pm-page .pm-bouton--inverse .pm-bouton__disque{background:#fff;color:var(--pic-900)} #pm-page .pm-bouton:disabled,#pm-page .pm-bouton[aria-disabled="true"]{cursor:not-allowed;opacity:.7} #pm-page .pm-bouton:disabled .pm-bouton__disque{transform:none} /* --- Pilules de choix (onglets de filtre, cases à choix, sous-pages) --- Active : aria-pressed="true", aria-checked="true", aria-selected="true" ou classe « is-active ». --picto : picto ou pastille devant le texte · --formulaire : 48 px. Ligne : .pm-pilules ; qui défile en mobile : .pm-pilules--defile. */ #pm-page .pm-pilule{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--pierre-300);border-radius:var(--r-disque);background:#fff;font:600 15px/1.2 var(--police-texte);color:var(--encre);text-decoration:none;white-space:nowrap;cursor:pointer; transition:border-color var(--d-rapide) var(--ease),background-color var(--d-rapide) var(--ease),color var(--d-rapide) var(--ease)} #pm-page .pm-pilule svg{width:18px;height:18px;color:var(--pic-800)} #pm-page .pm-pilule--picto{padding-left:12px} #pm-page .pm-pilule--formulaire{min-height:48px} #pm-page .pm-pilule:hover{border-color:var(--pic-800);color:var(--encre)} #pm-page .pm-pilule:is([aria-pressed="true"],[aria-checked="true"],[aria-selected="true"],.is-active){border-color:var(--pic-800);background:var(--pic-800);color:#fff} #pm-page .pm-pilule:is([aria-pressed="true"],[aria-checked="true"],[aria-selected="true"],.is-active) svg{color:#fff} #pm-page .pm-pilule:is(:disabled,[aria-disabled="true"]){border-color:var(--pierre-200);background:var(--pierre-100);color:var(--pierre-500);cursor:not-allowed} #pm-page .pm-pilules{display:flex;flex-wrap:wrap;gap:8px} @media (max-width:759.98px){ #pm-page .pm-pilules--defile{flex-wrap:nowrap;margin-inline:-20px;padding-inline:20px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-inline:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch} #pm-page .pm-pilules--defile::-webkit-scrollbar{display:none} #pm-page .pm-pilules--defile>*{flex:none;scroll-snap-align:start} } /* --- Pastilles de matière --- */ #pm-page .pm-pastille{display:inline-block;width:20px;height:20px;border-radius:var(--r-disque);flex:none} #pm-page .pm-pilule .pm-pastille{width:14px;height:14px} #pm-page .pm-pastille--pvc{background:#F4F4F1;box-shadow:inset 0 0 0 1px var(--pierre-400)} #pm-page .pm-pastille--alu{background:#A7ADB3} #pm-page .pm-pastille--bois{background:#B07A4A} /* --- Champs des formulaires de l'accueil (rappel des zones, visite au showroom, devis) ---
*/ #pm-page .pm-champ{display:grid;gap:8px;min-width:0} #pm-page .pm-champ__label{font:600 15px/1.3 var(--police-texte);color:var(--encre)} #pm-page .pm-champ__label small{font-weight:400;font-size:14px;color:var(--pierre-600)} #pm-page .pm-champ__zone{position:relative;display:block} #pm-page .pm-champ__zone>svg{position:absolute;left:18px;top:50%;width:20px;height:20px;margin-top:-10px;color:var(--pierre-600);pointer-events:none} #pm-page .pm-champ__saisie{display:block;width:100%;height:56px;padding:0 20px;border:1px solid var(--pierre-500);border-radius:var(--r-disque);background:#fff;font:400 17px/1.3 var(--police-texte);color:var(--encre);transition:border-color var(--d-rapide) var(--ease),box-shadow var(--d-rapide) var(--ease)} #pm-page textarea.pm-champ__saisie{height:auto;min-height:112px;padding:14px 20px;border-radius:var(--r-zone);line-height:1.5;resize:vertical} #pm-page .pm-champ__zone--icone .pm-champ__saisie{padding-left:48px} #pm-page .pm-champ__saisie::placeholder{color:var(--pierre-500);opacity:1} #pm-page .pm-champ__saisie:hover{border-color:var(--encre)} #pm-page .pm-champ__saisie:focus{outline:none;border-color:var(--pic-800);box-shadow:inset 0 0 0 1px var(--pic-800),0 0 0 3px #B9E4F6} #pm-page .pm-champ__saisie[aria-invalid="true"]{border-color:var(--erreur-700);box-shadow:inset 0 0 0 1px var(--erreur-700)} #pm-page .pm-champ__erreur{display:flex;align-items:flex-start;gap:8px;font:400 14px/1.4 var(--police-texte);color:var(--erreur-700)} #pm-page .pm-champ__erreur svg{width:16px;height:16px;margin-top:2px} #pm-page .pm-champ__aide{font:400 14px/1.4 var(--police-texte);color:var(--pierre-600)} #pm-page .pm-piege{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden} /* Mention sous un formulaire (cadenas + texte) */ #pm-page .pm-mention{display:flex;align-items:flex-start;gap:8px;font:400 13px/1.45 var(--police-texte);color:var(--pierre-600)} #pm-page .pm-mention svg{width:16px;height:16px;margin-top:1px} #pm-page .pm-mention a{color:var(--pic-800);text-decoration:underline;text-underline-offset:3px} /* --- Étoiles --- */ #pm-page .pm-etoiles{display:inline-flex;gap:2px;color:var(--etoile,#FBBC04)} #pm-page .pm-etoiles svg{fill:currentColor;stroke:none} /* Étoiles de la note moyenne (pm_etoiles_note) : dernière étoile remplie au prorata. Héros, section Avis, pied de page. */ #pm-page .pm-etoile{position:relative;display:inline-flex;flex:none;line-height:0} #pm-page .pm-etoile__fond{display:inline-flex;opacity:.3} #pm-page .pm-etoile__plein{position:absolute;top:0;bottom:0;left:0;display:flex;overflow:hidden} #pm-page .pm-etoile__plein svg{flex:none} /* --- Affichage selon la largeur --- */ @media (min-width:760px){#pm-page .pm-mobile{display:none!important}} @media (max-width:759.98px){#pm-page .pm-sauf-mobile{display:none!important}} @media (min-width:1120px){#pm-page .pm-sauf-ordinateur{display:none!important}} @media (max-width:1119.98px){#pm-page .pm-ordinateur{display:none!important}} /* --- Sans JavaScript : les éléments qui en dépendent sont masqués, les secours affichés --- */ html:not(.pm-js) #pm-page .pm-avec-js{display:none!important} html.pm-js #pm-page .pm-sans-js{display:none!important} /* --- Suggestions de communes (PM.communes.combobox) : le