/* Projet Céramike inc. — feuille propre au site.
   Vocabulaire : aplat sombre traversé d'une diagonale orange (reprise de la bannière d'origine), tuile claire du logo,
   angles vifs, filets orange de 4 px, colonne de lecture aérée. Couleurs : jetons de tokens.css uniquement. */

:root {
  --s1: calc(var(--space-unit) * 0.5);
  --s2: var(--space-unit);
  --s3: calc(var(--space-unit) * 1.5);
  --s4: calc(var(--space-unit) * 2);
  --s6: calc(var(--space-unit) * 3);
  --tile: #f1f2f2; /* fond de la tuile du logo, identique à l'image d'origine (aucun texte posé dessus) */
  --rule: rgba(var(--c-dark-rgb), 0.14);
}

body { letter-spacing: 0.005em; }
a[href^="tel:"], a[href^="mailto:"] { white-space: nowrap; }
.form-status { margin: 0; padding: var(--s2); border-left: 4px solid var(--c-brand); background: var(--c-surface-alt); color: var(--c-ink); font-weight: 600; }
.form-status[hidden] { display: none; }
h1, h2, h3 { color: inherit; }
h2, h3 { line-height: 1.2; }
h2 { margin-bottom: var(--s2); }
/* Bouton Menu : l'icône garde sa largeur et son espacement du libellé */
.wc-nav__toggle { gap: 0.6rem; flex: none; white-space: nowrap; padding-inline: 0.9rem; }
.wc-nav__toggle-icon { flex: none; width: 18px; margin-right: 2px; }
p { margin-bottom: var(--s2); }
.wc-section--dark h1, .wc-section--dark h2, .wc-section--dark h3 { color: var(--c-on-dark); }

/* ---------- Logo : recadrage de la tuile dans la bannière d'origine (aucune déformation, jamais agrandi) ---------- */
.logo-crop {
  --h: 72px;
  position: relative; display: block; flex: none; overflow: hidden;
  height: var(--h); width: calc(var(--h) * 204 / 176);
  background: var(--tile); border-radius: var(--radius); box-shadow: 0 0 0 1px var(--rule);
}
/* sur fond sombre : cadre clair net autour de la tuile, pour qu'elle se lise comme un écusson voulu */
.wc-footer .logo-crop, .hero .logo-crop { box-shadow: 0 0 0 5px var(--tile), 0 0 0 6px rgba(255, 255, 255, 0.35); }
.logo-crop img,
.wc-brand .logo-crop img {
  position: absolute; max-width: none; max-height: none; min-height: 0;
  width: calc(var(--h) * 960 / 176); height: calc(var(--h) * 380 / 176);
  left: calc(var(--h) * -34 / 176); top: calc(var(--h) * -16 / 176);
}
.logo-crop--hero { --h: 176px; border-radius: var(--radius-lg); } /* 176 px = taille native de la tuile : jamais agrandie */

/* ---------- En-tête ---------- */
.wc-header { border-bottom: 0; box-shadow: inset 0 -1px 0 var(--rule); }
.wc-header__bar { gap: var(--s1) var(--s2); }
.wc-brand { padding-block: 4px; }
.wc-nav { margin-left: auto; }
.hdr-tel {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 48px; padding-inline: 0.25rem;
  color: var(--c-ink); font-weight: 700; text-decoration: none; white-space: nowrap;
}
.hdr-tel svg { width: 18px; height: 18px; flex: none; color: var(--c-brand-ink); }
.hdr-tel:hover { text-decoration: underline; text-decoration-thickness: 2px; }
@media (min-width: 900px) {
  .wc-header__bar { flex-wrap: nowrap; }
  .hdr-tel { order: 3; padding-left: var(--s1); border-left: 1px solid var(--rule); }
}
@media (max-width: 899.98px) {
  .wc-header .logo-crop { --h: 60px; }
  .hdr-tel { margin-left: auto; }
}
@media (max-width: 419.98px) {
  .wc-header__bar { gap: 0.5rem; }
  .hdr-tel { font-size: 0.94rem; gap: 0.3rem; padding-inline: 0; }
  .wc-header .logo-crop { --h: 52px; }
}

/* ---------- Surtitres : la double barre oblique de l'ancien site ---------- */
.wc-eyebrow::before { content: "//"; margin-right: 0.5em; letter-spacing: 0; }
.wc-eyebrow { color: var(--c-brand-ink); }
.wc-section--dark .wc-eyebrow { color: var(--c-on-dark-muted); }
.wc-section--dark .wc-eyebrow::before { color: var(--c-brand-on-dark); }

