/* =========================================================
   BRAND NEW DAY — correctifs accessibilite et integration WordPress

   Complement de bnd-site.css, qui est la transposition fidele de la maquette
   et ne doit pas etre modifie. Ce fichier ne contient que ce que la maquette
   n'avait pas a prevoir : le lien d'evitement exige par le RGAA, le raccord
   entre le balisage de wp_nav_menu et celui de la maquette, et la typographie
   des pages de lecture longue (mentions legales, politique de confidentialite)
   dont la maquette, purement marketing, ne comportait aucun exemple.
   ========================================================= */

/* ---------- lien d'evitement ----------
   Hors ecran tant qu'il n'a pas le focus, visible des qu'il l'obtient.
   position:fixed plutot qu'absolute : le lien reste atteignable meme si
   la page a deja defilé. */
.skip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-200%);
  padding: 14px 22px;
  background: var(--cobalt);
  color: var(--cream);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-bottom-right-radius: var(--r-sm);
}

.skip:focus {
  transform: translateY(0);
}

/* Le lien d'evitement donne le focus a <main tabindex="-1"> : ce focus est
   programmatique, pas un point de tabulation, d'ou l'absence de contour. */
main[tabindex='-1']:focus {
  outline: none;
}

/* ---------- menus WordPress ----------
   La maquette place les <a> directement dans .nav-links et .foot-col ;
   wp_nav_menu les enveloppe dans <ul><li>. display:contents retire le <li>
   du rendu : les selecteurs de bnd-site.css (.nav-links a, .foot-col a)
   continuent de s'appliquer, y compris en version mobile ou .nav-links a
   doit occuper toute la largeur. */
.nav-links li,
.foot-col li {
  display: contents;
}

.nav-links,
.foot-legal {
  list-style: none;
}

/* ---------- carte de contact : sa propre couleur de texte ----------
   La section #contact porte « color: var(--d-tx) », le creme des fonds
   sombres, parce que son fond est cobalt. La carte du formulaire y pose un
   fond CLAIR sans redeclarer la couleur du texte : tout ce qu'elle contient et
   qui n'en fixe pas une herite donc du creme, sur du creme.

   Le titre de confirmation « Brief bien recu. » etait dans ce cas : invisible
   une fois le formulaire envoye, c'est-a-dire au seul moment ou il compte, et
   sur le seul ecran que l'auteur du message voit apres avoir clique.

   La couleur est posee sur la carte plutot que sur ce titre : c'est la carte
   qui renverse le contraste, et le prochain element qu'on y ajoutera sans
   couleur explicite ne reproduira pas le defaut. Les champs, etiquettes et
   boutons declarent deja la leur et ne bougent pas. */
.cform {
  color: var(--ink);
}

/* ---------- selecteur de langue ----------
   La maquette empile deux <button> dans la pastille .lang, et bnd-site.css ne
   decrit donc que « .lang button ». Le theme rend des <a> — a raison : changer
   de langue est une navigation, pas une commande, et un bouton priverait le
   visiteur du clic milieu, de l'ouverture dans un onglet et de l'adresse au
   survol.

   Consequence : AUCUNE de ces trois regles ne mordait. Les deux codes se
   retrouvaient sans marge interieure a l'interieur d'une pastille arrondie qui
   porte overflow:hidden, et l'arrondi mangeait les caracteres — la moitie du
   « FR » manquait. La langue courante n'avait pas davantage de fond.

   Ces regles reprennent donc, pour le <a>, ce que bnd-site.css destinait au
   <button>, sans toucher a la feuille de la maquette. */
.lang a {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  color: var(--ink-3);
  line-height: 1;
  transition: background .15s, color .15s;
}

.lang a.on {
  background: var(--cobalt);
  color: var(--cream);
}

/* La pastille ne se laisse pas comprimer. Dans la barre, elle partage la ligne
   avec le bouton d'appel et le burger : sur un telephone, le manque de place
   la retrecissait, et son overflow:hidden rognait ce qu'elle contient plutot
   que de deborder. C'est ce qui rendait le defaut visible en mobile d'abord. */
.lang {
  flex-shrink: 0;
}

/* ---------- pied de page : la colonne legale ----------
   La maquette dessine quatre pistes — la marque, puis trois colonnes — et
   bnd-site.css les fige. La colonne « Legal » est propre au site : cinquieme
   enfant d'une grille qui n'en attend que quatre, elle retombait a la ligne,
   seule sous le bloc de marque.

   La piste supplementaire n'est posee que lorsque la colonne existe, par une
   classe que footer.php ajoute alors : une grille a cinq pistes pour quatre
   blocs laisserait un vide a droite tant que les pages legales ne sont pas
   publiees. Les deux paliers de bnd-site.css (820 px et 520 px) ramenent
   ensuite a deux colonnes puis a une : ils s'appliquent tels quels, la
   surcharge ne visant que la disposition large. */
