/* ==========================================================================
   Clémence Rénovation
   Parti pris : papier teinté, encre bleu nuit, filets fins, angles francs.
   La photo et la typographie portent la page — pas de cartes ni d'ombres.
   ========================================================================== */

:root {
  --ink:        #0B2A57;
  --ink-mid:    #20406F;
  --ink-soft:   #4E6389;
  --blue:       #013B8F;
  --blue-deep:  #012A66;
  --apricot:    #FDCB82;
  --paper:      #F5F1E9;
  --paper-lift: #FBF9F4;
  --white:      #FFFFFF;
  --rule:       #DCD5C7;
  --rule-soft:  #E8E2D6;
  --rule-dark:  rgba(255, 255, 255, .18);

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --gutter:  clamp(1.25rem, 5vw, 3rem);
  --section: clamp(3.25rem, 6vw, 5.5rem);
  --maxw:    1220px;
  --measure: 62ch;
}

/* --- socle -------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  font-synthesis-weight: none;
}

img, picture, svg, figure { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

a { color: inherit; }

::selection { background: var(--apricot); color: var(--ink); }

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

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--ink);
  color: var(--white);
  font-weight: 600;
  text-decoration: none;
  transition: top .18s ease;
}
.skip:focus { top: .75rem; }

/* --- pièces communes ---------------------------------------------------- */

/* Repère de section : « 02 — Prestations », posé sur un filet. */
.repere {
  display: flex;
  align-items: baseline;
  gap: .85rem;
  margin: 0 0 clamp(1.75rem, 4vw, 3rem);
  padding-top: 1rem;
  border-top: 1px solid var(--rule);
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.repere b {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
}
.sombre .repere {
  border-top-color: var(--rule-dark);
  color: rgba(255, 255, 255, .58);
}
.sombre .repere b { color: var(--apricot); }

/* Lora est un peu plus large que Fraunces : plusieurs titres se terminaient
   par un mot seul sur sa ligne. « balance » repartit les lignes d'un titre a
   longueur egale, « pretty » se contente d'empecher l'orphelin dans un
   paragraphe. Les navigateurs qui ne connaissent pas ces valeurs les ignorent,
   et le texte revient au decoupage d'aujourd'hui. */
h1, h2, h3,
.titre-section,
.presentation__accroche,
.chantier__titre {
  text-wrap: balance;
}

.heros__lead,
.chapeau,
.question__reponse p,
.chantier__desc {
  text-wrap: pretty;
}

.titre-section {
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  max-width: 20ch;
}

.chapeau {
  margin-top: 1.25rem;
  max-width: var(--measure);
  font-size: 1.125rem;
  color: var(--ink-mid);
}

.titre-page {
  max-width: 16ch;
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.06;
  color: var(--white);
}

.sous-titre { font-size: 1.05rem; }

/* Lien texte souligné : remplace les boutons « fantômes ». */
.lien {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: .35em;
  text-decoration-thickness: 1px;
  transition: color .15s ease, text-decoration-color .15s ease;
}
.lien svg { width: 1em; height: 1em; transition: transform .2s ease; }
.lien:hover { color: var(--ink); }
.lien:hover svg { transform: translateX(3px); }
/* Un lien sur fond sombre. `--blue` (#013B8F) sur `--ink` (#0B2A57), c'est un
   contraste de 1,4 pour 1 : illisible. Le bandeau de titre des pages
   interieures est aussi sombre que `.sombre`, il suit donc la meme regle —
   le lien « Aller directement a tous les chantiers » y disparaissait. */
.sombre .lien,
.tete .lien { color: var(--apricot); }
.sombre .lien:hover,
.tete .lien:hover { color: var(--white); }

/* Bouton plein, angles francs. */
.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.6rem;
  border: 1.5px solid var(--ink);
  border-radius: 2px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}
.bouton svg { width: 1.1em; height: 1.1em; flex: none; }
.bouton:hover { background: var(--blue); border-color: var(--blue); }

.bouton--clair {
  background: var(--apricot);
  border-color: var(--apricot);
  color: var(--ink);
}
.bouton--clair:hover { background: var(--white); border-color: var(--white); }

/* Le secondaire du bandeau. Deux boutons pleins cote a cote sur une photo se
   disputeraient l'oeil ; le contour donne l'ordre — appeler d'abord, ecrire si
   l'on prefere ecrire. */
.bouton--contour {
  background: transparent;
  border-color: rgba(255, 255, 255, .6);
  color: var(--white);
}
.bouton--contour:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

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

.entete {
  position: sticky;
  top: 0;
  z-index: 60;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}

.entete__inner {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  min-height: 104px;
}

.marque { margin-right: auto; line-height: 0; }
.marque img { height: 80px; width: auto; }

/* Retour : la fleche existante, retournee. Le bouton parle a l'historique du
   navigateur ; s'il n'y en a pas (arrivee directe sur une page interieure), il
   renvoie a l'accueil plutot que de ne rien faire. */
