, à l'intérieur d'un . Le site pose donc tout seul, via style.less : article color #555, text-align justify article p font-size 1.1em, line-height 1.68em article h1 borden_regular 58,8px article h2 borden_regular, font-size 2.5em (35px) .france h1,h2 couleur @green #00a7b4 .france a couleur @green #00a7b4 Ce fichier ne définit que les blocs neufs : cartes d'antenne, cartes d'atout, bandeau bleu. Rappel : le site pose html{font-size:10px}, donc 1rem = 10px. Spécificité : article p compte (0,0,2). On écrit donc p.ma-classe et non .art-france .un-bloc p. ========================================================================== */ .art-france { --fr-green: #00a7b4; /* @green de style.less */ --fr-green-dark: #007e88; --fr-blue: #0072b5; /* @blue */ --fr-blue-dark: #005a90; --fr-orange: #e75113; /* @orange */ --fr-orange-dark: #d9001a; /* bord bas des boutons du site */ --fr-violet: #b5007b; /* @violet */ --fr-black: #212121; /* @black */ --fr-grey-light: #e4e4e4; /* @greyLight */ --fr-navy: #1b2a4a; /* le bleu nuit des liens de la maquette */ --fr-rose-pale: #fdeef4; /* fond des cartes « pourquoi nous choisir » */ --fr-blue-band: #c3e5ec; /* bandeau bleu de bas de page */ } .art-france *, .art-france *::before, .art-france *::after { box-sizing: border-box; } /* -------------------------------------------------------------------------- 1. Titres : la prod décide de la police, de la taille et de la couleur. On ne règle que les marges. -------------------------------------------------------------------------- */ .art-france h2 { margin: 5rem 0 2rem; } .art-france > p:first-child { margin-top: 0; } .art-france ul.fr-liste { margin: 0 0 2rem; padding-left: 2rem; } .art-france ul.fr-liste li { margin-bottom: 1rem; } /* -------------------------------------------------------------------------- 2. Boutons — mêmes mesures que le .btn du site (valeurs réellement calculées dans le navigateur), seules les couleurs changent. -------------------------------------------------------------------------- */ .art-france .fr-btn { display: inline-block; font-family: borden_regular, 'Open Sans', sans-serif; font-size: 25px; font-weight: 500; line-height: 30px; text-transform: uppercase; text-decoration: none; text-align: center; padding: 10px 25px; border-radius: 25px; border-style: solid; border-width: 0 0 2px 0; border-color: transparent; background: none; white-space: normal; cursor: pointer; transition: all .3s; } .art-france p.fr-btn-row { text-align: center; margin: 3rem 0 1rem; } /* turquoise plein */ .art-france .fr-btn-green { background: var(--fr-green); border-color: var(--fr-green-dark); color: #fff; } .art-france .fr-btn-green:hover, .art-france .fr-btn-green:focus { background: var(--fr-green-dark); border-color: #005c64; color: #fff; } /* bleu plein */ .art-france .fr-btn-blue { background: var(--fr-blue); border-color: var(--fr-blue-dark); color: #fff; } .art-france .fr-btn-blue:hover, .art-france .fr-btn-blue:focus { background: var(--fr-blue-dark); border-color: #003d63; color: #fff; } /* orange plein */ .art-france .fr-btn-orange { background: var(--fr-orange); border-color: var(--fr-orange-dark); color: #fff; } .art-france .fr-btn-orange:hover, .art-france .fr-btn-orange:focus { background: var(--fr-orange-dark); border-color: #8c0818; color: #fff; } /* -------------------------------------------------------------------------- 3. Les cartes d'antenne -------------------------------------------------------------------------- */ .art-france .fr-antennes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 2.4rem; margin: 2rem 0 0; } .art-france .fr-antenne { display: flex; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .12); padding: 2rem 1.8rem; text-align: center; } .art-france .fr-antenne h3 { font-family: borden_regular, 'Open Sans', sans-serif; font-weight: normal; /* article h3 pose bolder : on annule la fausse graisse */ font-size: 17px; line-height: 1.25; margin: 0 0 1.5rem; } /* le titre est bleu, pas vert : le site colore tous les liens de la rubrique france en @green, il faut le dire explicitement ici. */ .art-france .fr-antenne h3 a, .art-france .fr-antenne h3 a:hover, .art-france .fr-antenne h3 a:focus { color: var(--fr-blue); text-decoration: none; } .art-france p.fr-antenne-adresse { font-size: 1em; line-height: 1.55; text-align: center; margin: 0 0 .6rem; } .art-france p.fr-antenne-mail { font-size: 1em; line-height: 1.55; text-align: center; margin: 0 0 1.6rem; } .art-france .fr-antenne-mail .fa { color: var(--fr-navy); margin-right: .6rem; } .art-france .fr-antenne-mail a { color: var(--fr-navy); text-decoration: underline; } /* le filet de la maquette, juste au-dessus du bouton */ .art-france .fr-antenne-action { margin-top: auto; border-top: 1px solid var(--fr-grey-light); padding-top: 1.6rem; } .art-france .fr-antenne-action .fr-btn { display: block; width: 100%; font-size: 17px; /* 25px ne tient pas dans une carte de 304 px */ line-height: 22px; padding: 8px 14px; } /* -------------------------------------------------------------------------- 4. « Pourquoi choisir France Parrainages ? » : 3 cartes roses -------------------------------------------------------------------------- */ .art-france .fr-atouts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem; margin: 2rem 0 0; } .art-france .fr-atout { background: var(--fr-rose-pale); border-radius: 20px; padding: 3rem 2rem; text-align: center; } .art-france .fr-atout h3 { font-family: borden_regular, 'Open Sans', sans-serif; font-weight: normal; font-size: 28px; line-height: 1.15; color: var(--fr-orange); margin: 0 0 2rem; } .art-france .fr-atout p { font-size: 1em; line-height: 1.45; text-align: center; margin: 0 0 1rem; } .art-france .fr-atout p:last-child { margin-bottom: 0; } .art-france p.fr-atout-fort { font-weight: 700; } /* -------------------------------------------------------------------------- 5. Bandeau bleu clair de bas de page, 3 cartes d'appel à l'action -------------------------------------------------------------------------- */ .art-france .fr-cta { background: var(--fr-blue-band); border-radius: 12px; margin: 5rem 0 0; padding: 4rem 3rem; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } .art-france .fr-cta-card { background: #fff; border-radius: 12px; padding: 2.5rem 2rem; text-align: center; display: flex; flex-direction: column; align-items: center; } .art-france .fr-cta-card .fa { font-size: 34px; color: #9aa0ad; margin-bottom: 1.5rem; } .art-france .fr-cta-card p { font-family: d_hanna_softbold, Helvetica, Arial, sans-serif; text-transform: uppercase; font-weight: normal; /* d_hanna est déjà grasse : pas de fausse graisse */ font-size: 17px; line-height: 1.3; text-align: center; margin: 0 0 2rem; } .art-france .fr-cta-card p strong { color: var(--fr-blue); font-weight: normal; } .art-france .fr-cta-card .fr-btn { margin-top: auto; width: 100%; font-size: 20px; line-height: 26px; padding: 9px 16px; } /* -------------------------------------------------------------------------- 6. Tablette et mobile -------------------------------------------------------------------------- */ @media (max-width: 991px) { .art-france .fr-antennes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .art-france .fr-atouts, .art-france .fr-cta { grid-template-columns: 1fr; } } @media (max-width: 767px) { .art-france .fr-antennes { grid-template-columns: 1fr; } .art-france p.fr-btn-row .fr-btn { font-size: 18px; line-height: 24px; padding: 8px 18px; } }