/* TOUTES ces regles sont bornees par une largeur minimale, et c est
   indispensable. bnd-a11y.css est chargee APRES bnd-site.css, et
   « .foot-grid-legal » a exactement la meme specificite que « .foot-grid » :
   posee sans borne, elle l emportait sur les paliers de la maquette a toutes
   les largeurs. Le pied gardait donc CINQ colonnes sur un telephone, le
   monogramme recouvrait le titre de la colonne voisine, et chaque liste se
   lisait sur deux caracteres de large.

   Sous 821 px, plus aucune de ces regles ne s applique : les paliers de la
   maquette — deux colonnes a 820 px, une seule a 520 px — reprennent la main
   sans concurrence. */
@media (min-width: 1101px) {
  .foot-grid-legal {
    grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  }
}

@media (min-width: 821px) and (max-width: 1100px) {
  /* Cinq pistes deviennent etroites avant le palier de 820 px de la maquette :
     « La première édition » ou « Politique de confidentialité » s y coupent en
     trois lignes. La marque reprend la largeur entiere, les quatre colonnes se
     partagent le rang suivant. */
  .foot-grid-legal {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .foot-grid-legal .foot-brand {
    grid-column: 1 / -1;
  }
}


/* ---------- le pied du site sur un telephone ----------
   La maquette a ete dessinee pour un ecran large : ses valeurs fixes tiennent
   mal une fois la grille repliee sur une colonne.

   Le logo est le plus visible : « Brand New Day. » est compose a 48 px fixes,
   en 900, avec une approche negative. A 320 px de large il deborde du cadre et
   pousse une barre de defilement horizontale sur toute la page. Il suit
   desormais la largeur.

   Le reste est une affaire de respiration : 76 px de blanc avant le pied et
   60 px avant la ligne de copyright sont justes sur un grand ecran et
   interminables sur un telephone, ou ils obligent a faire defiler du vide. */
@media (max-width: 640px) {
  footer {
    padding-top: 48px;
    padding-bottom: 32px;
  }

  footer .band-top {
    margin-bottom: 36px;
  }

  .foot-brand .big-logo {
    font-size: clamp(34px, 11vw, 48px);
  }

  .foot-grid {
    gap: 36px;
  }

  .foot-bottom {
    margin-top: 40px;
  }
}

/* Sous 520 px la maquette est passee a une colonne. Les titres de colonne y
   deviennent des reperes de lecture plutot que des en-tetes de grille : un
   filet les detache, sans quoi les quatre listes se lisent comme une seule. */
@media (max-width: 520px) {
  .foot-grid > .foot-col + .foot-col {
    border-top: 1px solid var(--d-hair);
    padding-top: 26px;
  }
}

/* ---------- colonne de lecture longue ----------
   .wrap de la maquette vaut 1400px : une largeur pensee pour des grilles de
   cartes, pas pour du texte suivi. Une ligne de mentions legales y ferait
   plus de 200 caracteres, illisible. La mesure est donc ramenee a 74ch, ou
   la ligne reste autour des 65-75 caracteres recommandes.
   min() plutot qu'une valeur fixe : sur un tres petit ecran, --maxw ne doit
   jamais devenir le facteur limitant a la place de la largeur du viewport. */
.wrap.wrap-narrow {
  max-width: min(var(--maxw), 74ch);
}

/* Titre d'une page de lecture longue. h2.sect-title de la maquette monte a
   74px en capitales : demesure pour un titre de page administrative, qui
   n'a pas a crier. Meme famille de reglages, deux crans plus bas. */
.legal-title {
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
  font-size: clamp(30px, 4vw, 52px);
  color: var(--ink);
}

/* ---------- contenu produit par l'editeur ----------
   bnd-site.css commence par `*{margin:0;padding:0}` et `a{text-decoration:
   none}`. Sur du HTML redige dans l'editeur, cela donne des paragraphes
   colles les uns aux autres, des listes sans puce ni retrait et des liens
   indiscernables du texte courant — ce dernier point etant un manquement au
   critere RGAA 10.6, un lien ne devant pas se distinguer par la seule
   couleur. Ces regles ne s'appliquent que dans .prose : la maquette, qui
   compte sur le reset, n'est pas touchee. */
.prose {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
}

.prose > * + * {
  margin-top: 1.15em;
}

.prose h2,
.prose h3,
.prose h4 {
  color: var(--ink);
  font-weight: 800;
  letter-spacing: -0.015em;
  line-height: 1.15;
}

/* Un titre appartient au texte qui le suit, pas a celui qui le precede :
   l'espace au-dessus est donc nettement plus grand que celui en dessous. */
.prose > h2 + *,
.prose > h3 + *,
.prose > h4 + * {
  margin-top: 0.6em;
}

.prose h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  text-transform: uppercase;
}

