/* ============================================================
 * DP UI Pack — 21 Home v2
 * Couche d'accueil : bloc d'orientation `.dph-top` + reprise en main
 * typographique du contenu existant, enveloppé dans `.dph`.
 *
 * Portée : tout est préfixé `.dph`. Une page sans ces classes rend
 * exactement comme avant. Retour arrière = supprimer ce fichier et
 * dp-home-v2.php.
 *
 * ⚠️ On ne touche NI aux images NI aux rangées Visual Composer : les
 * contraintes de largeur portent sur les blocs de texte (`.vce-text-block`),
 * jamais sur `.vce-row` ni sur `.vce-single-image`, sous peine de découper
 * la mise en page en colonnes (piège déjà rencontré sur l'autre site).
 * ============================================================ */

.dph-top {
  --dph-or: var(--dp-primary, #d97706);
  --dph-nuit: var(--dp-bg-dark, #0f172a);
  --dph-rule: rgba(15, 23, 42, .1);

  max-width: 1120px;
  margin: 24px auto 40px;
  padding: 0 18px;
  font-family: var(--dp-font, system-ui, sans-serif);
  color: var(--dp-text, #1e293b);
  text-align: left;
}

/* ---- Accroche ---------------------------------------------------------- */
.dph-intro { max-width: none; margin-bottom: 27px; }
.dph-top h2#dph-h {
  margin: 0 0 11px;
  font-size: clamp(24px, 18px + 1.5vw, 34px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--dp-text-strong, #0f172a);
  text-wrap: balance;
}
.dph-intro p {
  margin: 0;
  font-size: 17px;
  line-height: 1.68;
  color: var(--dp-text-soft, #475569);
}

/* ---- Les cinq portes --------------------------------------------------- */
/* Le visiteur arrive avec une situation, pas avec une envie de « détective ».
   On lui donne sa porte avant de lui donner du texte. */
.dph-portes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 11px;
  margin-bottom: 32px;
}
.dph-top a.dph-porte {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  border: 1px solid var(--dph-rule);
  border-left: 3px solid var(--dph-or);
  border-radius: 8px;
  background: #fff;
  text-decoration: none !important;
  transition: transform .12s ease, box-shadow .12s ease;
}
.dph-top a.dph-porte:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(15, 23, 42, .09);
}
.dph-top a.dph-porte:focus-visible { outline: 3px solid var(--dph-or); outline-offset: 3px; }
.dph-porte-t {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--dp-text-strong, #0f172a);
}
.dph-porte-d {
  font-size: 14px;
  line-height: 1.5;
  color: var(--dp-text-muted, #64748b);
}

/* ---- Appel + formulaire ------------------------------------------------ */
/* ⚠️ Première version : un pavé bleu nuit de 630 px, colonne gauche vidée aux
   deux tiers et champs de formulaire creusés en noir sur noir. Sur les pages
   villes le fond sombre fonctionne parce que le bloc est court et en fin de
   lecture ; en tête d'accueil il écrase tout. On repasse en clair, compact,
   et on garde le sombre pour le seul élément qui doit dominer : le numéro. */
/* v3 — les deux colonnes côte à côte étouffaient le formulaire (« tjr aussi
   horrible »). Une seule colonne : bandeau d'appel compact, formulaire dessous
   en grille, objections en pied. */
.dph-cta {
  display: block;
  padding: 20px 24px;
  background: #fff;
  border: 1px solid var(--dph-rule);
  border-radius: 14px;
  box-shadow: 0 2px 14px rgba(15, 23, 42, .06);
}
.dph-top .dph-cta-t {
  display: block;
  margin-bottom: 6px;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--dp-text-strong, #0f172a);
}
.dph-top .dph-cta p {
  margin: 0 0 18px;
  font-size: 16px;
  line-height: 1.62;
  color: var(--dp-text-soft, #475569) !important;
}

.dph-act { display: flex; flex-wrap: wrap; gap: 11px; }
/* Le thème pose `a{color:#db3936}` et `text-decoration:underline!important` :
   sans surcharge, le libellé des boutons devient illisible et souligné. */
.dph-top .dph-btn, .dph-top .dph-btn2 {
  display: inline-block;
  padding: 14px 26px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition: transform .12s ease, background .12s ease;
}
.dph-top .dph-btn {
  background: var(--dph-or);
  color: #1a1206 !important;
  border: 1px solid var(--dph-or);
}
.dph-top .dph-btn:hover { background: #fcd34d; color: #1a1206 !important; transform: translateY(-1px); }
.dph-top .dph-btn2 {
  background: transparent;
  color: var(--dp-text-strong, #0f172a) !important;
  border: 1px solid rgba(15, 23, 42, .3);
}
.dph-top .dph-btn2:hover { background: rgba(15, 23, 42, .05); transform: translateY(-1px); }
.dph-top .dph-btn:focus-visible, .dph-top .dph-btn2:focus-visible {
  outline: 3px solid #fcd34d; outline-offset: 3px;
}

.dph-resa { display: flex; flex-wrap: wrap; gap: 6px 19px; margin: 21px 0 0; padding: 0; list-style: none; }
.dph-top .dph-resa li {
  position: relative;
  margin: 0;
  padding: 0 0 0 22px;
  list-style: none;
  font-size: 14px;
  color: var(--dp-text-soft, #475569);
}
.dph-top .dph-resa li::before {
  content: "\2713" !important;
  position: absolute; left: 0; top: 0;
  color: var(--dp-primary, #d97706); font-weight: 700; font-size: .95em;
  background: none !important; width: auto !important; height: auto !important;
}

/* ---- Objections, sous les boutons -------------------------------------- */
.dph-obj {
  display: grid;
  gap: 0 28px;
  margin-top: 18px;
  border-top: 1px solid rgba(15, 23, 42, .1);
}
@media (min-width: 760px) { .dph-obj { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dph-obj-i { padding-top: 14px; }
.dph-top .dph-obj-q {
  display: block;
  margin-bottom: 4px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dp-text-strong, #0f172a);
}
.dph-top .dph-obj-i p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.58;
  color: var(--dp-text-soft, #475569) !important;
}

/* ---- Formulaire (Contact Form 7 du site, non modifié) ------------------ */
.dph-form {
  min-width: 0;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(15, 23, 42, .1);
}
/* CF7 rend une suite de <p><label>champ</label></p> : on en fait une grille.
   Nom et e-mail côte à côte, objet et message pleine largeur. */
.dph-form .wpcf7-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 14px;
}
.dph-form .wpcf7-form > p { margin: 0 !important; }
.dph-form .wpcf7-form > p:nth-of-type(3),
.dph-form .wpcf7-form > p:nth-of-type(4),
.dph-form .wpcf7-form > p:nth-of-type(5),
.dph-form .wpcf7-response-output { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .dph-form .wpcf7-form { grid-template-columns: minmax(0, 1fr); }
  .dph-form .wpcf7-form > p { grid-column: auto !important; }
}
.dph-top .dph-form-t {
  display: block; margin-bottom: 5px;
  font-size: 18px; font-weight: 700; color: var(--dp-text-strong, #0f172a);
}
.dph-top .dph-form-d {
  margin: 0 0 10px !important;
  font-size: 13px !important; line-height: 1.5;
  color: var(--dp-text-muted, #64748b) !important;
}
.dph-form .wpcf7 { color: var(--dp-text, #1e293b); }
.dph-form .wpcf7 p { color: var(--dp-text-soft, #475569) !important; font-size: 13px !important; font-weight: 600; letter-spacing: .01em; }
/* ⚠️ Le champ n'était pas étroit : son conteneur l'était. CF7 enveloppe
   chaque champ dans un <label> que le thème met en `inline-block`, donc
   dimensionné sur son contenu (245 px) ; le `width:100%` du champ se
   résolvait contre cette largeur-là. On ouvre d'abord les conteneurs. */
.dph-form .wpcf7 label,
.dph-form .wpcf7-form-control-wrap { display: block; width: 100%; }
/* Le thème habille ses champs en « soulignés » via `.form-group .form-control`
   (0,2,0), qui battait `.dph-form textarea` (0,1,1) : le textarea restait un
   simple trait. On passe par la classe du contrôle, qui monte à 0,3,0 et
   couvre tous les champs d'un coup. */
.dph-form .wpcf7-form-control:not([type="submit"]) {
  width: 100% !important;
  box-sizing: border-box;
  padding: 9px 12px;
  margin-top: 4px;
  border: 1px solid #cbd5e1;
  border-radius: 8px;
  background: #fff;
  color: var(--dp-text-strong, #0f172a);
  font-size: 16px;
  font-family: inherit;
  box-shadow: none;
}
.dph-form input::placeholder, .dph-form textarea::placeholder { color: #94a3b8; }
.dph-form input:focus, .dph-form textarea:focus {
  outline: 2px solid var(--dph-or); outline-offset: 1px;
  border-color: transparent; background: #fff;
}
.dph-form textarea { min-height: 84px !important; height: 84px; resize: vertical; }
.dph-form input[type="submit"] {
  width: 100%;
  grid-column: 1 / -1;
  padding: 11px 22px;
  border: 0; border-radius: 8px;
  background: var(--dph-or);
  color: #1a1206;
  font-size: 17px; font-weight: 700;
  cursor: pointer;
  transition: background .12s ease;
}
.dph-form input[type="submit"]:hover { background: #fcd34d; }
.dph-form .wpcf7-not-valid-tip { color: #b91c1c; font-size: 14px; }
.dph-form .wpcf7-response-output {
  margin: 13px 0 0 !important;
  padding: 11px 14px !important;
  border-radius: 7px;
  border-color: rgba(15, 23, 42, .25) !important;
  color: var(--dp-text, #1e293b);
  font-size: 15px;
}

/* ---- Relances intercalées ---------------------------------------------- */
.dph-relance {
  max-width: none;
  margin: 35px auto;
  padding: 16px 20px;
  background: var(--dp-primary-soft, rgba(217, 119, 6, .08));
  border-left: 3px solid var(--dp-primary, #d97706);
  border-radius: 0 8px 8px 0;
}
.dph-relance p { margin: 0 !important; font-size: 16px; line-height: 1.62; color: var(--dp-text, #1e293b); }
.dph-relance a { font-weight: 700; color: var(--dp-primary-dark, #b45309) !important; }

/* ---- Reprise en main du contenu existant ------------------------------- */
/* ⚠️ On ne contraint QUE les blocs de texte. Toucher à .vce-row ou aux
   images casserait la grille et ferait disparaître des visuels. */
.dph .vce-text-block {
  /* 66ch rendait le texte étroit au milieu d'une colonne pleine largeur
     (retour Sofiane) : on élargit à 960px, marges divisées par trois. */
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  font-size: 17px;
  line-height: 1.72;
  text-align: left;
}
.dph .vce-text-block p { margin: 0 0 1.25em; text-align: left; }
.dph .vce-text-block h2,
.dph .vce-text-block h3,
.dph .vce-text-block h4 {
  margin: 35px 0 14px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--dp-text-strong, #0f172a);
  text-wrap: balance;
}
.dph .vce-text-block h2 { font-size: 26px; padding-top: 22px; border-top: 1px solid rgba(15, 23, 42, .1); }
.dph .vce-text-block h3 { font-size: 21px; }
.dph .vce-text-block h4 { font-size: 18px; color: var(--dp-primary-dark, #b45309); }
.dph .vce-text-block h2:first-child,
.dph .vce-text-block h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- Sommaire + sections repliées (22-home-sections.js) ---------------- */
.dph-somm {
  max-width: none;
  margin: 0 auto 26px;
  padding: 18px 21px;
  background: var(--dp-bg-soft, #f8fafc);
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 10px;
}
.dph-somm-t {
  display: block;
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--dp-text-muted, #64748b);
}
.dph-somm ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 7px; }
.dph-somm li { margin: 0; padding: 0; }
.dph-somm li::before { content: none !important; }
.dph .dph-somm a {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(15, 23, 42, .12);
  border-radius: 999px;
  background: #fff;
  font-size: 15px;
  font-weight: 600;
  color: var(--dp-text, #1e293b) !important;
  text-decoration: none !important;
}
.dph .dph-somm a:hover {
  border-color: var(--dp-primary, #d97706);
  background: var(--dp-primary-soft, rgba(217, 119, 6, .08));
}

.dph details.dph-sec {
  max-width: none;
  margin: 0 auto 10px;
  border: 1px solid rgba(15, 23, 42, .1);
  border-radius: 10px;
  background: #fff;
}
.dph details.dph-sec[open] { border-color: rgba(217, 119, 6, .45); }
.dph .dph-sec-t {
  padding: 16px 19px;
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dp-text-strong, #0f172a);
  list-style: none;
  position: relative;
  padding-right: 42px;
}
.dph .dph-sec-t::-webkit-details-marker { display: none; }
.dph .dph-sec-t::after {
  content: "+";
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  font-weight: 400;
  color: var(--dp-primary, #d97706);
}
.dph details[open] .dph-sec-t::after { content: "–"; }
.dph .dph-sec-t:hover { color: var(--dp-primary-dark, #b45309); }
.dph details.dph-sec > *:not(summary) { padding: 0 19px; }
/* le h3 d'origine, conservé dans le pli pour le SEO, se fait discret :
   le summary porte déjà le titre lisible */
.dph details.dph-sec > h3 {
  margin: 3px 0 14px;
  font-size: 16px;
  text-align: left;
  color: var(--dp-text-muted, #64748b);
  border: 0;
}
/* les titres portent des <span style="font-size:14pt"> inline : sans ceci,
   le titre SEO ressort en gros centré et double le summary */
.dph details.dph-sec > h3 span {
  font-size: inherit !important;
  color: inherit !important;
}
.dph details.dph-sec > p:last-child { padding-bottom: 18px; }
.dph details.dph-sec h4 { margin-top: 19px; }

@media (max-width: 640px) {
  .dph-cta { padding: 22px 19px; }
  .dph-act { flex-direction: column; }
  .dph-top .dph-btn, .dph-top .dph-btn2 { text-align: center; }
  .dph .vce-text-block { font-size: 16px; }
  .dph .vce-text-block h2 { font-size: 22px; }
  .dph .vce-text-block h3 { font-size: 19px; }
}

/* ============================================================
 * Home : corrections ciblées, mise en page du thème INTACTE
 * (сolonne + sidebar d'origine — l'essai plein-largeur du 16/08 a été
 * rejeté par Sofiane : « t'a enlevé la sidebar pourquoi ??? »)
 * ============================================================ */

/* La bannière Hestia consommait 482 px pour une ligne de titre. */
body.home .page-header.header-small {
  height: 240px !important;
  min-height: 240px !important;
  max-height: 240px !important;
}

/* les images du corps de page : cadrées, arrondies, jamais brutes */
.dph img,
body.home .dph .vce-single-image img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
body.home .dph .vce-single-image-wrapper { margin: 24px auto; }

/* le contenu hérité : neutraliser les styles inline d'époque (texte centré,
   tailles en pt) à l'intérieur de notre périmètre uniquement */
.dph .vce-text-block [style*="text-align: center"],
.dph .vce-text-block [style*="text-align:center"] { text-align: left !important; }
.dph .vce-text-block h2 span,
.dph .vce-text-block h3 span,
.dph .vce-text-block h4 span { font-size: inherit !important; }

/* ---- Comment choisir (angle n° 1 SemRank, 16/08) ----------------------- */
.dph-choisir {
  max-width: none;
  margin: 40px 0 16px;
  padding-top: 26px;
  border-top: 1px solid rgba(15, 23, 42, .1);
  font-family: var(--dp-font, system-ui, sans-serif);
  text-align: left;
}
.dph-choisir h2 {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--dp-text-strong, #0f172a);
  text-wrap: balance;
}
.dph .dph-ch-in { margin: 0 0 18px; font-size: 16px; color: var(--dp-text-muted, #64748b); }
.dph-ch-g {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 700px) { .dph-ch-g { grid-template-columns: minmax(0, 1fr); } }
.dph-ch-i {
  padding: 16px 18px;
  border: 1px solid rgba(15, 23, 42, .08);
  border-left: 3px solid var(--dp-primary, #d97706);
  border-radius: 8px;
  background: var(--dp-bg-soft, #f8fafc);
}
.dph .dph-ch-t {
  display: block;
  margin-bottom: 4px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--dp-text-strong, #0f172a);
}
.dph .dph-ch-i p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--dp-text-soft, #475569); }