:root {
  --fond: #F6F1EB;
  --marron: #594B39;
  --rouge: #DB3A2E;
  --marronc: #AFA89F;
  --blanc: #FFFFFF;
  --contour: #E8DBDB;
  --section: 85rem;
}
::-moz-selection {
  color: var(--fond);
  background-color: var(--marron);
}
::selection {
  color: var(--fond);
  background-color: var(--marron);
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--marron) transparent;
  color: var(--marron);
}
*::-webkit-scrollbar {
  width: 0.75rem;
  border-radius: 0.9375rem;
}
*::-webkit-scrollbar-track {
  background: var(--fond);
}
*::-webkit-scrollbar-thumb {
  background-color: var(--rouge);
  border-radius: 1.25rem;
  border: 0.1875rem solid var(--fond);
}
article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
}
p {
  margin-top: 0;
  margin-bottom: 1rem;
}
a {
  color: inherit;
  text-decoration: underline;
  background-color: transparent;
}
a:hover {
  color: inherit;
  text-decoration: underline;
}
table {
  border-collapse: collapse;
  width: 100%;
}
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
}
button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button {
  background-color: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
ol,
ul {
  padding-left: 2rem;
}
blockquote {
  margin: 0 0 1rem;
}
pre,
code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  height: 0;
  overflow: visible;
}
img {
  max-width: 100%;
}
* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
i,
em {
  font-style: italic;
  font-weight: inherit;
  text-decoration: inherit;
  color: inherit;
  font-size: inherit;
}
b,
strong {
  font-weight: bold;
  font-style: inherit;
  text-decoration: inherit;
  color: inherit;
  font-size: inherit;
}
u,
span.underline {
  text-decoration: underline;
  font-weight: inherit;
  font-style: inherit;
  color: inherit;
  font-size: inherit;
}
a,
span {
  text-decoration: inherit;
  font-weight: inherit;
  font-style: inherit;
  font-size: inherit;
  outline: none;
}
* {
  font-size: 16px;
  font-family: basic-sans, sans-serif;
  font-weight: 400;
  font-style: normal;
}
body {
  background-color: var(--fond);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: novantique-serif, sans-serif;
  font-weight: 400;
}
h1 strong,
h2 strong,
h3 strong,
h4 strong,
h5 strong,
h6 strong,
h1 em,
h2 em,
h3 em,
h4 em,
h5 em,
h6 em {
  font-family: inherit;
}
#motif {
  background-image: url('../assets/texture.jpg');
  height: 100vh;
  width: 100vw;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 100;
  mix-blend-mode: multiply;
  opacity: 0.4;
  pointer-events: none;
}
/* Message de confirmation (partage du lien). En position fixe pour échapper
   à l'overflow hidden du menu. */
.toast {
  position: fixed;
  left: 50%;
  bottom: 2.5rem;
  -webkit-transform: translateX(-50%) translateY(0.75rem);
          transform: translateX(-50%) translateY(0.75rem);
  background-color: var(--marron);
  color: var(--fond);
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border-radius: 3.125rem;
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.toast.visible {
  opacity: 1;
  -webkit-transform: translateX(-50%) translateY(0);
          transform: translateX(-50%) translateY(0);
}
.cta {
  border: 1px solid var(--rouge);
  border-radius: 3.125rem;
  font-size: 1rem;
  padding: 0.875rem 1.875rem;
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  color: var(--rouge);
  overflow: hidden;
  position: relative;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cta::before {
  content: "";
  width: 0;
  aspect-ratio: 1;
  background-color: var(--rouge);
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  border-radius: 18.75rem;
  -webkit-transform: translateX(-50%) translateY(-50%);
          transform: translateX(-50%) translateY(-50%);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.cta:hover {
  color: var(--fond);
  text-decoration: none;
}
.cta:hover::before {
  width: 100%;
}
header {
  position: relative;
  max-width: var(--section);
  padding: 0 15px;
  width: 100%;
  padding-top: 30px;
  /* Sous 768px le menu passe en absolu, collé en haut : l'en-tête doit
       réserver sa hauteur, sinon la pastille recouvre le premier bloc. */
}
@media screen and (max-width: 767px) {
  header {
    padding-top: 6.25rem;
  }
}
header #menu {
  max-width: 25rem;
  width: 100%;
  background-color: var(--fond);
  border: 0.0625rem solid #E7E0D8;
  border-radius: 0.625rem;
  padding: 0.625rem 1.25rem;
  position: fixed;
  top: 4.0625rem;
  right: calc((100vw - var(--section))/2);
  z-index: 20;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 1198px) {
  header #menu {
    right: 15px;
    top: 15px;
  }
}
@media screen and (max-width: 767px) {
  header #menu {
    left: 0;
    right: 0;
    width: 100%;
    position: absolute;
    top: 0;
  }
}
header #menu.scrolled {
  top: 1rem;
}
header #menu.open-nav {
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
  gap: 1.875rem;
  padding: 0.625rem 1.25rem 1.25rem 1.25rem;
}
header #menu.open-nav .nav-bouton {
  max-height: 30rem;
}
header #menu.open-nav .menu-top {
  margin-bottom: 50px;
}
header #menu.open-nav .menu-top .nom {
  text-align: center;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%) translateY(50px);
          transform: translateX(-50%) translateY(50px);
}
header #menu.open-nav .menu-top .nom h5 {
  font-size: 26px;
  white-space: nowrap;
}
header #menu.open-nav .menu-top .nom h5 a {
  -webkit-transform-origin: center;
          transform-origin: center;
}
header #menu.open-nav .menu-top .burger span {
  background-color: var(--fond);
  height: 0;
}
header #menu.open-nav .menu-top .burger span::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 0;
}
header #menu.open-nav .menu-top .burger span::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 0;
}
header #menu.open-nav .menu-top .burger:hover span {
  background-color: var(--rouge);
  height: 0;
}
header #menu.open-nav .menu-top .burger:hover span::before,
header #menu.open-nav .menu-top .burger:hover span::after {
  background-color: var(--rouge);
}
header #menu.open-nav .menu-top .burger:hover span::before {
  top: 0;
}
header #menu.open-nav .menu-top .burger:hover span::after {
  bottom: 0;
}
header #menu .menu-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.25rem;
}
header #menu .menu-top .burger span {
  height: 0.125rem;
  width: 1.75rem;
  background-color: var(--marron);
  position: relative;
  display: inline-block;
  vertical-align: middle;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header #menu .menu-top .burger span::before,
header #menu .menu-top .burger span::after {
  content: "";
  height: 0.125rem;
  width: 1.75rem;
  background-color: var(--marron);
  position: absolute;
  left: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header #menu .menu-top .burger span::before {
  top: 0.5rem;
}
header #menu .menu-top .burger span::after {
  bottom: 0.5rem;
}
header #menu .menu-top .burger:hover span {
  background-color: var(--rouge);
  height: 0.25rem;
}
header #menu .menu-top .burger:hover span::before,
header #menu .menu-top .burger:hover span::after {
  background-color: var(--rouge);
  height: 0.25rem;
}
header #menu .menu-top .burger:hover span::before {
  top: 0.6rem;
}
header #menu .menu-top .burger:hover span::after {
  bottom: 0.6rem;
}
header #menu .menu-top .burger.fermer span {
  background-color: var(--fond);
}
header #menu .menu-top .burger.fermer span::before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  top: 0;
}
header #menu .menu-top .burger.fermer span::after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  top: 0;
}
header #menu .menu-top .nom {
  position: absolute;
  left: 75px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
@media screen and (max-width: 399px) {
  header #menu .menu-top .nom {
    left: 60px;
  }
}
header #menu .menu-top .nom h5 {
  font-size: 1.3125rem;
  color: var(--rouge);
  font-weight: 700;
  margin: 0 0 -0.3125rem 0;
  white-space: nowrap;
}
@media screen and (max-width: 399px) {
  header #menu .menu-top .nom h5 {
    font-size: 1.2rem;
  }
}
header #menu .menu-top .nom h5 a {
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-transform: uppercase;
  display: inline-block;
  vertical-align: middle;
  -webkit-transform-origin: 0 center;
          transform-origin: 0 center;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
