/*
Theme Name:  Groupe Broers — Refonte
Theme URI:   https://groupebroers.be/
Description: Thème enfant de « groupebroers ». Nouvelle page d'accueil avec photos de
             chantier, bande de logos des sept sociétés, cartes détaillées et chaîne du
             chantier. Gabarit pour les pages classiques, éditeur rétabli, coordonnées
             centralisées. Crée à sa première activation les pages du menu.
Author:      Groupe Broers
Template:    groupebroers
Version:     1.7.0
License:     GPL-2.0-or-later
Text Domain: groupebroers-refonte
*/

/* =====================================================================
   Les couleurs, tailles et espacements sont tous pilotés par les
   variables du bloc :root ci-dessous. Pour changer le vert de la marque
   partout sur la page, il suffit de modifier --green.
   ===================================================================== */
:root{
  --asphalt:#1B1E21;
  --marking:#E9E9E2;
  --paper:#F1F3EE;
  --surface:#FFFFFF;
  --surface-2:#FAFBF8;
  --ink:#191C17;
  --ink-2:#4A4F48;
  --ink-3:#767C74;
  --line:#DCE0D7;
  --line-2:#C6CDBE;
  --green:#4B923A;
  --green-br:#3F7F31;
  --red:#D91920;
  /* Le filet des intertitres : le rouge du logo, assez pâle pour rester discret. */
  --rule:rgba(217,25,32,.55);
  --chip-bg:#EAEFE6;
  --chip-ink:#33502A;
  --plate:#FFFFFF;
  --hero-top:#FCFDFB;
  --hero-bot:#EDF0EA;
  --hero-green:rgba(75,146,58,.15);
  --hero-red:rgba(217,25,32,.06);
  --head-bg:rgba(255,255,255,.93);
  --noise-blend:multiply;
  --noise-op:.34;
  --shadow:0 1px 2px rgba(25,28,23,.05), 0 12px 28px -18px rgba(25,28,23,.35);

  --f-display:"Bebas Neue","Archivo Narrow",Impact,Haettenschweiler,sans-serif;
  --f-body:"IBM Plex Sans",-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --wrap:1180px;
  --pad:clamp(20px,5vw,48px);
}

/* ---------------------------------------------------------------------
   MODE SOMBRE — désactivé volontairement.
   La maquette gérait un thème sombre automatique. Sur un site vitrine
   d'entreprise c'est rarement souhaitable : la moitié des visiteurs ont
   le mode sombre activé sur leur téléphone et verraient une page d'accueil
   noire sans l'avoir demandé.
   Pour le réactiver, remettre les deux blocs de variables sombres
   (@media (prefers-color-scheme:dark) et :root[data-theme="dark"])
   redéfinissant --paper, --surface, --ink, --line, --green, --plate,
   --hero-top, --hero-bot, --head-bg.
   --------------------------------------------------------------------- */

*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:16.5px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit}
/* Bebas Neue ne possède que des capitales : on les force, sinon les
   minuscules retombent sur la police de secours et le rendu casse. */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:400;margin:0;text-wrap:balance;
  text-transform:uppercase;letter-spacing:.014em;line-height:1}
p{margin:0}
:focus-visible{outline:2.5px solid var(--green);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}

.eyebrow{
  font-family:var(--f-mono);font-size:12px;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:var(--green-br);display:flex;align-items:center;gap:12px;
}
.eyebrow::after{content:"";flex:1;max-width:170px;height:1px;
  background:linear-gradient(90deg,var(--rule),rgba(217,25,32,0))}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:30;
  background:var(--head-bg);backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head__in{display:flex;align-items:center;gap:24px;min-height:66px}
.site-head .logo-pos{height:32px;width:auto}
.site-head .logo-neg{display:none} /* réservé au pied de page, sur fond sombre */

.nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav a{
  font-family:var(--f-display);font-weight:600;font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-2);text-decoration:none;padding:9px 14px;border-radius:999px;transition:color .16s,background .16s;
}
.nav a:hover{color:var(--ink);background:var(--chip-bg)}
.nav a.nav__cta{background:var(--green);color:#fff}
.nav a.nav__cta:hover{background:var(--green);filter:brightness(1.08)}

/* ---------- hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(900px 400px at 84% -22%, var(--hero-green), transparent 66%),
    radial-gradient(620px 320px at 0% 115%, var(--hero-red), transparent 70%),
    linear-gradient(180deg,var(--hero-top),var(--hero-bot));
  border-bottom:1px solid var(--line);
}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:var(--noise-op);mix-blend-mode:var(--noise-blend);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/><feColorMatrix type='saturate' values='0'/></filter><rect width='200' height='200' filter='url(%23n)' opacity='0.22'/></svg>");
}
.hero__in{position:relative;padding-block:clamp(34px,5vw,54px) clamp(26px,3.4vw,34px);display:grid;gap:20px}
/* Le titre d'accroche fait maintenant une phrase complète et non plus
   quatre mots : à 78 px sur 21 caractères de large il tenait sur cinq
   lignes et repoussait la bande de logos vers le bas. Plus large, un peu
   moins haut, et coupé au bon endroit sur grand écran (voir .br-lg). */
.hero h1{font-size:clamp(34px,4.6vw,54px);line-height:.96}
/* Retour à la ligne imposé seulement là où la place le permet ; sur
   téléphone le texte se coupe tout seul, sans césure forcée à contretemps. */
.br-lg{display:none}
@media (min-width:900px){.br-lg{display:inline}}
.hero h1 em{font-style:normal;color:var(--green)}
.hero__lede{max-width:70ch;color:var(--ink-2);font-size:clamp(16px,1.4vw,18px)}
.hero__lede strong{color:var(--ink);font-weight:600}

/* logo strip */
.strip{
  position:relative;border-top:1px solid var(--line);
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.015));
}
.strip__in{padding-block:20px 24px;display:grid;gap:12px}
.strip__label{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3);
}
/* Le nombre de colonnes suit le nombre de sociétés : le gabarit pose
   --n sur l'élément. Ajouter ou retirer une société ne laisse donc jamais
   un logo orphelin sur une deuxième ligne. */
.strip__row{display:grid;grid-template-columns:repeat(var(--n,6),minmax(0,1fr));gap:10px}
.strip__row a{
  background:var(--plate);border:1px solid var(--line);border-radius:4px;
  height:86px;display:grid;place-items:center;padding:12px 14px;
  transition:transform .16s,border-color .16s,box-shadow .16s;
}
.strip__row a:hover{transform:translateY(-2px);border-color:var(--line-2);box-shadow:var(--shadow)}
.strip__row img{max-height:58px;width:auto;object-fit:contain}

/* ---------- sections ---------- */
.section{padding-block:clamp(48px,6vw,80px)}
.section--alt{background:var(--surface-2);border-block:1px solid var(--line)}
.sec-head{display:grid;gap:13px;margin-bottom:clamp(28px,3.5vw,42px);max-width:70ch}
.sec-head h2{font-size:clamp(30px,4.1vw,48px);line-height:1;max-width:27ch}
.sec-head p{color:var(--ink-2);max-width:64ch}

/* ---------- sociétés ---------- */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
/* Sept cartes sur trois colonnes laissent une carte seule en bas à
   gauche. On la recentre : le sélecteur ne s'active que dans ce cas
   précis (dernière carte ET première d'une ligne). */
.grid > .card:last-child:nth-child(3n+1){grid-column:2}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:5px;
  display:flex;flex-direction:column;overflow:hidden;scroll-margin-top:90px;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--line-2)}
