/*
Theme Name: ESDI Starter — TOR Bâtiment
Theme URI: https://esdi.pro
Author: ESDI
Author URI: https://esdi.pro
Description: Déclinaison du starter ESDI pour TOR Bâtiment — direction « Carnet de Chantier » (charte validée le 11/09/2026) : papier chaud, bleu de travail, or en filets et jalons.
Requires at least: 6.6
Tested up to: 6.9
Requires PHP: 8.1
Version: 0.4.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: esdi-starter
*/

/* Les styles structurants vivent dans theme.json.
   Ici : les détails de la direction « Carnet de Chantier » non exprimables en JSON.
   Référence : sites/tor-batiment/charte.md */

:root {
  --tor-papier: #f6f4f0;
  --tor-papier-2: #ece8e1;
  --tor-surface: #fff;
  --tor-encre: #151a22;
  --tor-encre-2: #4a5262;
  --tor-bleu: #1e3f6f;
  --tor-bleu-clair: #2c5697;
  --tor-or: #c49a64;
  --tor-or-texte: #7e6030;
  --tor-trait: #d6d0c6;
  --tor-champ: #8a8474;
  --tor-erreur: #a32b25;
  --tor-succes: #1e6b4f;
  --tor-charbon: #0d0c0c;
  --tor-rayon-carte: 12px;
  --tor-rayon-champ: 8px;
  --tor-ombre: 0 4px 14px rgb(21 26 34 / 8%);
  --tor-ombre-haute: 0 8px 22px rgb(21 26 34 / 12%);
}

/* --------------------------------------------------------------------------
   Bandeau charbon — le SEUL endroit sombre du site (charte).
   Le logo n'est jamais posé sur fond clair : or sur blanc = 2,6:1.
   -------------------------------------------------------------------------- */
.tor-bandeau {
  background-color: var(--tor-charbon);
  color: #ece8e1;
}
.tor-bandeau a { color: #ece8e1; }
.tor-bandeau a:hover { color: var(--tor-or); }

/* Filet or sous le bandeau d'en-tête : le fil conducteur du logo. */
.tor-bandeau--header {
  border-bottom: 2px solid var(--tor-or);
}

/* --------------------------------------------------------------------------
   Logo — celui du client, repris tel quel : seul le fond a été détouré, aucun
   pixel du dessin n'est modifié. Il ne va que sur le bandeau charbon, jamais
   sur fond clair (or sur blanc = 2,6:1, charte).
   -------------------------------------------------------------------------- */
.tor-logo img,
.wp-block-site-logo img {
  height: auto;
  /* Le logo porte déjà son propre relief : pas d'arrondi ni d'ombre ajoutés,
     contrairement aux images de contenu. */
  border-radius: 0;
  box-shadow: none;
}

.tor-logo a:focus-visible img {
  outline: 2px solid var(--tor-or);
  outline-offset: 3px;
}

/* Sur mobile, le logo se réduit pour laisser la place au bouton de menu. */
@media (max-width: 600px) {
  .esdi-header .tor-logo img,
  .esdi-header .wp-block-site-logo img {
    width: 140px;
  }
}

/* --------------------------------------------------------------------------
   Cartes — blanc sur papier, arrondi 12px, ombre douce.
   Seule direction des trois à autoriser une ombre (jamais portée loin).
   -------------------------------------------------------------------------- */
.esdi-card,
.tor-card {
  background-color: var(--tor-surface);
  border: 1px solid var(--tor-trait);
  border-radius: var(--tor-rayon-carte);
  box-shadow: var(--tor-ombre);
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

/* Les cartes se soulèvent de 2px au survol, l'ombre s'étend (charte). */
.esdi-card:hover,
.tor-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--tor-ombre-haute);
}

/* Filet or en tête de carte — l'or en graphique, jamais en texte. */
.tor-card--filet {
  border-top: 3px solid var(--tor-or);
}

/* --------------------------------------------------------------------------
   Étapes du chantier — le cœur de la direction retenue.
   Numéro en bleu de travail, jalon or entre les étapes.
   -------------------------------------------------------------------------- */
.tor-etape__numero {
  font-family: Archivo, sans-serif;
  font-weight: 800;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tor-bleu);
}

