/* ===================================================================== ISDRGL — Feuille de style du site public Identité visuelle : vert agronomique + or institutionnel Construit par-dessus Bootstrap 5.3 ===================================================================== */ :root { color-scheme: light; /* --------------------------------------------------------------- Couleurs de marque — identiques dans les deux thèmes --------------------------------------------------------------- */ --isdr-green: #1B6B3A; --isdr-green-dark: #104927; --isdr-green-deep: #0A3219; --isdr-green-light: #2E8B57; --isdr-gold: #B8860B; --isdr-gold-light: #D4A72C; /* --------------------------------------------------------------- Jetons de thème — seules ces valeurs changent en mode sombre --------------------------------------------------------------- */ /* Surfaces */ --page-bg: #FFFFFF; /* fond de la page */ --surface: #FFFFFF; /* cartes, navbar, encarts */ --surface-2: #F4F5F6; /* sections alternées */ --surface-3: #FFFFFF; /* champs de saisie */ --isdr-cream: #F4F5F6; --isdr-white: #FFFFFF; /* Texte */ --isdr-ink: #1A1D1F; /* titres */ --isdr-body: #51585D; /* texte courant */ /* #7C848A auparavant : 3,80:1 sur blanc, sous le seuil AA de 4,5:1 pour tout texte de moins de 18,66 px — or ce gris sert surtout aux petits libellés. Valeur retenue : 4,97:1 sur blanc, 4,51:1 sur la surface crème, en gardant la même teinte légèrement bleutée. */ --isdr-muted: #686F75; /* mentions discrètes (AA) */ --isdr-muted-fort: #686F75; /* alias conservé */ /* Accents lisibles (contraste AA vérifié dans les deux thèmes) */ --accent: #1B6B3A; /* liens, icônes, texte vert */ --accent-hover: #104927; --accent-fill: #1B6B3A; /* fond des boutons pleins */ --gold-text: #8A6508; /* or lisible comme texte */ --gold-deco: #B8860B; /* or décoratif (filets) */ /* Teintes douces */ --isdr-green-soft: #E8F2EC; --isdr-gold-soft: #FBF3DE; /* Bordures et ombres */ --isdr-line: #E2E5E8; /* filets décoratifs */ --line-field: #8B9297; /* contour des champs (AA) */ --isdr-shadow: 0 2px 4px rgba(20,24,28,.04), 0 8px 24px rgba(20,24,28,.07); --isdr-shadow-lg: 0 12px 40px rgba(20,24,28,.14); /* Éléments posés sur une image */ --badge-bg: rgba(255,255,255,.95); --badge-fg: #104927; --banner-border: #F0E2BC; /* Pastilles d'état */ --prio-urgente-bg: #FBE9E7; --prio-urgente-fg: #A02E1F; --prio-importante-bg:#FBF3DE; --prio-importante-fg:#7C5E04; --prio-normale-bg: #E8F2EC; --prio-normale-fg: #104927; --doc-pdf-bg: #FCE9E9; --doc-pdf-fg: #C0392B; --doc-doc-bg: #E8F0FB; --doc-doc-fg: #2B579A; --doc-xls-bg: #E6F4EC; --doc-xls-fg: #1D7044; /* --------------------------------------------------------------- Système --------------------------------------------------------------- */ --isdr-radius: 16px; --isdr-radius-sm: 12px; --isdr-transition: .25s cubic-bezier(.4,0,.2,1); /* Surcharges Bootstrap */ --bs-primary: #1B6B3A; --bs-primary-rgb: 27,107,58; --bs-body-bg: #FFFFFF; --bs-body-color: #51585D; --bs-body-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --bs-link-color: #1B6B3A; --bs-link-hover-color: #104927; --bs-border-color: #E2E5E8; /* Bootstrap met un anneau de focus bleu par défaut : on le passe au vert */ --bs-focus-ring-color: rgba(27,107,58,.25); } /* ===================================================================== THÈME SOMBRE Activé par l'attribut data-theme="dark" sur (voir js/theme.js). Seuls les jetons changent : aucune règle de mise en page n'est dupliquée. ===================================================================== */ [data-theme="dark"] { color-scheme: dark; --page-bg: #111315; --surface: #191C1E; --surface-2: #151719; --surface-3: #202426; --isdr-cream: #151719; --isdr-white: #191C1E; --isdr-ink: #E8EAEC; --isdr-body: #B3B9BE; /* #8C9299 auparavant : 3,98:1 sur les surfaces sombres les plus claires (topbar, méga-menu), sous le seuil AA. */ --isdr-muted: #9BA1A7; --isdr-muted-fort: #9BA1A7; --accent: #5FC08D; --accent-hover: #86D3AA; --accent-fill: #20794A; --gold-text: #E0B84A; --gold-deco: #D4A72C; --isdr-green-soft: #16301F; --isdr-gold-soft: #2B2415; --isdr-line: #2A2E32; --line-field: #646B71; --isdr-shadow: 0 2px 4px rgba(0,0,0,.30), 0 8px 24px rgba(0,0,0,.38); --isdr-shadow-lg: 0 12px 40px rgba(0,0,0,.50); --badge-bg: rgba(17,19,21,.90); --badge-fg: #9FDCBB; --banner-border: #3A3016; --prio-urgente-bg: #3A1C18; --prio-urgente-fg: #F4A79A; --prio-importante-bg:#33290F; --prio-importante-fg:#E8C76A; --prio-normale-bg: #16301F; --prio-normale-fg: #8FD4AC; --doc-pdf-bg: #3A1C1C; --doc-pdf-fg: #F09A90; --doc-doc-bg: #1B2738; --doc-doc-fg: #93B8E8; --doc-xls-bg: #15301F; --doc-xls-fg: #7FD3A4; --bs-body-bg: #111315; --bs-body-color: #B3B9BE; --bs-link-color: #5FC08D; --bs-link-hover-color: #86D3AA; --bs-border-color: #2A2E32; --bs-focus-ring-color: rgba(95,192,141,.30); } /* --------------------------------------------------------------------- Base --------------------------------------------------------------------- */ html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { font-family: var(--bs-body-font-family); color: var(--isdr-body); background: var(--page-bg); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1, h2, h3, h4, h5, h6, .font-display { font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif; color: var(--isdr-ink); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; } h1 { font-size: clamp(2rem, 4vw, 3rem); } h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); } h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); } a { text-decoration: none; transition: color var(--isdr-transition); } ::selection { background: var(--accent-fill); color: #fff; } img { max-width: 100%; height: auto; } /* Accessibilité : focus visible */ a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(27,107,58,.35); outline-offset: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 2000; background: var(--isdr-green); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } /* --------------------------------------------------------------------- Utilitaires de marque --------------------------------------------------------------------- */ .text-isdr { color: var(--accent) !important; } .text-gold { color: var(--gold-text) !important; } .bg-isdr { background-color: var(--isdr-green) !important; } .bg-isdr-dark { background-color: var(--isdr-green-dark) !important; } .bg-isdr-deep { background-color: var(--isdr-green-deep) !important; } .bg-isdr-soft { background-color: var(--surface-2) !important; } .bg-cream { background-color: var(--surface-2) !important; } .bg-gold-soft { background-color: var(--isdr-gold-soft) !important; } .border-isdr { border-color: var(--isdr-green) !important; } .section { padding: clamp(4rem, 8vw, 7rem) 0; } .section-sm { padding: clamp(2.75rem, 5.5vw, 4.5rem) 0; } /* Titre de section — surtitre discret, titre serré, sous-titre en mesure étroite */ .section-head { max-width: 740px; margin-bottom: 3.5rem; } .section-head.center { margin-left: auto; margin-right: auto; text-align: center; } .eyebrow { display: block; font-family: var(--bs-body-font-family); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--isdr-muted); margin-bottom: .9rem; } .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.14; letter-spacing: -.022em; margin-bottom: 0; } .section-head p.lead { color: var(--isdr-muted); font-size: 1rem; line-height: 1.7; max-width: 580px; margin: 1.1rem 0 0; } .section-head.center p.lead { margin-left: auto; margin-right: auto; } /* --------------------------------------------------------------------- Boutons --------------------------------------------------------------------- */ .btn { font-weight: 600; border-radius: 999px; padding: .7rem 1.6rem; transition: all var(--isdr-transition); border-width: 2px; font-size: .95rem; } .btn-isdr { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; box-shadow: 0 4px 14px rgba(27,107,58,.22); } .btn-isdr:hover, .btn-isdr:focus { background: var(--isdr-green-dark); border-color: var(--isdr-green-dark); color: #fff; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(27,107,58,.3); } .btn-outline-isdr { border-color: var(--accent); color: var(--accent); background: transparent; } .btn-outline-isdr:hover { background: var(--accent-fill); color: #fff; transform: translateY(-2px); } .btn-gold { background: var(--gold-deco); border-color: var(--gold-deco); color: #16211C; } .btn-gold:hover { background: var(--isdr-gold-light); border-color: var(--isdr-gold-light); color: #16211C; transform: translateY(-2px); } .btn-light-outline { border-color: rgba(255,255,255,.7); color: #fff; } .btn-light-outline:hover { background: #fff; color: var(--isdr-green-dark); border-color: #fff; } .btn-lg { padding: .9rem 2rem; font-size: 1rem; } .btn-sm { padding: .45rem 1.1rem; font-size: .85rem; } /* Lien fléché */ .link-arrow { display: inline-flex; align-items: center; gap: .45rem; color: var(--accent); font-weight: 600; font-size: .92rem; } .link-arrow i { transition: transform var(--isdr-transition); } .link-arrow:hover { color: var(--gold-text); } .link-arrow:hover i { transform: translateX(4px); } /* --------------------------------------------------------------------- Barre supérieure + navigation --------------------------------------------------------------------- */ .topbar { background: var(--surface-2); color: var(--isdr-muted); border-bottom: 1px solid var(--isdr-line); font-size: .82rem; padding: .45rem 0; } .topbar a { color: var(--isdr-body); } .topbar a:hover { color: var(--accent); } .topbar i { color: var(--accent); } .topbar .sep { opacity: .35; margin: 0 .75rem; } .navbar-isdr { background: var(--surface); box-shadow: 0 1px 0 var(--isdr-line); padding: .65rem 0; transition: all var(--isdr-transition); } .navbar-isdr.scrolled { box-shadow: 0 4px 24px rgba(16,73,39,.1); padding: .4rem 0; } .navbar-brand { display: flex; align-items: center; gap: .8rem; } .navbar-brand .logo-mark { width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0; background: linear-gradient(135deg, var(--isdr-green), var(--isdr-green-light)); color: #fff; display: grid; place-items: center; overflow: hidden; font-family: 'Source Serif 4', serif; font-weight: 700; font-size: .82rem; letter-spacing: -.03em; } .navbar-brand img.logo-img { width: 48px; height: 48px; object-fit: contain; border-radius: 10px; } .navbar-brand .brand-text { line-height: 1.15; } .navbar-brand .brand-name { font-family: 'Source Serif 4', serif; font-weight: 700; font-size: 1.15rem; color: var(--accent); display: block; } .navbar-brand .brand-sub { font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--isdr-muted); display: block; } /* Liens en pastille : le fond apparaît au survol, transition courte (150 ms) */ .navbar-isdr .navbar-nav .nav-link { color: var(--isdr-body); font-weight: 500; font-size: .9rem; padding: .42rem .85rem; border-radius: 999px; position: relative; display: inline-flex; align-items: center; gap: .4rem; transition: color .15s cubic-bezier(.4,0,.2,1), background-color .15s cubic-bezier(.4,0,.2,1); } .navbar-isdr .navbar-nav .nav-link:hover { color: var(--isdr-ink); background: var(--surface-2); } .navbar-isdr .navbar-nav .nav-link.active { color: var(--accent); font-weight: 600; background: var(--isdr-green-soft); } .navbar-isdr .navbar-nav .nav-item.show > .nav-link { color: var(--isdr-ink); background: var(--surface-2); } /* Bootstrap code un anneau bleu en dur sur .nav-link : on l'aligne sur le vert */ .navbar-isdr .navbar-nav .nav-link:focus-visible { box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); outline: none; } /* Le chevron pivote quand le panneau est ouvert */ .navbar-isdr .dropdown-toggle::after { transition: transform .2s cubic-bezier(.4,0,.2,1); margin-left: .1rem; } .navbar-isdr .nav-item.show > .dropdown-toggle::after { transform: rotate(180deg); } .navbar-toggler { border: none; padding: .4rem .6rem; } .navbar-toggler:focus { box-shadow: none; } .dropdown-menu { background: var(--surface); border: 1px solid var(--isdr-line); border-radius: var(--isdr-radius); box-shadow: 0 12px 34px rgba(20,24,28,.10); padding: .5rem; font-size: .92rem; } [data-theme="dark"] .dropdown-menu { box-shadow: 0 12px 34px rgba(0,0,0,.55); } .dropdown-item { border-radius: 10px; padding: .5rem .75rem; } .dropdown-item:hover { background: var(--surface-2); color: var(--accent); } /* --------------------------------------------------------------------- Animation d'ouverture des menus Le panneau apparaît en fondu, avec une très légère montée. --------------------------------------------------------------------- */ @keyframes menuApparait { from { opacity: 0; transform: translateY(-8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } } .navbar-isdr .dropdown-menu.show { animation: menuApparait .18s cubic-bezier(.4,0,.2,1) both; } /* --------------------------------------------------------------------- Méga-menu : panneau large, deux colonnes, entrées à pastille --------------------------------------------------------------------- */ .mega-menu { padding: 1.25rem; border: 1px solid var(--isdr-line); } .mega-grid { display: grid; grid-template-columns: repeat(2, minmax(260px, 1fr)); gap: 1.5rem 2rem; } .mega-grid-1 { grid-template-columns: minmax(280px, 1fr); } .mega-title { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--isdr-muted); margin: 0 0 .75rem .6rem; } .mega-item { display: flex; align-items: flex-start; gap: .75rem; padding: .55rem .7rem; border-radius: 12px; /* Un filet à gauche remplace l'ancienne pastille d'icône : il marque l'entrée survolée sans ajouter de pictogramme. */ border-left: 2px solid transparent; transition: background-color .15s cubic-bezier(.4,0,.2,1), border-color .15s cubic-bezier(.4,0,.2,1); } .mega-item:hover { background: var(--surface-2); border-left-color: var(--accent); } .mega-text { display: flex; flex-direction: column; line-height: 1.35; min-width: 0; } .mega-text strong { font-size: .88rem; font-weight: 600; color: var(--isdr-ink); } .mega-item:hover .mega-text strong { color: var(--accent); } .mega-text small { font-size: .78rem; color: var(--isdr-muted); } /* Les entrées entrent en cascade, comme sur le menu d'origine */ .navbar-isdr .dropdown-menu.show .mega-item { animation: menuApparait .24s cubic-bezier(.4,0,.2,1) both; } .navbar-isdr .dropdown-menu.show .mega-col:nth-child(1) .mega-item:nth-child(2) { animation-delay: .02s; } .navbar-isdr .dropdown-menu.show .mega-col .mega-item:nth-child(3) { animation-delay: .04s; } .navbar-isdr .dropdown-menu.show .mega-col .mega-item:nth-child(4) { animation-delay: .06s; } .navbar-isdr .dropdown-menu.show .mega-col .mega-item:nth-child(5) { animation-delay: .08s; } .navbar-isdr .dropdown-menu.show .mega-col .mega-item:nth-child(6) { animation-delay: .10s; } .navbar-isdr .dropdown-menu.show .mega-col .mega-item:nth-child(7) { animation-delay: .12s; } /* --------------------------------------------------------------------- Hero / carrousel --------------------------------------------------------------------- */ .hero { position: relative; } .hero .carousel-item { height: clamp(460px, 72vh, 680px); } .hero .slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--isdr-green-deep); } .hero .slide-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(10,50,25,.92) 0%, rgba(16,73,39,.82) 45%, rgba(27,107,58,.55) 100%); } .hero .slide-inner { position: relative; z-index: 2; height: 100%; display: flex; align-items: center; } .hero h1 { color: #fff; font-size: clamp(2rem, 4.5vw, 3.4rem); margin-bottom: 1.1rem; } .hero p.slide-sub { color: rgba(255,255,255,.9); font-size: clamp(1rem, 1.6vw, 1.18rem); max-width: 620px; margin-bottom: 2rem; } .hero .carousel-indicators { margin-bottom: 1.75rem; } .hero .carousel-indicators [data-bs-target] { width: 32px; height: 4px; border-radius: 4px; background: rgba(255,255,255,.45); border: none; opacity: 1; } .hero .carousel-indicators .active { background: var(--isdr-gold-light); width: 48px; } .hero .carousel-control-prev, .hero .carousel-control-next { width: 6%; opacity: .6; } .hero .carousel-control-prev:hover, .hero .carousel-control-next:hover { opacity: 1; } /* Bandeau d'annonce urgente */ .alert-banner { background: var(--isdr-gold-soft); border-bottom: 1px solid var(--banner-border); padding: .7rem 0; font-size: .9rem; } .alert-banner .badge-urgent { background: #9c2c2c; color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 4px; } /* --------------------------------------------------------------------- Page d'en-tête (pages intérieures) --------------------------------------------------------------------- */ .page-header { position: relative; padding: clamp(2.25rem, 4.5vw, 3.5rem) 0 clamp(2rem, 4vw, 3rem); background: var(--surface-2); border-bottom: 1px solid var(--isdr-line); overflow: hidden; } .page-header h1 { color: var(--isdr-ink); margin-bottom: .6rem; position: relative; } .page-header p { color: var(--isdr-body); max-width: 640px; margin-bottom: 0; position: relative; } .page-header .breadcrumb { margin-bottom: .9rem; position: relative; } .page-header .breadcrumb-item, .page-header .breadcrumb-item a { color: var(--isdr-muted); font-size: .85rem; } .page-header .breadcrumb-item a:hover { color: var(--accent); } .page-header .breadcrumb-item.active { color: var(--accent); } .page-header .breadcrumb-item + .breadcrumb-item::before { color: var(--isdr-muted); } /* --------------------------------------------------------------------- Cartes --------------------------------------------------------------------- */ .card-isdr { background: transparent; border: 1px solid var(--isdr-line); border-radius: var(--isdr-radius); overflow: hidden; transition: border-color var(--isdr-transition), background-color var(--isdr-transition); display: flex; flex-direction: column; } .card-isdr:hover { border-color: var(--accent); background: var(--surface-2); } .card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--surface-2); } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .card-isdr:hover .card-media img { transform: scale(1.04); } .card-media .cat-badge { position: absolute; top: .85rem; left: .85rem; z-index: 2; background: var(--badge-bg); color: var(--badge-fg); font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .3rem .7rem; border-radius: 6px; } .card-body-isdr { padding: 1.5rem; display: flex; flex-direction: column; flex: 1; } .card-body-isdr h3, .card-body-isdr h4 { font-size: 1.08rem; line-height: 1.35; letter-spacing: -.01em; margin-bottom: .55rem; } .card-body-isdr h3 a, .card-body-isdr h4 a { color: var(--isdr-ink); } .card-body-isdr h3 a:hover, .card-body-isdr h4 a:hover { color: var(--accent); } .card-body-isdr p { font-size: .9rem; line-height: 1.65; color: var(--isdr-muted); margin-bottom: 1rem; } .card-meta { font-size: .8rem; color: var(--isdr-muted); display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; } .card-meta i { color: var(--gold-deco); margin-right: .3rem; } .card-foot { margin-top: auto; padding-top: .5rem; } /* Carte formation */ /* Pastille d'icône : petit carré arrondi discret, à la place des gros blocs pleins */ .icon-chip, .card-formation .icon-box, .card-dep .icon-box, .atout-item .ico, .contact-item .ico { width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--isdr-line); color: var(--accent); font-size: .92rem; flex-shrink: 0; transition: border-color var(--isdr-transition), color var(--isdr-transition); } .card-formation .icon-box { margin-bottom: 1.1rem; } .card-isdr:hover .icon-box { border-color: var(--accent); } .tag-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: 1rem; } .tag { background: var(--surface-2); border: 1px solid var(--isdr-line); color: var(--isdr-body); font-size: .75rem; padding: .25rem .65rem; border-radius: 999px; } .tag i { color: var(--gold-deco); margin-right: .3rem; } /* Carte département */ .card-dep { padding: 1.5rem; } .card-dep .icon-box { margin-bottom: 1.1rem; } /* Carte événement */ .event-date { flex-shrink: 0; width: 72px; text-align: center; border-radius: 12px; overflow: hidden; border: 1px solid var(--isdr-line); background: var(--surface); } .event-date .d { display: block; font-family: 'Source Serif 4', serif; font-size: 1.7rem; font-weight: 700; color: var(--accent); line-height: 1; padding: .55rem 0 .3rem; } .event-date .m { display: block; background: var(--isdr-green); color: #fff; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: .25rem 0; font-weight: 600; } /* Carte document */ .doc-row { display: flex; align-items: center; gap: 1.1rem; padding: 1.25rem 1.4rem; border: 1px solid var(--isdr-line); border-radius: var(--isdr-radius); background: transparent; transition: border-color var(--isdr-transition), background-color var(--isdr-transition); height: 100%; } .doc-row:hover { border-color: var(--accent); background: var(--surface-2); } .doc-icon { width: 48px; height: 48px; flex-shrink: 0; border-radius: 10px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--isdr-line); color: var(--gold-text); font-size: 1.05rem; } .doc-icon.pdf { background: var(--doc-pdf-bg); color: var(--doc-pdf-fg); } .doc-icon.doc { background: var(--doc-doc-bg); color: var(--doc-doc-fg); } .doc-icon.xls { background: var(--doc-xls-bg); color: var(--doc-xls-fg); } /* --------------------------------------------------------------------- Chiffres clés --------------------------------------------------------------------- */ .stats-band { background: var(--surface-2); color: var(--isdr-body); position: relative; border-top: 1px solid var(--isdr-line); border-bottom: 1px solid var(--isdr-line); } .stat-item { position: relative; text-align: center; padding: 1rem .5rem; } .stat-item + .stat-item {} .stat-item .ico { color: var(--isdr-muted); font-size: 1.3rem; } .stat-item .num { font-family: 'Source Serif 4', serif; font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 700; color: var(--accent); line-height: 1; display: block; } .stat-item .num .plus { font-size: .65em; vertical-align: super; color: var(--gold-text); } .stat-item .lbl { color: var(--isdr-muted); font-size: .84rem; margin-top: .6rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } /* --------------------------------------------------------------------- Pourquoi nous choisir --------------------------------------------------------------------- */ .atout-item { display: flex; gap: 1.1rem; } .atout-item .ico { color: var(--gold-text); } .atout-item h4 { font-size: 1rem; letter-spacing: -.01em; margin-bottom: .35rem; } .atout-item p { font-size: .9rem; line-height: 1.65; color: var(--isdr-muted); margin-bottom: 0; } /* --------------------------------------------------------------------- Témoignages --------------------------------------------------------------------- */ .testimonial { background: transparent; border: 1px solid var(--isdr-line); border-radius: var(--isdr-radius); padding: 1.5rem; height: 100%; position: relative; } .testimonial::before { content: '\201C'; font-family: 'Source Serif 4', serif; font-size: 4.5rem; color: var(--isdr-green-soft); position: absolute; top: .25rem; right: 1.25rem; line-height: 1; } .testimonial .quote { font-size: .95rem; font-style: italic; color: var(--isdr-body); position: relative; } .testimonial .who { display: flex; align-items: center; gap: .8rem; margin-top: 1.25rem; } .avatar-initials { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-fill); color: #fff; font-weight: 700; font-size: .95rem; flex-shrink: 0; } .avatar-initials.gold { background: var(--gold-deco); color: #16211C; } .testimonial .who strong { display: block; color: var(--isdr-ink); font-size: .95rem; } .testimonial .who span { font-size: .82rem; color: var(--isdr-muted); } .stars { color: var(--gold-text); font-size: .8rem; margin-bottom: .75rem; } /* --------------------------------------------------------------------- Appel à l'action --------------------------------------------------------------------- */ .cta-band { background: var(--isdr-green-soft); border: 1px solid var(--isdr-line); border-left: 4px solid var(--isdr-green); color: var(--isdr-body); border-radius: var(--isdr-radius); padding: clamp(2rem, 4.5vw, 3rem); position: relative; overflow: hidden; } .cta-band h2 { color: var(--isdr-ink); position: relative; } .cta-band p { color: var(--isdr-body); position: relative; margin-bottom: 0; } /* --------------------------------------------------------------------- Contenu riche (articles) --------------------------------------------------------------------- */ .rich-text { font-size: 1.02rem; line-height: 1.85; color: var(--isdr-body); } .rich-text > *:first-child { margin-top: 0; } .rich-text h2 { font-size: 1.6rem; margin: 2.25rem 0 .9rem; } .rich-text h3 { font-size: 1.3rem; margin: 2rem 0 .8rem; } .rich-text h4 { font-size: 1.1rem; margin: 1.6rem 0 .6rem; } .rich-text p { margin-bottom: 1.15rem; } .rich-text ul, .rich-text ol { margin-bottom: 1.15rem; padding-left: 1.3rem; } .rich-text li { margin-bottom: .5rem; } .rich-text ul { list-style: none; padding-left: 0; } .rich-text ul li { position: relative; padding-left: 1.6rem; } .rich-text ul li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: .15rem; color: var(--accent); font-size: .78rem; } .rich-text ol li::marker { color: var(--accent); font-weight: 700; } .rich-text blockquote { border-left: 4px solid var(--gold-deco); background: var(--surface-2); padding: 1.1rem 1.4rem; margin: 1.6rem 0; border-radius: 0 8px 8px 0; font-style: italic; color: var(--isdr-ink); } .rich-text img { border-radius: var(--isdr-radius-sm); margin: 1.25rem 0; } .rich-text a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .rich-text table { width: 100%; margin: 1.5rem 0; border-collapse: collapse; font-size: .95rem; } .rich-text th, .rich-text td { border: 1px solid var(--isdr-line); padding: .6rem .8rem; } .rich-text th { background: var(--isdr-green-soft); color: var(--isdr-ink); text-align: left; } /* --------------------------------------------------------------------- Barre latérale --------------------------------------------------------------------- */ .sidebar-card { background: transparent; border: 1px solid var(--isdr-line); border-radius: var(--isdr-radius); padding: 1.5rem; margin-bottom: 1.5rem; } .sidebar-card h4 { font-size: 1.05rem; margin-bottom: 1.1rem; padding-bottom: .7rem; border-bottom: 2px solid var(--gold-deco); display: inline-block; } .sidebar-list { list-style: none; padding: 0; margin: 0; } .sidebar-list li { padding: .55rem 0; border-bottom: 1px dashed var(--isdr-line); } .sidebar-list li:last-child { border-bottom: none; } .sidebar-list a { color: var(--isdr-ink); font-size: .92rem; display: flex; justify-content: space-between; gap: .5rem; } .sidebar-list a:hover { color: var(--accent); } .sidebar-list .count { color: var(--isdr-muted); font-size: .8rem; } .mini-post { display: flex; gap: .85rem; padding: .7rem 0; border-bottom: 1px dashed var(--isdr-line); } .mini-post:last-child { border-bottom: none; } .mini-post img { width: 68px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: var(--surface-2); } .mini-post strong { font-size: .88rem; color: var(--isdr-ink); font-weight: 600; display: block; line-height: 1.4; } .mini-post a:hover strong { color: var(--accent); } .mini-post span { font-size: .76rem; color: var(--isdr-muted); } /* --------------------------------------------------------------------- Galerie --------------------------------------------------------------------- */ .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; } .gallery-item { position: relative; aspect-ratio: 4/3; border-radius: var(--isdr-radius-sm); overflow: hidden; cursor: pointer; background: var(--surface-2); } .gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .gallery-item:hover img { transform: scale(1.08); } .gallery-item .overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,50,25,.85), transparent 55%); opacity: 0; transition: opacity var(--isdr-transition); display: flex; align-items: flex-end; padding: 1rem; color: #fff; font-size: .85rem; } .gallery-item:hover .overlay { opacity: 1; } .gallery-item .zoom-ico { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.6); width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.95); color: #104927; display: grid; place-items: center; opacity: 0; transition: all var(--isdr-transition); } .gallery-item:hover .zoom-ico { opacity: 1; transform: translate(-50%,-50%) scale(1); } /* Lightbox */ .lightbox { position: fixed; inset: 0; z-index: 3000; background: rgba(8,20,13,.95); display: none; align-items: center; justify-content: center; padding: 2rem; } .lightbox.open { display: flex; } .lightbox img { max-width: 92vw; max-height: 82vh; border-radius: 8px; } .lightbox .lb-caption { position: absolute; bottom: 2rem; color: rgba(255,255,255,.85); font-size: .9rem; text-align: center; width: 100%; } .lightbox .lb-close, .lightbox .lb-prev, .lightbox .lb-next { position: absolute; background: rgba(255,255,255,.12); border: none; color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size: 1.1rem; cursor: pointer; transition: background var(--isdr-transition); } .lightbox .lb-close:hover, .lightbox .lb-prev:hover, .lightbox .lb-next:hover { background: rgba(255,255,255,.28); } .lightbox .lb-close { top: 1.5rem; right: 1.5rem; } .lightbox .lb-prev { left: 1.5rem; top: 50%; transform: translateY(-50%); } .lightbox .lb-next { right: 1.5rem; top: 50%; transform: translateY(-50%); } /* --------------------------------------------------------------------- Formulaires --------------------------------------------------------------------- */ .form-control, .form-select { border: 1px solid var(--line-field); border-radius: var(--isdr-radius-sm); padding: .7rem .95rem; font-size: .95rem; background: var(--surface-3); color: var(--isdr-ink); transition: all var(--isdr-transition); } .form-control:focus, .form-select:focus { border-color: var(--accent); background: var(--surface-3); color: var(--isdr-ink); box-shadow: 0 0 0 .2rem rgba(46,139,87,.25); } .form-label { font-weight: 600; font-size: .88rem; color: var(--isdr-ink); margin-bottom: .4rem; } .form-label .req { color: #c0392b; } .input-group-text { background: var(--surface-2); border-color: var(--line-field); color: var(--isdr-muted); } .honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; } /* --------------------------------------------------------------------- Contact --------------------------------------------------------------------- */ .contact-item { display: flex; gap: 1rem; margin-bottom: 1.5rem; } .contact-item .ico { color: var(--accent); } .contact-item strong { display: block; color: var(--isdr-ink); font-size: .93rem; margin-bottom: .1rem; } .contact-item span, .contact-item a { font-size: .92rem; color: var(--isdr-body); } .contact-item a:hover { color: var(--accent); } .map-wrap { border-radius: var(--isdr-radius); overflow: hidden; border: 1px solid var(--isdr-line); background: var(--surface-2); } .map-wrap iframe { display: block; width: 100%; height: 420px; border: 0; } /* --------------------------------------------------------------------- Annonces --------------------------------------------------------------------- */ .annonce-card { border-left: 3px solid var(--accent); background: transparent; border-radius: var(--isdr-radius); border-top: 1px solid var(--isdr-line); border-right: 1px solid var(--isdr-line); border-bottom: 1px solid var(--isdr-line); padding: 1.4rem 1.5rem; transition: border-color var(--isdr-transition), background-color var(--isdr-transition); } /* Hauteur égale uniquement dans la grille de la page Annonces, où chaque carte est seule dans sa colonne. Sur l'accueil, plusieurs annonces sont empilées dans la même colonne : elles doivent garder leur hauteur propre. */ .annonce-card:only-child { height: 100%; } .annonce-card:hover { background: var(--surface-2); } .annonce-card.urgente { border-left-color: var(--doc-pdf-fg); } .annonce-card.importante { border-left-color: var(--gold-deco); } .prio-badge { font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .22rem .6rem; border-radius: 4px; } .prio-urgente { background: var(--prio-urgente-bg); color: var(--prio-urgente-fg); } .prio-importante { background: var(--prio-importante-bg); color: var(--prio-importante-fg); } .prio-normale { background: var(--prio-normale-bg); color: var(--prio-normale-fg); } /* --------------------------------------------------------------------- Pagination --------------------------------------------------------------------- */ .pagination .page-link { color: var(--isdr-ink); background: var(--surface); border-color: var(--isdr-line); border-radius: 10px !important; margin: 0 .2rem; min-width: 42px; text-align: center; font-size: .9rem; padding: .55rem .7rem; } .pagination .page-link:hover { background: var(--isdr-green-soft); color: var(--accent); border-color: var(--isdr-green-soft); } .pagination .page-item.active .page-link { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; } /* --------------------------------------------------------------------- Pied de page --------------------------------------------------------------------- */ .footer { background: var(--isdr-green-deep); color: rgba(255,255,255,.72); padding-top: 4rem; } .footer h5 { color: #fff; font-size: 1rem; margin-bottom: 1.25rem; font-family: var(--bs-body-font-family); font-weight: 700; letter-spacing: .02em; position: relative; padding-bottom: .6rem; } .footer h5::after { content: ''; position: absolute; left: 0; bottom: 0; width: 34px; height: 2px; background: var(--isdr-gold); } .footer p, .footer li { font-size: .9rem; } .footer a { color: rgba(255,255,255,.72); } .footer a:hover { color: var(--isdr-gold-light); } .footer ul { list-style: none; padding: 0; } .footer ul li { margin-bottom: .6rem; } .footer .brand-footer { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.25rem; } .footer .brand-footer .logo-mark { width: 52px; height: 52px; border-radius: 12px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #fff; display: grid; place-items: center; font-family: 'Source Serif 4', serif; font-weight: 700; } .footer .brand-footer img { width: 52px; height: 52px; object-fit: contain; border-radius: 10px; background:#fff; padding:4px; } .footer .brand-footer strong { color: #fff; font-family: 'Source Serif 4', serif; font-size: 1.15rem; } .social-links { display: flex; gap: .6rem; margin-top: 1.25rem; } .social-links a { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); color: rgba(255,255,255,.8); font-size: .95rem; transition: all var(--isdr-transition); } .social-links a:hover { background: var(--isdr-gold); color: #fff; transform: translateY(-3px); } .footer-contact li { display: flex; gap: .7rem; align-items: flex-start; } .footer-contact i { color: var(--isdr-gold); margin-top: .3rem; width: 16px; flex-shrink: 0; } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); margin-top: 3rem; padding: 1.4rem 0; font-size: .85rem; color: rgba(255,255,255,.55); } .footer-bottom a { color: rgba(255,255,255,.7); } /* Bouton retour en haut */ .back-to-top { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 1030; width: 46px; height: 46px; border-radius: 50%; border: none; background: var(--accent-fill); color: #fff; box-shadow: var(--isdr-shadow); opacity: 0; visibility: hidden; transition: all var(--isdr-transition); cursor: pointer; } .back-to-top.show { opacity: 1; visibility: visible; } .back-to-top:hover { background: var(--accent-hover); color: #0C1410; transform: translateY(-3px); } /* --------------------------------------------------------------------- Animations légères --------------------------------------------------------------------- */ /* Le contenu reste visible si JavaScript est désactivé ou échoue : l'opacité n'est mise à 0 que lorsque la classe .js est posée par le script. */ .js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; } .js .reveal.visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } } /* --------------------------------------------------------------------- Pages d'erreur --------------------------------------------------------------------- */ .error-page { padding: clamp(4rem, 10vw, 7rem) 0; text-align: center; } .error-code { font-family: 'Source Serif 4', serif; font-size: clamp(5rem, 14vw, 9rem); font-weight: 700; line-height: 1; background: linear-gradient(135deg, var(--accent), var(--gold-text)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* --------------------------------------------------------------------- Responsive --------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* Le méga-menu redevient une simple liste repliable dans le menu mobile */ .navbar-isdr .dropdown-menu { border: none; box-shadow: none; background: transparent; padding: .2rem 0 .4rem .4rem; animation: none; } .mega-menu { padding: .2rem 0 .4rem .4rem; } .mega-grid, .mega-grid-1 { grid-template-columns: 1fr; gap: .6rem; } .mega-title { margin-left: .5rem; margin-bottom: .4rem; } .mega-item { padding: .45rem .5rem; } .mega-text small { display: none; } .navbar-isdr .dropdown-menu.show .mega-item { animation: none; } .navbar-isdr .navbar-nav .nav-link { border-radius: 10px; padding: .55rem .75rem; } .navbar-isdr .navbar-collapse { background: var(--surface); margin-top: .75rem; padding: .75rem; border-radius: var(--isdr-radius-sm); border: 1px solid var(--isdr-line); max-height: 75vh; overflow-y: auto; } .navbar-isdr .navbar-nav .nav-link.active::after { display: none; } .navbar-isdr .navbar-nav .nav-link.active { background: var(--isdr-green-soft); } .hero .carousel-item { height: auto; min-height: 440px; padding: 4rem 0 5rem; } .hero .slide-inner { padding: 1rem 0; } } @media (max-width: 767.98px) { .section { padding: 3rem 0; } .section-head { margin-bottom: 2rem; } .navbar-brand .brand-name { font-size: 1rem; } .navbar-brand .brand-sub { font-size: .62rem; } .navbar-brand .logo-mark, .navbar-brand img.logo-img { width: 42px; height: 42px; } .stat-item { padding: .75rem .25rem; } .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; } .btn { padding: .65rem 1.3rem; } .map-wrap iframe { height: 300px; } .lightbox .lb-prev { left: .5rem; } .lightbox .lb-next { right: .5rem; } } @media print { .navbar-isdr, .topbar, .footer, .back-to-top, .btn, .breadcrumb { display: none !important; } body { color: #000; } a { color: #000; text-decoration: none; } } /* Utilitaire : permet la troncature du texte dans un conteneur flex */ .min-width-0 { min-width: 0; } /* ===================================================================== BOUTON DE BASCULE CLAIR / SOMBRE ===================================================================== */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; width: 38px; height: 38px; flex-shrink: 0; border: 1px solid var(--isdr-line); border-radius: 999px; background: var(--surface); color: var(--isdr-body); cursor: pointer; transition: all var(--isdr-transition); font-size: .9rem; padding: 0; } .theme-toggle:hover { background: var(--isdr-green-soft); color: var(--accent); border-color: var(--accent); } /* L'icône affichée dépend du thème actif */ .theme-toggle .icon-dark { display: none; } [data-theme="dark"] .theme-toggle .icon-dark { display: inline; } [data-theme="dark"] .theme-toggle .icon-light { display: none; } /* Variante compacte dans la barre supérieure */ .topbar .theme-toggle { width: auto; height: auto; padding: .1rem .5rem; font-size: .78rem; background: transparent; border-color: var(--isdr-line); color: var(--isdr-body); border-radius: 6px; } .topbar .theme-toggle:hover { background: var(--surface); color: var(--accent); border-color: var(--accent); } .topbar .theme-toggle i { color: inherit; } /* Sur mobile, le bouton prend toute la largeur dans le menu déroulant */ @media (max-width: 991.98px) { .navbar-isdr .theme-toggle { width: 100%; border-radius: var(--isdr-radius-sm); height: 42px; } .navbar-isdr .theme-toggle::after { content: 'Changer de thème'; font-size: .9rem; font-weight: 600; } } /* ===================================================================== AJUSTEMENTS PROPRES AU THÈME SOMBRE (tout le reste découle automatiquement des jetons de couleur) ===================================================================== */ /* Le voile posé sur les images du diaporama est assombri pour rester lisible */ [data-theme="dark"] .hero .slide-bg::after { background: linear-gradient(105deg, rgba(6,14,10,.95) 0%, rgba(8,32,18,.90) 45%, rgba(16,73,39,.70) 100%); } /* En thème sombre, la teinte verte de l'appel à l'action reste très discrète */ [data-theme="dark"] .cta-band { background: #17251D; } /* Les visuels sont très légèrement adoucis pour ne pas éblouir sur fond sombre */ [data-theme="dark"] .card-media img, [data-theme="dark"] .gallery-item img { filter: brightness(.92); } [data-theme="dark"] .gallery-item:hover img { filter: brightness(1); } /* La carte OpenStreetMap est inversée puis re-colorée pour s'accorder au thème */ [data-theme="dark"] .map-wrap iframe { filter: invert(.92) hue-rotate(180deg) saturate(.75) brightness(.95); } /* Le pied de page et la barre supérieure restent volontairement vert profond : ils encadrent la page dans les deux thèmes. */ /* Bootstrap : alertes et champs désactivés */ [data-theme="dark"] .alert-light { background: var(--surface-2); border-color: var(--isdr-line); color: var(--isdr-body); } [data-theme="dark"] .form-control:disabled, [data-theme="dark"] .form-control[readonly] { background: var(--surface-2); color: var(--isdr-muted); } [data-theme="dark"] .form-control::placeholder { color: var(--isdr-muted); } /* Transition douce lors du changement de thème (désactivée pendant le chargement) */ .theme-ready body, .theme-ready .card-isdr, .theme-ready .navbar-isdr, .theme-ready .doc-row, .theme-ready .testimonial, .theme-ready .sidebar-card, .theme-ready .annonce-card { transition: background-color .3s ease, border-color .3s ease, color .3s ease; } /* ===================================================================== BANDE DE PARTENAIRES Logos en monochrome, discrets, qui reprennent leur couleur au survol. ===================================================================== */ .partner-strip { padding: clamp(2.5rem, 5vw, 3.5rem) 0; border-bottom: 1px solid var(--isdr-line); } .partner-strip-label { text-align: center; margin-bottom: 1.75rem; font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--isdr-muted); } .partner-logos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.75rem, 5vw, 4rem); } .partner-item { display: inline-flex; align-items: center; justify-content: center; height: 40px; opacity: .55; filter: grayscale(100%); transition: opacity var(--isdr-transition), filter var(--isdr-transition); } .partner-item img { max-height: 40px; width: auto; object-fit: contain; } .partner-name { font-family: 'Source Serif 4', Georgia, serif; font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; color: var(--isdr-body); white-space: nowrap; } a.partner-item:hover { opacity: 1; filter: grayscale(0); } a.partner-item:hover .partner-name { color: var(--accent); } [data-theme="dark"] .partner-item { opacity: .6; filter: grayscale(100%) brightness(1.6); } [data-theme="dark"] a.partner-item:hover { opacity: 1; filter: grayscale(0) brightness(1); } @media (max-width: 575.98px) { .partner-logos { gap: 1.5rem 2rem; } .partner-item, .partner-item img { height: 30px; max-height: 30px; } .partner-name { font-size: .92rem; } } /* ===================================================================== MOT DU DIRECTEUR GÉNÉRAL Portrait nettement plus grand, colonne dimensionnée par le portrait. ===================================================================== */ .dg-bloc { display: grid; grid-template-columns: minmax(200px, 260px) 1fr; gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; } .dg-portrait { margin: 0; text-align: center; } .dg-portrait img, .dg-portrait .dg-initiales { width: 100%; max-width: 260px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center top; display: block; margin: 0 auto; border: 1px solid var(--isdr-line); } .dg-portrait .dg-initiales { display: grid; place-items: center; font-size: clamp(2.5rem, 5vw, 3.75rem); height: auto; } .dg-portrait figcaption { margin-top: 1rem; line-height: 1.4; } .dg-portrait figcaption strong { display: block; font-size: .95rem; color: var(--isdr-ink); font-weight: 600; } .dg-portrait figcaption span { font-size: .84rem; color: var(--isdr-muted); } /* Sur petit écran, le portrait passe au-dessus du texte et reste lisible */ @media (max-width: 767.98px) { .dg-bloc { grid-template-columns: 1fr; gap: 1.5rem; } .dg-portrait img, .dg-portrait .dg-initiales { max-width: 200px; } } /* ===================================================================== ORBITE DES SERVICES — le sigle au centre, les espaces du site en satellites sur deux anneaux qui tournent en sens inverse. Les libellés restent horizontaux grâce à une contre-rotation exacte. ===================================================================== */ :root { --orbite-halo: radial-gradient(circle, rgba(27,107,58,.13) 0%, rgba(27,107,58,.05) 46%, rgba(27,107,58,0) 70%); --orbite-rayon: rgba(27,107,58,.20); --orbite-piste-l: var(--isdr-line); } [data-theme="dark"] { --orbite-halo: radial-gradient(circle, rgba(95,192,141,.17) 0%, rgba(95,192,141,.06) 46%, rgba(95,192,141,0) 70%); --orbite-rayon: rgba(95,192,141,.26); --orbite-piste-l: #2F3439; } .orbite-section .section-head { margin-bottom: 2.2rem; } .orbite-accent { color: var(--accent); background: linear-gradient(95deg, var(--accent) 0%, var(--gold-text) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .orbite-cadre { display: flex; justify-content: center; } .orbite { --taille: clamp(288px, 82vw, 560px); --r1: calc(var(--taille) * .225); --r2: calc(var(--taille) * .425); --chip: clamp(40px, calc(var(--taille) * .115), 62px); position: relative; width: var(--taille); height: var(--taille); margin-inline: auto; } /* --- Décor : halo, rayons, anneaux ---------------------------------- */ .orbite-halo, .orbite-rayons, .orbite-anneau { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none; } .orbite-halo { width: 78%; aspect-ratio: 1; background: var(--orbite-halo); } .orbite-rayons { width: 46%; aspect-ratio: 1; background: repeating-conic-gradient(from 0deg, var(--orbite-rayon) 0deg 1.2deg, transparent 1.2deg 15deg); -webkit-mask-image: radial-gradient(circle, #000 16%, transparent 60%); mask-image: radial-gradient(circle, #000 16%, transparent 60%); opacity: .6; animation: orbiteRayons 140s linear infinite; } .orbite-anneau { border: 1px solid var(--orbite-piste-l); aspect-ratio: 1; } .anneau-1 { width: 45%; } .anneau-2 { width: 85%; } .orbite::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 94%; aspect-ratio: 1; border-radius: 50%; border: 1px dashed var(--orbite-piste-l); opacity: .55; pointer-events: none; } /* --- Cœur ----------------------------------------------------------- */ .orbite-coeur { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(76px, calc(var(--taille) * .205), 118px); aspect-ratio: 1; border-radius: 50%; background: var(--surface); border: 1px solid var(--isdr-line); box-shadow: var(--isdr-shadow); display: grid; place-items: center; z-index: 3; } .orbite-coeur img { width: 62%; height: 62%; object-fit: contain; } .orbite-sigle { font-weight: 700; letter-spacing: .04em; font-size: clamp(.82rem, calc(var(--taille) * .034), 1.15rem); color: var(--accent); } .orbite-coeur::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; border: 1px solid var(--accent); animation: orbitePulse 3.6s cubic-bezier(.3,0,.2,1) infinite; } /* --- Satellites ----------------------------------------------------- */ .orbite-piste { position: absolute; inset: 0; z-index: 2; } .piste-1 { animation: orbiteTourne 54s linear infinite; } .piste-2 { animation: orbiteTourneInv 78s linear infinite; } .orbite-item { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform: rotate(var(--angle)) translateY(calc(-1 * var(--r))); } .piste-1 .orbite-item { --r: var(--r1); } .piste-2 .orbite-item { --r: var(--r2); } /* annule la rotation de départ du satellite … */ .orbite-fixe { position: absolute; transform: rotate(calc(-1 * var(--angle))); } /* … puis celle, continue, de son anneau */ .orbite-contre { position: absolute; } .piste-1 .orbite-contre { animation: orbiteTourneInv 54s linear infinite; } .piste-2 .orbite-contre { animation: orbiteTourne 78s linear infinite; } .orbite-sat { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: clamp(74px, calc(var(--taille) * .195), 104px); display: flex; flex-direction: column; align-items: center; gap: .45rem; text-align: center; text-decoration: none; animation: orbiteEntree .55s cubic-bezier(.34,1.3,.64,1) both; } .orbite-sat .icon-chip { width: var(--chip); height: var(--chip); border-radius: calc(var(--chip) * .3); background: var(--surface); font-size: calc(var(--chip) * .37); box-shadow: var(--isdr-shadow); transition: transform var(--isdr-transition), border-color var(--isdr-transition), color var(--isdr-transition); } .orbite-label { font-size: clamp(.64rem, calc(var(--taille) * .0245), .8rem); font-weight: 500; line-height: 1.2; color: var(--isdr-muted); transition: color var(--isdr-transition); } .orbite-sat:hover .icon-chip, .orbite-sat:focus-visible .icon-chip { border-color: var(--accent); transform: translateY(-3px); } .orbite-sat:hover .orbite-label, .orbite-sat:focus-visible .orbite-label { color: var(--accent); } .orbite-sat:focus-visible { outline: none; } .orbite-sat:focus-visible .icon-chip { box-shadow: 0 0 0 .22rem var(--bs-focus-ring-color); } /* entrée en cascade */ .piste-1 .orbite-item:nth-child(1) .orbite-sat { animation-delay: .05s; } .piste-1 .orbite-item:nth-child(2) .orbite-sat { animation-delay: .11s; } .piste-1 .orbite-item:nth-child(3) .orbite-sat { animation-delay: .17s; } .piste-1 .orbite-item:nth-child(4) .orbite-sat { animation-delay: .23s; } .piste-2 .orbite-item:nth-child(1) .orbite-sat { animation-delay: .29s; } .piste-2 .orbite-item:nth-child(2) .orbite-sat { animation-delay: .35s; } .piste-2 .orbite-item:nth-child(3) .orbite-sat { animation-delay: .41s; } .piste-2 .orbite-item:nth-child(4) .orbite-sat { animation-delay: .47s; } .piste-2 .orbite-item:nth-child(5) .orbite-sat { animation-delay: .53s; } /* on suspend la rotation dès que l'on survole ou tabule dans l'orbite */ .orbite:hover .orbite-piste, .orbite:hover .orbite-contre, .orbite:focus-within .orbite-piste, .orbite:focus-within .orbite-contre { animation-play-state: paused; } /* --- Animations ----------------------------------------------------- */ @keyframes orbiteTourne { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes orbiteTourneInv { from { transform: rotate(0); } to { transform: rotate(-360deg); } } @keyframes orbiteRayons { from { transform: translate(-50%, -50%) rotate(0); } to { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes orbitePulse { 0% { transform: scale(.95); opacity: .5; } 70% { transform: scale(1.18); opacity: 0; } 100% { transform: scale(1.18); opacity: 0; } } @keyframes orbiteEntree { from { opacity: 0; transform: translate(-50%, -50%) scale(.55); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } } /* --- Téléphones : pastilles seules --------------------------------- Sous 576 px les libellés se chevaucheraient ; on ne garde que les icônes, agrandies pour rester confortables au doigt. Le nom de chaque espace reste porté par l'attribut aria-label du lien. */ @media (max-width: 575.98px) { .orbite { --chip: 46px; } .orbite-sat { width: auto; gap: 0; } .orbite-label { display: none; } } /* --- Accessibilité : mouvement réduit ------------------------------- */ @media (prefers-reduced-motion: reduce) { .orbite-piste, .orbite-contre, .orbite-rayons, .orbite-sat, .orbite-coeur::after { animation: none !important; } .orbite-coeur::after { opacity: .3; } } /* ===================================================================== PAGES AJOUTÉES — admission, frais, palmarès, diplômés, travaux, enseignants, offres d'emploi, rubriques de contenu, newsletter. Tout s'appuie sur les jetons existants : rien de codé en dur. ===================================================================== */ /* --- Barre de filtres commune --------------------------------------- */ .filtres-barre { display: flex; flex-wrap: wrap; gap: .6rem; background: var(--surface); border: 1px solid var(--isdr-line); border-radius: var(--isdr-radius, 14px); padding: .8rem; } .filtres-champ { position: relative; flex: 1 1 240px; min-width: 0; } .filtres-champ i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--isdr-muted); font-size: .85rem; pointer-events: none; } .filtres-champ .form-control { padding-left: 2.4rem; } .filtres-barre .form-select { flex: 0 1 190px; } .filtres-barre .btn { flex: 0 0 auto; } /* --- Annuaire des enseignants --------------------------------------- */ .carte-membre { text-align: center; padding: 1.6rem 1.1rem; text-decoration: none; } .membre-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center top; display: block; margin: 0 auto .9rem; border: 1px solid var(--isdr-line); } .carte-membre .avatar-initials.membre-photo { display: grid; place-items: center; font-size: 1.6rem; } .carte-membre h3 { font-size: .98rem; margin-bottom: .25rem; color: var(--isdr-ink); } .carte-membre .grade { font-size: .82rem; color: var(--accent); margin-bottom: .2rem; font-weight: 500; } .carte-membre .fonction { font-size: .8rem; color: var(--isdr-muted); margin-bottom: 0; } .carte-membre:hover h3 { color: var(--accent); } .lien-fiche { display: inline-flex; align-items: center; gap: .4rem; margin-top: 1rem; font-size: .82rem; font-weight: 600; color: var(--accent); } .lien-fiche i { transition: transform var(--isdr-transition); } .card-isdr:hover .lien-fiche i, a:hover > .lien-fiche i { transform: translateX(3px); } .fiche-membre { text-align: center; } .fiche-photo { width: 100%; max-width: 220px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; object-position: center top; display: block; margin: 0 auto; border: 1px solid var(--isdr-line); } .fiche-membre .avatar-initials.fiche-photo { display: grid; place-items: center; font-size: 3rem; height: auto; } .fiche-membre .fiche-infos, .fiche-membre dl { text-align: left; } .collegue-ligne { text-decoration: none; transition: border-color var(--isdr-transition); } .collegue-ligne:hover { border-color: var(--accent); } .collegue-photo { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; border: 1px solid var(--isdr-line); } .collegue-ligne .avatar-initials.collegue-photo { display: grid; place-items: center; font-size: .85rem; } /* --- Listes de définition des fiches -------------------------------- */ .fiche-infos { margin: 0; } .fiche-infos > div { padding: .55rem 0; border-bottom: 1px solid var(--isdr-line); } .fiche-infos > div:last-child { border-bottom: none; } .fiche-infos dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--isdr-muted); font-weight: 600; margin-bottom: .15rem; } .fiche-infos dd { margin: 0; font-size: .9rem; color: var(--isdr-ink); } /* --- Sommaires de rubriques et pages de contenu --------------------- */ .card-rubrique { text-decoration: none; padding: 1.6rem; } .card-rubrique h3 { color: var(--isdr-ink); margin-bottom: .5rem; } .card-rubrique:hover h3 { color: var(--accent); } .card-rubrique p { margin-bottom: 0; } .page-visuel { margin: 0 0 1.5rem; } .page-visuel img { width: 100%; border-radius: var(--isdr-radius, 14px); border: 1px solid var(--isdr-line); display: block; } .liste-voisines { list-style: none; margin: 0; padding: 0; } .liste-voisines li + li { border-top: 1px solid var(--isdr-line); } .liste-voisines a { display: flex; align-items: center; gap: .7rem; padding: .7rem 0; font-size: .89rem; color: var(--isdr-body); text-decoration: none; } .liste-voisines a i { color: var(--accent); width: 1.1rem; text-align: center; flex-shrink: 0; } .liste-voisines a:hover { color: var(--accent); } /* --- Admission ------------------------------------------------------ */ .bandeau-admission { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem; justify-content: space-between; background: var(--surface); border: 1px solid var(--isdr-line); border-left: 3px solid var(--accent); border-radius: var(--isdr-radius, 14px); padding: 1.6rem 1.8rem; } .bandeau-admission.ferme { border-left-color: var(--isdr-muted); } .compte-a-rebours { display: flex; gap: .55rem; } .compte-a-rebours > div { min-width: 62px; text-align: center; padding: .6rem .4rem; background: var(--surface-2); border: 1px solid var(--isdr-line); border-radius: 11px; } .compte-a-rebours strong { display: block; font-size: 1.35rem; line-height: 1.1; color: var(--accent); font-variant-numeric: tabular-nums; } .compte-a-rebours span { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--isdr-muted); } .compte-a-rebours.termine strong { color: var(--isdr-muted); } .etape { position: relative; padding: 1.6rem 1.3rem 1.3rem; } .etape-num { position: absolute; top: 1rem; right: 1.2rem; font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--isdr-line); } .etape h3 { color: var(--isdr-ink); margin: .9rem 0 .5rem; } .liste-pieces { list-style: none; margin: 0; padding: 0; } .liste-pieces li { position: relative; padding: .6rem 0 .6rem 1.9rem; font-size: .92rem; color: var(--isdr-body); border-bottom: 1px solid var(--isdr-line); } .liste-pieces li:last-child { border-bottom: none; } .liste-pieces li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: .7rem; font-size: .78rem; color: var(--accent); } .encart-paiement .montant-cle { color: var(--accent); font-size: 1.05rem; } .titre-section-form { font-size: .78rem; text-transform: uppercase; letter-spacing: .12em; color: var(--isdr-muted); font-weight: 600; margin: 2.2rem 0 1rem; padding-bottom: .5rem; border-bottom: 1px solid var(--isdr-line); } .titre-section-form:first-of-type { margin-top: 0; } /* Pot de miel : invisible à l'œil, présent pour les robots. */ .champ-piege { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --- Frais ---------------------------------------------------------- */ .table-frais { width: 100%; border-collapse: collapse; } .table-frais tr { border-bottom: 1px solid var(--isdr-line); } .table-frais tr:last-child { border-bottom: none; } .table-frais th { text-align: left; font-weight: 500; font-size: .92rem; color: var(--isdr-ink); padding: .75rem 1rem .75rem 0; } .table-frais th small, .table-frais td small { display: block; font-size: .78rem; color: var(--isdr-muted); font-weight: 400; margin-top: .15rem; } .table-frais td { text-align: right; white-space: nowrap; padding: .75rem 0; font-weight: 600; color: var(--accent); font-variant-numeric: tabular-nums; } .table-frais.complete td .montant { font-size: 1.02rem; } /* --- Palmarès ------------------------------------------------------- */ .frise-palmares { position: relative; } .annee-palmares { display: grid; grid-template-columns: 120px 1fr; gap: 1.5rem; margin-bottom: 2rem; } .annee-etiquette { font-size: 1.05rem; font-weight: 700; color: var(--isdr-ink); padding-top: .9rem; position: relative; } .annee-etiquette::after { content: ''; position: absolute; right: -.75rem; top: 1rem; bottom: -2rem; width: 1px; background: var(--isdr-line); } .annee-palmares:last-child .annee-etiquette::after { bottom: 0; } .annee-contenu { display: flex; flex-direction: column; gap: .8rem; } @media (max-width: 575.98px) { .annee-palmares { grid-template-columns: 1fr; gap: .8rem; } .annee-etiquette { padding-top: 0; } .annee-etiquette::after { display: none; } } /* --- Annuaire des diplômés ------------------------------------------ */ .table-diplomes { width: 100%; border-collapse: collapse; margin: 0; } .table-diplomes thead th { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--isdr-muted); font-weight: 600; text-align: left; padding: 1rem; background: var(--surface-2); white-space: nowrap; } .table-diplomes tbody td { padding: .85rem 1rem; font-size: .89rem; color: var(--isdr-body); border-top: 1px solid var(--isdr-line); vertical-align: middle; } .table-diplomes tbody tr:hover td { background: var(--surface-2); } .table-diplomes .num-ligne { color: var(--isdr-muted); font-variant-numeric: tabular-nums; } .diplome-nom { display: flex; align-items: center; gap: .7rem; } .diplome-nom strong { display: block; color: var(--isdr-ink); font-weight: 600; font-size: .92rem; } .diplome-nom small { display: block; font-size: .78rem; color: var(--isdr-muted); } .avatar-initials.mini { width: 34px; height: 34px; border-radius: 50%; display: inline-grid; place-items: center; font-size: .72rem; font-weight: 600; flex-shrink: 0; background: var(--surface-2); color: var(--accent); border: 1px solid var(--isdr-line); } /* --- Travaux de fin de cycle ---------------------------------------- */ .carte-travail { padding: 1.5rem; display: flex; flex-direction: column; } .carte-travail h2 a { color: var(--isdr-ink); text-decoration: none; } .carte-travail h2 a:hover { color: var(--accent); } .milieu-travail { display: flex; align-items: center; gap: .45rem; font-size: .84rem; color: var(--isdr-muted); margin: .75rem 0; } .milieu-travail i { color: var(--accent); font-size: .78rem; } .membres-travail { display: flex; align-items: center; gap: .35rem; margin-bottom: .9rem; flex-wrap: wrap; } .membres-travail .avatar-initials.mini { width: 30px; height: 30px; font-size: .66rem; } .membres-travail small { font-size: .78rem; color: var(--isdr-muted); margin-left: .35rem; } .encadrement { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; margin: 0 0 1rem; padding-top: .9rem; border-top: 1px solid var(--isdr-line); } .encadrement span { font-size: .82rem; color: var(--isdr-body); } .encadrement strong { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em; color: var(--isdr-muted); font-weight: 600; } .carte-travail .lien-fiche { margin-top: auto; } .liste-membres { list-style: none; margin: 0; padding: 0; } .liste-membres li { display: flex; align-items: center; gap: .7rem; padding: .6rem 0; font-size: .89rem; color: var(--isdr-body); } .liste-membres li + li { border-top: 1px solid var(--isdr-line); } /* --- Offres d'emploi ------------------------------------------------ */ .carte-offre { padding: 1.5rem; display: flex; flex-direction: column; } .carte-offre h2 a { color: var(--isdr-ink); text-decoration: none; } .carte-offre h2 a:hover { color: var(--accent); } .carte-offre .lien-fiche { margin-top: auto; } .badge-offre { font-size: .72rem; font-weight: 600; padding: .25rem .65rem; border-radius: 999px; text-transform: uppercase; letter-spacing: .05em; } .badge-offre.ouverte { background: var(--prio-normale-bg); color: var(--prio-normale-fg); } .badge-offre.close { background: var(--surface-2); color: var(--isdr-muted); border: 1px solid var(--isdr-line); } .reference-offre { font-size: .76rem; color: var(--isdr-muted); font-family: var(--bs-font-monospace, monospace); } .meta-offre { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin: .9rem 0; } .meta-offre span { display: inline-flex; align-items: center; gap: .4rem; font-size: .82rem; color: var(--isdr-muted); } .meta-offre i { color: var(--accent); font-size: .78rem; } /* --- Lettre d'information (pied de page) ---------------------------- */ .footer-newsletter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 2.5rem; padding: 1.6rem 0; border-top: 1px solid rgba(255, 255, 255, .12); } .footer-newsletter h5 { margin-bottom: .3rem; } .footer-newsletter p { margin: 0; font-size: .87rem; opacity: .78; max-width: 46ch; } .form-newsletter { display: flex; gap: .55rem; flex: 1 1 320px; max-width: 460px; } .form-newsletter .form-control { flex: 1 1 auto; min-width: 0; } .form-newsletter .btn { flex: 0 0 auto; white-space: nowrap; } .liens-legaux { display: flex; flex-wrap: wrap; gap: 1.1rem; } /* --- Bandeau cookies ------------------------------------------------ */ .bandeau-cookies { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040; background: var(--surface); border-top: 1px solid var(--isdr-line); box-shadow: var(--isdr-shadow-lg); transform: translateY(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); } .bandeau-cookies.visible { transform: translateY(0); } .bandeau-cookies .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1rem; padding-bottom: 1rem; } .bandeau-cookies p { margin: 0; font-size: .87rem; color: var(--isdr-body); max-width: 74ch; } .bandeau-cookies a { color: var(--accent); } @media (prefers-reduced-motion: reduce) { .bandeau-cookies { transition: none; } } /* --- Bloc de code d'exemple (administration) ------------------------ */ .bloc-code { background: var(--surface-2); border: 1px solid var(--isdr-line); border-radius: 10px; padding: .9rem 1rem; font-size: .8rem; color: var(--isdr-body); overflow-x: auto; margin: 0; } /* ===================================================================== CORRECTION — débordement horizontal sur téléphone Les rangées Bootstrap portent des marges négatives égales à la moitié de leur gouttière. Avec g-4 ou g-5 (24 et 48 px), ces marges dépassent le padding du conteneur (12 px) et la page défile latéralement. On ramène la gouttière horizontale à 1.5rem sous 576 px : les marges redeviennent de -12 px, exactement le padding du conteneur. La gouttière verticale, elle, n'est pas touchée. ===================================================================== */ @media (max-width: 575.98px) { .row { --bs-gutter-x: 1.5rem; } } /* Sur les très petits écrans (≤ 400 px), le sous-titre de la marque « Goma — République Démocratique du Congo » est plus large que l'écran. On le masque et on tronque proprement le sigle. */ @media (max-width: 400px) { .navbar-brand { max-width: calc(100vw - 5.5rem); overflow: hidden; } .navbar-brand .brand-text { min-width: 0; } .navbar-brand .brand-sub { display: none; } .navbar-brand .brand-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } } /* Les libellés de la bande de chiffres sont en majuscules espacées : un mot long comme « ACADÉMIQUES » dépasse sa colonne sous 400 px. On resserre l'interlettrage et on autorise la coupure en dernier recours, ce qui vaut aussi pour tout libellé ajouté plus tard. */ @media (max-width: 400px) { .stat-item { padding-left: .25rem; padding-right: .25rem; } .stat-item .lbl { font-size: .7rem; letter-spacing: .04em; overflow-wrap: anywhere; } } /* ===================================================================== CORRECTIONS DE CONTRASTE (WCAG 2.1 AA, mesuré et non estimé) Trois textes très petits passaient sous le seuil de 4.5:1 en mode clair. Le mode sombre était déjà conforme sur toutes les pages. ===================================================================== */ /* Libellés du compte à rebours : 10,9 px — 3,48:1 → 5,07:1 */ .compte-a-rebours span { color: var(--isdr-muted-fort); } /* Sous-titre de la marque : 10,9 px — 3,80:1 → 5,59:1 */ .navbar-brand .brand-sub { color: var(--isdr-muted-fort); } /* Les liens placés dans une alerte Bootstrap héritaient du bleu par défaut (#0D6EFD, 4,39:1) au lieu de l'accent de l'institut. */ .alert a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; } .alert a:not(.btn):hover { color: var(--accent-hover); } /* Le sur-titre des sections (11,8 px, majuscules espacées) est présent sur tout le site : 3,48:1 en mode clair. Même correction. */ .eyebrow { color: var(--isdr-muted-fort); } /* ===================================================================== CORRECTION — cartes empilées qui débordaient sur le pied de page .card-isdr portait height:100%, prévu pour égaliser des cartes placées côte à côte dans une rangée. Dès que plusieurs cartes sont empilées dans une même colonne (page d'une offre, d'un travail, d'une fiche enseignant), chacune prenait la hauteur de toute la colonne et se superposait aux suivantes, puis au pied de page. L'étirement ne vaut donc plus que pour une carte seule dans sa colonne — le cas des grilles — ou marquée explicitement .h-100. ===================================================================== */ [class*="col-"] > .card-isdr:only-child, .card-isdr.h-100 { height: 100%; }