/*
Theme Name: Couleurs Bois Rénovation
Theme URI: https://couleursboisrenovation.fr
Author: Couleurs Bois Rénovation
Description: Thème de site complet (Full Site Editing) pour Couleurs Bois Rénovation, entreprise du bâtiment sur le Bassin d'Arcachon. Entièrement modifiable avec les blocs et l'éditeur de site de WordPress.
Version: 1.7
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: couleurs-bois
*/

/* ============ TOKENS ============ */
:root{
  --ink:#14100d;
  --ink-line: rgba(20,16,13,0.14);
  --sand:#f7f2e6;
  --sand-deep:#eae1c9;
  --paper:#ffffff;
  --accent:#dc7b28;
  --accent-deep:#b85f1a;
  --text-on-dark:#f2ead9;
  --text-on-dark-dim: rgba(242,234,217,0.68);
  --text-on-light:#221c16;
  --text-on-light-dim: rgba(34,28,22,0.66);
  --hair: rgba(20,16,13,0.13);
  --shadow: 0 18px 40px -20px rgba(20,16,13,0.35);
  --wrap: 1180px;
}

*{box-sizing:border-box;}
body{ background:var(--sand); color:var(--text-on-light); font-family:'Work Sans', ui-sans-serif, system-ui, sans-serif; font-size:16px; line-height:1.55; overflow-x:hidden;}
img{max-width:100%;}
a{color:inherit;}
h1,h2,h3,h4,h5{ font-family:'Anton', 'Arial Narrow', sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:0.01em; margin:0;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 28px;}
::selection{background:var(--accent); color:var(--ink);}

/* ============ EN-TÊTE ============ */
.site-header{ position:sticky; top:0; z-index:40; background:var(--paper); border-bottom:1px solid var(--hair); padding:0 !important; }
.navrow{
  max-width:var(--wrap); margin:0 auto; padding:12px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
}
.brand-logo{ margin:0; flex:none;}
.brand-logo img{ height:52px; width:auto; }
.nav-links{ font-size:0.86rem; flex:1 1 auto; justify-content:center;}
.nav-links a, .nav-links a.wp-block-navigation-item__content{
  color:var(--text-on-light-dim); text-decoration:none; letter-spacing:0.04em; text-transform:uppercase; font-weight:600;
  padding:6px 2px; border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.nav-links a:hover{ color:var(--text-on-light); border-color:var(--accent);}
.navcta{ display:flex; align-items:center; gap:14px; flex:none;}
.tel-chip{ margin:0; }
.tel-chip a{
  display:inline-flex; align-items:center; gap:8px; color:var(--text-on-light); text-decoration:none;
  font-family:'IBM Plex Mono', monospace; font-size:0.86rem; font-weight:500; white-space:nowrap;
}
.tel-chip a:hover{ color:var(--accent-deep);}
.tel-chip.secondary{ padding-left:14px; border-left:1px solid var(--hair);}
.navcta-btn{ margin:0;}

/* Boutons "Plein (orange)" / "Contour" — styles de bloc pour core/button */
.wp-block-button__link{
  font-family:'Work Sans', sans-serif; font-weight:700; font-size:0.92rem;
  border-radius:999px !important;
  padding:12px 24px; transition: transform .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.is-style-cb-fill .wp-block-button__link{ background:var(--accent); color:var(--ink); border:2px solid var(--accent);}
.is-style-cb-fill .wp-block-button__link:hover{ background:var(--accent-deep); border-color:var(--accent-deep); transform:translateY(-2px); color:var(--ink);}
.is-style-cb-outline .wp-block-button__link{ background:transparent; color:var(--text-on-light); border:2px solid var(--sand-deep);}
.is-style-cb-outline .wp-block-button__link:hover{ border-color:var(--accent); color:var(--accent-deep); background:transparent;}
.navcta-btn .wp-block-button__link{ padding:10px 20px; font-size:0.86rem;}

/* ============ HERO ============ */
.hero{ background:var(--sand); padding:76px 0 0; }
.hero-grid{ align-items:center; gap:48px; padding-bottom:64px; }
.eyebrow{
  font-family:'IBM Plex Mono', monospace; font-size:0.78rem; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--accent); display:flex; align-items:center; gap:10px; margin:0 0 18px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--accent); display:inline-block;}
