@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap');

/* ==========================================================================
   PubliTech — site public
   Voir NOTES-DESIGN.md : l'alternance noir / blanc suit le rythme allumé
   et éteint de l'écran LED.
   ========================================================================== */

:root {
  --noir:         #000000;
  --encre:        #1a1a1a;
  --rouge:        #e50b14;
  --rouge-sombre: #b00810;
  --papier:       #ffffff;
  --gris-05:      #f5f5f6;
  --gris-15:      #dedee1;
  --gris-45:      #86868c;
  --gris-70:      #4c4c52;

  --pas:     8px;
  --rayon:   4px;
  --colonne: 1120px;
  --police:  'Archivo', 'Helvetica Neue', Arial, sans-serif;
}

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  font-family: var(--police);
  font-size: 16px;
  line-height: 1.6;
  color: var(--encre);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; line-height: 1.1; letter-spacing: -.03em; }
p { margin: 0 0 1em; }
a { color: inherit; }

:focus-visible { outline: 2px solid var(--rouge); outline-offset: 3px; }

img { max-width: 100%; }

/* ==========================================================================
   Entête
   ========================================================================== */

.site-entete {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 4);
  padding: calc(var(--pas) * 1.5) calc(var(--pas) * 3);
  background: var(--noir);
}

.site-entete__logo img { height: 34px; width: auto; display: block; }

.site-entete__nav {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 3);
  margin-left: auto;
  font-size: .92rem;
  font-weight: 500;
}

.site-entete__nav a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  white-space: nowrap;
}
.site-entete__nav a:hover { color: #fff; }

.site-entete__contact {
  padding: 8px 16px;
  border-radius: var(--rayon);
  background: var(--rouge);
  color: #fff !important;
  font-weight: 600;
}
.site-entete__contact:hover { background: var(--rouge-sombre); }

.site-entete__nav a[aria-current="page"] { color: #fff; }

.site-entete__nav a[aria-current="page"]:not(.site-entete__contact) {
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--rouge);
}

/* Le menu replié n'existe que sur petit écran. */
.menu { display: none; }

@media (max-width: 720px) {
  .site-entete { gap: calc(var(--pas) * 2); padding-inline: calc(var(--pas) * 2); }

  /* Les liens alignés ne tiennent plus : on passe au menu replié. Les
     masquer sans rien mettre à la place rendrait les rubriques
     inatteignables depuis un téléphone. */
  .site-entete__nav { display: none; }

  .menu { display: block; margin-left: auto; }

  .menu__bouton {
    padding: 8px 16px;
    border-radius: var(--rayon);
    background: var(--rouge);
    color: #fff;
    font-size: .88rem;
    font-weight: 600;
    list-style: none;
    cursor: pointer;
  }

  /* Safari dessine encore son triangle sans cette ligne. */
  .menu__bouton::-webkit-details-marker { display: none; }

  .menu[open] .menu__bouton { background: var(--rouge-sombre); }

  .menu__liste {
    position: absolute;
    right: calc(var(--pas) * 2);
    left: calc(var(--pas) * 2);
    display: flex;
    flex-direction: column;
    margin-top: calc(var(--pas) * 1.5);
    padding: calc(var(--pas) * 1.5);
    border-radius: var(--rayon);
    background: var(--encre);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
  }

  .menu__liste a {
    padding: calc(var(--pas) * 1.5);
    color: rgba(255, 255, 255, .8);
    font-size: .95rem;
    text-decoration: none;
    border-radius: var(--rayon);
  }

  .menu__liste a:hover { background: rgba(255, 255, 255, .08); color: #fff; }

  .menu__liste a[aria-current="page"] {
    color: #fff;
    font-weight: 600;
    background: rgba(229, 11, 20, .18);
  }
}

/* ==========================================================================
   Ouverture : l'écran allumé
   ========================================================================== */

.hero {
  position: relative;
  padding: calc(var(--pas) * 12) calc(var(--pas) * 3) calc(var(--pas) * 6);
  background: var(--noir);
  color: #fff;
  overflow: hidden;
}

.hero__matrice {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(229, 11, 20, .75) 1.4px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, .16) 1.2px, transparent 1.3px);
  background-size: 44px 44px, 11px 11px;
  background-position: 6px 6px, 0 0;
  /* Le halo concentre la lumière derrière le titre et laisse les bords
     s'éteindre, comme un écran vu de biais. */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 20%, transparent 78%);
  mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 20%, transparent 78%);
}

