*/
h1 {
color: #9fff00; /* Texte vert clair */
text-decoration: underline; /* Souligne le titre */
font-weight: bold; /* Met en gras */
}
/*
Style appliqué aux blocs de type "section1".
Utilisé pour mettre en valeur des parties spécifiques du texte.
Balises concernées :
*/
div.section1 {
color: #00009c; /* Texte bleu foncé */
font-size: 14pt; /* Taille moyenne (≈18.6px) */
font-weight: bold; /* Met en gras */
}
/*
Style appliqué aux tableaux avec la classe "la_note_du_moment".
Utilisé pour afficher un message ou une note particulière.
Balises concernées :
*/
table.la_note_du_moment {
color: #426f42; /* Texte vert foncé/grisé */
font-size: 18pt; /* Taille grande (≈24px) */
font-weight: bold; /* Met en gras */
}
/*
Style appliqué au texte courant principal.
Utilisé pour les paragraphes dans le contenu principal.
Balises concernées :
*/
.texte-principal {
text-align: justify; /* Justifie le texte */
font-size: 16px; /* Taille normale du texte */
color: black; /* Texte noir */
line-height: 1.4; /* Espacement entre les lignes */
margin-bottom: 12px; /* Espace après chaque paragraphe */
}
/*
Variante bleue du texte principal.
Utilisé pour mettre en valeur certaines parties du texte.
Balises concernées :
*/
.texte-principal-bleu {
text-align: justify; /* Justifie le texte */
font-size: 16px; /* Taille normale du texte */
color: blue; /* Texte bleu */
line-height: 1.4; /* Espacement entre les lignes */
margin-bottom: 12px; /* Espace après chaque paragraphe */
}
/*
Style appliqué aux cellules de tableau avec la classe "la_note_du_moment".
Sert à afficher une note dans une cellule spécifique.
Balises concernées :
*/
td.la_note_du_moment {
color: #5f9f9f; /* Texte bleu-vert */
border: 1px solid White; /* Bordure blanche */
font-size: 14pt; /* Taille moyenne (≈18.6px) */
font-weight: bold; /* Met en gras */
margin: 10px 20px 10px 10px;/* Espacement interne (ne s’applique pas toujours dans ) */
}
/*
Variante plus petite de "la_note_du_moment".
Utilisée pour du texte secondaire dans les cellules de tableau.
Balises concernées :
*/
td.la_note_du_moment2 {
color: #0000cc; /* Texte bleu vif */
font-size: 12pt; /* Taille plus petite (≈16px) */
}
/* ==========================================================================
SECTION 4 : Tables diverses
========================================================================== */
/*
Style appliqué aux tableaux et à leurs lignes/cellules avec la classe "grey3".
Sert à créer un fond clair uniforme avec texte vert/gris.
Balises concernées :
*/
table.grey3,
tr.grey3,
th.grey3,
td.grey3 {
background-color: #fffff0; /* Fond beige très clair */
color: #4a766e; /* Texte vert/gris */
}
/*
Variante "grey4" : un fond gris plus marqué, avec le même texte vert/gris.
Utile pour alterner des styles de tableaux.
Balises concernées :
*/
table.grey4,
tr.grey4,
th.grey4,
td.grey4 {
background-color: #e7e7e7; /* Fond gris clair */
color: #4a766e; /* Texte vert/gris */
}
/* ==========================================================================
SECTION 5 : Styles personnalisés
========================================================================== */
/*
Style principal pour les titres généraux.
Balises concernées : tout élément avec class="titre-general"
Exemples : ,
*/
.titre-general {
color: black; /* Texte noir */
text-decoration: underline dotted silver; /* Soulignement en pointillés gris clair */
text-align: center; /* Centrage horizontal du texte */
font-weight: bold; /* Texte en gras */
}
/*
Variantes de taille pour les titres généraux.
Balises concernées : un descendant direct d’un élément ayant class="titre-general"
Exemple :
Mon titre
*/
/* Taille XXL (+4 équivalent environ 48px si base 16px) */
.titre-general .xxl {
font-size: 3.0em; /* 3 × la taille de base */
}
/* Taille XL (+3) */
.titre-general .xl {
font-size: 2.0em;
}
/* Taille large (+2) */
.titre-general .lg {
font-size: 1.5em;
}
/* Taille moyenne (+1) */
.titre-general .md {
font-size: 1.15em;
}
/*
Style pour les titres en relief (par exemple au-dessus des blocs de photos).
Balises concernées : tout élément avec id="texte_relief"
Exemple : Titre
*/
#texte_relief {
background: #bbddee; /* Fond bleu clair */
font-size: 22px; /* Taille du texte */
color: #0066cc; /* Bleu soutenu */
text-shadow: 0 -3px 1px #ffffff; /* Effet relief blanc au-dessus du texte */
}
/*
Style pour les titres marginés (variantes visuelles).
Balises concernées : tout élément avec id="titre_marge"
Exemple : Sous-titre
*/
#titre_marge {
font-size: 22px;
color: teal; /* Bleu-vert */
text-decoration: underline dotted silver;
font-weight: 700; /* Gras */
text-shadow: 0 -3px 1px #ffff00; /* Effet relief jaune au-dessus du texte */
}
/*
Texte secondaire type "note".
Balises concernées :
*/
span.nota_bene {
font-size: 12px;
color: #666666; /* Gris moyen */
font-style: italic;
}
/*
Texte barré.
Balises concernées :
*/
span.barre {
text-decoration: line-through;
}
/* Classe à utiliser pour centrer horizontalement n'importe quel contenu
texte, image, canvas, tableau, etc.
Exemple d’utilisation :
…
*/
.centered {
text-align: center;
}
/*
Encadré de texte dans une boîte légèrement ombrée.
Sert à mettre en évidence une section (style "boîte").
Balises concernées : tout élément avec class="section-box"
Exemple : ...
*/
.section-box {
background: #bcd3e8; /* Bleu clair */
border-radius: 12px; /* Coins arrondis */
/* Espacement intérieur (padding détaillé) */
padding-top: 15px; /* espace au-dessus du texte */
padding-right: 20px; /* espace à droite */
padding-bottom: 8px; /* espace en dessous du texte */
padding-left: 20px; /* espace à gauche */
/* Effet de relief - Ombre et bordure */
box-shadow: 0 3px 6px rgba(0,0,0,0.08); /* Ombre douce */
border-left: 5px solid #74aada; /* Barre verticale décorative */
}
/* ==========================================================================
SECTION 5.1 : Accessibilité / SEO
========================================================================== */
/*
Classe utilitaire "screen reader only".
Permet de rendre un texte lisible par Google et les lecteurs d’écran,
mais invisible pour l’utilisateur.
Balises concernées : tout élément avec class="sr-only"
Exemple : Texte caché mais lisible par Google
*/
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ==========================================================================
SECTION 6 : Filigrane
========================================================================== */
/*
Style du texte en filigrane "Appartement plus disponible".
Balises concernées : élément avec id="filigrane"
Exemple HTML : Appartement plus disponible
*/
#filigrane {
color: rgba(50, 70, 160, 0.6); /* Bleu semi-transparent */
font-size: 60pt; /* Très grande taille de texte */
font-weight: bold; /* Texte en gras */
text-align: center; /* Centrage horizontal */
line-height: 1.2; /* Espacement vertical serré */
/* Positionnement fixe et centré sur la page */
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
/* Translate → centre le texte
Rotate → rotation diagonale du texte */
width: 80%; /* Largeur max */
margin: 0; /* Pas de marge */
z-index: 9999; /* Toujours au-dessus du contenu */
pointer-events: none; /* Ne bloque pas les clics sur les éléments en dessous */
/* Gestion du texte long */
word-wrap: break-word;
white-space: normal;
/* Effet de relief par ombre multiple */
text-shadow: -1px -1px 1px rgba(255,255,255,0.3),
1px -1px 1px rgba(255,255,255,0.3),
-1px 1px 1px rgba(255,255,255,0.3),
1px 1px 1px rgba(255,255,255,0.3);
}
/*
Version adaptée pour petits écrans (smartphones).
Balises concernées : id="filigrane" quand largeur écran ≤ 480px
*/
@media (max-width: 480px) {
#filigrane {
font-size: 36pt; /* Filigrane plus petit */
transform: translate(-50%, -50%) rotate(-28deg); /* Moins penché */
width: 90%; /* Plus large car écran étroit */
}
}
/* ==========================================================================
SECTION 7 : Séparateurs visuels
========================================================================== */
/*
Conteneur des séparateurs visuels (ex : ligne décorative bateau).
Balises concernées :
Exemple avec une image :
*/
.separator {
margin: 20px 0; /* Espace vertical autour du séparateur */
text-align: center; /* Centrage du contenu (image) */
}
/*
Style appliqué aux images placées dans .separator
Balises concernées : ![]()
Elle s’applique à toutes les images qui sont à l’intérieur
d’un .
*/
.separator img {
max-width: 100%; /* Ne dépasse pas la largeur du conteneur */
height: auto; /* Conserve le ratio de l’image */
display: inline-block; /* pour que la bordure englobe juste l’image */
}
/* Classe générale pour appliquer une bordure aux images ou conteneurs
Si l'image ou le div a à la fois .separator et .border, les coins arrondis s'appliquent correctement */
.separator.border,
.separator img.border {
border-radius: 5px; /* coins arrondis */
display: inline-block; /* pour que la bordure englobe juste l'élément */
}
/*
Classes optionnelles pour les bordures sur les images dans .separator
Balises concernées : ![]()
*/
/* Épaisseur de bordure */
.border-thin { border-width: 1px; }
.border-medium { border-width: 2px; }
.border-thick { border-width: 4px; }
/* Style de bordure */
.border-solid { border-style: solid; }
.border-dotted { border-style: dotted; }
.border-dashed { border-style: dashed; }
/* Couleur de bordure */
.border-black { border-color: black; }
.border-red { border-color: red; }
.border-blue { border-color: blue; }
/* Exemple d'utilisation : Séparateur avec bordure rouge pointillée
Autre exemple :
...ton texte...
J'y rajoute des marges en haut, à droite, en bas et à gauche (c'est l'ordre des chiffres que l'on indique)
*/
/* --------------------------------------------------------------------------
SECTION 8 : Miniatures photos (location_photos.html)
-------------------------------------------------------------------------- */
/*
Style pour les miniatures format paysage (300×225).
Balises concernées : ![]()
*/
img.thumb-300x225 {
width: 300px;
height: 225px;
object-fit: cover; /* Coupe/zoome si besoin pour remplir cadre */
display: block; /* Évite les espaces parasites (inline → block) */
border: 1px solid #ddd; /* Bordure fine grise autour de la miniature */
}
/*
Style pour les miniatures format portrait (225×300).
Balises concernées : ![]()
*/
img.thumb-225x300 {
width: 225px;
height: 300px;
object-fit: cover;
display: block;
border: 1px solid #ddd;
}
/* ==========================================================================
SECTION 9 : Petits écrans (smartphones)
ça évite que le texte ou les images débordent sur mobile.
========================================================================== */
/*
Adaptations globales pour les écrans étroits (≤ 600px).
Balises concernées :
- body (police, espacement)
- img (images, toutes miniatures confondues)
- table (tables de toutes tailles)
*/
@media (max-width: 600px) {
body {
font-size: 16px; /* augmente un peu la base pour éviter le zoom manuel */
line-height: 1.5; /* plus d’espace entre les lignes */
padding: 0 10px; /* évite que le texte colle trop aux bords */
}
img {
max-width: 100%; /* images redimensionnées automatiquement pour s’adapter au conteneur */
height: auto; /* conserve le ratio d’origine */
}
table {
width: 100% !important; /* évite les débordements horizontaux */
}
}
/* ==========================================================================
SECTION 10 : Fond drapeau américain très léger
========================================================================== */
/*
Conteneur général pour la page avec fond drapeau américain.
Balises concernées :
- body.english-flag-bg (position relative)
- body.english-flag-bg::before (image de fond, pseudo-élément)
*/
/* Body : juste un conteneur */
body.english-flag-bg {
position: relative;
z-index: 0; /* pour que le ::before reste derrière */
}
/* Le fond drapeau américain très léger */
body.english-flag-bg::before {
content: "";
position: fixed; /* reste fixe à l’écran */
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('../website_images/us_flag_bg.jpg') no-repeat center center; /* image centrée */
background-size: cover; /* couvre toute la zone */
opacity: 0.06; /* très faible, ajuste à ton goût */
pointer-events: none; /* laisse le contenu cliquable */
z-index: -1; /* toujours derrière tout */
filter: saturate(1.3) brightness(1.2) contrast(1.2); /* adoucit le rendu */
}
/* ==========================================================================
SECTION 12 : Style additionnel pour les pages index.html candidats à
la location
========================================================================== */
:root { --ombre-soft: 0 8px 24px rgba(0,0,0,.08); } /* ombre douce réutilisable */
.phase1-container, .phase2-container {
background:#fff; border-radius:12px; box-shadow: var(--ombre-soft);
}
/* mêmes cadres bleus qu'ailleurs, avec coins arrondis + ombre discrète */
.border-blue { border-radius:12px; box-shadow: 0 2px 10px rgba(0,0,0,.06); }
/* lisibilité des liens sans toucher à tes couleurs/effets existants */
a, .class1 a { text-underline-offset: 2px; }
/* titres plus nets (respecte ta couleur/underline existants) */
h1 { line-height:1.25; letter-spacing:.2px; }
/* confort de lecture général des blocs descriptifs */
.texte-principal, .texte-principal-bleu { line-height:1.5; }
/* Mobile polish pour la page candidats */
.annexes img { max-width:100%; height:auto; }
/* Liens lisibles, pas de débordement de longues chaînes/fichiers */
.annexes a { text-underline-offset:2px; word-break:break-word; -webkit-tap-highlight-color:transparent; }
/* Empiler proprement l'entête en sur petit écran */
@media (max-width: 640px){
.annexes table { width:100% !important; }
.annexes table td { display:block; width:auto !important; text-align:center; }
.annexes h1 { font-size:20px; line-height:1.25; }
.annexes .border.border-medium.border-solid.border-blue { padding:12px; }
.annexes ol li { margin:.5rem 0; }
.annexes a { padding:6px 0; } /* cibles tactiles un peu plus grandes */
}
/* ==========================================================================
SECTION 12.1 : Encadrés bleus à fond coloré (.box-bleu-clair)
- Ne remplace PAS .box-bleue existant dans index.html
- Utilise les variables si présentes, sinon des valeurs de secours
========================================================================== */
.box-bleu-clair{
/* Fond bleu clair */
background-color: #ffffff;
/* Fallback de bordure (navigateurs sans color-mix) */
border: 1px solid #cfe2f5;
/* Rayons et padding */
border-radius: var(--rayon, 14px);
padding: 16px 18px;
/* Légère ombre */
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* Amélioration progressive si color-mix() existe */
@supports (color: color-mix(in srgb, #000, #fff)) {
.box-bleu-clair{
border: 1px solid color-mix(in srgb, var(--bleu, #7aa8d7) 45%, #ffffff);
}
}
/* Encadré d'attention — crème/orangé, très lisible */
.box-attention{
--att-fond: #fff7e6; /* crème léger */
--att-bord: #ffd699; /* liseré abricot */
--att-gauche: #ffb74d; /* bandeau accent (facultatif) */
--att-texte: #5a3d00; /* brun foncé lisible sur crème */
background-color: var(--att-fond);
color: var(--att-texte);
border: 1px solid var(--att-bord);
border-left: 6px solid var(--att-gauche);
border-radius: var(--rayon, 14px);
padding: 16px 18px;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
/* Ajustements de contenu à l'intérieur (optionnels) */
.box-bleu-clair p,
.box-attention p { margin: 0 0 0.75rem; }
.box-bleu-clair ul,
.box-attention ul { margin: 0 0 0.75rem 1.25rem; }
/* Mobile : resserrer un peu */
@media (max-width: 640px){
.box-bleu-clair, .box-attention { padding: 14px; }
}
/* ==========================================================================
FIN DU FICHIER MYSITES_DEFAULT.CSS
========================================================================== */
| */ td.la_note_du_moment { color: #5f9f9f; /* Texte bleu-vert */ border: 1px solid White; /* Bordure blanche */ font-size: 14pt; /* Taille moyenne (≈18.6px) */ font-weight: bold; /* Met en gras */ margin: 10px 20px 10px 10px;/* Espacement interne (ne s’applique pas toujours dans | ) */ } /* Variante plus petite de "la_note_du_moment". Utilisée pour du texte secondaire dans les cellules de tableau. Balises concernées : |
*/
td.la_note_du_moment2 {
color: #0000cc; /* Texte bleu vif */
font-size: 12pt; /* Taille plus petite (≈16px) */
}
/* ==========================================================================
SECTION 4 : Tables diverses
========================================================================== */
/*
Style appliqué aux tableaux et à leurs lignes/cellules avec la classe "grey3".
Sert à créer un fond clair uniforme avec texte vert/gris.
Balises concernées :
|