header #menu .menu-top .nom h5 a:hover {
  text-decoration: none;
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
header #menu .menu-top .nom p {
  font-size: 14px;
  margin: 0;
}
header #menu .rs {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  list-style-type: none;
  gap: 0.6875rem;
  margin-left: auto;
}
header #menu .rs a:hover,
header #menu .rs .partager:hover {
  -webkit-filter: brightness(0) saturate(100%) invert(32%) sepia(87%) saturate(3724%) hue-rotate(346deg) brightness(90%) contrast(89%);
          filter: brightness(0) saturate(100%) invert(32%) sepia(87%) saturate(3724%) hue-rotate(346deg) brightness(90%) contrast(89%);
}
header #menu .rs .partager {
  background: none;
  border: none;
  padding: 0;
  line-height: 0;
  cursor: pointer;
}
header #menu nav {
  -webkit-transition: height 0.4s ease;
  transition: height 0.4s ease;
  position: relative;
  overflow: hidden;
}
header #menu nav.sous-menu > ul {
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
}
header #menu nav > ul {
  list-style-type: none;
  padding: 0;
  border-top: 1px solid var(--marron);
  position: relative;
  -webkit-transition: -webkit-transform 0.4s ease;
  transition: -webkit-transform 0.4s ease;
  transition: transform 0.4s ease;
  transition: transform 0.4s ease, -webkit-transform 0.4s ease;
  margin: 0;
}
header #menu nav > ul li {
  border-bottom: 1px solid var(--marron);
  padding: 0.625rem 0;
}
header #menu nav > ul li a {
  font-size: 1.25rem;
  font-family: novantique-serif, sans-serif;
  width: 100%;
  display: block;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header #menu nav > ul li a:hover {
  text-decoration: none;
  color: var(--rouge);
}
header #menu nav > ul li.dropdown ul {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  border-top: 1px solid var(--marron);
  border-bottom: 1px solid var(--marron);
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
header #menu nav > ul li.dropdown ul li a:hover {
  text-decoration: none;
  color: var(--rouge);
}
header #menu nav > ul li.dropdown.open ul {
  -webkit-transform: translateX(0);
          transform: translateX(0);
  padding: 0;
  margin: 0;
}
header #menu nav > ul li.dropdown.open ul li {
  list-style-type: none;
}
header #menu nav > ul li.dropdown.open ul li a {
  white-space: nowrap;
}
header #menu .menu-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
header #menu .menu-bottom .langue {
  background-color: var(--blanc);
  height: 3.125rem;
  width: 3.125rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 0.625rem;
  font-size: 1.25rem;
  font-family: novantique-serif, sans-serif;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