.hero__contenu { position: relative; max-width: var(--colonne); margin: 0 auto; }

.hero__titre {
  max-width: 14ch;
  font-size: clamp(2.6rem, 7vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -.045em;
}

.hero__texte {
  max-width: 56ch;
  margin-top: calc(var(--pas) * 3);
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  color: rgba(255, 255, 255, .72);
}

.hero__actions {
  display: flex;
  gap: var(--pas);
  flex-wrap: wrap;
  margin-top: calc(var(--pas) * 4);
}

.bouton-site {
  display: inline-flex;
  align-items: center;
  padding: 14px 26px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--rayon);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.bouton-site:hover { border-color: #fff; }

.bouton-site--principal {
  background: var(--rouge);
  border-color: var(--rouge);
}
.bouton-site--principal:hover { background: var(--rouge-sombre); border-color: var(--rouge-sombre); }

.hero__chiffres {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: calc(var(--pas) * 3);
  max-width: var(--colonne);
  margin: calc(var(--pas) * 10) auto 0;
  padding-top: calc(var(--pas) * 4);
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.hero__chiffres div { margin: 0; }
.hero__chiffres dt {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.hero__chiffres dd {
  margin: 4px 0 0;
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -.03em;
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section-site { padding: calc(var(--pas) * 10) calc(var(--pas) * 3); }

.section-site--sombre { background: var(--noir); color: #fff; }

.section-site__interieur { max-width: var(--colonne); margin: 0 auto; }
.section-site__interieur--etroit { max-width: 760px; }

.section-site__entete { margin-bottom: calc(var(--pas) * 6); }

.section-site h2 {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  font-weight: 700;
}

.section-site__chapo {
  max-width: 62ch;
  margin-top: calc(var(--pas) * 2);
  font-size: 1.05rem;
  color: var(--gris-70);
}

.section-site--sombre .section-site__chapo { color: rgba(255, 255, 255, .68); }

.section-site__note {
  max-width: 68ch;
  margin-top: calc(var(--pas) * 5);
  padding-top: calc(var(--pas) * 3);
  border-top: 1px solid var(--gris-15);
  font-size: .92rem;
  color: var(--gris-45);
}

/* ==========================================================================
   Les panneaux, dessinés à l'échelle les uns des autres
   ========================================================================== */

.panneaux {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: calc(var(--pas) * 4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.panneau { display: flex; flex-direction: column; gap: calc(var(--pas) * 2); }

/* Le cadre donne une hauteur commune : les écrans se comparent par le bas,
   comme ils se comparent dans la rue. */
.panneau__cadre {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 150px;
  padding-bottom: calc(var(--pas) * 1.5);
  border-bottom: 2px solid var(--gris-15);
}

/* La largeur et le rapport de forme de chaque écran sont écrits dans
   /panneaux.css, une par face, puisqu'ils viennent de la base. Les valeurs
   ci-dessous ne servent que si cette feuille manque à l'appel : mieux vaut
   un rectangle générique qu'un trait sans hauteur. */
.panneau__ecran {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 7 / 4;
  background: var(--noir);
  background-image: radial-gradient(circle, rgba(229, 11, 20, .5) .9px, transparent 1px);
  background-size: 7px 7px;
  border-radius: 2px;
}

.panneau__dimensions {
  font-size: .72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .9);
}

.panneau__lieu { font-size: 1.05rem; font-weight: 700; }

.panneau__detail {
  margin: 4px 0 0;
  font-size: .88rem;
  color: var(--gris-45);
}

/* --------------------------------------------------------------------------
   Les mêmes écrans, en situation.
   La première vue occupe toute la largeur ; les suivantes se rangent à
   deux ou trois de front selon la place. La grille ne présume d'aucun
   nombre : elle encaissera les trois photos qui manquent encore.
   -------------------------------------------------------------------------- */

.vues-terrain {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: calc(var(--pas) * 4);
  margin-top: calc(var(--pas) * 8);
}

.vue-terrain { margin: 0; }

.vue-terrain--large { grid-column: 1 / -1; }

.vue-terrain__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  box-shadow: 0 0 0 1px var(--gris-15);
}

.vue-terrain__legende {
  margin-top: calc(var(--pas) * 1.5);
  font-size: .88rem;
  color: var(--gris-45);
}

.vue-terrain__lieu {
  display: block;
  font-weight: 700;
  color: var(--noir);
}

/* La vue en pleine largeur mérite une légende qui ne s'étire pas sur
   onze cents pixels : on la borne à une longueur de ligne lisible. */
.vue-terrain--large .vue-terrain__legende { max-width: 60ch; }

/* ==========================================================================
   Offres
   ========================================================================== */

.offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: calc(var(--pas) * 4);
}

.offre {
  padding-top: calc(var(--pas) * 3);
  border-top: 2px solid var(--rouge);
}

.offre__nombre {
  margin: 0 0 var(--pas);
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
}

.offre h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: var(--pas); }

.offre p {
  margin: 0;
  font-size: .95rem;
  color: var(--gris-70);
}

.section-site--sombre .offre p { color: rgba(255, 255, 255, .68); }

/* ==========================================================================
   Contact
   ========================================================================== */

.contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: calc(var(--pas) * 2);
  margin-top: calc(var(--pas) * 5);
}

.contact__bloc {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: calc(var(--pas) * 3);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--rayon);
  text-decoration: none;
}

.contact__bloc:not(.contact__bloc--inerte):hover {
  border-color: var(--rouge);
  background: rgba(229, 11, 20, .08);
}

.contact__libelle {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}

.contact__valeur { font-size: 1.05rem; font-weight: 600; }

/* ==========================================================================
   Pied
   ========================================================================== */

.site-pied { background: var(--noir); color: rgba(255, 255, 255, .6); }

.site-pied__interieur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: calc(var(--pas) * 5);
  max-width: var(--colonne);
  margin: 0 auto;
  padding: calc(var(--pas) * 7) calc(var(--pas) * 3);
}

.site-pied__logo { height: 40px; width: auto; display: block; }

.site-pied__baseline {
  margin-top: calc(var(--pas) * 2);
  font-size: .85rem;
  font-variant: small-caps;
  letter-spacing: .04em;
}

.site-pied__coordonnees p { margin: 0 0 4px; font-size: .92rem; }
.site-pied__coordonnees a { text-decoration: none; }
.site-pied__coordonnees a:hover { color: #fff; }

.site-pied__bas {
  display: flex;
  justify-content: space-between;
  gap: calc(var(--pas) * 2);
  flex-wrap: wrap;
  max-width: var(--colonne);
  margin: 0 auto;
  padding: calc(var(--pas) * 2.5) calc(var(--pas) * 3);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .82rem;
}

.site-pied__bas p { margin: 0; }
.site-pied__bas a { text-decoration: none; }
.site-pied__bas a:hover { color: #fff; }

.site-pied__legal {
  display: flex;
  gap: calc(var(--pas) * 3);
  flex-wrap: wrap;
}

/* Le crédit du concepteur : présent, jamais concurrent de la marque du site. */
.site-pied__credit a {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--pas) * 1.5);
  opacity: .75;
  transition: opacity .2s;
}

.site-pied__credit a:hover { opacity: 1; }

.site-pied__credit img {
  height: 22px;
  width: auto;
  display: block;
}

/* ==========================================================================
   Mentions légales
   ========================================================================== */

.page-texte {
  max-width: 760px;
  margin: 0 auto;
  padding: calc(var(--pas) * 10) calc(var(--pas) * 3);
}

.page-texte h1 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: calc(var(--pas) * 4); }
.page-texte h2 { font-size: 1.15rem; margin: calc(var(--pas) * 5) 0 var(--pas); }
.page-texte p  { color: var(--gris-70); }