.hero h1{ font-size:clamp(2.6rem, 5.6vw, 4.5rem); line-height:0.98; color:var(--text-on-light); margin:18px 0 0;}
.hero h1 em{ font-style:normal; color:var(--accent);}
.lead{ margin-top:22px; font-size:1.08rem; color:var(--text-on-light-dim); max-width:46ch;}
.hero-ctas{ margin-top:34px; }
.hero-stats{ display:flex; gap:0; flex-wrap:wrap; margin-top:48px; border-top:1px solid var(--hair); }
.hero-stat-item{ padding:18px 26px 0 0; margin-right:26px; border-right:1px solid var(--hair);}
.hero-stat-item:last-child{ border-right:none; margin-right:0;}
.stat-num{ display:block; font-family:'Anton', sans-serif; font-size:1.7rem; color:var(--accent-deep); line-height:1; margin:0;}
.stat-label{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-on-light-dim); margin:0;}

.hero-visual{ position:relative; }
.hero-art{ position:relative; aspect-ratio:4/5; background:var(--sand-deep); clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%, 0 22%); overflow:hidden; border:1px solid var(--sand-deep); margin:0;}
.hero-art img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; margin:0;}
.hero-badge{
  position:absolute; right:-22px; bottom:-22px; width:118px; height:118px; border-radius:50%;
  background:var(--accent); color:var(--ink); box-shadow:var(--shadow); border:4px solid var(--sand);
  transform:rotate(-8deg); z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:8px;
}
.badge-num{ font-family:'Anton', sans-serif; font-size:1.9rem; line-height:1; margin:0;}
.badge-text{ font-family:'IBM Plex Mono', monospace; font-size:0.52rem; letter-spacing:0.02em; line-height:1.25; text-transform:uppercase; max-width:78px; margin:4px 0 0;}
@media (max-width: 520px){
  .hero-badge{ right:-8px; bottom:-8px; width:96px; height:96px; }
  .badge-num{ font-size:1.5rem; }
  .badge-text{ font-size:0.44rem; max-width:64px;}
}

/* ============ EN-TÊTES DE SECTION ============ */
.sec-head{ max-width:62ch; margin-bottom:44px;}
.sec-head h2{ font-size:clamp(1.9rem, 3.4vw, 2.7rem); margin-top:10px;}
.sec-head p:last-child{ margin-top:16px; color:var(--text-on-light-dim); font-size:1.02rem; max-width:56ch;}

/* ============ SERVICES ============ */
.services{ background:var(--sand); padding:88px 0;}
.svc-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:2px; background:var(--hair); border:1px solid var(--hair);
}
.svc-card{ background:var(--paper); padding:32px 26px 30px; min-height:230px; margin:0; display:flex; flex-direction:column; gap:16px;}
.svc-icon-wrap{ width:46px; height:46px; color:var(--accent);}
.svc-icon-wrap svg{ width:100%; height:100%;}
.svc-card h3{ font-family:'Work Sans', sans-serif; text-transform:none; letter-spacing:0; font-weight:700; font-size:1.12rem; margin:0;}
.svc-card p{ color:var(--text-on-light-dim); font-size:0.94rem; margin:0;}
@media (max-width: 860px){ .svc-grid{grid-template-columns: 1fr 1fr;} }
@media (max-width: 560px){ .svc-grid{grid-template-columns: 1fr;} }

/* ============ RÉALISATIONS ============ */
.projects{ background:var(--paper); color:var(--text-on-light); padding:96px 0 100px;}
.proj-list{ display:flex; flex-direction:column; gap:60px; margin-top:12px;}
.proj-block h4{ font-family:'Work Sans', sans-serif; font-weight:700; font-size:1.18rem; margin:0 0 6px; color:var(--text-on-light); text-transform:none;}
.proj-block .desc{ margin:0 0 22px; font-style:italic; color:var(--text-on-light-dim); font-size:0.98rem;}
.photo-pair{ gap:22px;}
.ph{ margin:0;}
.ph img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border:1px solid var(--sand-deep);}
.ph-merged{ margin:0;}
.ph-merged img{ display:block; width:100%; aspect-ratio:2/1; object-fit:cover; border:1px solid var(--sand-deep);}
.ph figcaption{ margin-top:10px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-light-dim);}
@media (max-width: 560px){ .photo-pair{ flex-direction:column; } }

