/*
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: 1.2.1
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%);
}

/* --------------------------------------------------------------------------
   Bandeaux sombres — les deux seuls endroits sombres du site (charte).
   Le logo n'est jamais posé sur fond clair : or sur blanc = 2,6:1.

   En-tête : BLEU DE TRAVAIL (demande du client, 11/09/2026).
   Contrastes vérifiés sur #1E3F6F : menu #ECE8E1 = 8,62:1, blanc = 10,52:1,
   or = 4,09:1 (filet décoratif, pas du texte).
   Pied de page : charbon, qui reste le point d'ancrage sombre de la page.
   -------------------------------------------------------------------------- */
.tor-bandeau {
  color: #ece8e1;
}
.tor-bandeau a { color: #ece8e1; }
/* Sur charbon, l'or au survol passe (7,58:1). Sur le bleu de l'en-tête il ne
   vaut que 4,09:1 : on y passe au blanc, qui monte à 10,52:1. */
.tor-bandeau a:hover { color: var(--tor-or); }
.tor-bandeau--header a:hover { color: #fff; }

/* En-tête : bleu de travail + filet or, le fil conducteur du logo. */
.tor-bandeau--header {
  background-color: var(--tor-bleu);
  border-bottom: 2px solid var(--tor-or);
}

/* Pied de page : charbon (la classe est posée sur le groupe du footer). */
.tor-bandeau:not(.tor-bandeau--header) {
  background-color: var(--tor-charbon);
}

/* --------------------------------------------------------------------------
   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: 115px;
  }
}

/* --------------------------------------------------------------------------
   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
   -------------------------------------------------------------------------- */
/* En-tête flottant : une barre arrondie en bleu de travail, collée au haut de
   l'écran avec un peu d'air, filet or discret. Menu réduit : Accueil,
   Réalisations, et Contact en bouton (demande du 12/09/2026). */
/* Le collant est posé sur la partie de gabarit elle-même : son parent est toute
   la page, donc la barre reste visible au défilement. */
.wp-site-blocks > header,.wp-site-blocks > .wp-block-template-part:first-child{position:sticky;top:0;z-index:60;pointer-events:none}
.tor-entete{padding:.75rem 1rem 0;pointer-events:none}
.tor-entete__barre{pointer-events:auto}
/* Exactement le charbon du pied de page (#0D0C0C, preset « charbon »), opaque :
   toute transparence éclaircirait la pilule et la couleur ne correspondrait plus. */
.tor-entete__barre{background:var(--tor-charbon);border-radius:999px;padding:.45rem .55rem .45rem 1.2rem;border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 28px rgba(21,26,34,.18),inset 0 1px 0 rgba(255,255,255,.1)}
.tor-entete .wp-block-site-logo img{width:108px}
/* WordPress sert `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content{color:inherit}`
   (classe doublée volontairement, spécificité 0-3-0). Un sélecteur simple perd et les
   liens héritent alors de l'encre du corps de page (#151A22) : gris sombre sur charbon.
   On double la classe à notre tour et on fixe la couleur du conteneur pour que
   l'`inherit` de WordPress résolve lui aussi en blanc. */
.tor-nav,.tor-nav .wp-block-navigation__container{color:#fff}
.tor-nav .wp-block-navigation-item__content.wp-block-navigation-item__content{color:#fff;font:600 .92rem/1 var(--archivo);letter-spacing:.01em;padding:.65rem .95rem;border-radius:999px;transition:background 160ms var(--ease-out),color 160ms var(--ease-out)}
.tor-nav a.wp-block-navigation-item__content:hover{color:#fff;background:rgba(255,255,255,.09);text-decoration:none}
.tor-nav .current-menu-item>a.wp-block-navigation-item__content{color:#fff}
.tor-nav .tor-nav__cta>a.wp-block-navigation-item__content{background:var(--tor-bleu);color:#fff;margin-left:.35rem;padding:.7rem 1.2rem}
.tor-nav .tor-nav__cta>a.wp-block-navigation-item__content:hover{background:var(--tor-bleu-clair);color:#fff}
.tor-nav .wp-block-navigation__responsive-container-open{color:#fff}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open{background-color:var(--tor-charbon) !important;color:#fff;padding:5rem 1.5rem 2rem;pointer-events:auto}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{align-items:flex-start}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{align-items:flex-start;gap:.4rem}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content{color:#fff !important;font-size:1.5rem;padding:.7rem 0;border-radius:0}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .tor-nav__cta>a.wp-block-navigation-item__content.wp-block-navigation-item__content{background:var(--tor-bleu);color:#fff !important;padding:.8rem 1.4rem;border-radius:999px;margin:.6rem 0 0}
.tor-nav .wp-block-navigation__responsive-container-close{color:#fff !important}

/* Menu mobile — la pilule se déroule en menu (refonte du 08/10/2026).
   La bulle part EXACTEMENT de la barre : tor-menu.js mesure la pilule au clic et
   pose --b-top / --b-left / --b-right / --b-h ; la bulle se place dessus et se
   déroule vers le bas (clip-path, 340 ms, courbe de tiroir). Le logo reste par-dessus,
   le bouton hamburger devient la croix au même endroit. Avant : la bulle avait ses
   propres marges (1 rem) plus étroites que la pilule (0,75 rem) et la barre dépassait.
   Fermeture : la bulle se replie dans la barre (classe .tor-ferme, 200 ms).
   Fond assombri : pseudo-élément de l'en-tête (le clip-path couperait une ombre).
   Point or devant la page courante (classe posée par assets/js/tor-menu.js). */
.tor-nav .wp-block-navigation__responsive-container.is-menu-open{
  position:fixed;top:var(--b-top,.5rem);left:var(--b-left,.75rem);right:var(--b-right,.75rem);bottom:auto;
  height:auto;min-height:0;z-index:70;overflow:visible;
  background-color:var(--tor-charbon) !important;color:#fff;
  border-radius:28px;border:1px solid rgba(255,255,255,.14);
  padding:calc(var(--b-h,56px) + 1rem) 1.5rem 1.5rem;
  box-shadow:0 24px 60px rgba(13,12,12,.35);
  animation:tor-deroule 340ms cubic-bezier(.32,.72,0,1) backwards;pointer-events:auto}
/* départ : seule la hauteur de la pilule est visible, arrondi de pilule */
@keyframes tor-deroule{from{clip-path:inset(0 0 calc(100% - var(--b-h,56px)) 0 round 999px)}to{clip-path:inset(0 0 0 0 round 28px)}}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open.tor-ferme{animation:tor-replie 200ms cubic-bezier(.32,.72,0,1) forwards}
@keyframes tor-replie{from{clip-path:inset(0 0 0 0 round 28px)}to{clip-path:inset(0 0 calc(100% - var(--b-h,56px)) 0 round 999px)}}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open.tor-ferme .wp-block-navigation-item{opacity:0;transition:opacity 120ms ease}
/* le logo reste visible au-dessus de la bulle : c'est bien la barre qui s'ouvre */
html.has-modal-open .tor-entete .wp-block-site-logo{position:relative;z-index:71}
/* pendant l'ouverture, la pilule ne doit rien montrer autour de la bulle */
html.has-modal-open .tor-entete__barre{box-shadow:none;border-color:transparent}
/* le fond de page s'assombrit (fondu), sous la barre */
html.has-modal-open .tor-entete::before{content:"";position:fixed;inset:0;background:rgba(13,12,12,.45);pointer-events:auto;animation:tor-fond 240ms ease both}
@keyframes tor-fond{from{opacity:0}}
/* le dialogue interne redevient statique : la croix se positionne par rapport à la bulle */
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{display:block;position:static}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{display:flex;flex-direction:column;align-items:stretch;gap:0;border-top:1px solid rgba(255,255,255,.12)}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item{border-bottom:1px solid rgba(255,255,255,.12);animation:tor-menu-in 260ms var(--ease-out) 90ms both}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:has(.tor-nav__cta){border-bottom:0}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content.wp-block-navigation-item__content{display:block;box-sizing:border-box;width:100%;color:#fff !important;font:700 1.5rem/1.1 var(--archivo);letter-spacing:-.01em;padding:1rem 0 1rem 1.3rem;border-radius:0;position:relative}
/* dans la bulle, seul le point devant compte : pas celui du bureau, dessous */
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item>a.wp-block-navigation-item__content::after{display:none}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .current-menu-item>.wp-block-navigation-item__content::before{content:"";position:absolute;left:0;top:50%;width:9px;height:9px;border-radius:50%;background:var(--tor-or);transform:translateY(-50%)}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .tor-nav__cta>a.wp-block-navigation-item__content.wp-block-navigation-item__content{display:flex;justify-content:center;background:var(--tor-bleu);color:#fff !important;font-size:1.02rem;padding:1rem 1.4rem;border-radius:999px;margin:1.3rem 0 0;transition:transform 160ms var(--ease-out)}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .tor-nav__cta>a.wp-block-navigation-item__content.wp-block-navigation-item__content::before{display:none}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .tor-nav__cta>a:active{transform:scale(.97)}
/* la croix prend la place exacte du bouton hamburger (centrée dans la hauteur de la pilule) */
.tor-nav .wp-block-navigation__responsive-container-close{position:absolute;top:calc((var(--b-h,56px) - 44px) / 2 - 1px);right:calc(var(--b-pad,.5rem) - 1px);width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:0;background:transparent;color:#fff !important;transition:transform 160ms var(--ease-out)}
.tor-nav .wp-block-navigation__responsive-container-close:active{transform:scale(.94)}
.tor-nav .wp-block-navigation__responsive-container-close svg{width:20px;height:20px}
@keyframes tor-menu-in{from{opacity:0;transform:translateY(8px);padding-bottom:1px}to{opacity:1;transform:none;padding-bottom:0}}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(2){animation-delay:130ms}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(3){animation-delay:170ms}
.tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:nth-child(4){animation-delay:210ms}
/* bureau : un point or sous la page courante, jamais sous le bouton Contact */
.tor-nav .wp-block-navigation-item__content.wp-block-navigation-item__content{position:relative}
.tor-nav .current-menu-item>a.wp-block-navigation-item__content::after{content:"";position:absolute;left:50%;bottom:.2rem;width:4px;height:4px;border-radius:50%;background:var(--tor-or);transform:translateX(-50%)}
.tor-nav .tor-nav__cta>a.wp-block-navigation-item__content::after{display:none}
@media (prefers-reduced-motion:reduce){
  .tor-nav .wp-block-navigation__responsive-container.is-menu-open,
  .tor-nav .wp-block-navigation__responsive-container.is-menu-open.tor-ferme,
  .tor-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
  html.has-modal-open .tor-entete::before{animation:none}
}
@media (max-width:600px){
  .tor-entete{top:.5rem;padding:.5rem .75rem 0}
  .tor-entete__barre{padding:.35rem .5rem .35rem .9rem}
  .tor-entete .wp-block-site-logo img{width:92px}
}

/* --------------------------------------------------------------------------
   Avant / après au curseur (page Réalisations)
   -------------------------------------------------------------------------- */
.aa{max-width:72rem;margin:0 auto 2rem}
.aa__cadre{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:var(--papier-2);touch-action:pan-y;cursor:ew-resize;user-select:none;-webkit-user-select:none}
.aa__cadre:focus-within{outline:3px solid var(--tor-or);outline-offset:3px}
.aa__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.aa__img--apres{opacity:0}
.aa.est-pret .aa__img{visibility:hidden}
.aa__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0}
.aa.est-pret .aa__canvas{opacity:1}
.aa__ligne{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 0 1px rgba(21,26,34,.25);transform:translateX(-1px);pointer-events:none}
.aa__poignee{position:absolute;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%);border-radius:50%;background:var(--tor-bleu);border:2px solid #fff;box-shadow:0 6px 18px rgba(21,26,34,.3)}
/* Tant que le visiteur n'a pas pris la main, la poignée respire doucement pour
   signaler qu'elle s'attrape ; au premier geste (.est-pilote) elle se fige. */
@keyframes tor-aa-respire{0%,100%{box-shadow:0 6px 18px rgba(21,26,34,.3),0 0 0 0 rgba(255,255,255,.5)}50%{box-shadow:0 6px 18px rgba(21,26,34,.3),0 0 0 10px rgba(255,255,255,0)}}
.aa:not(.est-pilote) .aa__poignee{animation:tor-aa-respire 2.4s var(--ease-out) infinite}
@media (prefers-reduced-motion:reduce){.aa .aa__poignee{animation:none}}
.aa__poignee::before,.aa__poignee::after{content:"";position:absolute;top:50%;left:13px;width:8px;height:8px;border:2px solid #fff;border-width:2px 0 0 2px;transform:translateY(-50%) rotate(-45deg)}
.aa__poignee::after{left:auto;right:13px;transform:translateY(-50%) rotate(135deg)}
.aa__etiq{position:absolute;top:1rem;font:600 .72rem var(--archivo);letter-spacing:.16em;text-transform:uppercase;background:rgba(246,244,240,.92);color:#151A22;padding:.45rem .75rem;border-radius:999px;pointer-events:none;transition:opacity 200ms var(--ease-out)}
.aa__etiq--avant{left:1rem}
.aa__etiq--apres{right:1rem}
.aa.est-apres .aa__etiq--avant,.aa:not(.est-apres) .aa__etiq--apres{opacity:.45}
.aa__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.aa__range{position:absolute;left:0;right:0;bottom:0;width:100%;height:44px;margin:0;opacity:0;cursor:ew-resize}
.aa__legende{margin:1rem 0 0;color:var(--encre-2);max-width:60ch}

.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;
  }
}

/* ==========================================================================
   LE FILM « Le chantier en continu » — page d'accueil.
   Canvas plein ecran pilote par le scroll (assets/js/tor-film.js) : camera
   isometrique, chantier qui se monte, coupe du mur, crepuscule. Le bandeau
   d'en-tete et le pied de page viennent du theme. Voir la maquette autonome
   sites/tor-batiment/captures/film.html et le journal.
   ========================================================================== */
/* ==========================================================================
   « LE CHANTIER EN CONTINU » — film piloté par le scroll.
   Un canvas plein écran dessine la scène image par image ; une seule valeur
   (la progression, 0 → 1) pilote la caméra, le chantier et les textes.
   Le scroll est LISSÉ (interpolation sur rAF) : c'est ce qui donne le rendu
   « vidéo » — et l'animation repart toujours de la valeur affichée, donc elle
   est interruptible et réversible à tout instant.
   ========================================================================== */
:root{
  --papier:#F6F4F0; --papier-2:#ECE8E1; --surface:#fff;
  --encre:#151A22; --encre-2:#4A5262; --trait:#D6D0C6;
  --bleu:#1E3F6F; --bleu-clair:#2C5697; --or:#C49A64; --or-texte:#7E6030;
  --charbon:#0D0C0C;
  --archivo:Archivo,"Arial Black",system-ui,sans-serif;
  --plex:"IBM Plex Sans",system-ui,-apple-system,sans-serif;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --enorme:clamp(2.6rem,7.5vw,7rem);
  --grand:clamp(2rem,5.2vw,4.4rem);
}

.tor-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 1.35rem;border-radius:999px;background:#fff;color:var(--bleu);font:700 .85rem var(--archivo);letter-spacing:.02em;text-decoration:none;border:0;cursor:pointer;transition:background 160ms var(--ease-out),transform 160ms var(--ease-out)}
.tor-btn:hover{background:var(--papier-2)}
.tor-btn:active{transform:scale(.97)}
.tor-btn:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* ---- LE FILM ---- */
.film{position:relative;height:560vh}
.film__cadre{position:sticky;top:0;height:100vh;height:100svh;overflow:clip;background:var(--papier)}
/* La scène : cinq images empilées, fondues par le script (opacity + transform seulement).
   Décalée à droite sur grand écran pour laisser la place aux textes. */
.film__scene{position:absolute;top:0;bottom:0;left:22%;right:0}
.film__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center 55%;opacity:0;transform:scale(1);transform-origin:center 60%;will-change:opacity,transform;user-select:none;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 56%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 56%,transparent 100%)}   /* les bords de l'image se fondent dans le papier : plus de rectangle */
.film__img--fixe{opacity:1}
.film__canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transform:scale(1);transform-origin:center 60%;will-change:transform;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 56%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 52%,#000 56%,transparent 100%)}
.film__scene.est-canvas .film__img{visibility:hidden}   /* le canvas prend le relais des cinq images */   /* la pièce finie est visible avant le script, sans JS et en mouvement réduit */
.est-soir .film__txt::before{opacity:0}
.est-soir .film__h,.est-soir .film__p,.est-soir .film__kicker{color:#F6F4F0;transition:color 400ms var(--ease-out)}
.film__h,.film__p,.film__kicker{transition:color 400ms var(--ease-out)}
.est-soir .film__jalons{background:rgba(70,58,54,.86);border-color:rgba(246,244,240,.18)}
.est-soir .film__jalon b{color:#F6F4F0}

/* Textes : dans le flux du cadre collant, en surimpression du dessin.
   Pilotés en opacity + transform uniquement. */
.film__txt[data-in="0"]{opacity:1;transform:none}   /* visible avant même que le script ne tourne */
/* À l'intérieur d'un bloc, le paragraphe puis le bouton arrivent à leur tour
   (data-in propre, piloté par le script) — seulement quand le script tourne. */
.tor-js .film__txt [data-in]{opacity:0;transform:translate3d(0,14px,0);will-change:opacity,transform}
.tor-js .film__txt [data-in="0"]{opacity:1;transform:none}
.film{--halo:1}   /* halo papier derrière les textes : le script l'éteint avec le crépuscule */
.film__txt{position:absolute;max-width:min(38rem,88vw);padding:1.5rem clamp(1rem,5vw,3.5rem);opacity:0;transform:translate3d(0,22px,0);will-change:opacity,transform;pointer-events:none}
.film__txt::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 60% 56% at 40% 46%,rgba(246,244,240,.72),rgba(246,244,240,0) 100%);opacity:var(--halo)}   /* s'éteint avant les bords du bloc : jamais de rectangle */
.film__txt.est-actif{pointer-events:auto}
.film__txt--g{left:0;top:16vh}
.film__txt--d{right:0;top:16vh;text-align:right}
.film__txt--d::before{background:radial-gradient(ellipse 60% 56% at 60% 46%,rgba(246,244,240,.72),rgba(246,244,240,0) 100%)}
.film__txt--d .film__kicker::before{display:none}
.film__txt--d .film__kicker::after{content:"";display:inline-block;width:2.2rem;height:1px;background:var(--or);vertical-align:middle;margin-left:.8rem}
.film__txt--bas{left:0;bottom:16vh}
.film__kicker{font:600 .74rem var(--archivo);letter-spacing:.2em;text-transform:uppercase;color:var(--encre-2);margin:0 0 .9rem}
.film__kicker::before{content:"";display:inline-block;width:2.2rem;height:1px;background:var(--or);vertical-align:middle;margin-right:.8rem}
.film__h{font-family:var(--archivo);font-weight:900;line-height:.94;letter-spacing:-.03em;margin:0;text-wrap:balance;overflow-wrap:break-word}
.film__h--enorme{font-size:var(--enorme);max-width:13ch}
.film__h--grand{font-size:var(--grand);font-weight:800;line-height:1.02;letter-spacing:-.022em;max-width:16ch}
/* H1 de l'accueil = ligne métier + lieu et accroche (SEO, 05/10/2026). Conteneur neutre :
   chaque span garde le rendu de l'ancien p.film__kicker / h1.film__h. */
.film__h1{all:unset;display:block}
.film__h1>span{display:block}
.film__p{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.5;color:var(--encre-2);max-width:32ch;margin:1.1rem 0 0}
.film__txt--d .film__p{margin-left:auto}
.film__cta{margin-top:1.5rem;display:inline-flex;gap:.8rem;flex-wrap:wrap}
.film__cta .tor-btn{background:var(--bleu);color:#fff}
.film__cta .tor-btn:hover{background:var(--bleu-clair)}

/* L'interrupteur jour / nuit de la pièce finie : un petit poussoir dans l'angle
   bas droit, visible seulement sur la dernière image. */
.film__inter{position:absolute;right:1.4rem;bottom:calc(1.6rem + env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;gap:.6rem;padding:.45rem .9rem .45rem .5rem;border:1px solid rgba(214,208,198,.9);border-radius:999px;background:rgba(246,244,240,.92);color:var(--encre);font:600 .7rem var(--archivo);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out),background 260ms var(--ease-out),color 260ms var(--ease-out)}
.film__inter.est-visible{opacity:1;transform:none;pointer-events:auto}
.film__inter-bouton{position:relative;width:34px;height:20px;border-radius:999px;background:var(--trait);transition:background 260ms var(--ease-out)}
.film__inter-bouton::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(21,26,34,.35);transition:transform 260ms var(--ease-out)}
.film__inter.est-nuit .film__inter-bouton{background:var(--bleu)}
.film__inter.est-nuit .film__inter-bouton::after{transform:translateX(14px)}
.film__inter:focus-visible{outline:2px solid var(--or);outline-offset:3px}
.est-soir .film__inter{background:rgba(70,58,54,.85);color:#F6F4F0;border-color:rgba(246,244,240,.25)}
@media (max-width:700px){.film__inter{right:.9rem;bottom:calc(5.4rem + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){.film__inter{display:none}}
html:not(.tor-js) .film__inter{display:none}

/* Jalons : la ligne de chantier, en bas. L'or ne porte aucune information,
   il marque les étapes franchies. */
.film__jalons{position:absolute;left:50%;transform:translateX(-50%);width:min(44rem,calc(100% - 2rem));bottom:calc(1rem + env(safe-area-inset-bottom));padding:.85rem 1.4rem 1.6rem;background:rgba(246,244,240,.86);border:1px solid rgba(214,208,198,.8);border-radius:999px;display:flex;align-items:center;pointer-events:none}
.film__rail{position:relative;flex:1;height:1px;margin:0 1.9rem;background:var(--trait)}
.film__rail i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--or);transform-origin:left;transform:scaleX(0);will-change:transform}
.film__jalon{position:absolute;top:50%;width:7px;height:7px;border-radius:50%;background:var(--papier);border:1.5px solid var(--trait);transform:translate(-50%,-50%);transition:background 220ms var(--ease-out),border-color 220ms var(--ease-out)}
.film__jalon.est-passe{background:var(--or);border-color:var(--or)}
.film__jalon b{position:absolute;top:12px;left:50%;transform:translateX(-50%);font:600 .58rem var(--archivo);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2);white-space:nowrap}
@media (max-width:640px){.film__jalon b{display:none}}

/* Page Contact : styles dans assets/css/tor-contact.css (chargée sur cette page seule). */
/* Le gabarit affiche déjà le titre de page : sur Contact, le H1 est celui du pattern. */
.page-id-8 .wp-block-post-title,.page-id-7 .wp-block-post-title,.page-id-5 .wp-block-post-title{display:none}
/* Accueil : bloc devis renvoie vers la page Contact. */
.devis__actions{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.tor-btn--bleu{background:var(--bleu);color:#fff}
.tor-btn--bleu:hover{background:var(--bleu-clair);color:#fff}
.tor-btn--clair{background:transparent;color:var(--bleu);border:1px solid var(--bleu)}
.tor-btn--clair:hover{background:var(--papier-2)}

/* ---- suite de page ---- */
.suite{max-width:72rem;margin:0 auto;padding:clamp(3rem,7vw,5rem) clamp(1rem,5vw,2.5rem)}
.suite h2{font:800 clamp(1.7rem,3.6vw,2.6rem)/1.08 var(--archivo);letter-spacing:-.02em;margin:0 0 2rem;max-width:22ch;text-wrap:balance}
/* ---- Le parcours : ce que le client sait, avant / pendant / après --------
   Prolonge la ligne du temps du film plutôt que de la couper par une grille.
   Quatre étapes reliées par un filet or, numéros encadrés comme dans le livre
   de chantier. Entrée en cascade (assets/js/tor-parcours.js pose .est-vu). --- */
.parcours{background:var(--surface);border-top:1px solid var(--trait)}
.parcours__dedans{max-width:72rem;margin:0 auto;padding:clamp(3rem,7vw,5.5rem) clamp(1rem,5vw,2.5rem)}
.parcours__tete{max-width:40rem;margin-bottom:clamp(2.2rem,5vw,3.4rem)}
.parcours__oeil{font:600 .72rem var(--archivo);letter-spacing:.2em;text-transform:uppercase;color:var(--or-texte);margin:0 0 .8rem}
.parcours__oeil::before{content:"";display:inline-block;width:2.2rem;height:1px;background:var(--or);vertical-align:middle;margin-right:.8rem}
.parcours__h{font:800 clamp(1.7rem,3.6vw,2.6rem)/1.08 var(--archivo);letter-spacing:-.02em;margin:0 0 .9rem;max-width:20ch;text-wrap:balance}
.parcours__lead{margin:0;color:var(--encre-2);line-height:1.55;max-width:54ch}

.parcours__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
/* le filet or qui relie les étapes : il se dessine quand la section entre à l'écran */
/* RÈGLE DE SÛRETÉ — le contenu est visible par défaut. L'entrée animée n'est
   qu'un bonus, activé par la classe `.anime` que le JS pose seulement s'il
   tourne. Sur ce thème, des transitions restent parfois en attente sans jamais
   démarrer (constaté sur la bulle du menu et ici) : faire dépendre l'opacité
   d'une transition revient à risquer une section blanche. Jamais l'inverse. */
.parcours__liste::before{content:"";position:absolute;left:0;right:0;top:1.05rem;height:1px;background:var(--trait);transform-origin:left}
.parcours.anime .parcours__liste::before{transform:scaleX(0);transition:transform 700ms var(--ease-out) 120ms}
.parcours.anime.est-vu .parcours__liste::before{transform:scaleX(1)}

.parcours__etape{position:relative;padding:0 1.6rem 0 0;display:flex;flex-direction:column;align-self:stretch}
.parcours.anime .parcours__etape{opacity:0;transform:translateY(12px);transition:opacity 420ms var(--ease-out),transform 420ms var(--ease-out)}
.parcours.anime.est-vu .parcours__etape{opacity:1;transform:none}
/* cascade : chaque etape part 60 ms apres la precedente */
.parcours.anime.est-vu .parcours__etape:nth-child(2){transition-delay:60ms}
.parcours.anime.est-vu .parcours__etape:nth-child(3){transition-delay:120ms}
.parcours.anime.est-vu .parcours__etape:nth-child(4){transition-delay:180ms}
.parcours__num{display:inline-flex;align-items:center;justify-content:center;min-width:2.1rem;height:2.1rem;font:800 .74rem/1 var(--archivo);letter-spacing:.12em;color:var(--or-texte);background:var(--surface);border:1px solid var(--or);border-radius:6px;position:relative;z-index:1;align-self:flex-start}   /* sinon le numero s'etire sur toute la colonne (parent flex) */
.parcours__titre{font:800 1.12rem/1.2 var(--archivo);letter-spacing:-.01em;margin:1rem 0 .45rem;color:var(--encre);text-wrap:balance}
.parcours__texte{margin:0;font-size:.95rem;line-height:1.55;color:var(--encre-2)}
.parcours__quand{margin:auto 0 0;padding-top:.9rem;font:600 .68rem var(--archivo);letter-spacing:.14em;text-transform:uppercase;color:var(--encre-2)}   /* auto : toutes les mentions sur la meme ligne de base ; --champ etait a 3,4:1 */
.parcours__quand::before{content:"·";color:var(--or);font-weight:900;margin-right:.45em}

@media (max-width:900px){
  .parcours__liste{grid-template-columns:repeat(2,1fr);gap:2.4rem 1.5rem}
  .parcours__liste::before{display:none}
  .parcours__etape{padding-right:0}
}
@media (max-width:560px){
  /* en colonne, le filet devient vertical : la ligne du temps reste lisible */
  .parcours__liste{grid-template-columns:1fr;gap:0}
  .parcours__etape{padding:0 0 2rem 3.2rem;height:auto}
  .parcours__quand{margin-top:.9rem}
  .parcours__etape::before{content:"";position:absolute;left:1.05rem;top:2.1rem;bottom:0;width:1px;background:var(--trait)}
  .parcours__etape:last-child::before{display:none}
  .parcours__num{position:absolute;left:0;top:0}
  .parcours__titre{margin-top:.25rem}
}
@media (prefers-reduced-motion:reduce){
  .parcours__etape,.parcours__liste::before{transition:none !important;opacity:1 !important;transform:none !important}
}
.devis{background:var(--papier-2);border-top:1px solid var(--trait)}
.devis .suite{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
.devis h2{max-width:14ch}
.devis .ph{background:var(--surface);border:1px dashed #8a8474;border-radius:12px;padding:2rem;color:var(--encre-2);font-size:.92rem}
@media (max-width:820px){.devis .suite{grid-template-columns:1fr}}

/* ---- Mobile : textes en haut, sur le ciel ---- */
@media (max-width:700px){
  .film{height:440vh}
  .film__scene{top:auto;bottom:10vh;height:calc(150vw * 9 / 16);left:-25%;right:-25%}   /* la boîte = le format de l'image, le masque tombe pile aux bords */
  .film__img,.film__canvas{object-position:center center;-webkit-mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%);mask-image:radial-gradient(ellipse 50% 50% at 50% 50%,#000 72%,transparent 100%)}
  .film__txt--g,.film__txt--d,.film__txt--bas{left:0;right:0;top:9vh;bottom:auto;text-align:left}
  .film__txt--d .film__p{margin-left:0}
  .film__txt--d .film__kicker::after{display:none}
  .film__txt--d .film__kicker::before{display:inline-block}
}

/* ---- Mouvement réduit : pas de fond plein écran qui bouge.
   Le cadre n'est plus collant, la scène est une image fixe (chantier fini,
   au crépuscule), les textes reprennent leur place dans le flux. ---- */
@media (prefers-reduced-motion:reduce){
  .film{height:auto}
  .film__cadre{position:relative;height:auto;padding-bottom:2rem}
  .film__scene{position:relative;height:62vh;min-height:360px;left:0;right:0}
  .film__canvas{display:none}
  .film__img{opacity:0 !important;transform:none !important;visibility:visible !important}
  .film__img--fixe{opacity:1 !important}
  .film__txt{position:relative;opacity:1;transform:none;top:auto;bottom:auto;left:auto;right:auto;text-align:left;margin:2.2rem 0 0;pointer-events:auto}
  .film__txt [data-in]{opacity:1 !important;transform:none !important}
  .film__txt::before{display:none}
  .film__txt--d .film__p{margin-left:0}
  .film__jalons{position:relative;bottom:auto;margin-top:2.5rem}
  .film__jalon b{display:block}
}
/* Sans JS : même rendu que le mouvement réduit, et le canvas laisse place au
   dessin de repli. */
html:not(.tor-js) .film{height:auto}
html:not(.tor-js) .film__cadre{position:relative;height:auto;padding-bottom:2rem}
html:not(.tor-js) .film__scene{position:relative;height:62vh;min-height:360px;left:0;right:0}
html:not(.tor-js) .film__canvas{display:none}
html:not(.tor-js) .film__txt::before{display:none}
html:not(.tor-js) .film__txt{position:relative;opacity:1;transform:none;top:auto;bottom:auto;left:auto;right:auto;text-align:left;margin:2.2rem 0 0;pointer-events:auto}
html:not(.tor-js) .film__jalons{position:relative;bottom:auto;margin-top:2.5rem}

/* --- a11y : cibles tactiles (audit du 20/09/2026) ---------------------
   Les liens en ligne du bandeau sombre et du bouton jour/nuit faisaient
   18 a 36 px de haut. On etend la ZONE CLIQUABLE sans toucher au rendu :
   padding vertical sur les liens du pied de page, hauteur minimale sur
   l interrupteur. Le lien d evitement, lui, mesurait 1x1 px hors focus. */
/* Critere de LARGEUR, pas `pointer:coarse` : ce media ne se declenche pas
   partout (emulateurs, ecrans tactiles hybrides) alors que la cible reste
   touchee au doigt. La largeur, elle, est fiable. */
@media (max-width:820px){
  .tor-bandeau a{display:inline-block;padding-block:.75rem}
  .tor-bandeau p{line-height:1.6}
  .film__inter{min-height:44px}
  .tarif__lien{padding-block:1rem;min-height:44px;align-items:center}
  .livre__ouvrir{min-height:44px}
  .fluentform .ff-el-form-control{min-height:46px}
  /* bouton burger : WP le rend a 24x24, trop petit au doigt */
  .tor-nav .wp-block-navigation__responsive-container-open{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
}
.esdi-skip-link:not(:focus){width:1px;height:1px}