/* Pied de site commun : photo de la gamme en fond, liens violets à contour crème,
   titres en Fraunces, ligne du bas centrée avec le crédit Dréa Digital.
   Partagé par toutes les pages (classe r-footer--photo). Source : modèle Tapis magique. */


/* Pied de site de cette fiche seulement : une photo de la gamme en fond,
   voilée de crème pour que les liens restent bien lisibles. */
.r-footer--photo {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}


.r-footer__fond {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
}


.r-footer__fond img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 85% 50%;
  transform: scale(1.08);
  transform-origin: 85% 50%;
}


.r-footer__fond::after { content: none; }




.r-footer--photo .r-footer nav ul li a,
.r-footer--photo .r-footer__grid a {
  color: var(--r-ink);
  font-weight: 500;
}


.r-footer--photo .r-footer nav ul li a:hover {
  color: var(--encre-1);
}


/* Pied de site de cette fiche : écriture de la marque sur la photo. */
.r-footer--photo { color: var(--r-ink); }


.r-footer--photo a,
.r-footer--photo .r-footer__about,
.r-footer--photo nav > ul li a {
  text-shadow: 0 0 10px rgba(252, 251, 250, .95), 0 0 2px rgba(252, 251, 250, .9);
}


.r-footer--photo .r-footer nav ul li a,
.r-footer--photo .r-footer__grid a {
  color: var(--r-ink);
  font-weight: 500;
  text-decoration: none;
  background-image: linear-gradient(var(--arc-2), var(--arc-2));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s ease, color .2s ease;
}


.r-footer--photo .r-footer nav ul li a:hover {
  color: var(--encre-1);
  background-size: 100% 2px;
}


.r-footer--photo .r-footer__about {
  font-family: var(--rf-display);
  font-variation-settings: var(--rf-settings);
  font-size: clamp(1.2rem, 1.8vw, 1.45rem);
  line-height: 1.4;
  max-width: 28ch;
}


.r-footer--photo nav > p {
  display: block;
  margin: 0 0 1.2rem;
  padding-top: .9rem;
  border-top: 3px solid var(--arc-1);
  font-family: var(--rf-display);
  font-weight: var(--rf-weight);
  font-variation-settings: var(--rf-settings);
  font-size: 1.3rem;
  line-height: 1.35;
  letter-spacing: var(--rf-track);
  color: var(--r-ink);
  text-transform: none;
}


/* Pied de site : liens en typographie seule, avec un halo crème très doux
   pour rester lisibles sur la photo. Pas de boîte, pas de bloc. */
.r-footer--photo nav > ul li {
  margin: 0 0 .6rem;
}


.r-footer--photo .r-footer nav ul li a,
.r-footer--photo nav > ul li a {
  display: inline-block;
  color: var(--r-ink);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  text-shadow: 0 0 .7rem rgba(252, 251, 250, .95), 0 0 .2rem rgba(252, 251, 250, .9);
  background-image: linear-gradient(var(--arc-2), var(--arc-2));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: .15rem;
  transition: background-size .35s ease, color .2s ease;
}


.r-footer--photo .r-footer nav ul li a:hover,
.r-footer--photo nav > ul li a:hover {
  color: var(--encre-1);
  background-size: 100% 1px;
}


.r-footer--photo .r-footer__about {
  background: none;
  display: block;
  padding: 0;
  text-shadow: 0 0 .7rem rgba(252, 251, 250, .95), 0 0 .2rem rgba(252, 251, 250, .9);
}


/* Pied de site : texte crème avec un contour sombre fin, lisible aussi sur
   le noir de la photo. Le survol reste violet, comme validé. */
.r-footer--photo {
  --pied-texte: #FCFBFA;
  --pied-contour: rgba(20, 19, 18, .85);
}


.r-footer--photo .r-footer__about,
.r-footer--photo nav > ul li a,
.r-footer--photo nav > p {
  color: var(--pied-texte) !important;
  -webkit-text-stroke: .6px var(--pied-contour);
  paint-order: stroke fill;
  text-shadow: 0 1px .6rem rgba(20, 19, 18, .55), 0 0 .15rem rgba(20, 19, 18, .45);
}


.r-footer--photo nav > p {
  border-top-color: var(--arc-1);
}


.r-footer--photo .r-footer nav ul li a:hover,
.r-footer--photo nav > ul li a:hover {
  color: var(--encre-1) !important;
  -webkit-text-stroke: .6px rgba(20, 19, 18, .95);
}


.r-footer--photo .r-footer__grid svg,
.r-footer--photo .r-reseaux a {
  color: var(--pied-texte);
}


/* Pied de site, version logo : lettres noires, contour blanc épais, corps plus gros. */
.r-footer--photo {
  --pied-texte: #141312;
  --pied-contour: #FCFBFA;
}


