/* =========================================================
   DESIGNER BY NATURE — 8. POURQUOI DESIGNER BY NATURE
   Surface ivoire, entre le processus (noire) et le journal (blanc).

   CE QUI NE MARCHAIT PAS
   Quatre paragraphes empilés, séparés par des filets pleine largeur :
   une liste de conditions générales, pas une section. Rien n'y avait de
   poids, rien n'y attirait l'œil, et sur une surface claire sans image
   l'ensemble se lisait comme un mur de texte.

   CE QUI LE REMPLACE
   Un signe par promesse — un tracé au trait, dans la langue graphique
   déjà employée par le plan de la section À propos — et une grille en
   croix : deux colonnes, deux rangées, séparées par des filets qui se
   croisent au centre. La croix donne une structure lisible d'un coup
   d'œil, là où quatre traits parallèles ne donnaient qu'une pile.

   AUCUNE NUMÉROTATION
   Ce ne sont pas des étapes : elles se lisent dans n'importe quel ordre,
   et le site a déjà une séquence numérotée juste au-dessus.
   ========================================================= */

.promesses {
  position: relative;
  background-color: var(--surface);
  color: var(--fg);
}

/* ---------- EN-TÊTE ---------- */

.promesses__entete { margin-bottom: var(--sp-bloc); }

/* Le label est passé sous le titre, comme dans Projets : c'est une
   marge haute qu'il lui faut, plus une marge basse. */
.promesses__entete .label { margin-top: var(--sp-4); }

/* Masques de mots créés par `decouperMots`. */
.promesses__titre .mot {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-block: .16em;
  margin-block: -.16em;
}

.promesses__titre .mot__i { display: inline-block; }

/* LE SAUT DE LIGNE COMPOSÉ À LA MAIN NE VAUT QUE S'IL TIENT
   « L'EXCELLENCE AU SERVICE » mesure 450 px au plus petit corps du titre,
   pour 332 disponibles à 375 px d'écran : la première ligne se repliait
   quand même, et « SERVICE » restait seul au milieu du titre. Sous
   768 px, le saut est donc retiré et le navigateur choisit lui-même la
   coupe — « L'EXCELLENCE / AU SERVICE DE / VOTRE VISION », trois lignes
   sans mot orphelin. Au-dessus, la composition à la main reprend. */
@media (max-width: 47.99rem) {
  .promesses__titre br { display: none; }
}

/* ---------- LA GRILLE EN CROIX ---------- */

.promesses__liste {
  display: grid;
  gap: 0;
  list-style: none;
}

.promesse {
  position: relative;
  padding-block: var(--sp-7);
}

/* Le filet est porté en haut de chaque promesse : la première en a donc
   un aussi, et la série se lit comme une portée. Posé en bas, le dernier
   trait traînerait dans le vide sous la quatrième. */
.promesse::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--trait);
  background-color: var(--rule);
}

/* ---------- LE SIGNE ---------- */
/* Tracé au trait, jamais rempli : c'est la même écriture que le plan
   d'architecture de la section À propos. Le doré le pose comme un détail
   et non comme une icône d'interface. */

.promesse__signe {
  display: block;
  /* Quarante-quatre pixels ne suffisaient pas : à cette taille un tracé
     d'un pixel et demi se lit comme une rayure, pas comme un dessin.
     Soixante lui donnent assez de place pour qu'on reconnaisse l'arche,
     le module, les strates et le recouvrement. */
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: var(--sp-5);
  color: var(--accent-deco);
}

.promesse__signe svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Les tracés sont dessinés dans une boîte de 64 : la graisse suit donc
     la taille rendue, sans devenir un trait de crayon en petit. */
  vector-effect: non-scaling-stroke;
  transition: transform var(--dur-moyen) var(--ease-sortie);
}

.promesse:hover .promesse__signe svg { transform: translateY(-.1875rem); }

/* ---------- TEXTE ---------- */

.promesse__titre {
  font-family: var(--display);
  font-size: var(--fs-h4);
  font-weight: 400;
  letter-spacing: .01em;
  line-height: var(--lh-tight);
  color: var(--fg);
  max-width: 18ch;
}

