/* ==========================================================
   Netsol Expansion — maquette v1 (direction « Carottages », fond papier)
   Feuille unique, sans dépendance. Mobile ≤ 640 px, tablette ≤ 1100 px.
   ========================================================== */

:root {
  /* Couleurs */
  --papier: #EEEAE3;          /* fond */
  --papier-clair: #F7F5F0;    /* encadrés */
  --papier-fonce: #E8E2D8;    /* encadrés « Chantiers en images » et maîtres d'ouvrage */
  --feuille: #FAF8F4;         /* fiches de documents */
  --encre: #2E2729;           /* texte, 12,2:1 sur le papier */
  --encre-2: #3B3436;         /* texte secondaire */
  --encre-3: #4A4245;         /* surtitres, notes : 8,1:1 */
  --dark-beige: #76664F;      /* material names around the discs: 4.6:1 */
  --framboise: #C42A4C;       /* accent : bouton principal, survols, focus (4,6:1) */
  --filet: rgba(46, 39, 41, .22);
  --filet-doux: rgba(46, 39, 41, .16);
  --placeholder: #E1D9CB;

  /* Typographie */
  --police: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;

  /* Mise en page */
  --largeur: 1440px;
  --marge: clamp(20px, 3.5vw, 48px);
  --section: clamp(64px, 7vw, 112px);
  --block-gap: 48px;          /* gap between the blocks of a section */
  --block-radius: 4px;        /* corner radius of the boxes */

  /* Ombres */
  --ombre-disque: 0 19px 31px -10px rgba(46, 39, 41, .27), 0 5px 11px -4px rgba(46, 39, 41, .15);
  --ombre-repere: 0 14px 22px -8px rgba(46, 39, 41, .34), 0 4px 8px -3px rgba(46, 39, 41, .16);
  --ombre-tirage: 0 18px 30px -14px rgba(46, 39, 41, .38), 0 2px 6px rgba(46, 39, 41, .08);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Anchor offset = compact header height minus 1px: the section top border hides under the header border */
html { scroll-behavior: smooth; scroll-padding-top: 62px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--papier);
  color: var(--encre);
  font: 400 17px/1.55 var(--police);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, table { margin: 0; }
img { max-width: 100%; }
a { color: var(--encre); }
a:hover { color: var(--framboise); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--framboise); outline-offset: 3px; border-radius: 6px; }
.sombre a:focus-visible, .sombre button:focus-visible { outline-color: var(--papier); }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: absolute; left: -9999px; top: 12px; z-index: 60;
  background: var(--encre); color: #fff; padding: 12px 18px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.evitement:focus { left: 16px; color: #fff; }

.conteneur { max-width: var(--largeur); margin: 0 auto; padding-inline: var(--marge); }

/* Libellés et éléments différents selon l'écran */
@media (min-width: 641px) { .mobile-seul { display: none !important; } }

