@charset "UTF-8";
/* =====================================================================
   RG-SIT-CSS-002 - MISE EN PAGE DU SITE VITRINE
   Residence Georgette
   ---------------------------------------------------------------------
   Cette feuille ne redefinit aucune couleur, aucune taille et aucun
   espacement : elle n'emploie que les jetons declares dans rg-charte.css.
   Toute valeur litterale qui apparaitrait ici serait une infraction a la
   clause 10 du referentiel RG-CDC-001.

   Conception dans l'ordre telephone, tablette, ordinateur : les regles
   de base valent pour l'ecran de 360 px ; les requetes de media ne font
   qu'elargir cette base, sans jamais introduire de fonction nouvelle.

   Points de rupture retenus
     48em  ( 768 px)  tablette
     64em  (1024 px)  ordinateur

   Sommaire
     1. Ossature et conteneurs
     2. En-tete et navigation
     3. Banniere
     4. Blocs de contenu communs
     5. Cartes de logement
     6. Fiche de logement
     7. Galerie photographique
     8. Tableaux
     9. Barre d'action fixe
    10. Pied de page
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. OSSATURE ET CONTENEURS
   --------------------------------------------------------------------- */

.rg-conteneur {
  width: 100%;
  max-width: var(--rg-largeur-page);
  margin-inline: auto;
  padding-inline: var(--rg-e-3);
}
.rg-conteneur--etroit { max-width: var(--rg-largeur-etroite); }

.rg-section { padding-block: var(--rg-e-8); }
.rg-section--dense { padding-block: var(--rg-e-6); }

@media (min-width: 64em) {
  .rg-section { padding-block: var(--rg-e-12); }
  .rg-conteneur { padding-inline: var(--rg-e-4); }
}

/* Titre de section : centre, souligne d'un filet or de 64 px */
.rg-titre-section { text-align: center; margin-bottom: var(--rg-e-6); }
.rg-titre-section .rg-surtitre { margin-bottom: var(--rg-e-1); }
.rg-titre-section h2 { margin-bottom: var(--rg-e-2); }
/* Variante reduite a son surtitre : le titre de second niveau y est masque -
   il figure pour la structure du document, non pour l'oeil -, si bien que la
   gouttiere prevue sous lui creusait un vide sans objet. */
.rg-titre-section--simple { margin-bottom: var(--rg-e-4); }
.rg-titre-section h2::after {
  content: "";
  display: block;
  width: 64px; height: 2px;
  margin: var(--rg-e-2) auto 0;
  background: var(--rg-or);
}
.rg-titre-section p { margin-inline: auto; text-align: center; }

/* Filet de separation discret */
.rg-filet { border: 0; border-top: var(--rg-filet); margin-block: var(--rg-e-6); }

/* ---------------------------------------------------------------------
   2. EN-TETE ET NAVIGATION
   ---------------------------------------------------------------------
   Aucun menu deroulant, donc aucun script : sur telephone, la barre de
   navigation defile lateralement. Ce choix supprime le seul element du
   site qui aurait exige du JavaScript, et evite le piege au clavier des
   menus replies.
   --------------------------------------------------------------------- */

.rg-entete {
  position: sticky; top: 0; z-index: 50;
  background: rgba(253, 252, 249, 0.96);
  border-bottom: 1px solid var(--rg-sable);
  backdrop-filter: saturate(140%) blur(6px);
}

/* Sur telephone, la barre se replie sur deux lignes : la marque et le bouton
   de reservation sur la premiere, la navigation sur la seconde. Le bouton
   reste ainsi visible sans defilement, comme l'impose le cahier UX. */
.rg-entete__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rg-e-1) var(--rg-e-2);
  min-height: 56px;
  padding-block: var(--rg-e-1);
}
/* min-width: 0 est indispensable : sans lui, un element de type flex refuse
   de devenir plus etroit que son contenu, et la barre de navigation
   elargirait la page entiere au lieu de defiler sur elle-meme. */
.rg-entete__barre > .rg-nav { flex: 1 0 100%; order: 3; min-width: 0; }
.rg-entete__action { order: 2; }

.rg-entete__marque {
  display: inline-flex;
  align-items: center;
  gap: var(--rg-e-1);
  text-decoration: none;
  color: var(--rg-bleu-nuit);
}
.rg-entete__marque:hover { color: var(--rg-bleu-nuit); }
.rg-entete__monogramme { width: auto; height: 30px; display: block; }
.rg-entete__nom { font-size: var(--rg-t-1); line-height: 1.1; }
.rg-entete__nom small {
  display: block;
  font-family: var(--rg-texte);
  font-size: 0.58rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--rg-or-fonce);
}

/* Bouton de reservation de l'en-tete : present sur toutes les pages */
.rg-entete__action {
  padding-inline: var(--rg-e-2);
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  white-space: nowrap;
}

/* Correctif C5 et A2 - RG-WEB-DIAG-001, mesure T7 du 10 aout 2026.
   Sous 390 px de large, la marque et le bouton de reservation ne tenaient
   pas sur une meme ligne : la barre se repliait sur trois lignes et l'en-tete
   atteignait 161 px, contre 119 px au-dela. Sur le gabarit de fiche, ou
   s'ajoute la barre fixe basse de 73 px, l'emprise des elements persistants
   atteignait 0,2805 de la hauteur utile, au-dela du seuil de 0,25 retenu par
   le protocole.

   La correction reduit les trois postes qui composent cette premiere ligne,
   sans toucher a la navigation : monogramme, corps du nom de la marque, et
   encombrement du bouton. Aucune cible tactile ne descend sous 44 px de
   hauteur, la contrainte de la charte etant preservee. */
@media (max-width: 24.4375em) {          /* jusqu'a 391 px : 320, 360, 390 */
  .rg-entete__barre { gap: var(--rg-e-1); }
  .rg-entete__monogramme { height: 26px; }
  .rg-entete__nom { font-size: 1.05rem; }
  .rg-entete__nom small { font-size: 0.52rem; letter-spacing: 0.06em; }
  .rg-entete__action {
    padding-inline: 12px;
    font-size: 0.64rem;
    letter-spacing: 0.06em;
  }
}

/* Barre de navigation */
.rg-nav {
  border-top: 1px solid var(--rg-sable);
  background: var(--rg-coquillage);
  min-width: 0;
}
.rg-nav__liste {
  display: flex;
  align-items: stretch;
  gap: var(--rg-e-3);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.rg-nav__liste::-webkit-scrollbar { display: none; }

/* Reponse a l'observation A1, volet « LOCALISATION tronque ».
   La mesure T1 etablit qu'il ne s'agit pas d'un debordement du document :
   la barre defile sur elle-meme, et c'est le comportement voulu. Restait un
   defaut d'affordance : rien n'indiquait que la liste continue au-dela du
   bord. Un fondu de huit pixels le signale, sans modifier aucune mesure de
   mise en page. Il est retire des que la navigation tient en entier. */
@media (max-width: 63.9375em) {
  .rg-nav__liste {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent 100%);
  }
}

.rg-nav__lien {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--rg-e-1);
  font-size: var(--rg-t--1);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--rg-bleu-nuit);
  border-bottom: 2px solid transparent;
}
.rg-nav__lien:hover { color: var(--rg-or-fonce); border-bottom-color: var(--rg-sable); }
.rg-nav__lien[aria-current="page"] {
  color: var(--rg-or-fonce);
  border-bottom-color: var(--rg-or);
}

.rg-nav__element { position: relative; display: flex; }
.rg-nav__chevron {
  width: 14px; height: 14px;
  margin-left: 4px;
  flex: 0 0 auto;
  transition: transform var(--rg-transition);
}

/* Sous-menu.
   Sur telephone, il se deroule sous le lien parent des que celui-ci ou l'un
   de ses enfants recoit le focus du clavier ; il reste replie autrement, la
   barre de navigation defilant lateralement. Sur ordinateur, il s'ouvre au
   survol comme au focus. Aucun script n'intervient : ni ouverture, ni
   fermeture, ni piege au clavier possible. */
