/* tokens.css */
/* Charte Ottoparts : polices, couleurs. Les points de rupture sont 1366, 1200, 1024, 880 et 767 px. */

/* Satoshi et Clash Display, Indian Type Foundry, téléchargées sur Fontshare. Voir /fonts/PROVENANCE.md. */
@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Medium.woff2") format("woff2");
  font-weight: 400 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src: url("/fonts/Satoshi-Bold.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Clash Display";
  src: url("/fonts/ClashDisplay-Semibold.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --primary: #f02801;
  --primary-hover: #f33700;
  --accent: #1e1e1e;
  --text: #595959;
  --text-light: #929292;
  --border: #e8e8e8;
  --lighter: #f4f4f4;
  --link: #464feb;
  --white: #fff;
  --black: #000;

  --font-text: "Satoshi", sans-serif;
  --font-heading: "Clash Display", sans-serif;

  /* Marge sous un bloc de texte, et sous un titre (en proportion de sa taille). */
  --block-gap: 22.652px;
  --heading-gap: 0.5408em;

  --container: 1290px;
  --gutter: 30px;
}

/* base.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.625;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 var(--heading-gap);
  color: var(--accent);
  font-family: var(--font-heading);
  font-weight: 600;
}

/* Interlignes sans unité, comme le thème : un titre réduit par une page garde une hauteur proportionnée. */
h1 { font-size: 64px; line-height: 1; }
h2 { font-size: 52px; line-height: 1.0384615385; }
h3 { font-size: 42px; line-height: 1.0476190476; }
h4 { font-size: 30px; line-height: 1.1333333333; }
h5 { font-size: 24px; line-height: 1.1666666667; }
h6 { font-size: 20px; line-height: 1.2; }

p {
  margin: 0 0 1.41575em;
}

a {
  color: var(--link);
  text-decoration: none;
  transition: color 0.3s;
}

a:hover,
a:focus-visible {
  color: var(--primary);
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: middle;
}

strong,
b {
  font-weight: 600;
}

ul,
ol {
  margin: 0 0 1.41575em 3em;
  padding: 0;
}

/* Champs de formulaire : la typographie que le thème leur donne. */
button,
input,
select,
textarea {
  margin: 0;
  color: inherit;
  font: inherit;
}

button,
input,
textarea {
  color: var(--text);
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.625;
}

select {
  max-width: 100%;
  color: initial;
  font-family: var(--font-text);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="search"],
textarea {
  font-weight: 400;
}

/* Boutons, listes déroulantes, exposants : les règles du thème, reprises telles quelles. */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  display: inline-block;
  padding: 20px 30px;
  border: none;
  border-radius: 0;
  background-color: var(--accent);
  color: #fff;
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1.6666666667;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  -webkit-appearance: none;
}

select:not([size]):not([multiple]) {
  width: 100%;
  max-width: 100%;
  border: 1px solid var(--border);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3e%3cpath d='M45.656 5.656l-22.828 22.828-22.828-22.828 5.656-5.656 17.172 17.172 17.172-17.172 5.656 5.656z'/%3e%3c/svg%3e");
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-size: 8px 8px;
  color: var(--text);
  appearance: none;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

.icon {
  display: block;
  flex: none;
}

/* Bloc centré, large de 1290 px au plus, à 30 px des bords (15 px sur mobile). */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10000;
  padding: 10px 18px;
  background: var(--accent);
  color: var(--white);
}

.skip-link:focus {
  top: 16px;
  color: var(--white);
}

/* Zone de contenu : colonne principale et sidebar de 300 px. */
.site-content {
  margin: 60px 0 40px;
}

/* Empêche la marge du dernier bloc de se fondre dans celle de la zone. */
.site-content::after {
  content: "";
  display: table;
}

.content-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  column-gap: 60px;
  align-items: start;
}

.content-grid--full {
  grid-template-columns: minmax(0, 1fr);
}

.content-main,
.content-side {
  margin-bottom: 25.888px;
}

.page-body {
  min-height: 200px;
}

.error-page {
  padding: 40px 0 60px;
  text-align: center;
}

.error-page__code {
  margin: 0 0 20px;
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 160px;
  font-weight: 600;
  line-height: 1;
}

.error-page h2 {
  font-size: 42px;
  line-height: 44px;
}

.button {
  display: inline-block;
  padding: 16px 36px;
  border: 0;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 22px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s;
}

.button:hover,
.button:focus-visible {
  background: var(--accent);
  color: var(--white);
}

@media (max-width: 1023px) {
  /* Sans sidebar, la colonne redevient un bloc ordinaire : la marge de son dernier élément déborde sous elle. */
  .content-grid {
    display: block;
  }

  .content-side {
    display: none;
  }
}

@media (max-width: 768px) {
  .container--content {
    padding-inline: 20px;
  }
}

@media (max-width: 767px) {
  :root {
    --gutter: 15px;
  }

  .container--content {
    padding-inline: 20px;
  }

  .site-content {
    margin: 40px 0;
  }

  .error-page__code {
    font-size: 110px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* header.css */
.site-header {
  position: relative;
  z-index: 99;
}

/* Barre du haut : logo, téléphone, horaires. Masquée sous 1025 px. */
.topbar__inner {
  display: flex;
}

.topbar__brand {
  display: flex;
  align-items: center;
  width: 58%;
}

.topbar__logo {
  display: block;
}

.topbar__logo img {
  display: block;
  width: 300px;
  height: 52px;
}

.topbar__infos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 42%;
  padding: 24px 0 24px 60px;
  border-left: 1px solid var(--border);
}

.info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.info__icon {
  color: var(--primary);
}

.info__label {
  display: block;
  color: var(--text-light);
  font-size: 16px;
  line-height: 16.76px;
}

.info__value {
  display: block;
  color: var(--primary);
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 26px;
  white-space: pre;
}

/* Barre noire du menu. */
.navbar {
  background: var(--black);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);
}

.navbar__inner {
  display: flex;
  align-items: center;
}

.main-nav {
  padding-left: 26px;
  border-left: 1px solid #222;
}

.main-nav ul {
  display: flex;
  gap: 4.5px;
  margin: 0 0 0 -24px;
  padding: 0;
  list-style: none;
}

.main-nav a {
  display: block;
  padding: 21px 32px;
  border-right: 1px solid #222;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 22.75px;
  text-transform: uppercase;
  white-space: nowrap;
}

.main-nav a:hover,
.main-nav a:focus-visible {
  color: var(--primary);
}

