/* ==========================================================================
   Les Toits de St Pierre — tokens de design
   Extraits des artboards Specs-DA1 et Specs-DA2 du canevas Claude Design,
   le 15 octobre 2026. Source : https://claude.ai/artifact/ErSHHo6yzqEAsUWTtBc6cw

   Destination : wp-content/themes/astra-child/style.css (ou un fichier
   importé par lui). Les neuf couleurs de la palette globale Astra sont
   redonnées ici en variables pour que le markup n'ait jamais à écrire un hex.
   ========================================================================== */

/* Fraunces et Work Sans ne servent qu'a la DA 2 : Astra ne les connait pas et
   ne les chargerait pas. Archivo, lui, est charge par Astra via la typographie
   globale — ne pas le re-importer ici, ce serait une requete en double. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,700&family=Work+Sans:wght@400;500;600&display=swap');

:root {
  /* --- Partagé par les deux directions ------------------------------- */
  --tsp-orange:            #F5850D; /* aplat de bouton · 7,8:1 sur noir */
  --tsp-orange-fonce:      #B9620D; /* ombre, survol */
  --tsp-orange-survol:     #FC8E17; /* survol de lien en DA 1 */
  --tsp-noir:              #0A0A0A; /* fond DA 1, bandeaux DA 2 */

  /* --- DA 1 · Nuit & Ardoise ----------------------------------------- */
  /* Accueil, les 9 prestations, FAQ, Contact, pages commune */
  --tsp-da1-fond:          #0A0A0A;
  --tsp-da1-surface:       #141413; /* cartes */
  --tsp-da1-surface-2:     #121211;
  --tsp-da1-surface-3:     #0F0E0D;
  --tsp-da1-surface-4:     #1C1A18;
  --tsp-da1-filet:         #272421; /* filets, bordures */
  --tsp-da1-filet-clair:   #2E2A26;
  --tsp-da1-bord-champ:    #3A3631; /* bordure d'input */
  --tsp-da1-bord-swatch:   #45403A;
  --tsp-da1-bord-bouton:   #55504A; /* bouton secondaire */
  --tsp-da1-titre:         #F4F5F5;
  --tsp-da1-texte:         #D8D4CE;
  --tsp-da1-texte-faible:  #AAA49C; /* 7,4:1 sur le noir */

  /* --- DA 2 · Patrimoine & Zinc --------------------------------------- */
  /* Réalisations, À propos */
  --tsp-da2-fond:          #F3EFE8; /* crème */
  --tsp-da2-fond-2:        #E9E2D6; /* bandes, pierre */
  --tsp-da2-champ:         #FFFFFF;
  --tsp-da2-filet:         #D5C9B6;
  --tsp-da2-filet-fort:    #C9BFB0;
  --tsp-da2-lien-filet:    #C08A4A;
  --tsp-da2-titre:         #1C1A17;
  --tsp-da2-texte:         #4A443C;
  --tsp-da2-texte-faible:  #5F594F; /* 6,1:1 sur le crème */
  --tsp-da2-orange-texte:  #A85608; /* texte ≥ 18 px · 4,6:1 */
  --tsp-da2-orange-petit:  #8F4906; /* sur-titres, petit texte · 5,9:1 */

  /* --- Typographie ---------------------------------------------------- */
  --tsp-font-da1:          'Archivo', system-ui, sans-serif;
  --tsp-font-da2-titre:    'Fraunces', Georgia, serif;
  --tsp-font-da2-texte:    'Work Sans', system-ui, sans-serif;

  --tsp-h1-da1:            74px;  /* 800 · interlettrage −0.025em */
  --tsp-h2-da1:            44px;  /* 800 · interlettrage −0.02em */
  --tsp-h1-da2:            68px;  /* Fraunces 600 · −0.02em · interligne 1.02 */
  --tsp-h2-da2:            42px;  /* Fraunces 600 · interligne 1.12 */

  --tsp-corps-min:         16px;
  --tsp-corps-max:         20px;  /* 19px en DA 2 */
  --tsp-interligne-da1:    1.6;
  --tsp-interligne-da2:    1.65;

  --tsp-surtitre:          13px;  /* 700 · capitales · interlettrage 0.2em */
  --tsp-surtitre-suivi:    0.2em;
  --tsp-legende-da2:       17px;  /* Fraunces italique */

  /* --- Formes --------------------------------------------------------- */
  --tsp-rayon-da1:         2px;   /* boutons, champs */
  --tsp-rayon-da2:         0;     /* angles vifs */
  --tsp-bouton-y:          15px;
  --tsp-bouton-x:          26px;
  --tsp-champ-y:           13px;
  --tsp-champ-x:           14px;
  --tsp-cible-mini:        44px;  /* taille de cible tactile minimale */
}