.retour {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .45rem .8rem .45rem .6rem;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  color: var(--ink);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 999px;
  cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.retour:hover { background: var(--paper-lift); border-color: var(--ink-soft); }
.retour svg { width: 18px; height: 18px; transform: scaleX(-1); }
@media (max-width: 620px) { .retour span { display: none; } }

.menu { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }
.menu a {
  position: relative;
  padding: .35rem 0;
  font-size: .95rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink);
}
.menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1.5px;
  background: var(--blue);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.menu a:hover::after { transform: scaleX(1); }
.menu a[aria-current="page"] { color: var(--blue); }
.menu a[aria-current="page"]::after { transform: scaleX(1); background: var(--apricot); }

.tel-entete {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .6rem 1.15rem;
  background: var(--ink);
  color: var(--white);
  border-radius: 2px;
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .16s ease;
}
.tel-entete:hover { background: var(--blue); }
.tel-entete svg { width: 17px; height: 17px; flex: none; }

.hamburger {
  display: none;
  width: 42px; height: 42px;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 2px;
  color: var(--ink);
  cursor: pointer;
}
.hamburger svg { width: 20px; height: 20px; }
.hamburger .ico-fermer,
.hamburger[aria-expanded="true"] .ico-ouvrir { display: none; }
.hamburger[aria-expanded="true"] .ico-fermer { display: block; }

@media (max-width: 880px) {
  .menu {
    display: none;
    position: absolute;
    inset: 100% 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 var(--gutter) 1rem;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .menu[data-ouvert="true"] { display: flex; }
  .menu a {
    padding: .95rem 0;
    border-bottom: 1px solid var(--rule-soft);
    font-size: 1.05rem;
  }
  .menu a::after { display: none; }
  .hamburger { display: inline-flex; }
  .tel-entete { padding: .6rem .85rem; }
  .tel-entete span { display: none; }
}

/* --- héros de l'accueil ------------------------------------------------- */

.heros {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(86vh, 780px);
  padding-block: clamp(3rem, 9vw, 6rem);
  background: var(--ink);
  overflow: hidden;
}
.heros picture { position: absolute; inset: 0; }
.heros picture img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 68%;
}
.heros::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(9, 16, 28, .92) 0%, rgba(9, 16, 28, .72) 38%, rgba(9, 16, 28, .18) 72%, rgba(9, 16, 28, .28) 100%);
}
.heros .wrap { position: relative; z-index: 1; }

.heros__dateline {
  margin-bottom: 1.5rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--apricot);
}

.heros h1 {
  max-width: 17ch;
  font-weight: 400;
  font-size: clamp(2.5rem, 6.4vw, 4.9rem);
  line-height: 1.03;
  letter-spacing: -.025em;
  color: var(--white);
}

.heros__lead {
  margin-top: 1.75rem;
  max-width: 46ch;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  color: rgba(255, 255, 255, .84);
}

.heros__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2rem;
  margin-top: 2.5rem;
}
.heros__actions .lien { color: var(--white); }
.heros__actions .lien:hover { color: var(--apricot); }

.heros__credit {
  position: absolute;
  right: var(--gutter);
  bottom: 1.5rem;
  z-index: 1;
  max-width: 18rem;
  font-size: .78rem;
  line-height: 1.5;
  text-align: right;
  color: rgba(255, 255, 255, .55);
}
/* En dessous, la légende viendrait chevaucher le chapeau du héros. */
@media (max-width: 1080px) { .heros__credit { display: none; } }

/* --- bandeau de tête des pages intérieures ------------------------------ */

.tete {
  padding-block: clamp(3rem, 8vw, 5.5rem) clamp(2.5rem, 6vw, 4rem);
  background: var(--ink);
  color: var(--white);
}
.tete h1 {
  max-width: 22ch;
  font-weight: 400;
  font-size: clamp(2.1rem, 5vw, 3.6rem);
  line-height: 1.06;
  color: var(--white);
}
.tete p {
  margin-top: 1.5rem;
  max-width: var(--measure);
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .78);
}

.fil {
  margin-bottom: 1.75rem;
  font-size: .78rem;
  color: rgba(255, 255, 255, .55);
}
.fil ol { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.fil li::after { content: "›"; margin-left: .5rem; color: rgba(255, 255, 255, .35); }
.fil li:last-child::after { content: none; }
.fil a { color: rgba(255, 255, 255, .75); text-decoration: none; }
.fil a:hover { color: var(--white); text-decoration: underline; }

/* --- présentation ------------------------------------------------------- */

.presentation { padding-block: var(--section); }

.presentation__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(2.5rem, 6vw, 5rem);
  align-items: start;
}

/* L'accroche est le titre de la section : grande, mais sans crier. */
.presentation__accroche {
  font-weight: 400;
  font-size: clamp(1.3rem, 2.3vw, 1.8rem);
  line-height: 1.45;
  letter-spacing: -.01em;
  max-width: 28ch;
}
.presentation__texte p { margin-top: 1.15rem; color: var(--ink-mid); }

