/* * pompedeforage.com — thème pfo-sondage (v1.0.0, 03/11/2026). * « Le log de forage » : la coupe technique que le foreur remet au propriétaire — une colonne graduée en mètres, * des couches à motifs de géologue (terre, sable, calcaire, marnes, nappe), un curseur de profondeur qui descend * à chaque étape du formulaire jusqu'à l'eau. * * Mode clair UNIQUEMENT (color-scheme:light posé exprès : un navigateur réglé en sombre ne réécrit ni les * champs ni les boutons). Une seule feuille. Jetons --craie / --basalte / --nappe / --ocre / --sable / --marne, * classes .pfo-*. * * Signature visuelle : * - LOG : colonne de 88 px sur le bord de la photo du hero (5 couches à motifs, graduations 0-60 m, curseur) ; * - FICHE : le formulaire, carte blanche coiffée d'un ruban de strates, à cheval sur le log et la photo ; * - RUBAN : 4 lignes de 3 px (sable, ocre, marne, nappe) en tête des bandes Basalte et du pied de page ; * - rayons 16 px (cartes), 28 px (grande photo), 18 px (fiche, photo d'article), 999 px (boutons). * Ocre = signature uniquement (graduations, curseur, liserés), jamais un fond de bouton ni du texte courant. * Boutons d'action = Nappe (texte blanc) ; sur bande Basalte = Sable (texte Basalte). */ /* ===================== 1. JETONS ===================== */ :root{ color-scheme:light; --craie:#F2F3EE; --craie-2:#E7E9E0; --blanc:#FFFFFF; --basalte:#1F2B2E; --basalte-2:#2C3B3F; --nappe:#0E6177; --nappe-fonce:#0A4B5C; --nappe-pale:#DCEBEF; --ocre:#C38B2B; --ocre-fonce:#8A5E12; --sable:#E3C98F; --sable-fonce:#D3B56F; --sable-pale:#F4EBD3; --marne:#8FA39A; --trait:#D3D7CF; --gris:#4A5A5E; --alerte:#A3261A; --f-titre:'Pfo Chiffres','Hubot Sans','Arial Narrow',Arial,sans-serif; --f-corps:'Encode Sans',system-ui,-apple-system,'Segoe UI',sans-serif; --r-carte:16px; --r-photo:28px; --r-fiche:18px; --r-btn:999px; --r-champ:10px; --ombre:0 22px 44px -20px rgba(31,43,46,.38); --ombre-douce:0 1px 2px rgba(31,43,46,.06),0 10px 26px -14px rgba(31,43,46,.28); /* motifs de géologue (sable = points, calcaire = briques, marne = tirets, nappe = vagues) */ --p-terre:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect width='14' height='14' fill='%23425257'/%3E%3Ccircle cx='3' cy='3' r='1.1' fill='%238FA39A'/%3E%3Ccircle cx='10' cy='8' r='1.1' fill='%238FA39A'/%3E%3Ccircle cx='5' cy='12' r='.9' fill='%238FA39A'/%3E%3C/svg%3E"); --p-sable:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Crect width='14' height='14' fill='%23E3C98F'/%3E%3Ccircle cx='3' cy='4' r='1.2' fill='%23C38B2B'/%3E%3Ccircle cx='10' cy='3' r='1.2' fill='%23C38B2B'/%3E%3Ccircle cx='6' cy='9' r='1.2' fill='%23C38B2B'/%3E%3Ccircle cx='12' cy='11' r='1.2' fill='%23C38B2B'/%3E%3C/svg%3E"); --p-calcaire:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12'%3E%3Crect width='20' height='12' fill='%23EFE9D6'/%3E%3Cpath d='M0 .5H20M0 6.5H20M10 .5V6.5M0 6.5V12M20 6.5V12' stroke='%238FA39A' stroke-width='1' fill='none'/%3E%3C/svg%3E"); --p-marne:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='14'%3E%3Crect width='20' height='14' fill='%238FA39A'/%3E%3Cpath d='M2 4h7M12 10h6' stroke='%23566B66' stroke-width='1.4' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); --p-nappe:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Crect width='12' height='10' fill='%230E6177'/%3E%3Cpath d='M0 5q3-3 6 0t6 0' stroke='%23ffffff' stroke-opacity='.6' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); /* ruban de strates : 4 lignes de 3 px */ --ruban:linear-gradient(to bottom,var(--sable) 0 3px,var(--ocre) 3px 6px,var(--marne) 6px 9px,var(--nappe) 9px 12px); /* repli propre d'une photo absente : aplat Craie + motif de sable, jamais une case vide */ --motif-vide:var(--p-sable); --conteneur:1280px; --marge:40px; --aside:380px; } @media (min-width:1700px){ :root{ --conteneur:1440px; } } @media (max-width:1180px){ :root{ --marge:28px; } } @media (max-width:760px){ :root{ --marge:16px; } } /* ===================== 2. BASE ===================== */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } body{ margin:0; min-height:100vh; display:flex;flex-direction:column; background:var(--craie); color:var(--basalte); font-family:var(--f-corps); font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; overflow-x:hidden; } body > header,body > nav,body > main,body > footer{width:100%;} body > main{flex:1 0 auto;} body > footer{margin-top:auto;} img,svg{max-width:100%;display:block;} img{height:auto;} a{color:inherit;text-decoration:none;} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;} ul,ol{list-style:none;margin:0;padding:0;} h1,h2,h3,h4{font-family:var(--f-titre);font-weight:780;font-variation-settings:'wdth' 114;margin:0;color:var(--basalte);line-height:1.1;letter-spacing:0;} h3,h4{font-variation-settings:'wdth' 108;font-weight:720;} p{margin:0 0 16px;} :focus-visible{outline:3px solid var(--nappe);outline-offset:2px;} .pfo-section--basalte :focus-visible,.pfo-footer :focus-visible,.pfo-art-tete :focus-visible,.pfo-rub-tete :focus-visible,.pfo-bandeau :focus-visible{outline-color:var(--sable);} [hidden]{display:none!important;} .conteneur{max-width:calc(var(--conteneur) + 2*var(--marge));margin-inline:auto;padding-inline:var(--marge);} .pfo-accent{color:var(--nappe);} .pfo-visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} .pfo-skip{position:absolute;left:-9999px;top:0;background:var(--basalte);color:#fff;padding:12px 20px;z-index:999;border-radius:0 0 8px 0;} .pfo-skip:focus{left:0;} .pfo-lien{color:var(--nappe);font-weight:700;text-decoration:underline;text-decoration-color:rgba(14,97,119,.4);text-underline-offset:3px;} .pfo-lien:hover{text-decoration-color:var(--nappe);} /* Apparition : le contenu est TOUJOURS visible (opacity 1) ; avec JS, une section sous le pli se glisse de 16 px, rien d'autre. */ [data-pfo-apparait]{transition:transform .6s cubic-bezier(.2,.7,.2,1);} [data-pfo-apparait].est-pret{transform:translateY(16px);} [data-pfo-apparait].est-pret.est-visible{transform:none;} @media (prefers-reduced-motion:reduce){ [data-pfo-apparait],[data-pfo-apparait].est-pret{transform:none;transition:none;} } /* ===================== 3. BOUTONS ===================== */ .pfo-btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; height:50px;padding:0 24px;border-radius:var(--r-btn); font-family:var(--f-corps);font-weight:700;font-size:16px;line-height:1;white-space:nowrap; background:transparent;color:var(--basalte);border:2px solid var(--basalte); transition:transform .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease,border-color .16s ease; } .pfo-btn:hover{transform:translateY(-2px);box-shadow:0 10px 18px -12px rgba(31,43,46,.6);} .pfo-btn__fleche{display:inline-flex;transition:transform .16s ease;} .pfo-btn__fleche svg{width:18px;height:18px;} .pfo-btn:hover .pfo-btn__fleche{transform:translateX(3px);} .pfo-btn--nappe{background:var(--nappe);color:#fff;border-color:var(--nappe);} .pfo-btn--nappe:hover{background:var(--nappe-fonce);border-color:var(--nappe-fonce);} .pfo-btn--sable{background:var(--sable);color:var(--basalte);border-color:var(--sable);} .pfo-btn--sable:hover{background:var(--sable-fonce);border-color:var(--sable-fonce);} .pfo-btn--basalte{background:var(--basalte);color:#fff;border-color:var(--basalte);} .pfo-btn--basalte:hover{background:var(--basalte-2);border-color:var(--basalte-2);} .pfo-btn--contour-clair{color:#fff;border-color:rgba(255,255,255,.65);} .pfo-btn--contour-clair:hover{background:rgba(255,255,255,.1);border-color:#fff;} .pfo-btn--grand{height:56px;padding:0 30px;} .pfo-btn:disabled,.pfo-btn.est-desactive{opacity:.4;pointer-events:none;box-shadow:none;} /* ===================== 4. EN-TÊTE ===================== */ .pfo-header{position:sticky;top:0;z-index:60;background:var(--blanc);border-bottom:1px solid var(--trait);padding:12px 0;transition:box-shadow .25s ease;} .pfo-header.est-colle{box-shadow:0 12px 24px -18px rgba(31,43,46,.5);} .pfo-header__ligne{display:flex;align-items:center;gap:20px;} .pfo-logo{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:0;} .pfo-logo__symbole{width:40px;height:40px;flex:none;} .pfo-logo__symbole img,.pfo-logo__symbole svg{display:block;width:100%;height:100%;} .pfo-logo__texte{font-family:var(--f-titre);font-variation-settings:'wdth' 112;font-weight:780;font-size:19px;line-height:1;color:var(--basalte);white-space:nowrap;} .pfo-logo--clair{margin-right:0;} .pfo-logo--clair .pfo-logo__symbole{width:38px;height:38px;} .pfo-logo--clair .pfo-logo__texte{color:#fff;} .pfo-nav{display:flex;align-items:center;} .pfo-nav__liste{display:flex;gap:2px;flex-wrap:nowrap;} .pfo-nav__lien{ display:inline-flex;align-items:center;height:44px;padding:0 13px; font-weight:600;font-size:15px;white-space:nowrap;color:var(--basalte); box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .18s ease,color .18s ease; } .pfo-nav__lien:hover{box-shadow:inset 0 -3px 0 var(--basalte);} .pfo-nav__lien.est-actif{box-shadow:inset 0 -3px 0 var(--ocre);} .pfo-header__cta{height:44px;padding:0 22px;font-size:15px;flex:none;} .pfo-nav__bascule{display:none;width:44px;height:44px;border-radius:12px;background:var(--blanc);border:2px solid var(--basalte);align-items:center;justify-content:center;flex:none;} .pfo-nav__traits,.pfo-nav__traits::before,.pfo-nav__traits::after{display:block;width:18px;height:2px;background:var(--basalte);} .pfo-nav__traits{position:relative;} .pfo-nav__traits::before{content:"";position:absolute;top:-6px;} .pfo-nav__traits::after{content:"";position:absolute;top:6px;} .pfo-mobile-panel{position:fixed;inset:0;background:var(--craie);z-index:100;display:flex;flex-direction:column;padding:20px var(--marge);transform:translateY(-100%);transition:transform .3s ease;visibility:hidden;} .pfo-mobile-panel.est-ouvert{transform:none;visibility:visible;} .pfo-mobile-panel__tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;} .pfo-mobile-panel__tete .pfo-nav__bascule svg{width:22px;height:22px;} .pfo-mobile-panel__liste{display:flex;flex-direction:column;flex:1;overflow-y:auto;} .pfo-mobile-panel__lien{height:58px;display:flex;align-items:center;font-family:var(--f-titre);font-variation-settings:'wdth' 110;font-weight:740;font-size:22px;border-bottom:1px solid var(--trait);} .pfo-mobile-panel__cta{margin-top:20px;} @media (max-width:1100px){ .pfo-nav__liste{display:none;} .pfo-nav__bascule{display:flex;} .pfo-header__cta .pfo-header__cta-long{display:none;} } @media (min-width:1101px){ .pfo-header__cta-court{display:none;} } @media (max-width:480px){ .pfo-header__ligne{gap:10px;} .pfo-logo__symbole{width:34px;height:34px;} .pfo-logo__texte{font-size:16px;} .pfo-header__cta{padding:0 14px;height:42px;} .pfo-nav__bascule{width:42px;height:42px;} } /* ===================== 5. BANDES DE SECTION ===================== */ .pfo-section{position:relative;padding:clamp(36px,5.5vh,56px) 0;} .pfo-section__in{position:relative;} .pfo-section--blanc{background:var(--blanc);border-block:1px solid var(--trait);} .pfo-section--craie2{background:var(--craie-2);border-block:1px solid var(--trait);} .pfo-section--basalte{background:var(--basalte);color:rgba(255,255,255,.88);} .pfo-section--basalte h2,.pfo-section--basalte h3{color:#fff;} .pfo-section--basalte::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--ruban);} .pfo-section__tete{margin-bottom:28px;display:flex;flex-direction:column;align-items:flex-start;gap:10px;} .pfo-section__tete--ligne{flex-direction:row;align-items:baseline;justify-content:space-between;gap:12px 40px;flex-wrap:wrap;} .pfo-section__tete--ligne .pfo-section__chapo{margin:0;} .pfo-section h2,.pfo-zone__texte > h2{font-size:clamp(26px,2.5vw,38px);line-height:1.08;} .pfo-section__chapo{color:var(--gris);font-size:18px;max-width:46em;margin:0 0 14px;} .pfo-section--basalte .pfo-section__chapo{color:rgba(255,255,255,.82);} .pfo-panneau-etroit{max-width:calc(900px + 2*var(--marge));} .pfo-lieu{display:inline-block;margin:0 0 12px;font:700 15px var(--f-titre);color:var(--sable);} /* Cadre photo arrondi, bord bas liseré de strates : repli propre si la photo manque */ .pfo-cadre-photo{position:relative;border-radius:var(--r-photo);overflow:hidden;background:var(--motif-vide);box-shadow:var(--ombre);} .pfo-cadre-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--ruban);} .pfo-cadre-photo img{display:block;width:100%;height:100%;object-fit:cover;} /* ===================== 6. HERO : LE LOG DE FORAGE ET LA FICHE ===================== */ .pfo-hero{position:relative;background:var(--craie);overflow:hidden;overflow:clip;--col-texte:clamp(420px,38vw,720px);} .pfo-hero__in{ max-width:calc(var(--conteneur) + 2*var(--marge));margin-inline:auto;padding:28px var(--marge) 36px; display:grid;grid-template-columns:minmax(0,var(--col-texte)) minmax(0,1fr);column-gap:32px;align-items:center; } .pfo-hero__texte{padding-block:8px;position:relative;z-index:3;} .pfo-hero__titre{font-size:clamp(34px,3.45vw,72px);line-height:1.04;margin:0 0 18px;text-wrap:balance;font-weight:790;font-variation-settings:'wdth' 116;} .pfo-hero__titre--ville{font-size:clamp(30px,2.8vw,50px);line-height:1.06;} .pfo-hero__chapo{font-size:18px;color:var(--gris);max-width:30em;margin:0 0 22px;text-wrap:pretty;} .pfo-hero__cta{display:none;} .pfo-hero__rassure{display:flex;flex-direction:column;gap:8px;margin:0;font-size:15px;font-weight:600;} .pfo-hero__rassure li{display:flex;align-items:center;gap:10px;} .pfo-hero__rassure svg{width:20px;height:20px;color:var(--nappe);flex:none;} .pfo-hero__zone{height:540px;} /* pas de position: la photo se cale sur le hero entier (bord à bord) */ .pfo-hero__fiche{position:relative;z-index:3;width:400px;max-width:100%;margin-top:20px;} /* La photo, bord à bord à droite, arrondie côté gauche ; le log court sur son bord gauche */ .pfo-hero__visuel{position:absolute;top:0;right:0;bottom:0;width:max(46%,520px);z-index:1;border-radius:var(--r-photo) 0 0 var(--r-photo);overflow:hidden;background:var(--motif-vide);} .pfo-hero__photo{position:absolute;inset:0;} .pfo-hero__photo picture,.pfo-hero__photo img{display:block;width:100%;height:100%;} .pfo-hero__photo img{object-fit:cover;object-position:62% 50%;} .pfo-credit-photo{position:absolute;right:8px;bottom:6px;z-index:6;max-width:60%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(31,43,46,.86);color:#fff;font-size:11px;line-height:1.3;padding:3px 10px;border-radius:999px;} .pfo-credit-photo a{color:#fff;text-decoration:underline;} .pfo-hero--qsn .pfo-hero__zone{height:440px;} .pfo-hero--qsn .pfo-hero__texte{padding-block:0;} /* LE LOG : règle graduée + 5 couches + curseur */ .pfo-log{position:absolute;left:0;top:0;bottom:0;width:88px;display:flex;z-index:2;background:var(--basalte);box-shadow:6px 0 18px -8px rgba(31,43,46,.55);--p:21.67;} .pfo-log__regle{position:relative;flex:0 0 40px;background:var(--basalte);border-right:2px solid var(--ocre);} .pfo-log__grad{position:absolute;left:0;right:0;top:var(--m);transform:translateY(-50%);padding-left:5px;font:640 11px/1 var(--f-titre);font-variation-settings:'wdth' 100;font-variant-numeric:tabular-nums lining-nums;color:var(--sable);white-space:nowrap;} .pfo-log__grad::after{content:"";position:absolute;right:0;top:50%;width:8px;height:1.5px;background:var(--ocre);} .pfo-log__grad:first-child{transform:none;margin-top:5px;} .pfo-log__grad:last-child{transform:translateY(-100%);margin-top:-5px;} .pfo-log__strates{flex:1;display:flex;flex-direction:column;min-width:0;} .pfo-log__strate{display:block;border-bottom:1px solid rgba(31,43,46,.45);} .pfo-log__strate:last-child{border-bottom:0;} .pfo-log__strate--terre{background:var(--p-terre);} .pfo-log__strate--sable{background:var(--p-sable);} .pfo-log__strate--calcaire{background:var(--p-calcaire);} .pfo-log__strate--marne{background:var(--p-marne);} .pfo-log__strate--nappe{background:var(--p-nappe);} .pfo-log__curseur{position:absolute;left:0;right:0;top:calc(var(--p) * 1%);height:0;border-top:2px solid var(--ocre);z-index:3;transition:top .6s cubic-bezier(.3,.7,.2,1);} .pfo-log__curseur b{position:absolute;left:0;top:-9px;width:40px;height:18px;padding-right:4px;text-align:center;background:var(--sable);color:var(--basalte);font:720 11px/18px var(--f-titre);font-variation-settings:'wdth' 100;font-variant-numeric:tabular-nums lining-nums;border-radius:0 9px 9px 0;white-space:nowrap;} .pfo-log__curseur::after{content:"";position:absolute;right:14px;top:-11px;border:7px solid transparent;border-top:10px solid var(--ocre);border-bottom:0;} @media (prefers-reduced-motion:no-preference){ .pfo-log__curseur{animation:pfo-descend .8s cubic-bezier(.3,.7,.2,1) .5s backwards;} } @keyframes pfo-strate{from{clip-path:inset(0 0 100% 0);}to{clip-path:inset(0);}} @keyframes pfo-descend{from{top:0;}} /* Page commune : la commune est située sur la carte */ .pfo-ville-situe{display:flex;align-items:center;gap:16px;background:var(--blanc);border:1px solid var(--trait);border-left:4px solid var(--ocre);border-radius:var(--r-carte);padding:12px 18px 12px 12px;margin-top:22px;max-width:500px;} .pfo-ville-situe .pfo-mini-carte{width:120px;flex:none;} .pfo-ville-situe__texte{display:flex;flex-direction:column;gap:3px;font-size:15px;color:var(--gris);line-height:1.4;} .pfo-ville-situe__texte strong{font:740 20px var(--f-titre);color:var(--basalte);} .pfo-mini-carte svg{width:100%;height:auto;} .pfo-mini-carte svg [data-slug]{fill:var(--nappe-pale);stroke:var(--nappe);stroke-width:1;} .pfo-mini-carte svg [data-slug].est-active{fill:var(--nappe);stroke:var(--nappe-fonce);} /* Coupe : relevés en couches à motifs (rubrique, qui sommes-nous) */ .pfo-coupe{display:flex;flex-direction:column;gap:0;margin:0;border-radius:var(--r-carte);overflow:hidden;box-shadow:var(--ombre);} .pfo-coupe__couche{display:flex;align-items:center;padding:10px 14px;min-height:62px;border-bottom:1px solid rgba(31,43,46,.35);} .pfo-coupe__couche:last-child{border-bottom:0;} .pfo-coupe__couche--1{background:var(--p-sable);} .pfo-coupe__couche--2{background:var(--p-calcaire);} .pfo-coupe__couche--3{background:var(--p-marne);} .pfo-coupe__carte{display:flex;align-items:baseline;justify-content:space-between;gap:14px;width:100%;background:var(--blanc);color:var(--basalte);border-radius:10px;padding:7px 14px;box-shadow:0 2px 8px -4px rgba(31,43,46,.4);} .pfo-coupe__lib{font-size:13.5px;color:var(--gris);} .pfo-coupe__carte strong{font:760 22px/1.1 var(--f-titre);font-variation-settings:'wdth' 104;font-variant-numeric:tabular-nums lining-nums;color:var(--basalte);text-align:right;} .pfo-coupe--ligne{flex-direction:row;max-width:520px;margin-top:22px;} .pfo-coupe--ligne .pfo-coupe__couche{flex:1;min-width:0;padding:8px;border-bottom:0;border-right:1px solid rgba(31,43,46,.35);} .pfo-coupe--ligne .pfo-coupe__couche:last-child{border-right:0;} .pfo-coupe--ligne .pfo-coupe__carte{flex-direction:column;align-items:flex-start;gap:2px;padding:6px 10px;} @media (max-width:1180px){ .pfo-hero__in{grid-template-columns:minmax(0,1fr);padding:22px var(--marge) 36px;row-gap:18px;} .pfo-hero__texte{padding-block:0;} .pfo-hero__cta{display:inline-flex;margin-bottom:14px;} .pfo-hero__zone,.pfo-hero--qsn .pfo-hero__zone{height:auto;display:flex;flex-direction:column;align-items:center;} .pfo-hero__visuel{position:relative;inset:auto;width:100%;max-width:760px;height:clamp(220px,32vw,320px);border-radius:20px;flex:none;} .pfo-hero__fiche{width:100%;max-width:520px;margin:-56px auto 0;} .pfo-hero--qsn .pfo-hero__fiche{display:none;} } @media (max-width:760px){ .pfo-hero__in{padding-top:14px;padding-bottom:28px;row-gap:10px;} .pfo-hero__titre{font-size:clamp(30px,8.6vw,38px);margin-bottom:12px;} .pfo-hero__titre--ville{font-size:clamp(26px,7.6vw,34px);} .pfo-hero__chapo{display:none;} .pfo-hero__rassure{display:none;} .pfo-hero__cta{margin-bottom:0;width:100%;} .pfo-hero__visuel{height:220px;} .pfo-hero__fiche{margin-top:-30px;} .pfo-log{width:40px;} .pfo-log__regle,.pfo-log__curseur b{display:none;} .pfo-log__curseur::after{right:auto;left:14px;} .pfo-ville-situe{display:none;} .pfo-coupe--ligne{margin-top:14px;} .pfo-coupe--ligne .pfo-coupe__couche{padding:6px;} } /* Barre basse collante (mobile) */ .pfo-barre-collante{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--blanc);border-top:1px solid var(--trait);box-shadow:0 -10px 24px -14px rgba(31,43,46,.35);padding:10px var(--marge);display:none;} .pfo-barre-collante .pfo-btn{width:100%;} @media (max-width:760px){ .pfo-barre-collante{display:flex;} .pfo-footer{padding-bottom:72px;} } /* ===================== 7. LA FICHE DE FORAGE (FORMULAIRE) ===================== */ .pfo-form{ position:relative;overflow:hidden;color:var(--basalte); background:var(--blanc); border:1px solid var(--trait);border-radius:var(--r-fiche); box-shadow:var(--ombre);padding:30px 28px 24px; } .pfo-form::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;background:var(--ruban);z-index:2;} .pfo-form > *{position:relative;z-index:1;} .pfo-form--pleine{padding:36px 34px 30px;} .pfo-form--compacte{padding:30px 26px 22px;} .pfo-form.est-flash{box-shadow:0 0 0 4px var(--sable),var(--ombre);} .pfo-form__piege{position:absolute!important;left:-9999px;} .pfo-form__entete{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;min-height:22px;} .pfo-form__compteur{font:640 14px var(--f-titre);font-variation-settings:'wdth' 108;color:var(--gris);} .pfo-form__retour{font-size:13px;color:var(--nappe);font-weight:700;text-decoration:underline;text-underline-offset:3px;display:none;} .pfo-form:not([data-pas="0"]) .pfo-form__retour{display:inline-flex;} .pfo-form__progression{display:flex;gap:4px;margin-bottom:6px;} .pfo-form__segment{flex:1;height:6px;border-radius:999px;background:#D6DAD2;overflow:hidden;} .pfo-form__segment i{display:block;height:100%;width:0;background:var(--nappe);transition:width .4s ease;border-radius:999px;} .pfo-form__segment.est-fait i{width:100%;background:var(--nappe);} .pfo-form__segment.est-actif i{width:100%;background:var(--ocre);} .pfo-form__noms-etapes{display:flex;gap:4px;margin-bottom:14px;} .pfo-form__nom-etape{flex:1;font-size:12px;color:var(--gris);text-align:center;border-radius:6px;padding:1px 2px;} .pfo-form__nom-etape.est-actif{color:var(--basalte);font-weight:700;background:var(--sable);} .pfo-form__etape{display:none;} .pfo-form__etape.est-active{display:block;animation:pfo-etape .22s cubic-bezier(.2,.7,.2,1);} @keyframes pfo-etape{from{transform:translateX(12px);}to{transform:none;}} @media (prefers-reduced-motion:reduce){ .pfo-form__etape.est-active{animation:none;} } .pfo-form__question{font:740 22px/1.15 var(--f-titre);font-variation-settings:'wdth' 112;color:var(--basalte);margin:0 0 14px;} .pfo-form--compacte .pfo-form__question{font-size:19px;margin-bottom:12px;} .pfo-form__tuiles{display:grid;gap:10px;margin-bottom:6px;} .pfo-form__tuiles--grille2{grid-template-columns:1fr 1fr;} .pfo-form__tuile{ position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:8px; min-height:84px;padding:12px 14px;border-radius:12px;color:var(--basalte); background:var(--blanc);border:1.5px solid #B7BEB5;text-align:left; transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease; } .pfo-form--compacte .pfo-form__tuile{min-height:56px;flex-direction:row;align-items:center;gap:10px;padding:8px 10px;} .pfo-form__tuile:hover{transform:translateY(-2px);border-color:var(--basalte);box-shadow:0 8px 16px -12px rgba(31,43,46,.6);} .pfo-form__tuile.est-choisi{border-color:var(--nappe);box-shadow:inset 0 0 0 1.5px var(--nappe);background:var(--nappe-pale);} .pfo-form__tuile__icone{width:36px;height:36px;border-radius:10px;background:var(--sable-pale);color:var(--ocre-fonce);display:flex;align-items:center;justify-content:center;flex:none;} .pfo-form--compacte .pfo-form__tuile__icone{width:30px;height:30px;} .pfo-form__tuile__icone svg{width:22px;height:22px;} .pfo-form--compacte .pfo-form__tuile__icone svg{width:18px;height:18px;} .pfo-form__tuile__texte{font-weight:700;font-size:15px;line-height:1.25;color:var(--basalte);} .pfo-form--compacte .pfo-form__tuile__texte{font-size:13.5px;} .pfo-form__tuile__coche{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;background:var(--nappe);color:#fff;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .15s cubic-bezier(.34,1.56,.64,1);} .pfo-form__tuile.est-choisi .pfo-form__tuile__coche{transform:scale(1);} .pfo-form__tuile__coche svg{width:12px;height:12px;} /* Champs : étiquette, valeur, unité */ .pfo-champ{margin-bottom:12px;min-width:0;position:relative;} .pfo-champ label,.pfo-champ__etiquette{display:block;font-size:13px;font-weight:700;margin-bottom:4px;color:var(--basalte);} .pfo-champ input,.pfo-champ select,.pfo-champ textarea{ width:100%;height:46px;border-radius:var(--r-champ);border:1.5px solid #AEB7B0; padding:0 14px;font:16px var(--f-corps);background:#fff;color:var(--basalte); } .pfo-champ select{appearance:none;-webkit-appearance:none;padding-right:34px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2B2E' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center/16px;} .pfo-champ--unite input{padding-right:62px;} .pfo-champ__unite{position:absolute;right:1.5px;bottom:1.5px;height:43px;min-width:52px;padding:0 10px;display:flex;align-items:center;justify-content:center;font:720 14px var(--f-titre);color:var(--nappe-fonce);background:var(--nappe-pale);border-radius:0 9px 9px 0;pointer-events:none;} .pfo-champ input:focus,.pfo-champ select:focus,.pfo-champ textarea:focus{outline:none;border-color:var(--nappe);box-shadow:0 0 0 4px rgba(14,97,119,.2);} .pfo-champ input::placeholder{color:#6E7B7F;} .pfo-form__rangee{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;} .pfo-form__segmente{display:flex;gap:6px;flex-wrap:wrap;} .pfo-form__segmente button{flex:1;min-width:84px;height:44px;border-radius:var(--r-champ);border:1.5px solid #AEB7B0;background:#fff;color:var(--basalte);font-weight:700;font-size:14px;transition:background .15s,border-color .15s,color .15s;} .pfo-form__segmente button:hover{border-color:var(--basalte);} .pfo-form__segmente button.est-choisi{background:var(--basalte);border-color:var(--basalte);color:#fff;} .pfo-form__pilules-rapides{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0 14px;} .pfo-form__pilule{height:38px;padding:0 14px;border-radius:999px;background:var(--blanc);color:var(--basalte);font-size:13.5px;font-weight:700;border:1.5px solid #AEB7B0;} .pfo-form__pilule:hover{border-color:var(--basalte);} .pfo-form__pilule.est-choisi{background:var(--basalte);color:#fff;border-color:var(--basalte);} .pfo-form__pilule--autre{border-style:dashed;color:var(--nappe-fonce);} .pfo-form__indication{display:block;color:var(--gris);font-size:13px;margin:0 0 10px;} .pfo-form__erreur{display:block;color:var(--alerte);font-size:13px;font-weight:600;margin:0 0 8px;} .pfo-form__case{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--basalte);margin-bottom:8px;line-height:1.35;} .pfo-form__case input{margin-top:2px;width:18px;height:18px;flex:none;accent-color:var(--nappe);} .pfo-form__case--consentement{font-size:12.5px;color:var(--gris);} .pfo-form__nav{display:flex;gap:10px;align-items:center;margin-top:10px;} .pfo-form__nav .pfo-btn{height:48px;} .pfo-form__nav .pfo-btn:not(.pfo-form__bouton){padding:0 18px;border-color:#AEB7B0;} .pfo-form__bouton{flex:1;min-width:0;} .pfo-form .pfo-btn--nappe{color:#fff;} .pfo-form .pfo-btn:disabled,.pfo-form .pfo-btn.est-desactive{opacity:1;background:var(--craie-2);border-color:#AEB7B0;color:var(--gris);box-shadow:none;pointer-events:none;} /* Étapes « forage » et « coordonnées » compactes : ne débordent jamais de la fiche */ .pfo-form [data-etape="coordonnees"] .pfo-champ{margin-bottom:9px;} .pfo-form [data-etape="coordonnees"] .pfo-champ input{height:42px;} .pfo-form [data-etape="coordonnees"] .pfo-form__question{margin-bottom:10px;} .pfo-form [data-etape="forage"] .pfo-champ{margin-bottom:10px;} .pfo-form__confirmation{display:none;text-align:left;padding:10px 0;} .pfo-form__confirmation.est-visible{display:block;} .pfo-form__confirmation-cercle{width:52px;height:52px;border-radius:50%;background:var(--nappe);color:#fff;display:flex;align-items:center;justify-content:center;margin:0 0 14px;} .pfo-form__confirmation-cercle svg{width:26px;height:26px;} .pfo-form__confirmation h3{font:740 24px var(--f-titre);} .pfo-form__recap{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0;} .pfo-form__recap span{background:var(--craie);border:1px solid var(--trait);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;} .pfo-form__suite{max-width:420px;margin:16px 0 0;display:flex;flex-direction:column;gap:10px;} .pfo-form__suite li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--gris);} .pfo-form__suite svg{width:20px;height:20px;color:var(--nappe);flex:none;} @media (max-width:760px){ .pfo-form,.pfo-form--pleine,.pfo-form--compacte{padding:26px 16px 18px;} .pfo-form__question{font-size:20px;margin-bottom:10px;} .pfo-form__tuile{min-height:72px;padding:10px 12px;} .pfo-form__tuile__texte{font-size:14px;} .pfo-form__noms-etapes{margin-bottom:10px;} .pfo-form__rangee{gap:0 8px;} .pfo-form [data-etape="coordonnees"] .pfo-champ label{font-size:12.5px;} .pfo-form [data-etape="coordonnees"] .pfo-champ input{height:40px;padding:0 10px;} .pfo-form__case{font-size:13px;margin-bottom:6px;} .pfo-form__case--consentement{font-size:12px;} .pfo-form__nav .pfo-btn{height:46px;} .pfo-form__nav .pfo-btn:not(.pfo-form__bouton){padding:0 14px;} .pfo-form__bouton{font-size:15px;padding:0 12px;} .pfo-form__segmente button{min-width:0;font-size:13px;padding:0 6px;} } /* ===================== 8. LA NAPPE SOUS LES 20 COMMUNES ===================== */ .pfo-zone__grille{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:48px;align-items:center;} .pfo-zone__grille > *{min-width:0;} .pfo-zone__grille--sans-carte{grid-template-columns:1fr;} .pfo-zone__carte-wrap{position:relative;background:var(--craie);border:1px solid var(--trait);border-radius:var(--r-carte);box-shadow:var(--ombre-douce);padding:14px 14px 10px;} .pfo-zone__carte-wrap svg{width:100%;height:auto;max-height:420px;display:block;margin:0 auto;} .pfo-zone__carte-wrap svg g[data-dep] path{stroke:rgba(255,255,255,.55);stroke-width:.6;vector-effect:non-scaling-stroke;cursor:default;} .pfo-zone__carte-wrap svg g[data-dep="77"] path{fill:#DCD7BF;} .pfo-zone__carte-wrap svg g[data-dep="91"] path{fill:#C3CCC3;} .pfo-zone__carte-wrap svg g[data-dep]{filter:drop-shadow(1.4px 0 0 var(--basalte)) drop-shadow(-1.4px 0 0 var(--basalte)) drop-shadow(0 1.4px 0 var(--basalte)) drop-shadow(0 -1.4px 0 var(--basalte));} .pfo-zone__carte-wrap svg .carte-communes path{fill:var(--nappe);stroke:var(--basalte);stroke-width:1.2;vector-effect:non-scaling-stroke;cursor:pointer;transition:fill .15s ease;} .pfo-zone__carte-wrap svg .carte-communes path.est-survolee,.pfo-zone__carte-wrap svg .carte-communes path:hover,.pfo-zone__carte-wrap svg .carte-communes path:focus-visible{fill:var(--ocre);} .pfo-zone__carte-wrap svg .carte-communes path.est-choisie{fill:var(--ocre);stroke-width:2.4;} .pfo-zone__carte-wrap svg .carte-communes path:focus-visible{outline:none;stroke:var(--basalte);stroke-width:3;} .pfo-zone__legende{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--basalte);margin:6px 0 0;justify-content:center;} .pfo-zone__puce{width:14px;height:14px;border-radius:50%;background:var(--nappe);box-shadow:0 0 0 2px var(--basalte);flex:none;} .pfo-zone__legende-deps{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 20px;margin:4px 0 0;font-size:14px;font-weight:600;color:var(--basalte);} .pfo-zone__legende-deps li{display:inline-flex;align-items:center;gap:8px;} .pfo-zone__legende-deps i{display:inline-block;width:18px;height:14px;border-radius:3px;border:2px solid var(--basalte);flex:none;} .pfo-zone__legende-deps .d77{background:#DCD7BF;} .pfo-zone__legende-deps .d91{background:#C3CCC3;} .pfo-zone__texte{min-width:0;} .pfo-zone__fiche{display:flex;gap:14px;align-items:stretch;background:var(--craie);border:1px solid var(--trait);border-left:5px solid var(--ocre);border-radius:var(--r-carte);padding:12px 16px 12px 12px;margin:2px 0 14px;min-height:112px;} .pfo-zone__fiche-coupe{flex:0 0 44px;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(31,43,46,.25);} .pfo-zone__fiche-coupe i{display:block;flex:1;} .pfo-zone__fiche-coupe i:nth-child(1){background:var(--p-sable);} .pfo-zone__fiche-coupe i:nth-child(2){background:var(--p-calcaire);} .pfo-zone__fiche-coupe i:nth-child(3){background:var(--p-marne);} .pfo-zone__fiche-coupe i:nth-child(4){background:var(--p-nappe);} .pfo-zone__fiche-corps{display:flex;flex-direction:column;gap:3px;min-width:0;} .pfo-zone__fiche-corps p{margin:0;} .pfo-zone__fiche-nom{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;} .pfo-zone__fiche-nom strong{font:760 21px/1.15 var(--f-titre);font-variation-settings:'wdth' 108;color:var(--basalte);} .pfo-zone__fiche-nom span{font-size:14px;color:var(--gris);} .pfo-zone__fiche-nappe{font-size:15px;line-height:1.45;color:var(--basalte);} .pfo-zone__fiche-corps .pfo-lien{font-size:14.5px;} .pfo-zone__liste{columns:3;column-gap:10px;margin:0;} .pfo-zone__liste li{break-inside:avoid;margin:0 0 5px;} .pfo-zone__liste a,.pfo-zone__liste span[data-slug]{display:flex;align-items:center;justify-content:space-between;gap:6px;min-height:34px;padding:3px 10px;background:var(--craie);border:1px solid var(--trait);border-radius:10px;font-weight:600;font-size:14px;line-height:1.2;transition:background .15s,border-color .15s;} .pfo-zone__liste a:hover{background:var(--sable-pale);border-color:var(--basalte);} .pfo-zone__liste .est-choisie{border-color:var(--nappe);background:var(--nappe-pale);} .pfo-zone__liste span[data-slug]{color:var(--gris);} .pfo-zone__liste small{flex:none;font:700 11px/1 var(--f-titre);font-variant-numeric:tabular-nums lining-nums;color:var(--gris);background:var(--craie-2);border-radius:999px;padding:3px 6px;} @media (max-width:980px){ .pfo-zone__grille{grid-template-columns:1fr;gap:26px;} } @media (max-width:700px){ .pfo-zone__liste{columns:2;} } @media (max-width:420px){ .pfo-zone__liste{columns:1;} } /* ===================== 9. CALCULATEUR DE HMT ===================== */ .pfo-calc{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px;align-items:center;} .pfo-calc > *{min-width:0;} .pfo-calc__champs{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;margin-top:6px;} .pfo-calc .pfo-champ label{color:#fff;font-weight:600;line-height:1.3;min-height:34px;display:flex;align-items:flex-end;} .pfo-calc .pfo-champ input{border-color:transparent;} .pfo-calc .pfo-champ input:focus{border-color:var(--sable);box-shadow:0 0 0 4px rgba(227,201,143,.35);} .pfo-calc__resultat{background:var(--basalte-2);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-fiche);padding:22px 26px 22px;box-shadow:0 22px 44px -22px rgba(0,0,0,.6);} .pfo-calc__lib{margin:0;font:700 15px var(--f-titre);color:var(--sable);} .pfo-calc__val{display:flex;align-items:baseline;gap:8px;margin:2px 0 0;} .pfo-calc__val strong{font:800 clamp(52px,5vw,72px)/1 var(--f-titre);font-variation-settings:'wdth' 108;font-variant-numeric:tabular-nums lining-nums;color:#fff;} .pfo-calc__val span{font:720 24px var(--f-titre);color:var(--sable);} .pfo-calc__barre{display:flex;height:14px;border-radius:999px;overflow:hidden;gap:2px;margin:12px 0 12px;background:rgba(255,255,255,.08);} .pfo-calc__barre i{display:block;flex:1 1 0;min-width:3px;transition:flex-grow .3s ease;} .pfo-calc__barre i[data-seg="niveau"],.pfo-calc__legende [data-leg="niveau"] i{background:var(--sable);} .pfo-calc__barre i[data-seg="denivele"],.pfo-calc__legende [data-leg="denivele"] i{background:var(--ocre);} .pfo-calc__barre i[data-seg="tuyau"],.pfo-calc__legende [data-leg="tuyau"] i{background:var(--marne);} .pfo-calc__barre i[data-seg="pression"],.pfo-calc__legende [data-leg="pression"] i{background:#4FA6BB;} .pfo-calc__legende{display:flex;flex-direction:column;gap:5px;margin:0 0 12px;} .pfo-calc__legende li{display:flex;align-items:center;gap:10px;font-size:14.5px;color:rgba(255,255,255,.9);} .pfo-calc__legende li i{display:block;width:12px;height:12px;border-radius:3px;flex:none;} .pfo-calc__legende b{margin-left:auto;font:720 15px var(--f-titre);font-variant-numeric:tabular-nums lining-nums;color:#fff;} .pfo-calc__note{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.8);margin:0 0 14px;} .pfo-calc__note a{color:var(--sable);text-decoration:underline;text-underline-offset:3px;} .pfo-calc__resultat .pfo-btn{width:100%;} @media (max-width:1000px){ .pfo-calc{grid-template-columns:1fr;gap:26px;} } @media (max-width:520px){ .pfo-calc__champs{grid-template-columns:1fr;} .pfo-calc .pfo-champ label{min-height:0;} .pfo-calc__resultat{padding:20px 18px;} } /* ===================== 10. GUIDES ET CARTES ===================== */ .pfo-guides{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;} .pfo-guides__rubriques{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:22px 0 0;} .pfo-pilule-lien{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 18px;border-radius:999px;background:var(--blanc);border:1px solid var(--trait);border-left:5px solid var(--marne);color:var(--basalte);font-weight:700;font-size:15px;transition:background .2s ease,border-color .2s ease;} .pfo-pilule-lien--comprendre{border-left-color:var(--sable-fonce);} .pfo-pilule-lien--choisir{border-left-color:var(--marne);} .pfo-pilule-lien--installer-et-depanner{border-left-color:var(--nappe);} .pfo-pilule-lien span{background:var(--basalte);color:#fff;border-radius:999px;min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-variant-numeric:tabular-nums lining-nums;} .pfo-pilule-lien:hover{background:var(--sable-pale);} .pfo-carte{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--trait);border-left:5px solid var(--marne);border-radius:var(--r-carte);overflow:hidden;box-shadow:var(--ombre-douce);transition:transform .2s ease,box-shadow .2s ease;} .pfo-carte--comprendre{border-left-color:var(--sable-fonce);} .pfo-carte--choisir{border-left-color:var(--marne);} .pfo-carte--installer-et-depanner{border-left-color:var(--nappe);} .pfo-carte:hover{transform:translateY(-2px);box-shadow:var(--ombre);} .pfo-carte__photo{position:relative;aspect-ratio:16/10;max-height:230px;width:100%;overflow:hidden;background:var(--motif-vide);} .pfo-carte__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .pfo-carte__pastille{position:absolute;left:12px;top:12px;background:var(--basalte);color:#fff;font:660 12.5px var(--f-titre);padding:5px 11px;border-radius:999px;} .pfo-carte__corps{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1 1 auto;} .pfo-carte__titre{font:740 20px/1.2 var(--f-titre);font-variation-settings:'wdth' 108;} .pfo-carte:hover .pfo-carte__titre{text-decoration:underline;text-decoration-color:var(--ocre);text-underline-offset:4px;text-decoration-thickness:2px;} .pfo-carte__extrait{color:var(--gris);font-size:15px;margin:0;} .pfo-carte__meta{color:var(--gris);font-size:13px;margin-top:auto;padding-top:6px;} .pfo-liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;} .pfo-liste--deux{grid-template-columns:repeat(2,minmax(0,1fr));} .pfo-liste--un{grid-template-columns:1fr;} .pfo-liste--un .pfo-carte{flex-direction:row;} .pfo-liste--un .pfo-carte__photo{flex:0 0 52%;aspect-ratio:auto;max-height:none;min-height:clamp(280px,26vw,360px);} .pfo-liste--un .pfo-carte__corps{justify-content:center;gap:12px;padding:24px clamp(20px,3vw,44px);} .pfo-liste--un .pfo-carte__titre{font-size:clamp(26px,2.5vw,36px);} .pfo-liste--un .pfo-carte__extrait{font-size:17px;} .pfo-liste--un .pfo-carte__meta{margin-top:0;} .pfo-rubrique-vide{padding:30px 0;color:var(--gris);} @media (max-width:980px){ .pfo-liste{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:640px){ .pfo-liste,.pfo-liste--deux{grid-template-columns:1fr;} .pfo-liste--un .pfo-carte{flex-direction:column;} .pfo-liste--un .pfo-carte__photo{flex:none;min-height:0;aspect-ratio:16/10;} } /* Grilles de rubrique sans carte orpheline */ @media (min-width:981px){ .pfo-liste:has(> .pfo-carte:last-child:nth-child(3n+1)) > .pfo-carte:first-child{grid-column:1/-1;flex-direction:row;} .pfo-liste:has(> .pfo-carte:last-child:nth-child(3n+1)) > .pfo-carte:first-child .pfo-carte__photo{flex:0 0 52%;aspect-ratio:auto;max-height:280px;min-height:230px;} .pfo-liste:has(> .pfo-carte:last-child:nth-child(3n+2)) > .pfo-carte:first-child{grid-column:span 2;flex-direction:row;} .pfo-liste:has(> .pfo-carte:last-child:nth-child(3n+2)) > .pfo-carte:first-child .pfo-carte__photo{flex:0 0 50%;aspect-ratio:auto;max-height:none;min-height:100%;} } @media (min-width:641px) and (max-width:980px){ .pfo-liste:has(> .pfo-carte:last-child:nth-child(odd)) > .pfo-carte:first-child{grid-column:1/-1;} } .pfo-communes-grille{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;} .pfo-communes-grille--trois{grid-template-columns:repeat(3,minmax(0,1fr));} .pfo-carte--commune{border-left-color:var(--nappe);} .pfo-carte--commune .pfo-carte__photo{aspect-ratio:3/2;max-height:170px;} .pfo-carte--commune .pfo-carte__corps{padding:12px 14px 14px;} .pfo-carte--commune .pfo-carte__titre{font-size:17px;} @media (max-width:1180px){ .pfo-communes-grille{grid-template-columns:repeat(4,minmax(0,1fr));} } @media (max-width:860px){ .pfo-communes-grille{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:620px){ .pfo-communes-grille,.pfo-communes-grille--trois{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .pfo-carte--commune .pfo-carte__titre{font-size:15px;} } /* ===================== 11. DU FORAGE AU ROBINET ===================== */ .pfo-parcours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;} .pfo-parcours__etape{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--craie);border:1px solid var(--trait);border-radius:var(--r-carte);overflow:hidden;padding-bottom:14px;min-width:0;} .pfo-parcours__photo{display:block;height:84px;background:var(--motif-vide);overflow:hidden;position:relative;} .pfo-parcours__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .pfo-parcours__prof{position:relative;align-self:flex-start;display:inline-flex;align-items:center;height:28px;padding:0 12px;margin:-14px 0 0 16px;border-radius:999px;background:var(--basalte);box-shadow:0 0 0 3px var(--craie);} .pfo-parcours__prof::before{content:attr(data-n);color:var(--sable);font:740 14px/28px var(--f-titre);font-variation-settings:'wdth' 100;font-variant-numeric:tabular-nums lining-nums;} .pfo-parcours__etape h3{font-size:19px;line-height:1.2;padding:0 16px;} .pfo-parcours__etape p{margin:0;padding:0 16px;font-size:14.5px;line-height:1.45;color:var(--gris);} .pfo-parcours__etape .pfo-lien{padding:0 16px;font-size:14.5px;align-self:flex-start;} @media (max-width:1000px){ .pfo-parcours{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:620px){ .pfo-parcours{grid-template-columns:1fr;gap:14px;} } /* ===================== 12. FAQ DE L'ACCUEIL ET QUESTIONS COMMUNES ===================== */ .pfo-faq-grille{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start;} .pfo-faq-grille > *{min-width:0;} .pfo-faq-liste,.pfo-faq{display:flex;flex-direction:column;gap:12px;} .pfo-faq{margin-top:20px;} .pfo-faq-item{border:1px solid var(--trait);border-left:5px solid var(--sable-fonce);border-radius:12px;padding:0;background:var(--blanc);overflow:hidden;} .pfo-faq-item[open]{border-left-color:var(--nappe);} .pfo-faq-item summary{cursor:pointer;font-weight:700;font-size:16px;list-style:none;padding:15px 56px 15px 20px;position:relative;} .pfo-faq-item summary::-webkit-details-marker{display:none;} .pfo-faq-item summary::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--craie-2);color:var(--basalte);font:700 20px/30px var(--f-corps);text-align:center;} .pfo-faq-item[open] summary::after{content:"–";background:var(--sable);} .pfo-faq-item p{margin:0;padding:0 20px 16px;color:var(--gris);} @media (max-width:980px){ .pfo-faq-grille{grid-template-columns:1fr;gap:20px;} } /* ===================== 13. DEMANDER UN DEVIS ===================== */ .pfo-devis{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;} .pfo-devis__photo{height:clamp(200px,20vw,270px);margin-top:18px;} .pfo-devis__form{min-width:0;} @media (max-width:1100px){ .pfo-devis{grid-template-columns:1fr;gap:26px;} .pfo-devis__photo{height:220px;} } /* ===================== 14. APPEL FINAL ===================== */ .pfo-appel-final__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:56px;align-items:center;} .pfo-appel-final__contenu h2{color:#fff;font-size:clamp(28px,2.9vw,42px);line-height:1.08;margin:0 0 14px;text-wrap:balance;} .pfo-appel-final__contenu > p{font-size:18px;max-width:34em;margin:0 0 22px;} .pfo-appel-final__boutons{display:flex;gap:12px;flex-wrap:wrap;} .pfo-appel-final__rassure{display:flex;flex-wrap:wrap;gap:8px 20px;margin:20px 0 0;font-size:14px;color:rgba(255,255,255,.9);} .pfo-appel-final__rassure li{display:inline-flex;align-items:center;gap:8px;} .pfo-appel-final__rassure svg{width:18px;height:18px;color:var(--sable);flex:none;} .pfo-appel-final__photo{height:clamp(220px,22vw,320px);} @media (max-width:980px){ .pfo-appel-final__in{grid-template-columns:1fr;gap:26px;} .pfo-appel-final__photo{height:230px;} } /* ===================== 15. PIED DE PAGE ===================== */ .pfo-footer{position:relative;background:var(--basalte);color:rgba(255,255,255,.82);} .pfo-footer::before{content:"";display:block;height:12px;background:var(--ruban);} .pfo-footer__corps,.pfo-footer__base{max-width:calc(var(--conteneur) + 2*var(--marge));margin-inline:auto;} .pfo-footer__corps{padding:44px var(--marge) 28px;display:grid;grid-template-columns:1.1fr .8fr 1.6fr;gap:48px;align-items:start;} .pfo-footer__marque .pfo-logo{margin-bottom:14px;} .pfo-footer__devise{margin:0 0 18px;font-size:15px;line-height:1.6;color:rgba(255,255,255,.82);max-width:340px;} .pfo-footer__colonne h3{color:#fff;font-size:16px;margin-bottom:12px;font-variation-settings:'wdth' 108;} .pfo-footer__colonne ul{display:flex;flex-direction:column;gap:7px;} .pfo-footer a{font-size:15px;} .pfo-footer__colonne a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--ocre);text-underline-offset:3px;text-decoration-thickness:2px;} .pfo-footer__h3-suite{margin-top:22px;} .pfo-footer__deps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;} .pfo-footer__dep-titre{margin:0 0 8px;font:660 14px var(--f-titre);color:var(--sable);} .pfo-footer__communes{display:flex;flex-direction:column;gap:6px;} .pfo-footer__communes li{line-height:1.3;} .pfo-footer__communes a,.pfo-footer__communes span{overflow-wrap:anywhere;} .pfo-footer__communes span{font-size:15px;color:rgba(255,255,255,.72);} .pfo-footer__recherche{display:flex;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 4px 4px 16px;gap:8px;max-width:300px;margin-bottom:14px;} .pfo-footer__recherche input{background:none;border:none;color:#fff;font:15px var(--f-corps);width:100%;min-width:0;} .pfo-footer__recherche input:focus{outline:none;} .pfo-footer__recherche input::placeholder{color:rgba(255,255,255,.7);} .pfo-footer__recherche:focus-within{border-color:#fff;} .pfo-footer__recherche button{width:38px;height:38px;border-radius:50%;background:var(--sable);display:flex;align-items:center;justify-content:center;color:var(--basalte);flex:none;} .pfo-footer__recherche button svg{width:18px;height:18px;} .pfo-footer__cta{height:46px;font-size:15px;} .pfo-footer__base{border-top:1px solid rgba(255,255,255,.18);padding:18px var(--marge);display:flex;justify-content:space-between;font-size:14px;flex-wrap:wrap;gap:8px;} .pfo-footer__base p{margin:0;} @media (max-width:1100px){ .pfo-footer__corps{grid-template-columns:1fr 1fr;gap:34px;} .pfo-footer__marque{grid-column:1/-1;} .pfo-footer__colonne--communes{grid-column:auto;} } @media (max-width:700px){ .pfo-footer__corps{grid-template-columns:1fr;} .pfo-footer__deps{grid-template-columns:repeat(2,minmax(0,1fr));} } /* ===================== 16. ARTICLE ===================== */ .pfo-fil-ariane{font-size:14px;color:rgba(255,255,255,.78);padding:0 0 18px;display:flex;flex-wrap:wrap;gap:4px 8px;} .pfo-fil-ariane a{color:#fff;} .pfo-fil-ariane a:hover{text-decoration:underline;} /* En-tête : bande Basalte, réglet de profondeur gradué à gauche, titre à gauche, photo à droite liserée de strates, étiquette de niveau à cheval */ .pfo-art-tete{position:relative;margin-top:12px;background:var(--basalte);color:#fff;padding:26px 0 64px;} .pfo-art-tete__regle{position:absolute;left:0;top:0;bottom:0;width:36px;overflow:hidden;border-right:1px solid rgba(227,201,143,.4); background: repeating-linear-gradient(to bottom,var(--ocre) 0 2px,transparent 2px 40px) left top/20px 100% no-repeat, repeating-linear-gradient(to bottom,var(--ocre) 0 1.5px,transparent 1.5px 8px) left top/10px 100% no-repeat;} .pfo-art-tete__regle span{position:absolute;left:22px;font:640 10.5px/1 var(--f-titre);font-variation-settings:'wdth' 100;font-variant-numeric:tabular-nums lining-nums;color:var(--sable);margin-top:1px;} .pfo-art-tete__grille{display:grid;grid-template-columns:minmax(0,1fr) var(--aside);gap:40px;align-items:center;} .pfo-art-tete__grille > *{min-width:0;} .pfo-art-tete--sans-photo{padding-bottom:44px;} .pfo-art-tete--sans-photo .pfo-art-tete__grille{grid-template-columns:minmax(0,1fr);} .pfo-art-tete__titre{color:#fff;font-size:clamp(30px,3vw,46px);line-height:1.06;margin:0 0 14px;text-wrap:balance;} .pfo-art-tete__chapo{font-size:19px;color:rgba(255,255,255,.86);max-width:34em;margin:0 0 18px;} .pfo-art-tete__meta{display:flex;align-items:center;gap:12px;font-size:15px;color:rgba(255,255,255,.88);} .pfo-art-tete__meta a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px;} .pfo-art-tete__photo{position:relative;margin:0;} .pfo-art-tete__cadre{position:relative;border-radius:var(--r-fiche);overflow:hidden;background:var(--motif-vide);box-shadow:0 22px 40px -22px rgba(0,0,0,.7);} .pfo-art-tete__cadre::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--ruban);} .pfo-art-tete__cadre img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;} .pfo-etiquette-niveau{position:absolute;left:14px;bottom:-20px;z-index:3;display:flex;flex-wrap:wrap;align-items:center;gap:2px 12px;max-width:calc(100% - 28px);margin:0;background:#fff;color:var(--basalte);border-radius:12px;padding:8px 14px;box-shadow:var(--ombre);font:600 13px/1.35 var(--f-corps);} .pfo-etiquette-niveau__fleche{width:0;height:0;border:6px solid transparent;border-top:9px solid var(--ocre);border-bottom:0;flex:none;} .pfo-etiquette-niveau > span:not(.pfo-etiquette-niveau__fleche) + span{border-left:1px solid var(--trait);padding-left:12px;} .pfo-etiquette-niveau--seule{position:static;display:inline-flex;margin-top:16px;box-shadow:none;max-width:100%;} @media (max-width:1180px){ .pfo-art-tete__grille{grid-template-columns:1fr;gap:34px;} .pfo-art-tete__photo{max-width:560px;} .pfo-art-tete{padding-bottom:64px;} .pfo-art-tete__regle{width:24px;} .pfo-art-tete__regle span{display:none;} } @media (max-width:760px){ .pfo-art-tete{margin-top:8px;padding-top:18px;} .pfo-art-tete__regle{width:12px;} .pfo-etiquette-niveau{left:8px;max-width:calc(100% - 16px);padding:7px 10px;font-size:12.5px;gap:2px 8px;} .pfo-etiquette-niveau > span:not(.pfo-etiquette-niveau__fleche) + span{padding-left:8px;} } .pfo-article-grille{display:grid;grid-template-columns:minmax(0,1fr) var(--aside);gap:40px;align-items:start;max-width:calc(var(--conteneur) + 2*var(--marge));margin-inline:auto;padding:44px var(--marge) 36px;} .pfo-article-colonne{display:flex;flex-direction:column;gap:24px;min-width:0;} @media (max-width:1180px){ .pfo-article-grille{grid-template-columns:1fr;padding-top:36px;} .pfo-aside-form{position:static!important;max-height:none!important;} } .pfo-sommaire-carte{background:var(--blanc);border:1px solid var(--trait);border-left:5px solid var(--ocre);border-radius:var(--r-carte);box-shadow:var(--ombre-douce);padding:20px 24px;} .pfo-sommaire-carte__titre{font:740 17px var(--f-titre);color:var(--basalte);margin:0 0 12px;} .pfo-sommaire-carte ol{margin:0;padding:0;counter-reset:som;display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;} .pfo-sommaire-carte li{counter-increment:som;} .pfo-sommaire-carte li a{display:flex;align-items:flex-start;gap:12px;padding:8px 10px;border-radius:10px;font-size:15px;font-weight:600;line-height:1.35;transition:background .2s ease;} .pfo-sommaire-carte li a::before{content:counter(som);flex:none;width:26px;height:26px;border-radius:50%;background:var(--basalte);color:#fff;font:700 13px/26px var(--f-titre);text-align:center;font-variant-numeric:tabular-nums lining-nums;} .pfo-sommaire-carte li a:hover,.pfo-sommaire-carte li.est-actif a{background:var(--sable-pale);} @media (max-width:760px){ .pfo-sommaire-carte ol{grid-template-columns:1fr;} .pfo-sommaire-carte{padding:16px 16px;} } @media (min-width:1181px){ .pfo-article-colonne > .pfo-sommaire-carte{display:none;} } /* Corps de l'article : panneau blanc, rythme vertical constant. Tout est préfixé par son conteneur. */ .pfo-corps h2{font-size:28px;margin:40px 0 16px;} .pfo-corps h3{font-size:21px;margin:28px 0 12px;} .pfo-corps p{max-width:72ch;} .pfo-corps strong{color:var(--basalte);} .pfo-corps a:not(.pfo-btn){color:var(--nappe);text-decoration:underline;text-decoration-color:rgba(14,97,119,.45);text-underline-offset:3px;} .pfo-corps a:not(.pfo-btn):hover{text-decoration-color:var(--nappe);} .pfo-corps img{border-radius:12px;margin:20px 0;} .pfo-corps table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;} .pfo-corps table th,.pfo-corps table td{border:1px solid var(--trait);padding:10px 14px;text-align:left;} .pfo-corps table th{background:var(--craie);} .pfo-corps--article{background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-carte);box-shadow:var(--ombre-douce);padding:clamp(24px,4vw,52px);} .pfo-corps--article > *{margin-top:0;margin-bottom:20px;} .pfo-corps--article > *:last-child{margin-bottom:0;} .pfo-corps--article > h2{font-size:clamp(24px,2.1vw,30px);line-height:1.18;margin:46px 0 16px;scroll-margin-top:110px;display:flex;align-items:baseline;gap:12px;} .pfo-corps--article > h2::before{content:"";flex:none;width:14px;height:12px;background:var(--ocre);clip-path:polygon(0 0,100% 0,50% 100%);transform:translateY(-1px);} .pfo-corps--article > h2:first-child{margin-top:0;} .pfo-corps--article > h3{font-size:20px;margin:28px 0 10px;} .pfo-corps--article > p{font-size:17.5px;line-height:1.7;} .pfo-corps ul:not([class]){margin:18px 0;display:flex;flex-direction:column;gap:9px;} .pfo-corps ul:not([class]) > li{position:relative;padding-left:30px;} .pfo-corps ul:not([class]) > li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;border-radius:2px;background:var(--ocre);} .pfo-corps ol:not([class]){margin:18px 0;display:flex;flex-direction:column;gap:10px;counter-reset:ol;} .pfo-corps ol:not([class]) > li{position:relative;padding-left:42px;counter-increment:ol;} .pfo-corps ol:not([class]) > li::before{content:counter(ol);position:absolute;left:0;top:-1px;width:28px;height:28px;border-radius:50%;background:var(--basalte);color:#fff;font:700 14px/28px var(--f-titre);text-align:center;font-variant-numeric:tabular-nums lining-nums;} .pfo-corps figure{margin:28px 0;} .pfo-corps figure img{border-radius:12px;box-shadow:var(--ombre-douce);margin:0;width:100%;height:auto;} .pfo-corps figcaption{font-size:14px;color:var(--gris);margin-top:8px;} .pfo-corps .wp-post-image{margin:0;} .pfo-corps figure.pfo-photo-corps{margin:28px 0;width:100%;max-width:none;} .pfo-corps figure.pfo-photo-corps img{display:block;width:100%;height:auto;max-height:480px;object-fit:cover;border-radius:14px;margin:0;box-shadow:var(--ombre-douce);} .pfo-corps figure.pfo-photo-corps figcaption{font-size:13px;line-height:1.4;color:var(--gris);margin-top:8px;} .pfo-corps div.pfo-meme-sujet{background:var(--craie);border-left:3px solid var(--ocre);border-radius:10px;padding:16px 20px;margin:24px 0;color:var(--basalte);} .pfo-corps div.pfo-meme-sujet > :first-child{margin-top:0;} .pfo-corps div.pfo-meme-sujet > :last-child{margin-bottom:0;} .pfo-corps div.pfo-meme-sujet h2,.pfo-corps div.pfo-meme-sujet h3,.pfo-corps div.pfo-meme-sujet h4{display:block;font:740 17px/1.25 var(--f-titre);margin:0 0 8px;color:var(--basalte);} .pfo-corps div.pfo-meme-sujet h2::before{content:none;} .pfo-corps div.pfo-meme-sujet p{font-size:15.5px;line-height:1.55;margin:0 0 8px;max-width:none;} @media (max-width:760px){ .pfo-corps figure.pfo-photo-corps img{max-height:300px;} .pfo-corps div.pfo-meme-sujet{padding:14px 16px;} } /* Blocs du gabarit d'article : chapô, repères, étapes, comparatif, encadrés, FAQ, sources */ .pfo-corps p.chapo{font-size:19.5px;line-height:1.6;color:var(--basalte);border-left:4px solid var(--ocre);padding-left:18px;margin-bottom:28px;max-width:none;} .pfo-corps .pfo-reperes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));gap:12px;margin:28px 0;} .pfo-corps .pfo-repere{margin:0;background:var(--basalte);color:rgba(255,255,255,.88);border-radius:12px;padding:18px 20px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:inset 0 4px 0 var(--ocre);max-width:none;} .pfo-corps .pfo-repere > strong{display:block;color:#fff;font:760 22px/1.2 var(--f-titre);font-variation-settings:'wdth' 106;hyphens:auto;overflow-wrap:break-word;font-variant-numeric:tabular-nums lining-nums;} .pfo-corps .pfo-repere span{display:block;font-size:14.5px;line-height:1.45;} .pfo-corps .pfo-repere span strong{display:inline;font:inherit;font-weight:700;color:#fff;} .pfo-corps ol.pfo-etapes{list-style:none;margin:28px 0 12px;padding:0;display:grid;gap:12px;counter-reset:etape;} .pfo-corps ol.pfo-etapes > li{position:relative;counter-increment:etape;background:#fff;border:1px solid var(--trait);border-radius:12px;padding:16px 18px 16px 64px;display:flex;flex-direction:column;gap:4px;} .pfo-corps ol.pfo-etapes > li::before{content:counter(etape);position:absolute;left:16px;top:16px;width:32px;height:32px;border-radius:50%;background:var(--sable);color:var(--basalte);font:740 15px/32px var(--f-titre);text-align:center;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--ocre);font-variant-numeric:tabular-nums lining-nums;} .pfo-corps ol.pfo-etapes > li > strong{display:block;font:740 17px/1.3 var(--f-titre);color:var(--basalte);} .pfo-corps ol.pfo-etapes > li > span{display:block;font-size:15.5px;line-height:1.55;color:var(--gris);} .pfo-corps .pfo-etapes-legende{font-size:14px;line-height:1.5;color:var(--gris);margin:0 0 28px;} .pfo-corps .pfo-comparatif{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:28px 0;} .pfo-corps .pfo-comparatif--trois{grid-template-columns:repeat(3,minmax(0,1fr));} .pfo-corps .pfo-comparatif__carte{margin:0;max-width:none;background:#fff;border:1px solid var(--trait);border-top:4px solid var(--marne);border-radius:12px;padding:16px 18px;display:flex;flex-direction:column;gap:6px;box-shadow:var(--ombre-douce);} .pfo-corps .pfo-comparatif__carte:nth-child(1){border-top-color:var(--sable-fonce);} .pfo-corps .pfo-comparatif__carte:nth-child(2){border-top-color:var(--marne);} .pfo-corps .pfo-comparatif__carte:nth-child(3){border-top-color:var(--nappe);} .pfo-corps .pfo-comparatif__carte > strong{display:block;font:740 17px/1.3 var(--f-titre);color:var(--basalte);} .pfo-corps .pfo-comparatif__carte > span{display:block;font-size:15.5px;line-height:1.55;color:var(--gris);} .pfo-corps .pfo-encadre,.pfo-corps .bon-a-savoir{display:flex;flex-direction:column;gap:6px;border-radius:12px;padding:18px 22px;margin:28px 0;} .pfo-corps .pfo-encadre > strong,.pfo-corps .bon-a-savoir > strong{display:block;font:740 17px/1.3 var(--f-titre);} .pfo-corps .pfo-encadre > span,.pfo-corps .bon-a-savoir > span{display:block;line-height:1.6;} .pfo-corps .pfo-encadre span > strong,.pfo-corps .pfo-encadre p > strong{display:inline;font:inherit;font-weight:700;} .pfo-corps .pfo-encadre--retenir,.pfo-corps .bon-a-savoir{background:var(--nappe-pale);border-left:5px solid var(--nappe);} .pfo-corps .pfo-encadre--retenir > strong,.pfo-corps .bon-a-savoir > strong{color:var(--nappe-fonce);} .pfo-corps .pfo-encadre--alerte{background:var(--sable-pale);border-left:5px solid var(--ocre);} .pfo-corps .pfo-encadre--alerte > strong{color:var(--basalte);} .pfo-corps .a-retenir,.pfo-corps .sbs-retenir{background:var(--nappe-pale);border:1px solid var(--trait);border-left:5px solid var(--nappe);border-radius:12px;padding:16px 22px;margin:26px 0;} .pfo-corps .a-retenir p,.pfo-corps .sbs-retenir p{margin:0;max-width:none;} .pfo-corps .a-retenir strong,.pfo-corps .sbs-retenir strong{font-family:var(--f-titre);color:var(--nappe-fonce);margin-right:4px;} .pfo-corps .sources,.pfo-corps .sbs-sources{background:var(--craie);border-radius:12px;padding:16px 22px;margin:34px 0 0;font-size:14.5px;color:var(--gris);} .pfo-corps .sources h2{display:block;font-size:18px;margin:0 0 8px;} .pfo-corps .sources h2::before{content:none;} .pfo-corps .sources p,.pfo-corps .sbs-sources p{margin:0 0 6px;max-width:none;} .pfo-corps .sources p:last-child,.pfo-corps .sbs-sources p:last-child{margin-bottom:0;} .pfo-corps .sources strong,.pfo-corps .sbs-sources strong,.pfo-corps .sources-titre{font-family:var(--f-titre);color:var(--basalte);} .pfo-corps section.faq,.pfo-corps .pfo-encadre--faq{display:block;background:var(--craie);border:1px solid var(--trait);border-radius:14px;padding:24px 24px 18px;margin:36px 0 0;} .pfo-corps section.faq > h2{margin:0 0 14px;font-size:24px;display:block;} .pfo-corps section.faq > h2::before{content:none;} .pfo-corps details,.entry-content details{background:var(--blanc);border:1px solid var(--trait);border-left:4px solid var(--sable-fonce);border-radius:10px;margin:10px 0;overflow:hidden;} .pfo-corps details[open],.entry-content details[open]{border-left-color:var(--nappe);} .pfo-corps summary,.entry-content summary{list-style:none;cursor:pointer;padding:15px 56px 15px 20px;font-weight:700;color:var(--basalte);position:relative;} .pfo-corps summary::-webkit-details-marker,.entry-content summary::-webkit-details-marker{display:none;} .pfo-corps summary::after,.entry-content summary::after{content:"+";position:absolute;right:14px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--craie-2);color:var(--basalte);font:700 20px/30px var(--f-corps);text-align:center;} .pfo-corps details[open] summary::after,.entry-content details[open] summary::after{content:"–";background:var(--sable);} .pfo-corps details > :not(summary),.entry-content details > :not(summary){padding:0 20px 16px;margin:0;color:var(--gris);max-width:none;} @media (max-width:640px){ .pfo-corps .pfo-comparatif,.pfo-corps .pfo-comparatif--trois{grid-template-columns:minmax(0,1fr);} } @media (max-width:560px){.pfo-corps .pfo-reperes{grid-template-columns:repeat(2,minmax(0,1fr));}.pfo-corps .pfo-repere{min-width:0;padding:14px;}.pfo-corps .pfo-repere > strong{font-size:18px;}.pfo-corps ol.pfo-etapes > li{padding-left:58px;}} @media (max-width:440px){.pfo-corps .pfo-reperes{grid-template-columns:1fr;}} @media (min-width:700px){.pfo-corps .pfo-reperes:has(> :nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr));}.pfo-corps .pfo-reperes:has(> :nth-child(5):last-child) > *{grid-column:span 2;}.pfo-corps .pfo-reperes:has(> :nth-child(5):last-child) > :nth-child(n+4){grid-column:span 3;}} /* Infographies du socle : frise, jauges, tarifs, lieu (le socle ne pose aucun pixel) */ .pfo-corps sbs-frise,.pfo-corps sbs-jauges,.pfo-corps sbs-tarifs,.pfo-corps sbs-lieu,.pfo-corps sbs-etape,.pfo-corps sbs-jauge,.pfo-corps sbs-tarif{display:block;} .pfo-corps .sbs_frise{margin:28px 0;padding:22px 24px;background:var(--craie);border:1px solid var(--trait);border-radius:14px;} .pfo-corps .sbs_frise_titre,.pfo-corps .sbs_jauges_titre,.pfo-corps .sbs_tarifs_titre{display:block;font:740 18px var(--f-titre);margin-bottom:14px;color:var(--basalte);} .pfo-corps .sbs_etape{display:grid;grid-template-columns:140px minmax(0,1fr);grid-template-rows:auto auto;column-gap:20px;row-gap:2px;align-items:start;} .pfo-corps .sbs_etape + .sbs_etape{border-top:1px solid var(--trait);margin-top:14px;padding-top:14px;} .pfo-corps .sbs_etape_date{grid-row:1 / span 2;justify-self:start;background:var(--basalte);color:#fff;font:650 14px/1.2 var(--f-titre);padding:7px 14px;border-radius:999px;font-variant-numeric:tabular-nums lining-nums;box-shadow:0 0 0 2px var(--craie),0 0 0 3px var(--ocre);} .pfo-corps .sbs_etape_titre{grid-column:2;font:740 17px/1.3 var(--f-titre);color:var(--basalte);} .pfo-corps .sbs_etape_desc{grid-column:2;display:block;font-size:15.5px;line-height:1.5;color:var(--gris);} .pfo-corps .sbs_jauges{margin:28px 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;} .pfo-corps .sbs_jauges_titre{grid-column:1 / -1;margin-bottom:2px;} .pfo-corps .sbs_jauge{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:8px;background:var(--blanc);border:1px solid var(--trait);border-top:4px solid var(--ocre);border-radius:var(--r-carte);padding:14px 16px 16px;box-shadow:var(--ombre-douce);} .pfo-corps .sbs_jauge_valeur{grid-column:1;order:1;font:780 clamp(30px,3vw,40px)/1 var(--f-titre);font-variant-numeric:tabular-nums lining-nums;color:var(--basalte);} .pfo-corps .sbs_jauge_unite{grid-column:2;order:2;font:660 14px var(--f-titre);color:var(--nappe);} .pfo-corps .sbs_jauge_libelle{grid-column:1 / -1;order:3;margin-top:8px;font-size:14.5px;line-height:1.35;color:var(--gris);} .pfo-corps .sbs_tarifs{margin:28px 0;padding:20px 22px;background:var(--craie);border:1px solid var(--trait);border-radius:14px;} .pfo-corps .sbs_tarif{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:12px;align-items:center;margin:9px 0;} .pfo-corps .sbs_tarif_libelle{font-size:15px;font-weight:600;color:var(--basalte);} .pfo-corps .sbs_tarif_barre{width:100%;height:16px;border:0;border-radius:999px;background:var(--craie-2);} .pfo-corps .sbs_tarif_barre::-webkit-meter-bar{background:var(--craie-2);border:0;border-radius:999px;height:16px;} .pfo-corps .sbs_tarif_barre::-webkit-meter-optimum-value,.pfo-corps .sbs_tarif_barre::-webkit-meter-suboptimum-value,.pfo-corps .sbs_tarif_barre::-webkit-meter-even-less-good-value{background:var(--nappe);border-radius:999px;} .pfo-corps .sbs_tarif_barre::-moz-meter-bar{background:var(--nappe);border-radius:999px;} .pfo-corps .sbs_tarifs_notes{display:block;font-size:14px;color:var(--gris);margin-top:8px;} .pfo-corps .sbs_lieu{margin:26px 0;padding:18px 22px;background:var(--craie);border:1px solid var(--trait);border-left:5px solid var(--ocre);border-radius:12px;} .pfo-corps .sbs_lieu_nom{display:block;font:740 18px var(--f-titre);} .pfo-corps .sbs_lieu_adresse{font-style:normal;display:block;color:var(--gris);} .pfo-corps .sbs_lieu_acces{display:block;font-size:14px;color:var(--gris);margin-top:4px;} .pfo-corps .sbs_lieu_carte{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-weight:700;} .pfo-corps .sbs_icone_repere{width:18px;height:18px;fill:var(--ocre);} .pfo-corps .sbs_source{display:block;margin-top:12px;font-size:13px;color:var(--gris);} @media (max-width:640px){ .pfo-corps .sbs_etape{grid-template-columns:minmax(0,1fr);} .pfo-corps .sbs_etape_date{grid-row:auto;margin-bottom:6px;} .pfo-corps .sbs_etape_titre,.pfo-corps .sbs_etape_desc{grid-column:1;} .pfo-corps .sbs_tarif{grid-template-columns:1fr;gap:4px;} } /* Signature d'auteur */ .pfo-monogramme{display:flex;align-items:center;justify-content:center;background:var(--basalte);color:#fff;font:740 20px var(--f-titre);flex:none;border-radius:50%;box-shadow:0 0 0 3px var(--craie),0 0 0 5px var(--ocre);} img.pfo-portrait-auteur{object-fit:cover;flex:none;padding:0;background:var(--craie-2);} .pfo-art-tete__meta .pfo-monogramme{box-shadow:0 0 0 2px var(--basalte),0 0 0 4px var(--ocre);font-size:14px;} .pfo-auteur-box{display:flex;gap:20px;align-items:center;background:var(--blanc);border:1px solid var(--trait);border-left:5px solid var(--ocre);border-radius:var(--r-carte);box-shadow:var(--ombre-douce);padding:22px 26px;margin-top:6px;} .pfo-auteur-box .pfo-monogramme{margin:5px;} .pfo-auteur-box__nom{font:740 20px var(--f-titre);margin:0 0 2px;} .pfo-auteur-box__role{display:block;color:var(--gris);font-size:14px;margin-bottom:8px;} .pfo-auteur-box__bio{color:var(--gris);font-size:15px;margin:0 0 8px;} @media (max-width:700px){ .pfo-auteur-box{align-items:flex-start;padding:18px;gap:14px;} } /* Barre latérale d'article : UN seul bloc collant = formulaire (en tête) + barre de lecture + sommaire, toujours plus court que la fenêtre */ .pfo-aside-form{position:sticky;top:88px;align-self:start;display:flex;flex-direction:column;gap:10px;max-height:calc(100vh - 100px);} .pfo-aside-form__carte{order:-1;flex:none;} .pfo-aside-form__carte .pfo-form{box-shadow:var(--ombre);} .pfo-lecture{flex:none;background:var(--blanc);border:1px solid var(--trait);border-radius:12px;padding:8px 14px 10px;} .pfo-lecture__texte{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:13px;color:var(--gris);margin-bottom:7px;} .pfo-lecture__texte strong{font-weight:700;color:var(--basalte);font-variant-numeric:tabular-nums lining-nums;} .pfo-lecture-progress{height:6px;background:var(--craie-2);border-radius:999px;overflow:hidden;} .pfo-lecture-progress__barre{display:block;height:100%;width:100%;background:var(--ocre);transform:scaleX(0);transform-origin:left center;border-radius:999px;} .pfo-sommaire-rail{flex:0 1 auto;min-height:84px;display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--trait);border-left:5px solid var(--ocre);border-radius:var(--r-carte);box-shadow:var(--ombre-douce);padding:12px 8px 8px 14px;overflow:hidden;} .pfo-sommaire-rail .pfo-sommaire-carte__titre{flex:none;font-size:15px;margin:0 0 6px;} .pfo-sommaire-rail ol{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;display:block;margin:0;padding:0 4px 0 0;counter-reset:som;scrollbar-width:thin;} .pfo-sommaire-rail li{counter-increment:som;} .pfo-sommaire-rail li a{display:flex;gap:9px;align-items:baseline;padding:5px 8px;border-radius:8px;font-size:13.5px;line-height:1.3;font-weight:600;color:var(--basalte);transition:background .15s;} .pfo-sommaire-rail li a::before{content:counter(som);flex:none;width:20px;height:20px;border-radius:50%;background:var(--craie-2);color:var(--basalte);font:700 11.5px/20px var(--f-titre);text-align:center;font-variant-numeric:tabular-nums lining-nums;} .pfo-sommaire-rail li a:hover,.pfo-sommaire-rail li.est-actif a{background:var(--sable-pale);} .pfo-sommaire-rail li.est-actif a::before{background:var(--basalte);color:#fff;} .pfo-sommaire-rail ol.pfo-defile{-webkit-mask-image:linear-gradient(to bottom,#000 78%,transparent);mask-image:linear-gradient(to bottom,#000 78%,transparent);} .pfo-sommaire-rail ol.pfo-defile.pfo-defile--fin{-webkit-mask-image:none;mask-image:none;} .pfo-sommaire-rail .pfo-sommaire-suite{display:none;font-size:12.5px;color:var(--ocre-fonce);margin:6px 0 0;font-weight:600;} .pfo-sommaire-rail ol.pfo-defile + .pfo-sommaire-suite{display:block;} .pfo-sommaire-rail ol.pfo-defile.pfo-defile--fin + .pfo-sommaire-suite{visibility:hidden;} /* le formulaire dans la barre : même circuit, gabarit resserré */ .pfo-aside-form .pfo-form__entete{margin-bottom:6px;} .pfo-aside-form .pfo-form__noms-etapes{display:none;} .pfo-aside-form .pfo-form__progression{margin-bottom:10px;} .pfo-aside-form .pfo-form__question{font-size:17px;margin-bottom:9px;} .pfo-aside-form .pfo-form__tuiles{gap:8px;margin-bottom:4px;} .pfo-aside-form .pfo-champ{margin-bottom:8px;} .pfo-aside-form .pfo-champ input,.pfo-aside-form .pfo-champ select{height:40px;} .pfo-aside-form .pfo-champ__unite{height:37px;} .pfo-aside-form .pfo-form [data-etape="coordonnees"] .pfo-champ input{height:40px;padding:0 10px;} .pfo-aside-form .pfo-form__pilules-rapides{margin:4px 0 10px;gap:6px;} .pfo-aside-form .pfo-form__pilule{height:32px;padding:0 11px;font-size:13px;} .pfo-aside-form .pfo-form__segmente button{height:40px;min-width:0;font-size:13px;padding:0 4px;} .pfo-aside-form .pfo-form__case--consentement{font-size:12px;} .pfo-aside-form .pfo-form__nav{margin-top:6px;} .pfo-aside-form .pfo-form__nav .pfo-btn{height:44px;} .pfo-aside-form,.pfo-aside-form__carte,.pfo-aside-form .pfo-form{opacity:1;} @media (max-width:1180px){ .pfo-lecture,.pfo-sommaire-rail{display:none;} } @media (prefers-reduced-motion:reduce){ .pfo-sommaire-rail li a{transition:none;} } /* À lire aussi : pleine largeur, jamais une case vide */ .pfo-lire-aussi{margin-top:16px;} .pfo-lire-aussi__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:22px;} /* ===================== 17. RUBRIQUE : COUPE DE SONDAGE TROIS COUCHES ===================== */ .pfo-rub-tete{position:relative;margin-top:12px;background:var(--basalte);color:#fff;padding:26px 0 54px;} .pfo-rub-tete::after,.pfo-bandeau::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--ruban);} .pfo-rub-tete__grille{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr) minmax(0,.8fr);gap:36px;align-items:center;} .pfo-rub-tete__grille > *{min-width:0;} .pfo-rub-tete__texte h1{color:#fff;font-size:clamp(32px,3.4vw,52px);line-height:1.04;margin:0 0 14px;overflow-wrap:anywhere;} .pfo-rub-tete__chapo{font-size:18px;color:rgba(255,255,255,.86);max-width:30em;margin:0 0 18px;} .pfo-rub-filtres{display:flex;gap:8px;flex-wrap:wrap;} .pfo-rub-filtres a{height:40px;display:inline-flex;align-items:center;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.45);color:#fff;font-weight:600;font-size:14.5px;transition:background .15s,border-color .15s;} .pfo-rub-filtres a:hover{border-color:#fff;background:rgba(255,255,255,.08);} .pfo-rub-filtres a.est-actif{background:var(--sable);border-color:var(--sable);color:var(--basalte);} .pfo-rub-tete__photo{aspect-ratio:4/3;max-height:250px;width:100%;} @media (max-width:1180px){ .pfo-rub-tete__grille{grid-template-columns:minmax(0,1fr) minmax(0,.8fr);} .pfo-rub-tete__texte{grid-column:1/-1;} } @media (max-width:760px){ .pfo-rub-tete{padding-bottom:40px;} .pfo-rub-tete__grille{grid-template-columns:minmax(0,1fr);gap:20px;} .pfo-rub-tete__photo{max-height:200px;aspect-ratio:16/9;} .pfo-rub-tete__texte h1{font-size:clamp(28px,8.4vw,34px);} .pfo-rub-tete__chapo{font-size:16px;max-width:100%;} .pfo-rub-filtres a{flex:0 1 auto;white-space:normal;height:38px;padding:0 14px;font-size:14px;} } .pfo-rub-liste{padding-top:44px;} /* ===================== 18. PAGE COMMUNE ===================== */ .pfo-ville-grille{display:grid;grid-template-columns:minmax(0,1fr) var(--aside);gap:40px;align-items:start;} .pfo-ville-grille > *{min-width:0;} .pfo-ville-aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px;} .pfo-ville-aside__titre{font:740 19px/1.2 var(--f-titre);color:var(--basalte);margin:0 0 10px;} .pfo-ville-aside__carte{background:var(--craie);border:1px solid var(--trait);border-radius:var(--r-carte);padding:18px 18px 16px;} .pfo-ville-aside__carte .pfo-ville-aside__titre{margin:0 0 10px;} .pfo-ville-aside__liens{display:flex;flex-wrap:wrap;gap:6px;margin:0;} .pfo-ville-aside__liens a{background:var(--blanc);border:1px solid var(--trait);border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;color:var(--basalte);} .pfo-ville-aside__liens a:hover{background:var(--sable-pale);border-color:var(--basalte);} @media (max-width:980px){ .pfo-ville-grille{grid-template-columns:1fr;gap:32px;} .pfo-ville-aside{position:static;} } .pfo-ville-nappe{display:flex;align-items:center;gap:16px;background:var(--craie);border:1px solid var(--trait);border-left:5px solid var(--ocre);border-radius:var(--r-carte);padding:12px 18px 12px 12px;margin:0 0 22px;} .pfo-ville-nappe__coupe{flex:0 0 46px;height:64px;display:flex;flex-direction:column;border-radius:8px;overflow:hidden;box-shadow:0 0 0 1px rgba(31,43,46,.25);} .pfo-ville-nappe__coupe i{display:block;flex:1;} .pfo-ville-nappe__coupe i:nth-child(1){background:var(--p-sable);} .pfo-ville-nappe__coupe i:nth-child(2){background:var(--p-calcaire);} .pfo-ville-nappe__coupe i:nth-child(3){background:var(--p-marne);} .pfo-ville-nappe__coupe i:nth-child(4){background:var(--p-nappe);} .pfo-ville-nappe p{margin:0;max-width:none;display:flex;flex-direction:column;gap:2px;font-size:15.5px;line-height:1.45;} .pfo-ville-nappe strong{font:760 19px var(--f-titre);color:var(--basalte);} /* Texte de la page ville en accordéons */ .pfo-accordeons{display:flex;flex-direction:column;gap:12px;margin:22px 0;} .pfo-accordeon{background:var(--craie);border:1px solid var(--trait);border-left:5px solid var(--sable-fonce);border-radius:12px;overflow:hidden;} .pfo-accordeon[open]{border-left-color:var(--nappe);background:var(--blanc);} .pfo-accordeon > summary{list-style:none;cursor:pointer;padding:16px 64px 16px 22px;position:relative;} .pfo-accordeon > summary::-webkit-details-marker{display:none;} .pfo-accordeon > summary h2,.pfo-accordeon > summary h3{font-size:clamp(18px,1.5vw,21px)!important;line-height:1.3;margin:0!important;display:block!important;} .pfo-accordeon > summary h2::before{content:none!important;} .pfo-accordeon > summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:32px;height:32px;border-radius:50%;background:var(--craie-2);color:var(--basalte);font:700 22px/32px var(--f-corps);text-align:center;} .pfo-accordeon[open] > summary::after{content:"–";background:var(--sable);} .pfo-accordeon__corps{padding:0 22px 20px;} .pfo-accordeon__corps > :first-child{margin-top:0;} .pfo-ville-corps .pfo-corps h2{margin:0;font-size:22px;} .pfo-ville-corps .pfo-corps > p{font-size:17.5px;line-height:1.7;max-width:none;} .pfo-ville-corps .pfo-corps section.faq{margin-top:22px;} .pfo-ville-corps .pfo-corps .sources{margin:22px 0 0;} .pfo-ville-corps .pfo-corps .pfo-auteur-box{margin-top:28px;} .pfo-guides-utiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:16px;} .pfo-guide-utile{display:flex;flex-direction:column;gap:4px;background:var(--craie);border:1px solid var(--trait);border-left:5px solid var(--nappe);border-radius:var(--r-carte);padding:18px 20px;transition:background .15s,border-color .15s;} .pfo-guide-utile strong{font:740 18px var(--f-titre);} .pfo-guide-utile span{font-size:15px;color:var(--gris);} .pfo-guide-utile:hover{background:var(--sable-pale);border-color:var(--basalte);border-left-color:var(--nappe);} /* ===================== 19. PAGES ANNEXES ===================== */ .pfo-bandeau,.pfo-bandeau-simple{position:relative;margin-top:12px;background:var(--basalte);color:#fff;} .pfo-bandeau{padding:40px 0 52px;} .pfo-bandeau h1,.pfo-bandeau-simple h1{color:#fff;font-size:clamp(32px,3.6vw,52px);line-height:1.05;} .pfo-bandeau__chapo,.pfo-bandeau-simple__chapo{font-size:19px;color:rgba(255,255,255,.86);max-width:38em;margin:14px 0 0;} .pfo-bandeau__chapo--role{font-weight:700;color:var(--sable);margin-top:6px;font-size:17px;} .pfo-bandeau-simple::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--ruban);} .pfo-bandeau-simple__in{padding-block:34px 44px;} .pfo-bandeau-simple h1{font-size:clamp(28px,3.2vw,44px);} .pfo-page-auteur__tete{display:flex;gap:30px;align-items:center;} .pfo-page-auteur__tete .pfo-monogramme{margin:6px;} .pfo-page-simple{max-width:760px;margin-inline:auto;} .pfo-deux-colonnes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start;} .pfo-contact__cote{display:flex;flex-direction:column;gap:14px;} .pfo-contact__photo{aspect-ratio:4/3;max-height:340px;margin-bottom:10px;} .pfo-reassurance-ligne{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;} .pfo-reassurance-ligne svg{width:22px;height:22px;color:var(--nappe);flex:none;margin-top:2px;} .pfo-reassurance-ligne a{color:var(--nappe);font-weight:700;text-decoration:underline;text-underline-offset:3px;} @media (max-width:980px){ .pfo-deux-colonnes{grid-template-columns:1fr;gap:30px;} .pfo-contact__photo{max-height:260px;} } @media (max-width:760px){ .pfo-bandeau-simple__in{padding-block:18px 28px;} .pfo-bandeau-simple h1{font-size:26px;} .pfo-bandeau-simple__chapo{display:none;} .pfo-contact.pfo-section{padding-top:16px;} .pfo-contact__cote{order:2;} .pfo-bandeau{padding:28px 0 40px;} .pfo-page-auteur__tete{gap:18px;align-items:flex-start;} .pfo-page-auteur__tete .pfo-monogramme{width:88px!important;height:88px!important;} } .pfo-devis-seo .pfo-accordeon > summary h3{font-size:clamp(17px,1.4vw,20px)!important;} .pfo-devis-seo .pfo-accordeon__corps p{font-size:16.5px;line-height:1.7;color:var(--basalte);max-width:none;} .pfo-devis-seo .pfo-accordeon__corps a{color:var(--nappe);font-weight:700;text-decoration:underline;text-underline-offset:3px;} /* Qui sommes-nous */ .pfo-qsn-info__intro{font:660 clamp(20px,1.8vw,26px)/1.4 var(--f-titre);font-variation-settings:'wdth' 108;color:var(--basalte);max-width:44em;margin:0 0 26px;} .pfo-qsn-info__grille{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;} .pfo-qsn-info__approche{background:var(--basalte);color:rgba(255,255,255,.88);border-radius:var(--r-carte);border-top:5px solid var(--ocre);padding:28px;} .pfo-qsn-info__approche h2{color:#fff;font-size:24px;margin:14px 0 10px;} .pfo-qsn-info__approche p{margin:0;font-size:16px;line-height:1.6;} .pfo-qsn-info__couvre{background:var(--craie);border:1px solid var(--trait);border-radius:var(--r-carte);padding:28px;} .pfo-qsn-info__couvre h2{font-size:24px;margin:0 0 16px;} .pfo-qsn-info__tuiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} .pfo-qsn-info__tuile{background:var(--blanc);border-radius:12px;border:1px solid var(--trait);border-top:4px solid var(--ocre);padding:16px;margin:0;display:flex;flex-direction:column;gap:6px;} .pfo-qsn-info__tuile strong{font:740 17px var(--f-titre);color:var(--basalte);} .pfo-qsn-info__tuile > span:last-child{font-size:14px;color:var(--gris);line-height:1.45;} .pfo-qsn-info__icone{width:40px;height:40px;border-radius:50%;background:var(--sable-pale);color:var(--ocre-fonce);display:inline-flex;align-items:center;justify-content:center;} .pfo-qsn-info__approche .pfo-qsn-info__icone{background:rgba(255,255,255,.14);color:#fff;} .pfo-qsn-info__icone svg{width:20px;height:20px;} .pfo-qsn-info__note{display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;font-size:15px;color:var(--gris);} .pfo-qsn-info__note svg{width:20px;height:20px;color:var(--nappe);flex:none;margin-top:2px;} .pfo-qsn-info__note a{color:var(--nappe);font-weight:700;text-decoration:underline;text-underline-offset:3px;} @media (max-width:980px){ .pfo-qsn-info__grille{grid-template-columns:1fr;} .pfo-qsn-info__tuiles{grid-template-columns:1fr;} } .pfo-cheval-grille{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;} @media (max-width:980px){ .pfo-cheval-grille{grid-template-columns:repeat(2,minmax(0,1fr));} } @media (max-width:620px){ .pfo-cheval-grille{grid-template-columns:1fr;} } .pfo-etape-carte{position:relative;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-carte);box-shadow:var(--ombre-douce);padding:22px 20px 20px;} .pfo-etape-carte__rang{position:absolute;right:16px;top:16px;width:30px;height:30px;border-radius:50%;background:var(--sable);box-shadow:0 0 0 2px var(--blanc),0 0 0 3.5px var(--ocre);} .pfo-etape-carte__rang::before{content:attr(data-n);display:block;text-align:center;color:var(--basalte);font:740 14px/30px var(--f-titre);font-variant-numeric:tabular-nums lining-nums;} .pfo-etape-carte__icone{display:block;width:30px;height:30px;color:var(--nappe);margin-bottom:10px;} .pfo-etape-carte__icone svg{width:30px;height:30px;} .pfo-etape-carte strong{display:block;color:var(--basalte);margin-bottom:4px;font:740 17px var(--f-titre);} .pfo-etape-carte p{margin:0;font-size:15px;color:var(--gris);} .pfo-grille-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;} @media (max-width:760px){ .pfo-grille-2{grid-template-columns:1fr;} } .pfo-carte-auteur{display:flex;gap:20px;align-items:flex-start;background:var(--craie);border:1px solid var(--trait);border-left:5px solid var(--ocre);border-radius:var(--r-carte);padding:24px;} .pfo-carte-auteur .pfo-monogramme{margin:5px;} .pfo-carte-auteur .pfo-btn{margin-top:8px;height:44px;} .pfo-btn--publications{white-space:nowrap;} @media (max-width:620px){ .pfo-carte-auteur{flex-direction:column;gap:14px;} } /* Notre équipe */ .pfo-equipe__grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;} .pfo-equipe-carte{display:flex;gap:28px;align-items:flex-start;background:var(--craie);border:1px solid var(--trait);border-left:5px solid var(--ocre);border-radius:var(--r-carte);padding:30px;} .pfo-equipe-carte .pfo-monogramme{margin:6px;} .pfo-equipe-carte__texte{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px;} .pfo-equipe-carte h2{font-size:26px;line-height:1.1;margin:0;} .pfo-equipe-carte__role{margin:0;color:var(--nappe-fonce);font-size:14.5px;font-weight:700;} .pfo-equipe-carte__bio{margin:4px 0 8px;font-size:16px;line-height:1.6;} .pfo-equipe__texte{margin-top:36px;} @media (max-width:980px){ .pfo-equipe__grille{grid-template-columns:1fr;} } @media (max-width:560px){ .pfo-equipe-carte{flex-direction:column;gap:14px;padding:20px;} .pfo-equipe-carte .pfo-monogramme{width:96px!important;height:96px!important;} .pfo-btn--publications{white-space:normal;height:auto;min-height:44px;padding-block:10px;} } /* Crédits photos */ .pfo-credits{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:18px;} .pfo-credits__carte{margin:0;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-carte);overflow:hidden;box-shadow:var(--ombre-douce);} .pfo-credits__carte img{display:block;width:100%;height:140px;object-fit:cover;} .pfo-credits__carte figcaption{display:flex;flex-direction:column;gap:4px;padding:12px 14px;font-size:14px;line-height:1.4;} .pfo-credits__carte span{color:var(--gris);} .pfo-credits__carte a{color:var(--nappe);font-weight:700;} /* 404, recherche */ .pfo-404{text-align:center;padding:80px 0 90px;background:var(--blanc);} .pfo-404__symbole{display:block;width:84px;height:84px;margin:0 auto 22px;} .pfo-404__symbole svg{width:100%;height:100%;} .pfo-404 h1{font-size:clamp(30px,3.4vw,42px);margin-bottom:12px;} .pfo-404__chapo{margin:0 auto;font-size:18px;color:var(--gris);max-width:32em;} .pfo-404__recherche,.pfo-recherche-form{display:flex;gap:10px;max-width:480px;margin:24px auto;} .pfo-recherche-form{margin:20px 0 0;max-width:540px;} .pfo-404__recherche input,.pfo-recherche-form input{flex:1;height:50px;border-radius:999px;border:1.5px solid #AEB7B0;padding:0 20px;font:16px var(--f-corps);background:var(--blanc);color:var(--basalte);min-width:0;} .pfo-404__recherche input:focus,.pfo-recherche-form input:focus{outline:none;border-color:var(--nappe);box-shadow:0 0 0 4px rgba(14,97,119,.2);} .pfo-404__rubriques{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px;} .pfo-404__rubriques--gauche{justify-content:flex-start;} .pfo-404__cta{margin-top:28px;} @media (max-width:480px){ .pfo-404__recherche,.pfo-recherche-form{flex-direction:column;} } /* ===================== 20. FILET DE SÉCURITÉ ===================== */ /* Repli propre d'une carte de photo vide : jamais une case blanche */ .pfo-carte__photo:empty,.pfo-parcours__photo:empty,.pfo-hero__photo:empty{background:var(--motif-vide);} @media (max-width:760px){ .pfo-section__tete--ligne{flex-direction:column;align-items:flex-start;} } /* ===================== 21. PASSE 1 (03/11/2026) : corrections mesurées ===================== */ /* 3a. Étiquette du curseur : toujours DANS la boîte du log (40 px de règle, texte plus petit, rien ne dépasse) */ .pfo-log{overflow:hidden;} .pfo-log .pfo-log__curseur b{width:40px;max-width:100%;padding:0;overflow:hidden;font-size:10px;letter-spacing:0;text-align:center;text-overflow:clip;} /* 3b. Réglet d'article : chiffres posés DANS la boîte du réglet (app.js masque ceux qui dépassent la hauteur réelle de la bande) */ .pfo-art-tete .pfo-art-tete__regle{overflow:hidden;contain:paint;} .pfo-art-tete .pfo-art-tete__regle span{left:21px;max-width:14px;font-size:10px;line-height:10px;overflow:hidden;white-space:nowrap;} /* 4. Repères chiffrés : jamais un mot court seul sur sa ligne */ .pfo-corps .pfo-repere > strong{text-wrap:balance;hyphens:manual;font-size:clamp(16px,1.45vw,21px);} @media (max-width:560px){ .pfo-corps .pfo-repere > strong{font-size:clamp(16px,4.6vw,19px);} } /* 2. Page liste : « par où commencer » (grande carte), « carnet de forage » (rangées numérotées), « autres couches » (3 strates) */ .pfo-debut-section{padding-bottom:clamp(32px,5vh,48px);} .pfo-debut{display:flex;background:var(--craie);border:1px solid var(--trait);border-left:6px solid var(--nappe);border-radius:var(--r-photo);overflow:hidden;box-shadow:var(--ombre-douce);transition:transform .2s ease,box-shadow .2s ease;} .pfo-debut:hover{transform:translateY(-2px);box-shadow:var(--ombre);} .pfo-debut__photo{position:relative;flex:0 0 52%;min-height:clamp(260px,24vw,340px);background:var(--motif-vide);overflow:hidden;} .pfo-debut__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .pfo-debut__photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:12px;background:var(--ruban);} .pfo-debut__corps{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:12px;padding:24px clamp(20px,3vw,44px);min-width:0;} .pfo-debut__titre{font:780 clamp(24px,2.3vw,34px)/1.1 var(--f-titre);font-variation-settings:'wdth' 112;color:var(--basalte);text-wrap:balance;} .pfo-debut:hover .pfo-debut__titre{text-decoration:underline;text-decoration-color:var(--ocre);text-underline-offset:5px;text-decoration-thickness:2px;} .pfo-debut__chapo{font-size:17px;line-height:1.55;color:var(--gris);} .pfo-debut__meta{font-size:13.5px;color:var(--gris);} .pfo-debut__bouton{margin-top:4px;} .pfo-carnet-section{padding-top:clamp(28px,4vh,44px);} .pfo-carnet{position:relative;display:flex;flex-direction:column;gap:18px;margin:0;} .pfo-carnet::before{content:"";position:absolute;left:29px;top:10px;bottom:10px;width:0;border-left:2px dashed var(--ocre);} .pfo-carnet__ligne{position:relative;display:grid;grid-template-columns:76px minmax(0,1fr);align-items:start;} .pfo-carnet__prof{position:relative;z-index:1;justify-self:start;display:inline-flex;align-items:center;height:28px;margin-top:14px;padding:0 10px;border-radius:999px;background:var(--basalte);box-shadow:0 0 0 4px var(--craie);} .pfo-carnet__prof::before{content:attr(data-n);color:var(--sable);font:740 13.5px/28px var(--f-titre);font-variation-settings:'wdth' 100;font-variant-numeric:tabular-nums lining-nums;white-space:nowrap;} .pfo-carnet__carte{display:flex;background:var(--blanc);border:1px solid var(--trait);border-left:5px solid var(--marne);border-radius:var(--r-carte);overflow:hidden;box-shadow:var(--ombre-douce);transition:transform .2s ease,box-shadow .2s ease;min-width:0;} .pfo-carnet__carte:hover{transform:translateY(-2px);box-shadow:var(--ombre);} .pfo-carnet__photo{position:relative;flex:0 0 260px;min-height:160px;background:var(--motif-vide);overflow:hidden;} .pfo-carnet__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .pfo-carnet__corps{display:flex;flex-direction:column;justify-content:center;gap:6px;padding:16px 22px;min-width:0;} .pfo-carnet__titre{font:740 clamp(19px,1.7vw,23px)/1.2 var(--f-titre);font-variation-settings:'wdth' 108;color:var(--basalte);} .pfo-carnet__carte:hover .pfo-carnet__titre{text-decoration:underline;text-decoration-color:var(--ocre);text-underline-offset:4px;text-decoration-thickness:2px;} .pfo-carnet__extrait{font-size:15.5px;line-height:1.5;color:var(--gris);} .pfo-carnet__meta{font-size:13px;color:var(--gris);} .pfo-strates{display:flex;flex-direction:column;border-radius:var(--r-carte);overflow:hidden;box-shadow:var(--ombre);} .pfo-strates__couche{display:flex;align-items:center;gap:16px;padding:12px 18px;min-height:84px;border-bottom:1px solid rgba(31,43,46,.4);} .pfo-strates__couche:last-child{border-bottom:0;} .pfo-strates__couche--1{background:var(--p-sable);} .pfo-strates__couche--2{background:var(--p-calcaire);} .pfo-strates__couche--3{background:var(--p-marne);} .pfo-strates__carte{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;background:var(--blanc);border-radius:12px;padding:10px 18px;box-shadow:0 2px 8px -4px rgba(31,43,46,.4);} .pfo-strates__carte strong{font:760 20px/1.2 var(--f-titre);font-variation-settings:'wdth' 108;color:var(--basalte);} .pfo-strates__carte span{font-size:14.5px;line-height:1.4;color:var(--gris);} .pfo-strates__couche:hover .pfo-strates__carte strong{text-decoration:underline;text-decoration-color:var(--ocre);text-underline-offset:4px;text-decoration-thickness:2px;} .pfo-strates__nb{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;height:56px;border-radius:12px;background:var(--basalte);color:#fff;font:780 22px/1 var(--f-titre);font-variant-numeric:tabular-nums lining-nums;} .pfo-strates__nb small{font:600 11.5px/1.2 var(--f-corps);color:var(--sable);margin-top:2px;} @media (max-width:860px){ .pfo-debut{flex-direction:column;} .pfo-debut__photo{flex:none;min-height:0;aspect-ratio:16/10;} .pfo-carnet::before{left:23px;} .pfo-carnet__ligne{grid-template-columns:48px minmax(0,1fr);} .pfo-carnet__prof{padding:0 6px;} .pfo-carnet__prof::before{font-size:12px;} .pfo-carnet__carte{flex-direction:column;} .pfo-carnet__photo{flex:none;min-height:0;aspect-ratio:16/10;} .pfo-strates__couche{padding:10px 12px;gap:10px;} .pfo-strates__carte{padding:8px 12px;} .pfo-strates__carte span{display:none;} } /* Passe orchestrateur 03/11 : l'étiquette du curseur reste DANS la boîte du curseur (hors cadre de 9 px mesuré par sb-sortie) */ .pfo-log .pfo-log__curseur{height:18px;margin-top:-9px;border-top:0;background:linear-gradient(var(--ocre),var(--ocre)) 0 8px/100% 2px no-repeat;} .pfo-log .pfo-log__curseur b{top:0;} .pfo-log .pfo-log__curseur::after{top:-2px;} /* ===================== 22. PASSE 2 (03/11/2026) : jugement visuel n°1 ===================== */ /* 3. Zéro barré : jamais de « θ » ; les chiffres des titres viennent d'Encode Sans (fonts.css), zéro barré désactivé partout */ body{font-feature-settings:"zero" 0;} /* 1. Hero : la pompe reste visible à droite de la fiche ; une tuile preuve en strates remplit le bas de la colonne de texte */ .pfo-hero__photo img{object-position:70% 40%;} .pfo-preuve{display:flex;align-items:stretch;margin:18px 0 0;max-width:470px;background:var(--blanc);border:1px solid var(--trait);border-radius:var(--r-carte);overflow:hidden;box-shadow:var(--ombre-douce);} .pfo-preuve__coupe{flex:0 0 58px;display:flex;flex-direction:column;} .pfo-preuve__coupe i{display:block;flex:1;} .pfo-preuve__coupe i:nth-child(1){background:var(--p-sable);} .pfo-preuve__coupe i:nth-child(2){background:var(--p-calcaire);} .pfo-preuve__coupe i:nth-child(3){background:var(--p-marne);} .pfo-preuve__coupe i:nth-child(4){background:var(--p-nappe);} .pfo-preuve__texte{display:flex;flex-direction:column;gap:2px;padding:12px 18px;min-width:0;} .pfo-preuve__texte strong{font:760 17px/1.2 var(--f-titre);font-variation-settings:'wdth' 106;color:var(--basalte);} .pfo-preuve__texte span{font-size:14.5px;line-height:1.4;color:var(--gris);} @media (max-width:1180px){ .pfo-hero .pfo-preuve{display:none;} } /* 2. « Du forage au robinet » : photos de 172 px = image à la une du guide lié ; section compacte (2 rangées de 3 sous 700 px) */ #etapes.pfo-section{padding-block:clamp(26px,4vh,38px);} #etapes .pfo-section__tete{margin-bottom:18px;gap:6px 32px;} #etapes .pfo-section__chapo{font-size:16px;max-width:30em;} .pfo-parcours{gap:18px;} .pfo-parcours__item{display:flex;min-width:0;} .pfo-parcours .pfo-parcours__etape{flex:1;color:var(--basalte);gap:6px;padding-bottom:14px;} .pfo-parcours .pfo-parcours__photo{height:172px;flex:none;} .pfo-parcours .pfo-parcours__prof{position:absolute;left:14px;top:156px;margin:0;align-self:auto;} .pfo-parcours__titre{display:block;margin-top:8px;padding:0 16px;font:740 17px/1.2 var(--f-titre);font-variation-settings:'wdth' 100;color:var(--basalte);} a.pfo-parcours__etape:hover .pfo-parcours__titre{text-decoration:underline;text-decoration-color:var(--ocre);text-underline-offset:4px;text-decoration-thickness:2px;} .pfo-parcours__texte{display:block;padding:0 16px;font-size:14.5px;line-height:1.4;color:var(--gris);} /* 5. Barre collante masquée tant qu'un formulaire est visible ; liste des communes en 2 colonnes sur mobile */ .pfo-barre-collante{transition:transform .22s ease,visibility .22s;} .pfo-barre-collante.est-masquee{transform:translateY(110%);visibility:hidden;} @media (max-width:420px){ .pfo-zone__liste{columns:2;column-gap:8px;} .pfo-zone__liste a,.pfo-zone__liste span[data-slug]{padding:3px 8px;font-size:13.5px;} } /* 7. Écart menu → bande = 4 px exactement (plus de bande crème) */ .pfo-rub-tete,.pfo-art-tete,.pfo-bandeau,.pfo-bandeau-simple{margin-top:4px;} @media (max-width:760px){ .pfo-art-tete{margin-top:4px;} } /* 8. En-tête d'article : carte photo à 40 % de la largeur, bande d'étiquette pleine largeur de la carte */ @media (min-width:1181px){ .pfo-art-tete__grille{grid-template-columns:minmax(0,1fr) clamp(var(--aside),40%,620px);} } .pfo-art-tete{padding-bottom:72px;} .pfo-art-tete--sans-photo{padding-bottom:44px;} .pfo-art-tete__photo .pfo-etiquette-niveau{left:0;right:0;bottom:-30px;max-width:none;justify-content:space-between;padding:9px 16px;} @media (max-width:760px){ .pfo-art-tete__photo .pfo-etiquette-niveau{left:0;right:0;max-width:none;} } @media (max-width:480px){ .pfo-art-tete__regle{display:none;} } /* 9. Photos réelles dans le corps d'un guide */ .pfo-corps figure.pfo-figure{margin:30px 0;width:100%;max-width:none;} .pfo-corps figure.pfo-figure img{display:block;width:100%;height:auto;max-height:520px;object-fit:cover;border-radius:16px;margin:0;box-shadow:var(--ombre-douce);} .pfo-corps figure.pfo-figure figcaption{font-size:14px;line-height:1.45;color:var(--basalte);margin-top:10px;} .pfo-corps figure.pfo-figure .pfo-figure__credit{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:var(--gris);} @media (max-width:760px){ .pfo-corps figure.pfo-figure img{max-height:320px;} } /* 10. Contact : en-tête compact avec photo et strates, formulaire entier au-dessus du pli */ .pfo-bandeau-simple--photo{overflow:hidden;} .pfo-bandeau-simple--photo .pfo-bandeau-simple__in{position:relative;z-index:2;padding-block:22px 34px;} .pfo-bandeau-simple--photo h1{font-size:clamp(28px,2.8vw,40px);max-width:58%;} .pfo-bandeau-simple--photo .pfo-bandeau-simple__chapo{margin:6px 0 0;font-size:17px;max-width:56%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pfo-bandeau-simple__visuel{position:absolute;top:0;right:0;bottom:0;width:min(38%,560px);z-index:1;border-radius:var(--r-photo) 0 0 var(--r-photo);overflow:hidden;background:var(--motif-vide);} .pfo-bandeau-simple__photo{position:absolute;inset:0;} .pfo-bandeau-simple__photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;} .pfo-log--mini{width:36px;box-shadow:none;} .pfo-log--mini .pfo-log__regle,.pfo-log--mini .pfo-log__curseur{display:none;} .pfo-contact.pfo-section{padding-top:28px;} .pfo-contact__cote .pfo-preuve{max-width:none;} @media (max-width:760px){ .pfo-bandeau-simple__visuel{display:none;} .pfo-bandeau-simple--photo h1{max-width:none;} } /* 11. Qui sommes-nous : la zone en lien + carte seule */ .pfo-carte-seule{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:center;} .pfo-carte-seule > *{min-width:0;} .pfo-carte-seule__carte svg{max-height:340px;} @media (max-width:980px){ .pfo-carte-seule{grid-template-columns:1fr;gap:24px;} } /* 12. Notre équipe : fiche + ses 3 derniers guides en vignettes */ .pfo-equipe-bloc{display:flex;flex-direction:column;gap:14px;min-width:0;} .pfo-equipe-guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;} .pfo-mini-guide{display:flex;flex-direction:column;background:var(--blanc);border:1px solid var(--trait);border-radius:12px;overflow:hidden;box-shadow:var(--ombre-douce);transition:transform .2s ease,box-shadow .2s ease;min-width:0;} .pfo-mini-guide:hover{transform:translateY(-2px);box-shadow:var(--ombre);} .pfo-mini-guide__photo{position:relative;display:block;height:112px;background:var(--motif-vide);overflow:hidden;} .pfo-mini-guide__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .pfo-mini-guide__titre{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;padding:10px 12px 12px;font:720 14px/1.3 var(--f-titre);font-variation-settings:'wdth' 100;color:var(--basalte);} .pfo-mini-guide:hover .pfo-mini-guide__titre{text-decoration:underline;text-decoration-color:var(--ocre);text-underline-offset:3px;} @media (max-width:560px){ .pfo-equipe-guides{grid-template-columns:1fr;} .pfo-mini-guide{flex-direction:row;} .pfo-mini-guide__photo{flex:0 0 112px;height:auto;min-height:84px;} .pfo-mini-guide__titre{align-self:center;-webkit-line-clamp:4;} } /* 13. Page ville : carte agrandie, la commune en ocre ; communes les plus proches */ .pfo-ville-situe .pfo-mini-carte{width:200px;} .pfo-mini-carte svg .carte-fond path{fill:#E7E3D0;stroke:#fff;stroke-width:.6;} .pfo-mini-carte svg [data-slug]{fill:#BFCBC3;stroke:#fff;stroke-width:.6;} .pfo-mini-carte svg [data-slug].est-active{fill:var(--ocre);stroke:var(--basalte);stroke-width:2.6;vector-effect:non-scaling-stroke;} .pfo-ville-aside__toutes{display:inline-block;margin-top:12px;font-size:14.5px;} /* Passe orchestrateur 03/11 (2) : la photo d'en-tête de Contact reste affichée sur mobile (rendu_page) ; chapô jamais coupé */ .pfo-bandeau-simple--photo .pfo-bandeau-simple__chapo{white-space:normal;overflow:visible;text-overflow:clip;} @media (max-width:760px){ .pfo-bandeau-simple--photo .pfo-bandeau-simple__visuel{display:block;position:relative;inset:auto;width:auto;height:84px;margin:0 16px 12px;border-radius:14px;} } /* Passe orchestrateur 03/11 (3) : Contact — photo du métier sous les réassurances, à hauteur du formulaire (juge n°2) */ .pfo-contact__cote{display:flex;flex-direction:column;} .pfo-contact__photo{margin:18px 0 0;flex:1 1 auto;min-height:200px;max-height:300px;border-radius:16px;overflow:hidden;box-shadow:0 22px 44px -20px rgba(31,43,46,.38);} .pfo-contact__photo img{display:block;width:100%;height:100%;min-height:200px;object-fit:cover;object-position:50% 35%;} .pfo-bandeau-simple--photo .pfo-bandeau-simple__visuel{width:96px;border-radius:0;} @media (max-width:760px){ .pfo-contact__photo{max-height:220px;} .pfo-bandeau-simple--photo .pfo-bandeau-simple__visuel{display:none;} } .pfo-contact__photo{max-height:186px;min-height:150px;} .pfo-contact__photo img{min-height:150px;}