.rg-sous-menu {
  position: absolute;
  top: 100%; left: 0;
  z-index: 60;
  min-width: 13rem;
  margin: 0;
  padding: var(--rg-e-1) 0;
  list-style: none;
  background: var(--rg-coquillage);
  border: 1px solid var(--rg-sable);
  border-top: 2px solid var(--rg-or);
  border-radius: var(--rg-rayon);
  box-shadow: var(--rg-ombre);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity var(--rg-transition), transform var(--rg-transition),
              visibility var(--rg-transition);
}
.rg-nav__element--deploie:hover > .rg-sous-menu,
.rg-nav__element--deploie:focus-within > .rg-sous-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.rg-nav__element--deploie:hover > .rg-nav__lien .rg-nav__chevron,
.rg-nav__element--deploie:focus-within > .rg-nav__lien .rg-nav__chevron {
  transform: rotate(180deg);
}

.rg-sous-menu__lien {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--rg-e-3);
  font-size: var(--rg-t--1);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  color: var(--rg-bleu-nuit);
}
.rg-sous-menu__lien:hover {
  background: var(--rg-sable-pale);
  color: var(--rg-or-fonce);
}

/* Correctif C2 - RG-WEB-DIAG-001, sonde du 10 aout 2026.
   Sous 64em, la liste de navigation est un conteneur a defilement lateral.
   Declarer overflow-x: auto donne a l'axe vertical la valeur calculee auto :
   le conteneur ecrete donc aussi en hauteur. Mesure : clientHeight 44 px,
   scrollHeight 191 px, sous-menu haut de 151 px, ecretage constate aux
   quatre largeurs (320, 360, 390, 412).

   Le sous-menu est en consequence supprime sous cette largeur, chevron
   compris. Trois raisons, dans cet ordre :
     1. un menu ecrete est pire que pas de menu du tout ;
     2. sur un ecran tactile, ou :hover n'existe pas, une pression sur le
        lien parent ouvre de toute facon la page « Les logements », qui
        presente les trois appartements : la fonction est remplie ;
     3. sortir le sous-menu du conteneur a defilement exigerait soit un
        script, soit un positionnement fixe dont l'abscisse ne peut pas
        suivre un element qui defile.
   Au-dela de 64em, overflow vaut visible : aucun ecretage, le sous-menu est
   conserve tel quel. */
@media (max-width: 63.9375em) {
  .rg-sous-menu { display: none; }
  .rg-nav__chevron { display: none; }
}

@media (min-width: 64em) {
  .rg-entete__barre { min-height: 72px; gap: var(--rg-e-4); flex-wrap: nowrap; }
  .rg-entete__monogramme { height: 44px; }
  .rg-entete__nom { font-size: var(--rg-t-2); }
  .rg-nav { border-top: 0; background: transparent; margin-inline: 0; }
  .rg-entete__barre > .rg-nav { flex: 1 1 auto; order: 2; }
  .rg-nav__liste { justify-content: center; padding: 0; overflow: visible; }
  .rg-entete__action { order: 3; padding-inline: var(--rg-e-3); }
}

/* Fil d'Ariane */
.rg-fil { padding-block: var(--rg-e-1); font-size: var(--rg-t--1); }
.rg-fil ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--rg-e-1); margin: 0; padding: 0; list-style: none; }
.rg-fil li { display: flex; align-items: center; }
.rg-fil li + li::before { content: "/"; margin-right: var(--rg-e-1); color: var(--rg-sable); }
.rg-fil a, .rg-fil [aria-current="page"] {
  display: inline-flex;
  align-items: center;
  min-height: 24px;                      /* correctif C4, WCAG 2.2 § 2.5.8 */
}
.rg-fil a { color: var(--rg-basalte); text-decoration: none; }
.rg-fil a:hover { color: var(--rg-or-fonce); text-decoration: underline; }
.rg-fil [aria-current="page"] { color: var(--rg-bleu-nuit); }

/* ---------------------------------------------------------------------
   3. BANNIERE
   ---------------------------------------------------------------------
   Le voile degrade est impose par la clause 6.3 de la charte : aucun
   texte n'est pose directement sur une photographie. Il court du bleu
   abysse a 10 % d'opacite en haut vers 65 % en bas.
   --------------------------------------------------------------------- */

.rg-banniere {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 84svh;
  background: var(--rg-bleu-abysse);
  overflow: hidden;
}
.rg-banniere--breve { min-height: 46svh; }

.rg-banniere__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Point de cadrage releve.
   ---------------------------------------------------------------------
   Une banniere breve a une hauteur bornee - 40 vh - alors que sa largeur
   suit celle de l'ecran. Sur une fenetre de 2 500 pixels, le cadre atteint
   ainsi un rapport de 6:1 la ou l'image en fait 21:9, soit 2,33 : le
   navigateur en montre alors moins de quatre dixiemes, pris au milieu par
   defaut. Tout ce qui se tient dans le haut de la photographie disparait -
   le phare de la jetee, en l'espece.

   Douze pour cent au lieu de cinquante ramenent la fenetre vers le haut de
   l'image sans la coller au bord, ce qui conserve le sujet et un peu de ciel
   au-dessus. La regle ne s'applique qu'aux bannieres qui le demandent : les
   autres photographies ont leur sujet au centre, ou le cadrage par defaut
   est le bon. */
.rg-banniere__photo--sujet-haut { object-position: 50% 12%; }

/* Banniere de la page d'erreur.
   ---------------------------------------------------------------------
   Elle est plus haute qu'une banniere breve et moins qu'une banniere
   d'accueil : la page d'erreur n'a rien a vendre, mais elle doit poser un
   decor avant de proposer une sortie. Son discours est centre, ce qui n'est
   le cas d'aucune autre banniere du site - ailleurs le texte s'aligne a
   gauche, sur la colonne du contenu qui suit. Ici il n'y a pas de colonne :
   trois portes de sortie de meme rang, et rien qui commande de commencer
   par la gauche. */
.rg-banniere--erreur { min-height: 62svh; }
@media (min-width: 64em) {
  .rg-banniere--erreur { min-height: 58vh; }
}

.rg-banniere__contenu--centre {
  align-items: center;
  text-align: center;
}
.rg-banniere__contenu--centre .rg-banniere__accroche {
  margin-inline: auto;
}
/* Le monogramme surmonte le discours, comme au cartouche de l'accueil, mais
   plus discretement : la page d'erreur n'est pas une page de marque. */
.rg-banniere__monogramme {
  display: block;
  width: auto;
  height: clamp(48px, 4.6vw, 84px);
  margin: 0 auto var(--rg-e-2);
}
.rg-banniere::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
              rgba(7, 27, 39, 0.10) 0%,
              rgba(7, 27, 39, 0.45) 55%,
              rgba(7, 27, 39, 0.78) 100%);
}
.rg-banniere__contenu {
  position: relative; z-index: 1;
  width: 100%;
  padding-block: var(--rg-e-4);
  color: var(--rg-coquillage);
}
@media (min-width: 48em) {
  .rg-banniere__contenu { padding-block: var(--rg-e-6); }
}
.rg-banniere__contenu h1,
.rg-banniere__contenu p { color: var(--rg-coquillage); }
.rg-banniere__contenu .rg-surtitre { color: var(--rg-or); }

.rg-banniere__monogramme {
  width: auto; height: 72px;
  display: block;
  margin-bottom: var(--rg-e-3);
}

.rg-banniere__titre {
  font-family: var(--rg-titre);
  font-size: var(--rg-t-5);
  font-weight: 400;
  line-height: 1.08;
  margin-bottom: var(--rg-e-2);
  max-width: 20ch;
  text-wrap: balance;
}
.rg-banniere__accroche {
  font-size: var(--rg-t-0);
  line-height: 1.55;
  max-width: 46ch;
  margin-bottom: var(--rg-e-3);
  color: var(--rg-sable);
}
@media (min-width: 48em) {
  .rg-banniere__accroche {
    font-size: var(--rg-t-1);
    margin-bottom: var(--rg-e-4);
  }
}