/* ---------- Héros (accueil) ---------- */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--c-dark); color: var(--c-on-dark);
  border-top: 0; border-bottom: 6px solid var(--c-brand);
  padding-block: clamp(2.5rem, 1.5rem + 5vw, 6rem);
}
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-brand);
  clip-path: polygon(90% 0, 100% 0, 94% 100%, 84% 100%);
}
.hero__grid { display: grid; gap: var(--s4); align-items: center; }
.hero h1 { font-size: clamp(2.05rem, 1.3rem + 2.8vw, 3.5rem); max-width: 20ch; margin-bottom: var(--s2); color: var(--c-on-dark); }
.hero .wc-lead { color: var(--c-on-dark-muted); max-width: 52ch; margin-bottom: 0; }
.hero .wc-lead strong { color: var(--c-on-dark); font-weight: 600; }
.hero .wc-actions { margin-top: var(--s3); }
.hero__where { display: flex; align-items: flex-start; gap: 0.5rem; margin: var(--s3) 0 0; color: var(--c-on-dark-muted); font-size: 0.95rem; }
.hero__where svg { width: 18px; height: 18px; flex: none; margin-top: 0.15rem; color: var(--c-brand-on-dark); }
.hero__brand { display: grid; justify-items: center; gap: var(--s2); }
.hero__slogan {
  margin: 0; max-width: 24ch; text-align: center;
  font-family: var(--font-head); font-size: 1.15rem; line-height: 1.35; color: var(--c-on-dark);
}
.wc-btn--primary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.45fr 1fr; }
  .hero__brand { padding-right: var(--s4); }
}
@media (max-width: 1099.98px) {
  .hero::before { display: none; }
}
@media (max-width: 859.98px) {
  .hero__brand { justify-items: start; }
  .hero__slogan { text-align: left; padding: 0; }
  .logo-crop--hero { --h: 110px; }
}
@media (max-width: 599.98px) {
  .hero .wc-actions .wc-btn, .cta-band .wc-actions .wc-btn { flex: 1 1 100%; }
}

/* ---------- En-tête des pages intérieures ---------- */
.page-head {
  position: relative; overflow: hidden; isolation: isolate;
  border-bottom: 6px solid var(--c-brand);
}
.page-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-brand);
  clip-path: polygon(88% 0, 96% 0, 86% 100%, 78% 100%);
}
.page-head h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.2rem); max-width: 20ch; margin-bottom: var(--s2); }
.page-head .wc-lead { color: var(--c-on-dark-muted); max-width: 56ch; margin-bottom: 0; }
.page-head .wc-actions { margin-top: var(--s3); }
@media (max-width: 859.98px) { .page-head::before { display: none; } }

/* ---------- Index des services (accueil) ---------- */
.svc-index { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--c-ink); }
.svc-index li { max-width: none; }
.svc-index .wc-card {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titre fleche" "texte fleche"; align-items: center; gap: 0.3rem var(--s2);
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; background: transparent;
  padding: var(--s3) var(--s1);
}
.svc-index .wc-card:hover { transform: none; box-shadow: inset 4px 0 0 var(--c-brand); background: var(--c-surface); }
.svc-index h3 { grid-area: titre; margin: 0; }
.svc-index p { grid-area: texte; margin: 0; color: var(--c-muted); }
.svc-index__arrow { grid-area: fleche; width: 28px; height: 28px; color: var(--c-brand-ink); transition: transform 0.18s ease; }
.svc-index .wc-card:hover .svc-index__arrow { transform: translateX(4px); }
@media (min-width: 860px) {
  .svc-index .wc-card { grid-template-columns: minmax(0, 18rem) 1fr auto; grid-template-areas: "titre texte fleche"; gap: var(--s1) var(--s3); padding-inline: var(--s2); }
}

/* ---------- L'entreprise : colonne de lecture, grande citation, encadré de faits ---------- */
.wc-container--narrow.reading { max-width: 1180px; }
.reading > p, .reading > h2, .motto { max-width: 68ch; }
.reading p { font-size: 1.08rem; }
.motto { margin: var(--s4) 0; padding: var(--s2) 0 var(--s2) var(--s3); border-left: 4px solid var(--c-brand); }
.motto .motto__label { margin: 0 0 var(--s1); font-size: 0.875rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); }
.motto .motto__text {
  margin: 0; max-width: 30ch;
  font-family: var(--font-head); font-weight: 700; line-height: 1.25; font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.15rem); color: var(--c-ink);
}
.factbox { margin-top: var(--s4); padding: var(--s3); background: var(--c-surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); }
.factbox h3 { font-size: 1rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c-muted); font-family: var(--font-body); margin-bottom: var(--s2); }
.factbox .wc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--s2) var(--s3); }
.factbox .wc-facts li { max-width: none; font-weight: 400; }
.factbox .wc-facts strong { display: block; font-size: 0.875rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-muted); }