.signature {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
  font-size: .9rem;
  color: var(--ink-soft);
}
.signature b { display: block; font-size: 1.05rem; font-weight: 600; color: var(--ink); }

.portrait figcaption {
  margin-top: .75rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

@media (max-width: 820px) {
  .presentation__grille { grid-template-columns: 1fr; }
  .portrait { max-width: 340px; }
}

/* --- liste des prestations ---------------------------------------------- */

.prestations { padding-block: var(--section); background: var(--paper-lift); }

.liste-prestations {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 0 clamp(2rem, 5vw, 4.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}
.liste-prestations li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 .5rem;
  padding: 1.15rem 0;
  border-bottom: 1px solid var(--rule);
}
.liste-prestations .num {
  font-size: .78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  padding-top: .3rem;
}
.liste-prestations h3 {
  font-size: 1.15rem;
  letter-spacing: -.01em;
}
.liste-prestations p {
  grid-column: 2;
  margin-top: .25rem;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--ink-soft);
}

.appoint {
  margin-top: 2.5rem;
  padding: 1.5rem 1.75rem;
  background: var(--apricot);
  color: var(--ink);
}
/* L'intitule est une ligne a lui seul. En inline, il se collait au texte qui
   suit — « Et aussi, selon vos besoins Montage de meubles » — deux majuscules
   separees par une simple espace.
   La regle precedente visait `.appoint p`, alors que le balisage porte un
   `<span>` : elle n'a donc jamais rien style, et c'est pourquoi rien ne les
   separait. Un <p> ne peut de toute facon pas etre imbrique dans un <p>. */
.appoint b {
  display: block;
  margin-bottom: .45rem;
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 600;
}
.appoint span { font-size: .98rem; }

.suite { margin-top: 2.5rem; }
.suite--large { margin-top: clamp(2.5rem, 5vw, 4rem); }

/* --- sélection de chantiers (accueil) ----------------------------------- */

.selection { padding-block: var(--section); }

/* Cette section montrait quatre photos dans une grille 2x2. Elle montre
   desormais les cinq visites filmees, dans la meme piste que la page
   Realisations : un chantier s'y voit en entier plutot qu'en un instant, et le
   meme composant sert aux deux pages. Ses regles sont plus bas, avec le reste
   des visites — il n'y a plus rien de propre a l'accueil ici.

   Les quatre photos n'ont pas disparu du site : toutes etaient deja reprises
   dans la galerie de Realisations, ou elles restent. */

/* --- galerie des chantiers ---------------------------------------------- */

/* --- Entree par theme (Realisations) ------------------------------------
   Propose par les clients qui ont relu le site : « une photo par theme qui
   tienne tout l'ecran, avec un lien vers plus de photos ». Ils se perdaient
   dans une galerie de vingt-et-un chantiers dont rien n'annonce le contenu.

   Deux ecarts assumes par rapport a leur description. Le panneau tient
   l'ecran en hauteur, mais la photo n'occupe que la moitie de la largeur :
   trois des six sont en portrait — « bois » et « exterieur » n'ont aucune
   photo paysage qui ne soit pas un montage avant/apres — et un cadrage plein
   ecran leur couperait les deux tiers. Le texte tient l'autre moitie, parce
   qu'une photo seule ne dit pas de quel theme elle est : c'est exactement ce
   que les clients reprochaient a la galerie. */

.theme {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  min-height: 100svh;
}
/* Le cote de la photo alterne : six panneaux batis pareil donnent
   l'impression de ne pas avancer en defilant. */
.theme:nth-child(even) .theme__image { order: 2; }

/* La photo est sortie du flux, sinon c'est elle qui dicte la hauteur du
   panneau : `height: 100 %` ne resout pas contre un parent en hauteur auto,
   l'image reprenait donc son rapport naturel et les trois panneaux en
   portrait depassaient l'ecran de 43 px pendant que les autres s'y tenaient.
   En absolu, la hauteur vient du panneau et le recadrage a lieu. */
.theme__image { position: relative; overflow: hidden; background: var(--rule-soft); }
.theme__image picture { position: absolute; inset: 0; display: block; }
.theme__image img { display: block; width: 100%; height: 100%; object-fit: cover; }

.theme__texte {
  display: grid;
  align-content: center;
  padding: clamp(1.75rem, 5vw, 4.5rem);
  background: var(--paper-lift);
}
.theme__texte p {
  margin-top: 1rem;
  max-width: 42ch;
  line-height: 1.7;
  color: var(--ink-soft);
}
.theme__texte .suite { margin-top: 1.75rem; }

@media (max-width: 899px) {
  /* Empile, photo en haut. Deux colonnes sur un telephone donneraient une
     photo large comme un pouce a cote d'un paragraphe illisible. */
  .theme {
    grid-template-columns: 1fr;
    grid-template-rows: 50vh auto;
    grid-template-rows: 50svh auto;
  }
  .theme:nth-child(even) .theme__image { order: 0; }
}