.rg-banniere__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rg-e-2);
}
.rg-banniere__actions .rg-bouton { flex: 1 1 15rem; }

@media (min-width: 48em) {
  .rg-banniere__actions .rg-bouton { flex: 0 0 auto; }
  .rg-banniere__monogramme { height: 88px; }
}
@media (min-width: 64em) {
  .rg-banniere { min-height: 74vh; }
  .rg-banniere--breve { min-height: 40vh; }
  .rg-banniere__contenu { padding-block: var(--rg-e-12); }
}

/* ---------------------------------------------------------------------
   4. BLOCS DE CONTENU COMMUNS
   --------------------------------------------------------------------- */

/* 4.1 Bandeau de preuve : classement, label, distance a la plage */
.rg-preuves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--rg-e-3);
  padding-block: var(--rg-e-4);
  border-block: var(--rg-filet);
  text-align: center;
}
.rg-preuves__element { display: flex; flex-direction: column; gap: var(--rg-e-1); }
.rg-preuves__valeur {
  font-family: var(--rg-titre);
  font-size: var(--rg-t-2);
  line-height: 1.1;
}
.rg-preuves__libelle {
  font-size: var(--rg-t--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rg-basalte);
}

/* 4.2 Alternance texte / photographie */
.rg-duo {
  display: grid;
  gap: var(--rg-e-4);
  align-items: center;
}
.rg-duo__photo { display: block; width: 100%; border-radius: var(--rg-rayon-photo); }
.rg-duo__texte p { max-width: 56ch; }

@media (min-width: 64em) {
  .rg-duo { grid-template-columns: 1fr 1fr; gap: var(--rg-e-8); }
  .rg-duo--inverse .rg-duo__media { order: 2; }
}

/* 4.3 Liste d'atouts */
/* Deux colonnes a partir de la tablette, trois au-dela : les six atouts
   forment ainsi deux rangees pleines. Un ajustement automatique par
   auto-fit donnerait quatre colonnes puis une rangee de deux, dont le
   desequilibre se voit immediatement. */
.rg-atouts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rg-e-4);
  margin: 0; padding: 0;
  list-style: none;
}
@media (min-width: 48em) { .rg-atouts { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .rg-atouts { grid-template-columns: repeat(3, 1fr); } }
.rg-atouts__element { padding-top: var(--rg-e-3); border-top: 2px solid var(--rg-or); }
.rg-atouts__element h3 { font-size: var(--rg-t-1); margin-bottom: var(--rg-e-1); }
.rg-atouts__element p { font-size: var(--rg-t-0); color: var(--rg-basalte); margin: 0; }
.rg-fond-nuit .rg-atouts__element p { color: var(--rg-sable); }

/* 4.4 Liste a puces sobre */
.rg-liste { margin: 0 0 var(--rg-e-3); padding: 0; list-style: none; }
.rg-liste li {
  position: relative;
  padding-left: var(--rg-e-3);
  margin-bottom: var(--rg-e-1);
}
.rg-liste li::before {
  content: "";
  position: absolute; left: 0; top: 0.72em;
  width: 6px; height: 1px;
  background: var(--rg-or);
}

/* 4.5 Encart d'information */
.rg-encart {
  padding: var(--rg-e-3);
  background: var(--rg-sable-pale);
  border-left: 2px solid var(--rg-or);
  border-radius: var(--rg-rayon);
}
.rg-encart p:last-child { margin-bottom: 0; }

/* 4.5 bis Bouton isole a la suite d'un texte.
   Un paragraphe ordinaire laisse 24 pixels sous le texte qui le precede :
   c'est assez entre deux paragraphes, trop peu devant un bouton, dont la
   bordure vient alors toucher la derniere ligne. On porte l'ecart a un pas
   de plus de la grille spatiale. */
.rg-action-detachee { margin-top: var(--rg-e-3); }

/* 4.6 Appel a l'action de fin de page */
.rg-rappel { text-align: center; }
.rg-rappel h2 { margin-bottom: var(--rg-e-2); }
.rg-rappel p { margin-inline: auto; margin-bottom: var(--rg-e-4); }
.rg-rappel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rg-e-2);
  /* Sans cette levee, la rangee de boutons heriterait du max-width de 68
     caracteres applique a tout paragraphe : son centre serait celui de la
     colonne de lecture, non celui de la page, et l'ensemble paraitrait
     decale vers la gauche sur grand ecran. */
  max-width: none;
}

/* ---------------------------------------------------------------------
   5. CARTES DE LOGEMENT (charte, clause 7.2)
   ---------------------------------------------------------------------
   Ordre de lecture impose : photographie 4:3, surtitre, titre, etoiles,
   trois arguments au maximum, prix, bouton. L'uniformite des cartes est
   ce qui rend la comparaison possible ; toute carte plus riche qu'une
   autre fausse le choix du visiteur.
   --------------------------------------------------------------------- */

.rg-grille-logements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: var(--rg-e-4);
}

.rg-carte {
  display: flex;
  flex-direction: column;
  background: var(--rg-coquillage);
  border: 1px solid var(--rg-sable);
  border-radius: var(--rg-rayon);
  box-shadow: var(--rg-ombre);
  overflow: hidden;
  transition: box-shadow var(--rg-transition), transform var(--rg-transition);
}
.rg-carte:hover { transform: translateY(-2px); box-shadow: var(--rg-ombre-appui); }

.rg-carte__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--rg-rayon-photo);
}

.rg-carte__corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: var(--rg-e-2);
  padding: var(--rg-e-3);
}
.rg-carte__corps > .rg-surtitre { margin-bottom: 0; }
.rg-carte__titre { margin: 0; }
.rg-carte__arguments { flex: 1 1 auto; margin-bottom: 0; }
.rg-carte__arguments li { font-size: var(--rg-t-0); color: var(--rg-basalte); }

.rg-carte__prix { font-family: var(--rg-titre); font-size: var(--rg-t-2); line-height: 1; }
.rg-carte__prix .rg-unite {
  font-family: var(--rg-texte); font-size: var(--rg-t--1); color: var(--rg-basalte);
}
.rg-carte .rg-bouton { width: 100%; }

/* ---------------------------------------------------------------------
   6. FICHE DE LOGEMENT
   --------------------------------------------------------------------- */

/* 6.1 Bandeau de faits : pictogramme et libelle textuel, jamais l'un
       sans l'autre (charte, clause 7.4). */
.rg-faits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: var(--rg-e-3);
  margin: 0; padding: var(--rg-e-4) 0;
  border-block: var(--rg-filet);
}
.rg-faits__element {
  display: flex; align-items: center; gap: var(--rg-e-2);
}
.rg-faits__icone {
  flex: 0 0 auto;
  width: 24px; height: 24px;
  color: var(--rg-lagon);
}
.rg-faits__valeur { display: block; font-weight: 600; line-height: 1.2; }
.rg-faits__libelle { display: block; font-size: var(--rg-t--1); color: var(--rg-basalte); }

/* 6.2 Disposition principale de la fiche */
.rg-fiche { display: grid; gap: var(--rg-e-6); align-items: start; }

/* Correctif C1 - RG-WEB-DIAG-001, mesure T3 du 10 aout 2026.
   La valeur initiale de min-width sur un element de grille est auto, et non
   zero : l'element refuse alors de devenir plus etroit que la largeur
   minimale de son contenu. Le tableau de tarifs, dont les cellules portent
   white-space: nowrap, impose ici 351 pixels ; son conteneur a defilement
   n'y change rien, puisqu'il ne peut pas retrecir lui-meme.
   Mesure avant : scrollWidth 375 pour clientWidth 320, ecart 55 px.
   Mesure apres : ecart 0 px aux quatre largeurs. */
