@charset "UTF-8";

/* =====================================================================
   Le socle : ce qui doit être pareil partout

   Le site s'est construit page par page, et chaque page a fini par
   redéfinir ce qu'elle affichait à sa façon. Cinq feuilles décidaient de
   l'aspect d'un lien — style.css, avis.css, catalog.css, tarifs.css,
   calendar.css — et le turquoise du domaine était écrit en dur cent
   cinquante fois, sous deux valeurs, dans huit fichiers.

   Le résultat se voit : un lien n'a pas le même aspect selon la page où
   on le rencontre, et le visiteur doit réapprendre à lire à chaque
   rubrique.

   Ce fichier fixe ce qui ne doit pas varier. Il est chargé **après** les
   autres, pour trancher quand deux règles se contredisent — c'est
   d'ailleurs la seule raison pour laquelle il vient en dernier, et non
   parce qu'il serait moins important.

   Ce qu'il ne fait pas
   --------------------
   Il ne réécrit pas les feuilles existantes. Les couleurs y restent
   écrites en dur, et elles y resteront jusqu'à ce qu'on les reprenne
   fichier par fichier — un remplacement automatique sur cent cinquante
   occurrences, sans regarder chaque page, casserait quelque chose
   quelque part. Les variables ci-dessous sont là pour que **le prochain
   travail** s'y appuie, et que la reprise se fasse au fil de l'eau.
   ===================================================================== */

/* --- Les couleurs du domaine, nommées une fois -----------------------

   Relevées dans l'existant, pas inventées : ce sont exactement les
   valeurs déjà employées, avec un nom dessus.

   `--turquoise` est celui des liens et des accents, `--turquoise-fonce`
   celui des titres. Le second sert aussi aux liens posés sur fond gris
   ou clair, où le premier manque de contraste. */

:root {
  --turquoise:       #07baa9;
  --turquoise-fonce: #005459;
  --ocre:            #e5941a;

  --encre:   #3a3733;
  --gris:    #6d6459;
  --creme:   #f6f6f6;
  --bordure: #e3ded6;
}

/* --- Un lien dans du texte a le même aspect partout -------------------

   Souligné, et de la couleur du domaine. C'est tout, et c'est le point :
   la règle est unique.

   Le soulignement n'est pas une décoration. Un visiteur qui distingue
   mal les couleurs — un homme sur douze — ou qui lit son téléphone au
   soleil n'a aucun autre moyen de savoir qu'il y a là quelque chose à
   cliquer.

   Le décalage de deux pixels dégage la ligne des jambages : sans lui, le
   trait barre les descendantes des g, des p et des q, et le mot devient
   difficile à lire — précisément le mot qu'on voulait mettre en avant.

   `.tarif_link` figure nommément dans la liste : c'est un lien de texte
   qui vit hors d'un paragraphe, dans une carte de tarif. Il fabriquait
   auparavant son propre soulignement avec une bordure basse — une
   troisième méthode pour le même effet, et la preuve que la règle
   manquait.

   La liste des conteneurs est explicite plutôt que générale. Un `a`
   souligné partout aurait attrapé les menus, les boutons, les vignettes
   du catalogue et les cartes cliquables — où le soulignement n'a aucun
   sens, la fonction se lisant à la forme et à la place. */

p a,
li a,
dd a,
dt a,
td a,
blockquote a,
figcaption a,
address a,
.avis_bilan_total a,
.tarif_link,
.aparte a {
  color: var(--turquoise-fonce);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}

p a:hover,
li a:hover,
dd a:hover,
dt a:hover,
td a:hover,
blockquote a:hover,
figcaption a:hover,
address a:hover,
.avis_bilan_total a:hover,
.tarif_link:hover,
.aparte a:hover {
  color: var(--ocre);
  text-decoration-thickness: 2px;
}

/* --- Et ce qui n'est pas un lien de texte le redevient ----------------

   Les menus, les boutons, la marque, les listes de navigation. Ils sont
   dans des `li` et des `p`, donc la règle ci-dessus les avait attrapés
   au passage.

   Ces sélecteurs portent une classe, donc l'emportent sur les
   précédents : la remise à zéro est acquise sans avoir à écrire
   `!important` nulle part. */