/* --- Visites filmees ---------------------------------------------------
   Une piste horizontale plutot qu'une grille : cinq elements, de formats
   differents (une paysage, quatre portrait), qui ne composeraient pas une
   grille propre. Le defilement lateral assume qu'il y en a peu et les garde
   au-dessus de la ligne de flottaison.

   Volontairement hors de la galerie filtree : ces visites ne sont pas des
   chantiers termines — l'une montre un plafond attaque par l'humidite — et
   elles n'ont pas de tag sur lequel filtrer. */
.visites { padding-block: clamp(2.5rem, 5vw, 4rem) 0; }

.visites__piste {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  /* La piste deborde la gouttiere pour que la derniere carte affleure le bord,
     ce qui montre qu'il y a quelque chose a faire defiler. */
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  padding-bottom: .75rem;
}
/* Un degrade au bord annonce qu'il reste des cartes a droite. Sans lui, sur un
   grand ecran ou les cinq ne tiennent pas, rien ne dit qu'il y a une suite. */
.visites { position: relative; }
.visites__piste { position: relative; }
.visites__piste::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: .75rem;
  width: 3rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s ease;
  background: linear-gradient(to right, transparent, var(--paper));
}
.visites__piste.reste-a-droite::after { opacity: 1; }

.visites__piste ul {
  display: flex;
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.visites__piste li { flex: 0 0 auto; scroll-snap-align: start; }

.visite {
  position: relative;
  display: block;
  width: clamp(190px, 42vw, 260px);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  border-radius: 4px;
  background: var(--rule-soft);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .16s ease, transform .16s ease;
}
.visite:hover, .visite:focus-visible { border-color: var(--ink); transform: translateY(-2px); }

.visite img {
  display: block;
  width: 100%;
  /* Cadrage commun : les cinq n'ont pas le meme rapport, et une piste dont les
     cartes n'ont pas la meme hauteur se lit mal. */
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.visite__lire {
  position: absolute;
  top: calc(50% - 1.9rem);
  left: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  color: var(--white);
}
.visite__lire svg { width: 1.4rem; height: 1.4rem; margin-left: .12rem; }

.visite__duree {
  position: absolute;
  top: .5rem;
  right: .5rem;
  padding: .2rem .45rem;
  font-size: .7rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  background: color-mix(in srgb, var(--ink) 82%, transparent);
  border-radius: 999px;
}

.visite__titre {
  display: block;
  padding: .7rem .8rem .85rem;
  font-size: .92rem;
  line-height: 1.4;
  background: var(--paper-lift);
}

/* Sur l'accueil, cette piste remplace quatre photos qui occupaient chacune une
   demi-largeur. A la taille qu'elle a sur Realisations — ou elle complete une
   galerie de vingt chantiers — elle passait pour une note en bas de section,
   alors que c'est ici la seule preuve de travail que la page montre. Des
   cartes plus larges, sans rien changer d'autre : la cinquieme depasse
   toujours du cadre, donc l'invitation a faire defiler tient encore. */
.visites__piste--accueil .visite { width: clamp(230px, 62vw, 330px); }

/* La video reprend la place de l'image dans la visionneuse existante : meme
   fond, memes fleches, meme fermeture au clavier. */
.visionneuse video {
  max-width: 100%;
  max-height: min(78vh, calc(100svh - 12rem));
  background: #000;
}

.galerie-page { padding-block: clamp(3rem, 7vw, 5rem) var(--section); }

/* Le fragment vise le haut de la section, qui passerait sinon sous l'en-tete
   collante. */
#galerie { scroll-margin-top: 120px; }

/* --- la barre de filtres -------------------------------------------------
   Plusieurs filtres a la fois, plus un seul. « Peinture » et « Sols » coches
   ensemble montrent les chantiers de l'un OU de l'autre : le ET donnerait
   presque toujours zero resultat sur vingt-et-un chantiers, et ce n'est pas ce
   qu'on attend d'une barre de categories.

   « Tout » n'est pas un filtre de plus, c'est la remise a zero : il s'allume
   de lui-meme des qu'aucun autre n'est actif.

   Collante a partir de 900 px : la galerie descend maintenant sur une seule
   colonne, donc elle est longue, et un filtre qu'il faut remonter chercher
   n'est pas utilise. Sur telephone la barre tient sur trois lignes et
   mangerait l'ecran — elle y reste dans le flux. */
.tri {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* 1.4rem en vertical, pas .5 : les zones cliquables agrandies plus bas
     debordent de 10 px de chaque cote, soit 20 px entre deux rangees. A .9rem
     (14,4 px) elles se chevauchaient de 6 px, et dans cette bande un doigt
     touchait le filtre de la rangee voisine. */
  gap: 1.4rem 1.25rem;
  margin-bottom: clamp(2rem, 5vw, 3rem);
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 900px) {
  .tri {
    position: sticky;
    top: 104px;               /* la hauteur de l'en-tete collante */
    z-index: 20;
    padding-top: 1.25rem;
    /* Opaque, sinon les photos defilent au travers. */
    background: var(--paper);
  }
}
.tri__label {
  margin-right: .5rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
/* Rien dans une barre de boutons ne dit qu'ils se cumulent : la plupart des
   barres de filtres n'acceptent qu'un choix. Une ligne le dit. */
.tri__aide {
  font-size: .78rem;
  color: var(--ink-soft);
}
/* Poussee a droite seulement quand la barre est large : sur telephone elle
   tombe sur une ligne a elle, et collee au bord droit elle se lisait comme une
   legende sans rapport plutot que comme le mode d'emploi des boutons. */
@media (min-width: 900px) { .tri__aide { margin-left: auto; } }
.tri button {
  position: relative;
  padding: 0 0 .2rem;
  background: none;
  border: 0;
  border-bottom: 1.5px solid transparent;
  font-family: var(--sans);
  font-size: .95rem;
  font-weight: 500;
  color: var(--ink-mid);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
/* La zone cliquable deborde le texte sans rien deplacer. Ces boutons ne font
   que 23 px de haut — la hauteur de leur texte — ce qui est petit a viser au
   pouce, et c'est la commande principale de la page. Un padding aurait
   decolle le trait de soulignement du mot. */
.tri button::after {
  content: "";
  position: absolute;
  inset: -10px -8px;
}
.tri button:hover { color: var(--ink); border-bottom-color: var(--rule); }

.tri button[aria-pressed="true"] {
  color: var(--blue);
  font-weight: 600;
  border-bottom-color: var(--apricot);
}

/* --- la galerie : un chantier par ligne ----------------------------------
   C'etait une mosaique en trois colonnes (`columns: 3 320px`). Les chantiers y
   coulaient colonne par colonne, aucune hauteur de photo n'avait de raison de
   s'aligner sur sa voisine, et l'ensemble se lisait comme un tas — alors que
   tout le reste du site descend en bandes pleine largeur.

   La galerie descend maintenant elle aussi : un chantier par ligne, ses photos
   a gauche, son texte a droite. Les photos ne changent pas de cote d'une ligne
   a l'autre — les panneaux `.theme` alternent, mais eux ne se filtrent pas, et
   une alternance calculee sur la position sauterait des que la moitie des
   lignes disparait. */
.galerie { display: grid; }

.chantier {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  padding-block: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--rule);
}
.chantier[hidden] { display: none; }
/* Le navigateur amene au bord haut de l'ecran ce qui prend le focus, et ce
   bord est occupe par l'en-tete puis par la barre de filtres collante : sans
   cette reserve, tabuler dans la galerie posait la photo focalisee dessous. */
.chantier { scroll-margin-top: 120px; }
@media (min-width: 900px) { .chantier { scroll-margin-top: 185px; } }
/* Le premier n'a pas de filet : la barre de filtres en pose deja un juste
   au-dessus. `--premier` est pose par le script sur le premier chantier encore
   visible, parce qu'apres un filtrage `:first-child` peut designer un chantier
   cache. */
.chantier:first-child,
.chantier--premier { padding-top: 0; border-top: 0; }

/* Les photos se rangent en bandes : une bande est une rangee de photos de meme
   hauteur. La premiere porte la ligne, celles qui suivent la completent et
   s'affichent plus petites. */
.chantier__photos { display: grid; gap: clamp(.5rem, 1vw, .75rem); }

.bande {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: clamp(.5rem, 1vw, .75rem);
}

/* Deux photos de front occupent toute la colonne ; une photo seule n'en prend
   que les deux tiers. Sans cela une ligne a une photo serait deux fois plus
   haute qu'une ligne a deux, et la galerie retrouverait son allure de tas. */
.bande > .photo:only-child,
.bande + .bande { max-width: 62%; }

/* Cadrage commun : carre pour une photo seule, portrait pour deux de front.
   Les deux tombent a la meme hauteur, donc les lignes se suivent. Le recadrage
   ne coute rien au visiteur : un clic ouvre la visionneuse, qui montre la
   photo entiere. */
.photo:not([data-montage]) img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.bande > .photo:only-child:not([data-montage]) img { aspect-ratio: 1 / 1; }

/* Le seul montage qui ne soit pas carre : 900x1600. A la largeur des autres il
   ferait le double de leur hauteur, et un montage ne se recadre pas. */
.bande > .photo.photo--haute:only-child { max-width: 36%; }

/* Une comparaison avant/apres : deux photos de meme taille, separees par un
   filet — le meme signe que celui trace sur la coupe d'un montage, pour que
   « filet » veuille dire « deux etats » partout dans la page.

   Elles etaient jusqu'ici tantot cote a cote en grand, tantot reduites en
   vignettes de 180 px sous une autre photo : la comparaison, qui est ce qu'on
   vient voir, etait la plus petite chose de la ligne. */
.bande--comparaison {
  position: relative;
  gap: clamp(.9rem, 2.2vw, 1.6rem);
}
.bande--comparaison::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  transform: translateX(-.5px);
  background: var(--rule);
  pointer-events: none;
}

.chantier__titre { font-size: clamp(1.15rem, 1.5vw, 1.4rem); }
.chantier__desc {
  margin-top: .6rem;
  max-width: 46ch;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.photo { margin: 0; }
.photo button {
  display: block;
  width: 100%;
  padding: 0;
  /* Un bord franc : sans lui, une photo claire se fond dans le papier creme et
     ses limites deviennent invisibles. */
  border: 1px solid color-mix(in srgb, var(--ink) 28%, transparent);
  background: var(--rule-soft);
  cursor: zoom-in;
}
.photo img { width: 100%; transition: opacity .2s ease; }
.photo button:hover img { opacity: .88; }
/* La legende devient une pastille posee sur la photo. En gris clair sous
   l'image, sur un fond creme, « Avant » et « Apres » se lisaient mal et on ne
   savait pas toujours a quelle photo ils se rapportaient. Sur l'image, le
   rattachement est evident et le contraste ne depend plus du fond de page. */
.photo { position: relative; }
.photo figcaption {
  position: absolute;
  top: .6rem;
  left: .6rem;
  padding: .3rem .6rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  background: color-mix(in srgb, var(--ink) 88%, transparent);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}
/* La couleur suit l'etat declare, pas la position : styler au rang donnait a
   la meme photo deux traitements differents selon la bande ou elle tombait. */
.photo figcaption[data-etat="apres"] {
  color: var(--ink);
  background: var(--apricot);
}
.photo figcaption[data-etat="encours"] {
  color: var(--white);
  background: color-mix(in srgb, var(--blue) 90%, transparent);
}

/* Certaines photos portent DEJA le montage avant/apres dans l'image, coupee en
   deux. Sur un fond creme, la moitie « apres » — souvent un mur repeint en
   blanc — se fondait dans la page : on ne voyait meme pas qu'il y avait deux
   images. Un filet marque la coupe. Le sens de la coupe est porte par
   data-montage, parce qu'il change d'une photo a l'autre. */
.photo[data-montage] button { position: relative; display: block; }

.photo[data-montage] button::after {
  content: "";
  position: absolute;
  /* Un vrai trait, pas une teinte : la gouttiere blanche deja presente dans
     l'image se confond avec le papier, donc la coupe doit etre dessinee. Le
     halo blanc la detache aussi bien d'une moitie sombre que d'une moitie
     claire — c'est le cas le plus frequent ici, un mur repeint en blanc. */
  background: var(--ink);
  box-shadow: 0 0 0 2px var(--white);
  pointer-events: none;
}
.photo[data-montage="vertical"] button::after {
  top: 0; bottom: 0; left: 50%; width: 3px; transform: translateX(-1.5px);
}
.photo[data-montage="horizontal"] button::after {
  left: 0; right: 0; top: 50%; height: 3px; transform: translateY(-1.5px);
}
/* La pastille se pose sur la coupe elle-meme : elle nomme ce que le filet
   separe sans dire quelle moitie est laquelle — on ne le sait que pour deux
   des dix. Dans un coin, elle aurait eu l'air d'etiqueter la moitie sur
   laquelle elle est posee. */
.photo[data-montage] figcaption {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rien {
  display: none;
  padding: 3rem 0;
  color: var(--ink-soft);
}

@media (max-width: 899px) {
  /* Empile : les photos, puis le texte. La comparaison avant/apres garde ses
     deux colonnes — c'est tout l'interet de la mettre cote a cote. */
  .chantier {
    grid-template-columns: 1fr;
    gap: 1.1rem;
    align-items: start;
  }
  .bande > .photo:only-child,
  .bande + .bande { max-width: 100%; }
  .bande + .bande > .photo:only-child { max-width: 55%; }
  .bande > .photo.photo--haute:only-child { max-width: 62%; }
}

/* --- prestations détaillées --------------------------------------------- */

.detail { padding-block: var(--section); }
.detail__bloc {
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: clamp(1.75rem, 3vw, 2.5rem) 0;
  border-top: 1px solid var(--rule);
}
.detail__bloc:last-of-type { border-bottom: 1px solid var(--rule); }
.detail__num {
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--blue);
  padding-top: .45rem;
}
.detail__bloc h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); }
.detail__bloc p {
  margin-top: .75rem;
  max-width: var(--measure);
  color: var(--ink-mid);
}
.detail__bloc .lien { margin-top: 1rem; font-size: .95rem; }

@media (max-width: 620px) {
  .detail__bloc { grid-template-columns: 1fr; gap: .35rem; }
  .detail__num { padding-top: 0; }
}

/* --- zone d'intervention ------------------------------------------------ */

.zone { padding-block: var(--section); background: var(--paper-lift); }
.zone__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.communes--simple { columns: 1; }

.communes {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  columns: 2 12rem;
  column-gap: 2rem;
}
.communes li {
  padding: .5rem 0;
  border-bottom: 1px solid var(--rule);
  font-size: .98rem;
}
@media (max-width: 760px) { .zone__grille { grid-template-columns: 1fr; } }

/* --- contact ------------------------------------------------------------ */

.sombre {
  background: var(--ink);
  color: var(--white);
}
.sombre h2, .sombre h3 { color: var(--white); }

.contact-band { padding-block: var(--section); }

.contact-band h2 {
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem);
  max-width: 18ch;
}
.contact-band__lead {
  margin-top: 1.25rem;
  max-width: 44ch;
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .78);
}