header #menu .menu-bottom .langue:hover {
  background-color: var(--rouge);
  color: var(--fond);
  text-decoration: none;
}
header #menu .nav-bouton {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.25rem;
  max-height: 0;
  -webkit-transition: all 0.9s ease;
  transition: all 0.9s ease;
}
section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 9.375rem;
  width: 100%;
  overflow-x: clip;
  padding: 0 30px;
  /* 150px entre blocs est une respiration de desktop : sur les petits
       écrans on retombe sur 30px, la même valeur que les marges latérales. */
}
@media screen and (max-width: 1198px) {
  section {
    gap: 1.875rem;
  }
}
section article.header-home {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 100vh;
  position: relative;
  /* Jusqu'à 1299px : on garde la composition en deux colonnes, on
               réduit simplement la carte du titre et la typo. */
  /* En dessous de 1199px la colonne de droite devient trop étroite :
               on empile, la carte du titre chevauchant le bas de la photo. */
}
section article.header-home .bloc-image {
  height: 70vh;
  width: 100%;
}
section article.header-home .bloc-image img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}
section article.header-home .bloc-texte {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  max-width: var(--section);
}
section article.header-home .bloc-texte .sur-titre {
  background-color: var(--rouge);
  position: absolute;
  bottom: 100%;
  padding: 20px 40px;
  border-radius: 10px 10px 0 0;
}
section article.header-home .bloc-texte .sur-titre p {
  margin: 0;
  color: var(--fond);
}
section article.header-home .bloc-texte .titre {
  padding: 30px 40px 50px 40px;
  background-color: var(--fond);
  border-radius: 10px;
  width: 780px;
  max-width: 100%;
  position: absolute;
  bottom: 0;
}
section article.header-home .bloc-texte .titre h1 {
  font-size: 90px;
  color: var(--rouge);
  margin: 0;
  line-height: 100%;
}
section article.header-home .bloc-texte .texte {
  padding-left: 820px;
  min-height: 30vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 30px;
}
section article.header-home .bloc-texte .texte p {
  color: var(--rouge);
}
@media screen and (max-width: 1299px) {
  section article.header-home .bloc-texte .titre {
    width: 38rem;
    padding: 1.5rem 2.25rem 2.5rem 2.25rem;
  }
  section article.header-home .bloc-texte .titre h1 {
    font-size: 4.375rem;
  }
  section article.header-home .bloc-texte .texte {
    padding-left: 40.5rem;
    gap: 1.5625rem;
  }
}
@media screen and (max-width: 1198px) {
  section article.header-home {
    height: auto;
  }
  section article.header-home .bloc-image {
    height: 50vh;
    min-height: 20rem;
  }
  section article.header-home .bloc-texte {
    width: 100%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  section article.header-home .bloc-texte .titre {
    position: relative;
    bottom: auto;
    width: 100%;
    margin-top: -5rem;
    padding: 1.75rem 2.25rem 2rem 2.25rem;
  }
  section article.header-home .bloc-texte .titre h1 {
    font-size: 3.75rem;
  }
  section article.header-home .bloc-texte .texte {
    padding-left: 2.25rem;
    padding-right: 2.25rem;
    min-height: 0;
    margin-top: 2.5rem;
    gap: 1.875rem;
  }
}
@media screen and (max-width: 767px) {
  section article.header-home .bloc-image {
    height: 45vh;
    min-height: 16rem;
  }
  section article.header-home .bloc-texte .titre {
    margin-top: -3.5rem;
    padding: 1.25rem 1.25rem 1.5rem 1.25rem;
  }
  section article.header-home .bloc-texte .titre h1 {
    font-size: 2.5rem;
  }
  section article.header-home .bloc-texte .titre .sur-titre {
    padding: 0.75rem 1.5rem;
  }
  section article.header-home .bloc-texte .titre .sur-titre p {
    font-size: 0.875rem;
  }
  section article.header-home .bloc-texte .texte {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-top: 1.875rem;
    gap: 1.5rem;
  }
}
@media screen and (max-width: 399px) {
  section article.header-home .bloc-texte .titre h1 {
    font-size: 2rem;
  }
}
section article.presentation {
  position: relative;
  /* pleine largeur : le calc doit être compensé par des marges
               négatives, sinon le bloc démarre au bord intérieur de section
               et déborde de 30px à droite. */
  width: calc(100% + 60px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 100px -30px;
  /* Le calc(100% + 60px) n'était compensé par aucune marge négative :
               le bloc partait du bord intérieur de « section » et débordait donc
               de 30px à droite. On le recentre pour qu'il soit vraiment pleine
               largeur. Les 100px de marge verticale sautent aussi : sous 1198px
               l'écart entre blocs vient du seul gap de section. */
}
section article.presentation .fond {
  position: absolute;
  min-width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
section article.presentation .texte {
  text-align: center;
  max-width: 37rem;
  width: 100%;
  position: relative;
  z-index: 2;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 3.12rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
section article.presentation .texte h2 {
  font-size: 6.25rem;
  font-style: italic;
  font-weight: 700;
  line-height: 80%;
}
section article.presentation .texte h2 em {
  font-family: inherit;
}
section article.presentation .texte p {
  max-width: 28.375rem;
}
section article.presentation .bloc-texte-image {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}
section article.presentation .bloc-texte-image img {
  border-radius: 0.625rem;
  position: absolute;
}
section article.presentation .bloc-texte-image img.photo-1 {
  right: calc(100% + 100px);
  top: -30px;
  z-index: 1;
  max-height: 350px;
}
section article.presentation .bloc-texte-image img.photo-2 {
  -webkit-transform: rotate(10.666deg);
          transform: rotate(10.666deg);
  top: 17rem;
  z-index: 2;
  right: calc(100% + 50px);
  max-height: 235px;
}
section article.presentation .bloc-texte-image img.photo-3 {
  left: calc(100% + 100px);
  top: -30px;
  z-index: 1;
  max-height: 220px;
}
section article.presentation .bloc-texte-image img.photo-4 {
  -webkit-transform: rotate(-3.911deg);
          transform: rotate(-3.911deg);
  top: 9rem;
  z-index: 2;
  left: calc(100% + 150px);
  max-height: 280px;
}
@media screen and (max-width: 1198px) {
  section article.presentation {
    margin: 0 -30px;
  }
  section article.presentation .texte {
    gap: 2.5rem;
  }
  section article.presentation .texte h2 {
    font-size: 4rem;
    line-height: 90%;
  }
}
@media screen and (max-width: 767px) {
  section article.presentation {
    /* Les quatre photos flottantes sont calées hors du cadre
                   (calc(100% + Npx)) : à cette largeur elles tombent
                   intégralement en dehors de l'écran, autant ne pas les
                   charger ni les peindre. */
  }
  section article.presentation .texte {
    /* Le bloc est pleine largeur : c'est au texte de garder
                       les 30px de marge latérale de la page. */
    padding: 0 1.875rem;
    gap: 1.5rem;
  }
  section article.presentation .texte h2 {
    font-size: 2.5rem;
    line-height: 95%;
  }
  section article.presentation .bloc-texte-image img {
    display: none;
  }
}
section article.prestations {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.88rem;
  /* Mobile : plus de survol possible, donc le titre passe sous la
               photo en permanence et toutes les tuiles se valent — une seule
               colonne pleine largeur, .gros et .petit confondus. */
  /* Sous 1199px, les tuiles deviennent trop petites pour le titre au
               survol (mesuré 384px de texte pour 346px de tuile à 768px) : on
               passe partout au titre sous la photo, tuiles toutes identiques. */
  /* De 768 à 1198px, deux colonnes : une seule serait démesurée. */
}
section article.prestations .titre {
  max-width: 36rem;
}
section article.prestations .titre h2,
section article.prestations .titre h3 {
  font-family: basic-sans, sans-serif;
}
section article.prestations .titre h2 {
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 400;
}
section article.prestations .titre h3 {
  color: #AFA89F;
  font-size: 2.5rem;
  font-style: normal;
  font-weight: 400;
}
section article.prestations ul {
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 1.06rem;
}
section article.prestations ul li {
  -webkit-box-flex: 1;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  width: 100%;
  position: relative;
  border-radius: 0.625rem;
  overflow: hidden;
  /* Titre au survol : romain gras à 75px, la partie en <em>
                       en italique à 100px, sans soulignement (cf. maquette). */
  /* Petites tuiles : même composition, réduite au prorata
                       de la largeur (405/840 ≈ 0,48). */
}
section article.prestations ul li.gros {
  max-width: calc(50% - (1.06rem / 2));
  aspect-ratio: 1.37030995;
}
section article.prestations ul li.petit {
  max-width: calc(25% - (1.06rem / 1.33));
  aspect-ratio: 1.4516129;
}
section article.prestations ul li img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-filter: grayscale(1);
          filter: grayscale(1);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
section article.prestations ul li a {
  position: absolute;
  inset: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  padding: 1.75rem 1.0625rem;
  font-family: novantique-serif, sans-serif;
  font-size: 4.6875rem;
  font-weight: 700;
  line-height: 4.25rem;
  text-decoration: none;
  color: var(--fond);
  opacity: 0;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(55%, transparent), to(rgba(0, 0, 0, 0.35)));
  background: linear-gradient(180deg, transparent 55%, rgba(0, 0, 0, 0.35) 100%);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
  /* Le titre est enveloppé dans un span : en flex, chaque
                           bout de texte deviendrait un élément séparé, ce qui
                           supprime les espaces et empêche le retour à la ligne.
                           font-family et color doivent être réhérités : le
                           sélecteur universel les redéfinit sur tout élément. */
}
section article.prestations ul li a span {
  display: block;
  width: 100%;
  max-width: 33rem;
  font-family: inherit;
  color: inherit;
}
section article.prestations ul li a em {
  font-family: inherit;
  font-size: 6.25rem;
  font-style: italic;
  font-weight: 400;
  margin: 0;
}
section article.prestations ul li.petit a {
  padding: 0.8125rem 0.5rem;
  font-size: 2.25rem;
  line-height: 2.0625rem;
}
section article.prestations ul li.petit a span {
  max-width: 16rem;
}
section article.prestations ul li.petit a em {
  font-size: 3rem;
}
section article.prestations ul li:hover img {
  -webkit-filter: grayscale(0);
          filter: grayscale(0);
  -webkit-transform: scale(1.04);
          transform: scale(1.04);
}
section article.prestations ul li:hover a {
  opacity: 1;
}
@media screen and (max-width: 1198px) {
  section article.prestations ul {
    gap: 1.875rem;
    /* La puce était jusqu'ici masquée par l'overflow du li. */
    list-style: none;
  }
  section article.prestations ul li {
    /* Le li portait le ratio et rognait son contenu : c'est
                           désormais l'image qui porte le ratio, le li se laisse
                           allonger par le titre. */
    overflow: visible;
    border-radius: 0;
  }
  section article.prestations ul li.gros,
  section article.prestations ul li.petit {
    max-width: 100%;
    aspect-ratio: auto;
  }
  section article.prestations ul li img {
    height: auto;
    aspect-ratio: 1.37030995;
    border-radius: 0.625rem;
    /* Couleur d'emblée : le grayscale n'attendait
                               qu'un survol qui n'arrivera jamais au doigt. */
    -webkit-filter: grayscale(0);
            filter: grayscale(0);
  }
  section article.prestations ul li a,
  section article.prestations ul li.gros a,
  section article.prestations ul li.petit a {
    position: static;
    opacity: 1;
    background: none;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 0.625rem 0 0 0;
    color: var(--marron);
    font-size: 1.5rem;
    line-height: 2.125rem;
  }
  section article.prestations ul li a span,
  section article.prestations ul li.gros a span,
  section article.prestations ul li.petit a span {
    max-width: none;
  }
  section article.prestations ul li a em,
  section article.prestations ul li.gros a em,
  section article.prestations ul li.petit a em {
    font-size: 2rem;
  }
  section article.prestations ul li:hover img {
    -webkit-filter: grayscale(0);
            filter: grayscale(0);
    -webkit-transform: none;
            transform: none;
  }
}
@media screen and (min-width: 768px) and (max-width: 1198px) {
  section article.prestations ul li.gros,
  section article.prestations ul li.petit {
    max-width: calc(50% - (1.875rem / 2));
  }
}
/* ------------------------------------------------------------------
   Témoignages — "Leurs souvenirs, leurs mots"
------------------------------------------------------------------ */
section article {
  /* ------------------------------------------------------------------
           FAQ — "Tout ce que vous souhaitez savoir"
        ------------------------------------------------------------------ */
  /* ------------------------------------------------------------------
           Bandeau CTA — texte défilant au scroll
        ------------------------------------------------------------------ */
}
section article.temoignages {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 4.5rem;
  width: 100%;
  max-width: 106.75rem;
  margin: 0 auto;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  /* Entre 1199 et 1583px la colonne de gauche devient plus étroite
               que « souvenirs, », le mot le plus long du titre : il était coupé. */
}
section article.temoignages .bloc-sticky {
  width: 30%;
  position: relative;
}
section article.temoignages .bloc-sticky .inner {
  position: sticky;
  top: 0;
  height: 100vh;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  padding: 3.0625rem 0 4.5rem 0;
}
section article.temoignages .bloc-sticky .inner h2 {
  font-size: 6.25rem;
  line-height: 75%;
  color: var(--marron);
  margin: 0;
  max-width: 33rem;
}
section article.temoignages .bloc-sticky .inner h2 strong {
  font-weight: 700;
}
section article.temoignages .bloc-sticky .inner h2 em {
  font-weight: 700;
}
section article.temoignages .bloc-sticky .inner .texte {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 3.5rem;
  max-width: 28.6875rem;
}
section article.temoignages .bloc-sticky .inner .texte p {
  color: var(--marronc);
  margin: 0;
}
section article.temoignages .bloc-quotes {
  width: 65%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 4.6rem;
}
section article.temoignages .bloc-quotes .quote {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 2.3rem;
}
section article.temoignages .bloc-quotes .quote img {
  width: 100%;
  height: 37.75rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.625rem;
}
section article.temoignages .bloc-quotes .quote h4 {
  font-size: 3.125rem;
  font-weight: 700;
  line-height: 100%;
  color: var(--marron);
  margin: 0;
}
section article.temoignages .bloc-quotes .quote p {
  font-size: 1.125rem;
  color: var(--marron);
  margin: 0;
}
@media screen and (min-width: 1199px) and (max-width: 1583px) {
  section article.temoignages .bloc-sticky .inner h2 {
    font-size: 4.5rem;
  }
}
@media screen and (max-width: 1198px) {
  section article.temoignages {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  section article.temoignages .bloc-sticky {
    width: 100%;
  }
  section article.temoignages .bloc-sticky .inner {
    position: relative;
    height: auto;
    gap: 2.5rem;
    padding: 0;
  }
  section article.temoignages .bloc-sticky .inner h2 {
    font-size: 3.5rem;
  }
  section article.temoignages .bloc-quotes {
    width: 100%;
  }
  section article.temoignages .bloc-quotes .quote img {
    height: 20rem;
  }
  section article.temoignages .bloc-quotes .quote h4 {
    font-size: 2rem;
  }
}
section article.faq {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 4.375rem;
  width: 100%;
  max-width: 106.75rem;
  margin: 0 auto;
  /* 70px sous le titre pour 30px entre les blocs : on resserre pour
               retrouver le rythme vertical de la page en mobile. */
}
section article.faq .titre {
  text-align: center;
}
section article.faq .titre h2 {
  font-size: 6.25rem;
  line-height: 90%;
  color: var(--marron);
  font-weight: 400;
  margin: 0;
  max-width: 59.3125rem;
}
section article.faq .titre h2 strong em {
  font-weight: 700;
}
section article.faq ul {
  list-style: none;
  margin: 0;
  padding: 0 6.25rem;
  width: 100%;
}
section article.faq ul li {
  border-bottom: 0.0625rem solid var(--marron);
}
section article.faq ul li .question {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  font-family: novantique-serif, sans-serif;
  font-size: 2.5rem;
  color: var(--marron);
  text-align: center;
  padding: 1.4375rem 3rem;
  position: relative;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
section article.faq ul li .question:hover {
  color: var(--rouge);
}
section article.faq ul li .reponse {
  height: 0;
  overflow: hidden;
}
section article.faq ul li .reponse p {
  font-size: 1.125rem;
  color: var(--marron);
  text-align: center;
  max-width: 56rem;
  margin: 0 auto;
  padding: 0 0 2.1875rem 0;
}
section article.faq ul li.open .question {
  color: var(--rouge);
}
@media screen and (max-width: 1198px) {
  section article.faq ul {
    padding: 0;
  }
  section article.faq ul li .question {
    font-size: 1.5rem;
    padding: 1.25rem 0;
  }
  section article.faq .titre h2 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  section article.faq {
    gap: 1.875rem;
  }
}
section article.cta-banner {
  position: relative;
  width: 100%;
  height: 67.6875rem;
  background-color: var(--marron);
  border-radius: 0.625rem;
  margin-top: 1.875rem;
  /* Le texte ne défile plus (animation retirée côté JS) : il se pose
               centré dans la bande libre entre les polaroids du haut et la
               pastille, et se répartit sur deux ou trois lignes selon la
               largeur. Le calage vertical est fait sur le centre pour que les
               lignes en trop s'ajoutent des deux côtés. */
  /* Fond brun : le bandeau n'est pas au beige de la page, il doit
               donc filer de bord à bord, sans arrondi (« section » clippe en x,
               le débordement de 30px de chaque côté est sans danger). */
}
section article.cta-banner .fond-texture {
  position: absolute;
  inset: 0;
  border-radius: 0.625rem;
  background-image: url('../assets/texture.jpg');
  background-size: cover;
  mix-blend-mode: overlay;
  opacity: 0.1;
  pointer-events: none;
}
section article.cta-banner .texte-defilant {
  position: absolute;
  top: 29rem;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 100%;
  max-width: 84rem;
  padding: 0 2.5rem;
  margin: 0;
  font-family: novantique-serif, sans-serif;
  font-size: 3.75rem;
  line-height: 110%;
  color: var(--fond);
  text-align: center;
  text-wrap: balance;
}
section article.cta-banner .polaroid {
  position: absolute;
  border-radius: 0.625rem;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.15);
          box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.15);
}
section article.cta-banner .polaroid.p-1 {
  width: 28.3125rem;
  height: 17.5rem;
  right: 10.5rem;
  top: -1.875rem;
  -webkit-transform: rotate(10.5deg);
          transform: rotate(10.5deg);
}
section article.cta-banner .polaroid.p-2 {
  width: 8.0625rem;
  height: 9.8125rem;
  left: 37.9375rem;
  top: 11.8125rem;
  -webkit-transform: rotate(13.49deg);
          transform: rotate(13.49deg);
}
section article.cta-banner .polaroid.p-3 {
  width: 16.8125rem;
  height: 20.4375rem;
  left: 15.5rem;
  top: 41.75rem;
  -webkit-transform: rotate(10.67deg);
          transform: rotate(10.67deg);
}
section article.cta-banner .polaroid.p-4 {
  width: 13.25rem;
  height: 16.125rem;
  left: 26.3125rem;
  top: 53.375rem;
  -webkit-transform: rotate(-8.64deg);
          transform: rotate(-8.64deg);
}
section article.cta-banner .polaroid.p-5 {
  width: 19.6875rem;
  height: 21.625rem;
  right: 17.75rem;
  top: 41.5625rem;
  -webkit-transform: rotate(-6deg);
          transform: rotate(-6deg);
}
section article.cta-banner .pastille {
  position: absolute;
  left: 50%;
  top: 35.8125rem;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  background-color: var(--fond);
  border-radius: 3.375rem;
  padding: 0.9375rem;
}
@media screen and (max-width: 1198px) {
  section article.cta-banner {
    height: 40rem;
    /* Les 30px du gap de section suffisent à séparer le bandeau. */
    margin-top: 0;
  }
  section article.cta-banner .texte-defilant {
    font-size: 3rem;
    top: 17rem;
  }
  section article.cta-banner .polaroid.p-1 {
    width: 14rem;
    height: 8.75rem;
    right: 1rem;
  }
  section article.cta-banner .polaroid.p-3 {
    width: 9rem;
    height: 11rem;
    left: 2rem;
    top: 24rem;
  }
  section article.cta-banner .polaroid.p-4 {
    width: 7rem;
    height: 8.5rem;
    left: 8rem;
    top: 29rem;
  }
  section article.cta-banner .polaroid.p-5 {
    width: 10rem;
    height: 11rem;
    right: 2rem;
    top: 25rem;
  }
  section article.cta-banner .polaroid.p-2 {
    display: none;
  }
  section article.cta-banner .pastille {
    top: 26rem;
  }
}
@media screen and (max-width: 767px) {
  section article.cta-banner {
    width: calc(100% + 60px);
    margin: 0 -30px;
    border-radius: 0;
    height: 41rem;
    /* Cinq polaroids ne tiennent pas dans 390px sans manger le
                   texte : on n'en garde qu'un en haut et un en bas. */
  }
  section article.cta-banner .fond-texture {
    border-radius: 0;
  }
  section article.cta-banner .texte-defilant {
    top: 13rem;
    font-size: 1.75rem;
    padding: 0 1.5rem;
  }
  section article.cta-banner .pastille {
    top: 17.5rem;
  }
  section article.cta-banner .polaroid.p-2,
  section article.cta-banner .polaroid.p-4,
  section article.cta-banner .polaroid.p-5 {
    display: none;
  }
  section article.cta-banner .polaroid.p-1 {
    width: 11rem;
    height: 6.875rem;
    top: 1rem;
    right: 1.25rem;
  }
  section article.cta-banner .polaroid.p-3 {
    width: 9rem;
    height: 11rem;
    top: 27rem;
    left: 1.25rem;
  }
}
/* ==================================================================
   Page de vente
================================================================== */
section article {
  /* --------------------------------------------------------
           Header page de vente
        -------------------------------------------------------- */
  /* --------------------------------------------------------
           Marquee photos
        -------------------------------------------------------- */
  /* --------------------------------------------------------
           "Quand vos histoires se rencontrent" + galerie lightbox
        -------------------------------------------------------- */
  /* --------------------------------------------------------
           Slider "Écouter qui vous êtes" (fond rouge)
        -------------------------------------------------------- */
  /* --------------------------------------------------------
           "Mes méthodes de travail"
        -------------------------------------------------------- */
  /* --------------------------------------------------------
           Slider "Ce que je vous propose" (titre fixe)
        -------------------------------------------------------- */
}
section article.header-vente {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  /* En colonne, .bloc-texte n'est plus étiré (align-items: flex-start) :
               sans largeur explicite il se cale sur son min-content, imposé par
               la largeur fixe du paragraphe, et déborde à droite. */
  /* le pavé est du même beige que la page : l'indenter en plus de la
               marge de 30px du site ne ferait que rétrécir le titre */
}
section article.header-vente .bloc-image {
  width: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  height: 42rem;
}
section article.header-vente .bloc-image img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.625rem;
}
section article.header-vente .bloc-texte {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  position: relative;
  z-index: 1;
  margin-left: -8.125rem;
  padding-top: 14.6875rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  /* Titre et texte forment un seul pavé beige continu : il doit
                   couvrir la photo derrière lui (cf. maquette). */
}
section article.header-vente .bloc-texte .titre {
  background-color: var(--fond);
  border-radius: 0.625rem 0.625rem 0 0;
  padding: 2.3125rem 2.9375rem 2.75rem 2.9375rem;
}
section article.header-vente .bloc-texte .titre h1 {
  font-size: 6.0625rem;
  line-height: 100%;
  color: var(--rouge);
  margin: 0;
  font-weight: 300;
}
section article.header-vente .bloc-texte .titre h1 strong {
  font-weight: 700;
}
section article.header-vente .bloc-texte .texte {
  background-color: var(--fond);
  border-radius: 0 0 0.625rem 0.625rem;
  padding: 0 2.9375rem 2.5rem 2.9375rem;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  gap: 1.875rem;
}
section article.header-vente .bloc-texte .texte p {
  color: var(--rouge);
  margin: 0;
  width: 30.6875rem;
  max-width: 100%;
}
@media screen and (max-width: 1299px) {
  section article.header-vente {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 1.875rem;
  }
  section article.header-vente .bloc-image {
    width: 100%;
    height: 50vh;
  }
  section article.header-vente .bloc-texte {
    margin-left: 0;
    padding-top: 0;
  }
  section article.header-vente .bloc-texte .titre {
    padding: 1.5rem 1.5rem 1.25rem 1.5rem;
  }
  section article.header-vente .bloc-texte .titre h1 {
    font-size: 3rem;
  }
  section article.header-vente .bloc-texte .texte {
    padding: 0 1.5rem 1.5rem 1.5rem;
    width: 100%;
  }
}
@media screen and (max-width: 1198px) {
  section article.header-vente .bloc-texte {
    width: 100%;
  }
}
@media screen and (max-width: 767px) {
  section article.header-vente .bloc-texte .titre {
    padding: 0 0 1.25rem 0;
  }
  section article.header-vente .bloc-texte .titre h1 {
    font-size: 2.5rem;
  }
  section article.header-vente .bloc-texte .texte {
    padding: 0;
  }
}
section article.marquee {
  width: calc(100% + 60px);
  margin: -1.875rem -30px 0 -30px;
  overflow: hidden;
  /* Le gap de section tombe à 30px sous 1198px : la remontée négative
               l'annulerait entièrement au-dessus de la bande. */
}
section article.marquee .track {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.9375rem;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
}
section article.marquee .track img {
  cursor: pointer;
  width: 18.5625rem;
  height: 10.6875rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.625rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
@media screen and (max-width: 1198px) {
  section article.marquee {
    margin-top: 0;
  }
}
section article.histoires {
  position: relative;
  width: calc(100% + 60px);
  margin: 0 -30px 35.9375rem -30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 6.25rem 30px 0 30px;
}
section article.histoires .fond {
  position: absolute;
  min-width: 100%;
  left: 0;
  top: 0;
  z-index: 0;
}
section article.histoires .carte {
  position: relative;
  z-index: 1;
  background-color: var(--blanc);
  border-radius: 0.625rem;
  width: 81.25rem;
  max-width: 100%;
}
section article.histoires .carte .intro {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  gap: 3rem;
  padding: 5.0625rem 6.25rem 0 6.25rem;
}
section article.histoires .carte .intro h2 {
  font-size: 4.6875rem;
  line-height: 105%;
  color: var(--marron);
  margin: 0;
  width: 26rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  font-weight: 700;
}
section article.histoires .carte .intro p {
  font-size: 1.125rem;
  color: var(--marron);
  width: 34.375rem;
  margin: 0;
}
section article.histoires .carte .galerie {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 1.5625rem;
  padding: 5rem 6.25rem 0 6.25rem;
  margin-bottom: -35.9375rem;
}
section article.histoires .carte .galerie .colonne {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.5625rem;
}
section article.histoires .carte .galerie a {
  display: block;
  overflow: hidden;
  border-radius: 0.625rem;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}
section article.histoires .carte .galerie a img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
section article.histoires .carte .galerie a.haute {
  aspect-ratio: 0.66666667;
}
section article.histoires .carte .galerie a.basse {
  aspect-ratio: 1.5;
}
section article.histoires .carte .galerie a:hover img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}
@media screen and (max-width: 1198px) {
  section article.histoires {
    margin-bottom: 12rem;
  }
  section article.histoires .carte .intro {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 2.5rem 1.875rem 0 1.875rem;
  }
  section article.histoires .carte .intro h2 {
    font-size: 3rem;
    width: 100%;
  }
  section article.histoires .carte .intro p {
    width: 100%;
  }
  section article.histoires .carte .galerie {
    padding: 2.5rem 1.875rem 0 1.875rem;
    margin-bottom: -12rem;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    /* base 0 : les trois colonnes tiennent sur une ligne.
                           Avec 40% elles passaient en 2 + 1 pleine largeur. */
  }
  section article.histoires .carte .galerie .colonne {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 0px;
            flex: 1 1 0;
  }
}
@media screen and (max-width: 767px) {
  section article.histoires {
    /* la carte est blanche : elle va de bord à bord, le conteneur
                   n'a donc plus de gouttière à lui offrir */
    padding: 1.875rem 0 0 0;
  }
  section article.histoires .carte {
    width: 100%;
    max-width: none;
    border-radius: 0;
  }
  section article.histoires .carte .galerie {
    /* trois colonnes tomberaient sous 95px de large :
                           on repasse à deux, en maçonnerie équilibrée */
    display: block;
    -webkit-column-count: 2;
    -moz-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 1.5625rem;
    -moz-column-gap: 1.5625rem;
    column-gap: 1.5625rem;
  }
  section article.histoires .carte .galerie .colonne {
    display: contents;
  }
  section article.histoires .carte .galerie a {
    width: 100%;
    margin: 0 0 1.5625rem 0;
    -webkit-column-break-inside: avoid;
    -moz-column-break-inside: avoid;
         break-inside: avoid;
  }
}
section article.ecoute {
  position: relative;
  width: 100%;
  background-color: var(--rouge);
  border-radius: 0.625rem;
  min-height: 39.125rem;
  padding: 15.125rem 5.9375rem 5rem 0;
}
section article.ecoute .photo-haut,
section article.ecoute .photo-bas {
  position: absolute;
  border-radius: 0.625rem;
  z-index: 2;
}
section article.ecoute .photo-haut img,
section article.ecoute .photo-bas img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.625rem;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
section article.ecoute .photo-haut img.actif,
section article.ecoute .photo-bas img.actif {
  opacity: 1;
}
section article.ecoute .photo-haut {
  left: 38.5625rem;
  top: -6.375rem;
  width: 10.875rem;
  height: 16.0625rem;
  -webkit-transform: rotate(-20deg);
          transform: rotate(-20deg);
}
section article.ecoute .photo-bas {
  left: 67.65rem;
  top: 30.6875rem;
  width: 17.375rem;
  height: 10.5625rem;
  -webkit-transform: rotate(12deg);
          transform: rotate(12deg);
}
section article.ecoute .slides {
  position: relative;
}
section article.ecoute .slides .slide {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
  position: absolute;
  inset: 0 0 auto 0;
  opacity: 0;
  pointer-events: none;
}
section article.ecoute .slides .slide.actif {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
section article.ecoute .slides .slide .bloc-titre {
  width: 52.9375rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  text-align: right;
  border-top: 0.0625rem solid var(--fond);
  position: relative;
}
section article.ecoute .slides .slide .bloc-titre .label {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin: 0 0 0.6875rem 0;
  font-family: novantique-serif, sans-serif;
  font-style: italic;
  font-size: 1.875rem;
  color: var(--fond);
}
section article.ecoute .slides .slide .bloc-titre h3 {
  font-family: basic-sans, sans-serif;
  font-weight: 400;
  font-size: 4.6875rem;
  line-height: 100%;
  color: var(--fond);
  margin: 0;
  padding-top: 0.5rem;
}
section article.ecoute .slides .slide .bloc-texte {
  width: 34.375rem;
  padding-top: 0.5rem;
}
section article.ecoute .slides .slide .bloc-texte p {
  font-size: 1.125rem;
  color: var(--fond);
  margin: 0;
}
section article.ecoute .dots {
  position: absolute;
  left: 50.125rem;
  bottom: 6.75rem;
}
@media screen and (max-width: 1299px) {
  section article.ecoute {
    padding: 8rem 1.875rem 6rem 1.875rem;
  }
  section article.ecoute .photo-haut {
    left: 1.875rem;
    width: 10rem;
    height: 12rem;
  }
  section article.ecoute .photo-haut img {
    position: absolute;
  }
  section article.ecoute .photo-bas {
    display: none;
  }
  section article.ecoute .slides .slide {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 2rem;
  }
  section article.ecoute .slides .slide .bloc-titre {
    width: 100%;
  }
  section article.ecoute .slides .slide .bloc-titre h3 {
    font-size: 2.25rem;
  }
  section article.ecoute .slides .slide .bloc-texte {
    width: 100%;
  }
  section article.ecoute .dots {
    left: 1.875rem;
    bottom: 2rem;
  }
}
@media screen and (max-width: 767px) {
  section article.ecoute {
    /* fond rouge : le bloc sort des marges de la page */
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
    border-radius: 0;
    /* plus de photo sur mobile : la réserve du haut disparaît,
                   et la hauteur plancher qui l'accompagnait aussi. Il reste
                   le surtitre en absolu au-dessus du filet (45 + 11px). */
    padding: 5.375rem 1.875rem 6rem 1.875rem;
    min-height: 0;
  }
  section article.ecoute .photo-haut,
  section article.ecoute .photo-bas {
    display: none;
  }
}
section article.methodes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 5.9375rem;
  width: 100%;
}
section article.methodes .titre {
  text-align: center;
}
section article.methodes .titre h2 {
  font-size: 6.25rem;
  line-height: 90%;
  color: var(--marron);
  font-weight: 400;
  margin: 0;
}
section article.methodes .titre h2 strong {
  font-weight: 700;
}
section article.methodes ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3.125rem;
}
section article.methodes ul li {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  background-color: var(--blanc);
  border-radius: 0.625rem;
  position: relative;
  padding: 5.875rem 2.5rem 2rem 2.5rem;
  text-align: center;
}
section article.methodes ul li .numero {
  position: absolute;
  top: -2.8125rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  font-family: novantique-serif, sans-serif;
  font-style: italic;
  font-size: 6.25rem;
  line-height: 90%;
  color: var(--marron);
  margin: 0;
}
section article.methodes ul li h4 {
  font-family: basic-sans, sans-serif;
  font-size: 1.5625rem;
  color: var(--marron);
  margin: 0 0 2.0625rem 0;
  font-weight: 700;
}
section article.methodes ul li h4 em {
  display: block;
  font-weight: 400;
}
section article.methodes ul li p {
  font-size: 1.125rem;
  color: #3B3732;
  margin: 0;
}
@media screen and (max-width: 1299px) {
  section article.methodes ul {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  section article.methodes ul li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 40%;
            flex: 1 1 40%;
  }
  section article.methodes .titre h2 {
    font-size: 3rem;
  }
}
@media screen and (max-width: 767px) {
  section article.methodes ul {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    gap: 4rem;
  }
  section article.methodes ul li {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
  }
}
section article.formules {
  width: 100%;
  background-color: var(--blanc);
  border-radius: 0.625rem;
  padding: 1.25rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 3.875rem;
  position: relative;
}
section article.formules .bloc-image {
  width: 51.75rem;
  max-width: 50%;
  -ms-flex-negative: 0;
      flex-shrink: 0;
  position: relative;
  border-radius: 0.625rem;
  overflow: hidden;
  min-height: 40.5625rem;
}
section article.formules .bloc-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
section article.formules .bloc-image img.actif {
  opacity: 1;
}
section article.formules .bloc-contenu {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 0.9375rem 2.5rem 0.875rem 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
section article.formules .bloc-contenu h2 {
  font-size: 4.6875rem;
  line-height: 100%;
  color: var(--marron);
  font-weight: 700;
  font-style: italic;
  margin: 0 0 5.8125rem 0;
}
section article.formules .bloc-contenu h2 strong {
  font-style: normal;
}
section article.formules .bloc-contenu .slides {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
section article.formules .bloc-contenu .slides .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}
section article.formules .bloc-contenu .slides .slide.actif {
  position: relative;
  opacity: 1;
  pointer-events: auto;
}
section article.formules .bloc-contenu .slides .slide .prix {
  font-size: 1rem;
  color: var(--rouge);
  margin: 0;
}
section article.formules .bloc-contenu .slides .slide .nom {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 1.6875rem;
  font-family: basic-sans, sans-serif;
  font-weight: 400;
  font-size: 2.8125rem;
  color: var(--marron);
  margin: 0 0 2.375rem 0;
}
section article.formules .bloc-contenu .slides .slide .nom::after {
  content: "";
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border-top: 0.0625rem solid var(--marron);
}
section article.formules .bloc-contenu .slides .slide .liste {
  list-style: none;
  margin: 0 0 3.375rem 0;
  padding: 0;
}
section article.formules .bloc-contenu .slides .slide .liste li {
  font-size: 1.25rem;
  color: var(--marron);
}
section article.formules .bloc-contenu .dots {
  margin-top: 2rem;
}
@media screen and (max-width: 1299px) {
  section article.formules {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
  section article.formules .bloc-image {
    max-width: 100%;
    width: 100%;
    min-height: 20rem;
  }
  section article.formules .bloc-contenu {
    padding: 1rem;
  }
  section article.formules .bloc-contenu h2 {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
  }
  section article.formules .bloc-contenu .slides .slide .nom {
    font-size: 1.75rem;
  }
}
@media screen and (max-width: 767px) {
  section article.formules {
    /* fond blanc : le bloc sort des marges de la page */
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
    border-radius: 0;
    /* fin liseré blanc autour de la photo... */
    padding: 0.625rem;
    gap: 1.875rem;
    /* ...et 10 + 20 = les 30px de marge du site pour le texte */
  }
  section article.formules .bloc-contenu {
    padding: 1.25rem;
  }
}
/* ------------------------------------------------------------------
   Dots (communs aux sliders)
------------------------------------------------------------------ */
.dots {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  gap: 0.75rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.dots button {
  width: 0.9375rem;
  height: 0.9375rem;
  border-radius: 0.9375rem;
  border: 0.125rem solid transparent;
  background: rgba(89, 75, 57, 0.18);
  cursor: pointer;
  padding: 0;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  /* la puce active s'allonge en pastille (cf. maquette) */
}
.dots button.actif {
  width: 2.25rem;
  background-color: var(--marron);
  border-color: var(--marron);
}
.dots.clair button {
  background: var(--fond);
  border-color: transparent;
}
.dots.clair button.actif {
  background-color: transparent;
  border-color: var(--fond);
}
/* ------------------------------------------------------------------
   Lightbox
------------------------------------------------------------------ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: rgba(43, 35, 26, 0.95);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  opacity: 0;
  pointer-events: none;
}
.lightbox.ouverte {
  pointer-events: auto;
}
.lightbox img {
  max-width: 82vw;
  max-height: 85vh;
  border-radius: 0.625rem;
  -o-object-fit: contain;
     object-fit: contain;
}
.lightbox .fermer {
  position: absolute;
  top: 1.875rem;
  right: 2.5rem;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--fond);
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.lightbox .fermer:hover {
  color: var(--rouge);
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.lightbox .fleche {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: none;
  border: 0.0625rem solid var(--fond);
  border-radius: 50%;
  width: 3.75rem;
  height: 3.75rem;
  cursor: pointer;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
.lightbox .fleche::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-right: 0.125rem solid var(--fond);
  border-bottom: 0.125rem solid var(--fond);
}
.lightbox .fleche:hover {
  background-color: var(--rouge);
  border-color: var(--rouge);
}
.lightbox .fleche.prec {
  left: 2.5rem;
}
.lightbox .fleche.prec::before {
  -webkit-transform: rotate(135deg) translate(-0.0625rem, -0.0625rem);
          transform: rotate(135deg) translate(-0.0625rem, -0.0625rem);
}
.lightbox .fleche.suiv {
  right: 2.5rem;
}
.lightbox .fleche.suiv::before {
  -webkit-transform: rotate(-45deg) translate(-0.0625rem, -0.0625rem);
          transform: rotate(-45deg) translate(-0.0625rem, -0.0625rem);
}
.lightbox .compteur {
  position: absolute;
  bottom: 1.875rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  color: var(--fond);
  font-size: 1rem;
  letter-spacing: 0.125rem;
}
@media screen and (max-width: 1198px) {
  .lightbox .fleche {
    width: 2.75rem;
    height: 2.75rem;
  }
  .lightbox .fleche.prec {
    left: 0.75rem;
  }
  .lightbox .fleche.suiv {
    right: 0.75rem;
  }
}
/* ------------------------------------------------------------------
   Curseur flèche des sliders
------------------------------------------------------------------ */
article.zone-fleche {
  cursor: none;
}
.curseur-slider {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 150;
  width: 3.75rem;
  height: 3.75rem;
  margin: -1.875rem 0 0 -1.875rem;
  border-radius: 50%;
  background-color: var(--fond);
  border: 0.0625rem solid var(--rouge);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  pointer-events: none;
  opacity: 0;
  -webkit-transform: scale(0.5);
          transform: scale(0.5);
  -webkit-transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, -webkit-transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease;
  transition: opacity 0.25s ease, transform 0.25s ease, -webkit-transform 0.25s ease;
}
.curseur-slider::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-right: 0.125rem solid var(--rouge);
  border-bottom: 0.125rem solid var(--rouge);
}
.curseur-slider.visible {
  opacity: 1;
  -webkit-transform: scale(1);
          transform: scale(1);
}
.curseur-slider.gauche::before {
  -webkit-transform: rotate(135deg) translate(-0.0625rem, -0.0625rem);
          transform: rotate(135deg) translate(-0.0625rem, -0.0625rem);
}
.curseur-slider.droite::before {
  -webkit-transform: rotate(-45deg) translate(-0.0625rem, -0.0625rem);
          transform: rotate(-45deg) translate(-0.0625rem, -0.0625rem);
}
/* ==================================================================
   Pages contact & à propos
================================================================== */
button.cta {
  background: transparent;
  cursor: pointer;
  font-family: basic-sans, sans-serif;
}
section article {
  /* --------------------------------------------------------
           Header page de contact
        -------------------------------------------------------- */
  /* --------------------------------------------------------
           Section contact (fond rouge + formulaire)
        -------------------------------------------------------- */
  /* --------------------------------------------------------
           Voyages (page à propos)
        -------------------------------------------------------- */
}
section article.header-contact {
  width: 100%;
  max-width: var(--section);
  margin: 0 auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6875rem;
  padding-top: 2rem;
}
section article.header-contact h1 {
  font-size: 6.25rem;
  line-height: 100%;
  color: var(--rouge);
  width: 49.5625rem;
  max-width: 100%;
  margin: 0;
  font-weight: 400;
}
section article.header-contact h1 strong {
  font-weight: 400;
  font-style: italic;
}
section article.header-contact p {
  color: var(--rouge);
  width: 27.75rem;
  max-width: 100%;
  margin: 0;
}
@media screen and (max-width: 1198px) {
  section article.header-contact h1 {
    font-size: 3rem;
  }
}
section article.contact {
  position: relative;
  width: 100%;
  background-color: var(--rouge);
  border-radius: 0.625rem;
  height: 59.5625rem;
  margin-bottom: 11rem;
  /* La photo ne mord la carte que dans l'angle, et passe au-dessus
               (valeurs relevées sur la maquette). */
  /* Le formulaire fait 583px de large et il est ancré à 197px du bord
               droit ; la carte, elle, s'arrête à 872px du bord gauche. Les deux
               se recouvrent donc dès que la fenêtre passe sous 1728px (largeur de
               la maquette). En dessous, on empile au lieu de positionner. */
  /* Sous 1198px l'écart entre blocs tombe à 30px, alors que la photo
               déborde de 134px au-dessus du bloc : elle mordrait le texte du
               bloc précédent. On la fait rentrer dans le flux, en tête de la
               colonne, et on cale les espacements internes sur ce même 30px. */
  /* Mobile : le fond rouge n'est pas celui de la page, le bloc part
               donc de bord à bord. Et tout se centre. */
  /* Sous 400px, le label tenu sur une ligne (313px) touche presque le
               padding du bloc. */
}
section article.contact .photo-haut {
  position: absolute;
  left: 36.5rem;
  top: -7.5rem;
  width: 12.1875rem;
  height: 18rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.625rem;
  -webkit-transform: rotate(-12deg);
          transform: rotate(-12deg);
  z-index: 1;
}
section article.contact .photo-bas {
  position: absolute;
  left: 20.75rem;
  top: 39.8125rem;
  width: 17.3125rem;
  height: 11.4375rem;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.625rem;
  -webkit-transform: rotate(12deg);
          transform: rotate(12deg);
  z-index: 3;
}
section article.contact .bloc-titre {
  position: absolute;
  left: 0;
  top: 15.25rem;
  width: 52.9375rem;
  max-width: 50%;
  text-align: right;
  border-top: 0.0625rem solid var(--fond);
}
section article.contact .bloc-titre .label {
  position: absolute;
  bottom: 100%;
  right: 0;
  margin: 0 0 0.6875rem 0;
  font-family: novantique-serif, sans-serif;
  font-style: italic;
  font-size: 1.875rem;
  color: var(--fond);
  text-transform: uppercase;
  letter-spacing: 0.25rem;
  white-space: nowrap;
}
section article.contact .bloc-titre h2 {
  font-family: novantique-serif, sans-serif;
  font-weight: 400;
  font-size: 4.6875rem;
  line-height: 100%;
  color: var(--fond);
  margin: 0 0 0 auto;
  padding-top: 1.25rem;
  max-width: 38.75rem;
}
section article.contact .carte-infos {
  position: absolute;
  left: 29.9375rem;
  top: 28.8125rem;
  width: 23.4375rem;
  background-color: var(--blanc);
  border-radius: 0.625rem;
  padding: 1.25rem 3.4375rem;
  z-index: 2;
  -webkit-transform: rotate(-5deg);
          transform: rotate(-5deg);
  -webkit-box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.12);
          box-shadow: 0 0.625rem 1.875rem rgba(0, 0, 0, 0.12);
  text-align: right;
  /* téléphone et email : serif, plus grands (cf. maquette) */
  /* filet plein largeur de la carte, il déborde du padding */
}
section article.contact .carte-infos p {
  font-size: 1rem;
  line-height: 130%;
  color: var(--marron);
  margin: 0;
}
section article.contact .carte-infos p:last-of-type {
  font-family: novantique-serif, sans-serif;
  font-size: 1.5rem;
  line-height: 130%;
}
section article.contact .carte-infos .filet {
  display: block;
  height: 0.0625rem;
  background-color: var(--marron);
  margin: 0.9375rem -3.4375rem;
}
section article.contact .formulaire {
  position: absolute;
  right: 12.3125rem;
  top: 9.5rem;
  width: 36.4375rem;
  background-color: var(--blanc);
  border-radius: 0.625rem;
  padding: 2.5rem 2.125rem;
  z-index: 4;
  /* Contact Form 7 : il enveloppe chaque champ dans un span inline
                   et rend le bouton en <input>, qui n'accepte pas de ::before. */
}
section article.contact .formulaire form {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 1.6875rem;
  /* wpcf7_autop enveloppe chaque champ dans un <p> : sa marge
                       s'ajouterait au gap du form. */
}
section article.contact .formulaire form > p {
  margin: 0;
}
section article.contact .formulaire .champ label,
section article.contact .formulaire .wpcf7 p label {
  display: block;
  font-size: 1rem;
  color: var(--marron);
  margin-bottom: 0.8125rem;
}
section article.contact .formulaire .champ input,
section article.contact .formulaire .wpcf7 p input,
section article.contact .formulaire .champ textarea,
section article.contact .formulaire .wpcf7 p textarea {
  width: 100%;
  height: 3rem;
  background-color: var(--fond);
  border: 0.0625rem solid #E5DED5;
  border-radius: 0.625rem;
  padding: 0 1.25rem;
  font-size: 1rem;
  color: var(--marron);
  outline: none;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}
section article.contact .formulaire .champ input:focus,
section article.contact .formulaire .wpcf7 p input:focus,
section article.contact .formulaire .champ textarea:focus,
section article.contact .formulaire .wpcf7 p textarea:focus {
  border-color: var(--rouge);
}
section article.contact .formulaire .champ textarea,
section article.contact .formulaire .wpcf7 p textarea {
  height: 15.625rem;
  padding: 1rem 1.25rem;
  resize: vertical;
}
section article.contact .formulaire .cta {
  -ms-flex-item-align: start;
      align-self: flex-start;
  margin-top: 0.375rem;
}
section article.contact .formulaire .wpcf7-form-control-wrap {
  display: block;
}
section article.contact .formulaire input.cta {
  background: none;
  cursor: pointer;
}
section article.contact .formulaire input.cta:hover {
  background-color: var(--rouge);
  color: var(--fond);
}
section article.contact .formulaire .wpcf7-not-valid-tip {
  display: block;
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: var(--rouge);
}
section article.contact .formulaire .wpcf7-not-valid {
  border-color: var(--rouge);
}
section article.contact .formulaire .wpcf7-response-output {
  margin: 1.25rem 0 0 0;
  padding: 0.75rem 1.125rem;
  border-width: 0.0625rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  color: var(--marron);
}
section article.contact .formulaire .wpcf7-spinner {
  margin: 0 0 0 0.75rem;
  vertical-align: middle;
}
@media screen and (max-width: 1727px) {
  section article.contact {
    height: auto;
    margin-bottom: 0;
    padding: 8rem 1.875rem 3rem 1.875rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    gap: 3rem;
    /* la carte garde ses proportions de carte de visite */
    /* le formulaire garde sa largeur de maquette, centré */
  }
  section article.contact .photo-haut {
    left: 1.875rem;
    width: 10rem;
    height: 12rem;
  }
  section article.contact .photo-bas {
    display: none;
  }
  section article.contact .bloc-titre {
    position: relative;
    top: auto;
    max-width: 100%;
    width: 100%;
  }
  section article.contact .carte-infos {
    position: relative;
    left: auto;
    top: auto;
    width: 24.5rem;
    max-width: 100%;
    margin: 0 auto;
  }
  section article.contact .formulaire {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    max-width: 36.4375rem;
  }
}
@media screen and (max-width: 1299px) {
  section article.contact .bloc-titre h2 {
    font-size: 2.25rem;
  }
}
@media screen and (max-width: 1198px) {
  section article.contact {
    padding: 2.5rem 1.875rem;
    gap: 1.875rem;
  }
  section article.contact .photo-haut {
    position: relative;
    left: auto;
    top: auto;
    /* la rotation de 12deg déborde d'environ 15px sous l'image */
    margin-bottom: 0.9375rem;
  }
}
@media screen and (max-width: 767px) {
  section article.contact {
    width: calc(100% + 60px);
    margin-left: -30px;
    margin-right: -30px;
    border-radius: 0;
  }
  section article.contact .bloc-titre {
    text-align: center;
    /* le label est en absolu : sans left, il resterait calé à droite */
  }
  section article.contact .bloc-titre .label {
    left: 0;
  }
  section article.contact .bloc-titre h2 {
    margin: 0 auto;
  }
  section article.contact .carte-infos {
    text-align: center;
    /* 55px de padding ne laissaient que 220px de large : l'email
                       en serif 24px (262px) se coupait en plein milieu du mot */
    padding: 1.25rem 1.5rem;
    /* le filet déborde du padding : il suit sa nouvelle valeur */
  }
  section article.contact .carte-infos p:last-of-type {
    font-size: 1.375rem;
  }
  section article.contact .carte-infos .filet {
    margin: 0.9375rem -1.5rem;
  }
  section article.contact .formulaire {
    text-align: center;
    padding: 2rem 1.5rem;
    /* on ne centre que les étiquettes et le bouton : le texte
                       saisi, lui, reste calé à gauche */
    /* le bouton est un enfant direct du form dans le gabarit de
                       secours, où align-self le collerait à gauche */
  }
  section article.contact .formulaire input,
  section article.contact .formulaire textarea {
    text-align: left;
  }
  section article.contact .formulaire .cta {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
}
@media screen and (max-width: 399px) {
  section article.contact .bloc-titre .label {
    font-size: 1.5rem;
  }
}
section article.voyages {
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 6rem;
}
section article.voyages .carte-monde {
  display: block;
  margin: 0 auto 3.75rem auto;
  width: 81.125rem;
  max-width: 100%;
}
section article.voyages .destination {
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 6.25rem;
}
section article.voyages .destination .polaroids {
  position: relative;
  width: 34rem;
  height: 35.5rem;
  -ms-flex-negative: 0;
      flex-shrink: 0;
}
section article.voyages .destination .polaroids .tampon {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: multiply;
}
section article.voyages .destination .polaroids .cadre {
  position: absolute;
  background-color: var(--blanc);
  border-radius: 1.25rem;
  padding: 0.9375rem 0.9375rem 3.125rem 0.9375rem;
  -webkit-box-shadow: 0 0 0.625rem #D9CDB8;
          box-shadow: 0 0 0.625rem #D9CDB8;
}
section article.voyages .destination .polaroids .cadre img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.625rem;
  display: block;
}
section article.voyages .destination .polaroids .cadre-1 {
  width: 20.3125rem;
  height: 23.5rem;
  left: 2rem;
  top: 2rem;
  -webkit-transform: rotate(12.72deg);
          transform: rotate(12.72deg);
  z-index: 1;
}
section article.voyages .destination .polaroids .cadre-2 {
  width: 15.1875rem;
  height: 17.5rem;
  left: 14rem;
  top: 15.5rem;
  padding: 0.625rem 0.625rem 2.5rem 0.625rem;
  -webkit-transform: rotate(-10.66deg);
          transform: rotate(-10.66deg);
  z-index: 2;
}
section article.voyages .destination .texte {
  width: 34.375rem;
}
section article.voyages .destination .texte h3 {
  font-family: novantique-serif, sans-serif;
  font-weight: 400;
  font-size: 6.25rem;
  line-height: 100%;
  color: var(--marron);
  margin: 0 0 3.1875rem 0;
}
section article.voyages .destination .texte p {
  font-size: 1rem;
  color: var(--marron);
  margin: 0;
}
section article.voyages .destination.inverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}
section article.voyages .destination.d-1 .polaroids .tampon {
  width: 14.75rem;
  top: -4.25rem;
  left: 17.75rem;
  -webkit-transform: rotate(8deg);
          transform: rotate(8deg);
}
section article.voyages .destination.d-2 .polaroids .tampon {
  width: 22.375rem;
  top: 6.375rem;
  left: 18.1875rem;
  -webkit-transform: rotate(-12deg);
          transform: rotate(-12deg);
}
section article.voyages .destination.d-3 .polaroids .tampon {
  width: 12.8125rem;
  top: 24.5625rem;
  left: 4.25rem;
  -webkit-transform: rotate(15deg);
          transform: rotate(15deg);
}
@media screen and (max-width: 1299px) {
  section article.voyages {
    gap: 4rem;
  }
  section article.voyages .destination {
    -webkit-box-orient: vertical !important;
    -webkit-box-direction: normal !important;
        -ms-flex-direction: column !important;
            flex-direction: column !important;
    gap: 3rem;
  }
  section article.voyages .destination .polaroids {
    -webkit-transform: scale(0.75);
            transform: scale(0.75);
    -webkit-transform-origin: top center;
            transform-origin: top center;
    height: 27rem;
  }
  section article.voyages .destination .texte {
    width: 100%;
  }
  section article.voyages .destination .texte h3 {
    font-size: 3rem;
    margin-bottom: 1.5rem;
  }
}
footer {
  width: 100%;
  margin-top: 9.375rem;
  border-top: 0.0625rem solid var(--marron);
}
footer .footer-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
}
footer .footer-top .col {
  padding: 2rem 1.875rem;
  border-right: 0.0625rem solid var(--marron);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
footer .footer-top .col:last-child {
  border-right: none;
}
footer .footer-top .col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  gap: 0.875rem;
  /* sans unité : hérité comme ratio, donc calculé sur les 20px des liens */
  line-height: 1.2;
}
footer .footer-top .col ul a {
  font-size: 1.25rem;
  color: var(--marron);
}
footer .footer-top .col ul a:hover {
  color: var(--rouge);
}
footer .footer-top .identite {
  width: 37.2%;
  padding-left: 19.75rem;
  gap: 1.5625rem;
}
footer .footer-top .identite .nom h5 {
  font-size: 2.625rem;
  line-height: 110%;
  margin: 0;
  color: var(--rouge);
}
footer .footer-top .identite .nom p {
  letter-spacing: 0.05rem;
  font-size: 1.1875rem;
  line-height: 110%;
  margin: 0;
  color: var(--marron);
}
footer .footer-top .identite .adresse {
  font-size: 1.25rem;
  line-height: 120%;
  color: var(--marron);
  margin: 0;
}
footer .footer-top .label {
  width: 13.9%;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
footer .footer-top .label img {
  width: 6.25rem;
  height: auto;
}
footer .footer-top .liens {
  width: 16.7%;
  padding-left: 4.5rem;
}
footer .footer-top .prestations-liens {
  padding-left: 4.5625rem;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
footer .footer-bottom {
  background-color: var(--marron);
  height: 6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-top: 0.0625rem solid var(--marron);
}
footer .footer-bottom p {
  margin: 0;
  font-size: 1.25rem;
  color: var(--blanc);
}
footer .footer-bottom p a {
  color: var(--blanc);
  text-decoration: underline;
}
footer .footer-bottom p a:hover {
  color: var(--fond);
}
@media screen and (max-width: 1198px) {
  footer .footer-top {
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
  }
  footer .footer-top .col {
    width: 50% !important;
    padding: 1.875rem !important;
    border-bottom: 0.0625rem solid var(--marron);
    border-right: none;
  }
  footer .footer-top .identite {
    width: 100% !important;
    padding-left: 1.875rem !important;
  }
  footer .footer-bottom p {
    font-size: 0.875rem;
    text-align: center;
  }
}
@media screen and (max-width: 1198px) {
  footer {
    margin-top: 4rem;
  }
}