/* ==========================================================================
   Giombetti — bâtiments métalliques en kit
   Feuille de style écrite pour ce site. Aucun framework, aucun CDN.
   Deux familles auto-hébergées (Archivo pour les titres, Inter pour le texte,
   SIL Open Font License) déclarées dans polices.css — le navigateur du
   visiteur ne contacte aucun serveur tiers.
   ========================================================================== */

:root{
  /* encres */
  --encre:#171a1e;
  --encre-2:#22272c;
  --graphite:#2c3238;
  --texte:#1b2025;
  --texte-doux:#5a6570;

  /* surfaces */
  --blanc:#ffffff;
  --gris:#f2f5f7;
  --gris-2:#e7ecef;
  --filet:#dde3e8;
  --filet-sombre:#3a424b;

  /* accent : l'orange du bâtiment industriel, deux variantes — une pour les
     aplats, une plus sombre pour le petit texte, lisible sur blanc */
  --accent:#e2661a;
  --accent-fonce:#c4550f;
  --accent-texte:#a94c0c;
  --accent-pale:rgba(226,102,26,.09);

  --max:1180px;
  --pad:clamp(20px,4vw,56px);
  --r:2px;

  --police-titre:'Archivo','Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --police-texte:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{
  font-family:var(--police-texte);
  font-size:16px;
  line-height:1.62;
  letter-spacing:-.003em;
  color:var(--texte);
  background:var(--blanc);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;height:auto}
a{color:inherit}
::selection{background:var(--accent);color:#fff}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

h1,h2,h3,h4{
  font-family:var(--police-titre);
  font-weight:600;
  line-height:1.1;
  letter-spacing:-.02em;
  text-wrap:balance;
}

h1{font-weight:700;font-size:clamp(2.15rem,4.7vw,3.5rem);line-height:1.02;letter-spacing:-.028em}
h2{font-size:clamp(1.5rem,2.7vw,2.15rem)}
h3{font-size:clamp(1.05rem,1.4vw,1.24rem);letter-spacing:-.014em}
h4{font-size:1rem}

p{max-width:68ch}
p+p{margin-top:1em}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}