.tel-geant {
  display: inline-block;
  margin-top: 2.25rem;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.1rem, 6.5vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: var(--white);
  text-decoration: none;
  border-bottom: 2px solid var(--apricot);
  padding-bottom: .12em;
  transition: color .16s ease;
}
.tel-geant:hover { color: var(--apricot); }

/* L'e-mail suit le telephone : ce sont les deux facons de joindre Clemence, et
   on vient sur cette page pour elles. L'adresse du siege et le SIRET sont des
   mentions administratives — necessaires, mais pas ce qu'on cherche ici. */
.courriel-geant {
  display: block;
  margin-top: 1.1rem;
  font-size: clamp(1.05rem, 2.6vw, 1.35rem);
  color: rgba(255, 255, 255, .92);
  text-decoration: underline;
  text-underline-offset: .25em;
  transition: color .16s ease;
}
.courriel-geant:hover { color: var(--apricot); }


.coordonnees {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1.75rem clamp(2rem, 4vw, 3.5rem);
  margin: 2.75rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-dark);
  list-style: none;
}
.coordonnees dt {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
.coordonnees dd {
  margin: .5rem 0 0;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .92);
}
.coordonnees a { color: inherit; text-decoration: underline; text-underline-offset: .25em; }
.coordonnees a:hover { color: var(--apricot); }