/* ==========================================================================
   Composants · DA 1
   ========================================================================== */

.tsp-da1 {
  background: var(--tsp-da1-fond);
  color: var(--tsp-da1-texte);
  font-family: var(--tsp-font-da1);
}

.tsp-da1 .tsp-bouton {
  background: var(--tsp-orange);
  color: var(--tsp-noir);          /* jamais blanc : 2,55:1, illisible */
  border: none;
  font-weight: 700;
  font-size: 16px;
  padding: var(--tsp-bouton-y) var(--tsp-bouton-x);
  border-radius: var(--tsp-rayon-da1);
}

.tsp-da1 .tsp-bouton--secondaire {
  background: transparent;
  color: var(--tsp-da1-titre);
  border: 1px solid var(--tsp-da1-bord-bouton);
  font-weight: 600;
  padding: 14px var(--tsp-bouton-x);
}

.tsp-da1 .tsp-lien {
  color: var(--tsp-da1-titre);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--tsp-orange);
  padding-bottom: 3px;
}

.tsp-da1 .tsp-champ {
  background: var(--tsp-da1-fond);
  border: 1px solid var(--tsp-da1-bord-champ);
  color: var(--tsp-da1-titre);
  font-size: 16px;
  padding: var(--tsp-champ-y) var(--tsp-champ-x);
  border-radius: var(--tsp-rayon-da1);
}

.tsp-da1 .tsp-carte {
  background: var(--tsp-da1-surface);
  border: 1px solid var(--tsp-da1-filet);
  border-left: 3px solid var(--tsp-orange);
  padding: 20px;
}

.tsp-da1 .tsp-surtitre {
  color: var(--tsp-orange);
  font-size: var(--tsp-surtitre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tsp-surtitre-suivi);
}

/* ==========================================================================
   Composants · DA 2
   ========================================================================== */

.tsp-da2 {
  background: var(--tsp-da2-fond);
  color: var(--tsp-da2-titre);
  font-family: var(--tsp-font-da2-texte);
}

.tsp-da2 h1, .tsp-da2 h2, .tsp-da2 h3 {
  font-family: var(--tsp-font-da2-titre);
  font-weight: 600;
}

.tsp-da2 .tsp-bouton {
  background: var(--tsp-orange);
  color: var(--tsp-noir);
  border: none;
  font-weight: 600;
  font-size: 16px;
  padding: var(--tsp-bouton-y) var(--tsp-bouton-x);
  border-radius: var(--tsp-rayon-da2);
}

.tsp-da2 .tsp-bouton--secondaire {
  background: transparent;
  color: var(--tsp-da2-titre);
  border: 1px solid var(--tsp-da2-titre);
  font-weight: 500;
  padding: 14px var(--tsp-bouton-x);
}

.tsp-da2 .tsp-lien {
  color: var(--tsp-da2-orange-texte);
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid var(--tsp-da2-lien-filet);
  padding-bottom: 3px;
}
.tsp-da2 .tsp-lien:hover { color: var(--tsp-da2-orange-petit); }

