/* Réunion Xpérience — couleur et motifs.

   Le site reposait sur un seul turquoise très pâle, servi comme fond
   pour tout : les encadrés, les étiquettes, les cartes, les notes, les
   survols. Rien n'en ressortait, et les sections se confondaient.

   Cette feuille, chargée en dernier, fait deux choses et rien d'autre :

   1. Elle donne à chaque section de l'accueil sa propre couleur, celle
      de ce dont elle parle — le lagon pour l'île, la lave pour les
      décors, la forêt pour les sentiers, le couchant pour les choses à
      faire. Le thème s'en servait déjà pour trois sections, par la
      variable --u : on la généralise.

   2. Elle pose les deux figures de l'île, la paille-en-queue et la
      queue de baleine, en filigrane sur les en-têtes et les bas de
      section. Toujours sous le texte, toujours décoratives, jamais
      cliquables.

   Elle ne touche à aucune mise en page : uniquement des couleurs et des
   pseudo-éléments décoratifs. C'est ce qui permet de la charger après
   la couche mobile sans défaire ses garanties. */

:root{
  /* Le pâle d'origine, remonté d'un cran : il était si clair qu'un fond
     coloré ne se distinguait pas du blanc de la page. */
  --turq-p:#DCF1F3;
  --peq:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20124%22%3E%3Cg%20fill%3D%22%25230E8189%22%3E%3Cpath%20d%3D%22M96%2057%20C70%2059%2044%2063%2012%2070%20C44%2066%2070%2063%2096%2061%20Z%22%2F%3E%3Cpath%20d%3D%22M96%2063%20C72%2068%2048%2075%2018%2086%20C50%2078%2074%2071%2097%2067%20Z%22%2F%3E%3Cpath%20d%3D%22M118%2053%20C110%2038%2092%2019%2060%206%20C77%2023%2096%2041%20110%2056%20Z%22%2F%3E%3Cpath%20d%3D%22M118%2071%20C110%2086%2092%20105%2060%20118%20C77%20101%2096%2083%20110%2068%20Z%22%2F%3E%3Cpath%20d%3D%22M160%2062%20C154%2056%20140%2052%20124%2051%20C104%2050%2092%2055%2092%2062%20C92%2069%20104%2074%20124%2073%20C140%2072%20154%2068%20160%2062%20Z%22%2F%3E%3Cpath%20d%3D%22M158%2058%20C166%2058%20174%2060%20178%2062%20C174%2064%20166%2066%20158%2066%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --peq-c:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20240%20124%22%3E%3Cg%20fill%3D%22%2523FFFFFF%22%3E%3Cpath%20d%3D%22M96%2057%20C70%2059%2044%2063%2012%2070%20C44%2066%2070%2063%2096%2061%20Z%22%2F%3E%3Cpath%20d%3D%22M96%2063%20C72%2068%2048%2075%2018%2086%20C50%2078%2074%2071%2097%2067%20Z%22%2F%3E%3Cpath%20d%3D%22M118%2053%20C110%2038%2092%2019%2060%206%20C77%2023%2096%2041%20110%2056%20Z%22%2F%3E%3Cpath%20d%3D%22M118%2071%20C110%2086%2092%20105%2060%20118%20C77%20101%2096%2083%20110%2068%20Z%22%2F%3E%3Cpath%20d%3D%22M160%2062%20C154%2056%20140%2052%20124%2051%20C104%2050%2092%2055%2092%2062%20C92%2069%20104%2074%20124%2073%20C140%2072%20154%2068%20160%2062%20Z%22%2F%3E%3Cpath%20d%3D%22M158%2058%20C166%2058%20174%2060%20178%2062%20C174%2064%20166%2066%20158%2066%20Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
  --bal:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20112%22%3E%3Cpath%20fill%3D%22%2523123B4E%22%20d%3D%22M88%20112%20C86%2092%2084%2078%2080%2070%20C62%2056%2032%2044%204%2038%20C30%2026%2062%2024%2086%2038%20C92%2041%2096%2045%20100%2050%20C104%2045%20108%2041%20114%2038%20C138%2024%20170%2026%20196%2038%20C168%2044%20138%2056%20120%2070%20C116%2078%20114%2092%20112%20112%20Z%22%2F%3E%3C%2Fsvg%3E");
  --bal-c:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20200%20112%22%3E%3Cpath%20fill%3D%22%2523FFFFFF%22%20d%3D%22M88%20112%20C86%2092%2084%2078%2080%2070%20C62%2056%2032%2044%204%2038%20C30%2026%2062%2024%2086%2038%20C92%2041%2096%2045%20100%2050%20C104%2045%20108%2041%20114%2038%20C138%2024%20170%2026%20196%2038%20C168%2044%20138%2056%20120%2070%20C116%2078%20114%2092%20112%20112%20Z%22%2F%3E%3C%2Fsvg%3E");
}

