/*
 * Charte du site Debarras Herault Sud 34.
 *
 * Palette derivee du logo existant (badge rouge / noir / blanc) : on garde
 * l'identite du client, on assainit les valeurs. Le rouge pur du logo (#FF0000)
 * est illisible en interface et echoue les contrastes ; on le descend a un
 * rouge de marque utilisable sur fond clair comme sur fond sombre.
 *
 * Le vert n'apparait QUE sur les elements de valorisation / recyclage. Il ne
 * doit jamais servir d'accent generique : c'est une couleur semantique.
 */

/*----------jetons*/

:root {
    /* marque */
    --dh-rouge:        #D31017;
    --dh-rouge-fonce:  #A50D12;
    --dh-rouge-clair:  #FCEAEA;

    /* encre et fonds */
    --dh-encre:        #12100F;
    --dh-encre-2:      #3A3533;
    --dh-muted:        #6B6461;
    --dh-fond:         #F7F5F4;
    --dh-surface:      #FFFFFF;
    --dh-surface-2:    #F0EDEB;
    --dh-filet:        #E2DEDC;

    /* semantique : valorisation / recyclage uniquement */
    --dh-vert:         #3E5C4B;
    --dh-vert-clair:   #E8EFEA;

    /* mesures */
    --dh-max:          76rem;
    --dh-radius:       4px;
    --dh-ombre:        0 1px 2px rgba(18,16,15,.06), 0 10px 30px -18px rgba(18,16,15,.3);

    /* barre d'appel mobile : sert de padding bas au body */
    --dh-barre-h:      3.75rem;
}

/*----------base*/

*,
*::before,
*::after { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--dh-fond);
    color: var(--dh-encre);
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 17px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--dh-rouge-fonce); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 3px solid var(--dh-rouge);
    outline-offset: 2px;
}

h1, h2, h3, h4 {
    line-height: 1.15;
    letter-spacing: -.02em;
    font-weight: 750;
    text-wrap: balance;
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.1rem); }
h3 { font-size: 1.25rem; }

p { margin: 0 0 1.1em; }

.dh-conteneur {
    width: 100%;
    max-width: var(--dh-max);
    margin-inline: auto;
    padding-inline: 1.25rem;
}

/* Reserve la place de la barre d'appel mobile pour ne jamais masquer le footer. */
@media (max-width: 860px) {
    body { padding-bottom: var(--dh-barre-h); }
}

/*----------surtitre*/

.dh-surtitre {
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dh-rouge);
    margin: 0 0 .75rem;
}

/*----------boutons*/

.dh-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding: .8rem 1.4rem;
    border: 2px solid transparent;
    border-radius: var(--dh-radius);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.dh-btn--principal {
    background: var(--dh-rouge);
    border-color: var(--dh-rouge);
    color: #FFFFFF;
}
.dh-btn--principal:hover { background: var(--dh-rouge-fonce); border-color: var(--dh-rouge-fonce); }

.dh-btn--fantome {
    background: transparent;
    border-color: currentColor;
    color: var(--dh-encre);
}
.dh-btn--fantome:hover { background: var(--dh-encre); color: #FFFFFF; }

/*----------en-tete*/

.dh-entete {
    background: var(--dh-surface);
    border-bottom: 1px solid var(--dh-filet);
    position: sticky;
    top: 0;
    z-index: 50;
}

/*
 * Bandeau de reassurance : ce que l'ancien site n'affichait nulle part.
 * Volontairement clair. L'ancien site etait en texte blanc sur fond noir sur
 * toute sa hauteur, ce qui plombait la lisibilite ; ici aucun bloc de texte
 * n'est en inverse, le contraste fort est reserve aux boutons d'action.
 */
.dh-bandeau {
    background: var(--dh-surface-2);
    color: var(--dh-encre-2);
    border-bottom: 1px solid var(--dh-filet);
    font-size: .82rem;
    letter-spacing: .01em;
}
.dh-bandeau .dh-conteneur {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .4rem 1.5rem;
    padding-block: .45rem;
}
.dh-bandeau b { font-weight: 700; color: var(--dh-encre); }
.dh-bandeau .dh-sep { opacity: .3; }

@media (max-width: 700px) {
    .dh-bandeau .dh-sep { display: none; }
    .dh-bandeau .dh-conteneur { gap: .1rem .9rem; }
}

.dh-entete__barre {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: .85rem;
}

.dh-logo { display: inline-flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.dh-logo img { max-height: 62px; width: auto; }

.dh-logo__texte {
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--dh-encre);
    text-decoration: none;
}
.dh-logo__texte span { color: var(--dh-rouge); }

/*----------navigation*/

.dh-nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 1.4rem;
    margin: 0;
    padding: 0;
}
.dh-nav a {
    color: var(--dh-encre);
    text-decoration: none;
    font-size: .95rem;
    font-weight: 600;
    padding-block: .35rem;
    border-bottom: 2px solid transparent;
}
.dh-nav a:hover,
.dh-nav .current-menu-item > a {
    color: var(--dh-rouge);
    border-bottom-color: var(--dh-rouge);
}