/* Quand deux faces partagent un carrefour, leurs dimensions les distinguent. */
.panneau__precision {
  display: block;
  font-size: .82rem;
  font-weight: 500;
  color: var(--gris-45);
}

/* ==========================================================================
   Photos
   ========================================================================== */

.figure { margin: 0 0 calc(var(--pas) * 6); }
.figure--large { margin: calc(var(--pas) * 6) 0 0; }

.figure__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rayon);
  /* Les photos du dépôt ont un ciel très clair : un liseré évite qu'elles
     ne se dissolvent dans la section sombre. */
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
}

.section-site:not(.section-site--sombre) .figure__image {
  box-shadow: 0 0 0 1px var(--gris-15);
}

.figure__legende {
  margin-top: calc(var(--pas) * 1.5);
  font-size: .85rem;
  color: var(--gris-45);
}

.section-site--sombre .figure__legende { color: rgba(255, 255, 255, .5); }

/* Trois vues côte à côte : ce que l'écran sait rendre. */
.galerie {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: calc(var(--pas) * 3);
  margin-top: calc(var(--pas) * 6);
}

.figure--vignette { margin: 0; }
.figure--vignette .figure__legende { font-size: .8rem; }

/* ==========================================================================
   Visionneuse
   ========================================================================== */

/* Le lien qui enveloppe chaque photo ne doit rien changer à la mise en
   page : il se comporte comme la photo qu'il contient. */
