/* ==========================================================================
   Serrurier 42 — feuille de style
   Parti pris : papier technique et métal. Fond crème, encre bleu-nuit,
   accent laiton. L'utilisateur est dehors, la nuit, sur mobile : tout est
   organisé pour qu'il trouve le numéro sans réfléchir.
   ========================================================================== */

/* Palette Saint-Étienne : vert et blanc.
   Les variables gardent leurs noms d'origine (--laiton, --encre) pour ne pas
   avoir à réécrire 700 lignes ; seules les valeurs changent. Contrastes
   vérifiés : texte 13,6:1, blanc sur vert profond 12,8:1, blanc sur vert
   Sainté 4,8:1 — tous au-dessus du seuil AA. */
:root{
  --papier:      #f4f7f3;   /* blanc légèrement verdi */
  --papier-2:    #e6ede6;
  --encre:       #0a3a22;   /* vert profond */
  --encre-2:     #114a2d;
  --encre-doux:  #40614e;
  --laiton:      #00843d;   /* vert Sainté */
  --laiton-clair:#16a355;
  --vert-texte:  #046a33;   /* pour le petit texte sur fond clair */
  --alerte:      #b8412e;
  --trait:       #cddccf;

  --serif:  "Bricolage Grotesque", Georgia, serif;
  --sans:   "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;

  --pas: clamp(1rem, 0.6rem + 1.6vw, 1.6rem);
}