/* ============ GALERIE (bloc Galerie natif) ============ */
.gallery{ background:var(--paper); padding:0 0 100px; border-top:1px solid var(--hair);}
.gallery .wrap{ padding-top:64px;}
.cb-gallery-carousel.wp-block-group{
	display:flex; flex-wrap:nowrap; align-items:stretch;
	gap:14px; overflow-x:auto; overflow-y:hidden;
	scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
	padding-bottom:16px; margin:0 0 4px; scroll-padding-left:0;
}
.chantier-card{
	flex:0 0 auto; width:min(80vw,380px); margin:0; scroll-snap-align:start;
	position:relative;
}
.chantier-card .wp-block-gallery{ display:block; margin:0; }
.chantier-card .wp-block-gallery .wp-block-image{ margin:0; }
/* Le bloc Galerie natif calcule une largeur en colonnes (ex. 1/3) pour
   chaque photo dès qu'il y en a plusieurs — on force la première à occuper
   toute la carte, quel que soit le nombre de photos dans le chantier. */
.chantier-card .wp-block-gallery .wp-block-image:first-child{
	width:100% !important; display:block !important;
}
.chantier-card .wp-block-gallery .wp-block-image:first-child img{
	border:1px solid var(--sand-deep); width:100% !important; height:280px !important;
	object-fit:cover !important; display:block; cursor:zoom-in;
}
/* Les photos suivantes du chantier restent dans le contenu (donc navigables
   dans la visionneuse au clic) mais sont masquées visuellement dans la carte. */
.chantier-card .wp-block-gallery .wp-block-image:not(:first-child){
	position:absolute !important; width:1px !important; height:1px !important;
	overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important;
}
.chantier-card .photo-count-badge{
	position:absolute; right:8px; bottom:24px; margin:0;
	background:rgba(20,16,13,0.72); color:#fff;
	font-family:'IBM Plex Mono', monospace; font-size:0.68rem; letter-spacing:0.03em;
	padding:4px 9px; border-radius:3px; pointer-events:none; z-index:2;
}
.cb-gallery-carousel.wp-block-group::-webkit-scrollbar{ height:8px; }
.cb-gallery-carousel.wp-block-group::-webkit-scrollbar-track{ background:var(--hair); border-radius:4px; }
.cb-gallery-carousel.wp-block-group::-webkit-scrollbar-thumb{ background:var(--accent); border-radius:4px; }
@media (min-width: 900px){
	.chantier-card{ width:min(32vw,340px); }
}

/* ============ QUI SOMMES-NOUS / ZONE ============ */
.about{ background:var(--sand); padding:96px 0;}
.about-grid{ gap:64px; align-items:flex-start;}
.about-body{ max-width:640px;}
.about-body p{ color:var(--text-on-light-dim); font-size:1.02rem; margin:0 0 16px;}

.founders-grid{ display:flex; flex-direction:column; gap:22px; margin-top:24px;}
.founder-row{ display:flex; gap:14px; align-items:flex-start;}
.founder-avatar{ width:46px; height:46px; border-radius:50%; flex:none; background:var(--accent); color:var(--ink); margin:0; display:flex; align-items:center; justify-content:center;}
.founder-avatar p{ font-family:'Anton', sans-serif; font-size:0.94rem; margin:0;}
.founder-text{ margin:0; }
.founder-row h4{ font-family:'Work Sans', sans-serif; font-weight:700; font-size:1rem; text-transform:none; letter-spacing:0; color:var(--text-on-light); margin:0 0 3px;}
.founder-row h4 .founder-role{ font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:0.7rem; letter-spacing:0.04em; text-transform:uppercase; color:var(--accent-deep); margin-left:2px;}
.founder-row p{ margin:0; color:var(--text-on-light-dim); font-size:0.92rem;}
.founders-note{ margin-top:22px; padding-top:20px; border-top:1px solid var(--hair); color:var(--text-on-light-dim); font-size:0.92rem;}