/* ---------- bandeau de démonstration ---------- */
.bandeau-maquette{
  background:var(--encre);
  color:#98a3ad;
  border-bottom:1px solid rgba(226,102,26,.35);
  font-size:.79rem;
  line-height:1.5;
  letter-spacing:.004em;
  padding:9px var(--pad);
  text-align:center;
}
.bandeau-maquette b{color:#e8edf1;font-weight:600}
.bandeau-maquette a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.bandeau-maquette a:hover{color:#f3a06a}

/* ---------- navigation ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(23,26,30,.97);
  backdrop-filter:saturate(140%) blur(6px);
  border-bottom:1px solid #303740;
}
.nav-inner{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;
  min-height:72px;gap:24px;
}
.marque{
  color:var(--blanc);text-decoration:none;
  font-family:var(--police-titre);
  font-weight:700;letter-spacing:.01em;font-size:1.06rem;
  display:flex;flex-direction:column;line-height:1.15;
}
.marque small{
  font-family:var(--police-texte);
  font-weight:500;font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:#8d98a2;margin-top:2px;
}
.nav-liens{display:flex;gap:30px;list-style:none;align-items:center}
.nav-liens a{
  color:#c2cbd3;text-decoration:none;font-size:.89rem;font-weight:500;
  letter-spacing:.005em;padding:6px 0;border-bottom:2px solid transparent;
}
.nav-liens a:hover{color:var(--blanc);border-color:var(--accent)}
.nav-liens a[aria-current="page"]{color:var(--blanc);border-color:var(--accent)}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  padding:15px 28px;font-family:var(--police-texte);
  font-size:.91rem;font-weight:600;letter-spacing:.005em;
  border-radius:var(--r);border:1px solid transparent;
  transition:background .15s ease,color .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-fonce);box-shadow:0 8px 20px -10px rgba(196,85,15,.9)}
.btn-ghost{border-color:#4c555e;color:#e2e8ed}
.btn-ghost:hover{border-color:var(--blanc);color:#fff;background:rgba(255,255,255,.05)}
.btn-clair{background:var(--encre);color:#fff}
.btn-clair:hover{background:var(--graphite)}

/* ---------- hero ---------- */
.hero{
  background:var(--encre);color:#fff;
  padding:clamp(60px,9vw,112px) 0 clamp(48px,7vw,86px);
}
.hero h1{max-width:24ch}
.hero .chapo{
  margin-top:26px;font-size:clamp(1.02rem,1.6vw,1.2rem);
  line-height:1.6;color:#bfc9d1;max-width:58ch;
}
.hero-actions{margin-top:38px;display:flex;gap:14px;flex-wrap:wrap}
.sur-titre{
  font-size:.71rem;letter-spacing:.2em;text-transform:uppercase;
  color:#f0955a;font-weight:600;margin-bottom:22px;
}
.hero-bas{
  margin-top:58px;padding-top:28px;border-top:1px solid var(--filet-sombre);
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;
}
.hero-bas dt{
  font-size:.7rem;letter-spacing:.15em;text-transform:uppercase;
  color:#8a949e;font-weight:600;margin-bottom:7px;
}
.hero-bas dd{font-size:.94rem;line-height:1.55;color:#d8dfe5}

/* ---------- bande photographique ---------- */
.bande-photos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
  background:var(--encre);
}
.bande-photos img{
  width:100%;height:clamp(170px,25vw,330px);object-fit:cover;
  filter:saturate(.9) contrast(1.02);
}
.bande-photos-note{
  max-width:none;background:var(--gris);border-bottom:1px solid var(--filet);
  padding:11px var(--pad);font-size:.79rem;color:var(--texte-doux);
  text-align:center;
}

/* ---------- sections ---------- */
.section{padding:clamp(62px,8vw,104px) 0}
.section--gris{background:var(--gris);border-top:1px solid var(--filet);border-bottom:1px solid var(--filet)}
.section--sombre{background:var(--encre);color:#fff}
.section--sombre p{color:#bcc5cd}
.section--sombre h2{color:#fff}
.section-head{
  display:grid;grid-template-columns:78px 1fr;gap:clamp(12px,2vw,30px);
  align-items:start;margin-bottom:clamp(32px,4vw,52px);
}
.num{
  font-family:var(--police-titre);
  font-size:.74rem;font-weight:700;letter-spacing:.16em;
  color:var(--accent-texte);padding-top:13px;border-top:2px solid var(--accent);
}
.section--sombre .num{color:#f0955a}
.section-head p{margin-top:18px;color:var(--texte-doux);font-size:1.01rem}
.section--sombre .section-head p{color:#a9b4bd}

/* ---------- grilles ---------- */
.grille{display:grid;gap:clamp(20px,2.4vw,30px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* sur fond blanc : colonnes éditoriales, filet en tête */
.carte{
  border-top:2px solid var(--encre);
  padding:22px 0 0;
  background:transparent;
}
/* sur fond gris : fiches blanches */
.section--gris .carte{
  background:var(--blanc);border:1px solid var(--filet);border-top:2px solid var(--encre);
  padding:26px 24px 24px;box-shadow:0 1px 2px rgba(16,24,32,.045);
}
.section--sombre .carte{
  background:var(--encre-2);border:1px solid var(--filet-sombre);border-top:2px solid var(--accent);
  padding:26px 24px 24px;
}
.carte h3{margin-bottom:12px}
.carte p{font-size:.94rem;line-height:1.6;color:var(--texte-doux)}
.section--sombre .carte p{color:#b0bac2}
.carte .puce{
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent-texte);font-weight:600;margin-bottom:12px;
}
.section--sombre .carte .puce{color:#f0955a}

figure.media{border:1px solid var(--filet);border-radius:var(--r);overflow:hidden;background:var(--gris)}
figure.media img{width:100%;aspect-ratio:4/3;object-fit:cover;filter:saturate(.92)}
figure.media figcaption{
  padding:12px 16px;font-size:.81rem;line-height:1.5;color:var(--texte-doux);
  border-top:1px solid var(--filet);background:var(--blanc);
}

/* ---------- listes de faits ---------- */
.faits{list-style:none;display:grid;gap:13px;margin-top:8px}
.faits li{padding-left:26px;position:relative;font-size:.96rem;line-height:1.6;color:var(--texte)}
.faits li::before{content:"";position:absolute;left:0;top:.66em;width:12px;height:2px;background:var(--accent)}
.section--sombre .faits li{color:#dbe2e7}

/* ---------- étapes ---------- */
.etapes{display:grid;border-top:1px solid var(--filet)}
.etape{
  display:grid;grid-template-columns:96px 1fr;gap:clamp(14px,2vw,30px);
  padding:30px 0;border-bottom:1px solid var(--filet);align-items:start;
}
.section--gris .etape{border-color:var(--filet)}
.etape .rang{
  font-family:var(--police-titre);
  font-size:1.9rem;font-weight:700;line-height:1;letter-spacing:-.03em;
  color:var(--gris-2);
}
.section--gris .etape .rang{color:#b9c4cc}
.section--sombre .etape{border-color:var(--filet-sombre)}
.section--sombre .etape .rang{color:#3d454e}
.etape h3{margin-bottom:10px}
.etape p{font-size:.95rem;color:var(--texte-doux)}
.section--sombre .etape p{color:#b0bac2}

/* ---------- tableau ---------- */
.tableau{
  width:100%;border-collapse:collapse;font-size:.93rem;
  border:1px solid var(--filet);background:var(--blanc);
  font-variant-numeric:tabular-nums;
}
.tableau caption{text-align:left;font-size:.81rem;color:var(--texte-doux);padding-bottom:12px}
.tableau th,.tableau td{
  text-align:left;padding:15px 18px;border-bottom:1px solid var(--filet);vertical-align:top;
}
.tableau thead th{
  background:var(--encre);color:#fff;font-size:.73rem;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
}
.tableau tbody tr:last-child td{border-bottom:none}
.tableau td:first-child{font-weight:600;width:22%}
.tableau tbody tr:nth-child(even) td{background:#fafbfc}

/* ---------- schéma d'ossature (CSS pur) ---------- */
.schema{
  border:1px solid var(--filet);background-color:var(--blanc);
  background-image:
    linear-gradient(rgba(23,26,30,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,26,30,.045) 1px,transparent 1px);
  background-size:24px 24px;
  padding:clamp(22px,3vw,38px);border-radius:var(--r);
}
.schema-toit{display:grid;grid-template-columns:1fr 1fr;height:0;border-left:2px solid var(--encre)}
.schema-toit span{border-top:2px solid var(--encre);height:74px}
.schema-toit span:first-child{transform:skewY(26deg);transform-origin:bottom left}
.schema-toit span:last-child{transform:skewY(-26deg);transform-origin:bottom right}
.schema-corps{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2px;border-bottom:3px solid var(--encre);padding:0 2px;height:104px;
}
.schema-poteau{width:4px;height:100%;background:var(--encre);position:relative}
.schema-poteau::after{
  content:"";position:absolute;left:-11px;right:-11px;top:34%;height:2px;background:var(--accent);
}
.schema-legende{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:16px;margin-top:28px;font-size:.85rem;line-height:1.55;color:var(--texte-doux);
}
.schema-legende b{display:block;color:var(--texte);font-size:.9rem;margin-bottom:4px;font-weight:600}

/* ---------- bandeaux d'information ---------- */
.bandeau{
  border:1px solid var(--filet);border-left:3px solid var(--accent);
  background:var(--blanc);padding:20px 24px;border-radius:var(--r);
  font-size:.93rem;line-height:1.6;color:var(--texte-doux);
}
.bandeau strong{display:block;font-family:var(--police-titre);font-weight:600;
  color:var(--texte);margin-bottom:6px;font-size:1rem}
.bandeau--neutre{border-left-color:#98a3ad;background:var(--gris)}

/* ---------- valeurs de démonstration ---------- */
/* Une valeur d'exemple reste lisible comme du texte normal : c'est la
   pastille « exemple » qui l'identifie, pas un pavé coloré. */
.a-completer{
  border-bottom:1px dashed rgba(226,102,26,.6);
  color:inherit;font-size:inherit;font-style:normal;
}
.tag-ex{
  display:inline-block;vertical-align:.1em;
  background:var(--accent-pale);color:var(--accent-texte);
  border-radius:3px;padding:0 5px;margin-left:5px;
  font-size:.63rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  white-space:nowrap;
}
.bloc-a-completer{
  border:1px solid var(--filet);border-top:2px solid var(--accent);
  background:var(--blanc);border-radius:var(--r);
  padding:22px 24px;font-size:.88rem;line-height:1.7;color:var(--texte-doux);
}
.bloc-a-completer b{display:block;font-family:var(--police-titre);color:var(--texte);
  font-size:.95rem;font-weight:600;margin-bottom:8px}
.bloc-a-completer ul{list-style:none;display:grid;gap:8px;margin-top:12px}
.bloc-a-completer li{padding-left:18px;position:relative}
.bloc-a-completer li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:2px;background:var(--accent)}

/* ---------- galerie ---------- */
.galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.credits{font-size:.8rem;line-height:1.7;color:var(--texte-doux)}
.credits a{color:var(--texte-doux)}
.titre-credits{font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texte-doux);font-family:var(--police-texte)}

/* ---------- formulaire ---------- */
.form{display:grid;gap:20px;max-width:660px}
.champ{display:grid;gap:7px}
.champ label{font-size:.81rem;font-weight:600;letter-spacing:.02em}
.champ input,.champ textarea,.champ select{
  font-family:var(--police-texte);font-size:.95rem;line-height:1.5;padding:13px 14px;
  border:1px solid var(--filet);border-radius:var(--r);background:var(--blanc);
  color:var(--texte);width:100%;transition:border-color .15s ease,box-shadow .15s ease;
}
.champ input::placeholder,.champ textarea::placeholder{color:#98a3ad}
.champ input:focus,.champ textarea:focus,.champ select:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-pale);
}
.champ textarea{min-height:150px;resize:vertical}
.rgpd{display:flex;gap:12px;align-items:flex-start;font-size:.86rem;line-height:1.55;color:var(--texte-doux)}
.rgpd input{width:auto;margin-top:3px;accent-color:var(--accent)}

/* ---------- pied de page ---------- */
.footer{background:var(--encre);color:#a4aeb7;padding:clamp(44px,5vw,68px) 0 30px;font-size:.89rem}
.footer h4{
  color:#fff;font-family:var(--police-texte);font-size:.71rem;font-weight:600;
  letter-spacing:.17em;text-transform:uppercase;margin-bottom:16px;
}
.footer-grille{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:clamp(24px,3vw,48px);padding-bottom:34px;border-bottom:1px solid #303740;
}
.footer p{max-width:none;line-height:1.6}
.footer ul{list-style:none;display:grid;gap:9px}
.footer a{color:#c2cbd3;text-decoration:none}
.footer a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.footer .a-completer{border-bottom-color:rgba(226,102,26,.5)}
.footer-bas{
  padding-top:22px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
  font-size:.79rem;line-height:1.5;color:#78838c;
}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav-liens{gap:18px}
  .nav-liens a{font-size:.83rem}
  .section-head{grid-template-columns:1fr;gap:10px}
  .num{padding-top:0;border-top:none;display:inline-block;margin-bottom:6px}
}
@media (max-width:760px){
  .bandeau-maquette{text-align:left;font-size:.76rem}
  .nav-inner{flex-direction:column;align-items:flex-start;padding-top:14px;padding-bottom:14px;gap:10px}
  .nav-liens{flex-wrap:wrap;gap:14px}
  .bande-photos{grid-template-columns:1fr 1fr}
  .bande-photos img{height:150px}
  .bande-photos img:nth-child(3){display:none}
  .etape{grid-template-columns:1fr;gap:8px}
  .etape .rang{font-size:1.4rem}
  .hero-bas{margin-top:42px;gap:22px}
  .tableau{font-size:.86rem}
  .tableau th,.tableau td{padding:12px}
  .tableau td:first-child{width:auto}
  .bloc-a-completer{padding:20px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important}
}