/* ---------- Typographie ---------- */
.surtitre { font-weight: 700; font-size: 13px; line-height: 1.4; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.titre-1 { max-width: 620px; font-weight: 800; font-size: clamp(36px, 3.9vw, 58px); line-height: 1.02; letter-spacing: -.03em; text-wrap: balance; }
.titre-1 .point { color: var(--framboise); }
.titre-2 { font-weight: 800; font-size: clamp(32px, 3.3vw, 48px); line-height: 1.04; letter-spacing: -.028em; text-wrap: balance; }
.titre-3 { font-weight: 700; font-size: 22px; line-height: 1.2; letter-spacing: -.01em; }
.chapo { max-width: 500px; font-size: 18px; color: var(--encre-2); text-wrap: pretty; }
.note { font-size: 13px; line-height: 1.45; color: var(--encre-3); }

/* Information à confirmer avec le client */
.a-confirmer {
  background: var(--placeholder); border-bottom: 1.5px dashed var(--encre-3);
  padding: 1px 5px; border-radius: 3px; font-weight: 500; color: var(--encre);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.sombre .a-confirmer { background: var(--encre-3); border-bottom-color: #D9D2C6; color: #fff; }

/* ---------- Boutons ---------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 30px; border-radius: 999px;
  font: 700 16px/1.2 var(--police); text-decoration: none; text-align: center;
  transition: background-color .2s, color .2s;
}
.bouton svg { flex: none; }
.bouton--principal { background: var(--framboise); color: #fff; }
.bouton--principal:hover { background: var(--encre); color: #fff; }
.bouton--contour { padding: 0 26px; border: 1.5px solid var(--encre); color: var(--encre); background: transparent; }
.bouton--contour:hover { background: var(--encre); color: #fff; }
.bouton--clair { background: var(--papier); color: var(--encre); }
.bouton--clair:hover { background: #fff; color: var(--encre); }
.bouton--petit { min-height: 48px; padding: 0 22px; font-size: 15px; }

/* ---------- En-tête collant ---------- */
.entete { position: sticky; top: 0; z-index: 30; background: var(--papier); border-bottom: 1px solid transparent; transition: border-color .3s; }
.entete.est-compacte { border-bottom-color: var(--filet); }
.entete__barre { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; padding-block: 16px; transition: padding .3s; }
.entete.est-compacte .entete__barre { padding-block: 8px; }
.entete__logo { display: block; line-height: 0; flex: none; }
.entete__logo img { display: block; width: auto; height: 62px; transition: height .3s ease; }
.entete.est-compacte .entete__logo img { height: 46px; }
.sommaire { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; list-style: none; padding: 0; font-weight: 600; font-size: 15px; }
.sommaire a { display: inline-block; padding: 6px 0; text-decoration: none; border-bottom: 2px solid transparent; }
.sommaire a:hover { color: var(--encre); border-bottom-color: var(--encre); }
.sommaire a[aria-current="location"] { border-bottom-color: var(--framboise); }
.entete__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.entete__tel { display: inline-flex; flex-direction: column; justify-content: center; align-items: center; min-height: 44px; font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: .01em; text-decoration: none; white-space: nowrap; }
.entete__horaires { font-weight: 600; font-size: 13px; letter-spacing: 0; color: var(--encre-3); }
.entete__tel:hover .entete__horaires { color: inherit; }
.entete__appeler { display: none; }
.entete__bouton {
  display: none; align-items: center; min-height: 44px; padding: 0 18px;
  border: 1.5px solid var(--encre); border-radius: 999px; background: transparent; color: var(--encre);
  font: 700 15px/1 var(--police); cursor: pointer;
}
.panneau { padding-bottom: 20px; }
.panneau[hidden] { display: none; }
.panneau ul { list-style: none; padding: 0; border-top: 1px solid var(--filet); }
.panneau li { border-bottom: 1px solid var(--filet); }
.panneau a { display: flex; align-items: center; justify-content: space-between; min-height: 52px; font-weight: 700; font-size: 20px; text-decoration: none; }
.panneau a[aria-current="location"]::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--framboise); }
.panneau__tel { padding-top: 14px; font-weight: 800; font-size: 20px; }
.panneau__tel a { text-decoration: none; }

/* ---------- Disques de matières ---------- */
.m-hongrie { background-image: url(matieres/chene-point-de-hongrie.webp); }
.m-lino-rouge { background-image: url(matieres/linoleum-rouge.webp); }
.m-sportif { background-image: url(matieres/pvc-sportif-moutarde.webp); }
.m-lino-bleu { background-image: url(matieres/linoleum-bleu-soude.webp); }
.m-noyer { background-image: url(matieres/noyer-baton-rompu.webp); }
.m-mouchete { background-image: url(matieres/pvc-mouchete-vert.webp); }
.m-moquette { background-image: url(matieres/moquette-prune.webp); }

@keyframes flottaison { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.disque, .repere { border-radius: 50%; aspect-ratio: 1 / 1; background-position: center; animation: flottaison 7s ease-in-out infinite; }
.disque { position: absolute; background-size: 550px; box-shadow: var(--ombre-disque); }
/* Rotate cursor: says the texture turns, without promising a click like the link hand would */
.disque { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='-2 -2 28 28'><g fill='none' stroke-linecap='round' stroke-linejoin='round'><path d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8M21 3v5h-5' stroke='%23F7F5F0' stroke-width='4.5'/><path d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8M21 3v5h-5' stroke='%232E2729' stroke-width='2'/></g><circle cx='12' cy='12' r='2.2' fill='%232E2729' stroke='%23F7F5F0' stroke-width='1.5'/></svg>") 14 14, default; }
/* The disc stays put, its texture turns slowly around the center while hovered and stops where it is */
@keyframes rotation { to { rotate: 1turn; } }
.disque::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: rotation 20s linear infinite paused; }
.disque:hover::before { animation-play-state: running; }
/* Label curved along the top of a circle (material name, call to consult), drawn by main.js */
.arc-label { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0; rotate: -10deg; transition: opacity .35s ease, rotate .6s cubic-bezier(.2, .7, .2, 1); }
.arc-label text { font-family: var(--police); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; fill: var(--dark-beige); stroke: var(--papier); paint-order: stroke; stroke-linejoin: round; }
[data-arc-label]:hover .arc-label, .le-votre:focus-visible .arc-label { opacity: 1; rotate: 0deg; }
.repere { display: block; flex: none; width: 56px; background-size: 420px; box-shadow: var(--ombre-repere); }
.repere--vide { animation: none; box-shadow: none; border: 2px dashed var(--encre); }
.repere--fixe { animation: none; }
.retard-1 { animation-delay: -1.2s; } .retard-2 { animation-delay: -2.6s; } .retard-3 { animation-delay: -3.4s; }
.retard-4 { animation-delay: -4.8s; } .retard-5 { animation-delay: -5.5s; } .retard-6 { animation-delay: -6.1s; }
@media (prefers-reduced-motion: reduce) {
  .disque, .repere { animation: none; }
  .disque::before { animation: none; }
  .arc-label { rotate: none; transition: none; }
  .entete__logo img, .entete__barre { transition: none; }
}

/* ---------- Haut de page ---------- */
.hero { min-height: calc(100vh - 94px); min-height: calc(100svh - 94px); display: flex; flex-wrap: wrap; align-items: center; gap: 48px clamp(24px, 4vw, 64px); padding-block: clamp(24px, 3vw, 40px) clamp(48px, 5vw, 72px); }
.hero__texte { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 26px; }
.hero__boutons { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__visuel { flex: 1.3 1 460px; min-width: 0; position: relative; aspect-ratio: 1 / .92; }
.hero__disques { position: absolute; inset: 0; }
.le-votre {
  position: absolute; left: 61%; top: 79%; width: 16%; aspect-ratio: 1 / 1; border-radius: 50%;
  border: 2px dashed var(--encre); display: grid; place-items: center; text-align: center;
  font-weight: 800; font-size: clamp(13px, 1.2vw, 17px); line-height: 1.1; text-decoration: none; color: var(--encre);
}
/* Wider gap for the curved label, clear of the dashes */
.le-votre { --arc-gap: 8; }
.le-votre:hover { background: rgba(46, 39, 41, .06); color: var(--encre); }

/* ---------- Sections « dossier » : colonne repère + contenu ---------- */
.section { border-top: 1px solid var(--filet); padding-block: var(--section); }
.section__grille { display: grid; grid-template-columns: minmax(180px, 2fr) minmax(0, 10fr); gap: 32px 48px; }
.section__repere { position: sticky; top: 120px; align-self: start; }
.section__repere .surtitre { color: var(--framboise); }
.section__contenu { min-width: 0; display: flex; flex-direction: column; gap: var(--block-gap); }

/* L'entreprise : fiche d'identité */
.fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr)); border-top: 2px solid var(--encre); }
.fiche > div { display: flex; flex-direction: column; gap: 8px; padding: 20px 20px 22px 0; border-bottom: 1px solid rgba(46, 39, 41, .2); }
.fiche dt { font-weight: 700; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-3); }
.fiche dd { font-weight: 600; }

