/* theme.css — Les Couvreurs Compagnons
   Bloc 1 : CSS de maquette-reference.html, repris INTÉGRALEMENT et sans retouche.
   Bloc 2 : adaptations WordPress / WPBakery (voir le séparateur en bas de fichier).
   Les polices sont déclarées à part dans fonts.css (auto-hébergées). */

:root{
  --rouge:#DE1D25;
  --rouge-fonce:#A9151B;
  --jaune:#FBD117;
  --ardoise:#1B2028;
  --ardoise-2:#262D38;
  --zinc:#8894A6;
  --craie:#F7F6F3;
  --craie-2:#EDEAE4;
  --encre:#14181E;
  --ligne:#DFDBD3;
  --pente:56px;
  --display:'Archivo',system-ui,sans-serif;
  --texte:'Karla',system-ui,sans-serif;

  /* --- Sections claires « pierre jaune » : devis --- */
  --fA:#EAE0C9;
  --fA-txt:#1B2028;
  --fA-txt2:#5E5744;
  --fA-accent:#A9151B;
  --fA-trame:rgba(0,0,0,.032);
  --fA-ombre:rgba(70,58,30,.22);
  /* --- Section « L'entreprise » : rouge de marque --- */
  --fB:#A9151B;
  --fB-txt:#FFFFFF;
  --fB-txt2:#F2CFD1;
  --fB-accent:#FBD117;
  --fB-ligne:rgba(255,255,255,.24);
  --fB-trame:rgba(255,255,255,.06);
  /* --- Bande de toit sous le hero --- */
  --bande:#DE1D25;

  /* --- FOND DU HERO — traitement A : photo en filigrane (par défaut) --- */
  --h-bg:#EAE0C9;
  --h-txt:#1B2028;
  --h-txt2:#463F2F;
  --h-accent:#A9151B;
  --h-ombre:rgba(70,58,30,.26);
  --h-photo-op:1;
  --h-photo-filtre:grayscale(.28) sepia(.16) contrast(.94) brightness(1.03);
  --h-voile:linear-gradient(100deg,rgba(238,229,208,.88) 0%,rgba(238,229,208,.74) 34%,rgba(238,229,208,.50) 68%,rgba(238,229,208,.40) 100%);
  --h-trame:transparent;
}
/* --- THÈME « ARDOISE » : version initiale --- */
html[data-theme="ardoise"]{
  --fA:#1B2028;--fA-txt:#fff;--fA-txt2:#C3CCD8;--fA-accent:#FBD117;
  --fA-trame:rgba(255,255,255,.05);--fA-ombre:rgba(0,0,0,.34);
  --fB:#1B2028;--fB-txt:#fff;--fB-txt2:#B7C1CE;--fB-accent:#FBD117;
  --fB-ligne:rgba(255,255,255,.13);--fB-trame:rgba(255,255,255,.05);
  --bande:transparent;--bande-h:0;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--craie);color:var(--encre);
  font-family:var(--texte);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.sec{padding:104px 0}
.sec--serre{padding:72px 0}