.contact-page__grille {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(2.5rem, 6vw, 4.5rem);
  align-items: start;
}
.carte-visite { margin: 0; }
.carte-visite img { width: 100%; }
.carte-visite figcaption {
  margin-top: .9rem;
  font-size: .82rem;
  color: rgba(255, 255, 255, .55);
}
/* La colonne de gauche est longue (coordonnees + formulaire) : sans cela, la
   moitie droite reste vide sur tout le defilement. */
@media (min-width: 821px) {
  .carte-visite { position: sticky; top: 96px; }
}
@media (max-width: 820px) {
  .contact-page__grille { grid-template-columns: 1fr; }
  .carte-visite { max-width: 300px; }
}

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

.pied {
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  background: #0A1220;
  color: rgba(255, 255, 255, .6);
  font-size: .9rem;
}
.pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem clamp(2rem, 5vw, 4rem);
}
.pied h2 {
  margin-bottom: .85rem;
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
}
.pied ul { margin: 0; padding: 0; list-style: none; }
.pied li + li { margin-top: .45rem; }
.pied a { color: rgba(255, 255, 255, .78); text-decoration: none; }
.pied a:hover { color: var(--white); text-decoration: underline; }
.pied__bas {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule-dark);
  font-size: .82rem;
  color: rgba(255, 255, 255, .45);
}