.burger {
  display: none;
  flex-direction: column;
  width: 25px;
  height: 18px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.burger__bar {
  display: block;
  flex: none;
  width: 25px;
  height: 2px;
  margin-bottom: 6px;
  background: var(--white);
  transition: all 0.3s;
}

.burger__bar:nth-child(2) {
  width: 13px;
}

.burger__bar:nth-child(3) {
  margin-bottom: 0;
}

.burger:hover .burger__bar:nth-child(2) {
  width: 25px;
}

@media (max-width: 1366px) {
  .topbar__infos {
    padding: 15px 0 15px 30px;
  }
}

@media (max-width: 1200px) {
  /* Les icônes disparaissent, leur espace de 10 px reste. */
  .info {
    gap: 0;
    padding-left: 10px;
  }

  .info__icon {
    display: none;
  }

  .main-nav a {
    padding: 20px;
  }
}

@media (max-width: 1024px) {
  .topbar,
  .main-nav {
    display: none;
  }

  .burger {
    display: flex;
  }

  .navbar .container {
    padding-inline: 30px 0;
  }
}

@media (max-width: 767px) {
  .navbar .container {
    padding: 10px 15px;
  }
}

/* mobile-nav.css */
/* Menu mobile : panneau latéral qui glisse depuis la gauche, et voile sombre sur la page. */
.mobile-nav {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  width: 330px;
  max-width: calc(100% - 60px);
  overflow: hidden auto;
  background: var(--white);
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.25s, visibility 0s 0.25s;
}

.mobile-nav.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform 0.25s, visibility 0s;
}

.mobile-nav__close {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 99;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}

.mobile-nav__close:hover {
  color: var(--primary);
}

.mobile-nav__head {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 30px;
  background: #f7f7f7;
}

.mobile-nav__title {
  position: relative;
  padding: 20px 0;
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.mobile-nav__title::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--primary);
}

.mobile-nav ul {
  margin: 0;
  padding: 0 30px;
  list-style: none;
}

.mobile-nav li a {
  display: block;
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
  color: var(--accent);
  font-size: 14px;
  line-height: 22.75px;
}

.mobile-nav li:last-child a {
  border-bottom: 0;
}

.mobile-nav li a:hover {
  color: var(--primary);
}

.mobile-nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 997;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s, visibility 0s 0.25s;
}

.mobile-nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.25s, visibility 0s;
}

body.has-mobile-nav {
  overflow: hidden;
}

/* banner.css */
/* Bandeau gris des pages intérieures, avec son titre et son encoche blanche en bas à gauche. */
.banner {
  position: relative;
  background: #999;
  overflow: hidden;
}

.banner__inner {
  padding-top: 70px;
}

.banner__title {
  margin: 0 0 var(--heading-gap);
  color: var(--white);
  font-size: 64px;
  line-height: 64px;
}

/* Espace entre le titre et l'encoche. Sans titre, le bandeau garde cet espace. */
.banner__gap {
  height: 37px;
}

.banner__notch {
  position: relative;
  width: 50px;
  height: 32px;
}

/* Le blanc se prolonge jusqu'au bord gauche de l'écran. */
.banner__notch::before {
  content: "";
  position: absolute;
  inset: 0 100% 0 auto;
  width: 100vw;
  background: var(--white);
}

.banner__notch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--white);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 100%, 0 100%);
}

@media (max-width: 1024px) {
  .banner__title {
    font-size: 52px;
    line-height: 52px;
  }
}

@media (max-width: 767px) {
  .banner__title {
    font-size: 42px;
    line-height: 42px;
  }
}

/* carousel.css */
/*
  Carrousel de l'accueil. Les slides sont empilées ; la slide active passe en fondu, et son image
  grossit lentement. Les textes ne sont pas animés.

  La taille du titre suit la largeur de l'écran par paliers, comme sur le site d'origine :
  64 px à 1350 px de large, puis à nouveau 64 px à 1024, 60 px à 778 et 52 px à 480.
*/
.carousel {
  --slide-height: 800px;
  --title-size: 64px;
  --title-leading: 1;
  --text-gap: 17px;
  --text-tail: 40px;

  position: relative;
  height: var(--slide-height);
  overflow: hidden;
  background: var(--accent);
}

.carousel__slide {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out, visibility 0s 1s;
}

.carousel__slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease-in-out, visibility 0s;
}

.carousel__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1);
}

/* Le zoom dure plus longtemps que l'affichage : l'image bouge encore pendant le fondu de sortie. */
.carousel__slide.is-active .carousel__image,
.carousel__slide.is-leaving .carousel__image {
  animation: carousel-zoom 11s linear forwards;
}

@keyframes carousel-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

.carousel__text {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 75px;
  text-align: center;
}

.carousel__subtitle {
  margin: 0 0 var(--text-gap);
  color: var(--primary);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 18px;
  text-transform: uppercase;
}

.carousel__title {
  margin: 0 0 var(--text-tail);
  color: var(--white);
  font-family: Arial, Helvetica, sans-serif;
  font-size: var(--title-size);
  font-weight: 600;
  line-height: var(--title-leading);
  text-transform: uppercase;
  white-space: pre-line;
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 95px;
  height: 50px;
  margin-top: -25px;
  padding: 0;
  border: 0;
  background: var(--accent);
  color: var(--white);
  cursor: pointer;
  transition: background-color 0.3s;
}

.carousel__arrow:hover,
.carousel__arrow:focus-visible {
  background: #ff3a2d;
}

.carousel__arrow--previous { left: 80px; }
.carousel__arrow--next { right: 80px; }

@media (max-width: 1349px) {
  .carousel { --title-size: calc(64 * 100vw / 1350); }
}

@media (max-width: 1023px) {
  .carousel {
    --slide-height: 700px;
    --title-size: calc(64 * 100vw / 1024);
    --title-leading: 1.0625;
  }

  .carousel__arrow { display: none; }
}

@media (max-width: 777px) {
  .carousel {
    --slide-height: 600px;
    --title-size: calc(60 * 100vw / 778);
    --title-leading: 1;
    --text-gap: 5px;
    --text-tail: 28px;
  }

  .carousel__text { padding: 0 15px; }
}

@media (max-width: 479px) {
  .carousel {
    --slide-height: 550px;
    --title-size: calc(52 * 100vw / 480);
  }
}

@media (prefers-reduced-motion: reduce) {
  .carousel__slide.is-active .carousel__image,
  .carousel__slide.is-leaving .carousel__image {
    animation: none;
  }
}

/* blog.css */
/* Liste des articles. */
.post-card {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid var(--border);
}

.post-card:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.post-card__title {
  margin: 0 0 var(--heading-gap);
  font-size: 30px;
  line-height: 34px;
}

.post-card__title a:hover,
.post-card__title a:focus-visible {
  color: var(--primary);
}

.post-card__excerpt {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Ligne catégorie, auteur, date. */
.post-meta {
  display: flex;
  flex-wrap: wrap;
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
  color: var(--text-light);
  font-size: 12px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
}

/* L'espace entre deux éléments vaut une espace du texte, comme sur le site d'origine. */
.post-meta li:not(:last-child) {
  margin-right: 3.25px;
}

.post-meta li:not(:last-child)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px;
  background: var(--text-light);
}

.post-meta a {
  color: inherit;
}

.post-meta a:hover,
.post-meta a:focus-visible {
  color: var(--accent);
}

.post-meta__category a {
  color: var(--primary);
}

.empty-list h2 {
  font-size: 42px;
  line-height: 44px;
}

/* Pagination. */
.pagination {
  margin: 50px 0 60px;
  padding-top: 60px;
  border-top: 1px solid var(--border);
}