/* ---------- typo ---------- */
h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.022em;line-height:1.08;font-weight:800}
h1{font-size:clamp(27px,3.6vw,44px)}
h2{font-size:clamp(28px,3.7vw,44px)}
h3{font-size:20px;letter-spacing:-.01em;font-weight:700}
p{margin:0 0 16px}
.eyebrow{
  font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.19em;
  text-transform:uppercase;color:var(--rouge);margin:0 0 16px;display:flex;align-items:center;gap:12px
}
.eyebrow::before{content:"";width:26px;height:3px;background:var(--rouge);display:block}
.eyebrow--clair{color:var(--jaune)}
.eyebrow--clair::before{background:var(--jaune)}
.lead{font-size:19px;color:#4A5260;max-width:62ch}
.mute{color:#5B6472}

/* ---------- boutons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;font-family:var(--display);font-weight:700;
  font-size:15px;letter-spacing:.01em;padding:15px 26px;border-radius:2px;text-decoration:none;
  border:2px solid transparent;transition:transform .15s ease,background .15s ease,color .15s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--rouge{background:var(--rouge);color:#fff}
.btn--rouge:hover{background:var(--rouge-fonce)}
.btn--fant{border-color:currentColor;background:transparent}
.btn--fant:hover{background:var(--encre);color:var(--craie);border-color:var(--encre)}
.btn--fant-clair:hover{background:#fff;color:var(--encre);border-color:#fff}
.btn--jaune{background:var(--jaune);color:var(--encre)}
.btn--sm{padding:11px 18px;font-size:14px}

/* ---------- barre utilitaire + header ---------- */
.util{background:var(--encre);color:#9AA5B4;font-size:13.5px}
.util .wrap{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-top:9px;padding-bottom:9px}
.util strong{color:#fff;font-weight:500}
.util-drt{display:flex;gap:26px;align-items:center}
.util a{text-decoration:none}
.util a:hover{color:#fff}

.hdr{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--ligne)}
.hdr .wrap{display:flex;align-items:center;gap:32px;padding-top:12px;padding-bottom:12px}
.marque{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.marque img{width:50px;height:50px;object-fit:contain}
.marque b{font-family:var(--display);font-weight:800;font-size:21px;letter-spacing:-.02em;display:block;line-height:1}
.marque span{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:#78818F;font-weight:500}
.nav{display:flex;gap:28px;margin-left:auto;font-family:var(--display);font-weight:600;font-size:15px}
.nav a{text-decoration:none;padding:4px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--rouge)}
.hdr-cta{display:flex;gap:10px;align-items:center}
.tel-hdr{font-family:var(--display);font-weight:800;font-size:17px;text-decoration:none;white-space:nowrap;display:flex;align-items:center;gap:8px}
.tel-hdr svg{color:var(--rouge)}
.burger{display:none;background:none;border:1px solid var(--ligne);border-radius:2px;padding:9px 11px;margin-left:auto}
.burger span{display:block;width:20px;height:2px;background:var(--encre);margin:4px 0}

/* ---------- hero ---------- */
.hero{
  position:relative;background:var(--h-bg);color:var(--h-txt);overflow:hidden;
  padding:96px 0 calc(96px + var(--pente));
}
/* calque photo + voile (filigrane) */
.hero-photo{
  position:absolute;inset:0;z-index:0;
  background-image:url("assets/hero-neuchatel.webp");
  background-size:cover;background-position:center 48%;
  opacity:var(--h-photo-op);filter:var(--h-photo-filtre);
}
.hero::before{ /* voile de lisibilité + trame */
  content:"";position:absolute;inset:0;z-index:1;
  background:var(--h-voile),repeating-linear-gradient(115deg,var(--h-trame) 0 1px,transparent 1px 13px);
}
/* pente de toit : bande rouge + liseré jaune, tracée en SVG pour rester nette
   quelle que soit la largeur de l'écran */
.pente{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:calc(var(--pente) + 1px);z-index:3;display:block}
.hero .wrap{position:relative;z-index:2}
.hero .eyebrow--clair{color:var(--h-accent)}
.hero .eyebrow--clair::before{background:var(--h-accent)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero h1{max-width:24ch;line-height:1.14}
.hero h1 em{font-style:normal;color:var(--h-accent)}
.hero p.lead{color:var(--h-txt2);margin-top:22px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero-note{margin-top:20px;font-size:14px;color:var(--h-txt2)}
.hero .btn--fant{color:var(--h-txt)}
.hero .btn--fant:hover{background:var(--h-txt);color:var(--h-bg);border-color:var(--h-txt)}

/* carte avis dans le hero */
.carte-avis{
  background:#fff;color:var(--encre);border-radius:3px;padding:26px 26px 22px;
  box-shadow:0 26px 60px var(--h-ombre);border-top:5px solid var(--rouge)
}
.avis-tete{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.avis-note{font-family:var(--display);font-weight:800;font-size:42px;line-height:1}
.etoiles{color:#F5A623;font-size:17px;letter-spacing:2px}
.carte-avis .src{font-size:13px;color:#6C7583;margin:0}
.carte-avis blockquote{margin:18px 0 0;padding-top:18px;border-top:1px solid var(--craie-2);font-size:15.5px;line-height:1.6}
.carte-avis cite{display:block;margin-top:10px;font-style:normal;font-size:13px;color:#6C7583}

/* ---------- bandeau réassurance ---------- */
.reass{background:#fff;border-bottom:1px solid var(--ligne)}
.reass-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.reass-item{padding:30px 26px;border-right:1px solid var(--ligne);display:flex;gap:14px;align-items:flex-start}
.reass-item:last-child{border-right:0}
.reass-item svg{flex-shrink:0;color:var(--rouge);margin-top:2px}
.reass-item b{font-family:var(--display);font-weight:700;font-size:15.5px;display:block;line-height:1.3}
.reass-item span{font-size:14px;color:#6C7583;line-height:1.5}

/* ---------- urgence ---------- */
.urgence{background:var(--encre);color:#fff;position:relative;overflow:hidden}
.hazard{height:12px;background:repeating-linear-gradient(-45deg,var(--jaune) 0 18px,var(--encre) 18px 36px)}
.urgence .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-top:38px;padding-bottom:38px;flex-wrap:wrap}
.urgence h2{font-size:clamp(24px,3vw,34px)}
.urgence p{color:#A9B3C1;margin:8px 0 0;max-width:56ch;font-size:16px}
.puce-live{display:inline-flex;align-items:center;gap:9px;font-family:var(--display);font-weight:700;font-size:12px;letter-spacing:.17em;text-transform:uppercase;color:var(--jaune);margin-bottom:12px}
.puce-live i{width:9px;height:9px;border-radius:50%;background:var(--jaune);box-shadow:0 0 0 0 rgba(251,209,23,.7);animation:pulse 2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgba(251,209,23,0)}100%{box-shadow:0 0 0 0 rgba(251,209,23,0)}}
.tel-gros{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.4vw,40px);text-decoration:none;letter-spacing:-.02em;display:block}
.tel-gros:hover{color:var(--jaune)}

/* ---------- prestations ---------- */
.tete-sec{max-width:64ch;margin-bottom:52px}
.presta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.presta{
  background:#fff;border:1px solid var(--ligne);border-radius:3px;overflow:hidden;
  display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease
}
.presta:hover{transform:translateY(-5px);box-shadow:0 18px 44px rgba(20,24,30,.11)}
.presta-visuel{
  height:190px;position:relative;background:var(--ardoise-2);
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px);
  display:flex;align-items:flex-end;padding:16px
}
.presta-visuel span{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#8F9AAA;font-family:var(--display);font-weight:600}
.presta-corps{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.presta h3{margin-bottom:10px}
.presta p{font-size:15.5px;color:#5B6472}
.presta ul{list-style:none;padding:0;margin:0 0 22px;font-size:15px}
.presta li{padding:7px 0 7px 24px;position:relative;border-top:1px solid var(--craie-2)}
.presta li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:9px;background:var(--rouge);clip-path:polygon(50% 0,100% 100%,0 100%)}
.presta .lien{margin-top:auto;font-family:var(--display);font-weight:700;font-size:14.5px;color:var(--rouge);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.presta .lien:hover{gap:14px}
.presta--urgence{border-color:var(--rouge);border-width:2px}
.badge-24{position:absolute;top:0;right:0;background:var(--rouge);color:#fff;font-family:var(--display);font-weight:800;font-size:12px;letter-spacing:.12em;padding:8px 14px}

.sous-presta{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px;align-items:center}
.sous-presta b{font-family:var(--display);font-size:14px;margin-right:6px}
.pill{background:#fff;border:1px solid var(--ligne);border-radius:100px;padding:8px 16px;font-size:14.5px}

/* ---------- pourquoi / réassurance longue ---------- */
.pourquoi{background:var(--fB);color:var(--fB-txt);position:relative;overflow:hidden}
.pourquoi::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,var(--fB-trame) 0 1px,transparent 1px 13px)}
.pourquoi .wrap{position:relative;z-index:2}
.pourquoi .eyebrow--clair{color:var(--fB-accent)}
.pourquoi .eyebrow--clair::before{background:var(--fB-accent)}
.pourquoi-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:start}
.pourquoi h2{max-width:16ch}
.pourquoi .lead{color:var(--fB-txt2)}
.preuves{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--fB-ligne)}
.preuve{background:var(--fB);padding:26px 24px}
.preuve b{font-family:var(--display);font-weight:800;font-size:16px;display:block;margin-bottom:7px}
.preuve span{font-size:14.5px;color:var(--fB-txt2);line-height:1.55}
.chiffres{display:flex;gap:44px;margin-top:36px;flex-wrap:wrap}
.chiffre b{font-family:var(--display);font-weight:800;font-size:40px;color:var(--fB-accent);display:block;line-height:1}
.chiffre span{font-size:14px;color:var(--fB-txt2)}

/* ---------- processus ---------- */
.etapes{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--encre)}
.etape{padding:30px 26px 30px 0;border-right:1px solid var(--ligne);position:relative}
.etape:last-child{border-right:0;padding-right:0}
.etape:not(:first-child){padding-left:26px}
.etape .num{font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.14em;color:var(--rouge);display:block;margin-bottom:14px}
.etape h3{font-size:18px;margin-bottom:8px}
.etape p{font-size:15px;color:#5B6472;margin:0}

/* ---------- réalisations (pose en tuiles) ---------- */
.real-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.real{position:relative;border-radius:3px;overflow:hidden;background:var(--ardoise-2)}
.real-grid .real:nth-child(2){transform:translateY(34px)}
.real-grid .real:nth-child(5){transform:translateY(34px)}
.real-visuel{
  aspect-ratio:4/3;
  background-image:repeating-linear-gradient(115deg,rgba(255,255,255,.05) 0 1px,transparent 1px 12px),
                   linear-gradient(160deg,#2E3644,#1B2028);
}
.real-info{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:linear-gradient(transparent,rgba(15,18,23,.92) 55%);color:#fff}
.real-info b{font-family:var(--display);font-weight:700;font-size:16px;display:block}
.real-info span{font-size:13.5px;color:#B9C3D0;display:flex;align-items:center;gap:6px;margin-top:3px}
.real-grid+.centre{margin-top:70px}
.centre{text-align:center}

/* ---------- avis ---------- */
.avis{background:#fff}
.avis-entete{display:flex;align-items:center;gap:24px;flex-wrap:wrap;margin-bottom:44px;
  border:1px solid var(--ligne);border-left:5px solid var(--rouge);padding:22px 26px;border-radius:3px}
.avis-entete .g{font-family:var(--display);font-weight:800;font-size:34px;line-height:1}
.avis-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.avis-carte{border:1px solid var(--ligne);border-radius:3px;padding:26px;background:var(--craie)}
.avis-carte .etoiles{margin-bottom:12px;display:block}
.avis-carte p{font-size:15.5px;line-height:1.62}
.avis-carte cite{font-style:normal;font-size:13.5px;color:#6C7583;display:block;margin-top:14px;padding-top:14px;border-top:1px solid var(--ligne)}

/* ---------- zones ---------- */
.zones{background:var(--craie-2)}
.zones-grid{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:center}
.zones-liste{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.zone b{font-family:var(--display);font-weight:800;font-size:15px;display:block;margin-bottom:8px;padding-bottom:8px;border-bottom:2px solid var(--rouge)}
.zone span{font-size:15px;color:#5B6472;line-height:1.8}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--ligne);padding:22px 0}
.faq summary{font-family:var(--display);font-weight:700;font-size:18px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:26px;color:var(--rouge);line-height:1;flex-shrink:0}
.faq details[open] summary::after{content:"–"}
.faq p{margin:14px 0 0;color:#5B6472;font-size:16px;max-width:76ch}

/* ---------- devis ---------- */
.devis{background:var(--fA);color:var(--fA-txt);position:relative;overflow:hidden}
.devis::before{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,var(--fA-trame) 0 1px,transparent 1px 13px)}
.devis .wrap{position:relative;z-index:2}
.devis .eyebrow--clair{color:var(--fA-accent)}
.devis .eyebrow--clair::before{background:var(--fA-accent)}
.devis-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.devis .lead{color:var(--fA-txt2)}
.contact-bloc{margin-top:28px;display:grid;gap:16px}
.contact-item{display:flex;gap:13px;align-items:flex-start;font-size:15.5px;color:var(--fA-txt2)}
.contact-item svg{color:var(--fA-accent);flex-shrink:0;margin-top:3px}
.contact-item b{color:var(--fA-txt);font-family:var(--display);display:block;font-weight:700}
.form{background:#fff;color:var(--encre);padding:34px;border-radius:3px;border-top:5px solid var(--fA-accent);box-shadow:0 20px 50px var(--fA-ombre)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.champ{margin-bottom:16px}
.champ label{display:block;font-family:var(--display);font-weight:600;font-size:13px;letter-spacing:.04em;margin-bottom:6px}
.champ input,.champ select,.champ textarea{
  width:100%;padding:12px 14px;border:1px solid var(--ligne);border-radius:2px;font-family:var(--texte);
  font-size:16px;background:var(--craie);color:var(--encre)
}
.champ input:focus,.champ select:focus,.champ textarea:focus{outline:3px solid rgba(222,29,37,.28);border-color:var(--rouge)}
.champ textarea{min-height:110px;resize:vertical}
.form .btn{width:100%;justify-content:center;margin-top:6px}
.form small{display:block;margin-top:14px;font-size:13px;color:#6C7583;text-align:center}

/* ---------- footer ---------- */
.pied{background:var(--encre);color:#8894A6;font-size:15px}
.pied-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding:64px 0 44px}
.pied h4{color:#fff;font-size:14px;letter-spacing:.13em;text-transform:uppercase;margin-bottom:16px;font-weight:700}
.pied a{text-decoration:none}
.pied a:hover{color:#fff}
.pied ul{list-style:none;padding:0;margin:0}
.pied li{padding:5px 0}
.pied .marque b{color:#fff}
.pied .marque span{color:#77808E}
.pied-bas{border-top:1px solid rgba(255,255,255,.1);padding:20px 0;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:13.5px}

/* barre mobile collante */
.barre-mobile{display:none}

@media(max-width:1000px){
  .hero-grid,.pourquoi-grid,.zones-grid,.devis-grid{grid-template-columns:1fr;gap:44px}
  .reass-grid{grid-template-columns:1fr 1fr}
  .reass-item:nth-child(2){border-right:0}
  .reass-item:nth-child(1),.reass-item:nth-child(2){border-bottom:1px solid var(--ligne)}
  .presta-grid,.avis-cols,.real-grid{grid-template-columns:1fr 1fr}
  .etapes{grid-template-columns:1fr 1fr}
  .etape{padding:26px 22px 26px 0!important;border-bottom:1px solid var(--ligne)}
  .etape:nth-child(2n){border-right:0;padding-left:22px!important}
  .pied-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  body{font-size:16px}
  .sec{padding:68px 0}
  .util .wrap{display:none}
  .nav,.hdr-cta{display:none}
  .burger{display:block}
  .presta-grid,.avis-cols,.real-grid,.reass-grid,.zones-liste,.form-row,.preuves,.etapes{grid-template-columns:1fr}
  .reass-item{border-right:0;border-bottom:1px solid var(--ligne)}
  .real-grid .real:nth-child(2),.real-grid .real:nth-child(5){transform:none}
  .pied-grid{grid-template-columns:1fr}
  .barre-mobile{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:80;border-top:1px solid rgba(0,0,0,.1)
  }
  .barre-mobile a{
    flex:1;padding:15px 8px;text-align:center;font-family:var(--display);font-weight:800;font-size:14.5px;
    text-decoration:none;display:flex;align-items:center;justify-content:center;gap:8px
  }
  .barre-mobile .m-tel{background:var(--rouge);color:#fff}
  .barre-mobile .m-devis{background:var(--jaune);color:var(--encre)}
  body{padding-bottom:56px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ==========================================================================
   ADAPTATIONS WORDPRESS
   Tout ce qui précède est le CSS de maquette-reference.html, repris sans
   modification. Ce bloc contient les seuls ajouts nécessaires au passage sous
   WordPress + WPBakery. Ne rien changer au-dessus : la maquette est la référence.
   ========================================================================== */

/* --- Hero : la maquette pose la photo en background-image, mais le §11 du
   cahier des charges impose un <picture> (variante mobile, fetchpriority,
   preload) — impossible en CSS. On neutralise donc le background et on
   applique le même rendu à l'<img>, filtre et voile inchangés. --- */
.hero-photo{background-image:none}
.hero-photo img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:center 48%;
}

/* --- Neutralisation des conteneurs WPBakery ---
   Chaque section du thème sort son propre <section> pleine largeur à fond
   coloré. WPBakery l'enveloppe dans .vc_row > .vc_column_container, dont les
   marges négatives et le padding casseraient les fonds. On les remet à plat
   plutôt que d'obliger le client à cocher « row stretch » sur chaque bloc :
   le rendu reste correct même s'il déplace une section. --- */
.couvcompagnons-page .vc_row,
.couvcompagnons-page .vc_row .vc_column_container,
.couvcompagnons-page .vc_row .vc_column_container>.vc_column-inner,
.couvcompagnons-page .wpb_wrapper{margin:0;padding:0;width:100%}
.couvcompagnons-page .wpb_content_element{margin-bottom:0}
.couvcompagnons-page .vc_row{display:block}

/* --- Menu mobile ---
   La maquette montre le bouton burger mais pas le panneau déplié : il est
   décrit ici. Le panneau réutilise les couleurs du header. --- */
.nav-mobile{display:none}
@media(max-width:720px){
  .nav-mobile[data-ouvert="1"]{
    display:block;position:absolute;left:0;right:0;top:100%;
    background:#fff;border-bottom:1px solid var(--ligne);
    box-shadow:0 18px 40px rgba(20,24,30,.13);padding:8px 24px 20px
  }
  .nav-mobile a{
    display:block;padding:13px 0;text-decoration:none;
    font-family:var(--display);font-weight:600;font-size:16px;
    border-bottom:1px solid var(--craie-2)
  }
  .nav-mobile a:last-child{border-bottom:0}
  .nav-mobile .btn{width:100%;justify-content:center;margin-top:14px}
  .hdr{position:sticky}
  .hdr .wrap{position:relative}
}

/* --- Hero sans carte d'avis ---
   Tant que la note Google n'est pas vérifiée, la carte ne s'affiche pas (§2).
   Le hero repasse alors sur une seule colonne, sinon 40 % de la largeur
   resterait vide à droite du titre. --- */
.hero-grid--seul{grid-template-columns:1fr}
.hero-grid--seul h1{max-width:20ch}

/* --- Photo de prestation ---
   La maquette montre un aplat d'ardoise avec une légende. Dès qu'une vraie
   photo est choisie, elle remplit le cadre et la légende passe au-dessus. --- */
.presta-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.presta-visuel span{position:relative;z-index:1}
.presta-visuel .badge-24{position:absolute;z-index:2}

/* --- Photo de réalisation ---
   Les cartes de la maquette ont un visuel en dégradé d'ardoise ; dès qu'une
   image mise en avant existe, elle prend toute la place du cadre 4/3. --- */
.real-visuel{position:relative}
.real-visuel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.real a:hover .real-info b{text-decoration:underline}

/* --- Avant / après sur la fiche chantier --- */
.avant-apres{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.avant-apres figure{margin:0}
.avant-apres img{border-radius:3px;width:100%}
.avant-apres figcaption{
  font-family:var(--display);font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rouge);margin-top:10px
}
@media(max-width:720px){.avant-apres{grid-template-columns:1fr}}

/* --- Pagination des archives --- */
.pagination{margin-top:50px;display:flex;justify-content:center}
.pagination .page-numbers{
  font-family:var(--display);font-weight:700;padding:10px 15px;text-decoration:none;
  border:1px solid var(--ligne);margin:0 4px;border-radius:2px;background:#fff
}
.pagination .page-numbers.current{background:var(--rouge);color:#fff;border-color:var(--rouge)}

/* --- Contact Form 7 ---
   Le balisage du formulaire reprend déjà les classes .form-row / .champ de la
   maquette (voir inc/form-devis.php) : il reste à neutraliser les conteneurs
   propres à CF7 et à styler ses messages. --- */
.form .wpcf7-form-control-wrap{display:block}
.form .wpcf7-form-control:not(.btn){
  width:100%;padding:12px 14px;border:1px solid var(--ligne);border-radius:2px;
  font-family:var(--texte);font-size:16px;background:var(--craie);color:var(--encre)
}
.form .wpcf7-form-control:not(.btn):focus{outline:3px solid rgba(222,29,37,.28);border-color:var(--rouge)}
.form textarea.wpcf7-form-control{min-height:110px;resize:vertical}
.form input[type="file"].wpcf7-form-control{padding:10px 12px;background:#fff}
.form .wpcf7-submit{width:100%;justify-content:center;margin-top:6px;cursor:pointer}
.form .wpcf7-not-valid-tip{color:var(--rouge-fonce);font-size:13.5px;margin-top:6px}
.form .wpcf7-response-output{
  margin:18px 0 0;padding:14px 16px;border:2px solid var(--ligne);border-radius:2px;font-size:15px
}
.form form.sent .wpcf7-response-output{border-color:#2E7D32;background:#F1F8F2}
.form form.invalid .wpcf7-response-output,
.form form.failed .wpcf7-response-output,
.form form.spam .wpcf7-response-output{border-color:var(--rouge);background:#FDF2F2}
.form .wpcf7-spinner{margin:10px auto 0;display:block}
/* Champ-piège anti-robot : invisible à l'œil, ignoré des lecteurs d'écran. */
.couvcompagnons-pot{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* --- Séparateur des liens légaux du pied de page ---
   La maquette écrit « Mentions légales · Protection des données ». Le point
   médian est tracé en bordure plutôt qu'en ::before : il ne doit pas devenir
   cliquable ni être lu par un lecteur d'écran. --- */
.pied-bas>span:last-child a+a{
  margin-left:12px;padding-left:12px;border-left:1px solid rgba(255,255,255,.18)
}

/* --- Accessibilité : lien d'évitement et texte réservé aux lecteurs d'écran --- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap
}
.lien-evitement{
  position:absolute;left:-9999px;z-index:999;padding:12px 20px;
  background:var(--rouge);color:#fff;font-family:var(--display);font-weight:700;text-decoration:none
}
.lien-evitement:focus{left:8px;top:8px}
:focus-visible{outline:3px solid rgba(222,29,37,.55);outline-offset:2px}

/* --- Barre d'admin WordPress : décale le header collant --- */
body.admin-bar .hdr{top:32px}
@media(max-width:782px){body.admin-bar .hdr{top:46px}}

/* --- Contenu éditorial classique (pages légales, articles) --- */
.contenu{max-width:76ch}
.contenu h2{font-size:clamp(24px,3vw,32px);margin:38px 0 14px}
.contenu h3{margin:28px 0 10px}
.contenu ul,.contenu ol{margin:0 0 18px;padding-left:22px}
.contenu li{padding:3px 0}
.contenu a{color:var(--rouge-fonce);text-decoration:underline}
.contenu img{margin:22px 0;border-radius:3px}
.contenu blockquote{
  margin:24px 0;padding:4px 0 4px 22px;border-left:4px solid var(--rouge);
  font-size:18px;color:#4A5260
}
.alignleft{float:left;margin:6px 26px 18px 0}
.alignright{float:right;margin:6px 0 18px 26px}
.aligncenter{margin-left:auto;margin-right:auto}
.wp-caption-text{font-size:14px;color:#6C7583;margin-top:8px}