/* NIDUM · trame commune des pages (revue de maquette avec Christophe,
   enregistrement 38 du 07/10)

   Une seule règle de départ : le cadre bleu de tête de page donne les deux
   lignes du site, à gauche et à droite. « Pour moi, on peut pas sur le reste
   de la page dépasser. Ça c'est la base. » Tout ce qui suit s'aligne dessus.

   Et une règle de suite : « à partir du moment où on décide d'un traitement
   dans une rubrique, faut qu'on la suive », d'où un seul titre de page, un
   seul bandeau, une seule taille par niveau de titre sur toutes les pages.

   Chargé après nidum-texte.css : à spécificité égale, ces règles l'emportent
   sur les styles de chaque page. Pour faire évoluer la trame, c'est ici. */

:root {
  /* marge intérieure du cadre bleu, reprise par le titre qui le surmonte */
  --bandeau-x: clamp(22px, 4.4vw, 64px);
  /* marge haute et basse du cadre bleu */
  --bandeau-y: clamp(24px, 2.6vw, 36px);
}

/* ═══ 1. Tête de page : titre puis cadre bleu, le logo à droite ═══
   Le titre reste centré (Oliver, 07/10), dans la marge intérieure du cadre :
   il s'arrête là où commence le texte du cadre et finit le logo. Il était en
   56 px, jugé trop gros par Christophe. */
.titre-page {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.08;
}

.ag-titre,
.mt-titre,
.pr-titre {
  text-align: center;
  padding-inline: var(--bandeau-x);
}

/* Le cadre bleu de la page Agence, devenu celui des trois pages : texte à
   gauche, logo blanc à droite (sur téléphone, le logo passe au-dessus).
   Mêmes marges, même logo et même texte sur les trois pages, mais chaque
   cadre prend la hauteur de son texte (Oliver, 07/10 : une hauteur commune
   laissait de grands vides autour des textes courts). Côte à côte dès 700 px.
   Le logo est plus grand que le texte sans grandir le cadre : il mord sur la
   marge haute et basse (45 % de chacune), et sa largeur est calculée pour
   que ce débord compense exactement sa taille en plus (Oliver, 07/10). */
.ag-bandeau {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  margin-top: clamp(20px, 2.6vw, 36px);
  background: var(--teal-p);
  color: #fff;
  border-radius: 8px;
  padding: var(--bandeau-y) var(--bandeau-x);
}

.ag-bandeau-logo {
  order: -1;
  justify-self: center;
  width: clamp(120px, 32vw, 150px);
}

@media (min-width: 700px) {
  .ag-bandeau {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(32px, 4vw, 64px);
  }

  .ag-bandeau-logo {
    order: 0;
    /* 120 à 130 px de large pour la place qu'il prend dans le cadre, plus
       le débord (2 × 45 % de la marge, ramené en largeur par le ratio du
       logo, 800 × 603) */
    width: calc(clamp(120px, 10vw, 130px) + var(--bandeau-y) * 1.194);
    margin-block: calc(var(--bandeau-y) * -.45);
  }
}

/* même taille que le texte courant des pages (15 px), pour que le cadre ne
   paraisse pas écrit plus petit que ce qui suit (Oliver, 08/10 ; 14 px
   auparavant) */
.ag-bandeau-texte p {
  font-size: 15px;
  line-height: 1.8;
}

.ag-bandeau-texte p + p {
  margin-top: 14px;
}

.ag-bandeau strong {
  font-weight: 600;
}

/* ═══ 2. Une taille par niveau de titre ═══
   « Un empilement par moment de titres… plein de tailles différentes. »
   Titres de rubrique : la taille de Notre métier et Prestations, reprise sur
   Agence (38 px auparavant). Sous-titres : une seule taille, des noms des
   associés aux cartes de la frise. */
.ag-engagements .titre,
.ag-metiers .titre,
.mt-h2,
.pr-h2 {
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -.03em;
  line-height: 1.16;
}

.ag-portrait h3,
.ag-eng h3,
.ag-metiers-texte h3,
.etape .carte h3,
.pr-type h3,
.syna-corps h3 {
  font-size: clamp(18px, 1.7vw, 21px);
  letter-spacing: -.02em;
  line-height: 1.25;
}

/* ═══ 3. Les rectangles texte + photo ═══
   « Comme on a pas des cadres, il faut qu'on se trouve des alignements. »
   La photo prend la hauteur exacte du bloc de texte voisin, titre compris,
   et va jusqu'à la ligne du cadre : texte et photo ferment un rectangle.
   L'image est recadrée (object-fit), jamais déformée. Sur téléphone, une
   seule colonne : les photos gardent leurs proportions d'origine. */

/* Agence · les deux associés : sur toute la largeur du cadre, mais leurs
   portraits gardent leurs proportions d'origine (Oliver, 07/10 : on aligne,
   mais pas au prix de rogner les visages). Le texte, plus court que la photo,
   se rapproche du centre : en bas de la photo pour Christophe, en haut pour
   Gabriel. Les deux textes s'enchaînent sans le blanc qui les séparait.
   Sous le texte de Gabriel, le bouton « Parler de mon projet » descend
   jusqu'au bas de sa photo : il comble le vide avant « Notre engagement » et
   ferme le rectangle (Oliver, 07/10). */