/*----------appel a l'action de l'en-tete*/

.dh-entete__actions {
    display: flex;
    align-items: center;
    gap: .9rem;
    flex-shrink: 0;
}

.dh-tel {
    display: inline-flex;
    flex-direction: column;
    line-height: 1.15;
    text-decoration: none;
    color: var(--dh-encre);
}
.dh-tel__label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--dh-muted);
}
.dh-tel__num {
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -.015em;
    font-variant-numeric: tabular-nums;
    color: var(--dh-rouge);
    white-space: nowrap;
}

@media (max-width: 1040px) {
    .dh-nav { display: none; }
}
@media (max-width: 620px) {
    .dh-entete__actions .dh-btn { display: none; }
    .dh-logo img { max-height: 46px; }
}

/*----------barre d'appel mobile*/

/*
 * Le point le plus important du site : sur l'ancien, aucune page publique
 * n'affichait de numero. Ici il est atteignable au pouce en permanence.
 */
.dh-barre-mobile {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    display: none;
    background: var(--dh-surface);
    border-top: 1px solid var(--dh-filet);
    box-shadow: 0 -6px 20px -12px rgba(18,16,15,.35);
}
.dh-barre-mobile a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 1rem .5rem;
    font-size: .98rem;
    font-weight: 750;
    text-decoration: none;
    color: var(--dh-encre);
}
.dh-barre-mobile a + a {
    background: var(--dh-rouge);
    color: #FFFFFF;
}

@media (max-width: 860px) {
    .dh-barre-mobile { display: flex; }
}

/*----------pied de page*/

/*
 * Pied de page clair lui aussi. Un footer sombre reste courant, mais il
 * concentre ici beaucoup d'informations utiles (NAP, prestations, communes)
 * qu'on veut reellement lisibles, pas juste presentes.
 */
.dh-pied {
    background: var(--dh-surface);
    color: var(--dh-encre-2);
    border-top: 1px solid var(--dh-filet);
    font-size: .93rem;
    margin-top: 4rem;
}
.dh-pied a { color: var(--dh-encre-2); text-decoration: none; }
.dh-pied a:hover { color: var(--dh-rouge); text-decoration: underline; }

.dh-pied__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 2.25rem;
    padding-block: 3rem 2rem;
}

.dh-pied h3 {
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--dh-encre);
    margin: 0 0 .9rem;
    font-weight: 700;
}
.dh-pied ul { list-style: none; margin: 0; padding: 0; }
.dh-pied li { margin-bottom: .45rem; }

.dh-pied__marque { font-size: 1.05rem; font-weight: 800; color: var(--dh-encre); margin-bottom: .5rem; }

.dh-pied__note {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--dh-surface-2);
    border: 1px solid var(--dh-filet);
    border-radius: var(--dh-radius);
    padding: .35rem .65rem;
    margin-top: .75rem;
    font-size: .88rem;
    color: var(--dh-encre);
    font-weight: 600;
}
.dh-pied__etoiles { color: #E8A100; letter-spacing: .05em; }

.dh-pied__legal {
    border-top: 1px solid var(--dh-filet);
    padding-block: 1.15rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    justify-content: space-between;
    font-size: .84rem;
    color: var(--dh-muted);
}
.dh-pied__legal a { color: var(--dh-muted); }

/*----------accessibilite*/

.dh-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--dh-encre);
    color: #FFFFFF;
    padding: .7rem 1.1rem;
    z-index: 100;
}
.dh-skip:focus { left: 0; }

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   PAGE D'ACCUEIL
   Mise en page classique de site de service local : accroche
   en deux colonnes, sections alternees clair / gris tres clair,
   grilles de cartes. Rien d'experimental, l'enjeu est la
   lisibilite et le passage a l'action, pas la surprise.
   ========================================================= */