.tsp-da2 .tsp-champ {
  background: var(--tsp-da2-champ);
  border: 1px solid var(--tsp-da2-filet-fort);
  color: var(--tsp-da2-titre);
  font-size: 16px;
  padding: var(--tsp-champ-y) var(--tsp-champ-x);
  border-radius: var(--tsp-rayon-da2);
}

.tsp-da2 .tsp-surtitre {
  color: var(--tsp-da2-orange-petit);
  font-size: var(--tsp-surtitre);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--tsp-surtitre-suivi);
}

.tsp-da2 .tsp-legende {
  font-family: var(--tsp-font-da2-titre);
  font-style: italic;
  font-size: var(--tsp-legende-da2);
  color: var(--tsp-da2-texte-faible);
}

/* --- Bandeau noir, en DA 2 : c'est là que vit le logo ------------------ */
.tsp-da2 .tsp-bandeau {
  background: var(--tsp-noir);
  color: var(--tsp-da1-titre);
}

/* ==========================================================================
   Pied de page — construit avec le Footer Builder d'Astra.
   Quatre colonnes de widgets en rangée principale, copyright et menu légal
   en dessous. Le fond noir est posé côté Astra ; ici, le texte et les listes.
   ========================================================================== */

.site-footer,
.site-footer .ast-builder-grid-row {
  font-family: var(--tsp-font-da1);
  color: var(--tsp-da1-texte);
}

.site-footer a {
  color: var(--tsp-da1-texte);
  text-decoration: none;
}
.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--tsp-orange);
}

.tsp-pied-titre {
  margin: 0 0 14px;
  font-size: var(--tsp-surtitre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tsp-surtitre-suivi);
  color: var(--tsp-orange);
}

.tsp-pied-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}
.tsp-pied-liste li { margin: 0; }
.tsp-pied-liste a {
  display: inline-block;
  padding: 6px 0;   /* 44 px de cible avec l'interligne */
  line-height: 1.5;
}

.tsp-pied-intro {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tsp-da1-texte);
}

.tsp-pied-legal,
.tsp-pied-note {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--tsp-da1-texte-faible);
}

.tsp-pied-contact {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.6;
}
.tsp-pied-contact a { font-weight: 700; }

.tsp-pied-horaires {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.7;
  color: var(--tsp-da1-texte-faible);
}
.tsp-pied-horaires li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-top: 1px solid var(--tsp-da1-filet);
  padding: 6px 0;
}
.tsp-pied-horaires li:first-child { border-top: none; }
.tsp-pied-horaires strong { color: var(--tsp-da1-texte); font-weight: 600; }

/* Rangée du bas : copyright et liens légaux */
.site-footer .ast-footer-copyright,
.site-footer .footer-nav-wrap {
  font-size: 14px;
  color: var(--tsp-da1-texte-faible);
}
.site-footer .footer-nav-wrap .menu-item a { padding: 6px 0; }

/* Une adresse e-mail ne doit pas casser en plein mot dans une colonne étroite */
.tsp-pied-contact a { overflow-wrap: anywhere; }

/* La ligne d'horaires passe sur deux lignes plutôt que de se comprimer */
.tsp-pied-horaires li { flex-wrap: wrap; }
.tsp-pied-horaires span { flex: 1 1 auto; }
.tsp-pied-horaires strong { flex: 0 0 auto; }

/* ==========================================================================
   En-tête — construit avec le Header Builder d'Astra.
   Logo à gauche, menu puis bouton téléphone à droite. Fond noir posé côté
   Astra ; ici le filet, le menu, le déroulant et le bouton d'appel.
   Reprend l'en-tête de l'artboard Main : liens 13 px capitales, suivi 0.1em.
   ========================================================================== */

.ast-primary-header-bar,
.ast-mobile-header-wrap .ast-primary-header-bar {
  border-bottom: 1px solid var(--tsp-da1-filet);
}

