/*
Theme Name: DevThis
Theme URI: https://devthis.fr
Description: Thème enfant Twenty Twenty-Five pour DevThis, partenaire numérique externalisé des petites entreprises. Mise en page éditoriale sur fond blanc, bleu nuit et violet contrôlé, typographie Inter.
Author: DevThis
Author URI: https://devthis.fr
Template: twentytwentyfive
Version: 1.14.5
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: devthis-child
Tags: block-patterns, full-site-editing, one-column, custom-colors, custom-menu, editor-style
*/

/* ---------------------------------------------------------------------------
   Le gros du style vient de theme.json. Ce fichier ne porte que ce que
   theme.json ne sait pas exprimer : le seuil du menu mobile, les états
   d'interaction, les filets qui s'estompent et quelques repères éditoriaux.
   --------------------------------------------------------------------------- */

/* En-tête ---------------------------------------------------------------- */

.dt-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--wp--preset--color--base) 88%, transparent);
  backdrop-filter: blur(10px);
}

.dt-brand a,
.dt-brand .wp-block-site-title a {
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* Wordmark : aucun point, symbole ou ornement accolé (charte §9.3 / §13.4). */
.dt-logo-link {
  display: inline-flex;
  line-height: 0;
}

.dt-logo-link svg {
  display: block;
}

/* Menu : bascule en menu superposé dès le format tablette ----------------
   Le bloc Navigation passe en menu superposé à 600px. On étend ce seuil
   à 1024px : les intitulés des trois pages de service sont longs, le menu
   horizontal ne doit jamais déborder sur tablette. */

@media (max-width: 1023px) {
  .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
  /* :not(.disable-default-overlay) dans les règles du bloc coeur a une
     spécificité plus élevée que la nôtre : sans !important, notre padding
     et notre fond sont ignorés et le panneau colle aux bords de l'écran. */
  .wp-block-navigation__responsive-container.is-menu-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100dvh !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
    overflow-y: auto !important;
    background-color: var(--wp--preset--color--base) !important;
    color: var(--wp--preset--color--contrast) !important;
    padding: 5.5rem 1.75rem 2rem !important;
    z-index: 100000 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    width: 100%;
    padding: 0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
  }
  .wp-block-navigation__responsive-container.is-menu-open .dt-nav-cta {
    margin-top: 2rem;
  }
  .wp-block-navigation__responsive-container.is-menu-open .dt-nav-cta .wp-block-button__link {
    display: block;
    text-align: center;
    background-color: var(--wp--preset--color--accent) !important;
    border-color: var(--wp--preset--color--accent) !important;
    color: #ffffff !important;
    font-size: 1.0625rem !important;
    padding: 14px 16px !important;
  }
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  font-size: 1.375rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  border-top: 1px solid var(--wp--preset--color--border);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-of-type {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  display: block;
  padding: 16px 0 !important;
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
  color: var(--wp--preset--color--contrast);
}

/* Menu horizontal (dès 1024px) : les trois intitulés de service passent
   sur deux lignes équilibrées. Sur une seule ligne, le menu dépasserait la
   largeur du site (68rem) et renverrait « Contact » à la ligne. */
@media (min-width: 1024px) {
  .dt-main-nav .wp-block-navigation__responsive-container-content,
  .dt-main-nav .wp-block-navigation__container {
    flex-wrap: nowrap;
    align-items: center;
  }
  .dt-main-nav .wp-block-navigation-item__content {
    display: block;
    max-width: 11.5em;
    line-height: 1.3;
    text-wrap: balance;
  }
}

/* FormLayer ------------------------------------------------------------- */

/* Le formulaire est volontairement conservé clair pour la saisie, mais
   l'extension impose par défaut des libellés sombres. Sur le fond nuit du
   thème, ils deviennent illisibles sans cette adaptation locale. */
.formlayer-form .formlayer-label,
.formlayer-form .formlayer-gdpr-label {
  color: var(--wp--preset--color--contrast) !important;
  font-weight: 500;
}

.formlayer-form .required-indicator {
  color: var(--wp--preset--color--accent-light);
}

.formlayer-form .formlayer-field-wrap {
  margin-bottom: 1.25rem;
}

.formlayer-form .formlayer-input {
  border-color: var(--wp--preset--color--border) !important;
  border-radius: 8px;
}

.formlayer-form .formlayer-submit-btn {
  border: 1px solid var(--wp--preset--color--accent) !important;
  border-radius: 8px;
  background: var(--wp--preset--color--accent) !important;
  color: var(--wp--preset--color--base) !important;
  font-weight: 600;
}

.formlayer-form .formlayer-submit-btn:hover {
  background: var(--wp--preset--color--accent-light) !important;
}

/* États d'interaction ---------------------------------------------------- */

a:where(:not(.wp-element-button)):hover {
  color: var(--wp--preset--color--accent-light);
}

:where(a, button, summary, input, textarea, .wp-block-navigation-item__content):focus-visible {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.wp-element-button,
.wp-block-button__link {
  border: 1px solid var(--wp--preset--color--accent);
  background-color: transparent;
  color: var(--wp--preset--color--contrast);
  font-size: var(--wp--preset--font-size--medium);
  transition: background-color 120ms ease, border-color 120ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
  background-color: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

.wp-element-button:active,
.wp-block-button__link:active {
  background-color: color-mix(in srgb, var(--wp--preset--color--accent) 24%, transparent);
  border-color: var(--wp--preset--color--accent-light);
}

.is-style-outline > .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-element-button {
  border-color: var(--wp--preset--color--border);
}

::selection {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 35%, transparent);
}

/* Repères éditoriaux ---------------------------------------------------- */

/* Étiquette de section : texte seul, sans trait — une ligne DevThis relie ou
   guide toujours quelque chose (charte §7) ; un simple soulignement d'intertitre
   ne remplit aucune de ces fonctions. */
.dt-kicker {
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.dt-row {
  border-top: 1px solid var(--wp--preset--color--border);
}

.dt-row:last-of-type {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

h1, h2, h3, h4 {
  text-wrap: pretty;
}

/* Fil de connexion — la ligne DevThis relie, jamais décorative (charte §13.3).
   Deux usages : la convergence "quatre capacités → un interlocuteur" (points
   simples, terminaison violette = destination) et la méthode en quatre
   étapes, réellement séquentielle (points numérotés). ------------------- */

.dt-thread {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.dt-thread::before {
  content: "";
  position: absolute;
  top: 15px;
  bottom: 15px;
  left: 14px;
  width: 3px;
  background: var(--wp--preset--color--contrast);
}

.dt-thread-item {
  position: relative;
  display: flex;
  gap: 26px;
  padding: 26px 0;
  align-items: flex-start;
}

.dt-thread-item:first-child {
  padding-top: 0;
}

.dt-thread-item:last-child {
  padding-bottom: 0;
}

.dt-thread-dot {
  position: relative;
  z-index: 1;
  flex: none;
  width: 30px;
  height: 30px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--wp--preset--color--base);
  border: 2.5px solid var(--wp--preset--color--contrast);
}

.dt-thread-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}

.dt-thread-label {
  margin: 0 0 4px;
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--wp--preset--color--contrast);
}

.dt-thread-text {
  margin: 0;
  color: var(--wp--preset--color--secondary);
}

/* Liste de constats — pas une séquence, donc pas de numéro (charte : un
   numéro n'a de sens que si l'ordre porte une information). ------------- */

.dt-facts {
  margin: 0;
  padding: 0;
}

.dt-facts-item {
  padding: 26px 0;
  border-top: 1px solid var(--wp--preset--color--border);
  display: grid;
  grid-template-columns: minmax(0, 15rem) 1fr;
  gap: 28px;
}

.dt-facts-item:last-child {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.dt-facts-term {
  position: relative;
  margin: 0;
  padding-left: 34px;
  font-weight: 700;
  color: var(--wp--preset--color--contrast);
}

.dt-facts-term::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 22px;
  height: 3px;
  background: var(--wp--preset--color--accent);
}

.dt-facts-desc {
  margin: 0;
  color: var(--wp--preset--color--secondary);
}

.dt-facts-desc p {
  margin: 0 0 8px;
}

.dt-facts-desc p:last-child {
  margin-bottom: 0;
}

@media (max-width: 699px) {
  .dt-facts-item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* Hero — deux colonnes asymétriques : le texte porte le message, le schéma
   à droite le montre. Bascule en une colonne sous 900px (charte §16). ---- */

.dt-hero {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.dt-hero-copy {
  flex: 1 1 30rem;
  min-width: 0;
}

.dt-hero-visual {
  flex: 0 1 18rem;
  min-width: 0;
  margin-left: auto;
}

@media (max-width: 899px) {
  .dt-hero {
    flex-direction: column;
    align-items: stretch;
  }

  .dt-hero-visual {
    margin: var(--wp--preset--spacing--50) auto 0;
  }
}

/* Schémas orthogonaux — la grammaire graphique DevThis : traits droits,
   angles à 90°, un point violet pour une décision ou une destination
   (charte §7 et §13). Les traits sont posés en SVG ; les libellés sont du
   texte HTML positionné au-dessus, pour rester lisibles et sélectionnables
   à toutes les tailles. -------------------------------------------------- */

.dt-diagram {
  position: relative;
  width: 100%;
}

.dt-diagram svg {
  display: block;
  width: 100%;
  height: auto;
}

.dt-diagram-label {
  position: absolute;
  margin: 0;
  transform: translateY(-50%);
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.3;
  color: var(--wp--preset--color--secondary);
}

.dt-diagram-label strong {
  display: block;
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}

.dt-diagram-label--accent strong {
  color: var(--wp--preset--color--accent);
}

/* Disclosure — bloc Détails natif, réutilisé pour la FAQ et pour les quatre
   capacités : un intitulé toujours visible, un développement à la demande.
   Même traitement partout, pas un motif par section (charte §16). ------- */

.dt-accordion .wp-block-details,
.dt-accordion > details {
  border-top: 1px solid var(--wp--preset--color--border);
  padding: 20px 0;
}

.dt-accordion .wp-block-details:last-child,
.dt-accordion > details:last-child {
  border-bottom: 1px solid var(--wp--preset--color--border);
}

.dt-accordion summary {
  cursor: pointer;
  font-size: var(--wp--preset--font-size--large);
  color: var(--wp--preset--color--contrast);
}

.dt-accordion p {
  margin: 14px 0 0;
}

/* Capacités : l'intitulé (toujours visible) porte le nom et une courte
   description ; le paragraphe détaillé n'apparaît qu'à l'ouverture. ----- */

.dt-accordion--capacites summary {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: inherit;
  position: relative;
  padding-right: 2.5rem;
  list-style: none;
}

.dt-accordion--capacites summary::-webkit-details-marker {
  display: none;
}

/* Le marqueur natif disparaît avec display:flex : un indicateur +/- explicite
   le remplace, pour que l'état ouvert/fermé reste visible (charte §7). --- */
.dt-accordion--capacites summary::after {
  content: "+";
  position: absolute;
  top: 0;
  right: 0;
  font-size: var(--wp--preset--font-size--x-large);
  line-height: 1.3;
  color: var(--wp--preset--color--accent);
}

.dt-accordion--capacites details[open] summary::after {
  content: "–";
}

.dt-accordion-name {
  font-size: var(--wp--preset--font-size--x-large);
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}

.dt-accordion-tagline {
  font-size: var(--wp--preset--font-size--medium);
  font-weight: 400;
  color: var(--wp--preset--color--secondary);
}

/* Formulaire — zone de design, sans traitement ------------------------- */

.dt-form {
  display: grid;
  gap: 18px;
}

.dt-form .dt-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.dt-form label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--secondary);
}

.dt-form input,
.dt-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  font: inherit;
  color: var(--wp--preset--color--contrast);
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 8px;
}

.dt-form input::placeholder,
.dt-form textarea::placeholder {
  color: var(--wp--preset--color--muted);
}

.dt-form textarea {
  resize: vertical;
  min-height: 128px;
}

.dt-form button {
  padding: 12px 22px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  color: var(--wp--preset--color--contrast);
  background: transparent;
  border: 1px solid var(--wp--preset--color--accent);
}

.dt-form button:hover {
  background: color-mix(in srgb, var(--wp--preset--color--accent) 14%, transparent);
}

@media (max-width: 599px) {
  .dt-form .dt-form-row {
    grid-template-columns: 1fr;
  }
}

/* Article --------------------------------------------------------------- */

.wp-block-post-content blockquote,
.wp-block-quote {
  margin-inline-start: 0;
  padding-left: 24px;
  border-left: 2px solid var(--wp--preset--color--accent);
  font-size: var(--wp--preset--font-size--large);
}

.wp-block-post-title a {
  text-decoration: none;
  color: var(--wp--preset--color--contrast);
}

.wp-block-post-title a:hover {
  color: var(--wp--preset--color--accent-light);
}

.wp-block-table td,
.wp-block-table th {
  border-color: var(--wp--preset--color--border);
}

/* Aiguillage vers les pages de service --------------------------------- */

/* L'en-tête est collant : une ancre (#connecter, #reprendre…) ne doit pas
   amener son titre sous lui. */
main [id] {
  scroll-margin-top: 7rem;
}

.dt-facts-desc .dt-facts-link {
  margin-top: 10px;
  font-weight: 600;
}

/* Cartes d'entrée : le titre est le lien, toute la carte est cliquable. */
.dt-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--wp--preset--spacing--40);
  margin: var(--wp--preset--spacing--50) 0 0;
  padding: 0;
  list-style: none;
}