.maitres { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.maitre {
  display: flex; align-items: center; justify-content: center; height: 104px; padding: 14px 16px;
  border: 1.5px solid transparent; border-radius: 14px; background: var(--feuille); text-decoration: none; transition: border-color .2s;
}
.maitre:hover { border-color: var(--framboise); color: var(--encre); }
/* Même surface pour chaque logo : --h = √(6400 × hauteur / largeur), hauteur plafonnée */
.maitres { --echelle: 1; --h-max: 60px; }
.maitre img { display: block; width: auto; max-width: 100%; height: min(var(--h-max), calc(var(--h) * var(--echelle) * 1px)); object-fit: contain; mix-blend-mode: multiply; }

/* Ce que nous posons */
.metiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: var(--block-gap); }
.metier ul { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }

/* Photos de l'ancien site : présentées comme des tirages, jamais agrandies */
.tirages { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 28px 24px; align-items: end; }
.tirages--haut { align-items: start; }
.tirage { margin: 0; display: flex; flex-direction: column; gap: 10px; text-decoration: none; }
.tirage__papier { background: #fff; padding: 8px; box-shadow: var(--ombre-tirage); }
.tirage img { display: block; width: 100%; height: auto; }
.tirage figcaption { font-size: 14px; line-height: 1.4; color: var(--encre-2); }
/* Plain photos: no print frame, same crop so captions line up */
.tirages--plain .tirage { gap: 6px; }
.tirages--plain .tirage__papier { background: none; padding: 0; box-shadow: none; }
.tirages--plain img { aspect-ratio: 880 / 650; object-fit: cover; }
.tirages--plain figcaption { text-align: center; }
.groupe-photos { display: flex; flex-direction: column; gap: 16px; }

/* Références : tableau */
.tableau-defilant { overflow-x: auto; }
.references { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.references caption { caption-side: bottom; text-align: left; padding-top: 14px; }
.references th { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); text-align: left; padding: 0 16px 12px 0; border-bottom: 2px solid var(--encre); }
.references td { padding: 18px 16px 18px 0; border-bottom: 1px solid rgba(46, 39, 41, .2); vertical-align: top; font-size: 16px; line-height: 1.45; }
.references tbody tr { transition: background-color .2s; }
.references tbody tr:hover { background: #F5F2EC; }
.references tr:target, .liste-references li:target { background: #F6E3E7; }
.references__annee { font-weight: 800; font-size: 20px; }
.references__mo { font-weight: 700; }
.references .col-annee { width: 84px; }
.references .col-mo { width: 230px; }
.references .col-fiche { width: 96px; text-align: right; padding-right: 0; }
.references td:last-child { text-align: right; padding-right: 0; }
.lien-fleche { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.lien-fleche:hover { text-decoration: underline; }
.lien-fleche svg { flex: none; transition: transform .2s; }
.lien-fleche:hover svg { transform: translateX(3px); }
.liste-references { display: none; list-style: none; padding: 0; border-top: 2px solid var(--encre); }
.liste-references li { border-bottom: 1px solid rgba(46, 39, 41, .2); }
.liste-references a { display: flex; flex-direction: column; gap: 2px; padding: 14px 0; text-decoration: none; }
.liste-references .surtitre { font-size: 11px; }
.liste-references b { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.liste-references a:hover b { color: var(--framboise); }

.chantiers { display: flex; flex-direction: column; gap: 28px; padding: clamp(24px, 3vw, 44px); background: var(--papier-fonce); border-radius: var(--block-radius); }
.chantiers .tirages { padding-top: 6px; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); }

/* Moyens */
.colonnes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: var(--block-gap); }
.tirages--moyens { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); align-items: start; }

/* Qualifications et documents */
.document {
  background: var(--feuille); border-radius: var(--block-radius);
  padding: 28px 32px; display: flex; flex-direction: column; gap: 18px;
}
.document--tinted { background: var(--papier-fonce); }
.document__tete { display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: flex-start; }
.document__tete img { display: block; width: 84px; height: auto; flex: none; }
.document__tete > div { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qualifications { list-style: none; padding: 0; }
.qualifications li { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--filet-doux); font-size: 16px; line-height: 1.45; }
.qualifications li:first-child { border-top: 1px solid var(--filet-doux); }
.documents { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: var(--block-gap); }
.definitions { display: grid; grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 10px 20px; font-size: 16px; line-height: 1.45; }
.definitions dt { font-weight: 700; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--encre-3); padding-top: 3px; }
.chiffres { font-variant-numeric: tabular-nums; }

/* Recrutement : bande sombre */
.recrutement { background: var(--encre); color: #F4F1EA; padding-block: clamp(64px, 7vw, 104px); }
.recrutement .surtitre { color: #D9D2C6; }
.recrutement .titre-2 { color: #F4F1EA; max-width: 760px; }
.recrutement .section__repere { position: static; }
.recrutement__ligne { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: flex-end; justify-content: space-between; min-width: 0; }
.recrutement__ligne > div { flex: 999 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* Contact */
.contact { padding-block: var(--section); }
.contact__ligne { display: flex; flex-wrap: wrap; gap: 48px; min-width: 0; }
.contact__infos { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.contact__tel { font-weight: 800; font-size: clamp(40px, 4.6vw, 68px); line-height: 1; letter-spacing: -.03em; text-decoration: none; white-space: nowrap; }
.contact__mail { font-size: 19px; font-weight: 700; }
.contact .definitions { max-width: 640px; padding-top: 18px; border-top: 1px solid var(--filet); }
.contact p { max-width: 640px; }
.plan {
  flex: 1 1 400px; min-width: 0; min-height: 360px; border-radius: var(--block-radius);
  position: relative; isolation: isolate; overflow: hidden; line-height: 0;
}
.plan iframe { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.25); }
/* Duotone: dark tones become ink, light tones become paper */
.plan::before,
.plan::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.plan::before { z-index: 1; background: var(--encre); mix-blend-mode: lighten; }
.plan::after  { z-index: 2; background: var(--papier); mix-blend-mode: multiply; }

/* Pied de page */
.pied { border-top: 1px solid var(--filet); padding-block: 40px 48px; }
.pied .conteneur { display: flex; flex-direction: column; gap: 24px; }
.pied__disques { display: flex; gap: 10px; align-items: center; }
.pied__disques .repere { width: 26px; animation: none; background-size: 300px; }
.pied__disques .repere--vide { border-width: 1.5px; }
.pied__ligne { display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; align-items: baseline; font-size: 15px; }
.pied__liens { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.pied__liens a { display: inline-flex; min-height: 44px; align-items: center; }

/* ---------- Tablette ---------- */
@media (max-width: 1100px) {
  .entete .sommaire { display: none; }
  .entete__bouton { display: inline-flex; }
}
@media (max-width: 900px) {
  .section__grille { grid-template-columns: minmax(0, 1fr); }
  .section__repere { position: static; }
}

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  html { scroll-padding-top: 64px; }
  .desktop-seul { display: none !important; }
  .conteneur { padding-inline: 16px; }

  .entete__barre, .entete.est-compacte .entete__barre { padding-block: 10px; gap: 8px; }
  .entete__logo img, .entete.est-compacte .entete__logo img { height: 42px; }
  .entete__tel { display: none; }
  .entete__appeler { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--framboise); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; }
  .entete__appeler:hover { background: var(--encre); color: #fff; }
  .entete__bouton { padding: 0 16px; }

  .surtitre { font-size: 12px; }
  .titre-1 { font-size: 32px; line-height: 1.04; }
  .titre-2 { font-size: 27px; line-height: 1.08; letter-spacing: -.025em; }
  .titre-3 { font-size: 19px; }
  .chapo { font-size: 17px; }

  .hero { min-height: 0; padding-block: 20px 44px; gap: 28px; }
  .hero__texte { gap: 20px; }
  .hero__boutons { flex-direction: column; align-self: stretch; gap: 10px; }
  .hero__boutons .bouton { min-height: 52px; padding: 0 20px; }
  .hero__visuel { flex-basis: 100%; }
  .disque { background-size: 330px; }
  .le-votre { left: 60%; top: 76%; width: 21%; font-size: 12px; }

  .section { padding-block: 52px; }
  :root { --block-gap: 22px; }

  .fiche { grid-template-columns: minmax(0, 1fr); }
  .fiche > div { padding: 12px 0; gap: 4px; }
  .fiche dt { font-size: 11px; }
  .fiche dd { font-size: 16px; }

  .maitres { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .maitre { height: 76px; padding: 10px 12px; border-radius: 12px; }
  .maitres { --echelle: .8; --h-max: 48px; }

  .metier ul { padding-left: 18px; gap: 2px; font-size: 15px; }

  .tirages, .tirages--moyens { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .tirage__papier { padding: 6px; }
  .tirage figcaption { font-size: 13px; }

  .tableau-defilant { display: none; }
  .liste-references { display: block; }

  .chantiers { padding: 20px 18px; gap: 16px; }
  .chantiers .tirages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .chantiers p { font-size: 15px; }
  .chantiers .bouton { min-height: 48px; }

  .document { padding: 20px; gap: 14px; }
  .document__tete { align-items: center; gap: 14px; }
  .document__tete img { width: 72px; }
  .document__tete > div { flex: 1 1 180px; }
  .qualifications li { display: flex; flex-direction: column; gap: 2px; padding: 11px 0; font-size: 15px; }
  .document .bouton { width: 100%; }
  .definitions { display: flex; flex-direction: column; gap: 2px; font-size: 15px; }
  .definitions dt { font-size: 11px; padding-top: 10px; }
  .definitions dt:first-child { padding-top: 0; }

  .recrutement { padding-block: 52px; }
  .recrutement .bouton { width: 100%; }

  .contact { padding-block: 52px; }
  .contact__ligne { gap: 20px; }
  .contact__infos { gap: 18px; }
  .contact .bouton { width: 100%; }
  .contact p { font-size: 15px; }
  .plan { min-height: 280px; }

  .pied { padding-block: 32px 40px; }
  .pied__disques .repere { width: 22px; }
}
.entete.est-ouverte { border-bottom-color: var(--filet); }

/* ==========================================================
   Signature PARiSiAM (voir assets/parisiam/parisiam.md à la racine du repo)
   Volontairement hors charte du client (blanc pur, gris froid, police système) :
   on doit voir au premier coup d'œil que ce n'est pas le site officiel.
   ========================================================== */
.signature {
  box-sizing: border-box; display: flex; align-items: center; gap: 14px;
  background: #fff; color: #3a3a3a; border: 1px dashed #9a9a9a; border-radius: 14px; padding: 12px 16px;
  font: 400 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0; text-align: left;
}
.signature p { margin: 0; }
.signature a { color: #3a3a3a; text-decoration: underline; text-underline-offset: 2px; }
.signature a:hover { color: #d62020; }
.signature :focus-visible { outline: 2px solid #d62020; outline-offset: 2px; }
.signature__logo { flex: none; display: block; cursor: pointer; }
.signature__logo img { display: block; width: 120px; height: auto; }
.signature__externe { display: inline-block; width: .95em; height: .95em; margin-left: .2em; vertical-align: -.1em; }
.signature--flottante {
  position: fixed; left: 16px; bottom: 16px; z-index: 50; max-width: calc(100% - 32px); padding-right: 44px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .14); transition: opacity .25s, visibility .25s;
}
.signature--flottante.est-masquee { opacity: 0; visibility: hidden; }
.signature--flottante[hidden] { display: none; }
.signature__close {
  position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
  background: none; border: 0; border-radius: 50%; color: #6a6a6a; cursor: pointer;
}
.signature__close:hover { background: #f2f2f2; color: #d62020; }
.signature__close svg { width: 16px; height: 16px; }
.note-maquette { background: #f2f2f2; padding: 24px var(--marge); display: flex; justify-content: center; }
@media (max-width: 560px) {
  .signature { gap: 12px; font-size: 12px; }
  .signature__logo img { width: 88px; }
  .signature--flottante { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
}