/*----------sections generiques*/

.dh-section { padding-block: 4.5rem; }
.dh-section--gris { background: var(--dh-surface-2); }
.dh-section--accent { background: var(--dh-rouge-clair); }

.dh-intro {
    font-size: 1.08rem;
    color: var(--dh-encre-2);
    max-width: 60ch;
    margin-bottom: 2.5rem;
}

.dh-sous-titre {
    font-size: 1.05rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--dh-muted);
    margin: 3rem 0 1.25rem;
}

.dh-centre { text-align: center; margin-top: 2.5rem; margin-bottom: 0; }

.dh-btn--gros { padding: 1rem 1.75rem; font-size: 1.05rem; }

/*----------accroche*/

.dh-hero {
    background: var(--dh-surface);
    border-bottom: 1px solid var(--dh-filet);
    padding-block: 3.5rem 4rem;
}

.dh-hero__grille {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: 3.5rem;
    align-items: center;
}

.dh-hero h1 { margin-bottom: 1.1rem; }

.dh-hero__chapo {
    font-size: 1.18rem;
    line-height: 1.6;
    color: var(--dh-encre-2);
    max-width: 54ch;
    margin-bottom: 1.9rem;
}

.dh-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .85rem;
    margin-bottom: 2.5rem;
}

.dh-hero__media img {
    width: 100%;
    border-radius: var(--dh-radius);
    box-shadow: var(--dh-ombre);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/*----------preuves*/

.dh-preuves {
    list-style: none;
    margin: 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--dh-filet);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}
.dh-preuves li { display: flex; flex-direction: column; }
.dh-preuves strong {
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--dh-rouge);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}
.dh-preuves span { font-size: .9rem; color: var(--dh-muted); line-height: 1.35; margin-top: .2rem; }

/*----------cartes de prestations*/

.dh-cartes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
    gap: 1rem;
}
.dh-cartes--trois { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); }

.dh-carte {
    display: block;
    background: var(--dh-surface);
    border: 1px solid var(--dh-filet);
    border-radius: var(--dh-radius);
    padding: 1.35rem 1.4rem;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.dh-carte:hover {
    border-color: var(--dh-rouge);
    box-shadow: var(--dh-ombre);
    transform: translateY(-2px);
}
.dh-carte h3 {
    font-size: 1.06rem;
    margin-bottom: .4rem;
    letter-spacing: -.01em;
}
.dh-carte p {
    margin: 0;
    font-size: .93rem;
    color: var(--dh-muted);
    line-height: 1.5;
}

/*----------rachat*/

.dh-rachat {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    gap: 3.5rem;
    align-items: center;
}
.dh-rachat h2 { margin-bottom: .9rem; }
.dh-rachat p { color: var(--dh-encre-2); max-width: 56ch; }
.dh-rachat .dh-btn { margin-top: .75rem; }
.dh-rachat__media img {
    width: 100%;
    border-radius: var(--dh-radius);
    box-shadow: var(--dh-ombre);
    object-fit: cover;
    aspect-ratio: 4 / 3;
}

/*----------etapes*/

.dh-etapes {
    list-style: none;
    margin: 2.5rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 2rem;
    counter-reset: none;
}
.dh-etapes li { position: relative; padding-top: .5rem; }
.dh-etapes__num {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--dh-rouge);
    color: #FFFFFF;
    font-weight: 800;
    font-size: 1.1rem;
    margin-bottom: .9rem;
}
.dh-etapes h3 { font-size: 1.1rem; margin-bottom: .45rem; }
.dh-etapes p { margin: 0; color: var(--dh-encre-2); font-size: .96rem; }

/*----------galerie*/

