/*
Theme Name: Design Concept
Theme URI: https://design-concept14.fr
Author: Jean-Baptiste Guillon
Description: Thème sur mesure pour Design Concept – Arthur Chedot, créateur d'espace. Page d'accueil, rubrique Réalisations, coordonnées protégées contre les robots.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: design-concept
*/

/* ---------- Polices (hébergées sur le site, aucun appel à Google) ---------- */
@font-face { font-family: 'Barlow'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/Barlow-400.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-style: normal; font-display: swap; src: url('assets/fonts/Barlow-500.woff2') format('woff2'); }
@font-face { font-family: 'Barlow'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/fonts/Barlow-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 600; font-style: normal; font-display: swap; src: url('assets/fonts/BarlowCondensed-600.woff2') format('woff2'); }
@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-style: normal; font-display: swap; src: url('assets/fonts/BarlowCondensed-700.woff2') format('woff2'); }
@font-face { font-family: 'Permanent Marker'; font-weight: 400; font-style: normal; font-display: swap; src: url('assets/fonts/PermanentMarker-400.woff2') format('woff2'); }

/* ---------- Charte ---------- */
:root {
	--anthracite: #253239;
	--anthracite-fonce: #1B262C;
	--vert: #A9B446;
	--vert-clair: #C3CE5E;
	--vert-texte: #6B7A1F;
	--creme: #F5F3EE;
	--blanc: #FFFFFF;
	--gris-texte: #4A5A62;
	--gris-clair: #C9D1D4;
	--gris-bord: #E2DED5;
	--gris-pied: #9FACB2;
	--titre: 'Barlow Condensed', 'Arial Narrow', sans-serif;
	--texte: 'Barlow', system-ui, sans-serif;
	--pinceau: 'Permanent Marker', cursive;
	--largeur: 1312px;
	--gouttiere: 64px;
	--rayon: 6px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--anthracite-fonce); font-family: var(--texte); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vert-texte); }
a:hover { color: var(--anthracite); }
h1, h2, h3 { font-family: var(--titre); font-weight: 700; text-transform: uppercase; line-height: 1; margin: 0; color: var(--anthracite); }
p { margin: 0; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; width: auto; height: auto; clip: auto; padding: 12px 16px; background: var(--vert); color: var(--anthracite-fonce); }
:focus-visible { outline: 3px solid var(--vert); outline-offset: 2px; }

.conteneur { width: 100%; max-width: var(--largeur); margin: 0 auto; padding: 0 var(--gouttiere); }
.surtitre { font-family: var(--titre); font-weight: 600; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; color: var(--vert-texte); }
.section { padding: 96px 0; }
.section-titre { font-size: 60px; }
.section-entete { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: 48px; }
.section-entete p { max-width: 520px; font-size: 19px; color: var(--gris-texte); }

