/* =========================================================
   IMS Sécurité — feuille de style
   Concept : l'emblème du logo (chevrons or dans l'anneau)
   porte l'identité ; le reste reste sobre, aligné à gauche.
   ========================================================= */

/* ---------- Polices (hébergées localement) ---------- */
@font-face { font-family: "Anton"; src: url("../fonts/anton-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Couleurs (issues du logo) */
  --or: #BA7203;          /* or du logo */
  --or-vif: #E2A23B;      /* or lisible sur fond sombre */
  --or-pale: #F7ECDA;
  --charbon: #1A1813;     /* noir chaud du logo */
  --charbon-2: #26231D;
  --texte: #1F1D19;
  --texte-doux: #5D5850;
  --pierre: #EEEDEA;      /* fond de section alterné */
  --trait: #DCD8D0;
  --blanc: #FFFFFF;

  /* Typographies */
  --f-titre: "Anton", "Impact", "Arial Narrow", sans-serif;
  --f-texte: "Archivo", "Segoe UI", Arial, sans-serif;

  /* Échelle (ratio 1,25) */
  --t-xs: 0.8rem;
  --t-s: 0.9rem;
  --t-m: 1.0625rem;
  --t-l: 1.25rem;
  --t-xl: clamp(1.5rem, 2.2vw, 1.75rem);
  --t-2xl: clamp(2.2rem, 4.2vw, 3.4rem);
  --t-3xl: clamp(2.8rem, 6.4vw, 5.6rem);

  --largeur: 1200px;
  --gouttiere: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 9vw, 112px);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--f-texte);
  font-size: var(--t-m);
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
h1, h2 { font-family: var(--f-titre); font-weight: 400; line-height: 1.05; letter-spacing: 0.005em; }
h3 { font-size: var(--t-l); font-weight: 700; line-height: 1.25; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--or-vif); outline-offset: 3px; }
[hidden] { display: none !important; }

.wrap { max-width: var(--largeur); margin-inline: auto; padding-inline: var(--gouttiere); }
.sprite { position: absolute; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--charbon); color: var(--blanc); padding: 10px 16px; z-index: 50; }
.skip:focus { top: 8px; }