/* --- page de texte (mentions légales) ----------------------------------- */

.texte { padding-block: clamp(3rem, 7vw, 5rem) var(--section); }
.texte__corps { max-width: 68ch; }
.texte h2 {
  margin-top: 2.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 1.25rem;
}
.texte p, .texte ul { margin-top: 1rem; color: var(--ink-mid); }
.texte ul { padding-left: 1.2rem; }
.texte li + li { margin-top: .4rem; }
.texte a { color: var(--blue); }

/* --- visionneuse -------------------------------------------------------- */

.visionneuse {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  /* La bande du haut appartient a la croix : 46 px de bouton, plus l'ecart
     qui le separe du media. */
  padding-top: calc(clamp(1rem, 4vw, 3rem) + 46px + .75rem);
  background: rgba(8, 14, 24, .95);
}
.visionneuse.ouverte { display: grid; }

.visionneuse figure { margin: 0; max-width: 100%; text-align: center; }
.visionneuse img {
  max-width: min(94vw, 1400px);
  /* Borne aussi par la hauteur reellement disponible : sinon, en paysage sur
     un telephone, 78 vh plus la legende plus la bande du haut depassent
     l'ecran et la legende sort du cadre. */
  max-height: min(78vh, calc(100svh - 12rem));
  width: auto;
  margin-inline: auto;
}
.visionneuse figcaption {
  margin-top: 1.1rem;
  color: rgba(255, 255, 255, .88);
  font-size: .98rem;
}
.visionneuse__compte {
  display: block;
  margin-top: .35rem;
  font-size: .78rem;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .45);
  font-variant-numeric: tabular-nums;
}

