/* ==========================================================
   interactions.css : effets interactifs du portfolio
   À charger APRÈS css/styles.css
   Palette du site : fond #000, texte #fff, titres Syne, texte Poppins
   ========================================================== */

:root { --ease-out: cubic-bezier(.2, .8, .2, 1); }

/* ---------- 1. Curseur : un point précis + un point qui suit avec retard ---------- */
.has-custom-cursor,
.has-custom-cursor * { cursor: none !important; }

.cursor-dot,
.cursor-ring {
  position: fixed; top: 0; left: 0;
  pointer-events: none; z-index: 10000;
  opacity: 0; transition: opacity .3s;
  mix-blend-mode: difference;          /* reste visible sur fond noir comme sur les images claires */
  will-change: transform;
}
.cursor-dot.is-visible,
.cursor-ring.is-visible { opacity: 1; }

/* le point "curseur" : suit la souris sans retard */
.cursor-dot {
  width: 6px; height: 6px; margin: -3px 0 0 -3px;
  border-radius: 50%; background: #fff;
}

/* le point "qui suit" : plus gros, avec retard */
.cursor-ring { width: 0; height: 0; }
.cursor-ring__circle {
  position: absolute; left: -6px; top: -6px;
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff;
  transition: transform .4s var(--ease-out);
}
.cursor-ring.is-link .cursor-ring__circle    { transform: scale(2.4); }
.cursor-ring.is-project .cursor-ring__circle { transform: scale(6); }     /* ≈ 72 px sur les images */
.cursor-ring.is-down .cursor-ring__circle    { transform: scale(.7); }
.cursor-ring.is-project.is-down .cursor-ring__circle { transform: scale(5.2); }

/* ---------- 2. Survol des images (accueil, contact, stillframes des pages projets) ---------- */
/* Cadres qui contiennent une image : accueil (lien), contact (.img-frame), pages projets (.card > a) */
.top-border .image-padding a,
.image-padding .img-frame,
.card > a {
  display: block; overflow: hidden; border-radius: .25rem;   /* même arrondi que .rounded */
}
.card > a, .image-padding .img-frame { --zoom: 1.06; }      /* agrandissement léger (1.1 sur l'accueil) */

.top-border .image-padding img,
.image-padding .img-frame img,
.card > a img {
  transition: transform .9s var(--ease-out), filter .9s;
  will-change: transform;
}
.top-border .image-padding a:hover img,
.image-padding .img-frame:hover img,
.card > a:hover img {
  /* --tx / --ty sont mis à jour par le JS : l'image suit légèrement la souris */
  transform: scale(var(--zoom, 1.1)) translate(var(--tx, 0px), var(--ty, 0px));
  filter: brightness(1.08) saturate(1.15);
}

/* ---------- 3. Titres de projets : position magnétique + flèche, comme « View Project » ---------- */
.top-border h3 {
  position: relative; display: inline-block;
  /* transform = effet magnétique (JS) ; translate = décalage au survol du projet (section 4) */
  transition: transform .25s var(--ease-out), translate .5s var(--ease-out) .04s;
}
/* le titre est un lien vers le projet : il garde l'apparence du titre */
.top-border h3 a,
.top-border h3 a:hover,
.top-border h3 a:focus { color: inherit; text-decoration: none; }

@media (hover: hover) {
  .top-border h3::after {
    content: "\2192"; position: absolute; left: 100%; top: 0;
    margin-left: .35em; white-space: nowrap;
    opacity: 0; transform: translateX(-.5em);
    transition: opacity .35s, transform .35s var(--ease-out);
  }
  .top-border h3:hover::after { opacity: 1; transform: none; }
}

/* ---------- 4. Décalage au survol, sur tous les textes ---------- */
/* Projets : catégorie, titre et description glissent l'un après l'autre */
.top-border .col-md-5 > p { transition: transform .5s var(--ease-out), opacity .5s; }
.top-border .col-md-5 > p:first-child    { opacity: .65; }
.top-border .col-md-5 > p:nth-of-type(2) { transition-delay: .08s; }