@media (min-width: 760px) {
  .ag-portrait > div {
    align-self: end;
  }

  .ag-portrait.inverse > div {
    align-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .ag-portrait.inverse .ag-portrait-cta {
    margin-top: auto;
    padding-top: 22px;
  }
}

/* Agence · compétences : la photo descend jusqu'au bas du texte, le bouton
   prend sa largeur (« comme un petit bandeau qui cadre la photo »), le plan
   reste posé dans la photo au lieu d'en déborder. */
@media (min-width: 940px) {
  .ag-metiers-grille {
    align-items: stretch;
  }

  .ag-visuel {
    max-width: none;
    justify-self: stretch;
    display: flex;
    flex-direction: column;
  }

  .ag-photo {
    flex: 1 1 0;
    min-height: 300px;
    aspect-ratio: auto;
  }

  .ag-plan {
    left: clamp(12px, 1.4vw, 18px);
  }

  .ag-visuel-cta {
    margin-top: 14px;
  }

  .ag-visuel-cta .btn {
    display: flex;
    width: 100%;
    justify-content: center;
  }
}

/* Notre métier · les trois rangées texte + photo */
@media (min-width: 900px) {
  .mt-rangee-grille {
    align-items: stretch;
  }

  .mt-photo {
    position: relative;
    min-height: 180px;
  }

  .mt-photo img,
  .mt-photo.haute img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .mt-photo.haute {
    max-width: none;
    justify-self: stretch;
  }
}

/* Agence · « Notre engagement » : trois rangées photo + texte en alternance
   (retour client du 08/10, les cartes faisaient « triste et fade »). Même
   règle que Notre métier : la photo prend la hauteur du texte voisin, avec
   un minimum pour rester lisible ; un texte plus court se centre en face. */
@media (min-width: 760px) {
  .ag-eng {
    align-items: stretch;
  }

  .ag-eng > div {
    align-self: center;
  }

  .ag-eng-photo {
    position: relative;
    min-height: 260px;
  }

  .ag-eng-photo img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }
}

/* le haut du texte tombe sur le haut de la photo : pas de marge au-dessus du
   premier élément (l'étiquette « Un exemple concret » en héritait 14 px) */
.mt-texte > :first-child {
  margin-top: 0;
}

/* Notre métier · l'exemple Gigognes, son plan posé dans la photo */
@media (min-width: 940px) {
  .mt-exemple-grille {
    align-items: stretch;
  }

  .mt-exemple-visuel {
    min-height: 300px;
  }

  .mt-exemple-photo {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  .mt-exemple-plan {
    left: clamp(12px, 1.4vw, 18px);
    bottom: clamp(12px, 1.4vw, 18px);
  }
}

/* Notre métier · « Voir le projet » prend la largeur du texte et de l'avis,
   comme « Voir nos réalisations » sous la photo d'Agence (Oliver, 07/10) */
.mt-exemple .mt-texte > .btn {
  display: flex;
  width: 100%;
  justify-content: center;
}

/* ═══ 4. Un seul appel au contact par page, discret ═══
   Les blocs centrés de fin de page (« Vous partagez notre vision… »,
   « Une question sur votre projet ? », « Mission complète ou partielle… »)
   sont retirés (Oliver, 07/10 ; Christophe : « comme un cheveu sur la
   soupe »). Il reste un bouton « Parler de mon projet » glissé dans le
   déroulé : sous Gabriel sur Agence, à côté du titre « Quel projet
   envisagez-vous ? » sur Prestations. Celui de fin de FAQ sur Notre métier
   est retiré (Oliver, 07/10). Le bouton du haut de page reste le contact
   permanent. */
.appel-discret {
  margin-top: 22px;
}

/* Prestations : le titre et son chapeau à gauche, le bouton à droite, à la
   hauteur du titre ; sur téléphone, le bouton passe sous le chapeau */
.pr-types-tete {
  max-width: none;
}

@media (min-width: 700px) {
  .pr-types-tete {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 32px;
    align-items: center;
  }

  .pr-types-tete > :not(.pr-types-cta) {
    grid-column: 1;
  }

  .pr-types-cta {
    grid-column: 2;
    grid-row: 1;
    margin-top: 0;
  }
}

/* ═══ 5. Les titres raccrochés à leur rubrique ═══
   « Notre engagement » flottait entre la photo de Gabriel et la première
   carte : il se colle aux cartes qu'il annonce. Et l'écart entre Gabriel et
   « Notre engagement » est resserré (164 px auparavant en grand écran) pour
   que les deux rubriques s'enchaînent (Oliver, 07/10). */
.ag-eng-tete {
  margin-bottom: clamp(14px, 1.6vw, 20px);
}

.ag-equipe {
  padding-bottom: clamp(36px, 4vw, 56px);
}

.ag-engagements {
  padding-top: clamp(36px, 4vw, 56px);
}

/* ═══ 6. Prestations : la frise ═══
   L'en-tête du déroulé (titre, sélecteur) reste centré, dans l'axe de
   l'animation (Oliver, 07/10). Le texte des cartes, lui, est aligné à gauche
   et justifié (Christophe : « faut pas que les textes… soit centré »). */
.etape .carte {
  text-align: left;
}