.v-btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  padding: 0;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--white);
  cursor: pointer;
  transition: background-color .16s ease;
}
.v-btn:hover { background: rgba(255, 255, 255, .24); }
.v-btn svg { width: 21px; height: 21px; }
/* La croix est sortie du cadre du media, dans une bande qui lui est
   reservee en haut de l'ecran (le padding-top de .visionneuse). Posee sur le
   media, elle tombait sous la commande plein ecran que le lecteur video de
   certains telephones Samsung affiche en haut a droite : tant que les
   commandes natives restaient visibles — quelques secondes a chaque
   ouverture — la video ne pouvait pas etre fermee. */
.v-fermer { top: clamp(.75rem, 3vw, 1.75rem); right: clamp(.75rem, 3vw, 1.75rem); }
.v-prec { left: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.v-suiv { right: clamp(.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.v-prec[hidden], .v-suiv[hidden] { display: none; }

body.bloque { overflow: hidden; }

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

[id] { scroll-margin-top: 88px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .entete, .visionneuse, .hamburger, .tri { display: none; }
  body { background: #fff; color: #000; }
  /* La mosaique portait `break-inside: avoid` ; la colonne de lignes doit le
     porter aussi, sinon un chantier finit coupe entre deux pages, ses photos
     d'un cote et son titre de l'autre. */
  .chantier { break-inside: avoid; }
}

/* --- foire aux questions ------------------------------------------------ */

.faq { padding-block: var(--section); background: var(--paper-lift); }

.faq__grille {
  display: grid;
  /* .9fr et non .8fr : dans la colonne plus etroite, « Ce qu'on me demande le
     plus souvent » tombait sur trois lignes de deux ou trois mots. Les
     questions elles-memes n'ont pas besoin de toute la largeur restante. */
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 4.5rem);
  align-items: start;
}
@media (max-width: 860px) { .faq__grille { grid-template-columns: 1fr; } }

.questions { border-top: 1px solid var(--rule); }

/* <details> natif : accessible au clavier, fonctionne sans JavaScript. */
.question {
  border-bottom: 1px solid var(--rule);
}
.question summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  font-family: var(--serif);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.question summary::-webkit-details-marker { display: none; }
.question summary:hover { color: var(--blue); }

.question summary::after {
  content: "";
  flex: none;
  width: 13px; height: 13px;
  margin-top: .45rem;
  border-right: 1.8px solid var(--blue);
  border-bottom: 1.8px solid var(--blue);
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.question[open] summary::after { transform: rotate(-135deg); }

.question__reponse {
  padding: 0 0 1.35rem;
  max-width: 60ch;
  font-size: .98rem;
  color: var(--ink-mid);
}
.question__reponse p + p { margin-top: .8rem; }

/* --- formulaire de contact ---------------------------------------------- */

.formulaire {
  display: grid;
  gap: 1.1rem;
  margin-top: 2rem;
}
.champ { display: grid; gap: .4rem; }
.champ--double { grid-template-columns: 1fr 1fr; gap: 1.1rem; display: grid; }
@media (max-width: 560px) { .champ--double { grid-template-columns: 1fr; } }

.formulaire label {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}
.formulaire .obligatoire { color: var(--apricot); }

.formulaire input,
.formulaire select,
.formulaire textarea {
  width: 100%;
  padding: .8rem .95rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 2px;
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
}
.formulaire textarea { min-height: 8rem; resize: vertical; }
.formulaire input::placeholder,
.formulaire textarea::placeholder { color: rgba(255, 255, 255, .38); }
.formulaire input:focus,
.formulaire select:focus,
.formulaire textarea:focus {
  outline: 2px solid var(--apricot);
  outline-offset: 1px;
  background: rgba(255, 255, 255, .1);
}
.formulaire select option { color: var(--ink); }

/* Piege a robots : invisible pour les humains, rempli par les automates. */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

.formulaire button { justify-self: start; margin-top: .4rem; }

.mention-form {
  margin-top: .5rem;
  font-size: .82rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, .55);
}
.mention-form a { color: rgba(255, 255, 255, .8); }

.message-retour {
  padding: 1rem 1.2rem;
  border-left: 3px solid var(--apricot);
  background: rgba(253, 203, 130, .12);
  font-size: .98rem;
  color: var(--white);
}
.message-retour--erreur { border-left-color: #F08B7C; background: rgba(240, 139, 124, .12); }

/* --- barre d'appel mobile ----------------------------------------------- */

.barre-appel {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  border-top: 1px solid rgba(255, 255, 255, .16);
  background: var(--ink);
}
.barre-appel a {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .95rem .5rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--white);
  text-decoration: none;
}
.barre-appel a + a { border-left: 1px solid rgba(255, 255, 255, .16); }
.barre-appel a:first-child { background: var(--apricot); color: var(--ink); }
.barre-appel svg { width: 18px; height: 18px; flex: none; }

@media (max-width: 760px) {
  .barre-appel { display: flex; }
  /* La barre mesure 58 px : on degage un peu plus pour le pied de page. */
  body { padding-bottom: 4.25rem; }
  .visionneuse { padding-bottom: 4.5rem; }
}

.titre-page--suite { margin-top: clamp(3rem, 6vw, 4.5rem); }