.dh-galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}
.dh-galerie figure { margin: 0; }
.dh-galerie img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--dh-radius);
    border: 1px solid var(--dh-filet);
}

/*----------avis*/

.dh-avis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.dh-avis blockquote {
    margin: 0;
    background: var(--dh-surface);
    border: 1px solid var(--dh-filet);
    border-radius: var(--dh-radius);
    padding: 1.5rem 1.6rem;
}
.dh-avis p { color: var(--dh-encre-2); }
.dh-avis p:last-of-type { margin-bottom: .9rem; }
.dh-avis__etoiles {
    color: #E8A100;
    letter-spacing: .12em;
    margin-bottom: .7rem !important;
    font-size: 1rem;
}
.dh-avis cite {
    font-style: normal;
    font-size: .88rem;
    font-weight: 650;
    color: var(--dh-muted);
}

/*----------communes*/

.dh-communes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}
.dh-communes a {
    display: inline-block;
    background: var(--dh-surface);
    border: 1px solid var(--dh-filet);
    border-radius: 999px;
    padding: .5rem 1.05rem;
    font-size: .95rem;
    font-weight: 600;
    color: var(--dh-encre);
    text-decoration: none;
}
.dh-communes a:hover { border-color: var(--dh-rouge); color: var(--dh-rouge); }

/*----------appel final*/

.dh-appel {
    background: var(--dh-surface);
    border-top: 1px solid var(--dh-filet);
    padding-block: 4rem;
    text-align: center;
}
.dh-appel h2 { margin-bottom: .6rem; }
.dh-appel p { color: var(--dh-encre-2); max-width: 48ch; margin-inline: auto; margin-bottom: 1.8rem; }
.dh-appel__actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; }

/*----------adaptations*/

@media (max-width: 900px) {
    .dh-hero__grille,
    .dh-rachat { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
    .dh-hero__media { order: -1; }
    .dh-section { padding-block: 3.25rem; }
}

@media (max-width: 520px) {
    .dh-preuves { grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: 1rem; }
    .dh-preuves strong { font-size: 1.45rem; }
    .dh-hero__actions .dh-btn,
    .dh-appel__actions .dh-btn { width: 100%; }
}

/* =========================================================
   PAGES PRESTATIONS
   ========================================================= */

/*----------colonne de lecture*/

/* Le texte courant est ramene a une largeur confortable : au-dela d'environ
   75 caracteres par ligne, l'oeil perd la ligne suivante. */
.dh-etroit { max-width: 46rem; }

.dh-bloc-texte + .dh-bloc-texte { margin-top: 2.75rem; }
.dh-bloc-texte h2 { margin-bottom: .8rem; }
.dh-bloc-texte p { color: var(--dh-encre-2); }
.dh-bloc-texte p:last-child { margin-bottom: 0; }

/*----------listes*/

.dh-liste {
    list-style: none;
    margin: 1.25rem 0 0;
    padding: 0;
    display: grid;
    gap: .65rem;
}
.dh-liste li {
    position: relative;
    padding-left: 1.75rem;
    color: var(--dh-encre-2);
}
.dh-liste li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .58em;
    width: .7rem;
    height: .7rem;
    border-radius: 2px;
    background: var(--dh-rouge);
}

/*----------questions frequentes*/

.dh-faq {
    margin-top: 1.75rem;
    border-top: 1px solid var(--dh-filet);
}
.dh-faq details {
    border-bottom: 1px solid var(--dh-filet);
}
.dh-faq summary {
    cursor: pointer;
    padding: 1.05rem 2.5rem 1.05rem 0;
    font-weight: 650;
    font-size: 1.02rem;
    list-style: none;
    position: relative;
}
.dh-faq summary::-webkit-details-marker { display: none; }

.dh-faq summary::after {
    content: "+";
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: 400;
    line-height: 1;
    color: var(--dh-rouge);
}
.dh-faq details[open] summary::after { content: "\2212"; }

.dh-faq summary:hover { color: var(--dh-rouge); }

.dh-faq__reponse { padding: 0 2.5rem 1.15rem 0; }
.dh-faq__reponse p { margin: 0; color: var(--dh-encre-2); }

/*----------legende de photo*/

