/* Galerie (v1.6, 2026-10-30) : tout en Micrograph, palette Galerie, métiers en Warm Red / vert / bleu de même clarté (OKLCH 0,65).
   Chargée en dernier sur toutes les pages : elle redéfinit les jetons de profond-palette.css et profond.css, et la hiérarchie
   des titres posée dans le style intégré. Sélecteurs préfixés par html:root:not(#v) pour passer devant les règles de page.
   Gestura n'est plus utilisée ; ses fichiers restent dans fonts-systeme/. */

/* ---- Typo : Micrograph partout ---- */
html:root:not(#v) {
  --titre: 'Micrograph', 'Micrograph Repli', 'Micrograph Repli Arial', 'Helvetica Neue', Arial, sans-serif;
  --texte: 'Micrograph', 'Micrograph Repli', 'Micrograph Repli Arial', 'Helvetica Neue', Arial, sans-serif;
}

/* ---- Palette Galerie : blanc cassé froid, noir ---- */
html:root:not(#v) {
  --bg: #f3f2ef; --fg: #161616; --fg58: #5e5c58; --line: #dcdad5; --filet-encre: #a9a7a2;
  --surface: #e8e6e1; --surface-forte: #dcdad5; --surface-fort: #dcdad5; --surface-legere: #eeedea; --surface-moyenne: #e2e0db;
  --sombre: #161616; --sombre-fort: #2a2a2a; --sur-sombre: #b4b1ab;
  --accent: #161616; --accent-fort: #2a2a2a; --accent-trait: #a9a7a2; --accent-filet: #a9a7a2;
  /* Métiers : typographie en Warm Red (Pantone), identité en vert, site en bleu, même clarté ; texte à l'encre */
  --bordeaux: #f9423a; --bordeaux-fort: #ff5c51; --sur-bordeaux: #4f1a16;
  --vert: #1ea971;     --vert-fort: #32b57d;     --sur-vert: #0a3723;
  --prusse: #1096e9;   --prusse-fort: #37a3f1;   --sur-prusse: #0f304a;
  --argile: #fedbd6; --argile-fort: #fdc9c2; --sauge: #cfeddc; --sauge-fort: #b6e4ca; --ardoise: #cfe8fe; --ardoise-fort: #b7dcfd;
  /* Esquisse en Warm Red clair, suivi mensuel en gris chaud */
  --bordeaux-clair: #fedbd6; --bordeaux-clair-fort: #fdc9c2; --sur-clair: #4f1a16;
  --ocre: #dcd8d1; --ocre-fort: #d1ccc4; --sur-ocre: #4a4743;
}
html:root:not(#v) [data-teinte] { --encre-teinte: var(--fg); }
html:root:not(#v) .fondu-haut { background: linear-gradient(var(--bg) 48px, transparent); }
html:root:not(#v) .fondu-bas { background: linear-gradient(transparent, var(--bg)); }

/* ---- Hiérarchie : taille et graisse ----
   Grands titres Medium 500 (jusqu'à 104 px), titres moyens Medium, titres de carte Semibold 600, texte Regular, étiquettes Medium */
@media (min-width: 1024px) {
  html:root:not(#v) h1, html:root:not(#v) .offres-corps h2 { font-size: clamp(60px, 6.4vw, 104px); }
}
html:root:not(#v) :is(h1, .fiche-corps h2, .offres-corps h2, .offres-colonne > h3:not(.etiquette)) {
  font-weight: 500; letter-spacing: -0.035em;
}
/* (2e série, 30/10 : le H1 et le titre des offres passent à -0,025 em, plus bas) */
html:root:not(#v) :is(.fiche-corps section h3, .fiche-pied h3, .pied-titre, .etape h3, .offres-titre, .titre-section,
  .contact-accueil h3, .contact-titre, .entree-titre, .atelier-texte .atelier-titre) {
  font-weight: 500; letter-spacing: -0.025em;
}
html:root:not(#v) :is(.carte h3, .offre h3, .fiche-fleches .apercu-titre) { font-weight: 600; letter-spacing: -0.01em; }
html:root:not(#v) body { font-weight: 400; }
html:root:not(#v) .etiquette { font-weight: 500; }

/* ---- Trois niveaux d'encre, en transparence de l'encre du support : 100 / 72 / 60 %
   (70 % pour les étiquettes sur les cartes de couleur, où 60 % passait sous 4,5:1) ---- */
html:root:not(#v) {
  --encre-2: color-mix(in srgb, var(--fg) 72%, transparent);
  --encre-3: color-mix(in srgb, var(--fg) 60%, transparent);
}
html:root:not(#v) [data-teinte] {
  --encre-2: color-mix(in srgb, var(--encre-teinte) 72%, transparent);
  --encre-3: color-mix(in srgb, var(--encre-teinte) 70%, transparent);
}
html:root:not(#v) :is(.accroche, main p:not([class]), .fiche-corps p, .carte p, [data-teinte] p) { color: var(--encre-2); }
html:root:not(#v) :is(dt, .etiquette) { color: var(--encre-3); }
html:root:not(#v) dd { color: inherit; }

/* ---- Retouches du 30/10 ---- */
/* Le lien agences : noir, texte et flèche blancs au survol */
html:root:not(#v) .offres-agences a {
  transition: background-color .5s cubic-bezier(0.19, 1, 0.22, 1), color .5s cubic-bezier(0.19, 1, 0.22, 1), border-color .5s cubic-bezier(0.19, 1, 0.22, 1);
}
html:root:not(#v) .offres-agences a:is(:hover, :focus-visible, .capte) { background-color: var(--fg); border-color: var(--fg); color: var(--bg); }
html:root:not(#v) .offres-agences a:is(:hover, :focus-visible, .capte) * { color: var(--bg); }
/* Les prix des entrées (esquisse, suivi) au même gras que ceux des cartes */
html:root:not(#v) .entree .prix { font-weight: 500; color: inherit; }

/* ---- Contrastes mesurés (WCAG 2.x, 30/10) ----
   Sur le Warm Red, l'encre pleine ne donne que 4,53:1 : pas de second plan en transparence sur la carte typographie.
   Sur le bleu, 80 / 76 % ; sur le vert, 72 / 70 % suffisent. Sur l'encre (carte contact), les seconds plans partent du papier. */
html:root:not(#v) [data-teinte="typographie"] { --encre-2: var(--encre-teinte); --encre-3: var(--encre-teinte); }
html:root:not(#v) [data-teinte="site"] {
  --encre-2: color-mix(in srgb, var(--encre-teinte) 80%, transparent);
  --encre-3: color-mix(in srgb, var(--encre-teinte) 76%, transparent);
}
html:root:not(#v) .contact-carte {
  --encre-2: color-mix(in srgb, var(--bg) 78%, transparent);
  --encre-3: color-mix(in srgb, var(--bg) 70%, transparent);
}
/* Bas de fiche : la carte contact et la légende du projet suivant restent sur fond d'encre, leur texte reste au papier */
html:root:not(#v) :is(.pied-contact, .pied-suivant) {
  --encre-teinte: var(--bg);
  --encre-2: color-mix(in srgb, var(--bg) 78%, transparent);
  --encre-3: color-mix(in srgb, var(--bg) 70%, transparent);
  color: var(--bg);
}
html:root:not(#v) :is(.pied-contact, .pied-suivant) :is(.pied-titre, .insecable, .legende-suivant) { color: var(--bg); }

/* ---- Retouches du 30/10, seconde série ---- */
/* 1. Les titres au Semibold 600 ; le H1 (et le titre des offres et des agences, à sa taille) à -0,025 em */
html:root:not(#v) :is(h1, .fiche-corps h2, .offres-corps h2, .offres-colonne > h3:not(.etiquette),
  .fiche-corps section h3, .fiche-pied h3, .pied-titre, .etape h3, .offres-titre, .titre-section,
  .contact-accueil h3, .contact-titre, .entree-titre, .atelier-texte .atelier-titre) { font-weight: 600; }
html:root:not(#v) :is(h1, .offres-corps h2):not(.etiquette):not(.etiquette) { letter-spacing: -0.025em; } /* passe devant le groupe à -0,035 em */

/* 2. Les étiquettes des fiches techniques (Client, Secteur…) et des tarifs au Medium */
html:root:not(#v) :is(.fiche-infos dt, .index-projets .entree-fiche dt, .offres-sommaire .sommaire-type) { font-weight: 500; }

/* 3. Le sceau de l'accueil tient exactement entre le haut des capitales de la première ligne du titre et la ligne de base
   de la seconde. Micrograph : ascendante 0,75 em, descendante 0,25 em, capitales 0,70 em (mesurées). Hauteur du signe =
   interligne + capitales ; le signe occupe 90,9 unités sur 106,9 dans son viewBox, 8 unités de marge au-dessus.
   Le sceau prend le corps du H1 (il était à 112 px pour un titre à 104). Au téléphone, il passe au-dessus du titre. */
@media (min-width: 760px) {
  html:root:not(#v) .ouverture-sceau {
    --cap: 0.7; --asc: 0.75; --desc: 0.25;
    --largeur-sceau: calc((var(--interligne) + var(--cap)) * 105 / 90.9 * 1em);
    padding-top: 0; /* le décalage est négatif (le viewBox déborde au-dessus du signe) : une marge, pas un retrait */
    margin-top: calc(((var(--interligne) - var(--asc) - var(--desc)) / 2 + var(--asc) - var(--cap)) * 1em - var(--largeur-sceau) * 8 / 105);
  }
}
@media (min-width: 1024px) {
  html:root:not(#v) .ouverture-sceau { font-size: clamp(60px, 6.4vw, 104px); }
}

/* 4. Drapeau : pretty sur tout le texte courant qui n'a pas déjà une règle (zéro spécificité, les balance restent) */
:where(p, dd, li, figcaption) { text-wrap: pretty; }

/* 6. Les cartes qui ouvrent le formulaire : une bulle à la place de la flèche, même place, même corps, même mouvement.
   Le glyphe reste (il donne la boîte où se pose la pilule), effacé ; la bulle est un masque à la couleur du texte. */
html:root:not(#v) :is(.ouvrir-formulaire, .entree:has(.ouvrir-formulaire)) .coin-fleche { -webkit-text-fill-color: transparent; }
html:root:not(#v) :is(.ouvrir-formulaire, .entree:has(.ouvrir-formulaire)) .coin-fleche::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  width: 0.8em;
  height: 0.8em;
  translate: -50% 0;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3.5h14a2.5 2.5 0 0 1 2.5 2.5v9a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 3.8v-3.8H5A2.5 2.5 0 0 1 2.5 15V6A2.5 2.5 0 0 1 5 3.5z" fill="none" stroke="black" stroke-width="1.35" stroke-linejoin="round"/></svg>') center / contain no-repeat;
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M5 3.5h14a2.5 2.5 0 0 1 2.5 2.5v9a2.5 2.5 0 0 1-2.5 2.5H10l-4.5 3.8v-3.8H5A2.5 2.5 0 0 1 2.5 15V6A2.5 2.5 0 0 1 5 3.5z" fill="none" stroke="black" stroke-width="1.35" stroke-linejoin="round"/></svg>') center / contain no-repeat;
}

/* 8. Les offres et les agences sur la mise en page des fiches : même largeur, mêmes marges, sans surtitre ;
   le titre commence à la hauteur et au bord de celui d'une fiche */
@media (min-width: 760px) {
  /* le titre d'une fiche commence 88 px sous le haut du panneau ; celui des offres, plus grand, est remonté de la différence
     de leurs approches (0,07 em au-dessus des capitales) pour que les capitales des deux s'alignent */
  html:root:not(#v) .offres-corps {
    max-width: none;
    padding-inline: 40px;
    padding-top: calc(88px + (clamp(52px, 4.72vw, 68px) - clamp(60px, 6.4vw, 104px)) * 0.07);
  }
}
html:root:not(#v) .offres-titre-bloc > .etiquette:first-child { display: none; }
html:root:not(#v) .offres-corps h2 { margin-top: 0; }

/* 10. Les grilles à droite du titre (tarifs des offres, fiche technique des projets) : alignées en haut, le premier filet
   sur le haut des capitales du titre ; une ligne par entrée, l'étiquette dans sa colonne, un filet entre chaque */
@media (min-width: 1360px) {
  html:root:not(#v) .offres-sommaire { grid-row: 1 / span 2; align-self: start; margin-top: calc(clamp(60px, 6.4vw, 104px) * 0.07); }
}
html:root:not(#v) .fiche-titre { grid-column: 1 / 8; }
html:root:not(#v) .fiche-infos {
  grid-column: 8 / 13;
  grid-row: 1;
  display: block;
  align-self: start;
  margin-top: calc(clamp(52px, 4.72vw, 68px) * 0.07);
  padding-top: 0;
}
html:root:not(#v) .fiche-infos > div {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  column-gap: 16px;
  align-items: baseline;
  padding: 11px 0 12px;
  border-top: 1px solid var(--surface-moyenne, var(--line));
}
html:root:not(#v) .fiche-infos > div:last-child { border-bottom: 1px solid var(--surface-moyenne, var(--line)); }
html:root:not(#v) .fiche-infos dt { font-size: 12px; line-height: 20px; letter-spacing: 0.08em; }
html:root:not(#v) .fiche-infos dd { margin: 0; font-size: 15px; line-height: 1.4; }
@media (max-width: 1023px) {
  html:root:not(#v) .fiche-tete { grid-template-columns: minmax(0, 1fr); }
  html:root:not(#v) :is(.fiche-titre, .fiche-infos) { grid-column: auto; }
  html:root:not(#v) .fiche-infos { grid-row: auto; max-width: 680px; margin-top: 40px; }
}
@media (max-width: 759px) {
  html:root:not(#v) .fiche-infos { margin-top: 28px; }
  html:root:not(#v) .fiche-infos > div { grid-template-columns: 96px minmax(0, 1fr); }
}

/* 9. Les offres, un service à la fois (classe posée par le script : sans lui, tout reste à la suite). Les flèches et les
   points des fiches y reviennent ; les tarifs marquent le service affiché. */
/* La bande n'existe qu'au doigt : au pointeur fin, elle s'efface et les services restent des blocs de la page */
.services-piste { display: contents; }
@media (hover: hover) and (pointer: fine) {
  .offres-corps.un-a-un .offres-section:not(.courante) { display: none; }
  /* entrée de la page : la bande n'a pas de boîte, le service porte lui-même le fondu montée ; une fois qu'on feuillette,
     plus rien ne se rejoue (le script fait sortir et entrer de côté) */
  .surcouche.ouverte .services-piste > .offres-section { animation: apparaitre 0.9s cubic-bezier(0.19, 1, 0.22, 1) 0.16s backwards; }
  .surcouche.ouverte .un-a-un.feuillete .offres-section, .surcouche.ouverte .panneau-contenu.enchaine .services-piste > .offres-section { animation: none; }
}
/* Au doigt : les quatre services côte à côte, aimantés, 88 % de la largeur ; le suivant dépasse, voilé, et s'éclaire
   quand il devient l'affiché. La bande déborde jusqu'aux bords du panneau. */
@media not ((hover: hover) and (pointer: fine)) {
  html:root:not(#v) .services-piste {
    --marge: 16px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 104px calc(-1 * var(--marge)) 0;
    padding: 0 var(--marge);
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--marge);
    scrollbar-width: none;
    transition: height 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  }
  html:root:not(#v) .services-piste::-webkit-scrollbar { display: none; }
  html:root:not(#v) .services-piste > .offres-section {
    flex: 0 0 88%;
    min-width: 0;
    margin-top: 0;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  }
  html:root:not(#v) .services-piste > .offres-section:not(.courante) { opacity: 0.4; }
}
@media (min-width: 760px) and (not ((hover: hover) and (pointer: fine))) {
  html:root:not(#v) .services-piste { --marge: 40px; margin-top: 152px; }
}
@media (prefers-reduced-motion: reduce) {
  html:root:not(#v) :is(.services-piste, .services-piste > .offres-section) { transition: none; }
}
@media (hover: hover) and (pointer: fine) {
  html:root:not(#v) .panneau:has(> .panneau-contenu .un-a-un) .fiche-fleches { display: flex; }
}
@media not ((hover: hover) and (pointer: fine)) {
  html:root:not(#v) .panneau:has(> .panneau-contenu .un-a-un) .fiche-points { display: flex; }
}