/* --- Les liens du menu --- */
.main-header-menu > .menu-item > .menu-link {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tsp-da1-titre);
}
.main-header-menu > .menu-item > .menu-link:hover,
.main-header-menu > .menu-item > .menu-link:focus-visible,
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
  color: var(--tsp-orange);
}

/* La page courante est signalée par un filet, pas par la seule couleur */
.main-header-menu > .menu-item.current-menu-item > .menu-link,
.main-header-menu > .menu-item.current-menu-ancestor > .menu-link {
  box-shadow: inset 0 -2px 0 0 var(--tsp-orange);
}

/* --- Le déroulant des neuf prestations --- */
.main-header-menu .sub-menu {
  background: var(--tsp-da1-surface);
  border: 1px solid var(--tsp-da1-filet);
}
.main-header-menu .sub-menu .menu-link {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--tsp-da1-texte);
}
.main-header-menu .sub-menu .menu-link:hover,
.main-header-menu .sub-menu .menu-link:focus-visible,
.main-header-menu .sub-menu .current-menu-item > .menu-link {
  color: var(--tsp-orange);
  background: var(--tsp-da1-surface-4);
}

/* --- Le bouton d'appel --- */
.tsp-tel {
  display: inline-block;
  background: var(--tsp-orange);
  color: var(--tsp-noir);          /* texte noir, jamais blanc */
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  padding: 14px 22px;
  border-radius: var(--tsp-rayon-da1);
  white-space: nowrap;
}
.tsp-tel:hover,
.tsp-tel:focus-visible {
  background: var(--tsp-orange-fonce);
  color: var(--tsp-noir);
}
.ast-builder-html-element { line-height: 1; }

/* --- Téléphone : le bouton d'appel reste, resserré --- */
@media (max-width: 921px) {
  .tsp-tel { font-size: 14px; padding: 11px 14px; }
}

/* --- Le panneau de menu mobile --- */
.ast-mobile-popup-drawer .ast-mobile-popup-inner,
#ast-mobile-header .ast-mobile-header-content {
  background: var(--tsp-da1-fond);
}
.ast-mobile-popup-drawer .menu-link,
#ast-mobile-header .menu-link {
  color: var(--tsp-da1-titre);
  border-bottom: 1px solid var(--tsp-da1-filet);
}
.ast-mobile-popup-drawer .menu-link:hover,
#ast-mobile-header .menu-link:hover {
  color: var(--tsp-orange);
}
.ast-mobile-menu-trigger-minimal,
.ast-mobile-menu-trigger-fill {
  color: var(--tsp-da1-titre);
}

/* --- Finitions relevées à l'écran --- */

/* Les liens légaux du pied se touchaient.
   17 octobre 2026 : ils se touchaient à nouveau. Astra 4.14.1 a retiré la
   classe « ast-footer-menu » (elle n'apparaît plus nulle part dans le
   thème) au profit de « astra-footer-horizontal-menu ». La règle ne visait
   donc plus rien. Les deux noms sont gardés : l'ancien ne coûte rien et
   couvre un éventuel retour en arrière de version. */
.site-footer .footer-nav-wrap .ast-footer-menu,
.site-footer .ast-footer-menu,
.site-footer .footer-nav-wrap .astra-footer-horizontal-menu,
.site-footer .astra-footer-horizontal-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
}

/* L'e-mail tient sur sa ligne dans une colonne étroite */
.tsp-pied-contact { font-size: 18px; }
.tsp-pied-contact a[href^="mailto:"] {
  font-size: 15px;
  font-weight: 500;
}

/* ==========================================================================
   Page d'accueil — bandes Spectra V3.
   Les couleurs viennent de la palette globale via les attributs de bloc ;
   ici seulement ce qu'un attribut de bloc ne sait pas dire.
   ========================================================================== */

/* Pas de double tiret dans un nom de classe pose en attribut de bloc : le
   serialiseur de Gutenberg echappe « -- » en « u002du002d », et la regle ne
   matche plus jamais. Un seul tiret. */