.pagination ul {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination li {
  margin-right: 20px;
}

.pagination a,
.pagination span {
  display: inline-block;
  min-width: 12px;
  color: var(--text-light);
  text-align: center;
  text-transform: uppercase;
}

.pagination a:hover,
.pagination a:focus-visible,
.pagination [aria-current] {
  color: var(--accent);
}

.pagination__arrow {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 30px;
}

/* Sidebar. */
.widget {
  margin-bottom: 50px;
}

.widget__title {
  margin: 0 0 25px;
  padding-top: 21px;
  border-top: 4px solid var(--accent);
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 22.5px;
}

.search-form {
  position: relative;
}

.search-form__field {
  display: block;
  width: 100%;
  height: 60px;
  padding: 16px 55px 16px 35px;
  border: 1px solid var(--lighter);
  border-radius: 0;
  background: var(--lighter);
  color: var(--text);
  font-weight: 400;
  line-height: 26px;
  outline: 0;
  transition: all 0.3s;
  -webkit-appearance: none;
  appearance: none;
}

.search-form__field::placeholder {
  color: var(--text);
  opacity: 1;
}

.search-form__field:focus {
  border-color: var(--accent);
}

.search-form__submit {
  position: absolute;
  inset: 0 0 0 auto;
  display: flex;
  align-items: center;
  width: 55px;
  padding: 0 0 0 15px;
  border: 0;
  background: none;
  color: var(--accent);
  cursor: pointer;
}

.search-form__submit:hover {
  color: var(--primary);
}

.recent-posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.recent-posts li {
  display: flex;
  flex-direction: column;
  margin-bottom: 25px;
}

.recent-posts__date {
  margin-bottom: 5px;
  color: var(--text-light);
  font-size: 12px;
  font-weight: 700;
  line-height: 19.5px;
  text-transform: uppercase;
}

.recent-posts__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.recent-posts__title:hover,
.recent-posts__title:focus-visible {
  color: var(--primary);
}

.category-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.category-list li {
  padding-bottom: 7px;
}

.category-list a {
  color: var(--text);
}

.category-list a:hover,
.category-list a:focus-visible {
  color: var(--primary);
}

/* Page article. */
.post__title {
  margin: 0 0 var(--heading-gap);
  font-size: 52px;
  line-height: 54px;
  overflow-wrap: break-word;
}

.post__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

.post__tags a {
  padding: 4px 14px;
  background: var(--lighter);
  color: var(--text);
  font-size: 14px;
}

.post__tags a:hover {
  background: var(--primary);
  color: var(--white);
}

/* Navigation vers l'article précédent et le suivant. */
.post-nav {
  display: flex;
  margin: 60px 0;
  border-block: 1px solid var(--border);
}

.post-nav__item {
  display: flex;
  flex: 1 1 50%;
  min-width: 0;
}

.post-nav__item--previous {
  margin-right: 15px;
}

.post-nav__item--next {
  justify-content: flex-end;
  margin-left: 15px;
  text-align: right;
}

.post-nav a {
  display: flex;
  flex: 1;
  align-items: center;
  padding: 42px 0;
}

.post-nav__item--next a {
  justify-content: flex-end;
}

.post-nav__content {
  display: block;
  width: 70%;
}

.post-nav__label {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--primary);
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  text-transform: uppercase;
}

/* Le chevron occupe 8 px de large, comme sur le site d'origine : son dessin déborde de sa boîte. */
.post-nav__label .icon {
  margin: 0 -6px;
}

.post-nav__item--next .post-nav__label {
  justify-content: flex-end;
}

.post-nav__title {
  display: -webkit-box;
  overflow: hidden;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 25px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  transition: color 0.3s;
}

.post-nav a:hover .post-nav__title,
.post-nav a:focus-visible .post-nav__title {
  color: var(--primary);
}


/* Bandeau affiché en haut d'une prévisualisation ouverte depuis l'admin. */
.preview-notice {
  padding: 12px 30px;
  background: var(--accent);
  color: var(--white);
  text-align: center;
}

/* article-content.css */
/*
  Contenu d'un article. Chaque règle vise l'élément lui-même et, quand elle existe, la classe
  wp-block-* que pose l'éditeur de WordPress : un article importé et un article écrit dans le
  nouvel éditeur ont le même rendu.
*/
.article-content {
  overflow-wrap: break-word;
}

/* Garde dans le bloc la marge de son premier et de son dernier élément, même vides. */
.article-content::before,
.article-content::after {
  content: "";
  display: table;
}

.article-content::after {
  clear: both;
}

.article-content h2 { font-size: 52px; line-height: 54px; }
.article-content h3 { font-size: 42px; line-height: 44px; }
.article-content h4 { font-size: 30px; line-height: 34px; }
.article-content h5 { font-size: 24px; line-height: 30px; }
.article-content h6 { font-size: 20px; line-height: 25px; }

/* Un titre qui suit un texte ou une liste prend de l'air au-dessus. Après un séparateur, une image ou un autre titre, non. */
.article-content :is(p, ul, ol, dl, table, blockquote) + :is(h2, h3, h4, h5, h6) {
  margin-top: 1em;
}

.article-content strong,
.article-content b {
  color: var(--accent);
  font-weight: 600;
}

.article-content a strong,
.article-content a b {
  color: inherit;
}

.article-content ul,
.article-content ol {
  margin: 0 0 var(--block-gap) 48px;
  padding: 0;
}

.article-content li > ul,
.article-content li > ol {
  margin-bottom: 0;
}

.article-content blockquote {
  margin: 0 0 var(--block-gap);
  padding: 8px 0 8px 30px;
  border-left: 4px solid var(--primary);
  color: var(--accent);
  font-size: 20px;
  line-height: 30px;
}

.article-content blockquote > :last-child {
  margin-bottom: 0;
}

/* Séparateur : un trait court et centré. */
.article-content hr,
.article-content .wp-block-separator {
  width: 10%;
  height: 1px;
  margin: 0 auto var(--block-gap);
  border: 0;
  background: #ccc;
  color: #808080;
}

.article-content figure {
  margin: 0 0 var(--block-gap);
}

.article-content img {
  display: block;
  max-width: 100%;
  height: auto;
}

.article-content figcaption {
  margin-top: 10px;
  color: var(--text-light);
  font-size: 14px;
  line-height: 22px;
  text-align: center;
}

.article-content .aligncenter,
.article-content .aligncenter img {
  margin-inline: auto;
}

.article-content .alignleft {
  float: left;
  margin: 0 30px var(--block-gap) 0;
}

.article-content .alignright {
  float: right;
  margin: 0 0 var(--block-gap) 30px;
}

.article-content .has-text-align-center { text-align: center; }
.article-content .has-text-align-right { text-align: right; }
.article-content .has-text-align-left { text-align: left; }

/*
  Tableaux. Trois cas :
  - le tableau de bloc WordPress (dans figure.wp-block-table) : pas de bordures, un trait épais sous l'en-tête ;
  - le tableau créé dans l'éditeur de l'admin, sans ligne d'en-tête déclarée : même aspect, sa première
    ligne tenant lieu d'en-tête ;
  - le tableau HTML simple avec en-tête, hérité d'un ancien article : cellules bordées, comme sur le site d'origine.
*/
.article-content .wp-block-table {
  margin-bottom: 16px;
  overflow-x: auto;
}

.article-content table {
  width: 100%;
  margin: 0 0 var(--block-gap);
  border-collapse: collapse;
  border-spacing: 0;
}