.promesse__texte {
  margin-top: var(--sp-4);
  max-width: 40ch;
  font-size: var(--fs-small);
  line-height: var(--lh-lisible);
  color: var(--muted);
}

/* ---------- À PARTIR DE 768 PX : LA CROIX ---------- */

@media (min-width: 48rem) {
  .promesses__liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gouttiere);
  }

  /* Le filet vertical de la croix. Il est porté par la colonne de droite
     et tracé dans la gouttière, à mi-distance : posé sur un bord, il
     aurait collé au texte de l'une des deux colonnes. */
  .promesse:nth-child(even)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gouttiere) / -2);
    width: var(--trait);
    background-color: var(--rule);
  }

  /* Les deux promesses d'une même rangée partagent leur filet haut : sans
     cela, deux traits se dessineraient l'un à côté de l'autre avec la
     gouttière entre eux, et la croix ne se refermerait pas. Le filet de
     la colonne de droite est donc étiré jusque dans la gouttière. */
  .promesse:nth-child(even)::before {
    left: calc(var(--gouttiere) / -1);
  }
}

/* ---------- À PARTIR DE 1024 PX ---------- */

/* UNE PISTE ÉCARTÉE : LE TITRE EN COLONNE COLLANTE
   Le titre a d'abord été posé à gauche, en position collante, face aux
   quatre promesses — une composition qui se lit comme une réponse à la
   question qu'elle pose. Elle a été abandonnée pour une raison mesurable :
   la colonne ne faisait plus que 542 px, et « L'EXCELLENCE AU SERVICE »
   en réclame 643 au corps des titres de section. Il aurait fallu
   descendre le titre à 32 px — la taille des titres de promesse à deux
   points près. La hiérarchie de la section y perdait plus que la
   composition n'y gagnait.

   Le titre reprend donc toute la largeur, et la croix aussi : les filets
   courent d'un bord à l'autre de la page, ce qu'ils ne pouvaient pas
   faire enfermés dans une demi-largeur. */

@media (min-width: 64rem) {
  /* LES QUATRE SUR UNE SEULE LIGNE
     La croix en deux rangées demandait deux temps de lecture. Sur une
     ligne, les quatre promesses se comparent d'un seul regard — c'est
     bien ce qu'on attend d'une réponse à « pourquoi nous ». Les filets
     verticaux les séparent alors comme les colonnes d'un tableau, et un
     seul filet horizontal les coiffe toutes. */
  .promesses__liste {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--gouttiere);
  }

  .promesse { padding-block: var(--sp-8); }

  /* Chaque colonne sauf la première porte son filet vertical, tracé au
     milieu de la gouttière. La règle de la croix, qui ne visait que les
     rangs pairs, ne vaut plus : elle est neutralisée puis reposée sur
     tout ce qui n'est pas premier. */
  .promesse::after { content: none; }

  .promesse:not(:first-child)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gouttiere) / -2);
    width: var(--trait);
    background-color: var(--rule);
  }

  /* Le filet haut redevient continu d'un bout à l'autre : chaque colonne
     étire le sien jusque dans la gouttière qui la précède. */
  .promesse:not(:first-child)::before {
    left: calc(var(--gouttiere) / -1);
  }

  /* Une colonne sur quatre fait environ 305 px : le titre y tient sur
     deux lignes, le texte sur cinq. Les bornes en caractères, calées sur
     des colonnes deux fois plus larges, les auraient laissés flotter. */
  .promesse__titre {
    max-width: none;
    /* Trois titres sur quatre tiennent sur deux lignes, le premier sur
       une seule : les textes ne démarraient donc pas à la même hauteur
       et la rangée paraissait dentelée. Deux lignes réservées d'office
       les alignent, sans avoir à raccourcir un intitulé de la
       plaquette. */
    min-height: calc(2em * var(--lh-titre));
  }

  .promesse__texte { max-width: none; }

  /* Le signe reprend la taille qu'il avait avant l'agrandissement : dans
     une colonne étroite, soixante pixels prenaient le pas sur le titre
     qu'ils annoncent. */
  .promesse__signe {
    width: 3rem;
    height: 3rem;
    margin-bottom: var(--sp-4);
  }
}