.zone-card{
  background:var(--paper); color:var(--text-on-light); padding:36px 32px; margin:0;
  border:1px solid var(--sand-deep); border-top:4px solid var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%);
}
.zone-card h3{ font-family:'Anton', sans-serif; font-size:1.5rem; color:var(--text-on-light); margin-bottom:6px;}
.zone-card .sub{ color:var(--text-on-light-dim); font-size:0.9rem; margin:0 0 22px;}
.zone-map{ display:block; width:100%; height:auto; margin:0 0 6px; border:1px solid var(--sand-deep);}
.map-link{ display:inline-flex; align-items:center; gap:8px; margin-top:18px; font-family:'IBM Plex Mono', monospace; font-size:0.78rem; color:var(--accent-deep); text-decoration:none; border-bottom:1px solid transparent;}
.map-link:hover{ border-color:var(--accent-deep);}

ul.wp-block-list.is-style-cb-chips{ display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:0 0 14px;}
ul.wp-block-list.is-style-cb-chips li{
  font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.03em;
  border:1px solid var(--sand-deep); background:var(--sand); color:var(--text-on-light-dim); padding:6px 11px;
}

@media (max-width: 900px){ .about-grid{ flex-direction:column; } }

/* ============ CONTACT ============ */
.contact{ background:var(--paper); padding:96px 0 110px;}
.contact-grid{ gap:56px;}
.contact-col .lead{ max-width:44ch;}
.contact-line{ margin:14px 0 0; font-weight:600; font-size:1.02rem;}
.contact-line a{ text-decoration:none; }
.contact-line a:hover{ color:var(--accent);}
.contact-area{ margin-top:22px; color:var(--text-on-light-dim); font-size:0.92rem;}
.contact-card{ background:var(--sand); border:1px solid var(--sand-deep); padding:34px; margin:0;}
.contact-card h3{ font-size:1.3rem; margin-bottom:8px;}
.contact-card .sub{ color:var(--text-on-light-dim); font-size:0.92rem; margin:0 0 22px;}
.contact-buttons{ flex-direction:column; align-items:stretch;}
.contact-buttons .wp-block-button__link{ justify-content:center; width:100%; text-align:center;}
@media (max-width: 900px){ .contact-grid{ flex-direction:column; } }

/* ============ PIED DE PAGE ============ */
.site-footer{ background:var(--ink); color:var(--text-on-dark-dim); padding:52px 0 28px !important;}
.site-footer h5{ font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-dark); margin:0 0 14px;}
.foot-grid{ padding-bottom:32px; border-bottom:1px solid var(--ink-line); gap:40px;}
.foot-brand img{ height:46px; margin-bottom:14px;}
.foot-brand p{ max-width:36ch; font-size:0.9rem; margin:0;}
.foot-col p, .foot-col a{ font-size:0.9rem; color:var(--text-on-dark-dim); text-decoration:none; margin:0 0 10px;}
.foot-col a:hover{ color:var(--accent);}
.foot-nav{ display:flex; flex-direction:column; gap:10px; margin-top:2px;}
.foot-nav a{ color:var(--text-on-dark-dim); text-decoration:none; font-size:0.9rem;}
.foot-nav a:hover{ color:var(--accent);}
.foot-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:22px; flex-wrap:wrap; gap:10px;}
.foot-bottom p{ font-size:0.78rem; margin:0;}
.foot-grid, .foot-bottom{ padding-left:28px; padding-right:28px; }
@media (max-width: 860px){ .foot-grid{ flex-wrap:wrap; } .foot-grid .wp-block-column{ flex-basis:45% !important; } }

