/* =========================================================================
   MOTIFS.CSS — les tissages NAMES LEGAL.

   Ces motifs sont des tissus à bandes : des bandes tissées séparément, puis
   cousues bord à bord pour faire une étoffe. C'est aussi ce que fait le
   produit — assembler un site à partir de morceaux. On les emploie donc comme
   des COUTURES : ils marquent les vraies frontières structurelles (le haut du
   footer, le bord d'un panneau, la tête d'une page). Jamais du papier peint
   derrière du texte.

   Trois règles à ne pas casser :
   1. On ne déforme jamais le tissage. Pas de `background-size: 100% 100%` :
      toujours `auto <hauteur>` ou `cover`. Un tissu étiré se voit tout de suite.
   2. Une bande montre UNE rangée entière, jamais une rangée coupée en deux.
      D'où --nl-motif-rows : le nombre de rangées sur la hauteur du carré,
      mesuré par `manage.py build_motifs`. La hauteur de fond vaut donc
      hauteur_de_bande × rangées, et la fenêtre de la bande cadre pile une rangée.
   3. Sur une grande surface, le tissu passe SOUS un voile. Le texte garde son
      contraste ; il ne reste du tissu qu'une atmosphère.

   Assets servis : static/main/motifs/*.webp, dérivés des PNG maîtres de
   static/main/photos/ par `manage.py build_motifs` (9,3 Mo → 833 Ko).
   ========================================================================= */

:root {
  /* L'écru du tissu : le seul ton que la palette de marque n'avait pas. Les
     neutres de la charte sont des gris froids ; celui-ci est chaud et sert de
     respiration sur les fonds sombres. */
  --nl-ecru: #e9dcc2;

  /* Hauteur d'une couture. Volontairement basse : c'est un ourlet, pas un
     bandeau. */
  --nl-seam-h: 3rem;
}

/* ── 1. La couture ─────────────────────────────────────────────────────────
   Un <div class="nl-seam nl-seam--losanges" aria-hidden="true"></div> posé
   exactement là où deux zones se rejoignent. */
.nl-seam {
  height: var(--nl-seam-h);
  background-image: var(--nl-motif);
  background-repeat: repeat-x;
  background-position: center;
  /* Le carré est rendu à (hauteur × rangées) : une rangée fait donc pile la
     hauteur de la bande, et la bande en cadre une seule. */
  background-size: auto calc(var(--nl-seam-h) * var(--nl-motif-rows, 4));
}

.nl-seam--thin { --nl-seam-h: 1.75rem; }
.nl-seam--tall { --nl-seam-h: 4.5rem; }

/* Choix du motif. Les valeurs de rangées viennent de `build_motifs` : les
   remesurer si un maître est réexporté. Fond sombre ou fond écru — prendre
   celui qui prolonge la surface adjacente, pour que la couture ferme la zone
   au lieu de la trancher. */
.nl-seam--crocodile { --nl-motif: url("../motifs/01-dents-de-crocodile.03a75138a913.webp"); --nl-motif-rows: 3; } /* sombre */
.nl-seam--damier    { --nl-motif: url("../motifs/02-damier.9426f871d486.webp");             --nl-motif-rows: 8; } /* écru   */
.nl-seam--zigzags   { --nl-motif: url("../motifs/03-zigzags.9c0b589f36dc.webp");            --nl-motif-rows: 2; } /* sombre */
.nl-seam--croix     { --nl-motif: url("../motifs/04-croix.b905495d5374.webp");              --nl-motif-rows: 6; } /* écru   */
.nl-seam--points    { --nl-motif: url("../motifs/05-points-en-lignes.713225d33125.webp");   --nl-motif-rows: 3; } /* sombre */
.nl-seam--chevrons  { --nl-motif: url("../motifs/06-chevrons.dccf83d2a56e.webp");           --nl-motif-rows: 5; } /* écru   */
.nl-seam--losanges  { --nl-motif: url("../motifs/07-losanges.cfd269157d62.webp");           --nl-motif-rows: 5; } /* sombre */
.nl-seam--peigne    { --nl-motif: url("../motifs/08-peigne.ddde2db80a09.webp");             --nl-motif-rows: 4; } /* bleu   */
.nl-seam--cercles   { --nl-motif: url("../motifs/09-cercles.911c9f3d5175.webp");            --nl-motif-rows: 4; } /* sombre */