/* Affichee uniquement quand le chantier a reellement eu lieu sur la commune :
   une legende localisee est un engagement, pas un element de decoration. */
.dh-hero__media figure { margin: 0; }
.dh-hero__media figcaption {
    margin-top: .6rem;
    font-size: .85rem;
    line-height: 1.4;
    color: var(--dh-muted);
    font-style: italic;
}

/* =========================================================
   FORMULAIRE DE CONTACT
   ========================================================= */

.dh-contact {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 3.5rem;
    align-items: start;
}
.dh-contact h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }

/*----------champs*/

.dh-form { margin-top: 2rem; }

.dh-form__ligne {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0 1.25rem;
}

.dh-champ { display: flex; flex-direction: column; margin-bottom: 1.35rem; }

.dh-champ label {
    font-size: .9rem;
    font-weight: 650;
    margin-bottom: .35rem;
    color: var(--dh-encre);
}
.dh-champ__note {
    font-weight: 400;
    color: var(--dh-muted);
    font-size: .85em;
}
.dh-champ__aide {
    font-size: .85rem;
    color: var(--dh-muted);
    margin-top: .4rem;
    line-height: 1.4;
}

.dh-champ input,
.dh-champ select,
.dh-champ textarea {
    font: inherit;
    font-size: 1rem;
    color: var(--dh-encre);
    background: var(--dh-surface);
    border: 1px solid var(--dh-rule, var(--dh-filet));
    border-radius: var(--dh-radius);
    padding: .7rem .85rem;
    width: 100%;
}
.dh-champ textarea { resize: vertical; min-height: 7rem; }

.dh-champ input:hover,
.dh-champ select:hover,
.dh-champ textarea:hover { border-color: var(--dh-rule-2, var(--dh-muted)); }

.dh-champ input[type="file"] { padding: .55rem; background: var(--dh-surface-2); }

.dh-champ--erreur input,
.dh-champ--erreur select,
.dh-champ--erreur textarea { border-color: var(--dh-rouge); background: var(--dh-rouge-clair); }

/*----------piege a miel*/

/* Sorti du flux plutot que display:none : certains robots ignorent les champs
   masques par display, moins souvent ceux positionnes hors ecran. */
.dh-form__piege {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/*----------envoi*/

.dh-form__pied {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.75rem;
}

.dh-form__etat { font-size: .93rem; font-weight: 600; }
.dh-form__etat--info   { color: var(--dh-muted); }
.dh-form__etat--erreur { color: var(--dh-rouge); }

.dh-form__mentions {
    font-size: .85rem;
    color: var(--dh-muted);
    margin-top: 1.25rem;
    line-height: 1.5;
}

.dh-form__merci {
    background: var(--dh-vert-clair);
    border-left: 3px solid var(--dh-vert);
    border-radius: 0 var(--dh-radius) var(--dh-radius) 0;
    padding: 1.25rem 1.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--dh-vert);
    margin: 0;
}

/*----------encarts lateraux*/

.dh-encart {
    background: var(--dh-surface);
    border: 1px solid var(--dh-filet);
    border-radius: var(--dh-radius);
    padding: 1.5rem 1.6rem;
    margin-bottom: 1.25rem;
}
.dh-encart h2 { font-size: 1.15rem; margin-bottom: .5rem; }
.dh-encart p { font-size: .95rem; color: var(--dh-encre-2); margin-bottom: 0; }
.dh-encart p + p { margin-top: .7rem; }
.dh-encart__legal { font-size: .85rem !important; color: var(--dh-muted) !important; }

.dh-contact__tel {
    display: inline-block;
    font-size: 1.75rem;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    color: var(--dh-rouge);
    text-decoration: none;
    margin-bottom: .5rem;
}
.dh-contact__tel:hover { color: var(--dh-rouge-fonce); }

@media (max-width: 900px) {
    .dh-contact { grid-template-columns: minmax(0, 1fr); gap: 2.5rem; }
}

/* =========================================================
   PAGES PIVOTS
   ========================================================= */

/*----------formules de rachat*/