.article-content table.has-fixed-layout {
  table-layout: fixed;
}

.article-content th,
.article-content td {
  border: 1px solid var(--border);
  text-align: left;
  word-break: break-all;
}

.article-content th {
  padding: var(--block-gap);
  background: #f5f5f5;
  color: var(--accent);
  font-weight: 400;
  vertical-align: middle;
}

.article-content td {
  padding: 16px var(--block-gap);
  vertical-align: top;
}

.article-content .wp-block-table :is(th, td),
.article-content :not(.wp-block-table) > table:not(:has(thead)) :is(th, td) {
  border: 0;
  word-break: normal;
}

.article-content .wp-block-table thead {
  border-bottom: 3px solid var(--text);
}

.article-content :not(.wp-block-table) > table:not(:has(thead)) tr:first-child > td {
  padding: var(--block-gap);
  border-bottom: 3px solid var(--text);
  background: #f5f5f5;
  color: var(--accent);
  vertical-align: middle;
}

/* Galerie d'images. */
.article-content .wp-block-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 36.65px;
}

.article-content .wp-block-gallery > figure {
  display: flex;
  flex: 1 1 calc(50% - 4px);
  flex-direction: column;
  justify-content: center;
  margin: 0;
}

.article-content .wp-block-gallery > figure:only-child,
.article-content .wp-block-gallery.columns-1 > figure {
  flex-basis: 100%;
}

.article-content .wp-block-gallery img {
  width: 100%;
}

.article-content .wp-block-gallery.is-cropped img {
  flex: 1 0 0%;
  height: 100%;
  object-fit: cover;
}

/* Vidéo intégrée. */
.article-content iframe {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0 0 var(--block-gap);
  border: 0;
}

/* home.css */
/* Accueil, sous le carrousel : accroche, logo, présentation, cartes des magasins, réseaux sociaux.
   Les boîtes reproduisent celles du site d'origine : blocs de 1290 px, 10 px d'espace intérieur. */

/* Bloc centré de 1290 px, comme un conteneur du site d’origine : 10 px de marge intérieure, puis 10 px en haut et en bas. */
.home-block {
  max-width: 1290px;
  margin-inline: auto;
  padding: 10px 10px;
}

/* Accroche : ligne rouge centrée, sur toute la largeur. Le site d'origine y met un pictogramme vide de
   26 px de haut, qui ne se voit pas mais compte dans la hauteur : les marges le reproduisent. */
.home-intro {
  margin-top: 30px;
}

.home-intro__band {
  padding: 0 30px;
}

.home-intro__row {
  margin: 0;
  padding: 7px 0 36px;
  font: 600 14px/18px var(--font-heading);
  letter-spacing: 3px;
  text-align: center;
}

/* Sur le site d'origine, un pictogramme vide de 10 px de marge précède le texte : l'ensemble est centré,
   donc le texte est décalé de 5 px vers la droite. */
.home-intro__tagline {
  position: relative;
  left: 5px;
  color: var(--primary);
  text-align: left;
  text-transform: uppercase;
}

.home-logo {
  text-align: center;
}

.home-logo img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* Texte de présentation, centré. Le paragraphe vide du site d'origine laisse 22.652 px en haut. */
.home-text {
  padding-top: calc(10px + var(--block-gap));
  text-align: center;
}

.home-text p {
  margin: 0 0 var(--block-gap);
}

.home-text__strong {
  margin-bottom: 12.979px !important;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 28px;
}

/* Six cartes sur deux rangées de trois, à 30 px les unes des autres, 120 px sous chaque rangée. */
.home-stores {
  padding: 0 15px;
}

.store-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 30px;
  row-gap: 120px;
  align-items: start;
  max-width: 1290px;
  margin: 0 auto 120px;
  padding: 0;
  list-style: none;
}

.store-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  box-shadow: 0 4px 30px 15px rgba(0, 0, 0, 0.05);
}

/* En-tête noir : nom en haut, téléphone en bas, hauteur commune aux six cartes. Il passe au rouge au survol. */
.store-card__head {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 258px;
  padding: 50px 50px 80px;
  background: var(--black);
  transition: background-color 0.3s;
}

/* Sur le site d'origine, la première carte a une marge réglée à la main : 3 px de plus. Les rangées s'alignent dessus. */
.store-card:first-child .store-card__head {
  min-height: 261px;
}

.store-card:hover .store-card__head {
  background: var(--primary);
}

.store-card__name {
  display: block;
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 30px;
  font-weight: 600;
  line-height: 34px;
}

.store-card__phone-line {
  display: block;
  line-height: 26px;
}

.store-card__phone {
  color: var(--white);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
}

.store-card__lines {
  margin: 50px;
  padding: 0;
  color: var(--primary);
  list-style: square;
}

.store-card__lines li {
  color: var(--black);
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
}

/* La barre rouge du bas : sur le site d'origine, c'est un bouton sans texte ni lien. */
.store-card__bar {
  display: block;
  height: 40px;
  background: var(--primary);
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social-icons__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 10%;
  color: var(--white);
  transition: filter 0.3s;
}

.social-icons__link:hover,
.social-icons__link:focus-visible {
  color: var(--white);
  filter: brightness(1.15);
}

