/* ========================================================= Syllodi Nuisibles IDF — Design system Mobile-first · WCAG 2.2 AA · aucune dépendance externe ========================================================= */ /* ---------- 1. Tokens ---------- */ :root{ /* Bleu — confiance, expertise */ --bleu-900:#0a2540; --bleu-800:#0d3357; --bleu-700:#0f4c81; --bleu-600:#1565c0; --bleu-100:#dbeafe; --bleu-50:#eff6fc; /* Vert — action, résultat (blanc sur vert-600 = 5.3:1) */ --vert-700:#075c40; --vert-600:#0a7350; --vert-500:#0f9d68; --vert-50:#e8f6f0; /* Urgence (blanc sur orange-600 = 5.1:1) */ --orange-600:#c2410c; --orange-50:#fff3ed; /* Neutres */ --gris-900:#111827; --gris-700:#374151; --gris-600:#4b5563; --gris-400:#9ca3af; --gris-300:#d1d5db; --gris-200:#e5e7eb; --gris-100:#f3f4f6; --gris-50:#f9fafb; --blanc:#fff; --texte:var(--gris-900); --texte-doux:var(--gris-700); --fond:var(--blanc); --fond-alt:var(--gris-50); --bordure:var(--gris-200); --r-sm:6px; --r:10px; --r-lg:16px; --r-xl:24px; --r-full:999px; --ombre-sm:0 1px 2px rgba(10,37,64,.06),0 1px 3px rgba(10,37,64,.08); --ombre:0 4px 6px -1px rgba(10,37,64,.08),0 2px 4px -2px rgba(10,37,64,.06); --ombre-lg:0 12px 24px -6px rgba(10,37,64,.12),0 4px 8px -4px rgba(10,37,64,.08); --max:1200px; --max-texte:70ch; --esp:clamp(3rem,7vw,5.5rem); --police:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --header-h:64px; } /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box} *{margin:0} /* overflow-x doit rester sur : posé sur , il transforme body en conteneur de défilement et scroll-padding-top cesse de s'appliquer — les ancres atterrissent alors sous l'en-tête collant. */ html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 1rem); overflow-x:hidden; } body{ font-family:var(--police);font-size:1rem;line-height:1.65; color:var(--texte);background:var(--fond); -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img,svg,video{display:block;max-width:100%;height:auto} input,button,textarea,select{font:inherit;color:inherit} button{cursor:pointer;background:none;border:0} ul,ol{padding:0;list-style:none} a{color:var(--bleu-700);text-underline-offset:.2em} a:hover{color:var(--bleu-600)} h1,h2,h3,h4{line-height:1.2;text-wrap:balance;font-weight:800;color:var(--bleu-900)} p,li{text-wrap:pretty} :where(h1){font-size:clamp(1.85rem,1.2rem + 2.6vw,3.1rem);letter-spacing:-.02em} :where(h2){font-size:clamp(1.5rem,1.15rem + 1.5vw,2.25rem);letter-spacing:-.015em} :where(h3){font-size:clamp(1.15rem,1.05rem + .5vw,1.4rem)} :where(h4){font-size:1.05rem} /* L'attribut [hidden] doit toujours l'emporter : une classe posant `display` (.btn, .carte…) écrase sinon la règle `[hidden]{display:none}` du navigateur, et l'élément reste visible alors que le script le croit masqué. */ [hidden]{display:none!important} /* Accessibilité : focus toujours visible (WCAG 2.2 – 2.4.11/2.4.13) */ :focus-visible{outline:3px solid var(--bleu-600);outline-offset:2px;border-radius:2px} .saut-contenu{ position:absolute;left:.5rem;top:-4rem;z-index:2000; background:var(--bleu-900);color:#fff;padding:.75rem 1.25rem; border-radius:var(--r);font-weight:700;transition:top .15s; } .saut-contenu:focus{top:.5rem;color:#fff} .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* ---------- 3. Layout ---------- */ .conteneur{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:1.15rem} @media(min-width:768px){.conteneur{padding-inline:2rem}} .section{padding-block:var(--esp)} .section--alt{background:var(--fond-alt)} .section--bleu{background:var(--bleu-900);color:#e8eef6} .section--bleu h2,.section--bleu h3{color:#fff} .section--bleu p{color:#c7d5e6} .mesure{max-width:var(--max-texte)} .grille{display:grid;gap:1.25rem} @media(min-width:640px){.grille--2{grid-template-columns:repeat(2,1fr)}} @media(min-width:900px){ .grille--3{grid-template-columns:repeat(3,1fr)} .grille--4{grid-template-columns:repeat(4,1fr)} .grille--2-1{grid-template-columns:1.4fr 1fr;gap:2.5rem;align-items:start} } .entete-section{max-width:62ch;margin-bottom:2.25rem} .entete-section p{color:var(--texte-doux);margin-top:.75rem;font-size:1.05rem} /* Déclaré après .section--bleu p, cette règle l'écraserait à specificité égale : on rétablit explicitement la couleur claire (sinon 1,4:1 sur le fond marine). */ .section--bleu .entete-section p{color:#c7d5e6} .entete-section--centre{margin-inline:auto;text-align:center} /* ---------- 4. Éléments ---------- */ .kicker{ display:inline-flex;align-items:center;gap:.45rem; font-size:.78rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase; color:var(--vert-700);background:var(--vert-50); padding:.4rem .85rem;border-radius:var(--r-full);margin-bottom:1rem; } .kicker--urgence{color:var(--orange-600);background:var(--orange-50)} .kicker--clair{color:#8fe3c0;background:rgba(15,157,104,.16)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.55rem; padding:.9rem 1.6rem;border-radius:var(--r);font-weight:700;font-size:1rem; text-decoration:none;border:2px solid transparent; transition:transform .12s ease,box-shadow .12s ease,background-color .12s ease; min-height:48px; /* cible tactile WCAG 2.2 – 2.5.8 */ text-align:center; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn--vert{background:var(--vert-600);color:#fff;box-shadow:var(--ombre)} .btn--vert:hover{background:var(--vert-700);color:#fff;box-shadow:var(--ombre-lg)} .btn--bleu{background:var(--bleu-700);color:#fff} .btn--bleu:hover{background:var(--bleu-800);color:#fff} .btn--orange{background:var(--orange-600);color:#fff} .btn--orange:hover{background:#9a3412;color:#fff} .btn--fantome{border-color:var(--bleu-700);color:var(--bleu-700);background:transparent} .btn--fantome:hover{background:var(--bleu-50)} .btn--blanc{background:#fff;color:var(--bleu-900)} .btn--blanc:hover{background:var(--bleu-50);color:var(--bleu-900)} .btn--bloc{width:100%} .btn--lg{padding:1.05rem 2rem;font-size:1.08rem;min-height:56px} .btn-groupe{display:flex;flex-wrap:wrap;gap:.75rem} .carte{ background:var(--blanc);border:1px solid var(--bordure);border-radius:var(--r-lg); padding:1.5rem;box-shadow:var(--ombre-sm); transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease; } .carte h3{margin-bottom:.5rem} .carte p{color:var(--texte-doux);font-size:.97rem} a.carte,.carte--lien{text-decoration:none;color:inherit;display:block} a.carte:hover,.carte--lien:hover{box-shadow:var(--ombre-lg);transform:translateY(-3px);border-color:var(--bleu-100)} .carte__icone{ width:58px;height:58px;border-radius:var(--r);background:var(--bleu-50); color:var(--bleu-700); display:grid;place-items:center;margin-bottom:1rem; } .carte__icone svg{width:32px;height:32px;stroke-width:1.7} .carte__meta{ font-size:.83rem;font-weight:700;color:var(--vert-700);margin-top:.9rem; display:flex;align-items:center;gap:.35rem; } .carte__meta svg{flex:none} .carte--urgence{border-left:4px solid var(--orange-600)} .liste-check{display:grid;gap:.7rem} .liste-check li{position:relative;padding-left:2rem;color:var(--texte-doux)} .liste-check li::before{ content:"";position:absolute;left:0;top:.42em;width:1.15rem;height:1.15rem; background:var(--vert-50);border-radius:var(--r-full); } .liste-check li::after{ content:"";position:absolute;left:.34rem;top:.72em;width:.42rem;height:.2rem; border-left:2px solid var(--vert-600);border-bottom:2px solid var(--vert-600); transform:rotate(-45deg); } .liste-croix li::before{background:var(--orange-50)} .liste-croix li::after{ content:"×";border:0;left:.42rem;top:.05em;width:auto;height:auto; color:var(--orange-600);font-weight:800;font-size:1rem;transform:none; } .liste-puces li{position:relative;padding-left:1.4rem;color:var(--texte-doux);margin-bottom:.55rem} .liste-puces li::before{content:"";position:absolute;left:.35rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--bleu-600)} /* ---------- 5. Header ---------- */ .entete{ position:sticky;top:0;z-index:900;background:rgba(255,255,255,.97); backdrop-filter:blur(8px);border-bottom:1px solid var(--bordure); } .entete__barre{display:flex;align-items:center;gap:1rem;height:var(--header-h)} .logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:800;color:var(--bleu-900);font-size:1.1rem;letter-spacing:-.02em;white-space:nowrap} .logo svg{flex:none} .logo span small{display:block;font-size:.62rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--vert-700);line-height:1} .nav{margin-left:auto;display:none} .nav ul{display:flex;align-items:center;gap:.2rem} .nav a{ display:block;padding:.55rem .8rem;border-radius:var(--r-sm); font-weight:600;font-size:.95rem;color:var(--gris-700);text-decoration:none; } .nav a:hover,.nav a[aria-current]{color:var(--bleu-700);background:var(--bleu-50)} .entete__actions{margin-left:auto;display:flex;align-items:center;gap:.6rem} .tel-entete{ display:none;align-items:center;gap:.5rem;font-weight:800;color:var(--bleu-900); text-decoration:none;font-size:1.02rem;white-space:nowrap;padding:.4rem .6rem;border-radius:var(--r-sm); } .tel-entete:hover{background:var(--bleu-50);color:var(--bleu-900)} .tel-entete svg{color:var(--vert-600)} .burger{ display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-sm); border:1px solid var(--bordure);color:var(--bleu-900);flex:none; } .burger:hover{background:var(--gris-100)} /* Le CTA de l'en-tête ne doit jamais passer à la ligne ni faire grandir la barre. */ .entete__actions .btn{white-space:nowrap;padding-inline:1.1rem} /* Sous 640 px, la barre d'action fixe en bas assure déjà Appeler + WhatsApp : on retire le CTA de l'en-tête pour laisser respirer logo et menu. */ @media(max-width:639px){.entete__actions .btn--vert{display:none}} @media(min-width:1024px){ .nav{display:block} .burger{display:none} .tel-entete{display:inline-flex} .nav+.entete__actions{margin-left:1rem} } /* sous-menu */ .nav li.a-sousmenu{position:relative} .nav .sousmenu{ position:absolute;top:calc(100% + .35rem);left:0;min-width:250px; background:#fff;border:1px solid var(--bordure);border-radius:var(--r); box-shadow:var(--ombre-lg);padding:.5rem;display:none;flex-direction:column;gap:.1rem; } .nav li.a-sousmenu:hover .sousmenu,.nav li.a-sousmenu:focus-within .sousmenu{display:flex} .nav .sousmenu a{padding:.55rem .7rem;font-weight:600;font-size:.93rem} .nav__fleche{margin-left:.25rem;opacity:.6} /* menu mobile */ .menu-mobile{ position:fixed;inset:var(--header-h) 0 0;background:#fff;z-index:899; overflow-y:auto;padding:1.25rem 1.15rem 6rem; transform:translateX(100%);transition:transform .22s ease;visibility:hidden; } .menu-mobile[data-ouvert]{transform:translateX(0);visibility:visible} .menu-mobile h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--gris-600);margin:1.5rem 0 .5rem} .menu-mobile h2:first-child{margin-top:0} .menu-mobile a{display:block;padding:.8rem .25rem;border-bottom:1px solid var(--gris-100);font-weight:600;text-decoration:none;color:var(--gris-900)} .menu-mobile .btn{margin-top:1.5rem} body[data-menu-ouvert]{overflow:hidden} /* ---------- 6. Hero ---------- */ .hero{ position:relative;background: radial-gradient(1000px 500px at 12% -8%,rgba(21,101,192,.28),transparent 60%), radial-gradient(800px 420px at 92% 8%,rgba(15,157,104,.22),transparent 62%), linear-gradient(155deg,var(--bleu-900) 0%,var(--bleu-800) 55%,#0b3a63 100%); color:#fff;padding-block:clamp(2.5rem,6vw,4.5rem);overflow:hidden; } .hero::after{ content:"";position:absolute;inset:0;opacity:.05;pointer-events:none; background-image:radial-gradient(circle,#fff 1px,transparent 1px);background-size:26px 26px; } .hero__grille{display:grid;gap:2.5rem;position:relative;z-index:1} @media(min-width:960px){.hero__grille{grid-template-columns:1.15fr .85fr;gap:3rem;align-items:start}} .hero h1{color:#fff} .hero__accroche{font-size:clamp(1.02rem,.98rem + .35vw,1.2rem);color:#c7d5e6;margin-top:1.1rem;max-width:56ch} .hero__preuves{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.75rem} .puce-preuve{ display:inline-flex;align-items:center;gap:.45rem;font-size:.86rem;font-weight:600; background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18); padding:.45rem .85rem;border-radius:var(--r-full);color:#e8eef6; } .puce-preuve svg{color:#5fd7a6;flex:none} .hero .btn-groupe{margin-top:1.9rem} .hero__chiffres{display:flex;flex-wrap:wrap;gap:2rem;margin-top:2.25rem;padding-top:1.75rem;border-top:1px solid rgba(255,255,255,.15)} .chiffre b{display:block;font-size:1.75rem;font-weight:800;color:#fff;line-height:1.1} .chiffre span{font-size:.83rem;color:#a8bdd4} /* ---------- 7. Formulaire ---------- */ .bloc-form{background:#fff;border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--ombre-lg);color:var(--texte)} @media(min-width:480px){.bloc-form{padding:1.85rem}} .bloc-form h2,.bloc-form h3{font-size:1.3rem;color:var(--bleu-900)} .bloc-form__sous{font-size:.9rem;color:var(--texte-doux);margin:.4rem 0 1.25rem} .champ{margin-bottom:.95rem} .champ label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.35rem;color:var(--gris-900)} .champ .req{color:var(--orange-600)} .champ input,.champ select,.champ textarea{ width:100%;padding:.8rem .9rem;border:1.5px solid var(--gris-300);border-radius:var(--r); background:#fff;font-size:1rem;min-height:48px;transition:border-color .12s,box-shadow .12s; } .champ textarea{min-height:96px;resize:vertical} .champ input:hover,.champ select:hover,.champ textarea:hover{border-color:var(--gris-400)} .champ input:focus,.champ select:focus,.champ textarea:focus{ outline:none;border-color:var(--bleu-600);box-shadow:0 0 0 3px var(--bleu-100); } .champ input[aria-invalid="true"],.champ select[aria-invalid="true"]{border-color:var(--orange-600)} .champ__erreur{display:none;color:#9a3412;font-size:.83rem;font-weight:600;margin-top:.3rem} .champ__erreur[data-visible]{display:block} .champ--duo{display:grid;gap:.95rem} @media(min-width:520px){.champ--duo{grid-template-columns:1fr 1fr}} .form__rgpd{font-size:.78rem;color:var(--gris-600);margin-top:.9rem;line-height:1.5} .form__rgpd a{color:var(--bleu-700)} .form__consent{display:flex;gap:.6rem;align-items:flex-start;margin-top:.5rem} .form__consent input{width:24px;height:24px;min-height:0;margin-top:.1rem;flex:none;accent-color:var(--vert-600)} .form__consent label{font-size:.8rem;font-weight:400;color:var(--gris-600);line-height:1.45} /* pot de miel anti-spam : invisible mais accessible aux robots */ .pot-de-miel{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .form-alerte{padding:.85rem 1rem;border-radius:var(--r);font-size:.9rem;font-weight:600;margin-bottom:1rem;display:none} .form-alerte[data-visible]{display:block} .form-alerte--ok{background:var(--vert-50);color:var(--vert-700);border:1px solid #a7e0c8} .form-alerte--ko{background:var(--orange-50);color:#9a3412;border:1px solid #fdba8c} .form__envoi[aria-busy="true"]{opacity:.65;pointer-events:none} /* ---------- 8. Étapes / process ---------- */ .etapes{counter-reset:etape;display:grid;gap:1.15rem} @media(min-width:900px){.etapes--ligne{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}} .etape{position:relative;background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg);padding:1.4rem 1.4rem 1.4rem 1.4rem} .etape::before{ counter-increment:etape;content:counter(etape); display:grid;place-items:center;width:38px;height:38px;margin-bottom:.9rem; background:var(--bleu-700);color:#fff;border-radius:var(--r-full);font-weight:800;font-size:1.02rem; } .etape h3{font-size:1.08rem;margin-bottom:.45rem} .etape p{font-size:.94rem;color:var(--texte-doux)} .etape__duree{display:inline-block;margin-top:.8rem;font-size:.78rem;font-weight:700;color:var(--vert-700);background:var(--vert-50);padding:.25rem .65rem;border-radius:var(--r-full)} /* ---------- 9. FAQ ---------- */ .faq{display:grid;gap:.7rem;max-width:80ch} .faq details{background:#fff;border:1px solid var(--bordure);border-radius:var(--r);overflow:hidden} .faq details[open]{border-color:var(--bleu-100);box-shadow:var(--ombre-sm)} .faq summary{ padding:1.05rem 3rem 1.05rem 1.15rem;font-weight:700;cursor:pointer;position:relative; list-style:none;color:var(--bleu-900);min-height:48px;display:flex;align-items:center; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{ content:"";position:absolute;right:1.25rem;top:50%;width:.6rem;height:.6rem; border-right:2.5px solid var(--bleu-600);border-bottom:2.5px solid var(--bleu-600); transform:translateY(-70%) rotate(45deg);transition:transform .18s; } .faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg)} .faq summary:hover{background:var(--bleu-50)} .faq__reponse{padding:0 1.15rem 1.15rem;color:var(--texte-doux);font-size:.97rem} /* ---------- 10. Bandeaux CTA ---------- */ .bandeau-cta{ background:linear-gradient(135deg,var(--bleu-800),var(--bleu-700)); color:#fff;border-radius:var(--r-xl);padding:2rem 1.5rem;text-align:center; } @media(min-width:768px){.bandeau-cta{padding:2.75rem 3rem}} .bandeau-cta h2{color:#fff;font-size:clamp(1.3rem,1.1rem + 1vw,1.9rem)} .bandeau-cta p{color:#c7d5e6;margin:.75rem auto 1.6rem;max-width:60ch} .bandeau-cta .btn-groupe{justify-content:center} .bandeau-cta--urgence{background:linear-gradient(135deg,#9a3412,var(--orange-600))} .bandeau-cta--urgence p{color:#fff3ee} /* ---------- 11. Témoignages ---------- */ .avis{background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg);padding:1.4rem;display:flex;flex-direction:column;gap:.85rem} .avis__notes{display:flex;gap:.12rem;color:#e8a317} .avis blockquote{font-size:.97rem;color:var(--texte-doux);font-style:normal} .avis__auteur{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.6rem;border-top:1px solid var(--gris-100)} .avis__pastille{width:38px;height:38px;border-radius:var(--r-full);background:var(--bleu-50);color:var(--bleu-700);display:grid;place-items:center;font-weight:800;flex:none} .avis__nom{font-weight:700;font-size:.9rem} .avis__lieu{font-size:.8rem;color:var(--gris-600)} .avis--placeholder{border-style:dashed;border-color:var(--gris-400);background:var(--gris-50)} .avis--placeholder blockquote{color:var(--gris-600);font-style:italic} .bandeau-placeholder{ background:var(--orange-50);border:1px solid #fdba8c;color:#9a3412; padding:.9rem 1.1rem;border-radius:var(--r);font-size:.88rem;font-weight:600;margin-bottom:1.5rem; } /* ---------- 12. Carte (façade sans chargement tiers) ---------- */ .carte-geo{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--bordure);background:var(--bleu-50);aspect-ratio:16/10} .carte-geo iframe{width:100%;height:100%;border:0;display:block} .carte-geo__facade{ position:absolute;inset:0;display:grid;place-items:center;gap:.9rem;text-align:center;padding:1.5rem; background: linear-gradient(rgba(239,246,252,.86),rgba(219,234,254,.86)), repeating-linear-gradient(0deg,transparent 0 34px,rgba(21,101,192,.12) 34px 35px), repeating-linear-gradient(90deg,transparent 0 34px,rgba(21,101,192,.12) 34px 35px); } .carte-geo__facade p{font-size:.86rem;color:var(--gris-600);max-width:42ch} /* ---------- 13. Maillage / listes de liens ---------- */ .nuage-liens{display:flex;flex-wrap:wrap;gap:.5rem} .nuage-liens a{ display:inline-flex;align-items:center;min-height:26px; padding:.5rem .85rem;background:#fff;border:1px solid var(--bordure); border-radius:var(--r-full);font-size:.87rem;font-weight:600;color:var(--gris-700);text-decoration:none; } .nuage-liens a:hover{border-color:var(--bleu-600);color:var(--bleu-700);background:var(--bleu-50)} .colonnes-liens{columns:2;column-gap:1.5rem} @media(min-width:700px){.colonnes-liens{columns:3}} @media(min-width:1000px){.colonnes-liens{columns:4}} .colonnes-liens li{break-inside:avoid;margin-bottom:.4rem} /* Cible d'au moins 24 px de haut (WCAG 2.2 — 2.5.8). Le padding vertical agrandit la zone cliquable sans écarter visuellement les entrées. */ .colonnes-liens a{ display:inline-block;padding-block:.2rem;min-height:24px; font-size:.88rem;color:var(--gris-700);text-decoration:none; } .colonnes-liens a:hover{color:var(--bleu-700);text-decoration:underline} /* ---------- 14. Fil d'Ariane ---------- */ .ariane{padding-block:.9rem;font-size:.83rem;color:var(--gris-600);border-bottom:1px solid var(--gris-100)} .ariane ol{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center} .ariane li:not(:last-child)::after{content:"›";margin-left:.4rem;color:var(--gris-400)} .ariane a{color:var(--gris-600);text-decoration:none} .ariane a:hover{color:var(--bleu-700);text-decoration:underline} .ariane [aria-current]{color:var(--gris-900);font-weight:600} /* ---------- 15. Article / prose ---------- */ .prose{max-width:var(--max-texte)} .prose h2{margin-top:2.5rem;margin-bottom:.85rem} .prose h3{margin-top:1.85rem;margin-bottom:.6rem} .prose p,.prose ul,.prose ol{margin-bottom:1.05rem;color:var(--texte-doux)} .prose ul li{position:relative;padding-left:1.4rem;margin-bottom:.5rem} .prose ul li::before{content:"";position:absolute;left:.35rem;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--bleu-600)} .prose ol{counter-reset:n;padding-left:0} .prose ol li{counter-increment:n;position:relative;padding-left:2rem;margin-bottom:.5rem} .prose ol li::before{content:counter(n) ".";position:absolute;left:0;font-weight:800;color:var(--bleu-700)} .prose strong{color:var(--gris-900)} .encadre{ background:var(--bleu-50);border-left:4px solid var(--bleu-600); padding:1.15rem 1.35rem;border-radius:0 var(--r) var(--r) 0;margin:1.75rem 0; } .encadre p{margin-bottom:0;color:var(--gris-700)} .encadre--alerte{background:var(--orange-50);border-left-color:var(--orange-600)} .encadre--vert{background:var(--vert-50);border-left-color:var(--vert-600)} .encadre__titre{font-weight:800;color:var(--bleu-900);margin-bottom:.4rem;display:block} .encadre--alerte .encadre__titre{color:#9a3412} .chiffre-choc{ display:flex;gap:1.15rem;align-items:center;background:var(--bleu-900);color:#fff; border-radius:var(--r-lg);padding:1.35rem 1.5rem;margin:1.75rem 0; } .chiffre-choc b{font-size:clamp(2rem,1.5rem + 2vw,2.9rem);font-weight:800;line-height:1;color:#5fd7a6;flex:none} .chiffre-choc p{color:#c7d5e6;font-size:.95rem;margin:0} .chiffre-choc cite{display:block;font-size:.76rem;color:#8ba3bd;font-style:normal;margin-top:.35rem} .sommaire{background:var(--gris-50);border:1px solid var(--bordure);border-radius:var(--r-lg);padding:1.25rem 1.4rem;margin-bottom:2rem} .sommaire strong{display:block;margin-bottom:.6rem;color:var(--bleu-900)} .sommaire li{margin-bottom:.35rem} .sommaire a{font-size:.93rem;color:var(--gris-700);text-decoration:none} .sommaire a:hover{color:var(--bleu-700);text-decoration:underline} /* ---------- 16. Tableaux ---------- */ .tableau-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.5rem 0;border:1px solid var(--bordure);border-radius:var(--r-lg)} table{border-collapse:collapse;width:100%;min-width:480px;font-size:.93rem;background:#fff} th,td{padding:.85rem 1rem;text-align:left;border-bottom:1px solid var(--gris-100)} th{background:var(--gris-50);font-weight:800;color:var(--bleu-900);font-size:.85rem} tr:last-child td{border-bottom:0} /* ---------- 17. Footer ---------- */ .pied{background:var(--bleu-900);color:#a8bdd4;padding-block:3rem 1.5rem;font-size:.9rem} .pied__grille{display:grid;gap:2rem} @media(min-width:700px){.pied__grille{grid-template-columns:1.4fr 1fr 1fr 1fr}} .pied h3{color:#fff;font-size:.85rem;text-transform:uppercase;letter-spacing:.09em;margin-bottom:.9rem} .pied a{color:#a8bdd4;text-decoration:none} .pied a:hover{color:#fff;text-decoration:underline} .pied li{margin-bottom:.5rem} .pied__logo{color:#fff;font-weight:800;font-size:1.1rem;margin-bottom:.6rem;display:flex;align-items:center;gap:.55rem} .pied__contact{display:grid;gap:.5rem;margin-top:1rem} .pied__contact a{display:flex;align-items:center;gap:.55rem;font-weight:700;color:#fff} .pied__bas{ margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.12); display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;justify-content:space-between;font-size:.82rem; } .pied__legal{display:flex;flex-wrap:wrap;gap:.4rem 1rem} .pied__mentions{font-size:.78rem;color:#7d93ac;margin-top:1rem;max-width:75ch;line-height:1.6} /* ---------- 18. Barre d'action mobile ---------- */ .barre-mobile{ position:fixed;left:0;right:0;bottom:0;z-index:880;display:grid;grid-template-columns:1fr 1fr; gap:1px;background:var(--gris-200);border-top:1px solid var(--gris-200); padding-bottom:env(safe-area-inset-bottom); } .barre-mobile a{ display:flex;align-items:center;justify-content:center;gap:.5rem; padding:.95rem .5rem;background:#fff;font-weight:800;font-size:.95rem;text-decoration:none;min-height:54px; } .barre-mobile a:first-child{background:var(--vert-600);color:#fff} .barre-mobile a:last-child{background:var(--bleu-900);color:#fff} @media(min-width:1024px){.barre-mobile{display:none}} @media(max-width:1023px){body{padding-bottom:58px}} /* bouton WhatsApp flottant (desktop) */ .wa-flottant{ position:fixed;right:1.25rem;bottom:1.25rem;z-index:870;display:none; align-items:center;gap:.6rem;background:#25d366;color:#062e18;font-weight:800; padding:.85rem 1.25rem;border-radius:var(--r-full);box-shadow:var(--ombre-lg);text-decoration:none; } .wa-flottant:hover{background:#1eb959;color:#062e18;transform:translateY(-2px)} @media(min-width:1024px){.wa-flottant{display:inline-flex}} /* ---------- 19. Utilitaires ---------- */ .centre{text-align:center} .mt-0{margin-top:0}.mt-1{margin-top:.75rem}.mt-2{margin-top:1.5rem}.mt-3{margin-top:2.25rem} .mb-2{margin-bottom:1.5rem}.mb-3{margin-bottom:2.25rem} .petit{font-size:.85rem} .doux{color:var(--texte-doux)} .pastille-prix{display:inline-flex;align-items:baseline;gap:.3rem;font-weight:800;color:var(--vert-700);background:var(--vert-50);padding:.35rem .8rem;border-radius:var(--r-full);font-size:.9rem} /* ---------- 20. Carte interactive Île-de-France ---------- */ .carte-idf{--dep-fond:#e2ecf7;--dep-trait:#fff;--dep-actif:var(--vert-500)} .carte-idf__grille{display:grid;gap:2rem;align-items:start} @media(min-width:900px){.carte-idf__grille{grid-template-columns:1.15fr .85fr;gap:2.5rem}} .carte-idf__figure{margin:0} .carte-idf__svg{ width:100%;height:auto;display:block; background:linear-gradient(160deg,#f5f9fd,#e8f1fa); border:1px solid var(--bordure);border-radius:var(--r-lg); padding:.75rem;overflow:visible; } .carte-idf__zone path{ fill:var(--dep-fond);stroke:var(--dep-trait);stroke-width:2.5; stroke-linejoin:round; transition:fill .15s ease,filter .15s ease; cursor:pointer; } .carte-idf__zone:hover path, .carte-idf__zone:focus-visible path, .carte-idf__zone.est-survole path{ fill:var(--bleu-600); filter:drop-shadow(0 3px 6px rgba(10,37,64,.28)); } .carte-idf__zone:focus{outline:none} .carte-idf__zone:focus-visible path{stroke:var(--bleu-900);stroke-width:3.5} /* Département de la page courante */ .carte-idf[data-dep-actif] .carte-idf__zone.est-actif path{fill:var(--dep-actif)} .carte-idf[data-dep-actif] .carte-idf__zone.est-actif:hover path{fill:var(--vert-600)} .carte-idf__num{ fill:var(--bleu-800);font-size:34px;font-weight:800;text-anchor:middle; font-family:var(--police);pointer-events:none; paint-order:stroke;stroke:rgba(255,255,255,.85);stroke-width:5px; } .carte-idf__pastille circle{fill:var(--bleu-700);stroke:#fff;stroke-width:3;pointer-events:none} .carte-idf__pastille text{ fill:#fff;font-size:20px;font-weight:800;text-anchor:middle; font-family:var(--police);pointer-events:none; } /* Le libellé suit l'état de sa zone */ .carte-idf__zone:hover ~ .carte-idf__libelles [data-dep], .carte-idf__libelles [data-dep].est-survole circle{fill:var(--bleu-900)} .carte-idf__libelles [data-dep].est-survole .carte-idf__num, .carte-idf__num.est-survole{fill:#fff;stroke:var(--bleu-900)} .carte-idf__source{ font-size:.74rem;color:var(--gris-600);margin-top:.7rem;line-height:1.5; } .carte-idf__titre{font-size:1.15rem;margin-bottom:.4rem} .carte-idf__sous{font-size:.94rem;color:var(--texte-doux);margin-bottom:1.25rem} .carte-idf__legende{display:grid;gap:.4rem;margin-top:1.25rem} .carte-idf__ligne{ display:flex;align-items:center;gap:.85rem;padding:.6rem .75rem; border:1px solid var(--bordure);border-radius:var(--r);background:#fff; text-decoration:none;color:inherit;min-height:48px; transition:border-color .12s,background-color .12s,transform .12s; } .carte-idf__ligne:hover,.carte-idf__ligne.est-survole{ border-color:var(--bleu-600);background:var(--bleu-50);transform:translateX(2px);color:inherit; } .carte-idf__ligne.est-actif{border-color:var(--vert-600);background:var(--vert-50)} .carte-idf__pastille-legende{ flex:none;width:38px;height:30px;border-radius:var(--r-sm); background:var(--bleu-700);color:#fff;font-weight:800;font-size:.85rem; display:grid;place-items:center; } .carte-idf__ligne.est-actif .carte-idf__pastille-legende{background:var(--vert-600)} .carte-idf__texte{display:flex;flex-direction:column;line-height:1.3;min-width:0} .carte-idf__texte strong{font-size:.94rem;color:var(--bleu-900)} .carte-idf__texte small{font-size:.78rem;color:var(--gris-600)} .carte-idf__ligne svg{margin-left:auto;color:var(--gris-400);flex:none} .carte-idf__ligne:hover svg{color:var(--bleu-600)} /* Carte sur fond bleu foncé */ .section--bleu .carte-idf__svg{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .section--bleu .carte-idf{--dep-fond:#41648c;--dep-trait:#0a2540} .section--bleu .carte-idf__num{fill:#fff;stroke:rgba(10,37,64,.55)} .section--bleu .carte-idf__source{color:#8ba3bd} .section--bleu .carte-idf__titre{color:#fff} .section--bleu .carte-idf__sous{color:#c7d5e6} .section--bleu .carte-idf__ligne{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.16)} .section--bleu .carte-idf__ligne:hover,.section--bleu .carte-idf__ligne.est-survole{ background:rgba(255,255,255,.13);border-color:#5fd7a6; } .section--bleu .carte-idf__texte strong{color:#fff} .section--bleu .carte-idf__texte small{color:#a8bdd4} .section--bleu .recherche-commune label{color:#c7d5e6} /* ---------- 21. Recherche de commune ---------- */ .recherche-commune{position:relative} .recherche-commune label{display:block;font-weight:700;font-size:.88rem;margin-bottom:.4rem} .recherche-commune__champ{position:relative;display:flex;align-items:center} .recherche-commune__champ svg{position:absolute;left:.85rem;color:var(--gris-400);pointer-events:none} .recherche-commune input{ width:100%;padding:.8rem .9rem .8rem 2.6rem;min-height:48px; border:1.5px solid var(--gris-300);border-radius:var(--r);background:#fff;font-size:1rem; } .recherche-commune input:focus{ outline:none;border-color:var(--bleu-600);box-shadow:0 0 0 3px var(--bleu-100); } .recherche-commune__liste{ position:absolute;left:0;right:0;top:calc(100% + .35rem);z-index:60; background:#fff;border:1px solid var(--bordure);border-radius:var(--r); box-shadow:var(--ombre-lg);max-height:19rem;overflow-y:auto;padding:.3rem; } .recherche-commune__liste li{border-radius:var(--r-sm)} .recherche-commune__liste a{ display:flex;align-items:baseline;gap:.5rem;padding:.6rem .7rem; text-decoration:none;color:var(--gris-900);font-size:.94rem;min-height:44px; } .recherche-commune__liste li:hover a,.recherche-commune__liste li[aria-selected="true"] a{ background:var(--bleu-50);color:var(--bleu-800); } .recherche-commune__liste b{font-weight:700} .recherche-commune__liste small{color:var(--gris-600);font-size:.8rem;margin-left:auto;white-space:nowrap} .recherche-commune__vide{padding:.85rem .7rem;color:var(--gris-600);font-size:.9rem} .recherche-commune__aide{font-size:.8rem;color:var(--gris-600);margin-top:.5rem} .section--bleu .recherche-commune__aide{color:#a8bdd4} /* ---------- 22. Formules de traitement ---------- */ .formules-grille{display:grid;gap:1.25rem;align-items:stretch} @media(min-width:760px){.formules-grille{grid-template-columns:repeat(3,1fr);gap:1.5rem}} .formule{ position:relative;display:flex;flex-direction:column; background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg); padding:1.6rem 1.5rem;box-shadow:var(--ombre-sm); transition:box-shadow .18s ease,transform .18s ease; } .formule:hover{box-shadow:var(--ombre-lg);transform:translateY(-2px)} /* Formule mise en avant : surélevée et bordée de vert, sans changer la grille */ .formule--phare{ border:2px solid var(--vert-600);box-shadow:var(--ombre-lg); padding-top:2rem; } @media(min-width:760px){.formule--phare{margin-block:-.6rem;padding-block:2.2rem 1.9rem}} .formule__etiquette{ position:absolute;top:0;left:50%;transform:translate(-50%,-50%); background:var(--vert-600);color:#fff;font-size:.72rem;font-weight:800; letter-spacing:.07em;text-transform:uppercase; padding:.32rem .85rem;border-radius:var(--r-full);white-space:nowrap; } .formule__nom{font-size:1.2rem;margin-bottom:.35rem} .formule__resume{font-size:.93rem;color:var(--texte-doux);margin-bottom:1.1rem} .formule__prix{ display:block;padding:.9rem 0;margin-bottom:1.1rem; border-block:1px solid var(--gris-100); } .formule__prix small{display:block;font-size:.76rem;color:var(--gris-600);line-height:1.4} .formule__prix b{ display:block;font-size:2rem;font-weight:800;color:var(--bleu-900); line-height:1.15;letter-spacing:-.02em; } .formule--phare .formule__prix b{color:var(--vert-700)} .formule__pourqui{font-size:.85rem;color:var(--texte-doux);margin-bottom:1rem;line-height:1.55} .formule__pourqui strong{color:var(--gris-900)} .formule__herite{ display:flex;align-items:flex-start;gap:.4rem; font-size:.83rem;font-weight:700;color:var(--vert-700);margin-bottom:.75rem; } .formule__herite svg{flex:none;margin-top:.15rem} .formule__inclus{margin-bottom:1.5rem} .formule__inclus li{font-size:.9rem} /* Le bouton reste aligné en bas quelle que soit la hauteur des listes */ .formule__cta{margin-top:auto} .formules-commun{ margin-top:2rem;background:var(--bleu-50);border:1px solid var(--bleu-100); border-radius:var(--r-lg);padding:1.5rem; } .formules-commun h3{font-size:1.02rem;margin-bottom:1rem} .formules-commun__liste{display:grid;gap:.65rem} @media(min-width:700px){.formules-commun__liste{grid-template-columns:repeat(2,1fr);column-gap:2rem}} @media(min-width:1050px){.formules-commun__liste{grid-template-columns:repeat(3,1fr)}} .formules-commun__liste li{font-size:.9rem} .formules-note{ font-size:.8rem;color:var(--gris-600);margin-top:1.5rem; max-width:80ch;line-height:1.6; } .formules-note__alerte{ display:block;margin-top:.5rem;color:#9a3412; background:var(--orange-50);border:1px solid #fdba8c; padding:.6rem .8rem;border-radius:var(--r-sm); } /* Variante sur fond bleu marine */ .section--bleu .formule{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)} .section--bleu .formule__nom{color:#fff} .section--bleu .formule__resume,.section--bleu .formule__pourqui{color:#c7d5e6} .section--bleu .formule__prix{border-color:rgba(255,255,255,.16)} .section--bleu .formule__prix b{color:#fff} .section--bleu .formule__prix small{color:#a8bdd4} .section--bleu .formule__inclus li{color:#c7d5e6} .section--bleu .formules-commun{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)} .section--bleu .formules-note{color:#8ba3bd} /* ---------- 23. Sources et références ---------- */ .sources-liste{counter-reset:src;display:grid;gap:.85rem} @media(min-width:820px){.sources-liste{grid-template-columns:repeat(2,1fr);gap:.85rem 1.5rem}} .source{ display:flex;gap:.9rem;align-items:flex-start; background:#fff;border:1px solid var(--bordure);border-radius:var(--r); padding:.95rem 1.05rem; transition:border-color .12s,box-shadow .12s; } .source:hover{border-color:var(--bleu-100);box-shadow:var(--ombre-sm)} .source__num{ flex:none;width:26px;height:26px;border-radius:var(--r-full); background:var(--bleu-50);color:var(--bleu-700); display:grid;place-items:center;font-size:.78rem;font-weight:800;margin-top:.1rem; } .source__corps{min-width:0;flex:1} .source__titre{ display:inline-flex;align-items:baseline;gap:.35rem; font-weight:700;font-size:.95rem;color:var(--bleu-800); text-decoration:none;line-height:1.35; } .source__titre:hover{color:var(--bleu-600);text-decoration:underline} .source__titre svg{flex:none;opacity:.55;align-self:center} .source__titre:hover svg{opacity:1} .source__meta{display:flex;flex-wrap:wrap;gap:.4rem .6rem;align-items:center;margin-top:.35rem} .source__editeur{font-size:.82rem;color:var(--gris-700);font-weight:600} .source__type{ font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase; color:var(--vert-700);background:var(--vert-50); padding:.15rem .5rem;border-radius:var(--r-full);white-space:nowrap; } .source__note{font-size:.83rem;color:var(--texte-doux);margin-top:.4rem;line-height:1.5} .source__url{ display:block;margin-top:.45rem;font-size:.74rem;color:var(--gris-400); overflow-wrap:anywhere; } .sources-pied{ display:flex;gap:.5rem;align-items:flex-start; font-size:.82rem;color:var(--gris-600);margin-top:1.5rem; max-width:85ch;line-height:1.6; } .sources-pied svg{flex:none;color:var(--vert-600);margin-top:.25rem} /* Lien externe en ligne (citations dans le corps de texte) */ .lien-externe{display:inline-flex;align-items:center;gap:.2rem} .lien-externe svg{opacity:.55} .lien-externe:hover svg{opacity:1} /* Source du chiffre choc, rendue cliquable */ .chiffre-choc cite a{color:#8fe3c0;text-decoration:underline;text-underline-offset:.15em} .chiffre-choc cite a:hover{color:#fff} .chiffre-choc cite .lien-externe svg{opacity:.7} /* Variante sur fond bleu marine */ .section--bleu .source{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)} .section--bleu .source__titre{color:#fff} .section--bleu .source__editeur{color:#c7d5e6} .section--bleu .source__note{color:#a8bdd4} .section--bleu .source__url{color:#7d93ac} .section--bleu .sources-pied{color:#a8bdd4} /* ---------- 24. Bandeau de préversion (uniquement avec --preview) ---------- */ .bandeau-preview{ position:relative;z-index:950; background:repeating-linear-gradient(135deg,#0a2540,#0a2540 12px,#123253 12px,#123253 24px); color:#e8eef6;font-size:.82rem;line-height:1.45; padding:.55rem 1.15rem;text-align:center; } .bandeau-preview strong{ color:#0a2540;background:#ffd166;border-radius:var(--r-sm); padding:.1rem .45rem;margin-right:.35rem;font-weight:800; font-size:.74rem;letter-spacing:.05em;text-transform:uppercase; } /* ---------- 25. Repères tarifaires et TVA ---------- */ .repere-prix{border-top:1px solid var(--gris-100);padding-top:.75rem;margin-top:.75rem} .repere-prix li{margin-bottom:.45rem;line-height:1.5} .formules-tva{ margin-top:1.75rem;background:var(--vert-50);border:1px solid #a7e0c8; border-radius:var(--r-lg);padding:1.15rem 1.35rem;max-width:85ch; } .formules-tva .encadre__titre{ display:flex;align-items:center;gap:.4rem;color:var(--vert-700);margin-bottom:.5rem; } .formules-tva p{font-size:.88rem;color:var(--gris-700);line-height:1.6;margin:0} .section--bleu .formules-tva{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16)} .section--bleu .formules-tva p{color:#c7d5e6} .section--bleu .formules-tva .encadre__titre{color:#8fe3c0} /* ---------- 26. Formulaire express ---------- */ .bloc-form--express{position:relative;border-top:4px solid var(--vert-600)} .express__badge{ display:inline-flex;align-items:center;gap:.4rem; background:var(--vert-50);color:var(--vert-700); font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase; padding:.35rem .8rem;border-radius:var(--r-full);margin-bottom:.9rem; } .champ--gros{font-size:1.25rem!important;font-weight:600;letter-spacing:.02em;min-height:56px!important} .express__ou{ text-align:center;font-size:.9rem;color:var(--gris-600); margin-top:1rem;padding-top:1rem;border-top:1px solid var(--gris-100); } .express__ou a{font-weight:800;color:var(--bleu-800);white-space:nowrap} /* ---------- 27. Bandeau de preuves ---------- */ .section--compacte{padding-block:clamp(1.75rem,3.5vw,2.5rem)} .preuves{display:grid;gap:1.25rem} @media(min-width:640px){.preuves{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.preuves{grid-template-columns:repeat(4,1fr);gap:1.5rem}} .preuves li{display:flex;flex-direction:column;gap:.3rem} .preuves__icone{ width:44px;height:44px;border-radius:var(--r);background:var(--vert-50);color:var(--vert-700); display:grid;place-items:center;margin-bottom:.45rem; } .preuves strong{font-size:1rem;color:var(--bleu-900);line-height:1.3} .preuves span:last-child{font-size:.86rem;color:var(--texte-doux);line-height:1.5} .section--bleu .preuves__icone{background:rgba(95,215,166,.16);color:#8fe3c0} .section--bleu .preuves strong{color:#fff} .section--bleu .preuves span:last-child{color:#c7d5e6} /* ---------- 28. Tableau comparatif ---------- */ .comparatif th[scope="row"]{background:var(--gris-50);font-weight:700;color:var(--bleu-900);width:22%;min-width:150px} .comparatif thead th{font-size:.8rem} .comparatif__nous{background:var(--vert-50);color:var(--vert-700);font-weight:600} .comparatif thead .comparatif__nous{background:var(--vert-600);color:#fff} .comparatif td{vertical-align:top} /* ---------- 29. Frise de déroulé ---------- */ .frise{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.4rem;margin:1.5rem 0} .frise__etape{display:flex;gap:.6rem;align-items:flex-start;flex:1 1 150px;min-width:140px} .frise__pastille{ flex:none;width:30px;height:30px;border-radius:var(--r-full); background:var(--bleu-700);color:#fff;font-weight:800;font-size:.85rem; display:grid;place-items:center; } .frise__corps{display:flex;flex-direction:column;line-height:1.35;min-width:0} .frise__corps strong{font-size:.9rem;color:var(--bleu-900)} .frise__corps span{font-size:.78rem;color:var(--vert-700);font-weight:700} .frise__lien{display:none;flex:0 0 18px;height:2px;background:var(--gris-300);margin-top:14px} @media(min-width:900px){.frise__lien{display:block}} .section--bleu .frise__corps strong{color:#fff} .section--bleu .frise__corps span{color:#8fe3c0} .section--bleu .frise__lien{background:rgba(255,255,255,.25)} /* ---------- 30. Encadré « pour qui » / segments ---------- */ .segments{display:grid;gap:1rem} @media(min-width:700px){.segments{grid-template-columns:repeat(2,1fr)}} @media(min-width:1050px){.segments{grid-template-columns:repeat(3,1fr)}} .segment{ background:#fff;border:1px solid var(--bordure);border-radius:var(--r-lg);padding:1.4rem; display:flex;flex-direction:column;gap:.5rem; } .segment h3{font-size:1.05rem} .segment p{font-size:.92rem;color:var(--texte-doux)} .segment ul{margin-top:.35rem} .segment ul li{font-size:.88rem} /* ---------- 31. Bloc urgence ---------- */ .urgence-bloc{ background:linear-gradient(135deg,#9a3412,var(--orange-600));color:#fff; border-radius:var(--r-xl);padding:1.75rem 1.5rem; } @media(min-width:768px){.urgence-bloc{padding:2.25rem 2.5rem}} .urgence-bloc h2,.urgence-bloc h3{color:#fff} .urgence-bloc p{color:#fff3ee} .urgence-bloc .liste-check li{color:#fff3ee} .urgence-bloc .liste-check li::before{background:rgba(255,255,255,.2)} .urgence-bloc .liste-check li::after{border-color:#fff} .urgence-liste{display:grid;gap:.6rem;margin-top:1.25rem} @media(min-width:700px){.urgence-liste{grid-template-columns:repeat(2,1fr);column-gap:2rem}} /* Lien Urgence dans la navigation */ .nav__urgence{display:inline-flex;align-items:center;gap:.35rem;color:var(--orange-600)!important;font-weight:800} .nav__urgence:hover{background:var(--orange-50)!important} /* ---------- 32. Lisibilité sur fonds sombres ---------- Plusieurs composants héritent de --texte-doux (#374151), illisible sur le marine du héros ou de .section--bleu (1,5:1). On rétablit une couleur claire partout où un conteneur sombre peut recevoir ces composants. */ .hero .liste-check li, .section--bleu .liste-check li, .hero .liste-puces li, .section--bleu .liste-puces li, .hero .prose p, .section--bleu .prose p{color:#c7d5e6} .hero .liste-check li::before, .section--bleu .liste-check li::before{background:rgba(95,215,166,.18)} .hero .liste-check li::after, .section--bleu .liste-check li::after{border-color:#5fd7a6} .hero .liste-croix li::before, .section--bleu .liste-croix li::before{background:rgba(255,255,255,.14)} .hero .liste-croix li::after, .section--bleu .liste-croix li::after{color:#ffb59a} .hero .liste-puces li::before, .section--bleu .liste-puces li::before{background:#5fd7a6} .hero strong,.section--bleu strong{color:#fff} .hero .petit.doux,.section--bleu .petit.doux{color:#a8bdd4} .hero h3,.hero h4{color:#fff} /* Le bandeau urgence garde sa propre palette chaude */ .urgence-bloc .liste-check li,.urgence-bloc .liste-croix li{color:#fff3ee} .urgence-bloc .liste-check li::before{background:rgba(255,255,255,.2)} .urgence-bloc .liste-check li::after{border-color:#fff} .urgence-bloc .liste-croix li::after{color:#fff} .urgence-bloc strong{color:#fff} /* ---------- 33. Identificateur de nuisible ---------- */ .quiz{max-width:720px;margin:0 auto;background:#fff;border:1px solid var(--bordure); border-radius:var(--r-xl);padding:1.5rem;box-shadow:var(--ombre)} @media(min-width:640px){.quiz{padding:2.25rem}} .quiz__progression{height:6px;background:var(--gris-100);border-radius:var(--r-full);overflow:hidden;margin-bottom:.75rem} .quiz__progression span{display:block;height:100%;background:var(--vert-600);border-radius:var(--r-full); width:0;transition:width .3s ease} .quiz__compteur{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--gris-600);margin-bottom:1.25rem} .quiz__question{font-size:clamp(1.2rem,1.05rem + .7vw,1.5rem);margin-bottom:1.25rem} .quiz__options{display:grid;gap:.6rem} .quiz__option{ display:block;width:100%;text-align:left;padding:.95rem 1.15rem;min-height:52px; border:1.5px solid var(--bordure);border-radius:var(--r);background:#fff; font-size:1rem;font-weight:600;color:var(--gris-900); transition:border-color .12s,background-color .12s,transform .12s; } .quiz__option:hover{border-color:var(--vert-600);background:var(--vert-50);transform:translateX(3px)} .quiz__option:focus-visible{outline:3px solid var(--bleu-600);outline-offset:2px} .quiz__pied{margin-top:1.25rem} .quiz__resultat{text-align:center} .quiz__badge{display:inline-block;background:var(--vert-50);color:var(--vert-700); font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase; padding:.3rem .8rem;border-radius:var(--r-full);margin-bottom:.85rem} .quiz__resultat h2{font-size:clamp(1.5rem,1.2rem + 1.4vw,2rem);margin-bottom:.2rem} .quiz__latin{color:var(--gris-600);font-size:.9rem;margin-bottom:.75rem} .quiz__resultat p{color:var(--texte-doux)} .quiz__jauge{height:10px;background:var(--gris-100);border-radius:var(--r-full); overflow:hidden;margin:1.25rem auto .6rem;max-width:340px} .quiz__jauge span{display:block;height:100%;background:linear-gradient(90deg,var(--vert-500),var(--vert-600))} .quiz__note{font-size:.85rem;max-width:52ch;margin-inline:auto} .quiz__resultat .btn-groupe{justify-content:center} .quiz__autres{font-size:.88rem;margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--gris-100)} .quiz__rejouer{margin-top:1rem} /* ---------- 34. Calendrier saisonnier ---------- */ .mois-actuel{ background:linear-gradient(135deg,var(--bleu-800),var(--bleu-700));color:#fff; border-radius:var(--r-xl);padding:1.75rem 1.5rem; } @media(min-width:768px){.mois-actuel{padding:2.25rem 2.5rem}} .mois-actuel h2{color:#fff;font-size:clamp(1.3rem,1.1rem + 1vw,1.8rem);margin-bottom:.6rem} .mois-actuel p{color:#c7d5e6;max-width:70ch} .mois-actuel__badge{ display:inline-block;background:var(--vert-600);color:#fff; font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase; padding:.3rem .8rem;border-radius:var(--r-full);margin-bottom:.85rem; } .mois-actuel .nuage-liens a{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.24);color:#fff} .mois-actuel .nuage-liens a:hover{background:rgba(255,255,255,.22);border-color:#5fd7a6;color:#fff} .carte--mois-actuel{border-color:var(--vert-600);border-width:2px;background:var(--vert-50)} .pastille-mois{ display:inline-block;background:var(--vert-600);color:#fff;font-size:.65rem;font-weight:800; letter-spacing:.06em;text-transform:uppercase;padding:.15rem .5rem;border-radius:var(--r-full); vertical-align:middle;margin-left:.4rem; } /* ---------- 35. Glossaire ---------- */ .glossaire{display:grid;gap:.9rem} @media(min-width:820px){.glossaire{grid-template-columns:repeat(2,1fr);gap:.9rem 1.5rem}} .glossaire__item{ background:#fff;border:1px solid var(--bordure);border-radius:var(--r); padding:1.05rem 1.2rem;scroll-margin-top:calc(var(--header-h) + 1rem); } .glossaire__item dt{font-weight:800;color:var(--bleu-900);font-size:1rem;margin-bottom:.35rem} .glossaire__item dd{margin:0;font-size:.9rem;color:var(--texte-doux);line-height:1.6} /* ---------- 36. Formulaire d'avis ---------- */ .notes-champ{border:0;padding:0;margin:0 0 .95rem} .notes-champ legend{font-weight:700;font-size:.88rem;margin-bottom:.4rem;padding:0;color:var(--gris-900)} .notes{display:flex;flex-direction:column;gap:.35rem} .notes__item{cursor:pointer} .notes__item input{position:absolute;opacity:0;width:0;height:0} .notes__item span{ display:flex;align-items:center;gap:.6rem;padding:.55rem .85rem;min-height:46px; border:1.5px solid var(--gris-300);border-radius:var(--r);background:#fff; color:#e8a317;font-size:1.05rem;letter-spacing:.08em;transition:border-color .12s,background-color .12s; } .notes__item span em{font-style:normal;color:var(--gris-600);font-size:.85rem;margin-left:auto;letter-spacing:0} .notes__item:hover span{border-color:var(--vert-600);background:var(--vert-50)} .notes__item input:checked + span{border-color:var(--vert-600);border-width:2px;background:var(--vert-50)} .notes__item input:focus-visible + span{outline:3px solid var(--bleu-600);outline-offset:2px} /* ---------- 37. Cibles tactiles des liens de navigation (WCAG 2.2 — 2.5.8) ---------- Les liens présentés en liste ne sont pas « en ligne dans une phrase » : ils ne bénéficient pas de l'exemption et doivent atteindre 24 px de haut. Le padding vertical agrandit la zone cliquable sans modifier le rythme visuel, la hauteur de ligne absorbant l'écart. */ .ariane a, .ariane [aria-current], .liste-puces li > a, .sommaire a, .pied li a, .pied__legal a, .pied__contact a, .carte-idf__legende a, .recherche-commune__liste a{ display:inline-flex;align-items:center;min-height:24px; } .liste-puces li > a, .sommaire a{padding-block:.15rem} .ariane a{padding-inline:.1rem} /* Le pied de page espace déjà ses entrées : on ajuste sans creuser davantage. */ .pied li{margin-bottom:.35rem} /* ---------- 38. Bandeau de consentement à la mesure ---------- En position fixe : il ne pousse rien, donc aucun décalage de mise en page (CLS). Les deux boutons ont la même taille et la même lisibilité : refuser doit être aussi immédiat qu'accepter, la CNIL ne tolère pas le choix déséquilibré. */ .consent{ position:fixed;inset:auto 0 0 0;z-index:890; /* au-dessus de la barre d'action mobile (880) */ padding:.85rem; background:var(--bleu-900);color:#e8eef6; box-shadow:0 -4px 16px rgba(10,37,64,.25); } /* Sous 1024 px, la barre d'action mobile occupe déjà le bas de l'écran : le bandeau se pose juste au-dessus au lieu de la recouvrir. Masquer « Appeler » derrière un bandeau de consentement coûterait des appels. */ @media(max-width:1023px){ .consent{bottom:calc(58px + env(safe-area-inset-bottom))} } .consent__boite{ max-width:var(--largeur);margin-inline:auto; display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.5rem; justify-content:space-between; } .consent__texte{flex:1 1 22rem;min-width:0} .consent__titre{font-weight:700;color:#fff;margin:0 0 .2rem;font-size:1rem} .consent__texte p{margin:0;font-size:.9rem;line-height:1.5;color:#c7d5e6} .consent__texte a{color:#fff;text-decoration:underline} .consent__actions{display:flex;gap:.6rem;flex:0 0 auto} .consent__actions .btn{padding:.7rem 1.4rem;font-size:.95rem;min-height:48px} /* Les deux réponses se voient autant l'une que l'autre : même taille, même graisse, contours francs. Un « Refuser » effacé est une pratique sanctionnée. */ .consent__actions .btn--fantome{border-color:#fff;color:#fff;background:transparent} .consent__actions .btn--fantome:hover{background:rgba(255,255,255,.14);color:#fff} .consent__actions .btn--blanc:hover{background:#e8eef6;color:var(--bleu-900)} @media (max-width:640px){ /* En colonne, flex-basis devient une HAUTEUR : sans cette remise à zéro, le bandeau réserve 22rem de haut et mange la moitié de l'écran. */ .consent__boite{flex-direction:column;align-items:stretch;gap:.75rem} .consent__texte{flex:0 0 auto} .consent__actions .btn{flex:1 1 0} } /* Retirer son accord doit être aussi simple que le donner : le lien vit dans le pied de page, au milieu des liens légaux, et leur ressemble en tout point. */ .pied__lien-bouton{ background:none;border:0;padding:0;margin:0;font:inherit;cursor:pointer; color:inherit;text-decoration:underline; display:inline-flex;align-items:center;min-height:24px; } .pied__lien-bouton:hover{color:#fff}