:root {
/* https://hextoral.com/hex-to-pantone-conversion/DCC235/ */
/* Les couleurs suivent le guide de formule de couleurs solides sur papier couché Pantone+ */
--blanc-rvb: 255,255,255; /* HEX #FFFFFB CMJN 0, 0, 1, 0 */
--blanc-casse-rvb: 246,246,246; /* HEX #F6F6F6 CMJN 2, 2, 2, 0 */
--gris-argent-rvb: 213,213,213; /* HEX #D5D5D5 CMJN 15, 12, 13, 0 */
--gris-clair-rvb: 217,225,226; /* HEX #D9E1E2 CMJN 13, 7, 9, 0 Pantone 7541 C */
--gris-moyen-rvb: 117,120,123; /* HEX #888B8D CMJN 55, 46, 44, 10 Pantone Cool Grays 9 C */
--gris-moyen-demi-rvb: 236,240,241; /* HEX #888B8D */
--gris-sombre-rvb: 29, 37, 45; /* HEX #1D252D CMJN 79, 69, 58, 66 Pantone 433 C */
--noir-rvb: 16, 24, 32; /* HEX #101820 CMJN 80, 71, 60, 76 Pantone Black 6 C */
--rouge-rvb: 224, 60, 49; /* HEX #E03C31 CMJN 5, 92, 91, 0 Pantone 179 C */
--orange-rvb: 219,107, 48; /* HEX #DB6B30 CMJN 10, 71, 96, 1 Pantone 7578 C */
--jaune-rvb: 215,200, 38; /* HEX #D7C826 CMJN 19, 14, 100, 0 Pantone 611 C */
--jaune-moutarde-rvb: 215,185, 38; /* HEX #D7B926 CMJN 18, 23, 100, 0 */
--jaune-serin-rvb: 255,232, 29; /* HEX #D7B926 CMJN 18, 23, 100, 0 */
--vert-rvb: 80,158, 47; /* HEX #509E2F CMJN 73, 15, 100, 2 Pantone 362 C */
--vert-academie-rvb: 64,115, 54; /* HEX #3C7336 CMJN 78, 73, 100, 20 */
--bleu-vert-rvb: 66,152,181; /* HEX #4298B5 CMJN 72, 27, 21, 0 Pantone 7459 C */
--bleu-clair-rvb: 123,164,219; /* HEX #7BA4DB CMJN 51, 27, 0, 0 Pantone 659 C */
--bleu-sombre-rvb: 30, 34,170; /* HEX #1E22AA CMJN 96, 94, 0, 0 Pantone 2736 C */
--violet-rvb: 117, 59,189; /* HEX #753BBD CMJN 67, 84, 0, 0 Pantone 2736 C */
--pourpre-rvb: 187, 41,187; /* HEX #BB29BB CMJN 37, 88, 0, 0 Pantone Purple C */
--rose-rvb: 255, 37,108; /* HEX #FF256C CMJN 0, 95, 35, 0 Pantone 812 C */
/* Transparence */
--alpha-100: 1;
--alpha-90: 0.9;
--alpha-70: 0.7;
--alpha-50: 0.5;
--alpha-30: 0.3;
--alpha-10: 0.1;
/* Priorité d’affichage */
--z-index-navbar: 10; /* Barre de navigation */
--z-index-dropdown: 20; /* Liste déroulante */
--z-index-modal: 30; /* Fenêtre d’erreur ou de publicité */
--z-index-tooltip: 40; /* Info-bulle */
/* Dimensions */
--taille-fonte: 12px; /* Corps de la fonte converti en pixels (100 px = 75 pt) */
/* Dépendance directe de la taille de la police de l’élément pour lequel ils sont appliqués */
--courbure: 0.500em; /* Courbure de la bordure */
--intermot: 0.500em; /* Espacement intermot */
--interligne: 1.500em; /* Interligne (ou 0.625rem) */
--approche: 0.025em; /* Espacement entre les lettres inclusant l'approche initiale et finale */
--lisere: 1px; /* Épaisseur du liseré
/* Cohérence et adaptabilité de la hiérarchie visuelle */
--interbloc: 0.500rem; /* Marge verticale entre deux blocs de contenu */
--gouttiere: 1.000rem; /* Intervalle entre deux colonnes */
--intermenu: 0.500rem; /* Interligne (ou 0.625rem) */
--rembourrage: 1.000rem; /* Rembourrage */
--retrait: 2.000rem; /* Retrait */
--alinea: -1.000rem; /* Retrait */
/* Taille des polices */
--taille-m: 1.500rem; /* Taille de la fonte du menu primaire */
--taille-h1: 2.000rem; /* h1 2.000rem (32px) margin (16 px) */
--taille-h2: 1.625rem; /* h2 1.625rem (26px) margin (13 px) */
--taille-h3: 1.250rem; /* h3 1.500rem (24px) margin (12 px) */
--taille-h4: 1.250rem; /* h4 1.375rem (22px) margin (11 px) */
--taille-h5: 1.250rem; /* h5 1.250rem (20px) margin (10 px) */
--taille-h6: 1.125rem; /* h6 1.125rem (18px) margin ( 9 px) */
--taille-p: 1.000rem; /* p 1.000rem (16px) margin ( 8 px) */
/* Navigation */
--navigation-hauteur: 4.000rem; /* Hauteur de la barre de navigation */
--navigation-largeur: 100%; /* Largeur de la barre de navigation */
--navigation-rembourrage-vertical: 0.000em; /* Espace de rembourrage vertical */
--navigation-rembourrage-horizontal: 18.5%; /* Espace de rembourrage horizontal */
--menu-hauteur: 4.000rem; /* Hauteur du bloc de menu */
--menu-secondaire-taille: 1.000rem; /* Taille de la police de menu */
/* Adaptation de la largeur des menus selon la résolution de l’écran */
--ecran-minimal: 1200;
--ecran-maximal: 3840;
--resolution-initiale: 77;
--resolution-finale: 50;
--ecran-minimal-largeur: calc(var(--ecran-minimal) * 1px);
--ecran-maximal-largeur: calc(var(--ecran-maximal) * 1px);
--menu-ecran-minimal-largeur: calc(var(--resolution-initiale) * 1vw);
--menu-ecran-maximal-largeur: calc(var(--resolution-finale) * 1vw);
--difference-largeur-: calc(var(--ecran-maximal) - var(--ecran-minimal));
--difference-menu-largeur-: calc((var(--resolution-initiale) - var(--resolution-finale)) * var(--ecran-maximal) / 100);
--menu-largeur: var(--menu-ecran-minimal-largeur);
/* Vignette */
--vignette-nombre: 3; /* Nombre de vignettes par rangée */
}
/* Arial Regular */
@font-face {
font-family: "Arial";
src:
url("../fonts/arial-regular.woff2") format("woff2-variations"),
url("../fonts/arial-regular.woff") format("woff-variations"),
url("../fonts/arial-regular.ttf") format("truetype"),
url("../fonts/arial-regular.otf") format("opentype");
}
/* Arial Italic */
@font-face {
font-family: "Arial Italic";
src:
url("../fonts/ArialVariable.woff2") format("woff2-variations"),
url("../fonts/ArialVariable.woff") format("woff-variations"),
url("../fonts/ariali.ttf") format("truetype"),
url("../fonts/ariali.otf") format("opentype");
}
/* Font Awesome 6 Regular */
@font-face {
font-family: "Font Awesome 6 Regular";
font-weight: 400;
font-style: normal;
src: url("../fonts/fa-regular-400.woff2") format("woff2"),
url("../fonts/fa-regular-400.woff") format("woff"),
url("../fonts/fa-regular-400.ttf") format("truetype");
}
/* Font Awesome 6 Solid */
@font-face {
font-family: "Font Awesome 6 Solid";
font-weight: 900;
font-style: normal;
src: url("../fonts/fa-solid-900.woff2") format("woff2"),
url("../fonts/fa-solid-900.woff") format("woff"),
url("../fonts/fa-solid-900.ttf") format("truetype");
}
/* Font Awesome 6 Brand */
@font-face {
font-family: "Font Awesome 6 Brands";
font-weight: 400;
font-style: normal;
src: url("../fonts/fa-brands-400.woff2") format("woff2"),
url("../fonts/fa-brands-400.woff") format("woff"),
url("../fonts/fa-brands-400.ttf") format("truetype");
}
/* Hack Regular */
@font-face {
font-family: "Hack Regular";
font-weight: 400;
font-style: normal;
src:
url("../fonts/hack-regular.woff2") format("woff2-variations"),
url("../fonts/hack-regular.woff") format("woff-variations"),
url("../fonts/hack-regular.ttf") format("truetype");
}
/* SimplyMono-Book */
@font-face {
font-family: "SimplyMono-Book";
font-style: normal;
font-weight: 400;
src: url("../fonts/SimplyMono-Book.woff2") format("woff2"),
url("../fonts/SimplyMono-Book.woff") format("woff"),
url("../fonts/SimplyMono-Book.ttf") format("truetype");
}
/* SimplySans-Book */
@font-face {
font-family: "SimplySans-Book";
font-style: normal;
font-weight: 400;
src: url("../fonts/SimplySans-Book.woff2") format("woff2"),
url("../fonts/SimplySans-Book.woff") format("woff"),
url("../fonts/SimplySans-Book.ttf") format("truetype");
}
@keyframes focalisation {
0% {
transform: scale(.5) translate(0, 0);
}
5% {
transform: scale(1.1) translate(20px, 20px);
}
7% {
transform: scale(1) translate(0, 0);
}
100% {
transform: scale(1) translate(0, 0);
}
}
/* styles globaux et propriétés qui s’appliquent à l’ensemble du document */
html {
font-family: SimplySans-Book, Arial, sans-serif;
font-size: var(--taille-fonte);
letter-spacing: normal;
line-height: var(--interligne);
word-spacing: normal;
color: rgba(var(--noir-rvb), var(--alpha-100));
}
/* Styles liés à la mise en page globale de la page */
body {
display: grid;
grid-template-areas:
"entete"
"principal"
"pied";
gap: var(--gouttiere);
margin: 0;
padding: 0;
background-color: rgba(var(--blanc-casse-rvb), var(--alpha-100));
}
/* Menu superposé */
aside {
grid-area: superposition;
padding: var(--rembourrage); /* Rembourrage sur la verticale */
background-color: rgba(var(--gris-sombre-rvb),var(--alpha-100));
position: fixed; /* position fixed pour occuper toute la fenêtre de visualisation */
top: 4.1rem;
left: 0;
right: 0;
bottom: 0; /* ajouter bottom: 0 pour étendre l'élément jusqu'en bas */
overflow: auto; /* ajouter un défilement si le contenu est plus long que la fenêtre de visualisation */
z-index: calc(var(--z-index-navbar) + 1);
}
/* Formulaire */
.form {
display: flex;
flex-direction: column;
width: 100%;
}
/* display flex pour utiliser Flexbox
justify-content pourt centrer les éléments horizontalement
padding rembourrage sur la verticale */
header {
grid-area: entete;
display: flex;
flex-direction: column;
padding: 0;
background-color: rgba(var(--gris-moyen-rvb),var(--alpha-100));
justify-content: center;
position: sticky;
top: 0;
z-index: var(--z-index-navbar);
}
header nav {
display: flex;
align-items: center;
}
header nav ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
header nav li {
display: inline-block;
margin-right: 10px;
}
header nav a {
display: inline-block;
text-decoration: none;
}
kbd {
padding: .17rem;
font-size: 0.84em;
color: rgba(var(--bleu-vert-rvb),var(--alpha-100));
background-color: rgba(var(--gris-sombre-rvb),var(--alpha-100));
border: var(--lisere) solid rgba(var(--gris-sombre-rvb),var(--alpha-50));
border-radius: var(--courbure);
font-family: "Hack Regular";
}
main {
grid-area: principal;
padding: var(--rembourrage) 0; /* Rembourrage sur la verticale */
}
footer {
grid-area: pied;
padding: var(--rembourrage); /* Rembourrage sur la verticale */
background-color: rgba(var(--gris-sombre-rvb),var(--alpha-100));
color: rgba(var(--jaune-rvb),var(--alpha-100));
}
main, footer, aside {
display: grid;
grid-template-columns: auto var(--menu-largeur) auto;
gap: var(--gouttiere);
}
main > div,
footer > div,
aside > div {
box-sizing: border-box;
}
a {
color: rgba(var(--bleu-vert-rvb));
}
/* link : style pour les éléments de menu non visités */
/* visited : style pour les éléments de menu visités */
a:link, a:visited {
text-decoration: none;
}
/* active: style pour les éléments de menu lorsqu'ils sont cliqués */
/* hover: style pour les éléments de menu lorsqu'ils sont cliqués */
a:active,
a:hover {
text-decoration:underline;
}
/* Désactive les propriétés background-color et position des headers dans les articles */
article.vignette > header {
background-color: transparent;
position: static;
}
blockquote {
display: block;
background-color: rgba(var(--gris-clair-rvb), var(--alpha-50));
border-radius: var(--courbure);
padding: var(--rembourrage);
margin-block-start: var(--interligne);
margin-block-end: var(--interligne);
margin-inline-start: 40px;
margin-inline-end: var(--intermot);
}
button {
border-width: 0;
}
caption {
caption-side: bottom;
padding: var(--rembourrage);
font-weight: bold;
}
/* Pseudo-élément pour étendre la couleur d'arrière-plan à gauche */
dd {
margin-left: var(--retrait);
text-indent: var(--alinea);
position: relative;
margin-inline-end: var(--intermot);
}
dd:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: var(--alinea);
width: var(--retrait);
background-color: inherit;
}
dd:hover {
background-color: rgba(var(--gris-clair-rvb),var(--alpha-30));
}
dd > b {
background-color: rgba(var(--gris-clair-rvb),var(--alpha-50));
color: rgba(var(--gris-moyen-rvb),var(--alpha-100));
padding: 0.28em 1.2em 0.35em;
font-weight: normal;
font-variant: small-caps;
}
dd:hover > b {
background-color: rgba(var(--gris-clair-rvb),var(--alpha-90));
color: rgba(var(--noir-rvb),var(--alpha-100));
}
dd.drapeau {
text-indent: 0;
}
del {
color: rgba(var(--rouge-rvb),var(--alpha-100));
}
details[open] .question-reponse:marker {
content: '▼';
}
details img {
width: 3rem;
}
div.image-normale {
background-color: rgba(var(--gris-clair-rvb), var(--alpha-70));
}
/* Terme */
dt {
text-transform: uppercase;
font-weight: bold;
color: rgba(var(--bleu-clair-rvb), var(--alpha-100));
position: relative;
margin: var(--interligne) 0;
}
/* Ajout de l'une des 9 catégories grammaticales et de l’un des 2 genres du mot */
dt.categorie-adjectif::after {content: "adjectif";}
dt.categorie-adverbe::after {content: "adverbe";}
dt.categorie-conjonction::after {content: "conjonction";}
dt.categorie-determinant::after {content: "déterminant";}
dt.categorie-interjection::after {content: "interjection";}
dt.categorie-nom-feminin::after {content: "nom féminin";}
dt.categorie-nom-masculin::after {content: "nom masculin";}
dt.categorie-preposition::after {content: "préposition";}
dt.categorie-pronom-masculin::after {content: "pronom masculin";}
dt.categorie-pronom-feminin::after {content: "pronom féminin";}
dt.categorie-preposition-::after {content: "nom féminin";}
dt.categorie-verbe::after {content: "verbe";}
dt.categorie-nom-feminin-pluriel::after {content: "nom féminin pluriel";color: rgba(var(--rose-rvb), var(--alpha-100));}
dt.categorie-nom-masculin-pluriel::after {content: "nom masculin pluriel";color: rgba(var(--bleu-rvb), var(--alpha-100));}
dt.langue-anglais::after {content: "(version en anglais)";font-weight: normal;}
/* Catégorie grammaticale */
dt::after {
color: rgba(var(--noir-rvb), var(--alpha-100));
font-weight: bold;
text-transform: none;
position: absolute;
top: 0;
white-space: nowrap;
margin-left: 0.5rem;
}
dt:nth-of-type(2n+1),
dt:nth-of-type(2n+1) + dd,
dt:nth-of-type(2n+1) + dd + dd,
dt:nth-of-type(2n+1) + dd + dd + dd {
background-color: rgba(var(--blanc-rvb), var(--alpha-100));
position: relative;
}
dt:nth-of-type(2n),
dt:nth-of-type(2n) + dd,
dt:nth-of-type(2n) + dd + dd,
dt:nth-of-type(2n) + dd + dd + dd {
background-color: rgba(var(--blanc-rvb), var(--alpha-100));
position: relative;
}
dt svg {
margin-right: var(--intermot);
}
em {
font-style: normal;
color: rgba(var(--gris-moyen-rvb));
}
em span {
color: rgba(var(--noir-rvb),var(--alpha-100));
}
fieldset {
position: relative;
padding-top: var(--interligne);
}
figcaption {
text-align: center;
font-style: normal;
}
/* Suppression des marges du navigateur Brave */
figure {
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0;
margin-inline-end: 0;
}
h1 {font-size: var(--taille-h1);}
h2 {font-size: var(--taille-h2);}
h3 {font-size: var(--taille-h3);}
h4 {font-size: var(--taille-h4);}
h5 {font-size: var(--taille-h5);}
h6 {font-size: var(--taille-h6);}
h1,
h2,
h3,
h4,
h5,
h6 {
text-align: center;
line-height: var(--interligne);
margin: var(--interbloc) 0 var(--interbloc) 0;
font-family: 'Arial', sans-serif;
margin-block-start: 0;
margin-block-end: 0;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
article h3 {
font-size: var(--taille-p3);
font-weight: normal;
text-align: left;
}
hr {
border: none;
height: 1px;
background-color: rgba(var(--noir-rvb),var(--alpha-100));
}
input {
font-family: SimplyMono-Book;
display: inline-block;
padding: var(--rembourrage);
background-color: rgba(var(--gris-clair-rvb),var(--alpha-70));
color: rgba(var(--gris-moyen-rvb),var(--alpha-100));
border: none;
border-radius: var(--courbure);
font-variant: normal;
font-size: larger;
min-width: auto;
text-align: left;
line-height: var(--interligne);
white-space: nowrap;
padding-right: 3.5ch;
}
/* Maintenir la couleur bleu sombre pour le label lorsque son bouton radio associé est sélectionné */
input[type="radio"]:checked + label {
color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));
}
input.either {
background-image: linear-gradient(45deg, transparent, transparent 50%, rgba(var(--jaune-rvb), var(--alpha-100)) 50%, rgba(var(--jaune-rvb), var(--alpha-100)) 100%);
background-position: top right;
background-size: .8em .8em;
background-repeat: no-repeat;
}
input.either:focus:invalid {
background-color: rgba(var(--jaune-rvb), var(--alpha-30));
color: rgba(var(--jaune-rvb), var(--alpha-100));
}
input.either:focus:valid {
background-color: rgba(var(--bleu-clair-rvb), var(--alpha-30));
color: rgba(var(--bleu-sombre-rvb),var(--alpha-100));
}
input:focus:invalid,
textarea:focus:invalid,
.ligne-invalid {
background-color: rgba(var(--rouge-rvb), var(--alpha-30));
color: rgba(var(--rouge-rvb), var(--alpha-100));
}
input:focus:invalid,
textarea:focus:invalid {
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: right 0.5em top;
background-size: 2em 2em;
}
input:focus:valid,
textarea:focus:valid {
background-color: rgba(var(--bleu-clair-rvb), var(--alpha-30));
color: rgba(var(--bleu-sombre-rvb),var(--alpha-100));
background-image: url('data:image/svg+xml;utf-8,');
background-repeat: no-repeat;
background-position: right 0.5em top;
background-size: 2em 2em;
}
input:required,
textarea:required {
background-image: linear-gradient(45deg, transparent, transparent 50%, rgba(var(--orange-rvb), var(--alpha-100)) 50%, rgba(var(--orange-rvb), var(--alpha-100)) 100%);
background-position: top right;
background-size: .8em .8em;
background-repeat: no-repeat;
background-color: rgba(var(--gris-sombre-rvb), var(--alpha-30));
}
/* hover: style pour les éléments de menu lorsqu'ils sont survolé */
input:hover,
textarea:hover {
color: rgba(var(--gris-moyen-rvb),var(--alpha-100));
}
ins {
color: rgba(var(--vert-rvb),var(--alpha-100));
}
legend {
position: absolute;
top: 0;
left: 0;
width: 100%;
padding: 1rem var(--rembourrage);
box-sizing: border-box;
font-size: xx-large;
}
ol.cesure-brute {
overflow-wrap: anywhere;
}
ol.style-francais a:link {
text-decoration: none;
}
ol.style-francais li {
padding-left: 1em;
text-indent: calc(-1 * var(--approche));
margin-left: var(--approche);
}
ol.style-francais li::after {content: ".";}
/*
Numérotation en chiffre romain
extérieure à la Liste
sans retrait
avec une espace d’un intermot
*/
ol.style-romain {
list-style: upper-roman;
list-style-position: outside;
margin-left: 0;
padding-left: var(--rembourrage);
}
p {
font-size: var(--taille-p);
margin-bottom: var(--interbloc);
}
p.image-normale::before {
font-family: "Font Awesome 6 Solid";
content: "\f071";
color: rgba(var(--rouge-rvb), var(--alpha-100));
padding-right: 5px;
}
p.image-survol::before {
font-family: "Font Awesome 6 Solid";
content: "\f559";
color: rgba(var(--vert-rvb), var(--alpha-100));
padding-right: 5px;
}
p.corriger {
color: rgba(var(--rouge-rvb),var(--alpha-100));
text-transform: uppercase;
}
p.acheter {
color: rgba(var(--violet-rvb),var(--alpha-100));
text-transform: uppercase;
}
pre {
white-space: pre-wrap;
font-family: inherit;
font-size: 1.45vw;
letter-spacing: normal;
line-height: var(--interligne);
word-spacing: normal;
}
q {
quotes: "«\202F" "\202F»";
}
q::before {
content: open-quote;
}
q::after {
content: close-quote;
}
/* Réglage de l’indice selon les normes typographiques de Prolexis
une échelle verticale de 70%
une échelle horiznontale de 70 %
un décalage vertical de 20 %
*/
/* Mauvaise méthode : on produit un décalage à cause de bottom */
sub {
vertical-align: baseline;
font-size: 70%;
position: relative;
bottom: -0.2em;
}
/* Réglage de l’exposant selon les normes typographique de Prolexis
un décalage vertical de 30 %
une échelle verticale de 60%
une échelle horiznontale de 60 %
*/
sup {
vertical-align: 30%;
font-size: 60%;
line-height: var(--interligne);
transform: none;
}
table {
display: table;
table-layout: fixed;
width: 100%;
font-family: 'Hack Regular';
border-collapse: collapse;
font-size: 0.8rem;
letter-spacing: 1px;
}
tbody > tr:nth-of-type(even) {
background-color: rgba(var(--gris-argent-rvb),var(--alpha-100));
}
tbody,
tfoot,
thead {
display: table-row-group;
}
td,
th {
display: table-cell;
width: 10vw;
padding: 1em;
border: var(--lisere) solid rgb(var(--gris-moyen-rvb));
text-align: center;
word-break: normal;
overflow-wrap: break-word;
}
td:last-of-type {
text-align: center;
}
td tfoot {
font-weight: bold;
background-color: rgb(var(--gris-clair-rvb));
}
tfoot,
thead {
background-color:rgba(var(--gris-clair-rvb),var(--alpha-100));
}
tfoot th {
text-align: right;
background-color: rgb(var(--gris-clair-rvb));
}
thead th {
font-weight: bold;
background-color: rgb(var(--gris-sombre-rvb));
color: rgb(var(--jaune-rvb));
}
tr {
display: table-row;
}
table#definition {
width: 100%;
table-layout: fixed;
}
table#definition thead th:first-of-type,
table#definition tbody th {
width: auto;
}
table#definition thead th:last-of-type,
table#definition tbody td {
width: 70%;
}
table#definition th,
table#definition td {
text-align: left;
}
textarea {
max-width: 100%;
resize: none;
}
ul li {
list-style-type: none;
}
/* link : style pour les éléments de menu non visités */
/* visited : style pour les éléments de menu visités */
ul li a:link,
ul li a:visited {
color: rgba(var(--gris-clair-rvb));
text-decoration: none;
}
/* active: style pour les éléments de menu lorsqu'ils sont cliqués */
/* hover: style pour les éléments de menu lorsqu'ils sont survolé */
ul li a:hover,
ul li a:active {
color: rgba(var(--blanc-rvb));
text-decoration: none;
}
ul.cesure-brute {
overflow-wrap: anywhere;
}
ul.style-francais {
list-style-type: none;
padding-left: 0;
}
ul.style-francais a:link {
text-decoration: none;
}
ul.style-francais li {
padding-left: 2.5em;
text-indent: -1.5em;
}
ul.style-francais li::before {content: "–\2009";}
ul.style-francais li:last-child::after {content: ".";}
ul.style-francais li:not(:last-child)::after {content: "\00A0;";}
video {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: 0;
object-fit: cover;
}
#academie-francaise {
text-align: left;
}
#auteur .prestation-description {
margin-top: 0;
}
/* Texte Blanc cassé alpha 100 */
#commenter,
#connecter,
#connecter-envoyer,
#connecter-genere,
#connecter-recevoir,
#connecter-selection {
margin-top: var(--interbloc);
display: block;
}
/* Texte Blanc cassé alpha 100 Fond spécifique alpha 90 */
#commenter {color: rgba(var(--blanc-casse-rvb),var(--alpha-100)); background-color: rgba(var(--bleu-clair-rvb),var(--alpha-90));}
#connecter {color: rgba(var(--blanc-casse-rvb),var(--alpha-100)); background-color: rgba(var(--bleu-sombre-rvb),var(--alpha-90));}
/* Texte blanc hover alpha 100 Fond spécifique hover alpha 100 */
#commenter:hover {color: rgba(var(--blanc-rvb),var(--alpha-100)); background-color: rgba(var(--bleu-clair-rvb),var(--alpha-100));}
#connecter:hover {color: rgba(var(--blanc-rvb),var(--alpha-100)); background-color: rgba(var(--bleu-sombre-rvb),var(--alpha-100));}
/* Texte blanc active alpha 100 Fond spécifique active alpha 100 */
#commenter:active {color: rgba(var(--blanc-rvb),var(--alpha-100)); background-color: rgba(var(--bleu-clair-rvb),var(--alpha-100));}
#connecter:active {color: rgba(var(--blanc-rvb),var(--alpha-100)); background-color: rgba(var(--bleu-sombre-rvb),var(--alpha-100));}
/* Texte Blanc cassé alpha 100 */
#acheter .bouton,
#acheter-panier .bouton,
#auteur .bouton,
#corriger .bouton,
#composer .bouton,
#communiquer .bouton,
#illustrer .bouton,
#sublimer .bouton,
#transfert-panier .bouton {
color: rgba(var(--blanc-casse-rvb),var(--alpha-100));
}
/* Texte blanc hover alpha 100 */
#acheter .bouton:hover,
#acheter-panier .bouton:hover,
#auteur .bouton:hover,
#corriger .bouton:hover,
#composer .bouton:hover,
#communiquer .bouton:hover,
#illustrer .bouton:hover,
#sublimer .bouton:hover,
#transfert-panier .bouton:hover {
color: rgba(var(--blanc-rvb),var(--alpha-100));
}
/* Texte blanc active alpha 100 */
#acheter .bouton:active,
#acheter-panier .bouton:active,
#auteur .bouton:active,
#corriger .bouton:active,
#composer .bouton:active,
#communiquer .bouton:active,
#illustrer .bouton:active,
#sublimer .bouton:active,
#transfert-panier .bouton:active {
color: rgba(var(--blanc-rvb),var(--alpha-100));
}
/* Fond spécifique alpha 90 */
#acheter .bouton {background-color: rgba(var(--violet-rvb),var(--alpha-90));}
#acheter-panier .bouton {background-color: rgba(var(--violet-rvb),var(--alpha-90));}
#auteur .bouton {background-color: rgba(var(--rose-rvb),var(--alpha-90));}
#corriger .bouton {background-color: rgba(var(--rouge-rvb),var(--alpha-90));}
#composer .bouton {background-color: rgba(var(--jaune-rvb),var(--alpha-90));}
#communiquer .bouton {background-color: rgba(var(--bleu-vert-rvb),var(--alpha-90));}
#illustrer .bouton {background-color: rgba(var(--vert-rvb),var(--alpha-90));}
#sublimer .bouton {background-color: rgba(var(--orange-rvb),var(--alpha-90));}
#transfert-panier .bouton {background-color: rgba(var(--violet-rvb),var(--alpha-90));}
/* Fond spécifique hover alpha 100 */
#acheter .bouton:hover {background-color: rgba(var(--violet-rvb),var(--alpha-100));}
#acheter-panier .bouton:hover {background-color: rgba(var(--violet-rvb),var(--alpha-100));}
#auteur .bouton:hover {background-color: rgba(var(--rose-rvb),var(--alpha-100));}
#corriger .bouton:hover {background-color: rgba(var(--rouge-rvb),var(--alpha-100));}
#composer .bouton:hover {background-color: rgba(var(--jaune-rvb),var(--alpha-100));}
#communiquer .bouton:hover {background-color: rgba(var(--bleu-vert-rvb),var(--alpha-100));}
#illustrer .bouton:hover {background-color: rgba(var(--vert-rvb),var(--alpha-100));}
#sublimer .bouton:hover {background-color: rgba(var(--orange-rvb),var(--alpha-100))}
#transfert-panier .bouton:hover {background-color: rgba(var(--violet-rvb),var(--alpha-100));}
/* Fond spécifique active alpha 100 */
#acheter .bouton:active {background-color: rgba(var(--violet-rvb),var(--alpha-100));}
#acheter-panier .bouton:active {background-color: rgba(var(--violet-rvb),var(--alpha-100));}
#auteur .bouton:active {background-color: rgba(var(--rose-rvb),var(--alpha-100));}
#corriger .bouton:active {background-color: rgba(var(--rouge-rvb),var(--alpha-100));}
#composer .bouton:active {background-color: rgba(var(--jaune-rvb),var(--alpha-100));}
#communiquer .bouton:active {background-color: rgba(var(--bleu-vert-rvb),var(--alpha-100));}
#illustrer .bouton:active {background-color: rgba(var(--vert-rvb),var(--alpha-100));}
#sublimer .bouton:active {background-color: rgba(var(--orange-rvb),var(--alpha-100))}
#transfert-panier .bouton:active {background-color: rgba(var(--violet-rvb),var(--alpha-100));}
/* Logotype gris affiché lorsqu’il n’est pas survolé */
#entreprise-amazon .image-normale,
#entreprise-banque-populaire .image-normale,
#entreprise-books-on-demand .image-normale,
#entreprise-carre-des-arts .image-normale,
#entreprise-chapitre .image-normale,
#entreprise-dunod .image-normale,
#entreprise-fnac .image-normale,
#entreprise-formations-piscine .image-normale,
#entreprise-hachette-livre .image-normale,
#entreprise-ibooks .image-normale,
#entreprise-ordre-des-avocats-grenoble .image-normale,
#entreprise-the-books-edition .image-normale,
#entreprise-ibooks .image-normale,
#entreprise-ulule .image-normale,
#entreprise-universite-evry .image-normale,
#entreprise-universite-paris-dauphine .image-normale,
#entreprise-universite-paris-sorbonne .image-normale,
#entreprise-universite-technologie-troyes .image-normale,
#entreprise-vie-et-sante .image-normale,
/* Logotype coloré visible lorsqu’il est survolé */
#entreprise-amazon:hover .image-survol,
#entreprise-banque-populaire:hover .image-survol,
#entreprise-books-on-demand:hover .image-survol,
#entreprise-carre-des-arts:hover .image-survol,
#entreprise-chapitre:hover .image-survol,
#entreprise-dunod:hover .image-survol,
#entreprise-fnac:hover .image-survol,
#entreprise-formations-piscine:hover .image-survol,
#entreprise-hachette-livre:hover .image-survol,
#entreprise-ibooks:hover .image-survol,
#entreprise-ordre-des-avocats-grenoble:hover .image-survol,
#entreprise-the-books-edition:hover .image-survol,
#entreprise-ibooks:hover .image-survol,
#entreprise-ulule:hover .image-survol,
#entreprise-universite-evry:hover .image-survol,
#entreprise-universite-paris-dauphine:hover .image-survol,
#entreprise-universite-paris-sorbonne:hover .image-survol,
#entreprise-universite-technologie-troyes:hover .image-survol,
#entreprise-vie-et-sante:hover .image-survol {
display: block;
}
/* Logoytype coloré caché lorsqu’il n’est pas survolé */
#entreprise-amazon .image-survol,
#entreprise-banque-populaire .image-survol,
#entreprise-books-on-demand .image-survol,
#entreprise-carre-des-arts .image-survol,
#entreprise-chapitre .image-survol,
#entreprise-dunod .image-survol,
#entreprise-fnac .image-survol,
#entreprise-formations-piscine .image-survol,
#entreprise-hachette-livre .image-survol,
#entreprise-ibooks .image-survol,
#entreprise-ordre-des-avocats-grenoble .image-survol,
#entreprise-the-books-edition .image-survol,
#entreprise-ibooks .image-survol,
#entreprise-ulule .image-survol,
#entreprise-universite-evry .image-survol,
#entreprise-universite-paris-dauphine .image-survol,
#entreprise-universite-paris-sorbonne .image-survol,
#entreprise-universite-technologie-troyes .image-survol,
#entreprise-vie-et-sante .image-survol,
/* Logotype gris caché lorsqu’il est survolé */
#entreprise-amazon:hover .image-normale,
#entreprise-banque-populaire:hover .image-normale,
#entreprise-books-on-demand:hover .image-normale,
#entreprise-carre-des-arts:hover .image-normale,
#entreprise-chapitre:hover .image-normale,
#entreprise-dunod:hover .image-normale,
#entreprise-fnac:hover .image-normale,
#entreprise-formations-piscine:hover .image-normale,
#entreprise-hachette-livre:hover .image-normale,
#entreprise-ibooks:hover .image-normale,
#entreprise-ordre-des-avocats-grenoble:hover .image-normale,
#entreprise-the-books-edition:hover .image-normale,
#entreprise-ibooks:hover .image-normale,
#entreprise-ulule:hover .image-normale,
#entreprise-universite-evry:hover .image-normale,
#entreprise-universite-paris-dauphine:hover .image-normale,
#entreprise-universite-paris-sorbonne:hover .image-normale,
#entreprise-universite-technologie-troyes:hover .image-normale,
#entreprise-vie-et-sante:hover .image-normale {
display: none;
}
/* Expertise rouge visible */
/* Intégrité */
#expertise-corriger-integrite-fonte .image-normale,
#expertise-corriger-integrite-image .image-normale,
#expertise-corriger-integrite-langue .image-normale,
#expertise-corriger-integrite-tableau .image-normale,
#expertise-corriger-integrite-espacement .image-normale,
#expertise-corriger-integrite-style .image-normale,
#expertise-corriger-integrite-citation .image-normale,
#expertise-corriger-integrite-dialogue .image-normale,
/* Lecture */
#expertise-corriger-lecture-structuration .image-normale,
#expertise-corriger-lecture-arrangement .image-normale,
#expertise-corriger-lecture-narration .image-normale,
#expertise-corriger-lecture-description .image-normale,
#expertise-corriger-lecture-dialogue .image-normale,
#expertise-corriger-lecture-lectorat .image-normale,
#expertise-corriger-lecture-coherence .image-normale,
#expertise-corriger-lecture-orthographe .image-normale,
/* Regroupement */
#expertise-corriger-regroupement-cacographie .image-normale,
#expertise-corriger-regroupement-diacritique .image-normale,
#expertise-corriger-regroupement-discordance .image-normale,
#expertise-corriger-regroupement-homophonie .image-normale,
#expertise-corriger-regroupement-rectification .image-normale,
#expertise-corriger-regroupement-casse .image-normale,
#expertise-corriger-regroupement-jonction .image-normale,
#expertise-corriger-regroupement-omission .image-normale,
/* Expertise verte visible lorsqu’elle est survolée */
/* Intégrité */
#expertise-corriger-integrite-fonte:hover .image-survol,
#expertise-corriger-integrite-image:hover .image-survol,
#expertise-corriger-integrite-langue:hover .image-survol,
#expertise-corriger-integrite-tableau:hover .image-survol,
#expertise-corriger-integrite-espacement:hover .image-survol,
#expertise-corriger-integrite-style:hover .image-survol,
#expertise-corriger-integrite-citation:hover .image-survol,
#expertise-corriger-integrite-dialogue:hover .image-survol,
/* Lecture */
#expertise-corriger-lecture-structuration:hover .image-survol,
#expertise-corriger-lecture-arrangement:hover .image-survol,
#expertise-corriger-lecture-narration:hover .image-survol,
#expertise-corriger-lecture-description:hover .image-survol,
#expertise-corriger-lecture-dialogue:hover .image-survol,
#expertise-corriger-lecture-lectorat:hover .image-survol,
#expertise-corriger-lecture-coherence:hover .image-survol,
#expertise-corriger-lecture-orthographe:hover .image-survol,
/* Regroupement */
#expertise-corriger-regroupement-cacographie:hover .image-survol,
#expertise-corriger-regroupement-diacritique:hover .image-survol,
#expertise-corriger-regroupement-discordance:hover .image-survol,
#expertise-corriger-regroupement-homophonie:hover .image-survol,
#expertise-corriger-regroupement-rectification:hover .image-survol,
#expertise-corriger-regroupement-casse:hover .image-survol,
#expertise-corriger-regroupement-jonction:hover .image-survol,
#expertise-corriger-regroupement-omission:hover .image-survol {
display: block;
}
/* Expertise rouge cachée */
/* Intégrité */
#expertise-corriger-integrite-fonte .image-survol,
#expertise-corriger-integrite-image .image-survol,
#expertise-corriger-integrite-langue .image-survol,
#expertise-corriger-integrite-tableau .image-survol,
#expertise-corriger-integrite-espacement .image-survol,
#expertise-corriger-integrite-style .image-survol,
#expertise-corriger-integrite-citation .image-survol,
#expertise-corriger-integrite-dialogue .image-survol,
/* Lecture */
#expertise-corriger-lecture-structuration .image-survol,
#expertise-corriger-lecture-arrangement .image-survol,
#expertise-corriger-lecture-narration .image-survol,
#expertise-corriger-lecture-description .image-survol,
#expertise-corriger-lecture-dialogue .image-survol,
#expertise-corriger-lecture-lectorat .image-survol,
#expertise-corriger-lecture-coherence .image-survol,
#expertise-corriger-lecture-orthographe .image-survol,
/* Regroupement */
#expertise-corriger-regroupement-cacographie .image-survol,
#expertise-corriger-regroupement-diacritique .image-survol,
#expertise-corriger-regroupement-discordance .image-survol,
#expertise-corriger-regroupement-homophonie .image-survol,
#expertise-corriger-regroupement-rectification .image-survol,
#expertise-corriger-regroupement-casse .image-survol,
#expertise-corriger-regroupement-jonction .image-survol,
#expertise-corriger-regroupement-omission .image-survol,
/* Expertise rouge cachée lorsqu'elle est survolée */
/* Intégrité */
#expertise-corriger-integrite-fonte:hover .image-normale,
#expertise-corriger-integrite-image:hover .image-normale,
#expertise-corriger-integrite-langue:hover .image-normale,
#expertise-corriger-integrite-tableau:hover .image-normale,
#expertise-corriger-integrite-espacement:hover .image-normale,
#expertise-corriger-integrite-style:hover .image-normale,
#expertise-corriger-integrite-citation:hover .image-normale,
#expertise-corriger-integrite-dialogue:hover .image-normale,
/* Lecture */
#expertise-corriger-lecture-structuration:hover .image-normale,
#expertise-corriger-lecture-arrangement:hover .image-normale,
#expertise-corriger-lecture-narration:hover .image-normale,
#expertise-corriger-lecture-description:hover .image-normale,
#expertise-corriger-lecture-dialogue:hover .image-normale,
#expertise-corriger-lecture-lectorat:hover .image-normale,
#expertise-corriger-lecture-coherence:hover .image-normale,
#expertise-corriger-lecture-orthographe:hover .image-normale,
/* Regroupement */
#expertise-corriger-regroupement-cacographie:hover .image-normale,
#expertise-corriger-regroupement-diacritique:hover .image-normale,
#expertise-corriger-regroupement-discordance:hover .image-normale,
#expertise-corriger-regroupement-homophonie:hover .image-normale,
#expertise-corriger-regroupement-rectification:hover .image-normale,
#expertise-corriger-regroupement-casse:hover .image-normale,
#expertise-corriger-regroupement-jonction:hover .image-normale,
#expertise-corriger-regroupement-omission:hover .image-normale {
display: none;
}
#explication-pseudonyme,
#explication-site-nom {
display: none;
}
#minuteur {
position: absolute;
top: 0.45vw;
left: 1vw;
font-size: 3vw;
padding: var(--rembourrage);
border-radius: var(--courbure);
}
#modifier {
display: block;
margin-left: auto;
margin-right: auto;
background-color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));
color: rgba(var(--blanc-rvb), var(--alpha-100));
}
#module-menu-superposition {
display: none;
padding: var(--rembourrage);
justify-content: center;
width: 100%;
z-index: calc(var(--z-index-navbar) + 1);
background-color: rgba(var(--noir-rvb), var(--alpha-100));
}
#module-menu-superposition details {
color: rgba(var(--blanc-rvb),var(--alpha-100));
}
#module-menu-superposition :is(details):where(:focus-within) {
background-color: rgba(var(--gris-sombre-rvb), var(--alpha-100));
}
#module-menu-superposition h3 {
color: rgba(var(--jaune-rvb),var(--alpha-100));
}
#module-menu-superposition .superposition-menu {
display: grid;
}
#navigation-expertiser ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--blanc-rvb), var(--alpha-100));}
#navigation-corriger ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--rouge-rvb), var(--alpha-100));}
#navigation-sublimer ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--orange-rvb), var(--alpha-100));}
#navigation-composer ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--jaune-rvb), var(--alpha-100));}
#navigation-illustrer ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--vert-rvb), var(--alpha-100));}
#navigation-communiquer ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--bleu-vert-rvb), var(--alpha-100));}
#navigation-apprendre ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--bleu-clair-rvb), var(--alpha-100));}
#navigation-connecter ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--bleu-sombre-rvb), var(--alpha-100));}
#navigation-acheter ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--violet-rvb), var(--alpha-100));}
#navigation-cabinet ul li .menu-item:hover {border-bottom: var(--lisere) solid rgba(var(--pourpre-rvb), var(--alpha-100));}
#navigation-expertiser ul li .menu-item-acheter:hover,
#navigation-corriger ul li .menu-item-acheter:hover,
#navigation-sublimer ul li .menu-item-acheter:hover,
#navigation-composer ul li .menu-item-acheter:hover,
#navigation-illustrer ul li .menu-item-acheter:hover,
#navigation-communiquer ul li .menu-item-acheter:hover,
#navigation-apprendre ul li .menu-item-acheter:hover,
#navigation-connecter ul li .menu-item-acheter:hover,
#navigation-acheter ul li .menu-item-acheter:hover,
#navigation-cabinet ul li .menu-item-acheter:hover {
border-bottom: var(--lisere) solid rgba(var(--violet-rvb), var(--alpha-100));
background-color: rgba(var(--violet-rvb), var(--alpha-100));
color: rgba(var(--blanc-rvb), var(--alpha-100));
}
/* Le curseur est de type pointeur */
#partage-lien {
cursor: pointer;
}
#toile {
display: none;
}
.aligne-centre {text-align: center;}
.aligne-droite {text-align: right;}
.aligne-gauche {text-align: left;}
.aligne-haut {align-self: flex-start;}
.aligne-milieu {display: flex;align-items: center;}
.aligne-milieu img,
.aligne-milieu strong {
margin-right:var(--intermot);
}
.apercu-fichiers {
margin-right: var(--gouttiere);
}
.bouton {
display: inline-block;
padding: var(--rembourrage);
background-color: rgba(var(--gris-clair-rvb),var(--alpha-70));
color: rgba(var(--gris-moyen-rvb),var(--alpha-100));
border-radius: var(--courbure);
font-variant: small-caps;
font-size: larger;
min-width: 7rem;
text-align: center;
line-height: 1rem;
white-space: nowrap;
}
/* active: style pour les éléments de menu lorsqu'ils sont cliqués */
/* hover: style pour les éléments de menu lorsqu'ils sont survolé */
.bouton:hover,
.bouton:active {
text-decoration: none;
color: rgba(var(--noir-rvb),var(--alpha-100));
}
.bouton.bouton-acheter:hover {
background-color: rgba(var(--violet-rvb),var(--alpha-100));
color: rgba(var(--blanc-rvb),var(--alpha-100));
}
.bouton-acheter {
background-color: rgba(var(--violet-rvb),var(--alpha-90));
color: rgba(var(--gris-clair-rvb),var(--alpha-100));
}
.bouton-afficher {
flex-grow: 0; /* Empêche le bouton de grandir et le garde à droite */
}
.colonne-absence {
grid-area: entete;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
}
.bouton-connecter {
display: inline-block;
padding: var(--rembourrage);
background-color: rgba(var(--gris-clair-rvb),var(--alpha-70));
color: rgba(var(--gris-moyen-rvb),var(--alpha-100));
border-radius: var(--courbure);
font-variant: small-caps;
font-size: larger;
min-width: 7rem;
text-align: center;
line-height: 1rem;
white-space: nowrap;
}
/* Augmentation de la spécificité pour le survol des labels non sélectionnés */
.bouton-connecter input[type="radio"] + label:hover {
color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));
}
/* Colonne double dans une ligne
padding permet d’aérer les modules
width calcule la largeur de la colonne en fonction de l'espace disponible dans la ligne et du nombre de colonnes */
.colonne-bicephale {
padding: var(--rembourrage) 0;
margin-top: var(--interbloc);
margin-bottom: var(--interbloc);
}
.colonne-bicephale h1 {
text-align: left;
}
.colonne-centrage {
display: flex;
justify-content: center;
align-items: center;
}
.colonne-principale {
display: block;
justify-content: space-between;
}
.colonne-principale.vignettes {
display: grid;
grid-template-columns: repeat(var(--vignette-nombre), 1fr);
gap: var(--gouttiere);
}
.colonne-principale.vignettes article.vignette {
position: relative; /* Imposer l’article en position relative */
}
.colonne-principale.vignettes article.vignette img {
width: 100%;
height: auto;
}
.contenu-interbloc {
margin: var(--interbloc) 0;
}
.contenu-rembourrage {
padding: var(--rembourrage);
}
/* Couleur particulière 100 */
.couleur-blanc {color: rgba(var(--blanc-rvb), var(--alpha-100));}
.couleur-gris-clair {color: rgba(var(--gris-clair-rvb), var(--alpha-100));}
.couleur-gris-clair-70 {background-color: rgba(var(--gris-clair-rvb),var(--alpha-70));color: rgba(var(--gris-moyen-rvb),var(--alpha-100));}
.couleur-gris-moyen {color: rgba(var(--gris-moyen-rvb), var(--alpha-100));}
.couleur-gris-sombre {color: rgba(var(--gris-sombre-rvb), var(--alpha-100));}
.couleur-noir {color: rgba(var(--noir-rvb), var(--alpha-100));}
.couleur-rouge {color: rgba(var(--rouge-rvb), var(--alpha-100));}
.couleur-orange {color: rgba(var(--orange-rvb), var(--alpha-100));}
.couleur-jaune {color: rgba(var(--jaune-rvb), var(--alpha-100));}
.couleur-jaune-moutarde {color: rgba(var(--jaune-moutarde-rvb), var(--alpha-100));}
.couleur-jaune-serin {color: rgba(var(--jaune-serin-rvb), var(--alpha-100));}
.couleur-vert {color: rgba(var(--vert-rvb), var(--alpha-100));}
.couleur-vert-academie {color: rgba(var(--vert-academie-rvb), var(--alpha-100));}
.couleur-bleu-vert {color: rgba(var(--bleu-vert-rvb), var(--alpha-100));}
.couleur-bleu-clair {color: rgba(var(--bleu-clair-rvb), var(--alpha-100));}
.couleur-bleu-sombre {color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));}
.couleur-pourpre {color: rgba(var(--pourpre-rvb), var(--alpha-100));}
.couleur-violet {color: rgba(var(--violet-rvb), var(--alpha-100));}
.couleur-violet-70 {color: rgba(var(--violet-rvb), var(--alpha-70));}
.couleur-rose {color: rgba(var(--rose-rvb), var(--alpha-100));}
.contenu-modal {
margin: auto;
padding: var(--rembourrage);
text-align: left;
}
.contenu-modal img,
.contenu-modal button {
width: 33%;
height: auto;
max-height: 33vh;
display: block;
margin: 0 auto;
}
.credit-titre, .fermer {
display: inline-block;
vertical-align: middle;
}
.degrade-pourpre-a-jaune {background-image: linear-gradient(70deg, rgba(var(--pourpre-rvb), var(--alpha-100)) 0%, rgba(var(--rouge-rvb),var(--alpha-100)) 14%, rgba(var(--orange-rvb),var(--alpha-100)) 28%, rgba(var(--jaune-rvb),var(--alpha-100)) 100%);}
.degrade-violet-a-vert {background-image: linear-gradient(70deg, rgba(var(--violet-rvb), var(--alpha-100)) 0%, rgba(var(--bleu-clair-rvb), var(--alpha-100)) 14%, rgba(var(--bleu-vert-rvb), var(--alpha-100)) 28%, rgba(var(--vert-rvb), var(--alpha-100)));}
.degrade-rouge-orange {background-image: linear-gradient(70deg, rgba(var(--rouge-rvb), var(--alpha-100)) 0%, rgba(var(--rouge-rvb), var(--alpha-100)));}
.degrade-pourpre-a-jaune,
.degrade-violet-a-vert,
.degrade-rouge-orange {
background-clip: text;
-webkit-background-clip: text;
color: transparent;
margin: 0.7rem 0;
max-width: max-content;
}
.details-open {
background-color: rgba(var(--gris-sombre-rvb), var(--alpha-100));
}
.entreprise-colonne {
text-align: center;
gap: 2rem;
display: flex;
width: auto;
}
.entreprise-conteneur,
.prestation-conteneur {
display: flex;
flex-direction: column;
align-items: center;
}
.entreprise-ligne {
width: 28%;
}
.etape-ancien,
.etape-nouveau,
.etape-prenom-nom,
.etape-courriel,
.etape-code,
.etape-passe,
.etape-passe-nouveau,
.etape-oubli,
.etape-connecter {
display: none;
}
/* Remplacement du dans un */
.etymologie {
display: block;
background-color: rgba(var(--gris-clair-rvb), var(--alpha-50));
border-radius: var(--courbure);
padding: var(--rembourrage);
margin-block-start: var(--interligne);
margin-block-end: var(--interligne);
margin-inline-start: var(--retrait);
margin-inline-end: var(--intermot);
}
/* Citation sur une nouvelle ligne, espacée du flux, en italique */
.etymologie cite {
display: block;
margin-top: var(--interbloc);
font-style: italic;
}
/* Suppression de la marge par défaut du paragraphe */
.etymologie p {
margin: 0;
}
.etiquette {
margin: var(--interbloc) 0;
padding: var(--rembourrage);
}
.etiquette-conteneur {
display: grid;
grid-template-columns: minmax(auto, 7rem) 1fr;
grid-template-rows: auto;
gap: var(--gouttiere);
}
.etiquette-definition {
padding: var(--rembourrage);
}
.fa-brands {
font-family: 'Font Awesome 6 Brands';
font-size: 1.5em; /* taille par défaut */
}
.fa-regular {
font-family: 'Font Awesome 6 Regular';
font-size: 1.5em; /* taille par défaut */
}
.fa-solid {
font-family: 'Font Awesome 6 Solid';
font-size: 1.5em; /* taille par défaut */
}
.facture-document a {
color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));
}
.facture-date,
.facture-numero,
.facture-expertise,
.facture-quantite,
.facture-status,
.facture-document {
display: flex;
justify-content: space-between;
}
.facture-historique {
max-width: 700px;
margin: auto;
border-bottom: var(--lisere) solid rgba(var(--gris-clair-rvb),var(--alpha-100));
padding-bottom: var(--rembourrage);
margin-bottom: var(--interligne);
}
.fermer {
float: right;
font-size: 1.5rem;
font-weight: 400;
}
.fermer:focus,
.fermer:hover {
color: rgba(var(--rouge-rvb),var(--alpha-100));
background-color: rgba(var(--gris-clair-rvb),var(--alpha-100));
text-decoration: none;
cursor: pointer;
}
.focus-apprendre {background-color: rgba(var(--bleu-clair-rvb), var(--alpha-50));}
/* Fond particulier 30 */
.fond-gris-clair-30 {background-color: rgba(var(--gris-clair-rvb), var(--alpha-30));}
.fond-gris-moyen-30 {background-color: rgba(var(--gris-moyen-rvb), var(--alpha-30));}
/* Fond particulier 70 */
.fond-transparent-70 {background-color: rgba(var(--transparent-rvb), var(--alpha-70));}
.fond-gris-argent-70 {background-color: rgba(var(--gris-argent-rvb), var(--alpha-100));}
.fond-gris-clair-70 {background-color: rgba(var(--gris-clair-rvb), var(--alpha-70));}
.fond-gris-moyen-70 {background-color: rgba(var(--gris-moyen-rvb), var(--alpha-70));}
.fond-gris-sombre-70 {background-color: rgba(var(--gris-sombre-rvb), var(--alpha-70));}
.fond-noir-70 {background-color: rgba(var(--noir-rvb), var(--alpha-70));}
.fond-rouge-70 {background-color: rgba(var(--rouge-rvb), var(--alpha-70));}
.fond-orange-70 {background-color: rgba(var(--orange-rvb), var(--alpha-70));}
.fond-jaune-70 {background-color: rgba(var(--jaune-rvb), var(--alpha-70));}
.fond-jaune-moutarde-70 {background-color: rgba(var(--jaune-moutarde-rvb), var(--alpha-70));}
.fond-vert-70 {background-color: rgba(var(--vert-rvb), var(--alpha-70));}
.fond-bleu-vert-70 {background-color: rgba(var(--bleu-vert-rvb), var(--alpha-70));}
.fond-vert-academie-70 {background-color: rgba(var(--vert-academie-rvb), var(--alpha-70));}
.fond-bleu-clair-70 {background-color: rgba(var(--bleu-clair-rvb), var(--alpha-70));}
.fond-bleu-sombre-70 {background-color: rgba(var(--bleu-sombre-rvb), var(--alpha-70));}
.fond-pourpre-70 {background-color: rgba(var(--pourpre-rvb), var(--alpha-70));}
.fond-violet-70 {background-color: rgba(var(--violet-rvb), var(--alpha-70));}
.fond-rose-70 {background-color: rgba(var(--rose-rvb), var(--alpha-70));}
/* Fond particulier 100 */
.fond-blanc {background-color: rgba(var(--blanc-rvb), var(--alpha-100));}
.fond-blanc-casse {background-color: rgba(var(--blanc-casse-rvb), var(--alpha-100));}
.fond-gris-argent {background-color: rgba(var(--gris-argent-rvb), var(--alpha-100));}
.fond-gris-clair {background-color: rgba(var(--gris-clair-rvb), var(--alpha-100));}
.fond-gris-moyen {background-color: rgba(var(--gris-moyen-rvb), var(--alpha-100));}
.fond-gris-sombre {background-color: rgba(var(--gris-sombre-rvb), var(--alpha-100));}
.fond-noir {background-color: rgba(var(--noir-rvb), var(--alpha-100));}
.fond-rouge {background-color: rgba(var(--rouge-rvb), var(--alpha-100));}
.fond-orange {background-color: rgba(var(--orange-rvb), var(--alpha-100));}
.fond-jaune {background-color: rgba(var(--jaune-rvb), var(--alpha-100));}
.fond-jaune-moutarde {background-color: rgba(var(--jaune-rvb), var(--alpha-100));}
.fond-vert {background-color: rgba(var(--vert-rvb), var(--alpha-100));}
.fond-bleu-vert {background-color: rgba(var(--bleu-vert-rvb), var(--alpha-100));}
.fond-vert-academie {background-color: rgba(var(--vert-academie-rvb), var(--alpha-100));}
.fond-bleu-clair {background-color: rgba(var(--bleu-clair-rvb), var(--alpha-100));}
.fond-bleu-sombre {background-color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));}
.fond-pourpre {background-color: rgba(var(--pourpre-rvb), var(--alpha-100));}
.fond-violet {background-color: rgba(var(--violet-rvb), var(--alpha-100));}
.fond-rose {background-color: rgba(var(--rose-rvb), var(--alpha-100));}
.fonte-normal {font-variant: normal;}
.fonte-petite {font-size: medium;}
.fonte-petite-majuscule {font-variant-caps: small-caps;}
.fonte-majuscule {text-transform: uppercase;}
/* Icones des prestations en fond de liste de la facturation */
.fond-corriger {background-image: url('../svg/icone-corriger.svg');}
.fond-sublimer {background-image: url('../svg/icone-sublimer.svg');}
.fond-composer {background-image: url('../svg/icone-composer.svg');}
.fond-illustrer {background-image: url('../svg/icone-illustrer.svg');}
.fond-communiquer {background-image: url('../svg/icone-communiquer.svg');}
.fond-corriger,
.fond-sublimer,
.fond-composer,
.fond-illustrer,
.fond-communiquer {
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
.grisage {
filter: grayscale(91%);
}
.hr-diviseur {
background-color: transparent;
border: none;
height: 84px;
position: relative;
overflow: hidden;
background-repeat: no-repeat;
background-size: 350px 84px;
background-position: center;
}
.hr-noir {background-image: url('/svg/diviseur-noir.svg');}
/* Base du liseré coloré */
.hr-rouge,
.hr-orange,
.hr-jaune,
.hr-vert,
.hr-bleu-vert,
.hr-bleu-clair,
.hr-bleu-sombre,
.hr-violet,
.hr-pourpre,
.hr-rose {
border-top: var(-lisere) solid;
height: 0;
margin: var(--interligne) 0;
}
/* Couleur du liseré */
.hr-rouge {border-color: rgba(var(--rouge-rvb), var(--alpha-100));}
.hr-orange {border-color: rgba(var(--orange-rvb), var(--alpha-100));}
.hr-jaune {border-color: rgba(var(--jaune-rvb), var(--alpha-100));}
.hr-vert {border-color: rgba(var(--vert-rvb), var(--alpha-100));}
.hr-bleu-vert {border-color: rgba(var(--bleu-vert-rvb), var(--alpha-100));}
.hr-bleu-clair {border-color: rgba(var(--bleu-clair-rvb), var(--alpha-100));}
.hr-bleu-sombre {border-color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));}
.hr-bleu-clair {border-color: rgba(var(--bleu-clair-rvb), var(--alpha-100));}
.hr-violet {border-color: rgba(var(--violet-rvb), var(--alpha-100));}
.hr-pourpre {border-color: rgba(var(--pourpre-rvb), var(--alpha-100));}
.hr-rose {border-color: rgba(var(--rose-rvb), var(--alpha-100));}
.input-conteneur {
display: flex;
flex-direction: column;
flex: 1;
}
.input-conteneur label,
.input-conteneur label span {
margin-bottom: 0rem;
font-size:0.7rem;
width: max-content;
}
.input-conteneur:first-child {margin-left: 0;} /* Ajustage de la première marge */
.input-conteneur:not(:last-child) {margin-right: var(--gouttiere);} /* Ajustage l'espacement entre les conteneurs */
.input-conteneur:last-child {margin-right: 0;} /* Ajustage de la dernière marge */
.input-conteneur.connexion-envoyer,
.input-conteneur.connexion-envoyer.connexion-coder {
display: none;
}
.input-conteneur.connexion-envoyer.visible,
.input-conteneur.connexion-envoyer.connexion-coder.visible {
display: flex;
}
/* Conversion du nombre xx de caractères d'un input en pourcentage : (xx+2)/38 */
/* La liste compte pour 2 ch déjà ajoutés, le rembourrage pour 2 ch ajoutés ici */
.input-conteneur.pourcentagelargeurtexte04 {width: 6ch;} /* 04 Bâtiment*/
.input-conteneur.pourcentagelargeurtexte05 {width: 7ch;} /* 05 Entrée */
.input-conteneur.pourcentagelargeurtexte06 {width: 8.5ch;} /* 06 Civilité | Numéro */
.input-conteneur.pourcentagelargeurtexte07 {width: 9ch;} /* 07 Statut | Voie | Suffixe | Type de voie */
.input-conteneur.pourcentagelargeurtexte08 {width: 10ch;} /* 08 Code Postal | Cedex */
.input-conteneur.pourcentagelargeurtexte09 {width: 11ch;} /* 09 Porte */
.input-conteneur.pourcentagelargeurtexte11 {width: 13ch;} /* 11 Suffixe */
.input-conteneur.pourcentagelargeurtexte15 {width: 17.6ch;} /* 15 Prénom | Nom de la voie | Téléphone fixe | Radiotéléphone */
.input-conteneur.pourcentagelargeurtexte18 {width: 19.3ch;} /* 18 Nom */
.input-conteneur.pourcentagelargeurtexte28 {width: 30ch;} /* 28 Lieudit | Ville */
.input-conteneur.pourcentagelargeurtexte30 {width: 32ch;} /* 30 Nom de l’immeuble */
.input-conteneur.pourcentagelargeurtexte33 {width: 35ch;} /* 33 Chez */
.input-conteneur.pourcentagelargeurtexte36 {width: 38ch;} /* 36 Entreprise */
.input-conteneur.pourcentagelargeurtexte46 {width: 48ch;} /* 48 Service entreprise | Pays | Courriel */
.input-ligne {
display: flex;
justify-content: space-between;
align-items: center;
margin-left: auto;
margin-right: auto;
/*
width: 100%; /* Utilisez une largeur relative pour plus de flexibilité */
max-width: 47.5ch; /* 38 ch + 8 rembourrage + 1,5 interbloc */
}
/* Ajustage de la dernière marge */
.input-ligne input:not(:last-of-type) {
margin-right: var(--gouttiere);
}
.input-radio {text-align: left;}
/* Icône qui remplace le rond de couleur */
.icone-svg {
position: relative;
}
.icone-svg svg {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.image {
position: relative;
display: inline-block;
}
.image-adaptative {
width: 100%;
height: auto;
display: block;
}
.image-animation {
animation: focalisation 35s infinite; /* Animation de 5 secondes qui se répète à l'infini */
}
.image-legende {
position: absolute;
bottom: 0;
left: 0;
color: rgba(var(--blanc-rvb), var(--alpha-100));
padding: var(--rembourrage);
text-align: center;
width: -webkit-fill-available; /* Chrome, Safari, et autres navigateurs WebKit */
width: -moz-available; /* Firefox */
width: -ms-fill-available; /* Internet Explorer, Edge (anciennes versions) */
width: fill-available; /* CSS standard, pour les navigateurs futurs */
font-size: 1.5em;
display: flex;
justify-content: center;
align-items: center; /* Pour centrer verticalement les éléments s'ils ont des hauteurs différentes */
}
.image-photo {
max-width: 1200px;
height: auto;
}
.image-qr {
max-width: 400px;
width: 33%;
height: auto;
max-height: 33vh;
display: block;
margin: 0 auto;
}
.label {
margin-top: calc( var(--interbloc) * 2);
}
.legende-info {
position: absolute;
right: var(--interbloc);
display: inline-flex;
align-items: center;
justify-content: center;
border: var(--lisere) solid currentColor;
border-radius: var(--courbure);
width: 1em;
height: 1em;
font-size: 0.8em;
}
p .legende-info {
position: initial;
right: 0;
}
.legende-texte {
text-align: center;
margin-right: var(--interligne);
}
.ligne {
grid-column: 1 / -1; /* S'étend sur toutes les colonnes */
display: grid;
grid-template-columns: 1fr var(--menu-largeur) 1fr;
gap: var(--gouttiere);
padding: var(--rembourrage);
box-sizing: border-box;
align-items: flex-start;
}
.ligne img.image-adaptative {
width: var(--menu-largeur);
}
.ligne-bicephale {
grid-column: 1 / -1; /* S'étend sur toutes les colonnes */
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--gouttiere);
padding: var(--rembourrage) 0;
text-align: center;
}
.ligne-bicephale img.image-adaptative {
width: calc(50vw - var(--gouttiere) / 2);
}
.ligne-totale {
grid-column: 1 / -1; /* S'étend sur les trois colonnes */
display: grid;
grid-template-columns: 100%;
gap: var(--gouttiere);
padding: var(--rembourrage);
}
.lire-la-suite {
visibility: hidden;
opacity: 0;
transition: opacity 0.3s;
}
/* Couleur particulière 100 */
/* Peut-être à supprimer ? */
.lire-la-suite-blanc::after {color: rgba(var(--blanc-rvb), var(--alpha-100));}
.lire-la-suite-gris-clair::after {color: rgba(var(--gris-clair-rvb), var(--alpha-100));}
.lire-la-suite-gris-clair-70::after {background-color: rgba(var(--gris-clair-rvb),var(--alpha-70));color: rgba(var(--gris-moyen-rvb),var(--alpha-100));}
.lire-la-suite-gris-moyen::after {color: rgba(var(--gris-moyen-rvb), var(--alpha-100));}
.lire-la-suite-gris-sombre::after {color: rgba(var(--gris-sombre-rvb), var(--alpha-100));}
.lire-la-suite-noir::after {color: rgba(var(--noir-rvb), var(--alpha-100));}
.lire-la-suite-rouge::after {color: rgba(var(--rouge-rvb), var(--alpha-100));}
.lire-la-suite-orange::after {color: rgba(var(--orange-rvb), var(--alpha-100));}
.lire-la-suite-jaune::after {color: rgba(var(--jaune-rvb), var(--alpha-100));}
.lire-la-suite-jaune-moutarde::after {color: rgba(var(--jaune-moutarde-rvb), var(--alpha-100));}
.lire-la-suite-vert::after {color: rgba(var(--vert-rvb), var(--alpha-100));}
.lire-la-suite-vert-academie::after {color: rgba(var(--vert-academie-rvb), var(--alpha-100));}
.lire-la-suite-bleu-vert::after {color: rgba(var(--bleu-vert-rvb), var(--alpha-100));}
.lire-la-suite-bleu-clair::after {color: rgba(var(--bleu-clair-rvb), var(--alpha-100));}
.lire-la-suite-bleu-sombre::after {color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));}
.lire-la-suite-pourpre::after {color: rgba(var(--pourpre-rvb), var(--alpha-100));}
.lire-la-suite-violet::after {color: rgba(var(--violet-rvb), var(--alpha-100));}
.lire-la-suite-rose::after {color: rgba(var(--rose-rvb), var(--alpha-100));}
.longueur-30-lignes .vignette {max-height: calc(var(--interligne) * 30);}
.longueur-40-lignes .vignette {max-height: calc(var(--interligne) * 40);}
.longueur-30-lignes .vignette,
.longueur-40-lignes .vignette {
overflow: hidden;
transition: max-height 0.2s ease;
text-align: left;
}
.longueur-30-lignes .vignette::after,
.longueur-40-lignes .vignette::after {
content: "Lire la suite…";
display: block;
width: 100%;
height: calc(var(--interligne) + var(--rembourrage));
background-color: rgba(var(--gris-sombre-rvb), var(--alpha-100));
color: rgba(var(--blanc-rvb), var(--alpha-100));
position: absolute;
bottom: 0;
left: 0;
text-align: left;
padding: var(--rembourrage) 0 0 var(--rembourrage);
}
.longueur-30-lignes .vignette:focus-within,
.longueur-40-lignes .vignette:focus-within {
max-height: 100%;
pointer-events:none;
}
.longueur-30-lignes .vignette:focus-within *,
.longueur-40-lignes .vignette:focus-within *{
pointer-events:auto;
}
.longueur-30-lignes .vignette:focus-within::after,
.longueur-40-lignes .vignette:focus-within::after {
display: none;
}
.marge-haut {
margin: 2rem 0 1rem;
}
.marge-haute-3rem {
margin-top: 3rem;
}
.menu-item {
color: rgba(var(--blanc-rvb), var(--alpha-100)); /* Blanc cassé */
text-decoration: none;
padding: 0.07em 0; /* Éviter la différence verticale avec les autres éléments de menu */
border-bottom: var(--lisere) solid transparent; /* Éviter le sursaut au survol des éléments des services de prestation */
}
.menu-item-120 {
display: block;
}
/* Barre de menu primaire */
.menu-item.actif {color: rgba(var(--blanc-rvb), var(--alpha-100));}
.menu-item.actif-rouge {color: rgba(var(--rouge-rvb), var(--alpha-100));}
.menu-item.actif-orange {color: rgba(var(--orange-rvb), var(--alpha-100));}
.menu-item.actif-jaune {color: rgba(var(--jaune-rvb), var(--alpha-100));}
.menu-item.actif-vert {color: rgba(var(--vert-rvb), var(--alpha-100));}
.menu-item.actif-vert-academie {color: rgba(var(--vert-academie-rvb), var(--alpha-100));}
.menu-item.actif-bleu-vert {color: rgba(var(--bleu-vert-rvb), var(--alpha-100));}
.menu-item.actif-bleu-clair {color: rgba(var(--bleu-clair-rvb), var(--alpha-100));}
.menu-item.actif-bleu-sombre {color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));}
.menu-item.actif-violet {color: rgba(var(--violet-rvb), var(--alpha-100));}
.menu-item.actif-pourpre {color: rgba(var(--pourpre-rvb), var(--alpha-100));}
.menu-item.actif-blanc {
border-bottom: var(--lisere) solid rgba(var(--blanc-rvb), var(--alpha-100));
color: rgba(var(--blanc-rvb), var(--alpha-100));
}
.menu-item-acheter {
background-color: rgba(var(--violet-rvb),var(--alpha-90));
padding: 0.07em 1.40em;
border-radius: var(--courbure);
}
.menu-item-service {
font-size: 1.4em;
}
.menu-prestations {
display: flex;
flex-grow: 1;
justify-content: space-between;
}
.menu-prestations a:first-child {
margin-left: 1rem;
}
.menu-prestations a:last-child {
margin-right: 1rem;
}
.menu-primaire {
width: var(--menu-largeur);
}
.menu-secondaire {
width: var(--menu-largeur);
}
.menu-primaire,
.menu-secondaire {
display: flex;
justify-content: space-between;
align-items: center;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-secondaire .services-prestation-nav ul {
justify-content: space-between;
width: 50%;
list-style-type: none;
margin: 0;
padding: 0;
}
.modal {
display: none;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.mot-de-passe-conteneur-general {
display: inline-block; /* Ajuste la largeur du conteneur à celle de l'input */
width: auto;
}
.mot-de-passe-conteneur-enfant {
display: flex;
justify-content: space-between; /* Alignement de l'étiquette à gauche et du bouton à droite */
width: 100%;
}
.mot-de-passe-etiquette {
flex-grow: 1; /* Permet à l'étiquette de prendre tout l'espace disponible à gauche */
}
.mot-de-passe-saisie {
width: 100%; /* Assure que l'input occupe toute la largeur du conteneur général */
box-sizing: border-box; /* Inclut padding et border dans la largeur totale */
}
/* Couleurs et tailles de police */
.navigation-primaire {
background-color: rgba(var(--gris-sombre-rvb), var(--alpha-100)); /* Pantone 433C */
font-size: calc(1.14*var(--menu-secondaire-taille));
border-bottom: var(--lisere) solid transparent;
display: flex; /* Afficher la navigation primaire par défaut */
}
/* Alignement et largeur */
.navigation-primaire,
.navigation-secondaire {
justify-content: center;
width: 100%;
}
/* Styles spécifiques aux éléments imbriqués dans la navigation primaire et dans la navigation secondaire */
.navigation-primaire ul,
.navigation-primaire ul li,
.navigation-secondaire ul,
.navigation-secondaire ul li {
display: flex;
align-items: center;
height: var(--navigation-hauteur);
text-transform: uppercase;
gap: var(--intermenu);
}
.navigation-secondaire {
background-color: rgba(var(--noir-rvb), var(--alpha-100)); /* Pantone Black 6C */
font-size: var(--menu-secondaire-taille);
display: none; /* Masquer les éléments de la navigation secondaire par défaut */
}
/* Chiffre en blanc sur pastille noire */
.nb {
background-color: rgba(var(--noir-rvb),var(--alpha-100));
border-radius: 50%;
color: rgba(var(--blanc-rvb),var(--alpha-100));
display: inline-block;
margin: 0 var(--intermot);
text-align: center;
width: 1em;
height: 1em;
line-height: 1;
}
.onglets {
width: 50%;
margin: 0 auto;
}
.onglet-contenu {
display: none;
padding: 20px;
border: var(--lisere) solid #ccc;
border-top: none;
}
.onglet-lien {
background-color: #f1f1f1;
float: left;
border: var(--lisere) solid #ccc;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: background-color 0.3s;
}
.onglet-lien:hover {
background-color: #ddd;
}
.onglet-lien.active {
background-color: #ccc;
}
.partage-droite {
display: flex;
justify-content: flex-end;
align-items: center;
flex-grow: 1; /* Permet à partage-droite de prendre l’espace restant */
}
.partage-droite a span,
.partage-droite .fa-regular {
border: none;
color: rgba(var(--blanc-rvb), var(--alpha-100));
margin: var(--intermot);
padding: 0;
font-size: var(--taille-p);
}
.partage-ligne {
display: flex;
align-items: center;
}
.partage-pdf-form {
display: inline;
}
.partage-pdf-form button {
background-color:transparent;
}
.personnel:hover {
color: rgba(var(--bleu-sombre-rvb),var(--alpha-100));
}
.pied {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--gouttiere);
}
.pied-legal a, .pied-menu ul li {
font-size: smaller;
color: rgba(var(--gris-clair-rvb),var(--alpha-100));
margin: 0;
line-height: var(--interligne);
}
.pied-menu {
box-sizing: border-box;
}
.pied-menu li h3 {
font-size: medium;
text-align: left;
font-weight: normal;
}
.prestation-auteur {
display: flex;
align-items: center;
}
.prestation-auteur img {
width: 5rem;
margin-right: 1rem;
border-radius: 14% 49% 14% 42%;
display:none;
}
.prestation-description {
margin-top: var(--interbloc);
}
.prestation-ouvrage {
display:none;
}
.prestation-colonne {
width: 100%;
padding: var(--rembourrage);
}
.prestation-colonne:hover .lire-la-suite {
visibility: visible;
opacity: 1;
transition: opacity 0.3s;
}
.prestation-colonne:hover .prestation-auteur img,
.prestation-colonne:hover .prestation-ouvrage {
display:block;
}
.prestation-colonne-duale {
width: calc(100% / 2);
}
.entreprise-ligne,
.prestation-ligne {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
margin-bottom: var(--gouttiere);
gap: var(--gouttiere);
}
.prestation-ligne {
width: 100%;
}
.prestation-titre {
text-align: center;
color: rgba(var(--noir-rvb),var(--alpha-100));
}
.prestation-titre:active, .prestation-titre:hover {
text-decoration: none;
background-color: rgba(var(--gris-clair-rvb),var(--alpha-100));
color: rgba(var(--noir-rvb),var(--alpha-100));
}
.prestation-titre h3 {
font-size: var(--taille-h4);
}
.prestation-titre img {
width: 12rem;
height: 12rem;
border: 7px solid transparent;
object-fit: cover;
}
.question-reponse {
cursor: pointer;
color: rgba(var(--gris-sombre-rvb), var(--alpha-100));
background-color: rgba(var(--gris-clair-rvb), var(--alpha-100));
border: var(--lisere) solid rgba(var(--gris-clair-rvb), var(--alpha-100));
border-radius: var(--courbure);
padding: var(--rembourrage);
margin-bottom: var(--interbloc);
width: calc(var(--menu-largeur) - 2 * var(--rembourrage));
transition: 0.3s;
}
.question-reponse:hover {
background-color: rgba(var(--gris-moyen-rvb), var(--alpha-100));
color: rgba(var(--blanc-rvb), var(--alpha-100));
}
.question-reponse::-webkit-details-marker {
display: none;
}
.question-reponse:marker {
content: '▶';
margin-right: 5px;
}
.reduit-interligne:before {
content: "";
display: block;
height: 0;
margin-top: -.05em;
width: 0;
}
.rembourrage-horizontal {
padding-left: calc(var(--rembourrage) * 2);
padding-right: calc(var(--rembourrage) * 2);
}
.rond-couleur::before {
content: "";
display: inline-block;
width: 2.1em;
height: 2.1em;
margin-right: 1em;
border-radius: 50%;
}
/* Rond inutile particulier à virer 100 */
.rond-blanc::before {background-color: rgba(var(--blanc-rvb), var(--alpha-100));}
.rond-gris-clair::before {background-color: rgba(var(--gris-clair-rvb), var(--alpha-100));}
.rond-gris-moyen::before {background-color: rgba(var(--gris-moyen-rvb), var(--alpha-100));}
.rond-gris-sombre::before {background-color: rgba(var(--gris-sombre-rvb), var(--alpha-100));}
.rond-noir::before {background-color: rgba(var(--noir-rvb), var(--alpha-100));}
.rond-rouge::before {background-color: rgba(var(--rouge-rvb), var(--alpha-100));}
.rond-orange::before {background-color: rgba(var(--orange-rvb), var(--alpha-100));}
.rond-jaune::before {background-color: rgba(var(--jaune-rvb), var(--alpha-100));}
.rond-vert::before {background-color: rgba(var(--vert-rvb), var(--alpha-100));}
.rond-bleu-vert::before {background-color: rgba(var(--bleu-vert-rvb), var(--alpha-100));}
.rond-bleu-clair::before {background-color: rgba(var(--bleu-clair-rvb), var(--alpha-100));}
.rond-bleu-sombre::before {background-color: rgba(var(--bleu-sombre-rvb), var(--alpha-100));}
.rond-pourpre::before {background-color: rgba(var(--pourpre-rvb), var(--alpha-100));}
.rond-violet::before {background-color: rgba(var(--violet-rvb), var(--alpha-100));}
.scanneur {
position: relative;
overflow: hidden;
padding: var(--rembourrage);
border-radius: var(--courbure);
}
.scanneur::after {
content: "";
position: absolute;
top: 0;
width: 0.1rem;
height: 100%;
background: rgba(var(--rouge-rvb),var(--alpha-100));
animation: scanner 2s infinite linear;
}
/* Annulation des ajustements sur input-ligne dans un environnement réduit */
.section-ancien.input-ligne,
.section-nouveau.input-ligne {
margin-left: 0;
margin-right: 0;
}
.services-administration {
margin-left: auto;
display: flex;
}
.services-administration .menu-item {margin-left: calc(0.5 * var(--intermenu)) ! important;}
.services-administration .menu-item:first-child {margin-left: 0;}
.services-prestation {
display: flex;
}
.services-prestation .menu-item {margin-left: 2em;}
.services-prestation .menu-item:first-child {margin-left: 0;}
.sous-boutons {
display: flex;
gap: var(--gouttiere);
justify-content: flex-end;
margin-top: var(--interbloc);
}
.sous-boutons .bouton {
width: 14rem;
}
.sous-colonnes {
display: flex;
flex-wrap: wrap;
gap: var(--gouttiere);
padding: var(--rembourrage);
}
.sous-colonne-1 {
flex: 0 0 28%;
}
.sous-colonne-1 .svg-plume-icone {
width: 100%;
height: 100%;
background-color: rgba(var(--blanc-rvb),var(--alpha-100));
transform: translatex(0em) translatey(0em);
align-items: center;
}
.sous-colonne-2 {
flex: 1;
display: flex;
flex-direction: column;
}
/* Numéro romain initial */
.style-romain-1 {counter-reset: liste-numero 0;}
.style-romain-2 {counter-reset: liste-numero 1;}
.style-romain-3 {counter-reset: liste-numero 2;}
.style-romain-4 {counter-reset: liste-numero 3;}
.style-romain-5 {counter-reset: liste-numero 4;}
.style-romain-6 {counter-reset: liste-numero 5;}
.style-romain-7 {counter-reset: liste-numero 6;}
.superposition {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--gouttiere);
align-items: flex-start;
}
.superposition-menu {
box-sizing: border-box;
}
.superposition-menu li h3 {
text-align: left;
font-weight: normal;
}
.superposition-menu ul li {
color: rgba(var(--gris-clair-rvb),var(--alpha-100));
margin: 0;
line-height: var(--interligne);
}
.superposition-sous-menu {
display: grid;
grid-template-columns: 1fr;
padding: var(--interbloc) var(--intermot);
align-items: center;
margin-left: var(--retrait);
}
.svg-acheter-icone {
height: var(--interligne);
width:auto;
margin-right:var(--intermot);
}
.svg-couleur::before {
content: "";
display: inline-block;
width: 2.8em;
height: 2.8em;
margin-right: 1em;
background-repeat: no-repeat;
background-size: cover;
}
.svg-drapeau-icone {
width: 1.5em;
}
.svg-logo-3rem {
height: 3rem;
width: auto;
text-transform: none;
}
.svg-logo-texte {
font-family: "SimplySans-Book";
font-size: 291.667px;
fill: #ffffff;
}
.svg-plume-icone {
width: 12em;
height: 3em;
padding: .21em;
transform: translateX(-0.4375em) translateY(0.25em);
/* background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)); */
}
.svg-plume-texte {
position: absolute;
z-index: calc(var(--z-index-navbar) + 2);
color: rgba(var(--blanc-rvb), var(--alpha-100));
transform: translatey(0.9375em);
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3));
font-size: 1.5em;
}
/* Icone de menu secondaire particulier */
.svg-rouge::before {background-image: url('/svg/icone-corriger.svg');}
.svg-orange::before {background-image: url('/svg/icone-sublimer.svg');}
.svg-jaune::before {background-image: url('/svg/icone-composer.svg');}
.svg-vert::before {background-image: url('/svg/icone-illustrer.svg');}
.svg-bleu-vert::before {background-image: url('/svg/icone-communiquer.svg');}
.svg-vert-academie::before {background-image: url('/svg/icone-auteur-vert-academie.svg');}
.svg-bleu-clair::before {background-image: url('/svg/icone-apprendre.svg');}
.svg-bleu-sombre::before {background-image: url('/svg/icone-connecter.svg');}
.svg-violet::before {background-image: url('/svg/icone-acheter.svg');}
.svg-pourpre::before {background-image: url('/svg/icone-cabinet.svg');}
.texte-aligne-gauche {
text-align: left;
}
.texte-droite {
padding-left: 14%;
padding-right: 21%;
}
.texte-gauche {
padding-left: 17%;
padding-right: 14%;
}
.texte-droite,
.texte-gauche {
display: flex;
flex-direction: column;
justify-content: center;
}
.texte-droite p,
.texte-gauche p {
text-align: left;
}
.texte-important,
.texte-important p,
.texte-important span {
/* font-size: calc(100vw / 50); */
font-size: 1.4rem;
line-height: normal;
}
.texte-tres-important,
.texte-tres-important p,
.texte-tres-important span {
font-size: calc(100vw / 70);
line-height: normal;
}
.video-fermer {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: auto;
font-size: var(--taille-h1);
cursor: pointer;
padding: var(--rembourrage);
}
.video-fermer:hover,
.video-fermer:focus {
background-color: rgba(var(--rouge-rvb), var(--alpha-100));
color: rgba(var(--blanc-rvb), var(--alpha-100));
text-decoration: none;
}
.video-modale {
display: none;
position: relative;
}
.video-modale-conteneur {
position: relative;
border: var(--lisere) solid rgba(var(--noir-rvb), var(--alpha-100));
background-color: rgba(var(--gris-clair-rvb), var(--alpha-100));
border-radius: var(--courbure) var(--courbure) 0 0;
width: 100%;
max-width: 100%;
}
.video-titre {
flex-grow: 1;
font-size: large;
padding: 1rem;
text-align: left;
font-weight: bolder;
}
.video-titre-conteneur {
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgba(var(--gris-clair-rvb), var(--alpha-100));
color: rgba(var(--noir-rvb), var(--alpha-100));
border-radius: var(--courbure) var(--courbure) 0 0;
text-align: center;
}
.video-vertical,
.video-horizontal {
width: 100%;
height: auto;
display: block;
}
/* Masquer la vidéo verticale par défaut */
.video-vertical {
display: none;
}
.videotexte-conteneur {
background-color: rgba(var(--blanc-casse-rvb), var(--alpha-100));
border: var(--lisere) solid rgb(var(--gris-sombre-rvb));
width: 100%;
position: relative;
overflow: hidden;
height: 0;
padding-bottom: 56.25%; /* Par défaut, 16:9 aspect ratio */
}
.videotexte-conteneur article {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
padding: var(--rembourrage);
box-sizing: border-box;
display: none;
}
.videotexte-conteneur article.active {
display: block;
}
.videotexte-conteneur h2 {
color: rgba(var(--rouge-rvb), var(--alpha-100));
font-size: var(--taille-h1);
}
.videotexte-conteneur p {
text-align: center;
font-size: var(--taille-m);
}
.videotexte-copie {
position: absolute;
pointer-events: none;
z-index: 1000;
font-size: inherit;
letter-spacing: inherit;
line-height: inherit;
word-spacing: inherit;
/* Ajouter ici des effets d’explosion si nécessaire */
}
/* Styles Spécifiques aux Éléments */
.videotexte-ajout,
.videotexte-creation,
.videotexte-explosion,
.videotexte-final,
.videotexte-initial,
.videotexte-suppression {
white-space: pre-wrap;
overflow: hidden;
}
.videotexte-ajout,
.videotexte-creation,
.videotexte-final {
display: none;
}
.videotexte-ajout {background-color: rgba(var(--vert-rvb), var(--alpha-30)); color: rgba(var(--vert-rvb), var(--alpha-100));}
.videotexte-creation {background-color: rgba(var(--bleu-clair-rvb), var(--alpha-30)); color: rgba(var(--bleu-clair-rvb), var(--alpha-100));}
.videotexte-final {background-color: rgba(var(--bleu-vert-rvb), var(--alpha-30)); color: rgba(var(--bleu-vert-rvb), var(--alpha-100));}
.videotexte-explosion-active {animation: explosion 0.05s forwards;}
.videotexte-implosion-active {animation: implosion 0.05s forwards;}
.videotexte-suppression {color: rgba(var(--noir-rvb), var(--alpha-100));}
/* Styles pour les Soulignements */
.videotexte-creation-soulignement {background-color: rgba(var(--bleu-clair-rvb), var(--alpha-30)); color: rgba(var(--bleu-clair-rvb), var(--alpha-100)); position: relative;}
.videotexte-explosion-soulignement {background-color: rgba(var(--violet-rvb), var(--alpha-30)); color: rgba(var(--violet-rvb), var(--alpha-100)); position: relative;}
.videotexte-initial-soulignement {background-color: rgba(var(--violet-rvb), var(--alpha-30)); color: rgba(var(--violet-rvb), var(--alpha-100)); position: relative;}
.videotexte-suppression-soulignement {background-color: rgba(var(--rouge-rvb), var(--alpha-30)); color: rgba(var(--rouge-rvb), var(--alpha-100)); position: relative;}
.videotexte-creation-soulignement::after {background-color: rgba(var(--bleu-clair-rvb), var(--alpha-100));}
.videotexte-explosion-soulignement::after {background-color: rgba(var(--violet-rvb), var(--alpha-100));}
.videotexte-suppression-soulignement::after {background-color: rgba(var(--rouge-rvb), var(--alpha-100));}
.videotexte-initial-soulignement::after {background-color: rgba(var(--violet-rvb), var(--alpha-100));}
.videotexte-explosion-soulignement::after,
.videotexte-initial-soulignement::after,
.videotexte-suppression-soulignement::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0.75vw;
height: var(--lisere);
}
/* Styles pour les Spots de Texte */
.videotexte-spot {
color: rgba(var(--rouge-rvb), var(--alpha-100));
transition: color 0.1s;
}
.vignette {
background-color: rgba(var(--gris-clair-rvb),var(--alpha-100));
text-align: center;
padding: var(--rembourrage);
box-sizing: border-box;
}
.vignette h3 {
background-color: rgba(var(--gris-moyen-demi-rvb), var(--alpha-100));
margin: calc(-1 * var(--rembourrage)) -1 * var(--rembourrage) 0 -1 * var(--rembourrage);
padding: var(--rembourrage);
}
.vignette.texte-aligne-gauche {
text-align: left;
}
.zoom {
font-size: var(--taille-h1);
}
/* Media Queries pour adapter le ratio en fonction de la largeur et de la hauteur */
@media (min-aspect-ratio: 16/9) {
.videotexte-conteneur {
padding-bottom: 56.25%; /* 16:9 aspect ratio */
}
}
@media (max-aspect-ratio: 1/1) and (min-aspect-ratio: 9/16) {
.videotexte-conteneur {
padding-bottom: 100%; /* 1:1 aspect ratio */
}
.videotexte-conteneur pre {
font-size: 1.9vw;
}
.videotexte-conteneur legend {
font-size: x-large;
}
.videotexte-conteneur h2 {
text-align: right;
font-size: var(--taille-h3);
}
}
@media (max-aspect-ratio: 9/16) {
.videotexte-conteneur {
padding-bottom: 177.78%; /* 9:16 aspect ratio */
}
.videotexte-conteneur pre {
font-size: 2.65vw;
}
.videotexte-conteneur legend {
font-size: x-large;
}
.videotexte-conteneur h2 {
text-align: right;
font-size: var(--taille-h3);
}
}
/* Animations */
@keyframes explosion {
0% {transform: scale(1); opacity: 1;}
50% {transform: scale(1.5); opacity: 0.5;}
100% {transform: scale(2);opacity: 0;}
}
@keyframes implosion {
0% {transform: scale(0.5); opacity: 0;}
100% {transform: scale(1); opacity: 1;}
}
@keyframes scanneur {
0% { left: -100%;}
50% { left: 100%;}
100% { left: -100%;}
}
/* Afficher la vidéo verticale en mode portrait */
@media (orientation: portrait) {
.video-horizontal {
display: none;
}
.video-vertical {
display: block;
}
}
/* Largeur de menu et taille de fonte fixes à partir de la résolution 3840 px */
@media (min-width: 3840px) {
:root {
--menu-largeur: var(--menu-ecran-maximal-largeur);
--taille-fonte: 22px;
}
}
@media (min-width: 1350px) and (max-width: 1575px) {
.menu-item {
font-size: 98%; /* Ajuster selon les besoins */
}
}
@media (min-width: 1200px) and (max-width: 1350px) {
.menu-item {
font-size: 95%; /* Ajuster selon les besoins */
}
}
/* Largeur des menus variant de 77 % à 50 % entre les résolutions 1200 et 3840 px */
@media (min-width: 1200px) {
:root {
--menu-largeur: calc(var(--menu-ecran-minimal-largeur) - (100vw - var(--ecran-minimal-largeur)) * var(--difference-menu-largeur-) / var(--difference-largeur-));
}
}
/* Disparition du menu en dessous d'une résolution de 1200 px */
@media (max-width: 1200px) {
.colonne-bicephale h1,
.colonne-bicephale p {
text-align:center;
}
.degrade-pourpre-a-jaune,
.degrade-violet-a-vert {
font-size: 1.5rem;
font-variant: small-caps;
font-weight: 700;
max-width: 50%;
margin-left: auto;
margin-right: auto;
}
.image-droite,
.image-gauche {
width: 100%;
padding-left: var(--rembourrage);
padding-right: var(--rembourrage);
}
.image-droite-ligne,
.image-gauche-ligne {
padding: var(--rembourrage) 0;
}
.ligne-bicephale {
grid-template-columns: 1fr;
padding: 0;
}
.ligne-bicephale img.image-adaptative {
width: calc(100vw - 7 * var(--rembourrage));
}
.ligne-bicephale .texte-gauche {
order: 2;
}
.ligne-bicephale .texte-droite {
order: 1;
}
.menu-item-1200 {
display: none;
}
.prestation-titre {
flex-direction: column;
text-align: center;
}
.prestation-titre img {
margin-right: 0;
margin-bottom: var(--gouttiere);
}
.texte-aligne-gauche {
text-align:inherit;
}
.texte-tres-important,
.texte-tres-important p,
.texte-tres-important span {
font-size: calc(100vw / 50);
line-height: normal;
}
}
@media (max-width: 836px) {
.input-ligne, .ligne {
width: 35ch;
}
.input-ligne {
flex-direction: column; /* Empile les éléments verticalement */
}
.input-conteneur {
width: 100%; /* On oblige les conteneurs enfants à occuper toute la largeur */
}
.input-conteneur:not(:last-child) {margin-right: 0;} /* Ajustage l'espacement entre les conteneurs */
.input-conteneur > label {
margin: auto; /* Ajoute une marge automatique de tous les côtés */
}
.input-conteneur.pourcentagelargeurtexte04,
.input-conteneur.pourcentagelargeurtexte05,
.input-conteneur.pourcentagelargeurtexte06,
.input-conteneur.pourcentagelargeurtexte07,
.input-conteneur.pourcentagelargeurtexte08,
.input-conteneur.pourcentagelargeurtexte09,
.input-conteneur.pourcentagelargeurtexte11,
.input-conteneur.pourcentagelargeurtexte15,
.input-conteneur.pourcentagelargeurtexte18,
.input-conteneur.pourcentagelargeurtexte28,
.input-conteneur.pourcentagelargeurtexte30,
.input-conteneur.pourcentagelargeurtexte33,
.input-conteneur.pourcentagelargeurtexte36,
.input-conteneur.pourcentagelargeurtexte46 {
width: 35ch;
}
.sous-colonne-1 {
flex: 0 0 100%;
}
.sous-boutons .bouton {
width: 7rem;
}
}
@media (max-width: 768px) {
:root {
--vignette-nombre: 1;
}
.input-ligne, .ligne {
width: 29ch;
}
.input-conteneur.pourcentagelargeurtexte04,
.input-conteneur.pourcentagelargeurtexte05,
.input-conteneur.pourcentagelargeurtexte06,
.input-conteneur.pourcentagelargeurtexte07,
.input-conteneur.pourcentagelargeurtexte08,
.input-conteneur.pourcentagelargeurtexte09,
.input-conteneur.pourcentagelargeurtexte11,
.input-conteneur.pourcentagelargeurtexte15,
.input-conteneur.pourcentagelargeurtexte18,
.input-conteneur.pourcentagelargeurtexte28,
.input-conteneur.pourcentagelargeurtexte30,
.input-conteneur.pourcentagelargeurtexte33,
.input-conteneur.pourcentagelargeurtexte36,
.input-conteneur.pourcentagelargeurtexte46 {
width: 29ch;
}
.pied {
grid-template-columns: repeat(2, 1fr);
}
.prestation-ligne {
grid-template-columns: repeat(2, 1fr);
}
.superposition {
grid-template-columns: repeat(1, 1fr);
}
}
/* Fonte proportionelle entre les résolutions 480 px et 3840 px */
@media (min-width: 480px) {
:root {
--taille-fonte: calc(12px + (22 - 12) * ((100vw - 480px) / (3840 - 480)));
}
}
@media (max-width: 479px) {
/* Centrage du bouton */
input {
width: auto;
}
.bouton {
display: block;
margin: 0 auto;
width: 50%;
}
.entreprise-ligne {
width: 100%;
}
.input-ligne, .ligne {
width: 27ch;
}
.input-conteneur.pourcentagelargeurtexte04,
.input-conteneur.pourcentagelargeurtexte05,
.input-conteneur.pourcentagelargeurtexte06,
.input-conteneur.pourcentagelargeurtexte07,
.input-conteneur.pourcentagelargeurtexte08,
.input-conteneur.pourcentagelargeurtexte09,
.input-conteneur.pourcentagelargeurtexte11,
.input-conteneur.pourcentagelargeurtexte15,
.input-conteneur.pourcentagelargeurtexte18,
.input-conteneur.pourcentagelargeurtexte28,
.input-conteneur.pourcentagelargeurtexte30,
.input-conteneur.pourcentagelargeurtexte33,
.input-conteneur.pourcentagelargeurtexte36,
.input-conteneur.pourcentagelargeurtexte46 {
width: 27ch;
}
.lire-la-suite {
visibility: visible;
opacity: 1;
}
.menu-item-380 {
display: none;
}
.menu-primaire {
width: var(--menu-largeur);
}
.prestation-auteur img,
.prestation-ouvrage {
display:block;
}
.prestation-ligne {
grid-template-columns: repeat(1, 1fr);
}
.texte-tres-important,
.texte-tres-important p,
.texte-tres-important span {
font-size: calc(100vw / 28);
line-height: normal;
}
}
@media (max-width: 420px) {
.input-ligne, .ligne {
width: 25ch;
}
.input-conteneur.pourcentagelargeurtexte04,
.input-conteneur.pourcentagelargeurtexte05,
.input-conteneur.pourcentagelargeurtexte06,
.input-conteneur.pourcentagelargeurtexte07,
.input-conteneur.pourcentagelargeurtexte08,
.input-conteneur.pourcentagelargeurtexte09,
.input-conteneur.pourcentagelargeurtexte11,
.input-conteneur.pourcentagelargeurtexte15,
.input-conteneur.pourcentagelargeurtexte18,
.input-conteneur.pourcentagelargeurtexte28,
.input-conteneur.pourcentagelargeurtexte30,
.input-conteneur.pourcentagelargeurtexte33,
.input-conteneur.pourcentagelargeurtexte36,
.input-conteneur.pourcentagelargeurtexte46 {
width: 25ch;
}
}
@media (max-width: 350px) {
.facture-historique > div {
flex-direction: column;
width: 100%; /* Assure que chaque div prend toute la largeur disponible */
}
}