.social-icons__link--facebook { background: #3b5998; }
.social-icons__link--instagram { background: #262626; }
.social-icons__link--youtube { background: #cd201f; }
.social-icons__link--tiktok { background: #000; }
.social-icons__link--linkedin { background: #0077b5; }

@media (max-width: 1024px) {
  .store-cards {
    column-gap: 20px;
  }

  .store-card__head {
    padding: 30px 30px 60px;
  }

  .store-card__lines {
    margin: 20px 30px 30px;
  }
}

@media (max-width: 767px) {
  .home-block {
    margin-inline: 20px;
  }

  .home-intro__band {
    padding: 0 15px;
  }

  .home-intro__row {
    padding-top: 53px;
  }

  .home-stores {
    padding: 0;
  }

  .store-cards {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin-bottom: 60px;
    padding: 0 15px;
  }

  /* Sur mobile, le site d'origine espace la deuxième carte de chaque rangée de 30 px en haut et en bas. */
  .store-card:nth-child(3n + 2) {
    margin-block: 30px;
  }

  .store-card:nth-child(3) {
    margin-bottom: 60px;
  }

  .store-card__head {
    min-height: 198px;
  }

  .store-card:first-child .store-card__head {
    min-height: 201px;
  }
}

/* groupe.css */
/* Page Notre Groupe. Les mesures viennent du site en ligne, à 1440 px puis à 390 px. */

/* Surtitre rouge, en capitales espacées. Le site d'origine le fait précéder d'un pictogramme vide de 26 px
   de haut et de 10 px de marge : le surtitre est une boîte de 18 px décalée de 10 px, sur une ligne de 46 px. */
.eyebrow {
  display: block;
  width: max-content;
  max-width: calc(100% - 10px);
  margin: 5px 0 23px 10px;
  color: var(--primary);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 3px;
  line-height: 18px;
  text-transform: uppercase;
}

.eyebrow--light {
  width: auto;
  max-width: none;
  margin: 0 0 35px;
  font-weight: 400;
}

/* 1. Qui nous sommes : deux colonnes, 51 % et 49 %. */
.group-about {
  margin-top: 120px;
}

.group-about__grid {
  display: grid;
  grid-template-columns: 51% 49%;
}

.group-about__left {
  padding-right: 95px;
}

.group-about__right {
  padding-top: 20px;
}

.group-about__title {
  margin: 0 0 36.2237px;
  color: var(--accent);
  font-size: 30px;
  line-height: 34px;
}

.group-about__image {
  display: block;
  width: 100%;
  height: auto;
}

.group-about__lead {
  margin: 0 0 48.315px;
  color: var(--accent);
  font-size: 20px;
  line-height: 28px;
}

.group-about__lead strong {
  font-weight: 600;
}

.group-about__text {
  max-width: 630px;
  margin-bottom: 110px;
  padding-top: var(--block-gap);
}

.group-about__text p {
  margin: 0;
}

.group-about__text strong {
  font-weight: 600;
}

/* Les trois compteurs, sous un filet rouge de 10 px. */
.counters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0;
  padding: 75px 0 0;
  border-top: 10px solid var(--primary);
  list-style: none;
}

.counter {
  display: flex;
  flex-direction: column;
}

/* Le site d'origine centre le texte mais cale le nombre à gauche et le libellé au centre par flex : reproduit tel quel. */
.counter__number {
  display: flex;
  justify-content: flex-start;
  color: var(--primary);
  text-align: center;
  font-family: var(--font-heading);
  font-size: 64px;
  font-weight: 400;
  line-height: 64px;
}

.counter__label {
  display: flex;
  justify-content: center;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  text-transform: uppercase;
}

/* 2. Commandez vos pièces : la section remonte de 250 px sous la précédente, avec 370 px d'espace intérieur. */
.group-order {
  margin-top: -250px;
  padding-top: 370px;
}

.group-order__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding-top: 20px;
}

.group-order__title {
  margin: 30px 0 16.2237px;
  color: var(--accent);
  font-size: 30px;
  line-height: 34px;
}

.group-order__action {
  text-align: right;
}

/* Le bouton du site d'origine n'a pas de lien : il est reproduit tel quel, sans en être un. */
.button-arrow {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 20px 30px;
  background: var(--primary);
  color: var(--black);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 18px;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.button-arrow .icon {
  width: 36px;
  height: 18px;
}

/* 3. Quatre boîtes blanches sur fond blanc, à 15 px les unes des autres. */
.group-values {
  padding: 53px 30px 120px;
}

.value-boxes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 30px;
  max-width: 1290px;
  margin: 0 auto 63px;
  padding: 0;
  list-style: none;
}

.value-box {
  padding: 40px;
  background: var(--white);
}

.value-box__icon {
  display: block;
  margin-bottom: 24px;
  color: var(--primary);
}

.value-box__icon .icon {
  transition: transform 0.3s;
}

.value-box:hover .value-box__icon .icon {
  transform: scale(1.1);
}

.value-box__title {
  margin: 0 0 20px;
  color: var(--accent);
  font-size: 20px;
  line-height: 24px;
}

.value-box__text {
  margin: 0;
}

.group-values__question {
  max-width: 1320px;
  margin: 0 auto;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

.group-values__question a {
  color: inherit;
}

.group-values__question a:hover {
  color: var(--primary);
}

/* 4. Nos équipementiers : bloc centré de 1070 px. */
.group-brands {
  margin: 120px 0;
  padding: 0 30px;
}

.group-brands__inner {
  max-width: 1070px;
  margin: 0 auto;
  text-align: center;
}

.group-brands__title {
  margin: 0 0 46px;
  padding-top: 66px;
  color: var(--black);
  font-size: 52px;
  font-weight: 400;
  line-height: 54px;
}

.group-brands__text {
  max-width: 630px;
  margin: 0 auto 65px;
  padding-top: var(--block-gap);
  padding-bottom: 10.8158px;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 600;
  line-height: 24px;
}

.brands {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 -15px;
  padding: 0;
  list-style: none;
}

.brands__item {
  display: flex;
  align-items: center;
  width: 20%;
  margin-bottom: 30px;
  padding: 0 15px;
}

.brands__item img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 0.3s;
}

.brands__item img:hover {
  opacity: 0.8;
}

/* 5. Bloc de clôture : la colonne de gauche ne contenait que des décors de la démo, invisibles. */
.group-closing {
  padding: 100px 0;
}

.group-closing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.group-closing__text {
  grid-column: 2;
}

.group-closing__title {
  max-width: 80.772%;
  margin: 0 0 35px;
  color: var(--accent);
  font-size: 30px;
  font-weight: 400;
  line-height: 34px;
}

.group-closing__line {
  max-width: 400px;
  margin: 0;
  color: var(--text-light);
}

@media (max-width: 1024px) {
  .group-about__left {
    padding-right: 30px;
  }

  .group-order {
    margin-top: -150px;
    padding-top: 230px;
  }

  .value-boxes {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 30px;
  }

  .brands__item {
    width: 20%;
  }
}

@media (max-width: 767px) {
  .group-about {
    margin-top: 80px;
  }

  .group-about__grid,
  .group-order__row,
  .group-closing__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .group-about__left {
    padding-right: 0;
  }

  /* Sur mobile, les surtitres sont centrés. */
  .group .eyebrow {
    margin-inline: auto;
  }

  .group-about__text {
    margin-bottom: 70px;
  }

  .counters {
    grid-template-columns: minmax(0, 1fr);
    padding: 30px 0;
  }

  .counter {
    width: 50%;
    margin: 0 auto 30px;
  }

  .counter:last-child {
    margin-bottom: 0;
  }

  .group-order {
    margin-top: 0;
    padding: 60px 0;
  }

  .group-order__action {
    text-align: center;
  }

  .group-values {
    padding: 0 15px 60px;
  }

  .value-boxes {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
    margin-bottom: 0;
  }

  .value-box {
    margin-bottom: 30px;
  }

  .group-brands {
    margin: 0 0 30px;
    padding: 0 15px;
  }

  .group-brands__title {
    font-size: 34px;
    line-height: 38px;
  }

  .brands__item {
    width: 50%;
  }

  .group-closing {
    padding: 60px 0;
  }

  .group-closing__text {
    grid-column: 1;
  }
}

/* magasins.css */
/* Page Nos Magasins : présentation, bande grise, deux tableaux de trois magasins, phrase de livraison, bannière. */

/* Le surtitre du haut suit un pictogramme vide de 12 px : le texte commence 12 px plus à droite. */
.eyebrow--indent {
  width: auto;
  margin: 0 0 23px 12px;
  font-size: 14px;
  line-height: 14px;
}

/* Section pleine largeur, contenu de 1290 px, comme sur le site d'origine. */
.stores-intro {
  margin: 60px 0 120px;
  padding: 0 30px;
}

.stores-intro__grid {
  display: grid;
  grid-template-columns: 60% 40%;
  max-width: 1290px;
  margin: 0 auto;
}

.stores-intro__title {
  max-width: 630px;
  margin: 0 0 62px;
  color: var(--black);
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 400;
  line-height: 54px;
}

.stores-intro__points {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Chaque point : un carré rouge de 10 px, puis 20 px, puis le texte. */
.stores-point {
  position: relative;
  margin-top: 7px;
  padding: 0 10px 0 30px;
}

.stores-point::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 10px;
  height: 10px;
  background: var(--primary);
}

.stores-point:last-child {
  margin-bottom: 40px;
  padding: 0 0 0 80px;
}

.stores-point:last-child::before {
  left: 50px;
}

.stores-point__title {
  margin: 0 0 15px;
  color: var(--accent);
  font-size: 20px;
  font-weight: 400;
  line-height: 12px;
}

.stores-point p {
  margin: 0;
}

.stores-intro__visual {
  position: relative;
  padding-left: 50px;
  text-align: right;
}

.stores-intro__image {
  display: inline-block;
  width: 400px;
  height: 500px;
  object-fit: cover;
}

/* La pastille rouge sur la photo. Le texte de démo « 100+ Trusted Experts » est remplacé. */
.stores-badge {
  position: absolute;
  top: 190px;
  left: 50px;
  display: flex;
  flex-direction: column;
  gap: 60px;
  width: 220px;
  padding: 40px;
  background: var(--primary);
  color: var(--text);
  text-align: left;
}

.stores-badge .icon {
  color: var(--white);
}

.stores-badge__text {
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

/* Bande grise, sous laquelle le premier tableau remonte de 105 px. */
.stores-band {
  margin-bottom: -105px;
  padding: 120px 30px 90px;
  background: #f5f5f5;
  text-align: center;
}

.stores-band__title {
  margin: 15px 0 50px;
  color: var(--accent);
  font-size: 52px;
  font-weight: 400;
  line-height: 54px;
}

.stores-row {
  position: relative;
  max-width: 1290px;
  margin: 0 auto;
  padding: 10px 10px;
}

.stores-table {
  width: 100%;
  margin: 0 0 var(--block-gap);
  border-collapse: collapse;
  text-align: left;
}

.stores-table__col-first {
  width: 30.26%;
}

.stores-table__col {
  width: 34.87%;
}

.stores-table td {
  padding: 16px var(--block-gap);
  border: 1px solid var(--border);
  text-align: center;
  vertical-align: top;
}

.stores-table__name {
  margin: 0 0 12.979px;
  color: var(--accent);
  font-size: 24px;
  line-height: 28px;
}

.stores-table p {
  margin: 0 0 var(--block-gap);
}

.stores-table p:last-child {
  margin-bottom: 0;
}

.stores-table strong {
  font-weight: 700;
}

/* Les horaires gardent la police en ligne du site d'origine : Raleway, absente, donc la sans-serif du système. */
.stores-table__hours {
  color: var(--black);
  font-family: Raleway, sans-serif;
  font-size: 14.6667px;
  text-align: left;
}

/* Lien vers le formulaire de contact, magasin présélectionné. */
.stores-table__write {
  display: inline-block;
  margin-top: 6px;
  padding: 10px 0;
  color: var(--primary);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.stores-table__write:hover,
.stores-table__write:focus-visible {
  color: var(--accent);
}

/* La liste par magasin ne sert que sur mobile. */
.stores-list {
  display: none;
}

.stores-delivery {
  max-width: 1290px;
  margin: 20px auto 0;
  padding: 10px 10px;
}

.stores-delivery__text {
  margin: 0 0 10.8158px;
  color: var(--accent);
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
}

.stores-delivery__text span {
  color: #ff0000;
}

.stores-banner {
  max-width: 1290px;
  margin: 0 auto;
  padding: 10px 10px;
  text-align: center;
}

.stores-banner img {
  display: inline-block;
  width: 980px;
  max-width: 100%;
  height: auto;
}

@media (max-width: 1024px) {
  .stores-intro__title {
    font-size: 42px;
    line-height: 46px;
  }
}

@media (max-width: 767px) {
  .stores-intro {
    margin: 0 0 60px;
    padding: 0 15px;
  }

  .stores-intro__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .stores-intro__title {
    font-size: 34px;
    line-height: 38px;
  }

  .stores-intro__points {
    grid-template-columns: minmax(0, 1fr);
  }

  .stores-point:last-child {
    padding-left: 30px;
  }

  .stores-point:last-child::before {
    left: 0;
  }

  .stores-point__title {
    font-size: 34px;
    line-height: 38px;
  }

  .stores-intro__visual {
    padding: 50px 0 0;
    text-align: center;
  }

  .stores-intro__image {
    width: 100%;
    height: auto;
  }

  .stores-badge {
    top: 235px;
    left: 0;
    gap: 40px;
    width: 185px;
    padding: 30px 20px;
  }

  .stores-band {
    margin-bottom: 0;
    padding: 60px 15px 10px;
  }

  .stores-band__title {
    font-size: 34px;
    line-height: 38px;
  }

  /* Un tableau à trois colonnes déborde d'un écran de téléphone : les fiches s'empilent, une par magasin. */
  .stores-row {
    display: none;
  }

  .stores-list {
    display: block;
    position: relative;
    margin: 0 15px;
    padding: 10px 0;
    list-style: none;
    text-align: center;
  }

  .stores-list__item {
    padding: 16px var(--block-gap);
    border: 1px solid var(--border);
    border-top: 0;
    background: var(--white);
  }

  .stores-list__item:first-child {
    border-top: 1px solid var(--border);
  }

  .stores-list__item p {
    margin: 0 0 10px;
  }

  .stores-list__item p:last-child {
    margin-bottom: 0;
  }

  .stores-list__item .stores-table__name {
    margin: 0 0 12.979px;
    color: var(--accent);
    font-size: 24px;
    line-height: 28px;
  }
}

/* garanties.css */
/* Page Nos Garanties : un titre, puis trois blocs texte + photo à liseré gauche. */

/* Les pages vitrines à gabarit standard commencent 60 px sous le bandeau, sans marge basse propre. */
.site-content--vitrine {
  margin: 0 0 40px;
  padding-top: 60px;
}

/* Sur Nos Magasins et Nos Garanties, WordPress enveloppait le contenu d'un article à 60 px de marge basse. */
.site-content--article {
  padding-bottom: 60px;
}

/* Surtitre sur la même ligne qu'un pictogramme vide de 10 px de marge : une rangée de 46 px, le texte en ligne. */
.eyebrow-row {
  margin: 0;
  padding: 7px 0 21px 10px;
  font: 600 14px/18px var(--font-heading);
  letter-spacing: 3px;
}

.eyebrow-row--center {
  padding-left: 0;
  text-align: center;
}

/* L'ensemble pictogramme + texte est centré : le texte est décalé de 5 px vers la droite. */
.eyebrow-row--center .eyebrow--inline {
  position: relative;
  left: 5px;
}

.eyebrow--inline {
  display: inline;
  width: auto;
  margin: 0;
  text-align: left;
}

.warranties-head {
  margin-bottom: 0;
}

.warranties-head__title {
  max-width: 585px;
  margin: 15px 0 70px;
  color: var(--accent);
  font-size: 52px;
  font-weight: 400;
  line-height: 54px;
}

/* Chaque bloc est une section pleine largeur, dont le contenu fait 1290 px. */
.warranty {
  margin-bottom: 60px;
  padding: 0 30px;
}

.warranty__inner {
  display: flex;
  flex-wrap: wrap;
  max-width: 1290px;
  margin: 0 auto;
  border-left: 5px solid var(--border);
  transition: border-color 0.3s;
}

.warranty__inner:hover {
  border-color: var(--primary);
}

.warranty__text {
  width: 440px;
  text-align: center;
}

.warranty__title {
  margin: 0 0 20px;
  color: var(--black);
  font-size: 24px;
  line-height: 28px;
}

.warranty__text p {
  margin: 0;
}

.warranty__image {
  display: block;
  width: 300px;
  height: 200px;
  margin-left: 100px;
  object-fit: cover;
}

@media (max-width: 1024px) {
  .warranty__text {
    width: 325px;
  }

  .warranty__image {
    margin-left: 30px;
  }
}

@media (max-width: 767px) {
  .site-content--vitrine {
    padding-top: 40px;
  }

  .warranties-head__title {
    margin-bottom: 30px;
    font-size: 34px;
    line-height: 38px;
  }

  .warranty {
    padding: 0 15px;
  }

  .warranty__inner {
    padding-left: 15px;
  }

  .warranty__text {
    width: 100%;
    text-align: left;
  }

  .warranty__image {
    margin: 20px 0 0;
  }
}

/* contact.css */
/* Page Contact : carte et coordonnées, puis le formulaire. */
/* Section pleine largeur, contenu de 1290 px : carte à gauche (55 %), coordonnées à droite. */
.contact-top {
  margin: 60px 0 120px;
  padding: 0 30px;
}

.contact-top__grid {
  display: grid;
  grid-template-columns: 55% 45%;
  max-width: 1290px;
  margin: 0 auto;
}

.contact-map {
  position: relative;
  height: 480px;
  background: var(--lighter);
}

.contact-map__fallback {
  margin: 0;
  padding: 30px;
}

.contact-details {
  padding-left: 60px;
}

.contact-details__title {
  margin: 0 0 45px;
  color: var(--black);
  font-size: 42px;
  line-height: 44px;
}

.contact-details__text {
  max-width: 410px;
}

.contact-details__text b {
  font-weight: 600;
}

.contact-details__rule {
  width: 410px;
  max-width: 100%;
  height: 0;
  margin: 35px 0 55px;
  border: 0;
  border-top: 1px solid var(--border);
}

.contact-item {
  margin-bottom: 46px;
  padding-left: 14px;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-item__label {
  margin: 0 0 5px;
  color: var(--text-light);
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  line-height: 18px;
  text-transform: uppercase;
}

.contact-item__value {
  margin: 0;
  color: var(--accent);
  font-size: 20px;
  line-height: 28px;
}

.contact-item__value a {
  color: inherit;
}

.contact-item__value a:hover {
  color: var(--primary);
}

.contact-item__phone {
  color: var(--primary) !important;
}

/* Le formulaire, centré sur 865 px, dans un bloc de 80 px en haut et 90 px en bas. */
.contact-form-section {
  margin-bottom: 120px;
  padding: 0 30px;
}

.contact-form-wrap {
  padding-top: 80px;
  padding-bottom: 90px;
  text-align: center;
}

.contact-form__title {
  margin: 0 0 20px;
  color: var(--black);
  font-size: 42px;
  line-height: 44px;
}

.contact-form__intro {
  margin: 0 0 50px;
}

.contact-form {
  max-width: 865px;
  margin: 0 auto;
  text-align: left;
}

.contact-form__trap {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.contact-form__row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
}

.contact-form__field--full {
  grid-column: 1 / -1;
}

.contact-form__input {
  display: block;
  width: 100%;
  margin-bottom: 20px;
  padding: 15px 17px;
  border: 1px solid var(--border);
  border-radius: 0;
  background: var(--white);
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 15px;
  line-height: 26px;
  transition: border-color 0.3s;
}

.contact-form__input:focus {
  border-color: var(--primary);
  outline: none;
}

.contact-form__input.is-invalid {
  border-color: var(--primary);
}

.contact-form__textarea {
  height: 214px;
  resize: vertical;
}

/* Choix du magasin : libellé visible, liste déroulante au style des champs. */
.contact-form__label {
  display: block;
  margin: 0 0 6px;
  color: var(--accent);
  font-size: 15px;
  line-height: 22px;
}

.contact-form__optional {
  color: var(--text-light);
  font-size: 13px;
}

.contact-form__select {
  height: 58px;
  padding-right: 44px;
  background-color: var(--white);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3e%3cpath fill='%23595959' d='M45.656 5.656l-22.828 22.828-22.828-22.828 5.656-5.656 17.172 17.172 17.172-17.172 5.656 5.656z'/%3e%3c/svg%3e");
  background-position: calc(100% - 20px) center;
  background-repeat: no-repeat;
  background-size: 10px 10px;
  appearance: none;
  cursor: pointer;
}

.contact-form__error {
  margin: -12px 0 20px;
  color: var(--primary);
  font-size: 14px;
  line-height: 20px;
}

.contact-form__submit {
  margin: 0;
  text-align: center;
}

.contact-form__button {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  padding: 20px 30px;
  border: 0;
  background: var(--primary);
  color: var(--white);
  font-family: var(--font-heading);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 20px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.3s;
}

.contact-form__button .icon {
  width: 36px;
  height: 17px;
}

.contact-form__button:hover,
.contact-form__button:focus-visible {
  background: var(--accent);
}

.contact-notice {
  max-width: 865px;
  margin: 0 auto 30px;
  padding: 16px 20px;
  border-left: 5px solid var(--primary);
  background: var(--lighter);
  text-align: left;
}

.contact-notice--success {
  border-color: #1f8a3b;
}

.contact-notice a {
  color: var(--link);
}

/* Mention d'information sur les données personnelles. */
.contact-privacy {
  max-width: 865px;
  margin: 40px auto 0;
  color: var(--text-light);
  font-size: 14px;
  line-height: 22px;
  text-align: left;
}

.contact-privacy__title {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 16px;
  line-height: 22px;
}

.contact-privacy p {
  margin: 0 0 10px;
}

.contact-privacy a {
  color: var(--link);
}

@media (max-width: 1024px) {
  .contact-details {
    padding-left: 30px;
  }
}

@media (max-width: 767px) {
  .contact-top {
    margin: 0 0 60px;
    padding: 0 15px;
  }

  .contact-top__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .contact-details {
    padding: 30px 0 0;
    text-align: center;
  }

  .contact-details__text,
  .contact-details__rule {
    margin-inline: auto;
  }

  .contact-item {
    padding-left: 0;
  }

  .contact-form-section {
    margin-bottom: 60px;
    padding: 0;
  }

  .contact-form__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* legal.css */
/* Page Mentions légales. */
.legal {
  max-width: 900px;
}

.legal h2 {
  margin: 40px 0 16px;
  font-size: 28px;
  line-height: 32px;
}

.legal h2:first-child {
  margin-top: 0;
}

.legal p {
  margin: 0 0 var(--block-gap);
}

.legal a {
  color: var(--link);
}

.legal__warning {
  padding: 14px 18px;
  border-left: 5px solid var(--primary);
  background: var(--lighter);
  color: var(--accent);
}

.legal__list {
  display: grid;
  grid-template-columns: minmax(180px, 280px) minmax(0, 1fr);
  row-gap: 8px;
  column-gap: 20px;
  margin: 0 0 var(--block-gap);
}

.legal__list dt {
  color: var(--accent);
  font-weight: 700;
}

.legal__list dd {
  margin: 0;
}

.legal__todo {
  display: inline-block;
  padding: 0 8px;
  border: 1px dashed var(--primary);
  color: var(--primary);
  font-size: 14px;
  line-height: 24px;
}

/* Mesure d'audience : l'état du choix d'opposition et le bouton qui le change. */
.legal__optout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  margin: 0 0 var(--block-gap);
  padding: 22px 24px;
  border-left: 5px solid var(--primary);
  background: var(--lighter);
}

.legal__optout[hidden] {
  display: none;
}

.legal p.legal__optout-status {
  flex: 1 1 320px;
  margin: 0;
  color: var(--accent);
  font-weight: 700;
}

.legal__optout-button {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 12px 22px;
  border: 2px solid var(--accent);
  border-radius: 4px;
  background: var(--white);
  color: var(--accent);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.legal__optout-button:hover,
.legal__optout-button:focus-visible {
  background: var(--accent);
  color: var(--white);
}

.legal__optout-button[hidden] {
  display: none;
}

/* Pixel Meta : le panneau de choix (même présentation que l'opposition à la mesure) et le tableau des cookies. */
.legal__optout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.legal__optout-actions[hidden] {
  display: none;
}

.legal__cookies {
  width: 100%;
  margin: 0 0 var(--block-gap);
  border-collapse: collapse;
  font-size: 15px;
}

.legal__cookies th,
.legal__cookies td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--lighter);
  text-align: left;
  vertical-align: top;
}

.legal__cookies th {
  color: var(--accent);
}

.legal__cookies code {
  font-size: 14px;
}

@media (max-width: 767px) {
  .legal__cookies thead {
    display: none;
  }

  .legal__cookies tr {
    display: block;
    padding: 8px 0;
    border-bottom: 1px solid var(--lighter);
  }

  .legal__cookies td {
    display: block;
    padding: 2px 0;
    border: 0;
  }

  .legal__cookies td::before {
    content: attr(data-label) " : ";
    font-weight: 700;
  }
}

@media (max-width: 767px) {
  .legal__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 2px;
  }

  .legal__list dd {
    margin-bottom: 10px;
  }
}

/* landing.css */
/* Landing page affichée dans la mise en page du site (/le-petit-dejeuner-tour/). Son propre CSS est chargé à part. */
.landing-body {
  min-height: 0;
  margin-bottom: 60px;
}

/* Dans la mise en page du site, le bloc était dans un article WordPress : ses gras y sont noirs. */
.landing-body strong,
.landing-body th,
.landing-body dt {
  color: var(--accent);
}

/* footer.css */
.site-footer {
  color: var(--text-light);
}

.footer-tagline,
.footer-main,
.footer-bottom {
  background: var(--accent);
}

.site-footer a {
  color: var(--text-light);
}

.site-footer a:hover,
.site-footer a:focus-visible {
  color: var(--primary);
}

/* Bandeau du slogan. */
.footer-tagline {
  padding: 141px 0 80px;
  border-top: 5px solid var(--primary);
}

.footer-tagline__text {
  margin: 0 0 40px;
  color: var(--white);
  font-size: 52px;
  line-height: 54px;
  text-align: center;
}

/* Colonnes : présentation, coordonnées, trois listes de liens. La grille compte 100 colonnes de 1 %. */
.footer-main {
  padding: 100px 0;
  border-block: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-main__grid {
  display: grid;
  grid-template-columns: repeat(100, 1%);
}

.footer-about,
.footer-contact {
  grid-column: span 25;
}

.footer-links {
  grid-column: span 16;
}

.footer-about {
  margin-right: 40px;
  padding-right: 40px;
  border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-about__logo {
  display: block;
  margin-bottom: 30px;
}

.footer-about__logo img {
  display: block;
  width: 100%;
  height: auto;
}

.footer-about__text {
  margin: 0 0 var(--block-gap);
}

.footer-contact {
  margin-right: 60px;
}

.footer-contact__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 20px;
}

.footer-contact__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--primary);
  color: var(--white);
}

.footer-contact__item > div {
  flex: 1;
  min-width: 0;
}

.footer-contact__label {
  display: block;
  color: var(--white);
}

.footer-contact__value {
  display: block;
  color: var(--text-light);
}

.footer-links__title {
  margin: 0 0 20px;
  color: var(--white);
  font-size: 18px;
  line-height: 24px;
}

.footer-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-links li {
  display: flex;
}

.footer-links a {
  line-height: 30px;
}

/* Dernière ligne : réseaux sociaux, copyright, retour en haut. */
.footer-bottom {
  padding: 40px 0;
}

.footer-bottom__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.footer-social {
  display: flex;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  color: #69727d;
}

.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--white);
}

.footer-copyright {
  margin: 0 0 var(--block-gap);
  text-align: center;
}

.footer-top {
  display: flex;
  justify-content: flex-end;
  min-height: 26px;
}

.footer-top a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 13px;
  margin-top: 2px;
  font-size: 14px;
  line-height: 23.33px;
  text-transform: capitalize;
}