.rg-fiche > * { min-width: 0; }

@media (min-width: 64em) {
  .rg-fiche { grid-template-columns: minmax(0, 1fr) 21rem; gap: var(--rg-e-8); }
}

/* 6.3 Bloc de reservation en colonne laterale, colle au defilement */
.rg-reservation {
  padding: var(--rg-e-3);
  background: var(--rg-bleu-nuit);
  color: var(--rg-coquillage);
  border-radius: var(--rg-rayon);
}
.rg-reservation h2, .rg-reservation h3 {
  color: var(--rg-coquillage);
  font-size: var(--rg-t-2);
  margin-bottom: var(--rg-e-2);
}
.rg-reservation a:not(.rg-bouton) { color: var(--rg-or); }
.rg-reservation a:not(.rg-bouton):hover { color: var(--rg-or-clair); }
.rg-reservation :focus-visible { outline-color: var(--rg-or); }
.rg-reservation__resume {
  margin: 0 0 var(--rg-e-3);
  padding: 0 0 var(--rg-e-3);
  list-style: none;
  border-bottom: 1px solid rgba(198, 150, 74, 0.35);
}
.rg-reservation__resume li {
  display: flex; justify-content: space-between; gap: var(--rg-e-2);
  padding-block: 2px;
  font-size: var(--rg-t--1);
  color: var(--rg-sable);
}
.rg-reservation__resume b { color: var(--rg-coquillage); font-weight: 600; }
.rg-reservation .rg-bouton { width: 100%; }
.rg-reservation .rg-bouton + .rg-bouton { margin-top: var(--rg-e-2); }
.rg-reservation__mention {
  margin: var(--rg-e-2) 0 0;
  font-size: var(--rg-t--1);
  color: var(--rg-sable);
  text-align: center;
}

@media (min-width: 64em) {
  .rg-reservation { position: sticky; top: 6rem; }
}

/* 6.4 Equipements groupes par theme */
.rg-equipements {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--rg-e-4);
}
.rg-equipements h3 {
  font-family: var(--rg-texte);
  font-size: var(--rg-t--1);
  font-weight: 600;
  letter-spacing: var(--rg-interlettre);
  text-transform: uppercase;
  color: var(--rg-or-fonce);
  margin-bottom: var(--rg-e-2);
}
.rg-equipements ul { margin: 0; }
.rg-equipements li { font-size: var(--rg-t--1); color: var(--rg-basalte); }

/* 6.5 Regles du logement */
.rg-regles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--rg-e-2) var(--rg-e-4);
  margin: 0; padding: 0;
  list-style: none;
  font-size: var(--rg-t--1);
}

/* ---------------------------------------------------------------------
   7. GALERIE PHOTOGRAPHIQUE
   ---------------------------------------------------------------------
   Sur telephone : defilement lateral avec accrochage, une image a la
   fois, sans diaporama automatique ni script. Sur ordinateur : mosaique,
   la premiere image occupant quatre cellules.
   --------------------------------------------------------------------- */

.rg-galerie {
  display: flex;
  gap: var(--rg-e-2);
  margin: 0; padding: 0 0 var(--rg-e-2);
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--rg-or) var(--rg-sable);
}
.rg-galerie > li {
  flex: 0 0 86%;
  scroll-snap-align: center;
}
.rg-galerie img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rg-rayon-photo);
  background: var(--rg-sable-pale);
}

@media (min-width: 48em) {
  .rg-galerie {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    overflow: visible;
    padding-bottom: 0;
  }
  .rg-galerie > li { flex: none; }
}
@media (min-width: 64em) {
  /* Trois colonnes, la premiere photographie occupant quatre cellules. La
     galerie partage la largeur avec le bloc de reservation : au-dela de trois
     colonnes, les vignettes deviendraient trop petites pour etre lisibles. */
  .rg-galerie { grid-template-columns: repeat(3, 1fr); gap: var(--rg-e-2); }
  .rg-galerie > li:first-child { grid-column: span 2; grid-row: span 2; }
  .rg-galerie > li:first-child img { height: 100%; aspect-ratio: auto; }
}

.rg-galerie__legende {
  display: block;
  margin-top: var(--rg-e-1);
  font-size: var(--rg-t--1);
  color: var(--rg-basalte);
}

/* Vignette cliquable : la loupe n'apparait qu'au survol ou au focus, pour ne
   pas encombrer la composition. Elle est doublee d'un libelle accessible
   porte par l'attribut aria-label du lien. */
.rg-galerie__vignette {
  position: relative;
  display: block;
  text-decoration: none;
  overflow: hidden;
}
.rg-galerie__vignette img { transition: transform 320ms ease-out; }
.rg-galerie__vignette:hover img,
.rg-galerie__vignette:focus-visible img { transform: scale(1.03); }

.rg-galerie__loupe {
  position: absolute;
  right: var(--rg-e-1); bottom: var(--rg-e-1);
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  background: rgba(7, 27, 39, 0.72);
  color: var(--rg-coquillage);
  border-radius: var(--rg-rayon);
  opacity: 0;
  transition: opacity var(--rg-transition);
}
.rg-galerie__icone { width: 20px; height: 20px; }
.rg-galerie__vignette:hover .rg-galerie__loupe,
.rg-galerie__vignette:focus-visible .rg-galerie__loupe { opacity: 1; }

/* Sur un ecran tactile, il n'existe pas de survol : la loupe est visible en
   permanence, faute de quoi rien n'indiquerait que la vignette s'agrandit. */
@media (hover: none) {
  .rg-galerie__loupe { opacity: 1; }
}

/* ---------------------------------------------------------------------
   7 bis. VISIONNEUSE
   ---------------------------------------------------------------------
   Elle repose sur le seul selecteur :target. Une visionneuse n'est
   affichee que lorsque son identifiant est la cible de l'adresse courante,
   c'est-a-dire apres un clic sur la vignette correspondante. Fermer,
   avancer et reculer sont de simples liens vers une autre ancre.

   Consequence utile : l'adresse de chaque photographie est partageable,
   et le bouton de retour du navigateur ferme la visionneuse.
   --------------------------------------------------------------------- */

.rg-visionneuse {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  align-items: center;
  justify-content: center;
  padding: var(--rg-e-2);
  background: rgba(7, 27, 39, 0.94);
}
.rg-visionneuse:target { display: flex; }

/* Voile cliquable occupant tout l'ecran : il ferme la visionneuse. */
.rg-visionneuse__voile { position: absolute; inset: 0; }

.rg-visionneuse__cadre {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--rg-e-2);
  max-width: min(96vw, 1600px);
  margin: 0;
}
.rg-visionneuse__image {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 78svh;
  object-fit: contain;
  border-radius: var(--rg-rayon-photo);
}
.rg-visionneuse__legende {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--rg-e-2);
  font-size: var(--rg-t--1);
  color: var(--rg-sable);
}
.rg-visionneuse__rang {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.1em;
  color: var(--rg-or);
}

.rg-visionneuse__precedent,
.rg-visionneuse__suivant,
.rg-visionneuse__fermer {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  font-size: 1.9rem;
  line-height: 1;
  text-decoration: none;
  color: var(--rg-coquillage);
  background: rgba(11, 42, 60, 0.72);
  border: 1px solid rgba(198, 150, 74, 0.45);
  border-radius: var(--rg-rayon);
  transition: background-color var(--rg-transition), border-color var(--rg-transition);
}
.rg-visionneuse__precedent:hover,
.rg-visionneuse__suivant:hover,
.rg-visionneuse__fermer:hover {
  background: var(--rg-or);
  border-color: var(--rg-or);
  color: var(--rg-bleu-abysse);
}
.rg-visionneuse__precedent { left: var(--rg-e-1); top: 50%; transform: translateY(-50%); }
.rg-visionneuse__suivant   { right: var(--rg-e-1); top: 50%; transform: translateY(-50%); }
.rg-visionneuse__fermer    { right: var(--rg-e-1); top: var(--rg-e-1); font-size: 1.6rem; }

