/* ════════════════════════════════════════════════════════════
   SgElec — style commun des pages publiques (structure de l'accueil)
   Préfixe hm- : couleurs, police de titre, boutons, haut de page nuit,
   sections numérotées, tuiles. Chargé par layouts/defaultHome.phtml.
════════════════════════════════════════════════════════════ */

/* ══ ACCUEIL — sobre, éditorial ════════════════════════════
   Une police de titre (Fraunces), des filets fins, peu d'effets. */
.hm {
  --paper: #F5F1EA; --paper-2: #ECE6DB; --ink: #17150F; --ink-2: #4B4539; --mute: #7B7365;
  --line: rgba(23,21,15,.14); --gold: #9C7A30; --gold-2: #C9A853; --night: #100F0C;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  background: var(--paper); color: var(--ink);
}
[data-theme="dark"] .hm {
  --paper: #12100C; --paper-2: #1A1712; --ink: #EEE8DC; --ink-2: #C4BBAA; --mute: #918876;
  --line: rgba(238,232,220,.14); --gold: #D4B266;
}
.hm a { color: inherit; }
.hm-wrap { max-width: 1160px; margin: 0 auto; padding: 0 1.5rem; }
.hm-serif { font-family: var(--serif); font-optical-sizing: auto; font-weight: 400; letter-spacing: -.01em; }
.hm-kicker { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); }

