@import url('https://fonts.googleapis.com/css?family=Roboto:400,500,700,900|Kanit:400,500,600,700|Lobster|Playfair+Display:400,500,600,700,900|Georgia'); @font-face { font-family: "Garamond"; src: url('adm-images/polices/gara.ttf') format('truetype'); } @font-face { font-family: "Garamond"; src: url('adm-images/polices/garabd.ttf') format('truetype'); font-weight: bold; } @font-face { font-family: "Garamond"; src: url('adm-images/polices/garait.ttf') format('truetype'); font-style: italic; } @import url(adm-images/histoires.css); :root{ --adc-bg: #eef2f4; --adc-panel: #ffffff; --adc-panel-2: #f4f8fb; --adc-panel-3: #f4f6f7; --adc-bordure: #d9e0e5; --adc-bordure-2: #e3e8eb; --adc-primaire: #0097ff; --adc-primaire-2: #00cdbe; --adc-accent: #1c6c72; --adc-texte: #2a333a; --adc-texte-clair: #64707a; --adc-liens: #b3341f; --adc-liens-hover: #ff5a3d; --adc-succes: #42aa19; --adc-attention: #aa7f19; --adc-erreur: #d62d2d; --adc-radius: 8px; --adc-radius-sm: 5px; --adc-ombre: 0 2px 10px rgba(20,40,50,0.10); --adc-ombre-forte: 0 6px 24px rgba(20,40,50,0.16); --adc-transition: 0.2s ease; color-scheme: light; } /* Thème sombre : activé via [data-theme="dark"] sur (bouton + script dans l'en-tête) */ :root[data-theme="dark"]{ --adc-bg: #10161c; --adc-panel: #1b232b; --adc-panel-2: #161d24; --adc-panel-3: #202a33; --adc-bordure: #2c3944; --adc-bordure-2: #2c3944; --adc-primaire: #29b6ff; --adc-primaire-2: #00e6d3; --adc-accent: #5fd6cb; --adc-texte: #e4ecf1; --adc-texte-clair: #93a2ac; --adc-liens: #ff8a65; --adc-liens-hover: #ffab91; --adc-succes: #6fd94a; --adc-attention: #e8c547; --adc-erreur: #ff6b6b; --adc-ombre: 0 2px 10px rgba(0,0,0,0.45); --adc-ombre-forte: 0 6px 24px rgba(0,0,0,0.6); color-scheme: dark; } *, *::before, *::after{ box-sizing: border-box; } body{ margin: 0; background: var(--adc-bg); color: var(--adc-texte); -webkit-font-smoothing: antialiased; } div{ font-family: 'Roboto', Arial, sans-serif; font-size: 13px; line-height: 1.5; } strong{ font-weight: 700; } a{ color: var(--adc-liens); text-decoration: none; transition: color var(--adc-transition); } a:hover{ color: var(--adc-liens-hover); text-decoration: none; } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{ outline: 2px solid var(--adc-primaire); outline-offset: 2px; } /* En-tête */ .entete{ background: linear-gradient(135deg, #0f1620, #1a2531); height: 44px; border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 2px 12px rgba(0,0,0,0.35); } .titres{ font-family: 'Kanit', Roboto, sans-serif; font-size: 19px; font-weight: 600; background: linear-gradient(120deg, var(--adc-primaire), var(--adc-primaire-2)); color: #fff; padding: 8px 14px; border-radius: var(--adc-radius) var(--adc-radius) 0 0; } .sstitres{ font-family: 'Kanit', Roboto, sans-serif; font-size: 14px; font-weight: 600; background: linear-gradient(120deg, #34b092, #8dff80); color: #fff; padding: 7px 12px; border-radius: var(--adc-radius-sm) var(--adc-radius-sm) 0 0; } .cellule{ background: var(--adc-panel-2); padding: 12px; font-family: 'Roboto', Arial, sans-serif; line-height: 20px; border-radius: 0 0 var(--adc-radius) var(--adc-radius); } .cellule-contenu{ background: var(--adc-panel); border-radius: var(--adc-radius-sm); padding: 10px; margin: 4px 0; box-shadow: 0 1px 3px rgba(20,40,50,0.08); } .sscellule{ background: var(--adc-panel); padding: 12px; font-family: 'Roboto', Arial, sans-serif; border-radius: var(--adc-radius-sm); box-shadow: 0 1px 3px rgba(20,40,50,0.08); } .sscellule-contenu{ border-top: 1px dashed var(--adc-bordure); margin-top: 9px; padding-top: 9px; } /* Champs & formulaires */ .form{ background: var(--adc-panel); color: var(--adc-texte); font-family: 'Roboto', Arial, sans-serif; border: 1px solid var(--adc-bordure); padding: 9px 11px; border-radius: var(--adc-radius-sm); margin-top: 7px; font-size: 13px; transition: border-color var(--adc-transition), box-shadow var(--adc-transition); } .form:focus{ border-color: var(--adc-primaire-2); box-shadow: 0 0 0 3px rgba(0,205,190,0.15); outline: none; } .form-100{ width: 100%; } textarea.form{ cursor: text; width: 100%; resize: vertical; } /* Boutons */ .btn{ background: var(--adc-panel); color: var(--adc-primaire-2); font-family: 'Roboto', Arial, sans-serif; padding: 7px 12px; cursor: pointer; border-radius: var(--adc-radius-sm); display: inline-block; transition: all var(--adc-transition); border: 1px solid var(--adc-bordure); } .btn:hover{ background: var(--adc-primaire-2); border-color: var(--adc-primaire-2); color: #fff; text-decoration: none; } .btn-classique{ cursor: pointer; padding: 7px 12px; border: 1px solid var(--adc-bordure); background: var(--adc-panel); border-radius: var(--adc-radius-sm); box-shadow: 0 1px 2px rgba(20,40,50,0.08); font-family: 'Roboto', Arial, sans-serif; font-size: 13px; text-align: center; transition: all var(--adc-transition); } .btn-classique:hover{ box-shadow: 0 2px 8px rgba(66,170,25,0.25); color: var(--adc-succes); border-color: var(--adc-succes); } input.btn-moderne, .btn-moderne, .btn-moderne-up{ background: var(--adc-panel); box-shadow: 0 1px 4px rgba(20,40,50,0.15); padding: 8px 12px; color: var(--adc-primaire-2); border-radius: var(--adc-radius-sm); display: inline-block; transition: all var(--adc-transition); border: 0; cursor: pointer; font-family: 'Roboto', Arial, sans-serif; font-size: 13px; text-decoration: none; } input.btn-moderne:hover, .btn-moderne:hover, .btn-moderne-up{ background: var(--adc-primaire-2); color: #fff; text-decoration: none; } input.btn-moderne-vert{ background: var(--adc-panel); box-shadow: 0 1px 4px rgba(20,40,50,0.15); padding: 8px 12px; color: var(--adc-succes); border-radius: var(--adc-radius-sm); display: inline-block; transition: all var(--adc-transition); border: 0; cursor: pointer; } input.btn-moderne-vert:hover{ background: var(--adc-succes); color: #fff; } input.btn-moderne-rouge{ background: var(--adc-panel); box-shadow: 0 1px 4px rgba(20,40,50,0.15); padding: 8px 12px; color: var(--adc-erreur); border-radius: var(--adc-radius-sm); display: inline-block; transition: all var(--adc-transition); border: 0; cursor: pointer; } input.btn-moderne-rouge:hover{ background: var(--adc-erreur); color: #fff; } input.btn-moderne-rouge-2{ background: var(--adc-panel-3); padding: 9px 8px; color: var(--adc-erreur); border-radius: var(--adc-radius-sm); display: inline-block; transition: all var(--adc-transition); border: 0; cursor: pointer; } input.btn-moderne-rouge-2:hover{ background: var(--adc-erreur); color: #fff; } input.btn-suppression{ background: transparent; cursor: pointer; background-image: url(adm-images/suppression.svg); background-size: 16px 16px; background-repeat: no-repeat; background-position: center; width: 16px; height: 16px; border: 0; opacity: 0.75; transition: opacity var(--adc-transition); } input.btn-suppression:hover{ opacity: 1; } .btn-moderne-2, .btn-moderne-2-up{ background: var(--adc-panel); box-shadow: 0 1px 3px rgba(20,40,50,0.12); padding: 6px 9px; color: var(--adc-primaire-2); border-radius: var(--adc-radius-sm); display: inline-block; transition: all var(--adc-transition); border: 0; text-decoration: none; } .btn-moderne-2:hover, .btn-moderne-2-up{ background: var(--adc-primaire-2); color: #fff; } img.icone-16{ width: 16px; height: 16px; margin-top: -3px; } img.icone-14{ width: 14px; height: 14px; margin-top: -1px; } /* Bandeaux d'info */ .info-vigilance{ font-family: 'Roboto', Arial, sans-serif; background: #fdf4d8; color: var(--adc-attention); padding: 8px 10px; border-radius: var(--adc-radius-sm); border-left: 3px solid var(--adc-attention); } .info-valide{ font-family: 'Roboto', Arial, sans-serif; background: #e3f7d8; color: var(--adc-succes); padding: 8px 10px; border-radius: var(--adc-radius-sm); border-left: 3px solid var(--adc-succes); } .info-invalide{ font-family: 'Roboto', Arial, sans-serif; background: #fbe1e1; color: var(--adc-erreur); padding: 8px 10px; border-radius: var(--adc-radius-sm); border-left: 3px solid var(--adc-erreur); } .histoires-affiche{ border-radius: var(--adc-radius-sm); box-shadow: var(--adc-ombre); margin: 5px; transition: transform var(--adc-transition), box-shadow var(--adc-transition); } .histoires-affiche:hover{ transform: translateY(-2px); box-shadow: var(--adc-ombre-forte); } .couverture-img{ margin-right: 10px; padding: 5px; border: 1px solid var(--adc-bordure-2); background: var(--adc-panel); border-radius: 4px; } .cellule-tome{ display: table; width: 100%; } .couverture-tome{ display: table-cell; width: 162px; vertical-align: top; } .lchapitres-tome{ display: table-cell; vertical-align: top; } .accueil-tableau{ display: table; width: 100%; margin-top: 10px; } .accueil-tableau-cellule{ display: table-cell; width: 49.5%; padding: 0 !important; } .accueil-tableau-sep{ display: table-cell; width: 10px; padding: 0; } .encyclopedie-lettre{ background: linear-gradient(var(--adc-panel), var(--adc-panel-2)); font-family: 'Roboto', Arial, sans-serif; color: var(--adc-accent); box-shadow: 0 1px 4px rgba(20,40,50,0.12); border-radius: 4px 6px 6px 4px; font-weight: 700; text-transform: uppercase; padding: 6px; margin-bottom: 3px; } .encyclopedie-article{ background: var(--adc-panel-3); color: var(--adc-accent); display: inline-block; padding: 6px; border-radius: var(--adc-radius-sm); transition: all var(--adc-transition); margin-top: 5px; } .encyclopedie-article:hover{ background: var(--adc-primaire-2); color: #fff; } div.chronologie-contenu-liens, div.chronologie-contenu-liens-2{ color: var(--adc-texte) !important; } .avatar-rond-30-gauche{ float: left; width: 28px; height: 28px; border: 1px solid var(--adc-bordure-2); background: var(--adc-panel); padding: 2px; border-radius: 50%; margin-right: 7px; } @media(min-width: 1000px){ .mobile{ display: none; } .ssentete{ width: 950px; margin: 0 auto; background: url(logo.png) no-repeat left; background-size: auto 42px; padding-left: 44px; } .page{ width: 100%; max-width: 1100px; padding: 16px; margin: 16px auto 24px; background: var(--adc-panel); box-shadow: var(--adc-ombre); border-radius: var(--adc-radius); } a.entete-liens, a.entete-liens-up{ line-height: 44px; font-family: 'Roboto', Arial, sans-serif; font-size: 14px; color: #d6dde1; margin: 0 10px; font-weight: 600; letter-spacing: 0.2px; transition: color var(--adc-transition); } a.entete-liens:hover, a.entete-liens-up{ text-decoration: none; color: #4fd7ff; } .histoires-affiche{ width: 150px; height: 200px; } div.histoires-affiche{ display: inline-block; width: 110px; height: 110px; background: radial-gradient(circle at 30% 30%, #3a4550, #1a2129); padding: 80px 20px 10px; color: #fff; font-family: Georgia, serif; font-size: 15px; text-align: center; border-radius: var(--adc-radius-sm); } } @media(max-width: 999px){ .pasmobile{ display: none; } .entete{ background-image: url(logo.png); background-repeat: no-repeat; background-position: left; background-size: auto 42px; } .ssentete{ position: absolute; z-index: 999; float: right; top: 44px; right: 0; } .page{ padding: 12px; margin: 0; background: var(--adc-panel); border-radius: 0; } a.entete-liens, a.entete-liens-up{ font-family: 'Roboto', Arial, sans-serif; font-size: 14px; background: #1a2531; color: #d6dde1; display: block; font-weight: 600; padding: 12px; } a.entete-liens:hover, a.entete-liens-up{ text-decoration: none; color: #4fd7ff; } .histoires-affiche{ width: 130px; height: 173px; } div.histoires-affiche{ display: inline-block; width: 110px; height: 93px; background: radial-gradient(circle at 30% 30%, #3a4550, #1a2129); padding: 70px 10px 10px; color: #fff; font-family: Georgia, serif; font-size: 15px; text-align: center; border-radius: var(--adc-radius-sm); } } /*Ultra Mobile*/ @media(max-width: 760px){ .accueil-tableau-cellule{ display: block; padding: 0 !important; width: 100%; } .couverture-img{ margin-right: 0; } .couverture-tome{ display: block; margin: 0 auto 10px; } .lchapitres-tome{ display: block; } } @media(min-width: 641px){ .chronologie-table, .chronologie-table-2{ display: table; width: 100%; } .chronologie-table-2{ margin-top: 7px; } .chronologie-contenu{ margin-left: 7px; } .chronologie-contenu-liens, .chronologie-contenu-liens-2{ display: block; color: var(--adc-accent); background: var(--adc-panel-3); box-shadow: inset 0 0 0 1px var(--adc-bordure-2); border-radius: var(--adc-radius-sm); padding: 5px 6px; font-family: 'Roboto', Arial, sans-serif; text-align: left; transition: all var(--adc-transition); } a.chronologie-contenu-liens:hover, a.chronologie-contenu-liens-2:hover{ color: var(--adc-primaire-2); } .chronologie-contenu-liens-2{ margin-top: 7px; } .chronologie-contenu-annee{ background: linear-gradient(#08678e,#274056); font-family: 'Roboto', Arial, sans-serif; color: #fff; box-shadow: 0 1px 3px rgba(20,40,50,0.2); border-radius: 4px 6px 6px 4px; margin-bottom: 5px; font-weight: 700; text-transform: uppercase; padding: 4px 6px; display: table-cell; width: 100px; } } @media(max-width: 760px){ .chronologie-table-2{ margin-top: 7px; } .chronologie-contenu-annee{ background: linear-gradient(#08678e,#274056); font-family: 'Roboto', Arial, sans-serif; color: #fff; border-radius: var(--adc-radius-sm); margin-bottom: 5px; font-weight: 700; text-transform: uppercase; padding: 4px 6px; } .chronologie-contenu-liens, .chronologie-contenu-liens-2{ display: block; color: var(--adc-accent); background: var(--adc-panel-3); border-radius: var(--adc-radius-sm); padding: 5px 6px; font-family: 'Roboto', Arial, sans-serif; text-align: left; transition: all var(--adc-transition); } a.chronologie-contenu-liens:hover, a.chronologie-contenu-liens-2:hover{ color: var(--adc-primaire-2); } .chronologie-contenu-liens-2{ margin-top: 7px; } }