/* ==========================================================================
The City Clock — couche de rafraîchissement visuel
--------------------------------------------------------------------------
Chargée après custom.css. Ne touche ni au HTML ni aux éléments affichés :
uniquement palette, typographie, surfaces et états.
Pour tout annuler : retirer le de base.html.
========================================================================== */
:root {
/* Surfaces — un papier chaud plutôt qu'un gris froid */
--paper: #faf8f5;
--paper-deep: #ebe5db;
--surface: #ffffff;
/* Encres */
--ink: #3d3a36; /* 10.7:1 sur papier */
--ink-soft: #6b665f; /* 5.4:1 */
--ink-faint: #767066; /* 4.6:1 — plancher WCAG AA, ne pas éclaircir :
cette teinte porte du vrai contenu (mentions de
réassurance, aides de formulaire, corps de texte
en .fade-1-4 sur la page d'accueil) */
--ink-strong: #24221f;
/* Bleu encre — l'indigo du thème, désaturé */
--navy: #2a2a52;
--navy-deep: #1f1f3d;
--navy-soft: #5a5a80;
/* Laiton — l'orange du thème, réchauffé.
--brass est à 3.2:1 : réservé au décoratif (icônes, filets, étoiles) et
aux gros caractères. Pour du texte courant, utiliser --brass-text. */
--brass: #c17d2b;
--brass-text: #96601c; /* 5.0:1 */
--brass-light: #e2b071;
/* Filets */
--rule: #e8e2d9;
--rule-strong: #d5cdc0;
--radius: 3px;
--shadow-soft: 0 1px 2px rgba(61, 58, 54, .04), 0 10px 30px -14px rgba(61, 58, 54, .22);
--shadow-lift: 0 2px 4px rgba(61, 58, 54, .06), 0 16px 40px -16px rgba(61, 58, 54, .30);
}
/* --------------------------------------------------------------- Fondations */
body,
body.boxed-layout {
background: var(--paper-deep);
color: var(--ink);
font-size: 16px;
line-height: 1.65;
}
body.boxed-layout .main-container,
body.boxed-layout .nav-container,
body.boxed-layout nav {
background: var(--paper);
}
::selection {
background: var(--brass-light);
color: var(--ink-strong);
}
/* Le thème n'a aucun état de focus visible : inutilisable au clavier. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
outline: 2px solid var(--navy);
outline-offset: 3px;
border-radius: 2px;
}
/* --------------------------------------------------------------- Typographie */
h1, h2, h3, h4, h5, h6 {
color: var(--navy);
letter-spacing: normal;
}
h1, h2, h3, h4 {
line-height: 1.18;
font-weight: 400;
}
h3 {
font-size: 34px;
}
h4 {
font-size: 26px;
}
/* h5/h6 servent d'intertitres en capitales dans ce thème : on garde le
principe, on desserre l'interlettrage et on adoucit la couleur. */
h5.uppercase,
h6.uppercase,
.uppercase.bold {
font-family: "Karla", sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 1.4px;
color: var(--ink-soft);
}
p {
margin-bottom: 1.15em;
}
/* Une mesure de lecture confortable : au-delà, l'œil perd la ligne. */
.product-single .description p,
section p.lead,
.tab-content p {
max-width: 68ch;
}
/* Un max-width sans marges auto décale vers la gauche un texte censé être
centré : on recentre la boîte dans les blocs centrés. */
.text-center p,
.text-center .lead {
margin-left: auto;
margin-right: auto;
}
a {
color: var(--navy);
transition: color .18s ease;
}
a:hover {
color: var(--brass);
}
b, strong {
font-weight: 700;
}
/* Le gras dans le corps de texte est un peu plus dense que le texte courant,
mais surtout pas sur fond sombre (bouton, pied de page). */
.tab-content b,
.description b,
section p b {
color: var(--ink-strong);
}
hr {
border-top: 1px solid var(--rule);
}
/* Le gris passe-partout du thème, réchauffé */
.fade-1-4, .fade-half {
color: var(--ink-faint);
}
.bg-secondary {
background: #f3efe8;
}
/* --------------------------------------------------------------- Formulaires */
input[type="text"],
input[type="email"],
input[type="password"],
textarea,
select {
background: var(--surface);
border: 1px solid var(--rule-strong);
border-radius: var(--radius);
color: var(--ink);
font-size: 15px;
text-transform: none;
letter-spacing: normal;
padding-left: 16px;
padding-right: 16px;
transition: border-color .18s ease, box-shadow .18s ease;
}
select {
/* Le thème rendait les options en capitales 11px : illisible pour un
libellé long comme « Reste du monde +30€ — livraison en 5 à 10 jours ». */
font-size: 15px;
text-transform: none;
padding-right: 40px;
}
input::placeholder,
textarea::placeholder {
color: var(--ink-faint);
text-transform: none;
letter-spacing: normal;
font-size: 15px;
}
input[type="text"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
border-color: var(--navy-soft);
box-shadow: 0 0 0 3px rgba(42, 42, 82, .10);
outline: none;
}
label {
color: var(--ink-soft);
font-size: 14px;
font-weight: 700;
letter-spacing: normal;
text-transform: none;
margin-bottom: 8px;
}
.help-block {
color: var(--ink-faint);
font-size: 13px;
line-height: 1.5;
}
/* --------------------------------------------------------------- Boutons */
.btn {
font-family: "Karla", sans-serif;
border: 1px solid var(--navy);
border-radius: var(--radius);
color: var(--navy);
letter-spacing: 1.2px;
font-size: 12px;
transition: background .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.btn:hover {
background: var(--navy);
border-color: var(--navy);
color: #fff;
box-shadow: var(--shadow-soft);
}
.btn.btn-white {
border-color: rgba(255, 255, 255, .55);
}
.btn.btn-white:hover {
background: #fff;
color: var(--navy);
}
/* --------------------------------------------------------------- Navigation */
.nav-container nav {
border-bottom: 1px solid var(--rule);
}
#logo {
color: var(--navy);
letter-spacing: .5px;
}
#logo small {
color: var(--ink-faint);
letter-spacing: 1.2px;
font-size: .28em;
text-transform: none;
}
.menu li a {
/* Le thème pose opacity: .5 sur les liens du menu, ce qui délavait la
couleur de moitié : le rendu tombait à 2.2:1 sur le papier, sous le
seuil AA. On rend l'opacité pleine et on assombrit. */
opacity: 1;
color: var(--ink);
font-size: 13px;
letter-spacing: 1.1px;
transition: color .18s ease;
}
/* Uniquement le premier niveau : les liens du sous-menu vivent sur un fond
différent et ont leur propre traitement plus bas. */
.menu > li > a:hover,
.menu > li.active > a {
color: var(--navy);
}
/* --------------------------------------------------------------- Fiche produit */
.product-single .price {
font-family: 'Fraunces', serif;
font-size: 42px;
line-height: 1;
color: var(--navy);
letter-spacing: -.5px;
}
/* Les visuels gagnent un cadre papier et une ombre diffuse plutôt que rien */
.product-single .image-slider .slides img {
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
}
.product-single .image-slider .flex-control-thumbs img {
border-radius: 2px;
opacity: .55;
transition: opacity .18s ease;
}
.product-single .image-slider .flex-control-thumbs img:hover,
.product-single .image-slider .flex-control-thumbs .flex-active {
opacity: 1;
}
/* Onglets */
.text-tabs .tabs {
border-bottom: 1px solid var(--rule);
}
.text-tabs .tab-title span {
font-family: "Karla", sans-serif;
letter-spacing: 1.4px;
color: var(--ink-soft);
}
.text-tabs .active .tab-title span {
color: var(--navy);
}
.text-tabs .tab-title:after {
background: var(--brass);
height: 2px;
}
/* Avis */
.ratings li {
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
}
.ratings .star-rating i,
.rating-summary .star-rating i {
color: var(--brass) !important;
}
.ratings .user .bold-h6 {
color: var(--ink-strong);
letter-spacing: 1px;
}
.ratings .user .date {
color: var(--ink-faint);
}
/* Tableau des dimensions */
.table.table-bordered {
border-color: var(--rule);
}
.table.table-striped > tbody > tr:nth-of-type(odd) {
background: #f5f1ea;
}
.table.table-bordered > tbody > tr > th,
.table.table-bordered > tbody > tr > td {
border-color: var(--rule);
color: var(--ink);
}
/* --------------------------------------------------------------- Pied de page */
.footer-2.bg-dark {
/* Façades haussmanniennes en fond, bleu encre par-dessus. Le voile est un
dégradé plat plutôt qu'un élément en overlay : pas de markup en plus, et
le contenu du footer reste dans le flux normal. */
background-color: var(--navy-deep);
background-image:
linear-gradient(rgba(31, 31, 61, .75), rgba(31, 31, 61, .75)),
url('../img/facades.jpg');
background-size: cover;
background-position: center 35%;
background-repeat: no-repeat;
}
.footer-2 h3 {
color: #fff;
}
/* 55 % de blanc passait sur un aplat uni ; sur la texture des façades, le
texte décrochait. On remonte, et une ombre discrète le décolle du fond. */
.footer-2 .fade-half {
color: rgba(255, 255, 255, .78);
text-shadow: 0 1px 3px rgba(15, 15, 30, .55);
}
.footer-2 h3 {
text-shadow: 0 1px 4px rgba(15, 15, 30, .5);
}
/* --------------------------------------------------- Bouton de soumission */
/* Le thème cible input[type="submit"], button[type="submit"] : on s'aligne. */
input[type="submit"],
button[type="submit"] {
font-family: "Karla", sans-serif;
background: var(--navy);
border: 1px solid var(--navy);
/* Le thème impose border-radius: 0 !important sur les submit : seul endroit
où il faut lui répondre sur le même ton. */
border-radius: var(--radius) !important;
color: #fff;
letter-spacing: 1.4px;
font-weight: 700;
box-shadow: var(--shadow-soft);
transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
}
input[type="submit"]:hover,
button[type="submit"]:hover {
background: var(--navy-deep);
border-color: var(--navy-deep);
box-shadow: var(--shadow-lift);
transform: translateY(-1px);
}
input[type="submit"]:active,
button[type="submit"]:active {
transform: translateY(0);
box-shadow: var(--shadow-soft);
}
/* Tout ce qui vit dans le bouton reste blanc, gras compris. */
button[type="submit"] b,
button[type="submit"] i,
input[type="submit"] b {
color: inherit;
}
/* ============================================================ Navigation */
/* Le thème dessine le chevron avec un caractère « > » pivoté de 90° : le
glyphe est asymétrique, il ne tombe jamais juste. On le remplace par un
vrai triangle CSS, et seulement au premier niveau (les sous-menus
utilisent une icône dédiée). */
.menu > li.has-dropdown:after {
content: "";
position: absolute;
top: 50%;
right: 3px;
margin-top: -5px;
width: 5px;
height: 5px;
border: 0;
border-right: 1px solid currentColor;
border-bottom: 1px solid currentColor;
transform: rotate(45deg);
opacity: .38;
transition: opacity .18s ease;
}
.menu > li.has-dropdown:hover:after {
opacity: .9;
}
.menu > li.has-dropdown {
padding-right: 14px;
}
/* Le bandeau prenait 197px, soit près du quart de la fenêtre avant même
d'avoir vu le produit. On le ramène à ~140px sans rapetisser le nom. */
#logo {
padding-top: 16px;
font-size: 44px;
margin-bottom: 10px;
}
#logo small {
font-size: 13px;
letter-spacing: 1.6px;
margin-top: 3px;
}
.nav-bar {
height: 48px;
max-height: 48px;
line-height: 46px;
border-bottom: 1px solid var(--rule);
}
.menu {
height: 48px;
}
/* Et la première section n'a plus besoin de 96px de marge haute. */
#buy {
padding-top: 56px;
}
/* ================================================ Colonne « preuve » */
/* Le bloc de réassurance est une colonne à part entière : en desktop il
retombe sous la colonne photos et rééquilibre les deux côtés ; en mobile
il suit simplement le bouton. */
.product-proof {
margin-top: 8px;
}
@media all and (min-width: 992px) {
/* Les floats Bootstrap ne savent pas remonter un bloc dans l'espace vide
laissé sous une colonne plus courte : ils le poussent après la plus
haute. On passe la rangée en grille, en conservant exactement la
géométrie d'origine (5 colonnes / 1 d'écart / 5 colonnes). */
.product-single .row.mb24 {
display: grid;
grid-template-columns: 41.6667% 8.3333% 41.6667%;
align-items: start;
}
.product-single .row.mb24 > * {
float: none;
width: auto;
margin-left: 0;
}
.product-single .row.mb24 > .col-md-5:first-child {
grid-area: 1 / 1;
}
/* Le formulaire occupe toute la hauteur de la colonne de droite... */
.product-single .row.mb24 > form {
grid-area: 1 / 3 / span 2;
}
/* ...et la preuve vient combler le vide sous les photos. */
.product-proof {
grid-area: 2 / 1;
margin-top: 32px;
padding-top: 28px;
border-top: 1px solid var(--rule);
}
.product-proof .social-proof {
margin-top: 0;
}
}
@media all and (max-width: 991px) {
.product-proof {
margin-top: 24px;
}
}
/* ------------------------------------------------- Menus déroulants */
/* Le thème pose un panneau anthracite #292929 à texte blanc : une boîte
froide au milieu d'une page couleur papier. On le repasse sur la palette. */
.menu > li > ul {
top: 100%; /* le thème le fixait à 57px, calé sur une
barre de 55px : la barre fait 48px
depuis, d'où un interstice qui coupait
le survol entre le titre et le panneau */
background: var(--surface);
border: 1px solid var(--rule);
border-radius: var(--radius);
box-shadow: var(--shadow-soft);
padding: 6px 0;
}
.menu > li > ul li a {
color: var(--ink-soft);
transition: color .18s ease, background .18s ease;
}
.menu > li > ul li a:hover {
color: var(--navy);
background: #f3efe8;
}
/* ============================================ Rattrapage des polices du thème */
/* Le thème code en dur "Lato" (.number, .pricing-table) et "Raleway"
(.bold-h6, .label, le menu mobile) sur certains composants. Raleway n'a
jamais été chargée par le site : ces éléments retombaient déjà sur
Helvetica. Maintenant que Lato ne l'est plus non plus, on les rattache
explicitement à Karla. */
.number,
.bold-h6,
.label,
.pagination,
.pagination li,
.module.widget-handle .title,
.pricing-table,
.pricing-table .price,
/* Le menu et les champs héritaient de Raleway par ces deux règles du thème :
`.menu { font-family: Raleway }` et `input, button, select, textarea`. */
.menu,
input,
button,
select,
option,
textarea {
font-family: "Karla", sans-serif;
}
/* ==================================================== Navigation mobile */
@media all and (max-width: 767px) {
/* En-tête mobile : logo à gauche, hamburger à droite, menu en dessous.
nav devient une grille à deux colonnes qui se replie sur trois zones. */
nav.nav-centered {
display: flex;
flex-wrap: wrap;
align-items: center;
}
nav.nav-centered > .text-center {
order: 1;
flex: 1 1 auto;
text-align: left;
padding-left: 18px;
min-width: 0;
}
nav.nav-centered > .mobile-toggle {
order: 2;
flex: 0 0 auto;
width: auto !important;
height: auto;
padding: 0 18px;
border-left: 0 !important;
}
/* Le hamburger occupait la barre et la maintenait ouverte à 48px ; il est
maintenant à côté du logo. Repliée, la barre doit donc être à zéro,
sinon le premier lien du menu dépasse. L'ouverture reste gérée par
`.nav-open` du thème, qui force height:auto en !important. */
nav.nav-centered > .nav-bar {
order: 3;
flex: 0 0 100%;
height: 0;
max-height: 0;
border-bottom: 0;
}
nav.nav-centered > .nav-bar.nav-open {
padding-bottom: 14px;
}
/* Le logo n'a plus à porter toute la largeur : on le calme. */
#logo {
font-size: 28px;
padding-top: 14px;
margin-bottom: 12px;
white-space: nowrap;
}
#logo small {
font-size: 11px;
letter-spacing: 1px;
margin-top: 1px;
}
.mobile-toggle i {
line-height: 1 !important;
font-size: 20px;
}
/* Le thème ouvre le menu en libérant la hauteur de .nav-bar
(`.nav-open { height: auto !important }`), mais pas celle de .menu.
Avec une hauteur fixe héritée du desktop, la liste était tronquée :
on ne voyait que le premier lien et demi. La barre a overflow:hidden,
c'est donc bien elle qui gère le repli — le menu peut rester libre. */
.nav-bar .menu {
height: auto;
max-height: none;
}
/* Toute la navigation est centrée : les liens dépliés le sont aussi.
Le centrage se pose sur le