.top-border:hover .col-md-5 > p  { transform: translateX(8px); }
.top-border:hover .col-md-5 > h3 { translate: 8px 0; }
.top-border:hover .col-md-5 > p:first-child { opacity: 1; }

/* Texte d'accueil (sur la vidéo) */
.anchor-text .col-lg-6 > * { transition: transform .5s var(--ease-out); }
.anchor-text .col-lg-6 > p { transition-delay: .06s; }
.anchor-text .col-lg-6:hover > * { transform: translateX(8px); }

/* Titre « Projects » */
h1.my-4 { transition: transform .5s var(--ease-out); }
h1.my-4:hover { transform: translateX(8px); }

/* ---------- 5. Bouton « View Project » ---------- */
.top-border .btn-primary {
  transition: transform .25s var(--ease-out), color .15s ease-in-out,
              background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.top-border .btn-primary::after {
  content: "\2192"; display: inline-block; vertical-align: bottom;
  max-width: 0; margin-left: 0; overflow: hidden; opacity: 0;
  transition: max-width .35s var(--ease-out), margin-left .35s var(--ease-out), opacity .35s;
}
.top-border .btn-primary:hover::after { max-width: 1.5em; margin-left: .5rem; opacity: 1; }

/* ---------- 6. Menu du haut : plus de contraste ---------- */
.navbar-dark { border-bottom: 1px solid rgba(255, 255, 255, .3); }

.navbar-dark .navbar-brand,
.navbar-dark .navbar-brand:hover,
.navbar-dark .navbar-brand:focus { color: #fff; font-weight: 800; }

.navbar-dark .navbar-nav .nav-link,
.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus,
.navbar-dark .navbar-nav .nav-link.active {
  color: #fff;                    /* blanc pur au lieu du gris à 55 % */
  font-weight: 800;
  letter-spacing: .08em;
}
.navbar-dark .navbar-toggler { border-color: rgba(255, 255, 255, .7); }

/* ---------- 6b. Parallax 3D sur la vidéo d'accueil ---------- */
/* --nx / --ny (de -.5 à .5) sont mis à jour par le JS selon la position de la souris */
.text-video { perspective: 1200px; }
.text-video .showreel {
  transform-origin: 50% 50%;
  transform: scale(1.14)
             translate3d(calc(var(--nx, 0) * -64px), calc(var(--ny, 0) * -48px), 0)
             rotateY(calc(var(--nx, 0) * 7deg))
             rotateX(calc(var(--ny, 0) * -7deg));
  transition: transform .9s var(--ease-out);
  will-change: transform;
}
/* le texte bouge dans l'autre sens : effet de profondeur */
.text-video .anchor-text {
  transform: translate3d(calc(var(--nx, 0) * 28px), calc(var(--ny, 0) * 20px), 0);
  transition: transform .9s var(--ease-out);
}

/* ---------- 6c. Liens du menu : position magnétique + flèche (comme les titres) ---------- */
.navbar-dark .navbar-nav .nav-link {
  position: relative;
  transition: transform .25s var(--ease-out), color .15s ease-in-out;
}
@media (hover: hover) {
  .navbar-dark .navbar-nav .nav-link::after {
    content: "\2192"; position: absolute;
    left: calc(100% - 1rem + .3em);          /* juste après le texte (le padding droit fait 1rem) */
    top: 50%; translate: 0 -50%;
    white-space: nowrap;
    opacity: 0; transform: translateX(-.5em);
    transition: opacity .35s, transform .35s var(--ease-out);
  }
  .navbar-dark .navbar-nav .nav-link:hover::after,
  .navbar-dark .navbar-nav .nav-link:focus-visible::after { opacity: 1; transform: none; }
}

/* ---------- 6c-bis. Nom « Valentine Boidron » : même effet que les liens du menu ---------- */
.navbar-dark .navbar-brand {
  position: relative;
  transition: transform .25s var(--ease-out), color .15s ease-in-out;
}
@media (hover: hover) {
  .navbar-dark .navbar-brand::after {
    content: "\2192"; position: absolute;
    left: calc(100% + .3em); top: 50%; translate: 0 -50%;
    white-space: nowrap;
    opacity: 0; transform: translateX(-.5em);
    transition: opacity .35s, transform .35s var(--ease-out);
  }
  .navbar-dark .navbar-brand:hover::after,
  .navbar-dark .navbar-brand:focus-visible::after { opacity: 1; transform: none; }
}

/* ---------- 6d. Pages projets : flèches projet précédent / suivant ---------- */
.project-arrow,
.project-arrow:hover,
.project-arrow:focus {
  color: #fff; text-decoration: none;            /* annule le bleu souligné des liens */
}
.project-arrow {
  position: fixed; top: 50%; translate: 0 -50%; z-index: 9000;
  display: flex; align-items: center; gap: .9rem;
  padding: 1.25rem .75rem;
  mix-blend-mode: difference;                    /* lisible sur fond noir comme sur les images claires */
  font-family: 'Syne', sans-serif; font-weight: 800; line-height: 1;
  transition: transform .25s var(--ease-out);    /* transform = effet magnétique (JS) */
}
.project-arrow--prev { left: .25rem; }
.project-arrow--next { right: .25rem; flex-direction: row-reverse; }

/* Flèche dessinée en SVG : un simple triangle plein */
.project-arrow__icon {
  display: block; width: 2.66rem; height: 3.08rem;     /* proportions du SVG : 38 x 44 */
  font-size: 0; color: transparent;                    /* masque le caractère de secours */
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 44'%3E%3Cpolygon points='0,0 38,22 0,44'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 44'%3E%3Cpolygon points='0,0 38,22 0,44'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .4s var(--ease-out);
}
.project-arrow--prev .project-arrow__icon { transform: scaleX(-1); }   /* même dessin, retourné */
.project-arrow__label {
  max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0;
  font: 600 .75rem/1 'Poppins', sans-serif; letter-spacing: .12em; text-transform: uppercase;
  transition: max-width .5s var(--ease-out), opacity .4s;
}
@media (hover: hover) {
  .project-arrow:hover .project-arrow__label,
  .project-arrow:focus-visible .project-arrow__label { max-width: 14em; opacity: 1; }
  .project-arrow--prev:hover .project-arrow__icon { transform: scaleX(-1) translateX(10px); }
  .project-arrow--next:hover .project-arrow__icon { transform: translateX(10px); }
}
@media (max-width: 991.98px) {                   /* petits écrans : flèches en bas, sans texte */
  .project-arrow { top: auto; bottom: .25rem; translate: none; }
  .project-arrow__icon { width: 1.71rem; height: 1.98rem; }
}

/* ---------- 6e. Pages projets : flèche vers le bas, sous la vidéo ---------- */
.scroll-down,
.scroll-down:hover,
.scroll-down:focus { color: #fff; text-decoration: none; }
.scroll-down {
  position: absolute; left: 50%; bottom: 1rem; z-index: 3;
  padding: 1rem;
  translate: -50% 0;                              /* centrage ; transform reste libre pour l'effet magnétique */
  mix-blend-mode: difference;
  transition: transform .25s var(--ease-out);
  animation: scroll-down-bounce 2.4s var(--ease-out) infinite;
}
.scroll-down__icon {
  display: block; width: 3.08rem; height: 2.66rem;        /* triangle plein pointant vers le bas */
  background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 38'%3E%3Cpolygon points='0,0 44,0 22,38'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 38'%3E%3Cpolygon points='0,0 44,0 22,38'/%3E%3C/svg%3E") center / contain no-repeat;
}
@keyframes scroll-down-bounce {
  0%, 100% { translate: -50% 0; }
  50%      { translate: -50% 12px; }
}
@media (max-width: 991.98px) { .scroll-down__icon { width: 2.2rem; height: 1.9rem; } }

/* ---------- 6f. Pages projets : texte et images apparaissent en fondu, du bas vers le haut ---------- */
/* .reveal est ajouté par le JS. On utilise « translate » (et non « transform ») pour ne pas
   gêner le décalage au survol des titres. */
.fx-ready .reveal {
  opacity: 0; translate: 0 36px;
  transition: opacity .9s var(--ease-out), translate .9s var(--ease-out);
}
.fx-ready .reveal.is-visible { opacity: 1; translate: 0 0; }

/* ---------- 7. Apparition au scroll ---------- */
/* .fx-ready est ajouté par interactions.js : si le script ne se charge pas, tout reste visible */
.fx-ready .top-border {
  opacity: 0; transform: translateY(48px);
  transition: opacity .9s var(--ease-out), transform .9s var(--ease-out);
}
.fx-ready .top-border.is-visible { opacity: 1; transform: none; }

/* ---------- Accessibilité : respecte « réduire les animations » ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-ready .top-border { opacity: 1; transform: none; transition: none; }
  .fx-ready .reveal { opacity: 1; translate: none; transition: none; }
  .scroll-down { animation: none; }
  .top-border:hover .col-md-5 > p,
  .anchor-text .col-lg-6:hover > *,
  h1.my-4:hover { transform: none; }
  .top-border:hover .col-md-5 > h3 { translate: none; }
  .text-video .showreel, .text-video .anchor-text { transform: scale(1.14); }
  .text-video .anchor-text { transform: none; }
  .top-border .image-padding a:hover img,
  .image-padding .img-frame:hover img,
  .card > a:hover img { transform: none; }
}

/* ==========================================================
   8. Page contact : toutes les images à la même largeur, sans recadrage
   Chaque image prend toute la largeur de sa colonne ; la hauteur suit
   les proportions d'origine (rien n'est coupé).
   ========================================================== */
.image-padding .img-frame { width: 100%; }
.image-padding .img-frame img {
  display: block; width: 100%; height: auto;
  max-width: none; margin: 0 !important;
}
@media (max-width: 767.98px) { .image-padding .img-frame { margin-bottom: 1rem; } }

/* ==========================================================
   9. Téléphone et tablette
   ========================================================== */
body { overflow-x: clip; }                       /* jamais de défilement horizontal */

/* Vidéo d'en-tête : remplit toujours le cadre, quelle que soit l'orientation de l'écran */
.text-video .showreel, .text-video video {
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
}
/* « svh » = hauteur réelle visible sur mobile (la barre d'adresse ne coupe plus le bas) */
.text-video   { height: calc(100vh - 56px);     height: calc(100svh - 56px); }
.home-container { min-height: calc(100vh - 56px); min-height: calc(100svh - 56px); }

/* Textes longs (liens, adresse e-mail) : retour à la ligne au lieu de déborder */
.top-border p, .container p, h1, h3 { overflow-wrap: anywhere; }
.top-border h3 { max-width: 100%; }

/* Tablette : 2 colonnes de stillframes dès 576 px (au lieu d'une seule jusqu'à 992 px) */
@media (min-width: 576px) and (max-width: 991.98px) {
  .row > .col-lg-6.mb-4 { width: 50%; }
}

@media (max-width: 991.98px) {
  .navbar-dark .navbar-nav .nav-link { padding: .8rem 1rem; }            /* zones de tap confortables */
  /* flèches entre projets : en bas, au-dessus des barres du navigateur */
  .project-arrow { bottom: max(.25rem, env(safe-area-inset-bottom)); }
  .project-arrow--prev { left:  max(.25rem, env(safe-area-inset-left)); }
  .project-arrow--next { right: max(.25rem, env(safe-area-inset-right)); }
  body:has(.project-nav) { padding-bottom: 4.5rem; }                    /* le dernier contenu n'est pas masqué */
}

@media (max-width: 767.98px) {
  /* le texte d'accueil peut dépasser : le cadre grandit au lieu de le couper */
  .text-video { height: auto; min-height: calc(85vh - 56px); min-height: calc(85svh - 56px); }
  .top-border { padding-top: 16px; }
  .top-border .col-md-5 { padding-top: .25rem; padding-bottom: 1rem; }
  .fx-ready .top-border { transform: translateY(28px); }
  .fx-ready .reveal { translate: 0 24px; }
  .fx-ready .top-border.is-visible { transform: none; }
  .fx-ready .reveal.is-visible { translate: 0 0; }
}

@media (max-width: 575.98px) {
  h1 { font-size: clamp(1.7rem, 8.5vw, 2.25rem); line-height: 1.15; }
  .anchor-text .col-lg-6 > p { font-size: .95rem; }
}

/* Écrans tactiles : pas d'effet « survol » qui reste collé après un tap */
@media (hover: none) {
  .top-border .image-padding a:hover img,
  .image-padding .img-frame:hover img,
  .card > a:hover img { transform: none; filter: none; }
  .top-border:hover .col-md-5 > p,
  .anchor-text .col-lg-6:hover > *,
  h1.my-4:hover { transform: none; }
  .top-border:hover .col-md-5 > h3 { translate: none; }
  .top-border:hover .col-md-5 > p:first-child { opacity: .65; }
  .top-border .btn-primary:hover::after { max-width: 0; margin-left: 0; opacity: 0; }
  .text-video .showreel { transform: none; }                            /* pas de parallax : pas de zoom inutile */
  .text-video .anchor-text { transform: none; }
}

/* ==========================================================
   10. Marges réduites sur toutes les pages
   Un seul réglage : --page-gutter (marge latérale). Plus petit = marges plus fines.
   Ancien réglage Bootstrap : 3 rem (48 px) par côté + largeur de page plafonnée à 1140–1320 px.
   ========================================================== */
:root { --page-gutter: clamp(.625rem, 1.6vw, 1.25rem); }          /* ≈ 10 px sur téléphone, 20 px sur ordinateur */

.container, .container.px-lg-5, .container.px-4 {
  max-width: 1760px;                                              /* pleine largeur, plafonnée sur très grands écrans */
  padding-left:  var(--page-gutter) !important;
  padding-right: var(--page-gutter) !important;
}
/* conteneur dans un conteneur (pages projets) : pas de double marge */
.container .container {
  max-width: none;
  padding-left: 0 !important; padding-right: 0 !important;
}

/* Page contact : les blocs ne sont pas dans un conteneur, on aligne sur la même marge */
body > .row.top-border {
  margin-left:  max(0px, calc(var(--page-gutter) - .75rem));
  margin-right: max(0px, calc(var(--page-gutter) - .75rem));
}

/* Texte d'accueil sur la vidéo : la marge négative de la grille ne dépasse plus de l'écran */
.anchor-text .row { --bs-gutter-x: calc(var(--page-gutter) * 2); }

/* Stillframes : images plus proches les unes des autres */
.row:has(> .col-lg-6 > .card) { --bs-gutter-x: .75rem; }
.row > .col-lg-6.mb-4 { margin-bottom: .75rem !important; }

/* Titres, séparateurs, blocs de projets : espacements verticaux resserrés */
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.top-border { padding-top: 8px; padding-bottom: 8px; }
hr { margin: .5rem 0; }
@media (max-width: 767.98px) { .top-border { padding-top: 12px; } }

/* ==========================================================
   12. Téléphone : vidéo d'en-tête en 16/9 (1920×1080), jamais recadrée
   ========================================================== */
@media (max-width: 767.98px) {
  .text-video { height: auto; min-height: 0; }
  .text-video > a { display: block; }
  .text-video .showreel, .text-video video {
    position: relative; top: auto;
    display: block; width: 100%; height: auto;
    aspect-ratio: 16 / 9;
    object-fit: contain;                                          /* image entière, aucun recadrage */
    background: #000;
  }
  /* page d'accueil : le texte passe sous la vidéo au lieu de la recouvrir */
  .text-video .anchor-text { padding-top: .5rem; padding-bottom: 1rem; }
  /* pas de flèche vers le bas sur téléphone */
  .text-video > a.scroll-down { display: none; }       /* « a.scroll-down » : plus précis que « .text-video > a » juste au-dessus */
}

/* ==========================================================
   13. Page contact : bouton « Un projet en tête ? Discutons-en »
   Même apparence que « View Project » (classe .btn-primary), fixé à l'écran pendant le défilement.
   Le bouton ne bouge ni ne change de taille au survol : le clic part toujours du premier coup.
   ========================================================== */
.contact-cta {
  position: fixed; z-index: 9000;
  right:  max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  font-size: clamp(1.15rem, 1.5vw + .6rem, 1.6rem);      /* plus gros que « View Project » */
  line-height: 1.25; text-align: center;
  padding: .9rem 1.6rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
  -webkit-user-select: none; user-select: none;           /* pas de texte sélectionné (surlignage bleu) */
  -webkit-tap-highlight-color: transparent;               /* pas de flash bleu au toucher */
  touch-action: manipulation;                             /* un seul tap, sans attente ni zoom */
}
/* Aucun bleu : mêmes couleurs au repos, au focus et pendant le clic */
.contact-cta,
.contact-cta:focus, .contact-cta:focus-visible,
.contact-cta:active, .contact-cta:active:focus {
  color: #fff; background-color: #000; border-color: #fff;
  box-shadow: none; outline: none;
}
/* survol (souris uniquement) : même inversion que « View Project » */
@media (hover: hover) {
  .contact-cta:hover { color: #000; background-color: #fff; border-color: #fff; }
}
.contact-cta:focus-visible { outline: 1px solid #fff; outline-offset: 3px; }   /* repère discret au clavier uniquement */
body:has(.contact-cta) { padding-bottom: 4.5rem; }       /* le bouton ne masque pas la fin de la page */

@media (max-width: 575.98px) {                           /* téléphone : bouton centré, sur toute la largeur utile */
  .contact-cta { left: 1rem; right: 1rem; font-size: 1.15rem; padding: .8rem 1rem; }
}

/* ==========================================================
   14. Menu sur téléphone/tablette : trois gros points à droite du nom
   (remplace l'icône « hamburger » ; un tap ouvre le menu WORK / CONTACT en dessous)
   ========================================================== */
.navbar > .container { flex-wrap: wrap; }                 /* le menu ouvert passe dessous ; le nom et les points restent sur la même ligne */
.navbar-brand { white-space: nowrap; flex-shrink: 1; min-width: 0; margin-right: .5rem; }

.navbar-dark .navbar-toggler {
  flex-shrink: 0; margin-left: auto;
  padding: .5rem .35rem; border: 0;
  -webkit-tap-highlight-color: transparent;
}
.navbar-dark .navbar-toggler:focus,
.navbar-dark .navbar-toggler:active { box-shadow: none; outline: none; }
.navbar-dark .navbar-toggler:focus-visible { outline: 1px solid #fff; outline-offset: 2px; }

.navbar-dark .navbar-toggler-icon {
  width: 3.6rem; height: 1.15rem;                         /* gros : 3 points de ~18 px */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 16'%3E%3Cg fill='%23fff'%3E%3Ccircle cx='8' cy='8' r='7'/%3E%3Ccircle cx='26' cy='8' r='7'/%3E%3Ccircle cx='44' cy='8' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat; background-position: center;
}
@media (max-width: 360px) {                               /* très petits écrans : nom un peu plus compact */
  .navbar-brand { font-size: 1.1rem; }
  .navbar-dark .navbar-toggler-icon { width: 3rem; height: .95rem; }
}

/* ==========================================================
   15. Téléphone : image, texte et trait ont exactement la même largeur
   (Bootstrap ajoutait 12 px de marge intérieure à droite de l'image et de chaque côté du texte)
   ========================================================== */
@media (max-width: 767.98px) {
  .top-border > .image-padding,
  .top-border > .col-md-5 { padding-left: 0; padding-right: 0; }
  /* page contact : les blocs ne sont pas dans un conteneur, on leur donne la même marge que sur l'accueil */
  body > .row.top-border { margin-left: var(--page-gutter); margin-right: var(--page-gutter); }
}