.dh-formules {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: 1.25rem;
    margin-top: 2rem;
}
.dh-formule {
    background: var(--dh-surface);
    border: 1px solid var(--dh-filet);
    border-top: 3px solid var(--dh-rouge);
    border-radius: var(--dh-radius);
    padding: 1.5rem 1.6rem;
}
.dh-formule h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.dh-formule__quand {
    font-size: .9rem;
    font-weight: 650;
    color: var(--dh-rouge-fonce);
    margin-bottom: .8rem;
}
.dh-formule p { font-size: .95rem; color: var(--dh-encre-2); margin-bottom: 0; }

/*----------reperes d'entreprise*/

.dh-reperes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1px;
    background: var(--dh-filet);
    border: 1px solid var(--dh-filet);
    border-radius: var(--dh-radius);
    overflow: hidden;
    margin: 2rem 0 0;
}
.dh-reperes > div { background: var(--dh-surface); padding: 1rem 1.2rem; }
.dh-reperes dt {
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dh-muted);
    font-weight: 700;
    margin-bottom: .3rem;
}
.dh-reperes dd { margin: 0; font-size: .98rem; font-weight: 600; color: var(--dh-encre); }

/*----------avant / apres*/

.dh-avant-apres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: 1.25rem;
}
.dh-avant-apres figure { margin: 0; position: relative; }
.dh-avant-apres img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--dh-radius);
    border: 1px solid var(--dh-filet);
}
.dh-etiquette {
    position: absolute;
    top: .75rem;
    left: .75rem;
    z-index: 1;
    background: var(--dh-rouge);
    color: #FFFFFF;
    font-size: .75rem;
    font-weight: 750;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .3rem .7rem;
    border-radius: 2px;
}

/*----------information legale manquante*/

.dh-manquant {
    background: #FFF6E5;
    border-left: 3px solid #C77700;
    border-radius: 0 var(--dh-radius) var(--dh-radius) 0;
    padding: .9rem 1.1rem;
    font-size: .93rem;
    color: #6B4400;
}

/* =========================================================
   NAVIGATION : SOUS-MENUS ET PANNEAU MOBILE
   ========================================================= */

/*----------sous-menus de bureau*/

.dh-nav li { position: relative; }

.dh-nav .sub-menu {
    position: absolute;
    top: 100%;
    left: -1rem;
    z-index: 60;
    display: block;
    min-width: 15rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .45rem 0;
    margin: 0;
    background: var(--dh-surface);
    border: 1px solid var(--dh-filet);
    border-radius: var(--dh-radius);
    box-shadow: var(--dh-ombre);

    /* Masque sans retirer du flux : la transition reste possible et le
       sous-menu demeure atteignable au clavier via :focus-within. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.35rem);
    transition: opacity .12s ease, transform .12s ease, visibility .12s;
}

.dh-nav li:hover > .sub-menu,
.dh-nav li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dh-nav .sub-menu a {
    display: block;
    padding: .5rem 1.1rem;
    border-bottom: none;
    font-weight: 500;
    white-space: nowrap;
}
.dh-nav .sub-menu a:hover { background: var(--dh-surface-2); color: var(--dh-rouge); }

/* Zone tampon sous le parent : sans elle, le pointeur perd le survol dans
   l'espace vide entre l'entete et le sous-menu, qui se referme. */
.dh-nav .menu-item-has-children > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: .85rem;
}

.dh-nav .menu-item-has-children > a { position: relative; padding-right: .9rem; }
.dh-nav .menu-item-has-children > a::before {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: .38rem;
    height: .38rem;
    margin-top: -.28rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    opacity: .5;
}

/*----------bouton burger*/

.dh-burger {
    display: none;
    align-items: center;
    gap: .5rem;
    background: transparent;
    border: 1px solid var(--dh-filet);
    border-radius: var(--dh-radius);
    padding: .55rem .8rem;
    cursor: pointer;
    color: var(--dh-encre);
    font: inherit;
    font-size: .9rem;
    font-weight: 700;
}
.dh-burger__texte { line-height: 1; }

.dh-burger__trait,
.dh-burger__trait::before,
.dh-burger__trait::after {
    display: block;
    width: 1.1rem;
    height: 2px;
    background: var(--dh-encre);
    border-radius: 2px;
}
.dh-burger__trait { position: relative; }
.dh-burger__trait::before,
.dh-burger__trait::after { content: ""; position: absolute; left: 0; }
.dh-burger__trait::before { top: -.32rem; }
.dh-burger__trait::after  { top: .32rem; }