/* ---------- Bandeau d'action de fin de page ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-bottom: 6px solid var(--c-brand); }
.cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--c-brand);
  clip-path: polygon(0 0, 6px 0, 6px 100%, 0 100%);
}
.cta-band__inner { display: grid; gap: var(--s3); align-items: center; }
.cta-band h2 { margin-bottom: var(--s1); }
.cta-band p { color: var(--c-on-dark-muted); margin: 0; }
.cta-band .wc-actions { margin: 0; }
@media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1fr auto; } }

/* ---------- Page Services ---------- */
.svc-jump { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.svc-jump a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.45rem 1rem;
  border: 2px solid var(--c-ink); border-radius: var(--radius); color: var(--c-ink); font-weight: 600; text-decoration: none;
}
.svc-jump a:hover { background: var(--c-ink); color: var(--c-surface); }
.svc-list { display: grid; gap: var(--s4); }
.svc { scroll-margin-top: var(--s4); border-radius: var(--radius-lg); border-top: 4px solid var(--c-brand); }
.svc__grid { display: grid; gap: var(--s3); align-items: start; }
.svc__photos { display: grid; gap: var(--s2); margin: 0; justify-items: start; }
.svc__photos figure { margin: 0; max-width: 265px; }
.svc__photos img { width: 100%; max-width: 265px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.svc__photos figcaption { margin-top: 0.4rem; font-size: 0.9rem; color: var(--c-muted); }
.svc h2 { font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem); }
.svc ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.5rem; }
.svc ul li { position: relative; padding-left: 1.4rem; }
.svc ul li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 0.7rem; height: 3px; background: var(--c-brand); transform: skewX(-30deg); }
.svc p:last-child { margin-bottom: 0; }
/* Photos : jamais plus larges que leur taille native (265 px) */
@media (min-width: 700px) {
  .svc__grid { grid-template-columns: 265px minmax(0, 1fr); gap: var(--s4); }
}
@media (min-width: 1040px) {
  /* colonne photo de largeur constante (2 photos côte à côte) : les titres s'alignent d'une carte à l'autre */
  .svc__grid { grid-template-columns: calc(265px * 2 + var(--s2)) minmax(0, 1fr); }
  .svc__photos { grid-template-columns: repeat(2, 265px); }
}
@media (max-width: 699.98px) {
  .svc-jump { gap: 0.5rem; }
  .svc-jump a { padding-inline: 0.8rem; }
}

/* ---------- Page Contact ---------- */
.contact-grid { display: grid; gap: var(--s6); align-items: start; }
@media (min-width: 960px) { .contact-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); } }
.form-head { margin-bottom: var(--s3); }
.form-head h2 { margin-bottom: var(--s1); }
.form-head p { color: var(--c-muted); margin: 0; }
.wc-form { max-width: none; }
.wc-form select { appearance: auto; }
.wc-field__hint { font-size: 0.95rem; }
.wc-field__hint a { display: block; margin-top: 0.25rem; white-space: nowrap; font-weight: 600; }
.contact-aside { display: grid; gap: var(--s3); }
.contact-card { padding: var(--s3); background: var(--c-surface); border: 1px solid var(--rule); border-top: 4px solid var(--c-brand); border-radius: var(--radius-lg); }
.contact-card h2 { font-size: 1.35rem; }
.contact-card .wc-contact dd { overflow-wrap: anywhere; }
.wc-map { margin-top: var(--s2); }
.wc-map__address { margin: 0; font-weight: 600; }
.wc-map .wc-btn { width: 100%; }
.contact-social { margin: var(--s2) 0 0; }
.contact-social a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- Confidentialité ---------- */
.legal h2 { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.55rem); margin-top: var(--s4); }
.legal h2:first-child { margin-top: 0; }

/* ---------- Pied de page ---------- */
.wc-footer__grid { gap: var(--s4); }
.footer-brand p { color: var(--c-on-dark-muted); margin-top: var(--s2); max-width: 30ch; }
.wc-footer address { font-style: normal; color: var(--c-on-dark-muted); margin-top: 0.35rem; }
.wc-footer h2 { margin-bottom: var(--s1); }
.wc-footer__legal { max-width: none; }