/* Pages de service (charte « Seuil ») : FAQ par thèmes, à propos, contact et professionnels (formulaire en panneau,
   coordonnées et engagements à côté), livraison (transporteurs, grille tarifaire), plan du site, page d'erreur.
   Complète editorial.css (en-tête de page, colonne de lecture, texte long, étapes). Jetons seulement.
   Livraison et garanties partagent le gabarit des articles : en-tête et texte alignés sur la même colonne. */

/* ---------- Bloc de récit : titre à gauche, texte à droite au bureau (à propos) ---------- */
.recit {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
}
.recit__bloc {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}
.recit__titre {
  max-width: 16ch;
}
@media (min-width: 64rem) {
  .recit {
    gap: var(--e-9);
  }
  .recit__bloc {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e-8);
  }
}

/* ---------- FAQ : un thème par rangée, titre à gauche ---------- */
.faq-themes {
  display: flex;
  flex-direction: column;
  gap: var(--e-8);
}
.faq-theme {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}
.faq-theme__titre {
  font-size: var(--fs-h3);
}
@media (min-width: 64rem) {
  .faq-themes {
    gap: var(--e-9);
  }
  .faq-theme {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--e-8);
    align-items: start;
  }
  .faq-theme__titre {
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--e-6));
    font-size: var(--fs-h2);
  }
}

/* FAQ d'une page (livraison) : titre et actions à gauche, questions à droite */
.service-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7);
}
.service-faq__tete {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-6);
}
.service-faq__tete h2 {
  max-width: 14ch;
}
@media (min-width: 64rem) {
  .service-faq {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e-8);
    align-items: start;
  }
}

/* Relance de fin de page (section sapin) */
.page-relance {
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.page-relance__texte {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.page-relance__chapo {
  max-width: 48ch;
  color: var(--texte-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}
@media (min-width: 64rem) {
  .page-relance {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--e-8);
  }
  .page-relance .page-actions {
    flex: none;
  }
}

/* ---------- Contact et professionnels : formulaire en panneau, coordonnées à côté ---------- */
.service-colonnes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-8);
}
@media (min-width: 64rem) {
  .service-colonnes {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--e-9);
    align-items: start;
  }
}

.formulaire {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  container-type: inline-size;
}
.formulaire__titre {
  font-size: var(--fs-h3);
}
.formulaire__note,
.formulaire__mention {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.formulaire__ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-5);
}
/* Deux champs par rangée selon la largeur du panneau, pas de l'écran : à 1024 px le panneau est trop étroit
   pour deux intitulés longs (« Adresse e-mail professionnelle ») sur une ligne chacun */
@container (min-width: 34rem) {
  .formulaire__ligne {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--e-4);
  }
}
.formulaire__envoi {
  padding-top: var(--e-2);
}
.champ__zone {
  min-height: calc(var(--hauteur-champ) * 3);
  line-height: 1.5;
  resize: vertical;
}
.champ-piege {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
/* Le champ lui-même ne déborde pas du piège (sinon il élargit la page à 320 px) */
.champ-piege :is(label, input) {
  display: block;
  width: 1px;
  min-width: 0;
  height: 1px;
  padding: 0;
  border: 0;
}

.service-aside {
  display: flex;
  flex-direction: column;
  gap: var(--e-7);
}
.service-aside__bloc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-4);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.service-aside__bloc > p {
  max-width: 44ch;
  color: var(--texte-2);
}
.service-aside__titre {
  font-size: var(--fs-h3);
}
.service-aside__liens {
  display: flex;
  flex-direction: column;
}
@media (min-width: 64rem) {
  .service-aside {
    position: sticky;
    top: calc(var(--hauteur-entete) + var(--e-6));
  }
}

.coordonnees {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
}
.coordonnees li {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: var(--hauteur-compacte);
}
.coordonnees .icone {
  color: var(--texte-2);
}
.coordonnees a {
  font-weight: 500;
}

