/* ==========================================================================
   Portail-Habitat.fr - design V1.2
   1. Polices auto-hébergées (licence SIL OFL)
   2. Lisibilité commune à toutes les fiches
   3. Composants : bon à savoir, citation officielle, comparatif, schéma, à retenir
   4. Bouton admin flottant
   5. 10 thèmes de fiches      : body.design-1 … body.design-10
   6. 10 mises en page de catégories : .cat-design-1 … .cat-design-10
   ========================================================================== */

/* ---------- 1. Polices ---------- */
@font-face { font-family: "Source Sans 3"; src: url("font/web/source-sans-3-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("font/web/source-sans-3-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("font/web/source-sans-3-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("font/web/source-sans-3-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("font/web/source-serif-4-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("font/web/source-serif-4-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("font/web/source-serif-4-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("font/web/source-serif-4-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("font/web/merriweather-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("font/web/merriweather-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Merriweather"; src: url("font/web/merriweather-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("font/web/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("font/web/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("font/web/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("font/web/lora-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("font/web/lora-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("font/web/lora-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("font/web/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("font/web/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("font/web/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("font/web/nunito-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("font/web/nunito-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito Sans"; src: url("font/web/nunito-sans-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("font/web/fraunces-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("font/web/fraunces-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* ---------- 2. Lisibilité commune (toutes les fiches) ---------- */
body[class*="design-"] {
	--lecture: 47rem;          /* largeur de la colonne de lecture */
	--texte: 1.125rem;         /* taille du texte courant */
	--interligne: 1.7;
	--police-texte: inherit;
	--police-titres: inherit;
	--accent: var(--categorie);
	--accent-fonce: #066F00;
	--fond-doux: #F3F8F2;
}
body[class*="design-"] .contenu-fenetre .colonne-article { max-width: var(--lecture); margin-left: 0; margin-right: auto; }
body[class*="design-"] .contenu-fenetre > .section { justify-content: flex-start; }
body[class*="design-"] .carte-article strong, body[class*="design-"] .carte-article b { font-family: inherit; }
body[class*="design-"] .carte-article > p strong, body[class*="design-"] .carte-article li strong, body[class*="design-"] .question-corps strong { font-family: var(--police-texte); font-weight: 700; }
body[class*="design-"] .tableau-simple, body[class*="design-"] .etapes-liste > li, body[class*="design-"] .checklist li label, body[class*="design-"] .exemple-chiffre span { font-family: var(--police-texte); }
body[class*="design-"] .hero-categorie h1 em { font-style: italic; }
body[class*="design-"] .carte-article > p,
body[class*="design-"] .carte-article li,
body[class*="design-"] .question-corps p,
body[class*="design-"] .bloc-aide p,
body[class*="design-"] .bloc-alerte p { font-size: var(--texte); line-height: var(--interligne); font-family: var(--police-texte); }
body[class*="design-"] .carte-article > p + p { margin-top: 1rem; }
body[class*="design-"] .carte-article .liste-puces li + li { margin-top: .5rem; }
body[class*="design-"] .carte-article h2,
body[class*="design-"] .carte-article .titre-partie,
body[class*="design-"] .hero-categorie h1 { font-family: var(--police-titres); }
body[class*="design-"] .barre-partage .section { max-width: calc(var(--lecture) + 3.75rem); }

/* ---------- 3. Composants ---------- */

/* Bon à savoir : version sombre avec pastille ronde qui déborde à gauche */
.bon-a-savoir { position: relative; margin: 2rem 0 0 1.75rem; padding: 1.6rem 1.75rem 1.6rem 3.4rem; background: #1F3B45; color: #fff; border-radius: 1.25rem; }
.bon-a-savoir::before { content: ""; position: absolute; left: -1.75rem; top: 50%; transform: translateY(-50%); width: 3.6rem; height: 3.6rem; border-radius: 50%; background: #EE8A62 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center / 55% no-repeat; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.bon-a-savoir .bas-titre { display: block; font-weight: 700; font-size: 1.1rem; margin-bottom: .35rem; color: #FFD9C7; }
.bon-a-savoir p, .bon-a-savoir li { color: #fff !important; font-size: 1.075rem; line-height: 1.6; margin-top: .35rem; }
.bon-a-savoir a { color: #fff !important; text-decoration: underline; }
.bon-a-savoir ul { padding-left: 1.1rem; list-style: disc; }
/* variante claire, pastille en haut à gauche */
.bon-a-savoir.clair { background: #D9ECEA; color: #0E3B3C; margin-left: 0; margin-top: 2.6rem; padding: 1.8rem 1.75rem 1.5rem 1.75rem; border-radius: .9rem; }
.bon-a-savoir.clair::before { left: -.4rem; top: -1.6rem; transform: none; width: 3.2rem; height: 3.2rem; background-color: #0E3B3C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6C23E' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3zM12 1v0M4 4l1 1M20 4l-1 1M2 11h1M21 11h1'/%3E%3C/svg%3E"); }
.bon-a-savoir.clair .bas-titre { color: #0E3B3C; }
.bon-a-savoir.clair p, .bon-a-savoir.clair li { color: #0E3B3C !important; }
.bon-a-savoir.clair a { color: #9A4610 !important; }
/* variante attention */
.bon-a-savoir.attention { background: #FFF1E6; color: #5A2A00; }
.bon-a-savoir.attention::before { background-color: #C2410C; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3zM12 10v4M12 17h.01'/%3E%3C/svg%3E"); }
.bon-a-savoir.attention .bas-titre { color: #9A3412; }
.bon-a-savoir.attention p, .bon-a-savoir.attention li { color: #3B1D06 !important; }
.bon-a-savoir.attention a { color: #9A3412 !important; }
@media (max-width: 640px) {
	.bon-a-savoir { margin-left: 0; margin-top: 2.6rem; padding: 2.2rem 1.25rem 1.25rem; }
	.bon-a-savoir::before { left: 1.25rem; top: -1.7rem; transform: none; width: 3.2rem; height: 3.2rem; }
}

/* Citation officielle (texte de loi) */
.citation-officielle, .bloc-loi:has(blockquote) { position: relative; margin: 1.75rem 0 0; padding: 1.4rem 1.6rem 1.2rem 1.6rem; background: #FBFAF6; border: 1px solid #E4DFD1; border-left: 5px solid #2B3A67; border-radius: 0 .75rem .75rem 0; }
.citation-officielle::before, .bloc-loi:has(blockquote)::before { content: "Texte officiel"; display: inline-flex; align-items: center; gap: .4rem; font: 700 .72rem/1 "Source Sans 3", sans-serif; letter-spacing: .08em; text-transform: uppercase; color: #2B3A67; padding: .3rem .55rem .3rem 1.6rem; border: 1px solid #C9CEE0; border-radius: 2rem; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B3A67' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v18M5 21h14M4 7h16M7 7l-3 6a3 3 0 0 0 6 0L7 7zM17 7l-3 6a3 3 0 0 0 6 0l-3-6z'/%3E%3C/svg%3E") .45rem center / .9rem no-repeat; margin-bottom: .8rem; }
.citation-officielle blockquote, .bloc-loi blockquote { margin: 0; font-family: "Source Serif 4", Georgia, serif; font-size: 1.12rem; line-height: 1.7; font-style: italic; color: #1F2433; }
.citation-officielle figcaption { margin-top: .7rem; font: 600 .95rem/1.4 "Source Sans 3", sans-serif; color: #2B3A67; text-decoration: underline; text-decoration-color: #C9CEE0; text-underline-offset: 3px; }
.bloc-loi { display: flex; flex-direction: column; }
.bloc-loi .loi-ref { order: 3; margin-top: .75rem; font: 600 .95rem/1.4 "Source Sans 3", sans-serif !important; color: #2B3A67 !important; text-decoration: underline; text-decoration-color: #C9CEE0; text-underline-offset: 3px; }
.bloc-loi:not(:has(blockquote)) .loi-ref { order: 0; margin: 0 0 .25rem; text-decoration: none; }
.bloc-loi blockquote { order: 1; }
.bloc-loi p { order: 2; }
.bloc-loi:has(blockquote) p { margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed #D9D3C3; }

/* Comparatif deux colonnes (non / oui) */
.comparatif { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 2rem; }
.comparatif > div { border-radius: 1rem; overflow: hidden; background: #fff; border: 1px solid var(--trace); }
.comparatif h3 { margin: 0 !important; padding: 1rem 1.2rem 1rem 3.3rem; font-size: 1.1rem !important; color: #fff; position: relative; line-height: 1.35; }
.comparatif h3::before { content: ""; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff center / 60% no-repeat; }
.comparatif .non h3 { background: #D93A2B; }
.comparatif .non h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D93A2B' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E"); }
.comparatif .oui h3 { background: #2F7D37; }
.comparatif .oui h3::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233E9B46' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); }
.comparatif ul { list-style: none; padding: 1rem 1.2rem 1.2rem; margin: 0; }
.comparatif li { position: relative; padding-left: 1.6rem; margin-top: .55rem; font-size: 1.05rem !important; line-height: 1.5 !important; }
.comparatif li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.comparatif .non li::before { content: "−"; color: #D93A2B; }
.comparatif .oui li::before { content: "+"; color: #3E9B46; }
@media (max-width: 640px) { .comparatif { grid-template-columns: 1fr; } }

/* Schéma (image PNG/WebP) */
figure.schema { margin: 2rem 0 0; }
figure.schema img { display: block; width: 100%; height: auto; border-radius: 1rem; border: 1px solid #E6E8EE; background: #fff; }
figure.schema figcaption { margin-top: .6rem; font-size: .95rem; line-height: 1.45; color: #5B6070; text-align: center; }

/* À retenir */
.a-retenir { margin-top: 2rem; padding: 1.25rem 1.5rem; border: 2px solid var(--accent, #08A400); border-radius: 1rem; background: #fff; }
.a-retenir .ar-titre { display: inline-block; margin: -2.2rem 0 .4rem -.4rem; padding: .2rem .8rem; background: var(--accent, #08A400); color: #fff; font-weight: 700; border-radius: 2rem; font-size: .95rem; }
.a-retenir ul { list-style: none; padding: 0; margin: 0; }
.a-retenir li { position: relative; padding-left: 1.7rem; margin-top: .45rem; font-weight: 600; }
.a-retenir li::before { content: ""; position: absolute; left: 0; top: .35em; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--accent, #08A400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 65% no-repeat; }

/* Listes à flèches (style magazine) */
.liste-fleches { list-style: none; padding: 0; margin-top: 1.5rem; }
.liste-fleches li { position: relative; padding-left: 2rem; margin-top: .75rem; }
.liste-fleches li::before { content: "→"; position: absolute; left: .3rem; top: 0; color: #EE7D5C; font-weight: 700; }

/* ---------- 4. Bouton admin flottant ---------- */
.barre-admin { display: none !important; }
.admin-flottant { position: fixed; top: 6.5rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .5rem; align-items: flex-end; font: 600 .9rem/1.2 "Source Sans 3", system-ui, sans-serif; }
.admin-flottant a.af-modifier { display: inline-flex; align-items: center; gap: .45rem; padding: .6rem 1rem; background: #191919; color: #fff; border-radius: 2rem; text-decoration: none; box-shadow: 0 6px 20px rgba(0,0,0,.25); }
.admin-flottant a.af-modifier:hover { background: #08A400; }
.admin-flottant .af-brouillon { padding: .3rem .7rem; background: #F2AF49; color: #191919; border-radius: 2rem; }
.admin-flottant form { display: flex; align-items: center; gap: .35rem; padding: .35rem .5rem .35rem .8rem; background: #fff; border: 1px solid #ddd; border-radius: 2rem; box-shadow: 0 4px 14px rgba(0,0,0,.12); color: #191919; }
.admin-flottant select { font: inherit; border: 0; background: #F4F4F4; border-radius: 1rem; padding: .25rem .5rem; }
@media print { .admin-flottant { display: none !important; } }

/* ==========================================================================
   5. THÈMES DE FICHES (body.design-N)
   ========================================================================== */

/* --- Design 1 : « Lecture » - éditorial, sans cartes, texte à empattement --- */
body.design-1 { --lecture: 46rem; --police-texte: "Source Serif 4", Georgia, serif; --texte: 1.15rem; --interligne: 1.75; background: #fff; }
body.design-1 .hero-categorie { background: #fff; border-bottom: 1px solid #E5E5E5; }
body.design-1 .hero-categorie .fil-ariane, body.design-1 .hero-categorie .fil-ariane a { color: #5B6070; }
body.design-1 .hero-categorie h1 { color: #111; }
body.design-1 .hero-categorie p:not(.fil-ariane) { color: #333; font-family: "Source Serif 4", serif; font-size: 1.2rem; line-height: 1.6; }
body.design-1 .numeros-urgence .numero-urgence { border-color: #D9D9D9; }
body.design-1 .carte-article { border: 0; border-radius: 0; padding: 0; background: transparent; }
body.design-1 .carte-article + .carte-article { margin-top: 3.5rem; padding-top: 3rem; border-top: 1px solid #E5E5E5; }
body.design-1 .carte-article > h2 { text-align: left; border: 0; margin: 0; padding: 0; font-size: 1.85rem; line-height: 1.3; }
body.design-1 .carte-article > h2::before { content: ""; display: block; width: 3rem; height: 4px; background: var(--accent); margin-bottom: .9rem; border-radius: 2px; }
body.design-1 .faq .question { margin: 0; padding: 0; }
body.design-1.fond-gris, body.design-1 .pied { background-color: #fff; }

/* --- Design 2 : « Service public » - sobre, bleu institutionnel, angles droits --- */
body.design-2 { --lecture: 50rem; --police-texte: "Source Sans 3", Arial, sans-serif; --police-titres: "Source Sans 3", Arial, sans-serif; --texte: 1.15rem; --accent: #000091; --categorie: #000091; --categorie-clair: #E3E3FD; background: #F6F6F6; }
body.design-2 .hero-categorie { background: #fff; border-bottom: 1px solid #DDD; }
body.design-2 .hero-categorie .fil-ariane, body.design-2 .hero-categorie .fil-ariane a { color: #3A3A3A; font-family: "Source Sans 3", sans-serif; }
body.design-2 .hero-categorie h1 { color: #161616; font-weight: 700; letter-spacing: -.01em; }
body.design-2 .hero-categorie h1 em { color: #000091; }
body.design-2 .hero-categorie p:not(.fil-ariane) { color: #3A3A3A; font-family: "Source Sans 3", sans-serif; font-size: 1.2rem; }
body.design-2 .hero-categorie .etiquette { background: #000091; border-radius: 4px; }
body.design-2 .carte-article { border-radius: 0; border: 1px solid #DDD; border-bottom: 3px solid #000091; }
body.design-2 .carte-article > h2 { text-align: left; font-size: 1.6rem; border-bottom: 0; padding-bottom: .5rem; }
body.design-2 .carte-article .titre-partie { font-size: 1.25rem; padding-left: .8rem; border-left: 4px solid #000091; }
body.design-2 .btn { border-radius: 4px; background-color: #000091; }
body.design-2 .bloc-aide { border-radius: 0; background: #E3E3FD; border-color: #C5C5FE; border-left: 5px solid #000091; }
body.design-2 .bloc-aide .etiquette { background: #000091; border-radius: 4px; }
body.design-2 .bloc-aide h3, body.design-2 .bloc-aide p, body.design-2 .bloc-aide li { color: #161616; }
body.design-2 .tableau-simple thead th { background: #E3E3FD; border-bottom-color: #000091; }

/* --- Design 3 : « Magazine » - bleu-vert profond, corail, bons à savoir --- */
body.design-3 { --lecture: 48rem; --police-texte: "Nunito Sans", sans-serif; --police-titres: "Nunito Sans", sans-serif; --texte: 1.125rem; --accent: #0F4C4E; --categorie: #0F4C4E; --categorie-clair: #D9ECEA; background: #FAF8F4; }
body.design-3 .hero-categorie { background: #0F4C4E; }
body.design-3 .hero-categorie h1 { font-family: "Nunito Sans", sans-serif; font-weight: 700; }
body.design-3 .hero-categorie h1 em { color: #F6C23E; }
body.design-3 .hero-categorie .etiquette { background: #EE8A62; }
body.design-3 .carte-article { border: 0; background: transparent; padding: 0; }
body.design-3 .carte-article + .carte-article { margin-top: 3rem; padding-top: 2.5rem; border-top: 2px solid #D9ECEA; }
body.design-3 .carte-article > h2 { text-align: left; border: 0; margin: 0; padding: 0; font-size: 2rem; font-weight: 800; color: #0F4C4E; }
body.design-3 .carte-article .titre-partie { color: #0F4C4E; font-size: 1.35rem; }
body.design-3 .carte-article .liste-puces { list-style: none; padding-left: 0; }
body.design-3 .carte-article .liste-puces li { position: relative; padding-left: 1.8rem; }
body.design-3 .carte-article .liste-puces li::before { content: "→"; position: absolute; left: .2rem; color: #EE7D5C; font-weight: 700; }
body.design-3 .bloc-aide { position: relative; margin-left: 1.75rem; padding: 1.5rem 1.6rem 1.5rem 3.2rem; background: #1F3B45; border: 0; border-radius: 1.25rem; }
body.design-3 .bloc-aide::before { content: ""; position: absolute; left: -1.7rem; top: 50%; transform: translateY(-50%); width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #EE8A62 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6M10 21h4M12 3a6 6 0 0 0-3.6 10.8c.6.5 1 1.2 1 2V16h5.2v-.2c0-.8.4-1.5 1-2A6 6 0 0 0 12 3z'/%3E%3C/svg%3E") center / 55% no-repeat; }
body.design-3 .bloc-aide .etiquette { background: transparent; padding: 0; color: #FFD9C7; font-weight: 700; font-size: 1rem; }
body.design-3 .bloc-aide h3, body.design-3 .bloc-aide p, body.design-3 .bloc-aide li { color: #fff; }
body.design-3 .bloc-aide a:not(.btn) { color: #fff; }
body.design-3 .btn { background: #EE7D5C; }
body.design-3 .btn:hover { background: #D9663F; }
body.design-3 .faq .question { margin: 0; padding: 0; }
body.design-3 .pied .panneau-pied { background: #0F4C4E; }
@media (max-width: 640px) { body.design-3 .bloc-aide { margin-left: 0; margin-top: 2.6rem; padding: 2.2rem 1.25rem 1.25rem; } body.design-3 .bloc-aide::before { left: 1.25rem; top: -1.7rem; transform: none; } }

/* --- Design 4 : « Cartes douces » - cartes flottantes, ombres, Inter --- */
body.design-4 { --lecture: 52rem; --police-texte: "Inter", sans-serif; --police-titres: "Inter", sans-serif; --texte: 1.075rem; --interligne: 1.75; background: #EEF3EE; }
body.design-4 .hero-categorie { background: #1E3A2B; }
body.design-4 .hero-categorie h1 { font-family: "Inter", sans-serif; font-weight: 700; letter-spacing: -.02em; }
body.design-4 .carte-article { border: 0; border-radius: 1.5rem; box-shadow: 0 10px 30px rgba(20, 60, 30, .08); padding: 2.25rem 2.5rem; }
body.design-4 .carte-article + .carte-article { margin-top: 1.75rem; }
body.design-4 .carte-article > h2 { text-align: left; border: 0; margin: 0 0 .25rem; padding: 0; font-size: 1.6rem; letter-spacing: -.01em; display: flex; align-items: center; gap: .75rem; }
body.design-4 .carte-article > h2::before { content: ""; flex: 0 0 .75rem; height: .75rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 6px var(--categorie-clair); }
body.design-4 .bloc-aide, body.design-4 .bloc-alerte, body.design-4 .exemple-chiffre, body.design-4 .tableau-defilant { border-radius: 1rem; }
@media (max-width: 640px) { body.design-4 .carte-article { padding: 1.5rem 1.25rem; } }

/* --- Design 5 : « Numérotée » - grands numéros de section dans la marge --- */
body.design-5 { --lecture: 56rem; --police-texte: "Source Sans 3", sans-serif; --police-titres: "Poppins", sans-serif; --texte: 1.15rem; background: #fff; counter-reset: section; }
body.design-5 .hero-categorie { background: #10231A; }
body.design-5 .carte-article { counter-increment: section; position: relative; border: 0; border-radius: 0; background: transparent; padding: 0 0 0 7rem; }
body.design-5 .carte-article + .carte-article { margin-top: 3.5rem; }
body.design-5 .carte-article::before { content: counter(section, decimal-leading-zero); position: absolute; left: 0; top: -.4rem; font: 700 3.6rem/1 "Poppins", sans-serif; color: var(--categorie-clair); -webkit-text-stroke: 1.5px var(--accent); }
body.design-5 .carte-article > h2 { text-align: left; border: 0; margin: 0; padding: 0 0 .75rem; font-size: 1.7rem; border-bottom: 2px solid #111; }
body.design-5.fond-gris, body.design-5 .pied { background-color: #fff; }
body.design-5 .faq .question { margin: 0; padding: 0; }
@media (max-width: 760px) { body.design-5 .carte-article { padding-left: 0; padding-top: 3.2rem; } body.design-5 .carte-article::before { font-size: 2.6rem; } }

/* --- Design 6 : « Bandes alternées » - sections pleine largeur, titres Lora --- */
body.design-6 { --lecture: 100%; --police-texte: "Source Sans 3", sans-serif; --police-titres: "Lora", Georgia, serif; --texte: 1.15rem; background: #fff; }
body.design-6 .hero-categorie { background: #F3F8F2; }
body.design-6 .hero-categorie .fil-ariane, body.design-6 .hero-categorie .fil-ariane a, body.design-6 .hero-categorie h1, body.design-6 .hero-categorie p:not(.fil-ariane) { color: #1B2A20; }
body.design-6 .hero-categorie h1 { font-family: "Lora", serif; font-weight: 700; }
body.design-6 .contenu-fenetre { padding-top: 0; }
body.design-6 .contenu-fenetre > .section { max-width: none; padding: 0; }
body.design-6 .carte-article { border: 0; border-radius: 0; margin: 0 !important; padding: 3.5rem max(1rem, calc(50% - 23.5rem)); }
body.design-6 .carte-article:nth-child(even) { background: #F3F8F2; }
body.design-6 .carte-article > h2 { text-align: left; border: 0; margin: 0 0 .5rem; padding: 0; font-size: 2rem; font-weight: 700; }
body.design-6 .carte-article > h2::after { content: ""; display: block; width: 4rem; height: 2px; margin-top: .8rem; background: var(--accent); }
body.design-6 .faq .question { margin: 0; padding: 0; }
body.design-6.fond-gris, body.design-6 .pied { background-color: #fff; }

/* --- Design 7 : « Parcours » - ligne de temps verticale reliant les sections --- */
body.design-7 { --lecture: 52rem; --police-texte: "Atkinson Hyperlegible", sans-serif; --police-titres: "Atkinson Hyperlegible", sans-serif; --texte: 1.15rem; background: #FAFBFA; }
body.design-7 .colonne-article { position: relative; padding-left: 3rem; }
body.design-7 .colonne-article::before { content: ""; position: absolute; left: .9rem; top: .5rem; bottom: .5rem; width: 3px; background: linear-gradient(var(--accent), #BFE3BC); border-radius: 2px; }
body.design-7 .carte-article { position: relative; border-radius: 1rem; }
body.design-7 .carte-article::before { content: ""; position: absolute; left: -2.65rem; top: 2rem; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #fff; border: 4px solid var(--accent); }
body.design-7 .carte-article > h2 { text-align: left; border-bottom: 0; padding-bottom: .5rem; font-weight: 700; font-size: 1.65rem; }
@media (max-width: 640px) { body.design-7 .colonne-article { padding-left: 1.75rem; } body.design-7 .colonne-article::before { left: .4rem; } body.design-7 .carte-article::before { left: -1.9rem; } }

/* --- Design 8 : « Journal officiel » - noir et blanc, Merriweather, filets --- */
body.design-8 { --lecture: 46rem; --police-texte: "Merriweather", Georgia, serif; --police-titres: "Merriweather", Georgia, serif; --texte: 1.05rem; --interligne: 1.85; --accent: #1B1B1B; background: #fff; }
body.design-8 .hero-categorie { background: #fff; border-bottom: 3px double #1B1B1B; }
body.design-8 .hero-categorie .fil-ariane, body.design-8 .hero-categorie .fil-ariane a, body.design-8 .hero-categorie h1, body.design-8 .hero-categorie p:not(.fil-ariane) { color: #1B1B1B; }
body.design-8 .hero-categorie h1 { font-family: "Merriweather", serif; font-weight: 700; font-size: clamp(1.9rem, 3.6vw, 2.8rem); line-height: 1.3; }
body.design-8 .hero-categorie h1 em { color: #1B1B1B; font-style: italic; }
body.design-8 .hero-categorie .etiquette { background: #1B1B1B; border-radius: 0; }
body.design-8 .carte-article { border: 0; border-radius: 0; padding: 0; background: transparent; }
body.design-8 .carte-article + .carte-article { margin-top: 3rem; }
body.design-8 .carte-article > h2 { text-align: center; border: 0; margin: 0 0 1rem; padding: .8rem 0; font-size: 1.15rem; letter-spacing: .12em; text-transform: uppercase; border-top: 1px solid #1B1B1B; border-bottom: 1px solid #1B1B1B; }
body.design-8 .carte-article .titre-partie { font-style: italic; font-weight: 700; }
body.design-8 .btn { border-radius: 0; background: #1B1B1B; }
body.design-8 .bloc-aide, body.design-8 .bloc-alerte { border-radius: 0; background: #F7F7F4; border: 1px solid #1B1B1B; }
body.design-8 .bloc-aide h3, body.design-8 .bloc-aide p, body.design-8 .bloc-aide li { color: #1B1B1B; }
body.design-8 .bloc-aide .etiquette { background: #1B1B1B; border-radius: 0; }
body.design-8 .faq .question { margin: 0; padding: 0; }
body.design-8.fond-gris, body.design-8 .pied { background-color: #fff; }

/* --- Design 9 : « Bandeaux » - chaque carte a un bandeau de titre coloré --- */
body.design-9 { --lecture: 52rem; --police-texte: "Nunito Sans", sans-serif; --police-titres: "Nunito Sans", sans-serif; --texte: 1.125rem; background: #F2F4F3; }
body.design-9 .hero-categorie { background: #0B3D1E; }
body.design-9 .hero-categorie h1 em { color: #9BE58F; }
body.design-9 .carte-article { border: 0; border-radius: 1rem; overflow: hidden; box-shadow: 0 2px 0 rgba(0,0,0,.05); padding-top: 0; }
body.design-9 .carte-article > h2 { text-align: left; margin: 0 -1.8125rem 1.5rem; padding: 1.1rem 1.8125rem; background: var(--accent); color: #fff; border: 0; font-size: 1.4rem; font-weight: 800; }
body.design-9 .carte-loi > h2 { background: #2B3A67; }
body.design-9 .carte-faq > h2 { background: #1F3B45; }
body.design-9 .carte-article .titre-partie { color: var(--accent-fonce); }
@media (max-width: 767px) { body.design-9 .carte-article > h2 { margin: 0 -1.25rem 1.25rem; padding: 1rem 1.25rem; } }

/* --- Design 10 : « Grand confort » - très lisible, gros caractères, contrastes forts --- */
body.design-10 { --lecture: 48rem; --police-texte: "Atkinson Hyperlegible", sans-serif; --police-titres: "Atkinson Hyperlegible", sans-serif; --texte: 1.3rem; --interligne: 1.7; background: #fff; }
body.design-10 .hero-categorie { background: #0B2616; }
body.design-10 .hero-categorie p:not(.fil-ariane) { font-size: 1.3rem; }
body.design-10 .carte-article { border: 2px solid #0B2616; border-radius: .75rem; }
body.design-10 .carte-article > h2 { text-align: left; border-bottom: 2px solid #0B2616; font-size: 1.9rem; }
body.design-10 .carte-article .titre-partie { font-size: 1.45rem; }
body.design-10 .carte-article strong { background: linear-gradient(transparent 60%, #FFE58A 60%); }
body.design-10 .btn { font-size: 1.2rem; padding: .7rem 1.6rem; }
body.design-10 .tableau-simple { font-size: 1.15rem; }
body.design-10 .question-bouton .intitule { font-size: 1.3rem; }
body.design-10.fond-gris, body.design-10 .pied { background-color: #fff; }

/* ==========================================================================
   6. MISES EN PAGE DES CATÉGORIES (.cat-design-N)
   ========================================================================== */
.cat-liste { padding: 3rem 0 1rem; }
.cat-liste .cat-intro-fiches { font-size: 1.1rem; color: #444; margin-bottom: 1.5rem; }
.cat-liste a.cat-lien { text-decoration: none; color: inherit; }
.cat-liste .cat-sur { display: block; font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--categorie); }
.cat-liste .cat-nom { font-weight: 700; color: #151515; line-height: 1.3; }
.cat-liste .cat-extrait { color: #333; line-height: 1.6; }
.cat-liste .cat-points { list-style: none; padding: 0; margin: .75rem 0 0; }
.cat-liste .cat-points li { position: relative; padding-left: 1.5rem; margin-top: .35rem; line-height: 1.45; }
.cat-liste .cat-points li::before { content: ""; position: absolute; left: 0; top: .4em; width: .85rem; height: .85rem; border-radius: 50%; background: var(--categorie) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center / 70% no-repeat; }
.cat-liste .cat-contact { font-size: .95rem; color: #555; }
.cat-liste .cat-fleche { font-weight: 700; color: var(--categorie); white-space: nowrap; }

/* C2 : grille de cartes */
.cat-design-2 .cat-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); gap: 1.5rem; }
.cat-design-2 .cat-carte { display: flex; flex-direction: column; gap: .5rem; padding: 1.6rem; background: #fff; border-radius: 1.25rem; border: 1px solid #E3E6E3; transition: transform .2s, box-shadow .2s; }
.cat-design-2 .cat-carte:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.08); }
.cat-design-2 .cat-nom { font-size: 1.3rem; }
.cat-design-2 .cat-fleche { margin-top: auto; padding-top: .75rem; }

/* C3 : liste éditoriale numérotée */
.cat-design-3 .cat-ligne { display: grid; grid-template-columns: 5rem 1fr; gap: 1.5rem; padding: 2rem 0; border-top: 1px solid #D8D8D8; }
.cat-design-3 .cat-num { font: 700 3rem/1 "Fraunces", Georgia, serif; color: var(--categorie); }
.cat-design-3 .cat-nom { font-family: "Fraunces", Georgia, serif; font-size: 1.7rem; }
.cat-design-3 .cat-extrait { margin-top: .5rem; font-family: "Source Serif 4", serif; font-size: 1.12rem; max-width: 46rem; }
.cat-design-3 .cat-ligne:hover .cat-nom { text-decoration: underline; text-decoration-color: var(--categorie); }
@media (max-width: 640px) { .cat-design-3 .cat-ligne { grid-template-columns: 1fr; gap: .5rem; } }

/* C4 : une fiche mise en avant + grille */
.cat-design-4 .cat-une { display: grid; grid-template-columns: 1.1fr 1fr; gap: 0; margin-bottom: 2rem; background: #fff; border-radius: 1.5rem; overflow: hidden; border: 1px solid #E3E6E3; }
.cat-design-4 .cat-une img { width: 100%; height: 100%; object-fit: cover; background: var(--categorie-clair); }
.cat-design-4 .cat-une .cat-corps { padding: 2.2rem; display: flex; flex-direction: column; gap: .6rem; }
.cat-design-4 .cat-une .cat-nom { font-size: 1.9rem; }
.cat-design-4 .cat-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.cat-design-4 .cat-petite { padding: 1.2rem 1.4rem; background: #fff; border-radius: 1rem; border-left: 5px solid var(--categorie); }
.cat-design-4 .cat-petite .cat-nom { font-size: 1.1rem; }
@media (max-width: 800px) { .cat-design-4 .cat-une { grid-template-columns: 1fr; } .cat-design-4 .cat-une img { max-height: 14rem; } }

/* C5 : tableau récapitulatif */
.cat-design-5 .cat-table { width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; border-radius: 1rem; overflow: hidden; border: 1px solid #DCE3DC; }
.cat-design-5 .cat-table th, .cat-design-5 .cat-table td { padding: 1.1rem 1.2rem; text-align: left; vertical-align: top; border-bottom: 1px solid #EDF0ED; line-height: 1.5; }
.cat-design-5 .cat-table thead th { background: #10231A; color: #fff; font-size: .95rem; letter-spacing: .02em; }
.cat-design-5 .cat-table tbody tr:hover { background: #F4FAF3; }
.cat-design-5 .cat-table .cat-nom { font-size: 1.1rem; }
@media (max-width: 760px) { .cat-design-5 .cat-table thead { display: none; } .cat-design-5 .cat-table, .cat-design-5 .cat-table tbody, .cat-design-5 .cat-table tr, .cat-design-5 .cat-table td { display: block; width: 100%; } .cat-design-5 .cat-table tr { border-bottom: 6px solid #F4F4F4; } .cat-design-5 .cat-table td { border: 0; padding: .5rem 1rem; } }

/* C6 : tuiles compactes à initiale */
.cat-design-6 .cat-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; }
.cat-design-6 .cat-tuile { display: grid; grid-template-columns: 3.2rem 1fr; gap: .9rem; align-items: center; padding: 1.1rem; background: #fff; border-radius: 1rem; border: 1px solid #E3E6E3; }
.cat-design-6 .cat-tuile:hover { border-color: var(--categorie); }
.cat-design-6 .cat-initiale { width: 3.2rem; height: 3.2rem; border-radius: .9rem; display: flex; align-items: center; justify-content: center; font: 700 1.3rem/1 "Poppins", sans-serif; color: #fff; background: var(--categorie); }
.cat-design-6 .cat-tuile:nth-child(3n+2) .cat-initiale { background: #2B3A67; }
.cat-design-6 .cat-tuile:nth-child(3n) .cat-initiale { background: #EE8A62; }
.cat-design-6 .cat-nom { font-size: 1.02rem; }
.cat-design-6 .cat-sur { font-size: .75rem; margin-bottom: .15rem; }

/* C7 : fiches pratiques (bande latérale + check-list) */
.cat-design-7 .cat-fiche { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; padding: 2rem; margin-bottom: 1.25rem; background: #fff; border-radius: 1rem; border-top: 6px solid var(--categorie); }
.cat-design-7 .cat-nom { font-size: 1.45rem; }
.cat-design-7 .cat-droite { padding-left: 2rem; border-left: 1px dashed #CCD5CC; }
.cat-design-7 .cat-droite .cat-titre-pts { font-weight: 700; font-size: .95rem; text-transform: uppercase; letter-spacing: .04em; color: #555; }
@media (max-width: 800px) { .cat-design-7 .cat-fiche { grid-template-columns: 1fr; gap: 1rem; } .cat-design-7 .cat-droite { padding-left: 0; border-left: 0; } }

/* C8 : cartes horizontales avec bloc chiffré */
.cat-design-8 .cat-horiz { display: grid; grid-template-columns: 11rem 1fr auto; gap: 1.75rem; align-items: center; padding: 1.25rem; margin-bottom: 1rem; background: #fff; border-radius: 1.25rem; box-shadow: 0 6px 20px rgba(0,0,0,.05); }
.cat-design-8 .cat-bloc { height: 7rem; border-radius: 1rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: .5rem; font: 700 1rem/1.3 "Poppins", sans-serif; color: #fff; background: linear-gradient(135deg, var(--categorie), #0B5A2A); }
.cat-design-8 .cat-horiz:nth-child(even) .cat-bloc { background: linear-gradient(135deg, #2B3A67, #1F2A4D); }
.cat-design-8 .cat-nom { font-size: 1.3rem; }
@media (max-width: 800px) { .cat-design-8 .cat-horiz { grid-template-columns: 1fr; } .cat-design-8 .cat-bloc { height: 4rem; } }

/* C9 : parcours vertical */
.cat-design-9 .cat-parcours { position: relative; padding-left: 3.5rem; }
.cat-design-9 .cat-parcours::before { content: ""; position: absolute; left: 1.3rem; top: 0; bottom: 0; width: 3px; background: var(--categorie-clair, #D9ECEA); }
.cat-design-9 .cat-etape { position: relative; padding: 1.4rem 1.6rem; margin-bottom: 1.2rem; background: #fff; border-radius: 1rem; border: 1px solid #E3E6E3; }
.cat-design-9 .cat-etape::before { content: ""; position: absolute; left: -2.78rem; top: 1.6rem; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--categorie); box-shadow: 0 0 0 4px var(--fond-page, #F4F4F4); }
.cat-design-9 .cat-etape:hover { border-color: var(--categorie); }
.cat-design-9 .cat-nom { font-size: 1.3rem; }

/* C10 : grand confort, gros boutons */
.cat-design-10 .cat-gros { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.6rem 1.8rem; margin-bottom: 1rem; background: #fff; border: 2px solid #0B2616; border-radius: 1rem; font-family: "Atkinson Hyperlegible", sans-serif; }
.cat-design-10 .cat-gros:hover { background: #F0F8EF; }
.cat-design-10 .cat-nom { font-size: 1.5rem; }
.cat-design-10 .cat-extrait { font-size: 1.15rem; margin-top: .3rem; }
.cat-design-10 .cat-rond { flex: 0 0 3.4rem; height: 3.4rem; border-radius: 50%; background: #0B2616; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.cat-design-9 .cat-etape, .cat-design-4 .cat-petite { display: block; }
.cat-liste .cat-nom { margin: .15rem 0 0; }

/* Correctifs V1.2 */
body.design-8 .btn.blanc, body.design-8 .btn.contour { background-color: #fff !important; color: #1B1B1B !important; box-shadow: inset 0 0 0 2px #1B1B1B; }
body.design-8 .btn.blanc:hover, body.design-8 .btn.contour:hover { background-color: #1B1B1B !important; color: #fff !important; }
body[class*="design-"] .bon-a-savoir p, body[class*="design-"] .bon-a-savoir li, body[class*="design-"] .a-retenir li { font-family: var(--police-texte); }
.bloc-loi ul, .bloc-loi ol { order: 2; margin-top: .6rem; padding-left: 1.2rem; list-style: disc outside; }
figure.schema img { cursor: zoom-in; }

/* Blocs « Pour les mairies et les CCAS » supprimés partout (demande client) */
.bloc-relais { display: none !important; }

:root {
	--hv-vif: #0F4C4E; --hv-texte: #0F4C4E; --hv-fonce: #0F4C4E; --hv-sur-fonce: #F6C23E; --hv-texte-sur-fonce: #D9ECEA;
	--hv-pale: #EEF5F4; --hv-fond: #EEF5F4; --hv-bord: #B9D6D3; --hv-trait: #D5E3E1; --hv-titre: #14292A;
	--hv-em: #C4532F; --hv-etiquette: #EE8A62; --hv-etiquette-texte: #0B3638;
}

/* ===== Haut de fiche : 10 variantes (?hero=N ou réglage design_hero) ===== */
html body.hv .hero-categorie .halo { display: none; }
html body.hv .hero-categorie { padding: 2rem 0 3rem; overflow: hidden; }
html body.hv .hero-categorie .fil-ariane { font-size: .95rem; }
html body.hv .hero-categorie .etiquette { margin-top: 2rem; }
html body.hv .hero-categorie h1 { max-width: none; }
html body.hv .hero-categorie p:not(.fil-ariane) { max-width: 44rem; margin-top: 1.1rem; font-size: 1.125rem; line-height: 1.6; }
html body.hv .hero-categorie .hero-colonnes { gap: 3rem; }
html body.hv .hero-categorie .hero-texte { flex: 1 1 auto; }
html body.hv .hero-categorie .numeros-urgence { margin-top: 0; }
html body.hv .hero-categorie .numeros-urgence .numero-urgence { min-height: 0; height: auto; }
html body.hv .hero-categorie .numero-urgence span { margin-top: 0; }
html body.hv .hero-categorie .numeros-urgence .numero-urgence { justify-content: flex-start; }
html body.hv-1 .hero-categorie .numeros-urgence .numero-urgence, html body.hv-7 .hero-categorie .numeros-urgence .numero-urgence:first-child, html body.hv-9 .hero-categorie .numeros-urgence .numero-urgence { justify-content: center; }
@media (max-width: 767px) { html body.hv .hero-categorie { padding: 1.5rem 0 2.25rem; } html body.hv .hero-categorie .etiquette { margin-top: 1.5rem; } html body.hv .hero-categorie p:not(.fil-ariane) { font-size: 1.05rem; } }

/* hero 1 */
html body.hv-1 .hero-categorie, html body.hv-1 .hero-categorie h1, html body.hv-1 .hero-categorie p:not(.fil-ariane) { color: var(--hv-titre); }
html body.hv-1 .hero-categorie .fil-ariane, html body.hv-1 .hero-categorie .fil-ariane a { color: #566363; }
html body.hv-1 .hero-categorie h1 em { color: var(--hv-em); }
html body.hv-1 .hero-categorie p:not(.fil-ariane) { color: #3B4747; }
html body.hv-1 .hero-categorie { background: #fff; border-top: 4px solid var(--hv-vif); border-bottom: 1px solid var(--hv-trait); }
html body.hv-1 .hero-categorie .etiquette { background: none; color: var(--hv-texte); padding: 0; border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; font-size: .78rem; }
html body.hv-1 .hero-categorie .hero-colonnes { flex-direction: column; gap: 2rem; }
html body.hv-1 .hero-categorie .numeros-urgence { flex: none; width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .75rem; }
html body.hv-1 .hero-categorie .numeros-urgence::before { content: "Numéros utiles"; grid-column: 1 / -1; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .07em; color: #566363; }
html body.hv-1 .hero-categorie .numero-urgence { align-items: flex-start; justify-content: flex-start; text-align: left; background: var(--hv-fond); border: 0; border-left: 4px solid var(--hv-vif); border-radius: 0 6px 6px 0; padding: .8rem 1rem; }
html body.hv-1 .hero-categorie .numero-urgence strong, html body.hv-1 .hero-categorie .numero-urgence strong.long { font-size: 1.55rem; color: var(--hv-texte); }
html body.hv-1 .hero-categorie .numero-urgence span { color: #333; }

/* hero 2 */
html body.hv-2 .hero-categorie, html body.hv-2 .hero-categorie h1, html body.hv-2 .hero-categorie p:not(.fil-ariane) { color: var(--hv-titre); }
html body.hv-2 .hero-categorie .fil-ariane, html body.hv-2 .hero-categorie .fil-ariane a { color: #566363; }
html body.hv-2 .hero-categorie h1 em { color: var(--hv-em); }
html body.hv-2 .hero-categorie p:not(.fil-ariane) { color: #3B4747; }
html body.hv-2 .hero-categorie .etiquette { background: var(--hv-etiquette); color: var(--hv-etiquette-texte); }
html body.hv-2 .hero-categorie { background: var(--hv-fond); border-bottom: 1px solid var(--hv-trait); }
html body.hv-2 .hero-categorie .etiquette { background: var(--hv-etiquette); color: var(--hv-etiquette-texte); }
html body.hv-2 .hero-categorie .numeros-urgence { flex: 0 0 25rem; display: block; background: #fff; border: 1px solid var(--hv-trait); border-radius: 10px; overflow: hidden; margin-top: 2rem; }
html body.hv-2 .hero-categorie .numeros-urgence::before { content: "Numéros utiles"; display: block; background: var(--hv-fonce); color: #fff; font-weight: 700; padding: .75rem 1.15rem; font-size: .95rem; }
html body.hv-2 .hero-categorie .numero-urgence { display: grid; grid-template-columns: 9.25rem 1fr; align-items: center; gap: 1rem; padding: .8rem 1.15rem; border: 0; border-top: 1px solid var(--hv-trait); border-radius: 0; text-align: left; background: none; }
html body.hv-2 .hero-categorie .numero-urgence:first-child { border-top: 0; }
html body.hv-2 .hero-categorie .numero-urgence strong, html body.hv-2 .hero-categorie .numero-urgence strong.long { font-size: 1.35rem; color: var(--hv-texte); white-space: nowrap; }
html body.hv-2 .hero-categorie .numero-urgence span { font-size: .85rem; color: #333; line-height: 1.35; }
@media (max-width: 1000px) { html body.hv-2 .hero-categorie .hero-colonnes { flex-direction: column; gap: 1.75rem; } html body.hv-2 .hero-categorie .numeros-urgence { flex: none; width: 100%; margin-top: 0; } }
@media (max-width: 480px) { html body.hv-2 .hero-categorie .numero-urgence { grid-template-columns: 8rem 1fr; gap: .75rem; } html body.hv-2 .hero-categorie .numero-urgence strong, html body.hv-2 .hero-categorie .numero-urgence strong.long { font-size: 1.2rem; } }

/* hero 3 */
html body.hv-3 .hero-categorie, html body.hv-3 .hero-categorie h1, html body.hv-3 .hero-categorie p:not(.fil-ariane) { color: var(--hv-titre); }
html body.hv-3 .hero-categorie .fil-ariane, html body.hv-3 .hero-categorie .fil-ariane a { color: #566363; }
html body.hv-3 .hero-categorie h1 em { color: var(--hv-em); }
html body.hv-3 .hero-categorie p:not(.fil-ariane) { color: #3B4747; }
html body.hv-3 .hero-categorie { background: var(--hv-pale); }
html body.hv-3 .hero-categorie .hero-texte { border-left: 6px solid var(--hv-vif); padding-left: 1.5rem; }
html body.hv-3 .hero-categorie .etiquette { margin-top: 0; background: #fff; color: var(--hv-texte); border: 1px solid var(--hv-bord); }
html body.hv-3 .hero-categorie .hero-colonnes { flex-direction: column; gap: 1.75rem; margin-top: 2rem; }
html body.hv-3 .hero-categorie .numeros-urgence { flex: none; display: flex; flex-wrap: wrap; gap: .6rem; }
html body.hv-3 .hero-categorie .numero-urgence { flex: 0 0 auto; flex-direction: row; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--hv-bord); border-radius: 999px; padding: .4rem 1.1rem .4rem .45rem; text-align: left; }
html body.hv-3 .hero-categorie .numero-urgence strong, html body.hv-3 .hero-categorie .numero-urgence strong.long { font-size: 1.1rem; background: var(--hv-vif); color: #fff; border-radius: 999px; padding: .3rem .85rem; line-height: 1.2; }
html body.hv-3 .hero-categorie .numero-urgence span { font-size: .8rem; line-height: 1.3; color: #333; }
@media (max-width: 767px) { html body.hv-3 .hero-categorie .hero-colonnes { margin-top: 1.5rem; } html body.hv-3 .hero-categorie .hero-texte { padding-left: 1rem; border-left-width: 4px; } html body.hv-3 .hero-categorie .numero-urgence { flex: 1 1 100%; border-radius: 12px; } }

/* hero 4 */
html body.hv-4 .hero-categorie, html body.hv-4 .hero-categorie h1, html body.hv-4 .hero-categorie p:not(.fil-ariane) { color: var(--hv-titre); }
html body.hv-4 .hero-categorie .fil-ariane, html body.hv-4 .hero-categorie .fil-ariane a { color: #566363; }
html body.hv-4 .hero-categorie h1 em { color: var(--hv-em); }
html body.hv-4 .hero-categorie p:not(.fil-ariane) { color: #3B4747; }
html body.hv-4 .hero-categorie .etiquette { background: var(--hv-etiquette); color: var(--hv-etiquette-texte); }
html body.hv-4 .hero-categorie { background: #fff; padding-bottom: 0; border-bottom: 1px solid var(--hv-trait); }
html body.hv-4 .hero-categorie .etiquette { background: var(--hv-etiquette); color: var(--hv-etiquette-texte); }
html body.hv-4 .hero-categorie .hero-colonnes { align-items: stretch; }
html body.hv-4 .hero-categorie .hero-texte { padding-bottom: 3rem; }
html body.hv-4 .hero-categorie .numeros-urgence { flex: 0 0 25rem; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; background: var(--hv-fonce); border-radius: 14px 14px 0 0; padding: 1.5rem 1.75rem 1.5rem; margin-top: 1rem; }
html body.hv-4 .hero-categorie .numeros-urgence::before { content: "Numéros utiles"; color: var(--hv-sur-fonce); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; margin-bottom: .4rem; }
html body.hv-4 .hero-categorie .numero-urgence { flex: none; background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.15); border-radius: 0; align-items: flex-start; text-align: left; padding: .8rem 0; }
html body.hv-4 .hero-categorie .numero-urgence:last-child { border-bottom: 0; }
html body.hv-4 .hero-categorie .numero-urgence strong, html body.hv-4 .hero-categorie .numero-urgence strong.long { color: #fff; font-size: 1.65rem; }
html body.hv-4 .hero-categorie .numero-urgence span { color: var(--hv-texte-sur-fonce); font-size: .88rem; }
@media (max-width: 1000px) { html body.hv-4 .hero-categorie .hero-colonnes { flex-direction: column; gap: 0; } html body.hv-4 .hero-categorie .hero-texte { padding-bottom: 2rem; } html body.hv-4 .hero-categorie .hero-texte:only-child { padding-bottom: 2.25rem; } html body.hv-4 .hero-categorie .numeros-urgence { flex: none; width: 100%; margin-top: 0; padding: 1.25rem 1.25rem 1rem; } }

/* hero 5 */
html body.hv-5 .hero-categorie, html body.hv-5 .hero-categorie h1, html body.hv-5 .hero-categorie p:not(.fil-ariane) { color: var(--hv-titre); }
html body.hv-5 .hero-categorie .fil-ariane, html body.hv-5 .hero-categorie .fil-ariane a { color: #566363; }
html body.hv-5 .hero-categorie h1 em { color: var(--hv-em); }
html body.hv-5 .hero-categorie p:not(.fil-ariane) { color: #3B4747; }
html body.hv-5 .hero-categorie { background: #fff; border-bottom: 1px solid #E3E3E3; text-align: center; }
html body.hv-5 .hero-categorie .fil-ariane { text-align: center; }
html body.hv-5 .hero-categorie .hero-colonnes { flex-direction: column; align-items: center; gap: 2rem; }
html body.hv-5 .hero-categorie .hero-texte { max-width: 54rem; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
html body.hv-5 .hero-categorie .etiquette { background: none; color: var(--hv-texte); padding: 0; border-radius: 0; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; margin-inline: auto; }
html body.hv-5 .hero-categorie h1 { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; color: #111; font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.15; margin-top: 1rem; }
html body.hv-5 .hero-categorie h1 em { color: var(--hv-texte); font-style: italic; }
html body.hv-5 .hero-categorie p:not(.fil-ariane) { margin-inline: auto; color: #444; font-family: "Source Serif 4", Georgia, serif; font-size: 1.2rem; }
html body.hv-5 .hero-categorie .numeros-urgence { flex: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; border-top: 1px solid #E3E3E3; padding-top: 1.5rem; width: 100%; max-width: 62rem; }
html body.hv-5 .hero-categorie .numero-urgence { flex: 0 1 auto; background: none; border: 0; border-left: 1px solid #E3E3E3; border-radius: 0; padding: .2rem 1.75rem; }
html body.hv-5 .hero-categorie .numero-urgence:first-child { border-left: 0; }
html body.hv-5 .hero-categorie .numero-urgence strong, html body.hv-5 .hero-categorie .numero-urgence strong.long { color: var(--hv-texte); font-size: 1.6rem; font-family: "Source Serif 4", Georgia, serif; }
html body.hv-5 .hero-categorie .numero-urgence span { color: #555; }
@media (max-width: 767px) { html body.hv-5 .hero-categorie .numero-urgence { flex: 1 1 50%; border-left: 0; padding: .6rem .25rem; } html body.hv-5 .hero-categorie .numero-urgence strong, html body.hv-5 .hero-categorie .numero-urgence strong.long { font-size: 1.3rem; } }

/* hero 6 */
html body.hv-6 .hero-categorie, html body.hv-6 .hero-categorie h1, html body.hv-6 .hero-categorie p:not(.fil-ariane) { color: var(--hv-titre); }
html body.hv-6 .hero-categorie .fil-ariane, html body.hv-6 .hero-categorie .fil-ariane a { color: #566363; }
html body.hv-6 .hero-categorie h1 em { color: var(--hv-em); }
html body.hv-6 .hero-categorie p:not(.fil-ariane) { color: #3B4747; }
html body.hv-6 .hero-categorie .etiquette { background: var(--hv-etiquette); color: var(--hv-etiquette-texte); }
html body.hv-6 .hero-categorie { background: linear-gradient(var(--hv-fonce) 0, var(--hv-fonce) 12rem, transparent 12rem); background-color: transparent; padding-bottom: 1rem; }
html body.hv-6 .hero-categorie .fil-ariane, html body.hv-6 .hero-categorie .fil-ariane a { color: #fff; }
html body.hv-6 .hero-categorie .hero-colonnes { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(16,35,26,.12); padding: 2.25rem 2.5rem; margin-top: 1.5rem; align-items: flex-start; }
html body.hv-6 .hero-categorie .etiquette { margin-top: 0; background: var(--hv-vif); }
html body.hv-6 .hero-categorie .numeros-urgence { flex: 0 0 22rem; display: flex; flex-direction: column; flex-wrap: nowrap; gap: .6rem; }
html body.hv-6 .hero-categorie .numero-urgence { flex: none; display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; text-align: left; background: var(--hv-pale); border: 0; border-radius: 8px; padding: .7rem 1rem; }
html body.hv-6 .hero-categorie .numero-urgence strong, html body.hv-6 .hero-categorie .numero-urgence strong.long { font-size: 1.35rem; color: var(--hv-texte); white-space: nowrap; }
html body.hv-6 .hero-categorie .numero-urgence span { font-size: .82rem; color: #333; line-height: 1.35; }
@media (max-width: 1000px) { html body.hv-6 .hero-categorie .hero-colonnes { flex-direction: column; gap: 1.5rem; } html body.hv-6 .hero-categorie .numeros-urgence { flex: none; width: 100%; } }
@media (max-width: 767px) { html body.hv-6 .hero-categorie { background: linear-gradient(var(--hv-fonce) 0, var(--hv-fonce) 8rem, transparent 8rem); } html body.hv-6 .hero-categorie .hero-colonnes { padding: 1.5rem 1.25rem; margin-top: 1rem; } }

/* hero 7 */
html body.hv-7 .hero-categorie, html body.hv-7 .hero-categorie h1, html body.hv-7 .hero-categorie p:not(.fil-ariane), html body.hv-7 .hero-categorie .fil-ariane, html body.hv-7 .hero-categorie .fil-ariane a { color: #fff; }
html body.hv-7 .hero-categorie p:not(.fil-ariane) { color: var(--hv-texte-sur-fonce); }
html body.hv-7 .hero-categorie .etiquette { background: var(--hv-etiquette); color: var(--hv-etiquette-texte); }
html body.hv-7 .hero-categorie { background: var(--hv-fonce); }
html body.hv-7 .hero-categorie h1 em { color: var(--hv-sur-fonce); }
html body.hv-7 .hero-categorie .hero-colonnes { align-items: center; }
html body.hv-7 .hero-categorie .numeros-urgence { flex: 0 0 30rem; display: flow-root; margin-top: 2rem; }
html body.hv-7 .hero-categorie .numero-urgence { background: none; border: 0; border-bottom: 1px solid rgba(255,255,255,.18); border-radius: 0; align-items: flex-start; text-align: left; padding: .7rem 0; margin-left: 12.5rem; }
html body.hv-7 .hero-categorie .numero-urgence:last-child { border-bottom: 0; }
html body.hv-7 .hero-categorie .numero-urgence strong, html body.hv-7 .hero-categorie .numero-urgence strong.long { color: #fff; font-size: 1.45rem; }
html body.hv-7 .hero-categorie .numero-urgence span { color: var(--hv-texte-sur-fonce); font-size: .85rem; }
html body.hv-7 .hero-categorie .numero-urgence:first-child { float: left; width: 11rem; min-height: 11rem; margin: 0; background: #fff; border-radius: 16px; border: 0; align-items: center; justify-content: center; text-align: center; padding: 1.25rem .75rem; }
html body.hv-7 .hero-categorie .numero-urgence:only-child { float: none; }
html body.hv-7 .hero-categorie .numero-urgence:first-child strong { font-size: 4rem; color: var(--hv-vif); line-height: 1; }
html body.hv-7 .hero-categorie .numero-urgence:first-child strong.long { font-size: 1.45rem; }
html body.hv-7 .hero-categorie .numero-urgence:first-child span { color: #1B1B1B; font-size: .88rem; font-weight: 600; margin-top: .5rem; }
@media (max-width: 1000px) { html body.hv-7 .hero-categorie .hero-colonnes { flex-direction: column; align-items: stretch; gap: 1.75rem; } html body.hv-7 .hero-categorie .numeros-urgence { flex: none; width: 100%; margin-top: 0; } }
@media (max-width: 640px) { html body.hv-7 .hero-categorie .numero-urgence:first-child { float: none; width: auto; min-height: 0; flex-direction: row; gap: 1rem; justify-content: flex-start; text-align: left; padding: 1rem 1.25rem; margin-bottom: .5rem; } html body.hv-7 .hero-categorie .numero-urgence:first-child strong { font-size: 3rem; } html body.hv-7 .hero-categorie .numero-urgence:first-child span { margin-top: 0; } html body.hv-7 .hero-categorie .numero-urgence { margin-left: 0; } }

/* hero 8 */
html body.hv-8 .hero-categorie, html body.hv-8 .hero-categorie h1, html body.hv-8 .hero-categorie p:not(.fil-ariane), html body.hv-8 .hero-categorie .fil-ariane, html body.hv-8 .hero-categorie .fil-ariane a { color: #fff; }
html body.hv-8 .hero-categorie p:not(.fil-ariane) { color: var(--hv-texte-sur-fonce); }
html body.hv-8 .hero-categorie .etiquette { background: var(--hv-etiquette); color: var(--hv-etiquette-texte); }
html body.hv-8 .hero-categorie { background: var(--hv-fonce); padding: 1.75rem 0 0; }
html body.hv-8 .hero-categorie h1 em { color: var(--hv-sur-fonce); }
html body.hv-8 .hero-categorie .etiquette { margin-top: 1.25rem; }
html body.hv-8 .hero-categorie h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); line-height: 1.2; }
html body.hv-8 .hero-categorie p:not(.fil-ariane) { max-width: 54rem; font-size: 1.05rem; margin-top: .8rem; }
html body.hv-8 .hero-categorie .hero-colonnes { flex-direction: column; gap: 1.75rem; }
html body.hv-8 .hero-categorie .hero-texte:only-child { padding-bottom: 2.25rem; }
html body.hv-8 .hero-categorie .numeros-urgence { flex: none; width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.5rem; background: var(--hv-vif); box-shadow: 0 0 0 100vmax var(--hv-vif); clip-path: inset(0 -100vmax); padding: 1rem 0; }
html body.hv-8 .hero-categorie .numeros-urgence::before { content: "Numéros utiles"; color: #fff; font-weight: 800; text-transform: uppercase; font-size: .78rem; letter-spacing: .08em; padding-right: 1.25rem; border-right: 2px solid rgba(255,255,255,.5); }
html body.hv-8 .hero-categorie .numero-urgence { flex: 0 0 auto; flex-direction: row; align-items: center; gap: .6rem; background: none; border: 0; border-radius: 0; padding: 0; text-align: left; }
html body.hv-8 .hero-categorie .numero-urgence strong, html body.hv-8 .hero-categorie .numero-urgence strong.long { color: #fff; font-size: 1.3rem; }
html body.hv-8 .hero-categorie .numero-urgence span { color: #fff; font-size: .8rem; line-height: 1.25; }
@media (max-width: 767px) { html body.hv-8 .hero-categorie .numeros-urgence { gap: .75rem 1.25rem; } html body.hv-8 .hero-categorie .numeros-urgence::before { flex: 1 1 100%; border-right: 0; padding: 0; } html body.hv-8 .hero-categorie .numero-urgence { flex: 1 1 100%; } }

/* hero 9 */
html body.hv-9 .hero-categorie, html body.hv-9 .hero-categorie h1, html body.hv-9 .hero-categorie p:not(.fil-ariane) { color: #161616; }
html body.hv-9 .hero-categorie { background: #fff; border-bottom: 1px solid #D0D0D0; }
html body.hv-9 .hero-categorie .fil-ariane, html body.hv-9 .hero-categorie .fil-ariane a { color: #555; }
html body.hv-9 .hero-categorie .hero-colonnes { border: 2px solid #161616; margin-top: 1.5rem; padding: 0; gap: 0; align-items: stretch; background: #fff; }
html body.hv-9 .hero-categorie .hero-texte { padding: 0 2rem 2rem; }
html body.hv-9 .hero-categorie .etiquette { display: block; width: auto; margin: 0 -2rem 1.75rem; background: #161616; color: #fff; border-radius: 0; padding: .55rem 2rem; text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 700; }
html body.hv-9 .hero-categorie h1 { font-family: "Source Sans 3", sans-serif; font-weight: 700; }
html body.hv-9 .hero-categorie h1 em { font-style: normal; color: var(--hv-texte); }
html body.hv-9 .hero-categorie p:not(.fil-ariane) { color: #333; font-family: "Source Sans 3", sans-serif; }
html body.hv-9 .hero-categorie .numeros-urgence { flex: 0 0 22rem; display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0; border-left: 2px solid #161616; }
html body.hv-9 .hero-categorie .numeros-urgence::before { content: "Numéros utiles"; display: block; background: #EDEDED; padding: .55rem 1.25rem; font-weight: 700; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: #161616; border-bottom: 1px solid #161616; }
html body.hv-9 .hero-categorie .numero-urgence { flex: 1 1 auto; border: 0; border-bottom: 1px solid #BDBDBD; border-radius: 0; background: #fff; align-items: flex-start; justify-content: center; text-align: left; padding: .75rem 1.25rem; }
html body.hv-9 .hero-categorie .numero-urgence:last-child { border-bottom: 0; }
html body.hv-9 .hero-categorie .numero-urgence strong, html body.hv-9 .hero-categorie .numero-urgence strong.long { color: #161616; font-size: 1.45rem; font-family: "Source Sans 3", sans-serif; }
html body.hv-9 .hero-categorie .numero-urgence span { color: #444; font-size: .82rem; }
@media (max-width: 1000px) { html body.hv-9 .hero-categorie .hero-colonnes { flex-direction: column; } html body.hv-9 .hero-categorie .numeros-urgence { flex: none; width: 100%; border-left: 0; border-top: 2px solid #161616; } }
@media (max-width: 767px) { html body.hv-9 .hero-categorie .hero-texte { padding: 0 1.25rem 1.5rem; } html body.hv-9 .hero-categorie .etiquette { margin: 0 -1.25rem 1.25rem; padding: .55rem 1.25rem; } }

/* hero 10 */
html body.hv-10 .hero-categorie, html body.hv-10 .hero-categorie h1, html body.hv-10 .hero-categorie p:not(.fil-ariane) { color: var(--hv-titre); }
html body.hv-10 .hero-categorie .fil-ariane, html body.hv-10 .hero-categorie .fil-ariane a { color: #566363; }
html body.hv-10 .hero-categorie h1 em { color: var(--hv-em); }
html body.hv-10 .hero-categorie p:not(.fil-ariane) { color: #3B4747; }
html body.hv-10 .hero-categorie .etiquette { background: var(--hv-etiquette); color: var(--hv-etiquette-texte); }
html body.hv-10 .hero-categorie { background: var(--hv-fond); border-bottom: 1px solid var(--hv-trait); }
html body.hv-10 .hero-categorie .etiquette { background: var(--hv-etiquette); color: var(--hv-etiquette-texte); }
html body.hv-10 .hero-categorie .hero-colonnes { display: grid; grid-template-columns: minmax(0, 1fr) 24rem; grid-template-areas: "texte image" "numeros image"; column-gap: 3rem; row-gap: 1.75rem; align-items: start; }
html body.hv-10 .hero-categorie .hero-texte { grid-area: texte; }
html body.hv-10 .hero-categorie .hero-colonnes::after { content: ""; grid-area: image; align-self: stretch; min-height: 21rem; margin-top: 2rem; border-radius: 16px; background: var(--hero-img) center 22% / cover no-repeat; }
html body.hv-10 .hero-categorie .numeros-urgence { grid-area: numeros; display: flex; flex-wrap: wrap; gap: .6rem; }
html body.hv-10 .hero-categorie .numero-urgence { flex: 0 0 auto; flex-direction: row; align-items: center; gap: .7rem; background: #fff; border: 1px solid var(--hv-trait); border-radius: 8px; padding: .55rem .9rem; text-align: left; }
html body.hv-10 .hero-categorie .numero-urgence strong, html body.hv-10 .hero-categorie .numero-urgence strong.long { font-size: 1.3rem; color: var(--hv-texte); }
html body.hv-10 .hero-categorie .numero-urgence span { font-size: .8rem; line-height: 1.3; color: #333; }
@media (max-width: 1000px) { html body.hv-10 .hero-categorie .hero-colonnes { grid-template-columns: minmax(0, 1fr); grid-template-areas: "image" "texte" "numeros"; row-gap: 1.25rem; } html body.hv-10 .hero-categorie .hero-colonnes::after { min-height: 11rem; margin-top: 1.5rem; } html body.hv-10 .hero-categorie .etiquette { margin-top: 0; } }
@media (max-width: 767px) { html body.hv-10 .hero-categorie .numero-urgence { flex: 1 1 100%; } }