/* ============ RESPONSIVE HERO / NAV ============ */
@media (max-width: 900px){
  .hero-art{ aspect-ratio:16/10; }
  /* Sur mobile/tablette : la photo (avec le badge "30 ans") remonte juste
     après le texte de présentation de l'entreprise, au lieu de s'afficher
     tout en bas du bloc. L'affichage ordinateur n'est pas impacté (cette
     règle n'existe que dans ce media query). On passe à une grille CSS
     (plutôt que flex) : plus fiable ici pour réordonner des éléments
     "aplatis" via display:contents sans bug de hauteur. */
  .hero .hero-grid.hero-grid{ display:grid !important; grid-template-columns:1fr; gap:0; }
  .hero-col-text{ display:contents; }
  .eyebrow{ order:1; }
  .hero-grid h1{ order:2; }
  .lead{ order:3; }
  .hero .hero-grid .hero-col-visual.hero-col-visual{ order:4 !important; margin:28px 0 30px; }
  .hero-ctas{ order:5; }
  .hero-stats{ order:6; }
}
@media (max-width: 980px){ .tel-chip.secondary{ display:none; } }
@media (max-width: 760px){
  .navrow{ justify-content:space-between; }
  .nav-links{ order:3; flex-basis:100%; justify-content:flex-start; }
}
@media (max-width: 520px){
  .hero{ padding-top:64px; }
}
/* ____________ OU NOUS TROUVER ____________ */
.find-us{ background:var(--paper); padding:96px 0 100px; border-top:1px solid var(--hair);}
.find-grid{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:2px; background:var(--hair); border:1px solid var(--hair);
  margin-bottom:40px;
}
.map-card{ background:var(--sand); margin:0; min-height:220px; position:relative; overflow:hidden;}
.map-card iframe{ display:block; width:100%; height:100%; min-height:220px; border:0;}
.map-tag{ position:absolute; left:12px; bottom:12px; z-index:1; background:var(--paper); border:1px solid var(--hair); padding:5px 10px; font-family:'IBM Plex Mono', monospace; font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--text-on-light); margin:0; pointer-events:none;}
.testi-card{ background:var(--paper); padding:30px 26px 28px; min-height:220px; margin:0; display:flex; flex-direction:column; gap:14px;}
.testi-stars{ color:var(--accent); font-size:1rem; letter-spacing:3px; margin:0;}
.testi-quote{ color:var(--text-on-light); font-size:0.98rem; line-height:1.56; margin:0; flex:1;}
.testi-name{ font-family:'IBM Plex Mono', monospace; font-weight:500; font-size:0.74rem; letter-spacing:0.05em; text-transform:uppercase; color:var(--text-on-light-dim); margin:0;}
.find-cta{ justify-content:center;}
@media (max-width: 960px){ .find-grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .find-grid{ grid-template-columns: 1fr;} .map-card{ min-height:240px;} }

/* ____________ AVANT/APRES DYNAMIQUE (curseur) ____________ */
.ba-slider{
  position:relative; width:100%; aspect-ratio:2/1; overflow:hidden;
  border:1px solid var(--sand-deep); cursor:ew-resize; touch-action:pan-y; -webkit-user-select:none; user-select:none;
}
.ba-slider img{ display:block; height:100%; object-fit:cover; pointer-events:none; -webkit-user-drag:none; max-width:none;}
.ba-after{ position:absolute; inset:0; width:100%;}
.ba-before-wrap{ position:absolute; inset:0; width:50%; overflow:hidden;}
.ba-handle{
  position:absolute; top:0; bottom:0; left:50%; width:0;
  border-left:3px solid var(--accent); transform:translateX(-1.5px); pointer-events:none; z-index:2;
}
.ba-handle::after{
  content:""; position:absolute; top:50%; left:50%; width:44px; height:44px;
  transform:translate(-50%,-50%); border-radius:50%; background:var(--paper);
  border:2px solid var(--accent); box-shadow:var(--shadow);
}
.ba-handle::before{
  content:"\2194"; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-size:1.1rem; color:var(--accent); z-index:1;
}
.ba-tag{ position:absolute; bottom:16px; z-index:3; background:var(--paper); border:1px solid var(--hair); padding:6px 14px; font-family:'IBM Plex Mono', monospace; font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-light); pointer-events:none;}
.ba-tag-before{ left:16px;}
.ba-tag-after{ right:16px;}
.ba-hint{ margin-top:10px; font-family:'IBM Plex Mono', monospace; font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--text-on-light-dim); text-align:center;}