/* Point or devant chaque libellé (charte : « point or devant chaque libellé »). */
.tor-libelle {
  font-family: Archivo, sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tor-encre-2);
}
.tor-libelle::before {
  content: "·";
  margin-right: 0.5em;
  color: var(--tor-or);
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   Boutons — pilule, léger ressort autorisé (charte : bounce 0,15).
   -------------------------------------------------------------------------- */
.wp-block-button__link {
  transition: transform 0.2s cubic-bezier(0.34, 1.15, 0.64, 1),
    box-shadow 0.2s ease-out, background-color 0.2s ease-out;
}
.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--tor-ombre);
}
.wp-block-button__link:active {
  transform: translateY(0);
  box-shadow: none;
}

/* Bouton secondaire : contour bleu sur papier. */
.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline > .wp-block-button__link:not(.has-background) {
  background-color: transparent;
  border: 2px solid var(--tor-bleu);
  color: var(--tor-bleu);
}
.is-style-outline .wp-block-button__link:hover {
  background-color: var(--tor-bleu);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.wp-block-navigation a {
  text-decoration: none;
  transition: color 0.2s ease-out;
}
.wp-block-navigation a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* --------------------------------------------------------------------------
   Images — arrondi 12px comme les cartes.
   -------------------------------------------------------------------------- */
.wp-block-image img,
.wp-block-gallery .wp-block-image img,
.wp-block-post-featured-image img {
  border-radius: var(--tor-rayon-carte);
}

/* --------------------------------------------------------------------------
   Formulaires (Fluent Forms) — champs 8px, bordure terre, focus bleu.
   -------------------------------------------------------------------------- */
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="number"],
.fluentform select,
.fluentform textarea {
  background-color: var(--tor-surface);
  border: 1px solid var(--tor-champ);
  border-radius: var(--tor-rayon-champ);
  color: var(--tor-encre);
  font-family: "IBM Plex Sans", sans-serif;
  padding: 0.7rem 0.9rem;
  transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out;
}
.fluentform input:focus,
.fluentform select:focus,
.fluentform textarea:focus {
  border-color: var(--tor-bleu);
  box-shadow: 0 0 0 3px rgb(30 63 111 / 15%);
  outline: none;
}
.fluentform .ff-el-form-check-label,
.fluentform .ff-el-input--label label {
  font-family: Archivo, sans-serif;
  font-weight: 600;
  color: var(--tor-encre);
}
.fluentform .ff-el-is-error .text-danger,
.fluentform .error {
  color: var(--tor-erreur);
}
.fluentform .ff-message-success {
  color: var(--tor-succes);
  border-left: 3px solid var(--tor-succes);
  padding-left: 1rem;
}
.fluentform .ff-btn-submit {
  background-color: var(--tor-bleu);
  border: none;
  border-radius: 999px;
  color: #fff;
  font-family: Archivo, sans-serif;
  font-weight: 600;
  padding: 0.8rem 1.75rem;
  transition: background-color 0.2s ease-out, transform 0.2s ease-out;
}
.fluentform .ff-btn-submit:hover {
  background-color: var(--tor-bleu-clair);
  transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   Bandes alternées papier / papier grisé pour rythmer les sections (charte).
   -------------------------------------------------------------------------- */
.tor-bande-grisee {
  background-color: var(--tor-papier-2);
}

/* Séparateur à points médians or, comme la baseline du logo. */
.tor-reassurance {
  font-family: Archivo, sans-serif;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tor-encre-2);
}
.tor-reassurance span + span::before {
  content: "·";
  margin: 0 0.75em;
  color: var(--tor-or);
  font-weight: 900;
}

/* --------------------------------------------------------------------------
   Accessibilité — focus visible sur fond papier comme sur bandeau charbon.
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--tor-bleu);
  outline-offset: 2px;
}
.tor-bandeau a:focus-visible {
  outline-color: var(--tor-or);
}

/* Respect de prefers-reduced-motion : rien ne bouge. */
@media (prefers-reduced-motion: reduce) {
  .esdi-card,
  .tor-card,
  .wp-block-button__link,
  .fluentform .ff-btn-submit {
    transition: none;
  }
  .esdi-card:hover,
  .tor-card:hover,
  .wp-block-button__link:hover,
  .fluentform .ff-btn-submit:hover {
    transform: none;
  }
}