.tsp-bande-filet { border-top: 1px solid var(--tsp-da1-filet); }

/* --- Le heros, sur photo assombrie --- */
.tsp-bande-tete { justify-content: center; }
.tsp-bande-tete .tsp-h1,
.tsp-bande-tete .tsp-chapeau { text-shadow: 0 1px 24px rgba(10, 10, 10, 0.55); }

/* --- Les trois chantiers de la bande Realisations --- */
figure.tsp-chantier { margin: 0; }
figure.tsp-chantier img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: cover;
  border: 1px solid var(--tsp-da1-filet);
}
figure.tsp-chantier figcaption {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--tsp-da1-texte-faible);
  text-align: left;
}

.tsp-surtitre {
  font-size: var(--tsp-surtitre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tsp-surtitre-suivi);
  margin: 0;
}

.tsp-chapeau {
  font-size: 20px;
  line-height: 1.55;
  max-width: 46rem;
}

/* Un texte courant ne court jamais sur toute la largeur */
.tsp-texte { max-width: 46rem; }

.tsp-faits {
  font-size: 14px;
  letter-spacing: 0.04em;
  margin-top: 4px;
}

.tsp-communes {
  font-size: 19px;
  line-height: 1.7;
  max-width: 46rem;
}

/* --- Le bouton secondaire est en contour, pas en aplat --- */
a.wp-block-spectra-button.tsp-bouton-secondaire,
.wp-block-spectra-buttons a.tsp-bouton-secondaire {
  background: transparent;
  border: 1px solid var(--tsp-da1-bord-bouton);
}
a.wp-block-spectra-button.tsp-bouton-secondaire:hover,
.wp-block-spectra-buttons a.tsp-bouton-secondaire:hover {
  background: var(--tsp-da1-surface);
  border-color: var(--tsp-da1-titre);
}

/* --- Les neuf cartes de prestation --- */
/* Astra souligne les liens de contenu avec « .entry-content a », plus
   specifique que « a.tsp-carte ». Comme un soulignement se propage a tout le
   contenu du lien, la carte entiere ressortait soulignee. */
.entry-content a.tsp-carte,
a.tsp-carte.tsp-carte {
  text-decoration: none;
}

a.tsp-carte {
  text-decoration: none;
  border: 1px solid var(--tsp-da1-filet);
  transition: border-color 120ms ease, transform 120ms ease;
}
a.tsp-carte:hover,
a.tsp-carte:focus-visible {
  border-color: var(--tsp-orange);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  a.tsp-carte { transition: none; }
  a.tsp-carte:hover { transform: none; }
}
.tsp-carte-titre { font-size: 22px; margin: 0; }
.tsp-carte-texte { font-size: 15px; line-height: 1.55; margin: 0; }
.tsp-carte-cta {
  font-size: 14px;
  font-weight: 700;
  margin: 6px 0 0;
}
.entry-content a.tsp-carte:hover .tsp-carte-cta,
a.tsp-carte:hover .tsp-carte-cta { text-decoration: underline; }

/* --- Les trois arguments --- */
.tsp-argument { border-left: 3px solid var(--tsp-orange); }
.tsp-argument-titre { font-size: 20px; margin: 0; }

/* --- Le bloc En bref --- */
.tsp-enbref { border-left: 3px solid var(--tsp-da1-filet); }
.tsp-enbref p:last-child { font-size: 15px; line-height: 1.6; margin: 0; }