.dt-card {
  position: relative;
  padding: 26px 28px;
  border: 1px solid var(--wp--preset--color--border);
  border-top: 3px solid var(--wp--preset--color--accent);
  background: var(--wp--preset--color--base);
  transition: border-color 120ms ease;
}

.dt-card:hover {
  border-color: var(--wp--preset--color--accent);
}

.dt-card-title {
  margin: 0;
  font-size: var(--wp--preset--font-size--x-large);
}

.dt-card-title a {
  color: var(--wp--preset--color--contrast);
  text-decoration: none;
}

.dt-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.dt-card-title a:focus-visible {
  outline: none;
}

.dt-card:has(a:focus-visible) {
  outline: 2px solid var(--wp--preset--color--accent);
  outline-offset: 2px;
}

.dt-card-text {
  margin: 10px 0 0;
  color: var(--wp--preset--color--secondary);
}

/* Réalisations étiquetées par la page qu'elles illustrent. */
.dt-tagged-list li {
  margin-bottom: 14px;
}

.dt-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 10px;
  border: 1px solid var(--wp--preset--color--border);
  border-radius: 999px;
  font-size: var(--wp--preset--font-size--small);
  color: var(--wp--preset--color--secondary);
  text-decoration: none;
  white-space: normal;
  vertical-align: 1px;
}