.zoom {
  display: block;
  cursor: zoom-in;
  text-decoration: none;
}

.zoom img { transition: opacity .2s; }
.zoom:hover img { opacity: .9; }

.zoom:focus-visible {
  outline: 2px solid var(--rouge);
  outline-offset: 3px;
}

/* Fond plein, et non transparent : sans lui, la légende et les flèches se
   lisaient par-dessus le texte de la page assombrie, qui reste visible
   derrière. Sur un téléphone, où la fenêtre est étroite, c'était illisible. */
.visionneuse {
  width: min(94vw, 1400px);
  max-width: none;
  max-height: 94vh;
  padding: calc(var(--pas) * 1.5);
  border: 0;
  border-radius: var(--rayon);
  background: var(--encre);
  overflow: visible;
}

.visionneuse::backdrop { background: rgba(0, 0, 0, .88); }

.visionneuse__cadre { position: relative; }

.visionneuse__image {
  display: block;
  width: 100%;
  height: auto;
  /* La photo doit tenir à l'écran en entier, barre de navigation comprise,
     sans quoi la légende passe sous le pli sur un portable couché. */
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--rayon);
  background: var(--noir);
}

.visionneuse__legende {
  margin: calc(var(--pas) * 1.5) 0 0;
  font-size: .9rem;
  color: rgba(255, 255, 255, .78);
}

.visionneuse__barre {
  display: flex;
  align-items: center;
  gap: calc(var(--pas) * 2);
  margin-top: calc(var(--pas) * 1.5);
}

.visionneuse__compteur {
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, .55);
}

.visionneuse__precedent,
.visionneuse__suivant,
.visionneuse__fermer {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  font-family: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s;
}

.visionneuse__precedent:hover,
.visionneuse__suivant:hover,
.visionneuse__fermer:hover { background: rgba(255, 255, 255, .26); }

