/*initi les box effaçons nos styles de navigateur par défaut */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: inherit; } html { box-sizing: border-box; font-size: 62.5%; } /* definition */ body { /* La couleur par défaut est déjà blanche, on a pas besoin de la remettre, ça peut entrainer des confusions. */ /* background-color: #fff; */ /* Je suis pas sûr que tu veuilles mettre une seule et unique font sur ton site web, le mieux c'est de ne pas la définir au body D'autant plus que tu mets une taille de police global de 1rem pour tous les éléments du body, ce qui veut dire que t'es obligé de redéfinir des tailles sur chacun des composants que tu veux réduire ou grossir. */ /* font: 1.0rem / 1.2 Helvetica Neue, Helvetica, Arial, sans-serif; */ max-width: 1400px; /* On a pas besoin de mettre un commentaire pour les marges, margin ça parle bien. */ /* marges */ margin: 0 auto; padding: 0 10px; /* Le curseur n'a pas lieu d'être en pointer, ça donne l'impression à l'utilisateur de pouvoir cliquer sur tout et d'avoir une action associée. */ /* cursor: pointer; */ /* On ne met pas de style sur du texte dans une balise global comme le body à moins que tu ne veuilles faire en sorte de toujours couper le texte comme ça. */ /* word-wrap: break-word; */ } .container-fluid { padding: 0px 5px 0px 5px; } /*plus centré grosses marges gauche droite*/ .container { padding: 0 5% 0 5%; } main { background: white; cursor: pointer; } /* balise H titres */ */ /* ******************* Titres sous titres */ h1, h2, h3, h4, h5, h6 { color: maroon; margin-bottom: 0.5rem; /* !important; margin-bottom: 0.2rem; padding-top: 0.2rem;*/ line-height: 1.2; /*line-height: 1.6;*/ font-weight: 700; } h1 { color: maroon; font-size: 3.2rem; display: block; text-align: center; padding-bottom: 2.2rem; } h1 .sub { font-size: 70%; color: maroon; font-style: italic; display: block; } h2 { font-size: 1.8 rem; margin-top: 25px; /* text-align: center;*/ /* margin-top: 1.46rem !important;*/ } h2 .sub2 { font-size: 70%; color: maroon; font-style: italic; } h2 .sub2a { display: block; font-size: 70%; color: maroon; font-style: italic; } .text-center { text-align: center !important; } h3 { font-size: 1.5rem; margin-left: 5px; padding-bottom: 0.2rem; line-height: 1.2; } h3 .sub3 { font-size: 70%; color: maroon; font-style: italic; line-height: 1.2; } h3 .sub3a { display: block; font-size: 70%; color: maroon; font-style: italic; line-height: 1.2; } h4 { font-size: 1.1rem; margin-left: 5px; padding: 0 0 0.4rem 0; line-height: 1.2; } h4 .sub4 { font-size: 70%; color: maroon; font-style: italic; line-height: 1.2; } h4 .sub4a { display: block; font-size: 70%; color: maroon; font-style: italic; line-height: 1.2; } section { font-size: 2.2vmin; margin-bottom: 10px; border-radius: 0.8rem; } p { /* text-indent: 30px;*/ font-size: 2.2vmin; font-weight: 500; line-height: 1.3; /* interlignage */ margin-bottom: 20px; padding: 0.2rem 0.5rem 0rem 3.5rem; } /* hyperliens */ a { font-family: Georgia, "Times New Roman", Times, serif; font-weight: 600; font-size: 1.9vmin; /* margin-left: 10px;*/ cursor: pointer; color: rgb(5, 5, 221); border-radius: 15px; /* animation change la couleur voir hover*/ -webkit-transition: color 2s; transition: color 2s; } a:link { color: rgb(10, 10, 204); /* inline ou à la ligne display: block; */ text-decoration: none; /*supprime le trait sous le lien*/ /* text-align: center;*/ font-size: 120%; /*zoom*/ border-radius: 15px; } a:visited { color: rgb(116, 116, 241); } a:hover { color: rgb(16, 16, 147); transition: transform .2s; transform: scale(1.2); /* zoom box-shadow: inset 550px 0 0 0 #2e04a0; border-radius: 15px; */ /* padding: 7px;*/ } a:active { color: #bd0909; border-radius: 15px; } /* changer la couleur d'un hyperlien a { -webkit-transition: color 2s; transition: color 2s; } a:hover { color: green; } */ caption { padding: 0.1rem; /* padding-top: 0.5rem;*/ padding-bottom: 0.5rem; color: #3a6081; text-align: center; font-size: 1.6vmin; } /* 3 box */ /* flexbox */ .flex-container { display: flex; justify-content: space-evenly; /* background-color: DodgerBlue; */ padding: 0.2rem 0.2rem 1.5rem 0.2rem; } .flex-container>div { /* background-color: #f1f1f1;*/ width: 33.3%; /* margin: 10px;*/ text-align: center; /* padding: 0.5rem;*/ } /* / 3 box */ article { line-height: 1.3; /* espace entre lignes */ font-size: 1.2vmin; font-weight: 600; margin: 0px 10px 0 50px; padding: 0px; } .article1 { line-height: 1.3; /* espace entre lignes */ font-size: 1.9vmin; font-weight: 600; margin: 0px 10px 0 50px; padding: 0px; } .small { font-size: 70%; } .small60 { font-size: 60%; /* small reduit 80% de base */ } .small80 { font-size: 80%; /* small reduit 80% de base */ } .small95 { font-size: 95%; /* small reduit 80% de base */ } /*boutons boostrap*/ .btn { display: inline-block; font-size: 1.9vmin; font-weight: 500; line-height: 1.3; color: #eaeef1; text-align: center; text-decoration: none; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; background-color: transparent; border: 1px solid transparent; padding: 0.5rem 0.5rem; border-radius: 0.35rem; transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; } .btn-primary { color: #fff; background-color: #0d6efd; border-color: #0d6efd; } .btn-primary:hover { color: #fff; background-color: #0b5ed7; border-color: #0a58ca; } .btn-success { color: #fff !important; background-color: #0c884e; border-color: #198754; } .btn-success:hover { color: #fff; background-color: #135034; border-color: #146c43; } .btn-info { color: #000 !important; background-color: #0dcaf0; border-color: #0dcaf0; } .btn-info:hover { color: #000; background-color: #31d2f2; border-color: #25cff2; } .btn-danger { color: #fff !important; background-color: #dc3545; border-color: #dc3545; } .btn-danger:hover { color: #fff; background-color: #bb2d3b; border-color: #b02a37; } .btn-lg, .btn-group-lg>.btn { padding: 2.5rem 2rem; font-size: 3.25rem; border-radius: 0.3rem; } .btn-sm, .btn-group-sm>.btn { padding: 0.25rem 0.5rem; font-size: 1.875rem; border-radius: 0.2rem; } /*images*/ figure { /* border: 1px #cccccc solid;*/ margin: auto; border-radius: 8px; } figcaption { font-size: 1.6vmin; font-style: italic; color: white; background-color: rgb(49, 19, 239); padding: 4px; margin: 0px 10px 0px 10px; text-align: center; border-radius: 5px; } .figH200 { max-width: 200px; } .figH300 { max-width: 300px; } .figH400 { max-width: 600px; } img { width: 100%; border-radius: 15px; padding: 0.5rem 0.5rem 0rem 0.5rem; /*padding: 0.5rem;*/ cursor: pointer; } .rounded { border-radius: 50%; width: auto; max-height: 80px; display: block; } .imgLink { display: inline-block; /* dispose plusieurs images vertical ou horizontal*/ font-size: 1.6vmin; display: inline-block; font-style: italic; font-weight: 500; color: #a7a39d; border-radius: 50%; width: 150px; margin: 0 0 5px 0; /* text-align: center;*/ } .imgLink:hover { font-size: 1%; margin: 0 0 0x 0px; /* background-color: black;*/ color: #fcfbf9; font-weight: 600; } /* marges padding espaces Aligner les éléments par rapport à l’axe de ligne horizontal ou les colonnes vertical */ .mt-5 { margin-top: 3rem !important; } .ml-5 { margin-top: 3rem !important; } .p-5 { padding: 3rem !important; } .pl-5 { padding: 3rem !important; } .px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; } /*css icones i { fill: #0000FF; height:2rem; width:2rem; margin-right:1rem; }*/ i { padding: 0.5rem; } /* blockquote utilsation*/ blockquote { /* text-indent: 15%;*/ font-size: 2.0vmin; border: 1px solid #b3b3b3; border-left: 2px solid red; /* bprdure gauche*/ background: #fafafa; margin: 10px; padding: 10px 20px; margin: 30px 5px 20px 20%; border-radius: 0px 10px 10px 0px; } blockquote p { font-size: 2.2vmin; /* font citation*/ font-weight: 600; margin: 10px 0 0 0; line-height: 30px; padding-bottom: 20px; } .blockquote:before { font-size: 3.8vmin; font-weight: 700; /* color: rgba(0, 123, 255, 0.54);*/ content: '\201C'; font-family: "Noto Serif", "Georgia", "Times New Roman", "Times", serif; height: 3.75rem; float: left; padding-right: 15px; } blockquote footer { font-size: 1.5vmin; text-align: right; /* font-style: italic;*/ margin: 12px 20px 0; } blockquote footer:before { content: "\2014 \00a0"; } /* liste ul li ;*/ ol { padding-left: 2rem; margin: 12px 0px 20px 20px; /* font-size: 1.5vmin;*/ } ol, li { font-size: 1.8vmin; } ul.suprimPuces { list-style-type: none; } ul { /*background: white; border-color: #da291c; padding: 0.5rem 0.7rem 0.7rem 2.7rem; border-radius: 5px; box-shadow: 1px 1px 3px hsla(162, 76%, 32%, .2);*/ font-size: 2.5vmin; font-weight: 600; line-height: 1.2; /* espace entre lignes */ margin: 0 0 0 2.8rem; } ul>li { /* float: left; responsive */ word-wrap: break-word; /*briser les line trop longue */ font-size: 2.0vmin; margin: 0.rem 0rem 0rem 0.8rem; /*espace vertical entre les li*/ } .list-inline { padding-left: 0; list-style: none; } .list-inline-item { display: inline-block; } .list-inline-item:not(:last-child) { margin-right: 0.5rem; } hr { display: flex; flex-wrap: wrap; margin-top: 5px; margin-bottom: 15px; height: 1px; width: 100%; border-top: 1px solid rgb(255, 252, 252); } hr.new1 { margin-top: 8rem; border: 0; border-top: 3px solid #a51c1c; border-bottom: 2px solid rgb(10, 8, 8); } /* décalage vertical continuer sous un flottant au lieu de hr L’élémentest poussé en dessous des éléments flottants gauches*/ .dessousLeft { clear: left; padding-top: 20px; } .dessousRight { clear: right; padding-top: 20px; } /*image responsive redimensionner */ .responsive { max-width: 100%; height: auto; } .responsive1 { max-width: 100%; max-height: 100%; display: block; } .responsiveh250 { width: auto; max-height: 250px; } /*utiliser la propriété CSS background-size: cover; pour redimensionner une image en background avec CSS uniquemen*/ .imgRedim { width: 500px; height: 400px; background: url("Photos\Aikido\Aikido-Valence-26--6.jpg") no-repeat; background-size: cover; border: 5px solid #000; margin: 10px; } /* position */ .pl-5 { padding-left: 5rem !important; } .text-center { text-align: center !important; } .text-right { text-align: right !important; } .text-left { text-align: left !important; } .float-end { float: right !important; padding-bottom: 20px; } .float-start { float: left !important; padding-bottom: 20px; } /* aligne au milieu vertical et horizontal */ /*marche */ .centreVertHorizEspace { display: flex; flex-direction: column; justify-content: center; align-items: center; place-content: space-between; } /*
marche bien */ .centreVert { display: flex; /* Vertical */ align-items: center; /* Horizontal */ justify-content: center; } /*en ligne espace egal comme avec col1 */ .centrehorizVert1 { display: flex; justify-content: center; align-items: center; } /*marche pas*/ .centrehorizVert { place-content: space-between; /* centre horizotal et vertical */ } /* les uns sur les autres */ .centrehoriz { display: flex; justify-content: space-evenly; /* Vertical */ align-items: center; } /*marche pas*/ .aligneVertHoriz { display: flex; flex-direction: column; align-items: flex-start; /* width: 200px; si on veut réduire la largeur */ } /* Réduction de la police *********** */ .btnreduc1 { font-size: 1.5rem !important; } .logo { display: inline-block; margin-top: -7px; max-height: 70px; height: 100%; width: 100%; } /* Taille */ .svg { max-height: 200px; height: 100%; width: 100%; } .svg1 { max-height: 100px; height: 100%; width: 100%; } /*zoom*/ .svg2 { padding: 7px; max-height: 50px; height: 100%; width: 100%; /* border-radius: 50%;arrondi*/ /* transform: scale(1.5);*/ /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } /*zoom*/ .svg3 { background: rgba(0, 0, 0, 0.5); /*transparent */ padding: 7px; max-height: 50px; height: 100%; width: 100%; border-radius: 50%; /* arrondi*/ /* transform: scale(1.5);*/ /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */ } /* ombres shadows */ .boxOmbre { border: 1px solid; padding: 10px; box-shadow: 5px 10px #888888; } .boxOmbre1 { border: 1px solid; padding: 10px; box-shadow: 5px 10px 20px #888888; } .ombre1 { border: 5px solid #fff; -moz-box-shadow: 10px 10px 16px #aaa; -webkit-box-shadow: 10px 10px 16px #aaa; box-shadow: 10px 10px 16px #555; filter: progid:DXImageTransform.Microsoft.Shadow(color='#aaaaaa', Direction=135, Strength=15); zoom: 1; } .ombre2 { -webkit-box-shadow: 0 8px 6px -6px black; -moz-box-shadow: 0 8px 6px -6px black; box-shadow: 0 8px 6px -6px black; } /******************** listes de base ************************/ /* voir le css avec tous les models */ /* ***************** details summary******************/ .accordion { margin: 5px 30px 10px 30px; padding: 5px; /*positionne l'ensemble des accordions*/ cursor: pointer; } /**/ .accordionitem { margin: -2px 0px 0 0; padding: 2px 0 3px 0; /* séparation en accordion)*/ cursor: pointer; } summary { /*ligne icones test cliquage*/ z-index: 2; border-color: #da291c; outline: none; color: blue; font-weight: 700; font-size: 2.5vmin; /* typo cliquez ici */ /* cursor: pointer; djà dans main */ } summary::-webkit-details-marker { display: none; } summary:after { /*icones */ background: #da291c; border-color: #da291c; border-radius: 15px; /* content: "+"; enlève le signe plus */ color: #fff; float: left; font-weight: bold; margin: -2px 10px 0 0; padding: 1px 0 3px 0; text-align: center; width: 30px; /* width: 30px; icone + et triangle*/ } details { /* espace autour du cliquage */ background: rgba(5, 2, 15, 0.1); padding: 0.3em; /* espace valeur */ border: 1px solid hsla(162, 76%, 32%, .3); color: black; border-radius: 5px; } details>ul { /* action sur le texte contenu dans l'accordion*/ /* float: left; responsive */ background: white; border-color: #da291c; padding: 0.5rem 0.7rem 0.7rem 2.7rem; border-radius: 5px; box-shadow: 1px 1px 3px hsla(162, 76%, 32%, .2); /**/ font-size: 2.5vmin; font-weight: 600; line-height: 1.1; /* espace entre lignes */ margin-top: 0.2em; } details>ul>li { /* float: left; responsive */ word-wrap: break-word; /*briser les line trop longue */ font-size: 2.0vmin; margin: 0.8rem; /*espace vertical entre les li*/ } /* ********************** navigation fil d'ariane 1 *************************** */ ul.breadcrumb { font-size: 2.0vmin; /* padding: 0px 0 0px 0;*/ /* décale le h1 vers bas padding: 10px 16px;*/ list-style: none; /* background-color: #eee;*/ } ul.breadcrumb li { display: inline; font-size: 2.0vmin; line-height: 1.6; } ul.breadcrumb li+li:before { padding: 1px; color: black; content: "/\00a0"; } ul.breadcrumb li a { color: #240774; text-decoration: none; font-weight: 600; } ul.breadcrumb li a:hover { color: rgb(31, 15, 213); background-color: chartreuse; padding: 5px; text-decoration: underline; } ul.breadcrumb-item+.breadcrumb-item { padding-left: 0.1rem; } ul.breadcrumb-item+.breadcrumb-item::before { float: left; padding-right: 0.rem; color: #6c757d; content: var(--bs-breadcrumb-divider, "/") /* rtl: var(--bs-breadcrumb-divider, "/") */ ; } ul.breadcrumb-item.active { color: #6c757d; } /* media ***************************** */ @media all and (min-width: 800px) { /* écran au dessus de 720 jusqu'à 1400 */ /* { body test background-color: aqua; } */ :root { --taille_titre: 3.1rem; --taille_sous_titre: 1.6rem; --taille_texte: 1.1rem; } /* taille icones*/ .icone { font-size: 1.7rem; color: red } h1 { font-size: var(--taille_titre); text-align: center; /* padding-bottom: 0.7rem;*/ } h2 { font-size: 2.2rem; margin: 5px 0 1px 0; /*marge entre titre et haut de grille au bord du body*/ } h3 { font-size: 1.6rem; } h3 .sub3a { display: block; font-size: 70%; color: maroon; font-style: italic; line-height: 1.2; } h4 { font-size: var(--taille_sous_titre); padding-left: 4px; } h5 { font-size: var(--taille_texte); line-height: 1.4; } h1, h2, h3, h4, h5 { margin-block-start: 0; margin-block-end: 0; line-height: 1.2; color: maroon; } dl { margin-left: 2rem; } figcaption { font-size: 80%; } }