/* ==========================================================================
   SYNDICAT LECHASSEUR.ART — feuille de style institutionnelle
   Charte : blanc / noir, accents rouge #A90000 et vert #097D00
   Typo   : machine à écrire (mono) + titres serif
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

:root {
  --noir:   #000000;
  --blanc:  #ffffff;
  --rouge:  #A90000;
  --vert:   #097D00;
  --fluo:   #B6FF00;
  --gris:   #f4f4f2;
  --gris2:  #e9e9e5;
  --trait:  #d6d6d1;
  --texte:  #111111;
  --doux:   #565656;
  --mono:   "Courier New", Courier, monospace;
  --serif:  Georgia, "Times New Roman", Times, serif;
}

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--texte);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.8;
}

img { max-width: 100%; height: auto; display: block; }
a   { color: inherit; text-decoration: none; }

/* ---------- structure ---------- */

.conteneur { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.conteneur-etroit { max-width: 820px; }

section { padding: 68px 0; border-top: 1px solid var(--trait); }
section:first-of-type { border-top: 0; }
section.gris { background: var(--gris); }

/* ---------- bandeau technique ---------- */

.bandeau {
  background: var(--noir);
  color: var(--blanc);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 0;
}
.bandeau .conteneur { display: flex; justify-content: space-between; gap: 10px 26px; flex-wrap: wrap; }
.bandeau a { opacity: .85; }
.bandeau a:hover { opacity: 1; text-decoration: underline; }

/* ---------- ébauche ---------- */

.ebauche {
  background: #fff8d6;
  border-bottom: 1px solid #e3d79a;
  color: #6b5a00;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  padding: 7px 12px;
}

/* ---------- en-tête ---------- */

.entete { border-bottom: 1px solid var(--noir); background: var(--blanc); }
.entete .conteneur { display: block; padding-top: 0; padding-bottom: 0; }
.entete .haut {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px 30px; flex-wrap: wrap; padding: 18px 0;
}
.marque { display: flex; align-items: center; gap: 16px; }
.marque img { height: 58px; width: auto; }
.marque .bloc { border-left: 1px solid var(--trait); padding-left: 16px; }
.marque .nom { font-family: var(--serif); font-size: 15px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.3; }
.marque .sous { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--doux); }

.nav {
  display: flex; gap: 8px 24px; flex-wrap: wrap;
  border-top: 1px solid var(--trait); padding: 12px 0 14px;
}
.nav a {
  font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  padding-bottom: 3px; border-bottom: 2px solid transparent; color: #222;
}
.nav a:hover { border-color: var(--noir); }
.nav a.actif { border-color: var(--rouge); color: var(--rouge); }

/* ---------- héros ---------- */

