/* ==========================================================================
   Portail-Habitat.fr - 10 pages d'accueil (V1.6)
   Chargé uniquement sur l'accueil. Aperçu : /?accueil=1 à /?accueil=10,
   choix définitif : Admin > Réglages > « Page d'accueil ».
   ========================================================================== */

body.hp { background: var(--creme, #FAF8F4); }
.hp main > section, body.hp main > section { position: relative; }
.hp-sur { margin: 0 0 .9rem; font-size: .8rem; font-weight: 700; line-height: 1.4; letter-spacing: .08em; text-transform: uppercase; color: #A9441F; }
.hp h1 { margin: 0; font-size: clamp(2rem, 4.2vw, 3.3rem); line-height: 1.12; font-weight: 800; letter-spacing: -.01em; color: var(--mag-nuit); }
.hp h1 em { font-style: normal; font-family: inherit; font-weight: inherit; font-size: inherit; line-height: inherit; letter-spacing: inherit; color: var(--terre); }
.hp .hp-chapo { max-width: 44rem; margin: 1.25rem 0 0; font-size: 1.2rem; line-height: 1.6; color: #34403F; }
.hp-titre { margin: 0 0 1.75rem; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.25; font-weight: 800; color: var(--mag-nuit); }
.hp-boutons { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.hp-boutons .btn { background: var(--terre); color: #fff; }
.hp-boutons .btn:hover { background: var(--terre-fonce); }
.hp-boutons .btn.blanc.contour { background: transparent; color: var(--mag); box-shadow: inset 0 0 0 2px var(--mag); }
.hp-boutons .btn.blanc.contour:hover { background: var(--mag); color: #fff; }
.hp-ico { flex: 0 0 auto; }
.hp section { padding: 4.5rem 0; }

/* Carte de fiche générique */
.hp-carte { display: flex; flex-direction: column; gap: .4rem; padding: 1.35rem 1.4rem; background: #fff; border: 1px solid #E3DED5; border-radius: 1rem; color: #1B2626; text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.hp-carte:hover { border-color: var(--mag); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11,54,56,.08); }
.hp-carte-sur { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #A9441F; }
.hp-carte strong { font-size: 1.12rem; line-height: 1.3; color: var(--mag-nuit); }
.hp-carte-txt { font-size: .95rem; line-height: 1.5; color: #4A5555; }

/* Engagements */
.hp-engagements { background: var(--mag); color: #fff; }
.hp .hp-engagements { padding: 3rem 0; }
.hp-engagements .section { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem; }
.hp-engagement { display: flex; flex-direction: column; gap: .5rem; }
.hp-engagement .hp-ico { color: var(--jaune); }
.hp-engagement strong { font-size: 1.1rem; color: #fff; }
.hp-engagement span { font-size: .95rem; line-height: 1.5; color: #D9ECEA; }
.hp-engagements-clair { background: var(--mag-pale); }
.hp-engagements-clair .hp-engagement .hp-ico { color: var(--terre); }
.hp-engagements-clair .hp-engagement strong { color: var(--mag-nuit); }
.hp-engagements-clair .hp-engagement span { color: #4A5555; }

/* Recherche instantanée */
.hp-recherche { position: relative; display: flex; align-items: center; gap: .5rem; max-width: 46rem; margin-top: 2rem; padding: .45rem .45rem .45rem 1.1rem; background: #fff; border: 2px solid var(--mag); border-radius: 999px; box-shadow: 0 12px 30px rgba(11,54,56,.10); }
.hp-recherche .hp-ico { color: var(--mag); }
.hp-recherche input { flex: 1 1 auto; min-width: 0; height: 3rem; border: 0; background: transparent; font: inherit; font-size: 1.1rem; color: #1B2626; outline: none; }
.hp-recherche button { flex: 0 0 auto; height: 3rem; padding: 0 1.5rem; border: 0; border-radius: 999px; background: var(--terre); color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.hp-recherche button:hover { background: var(--terre-fonce); }
.hp-recherche:focus-within { outline: 3px solid var(--corail); outline-offset: 2px; }
.hp-resultats { display: none; max-width: 46rem; margin-top: .6rem; background: #fff; border: 1px solid #E3DED5; border-radius: 1rem; box-shadow: 0 16px 40px rgba(11,54,56,.14); overflow: hidden; }
.hp-resultats.ouvert { display: block; }
.hp-resultats ul { list-style: none; margin: 0; padding: .35rem 0; }
.hp-resultats a { display: flex; flex-direction: column; padding: .7rem 1.2rem; text-decoration: none; }
.hp-resultats a:hover, .hp-resultats a:focus { background: var(--mag-pale); }
.hp-resultats strong { color: var(--mag-nuit); font-size: 1rem; }
.hp-resultats span { font-size: .82rem; color: #5E6868; }
.hp-aucun { margin: 0; padding: 1rem 1.2rem; font-size: .95rem; color: #4A5555; }
.hp-aucun a { color: var(--mag); text-decoration: underline; }

/* ---------- 1. Moteur de recherche ---------- */
.hp .hp1-hero { padding: 5rem 0 4rem; background: var(--mag-pale); border-bottom: 1px solid var(--mag-clair); }
.hp1-hero h1 { max-width: 52rem; }
.hp1-frequents { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 1.25rem 0 0; font-size: .95rem; }
.hp1-frequents span { font-weight: 600; color: #4A5555; margin-right: .25rem; }
.hp1-frequents a { padding: .35rem .85rem; background: #fff; border: 1px solid var(--mag-clair); border-radius: 999px; color: var(--mag); font-weight: 600; text-decoration: none; }
.hp1-frequents a:hover { border-color: var(--mag); }
.hp1-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.hp1-rub { padding: 1.4rem; background: #fff; border: 1px solid #E3DED5; border-radius: 1rem; }
.hp1-rub-tete { display: flex; align-items: center; gap: .9rem; text-decoration: none; }
.hp1-ico { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .8rem; background: var(--mag); color: #fff; }
.hp1-rub-tete strong { display: block; font-size: 1.1rem; line-height: 1.3; color: var(--mag-nuit); }
.hp1-rub-tete small { font-size: .85rem; color: #5E6868; }
.hp1-rub-tete:hover strong { text-decoration: underline; }
.hp1-rub ul { list-style: none; margin: 1rem 0 0; padding: 1rem 0 0; border-top: 1px solid #EFEAE1; }
.hp1-rub li + li { margin-top: .45rem; }
.hp1-rub li a { font-size: .95rem; color: #34403F; text-decoration: none; }
.hp1-rub li a::before { content: "→ "; color: var(--corail); }
.hp1-rub li a:hover { color: var(--mag); text-decoration: underline; }
.hp .hp1-saison { padding-top: 0; }
.hp1-saison .section { display: grid; grid-template-columns: 1fr 2.2fr; gap: 2.5rem; align-items: start; padding-top: 3.5rem; border-top: 1px solid #E3DED5; }
.hp1-saison-tete p:not(.hp-sur) { margin: 0; font-size: 1.05rem; line-height: 1.6; color: #4A5555; }
.hp1-saison-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

/* ---------- 2. Village illustré ---------- */
.hp .hp2-hero { padding: 4.5rem 0 0; background: linear-gradient(#EAF4F2, #EAF4F2); text-align: center; overflow: hidden; }
.hp2-hero h1 { max-width: 50rem; margin: 0 auto; }
.hp2-hero .hp-chapo { margin-left: auto; margin-right: auto; }
.hp2-hero .hp-boutons { justify-content: center; }
.hp-village { display: block; width: 100%; height: clamp(170px, 26vw, 330px); margin-top: 3rem; }
.hp2-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.hp2-carte { display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #E3DED5; border-radius: 1.1rem; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.hp2-carte:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11,54,56,.10); }
.hp2-visuel { display: block; height: 11.5rem; background: #F1ECE2; overflow: hidden; }
.hp2-visuel img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.hp2-carte:nth-child(4) .hp2-visuel { background: #fff; }
.hp2-carte:nth-child(4) .hp2-visuel img { object-fit: contain; padding: .75rem; }
.hp2-texte { display: flex; flex-direction: column; gap: .45rem; padding: 1.25rem 1.35rem 1.4rem; }
.hp2-texte strong { font-size: 1.15rem; color: var(--mag-nuit); }
.hp2-texte span { font-size: .95rem; line-height: 1.5; color: #4A5555; }
.hp2-texte em { margin-top: .25rem; font-style: normal; font-weight: 700; font-size: .9rem; color: var(--terre); }

/* ---------- 3. Mosaïque ---------- */
.hp .hp3-hero { padding: 4.5rem 0; }
.hp3-hero .section { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
.hp3-preuves { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; list-style: none; margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 1px solid #E3DED5; }
.hp3-preuves li { font-size: .95rem; color: #4A5555; }
.hp3-preuves strong { display: block; font-size: 2rem; line-height: 1.1; color: var(--mag); }
.hp3-mosaique { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 9.5rem); gap: .8rem; }
.hp3-m { display: block; overflow: hidden; border-radius: 1rem; background: #F1ECE2; }
.hp3-m img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp3-m1 { grid-column: 1 / 3; grid-row: 1 / 3; }
.hp3-m2 { grid-column: 3; grid-row: 1; background: #fff; }
.hp3-m2 img { object-fit: contain; padding: .4rem; }
.hp3-m3 { grid-column: 3; grid-row: 2 / 4; }
.hp3-m4 { grid-column: 1; grid-row: 3; }
.hp3-m5 { grid-column: 2; grid-row: 3; }
.hp .hp3-tuiles { padding-top: 1rem; }
.hp3-grille { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 15rem; gap: 1rem; }
.hp3-tuile { position: relative; display: block; overflow: hidden; border-radius: 1rem; background: #F1ECE2; text-decoration: none; }
.hp3-large { grid-column: span 2; grid-row: span 2; }
.hp3-tuile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.hp3-tuile:hover img { transform: scale(1.04); }
.hp3-legende { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: .2rem; padding: 1rem 1.1rem; background: rgba(11,54,56,.9); }
.hp3-legende strong { font-size: 1.05rem; color: #fff; }
.hp3-legende span { font-size: .8rem; line-height: 1.4; color: #D9ECEA; }
.hp3-large .hp3-legende strong { font-size: 1.4rem; }
.hp3-bande { background: var(--mag); color: #fff; }
.hp .hp3-bande { padding: 2.5rem 0; }
.hp3-bande .section { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; }
.hp3-bande .hp-sur { color: var(--jaune); margin-bottom: .3rem; }
.hp3-bande h2 { margin: 0; font-size: 1.6rem; color: #fff; }
.hp3-bande ul { display: flex; flex-wrap: wrap; gap: .6rem; list-style: none; margin: 0; padding: 0; }
.hp3-bande a { display: inline-block; padding: .55rem 1rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #fff; font-weight: 600; font-size: .95rem; text-decoration: none; }
.hp3-bande a:hover { background: #fff; color: var(--mag); }

/* ---------- 4. Je suis… ---------- */
.hp .hp4-hero { padding: 4rem 0 2rem; }
.hp4-hero .section { display: grid; grid-template-columns: 1.4fr 1fr; gap: 3rem; align-items: center; }
.hp4-visuel { display: block; width: 100%; max-width: 26rem; height: auto; margin-left: auto; }
.hp .hp4-profils { padding-top: 1rem; }
.hp4-question { margin: 0 0 .8rem; font-size: 1.3rem; font-weight: 800; color: var(--mag-nuit); }
.hp4-onglets { display: flex; flex-wrap: wrap; gap: .6rem; }
.hp4-onglets button { padding: .75rem 1.25rem; border: 2px solid var(--mag-clair); border-radius: 999px; background: #fff; color: var(--mag); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; }
.hp4-onglets button:hover { border-color: var(--mag); }
.hp4-onglets button[aria-selected="true"] { background: var(--mag); border-color: var(--mag); color: #fff; }
.hp4-profils:not(.onglets-actifs) .hp4-onglets { display: none; }
.hp4-panneau { margin-top: 1.75rem; padding: 2rem; background: #fff; border: 1px solid #E3DED5; border-radius: 1.25rem; }
.hp4-profils:not(.onglets-actifs) .hp4-panneau + .hp4-panneau { margin-top: 1rem; }
.hp4-panneau h2 { margin: 0 0 1.25rem; font-size: 1.5rem; color: var(--mag-nuit); }
.hp4-panneau h2 span { display: block; margin-top: .2rem; font-size: 1rem; font-weight: 400; color: #5E6868; }
.hp4-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hp4-cartes .hp-carte { background: var(--creme); }
.hp4-liste { display: flex; flex-wrap: wrap; gap: .75rem; }
.hp4-liste a { display: inline-flex; align-items: center; gap: .6rem; padding: .8rem 1.2rem; background: #fff; border: 1px solid #E3DED5; border-radius: .8rem; color: var(--mag-nuit); font-weight: 600; text-decoration: none; }
.hp4-liste a .hp-ico { color: var(--terre); }
.hp4-liste a:hover { border-color: var(--mag); }

/* ---------- 5. La une ---------- */
body.hp-5 { background: #fff; }
.hp .hp5-titre { padding: 2.5rem 0 1.75rem; border-bottom: 3px double var(--mag-nuit); text-align: center; }
.hp5-date { margin: 0 0 1rem; font-size: .9rem; color: #5E6868; }
.hp5-titre h1 { font-family: "Source Serif 4", Georgia, serif; font-weight: 700; max-width: 56rem; margin: 0 auto; }
.hp5-titre h1 em { font-style: italic; color: var(--mag); }
.hp5-devise { margin: 1rem 0 0; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--terre); }
.hp .hp5-une { padding: 2.5rem 0 3rem; }
.hp5-une .section { display: grid; grid-template-columns: 1.6fr 1fr .9fr; gap: 2rem; }
.hp5-principal, .hp5-second { display: flex; flex-direction: column; gap: .6rem; text-decoration: none; color: #1B2626; }
.hp5-image { display: block; height: 20rem; overflow: hidden; border-radius: .6rem; background: #F1ECE2; }
.hp5-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.hp5-rubrique { font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--terre); }
.hp5-principal strong { font-family: "Source Serif 4", Georgia, serif; font-size: 2rem; line-height: 1.2; color: var(--mag-nuit); }
.hp5-chapeau { font-family: "Source Serif 4", Georgia, serif; font-size: 1.15rem; line-height: 1.55; color: #34403F; }
.hp5-lire { font-weight: 700; color: var(--mag); }
.hp5-principal:hover strong, .hp5-second:hover strong { text-decoration: underline; }
.hp5-secondaires { display: flex; flex-direction: column; gap: 1.5rem; padding-left: 2rem; border-left: 1px solid #E3DED5; }
.hp5-second + .hp5-second { padding-top: 1.5rem; border-top: 1px solid #E3DED5; }
.hp5-second strong { font-family: "Source Serif 4", Georgia, serif; font-size: 1.35rem; line-height: 1.25; color: var(--mag-nuit); }
.hp5-second span:last-child { font-size: .98rem; line-height: 1.55; color: #4A5555; }
.hp5-colonne { padding: 1.5rem; background: var(--mag-pale); border-top: 4px solid var(--mag); }
.hp5-colonne h2 { margin: 0 0 1rem; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mag-nuit); }
.hp5-colonne ol { margin: 0; padding-left: 1.4rem; }
.hp5-colonne li { margin-top: .7rem; font-size: .98rem; line-height: 1.4; }
.hp5-colonne li::marker { font-weight: 800; color: var(--terre); }
.hp5-colonne a { color: #1B2626; text-decoration: none; }
.hp5-colonne a:hover { color: var(--mag); text-decoration: underline; }
.hp .hp5-rubriques { padding-top: 0; }
.hp5-filet { display: flex; align-items: center; gap: 1rem; margin: 0 0 2rem; font-size: .9rem; letter-spacing: .1em; text-transform: uppercase; color: var(--mag-nuit); }
.hp5-filet::before, .hp5-filet::after { content: ""; flex: 1; height: 1px; background: #CFC7B8; }
.hp5-colonnes { columns: 3; column-gap: 2.5rem; column-rule: 1px solid #E3DED5; }
.hp5-rub { break-inside: avoid; margin-bottom: 1.75rem; }
.hp5-rub h3 { margin: 0 0 .5rem; font-family: "Source Serif 4", Georgia, serif; font-size: 1.25rem; }
.hp5-rub h3 a { color: var(--mag-nuit); text-decoration: none; }
.hp5-rub ul { list-style: none; margin: 0; padding: 0; }
.hp5-rub li { padding: .35rem 0; border-bottom: 1px dotted #D8D1C4; font-size: .95rem; }
.hp5-rub li a { color: #34403F; text-decoration: none; }
.hp5-rub a:hover { color: var(--mag); text-decoration: underline; }

/* ---------- 6. Les montants officiels ---------- */
.hp .hp6-hero { padding: 4.5rem 0 4rem; background: var(--mag); }
.hp6-hero .hp-sur { color: var(--jaune); }
.hp6-hero h1 { max-width: 54rem; color: #fff; font-family: "Nunito Sans", sans-serif; }
.hp6-hero h1 em { color: var(--jaune); }
.hp6-hero .hp-chapo { color: #D9ECEA; }
.hp6-chiffres { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.75rem; }
.hp6-chiffre { display: flex; flex-direction: column; gap: .3rem; padding: 1.35rem 1.4rem; background: #fff; border-radius: 1rem; text-decoration: none; transition: transform .15s; }
.hp6-chiffre:hover { transform: translateY(-3px); }
.hp6-chiffre strong { font-family: "Nunito Sans", sans-serif; font-size: 2rem; line-height: 1.1; font-weight: 800; color: var(--mag); }
.hp6-libelle { font-weight: 700; color: var(--mag-nuit); }
.hp6-precision { font-size: .88rem; color: #5E6868; }
.hp6-note { margin: 1.25rem 0 0; font-size: .85rem; color: #BFD8D5; }
.hp6-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2.5rem; }
.hp6-rub { padding-top: 1rem; border-top: 2px solid var(--mag); }
.hp6-rub-titre { display: inline-flex; align-items: center; gap: .5rem; font-size: 1.1rem; font-weight: 800; color: var(--mag-nuit); text-decoration: none; }
.hp6-rub-titre .hp-ico { color: var(--terre); }
.hp6-rub p { margin: .6rem 0 0; font-size: .95rem; line-height: 1.7; color: #4A5555; }
.hp6-rub p a { color: #34403F; text-decoration: none; border-bottom: 1px solid #D5CDBF; }
.hp6-rub p a:hover { color: var(--mag); border-color: var(--mag); }

/* ---------- 7. Au fil de l'année ---------- */
.hp .hp7-hero { padding: 4.5rem 0 3.5rem; background: #F6EFE3; }
.hp7-hero h1 { font-size: clamp(2rem, 3.6vw, 3rem); }
.hp7-hero h1 em { color: var(--mag); }
.hp7-annee { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: .35rem; list-style: none; margin: 2.75rem 0 0; padding: 0; }
.hp7-annee li { display: flex; flex-direction: column; gap: .35rem; min-height: 6.5rem; padding: .7rem .55rem; background: #fff; border-radius: .7rem; border-top: 5px solid var(--mag-clair); }
.hp7-annee li:nth-child(n+6):nth-child(-n+8) { border-top-color: var(--jaune); }
.hp7-annee li:nth-child(n+9):nth-child(-n+10) { border-top-color: var(--corail); }
.hp7-annee li:nth-child(n+11), .hp7-annee li:nth-child(-n+2) { border-top-color: var(--mag-moyen); }
.hp7-mois { font-weight: 800; font-size: .95rem; color: var(--mag-nuit); }
.hp7-sujet { font-size: .72rem; line-height: 1.35; color: #5E6868; }
.hp7-annee li.actuel { background: var(--mag); border-top-color: var(--jaune); transform: translateY(-6px); box-shadow: 0 10px 20px rgba(11,54,56,.2); }
.hp7-annee li.actuel .hp7-mois { color: #fff; }
.hp7-annee li.actuel .hp7-sujet { color: #D9ECEA; }
.hp7-cartes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.hp7-carte { display: flex; flex-direction: column; gap: .45rem; padding: 1.5rem; background: #fff; border-radius: 1rem; border: 1px solid #E3DED5; text-decoration: none; }
.hp7-carte:hover { border-color: var(--mag); }
.hp7-num { font-family: "Fraunces", Georgia, serif; font-size: 2.2rem; line-height: 1; font-weight: 700; color: var(--corail); }
.hp7-carte strong { font-size: 1.12rem; line-height: 1.3; color: var(--mag-nuit); }
.hp .hp7-rubriques { padding-top: 0; }
.hp7-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.hp7-grille a { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: .9rem; align-items: center; padding: 1rem 1.1rem; background: #fff; border: 1px solid #E3DED5; border-radius: .9rem; text-decoration: none; }
.hp7-grille a:hover { border-color: var(--mag); }
.hp7-ico { grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--mag-pale); color: var(--mag); }
.hp7-grille strong { color: var(--mag-nuit); line-height: 1.3; }
.hp7-grille span:last-child { font-size: .85rem; color: #5E6868; }

/* ---------- 8. Vos questions ---------- */
.hp .hp8-hero { padding: 4.5rem 0; background: var(--mag-nuit); }
.hp8-hero .section { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: start; }
.hp8-hero .hp-sur { color: var(--jaune); }
.hp8-hero h1 { color: #fff; }
.hp8-hero h1 em { color: var(--corail); }
.hp8-hero .hp-chapo { color: #D9ECEA; }
.hp8-hero .hp-recherche { border-color: #fff; }
.hp8-questions { list-style: none; margin: 0; padding: 0; background: #fff; border-radius: 1.25rem; overflow: hidden; }
.hp8-questions li + li { border-top: 1px solid #EFEAE1; }
.hp8-questions a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .95rem 1.35rem; font-weight: 600; color: var(--mag-nuit); text-decoration: none; }
.hp8-questions a::after { content: "→"; color: var(--terre); font-weight: 800; }
.hp8-questions a:hover { background: var(--mag-pale); }
.hp8-intro { margin: -1rem 0 1.75rem; max-width: 44rem; color: #4A5555; }
.hp8-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hp8-outil { display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem; background: #fff; border: 1px solid #E3DED5; border-left: 5px solid var(--corail); border-radius: .9rem; text-decoration: none; }
.hp8-outil:hover { border-color: var(--mag); border-left-color: var(--corail); }
.hp8-ico { color: var(--mag); }
.hp8-outil strong { font-size: 1.08rem; line-height: 1.3; color: var(--mag-nuit); }
.hp8-outil span:last-child { font-size: .88rem; color: #5E6868; }
.hp .hp8-rubriques { padding-top: 0; }
.hp8-liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 2rem; }
.hp8-liste a { display: flex; align-items: center; gap: .7rem; padding: .9rem 0; border-bottom: 1px solid #E3DED5; color: var(--mag-nuit); font-weight: 600; text-decoration: none; }
.hp8-liste a .hp-ico { color: var(--terre); }
.hp8-liste a:hover span { text-decoration: underline; }

/* ---------- 9. Le sommaire ---------- */
body.hp-9 { background: #FFFDF8; }
.hp .hp9-hero { padding: 5rem 0 3rem; }
.hp9-sur { margin: 0 0 1.5rem; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; color: #5E6868; }
.hp9-hero h1 { font-family: "Fraunces", Georgia, serif; font-weight: 600; font-size: clamp(2.4rem, 5.5vw, 4.6rem); line-height: 1.02; letter-spacing: -.02em; max-width: 62rem; }
.hp9-hero h1 em { font-style: italic; color: var(--mag); }
.hp9-intro { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1.5rem 3rem; margin-top: 2.25rem; padding-top: 1.5rem; border-top: 2px solid var(--mag-nuit); }
.hp9-intro p { margin: 0; max-width: 40rem; font-family: "Source Serif 4", Georgia, serif; font-size: 1.25rem; line-height: 1.5; color: #34403F; }
.hp9-intro .hp9-mentions { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; font-family: inherit; font-size: .85rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--terre); }
.hp .hp9-sommaire { padding-top: 1rem; }
.hp9-colonnes { columns: 3; column-gap: 3rem; }
.hp9-rub { break-inside: avoid; margin-bottom: 2.5rem; }
.hp9-rub h3 { display: flex; align-items: baseline; gap: .75rem; margin: 0 0 .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--mag-nuit); font-family: "Fraunces", Georgia, serif; font-size: 1.35rem; font-weight: 600; }
.hp9-rub h3 span { font-size: .95rem; color: var(--terre); }
.hp9-rub h3 a { color: var(--mag-nuit); text-decoration: none; }
.hp9-rub ol { list-style: none; margin: 0; padding: 0; counter-reset: f; }
.hp9-rub li { counter-increment: f; display: flex; gap: .6rem; padding: .3rem 0; font-size: .98rem; line-height: 1.4; }
.hp9-rub li::before { content: counter(f) "."; min-width: 1.2rem; color: #9AA3A2; font-variant-numeric: tabular-nums; }
.hp9-rub li a { color: #1B2626; text-decoration: none; }
.hp9-rub a:hover { color: var(--mag); text-decoration: underline; }

/* ---------- 10. Confiance ---------- */
.hp .hp10-hero { padding: 4rem 0; background: linear-gradient(var(--mag-pale), var(--mag-pale)); }
.hp10-hero h1 { font-size: clamp(2rem, 3.4vw, 2.8rem); }
.hp10-hero .section { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: center; }
.hp10-visuel { display: block; width: 100%; height: auto; max-width: 34rem; margin-left: auto; }
.hp10-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; list-style: none; margin: 0; padding: 0; counter-reset: e; }
.hp10-etapes li { counter-increment: e; position: relative; display: flex; flex-direction: column; gap: .5rem; padding: 3.4rem 1.4rem 1.4rem; background: #fff; border: 1px solid #E3DED5; border-radius: 1rem; }
.hp10-etapes li::before { content: counter(e); position: absolute; top: 1.1rem; left: 1.4rem; display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--mag); color: #fff; font-weight: 800; font-size: .95rem; }
.hp10-etapes strong { font-size: 1.1rem; color: var(--mag-nuit); }
.hp10-etapes span { font-size: .95rem; line-height: 1.5; color: #4A5555; }
.hp .hp10-rubriques { padding-top: 0; }
.hp10-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.hp10-rub { display: flex; flex-direction: column; gap: .45rem; padding: 1.4rem; background: #fff; border: 1px solid #E3DED5; border-radius: 1rem; text-decoration: none; }
.hp10-rub:hover { border-color: var(--mag); }
.hp10-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; border-radius: .8rem; background: var(--mag-pale); color: var(--mag); }
.hp10-rub strong { font-size: 1.1rem; color: var(--mag-nuit); }
.hp10-rub span:last-child { font-size: .92rem; line-height: 1.5; color: #4A5555; }
.hp .hp10-mairie { padding: 0 0 4.5rem; }
.hp10-cadre > div { max-width: 44rem; }
.hp10-cadre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem; padding: 2.5rem; background: var(--mag); border-radius: 1.25rem; }
.hp10-mairie h2 { margin: 0; font-size: 1.6rem; color: #fff; }
.hp10-mairie p { margin: .5rem 0 0; color: #D9ECEA; }
.hp10-mairie .btn { background: var(--terre); color: #fff; }

/* ---------- Mobile ---------- */
@media (max-width: 1000px) {
	.hp1-grille, .hp2-grille, .hp4-cartes, .hp6-grille, .hp7-cartes, .hp7-grille, .hp8-grille, .hp10-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp1-saison .section, .hp3-hero .section, .hp4-hero .section, .hp8-hero .section, .hp10-hero .section { grid-template-columns: minmax(0, 1fr); }
	.hp1-saison-cartes { grid-template-columns: 1fr; }
	.hp-engagements .section, .hp6-chiffres, .hp10-etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp3-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp5-une .section { grid-template-columns: 1fr 1fr; }
	.hp5-principal { grid-column: 1 / -1; }
	.hp5-secondaires { padding-left: 0; border-left: 0; }
	.hp5-colonnes, .hp9-colonnes { columns: 2; }
	.hp7-annee { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.hp8-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.hp4-visuel, .hp10-visuel { max-width: 20rem; margin: 0 auto; }
}
@media (max-width: 640px) {
	.hp section { padding: 3rem 0; }
	.hp .hp-chapo { font-size: 1.05rem; }
	.hp1-grille, .hp2-grille, .hp4-cartes, .hp6-grille, .hp7-cartes, .hp7-grille, .hp8-grille, .hp10-grille, .hp10-etapes, .hp-engagements .section, .hp5-une .section, .hp8-liste { grid-template-columns: 1fr; }
	.hp6-chiffres { grid-template-columns: 1fr 1fr; gap: .6rem; }
	.hp6-chiffre { padding: 1rem; }
	.hp6-chiffre strong { font-size: 1.45rem; }
	.hp3-mosaique { grid-template-rows: repeat(3, 6rem); }
	.hp3-grille { grid-template-columns: 1fr 1fr; grid-auto-rows: 11rem; }
	.hp3-large { grid-column: span 2; grid-row: span 1; }
	.hp3-legende span { display: none; }
	.hp5-colonnes, .hp9-colonnes { columns: 1; }
	.hp5-image { height: 13rem; }
	.hp7-annee { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.hp7-annee li { min-height: 0; }
	.hp-recherche { padding-left: .8rem; border-radius: 1rem; }
	.hp-recherche button { padding: 0 1rem; border-radius: .7rem; }
	.hp-recherche .hp-ico { display: none; }
	.hp4-panneau { padding: 1.25rem; }
	.hp4-onglets button { padding: .6rem 1rem; font-size: .95rem; }
	.hp10-cadre { padding: 1.75rem 1.4rem; }
}

/* ---------- 11. Combiné : recherche, Je suis…, rubriques, mairies, réassurance ---------- */
.hp .hp11-profils { padding: 3.5rem 0 1rem; }
.hp .hp11-rubriques { padding-top: 3.5rem; }
.hp .hp11-mairie { padding: 0 0 4rem; }
.hp .hp11-reassurance { padding: 3.5rem 0; }
.hp11-reassurance .section { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.25rem 2.5rem; }
.hp11-reassurance-titre { grid-column: 1 / -1; margin: 0; font-size: clamp(1.4rem, 2.2vw, 1.8rem); color: #fff; }
@media (max-width: 1000px) { .hp11-reassurance .section { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hp11-reassurance .section { grid-template-columns: 1fr; } }
.hp7-grille a { align-content: center; row-gap: .15rem; }
@media (max-width: 640px) { .hp11-profils .hp4-panneau .hp-carte-txt { display: none; } .hp11-profils .hp4-cartes { gap: .6rem; } }