.prose > * + h2 {
  margin-top: 2em;
}

.prose h3 {
  font-size: clamp(18px, 1.9vw, 22px);
}

.prose > * + h3 {
  margin-top: 1.8em;
}

.prose h4 {
  font-size: 17px;
}

.prose ul,
.prose ol {
  padding-left: 1.4em;
}

.prose ul {
  list-style: disc;
}

.prose ol {
  list-style: decimal;
}

.prose li + li {
  margin-top: 0.4em;
}

.prose li > ul,
.prose li > ol {
  margin-top: 0.4em;
}

.prose strong,
.prose b {
  color: var(--ink);
  font-weight: 700;
}

/* Souligne, et pas seulement colore : la couleur seule ne suffit pas a
   signaler un lien au milieu d'un paragraphe. */
.prose a {
  color: var(--plasma);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prose a:hover {
  text-decoration-thickness: 2px;
}

.prose blockquote {
  border-left: 2px solid var(--plasma);
  padding-left: 18px;
  color: var(--ink);
}

.prose hr {
  border: none;
  border-top: 1px solid var(--hair);
  margin-top: 2em;
}

.prose table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.prose th,
.prose td {
  border: 1px solid var(--hair);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.prose th {
  color: var(--ink);
  font-weight: 700;
}

/* Un tableau plus large que la colonne defile dans son coin plutot que
   d'elargir la page entiere. */
.prose .wp-block-table {
  overflow-x: auto;
}

.prose img {
  border-radius: var(--r-md);
}

/* Date de derniere mise a jour : une note de bas de page, detachee du corps
   par un filet, jamais confondue avec le texte qui fait foi. */
.legal-updated {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--hair);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}

/* ---------- prise de focus dans le formulaire de contact ----------
   La maquette pose `outline:none` sur .cform input/select/textarea et ne
   signale le focus que par une bordure d'un pixel qui passe au plasma et un
   halo a 12 % d'opacite — quasi invisible sur le fond creme de la carte. Le
   critere RGAA 10.7 demande un focus visible ; on remet donc un contour franc,
   mais seulement sur :focus-visible, c'est-a-dire au clavier : le clic a la
   souris garde le rendu de la maquette, halo compris.
   La couleur reste celle de l'accent deja choisi par la maquette pour cet
   etat, au contraste suffisant (environ 3,3:1) sur le fond des champs. */
.cform input:focus-visible,
.cform select:focus-visible,
.cform textarea:focus-visible {
  outline: 2px solid var(--plasma);
  outline-offset: 2px;
}

/* En contraste force, les couleurs de la charte sont ecartees par le systeme
   et le halo disparait completement : on s'en remet au contour systeme. */
@media (forced-colors: active) {
  .cform input:focus-visible,
  .cform select:focus-visible,
  .cform textarea:focus-visible {
    outline: 2px solid CanvasText;
  }
}

/* ---------- mention de confidentialite sous les formulaires ----------
   Une note, pas une condition : elle informe, elle ne se coche pas. Elle en a
   donc la discretion, mais son lien reste souligne — la couleur seule ne
   signale pas un lien (RGAA 10.6), et c'est celui qui doit pouvoir etre
   trouve. */
.cf-privacy {
  margin-top: -4px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
}

.cf-privacy a {
  color: var(--ink-2);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cf-privacy a:hover {
  color: var(--ink);
}

/* ---------- pastille de l'etude de cas sur un telephone ----------
   Elle est calee en haut a gauche du visuel. Sur un grand ecran l'image est
   large et la pastille tombe dans le decor ; repliee sur une colonne, l'image
   occupe toute la largeur, les sujets grandissent d'autant, et la pastille
   vient couvrir un visage.

   Elle passe donc en bas, ou la photographie est la plus calme. Seule celle-ci
   bouge : la pastille du hero est posee sur un tout autre cadrage. */
@media (max-width: 900px) {
  .case-media .c-badge {
    top: auto;
    bottom: 18px;
    left: 18px;
  }
}