/* ── Boutons ─────────────────────────────────────────────── */
.hm-btn { display: inline-flex; align-items: center; gap: .6rem; padding: .95rem 1.6rem; font-weight: 700; font-size: .95rem; text-decoration: none; border-radius: 2px; transition: background .2s, color .2s, border-color .2s; }
.hm-btn-or { background: var(--gold-2); color: #17150F !important; }
.hm-btn-or:hover { background: #DCC07A; }
.hm-btn-ligne { border: 1px solid currentColor; }
.hm-fleche { transition: transform .2s; }
a:hover > .hm-fleche { transform: translateX(4px); }

/* ── HÉRO ────────────────────────────────────────────────── */
.hm-hero { background: var(--night); color: #EDE7DA; border-bottom: 1px solid rgba(201,168,83,.25); }
.hm-hero-in { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 4rem; align-items: end; padding: 6.5rem 0 5.5rem; }
.hm-hero .hm-kicker { color: rgba(237,231,218,.55); display: flex; align-items: center; gap: .8rem; }
.hm-hero .hm-kicker::before { content: ''; width: 2.25rem; height: 1px; background: var(--gold-2); }
.hm-hero h1 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 350; font-size: clamp(2.5rem, 5.6vw, 4.6rem); line-height: 1.02; letter-spacing: -.025em; color: #F6F1E6; margin: 1.6rem 0 1.75rem; }
.hm-hero h1 em { font-style: italic; color: var(--gold-2); font-weight: 300; }
.hm-hero-txt { font-size: 1.075rem; line-height: 1.75; color: rgba(237,231,218,.72); max-width: 34rem; }
.hm-hero-txt strong { color: #F6F1E6; font-weight: 600; }
.hm-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.5rem; }
.hm-tel { display: inline-flex; flex-direction: column; text-decoration: none; color: #F6F1E6 !important; }
.hm-tel small { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,231,218,.5); }
.hm-tel span { font-family: var(--serif); font-size: 1.45rem; letter-spacing: .01em; border-bottom: 1px solid rgba(201,168,83,.5); }
.hm-tel:hover span { border-color: var(--gold-2); }

/* Logo au-dessus de la fiche : cartouche crème, logo à fond transparent */
.hm-logo { margin-bottom: 2rem; padding: 1.25rem; background: #F6F1E6; border: 1px solid rgba(201,168,83,.55); border-radius: 4px; display: flex; justify-content: center; box-shadow: 0 30px 60px -35px rgba(0,0,0,.8); }
.hm-logo img { width: min(240px, 70%); height: auto; display: block; }

/* Fiche « en bref » */
.hm-fiche { border-top: 1px solid rgba(201,168,83,.55); }
.hm-fiche div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid rgba(237,231,218,.12); }
.hm-fiche dt { font-size: .7rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(237,231,218,.45); padding-top: .2rem; }
.hm-fiche dd { margin: 0; color: #EDE7DA; font-size: .95rem; line-height: 1.5; }
.hm-fiche dd small { display: block; color: rgba(237,231,218,.5); font-size: .8rem; }

/* ── Sections ────────────────────────────────────────────── */
.hm-sec { padding: 6rem 0; border-bottom: 1px solid var(--line); }
.hm-sec-alt { background: var(--paper-2); }
.hm-tete { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 2rem; margin-bottom: 3.5rem; align-items: baseline; }
.hm-num { font-family: var(--serif); font-size: .95rem; color: var(--gold); }
.hm-num b { display: block; font-weight: 400; font-size: .72rem; font-family: inherit; letter-spacing: .16em; text-transform: uppercase; color: var(--mute); margin-top: .35rem; font-family: system-ui, sans-serif; }
.hm-tete h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 350; font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.1; letter-spacing: -.02em; color: var(--ink); max-width: 22ch; }
.hm-tete p { color: var(--ink-2); line-height: 1.75; max-width: 40rem; margin-top: 1rem; }

/* Prestations : tuiles par besoin, pictogrammes en traits fins */
.hm { --carte: #FFFDF9; }
[data-theme="dark"] .hm { --carte: #1A1712; }
.hm-besoins { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
.hm-besoin {
  display: flex; flex-direction: column; padding: 1.75rem 1.5rem 1.5rem; background: var(--carte);
  border: 1px solid var(--line); border-radius: 4px; text-decoration: none; color: var(--ink);
  transition: border-color .25s, transform .25s, box-shadow .25s;
}
.hm-besoin:hover { border-color: var(--gold-2); transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(23,21,15,.45); }
.hm-ico {
  width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%;
  border: 1px solid rgba(201,168,83,.45); color: var(--gold); transition: background .25s, color .25s;
}
.hm-ico svg { width: 32px; height: 32px; }
.hm-besoin:hover .hm-ico { background: var(--gold-2); color: #17150F; border-color: var(--gold-2); }
.hm-situation { margin-top: 1.5rem; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hm-besoin h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; margin: .45rem 0 1.1rem; color: var(--ink); }
.hm-besoin ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.hm-besoin li { position: relative; padding-left: 1.1rem; font-size: .9rem; line-height: 1.45; color: var(--ink-2); }
.hm-besoin li::before { content: ''; position: absolute; left: 0; top: .62em; width: .55rem; height: 1px; background: var(--gold); }
.hm-voir { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .85rem; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; }
.hm-voir .hm-fleche { color: var(--gold); }

.hm-besoins-pied { display: flex; justify-content: space-between; align-items: center; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1.25rem; }
.hm-irve { display: flex; align-items: center; gap: 1rem; padding: .85rem 1.25rem .85rem .85rem; border: 1px dashed var(--line); border-radius: 4px; text-decoration: none; color: var(--ink-2); font-size: .9rem; }
.hm-irve strong { color: var(--ink); font-weight: 600; }
.hm-irve-off, .hm-irve-off strong { color: var(--mute); }
.hm-ico-s { width: 40px; height: 40px; flex-shrink: 0; }
.hm-ico-s svg { width: 21px; height: 21px; }
.hm-irve-off .hm-ico-s { color: var(--mute); border-color: var(--line); }
.hm-urgence { display: inline-flex; align-items: center; gap: .65rem; text-decoration: none; color: var(--ink-2); font-size: .9rem; }
.hm-urgence strong { color: var(--ink); font-family: var(--serif); font-weight: 400; font-size: 1.1rem; border-bottom: 1px solid var(--gold); }
.hm-point { width: 8px; height: 8px; border-radius: 50%; background: #C0392B; box-shadow: 0 0 0 4px rgba(192,57,43,.15); flex-shrink: 0; }

/* Méthode */
.hm-etapes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.hm-etape { padding: 2rem 2rem 0 0; }
.hm-etape + .hm-etape { padding-left: 2rem; border-left: 1px solid var(--line); }
.hm-etape-n { font-family: var(--serif); font-weight: 300; font-size: 3rem; line-height: 1; color: var(--gold); }
.hm-etape h3 { font-size: 1.05rem; font-weight: 700; margin: 1.25rem 0 .6rem; color: var(--ink); }
.hm-etape p { color: var(--ink-2); line-height: 1.7; font-size: .95rem; }

/* À propos */
.hm-apropos { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 5rem; }
.hm-citation { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; font-size: clamp(1.6rem, 2.8vw, 2.25rem); line-height: 1.3; color: var(--ink); letter-spacing: -.01em; }
.hm-citation::before { content: '«\00a0'; color: var(--gold); }
.hm-citation::after  { content: '\00a0»'; color: var(--gold); }
.hm-signature { margin-top: 2rem; display: flex; align-items: center; gap: 1rem; color: var(--ink-2); }
.hm-signature::before { content: ''; width: 2.5rem; height: 1px; background: var(--gold); }
.hm-signature strong { color: var(--ink); font-weight: 600; }
.hm-apropos-txt p { color: var(--ink-2); line-height: 1.8; margin-bottom: 1.25rem; }
.hm-faits { margin-top: 2rem; border-top: 1px solid var(--line); }
.hm-faits div { display: flex; justify-content: space-between; gap: 1.5rem; padding: .9rem 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.hm-faits dt { color: var(--mute); }
.hm-faits dd { margin: 0; color: var(--ink); font-weight: 600; text-align: right; }

/* Zone */
.hm-zone { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 0 2rem; border-top: 1px solid var(--line); }
.hm-zone div { padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.hm-zone h3 { font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); margin-bottom: .6rem; }
.hm-zone p { color: var(--ink-2); line-height: 1.7; font-size: .95rem; }
.hm-lien { display: inline-flex; align-items: center; gap: .6rem; margin-top: 2rem; font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--gold); padding-bottom: .2rem; color: var(--ink) !important; }

/* Avis */
.hm-avis { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 3rem; }
.hm-avis figure { margin: 0; border-top: 1px solid var(--ink); padding-top: 1.5rem; }
.hm-avis blockquote { font-family: var(--serif); font-weight: 350; font-size: 1.2rem; line-height: 1.55; color: var(--ink); margin: 0; }
.hm-avis figcaption { margin-top: 1.25rem; font-size: .85rem; color: var(--mute); }
.hm-avis figcaption strong { color: var(--ink); font-weight: 600; }
.hm-etoiles { color: var(--gold); letter-spacing: .15em; font-size: .85rem; margin-bottom: .9rem; }
.hm-etoiles .off { opacity: .25; }
.hm-moyenne { font-family: var(--serif); color: var(--gold); }

/* Appel final */
.hm-fin { background: var(--night); color: #EDE7DA; padding: 6rem 0; }
.hm-fin-in { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 3rem; align-items: end; }
.hm-fin h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.08; letter-spacing: -.02em; color: #F6F1E6; }
.hm-fin h2 em { font-style: italic; color: var(--gold-2); }
.hm-fin p { color: rgba(237,231,218,.65); margin-top: 1.25rem; line-height: 1.7; max-width: 32rem; }
.hm-fin-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }

/* ── Animation du héros ─────────────────────────────────────
   Circuit doré qui se dessine + impulsion qui le parcourt, titre mot par mot, puis le reste en cascade.
   Désactivée si l'utilisateur limite les animations (le contenu s'affiche alors directement). */
.hm-hero { position: relative; overflow: hidden; isolation: isolate; }
.hm-hero-in { position: relative; z-index: 1; }
.hm-circuit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hm-trace { stroke: rgba(201,168,83,.32); stroke-width: 1.2; }
.hm-trace-2, .hm-trace-3 { stroke: rgba(201,168,83,.18); }
.hm-noeuds circle { fill: #100F0C; stroke: rgba(201,168,83,.55); stroke-width: 1.2; }
.hm-impulsion { fill: #F3D98B; filter: drop-shadow(0 0 6px rgba(243,217,139,.9)) drop-shadow(0 0 14px rgba(201,168,83,.6)); }
.hm-mot { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .08em .1em 0; margin: 0 -.08em -.1em 0; }
.hm-mot > span { display: inline-block; }

@media (prefers-reduced-motion: no-preference) {
  .hm-trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: hmTrace 2.4s cubic-bezier(.6,0,.2,1) .2s forwards; }
  .hm-trace-2 { animation-delay: 1.1s; animation-duration: 1.4s; }
  .hm-trace-3 { animation-delay: 1.4s; animation-duration: 1.6s; }
  .hm-noeuds circle { opacity: 0; animation: hmApparait .5s ease forwards; animation-delay: 1.6s; }
  .hm-noeuds circle:nth-child(2) { animation-delay: 1.9s; }
  .hm-noeuds circle:nth-child(n+3) { animation-delay: 2.2s; }
  .hm-impulsion { opacity: 0; animation: hmApparait .4s ease 2.4s forwards; }
  .hm-mot > span { transform: translateY(105%); animation: hmMot .9s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: calc(.15s + var(--i) * 55ms); }
  .hm-apparait { opacity: 0; transform: translateY(12px); animation: hmMonte .8s cubic-bezier(.2,.75,.2,1) forwards; animation-delay: var(--d, 0s); }
  @keyframes hmTrace   { to { stroke-dashoffset: 0; } }
  @keyframes hmMot     { to { transform: none; } }
  @keyframes hmMonte   { to { opacity: 1; transform: none; } }
  @keyframes hmApparait { to { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) { .hm-impulsion { display: none; } }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 960px) {
  .hm-hero-in, .hm-apropos, .hm-fin-in { grid-template-columns: 1fr; gap: 3rem; }
  .hm-hero-in { padding: 4.5rem 0 4rem; }
  .hm-circuit { display: none; }   /* sur petit écran, le tracé croiserait le texte */
  .hm-tete { grid-template-columns: 1fr; gap: .75rem; }
  .hm-besoins { grid-template-columns: 1fr 1fr; }
  .hm-etapes { grid-template-columns: 1fr 1fr; }
  .hm-etape:nth-child(3) { padding-left: 0; border-left: none; }
  .hm-etape:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 2rem; }
}
@media (max-width: 600px) {
  .hm-wrap { padding-left: 1rem; padding-right: 1rem; }
  .hm-hero-in { padding-top: 3.5rem; padding-bottom: 3.5rem; }
  .hm-sec, .hm-fin { padding: 4.5rem 0; }
  .hm-besoins { grid-template-columns: 1fr; gap: 1rem; }
  .hm-irve { width: 100%; }
  .hm-etapes { grid-template-columns: 1fr; }
  .hm-etape, .hm-etape + .hm-etape { padding: 1.75rem 0 0; border-left: none; }
  .hm-etape + .hm-etape { border-top: 1px solid var(--line); margin-top: 1.75rem; }
  .hm-fiche div { grid-template-columns: 1fr; gap: .2rem; }
  .hm-btn { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════════════════════
   PAGES INTÉRIEURES (services, zone, pages légales, connexion)
════════════════════════════════════════════════════════════ */

/* Haut de page compact (sans fiche) + fil d'Ariane */
.hm-hero-court .hm-hero-in { grid-template-columns: minmax(0, 1fr); padding: 5rem 0 4.5rem; }
.hm-hero-court h1 { font-size: clamp(2.2rem, 4.8vw, 3.8rem); max-width: 20ch; }
.hm-fil { display: flex; gap: .55rem; align-items: center; margin-bottom: 1.4rem; font-size: .8rem; color: rgba(237,231,218,.5); }
.hm-fil a { color: rgba(237,231,218,.7) !important; text-decoration: none; }
.hm-fil a:hover { color: #F6F1E6 !important; }
.hm-fil span { color: rgba(201,168,83,.6); }
.hm-hero .hm-ico { color: var(--gold-2); border-color: rgba(201,168,83,.5); }
.hm-ico-xl { width: 84px; height: 84px; margin-bottom: 2rem; }
.hm-ico-xl svg { width: 40px; height: 40px; }

/* Colonnes de contenu (listes éditoriales) */
.hm-colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.25rem; }
.hm-colonne { padding: 2rem 1.75rem; background: var(--carte); border: 1px solid var(--line); border-radius: 4px; }
.hm-colonne h3 { font-family: var(--serif); font-weight: 400; font-size: 1.45rem; line-height: 1.2; color: var(--ink); margin-bottom: 1.25rem; }
.hm-liste { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .75rem; }
.hm-liste li { position: relative; padding-left: 1.25rem; line-height: 1.55; color: var(--ink-2); }
.hm-liste li::before { content: ''; position: absolute; left: 0; top: .72em; width: .6rem; height: 1px; background: var(--gold); }

/* Questions fréquentes */
.hm-faq { border-top: 1px solid var(--ink); }
.hm-faq details { border-bottom: 1px solid var(--line); }
.hm-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: 1.5rem 0; font-family: var(--serif); font-weight: 400; font-size: 1.3rem; line-height: 1.3; color: var(--ink); }
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after { content: '+'; font-family: system-ui, sans-serif; font-size: 1.4rem; color: var(--gold); transition: transform .25s; flex-shrink: 0; }
.hm-faq details[open] summary::after { transform: rotate(45deg); }
.hm-faq details p { color: var(--ink-2); line-height: 1.8; max-width: 46rem; padding-bottom: 1.6rem; margin: 0; }

/* Communes (page zone) */
.hm-communes { display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.hm-communes span { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 99px; background: var(--carte); font-size: .875rem; color: var(--ink-2); }

/* Texte légal : sections numérotées, filets fins */
.hm-texte { max-width: 50rem; }
.hm-texte section { padding: 2.25rem 0; border-top: 1px solid var(--line); scroll-margin-top: 90px; }
.hm-texte section:first-child { border-top: 1px solid var(--ink); }
.hm-texte h2 { font-family: var(--serif); font-weight: 400; font-size: 1.55rem; line-height: 1.25; color: var(--ink) !important; margin-bottom: 1rem; }
.hm-texte p, .hm-texte li, .hm-texte dd { color: var(--ink-2) !important; line-height: 1.8; }
.hm-texte p + p { margin-top: .8rem; }
.hm-texte ul { padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; }
.hm-texte dl { display: grid; grid-template-columns: minmax(150px, 230px) 1fr; gap: .6rem 1.5rem; }
.hm-texte dt { font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); padding-top: .3rem; }
.hm-texte dd { margin: 0; overflow-wrap: anywhere; }
.hm-texte a { color: var(--gold) !important; text-decoration: underline; text-underline-offset: 3px; }
.hm-texte .ml-manque { color: #C0392B; font-weight: 700; }
.hm-texte .hm-note { margin-top: 2.5rem; font-size: .9rem; color: var(--mute) !important; }

/* Pages de connexion : panneau nuit à gauche, formulaire sur papier à droite */
.hm-auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); min-height: calc(100vh - var(--header-height)); }
.hm-auth-nuit { position: relative; overflow: hidden; background: var(--night); color: #EDE7DA; padding: 4.5rem 3.5rem; display: flex; flex-direction: column; justify-content: center; }
.hm-auth-nuit > :not(svg) { position: relative; z-index: 1; max-width: 26rem; }
.hm-auth-nuit h2 { font-family: var(--serif); font-optical-sizing: auto; font-weight: 300; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1.08; letter-spacing: -.02em; color: #F6F1E6 !important; margin: 1.4rem 0 1.25rem; }
.hm-auth-nuit h2 em { font-style: italic; color: var(--gold-2); }
.hm-auth-nuit p { color: rgba(237,231,218,.68) !important; line-height: 1.75; }
.hm-auth-points { list-style: none; padding: 0; margin: 2rem 0 0; border-top: 1px solid rgba(237,231,218,.14); }
.hm-auth-points li { display: flex; gap: .9rem; align-items: baseline; padding: .95rem 0; border-bottom: 1px solid rgba(237,231,218,.1); color: #EDE7DA; font-size: .95rem; }
.hm-auth-points li span { font-family: var(--serif); color: var(--gold-2); font-size: .9rem; min-width: 1.5rem; }
.hm-auth-form { background: var(--paper); display: flex; align-items: center; justify-content: center; padding: 4rem 2rem; }
.hm-auth-form .auth-box { width: 100%; max-width: 440px; background: none !important; border: none !important; box-shadow: none !important; padding: 0 !important; }
.hm-auth .auth-title { font-family: var(--serif) !important; font-weight: 350 !important; font-size: 2.3rem !important; letter-spacing: -.02em; color: var(--ink) !important; margin-bottom: .5rem; }
.hm-auth .auth-sub, .hm-auth .auth-box p { color: var(--ink-2) !important; }
.hm-auth .auth-icon-header { display: none; }
.hm-auth label { color: var(--ink) !important; font-weight: 600 !important; font-size: .85rem !important; }
.hm-auth .form-control, .hm-auth .input-group { background: #FFFDF9 !important; border: 1px solid var(--line) !important; border-radius: 2px !important; color: var(--ink) !important; box-shadow: none !important; }
.hm-auth .input-group .form-control { border: none !important; }
.hm-auth .form-control:focus, .hm-auth .input-group:focus-within { border-color: var(--gold-2) !important; box-shadow: 0 0 0 3px rgba(201,168,83,.18) !important; }
.hm-auth .input-icon, .hm-auth .input-icon-right { color: var(--mute) !important; }
.hm-auth .btn-primary { background: var(--gold-2) !important; color: #17150F !important; border-radius: 2px !important; box-shadow: none !important; font-weight: 700 !important; padding: .95rem 1.2rem !important; }
.hm-auth .btn-primary:hover { background: #DCC07A !important; transform: none !important; }
.hm-auth .btn-outline { background: transparent !important; color: var(--ink) !important; border: 1px solid var(--ink) !important; border-radius: 2px !important; }
.hm-auth .btn-outline:hover { background: var(--ink) !important; color: var(--paper) !important; }
.hm-auth .auth-box a:not(.btn) { color: var(--gold) !important; font-weight: 600; }
.hm-auth .form-divider span { color: var(--mute) !important; }
.hm-auth .form-divider::before, .hm-auth .form-divider::after { background: var(--line) !important; }
.hm-auth .alert { border-radius: 2px !important; }
.hm-auth .hm-retour { display: inline-block; margin-top: 1.75rem; font-size: .85rem; }

@media (max-width: 960px) {
  .hm-auth { grid-template-columns: 1fr; }
  .hm-auth-nuit { padding: 3rem 1.5rem 2.5rem; }
  .hm-auth-nuit .hm-auth-points { display: none; }
  .hm-auth-form { padding: 2.5rem 1rem 3.5rem; align-items: flex-start; }
  .hm-texte dl { grid-template-columns: 1fr; gap: .15rem; }
  .hm-texte dd { margin-bottom: .75rem; }
}

/* Tuiles « Voir aussi » des pages intérieures : 3 tuiles, texte court */
.hm-besoin-txt { color: var(--ink-2); font-size: .9rem; line-height: 1.6; margin: 0 0 1.5rem; }
.hm-besoins:has(> .hm-besoin:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 960px) { .hm-besoins:has(> .hm-besoin:nth-child(3):last-child) { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════════════════════
   ACCUEIL : image de fond du haut de page (néon), parallaxe au défilement
════════════════════════════════════════════════════════════ */
.hm-hero-accueil { min-height: min(820px, calc(100vh - 132px)); display: flex; align-items: center; }
.hm-hero-accueil .hm-hero-in { width: 100%; }
.hm-hero-fond {
  position: absolute; inset: -12% 0; z-index: 0; pointer-events: none; will-change: transform;
  background: url('../img/fonthero.avif') 72% 45% / auto 118% no-repeat, #0D0C09;
}
/* Voile : nuit dense à gauche (texte lisible), l'éclair reste visible à droite */
.hm-hero-fond::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(16,15,12,.97) 0%, rgba(16,15,12,.86) 34%, rgba(16,15,12,.3) 62%, rgba(16,15,12,.55) 100%),
    linear-gradient(180deg, rgba(16,15,12,0) 60%, rgba(16,15,12,.85) 100%);
}
.hm-hero-accueil .hm-fiche { background: rgba(16,15,12,.55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); padding: 0 1.25rem; }
@media (max-width: 960px) {
  .hm-hero-accueil { min-height: 0; }
  .hm-hero-fond { background-position: 50% 40%; background-size: cover; }
  .hm-hero-fond::after { background: linear-gradient(180deg, rgba(16,15,12,.5) 0%, rgba(16,15,12,.82) 55%, rgba(16,15,12,.96) 100%); }
}