@charset "utf-8"; /*! Theme Name: Moussira REDJEM Theme URI: http://underscores.me/ Author: Jean-Bernard MARTINEZ Author URI: http://jb.martinez.free.fr/ Description: Thème réalisé pour une infirmière libérale Version: 1.0.0 Tested up to: 5.4 Requires PHP: 5.6 License: GNU General Public License v2 or later License URI: LICENSE Text Domain: moussira-redjem Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready This theme, like WordPress, is licensed under the GPL. Use it to make something cool, have fun, and share what you've learned. Moussira REDJEM is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc. Underscores is distributed under the terms of the GNU GPL v2 or later. Normalizing styles have been helped along thanks to the fine work of Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ ## ##### ## ## ## ## ## #### #### ## ##### ## ### ## --- CSS Document ## ## ## ## ## # ## ## ##### ## ## Jean-Bernard MARTINEZ © 2025 - jb.martinez.free.fr --> conception Mobile First : du Mobile vert les grands écrans */ /* *************************************************************************************************** 0 - RESET : RÉINITIALISER ==> [ Etablir les styles standards ] ****************************************************************************************************** */ * { /* --- Désigner tous les éléments d'une page en même temps. */ } html { scroll-behavior: smooth; /* scroll souple */ } :root { /* --- pseudo-classe, cible le document comme mais sa spécificité sera plus forte */ /* -------------------------------------- * VARIABLES * -------------------------------------- */ /*-- Couleurs --*/ --color-1 :#fff ; --color-2 :#000 ; --color-3 : rgba(75,85,99,0.1); --color-4 : rgb(31,41,55,1); --color-5 : rgba(75,85,99,1); --color-6 : rgba(255, 29, 72,1); } body { /* --- Désigner le contenue de la page html */ font-family: 'Roboto', sans-serif; /*-- Police google font --*/ margin: 0!important; /*-- Supprimer les marges par défaut --*/ } /* *************************************************************************************************** 1 - WORDPRESS : GESTION DES BLOQUES ==> [ Mise en place type : article, aside, figure, section ] ****************************************************************************************************** */ article { margin: 0 auto!important; padding: 3rem 1rem!important; width: calc(100% - 2rem)!important; max-width: calc(100% - 2rem)!important; } .entry-footer { text-align: center; margin-top: 6rem; } .edit-link a { text-decoration: none; color: var(--color-1); background-color: var(--color-6); padding: 0.5rem 1rem; border-radius: 9999px; } #post-2 .entry-title { display: none; } .screen-reader-response { display: none; } .wpcf7-response-output { text-align: center; font-size: 12px; width: 100%; } /* *************************************************************************************************** 2 - USUAL CLASSES : CLASSES USUELLES ==> [ Mise en place type : H1, a, p, button ] ****************************************************************************************************** */ /*-- Titre --*/ h1, h2, h3, h4, h5 { } /*-- Lien hypertexte --*/ a { } a:hover { text-decoration:none; } button { } button:hover { } button:focus { /* Supprimer border de focus sur les bouton */ outline-style:none; } /*-- images --*/ img { /* width: 100%; pour une gestion automatique des images callé sur la taille du bloque parent (figure, picture) */ vertical-align: bottom; } /*-- Liste --*/ ul, ol { margin: 0; padding: 0; } li { list-style:none; margin-left:0; padding-left:0; } /*-- Tableau --*/ table { } tr { } td { } .dsp-992 { display: inline!important; } .img-article, .wp-image-70, .wp-image-65 { width: calc(100% - 5px)!important; height: auto!important; vertical-align: bottom!important; } /* *************************************************************************************************** 3 - LAYOUT : DISPOSITION ==> [ Mise en place type : #page-header, nav, main, #page-footer ] ****************************************************************************************************** */ /* --- #page-header : ENTÊTE DE LA PAGE --- */ #page-header { position: relative; display: flex; flex-direction: column; justify-content: start; align-items: center; padding: 1rem 0 0; background-color: var(--color-1); } /* --- NAV : MENU --- */ #page-header nav ul { position: relative; display: flex; flex-direction: row; } #page-header nav ul li { padding: 0.5rem; } #page-header h1 span { display: inline-block; transform: translate(1rem,-1.5rem); } #page-header h1 { transform: translateX(-0.5rem); } #page-header h1 a { text-decoration: none; font-size: 1.5rem; color: var(--color-4); } #page-header h1 a:hover { color: var(--color-4); } #page-header nav ul li a { text-decoration: none; color: var(--color-5); } #page-header nav ul li a:hover { color: var(--color-6); } #page-header .phone { position: relative; display: block; text-decoration: none; color: var(--color-1); background-color: var(--color-6); padding: 0.5rem 1rem; border-radius: 9999px; } #page-header .phone:hover::after { position: absolute; z-index: 1; top:0; left:0; width: 100%; height: 100%; /* padding: 0.5rem 1rem; */ border-radius: 9999px; background-color: var(--color-3); content: ""; } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { margin: 3rem 0; } main #accueil { padding-top: 6rem; padding-bottom: 6rem; background-size: cover; background-position: center center; } #accueil .container { padding-left: 1rem; padding-right: 1rem; margin-left: auto; margin-right: auto; width: calc(100% - 2rem); } #accueil .backdrop { --tw-backdrop-blur: blur(4px); backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia); padding: 2rem; background-color: rgba(255, 255, 255, 0.9); border-radius: 1rem; max-width: 42rem; } #accueil h2 { color: var(--color-4); font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; margin-bottom: 1.5rem; } #accueil p { color: var(--color-5); font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 2rem; } #accueil .block-link { position: relative; display: flex; flex-direction: column; gap: 1rem; } #accueil .block-link a { text-decoration: none; } #accueil .link-rdv { background-color: var(--color-6); transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; color: var(--color-1); text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 2rem; padding-right: 2rem; border-radius: 9999px; } #accueil .link-service { transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; color: var(--color-6); text-align: center; padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 2rem; padding-right: 2rem; border: var(--color-6) solid 2px; border-radius: 9999px; } /* --- A PROPOS --- */ #apropos { padding-top: 4rem; padding-bottom: 4rem; display: grid; gap: 2rem; } #apropos .subtitle { color: var(--color-6); text-transform: uppercase; } #apropos p { text-align: justify; } /* --- PROSEDURE --- */ #procedure { padding-top: 4rem; padding-bottom: 4rem; display: grid; gap: 2rem; } #procedure .subtitle { color: var(--color-6); text-transform: uppercase; } #procedure p { text-align: justify; } /* --- SERVICES --- */ #services { padding-top: 4rem; padding-bottom: 4rem; } #title-services { color: var(--color-4); font-weight: 700; font-size: 1.875rem; line-height: 2.25rem; text-align: center; margin-bottom: 3rem; } #list-services { display: grid; gap: 2rem; } #list-services .title-services{ font-size: 1.75rem; margin-top: 1.5rem; margin-bottom: .5rem; font-weight:normal!important; } #list-services .text-services { margin-top: 0; margin-bottom: 1rem; font-size: 1rem; font-weight: 400; line-height: 1.5; color: var('--color-4')!important; font-weight: normal!important; } #prestation { display: grid; gap: 2rem; } /* --- CONTACT --- */ #contact { padding-top: 4rem; padding-bottom: 4rem; margin-left: auto; margin-right: auto; max-width: 1140px; } #contact h2 { color: var(--color-4); font-weight: 700; font-size: 1.875rem; line-height: 2.25rem; margin-bottom: 1.5rem; text-align: center; } #contact .wp-block-columns { display: grid; gap: 2rem; } #contact a { text-decoration: none; color: var(--color-4); } #contact a:hover { text-decoration: none; color: var(--color-6); } #contact .phone, #contact .mail, #contact .address { position: relative!important; transform: translateX(2rem)!important; } #contact .phone::before, #contact .mail::before, #contact .address::before { position: absolute; z-index: -1; top: 0; left: 0; width: 30px; height: 30px; transform: translate(-2rem, 0rem); } #contact .phone::before { content:url(/wp-content/uploads/2025/02/phone.png); } #contact .mail::before { content:url(/wp-content/uploads/2025/02/mail.png); } #contact .address::before { content:url(/wp-content/uploads/2025/02/address.png); } #contact .mail { transform: translate(2rem, -0.75rem)!important; } #contact .address { transform: translate(2rem, -1.5rem)!important; } /* --- FORM --- */ form input, form textarea { width: 100%!important; } /* --- FOOTER : PIED DE PAGE --- */ #page-footer { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 1rem; color: var(--color-1); background-color: var(--color-4); } #page-footer p { font-size: 12px; padding-top: 1rem; text-align: center; } #page-footer a { text-decoration: none; } #page-footer .link-footer, #page-footer .link-footer:hover { color: var(--color-1); } #page-footer .link-footer { display: inline-block; } #page-footer span { display: inline-block; transform: translate(0.75rem, -1.4rem); } #page-footer .link-jbm { color: var(--color-1); } #page-footer .link-jbm:hover { color: var(--color-6); } /* *************************************************************************************************** 4 - MODULAR ELEMENTS : ELEMENTS MODULAIRES ==> [ caroussel, galerie... ] ****************************************************************************************************** */ /* *************************************************************************************************** 5 - MEDIA QUERIES : GESTION TAILLE ECRAN ****************************************************************************************************** */ /* SMALL SCREEN : smartphone à partir de 576px */ @media (min-width: 576px) { /* --- #page-header : ENTÊTE DE LA PAGE --- */ #page-header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- #page-footer : PIED DE PAGE --- */ #page-footer { } } /* MEDIUM SCREEN : Tablette à partir de 768px */ @media (min-width: 768px) { /* --- #page-header : ENTÊTE DE LA PAGE --- */ #page-header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- #page-footer : PIED DE PAGE --- */ #page-footer { } } /* WIDE SCREEN : Tablette et Ordinateur (desktop) à partir de 992px */ @media (min-width: 992px) { .dsp-992 { display: none!important; } /* --- #page-header : ENTÊTE DE LA PAGE --- */ #page-header { position: fixed; padding: 0.25rem 1rem 0; flex-direction: row; justify-content:space-between; align-items:center; width: 100%; background-color: var(--color-1); } #page-header h1 { transform: translateY(0.25rem); } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { margin: 0 0 3rem; } main #accueil { padding-top: 12rem; padding-bottom: 6rem; } #accueil .block-link { flex-direction: row; } #apropos { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1140px; margin: 0 auto; } #procedure { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1140px; margin: 0 auto; } #services { padding-top: 9rem; padding-bottom: 8ch; } #list-services { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 1140px; margin: 0 auto; } #prestation { display: grid; gap: 2rem; grid-template-columns: 20% 80%; max-width: 900px; margin: 0 auto; } #prestation .list-prestation { display: grid; gap: 2rem; grid-template-columns: repeat(3, minmax(0, 1fr)); text-align: center; } #prestation .list-prestation .wp-block-column { background-color: var(--color-3); border-radius: 10px; padding: 1rem; } #prestation img { width: auto!important; height: 80px!important; } #contact { padding-top: 9rem; padding-bottom: 4rem; } #contact .wp-block-columns { display: grid; gap: 2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } form { padding-top: 0; padding-bottom: 0; margin-left: auto; margin-right: auto; max-width: 1140px; display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; transform: translate(-2rem, -6rem); } form p:nth-child(4), form p:nth-child(5) { width: 100%!important; text-align: center; } form p { width: 48%!important; } form label { width: 100%!important; } form input[type="submit"] { width:200px!important; border-radius: 9999px; background-color: var(--color-6); color: var(--color-1); border: 1px solid transparent; padding: 0.5rem 0; margin: 0 auto; } /* --- #page-footer : PIED DE PAGE --- */ #page-footer { flex-direction: row; justify-content:space-between; align-items: center; } #page-footer p { padding-top: 0; text-align: left; } } /* VERY LARGE SCREEN : affichage pour les écrans Xlarges (desktop) à partir de 1200px */ @media (min-width: 1200px) { /* --- #page-header : ENTÊTE DE LA PAGE --- */ #page-header { } /* --- NAV : MENU --- */ nav { } /* --- MAIN : CONTENUE DE LA PAGE --- */ main { } /* --- #page-footer : PIED DE PAGE --- */ #page-footer { } }