@media (max-width: 1200px) {
  .footer-about {
    margin-right: 15px;
    padding-right: 20px;
  }

  .footer-contact {
    margin-right: 30px;
  }

  .footer-links:first-of-type {
    padding-inline: 10px;
  }
}

@media (max-width: 1024px) {
  .footer-tagline__text {
    font-size: 42px;
    line-height: 46px;
  }

  .footer-about,
  .footer-contact {
    grid-column: span 50;
  }

  .footer-about {
    margin-right: 30px;
  }

  .footer-links {
    grid-column: span 33;
    margin-top: 40px;
  }

  .footer-links:first-of-type {
    padding-inline: 0;
  }
}

@media (max-width: 880px) {
  .footer-main {
    padding: 80px 0;
  }
}

@media (max-width: 767px) {
  .footer-tagline {
    padding: 121px 0 60px;
  }

  .footer-tagline__text {
    font-size: 34px;
    line-height: 38px;
  }

  .footer-main {
    padding: 60px 0;
  }

  .footer-about,
  .footer-contact,
  .footer-links {
    grid-column: 1 / -1;
    text-align: center;
  }

  .footer-about {
    margin: 0;
    padding: 0;
    border-right: 0;
  }

  .footer-about__logo {
    margin-bottom: 20px;
  }

  .footer-contact {
    margin: 0;
  }

  .footer-contact__item {
    flex-direction: column;
    align-items: center;
    gap: 0;
  }

  .footer-contact__item > div {
    flex: none;
    width: 100%;
  }

  .footer-links li {
    justify-content: center;
  }

  .footer-bottom .container {
    padding-inline: 30px;
  }

  .footer-bottom__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-social {
    justify-content: center;
  }

  .footer-copyright {
    margin: 10px 0 42.652px;
  }

  .footer-top {
    justify-content: center;
  }
}