/* ── 2. La tête d'étoffe ───────────────────────────────────────────────────
   Le bandeau assemblé, en pleine largeur, derrière un titre. Le voile fait
   tout le travail de lisibilité : le texte se lit sur un #132a31 quasi plein,
   le tissu ne donne plus qu'un grain. */
.nl-cloth-head {
  /* Étoffe par défaut : le bandeau assemblé. Un modificateur --<motif> donne
     à chaque page son propre tissage — c'est ce qui fait qu'on reconnaît une
     page au premier coup d'œil au lieu d'avoir six fois la même bannière. */
  --nl-cloth: url("../motifs/bandeau-hero.b23661166509.webp");
  --nl-cloth-size: cover;
  --nl-cloth-repeat: no-repeat;

  position: relative;
  isolation: isolate;
  background-color: #132a31;
  background-image: var(--nl-cloth);
  background-size: var(--nl-cloth-size);
  background-repeat: var(--nl-cloth-repeat);
  background-position: center;
  color: #fff;
}

/* Posée sur la <section>, la tête d'étoffe est pleine largeur. .hero est une
   carte opaque du kit : elle doit s'effacer pour laisser voir l'étoffe, sinon
   elle la recouvre. */
.nl-cloth-head .hero {
  background: transparent;
  border-radius: 0;
}

/* Les carrés se tissent en bande sur la hauteur du bandeau : `auto 100%` garde
   le ratio (jamais d'étirement) et `repeat-x` prolonge le tissage. */
.nl-cloth-head--crocodile { --nl-cloth: url("../motifs/01-dents-de-crocodile.03a75138a913.webp"); --nl-cloth-size: auto 100%; --nl-cloth-repeat: repeat-x; }
.nl-cloth-head--damier    { --nl-cloth: url("../motifs/02-damier.9426f871d486.webp");             --nl-cloth-size: auto 100%; --nl-cloth-repeat: repeat-x; }
.nl-cloth-head--zigzags   { --nl-cloth: url("../motifs/03-zigzags.9c0b589f36dc.webp");            --nl-cloth-size: auto 100%; --nl-cloth-repeat: repeat-x; }
.nl-cloth-head--croix     { --nl-cloth: url("../motifs/04-croix.b905495d5374.webp");              --nl-cloth-size: auto 100%; --nl-cloth-repeat: repeat-x; }
.nl-cloth-head--chevrons  { --nl-cloth: url("../motifs/06-chevrons.dccf83d2a56e.webp");           --nl-cloth-size: auto 100%; --nl-cloth-repeat: repeat-x; }
.nl-cloth-head--peigne    { --nl-cloth: url("../motifs/08-peigne.ddde2db80a09.webp");             --nl-cloth-size: auto 100%; --nl-cloth-repeat: repeat-x; }
.nl-cloth-head--cercles   { --nl-cloth: url("../motifs/09-cercles.911c9f3d5175.webp");            --nl-cloth-size: auto 100%; --nl-cloth-repeat: repeat-x; }
.nl-cloth-head::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* 84 % : le pire cas est du blanc sur une zone écrue du tissu, qui remonte à
     rgb(57,74,75) — encore ~9:1. En dessous, le tissage disparaît ; au-dessus,
     autant mettre un aplat. */
  background: linear-gradient(rgba(19, 42, 49, .84), rgba(19, 42, 49, .90));
}
/* Le contenu d'une tête d'étoffe est sur fond sombre : les utilitaires de
   texte atténué de la charte y garderaient leur gris de mode clair.
   Deux composants d'en-tête cohabitent dans le site (.hero sur les pages
   vitrine, .lp-section__head sur le blog et la galerie) : les deux sont
   couverts, sinon un titre reste noir sur le tissu. */
