/* Theme Name: Distri Pompes Description: Thème écrit pour distri-pompes.fr — pompes à eau domestiques. Univers « fiche technique » : bleu profond, accent cyan, courbe de pompe dessinée, réglettes graduées, cartes à bande de spécifications. Rien de ce fichier n'est partagé avec un autre site. Version: 2.0 */ /* ========================================================================== DISTRI POMPES — « LA FICHE TECHNIQUE » L'idée visuelle vient du sujet : une pompe se choisit sur trois chiffres (débit, hauteur manométrique, profondeur) et sur UNE courbe. D'où : 1. une COURBE de pompe dessinée en SVG dans le héros, avec sa grille — le seul « visuel » du premier écran n'est pas une photo, c'est une mesure ; 2. une RÉGLETTE graduée de 72px qui ferme chaque titre de section ; 3. des cartes à BANDE DE SPÉCIFICATIONS (rubrique · temps de lecture réel) ; 4. une numérotation 01/02/03 en chiffres tabulaires pour la bande d'usages ; 5. une PLANCHE SOMBRE (bleu nuit) pour le bloc des installateurs par ville — c'est le bloc qui rapporte, il tranche visuellement avec tout le reste. Pas de beige, pas de serif de magazine, pas de ruban de mois : ce site n'est pas un carnet, c'est un catalogue technique. ========================================================================== */ /* ---------- 1. JETONS ------------------------------------------------------ Trois états, dans cet ordre. Aucune couleur n'est définie UNIQUEMENT dans un bloc média : le bloc [data-theme="dark"] répète les mêmes valeurs pour que la bascule manuelle gagne dans les deux sens. 🪤 Les jetons --inv-* ne basculent JAMAIS : ils portent la planche sombre. Sans eux, en mode sombre, le fond deviendrait clair et le texte resterait clair — la panne classique « crème sur crème ». */ :root{ --fond:#F4F7FB; --surf:#FFFFFF; --surf2:#E9F0F8; --encre:#0B2545; --doux:#4A6180; /* 5,9:1 sur --fond */ --filet:#D3DEEA; --accent:#00C2D1; /* aplat / trait uniquement, jamais du texte sur clair */ --accent-txt:#026A75; /* 5,9:1 sur --fond — c'est LUI qui porte les liens */ --accent-voile:rgba(0,194,209,.12); --sur-accent:#04252A; /* 7,4:1 sur --accent */ --ombre:0 1px 0 rgba(11,37,69,.06), 0 12px 28px -22px rgba(11,37,69,.5); --inv-bg:#071B2E; --inv-encre:#EAF3FB; /* 15:1 sur --inv-bg */ --inv-doux:#9DB8D2; /* 8,5:1 */ --inv-filet:#173352; --inv-accent:#4FD8E4; /* 10,2:1 */ --titre:'Archivo', 'Arial Narrow', Helvetica, Arial, sans-serif; --courant:'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --rayon:4px; /* presque droit : c'est un catalogue, pas un carnet */ --lisiere:min(6vw, 56px); color-scheme:light; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --fond:#071324; --surf:#0E1F35; --surf2:#122A45; --encre:#E8F1FA; --doux:#93AECB; --filet:#1C3350; --accent:#00C2D1; --accent-txt:#4FD8E4; --accent-voile:rgba(0,194,209,.16); --ombre:0 1px 0 rgba(0,0,0,.4), 0 14px 30px -24px #000; color-scheme:dark; } } :root[data-theme="dark"]{ --fond:#071324; --surf:#0E1F35; --surf2:#122A45; --encre:#E8F1FA; --doux:#93AECB; --filet:#1C3350; --accent:#00C2D1; --accent-txt:#4FD8E4; --accent-voile:rgba(0,194,209,.16); --ombre:0 1px 0 rgba(0,0,0,.4), 0 14px 30px -24px #000; color-scheme:dark; } /* ---------- 2. SOCLE ------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;overflow-x:clip} body{margin:0;background:var(--fond);color:var(--encre); font-family:var(--courant);font-size:17px;line-height:1.7; -webkit-font-smoothing:antialiased;overflow-x:clip} img{max-width:100%;height:auto;display:block} a{color:inherit;text-decoration:none} a:focus-visible,button:focus-visible,input:focus-visible{outline:3px solid var(--accent-txt);outline-offset:2px} h1,h2,h3{font-family:var(--titre);font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0} .dp-page{max-width:1180px;margin:0 auto;padding-inline:var(--lisiere)} .sb-oeil{position:absolute;left:-9999px} .sb-oeil:focus{left:8px;top:8px;z-index:99;background:var(--encre);color:var(--fond);padding:10px 16px} .sb-oeil-txt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* LA RÉGLETTE — signature du site, elle ferme chaque titre de section. */ .dp-reglette{display:inline-block;margin-left:14px;vertical-align:.18em; fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;opacity:.95} /* ---------- 3. EN-TÊTE — une seule ligne, toujours ------------------------ */ .dp-tete{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--fond) 92%,transparent); backdrop-filter:blur(10px);border-bottom:1px solid var(--filet);transition:padding .18s ease} .dp-tete.is-compact{padding-block:0} .dp-tete-in{display:flex;align-items:center;gap:24px;min-height:72px} .dp-marque{flex:0 0 auto;display:flex;align-items:center;color:var(--encre)} .dp-logo svg{display:block;height:34px;width:auto} .dp-logo{--dp-accent:var(--accent)} .dp-nav{display:flex;align-items:center;gap:26px;margin-left:auto;white-space:nowrap} .dp-nav-lien{font-family:var(--titre);font-weight:600;font-size:14.5px;letter-spacing:.02em; text-transform:uppercase;color:var(--doux);padding-block:6px;border-bottom:2px solid transparent} .dp-nav-lien:hover,.dp-nav-lien.is-actif{color:var(--encre);border-bottom-color:var(--accent)} .dp-tete-actions{display:flex;align-items:center;gap:12px;flex:0 0 auto} .dp-burger{display:none;width:42px;height:42px;background:none;border:1px solid var(--filet); border-radius:var(--rayon);cursor:pointer;padding:11px 9px} .dp-burger span{display:block;height:2px;background:var(--encre);margin:0 0 5px} .dp-burger span:last-child{margin:0} .dp-tiroir{border-bottom:1px solid var(--filet);background:var(--surf)} .dp-tiroir[hidden]{display:none!important} /* 🪤 sort du plateau : sinon la page « déborde » à 390px */ .dp-tiroir-in{padding-block:18px;display:grid;gap:6px} .dp-tiroir-lien{font-family:var(--titre);font-weight:600;font-size:17px;padding:9px 0; border-bottom:1px solid var(--filet);display:block} @media (max-width:1080px){ .dp-nav{display:none} .dp-burger{display:block} .dp-cta--tete{display:none} } /* Boutons */ .dp-cta{display:inline-block;font-family:var(--titre);font-weight:600;font-size:15px; padding:11px 20px;border-radius:var(--rayon);background:var(--encre);color:var(--fond); border:2px solid var(--encre);transition:transform .15s ease} .dp-cta:hover{transform:translateY(-2px)} .dp-cta--tete{padding:9px 16px;font-size:14px;background:var(--accent);color:var(--sur-accent);border-color:var(--accent)} .dp-cta--fin{background:transparent;color:var(--encre)} .dp-cta--clair{background:var(--inv-accent);color:#04252A;border-color:var(--inv-accent)} @media (prefers-reduced-motion: reduce){.dp-cta:hover{transform:none}} /* ---------- 4. HÉRO ------------------------------------------------------- */ .dp-hero{border-bottom:1px solid var(--filet);background: radial-gradient(1100px 420px at 88% -10%, var(--accent-voile), transparent 70%)} .dp-hero-in{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:56px;align-items:center;padding-block:clamp(48px,7vw,92px)} .dp-sur{margin:0 0 14px;font-family:var(--titre);font-weight:600;font-size:13px; letter-spacing:.16em;text-transform:uppercase;color:var(--accent-txt)} .dp-hero-titre{font-size:clamp(38px,6.2vw,66px)} .dp-hero-chapo{margin:20px 0 28px;font-size:19px;color:var(--doux);max-width:38ch} .dp-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin:0} .dp-courbe{margin:0} .dp-courbe svg{width:100%;height:auto;display:block} .dp-courbe-grille line{stroke:var(--filet);stroke-width:1} .dp-courbe-trait{fill:none;stroke:var(--accent);stroke-width:3.4;stroke-linecap:round; stroke-dasharray:600;stroke-dashoffset:600;animation:dp-trace 1.6s .2s ease forwards} .dp-courbe-aire{fill:var(--accent-voile)} .dp-courbe-point{fill:var(--accent);stroke:var(--fond);stroke-width:3} .dp-courbe-txt{fill:var(--doux);font-family:var(--courant);font-size:12px} @keyframes dp-trace{to{stroke-dashoffset:0}} @media (prefers-reduced-motion: reduce){.dp-courbe-trait{animation:none;stroke-dashoffset:0}} /* ---------- 5. BANDE DE COURSE (par usage) -------------------------------- */ .dp-course{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px; background:var(--filet);border:1px solid var(--filet);margin-block:clamp(40px,6vw,72px); border-radius:var(--rayon);overflow:hidden} .dp-course-case{display:grid;gap:8px;background:var(--surf);padding:28px 26px 24px;transition:background .15s ease} .dp-course-case:hover{background:var(--surf2)} .dp-course-num{font-family:var(--titre);font-weight:800;font-size:13px;letter-spacing:.1em;color:var(--accent-txt);font-variant-numeric:tabular-nums} .dp-course-titre{font-family:var(--titre);font-weight:800;font-size:26px;letter-spacing:-.02em} .dp-course-txt{color:var(--doux);font-size:15.5px} .dp-course-compte{font-size:13px;color:var(--doux);font-variant-numeric:tabular-nums; border-top:1px solid var(--filet);padding-top:10px;margin-top:4px} /* ---------- 6. SECTIONS & CARTES ------------------------------------------ */ .dp-bloc{padding-block:clamp(34px,5vw,64px)} .dp-bloc--fin{padding-bottom:clamp(48px,7vw,88px)} .dp-sec-tete{margin-bottom:26px} .dp-sec-titre{font-size:clamp(26px,3.4vw,38px)} .dp-sec-chapo{margin:10px 0 0;color:var(--doux);max-width:60ch} .dp-sec-compte{margin:6px 0 0;color:var(--doux);font-size:14px;font-variant-numeric:tabular-nums} .dp-specs{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px;font-size:12px; font-family:var(--titre);font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--doux)} .dp-spec{border:1px solid var(--filet);border-radius:999px;padding:2px 10px} .dp-spec--rub{border-color:var(--accent);color:var(--accent-txt)} .dp-tete-fiche{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:34px; align-items:center;margin-bottom:44px;padding-bottom:38px;border-bottom:1px solid var(--filet)} .dp-tete-fiche-img img{aspect-ratio:16/10;object-fit:cover;width:100%;border-radius:var(--rayon)} .dp-tete-fiche-titre{font-size:clamp(25px,3vw,34px);margin:6px 0 12px} .dp-tete-fiche-chapo{margin:0;color:var(--doux)} .dp-grille{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 26px} .dp-grille--trois{grid-template-columns:repeat(3,minmax(0,1fr))} .dp-carte-img img{aspect-ratio:4/3;object-fit:cover;width:100%;border-radius:var(--rayon);margin-bottom:12px; transition:filter .2s ease} .dp-carte:hover .dp-carte-img img{filter:saturate(1.15) contrast(1.04)} .dp-carte-titre{font-size:19px;font-weight:600;line-height:1.28} .dp-carte-titre a:hover{color:var(--accent-txt)} .jr-plaque{border-radius:var(--rayon)} /* ---------- 7. LA PLANCHE SOMBRE (le bloc qui rapporte) ------------------- Jetons --inv-* : ils ne basculent JAMAIS avec le thème. */ .dp-planche{background:var(--inv-bg);color:var(--inv-encre); padding-block:clamp(44px,6vw,76px); background-image:radial-gradient(900px 300px at 12% 0%, rgba(79,216,228,.14), transparent 68%)} .dp-planche .dp-sec-titre{color:var(--inv-encre)} .dp-planche .dp-sec-chapo{color:var(--inv-doux)} .dp-planche .dp-reglette{stroke:var(--inv-accent)} .dp-villes{display:flex;flex-wrap:wrap;gap:10px;margin-block:26px} .dp-ville{font-family:var(--titre);font-weight:600;font-size:15px;padding:9px 16px; border:1px solid var(--inv-filet);border-radius:999px;color:var(--inv-encre);transition:all .15s ease} .dp-ville:hover{border-color:var(--inv-accent);color:var(--inv-accent)} .dp-planche-pied{margin:14px 0 0} /* ---------- 8. INDEX DES RUBRIQUES ---------------------------------------- */ .dp-index{list-style:none;margin:0;padding:0;border-top:1px solid var(--filet)} .dp-index-ligne a{display:grid;grid-template-columns:minmax(0,15rem) minmax(0,1fr) auto; gap:24px;align-items:baseline;padding:20px 4px;border-bottom:1px solid var(--filet)} .dp-index-ligne a:hover{background:var(--surf)} .dp-index-nom{font-family:var(--titre);font-weight:800;font-size:21px} .dp-index-chapo{color:var(--doux);font-size:15.5px} .dp-index-compte{font-variant-numeric:tabular-nums;color:var(--accent-txt);font-family:var(--titre);font-weight:800} /* ---------- 9. ARTICLE ---------------------------------------------------- */ .dp-art-tete{padding-block:clamp(28px,4vw,52px) 22px;max-width:860px} .dp-fil{margin:0 0 16px;font-size:14px;color:var(--doux);display:flex;gap:8px;flex-wrap:wrap} .dp-fil a:hover{color:var(--accent-txt)} .dp-art-titre{font-size:clamp(30px,4.4vw,48px)} .dp-art-chapo{margin:18px 0 0;font-size:19.5px;color:var(--doux)} .dp-art-image{margin:0 auto;max-width:1180px;padding-inline:var(--lisiere)} .dp-art-image img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--rayon)} .dp-art-corps{max-width:860px;padding-block:34px} .dp-plaque{border:1px solid var(--filet);border-left:4px solid var(--accent); border-radius:var(--rayon);background:var(--surf);padding:18px 22px;margin-bottom:30px} .dp-plaque-liste{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px 26px} .dp-plaque-liste dt{font-family:var(--titre);font-weight:600;font-size:11.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--doux);margin:0 0 2px} .dp-plaque-liste dd{margin:0;font-weight:600} .dp-plaque-liste a{color:var(--accent-txt)} .dp-sommaire{border-top:1px solid var(--filet);border-bottom:1px solid var(--filet); padding:16px 0;margin-bottom:26px} .dp-sommaire[hidden]{display:none!important} .dp-sommaire-titre{margin:0 0 8px;font-family:var(--titre);font-weight:600;font-size:12px; letter-spacing:.12em;text-transform:uppercase;color:var(--doux)} .dp-sommaire ol{margin:0;padding-left:1.2em;color:var(--doux)} .dp-sommaire a:hover{color:var(--accent-txt)} .dp-texte{font-size:18px;line-height:1.78;max-width:70ch} .dp-texte h2{font-size:clamp(23px,2.6vw,30px);margin:44px 0 14px} .dp-texte h3{font-size:21px;font-weight:600;margin:30px 0 10px} .dp-texte p{margin:0 0 20px} .dp-texte a{color:var(--accent-txt);text-decoration:underline;text-underline-offset:3px} .dp-texte ul,.dp-texte ol{margin:0 0 22px;padding-left:1.3em} .dp-texte li{margin-bottom:8px} .dp-texte img{border-radius:var(--rayon);margin:8px 0} .dp-texte figure{margin:26px 0} .dp-texte figcaption{font-size:14px;color:var(--doux);margin-top:8px} .dp-texte blockquote{margin:26px 0;padding:4px 0 4px 20px;border-left:3px solid var(--accent);color:var(--doux)} .dp-texte table{width:100%;border-collapse:collapse;font-size:16px;display:block;overflow-x:auto} .dp-texte th,.dp-texte td{border:1px solid var(--filet);padding:9px 12px;text-align:left} .dp-art-pied{margin-top:40px;padding-top:26px;border-top:1px solid var(--filet)} .sb-signature{display:flex;gap:18px;align-items:flex-start} .sb-signature img,.sb-signature-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;flex:0 0 auto} .sb-signature-nom{margin:0 0 4px;font-family:var(--titre);font-weight:800;font-size:17px} .sb-signature-bio{margin:0;color:var(--doux);font-size:15.5px} .sb-date{margin:6px 0 0;font-size:13.5px;color:var(--doux)} .dp-vide{color:var(--doux)} .dp-404{text-align:left} /* Pagination */ .sb-pagination{margin-top:36px} .sb-pagination .page-numbers{display:inline-block;padding:8px 14px;border:1px solid var(--filet); border-radius:var(--rayon);margin-right:6px;font-family:var(--titre);font-weight:600;font-size:15px} .sb-pagination .current{background:var(--encre);color:var(--fond);border-color:var(--encre)} /* Recherche */ .dp-quete{display:flex;gap:8px;margin-top:14px} .dp-quete input{flex:1;min-width:0;padding:11px 14px;border:1px solid var(--filet); border-radius:var(--rayon);background:var(--surf);color:var(--encre);font:inherit;font-size:16px} .dp-quete button{padding:11px 18px;border:0;border-radius:var(--rayon);background:var(--accent); color:var(--sur-accent);font-family:var(--titre);font-weight:600;cursor:pointer} /* ---------- 10. PIED ------------------------------------------------------ */ .dp-pied{border-top:1px solid var(--filet);background:var(--surf);margin-top:10px} .dp-pied-in{display:grid;grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)); gap:40px;padding-block:48px 34px} .dp-logo--pied svg{height:32px} .dp-pied-mot{margin:16px 0 10px;color:var(--doux);max-width:44ch} .dp-pied-note{margin:0;color:var(--doux);font-size:14px;max-width:44ch} .dp-pied-col{display:flex;flex-direction:column;gap:9px} .dp-pied-titre{font-family:var(--titre);font-weight:600;font-size:12px;letter-spacing:.12em; text-transform:uppercase;color:var(--doux);margin:0 0 4px} .dp-pied-col a{font-size:15.5px} .dp-pied-col a:hover{color:var(--accent-txt)} .dp-pied-bas{display:flex;justify-content:space-between;align-items:center;gap:16px; padding-block:18px;border-top:1px solid var(--filet);color:var(--doux);font-size:14px} .dp-pied-bas p{margin:0} .dp-bascule{background:none;border:1px solid var(--filet);border-radius:var(--rayon); padding:7px 14px;color:var(--doux);font:inherit;font-size:14px;cursor:pointer} .dp-bascule:hover{color:var(--encre);border-color:var(--encre)} /* ---------- 11. RESPONSIVE ------------------------------------------------ */ @media (max-width:980px){ .dp-hero-in{grid-template-columns:1fr;gap:34px;padding-block:44px} .dp-courbe{order:-1} .dp-course{grid-template-columns:1fr} .dp-grille,.dp-grille--trois{grid-template-columns:repeat(2,minmax(0,1fr))} .dp-tete-fiche{grid-template-columns:1fr;gap:20px} .dp-pied-in{grid-template-columns:1fr 1fr;gap:30px} .dp-index-ligne a{grid-template-columns:minmax(0,1fr) auto} .dp-index-chapo{display:none} } @media (max-width:640px){ body{font-size:16.5px} .dp-grille,.dp-grille--trois{grid-template-columns:1fr;gap:26px} .dp-pied-in{grid-template-columns:1fr;gap:26px} .dp-texte{font-size:17px} .dp-hero-chapo{font-size:17.5px} .dp-tete-in{min-height:64px;gap:12px} .dp-logo svg{height:29px} .dp-pied-bas{flex-direction:column;align-items:flex-start} } /* ---------- 12. BLOC AUTEUR DU PARC (mu-plugin sb-auteur-bloc) ------------- 🪤 Il pose `var(--accent)` en COULEUR DE TEXTE. Notre accent est un cyan d'aplat : 2,18:1 sur blanc, mesuré illisible par chk_contraste_reel. On le ramène sur --accent-txt, qui est calibré pour le texte dans les deux modes. */ /* Le