/* --- Le formulaire de devis sur fond sombre --- */
.tsp-formulaire .ff-el-input--label label,
.tsp-formulaire .ff-el-input--label {
  color: var(--tsp-da1-titre);
  font-weight: 600;
}
.tsp-formulaire .ff-el-form-control {
  background: var(--tsp-da1-fond);
  border: 1px solid var(--tsp-da1-bord-champ);
  color: var(--tsp-da1-titre);
  border-radius: var(--tsp-rayon-da1);
  padding: var(--tsp-champ-y) var(--tsp-champ-x);
}
.tsp-formulaire .ff-el-form-control:focus {
  border-color: var(--tsp-orange);
  outline: 2px solid var(--tsp-orange);
  outline-offset: 1px;
}
.tsp-formulaire .ff-el-input--content .ff-el-form-check-label,
.tsp-formulaire .ff_t_c label,
.tsp-formulaire .ff-el-form-check label {
  color: var(--tsp-da1-texte);
  font-size: 14px;
  line-height: 1.5;
}
.tsp-formulaire .ff-el-help-message { color: var(--tsp-da1-texte-faible); font-size: 13px; }
.tsp-formulaire .ff-btn-submit {
  background: var(--tsp-orange);
  color: var(--tsp-noir);
  font-weight: 700;
  border: none;
  border-radius: var(--tsp-rayon-da1);
  padding: var(--tsp-bouton-y) var(--tsp-bouton-x);
}
.tsp-formulaire .ff-btn-submit:hover { background: var(--tsp-orange-fonce); color: var(--tsp-noir); }

/* ==========================================================================
   Icônes — Font Awesome 6, embarqué par Spectra, posé par spectra/icon.
   Décoratives : le titre de carte porte le sens, le SVG sort en
   aria-hidden="true" et focusable="false" (mode par défaut du bloc).
   ========================================================================== */

.tsp-carte-icone,
.tsp-argument-icone,
.tsp-enbref-icone {
  margin: 0;
  line-height: 0;
}

.tsp-carte-icone { margin-bottom: 2px; }
.tsp-argument-icone { margin-bottom: 4px; }

/* Sur une carte cliquable, l'icône suit la couleur du survol */
a.tsp-carte:hover .tsp-carte-icone .spectra-icon { opacity: 0.85; }

/* En bref : l'icône et le sur-titre sur une ligne */
.tsp-enbref-tete {
  flex-direction: row;
  align-items: center;
  gap: 10px;
}
.tsp-enbref-tete .tsp-surtitre { margin: 0; }

/* ==========================================================================
   Marges du pied de page.
   Releve le 15 octobre 2026 : les rangees du Footer Builder sortaient avec
   « padding: 45px 0 » — aucune marge horizontale. Le texte de la premiere
   colonne commençait a 0 px du bord de l'ecran, sur PC comme sur telephone.
   ========================================================================== */

/* Astra centre la grille du pied avec « max-width: 1200px » et l'emporte sur
   toute regle du theme enfant. Au-dessus de 1248 px de large, ce centrage
   laisse deja 24 px de chaque cote : le pied tombe exactement sur la verticale
   des titres de section. En dessous, la grille occupe toute la largeur sans
   aucune marge, et le texte touche le bord de l'ecran.
   On n'ajoute donc la marge que la ou elle manque. */
@media (max-width: 1247px) {
  .site-footer .ast-builder-footer-grid-columns {
    padding-inline: 24px;
    box-sizing: border-box;
  }
}

/* Les colonnes respirent verticalement. Horizontalement, la gouttiere de la
   grille (50 px) suffit : une marge ici decalerait les colonnes exterieures
   par rapport aux titres de section. */
.site-footer .site-footer-section { padding-block: 4px; }

/* Sur telephone les colonnes s'empilent : filet de separation et air vertical. */
@media (max-width: 767px) {
  .site-footer .site-footer-section { padding-block: 16px; }
  .site-footer .site-primary-footer-wrap .site-footer-section + .site-footer-section {
    border-top: 1px solid var(--tsp-da1-filet);
  }
}

/* 4. La rangee du bas : copyright et liens legaux, meme alignement */
.site-footer .site-below-footer-wrap .site-footer-section {
  padding-block: 8px;
}