.dt-tag:hover {
  border-color: var(--wp--preset--color--accent);
}

/* Pages de service ----------------------------------------------------- */

.dt-example {
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--wp--preset--color--accent);
}

.dt-example > p {
  margin-top: 8px;
  margin-bottom: 0;
}

.dt-example .dt-example-label {
  margin-top: 0;
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--wp--preset--color--muted);
}

.dt-renvoi {
  font-weight: 600;
}

.dt-services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0 var(--wp--preset--spacing--50);
  margin-top: var(--wp--preset--spacing--40);
  padding: 0;
  list-style: none;
}

.dt-services li {
  position: relative;
  padding: 18px 0 18px 34px;
  border-top: 1px solid var(--wp--preset--color--border);
  font-weight: 600;
  color: var(--wp--preset--color--contrast);
}

.dt-services li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(18px + 0.65em);
  width: 22px;
  height: 3px;
  background: var(--wp--preset--color--accent);
}

.dt-thread--compact .dt-thread-item {
  padding: 16px 0;
}

.dt-thread--compact .dt-thread-item:first-child {
  padding-top: 0;
}

.dt-thread--compact .dt-thread-item:last-child {
  padding-bottom: 0;
}

/* Liste sur une seule colonne (page Contact, colonne étroite). */
.dt-services--single {
  grid-template-columns: 1fr;
}

/* Puces violettes dans les fiches de réalisation. */
.single-realisation .wp-block-post-content li::marker {
  color: var(--wp--preset--color--accent);
}

/* Intitulés en gras des listes dans les fiches de réalisation. */
.single-realisation .wp-block-post-content li > strong:first-child {
  color: var(--wp--preset--color--accent);
}