.card__plate{background:var(--plate);border-bottom:1px solid var(--line);height:150px;display:grid;place-items:center;padding:24px 28px}
.card__plate img{max-height:102px;width:auto;object-fit:contain}
.card__body{padding:22px 24px 24px;display:flex;flex-direction:column;gap:14px;flex:1}
.card__label{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.card__desc{font-size:15px;color:var(--ink-2);line-height:1.58}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--f-mono);font-size:11.5px;font-weight:500;line-height:1.35;background:var(--chip-bg);color:var(--chip-ink);padding:5px 9px;border-radius:3px}
.card__link{
  font-family:var(--f-display);font-size:16px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--green-br);text-decoration:none;display:inline-flex;align-items:center;gap:8px;
  margin-top:auto;padding-top:6px;align-self:flex-start;
}
.card__link .arw{transition:transform .16s}
.card__link:hover .arw{transform:translateX(3px)}
.card__soon{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-3);border:1px dashed var(--line-2);padding:5px 9px;border-radius:3px;align-self:flex-start;margin-top:auto}

/* ---------- chaîne ---------- */
/* Une seule ligne, quel que soit le nombre d'étapes : le gabarit pose
   --nc. Sans quoi une étape ajoutée passerait seule à la ligne et le
   trait pointillé qui relie les numéros n'aurait plus de sens. */
.chain{display:grid;grid-template-columns:repeat(var(--nc,5),minmax(0,1fr));gap:0;position:relative}
.chain::before{content:"";position:absolute;left:0;right:0;top:31px;height:3px;background:repeating-linear-gradient(90deg,var(--green) 0 18px,transparent 18px 34px);opacity:.4}
.step{position:relative;padding:0 20px 0 0;display:grid;gap:10px;align-content:start;min-width:0}
.step__n{text-transform:uppercase;position:relative;z-index:1;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:2px solid var(--green);font-family:var(--f-display);font-weight:400;font-size:28px;line-height:1;color:var(--green);font-variant-numeric:tabular-nums}
/* Le titre d'étape se resserre avec la fenêtre : à six étapes sur une
   ligne, une colonne fait moins de 170 px et « Signalisation » à 22 px
   mordait sur la colonne voisine. */
.step h3{font-size:clamp(17px,1.55vw,22px);letter-spacing:.02em;margin-top:2px;overflow-wrap:break-word}
.step__who{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--green-br)}
.step p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
.chain-note{margin-top:34px;padding:18px 22px;border-left:3px solid var(--red);background:var(--surface);border-radius:0 4px 4px 0;display:flex;gap:16px;align-items:baseline;flex-wrap:wrap;box-shadow:var(--shadow)}
.chain-note b{font-family:var(--f-display);font-size:18px;letter-spacing:.05em;text-transform:uppercase}
.chain-note span{color:var(--ink-2);font-size:15px}

/* ---------- groupe ---------- */
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,64px);align-items:start}
.prose{display:grid;gap:18px;color:var(--ink-2);max-width:62ch}
.prose strong{color:var(--ink);font-weight:600}
/* Second bloc de texte de la section « Le groupe » : séparé du premier
   par un filet rouge discret, comme les intertitres. */
.prose--suite{margin-top:30px;padding-top:26px;border-top:1px solid var(--rule)}
.prose--suite h3{font-size:clamp(20px,2vw,25px);color:var(--ink);letter-spacing:.02em}
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:28px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:16px 18px;display:grid;gap:3px}
.stat b{font-family:var(--f-display);font-weight:400;text-transform:uppercase;font-size:46px;color:var(--ink);letter-spacing:.01em;line-height:.9;font-variant-numeric:tabular-nums}
.stat span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.facts{display:grid;gap:0;border:1px solid var(--line);border-radius:5px;overflow:hidden;background:var(--surface)}
.fact{display:grid;grid-template-columns:auto 1fr;gap:16px;padding:16px 20px;border-bottom:1px solid var(--line);align-items:baseline}
.fact:last-child{border-bottom:0}
.fact dt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.fact dd{margin:0;font-family:var(--f-display);font-weight:600;font-size:15.5px}