/* --- La couleur de chaque section ------------------------------------ */

#ou-aller{--u:#0E8189}        /* le lagon */
.direct{--u:#C2451D}          /* le direct : ce qui bouge maintenant */
#mondes{--u:#A8502A}          /* les décors : la lave */
#a-voir{--u:#157A6E}          /* les lieux */
#randonnees{--u:#2F7D4F}      /* les sentiers : la forêt */
#choses-a-faire{--u:#C2451D}  /* les choses à faire : le couchant */
#altitude{--u:#2A6F8E}        /* du lagon au sommet */
#saisons{--u:#D9941F}         /* les saisons : le soleil */
#offres{--u:#0E8189}          /* les adresses */
#pro{--u:#5FC8CE}             /* les professionnels : fond sombre, accent clair */
.news{--u:#157A6E}            /* l'infolettre */

/* Le suptitre et le filet d'en-tête prennent cette couleur. Le thème le
   faisait pour trois sections, en dur : on le fait pour toutes. */
.head .sup{color:var(--u,var(--turq-d))}
.head{position:relative}
.head>h2{position:relative;z-index:1}

/* Un filet court sous le titre de section : de la couleur sans fond
   coloré, donc sans risque pour la lisibilité du texte. */
.head .sup::after{content:"";display:block;width:46px;height:3px;margin-top:9px;
  background:var(--u,var(--turq-d));opacity:.9}

/* --- Les motifs ------------------------------------------------------ */

/* La paille-en-queue, en haut à droite de chaque en-tête de section. */
.head::after{content:"";position:absolute;right:0;top:-14px;width:124px;height:88px;
  background:var(--peq) no-repeat center/contain;opacity:.1;pointer-events:none;z-index:0}

/* La queue de baleine, au bas des sections à fond teinté. */
section.rev{position:relative;overflow:hidden}
section.rev::after{content:"";position:absolute;left:18px;bottom:14px;width:132px;height:74px;
  background:var(--bal) no-repeat bottom center/contain;opacity:.07;pointer-events:none;z-index:0}

/* Une section sur deux la porte à droite, retournée : trois sections
   d'affilée avec le même ornement au même endroit se remarquent, et un
   filigrane qui se remarque n'en est plus un. */
section.rev:nth-of-type(even)::after{left:auto;right:18px;transform:scaleX(-1)}
section.rev>*{position:relative;z-index:1}

/* Dans la bande professionnelle, fond sombre : les motifs passent en
   clair, sinon ils disparaissent. */
#pro .head::after{background-image:var(--peq-c);opacity:.16}
#pro.rev::after{background-image:var(--bal-c);opacity:.1}

/* Le pied de page porte la paille-en-queue, en grand et très discrète. */
body>footer{position:relative;overflow:hidden}
body>footer::before{content:"";position:absolute;right:-30px;top:10px;width:220px;height:156px;
  background:var(--peq-c) no-repeat center/contain;opacity:.055;pointer-events:none}
body>footer>*{position:relative}

/* --- Les aplats pâles qui se répétaient ------------------------------ */

/* Les encadrés de dossier, les notes et les étiquettes reprennent la
   couleur de leur section plutôt que le turquoise pâle universel. */
.ds-enc-i,.fv-note.tq{background:var(--turq-p);color:#0A5156}
.rd-c{border-top-color:var(--u,var(--turq))}
.chip-p{background:var(--u,var(--turq-d));border-color:transparent;color:#fff}
.badge-p{background:var(--u,var(--turq-d));color:#fff}

/* Les étiquettes de dossier tournaient toutes au même pâle : elles se
   répartissent sur les trois voix de la charte. */
.dtag:nth-of-type(3n+1){background:#DCF1F3;border-color:#A9DFE3;color:#0A6067}
.dtag:nth-of-type(3n+2){background:#FDEBE3;border-color:#F6C3AC;color:#9A3014}
.dtag:nth-of-type(3n+3){background:#FCF3DF;border-color:#EFD69B;color:#8A6111}

/* --- Téléphone -------------------------------------------------------- */

@media(max-width:780px){
  /* Les motifs tiennent de la place qu'un petit écran n'a pas : on garde
     celui de l'en-tête, réduit, et on retire les autres. */
  .head::after{width:78px;height:56px;top:-8px;opacity:.08}
  section.rev::after,body>footer::before{display:none}
}

/* Les agences et points de contact d'un établissement.

   Une fiche n'affichait qu'un téléphone et qu'une adresse. Un loueur
   tient son comptoir à l'aéroport et son agence en ville ; le voyageur
   appelait le mauvais numéro et se présentait à la mauvaise adresse. */
.vr-ag{margin:38px 0 0}
.vr-ag-t{font-size:22px;margin:0 0 16px}
.vr-ag-g{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.vr-ag-g>*{min-width:0}
.vr-ag-c{border:1px solid var(--ligne);border-top:3px solid var(--u,var(--turq-d));
  padding:16px 17px 18px;background:#fff}
.vr-ag-c h3{font-size:16px;margin:0 0 3px;line-height:1.25}
.vr-ag-r{margin:0 0 9px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:700;color:var(--turq-d)}
.vr-ag-a,.vr-ag-h{margin:0 0 5px;font-size:14px;line-height:1.55;color:var(--gris)}
.vr-ag-h{font-size:13px}
.vr-ag-l{margin:11px 0 0;display:flex;flex-wrap:wrap;gap:8px 14px}
.vr-ag-l a{font-size:14px;font-weight:600;color:var(--turq-d);text-decoration:none;
  border-bottom:1px solid currentColor;padding-bottom:1px}
.vr-ag-l a:hover{color:var(--lave)}
@media(max-width:620px){.vr-ag-g{grid-template-columns:1fr}}

/* ══════════════════════════════════════════════════════════════════
   Ce qui était coupé à droite.

   Deux barres débordaient sans le dire. Les onglets de recherche
   défilaient horizontalement : à la souris, personne ne découvre un
   défilement horizontal, et tout ce qui suivait « Guides » —
   hébergements, location, restauration, lieux — passait pour absent.
   Le menu de l'en-tête faisait pareil : « Randonnées » se réduisait à
   son icône et « Location » disparaissait.

   Les onglets passent donc à la ligne : treize univers tiennent en deux
   lignes, et on les voit tous d'un coup. Le menu, lui, abandonne ses
   icônes avant d'abandonner ses libellés — un nom tronqué est plus
   gênant qu'une icône en moins.
   ══════════════════════════════════════════════════════════════════ */

.search .s-tabs{
	flex-wrap:wrap;overflow:visible;
	-webkit-mask-image:none;mask-image:none}
.search .s-tab{padding:13px 16px}
@media(max-width:900px){
	/* Sur téléphone le défilement reprend ses droits : à la ligne, treize
	   onglets feraient quatre lignes avant le premier champ. */
	.search .s-tabs{flex-wrap:nowrap;overflow-x:auto;
		-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent);
		mask-image:linear-gradient(90deg,#000 calc(100% - 34px),transparent)}
	.search .s-tab{padding:13px 14px}
}

/* Le menu garde ses huit entrées lisibles.

   La contrainte n'est pas la largeur de l'écran mais celle de l'en-tête,
   plafonnée à 1340 pixels : à 1570 pixels de fenêtre, le menu manquait
   donc de place exactement comme à 1300, et « Randonnées » se réduisait
   à son icône pendant que « Location » passait à la trappe. On élargit
   l'en-tête sur les grands écrans, et on retire les icônes du menu
   partout où les huit libellés ne tiennent pas autrement. */
@media(min-width:1500px){
	header .wrap{max-width:1560px}
}
@media(min-width:1024px) and (max-width:1699px){
	.menu a svg{display:none}
	.menu a{padding:8px 9px;font-size:13.5px;gap:0}
	.menu{gap:2px}
}
@media(min-width:1000px) and (max-width:1220px){
	/* Entre mille et douze cents pixels, les huit libellés ne tiennent
	   qu'en libérant de la place ailleurs : le bouton « Trouver » fait
	   double emploi avec la loupe juste à côté, c'est donc lui qui
	   s'efface. Mieux vaut perdre un bouton en double qu'une entrée de
	   menu. */
	.menu a{padding:8px 6px;font-size:12.5px}
	header .nav-cta{display:none}
}

/* Sous 1060 pixels, les huit libellés ne tiennent plus, quoi qu'on
   retire : le menu défile. Un dégradé de bord le fait savoir, comme pour
   les onglets de recherche — un défilement qui ne se voit pas est un
   contenu qui n'existe pas. */
@media(min-width:1000px) and (max-width:1059px){
	.menu{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
		mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
}