@media (min-width: 48em) {
  .rg-visionneuse { padding: var(--rg-e-4); }
  .rg-visionneuse__precedent { left: var(--rg-e-3); }
  .rg-visionneuse__suivant   { right: var(--rg-e-3); }
  .rg-visionneuse__fermer    { right: var(--rg-e-3); top: var(--rg-e-3); }
  .rg-visionneuse__image     { max-height: 82svh; }
}

/* ---------------------------------------------------------------------
   7 ter. AVIS DE VOYAGEURS
   ---------------------------------------------------------------------
   Deux elements distincts, et c'est voulu : d'abord la note globale,
   chiffre unique et verifiable, qui rassure en une seconde ; ensuite les
   temoignages, qui donnent la matiere. Le premier sans les seconds parait
   creux, les seconds sans le premier paraissent choisis.

   Sur telephone, les avis s'empilent : un defilement lateral obligerait a
   deviner qu'il en existe d'autres, alors qu'un avis se lit en entier ou
   ne se lit pas.
   --------------------------------------------------------------------- */

/* Bandeau de note globale */
.rg-note {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--rg-e-1) var(--rg-e-3);
  margin: 0 auto var(--rg-e-6);
  padding: var(--rg-e-3);
  max-width: none;
  text-align: center;
  border-block: var(--rg-filet);
}
.rg-note__valeur {
  font-family: var(--rg-titre);
  font-size: var(--rg-t-4);
  line-height: 1;
  color: var(--rg-bleu-nuit);
  /* Cormorant Garamond compose par defaut des chiffres elzeviriens, dont le
     un se confond avec un I majuscule et le sept descend sous la ligne de
     pied. Sur un chiffre isole qui porte a lui seul l'argument, on impose
     donc les chiffres de meme hauteur, et une chasse fixe. */
  font-variant-numeric: lining-nums tabular-nums;
}
.rg-note__valeur span {
  font-family: var(--rg-texte);
  font-size: var(--rg-t--1);
  color: var(--rg-basalte);
}
.rg-note__detail {
  font-size: var(--rg-t--1);
  color: var(--rg-basalte);
  max-width: none;
  margin: 0;
}
.rg-fond-nuit .rg-note__valeur { color: var(--rg-coquillage); }
.rg-fond-nuit .rg-note__valeur span,
.rg-fond-nuit .rg-note__detail { color: var(--rg-sable); }

/* Grille des temoignages */
.rg-avis {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--rg-e-3);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 48em) {
  .rg-avis { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: var(--rg-e-4); }
}

/* L'element de liste s'etire sur toute la hauteur de sa rangee ; la carte
   doit en faire autant, sans quoi les temoignages courts laissent un vide
   sous eux et la rangee parait desalignee. */
.rg-avis > li { display: flex; }
.rg-avis > li > .rg-avis__carte { flex: 1 1 auto; }

.rg-avis__carte {
  display: flex;
  flex-direction: column;
  gap: var(--rg-e-2);
  margin: 0;
  padding: var(--rg-e-3);
  background: var(--rg-coquillage);
  border: 1px solid var(--rg-sable);
  border-radius: var(--rg-rayon);
  box-shadow: var(--rg-ombre);
}
.rg-fond-sable .rg-avis__carte { background: var(--rg-coquillage); }

.rg-avis__note {
  display: flex;
  align-items: center;
  gap: var(--rg-e-1);
  font-size: var(--rg-t--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--rg-or-fonce);
}

/* Le guillemet ouvrant est purement decoratif : il est pose en fond, hors
   du flux du texte, pour ne pas etre restitue par un lecteur d'ecran. */
.rg-avis__texte {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  padding-top: var(--rg-e-2);
  font-size: var(--rg-t-0);
  line-height: 1.6;
  max-width: none;
}
.rg-avis__texte::before {
  content: "\201C";
  position: absolute;
  top: -0.35em;
  left: -0.06em;
  font-family: var(--rg-titre);
  font-size: 3.2rem;
  line-height: 1;
  color: var(--rg-sable);
  z-index: 0;
}
.rg-avis__texte q { quotes: none; position: relative; z-index: 1; }

/* La carte d'avis fixe sa propre couleur de texte au lieu de l'heriter de la
   section. Sur un fond sombre, le coquillage herite se posait sur le
   coquillage de la carte : le temoignage devenait invisible, blanc sur blanc.
   Une carte porte son fond ; elle doit porter son texte. */
.rg-avis__carte { color: var(--rg-bleu-nuit); }
.rg-avis__carte .rg-avis__signature { color: var(--rg-basalte); }

.rg-avis__signature {
  margin: 0;
  font-size: var(--rg-t--1);
  color: var(--rg-basalte);
  font-style: normal;
}
.rg-avis__signature b { color: var(--rg-bleu-nuit); font-weight: 600; }

.rg-avis__provenance {
  margin: var(--rg-e-3) 0 0;
  font-size: var(--rg-t--1);
  color: var(--rg-basalte);
  text-align: center;
  max-width: none;
}
.rg-fond-nuit .rg-avis__provenance { color: var(--rg-sable); }

/* ---------------------------------------------------------------------
   7 quater. DISTINCTIONS
   ---------------------------------------------------------------------
   Les distinctions sont representees par les logotypes officiels remis par
   les organismes qui les decernent, et non plus par la photographie des
   plaques de facade. La version precedente reposait sur l'idee qu'une
   plaque vissee au mur prouve le label la ou un logotype se contente de
   l'affirmer ; a l'usage, une photographie de plaque garde son cadre, son
   mur et sa lumiere, tandis qu'un logotype se lit d'un coup d'oeil a
   quarante pixels de haut. La lisibilite l'a emporte.

   Les fichiers sont reproduits sans recadrage ni recoloration : le trace
   d'une marque ne se retouche pas. Seul le fond blanc du logotype Qualite
   Tourisme a ete rendu transparent, faute de quoi un rectangle blanc de
   rapport 2,17 se detacherait du fond de la page.

   Le classement en meuble de tourisme, pour lequel aucun logotype n'est
   remis a l'exploitant, est rendu par un rang de quatre etoiles dessine en
   vectoriel, incorpore a la page. La clause 2.3 de la charte proscrit de
   reconstituer un signe officiel a partir d'une police ou d'un trace
   approchant ; elle ne vise pas le classement par etoiles, qui n'est pas un
   signe depose mais la mention d'un rang, librement representable des lors
   qu'il est exact.

   Aucun des trois signes ne porte de cadre. Le rang d'etoiles avait d'abord
   ete pose dans un cartouche a filet, par souci de lui donner l'emprise des
   deux logotypes ; le cadre lui composait un support qui n'est pas le sien
   et alourdissait un signe qui vaut par sa simplicite. Il a ete retire.

   Les trois vignettes partagent un gabarit unique de 112 sur 68 pixels, dans
   lequel chaque signe se centre a la taille qui lui convient. C'est le
   gabarit, et non le signe, qui assure l'alignement : un logotype horizontal
   de rapport 2,17, un macaron vertical de rapport 0,63 et un rang d'etoiles
   de rapport 5,09 ne peuvent partager ni largeur ni hauteur.
   --------------------------------------------------------------------- */

.rg-distinctions {
  display: flex;
  /* En colonne sur telephone : la disposition en ligne avec repli centrait
     chaque element separement dans la largeur disponible, si bien que les
     trois intitules commencaient a trois abscisses differentes - 136, 175 et
     184 pixels au releve. En colonne alignee a gauche, ils partagent la
     meme verticale, et c'est la colonne entiere qui se centre. */
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rg-e-3) var(--rg-e-4);
  /* Empilees sur telephone, les distinctions forment une colonne dont la
     largeur epouse le contenu, puis se centre : les trois intitules
     s'alignent ainsi sur une meme verticale, ce qu'un simple centrage de
     chaque ligne ne donnerait pas, les illustrations n'ayant pas la meme
     largeur. */
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.rg-distinctions__element {
  display: flex;
  align-items: center;
  gap: var(--rg-e-2);
  text-align: left;
}