.nl-cloth-head .hero__title,
.nl-cloth-head .lp-section__head h1,
.nl-cloth-head .lp-section__head h2 { color: #fff; }

.nl-cloth-head .hero__desc,
.nl-cloth-head .hero__trust,
.nl-cloth-head .hero .text-muted,
.nl-cloth-head .lp-section__head p,
.nl-cloth-head .lp-section__head .text-muted { color: rgba(255, 255, 255, .78) !important; }

.nl-cloth-head .hero__eyebrow,
.nl-cloth-head .eyebrow {
  color: var(--nl-ecru);
  background: rgba(233, 220, 194, .12);
  border-color: rgba(233, 220, 194, .25);
}
.nl-cloth-head .bi-check-circle { color: var(--brand-400); }

/* ── 3. Le panneau d'étoffe ────────────────────────────────────────────────
   Une bande verticale pleine hauteur, à côté d'une carte. C'est le seul
   endroit où le tissu occupe une vraie surface : il n'y a rien à lire dessus. */
/* `:root` porte le sélecteur à 0,2,0 : sans lui, `.auth-shell--split
   .auth-side` du kit (0,2,0 aussi, mais plus spécifique qu'une classe seule)
   garderait son dégradé et le tissu ne s'afficherait jamais. */
:root .nl-cloth-panel {
  background-color: #132a31;
  background-image: url("../motifs/banniere-verticale.f42455ff79bc.webp");
  background-size: cover;
  background-position: center;
  position: relative;
}
/* Le kit pose un lavis radial blanc sur .auth-side, pensé pour son dégradé :
   sur le tissu il le délave. */
.auth-shell--split .auth-side.nl-cloth-panel::before { content: none; }
/* Un léger assombrissement en pied : la signature posée dessus reste lisible
   quel que soit l'endroit du tissu qui tombe là. */
.nl-cloth-panel::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  /* Assez haut et assez dense pour couvrir la note même quand une bande claire
     du tissu tombe pile derrière elle — le cadrage dépend de la fenêtre. */
  height: 60%;
  background: linear-gradient(transparent, rgba(19, 42, 49, .97) 65%);
}

/* Le tissu prend un peu moins que la moitié : c'est le formulaire qui est le
   travail, le tissu n'est que l'accueil.
   IMPÉRATIF de garder ça dans la media query : ce sélecteur pèse 0,2,0 et
   écraserait le `grid-template-columns: 1fr` mobile du kit (0,1,0). Le kit
   passant .auth-side en display:none sous 768 px, la grille n'aurait plus
   qu'un enfant — le formulaire se retrouverait tassé dans la colonne de 45 %,
   l'autre restant vide. */
@media (min-width: 768px) {
  .auth-shell--split:has(.nl-cloth-panel) { grid-template-columns: 45fr 55fr; }
}
.nl-cloth-panel__note {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  padding: 2rem;
  color: #fff;
  font-size: .95rem;
  line-height: 1.5;
}
.nl-cloth-panel__note strong { color: var(--nl-ecru); display: block; margin-bottom: .35rem; }

/* ── 4. Le grain ───────────────────────────────────────────────────────────
   Un carré en filigrane, pour une surface vide (état vide, encart). Assez
   faible pour qu'on le sente sans le voir. */
.nl-cloth-grain {
  position: relative;
  isolation: isolate;
}
.nl-cloth-grain::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--nl-motif, url("../motifs/08-peigne.ddde2db80a09.webp"));
  background-size: 340px auto;
  opacity: .06;
}
[data-bs-theme="dark"] .nl-cloth-grain::before { opacity: .10; }

/* Les sections alternées de la landing portaient un aplat gris. Le filigrane
   les remplace : l'alternance se lit toujours, mais par la matière plutôt que
   par une nuance de gris. Global au tenant public — .lp-section--alt est
   défini dans brand.css, il n'existe pas chez les tenants. */
.lp-section--alt {
  position: relative;
  isolation: isolate;
}
.lp-section--alt::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Motif aéré (croix espacées) et non un tissage plein : en fond de section,
     un motif dense se lit comme du bruit derrière le contenu. */
  background-image: url("../motifs/04-croix.b905495d5374.webp");
  background-size: 340px auto;
  opacity: .07;
}
[data-bs-theme="dark"] .lp-section--alt::before { opacity: .05; }

/* ── 5. La règle tissée ────────────────────────────────────────────────────
   Le séparateur est déjà une bande (ratio 10:1) : il ne se calcule pas en
   rangées comme un carré, il se cadre en `cover`. À poser à une transition
   forte, pas entre chaque section — sinon ce n'est plus une transition. */
.nl-rule {
  height: 5rem;
  background-image: url("../motifs/separateur.0f3950c812d6.webp");
  background-size: cover;
  background-position: center;
  background-color: #132a31;
}
@media (max-width: 767.98px) { .nl-rule { height: 3.5rem; } }

/* Le tissu est décoratif : il ne part pas à l'impression. */
@media print {
  .nl-seam, .nl-cloth-panel { display: none; }
  .nl-cloth-head { background-image: none; color: inherit; }
  .nl-cloth-grain::before { display: none; }
}