/* ---------- Professionnels : documents techniques ---------- */
.pro-documents {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-6);
}
.pro-documents__tete {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.pro-documents__intro {
  max-width: 48ch;
  color: var(--texte-2);
}
.pro-documents__attente {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}
.pro-documents__attente p {
  max-width: var(--mesure);
}
.pro-documents__liste {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--trait);
}
.pro-document {
  border-bottom: 1px solid var(--trait);
}
.pro-document__lien {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--e-1) var(--e-4);
  padding-block: var(--e-4);
  text-decoration: none;
}
.pro-document__type {
  grid-column: 1 / -1;
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.pro-document__nom {
  font-family: var(--police-titre);
  font-size: var(--fs-carte);
  line-height: 1.25;
}
.pro-document__taille {
  color: var(--texte-2);
  font-size: var(--fs-petit);
  white-space: nowrap;
}
.pro-document__lien:hover .pro-document__nom {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
@media (min-width: 64rem) {
  .pro-documents {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--e-8);
    align-items: start;
  }
}

/* ---------- Livraison : transporteurs ---------- */
.transporteur {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
}
.transporteur .icone {
  color: var(--texte);
}
.transporteur__titre {
  padding-top: var(--e-2);
}
.transporteur > p:not([class]) {
  color: var(--texte-2);
}
.transporteur__delai {
  margin-top: auto;
  padding-top: var(--e-3);
  border-top: 1px solid var(--trait);
  width: 100%;
  font-size: var(--fs-petit);
  font-weight: 500;
}
.transporteurs.grille {
  row-gap: var(--gap-grille);
}
/* Tablette : deux colonnes, le troisième panneau prend toute la largeur plutôt que de rester orphelin */
@media (min-width: 48rem) and (max-width: 63.99rem) {
  .transporteurs > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* Grille tarifaire : les montants ne se coupent pas, les intitulés de zone passent à la ligne entre les mots.
   Sous 30rem, la ligne s'empile (editorial.css) : « Poids jusqu'à 30 kg », puis chaque zone et son montant. */
.tableau-tarifs td {
  white-space: nowrap;
}
@media (max-width: 29.99rem) {
  .tableau-tarifs.md-table:has(td[data-label]) tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--e-2) var(--e-4);
    text-align: end;
  }
  .tableau-tarifs.md-table:has(td[data-label]) tr > th {
    grid-column: 1 / -1;
    text-align: start;
  }
  .tableau-tarifs.md-table:has(td[data-label]) td {
    display: contents;
  }
  .tableau-tarifs.md-table:has(td[data-label]) td[data-label]::before {
    text-align: start;
    font-size: var(--fs-petit);
    line-height: 1.45;
  }
}

/* ---------- Plan du site ---------- */
.plan {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-8) var(--gap-grille);
}
.plan__bloc {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
  padding-top: var(--e-5);
  border-top: 1px solid var(--trait);
}
.plan__titre {
  font-size: var(--fs-h3);
}
/* « Nos sols » chapeaute les gammes : un cran au-dessus des autres titres, et plus d'air avant les gammes */
.plan__bloc:has(.plan__gammes) {
  gap: var(--e-6);
}
.plan__bloc:has(.plan__gammes) > .plan__titre {
  font-size: var(--fs-h2);
}
.plan__gammes {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-7) var(--gap-grille);
}
.plan__gamme {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.plan__sous-titre {
  font-size: var(--fs-carte);
}
.plan__sous-titre a,
.plan__liste a {
  text-decoration: none;
}
.plan__sous-titre a:hover,
.plan__liste a:hover {
  text-decoration: underline;
}
.plan__petit-titre {
  padding-top: var(--e-2);
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.plan__liste {
  display: flex;
  flex-direction: column;
}
.plan__liste a {
  display: inline-block;
  padding-block: var(--e-1);
  color: var(--texte-2);
}
.plan__liste a:hover {
  color: var(--texte);
}
@media (min-width: 48rem) {
  .plan {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan__bloc--large {
    grid-column: 1 / -1;
  }
  .plan__gammes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .plan__bloc--large:not(:has(.plan__gammes)) .plan__liste {
    display: block;
    columns: 2;
    column-gap: var(--gap-grille);
  }
}
@media (min-width: 64rem) {
  .plan {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .plan__gammes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .plan__bloc--large:not(:has(.plan__gammes)) .plan__liste {
    columns: 3;
  }
}

/* ---------- Page d'erreur (404, 500) ---------- */
.page-erreur__grille {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--e-8);
}
.page-erreur__texte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-5);
}
.page-erreur__titre {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
}
.page-erreur__code {
  color: var(--texte-2);
  font-size: var(--fs-petit);
}
.page-erreur__chapo {
  max-width: 48ch;
  color: var(--texte-2);
  font-size: var(--fs-chapo);
  line-height: 1.55;
}
.page-erreur__recherche {
  width: 100%;
  max-width: 36rem;
}
/* Dans ce panneau étroit, le champ prend toute la ligne (texte indicatif lisible) et le bouton passe dessous */
.page-erreur__recherche .champ-groupe .champ__saisie {
  flex-basis: 100%;
}
.page-erreur__liens {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}
.page-erreur__liens-titre {
  font-family: var(--police-texte);
  font-size: var(--fs-petit);
  font-weight: 600;
  color: var(--texte-2);
}
.page-erreur__liens ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--trait);
}
.page-erreur__liens li {
  border-bottom: 1px solid var(--trait);
}
.page-erreur__liens a {
  display: flex;
  align-items: center;
  min-height: var(--hauteur-champ);
  padding-block: var(--e-3);
  font-family: var(--police-titre);
  font-size: var(--fs-h3);
  line-height: 1.2;
  text-decoration: none;
}
.page-erreur__liens a:hover {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
@media (min-width: 64rem) {
  .page-erreur__grille {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: var(--e-9);
    align-items: end;
  }
}