/* Dans le coin de l'image, et non au-dessus : posé en dehors du cadre, il
   sortait de l'écran dès que la fenêtre était basse. Le fond opaque le
   garde lisible sur une photo claire comme sur un ciel de nuit. */
.visionneuse__fermer {
  position: absolute;
  top: var(--pas);
  right: var(--pas);
  background: rgba(0, 0, 0, .55);
}

.visionneuse__fermer:hover { background: rgba(0, 0, 0, .8); }

@media (max-width: 600px) {
  .visionneuse { width: 96vw; }
  .visionneuse__image { max-height: 70vh; }
}

/* Le mouvement n'apporte rien à qui le refuse. */
@media (prefers-reduced-motion: reduce) {
  .zoom img,
  .visionneuse__precedent,
  .visionneuse__suivant,
  .visionneuse__fermer { transition: none; }
}

/* ==========================================================================
   En-tête des pages de rubrique
   ========================================================================== */

/* L'accueil garde son ouverture plein écran. Les pages intérieures ont
   besoin d'autre chose : une entrée en matière courte, qui laisse la place
   au contenu plutôt que de le repousser sous le pli. */
.page-entete {
  padding: calc(var(--pas) * 10) calc(var(--pas) * 3) calc(var(--pas) * 7);
  border-bottom: 1px solid var(--gris-15);
}

.page-entete--sombre {
  background: var(--noir);
  color: #fff;
  border-bottom: 0;
}

.page-entete__interieur { max-width: var(--colonne); margin: 0 auto; }

.page-entete h1 {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.05;
}

.page-entete__chapo {
  max-width: 62ch;
  margin: calc(var(--pas) * 3) 0 0;
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--gris-70);
}

.page-entete--sombre .page-entete__chapo { color: rgba(255, 255, 255, .72); }

.page-entete__chiffres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: calc(var(--pas) * 3);
  margin: calc(var(--pas) * 6) 0 0;
  padding-top: calc(var(--pas) * 4);
  border-top: 1px solid var(--gris-15);
}

.page-entete__chiffres dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris-45);
}

.page-entete__chiffres dd {
  margin: 6px 0 0;
  font-size: 1.9rem;
  font-weight: 800;
  letter-spacing: -.03em;
}

/* ==========================================================================
   Les trois rubriques, sur l'accueil
   ========================================================================== */

.rubriques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: calc(var(--pas) * 5);
}

.rubrique { display: flex; flex-direction: column; }

/* Le visuel est décoratif : son lien est retiré de la tabulation et du
   lecteur d'écran, qui trouveront le même lien dans le titre juste après.
   Deux liens voisins vers la même page n'apportent rien à personne. */
.rubrique__visuel { display: block; overflow: hidden; border-radius: var(--rayon); }

.rubrique__image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform .3s;
}

.rubrique:hover .rubrique__image { transform: scale(1.03); }

.rubrique__titre {
  margin: calc(var(--pas) * 3) 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.rubrique__titre a { color: inherit; text-decoration: none; }
.rubrique__titre a:hover { color: var(--rouge); }

/* Toute la tuile devient cliquable, sans dupliquer le lien. */
.rubrique__titre a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.rubrique { position: relative; }

.rubrique__texte {
  margin: calc(var(--pas) * 1.5) 0 0;
  color: var(--gris-70);
  line-height: 1.65;
}

.rubrique__action {
  margin: calc(var(--pas) * 2) 0 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--rouge);
}

.section-site__actions { margin-top: calc(var(--pas) * 5); }

.contact__note {
  margin-top: calc(var(--pas) * 5);
  padding-top: calc(var(--pas) * 3);
  border-top: 1px solid var(--gris-15);
  font-size: .92rem;
  color: var(--gris-45);
}

@media (prefers-reduced-motion: reduce) {
  .rubrique__image { transition: none; }
  .rubrique:hover .rubrique__image { transform: none; }
}