/* ---------- Boutons ---------- */
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 14px 26px; border-radius: 4px; font-family: var(--titre); font-weight: 700; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid transparent; }
.bouton-vert { background: var(--vert); color: var(--anthracite-fonce); }
.bouton-vert:hover { background: var(--vert-clair); color: var(--anthracite-fonce); }
.bouton-contour { color: var(--creme); border-color: #5B6D76; font-weight: 600; }
.bouton-contour:hover { border-color: var(--creme); color: var(--creme); }

/* ---------- En-tête ---------- */
.entete { position: sticky; top: 0; z-index: 50; background: var(--anthracite); border-bottom: 1px solid #34454E; }
.entete .conteneur { height: 104px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.entete .logo img { height: 74px; width: auto; }
.nav-principale ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 36px; }
.nav-principale a { font-family: var(--titre); font-weight: 600; font-size: 19px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--creme); text-decoration: none; }
.nav-principale a:hover { color: var(--vert); }
.entete-actions { display: flex; align-items: center; gap: 24px; }
.entete .bouton { font-size: 19px; padding: 12px 22px; }
.bouton-appel-mobile, .menu-bouton { display: none; }
.menu-bouton { width: 44px; height: 44px; border: 1px solid #5B6D76; border-radius: 4px; background: none; align-items: center; justify-content: center; padding: 0; cursor: pointer; }

/* ---------- Héro ---------- */
.hero { background: var(--anthracite); padding: 72px 0 80px; }
.hero .conteneur { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; align-items: center; }
.hero-texte { display: flex; flex-direction: column; gap: 28px; }
.hero .surtitre { color: var(--vert); }
.hero h1 { font-size: 84px; line-height: 0.95; color: var(--creme); }
.hero h1 span { color: var(--vert); }
.hero p { font-size: 21px; color: var(--gris-clair); max-width: 560px; }
.hero-boutons { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-visuel { position: relative; }
.hero-visuel img, .hero-visuel video { width: 100%; height: 508px; object-fit: cover; border-radius: var(--rayon); }
.pastille { position: absolute; left: -44px; bottom: -28px; width: 168px; height: 168px; border-radius: 50%; background: var(--vert); display: flex; align-items: center; justify-content: center; text-align: center; transform: rotate(-8deg); box-shadow: 0 10px 30px rgba(0,0,0,.35); font-family: var(--pinceau); font-size: 21px; line-height: 1.15; color: var(--anthracite-fonce); padding: 16px; }

/* ---------- Engagements ---------- */
.engagements { background: var(--anthracite-fonce); }
.engagements .conteneur { min-height: 176px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; align-items: center; padding-top: 24px; padding-bottom: 24px; }
.engagement { display: flex; align-items: center; gap: 20px; font-family: var(--titre); font-weight: 600; font-size: 22px; line-height: 1.2; text-transform: uppercase; color: var(--creme); }
.engagement span { color: var(--vert); }
.engagement svg { flex-shrink: 0; }

/* ---------- Savoir-faire ---------- */
.metiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.metier { background: var(--blanc); border: 1px solid var(--gris-bord); border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.metier h3 { font-size: 26px; }
.metier p { font-size: 17px; color: var(--gris-texte); }
.note-partenaires { margin-top: 24px; font-size: 17px; color: var(--gris-texte); }

/* ---------- Réalisations ---------- */
.realisations { background: var(--blanc); }
.lien-tous { font-family: var(--titre); font-weight: 600; font-size: 20px; letter-spacing: 1px; text-transform: uppercase; color: var(--anthracite); }
.vedette-photos { display: grid; grid-template-columns: 7fr 5fr; gap: 24px; height: 440px; }
.vedette-photos > img { width: 100%; height: 440px; object-fit: cover; border-radius: var(--rayon); }
.vedette-photos .colonne { display: grid; grid-template-rows: 1fr 1fr; gap: 24px; }
.vedette-photos .colonne img { width: 100%; height: 208px; object-fit: cover; border-radius: var(--rayon); }
.vedette-texte { display: grid; grid-template-columns: 5fr 7fr; gap: 24px; margin-top: 44px; align-items: center; }
.vedette-texte .surtitre { font-size: 18px; margin-bottom: 10px; display: block; }
.vedette-texte h3 { font-size: 40px; line-height: 1.05; }
.vedette-texte h3 a { color: inherit; text-decoration: none; }
.marque-pinceau { font-family: var(--pinceau); font-weight: 400; text-transform: none; background: var(--vert); padding: 0 10px; border-radius: 3px; }
.points { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.points li { display: flex; gap: 10px; align-items: center; font-size: 18px; color: var(--anthracite); }
.points li::before { content: ''; width: 8px; height: 8px; background: var(--vert); flex-shrink: 0; }
.autres { border-top: 1px solid var(--gris-bord); margin-top: 48px; padding-top: 36px; }
.autres h3 { font-size: 36px; margin-bottom: 24px; }
.grille-chantiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.carte-chantier { margin: 0; background: var(--creme); border-radius: var(--rayon); overflow: hidden; display: flex; flex-direction: column; }
.carte-chantier a { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.carte-chantier img { width: 100%; height: 300px; object-fit: cover; transition: transform .3s; }
.carte-chantier a:hover img { transform: scale(1.03); }
.carte-chantier .legende { padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 6px; }
.carte-chantier .titre { font-family: var(--titre); font-weight: 700; font-size: 24px; text-transform: uppercase; color: var(--anthracite); line-height: 1.1; }
.carte-chantier .resume { font-size: 16px; line-height: 1.4; color: var(--gris-texte); }
.filtres { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.filtres a { font-family: var(--titre); font-weight: 600; font-size: 18px; text-transform: uppercase; letter-spacing: 1px; text-decoration: none; color: var(--anthracite); border: 1px solid var(--gris-bord); border-radius: 4px; padding: 8px 16px; }
.filtres a.actif, .filtres a:hover { background: var(--vert); border-color: var(--vert); color: var(--anthracite-fonce); }

/* ---------- Avis ---------- */
.avis-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.avis { margin: 0; background: var(--blanc); border: 1px solid var(--gris-bord); border-radius: var(--rayon); padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.avis .etoiles { color: var(--vert-texte); font-size: 20px; letter-spacing: 2px; }
.avis blockquote { margin: 0; font-size: 17px; color: var(--gris-texte); }
.avis figcaption { font-family: var(--titre); font-weight: 600; font-size: 18px; text-transform: uppercase; color: var(--anthracite); }

/* ---------- Qui suis-je ---------- */
.qui .conteneur { display: grid; grid-template-columns: 4fr 1fr 7fr; gap: 24px; align-items: center; }
.qui-photo img { width: 100%; height: 440px; object-fit: cover; object-position: center 30%; border-radius: var(--rayon); }
.qui-texte { grid-column: 3; display: flex; flex-direction: column; gap: 22px; }
.qui-texte h2 { font-size: 56px; }
.qui-texte p { font-size: 20px; line-height: 1.6; color: var(--gris-texte); }
.reperes { display: flex; gap: 40px; font-size: 18px; line-height: 1.4; color: var(--anthracite); }
.reperes strong { font-family: var(--titre); font-size: 22px; text-transform: uppercase; display: block; }

/* ---------- Contact ---------- */
.contact { background: var(--anthracite); }
.contact .conteneur { display: grid; grid-template-columns: 5fr 1fr 6fr; gap: 24px; }
.contact-texte { display: flex; flex-direction: column; gap: 26px; }
.contact h2 { font-size: 60px; color: var(--creme); }
.contact h2 span { color: var(--vert); }
.contact p { font-size: 20px; color: var(--gris-clair); }
.zone { display: flex; align-items: center; gap: 14px; font-size: 20px; color: var(--creme); }
.contact-boutons { grid-column: 3; display: flex; flex-direction: column; gap: 20px; align-self: start; }
.carte-contact { display: flex; align-items: center; gap: 18px; text-decoration: none; border-radius: var(--rayon); padding: 26px 32px; color: var(--anthracite-fonce); }
.carte-contact.appel { background: var(--vert); }
.carte-contact.mail { background: var(--creme); }
.carte-contact:hover { color: var(--anthracite-fonce); filter: brightness(1.05); }
.carte-contact .libelle { display: block; font-family: var(--titre); font-weight: 600; font-size: 18px; letter-spacing: 1.5px; text-transform: uppercase; }
.carte-contact .valeur { display: block; font-family: var(--titre); font-weight: 700; font-size: 40px; letter-spacing: 1px; word-break: break-all; }
.carte-contact.mail .libelle { color: var(--gris-texte); }
.carte-contact.mail .valeur { font-size: 32px; }

/* ---------- Pied de page ---------- */
.pied { background: var(--anthracite-fonce); padding: 40px 0; }
.pied .conteneur { display: flex; justify-content: space-between; align-items: center; gap: 40px; }
.pied img { height: 56px; width: auto; opacity: .9; }
.pied-texte { font-size: 15px; line-height: 1.7; color: var(--gris-pied); text-align: right; }
.pied-texte a { color: var(--gris-pied); }

/* ---------- Pages intérieures ---------- */
.page-entete { background: var(--anthracite); padding: 64px 0; }
.page-entete h1 { font-size: 64px; color: var(--creme); }
.page-entete .surtitre { color: var(--vert); display: block; margin-bottom: 12px; }
.contenu { max-width: 820px; }
.contenu > * + * { margin-top: 1.1em; }
.contenu h2 { font-size: 36px; margin-top: 1.6em; }
.contenu h3 { font-size: 26px; margin-top: 1.4em; }
.contenu .wp-block-gallery, .contenu .wp-block-image { margin-top: 1.6em; }
.contenu img { border-radius: var(--rayon); }
.fiche-infos { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 16px; color: var(--gris-clair); font-size: 18px; }
.fiche-photo { margin-bottom: 40px; }
.fiche-photo img { width: 100%; max-height: 640px; object-fit: cover; border-radius: var(--rayon); }
.fiche-retour { margin-top: 48px; }
.pagination { margin-top: 40px; display: flex; gap: 10px; }
.pagination .page-numbers { padding: 8px 14px; border: 1px solid var(--gris-bord); border-radius: 4px; text-decoration: none; color: var(--anthracite); }
.pagination .current { background: var(--vert); border-color: var(--vert); }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
	:root { --gouttiere: 32px; }
	.hero h1 { font-size: 64px; }
	.section-titre, .contact h2 { font-size: 48px; }
	.metiers, .grille-chantiers, .avis-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.nav-principale ul { gap: 20px; }
}

/* ---------- Téléphone ---------- */
@media (max-width: 760px) {
	:root { --gouttiere: 20px; }
	body { font-size: 17px; }
	.section { padding: 48px 0; }
	.entete .conteneur { height: 68px; padding: 0 16px; }
	.entete .logo img { height: 46px; }
	.entete-actions > .bouton-vert:not(.bouton-appel-mobile) { display: none; }
	.bouton-appel-mobile { display: inline-flex; min-height: 44px; padding: 0 16px; font-size: 17px; }
	.menu-bouton { display: inline-flex; }
	.nav-principale { display: none; position: absolute; top: 68px; left: 0; right: 0; background: var(--anthracite); border-bottom: 1px solid #34454E; padding: 12px 20px 20px; }
	.nav-principale.ouvert { display: block; }
	.nav-principale ul { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-principale a { display: block; padding: 14px 0; border-bottom: 1px solid #34454E; }
	.hero { padding: 32px 0 56px; }
	.hero .conteneur { grid-template-columns: 1fr; gap: 28px; }
	.hero-texte { gap: 20px; }
	.hero .surtitre { font-size: 15px; letter-spacing: 1.5px; }
	.hero h1 { font-size: 46px; line-height: .98; }
	.hero p { font-size: 17px; }
	.hero-boutons { flex-direction: column; }
	.hero-boutons .bouton { width: 100%; }
	.hero-visuel img, .hero-visuel video { height: 250px; }
	.pastille { left: auto; right: -6px; bottom: -34px; width: 112px; height: 112px; font-size: 14px; padding: 12px; }
	.engagements .conteneur { grid-template-columns: 1fr; gap: 20px; padding-top: 28px; padding-bottom: 28px; }
	.engagement { font-size: 19px; gap: 16px; }
	.engagement svg { width: 40px; height: 40px; }
	.section-entete { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
	.section-entete p { font-size: 17px; }
	.section-titre, .contact h2 { font-size: 38px; }
	.metiers { grid-template-columns: 1fr; gap: 12px; }
	.metier { flex-direction: row; align-items: flex-start; padding: 18px; gap: 16px; }
	.metier svg { width: 34px; height: 34px; flex-shrink: 0; }
	.metier h3 { font-size: 22px; margin-bottom: 4px; }
	.metier p { font-size: 15px; }
	.vedette-photos { grid-template-columns: 1fr; height: auto; gap: 12px; }
	.vedette-photos > img { height: 230px; }
	.vedette-photos .colonne { grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 12px; }
	.vedette-photos .colonne img { height: 120px; }
	.vedette-texte { grid-template-columns: 1fr; margin-top: 20px; }
	.vedette-texte h3 { font-size: 30px; }
	.points { grid-template-columns: 1fr 1fr; gap: 10px 16px; }
	.points li { font-size: 15px; }
	.autres h3 { font-size: 28px; }
	.grille-chantiers, .avis-grille { grid-template-columns: 1fr 1fr; gap: 12px; }
	.carte-chantier img { height: 150px; }
	.carte-chantier .legende { padding: 10px 12px 12px; }
	.carte-chantier .titre { font-size: 17px; }
	.carte-chantier .resume { display: none; }
	.avis-grille { grid-template-columns: 1fr; }
	.qui .conteneur { grid-template-columns: 1fr; }
	.qui-photo img { height: 360px; }
	.qui-texte { grid-column: auto; }
	.qui-texte h2 { font-size: 36px; }
	.qui-texte p { font-size: 17px; }
	.reperes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; font-size: 14px; }
	.reperes strong { font-size: 18px; }
	.contact .conteneur { grid-template-columns: 1fr; gap: 20px; }
	.contact p { font-size: 17px; }
	.contact-boutons { grid-column: auto; }
	.carte-contact { padding: 18px 20px; gap: 14px; }
	.carte-contact .valeur { font-size: 30px; }
	.carte-contact.mail .valeur { font-size: 21px; }
	.zone { font-size: 16px; }
	.pied .conteneur { flex-direction: column; text-align: center; }
	.pied-texte { text-align: center; font-size: 13px; }
	.page-entete { padding: 36px 0; }
	.page-entete h1 { font-size: 40px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.carte-chantier img { transition: none; }
}