/* --- Réglages généraux -------------------------------------------------- */
body{
  background: var(--papier);
  color: var(--encre);
  font-family: var(--sans);
  font-size: clamp(1.02rem, 0.98rem + 0.22vw, 1.14rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
.site-content{ background: transparent; }
a{ color: var(--encre); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover{ color: var(--laiton); }

h1,h2,h3,h4{
  font-family: var(--serif);
  color: var(--encre);
  letter-spacing: -.022em;
  line-height: 1.08;
  font-weight: 700;
}
h1{ font-size: clamp(2.1rem, 1.4rem + 3.3vw, 3.9rem); }
h2{ font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.5rem); margin-top: 2.8em; }
h3{ font-size: clamp(1.15rem, 1.05rem + .5vw, 1.42rem); margin-top: 1.9em; letter-spacing:-.012em; }
.entry-content > *:first-child{ margin-top: 0; }

/* ==========================================================================
   En-tête : enseigne à gauche, numéro à droite. Le numéro ne quitte
   jamais l'écran sur desktop.
   ========================================================================== */
.site-header{
  background: var(--papier);
  border-bottom: 1px solid var(--trait);
  padding: clamp(.9rem, .6rem + 1vw, 1.5rem) 0;
}
.site-header .inside-header{
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.site-branding{ display: flex; flex-direction: column; }
.main-title{ font-family: var(--serif); font-size: clamp(1.15rem,1rem + .9vw,1.6rem) !important; margin:0; letter-spacing:-.03em; }
.main-title a{ text-decoration: none; }
.site-description{
  font-size: .78rem !important; letter-spacing: .1em; text-transform: uppercase;
  color: var(--encre-doux) !important; margin-top: .3rem;
}

/* Pastille téléphone dans l'en-tête */
.s42-tel-entete{
  display: inline-flex; flex-direction: column; align-items: flex-end;
  text-decoration: none !important; line-height: 1.15;
}
.s42-tel-entete .mention{
  font-size: .68rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--encre-doux);
}
.s42-tel-entete .numero{
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(1.15rem, 1rem + .8vw, 1.6rem);
  color: var(--encre); letter-spacing: -.02em;
  border-bottom: 3px solid var(--laiton);
}
.s42-tel-entete:hover .numero{ color: var(--laiton); }

/* --- Navigation --------------------------------------------------------- */
.main-navigation{ background: var(--encre); }
.main-navigation .main-nav ul li a{
  font-family: var(--sans); font-weight: 600;
  font-size: .93rem; letter-spacing: .01em;
  color: #cfd6e0; padding-left: 1.15rem; padding-right: 1.15rem;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a{
  background: var(--encre-2); color: #fff;
}
.main-navigation .menu-toggle{ color:#cfd6e0; font-weight:600; }

/* ==========================================================================
   Bandeau d'urgence en tête de page
   ========================================================================== */
.intro{
  position: relative;
  background: var(--encre);
  color: #e9edf3;
  padding: clamp(1.5rem,1.1rem + 1.6vw,2.4rem) clamp(1.3rem,1rem + 1.4vw,2.2rem);
  margin: 0 0 2.6rem;
  border-radius: 3px;
  font-size: clamp(1.04rem,1rem + .3vw,1.18rem);
  line-height: 1.6;
  box-shadow: 0 1px 0 var(--trait), 14px 14px 0 -4px var(--papier-2);
}
.intro strong{ color:#fff; }
.intro::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px;
  background: linear-gradient(180deg,var(--laiton-clair),var(--laiton));
  border-radius:3px 0 0 3px;
}
.intro a[href^="tel:"]{
  display:inline-block; margin:.15em .1em;
  background: var(--laiton); color: var(--encre) !important;
  font-family: var(--serif); font-weight:800;
  font-size:1.16em; letter-spacing:-.01em;
  padding:.3em .7em; border-radius:3px; text-decoration:none !important;
  white-space:nowrap; transition: background .25s cubic-bezier(.22,1,.36,1);
}
.intro a[href^="tel:"]:hover{ background: var(--laiton-clair); }

/* ==========================================================================
   Corps de texte
   ========================================================================== */
.entry-content p, .entry-content li{ max-width: 68ch; }
/* Les liens doivent se voir : soulignement laiton net et épais.
   Un lien qui ne se distingue pas du texte n'est pas un lien. */
.entry-content a{
  color: var(--encre);
  text-decoration: underline;
  text-decoration-color: var(--laiton);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
  font-weight: 600;
  transition: color .2s, background-color .2s;
}
.entry-content a:hover{
  color: var(--laiton);
  background: rgba(200,134,42,.1);
  box-shadow: 0 0 0 .18em rgba(200,134,42,.1);
}
.entry-content a[href^="tel:"]{ font-weight:700; white-space:nowrap; }

/* Titres de section : filet + numérotation discrète */
.entry-content h2{
  padding-top: 1.1rem;
  border-top: 1px solid var(--trait);
}

/* Listes ordonnées : gros chiffres au laiton */
.entry-content ol{ list-style:none; counter-reset: etape; padding-left:0; }
.entry-content ol > li{
  counter-increment: etape; position: relative;
  padding-left: 3.1rem; margin-bottom: 1.15rem;
}
.entry-content ol > li::before{
  content: counter(etape,decimal-leading-zero);
  position:absolute; left:0; top:.05em;
  font-family: var(--serif); font-weight:800; font-size:1.32em;
  color: var(--laiton); font-variant-numeric: tabular-nums;
}
/* Listes à puces : tiret carré */
.entry-content ul{ list-style:none; padding-left:0; }
.entry-content ul > li{ position:relative; padding-left:1.5rem; margin-bottom:.7rem; }
.entry-content ul > li::before{
  content:""; position:absolute; left:0; top:.72em;
  width:.5rem; height:.5rem; background: var(--laiton);
}

/* ==========================================================================
   Formulaire
   ========================================================================== */
.wpcf7 label{ display:block; font-weight:600; font-size:.94rem; margin-bottom:1.1rem; }
.wpcf7 input[type=text],.wpcf7 input[type=email],.wpcf7 input[type=tel],
.wpcf7 select,.wpcf7 textarea{
  width:100%; margin-top:.4rem;
  background:#fffdf8; border:1px solid var(--trait); border-radius:2px;
  padding:.75rem .85rem; font-family:var(--sans); font-size:1rem; color:var(--encre);
  transition: border-color .2s, box-shadow .2s;
}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  outline:none; border-color: var(--laiton);
  box-shadow: 0 0 0 3px rgba(200,134,42,.18);
}
.wpcf7 input[type=submit]{
  background: var(--encre); color:#fff; border:0; border-radius:3px;
  font-family:var(--serif); font-weight:700; font-size:1.06rem;
  padding:.85rem 1.9rem; cursor:pointer;
  transition: background .25s cubic-bezier(.22,1,.36,1), transform .25s cubic-bezier(.22,1,.36,1);
}
.wpcf7 input[type=submit]:hover{ background: var(--laiton); transform: translateY(-1px); }

/* ==========================================================================
   Barre d'appel fixe — mobile uniquement.
   C'est l'élément qui convertit : toujours atteignable au pouce.
   ========================================================================== */
.s42-barre{
  position: fixed; left:0; right:0; bottom:0; z-index:9999;
  display:none; align-items:stretch;
  background: var(--encre);
  box-shadow: 0 -2px 18px rgba(22,32,46,.28);
  padding-bottom: env(safe-area-inset-bottom);
}
.s42-barre a{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.1rem; padding:.7rem .5rem; text-decoration:none !important;
  font-family:var(--sans); font-weight:700; font-size:1.02rem;
}
.s42-barre .appel{ background: var(--laiton); color: var(--encre) !important; }
.s42-barre .devis{ color:#e9edf3 !important; }
.s42-barre .mention{
  font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; opacity:.85;
}
@media (max-width: 768px){
  .s42-barre{ display:flex; }
  body{ padding-bottom: 4.6rem; }
  .s42-tel-entete{ display:none; }
  .site-header .inside-header{ justify-content:center; text-align:center; }
  .site-branding{ align-items:center; }
}

/* ==========================================================================
   Pied de page
   ========================================================================== */
.site-footer, .site-info{
  background: var(--encre); color:#aab4c2;
  font-size:.92rem; border:0;
}
.site-info{ padding: 2.2rem 0; }
.site-info a{ color:#e9edf3; text-decoration-color: var(--laiton); }
.site-info a:hover{ color: var(--laiton-clair); }
.site-info p{ margin:0; line-height:1.75; }

/* --- Accessibilité et confort ------------------------------------------- */
:focus-visible{ outline:3px solid var(--laiton); outline-offset:2px; }
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}

/* ==========================================================================
   PAGE D'ACCUEIL — composition
   Le corps du site reste sobre ; l'accueil, lui, doit accrocher en trois
   secondes. Pleine largeur, alternance crème / encre, typographie massive.
   ========================================================================== */

/* On sort du conteneur étroit de GeneratePress */
.page-id-6 .site-content .content-area,
.page-id-6 .entry-content{ max-width:none; }
.page-id-6 .site-main > .entry-header,
.page-id-6 .entry-title{ display:none; }          /* le H1 vit dans le hero */
.page-id-6 .inside-article{ padding:0 !important; }
.page-id-6 .site-content{ padding:0 !important; }
.s42-home p, .s42-home li{ max-width:none; }

.s42-home{ --bord: clamp(1.25rem, .6rem + 3vw, 5rem); }
.s42-home section{ padding-left:var(--bord); padding-right:var(--bord); }
.s42-home h2{ margin-top:0; border:0; padding-top:0; }

.s42-eyebrow{
  font-family:var(--sans); font-size:.76rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--laiton);
  display:flex; align-items:center; gap:.55rem; margin:0 0 1rem;
}
.s42-eyebrow--clair{ color:var(--laiton-clair); }
.s42-eyebrow .pastille{
  width:.55rem; height:.55rem; border-radius:50%; background:#3fbf6a;
  box-shadow:0 0 0 .28rem rgba(63,191,106,.22);
  animation:s42pulse 2.4s ease-out infinite;
}
@keyframes s42pulse{
  0%,100%{ box-shadow:0 0 0 .28rem rgba(63,191,106,.22); }
  50%    { box-shadow:0 0 0 .5rem rgba(63,191,106,.05); }
}

/* --- Boutons ------------------------------------------------------------ */
.s42-btn{
  display:inline-flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.85rem 1.9rem; border-radius:4px; text-decoration:none !important;
  font-family:var(--sans); font-weight:700; line-height:1.2;
  transition:transform .3s cubic-bezier(.22,1,.36,1), background-color .3s, color .3s;
}
.s42-btn:hover{ transform:translateY(-2px); }
.s42-btn .mention{ font-size:.68rem; letter-spacing:.13em; text-transform:uppercase; opacity:.9; }
.s42-btn .num{ font-family:var(--serif); font-size:1.5rem; font-weight:800; letter-spacing:-.02em; }
.s42-btn--tel{ background:var(--laiton); color:var(--encre) !important; }
.s42-btn--tel:hover{ background:var(--laiton-clair); }
.s42-btn--ghost{
  border:2px solid rgba(233,237,243,.35); color:#e9edf3 !important;
  justify-content:center; font-size:1rem; padding:1.15rem 1.9rem;
}
.s42-btn--ghost:hover{ border-color:var(--laiton); color:var(--laiton-clair) !important; }
.s42-btn--grand{ padding:1.1rem 2.6rem; }
.s42-btn--grand .num{ font-size:1.95rem; }

/* --- HERO --------------------------------------------------------------- */
.s42-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--encre); color:#e9edf3;
  padding-top:clamp(3.2rem,2rem + 6vw,7rem);
  padding-bottom:clamp(3.2rem,2rem + 6vw,7rem);
  margin-bottom:0;
}
.s42-hero__fond{ position:absolute; inset:0; z-index:-1; opacity:.5; }
/* Deux traits obliques façon rainure de clé : décor discret, pas de bruit */
.s42-hero__fond .cle{
  position:absolute; display:block; background:linear-gradient(90deg,transparent,var(--laiton),transparent);
  height:1px; width:60%; opacity:.35;
}
.s42-hero__fond .cle--1{ top:28%; left:-5%; transform:rotate(-14deg); }
.s42-hero__fond .cle--2{ bottom:22%; right:-5%; transform:rotate(-14deg); }
.s42-hero__in{ max-width:64rem; }
.s42-hero h1{
  color:#fff; margin:0 0 1.4rem;
  font-size:clamp(2.4rem,1.4rem + 5.2vw,5.2rem); line-height:1.02; letter-spacing:-.035em;
}
.s42-hero h1 em{ font-style:normal; color:var(--laiton-clair); }
.s42-hero__accroche{
  font-size:clamp(1.06rem,1rem + .55vw,1.32rem); color:#b9c3d1;
  max-width:44ch !important; margin:0 0 2.2rem;
}
.s42-hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; align-items:stretch; }
.s42-preuves{
  list-style:none; padding:0; margin:2.8rem 0 0;
  display:grid; gap:.9rem 2.2rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  border-top:1px solid rgba(233,237,243,.16); padding-top:1.6rem;
}
.s42-preuves li{ padding-left:1.6rem; position:relative; color:#b9c3d1; font-size:.98rem; margin:0; }
.s42-preuves li::before{
  content:"✓"; position:absolute; left:0; top:-.05em;
  color:var(--laiton-clair); font-weight:700;
}
.s42-preuves li strong{ color:#fff; }

/* --- Sections claires --------------------------------------------------- */
.s42-sect{ padding-top:clamp(3rem,2rem + 4vw,6rem); padding-bottom:clamp(3rem,2rem + 4vw,6rem); }
.s42-sect__tete{ max-width:46rem; margin-bottom:clamp(2rem,1.4rem + 2vw,3.4rem); }
.s42-sect__tete h2{ font-size:clamp(1.85rem,1.3rem + 2.4vw,3.1rem); }

/* Grille des situations */
.s42-cas{ display:grid; gap:1px; background:var(--trait); border:1px solid var(--trait);
  grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.s42-cas__item{ background:var(--papier); padding:clamp(1.5rem,1rem + 1.4vw,2.2rem); transition:background .3s; }
.s42-cas__item:hover{ background:#fffdf8; }
.s42-cas__item .n{
  font-family:var(--serif); font-weight:800; font-size:.95rem; color:var(--laiton);
  letter-spacing:.06em; display:block; margin-bottom:.9rem;
}
.s42-cas__item h3{ margin:0 0 .6rem; font-size:1.22rem; }
.s42-cas__item p{ margin:0; font-size:.97rem; color:var(--encre-doux); }

/* --- Section anti-arnaque (fond encre) ---------------------------------- */
.s42-garde{
  background:var(--encre); color:#c3ccd8;
  padding-top:clamp(3.2rem,2rem + 4.5vw,6.5rem); padding-bottom:clamp(3.2rem,2rem + 4.5vw,6.5rem);
}
.s42-garde h2{
  color:#fff; font-size:clamp(1.7rem,1.2rem + 2.2vw,2.9rem);
  margin:0 0 clamp(2rem,1.4rem + 2vw,3.2rem); max-width:34ch;
}
.s42-garde__grille{
  display:grid; gap:clamp(1.6rem,1rem + 2vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(19rem,1fr));
}
.s42-garde__grille h3{
  color:#fff; margin:0 0 .55rem; font-size:1.14rem;
  padding-left:1rem; border-left:3px solid var(--laiton);
}
.s42-garde__grille p{ margin:0; padding-left:1rem; font-size:.97rem; }

/* --- Étapes ------------------------------------------------------------- */
.s42-etapes{ list-style:none; padding:0; margin:0; counter-reset:none;
  display:grid; gap:clamp(1.4rem,1rem + 1.6vw,2.4rem);
  grid-template-columns:repeat(auto-fit,minmax(16rem,1fr)); }
.s42-etapes > li{ display:block; padding:0; margin:0; position:relative; }
.s42-etapes > li::before{ display:none; }
.s42-etapes .n{
  display:block; font-family:var(--serif); font-weight:800;
  font-size:2.4rem; color:var(--trait); line-height:1; margin-bottom:.5rem;
}
.s42-etapes h3{ margin:0 0 .45rem; font-size:1.1rem; }
.s42-etapes p{ margin:0; font-size:.96rem; color:var(--encre-doux); }

/* --- Zones -------------------------------------------------------------- */
.s42-zones{
  background:var(--papier-2);
  padding-top:clamp(3rem,2rem + 4vw,6rem); padding-bottom:clamp(3rem,2rem + 4vw,6rem);
}
.s42-zones__in{ display:grid; gap:clamp(2rem,1.4rem + 3vw,4.5rem); grid-template-columns:1fr; }
@media (min-width:900px){ .s42-zones__in{ grid-template-columns:1.15fr .85fr; align-items:start; } }
.s42-zones h2{ font-size:clamp(1.6rem,1.2rem + 2vw,2.6rem); margin-bottom:1rem; }
.s42-zones__txt p{ color:var(--encre-doux); }
.s42-zones__liens{ display:flex; flex-direction:column; gap:.5rem; margin-top:1.4rem; }
.s42-zones__liens a{
  font-weight:700; text-decoration:underline; text-decoration-color:var(--laiton);
  text-decoration-thickness:2px; text-underline-offset:.2em; width:fit-content;
}
.s42-zones__liste{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:.55rem .9rem;
}
.s42-zones__liste li{
  margin:0; padding:.5rem 0 .5rem 1.3rem; position:relative;
  font-size:.96rem; color:var(--encre); border-bottom:1px solid var(--trait);
}
.s42-zones__liste li::before{
  content:""; position:absolute; left:0; top:1.05em;
  width:.42rem; height:.42rem; background:var(--laiton);
}

/* --- Appel final -------------------------------------------------------- */
.s42-final{
  text-align:center; background:var(--papier);
  padding-top:clamp(3rem,2rem + 4vw,5.5rem); padding-bottom:clamp(3.4rem,2.2rem + 4vw,6rem);
  border-top:1px solid var(--trait);
}
.s42-final h2{ font-size:clamp(1.7rem,1.2rem + 2.4vw,2.9rem); margin:0 0 .7rem; }
.s42-final p{ color:var(--encre-doux); margin:0 auto 2rem; max-width:40ch !important; }

/* --- Mobile -------------------------------------------------------------
   Le bouton téléphone est le plus large du site : sur petit écran il doit
   se contraindre lui-même, sinon il pousse la page en débordement
   horizontal. On borne la largeur, on réduit le rembourrage et le corps
   du numéro plutôt que de laisser le contenu dicter la taille. */
.s42-btn{ max-width:100%; box-sizing:border-box; }
.s42-btn .num{ white-space:nowrap; }

@media (max-width:600px){
  .s42-hero__actions{ flex-direction:column; align-items:stretch; }
  .s42-btn{ width:100%; padding-left:1rem; padding-right:1rem; }
  .s42-btn .num{ font-size:1.32rem; }
  .s42-btn--grand{ padding:.95rem 1rem; }
  .s42-btn--grand .num{ font-size:1.5rem; }
  .s42-hero h1{ letter-spacing:-.03em; }
}
@media (max-width:380px){
  .s42-btn .num, .s42-btn--grand .num{ font-size:1.16rem; }
  .s42-btn .mention{ font-size:.62rem; }
}

/* --- Pleine largeur sur l'accueil --------------------------------------
   GeneratePress enferme le contenu dans .site.container. On l'ouvre pour
   cette page seulement ; l'en-tête et le pied gardent leur propre
   conteneur centré, ils ne bougent pas. */
.page-id-6 .site.container{ max-width:100%; padding:0; }
/* Attention : cibler `article` tout court écrase le padding des cartes
   de la grille, qui sont elles aussi des <article>. On vise donc
   uniquement l'article de la page, enfant direct du <main>. */
.page-id-6 .content-area,
.page-id-6 .site-main,
.page-id-6 .site-main > article{ margin:0; padding:0; }

/* Le contenu, lui, reste centré et lisible */
.s42-hero__in,
.s42-sect__tete,
.s42-cas,
.s42-etapes,
.s42-garde__in,
.s42-zones__in{ max-width:78rem; margin-inline:auto; }
.s42-final > *{ margin-inline:auto; }

/* ==========================================================================
   DIRECTION ARTISTIQUE — « plan d'atelier »
   Pas de photo : le langage visuel repose sur le dessin technique.
   Grille millimétrée en fond, illustrations au trait, cotes et repères.
   ========================================================================== */

/* --- Fond : papier millimétré très discret ------------------------------- */
.s42-sect, .s42-final{
  background-image:
    linear-gradient(var(--trait) 1px, transparent 1px),
    linear-gradient(90deg, var(--trait) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem, 2.5rem 2.5rem;
  background-position: -1px -1px;
  position: relative;
}
.s42-sect::after, .s42-final::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at 50% 40%, transparent 35%, var(--papier) 88%);
}
.s42-sect > *, .s42-final > *{ position:relative; z-index:1; }

/* --- La clé du hero ------------------------------------------------------ */
.s42-hero{ padding-bottom: clamp(4rem,2.5rem + 7vw,9rem); }
.s42-cle{
  position:absolute; right:-6%; bottom:-4%;
  width:min(64rem, 92%); height:auto;
  color: var(--laiton); opacity:.16;
  transform: rotate(-8deg);
  pointer-events:none;
}
.s42-hero__fond{ opacity:1; }
.s42-hero__fond .trait{
  position:absolute; display:block; height:1px; width:70%;
  background:linear-gradient(90deg,transparent,var(--laiton),transparent);
  opacity:.28;
}
.s42-hero__fond .trait--1{ top:22%; left:-8%; transform:rotate(-8deg); }
.s42-hero__fond .trait--2{ bottom:14%; right:-8%; transform:rotate(-8deg); }
@media (min-width:1100px){
  .s42-hero__in{ max-width:62rem; }
  .s42-hero__accroche, .s42-preuves{ max-width:42rem !important; }
}
@media (max-width:900px){ .s42-cle{ display:none; } }

/* --- Illustrations des situations ---------------------------------------- */
.s42-cas__item{ position:relative; padding-top:clamp(1.6rem,1rem + 1.6vw,2.4rem); }
.s42-cas__item .ill{
  display:block; width:3.4rem; height:3.4rem; margin-bottom:1.1rem;
  color: var(--encre); opacity:.82;
  transition: color .3s cubic-bezier(.22,1,.36,1), transform .4s cubic-bezier(.22,1,.36,1);
}
.s42-cas__item .ill svg{ width:100%; height:100%; display:block; }
.s42-cas__item:hover .ill{ color: var(--laiton); transform: translateY(-3px); }
/* le numéro devient une cote, en haut à droite */
.s42-cas__item .n{
  position:absolute; top:1.1rem; right:1.2rem; margin:0;
  font-size:.78rem; letter-spacing:.14em; color:var(--encre-doux); opacity:.6;
}

/* --- Illustration de la section sombre ----------------------------------- */
.s42-garde__in{ position:relative; }
.s42-garde__ill{
  position:absolute; top:-1rem; right:0;
  width:clamp(6rem,4rem + 8vw,11rem); height:auto;
  color:var(--laiton); opacity:.28; pointer-events:none;
}
.s42-garde__ill svg{ width:100%; height:auto; display:block; }
@media (max-width:820px){ .s42-garde__ill{ display:none; } }

/* --- Titres de section : repère de plan ---------------------------------- */
.s42-sect__tete{ position:relative; padding-left:1.6rem; }
.s42-sect__tete::before{
  content:""; position:absolute; left:0; top:.35rem; bottom:.35rem;
  width:3px; background:var(--laiton);
}
.s42-garde h2, .s42-garde .s42-eyebrow{ position:relative; }

/* --- Étapes : reliées par un filet de cote ------------------------------- */
.s42-etapes{ position:relative; }
@media (min-width:900px){
  .s42-etapes::before{
    content:""; position:absolute; left:0; right:0; top:1.15rem; height:1px;
    background:repeating-linear-gradient(90deg,var(--trait) 0 8px,transparent 8px 15px);
  }
  .s42-etapes > li{ padding-top:0; }
}
.s42-etapes .n{
  background:var(--papier); padding-right:.8rem; display:inline-block;
  position:relative; z-index:1; color:var(--laiton);
}

/* --- Bandeau de preuves du hero : petites cotes -------------------------- */
.s42-preuves li::before{ content:"—"; font-weight:400; }

/* --- Zones : liste en plan ------------------------------------------------ */
.s42-zones{
  background-image:
    linear-gradient(rgba(216,208,190,.55) 1px, transparent 1px),
    linear-gradient(90deg, rgba(216,208,190,.55) 1px, transparent 1px);
  background-size:2.5rem 2.5rem;
}

/* Les pictos doivent se lire d'un coup d'œil : plus grands, traits francs. */
.s42-cas__item .ill{ width:4.6rem; height:4.6rem; opacity:1; }
.s42-cas__item{ padding-top:clamp(1.8rem,1.2rem + 1.8vw,2.6rem); }

/* ==========================================================================
   Questions fréquentes
   ========================================================================== */
.s42-faq{
  margin-top: clamp(2.6rem,2rem + 2vw,4rem);
  padding-top: clamp(1.8rem,1.2rem + 1.6vw,2.6rem);
  border-top: 1px solid var(--trait);
}
.s42-faq h2{ margin-top:0; border:0; padding-top:0; }
.s42-faq dl{ margin:0; }
.s42-faq dt{
  font-family: var(--serif); font-weight:700;
  font-size: clamp(1.06rem,1rem + .35vw,1.22rem);
  color: var(--encre); margin-top:1.9rem; padding-left:1.3rem; position:relative;
}
.s42-faq dt::before{
  content:""; position:absolute; left:0; top:.42em;
  width:.5rem; height:.5rem; background:var(--laiton);
}
.s42-faq dd{
  margin:.6rem 0 0 1.3rem; color:var(--encre-doux);
  max-width:68ch; line-height:1.72;
}
/* sur l'accueil la FAQ est en pleine largeur : on la recadre */
.page-id-6 .s42-faq{
  max-width:78rem; margin-inline:auto;
  padding-left:var(--bord,1.5rem); padding-right:var(--bord,1.5rem);
  padding-bottom:clamp(2.5rem,2rem + 3vw,4.5rem);
  border-top:0;
}

/* ==========================================================================
   « À lire aussi » — maillage vers les guides
   ========================================================================== */
.s42-lire{
  margin-top: clamp(2.6rem,2rem + 2vw,4rem);
  padding-top: clamp(1.8rem,1.2rem + 1.6vw,2.6rem);
  border-top:1px solid var(--trait);
}
.s42-lire h2{ margin-top:0; border:0; padding-top:0; font-size:clamp(1.3rem,1.1rem + .9vw,1.7rem); }
/* Bordures portées par les cartes, pas par la grille : avec un nombre
   impair d'éléments, un fond de grille laisse une case vide visible. */
.s42-lire__grille{
  display:grid; gap:1rem; margin-top:1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
}
.s42-lire__grille a{
  display:block; background:var(--papier); padding:1.3rem 1.4rem;
  border:1px solid var(--trait);
  text-decoration:none !important; font-weight:400;
  transition:background .3s, border-color .3s;
}
.s42-lire__grille a:hover{ border-color:var(--laiton); }
.s42-lire__grille a:hover{ background:#fffdf8; }
.s42-lire__grille .t{
  display:block; font-family:var(--serif); font-weight:700;
  font-size:1.04rem; color:var(--encre); margin-bottom:.4rem;
  text-decoration:underline; text-decoration-color:var(--laiton); text-decoration-thickness:2px;
  text-underline-offset:.18em;
}
.s42-lire__grille .d{ display:block; font-size:.92rem; color:var(--encre-doux); line-height:1.6; }
.page-id-6 .s42-lire{
  max-width:78rem; margin-inline:auto;
  padding-left:var(--bord,1.5rem); padding-right:var(--bord,1.5rem);
  padding-bottom:clamp(2.5rem,2rem + 3vw,4.5rem); border-top:0;
}

/* Garde-fou : rien ne doit pousser la page horizontalement. */
.s42-home{ overflow-x:clip; }
.s42-final .s42-btn{ max-width:min(100%, 24rem); }

/* ==========================================================================
   En-tête mobile : il occupait 46 % du premier écran avant d'atteindre le
   contenu. Sur un site d'urgence, ce qui compte doit être visible tout de
   suite. On compacte le bandeau, on garde la baseline mais lisible d'un
   trait, et on resserre la barre de navigation.
   ========================================================================== */
@media (max-width:768px){
  .site-header{ padding:.75rem 0 .7rem; }
  .site-header .inside-header{ padding-top:0; padding-bottom:0; }
  .main-title{ font-size:1.16rem !important; line-height:1.15; }
  .site-description{
    font-size:.66rem !important; letter-spacing:.07em;
    margin-top:.2rem; line-height:1.35;
  }
  .main-navigation .menu-toggle{
    padding:.62rem 1rem; font-size:.92rem; line-height:1.2;
  }
  .main-navigation{ line-height:1; }
}

/* Très petits écrans : la baseline est déjà dite dans le hero, on la retire
   pour laisser la place au message principal. Le texte reste dans le HTML
   pour les lecteurs d'écran et l'indexation. */
@media (max-width:420px){
  .site-description{
    position:absolute; width:1px; height:1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
  .site-header{ padding:.6rem 0 .55rem; }
  .main-title{ font-size:1.08rem !important; }
}

/* Le hero doit toucher la barre de navigation : GeneratePress laisse une
   marge haute sur .entry-content, inutile ici puisque la première section
   porte son propre rembourrage. */
.page-id-6 .entry-content{ margin-top:0; }

/* ==========================================================================
   Ajustements liés à la palette verte
   ========================================================================== */

/* Le petit texte en majuscules a besoin d'un vert plus soutenu sur fond
   clair : le vert Sainté seul tombe à 4,45:1, sous le seuil AA. */
.s42-eyebrow{ color: var(--vert-texte); }
.s42-eyebrow--clair{ color: #6fd898; }

/* Bouton d'appel : blanc sur vert profond. C'est la combinaison la plus
   lisible (12,8:1) et la plus visible sur les sections sombres. */
.s42-btn--tel{ background:#fff; color:var(--encre) !important; }
.s42-btn--tel:hover{ background:#e8f5ec; }
/* Sur fond clair, on inverse : vert plein, texte blanc. */
.s42-final .s42-btn--tel{ background:var(--laiton); color:#fff !important; }
.s42-final .s42-btn--tel:hover{ background:var(--laiton-clair); }

/* Barre fixe mobile : le bouton d'appel reste le point le plus contrasté. */
.s42-barre .appel{ background:#fff; color:var(--encre) !important; }

/* Bandeau d'intro des pages intérieures */
.intro a[href^="tel:"]{ background:#fff; color:var(--encre) !important; }
.intro a[href^="tel:"]:hover{ background:#e8f5ec; }

/* Liseré du haut de page et soulignements */
.site-header{ border-bottom-color:var(--laiton); }
.s42-cle{ opacity:.2; }

/* Sur fond vert profond, la sur-titre doit être clair : la règle générique
   (vert soutenu, pensée pour le fond clair) le rendait illisible. */
.s42-hero .s42-eyebrow,
.s42-garde .s42-eyebrow{ color:#7fe0a6; }
.s42-hero .s42-eyebrow .pastille{
  background:#7fe0a6;
  box-shadow:0 0 0 .28rem rgba(127,224,166,.22);
}
@keyframes s42pulse{
  0%,100%{ box-shadow:0 0 0 .28rem rgba(127,224,166,.22); }
  50%    { box-shadow:0 0 0 .5rem rgba(127,224,166,.06); }
}

/* ==========================================================================
   Hero en deux colonnes : discours à gauche, devis à droite.
   Même disposition que sur accord-artisans. En dessous de 980 px, le
   formulaire passe sous le texte — l'urgence appelle, elle ne remplit pas
   un formulaire.
   ========================================================================== */
@media (min-width:980px){
  .s42-hero__in{
    display:grid; grid-template-columns:1.15fr .85fr;
    gap:clamp(2.5rem,1.5rem + 3vw,4.5rem); align-items:start;
    max-width:82rem;
  }
  .s42-hero__texte{ min-width:0; }
}
.s42-hero__texte .s42-preuves{ margin-bottom:0; }

.s42-devis{
  background:#fff; color:var(--encre);
  border-radius:6px; padding:clamp(1.4rem,1rem + 1.4vw,2rem);
  box-shadow:0 18px 40px -18px rgba(10,58,34,.55);
  margin-top:2.5rem;
}
@media (min-width:980px){ .s42-devis{ margin-top:0; } }

.s42-devis__badge{
  display:inline-block; margin:0 0 1rem;
  background:#e4f4ea; color:var(--vert-texte);
  font-size:.76rem; font-weight:700; letter-spacing:.06em;
  padding:.4rem .8rem; border-radius:3px;
}
.s42-devis h2{
  margin:0 0 .6rem !important; border:0 !important; padding-top:0 !important;
  font-size:clamp(1.5rem,1.2rem + 1.2vw,2rem); color:var(--encre);
}
.s42-devis__intro{
  margin:0 0 1.4rem; font-size:.97rem; color:var(--encre-doux); line-height:1.6;
}
.s42-devis__urgence{
  margin:1.2rem 0 0; padding-top:1.1rem; border-top:1px solid var(--trait);
  font-size:.92rem; color:var(--encre-doux);
}
.s42-devis__urgence a{ font-weight:700; color:var(--encre); white-space:nowrap; }

/* --- Grille des champs --------------------------------------------------- */
.devis-form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.85rem; }
.devis-field-full{ grid-column:1 / -1; }
@media (max-width:520px){ .devis-form-grid{ grid-template-columns:1fr; } }

.s42-devis .devis-field label{
  display:block; font-size:.84rem; font-weight:700;
  color:var(--encre); margin-bottom:.3rem;
}
.s42-devis input[type=text],
.s42-devis input[type=email],
.s42-devis input[type=tel],
.s42-devis select,
.s42-devis textarea{
  width:100%; box-sizing:border-box;
  background:#f7faf8; border:1px solid var(--trait); border-radius:3px;
  padding:.62rem .7rem; font-family:var(--sans); font-size:.95rem; color:var(--encre);
}
.s42-devis input:focus,.s42-devis select:focus,.s42-devis textarea:focus{
  outline:none; border-color:var(--laiton); box-shadow:0 0 0 3px rgba(0,132,61,.15);
}
.s42-devis input[type=file]{
  width:100%; font-size:.86rem; color:var(--encre-doux);
  padding:.5rem 0;
}
.s42-devis .devis-submit{ margin:1.2rem 0 0; }
.s42-devis input[type=submit]{
  width:100%; background:var(--laiton); color:#fff; border:0; border-radius:4px;
  font-family:var(--serif); font-weight:700; font-size:1.05rem;
  padding:.85rem 1.5rem; cursor:pointer;
  transition:background .25s cubic-bezier(.22,1,.36,1);
}
.s42-devis input[type=submit]:hover{ background:var(--laiton-clair); }

/* Messages de Contact Form 7 */
.s42-devis .wpcf7-response-output{
  margin:1rem 0 0 !important; padding:.7rem .9rem !important;
  border-radius:3px; font-size:.9rem;
}
.s42-devis .wpcf7-not-valid-tip{ font-size:.8rem; color:var(--alerte); margin-top:.2rem; }