/* ==========================================================================
   Pages prestation — la bande « Comment nous procédons ».
   Le chiffre porte le poids visuel : quatre cartes de texte sur fond noir
   n'en avaient aucun. Archivo 800, orange de marque, et un filet qui relie
   le chiffre à sa carte. On garde le texte lisible plutôt qu'une photo en
   arrière-plan, qui se battrait avec quatre blocs de texte courts.
   ========================================================================== */

.tsp-etape {
  border-top: 2px solid var(--tsp-orange);
  position: relative;
}

.tsp-etape-num {
  margin: 0 0 2px;
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.tsp-etape-titre {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.tsp-etape-texte {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

/* Sur téléphone, le chiffre passe à côté du titre plutôt qu'au-dessus :
   quatre chiffres de 56 px empilés mangeraient tout l'écran. */
@media (max-width: 600px) {
  .tsp-etape-num { font-size: 42px; }
}

/* --------------------------------------------------------------------------
   Alignement du contenu dans les cartes de grille.

   Spectra pose « verticalAlignment: center » par defaut sur un container, ce
   qui donne « justify-content: center » dans une colonne flex. Les cartes
   d'une grille font toutes la meme hauteur, mais leur contenu est centre :
   une carte au texte plus court voit donc son titre et son numero descendre.
   Releve sur les etapes d'Ardoise, ou 03 et 04 tombaient 27 px plus bas
   que 01 et 02.

   Dans une grille de cartes, le contenu se cale en haut : c'est la ligne des
   numeros et des titres qui fait la lecture, pas le centrage de chaque boite.
   -------------------------------------------------------------------------- */

/* La classe est doublee a dessein : WordPress imprime la regle de layout du
   bloc (.wp-container-spectra-container-is-layout-xxxx) EN LIGNE dans le head,
   donc apres cette feuille. A specificite egale elle gagnerait. */
.tsp-etape.tsp-etape,
.tsp-argument.tsp-argument,
.tsp-carte.tsp-carte {
  justify-content: flex-start;
}

/* ------------------------------------------------------------------
   Pages hors prestation : FAQ, légal, plan du site, réalisations
   ------------------------------------------------------------------ */

/* Les liens du formulaire — la case RGPD pointe vers la politique de
   confidentialité, et Fluent Forms la peint en bleu par défaut. */
.tsp-formulaire a {
  color: var(--tsp-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tsp-formulaire a:hover { color: var(--tsp-orange-fonce); }
.tsp-formulaire .ff-el-tooltip svg,
.tsp-formulaire .ff-el-tooltip { color: var(--tsp-orange); fill: var(--tsp-orange); }

/* FAQ — l'accordéon de Spectra */
.tsp-faq-item { border: 1px solid var(--tsp-da1-filet); }
.tsp-faq-q { cursor: pointer; }
.tsp-faq-q:hover { background: var(--tsp-da1-surface); }
.tsp-faq-q:focus-visible { outline: 2px solid var(--tsp-orange); outline-offset: -2px; }

/* Pages légales et plan du site : du texte long, lu rarement, qui doit
   rester lisible sans effort. */
.tsp-legal .wp-block-heading,
.tsp-legal p,
.tsp-legal li { max-width: 72ch; }
.tsp-legal h2.tsp-legal-titre { margin-top: 48px; }
.tsp-legal h3.tsp-legal-titre { margin-top: 32px; font-size: 20px; }
.tsp-legal p,
.tsp-legal li { line-height: 1.7; }
.tsp-legal a,
.tsp-plan-liste a {
  color: var(--tsp-orange);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tsp-legal a:hover,
.tsp-plan-liste a:hover { color: var(--tsp-orange-fonce); }

/* Les tableaux du document légal, sur fond sombre */
.tsp-legal-tableau table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.tsp-legal-tableau th,
.tsp-legal-tableau td {
  border: 1px solid var(--tsp-da1-filet);
  padding: 12px 14px;
  vertical-align: top;
  text-align: left;
}
.tsp-legal-tableau th {
  background: var(--tsp-da1-surface);
  color: var(--tsp-da1-titre);
  font-weight: 700;
}

.tsp-plan-liste { line-height: 2; }

/* Le numéro de téléphone de la page Contact */
.tsp-tel {
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.tsp-tel a { color: inherit; text-decoration: none; }
.tsp-tel a:hover { color: var(--tsp-orange-fonce); }

@media (max-width: 600px) {
  .tsp-tel { font-size: 27px; }
  .tsp-legal-tableau table { font-size: 14px; }
  .tsp-legal-tableau th,
  .tsp-legal-tableau td { padding: 9px 10px; }
}

/* ------------------------------------------------------------------
   L'index du blog : quatre cartes d'article
   ------------------------------------------------------------------ */

/* La carte est un lien entier (htmlTag « a »), comme les neuf cartes de
   prestation : elle hérite donc de a.tsp-carte, bordure et survol compris. */
/* La carte est un conteneur flex : sans « align-self: stretch », la figure
   se dimensionne sur son contenu et la photo ne touche pas les bords. */
figure.tsp-carte-visuel {
  margin: 0;
  width: 100%;
  align-self: stretch;
}
.tsp-carte-corps { width: 100%; }
figure.tsp-carte-visuel img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-bottom: 1px solid var(--tsp-da1-filet);
}
.tsp-carte-article .tsp-carte-titre {
  font-size: 24px;
  line-height: 1.25;
}
.tsp-carte-article .tsp-carte-texte { color: var(--tsp-da1-texte-faible); }

/* Le corps de la carte est un conteneur imbriqué : la règle de grille de
   WordPress centre son contenu, d'où la classe doublée (voir § 1.11). */
.tsp-carte-corps.tsp-carte-corps { justify-content: flex-start; }

@media (max-width: 600px) {
  figure.tsp-carte-visuel img { height: 180px; }
  .tsp-carte-article .tsp-carte-titre { font-size: 21px; }
}

/* ==========================================================================
   Pied de page · réseaux sociaux
   Ajoutés le 17 octobre 2026, dans la colonne « Contact et horaires » :
   c'est là que se trouvent déjà les deux autres façons de joindre
   l'entreprise. Les glyphes sortent du jeu SVG d'Astra
   (assets/svg/svgs.json) plutôt que d'un tracé réécrit à la main, pour que
   l'icône reste la même si un composant social natif est ajouté à
   l'en-tête plus tard.
   ========================================================================== */

.tsp-pied-social-label {
  margin: 20px 0 0;
  font-size: var(--tsp-surtitre);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tsp-surtitre-suivi);
  /* Gris et non orange : le titre de la colonne garde l'orange pour lui. */
  color: var(--tsp-da1-texte-faible);
}

/* Classe doublée (voir § 1.11) : Astra pose « .widget ul { margin: 0 } »,
   plus spécifique qu'une classe seule. Sans ce doublement, les deux marges
   ci-dessous sont ignorées — constaté à l'écran le 17 octobre 2026. */
.tsp-pied-social.tsp-pied-social {
  display: flex;
  gap: 4px;
  padding: 0;
  list-style: none;
  /* La cible tactile fait 44 px pour un glyphe de 21 : 11 px de vide de
     chaque côté. Sans ce décalage, la première icône paraît rentrée par
     rapport au texte de la colonne. */
  margin: 6px 0 0 -11px;
}
.tsp-pied-social li { margin: 0; }

.tsp-pied-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--tsp-cible-mini);
  height: var(--tsp-cible-mini);
  color: var(--tsp-da1-texte-faible);
}

/* Le SVG porte fill="currentColor" : le survol orange hérite de
   « .site-footer a:hover », rien à redéclarer ici. */

/* Un lien sans texte a besoin d'un contour au clavier : la couleur seule ne
   se voit pas sur un glyphe de 21 px. */
.tsp-pied-social a:focus-visible {
  outline: 2px solid var(--tsp-orange);
  outline-offset: 2px;
  border-radius: var(--tsp-rayon-da1);
}