/* Gabarit commun aux trois signes : un logotype horizontal, un macaron
   vertical et un panonceau occupent la meme emprise. */
.rg-distinctions__vignette {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 112px;
  height: 68px;
}
/* Les trois distinctions ne passent en ligne qu'a partir de 72em.
   Le seuil a ete releve de 64 a 72em le 11 aout 2026, avec le passage aux
   logotypes officiels : le gabarit des vignettes etant passe de 96 a 112
   pixels, la ligne ne tenait plus a 1024 pixels et les intitules se
   coupaient en deux - « Meuble de / tourisme », « Etablissement /
   recommande ». A 48em, plus tot, elles se repliaient sur deux lignes et le
   filet de separation du deuxieme element se retrouvait orphelin en tete de
   la seconde ligne. */
@media (min-width: 72em) {
  .rg-distinctions {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
  }
  .rg-distinctions__element + .rg-distinctions__element {
    padding-left: var(--rg-e-4);
    border-left: 1px solid var(--rg-sable);
  }
}

/* Les logotypes sont poses sans cadre ni ombre portee : un signe officiel se
   presente sur fond neutre, et toute bordure ajoutee lui composerait un
   support qui n'est pas le sien. Chacun est dimensionne par le cote qui le
   caracterise - la largeur pour un signe horizontal, la hauteur pour un
   macaron vertical -, l'autre cote suivant le rapport d'origine. */
.rg-logo-distinction { display: block; }

.rg-distinctions__vignette .rg-logo-distinction {
  width: 104px;
  height: auto;
}
.rg-distinctions__vignette--macaron .rg-logo-distinction {
  width: auto;
  height: 64px;
}

/* Rang d'etoiles du classement : dessin vectoriel, mis a l'echelle sans
   perte. Pose sans cadre, comme les deux logotypes voisins. */
.rg-panonceau {
  display: block;
  width: 108px;
  height: auto;
}

.rg-distinctions__intitule {
  display: block;
  font-size: var(--rg-t--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  color: var(--rg-bleu-nuit);
}
.rg-distinctions__precision {
  display: block;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--rg-basalte);
}
/* Logotypes du pied de page.
   Sur le bleu nuit, le brun du texte « QUALITE TOURISME » tombe a un rapport
   de contraste de 1,4 : illisible. Les deux signes sont donc poses sur un
   cartouche blanc, avec la marge de protection que prevoit toute charte de
   marque. Cette presentation est celle qu'un fond sombre appelle, et elle
   evite d'avoir a recolorer un logotype, ce qui serait une alteration. */
.rg-pied__labels {
  display: flex;
  align-items: stretch;
  gap: var(--rg-e-2);
  margin: var(--rg-e-3) 0 0;
}
.rg-pied__cartouche {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 9px 11px;
  background: #fff;
  border-radius: var(--rg-rayon-photo);
}
.rg-pied__cartouche .rg-logo-distinction { width: 92px; height: auto; }
.rg-pied__cartouche--etroit { padding: 5px 7px; }
.rg-pied__cartouche--etroit .rg-logo-distinction { width: auto; height: 46px; }

/* ---------------------------------------------------------------------
   7 quinquies. COMMODITES DU QUARTIER
   ---------------------------------------------------------------------
   Une liste plutot qu'un tableau. Le releve comporte trois donnees par
   entree - distance, nom, categorie -, ce qui appelle d'ordinaire trois
   colonnes ; mais un tableau de trois colonnes sur un telephone de 360
   pixels impose un defilement horizontal, et l'on perd la premiere colonne
   en lisant la troisieme. La liste, elle, se replie : la distance passe
   au-dessus du nom sur les ecrans etroits, et rejoint sa colonne des que la
   place le permet.

   La distance est portee en tete, non en fin de ligne. C'est la donnee que
   l'on balaie - « qu'est-ce qui est a moins de trois cents metres ? » -, et
   la ranger a gauche, alignee a droite dans sa colonne, en fait une echelle
   verticale que l'oeil parcourt d'un trait. Les entrees sont classees par
   eloignement pour la meme raison.
   --------------------------------------------------------------------- */

/* Les filets sont portes par chaque entree, non par une gouttiere coloree :
   une liste de longueur impaire laisserait sinon, en deux colonnes, une
   demi-case teintee au coin inferieur droit - un trou visible que rien ne
   justifie. */
.rg-commodites {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rg-commodite {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: baseline;
  gap: var(--rg-e-1) var(--rg-e-3);
  margin: 0;
  padding: var(--rg-e-2) 0;
  border-top: 1px solid var(--rg-sable);
}
.rg-commodite:last-child { border-bottom: 1px solid var(--rg-sable); }

.rg-commodite__distance {
  font-family: var(--rg-texte);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;   /* les chiffres s'alignent en colonne */
  letter-spacing: 0.04em;
  text-align: right;
  color: var(--rg-or-fonce);            /* 4,79:1 sur coquillage, 4,41 sur sable */
  white-space: nowrap;
}

.rg-commodite__corps { min-width: 0; }  /* cf. grille CSS, taille minimale automatique */

.rg-commodite__nom {
  display: block;
  font-weight: 600;
  color: var(--rg-bleu-nuit);
  text-decoration: none;
}
.rg-commodite__nom:hover,
.rg-commodite__nom:focus-visible { text-decoration: underline; }
/* La fleche signale un lien sortant sans occuper de place dans le flux :
   elle est posee dans la marge du texte, en exposant. */
.rg-commodite__nom::after {
  content: "\2197";                     /* fleche vers le nord-est */
  font-size: 0.7em;
  vertical-align: 0.35em;
  margin-inline-start: 0.25em;
  color: var(--rg-or-fonce);
}

.rg-commodite__categorie {
  display: block;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--rg-basalte);
}

/* En dessous de 30em, la colonne de distance couterait plus qu'elle ne
   rapporte : elle passe au-dessus du nom, alignee a gauche avec lui. */
@media (max-width: 29.99em) {
  .rg-commodite { grid-template-columns: 1fr; gap: 2px; }
  .rg-commodite__distance { text-align: left; }
}

/* Deux colonnes des que la largeur le permet : les listes comptent jusqu'a
   quinze entrees, et une colonne unique obligerait a un long defilement. */
@media (min-width: 48em) {
  .rg-commodites { grid-template-columns: 1fr 1fr; column-gap: var(--rg-e-6); }
  .rg-commodite:nth-last-child(-n + 2) { border-bottom: 1px solid var(--rg-sable); }
}

/* ---------------------------------------------------------------------
   8. TABLEAUX
   --------------------------------------------------------------------- */

.rg-tableau-defilant { overflow-x: auto; margin-bottom: var(--rg-e-3); }

.rg-tableau {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--rg-t--1);
}
.rg-tableau caption {
  text-align: left;
  padding-bottom: var(--rg-e-2);
  font-weight: 600;
  color: var(--rg-basalte);
}
.rg-tableau th, .rg-tableau td {
  padding: var(--rg-e-1) var(--rg-e-2);
  text-align: left;
  border-bottom: 1px solid var(--rg-sable);
  white-space: nowrap;
}
.rg-tableau thead th {
  background: var(--rg-sable-pale);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--rg-bleu-nuit);
}
.rg-tableau tbody th { font-weight: 600; white-space: normal; }
.rg-tableau td { font-variant-numeric: tabular-nums; }

/* Grille saisonniere du partenaire de location de vehicules */
.rg-saison { margin-bottom: var(--rg-e-6); }
.rg-saison h3 { margin-bottom: var(--rg-e-1); }
.rg-saison .rg-mention { margin-bottom: var(--rg-e-2); }