.dh-burger--ouvert .dh-burger__trait { background: transparent; }
.dh-burger--ouvert .dh-burger__trait::before { top: 0; transform: rotate(45deg); }
.dh-burger--ouvert .dh-burger__trait::after  { top: 0; transform: rotate(-45deg); }

/*----------panneau mobile*/

.dh-menu-mobile {
    border-top: 1px solid var(--dh-filet);
    background: var(--dh-surface);
    max-height: calc(100vh - 9rem);
    overflow-y: auto;
    padding-block: 1rem 1.5rem;
}
.dh-menu-mobile[hidden] { display: none; }

.dh-menu-mobile ul { list-style: none; margin: 0; padding: 0; }

.dh-menu-mobile > .dh-conteneur > ul > li { border-bottom: 1px solid var(--dh-filet); }
.dh-menu-mobile > .dh-conteneur > ul > li:last-child { border-bottom: none; }

.dh-menu-mobile a {
    display: block;
    padding: .7rem 0;
    color: var(--dh-encre);
    text-decoration: none;
    font-weight: 650;
}
.dh-menu-mobile a:hover { color: var(--dh-rouge); }

/* Sous-niveaux deplies d'office : sur mobile, obliger a ouvrir un accordeon
   pour atteindre une prestation ajoute une etape inutile. */
.dh-menu-mobile .sub-menu { padding: 0 0 .5rem .9rem; }
.dh-menu-mobile .sub-menu a { font-weight: 400; padding: .45rem 0; color: var(--dh-encre-2); }

.dh-menu-mobile__cta { width: 100%; margin-top: 1.25rem; }

/* Fige le defilement de la page derriere le panneau ouvert. */
body.dh-menu-ouvert { overflow: hidden; }

@media (max-width: 1040px) {
    .dh-burger { display: inline-flex; }
}
@media (min-width: 1041px) {
    .dh-menu-mobile { display: none !important; }
}

/*----------fil d'ariane*/

.dh-fil {
    background: var(--dh-surface);
    border-bottom: 1px solid var(--dh-filet);
    font-size: .85rem;
}
.dh-fil ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .7rem 0;
}
.dh-fil li { display: flex; align-items: center; gap: .4rem; }

/* Le chevron est purement decoratif : genere en CSS pour ne pas le faire lire
   par les lecteurs d'ecran, qui annoncent deja la structure de liste. */
.dh-fil li + li::before {
    content: "";
    width: .3rem;
    height: .3rem;
    border-right: 1.5px solid var(--dh-muted);
    border-bottom: 1.5px solid var(--dh-muted);
    transform: rotate(-45deg);
    opacity: .7;
}
.dh-fil a { color: var(--dh-muted); text-decoration: none; }
.dh-fil a:hover { color: var(--dh-rouge); text-decoration: underline; }
.dh-fil span[aria-current] { color: var(--dh-encre); font-weight: 600; }

/*----------bloc prix*/