.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linejoin: round; stroke-linecap: round; }
.ic-lg { width: 44px; height: 44px; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 24px;
  font: 600 var(--t-m)/1.2 var(--f-texte);
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent; border-radius: 2px;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn-or { background: var(--or); color: var(--blanc); }
.btn-or:hover { background: var(--charbon); }
.btn-ligne { border-color: rgba(255,255,255,.5); color: var(--blanc); }
.btn-ligne:hover { border-color: var(--or-vif); color: var(--or-vif); }

/* ---------- Barre d'infos ---------- */
.infobar { background: var(--charbon); color: #CFC8BB; font-size: var(--t-s); }
.infobar .wrap { display: flex; flex-wrap: wrap; gap: 6px 28px; padding-block: 8px; }
.infobar span { display: inline-flex; align-items: center; gap: 8px; }
.infobar .ic { color: var(--or-vif); width: 16px; height: 16px; }
.infobar-tel { margin-left: auto; color: var(--blanc); font-weight: 600; }

/* ---------- En-tête ---------- */
.site-header { position: sticky; top: 0; z-index: 30; background: var(--blanc); border-bottom: 1px solid var(--trait); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; padding-block: 12px; }
.brand img { height: 48px; width: auto; }
.nav { margin-left: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 10px 14px; font-weight: 600; text-decoration: none; border-radius: 2px; }
.nav a:hover { color: var(--or); }
.menu-btn { display: none; margin-left: auto; background: none; border: 1px solid var(--trait); padding: 8px; cursor: pointer; color: var(--texte); }
.menu-btn svg { fill: none; stroke: currentColor; stroke-width: 2; display: block; }

@media (max-width: 960px) {
  .header-cta { display: none; }
  .menu-btn { display: block; }
  .nav { position: absolute; left: 0; right: 0; top: 100%; background: var(--blanc); border-bottom: 1px solid var(--trait); margin: 0; }
  .nav:not(.ouvert) { display: none; }
  .nav ul { flex-direction: column; padding: 8px var(--gouttiere) 16px; }
  .nav a { padding: 14px 0; border-bottom: 1px solid var(--trait); border-radius: 0; }
}
@media (max-width: 640px) {
  .infobar-tel { margin-left: 0; }
  .brand img { height: 40px; }
}

/* ---------- Héros (élément signature : l'emblème) ---------- */
.hero { background: var(--charbon); color: var(--blanc); overflow: hidden; position: relative; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; align-items: center; padding-block: clamp(56px, 8vw, 104px) clamp(40px, 6vw, 72px); }
.hero h1 { font-size: var(--t-3xl); max-width: 14ch; }
.lead { margin-top: 24px; max-width: 54ch; font-size: var(--t-l); color: #DCD5C8; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero-tel { margin-top: 22px; color: #A9A194; font-size: var(--t-s); }
.hero-tel a { color: var(--or-vif); font-weight: 600; text-decoration: none; font-size: var(--t-m); margin-left: 6px; }

.hero-embleme { justify-self: end; width: min(100%, 460px); margin-right: calc(var(--gouttiere) * -1.5); }
.hero-embleme img { width: 100%; animation: embleme 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes embleme { from { transform: translateY(18px) scale(.96); } to { transform: none; } }

.hero-specialites { list-style: none; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); border-top: 1px solid #3A362F; padding-block: 0; }
.hero-specialites li { display: flex; align-items: center; gap: 10px; padding: 18px 0; color: #E9E3D7; font-weight: 600; }
.hero-specialites .ic { color: var(--or-vif); width: 22px; height: 22px; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-embleme { position: absolute; right: -90px; top: 40px; width: 300px; opacity: .14; margin: 0; }
  .hero-text { position: relative; }
  .hero-specialites { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .hero-specialites { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- Bannières 970 × 250 ---------- */
.banner-slot { display: flex; justify-content: center; padding-block: clamp(32px, 5vw, 56px); }
.banner {
  width: 100%; max-width: 970px; aspect-ratio: 970 / 250;
  container-type: inline-size;
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 22cqw minmax(0, 1fr) auto; align-items: center; gap: 3cqw;
  padding-right: 4cqw;
  text-decoration: none;
}
.banner-noir { background: var(--charbon); color: var(--blanc); }
.banner-or { background: var(--or); color: var(--charbon); }
.banner-embleme { width: 30cqw; max-width: none; margin-left: -6cqw; align-self: center; }
.banner-texte { min-width: 0; }
.banner-surtitre { font-size: 1.6cqw; font-weight: 600; color: var(--or-vif); }
.banner-or .banner-surtitre { color: var(--charbon); }
.banner-titre { font-family: var(--f-titre); font-size: 4.6cqw; line-height: 1.04; margin-top: .8cqw; text-wrap: balance; }
.banner-detail { font-size: 1.75cqw; line-height: 1.4; margin-top: 1cqw; color: #D3CCBF; max-width: 46ch; }
.banner-or .banner-detail { color: #3A2A10; }
.banner-action { display: grid; gap: 1.2cqw; justify-items: end; text-align: right; }
.banner-action strong { font-family: var(--f-titre); font-weight: 400; font-size: 3.1cqw; line-height: 1.05; max-width: 11ch; color: var(--or-vif); }
.banner-or .banner-action strong { color: var(--charbon); }
.banner-action span { font-size: 1.7cqw; font-weight: 600; padding: 1cqw 2cqw; background: var(--or); color: var(--blanc); border-radius: 2px; white-space: nowrap; transition: background-color .2s; }
.banner-or .banner-action span { background: var(--charbon); }
.banner:hover .banner-action span { background: var(--blanc); color: var(--charbon); }
@container (max-width: 640px) {
  .banner-surtitre, .banner-detail { display: none; }
  .banner-titre { font-size: 5.8cqw; margin: 0; }
  .banner-action strong { display: none; }
  .banner-action span { font-size: 3cqw; }
}

/* ---------- Sections ---------- */
.section { padding-block: var(--section); }
.section-pierre { background: var(--pierre); }
.section-charbon { background: var(--charbon); color: var(--blanc); }
.section h2 { font-size: var(--t-2xl); }
.section-tete { display: grid; gap: 14px; max-width: 62ch; margin-bottom: clamp(36px, 5vw, 56px); }
.section-tete p { color: var(--texte-doux); font-size: var(--t-l); line-height: 1.5; }
.section-charbon .section-tete p { color: #BFB7A9; }

/* Société */
.societe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 88px); align-items: start; }
.societe-texte { display: grid; gap: 18px; max-width: 60ch; }
.societe-texte h2 { margin-bottom: 6px; }
.societe-texte .intro { font-size: var(--t-xl); line-height: 1.4; color: var(--texte); }
.societe-texte p { color: var(--texte-doux); }
.agrement { display: flex; gap: 14px; align-items: flex-start; margin-top: 10px; padding: 18px 20px; background: var(--or-pale); border-radius: 2px; }
.agrement .ic { color: var(--or); width: 30px; height: 30px; }
.agrement p { color: var(--texte); }
.societe-sites { padding-top: 10px; }
.societe-sites h3 { margin-bottom: 18px; }
.sites { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.sites li { display: flex; align-items: center; gap: 14px; padding: 18px; background: var(--pierre); font-weight: 600; font-size: var(--t-l); border-radius: 2px; overflow-wrap: anywhere; }
.sites .ic { color: var(--or); width: 28px; height: 28px; }
@media (max-width: 860px) { .societe { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .sites li { font-size: var(--t-m); padding: 14px; gap: 10px; } }

/* Missions */
.missions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.mission { display: grid; gap: 14px; align-content: start; padding-top: 24px; border-top: 3px solid var(--or); }
.mission .ic-lg { color: var(--or); }
.mission h3 { font-size: var(--t-xl); }
.mission p { color: var(--texte-doux); }
@media (max-width: 820px) { .missions { grid-template-columns: 1fr; } }

/* Prestations */
.prestations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--trait); border-left: 1px solid var(--trait); }
.presta { padding: clamp(24px, 3vw, 36px); display: grid; gap: 12px; align-content: start; border-right: 1px solid var(--trait); border-bottom: 1px solid var(--trait); transition: background-color .2s; }
.presta:hover { background: var(--or-pale); }
.presta-ic { width: 56px; height: 56px; display: grid; place-items: center; background: var(--charbon); color: var(--or-vif); border-radius: 50%; margin-bottom: 6px; }
.presta-ic .ic { width: 28px; height: 28px; }
.presta h3 { font-size: var(--t-xl); }
.presta p { color: var(--texte-doux); }
.presta ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; font-size: var(--t-s); font-weight: 500; }
.presta li { display: flex; gap: 10px; align-items: baseline; }
.presta li::before { content: ""; width: 10px; height: 6px; flex: none; background: var(--or); clip-path: polygon(0 0, 50% 100%, 100% 0, 80% 0, 50% 60%, 20% 0); transform: translateY(-1px); }
@media (max-width: 980px) { .prestations { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .prestations { grid-template-columns: 1fr; } }

/* Méthode (vraie séquence : numérotation justifiée) */
.etapes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); counter-reset: etape; }
.etapes li { counter-increment: etape; display: grid; gap: 10px; align-content: start; padding-top: 20px; border-top: 1px solid #45403A; }
.etapes li::before { content: counter(etape); font-family: var(--f-titre); font-size: 3rem; line-height: 1; color: var(--or-vif); }
.etapes p { color: #BFB7A9; }
@media (max-width: 900px) { .etapes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .etapes { grid-template-columns: 1fr; } }

/* Galerie */
.filtres { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.filtres button { font: 600 var(--t-s) var(--f-texte); padding: 10px 18px; min-height: 44px; border: 1px solid var(--trait); background: var(--blanc); color: var(--texte); border-radius: 999px; cursor: pointer; }
.filtres button[aria-pressed="true"] { background: var(--charbon); border-color: var(--charbon); color: var(--blanc); }
.galerie { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.photo { margin: 0; position: relative; aspect-ratio: 4 / 3; max-width: 100%; overflow: hidden; border-radius: 2px; background: radial-gradient(circle at 70% 25%, #3B3226, var(--charbon) 70%); color: var(--or-vif); display: grid; place-items: center; }
.photo-large { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.photo .ic { width: 28%; height: auto; aspect-ratio: 1; max-width: 90px; stroke-width: 1.3; opacity: .85; }
.photo figcaption { position: absolute; inset: auto 0 0 0; padding: 28px 14px 12px; background: linear-gradient(transparent, rgba(0,0,0,.8)); color: var(--blanc); font-weight: 600; font-size: var(--t-s); }
@media (max-width: 860px) { .galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-large { grid-row: auto; aspect-ratio: 2 / 1; } }

/* FAQ */
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.faq { border-top: 2px solid var(--charbon); }
.faq details { border-bottom: 1px solid var(--trait); }
.faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 20px; padding: 22px 0; font-weight: 700; font-size: var(--t-l); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; width: 14px; height: 14px; flex: none; margin-top: 6px; border-right: 2px solid var(--or); border-bottom: 2px solid var(--or); transform: rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: 12px; }
.faq details p { padding-bottom: 24px; color: var(--texte-doux); max-width: 64ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* Contact */
.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 80px); align-items: start; }
.coordonnees { display: grid; gap: 16px; }
.coordonnees > p { color: var(--texte-doux); font-size: var(--t-l); max-width: 40ch; }
.coordonnees dl { margin: 18px 0 0; display: grid; gap: 22px; }
.coordonnees dt { display: flex; align-items: center; gap: 10px; font-size: var(--t-s); color: var(--texte-doux); }
.coordonnees dt .ic { color: var(--or); }
.coordonnees dd { margin: 4px 0 0 30px; font-size: var(--t-l); font-weight: 600; }
.coordonnees dd a { text-decoration: none; }
.coordonnees dd a:hover { color: var(--or); }

.formulaire { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; background: var(--blanc); padding: clamp(22px, 3vw, 36px); border-radius: 2px; }
.champ { display: grid; gap: 6px; }
.champ-plein { grid-column: 1 / -1; }
.champ label { font-weight: 600; font-size: var(--t-s); }
.champ label span { font-weight: 400; color: var(--texte-doux); }
.champ input, .champ select, .champ textarea { font: inherit; width: 100%; padding: 12px 14px; border: 1px solid #C9C3B8; background: var(--blanc); color: var(--texte); border-radius: 2px; }
.champ input:focus, .champ select:focus, .champ textarea:focus { outline: 2px solid var(--or); outline-offset: 0; border-color: var(--or); }
.champ [aria-invalid="true"] { border-color: #B3261E; }
.form-pied { display: grid; gap: 14px; justify-items: start; }
.form-message { padding: 14px 16px; border-radius: 2px; background: var(--or-pale); font-size: var(--t-s); }
.form-message.erreur { background: #FBE9E7; color: #8C1D18; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .formulaire { grid-template-columns: 1fr; } }

/* ---------- Pied de page ---------- */
.site-footer { background: var(--charbon); color: #BFB7A9; font-size: var(--t-s); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 40px; padding-block: 56px 36px; }
.footer-marque { display: grid; gap: 16px; align-content: start; max-width: 38ch; }
.footer-marque img { height: 52px; width: auto; }
.site-footer h3 { color: var(--blanc); font-size: var(--t-m); margin-bottom: 14px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--or-vif); }
.footer-bas { border-top: 1px solid #36322B; padding-block: 20px; font-size: var(--t-xs); color: #8F877A; }


/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* =========================================================
   Structure multi-pages
   ========================================================= */

.section-serre { padding-block: clamp(48px, 7vw, 88px); }
.nav a[aria-current="page"] { color: var(--or); box-shadow: inset 0 -2px 0 var(--or); }
@media (max-width: 960px) { .nav a[aria-current="page"] { box-shadow: inset 3px 0 0 var(--or); padding-left: 12px; } }
.infobar-tel { text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.hero-specialites a { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.hero-specialites a:hover { color: var(--or-vif); }

.lien-suite { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--or); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; justify-self: start; width: fit-content; }
.lien-suite:hover { color: var(--charbon); }
.section-charbon .lien-suite { color: var(--or-vif); }

.section-tete-ligne { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 40px; max-width: none; }
.section-tete-ligne > div { display: grid; gap: 14px; max-width: 62ch; }

/* Bandeau de titre des pages intérieures */
.page-titre { position: relative; overflow: hidden; background: var(--charbon); color: var(--blanc); padding-block: clamp(40px, 6vw, 72px); }
.page-titre .wrap { position: relative; z-index: 1; display: grid; gap: 16px; }
.page-titre h1 { font-size: var(--t-2xl); max-width: 22ch; }
.page-intro { max-width: 60ch; color: #D3CCBF; font-size: var(--t-l); line-height: 1.5; }
.page-titre-embleme { position: absolute; right: -40px; top: 50%; width: 300px; transform: translateY(-50%); opacity: .12; }
.fil ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; font-size: var(--t-s); color: #A9A194; }
.fil li + li::before { content: "/"; margin: 0 10px; color: #6D665B; }
.fil a { color: var(--or-vif); text-decoration: none; }
.fil a:hover { text-decoration: underline; }

/* Prestations résumées (accueil) */
.presta-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.presta-mini a { display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: start; padding: 20px; background: var(--blanc); text-decoration: none; border-radius: 2px; border: 1px solid transparent; transition: border-color .2s; }
.presta-mini a:hover { border-color: var(--or); }
.presta-mini .presta-ic { grid-row: span 2; margin: 0; }
.presta-mini strong { font-size: var(--t-l); line-height: 1.25; padding-top: 4px; }
.presta-mini span:last-child { color: var(--texte-doux); font-size: var(--t-s); }
@media (max-width: 980px) { .presta-mini { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .presta-mini { grid-template-columns: 1fr; } }
.presta h2 { font-family: var(--f-texte); font-size: var(--t-xl); font-weight: 700; line-height: 1.25; }
.presta { scroll-margin-top: 110px; }

/* Actualités : cartes */
.actu-grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.actu-carte { display: grid; grid-template-rows: auto 1fr; background: var(--blanc); border: 1px solid var(--trait); border-radius: 2px; }
.actu-visuel { display: grid; place-items: center; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; background: radial-gradient(circle at 75% 20%, #3B3226, var(--charbon) 70%); color: var(--or-vif); }
.actu-visuel img { width: 100%; height: 100%; object-fit: cover; }
.visuel-ic { width: 22%; height: auto; aspect-ratio: 1; max-width: 72px; stroke-width: 1.3; }
.actu-corps { display: grid; gap: 12px; align-content: start; padding: 22px 22px 26px; }
.actu-corps h2, .actu-corps h3 { font-family: var(--f-texte); font-size: var(--t-l); font-weight: 700; line-height: 1.3; }
.actu-corps h2 a, .actu-corps h3 a { text-decoration: none; }
.actu-corps h2 a:hover, .actu-corps h3 a:hover { color: var(--or); }
.actu-corps > p:not(.actu-meta) { color: var(--texte-doux); font-size: var(--t-s); }
.actu-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: var(--t-xs); color: var(--texte-doux); }
.actu-meta span { display: inline-flex; align-items: center; gap: 6px; }
.actu-meta .ic { width: 15px; height: 15px; color: var(--or); }
.actu-cat { background: var(--or-pale); color: #7A4A02 !important; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
@media (max-width: 960px) { .actu-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .actu-grille { grid-template-columns: 1fr; } }

.compteur { font-size: var(--t-s); color: var(--texte-doux); margin: -12px 0 20px; }
.vide { padding: 32px; text-align: center; background: var(--pierre); color: var(--texte-doux); }
.lien-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--or); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* Article */
.article-grille { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(32px, 5vw, 72px); align-items: start; }
.article { display: grid; gap: 24px; min-width: 0; }
.article-visuel { display: grid; place-items: center; aspect-ratio: 21 / 9; max-width: 100%; overflow: hidden; background: radial-gradient(circle at 75% 20%, #3B3226, var(--charbon) 70%); color: var(--or-vif); border-radius: 2px; }
.article-visuel img { width: 100%; height: 100%; object-fit: cover; }
.article-chapo { font-size: var(--t-xl); line-height: 1.45; max-width: 62ch; }
.article-texte { display: grid; gap: 16px; max-width: 68ch; }
.article-texte h2 { font-family: var(--f-texte); font-weight: 700; font-size: var(--t-xl); line-height: 1.25; margin-top: 18px; }
.article-texte p { color: #3B3833; line-height: 1.7; }
.article-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--trait); padding-top: 24px; margin-top: 12px; }
.article-nav a { display: grid; gap: 4px; text-decoration: none; font-weight: 600; line-height: 1.35; }
.article-nav a span { font-size: var(--t-xs); color: var(--texte-doux); font-weight: 500; }
.article-nav a:hover { color: var(--or); }
.article-nav .suiv { text-align: right; }
.article-aside { display: grid; gap: 20px; position: sticky; top: 100px; }
.aside-bloc { display: grid; gap: 14px; padding: 24px; background: var(--pierre); border-radius: 2px; }
.aside-bloc h2 { font-family: var(--f-texte); font-size: var(--t-l); font-weight: 700; line-height: 1.3; }
.aside-cta { background: var(--charbon); color: var(--blanc); }
.aside-cta p { color: #CFC7B9; font-size: var(--t-s); }
.aside-tel { color: var(--or-vif); font-weight: 700; text-decoration: none; }
.aside-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.aside-liste a { display: grid; gap: 2px; text-decoration: none; font-weight: 600; line-height: 1.35; font-size: var(--t-s); }
.aside-liste a:hover { color: var(--or); }
.aside-liste time { font-size: var(--t-xs); color: var(--texte-doux); font-weight: 500; }
@media (max-width: 900px) { .article-grille { grid-template-columns: 1fr; } .article-aside { position: static; } }
@media (max-width: 520px) { .article-nav { grid-template-columns: 1fr; } .article-nav .suiv { text-align: left; } }

/* Galerie complète */
.galerie-complete, .galerie-apercu { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px 16px; }
.photo { display: block; place-items: normal; aspect-ratio: auto; background: none; }
.photo-btn { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 3; max-width: 100%; padding: 0; border: 0; cursor: zoom-in; overflow: hidden; border-radius: 2px; background: radial-gradient(circle at 70% 25%, #3B3226, var(--charbon) 70%); color: var(--or-vif); }
.photo-btn img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.photo-btn:hover img { transform: scale(1.04); }
.photo-btn .photo-zoom { position: absolute; max-width: none; aspect-ratio: auto; stroke-width: 1.7; top: 10px; right: 10px; width: 30px; height: 30px; padding: 6px; background: rgba(0,0,0,.55); color: var(--blanc); border-radius: 2px; opacity: 0; transition: opacity .2s; }
.photo-btn:hover .photo-zoom, .photo-btn:focus-visible .photo-zoom { opacity: 1; }
.photo figcaption { position: static; padding: 10px 2px 0; background: none; color: var(--texte); font-weight: 600; font-size: var(--t-s); line-height: 1.35; }
.photo figcaption span { display: block; font-size: var(--t-xs); color: var(--or); font-weight: 700; }
.galerie-apercu .photo-btn { cursor: pointer; }
@media (max-width: 860px) { .galerie-complete, .galerie-apercu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Visionneuse */
.visionneuse { width: min(960px, calc(100vw - 32px)); max-width: none; max-height: calc(100vh - 32px); padding: 0; border: 0; background: transparent; color: var(--blanc); }
.visionneuse::backdrop { background: rgba(10, 9, 7, .9); }
.visionneuse-cadre { position: relative; display: grid; gap: 12px; }
.visionneuse-media { display: grid; place-items: center; aspect-ratio: 4 / 3; max-height: calc(100vh - 140px); width: 100%; background: radial-gradient(circle at 70% 25%, #3B3226, var(--charbon) 70%); color: var(--or-vif); overflow: hidden; border-radius: 2px; }
.visionneuse-media img { width: 100%; height: 100%; object-fit: contain; }
.visionneuse-media .ic { width: 22%; height: auto; aspect-ratio: 1; stroke-width: 1.2; }
.visionneuse-bas { display: flex; justify-content: space-between; gap: 16px; font-weight: 600; }
.visionneuse-bas span { color: var(--or-vif); margin-right: 10px; }
.visionneuse-pos { color: #A9A194; font-weight: 500; white-space: nowrap; }
.vis-btn { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: var(--blanc); cursor: pointer; }
.vis-btn:hover { background: var(--or); }
.vis-btn .ic { width: 24px; height: 24px; }
.vis-fermer { top: 10px; right: 10px; }
.vis-prec, .vis-suiv { top: calc(50% - 40px); }
.vis-prec { left: 10px; }
.vis-suiv { right: 10px; }
.footer-grid { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-marque { grid-column: 1 / -1; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }

/* Espacement resserré autour des bannières */
.banner-slot { padding-block: clamp(20px, 3vw, 28px); }
.banner-slot + .section { padding-top: clamp(28px, 4vw, 44px); }
.section:has(+ .banner-slot) { padding-bottom: clamp(28px, 4vw, 44px); }
.section-pierre:has(+ .banner-slot), .section-charbon:has(+ .banner-slot) { padding-bottom: clamp(40px, 5vw, 64px); }
.banner-slot + .section-pierre, .banner-slot + .section-charbon { padding-top: clamp(40px, 5vw, 64px); }
.hero + .banner-slot, .page-titre + .banner-slot { padding-top: clamp(24px, 3.5vw, 36px); }
.banner-slot:has(+ .site-footer), main > .banner-slot:last-child { padding-bottom: clamp(28px, 4vw, 40px); }

/* Espacement des bannières encore réduit */
.banner-slot { padding-block: clamp(12px, 1.8vw, 18px); }
.hero + .banner-slot, .page-titre + .banner-slot { padding-top: clamp(16px, 2.2vw, 24px); }
.banner-slot + .section { padding-top: clamp(20px, 3vw, 32px); }
.section:has(+ .banner-slot) { padding-bottom: clamp(20px, 3vw, 32px); }
.section-pierre:has(+ .banner-slot), .section-charbon:has(+ .banner-slot) { padding-bottom: clamp(32px, 4vw, 48px); }
.banner-slot + .section-pierre, .banner-slot + .section-charbon { padding-top: clamp(32px, 4vw, 48px); }
.banner-slot:has(+ .site-footer), main > .banner-slot:last-child { padding-bottom: clamp(20px, 3vw, 28px); }

/* Emblème des bannières entièrement visible */
.banner { grid-template-columns: 19cqw minmax(0, 1fr) auto; gap: 3cqw; padding-left: 3cqw; }
.banner-embleme { width: 19cqw; margin-left: 0; }

/* Titres de section plus mesurés */
:root { --t-2xl: clamp(1.9rem, 3.1vw, 2.6rem); }
.section-tete { gap: 10px; margin-bottom: clamp(28px, 4vw, 44px); }
.section-tete p { font-size: var(--t-m); }
.etapes li::before { font-size: 2.2rem; }
.etapes h3 { font-size: var(--t-m); }
.etapes p { font-size: var(--t-s); }
.section-charbon { padding-block: clamp(48px, 6vw, 80px); }
.page-titre h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }

/* Héros d'accueil plus compact */
:root { --t-3xl: clamp(2.3rem, 4.4vw, 3.9rem); }
.hero-grid { padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px); gap: 32px; }
.hero h1 { max-width: 16ch; }
.lead { margin-top: 18px; font-size: var(--t-m); }
.hero-actions { margin-top: 26px; }
.hero-embleme { width: min(100%, 340px); margin-right: 0; }

/* FAQ plus compacte */
.faq-grid h2 { font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.faq-grid .section-tete p { font-size: var(--t-s); }
.faq summary { font-size: var(--t-m); padding: 16px 0; }
.faq summary::after { width: 11px; height: 11px; margin-top: 5px; }
.faq details[open] summary::after { margin-top: 10px; }
.faq details p { font-size: var(--t-s); padding-bottom: 18px; }

/* Sélecteur de langue */
.langues { display: inline-flex; align-items: center; border: 1px solid var(--trait); border-radius: 999px; padding: 3px; gap: 2px; font-size: var(--t-s); font-weight: 700; flex: none; }
.langues a, .langues span { display: grid; place-items: center; min-width: 36px; height: 32px; padding: 0 8px; border-radius: 999px; text-decoration: none; letter-spacing: .04em; }
.langues a { color: var(--texte-doux); }
.langues a:hover { color: var(--or); }
.langue-actif { background: var(--charbon); color: var(--blanc); }
.site-header .langues { margin-left: 4px; }
.langues-pied { border-color: #3A362F; margin-top: 4px; justify-self: start; }
.langues-pied a { color: #BFB7A9; }
.langues-pied .langue-actif { background: var(--or); color: var(--blanc); }
@media (max-width: 960px) { .site-header .langues { margin-left: auto; } .menu-btn { margin-left: 8px; } }

/* Drapeaux du sélecteur de langue */
.langues a, .langues > span { display: inline-flex; gap: 6px; align-items: center; padding: 0 10px 0 8px; }
.drapeau { width: 20px; height: 13px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0,0,0,.15); display: block; }
.langues a .drapeau { opacity: .85; }
.langues a:hover .drapeau { opacity: 1; }

/* En-tête : place pour le sélecteur de langue */
.nav a { white-space: nowrap; padding-inline: 11px; }
.header-cta { white-space: nowrap; }
.site-header .wrap { gap: 16px; }
@media (max-width: 1240px) { .header-cta { display: none; } }
@media (max-width: 420px) { .site-header .langues .drapeau + span { display: none; } .site-header .langues a, .site-header .langues > span { padding: 0 9px; } }

/* Version PHP : formulaire, bannière image, réseaux sociaux, aperçu */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-message.succes { background: #E7F5EC; color: #14532D; }
.banner-image { display: block; padding: 0; }
.banner-image img { width: 100%; height: 100%; object-fit: cover; display: block; max-width: 100%; }
.reseaux { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.reseaux a { color: var(--or-vif); font-weight: 600; text-decoration: none; }
.reseaux a:hover { text-decoration: underline; }
.apercu-bandeau { background: #FFF4D6; color: #6B4A00; text-align: center; padding: 10px 16px; font-weight: 600; border-bottom: 1px solid #F0D99A; }

/* =========================================================
   Textes justifiés
   ========================================================= */
.lead, .intro, .page-intro, .societe-texte p, .mission p, .presta p, .presta-mini span:last-child,
.actu-corps > p:not(.actu-meta), .article-chapo, .article-texte p, .article-texte li, .faq details p,
.section-tete p, .coordonnees > p, .etapes p, .agrement p, .footer-marque > p:not(.reseaux),
.aside-bloc p, .erreur-intro, .societe-sites + p {
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
/* Titres et éléments courts : alignés à gauche, sans coupure de mots */
h1, h2, h3, .btn, .banner-titre, .lien-suite, .actu-meta, figcaption { hyphens: manual; -webkit-hyphens: manual; }
.section-tete-ligne > div > p { text-align: left; }

/* =========================================================
   Alignements
   ========================================================= */
.section-tete-ligne { align-items: flex-end; }
.section-tete-ligne .lien-suite { margin-bottom: 4px; }
.actu-carte, .presta, .mission { height: 100%; }
.actu-corps { grid-template-rows: auto auto 1fr auto; }
.actu-corps .lien-suite { align-self: end; }
@media (max-width: 620px) {
  .section-tete-ligne { flex-direction: column; align-items: flex-start; }
  .hero-actions .btn { flex: 1 1 100%; }
  .page-titre h1 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
}

/* =========================================================
   Pied de page
   ========================================================= */
.footer-grid { align-items: start; row-gap: 36px; }
.site-footer h3 { margin-top: 0; }
.site-footer li { line-height: 1.45; }
.footer-bas { border-top: 0; padding-block: 0 26px; }
.footer-bas p { border-top: 1px solid #36322B; padding-top: 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; margin: 0; }
.footer-bas .haut { color: #BFB7A9; text-decoration: none; font-weight: 600; }
.footer-bas .haut:hover { color: var(--or-vif); }
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-marque { grid-column: 1 / -1; max-width: 60ch; }
}
@media (max-width: 620px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; padding-block: 44px 28px; }
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-bas p { justify-content: flex-start; }
}

/* =========================================================
   Page 404
   ========================================================= */
.erreur-404 { background: var(--charbon); color: var(--blanc); overflow: hidden; }
.erreur-grille { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 40px; align-items: center; padding-block: clamp(48px, 7vw, 96px); }
.erreur-code { font-family: var(--f-titre); font-size: clamp(5rem, 16vw, 10rem); line-height: .9; color: var(--or-vif); margin: 0 0 8px; letter-spacing: .02em; }
.erreur-404 h1 { font-size: clamp(2rem, 4vw, 3rem); }
.erreur-intro { margin-top: 18px; max-width: 52ch; color: #DCD5C8; font-size: var(--t-l); line-height: 1.55; }
.erreur-embleme { justify-self: end; width: min(100%, 320px); opacity: .9; }
.erreur-liens-titre { font-size: var(--t-xl); font-family: var(--f-texte); font-weight: 700; margin-bottom: 18px; }
.erreur-liens { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.erreur-liens a { display: flex; align-items: center; gap: 12px; padding: 18px 20px; background: var(--pierre); border: 1px solid transparent; border-radius: 2px; text-decoration: none; font-weight: 600; font-size: var(--t-l); }
.erreur-liens a:hover { border-color: var(--or); color: var(--or); }
.erreur-liens .ic { color: var(--or); width: 24px; height: 24px; }
@media (max-width: 860px) {
  .erreur-grille { grid-template-columns: 1fr; }
  .erreur-embleme { position: absolute; right: -80px; width: 260px; opacity: .12; }
  .erreur-404 { position: relative; }
  .erreur-texte { position: relative; }
  .erreur-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .erreur-liens { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .societe-texte .intro { font-size: var(--t-l); line-height: 1.5; }
  .lead, .page-intro, .erreur-intro { font-size: var(--t-m); }
}