/* Flotte : categorie, modele, segment */
.rg-flotte {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--rg-e-2);
  margin: 0 0 var(--rg-e-2);
  padding: 0;
  list-style: none;
}
.rg-flotte__element {
  display: flex;
  align-items: center;
  gap: var(--rg-e-2);
  padding: var(--rg-e-2);
  background: var(--rg-coquillage);
  border: 1px solid var(--rg-sable);
  border-radius: var(--rg-rayon);
}
.rg-flotte__categorie {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px;
  font-family: var(--rg-titre);
  font-size: var(--rg-t-1);
  color: var(--rg-or-fonce);
  background: var(--rg-sable-pale);
  border-radius: var(--rg-rayon);
}
.rg-flotte__vehicule { display: block; line-height: 1.25; }
.rg-flotte__segment {
  display: block;
  font-size: var(--rg-t--1);
  color: var(--rg-basalte);
}

/* Liste ordonnee : le numero remplace le filet or */
.rg-liste--numerotee { counter-reset: etape; }
.rg-liste--numerotee li { counter-increment: etape; }
.rg-liste--numerotee li::before {
  content: counter(etape) ".";
  top: 0;
  width: auto; height: auto;
  background: none;
  font-size: var(--rg-t--1);
  font-weight: 600;
  color: var(--rg-or-fonce);
}

/* ---------------------------------------------------------------------
   9. BARRE D'ACTION FIXE (telephone uniquement)
   ---------------------------------------------------------------------
   Elle porte l'action decisive de la fiche de logement. Le remplissage
   bas ajoute au corps de page garantit qu'elle ne masque jamais la fin
   du contenu ni le pied de page.
   --------------------------------------------------------------------- */

.rg-barre-action {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--rg-e-2);
  padding: var(--rg-e-1) var(--rg-e-2)
           calc(var(--rg-e-1) + env(safe-area-inset-bottom, 0px));
  background: var(--rg-bleu-nuit);
  border-top: 1px solid var(--rg-or);
}
.rg-barre-action__intitule {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--rg-t--1);
  line-height: 1.25;
  color: var(--rg-sable);
}
.rg-barre-action__intitule b { display: block; color: var(--rg-coquillage); }
.rg-barre-action .rg-bouton { flex: 0 0 auto; padding-inline: var(--rg-e-3); }

body:has(.rg-barre-action) { padding-bottom: 4.5rem; }

/* Suite du correctif A2 - RG-WEB-DIAG-001, mesure T7 du 10 aout 2026.
   Apres reduction de l'en-tete, l'emprise restait a 0,2573 sur le gabarit de
   fiche a 320 px : la barre basse s'y repliait sur deux lignes et passait de
   72,97 a 88,95 px. Le libelle et le bouton sont donc resserres sous 391 px,
   sans que la cible tactile descende sous 44 px de hauteur. */
@media (max-width: 24.4375em) {
  .rg-barre-action { gap: var(--rg-e-1); }
  .rg-barre-action__intitule { font-size: 0.72rem; line-height: 1.2; }
  .rg-barre-action .rg-bouton {
    padding-inline: 14px;
    font-size: 0.64rem;
    letter-spacing: 0.06em;
  }
}

@media (min-width: 64em) {
  .rg-barre-action { display: none; }
  body:has(.rg-barre-action) { padding-bottom: 0; }
}

/* ---------------------------------------------------------------------
   9 bis. UNICITE DE L'APPEL A L'ACTION SUR TELEPHONE
   ---------------------------------------------------------------------
   Releve du 10 aout 2026 sur la fiche du T3 - 120 m2, a 390 px de large :
   neuf boutons, dont quatre portaient la meme sollicitation et trois le
   meme numero de telephone. Le defaut n'est pas l'encombrement d'un ecran
   - deux boutons au plus etaient visibles a la fois - mais la repetition
   au fil du defilement.

   La clause 7.1 de la charte veut une action decisive unique par ecran
   visible. Sur telephone, cette action est la barre fixe basse : elle
   accompagne le visiteur en permanence, et porte le nom du logement. Tout
   ce qui la double est donc retire, et elle seule demeure.

   Les regles ci-dessous ne s'appliquent qu'aux pages qui portent une barre
   d'action, c'est-a-dire aux seules fiches de logement. Sur les autres
   pages, le bouton de l'en-tete reste le seul appel permanent : il ne doit
   pas disparaitre.
   --------------------------------------------------------------------- */

@media (max-width: 63.9375em) {

  /* Le bouton de l'en-tete ferait double emploi avec la barre fixe basse,
     plus visible et plus explicite. */
  body:has(.rg-barre-action) .rg-entete__action { display: none; }

  /* Le bloc de reservation, qui devient un simple empilement sous le
     contenu, se reduit a son resume de faits : surface, capacite, chambres,
     salles de bains, duree minimale, tarif sur demande. Ses boutons
     repetaient ceux de la section « Tarif et devis » situee juste au-dessus. */
  .rg-reservation .rg-bouton,
  .rg-reservation__mention { display: none; }
  .rg-reservation__resume { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
}

/* ---------------------------------------------------------------------
   10. PIED DE PAGE
   --------------------------------------------------------------------- */

.rg-pied {
  background: var(--rg-bleu-abysse);
  color: var(--rg-sable);
  padding-block: var(--rg-e-8) var(--rg-e-4);
}
.rg-pied__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--rg-e-6);
}
.rg-pied h2 {
  font-family: var(--rg-texte);
  font-size: var(--rg-t--1);
  font-weight: 600;
  letter-spacing: var(--rg-interlettre);
  text-transform: uppercase;
  color: var(--rg-or);
  margin-bottom: var(--rg-e-2);
}
.rg-pied__monogramme { height: 64px; width: auto; margin-bottom: var(--rg-e-2); display: block; }
.rg-pied address { font-style: normal; }
.rg-pied ul { margin: 0; padding: 0; list-style: none; }
.rg-pied li { margin-bottom: 0; }
.rg-pied a { color: var(--rg-or); }
.rg-pied a:hover { color: var(--rg-or-clair); }

/* Correctif C4 - RG-WEB-DIAG-001, mesure T10 du 10 aout 2026.
   Les liens du pied de page mesuraient 20 px de haut, ceux du fil d'Ariane
   15 px, pour un plancher de 24 px fixe par le critere 2.5.8 des WCAG 2.2.
   Le critere admet une exception pour les liens situes dans une phrase ; ce
   n'est pas le cas ici, ou chaque lien constitue a lui seul un element de
   liste. La hauteur est donc portee a 32 px, ce qui laisse en outre huit
   pixels de separation entre deux cibles voisines. */
.rg-pied li a,
.rg-pied ul a {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
}
.rg-signature a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Suite du correctif C4.
   Le critere 2.5.8 des WCAG 2.2 excepte les liens « situes dans une phrase,
   ou dont la taille est contrainte par l'interligne du texte environnant ».
   L'exception s'applique aux numeros de telephone et aux adresses de
   courriel cites au fil du texte ; elle ne s'applique pas a un lien qui
   occupe seul son paragraphe ou son element de liste, lequel remplit alors
   une fonction de navigation. Le selecteur :only-child distingue exactement
   ces deux cas, sans avoir a marquer les liens un par un dans le HTML. */
main p > a:only-child,
.rg-liste li > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}
.rg-pied__bas {
  margin-top: var(--rg-e-6);
  padding-top: var(--rg-e-3);
  border-top: 1px solid rgba(198, 150, 74, 0.35);
  font-size: var(--rg-t--1);
  text-align: center;
}
.rg-pied__bas p { max-width: none; margin: 0; }