.hero { text-align: center; padding: 74px 0 66px; border-bottom: 1px solid var(--trait); }
.hero .logo { width: min(520px, 74%); margin: 0 auto 38px; }
.hero h1 {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 4vw, 40px);
  letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 8px;
}
.hero .nom-mono {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(15px, 2.6vw, 24px);
  letter-spacing: .42em; text-transform: uppercase;
  margin: 0 0 30px; padding-left: .42em;
}
.hero .objet {
  max-width: 780px; margin: 0 auto; font-size: 13.5px; line-height: 2.05;
  text-transform: uppercase; color: #333;
}
.hero .actions { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ---------- titres de section ---------- */

.surtitre {
  font-size: 10.5px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--rouge); margin: 0 0 12px;
}
h2.titre {
  font-family: var(--mono); font-weight: 700;
  font-size: clamp(17px, 2.4vw, 23px); letter-spacing: .16em;
  text-transform: uppercase; margin: 0 0 10px;
}
h3.titre-petit {
  font-family: var(--mono); font-weight: 700; font-size: 13.5px;
  letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px;
}
.chapo { font-size: 13.5px; text-transform: uppercase; color: #333; max-width: 760px; margin: 0 0 34px; }
.regle { height: 2px; background: var(--noir); width: 64px; margin: 18px 0 30px; }
.regle.fin { height: 1px; width: 100%; background: var(--trait); margin: 34px 0; }

/* ---------- texte courant ---------- */

p { margin: 0 0 16px; }
.texte { font-size: 14.5px; color: #222; max-width: 780px; }
.texte.centre { margin-left: auto; margin-right: auto; text-align: center; }
ul.liste { list-style: none; margin: 0 0 18px; padding: 0; }
ul.liste li { padding: 10px 0 10px 22px; position: relative; border-bottom: 1px solid var(--trait); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
ul.liste li::before { content: "■"; position: absolute; left: 0; top: 10px; font-size: 9px; color: var(--rouge); }
ul.liste.verte li::before { color: var(--vert); }

/* ---------- grilles ---------- */

.grille { display: grid; gap: 22px; }
.grille-2 { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); }
.grille-3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.grille-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------- cartes ---------- */

.carte {
  border: 1px solid var(--trait); background: var(--blanc);
  padding: 30px 28px; display: flex; flex-direction: column;
  transition: border-color .15s, transform .15s;
}
.carte:hover { border-color: var(--noir); }
.carte .num {
  font-family: var(--serif); font-size: 13px; letter-spacing: .2em;
  color: var(--rouge); margin-bottom: 14px;
}
.carte h3 { margin: 0 0 12px; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.carte p { font-size: 13px; color: #333; margin: 0 0 20px; }
.carte .pied { margin-top: auto; }

/* carte lien vers un site satellite : bandeau du haut + nom */
.carte-site {
  border: 1px solid var(--trait); background: var(--blanc);
  overflow: hidden; transition: border-color .15s;
}
.carte-site:hover { border-color: var(--noir); }
.carte-site .vue { display: block; }
.carte-site .vue img { width: 100%; height: auto; display: block; border-bottom: 1px solid var(--trait); }
.carte-site .nom-site {
  margin: 0; padding: 11px 12px; text-align: center;
  font-family: var(--serif); font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
}

/* ---------- boutons ---------- */

.btn {
  display: inline-block; border: 1px solid var(--noir);
  padding: 12px 22px; font-size: 11.5px; letter-spacing: .16em;
  text-transform: uppercase; transition: background .15s, color .15s, border-color .15s;
  background: transparent; cursor: pointer; font-family: var(--mono);
}
.btn:hover { background: var(--noir); color: var(--blanc); }
.btn-rouge { border-color: var(--rouge); color: var(--rouge); }
.btn-rouge:hover { background: var(--rouge); color: var(--blanc); }
.btn-vert { border-color: var(--vert); color: var(--vert); }
.btn-vert:hover { background: var(--vert); color: var(--blanc); }
.btn-plein { background: var(--noir); color: var(--blanc); }
.btn-plein:hover { background: var(--rouge); border-color: var(--rouge); }

/* ---------- encadré ---------- */

.encadre { border: 1px solid var(--noir); padding: 32px 30px; background: var(--blanc); }
.encadre.noir { background: var(--noir); color: var(--blanc); border-color: var(--noir); }
.encadre.noir .surtitre { color: var(--fluo); }
.encadre.noir p { color: #e6e6e6; }

/* ---------- fiches techniques ---------- */

table.fiche { width: 100%; border-collapse: collapse; font-size: 13px; }
table.fiche th, table.fiche td { text-align: left; padding: 12px 0; border-bottom: 1px solid var(--trait); vertical-align: top; }
table.fiche th { width: 38%; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--doux); font-size: 11.5px; }

/* ---------- produits dérivés ---------- */

.produit { border: 1px solid var(--trait); display: flex; flex-direction: column; transition: border-color .15s; }
.produit:hover { border-color: var(--noir); }
.vignette {
  background: var(--gris); height: 240px; position: relative;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--trait); overflow: hidden;
}
.produit .corps { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.produit .ref { font-size: 10px; letter-spacing: .2em; color: var(--doux); text-transform: uppercase; margin-bottom: 8px; }
.produit h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; }
.produit .desc { font-size: 12.5px; color: #444; margin: 0 0 16px; }
.produit .tarif { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--trait); display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.produit .prix { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--doux); }
.produit .prix b { display: block; font-size: 15px; color: var(--texte); letter-spacing: .04em; }
.produit .prix.attente b { font-size: 12px; color: var(--rouge); letter-spacing: .1em; }

/* ---------- cartes des sites (bande sous le menu) ---------- */

.section-visuels { padding-top: 44px; }

/* ---------- bloc free chat ---------- */

.bloc-chat { display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 820px) { .bloc-chat { grid-template-columns: 330px 1fr; } }
.bloc-chat .capture { border: 1px solid var(--trait); background: var(--gris); padding: 10px; }
.bloc-chat .capture img { width: 100%; height: auto; border: 1px solid var(--trait); }

/* ---------- schéma du réseau ---------- */

.diagramme { border: 1px solid var(--trait); background: var(--blanc); padding: 18px; }
.diagramme svg { width: 100%; height: auto; display: block; }

.logo-raus-section { width: 100%; max-width: 220px; margin: 0 auto 20px; }

/* ---------- maquettes d'articles (formes CSS, aucun visuel trompeur) ---------- */
.mock { position: relative; display: flex; align-items: center; justify-content: center; }
.mock .marquage { width: 74%; }
.mock.tshirt {
  width: 138px; height: 158px;
  clip-path: polygon(31% 0%, 44% 7%, 56% 7%, 69% 0%, 100% 15%, 87% 36%, 78% 30%, 78% 100%, 22% 100%, 22% 30%, 13% 36%, 0% 15%);
}
.mock.tshirt .marquage { width: 62%; margin-top: -6px; }
.mock.tote {
  width: 120px; height: 132px; border-radius: 0 0 3px 3px;
}
.mock.tote::before, .mock.tote::after {
  content: ""; position: absolute; top: -26px; width: 34px; height: 34px;
  border: 4px solid; border-radius: 50% 50% 0 0; border-bottom: 0;
}
.mock.tote::before { left: 16px; }
.mock.tote::after  { right: 16px; }
.mock.tote .marquage { width: 66%; margin-top: 8px; }
.mock.casquette { width: 150px; height: 96px; border-radius: 78px 78px 6px 6px; }
.mock.casquette .marquage { width: 62%; margin-top: -12px; }
.mock.affiche { width: 118px; height: 158px; border: 8px solid var(--blanc); box-shadow: 0 0 0 1px var(--trait); align-items: center; }
.mock.affiche .marquage { width: 84%; }
.mock.mug { width: 104px; height: 118px; border-radius: 4px 14px 14px 4px; }
.mock.mug::after { content: ""; position: absolute; right: -30px; top: 24px; width: 32px; height: 54px; border: 7px solid; border-left: 0; border-radius: 0 30px 30px 0; }
.mock.mug .marquage { width: 74%; }
.mock.stickers { width: 150px; height: 130px; display: block; }
.mock.patch { width: 126px; height: 126px; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .18); }
.mock.patch::after {
  content: ""; position: absolute; inset: 7px; border: 1px dashed rgba(0, 0, 0, .3);
  border-radius: 7px;
}
.mock.patch.sombre::after { border-color: rgba(255, 255, 255, .5); }
.mock.patch .marquage { width: 68%; }
.mock.stickers span {
  position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 3px; padding: 8px 10px;
}
.mock.stickers span:nth-child(1) { width: 96px; height: 56px; left: 2px; top: 8px; transform: rotate(-7deg); }
.mock.stickers span:nth-child(2) { width: 84px; height: 48px; right: 0; top: 46px; transform: rotate(6deg); }
.mock.stickers span:nth-child(3) { width: 74px; height: 42px; left: 22px; bottom: 0; transform: rotate(-3deg); }
.mock.stickers img { width: 100%; }

/* couleurs d'articles */
.art-noir   { background: #141414; }
.art-blanc  { background: #ffffff; box-shadow: inset 0 0 0 2px #bdbdb7; }
.art-ecru   { background: #ded4c2; }
.art-jaune  { background: #f2c200; }
.art-rouge  { background: var(--rouge); }
.art-vert   { background: var(--vert); }
.art-fluo   { background: var(--fluo); }
.art-sauge  { background: #9caf88; }
.art-marine { background: #1f2d4d; }
.art-violet { background: #a855f7; }
.art-rose   { background: #ff2d95; }
.bord-noir::before, .bord-noir::after { border-color: #141414; }
.bord-blanc::before, .bord-blanc::after { border-color: #ffffff; }

/* ---------- bandeau visuel ---------- */

.visuel-large { border: 1px solid var(--trait); }
.visuel-large img { width: 100%; }
.legende { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--doux); margin-top: 10px; }

/* ---------- formulaires ---------- */

.form { display: grid; gap: 18px; }
.form .ligne-2 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.champ { display: flex; flex-direction: column; gap: 7px; }
.champ label { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--doux); }
.champ input, .champ select, .champ textarea {
  font-family: var(--mono); font-size: 14px; color: var(--texte);
  background: var(--blanc); border: 1px solid var(--trait);
  padding: 11px 13px; border-radius: 0; outline: none;
}
.champ input:focus, .champ select:focus, .champ textarea:focus { border-color: var(--noir); }
.champ textarea { min-height: 130px; resize: vertical; }
.note { font-size: 11.5px; color: var(--doux); letter-spacing: .04em; }
.msg-ok { border-left: 3px solid var(--vert); background: var(--gris); padding: 14px 16px; font-size: 12.5px; display: none; }
.msg-ok.visible { display: block; }

/* ---------- pied de page ---------- */

.pied { background: var(--noir); color: var(--blanc); padding: 56px 0 34px; margin-top: 0; }
.pied .barre { height: 2px; background: var(--blanc); width: 100%; margin-bottom: 30px; }
.pied .coordonnees { text-align: center; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; line-height: 2.1; }
.pied .coordonnees a:hover { text-decoration: underline; }
.pied .liens {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 24px;
  margin: 32px 0 26px; padding-top: 26px; border-top: 1px solid #333;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
}
.pied .liens a { opacity: .8; }
.pied .liens a:hover { opacity: 1; text-decoration: underline; }
.pied .bas { text-align: center; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #8d8d8d; }

/* ---------- divers ---------- */

.deux-colonnes { display: grid; gap: 44px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .deux-colonnes { grid-template-columns: 1.15fr .85fr; align-items: start; } }

.sommaire { border: 1px solid var(--trait); padding: 26px 24px; background: var(--gris); }
.sommaire h3 { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; margin: 0 0 16px; color: var(--doux); }
.sommaire ul { list-style: none; margin: 0; padding: 0; font-size: 12.5px; text-transform: uppercase; letter-spacing: .06em; }
.sommaire li { padding: 9px 0; border-bottom: 1px solid var(--gris2); }
.sommaire li:last-child { border-bottom: 0; }
.sommaire a:hover { color: var(--rouge); }

.centre { text-align: center; }
.mt-30 { margin-top: 30px; }
.mb-0  { margin-bottom: 0; }

/* ---------- adaptation ---------- */

@media (max-width: 760px) {
  body { font-size: 14.5px; }
  .conteneur { padding: 0 20px; }
  section { padding: 52px 0; }
  .hero { padding: 52px 0 46px; }
  .entete .haut { padding: 14px 0; }
  .marque img { height: 46px; }
  .marque .bloc { padding-left: 12px; }
  .marque .nom { font-size: 12.5px; }
  .nav { gap: 6px 16px; }
  .nav a { font-size: 11px; }
  .bandeau .conteneur { justify-content: center; text-align: center; }
}