.r-footer--photo .r-footer__about,
.r-footer--photo nav > ul li a,
.r-footer--photo nav > p {
  color: var(--pied-texte) !important;
  -webkit-text-stroke: 3px var(--pied-contour);
  paint-order: stroke fill;
  text-shadow: none;
}


.r-footer--photo nav > ul li a {
  font-size: 1.12rem;
  font-weight: 600;
}


.r-footer--photo nav > p {
  font-size: clamp(1.5rem, 2.4vw, 1.9rem);
}


.r-footer--photo .r-footer__about {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
}


.r-footer--photo nav > ul li a:hover {
  color: var(--encre-1) !important;
  -webkit-text-stroke: 3px var(--pied-contour);
}


/* Finition : contour fin pour les titres et la présentation (Fraunces),
   contour épais gardé pour les liens (Poppins, comme le logo), liens plus aérés. */
.r-footer--photo .r-footer__about,
.r-footer--photo nav > p {
  -webkit-text-stroke: 1px var(--pied-contour);
  font-weight: 500;
}


.r-footer--photo nav > ul li {
  margin: 0 0 .9rem;
}


/* Ligne du bas du pied : copyright et crédit lisibles sur la photo, centrés. */
.r-footer--photo .r-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .6rem 1.8rem;
  text-align: center;
}


.r-footer--photo .r-footer__bottom p {
  margin: 0;
  color: var(--pied-texte);
  font-size: .95rem;
  font-weight: 600;
  -webkit-text-stroke: 2px var(--pied-contour);
  paint-order: stroke fill;
}


.r-footer--photo .r-footer__bottom p:last-child {
  color: var(--encre-1);
  -webkit-text-stroke: 2px var(--pied-contour);
}


.r-footer--photo .r-footer__credit { display: inline-flex; align-items: center; gap: .5rem; }

.r-footer--photo .r-footer__credit-logo { height: 1.5rem; width: auto; display: inline-block; filter: drop-shadow(0 0 .3rem rgba(252, 251, 250, .9)); }


/* Ligne du bas centrée : copyright, puis crédit avec le logo, empilés au centre. */
.r-footer--photo .r-footer__bottom {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  text-align: center;
}

.r-footer--photo .r-footer__bottom p { width: 100%; text-align: center; }

.r-footer--photo .r-footer__credit { justify-content: center; white-space: nowrap; }


/* Crédit sur une seule ligne : « Direction technique : Dréa Digital » et le logo
   alignés sur la ligne de base, le logo descendu d'un poil pour être centré. */
.r-footer--photo .r-footer__credit { display: block; white-space: nowrap; }

.r-footer--photo .r-footer__credit a { display: inline; color: var(--encre-1); }

.r-footer--photo .r-footer__credit-logo {
  display: inline-block;
  height: 1.3rem;
  width: auto;
  vertical-align: -.22rem;
  margin-left: .35rem;
  filter: drop-shadow(0 0 .3rem rgba(252, 251, 250, .9));
}


/* Une seule ligne au centre : copyright, puis crédit avec le logo. Passe sur deux lignes seulement sur petit écran. */
.r-footer--photo .r-footer__bottom {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem 1.6rem;
}

.r-footer--photo .r-footer__bottom p { width: auto; }


/* Liens : lettres plus épaisses et contour un peu plus fin, pour que le noir
   reste dominant sur les zones claires et chargées de la photo. */
.r-footer--photo nav > ul li a {
  font-weight: 700 !important;
  font-size: 1.12rem;
  -webkit-text-stroke: 2px var(--pied-contour);
  text-shadow: 0 0 .6rem rgba(252, 251, 250, .55);
}


/* TEST couleur de base des liens : crème avec contour noir (inverse du logo). */
.r-footer--photo nav > ul li a {
  color: #FCFBFA !important;
  -webkit-text-stroke: 2px #141312;
  text-shadow: 0 1px .5rem rgba(20, 19, 18, .45);
}


/* Liens : violet de base, contour crème comme le logo. Au survol, le noir. */
.r-footer--photo nav > ul li a {
  color: var(--encre-1) !important;
  -webkit-text-stroke: 2px var(--pied-contour);
  text-shadow: 0 0 .6rem rgba(252, 251, 250, .55);
}

.r-footer--photo nav > ul li a:hover {
  color: var(--r-ink) !important;
  -webkit-text-stroke: 2px var(--pied-contour);
}


/* Version sans contour : texte crème, ombre sombre douce, survol violet. */
.r-footer--photo .r-footer__about,
.r-footer--photo nav > ul li a,
.r-footer--photo nav > p {
  color: #FCFBFA !important;
  -webkit-text-stroke: 0 !important;
  paint-order: normal;
  text-shadow: 0 1px .7rem rgba(20, 19, 18, .6), 0 0 .2rem rgba(20, 19, 18, .35);
}

.r-footer--photo nav > ul li a:hover {
  color: var(--encre-1) !important;
  -webkit-text-stroke: 0 !important;
}