/* * postederelevage.com — thème pdr-encoche, DA du 02/10/2026 (« L'encoche du regard »). * Mode clair UNIQUEMENT (GD-030, DA §7.5) : color-scheme:light posé exprès pour * qu'un navigateur en sombre ne réécrive pas les champs/boutons tout seul — c'est * la façon dont CE site "tient" en mode sombre système, sans jamais en proposer un. * Jetons de design en --sb-* (namespace commun du réseau), classes en .pdr-*. */ /* ===================== 1. JETONS ===================== */ :root{ color-scheme:light; /* Palette (DA §2) */ --sb-sable:#F3EEE5; --sb-brume:#E7EBF5; --sb-ecume:#FFFFFF; --sb-ardoise:#1C2430; --sb-galet:#5B6470; --sb-trait:#DCDFE4; --sb-bleu:#2A3FCB; --sb-bleu-survol:#1F2F9E; --sb-eau:#E6EAF8; --sb-alarme:#B8301E; --sb-alarme-fond:#FBE9E6; --sb-remis:#1F8A5B; --sb-remis-fond:#E6F4ED; /* Typo */ --sb-font-titre:'Alexandria',sans-serif; --sb-font-texte:'Hanken Grotesk',sans-serif; /* Rayons (DA §4) */ --sb-r-panel:28px; --sb-r-photo:24px; --sb-r-carte:20px; --sb-r-tuile:16px; --sb-r-champ:14px; --sb-r-pilule:999px; /* Ombres (teintées Ardoise/Bleu, jamais noires) */ --sb-ombre-carte:0 1px 2px rgba(28,36,48,.06),0 6px 20px rgba(28,36,48,.07); --sb-ombre-flottant:0 2px 6px rgba(28,36,48,.06),0 28px 64px rgba(28,36,48,.14); --sb-ombre-bouton:0 12px 28px rgba(42,63,203,.28); --sb-ombre-menu:0 10px 24px rgba(91,100,112,.10); --sb-ombre-panel:0 24px 60px rgba(28,36,48,.08); --sb-conteneur:1400px; --sb-inset:20px; } @media (min-width:1600px){ :root{ --sb-inset:40px; } } @media (max-width:760px){ :root{ --sb-inset:12px; --sb-r-panel:22px; } } /* ===================== 2. BASE ===================== */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth;} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} } body{ margin:0; background:var(--sb-sable); color:var(--sb-ardoise); font-family:var(--sb-font-texte); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;display:block;} a{color:inherit;text-decoration:none;} button{font:inherit;cursor:pointer;background:none;border:none;color:inherit;} ul{list-style:none;margin:0;padding:0;} h1,h2,h3,h4{font-family:var(--sb-font-titre);font-weight:600;margin:0;color:var(--sb-ardoise);} p{margin:0 0 16px;} .conteneur{max-width:var(--sb-conteneur);margin-inline:auto;padding-inline:var(--sb-inset);} .pdr-accent{color:var(--sb-bleu);} .pdr-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;} .pdr-skip{position:absolute;left:-9999px;top:0;background:var(--sb-ardoise);color:#fff;padding:12px 20px;border-radius:0 0 10px 0;z-index:999;} .pdr-skip:focus{left:0;} /* Apparitions discrètes (P-203/DA §4) */ [data-pdr-apparait]{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;} [data-pdr-apparait].est-visible{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ [data-pdr-apparait]{opacity:1;transform:none;transition:none;} } /* ===================== 3. BOUTONS ===================== */ .pdr-btn{ display:inline-flex;align-items:center;gap:10px;justify-content:center; height:56px;padding:0 28px;border-radius:var(--sb-r-pilule); font-family:var(--sb-font-texte);font-weight:700;font-size:16px; background:var(--sb-ecume);color:var(--sb-ardoise);border:1.5px solid var(--sb-trait); transition:transform .18s ease,box-shadow .18s ease,background .18s ease; } .pdr-btn:hover{transform:translateY(-2px);} .pdr-btn__fleche{transition:transform .18s ease;} .pdr-btn:hover .pdr-btn__fleche{transform:translateX(3px);} .pdr-btn--plein{background:var(--sb-bleu);color:#fff;border-color:transparent;box-shadow:var(--sb-ombre-bouton);} .pdr-btn--plein:hover{background:var(--sb-bleu-survol);} .pdr-btn--blanc{background:#fff;color:var(--sb-ardoise);box-shadow:var(--sb-ombre-carte);} .pdr-btn--sombre{background:var(--sb-ardoise);color:#fff;} .pdr-btn--grand{height:60px;padding:0 34px;} .pdr-btn--pleine-largeur{width:100%;} .pdr-btn:disabled,.pdr-btn.est-desactive{opacity:.35;pointer-events:none;box-shadow:none;} .pdr-surtitre{ display:inline-flex;align-items:center;gap:6px; background:var(--sb-eau);color:var(--sb-bleu); font:700 13px/1 var(--sb-font-texte);text-transform:uppercase;letter-spacing:.08em; padding:9px 16px;border-radius:var(--sb-r-pilule); } /* ===================== 4. EN-TÊTE ===================== */ .pdr-header{position:sticky;top:0;z-index:60;padding:16px 0;transition:background .25s ease,box-shadow .25s ease;} .pdr-header.est-colle{background:rgba(243,238,229,.85);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(28,36,48,.06);} .pdr-header__ligne{display:flex;align-items:center;gap:20px;} .pdr-logo{display:flex;align-items:center;gap:10px;margin-right:auto;} .pdr-logo__symbole{width:40px;height:40px;flex:none;} .pdr-logo__texte{font-family:var(--sb-font-titre);font-weight:700;font-size:18px;color:var(--sb-ardoise);white-space:nowrap;} .pdr-logo__tld{font-family:var(--sb-font-texte);font-weight:500;color:var(--sb-galet);} .pdr-nav__liste{display:flex;gap:8px;flex-wrap:nowrap;} .pdr-nav__lien{ display:inline-flex;align-items:center;height:40px;padding:0 18px; background:var(--sb-ecume);border-radius:var(--sb-r-pilule);box-shadow:var(--sb-ombre-menu); font-weight:600;font-size:14px;white-space:nowrap;transition:background .2s ease,color .2s ease; } .pdr-nav__lien:hover,.pdr-nav__lien.est-actif{background:var(--sb-bleu);color:#fff;} .pdr-header__cta{height:44px;padding:0 22px;font-size:14px;flex:none;} .pdr-nav__bascule{display:none;width:44px;height:44px;border-radius:50%;background:var(--sb-ecume);box-shadow:var(--sb-ombre-menu);align-items:center;justify-content:center;flex:none;} .pdr-nav__traits,.pdr-nav__traits::before,.pdr-nav__traits::after{display:block;width:18px;height:2px;background:var(--sb-ardoise);border-radius:2px;} .pdr-nav__traits{position:relative;} .pdr-nav__traits::before{content:"";position:absolute;top:-6px;} .pdr-nav__traits::after{content:"";position:absolute;top:6px;} .pdr-mobile-panel{position:fixed;inset:0;background:#fff;z-index:100;display:flex;flex-direction:column;padding:24px var(--sb-inset);transform:translateY(-100%);transition:transform .3s ease;} .pdr-mobile-panel.est-ouvert{transform:none;} .pdr-mobile-panel__tete{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;} .pdr-mobile-panel__liste{display:flex;flex-direction:column;gap:4px;flex:1;} .pdr-mobile-panel__lien{height:56px;display:flex;align-items:center;font-family:var(--sb-font-titre);font-weight:600;font-size:19px;border-bottom:1px solid var(--sb-trait);} .pdr-mobile-panel__cta{margin-top:20px;} @media (max-width:980px){ .pdr-nav__liste{display:none;} .pdr-nav__bascule{display:flex;} .pdr-header__cta .pdr-header__cta-long{display:none;} } @media (min-width:981px){ .pdr-header__cta-court{display:none;} } /* ===================== 5. PANNEAUX DE SECTION ===================== */ .pdr-section{padding:24px var(--sb-inset);} .pdr-section__panneau{ max-width:calc(var(--sb-conteneur) + 2*var(--sb-inset));margin-inline:auto; border-radius:var(--sb-r-panel);padding:88px 72px; } .pdr-section--blanc .pdr-section__panneau{background:var(--sb-ecume);box-shadow:var(--sb-ombre-carte);} .pdr-section--eau .pdr-section__panneau{background:var(--sb-eau);} .pdr-section--ardoise .pdr-section__panneau{background:var(--sb-ardoise);color:rgba(255,255,255,.92);} .pdr-section--ardoise h2,.pdr-section--ardoise h3{color:#fff;} .pdr-section--nue{padding-block:0;} .pdr-section__tete{max-width:680px;margin-bottom:40px;} .pdr-section__tete h2{font-size:52px;line-height:1.05;margin-top:16px;} .pdr-section__chapo{color:var(--sb-galet);font-size:20px;margin-top:14px;} .pdr-section--ardoise .pdr-section__chapo{color:rgba(255,255,255,.72);} @media (max-width:760px){ .pdr-section__panneau{padding:40px 20px;} .pdr-section__tete h2{font-size:30px;} } /* ===================== 6. L'ENCOCHE DU REGARD ===================== */ .pdr-encoche{position:relative;border-radius:var(--sb-r-photo);overflow:hidden;background:var(--sb-eau);} .pdr-encoche img{width:100%;height:100%;object-fit:cover;} .pdr-encoche__decoupe{position:absolute;background:var(--sb-encoche-fond,var(--sb-sable));} .pdr-encoche--bas-gauche .pdr-encoche__decoupe{left:0;bottom:0;border-top-right-radius:24px;} .pdr-encoche--bas-droite .pdr-encoche__decoupe{right:0;bottom:0;border-top-left-radius:24px;} .pdr-encoche--haut-gauche .pdr-encoche__decoupe{left:0;top:0;border-bottom-right-radius:24px;} .pdr-encoche--haut-droite .pdr-encoche__decoupe{right:0;top:0;border-bottom-left-radius:24px;} .pdr-encoche__contenu{position:absolute;z-index:2;} /* Pastille des communes nichée dans l'encoche (hero, commune) */ .pdr-pastille-communes{ display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--sb-r-carte); box-shadow:var(--sb-ombre-flottant);padding:14px 18px;font-weight:700;font-size:14px; } .pdr-pastille-communes__icone{width:36px;height:36px;border-radius:10px;background:var(--sb-eau);color:var(--sb-bleu);display:flex;align-items:center;justify-content:center;flex:none;} .pdr-pastille-communes__icone svg{width:18px;height:18px;} /* ===================== 7. HÉROS (accueil + commune) ===================== */ .pdr-hero{position:relative;padding-top:24px;} .pdr-hero--accueil{background:linear-gradient(180deg,var(--sb-brume) 0,var(--sb-sable) 900px);} .pdr-hero__conteneur{max-width:var(--sb-conteneur);margin-inline:auto;padding-inline:var(--sb-inset); display:grid;grid-template-columns:minmax(0,540px) 1fr;gap:40px;align-items:start;padding-bottom:40px;position:relative;} .pdr-hero__texte{padding-top:60px;} .pdr-hero__titre{font:600 64px/0.98 var(--sb-font-titre);letter-spacing:-0.025em;margin:22px 0 18px;max-width:9.5ch;} .pdr-hero__chapo{font-size:19px;color:var(--sb-galet);max-width:440px;margin-bottom:28px;} .pdr-hero__preuves{display:flex;gap:16px;flex-wrap:wrap;} .pdr-hero__photo-zone{position:relative;min-height:600px;} .pdr-hero__photo{position:absolute;inset:0;box-shadow:var(--sb-ombre-panel);border-radius:var(--sb-r-panel);} .pdr-hero__photo .pdr-encoche__decoupe{width:220px;height:104px;} .pdr-hero__photo .pdr-encoche__contenu{left:-40px;bottom:16px;max-width:260px;} .pdr-hero__form-zone{position:absolute;left:60px;top:36px;width:420px;max-width:calc(100% - 80px);z-index:5;} .pdr-hero__badge-minute{ display:inline-flex;margin-bottom:-18px;position:relative;z-index:2;left:24px; background:var(--sb-ardoise);color:#fff;font-size:13px;font-weight:700; padding:8px 16px;border-radius:var(--sb-r-pilule);box-shadow:var(--sb-ombre-carte); } .pdr-pastille-chiffre{display:flex;flex-direction:column;background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-carte);padding:12px 18px;min-width:140px;} .pdr-pastille-chiffre__valeur{font:600 28px/1 var(--sb-font-titre);font-variant-numeric:tabular-nums;color:var(--sb-ardoise);} .pdr-pastille-chiffre__legende{font-size:13px;color:var(--sb-galet);margin-top:2px;} @media (max-width:1180px){ .pdr-hero__conteneur{grid-template-columns:1fr;} .pdr-hero__photo-zone{min-height:420px;} .pdr-hero__form-zone{position:relative;left:0;top:-80px;width:100%;max-width:460px;margin-inline:auto;margin-bottom:-56px;} } @media (max-width:760px){ .pdr-hero__texte{padding-top:16px;} .pdr-hero__titre{font-size:38px;max-width:none;} .pdr-hero__photo-zone{min-height:200px;} .pdr-hero__photo .pdr-encoche__decoupe{width:140px;height:64px;} .pdr-hero__form-zone{top:-64px;margin-bottom:-64px;} .pdr-hero__preuves{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;} } /* Barre basse collante mobile */ .pdr-barre-collante{position:fixed;left:0;right:0;bottom:0;z-index:70;background:#fff;box-shadow:0 -10px 24px rgba(28,36,48,.10);padding:10px var(--sb-inset);display:none;} @media (max-width:760px){ .pdr-barre-collante{display:flex;} body{padding-bottom:72px;} } .pdr-barre-collante .pdr-btn{width:100%;} /* ===================== 8. LE FORMULAIRE-DIAGNOSTIC ===================== */ .pdr-form{background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-flottant);padding:28px;position:relative;overflow:hidden;} .pdr-form--pleine{padding:40px;} .pdr-form__entete{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;} .pdr-form__compteur{font:600 14px var(--sb-font-texte);color:var(--sb-galet);} .pdr-form__retour{font-size:13px;color:var(--sb-bleu);font-weight:700;display:none;} .pdr-form[data-pdr-pas="0"] .pdr-form__retour, .pdr-form[data-pdr-pas="1"] .pdr-form__retour{display:none;} .pdr-form:not([data-pdr-pas="0"]) .pdr-form__retour{display:inline-flex;} .pdr-form__progression{display:flex;gap:6px;margin-bottom:4px;} .pdr-form__segment{flex:1;height:6px;border-radius:3px;background:var(--sb-trait);overflow:hidden;} .pdr-form__segment i{display:block;height:100%;width:0;background:var(--sb-bleu);transition:width .4s ease;} .pdr-form__segment.est-fait i,.pdr-form__segment.est-actif i{width:100%;} .pdr-form__noms-etapes{display:flex;gap:6px;margin-bottom:20px;} .pdr-form__nom-etape{flex:1;font-size:11px;color:var(--sb-galet);text-align:center;} .pdr-form__nom-etape.est-actif{color:var(--sb-ardoise);font-weight:600;} .pdr-form__etape{display:none;} .pdr-form__etape.est-active{display:block;animation:pdrEtape .22s cubic-bezier(.2,.7,.2,1);} @keyframes pdrEtape{from{opacity:0;transform:translateX(24px);}to{opacity:1;transform:none;}} @media (prefers-reduced-motion:reduce){ .pdr-form__etape.est-active{animation:none;} } .pdr-form__question{font:600 24px var(--sb-font-titre);color:var(--sb-ardoise);margin-bottom:18px;} .pdr-form__question--petite{font-size:15px;margin:22px 0 10px;} .pdr-form__tuiles{display:grid;gap:12px;margin-bottom:18px;} .pdr-form__tuiles--grille2{grid-template-columns:1fr 1fr;} .pdr-form__tuiles--colonne{grid-template-columns:1fr;} .pdr-form__tuile{ position:relative;display:flex;align-items:center;gap:12px; min-height:100px;padding:14px 16px;border-radius:var(--sb-r-tuile); background:#fff;border:1.5px solid var(--sb-trait);text-align:left; transition:transform .15s ease,border-color .15s ease,background .15s ease,box-shadow .15s ease; } .pdr-form__tuiles--grille2 .pdr-form__tuile{flex-direction:column;align-items:flex-start;justify-content:center;} .pdr-form__tuiles--colonne .pdr-form__tuile{min-height:60px;flex-direction:row;} .pdr-form__tuile:hover{transform:translateY(-2px);box-shadow:var(--sb-ombre-carte);border-color:rgba(42,63,203,.4);} .pdr-form__tuile.est-choisi{border-color:var(--sb-bleu);border-width:2px;background:var(--sb-eau);} .pdr-form__tuile__icone{width:48px;height:48px;border-radius:12px;background:var(--sb-eau);color:var(--sb-bleu);display:flex;align-items:center;justify-content:center;flex:none;} .pdr-form__tuile__icone svg{width:26px;height:26px;} .pdr-form__tuile.est-choisi .pdr-form__tuile__icone{background:#fff;} .pdr-form__tuile__texte{font-weight:600;font-size:16px;line-height:1.25;} .pdr-form__tuile__sous{display:block;font-size:13px;color:var(--sb-galet);font-weight:400;} .pdr-form__tuile__coche{position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--sb-bleu);color:#fff;display:flex;align-items:center;justify-content:center;transform:scale(0);transition:transform .15s cubic-bezier(.34,1.56,.64,1);} .pdr-form__tuile.est-choisi .pdr-form__tuile__coche{transform:scale(1);} .pdr-form__tuile__coche svg{width:12px;height:12px;} .pdr-form__segmente{display:flex;gap:8px;margin:8px 0 18px;flex-wrap:wrap;} .pdr-form__segmente button{flex:1;min-width:100px;height:44px;border-radius:var(--sb-r-pilule);border:1.5px solid var(--sb-trait);font-weight:600;font-size:13px;transition:background .15s,border-color .15s,color .15s;} .pdr-form__segmente button.est-choisi{background:var(--sb-bleu);border-color:var(--sb-bleu);color:#fff;} .pdr-form__alerte{display:none;background:var(--sb-alarme-fond);color:var(--sb-alarme);border-radius:var(--sb-r-tuile);padding:12px 16px;font-size:14px;font-weight:600;margin-bottom:16px;} .pdr-form__alerte.est-visible{display:block;} .pdr-form__champ{margin-bottom:16px;} .pdr-form__champ label{display:block;font-size:13px;font-weight:600;margin-bottom:6px;color:var(--sb-ardoise);} .pdr-form__champ input,.pdr-form__champ select,.pdr-form__champ textarea{ width:100%;height:56px;border-radius:var(--sb-r-champ);border:1.5px solid var(--sb-trait); padding:0 16px;font:16px var(--sb-font-texte);background:#fff;color:var(--sb-ardoise); } .pdr-form__champ textarea{height:auto;padding:12px 16px;} .pdr-form__champ input:focus,.pdr-form__champ select:focus,.pdr-form__champ textarea:focus{ outline:none;border-color:var(--sb-bleu);box-shadow:0 0 0 4px rgba(42,63,203,.15); } .pdr-form__champ.est-en-erreur input{border-color:var(--sb-alarme);} .pdr-form__erreur{display:block;color:var(--sb-alarme);font-size:13px;margin-top:6px;} .pdr-form__indication{display:block;color:var(--sb-galet);font-size:13px;margin-top:6px;} .pdr-form__pilules-rapides{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 18px;} .pdr-form__pilule{height:38px;padding:0 16px;border-radius:var(--sb-r-pilule);background:var(--sb-eau);color:var(--sb-bleu);font-size:13px;font-weight:600;} .pdr-form__pilule.est-choisi{background:var(--sb-bleu);color:#fff;} .pdr-form__creneaux{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;} .pdr-form__detail-bascule{font-size:13px;color:var(--sb-bleu);font-weight:700;margin-bottom:12px;} .pdr-form__consentement{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--sb-galet);margin-bottom:18px;} .pdr-form__consentement input{margin-top:3px;} .pdr-form__consentement a{color:var(--sb-bleu);font-weight:600;} .pdr-form__nav{display:flex;gap:10px;align-items:center;} .pdr-form__bouton{flex:1;} .pdr-form__cadenas-note{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--sb-galet);margin-top:12px;} .pdr-form__piege{position:absolute;left:-9999px;} .pdr-form__confirmation{display:none;text-align:center;padding:20px 0;} .pdr-form__confirmation.est-visible{display:block;} .pdr-form__confirmation-cercle{width:64px;height:64px;border-radius:50%;background:var(--sb-remis-fond);color:var(--sb-remis);display:flex;align-items:center;justify-content:center;margin:0 auto 16px;} .pdr-form__confirmation-cercle svg{width:30px;height:30px;} .pdr-form__confirmation h3{font:600 24px var(--sb-font-titre);} .pdr-form__recap{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0;} .pdr-form__recap span{background:var(--sb-eau);color:var(--sb-bleu);border-radius:var(--sb-r-pilule);padding:6px 14px;font-size:13px;font-weight:600;} .pdr-form__suite{text-align:left;max-width:360px;margin:16px auto 0;display:flex;flex-direction:column;gap:10px;} .pdr-form__suite li{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--sb-galet);} .pdr-form--compacte{padding:22px;} .pdr-form--compacte .pdr-form__question{font-size:19px;} .pdr-form--compacte .pdr-form__tuile{min-height:56px;} /* ===================== 9. CARTES & PASTILLES DE RUBRIQUE ===================== */ .pdr-carte{display:flex;flex-direction:column;background:#fff;border-radius:var(--sb-r-carte);overflow:hidden;box-shadow:var(--sb-ombre-carte);transition:transform .2s ease,box-shadow .2s ease;} .pdr-carte:hover{transform:translateY(-4px);box-shadow:var(--sb-ombre-flottant);} .pdr-carte__photo{position:relative;aspect-ratio:4/3;background:var(--sb-eau);} .pdr-carte__photo img{width:100%;height:100%;object-fit:cover;} .pdr-carte__pastille{position:absolute;left:14px;top:14px;background:#fff;color:var(--sb-bleu);font-size:12px;font-weight:700;padding:6px 12px;border-radius:var(--sb-r-pilule);} .pdr-carte__corps{padding:20px;display:flex;flex-direction:column;gap:8px;flex:1;} .pdr-carte__titre{font:600 20px var(--sb-font-titre);line-height:1.25;} .pdr-carte__extrait{color:var(--sb-galet);font-size:15px;margin:0;} .pdr-carte__meta{color:var(--sb-galet);font-size:13px;margin-top:auto;} .pdr-grille-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;} .pdr-grille-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;} @media (max-width:980px){ .pdr-grille-3{grid-template-columns:repeat(2,1fr);} } @media (max-width:620px){ .pdr-grille-3,.pdr-grille-2{grid-template-columns:1fr;} } /* ===================== 10. CARROUSEL "CE QUI VOUS ARRIVE" ===================== */ .pdr-carrousel{position:relative;} .pdr-carrousel__piste{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px 4px 16px;} .pdr-carrousel__piste::-webkit-scrollbar{height:6px;} .pdr-situation{flex:0 0 380px;scroll-snap-align:center;border-radius:var(--sb-r-carte);overflow:hidden;position:relative;box-shadow:var(--sb-ombre-carte);transition:flex-basis .25s ease,opacity .25s ease;aspect-ratio:3/4;} .pdr-situation.est-centrale{flex-basis:520px;} .pdr-situation:not(.est-centrale){opacity:.55;} .pdr-situation img{width:100%;height:100%;object-fit:cover;} .pdr-situation__voile{position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(28,36,48,.75));} .pdr-situation__titre{position:absolute;left:20px;right:20px;bottom:20px;color:#fff;font:600 22px var(--sb-font-titre);} .pdr-carrousel__fleche{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:#fff;box-shadow:var(--sb-ombre-carte);display:flex;align-items:center;justify-content:center;z-index:2;} .pdr-carrousel__fleche--prec{left:-8px;} .pdr-carrousel__fleche--suiv{right:-8px;} @media (max-width:760px){ .pdr-carrousel__fleche{display:none;} .pdr-situation{flex-basis:260px;} .pdr-situation.est-centrale{flex-basis:300px;} } /* ===================== 11. INTERVENTION & CARTES À CHEVAL ===================== */ .pdr-intervention{position:relative;margin-bottom:60px;} .pdr-intervention__photo{border-radius:var(--sb-r-photo);overflow:hidden;aspect-ratio:1400/640;box-shadow:var(--sb-ombre-carte);} .pdr-intervention__photo img{width:100%;height:100%;object-fit:cover;} .pdr-etapes-cheval{position:absolute;left:0;right:0;bottom:-56px;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-inline:4%;} .pdr-etape-carte{background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-carte);padding:22px 18px;} .pdr-etape-carte__num{display:block;font:600 40px var(--sb-font-titre);color:var(--sb-bleu);margin-bottom:6px;} .pdr-etape-carte__icone{width:36px;height:36px;color:var(--sb-bleu);margin-bottom:10px;} .pdr-etape-carte p{margin:0;font-size:14px;color:var(--sb-galet);} .pdr-etape-carte strong{display:block;color:var(--sb-ardoise);margin-bottom:4px;font-size:15px;} @media (max-width:980px){ .pdr-etapes-cheval{position:static;grid-template-columns:repeat(2,1fr);margin-top:20px;} .pdr-intervention{margin-bottom:0;} } @media (max-width:620px){ .pdr-etapes-cheval{grid-template-columns:1fr;} } /* ===================== 12. CARTE DES COMMUNES ===================== */ .pdr-zone__grille{display:grid;grid-template-columns:7fr 5fr;gap:40px;align-items:center;} .pdr-zone__carte-wrap{position:relative;background:#fff;border-radius:var(--sb-r-photo);box-shadow:var(--sb-ombre-carte);padding:20px;} .pdr-zone__carte-wrap svg{width:100%;height:auto;} .pdr-zone__carte-wrap svg path{fill:rgba(28,36,48,.06);stroke:#fff;stroke-width:1.5;transition:fill .3s ease;cursor:default;} .pdr-zone__carte-wrap svg path[id^="c-"]{fill:rgba(42,63,203,.22);cursor:pointer;} .pdr-zone__carte-wrap svg path[id^="c-"]:hover, .pdr-zone__carte-wrap svg path[id^="c-"].est-survolee{fill:var(--sb-bleu);} .pdr-zone__etiquette{position:absolute;display:none;background:#fff;border-radius:var(--sb-r-tuile);box-shadow:var(--sb-ombre-flottant);padding:8px 14px;font-size:13px;font-weight:700;pointer-events:none;z-index:3;white-space:nowrap;} .pdr-zone__etiquette.est-visible{display:block;} .pdr-zone__recherche-flottante{position:absolute;right:16px;bottom:-24px;width:260px;background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-flottant);padding:18px;} .pdr-zone__recherche-flottante input{width:100%;height:44px;border-radius:var(--sb-r-champ);border:1.5px solid var(--sb-trait);padding:0 14px;margin:10px 0;} .pdr-zone__liste{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:20px;} .pdr-zone__liste a{display:inline-flex;height:40px;align-items:center;padding:0 16px;background:#fff;border-radius:var(--sb-r-pilule);font-weight:600;font-size:14px;} .pdr-zone__liste a:hover{color:var(--sb-bleu);} .pdr-zone__liste span{display:inline-flex;height:40px;align-items:center;padding:0 16px;background:transparent;color:var(--sb-galet);font-size:14px;} @media (max-width:980px){ .pdr-zone__grille{grid-template-columns:1fr;} .pdr-zone__liste{grid-auto-flow:column;grid-template-columns:none;grid-template-rows:repeat(2,auto);overflow-x:auto;display:flex;flex-wrap:wrap;} } /* Mini-carte (pages ville) */ .pdr-mini-carte{background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-flottant);padding:14px;width:220px;} .pdr-mini-carte svg{width:100%;height:auto;} /* ===================== 13. CHIFFRES GÉANTS (bande Ardoise) ===================== */ .pdr-chiffres-grille{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:24px;} .pdr-chiffre-geant{text-align:center;} .pdr-chiffre-geant data{display:block;font:600 112px/1 var(--sb-font-titre);font-variant-numeric:tabular-nums;color:#fff;} .pdr-chiffre-geant span{color:rgba(255,255,255,.7);font-weight:600;font-size:18px;} @media (max-width:760px){ .pdr-chiffres-grille{grid-template-columns:1fr;} .pdr-chiffre-geant data{font-size:64px;} } /* ===================== 14. FAQ ===================== */ .pdr-faq{columns:2;column-gap:40px;} .pdr-faq-item{break-inside:avoid;margin-bottom:14px;border:1px solid var(--sb-trait);border-radius:var(--sb-r-tuile);padding:18px 20px;background:#fff;} .pdr-faq-item summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;} .pdr-faq-item summary::-webkit-details-marker{display:none;} .pdr-faq-item summary::after{content:"+";font-size:22px;color:var(--sb-bleu);flex:none;} .pdr-faq-item[open] summary::after{content:"–";} .pdr-faq-item p{margin:12px 0 0;color:var(--sb-galet);} @media (max-width:760px){ .pdr-faq{columns:1;} } /* ===================== 15. PANNEAU PHOTO FINAL ===================== */ .pdr-final{position:relative;border-radius:var(--sb-r-panel);overflow:hidden;aspect-ratio:1400/520;max-width:calc(var(--sb-conteneur) + 2*var(--sb-inset));margin-inline:auto;box-shadow:var(--sb-ombre-carte);} .pdr-final img{width:100%;height:100%;object-fit:cover;} .pdr-final__voile{position:absolute;inset:0;background:linear-gradient(0deg,rgba(28,36,48,.65),transparent 55%);} .pdr-final__contenu{position:absolute;left:0;right:0;bottom:48px;text-align:center;color:#fff;padding-inline:24px;} .pdr-final__contenu h2{color:#fff;font-size:40px;margin-bottom:22px;} .pdr-final__boutons{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;} @media (max-width:760px){ .pdr-final{aspect-ratio:3/4;} .pdr-final__contenu h2{font-size:26px;} } /* ===================== 16. PIED DE PAGE ===================== */ .pdr-footer{background:var(--sb-ardoise);border-radius:var(--sb-r-panel) var(--sb-r-panel) 0 0;color:rgba(255,255,255,.72);padding-top:0;overflow:hidden;} .pdr-footer__bandeau{background:rgba(255,255,255,.04);padding:40px var(--sb-inset);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:20px;} .pdr-footer__bandeau h2{color:#fff;font-size:26px;max-width:560px;} .pdr-footer__corps{padding:56px var(--sb-inset) 24px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;} .pdr-footer__marque p{color:rgba(255,255,255,.6);max-width:280px;} .pdr-footer__colonne h3{color:#fff;font-size:15px;margin-bottom:14px;} .pdr-footer__colonne ul{display:flex;flex-direction:column;gap:8px;} .pdr-footer__colonne a:hover{color:#fff;} .pdr-footer__communes{columns:2;column-gap:12px;} .pdr-footer__base{border-top:1px solid rgba(255,255,255,.12);padding:20px var(--sb-inset);display:flex;justify-content:space-between;font-size:13px;flex-wrap:wrap;gap:10px;} @media (max-width:980px){ .pdr-footer__corps{grid-template-columns:1fr 1fr;} } @media (max-width:620px){ .pdr-footer__corps{grid-template-columns:1fr;} } /* ===================== 17. ARTICLE ===================== */ .pdr-fil-ariane{font-size:13px;color:var(--sb-galet);padding:20px var(--sb-inset) 0;max-width:calc(var(--sb-conteneur) + 2*var(--sb-inset));margin-inline:auto;} .pdr-fil-ariane a:hover{color:var(--sb-bleu);} .pdr-article-tete{display:grid;grid-template-columns:7fr 5fr;gap:40px;padding:32px var(--sb-inset) 64px;max-width:calc(var(--sb-conteneur) + 2*var(--sb-inset));margin-inline:auto;align-items:start;} .pdr-article-tete__titre{font:600 52px/1.08 var(--sb-font-titre);margin:16px 0;} .pdr-article-tete__chapo{font-size:20px;color:var(--sb-galet);} .pdr-article-tete__meta{display:flex;gap:10px;align-items:center;margin-top:20px;font-size:14px;color:var(--sb-galet);} .pdr-article-tete__photo{position:relative;aspect-ratio:4/3;} .pdr-fiche-enbref{position:absolute;left:-40px;bottom:-32px;background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-flottant);padding:20px;width:220px;} .pdr-fiche-enbref dt{font-size:12px;color:var(--sb-galet);} .pdr-fiche-enbref dd{margin:0 0 10px;font-weight:700;color:var(--sb-ardoise);} @media (max-width:980px){ .pdr-article-tete{grid-template-columns:1fr;} .pdr-fiche-enbref{position:static;margin-top:16px;width:auto;} } @media (max-width:620px){ .pdr-article-tete__titre{font-size:34px;} } .pdr-article-grille{display:grid;grid-template-columns:220px minmax(0,680px) 320px;gap:40px;align-items:start;max-width:calc(var(--sb-conteneur) + 2*var(--sb-inset));margin-inline:auto;padding:0 var(--sb-inset) 80px;} .pdr-sommaire{position:sticky;top:100px;} .pdr-sommaire strong{display:block;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--sb-galet);margin-bottom:12px;} .pdr-sommaire ol{counter-reset:pdr-sommaire;display:flex;flex-direction:column;gap:10px;} .pdr-sommaire li{counter-increment:pdr-sommaire;font-size:14px;} .pdr-sommaire li::before{content:counter(pdr-sommaire,decimal-leading-zero);color:var(--sb-galet);margin-right:8px;} .pdr-sommaire li.est-actif{color:var(--sb-bleu);font-weight:700;} .pdr-sommaire li.est-actif::before{color:var(--sb-bleu);} .pdr-sommaire a{display:block;} .pdr-corps h2{font-size:30px;margin:40px 0 16px;} .pdr-corps h3{font-size:22px;margin:28px 0 12px;} .pdr-corps p{max-width:68ch;} .pdr-corps strong{color:var(--sb-ardoise);} .pdr-corps a:not(.pdr-btn){color:var(--sb-bleu);text-decoration:underline;text-decoration-color:rgba(42,63,203,.35);text-underline-offset:3px;} .pdr-corps img{border-radius:var(--sb-r-photo);margin:20px 0;} .pdr-corps table{width:100%;border-collapse:collapse;display:block;overflow-x:auto;} .pdr-corps table th,.pdr-corps table td{border:1px solid var(--sb-trait);padding:10px 14px;text-align:left;} .pdr-encadre{border-radius:var(--sb-r-carte);padding:24px 26px;margin:28px 0;} .pdr-encadre--retenir{background:var(--sb-eau);} .pdr-encadre--alerte{background:var(--sb-alarme-fond);border-left:4px solid var(--sb-alarme);} .pdr-encadre strong{display:block;margin-bottom:8px;font-family:var(--sb-font-titre);} .pdr-sources{border:1px solid var(--sb-trait);border-radius:var(--sb-r-tuile);padding:18px 20px;margin-top:32px;font-size:14px;color:var(--sb-galet);} .pdr-sources strong{color:var(--sb-ardoise);} .pdr-monogramme{display:flex;align-items:center;justify-content:center;background:var(--sb-bleu);color:#fff;font:700 18px var(--sb-font-titre);flex:none;border-radius:16px 16px 16px 4px;} .pdr-auteur-box{display:flex;gap:16px;align-items:flex-start;border-top:1px solid var(--sb-trait);margin-top:40px;padding-top:28px;} .pdr-auteur-box .pdr-monogramme{width:56px;height:56px;font-size:20px;} .pdr-auteur-box__nom{font-weight:700;} .pdr-auteur-box__role{display:block;color:var(--sb-galet);font-size:13px;margin-bottom:8px;} .pdr-auteur-box__bio{color:var(--sb-galet);font-size:14px;margin:0;} .pdr-aside-form{position:sticky;top:100px;} .pdr-aside-form__titre{font:600 16px var(--sb-font-titre);margin-bottom:12px;} .pdr-articles-lies{margin-top:28px;display:flex;flex-direction:column;gap:14px;} @media (max-width:1180px){ .pdr-article-grille{grid-template-columns:1fr 1fr;} .pdr-sommaire{display:none;} } @media (max-width:760px){ .pdr-article-grille{grid-template-columns:1fr;} } /* ===================== 18. RUBRIQUE ===================== */ .pdr-rubrique-tete{position:relative;aspect-ratio:1400/380;border-radius:var(--sb-r-panel);overflow:hidden;max-width:calc(var(--sb-conteneur) + 2*var(--sb-inset));margin:24px auto;box-shadow:var(--sb-ombre-carte);} .pdr-rubrique-tete img{width:100%;height:100%;object-fit:cover;} .pdr-rubrique-tete__voile{position:absolute;inset:0;background:linear-gradient(90deg,rgba(28,36,48,.55),transparent 60%);} @media (max-width:760px){ .pdr-rubrique-tete{aspect-ratio:3/4;} } .pdr-rubrique-une{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin:60px auto 40px;max-width:calc(var(--sb-conteneur) + 2*var(--sb-inset));padding-inline:var(--sb-inset);} .pdr-rubrique-une__petites{display:flex;flex-direction:column;gap:24px;} @media (max-width:980px){ .pdr-rubrique-une{grid-template-columns:1fr;} } /* ===================== 19. PAGE COMMUNE / CONTACT / QUI-SOMMES-NOUS ===================== */ .pdr-deux-colonnes{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start;} .pdr-reassurance-ligne{display:flex;gap:12px;align-items:flex-start;margin-bottom:16px;font-size:15px;} .pdr-reassurance-ligne svg{width:22px;height:22px;color:var(--sb-bleu);flex:none;margin-top:2px;} .pdr-cheval-grille{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;position:relative;margin-top:-50px;} @media (max-width:980px){ .pdr-deux-colonnes{grid-template-columns:1fr;} .pdr-cheval-grille{grid-template-columns:repeat(2,1fr);margin-top:20px;} } @media (max-width:620px){ .pdr-cheval-grille{grid-template-columns:1fr;} } .pdr-engagement-pastille{display:flex;align-items:center;gap:10px;background:var(--sb-eau);color:var(--sb-bleu);border-radius:var(--sb-r-pilule);padding:10px 18px;font-weight:600;font-size:14px;} .pdr-engagements{display:flex;flex-wrap:wrap;gap:12px;} /* ===================== 20. PAGES ANNEXES, 404, RECHERCHE ===================== */ .pdr-bandeau-simple{padding:64px var(--sb-inset) 40px;max-width:calc(var(--sb-conteneur) + 2*var(--sb-inset));margin-inline:auto;} .pdr-bandeau-simple h1{font-size:44px;margin-top:14px;} .pdr-page-simple{max-width:760px;margin:0 auto 60px;padding-inline:var(--sb-inset);} .pdr-404{text-align:center;padding:100px var(--sb-inset);} .pdr-404__symbole{width:96px;height:96px;margin:0 auto 24px;} .pdr-404 h1{font-size:36px;margin-bottom:12px;} .pdr-404__recherche{display:flex;gap:10px;max-width:420px;margin:24px auto;} .pdr-404__recherche input{flex:1;height:52px;border-radius:var(--sb-r-pilule);border:1.5px solid var(--sb-trait);padding:0 20px;} .pdr-404__rubriques{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:20px;} .pdr-recherche-form{display:flex;gap:10px;max-width:500px;margin-top:20px;} .pdr-recherche-form input{flex:1;height:52px;border-radius:var(--sb-r-pilule);border:1.5px solid var(--sb-trait);padding:0 20px;} /* Recherche footer */ .pdr-footer__recherche{display:flex;align-items:center;background:rgba(255,255,255,.08);border-radius:var(--sb-r-pilule);padding:6px 6px 6px 16px;gap:8px;} .pdr-footer__recherche input{background:none;border:none;color:#fff;font:14px var(--sb-font-texte);width:140px;} .pdr-footer__recherche input::placeholder{color:rgba(255,255,255,.5);} .pdr-footer__recherche button{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:#fff;} /* Page auteur */ .pdr-page-auteur__tete{display:flex;gap:24px;align-items:center;padding:20px 0;} .pdr-page-auteur__tete .pdr-monogramme{width:84px;height:84px;font-size:30px;} /* Grille auteurs (qui sommes-nous) */ .pdr-carte-auteur{display:flex;gap:18px;background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-carte);padding:24px;} .pdr-carte-auteur .pdr-monogramme{width:64px;height:64px;font-size:22px;} /* "Voir plus" au lieu de pagination numérotée */ .pdr-voir-plus{display:flex;justify-content:center;margin-top:40px;} /* ===================== 20. PASSE ORCHESTRATEUR v2 (02/10) — premier écran ===================== */ /* Hero : la photo va jusqu'au bord droit (inset), la colonne texte suit la largeur d'écran, titre en 4 lignes imposées (.pdr-ligne), l'encoche a de vrais coins concaves. */ .pdr-hero__conteneur{max-width:none;padding-left:max(var(--sb-inset),calc((100vw - var(--sb-conteneur)) / 2));padding-right:var(--sb-inset); grid-template-columns:minmax(0,clamp(480px,35vw,680px)) minmax(0,1fr);gap:clamp(32px,3vw,56px);align-items:stretch;} .pdr-hero__texte{padding-top:clamp(36px,5vh,72px);padding-bottom:24px;} .pdr-hero__titre{font-size:clamp(46px,4.05vw,78px);max-width:none;margin:20px 0 20px;} .pdr-hero__titre .pdr-ligne{display:block;white-space:nowrap;} .pdr-hero__chapo{font-size:clamp(17px,1.2vw,21px);max-width:30em;} .pdr-hero__rassure{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;font-size:15px;font-weight:600;color:var(--sb-ardoise);} .pdr-hero__rassure span{display:inline-flex;align-items:center;gap:8px;} .pdr-hero__rassure svg{width:20px;height:20px;color:var(--sb-remis);flex:none;} .pdr-hero__photo-zone{min-height:clamp(600px,calc(100vh - 120px),780px);} .pdr-hero__photo img{object-position:72% 50%;} .pdr-hero__form-zone{left:clamp(28px,3vw,56px);top:clamp(28px,4vh,48px);width:clamp(400px,26vw,460px);} .pdr-form[data-pas="0"] .pdr-form__retour{visibility:hidden;} /* L'encoche du regard : découpe + 2 coins concaves (dégradés radiaux), contenu DANS la découpe */ .pdr-encoche{overflow:visible;} .pdr-encoche > img{border-radius:inherit;position:absolute;inset:0;} .pdr-encoche__decoupe{z-index:1;} .pdr-encoche__decoupe::before,.pdr-encoche__decoupe::after{content:"";position:absolute;width:24px;height:24px;} .pdr-encoche--bas-gauche .pdr-encoche__decoupe::before{left:0;bottom:100%;background:radial-gradient(circle at 100% 0,transparent 23.5px,var(--sb-encoche-fond,var(--sb-sable)) 24px);} .pdr-encoche--bas-gauche .pdr-encoche__decoupe::after{left:100%;bottom:0;background:radial-gradient(circle at 100% 0,transparent 23.5px,var(--sb-encoche-fond,var(--sb-sable)) 24px);} .pdr-encoche--bas-droite .pdr-encoche__decoupe::before{right:0;bottom:100%;background:radial-gradient(circle at 0 0,transparent 23.5px,var(--sb-encoche-fond,var(--sb-sable)) 24px);} .pdr-encoche--bas-droite .pdr-encoche__decoupe::after{right:100%;bottom:0;background:radial-gradient(circle at 0 0,transparent 23.5px,var(--sb-encoche-fond,var(--sb-sable)) 24px);} .pdr-encoche--haut-gauche .pdr-encoche__decoupe::before{left:0;top:100%;background:radial-gradient(circle at 100% 100%,transparent 23.5px,var(--sb-encoche-fond,var(--sb-sable)) 24px);} .pdr-encoche--haut-gauche .pdr-encoche__decoupe::after{left:100%;top:0;background:radial-gradient(circle at 100% 100%,transparent 23.5px,var(--sb-encoche-fond,var(--sb-sable)) 24px);} .pdr-encoche--haut-droite .pdr-encoche__decoupe::before{right:0;top:100%;background:radial-gradient(circle at 0 100%,transparent 23.5px,var(--sb-encoche-fond,var(--sb-sable)) 24px);} .pdr-encoche--haut-droite .pdr-encoche__decoupe::after{right:100%;top:0;background:radial-gradient(circle at 0 100%,transparent 23.5px,var(--sb-encoche-fond,var(--sb-sable)) 24px);} .pdr-hero__photo .pdr-encoche__decoupe{width:300px;height:96px;} .pdr-hero__photo .pdr-encoche__contenu{left:0;bottom:0;width:300px;height:96px;max-width:none;display:flex;align-items:center;padding:12px 16px 0 0;} .pdr-hero__photo .pdr-pastille-communes{width:100%;} @media (max-width:1180px){ .pdr-hero__conteneur{grid-template-columns:minmax(0,1fr);padding-inline:var(--sb-inset);} .pdr-hero__photo-zone{min-height:0;display:flex;flex-direction:column;} .pdr-hero__photo{position:relative;inset:auto;height:clamp(240px,46vw,460px);} .pdr-hero__form-zone{position:relative;left:auto;top:auto;width:100%;max-width:520px;margin:-110px auto 0;} } @media (max-width:760px){ .pdr-hero__texte{padding-top:8px;padding-bottom:12px;} .pdr-hero__titre{font-size:clamp(32px,9vw,40px);margin:12px 0 10px;} .pdr-hero__titre .pdr-ligne{display:inline;white-space:normal;} .pdr-hero__chapo{font-size:16px;margin-bottom:0;} .pdr-hero__preuves,.pdr-hero__rassure{display:none;} .pdr-hero__photo{height:200px;} .pdr-hero__photo .pdr-encoche__decoupe,.pdr-hero__photo .pdr-encoche__contenu{width:210px;height:64px;} .pdr-hero__photo .pdr-pastille-communes{padding:10px 12px;font-size:13px;} .pdr-hero__form-zone{margin-top:-72px;} .pdr-hero__badge-minute{left:16px;} } @media (max-width:480px){ .pdr-header__ligne{gap:10px;} .pdr-logo__symbole{width:32px;height:32px;} .pdr-logo__texte{font-size:16px;} .pdr-header__cta{padding:0 14px;height:42px;} .pdr-nav__bascule{width:42px;height:42px;} } /* Guides de l'accueil : 1 grande carte + 3 cartes horizontales, hauteurs équilibrées */ .pdr-guides{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;margin-top:44px;} .pdr-guides__une .pdr-carte{height:100%;} .pdr-guides__une .pdr-carte__photo{aspect-ratio:auto;flex:1;min-height:340px;} .pdr-guides__une .pdr-carte__titre{font-size:26px;} .pdr-guides__liste{display:flex;flex-direction:column;gap:20px;} .pdr-guides__liste .pdr-carte{flex-direction:row;flex:1;} .pdr-guides__liste .pdr-carte__photo{aspect-ratio:auto;flex:0 0 42%;min-height:150px;} .pdr-guides__liste .pdr-carte__extrait{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .pdr-guides__liste .pdr-carte__titre{font-size:18px;} .pdr-guides__rubriques{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;} .pdr-pilule-lien{display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 8px 0 18px;border-radius:var(--sb-r-pilule);background:var(--sb-eau);color:var(--sb-bleu);font-weight:700;font-size:15px;transition:background .2s ease,color .2s ease;} .pdr-pilule-lien span{background:#fff;border-radius:var(--sb-r-pilule);min-width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;color:var(--sb-ardoise);} .pdr-pilule-lien:hover{background:var(--sb-bleu);color:#fff;} @media (max-width:980px){ .pdr-guides{grid-template-columns:1fr;} .pdr-guides__une .pdr-carte__photo{min-height:240px;} } @media (max-width:560px){ .pdr-guides__liste .pdr-carte{flex-direction:column;} .pdr-guides__liste .pdr-carte__photo{flex-basis:auto;aspect-ratio:16/9;} } /* Panneau final : titre lisible sur la photo */ .pdr-final__voile{background:linear-gradient(0deg,rgba(28,36,48,.82) 0,rgba(28,36,48,.45) 45%,rgba(28,36,48,.10) 100%);} .pdr-final__contenu h2{font-size:clamp(30px,3.4vw,52px);text-shadow:0 2px 18px rgba(0,0,0,.25);} .pdr-section + .pdr-footer,.pdr-final + .pdr-footer{margin-top:24px;} /* Pied de page : communes sur 2 colonnes réelles, contenu calé sur la largeur du site */ .pdr-footer__colonne ul.pdr-footer__communes{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;} .pdr-footer__corps,.pdr-footer__base,.pdr-footer__bandeau{max-width:calc(var(--sb-conteneur) + 2*var(--sb-inset));margin-inline:auto;} .pdr-footer__corps{grid-template-columns:1.2fr 1.6fr 1fr 1fr;} @media (max-width:980px){ .pdr-footer__corps{grid-template-columns:1fr 1fr;} } @media (max-width:620px){ .pdr-footer__corps{grid-template-columns:1fr;} } .pdr-logo--clair .pdr-logo__texte{color:#fff;} .pdr-logo--clair .pdr-logo__tld{color:rgba(255,255,255,.6);} .pdr-final{margin-bottom:24px;} /* Page ville : colonne de gauche pleine (carte située + réassurance), crédit photo discret */ .pdr-hero__titre--ville .pdr-ligne{white-space:normal;} .pdr-ville-situe{display:flex;align-items:center;gap:18px;background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-carte);padding:14px 20px 14px 14px;margin-top:26px;max-width:520px;} .pdr-ville-situe .pdr-mini-carte{width:150px;flex:none;box-shadow:none;padding:6px;background:var(--sb-eau);border-radius:16px;} .pdr-ville-situe__texte{display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--sb-galet);} .pdr-ville-situe__texte strong{font:600 20px var(--sb-font-titre);color:var(--sb-ardoise);} .pdr-ville-situe__texte a{color:var(--sb-bleu);font-weight:700;margin-top:4px;} .pdr-credit-photo{position:absolute;right:14px;bottom:14px;z-index:2;max-width:46%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:rgba(28,36,48,.55);backdrop-filter:blur(6px);color:#fff;font-size:11px;padding:4px 10px;border-radius:var(--sb-r-pilule);} .pdr-credit-photo a{color:#fff;} .pdr-ville-corps .pdr-section__panneau{max-width:820px;margin-inline:auto;} @media (max-width:760px){ .pdr-ville-situe{display:none;} .pdr-credit-photo{font-size:10px;max-width:60%;} } /* FAQ et repliables écrits dans le contenu (pages ville, articles) : jamais un triangle brut */ .pdr-corps details,.pdr-contenu details,.entry-content details{background:#fff;border:1px solid var(--sb-trait);border-radius:var(--sb-r-tuile);margin:10px 0;box-shadow:var(--sb-ombre-carte);overflow:hidden;} .pdr-corps summary,.pdr-contenu summary,.entry-content summary{list-style:none;cursor:pointer;padding:16px 56px 16px 20px;font-weight:700;color:var(--sb-ardoise);position:relative;} .pdr-corps summary::-webkit-details-marker,.pdr-contenu summary::-webkit-details-marker,.entry-content summary::-webkit-details-marker{display:none;} .pdr-corps summary::after,.pdr-contenu summary::after,.entry-content summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--sb-eau);color:var(--sb-bleu);font:600 20px/30px var(--sb-font-titre);text-align:center;transition:transform .2s ease;} .pdr-corps details[open] summary::after,.pdr-contenu details[open] summary::after,.entry-content details[open] summary::after{content:"–";} .pdr-corps details > :not(summary),.pdr-contenu details > :not(summary),.entry-content details > :not(summary){padding:0 20px 16px;margin:0;color:var(--sb-galet);} .pdr-hero__photo--ville img{object-position:50% 72%;} /* En-tête d'article : panneau blanc posé, photo à encoche, fiche « En bref » nichée DANS l'encoche */ .pdr-article-tete{background:#fff;border-radius:var(--sb-r-panel);box-shadow:var(--sb-ombre-panel);padding:48px;margin-top:8px;max-width:var(--sb-conteneur);align-items:center;--sb-encoche-fond:#fff;} .pdr-article-tete__photo{aspect-ratio:5/4;} .pdr-article-tete__photo > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:var(--sb-r-photo);} .pdr-article-tete__photo .pdr-encoche__decoupe{width:min(330px,78%);height:96px;} .pdr-fiche-enbref{position:absolute;left:0;bottom:0;top:auto;width:min(330px,78%);height:96px;padding:12px 14px 0 0;background:none;box-shadow:none;} .pdr-fiche-enbref dl{margin:0;height:100%;display:flex;gap:4px;background:var(--sb-eau);border-radius:var(--sb-r-carte);padding:14px 16px;align-items:center;justify-content:space-between;} .pdr-fiche-enbref dl > div{display:flex;flex-direction:column;gap:2px;} .pdr-fiche-enbref dt{font-size:12px;color:var(--sb-galet);} .pdr-fiche-enbref dd{margin:0;font-weight:700;font-size:14px;color:var(--sb-ardoise);white-space:nowrap;} .pdr-sommaire ol{list-style:none;padding:0;margin:0;} @media (max-width:980px){ .pdr-article-tete{padding:28px;} .pdr-fiche-enbref{position:absolute;margin:0;} } @media (max-width:620px){ .pdr-article-tete{padding:20px;margin-inline:var(--sb-inset);} .pdr-article-tete__photo .pdr-encoche__decoupe,.pdr-fiche-enbref{width:88%;height:84px;} .pdr-fiche-enbref dl{padding:10px 12px;} .pdr-fiche-enbref dd{font-size:13px;} } /* Blocs du contenu des articles : jamais de puces brutes, encarts traités comme des objets */ .pdr-corps ul:not([class]){list-style:none;padding:0;margin:20px 0;display:flex;flex-direction:column;gap:10px;} .pdr-corps ul:not([class]) > li{position:relative;background:#fff;border-radius:var(--sb-r-tuile);box-shadow:var(--sb-ombre-carte);padding:14px 18px 14px 54px;} .pdr-corps ul:not([class]) > li::before{content:"";position:absolute;left:16px;top:15px;width:24px;height:24px;border-radius:8px;background:var(--sb-eau) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232A3FCB' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 7'/%3E%3C/svg%3E") center/14px no-repeat;} .pdr-corps ol:not([class]){padding-left:22px;} .pdr-corps figure{margin:28px 0;} .pdr-corps figure img{border-radius:var(--sb-r-photo);box-shadow:var(--sb-ombre-carte);margin:0;width:100%;height:auto;} .pdr-corps figcaption{font-size:13px;color:var(--sb-galet);margin-top:8px;} .pdr-corps aside.sources,.pdr-corps .sources{background:var(--sb-eau);border-radius:var(--sb-r-carte);padding:20px 24px;margin:32px 0;font-size:14px;color:var(--sb-galet);} .pdr-corps .sources h2,.pdr-corps .sources h3{font-size:17px;margin:0 0 10px;} .pdr-corps .sources ul:not([class]) > li{background:none;box-shadow:none;padding:4px 0 4px 28px;} .pdr-corps .sources ul:not([class]) > li::before{top:7px;left:0;width:18px;height:18px;background-size:11px;} .pdr-corps section.faq{background:var(--sb-eau);border-radius:var(--sb-r-carte);padding:24px;margin:36px 0;} .pdr-corps section.faq > h2{margin-top:0;font-size:26px;} /* Trajet de l'eau en 5 étapes (remplace l'ancien schéma dessiné) */ .pdr-trajet{list-style:none;counter-reset:trajet;padding:0;margin:28px 0;display:grid;grid-template-columns:repeat(5,1fr);gap:12px;} .pdr-trajet li{counter-increment:trajet;background:#fff;border-radius:var(--sb-r-tuile);box-shadow:var(--sb-ombre-carte);padding:18px 16px;display:flex;flex-direction:column;gap:6px;position:relative;} .pdr-trajet li::before{content:counter(trajet);font:600 30px/1 var(--sb-font-titre);color:var(--sb-bleu);} .pdr-trajet strong{font-family:var(--sb-font-titre);font-size:16px;line-height:1.25;} .pdr-trajet span{font-size:14px;color:var(--sb-galet);line-height:1.45;} @media (max-width:1180px){ .pdr-trajet{grid-template-columns:repeat(2,1fr);} } @media (max-width:560px){ .pdr-trajet{grid-template-columns:1fr;} } /* Comparatif sans / avec poste */ .pdr-comparatif{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:28px 0;} .pdr-comparatif__carte{display:flex;flex-direction:column;gap:8px;border-radius:var(--sb-r-carte);padding:22px;margin:0;box-shadow:var(--sb-ombre-carte);max-width:none!important;} .pdr-comparatif__carte strong{font:600 19px var(--sb-font-titre);} .pdr-comparatif__carte span{font-size:15px;line-height:1.5;} .pdr-comparatif__carte--sans{background:var(--sb-alarme-fond);} .pdr-comparatif__carte--sans strong{color:var(--sb-alarme);} .pdr-comparatif__carte--avec{background:var(--sb-remis-fond);} .pdr-comparatif__carte--avec strong{color:var(--sb-remis);} @media (max-width:560px){ .pdr-comparatif{grid-template-columns:1fr;} } /* En-tête de rubrique : photo à encoche haut-gauche, titre niché dans le creux, filtres à cheval */ .pdr-rubrique-tete{overflow:visible;aspect-ratio:auto;height:clamp(300px,30vw,420px);max-width:var(--sb-conteneur);margin:16px auto 64px;border-radius:var(--sb-r-panel);box-shadow:var(--sb-ombre-panel);} @media (max-width:1440px){ .pdr-rubrique-tete{margin-inline:var(--sb-inset);} } .pdr-rubrique-tete > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit;} .pdr-rubrique-tete__voile{border-radius:inherit;background:linear-gradient(0deg,rgba(28,36,48,.28),transparent 50%);} .pdr-rubrique-tete .pdr-encoche__decoupe{width:min(560px,62%);height:clamp(150px,13vw,190px);border-bottom-right-radius:28px;} .pdr-rubrique-titre-carte{position:absolute;left:0;top:0;z-index:2;width:min(560px,62%);height:clamp(150px,13vw,190px);padding:6px 32px 0 0;display:flex;flex-direction:column;justify-content:center;gap:10px;} .pdr-rubrique-titre-carte h1{font:600 clamp(36px,4vw,60px)/1 var(--sb-font-titre);letter-spacing:-.02em;margin:0;} .pdr-rubrique-titre-carte .pdr-surtitre{align-self:flex-start;} .pdr-rubrique-filtres{position:absolute;left:32px;right:32px;bottom:0;transform:translateY(50%);z-index:3;display:flex;gap:8px;flex-wrap:wrap;background:#fff;border-radius:var(--sb-r-pilule);box-shadow:var(--sb-ombre-flottant);padding:8px;} .pdr-rubrique-filtres a{height:44px;display:inline-flex;align-items:center;padding:0 20px;border-radius:var(--sb-r-pilule);font-weight:700;font-size:15px;color:var(--sb-ardoise);transition:background .2s ease,color .2s ease;} .pdr-rubrique-filtres a:hover{background:var(--sb-eau);color:var(--sb-bleu);} .pdr-rubrique-filtres a.est-actif{background:var(--sb-bleu);color:#fff;} .pdr-rubrique-liste{max-width:var(--sb-conteneur);margin:0 auto;padding-inline:var(--sb-inset);} .pdr-rubrique-liste .pdr-rubrique-une{padding-inline:0;margin:0 auto;} .pdr-rubrique-une > .pdr-carte .pdr-carte__photo{aspect-ratio:auto;flex:1;min-height:320px;} .pdr-rubrique-une > .pdr-carte .pdr-carte__titre{font-size:26px;} .pdr-rubrique-une__petites .pdr-carte{flex:1;} .pdr-rubrique-grille{margin:28px 0 0;} .pdr-rubrique-vide{padding:40px 0;color:var(--sb-galet);} .pdr-rubrique-appel{margin-top:56px;} .pdr-rubrique-appel .pdr-section__panneau{text-align:center;} .pdr-rubrique-appel .pdr-btn{margin-top:20px;} @media (max-width:760px){ .pdr-rubrique-tete{height:260px;margin-bottom:48px;} .pdr-rubrique-tete .pdr-encoche__decoupe,.pdr-rubrique-titre-carte{width:78%;height:120px;} .pdr-rubrique-titre-carte{padding-right:16px;} .pdr-rubrique-filtres{left:12px;right:12px;flex-wrap:nowrap;overflow-x:auto;border-radius:22px;} .pdr-rubrique-filtres a{flex:none;padding:0 14px;font-size:14px;} } [hidden]{display:none!important;} /* Passe sortie v1 : pages ville en 2 colonnes (barre latérale collante), aide visuelle, marges */ .pdr-ville-corps .pdr-section__panneau.pdr-ville-grille{max-width:var(--sb-conteneur);display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:56px;align-items:start;} .pdr-ville-aside{position:sticky;top:100px;display:flex;flex-direction:column;gap:16px;} .pdr-ville-aside__carte{background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-flottant);padding:24px;display:flex;flex-direction:column;gap:10px;} .pdr-ville-aside__carte--eau{background:var(--sb-eau);box-shadow:none;} .pdr-ville-aside__titre{font:600 20px/1.2 var(--sb-font-titre);color:var(--sb-ardoise);margin:0;} .pdr-ville-aside__carte p{margin:0;color:var(--sb-galet);font-size:15px;} .pdr-ville-aside__carte .pdr-surtitre{align-self:flex-start;} .pdr-ville-aside__liens{display:flex;flex-wrap:wrap;gap:6px;} .pdr-ville-aside__liens a{background:#fff;border-radius:var(--sb-r-pilule);padding:6px 12px;font-size:13px;font-weight:600;color:var(--sb-ardoise);} .pdr-ville-aside__liens a:hover{background:var(--sb-bleu);color:#fff;} @media (max-width:980px){ .pdr-ville-corps .pdr-section__panneau.pdr-ville-grille{grid-template-columns:1fr;gap:32px;} .pdr-ville-aside{position:static;} } .pdr-panneau-etroit{max-width:820px;margin-inline:auto;} .pdr-faq--une-colonne{columns:1;margin-top:24px;} .pdr-grille--espace{margin-top:24px;} .pdr-panneau-centre{text-align:center;} .pdr-panneau-centre .pdr-btn,.pdr-btn--espace{margin-top:20px;} .pdr-mini-carte--grande{width:100%;padding:24px;} .pdr-section--eau .pdr-deux-colonnes{align-items:center;} .pdr-contact-pastille{right:12px;bottom:12px;left:auto;max-width:calc(100% - 24px);} .pdr-section{margin-top:12px;} .pdr-form__confirmation{text-align:left;} /* Fond de repli sous les textes posés sur photo (lisible même si l'image tarde) */ .pdr-situation{background-color:var(--sb-ardoise);} .pdr-final{background-color:var(--sb-ardoise);} .pdr-hero--qsn .pdr-qsn-photo{min-height:clamp(420px,52vh,560px);} .pdr-hero--qsn .pdr-hero__titre .pdr-ligne{display:block;} /* Toutes les cartes des communes (mini-cartes comprises) : communes servies teintées, jamais un dessin au trait nu */ .pdr-mini-carte svg path{fill:#F7F5F0;stroke:#C9CED8;stroke-width:1;} .pdr-mini-carte svg path[id^="c-"]{fill:rgba(42,63,203,.22);stroke:#fff;} .pdr-mini-carte[data-commune-active] svg path.est-active,.pdr-mini-carte svg path[id^="c-"].est-active{fill:var(--sb-bleu);} @media (max-width:760px){ .pdr-contact-pastille.pdr-encoche__contenu{display:none;} } img.pdr-portrait-auteur{border-radius:50%;object-fit:cover;flex:none;padding:0;background:var(--sb-eau);} .pdr-auteur-box img.pdr-portrait-auteur,.pdr-carte-auteur img.pdr-portrait-auteur{width:64px;height:64px;} .pdr-article-tete__meta img.pdr-portrait-auteur{width:32px;height:32px;} @media (max-width:1180px){ .pdr-hero--qsn .pdr-qsn-photo{min-height:0;} } @media (max-width:760px){ .pdr-section--eau .pdr-deux-colonnes{gap:20px;} .pdr-mini-carte--grande{padding:12px;} } .pdr-comparatif__carte--vous{background:var(--sb-eau);} .pdr-comparatif__carte--vous strong{color:var(--sb-bleu);} .pdr-comparatif__carte--pro{background:var(--sb-ardoise);color:#fff;} .pdr-comparatif__carte--pro strong{color:#fff;} .pdr-comparatif__carte--pro span{color:rgba(255,255,255,.8);} .pdr-corps .pdr-encadre--alerte{display:flex;flex-direction:column;gap:6px;background:var(--sb-alarme-fond);border-left:4px solid var(--sb-alarme);border-radius:var(--sb-r-tuile);padding:18px 22px;margin:24px 0;} .pdr-corps .pdr-encadre--alerte strong{color:var(--sb-alarme);font-family:var(--sb-font-titre);font-size:17px;} .pdr-corps .pdr-encadre--alerte span{color:var(--sb-ardoise);} .pdr-rubrique-tete{margin-bottom:56px;} .pdr-rubrique-liste{margin-top:8px;} /* ===================== 21. RETOURS MATHIAS 02/10 soir (BE-0014→0017) : chaque section tient dans un écran ===================== */ /* Hero : jamais plus haut que l'écran utile (780 − menu) */ .pdr-hero--accueil .pdr-hero__conteneur{padding-bottom:16px;} .pdr-hero--accueil .pdr-hero__photo-zone{min-height:clamp(560px,calc(100vh - 150px),760px);} /* Formulaire : étape coordonnées compacte, ne déborde plus du hero */ .pdr-form__rangee{display:grid;grid-template-columns:1fr 1fr;gap:10px;} .pdr-form [data-etape="coordonnees"] .pdr-form__champ{margin-bottom:10px;} .pdr-form [data-etape="coordonnees"] .pdr-form__champ label{font-size:13px;margin-bottom:4px;} .pdr-form [data-etape="coordonnees"] .pdr-form__champ input{height:46px;} .pdr-form [data-etape="coordonnees"] .pdr-form__question{margin-bottom:12px;} .pdr-form [data-etape="coordonnees"] .pdr-form__question--petite{margin:4px 0 6px;font-size:13px;} .pdr-form [data-etape="coordonnees"] .pdr-form__creneaux{flex-wrap:nowrap;gap:6px;margin-bottom:10px;} .pdr-form [data-etape="coordonnees"] .pdr-form__pilule{height:34px;padding:0 12px;font-size:12.5px;white-space:nowrap;} .pdr-form [data-etape="coordonnees"] .pdr-form__detail-bascule{margin-bottom:8px;} .pdr-form [data-etape="coordonnees"] .pdr-form__consentement{font-size:12px;line-height:1.45;margin-bottom:12px;} @media (max-width:420px){ .pdr-form__rangee{grid-template-columns:1fr;gap:0;} .pdr-form [data-etape="coordonnees"] .pdr-form__creneaux{flex-wrap:wrap;} } /* Section 2 : 5 situations sur une ligne, plus de carrousel géant */ .pdr-situations{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:28px;} .pdr-situations .pdr-situation{display:block;aspect-ratio:4/5;max-height:340px;width:100%;opacity:1;flex:none;} .pdr-situations .pdr-situation img{position:absolute;inset:0;} .pdr-situations .pdr-situation__titre{font-size:18px;bottom:46px;left:16px;right:16px;line-height:1.2;} .pdr-situation__action{position:absolute;left:16px;bottom:16px;display:inline-flex;align-items:center;gap:6px;color:#fff;font-size:13px;font-weight:700;opacity:.85;} .pdr-situation__action svg{width:14px;height:14px;transition:transform .2s ease;} .pdr-situation:hover .pdr-situation__action svg{transform:translateX(3px);} .pdr-situation:hover{transform:translateY(-4px);} @media (max-width:980px){ .pdr-situations{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px;} .pdr-situations .pdr-situation{flex:0 0 58%;scroll-snap-align:start;max-height:none;} } .pdr-section--blanc .pdr-section__panneau{padding-block:clamp(40px,6vh,64px);} .pdr-section__tete h2{font-size:clamp(30px,3vw,44px);} /* Section 3 : photo d'intervention moins haute */ .pdr-intervention__photo{aspect-ratio:1400/440;} .pdr-intervention{margin-bottom:48px;} /* Section 4 : carte plus belle, rien ne la masque */ .pdr-section--eau .pdr-section__panneau{padding-block:clamp(40px,6vh,64px);} .pdr-zone__grille{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;} .pdr-zone__carte-wrap{padding:18px 18px 12px;background:linear-gradient(180deg,#fff,#F7F8FD);} .pdr-zone__carte-wrap svg{max-height:440px;display:block;margin:0 auto;filter:drop-shadow(0 10px 18px rgba(42,63,203,.10));} .pdr-zone__carte-wrap svg path{fill:#EFEAE0;stroke:#fff;stroke-width:2;} .pdr-zone__carte-wrap svg path[id^="c-"]{fill:#C9D1F3;} .pdr-zone__carte-wrap svg path[id^="c-"]:nth-of-type(3n){fill:#BCC6F0;} .pdr-zone__carte-wrap svg path[id^="c-"]:nth-of-type(3n+1){fill:#D3D9F5;} .pdr-zone__carte-wrap svg path[id^="c-"]:hover,.pdr-zone__carte-wrap svg path[id^="c-"].est-survolee{fill:var(--sb-bleu);} .pdr-zone__carte-wrap svg #seine{fill:none;stroke:#7F93E6;stroke-width:5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:.9;} .pdr-carte-point{fill:#fff;stroke:var(--sb-bleu);stroke-width:2.5;pointer-events:none;} .pdr-carte-nom{font:700 15px var(--sb-font-titre);fill:var(--sb-ardoise);pointer-events:none;paint-order:stroke;stroke:#fff;stroke-width:4px;} .pdr-zone__legende{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--sb-galet);margin:8px 0 0;justify-content:center;} .pdr-zone__puce{width:14px;height:14px;border-radius:4px;background:#C9D1F3;box-shadow:inset 0 0 0 2px #fff,0 0 0 1px #C9D1F3;} .pdr-zone__liste{gap:6px 12px;margin-top:16px;} .pdr-zone__liste a{height:36px;font-size:13.5px;} /* Section 5 : guides calés sur un écran */ .pdr-guides{height:clamp(380px,48vh,430px);margin-top:28px;} .pdr-guides__une .pdr-carte__photo{min-height:0;} .pdr-guides__une .pdr-carte__corps{flex:none;} .pdr-guides__une .pdr-carte__titre{font-size:22px;} .pdr-guides__liste{gap:14px;} .pdr-guides__liste .pdr-carte{min-height:0;} .pdr-guides__liste .pdr-carte__photo{min-height:0;flex-basis:38%;} .pdr-guides__liste .pdr-carte__corps{padding:14px 16px;gap:4px;} .pdr-guides__liste .pdr-carte__extrait{-webkit-line-clamp:1;font-size:14px;} .pdr-guides__liste .pdr-carte__titre{font-size:16px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .pdr-guides__rubriques{margin-top:18px;} @media (max-width:980px){ .pdr-guides{height:auto;} .pdr-guides__une .pdr-carte__photo{min-height:240px;} } /* Section 8 : panneau final refait (texte à gauche, photo à droite, rien d'écrit sur la photo) */ .pdr-final.pdr-final--v2{aspect-ratio:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center;background:var(--sb-ardoise);padding:56px;--sb-encoche-fond:var(--sb-ardoise);overflow:visible;} .pdr-final--v2 .pdr-final__contenu{position:static;text-align:left;padding:0;color:rgba(255,255,255,.78);} .pdr-final--v2 .pdr-final__contenu h2{font-size:clamp(32px,3.2vw,48px);margin:14px 0 14px;text-shadow:none;} .pdr-final--v2 .pdr-final__contenu p{font-size:18px;max-width:34em;margin:0 0 26px;} .pdr-final--v2 .pdr-final__boutons{justify-content:flex-start;} .pdr-final--v2 .pdr-surtitre--sombre,.pdr-final--v2 .pdr-surtitre{background:rgba(255,255,255,.1);color:#fff;} .pdr-final__photo{position:relative;aspect-ratio:1000/760;max-height:420px;width:100%;} .pdr-final__photo .pdr-encoche__decoupe,.pdr-final__photo .pdr-encoche__contenu{width:230px;height:76px;} .pdr-final__photo .pdr-encoche__contenu{left:0;bottom:0;padding:10px 12px 0 0;display:flex;} .pdr-final__photo .pdr-pastille-communes{width:100%;} @media (max-width:980px){ .pdr-final.pdr-final--v2{grid-template-columns:1fr;padding:32px 24px;gap:28px;} } .pdr-guides{height:clamp(340px,44vh,400px);} .pdr-section__tete h2{max-width:none;} .pdr-section__tete{max-width:none;} .pdr-zone__carte-wrap svg{max-height:400px;} @media (min-width:1200px){ .pdr-zone__liste{grid-template-columns:repeat(3,1fr);} .pdr-zone__liste a{padding:0 12px;font-size:13px;} } /* Mobile : rétablir l'empilement après les règles « un écran » (posées pour ordinateur) */ @media (max-width:980px){ .pdr-zone__grille{grid-template-columns:1fr;gap:24px;} .pdr-zone__liste{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;grid-template-rows:none;overflow:visible;} .pdr-guides{height:auto;} .pdr-guides__liste .pdr-carte{min-height:120px;} .pdr-etapes-cheval{grid-template-columns:1fr 1fr;gap:12px;} } @media (max-width:560px){ .pdr-etape-carte{padding:16px;} .pdr-etape-carte p{font-size:13px;} .pdr-zone__liste a{padding:0 10px;font-size:13px;} } /* BE-0018 : jamais de vide blanc dans une carte étirée — l'espace en trop va à la photo */ .pdr-carte__corps{flex:0 0 auto;} .pdr-carte__photo{flex:1 1 auto;min-height:0;} .pdr-carte__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} .pdr-carte__meta{margin-top:8px;} .pdr-rubrique-une{align-items:stretch;} .pdr-rubrique-une > .pdr-carte .pdr-carte__photo{min-height:340px;} /* ===================== 22. RETOURS BE-0019→0022 ===================== */ /* Pages ville : texte en accordéons + formulaire complet dans la colonne de droite */ .pdr-accordeons{display:flex;flex-direction:column;gap:12px;margin:24px 0;} .pdr-accordeon{background:#fff;border:1px solid var(--sb-trait);border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-carte);overflow:hidden;} .pdr-accordeon > summary{list-style:none;cursor:pointer;padding:18px 64px 18px 22px;position:relative;} .pdr-accordeon > summary::-webkit-details-marker{display:none;} .pdr-accordeon > summary h2{font-size:clamp(18px,1.5vw,21px)!important;line-height:1.3;margin:0!important;} .pdr-accordeon > summary::after{content:"+";position:absolute;right:18px;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;background:var(--sb-eau);color:var(--sb-bleu);font:600 22px/34px var(--sb-font-titre);text-align:center;} .pdr-accordeon[open] > summary::after{content:"–";background:var(--sb-bleu);color:#fff;} .pdr-accordeon__corps{padding:0 22px 20px;} .pdr-accordeon__corps > :first-child{margin-top:0;} .pdr-ville-aside__formulaire{background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-flottant);padding:22px 20px;} .pdr-ville-aside__formulaire .pdr-ville-aside__titre{margin-bottom:12px;} .pdr-ville-corps .pdr-section__panneau.pdr-ville-grille{grid-template-columns:minmax(0,1fr) 380px;} @media (max-width:980px){ .pdr-ville-corps .pdr-section__panneau.pdr-ville-grille{grid-template-columns:1fr;} } /* Rubriques : la carte de « une » se voit en entier dans l'écran */ .pdr-rubrique-une{height:clamp(420px,calc(100vh - 220px),560px);} .pdr-rubrique-une > .pdr-carte .pdr-carte__photo{min-height:0;} .pdr-rubrique-une__petites{min-height:0;} .pdr-rubrique-une__petites .pdr-carte{min-height:0;} .pdr-rubrique-une__petites .pdr-carte__extrait{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} @media (max-width:980px){ .pdr-rubrique-une{height:auto;} .pdr-rubrique-une > .pdr-carte .pdr-carte__photo{min-height:240px;} .pdr-rubrique-une__petites .pdr-carte__photo{min-height:200px;} } /* Toute grille de cartes : jamais une photo plus haute que l'écran */ .pdr-carte__photo{max-height:calc(100vh - 260px);} .pdr-grille-3 .pdr-carte__photo{aspect-ratio:4/3;flex:none;} /* Pied de page équilibré (BE-0021) : marque + recherche | communes sur 3 colonnes | guides + informations empilés */ .pdr-footer__corps{grid-template-columns:1.1fr 2.2fr 1fr;gap:40px;} .pdr-footer__colonne ul.pdr-footer__communes{grid-template-columns:repeat(3,1fr);gap:9px 18px;} .pdr-footer__devise{margin:14px 0 18px;color:rgba(255,255,255,.6);max-width:280px;} .pdr-footer__h3-suite{margin-top:26px;} @media (max-width:980px){ .pdr-footer__corps{grid-template-columns:1fr 1fr;} .pdr-footer__colonne ul.pdr-footer__communes{grid-template-columns:1fr 1fr;} } @media (max-width:620px){ .pdr-footer__corps{grid-template-columns:1fr;} } /* ===================== 23. ARTICLE (BE-0023) : corps en panneau, rythme régulier, sommaire carte, barre collante ===================== */ .pdr-article-grille{grid-template-columns:minmax(0,1fr) 380px;gap:40px;max-width:var(--sb-conteneur);padding:40px var(--sb-inset) 24px;align-items:start;} @media (max-width:1440px){ .pdr-article-grille{margin-inline:var(--sb-inset);padding-inline:0;} } .pdr-article-colonne{display:flex;flex-direction:column;gap:24px;min-width:0;} /* Sommaire : une carte soignée en tête, numéros dans des pastilles, 2 colonnes */ .pdr-sommaire-carte{position:static;background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-carte);padding:24px 28px;} .pdr-sommaire-carte__titre{display:flex;align-items:center;gap:10px;font:600 18px var(--sb-font-titre);color:var(--sb-ardoise);margin:0 0 16px;} .pdr-sommaire-carte__titre svg{width:22px;height:22px;color:var(--sb-bleu);background:var(--sb-eau);border-radius:8px;padding:4px;box-sizing:content-box;} .pdr-sommaire-carte ol{list-style:none;margin:0;padding:0;counter-reset:som;display:grid;grid-template-columns:1fr 1fr;gap:8px 20px;} .pdr-sommaire-carte li{counter-increment:som;} .pdr-sommaire-carte li a{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:var(--sb-r-tuile);font-size:15px;font-weight:600;color:var(--sb-ardoise);line-height:1.35;transition:background .2s ease,color .2s ease;} .pdr-sommaire-carte li a::before{content:counter(som);flex:none;width:28px;height:28px;border-radius:50%;background:var(--sb-eau);color:var(--sb-bleu);font:700 13px/28px var(--sb-font-titre);text-align:center;} .pdr-sommaire-carte li a:hover,.pdr-sommaire-carte li.est-actif a{background:var(--sb-eau);color:var(--sb-bleu);} .pdr-sommaire-carte li.est-actif a::before{background:var(--sb-bleu);color:#fff;} @media (max-width:760px){ .pdr-sommaire-carte ol{grid-template-columns:1fr;} .pdr-sommaire-carte{padding:20px;} } /* Corps : panneau blanc, rythme vertical constant (jamais de trou, jamais collé) */ .pdr-corps--article{background:#fff;border-radius:var(--sb-r-panel);box-shadow:var(--sb-ombre-carte);padding:clamp(24px,4vw,52px);} .pdr-corps--article > *{margin-top:0;margin-bottom:20px;} .pdr-corps--article > *:last-child{margin-bottom:0;} .pdr-corps--article > h2{font-size:clamp(24px,2.1vw,30px);line-height:1.2;margin:44px 0 16px;scroll-margin-top:110px;} .pdr-corps--article > h2:first-child{margin-top:0;} .pdr-corps--article > h3{font-size:20px;margin:28px 0 10px;} .pdr-corps--article > p{font-size:17.5px;line-height:1.7;max-width:none;} .pdr-corps--article > .pdr-trajet,.pdr-corps--article > .pdr-comparatif,.pdr-corps--article > .pdr-reperes,.pdr-corps--article > aside,.pdr-corps--article > section,.pdr-corps--article > figure{margin:28px 0;} .pdr-corps--article section.faq h2,.pdr-corps--article .sources h2{scroll-margin-top:110px;} /* Encadré « à retenir » et repères en tuiles */ .pdr-corps .pdr-encadre--retenir{display:flex;flex-direction:column;gap:6px;background:var(--sb-eau);border-radius:var(--sb-r-tuile);padding:18px 22px;border-left:4px solid var(--sb-bleu);} .pdr-corps .pdr-encadre--retenir strong{color:var(--sb-bleu);font-family:var(--sb-font-titre);font-size:17px;margin:0;} .pdr-reperes{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;} .pdr-repere{margin:0;background:var(--sb-ardoise);color:rgba(255,255,255,.8);border-radius:var(--sb-r-tuile);padding:18px;display:flex;flex-direction:column;gap:6px;max-width:none!important;} .pdr-repere strong{color:#fff;font:600 20px/1.15 var(--sb-font-titre);} .pdr-repere span{font-size:14px;line-height:1.45;} /* Signature : carte sous le corps */ .pdr-auteur-box--carte{background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-carte);padding:22px 24px;margin:0;border-top:0;align-items:center;} /* Barre latérale : SEUL le formulaire, plus court que l'écran → vraiment collant */ .pdr-aside-form{position:sticky;top:96px;align-self:start;} .pdr-aside-form__carte{background:#fff;border-radius:var(--sb-r-carte);box-shadow:var(--sb-ombre-flottant);padding:22px 20px;} .pdr-aside-form__titre{font:600 18px var(--sb-font-titre);margin:0 0 12px;} @media (max-width:1180px){ .pdr-article-grille{grid-template-columns:1fr;} .pdr-aside-form{position:static;} .pdr-sommaire-carte{display:block;} } /* À lire aussi : section pleine largeur sous l'article, 3 cartes photo */ .pdr-lire-aussi{margin-top:16px;} .pdr-lire-aussi__grille{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:24px;} .pdr-lire-aussi__grille .pdr-carte__photo{aspect-ratio:16/10;flex:none;} @media (max-width:980px){ .pdr-lire-aussi__grille{grid-template-columns:1fr;} } .pdr-lire-aussi__grille{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));} .pdr-lire-aussi__grille .pdr-carte{flex-direction:row;} .pdr-lire-aussi__grille .pdr-carte__photo{aspect-ratio:auto;flex:0 0 44%;min-height:200px;} @media (max-width:620px){ .pdr-lire-aussi__grille .pdr-carte{flex-direction:column;} .pdr-lire-aussi__grille .pdr-carte__photo{aspect-ratio:16/10;flex:none;} } .pdr-lire-aussi__grille .pdr-carte__corps,.pdr-guides__liste .pdr-carte__corps{flex:1 1 auto;min-width:0;} .pdr-final__rassure{display:flex;flex-wrap:wrap;gap:8px 20px;margin:22px 0 0!important;font-size:14px!important;color:rgba(255,255,255,.85);} .pdr-final__rassure span{display:inline-flex;align-items:center;gap:8px;} .pdr-final__rassure svg{width:18px;height:18px;color:#6FD3A3;} .pdr-appel-final{margin-top:24px;} /* Qui sommes-nous : texte en infographie */ .pdr-qsn-info__intro{font:500 clamp(20px,1.7vw,24px)/1.45 var(--sb-font-titre);color:var(--sb-ardoise);max-width:46em;margin:0 0 28px;} .pdr-qsn-info__grille{display:grid;grid-template-columns:1fr 1.4fr;gap:20px;} .pdr-qsn-info__approche{background:var(--sb-ardoise);color:rgba(255,255,255,.82);border-radius:var(--sb-r-carte);padding:28px;} .pdr-qsn-info__approche h2{color:#fff;font-size:24px;margin:14px 0 10px;} .pdr-qsn-info__approche p{margin:0;font-size:16px;line-height:1.6;} .pdr-qsn-info__couvre{background:var(--sb-eau);border-radius:var(--sb-r-carte);padding:28px;} .pdr-qsn-info__couvre h2{font-size:24px;margin:0 0 16px;} .pdr-qsn-info__tuiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;} .pdr-qsn-info__tuile{background:#fff;border-radius:var(--sb-r-tuile);box-shadow:var(--sb-ombre-carte);padding:18px;margin:0;display:flex;flex-direction:column;gap:6px;} .pdr-qsn-info__tuile strong{font:600 17px var(--sb-font-titre);color:var(--sb-ardoise);} .pdr-qsn-info__tuile > span:last-child{font-size:14px;color:var(--sb-galet);line-height:1.45;} .pdr-qsn-info__icone{width:40px;height:40px;border-radius:12px;background:var(--sb-eau);color:var(--sb-bleu);display:inline-flex;align-items:center;justify-content:center;} .pdr-qsn-info__approche .pdr-qsn-info__icone{background:rgba(255,255,255,.1);color:#fff;} .pdr-qsn-info__icone svg{width:20px;height:20px;} .pdr-qsn-info__note{display:flex;gap:10px;align-items:flex-start;margin:22px 0 0;font-size:15px;color:var(--sb-galet);} .pdr-qsn-info__note svg{width:20px;height:20px;color:var(--sb-remis);flex:none;margin-top:2px;} .pdr-qsn-info__note a{color:var(--sb-bleu);font-weight:700;} @media (max-width:980px){ .pdr-qsn-info__grille{grid-template-columns:1fr;} .pdr-qsn-info__tuiles{grid-template-columns:1fr;} } .pdr-devis-seo .pdr-section__panneau{max-width:980px;margin-inline:auto;} .pdr-devis-seo .pdr-accordeon > summary h3{font-size:clamp(17px,1.4vw,20px);margin:0;line-height:1.3;} .pdr-devis-seo .pdr-accordeon__corps p{font-size:16.5px;line-height:1.7;color:var(--sb-ardoise);} .pdr-devis-seo .pdr-accordeon__corps a{color:var(--sb-bleu);font-weight:600;} .pdr-bandeau-simple__chapo{margin-top:14px;} .pdr-corps .sources-titre{margin:0 0 8px;font-family:var(--sb-font-titre);color:var(--sb-ardoise);} .pdr-logo__symbole img{display:block;width:100%;height:100%;} /* Boîte auteur en mobile : photo calée en haut avec le nom, pas flottante au milieu (sortie 03/10). */ @media (max-width:700px){.pdr-auteur-box--carte{align-items:flex-start;padding:20px;gap:14px;}.pdr-auteur-box--carte img.pdr-portrait-auteur{width:52px;height:52px;}} /* ===================== 24. SORTIE 03/10 — JUGEMENT-VISUEL.md du 03/10 (rouges 2,3,4,5,6,7,8,10,12,13) ===================== */ /* Rouge 3 — Accueil 1440 : la carte du formulaire, dès l'étape 2, ne doit plus jamais recouvrir la pastille « N communes · Voir la carte » nichée dans l'encoche de la photo. Le formulaire grandit avec les étapes (coordonnées, créneaux...) ; on efface la pastille proprement (jamais un chevauchement visible) dès que le pas n'est plus 0. S'applique aussi aux pages ville (même structure), où la pastille affiche le nom de la commune. */ .pdr-hero__photo-zone:has(form[data-pas]:not([data-pas="0"])) .pdr-hero__photo > .pdr-encoche__contenu{ opacity:0;visibility:hidden;pointer-events:none;transition:opacity .15s ease; } /* Rouge 2 — Qui sommes-nous en 390 : `.pdr-hero--accueil .pdr-hero__photo-zone` (règle « jamais plus haut que l'écran », section 21) a une spécificité plus forte que la règle mobile générale qui remet min-height à 0 : sur une page SANS formulaire dans la photo-zone (qui-sommes-nous n'en a pas), ça laissait un grand vide beige sous la photo de 200px. On restaure l'intention mobile (hauteur dictée par le contenu, jamais imposée). */ @media (max-width:1180px){ .pdr-hero--accueil .pdr-hero__photo-zone{min-height:0;} } /* Les 3 tuiles-chiffres de Qui sommes-nous sont la seule preuve chiffrée de la page en mobile : on les affiche, compactes et sur une ligne qui défile, au lieu de les masquer (ancienne règle générale `.pdr-hero__preuves{display:none}` pensée pour l'accueil, pas pour cette page). */ @media (max-width:760px){ .pdr-hero--qsn .pdr-hero__preuves{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:10px;margin:14px 0 2px;padding-bottom:2px;} .pdr-hero--qsn .pdr-pastille-chiffre{flex:0 0 auto;min-width:108px;padding:10px 14px;} .pdr-hero--qsn .pdr-pastille-chiffre__valeur{font-size:22px;} .pdr-hero--qsn .pdr-pastille-chiffre__legende{font-size:11px;line-height:1.25;} } /* Rouge 4 — Qui sommes-nous en 1440/1920 : la colonne de texte (titre court + chapo + 3 chiffres) est bien plus courte que la colonne photo (align-items:stretch égalise les 2 cellules de la grille) : ça laissait ~330px de vide sous le texte. On centre le texte verticalement dans sa cellule et on réduit un peu la hauteur de la photo : le vide se répartit en haut/bas au lieu de s'accumuler tout en bas, et l'écart se referme. */ @media (min-width:1181px){ .pdr-hero--qsn .pdr-hero__texte{display:flex;flex-direction:column;justify-content:center;padding-top:0;padding-bottom:24px;} .pdr-hero--qsn .pdr-qsn-photo{min-height:clamp(340px,40vh,460px);} } /* Rouge 5 — Qui sommes-nous : le bouton "Ses N publications" (libellé changé en PHP) ne doit jamais passer sur 2 lignes en 390 : la carte-auteur passe en colonne pour que le bloc de texte (et le bouton) ait toute la largeur de la carte, plus seulement l'espace restant à côté du monogramme. */ @media (max-width:620px){ .pdr-carte-auteur{flex-direction:column;align-items:flex-start;gap:14px;} .pdr-btn--publications{white-space:nowrap;} } /* Rouge 6 — Contact en 390 : la découpe de l'encoche (prévue pour la mini-carte de l'Essonne) masquait les 2/3 de la photo du plombier puisque la mini-carte elle-même est déjà cachée en mobile (`.pdr-contact-pastille.pdr-encoche__contenu{display:none}`, règle existante). On efface aussi la découpe : la photo se voit entière, sans trou beige. */ @media (max-width:760px){ .pdr-encoche--bas-droite:has(.pdr-contact-pastille) .pdr-encoche__decoupe{display:none;} } /* Rouge 7 — Rubriques en 390 : le cartouche de titre (coin haut-gauche, 120px de haut) ne laissait qu'une bande de photo pleine largeur d'environ 110px, et la barre de filtres (à cheval, défilement horizontal) coupait visuellement « Communes » en « Comm ». On agrandit la photo pour qu'il reste au moins ~220px de photo visible sous le cartouche, et les filtres repassent en flux normal (ligne qui se replie), jamais coupés ni dépendants d'un scroll caché. */ @media (max-width:760px){ .pdr-rubrique-tete{height:360px;margin-bottom:28px;} .pdr-rubrique-filtres{position:static;transform:none;left:auto;right:auto;margin:14px var(--sb-inset) 0;flex-wrap:wrap;overflow-x:visible;background:none;box-shadow:none;padding:0;border-radius:0;} .pdr-rubrique-filtres a{background:#fff;box-shadow:var(--sb-ombre-carte);flex:none;} } /* Rouge 8 — Rubriques en 1440/1920 : le surtitre et le H1 du cartouche étaient collés au bord gauche de leur niche (padding-left oublié). */ .pdr-rubrique-titre-carte{padding-left:36px;} @media (max-width:760px){ .pdr-rubrique-titre-carte{padding-left:20px;} } /* Rouge 12 — Page Communes : grille de cartes photo des 20 communes sous la carte (markup dans category.php), compacte sur tous les écrans — jamais une photo plus grande qu'une carte de rubrique classique. */ .pdr-communes-grille{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:8px;} .pdr-communes-grille .pdr-carte__photo{aspect-ratio:4/3;} .pdr-communes-grille .pdr-carte__corps{padding:12px 14px;gap:0;} .pdr-communes-grille .pdr-carte__titre{font-size:15px;line-height:1.25;} @media (max-width:1180px){ .pdr-communes-grille{grid-template-columns:repeat(4,1fr);} } @media (max-width:760px){ .pdr-communes-grille{grid-template-columns:repeat(2,1fr);gap:12px;} } /* Rouge 13 — Grands titres qui se lisent en 2 morceaux éloignés : `h1,h2,h3,h4` n'a pas de line-height propre et hérite du 1.65 du corps de texte, bien trop lâche pour un gros titre. On resserre ceux qui n'avaient pas déjà leur propre valeur, et on laisse le navigateur équilibrer la coupure de ligne de la bande finale (support large en 2026, dégradation silencieuse sinon). */ .pdr-final__contenu h2{line-height:1.12;text-wrap:balance;} .pdr-bandeau-simple h1{line-height:1.15;} @media (max-width:620px){ .pdr-bandeau-simple h1{font-size:32px;line-height:1.15;} } /* Sortie 03/10 passe 2 — page Communes : vignettes compactes (photo carrée + nom en ligne), la grille des 20 communes tient sous un écran ; tuiles chiffres de Qui sommes-nous en grille 3 colonnes en mobile (plus de tuile coupée) ; bande chiffres : source sous les chiffres. */ .pdr-communes-grille{grid-template-columns:repeat(5,1fr);gap:12px;} .pdr-communes-grille .pdr-carte--commune{flex-direction:row;align-items:center;gap:12px;padding:8px;min-height:0;} .pdr-communes-grille .pdr-carte--commune .pdr-carte__photo{flex:0 0 64px;width:64px;height:64px;aspect-ratio:1/1;border-radius:12px;overflow:hidden;} .pdr-communes-grille .pdr-carte--commune .pdr-carte__photo img{width:100%;height:100%;object-fit:cover;} .pdr-communes-grille .pdr-carte--commune .pdr-carte__corps{padding:0;} .pdr-communes-grille .pdr-carte--commune .pdr-carte__titre{font-size:14px;line-height:1.25;margin:0;} @media (max-width:1180px){ .pdr-communes-grille{grid-template-columns:repeat(4,1fr);} } @media (max-width:760px){ .pdr-communes-grille{grid-template-columns:repeat(2,1fr);gap:10px;} .pdr-communes-grille .pdr-carte--commune .pdr-carte__photo{flex-basis:48px;width:48px;height:48px;} .pdr-hero--qsn .pdr-hero__preuves{display:grid;grid-template-columns:repeat(3,1fr);overflow:visible;} .pdr-hero--qsn .pdr-pastille-chiffre{min-width:0;padding:10px 10px;} } .pdr-chiffres-source{margin:20px auto 0;font-size:14px;opacity:.8;} .pdr-chiffres-source a{color:inherit;text-decoration:underline;} .pdr-chiffre-geant span{max-width:240px;margin-inline:auto;} .pdr-communes-grille .pdr-carte--commune .pdr-carte__titre{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere;hyphens:auto;} .pdr-communes-grille .pdr-carte--commune .pdr-carte__corps{min-width:0;flex:1;} @media (max-width:760px){ .pdr-communes-grille .pdr-carte--commune .pdr-carte__titre{font-size:13px;} }