a.btn,
a.nav-link,
a.brand_link,
.main_menu a,
.submenu a,
.btns_group a,
.ul_li a,
.ul_li_right a,
.ul_li_block a,
.footer_widget a,
.header_btns_group a {
  color: inherit;
  text-decoration: none;
}

a.btn:hover,
a.nav-link:hover,
a.brand_link:hover,
.main_menu a:hover,
.submenu a:hover,
.btns_group a:hover,
.ul_li a:hover,
.ul_li_right a:hover,
.ul_li_block a:hover,
.footer_widget a:hover,
.header_btns_group a:hover {
  text-decoration: none;
}

/* --- Un titre posé sur une photo -------------------------------------

   Le bandeau d'accueil et celui des pages intérieures montrent la même
   façade en pierre claire, et y posent un titre blanc. Le blanc sur du
   beige ne se lit pas.

   Trois rustines coexistaient, sans qu'aucune ne règle vraiment le
   problème :

     - `style.css` posait `text-shadow: #000 5px 5px 5px` sur le titre,
       une ombre portée floue et décalée qui salit les lettres sans
       jamais les détacher ;
     - `custom.css` demandait au contraire un titre **noir** cerné de
       blanc — règle morte, battue en spécificité, mais que le prochain
       lecteur aurait cru active ;
     - le sous-titre, lui, portait sa propre boîte sombre, et c'était le
       seul des trois qui marchait.

   La boîte marchait parce qu'elle ne s'attaquait pas au texte : elle
   changeait le fond. C'est la bonne idée, et elle est ici généralisée à
   tout le bandeau sous la forme d'un voile en dégradé — dense à gauche
   où le texte se trouve, nul à droite où la photo doit rester nette.

   Une ombre reste, mais courte et sans décalage : elle ne sert plus à
   créer le contraste, seulement à tenir les lettres sur les rares
   éclats clairs que le voile laisse passer.

   Le voile est noir. Il a d'abord été d'un noir très légèrement teinté
   de vert — un fond de bleu-vert passe d'ordinaire mieux sur une photo
   de feuillage qu'un gris pur, qui l'éteint. Sur celle-ci la teinte se
   voyait, et un voile qui se remarque a manqué son objet.

   Pour ajuster : les quatre opacités du dégradé, et rien d'autre. */

.banner_section,
.breadcrumb_section {
  position: relative;
}

.banner_section::before,
.breadcrumb_section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
      100deg,
      rgba(0, 0, 0, .78) 0%,
      rgba(0, 0, 0, .62) 42%,
      rgba(0, 0, 0, .20) 72%,
      rgba(0, 0, 0, 0) 100%);
}

/* Le contenu repasse devant le voile.

   Les blocs qui portent déjà un rang — `.banner_content` à 2, la
   déchirure du bas à 1, l'icône du fil d'Ariane à 10 — le gardent : leurs
   sélecteurs sont plus précis que celui-ci. La règle ne sert donc qu'aux
   conteneurs nus, qui n'en avaient aucun. */

.banner_section > *,
.breadcrumb_section > * {
  position: relative;
  z-index: 1;
}

.banner_title {
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* Le sous-titre n'a plus besoin de sa boîte : le voile fait le travail
   pour toute la hauteur du bandeau, et deux fonds sombres superposés se
   verraient. La classe survit pour l'écart qu'elle donne.

   Si la boîte manque, une ligne la ramène :
   `background-color: rgba(0, 0, 0, .35);` — mais alors il faut alléger
   le dégradé ci-dessus, sinon le sous-titre devient plus sombre que
   tout le reste. */

.sub-title-header {
  background-color: transparent;
  padding: 0;
}

/* --- Le clavier retrouve où il est -----------------------------------

   Le gabarit posait `outline: 0` sur tous les liens, y compris au focus.
   Quiconque navigue à la tabulation — par choix, par handicap, ou parce
   que sa souris vient de rendre l'âme — perdait toute trace de sa
   position dans la page.

   `:focus-visible` plutôt que `:focus` : le contour n'apparaît qu'à la
   navigation au clavier, jamais au clic à la souris. C'est ce qui avait
   motivé le `outline: 0` d'origine, et ce mot-clé règle le problème sans
   sacrifier personne. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--turquoise-fonce);
  outline-offset: 2px;
}