/* ---------------------------------------------------------------------
   11. SYSTEME VISUEL REPRIS DE LA CAMPAGNE INSTAGRAM
   ---------------------------------------------------------------------
   La charte RG-WEB-CDC-001 indique, en sa clause 1.2, que l'identite de
   reference n'est pas celle du theme du site actuel mais celle de la
   campagne Instagram deja produite. Les quatre dispositifs qui font la
   signature de ces visuels sont donc transposes ici a l'ecran :

     a. un filet or en retrait, qui encadre l'image comme un passe-partout ;
     b. un cartouche d'identite centre en tete : monogramme, nom de la
        marque en capitales espacees, filets or, lieu, quatre etoiles ;
     c. une pastille de qualification, en capitales tres espacees, posee
        au-dessus du titre ;
     d. une signature de bas de visuel : compte social et adresse du site.

   Aucun de ces elements n'introduit de couleur ni de mesure nouvelle :
   tous emploient les jetons de rg-charte.css.
   --------------------------------------------------------------------- */

/* a. Filet or en retrait ---------------------------------------------- */
.rg-encadre { position: relative; }
.rg-encadre::before {
  content: "";
  position: absolute;
  inset: var(--rg-e-2);
  border: 1px solid rgba(198, 150, 74, 0.55);
  pointer-events: none;
  z-index: 2;
}
@media (min-width: 48em) {
  .rg-encadre::before { inset: var(--rg-e-3); }
}

/* b. Cartouche d'identite --------------------------------------------- */
/* Le cartouche se met a l'echelle de la fenetre, non par paliers.
   ---------------------------------------------------------------------
   Il etait auparavant fige a deux tailles : 40 pixels de monogramme sur
   telephone, 56 au-dela de 48em. Sur un ecran de 2 000 pixels, le signe
   occupait donc la meme place que sur une tablette, et se perdait dans la
   photographie. Chaque dimension suit desormais la largeur de la fenetre
   entre deux bornes, par clamp() : une valeur plancher, une part de la
   largeur, un plafond.

   Le plafond n'est pas decoratif. Le nom « RESIDENCE GEORGETTE » compte
   dix-neuf signes espaces de 0,26 cadratin ; au-dela d'environ 2,6 rem il
   deborderait du conteneur sur les formats intermediaires. Le plancher, lui,
   garantit que le cartouche reste lisible sur un telephone de 320 pixels,
   ou 2,6 vw ne vaudrait que 8 pixels.

   Le monogramme culmine a 132 pixels, soit plus du triple de sa taille
   d'origine, sans jamais depasser la definition du fichier qui le porte -
   603 pixels de haut, soit une densite d'ecran de 4,5. Il monte plus vite
   que le nom, a 7,2 vw contre 2,6 : c'est un trace fin et etroit, dont la
   largeur ne vaut que 0,43 fois la hauteur ; a taille egale il pese moins
   dans l'oeil qu'une ligne de capitales espacees. */
.rg-cartouche {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(var(--rg-e-1), 0.6vw, var(--rg-e-3));
  text-align: center;
  margin-bottom: var(--rg-e-3);
}
.rg-cartouche__monogramme {
  display: block;
  width: auto;
  height: clamp(64px, 7.2vw, 132px);
}

.rg-cartouche__nom {
  font-family: var(--rg-titre);
  font-size: clamp(1.25rem, 2.6vw, 2.9rem);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.2;
  margin: 0;
  color: var(--rg-coquillage);
}

/* Ligne du lieu : deux filets or encadrant un texte en tres petites
   capitales. Les filets sont produits par des pseudo-elements, jamais
   par des caracteres de dessin, afin de rester lisibles par un lecteur
   d'ecran. */
.rg-cartouche__lieu {
  display: flex;
  align-items: center;
  gap: var(--rg-e-1);
  font-family: var(--rg-texte);
  font-size: clamp(0.60rem, 0.95vw, 1.05rem);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--rg-sable);
  margin: 0;
  max-width: none;
}
.rg-cartouche__lieu::before,
.rg-cartouche__lieu::after {
  content: "";
  width: clamp(18px, 3vw, 56px);
  height: 1px;
  background: var(--rg-or);
  flex: 0 0 auto;
}

/* Les etoiles suivent la meme progression. La marge negative de droite
   compense l'espacement porte par le dernier caractere : sans elle, le rang
   parait decale vers la gauche d'une demi-lettre. */
.rg-cartouche__etoiles { margin: 0; }
.rg-cartouche .rg-etoiles {
  font-size: clamp(0.85rem, 1.25vw, 1.5rem);
  letter-spacing: clamp(6px, 0.9vw, 15px);
  margin-inline-end: clamp(-15px, -0.9vw, -6px);
}

@media (min-width: 48em) {
  .rg-cartouche { margin-bottom: var(--rg-e-4); }
  .rg-cartouche__nom { letter-spacing: 0.26em; }
  .rg-cartouche__lieu { letter-spacing: 0.22em; gap: var(--rg-e-2); }
}

/* c. Pastille de qualification ---------------------------------------- */
.rg-pastille {
  display: inline-block;
  padding: 5px 14px;
  font-family: var(--rg-texte);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.4;
  border-radius: var(--rg-rayon);
  background: var(--rg-or);
  color: var(--rg-bleu-abysse);          /* 6,58:1 - conforme AA */
  margin-bottom: var(--rg-e-2);
}
.rg-pastille--lagon { background: var(--rg-lagon); color: var(--rg-coquillage); }
.rg-pastille--corail { background: var(--rg-corail); color: var(--rg-coquillage); }

/* Pastille posee sur la photographie d'une carte de logement */
.rg-carte__media { position: relative; display: block; }
.rg-carte__media .rg-pastille {
  position: absolute;
  left: var(--rg-e-2);
  bottom: var(--rg-e-2);
  margin: 0;
  z-index: 1;
}

/* d. Signature de bas de banniere -------------------------------------- */
.rg-signature {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rg-e-1) var(--rg-e-3);
  margin: var(--rg-e-4) 0 0;
  padding-top: var(--rg-e-2);
  border-top: 1px solid rgba(198, 150, 74, 0.45);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--rg-sable);
  max-width: none;
}
.rg-signature a { color: var(--rg-sable); text-decoration: none; }
.rg-signature a:hover { color: var(--rg-or-clair); text-decoration: underline; }

/* Banniere de l'accueil : le cartouche est en tete, le discours en bas.
   La composition reprend celle des visuels carres de la campagne. */
.rg-banniere--cartouche {
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
}

/* Bascule de langue.
   ---------------------------------------------------------------------
   Discrete mais reperable : le libelle est ecrit dans la langue vers
   laquelle il conduit, ce qui le rend reconnaissable a qui ne lit pas la
   langue courante. Il precede le bouton de reservation dans l'ordre du
   document comme dans celui du regard : on choisit sa langue avant de
   choisir d'agir. */
.rg-entete__langue {
  flex: 0 0 auto;
  order: 3;
  padding: 6px 10px;
  font-family: var(--rg-texte);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--rg-basalte);
  border: 1px solid var(--rg-sable);
  border-radius: var(--rg-rayon);
  white-space: nowrap;
}
.rg-entete__langue:hover,
.rg-entete__langue:focus-visible {
  color: var(--rg-bleu-nuit);
  border-color: var(--rg-or);
}
@media (min-width: 64em) {
  .rg-entete__action { order: 4; }
}

/* Galerie simple, sans visionneuse.
   Employee par la page anglaise, qui donne a voir sans dupliquer le
   mecanisme d'agrandissement porte par les pages francaises. */
.rg-galerie-simple {
  display: grid;
  /* Six vues, et un minimum de 20 rem : la grille se resout en trois colonnes
     des 64 em, soit deux rangees pleines. A 15 rem elle en formait quatre sur
     un ecran de 1 280 pixels, laissant la seconde rangee a moitie vide.
     Le min() est indispensable : 20 rem valent 320 pixels, soit la largeur
     entiere du plus petit telephone. Sans lui, la colonne refusait de
     descendre sous cette valeur et debordait de la page de 24 pixels. */
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: var(--rg-e-2);
  margin: 0 0 var(--rg-e-4);
  padding: 0;
  list-style: none;
}
.rg-galerie-simple__photo {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--rg-rayon-photo);
}