/* ---------- footer ---------- */
.foot{background:var(--asphalt);color:#B7BDB2;padding-block:clamp(44px,6vw,60px) 0}
.foot__grid{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.foot img.mark{height:42px;width:auto;margin-bottom:18px}
.foot h4{font-family:var(--f-display);font-size:16px;letter-spacing:.13em;color:#fff;margin-bottom:14px}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.foot a{color:#B7BDB2;text-decoration:none;font-size:14.5px}
.foot a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot p{font-size:14.5px;line-height:1.6}
.tbd{font-family:var(--f-mono);font-size:12px;color:#7E877C;border:1px dashed #4A5049;padding:3px 8px;border-radius:3px;display:inline-block}
.foot__bar{margin-top:clamp(34px,5vw,48px);border-top:1px solid rgba(233,233,226,.12);padding-block:20px;display:flex;gap:16px;flex-wrap:wrap;justify-content:space-between;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:#7E877C}

@media (max-width:1000px){
  .strip__row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .chain{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px}
  .chain::before{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid > .card:last-child:nth-child(3n+1){grid-column:auto}
  .split{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .strip__row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chain{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr}
  .nav a:not(.nav__cta){display:none}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =====================================================================
   MENU  —  liens vers de vraies pages
   ===================================================================== */
.nav__list{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.nav__list a{
  font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:.01em;
  color:var(--ink-2);text-decoration:none;padding:9px 14px;border-radius:999px;
  transition:color .16s,background .16s;display:inline-block;
}
.nav__list a:hover{color:var(--ink);background:var(--chip-bg)}
.nav__list .current-menu-item > a,
.nav__list a.is-current{color:var(--ink);background:var(--chip-bg)}
.nav__list .is-cta > a{background:var(--green);color:#fff}
.nav__list .is-cta > a:hover{background:var(--green);filter:brightness(1.08);color:#fff}

/* =====================================================================
   PAGES CLASSIQUES  (page.php)
   ===================================================================== */
.page-hero{
  position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:
    radial-gradient(700px 300px at 88% -30%, var(--hero-green), transparent 68%),
    linear-gradient(180deg,var(--hero-top),var(--hero-bot));
}
.page-hero__in{padding-block:clamp(34px,5vw,58px) clamp(28px,4vw,44px);display:grid;gap:14px}
.page-hero h1{font-size:clamp(36px,5.4vw,62px);line-height:.96;max-width:24ch}
.page-hero__lede{max-width:66ch;color:var(--ink-2);font-size:clamp(16px,1.4vw,18.5px)}
.page-media{margin-top:clamp(28px,4vw,44px)}
.page-media img{width:100%;height:auto;border-radius:5px;border:1px solid var(--line)}

/* Contenu rédigé dans WordPress -------------------------------------- */
.entry-content{max-width:70ch;font-size:17px;line-height:1.68;color:var(--ink-2)}
.entry-content > * + *{margin-top:1.15em}
.entry-content h2,
.entry-content h3,
.entry-content h4{color:var(--ink);margin-top:1.9em;margin-bottom:.55em}
.entry-content h2{font-size:clamp(28px,3.2vw,40px);letter-spacing:.015em}
.entry-content h3{font-size:25px;letter-spacing:.02em}
.entry-content h4{font-size:21px;letter-spacing:.02em}
.entry-content strong{color:var(--ink);font-weight:600}
.entry-content a{color:var(--green-br);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line-2)}
.entry-content a:hover{text-decoration-color:var(--green)}
.entry-content ul,
.entry-content ol{padding-left:1.35em}
.entry-content li + li{margin-top:.45em}
.entry-content ul{list-style:none;padding-left:0}
.entry-content ul li{position:relative;padding-left:1.4em}
.entry-content ul li::before{
  content:"";position:absolute;left:.15em;top:.62em;width:9px;height:3px;background:var(--green);
}
.entry-content ol{list-style:decimal}
.entry-content blockquote{
  margin-inline:0;padding:16px 22px;border-left:3px solid var(--green);
  background:var(--surface);border-radius:0 4px 4px 0;color:var(--ink-2);
}
.entry-content blockquote p + p{margin-top:.8em}
.entry-content img,
.entry-content video,
.entry-content iframe{max-width:100%;height:auto;border-radius:4px}
.entry-content figure{margin-inline:0}
.entry-content figcaption{
  font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3);margin-top:9px;
}
.entry-content hr{border:0;border-top:1px solid var(--line);margin-block:2.4em}
.entry-content code{
  font-family:var(--f-mono);font-size:.88em;background:var(--chip-bg);color:var(--chip-ink);
  padding:2px 6px;border-radius:3px;
}
.entry-content pre{
  background:var(--asphalt);color:#E9E9E2;padding:18px 20px;border-radius:5px;overflow-x:auto;
}
.entry-content pre code{background:none;color:inherit;padding:0}
.entry-content table{
  width:100%;border-collapse:collapse;font-size:15.5px;display:block;overflow-x:auto;
}
.entry-content th,
.entry-content td{border:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
.entry-content th{background:var(--surface-2);color:var(--ink);font-weight:600}
.entry-content .wp-block-button__link{
  display:inline-block;background:var(--green);color:#fff;text-decoration:none;
  font-family:var(--f-display);font-weight:700;font-size:13.5px;letter-spacing:.05em;
  text-transform:uppercase;padding:13px 22px;border-radius:3px;
}
.entry-content .alignwide{max-width:none;width:100%}
.entry-content .aligncenter{margin-inline:auto;text-align:center}

/* Les shortcodes du thème débordent volontairement de la colonne de texte */
.entry-content .grid,
.entry-content .chain,
.entry-content .chain-note{max-width:none}
.entry-content .grid,
.entry-content .chain{margin-top:2em}
.entry-content .chips li::before{display:none}

.page-links{margin-top:2.4em;font-family:var(--f-mono);font-size:13px;color:var(--ink-3)}

/* =====================================================================
   COORDONNÉES
   ===================================================================== */
.foot__grid{grid-template-columns:1.5fr 1fr 1fr}
.contact{font-style:normal;display:grid;gap:2px;font-size:14.5px;line-height:1.55}
.contact__ligne{display:block}
.contact__pays{margin-bottom:12px}
.contact__lien{display:block;text-decoration:none}
.contact__lien:hover{text-decoration:underline;text-underline-offset:3px}
/* Dans le pied de page : le bloc hérite simplement des couleurs du pied. */
.contact--footer{color:inherit}

/* Dans une page : bloc encadré, coordonnées en avant */
.contact--page{
  background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--green);
  border-radius:0 5px 5px 0;padding:22px 26px;max-width:34ch;gap:3px;font-size:16px;
}
.contact--page .contact__lien{color:var(--green-br);font-weight:600;font-size:16.5px}
.contact--page .contact__pays{margin-bottom:16px}

@media (max-width:1000px){
  .foot__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:620px){
  .foot__grid{grid-template-columns:1fr}
}

/* =====================================================================
   PHOTOS
   ===================================================================== */
.band{position:relative;overflow:hidden;border-block:1px solid var(--line);
  height:clamp(220px,26vw,340px);background:var(--asphalt)}
.band img{width:100%;height:100%;object-fit:cover;display:block}
.band__cap{position:absolute;left:0;right:0;bottom:0;
  padding:16px clamp(20px,5vw,48px);
  background:linear-gradient(0deg,rgba(20,23,25,.80),rgba(20,23,25,0));
  color:#E9E9E2;font-family:var(--f-mono);font-size:11.5px;
  letter-spacing:.13em;text-transform:uppercase}
.band__cap b{color:#fff;font-family:var(--f-display);font-size:18px;
  letter-spacing:.06em;text-transform:uppercase;margin-right:9px}
.band--court{height:clamp(170px,20vw,250px)}

/* La bande de logos est sortie du hero : elle garde le même fond. */
.hero--strip{padding:0}

/* Photo de la section « Le groupe » */
.split--photo{grid-template-columns:1.05fr .95fr;align-items:start}
.groupe__photo{margin:0;border-radius:6px;overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow)}
.groupe__photo img{width:100%;height:clamp(280px,30vw,400px);object-fit:cover;display:block}
.groupe__photo figcaption{background:var(--surface);border-top:1px solid var(--line);
  padding:12px 16px;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3)}
.facts--sous{margin-top:22px}
@media (max-width:1000px){.split--photo{grid-template-columns:1fr}}

/* Signature du studio */
.foot__credit{display:inline-flex;align-items:center;gap:7px;margin-left:10px;
  text-transform:none;letter-spacing:.02em}
.foot__credit a{display:inline-flex;align-items:center;line-height:0;
  opacity:.7;transition:opacity .16s}
.foot__credit a:hover{opacity:1}
.foot__credit img{height:13px;width:auto;display:block}

/* =====================================================================
   MOUVEMENT
   ---------------------------------------------------------------------
   Deux effets seulement, et tous deux sûrs :

   1. Le hero s'installe au chargement, par une animation CSS qui se
      TERMINE à l'état visible. Même si elle est interrompue, le texte
      reste lisible.
   2. Le reste apparaît au défilement. La classe « gbr-anim » qui masque
      ces éléments est posée par reveal.js : sans JavaScript, rien n'est
      jamais caché.

   Le réglage système « réduire les animations » désactive tout.
   ===================================================================== */

/* 1. Entrée du hero */
@keyframes gbr-monte{
  from{opacity:0;transform:translate3d(0,16px,0)}
  to{opacity:1;transform:none}
}
.hero__in > *{animation:gbr-monte .55s cubic-bezier(.22,.61,.36,1) both}
.hero__in > *:nth-child(1){animation-delay:.02s}
.hero__in > *:nth-child(2){animation-delay:.10s}
.hero__in > *:nth-child(3){animation-delay:.18s}

/* 2. Apparition au défilement */
.gbr-anim [data-reveal]{
  opacity:0;transform:translate3d(0,22px,0);
  transition:opacity .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms),
             transform .62s cubic-bezier(.22,.61,.36,1) var(--d,0ms);
  will-change:opacity,transform;
}
.gbr-anim [data-reveal="left"]{transform:translate3d(-30px,0,0)}
.gbr-anim [data-reveal="right"]{transform:translate3d(30px,0,0)}
.gbr-anim [data-reveal].is-in{opacity:1;transform:none;will-change:auto}

/* Les bandeaux photo se posent avec un très léger recadrage */
.gbr-anim .band[data-reveal] img{transform:scale(1.06);transition:transform 1.1s cubic-bezier(.22,.61,.36,1)}
.gbr-anim .band[data-reveal].is-in img{transform:none}

@media (prefers-reduced-motion:reduce){
  .hero__in > *{animation:none}
  .gbr-anim [data-reveal],
  .gbr-anim [data-reveal].is-in{opacity:1;transform:none;transition:none}
  .gbr-anim .band[data-reveal] img{transform:none;transition:none}
}

/* =====================================================================
   DUO DE PHOTOS  (chaîne du chantier)
   ===================================================================== */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:clamp(30px,4vw,44px)}
.duo--seul{grid-template-columns:1fr}
.duo__item{margin:0;position:relative;overflow:hidden;border-radius:5px;
  border:1px solid var(--line);background:var(--asphalt)}
.duo__item img{width:100%;height:clamp(200px,23vw,290px);object-fit:cover;display:block}
.duo__item figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 18px 14px;
  background:linear-gradient(0deg,rgba(20,23,25,.86),rgba(20,23,25,0));
  color:#D5DAD2;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.11em;text-transform:uppercase}
.duo__item figcaption b{display:block;color:#fff;font-family:var(--f-display);
  font-size:19px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:2px}
@media (max-width:760px){
  .duo{grid-template-columns:1fr}
  .duo__item img{height:210px}
}

/* Le bouton « Contact » descend jusqu'au pied de page : on adoucit le saut,
   sauf si le visiteur a demandé de réduire les animations. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
.foot{scroll-margin-top:0}