.dh-prix {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}
.dh-prix__chiffre { display: flex; flex-direction: column; }
.dh-prix__montant {
    font-size: clamp(3rem, 8vw, 4.5rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.03em;
    color: var(--dh-rouge);
    font-variant-numeric: tabular-nums;
}
.dh-prix__unite {
    font-size: .95rem;
    font-weight: 650;
    color: var(--dh-encre-2);
    margin-top: .35rem;
}
.dh-prix__texte p { color: var(--dh-encre-2); margin-bottom: .8rem; }
.dh-prix__texte p:last-child { margin-bottom: 0; }

/*----------tableau de reperes*/

.dh-tableau {
    overflow-x: auto;
    border: 1px solid var(--dh-filet);
    border-radius: var(--dh-radius);
    background: var(--dh-surface);
}
.dh-tableau table { border-collapse: collapse; width: 100%; }
.dh-tableau th,
.dh-tableau td { text-align: left; padding: .85rem 1.1rem; border-bottom: 1px solid var(--dh-filet); }
.dh-tableau tr:last-child th,
.dh-tableau tr:last-child td { border-bottom: none; }
.dh-tableau th { font-weight: 600; color: var(--dh-encre); }
.dh-tableau td {
    font-weight: 750;
    color: var(--dh-rouge-fonce);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .dh-prix { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
}

/*----------prise de parole du dirigeant*/

.dh-signature {
    display: grid;
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
}
.dh-signature__media img {
    width: 100%;
    border-radius: var(--dh-radius);
    border: 1px solid var(--dh-filet);
}
.dh-signature__mot {
    margin: 0;
    border-left: 3px solid var(--dh-rouge);
    padding-left: 1.4rem;
}
.dh-signature__mot p {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--dh-encre);
}
.dh-signature__mot cite {
    display: block;
    font-style: normal;
    font-size: .9rem;
    font-weight: 650;
    color: var(--dh-muted);
}

@media (max-width: 760px) {
    .dh-signature { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
    .dh-signature__media { max-width: 14rem; }
}

/*----------montages avant / apres du client*/

/*
 * Images contenant les deux etats du chantier, cote a cote ou empiles selon la
 * photo. Elles ne doivent jamais etre recadrees : couper un bord revient a
 * supprimer le "Apres", c'est-a-dire tout l'interet de l'image. Les selecteurs
 * reprennent la specificite des conteneurs pour l'emporter sans !important.
 *
 * Les six montages n'ont pas le meme format (4/3, 3/2, et un portrait 9/16) :
 * d'ou "aspect-ratio: auto", chaque image gardant ses proportions.
 *
 * DEPENDANCE : "aspect-ratio: auto" n'est sain que parce que le plugin retire
 * le sizes="auto" ajoute par WordPress 6.7 (voir fonctions-medias.php). Sans ce
 * filtre, le navigateur attribue a ces images une hauteur intrinseque calculee
 * sur 100vw : un montage s'affichait 368 px de large pour 1500 px de haut. Si
 * ce filtre saute un jour, c'est ici que ca se verra.
 */
img.dh-montage,
.dh-hero__media img.dh-montage,
.dh-rachat__media img.dh-montage,
.dh-galerie img.dh-montage,
.dh-avant-apres img.dh-montage {
    /* On contraint par la LARGEUR, pas par la hauteur : sur une image
       remplacee, max-height plafonne la hauteur sans reduire la largeur
       intrinseque : la boite reste large et l'image se retrouve encadree de
       bandes vides. En bornant la largeur, la hauteur suit le format. */
    aspect-ratio: auto;
    object-fit: contain;
    height: auto;
    width: 100%;
    max-width: 23rem;
    margin-inline: auto;
    box-shadow: none;
    border-radius: var(--dh-radius);
}

/*
 * Dans la galerie, un montage garde le meme gabarit que les autres vignettes,
 * une grille dont les cellules ont des hauteurs differentes se lit mal. On
 * conserve donc le format 4/3 de la grille, mais en "contain" : l'image
 * entiere tient dans la cellule, avec un fond neutre autour, au lieu d'etre
 * recadree. C'est plus simple et plus previsible que de laisser chaque montage
 * imposer sa propre hauteur a toute la rangee.
 */
.dh-galerie img.dh-montage {
    aspect-ratio: 4 / 3;
    object-fit: contain;
    width: 100%;
    max-width: none;
    height: auto;
    background: var(--dh-surface-2);
    border: 1px solid var(--dh-filet);
}

/*----------renvoi vers la fiche Google*/

.dh-avis__lien {
    margin-top: 1.5rem;
    margin-bottom: 0;
    font-size: .95rem;
    font-weight: 600;
}
.dh-avis__lien a { color: var(--dh-rouge-fonce); }

/*----------article de conseils*/

.dh-article__media {
    margin-top: 2rem;
    max-width: 46rem;
}
.dh-article__media img {
    width: 100%;
    border-radius: var(--dh-radius);
    border: 1px solid var(--dh-filet);
}

/* Sur la liste, la carte porte un h2 : on le ramene a la taille d'un titre de
   carte pour ne pas ecraser la hierarchie visuelle de la page. */
.dh-carte h2 {
    font-size: 1.06rem;
    margin-bottom: .4rem;
    letter-spacing: -.01em;
}