/* Theme Name: PI Ligne d'eau Theme URI: https://pompe-inondation.com Author: Pompe-Inondation.com Description: Thème du site pompe-inondation.com. Version: 1.0.0 Requires PHP: 7.4 Text Domain: pi-ligne-eau */ /* ========================================================================== 1. JETONS DU SITE — --pi-* (SEULE zone à éditer pour décliner ce thème sur un site frère : couleurs, polices, échelle. Rien d'autre dans ce fichier ne doit contenir de couleur ou de police en dur.) ========================================================================== */ :root{ /* -- couleurs -- */ --pi-craie: #FCFBF8; /* fond principal */ --pi-calcaire: #ECE8DF; /* bandes claires alternées */ --pi-limon: #4A3F31; /* dominante : bandes "sous la ligne d'eau" */ --pi-limon-clair: #7A6A52; /* eau translucide des cartes photo (0.92) */ --pi-limon-pied: #3A3127; /* pied de page */ --pi-encre: #1C1915; /* texte, titres */ --pi-encre-douce: #5B5247; /* texte secondaire, légendes, crédits */ --pi-alerte: #B8102F; /* LE seul accent : 349° */ --pi-alerte-fonce: #8E0B23; /* survol / appui */ --pi-filet: #D8D2C6; /* filets 1px */ --pi-sec: #2E6B4E; /* sémantique : envoyé / valide */ /* pastilles de niveau d'eau (décoratives, toujours doublées d'un libellé) */ --pi-niveau-sec: #3C7A3A; --pi-niveau-humide: #B98A0A; --pi-niveau-moyen: #C4610F; --pi-niveau-haut: var(--pi-alerte); /* -- polices (self-hébergées, voir assets/fonts/ + @font-face plus bas) -- */ --pi-police-titre: "Hepta Slab", Georgia, "Times New Roman", serif; --pi-police-texte: "Martel Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* -- geste "ligne d'eau" -- */ --pi-ligne-eau-heros: 62%; --pi-ligne-eau-carte: 38%; --pi-ligne-eau-carte-dense: 42%; --pi-ligne-eau-carte-survol: 30%; /* -- grille & rythme -- */ --pi-rayon: 3px; --pi-conteneur: 1200px; --pi-rythme: 112px; --pi-rythme-m: 72px; --pi-gouttiere: 24px; --pi-header-h: 76px; --pi-veille-h: 32px; } /* ========================================================================== 2. POLICES — self-hosted, font-display: swap, sous-ensemble latin + latin-ext Fichiers dans assets/fonts/. ========================================================================== */ @font-face{ font-family:"Hepta Slab"; src:url("assets/fonts/HeptaSlab-Variable.woff2") format("woff2-variations"), url("assets/fonts/HeptaSlab-Variable.woff2") format("woff2"); font-weight:1 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F; } @font-face{ font-family:"Martel Sans"; src:url("assets/fonts/MartelSans-Regular.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Martel Sans"; src:url("assets/fonts/MartelSans-SemiBold.woff2") format("woff2"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"Martel Sans"; src:url("assets/fonts/MartelSans-ExtraBold.woff2") format("woff2"); font-weight:800; font-style:normal; font-display:swap; } /* ========================================================================== 3. RESET & BASE ========================================================================== */ *,*::before,*::after{box-sizing:border-box} /* ui-ux-pro-max invoqué pour : débordement horizontal mobile (§ point 4) — un `position:fixed` (le tiroir de menu) est positionné par rapport à l'INITIAL CONTAINING BLOCK (le viewport/), pas par rapport à : `overflow-x:hidden` sur body seul ne le contenait jamais. `clip` sur capture aussi les éléments fixed sans casser le scroll interne (contrairement à `hidden` posé sur , qui peut geler `position:sticky`). */ html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip} @media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}} body{ margin:0; background:var(--pi-craie); color:var(--pi-encre); font-family:var(--pi-police-texte); font-size:18px; line-height:1.7; -webkit-font-smoothing:antialiased; overflow-x:clip; } img,svg{max-width:100%;height:auto;display:block} img{object-fit:cover} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0} button,input,select,textarea{font-family:inherit;font-size:inherit;color:inherit} button{cursor:pointer} h1,h2,h3,h4{font-family:var(--pi-police-titre);color:var(--pi-encre);margin:0 0 .5em;line-height:1.1;font-weight:800} h1{font-size:64px;letter-spacing:-0.01em} h2{font-size:44px;font-weight:700} h3{font-size:26px;font-weight:700} p{margin:0 0 1.2em} :focus-visible{outline:3px solid var(--pi-alerte);outline-offset:3px} ::selection{background:var(--pi-limon);color:var(--pi-craie)} .pi-conteneur{ max-width:var(--pi-conteneur); margin-inline:auto; padding-inline:var(--pi-gouttiere); } .pi-grille{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pi-gouttiere)} .pi-section{padding-block:var(--pi-rythme)} .pi-section--serre{padding-block:calc(var(--pi-rythme) / 2)} .pi-visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .pi-skip-lien{position:absolute;left:-9999px;top:0;background:var(--pi-alerte);color:#fff;padding:.8em 1.2em;z-index:1000;border-radius:0 0 var(--pi-rayon) 0} .pi-skip-lien:focus{left:0} /* ========================================================================== 4. LE REPÈRE ▼ — le symbole signature (SVG inline via fonction PHP pi_repere()) ========================================================================== */ .pi-repere{ display:inline-flex;align-items:center;gap:.5em; font-family:var(--pi-police-titre);font-weight:600;font-size:15px; text-transform:none;letter-spacing:0;color:var(--pi-alerte); } .pi-repere svg{width:11px;height:9px;flex:none} .pi-repere .pi-repere-filet{flex:1 1 auto;height:1px;background:currentColor;opacity:.35;min-width:16px} .pi-repere--clair{color:var(--pi-craie)} .pi-repere--limon{color:var(--pi-limon)} .pi-repere--encre{color:var(--pi-encre)} /* ========================================================================== 5. BOUTONS ========================================================================== */ .pi-bouton{ display:inline-flex;align-items:center;justify-content:center;gap:.6em; font-family:var(--pi-police-texte);font-weight:800;font-size:16px; padding:.95em 1.6em;border-radius:var(--pi-rayon);border:2px solid transparent; cursor:pointer;transition:background-color .18s ease,color .18s ease,border-color .18s ease; line-height:1.15; } .pi-bouton--plein{background:var(--pi-alerte);color:#fff} .pi-bouton--plein:hover,.pi-bouton--plein:focus-visible{background:var(--pi-alerte-fonce)} .pi-bouton--contour{background:transparent;color:#fff;border-color:#fff} .pi-bouton--contour:hover,.pi-bouton--contour:focus-visible{background:#fff;color:var(--pi-limon)} .pi-bouton--contour-encre{background:transparent;color:var(--pi-encre);border-color:var(--pi-encre)} .pi-bouton--contour-encre:hover{background:var(--pi-encre);color:var(--pi-craie)} .pi-bouton--limon{background:var(--pi-limon);color:var(--pi-craie)} .pi-bouton--limon:hover{background:var(--pi-limon-pied)} .pi-bouton--bloc{width:100%} .pi-bouton:disabled{opacity:.5;cursor:not-allowed} /* ========================================================================== 6. BANDEAU DE VEILLE + HEADER ========================================================================== */ .pi-veille{ height:var(--pi-veille-h);background:var(--pi-limon);color:var(--pi-craie); font-size:14px;display:flex;align-items:center;justify-content:center;text-align:center; padding-inline:var(--pi-gouttiere); } .pi-veille a{color:var(--pi-craie);text-decoration:underline;text-underline-offset:2px} .pi-veille a:hover{color:var(--pi-calcaire)} .pi-entete{ position:sticky;top:0;z-index:100; background:var(--pi-craie);border-bottom:1px solid var(--pi-filet); height:var(--pi-header-h); } .pi-entete-barre{ max-width:var(--pi-conteneur);margin-inline:auto;padding-inline:var(--pi-gouttiere); height:100%;display:flex;align-items:center;justify-content:space-between;gap:32px; } .pi-logo{display:flex;align-items:center;height:38px} .pi-logo svg{height:100%;width:auto} .pi-nav{display:flex;align-items:center;gap:28px;flex:1;justify-content:flex-end;margin-right:24px} .pi-nav ul{display:flex;align-items:center;gap:28px;list-style:none} .pi-nav a{ font-family:var(--pi-police-titre);font-weight:600;font-size:16px;color:var(--pi-encre); position:relative;padding-top:14px;display:inline-block;transition:color .15s ease; } .pi-nav a:hover{color:var(--pi-alerte)} .pi-nav li.is-actif a{color:var(--pi-alerte)} .pi-nav li.is-actif a::before{ content:"";position:absolute;top:0;left:50%;transform:translateX(-50%); width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent; border-top:6px solid var(--pi-alerte); } .pi-entete-cta{ align-self:stretch;display:flex;align-items:center; background:var(--pi-alerte);color:#fff;font-family:var(--pi-police-texte); font-weight:800;font-size:15px;padding-inline:22px;white-space:nowrap; border-radius:0;transition:background-color .15s ease; } .pi-entete-cta:hover,.pi-entete-cta:focus-visible{background:var(--pi-alerte-fonce)} .pi-burger{display:none;background:none;border:0;padding:10px;min-width:44px;min-height:44px} .pi-burger svg{width:24px;height:24px} .pi-tiroir{display:none} /* ========================================================================== 7. LIGNE D'EAU / BANDES / HERO ========================================================================== */ .pi-bande--limon{background:var(--pi-limon);color:var(--pi-craie)} .pi-bande--limon h2,.pi-bande--limon h3{color:var(--pi-craie)} .pi-bande--limon .pi-encre-douce{color:#C9BFAE} .pi-bande--calcaire{background:var(--pi-calcaire)} .pi-bande--craie{background:var(--pi-craie)} .pi-hero{ /* ui-ux-pro-max invoqué pour : hero accueil — overflow:hidden retiré (§ point 2 : c'est lui qui coupait les légendes des pastilles quand leur texte poussait la section plus haute que 86vh). */ position:relative;min-height:86vh;min-height:86svh;display:flex;flex-direction:column; } .pi-hero-photo{ /* ui-ux-pro-max invoqué pour : hero accueil — fond limon PLEIN par défaut (jamais un dégradé gris/blanc) : sans photo, .pi-hero-photo est vide et c'est ce fond qui se voit. */ position:absolute;inset:0;z-index:0;background:var(--pi-limon); } .pi-hero-photo img{width:100%;height:100%;object-fit:cover;position:relative;z-index:0} .pi-hero-photo::before{ /* voile TOUJOURS présent (pas seulement au survol/à la présence d'une photo) : le texte blanc du hero doit rester ≥4,5:1 même sur une photo claire, jusqu'en bas où vivent titre/chapo/boutons. */ content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(to bottom, rgba(28,25,21,.18) 0%, color-mix(in srgb, var(--pi-limon) 55%, transparent) 55%, color-mix(in srgb, var(--pi-limon) 88%, transparent) 100%); } .pi-hero-eau{ position:absolute;left:0;right:0;top:var(--pi-ligne-eau-heros);bottom:0;z-index:2; background:color-mix(in srgb, var(--pi-limon) 94%, transparent); } .pi-hero-corps{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:56px} .pi-hero-grille{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--pi-gouttiere);align-items:end} .pi-hero-texte{grid-column:1 / span 7;padding-top:48px} .pi-hero-texte .pi-repere{margin-bottom:18px} .pi-hero-titre{color:#fff;margin-bottom:0;margin:48px 0 22px} .pi-hero-au-dessus{position:relative;z-index:3} .pi-hero-promesse{color:#fff;font-size:19px;max-width:38ch;margin-bottom:28px} .pi-hero-boutons{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:44px} /* ui-ux-pro-max invoqué pour : pastilles chiffres du hero — colonne élargie (120→136px) et légende bridée à 2 lignes avec ellipse plutôt que de déborder sous la bande (§ point 2). */ .pi-hero-chiffres{display:flex;gap:24px;flex-wrap:wrap;align-items:flex-start} .pi-hero-chiffre{display:flex;flex-direction:column;align-items:center;text-align:center;width:136px;flex:none} .pi-hero-chiffre-cercle{ width:112px;height:112px;border-radius:50%;background:var(--pi-craie); display:flex;align-items:center;justify-content:center;margin-bottom:10px;flex:none; box-shadow:0 0 0 4px var(--pi-limon); } .pi-hero-chiffre-valeur{font-family:var(--pi-police-titre);font-weight:800;font-size:28px;color:var(--pi-limon);line-height:1} .pi-hero-chiffre-source{ font-size:12px;line-height:1.35;color:var(--pi-craie);opacity:.9; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; } .pi-hero-triage{grid-column:8 / span 5;position:relative;z-index:3} .pi-triage-carte{ background:var(--pi-craie);border:1px solid var(--pi-filet);border-radius:var(--pi-rayon); padding:28px; } .pi-triage-carte h2{font-size:22px;margin-bottom:6px} .pi-triage-carte p.pi-triage-sous{color:var(--pi-encre-douce);font-size:15px;margin-bottom:18px} .pi-triage-grille{display:grid;grid-template-columns:1fr 1fr;gap:12px} /* ========================================================================== 8. GROS CHOIX EN CARTES (triage + formulaire) ========================================================================== */ .pi-choix{ display:flex;flex-direction:column;align-items:flex-start;gap:8px;text-align:left; border:2px solid var(--pi-encre-douce);border-radius:var(--pi-rayon);background:var(--pi-craie); padding:16px;min-height:96px;width:100%;transition:border-color .15s ease,background-color .15s ease; position:relative; } .pi-choix:hover{border-color:var(--pi-limon)} .pi-choix svg{width:26px;height:26px;color:var(--pi-encre);flex:none} .pi-choix-libelle{font-weight:800;font-size:15px;color:var(--pi-encre)} .pi-choix input{position:absolute;opacity:0;width:1px;height:1px} .pi-choix.is-coche, .pi-choix:has(input:checked){ background:var(--pi-limon);border-color:var(--pi-limon); } .pi-choix.is-coche svg,.pi-choix:has(input:checked) svg{color:var(--pi-craie)} .pi-choix.is-coche .pi-choix-libelle,.pi-choix:has(input:checked) .pi-choix-libelle{color:var(--pi-craie)} .pi-choix.is-coche::after,.pi-choix:has(input:checked)::after{ content:"▼";position:absolute;top:8px;right:10px;color:var(--pi-alerte);font-size:11px; } .pi-choix--echelle{align-items:center} /* mini échelle de crue (créneaux noir/blanc) dessinée en CSS sur les cases hauteur d'eau */ .pi-echellette{display:flex;flex-direction:column-reverse;width:14px;height:34px;border:1px solid var(--pi-encre);flex:none} .pi-echellette span{flex:1;border-bottom:1px solid var(--pi-encre)} .pi-echellette span:nth-child(odd){background:var(--pi-encre)} .pi-choix.is-coche .pi-echellette,.pi-choix:has(input:checked) .pi-echellette{border-color:var(--pi-craie)} .pi-choix.is-coche .pi-echellette span,.pi-choix:has(input:checked) .pi-echellette span{border-color:var(--pi-craie)} .pi-echellette[data-niveau="1"] span:nth-child(1){background:var(--pi-niveau-haut)} .pi-echellette[data-niveau="2"] span:nth-child(-n+2){background:var(--pi-niveau-moyen)} .pi-echellette[data-niveau="3"] span:nth-child(-n+3){background:var(--pi-niveau-humide)} .pi-echellette[data-niveau="4"] span{background:var(--pi-niveau-sec)} /* ========================================================================== 9. CARTE « PHOTO NOYÉE » — rubriques, articles, villes ========================================================================== */ .pi-carte{ position:relative;display:block;border-radius:var(--pi-rayon);overflow:hidden; background:var(--pi-encre-douce); } .pi-carte--43{aspect-ratio:4/5} .pi-carte--32{aspect-ratio:3/2} .pi-carte img{width:100%;height:100%;object-fit:cover;transition:transform .4s ease} .pi-carte-fond{position:absolute;inset:0;display:block;z-index:1} .pi-carte-eau{ position:absolute;left:0;right:0;bottom:0; height:var(--pi-eau, var(--pi-ligne-eau-carte)); background:color-mix(in srgb, var(--pi-limon-clair) 92%, transparent); transition:background .25s ease-out; } .pi-carte:hover .pi-carte-eau,.pi-carte:focus-within .pi-carte-eau{background:color-mix(in srgb, var(--pi-limon) 94%, transparent)} @media (prefers-reduced-motion: reduce){.pi-carte-eau{transition:none}} /* ui-ux-pro-max invoqué pour : cartes « photo noyée » — le texte était ancré par le BAS (bottom:16px) et pouvait remonter au-dessus de la ligne d'eau sur une photo claire (herbe, carrelage, gravier) : illisible. Ancré par le HAUT, exactement à la ligne d'eau (jamais plus haut) ; s'il déborde, il est coupé en bas par .pi-carte{overflow:hidden} — jamais renvoyé sur la photo. Le survol baisse l'eau (--pi-eau) MAIS ne fait plus bouger le texte : il reste sur l'eau, qui elle seule descend derrière. */ .pi-carte-contenu{ position:absolute;left:18px;right:18px;bottom:16px; top:calc(100% - var(--pi-eau, var(--pi-ligne-eau-carte))); z-index:2;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-start; padding-top:14px;overflow:hidden; } /* le texte ne passe jamais sur la photo : l'eau monte assez haut pour tout contenir */ .pi-carte .pi-carte-contenu{--pi-eau-min:0px} .pi-carte--43{--pi-eau:62%} .pi-carte--32{--pi-eau:55%} .pi-carte-contenu a{pointer-events:auto} .pi-carte-titre{color:#fff;font-family:var(--pi-police-titre);font-weight:700;font-size:22px;margin:8px 0 6px;line-height:1.15} .pi-carte-accroche{color:#F1EEE6;font-size:14px;margin-bottom:8px} .pi-carte-lien{color:#fff;font-weight:800;font-size:14px;display:inline-flex;align-items:center;gap:6px} .pi-carte-lien::after{content:"→"} /* .pi-carte-dense : hauteur d eau réglée par le format de carte ci-dessus */ .pi-carte-liens-rubrique{list-style:none;margin-top:10px;display:flex;flex-direction:column;gap:4px} .pi-carte-liens-rubrique a{color:#fff;font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:2px;opacity:.9} .pi-carte-liens-rubrique a:hover{opacity:1} .pi-carte-credit{font-size:12px;color:var(--pi-encre-douce);margin-top:6px;display:block} .pi-grille-cartes{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pi-gouttiere)} .pi-grille-cartes--3col{grid-template-columns:repeat(3,1fr)} .pi-grille-rubriques{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pi-gouttiere)} /* ========================================================================== 10. FRISE 4 PREMIERS GESTES ========================================================================== */ .pi-frise-gestes{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pi-gouttiere)} .pi-geste{position:relative} /* ui-ux-pro-max invoqué pour : « Les 4 premiers gestes » — le numéro n'est plus en absolu par-dessus la photo/le titre (§ point 6). Sans photo (assets/photos/ pas encore livré), le chiffre géant finissait DERRIÈRE le texte lui-même : il vit maintenant au-dessus, en flux normal, jamais sous aucun texte, quelle que soit la présence de l'image. */ .pi-geste-numero{ display:block;font-family:var(--pi-police-titre);font-weight:800;font-size:32px;line-height:1; color:var(--pi-limon);margin-bottom:10px;user-select:none; } .pi-geste-photo{ display:block;position:relative;border-radius:var(--pi-rayon);overflow:hidden;aspect-ratio:3/2; margin-bottom:12px;background:var(--pi-calcaire); /* repli propre, jamais un vide gris/cassé */ } .pi-geste-titre{font-size:17px;margin-bottom:6px} .pi-geste-texte{font-size:15px;color:var(--pi-encre-douce);margin-bottom:0} /* ========================================================================== 11. SCHÉMA À LA CRAIE ========================================================================== */ .pi-craie-schema{background:var(--pi-limon);border-radius:var(--pi-rayon);padding:32px} .pi-craie-schema svg{width:100%;height:auto;display:block} .pi-craie-schema svg *{fill:none} .pi-craie-schema svg text{fill:var(--pi-craie);font-family:var(--pi-police-titre);font-weight:600;font-size:13px} .pi-craie-schema svg .pi-trait{stroke:var(--pi-craie);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .pi-craie-schema svg .pi-trait-eau{stroke:var(--pi-alerte);stroke-width:2} /* ui-ux-pro-max invoqué pour : section « D'où vient l'eau » — les deux colonnes (schéma / causes) étaient posées en style="grid-column" inline, jamais recollées sous 700px : le schéma se retrouvait compressé sur ~80px (§ point 5). Classes dédiées, empilées en 1 colonne pleine largeur sous 760px. */ .pi-schema-texte{grid-column:1 / span 8} .pi-schema-causes{grid-column:9 / span 4} @media (max-width:760px){ .pi-schema-texte,.pi-schema-causes{grid-column:1 / -1} } .pi-craie-legende{list-style:none;margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .pi-craie-legende li{color:var(--pi-craie);font-size:14px} .pi-craie-legende a{color:var(--pi-craie);text-decoration:underline;text-underline-offset:2px} .pi-craie-legende strong{display:block;color:#fff;font-family:var(--pi-police-titre)} /* ========================================================================== 12. TUILES DE GROS CHIFFRES ========================================================================== */ .pi-tuiles-chiffres{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--pi-gouttiere)} .pi-tuile-chiffre{padding:20px 4px;border-top:1px solid var(--pi-filet)} .pi-tuile-valeur{ position:relative;font-family:var(--pi-police-titre);font-weight:800;font-size:76px; color:var(--pi-limon);line-height:1;display:inline-block; } .pi-tuile-valeur::after{ content:"";position:absolute;left:-4px;right:-4px;top:60%;height:1px;background:var(--pi-alerte); } .pi-tuile-libelle{margin-top:10px;font-weight:600;font-size:15px} .pi-tuile-source{font-size:12px;color:var(--pi-encre-douce)} /* ========================================================================== 13. CARTE DE LA SOMME (SVG) ========================================================================== */ .pi-carte-somme{display:grid;grid-template-columns:7fr 5fr;gap:var(--pi-gouttiere);align-items:start} .pi-carte-somme-svg{background:var(--pi-craie);border:1px solid var(--pi-filet);border-radius:var(--pi-rayon);padding:16px} .pi-carte-somme-svg svg{width:100%;height:auto} .pi-commune-poly{fill:var(--pi-calcaire);stroke:var(--pi-filet);stroke-width:1.5;transition:fill .15s ease} .pi-commune-poly:hover,.pi-commune-poly.is-actif{fill:color-mix(in srgb, var(--pi-alerte) 12%, var(--pi-calcaire))} .pi-commune-fleuve{stroke:var(--pi-limon);stroke-width:4;fill:none;stroke-linecap:round;stroke-dasharray:1 0} /* ui-ux-pro-max invoqué pour : carte des communes — deux panneaux à échelle indépendante (Abbeville / agglomération d'Amiens) reliés par un trait « à la craie », avec leurs propres titres ; remplace l'unique carte à échelle unique qui écrasait le cluster amiénois à 15% du cadre. */ .pi-carte-somme-titre{font-family:var(--pi-police-titre);font-weight:700;font-size:14px;fill:var(--pi-encre)} .pi-carte-somme-legende{font-family:var(--pi-police-texte);font-size:11px;fill:var(--pi-encre-douce)} .pi-carte-somme-lien{stroke:var(--pi-limon);stroke-width:2;stroke-dasharray:5 5;stroke-linecap:round} .pi-commune-repere{cursor:pointer} .pi-commune-repere .pi-commune-triangle{fill:var(--pi-alerte)} .pi-commune-repere text{font-family:var(--pi-police-titre);font-weight:600;font-size:13px;fill:var(--pi-encre)} .pi-commune-repere:hover .pi-commune-triangle,.pi-commune-repere.is-actif .pi-commune-triangle{fill:var(--pi-alerte-fonce)} .pi-liste-communes{list-style:none;display:flex;flex-direction:column;gap:2px;max-height:560px;overflow:hidden} .pi-liste-communes a{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:16px 18px;border-radius:var(--pi-rayon);transition:background-color .15s ease; } .pi-liste-communes a:hover,.pi-liste-communes li.is-actif a{background:var(--pi-calcaire)} .pi-liste-communes strong{font-family:var(--pi-police-titre);font-size:17px} .pi-liste-communes span{font-size:13px;color:var(--pi-encre-douce)} /* ========================================================================== 14. DERNIERS GUIDES + BANDE FORMULAIRE ========================================================================== */ .pi-bande-formulaire{padding:var(--pi-rythme) 0} .pi-bande-formulaire-grille{display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center} .pi-bande-formulaire h2{color:#fff} .pi-bande-formulaire p{color:#E7E1D3} /* ========================================================================== 15. FOOTER ========================================================================== */ .pi-pied{background:var(--pi-limon-pied);color:var(--pi-craie);padding-top:var(--pi-rythme-m);padding-bottom:32px} .pi-pied a{color:#DCD5C6} .pi-pied a:hover{color:#fff} /* ui-ux-pro-max invoqué pour : pied de page — 5 colonnes réelles (logo + 4 colonnes de liens) pour seulement 4 pistes déclarées : la 5e ("Le site") retombait seule sur une 2e rangée. */ .pi-pied-haut{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1fr;gap:28px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.12)} .pi-pied-logo svg{height:34px;width:auto;margin-bottom:14px} .pi-pied-baseline{font-size:14px;color:#BDB4A0;max-width:32ch} .pi-pied-colonne h3{color:#fff;font-size:15px;margin-bottom:14px;font-family:var(--pi-police-titre)} .pi-pied-colonne ul{list-style:none;display:flex;flex-direction:column;gap:9px} .pi-pied-colonne a{font-size:14px} .pi-pied-bas{display:flex;justify-content:space-between;align-items:center;padding-top:24px;font-size:12px;color:#9E9481;flex-wrap:wrap;gap:12px} /* ========================================================================== 16. FORMULAIRE MULTI-ÉTAPES (composant partagé : accueil / rubrique / ville / devis / sidebar) ========================================================================== */ .pi-formulaire{background:var(--pi-craie);border:1px solid var(--pi-filet);border-radius:var(--pi-rayon)} .pi-formulaire--sur-limon{background:var(--pi-craie)} .pi-formulaire-corps{padding:28px} .pi-formulaire-progression{display:flex;align-items:center;gap:6px;margin-bottom:22px} .pi-formulaire-progression-texte{font-size:13px;font-weight:600;color:var(--pi-encre-douce);margin-right:8px;white-space:nowrap} .pi-formulaire-repere{width:22px;height:22px;border-radius:50%;border:2px solid var(--pi-filet);flex:none;position:relative;display:flex;align-items:center;justify-content:center} .pi-formulaire-repere::after{content:"";width:8px;height:8px;background:transparent;border-radius:50%} .pi-formulaire-repere.is-fait{background:var(--pi-limon);border-color:var(--pi-limon)} .pi-formulaire-repere.is-fait::after{background:var(--pi-craie)} .pi-formulaire-repere.is-courant{border-color:var(--pi-alerte)} .pi-formulaire-repere.is-courant::after{background:var(--pi-alerte)} .pi-formulaire-trait{flex:1;height:2px;background:var(--pi-filet)} .pi-formulaire-trait.is-fait{background:var(--pi-limon)} .pi-formulaire fieldset{border:0;margin:0 0 40px;padding:0} /* Sans JS : les 6 blocs restent tous visibles et le formulaire reste utilisable (progressive enhancement). Le JS ajoute .pi-form-js et prend la main sur l'affichage. */ .pi-formulaire.pi-form-js fieldset{display:none;margin:0} .pi-formulaire.pi-form-js fieldset.is-active{display:block;animation:pi-apparait .2s ease} .pi-formulaire.pi-form-js .pi-formulaire-nav{display:flex} .pi-formulaire-nav{display:none} @media (prefers-reduced-motion: reduce){.pi-formulaire fieldset.is-active{animation:none}} @keyframes pi-apparait{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} .pi-formulaire legend{font-family:var(--pi-police-titre);font-weight:700;font-size:20px;margin-bottom:16px;padding:0} .pi-formulaire-options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:20px} .pi-formulaire-options--1col{grid-template-columns:1fr} .pi-formulaire-nav{display:flex;justify-content:space-between;gap:12px;align-items:center} .pi-formulaire-retour{background:none;border:0;color:var(--pi-encre-douce);font-weight:600;padding:.8em 0;text-decoration:underline;text-underline-offset:2px} .pi-formulaire-retour:disabled{visibility:hidden} .pi-champ{margin-bottom:16px} .pi-champ label{display:block;font-weight:600;font-size:14px;margin-bottom:6px} .pi-champ small{display:block;color:var(--pi-encre-douce);font-size:12px;margin-top:4px} .pi-champ input[type=text],.pi-champ input[type=email],.pi-champ input[type=tel],.pi-champ textarea{ width:100%;border:1px solid var(--pi-encre-douce);border-radius:var(--pi-rayon); padding:.85em 1em;background:var(--pi-craie);color:var(--pi-encre); } .pi-champ input:focus,.pi-champ textarea:focus{border-color:var(--pi-alerte)} .pi-consentement{display:flex;align-items:flex-start;gap:10px;font-size:13px;color:var(--pi-encre-douce);margin-bottom:20px} .pi-consentement input{margin-top:3px;flex:none;width:18px;height:18px} .pi-consentement a{text-decoration:underline;text-underline-offset:2px} .pi-formulaire-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .pi-formulaire-alerte{ display:none;background:var(--pi-limon);color:#fff;padding:16px 18px;border-radius:var(--pi-rayon); margin-bottom:18px;font-size:14px; } .pi-formulaire-alerte.is-visible{display:flex;align-items:flex-start;gap:10px} .pi-formulaire-alerte svg{flex:none;width:20px;height:20px;margin-top:1px} .pi-formulaire-erreur{ position:fixed;inset:0;background:rgba(28,25,21,.55);display:none;align-items:center;justify-content:center;z-index:1000;padding:24px; } .pi-formulaire-erreur.is-visible{display:flex} .pi-formulaire-erreur-boite{background:var(--pi-craie);border-radius:var(--pi-rayon);padding:28px;max-width:420px;text-align:center} .pi-formulaire-erreur-boite h3{margin-bottom:10px} .pi-formulaire-erreur-boite button{margin-top:16px} .pi-formulaire-confirmation{background:var(--pi-sec);color:#fff;padding:36px;border-radius:var(--pi-rayon);text-align:left} .pi-formulaire-confirmation h2{color:#fff;font-size:28px} .pi-formulaire-confirmation ul{list-style:none;margin:16px 0;display:flex;flex-direction:column;gap:4px;font-size:14px} .pi-formulaire-confirmation a.pi-bouton{margin-top:12px} /* barre de décrue verticale (page devis, 6 repères) */ .pi-decrue{display:flex;flex-direction:column;gap:0;align-items:flex-start} .pi-decrue-repere{display:flex;align-items:center;gap:12px;position:relative;padding-block:6px} .pi-decrue-point{width:16px;height:16px;border-radius:50%;background:transparent;border:2px solid rgba(255,255,255,.4);flex:none} .pi-decrue-repere.is-fait .pi-decrue-point{background:var(--pi-craie);border-color:var(--pi-craie)} .pi-decrue-repere.is-courant .pi-decrue-point{background:var(--pi-alerte);border-color:var(--pi-alerte)} .pi-decrue-repere span{font-size:14px;color:rgba(255,255,255,.75)} .pi-decrue-repere.is-courant span,.pi-decrue-repere.is-fait span{color:#fff} .pi-decrue-trait{width:2px;height:26px;background:rgba(255,255,255,.3);margin-left:7px} .pi-decrue-trait.is-fait{background:var(--pi-craie)} /* petit échantillon d'échelle de crue dans les grosses cases (étape hauteur d'eau) */ .pi-choix--niveau .pi-echellette{margin-bottom:4px} /* ========================================================================== 17. CONTENU ÉDITORIAL (the_content) — étapes, alerte, FAQ, sources, tableaux ========================================================================== */ .pi-contenu{font-size:18px;line-height:1.75;color:var(--pi-encre)} .pi-contenu > *:first-child{margin-top:0} .pi-contenu h2{font-size:32px;margin-top:56px;padding-top:8px;scroll-margin-top:calc(var(--pi-header-h) + 24px)} .pi-contenu h3{font-size:22px;margin-top:36px;scroll-margin-top:calc(var(--pi-header-h) + 24px)} .pi-contenu p{max-width:72ch} .pi-contenu a:not(.pi-bouton){ text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px; color:var(--pi-alerte);font-weight:600; } .pi-contenu a:not(.pi-bouton):hover{color:var(--pi-alerte-fonce)} .pi-contenu img{border-radius:var(--pi-rayon);margin:28px 0} .pi-contenu figure{margin:28px 0} .pi-contenu figcaption{font-size:13px;color:var(--pi-encre-douce);margin-top:8px} .pi-contenu blockquote{ border-left:3px solid var(--pi-alerte);margin:28px 0;padding:4px 0 4px 24px; font-family:var(--pi-police-titre);font-weight:600;font-size:21px;color:var(--pi-limon); max-width:64ch; } .pi-contenu ul,.pi-contenu ol{max-width:72ch;padding-left:1.3em;margin:0 0 1.2em} .pi-contenu li{margin-bottom:.4em} /* .etapes — remplace les listes numérotées : le repère ▼ signature comme puce, le h3 garde le texte réel du rédacteur (qui porte déjà son numéro, ex. "1. La sécurité") */ .pi-contenu .etapes{margin:32px 0;border-top:1px solid var(--pi-filet)} .pi-contenu .etape{position:relative;padding:22px 0 22px 44px;border-bottom:1px solid var(--pi-filet)} .pi-contenu .etape::before{content:"▼";position:absolute;left:2px;top:27px;color:var(--pi-alerte);font-size:13px;line-height:1} .pi-contenu .etape h3{font-family:var(--pi-police-titre);font-weight:800;font-size:19px;color:var(--pi-limon);margin:0 0 8px} .pi-contenu .etape p{margin:0;max-width:64ch;color:var(--pi-encre)} /* .alerte — bandeau de sécurité */ .pi-contenu .alerte{ background:var(--pi-limon);color:#fff;border-radius:var(--pi-rayon); padding:22px 24px;margin:32px 0;position:relative;padding-left:56px; } .pi-contenu .alerte::before{ content:"▼";position:absolute;left:22px;top:24px;color:var(--pi-alerte);font-size:15px; } .pi-contenu .alerte p{margin:0;max-width:none;color:#fff} .pi-contenu .alerte strong{color:#fff} /* bloc "à faire maintenant" / "bon à savoir" (classes posées par le rédacteur) */ .pi-contenu .pi-faire-maintenant{background:var(--pi-limon);color:#fff;border-radius:var(--pi-rayon);padding:22px 24px;margin:32px 0} .pi-contenu .pi-faire-maintenant p{color:#fff;margin:0;max-width:none} .pi-contenu .pi-bon-a-savoir{background:var(--pi-calcaire);border-left:3px solid var(--pi-alerte);padding:20px 22px;margin:32px 0;border-radius:0 var(--pi-rayon) var(--pi-rayon) 0} .pi-contenu .pi-bon-a-savoir p{margin:0;max-width:none} /* FAQ — details/summary en accordéon */ .pi-contenu details{ border-bottom:1px solid var(--pi-filet);padding:18px 0; } .pi-contenu details:first-of-type{border-top:1px solid var(--pi-filet)} .pi-contenu summary{ list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px; font-family:var(--pi-police-titre);font-weight:700;font-size:18px;padding-right:4px; } .pi-contenu summary::-webkit-details-marker{display:none} .pi-contenu summary::after{ content:"▼";color:var(--pi-alerte);font-size:12px;flex:none;transition:transform .2s ease; } .pi-contenu details[open] summary::after{transform:rotate(180deg)} .pi-contenu details p{margin-top:14px;margin-bottom:0;max-width:68ch} @media (prefers-reduced-motion: reduce){.pi-contenu summary::after{transition:none}} /* p.sources — bloc compact et soigné, jamais une liste brute */ .pi-contenu p.sources{ margin-top:44px;padding-top:20px;border-top:2px solid var(--pi-encre); font-size:13px;color:var(--pi-encre-douce);max-width:none; } .pi-contenu p.sources::before{ content:"Sources";display:block;font-family:var(--pi-police-titre);font-weight:700; font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--pi-encre);margin-bottom:8px; } .pi-contenu p.sources a{color:var(--pi-encre-douce);text-decoration:underline;text-underline-offset:2px;font-weight:400} .pi-contenu p.sources a:hover{color:var(--pi-alerte)} /* tableaux — enveloppés par le socle dans .sbs_tableau */ .sbs_tableau{overflow-x:auto;margin:28px 0;-webkit-overflow-scrolling:touch} .pi-contenu table{width:100%;border-collapse:collapse;min-width:480px} .pi-contenu thead th{background:var(--pi-limon);color:#fff;text-align:left;padding:12px 14px;font-family:var(--pi-police-titre);font-size:14px;white-space:nowrap} .pi-contenu tbody td{padding:12px 14px;border-bottom:1px solid var(--pi-filet);font-size:15px} .pi-contenu tbody tr:nth-child(even){background:var(--pi-calcaire)} /* infographies du socle (sbs_*) — habillage dans l'identité */ .sbs_jauges,.sbs_tarifs,.sbs_frise,.sbs_lieu{ display:block;background:var(--pi-calcaire);border-radius:var(--pi-rayon);padding:28px;margin:32px 0; } .sbs_jauges_titre,.sbs_tarifs_titre,.sbs_frise_titre{ display:block;font-family:var(--pi-police-titre);font-weight:700;font-size:19px;margin-bottom:18px;color:var(--pi-encre); } sbs-jauges,sbs-tarifs,sbs-frise{display:block} sbs-jauge{display:inline-flex;flex-direction:column;margin:0 32px 16px 0;min-width:140px} .sbs_jauge_libelle{font-size:13px;color:var(--pi-encre-douce);margin-bottom:4px} .sbs_jauge_valeur{font-family:var(--pi-police-titre);font-weight:800;font-size:40px;color:var(--pi-limon);line-height:1} .sbs_jauge_unite{font-size:13px;color:var(--pi-encre-douce);margin-left:4px} sbs-tarif{display:flex;align-items:center;gap:14px;margin-bottom:10px} .sbs_tarif_libelle{width:220px;flex:none;font-size:14px} .sbs_tarif_barre{flex:1;height:10px;accent-color:var(--pi-alerte)} sbs-etape{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:10px 0;border-bottom:1px solid var(--pi-filet)} .sbs_etape_date{font-weight:700;font-family:var(--pi-police-titre);font-size:14px} .sbs_etape_titre{display:block;font-weight:700} .sbs_etape_desc{display:block;color:var(--pi-encre-douce);font-size:14px} .sbs_source{display:block;margin-top:14px;color:var(--pi-encre-douce);font-size:12px} .sbs_lieu_nom{display:block;font-family:var(--pi-police-titre);font-size:18px;margin-bottom:4px} .sbs_lieu_adresse{display:block;font-style:normal;color:var(--pi-encre-douce);margin-bottom:6px} .sbs_lieu_carte{display:inline-flex;align-items:center;gap:6px;color:var(--pi-alerte);font-weight:700;font-size:14px} .sbs_lieu_carte svg{width:16px;height:16px;fill:currentColor} /* ========================================================================== 18. ARTICLE (single) ========================================================================== */ .pi-article-tete{padding-top:40px;padding-bottom:0} .pi-article-ligne-auteur{display:flex;align-items:center;gap:12px;margin:18px 0 28px;flex-wrap:wrap} .pi-avatar{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none} .pi-article-auteur-nom{font-weight:700} .pi-article-meta{color:var(--pi-encre-douce);font-size:14px} .pi-article-meta .pi-point{margin-inline:6px} /* ui-ux-pro-max invoqué pour : article — image à la une plafonnée à 420px desktop (§ point 7) : le titre + le chapô + le début du texte doivent rester au-dessus de la ligne de flottaison au chargement. Fond limon en repli (jamais un bloc gris vide tant que la photo n'est pas livrée). */ .pi-article-une{position:relative;border-radius:var(--pi-rayon);overflow:hidden;aspect-ratio:16/9;max-height:420px;margin-bottom:8px;background:var(--pi-limon)} .pi-article-une img{width:100%;height:100%;object-fit:cover} .pi-article-une-eau{position:absolute;left:0;right:0;bottom:0;top:85%;background:color-mix(in srgb, var(--pi-encre) 55%, transparent)} .pi-article-une-legende{position:absolute;left:16px;right:16px;bottom:8px;color:#fff;font-size:12px;z-index:2} .pi-article-credit-hors{font-size:12px;color:var(--pi-encre-douce);margin:6px 0 36px} .pi-article-corps{display:grid;grid-template-columns:220px 1fr 300px;gap:44px;align-items:start} .pi-sommaire{position:sticky;top:calc(var(--pi-header-h) + 24px)} .pi-sommaire-titre{font-family:var(--pi-police-titre);font-weight:700;font-size:14px;margin-bottom:14px} .pi-sommaire ol{list-style:none;display:flex;flex-direction:column;gap:2px;counter-reset:pi-som} .pi-sommaire li{counter-increment:pi-som} .pi-sommaire a{ display:flex;gap:8px;font-size:14px;color:var(--pi-encre-douce);padding:8px 0;line-height:1.3; border-left:2px solid var(--pi-filet);padding-left:12px; } .pi-sommaire a::before{content:counter(pi-som) " ·";font-weight:800;color:var(--pi-encre-douce);flex:none} .pi-sommaire li.is-actif a{color:var(--pi-alerte);border-left-color:var(--pi-alerte);font-weight:700} .pi-sommaire li.is-actif a::before{color:var(--pi-alerte)} .pi-echelle-lecture{position:absolute;left:-28px;top:0;bottom:0;width:4px;background:var(--pi-filet);display:none} .pi-echelle-lecture-remplie{position:absolute;left:0;right:0;top:0;height:0%;background:var(--pi-limon)} .pi-milieu{position:relative} .pi-sidebar-article{position:sticky;top:calc(var(--pi-header-h) + 24px)} .pi-article-pied{margin-top:64px} .pi-bloc-auteur{ display:flex;gap:18px;align-items:flex-start;background:var(--pi-calcaire);border-radius:var(--pi-rayon); padding:24px;margin:40px 0; } .pi-bloc-auteur .pi-avatar{width:64px;height:64px} .pi-bloc-auteur-nom{font-family:var(--pi-police-titre);font-weight:700;font-size:18px;display:inline-flex;gap:8px} .pi-bloc-auteur-role{color:var(--pi-encre-douce);font-size:14px;margin-bottom:8px} .pi-bloc-auteur-bio{font-size:14px;color:var(--pi-encre-douce);margin-bottom:8px} .pi-bloc-auteur-lien{font-weight:700;font-size:14px} .pi-articles-lies h2{margin-bottom:24px} /* ========================================================================== 19. RUBRIQUE (category) ========================================================================== */ .pi-tete-rubrique{position:relative;min-height:40vh;display:flex;align-items:flex-end;overflow:hidden} .pi-tete-rubrique .pi-hero-photo::before{height:70%} .pi-tete-rubrique .pi-hero-eau{top:60%} .pi-tete-rubrique .pi-hero-corps{padding-bottom:40px} .pi-tete-rubrique h1{color:#fff;margin:14px 0 8px} .pi-tete-rubrique p{color:#fff;max-width:60ch} .pi-rubrique-intro{margin-top:var(--pi-rythme-m)} .pi-rubrique-intro summary{ cursor:pointer;font-family:var(--pi-police-titre);font-weight:700;font-size:16px; padding:14px 0;border-top:1px solid var(--pi-filet);display:flex;justify-content:space-between; } .pi-rubrique-intro summary::after{content:"▼";color:var(--pi-alerte);font-size:11px} .pi-rubrique-intro[open] summary::after{content:"▲"} .pi-rubrique-intro-corps{padding:16px 0 8px;color:var(--pi-encre-douce);max-width:72ch} .pi-rubrique-vide{background:var(--pi-calcaire);border-radius:var(--pi-rayon);padding:40px;text-align:center;color:var(--pi-encre-douce)} /* ========================================================================== 20. PAGE VILLE ========================================================================== */ .pi-ville-ouverture{display:grid;grid-template-columns:1fr 1fr;gap:var(--pi-gouttiere);align-items:start;padding-top:32px} .pi-ville-photo{position:relative;border-radius:var(--pi-rayon);overflow:hidden;aspect-ratio:3/2;margin-top:20px} .pi-ville-photo img{width:100%;height:100%;object-fit:cover} .pi-ville-photo-eau{position:absolute;left:0;right:0;bottom:0;height:38%;background:color-mix(in srgb, var(--pi-limon-clair) 92%, transparent)} .pi-ville-photo-nom{position:absolute;left:18px;bottom:16px;color:#fff;font-family:var(--pi-police-titre);font-weight:700;font-size:22px} .pi-ville-texte h1{font-size:38px} .pi-ville-contexte{max-width:52ch;color:var(--pi-encre-douce)} .pi-ancrages{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--pi-gouttiere);margin-top:var(--pi-rythme-m)} .pi-ancrage{background:var(--pi-calcaire);border-radius:var(--pi-rayon);padding:22px} .pi-ancrage strong{display:block;margin-top:8px;font-size:15px} .pi-ancrage span{font-size:13px;color:var(--pi-encre-douce)} .pi-ville-mini-carte{margin-top:var(--pi-rythme-m)} .pi-ville-autres-communes{margin-top:var(--pi-rythme-m)} /* ========================================================================== 21. HUB SOMME ========================================================================== */ .pi-hub-tete{position:relative;min-height:44vh;display:flex;align-items:flex-end;overflow:hidden} .pi-hub-tete .pi-hero-eau{top:65%} .pi-hub-tete h1{color:#fff} .pi-hub-crue-2001{background:var(--pi-calcaire);border-radius:var(--pi-rayon);padding:28px;margin:var(--pi-rythme-m) 0;max-width:72ch} /* ========================================================================== 22. PAGE DEVIS ========================================================================== */ .pi-devis{display:grid;grid-template-columns:340px 1fr;align-items:stretch;min-height:calc(100vh - var(--pi-header-h) - var(--pi-veille-h))} .pi-devis-panneau{ /* ui-ux-pro-max invoqué pour : page devis — le panneau était calé en align-self:start/height:fit-content (pensé pour "sticky" pendant le défilement) : sa bande limon s'arrêtait avant la fin du formulaire, plus haut à droite. Grid en stretch (défaut retrouvé) : le panneau court sur toute la hauteur RÉELLE de la section, quelle que soit la hauteur du formulaire à côté. */ background:var(--pi-limon);color:#fff;padding:48px 36px;position:sticky;top:calc(var(--pi-header-h) + var(--pi-veille-h)); align-self:stretch; } .pi-devis-panneau h1{color:#fff;font-size:30px;margin-bottom:24px} .pi-devis-reassurance{list-style:none;margin-top:32px;display:flex;flex-direction:column;gap:10px} .pi-devis-reassurance li{display:flex;align-items:center;gap:10px;font-size:14px;color:#EFE9DB} .pi-devis-reassurance svg{width:18px;height:18px;flex:none;color:var(--pi-alerte)} /* ui-ux-pro-max invoqué pour : page devis — vide de ~400px à droite sur 1440 (720px de formulaire dans une colonne de ~1100px) : le formulaire occupe la largeur disponible, dans une limite raisonnable de lisibilité (920px, au lieu de 720px). */ .pi-devis-corps{padding:48px 40px;max-width:920px} /* ========================================================================== 23. QUI SOMMES-NOUS ========================================================================== */ .pi-apropos-tete{position:relative;min-height:38vh;display:flex;align-items:flex-end;overflow:hidden} .pi-apropos-corps{column-count:2;column-gap:48px;padding-block:var(--pi-rythme-m)} .pi-apropos-corps h2{break-inside:avoid;break-after:avoid} .pi-apropos-corps p{break-inside:avoid} @media (max-width:760px){.pi-apropos-corps{column-count:1}} /* ========================================================================== 24. AUTEUR ========================================================================== */ .pi-auteur-tete{background:var(--pi-calcaire);padding:56px 0;text-align:center} .pi-auteur-tete .pi-avatar{width:96px;height:96px;margin-inline:auto;margin-bottom:16px} .pi-auteur-role{color:var(--pi-encre-douce);margin-bottom:12px} .pi-auteur-bio{max-width:60ch;margin-inline:auto;color:var(--pi-encre-douce)} /* ========================================================================== 25. PAGE GÉNÉRIQUE (mentions légales) ========================================================================== */ .pi-page-tete{background:var(--pi-limon);padding:20px 0} .pi-page-tete h1{color:#fff;font-size:32px;margin:0} .pi-page-corps{max-width:720px;margin-inline:auto;padding-block:var(--pi-rythme-m)} /* ========================================================================== 26. 404 ========================================================================== */ .pi-404{position:relative;min-height:60vh;display:flex;align-items:center;overflow:hidden} .pi-404 .pi-hero-eau{top:50%} .pi-404-chiffre{ font-family:var(--pi-police-titre);font-weight:800;font-size:220px;color:#fff;line-height:1; position:relative;z-index:2; } .pi-404-chiffre .pi-immerge{color:var(--pi-limon);-webkit-text-stroke:1px #fff} .pi-404-corps{position:relative;z-index:2;padding-bottom:56px} .pi-404-texte{color:#fff;font-size:19px;margin-bottom:20px} .pi-404-recherche{display:flex;gap:10px;margin-bottom:32px;max-width:460px} .pi-404-recherche input{flex:1;border-radius:var(--pi-rayon);border:0;padding:.9em 1em} /* ========================================================================== 27. RECHERCHE ========================================================================== */ .pi-recherche-forme{display:flex;gap:10px;max-width:560px;margin:24px auto 0} .pi-recherche-forme input{flex:1;border:1px solid var(--pi-encre-douce);border-radius:var(--pi-rayon);padding:.9em 1em} .pi-resultats-liste{display:flex;flex-direction:column;gap:20px;margin-top:32px} .pi-resultat{display:grid;grid-template-columns:160px 1fr;gap:20px;padding-bottom:20px;border-bottom:1px solid var(--pi-filet)} .pi-resultat img{border-radius:var(--pi-rayon);aspect-ratio:3/2;object-fit:cover} .pi-sans-resultat{background:var(--pi-calcaire);border-radius:var(--pi-rayon);padding:40px;text-align:center} /* ========================================================================== 28. MENU MOBILE BOUTON FIXE ========================================================================== */ .pi-cta-mobile-fixe{display:none} /* ========================================================================== 29. RESPONSIVE — tablette puis mobile 390px ========================================================================== */ .pi-sommaire-mobile summary{cursor:pointer;font-family:var(--pi-police-titre);font-weight:700;font-size:15px;padding:12px 0;border-top:1px solid var(--pi-filet);border-bottom:1px solid var(--pi-filet)} .pi-sommaire-mobile ol{list-style:none;counter-reset:pi-som-m;padding:12px 0} .pi-sommaire-mobile li{counter-increment:pi-som-m;padding:6px 0} .pi-sommaire-mobile a{font-size:14px;color:var(--pi-encre-douce)} .pi-sommaire-mobile a::before{content:counter(pi-som-m) " · ";font-weight:800} @media (max-width: 1080px){ .pi-grille-cartes,.pi-grille-rubriques{grid-template-columns:repeat(2,1fr)} .pi-frise-gestes{grid-template-columns:repeat(2,1fr);row-gap:40px} .pi-tuiles-chiffres{grid-template-columns:repeat(2,1fr);row-gap:32px} .pi-article-corps{grid-template-columns:1fr 280px} .pi-sommaire{display:none} .pi-sommaire-mobile{display:block!important;margin-bottom:24px} .pi-carte-somme{grid-template-columns:1fr} } @media (max-width: 760px){ html{font-size:15px} body{font-size:16px} h1{font-size:40px} h2{font-size:30px} h3{font-size:21px} .pi-contenu h2{font-size:26px} .pi-veille{font-size:12px;padding-inline:12px} .pi-nav{display:none} .pi-entete-cta{display:none} .pi-burger{display:flex;align-items:center;justify-content:center} .pi-logo{height:22px} .pi-entete-barre{padding-inline:16px} .pi-tiroir{ /* ui-ux-pro-max invoqué pour : débordement horizontal mobile (§ point 4) — width explicite + overflow-x:clip en garde-fou local, en plus du garde-fou global posé sur . */ display:block;position:fixed;inset:var(--pi-header-h) 0 0 0;width:100%;max-width:100vw; background:var(--pi-craie);overflow-x:clip; z-index:99;transform:translateX(100%);transition:transform .25s ease;overflow-y:auto; } .pi-tiroir.is-ouvert{transform:translateX(0)} .pi-tiroir ul{list-style:none;padding:12px 20px} .pi-tiroir li{border-bottom:1px solid var(--pi-filet)} .pi-tiroir a{display:block;padding:18px 0;font-family:var(--pi-police-titre);font-weight:700;font-size:19px;min-height:44px} .pi-tiroir .pi-entete-cta{display:flex;justify-content:center;margin:20px;border-radius:var(--pi-rayon)} /* ui-ux-pro-max invoqué pour : barre de devis mobile (§ point 4) — collée en bas avec la zone de sécurité iOS (encoche/home-bar) ajoutée à son propre padding ET au padding réservé par , jamais flottante au milieu de l'écran. */ .pi-cta-mobile-fixe{ display:flex;position:fixed;left:0;right:0;bottom:0;z-index:98; background:var(--pi-alerte);color:#fff;padding:14px;padding-bottom:calc(14px + env(safe-area-inset-bottom)); justify-content:center;font-weight:800;font-size:15px;min-height:52px;align-items:center; } body{padding-bottom:calc(52px + env(safe-area-inset-bottom))} .pi-hero{min-height:56vh;min-height:56svh} .pi-hero-grille{display:block} .pi-hero-texte{padding-top:0} .pi-hero-titre{font-size:36px;margin:20px 0 14px} .pi-hero-boutons{flex-direction:column} .pi-hero-boutons .pi-bouton{width:100%} .pi-hero-chiffres{flex-wrap:nowrap;overflow-x:auto;padding-bottom:8px;gap:16px} .pi-hero-chiffre{width:96px;flex:none} .pi-hero-chiffre-cercle{width:96px;height:96px} .pi-hero-triage{margin-top:24px} .pi-triage-grille{grid-template-columns:1fr 1fr} .pi-grille-cartes,.pi-grille-rubriques{grid-template-columns:1fr} .pi-frise-gestes{grid-template-columns:1fr;row-gap:32px} .pi-tuiles-chiffres{grid-template-columns:1fr 1fr;gap:24px} .pi-tuile-valeur{font-size:52px} .pi-craie-legende{grid-template-columns:1fr} .pi-carte-somme{grid-template-columns:1fr} .pi-liste-communes{max-height:none} .pi-bande-formulaire-grille{grid-template-columns:1fr;gap:24px} .pi-pied-haut{grid-template-columns:1fr 1fr;row-gap:32px} .pi-formulaire-options{grid-template-columns:1fr} .pi-formulaire-corps{padding:20px} .pi-article-corps{grid-template-columns:1fr} .pi-sidebar-article{position:static;margin-top:32px} .pi-article-une{aspect-ratio:4/3;max-height:280px} .pi-ville-ouverture{grid-template-columns:1fr} /* mobile : le formulaire avant la photo (premier écran) */ .pi-ville-texte{display:contents} .pi-ville-formulaire{order:2} .pi-ville-photo{order:3} .pi-ancrages{grid-template-columns:1fr} .pi-apropos-corps{grid-template-columns:1fr} .pi-devis{grid-template-columns:1fr} .pi-devis-panneau{position:static} .pi-devis-corps{padding:32px 20px} /* mobile : le formulaire au premier écran — panneau réduit au titre, consignes après le formulaire */ .pi-devis-panneau{padding:20px 20px 16px} .pi-devis-panneau .pi-decrue,.pi-devis-panneau .pi-devis-reassurance{display:none} .pi-devis-panneau h1{font-size:26px;margin-bottom:0} .pi-devis-corps{display:flex;flex-direction:column;padding-top:20px} .pi-devis-corps > .pi-contenu{order:2;margin:28px 0 0 !important} .pi-404-chiffre{font-size:110px} .pi-resultat{grid-template-columns:96px 1fr} } /* Illustration dans le corps de l'article */ .pi-illustration-article{margin:40px 0;padding:0} .pi-illustration-article img{display:block;width:100%;height:auto;max-height:460px;object-fit:cover;border-radius:4px} .pi-illustration-article .pi-schema-article-dessin{background:var(--pi-limon);border-radius:4px;padding:24px} .pi-illustration-article .pi-schema-article-dessin svg{display:block;width:100%;height:auto} .pi-illustration-article figcaption{margin-top:10px;font-size:.9rem;color:var(--pi-encre-douce);border-left:3px solid var(--pi-alerte);padding-left:10px}